{
  "name": "steps",
  "type": "registry:ui",
  "registryDependencies": [
    "collapsible"
  ],
  "dependencies": [],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "description": "A component for displaying a sequence of operations in a collapsible layout. Each step can include details and an optional vertical bar. Useful for showing AI steps like reasoning traces, tool calls, or process logs.",
  "files": [
    {
      "path": "steps.tsx",
      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDown } from \"lucide-react\"\n\nexport type StepsItemProps = React.ComponentProps<\"div\">\n\nexport const StepsItem = ({\n  children,\n  className,\n  ...props\n}: StepsItemProps) => (\n  <div className={cn(\"text-muted-foreground text-sm\", className)} {...props}>\n    {children}\n  </div>\n)\n\nexport type StepsTriggerProps = React.ComponentProps<\n  typeof CollapsibleTrigger\n> & {\n  leftIcon?: React.ReactNode\n  swapIconOnHover?: boolean\n}\n\nexport const StepsTrigger = ({\n  children,\n  className,\n  leftIcon,\n  swapIconOnHover = true,\n  ...props\n}: StepsTriggerProps) => (\n  <CollapsibleTrigger\n    className={cn(\n      \"group text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center justify-start gap-1 text-sm transition-colors\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"flex items-center gap-2\">\n      {leftIcon ? (\n        <span className=\"relative inline-flex size-4 items-center justify-center\">\n          <span\n            className={cn(\n              \"transition-opacity\",\n              swapIconOnHover && \"group-hover:opacity-0\"\n            )}\n          >\n            {leftIcon}\n          </span>\n          {swapIconOnHover && (\n            <ChevronDown className=\"absolute size-4 opacity-0 transition-opacity group-hover:opacity-100 group-data-[state=open]:rotate-180\" />\n          )}\n        </span>\n      ) : null}\n      <span>{children}</span>\n    </div>\n    {!leftIcon && (\n      <ChevronDown className=\"size-4 transition-transform group-data-[state=open]:rotate-180\" />\n    )}\n  </CollapsibleTrigger>\n)\n\nexport type StepsContentProps = React.ComponentProps<\n  typeof CollapsibleContent\n> & {\n  bar?: React.ReactNode\n}\n\nexport const StepsContent = ({\n  children,\n  className,\n  bar,\n  ...props\n}: StepsContentProps) => {\n  return (\n    <CollapsibleContent\n      className={cn(\n        \"text-popover-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"mt-3 grid max-w-full min-w-0 grid-cols-[min-content_minmax(0,1fr)] items-start gap-x-3\">\n        <div className=\"min-w-0 self-stretch\">{bar ?? <StepsBar />}</div>\n        <div className=\"min-w-0 space-y-2\">{children}</div>\n      </div>\n    </CollapsibleContent>\n  )\n}\n\nexport type StepsBarProps = React.HTMLAttributes<HTMLDivElement>\n\nexport const StepsBar = ({ className, ...props }: StepsBarProps) => (\n  <div\n    className={cn(\"bg-muted h-full w-[2px]\", className)}\n    aria-hidden\n    {...props}\n  />\n)\n\nexport type StepsProps = React.ComponentProps<typeof Collapsible>\n\nexport function Steps({ defaultOpen = true, className, ...props }: StepsProps) {\n  return (\n    <Collapsible\n      className={cn(className)}\n      defaultOpen={defaultOpen}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}