Add Progress component to registry

app/(site)/docs/components/progress/page.tsx

@@ -0,0 +1,89 @@
+import { ComponentPreview } from "@/components/docs/component-preview";
+
+export default function ProgressPage() {
+  return (
+    <ComponentPreview
+      name="Progress"
+      description="A progress component for React Native applications."
+      examples={[
+  {
+    "title": "Default",
+    "value": "default",
+    "content": "import { Progress } from \"@nativeui/ui\";\n\nexport default function ProgressDemo() {\n  return (\n    <Progress>\n      Click me\n    </Progress>\n  );\n}",
+    "language": "tsx"
+  }
+]}
+      componentCode={`import * as React from "react";
+import { View, Animated, Easing } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface ProgressProps {
+  value?: number;
+  max?: number;
+  className?: string;
+  indicatorClassName?: string;
+}
+
+const Progress = React.forwardRef<View, ProgressProps>(
+  ({ value = 0, max = 100, className, indicatorClassName, ...props }, ref) => {
+    const animatedValue = React.useRef(new Animated.Value(0)).current;
+
+    React.useEffect(() => {
+      Animated.timing(animatedValue, {
+        toValue: value,
+        duration: 500,
+        easing: Easing.bezier(0.4, 0.0, 0.2, 1),
+        useNativeDriver: false,
+      }).start();
+    }, [value, animatedValue]);
+
+    const width = animatedValue.interpolate({
+      inputRange: [0, max],
+      outputRange: ["0%", "100%"],
+      extrapolate: "clamp",
+    });
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          "relative h-3 w-full overflow-hidden rounded-full bg-primary/20",
+          className
+        )}
+        {...props}
+      >
+        <Animated.View
+          className={cn(
+            "absolute left-0 top-0 h-full bg-primary",
+            indicatorClassName
+          )}
+          style={{ width }}
+        />
+      </View>
+    );
+  }
+);
+
+Progress.displayName = "Progress";
+
+export { Progress };
+`}
+      previewCode={`import { Progress } from "@nativeui/ui";
+
+export default function ProgressDemo() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Progress>Default Progress</Progress>
+      <Progress variant="destructive">Delete</Progress>
+      <Progress variant="outline">Outline</Progress>
+      <Progress variant="secondary">Secondary</Progress>
+      <Progress variant="ghost">Ghost</Progress>
+      <Progress variant="link">Link</Progress>
+    </div>
+  );
+}`}
+      registryName="progress"
+      packageName="@nativeui/ui"
+    />
+  );
+}

public/r/progress.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress",
+  "type": "registry:component",
+  "title": "Progress",
+  "description": "A progress component for React Native applications.",
+  "dependencies": [
+    "react-native"
+  ],
+  "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:component"
+    }
+  ]
+}

registry.json

@@ -301,6 +301,20 @@
       ],
       "dependencies": ["react-native"],
       "registryDependencies": []
+    },
+    {
+      "name": "progress",
+      "type": "registry:component",
+      "title": "Progress",
+      "description": "A progress component for React Native applications.",
+      "files": [
+        {
+          "path": "registry/progress/progress.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "dependencies": ["react-native"],
+      "registryDependencies": []
     }
   ]
 }

registry/progress/progress.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { View, Animated, Easing } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface ProgressProps {
+  value?: number;
+  max?: number;
+  className?: string;
+  indicatorClassName?: string;
+}
+
+const Progress = React.forwardRef<View, ProgressProps>(
+  ({ value = 0, max = 100, className, indicatorClassName, ...props }, ref) => {
+    const animatedValue = React.useRef(new Animated.Value(0)).current;
+
+    React.useEffect(() => {
+      Animated.timing(animatedValue, {
+        toValue: value,
+        duration: 500,
+        easing: Easing.bezier(0.4, 0.0, 0.2, 1),
+        useNativeDriver: false,
+      }).start();
+    }, [value, animatedValue]);
+
+    const width = animatedValue.interpolate({
+      inputRange: [0, max],
+      outputRange: ["0%", "100%"],
+      extrapolate: "clamp",
+    });
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          "relative h-3 w-full overflow-hidden rounded-full bg-primary/20",
+          className
+        )}
+        {...props}
+      >
+        <Animated.View
+          className={cn(
+            "absolute left-0 top-0 h-full bg-primary",
+            indicatorClassName
+          )}
+          style={{ width }}
+        />
+      </View>
+    );
+  }
+);
+
+Progress.displayName = "Progress";
+
+export { Progress };