Progress

1"use client";
2
3import * as React from "react";
4import { Progress as BaseProgress } from "@base-ui/react/progress";
5import { cva, type VariantProps } from "class-variance-authority";
6
7import { cn } from "@/lib/utils";
8
9interface ProgressContextValue {
10  size?: "sm" | "md" | "lg";
11  animated?: boolean;
12  value?: number | null;
13  min?: number;
14  max?: number;
15  completed?: boolean;
16}
17
18const ProgressContext = React.createContext<ProgressContextValue>({});
19
20const progressRootVariants = cva("w-full", {
21  variants: {
22    size: {
23      sm: "space-y-1",
24      md: "space-y-1.5",
25      lg: "space-y-2",
26    },
27  },
28  defaultVariants: {
29    size: "md",
30  },
31});
32
33interface ProgressRootProps
34  extends React.ComponentProps<typeof BaseProgress.Root>,
35    VariantProps<typeof progressRootVariants> {
36  animated?: boolean;
37}
38
39function ProgressRoot({
40  className,
41  children,
42  size,
43  animated = false,
44  value,
45  min = 0,
46  max = 100,
47  ...props
48}: ProgressRootProps) {
49  const completed = value !== null && value !== undefined && value >= max;
50
51  const contextValue = React.useMemo(
52    () => ({
53      size: size ?? undefined,
54      animated,
55      value,
56      min,
57      max,
58      completed,
59    }),
60    [size, animated, value, min, max, completed],
61  );
62
63  return (
64    <ProgressContext.Provider value={contextValue}>
65      <BaseProgress.Root
66        value={value}
67        min={min}
68        max={max}
69        data-slot="progress"
70        className={cn(progressRootVariants({ size }), className)}
71        {...props}
72      >
73        {children}
74      </BaseProgress.Root>
75    </ProgressContext.Provider>
76  );
77}
78
79const progressTrackVariants = cva(
80  "relative w-full overflow-hidden rounded-full bg-primary/15 shadow-[inset_0_1px_2px_0_oklch(0.18_0_0_/_0.06)]",
81  {
82    variants: {
83      size: {
84        sm: "h-2",
85        md: "h-2.5",
86        lg: "h-3.5",
87      },
88    },
89    defaultVariants: {
90      size: "md",
91    },
92  },
93);
94
95interface ProgressTrackProps
96  extends React.ComponentProps<typeof BaseProgress.Track> {
97  striped?: boolean;
98}
99
100function ProgressTrack({
101  className,
102  children,
103  striped,
104  ...props
105}: ProgressTrackProps) {
106  const { size } = React.useContext(ProgressContext);
107
108  return (
109    <BaseProgress.Track
110      data-slot="progress-track"
111      className={cn(
112        progressTrackVariants({ size }),
113        striped &&
114// … truncated