framepexls-ui-lib 2.2.8 → 2.2.11

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 (34) hide show
  1. package/dist/AvatarSquare.d.mts +4 -1
  2. package/dist/AvatarSquare.d.ts +4 -1
  3. package/dist/AvatarSquare.js +7 -1
  4. package/dist/AvatarSquare.mjs +7 -1
  5. package/dist/Checkbox.d.mts +1 -1
  6. package/dist/Checkbox.d.ts +1 -1
  7. package/dist/Checkbox.js +2 -2
  8. package/dist/Checkbox.mjs +2 -2
  9. package/dist/DateTimeField.js +1 -1
  10. package/dist/DateTimeField.mjs +1 -1
  11. package/dist/HeliipLoader.js +77 -5
  12. package/dist/HeliipLoader.mjs +77 -5
  13. package/dist/MarkdownEditor.d.mts +71 -3
  14. package/dist/MarkdownEditor.d.ts +71 -3
  15. package/dist/MarkdownEditor.js +2370 -65
  16. package/dist/MarkdownEditor.mjs +2388 -66
  17. package/dist/MediaSelector.d.mts +4 -1
  18. package/dist/MediaSelector.d.ts +4 -1
  19. package/dist/MediaSelector.js +134 -23
  20. package/dist/MediaSelector.mjs +135 -24
  21. package/dist/Sidebar.d.mts +2 -1
  22. package/dist/Sidebar.d.ts +2 -1
  23. package/dist/Sidebar.js +82 -19
  24. package/dist/Sidebar.mjs +82 -19
  25. package/dist/SupportChatWidget.js +88 -42
  26. package/dist/SupportChatWidget.mjs +89 -42
  27. package/dist/UploadCard.js +7 -7
  28. package/dist/UploadCard.mjs +7 -7
  29. package/dist/index.d.mts +1 -1
  30. package/dist/index.d.ts +1 -1
  31. package/dist/index.js +4 -0
  32. package/dist/index.mjs +3 -1
  33. package/dist/theme.css +47 -0
  34. package/package.json +8 -8
package/dist/MediaSelector.d.mts CHANGED
@@ -4,6 +4,8 @@ type MediaSelectorItem = {
4
4
  id: number | string;
5
5
  nombre: string;
6
6
  url?: string | null;
7
+ mime_type?: string | null;
8
+ mimeType?: string | null;
7
9
  };
8
10
  type MediosAdapter = {
9
11
  items: MediaSelectorItem[];
@@ -34,12 +36,13 @@ type MediosAdapter = {
34
36
  error?: any;
35
37
  }>;
36
38
  };
