{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "Composable combobox with a compound API built on Popover and Command.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "lucide-react@^1.48.0"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/button.json",
    "https://rdf.dev.360online.com/r/input-group.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/combobox/combobox.tsx",
      "content": "'use client'\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox'\nimport { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'\nimport * as React from 'react'\nimport { Button } from '@/components/ui/button'\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group'\nimport { cn } from '@/lib/utils'\n\n// Lets the parts hide controls that can't be used while the combobox is read-only (clear, chip remove)\nconst ComboboxReadOnlyContext = React.createContext(false)\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false, Item = Value>(\n\tprops: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,\n) {\n\treturn (\n\t\t<ComboboxReadOnlyContext.Provider value={props.readOnly ?? false}>\n\t\t\t<ComboboxPrimitive.Root {...props} />\n\t\t</ComboboxReadOnlyContext.Provider>\n\t)\n}\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n\treturn <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Trigger\n\t\t\tdata-slot=\"combobox-trigger\"\n\t\t\tclassName={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronDownIcon aria-hidden=\"true\" className=\"pointer-events-none size-4 text-muted-foreground\" />\n\t\t</ComboboxPrimitive.Trigger>\n\t)\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Clear\n\t\t\tdata-slot=\"combobox-clear\"\n\t\t\trender={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n\t\t\tclassName={cn(className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<XIcon aria-hidden=\"true\" className=\"pointer-events-none\" />\n\t\t</ComboboxPrimitive.Clear>\n\t)\n}\n\nfunction ComboboxInput({\n\tclassName,\n\tchildren,\n\tdisabled = false,\n\tshowTrigger = true,\n\tshowClear = false,\n\ttriggerLabel = 'Show options',\n\t...props\n}: ComboboxPrimitive.Input.Props & {\n\tshowTrigger?: boolean\n\tshowClear?: boolean\n\t/** Accessible name of the chevron button, which shows only an icon. Translate it in your app. */\n\ttriggerLabel?: string\n}) {\n\tconst readOnly = React.useContext(ComboboxReadOnlyContext)\n\n\treturn (\n\t\t<InputGroup className={cn('w-auto', className)}>\n\t\t\t<ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />\n\t\t\t<InputGroupAddon align=\"inline-end\">\n\t\t\t\t{showTrigger && (\n\t\t\t\t\t<InputGroupButton\n\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\trender={<ComboboxTrigger />}\n\t\t\t\t\t\t// Only a chevron icon, so without a name a screen reader announces just \"button\" (WCAG 4.1.2).\n\t\t\t\t\t\taria-label={triggerLabel}\n\t\t\t\t\t\tdata-slot=\"input-group-button\"\n\t\t\t\t\t\tclassName=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{showClear && !readOnly && <ComboboxClear disabled={disabled} />}\n\t\t\t</InputGroupAddon>\n\t\t\t{children}\n\t\t</InputGroup>\n\t)\n}\n\nfunction ComboboxContent({\n\tclassName,\n\tside = 'bottom',\n\tsideOffset = 6,\n\talign = 'start',\n\talignOffset = 0,\n\tanchor,\n\t...props\n}: ComboboxPrimitive.Popup.Props &\n\tPick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'>) {\n\treturn (\n\t\t<ComboboxPrimitive.Portal>\n\t\t\t<ComboboxPrimitive.Positioner\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tanchor={anchor}\n\t\t\t\tclassName=\"isolate z-50\"\n\t\t\t>\n\t\t\t\t<ComboboxPrimitive.Popup\n\t\t\t\t\tdata-slot=\"combobox-content\"\n\t\t\t\t\tdata-chips={!!anchor}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</ComboboxPrimitive.Positioner>\n\t\t</ComboboxPrimitive.Portal>\n\t)\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.List\n\t\t\tdata-slot=\"combobox-list\"\n\t\t\tclassName={cn(\n\t\t\t\t'no-scrollbar 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\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Item\n\t\t\tdata-slot=\"combobox-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ComboboxPrimitive.ItemIndicator\n\t\t\t\trender={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n\t\t\t>\n\t\t\t\t<CheckIcon aria-hidden=\"true\" className=\"pointer-events-none\" />\n\t\t\t</ComboboxPrimitive.ItemIndicator>\n\t\t</ComboboxPrimitive.Item>\n\t)\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n\treturn <ComboboxPrimitive.Group data-slot=\"combobox-group\" className={cn(className)} {...props} />\n}\n\nfunction ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.GroupLabel\n\t\t\tdata-slot=\"combobox-label\"\n\t\t\tclassName={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n\treturn <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Empty\n\t\t\tdata-slot=\"combobox-empty\"\n\t\t\tclassName={cn(\n\t\t\t\t'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Separator\n\t\t\tdata-slot=\"combobox-separator\"\n\t\t\tclassName={cn('-mx-1 my-1 h-px bg-border', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ComboboxChips({\n\tclassName,\n\t...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Chips\n\t\t\tdata-slot=\"combobox-chips\"\n\t\t\tclassName={cn(\n\t\t\t\t// Same look as Input: border, hover, solid focus ring, invalid, disabled and the shared read-only style\n\t\t\t\t'flex min-h-10 flex-wrap items-center gap-1 rounded-lg border border-input bg-background bg-clip-padding px-2.5 py-1 text-sm transition-colors hover:border-primary/90 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 has-[[data-slot=combobox-chip-input]:read-only]:cursor-default has-[[data-slot=combobox-chip-input]:read-only]:border-dashed has-[[data-slot=combobox-chip-input]:read-only]:bg-muted/50 has-[[data-slot=combobox-chip-input]:read-only]:hover:border-input has-[[data-slot=combobox-chip-input]:disabled]:cursor-not-allowed has-[[data-slot=combobox-chip-input]:disabled]:bg-input/50 has-[[data-slot=combobox-chip-input]:disabled]:opacity-50 has-[[data-slot=combobox-chip-input]:disabled]:hover:border-input dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 dark:has-[[data-slot=combobox-chip-input]:disabled]:bg-input/80',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ComboboxChip({\n\tclassName,\n\tchildren,\n\tshowRemove = true,\n\t...props\n}: ComboboxPrimitive.Chip.Props & {\n\tshowRemove?: boolean\n}) {\n\tconst readOnly = React.useContext(ComboboxReadOnlyContext)\n\n\treturn (\n\t\t<ComboboxPrimitive.Chip\n\t\t\tdata-slot=\"combobox-chip\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t{showRemove && !readOnly && (\n\t\t\t\t<ComboboxPrimitive.ChipRemove\n\t\t\t\t\trender={<Button variant=\"ghost\" size=\"icon-xs\" />}\n\t\t\t\t\tclassName=\"-ml-1 opacity-50 hover:opacity-100\"\n\t\t\t\t\tdata-slot=\"combobox-chip-remove\"\n\t\t\t\t>\n\t\t\t\t\t<XIcon aria-hidden=\"true\" className=\"pointer-events-none\" />\n\t\t\t\t</ComboboxPrimitive.ChipRemove>\n\t\t\t)}\n\t\t</ComboboxPrimitive.Chip>\n\t)\n}\n\nfunction ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Input\n\t\t\tdata-slot=\"combobox-chip-input\"\n\t\t\tclassName={cn(\n\t\t\t\t'min-w-16 flex-1 bg-transparent outline-none placeholder:text-muted-foreground read-only:cursor-default disabled:cursor-not-allowed',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction useComboboxAnchor() {\n\treturn React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n\tCombobox,\n\tComboboxInput,\n\tComboboxContent,\n\tComboboxList,\n\tComboboxItem,\n\tComboboxGroup,\n\tComboboxLabel,\n\tComboboxCollection,\n\tComboboxEmpty,\n\tComboboxSeparator,\n\tComboboxChips,\n\tComboboxChip,\n\tComboboxChipsInput,\n\tComboboxTrigger,\n\tComboboxValue,\n\tuseComboboxAnchor,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/combobox.tsx"
    }
  ],
  "type": "registry:ui"
}