Meter

1"use client";
2
3import * as React from "react";
4import { Meter as BaseMeter } from "@base-ui/react/meter";
5import { cva, type VariantProps } from "class-variance-authority";
6
7import { cn } from "@/lib/utils";
8
9const meterRootVariants = cva("max-w-[300px] w-full flex flex-col", {
10  variants: {
11    size: {
12      sm: "gap-2",
13      md: "gap-2",
14      lg: "gap-2",
15    },
16  },
17  defaultVariants: {
18    size: "md",
19  },
20});
21
22interface MeterRootProps
23  extends React.ComponentProps<typeof BaseMeter.Root>,
24    VariantProps<typeof meterRootVariants> {
25  animated?: boolean;
26  low?: number;
27  high?: number;
28  optimumMin?: number;
29  optimumMax?: number;
30  showOptimumMarkers?: boolean;
31  showThresholdColors?: boolean;
32}
33
34function MeterRoot({
35  className,
36  children,
37  size = "md",
38  animated = false,
39  value = 0,
40  min = 0,
41  max = 100,
42  low,
43  high,
44  optimumMin,
45  optimumMax,
46  showOptimumMarkers = true,
47  showThresholdColors = true,
48  ...props
49}: MeterRootProps) {
50  const optimumStyles =
51    optimumMin !== undefined && optimumMax !== undefined
52      ? {
53          "--meter-optimum-min-percent": `${((optimumMin - min) / (max - min)) * 100}%`,
54          "--meter-optimum-max-percent": `${((optimumMax - min) / (max - min)) * 100}%`,
55          "--meter-optimum-width-percent": `${((optimumMax - optimumMin) / (max - min)) * 100}%`,
56        }
57      : {};
58
59  // Status from thresholds, most-specific config first:
60  const getStatus = () => {
61    // Range (optimumMin + optimumMax): in-range is optimal, low/high mark danger
62    if (optimumMin !== undefined && optimumMax !== undefined) {
63      if (low !== undefined && value < low) return "danger";
64      if (high !== undefined && value > high) return "danger";
65      if (value >= optimumMin && value <= optimumMax) return "optimal";
66      return "suboptimal";
67    }
68
69    // Directional three-tier, higher is better (e.g. battery: low=15, optimumMin=75)
70    if (optimumMin !== undefined && low !== undefined) {
71      if (value < low) return "danger";
72      if (value >= optimumMin) return "optimal";
73      return "suboptimal";
74    }
75
76    // Directional three-tier, lower is better (e.g. temp: optimumMax=60, high=80)
77    if (optimumMax !== undefined && high !== undefined) {
78      if (value > high) return "danger";
79      if (value <= optimumMax) return "optimal";
80      return "suboptimal";
81    }
82
83    // Two-tier: low only (higher is better)
84// … truncated