Progress

1"use client";
2 
3import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6 
7export type ProgressVariant = "default" | "success" | "warning" | "error";
8export type ProgressSize = "sm" | "md" | "lg";
9 
10export interface ProgressProps
11  extends Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, "value"> {
12  /** Current value (0-max). Pass null for indeterminate. */
13  value?: number | null;
14  /** Maximum value. Default 100. */
15  max?: number;
16  /** Intent variant. */
17  variant?: ProgressVariant;
18  /** Height preset: `sm` (4px), `md` (6px), or `lg` (10px). */
19  size?: ProgressSize;
20  /** Accessible label for the progress bar. */
21  label?: string;
22}
23 
24const fillByVariant: Record<ProgressVariant, string> = {
25  default: "bg-primary",
26  success: "bg-success",
27  warning: "bg-warning",
28  error: "bg-error",
29};
30 
31const heightBySize: Record<ProgressSize, string> = {
32  sm: "[--progress-height:0.25rem]",
33  md: "[--progress-height:0.375rem]",
34  lg: "[--progress-height:0.625rem]",
35};
36 
37export function Progress({
38  value = 0,
39  max = 100,
40  variant = "default",
41  size = "md",
42  label = "Progress",
43  className,
44  style,
45  ...props
46}: ProgressProps): React.ReactElement {
47  return (
48    <ProgressPrimitive.Root
49      value={value}
50      max={max}
51      aria-label={label}
52      data-slot="progress"
53      className={cn("w-full", heightBySize[size], className)}
54      style={style}
55      {...props}
56    >
57      <ProgressPrimitive.Track
58        data-slot="progress-track"
59        className={cn(
60          "relative h-[var(--progress-height)] w-full overflow-hidden rounded-full bg-fill-2",
61        )}
62      >
63        <ProgressPrimitive.Indicator
64          data-slot="progress-indicator"
65          className={cn(
66            "block h-full rounded-full",
67            "transition-[width] duration-[var(--duration-overlay)] ease-[var(--ease-standard)]",
68            "data-[indeterminate]:absolute data-[indeterminate]:inset-y-0 data-[indeterminate]:w-1/3",
69            "data-[indeterminate]:animate-[patch-progress-indeterminate_1.4s_ease-in-out_infinite]",
70            "motion-reduce:data-[indeterminate]:animate-none",
71            fillByVariant[variant],
72          )}
73        />
74      </ProgressPrimitive.Track>
75    </ProgressPrimitive.Root>
76  );
77}
78 
79export { ProgressPrimitive };