framepexls-ui-lib 0.2.9 → 0.2.11

package/dist/Pagination.mjs

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { LayoutGroup, motion } from "framer-motion";
+import { springSm } from "./animations";
 import Button from "./Button";
 function Pagination({
   page,
@@ -23,55 +25,90 @@ 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 PILL_BG = {
+    slate: "bg-slate-600",
+    gray: "bg-gray-600",
+    zinc: "bg-zinc-600",
+    neutral: "bg-neutral-600",
+    stone: "bg-stone-600",
+    red: "bg-red-600",
+    orange: "bg-orange-600",
+    amber: "bg-amber-600",
+    yellow: "bg-yellow-500",
+    lime: "bg-lime-600",
+    green: "bg-green-600",
+    emerald: "bg-emerald-600",
+    teal: "bg-teal-600",
+    cyan: "bg-cyan-600",
+    sky: "bg-sky-600",
+    blue: "bg-blue-600",
+    indigo: "bg-indigo-600",
+    violet: "bg-violet-600",
+    purple: "bg-purple-600",
+    fuchsia: "bg-fuchsia-600",
+    pink: "bg-pink-600",
+    rose: "bg-rose-600"
+  };
+  const ACTIVE_TEXT = {
+    slate: "text-white",
+    gray: "text-white",
+    zinc: "text-white",
+    neutral: "text-white",
+    stone: "text-white",
+    red: "text-white",
+    orange: "text-white",
+    amber: "text-white",
+    yellow: "text-slate-900",
+    lime: "text-white",
+    green: "text-white",
+    emerald: "text-white",
+    teal: "text-white",
+    cyan: "text-white",
+    sky: "text-white",
+    blue: "text-white",
+    indigo: "text-white",
+    violet: "text-white",
+    purple: "text-white",
+    fuchsia: "text-white",
+    pink: "text-white",
+    rose: "text-white"
   };
   const Btn = ({
     children,
     active,
     disabled,
     onClick
-  }) => /* @__PURE__ */ jsx(
+  }) => /* @__PURE__ */ jsxs(
     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 ? `${ACTIVE[color]} rounded-2xl shadow-sm` : "rounded-none text-slate-900 hover:bg-white/60"}
+      className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
+      ${active ? `${ACTIVE_TEXT[color]}` : "text-slate-900 hover:bg-white/60"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
-      children
+      children: [
+        active && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layoutId: "pagination-pill",
+            transition: springSm,
+            className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm will-change-transform`,
+            style: { willChange: "transform" }
+          }
+        ),
+        children
+      ]
     }
   );
-  return /* @__PURE__ */ jsx("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ jsxs("div", { className: "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: [
+  return /* @__PURE__ */ jsx("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ jsx(LayoutGroup, { 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" }) }) }),
     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" }) }) })
-  ] }) });
+  ] }) }) });
 }
 export {
   Pagination as default

package/dist/ReviewHistory.js

@@ -37,6 +37,8 @@ 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"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 function ReviewHistory({
   items,
   loading,
@@ -49,9 +51,9 @@ function ReviewHistory({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-muted", children: loading ? "Cargando\u2026" : `${items.length} total` })
     ] }),
     latest.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-muted", children: "Sin registros" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: latest.map((r) => {
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: latest.map((r) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, transition: import_animations.springSm, className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: statusTone(r.status), children: statusLabel(r.status) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-muted", children: formatDateTime(r.created_at) })
@@ -59,7 +61,7 @@ function ReviewHistory({
         r.comment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-sm text-foreground whitespace-pre-line", children: r.comment }),
         /* @__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)(import_Button.default, { unstyled: true, className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
   ] });
 }
@@ -72,9 +74,9 @@ function ReviewHistoryDialog({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Header, { title: "Historial de estado", onClose, showClose: true, compact: true }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2", children: [
       items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-muted", children: "Sin registros" }),
-      items.map((r) => {
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: items.map((r) => {
         var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: import_animations.springSm, className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: statusTone(r.status), children: statusLabel(r.status) }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-muted", children: formatDateTime(r.created_at) })
@@ -82,7 +84,7 @@ function ReviewHistoryDialog({
           r.comment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-sm text-foreground whitespace-pre-line", children: r.comment }),
           /* @__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);
-      })
+      }) })
     ] }) }),
     /* @__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" }) })
   ] });

package/dist/ReviewHistory.mjs

@@ -3,6 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Dialog from "./Dialog";
 import Button from "./Button";
 import Badge from "./Badge";
+import { AnimatePresence, motion } from "framer-motion";
+import { springSm } from "./animations";
 function ReviewHistory({
   items,
   loading,
@@ -15,9 +17,9 @@ function ReviewHistory({
       /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: loading ? "Cargando\u2026" : `${items.length} total` })
     ] }),
     latest.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "Sin registros" }),
-    /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: latest.map((r) => {
+    /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: latest.map((r) => {
       var _a;
-      return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+      return /* @__PURE__ */ jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, transition: springSm, className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsx("div", { className: "font-medium", children: /* @__PURE__ */ jsx(Badge, { tone: statusTone(r.status), children: statusLabel(r.status) }) }),
           /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: formatDateTime(r.created_at) })
@@ -25,7 +27,7 @@ function ReviewHistory({
         r.comment && /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-foreground whitespace-pre-line", children: r.comment }),
         /* @__PURE__ */ 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__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(Button, { unstyled: true, className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
   ] });
 }
@@ -38,9 +40,9 @@ function ReviewHistoryDialog({
     /* @__PURE__ */ jsx(Dialog.Header, { title: "Historial de estado", onClose, showClose: true, compact: true }),
     /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
       items.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "Sin registros" }),
-      items.map((r) => {
+      /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: items.map((r) => {
         var _a;
-        return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+        return /* @__PURE__ */ jsxs(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: springSm, className: "rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsx("div", { className: "font-medium", children: /* @__PURE__ */ jsx(Badge, { tone: statusTone(r.status), children: statusLabel(r.status) }) }),
             /* @__PURE__ */ jsx("div", { className: "text-xs text-muted", children: formatDateTime(r.created_at) })
@@ -48,7 +50,7 @@ function ReviewHistoryDialog({
           r.comment && /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-foreground whitespace-pre-line", children: r.comment }),
           /* @__PURE__ */ 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);
-      })
+      }) })
     ] }) }),
     /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", className: "shadow-sm", onClick: onClose, children: "Cerrar" }) })
   ] });

package/dist/SearchInput.js

@@ -34,6 +34,8 @@ __export(SearchInput_exports, {
 module.exports = __toCommonJS(SearchInput_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 var import_Input = __toESM(require("./Input"));
 function SearchInput({
   value,
@@ -71,14 +73,17 @@ function SearchInput({
           }
         },
         rightSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "svg",
+          import_framer_motion.motion.svg,
           {
             viewBox: "0 0 24 24",
-            className: "h-5 w-5 opacity-50",
+            className: "h-5 w-5 opacity-60",
             fill: "none",
             stroke: "currentColor",
             strokeWidth: "2",
             "aria-hidden": "true",
+            initial: false,
+            animate: { x: value ? 2 : 0, opacity: value ? 0.8 : 0.6 },
+            transition: import_animations.microTransition,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "7" })
@@ -86,6 +91,15 @@ function SearchInput({
           }
         )
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.span,
+      {
+        className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-sky-400/20",
+        initial: { opacity: 0 },
+        animate: { opacity: value ? 1 : 0 },
+        transition: import_animations.microTransition
+      }
     )
   ] });
 }

package/dist/SearchInput.mjs

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 import Input from "./Input";
 function SearchInput({
   value,
@@ -38,14 +40,17 @@ function SearchInput({
           }
         },
         rightSlot: /* @__PURE__ */ jsxs(
-          "svg",
+          motion.svg,
           {
             viewBox: "0 0 24 24",
-            className: "h-5 w-5 opacity-50",
+            className: "h-5 w-5 opacity-60",
             fill: "none",
             stroke: "currentColor",
             strokeWidth: "2",
             "aria-hidden": "true",
+            initial: false,
+            animate: { x: value ? 2 : 0, opacity: value ? 0.8 : 0.6 },
+            transition: microTransition,
             children: [
               /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" }),
               /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" })
@@ -53,6 +58,15 @@ function SearchInput({
           }
         )
       }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-sky-400/20",
+        initial: { opacity: 0 },
+        animate: { opacity: value ? 1 : 0 },
+        transition: microTransition
+      }
     )
   ] });
 }

package/dist/Select.js

@@ -34,6 +34,8 @@ __export(Select_exports, {
 module.exports = __toCommonJS(Select_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 var import_Button = __toESM(require("./Button"));
 const S = {
   sm: { h: "h-8", text: "text-[13px]", radius: "rounded-xl", padX: "px-3", itemPad: "px-3 py-1.5" },
@@ -223,9 +225,14 @@ function ModernSelect({
         }
       )
     ] }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "ul",
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_framer_motion.motion.ul,
       {
+        variants: import_animations.popOver,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: import_animations.menuTransition,
         id: `${selectId}-listbox`,
         role: "listbox",
         ref: listRef,
@@ -241,7 +248,8 @@ function ModernSelect({
           top: menuPos.top,
           left: menuPos.left,
           width: menuPos.width,
-          maxWidth: "calc(100vw - 24px)"
+          maxWidth: "calc(100vw - 24px)",
+          willChange: "transform, opacity"
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -290,7 +298,7 @@ function ModernSelect({
           })
         ]
       }
-    ),
+    ) : null }),
     hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: errorId, className: "mt-1 text-[12px] text-blue-600", children: typeof error === "string" ? error : "Corrige este campo" }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: hintId, className: "mt-1 text-[12px] text-slate-500", children: hint }) : null
   ] });
 }

package/dist/Select.mjs

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { popOver, menuTransition } from "./animations";
 import Button from "./Button";
 const S = {
   sm: { h: "h-8", text: "text-[13px]", radius: "rounded-xl", padX: "px-3", itemPad: "px-3 py-1.5" },
@@ -190,9 +192,14 @@ function ModernSelect({
         }
       )
     ] }),
-    open && /* @__PURE__ */ jsxs(
-      "ul",
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsxs(
+      motion.ul,
       {
+        variants: popOver,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: menuTransition,
         id: `${selectId}-listbox`,
         role: "listbox",
         ref: listRef,
@@ -208,7 +215,8 @@ function ModernSelect({
           top: menuPos.top,
           left: menuPos.left,
           width: menuPos.width,
-          maxWidth: "calc(100vw - 24px)"
+          maxWidth: "calc(100vw - 24px)",
+          willChange: "transform, opacity"
         },
         children: [
           /* @__PURE__ */ jsx(
@@ -257,7 +265,7 @@ function ModernSelect({
           })
         ]
       }
-    ),
+    ) : null }),
     hasError ? /* @__PURE__ */ jsx("div", { id: errorId, className: "mt-1 text-[12px] text-blue-600", children: typeof error === "string" ? error : "Corrige este campo" }) : hint ? /* @__PURE__ */ jsx("div", { id: hintId, className: "mt-1 text-[12px] text-slate-500", children: hint }) : null
   ] });
 }

package/dist/Sidebar.js

@@ -415,10 +415,19 @@ function RenderItem({
         "div",
         {
           className: [
-            "flex w-full min-w-0 items-center rounded-2xl px-3 py-2 text-[15px] transition gap-2",
+            "relative flex w-full min-w-0 items-center rounded-2xl px-3 py-2 text-[15px] transition gap-2",
             isActive ? `${WRAP_ACTIVE[color]} text-slate-900 dark:text-white` : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10"
           ].join(" "),
           children: [
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_framer_motion.motion.span,
+              {
+                layoutId: "sidebar-active",
+                className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]} will-change-transform`,
+                transition: { type: "spring", stiffness: 300, damping: 26 },
+                style: { zIndex: 0, willChange: "transform" }
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "span",
@@ -493,11 +502,20 @@ function RenderItem({
       onClick: () => go(item.key),
       title: collapsed ? item.label : void 0,
       className: [
-        "group flex w-full min-w-0 items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] transition",
+        "group relative flex w-full min-w-0 items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] transition",
         active ? `${WRAP_ACTIVE[color]} text-slate-900 dark:text-white` : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10",
         collapsed ? "justify-center" : ""
       ].join(" "),
       children: [
+        active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.span,
+          {
+            layoutId: "sidebar-active",
+            className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]} will-change-transform`,
+            transition: { type: "spring", stiffness: 300, damping: 26 },
+            style: { zIndex: 0, willChange: "transform" }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {

package/dist/Sidebar.mjs

@@ -382,10 +382,19 @@ function RenderItem({
         "div",
         {
           className: [
-            "flex w-full min-w-0 items-center rounded-2xl px-3 py-2 text-[15px] transition gap-2",
+            "relative flex w-full min-w-0 items-center rounded-2xl px-3 py-2 text-[15px] transition gap-2",
             isActive ? `${WRAP_ACTIVE[color]} text-slate-900 dark:text-white` : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10"
           ].join(" "),
           children: [
+            isActive && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                layoutId: "sidebar-active",
+                className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]} will-change-transform`,
+                transition: { type: "spring", stiffness: 300, damping: 26 },
+                style: { zIndex: 0, willChange: "transform" }
+              }
+            ),
             /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
               /* @__PURE__ */ jsx(
                 "span",
@@ -460,11 +469,20 @@ function RenderItem({
       onClick: () => go(item.key),
       title: collapsed ? item.label : void 0,
       className: [
-        "group flex w-full min-w-0 items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] transition",
+        "group relative flex w-full min-w-0 items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] transition",
         active ? `${WRAP_ACTIVE[color]} text-slate-900 dark:text-white` : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10",
         collapsed ? "justify-center" : ""
       ].join(" "),
       children: [
+        active && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layoutId: "sidebar-active",
+            className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]} will-change-transform`,
+            transition: { type: "spring", stiffness: 300, damping: 26 },
+            style: { zIndex: 0, willChange: "transform" }
+          }
+        ),
         /* @__PURE__ */ jsx(
           "span",
           {

package/dist/StatCard.js

@@ -26,14 +26,30 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_framer_motion = require("framer-motion");
 var import_react = require("react");
 var import_recharts = require("recharts");
+function MotionNumber({ value, format }) {
+  const mv = (0, import_framer_motion.useMotionValue)(value);
+  const [display, setDisplay] = (0, import_react.useState)(value);
+  const prevRef = (0, import_react.useRef)(value);
+  (0, import_react.useEffect)(() => {
+    const controls = (0, import_framer_motion.animate)(mv, value, { duration: 0.5, ease: "easeOut" });
+    const unsub = mv.on("change", (v) => setDisplay(v));
+    prevRef.current = value;
+    return () => {
+      controls.stop();
+      unsub();
+    };
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
+}
 function StatCard({ title, value, hint, spark }) {
   var _a;
   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: [
     /* @__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: value }),
+      /* @__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 }),
       hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-slate-400", children: hint })
     ] }),
     spark && spark.values.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-90", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.AreaChart, { data: spark.values.map((v, i) => ({ i, v })), margin: { top: 8, bottom: 0, left: 0, right: 0 }, children: [

package/dist/StatCard.mjs

@@ -1,16 +1,32 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import { useId } from "react";
+import { animate, motion, useMotionValue } from "framer-motion";
+import { useEffect, useId, useRef, useState } from "react";
 import { Area, AreaChart, ResponsiveContainer } from "recharts";
+function MotionNumber({ value, format }) {
+  const mv = useMotionValue(value);
+  const [display, setDisplay] = useState(value);
+  const prevRef = useRef(value);
+  useEffect(() => {
+    const controls = animate(mv, value, { duration: 0.5, ease: "easeOut" });
+    const unsub = mv.on("change", (v) => setDisplay(v));
+    prevRef.current = value;
+    return () => {
+      controls.stop();
+      unsub();
+    };
+  }, [value]);
+  return /* @__PURE__ */ jsx("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
+}
 function StatCard({ title, value, hint, spark }) {
   var _a;
   const gid = useId();
   const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
+  const isNumber = typeof value === "number";
   return /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ 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: [
     /* @__PURE__ */ jsxs("div", { className: "relative z-10", children: [
       /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: value }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: isNumber ? /* @__PURE__ */ jsx(MotionNumber, { value }) : value }),
       hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-slate-400", children: hint })
     ] }),
     spark && spark.values.length > 1 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-90", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: spark.values.map((v, i) => ({ i, v })), margin: { top: 8, bottom: 0, left: 0, right: 0 }, children: [