zentrixui
Version:
ZentrixUI - A modern, highly customizable and accessible React file upload component library with multiple variants, JSON-based configuration, and excellent developer experience.
94 lines (93 loc) • 4.16 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const fileUpload = require("./chunks/file-upload-tgTAdTQa.cjs");
const theme = require("./theme.cjs");
const jsxRuntime = require("react/jsx-runtime");
const OverallProgress = ({
files,
isUploading,
showDetails = true,
className,
"aria-label": ariaLabel
}) => {
const totalFiles = files.length;
const completedFiles = files.filter((f) => f.status === "success").length;
const failedFiles = files.filter((f) => f.status === "error").length;
const uploadingFiles = files.filter((f) => f.status === "uploading").length;
const totalProgress = files.reduce((sum, file) => sum + file.progress, 0);
const overallProgress = totalFiles > 0 ? totalProgress / totalFiles : 0;
if (totalFiles === 0) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
className: fileUpload.cn("space-y-2", className),
role: "region",
"aria-label": ariaLabel || "Upload progress summary",
children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
isUploading && /* @__PURE__ */ jsxRuntime.jsx(fileUpload.LoadingSpinner, { size: "sm" }),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: isUploading ? "Uploading files..." : "Upload complete" })
] }),
showDetails && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-600", children: [
completedFiles,
"/",
totalFiles,
" files"
] })
] }),
/* @__PURE__ */ jsxRuntime.jsx(
fileUpload.ProgressBar,
{
progress: overallProgress,
variant: failedFiles > 0 && !isUploading ? "error" : completedFiles === totalFiles && totalFiles > 0 ? "success" : "default",
showPercentage: showDetails,
"aria-label": `Overall upload progress: ${Math.round(overallProgress)}%`
}
),
showDetails && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between text-xs text-gray-600", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
completedFiles > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-600", children: [
"✓ ",
completedFiles,
" completed"
] }),
uploadingFiles > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-blue-600", children: [
"↑ ",
uploadingFiles,
" uploading"
] }),
failedFiles > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-red-600", children: [
"✗ ",
failedFiles,
" failed"
] })
] }) })
]
}
);
};
exports.AccessibilityAnnouncer = fileUpload.AccessibilityAnnouncer;
exports.ButtonUpload = fileUpload.ButtonUpload;
exports.DropzoneUpload = fileUpload.DropzoneUpload;
exports.ErrorBoundary = fileUpload.FileUploadErrorBoundary;
exports.ErrorDisplay = fileUpload.ErrorDisplay;
exports.ErrorFeedback = fileUpload.ErrorFeedback;
exports.FileUpload = fileUpload.FileUpload;
exports.FileUploadProvider = fileUpload.FileUploadProvider;
exports.ImageUpload = fileUpload.ImageUpload;
exports.LoadingSpinner = fileUpload.LoadingSpinner;
exports.MultiFileUpload = fileUpload.MultiFileUpload;
exports.PreviewUpload = fileUpload.PreviewUpload;
exports.ProgressBar = fileUpload.ProgressBar;
exports.StatusIndicator = fileUpload.StatusIndicator;
exports.UploadFeedback = fileUpload.UploadFeedback;
exports.useFileUpload = fileUpload.useFileUpload;
exports.withErrorBoundary = fileUpload.withErrorBoundary;
exports.ThemeProvider = theme.ThemeProvider;
exports.ThemeToggle = theme.ThemeToggle;
exports.useTheme = theme.useTheme;
exports.useThemeVariables = theme.useThemeVariables;
exports.OverallProgress = OverallProgress;
//# sourceMappingURL=components.cjs.map