{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "`numbered` / `compact` flow progress",
  "dependencies": [],
  "registryDependencies": [
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/stepper.tsx",
      "content": "import { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { View } from 'react-native';\n\ntype Props = {\n  /** 1-indexed current step. */\n  current: number;\n  total: number;\n  /** Optional labels; must have `total` entries to render. */\n  labels?: string[];\n  variant?: 'numbered' | 'compact';\n  className?: string;\n};\n\n/** Progress for multi-step flows (onboarding, checkout). Distinct from PagerDots. */\nexport function Stepper({ current, total, labels, variant = 'numbered', className }: Props) {\n  const step = Math.max(1, Math.min(current, total));\n\n  if (variant === 'compact') {\n    return (\n      <View className={cn('gap-2', className)} accessibilityLabel={`Step ${step} of ${total}`}>\n        <View className=\"bg-muted h-1 overflow-hidden rounded-full\">\n          <View className=\"bg-primary h-full rounded-full\" style={{ width: `${(step / total) * 100}%` }} />\n        </View>\n        <Text className=\"text-muted-foreground text-sm\">\n          Step {step} of {total}\n        </Text>\n      </View>\n    );\n  }\n\n  const hasLabels = !!labels && labels.length === total;\n  return (\n    <View className={className} accessibilityLabel={`Step ${step} of ${total}`}>\n      <View className=\"flex-row items-start\">\n        {Array.from({ length: total }).map((_, i) => {\n          const n = i + 1;\n          const done = n < step;\n          const active = n === step;\n          return (\n            <React.Fragment key={n}>\n              {i > 0 ? (\n                <View className={cn('mx-1.5 mt-3 h-0.5 flex-1 rounded-full', n <= step ? 'bg-primary' : 'bg-border')} />\n              ) : null}\n              {/* One column per step so the label sits under its own circle. */}\n              <View className=\"items-center\" style={{ width: hasLabels ? 60 : 24 }}>\n                <View\n                  className={cn(\n                    'size-6 items-center justify-center rounded-full',\n                    done ? 'bg-primary' : active ? 'bg-primary/20 border-primary border' : 'bg-muted'\n                  )}>\n                  <Text className={cn('text-xs font-semibold', done ? 'text-primary-foreground' : active ? 'text-primary' : 'text-muted-foreground')}>\n                    {n}\n                  </Text>\n                </View>\n                {hasLabels ? (\n                  <Text\n                    numberOfLines={1}\n                    className={cn('mt-2 text-center text-xs', active ? 'text-foreground font-medium' : 'text-muted-foreground')}>\n                    {labels[i]}\n                  </Text>\n                ) : null}\n              </View>\n            </React.Fragment>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/stepper.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Stepper"
    ],
    "api": "<Stepper current total labels? variant=\"numbered|compact\" />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}