progress

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./progress.css"
6 
7const progressItemVariants = cva(
8  "progress-item-base flex-[1_0_0] min-w-0",
9  {
10    variants: {
11      size: {
12        sm: "h-1.5",
13        md: "h-2",
14      },
15      position: {
16        left: "",
17        middle: "",
18        right: "",
19      },
20    },
21    compoundVariants: [
22      { size: "sm", position: "left", className: "rounded-l-[var(--layout-radius-xs)]" },
23      { size: "sm", position: "right", className: "rounded-r-[var(--layout-radius-xs)]" },
24      { size: "md", position: "left", className: "rounded-l-[var(--layout-radius-sm)]" },
25      { size: "md", position: "right", className: "rounded-r-[var(--layout-radius-sm)]" },
26    ],
27    defaultVariants: {
28      size: "md",
29      position: "middle",
30    },
31  }
32)
33 
34function ProgressItem({
35  className,
36  size,
37  position,
38  active = false,
39  ...props
40}: Omit<React.ComponentProps<"div">, "active"> &
41  VariantProps<typeof progressItemVariants> & {
42    active?: boolean
43  }) {
44  return (
45    <div
46      data-slot="progress-item"
47      className={cn(
48        progressItemVariants({ size, position, className }),
49        active ? "progress-item-active" : "progress-item-inactive"
50      )}
51      {...props}
52    />
53  )
54}
55 
56const progressIndicatorVariants = cva(
57  "flex w-full",
58  {
59    variants: {
60      labelPosition: {
61        none: "items-center",
62        right: "items-center gap-[var(--layout-gap-lg)]",
63        bottom: "flex-col items-end gap-[var(--layout-gap-md)]",
64      },
65    },
66    defaultVariants: {
67      labelPosition: "none",
68    },
69  }
70)
71 
72function ProgressIndicator({
73  className,
74  value = 0,
75  steps = 5,
76  size = "md",
77  labelPosition = "none",
78  label = "Progress",
79  ...props
80}: Omit<React.ComponentProps<"div">, "value"> &
81  VariantProps<typeof progressIndicatorVariants> & {
82    value?: number
83    steps?: number
84    size?: "sm" | "md"
85    label?: string
86  }) {
87  const clampedValue = Math.max(0, Math.min(100, value))
88  const safeSteps = Math.max(1, steps)
89  const activeSteps = Math.round((clampedValue / 100) * safeSteps)
90 
91  const getPosition = (index: number): "left" | "middle" | "right" => {
92    if (activeSteps === 0 || activeSteps === safeSteps) return "middle"
93    if (index === activeSteps - 1) return "right"
94    if (index === activeSteps) return "left"
95    return "middle"
96  }
97 
98  return (
99    <div
100      data-slot="progress-indicator"
101// … truncated