@geekapps/silo-elements-nextjs 0.2.35 → 0.2.37

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.
Files changed (18) hide show
  1. package/dist/FileUploader.js +131 -182
  2. package/dist/FileUploader.js.map +1 -1
  3. package/dist/ImageUploader.js +63 -104
  4. package/dist/ImageUploader.js.map +1 -1
  5. package/dist/MediaUploader.js +271 -341
  6. package/dist/MediaUploader.js.map +1 -1
  7. package/dist/VideoUploader.js +91 -127
  8. package/dist/VideoUploader.js.map +1 -1
  9. package/dist/components/DropZone.js +8 -10
  10. package/dist/components/DropZone.js.map +1 -1
  11. package/dist/components/ProgressBar.js +4 -16
  12. package/dist/components/ProgressBar.js.map +1 -1
  13. package/dist/index.d.ts +1 -4
  14. package/dist/index.js +444 -627
  15. package/dist/index.js.map +1 -1
  16. package/dist/styles.css +1 -1
  17. package/package.json +6 -6
  18. package/styles.css +2 -0
package/dist/MediaUploader.js CHANGED
@@ -86,20 +86,18 @@ function DropZone({
86
86
  );
87
87
  const rootStyle = {
88
88
  ...vars,
89
- fontFamily: "var(--silo-font)",
90
- border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
91
- borderRadius: "var(--silo-radius)",
92
- backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
93
- color: "var(--silo-text)",
94
- cursor: disabled ? "not-allowed" : "pointer",
95
- transition: "border-color 0.15s, background-color 0.15s",
96
- opacity: disabled ? 0.5 : 1,
97
89
  ...style
98
90
  };
91
+ const cls = [
92
+ "border-2 border-dashed border-slate-200 rounded-xl bg-slate-50 text-slate-900 cursor-pointer outline-none transition-colors duration-150",
93
+ dragging ? "border-indigo-500 bg-slate-100" : "hover:border-indigo-500 hover:bg-slate-100",
94
+ disabled ? "opacity-50 cursor-not-allowed" : "",
95
+ className
96
+ ].filter(Boolean).join(" ");
99
97
  return /* @__PURE__ */ jsxs(
100
98
  "div",
101
99
  {
102
- className: `silo-dropzone${className ? ` ${className}` : ""}`,
100
+ className: cls,
103
101
  style: rootStyle,
104
102
  onDragOver: (e) => {
105
103
  e.preventDefault();
@@ -122,7 +120,7 @@ function DropZone({
122
120
  type: "file",
123
121
  accept,
124
122
  multiple,
125
- style: { display: "none" },
123
+ className: "hidden",
126
124
  onChange: handleChange,
127
125
  disabled
128
126
  }
@@ -136,14 +134,8 @@ function ProgressBar({ progress, className = "", style }) {
136
134
  return /* @__PURE__ */ jsx(
137
135
  "div",
138
136
  {
139
- className: `silo-progress-track${className ? ` ${className}` : ""}`,
140
- style: {
141
- height: "6px",
142
- borderRadius: "3px",
143
- backgroundColor: "rgba(99,102,241,0.15)",
144
- overflow: "hidden",
145
- ...style
146
- },
137
+ className: `h-1 rounded-full bg-slate-200 overflow-hidden${className ? ` ${className}` : ""}`,
138
+ style,
147
139
  role: "progressbar",
148
140
  "aria-valuenow": progress,
149
141
  "aria-valuemin": 0,
@@ -151,14 +143,8 @@ function ProgressBar({ progress, className = "", style }) {
151
143
  children: /* @__PURE__ */ jsx(
152
144
  "div",
153
145
  {
154
- className: "silo-progress-fill",
155
- style: {
156
- height: "100%",
157
- width: `${progress}%`,
158
- backgroundColor: "var(--silo-accent, #6366f1)",
159
- borderRadius: "3px",
160
- transition: "width 0.2s ease"
161
- }
146
+ className: "h-full rounded-full bg-indigo-500 transition-[width] duration-200 ease-linear",
147
+ style: { width: `${progress}%` }
162
148
  }
163
149
  )
164
150
  }
@@ -173,60 +159,38 @@ var FORMATS = [
173
159
  function ImageOptions({ value, onChange, style }) {
174
160
  const fmt = value.format ?? "webp";
175
161
  const optimize = value.optimize ?? true;
176
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, ...style }, children: [
162
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", style, children: [
177
163
  /* @__PURE__ */ jsxs("div", { children: [
178
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Formato de sa\xEDda" }),
179
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: FORMATS.map((f) => /* @__PURE__ */ jsx(
164
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Formato de sa\xEDda" }),
165
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
180
166
  "button",
181
167
  {
182
168
  type: "button",
183
169
  onClick: () => onChange({ ...value, format: f.value }),
184
170
  title: f.hint,
185
- style: {
186
- padding: "4px 12px",
187
- borderRadius: 6,
188
- border: `1px solid ${fmt === f.value ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
189
- background: fmt === f.value ? "var(--silo-accent, #6366f1)" : "transparent",
190
- color: fmt === f.value ? "#fff" : "var(--silo-text, #0f172a)",
191
- fontSize: 12,
192
- fontWeight: 600,
193
- cursor: "pointer"
194
- },
171
+ className: `py-1 px-3 rounded-md text-xs font-semibold cursor-pointer transition-colors border ${fmt === f.value ? "border-indigo-500 bg-indigo-500 text-white" : "border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100"}`,
195
172
  children: f.label
196
173
  },
197
174
  f.value
198
175
  )) })
199
176
  ] }),
200
- /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, children: [
177
+ /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
201
178
  /* @__PURE__ */ jsx(
202
179
  "span",
203
180
  {
204
181
  onClick: () => onChange({ ...value, optimize: !optimize }),
205
- style: {
206
- width: 36,
207
- height: 20,
208
- borderRadius: 10,
209
- background: optimize ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
210
- position: "relative",
211
- flexShrink: 0,
212
- transition: "background 0.15s",
213
- cursor: "pointer"
214
- },
215
- children: /* @__PURE__ */ jsx("span", { style: {
216
- position: "absolute",
217
- top: 2,
218
- left: optimize ? 18 : 2,
219
- width: 16,
220
- height: 16,
221
- borderRadius: "50%",
222
- background: "#fff",
223
- transition: "left 0.15s",
224
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
225
- } })
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
+ )
226
190
  }
227
191
  ),
228
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text, #0f172a)", fontWeight: 500 }, children: "Otimizar tamanho" }),
229
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
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" })
230
194
  ] })
231
195
  ] });
232
196
  }
@@ -304,19 +268,14 @@ function ImageUploader({
304
268
  }, [showImageOptions, image, imageOpts, doUpload, showPreview]);
305
269
  const containerStyle = {
306
270
  ...vars,
307
- display: "flex",
308
- flexDirection: "column",
309
- gap: "12px",
310
- width: "100%",
311
- fontFamily: "var(--silo-font)",
312
271
  ...style
313
272
  };
314
273
  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
315
274
  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
316
275
  const isPaused = state.status === "idle" && preview !== null && !stagedFile;
317
- if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
318
- if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
319
- return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
276
+ if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
277
+ if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
278
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
320
279
  /* @__PURE__ */ jsx(
321
280
  DropZone,
322
281
  {
@@ -327,15 +286,15 @@ function ImageUploader({
327
286
  disabled: disabled || isUploading,
328
287
  onFiles: handleFiles,
329
288
  style: { padding: "32px 24px", textAlign: "center" },
330
- children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
331
- /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
332
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar a imagem" })
333
- ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
334
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
289
+ children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
290
+ /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", className: "max-w-full max-h-[200px] rounded-lg object-contain" }),
291
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar a imagem" })
292
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
293
+ 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: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
335
294
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
336
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste sua imagem aqui" }),
337
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
338
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
295
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste sua imagem aqui" }),
296
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
297
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
339
298
  "Tamanho m\xE1ximo: ",
340
299
  formatBytes(maxSize)
341
300
  ] })
@@ -344,100 +303,100 @@ function ImageUploader({
344
303
  }
345
304
  ),
346
305
  showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
347
- preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)" }, children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { width: "100%", maxHeight: 200, objectFit: "contain", display: "block", background: "var(--silo-bg-hover, #f8fafc)" } }) }),
348
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
349
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
306
+ preview && /* @__PURE__ */ jsx("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", className: "w-full max-h-[200px] object-contain block bg-slate-50" }) }),
307
+ /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
308
+ /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
350
309
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
351
310
  ] }),
352
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
311
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
353
312
  /* @__PURE__ */ jsx(
354
313
  "button",
355
314
  {
315
+ 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",
356
316
  onClick: () => {
357
317
  setStagedFile(null);
358
318
  setPreview(null);
359
319
  },
360
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
361
320
  children: "Cancelar"
362
321
  }
363
322
  ),
364
323
  /* @__PURE__ */ jsx(
365
324
  "button",
366
325
  {
326
+ 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",
367
327
  onClick: () => {
368
328
  const f = stagedFile;
369
329
  setStagedFile(null);
370
330
  void doUpload(f, imageOpts);
371
331
  },
372
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
373
332
  children: "Enviar imagem"
374
333
  }
375
334
  )
376
335
  ] })
377
336
  ] }),
378
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
379
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
380
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(state.status, progress) }),
381
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
337
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-4 bg-slate-50 rounded-xl border border-slate-200", children: [
338
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
339
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel(state.status, progress) }),
340
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
382
341
  progress,
383
342
  "%"
384
343
  ] })
385
344
  ] }),
386
345
  /* @__PURE__ */ jsx(ProgressBar, { progress })
387
346
  ] })),
388
- isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
347
+ isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
389
348
  /* @__PURE__ */ jsx(
390
349
  "button",
391
350
  {
351
+ 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-emerald-500 text-white cursor-pointer hover:opacity-90",
392
352
  onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }),
393
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
394
353
  children: "\u25B6 Retomar envio"
395
354
  }
396
355
  ),
397
356
  /* @__PURE__ */ jsx(
398
357
  "button",
399
358
  {
359
+ 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 hover:bg-slate-100",
400
360
  onClick: () => {
401
361
  abort();
402
362
  setPreview(null);
403
363
  },
404
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
405
364
  children: "Cancelar"
406
365
  }
407
366
  )
408
367
  ] }),
409
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
410
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
411
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
412
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
413
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
368
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
369
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
370
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
371
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Imagem enviada com sucesso!" }),
372
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
414
373
  ] }),
415
374
  /* @__PURE__ */ jsx(
416
375
  "button",
417
376
  {
377
+ 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",
418
378
  onClick: () => {
419
379
  reset();
420
380
  setPreview(null);
421
381
  },
422
- style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
423
382
  children: "Enviar outra"
424
383
  }
425
384
  )
426
385
  ] }),
427
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
428
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
429
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
430
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
431
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
386
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-red-500/[0.07] rounded-xl border border-red-500/20", children: [
387
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
388
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
389
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
390
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
432
391
  ] }),
433
392
  /* @__PURE__ */ jsx(
434
393
  "button",
435
394
  {
395
+ 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",
436
396
  onClick: () => {
437
397
  reset();
438
398
  setPreview(null);
439
399
  },
440
- style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
441
400
  children: "Tentar novamente"
442
401
  }
443
402
  )
@@ -459,6 +418,27 @@ var RESOLUTION_LABELS = {
459
418
  "1440": "1440p",
460
419
  "2160": "4K"
461
420
  };
421
+ function optionBtnCls(active) {
422
+ return `py-1 px-2.5 rounded-md text-xs font-semibold cursor-pointer transition-colors border ${active ? "border-indigo-500 bg-indigo-500 text-white" : "border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100"}`;
423
+ }
424
+ function Toggle({ checked, onToggle, label }) {
425
+ return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-1.5 cursor-pointer select-none text-xs text-slate-900 font-medium", onClick: onToggle, children: [
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
+ ),
439
+ label
440
+ ] });
441
+ }
462
442
  function VideoOptions({ value, onChange, style }) {
463
443
  const codec = value.codec ?? "h264";
464
444
  const transcoding = value.transcoding ?? "auto";
@@ -475,76 +455,31 @@ function VideoOptions({ value, onChange, style }) {
475
455
  function toggleFeature(key) {
476
456
  onChange({ ...value, [key]: !value[key] });
477
457
  }
478
- const btn = (active) => ({
479
- padding: "4px 10px",
480
- borderRadius: 6,
481
- border: `1px solid ${active ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
482
- background: active ? "var(--silo-accent, #6366f1)" : "transparent",
483
- color: active ? "#fff" : "var(--silo-text, #0f172a)",
484
- fontSize: 12,
485
- fontWeight: 600,
486
- cursor: "pointer"
487
- });
488
- const toggle = (on) => ({
489
- display: "inline-flex",
490
- alignItems: "center",
491
- gap: 6,
492
- cursor: "pointer",
493
- userSelect: "none",
494
- fontSize: 12,
495
- color: "var(--silo-text, #0f172a)",
496
- fontWeight: 500
497
- });
498
- function Toggle({ checked, onToggle, label }) {
499
- return /* @__PURE__ */ jsxs("label", { style: toggle(), onClick: onToggle, children: [
500
- /* @__PURE__ */ jsx("span", { style: {
501
- width: 32,
502
- height: 18,
503
- borderRadius: 9,
504
- flexShrink: 0,
505
- background: checked ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
506
- position: "relative",
507
- transition: "background 0.15s",
508
- cursor: "pointer"
509
- }, children: /* @__PURE__ */ jsx("span", { style: {
510
- position: "absolute",
511
- top: 2,
512
- left: checked ? 16 : 2,
513
- width: 14,
514
- height: 14,
515
- borderRadius: "50%",
516
- background: "#fff",
517
- transition: "left 0.15s",
518
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
519
- } }) }),
520
- label
521
- ] });
522
- }
523
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, ...style }, children: [
458
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
524
459
  /* @__PURE__ */ jsxs("div", { children: [
525
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Codec" }),
526
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: CODECS.map((c) => /* @__PURE__ */ jsx(
460
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Codec" }),
461
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
527
462
  "button",
528
463
  {
529
464
  type: "button",
530
465
  title: c.hint,
531
466
  onClick: () => onChange({ ...value, codec: c.value }),
532
- style: btn(codec === c.value),
467
+ className: optionBtnCls(codec === c.value),
533
468
  children: c.label
534
469
  },
535
470
  c.value
536
471
  )) })
537
472
  ] }),
538
473
  /* @__PURE__ */ jsxs("div", { children: [
539
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Resolu\xE7\xF5es" }),
540
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
541
- /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: btn(isAuto), children: "Auto" }),
474
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Resolu\xE7\xF5es" }),
475
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
476
+ /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), className: optionBtnCls(isAuto), children: "Auto" }),
542
477
  RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
543
478
  "button",
544
479
  {
545
480
  type: "button",
546
481
  onClick: () => toggleRes(r),
547
- style: btn(!isAuto && selectedRes.includes(r)),
482
+ className: optionBtnCls(!isAuto && selectedRes.includes(r)),
548
483
  children: RESOLUTION_LABELS[r]
549
484
  },
550
485
  r
@@ -552,8 +487,8 @@ function VideoOptions({ value, onChange, style }) {
552
487
  ] })
553
488
  ] }),
554
489
  /* @__PURE__ */ jsxs("div", { children: [
555
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 8 }, children: "Recursos" }),
556
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
490
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-2", children: "Recursos" }),
491
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
557
492
  /* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
558
493
  /* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
559
494
  /* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => toggleFeature("autoCaptions"), label: "Legendas autom\xE1ticas (IA)" }),
@@ -630,19 +565,14 @@ function VideoUploader({
630
565
  }, [showVideoOptions, video, videoOpts, doUpload, showPreview]);
631
566
  const containerStyle = {
632
567
  ...vars,
633
- display: "flex",
634
- flexDirection: "column",
635
- gap: "12px",
636
- width: "100%",
637
- fontFamily: "var(--silo-font)",
638
568
  ...style
639
569
  };
640
570
  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
641
571
  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
642
572
  const isPaused = state.status === "idle" && preview !== null && !stagedFile;
643
- if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
644
- if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
645
- return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
573
+ if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
574
+ if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
575
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
646
576
  /* @__PURE__ */ jsx(
647
577
  DropZone,
648
578
  {
@@ -653,15 +583,15 @@ function VideoUploader({
653
583
  disabled: disabled || isUploading,
654
584
  onFiles: handleFiles,
655
585
  style: { padding: "32px 24px", textAlign: "center" },
656
- children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
657
- /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
658
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar o v\xEDdeo" })
659
- ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
660
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
586
+ children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
587
+ /* @__PURE__ */ jsx("video", { src: preview, className: "max-w-full max-h-[180px] rounded-lg", muted: true, playsInline: true }),
588
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar o v\xEDdeo" })
589
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
590
+ 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: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
661
591
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
662
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste seu v\xEDdeo aqui" }),
663
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
664
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
592
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste seu v\xEDdeo aqui" }),
593
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
594
+ /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
665
595
  "MP4, MOV, MKV, WebM",
666
596
  maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
667
597
  ] })
@@ -670,109 +600,116 @@ function VideoUploader({
670
600
  }
671
601
  ),
672
602
  showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
673
- preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)", background: "#000" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
674
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
675
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
603
+ preview && /* @__PURE__ */ jsx("div", { className: "border border-slate-200 rounded-xl overflow-hidden bg-black", children: /* @__PURE__ */ jsx("video", { src: preview, className: "w-full max-h-[200px] block", muted: true, playsInline: true, controls: true }) }),
604
+ /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
605
+ /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
676
606
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
677
607
  ] }),
678
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
608
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
679
609
  /* @__PURE__ */ jsx(
680
610
  "button",
681
611
  {
612
+ 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 hover:bg-slate-100",
682
613
  onClick: () => {
683
614
  setStagedFile(null);
684
615
  setPreview(null);
685
616
  setVideoOpts(createInitialVideoOpts(video));
686
617
  },
687
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
688
618
  children: "Cancelar"
689
619
  }
690
620
  ),
691
621
  /* @__PURE__ */ jsx(
692
622
  "button",
693
623
  {
624
+ 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 hover:opacity-90",
694
625
  onClick: () => {
695
626
  const f = stagedFile;
696
627
  setStagedFile(null);
697
628
  void doUpload(f, videoOpts);
698
629
  setVideoOpts(createInitialVideoOpts(video));
699
630
  },
700
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
701
631
  children: "Enviar v\xEDdeo"
702
632
  }
703
633
  )
704
634
  ] })
705
635
  ] }),
706
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
707
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
708
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel2(state.status, progress) }),
709
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
710
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
636
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-4 bg-slate-50 rounded-xl border border-slate-200", children: [
637
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
638
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel2(state.status, progress) }),
639
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
640
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
711
641
  progress,
712
642
  "%"
713
643
  ] }),
714
- /* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "1px solid var(--silo-border)", borderRadius: 6, cursor: "pointer", fontSize: 11, color: "var(--silo-text-muted)", padding: "2px 8px" }, children: "Pausar" })
644
+ /* @__PURE__ */ jsx(
645
+ "button",
646
+ {
647
+ className: "inline-flex items-center justify-center text-[11px] font-semibold py-0.5 px-2 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100",
648
+ onClick: pause,
649
+ children: "Pausar"
650
+ }
651
+ )
715
652
  ] })
716
653
  ] }),
717
654
  /* @__PURE__ */ jsx(ProgressBar, { progress }),
718
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
655
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
719
656
  ] })),
720
- isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
657
+ isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
721
658
  /* @__PURE__ */ jsx(
722
659
  "button",
723
660
  {
661
+ 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-emerald-500 text-white cursor-pointer hover:opacity-90",
724
662
  onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }),
725
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
726
663
  children: "\u25B6 Retomar envio"
727
664
  }
728
665
  ),
729
666
  /* @__PURE__ */ jsx(
730
667
  "button",
731
668
  {
669
+ 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 hover:bg-slate-100",
732
670
  onClick: () => {
733
671
  abort();
734
672
  setPreview(null);
735
673
  },
736
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
737
674
  children: "Cancelar"
738
675
  }
739
676
  )
740
677
  ] }),
741
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
742
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
743
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
744
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
745
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
746
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
678
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
679
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
680
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
681
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
682
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "V\xEDdeo enviado com sucesso!" }),
683
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
747
684
  ] }),
748
685
  /* @__PURE__ */ jsx(
749
686
  "button",
750
687
  {
688
+ 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",
751
689
  onClick: () => {
752
690
  reset();
753
691
  setPreview(null);
754
692
  },
755
- style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
756
693
  children: "Enviar outro"
757
694
  }
758
695
  )
759
696
  ] }),
760
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", padding: "8px 12px", borderRadius: 8, background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.15)" }, children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
697
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-500 px-3 py-2 rounded-lg bg-green-500/[0.06] border border-green-500/15", children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
761
698
  ] }),
762
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
763
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
764
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
765
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
766
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
699
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-red-500/[0.07] rounded-xl border border-red-500/20", children: [
700
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
701
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
702
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
703
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
767
704
  ] }),
768
705
  /* @__PURE__ */ jsx(
769
706
  "button",
770
707
  {
708
+ 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",
771
709
  onClick: () => {
772
710
  reset();
773
711
  setPreview(null);
774
712
  },
775
- style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
776
713
  children: "Tentar novamente"
777
714
  }
778
715
  )
@@ -828,11 +765,6 @@ function FileUploader({
828
765
  const vars = themeToVars(t);
829
766
  const containerStyle = {
830
767
  ...vars,
831
- display: "flex",
832
- flexDirection: "column",
833
- gap: "12px",
834
- width: "100%",
835
- fontFamily: "var(--silo-font)",
836
768
  ...style
837
769
  };
838
770
  const single = useMultipartUpload(bucket);
@@ -909,9 +841,9 @@ function FileUploader({
909
841
  const isBatchUploading = batch.state.status === "uploading" || batch.state.status === "preparing";
910
842
  const isUploading = isSingleUploading || isBatchUploading;
911
843
  const singleProgress = single.state.status === "uploading" ? single.state.progress : single.state.status === "completing" ? 99 : 0;
912
- if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(single.state.error, single.reset) });
913
- if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(single.state.result) });
914
- return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
844
+ if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(single.state.error, single.reset) });
845
+ if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(single.state.result) });
846
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
915
847
  !isBatch && !staged && /* @__PURE__ */ jsx(
916
848
  DropZone,
917
849
  {
@@ -923,12 +855,12 @@ function FileUploader({
923
855
  disabled: disabled || isUploading,
924
856
  onFiles: handleFiles,
925
857
  style: { padding: "28px 24px", textAlign: "center" },
926
- children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
927
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, 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" }) }),
858
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
859
+ 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" }) }),
928
860
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
929
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
930
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
931
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
861
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
862
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
863
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
932
864
  "Tamanho m\xE1ximo: ",
933
865
  formatBytes(maxSize)
934
866
  ] })
@@ -936,11 +868,11 @@ function FileUploader({
936
868
  ] })
