@geekapps/silo-elements-nextjs 0.2.36 → 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 +145 -166
  2. package/dist/FileUploader.js.map +1 -1
  3. package/dist/ImageUploader.js +121 -100
  4. package/dist/ImageUploader.js.map +1 -1
  5. package/dist/MediaUploader.js +403 -359
  6. package/dist/MediaUploader.js.map +1 -1
  7. package/dist/VideoUploader.js +151 -125
  8. package/dist/VideoUploader.js.map +1 -1
  9. package/dist/components/DropZone.js +4 -4
  10. package/dist/components/DropZone.js.map +1 -1
  11. package/dist/components/ProgressBar.js +8 -2
  12. package/dist/components/ProgressBar.js.map +1 -1
  13. package/dist/index.d.ts +1 -1
  14. package/dist/index.js +581 -521
  15. package/dist/index.js.map +1 -1
  16. package/dist/styles.css +2 -1
  17. package/package.json +6 -6
  18. package/styles.css +2 -0
package/dist/index.js CHANGED
@@ -94,9 +94,9 @@ function DropZone({
94
94
  ...style
95
95
  };
96
96
  const cls = [
97
- "silo-dropzone",
98
- dragging ? "silo-dropzone--dragging" : "",
99
- disabled ? "silo-dropzone--disabled" : "",
97
+ "border-2 border-dashed border-slate-200 rounded-xl bg-slate-50 text-slate-900 cursor-pointer outline-none transition-colors duration-150",
98
+ dragging ? "border-indigo-500 bg-slate-100" : "hover:border-indigo-500 hover:bg-slate-100",
99
+ disabled ? "opacity-50 cursor-not-allowed" : "",
100
100
  className
101
101
  ].filter(Boolean).join(" ");
102
102
  return /* @__PURE__ */ jsxs(
@@ -125,7 +125,7 @@ function DropZone({
125
125
  type: "file",
126
126
  accept,
127
127
  multiple,
128
- style: { display: "none" },
128
+ className: "hidden",
129
129
  onChange: handleChange,
130
130
  disabled
131
131
  }
@@ -139,13 +139,19 @@ function ProgressBar({ progress, className = "", style }) {
139
139
  return /* @__PURE__ */ jsx(
140
140
  "div",
141
141
  {
142
- className: `silo-progress-track${className ? ` ${className}` : ""}`,
142
+ className: `h-1 rounded-full bg-slate-200 overflow-hidden${className ? ` ${className}` : ""}`,
143
143
  style,
144
144
  role: "progressbar",
145
145
  "aria-valuenow": progress,
146
146
  "aria-valuemin": 0,
147
147
  "aria-valuemax": 100,
148
- children: /* @__PURE__ */ jsx("div", { className: "silo-progress-fill", style: { width: `${progress}%` } })
148
+ children: /* @__PURE__ */ jsx(
149
+ "div",
150
+ {
151
+ className: "h-full rounded-full bg-indigo-500 transition-[width] duration-200 ease-linear",
152
+ style: { width: `${progress}%` }
153
+ }
154
+ )
149
155
  }
150
156
  );
151
157
  }
@@ -158,60 +164,38 @@ var FORMATS = [
158
164
  function ImageOptions({ value, onChange, style }) {
159
165
  const fmt = value.format ?? "webp";
160
166
  const optimize = value.optimize ?? true;
161
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, ...style }, children: [
167
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", style, children: [
162
168
  /* @__PURE__ */ jsxs("div", { children: [
163
- /* @__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" }),
164
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: FORMATS.map((f) => /* @__PURE__ */ jsx(
169
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Formato de sa\xEDda" }),
170
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
165
171
  "button",
166
172
  {
167
173
  type: "button",
168
174
  onClick: () => onChange({ ...value, format: f.value }),
169
175
  title: f.hint,
170
- style: {
171
- padding: "4px 12px",
172
- borderRadius: 6,
173
- border: `1px solid ${fmt === f.value ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
174
- background: fmt === f.value ? "var(--silo-accent, #6366f1)" : "transparent",
175
- color: fmt === f.value ? "#fff" : "var(--silo-text, #0f172a)",
176
- fontSize: 12,
177
- fontWeight: 600,
178
- cursor: "pointer"
179
- },
176
+ 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"}`,
180
177
  children: f.label
181
178
  },
182
179
  f.value
183
180
  )) })
184
181
  ] }),
185
- /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, children: [
182
+ /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
186
183
  /* @__PURE__ */ jsx(
187
184
  "span",
188
185
  {
189
186
  onClick: () => onChange({ ...value, optimize: !optimize }),
190
- style: {
191
- width: 36,
192
- height: 20,
193
- borderRadius: 10,
194
- background: optimize ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
195
- position: "relative",
196
- flexShrink: 0,
197
- transition: "background 0.15s",
198
- cursor: "pointer"
199
- },
200
- children: /* @__PURE__ */ jsx("span", { style: {
201
- position: "absolute",
202
- top: 2,
203
- left: optimize ? 18 : 2,
204
- width: 16,
205
- height: 16,
206
- borderRadius: "50%",
207
- background: "#fff",
208
- transition: "left 0.15s",
209
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
210
- } })
187
+ className: `relative w-9 h-5 rounded-full shrink-0 cursor-pointer transition-colors duration-150 ${optimize ? "bg-indigo-500" : "bg-slate-200"}`,
188
+ children: /* @__PURE__ */ jsx(
189
+ "span",
190
+ {
191
+ className: "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-[left] duration-150",
192
+ style: { left: optimize ? "18px" : "2px" }
193
+ }
194
+ )
211
195
  }
212
196
  ),
213
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text, #0f172a)", fontWeight: 500 }, children: "Otimizar tamanho" }),
214
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
197
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-900 font-medium", children: "Otimizar tamanho" }),
198
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
215
199
  ] })
216
200
  ] });
217
201
  }
@@ -289,19 +273,14 @@ function ImageUploader({
289
273
  }, [showImageOptions, image, imageOpts, doUpload, showPreview]);
290
274
  const containerStyle = {
291
275
  ...vars,
292
- display: "flex",
293
- flexDirection: "column",
294
- gap: "12px",
295
- width: "100%",
296
- fontFamily: "var(--silo-font)",
297
276
  ...style
298
277
  };
299
278
  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
300
279
  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
301
280
  const isPaused = state.status === "idle" && preview !== null && !stagedFile;
