{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-30",
  "type": "registry:component",
  "title": "Select 30",
  "description": "Select 30. A versatile selection component that provides a sleek, accessible way to choose options from a list.",
  "dependencies": [],
  "registryDependencies": [
    "label",
    "select"
  ],
  "files": [
    {
      "path": "components/watermelon/select-30.tsx",
      "type": "registry:component",
      "content": "import { useId } from 'react';\n\nimport { Label } from '@/components/base-ui/label';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/base-ui/select';\n\nconst hubs = [\n  { value: 'us', label: 'Western United States', flag: 'us' },\n  { value: 'gb', label: 'United Kingdom Hub', flag: 'gb' },\n  { value: 'jp', label: 'Japan Core Region', flag: 'jp' },\n  { value: 'in', label: 'India South Cluster', flag: 'in' },\n  { value: 'de', label: 'Germany Mainframe', flag: 'de' },\n];\n\nconst Select30 = () => {\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        Global Resource Hub\n      </Label>\n      <Select defaultValue=\"us\">\n        <SelectTrigger \n          id={id} \n          className=\"w-full rounded-xl border-zinc-200 bg-white shadow-xs transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900\"\n        >\n          <span className=\"flex items-center gap-2\">\n            <SelectValue placeholder=\"Identify region\" />\n          </span>\n        </SelectTrigger>\n        <SelectContent \n          position=\"popper\" \n          sideOffset={4} \n          className=\"rounded-xl border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-800 dark:bg-zinc-950\"\n        >\n          {hubs.map((hub) => (\n            <SelectItem key={hub.value} value={hub.value} className=\"rounded-lg\">\n              <span className=\"flex items-center gap-2\">\n                <img \n                  src={`https://flagcdn.com/w40/${hub.flag}.png`} \n                  alt={`${hub.label} flag`} \n                  className=\"h-3 w-4.5 object-cover rounded-xs border border-zinc-200 dark:border-zinc-800\"\n                />\n                <span className=\"truncate\">{hub.label}</span>\n              </span>\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  );\n};\n\nexport default Select30;\n"
    }
  ]
}