framepexls-ui-lib 0.1.13 → 0.1.15

package/dist/MediaSelector.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaSelectorItem = {
+    id: number | string;
+    nombre: string;
+    url?: string | null;
+};
+type MediosAdapter = {
+    items: MediaSelectorItem[];
+    page: number;
+    lastPage: number;
+    setPage: (p: number) => void;
+    obtenerMedios: (opts?: {
+        page?: number;
+        per_page?: number;
+    }) => Promise<any>;
+    subirMedio: (file: File, opts?: {
+        onProgress?: (p: {
+            porcentaje: number;
+        }) => void;
+    }) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+    importFromUrl?: (url: string) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+    importarMedioDesdeUrl?: (url: string) => Promise<{
+        ok: boolean;
+        data?: any;
+        error?: any;
+    }>;
+};
+declare function MediaSelector({ value, onChange, medios, accept, autoOpen, dialogOnly, onClose, }: {
+    value?: string | null;
+    onChange: (url: string | null, picked?: MediaSelectorItem | null) => void;
+    medios: MediosAdapter;
+    label?: string;
+    accept?: string;
+    autoOpen?: boolean;
+    dialogOnly?: boolean;
+    onClose?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { type MediaSelectorItem, type MediosAdapter, MediaSelector as default };

package/dist/MediaSelector.js

@@ -0,0 +1,225 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MediaSelector_exports = {};
+__export(MediaSelector_exports, {
+  default: () => MediaSelector
+});
+module.exports = __toCommonJS(MediaSelector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartCard = __toESM(require("./ChartCard"));
+var import_Button = __toESM(require("./Button"));
+var import_Input = __toESM(require("./Input"));
+var import_Dialog = __toESM(require("./Dialog"));
+var import_Pagination = __toESM(require("./Pagination"));
+function MediaSelector({
+  value,
+  onChange,
+  medios,
+  accept = "image/png,image/jpeg,image/jpg,image/webp,image/gif",
+  autoOpen,
+  dialogOnly,
+  onClose
+}) {
+  const { obtenerMedios, items, page, lastPage, setPage, subirMedio } = medios;
+  const [openPicker, setOpenPicker] = (0, import_react.useState)(false);
+  const [uploading, setUploading] = (0, import_react.useState)(false);
+  const [progress, setProgress] = (0, import_react.useState)(0);
+  const inputRef = (0, import_react.useRef)(null);
+  const [linkValue, setLinkValue] = (0, import_react.useState)(value != null ? value : "");
+  const [linkLoading, setLinkLoading] = (0, import_react.useState)(false);
+  const [linkError, setLinkError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (openPicker) obtenerMedios({ page: page || 1 });
+  }, [openPicker, page, obtenerMedios]);
+  (0, import_react.useEffect)(() => {
+    if (autoOpen) setOpenPicker(true);
+  }, [autoOpen]);
+  (0, import_react.useEffect)(() => {
+    if (openPicker) setLinkValue(value != null ? value : "");
+  }, [openPicker, value]);
+  const onFiles = async (files) => {
+    var _a, _b, _c, _d;
+    if (!(files == null ? void 0 : files.length)) return;
+    const file = files[0];
+    setUploading(true);
+    setProgress(0);
+    const res = await subirMedio(file, { onProgress: (p) => setProgress(p.porcentaje) });
+    setUploading(false);
+    if (res.ok) {
+      const url = (_d = (_c = (_a = res.data) == null ? void 0 : _a.url) != null ? _c : (_b = res.data) == null ? void 0 : _b.url) != null ? _d : null;
+      onChange(url, res.data);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    onFiles(e.dataTransfer.files);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+    !dialogOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { value: value != null ? value : "", onChange: (e) => onChange(e.target.value || null), placeholder: "URL de imagen", clearable: true, onClear: () => onChange(null) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", onClick: () => setOpenPicker(true), children: "Elegir" })
+      ] }),
+      value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white/60 p-2 dark:border-white/10 dark:bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: value, alt: "preview", className: "h-full w-full object-cover" }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, { open: openPicker, onClose: () => {
+      setOpenPicker(false);
+      onClose == null ? void 0 : onClose();
+    }, size: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Header, { title: "Biblioteca de medios", description: "Selecciona una imagen o sube una nueva", onClose: () => {
+        setOpenPicker(false);
+        onClose == null ? void 0 : onClose();
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartCard.default, { className: "lg:col-span-1", title: "Subir imagen", subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Arrastra una imagen o selecci\xF3nala" }), right: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { unstyled: true, ref: inputRef, type: "file", accept, className: "hidden", onChange: (e) => onFiles(e.target.files) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { onClick: () => {
+            var _a;
+            return (_a = inputRef.current) == null ? void 0 : _a.click();
+          }, disabled: uploading, children: "Seleccionar" })
+        ] }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            onDragOver: (e) => {
+              e.preventDefault();
+              e.dataTransfer.dropEffect = "copy";
+            },
+            onDrop: handleDrop,
+            onClick: () => {
+              var _a;
+              return (_a = inputRef.current) == null ? void 0 : _a.click();
+            },
+            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",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-8 w-8 text-slate-400", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium", children: "Soltar imagen aqu\xED" }),
+              uploading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-1 text-xs text-slate-500", children: [
+                  progress,
+                  "%"
+                ] }),
+                /* @__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)("div", { className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20", style: { width: `${progress}%` } }) })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartCard.default, { className: "lg:col-span-1", title: "Desde enlace", subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Pega una URL http(s) v\xE1lida" }), compact: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Input.default,
+              {
+                type: "url",
+                placeholder: "https://\u2026",
+                value: linkValue,
+                onChange: (e) => {
+                  setLinkValue(e.target.value);
+                  setLinkError(null);
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.default,
+              {
+                onClick: async () => {
+                  var _a, _b, _c, _d;
+                  if (!linkValue) return;
+                  setLinkError(null);
+                  const isHttp = /^https?:\/\//i.test(linkValue);
+                  if (!isHttp) {
+                    setLinkError("Ingresa un enlace v\xE1lido (http/https)");
+                    return;
+                  }
+                  const importer = (_a = medios.importFromUrl) != null ? _a : medios.importarMedioDesdeUrl;
+                  if (importer) {
+                    setLinkLoading(true);
+                    const res = await importer(linkValue);
+                    setLinkLoading(false);
+                    if (res && res.ok) {
+                      const d = (_b = res.data) != null ? _b : res;
+                      onChange((_c = d == null ? void 0 : d.url) != null ? _c : null, d != null ? d : null);
+                      setOpenPicker(false);
+                      onClose == null ? void 0 : onClose();
+                    } else {
+                      setLinkError(String((_d = res == null ? void 0 : res.error) != null ? _d : "No se pudo importar el enlace"));
+                    }
+                  } else {
+                    onChange(linkValue || null, null);
+                    setOpenPicker(false);
+                    onClose == null ? void 0 : onClose();
+                  }
+                },
+                disabled: !linkValue || linkLoading,
+                children: linkLoading ? "Importando\u2026" : "Usar"
+              }
+            )
+          ] }),
+          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 })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lg:col-span-2 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm text-slate-500", children: [
+              "P\xE1gina ",
+              page,
+              " de ",
+              Math.max(1, lastPage)
+            ] }),
+            lastPage > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.default, { page, totalPages: lastPage, onPageChange: setPage })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: items.map((m) => {
+            var _a;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_Button.default,
+              {
+                unstyled: true,
+                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-2 focus:ring-slate-300 dark:border-white/10 dark:bg-white/5",
+                onClick: () => {
+                  var _a2;
+                  onChange((_a2 = m.url) != null ? _a2 : null, m);
+                  setOpenPicker(false);
+                  onClose == null ? void 0 : onClose();
+                },
+                children: [
+                  /* @__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)("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-[1.01]" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate p-1 text-xs", children: m.nombre })
+                ]
+              },
+              m.id
+            );
+          }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", onClick: () => {
+        setOpenPicker(false);
+        onClose == null ? void 0 : onClose();
+      }, children: "Cerrar" }) })
+    ] })
+  ] });
+}

package/dist/MediaSelector.mjs

@@ -0,0 +1,195 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import ChartCard from "./ChartCard";
+import Button from "./Button";
+import Input from "./Input";
+import Dialog from "./Dialog";
+import Pagination from "./Pagination";
+function MediaSelector({
+  value,
+  onChange,
+  medios,
+  accept = "image/png,image/jpeg,image/jpg,image/webp,image/gif",
+  autoOpen,
+  dialogOnly,
+  onClose
+}) {
+  const { obtenerMedios, items, page, lastPage, setPage, subirMedio } = medios;
+  const [openPicker, setOpenPicker] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const inputRef = useRef(null);
+  const [linkValue, setLinkValue] = useState(value != null ? value : "");
+  const [linkLoading, setLinkLoading] = useState(false);
+  const [linkError, setLinkError] = useState(null);
+  useEffect(() => {
+    if (openPicker) obtenerMedios({ page: page || 1 });
+  }, [openPicker, page, obtenerMedios]);
+  useEffect(() => {
+    if (autoOpen) setOpenPicker(true);
+  }, [autoOpen]);
+  useEffect(() => {
+    if (openPicker) setLinkValue(value != null ? value : "");
+  }, [openPicker, value]);
+  const onFiles = async (files) => {
+    var _a, _b, _c, _d;
+    if (!(files == null ? void 0 : files.length)) return;
+    const file = files[0];
+    setUploading(true);
+    setProgress(0);
+    const res = await subirMedio(file, { onProgress: (p) => setProgress(p.porcentaje) });
+    setUploading(false);
+    if (res.ok) {
+      const url = (_d = (_c = (_a = res.data) == null ? void 0 : _a.url) != null ? _c : (_b = res.data) == null ? void 0 : _b.url) != null ? _d : null;
+      onChange(url, res.data);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    onFiles(e.dataTransfer.files);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    !dialogOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Input, { value: value != null ? value : "", onChange: (e) => onChange(e.target.value || null), placeholder: "URL de imagen", clearable: true, onClear: () => onChange(null) }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setOpenPicker(true), children: "Elegir" })
+      ] }),
+      value && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl border border-slate-200 bg-white/60 p-2 dark:border-white/10 dark:bg-white/5", children: /* @__PURE__ */ jsx("div", { className: "aspect-video w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx("img", { src: value, alt: "preview", className: "h-full w-full object-cover" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { open: openPicker, onClose: () => {
+      setOpenPicker(false);
+      onClose == null ? void 0 : onClose();
+    }, size: "full", children: [
+      /* @__PURE__ */ jsx(Dialog.Header, { title: "Biblioteca de medios", description: "Selecciona una imagen o sube una nueva", onClose: () => {
+        setOpenPicker(false);
+        onClose == null ? void 0 : onClose();
+      } }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(ChartCard, { className: "lg:col-span-1", title: "Subir imagen", subtitle: /* @__PURE__ */ jsx("span", { children: "Arrastra una imagen o selecci\xF3nala" }), right: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Input, { unstyled: true, ref: inputRef, type: "file", accept, className: "hidden", onChange: (e) => onFiles(e.target.files) }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => {
+            var _a;
+            return (_a = inputRef.current) == null ? void 0 : _a.click();
+          }, disabled: uploading, children: "Seleccionar" })
+        ] }), children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onDragOver: (e) => {
+              e.preventDefault();
+              e.dataTransfer.dropEffect = "copy";
+            },
+            onDrop: handleDrop,
+            onClick: () => {
+              var _a;
+              return (_a = inputRef.current) == null ? void 0 : _a.click();
+            },
+            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",
+            children: [
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-8 w-8 text-slate-400", fill: "none", stroke: "currentColor", strokeWidth: "1.6", children: /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5M20 16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3" }) }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Soltar imagen aqu\xED" }),
+              uploading && /* @__PURE__ */ jsxs("div", { className: "mt-3 w-full", children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 text-xs text-slate-500", children: [
+                  progress,
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20", style: { width: `${progress}%` } }) })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(ChartCard, { className: "lg:col-span-1", title: "Desde enlace", subtitle: /* @__PURE__ */ jsx("span", { children: "Pega una URL http(s) v\xE1lida" }), compact: true, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "url",
+                placeholder: "https://\u2026",
+                value: linkValue,
+                onChange: (e) => {
+                  setLinkValue(e.target.value);
+                  setLinkError(null);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: async () => {
+                  var _a, _b, _c, _d;
+                  if (!linkValue) return;
+                  setLinkError(null);
+                  const isHttp = /^https?:\/\//i.test(linkValue);
+                  if (!isHttp) {
+                    setLinkError("Ingresa un enlace v\xE1lido (http/https)");
+                    return;
+                  }
+                  const importer = (_a = medios.importFromUrl) != null ? _a : medios.importarMedioDesdeUrl;
+                  if (importer) {
+                    setLinkLoading(true);
+                    const res = await importer(linkValue);
+                    setLinkLoading(false);
+                    if (res && res.ok) {
+                      const d = (_b = res.data) != null ? _b : res;
+                      onChange((_c = d == null ? void 0 : d.url) != null ? _c : null, d != null ? d : null);
+                      setOpenPicker(false);
+                      onClose == null ? void 0 : onClose();
+                    } else {
+                      setLinkError(String((_d = res == null ? void 0 : res.error) != null ? _d : "No se pudo importar el enlace"));
+                    }
+                  } else {
+                    onChange(linkValue || null, null);
+                    setOpenPicker(false);
+                    onClose == null ? void 0 : onClose();
+                  }
+                },
+                disabled: !linkValue || linkLoading,
+                children: linkLoading ? "Importando\u2026" : "Usar"
+              }
+            )
+          ] }),
+          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 })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2 space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-sm text-slate-500", children: [
+              "P\xE1gina ",
+              page,
+              " de ",
+              Math.max(1, lastPage)
+            ] }),
+            lastPage > 1 && /* @__PURE__ */ jsx(Pagination, { page, totalPages: lastPage, onPageChange: setPage })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: items.map((m) => {
+            var _a;
+            return /* @__PURE__ */ jsxs(
+              Button,
+              {
+                unstyled: true,
+                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-2 focus:ring-slate-300 dark:border-white/10 dark:bg-white/5",
+                onClick: () => {
+                  var _a2;
+                  onChange((_a2 = m.url) != null ? _a2 : null, m);
+                  setOpenPicker(false);
+                  onClose == null ? void 0 : onClose();
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-[1.01]" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "truncate p-1 text-xs", children: m.nombre })
+                ]
+              },
+              m.id
+            );
+          }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => {
+        setOpenPicker(false);
+        onClose == null ? void 0 : onClose();
+      }, children: "Cerrar" }) })
+    ] })
+  ] });
+}
+export {
+  MediaSelector as default
+};

