SnowLuma v2.4.2 source snapshot

packages/webui/src/components/ui/progress.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    indicatorClassName?: string;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+    ({ className, value = 0, indicatorClassName, ...props }, ref) => {
+        const clamped = Math.max(0, Math.min(100, value));
+        return (
+            <div
+                ref={ref}
+                role="progressbar"
+                aria-valuenow={clamped}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                className={cn(
+                    'relative h-2 w-full overflow-hidden rounded-full bg-muted',
+                    className,
+                )}
+                {...props}
+            >
+                <div
+                    className={cn(
+                        'h-full rounded-full bg-primary transition-[width] duration-500 ease-out',
+                        indicatorClassName,
+                    )}
+                    style={{ width: `${clamped}%` }}
+                />
+            </div>
+        );
+    },
+);
+Progress.displayName = 'Progress';
+
+export { Progress };