{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "type": "registry:ui",
  "title": "Combobox",
  "description": "A customizable combobox component",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "input",
    "classes",
    "label",
    "scroll-area"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/ui/combobox/index.tsx",
      "content": "\"use client\";\r\n\r\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\r\nimport React, { createContext, SVGProps, useContext, useRef } from \"react\";\r\n\r\nimport { Input } from \"@/registry/pure-ui/ui/input\";\r\nimport { ScrollArea } from \"@/registry/pure-ui/ui/scroll-area\";\r\nimport { Label } from \"@/registry/pure-ui/ui/label\";\r\nimport { cn } from \"@/lib/classes\";\r\n\r\ninterface ComboboxContextType {\r\n  chipsRef: React.RefObject<HTMLDivElement | null> | null;\r\n  multiple: boolean;\r\n}\r\n\r\nconst ComboboxContext = createContext<ComboboxContextType>({\r\n  chipsRef: null,\r\n  multiple: false,\r\n});\r\n\r\ninterface ComboboxProps<Value, Multiple extends boolean | undefined = false>\r\n  extends ComboboxPrimitive.Root.Props<Value, Multiple> {}\r\n\r\nfunction Combobox<Value, Multiple extends boolean | undefined = false>(\r\n  props: ComboboxProps<Value, Multiple>\r\n) {\r\n  const chipsRef = useRef<HTMLDivElement | null>(null);\r\n\r\n  return (\r\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\r\n      <ComboboxPrimitive.Root data-slot=\"combobox\" {...props} />\r\n    </ComboboxContext.Provider>\r\n  );\r\n}\r\n\r\ninterface ComboboxValueProps extends ComboboxPrimitive.Value.Props {}\r\n\r\nfunction ComboboxValue(props: ComboboxValueProps) {\r\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\r\n}\r\n\r\nexport function ChevronsUpDownIcon(props: SVGProps<SVGSVGElement>) {\r\n  return (\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"20\"\r\n      height=\"20\"\r\n      viewBox=\"0 0 20 20\"\r\n      {...props}\r\n    >\r\n      {/* Up chevron */}\r\n      <path\r\n        className=\"group-data-popup-open:translate-y-[8.5px] [transition-property:translate] duration-200 ease-out\"\r\n        fill=\"currentColor\"\r\n        d=\"M10.53 2.72a.75.75 0 0 0-1.06 0L5.22 6.97a.75.75 0 0 0 1.06 1.06L10 4.31l3.72 3.72a.75.75 0 1 0 1.06-1.06z\"\r\n      />\r\n\r\n      {/* Down chevron */}\r\n      <path\r\n        className=\"group-data-popup-open:-translate-y-[8.5px] [transition-property:translate] duration-200 ease-out\"\r\n        fill=\"currentColor\"\r\n        d=\"M14.78 13.03l-4.25 4.25a.75.75 0 0 1-1.06 0l-4.25-4.25a.75.75 0 1 1 1.06-1.06L10 15.69l3.72-3.72a.75.75 0 1 1 1.06 1.06\"\r\n      />\r\n    </svg>\r\n  );\r\n}\r\n\r\nexport function CloseIcon(props: SVGProps<SVGSVGElement>) {\r\n  return (\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      {...props}\r\n    >\r\n      <path\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n        strokeWidth=\"1.5\"\r\n        d=\"M18 6L6 18m12 0L6 6\"\r\n      />\r\n    </svg>\r\n  );\r\n}\r\n\r\nexport function CheckIcon(props: SVGProps<SVGSVGElement>) {\r\n  return (\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      {...props}\r\n    >\r\n      <path\r\n        className=\"group-data-selected:[stroke-dashoffset:0] [transition-property:stroke-dashoffset] duration-200 ease-out\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n        strokeWidth=\"2\"\r\n        d=\"m5 12l5 5L20 7\"\r\n      />\r\n    </svg>\r\n  );\r\n}\r\n\r\ninterface ComboboxInputProps extends ComboboxPrimitive.Input.Props {\r\n  isClearable?: boolean;\r\n  showTrigger?: boolean;\r\n}\r\n\r\nfunction ComboboxInput({\r\n  isClearable = false,\r\n  showTrigger = true,\r\n  className,\r\n  ...props\r\n}: ComboboxInputProps) {\r\n  const { multiple } = useContext(ComboboxContext);\r\n\r\n  if (multiple) {\r\n    return (\r\n      <ComboboxPrimitive.Input\r\n        className={cn(\r\n          \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:pl-0.5 pl-2\",\r\n          className\r\n        )}\r\n        data-slot=\"combobox-input\"\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"relative w-full z-20\" data-slot=\"combobox-input-wrapper\">\r\n      <ComboboxPrimitive.Input\r\n        data-slot=\"combobox-input\"\r\n        className={cn(\r\n          \"relative [&:has(+[data-slot=combobox-trigger])]:pr-8 rounded-[12px]\",\r\n          className\r\n        )}\r\n        render={<Input />}\r\n        {...props}\r\n      />\r\n      {showTrigger && (\r\n        <ComboboxTrigger\r\n          className={cn(\r\n            \"group absolute top-1/2 -translate-y-1/2 right-1 inline-flex size-8 sm:size-7 cursor-pointer items-center justify-center rounded-md border border-transparent outline-none z-1 has-[+[data-slot=combobox-clear]]:hidden in-data-[slot=combobox-chips]:hidden [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\r\n          )}\r\n        >\r\n          <ChevronsUpDownIcon />\r\n        </ComboboxTrigger>\r\n      )}\r\n      {isClearable && (\r\n        <ComboboxClear\r\n          className={cn(\r\n            \"absolute top-1/2 -translate-y-1/2 right-1 inline-flex size-8 sm:size-7 cursor-pointer items-center justify-center rounded-md border border-transparent outline-none has-[+[data-slot=combobox-clear]]:hidden in-data-[slot=combobox-chips]:hidden [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n            \"data-starting-style:opacity-0 data-ending-style:opacity-100 data-starting-style:scale-98 data-ending-style:scale-98\"\r\n          )}\r\n        >\r\n          <CloseIcon />\r\n        </ComboboxClear>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface ComboboxLabel extends React.ComponentProps<typeof Label> {}\r\n\r\nfunction ComboboxLabel(props: ComboboxLabel) {\r\n  return <Label data-slot=\"combobox-label\" {...props} />;\r\n}\r\n\r\ninterface ComboboxClearProps extends ComboboxPrimitive.Clear.Props {}\r\n\r\nfunction ComboboxClear({ className, ...props }: ComboboxClearProps) {\r\n  return (\r\n    <ComboboxPrimitive.Clear\r\n      data-slot=\"combobox-clear\"\r\n      className={cn(className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface ComboboxTriggerProps extends ComboboxPrimitive.Trigger.Props {}\r\n\r\nfunction ComboboxTrigger({ className, ...props }: ComboboxTriggerProps) {\r\n  return (\r\n    <ComboboxPrimitive.Trigger\r\n      data-slot=\"combobox-trigger\"\r\n      className={cn(\"rounded-[12px]\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface ComboboxChipsProps extends ComboboxPrimitive.Chips.Props {}\r\n\r\nfunction ComboboxChips({ className, ...props }: ComboboxChipsProps) {\r\n  const { chipsRef } = useContext(ComboboxContext);\r\n\r\n  return (\r\n    <ComboboxPrimitive.Chips\r\n      className={cn(\r\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-[12px] outline-none ring-ring/24 transition-shadow border border-input px-1 py-1 shadow-xs text-base/5 sm:text-sm focus-within:border-ring focus-within:ring-[1px] focus-within:ring-border\",\r\n        className\r\n      )}\r\n      data-slot=\"combobox-chips\"\r\n      ref={chipsRef}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface ComboboxChipProps extends ComboboxPrimitive.Chip.Props {}\r\n\r\nfunction ComboboxChip({ className, children, ...props }: ComboboxChipProps) {\r\n  return (\r\n    <ComboboxPrimitive.Chip\r\n      data-slot=\"combobox-chip\"\r\n      className={cn(\r\n        \"relative bg-secondary px-2 py-[3px] rounded-md text-xs flex items-center gap-1\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <ComboboxChipRemove />\r\n    </ComboboxPrimitive.Chip>\r\n  );\r\n}\r\n\r\ninterface ComboboxChipRemoveProps extends ComboboxPrimitive.ChipRemove.Props {}\r\n\r\nfunction ComboboxChipRemove({ className, ...props }: ComboboxChipRemoveProps) {\r\n  return (\r\n    <ComboboxPrimitive.ChipRemove\r\n      aria-label=\"Remove\"\r\n      className={cn(\r\n        \"rounded-md p-1 text-inherit hover:bg-secondary [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 cursor-pointer\",\r\n        className\r\n      )}\r\n      data-slot=\"combobox-chip-remove\"\r\n      {...props}\r\n    >\r\n      <CloseIcon />\r\n    </ComboboxPrimitive.ChipRemove>\r\n  );\r\n}\r\n\r\ninterface ComboboxListProps extends ComboboxPrimitive.List.Props {}\r\n\r\nfunction ComboboxList({ className, ...props }: ComboboxListProps) {\r\n  return (\r\n    <ScrollArea\r\n      scrollShadow=\"vertical\"\r\n      className=\"border-0 flex-1 min-h-0 *:data-[slot=scroll-area-vertical-shadow]:before:rounded-none *:data-[slot=scroll-area-vertical-shadow]:after:rounded-none *:data-[slot=scroll-area-vertical-shadow]:[--bg:var(--popover)]\"\r\n    >\r\n      <ComboboxPrimitive.List\r\n        data-slot=\"combobox-list\"\r\n        className={cn(\"not-empty:scroll-py-1 not-empty:py-1\", className)}\r\n        {...props}\r\n      />\r\n    </ScrollArea>\r\n  );\r\n}\r\n\r\ninterface ComboboxPortalProps extends ComboboxPrimitive.Portal.Props {}\r\n\r\nfunction ComboboxPortal({ className, ...props }: ComboboxPortalProps) {\r\n  return (\r\n    <ComboboxPrimitive.Portal\r\n      data-slot=\"combobox-portal\"\r\n      className={cn(className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface ComboboxPositionerProps extends ComboboxPrimitive.Positioner.Props {}\r\n\r\nfunction ComboboxPositioner({ className, ...props }: ComboboxPositionerProps) {\r\n  return (\r\n    <ComboboxPrimitive.Positioner\r\n      data-slot=\"combobox-positioner\"\r\n      className={cn(className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface ComboboxPopupProps\r\n  extends ComboboxPrimitive.Popup.Props,\r\n    Pick<ComboboxPositionerProps, \"sideOffset\"> {}\r\n\r\nfunction ComboboxPopup({\r\n  className,\r\n  sideOffset = 0,\r\n  children,\r\n  ...props\r\n}: ComboboxPopupProps) {\r\n  const { chipsRef } = useContext(ComboboxContext);\r\n\r\n  return (\r\n    <ComboboxPortal>\r\n      <ComboboxPositioner\r\n        anchor={chipsRef}\r\n        sideOffset={sideOffset}\r\n        className={cn(\"select-none outline-none z-20\", className)}\r\n      >\r\n        <ComboboxPrimitive.Popup\r\n          data-slot=\"combobox-popup\"\r\n          className={cn(\r\n            \"group relative flex max-h-full origin-(--transform-origin) rounded-[16px] shadow-md border border-border transition-[scale,opacity] will-change-[scale,opacity] duration-100 overflow-hidden\",\r\n            // Animation states\r\n            \"data-starting-style:scale-98 data-ending-style:scale-98 data-starting-style:opacity-0 data-ending-style:opacity-0\",\r\n            // Safe offset\r\n            \"[--safe-offset:calc(var(--anchor-height)+7px)]\",\r\n            // WHEN INPUT IS OUTSIDE POPUP\r\n            \"[&:not(:has([data-slot=combobox-input]))]:pointer-events-none\",\r\n            // When popup opens DOWNWARD (data-side=bottom): input on top\r\n            \"data-[side=bottom]:not-has-data-[slot=combobox-input]:-translate-y-(--safe-offset) data-[side=bottom]:not-has-data-[slot=combobox-input]:pt-(--safe-offset) data-[side=bottom]:not-has-data-[slot=combobox-input]:bg-[linear-gradient(to_bottom,transparent_0px,transparent_var(--safe-offset),white_var(--safe-offset))] data-[side=bottom]:not-has-data-[slot=combobox-input]:dark:bg-[linear-gradient(to_bottom,transparent_0px,transparent_var(--safe-offset),var(--popover)_var(--safe-offset))]\",\r\n\r\n            // When popup opens UPWARD (data-side=top): input on bottom\r\n            \"data-[side=top]:not-has-data-[slot=combobox-input]:translate-y-(--safe-offset) data-[side=top]:not-has-data-[slot=combobox-input]:pb-(--safe-offset) data-[side=top]:not-has-data-[slot=combobox-input]:bg-[linear-gradient(to_top,transparent_0px,transparent_var(--safe-offset),white_var(--safe-offset))] data-[side=top]:not-has-data-[slot=combobox-input]:dark:bg-[linear-gradient(to_top,transparent_0px,transparent_var(--safe-offset),var(--popover)_var(--safe-offset))]\",\r\n            // When input is INSIDE popup: solid background\r\n            \"[&:has([data-slot=combobox-input])]:bg-popover\",\r\n\r\n            className\r\n          )}\r\n          {...props}\r\n        >\r\n          <span className=\"flex max-h-[min(var(--available-height),20rem)] not-has-data-[slot=combobox-input]:w-[calc(var(--anchor-width)+10px)] not-has-data-[slot=combobox-input]:max-w-[calc(var(--available-width)+10px)] w-(--anchor-width) max-w-(--available-width) flex-col overflow-hidden pointer-events-auto\">\r\n            {children}\r\n          </span>\r\n        </ComboboxPrimitive.Popup>\r\n      </ComboboxPositioner>\r\n    </ComboboxPortal>\r\n  );\r\n}\r\n\r\ninterface ComboboxEmptyProps extends ComboboxPrimitive.Empty.Props {}\r\n\r\nfunction ComboboxEmpty({ className, ...props }: ComboboxEmptyProps) {\r\n  return (\r\n    <ComboboxPrimitive.Empty\r\n      data-slot=\"combobox-empty\"\r\n      className={cn(\r\n        \"p-2 text-sm text-muted-foreground text-center empty:m-0 empty:p-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface ComboboxCollectionProps extends ComboboxPrimitive.Collection.Props {}\r\n\r\nfunction ComboboxCollection(props: ComboboxCollectionProps) {\r\n  return (\r\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\r\n  );\r\n}\r\n\r\ninterface ComboboxRowProps extends ComboboxPrimitive.Row.Props {}\r\n\r\nfunction ComboboxRow(props: ComboboxRowProps) {\r\n  return <ComboboxPrimitive.Row data-slot=\"combobox-row\" {...props} />;\r\n}\r\n\r\ninterface ComboboxItemProps extends ComboboxPrimitive.Item.Props {}\r\n\r\nfunction ComboboxItem({ className, children, ...props }: ComboboxItemProps) {\r\n  return (\r\n    <ComboboxPrimitive.Item\r\n      data-slot=\"combobox-item\"\r\n      className={cn(\r\n        \"group px-3 pr-5 py-1.5 text-sm cursor-pointer hover:bg-accent/70 data-highlighted:bg-accent grid grid-cols-[1rem_1fr] items-center gap-2\",\r\n        \"data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\r\n        <CheckIcon />\r\n      </ComboboxPrimitive.ItemIndicator>\r\n      <div className=\"col-start-2\">{children}</div>\r\n    </ComboboxPrimitive.Item>\r\n  );\r\n}\r\n\r\ninterface ComboboxGroupProps extends ComboboxPrimitive.Group.Props {}\r\n\r\nfunction ComboboxGroup(props: ComboboxGroupProps) {\r\n  return <ComboboxPrimitive.Group data-slot=\"combobox-group\" {...props} />;\r\n}\r\n\r\ninterface ComboboxGroupLabelProps extends ComboboxPrimitive.GroupLabel.Props {}\r\n\r\nfunction ComboboxGroupLabel({ className, ...props }: ComboboxGroupLabelProps) {\r\n  return (\r\n    <ComboboxPrimitive.GroupLabel\r\n      className={cn(\r\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs sticky z-2 top-0 bg-popover w-full\",\r\n        className\r\n      )}\r\n      data-slot=\"combobox-group-label\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface ComboboxSeparatorProps extends ComboboxPrimitive.Separator.Props {}\r\n\r\nfunction ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps) {\r\n  return (\r\n    <ComboboxPrimitive.Separator\r\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\r\n      data-slot=\"combobox-separator\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  Combobox,\r\n  ComboboxValue,\r\n  ComboboxInput,\r\n  ComboboxClear,\r\n  ComboboxTrigger,\r\n  ComboboxChips,\r\n  ComboboxChip,\r\n  ComboboxList,\r\n  ComboboxPopup,\r\n  ComboboxEmpty,\r\n  ComboboxCollection,\r\n  ComboboxRow,\r\n  ComboboxItem,\r\n  ComboboxGroup,\r\n  ComboboxGroupLabel,\r\n  ComboboxSeparator,\r\n  ComboboxLabel,\r\n};\r\n",
      "type": "registry:ui",
      "target": "components/ui/combobox.tsx"
    }
  ]
}