package/dist/Money.d.mts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function Money({ amount, currency }: {
+declare function Money({ amount, currency, color }: {
     amount: number;
     currency?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 }): react_jsx_runtime.JSX.Element;
 
 export { Money as default };

package/dist/Money.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function Money({ amount, currency }: {
+declare function Money({ amount, currency, color }: {
     amount: number;
     currency?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 }): react_jsx_runtime.JSX.Element;
 
 export { Money as default };

package/dist/Money.js

@@ -23,8 +23,32 @@ __export(Money_exports, {
 });
 module.exports = __toCommonJS(Money_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function Money({ amount, currency = "MXN" }) {
+function Money({ amount, currency = "MXN", color = "blue" }) {
   const s = amount.toLocaleString("es-MX", { style: "currency", currency });
-  const cls = amount > 0 ? "font-semibold text-blue-600 dark:text-blue-400" : "text-slate-600";
+  const POS = {
+    slate: "font-semibold text-slate-600 dark:text-slate-400",
+    gray: "font-semibold text-gray-600 dark:text-gray-400",
+    zinc: "font-semibold text-zinc-600 dark:text-zinc-400",
+    neutral: "font-semibold text-neutral-600 dark:text-neutral-400",
+    stone: "font-semibold text-stone-600 dark:text-stone-400",
+    red: "font-semibold text-red-600 dark:text-red-400",
+    orange: "font-semibold text-orange-600 dark:text-orange-400",
+    amber: "font-semibold text-amber-600 dark:text-amber-400",
+    yellow: "font-semibold text-yellow-600 dark:text-yellow-400",
+    lime: "font-semibold text-lime-600 dark:text-lime-400",
+    green: "font-semibold text-green-600 dark:text-green-400",
+    emerald: "font-semibold text-emerald-600 dark:text-emerald-400",
+    teal: "font-semibold text-teal-600 dark:text-teal-400",
+    cyan: "font-semibold text-cyan-600 dark:text-cyan-400",
+    sky: "font-semibold text-sky-600 dark:text-sky-400",
+    blue: "font-semibold text-blue-600 dark:text-blue-400",
+    indigo: "font-semibold text-indigo-600 dark:text-indigo-400",
+    violet: "font-semibold text-violet-600 dark:text-violet-400",
+    purple: "font-semibold text-purple-600 dark:text-purple-400",
+    fuchsia: "font-semibold text-fuchsia-600 dark:text-fuchsia-400",
+    pink: "font-semibold text-pink-600 dark:text-pink-400",
+    rose: "font-semibold text-rose-600 dark:text-rose-400"
+  };
+  const cls = amount > 0 ? POS[color] : "text-slate-600";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cls, children: s });
 }

package/dist/Money.mjs

@@ -1,8 +1,32 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-function Money({ amount, currency = "MXN" }) {
+function Money({ amount, currency = "MXN", color = "blue" }) {
   const s = amount.toLocaleString("es-MX", { style: "currency", currency });
-  const cls = amount > 0 ? "font-semibold text-blue-600 dark:text-blue-400" : "text-slate-600";
+  const POS = {
+    slate: "font-semibold text-slate-600 dark:text-slate-400",
+    gray: "font-semibold text-gray-600 dark:text-gray-400",
+    zinc: "font-semibold text-zinc-600 dark:text-zinc-400",
+    neutral: "font-semibold text-neutral-600 dark:text-neutral-400",
+    stone: "font-semibold text-stone-600 dark:text-stone-400",
+    red: "font-semibold text-red-600 dark:text-red-400",
+    orange: "font-semibold text-orange-600 dark:text-orange-400",
+    amber: "font-semibold text-amber-600 dark:text-amber-400",
+    yellow: "font-semibold text-yellow-600 dark:text-yellow-400",
+    lime: "font-semibold text-lime-600 dark:text-lime-400",
+    green: "font-semibold text-green-600 dark:text-green-400",
+    emerald: "font-semibold text-emerald-600 dark:text-emerald-400",
+    teal: "font-semibold text-teal-600 dark:text-teal-400",
+    cyan: "font-semibold text-cyan-600 dark:text-cyan-400",
+    sky: "font-semibold text-sky-600 dark:text-sky-400",
+    blue: "font-semibold text-blue-600 dark:text-blue-400",
+    indigo: "font-semibold text-indigo-600 dark:text-indigo-400",
+    violet: "font-semibold text-violet-600 dark:text-violet-400",
+    purple: "font-semibold text-purple-600 dark:text-purple-400",
+    fuchsia: "font-semibold text-fuchsia-600 dark:text-fuchsia-400",
+    pink: "font-semibold text-pink-600 dark:text-pink-400",
+    rose: "font-semibold text-rose-600 dark:text-rose-400"
+  };
+  const cls = amount > 0 ? POS[color] : "text-slate-600";
   return /* @__PURE__ */ jsx("span", { className: cls, children: s });
 }
 export {

package/dist/MultiComboSelect.js

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ComboSelect = __toESM(require("./ComboSelect"));
 var import_Dialog = __toESM(require("./Dialog"));
+var import_Button = __toESM(require("./Button"));
 var import_Badge = __toESM(require("./Badge"));
 function MultiComboSelect({
   options,
@@ -99,8 +100,9 @@ function MultiComboSelect({
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }, v);
       }),
       enableDialog && value.length > maxVisibleTags && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           type: "button",
           className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/10 dark:text-slate-200",
           onClick: () => setDialogOpen(true),
@@ -127,8 +129,9 @@ function MultiComboSelect({
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: opt.label })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 type: "button",
                 className: "inline-flex h-8 items-center justify-center rounded-lg border border-slate-300/80 bg-white px-2 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
                 onClick: () => toggle(v),
@@ -138,15 +141,7 @@ function MultiComboSelect({
           ] }, v);
         })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
-          onClick: () => setDialogOpen(false),
-          children: "Cerrar"
-        }
-      ) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", size: "md", className: "shadow-sm", onClick: () => setDialogOpen(false), children: "Cerrar" }) })
     ] })
   ] });
 }