{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "model-picker",
  "title": "ModelPicker",
  "description": "Chooses which model answers.",
  "dependencies": [
    "@radix-ui/react-dropdown-menu@^2.1.25"
  ],
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/menu.json"
  ],
  "files": [
    {
      "path": "model-picker/ModelPicker.css",
      "content": ".cr-model-picker {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 0 10px 0 var(--cr-space-3);\n  border: 0;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-bg-subtle);\n  color: var(--cr-color-text-secondary);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-sm);\n  font-weight: var(--cr-font-weight-semibold);\n  cursor: pointer;\n}\n\n.cr-model-picker:hover,\n.cr-model-picker[data-state='open'] {\n  color: var(--cr-color-text-default);\n}\n\n.cr-model-picker:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-model-picker:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.cr-model-picker__menu {\n  min-width: 260px;\n}\n\n.cr-model-picker__name {\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-model-picker__menu .cr-menu__item[data-state='checked'] {\n  background: var(--cr-color-bg-subtle);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/model-picker/ModelPicker.css"
    },
    {
      "path": "model-picker/ModelPicker.tsx",
      "content": "'use client';\n\nimport * as RadixMenu from '@radix-ui/react-dropdown-menu';\nimport { useState, type ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport { CheckIcon, ChevronDownIcon } from '@/lib/creance/icons';\nimport '@/components/creance/menu/Menu.css';\nimport './ModelPicker.css';\n\nexport interface ModelOption {\n  value: string;\n  label: string;\n  /** One line on when to use it. */\n  description?: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ModelPickerProps {\n  models: ModelOption[];\n  value?: string;\n  /** Default is the first model. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Accessible name of the button, read before the chosen model. Default \"Model\". */\n  label?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\n/** Chooses which model answers. A Radix menu of radio items: arrow keys move, Enter chooses, Escape closes. */\nexport function ModelPicker({ models, value: controlled, defaultValue, onValueChange, label = 'Model', disabled, className }: ModelPickerProps) {\n  const [own, setOwn] = useState(defaultValue ?? models[0]?.value ?? '');\n  const value = controlled ?? own;\n  const current = models.find((m) => m.value === value);\n\n  return (\n    <RadixMenu.Root>\n      <RadixMenu.Trigger className={cx('cr-model-picker', className)} aria-label={`${label}: ${current?.label ?? 'none'}`} disabled={disabled}>\n        {current?.label ?? label}\n        <ChevronDownIcon />\n      </RadixMenu.Trigger>\n      <RadixMenu.Portal>\n        <RadixMenu.Content className=\"cr-menu cr-popover cr-model-picker__menu\" sideOffset={6} align=\"start\">\n          <RadixMenu.RadioGroup\n            value={value}\n            onValueChange={(next) => {\n              setOwn(next);\n              onValueChange?.(next);\n            }}\n          >\n            {models.map((m) => (\n              <RadixMenu.RadioItem key={m.value} value={m.value} disabled={m.disabled} className=\"cr-menu__item\">\n                <span className=\"cr-menu__text\">\n                  <span className=\"cr-model-picker__name\">{m.label}</span>\n                  {m.description && <span className=\"cr-menu__description\">{m.description}</span>}\n                </span>\n                <RadixMenu.ItemIndicator>\n                  <CheckIcon />\n                </RadixMenu.ItemIndicator>\n              </RadixMenu.RadioItem>\n            ))}\n          </RadixMenu.RadioGroup>\n        </RadixMenu.Content>\n      </RadixMenu.Portal>\n    </RadixMenu.Root>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/model-picker/ModelPicker.tsx"
    }
  ],
  "categories": [
    "molecule",
    "chat"
  ],
  "type": "registry:ui"
}