progress-ring

1"use client"
2 
3import * as React from "react"
4import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
5import { cva, type VariantProps } from "class-variance-authority"
6 
7import { cn } from "@/lib/utils"
8 
9const progressRingVariants = cva(
10  "group/progress-ring flex w-fit flex-col items-center gap-1.5 text-center transition-[--progress-ring-fraction] duration-500 ease-out",
11  {
12    variants: {
13      size: {
14        sm: "text-xs [--progress-ring-size:--spacing(14)] [--progress-ring-thickness:--spacing(1.5)]",
15        default:
16          "text-sm [--progress-ring-size:--spacing(20)] [--progress-ring-thickness:--spacing(2)]",
17        lg: "text-base [--progress-ring-size:--spacing(28)] [--progress-ring-thickness:--spacing(2.5)]",
18      },
19      variant: {
20        default: "text-primary",
21        info: "text-info",
22        success: "text-success",
23        warning: "text-warning",
24        destructive: "text-destructive",
25      },
26    },
27    defaultVariants: {
28      size: "default",
29      variant: "default",
30    },
31  }
32)
33 
34function ProgressRingProperty() {
35  return (
36    <style href="ondo-ui-progress-ring-fraction" precedence="default">
37      {
38        "@property --progress-ring-fraction{syntax:'<number>';inherits:true;initial-value:0}"
39      }
40    </style>
41  )
42}
43 
44function ProgressRing({
45  className,
46  size = "default",
47  variant = "default",
48  value,
49  min = 0,
50  max = 100,
51  formatValue,
52  children,
53  ...props
54}: ProgressPrimitive.Root.Props &
55  VariantProps<typeof progressRingVariants> & {
56    formatValue?: (
57      formattedValue: string | null,
58      value: number | null
59    ) => React.ReactNode
60  }) {
61  const span = max - min || 1
62  const fraction =
63    value == null ? 0 : Math.min(1, Math.max(0, (value - min) / span))
64 
65  return (
66    <ProgressPrimitive.Root
67      value={value}
68      min={min}
69      max={max}
70      data-slot="progress-ring"
71      data-size={size}
72      data-variant={variant}
73      className={cn(progressRingVariants({ size, variant, className }))}
74      style={{ "--progress-ring-fraction": fraction } as React.CSSProperties}
75      {...props}
76    >
77      <ProgressRingProperty />
78      <ProgressRingDial>
79        <ProgressRingValue>{formatValue}</ProgressRingValue>
80      </ProgressRingDial>
81      {children}
82    </ProgressPrimitive.Root>
83  )
84}
85 
86function ProgressRingDial({
87  className,
88  children,
89  ...props
90}: React.ComponentProps<"div">) {
91  return (
92    <div
93      data-slot="progress-ring-dial"
94      className={cn(
95// … truncated