{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "z-onboarding-step-pills",
  "title": "Z Onboarding Step Pills",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://ui.orchid.ai/r/orchid-foundation.json",
    "https://ui.orchid.ai/r/orchid-theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/spectrum/atoms/z-onboarding-step-pills/z-onboarding-step-pills.tsx",
      "content": "\"use client\";\nimport { cn } from \"../../../lib/ui-utils\";\nexport interface ZOnboardingStepPillsProps {\n    currentStep: number;\n    totalSteps: number;\n    completedSteps: number[];\n    className?: string;\n}\nexport default function ZOnboardingStepPills({ currentStep, totalSteps, completedSteps, className, }: ZOnboardingStepPillsProps) {\n    const getStepState = (index: number): 'completed' | 'current' | 'upcoming' => {\n        if (completedSteps.includes(index))\n            return 'completed';\n        if (index === currentStep)\n            return 'current';\n        return 'upcoming';\n    };\n    const pillWidth = 12;\n    const gapWidth = 5;\n    const coverUpToIndex = currentStep;\n    const numPillsToCover = coverUpToIndex + 1;\n    const overlayWidth = numPillsToCover > 0\n        ? (numPillsToCover * pillWidth) + ((numPillsToCover - 1) * gapWidth)\n        : 0;\n    return (<div className={cn('relative flex bg-surface border border-neutral-subtle dark:border-neutral p-1 rounded-full items-center justify-center', className)} style={{ gap: `${gapWidth}px` }}>\n      {overlayWidth > 0 && (<div className=\"absolute left-1 top-1 z-10 h-1.5 bg-surface-strong rounded-full transition-[width] duration-500 ease-out\" style={{ width: `${overlayWidth}px` }} aria-hidden=\"true\"/>)}\n      \n      {Array.from({ length: totalSteps }).map((_, index) => {\n            const state = getStepState(index);\n            const isSwallowed = index < currentStep;\n            return (<div key={index} className={cn('h-1.5 rounded-full origin-center will-change-[transform,opacity]', 'transition-[background-color,transform,opacity] duration-300 ease-out', !isSwallowed && 'bg-surface-strong scale-100 opacity-100', isSwallowed && 'bg-transparent scale-50 opacity-0')} style={{ width: `${pillWidth}px` }} aria-label={`Step ${index + 1}`} aria-current={state === 'current' ? 'step' : undefined}/>);\n        })}\n    </div>);\n}\n",
      "type": "registry:ui",
      "target": "@ui/orchid/spectrum/atoms/z-onboarding-step-pills/z-onboarding-step-pills.tsx"
    }
  ],
  "type": "registry:ui"
}