@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/MediaUploader.js
CHANGED
|
@@ -86,18 +86,20 @@ function DropZone({
|
|
|
86
86
|
);
|
|
87
87
|
const rootStyle = {
|
|
88
88
|
...vars,
|
|
89
|
+
border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
|
|
90
|
+
borderRadius: "var(--silo-radius)",
|
|
91
|
+
background: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
|
|
92
|
+
color: "var(--silo-text)",
|
|
93
|
+
cursor: disabled ? "not-allowed" : "pointer",
|
|
94
|
+
opacity: disabled ? 0.5 : 1,
|
|
95
|
+
outline: "none",
|
|
96
|
+
transition: "border-color 150ms, background 150ms",
|
|
89
97
|
...style
|
|
90
98
|
};
|
|
91
|
-
const cls = [
|
|
92
|
-
"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",
|
|
93
|
-
dragging ? "silo-border-indigo-500 silo-bg-slate-100" : "hover:silo-border-indigo-500 hover:silo-bg-slate-100",
|
|
94
|
-
disabled ? "silo-opacity-50 silo-cursor-not-allowed" : "",
|
|
95
|
-
className
|
|
96
|
-
].filter(Boolean).join(" ");
|
|
97
99
|
return /* @__PURE__ */ jsxs(
|
|
98
100
|
"div",
|
|
99
101
|
{
|
|
100
|
-
className
|
|
102
|
+
className,
|
|
101
103
|
style: rootStyle,
|
|
102
104
|
onDragOver: (e) => {
|
|
103
105
|
e.preventDefault();
|
|
@@ -134,8 +136,8 @@ function ProgressBar({ progress, className = "", style }) {
|
|
|
134
136
|
return /* @__PURE__ */ jsx(
|
|
135
137
|
"div",
|
|
136
138
|
{
|
|
137
|
-
className
|
|
138
|
-
style,
|
|
139
|
+
className,
|
|
140
|
+
style: { height: 4, borderRadius: 9999, background: "var(--silo-border, #e2e8f0)", overflow: "hidden", ...style },
|
|
139
141
|
role: "progressbar",
|
|
140
142
|
"aria-valuenow": progress,
|
|
141
143
|
"aria-valuemin": 0,
|
|
@@ -143,8 +145,7 @@ function ProgressBar({ progress, className = "", style }) {
|
|
|
143
145
|
children: /* @__PURE__ */ jsx(
|
|
144
146
|
"div",
|
|
145
147
|
{
|
|
146
|
-
|
|
147
|
-
style: { width: `${progress}%` }
|
|
148
|
+
style: { height: "100%", borderRadius: 9999, background: "var(--silo-accent, #6366f1)", width: `${progress}%`, transition: "width 200ms linear" }
|
|
148
149
|
}
|
|
149
150
|
)
|
|
150
151
|
}
|
|
@@ -161,36 +162,23 @@ function ImageOptions({ value, onChange, style }) {
|
|
|
161
162
|
const optimize = value.optimize ?? true;
|
|
162
163
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", style, children: [
|
|
163
164
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
164
|
-
/* @__PURE__ */ jsx("div", {
|
|
165
|
+
/* @__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" }),
|
|
165
166
|
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
|
|
166
167
|
"button",
|
|
167
168
|
{
|
|
168
169
|
type: "button",
|
|
169
170
|
onClick: () => onChange({ ...value, format: f.value }),
|
|
170
171
|
title: f.hint,
|
|
171
|
-
|
|
172
|
+
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" },
|
|
172
173
|
children: f.label
|
|
173
174
|
},
|
|
174
175
|
f.value
|
|
175
176
|
)) })
|
|
176
177
|
] }),
|
|
177
|
-
/* @__PURE__ */ jsxs("
|
|
178
|
-
/* @__PURE__ */ jsx(
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
onClick: () => onChange({ ...value, optimize: !optimize }),
|
|
182
|
-
className: `relative w-9 h-5 rounded-full shrink-0 cursor-pointer transition-colors duration-150${optimize ? "bg-indigo-500" : "bg-slate-200"}`,
|
|
183
|
-
children: /* @__PURE__ */ jsx(
|
|
184
|
-
"span",
|
|
185
|
-
{
|
|
186
|
-
className: "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-[left] duration-150",
|
|
187
|
-
style: { left: optimize ? "18px" : "2px" }
|
|
188
|
-
}
|
|
189
|
-
)
|
|
190
|
-
}
|
|
191
|
-
),
|
|
192
|
-
/* @__PURE__ */ jsx("span", { className: "text-xs text-slate-900 font-medium", children: "Otimizar tamanho" }),
|
|
193
|
-
/* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
|
|
178
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, onClick: () => onChange({ ...value, optimize: !optimize }), children: [
|
|
179
|
+
/* @__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" } }) }),
|
|
180
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, color: "rgba(255,255,255,0.85)" }, children: "Otimizar tamanho" }),
|
|
181
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(255,255,255,0.45)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
|
|
194
182
|
] })
|
|
195
183
|
] });
|
|
196
184
|
}
|
|
@@ -418,25 +406,13 @@ var RESOLUTION_LABELS = {
|
|
|
418
406
|
"1440": "1440p",
|
|
419
407
|
"2160": "4K"
|
|
420
408
|
};
|
|
421
|
-
function
|
|
422
|
-
return
|
|
409
|
+
function optBtnStyle(active) {
|
|
410
|
+
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 };
|
|
423
411
|
}
|
|
424
412
|
function Toggle({ checked, onToggle, label }) {
|
|
425
|
-
return /* @__PURE__ */ jsxs("
|
|
426
|
-
/* @__PURE__ */ jsx(
|
|
427
|
-
|
|
428
|
-
{
|
|
429
|
-
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"}`,
|
|
430
|
-
children: /* @__PURE__ */ jsx(
|
|
431
|
-
"span",
|
|
432
|
-
{
|
|
433
|
-
className: "absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-[left] duration-150",
|
|
434
|
-
style: { left: checked ? "16px" : "2px" }
|
|
435
|
-
}
|
|
436
|
-
)
|
|
437
|
-
}
|
|
438
|
-
),
|
|
439
|
-
label
|
|
413
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, onClick: onToggle, children: [
|
|
414
|
+
/* @__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" } }) }),
|
|
415
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, color: "rgba(255,255,255,0.85)" }, children: label })
|
|
440
416
|
] });
|
|
441
417
|
}
|
|
442
418
|
function VideoOptions({ value, onChange, style }) {
|
|
@@ -457,29 +433,29 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
457
433
|
}
|
|
458
434
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
|
|
459
435
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
460
|
-
/* @__PURE__ */ jsx("div", {
|
|
436
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "rgba(255,255,255,0.4)" }, children: "Codec" }),
|
|
461
437
|
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
|
|
462
438
|
"button",
|
|
463
439
|
{
|
|
464
440
|
type: "button",
|
|
465
441
|
title: c.hint,
|
|
466
442
|
onClick: () => onChange({ ...value, codec: c.value }),
|
|
467
|
-
|
|
443
|
+
style: optBtnStyle(codec === c.value),
|
|
468
444
|
children: c.label
|
|
469
445
|
},
|
|
470
446
|
c.value
|
|
471
447
|
)) })
|
|
472
448
|
] }),
|
|
473
449
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
474
|
-
/* @__PURE__ */ jsx("div", {
|
|
450
|
+
/* @__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" }),
|
|
475
451
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
|
|
476
|
-
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }),
|
|
452
|
+
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: optBtnStyle(isAuto), children: "Auto" }),
|
|
477
453
|
RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
|
|
478
454
|
"button",
|
|
479
455
|
{
|
|
480
456
|
type: "button",
|
|
481
457
|
onClick: () => toggleRes(r),
|
|
482
|
-
|
|
458
|
+
style: optBtnStyle(!isAuto && selectedRes.includes(r)),
|
|
483
459
|
children: RESOLUTION_LABELS[r]
|
|
484
460
|
},
|
|
485
461
|
r
|
|
@@ -487,7 +463,7 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
487
463
|
] })
|
|
488
464
|
] }),
|
|
489
465
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
490
|
-
/* @__PURE__ */ jsx("div", {
|
|
466
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8, color: "var(--silo-text-muted)" }, children: "Recursos" }),
|
|
491
467
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
492
468
|
/* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
|
|
493
469
|
/* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
|
|
@@ -871,9 +847,9 @@ function FileUploader({
|
|
|
871
847
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
872
848
|
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" }) }),
|
|
873
849
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
874
|
-
/* @__PURE__ */ jsx("span", {
|
|
875
|
-
/* @__PURE__ */ jsx("span", {
|
|
876
|
-
maxSize && /* @__PURE__ */ jsxs("span", {
|
|
850
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text)", fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
|
|
851
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted)", fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
|
|
852
|
+
maxSize && /* @__PURE__ */ jsxs("span", { style: { color: "var(--silo-text-muted)", fontSize: 12 }, children: [
|
|
877
853
|
"Tamanho m\xE1ximo: ",
|
|
878
854
|
formatBytes(maxSize)
|
|
879
855
|
] })
|
|
@@ -882,10 +858,10 @@ function FileUploader({
|
|
|
882
858
|
}
|
|
883
859
|
),
|
|
884
860
|
staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
885
|
-
/* @__PURE__ */ jsx("div", {
|
|
886
|
-
staged.map((f, i) => /* @__PURE__ */ jsxs("div", {
|
|
887
|
-
/* @__PURE__ */ jsx("span", {
|
|
888
|
-
/* @__PURE__ */ jsxs("div", {
|
|
861
|
+
/* @__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` }),
|
|
862
|
+
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: [
|
|
863
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
|
|
864
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
889
865
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
890
866
|
"input",
|
|
891
867
|
{
|
|
@@ -903,28 +879,28 @@ function FileUploader({
|
|
|
903
879
|
}
|
|
904
880
|
if (e.key === "Escape") setEditingIndex(null);
|
|
905
881
|
},
|
|
906
|
-
|
|
882
|
+
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)" }
|
|
907
883
|
}
|
|
908
884
|
) : /* @__PURE__ */ jsxs(
|
|
909
885
|
"div",
|
|
910
886
|
{
|
|
911
|
-
|
|
887
|
+
style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
|
|
912
888
|
onClick: () => allowRename && setEditingIndex(i),
|
|
913
889
|
title: allowRename ? "Clique para renomear" : void 0,
|
|
914
890
|
children: [
|
|
915
891
|
effectiveName(i, staged),
|
|
916
|
-
renames.has(i) && /* @__PURE__ */ jsx("span", {
|
|
892
|
+
renames.has(i) && /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-accent)", marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
|
|
917
893
|
]
|
|
918
894
|
}
|
|
919
895
|
),
|
|
920
|
-
/* @__PURE__ */ jsx("div", {
|
|
896
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(f.size) })
|
|
921
897
|
] }),
|
|
922
898
|
allowRename && /* @__PURE__ */ jsx(
|
|
923
899
|
"button",
|
|
924
900
|
{
|
|
925
901
|
onClick: () => setEditingIndex(i),
|
|
926
902
|
title: "Renomear",
|
|
927
|
-
|
|
903
|
+
style: { color: "var(--silo-text-muted)", background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
|
|
928
904
|
children: "\u270F\uFE0F"
|
|
929
905
|
}
|
|
930
906
|
),
|
|
@@ -936,42 +912,42 @@ function FileUploader({
|
|
|
936
912
|
if (next.length === 0) clearStaging();
|
|
937
913
|
else setStaged(next);
|
|
938
914
|
},
|
|
939
|
-
|
|
915
|
+
style: { color: "var(--silo-text-muted)", background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
|
|
940
916
|
children: "\xD7"
|
|
941
917
|
}
|
|
942
918
|
)
|
|
943
919
|
] }, i)),
|
|
944
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", {
|
|
945
|
-
/* @__PURE__ */ jsx("div", {
|
|
946
|
-
/* @__PURE__ */ jsx(
|
|
920
|
+
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: [
|
|
921
|
+
/* @__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" }),
|
|
922
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "12px 14px", background: "var(--silo-bg)" }, children: /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts }) })
|
|
947
923
|
] }),
|
|
948
|
-
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", {
|
|
949
|
-
/* @__PURE__ */ jsx("div", {
|
|
950
|
-
/* @__PURE__ */ jsx(
|
|
924
|
+
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: [
|
|
925
|
+
/* @__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" }),
|
|
926
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "12px 14px", background: "var(--silo-bg)" }, children: /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts }) })
|
|
951
927
|
] }),
|
|
952
928
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
|
|
953
929
|
/* @__PURE__ */ jsx(
|
|
954
930
|
"button",
|
|
955
931
|
{
|
|
956
|
-
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",
|
|
957
932
|
onClick: clearStaging,
|
|
933
|
+
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" },
|
|
958
934
|
children: "Cancelar"
|
|
959
935
|
}
|
|
960
936
|
),
|
|
961
937
|
/* @__PURE__ */ jsx(
|
|
962
938
|
"button",
|
|
963
939
|
{
|
|
964
|
-
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",
|
|
965
940
|
onClick: handleConfirmUpload,
|
|
941
|
+
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" },
|
|
966
942
|
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
967
943
|
}
|
|
968
944
|
)
|
|
969
945
|
] })
|
|
970
946
|
] }),
|
|
971
|
-
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", {
|
|
972
|
-
/* @__PURE__ */ jsxs("div", {
|
|
973
|
-
/* @__PURE__ */ jsx("span", {
|
|
974
|
-
/* @__PURE__ */ jsxs("span", {
|
|
947
|
+
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: [
|
|
948
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
949
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
|
|
950
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent)" }, children: [
|
|
975
951
|
singleProgress,
|
|
976
952
|
"%"
|
|
977
953
|
] })
|
|
@@ -985,17 +961,17 @@ function FileUploader({
|
|
|
985
961
|
const isPaused = st.status === "paused";
|
|
986
962
|
const isDone = st.status === "done";
|
|
987
963
|
const isErr = st.status === "error";
|
|
988
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
989
|
-
/* @__PURE__ */ jsxs("div", {
|
|
990
|
-
/* @__PURE__ */ jsx("span", {
|
|
991
|
-
/* @__PURE__ */ jsxs("div", {
|
|
992
|
-
/* @__PURE__ */ jsx("div", {
|
|
993
|
-
/* @__PURE__ */ jsx("div", {
|
|
964
|
+
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: [
|
|
965
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
966
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
|
|
967
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
968
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
|
|
969
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
|
|
994
970
|
] }),
|
|
995
|
-
isDone && /* @__PURE__ */ jsx("span", {
|
|
996
|
-
isErr && /* @__PURE__ */ jsx("span", {
|
|
997
|
-
!isDone && !isErr && /* @__PURE__ */ jsx("span", {
|
|
998
|
-
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", {
|
|
971
|
+
isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
|
|
972
|
+
isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, color: "var(--silo-error)", flexShrink: 0 }, children: "Erro no envio" }),
|
|
973
|
+
!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}%` }),
|
|
974
|
+
!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)
|
|
999
975
|
] }),
|
|
1000
976
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
1001
977
|
] }, i);
|
|
@@ -1004,51 +980,51 @@ function FileUploader({
|
|
|
1004
980
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
1005
981
|
"button",
|
|
1006
982
|
{
|
|
1007
|
-
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"}`,
|
|
1008
983
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
984
|
+
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" },
|
|
1009
985
|
children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
|
|
1010
986
|
}
|
|
1011
987
|
),
|
|
1012
988
|
/* @__PURE__ */ jsx(
|
|
1013
989
|
"button",
|
|
1014
990
|
{
|
|
1015
|
-
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"}`,
|
|
1016
991
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
992
|
+
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" },
|
|
1017
993
|
children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
|
|
1018
994
|
}
|
|
1019
995
|
)
|
|
1020
996
|
] }),
|
|
1021
|
-
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", {
|
|
1022
|
-
/* @__PURE__ */ jsx("span", {
|
|
1023
|
-
/* @__PURE__ */ jsx("span", {
|
|
997
|
+
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: [
|
|
998
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
|
|
999
|
+
/* @__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!` })
|
|
1024
1000
|
] })
|
|
1025
1001
|
] }),
|
|
1026
|
-
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", {
|
|
1027
|
-
/* @__PURE__ */ jsx("span", {
|
|
1028
|
-
/* @__PURE__ */ jsxs("div", {
|
|
1029
|
-
/* @__PURE__ */ jsx("div", {
|
|
1030
|
-
/* @__PURE__ */ jsx("div", {
|
|
1002
|
+
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: [
|
|
1003
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
1004
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1005
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
|
|
1006
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
|
|
1031
1007
|
] }),
|
|
1032
1008
|
/* @__PURE__ */ jsx(
|
|
1033
1009
|
"button",
|
|
1034
1010
|
{
|
|
1035
|
-
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",
|
|
1036
1011
|
onClick: single.reset,
|
|
1012
|
+
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 },
|
|
1037
1013
|
children: "Enviar outro"
|
|
1038
1014
|
}
|
|
1039
1015
|
)
|
|
1040
1016
|
] }),
|
|
1041
|
-
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", {
|
|
1042
|
-
/* @__PURE__ */ jsx("span", {
|
|
1043
|
-
/* @__PURE__ */ jsxs("div", {
|
|
1044
|
-
/* @__PURE__ */ jsx("div", {
|
|
1045
|
-
/* @__PURE__ */ jsx("div", {
|
|
1017
|
+
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: [
|
|
1018
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
1019
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1020
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "var(--silo-error)" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
|
|
1021
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
|
|
1046
1022
|
] }),
|
|
1047
1023
|
/* @__PURE__ */ jsx(
|
|
1048
1024
|
"button",
|
|
1049
1025
|
{
|
|
1050
|
-
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",
|
|
1051
1026
|
onClick: single.reset,
|
|
1027
|
+
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 },
|
|
1052
1028
|
children: "Tentar novamente"
|
|
1053
1029
|
}
|
|
1054
1030
|
)
|