@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/FileUploader.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
|
}
|
|
@@ -209,24 +204,12 @@ var RESOLUTION_LABELS = {
|
|
|
209
204
|
"1440": "1440p",
|
|
210
205
|
"2160": "4K"
|
|
211
206
|
};
|
|
212
|
-
function
|
|
213
|
-
return
|
|
207
|
+
function optBtnStyle(active) {
|
|
208
|
+
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" };
|
|
214
209
|
}
|
|
215
210
|
function Toggle({ checked, onToggle, label }) {
|
|
216
|
-
return /* @__PURE__ */ jsxs("label", {
|
|
217
|
-
/* @__PURE__ */ jsx(
|
|
218
|
-
"span",
|
|
219
|
-
{
|
|
220
|
-
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"}`,
|
|
221
|
-
children: /* @__PURE__ */ jsx(
|
|
222
|
-
"span",
|
|
223
|
-
{
|
|
224
|
-
className: "absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-[left] duration-150",
|
|
225
|
-
style: { left: checked ? "16px" : "2px" }
|
|
226
|
-
}
|
|
227
|
-
)
|
|
228
|
-
}
|
|
229
|
-
),
|
|
211
|
+
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: [
|
|
212
|
+
/* @__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" } }) }),
|
|
230
213
|
label
|
|
231
214
|
] });
|
|
232
215
|
}
|
|
@@ -248,29 +231,29 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
248
231
|
}
|
|
249
232
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
|
|
250
233
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
251
|
-
/* @__PURE__ */ jsx("div", {
|
|
234
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "var(--silo-text-muted)" }, children: "Codec" }),
|
|
252
235
|
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
|
|
253
236
|
"button",
|
|
254
237
|
{
|
|
255
238
|
type: "button",
|
|
256
239
|
title: c.hint,
|
|
257
240
|
onClick: () => onChange({ ...value, codec: c.value }),
|
|
258
|
-
|
|
241
|
+
style: optBtnStyle(codec === c.value),
|
|
259
242
|
children: c.label
|
|
260
243
|
},
|
|
261
244
|
c.value
|
|
262
245
|
)) })
|
|
263
246
|
] }),
|
|
264
247
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
265
|
-
/* @__PURE__ */ jsx("div", {
|
|
248
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "var(--silo-text-muted)" }, children: "Resolu\xE7\xF5es" }),
|
|
266
249
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
|
|
267
|
-
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }),
|
|
250
|
+
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: optBtnStyle(isAuto), children: "Auto" }),
|
|
268
251
|
RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
|
|
269
252
|
"button",
|
|
270
253
|
{
|
|
271
254
|
type: "button",
|
|
272
255
|
onClick: () => toggleRes(r),
|
|
273
|
-
|
|
256
|
+
style: optBtnStyle(!isAuto && selectedRes.includes(r)),
|
|
274
257
|
children: RESOLUTION_LABELS[r]
|
|
275
258
|
},
|
|
276
259
|
r
|
|
@@ -278,7 +261,7 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
278
261
|
] })
|
|
279
262
|
] }),
|
|
280
263
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
281
|
-
/* @__PURE__ */ jsx("div", {
|
|
264
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8, color: "var(--silo-text-muted)" }, children: "Recursos" }),
|
|
282
265
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
283
266
|
/* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
|
|
284
267
|
/* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
|
|
@@ -462,9 +445,9 @@ function FileUploader({
|
|
|
462
445
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
463
446
|
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" }) }),
|
|
464
447
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
465
|
-
/* @__PURE__ */ jsx("span", {
|
|
466
|
-
/* @__PURE__ */ jsx("span", {
|
|
467
|
-
maxSize && /* @__PURE__ */ jsxs("span", {
|
|
448
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text)", fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
|
|
449
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted)", fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
|
|
450
|
+
maxSize && /* @__PURE__ */ jsxs("span", { style: { color: "var(--silo-text-muted)", fontSize: 12 }, children: [
|
|
468
451
|
"Tamanho m\xE1ximo: ",
|
|
469
452
|
formatBytes(maxSize)
|
|
470
453
|
] })
|
|
@@ -473,10 +456,10 @@ function FileUploader({
|
|
|
473
456
|
}
|
|
474
457
|
),
|
|
475
458
|
staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
476
|
-
/* @__PURE__ */ jsx("div", {
|
|
477
|
-
staged.map((f, i) => /* @__PURE__ */ jsxs("div", {
|
|
478
|
-
/* @__PURE__ */ jsx("span", {
|
|
479
|
-
/* @__PURE__ */ jsxs("div", {
|
|
459
|
+
/* @__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` }),
|
|
460
|
+
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: [
|
|
461
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
|
|
462
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
480
463
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
481
464
|
"input",
|
|
482
465
|
{
|
|
@@ -494,28 +477,28 @@ function FileUploader({
|
|
|
494
477
|
}
|
|
495
478
|
if (e.key === "Escape") setEditingIndex(null);
|
|
496
479
|
},
|
|
497
|
-
|
|
480
|
+
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)" }
|
|
498
481
|
}
|
|
499
482
|
) : /* @__PURE__ */ jsxs(
|
|
500
483
|
"div",
|
|
501
484
|
{
|
|
502
|
-
|
|
485
|
+
style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
|
|
503
486
|
onClick: () => allowRename && setEditingIndex(i),
|
|
504
487
|
title: allowRename ? "Clique para renomear" : void 0,
|
|
505
488
|
children: [
|
|
506
489
|
effectiveName(i, staged),
|
|
507
|
-
renames.has(i) && /* @__PURE__ */ jsx("span", {
|
|
490
|
+
renames.has(i) && /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-accent)", marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
|
|
508
491
|
]
|
|
509
492
|
}
|
|
510
493
|
),
|
|
511
|
-
/* @__PURE__ */ jsx("div", {
|
|
494
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(f.size) })
|
|
512
495
|
] }),
|
|
513
496
|
allowRename && /* @__PURE__ */ jsx(
|
|
514
497
|
"button",
|
|
515
498
|
{
|
|
516
499
|
onClick: () => setEditingIndex(i),
|
|
517
500
|
title: "Renomear",
|
|
518
|
-
|
|
501
|
+
style: { color: "var(--silo-text-muted)", background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
|
|
519
502
|
children: "\u270F\uFE0F"
|
|
520
503
|
}
|
|
521
504
|
),
|
|
@@ -527,42 +510,42 @@ function FileUploader({
|
|
|
527
510
|
if (next.length === 0) clearStaging();
|
|
528
511
|
else setStaged(next);
|
|
529
512
|
},
|
|
530
|
-
|
|
513
|
+
style: { color: "var(--silo-text-muted)", background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
|
|
531
514
|
children: "\xD7"
|
|
532
515
|
}
|
|
533
516
|
)
|
|
534
517
|
] }, i)),
|
|
535
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", {
|
|
536
|
-
/* @__PURE__ */ jsx("div", {
|
|
537
|
-
/* @__PURE__ */ jsx(
|
|
518
|
+
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: [
|
|
519
|
+
/* @__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" }),
|
|
520
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "12px 14px", background: "var(--silo-bg)" }, children: /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts }) })
|
|
538
521
|
] }),
|
|
539
|
-
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", {
|
|
540
|
-
/* @__PURE__ */ jsx("div", {
|
|
541
|
-
/* @__PURE__ */ jsx(
|
|
522
|
+
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: [
|
|
523
|
+
/* @__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" }),
|
|
524
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "12px 14px", background: "var(--silo-bg)" }, children: /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts }) })
|
|
542
525
|
] }),
|
|
543
526
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
|
|
544
527
|
/* @__PURE__ */ jsx(
|
|
545
528
|
"button",
|
|
546
529
|
{
|
|
547
|
-
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",
|
|
548
530
|
onClick: clearStaging,
|
|
531
|
+
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" },
|
|
549
532
|
children: "Cancelar"
|
|
550
533
|
}
|
|
551
534
|
),
|
|
552
535
|
/* @__PURE__ */ jsx(
|
|
553
536
|
"button",
|
|
554
537
|
{
|
|
555
|
-
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",
|
|
556
538
|
onClick: handleConfirmUpload,
|
|
539
|
+
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" },
|
|
557
540
|
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
558
541
|
}
|
|
559
542
|
)
|
|
560
543
|
] })
|
|
561
544
|
] }),
|
|
562
|
-
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", {
|
|
563
|
-
/* @__PURE__ */ jsxs("div", {
|
|
564
|
-
/* @__PURE__ */ jsx("span", {
|
|
565
|
-
/* @__PURE__ */ jsxs("span", {
|
|
545
|
+
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: [
|
|
546
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
547
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(single.state.status, singleProgress) }),
|
|
548
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent)" }, children: [
|
|
566
549
|
singleProgress,
|
|
567
550
|
"%"
|
|
568
551
|
] })
|
|
@@ -576,17 +559,17 @@ function FileUploader({
|
|
|
576
559
|
const isPaused = st.status === "paused";
|
|
577
560
|
const isDone = st.status === "done";
|
|
578
561
|
const isErr = st.status === "error";
|
|
579
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
580
|
-
/* @__PURE__ */ jsxs("div", {
|
|
581
|
-
/* @__PURE__ */ jsx("span", {
|
|
582
|
-
/* @__PURE__ */ jsxs("div", {
|
|
583
|
-
/* @__PURE__ */ jsx("div", {
|
|
584
|
-
/* @__PURE__ */ jsx("div", {
|
|
562
|
+
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: [
|
|
563
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
564
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
|
|
565
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
566
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
|
|
567
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
|
|
585
568
|
] }),
|
|
586
|
-
isDone && /* @__PURE__ */ jsx("span", {
|
|
587
|
-
isErr && /* @__PURE__ */ jsx("span", {
|
|
588
|
-
!isDone && !isErr && /* @__PURE__ */ jsx("span", {
|
|
589
|
-
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", {
|
|
569
|
+
isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
|
|
570
|
+
isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, color: "var(--silo-error)", flexShrink: 0 }, children: "Erro no envio" }),
|
|
571
|
+
!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}%` }),
|
|
572
|
+
!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)
|
|
590
573
|
] }),
|
|
591
574
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
592
575
|
] }, i);
|
|
@@ -595,51 +578,51 @@ function FileUploader({
|
|
|
595
578
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
596
579
|
"button",
|
|
597
580
|
{
|
|
598
|
-
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"}`,
|
|
599
581
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
582
|
+
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" },
|
|
600
583
|
children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
|
|
601
584
|
}
|
|
602
585
|
),
|
|
603
586
|
/* @__PURE__ */ jsx(
|
|
604
587
|
"button",
|
|
605
588
|
{
|
|
606
|
-
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"}`,
|
|
607
589
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
590
|
+
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" },
|
|
608
591
|
children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
|
|
609
592
|
}
|
|
610
593
|
)
|
|
611
594
|
] }),
|
|
612
|
-
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", {
|
|
613
|
-
/* @__PURE__ */ jsx("span", {
|
|
614
|
-
/* @__PURE__ */ jsx("span", {
|
|
595
|
+
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: [
|
|
596
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
|
|
597
|
+
/* @__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!` })
|
|
615
598
|
] })
|
|
616
599
|
] }),
|
|
617
|
-
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", {
|
|
618
|
-
/* @__PURE__ */ jsx("span", {
|
|
619
|
-
/* @__PURE__ */ jsxs("div", {
|
|
620
|
-
/* @__PURE__ */ jsx("div", {
|
|
621
|
-
/* @__PURE__ */ jsx("div", {
|
|
600
|
+
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: [
|
|
601
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
602
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
603
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
|
|
604
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
|
|
622
605
|
] }),
|
|
623
606
|
/* @__PURE__ */ jsx(
|
|
624
607
|
"button",
|
|
625
608
|
{
|
|
626
|
-
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",
|
|
627
609
|
onClick: single.reset,
|
|
610
|
+
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 },
|
|
628
611
|
children: "Enviar outro"
|
|
629
612
|
}
|
|
630
613
|
)
|
|
631
614
|
] }),
|
|
632
|
-
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", {
|
|
633
|
-
/* @__PURE__ */ jsx("span", {
|
|
634
|
-
/* @__PURE__ */ jsxs("div", {
|
|
635
|
-
/* @__PURE__ */ jsx("div", {
|
|
636
|
-
/* @__PURE__ */ jsx("div", {
|
|
615
|
+
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: [
|
|
616
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
617
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
618
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "var(--silo-error)" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
|
|
619
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
|
|
637
620
|
] }),
|
|
638
621
|
/* @__PURE__ */ jsx(
|
|
639
622
|
"button",
|
|
640
623
|
{
|
|
641
|
-
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",
|
|
642
624
|
onClick: single.reset,
|
|
625
|
+
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 },
|
|
643
626
|
children: "Tentar novamente"
|
|
644
627
|
}
|
|
645
628
|
)
|