"use client";
import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import { motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

type Color = "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger" | "info";
const fill: Record<Color, string> = {
  primary: "bg-primary",
  secondary: "bg-secondary",
  tertiary: "bg-tertiary",
  accent: "bg-accent",
  success: "bg-success",
  warning: "bg-warning",
  danger: "bg-danger",
  info: "bg-info",
};

export function Progress({
  className,
  value,
  color = "primary",
  ...p
}: Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, "color"> & { color?: Color }) {
  const v = Math.max(0, Math.min(100, value ?? 0));
  return (
    <ProgressPrimitive.Root
      value={value}
      className={cn("relative h-4 w-full overflow-hidden rounded-full bg-surface-sunken p-[3px] shadow-well", className)}
      {...p}
    >
      <ProgressPrimitive.Indicator asChild>
        <motion.div
          className={cn(
            "h-full rounded-full shadow-[inset_-2px_-2px_0_var(--clay-lo),inset_2px_2px_0_var(--clay-hi)]",
            fill[color]
          )}
          initial={false}
          animate={{ width: `${v}%` }}
          transition={springs.gentle}
        />
      </ProgressPrimitive.Indicator>
    </ProgressPrimitive.Root>
  );
}
Installation
