{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-32",
  "title": "Status select",
  "description": "Each status carries a coloured dot, in the list and in the trigger.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/field.json",
    "https://ui.ndekocode.dev/r/select.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/select/select-32.tsx",
      "content": "import { cn } from '@/registry/ndeko/lib/utils';\nimport { Field, FieldLabel } from '@/registry/ndeko/ui/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/ndeko/ui/select';\n\ntype Status = {\n  value: string;\n  name: string;\n  dotClassName: string;\n};\n\nconst STATUSES: Status[] = [\n  { value: 'completed', name: 'Completed', dotClassName: 'bg-success' },\n  { value: 'in-progress', name: 'In progress', dotClassName: 'bg-info' },\n  { value: 'pending', name: 'Pending', dotClassName: 'bg-warning' },\n  {\n    value: 'cancelled',\n    name: 'Cancelled',\n    dotClassName: 'bg-muted-foreground',\n  },\n  { value: 'failed', name: 'Failed', dotClassName: 'bg-destructive' },\n];\n\nfunction StatusName({ status }: { status: Status }) {\n  return (\n    <span className='flex min-w-0 items-center gap-2'>\n      <span\n        aria-hidden='true'\n        className={cn('size-2 shrink-0 rounded-full', status.dotClassName)}\n      />\n      <span className='truncate'>{status.name}</span>\n    </span>\n  );\n}\n\nconst STATUS_ITEMS = STATUSES.map((status) => ({\n  value: status.value,\n  label: <StatusName status={status} />,\n}));\n\nexport default function Select32() {\n  return (\n    <Field className='w-full max-w-xs'>\n      <FieldLabel>Status</FieldLabel>\n      <Select items={STATUS_ITEMS} defaultValue='completed'>\n        <SelectTrigger>\n          <SelectValue placeholder='Pick a status' />\n        </SelectTrigger>\n        <SelectContent>\n          {STATUSES.map((status) => (\n            <SelectItem\n              key={status.value}\n              value={status.value}\n              label={status.name}\n            >\n              <StatusName status={status} />\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "select"
  ],
  "type": "registry:component"
}