{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-listbox",
  "type": "registry:ui",
  "title": "ListBox",
  "dependencies": [
    "lucide-react",
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/ListBox.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {Check} from 'lucide-react';\nimport React from 'react';\nimport {\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  ListBoxSection,\n  Header,\n  Collection,\n  type ListBoxProps as AriaListBoxProps,\n  type ListBoxItemProps,\n  type ListBoxSectionProps\n} from 'react-aria-components/ListBox';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {tv} from 'tailwind-variants';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\ninterface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'layout' | 'orientation'> {}\n\nexport function ListBox<T>({children, ...props}: ListBoxProps<T>) {\n  return (\n    <AriaListBox\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'outline-0 p-1 w-[200px] bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg font-sans'\n      )}>\n      {children}\n    </AriaListBox>\n  );\n}\n\nexport const itemStyles = tv({\n  extend: focusRing,\n  base: 'group relative flex items-center gap-8 cursor-default select-none py-1.5 px-2.5 rounded-md will-change-transform text-sm forced-color-adjust-none',\n  variants: {\n    isSelected: {\n      false:\n        'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800 -outline-offset-2',\n      true: 'bg-blue-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] [&:has(+[data-selected])]:rounded-b-none [&+[data-selected]]:rounded-t-none -outline-offset-4 outline-white dark:outline-white forced-colors:outline-[HighlightText]'\n    },\n    isDisabled: {\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    }\n  }\n});\n\nexport function ListBoxItem(props: ListBoxItemProps) {\n  let textValue =\n    props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  return (\n    <AriaListBoxItem {...props} textValue={textValue} className={itemStyles}>\n      {composeRenderProps(props.children, children => (\n        <>\n          {children}\n          <div className=\"absolute left-4 right-4 bottom-0 h-px bg-white/20 forced-colors:bg-[HighlightText] hidden [.group[data-selected]:has(+[data-selected])_&]:block\" />\n        </>\n      ))}\n    </AriaListBoxItem>\n  );\n}\n\nexport const dropdownItemStyles = tv({\n  base: 'group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-3 selected:pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isDisabled: {\n      false: 'text-neutral-900 dark:text-neutral-100',\n      true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    },\n    isPressed: {\n      true: 'bg-neutral-100 dark:bg-neutral-800'\n    },\n    isFocused: {\n      true: 'bg-blue-600 dark:bg-blue-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]'\n    }\n  },\n  compoundVariants: [\n    {\n      isFocused: false,\n      isOpen: true,\n      className: 'bg-neutral-100 dark:bg-neutral-700/60'\n    }\n  ]\n});\n\nexport function DropdownItem(props: ListBoxItemProps) {\n  let textValue =\n    props.textValue || (typeof props.children === 'string' ? props.children : undefined);\n  return (\n    <AriaListBoxItem {...props} textValue={textValue} className={dropdownItemStyles}>\n      {composeRenderProps(props.children, (children, {isSelected}) => (\n        <>\n          <span className=\"flex items-center flex-1 gap-2 font-normal truncate group-selected:font-semibold\">\n            {children}\n          </span>\n          <span className=\"flex items-center w-5\">\n            {isSelected && <Check className=\"w-4 h-4\" />}\n          </span>\n        </>\n      ))}\n    </AriaListBoxItem>\n  );\n}\n\nexport interface DropdownSectionProps<T> extends ListBoxSectionProps<T> {\n  title?: string;\n  items?: any;\n}\n\nexport function DropdownSection<T>(props: DropdownSectionProps<T>) {\n  return (\n    <ListBoxSection className=\"first:-mt-[5px] after:content-[''] after:block after:h-[5px] last:after:hidden\">\n      <Header className=\"text-sm font-semibold text-neutral-500 dark:text-neutral-300 px-4 py-1 truncate sticky -top-[5px] -mt-px -mx-1 z-10 bg-neutral-100/60 dark:bg-neutral-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-neutral-100 border-y border-y-neutral-200 dark:border-y-neutral-700 [&+*]:mt-1\">\n        {props.title}\n      </Header>\n      <Collection items={props.items}>{props.children}</Collection>\n    </ListBoxSection>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}