302
- if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
303
- if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
304
- return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
281
+ if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
282
+ if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
283
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
305
284
  /* @__PURE__ */ jsx(
306
285
  DropZone,
307
286
  {
@@ -312,15 +291,15 @@ function ImageUploader({
312
291
  disabled: disabled || isUploading,
313
292
  onFiles: handleFiles,
314
293
  style: { padding: "32px 24px", textAlign: "center" },
315
- children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
316
- /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
317
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar a imagem" })
318
- ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
319
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { 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" }) }),
294
+ children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
295
+ /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", className: "max-w-full max-h-[200px] rounded-lg object-contain" }),
296
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar a imagem" })
297
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
298
+ 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" }) }),
320
299
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
321
- /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste sua imagem aqui" }),
322
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
323
- maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
300
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste sua imagem aqui" }),
301
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
302
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
324
303
  "Tamanho m\xE1ximo: ",
325
304
  formatBytes(maxSize)
326
305
  ] })
@@ -329,61 +308,103 @@ function ImageUploader({
329
308
  }
330
309
  ),
331
310
  showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
332
- preview && /* @__PURE__ */ jsx("div", { className: "silo-section-body", style: { overflow: "hidden" }, 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)" } }) }),
333
- /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
334
- /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
311
+ 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" }) }),
312
+ /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
313
+ /* @__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" }),
335
314
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
336
315
  ] }),
337
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
338
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
339
- setStagedFile(null);
340
- setPreview(null);
341
- }, children: "Cancelar" }),
342
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
343
- const f = stagedFile;
344
- setStagedFile(null);
345
- void doUpload(f, imageOpts);
346
- }, children: "Enviar imagem" })
316
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
317
+ /* @__PURE__ */ jsx(
318
+ "button",
319
+ {
320
+ 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",
321
+ onClick: () => {
322
+ setStagedFile(null);
323
+ setPreview(null);
324
+ },
325
+ children: "Cancelar"
326
+ }
327
+ ),
328
+ /* @__PURE__ */ jsx(
329
+ "button",
330
+ {
331
+ 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",
332
+ onClick: () => {
333
+ const f = stagedFile;
334
+ setStagedFile(null);
335
+ void doUpload(f, imageOpts);
336
+ },
337
+ children: "Enviar imagem"
338
+ }
339
+ )
347
340
  ] })
348
341
  ] }),
349
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
350
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
351
- /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel(state.status, progress) }),
352
- /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
342
+ 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: [
343
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
344
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel(state.status, progress) }),
345
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
353
346
  progress,
354
347
  "%"
355
348
  ] })
356
349
  ] }),
357
350
  /* @__PURE__ */ jsx(ProgressBar, { progress })
358
351
  ] })),
359
- isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
360
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--success", style: { flex: 1 }, onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }), children: "\u25B6 Retomar envio" }),
361
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
362
- abort();
363
- setPreview(null);
364
- }, children: "Cancelar" })
352
+ isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
353
+ /* @__PURE__ */ jsx(
354
+ "button",
355
+ {
356
+ 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",
357
+ onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }),
358
+ children: "\u25B6 Retomar envio"
359
+ }
360
+ ),
361
+ /* @__PURE__ */ jsx(
362
+ "button",
363
+ {
364
+ 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",
365
+ onClick: () => {
366
+ abort();
367
+ setPreview(null);
368
+ },
369
+ children: "Cancelar"
370
+ }
371
+ )
365
372
  ] }),
366
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
367
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
368
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
369
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
370
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
373
+ 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: [
374
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
375
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
376
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Imagem enviada com sucesso!" }),
377
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
371
378
  ] }),
372
- /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
373
- reset();
374
- setPreview(null);
375
- }, children: "Enviar outra" })
379
+ /* @__PURE__ */ jsx(
380
+ "button",
381
+ {
382
+ 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",
383
+ onClick: () => {
384
+ reset();
385
+ setPreview(null);
386
+ },
387
+ children: "Enviar outra"
388
+ }
389
+ )
376
390
  ] }),
377
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
378
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
379
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
380
- /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
381
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
391
+ 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: [
392
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
393
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
394
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
395
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
382
396
  ] }),
383
- /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
384
- reset();
385
- setPreview(null);
386
- }, children: "Tentar novamente" })
397
+ /* @__PURE__ */ jsx(
398
+ "button",
399
+ {
400
+ 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",
401
+ onClick: () => {
402
+ reset();
403
+ setPreview(null);
404
+ },
405
+ children: "Tentar novamente"
406
+ }
407
+ )
387
408
  ] })
388
409
  ] });
389
410
  }
@@ -402,6 +423,27 @@ var RESOLUTION_LABELS = {
402
423
  "1440": "1440p",
403
424
  "2160": "4K"
404
425
  };