937
869
  }
938
870
  ),
939
- staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
940
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text-muted)", marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
941
- staged.map((f, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
942
- /* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
943
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
871
+ staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
872
+ /* @__PURE__ */ jsx("div", { className: "text-slate-500 text-[13px] font-semibold mb-0.5", children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
873
+ staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5 bg-slate-50 rounded-xl border border-slate-200", children: [
874
+ /* @__PURE__ */ jsx("span", { className: "text-xl shrink-0", children: getFileIcon(f.type) }),
875
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
944
876
  editingIndex === i ? /* @__PURE__ */ jsx(
945
877
  "input",
946
878
  {
@@ -958,28 +890,28 @@ function FileUploader({
958
890
  }
959
891
  if (e.key === "Escape") setEditingIndex(null);
960
892
  },
961
- style: { width: "100%", fontSize: 13, fontWeight: 500, border: "1px solid var(--silo-accent, #6366f1)", borderRadius: 5, padding: "2px 8px", outline: "none", background: "var(--silo-bg)", color: "var(--silo-text)", fontFamily: "var(--silo-font)" }
893
+ className: "w-full text-[13px] font-medium border border-indigo-500 rounded-md py-0.5 px-2 outline-none bg-slate-50 text-slate-900"
962
894
  }
963
895
  ) : /* @__PURE__ */ jsxs(
964
896
  "div",
965
897
  {
966
- style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)", cursor: allowRename ? "text" : "default" },
898
+ className: `text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap ${allowRename ? "cursor-text" : "cursor-default"}`,
967
899
  onClick: () => allowRename && setEditingIndex(i),
968
900
  title: allowRename ? "Clique para renomear" : void 0,
969
901
  children: [
970
902
  effectiveName(i, staged),
971
- renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
903
+ renames.has(i) && /* @__PURE__ */ jsx("span", { className: "text-indigo-500 ml-1.5 text-[10px] font-bold", children: "renomeado" })
972
904
  ]
973
905
  }
974
906
  ),
975
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
907
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400 mt-0.5", children: formatBytes(f.size) })
976
908
  ] }),
