{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-box",
  "dependencies": [
    "react-aria-components",
    "tailwind-variants",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://taki-ui.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/list-box.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { Check } from \"lucide-react\"\nimport {\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  ListBoxProps as AriaListBoxProps,\n  Collection,\n  composeRenderProps,\n  Header,\n  ListBoxItemProps,\n  ListBoxSection,\n  SectionProps,\n} from \"react-aria-components\"\nimport { tv } from \"tailwind-variants\"\n\nimport { cn, focusRing } from \"../lib/utils\"\n\ntype ListBoxProps<T> = Omit<AriaListBoxProps<T>, \"layout\" | \"orientation\">\n\nexport function ListBox<T extends object>({\n  children,\n  ...props\n}: ListBoxProps<T>) {\n  return (\n    <AriaListBox\n      {...props}\n      className={composeRenderProps(props.className, (className) =>\n        cn(\n          \"rounded-lg border border-gray-300 p-1 outline-0 dark:border-zinc-600\",\n          className\n        )\n      )}\n    >\n      {children}\n    </AriaListBox>\n  )\n}\n\nexport const itemStyles = tv({\n  extend: focusRing,\n  base: \"group relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-2 text-sm outline-none transition-colors\",\n  variants: {\n    isSelected: {\n      false: \"hover:bg-accent hover:text-accent-foreground\",\n      true: \"bg-accent text-accent-foreground\",\n    },\n    isDisabled: {\n      true: \"pointer-events-none opacity-50\",\n    },\n    isFocusVisible: {\n      true: \"ring-2 ring-ring ring-offset-1\",\n    },\n  },\n})\n\nexport function ListBoxItem(props: ListBoxItemProps) {\n  const textValue =\n    props.textValue ||\n    (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 right-4 bottom-0 left-4 hidden h-px bg-white/20 forced-colors:bg-[HighlightText] [.group[data-selected]:has(+[data-selected])_&]:block\" />\n        </>\n      ))}\n    </AriaListBoxItem>\n  )\n}\n\nexport const dropdownItemStyles = tv({\n  base: \"group relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n  variants: {\n    variant: {\n      default: \"\",\n      destructive:\n        \"data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive\",\n    },\n    isFocused: {\n      true: \"bg-accent text-accent-foreground\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nexport function DropdownItem(props: ListBoxItemProps) {\n  const textValue =\n    props.textValue ||\n    (typeof props.children === \"string\" ? props.children : undefined)\n  return (\n    <AriaListBoxItem\n      {...props}\n      textValue={textValue}\n      className={dropdownItemStyles}\n    >\n      {composeRenderProps(props.children, (children, { isSelected }) => (\n        <>\n          <span className=\"group-selected:font-semibold flex flex-1 items-center gap-2 truncate font-normal\">\n            {children}\n          </span>\n          <span className=\"flex w-5 items-center\">\n            {isSelected && <Check className=\"h-4 w-4\" />}\n          </span>\n        </>\n      ))}\n    </AriaListBoxItem>\n  )\n}\n\nexport interface DropdownSectionProps<T> extends SectionProps<T> {\n  title?: string\n  items?: Iterable<T>\n}\n\nexport function DropdownSection<T extends object>(\n  props: DropdownSectionProps<T>\n) {\n  return (\n    <ListBoxSection className=\"group/section after:block after:h-[5px] after:content-[''] first:-mt-[5px]\">\n      <Header className=\"sticky -top-[5px] z-10 -mx-1 -mt-px truncate px-4 py-1 text-sm font-medium backdrop-blur-md group-first/section:mt-1 [&+*]:mt-1\">\n        {props.title}\n      </Header>\n      <Collection items={props.items}>{props.children}</Collection>\n    </ListBoxSection>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}