Progress

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