progress

1import * as React from "react"
2import { Progress as BaseProgress } from "@base-ui/react/progress"
3 
4import { cn } from "@/lib/utils"
5 
6function Progress({
7	className,
8	children,
9	...props
10}: React.ComponentProps<typeof BaseProgress.Root>) {
11	return (
12		<BaseProgress.Root data-slot="progress" className="relative" {...props}>
13			<BaseProgress.Track
14				data-slot="progress-track"
15				className={cn(
16					"bg-primary/20 block h-2 w-full overflow-hidden rounded-full",
17					className
18				)}
19			>
20				<BaseProgress.Indicator
21					data-slot="progress-indicator"
22					className="bg-primary block h-full w-full transition-all"
23				/>
24			</BaseProgress.Track>
25			{children}
26		</BaseProgress.Root>
27	)
28}
29 
30function ProgressValue({
31	className,
32	...props
33}: React.ComponentProps<typeof BaseProgress.Value>) {
34	return (
35		<BaseProgress.Value
36			data-slot="progress-value"
37			className={cn(
38				"text-foreground mt-2 flex justify-end text-sm font-medium",
39				className
40			)}
41			{...props}
42		/>
43	)
44}
45 
46export { Progress, ProgressValue }