{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "picker",
  "title": "OIDC Picker",
  "description": "Single-select provider picker that adapts to the count: a toggle row for up to three providers, a select beyond that, nothing for one.",
  "registryDependencies": [
    "field",
    "select",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/oidc/components/picker.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\n\ntype PickerProvider = {\n  value: string\n  label: string\n  icon?: React.ComponentType<{ className?: string }>\n}\n\nfunction ProviderPicker({\n  providers,\n  value,\n  onValueChange,\n  className,\n}: {\n  providers: PickerProvider[]\n  value: string\n  onValueChange: (value: string) => void\n  className?: string\n}) {\n  const labelId = React.useId()\n\n  if (providers.length < 2) {\n    return null\n  }\n\n  const isSelect = providers.length > 3\n\n  return (\n    <Field>\n      <FieldLabel\n        htmlFor={isSelect ? labelId : undefined}\n        id={isSelect ? undefined : labelId}\n      >\n        Provider\n      </FieldLabel>\n      {isSelect ? (\n        <Select\n          items={providers}\n          value={value}\n          onValueChange={(providerId) => {\n            if (typeof providerId === \"string\") {\n              onValueChange(providerId)\n            }\n          }}\n        >\n          <SelectTrigger id={labelId} className={cn(\"w-full\", className)}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {providers.map((provider) => (\n                <SelectItem key={provider.value} value={provider.value}>\n                  {provider.icon ? <provider.icon /> : null} {provider.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      ) : (\n        <div className=\"w-full min-w-0 overflow-x-auto\">\n          <ToggleGroup\n            variant=\"outline\"\n            value={[value]}\n            aria-labelledby={labelId}\n            onValueChange={([providerId]) => {\n              if (typeof providerId === \"string\") {\n                onValueChange(providerId)\n              }\n            }}\n            className={cn(\"w-max\", className)}\n          >\n            {providers.map((provider) => (\n              <ToggleGroupItem key={provider.value} value={provider.value}>\n                {provider.icon ? <provider.icon /> : null} {provider.label}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </div>\n      )}\n    </Field>\n  )\n}\n\nexport { ProviderPicker }\nexport type { PickerProvider }\n",
      "type": "registry:component",
      "target": "@components/oidc/picker.tsx"
    }
  ],
  "categories": [
    "auth",
    "forms"
  ],
  "type": "registry:component"
}