framepexls-ui-lib 0.3.0 → 0.3.2

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: [
@@ -222,12 +222,16 @@ function Sidebar({
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "aside",
+      import_framer_motion.motion.aside,
       {
         className: [
           "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
-          collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
+          collapsed ? "xl:px-3" : "xl:px-4"
         ].join(" "),
+        initial: false,
+        animate: { width: collapsed ? 112 : 288 },
+        transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
+        style: { width: collapsed ? 112 : 288 },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           SidebarInner,
           {
@@ -246,7 +250,16 @@ function Sidebar({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        className: "hidden xl:block",
+        initial: false,
+        animate: { width: collapsed ? 112 : 288 },
+        transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
+        style: { width: collapsed ? 112 : 288 }
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -270,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" })
@@ -315,10 +328,21 @@ function SidebarInner({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", className: "flex items-center gap-3", title: "Ir al inicio", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
-        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "leading-tight", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_framer_motion.motion.div,
+          {
+            initial: { opacity: 0, x: -6 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: -6 },
+            transition: { duration: 0.15 },
+            className: "leading-tight",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
+            ]
+          },
+          "brand-meta"
+        ) })
       ] }),
       !mobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.default,
@@ -329,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 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" }),
@@ -401,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" })
           }
@@ -437,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" })
                 }
@@ -460,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(" ")
               }
             )
@@ -476,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,
@@ -528,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: [
@@ -189,12 +189,16 @@ function Sidebar({
       ] })
     ] }),
     /* @__PURE__ */ jsx(
-      "aside",
+      motion.aside,
       {
         className: [
           "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
-          collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
+          collapsed ? "xl:px-3" : "xl:px-4"
         ].join(" "),
+        initial: false,
+        animate: { width: collapsed ? 112 : 288 },
+        transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
+        style: { width: collapsed ? 112 : 288 },
         children: /* @__PURE__ */ jsx(
           SidebarInner,
           {
@@ -213,7 +217,16 @@ function Sidebar({
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "hidden xl:block",
+        initial: false,
+        animate: { width: collapsed ? 112 : 288 },
+        transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
+        style: { width: collapsed ? 112 : 288 }
+      }
+    ),
     /* @__PURE__ */ jsx(AnimatePresence, { children: drawerOpen && /* @__PURE__ */ jsxs(motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
       /* @__PURE__ */ jsxs(
@@ -237,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" })
@@ -282,10 +295,21 @@ function SidebarInner({
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
       /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", className: "flex items-center gap-3", title: "Ir al inicio", children: [
         /* @__PURE__ */ jsx("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
-        !collapsed && /* @__PURE__ */ jsxs("div", { className: "leading-tight", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
-          /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
-        ] })
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, x: -6 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: -6 },
+            transition: { duration: 0.15 },
+            className: "leading-tight",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
+            ]
+          },
+          "brand-meta"
+        ) })
       ] }),
       !mobile && /* @__PURE__ */ jsx(
         Button,
@@ -296,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 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" }),
@@ -368,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" })
           }
@@ -404,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" })
                 }
@@ -427,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(" ")
               }
             )
@@ -443,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,
@@ -495,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 };