| 11 | AutocompletePrimitive.Root; |
| 12 | |
| 13 | export function AutocompleteInput({ |
| 14 | className, |
| 15 | showTrigger = false, |
| 16 | showClear = false, |
| 17 | startAddon, |
| 18 | size, |
| 19 | triggerProps, |
| 20 | clearProps, |
| 21 | ...props |
| 22 | }: Omit<AutocompletePrimitive.Input.Props, "size"> & { |
| 23 | showTrigger?: boolean; |
| 24 | showClear?: boolean; |
| 25 | startAddon?: React.ReactNode; |
| 26 | size?: "sm" | "default" | "lg" | number; |
| 27 | ref?: React.Ref<HTMLInputElement>; |
| 28 | triggerProps?: AutocompletePrimitive.Trigger.Props; |
| 29 | clearProps?: AutocompletePrimitive.Clear.Props; |
| 30 | }): React.ReactElement { |
| 31 | const sizeValue = (size ?? "default") as "sm" | "default" | "lg" | number; |
| 32 | |
| 33 | return ( |
| 34 | <AutocompletePrimitive.InputGroup |
| 35 | className="relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64" |
| 36 | data-slot="autocomplete-input-group" |
| 37 | > |
| 38 | {startAddon && ( |
| 39 | <div |
| 40 | aria-hidden="true" |
| 41 | className="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 [&_svg]:-mx-0.5" |
| 42 | data-slot="autocomplete-start-addon" |
| 43 | > |
| 44 | {startAddon} |
| 45 | </div> |
| 46 | )} |
| 47 | <AutocompletePrimitive.Input |
| 48 | className={cn( |
| 49 | startAddon && |
| 50 | "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)]", |
| 51 | sizeValue === "sm" |
| 52 | ? "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5" |
| 53 | : "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7", |
| 54 | className, |
| 55 | )} |
| 56 | data-slot="autocomplete-input" |
| 57 | render={<Input nativeInput size={sizeValue} />} |
| 58 | {...props} |
| 59 | /> |
| 60 | {showTrigger && ( |
| 61 | <AutocompleteTrigger |
| 62 | className={cn( |
| 63 | "absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 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", |
| 64 | sizeValue === "sm" ? "end-0" : "end-0.5", |
| 65 | )} |
| 66 | {...triggerProps} |
| 67 | > |
| 68 | <AutocompletePrimitive.Icon data-slot="autocomplete-icon"> |
| 69 | <ChevronsUpDownIcon /> |
| 70 | </AutocompletePrimitive.Icon> |