{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-06",
  "title": "Select with Icon",
  "description": "A select component with icon integration",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "select"
  ],
  "files": [
    {
      "path": "src/components/customized/select/select-06.tsx",
      "content": "\"use client\";\n\nimport {\n  AppleIcon,\n  BananaIcon,\n  CherryIcon,\n  CitrusIcon,\n  GrapeIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/ui/select\";\n\nconst fruits = [\n  { value: \"apple\", label: \"Apple\", icon: AppleIcon },\n  { value: \"banana\", label: \"Banana\", icon: BananaIcon },\n  { value: \"cherry\", label: \"Cherry\", icon: CherryIcon },\n  { value: \"grapes\", label: \"Grapes\", icon: GrapeIcon },\n  { value: \"citrus\", label: \"Citrus\", icon: CitrusIcon },\n];\n\nexport default function SelectWithIconDemo() {\n  const [value, setValue] = React.useState(\"apple\");\n\n  return (\n    <Select onValueChange={setValue} value={value}>\n      <SelectTrigger className=\"w-[180px]\">\n        <div className=\"flex items-center gap-2 [&_svg]:h-4 [&_svg]:w-4\">\n          <SelectValue placeholder=\"Select a fruit\" />\n        </div>\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          {fruits.map((fruit) => (\n            <SelectItem key={fruit.value} value={fruit.value}>\n              <div className=\"flex items-center gap-2\">\n                <fruit.icon className=\"h-4 w-4\" /> {fruit.label}\n              </div>\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}