{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"reasoning-level","type":"registry:ui","title":"Reasoning Level","description":"A control for how hard the model should think — light, balanced or deep, with the tradeoff between speed and depth shown.","author":"Scrim UI (https://scrimui.dev)","categories":["model-settings"],"docs":"https://scrimui.dev/components/reasoning-level","dependencies":[],"registryDependencies":[],"files":[{"path":"src/showcase/reasoning-level/reasoning-level.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type ReasoningLevel = \"light\" | \"balanced\" | \"deep\";\n\nexport type ReasoningLevelProps = {\n  value?: ReasoningLevel;\n  onChange?: (level: ReasoningLevel) => void;\n  compact?: boolean;\n  className?: string;\n};\n\nconst LEVELS: { id: ReasoningLevel; label: string; hint: string }[] = [\n  { id: \"light\", label: \"Light\", hint: \"Fast answers for simple questions\" },\n  { id: \"balanced\", label: \"Balanced\", hint: \"A good default for most tasks\" },\n  { id: \"deep\", label: \"Deep\", hint: \"Thinks longer for hard problems\" },\n];\n\n/* ------------------------------------------------------------------ */\n/* ReasoningLevel                                                      */\n/* ------------------------------------------------------------------ */\n\nexport function ReasoningLevel({\n  value = \"balanced\",\n  onChange,\n  compact = false,\n  className = \"\",\n}: ReasoningLevelProps) {\n  const current = LEVELS.find((l) => l.id === value) ?? LEVELS[1];\n\n  return (\n    <div className={className}>\n      <div className=\"flex items-center justify-between\">\n        <p className=\"text-sm font-medium text-zinc-900 dark:text-zinc-100\">Reasoning effort</p>\n        <span className=\"text-xs font-medium text-violet-600 dark:text-violet-400\">\n          {current.label}\n        </span>\n      </div>\n\n      <div\n        role=\"radiogroup\"\n        aria-label=\"Reasoning effort\"\n        className=\"mt-2 grid grid-cols-3 gap-1 rounded-lg bg-zinc-100 p-1 dark:bg-zinc-800\"\n      >\n        {LEVELS.map((level) => {\n          const active = level.id === current.id;\n          return (\n            <button\n              key={level.id}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={active}\n              onClick={() => onChange?.(level.id)}\n              className={`rounded-md px-2 py-1.5 text-xs font-medium transition-colors ${\n                active\n                  ? \"bg-white text-zinc-900 shadow-sm dark:bg-zinc-700 dark:text-zinc-100\"\n                  : /* zinc-600, not zinc-500: an unselected label sits on the\n                       zinc-100 track, where zinc-500 measures 4.40:1 and fails\n                       AA. zinc-600 is 7.03:1. The white pill and its shadow —\n                       not a washed-out label — are what mark the selection. */\n                    \"text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200\"\n              }`}\n            >\n              {level.label}\n            </button>\n          );\n        })}\n      </div>\n\n      {!compact && (\n        <p className=\"mt-2 text-xs text-zinc-500 dark:text-zinc-400\">{current.hint}</p>\n      )}\n    </div>\n  );\n}\n","type":"registry:ui","target":"components/ui/reasoning-level.tsx"}]}