{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reasoning",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/ui/reasoning.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Collapsible } from \"@base-ui/react/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Reasoning({\n  children,\n  isStreaming = false,\n  duration,\n  className,\n}: {\n  children: React.ReactNode;\n  isStreaming?: boolean;\n  /** Seconds spent thinking; shown once streaming ends. */\n  duration?: number;\n  className?: string;\n}) {\n  const [open, setOpen] = React.useState(isStreaming);\n  const [wasStreaming, setWasStreaming] = React.useState(isStreaming);\n\n  // Open while thinking, collapse when done. Adjusted during render rather than in an effect.\n  if (isStreaming !== wasStreaming) {\n    setWasStreaming(isStreaming);\n    setOpen(isStreaming);\n  }\n\n  return (\n    <Collapsible.Root open={open} onOpenChange={setOpen} className={className}>\n      <Collapsible.Trigger className=\"group flex items-center gap-1.5 rounded-sm font-mono text-xs text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring\">\n        <span className={cn(isStreaming && \"animate-pulse motion-reduce:animate-none\")}>\n          {isStreaming\n            ? \"Thinking…\"\n            : duration\n              ? `Thought for ${duration}s`\n              : \"Thought process\"}\n        </span>\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"size-3.5 transition-transform motion-reduce:transition-none group-data-[panel-open]:rotate-90\"\n        >\n          <path d=\"m6 4 4 4-4 4\" />\n        </svg>\n      </Collapsible.Trigger>\n      <Collapsible.Panel className=\"h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-200 motion-reduce:transition-none data-[ending-style]:h-0 data-[starting-style]:h-0\">\n        <div className=\"mt-2 border-l-2 pl-3 text-[13px] leading-relaxed text-muted-foreground\">\n          {children}\n        </div>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}