meter

1"use client"
2 
3import { Meter as MeterPrimitive } from "@base-ui/react/meter"
4import { cva, type VariantProps } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7 
8const meterVariants = cva("group/meter 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 Meter({
24  className,
25  variant = "default",
26  children,
27  value,
28  ...props
29}: MeterPrimitive.Root.Props & VariantProps<typeof meterVariants>) {
30  return (
31    <MeterPrimitive.Root
32      value={value}
33      data-slot="meter"
34      data-variant={variant}
35      className={cn(meterVariants({ variant, className }))}
36      {...props}
37    >
38      {children}
39      <MeterTrack>
40        <MeterIndicator />
41      </MeterTrack>
42    </MeterPrimitive.Root>
43  )
44}
45 
46function MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {
47  return (
48    <MeterPrimitive.Track
49      data-slot="meter-track"
50      className={cn(
51        "relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted",
52        className
53      )}
54      {...props}
55    />
56  )
57}
58 
59function MeterIndicator({
60  className,
61  ...props
62}: MeterPrimitive.Indicator.Props) {
63  return (
64    <MeterPrimitive.Indicator
65      data-slot="meter-indicator"
66      className={cn("h-full bg-current transition-all", className)}
67      {...props}
68    />
69  )
70}
71 
72function MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {
73  return (
74    <MeterPrimitive.Label
75      data-slot="meter-label"
76      className={cn("text-sm font-medium text-foreground", className)}
77      {...props}
78    />
79  )
80}
81 
82function MeterValue({ className, ...props }: MeterPrimitive.Value.Props) {
83  return (
84    <MeterPrimitive.Value
85      data-slot="meter-value"
86      className={cn(
87        "ml-auto text-sm text-muted-foreground tabular-nums",
88        className
89      )}
90      {...props}
91    />
92  )
93}
94 
95export {
96  Meter,
97  MeterTrack,
98  MeterIndicator,
99  MeterLabel,
100  MeterValue,
101  meterVariants,
102}