{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "A text field that filters its list as you type. With `multiple` set, each pick becomes a chip in the field.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "@afterglow/theme",
    "@afterglow/input-group"
  ],
  "files": [
    {
      "path": "registry/terminal/ui/combobox.tsx",
      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/terminal/ui/input-group\";\n\nconst Combobox = ComboboxPrimitive.Root;\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={cn(\n        // The trigger shows the chosen value, so the button it renders drops\n        // the label treatment: a value reads as written.\n        \"font-normal normal-case tracking-normal [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"pointer-events-none size-4 text-phosphor-dim\" />\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      className={cn(className)}\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton size=\"icon-xs\" variant=\"ghost\" />}\n      {...props}\n    >\n      <XIcon className=\"pointer-events-none\" />\n    </ComboboxPrimitive.Clear>\n  );\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger ? (\n          <InputGroupButton\n            className=\"data-pressed:bg-transparent group-has-data-[slot=combobox-clear]/input-group:hidden\"\n            data-slot=\"input-group-button\"\n            disabled={disabled}\n            render={<ComboboxTrigger />}\n            size=\"icon-xs\"\n            variant=\"ghost\"\n          />\n        ) : null}\n        {showClear ? <ComboboxClear disabled={disabled} /> : null}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  );\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ComboboxPrimitive.Popup\n          className={cn(\n            \"group/combobox-content relative max-h-(--available-height) w-(--anchor-width) min-w-[calc(var(--anchor-width)+--spacing(7))] max-w-(--available-width) overflow-hidden rounded-none border border-line-strong bg-popover text-popover-foreground shadow-panel outline-none data-[chips=true]:min-w-(--anchor-width) motion-reduce:!animate-none\",\n            \"data-[side=bottom]:data-open:animate-select-fold-in-down data-[side=top]:data-open:animate-select-fold-in-up\",\n            \"data-[side=bottom]:data-closed:animate-select-fold-out-up data-[side=top]:data-closed:animate-select-fold-out-down\",\n            \"*:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:w-auto\",\n            className\n          )}\n          data-chips={!!anchor}\n          data-slot=\"combobox-content\"\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      className={cn(\n        \"max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n        className\n      )}\n      data-slot=\"combobox-list\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"relative flex w-full cursor-default select-none items-center gap-2 rounded-none py-1.5 pr-8 pl-2 font-mono text-sm outline-none\",\n        \"data-highlighted:bg-phosphor/10 data-highlighted:text-phosphor-bright\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-40\",\n        \"data-selected:text-phosphor-bright data-selected:shadow-[inset_2px_0_0_var(--phosphor)]\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-3.5 items-center justify-center\" />\n        }\n      >\n        <CheckIcon className=\"size-3.5 text-phosphor\" strokeWidth={3} />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-bold font-mono text-3xs text-phosphor-dim uppercase tracking-terminal-xl\",\n        className\n      )}\n      data-slot=\"combobox-label\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"hidden w-full justify-center py-3 text-center font-mono text-phosphor-dim text-sm group-data-empty/combobox-content:flex\",\n        className\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-line\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"flex min-h-9 flex-wrap items-center gap-1 rounded-none border border-input bg-panel-sunken px-3 py-1 font-mono text-phosphor-bright text-sm transition duration-150 ease-terminal has-data-[slot=combobox-chip]:px-1\",\n        \"focus-within:border-line-strong focus-within:shadow-glow\",\n        \"has-aria-invalid:border-destructive has-aria-invalid:shadow-glow-destructive\",\n        className\n      )}\n      data-slot=\"combobox-chips\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean;\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      className={cn(\n        \"flex h-6 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-none border border-line-strong bg-phosphor/10 px-1.5 font-mono text-phosphor text-xs has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:opacity-40\",\n        \"data-highlighted:border-phosphor data-highlighted:text-phosphor-bright\",\n        className\n      )}\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      {showRemove ? (\n        <ComboboxPrimitive.ChipRemove\n          className=\"-ml-0.5 flex size-5 cursor-pointer items-center justify-center text-phosphor-dim transition duration-150 ease-terminal hover:text-phosphor-bright [&_svg:not([class*='size-'])]:size-3\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <XIcon className=\"pointer-events-none\" />\n        </ComboboxPrimitive.ChipRemove>\n      ) : null}\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"h-7 min-w-16 flex-1 bg-transparent px-1 caret-phosphor-bright outline-none placeholder:text-phosphor-dim\",\n        className\n      )}\n      data-slot=\"combobox-chip-input\"\n      {...props}\n    />\n  );\n}\n\nfunction useComboboxAnchor() {\n  return useRef<HTMLDivElement | null>(null);\n}\n\nexport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxClear,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}