977
909
  allowRename && /* @__PURE__ */ jsx(
978
910
  "button",
979
911
  {
980
912
  onClick: () => setEditingIndex(i),
981
913
  title: "Renomear",
982
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--silo-text-muted)", padding: "0 4px", flexShrink: 0 },
914
+ className: "text-slate-400 bg-none border-none cursor-pointer text-sm px-1 shrink-0 hover:text-slate-600",
983
915
  children: "\u270F\uFE0F"
984
916
  }
985
917
  ),
@@ -991,108 +923,122 @@ function FileUploader({
991
923
  if (next.length === 0) clearStaging();
992
924
  else setStaged(next);
993
925
  },
994
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--silo-text-muted)", padding: "0 4px", lineHeight: 1, flexShrink: 0 },
926
+ className: "text-slate-400 bg-none border-none cursor-pointer text-lg px-1 leading-none shrink-0 hover:text-slate-600",
995
927
  children: "\xD7"
996
928
  }
997
929
  )
998
930
  ] }, i)),
999
- showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1000
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
931
+ showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
932
+ /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
1001
933
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
1002
934
  ] }),
1003
- showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1004
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
935
+ showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
936
+ /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
1005
937
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
1006
938
  ] }),
1007
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
939
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
1008
940
  /* @__PURE__ */ jsx(
1009
941
  "button",
1010
942
  {
943
+ 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",
1011
944
  onClick: clearStaging,
1012
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
1013
945
  children: "Cancelar"
1014
946
  }
1015
947
  ),
1016
948
  /* @__PURE__ */ jsx(
1017
949
  "button",
1018
950
  {
951
+ 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",
1019
952
  onClick: handleConfirmUpload,
1020
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
1021
953
  children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
1022
954
  }
1023
955
  )
1024
956
  ] })
1025
957
  ] }),
1026
- isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "16px", borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
1027
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
1028
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
1029
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
958
+ isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-4 bg-slate-50 rounded-xl border border-slate-200", children: [
959
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
960
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel3(single.state.status, singleProgress) }),
961
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
1030
962
  singleProgress,
1031
963
  "%"
1032
964
  ] })
1033
965
  ] }),
1034
966
  /* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
1035
967
  ] })),
1036
- isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
968
+ isBatch && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
1037
969
  batch.state.files.map((f, i) => {
1038
970
  const st = f.status;
1039
971
  const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
1040
972
  const isPaused = st.status === "paused";
1041
973
  const isDone = st.status === "done";
1042
974
  const isErr = st.status === "error";
1043
- return /* @__PURE__ */ jsxs("div", { style: { padding: "12px 14px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
1044
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: isDone || isErr ? 0 : 8 }, children: [
1045
- /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
1046
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1047
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)" }, children: f.file.name }),
1048
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
975
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-2 px-3.5 py-3 bg-slate-50 rounded-xl border border-slate-200", children: [
976
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
977
+ /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: getFileIcon(f.file.type) }),
978
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
979
+ /* @__PURE__ */ jsx("div", { className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: f.file.name }),
980
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400", children: formatBytes(f.file.size) })
1049
981
  ] }),
