Initial commit

docs/components/progress.md

@@ -0,0 +1,65 @@
+- Home
+- Components
+- Progress
+
+# Progress
+
+Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+
+## Props
+
+
+Prop	Type	Default	Description
+value	number	0	The progress value (0-100)
+max	number	100	The maximum value
+className	string	-	Additional CSS classes
+...progress props	ComponentProps<typeof ProgressPrimitive.Root>	-	All Radix Progress props are supported
+
+## Basic Usage
+
+```
+<div className="w-60 space-y-6">
+  <div className="flex flex-col gap-1 items-end">
+    <span className="text-uk-md text-text-secondary">0%</span>
+    <Progress value={0} />
+  </div>
+  <div className="flex flex-col gap-1 items-end">
+    <span className="text-uk-md text-text-secondary">50%</span>
+    <Progress value={50} />
+  </div>
+  <div className="flex flex-col gap-1 items-end">
+    <span className="text-uk-md text-text-secondary">100%</span>
+    <Progress value={100} />
+  </div>
+</div>
+```
+
+## Animated Progress
+
+```
+function AnimatedProgress() {
+  const [progress, setProgress] = useState(0);
+  
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) return 0;
+        return prev + 10;
+      });
+    }, 500);
+    
+    return () => clearInterval(timer);
+  }, []);
+  
+  return (
+    <div className="w-60 space-y-4">
+      <div className="flex justify-between">
+        <span className="text-sm font-medium">Animated Progress</span>
+        <span className="text-sm text-muted-foreground">{progress}%</span>
+      </div>
+      <Progress value={progress} />
+    </div>
+  );
+}
+```
+