426
+ function optionBtnCls(active) {
427
+ 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"}`;
428
+ }
429
+ function Toggle({ checked, onToggle, label }) {
430
+ 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: [
431
+ /* @__PURE__ */ jsx(
432
+ "span",
433
+ {
434
+ 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"}`,
435
+ children: /* @__PURE__ */ jsx(
436
+ "span",
437
+ {
438
+ className: "absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-[left] duration-150",
439
+ style: { left: checked ? "16px" : "2px" }
440
+ }
441
+ )
442
+ }
443
+ ),
444
+ label
445
+ ] });
446
+ }
405
447
  function VideoOptions({ value, onChange, style }) {
406
448
  const codec = value.codec ?? "h264";
407
449
  const transcoding = value.transcoding ?? "auto";
@@ -418,76 +460,31 @@ function VideoOptions({ value, onChange, style }) {
418
460
  function toggleFeature(key) {
419
461
  onChange({ ...value, [key]: !value[key] });
420
462
  }
421
- const btn = (active) => ({
422
- padding: "4px 10px",
423
- borderRadius: 6,
424
- border: `1px solid ${active ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
425
- background: active ? "var(--silo-accent, #6366f1)" : "transparent",
426
- color: active ? "#fff" : "var(--silo-text, #0f172a)",
427
- fontSize: 12,
428
- fontWeight: 600,
429
- cursor: "pointer"
430
- });
431
- const toggle = (on) => ({
432
- display: "inline-flex",
433
- alignItems: "center",
434
- gap: 6,
435
- cursor: "pointer",
436
- userSelect: "none",
437
- fontSize: 12,
438
- color: "var(--silo-text, #0f172a)",
439
- fontWeight: 500
440
- });
441
- function Toggle({ checked, onToggle, label }) {
442
- return /* @__PURE__ */ jsxs("label", { style: toggle(), onClick: onToggle, children: [
443
- /* @__PURE__ */ jsx("span", { style: {
444
- width: 32,
445
- height: 18,
446
- borderRadius: 9,
447
- flexShrink: 0,
448
- background: checked ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
449
- position: "relative",
450
- transition: "background 0.15s",
451
- cursor: "pointer"
452
- }, children: /* @__PURE__ */ jsx("span", { style: {
453
- position: "absolute",
454
- top: 2,
455
- left: checked ? 16 : 2,
456
- width: 14,
457
- height: 14,
458
- borderRadius: "50%",
459
- background: "#fff",
460
- transition: "left 0.15s",
461
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
462
- } }) }),
463
- label
464
- ] });
465
- }
466
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, ...style }, children: [
463
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
467
464
  /* @__PURE__ */ jsxs("div", { children: [
468
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Codec" }),
469
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: CODECS.map((c) => /* @__PURE__ */ jsx(
465
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Codec" }),
466
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
470
467
  "button",
471
468
  {
472
469
  type: "button",
473
470
  title: c.hint,
474
471
  onClick: () => onChange({ ...value, codec: c.value }),
475
- style: btn(codec === c.value),
472
+ className: optionBtnCls(codec === c.value),
476
473
  children: c.label
477
474
  },
478
475
  c.value
479
476
  )) })
480
477
  ] }),
481
478
  /* @__PURE__ */ jsxs("div", { children: [
482
- /* @__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" }),
483
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
484
- /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: btn(isAuto), children: "Auto" }),
479
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Resolu\xE7\xF5es" }),
480
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
481
+ /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), className: optionBtnCls(isAuto), children: "Auto" }),
485
482
  RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
486
483
  "button",
487
484
  {
488
485
  type: "button",
489
486
  onClick: () => toggleRes(r),
490
- style: btn(!isAuto && selectedRes.includes(r)),
487
+ className: optionBtnCls(!isAuto && selectedRes.includes(r)),
491
488
  children: RESOLUTION_LABELS[r]
492
489
  },
493
490
  r
@@ -495,8 +492,8 @@ function VideoOptions({ value, onChange, style }) {
495
492
  ] })
496
493
  ] }),
497
494
  /* @__PURE__ */ jsxs("div", { children: [
498
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 8 }, children: "Recursos" }),
499
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
495
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-2", children: "Recursos" }),
496
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
500
497
  /* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
501
498
  /* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
502
499
  /* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => toggleFeature("autoCaptions"), label: "Legendas autom\xE1ticas (IA)" }),
@@ -573,19 +570,14 @@ function VideoUploader({
573
570
  }, [showVideoOptions, video, videoOpts, doUpload, showPreview]);
574
571
  const containerStyle = {
575
572
  ...vars,
576
- display: "flex",
577
- flexDirection: "column",
578
- gap: "12px",
579
- width: "100%",
580
- fontFamily: "var(--silo-font)",
581
573
  ...style
582
574
  };
583
575
  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
584
576
  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
585
577
  const isPaused = state.status === "idle" && preview !== null && !stagedFile;
586
- if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
587
- if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
588
- return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
578
+ if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
579
+ if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
580
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
589
581
  /* @__PURE__ */ jsx(
590
582
  DropZone,
591
583
  {
@@ -596,15 +588,15 @@ function VideoUploader({
596
588
  disabled: disabled || isUploading,
597
589
  onFiles: handleFiles,
598
590
  style: { padding: "32px 24px", textAlign: "center" },
599
- children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
600
- /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
601
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar o v\xEDdeo" })
602
- ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
603
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { 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" }) }),
591
+ children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
592
+ /* @__PURE__ */ jsx("video", { src: preview, className: "max-w-full max-h-[180px] rounded-lg", muted: true, playsInline: true }),
593
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar o v\xEDdeo" })
594
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
595
+ 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" }) }),
604
596
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
605
- /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste seu v\xEDdeo aqui" }),
606
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
607
- /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
597
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste seu v\xEDdeo aqui" }),
598
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
599
+ /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
608
600
  "MP4, MOV, MKV, WebM",
609
601
  maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
610
602
  ] })
@@ -613,70 +605,119 @@ function VideoUploader({
613
605
  }
614
606
  ),
615
607
  showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
616
- preview && /* @__PURE__ */ jsx("div", { className: "silo-section-body", style: { background: "#000", overflow: "hidden" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
617
- /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
618
- /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
608
+ 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 }) }),
609
+ /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
610
+ /* @__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" }),
619
611
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
620
612
  ] }),
621
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
622
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
623
- setStagedFile(null);
624
- setPreview(null);
625
- setVideoOpts(createInitialVideoOpts(video));
626
- }, children: "Cancelar" }),
627
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
628
- const f = stagedFile;
629
- setStagedFile(null);
630
- void doUpload(f, videoOpts);
631
- setVideoOpts(createInitialVideoOpts(video));
632
- }, children: "Enviar v\xEDdeo" })
613
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
614
+ /* @__PURE__ */ jsx(
615
+ "button",
616
+ {
617
+ 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",
618
+ onClick: () => {
619
+ setStagedFile(null);
620
+ setPreview(null);
621
+ setVideoOpts(createInitialVideoOpts(video));
622
+ },
623
+ children: "Cancelar"
624
+ }
625
+ ),
626
+ /* @__PURE__ */ jsx(
627
+ "button",
628
+ {
629
+ 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",
630
+ onClick: () => {
631
+ const f = stagedFile;
632
+ setStagedFile(null);
633
+ void doUpload(f, videoOpts);
634
+ setVideoOpts(createInitialVideoOpts(video));
635
+ },
636
+ children: "Enviar v\xEDdeo"
637
+ }
638
+ )
633
639
  ] })
634
640
  ] }),
635
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
636
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
637
- /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel2(state.status, progress) }),
638
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
639
- /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
641
+ 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: [
642
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
643
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel2(state.status, progress) }),
644
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
645
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
640
646
  progress,
641
647
  "%"
642
648
  ] }),
643
- /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "2px 8px" }, onClick: pause, children: "Pausar" })
649
+ /* @__PURE__ */ jsx(
650
+ "button",
651
+ {
652
+ 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",
653
+ onClick: pause,
654
+ children: "Pausar"
655
+ }
656
+ )
644
657
  ] })
645
658
  ] }),
646
659
  /* @__PURE__ */ jsx(ProgressBar, { progress }),
647
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 11 }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
660
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
648
661
  ] })),
649
- isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
650
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--success", style: { flex: 1 }, onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }), children: "\u25B6 Retomar envio" }),
651
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
652
- abort();
653
- setPreview(null);
654
- }, children: "Cancelar" })
662
+ isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
663
+ /* @__PURE__ */ jsx(
664
+ "button",
665
+ {
666
+ 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",
667
+ onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }),
668
+ children: "\u25B6 Retomar envio"
669
+ }
670
+ ),
671
+ /* @__PURE__ */ jsx(
672
+ "button",
673
+ {
674
+ 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",
675
+ onClick: () => {
676
+ abort();
677
+ setPreview(null);
678
+ },
679
+ children: "Cancelar"
680
+ }
681
+ )
655
682
  ] }),
656
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { flexDirection: "column", gap: 8, padding: "14px 16px" }, children: [
657
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
658
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
659
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
660
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
661
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
683
+ 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: [
684
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
685
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
686
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
687
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "V\xEDdeo enviado com sucesso!" }),
688
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
662
689
  ] }),
663
- /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
664
- reset();
665
- setPreview(null);
666
- }, children: "Enviar outro" })
690
+ /* @__PURE__ */ jsx(
691
+ "button",
692
+ {
693
+ 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",
694
+ onClick: () => {
695
+ reset();
696
+ setPreview(null);
697
+ },
698
+ children: "Enviar outro"
699
+ }
700
+ )
667
701
  ] }),
668
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, 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." })
702
+ /* @__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." })
669
703
  ] }),
670
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
671
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
672
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
673
- /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
674
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
704
+ 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: [
705
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
706
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
707
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
708
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
675
709
  ] }),
676
- /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
677
- reset();
678
- setPreview(null);
679
- }, children: "Tentar novamente" })
710
+ /* @__PURE__ */ jsx(
711
+ "button",
712
+ {
713
+ 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",
714
+ onClick: () => {
715
+ reset();
716
+ setPreview(null);
717
+ },
718
+ children: "Tentar novamente"
719
+ }
720
+ )
680
721
  ] })
681
722
  ] });
682
723
  }
@@ -729,11 +770,6 @@ function FileUploader({
729
770
  const vars = themeToVars(t);
730
771
  const containerStyle = {
731
772
  ...vars,
732
- display: "flex",
733
- flexDirection: "column",
734
- gap: "12px",
735
- width: "100%",
736
- fontFamily: "var(--silo-font)",
737
773
  ...style
738
774
  };
739
775
  const single = useMultipartUpload(bucket);
@@ -810,9 +846,9 @@ function FileUploader({
810
846
  const isBatchUploading = batch.state.status === "uploading" || batch.state.status === "preparing";
811
847
  const isUploading = isSingleUploading || isBatchUploading;
812
848
  const singleProgress = single.state.status === "uploading" ? single.state.progress : single.state.status === "completing" ? 99 : 0;
813
- if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(single.state.error, single.reset) });
814
- if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(single.state.result) });
815
- return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
849
+ 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) });
850
+ 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) });
851
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
816
852
  !isBatch && !staged && /* @__PURE__ */ jsx(
817
853
  DropZone,
818
854
  {
@@ -824,12 +860,12 @@ function FileUploader({
824
860
  disabled: disabled || isUploading,
825
861
  onFiles: handleFiles,
826
862
  style: { padding: "28px 24px", textAlign: "center" },
827
- children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
828
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { 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" }) }),
863
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
864
+ 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" }) }),
829
865
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
830
- /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
831
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
832
- maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
866
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
867
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
868
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
833
869
  "Tamanho m\xE1ximo: ",
834
870
  formatBytes(maxSize)
835
871
  ] })
@@ -837,11 +873,11 @@ function FileUploader({
837
873
  ] })
838
874
  }
839
875
  ),
840
- staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
841
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 13, fontWeight: 600, marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
842
- staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "silo-card", children: [
843
- /* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
844
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
876
+ staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
877
+ /* @__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` }),
878
+ 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: [
879
+ /* @__PURE__ */ jsx("span", { className: "text-xl shrink-0", children: getFileIcon(f.type) }),
880
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
845
881
  editingIndex === i ? /* @__PURE__ */ jsx(
846
882
  "input",
847
883
  {
@@ -859,30 +895,28 @@ function FileUploader({
859
895
  }
860
896
  if (e.key === "Escape") setEditingIndex(null);
861
897
  },
862
- 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, #f8fafc)", color: "var(--silo-text, #0f172a)", fontFamily: "var(--silo-font, inherit)" }
898
+ 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"
863
899
  }
864
900
  ) : /* @__PURE__ */ jsxs(
865
901
  "div",
866
902
  {
867
- className: "silo-text",
868
- style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
903
+ className: `text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap ${allowRename ? "cursor-text" : "cursor-default"}`,
869
904
  onClick: () => allowRename && setEditingIndex(i),
870
905
  title: allowRename ? "Clique para renomear" : void 0,
871
906
  children: [
872
907
  effectiveName(i, staged),
873
- renames.has(i) && /* @__PURE__ */ jsx("span", { className: "silo-text-accent", style: { marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
908
+ renames.has(i) && /* @__PURE__ */ jsx("span", { className: "text-indigo-500 ml-1.5 text-[10px] font-bold", children: "renomeado" })
874
909
  ]
875
910
  }
876
911
  ),
877
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11, marginTop: 1 }, children: formatBytes(f.size) })
912
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400 mt-0.5", children: formatBytes(f.size) })
878
913
  ] }),
