| 10 | const Autocomplete = AutocompletePrimitive.Root; |
| 11 | |
| 12 | function AutocompleteInput({ |
| 13 | className, |
| 14 | showTrigger = false, |
| 15 | showClear = false, |
| 16 | startAddon, |
| 17 | size, |
| 18 | ...props |
| 19 | }: Omit<AutocompletePrimitive.Input.Props, "size"> & { |
| 20 | showTrigger?: boolean; |
| 21 | showClear?: boolean; |
| 22 | startAddon?: React.ReactNode; |
| 23 | size?: "sm" | "default" | "lg" | number; |
| 24 | ref?: React.Ref<HTMLInputElement>; |
| 25 | }) { |
| 26 | const sizeValue = (size ?? "default") as "sm" | "default" | "lg" | number; |
| 27 | |
| 28 | return ( |
| 29 | <div className="relative w-full"> |
| 30 | {startAddon && ( |
| 31 | <div |
| 32 | aria-hidden="true" |
| 33 | className="[&_svg]:-mx-0.5 pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4" |
| 34 | data-slot="autocomplete-start-addon" |
| 35 | > |
| 36 | {startAddon} |
| 37 | </div> |
| 38 | )} |
| 39 | <AutocompletePrimitive.Input |
| 40 | className={cn( |
| 41 | startAddon && |
| 42 | "data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]", |
| 43 | sizeValue === "sm" |
| 44 | ? "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5" |
| 45 | : "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7", |
| 46 | className, |
| 47 | )} |
| 48 | data-slot="autocomplete-input" |
| 49 | render={<Input size={sizeValue} />} |
| 50 | {...props} |
| 51 | /> |
| 52 | {showTrigger && ( |
| 53 | <AutocompleteTrigger |
| 54 | className={cn( |
| 55 | "-translate-y-1/2 absolute top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", |
| 56 | sizeValue === "sm" ? "end-0" : "end-0.5", |
| 57 | )} |
| 58 | > |
| 59 | <ChevronsUpDownIcon /> |
| 60 | </AutocompleteTrigger> |
| 61 | )} |
| 62 | {showClear && ( |
| 63 | <AutocompleteClear |
| 64 | className={cn( |
| 65 | "-translate-y-1/2 absolute top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", |
| 66 | sizeValue === "sm" ? "end-0" : "end-0.5", |
| 67 | )} |
| 68 | > |
| 69 | <XIcon /> |