"use client" import * as React from "react" import { Progress as ProgressPrimitive } from "@base-ui/react/progress" 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 Progress({ className, children, value, min = 0, max = 100, ...props }: ProgressPrimitive.Root.Props) { return ( {children} ) } function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) { return ( ) } function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) { return ( ) } function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) { return ( ) } /** * Soft-rect fill — width tweens with `fillTween` (easeOutSoft). * Indeterminate: quiet pulse via CSS, no spring. */ function ProgressIndicator({ className, render, ...props }: ProgressPrimitive.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 { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, }