879
914
  allowRename && /* @__PURE__ */ jsx(
880
915
  "button",
881
916
  {
882
917
  onClick: () => setEditingIndex(i),
883
918
  title: "Renomear",
884
- className: "silo-text-muted",
885
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
919
+ className: "text-slate-400 bg-none border-none cursor-pointer text-sm px-1 shrink-0 hover:text-slate-600",
886
920
  children: "\u270F\uFE0F"
887
921
  }
888
922
  ),
@@ -894,63 +928,75 @@ function FileUploader({
894
928
  if (next.length === 0) clearStaging();
895
929
  else setStaged(next);
896
930
  },
897
- className: "silo-text-muted",
898
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
931
+ className: "text-slate-400 bg-none border-none cursor-pointer text-lg px-1 leading-none shrink-0 hover:text-slate-600",
899
932
  children: "\xD7"
900
933
  }
901
934
  )
902
935
  ] }, i)),
903
- showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
904
- /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
936
+ showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
937
+ /* @__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" }),
905
938
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
906
939
  ] }),
907
- showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
908
- /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
940
+ showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
941
+ /* @__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" }),
909
942
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
910
943
  ] }),
911
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
912
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: clearStaging, children: "Cancelar" }),
913
- /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: handleConfirmUpload, children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo" })
944
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
945
+ /* @__PURE__ */ jsx(
946
+ "button",
947
+ {
948
+ 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",
949
+ onClick: clearStaging,
950
+ children: "Cancelar"
951
+ }
952
+ ),
953
+ /* @__PURE__ */ jsx(
954
+ "button",
955
+ {
956
+ 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",
957
+ onClick: handleConfirmUpload,
958
+ children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
959
+ }
960
+ )
914
961
  ] })
915
962
  ] }),
916
- isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
917
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
918
- /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel3(single.state.status, singleProgress) }),
919
- /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
963
+ 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: [
964
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
965
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel3(single.state.status, singleProgress) }),
966
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
920
967
  singleProgress,
921
968
  "%"
922
969
  ] })
923
970
  ] }),
924
971
  /* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
925
972
  ] })),
926
- isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
973
+ isBatch && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
927
974
  batch.state.files.map((f, i) => {
928
975
  const st = f.status;
929
976
  const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
930
977
  const isPaused = st.status === "paused";
931
978
  const isDone = st.status === "done";
932
979
  const isErr = st.status === "error";
933
- return /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", alignItems: "stretch", gap: 8, padding: "12px 14px" }, children: [
934
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
935
- /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
936
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
937
- /* @__PURE__ */ jsx("div", { className: "silo-text", style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
938
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11 }, children: formatBytes(f.file.size) })
980
+ 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: [
981
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
982
+ /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: getFileIcon(f.file.type) }),
983
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
984
+ /* @__PURE__ */ jsx("div", { className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: f.file.name }),
985
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400", children: formatBytes(f.file.size) })
939
986
  ] }),
940
- isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
941
- isErr && /* @__PURE__ */ jsx("span", { className: "silo-text-error", style: { fontSize: 12, fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
942
- !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: isPaused ? "silo-text-muted" : "silo-text-accent", style: { fontSize: 12, fontWeight: 700, flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
943
- !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--success", style: { fontSize: 11, padding: "3px 10px" }, onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "3px 10px" }, onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
987
+ isDone && /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: "\u2705" }),
988
+ isErr && /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold text-red-500 shrink-0", children: "Erro no envio" }),
989
+ !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: `text-[12px] font-bold shrink-0 ${isPaused ? "text-slate-400" : "text-indigo-500"}`, children: isPaused ? "Pausado" : `${p}%` }),
990
+ !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)
944
991
  ] }),
945
992
  !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
946
993
  ] }, i);
947
994
  }),
948
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
995
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
949
996
  batch.state.status !== "done" && /* @__PURE__ */ jsx(
950
997
  "button",
951
998
  {
952
- className: `silo-btn silo-btn--lg${isBatchUploading ? " silo-btn--warning" : " silo-btn--success"}`,
953
- style: { flex: 1 },
999
+ 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"}`,
954
1000
  onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
955
1001
  children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
956
1002
  }
@@ -958,32 +1004,46 @@ function FileUploader({
958
1004
  /* @__PURE__ */ jsx(
959
1005
  "button",
960
1006
  {
961
- className: `silo-btn silo-btn--lg${batch.state.status === "done" ? " silo-btn--primary" : " silo-btn--danger"}`,
1007
+ 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"}`,
962
1008
  onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
963
1009
  children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
964
1010
  }
965
1011
  )
966
1012
  ] }),
967
- batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 10 }, children: [
968
- /* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
969
- /* @__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!` })
1013
+ 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: [
1014
+ /* @__PURE__ */ jsx("span", { className: "text-xl", children: "\u{1F389}" }),
1015
+ /* @__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!` })
970
1016
  ] })
971
1017
  ] }),
972
- single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
973
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
974
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
975
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
976
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(single.state.result.size) })
1018
+ 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: [
1019
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
1020
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1021
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Arquivo enviado com sucesso!" }),
1022
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(single.state.result.size) })
977
1023
  ] }),
978
- /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: single.reset, children: "Enviar outro" })
1024
+ /* @__PURE__ */ jsx(
1025
+ "button",
1026
+ {
1027
+ 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",
1028
+ onClick: single.reset,
1029
+ children: "Enviar outro"
1030
+ }
1031
+ )
979
1032
  ] }),
