Meter

1"use client";
2 
3import { Meter as MeterPrimitive } from "@base-ui/react/meter";
4import type * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8const Meter = ({ className, ...props }: React.ComponentProps<typeof MeterPrimitive.Root>) => (
9  <MeterPrimitive.Root
10    className={cn("flex w-full flex-col gap-2", className)}
11    data-slot="meter"
12    {...props}
13  />
14);
15 
16const MeterLabel = ({ className, ...props }: React.ComponentProps<typeof MeterPrimitive.Label>) => (
17  <MeterPrimitive.Label
18    className={cn("font-medium text-sm leading-none", className)}
19    data-slot="meter-label"
20    {...props}
21  />
22);
23 
24const MeterValue = ({ className, ...props }: React.ComponentProps<typeof MeterPrimitive.Value>) => (
25  <MeterPrimitive.Value
26    className={cn("text-muted-foreground text-sm tabular-nums", className)}
27    data-slot="meter-value"
28    {...props}
29  />
30);
31 
32const MeterTrack = ({ className, ...props }: React.ComponentProps<typeof MeterPrimitive.Track>) => (
33  <MeterPrimitive.Track
34    className={cn("h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
35    data-slot="meter-track"
36    {...props}
37  />
38);
39 
40const MeterIndicator = ({
41  className,
42  ...props
43}: React.ComponentProps<typeof MeterPrimitive.Indicator>) => (
44  <MeterPrimitive.Indicator
45    className={cn("h-full bg-primary transition-[width]", className)}
46    data-slot="meter-indicator"
47    {...props}
48  />
49);
50 
51export { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue };