meter-ring

1"use client"
2 
3import * as React from "react"
4import { Meter as MeterPrimitive } from "@base-ui/react/meter"
5import { cva, type VariantProps } from "class-variance-authority"
6 
7import { cn } from "@/lib/utils"
8 
9const meterRingVariants = cva(
10  "group/meter-ring flex w-fit flex-col items-center gap-1.5 text-center transition-[--meter-ring-fraction] duration-500 ease-out",
11  {
12    variants: {
13      size: {
14        sm: "text-xs [--meter-ring-size:--spacing(14)] [--meter-ring-thickness:--spacing(1.5)]",
15        default:
16          "text-sm [--meter-ring-size:--spacing(20)] [--meter-ring-thickness:--spacing(2)]",
17        lg: "text-base [--meter-ring-size:--spacing(28)] [--meter-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 MeterRingProperty() {
35  return (
36    <style href="ondo-ui-meter-ring-fraction" precedence="default">
37      {
38        "@property --meter-ring-fraction{syntax:'<number>';inherits:true;initial-value:0}"
39      }
40    </style>
41  )
42}
43 
44function MeterRing({
45  className,
46  size = "default",
47  variant = "default",
48  value,
49  min = 0,
50  max = 100,
51  formatValue,
52  children,
53  ...props
54}: MeterPrimitive.Root.Props &
55  VariantProps<typeof meterRingVariants> & {
56    formatValue?: (formattedValue: string, value: number) => React.ReactNode
57  }) {
58  const span = max - min || 1
59  const fraction = Math.min(1, Math.max(0, (value - min) / span))
60 
61  return (
62    <MeterPrimitive.Root
63      value={value}
64      min={min}
65      max={max}
66      data-slot="meter-ring"
67      data-size={size}
68      data-variant={variant}
69      className={cn(meterRingVariants({ size, variant, className }))}
70      style={{ "--meter-ring-fraction": fraction } as React.CSSProperties}
71      {...props}
72    >
73      <MeterRingProperty />
74      <MeterRingDial>
75        <MeterRingValue>{formatValue}</MeterRingValue>
76      </MeterRingDial>
77      {children}
78    </MeterPrimitive.Root>
79  )
80}
81 
82function MeterRingDial({
83  className,
84  children,
85  ...props
86}: React.ComponentProps<"div">) {
87  return (
88    <div
89      data-slot="meter-ring-dial"
90      className={cn(
91        "grid size-(--meter-ring-size) shrink-0 place-items-center *:col-start-1 *:row-start-1",
92        className
93      )}
94      {...props}
95    >
96// … truncated