980
- single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
981
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
982
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
983
- /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
984
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: single.state.error.message })
1033
+ 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: [
1034
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
1035
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1036
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1037
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: single.state.error.message })
985
1038
  ] }),
986
- /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: single.reset, children: "Tentar novamente" })
1039
+ /* @__PURE__ */ jsx(
1040
+ "button",
1041
+ {
1042
+ 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",
1043
+ onClick: single.reset,
1044
+ children: "Tentar novamente"
1045
+ }
1046
+ )
987
1047
  ] })
988
1048
  ] });
989
1049
  }
@@ -1011,80 +1071,64 @@ function MediaUploader({
1011
1071
  const vars = themeToVars(t);
1012
1072
  const containerStyle = {
1013
1073
  ...vars,
1014
- display: "flex",
1015
- flexDirection: "column",
1016
- gap: "0",
1017
- width: "100%",
1018
- fontFamily: "var(--silo-font)",
1019
- border: "1px solid var(--silo-border)",
1020
- borderRadius: "var(--silo-radius)",
1021
- overflow: "hidden",
1022
- backgroundColor: "var(--silo-bg)",
1023
1074
  ...style
1024
1075
  };
1025
- return /* @__PURE__ */ jsxs("div", { className: `silo-media-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
1026
- /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "1px solid var(--silo-border)" }, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
1027
- "button",
1028
- {
1029
- onClick: () => setActiveTab(tab),
1030
- style: {
1031
- flex: 1,
1032
- padding: "10px 8px",
1033
- background: "none",
1034
- border: "none",
1035
- borderBottom: `2px solid ${activeTab === tab ? "var(--silo-accent)" : "transparent"}`,
1036
- cursor: "pointer",
1037
- fontSize: "13px",
1038
- fontWeight: activeTab === tab ? 600 : 400,
1039
- color: activeTab === tab ? "var(--silo-accent)" : "var(--silo-text-muted)",
1040
- transition: "color 0.15s, border-color 0.15s",
1041
- display: "flex",
1042
- alignItems: "center",
1043
- justifyContent: "center",
1044
- gap: "6px"
1045
- },
1046
- children: [
1047
- /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
1048
- /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
1049
- ]
1050
- },
1051
- tab
1052
- )) }),
1053
- /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
1054
- activeTab === "image" && /* @__PURE__ */ jsx(
1055
- ImageUploader,
1056
- {
1057
- ...shared,
1058
- ...imageProps,
1059
- ...theme !== void 0 && { theme },
1060
- ...onUpload !== void 0 && { onUpload },
1061
- ...onError !== void 0 && { onError }
1062
- }
1063
- ),
1064
- activeTab === "video" && /* @__PURE__ */ jsx(
1065
- VideoUploader,
1066
- {
1067
- ...shared,
1068
- ...videoProps,
1069
- ...theme !== void 0 && { theme },
1070
- ...onUpload !== void 0 && { onUpload },
1071
- ...onError !== void 0 && { onError }
1072
- }
1073
- ),
1074
- activeTab === "file" && /* @__PURE__ */ jsx(
1075
- FileUploader,
1076
- {
1077
- ...shared,
1078
- ...fileProps,
1079
- multiple: true,
1080
- ...theme !== void 0 && { theme },
1081
- ...onUpload !== void 0 && { onUpload },
1082
- ...onBatchUpload !== void 0 && { onBatchUpload },
1083
- ...onError !== void 0 && { onError }
1084
- }
1085
- )
1086
- ] })
1087
- ] });
1076
+ return /* @__PURE__ */ jsxs(
1077
+ "div",
1078
+ {
1079
+ className: `flex flex-col w-full border border-slate-200 rounded-xl overflow-hidden bg-slate-50${className ? ` ${className}` : ""}`,
1080
+ style: containerStyle,
1081
+ children: [
1082
+ /* @__PURE__ */ jsx("div", { className: "flex border-b border-slate-200", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
1083
+ "button",
1084
+ {
1085
+ onClick: () => setActiveTab(tab),
1086
+ 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"}`,
1087
+ style: { borderBottom: `2px solid ${activeTab === tab ? "#6366f1" : "transparent"}` },
1088
+ children: [
1089
+ /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
1090
+ /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
1091
+ ]
1092
+ },
1093
+ tab
1094
+ )) }),
1095
+ /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
1096
+ activeTab === "image" && /* @__PURE__ */ jsx(
1097
+ ImageUploader,
1098
+ {
1099
+ ...shared,
1100
+ ...imageProps,
1101
+ ...theme !== void 0 && { theme },
1102
+ ...onUpload !== void 0 && { onUpload },
1103
+ ...onError !== void 0 && { onError }
1104
+ }
1105
+ ),
1106
+ activeTab === "video" && /* @__PURE__ */ jsx(
1107
+ VideoUploader,
1108
+ {
1109
+ ...shared,
1110
+ ...videoProps,
1111
+ ...theme !== void 0 && { theme },
1112
+ ...onUpload !== void 0 && { onUpload },
1113
+ ...onError !== void 0 && { onError }
1114
+ }
1115
+ ),
1116
+ activeTab === "file" && /* @__PURE__ */ jsx(
1117
+ FileUploader,
1118
+ {
1119
+ ...shared,
1120
+ ...fileProps,
1121
+ multiple: true,
1122
+ ...theme !== void 0 && { theme },
1123
+ ...onUpload !== void 0 && { onUpload },
1124
+ ...onBatchUpload !== void 0 && { onBatchUpload },
1125
+ ...onError !== void 0 && { onError }
1126
+ }
1127
+ )
1128
+ ] })
1129
+ ]
1130
+ }
1131
+ );
1088
1132
  }
1089
1133
  var AUTO_QUALITY = {
1090
1134
  id: "auto",
@@ -2402,7 +2446,7 @@ function formatTime(seconds) {
2402
2446
  }
2403
2447
  return `${minutes}:${String(secs).padStart(2, "0")}`;
2404
2448
  }
