{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-ai-steps",
  "title": "Steps",
  "description": "A collapsible AI tool-run steps component with animated shimmer trigger and a vertical progress bar.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "collapsible",
    "@odysseyui/components-texts-text-shimmer"
  ],
  "files": [
    {
      "path": "registry/components/ai/steps/index.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';\nimport { ShimmerText } from '@/components/odyssey/components/texts/text-shimmer';\n\nexport type StepsItemProps = React.ComponentProps<'div'>;\n\nexport const StepsItem = ({\n  children,\n  className,\n  ...props\n}: StepsItemProps) => (\n  <div\n    className={cn(\n      'text-muted-foreground hover:text-foreground text-sm transition-colors duration-200 [&_strong]:text-blue-500',\n      className,\n    )}\n    {...props}\n  >\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-blue-500 flex w-full cursor-pointer items-center justify-start gap-1 text-sm transition-colors duration-200',\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-hover:text-blue-500 group-data-[state=open]:rotate-180\" />\n          )}\n        </span>\n      ) : null}\n      <span>\n        <ShimmerText text={children as string} />\n      </span>\n    </div>\n    {!leftIcon && (\n      <ChevronDown className=\"size-4 transition-transform group-hover:text-blue-500 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 cursor-pointer',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"group 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(\n      'bg-muted h-full w-[2px] transition-colors duration-300 group-hover:bg-blue-500/40',\n      className,\n    )}\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",
      "target": "components/odysseyui/steps.tsx"
    }
  ],
  "type": "registry:ui"
}