framepexls-ui-lib 0.3.1 → 0.3.3

package/dist/MediaTile.mjs

@@ -0,0 +1,116 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
+import Dropdown from "./Dropdown";
+function MediaTile({
+  imageUrl,
+  title,
+  subtitle,
+  copyUrl,
+  onPreview,
+  onRename,
+  onReplace,
+  onDelete,
+  loading,
+  menuSize = "md",
+  className
+}) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    if (!copyUrl) return;
+    try {
+      await navigator.clipboard.writeText(copyUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  };
+  const btnSize = menuSize === "lg" ? "h-11 w-11" : menuSize === "sm" ? "h-8 w-8" : "h-9 w-9";
+  const iconSize = menuSize === "lg" ? "h-7 w-7" : menuSize === "sm" ? "h-5 w-5" : "h-6 w-6";
+  const ImgWrap = onPreview ? (props) => /* @__PURE__ */ jsx("button", { type: "button", onClick: onPreview, ...props }) : (props) => /* @__PURE__ */ jsx("div", { ...props });
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          "overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-[var(--fx-surface)]",
+          className != null ? className : ""
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "aspect-square w-full", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse bg-slate-200 dark:bg-white/10" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-white/10" }),
+            /* @__PURE__ */ jsx("div", { className: "h-2 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-white/10" })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      whileHover: { y: -2 },
+      transition: microTransition,
+      className: [
+        "group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm ring-1 ring-black/5 backdrop-blur dark:border-white/10 dark:bg-[var(--fx-surface)]",
+        className != null ? className : ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxs(ImgWrap, { className: "aspect-square w-full bg-slate-100 relative text-left", children: [
+          imageUrl ? /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: imageUrl,
+              alt: title,
+              fill: true,
+              sizes: "(min-width:1024px) 20vw, (min-width:768px) 25vw, (min-width:640px) 33vw, 50vw",
+              className: "object-cover transition-transform duration-200 will-change-transform group-hover:scale-105"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "h-full w-full" }),
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 p-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: title }),
+            subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxs(Dropdown, { children: [
+            /* @__PURE__ */ jsx(Dropdown.Trigger, { "aria-label": "Acciones", className: [btnSize, "p-0 !gap-0"].join(" "), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: iconSize, fill: "currentColor", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2" }),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" }),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "2" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(Dropdown.Content, { children: [
+              onPreview && /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: onPreview, icon: /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("path", { d: "M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" }),
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+              ] }) }), children: "Ver" }),
+              copyUrl && /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: copy, icon: /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+              ] }) }), children: copied ? "Copiado" : "Copiar URL" }),
+              (onRename || onReplace) && /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+              onRename && /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: onRename, icon: /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("path", { d: "M3 21v-4l12-12 4 4-12 12z" }),
+                /* @__PURE__ */ jsx("path", { d: "M14 7l4 4" })
+              ] }) }), children: "Renombrar" }),
+              onReplace && /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: onReplace, icon: /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) }) }), children: "Reemplazar" }),
+              onDelete && /* @__PURE__ */ jsx(Dropdown.Item, { danger: true, onSelect: onDelete, icon: /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+                /* @__PURE__ */ jsx("path", { d: "M8 6v14a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6" }),
+                /* @__PURE__ */ jsx("path", { d: "M10 11v6M14 11v6" }),
+                /* @__PURE__ */ jsx("path", { d: "M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })
+              ] }) }), children: "Eliminar" })
+            ] })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MediaTile as default
+};

package/dist/MultiComboSelect.js

