{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "list-box",
  "title": "list-box",
  "description": "list-box",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/dropdown"
  ],
  "files": [
    {
      "path": "src/components/ui/list-box.tsx",
      "content": "\"use client\"\n\nimport { CheckIcon } from \"@heroicons/react/20/solid\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport type {\n  ListBoxItemProps,\n  ListBoxProps,\n  ListBoxSectionProps,\n} from \"react-aria-components/ListBox\"\nimport {\n  ListBox as ListBoxPrimitive,\n  ListBoxItem as ListBoxItemPrimitive,\n} from \"react-aria-components/ListBox\"\nimport { twJoin, cn } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\nimport {\n  DropdownDescription,\n  dropdownItemStyles,\n  DropdownLabel,\n  DropdownSection,\n  type DropdownSectionProps,\n} from \"./dropdown\"\n\nexport function ListBox<T extends object>({ className, ...props }: ListBoxProps<T>) {\n  return (\n    <ListBoxPrimitive\n      {...props}\n      data-slot=\"list-box\"\n      className={cx(\n        \"scrollbar-thin grid max-h-96 w-full min-w-56 scroll-py-1 grid-cols-[auto_1fr] flex-col gap-y-1 overflow-y-auto overscroll-contain rounded-xl border bg-background p-1 outline-hidden has-data-[slot=drag-icon]:grid-cols-[auto_auto_1fr] *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1\",\n        className\n      )}\n    />\n  )\n}\n\nexport function ListBoxItem<T extends object>({\n  children,\n  className,\n  ...props\n}: ListBoxItemProps<T>) {\n  const textValue = typeof children === \"string\" ? children : undefined\n  return (\n    <ListBoxItemPrimitive\n      textValue={textValue}\n      className={composeRenderProps(className, (className, renderProps) =>\n        dropdownItemStyles({\n          ...renderProps,\n          className: twJoin(\n            \"group not-has-[[slot=description]]:items-start\",\n            \"has-data-[slot=drag-icon]:*:[[slot=label]]:col-start-3\",\n            \"has-data-[slot=drag-icon]:*:[svg]:col-start-2\",\n            \"href\" in props ? \"cursor-pointer\" : \"cursor-default\",\n            className\n          ),\n        })\n      )}\n      data-slot=\"list-box-item\"\n      {...props}\n    >\n      {(renderProps) => {\n        const { allowsDragging, isSelected } = renderProps\n\n        return (\n          <>\n            {allowsDragging && (\n              <svg\n                data-slot=\"drag-icon\"\n                className=\"me-2 mt-0.5 h-lh w-5 text-muted-foreground sm:mt-1 sm:w-4\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M11 5.5C11 6.32843 10.3284 7 9.5 7C8.67157 7 8 6.32843 8 5.5C8 4.67157 8.67157 4 9.5 4C10.3284 4 11 4.67157 11 5.5Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M16 5.5C16 6.32843 15.3284 7 14.5 7C13.6716 7 13 6.32843 13 5.5C13 4.67157 13.6716 4 14.5 4C15.3284 4 16 4.67157 16 5.5Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M11 18.5C11 19.3284 10.3284 20 9.5 20C8.67157 20 8 19.3284 8 18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M16 18.5C16 19.3284 15.3284 20 14.5 20C13.6716 20 13 19.3284 13 18.5C13 17.6716 13.6716 17 14.5 17C15.3284 17 16 17.6716 16 18.5Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M11 12C11 12.8284 10.3284 13.5 9.5 13.5C8.67157 13.5 8 12.8284 8 12C8 11.1716 8.67157 10.5 9.5 10.5C10.3284 10.5 11 11.1716 11 12Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M16 12C16 12.8284 15.3284 13.5 14.5 13.5C13.6716 13.5 13 12.8284 13 12C13 11.1716 13.6716 10.5 14.5 10.5C15.3284 10.5 16 11.1716 16 12Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            )}\n            {isSelected && (\n              <CheckIcon\n                className=\"-mx-0.5 me-2 mt-0.5 h-lh w-5 shrink-0 group-allows-dragging:col-start-2 sm:mt-1 sm:w-4\"\n                data-slot=\"check-indicator\"\n              />\n            )}\n            {typeof children === \"function\" ? (\n              children(renderProps)\n            ) : typeof children === \"string\" ? (\n              <DropdownLabel>{children}</DropdownLabel>\n            ) : (\n              children\n            )}\n          </>\n        )\n      }}\n    </ListBoxItemPrimitive>\n  )\n}\n\nexport function ListBoxSection<T extends object>({ className, ...props }: DropdownSectionProps<T>) {\n  return (\n    <DropdownSection\n      className={cn(\"gap-y-1 *:data-[slot=list-box-item]:last:-mb-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nexport const ListBoxLabel = DropdownLabel\nexport const ListBoxDescription = DropdownDescription\n\nexport type { ListBoxItemProps, ListBoxSectionProps }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}