2405
- var RADIUS = { full: "50%", md: "12px", sm: "6px" };
2449
+ var RADIUS = { full: "9999px", md: "12px", sm: "6px" };
2406
2450
  function Avatar({
2407
2451
  fileKey,
2408
2452
  bucket,
@@ -2415,35 +2459,41 @@ function Avatar({
2415
2459
  }) {
2416
2460
  const { url } = useSignedUrl(fileKey ?? null);
2417
2461
  const [error, setError] = useState(false);
2418
- const radius = RADIUS[shape];
2419
2462
  const base = {
2420
2463
  width: size,
2421
2464
  height: size,
2422
- borderRadius: radius,
2423
- overflow: "hidden",
2424
- display: "inline-flex",
2425
- alignItems: "center",
2426
- justifyContent: "center",
2427
- flexShrink: 0,
2465
+ borderRadius: RADIUS[shape],
2428
2466
  fontSize: size * 0.38,
2429
- fontWeight: 600,
2430
- userSelect: "none",
2431
- background: "var(--silo-bg, #e2e8f0)",
2432
- color: "var(--silo-text-muted, #64748b)",
2467
+ flexShrink: 0,
2433
2468
  ...style
2434
2469
  };
2435
2470
  if (url && !error) {
2436
- return /* @__PURE__ */ jsx("span", { className, style: base, children: /* @__PURE__ */ jsx(
2437
- "img",
2471
+ return /* @__PURE__ */ jsx(
2472
+ "span",
2438
2473
  {
2439
- src: url,
2440
- alt,
2441
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
2442
- onError: () => setError(true)
2474
+ className: `overflow-hidden inline-flex items-center justify-center bg-slate-200 text-slate-500 select-none font-semibold ${className}`,
2475
+ style: base,
2476
+ children: /* @__PURE__ */ jsx(
2477
+ "img",
2478
+ {
2479
+ src: url,
2480
+ alt,
2481
+ className: "w-full h-full object-cover block",
2482
+ onError: () => setError(true)
2483
+ }
2484
+ )
2443
2485
  }
2444
- ) });
2486
+ );
2445
2487
  }
2446
- return /* @__PURE__ */ jsx("span", { className, style: base, "aria-label": alt, children: initials ? initials.slice(0, 2).toUpperCase() : "?" });
2488
+ return /* @__PURE__ */ jsx(
2489
+ "span",
2490
+ {
2491
+ className: `overflow-hidden inline-flex items-center justify-center bg-slate-200 text-slate-500 select-none font-semibold ${className}`,
2492
+ style: base,
2493
+ "aria-label": alt,
2494
+ children: initials ? initials.slice(0, 2).toUpperCase() : "?"
2495
+ }
2496
+ );
2447
2497
  }
2448
2498
  function Thumbnail({
2449
2499
  fileKey,
@@ -2453,7 +2503,7 @@ function Thumbnail({
2453
2503
  width = "100%",
2454
2504
  height = 160,
2455
2505
  fit = "cover",
2456
- borderRadius = "var(--silo-radius, 12px)",
2506
+ borderRadius = "12px",
2457
2507
  placeholder,
2458
2508
  className = "",
2459
2509
  style,
@@ -2472,16 +2522,16 @@ function Thumbnail({
2472
2522
  display: "flex",
2473
2523
  alignItems: "center",
2474
2524
  justifyContent: "center",
2475
- background: "var(--silo-bg, #f1f5f9)",
2525
+ background: "#f1f5f9",
2476
2526
  position: "relative",
2477
2527
  flexShrink: 0,
2478
2528
  ...style
2479
2529
  };
2480
2530
  if (loading) {
2481
- return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: placeholder ?? /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted, #94a3b8)", fontSize: 12 }, children: "..." }) });
2531
+ return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: placeholder ?? /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "..." }) });
2482
2532
  }
2483
2533
  if (error || !url) {
2484
- return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 28 }, children: isVideo ? "\u{1F3AC}" : "\u{1F5BC}\uFE0F" }) });
2534
+ return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx("span", { className: "text-[28px]", children: isVideo ? "\u{1F3AC}" : "\u{1F5BC}\uFE0F" }) });
2485
2535
  }
2486
2536
  if (isVideo) {
2487
2537
  return /* @__PURE__ */ jsxs("span", { className, style: wrapper, children: [
@@ -2495,20 +2545,7 @@ function Thumbnail({
2495
2545
  onError: () => setError(true)
2496
2546
  }
2497
2547
  ),
2498
- /* @__PURE__ */ jsx(
2499
- "span",
2500
- {
2501
- style: {
2502
- position: "absolute",
2503
- inset: 0,
2504
- display: "flex",
2505
- alignItems: "center",
2506
- justifyContent: "center",
2507
- pointerEvents: "none"
2508
- },
2509
- children: /* @__PURE__ */ jsx("span", { style: { fontSize: 24, opacity: 0.85 }, children: "\u25B6" })
2510
- }
2511
- )
2548
+ /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("span", { className: "text-[24px] opacity-85", children: "\u25B6" }) })
2512
2549
  ] });
2513
2550
  }
2514
2551
  return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx(
@@ -2545,15 +2582,11 @@ function Background({
2545
2582
  "div",
2546
2583
  {
2547
2584
  "aria-hidden": true,
2548
- style: {
2549
- position: "absolute",
2550
- inset: 0,
2551
- background: overlay,
2552
- pointerEvents: "none"
2553
- }
2585
+ className: "absolute inset-0 pointer-events-none",
2586
+ style: { background: overlay }
2554
2587
  }
2555
2588
  ),
2556
- children && /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1 }, children })
2589
+ children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
2557
2590
  ] });
2558
2591
  }
2559
2592
  function FileIcon({
@@ -2571,47 +2604,28 @@ function FileIcon({
2571
2604
  return /* @__PURE__ */ jsxs(
2572
2605
  "span",
2573
2606
  {
2574
- className,
2575
- style: {
2576
- display: "inline-flex",
2577
- flexDirection: "column",
2578
- alignItems: "center",
2579
- gap: 4,
2580
- fontFamily: "var(--silo-font, inherit)",
2581
- ...style
2582
- },
2607
+ className: `inline-flex flex-col items-center gap-1 ${className}`,
2608
+ style,
2583
2609
  children: [
2584
2610
  /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize, lineHeight: 1 }, children: icon }),
2585
2611
  ext && /* @__PURE__ */ jsx(
2586
2612
  "span",
2587
2613
  {
2588
- style: {
2589
- fontSize: iconSize * 0.22,
2590
- fontWeight: 700,
2591
- color: "var(--silo-text-muted, #64748b)",
2592
- letterSpacing: "0.04em",
2593
- textTransform: "uppercase"
2594
- },
2614
+ className: "font-bold text-slate-500 uppercase tracking-wide",
2615
+ style: { fontSize: iconSize * 0.22 },
2595
2616
  children: ext
2596
2617
  }
2597
2618
  ),
2598
2619
  showName && name && /* @__PURE__ */ jsx(
2599
2620
  "span",
2600
2621
  {
2601
- style: {
2602
- fontSize: 12,
2603
- color: "var(--silo-text, #0f172a)",
2604
- maxWidth: iconSize * 3,
2605
- overflow: "hidden",
2606
- textOverflow: "ellipsis",
2607
- whiteSpace: "nowrap",
2608
- textAlign: "center"
2609
- },
2622
+ className: "text-xs text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap text-center",
2623
+ style: { maxWidth: iconSize * 3 },
2610
2624
  title: name,
2611
2625
  children: name
2612
2626
  }
2613
2627
  ),
2614
- showSize && size !== void 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #64748b)" }, children: formatBytes(size) })
2628
+ showSize && size !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-500", children: formatBytes(size) })
2615
2629
  ]
2616
2630
  }
2617
2631
  );
@@ -2628,12 +2642,12 @@ var STATUS_LABEL = {
2628
2642
  CANCELLED: "Cancelled"
2629
2643
  };
2630
2644
  var STATUS_COLOR = {
2631
- READY: "var(--silo-success, #22c55e)",
2632
- FAILED: "var(--silo-error, #ef4444)",
2633
- CANCELLED: "var(--silo-error, #ef4444)"
2645
+ READY: "#22c55e",
2646
+ FAILED: "#ef4444",
2647
+ CANCELLED: "#ef4444"
2634
2648
  };
2635
2649
  function statusColor(status) {
2636
- return STATUS_COLOR[status] ?? "var(--silo-accent, #6366f1)";
2650
+ return STATUS_COLOR[status] ?? "#6366f1";
2637
2651
  }
2638
2652
  function isProcessing(status) {
2639
2653
  return ["UPLOADING", "INGESTING", "QUEUED", "PROCESSING", "SYNCING"].includes(status);
@@ -2650,7 +2664,14 @@ function FileCard({
2650
2664
  }) {
2651
2665
  const { file, loading } = useFileStatus(fileId, { pollInterval });
2652
2666
  if (loading && !file) {
2653
- return /* @__PURE__ */ jsx("div", { className: `silo-file-card${className ? ` ${className}` : ""}`, style: { padding: 16, ...style }, children: /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "Loading..." }) });
2667
+ return /* @__PURE__ */ jsx(
2668
+ "div",
2669
+ {
2670
+ className: `flex flex-col rounded-xl border border-slate-200 bg-slate-50 overflow-hidden w-[220px] p-4 ${className}`,
2671
+ style,
2672
+ children: /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "Loading..." })
2673
+ }
2674
+ );
2654
2675
  }