@@ -106,7 +106,7 @@ function MultiComboSelect({
         {
           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",
+          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-[var(--fx-surface)] dark:text-slate-200",
           onClick: () => setDialogOpen(true),
           title: "Ver todas",
           children: [
@@ -135,7 +135,7 @@ function MultiComboSelect({
               {
                 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",
+                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-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10",
                 onClick: () => toggle(v),
                 children: "Quitar"
               }

package/dist/MultiComboSelect.mjs

@@ -73,7 +73,7 @@ function MultiComboSelect({
         {
           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",
+          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-[var(--fx-surface)] dark:text-slate-200",
           onClick: () => setDialogOpen(true),
           title: "Ver todas",
           children: [
@@ -102,7 +102,7 @@ function MultiComboSelect({
               {
                 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",
+                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-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10",
                 onClick: () => toggle(v),
                 children: "Quitar"
               }

package/dist/Pagination.js

@@ -108,25 +108,27 @@ function Pagination({
     children,
     active,
     disabled,
-    onClick
+    onClick,
+    ariaLabel
   }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Button.default,
     {
       unstyled: true,
       disabled,
       onClick,
-      className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
-      ${active ? `${PILL_BG[color]} ${ACTIVE_TEXT[color]} rounded-2xl shadow-sm` : "text-slate-900 hover:bg-white/60"}
+      "aria-label": ariaLabel,
+      className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-white/10
+      ${active ? `${PILL_BG[color]} ${ACTIVE_TEXT[color]} rounded-2xl shadow-sm` : "text-slate-700 dark:text-slate-200 hover:bg-white/60 dark:hover:bg-white/10"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
       children
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative inline-flex overflow-hidden rounded-2xl border border-slate-200 bg-slate-100/60 shadow-sm dark:border-white/10 dark:bg-white/5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { disabled: page === 1, onClick: () => onPageChange(page - 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative inline-flex overflow-hidden rounded-2xl border border-slate-200 bg-slate-100/60 shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { disabled: page === 1, onClick: () => onPageChange(page - 1), ariaLabel: "P\xE1gina anterior", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
     range.map(
       (it, idx) => it === "..." ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-10 min-w-10 px-3 inline-flex items-center justify-center text-slate-500 dark:text-slate-400", children: "\u2026" }, `dots-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { active: it === page, onClick: () => onPageChange(it), children: it }, it)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { disabled: page === totalPages, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 6l6 6-6 6" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { disabled: page === totalPages, onClick: () => onPageChange(page + 1), ariaLabel: "P\xE1gina siguiente", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 6l6 6-6 6" }) }) })
   ] }) });
 }

package/dist/Pagination.mjs

@@ -75,26 +75,28 @@ function Pagination({
     children,
     active,
     disabled,
-    onClick
+    onClick,
+    ariaLabel
   }) => /* @__PURE__ */ jsx(
     Button,
     {
       unstyled: true,
       disabled,
       onClick,
-      className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
-      ${active ? `${PILL_BG[color]} ${ACTIVE_TEXT[color]} rounded-2xl shadow-sm` : "text-slate-900 hover:bg-white/60"}
+      "aria-label": ariaLabel,
+      className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-white/10
+      ${active ? `${PILL_BG[color]} ${ACTIVE_TEXT[color]} rounded-2xl shadow-sm` : "text-slate-700 dark:text-slate-200 hover:bg-white/60 dark:hover:bg-white/10"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
       children
     }
   );
-  return /* @__PURE__ */ jsx("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex overflow-hidden rounded-2xl border border-slate-200 bg-slate-100/60 shadow-sm dark:border-white/10 dark:bg-white/5", children: [
-    /* @__PURE__ */ jsx(Btn, { disabled: page === 1, onClick: () => onPageChange(page - 1), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) }) }),
+  return /* @__PURE__ */ jsx("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex overflow-hidden rounded-2xl border border-slate-200 bg-slate-100/60 shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
+    /* @__PURE__ */ jsx(Btn, { disabled: page === 1, onClick: () => onPageChange(page - 1), ariaLabel: "P\xE1gina anterior", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) }) }),
     range.map(
       (it, idx) => it === "..." ? /* @__PURE__ */ jsx("span", { className: "h-10 min-w-10 px-3 inline-flex items-center justify-center text-slate-500 dark:text-slate-400", children: "\u2026" }, `dots-${idx}`) : /* @__PURE__ */ jsx(Btn, { active: it === page, onClick: () => onPageChange(it), children: it }, it)
     ),
-    /* @__PURE__ */ jsx(Btn, { disabled: page === totalPages, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6" }) }) })
+    /* @__PURE__ */ jsx(Btn, { disabled: page === totalPages, onClick: () => onPageChange(page + 1), ariaLabel: "P\xE1gina siguiente", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6" }) }) })
   ] }) });
 }
 export {

package/dist/Sidebar.js

@@ -210,7 +210,7 @@ function Sidebar({
           variant: "ghost",
           size: "sm",
           leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.MenuIcon, {}),
-          className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10"
+          className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", onClick: onBrandClick, className: "flex items-center gap-2", children: [
@@ -283,7 +283,7 @@ function Sidebar({
                   variant: "ghost",
                   size: "sm",
                   leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CloseIcon, {}),
-                  className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200"
+                  className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: "Men\xFA" })
@@ -353,13 +353,13 @@ function SidebarInner({
           variant: "ghost",
           size: "sm",
           leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
-          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
+          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98] dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200",
           title: collapsed ? "Expandir" : "Contraer"
         }
       )
     ] }),
     collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 48, src: (_a = user == null ? void 0 : user.avatarUrl) != null ? _a : void 0, radiusClass: "rounded-2xl", color }) }),
-    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-2 pr-3 shadow-sm dark:border-white/10 dark:bg-white/5", children: [
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-2 pr-3 shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 48, src: (_b = user == null ? void 0 : user.avatarUrl) != null ? _b : void 0, radiusClass: "rounded-2xl", color }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-semibold", children: (_c = user == null ? void 0 : user.name) != null ? _c : "Usuario" }),
@@ -425,7 +425,7 @@ function RenderItem({
           {
             className: [
               "grid h-9 w-9 place-items-center rounded-xl border transition",
-              isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10"
+              isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-[var(--fx-surface)]` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]"
             ].join(" "),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
           }
@@ -461,7 +461,7 @@ function RenderItem({
                 {
                   className: [
                     "grid h-9 w-9 place-items-center rounded-xl border transition",
-                    isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10"
+                    isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-[var(--fx-surface)]` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]"
                   ].join(" "),
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
                 }
@@ -484,7 +484,7 @@ function RenderItem({
                 leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { open }),
                 className: [
                   "h-8 w-8 shrink-0 rounded-lg p-0 !gap-0 border",
-                  isActive ? `${TOGGLE_BORDER_ACTIVE[color]} bg-white/80 dark:bg-white/15` : "border-slate-200 bg-white dark:border-white/10 dark:bg-white/10"
+                  isActive ? `${TOGGLE_BORDER_ACTIVE[color]} bg-white/80 dark:bg-white/15` : "border-slate-200 bg-white dark:border-white/10 dark:bg-[var(--fx-surface)]"
                 ].join(" ")
               }
             )
@@ -500,7 +500,7 @@ function RenderItem({
           transition: { type: "tween", duration: 0.18 },
           className: "mt-1 overflow-hidden",
           style: { willChange: "height, opacity, transform" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10", children: children.map((ch) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]", children: children.map((ch) => {
             const active2 = ch.key === activeKey;
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_Button.default,
@@ -552,7 +552,7 @@ function RenderItem({
           {
             className: [
               "grid h-9 w-9 place-items-center rounded-xl border text-slate-700 transition group-hover:scale-105 dark:text-slate-200",
-              active ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10"
+              active ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-[var(--fx-surface)]` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]"
             ].join(" "),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
           }

package/dist/Sidebar.mjs

@@ -177,7 +177,7 @@ function Sidebar({
           variant: "ghost",
           size: "sm",
           leftIcon: /* @__PURE__ */ jsx(MenuIcon, {}),
-          className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10"
+          className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200 dark:hover:bg-white/10"
         }
       ),
       /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", onClick: onBrandClick, className: "flex items-center gap-2", children: [
@@ -250,7 +250,7 @@ function Sidebar({
                   variant: "ghost",
                   size: "sm",
                   leftIcon: /* @__PURE__ */ jsx(CloseIcon, {}),
-                  className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200"
+                  className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200"
                 }
               ),
               /* @__PURE__ */ jsx("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: "Men\xFA" })
@@ -320,13 +320,13 @@ function SidebarInner({
           variant: "ghost",
           size: "sm",
           leftIcon: /* @__PURE__ */ jsx(ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
-          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98] dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
+          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98] dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-200",
           title: collapsed ? "Expandir" : "Contraer"
         }
       )
     ] }),
     collapsed && /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ jsx(AvatarSquare, { size: 48, src: (_a = user == null ? void 0 : user.avatarUrl) != null ? _a : void 0, radiusClass: "rounded-2xl", color }) }),
-    !collapsed && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-2 pr-3 shadow-sm dark:border-white/10 dark:bg-white/5", children: [
+    !collapsed && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-2 pr-3 shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
       /* @__PURE__ */ jsx(AvatarSquare, { size: 48, src: (_b = user == null ? void 0 : user.avatarUrl) != null ? _b : void 0, radiusClass: "rounded-2xl", color }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold", children: (_c = user == null ? void 0 : user.name) != null ? _c : "Usuario" }),
@@ -392,7 +392,7 @@ function RenderItem({
           {
             className: [
               "grid h-9 w-9 place-items-center rounded-xl border transition",
-              isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10"
+              isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-[var(--fx-surface)]` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]"
             ].join(" "),
             children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
           }
@@ -428,7 +428,7 @@ function RenderItem({
                 {
                   className: [
                     "grid h-9 w-9 place-items-center rounded-xl border transition",
-                    isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10"
+                    isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-[var(--fx-surface)]` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]"
                   ].join(" "),
                   children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
                 }
@@ -451,7 +451,7 @@ function RenderItem({
                 leftIcon: /* @__PURE__ */ jsx(ChevronDown, { open }),
                 className: [
                   "h-8 w-8 shrink-0 rounded-lg p-0 !gap-0 border",
-                  isActive ? `${TOGGLE_BORDER_ACTIVE[color]} bg-white/80 dark:bg-white/15` : "border-slate-200 bg-white dark:border-white/10 dark:bg-white/10"
+                  isActive ? `${TOGGLE_BORDER_ACTIVE[color]} bg-white/80 dark:bg-white/15` : "border-slate-200 bg-white dark:border-white/10 dark:bg-[var(--fx-surface)]"
                 ].join(" ")
               }
             )
@@ -467,7 +467,7 @@ function RenderItem({
           transition: { type: "tween", duration: 0.18 },
           className: "mt-1 overflow-hidden",
           style: { willChange: "height, opacity, transform" },
-          children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10", children: children.map((ch) => {
+          children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]", children: children.map((ch) => {
             const active2 = ch.key === activeKey;
             return /* @__PURE__ */ jsx(
               Button,
@@ -519,7 +519,7 @@ function RenderItem({
           {
             className: [
               "grid h-9 w-9 place-items-center rounded-xl border text-slate-700 transition group-hover:scale-105 dark:text-slate-200",
-              active ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10"
+              active ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-[var(--fx-surface)]` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-[var(--fx-surface)]"
             ].join(" "),
             children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
           }

package/dist/Skeleton.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type SkeletonBaseProps = {
+    className?: string;
+    style?: React__default.CSSProperties;
+};
+declare function Skeleton({ className, style }: SkeletonBaseProps): react_jsx_runtime.JSX.Element;
+declare function SkeletonCircle({ size, className }: {
+    size?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SkeletonLine({ width, height, className }: {
+    width?: number | string;
+    height?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SkeletonText({ lines, widths }: {
+    lines?: number;
+    widths?: Array<number | string>;
+}): react_jsx_runtime.JSX.Element;
+declare function SkeletonContainer({ loading, skeleton, children }: {
+    loading: boolean;
+    skeleton: React__default.ReactNode;
+    children: React__default.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare const SkeletonCompound: typeof Skeleton & {
+    Circle: typeof SkeletonCircle;
+    Line: typeof SkeletonLine;
+    Text: typeof SkeletonText;
+    Container: typeof SkeletonContainer;
+};
+
+export { Skeleton, type SkeletonBaseProps, SkeletonCircle, SkeletonContainer, SkeletonLine, SkeletonText, SkeletonCompound as default };

package/dist/Skeleton.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type SkeletonBaseProps = {
+    className?: string;
+    style?: React__default.CSSProperties;
+};
+declare function Skeleton({ className, style }: SkeletonBaseProps): react_jsx_runtime.JSX.Element;
+declare function SkeletonCircle({ size, className }: {
+    size?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SkeletonLine({ width, height, className }: {
+    width?: number | string;
+    height?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SkeletonText({ lines, widths }: {
+    lines?: number;
+    widths?: Array<number | string>;
+}): react_jsx_runtime.JSX.Element;
+declare function SkeletonContainer({ loading, skeleton, children }: {
+    loading: boolean;
+    skeleton: React__default.ReactNode;
+    children: React__default.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare const SkeletonCompound: typeof Skeleton & {
+    Circle: typeof SkeletonCircle;
+    Line: typeof SkeletonLine;
+    Text: typeof SkeletonText;
+    Container: typeof SkeletonContainer;
+};
+
+export { Skeleton, type SkeletonBaseProps, SkeletonCircle, SkeletonContainer, SkeletonLine, SkeletonText, SkeletonCompound as default };

package/dist/Skeleton.js

@@ -0,0 +1,92 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Skeleton_exports = {};
+__export(Skeleton_exports, {
+  Skeleton: () => Skeleton,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonContainer: () => SkeletonContainer,
+  SkeletonLine: () => SkeletonLine,
+  SkeletonText: () => SkeletonText,
+  default: () => Skeleton_default
+});
+module.exports = __toCommonJS(Skeleton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Skeleton({ className, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: [
+        "animate-pulse rounded bg-slate-200 dark:bg-white/10",
+        className != null ? className : ""
+      ].join(" "),
+      style
+    }
+  );
+}
+function SkeletonCircle({ size = 40, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Skeleton,
+    {
+      className: ["rounded-full", className != null ? className : ""].join(" "),
+      style: { width: size, height: size }
+    }
+  );
+}
+function SkeletonLine({ width = "100%", height = 12, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Skeleton,
+    {
+      className: ["", className != null ? className : ""].join(" "),
+      style: { width, height, borderRadius: 6 }
+    }
+  );
+}
+function SkeletonText({ lines = 3, widths }) {
+  const arr = Array.from({ length: Math.max(1, lines) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: arr.map((_, i) => {
+    var _a;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SkeletonLine,
+      {
+        height: 12,
+        width: (_a = widths == null ? void 0 : widths[i]) != null ? _a : i === arr.length - 1 ? "70%" : "100%"
+      },
+      i
+    );
+  }) });
+}
+function SkeletonContainer({ loading, skeleton, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: loading ? skeleton : children });
+}
+const SkeletonCompound = Object.assign(Skeleton, {
+  Circle: SkeletonCircle,
+  Line: SkeletonLine,
+  Text: SkeletonText,
+  Container: SkeletonContainer
+});
+var Skeleton_default = SkeletonCompound;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonContainer,
+  SkeletonLine,
+  SkeletonText
+});

package/dist/Skeleton.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+function Skeleton({ className, style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "animate-pulse rounded bg-slate-200 dark:bg-white/10",
+        className != null ? className : ""
+      ].join(" "),
+      style
+    }
+  );
+}
+function SkeletonCircle({ size = 40, className }) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: ["rounded-full", className != null ? className : ""].join(" "),
+      style: { width: size, height: size }
+    }
+  );
+}
+function SkeletonLine({ width = "100%", height = 12, className }) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: ["", className != null ? className : ""].join(" "),
+      style: { width, height, borderRadius: 6 }
+    }
+  );
+}
+function SkeletonText({ lines = 3, widths }) {
+  const arr = Array.from({ length: Math.max(1, lines) });
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: arr.map((_, i) => {
+    var _a;
+    return /* @__PURE__ */ jsx(
+      SkeletonLine,
+      {
+        height: 12,
+        width: (_a = widths == null ? void 0 : widths[i]) != null ? _a : i === arr.length - 1 ? "70%" : "100%"
+      },
+      i
+    );
+  }) });
+}
+function SkeletonContainer({ loading, skeleton, children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: loading ? skeleton : children });
+}
+const SkeletonCompound = Object.assign(Skeleton, {
+  Circle: SkeletonCircle,
+  Line: SkeletonLine,
+  Text: SkeletonText,
+  Container: SkeletonContainer
+});
+var Skeleton_default = SkeletonCompound;
+export {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonContainer,
+  SkeletonLine,
+  SkeletonText,
+  Skeleton_default as default
+};

package/dist/StatCard.js

@@ -46,7 +46,7 @@ function StatCard({ title, value, hint, spark }) {
   const gid = (0, import_react.useId)();
   const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
   const isNumber = typeof value === "number";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "h-full group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:shadow-md dark:border-white/10 dark:bg-white/5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "h-full group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:shadow-md dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative z-10", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: isNumber ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MotionNumber, { value }) : value }),