"use client" import * as React from "react" import { Meter as MeterPrimitive } from "@base-ui/react/meter" import { motion, useReducedMotion } from "motion/react" import { fillTween } from "@/lib/motion" import { cn } from "@/lib/utils" function withoutDomAnimationHandlers>( props: T ) { const { onAnimationStart: _onAnimationStart, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...rest } = props return rest } function Meter({ className, children, ...props }: MeterPrimitive.Root.Props) { return ( {children} ) } function MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) { return ( ) } function MeterValue({ className, ...props }: MeterPrimitive.Value.Props) { return ( ) } function MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) { return ( ) } /** * Soft-rect meter fill — value width tweens with `fillTween`. * Read-only gauge (not task progress); no spring bounce. */ function MeterIndicator({ className, render, ...props }: MeterPrimitive.Indicator.Props) { const reduce = useReducedMotion() return ( { const width = (htmlProps.style as React.CSSProperties | undefined) ?.width if (reduce || typeof width !== "string") { return

} return ( )} initial={false} animate={{ width }} transition={fillTween} /> ) }) } {...props} /> ) } export { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue }