progress

1"use client"
2 
3import * as React from "react"
4import { Progress as ProgressPrimitive } from "radix-ui"
5 
6import { cn } from "@/registry/bases/radix/lib/utils"
7 
8function Progress({
9  className,
10  value,
11  ...props
12}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
13  return (
14    <ProgressPrimitive.Root
15      data-slot="progress"
16      className={cn(
17        "bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden",
18        className
19      )}
20      {...props}
21    >
22      <ProgressPrimitive.Indicator
23        data-slot="progress-indicator"
24        className="bg-primary size-full flex-1 transition-all"
25        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
26      />
27    </ProgressPrimitive.Root>
28  )
29}
30 
31export { Progress }