@geekapps/silo-elements-nextjs 0.2.64 → 0.2.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/FileUploader.js +81 -105
- package/dist/FileUploader.js.map +1 -1
- package/dist/ImageUploader.js +18 -30
- package/dist/ImageUploader.js.map +1 -1
- package/dist/MediaUploader.js +81 -105
- package/dist/MediaUploader.js.map +1 -1
- package/dist/VideoUploader.js +23 -34
- package/dist/VideoUploader.js.map +1 -1
- package/dist/components/DropZone.js +9 -7
- package/dist/components/DropZone.js.map +1 -1
- package/dist/components/ProgressBar.js +3 -4
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/index.js +81 -105
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
package/dist/index.js
CHANGED
|
@@ -91,18 +91,20 @@ function DropZone({
|
|
|
91
91
|
);
|
|
92
92
|
const rootStyle = {
|
|
93
93
|
...vars,
|
|
94
|
+
border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
|
|
95
|
+
borderRadius: "var(--silo-radius)",
|
|
96
|
+
background: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
|
|
97
|
+
color: "var(--silo-text)",
|
|
98
|
+
cursor: disabled ? "not-allowed" : "pointer",
|
|
99
|
+
opacity: disabled ? 0.5 : 1,
|
|
100
|
+
outline: "none",
|
|
101
|
+
transition: "border-color 150ms, background 150ms",
|
|
94
102
|
...style
|
|
95
103
|
};
|
|
96
|
-
const cls = [
|
|
97
|
-
"silo-border-2 silo-border-dashed silo-border-slate-200 silo-rounded-xl silo-bg-slate-50 silo-text-slate-900 silo-cursor-pointer silo-outline-none silo-transition-colors silo-duration-150",
|
|
98
|
-
dragging ? "silo-border-indigo-500 silo-bg-slate-100" : "hover:silo-border-indigo-500 hover:silo-bg-slate-100",
|
|
99
|
-
disabled ? "silo-opacity-50 silo-cursor-not-allowed" : "",
|
|
100
|
-
className
|
|
101
|
-
].filter(Boolean).join(" ");
|
|
102
104
|
return /* @__PURE__ */ jsxs(
|
|
103
105
|
"div",
|
|
104
106
|
{
|
|
105
|
-
className
|
|
107
|
+
className,
|
|
106
108
|
style: rootStyle,
|
|
107
109
|
onDragOver: (e) => {
|
|
108
110
|
e.preventDefault();
|
|
@@ -139,8 +141,8 @@ function ProgressBar({ progress, className = "", style }) {
|
|
|
139
141
|
return /* @__PURE__ */ jsx(
|
|
140
142
|
"div",
|
|
141
143
|
{
|
|
142
|
-
className
|
|
143
|
-
style,
|
|
144
|
+
className,
|
|
145
|
+
style: { height: 4, borderRadius: 9999, background: "var(--silo-border, #e2e8f0)", overflow: "hidden", ...style },
|
|
144
146
|
role: "progressbar",
|
|
145
147
|
"aria-valuenow": progress,
|
|
146
148
|
"aria-valuemin": 0,
|
|
@@ -148,8 +150,7 @@ function ProgressBar({ progress, className = "", style }) {
|
|
|
148
150
|
children: /* @__PURE__ */ jsx(
|
|
149
151
|
"div",
|
|
150
152
|
{
|
|
151
|
-
|
|
152
|
-
style: { width: `${progress}%` }
|
|
153
|
+
style: { height: "100%", borderRadius: 9999, background: "var(--silo-accent, #6366f1)", width: `${progress}%`, transition: "width 200ms linear" }
|
|
153
154
|
}
|
|
154
155
|
)
|
|
155
156
|
}
|
|
@@ -166,36 +167,23 @@ function ImageOptions({ value, onChange, style }) {
|
|
|
166
167
|
const optimize = value.optimize ?? true;
|
|
167
168
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", style, children: [
|
|
168
169
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
169
|
-
/* @__PURE__ */ jsx("div", {
|
|
170
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "rgba(255,255,255,0.4)" }, children: "Formato de sa\xEDda" }),
|
|
170
171
|
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
|
|
171
172
|
"button",
|
|
172
173
|
{
|
|
173
174
|
type: "button",
|
|
174
175
|
onClick: () => onChange({ ...value, format: f.value }),
|
|
175
176
|
title: f.hint,
|
|
176
|
-
|
|
177
|
+
style: fmt === f.value ? { border: "1px solid #6366f1", background: "#6366f1", color: "#fff", padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" } : { border: "1px solid rgba(255,255,255,0.2)", background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.8)", padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" },
|
|
177
178
|
children: f.label
|
|
178
179
|
},
|
|
179
180
|
f.value
|
|
180
181
|
)) })
|
|
181
182
|
] }),
|
|
182
|
-
/* @__PURE__ */ jsxs("
|
|
183
|
-
/* @__PURE__ */ jsx(
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
onClick: () => onChange({ ...value, optimize: !optimize }),
|
|
187
|
-
className: `relative w-9 h-5 rounded-full shrink-0 cursor-pointer transition-colors duration-150${optimize ? "bg-indigo-500" : "bg-slate-200"}`,
|
|
188
|
-
children: /* @__PURE__ */ jsx(
|
|
189
|
-
"span",
|
|
190
|
-
{
|
|
191
|
-
className: "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-[left] duration-150",
|
|
192
|
-
style: { left: optimize ? "18px" : "2px" }
|
|
193
|
-
}
|
|
194
|
-
)
|
|
195
|
-
}
|
|
196
|
-
),
|
|
197
|
-
/* @__PURE__ */ jsx("span", { className: "text-xs text-slate-900 font-medium", children: "Otimizar tamanho" }),
|
|
198
|
-
/* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
|
|
183
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, onClick: () => onChange({ ...value, optimize: !optimize }), children: [
|
|
184
|
+
/* @__PURE__ */ jsx("span", { style: { position: "relative", display: "inline-block", width: 36, height: 20, borderRadius: 10, flexShrink: 0, cursor: "pointer", background: optimize ? "#6366f1" : "rgba(255,255,255,0.15)", transition: "background 150ms" }, children: /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 2, left: optimize ? 18 : 2, width: 16, height: 16, borderRadius: "50%", background: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,.3)", transition: "left 150ms" } }) }),
|
|
185
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, color: "rgba(255,255,255,0.85)" }, children: "Otimizar tamanho" }),
|
|
186
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(255,255,255,0.45)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
|
|
199
187
|
] })
|
|
200
188
|
] });
|
|
201
189
|
}
|
|
@@ -423,25 +411,13 @@ var RESOLUTION_LABELS = {
|
|
|
423
411
|
"1440": "1440p",
|
|
424
412
|
"2160": "4K"
|
|
425
413
|
};
|
|
426
|
-
function
|
|
427
|
-
return
|
|
414
|
+
function optBtnStyle(active) {
|
|
415
|
+
return active ? { border: "1px solid #6366f1", background: "#6366f1", color: "#fff", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer", minWidth: 36 } : { border: "1px solid rgba(255,255,255,0.2)", background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.8)", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer", minWidth: 36 };
|
|
428
416
|
}
|
|
429
417
|
function Toggle({ checked, onToggle, label }) {
|
|
430
|
-
return /* @__PURE__ */ jsxs("
|
|
431
|
-
/* @__PURE__ */ jsx(
|
|
432
|
-
|
|
433
|
-
{
|
|
434
|
-
className: `relative inline-block w-8 h-[18px] rounded-full shrink-0 cursor-pointer transition-colors duration-150${checked ? "bg-indigo-500" : "bg-slate-200"}`,
|
|
435
|
-
children: /* @__PURE__ */ jsx(
|
|
436
|
-
"span",
|
|
437
|
-
{
|
|
438
|
-
className: "absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-[left] duration-150",
|
|
439
|
-
style: { left: checked ? "16px" : "2px" }
|
|
440
|
-
}
|
|
441
|
-
)
|
|
442
|
-
}
|
|
443
|
-
),
|
|
444
|
-
label
|
|
418
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, onClick: onToggle, children: [
|
|
419
|
+
/* @__PURE__ */ jsx("span", { style: { position: "relative", display: "inline-block", width: 32, height: 18, borderRadius: 9, flexShrink: 0, cursor: "pointer", background: checked ? "#6366f1" : "rgba(255,255,255,0.15)", transition: "background 150ms" }, children: /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 2, left: checked ? 16 : 2, width: 14, height: 14, borderRadius: "50%", background: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,.3)", transition: "left 150ms" } }) }),
|
|
420
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, color: "rgba(255,255,255,0.85)" }, children: label })
|
|
445
421
|
] });
|
|
446
422
|
}
|
|
447
423
|
function VideoOptions({ value, onChange, style }) {
|
|
@@ -462,29 +438,29 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
462
438
|
}
|
|
463
439
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
|
|
464
440
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
465
|
-
/* @__PURE__ */ jsx("div", {
|
|
441
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "rgba(255,255,255,0.4)" }, children: "Codec" }),
|
|
466
442
|
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
|
|
467
443
|
"button",
|
|
468
444
|
{
|
|
469
445
|
type: "button",
|
|
470
446
|
title: c.hint,
|
|
471
447
|
onClick: () => onChange({ ...value, codec: c.value }),
|
|
472
|
-
|
|
448
|
+
style: optBtnStyle(codec === c.value),
|
|
473
449
|
children: c.label
|
|
474
450
|
},
|
|
475
451
|
c.value
|
|
476
452
|
)) })
|
|
477
453
|
] }),
|
|
478
454
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
479
|
-
/* @__PURE__ */ jsx("div", {
|
|
455
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "rgba(255,255,255,0.4)" }, children: "Resolu\xE7\xF5es" }),
|
|
480
456
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
|
|
481
|
-
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }),
|
|
457
|
+
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: optBtnStyle(isAuto), children: "Auto" }),
|
|
482
458
|
RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
|
|
483
459
|
"button",
|
|
484
460
|
{
|
|
485
461
|
type: "button",
|
|
486
462
|
onClick: () => toggleRes(r),
|
|
487
|
-
|
|
463
|
+
style: optBtnStyle(!isAuto && selectedRes.includes(r)),
|
|
488
464
|
children: RESOLUTION_LABELS[r]
|
|
489
465
|
},
|
|
490
466
|
r
|
|
@@ -492,7 +468,7 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
492
468
|
] })
|
|
493
469
|
] }),
|
|
494
470
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
495
|
-
/* @__PURE__ */ jsx("div", {
|
|
471
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8, color: "var(--silo-text-muted)" }, children: "Recursos" }),
|
|
496
472
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
497
473
|
/* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
|
|
498
474
|
/* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
|
|
@@ -876,9 +852,9 @@ function FileUploader({
|
|
|
876
852
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
877
853
|
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "text-slate-400 opacity-50", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
|
|
878
854
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
879
|
-
/* @__PURE__ */ jsx("span", {
|
|
880
|
-
/* @__PURE__ */ jsx("span", {
|
|
881
|
-
maxSize && /* @__PURE__ */ jsxs("span", {
|
|
855
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text)", fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
|
|
856
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted)", fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
|
|
857
|
+
maxSize && /* @__PURE__ */ jsxs("span", { style: { color: "var(--silo-text-muted)", fontSize: 12 }, children: [
|
|
882
858
|
"Tamanho m\xE1ximo: ",
|
|
883
859
|
formatBytes(maxSize)
|
|
884
860
|
] })
|
|
@@ -887,10 +863,10 @@ function FileUploader({
|
|
|
887
863
|
}
|
|
888
864
|
),
|
|
889
865
|
staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
890
|
-
/* @__PURE__ */ jsx("div", {
|
|
891
|
-
staged.map((f, i) => /* @__PURE__ */ jsxs("div", {
|
|
892
|
-
/* @__PURE__ */ jsx("span", {
|
|
893
|
-
/* @__PURE__ */ jsxs("div", {
|
|
866
|
+
/* @__PURE__ */ jsx("div", { style: { color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
|
|
867
|
+
staged.map((f, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", background: "var(--silo-bg)", borderRadius: "var(--silo-radius)", border: "1px solid var(--silo-border)" }, children: [
|
|
868
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
|
|
869
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
894
870
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
895
871
|
"input",
|
|
896
872
|
{
|
|
@@ -908,28 +884,28 @@ function FileUploader({
|
|
|
908
884
|
}
|
|
909
885
|
if (e.key === "Escape") setEditingIndex(null);
|
|
910
886
|
},
|
|
911
|
-
|
|
887
|
+
style: { width: "100%", fontSize: 13, fontWeight: 500, border: "1px solid var(--silo-accent)", borderRadius: 6, padding: "2px 8px", outline: "none", background: "var(--silo-bg)", color: "var(--silo-text)" }
|
|
912
888
|
}
|
|
913
889
|
) : /* @__PURE__ */ jsxs(
|
|
914
890
|
"div",
|
|
915
891
|
{
|
|
916
|
-
|
|
892
|
+
style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
|
|
917
893
|
onClick: () => allowRename && setEditingIndex(i),
|
|
918
894
|
title: allowRename ? "Clique para renomear" : void 0,
|
|
919
895
|
children: [
|
|
920
896
|
effectiveName(i, staged),
|
|
921
|
-
renames.has(i) && /* @__PURE__ */ jsx("span", {
|
|
897
|
+
renames.has(i) && /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-accent)", marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
|
|
922
898
|
]
|
|
923
899
|
}
|
|
924
900
|
),
|
|
925
|
-
/* @__PURE__ */ jsx("div", {
|
|
901
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(f.size) })
|
|
926
902
|
] }),
|
|
927
903
|
allowRename && /* @__PURE__ */ jsx(
|
|
928
904
|
"button",
|
|
929
905
|
{
|
|
930
906
|
onClick: () => setEditingIndex(i),
|
|
931
907
|
title: "Renomear",
|
|
932
|
-
|
|
908
|
+
style: { color: "var(--silo-text-muted)", background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
|
|
933
909
|
children: "\u270F\uFE0F"
|
|
934
910
|
}
|
|
935
911
|
),
|
|
@@ -941,42 +917,42 @@ function FileUploader({
|
|
|
941
917
|
if (next.length === 0) clearStaging();
|
|
942
918
|
else setStaged(next);
|
|
943
919
|
},
|
|
944
|
-
|
|
920
|
+
style: { color: "var(--silo-text-muted)", background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
|
|
945
921
|
children: "\xD7"
|
|
946
922
|
}
|
|
947
923
|
)
|
|
948
924
|
] }, i)),
|
|
949
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", {
|
|
950
|
-
/* @__PURE__ */ jsx("div", {
|
|
951
|
-
/* @__PURE__ */ jsx(
|
|
925
|
+
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { border: "1px solid var(--silo-border)", borderRadius: "var(--silo-radius)", overflow: "hidden" }, children: [
|
|
926
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
|
|
927
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "12px 14px", background: "var(--silo-bg)" }, children: /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts }) })
|
|
952
928
|
] }),
|
|
953
|
-
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", {
|
|
954
|
-
/* @__PURE__ */ jsx("div", {
|
|
955
|
-
/* @__PURE__ */ jsx(
|
|
929
|
+
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { border: "1px solid var(--silo-border)", borderRadius: "var(--silo-radius)", overflow: "hidden" }, children: [
|
|
930
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
|
|
931
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "12px 14px", background: "var(--silo-bg)" }, children: /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts }) })
|
|
956
932
|
] }),
|
|
957
933
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
|
|
958
934
|
/* @__PURE__ */ jsx(
|
|
959
935
|
"button",
|
|
960
936
|
{
|
|
961
|
-
className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
|
|
962
937
|
onClick: clearStaging,
|
|
938
|
+
style: { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, fontSize: 14, fontWeight: 700, padding: "10px 16px", borderRadius: "var(--silo-radius)", border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text)", cursor: "pointer" },
|
|
963
939
|
children: "Cancelar"
|
|
964
940
|
}
|
|
965
941
|
),
|
|
966
942
|
/* @__PURE__ */ jsx(
|
|
967
943
|
"button",
|
|
968
944
|
{
|
|
969
|
-
className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-indigo-500 text-white cursor-pointer transition-opacity hover:opacity-90",
|
|
970
945
|
onClick: handleConfirmUpload,
|
|
946
|
+
style: { flex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, fontSize: 14, fontWeight: 700, padding: "10px 16px", borderRadius: "var(--silo-radius)", border: "none", background: "var(--silo-accent)", color: "#fff", cursor: "pointer" },
|
|
971
947
|
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
972
948
|
}
|
|
973
949
|
)
|
|
974
950
|
] })
|
|
975
951
|
] }),
|
|
976
|
-
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", {
|
|
977
|
-
/* @__PURE__ */ jsxs("div", {
|
|
978
|
-
/* @__PURE__ */ jsx("span", {
|
|
979
|
-
/* @__PURE__ */ jsxs("span", {
|
|
952
|
+
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "12px 16px", background: "var(--silo-bg)", borderRadius: "var(--silo-radius)", border: "1px solid var(--silo-border)" }, children: [
|
|
953
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
954
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
|
|
955
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent)" }, children: [
|
|
980
956
|
singleProgress,
|
|
981
957
|
"%"
|
|
982
958
|
] })
|
|
@@ -990,17 +966,17 @@ function FileUploader({
|
|
|
990
966
|
const isPaused = st.status === "paused";
|
|
991
967
|
const isDone = st.status === "done";
|
|
992
968
|
const isErr = st.status === "error";
|
|
993
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
994
|
-
/* @__PURE__ */ jsxs("div", {
|
|
995
|
-
/* @__PURE__ */ jsx("span", {
|
|
996
|
-
/* @__PURE__ */ jsxs("div", {
|
|
997
|
-
/* @__PURE__ */ jsx("div", {
|
|
998
|
-
/* @__PURE__ */ jsx("div", {
|
|
969
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: 8, padding: "12px 14px", background: "var(--silo-bg)", borderRadius: "var(--silo-radius)", border: "1px solid var(--silo-border)" }, children: [
|
|
970
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
971
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
|
|
972
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
973
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
|
|
974
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
|
|
999
975
|
] }),
|
|
1000
|
-
isDone && /* @__PURE__ */ jsx("span", {
|
|
1001
|
-
isErr && /* @__PURE__ */ jsx("span", {
|
|
1002
|
-
!isDone && !isErr && /* @__PURE__ */ jsx("span", {
|
|
1003
|
-
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", {
|
|
976
|
+
isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
|
|
977
|
+
isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, color: "var(--silo-error)", flexShrink: 0 }, children: "Erro no envio" }),
|
|
978
|
+
!isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, flexShrink: 0, color: isPaused ? "var(--silo-text-muted)" : "var(--silo-accent)" }, children: isPaused ? "Pausado" : `${p}%` }),
|
|
979
|
+
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { style: { fontSize: 11, fontWeight: 600, padding: "2px 10px", borderRadius: 6, border: "none", background: "#22c55e", color: "#fff", cursor: "pointer" }, onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { style: { fontSize: 11, fontWeight: 600, padding: "2px 10px", borderRadius: 6, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text)", cursor: "pointer" }, onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
|
|
1004
980
|
] }),
|
|
1005
981
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
1006
982
|
] }, i);
|
|
@@ -1009,51 +985,51 @@ function FileUploader({
|
|
|
1009
985
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
1010
986
|
"button",
|
|
1011
987
|
{
|
|
1012
|
-
className: `flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent text-white cursor-pointer hover:opacity-90${isBatchUploading ? "bg-amber-500" : "bg-emerald-500"}`,
|
|
1013
988
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
989
|
+
style: { flex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, fontSize: 14, fontWeight: 700, padding: "10px 16px", borderRadius: "var(--silo-radius)", border: "none", background: isBatchUploading ? "#f59e0b" : "#22c55e", color: "#fff", cursor: "pointer" },
|
|
1014
990
|
children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
|
|
1015
991
|
}
|
|
1016
992
|
),
|
|
1017
993
|
/* @__PURE__ */ jsx(
|
|
1018
994
|
"button",
|
|
1019
995
|
{
|
|
1020
|
-
className: `inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent text-white cursor-pointer hover:opacity-90${batch.state.status === "done" ? "bg-indigo-500" : "bg-red-500/90"}`,
|
|
1021
996
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
997
|
+
style: { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, fontSize: 14, fontWeight: 700, padding: "10px 16px", borderRadius: "var(--silo-radius)", border: "none", background: batch.state.status === "done" ? "var(--silo-accent)" : "#ef4444cc", color: "#fff", cursor: "pointer" },
|
|
1022
998
|
children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
|
|
1023
999
|
}
|
|
1024
1000
|
)
|
|
1025
1001
|
] }),
|
|
1026
|
-
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", {
|
|
1027
|
-
/* @__PURE__ */ jsx("span", {
|
|
1028
|
-
/* @__PURE__ */ jsx("span", {
|
|
1002
|
+
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", background: "rgba(34,197,94,0.08)", borderRadius: "var(--silo-radius)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
|
|
1003
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
|
|
1004
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600, color: "#16a34a" }, children: batch.state.files.length === 1 ? "Arquivo enviado com sucesso!" : `${batch.state.files.length} arquivos enviados com sucesso!` })
|
|
1029
1005
|
] })
|
|
1030
1006
|
] }),
|
|
1031
|
-
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", {
|
|
1032
|
-
/* @__PURE__ */ jsx("span", {
|
|
1033
|
-
/* @__PURE__ */ jsxs("div", {
|
|
1034
|
-
/* @__PURE__ */ jsx("div", {
|
|
1035
|
-
/* @__PURE__ */ jsx("div", {
|
|
1007
|
+
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", background: "rgba(34,197,94,0.08)", borderRadius: "var(--silo-radius)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
|
|
1008
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
1009
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1010
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
|
|
1011
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
|
|
1036
1012
|
] }),
|
|
1037
1013
|
/* @__PURE__ */ jsx(
|
|
1038
1014
|
"button",
|
|
1039
1015
|
{
|
|
1040
|
-
className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-green-500/30 text-green-700 bg-transparent cursor-pointer hover:bg-green-500/10 shrink-0",
|
|
1041
1016
|
onClick: single.reset,
|
|
1017
|
+
style: { display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600, padding: "4px 10px", borderRadius: 6, border: "1px solid rgba(34,197,94,0.3)", color: "#16a34a", background: "transparent", cursor: "pointer", flexShrink: 0 },
|
|
1042
1018
|
children: "Enviar outro"
|
|
1043
1019
|
}
|
|
1044
1020
|
)
|
|
1045
1021
|
] }),
|
|
1046
|
-
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", {
|
|
1047
|
-
/* @__PURE__ */ jsx("span", {
|
|
1048
|
-
/* @__PURE__ */ jsxs("div", {
|
|
1049
|
-
/* @__PURE__ */ jsx("div", {
|
|
1050
|
-
/* @__PURE__ */ jsx("div", {
|
|
1022
|
+
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", background: "rgba(239,68,68,0.07)", borderRadius: "var(--silo-radius)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
|
|
1023
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
1024
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1025
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "var(--silo-error)" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
|
|
1026
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
|
|
1051
1027
|
] }),
|
|
1052
1028
|
/* @__PURE__ */ jsx(
|
|
1053
1029
|
"button",
|
|
1054
1030
|
{
|
|
1055
|
-
className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-red-500/30 text-red-500 bg-transparent cursor-pointer hover:bg-red-500/10 shrink-0",
|
|
1056
1031
|
onClick: single.reset,
|
|
1032
|
+
style: { display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600, padding: "4px 10px", borderRadius: 6, border: "1px solid rgba(239,68,68,0.3)", color: "var(--silo-error)", background: "transparent", cursor: "pointer", flexShrink: 0 },
|
|
1057
1033
|
children: "Tentar novamente"
|
|
1058
1034
|
}
|
|
1059
1035
|
)
|