meter

1import * as React from "react"
2import { Meter as BaseMeter } from "@base-ui/react/meter"
3 
4import { cn } from "@/lib/utils"
5 
6function Meter({
7	className,
8	children,
9	...props
10}: React.ComponentProps<typeof BaseMeter.Root>) {
11	return (
12		<BaseMeter.Root
13			data-slot="meter"
14			className={cn("w-full space-y-1.5", className)}
15			{...props}
16		>
17			{children}
18			<BaseMeter.Track
19				data-slot="meter-track"
20				className={cn(
21					"bg-primary/20 h-2 w-full overflow-hidden rounded-xs",
22					className
23				)}
24				{...props}
25			>
26				<BaseMeter.Indicator
27					data-slot="meter-indicator"
28					className="bg-primary"
29				/>
30			</BaseMeter.Track>
31		</BaseMeter.Root>
32	)
33}
34 
35function MeterLabel({
36	className,
37	...props
38}: React.ComponentProps<typeof BaseMeter.Label>) {
39	return (
40		<BaseMeter.Label
41			data-slot="meter-label"
42			className={cn("text-sm font-medium", className)}
43			{...props}
44		/>
45	)
46}
47 
48function MeterValue({
49	className,
50	...props
51}: React.ComponentProps<typeof BaseMeter.Value>) {
52	return (
53		<BaseMeter.Value
54			data-slot="meter-value"
55			className={cn("text-sm", className)}
56			{...props}
57		/>
58	)
59}
60 
61export { Meter, MeterLabel, MeterValue }