progress

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