{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-7",
  "type": "registry:component",
  "title": "Select 7",
  "description": "Select 7. A versatile selection component that provides a sleek, accessible way to choose options from a list.",
  "dependencies": [],
  "registryDependencies": [
    "label",
    "native-select"
  ],
  "files": [
    {
      "path": "components/watermelon/select-7.tsx",
      "type": "registry:component",
      "content": "import { useId } from 'react';\n\nimport { Label } from '@/components/base-ui/label';\nimport { \n  NativeSelect, \n  NativeSelectOptGroup,\n  NativeSelectOption \n} from '@/components/base-ui/native-select';\n\nconst Select7 = () => {\n  const id = useId();\n\n  return (\n    <div className=\"w-full max-w-xs space-y-2\">\n      <Label htmlFor={id} className=\"text-zinc-600 dark:text-zinc-400\">\n        Architecture Blueprint\n      </Label>\n      <NativeSelect \n        id={id} \n        className=\"w-full rounded-xl border-zinc-200 shadow-xs dark:border-zinc-800 dark:bg-zinc-950 transition-all focus:ring-2 focus:ring-zinc-400/20 dark:focus:ring-zinc-500/20 dark:[&_select]:[color-scheme:dark]\"\n      >\n        <NativeSelectOptGroup label=\"Virtualization Layer\" className=\"dark:bg-zinc-950 dark:text-zinc-500\">\n          <NativeSelectOption value=\"docker\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Container Engine (Docker)</NativeSelectOption>\n          <NativeSelectOption value=\"kvm\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Kernel Virtual Machine</NativeSelectOption>\n          <NativeSelectOption value=\"firecracker\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">MicroVM (Firecracker)</NativeSelectOption>\n        </NativeSelectOptGroup>\n        <NativeSelectOptGroup label=\"Orchestration Fabric\" className=\"dark:bg-zinc-950 dark:text-zinc-500\">\n          <NativeSelectOption value=\"k8s\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Managed Kubernetes</NativeSelectOption>\n          <NativeSelectOption value=\"nomad\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">HashiCorp Nomad</NativeSelectOption>\n          <NativeSelectOption value=\"swarm\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Docker Swarm Mode</NativeSelectOption>\n        </NativeSelectOptGroup>\n      </NativeSelect>\n    </div>\n  );\n};\n\nexport default Select7;\n"
    }
  ]
}