{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-34",
  "type": "registry:component",
  "title": "Select 34",
  "description": "Select 34. 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-34.tsx",
      "type": "registry:component",
      "content": "import { useId } from 'react';\n\nimport { Label } from '@/components/base-ui/label';\nimport { NativeSelect } from '@/components/base-ui/native-select';\n\nconst Select34 = () => {\n  const id = useId();\n\n  return (\n    <div className=\"w-full max-w-xs space-y-2 text-zinc-900 dark:text-zinc-100\">\n      <Label htmlFor={id} className=\"text-zinc-600 dark:text-zinc-400\">\n        Dietary Preferences\n      </Label>\n      <NativeSelect \n        id={id} \n        multiple \n        className=\"w-full [&_svg]:hidden [&_select]:h-32 [&_select]:rounded-xl [&_select]:border-zinc-200 [&_select]:py-2 [&_select]:pr-2.5 [&_select]:shadow-xs dark:[&_select]:border-zinc-800 dark:[&_select]:bg-zinc-950 transition-all [&_select]:focus-visible:ring-zinc-400/20 dark:[&_select]:focus-visible:ring-zinc-500/20\"\n      >\n        <option value=\"vegetarian\" className=\"py-1 px-1.5 focus:bg-zinc-100 dark:focus:bg-zinc-900\">\n          Vegetarian Options\n        </option>\n        <option value=\"vegan\" className=\"py-1 px-1.5 focus:bg-zinc-100 dark:focus:bg-zinc-900\">\n          Strictly Vegan\n        </option>\n        <option value=\"gluten-free\" className=\"py-1 px-1.5 focus:bg-zinc-100 dark:focus:bg-zinc-900\">\n          Gluten-Free Diet\n        </option>\n        <option value=\"halal\" className=\"py-1 px-1.5 focus:bg-zinc-100 dark:focus:bg-zinc-900\">\n          Halal Certified\n        </option>\n        <option value=\"kosher\" className=\"py-1 px-1.5 focus:bg-zinc-100 dark:focus:bg-zinc-900\">\n          Kosher Selection\n        </option>\n        <option value=\"dairy-free\" className=\"py-1 px-1.5 focus:bg-zinc-100 dark:focus:bg-zinc-900\">\n          Dairy-Free Items\n        </option>\n      </NativeSelect>\n      <p className=\"text-[11px] text-zinc-500 px-1 dark:text-zinc-500\">\n        Hold Cmd/Ctrl to select multiple preferences.\n      </p>\n    </div>\n  );\n};\n\nexport default Select34;\n"
    }
  ]
}