@geekapps/silo-elements-nextjs 0.2.64 → 0.2.65
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 +80 -97
- package/dist/FileUploader.js.map +1 -1
- package/dist/ImageUploader.js +18 -23
- package/dist/ImageUploader.js.map +1 -1
- package/dist/MediaUploader.js +80 -97
- package/dist/MediaUploader.js.map +1 -1
- package/dist/VideoUploader.js +22 -33
- 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 +80 -97
- 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,14 +162,14 @@ 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: "var(--silo-text-muted)" }, 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 var(--silo-accent)", background: "var(--silo-accent)", color: "#fff", padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" } : { border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text)", padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" },
|
|
172
173
|
children: f.label
|
|
173
174
|
},
|
|
174
175
|
f.value
|
|
@@ -179,18 +180,12 @@ function ImageOptions({ value, onChange, style }) {
|
|
|
179
180
|
"span",
|
|
180
181
|
{
|
|
181
182
|
onClick: () => onChange({ ...value, optimize: !optimize }),
|
|
182
|
-
|
|
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
|
-
)
|
|
183
|
+
style: { position: "relative", display: "inline-block", width: 36, height: 20, borderRadius: 10, flexShrink: 0, cursor: "pointer", background: optimize ? "var(--silo-accent)" : "var(--silo-border)", transition: "background 150ms" },
|
|
184
|
+
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,.2)", transition: "left 150ms" } })
|
|
190
185
|
}
|
|
191
186
|
),
|
|
192
|
-
/* @__PURE__ */ jsx("span", {
|
|
193
|
-
/* @__PURE__ */ jsx("span", {
|
|
187
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, color: "var(--silo-text)" }, children: "Otimizar tamanho" }),
|
|
188
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
|
|
194
189
|
] })
|
|
195
190
|
] });
|
|
196
191
|
}
|
|
@@ -418,24 +413,12 @@ var RESOLUTION_LABELS = {
|
|
|
418
413
|
"1440": "1440p",
|
|
419
414
|
"2160": "4K"
|
|
420
415
|
};
|
|
421
|
-
function
|
|
422
|
-
return
|
|
416
|
+
function optBtnStyle(active) {
|
|
417
|
+
return active ? { border: "1px solid var(--silo-accent)", background: "var(--silo-accent)", color: "#fff", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" } : { border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text)", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" };
|
|
423
418
|
}
|
|
424
419
|
function Toggle({ checked, onToggle, label }) {
|
|
425
|
-
return /* @__PURE__ */ jsxs("label", {
|
|
426
|
-
/* @__PURE__ */ jsx(
|
|
427
|
-
"span",
|
|
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
|
-
),
|
|
420
|
+
return /* @__PURE__ */ jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer", userSelect: "none", fontSize: 12, color: "var(--silo-text)", fontWeight: 500 }, onClick: onToggle, children: [
|
|
421
|
+
/* @__PURE__ */ jsx("span", { style: { position: "relative", display: "inline-block", width: 32, height: 18, borderRadius: 9, flexShrink: 0, cursor: "pointer", background: checked ? "var(--silo-accent)" : "var(--silo-border)", 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,.2)", transition: "left 150ms" } }) }),
|
|
439
422
|
label
|
|
440
423
|
] });
|
|
441
424
|
}
|
|
@@ -457,29 +440,29 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
457
440
|
}
|
|
458
441
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
|
|
459
442
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
460
|
-
/* @__PURE__ */ jsx("div", {
|
|
443
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "var(--silo-text-muted)" }, children: "Codec" }),
|
|
461
444
|
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
|
|
462
445
|
"button",
|
|
463
446
|
{
|
|
464
447
|
type: "button",
|
|
465
448
|
title: c.hint,
|
|
466
449
|
onClick: () => onChange({ ...value, codec: c.value }),
|
|
467
|
-
|
|
450
|
+
style: optBtnStyle(codec === c.value),
|
|
468
451
|
children: c.label
|
|
469
452
|
},
|
|
470
453
|
c.value
|
|
471
454
|
)) })
|
|
472
455
|
] }),
|
|
473
456
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
474
|
-
/* @__PURE__ */ jsx("div", {
|
|
457
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "var(--silo-text-muted)" }, children: "Resolu\xE7\xF5es" }),
|
|
475
458
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
|
|
476
|
-
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }),
|
|
459
|
+
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: optBtnStyle(isAuto), children: "Auto" }),
|
|
477
460
|
RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
|
|
478
461
|
"button",
|
|
479
462
|
{
|
|
480
463
|
type: "button",
|
|
481
464
|
onClick: () => toggleRes(r),
|
|
482
|
-
|
|
465
|
+
style: optBtnStyle(!isAuto && selectedRes.includes(r)),
|
|
483
466
|
children: RESOLUTION_LABELS[r]
|
|
484
467
|
},
|
|
485
468
|
r
|
|
@@ -487,7 +470,7 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
487
470
|
] })
|
|
488
471
|
] }),
|
|
489
472
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
490
|
-
/* @__PURE__ */ jsx("div", {
|
|
473
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8, color: "var(--silo-text-muted)" }, children: "Recursos" }),
|
|
491
474
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
492
475
|
/* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
|
|
493
476
|
/* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
|
|
@@ -871,9 +854,9 @@ function FileUploader({
|
|
|
871
854
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
872
855
|
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
856
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
874
|
-
/* @__PURE__ */ jsx("span", {
|
|
875
|
-
/* @__PURE__ */ jsx("span", {
|
|
876
|
-
maxSize && /* @__PURE__ */ jsxs("span", {
|
|
857
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text)", fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
|
|
858
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted)", fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
|
|
859
|
+
maxSize && /* @__PURE__ */ jsxs("span", { style: { color: "var(--silo-text-muted)", fontSize: 12 }, children: [
|
|
877
860
|
"Tamanho m\xE1ximo: ",
|
|
878
861
|
formatBytes(maxSize)
|
|
879
862
|
] })
|
|
@@ -882,10 +865,10 @@ function FileUploader({
|
|
|
882
865
|
}
|
|
883
866
|
),
|
|
884
867
|
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", {
|
|
868
|
+
/* @__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` }),
|
|
869
|
+
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: [
|
|
870
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
|
|
871
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
889
872
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
890
873
|
"input",
|
|
891
874
|
{
|
|
@@ -903,28 +886,28 @@ function FileUploader({
|
|
|
903
886
|
}
|
|
904
887
|
if (e.key === "Escape") setEditingIndex(null);
|
|
905
888
|
},
|
|
906
|
-
|
|
889
|
+
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
890
|
}
|
|
908
891
|
) : /* @__PURE__ */ jsxs(
|
|
909
892
|
"div",
|
|
910
893
|
{
|
|
911
|
-
|
|
894
|
+
style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
|
|
912
895
|
onClick: () => allowRename && setEditingIndex(i),
|
|
913
896
|
title: allowRename ? "Clique para renomear" : void 0,
|
|
914
897
|
children: [
|
|
915
898
|
effectiveName(i, staged),
|
|
916
|
-
renames.has(i) && /* @__PURE__ */ jsx("span", {
|
|
899
|
+
renames.has(i) && /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-accent)", marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
|
|
917
900
|
]
|
|
918
901
|
}
|
|
919
902
|
),
|
|
920
|
-
/* @__PURE__ */ jsx("div", {
|
|
903
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(f.size) })
|
|
921
904
|
] }),
|
|
922
905
|
allowRename && /* @__PURE__ */ jsx(
|
|
923
906
|
"button",
|
|
924
907
|
{
|
|
925
908
|
onClick: () => setEditingIndex(i),
|
|
926
909
|
title: "Renomear",
|
|
927
|
-
|
|
910
|
+
style: { color: "var(--silo-text-muted)", background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
|
|
928
911
|
children: "\u270F\uFE0F"
|
|
929
912
|
}
|
|
930
913
|
),
|
|
@@ -936,42 +919,42 @@ function FileUploader({
|
|
|
936
919
|
if (next.length === 0) clearStaging();
|
|
937
920
|
else setStaged(next);
|
|
938
921
|
},
|
|
939
|
-
|
|
922
|
+
style: { color: "var(--silo-text-muted)", background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
|
|
940
923
|
children: "\xD7"
|
|
941
924
|
}
|
|
942
925
|
)
|
|
943
926
|
] }, i)),
|
|
944
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", {
|
|
945
|
-
/* @__PURE__ */ jsx("div", {
|
|
946
|
-
/* @__PURE__ */ jsx(
|
|
927
|
+
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: [
|
|
928
|
+
/* @__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" }),
|
|
929
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "12px 14px", background: "var(--silo-bg)" }, children: /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts }) })
|
|
947
930
|
] }),
|
|
948
|
-
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", {
|
|
949
|
-
/* @__PURE__ */ jsx("div", {
|
|
950
|
-
/* @__PURE__ */ jsx(
|
|
931
|
+
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: [
|
|
932
|
+
/* @__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" }),
|
|
933
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "12px 14px", background: "var(--silo-bg)" }, children: /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts }) })
|
|
951
934
|
] }),
|
|
952
935
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
|
|
953
936
|
/* @__PURE__ */ jsx(
|
|
954
937
|
"button",
|
|
955
938
|
{
|
|
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
939
|
onClick: clearStaging,
|
|
940
|
+
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
941
|
children: "Cancelar"
|
|
959
942
|
}
|
|
960
943
|
),
|
|
961
944
|
/* @__PURE__ */ jsx(
|
|
962
945
|
"button",
|
|
963
946
|
{
|
|
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
947
|
onClick: handleConfirmUpload,
|
|
948
|
+
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
949
|
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
967
950
|
}
|
|
968
951
|
)
|
|
969
952
|
] })
|
|
970
953
|
] }),
|
|
971
|
-
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", {
|
|
972
|
-
/* @__PURE__ */ jsxs("div", {
|
|
973
|
-
/* @__PURE__ */ jsx("span", {
|
|
974
|
-
/* @__PURE__ */ jsxs("span", {
|
|
954
|
+
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: [
|
|
955
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
956
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
|
|
957
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent)" }, children: [
|
|
975
958
|
singleProgress,
|
|
976
959
|
"%"
|
|
977
960
|
] })
|
|
@@ -985,17 +968,17 @@ function FileUploader({
|
|
|
985
968
|
const isPaused = st.status === "paused";
|
|
986
969
|
const isDone = st.status === "done";
|
|
987
970
|
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", {
|
|
971
|
+
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: [
|
|
972
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
973
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
|
|
974
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
975
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
|
|
976
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
|
|
994
977
|
] }),
|
|
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", {
|
|
978
|
+
isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
|
|
979
|
+
isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, color: "var(--silo-error)", flexShrink: 0 }, children: "Erro no envio" }),
|
|
980
|
+
!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}%` }),
|
|
981
|
+
!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
982
|
] }),
|
|
1000
983
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
1001
984
|
] }, i);
|
|
@@ -1004,51 +987,51 @@ function FileUploader({
|
|
|
1004
987
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
1005
988
|
"button",
|
|
1006
989
|
{
|
|
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
990
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
991
|
+
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
992
|
children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
|
|
1010
993
|
}
|
|
1011
994
|
),
|
|
1012
995
|
/* @__PURE__ */ jsx(
|
|
1013
996
|
"button",
|
|
1014
997
|
{
|
|
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
998
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
999
|
+
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
1000
|
children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
|
|
1018
1001
|
}
|
|
1019
1002
|
)
|
|
1020
1003
|
] }),
|
|
1021
|
-
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", {
|
|
1022
|
-
/* @__PURE__ */ jsx("span", {
|
|
1023
|
-
/* @__PURE__ */ jsx("span", {
|
|
1004
|
+
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: [
|
|
1005
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
|
|
1006
|
+
/* @__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
1007
|
] })
|
|
1025
1008
|
] }),
|
|
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", {
|
|
1009
|
+
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: [
|
|
1010
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
1011
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1012
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
|
|
1013
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
|
|
1031
1014
|
] }),
|
|
1032
1015
|
/* @__PURE__ */ jsx(
|
|
1033
1016
|
"button",
|
|
1034
1017
|
{
|
|
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
1018
|
onClick: single.reset,
|
|
1019
|
+
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
1020
|
children: "Enviar outro"
|
|
1038
1021
|
}
|
|
1039
1022
|
)
|
|
1040
1023
|
] }),
|
|
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", {
|
|
1024
|
+
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: [
|
|
1025
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
1026
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1027
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "var(--silo-error)" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
|
|
1028
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
|
|
1046
1029
|
] }),
|
|
1047
1030
|
/* @__PURE__ */ jsx(
|
|
1048
1031
|
"button",
|
|
1049
1032
|
{
|
|
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
1033
|
onClick: single.reset,
|
|
1034
|
+
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
1035
|
children: "Tentar novamente"
|
|
1053
1036
|
}
|
|
1054
1037
|
)
|