"use client"; import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"; import { Input as InputPrimitive } from "@base-ui/react/input"; import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"; import { ChevronsUpDownIcon, XIcon } from "lucide-react"; import type React from "react"; // ── Utilities ────────────────────────────────────────────────────────────── function cn(...inputs: (string | undefined | null | false)[]): string { return inputs.filter(Boolean).join(" "); } // ── Input ────────────────────────────────────────────────────────────────── type InputProps = Omit< InputPrimitive.Props & React.RefAttributes, "size" > & { size?: "sm" | "default" | "lg" | number; unstyled?: boolean; nativeInput?: boolean; }; function Input({ className, size = "default", unstyled = false, nativeInput = false, ...props }: InputProps): React.ReactElement { const inputClassName = cn( "h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5", size === "sm" && "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5", size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5", (props as any).type === "search" && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", (props as any).type === "file" && "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm", ); return ( {nativeInput ? ( ) : ( )} ); } // ── ScrollArea ───────────────────────────────────────────────────────────── function ScrollArea({ className, children, scrollFade = false, scrollbarGutter = false, ...props }: ScrollAreaPrimitive.Root.Props & { scrollFade?: boolean; scrollbarGutter?: boolean; }): React.ReactElement { return ( {children} ); } function ScrollBar({ className, orientation = "vertical", ...props }: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement { return ( ); } // ── Autocomplete ─────────────────────────────────────────────────────────── export const Autocomplete: typeof AutocompletePrimitive.Root = AutocompletePrimitive.Root; export function AutocompleteInput({ className, showTrigger = false, showClear = false, startAddon, size, triggerProps, clearProps, ...props }: Omit & { showTrigger?: boolean; showClear?: boolean; startAddon?: React.ReactNode; size?: "sm" | "default" | "lg" | number; ref?: React.Ref; triggerProps?: AutocompletePrimitive.Trigger.Props; clearProps?: AutocompletePrimitive.Clear.Props; }): React.ReactElement { const sizeValue = (size ?? "default") as "sm" | "default" | "lg" | number; return ( {startAddon && ( )} } {...props} /> {showTrigger && ( )} {showClear && ( )} ); } export function AutocompletePopup({ className, children, side = "bottom", sideOffset = 4, alignOffset, align = "start", anchor, ...props }: AutocompletePrimitive.Popup.Props & { align?: AutocompletePrimitive.Positioner.Props["align"]; sideOffset?: AutocompletePrimitive.Positioner.Props["sideOffset"]; alignOffset?: AutocompletePrimitive.Positioner.Props["alignOffset"]; side?: AutocompletePrimitive.Positioner.Props["side"]; anchor?: AutocompletePrimitive.Positioner.Props["anchor"]; }): React.ReactElement { return ( {children} ); } export function AutocompleteItem({ className, children, ...props }: AutocompletePrimitive.Item.Props): React.ReactElement { return ( {children} ); } export function AutocompleteSeparator({ className, ...props }: AutocompletePrimitive.Separator.Props): React.ReactElement { return ( ); } export function AutocompleteGroup({ className, ...props }: AutocompletePrimitive.Group.Props): React.ReactElement { return ( ); } export function AutocompleteGroupLabel({ className, ...props }: AutocompletePrimitive.GroupLabel.Props): React.ReactElement { return ( ); } export function AutocompleteEmpty({ className, ...props }: AutocompletePrimitive.Empty.Props): React.ReactElement { return ( ); } export function AutocompleteRow({ className, ...props }: AutocompletePrimitive.Row.Props): React.ReactElement { return ( ); } export function AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props): React.ReactElement { return ( ); } export function AutocompleteList({ className, ...props }: AutocompletePrimitive.List.Props): React.ReactElement { return ( ); } export function AutocompleteClear({ className, ...props }: AutocompletePrimitive.Clear.Props): React.ReactElement { return ( ); } export function AutocompleteStatus({ className, ...props }: AutocompletePrimitive.Status.Props): React.ReactElement { return ( ); } export function AutocompleteCollection({ ...props }: AutocompletePrimitive.Collection.Props): React.ReactElement { return ( ); } export function AutocompleteTrigger({ className, children, ...props }: AutocompletePrimitive.Trigger.Props): React.ReactElement { return ( {children} ); } export const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter = AutocompletePrimitive.useFilter; export { AutocompletePrimitive };