{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-35",
  "type": "registry:component",
  "title": "Select 35",
  "description": "Select 35. A versatile selection component that provides a sleek, accessible way to choose options from a list.",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "label"
  ],
  "files": [
    {
      "path": "components/watermelon/select-35.tsx",
      "type": "registry:component",
      "content": "import { ListBox, ListBoxItem } from 'react-aria-components';\n\nimport { Label } from '@/components/base-ui/label';\n\nconst envs = [\n  { id: 'prod', label: 'Production (Main)', description: 'Critical systems' },\n  { id: 'staging', label: 'Staging (Build)', description: 'UAT testing' },\n  { id: 'dev', label: 'Development (Local)', description: 'Sandbox play' },\n  { id: 'legacy', label: 'Legacy (v2)', description: 'Archived data', isDisabled: true },\n];\n\nconst Select35 = () => {\n  return (\n    <div className=\"w-full max-w-xs space-y-2\">\n      <Label className=\"text-zinc-600 dark:text-zinc-400\">Environment Context</Label>\n      <div className=\"overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs dark:border-zinc-800 dark:bg-zinc-950 transition-all\">\n        <ListBox\n          className=\"flex flex-col p-1 outline-none\"\n          aria-label=\"Select environment context\"\n          selectionMode=\"single\"\n          defaultSelectedKeys={['staging']}\n        >\n          {envs.map((env) => (\n            <ListBoxItem\n              key={env.id}\n              id={env.id}\n              className=\"flex flex-col rounded-lg px-2.5 py-2 text-sm outline-none cursor-default select-none transition-colors data-[selected=true]:bg-zinc-100 dark:data-[selected=true]:bg-zinc-900 data-[selected=true]:text-zinc-900 dark:data-[selected=true]:text-zinc-100 data-[disabled]:opacity-40 data-[disabled]:grayscale focus:bg-zinc-100 dark:focus:bg-zinc-900\"\n              isDisabled={env.isDisabled}\n              textValue={env.label}\n            >\n              <span className=\"font-medium text-zinc-900 dark:text-zinc-100\">{env.label}</span>\n              <span className=\"text-[11px] text-zinc-500\">{env.description}</span>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </div>\n    </div>\n  );\n};\n\nexport default Select35;\n"
    }
  ]
}
