{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-select-6",
  "description": "Select with groups",
  "registryDependencies": [
    "@coss/select"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-select-6.tsx",
      "content": "import {\n  Select,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectItem,\n  SelectPopup,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frontend = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nconst backend = [\n  { label: \"Express\", value: \"express\" },\n  { label: \"NestJS\", value: \"nestjs\" },\n  { label: \"Fastify\", value: \"fastify\" },\n  { label: \"Django\", value: \"django\" },\n  { label: \"Flask\", value: \"flask\" },\n  { label: \"Rails\", value: \"rails\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" items={[...frontend, ...backend]}>\n      <SelectTrigger>\n        <SelectValue placeholder=\"Select framework\" />\n      </SelectTrigger>\n      <SelectPopup>\n        <SelectGroup>\n          <SelectGroupLabel>Frontend</SelectGroupLabel>\n          {frontend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectGroupLabel>Backend</SelectGroupLabel>\n          {backend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectPopup>\n    </Select>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "select"
  ],
  "type": "registry:block"
}