37
- declare function MediaSelector({ value, onChange, medios, accept, autoOpen, dialogOnly, onClose, }: {
39
+ declare function MediaSelector({ value, onChange, medios, accept, allowExternalUrl, autoOpen, dialogOnly, onClose, }: {
38
40
  value?: string | null;
39
41
  onChange: (url: string | null, picked?: MediaSelectorItem | null) => void;
40
42
  medios: MediosAdapter;
41
43
  label?: string;
42
44
  accept?: string;
45
+ allowExternalUrl?: boolean;
43
46
  autoOpen?: boolean;
44
47
  dialogOnly?: boolean;
45
48
  onClose?: () => void;
package/dist/MediaSelector.d.ts CHANGED
@@ -4,6 +4,8 @@ type MediaSelectorItem = {
4
4
  id: number | string;
5
5
  nombre: string;
6
6
  url?: string | null;
7
+ mime_type?: string | null;
8
+ mimeType?: string | null;
7
9
  };
8
10
  type MediosAdapter = {
9
11
  items: MediaSelectorItem[];
@@ -34,12 +36,13 @@ type MediosAdapter = {
34
36
  error?: any;
35
37
  }>;
36
38
  };
37
- declare function MediaSelector({ value, onChange, medios, accept, autoOpen, dialogOnly, onClose, }: {
39
+ declare function MediaSelector({ value, onChange, medios, accept, allowExternalUrl, autoOpen, dialogOnly, onClose, }: {
38
40
  value?: string | null;
39
41
  onChange: (url: string | null, picked?: MediaSelectorItem | null) => void;
40
42
  medios: MediosAdapter;
41
43
  label?: string;
42
44
  accept?: string;
45
+ allowExternalUrl?: boolean;
43
46
  autoOpen?: boolean;
44
47
  dialogOnly?: boolean;
45
48
  onClose?: () => void;
package/dist/MediaSelector.js CHANGED
@@ -42,11 +42,38 @@ var import_Pagination = __toESM(require("./Pagination"));
42
42
  var import_framer_motion = require("framer-motion");
43
43
  var import_animations = require("./animations");
44
44
  var import_iconos = require("./iconos");
45
+ const imageExtensions = [".avif", ".gif", ".jpeg", ".jpg", ".png", ".svg", ".webp"];
46
+ function normalizedAcceptParts(accept) {
47
+ return accept.split(",").map((part) => part.trim().toLowerCase()).filter(Boolean);
48
+ }
49
+ function acceptsOnlyImages(accept) {
50
+ const parts = normalizedAcceptParts(accept);
51
+ return parts.length > 0 && parts.every((part) => part === "image/*" || part.startsWith("image/") || imageExtensions.includes(part));
52
+ }
53
+ function hasImageExtension(value) {
54
+ var _a, _b, _c;
55
+ if (!value) return false;
56
+ const cleanValue = (_c = (_b = (_a = value.split("?")[0]) == null ? void 0 : _a.split("#")[0]) == null ? void 0 : _b.toLowerCase()) != null ? _c : "";
57
+ return imageExtensions.some((extension) => cleanValue.endsWith(extension));
58
+ }
59
+ function isImageItem(item) {
60
+ var _a, _b;
61
+ const mimeType = ((_b = (_a = item.mime_type) != null ? _a : item.mimeType) != null ? _b : "").toLowerCase();
62
+ if (mimeType) return mimeType.startsWith("image/");
63
+ return hasImageExtension(item.url) || hasImageExtension(item.nombre);
64
+ }
65
+ function getItemTypeLabel(item) {
66
+ var _a;
67
+ const mimeType = (_a = item.mime_type) != null ? _a : item.mimeType;
68
+ if (mimeType) return mimeType;
69
+ return "Medio";
70
+ }
45
71
  function MediaSelector({
46
72
  value,
47
73
  onChange,
48
74
  medios,
49
75
  accept = "image/png,image/jpeg,image/jpg,image/webp,image/gif",
76
+ allowExternalUrl = false,
50
77
  autoOpen,
51
78
  dialogOnly,
52
79
  onClose
@@ -59,6 +86,17 @@ function MediaSelector({
59
86
  const [linkValue, setLinkValue] = import_react.default.useState(value != null ? value : "");
60
87
  const [linkLoading, setLinkLoading] = import_react.default.useState(false);
61
88
  const [linkError, setLinkError] = import_react.default.useState(null);
89
+ const [viewMode, setViewMode] = import_react.default.useState("grid");
90
+ const onlyImages = import_react.default.useMemo(() => acceptsOnlyImages(accept), [accept]);
91
+ const visibleItems = import_react.default.useMemo(
92
+ () => onlyImages ? items.filter(isImageItem) : items,
93
+ [items, onlyImages]
94
+ );
95
+ const viewOptions = [
96
+ { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.GridFourIcon, { className: "h-4 w-4" }), label: "Mosaico", value: "grid" },
97
+ { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ImageSquareIcon, { className: "h-4 w-4" }), label: "Compacta", value: "compact" },
98
+ { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ListBulletsIcon, { className: "h-4 w-4" }), label: "Lista", value: "list" }
99
+ ];
62
100
  import_react.default.useEffect(() => {
63
101
  if (openPicker) obtenerMedios({ page: page || 1 });
64
102
  }, [openPicker, page, obtenerMedios]);
@@ -128,7 +166,7 @@ function MediaSelector({
128
166
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
129
167
  import_ChartCard.default,
130
168
  {
131
- className: "lg:col-span-1",
169
+ className: allowExternalUrl ? "lg:col-span-1" : "lg:col-span-2",
132
170
  title: "Subir imagen",
133
171
  subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Arrastra una imagen o selecci\xF3nala" }),
134
172
  right: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -160,12 +198,14 @@ function MediaSelector({
160
198
  var _a;
161
199
  return (_a = inputRef.current) == null ? void 0 : _a.click();
162
200
  },
163
- className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
201
+ className: "group flex min-h-[190px] cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-[color-mix(in_oklab,var(--border)_82%,transparent)] bg-[color-mix(in_oklab,var(--surface)_86%,var(--card))] p-8 text-center transition hover:border-[color-mix(in_oklab,var(--primary)_54%,var(--border))] hover:bg-[color-mix(in_oklab,var(--primary)_5%,var(--surface))] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
164
202
  children: [
165
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ArrowUpFromBracketIcon, { "aria-hidden": true, className: "h-8 w-8 text-slate-400" }),
166
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
167
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500", children: "Formatos: JPG, PNG, WEBP, GIF" }),
168
- uploading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 w-full rounded-xl border border-slate-200 p-2 text-left text-sm dark:border-white/10", children: [
203
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--card)] text-[color-mix(in_oklab,var(--muted)_82%,transparent)] transition group-hover:text-[var(--primary)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ArrowUpFromBracketIcon, { "aria-hidden": true, className: "h-6 w-6" }) }),
204
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
205
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
206
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-[var(--muted)]", children: "Formatos: JPG, PNG, WEBP, GIF" })
207
+ ] }),
208
+ uploading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 w-full rounded-lg border border-[var(--border)] bg-[var(--card)] p-3 text-left text-sm", children: [
169
209
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
170
210
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Subiendo\u2026" }),
171
211
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
@@ -173,10 +213,10 @@ function MediaSelector({
173
213
  "%"
174
214
  ] })
175
215
  ] }),
176
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
216
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--surface)_84%,transparent)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
177
217
  import_framer_motion.motion.div,
