Progress

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