Autocomplete

1"use client";
2 
3import * as React from "react";
4import { Check, ChevronDown, X, Search } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import {
8  fieldVariants,
9  floatingItemVariants,
10  floatingSurfaceVariants,
11  type FloatingItemProps,
12  type FloatingSurfaceProps,
13} from "@/components/ui/recipes";
14 
15/* ================================================================== */
16/*  AUTOCOMPLETE — Searchable combobox / typeahead                     */
17/* ================================================================== */
18 
19export interface AutocompleteOption {
20  /** Unique value */
21  value: string;
22  /** Display label */
23  label: string;
24  /** Whether this option is disabled */
25  disabled?: boolean;
26  /** Optional group name */
27  group?: string;
28  description?: string;
29  media?: React.ReactNode;
30}
31 
32export interface AutocompleteProps {
33  /** Available options */
34  options: AutocompleteOption[];
35  /** Currently selected value(s) */
36  value?: string | string[];
37  defaultValue?: string | string[];
38  /** Called when selection changes */
39  onValueChange?: (value: string | string[]) => void;
40  open?: boolean;
41  defaultOpen?: boolean;
42  onOpenChange?: (open: boolean) => void;
43  /** Placeholder for the input */
44  placeholder?: string;
45  /** Allow multiple selections */
46  multiple?: boolean;
47  /** Allow free-form text (not just from the list) */
48  freeSolo?: boolean;
49  /** Custom filter function */
50  filterFn?: (option: AutocompleteOption, query: string) => boolean;
51  /** Called when the search query changes */
52  onSearchChange?: (query: string) => void;
53  /** Show a loading spinner */
54  loading?: boolean;
55  state?: "ready" | "loading" | "error";
56  loadingText?: React.ReactNode;
57  errorText?: React.ReactNode;
58  /** Disabled state */
59  disabled?: boolean;
60  /** Empty state text */
61  emptyText?: string;
62  emptyContent?: React.ReactNode;
63  /** Additional class for the wrapper */
64  className?: string;
65  variant?: "default" | "soft" | "glass";
66  radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
67  size?: "sm" | "md" | "lg";
68  dropdownSurface?: NonNullable<FloatingSurfaceProps["surface"]>;
69  dropdownRadius?: NonNullable<FloatingSurfaceProps["radius"]>;
70  itemSize?: NonNullable<FloatingItemProps["size"]>;
71}
72 
73function defaultFilter(option: AutocompleteOption, query: string) {
74  return option.label.toLowerCase().includes(query.toLowerCase());
75}
76 
77function Autocomplete({
78  options,
79  value,
80  defaultValue,
81  onValueChange,
82  open: controlledOpen,
83// … truncated