{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "A customizable select dropdown component for choosing options from a list",
  "dependencies": ["@ark-ui/react", "lucide-react", "clsx", "tailwind-merge"],
  "files": [
    {
      "path": "src/registry/thornberry/components/select.tsx",
      "content": "import { Select as ArkSelect } from \"@ark-ui/react/select\";\nimport { Check } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport type { SelectRootProps } from \"@ark-ui/react/select\";\nimport type { ComponentProps, HTMLAttributes } from \"react\";\n\nconst SelectRoot = ArkSelect.Root;\nconst SelectRootProvider = ArkSelect.RootProvider;\nconst SelectContext = ArkSelect.Context;\nconst SelectHiddenSelect = ArkSelect.HiddenSelect;\n\n// TODO: fix types upstream in thornberry\nconst Select = <T,>({ className, ...rest }: SelectRootProps<T>) => (\n  <ArkSelect.Root className={className} {...rest} />\n);\n\nconst SelectLabel = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.Label>) => (\n  <ArkSelect.Label\n    className={cn(\n      \"font-medium text-muted-foreground text-xs leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n      className,\n    )}\n    {...rest}\n  />\n);\n\nconst SelectControl = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.Control>) => (\n  <ArkSelect.Control className={className} {...rest} />\n);\n\n// TODO: edit in thornberry to get rid of React.Children.only error when using `asChild` prop\nconst SelectTrigger = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.Trigger>) => (\n  <ArkSelect.Trigger\n    className={cn(\n      \"flex w-fit cursor-pointer items-center justify-between gap-2 whitespace-nowrap rounded-md px-3 py-2 text-foreground text-sm shadow-xs outline-none transition-transform disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-[size=xs]:h-7 dark:aria-invalid:ring-destructive/40 dark:hover:bg-base-800 [&[data-state=open]>svg]:rotate-180 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    {...rest}\n  />\n);\n\nconst SelectValueText = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.ValueText>) => (\n  <ArkSelect.ValueText\n    className={cn(\"line-clamp-1 flex items-center gap-2\", className)}\n    {...rest}\n  />\n);\n\nconst SelectIndicator = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<typeof ArkSelect.Indicator>) => (\n  <ArkSelect.Indicator\n    className={cn(\"size-4 transition-transform\", className)}\n    {...rest}\n  >\n    {children}\n  </ArkSelect.Indicator>\n);\n\nconst SelectClearTrigger = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.ClearTrigger>) => (\n  <ArkSelect.ClearTrigger\n    className={cn(\n      \"w-full outline-none focus-visible:bg-accent focus-visible:outline-none\",\n      className,\n    )}\n    {...rest}\n  />\n);\n\nconst SelectPositioner = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.Positioner>) => (\n  <ArkSelect.Positioner className={className} {...rest} />\n);\n\nconst SelectContent = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<typeof ArkSelect.Content>) => (\n  <ArkSelect.Content\n    className={cn(\n      \"no-scrollbar data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--available-height) w-fit min-w-32 origin-(--transform-origin) overflow-auto overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-2 text-popover-foreground shadow-md outline-none duration-300 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </ArkSelect.Content>\n);\n\nconst SelectItemGroup = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.ItemGroup>) => (\n  <ArkSelect.ItemGroup className={className} {...rest} />\n);\n\nconst SelectItemGroupLabel = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.ItemGroupLabel>) => (\n  <ArkSelect.ItemGroupLabel\n    className={cn(\n      \"px-2 py-1.5 font-semibold text-muted-foreground text-xs\",\n      className,\n    )}\n    {...rest}\n  />\n);\n\nconst SelectItem = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<typeof ArkSelect.Item>) => (\n  <ArkSelect.Item\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm outline-hidden hover:bg-accent focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-[state=checked]:bg-accent data-highlighted:bg-accent data-inset:pl-8 data-[state=checked]:text-accent-foreground data-highlighted:text-accent-foreground data-disabled:opacity-50 data-[state=checked]:hover:bg-sidebar-accent/80 [&[data-state=checked][data-highlighted]]:bg-sidebar-accent/80 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </ArkSelect.Item>\n);\n\nconst SelectItemText = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkSelect.ItemText>) => (\n  <ArkSelect.ItemText\n    className={cn(\"flex items-center gap-2\", className)}\n    {...rest}\n  />\n);\n\nconst SelectItemIndicator = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<typeof ArkSelect.ItemIndicator>) => (\n  <ArkSelect.ItemIndicator\n    className={cn(\n      \"ml-auto flex h-3.5 w-3.5 items-center justify-center text-green-500\",\n      className,\n    )}\n    {...rest}\n  >\n    <Check className=\"size-4\" />\n  </ArkSelect.ItemIndicator>\n);\n\nconst SelectSeparator = ({\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n    {...rest}\n  />\n);\n\nexport {\n  Select,\n  SelectRoot,\n  SelectRootProvider,\n  SelectContext,\n  SelectLabel,\n  SelectControl,\n  SelectTrigger,\n  SelectValueText,\n  SelectIndicator,\n  SelectClearTrigger,\n  SelectPositioner,\n  SelectContent,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n  SelectSeparator,\n  SelectHiddenSelect,\n};\n\n// Re-export createListCollection for convenience\nexport { createListCollection } from \"@ark-ui/react\";\n",
      "type": "registry:ui"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport type { ClassValue } from \"clsx\";\n\nexport const cn = (...inputs: ClassValue[]) => {\n  return twMerge(clsx(inputs));\n};\n",
      "type": "registry:lib",
      "target": ""
    }
  ],
  "type": "registry:ui"
}