{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "type": "registry:ui",
  "dependencies": [
    "@base-ui-components/react"
  ],
  "registryDependencies": [
    "https://jem-ui.vercel.app/r/input.json",
    "https://jem-ui.vercel.app/r/scroll-area.json"
  ],
  "files": [
    {
      "path": "registry/ui/combobox.tsx",
      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui-components/react/combobox\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"./input\";\nimport { ScrollArea } from \"./scroll-area\";\n\nfunction Combobox({\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Root>) {\n  return <ComboboxPrimitive.Root data-slot=\"combobox\" {...props} />;\n}\n\nfunction ComboboxTrigger({\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Trigger>) {\n  return <ComboboxPrimitive.Trigger data-slot=\"combobox-trigger\" {...props} />;\n}\n\nfunction ComboboxInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Input>) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-input\"\n      render={<Input className={cn(className)} />}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxClear({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Clear>) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      className={cn(\n        \"flex h-9 w-9 items-center justify-center rounded bg-transparent p-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxValue({\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Value>) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxPopup({\n  className,\n  sideOffset = 8,\n  anchor,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Popup> & {\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n}) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner sideOffset={sideOffset} anchor={anchor}>\n        <ScrollArea className=\"data-starting-style:fade-out-0 data-starting-style:fade-in-0 data-ending-style:zoom-out-95 data-ending-style:zoom-in-95 p-1 w-(--anchor-width) max-w-(--available-width) scroll-pt-2 scroll-pb-2 rounded-md bg-popover text-popover-foreground origin-(--transform-origin) border\">\n          <ComboboxPrimitive.Popup\n            data-slot=\"combobox-popup\"\n            className={cn(\n              \"data-starting-style:fade-out-0 data-starting-style:fade-in-0 data-ending-style:zoom-out-95 data-ending-style:zoom-in-95 max-h-[min(var(--available-height),23rem)] max-w-(--available-width) origin-(--transform-origin) scroll-pt-2 scroll-pb-2\",\n              className,\n            )}\n            {...props}\n          />\n        </ScrollArea>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction ComboboxList({\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.List>) {\n  return <ComboboxPrimitive.List data-slot=\"combobox-list\" {...props} />;\n}\n\nfunction ComboboxEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Empty>) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"px-4 py-2 text-[0.925rem] leading-4 text-muted-foreground empty:m-0 empty:p-0 text-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxCollection({\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Collection>) {\n  return <ComboboxPrimitive.Collection {...props} />;\n}\n\nfunction ComboboxGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Group>) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(\"overflow-hidden p-1 text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-group-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Item>) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"group relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n        \"grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <ComboboxItemIndicator className=\"col-start-1\">\n        <CheckIcon className=\"size-3 group-data-[selected]:opacity-100 opacity-0\" />\n      </ComboboxItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nfunction ComboboxItemIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>) {\n  return (\n    <ComboboxPrimitive.ItemIndicator\n      data-slot=\"combobox-item-indicator\"\n      className={cn(\"col-start-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Separator>) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Chips>) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"min-h-9 flex flex-wrap items-center gap-1 rounded-md transition-[color,box-shadow] py-1 px-3 border-input border bg-input/30 shadow-xs\",\n        \"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChip({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Chip>) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex items-center gap-1 rounded-md bg-border px-1 ps-2 pe-0 text-xs outline-none cursor-default p-1 pl-2 h-full\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChipRemove({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.ChipRemove>) {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      data-slot=\"combobox-chip-remove\"\n      className={cn(\n        \"rounded-md p-1 text-inherit hover:bg-accent-foreground/10\",\n        className,\n      )}\n      aria-label=\"Remove\"\n      {...props}\n    >\n      {children ?? <XIcon className=\"size-2\" />}\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport {\n  Combobox,\n  ComboboxTrigger,\n  ComboboxInput,\n  ComboboxPopup,\n  ComboboxList,\n  ComboboxEmpty,\n  ComboboxCollection,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxItem,\n  ComboboxSeparator,\n  ComboboxClear,\n  ComboboxItemIndicator,\n  ComboboxValue,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipRemove,\n};\n",
      "type": "registry:ui"
    }
  ]
}