{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-select-31","type":"registry:block","title":"Font family select with preview","description":"Font family select with preview","dependencies":[],"registryDependencies":["field","select"],"files":[{"path":"c-select-31.tsx","type":"registry:block","content":"import { Field } from \"@/components/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\nconst fonts = [\n  { value: \"sans\", label: \"Inter\", className: \"font-sans\" },\n  { value: \"mono\", label: \"Mono\", className: \"font-mono\" },\n  { value: \"serif\", label: \"Serif\", className: \"font-serif\" },\n]\n\nexport function Pattern() {\n  return (\n    <Field className=\"max-w-xs\">\n      <Select defaultValue={fonts[0]} items={fonts}>\n        <SelectTrigger className=\"w-[200px]\">\n          <SelectValue>\n            {(item: (typeof fonts)[number]) => (\n              <span className={item?.className}>{item?.label}</span>\n            )}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={false}>\n          <SelectGroup>\n            {fonts.map((font) => (\n              <SelectItem key={font.value} value={font}>\n                <span className={font.className}>{font.label}</span>\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Field>\n  )\n}","target":"components/examples/c-select-31.tsx"}],"meta":{"order":31}}