178
218
  {
179
- className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
219
+ className: "h-full w-full origin-left bg-[var(--primary)] will-change-transform",
180
220
  initial: { scaleX: 0 },
181
221
  animate: { scaleX: progress / 100 },
182
222
  transition: import_animations.springSm
@@ -188,7 +228,7 @@ function MediaSelector({
188
228
  )
189
229
  }
190
230
  ),
191
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
231
+ allowExternalUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
192
232
  import_ChartCard.default,
193
233
  {
194
234
  className: "lg:col-span-1",
@@ -248,18 +288,40 @@ function MediaSelector({
248
288
  linkError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 rounded-xl border border-rose-300/70 bg-rose-50 px-3 py-2 text-rose-900 text-xs", children: linkError })
249
289
  ]
250
290
  }
251
- ),
252
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lg:col-span-2 space-y-3", children: [
253
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
254
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
255
- "P\xE1gina ",
256
- page,
257
- " de ",
258
- Math.max(1, lastPage)
291
+ ) : null,
292
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 space-y-3 overflow-hidden lg:col-span-2", children: [
293
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
294
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
295
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-[var(--muted)]", children: [
296
+ "P\xE1gina ",
297
+ page,
298
+ " de ",
299
+ Math.max(1, lastPage)
300
+ ] }),
301
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-xs text-[var(--muted)]", children: [
302
+ visibleItems.length,
303
+ " ",
304
+ onlyImages ? "imagen(es)" : "medio(s)",
305
+ " disponible(s)"
306
+ ] })
259
307
  ] }),
260
- lastPage > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.default, { page, totalPages: lastPage, onPageChange: setPage })
308
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
309
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "inline-flex rounded-lg border border-[var(--border)] bg-[var(--surface)] p-1", children: viewOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
310
+ import_Button.default,
311
+ {
312
+ iconOnly: true,
313
+ size: "sm",
314
+ title: `Vista ${option.label.toLowerCase()}`,
315
+ variant: viewMode === option.value ? "primary" : "ghost",
316
+ onClick: () => setViewMode(option.value),
317
+ children: option.icon
318
+ },
319
+ option.value
320
+ )) }),
321
+ lastPage > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.default, { page, totalPages: lastPage, onPageChange: setPage }) : null
322
+ ] })
261
323
  ] }),
