{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "listbox",
  "title": "Listbox",
  "description": "A shadcn-style listbox component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "lucide-react"],
  "files": [
    {
      "path": "src/components/ui/listbox.tsx",
      "content": "\"use client\";\n\nimport {\n  type CollectionItem,\n  Listbox as ListboxPrimitive,\n} from \"@ark-ui/react/listbox\";\nimport { CheckIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type ListboxProps<T extends CollectionItem = CollectionItem> =\n  ListboxPrimitive.RootProps<T>;\n\nexport const Listbox = <T extends CollectionItem = CollectionItem>(\n  props: ListboxPrimitive.RootProps<T>,\n) => {\n  const { className, ...rest } = props;\n  return (\n    <ListboxPrimitive.Root\n      data-slot=\"listbox\"\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...rest}\n    />\n  );\n};\n\nexport type ListboxLabelProps = ListboxPrimitive.LabelProps;\n\nexport const ListboxLabel = ({ className, ...props }: ListboxLabelProps) => (\n  <ListboxPrimitive.Label\n    data-slot=\"listbox-label\"\n    className={cn(\n      \"text-sm font-medium text-foreground leading-none select-none data-disabled:opacity-64\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ListboxContentProps = ListboxPrimitive.ContentProps;\n\nexport const ListboxContent = ({\n  className,\n  ...props\n}: ListboxContentProps) => (\n  <ListboxPrimitive.Content\n    data-slot=\"listbox-content\"\n    className={cn(\n      \"max-h-60 min-h-10 overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-sm outline-none ring-1 ring-border/20\",\n      \"data-[orientation=vertical]:flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-0.5\",\n      \"data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:flex-wrap data-[orientation=horizontal]:gap-1.5 data-[orientation=horizontal]:content-start\",\n      \"data-[layout=grid]:grid data-[layout=grid]:gap-1 data-[layout=grid]:auto-rows-fr data-[layout=grid]:grid-cols-[repeat(var(--column-count),minmax(0,1fr))]\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ListboxEmptyProps = ListboxPrimitive.EmptyProps;\n\nexport const ListboxEmpty = ({ className, ...props }: ListboxEmptyProps) => (\n  <ListboxPrimitive.Empty\n    data-slot=\"listbox-empty\"\n    className={cn(\n      \"rounded-md px-2 py-6 text-center text-muted-foreground text-sm\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ListboxInputProps = ListboxPrimitive.InputProps;\n\nexport const ListboxInput = ({ className, ...props }: ListboxInputProps) => (\n  <ListboxPrimitive.Input\n    data-slot=\"listbox-input\"\n    className={cn(\n      \"h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-foreground text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-64\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ListboxItemProps = ListboxPrimitive.ItemProps;\n\nexport const ListboxItem = ({ className, ...props }: ListboxItemProps) => (\n  <ListboxPrimitive.Item\n    data-slot=\"listbox-item\"\n    className={cn(\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n      \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n      \"data-selected:bg-accent/80\",\n      \"data-[orientation=horizontal]:shrink-0\",\n      \"data-[layout=grid]:min-h-9 data-[layout=grid]:min-w-0\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ListboxItemTextProps = ListboxPrimitive.ItemTextProps;\n\nexport const ListboxItemText = ({\n  className,\n  ...props\n}: ListboxItemTextProps) => (\n  <ListboxPrimitive.ItemText\n    data-slot=\"listbox-item-text\"\n    className={cn(\"flex-1 truncate\", className)}\n    {...props}\n  />\n);\n\nexport type ListboxItemIndicatorProps = ListboxPrimitive.ItemIndicatorProps;\n\nexport const ListboxItemIndicator = ({\n  className,\n  children,\n  ...props\n}: ListboxItemIndicatorProps) => (\n  <ListboxPrimitive.ItemIndicator\n    data-slot=\"listbox-item-indicator\"\n    className={cn(\"text-primary shrink-0\", className)}\n    {...props}\n  >\n    {children ?? <CheckIcon className=\"size-4\" />}\n  </ListboxPrimitive.ItemIndicator>\n);\n\nexport type ListboxItemGroupProps = ListboxPrimitive.ItemGroupProps;\n\nexport const ListboxItemGroup = ({\n  className,\n  ...props\n}: ListboxItemGroupProps) => (\n  <ListboxPrimitive.ItemGroup\n    data-slot=\"listbox-item-group\"\n    className={cn(\n      \"flex flex-col gap-0.5\",\n      \"data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:flex-wrap data-[orientation=horizontal]:gap-2\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ListboxItemGroupLabelProps = ListboxPrimitive.ItemGroupLabelProps;\n\nexport const ListboxItemGroupLabel = ({\n  className,\n  ...props\n}: ListboxItemGroupLabelProps) => (\n  <ListboxPrimitive.ItemGroupLabel\n    data-slot=\"listbox-item-group-label\"\n    className={cn(\n      \"px-2 py-1 font-medium text-muted-foreground text-xs\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ListboxValueTextProps = ListboxPrimitive.ValueTextProps;\n\nexport const ListboxValueText = ({\n  className,\n  ...props\n}: ListboxValueTextProps) => (\n  <ListboxPrimitive.ValueText\n    data-slot=\"listbox-value-text\"\n    className={cn(\"text-muted-foreground text-sm\", className)}\n    {...props}\n  />\n);\n\nexport const ListboxContext = ListboxPrimitive.Context;\n\nexport type ListboxRootProviderProps<\n  T extends CollectionItem = CollectionItem,\n> = ListboxPrimitive.RootProviderProps<T>;\n\nexport const ListboxRootProvider = <T extends CollectionItem = CollectionItem>(\n  props: ListboxPrimitive.RootProviderProps<T>,\n) => <ListboxPrimitive.RootProvider {...props} />;\n\n/** Grid collections and `useListCollection` (filtering) live in `@ark-ui/react/collection`. */\nexport {\n  createGridCollection,\n  type GridCollection,\n  type GridCollectionOptions,\n  type UseListCollectionProps,\n  type UseListCollectionReturn,\n  useListCollection,\n} from \"@ark-ui/react/collection\";\nexport type {\n  CollectionItem,\n  ListboxHighlightChangeDetails,\n  ListboxScrollToIndexDetails,\n  ListboxSelectionDetails,\n  ListboxSelectionMode,\n  ListboxValueChangeDetails,\n  ListCollection,\n  UseListboxItemContext,\n  UseListboxProps,\n  UseListboxReturn,\n} from \"@ark-ui/react/listbox\";\nexport {\n  createListCollection,\n  useListbox,\n  useListboxContext,\n  useListboxItemContext,\n} from \"@ark-ui/react/listbox\";\n",
      "type": "registry:ui",
      "target": "src/components/ui/listbox.tsx"
    }
  ],
  "type": "registry:ui"
}