1050
- isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
1051
- isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#ef4444", fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
1052
- !isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, color: isPaused ? "#f59e0b" : "var(--silo-accent, #6366f1)", flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
1053
- !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { onClick: () => batch.resumeFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "none", background: "#10b981", color: "#fff", cursor: "pointer", fontWeight: 600 }, children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { onClick: () => batch.pauseFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", cursor: "pointer" }, children: "Pausar" }) : null)
982
+ isDone && /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: "\u2705" }),
983
+ isErr && /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold text-red-500 shrink-0", children: "Erro no envio" }),
984
+ !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: `text-[12px] font-bold shrink-0 ${isPaused ? "text-slate-400" : "text-indigo-500"}`, children: isPaused ? "Pausado" : `${p}%` }),
985
+ !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center gap-1.5 text-[11px] font-semibold py-0.5 px-2.5 rounded-lg border-transparent bg-emerald-500 text-white cursor-pointer hover:opacity-90", onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center gap-1.5 text-[11px] font-semibold py-0.5 px-2.5 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100", onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
1054
986
  ] }),
1055
987
  !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
1056
988
  ] }, i);
1057
989
  }),
1058
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
990
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1059
991
  batch.state.status !== "done" && /* @__PURE__ */ jsx(
1060
992
  "button",
1061
993
  {
994
+ 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"}`,
1062
995
  onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
1063
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1064
996
  children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
1065
997
  }
1066
998
  ),
1067
999
  /* @__PURE__ */ jsx(
1068
1000
  "button",
1069
1001
  {
1002
+ 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"}`,
1070
1003
  onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
1071
- style: { padding: "10px 16px", borderRadius: 8, border: "none", background: batch.state.status === "done" ? "var(--silo-accent, #6366f1)" : "rgba(239,68,68,0.1)", color: batch.state.status === "done" ? "#fff" : "#ef4444", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1072
1004
  children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
1073
1005
  }
1074
1006
  )
1075
1007
  ] }),
1076
- batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
1077
- /* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
1078
- /* @__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!` })
1008
+ batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
1009
+ /* @__PURE__ */ jsx("span", { className: "text-xl", children: "\u{1F389}" }),
1010
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-green-700", children: batch.state.files.length === 1 ? "Arquivo enviado com sucesso!" : `${batch.state.files.length} arquivos enviados com sucesso!` })
1079
1011
  ] })
1080
1012
  ] }),
1081
- single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
1082
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
1083
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1084
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
1085
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
1013
+ single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
1014
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
1015
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1016
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Arquivo enviado com sucesso!" }),
1017
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(single.state.result.size) })
1086
1018
  ] }),
1087
- /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, children: "Enviar outro" })
1019
+ /* @__PURE__ */ jsx(
1020
+ "button",
1021
+ {
1022
+ 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",
1023
+ onClick: single.reset,
1024
+ children: "Enviar outro"
1025
+ }
1026
+ )
1088
1027
  ] }),
1089
- single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
1090
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
1091
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1092
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1093
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
1028
+ single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-red-500/[0.07] rounded-xl border border-red-500/20", children: [
1029
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
1030
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1031
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1032
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: single.state.error.message })
1094
1033
  ] }),
1095
- /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, children: "Tentar novamente" })
1034
+ /* @__PURE__ */ jsx(
1035
+ "button",
1036
+ {
1037
+ 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",
1038
+ onClick: single.reset,
1039
+ children: "Tentar novamente"
1040
+ }
1041
+ )
1096
1042
  ] })
1097
1043
  ] });
1098
1044
  }