262
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: items.map((m) => {
324
+ viewMode === "list" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 space-y-2 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: visibleItems.map((m) => {
263
325
  var _a;
264
326
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
265
327
  import_framer_motion.motion.div,
@@ -269,11 +331,12 @@ function MediaSelector({
269
331
  animate: { opacity: 1, y: 0 },
270
332
  exit: { opacity: 0, y: 8 },
271
333
  transition: import_animations.springSm,
334
+ className: "min-w-0",
272
335
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
273
336
  import_Button.default,
274
337
  {
275
338
  unstyled: true,
276
- className: "group overflow-hidden rounded-2xl border border-slate-200 bg-white/70 p-1 text-left transition hover:shadow-md focus:outline-none focus:ring-1 dark:border-white/10 dark:bg-[var(--fx-surface)]",
339
+ className: "group grid w-full min-w-0 grid-cols-[64px_minmax(0,1fr)] items-center gap-3 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--card)] p-2 text-left transition hover:border-[color-mix(in_oklab,var(--primary)_44%,var(--border))] hover:shadow-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
277
340
  onClick: () => {
278
341
  var _a2;
279
342
  onChange((_a2 = m.url) != null ? _a2 : null, m);
@@ -281,7 +344,7 @@ function MediaSelector({
281
344
  onClose == null ? void 0 : onClose();
282
345
  },
283
346
  children: [
284
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
347
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square overflow-hidden rounded-md bg-[var(--surface)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
285
348
  "img",
286
349
  {
287
350
  src: (_a = m.url) != null ? _a : "",
@@ -289,14 +352,62 @@ function MediaSelector({
289
352
  className: "h-full w-full object-cover transition group-hover:scale-105"
290
353
  }
291
354
  ) }),
292
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate p-1 text-xs", children: m.nombre })
355
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
356
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-medium text-[var(--foreground)]", children: m.nombre }),
357
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 truncate text-xs text-[var(--muted)]", children: getItemTypeLabel(m) })
358
+ ] })
359
+ ]
360
+ }
361
+ )
362
+ },
363
+ String(m.id)
364
+ );
365
+ }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `grid min-w-0 overflow-hidden ${viewMode === "compact" ? "grid-cols-[repeat(auto-fit,minmax(min(128px,100%),1fr))] gap-2" : "grid-cols-[repeat(auto-fit,minmax(min(190px,100%),1fr))] gap-3"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: visibleItems.map((m) => {
366
+ var _a;
367
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
368
+ import_framer_motion.motion.div,
369
+ {
370
+ layout: true,
371
+ initial: { opacity: 0, y: 8 },
372
+ animate: { opacity: 1, y: 0 },
373
+ exit: { opacity: 0, y: 8 },
374
+ transition: import_animations.springSm,
375
+ className: "min-w-0",
376
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
377
+ import_Button.default,
378
+ {
379
+ unstyled: true,
380
+ className: "group block w-full min-w-0 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--card)] p-1 text-left transition hover:border-[color-mix(in_oklab,var(--primary)_44%,var(--border))] hover:shadow-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
381
+ onClick: () => {
382
+ var _a2;
383
+ onChange((_a2 = m.url) != null ? _a2 : null, m);
384
+ setOpenPicker(false);
385
+ onClose == null ? void 0 : onClose();
386
+ },
387
+ children: [
388
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${viewMode === "compact" ? "aspect-square" : "aspect-[4/3]"} w-full overflow-hidden rounded-md bg-[var(--surface)]`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
389
+ "img",
390
+ {
391
+ src: (_a = m.url) != null ? _a : "",
392
+ alt: m.nombre,
393
+ className: "h-full w-full object-cover transition group-hover:scale-105"
394
+ }
395
+ ) }),
396
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${viewMode === "compact" ? "px-1 py-1" : "p-2"} min-w-0`, children: [
397
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs font-medium text-[var(--foreground)]", children: m.nombre }),
398
+ viewMode === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 truncate text-xs text-[var(--muted)]", children: getItemTypeLabel(m) }) : null
399
+ ] })
293
400
  ]
294
401
  }
295
402
  )
296
403
  },
297
404
  String(m.id)
298
405
  );
299
- }) }) })
406
+ }) }) }),
407
+ visibleItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-lg border border-dashed border-[var(--border)] bg-[var(--surface)] p-6 text-center", children: [
408
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium text-[var(--foreground)]", children: onlyImages ? "No hay imagenes disponibles" : "No hay medios disponibles" }),
409
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-[var(--muted)]", children: "Sube un archivo compatible para poder seleccionarlo." })
410
+ ] }) : null
300
411
  ] })
301
412
  ] }) }),
302
413
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/MediaSelector.mjs CHANGED
@@ -8,12 +8,39 @@ import Dialog from "./Dialog.mjs";
8
8
  import Pagination from "./Pagination.mjs";
9
9
  import { AnimatePresence, motion } from "framer-motion";
10
10
  import { springSm } from "./animations.mjs";
11
- import { ArrowUpFromBracketIcon } from "./iconos/index.mjs";
11
+ import { ArrowUpFromBracketIcon, GridFourIcon, ImageSquareIcon, ListBulletsIcon } from "./iconos/index.mjs";
12
+ const imageExtensions = [".avif", ".gif", ".jpeg", ".jpg", ".png", ".svg", ".webp"];
13
+ function normalizedAcceptParts(accept) {
14
+ return accept.split(",").map((part) => part.trim().toLowerCase()).filter(Boolean);
15
+ }
16
+ function acceptsOnlyImages(accept) {
17
+ const parts = normalizedAcceptParts(accept);
18
+ return parts.length > 0 && parts.every((part) => part === "image/*" || part.startsWith("image/") || imageExtensions.includes(part));
19
+ }
20
+ function hasImageExtension(value) {
21
+ var _a, _b, _c;
22
+ if (!value) return false;
23
+ const cleanValue = (_c = (_b = (_a = value.split("?")[0]) == null ? void 0 : _a.split("#")[0]) == null ? void 0 : _b.toLowerCase()) != null ? _c : "";
24
+ return imageExtensions.some((extension) => cleanValue.endsWith(extension));
25
+ }
26
+ function isImageItem(item) {
27
+ var _a, _b;
28
+ const mimeType = ((_b = (_a = item.mime_type) != null ? _a : item.mimeType) != null ? _b : "").toLowerCase();
29
+ if (mimeType) return mimeType.startsWith("image/");
30
+ return hasImageExtension(item.url) || hasImageExtension(item.nombre);
31
+ }
32
+ function getItemTypeLabel(item) {
33
+ var _a;
34
+ const mimeType = (_a = item.mime_type) != null ? _a : item.mimeType;
35
+ if (mimeType) return mimeType;
36
+ return "Medio";
37
+ }
12
38
  function MediaSelector({
13
39
  value,
14
40
  onChange,
15
41
  medios,
16
42
  accept = "image/png,image/jpeg,image/jpg,image/webp,image/gif",
43
+ allowExternalUrl = false,
17
44
  autoOpen,
18
45
  dialogOnly,
19
46
  onClose
@@ -26,6 +53,17 @@ function MediaSelector({
26
53
  const [linkValue, setLinkValue] = React.useState(value != null ? value : "");
27
54
  const [linkLoading, setLinkLoading] = React.useState(false);
28
55
  const [linkError, setLinkError] = React.useState(null);
56
+ const [viewMode, setViewMode] = React.useState("grid");
57
+ const onlyImages = React.useMemo(() => acceptsOnlyImages(accept), [accept]);
58
+ const visibleItems = React.useMemo(
59
+ () => onlyImages ? items.filter(isImageItem) : items,
60
+ [items, onlyImages]
61
+ );
62
+ const viewOptions = [
63
+ { icon: /* @__PURE__ */ jsx(GridFourIcon, { className: "h-4 w-4" }), label: "Mosaico", value: "grid" },
64
+ { icon: /* @__PURE__ */ jsx(ImageSquareIcon, { className: "h-4 w-4" }), label: "Compacta", value: "compact" },
65
+ { icon: /* @__PURE__ */ jsx(ListBulletsIcon, { className: "h-4 w-4" }), label: "Lista", value: "list" }
66
+ ];
29
67
  React.useEffect(() => {
30
68
  if (openPicker) obtenerMedios({ page: page || 1 });
31
69
  }, [openPicker, page, obtenerMedios]);
@@ -95,7 +133,7 @@ function MediaSelector({
95
133
  /* @__PURE__ */ jsx(
96
134
  ChartCard,
97
135
  {
98
- className: "lg:col-span-1",
136
+ className: allowExternalUrl ? "lg:col-span-1" : "lg:col-span-2",
99
137
  title: "Subir imagen",
100
138
  subtitle: /* @__PURE__ */ jsx("span", { children: "Arrastra una imagen o selecci\xF3nala" }),
101
139
  right: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -127,12 +165,14 @@ function MediaSelector({
127
165
  var _a;
128
166
  return (_a = inputRef.current) == null ? void 0 : _a.click();
129
167
  },
130
- className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 dark:border-white/10 dark:from-white/10 dark:to-white/5",
168
+ className: "group flex min-h-[190px] cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-[color-mix(in_oklab,var(--border)_82%,transparent)] bg-[color-mix(in_oklab,var(--surface)_86%,var(--card))] p-8 text-center transition hover:border-[color-mix(in_oklab,var(--primary)_54%,var(--border))] hover:bg-[color-mix(in_oklab,var(--primary)_5%,var(--surface))] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
131
169
  children: [
132
- /* @__PURE__ */ jsx(ArrowUpFromBracketIcon, { "aria-hidden": true, className: "h-8 w-8 text-slate-400" }),
133
- /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
134
- /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: "Formatos: JPG, PNG, WEBP, GIF" }),
135
- uploading && /* @__PURE__ */ jsxs("div", { className: "mt-3 w-full rounded-xl border border-slate-200 p-2 text-left text-sm dark:border-white/10", children: [
170
+ /* @__PURE__ */ jsx("span", { className: "flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--card)] text-[color-mix(in_oklab,var(--muted)_82%,transparent)] transition group-hover:text-[var(--primary)]", children: /* @__PURE__ */ jsx(ArrowUpFromBracketIcon, { "aria-hidden": true, className: "h-6 w-6" }) }),
171
+ /* @__PURE__ */ jsxs("div", { children: [
172
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
173
+ /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--muted)]", children: "Formatos: JPG, PNG, WEBP, GIF" })
174
+ ] }),
175
+ uploading && /* @__PURE__ */ jsxs("div", { className: "mt-2 w-full rounded-lg border border-[var(--border)] bg-[var(--card)] p-3 text-left text-sm", children: [
136
176
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
137
177
  /* @__PURE__ */ jsx("span", { children: "Subiendo\u2026" }),
138
178
  /* @__PURE__ */ jsxs("span", { children: [
@@ -140,10 +180,10 @@ function MediaSelector({
140
180
  "%"
141
181
  ] })
142
182
  ] }),
143
- /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(
183
+ /* @__PURE__ */ jsx("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--surface)_84%,transparent)]", children: /* @__PURE__ */ jsx(
144
184
  motion.div,
145
185
  {
146
- className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
186
+ className: "h-full w-full origin-left bg-[var(--primary)] will-change-transform",
147
187
  initial: { scaleX: 0 },
148
188
  animate: { scaleX: progress / 100 },
149
189
  transition: springSm
@@ -155,7 +195,7 @@ function MediaSelector({
155
195
  )
156
196
  }
157
197
  ),
158
- /* @__PURE__ */ jsxs(
198
+ allowExternalUrl ? /* @__PURE__ */ jsxs(
159
199
  ChartCard,
160
200
  {
161
201
  className: "lg:col-span-1",
@@ -215,18 +255,40 @@ function MediaSelector({
215
255
  linkError && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-xl border border-rose-300/70 bg-rose-50 px-3 py-2 text-rose-900 text-xs", children: linkError })
216
256
  ]
217
257
  }
218
- ),
219
- /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
220
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
221
- /* @__PURE__ */ jsxs("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: [
222
- "P\xE1gina ",
223
- page,
224
- " de ",
225
- Math.max(1, lastPage)
258
+ ) : null,
259
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3 overflow-hidden lg:col-span-2", children: [
260
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
261
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
262
+ /* @__PURE__ */ jsxs("div", { className: "text-sm text-[var(--muted)]", children: [
263
+ "P\xE1gina ",
264
+ page,
265
+ " de ",
266
+ Math.max(1, lastPage)
267
+ ] }),
268
+ /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--muted)]", children: [
269
+ visibleItems.length,
270
+ " ",
271
+ onlyImages ? "imagen(es)" : "medio(s)",
272
+ " disponible(s)"
273
+ ] })
226
274
  ] }),
227
- lastPage > 1 && /* @__PURE__ */ jsx(Pagination, { page, totalPages: lastPage, onPageChange: setPage })
275
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
276
+ /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-lg border border-[var(--border)] bg-[var(--surface)] p-1", children: viewOptions.map((option) => /* @__PURE__ */ jsx(
277
+ Button,
278
+ {
279
+ iconOnly: true,
280
+ size: "sm",
281
+ title: `Vista ${option.label.toLowerCase()}`,
282
+ variant: viewMode === option.value ? "primary" : "ghost",
283
+ onClick: () => setViewMode(option.value),
284
+ children: option.icon
285
+ },
286
+ option.value
287
+ )) }),
288
+ lastPage > 1 ? /* @__PURE__ */ jsx(Pagination, { page, totalPages: lastPage, onPageChange: setPage }) : null
289
+ ] })
228
290
  ] }),
229
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: items.map((m) => {
291
+ viewMode === "list" ? /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-2 overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: visibleItems.map((m) => {
230
292
  var _a;
231
293
  return /* @__PURE__ */ jsx(
232
294
  motion.div,
@@ -236,11 +298,12 @@ function MediaSelector({
236
298
  animate: { opacity: 1, y: 0 },
237
299
  exit: { opacity: 0, y: 8 },
238
300
  transition: springSm,
301
+ className: "min-w-0",
239
302
  children: /* @__PURE__ */ jsxs(
240
303
  Button,
241
304
  {
242
305
  unstyled: true,
243
- className: "group overflow-hidden rounded-2xl border border-slate-200 bg-white/70 p-1 text-left transition hover:shadow-md focus:outline-none focus:ring-1 dark:border-white/10 dark:bg-[var(--fx-surface)]",
306
+ className: "group grid w-full min-w-0 grid-cols-[64px_minmax(0,1fr)] items-center gap-3 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--card)] p-2 text-left transition hover:border-[color-mix(in_oklab,var(--primary)_44%,var(--border))] hover:shadow-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
244
307
  onClick: () => {
245
308
  var _a2;
246
309
  onChange((_a2 = m.url) != null ? _a2 : null, m);
@@ -248,7 +311,7 @@ function MediaSelector({
248
311
  onClose == null ? void 0 : onClose();
249
312
  },
250
313
  children: [
251
- /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx(
314
+ /* @__PURE__ */ jsx("div", { className: "aspect-square overflow-hidden rounded-md bg-[var(--surface)]", children: /* @__PURE__ */ jsx(
252
315
  "img",
253
316
  {
254
317
  src: (_a = m.url) != null ? _a : "",
@@ -256,14 +319,62 @@ function MediaSelector({
256
319
  className: "h-full w-full object-cover transition group-hover:scale-105"
257
320
  }
258
321
  ) }),
259
- /* @__PURE__ */ jsx("div", { className: "truncate p-1 text-xs", children: m.nombre })
322
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
323
+ /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-[var(--foreground)]", children: m.nombre }),
324
+ /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-xs text-[var(--muted)]", children: getItemTypeLabel(m) })
325
+ ] })
326
+ ]
327
+ }
328
+ )
329
+ },
330
+ String(m.id)
331
+ );
332
+ }) }) }) : /* @__PURE__ */ jsx("div", { className: `grid min-w-0 overflow-hidden ${viewMode === "compact" ? "grid-cols-[repeat(auto-fit,minmax(min(128px,100%),1fr))] gap-2" : "grid-cols-[repeat(auto-fit,minmax(min(190px,100%),1fr))] gap-3"}`, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: visibleItems.map((m) => {
333
+ var _a;
334
+ return /* @__PURE__ */ jsx(
335
+ motion.div,
336
+ {
337
+ layout: true,
338
+ initial: { opacity: 0, y: 8 },
339
+ animate: { opacity: 1, y: 0 },
340
+ exit: { opacity: 0, y: 8 },
341
+ transition: springSm,
342
+ className: "min-w-0",
343
+ children: /* @__PURE__ */ jsxs(
344
+ Button,
345
+ {
346
+ unstyled: true,
347
+ className: "group block w-full min-w-0 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--card)] p-1 text-left transition hover:border-[color-mix(in_oklab,var(--primary)_44%,var(--border))] hover:shadow-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
348
+ onClick: () => {
349
+ var _a2;
350
+ onChange((_a2 = m.url) != null ? _a2 : null, m);
351
+ setOpenPicker(false);
352
+ onClose == null ? void 0 : onClose();
353
+ },
354
+ children: [
355
+ /* @__PURE__ */ jsx("div", { className: `${viewMode === "compact" ? "aspect-square" : "aspect-[4/3]"} w-full overflow-hidden rounded-md bg-[var(--surface)]`, children: /* @__PURE__ */ jsx(
356
+ "img",
357
+ {
358
+ src: (_a = m.url) != null ? _a : "",
359
+ alt: m.nombre,
360
+ className: "h-full w-full object-cover transition group-hover:scale-105"
361
+ }
362
+ ) }),
363
+ /* @__PURE__ */ jsxs("div", { className: `${viewMode === "compact" ? "px-1 py-1" : "p-2"} min-w-0`, children: [
364
+ /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-medium text-[var(--foreground)]", children: m.nombre }),
365
+ viewMode === "grid" ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-xs text-[var(--muted)]", children: getItemTypeLabel(m) }) : null
366
+ ] })
260
367
  ]
261
368
  }
262
369
  )
263
370
  },
264
371
  String(m.id)
265
372
  );
266
- }) }) })
373
+ }) }) }),
374
+ visibleItems.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-[var(--border)] bg-[var(--surface)] p-6 text-center", children: [
375
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-[var(--foreground)]", children: onlyImages ? "No hay imagenes disponibles" : "No hay medios disponibles" }),
376
+ /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--muted)]", children: "Sube un archivo compatible para poder seleccionarlo." })
377
+ ] }) : null
267
378
  ] })
268
379
  ] }) }),
269
380
  /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(
package/dist/Sidebar.d.mts CHANGED
@@ -74,6 +74,7 @@ type SidebarProps = {
74
74
  onBrandClick?: () => void;
75
75
  showBrand?: boolean;
76
76
  collapsedKey?: string;
77
+ groupCollapsePersistKey?: string;
77
78
  defaultCollapsed?: boolean;
78
79
  onCollapsedChange?: (collapsed: boolean) => void;
79
80
  brandLogoSrc?: string;
@@ -104,6 +105,6 @@ type SidebarProps = {
104
105
  color?: "accent" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
105
106
  };
106
107
  type SidebarColor = NonNullable<SidebarProps["color"]>;
107
- declare function Sidebar({ items, activeKey, onNavigate, navigationEditable, navigationPersistKey, navigationTitle, navigationDescription, navigationLabels, user, userMenuSlot, sidebarSlot, sidebarSlotCollapsed, footerSlot, footerSlotCollapsed, onBrandClick, showBrand, collapsedKey, defaultCollapsed, onCollapsedChange, brandLogoSrc, brandInitials, brandTitle, brandSubtitle, workspaces, activeWorkspaceId, defaultWorkspaceId, workspacePersistKey, onWorkspaceChange, onManageWorkspaces, workspaceLabels, loading, loadingMinDurationMs, skeleton, quickActions, quickActionsTitle, quickActionsPersistKey, quickActionsMaxPinned, quickActionsEditable, quickActionsDefaultPinnedIds, color, }: SidebarProps): React__default.JSX.Element;
108
+ declare function Sidebar({ items, activeKey, onNavigate, navigationEditable, navigationPersistKey, navigationTitle, navigationDescription, navigationLabels, user, userMenuSlot, sidebarSlot, sidebarSlotCollapsed, footerSlot, footerSlotCollapsed, onBrandClick, showBrand, collapsedKey, groupCollapsePersistKey, defaultCollapsed, onCollapsedChange, brandLogoSrc, brandInitials, brandTitle, brandSubtitle, workspaces, activeWorkspaceId, defaultWorkspaceId, workspacePersistKey, onWorkspaceChange, onManageWorkspaces, workspaceLabels, loading, loadingMinDurationMs, skeleton, quickActions, quickActionsTitle, quickActionsPersistKey, quickActionsMaxPinned, quickActionsEditable, quickActionsDefaultPinnedIds, color, }: SidebarProps): React__default.JSX.Element;
108
109
 
109
110
  export { type SidebarItem, type SidebarProps, type SidebarQuickAction, type SidebarUser, type SidebarWorkspace, type SidebarWorkspaceLabels, Sidebar as default };
package/dist/Sidebar.d.ts CHANGED
@@ -74,6 +74,7 @@ type SidebarProps = {
74
74
  onBrandClick?: () => void;
75
75
  showBrand?: boolean;
76
76
  collapsedKey?: string;
77
+ groupCollapsePersistKey?: string;
77
78
  defaultCollapsed?: boolean;
78
79
  onCollapsedChange?: (collapsed: boolean) => void;
79
80
  brandLogoSrc?: string;
@@ -104,6 +105,6 @@ type SidebarProps = {
104
105
  color?: "accent" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
105
106
  };
106
107
  type SidebarColor = NonNullable<SidebarProps["color"]>;
107
- declare function Sidebar({ items, activeKey, onNavigate, navigationEditable, navigationPersistKey, navigationTitle, navigationDescription, navigationLabels, user, userMenuSlot, sidebarSlot, sidebarSlotCollapsed, footerSlot, footerSlotCollapsed, onBrandClick, showBrand, collapsedKey, defaultCollapsed, onCollapsedChange, brandLogoSrc, brandInitials, brandTitle, brandSubtitle, workspaces, activeWorkspaceId, defaultWorkspaceId, workspacePersistKey, onWorkspaceChange, onManageWorkspaces, workspaceLabels, loading, loadingMinDurationMs, skeleton, quickActions, quickActionsTitle, quickActionsPersistKey, quickActionsMaxPinned, quickActionsEditable, quickActionsDefaultPinnedIds, color, }: SidebarProps): React__default.JSX.Element;
108
+ declare function Sidebar({ items, activeKey, onNavigate, navigationEditable, navigationPersistKey, navigationTitle, navigationDescription, navigationLabels, user, userMenuSlot, sidebarSlot, sidebarSlotCollapsed, footerSlot, footerSlotCollapsed, onBrandClick, showBrand, collapsedKey, groupCollapsePersistKey, defaultCollapsed, onCollapsedChange, brandLogoSrc, brandInitials, brandTitle, brandSubtitle, workspaces, activeWorkspaceId, defaultWorkspaceId, workspacePersistKey, onWorkspaceChange, onManageWorkspaces, workspaceLabels, loading, loadingMinDurationMs, skeleton, quickActions, quickActionsTitle, quickActionsPersistKey, quickActionsMaxPinned, quickActionsEditable, quickActionsDefaultPinnedIds, color, }: SidebarProps): React__default.JSX.Element;
108
109
 
109
110
  export { type SidebarItem, type SidebarProps, type SidebarQuickAction, type SidebarUser, type SidebarWorkspace, type SidebarWorkspaceLabels, Sidebar as default };