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