{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "type": "registry:ui",
  "title": "Stepper",
  "description": "Horizontal step progress indicator with check states.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/text.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "dependencies": [
    "lucide-react-native"
  ],
  "files": [
    {
      "path": "registry/shared/ui/stepper.tsx",
      "type": "registry:ui",
      "target": "components/ui/stepper.tsx",
      "content": "import { Pressable, StyleSheet, View, type ViewProps } from 'react-native';\nimport { Check } from 'lucide-react-native';\nimport { Text } from '@/components/ui/text';\nimport { cn, useIconColor, useThemeColor } from '@/lib/utils';\n\nexport interface StepperProps extends ViewProps {\n  steps: string[];\n  /** Index of the current step (0-based). Steps before it are done. */\n  current: number;\n  /** Optional callback when user taps a step indicator. */\n  onStepPress?: (index: number) => void;\n  className?: string;\n}\n\nexport function Stepper({\n  steps,\n  current,\n  onStepPress,\n  className,\n  ...props\n}: StepperProps) {\n  const checkColor = useIconColor('onPrimary');\n  const theme = useThemeColor();\n\n  return (\n    <View className={cn('w-full flex-row items-start', className)} {...props}>\n      {steps.map((label, i) => {\n        const isCompleted = i < current;\n        const isActive = i === current;\n        const isLast = i === steps.length - 1;\n        const canPress = onStepPress && (isCompleted || isActive);\n\n        const circle = (\n          <View\n            className={cn(\n              'h-8 w-8 items-center justify-center rounded-full border',\n              !isCompleted && !isActive && 'border-border bg-background'\n            )}\n            style={\n              isCompleted\n                ? {\n                    backgroundColor: theme.primary,\n                    borderColor: theme.primary,\n                    borderWidth: 1.5,\n                  }\n                : isActive\n                  ? {\n                      borderColor: theme.primary,\n                      borderWidth: 2,\n                      backgroundColor: theme.background,\n                    }\n                  : { borderWidth: 1 }\n            }\n          >\n            {isCompleted ? (\n              <Check size={14} color={checkColor} strokeWidth={3} />\n            ) : (\n              <Text\n                style={{\n                  fontSize: 12,\n                  fontWeight: isActive ? '700' : '500',\n                  color: isActive ? theme.primary : theme.mutedForeground,\n                }}\n              >\n                {i + 1}\n              </Text>\n            )}\n          </View>\n        );\n\n        return (\n          <View\n            key={label}\n            className={cn('items-center', !isLast && 'flex-1')}\n          >\n            <View className=\"flex-row items-center w-full\">\n              {canPress ? (\n                <Pressable\n                  onPress={() => onStepPress(i)}\n                  hitSlop={6}\n                  accessibilityRole=\"button\"\n                  accessibilityLabel={`Step ${i + 1}: ${label}`}\n                >\n                  {circle}\n                </Pressable>\n              ) : (\n                circle\n              )}\n\n              {!isLast && (\n                <View\n                  style={[\n                    styles.connectorLine,\n                    {\n                      backgroundColor: isCompleted\n                        ? theme.primary\n                        : theme.border,\n                    },\n                  ]}\n                />\n              )}\n            </View>\n\n            <Text\n              style={[\n                styles.stepLabel,\n                {\n                  color: isActive ? theme.foreground : theme.mutedForeground,\n                  fontWeight: isActive ? '600' : '400',\n                },\n              ]}\n              numberOfLines={1}\n            >\n              {label}\n            </Text>\n          </View>\n        );\n      })}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  connectorLine: {\n    height: 2,\n    flex: 1,\n    marginHorizontal: 4,\n    borderRadius: 1,\n  },\n  stepLabel: {\n    fontSize: 11,\n    marginTop: 6,\n    textAlign: 'center',\n    paddingHorizontal: 2,\n  },\n});\n"
    }
  ]
}