progress

1"use client"
2 
3import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
4import { cva, type VariantProps } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7 
8const progressVariants = cva("group/progress flex flex-wrap gap-3", {
9  variants: {
10    variant: {
11      default: "text-primary",
12      info: "text-info",
13      success: "text-success",
14      warning: "text-warning",
15      destructive: "text-destructive",
16    },
17  },
18  defaultVariants: {
19    variant: "default",
20  },
21})
22 
23function Progress({
24  className,
25  variant = "default",
26  children,
27  value,
28  ...props
29}: ProgressPrimitive.Root.Props & VariantProps<typeof progressVariants>) {
30  return (
31    <ProgressPrimitive.Root
32      value={value}
33      data-slot="progress"
34      data-variant={variant}
35      className={cn(progressVariants({ variant, className }))}
36      {...props}
37    >
38      {children}
39      <ProgressTrack>
40        <ProgressIndicator />
41      </ProgressTrack>
42    </ProgressPrimitive.Root>
43  )
44}
45 
46function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
47  return (
48    <ProgressPrimitive.Track
49      className={cn(
50        "relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted",
51        className
52      )}
53      data-slot="progress-track"
54      {...props}
55    />
56  )
57}
58 
59function ProgressIndicator({
60  className,
61  ...props
62}: ProgressPrimitive.Indicator.Props) {
63  return (
64    <ProgressPrimitive.Indicator
65      data-slot="progress-indicator"
66      className={cn("h-full bg-current transition-all", className)}
67      {...props}
68    />
69  )
70}
71 
72function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
73  return (
74    <ProgressPrimitive.Label
75      className={cn("text-sm font-medium text-foreground", className)}
76      data-slot="progress-label"
77      {...props}
78    />
79  )
80}
81 
82function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
83  return (
84    <ProgressPrimitive.Value
85      className={cn(
86        "ml-auto text-sm text-muted-foreground tabular-nums",
87        className
88      )}
89      data-slot="progress-value"
90      {...props}
91    />
92  )
93}
94 
95export {
96  Progress,
97  ProgressTrack,
98  ProgressIndicator,
99  ProgressLabel,
100  ProgressValue,
101  progressVariants,
102}