Progress

1"use client";
2 
3import * as React from "react";
4import * as ProgressPrimitive from "@radix-ui/react-progress";
5import { cva, type VariantProps } from "class-variance-authority";
6 
7import { cn } from "@/lib/utils";
8 
9const progressVariants = cva("relative h-1 w-full overflow-hidden rounded-[2px] bg-secondary", {
10  variants: {
11    size: {
12      xs: "h-0.5",
13      sm: "h-1",
14      md: "h-1.5",
15      lg: "h-2",
16    },
17  },
18  defaultVariants: {
19    size: "sm",
20  },
21});
22 
23const indicatorVariants = cva("h-full transition-[width,background] duration-300 ease-out", {
24  variants: {
25    tone: {
26      primary: "bg-primary",
27      success: "bg-success",
28      warning: "bg-warning",
29      danger: "bg-danger",
30      info: "bg-info",
31      gold: "bg-gold",
32      neutral: "bg-foreground/70",
33    },
34  },
35  defaultVariants: {
36    tone: "primary",
37  },
38});
39 
40export interface ProgressProps
41  extends
42    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
43    VariantProps<typeof progressVariants>,
44    VariantProps<typeof indicatorVariants> {
45  value?: number;
46}
47 
48const Progress = React.memo(
49  React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(
50    ({ className, value = 0, tone, size, ...props }, ref) => (
51      <ProgressPrimitive.Root
52        ref={ref}
53        className={cn(progressVariants({ size }), className)}
54        {...props}
55      >
56        <ProgressPrimitive.Indicator
57          className={cn(indicatorVariants({ tone }))}
58          style={{ width: `${Math.max(0, Math.min(100, value))}%` }}
59        />
60      </ProgressPrimitive.Root>
61    ),
62  ),
63);
64Progress.displayName = "Progress";
65 
66export { Progress, progressVariants };