framepexls-ui-lib 0.1.13 → 0.1.14

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-3", 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" }) })
     ] })
   ] });
 }

package/dist/MultiComboSelect.mjs

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import ComboSelect from "./ComboSelect";
 import Dialog from "./Dialog";
+import Button from "./Button";
 import Badge from "./Badge";
 function MultiComboSelect({
   options,
@@ -66,8 +67,9 @@ function MultiComboSelect({
         return /* @__PURE__ */ jsx(Badge, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }, v);
       }),
       enableDialog && value.length > maxVisibleTags && /* @__PURE__ */ jsxs(
-        "button",
+        Button,
         {
+          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),
@@ -94,8 +96,9 @@ function MultiComboSelect({
               /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                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),
@@ -105,15 +108,7 @@ function MultiComboSelect({
           ] }, v);
         })
       ] }) }),
-      /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ 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__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", className: "shadow-sm", onClick: () => setDialogOpen(false), children: "Cerrar" }) })
     ] })
   ] });
 }

package/dist/OrderButton.js

@@ -1,8 +1,10 @@
 "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)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 OrderButton_exports = {};
 __export(OrderButton_exports, {
@@ -23,10 +33,12 @@ __export(OrderButton_exports, {
 });
 module.exports = __toCommonJS(OrderButton_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_Button = __toESM(require("./Button"));
 function OrderButton({ label, active, asc, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
+    import_Button.default,
     {
+      unstyled: true,
       onClick,
       className: "rounded-xl border border-slate-200 px-3 py-2 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
       children: [

package/dist/OrderButton.mjs

@@ -1,9 +1,11 @@
 "use client";
 import { jsxs } from "react/jsx-runtime";
+import Button from "./Button";
 function OrderButton({ label, active, asc, onClick }) {
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
+      unstyled: true,
       onClick,
       className: "rounded-xl border border-slate-200 px-3 py-2 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
       children: [

package/dist/Pagination.d.mts

@@ -6,7 +6,8 @@ type PaginationProps = {
     onPageChange: (p: number) => void;
     maxButtons?: number;
     className?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, color, }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 export { type PaginationProps, Pagination as default };

package/dist/Pagination.d.ts

@@ -6,7 +6,8 @@ type PaginationProps = {
     onPageChange: (p: number) => void;
     maxButtons?: number;
     className?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, color, }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 export { type PaginationProps, Pagination as default };

package/dist/Pagination.js

@@ -1,8 +1,10 @@
 "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)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 Pagination_exports = {};
 __export(Pagination_exports, {
@@ -23,12 +33,14 @@ __export(Pagination_exports, {
 });
 module.exports = __toCommonJS(Pagination_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_Button = __toESM(require("./Button"));
 function Pagination({
   page,
   totalPages,
   onPageChange,
   maxButtons = 7,
-  className = ""
+  className = "",
+  color = "blue"
 }) {
   const getRange = () => {
     if (totalPages <= maxButtons)
@@ -44,18 +56,43 @@ function Pagination({
     return range2;
   };
   const range = getRange();
+  const ACTIVE = {
+    slate: "bg-slate-600 text-white",
+    gray: "bg-gray-600 text-white",
+    zinc: "bg-zinc-600 text-white",
+    neutral: "bg-neutral-600 text-white",
+    stone: "bg-stone-600 text-white",
+    red: "bg-red-600 text-white",
+    orange: "bg-orange-600 text-white",
+    amber: "bg-amber-600 text-white",
+    yellow: "bg-yellow-500 text-slate-900",
+    lime: "bg-lime-600 text-white",
+    green: "bg-green-600 text-white",
+    emerald: "bg-emerald-600 text-white",
+    teal: "bg-teal-600 text-white",
+    cyan: "bg-cyan-600 text-white",
+    sky: "bg-sky-600 text-white",
+    blue: "bg-blue-600 text-white",
+    indigo: "bg-indigo-600 text-white",
+    violet: "bg-violet-600 text-white",
+    purple: "bg-purple-600 text-white",
+    fuchsia: "bg-fuchsia-600 text-white",
+    pink: "bg-pink-600 text-white",
+    rose: "bg-rose-600 text-white"
+  };
   const Btn = ({
     children,
     active,
     disabled,
     onClick
   }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
+    import_Button.default,
     {
+      unstyled: true,
       disabled,
       onClick,
       className: `h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
-      ${active ? "bg-blue-600 text-white rounded-2xl shadow-sm" : "rounded-none text-slate-900 hover:bg-white/60"}
+      ${active ? `${ACTIVE[color]} rounded-2xl shadow-sm` : "rounded-none text-slate-900 hover:bg-white/60"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
       children

package/dist/Pagination.mjs

@@ -1,11 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import Button from "./Button";
 function Pagination({
   page,
   totalPages,
   onPageChange,
   maxButtons = 7,
-  className = ""
+  className = "",
+  color = "blue"
 }) {
   const getRange = () => {
     if (totalPages <= maxButtons)
@@ -21,18 +23,43 @@ function Pagination({
     return range2;
   };
   const range = getRange();
+  const ACTIVE = {
+    slate: "bg-slate-600 text-white",
+    gray: "bg-gray-600 text-white",
+    zinc: "bg-zinc-600 text-white",
+    neutral: "bg-neutral-600 text-white",
+    stone: "bg-stone-600 text-white",
+    red: "bg-red-600 text-white",
+    orange: "bg-orange-600 text-white",
+    amber: "bg-amber-600 text-white",
+    yellow: "bg-yellow-500 text-slate-900",
+    lime: "bg-lime-600 text-white",
+    green: "bg-green-600 text-white",
+    emerald: "bg-emerald-600 text-white",
+    teal: "bg-teal-600 text-white",
+    cyan: "bg-cyan-600 text-white",
+    sky: "bg-sky-600 text-white",
+    blue: "bg-blue-600 text-white",
+    indigo: "bg-indigo-600 text-white",
+    violet: "bg-violet-600 text-white",
+    purple: "bg-purple-600 text-white",
+    fuchsia: "bg-fuchsia-600 text-white",
+    pink: "bg-pink-600 text-white",
+    rose: "bg-rose-600 text-white"
+  };
   const Btn = ({
     children,
     active,
     disabled,
     onClick
   }) => /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
+      unstyled: true,
       disabled,
       onClick,
       className: `h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
-      ${active ? "bg-blue-600 text-white rounded-2xl shadow-sm" : "rounded-none text-slate-900 hover:bg-white/60"}
+      ${active ? `${ACTIVE[color]} rounded-2xl shadow-sm` : "rounded-none text-slate-900 hover:bg-white/60"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
       children

package/dist/ReviewHistory.js

@@ -35,6 +35,7 @@ __export(ReviewHistory_exports, {
 module.exports = __toCommonJS(ReviewHistory_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Dialog = __toESM(require("./Dialog"));
+var import_Button = __toESM(require("./Button"));
 var import_Badge = __toESM(require("./Badge"));
 function ReviewHistory({
   items,
@@ -59,7 +60,7 @@ function ReviewHistory({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-muted", children: r.by_name || r.by_email ? `${(_a = r.by_name) != null ? _a : ""} ${r.by_email ? `\xB7 ${r.by_email}` : ""}` : r.user_id ? "Usuario interno" : "Invitado" })
       ] }, r.id);
     }) }),
-    items.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
+    items.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
   ] });
 }
 function ReviewHistoryDialog({
@@ -83,14 +84,7 @@ function ReviewHistoryDialog({
         ] }, r.id);
       })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "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: onClose,
-        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: onClose, children: "Cerrar" }) })
   ] });
 }
 function formatDateTime(value) {