2655
2676
  if (!file) return null;
2656
2677
  const status = file.status;
@@ -2659,61 +2680,89 @@ function FileCard({
2659
2680
  const showThumb = isImg || isVid;
2660
2681
  const progress = file.progress ?? null;
2661
2682
  const ext = file.originalName.split(".").pop()?.toUpperCase();
2662
- return /* @__PURE__ */ jsxs("div", { className: `silo-file-card${className ? ` ${className}` : ""}`, style, children: [
2663
- /* @__PURE__ */ jsxs("div", { className: "silo-file-card__thumb-area", children: [
2664
- showThumb ? /* @__PURE__ */ jsx(
2665
- Thumbnail,
2666
- {
2667
- fileKey: file.key,
2668
- mimeType: file.mimeType,
2669
- width: "100%",
2670
- height: 130,
2671
- borderRadius: "0",
2672
- style: { display: "block" }
2673
- }
2674
- ) : /* @__PURE__ */ jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 44 }) }),
2675
- /* @__PURE__ */ jsx(
2676
- "span",
2677
- {
2678
- className: "silo-file-card__badge silo-file-card__badge--status",
2679
- style: { color: statusColor(status) },
2680
- children: STATUS_LABEL[status] ?? status
2681
- }
2682
- ),
2683
- ext && /* @__PURE__ */ jsx("span", { className: "silo-file-card__badge silo-file-card__badge--ext", children: ext })
2684
- ] }),
2685
- /* @__PURE__ */ jsxs("div", { className: "silo-file-card__body", children: [
2686
- /* @__PURE__ */ jsx("span", { className: "silo-file-card__name", title: file.originalName, children: file.originalName }),
2687
- /* @__PURE__ */ jsxs("span", { className: "silo-file-card__meta", children: [
2688
- formatBytes(file.size),
2689
- file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
2690
- file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
2691
- ] }),
2692
- isProcessing(status) && /* @__PURE__ */ jsxs("div", { style: { marginTop: 4 }, children: [
2693
- /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
2694
- /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 10, marginTop: 2, display: "block" }, children: [
2695
- STATUS_LABEL[status],
2696
- progress != null ? ` \xB7 ${progress}%` : ""
2683
+ return /* @__PURE__ */ jsxs(
2684
+ "div",
2685
+ {
2686
+ className: `flex flex-col rounded-xl border border-slate-200 bg-slate-50 overflow-hidden w-[220px] ${className}`,
2687
+ style,
2688
+ children: [
2689
+ /* @__PURE__ */ jsxs("div", { className: "relative h-[130px] bg-slate-100 shrink-0", children: [
2690
+ showThumb ? /* @__PURE__ */ jsx(
2691
+ Thumbnail,
2692
+ {
2693
+ fileKey: file.key,
2694
+ mimeType: file.mimeType,
2695
+ width: "100%",
2696
+ height: 130,
2697
+ borderRadius: "0",
2698
+ style: { display: "block" }
2699
+ }
2700
+ ) : /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 44 }) }),
2701
+ /* @__PURE__ */ jsx(
2702
+ "span",
2703
+ {
2704
+ className: "absolute top-2 right-2 text-[10px] font-bold tracking-[0.05em] py-0.5 px-2 rounded-full backdrop-blur-sm bg-black/55",
2705
+ style: { color: statusColor(status) },
2706
+ children: STATUS_LABEL[status] ?? status
2707
+ }
2708
+ ),
2709
+ ext && /* @__PURE__ */ jsx("span", { className: "absolute top-2 left-2 text-[9px] font-bold tracking-[0.06em] py-0.5 px-1.5 rounded-md backdrop-blur-sm bg-black/45 text-white uppercase", children: ext })
2710
+ ] }),
2711
+ /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-1", children: [
2712
+ /* @__PURE__ */ jsx(
2713
+ "span",
2714
+ {
2715
+ className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap",
2716
+ title: file.originalName,
2717
+ children: file.originalName
2718
+ }
2719
+ ),
2720
+ /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-slate-400", children: [
2721
+ formatBytes(file.size),
2722
+ file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
2723
+ file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
2724
+ ] }),
2725
+ isProcessing(status) && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
2726
+ /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
2727
+ /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 mt-0.5 block", children: [
2728
+ STATUS_LABEL[status],
2729
+ progress != null ? ` \xB7 ${progress}%` : ""
2730
+ ] })
2731
+ ] }),
2732
+ actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 mt-1.5 flex-wrap", children: [
2733
+ actions.includes("preview") && onPreview && /* @__PURE__ */ jsx(
2734
+ "button",
2735
+ {
2736
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
2737
+ onClick: () => onPreview(fileId),
2738
+ children: "Preview"
2739
+ }
2740
+ ),
2741
+ actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
2742
+ "button",
2743
+ {
2744
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
2745
+ onClick: () => {
2746
+ const url = `${file.key}`;
2747
+ navigator.clipboard.writeText(url).catch(() => void 0);
2748
+ onCopyUrl(url);
2749
+ },
2750
+ children: "Copy URL"
2751
+ }
2752
+ ),
2753
+ actions.includes("delete") && onDelete && /* @__PURE__ */ jsx(
2754
+ "button",
2755
+ {
2756
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border-transparent bg-red-500/10 text-red-500 cursor-pointer transition-colors hover:bg-red-500/20",
2757
+ onClick: () => onDelete(fileId),
2758
+ children: "Delete"
2759
+ }
2760
+ )
2761
+ ] })
2697
2762
  ] })
2698
- ] }),
2699
- actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "silo-file-card__actions", children: [
2700
- actions.includes("preview") && onPreview && /* @__PURE__ */ jsx("button", { className: "silo-btn", onClick: () => onPreview(fileId), children: "Preview" }),
2701
- actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
2702
- "button",
2703
- {
2704
- className: "silo-btn",
2705
- onClick: () => {
2706
- const url = `${file.key}`;
2707
- navigator.clipboard.writeText(url).catch(() => void 0);
2708
- onCopyUrl(url);
2709
- },
2710
- children: "Copy URL"
2711
- }
2712
- ),
2713
- actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--danger", onClick: () => onDelete(fileId), children: "Delete" })
2714
- ] })
2715
- ] })
2716
- ] });
2763
+ ]
2764
+ }
2765
+ );
2717
2766
  }
