{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-steps",
  "version": "2.1.0",
  "category": "status",
  "meta": {
    "preview": "https://ui.manifest.build/previews/progress-steps.png",
    "version": "2.1.0",
    "changelog": {
      "1.0.0": "Initial release with horizontal and vertical layouts",
      "1.0.2": "Added comprehensive JSDoc documentation",
      "1.1.0": "Moved to status category for better organization",
      "1.1.1": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
      "1.1.2": "Fixed defensive property access to handle empty objects and null values",
      "1.1.3": "Additional defensive property access improvements",
      "2.0.0": "BREAKING: Removed id from Step interface, use array index for key",
      "2.0.1": "Removed default content data - component only renders explicitly provided data",
      "2.1.0": "Added demo data defaults - component renders demo content when no data prop is provided"
    }
  },
  "changelog": {
    "1.0.0": "Initial release with horizontal and vertical layouts",
    "1.0.2": "Added comprehensive JSDoc documentation",
    "1.1.0": "Moved to status category for better organization",
    "1.1.1": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
    "1.1.2": "Fixed defensive property access to handle empty objects and null values",
    "1.1.3": "Additional defensive property access improvements",
    "2.0.0": "BREAKING: Removed id from Step interface, use array index for key",
    "2.0.1": "Removed default content data - component only renders explicitly provided data",
    "2.1.0": "Added demo data defaults - component renders demo content when no data prop is provided"
  },
  "title": "Progress Steps",
  "author": "MNFST, Inc",
  "description": "Progress indicator with horizontal or vertical layout and step statuses.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/status/progress-steps.tsx",
      "content": "'use client'\n\nimport { cn } from '@/lib/utils'\nimport { Check } from 'lucide-react'\nimport { demoProgressSteps } from './demo/status'\n\n/**\n * Represents an individual step in the progress tracker.\n * @interface Step\n * @property {string} [label] - Display text for the step\n * @property {\"completed\" | \"current\" | \"pending\"} [status] - Current status of the step\n */\nexport interface Step {\n  label?: string\n  status?: 'completed' | 'current' | 'pending'\n}\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * ProgressStepsProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the ProgressSteps component, which displays a visual progress\n * tracker showing sequential steps with completion states.\n */\nexport interface ProgressStepsProps {\n  data?: {\n    /** Array of steps to display with their labels and status. */\n    steps?: Step[]\n  }\n}\n\n\n/**\n * A progress stepper component showing sequential step status.\n * Displays steps with completed, current, and pending states.\n *\n * Features:\n * - Three step states: completed, current, pending\n * - Check icon for completed steps\n * - Responsive horizontal/vertical layout\n * - Connected step indicators\n *\n * @component\n * @example\n * ```tsx\n * <ProgressSteps\n *   data={{\n *     steps: [\n *       { label: \"Order received\", status: \"completed\" },\n *       { label: \"Processing\", status: \"completed\" },\n *       { label: \"Shipping\", status: \"current\" },\n *       { label: \"Delivery\", status: \"pending\" }\n *     ]\n *   }}\n * />\n * ```\n */\nexport function ProgressSteps({ data }: ProgressStepsProps) {\n  const resolved: NonNullable<ProgressStepsProps['data']> = data ?? { steps: demoProgressSteps }\n  const steps = resolved.steps ?? []\n  return (\n    <div className=\"flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2 bg-card rounded-lg p-4\">\n      {steps.map((step, index) => {\n        const stepStatus = step.status ?? 'pending'\n        return (\n          <div key={index} className=\"flex items-center gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <div\n                className={cn(\n                  'flex h-5 w-5 items-center justify-center rounded-full text-xs flex-shrink-0',\n                  stepStatus === 'completed' && 'bg-foreground text-background',\n                  stepStatus === 'current' && 'border-2 border-foreground',\n                  stepStatus === 'pending' && 'border border-muted-foreground/40'\n                )}\n              >\n                {stepStatus === 'completed' && <Check className=\"h-3 w-3\" />}\n              </div>\n              {step.label && (\n                <span\n                  className={cn(\n                    'text-xs sm:text-sm',\n                    stepStatus === 'current' && 'font-medium',\n                    stepStatus === 'pending' && 'text-muted-foreground'\n                  )}\n                >\n                  {step.label}\n                </span>\n              )}\n            </div>\n            {index < steps.length - 1 && (\n              <div className=\"hidden sm:block w-4 h-px bg-border\" />\n            )}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/ui/progress-steps.tsx"
    },
    {
      "path": "registry/status/demo/status.ts",
      "content": "// Demo data for Status category components\n// This file contains sample data used for component previews and documentation\n\nexport const demoProgressSteps = [\n  { label: 'Cart', status: 'completed' as const },\n  { label: 'Shipping', status: 'current' as const },\n  { label: 'Payment', status: 'pending' as const },\n  { label: 'Confirm', status: 'pending' as const },\n]\n\nexport const demoStatusBadge = {\n  status: 'processing' as const,\n  label: 'Processing',\n}\n",
      "type": "registry:lib",
      "target": "components/ui/demo/status.ts"
    }
  ],
  "categories": [
    "status"
  ],
  "type": "registry:block"
}