{
  "name": "combobox",
  "type": "registry:ui",
  "dependencies": [
    "cn",
    "@diceui/combobox",
    "@dnd-kit/core",
    "@dnd-kit/modifiers",
    "@dnd-kit/sortable",
    "@dnd-kit/utilities",
    "radix-ui"
  ],
  "files": [
    {
      "path": "ui/combobox.tsx",
      "type": "registry:ui",
      "content": "import type * as React from \"react\";\n\nimport * as ComboboxPrimitive from \"@diceui/combobox\";\nimport { cn } from \"cn\";\n\nimport { IconPlaceholder } from \"@/registry/icons/icon-placeholder\";\n\nconst Combobox = (({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Root>) => {\n  return (\n    <ComboboxPrimitive.Root\n      data-slot=\"combobox\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}) as ComboboxPrimitive.ComboboxRootComponentProps;\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Label>) {\n  return (\n    <ComboboxPrimitive.Label\n      data-slot=\"combobox-label\"\n      className={cn(\"px-0.5 py-1.5 text-sm font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxAnchor({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Anchor>) {\n  return (\n    <ComboboxPrimitive.Anchor\n      data-slot=\"combobox-anchor\"\n      className={cn(\n        \"relative flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 shadow-xs data-focused:ring-1 data-focused:ring-ring\",\n        className,\n      )}\n      {...props}\n    />\n  );\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      className={cn(\n        \"flex h-9 w-full rounded-md bg-transparent text-base placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Trigger>) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\n        \"flex shrink-0 items-center justify-center rounded-r-md border-input bg-transparent text-muted-foreground transition-colors hover:text-foreground/80 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children || (\n        <IconPlaceholder\n          lucide=\"ChevronDown\"\n          tabler=\"IconChevronDown\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"size-4\"\n        />\n      )}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nfunction ComboboxCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Cancel>) {\n  return (\n    <ComboboxPrimitive.Cancel\n      data-slot=\"combobox-cancel\"\n      className={cn(\n        \"absolute top-1/2 right-1 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm bg-background opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxBadgeList({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.BadgeList>) {\n  return (\n    <ComboboxPrimitive.BadgeList\n      data-slot=\"combobox-badge-list\"\n      className={cn(\"flex flex-wrap items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxBadgeItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.BadgeItem>) {\n  return (\n    <ComboboxPrimitive.BadgeItem\n      data-slot=\"combobox-badge-item\"\n      className={cn(\n        \"inline-flex items-center justify-between gap-1 rounded-sm bg-secondary px-2 py-0.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"truncate text-[13px] text-secondary-foreground\">\n        {children}\n      </span>\n      <ComboboxPrimitive.BadgeItemDelete\n        data-slot=\"combobox-badge-item-delete\"\n        className=\"shrink-0 rounded p-0.5 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden data-highlighted:bg-destructive\"\n      >\n        <IconPlaceholder\n          lucide=\"X\"\n          tabler=\"IconX\"\n          hugeicons=\"Cancel01Icon\"\n          phosphor=\"XIcon\"\n          remixicon=\"RiCloseLine\"\n          className=\"size-3\"\n        />\n      </ComboboxPrimitive.BadgeItemDelete>\n    </ComboboxPrimitive.BadgeItem>\n  );\n}\n\nfunction ComboboxContent({\n  sideOffset = 6,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Content>) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Content\n        data-slot=\"combobox-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"relative z-50 max-h-fit min-w-(--dice-anchor-width) origin-(--dice-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </ComboboxPrimitive.Content>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction ComboboxLoading({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Loading>) {\n  return (\n    <ComboboxPrimitive.Loading\n      data-slot=\"combobox-loading\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    >\n      Loading...\n    </ComboboxPrimitive.Loading>\n  );\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(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  );\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\", 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-semibold text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  outset,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Item> & {\n  outset?: boolean;\n}) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center rounded-sm py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n        outset ? \"pr-8 pl-2\" : \"pr-2 pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator\n        className={cn(\n          \"absolute flex size-3.5 items-center justify-center\",\n          outset ? \"right-2\" : \"left-2\",\n        )}\n      >\n        <IconPlaceholder\n          lucide=\"Check\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"size-4\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n      <ComboboxPrimitive.ItemText>{children}</ComboboxPrimitive.ItemText>\n    </ComboboxPrimitive.Item>\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-muted\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxBadgeItem,\n  ComboboxBadgeList,\n  ComboboxCancel,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxLoading,\n  ComboboxSeparator,\n  ComboboxTrigger,\n};\n",
      "target": ""
    }
  ]
}