Progress

1"use client";
2
3import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
4
5import { cn } from "@/lib/utils";
6
7function Progress({
8  className,
9  children,
10  value,
11  ...props
12}: ProgressPrimitive.Root.Props) {
13  return (
14    <ProgressPrimitive.Root
15      value={value}
16      data-slot="progress"
17      className={cn("flex flex-wrap gap-3", className)}
18      {...props}
19    >
20      {children}
21      <ProgressTrack>
22        <ProgressIndicator />
23      </ProgressTrack>
24    </ProgressPrimitive.Root>
25  );
26}
27
28function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
29  return (
30    <ProgressPrimitive.Track
31      className={cn(
32        "bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-lg",
33        className
34      )}
35      data-slot="progress-track"
36      {...props}
37    />
38  );
39}
40
41function ProgressIndicator({
42  className,
43  ...props
44}: ProgressPrimitive.Indicator.Props) {
45  return (
46    <ProgressPrimitive.Indicator
47      data-slot="progress-indicator"
48      className={cn("bg-primary h-full transition-all", className)}
49      {...props}
50    />
51  );
52}
53
54function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
55  return (
56    <ProgressPrimitive.Label
57      className={cn("text-sm font-medium", className)}
58      data-slot="progress-label"
59      {...props}
60    />
61  );
62}
63
64function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
65  return (
66    <ProgressPrimitive.Value
67      className={cn(
68        "text-muted-foreground ml-auto text-sm tabular-nums",
69        className
70      )}
71      data-slot="progress-value"
72      {...props}
73    />
74  );
75}
76
77export {
78  Progress,
79  ProgressTrack,
80  ProgressIndicator,
81  ProgressLabel,
82  ProgressValue
83};