| 1 | import { Progress as Primitive } from "radix-ui"; |
| 2 | import type { ComponentProps } from "react"; |
| 3 | |
| 4 | import { cn } from "../../lib/cn"; |
| 5 | |
| 6 | // shadcn/ui's progress, styled with g1t's tokens: how far along something |
| 7 | // is, as a bar in `line` filled to `value` percent. The fill is the accent |
| 8 | // unless a `tone` class such as `bg-success` is passed in `indicatorClassName`. |
| 9 | |
| 10 | export function Progress({ |
| 11 | className, |
| 12 | indicatorClassName, |
| 13 | value, |
| 14 | ...props |
| 15 | }: ComponentProps<typeof Primitive.Root> & { indicatorClassName?: string }) { |
| 16 | return ( |
| 17 | <Primitive.Root |
| 18 | data-slot="progress" |
| 19 | value={value} |
| 20 | className={cn("relative block h-2 w-full overflow-hidden rounded-full bg-line", className)} |
| 21 | {...props} |
| 22 | > |
| 23 | <Primitive.Indicator |
| 24 | data-slot="progress-indicator" |
| 25 | className={cn("block h-full rounded-full bg-accent transition-[width]", indicatorClassName)} |
| 26 | style={{ width: `${Math.max(0, Math.min(100, value ?? 0))}%` }} |
| 27 | /> |
| 28 | </Primitive.Root> |
| 29 | ); |
| 30 | } |