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        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
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("h-full bg-primary 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        "ml-auto text-sm text-muted-foreground 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}