{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-select-2","type":"registry:block","title":"Select with icons and placeholder state","description":"Select with icons and placeholder state","dependencies":[],"registryDependencies":["field","select"],"files":[{"path":"c-select-2.tsx","type":"registry:block","content":"\"use client\"\n\nimport { ReactElement } from \"react\"\n\nimport { Field } from \"@/components/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface IconPlaceholderProps {\n  lucide: string\n  tabler: string\n  hugeicons: string\n  phosphor: string\n  remixicon: string\n  className?: string\n}\n\ninterface Item {\n  label: string\n  value: string | null\n  icon: ReactElement<IconPlaceholderProps>\n}\n\nconst items: Item[] = [\n  {\n    label: \"Select an option\",\n    value: null,\n    icon: (\n      <IconPlaceholder\n        lucide=\"ScanIcon\"\n        tabler=\"IconLineScan\"\n        hugeicons=\"ScanIcon\"\n        phosphor=\"ScanIcon\"\n        remixicon=\"RiQrScan2Line\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n  {\n    label: \"Dashboard\",\n    value: \"dashboard\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"LayoutDashboardIcon\"\n        tabler=\"IconLayoutDashboard\"\n        hugeicons=\"DashboardSquare02Icon\"\n        phosphor=\"LayoutIcon\"\n        remixicon=\"RiDashboardLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n  {\n    label: \"Activity\",\n    value: \"activity\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"ActivityIcon\"\n        tabler=\"IconActivity\"\n        hugeicons=\"ActivityIcon\"\n        phosphor=\"ActivityIcon\"\n        remixicon=\"RiPulseLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n  {\n    label: \"Security\",\n    value: \"security\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"ShieldIcon\"\n        tabler=\"IconShield\"\n        hugeicons=\"Shield01Icon\"\n        phosphor=\"ShieldIcon\"\n        remixicon=\"RiShieldLine\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n  {\n    label: \"Settings\",\n    value: \"settings\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"SettingsIcon\"\n        tabler=\"IconSettings\"\n        hugeicons=\"SettingsIcon\"\n        phosphor=\"GearIcon\"\n        remixicon=\"RiSettings3Line\"\n        className=\"text-muted-foreground size-4\"\n      />\n    ),\n  },\n]\n\nexport function Pattern() {\n  return (\n    <Field className=\"max-w-xs\">\n      <Select defaultValue={items[0]} items={items}>\n        <SelectTrigger className=\"w-[200px]\">\n          <SelectValue>\n            {(item: Item) => (\n              <span className=\"flex items-center gap-2\">\n                {item?.icon && item.icon}\n                <span>{item?.label}</span>\n              </span>\n            )}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={false}>\n          <SelectGroup>\n            {items.slice(1).map((item) => (\n              <SelectItem key={item.value} value={item}>\n                {item.icon}\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Field>\n  )\n}","target":"components/examples/c-select-2.tsx"}],"meta":{"order":2}}