2718
2767
  var STATUS_LABEL2 = {
2719
2768
  CREATED: "Created",
@@ -2750,11 +2799,18 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2750
2799
  const isVid = file?.mimeType.startsWith("video/");
2751
2800
  const progress = file?.progress ?? null;
2752
2801
  return /* @__PURE__ */ jsxs(Fragment, { children: [
2753
- /* @__PURE__ */ jsx("div", { className: "silo-file-preview-backdrop", onClick: onClose, "aria-hidden": true }),
2802
+ /* @__PURE__ */ jsx(
2803
+ "div",
2804
+ {
2805
+ className: "fixed inset-0 z-[1000] bg-black/60 backdrop-blur-md",
2806
+ onClick: onClose,
2807
+ "aria-hidden": true
2808
+ }
2809
+ ),
2754
2810
  /* @__PURE__ */ jsxs(
2755
2811
  "div",
2756
2812
  {
2757
- className: "silo-file-preview",
2813
+ className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1001] w-[min(92vw,560px)] max-h-[90vh] flex flex-col rounded-2xl bg-white shadow-[0_24px_80px_rgba(0,0,0,0.35)] overflow-hidden",
2758
2814
  role: "dialog",
2759
2815
  "aria-modal": true,
2760
2816
  "aria-label": file?.originalName ?? "File preview",
@@ -2762,18 +2818,26 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2762
2818
  if (e.key === "Escape") onClose();
2763
2819
  },
2764
2820
  children: [
2765
- /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__header", children: [
2766
- /* @__PURE__ */ jsx("span", { className: "silo-file-preview__title", children: file?.originalName ?? "Loading..." }),
2767
- /* @__PURE__ */ jsx("button", { className: "silo-file-preview__close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
2821
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-slate-200", children: [
2822
+ /* @__PURE__ */ jsx("span", { className: "flex-1 text-[14px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: file?.originalName ?? "Loading..." }),
2823
+ /* @__PURE__ */ jsx(
2824
+ "button",
2825
+ {
2826
+ className: "bg-none border-none cursor-pointer text-base text-slate-400 leading-none p-0.5 px-1 shrink-0 hover:text-slate-600 transition-colors",
2827
+ onClick: onClose,
2828
+ "aria-label": "Close",
2829
+ children: "\u2715"
2830
+ }
2831
+ )
2768
2832
  ] }),
2769
- /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__media", children: [
2770
- loading && !file && /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "Loading..." }),
2833
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center bg-[#0f0f0f] min-h-[240px] relative", children: [
2834
+ loading && !file && /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "Loading..." }),
2771
2835
  file && isImg && url && /* @__PURE__ */ jsx(
2772
2836
  "img",
2773
2837
  {
2774
2838
  src: url,
2775
2839
  alt: file.originalName,
2776
- style: { maxWidth: "100%", maxHeight: 420, objectFit: "contain", display: "block" }
2840
+ className: "max-w-full max-h-[420px] object-contain block"
2777
2841
  }
2778
2842
  ),
2779
2843
  file && isVid && url && /* @__PURE__ */ jsx(
@@ -2781,33 +2845,24 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2781
2845
  {
2782
2846
  src: url,
2783
2847
  controls: true,
2784
- style: { maxWidth: "100%", maxHeight: 420, display: "block" }
2848
+ className: "max-w-full max-h-[420px] block"
2785
2849
  }
2786
2850
  ),
2787
- file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: 40 }, children: [
2851
+ file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 p-10", children: [
2788
2852
  /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 64 }),
2789
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "No preview available" })
2853
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "No preview available" })
2790
2854
  ] }),
2791
- file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { style: {
2792
- position: "absolute",
2793
- inset: 0,
2794
- display: "flex",
2795
- flexDirection: "column",
2796
- alignItems: "center",
2797
- justifyContent: "center",
2798
- gap: 12,
2799
- background: "rgba(0,0,0,0.65)"
2800
- }, children: [
2801
- /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 14, fontWeight: 600 }, children: STATUS_LABEL2[status] }),
2802
- /* @__PURE__ */ jsx("div", { style: { width: 200 }, children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
2803
- progress != null && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
2855
+ file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/65", children: [
2856
+ /* @__PURE__ */ jsx("span", { className: "text-white text-[14px] font-semibold", children: STATUS_LABEL2[status] }),
2857
+ /* @__PURE__ */ jsx("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
2858
+ progress != null && /* @__PURE__ */ jsxs("span", { className: "text-[12px] text-slate-400", children: [
2804
2859
  progress,
2805
2860
  "%"
2806
2861
  ] })
2807
2862
  ] })
2808
2863
  ] }),
2809
- file && /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__meta", children: [
2810
- /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__meta-grid", children: [
2864
+ file && /* @__PURE__ */ jsxs("div", { className: "px-5 py-3.5 border-t border-slate-200 flex flex-col gap-2", children: [
2865
+ /* @__PURE__ */ jsxs("div", { className: "grid gap-x-4 gap-y-1.5 items-baseline", style: { gridTemplateColumns: "auto 1fr" }, children: [
2811
2866
  /* @__PURE__ */ jsx(MetaRow, { label: "Size", value: formatBytes(file.size) }),
2812
2867
  /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: file.mimeType }),
2813
2868
  /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucketName ?? file.bucket }),
@@ -2817,7 +2872,7 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2817
2872
  file.metadata?.videoCodec && /* @__PURE__ */ jsx(MetaRow, { label: "Codec", value: file.metadata.videoCodec }),
2818
2873
  /* @__PURE__ */ jsx(MetaRow, { label: "Uploaded", value: formatDate(file.createdAt) })
2819
2874
  ] }),
2820
- /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__badges", children: [
2875
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap mt-1", children: [
2821
2876
  file.metadata?.hasHls && /* @__PURE__ */ jsx(Badge, { children: "HLS" }),
2822
2877
  file.metadata?.hasAv1 && /* @__PURE__ */ jsx(Badge, { children: "AV1" }),
2823
2878
  file.isPrivate ? /* @__PURE__ */ jsx(Badge, { muted: true, children: "Private" }) : /* @__PURE__ */ jsx(Badge, { children: "Public" })
@@ -2825,8 +2880,7 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2825
2880
  url && /* @__PURE__ */ jsx(
2826
2881
  "button",
2827
2882
  {
2828
- className: "silo-btn silo-btn--full",
2829
- style: { marginTop: 4 },
2883
+ className: "w-full inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1.5 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100 mt-1",
2830
2884
  onClick: () => navigator.clipboard.writeText(url).catch(() => void 0),
2831
2885
  children: "Copy URL"
2832
2886
  }
@@ -2839,12 +2893,18 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2839
2893
  }
2840
2894
  function MetaRow({ label, value, highlight }) {
2841
2895
  return /* @__PURE__ */ jsxs(Fragment, { children: [
2842
- /* @__PURE__ */ jsx("span", { className: "silo-file-preview__meta-label", children: label }),
2843
- /* @__PURE__ */ jsx("span", { className: `silo-file-preview__meta-value${highlight ? " silo-file-preview__meta-value--highlight" : ""}`, children: value })
2896
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400 font-medium", children: label }),
2897
+ /* @__PURE__ */ jsx("span", { className: `text-[12px] ${highlight ? "text-green-500 font-semibold" : "text-slate-900"}`, children: value })
2844
2898
  ] });
2845
2899
  }
2846
2900
  function Badge({ children, muted }) {
2847
- return /* @__PURE__ */ jsx("span", { className: `silo-file-preview__badge${muted ? " silo-file-preview__badge--muted" : ""}`, children });
2901
+ return /* @__PURE__ */ jsx(
2902
+ "span",
2903
+ {
2904
+ className: `inline-flex text-[10px] font-bold tracking-[0.05em] py-0.5 px-2 rounded-full border border-slate-200 ${muted ? "text-slate-400" : "text-indigo-500"}`,
2905
+ children
2906
+ }
2907
+ );
2848
2908
  }
2849
2909
 
2850
2910
  export { Avatar, Background, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageOptions, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoOptions, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };