{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"autocomplete","type":"registry:ui","title":"Autocomplete","description":"","dependencies":["@base-ui/react","class-variance-authority","cn"],"registryDependencies":["scroll-area"],"files":[{"path":"autocomplete.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"cn\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst inputVariants = cva(\n  \"outline-none flex w-full text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [[readonly]]:bg-muted/80 [[readonly]]:cursor-not-allowed border border-input focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg bg-transparent dark:bg-input/30 text-sm transition-colors focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-3\",\n  {\n    variants: {\n      size: {\n        sm: \"h-7 px-2 [&~[data-slot=autocomplete-clear]]:end-1.5 [&~[data-slot=autocomplete-trigger]]:end-1.5\",\n        default:\n          \"h-8 px-2.5 [&~[data-slot=autocomplete-clear]]:end-1.75 [&~[data-slot=autocomplete-trigger]]:end-1.75\",\n        lg: \"h-9 px-2.5 [&~[data-slot=autocomplete-clear]]:end-2 [&~[data-slot=autocomplete-trigger]]:end-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nconst Autocomplete = AutocompletePrimitive.Root\n\nfunction AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props) {\n  return (\n    <AutocompletePrimitive.Value data-slot=\"autocomplete-value\" {...props} />\n  )\n}\n\nfunction AutocompleteInput({\n  className,\n  size = \"default\",\n  showClear = false,\n  showTrigger = false,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> &\n  VariantProps<typeof inputVariants> & {\n    showClear?: boolean\n    showTrigger?: boolean\n  }) {\n  return (\n    <div className=\"relative w-full\">\n      <AutocompletePrimitive.Input\n        data-slot=\"autocomplete-input\"\n        data-size={size}\n        className={cn(inputVariants({ size }), className)}\n        {...props}\n      />\n      {showTrigger && <AutocompleteTrigger />}\n      {showClear && <AutocompleteClear />}\n    </div>\n  )\n}\n\nfunction AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props) {\n  return (\n    <AutocompletePrimitive.Status\n      data-slot=\"autocomplete-status\"\n      className={cn(\n        \"text-muted-foreground px-2 py-1.5 text-sm empty:m-0 empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompletePortal({ ...props }: AutocompletePrimitive.Portal.Props) {\n  return (\n    <AutocompletePrimitive.Portal data-slot=\"autocomplete-portal\" {...props} />\n  )\n}\n\nfunction AutocompleteBackdrop({\n  ...props\n}: AutocompletePrimitive.Backdrop.Props) {\n  return (\n    <AutocompletePrimitive.Backdrop\n      data-slot=\"autocomplete-backdrop\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompletePositioner({\n  className,\n  ...props\n}: AutocompletePrimitive.Positioner.Props) {\n  return (\n    <AutocompletePrimitive.Positioner\n      data-slot=\"autocomplete-positioner\"\n      className={cn(\"z-50 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteList({\n  className,\n  scrollAreaClassName,\n  ...props\n}: AutocompletePrimitive.List.Props & {\n  scrollAreaClassName?: string\n  scrollFade?: boolean\n  scrollbarGutter?: boolean\n}) {\n  // Out of the layout while the list renders nothing. Base UI's scroll area\n  // skips measuring 0px tall content, so a list that overflowed and then\n  // filtered to empty kept its old thumb, hanging below the popup. Keyed on\n  // :empty, not data-empty, which a list without `items` always carries.\n  return (\n    <ScrollArea\n      className={cn(\n        \"size-full min-h-0 has-[[data-slot=autocomplete-list]:empty]:hidden **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain\",\n        scrollAreaClassName\n      )}\n    >\n      <AutocompletePrimitive.List\n        data-slot=\"autocomplete-list\"\n        className={cn(\n          \"not-empty:px-1 not-empty:py-1 not-empty:scroll-py-1 in-data-has-overflow-y:me-3\",\n          className\n        )}\n        {...props}\n      />\n    </ScrollArea>\n  )\n}\n\nfunction AutocompleteCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Collection>) {\n  return (\n    <AutocompletePrimitive.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteRow({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Row>) {\n  return (\n    <AutocompletePrimitive.Row\n      data-slot=\"autocomplete-row\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {\n  return (\n    <AutocompletePrimitive.Item\n      data-slot=\"autocomplete-item\"\n      className={cn(\n        \"text-foreground data-highlighted:text-foreground data-highlighted:before:bg-accent gap-1.5\",\n        \"rounded-md\",\n        \"data-highlighted:before:rounded-md\",\n        /* Icon sizing mirrors the shadcn Select item. Rhea tracks nova, as its\n           shadcn Input metrics match nova's; the row radius above follows the\n           shadcn Select and Dropdown Menu items, xl in rhea. */\n        \"px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([role=img]):not([class*=text-])]:opacity-60\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface AutocompleteContentProps extends React.ComponentProps<\n  typeof AutocompletePrimitive.Popup\n> {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"]\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"]\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"]\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"]\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"]\n  showBackdrop?: boolean\n}\n\nfunction AutocompleteContent({\n  className,\n  children,\n  showBackdrop = false,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset = 0,\n  side = \"bottom\",\n  anchor,\n  ...props\n}: AutocompleteContentProps) {\n  return (\n    <AutocompletePortal>\n      {showBackdrop && <AutocompleteBackdrop />}\n      <AutocompletePositioner\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n        anchor={anchor}\n      >\n        <div className=\"relative flex max-h-full\">\n          <AutocompletePrimitive.Popup\n            data-slot=\"autocomplete-popup\"\n            className={cn(\n              \"bg-popover text-popover-foreground rounded-lg shadow-md ring-foreground/10 flex max-h-[min(var(--available-height),24rem)] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) scroll-pt-2 scroll-pb-2 flex-col overscroll-contain py-0.5 ring-1 transition-[scale,opacity] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 has-data-[side=none]:scale-100 has-data-[side=none]:transition-none\",\n              className\n            )}\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </div>\n      </AutocompletePositioner>\n    </AutocompletePortal>\n  )\n}\n\nfunction AutocompleteGroup({\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {\n  return (\n    <AutocompletePrimitive.Group data-slot=\"autocomplete-group\" {...props} />\n  )\n}\n\nfunction AutocompleteGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      data-slot=\"autocomplete-group-label\"\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {\n  return (\n    <AutocompletePrimitive.Empty\n      data-slot=\"autocomplete-empty\"\n      className={cn(\n        \"text-muted-foreground px-2 py-1.5 text-sm text-center empty:m-0 empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AutocompleteClear({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {\n  return (\n    <AutocompletePrimitive.Clear\n      data-slot=\"autocomplete-clear\"\n      className={cn(\n        \"ring-offset-background focus:ring-ring absolute top-1/2 -translate-y-1/2 cursor-pointer opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-disabled:pointer-events-none\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"size-4\"\n      />\n    </AutocompletePrimitive.Clear>\n  )\n}\n\nfunction AutocompleteTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {\n  return (\n    <AutocompletePrimitive.Trigger\n      data-slot=\"autocomplete-trigger\"\n      className={cn(\n        \"focus:ring-ring ring-offset-background absolute top-1/2 -translate-y-1/2 cursor-pointer focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none has-[+[data-slot=autocomplete-clear]]:hidden data-disabled:pointer-events-none\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronsUpDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretUpDownIcon\"\n        remixicon=\"RiExpandUpDownLine\"\n        className=\"size-4 opacity-70\"\n      />\n    </AutocompletePrimitive.Trigger>\n  )\n}\n\nfunction AutocompleteArrow({\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Arrow>) {\n  return (\n    <AutocompletePrimitive.Arrow data-slot=\"autocomplete-arrow\" {...props} />\n  )\n}\n\nfunction AutocompleteSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompletePrimitive.Separator>) {\n  return (\n    <AutocompletePrimitive.Separator\n      data-slot=\"autocomplete-separator\"\n      className={cn(\n        \"bg-border my-1.5 h-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Autocomplete,\n  AutocompleteValue,\n  AutocompleteTrigger,\n  AutocompleteInput,\n  AutocompleteStatus,\n  AutocompletePortal,\n  AutocompleteBackdrop,\n  AutocompletePositioner,\n  AutocompleteContent,\n  AutocompleteList,\n  AutocompleteCollection,\n  AutocompleteRow,\n  AutocompleteItem,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteEmpty,\n  AutocompleteClear,\n  AutocompleteArrow,\n  AutocompleteSeparator,\n}","target":"components/reui/autocomplete.tsx"}]}