{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "type": "registry:ui",
  "title": "Progress",
  "description": "A progress component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/progress/progress.tsx",
      "content": "import * as React from \"react\";\nimport { View, Animated, Easing } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ProgressProps {\n  value?: number;\n  max?: number;\n  className?: string;\n  indicatorClassName?: string;\n}\n\nconst Progress = React.forwardRef<View, ProgressProps>(\n  ({ value = 0, max = 100, className, indicatorClassName, ...props }, ref) => {\n    const animatedValue = React.useRef(new Animated.Value(0)).current;\n\n    React.useEffect(() => {\n      Animated.timing(animatedValue, {\n        toValue: value,\n        duration: 500,\n        easing: Easing.bezier(0.4, 0.0, 0.2, 1),\n        useNativeDriver: false,\n      }).start();\n    }, [value, animatedValue]);\n\n    const width = animatedValue.interpolate({\n      inputRange: [0, max],\n      outputRange: [\"0%\", \"100%\"],\n      extrapolate: \"clamp\",\n    });\n\n    return (\n      <View\n        ref={ref}\n        className={cn(\n          \"relative h-3 w-full overflow-hidden rounded-full bg-primary/20\",\n          className\n        )}\n        {...props}\n      >\n        <Animated.View\n          className={cn(\n            \"absolute left-0 top-0 h-full bg-primary\",\n            indicatorClassName\n          )}\n          style={{ width }}\n        />\n      </View>\n    );\n  }\n);\n\nProgress.displayName = \"Progress\";\n\nexport { Progress };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Progress } from \"@/components/ui/progress\";\nimport * as React from \"react\";\n\nexport default function ProgressExampleScreen() {\n\n    return (\n        <Progress value={50} className=\"w-[60%]\" />\n    );\n}\n",
  "customPreview": "import { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function ProgressExampleScreen() {\n    const [demoProgress, setDemoProgress] = React.useState(13);\n\n    const [autoCycleProgress, setAutoCycleProgress] = React.useState(0);\n\n    React.useEffect(() => {\n        const timer = setTimeout(() => setDemoProgress(66), 1500);\n        return () => clearTimeout(timer);\n    }, []);\n\n    React.useEffect(() => {\n        const timer = setInterval(() => {\n            setAutoCycleProgress((prev) => {\n                if (prev >= 100) return 0;\n                return prev + 20;\n            });\n        }, 2000);\n\n        return () => clearInterval(timer);\n    }, []);\n\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <ScrollView className=\"p-4\">\n                    <View className=\"mb-6\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Progress\n                        </Text>\n                        <Text className=\"text-base mb-6 text-muted-foreground\">\n                            Displays an indicator showing the completion progress of a task.\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Demo Example\n                        </Text>\n                        <View className=\"space-y-4\">\n                            <Text className=\"text-sm text-muted-foreground\">\n                                Changes from 13% to 66% after 1.5 seconds\n                            </Text>\n                            <Progress value={demoProgress} className=\"w-[60%]\" />\n                            <Button\n                                className=\"mt-4\"\n                                onPress={() => {\n                                    setDemoProgress(13);\n                                    setTimeout(() => setDemoProgress(66), 1500);\n                                }}\n                            >\n                                <Text className=\"text-primary-foreground\">Restart Demo</Text>\n                            </Button>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Auto-Cycling Progress\n                        </Text>\n                        <View className=\"space-y-2\">\n                            <Text className=\"text-sm text-muted-foreground\">\n                                {autoCycleProgress}%\n                            </Text>\n                            <Progress value={autoCycleProgress} />\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Basic Progress\n                        </Text>\n                        <View className=\"space-y-6\">\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">25%</Text>\n                                <Progress value={25} />\n                            </View>\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">50%</Text>\n                                <Progress value={50} />\n                            </View>\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">75%</Text>\n                                <Progress value={75} />\n                            </View>\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">100%</Text>\n                                <Progress value={100} />\n                            </View>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Different Sizes\n                        </Text>\n                        <View className=\"space-y-6\">\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">\n                                    Small (h-2)\n                                </Text>\n                                <Progress value={50} className=\"h-2\" />\n                            </View>\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">\n                                    Medium (h-3) - Default\n                                </Text>\n                                <Progress value={50} />\n                            </View>\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">\n                                    Large (h-4)\n                                </Text>\n                                <Progress value={50} className=\"h-4\" />\n                            </View>\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">\n                                    Extra Large (h-5)\n                                </Text>\n                                <Progress value={50} className=\"h-5\" />\n                            </View>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Custom Colors\n                        </Text>\n                        <View className=\"space-y-6\">\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">Success</Text>\n                                <Progress\n                                    value={75}\n                                    className=\"bg-green-200\"\n                                    indicatorClassName=\"bg-green-600\"\n                                />\n                            </View>\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">Warning</Text>\n                                <Progress\n                                    value={50}\n                                    className=\"bg-yellow-200\"\n                                    indicatorClassName=\"bg-yellow-500\"\n                                />\n                            </View>\n                            <View className=\"space-y-2\">\n                                <Text className=\"text-sm text-muted-foreground\">Error</Text>\n                                <Progress\n                                    value={25}\n                                    className=\"bg-red-200\"\n                                    indicatorClassName=\"bg-red-600\"\n                                />\n                            </View>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}