@@ -1120,80 +1066,64 @@ function MediaUploader({
1120
1066
  const vars = themeToVars(t);
1121
1067
  const containerStyle = {
1122
1068
  ...vars,
1123
- display: "flex",
1124
- flexDirection: "column",
1125
- gap: "0",
1126
- width: "100%",
1127
- fontFamily: "var(--silo-font)",
1128
- border: "1px solid var(--silo-border)",
1129
- borderRadius: "var(--silo-radius)",
1130
- overflow: "hidden",
1131
- backgroundColor: "var(--silo-bg)",
1132
1069
  ...style
1133
1070
  };
1134
- return /* @__PURE__ */ jsxs("div", { className: `silo-media-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
1135
- /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "1px solid var(--silo-border)" }, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
1136
- "button",
1137
- {
1138
- onClick: () => setActiveTab(tab),
1139
- style: {
1140
- flex: 1,
1141
- padding: "10px 8px",
1142
- background: "none",
1143
- border: "none",
1144
- borderBottom: `2px solid ${activeTab === tab ? "var(--silo-accent)" : "transparent"}`,
1145
- cursor: "pointer",
1146
- fontSize: "13px",
1147
- fontWeight: activeTab === tab ? 600 : 400,
1148
- color: activeTab === tab ? "var(--silo-accent)" : "var(--silo-text-muted)",
1149
- transition: "color 0.15s, border-color 0.15s",
1150
- display: "flex",
1151
- alignItems: "center",
1152
- justifyContent: "center",
1153
- gap: "6px"
1154
- },
1155
- children: [
1156
- /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
1157
- /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
1158
- ]
1159
- },
1160
- tab
1161
- )) }),
1162
- /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
1163
- activeTab === "image" && /* @__PURE__ */ jsx(
1164
- ImageUploader,
1165
- {
1166
- ...shared,
1167
- ...imageProps,
1168
- ...theme !== void 0 && { theme },
1169
- ...onUpload !== void 0 && { onUpload },
1170
- ...onError !== void 0 && { onError }
1171
- }
1172
- ),
1173
- activeTab === "video" && /* @__PURE__ */ jsx(
1174
- VideoUploader,
1175
- {
1176
- ...shared,
1177
- ...videoProps,
1178
- ...theme !== void 0 && { theme },
1179
- ...onUpload !== void 0 && { onUpload },
1180
- ...onError !== void 0 && { onError }
1181
- }
1182
- ),
1183
- activeTab === "file" && /* @__PURE__ */ jsx(
1184
- FileUploader,
1185
- {
1186
- ...shared,
1187
- ...fileProps,
1188
- multiple: true,
1189
- ...theme !== void 0 && { theme },
1190
- ...onUpload !== void 0 && { onUpload },
1191
- ...onBatchUpload !== void 0 && { onBatchUpload },
1192
- ...onError !== void 0 && { onError }
1193
- }
1194
- )
1195
- ] })
1196
- ] });
1071
+ return /* @__PURE__ */ jsxs(
1072
+ "div",
1073
+ {
1074
+ className: `flex flex-col w-full border border-slate-200 rounded-xl overflow-hidden bg-slate-50${className ? ` ${className}` : ""}`,
1075
+ style: containerStyle,
1076
+ children: [
1077
+ /* @__PURE__ */ jsx("div", { className: "flex border-b border-slate-200", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
1078
+ "button",
1079
+ {
1080
+ onClick: () => setActiveTab(tab),
1081
+ className: `flex-1 flex items-center justify-center gap-1.5 py-2.5 px-2 bg-transparent border-none border-b-2 cursor-pointer text-[13px] transition-colors duration-150 ${activeTab === tab ? "border-b-indigo-500 font-semibold text-indigo-500" : "border-b-transparent font-normal text-slate-400 hover:text-slate-600"}`,
1082
+ style: { borderBottom: `2px solid ${activeTab === tab ? "#6366f1" : "transparent"}` },
1083
+ children: [
1084
+ /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
1085
+ /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
1086
+ ]
1087
+ },
1088
+ tab
1089
+ )) }),
1090
+ /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
1091
+ activeTab === "image" && /* @__PURE__ */ jsx(
1092
+ ImageUploader,
1093
+ {
1094
+ ...shared,
1095
+ ...imageProps,
1096
+ ...theme !== void 0 && { theme },
1097
+ ...onUpload !== void 0 && { onUpload },
1098
+ ...onError !== void 0 && { onError }
1099
+ }
1100
+ ),
1101
+ activeTab === "video" && /* @__PURE__ */ jsx(
1102
+ VideoUploader,
1103
+ {
1104
+ ...shared,
1105
+ ...videoProps,
1106
+ ...theme !== void 0 && { theme },
1107
+ ...onUpload !== void 0 && { onUpload },
1108
+ ...onError !== void 0 && { onError }
1109
+ }
1110
+ ),
1111
+ activeTab === "file" && /* @__PURE__ */ jsx(
1112
+ FileUploader,
1113
+ {
1114
+ ...shared,
1115
+ ...fileProps,
1116
+ multiple: true,
1117
+ ...theme !== void 0 && { theme },
1118
+ ...onUpload !== void 0 && { onUpload },
1119
+ ...onBatchUpload !== void 0 && { onBatchUpload },
1120
+ ...onError !== void 0 && { onError }
1121
+ }
1122
+ )
1123
+ ] })
1124
+ ]
1125
+ }
1126
+ );
1197
1127
  }
1198
1128
 
1199
1129
  export { MediaUploader };