{
  "$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",
    "tailwind-merge"
  ],
  "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, twMerge } from 'tailwind-merge'\nimport { cx } from '@/lib/primitive'\nimport {\n  DropdownDescription,\n  dropdownItemStyles,\n  DropdownLabel,\n  DropdownSection,\n  type DropdownSectionProps,\n} from './dropdown'\n\nconst ListBox = <T extends object>({ className, ...props }: ListBoxProps<T>) => (\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-bg 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\nconst ListBoxItem = <T extends object>({ children, className, ...props }: 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-fg 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\nconst ListBoxSection = <T extends object>({ className, ...props }: DropdownSectionProps<T>) => {\n  return (\n    <DropdownSection\n      className={twMerge('gap-y-1 *:data-[slot=list-box-item]:last:-mb-1.5', className)}\n      {...props}\n    />\n  )\n}\n\nconst ListBoxLabel = DropdownLabel\nconst ListBoxDescription = DropdownDescription\n\nexport type { ListBoxItemProps, ListBoxSectionProps }\nexport { ListBox, ListBoxDescription, ListBoxItem, ListBoxLabel, ListBoxSection }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}