Progress

1"use client"
2 
3import * as React from "react"
4import * as ProgressPrimitive from "@radix-ui/react-progress"
5 
6import { cn } from "@/lib/utils"
7 
8function Progress({ className, value = 0, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
9  const normalizedValue = Math.min(100, Math.max(0, value ?? 0))
10  return (
11    <ProgressPrimitive.Root
12      data-slot="progress"
13      className={cn("relative h-2.5 w-full overflow-hidden rounded-full border border-foreground/8 bg-foreground/[.07] shadow-[inset_0_1px_2px_color-mix(in_oklch,var(--foreground)_8%,transparent)]", className)}
14      {...props}
15    >
16      <ProgressPrimitive.Indicator
17        data-slot="progress-indicator"
18        className="h-full w-full origin-left rounded-full bg-gradient-to-r from-primary via-primary to-[oklch(.7_.2_285)] shadow-[0_0_20px_-5px_var(--primary)] transition-transform duration-700 ease-[cubic-bezier(.16,1,.3,1)] motion-reduce:transition-none"
19        style={{ transform: `translateX(-${100 - normalizedValue}%)` }}
20      />
21    </ProgressPrimitive.Root>
22  )
23}
24 
25export { Progress }