zentrixui/dist/components/file-upload/progress/progress-bar.js

ZentrixUI - A modern, highly customizable and accessible React file upload component library with multiple variants, JSON-based configuration, and excellent developer experience.

import { jsxs, jsx } from "react/jsx-runtime";
import { cn } from "../../../utils/cn.js";
const ProgressBar = ({
  progress,
  size = "md",
  variant = "default",
  showPercentage = false,
  animated = true,
  className,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedBy
}) => {
  const clampedProgress = Math.max(0, Math.min(100, progress));
  const sizeClasses = {
    sm: "h-1",
    md: "h-2",
    lg: "h-3"
  };
  const variantClasses = {
    default: "bg-blue-500",
    success: "bg-green-500",
    error: "bg-red-500",
    warning: "bg-yellow-500"
  };
  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "w-full bg-gray-200 rounded-full overflow-hidden",
          sizeClasses[size]
        ),
        role: "progressbar",
        "aria-valuenow": clampedProgress,
        "aria-valuemin": 0,
        "aria-valuemax": 100,
        "aria-label": ariaLabel || `Upload progress: ${clampedProgress}%`,
        "aria-describedby": ariaDescribedBy,
        children: /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "h-full rounded-full transition-all duration-300 ease-out",
              variantClasses[variant],
              animated && "transition-transform"
            ),
            style: { width: `${clampedProgress}%` }
          }
        )
      }
    ),
    showPercentage && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-gray-600 text-right", children: [
      Math.round(clampedProgress),
      "%"
    ] })
  ] });
};
export {
  ProgressBar
};
//# sourceMappingURL=progress-bar.js.map