Progress

1import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
2 
3import { cn } from "@/registry/lib/surface"
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        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
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("h-full bg-primary 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(
66        "ml-auto text-sm text-muted-foreground tabular-nums",
67        className
68      )}
69      data-slot="progress-value"
70      {...props}
71    />
72  )
73}
74 
75export {
76  Progress,
77  ProgressTrack,
78  ProgressIndicator,
79  ProgressLabel,
80  ProgressValue,
81}