framepexls-ui-lib 0.2.8 → 0.2.10

package/dist/Sidebar.mjs

@@ -167,7 +167,7 @@ function Sidebar({
     setDrawerOpen(false);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-black/5 bg-white/80 px-3 backdrop-blur shadow-sm xl:hidden dark:bg-[#0b0a0a]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-black/5 bg-white/80 px-3 backdrop-blur shadow-sm xl:hidden dark:bg-[var(--fx-surface)]", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -192,7 +192,7 @@ function Sidebar({
       "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-[#0b0a0a] z-40",
+          "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",
           "transition-[width] duration-200",
           collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
         ].join(" "),
@@ -226,7 +226,7 @@ function Sidebar({
           animate: { x: 0 },
           exit: { x: -340 },
           transition: { type: "spring", stiffness: 260, damping: 28 },
-          className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[#0b0a0a]",
+          className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[var(--fx-surface)]",
           children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
               /* @__PURE__ */ jsx(
@@ -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]}`,
+                transition: { type: "spring", stiffness: 300, damping: 26 },
+                style: { zIndex: 0 }
+              }
+            ),
             /* @__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]}`,
+            transition: { type: "spring", stiffness: 300, damping: 26 },
+            style: { zIndex: 0 }
+          }
+        ),
         /* @__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: [

package/dist/Steps.js

@@ -35,6 +35,8 @@ __export(Steps_exports, {
 module.exports = __toCommonJS(Steps_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Button = __toESM(require("./Button"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 const cx = (...a) => a.filter(Boolean).join(" ");
 function Steps({
   steps,
@@ -44,7 +46,8 @@ function Steps({
   clickable = true,
   compact = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const progressPct = steps.length > 1 ? current / (steps.length - 1) * 100 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "nav",
     {
       "aria-label": "Progreso",
@@ -52,44 +55,55 @@ function Steps({
         "w-full rounded-2xl border border-slate-200/80 bg-white/50 p-3 dark:border-white/10 dark:bg-white/[0.04]",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
-        const state = i < current ? "done" : i === current ? "current" : "upcoming";
-        const canClick = clickable && i <= current && !s.disabled && onChange;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_Button.default,
-          {
-            unstyled: true,
-            type: "button",
-            disabled: !canClick,
-            onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
-            className: cx(
-              "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
-              state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
-              state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
-              state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
-            ),
-            "aria-current": state === "current" ? "step" : void 0,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "span",
-                {
-                  className: cx(
-                    "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
-                    state === "current" && "bg-blue-600 text-white ring-black/0",
-                    state === "done" && "bg-emerald-600 text-white ring-black/0",
-                    state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
-                  ),
-                  children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
-                }
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
+          const state = i < current ? "done" : i === current ? "current" : "upcoming";
+          const canClick = clickable && i <= current && !s.disabled && onChange;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_Button.default,
+            {
+              unstyled: true,
+              type: "button",
+              disabled: !canClick,
+              onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
+              className: cx(
+                "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
+                state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
+                state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
+                state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
-                !compact && s.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
-              ] })
-            ]
+              "aria-current": state === "current" ? "step" : void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: cx(
+                      "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
+                      state === "current" && "bg-blue-600 text-white ring-black/0",
+                      state === "done" && "bg-emerald-600 text-white ring-black/0",
+                      state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
+                    ),
+                    children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
+                  !compact && s.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
+                ] })
+              ]
+            }
+          ) }, s.key);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200/70 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.div,
+          {
+            className: "h-full rounded-full bg-blue-600 dark:bg-blue-400",
+            initial: { width: 0 },
+            animate: { width: `${Math.max(0, Math.min(100, progressPct))}%` },
+            transition: import_animations.springSm
           }
-        ) }, s.key);
-      }) })
+        ) })
+      ]
     }
   );
 }

package/dist/Steps.mjs

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Button from "./Button";
+import { motion } from "framer-motion";
+import { springSm } from "./animations";
 const cx = (...a) => a.filter(Boolean).join(" ");
 function Steps({
   steps,
@@ -10,7 +12,8 @@ function Steps({
   clickable = true,
   compact = false
 }) {
-  return /* @__PURE__ */ jsx(
+  const progressPct = steps.length > 1 ? current / (steps.length - 1) * 100 : 0;
+  return /* @__PURE__ */ jsxs(
     "nav",
     {
       "aria-label": "Progreso",
@@ -18,44 +21,55 @@ function Steps({
         "w-full rounded-2xl border border-slate-200/80 bg-white/50 p-3 dark:border-white/10 dark:bg-white/[0.04]",
         className
       ),
-      children: /* @__PURE__ */ jsx("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
-        const state = i < current ? "done" : i === current ? "current" : "upcoming";
-        const canClick = clickable && i <= current && !s.disabled && onChange;
-        return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            unstyled: true,
-            type: "button",
-            disabled: !canClick,
-            onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
-            className: cx(
-              "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
-              state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
-              state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
-              state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
-            ),
-            "aria-current": state === "current" ? "step" : void 0,
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cx(
-                    "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
-                    state === "current" && "bg-blue-600 text-white ring-black/0",
-                    state === "done" && "bg-emerald-600 text-white ring-black/0",
-                    state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
-                  ),
-                  children: state === "done" ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
-                }
+      children: [
+        /* @__PURE__ */ jsx("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
+          const state = i < current ? "done" : i === current ? "current" : "upcoming";
+          const canClick = clickable && i <= current && !s.disabled && onChange;
+          return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              unstyled: true,
+              type: "button",
+              disabled: !canClick,
+              onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
+              className: cx(
+                "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
+                state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
+                state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
+                state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
               ),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
-                !compact && s.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
-              ] })
-            ]
+              "aria-current": state === "current" ? "step" : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx(
+                      "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
+                      state === "current" && "bg-blue-600 text-white ring-black/0",
+                      state === "done" && "bg-emerald-600 text-white ring-black/0",
+                      state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
+                    ),
+                    children: state === "done" ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
+                  !compact && s.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
+                ] })
+              ]
+            }
+          ) }, s.key);
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200/70 dark:bg-white/10", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "h-full rounded-full bg-blue-600 dark:bg-blue-400",
+            initial: { width: 0 },
+            animate: { width: `${Math.max(0, Math.min(100, progressPct))}%` },
+            transition: springSm
           }
-        ) }, s.key);
-      }) })
+        ) })
+      ]
     }
   );
 }

package/dist/StorageUsage.js

@@ -33,6 +33,8 @@ __export(StorageUsage_exports, {
 });
 module.exports = __toCommonJS(StorageUsage_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 var import_Badge = __toESM(require("./Badge"));
 var import_InfoGrid = __toESM(require("./InfoGrid"));
 function cx(...a) {
@@ -75,13 +77,15 @@ function StorageUsage({
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+      import_framer_motion.motion.div,
       {
         className: cx(
           "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
           barClassName
         ),
-        style: { width: `${pct}%` }
+        initial: { width: 0 },
+        animate: { width: `${pct}%` },
+        transition: import_animations.springSm
       }
     ) }),
     showGrid && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/StorageUsage.mjs

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { springSm } from "./animations";
 import Badge from "./Badge";
 import InfoGrid from "./InfoGrid";
 function cx(...a) {
@@ -42,13 +44,15 @@ function StorageUsage({
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(
-      "div",
+      motion.div,
       {
         className: cx(
           "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
           barClassName
         ),
-        style: { width: `${pct}%` }
+        initial: { width: 0 },
+        animate: { width: `${pct}%` },
+        transition: springSm
       }
     ) }),
     showGrid && /* @__PURE__ */ jsx(

package/dist/Table.d.mts

@@ -27,5 +27,9 @@ declare function Td({ children, className, align, colSpan, }: {
     align?: "left" | "center" | "right";
     colSpan?: number;
 }): react_jsx_runtime.JSX.Element;
+declare function AnimatedBody({ children, className }: {
+    children: React__default.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { SortTh, Td, Th };
+export { AnimatedBody, SortTh, Td, Th };

package/dist/Table.d.ts

@@ -27,5 +27,9 @@ declare function Td({ children, className, align, colSpan, }: {
     align?: "left" | "center" | "right";
     colSpan?: number;
 }): react_jsx_runtime.JSX.Element;
+declare function AnimatedBody({ children, className }: {
+    children: React__default.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { SortTh, Td, Th };
+export { AnimatedBody, SortTh, Td, Th };

package/dist/Table.js

@@ -29,6 +29,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Table_exports = {};
 __export(Table_exports, {
+  AnimatedBody: () => AnimatedBody,
   SortTh: () => SortTh,
   Td: () => Td,
   Th: () => Th
@@ -36,6 +37,8 @@ __export(Table_exports, {
 module.exports = __toCommonJS(Table_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"));
 function useMounted() {
   const [mounted, setMounted] = import_react.default.useState(false);
@@ -97,19 +100,31 @@ function SortTh({
             unstyled: true,
             type: "button",
             onClick,
-            className: "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/10",
+            className: "group relative inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/10",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative", children: [
+                children,
+                active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_framer_motion.motion.span,
+                  {
+                    layoutId: "sort-underline",
+                    className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70",
+                    transition: import_animations.microTransition
+                  }
+                )
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "svg",
+                import_framer_motion.motion.svg,
                 {
                   suppressHydrationWarning: true,
                   viewBox: "0 0 24 24",
-                  className: `h-4 w-4 transition ${active ? "opacity-80" : "opacity-30"} ${asc ? "" : "rotate-180"}`,
+                  className: `h-4 w-4 ${active ? "" : "opacity-30"}`,
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "2",
                   "aria-hidden": "true",
+                  animate: { rotate: asc ? 0 : 180, opacity: active ? 0.8 : 0.3 },
+                  transition: import_animations.microTransition,
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 14l5-5 5 5" })
                 }
               )
@@ -147,8 +162,20 @@ function Td({
     }
   );
 }
+function AnimatedBody({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.tbody,
+    {
+      className,
+      initial: false,
+      transition: import_animations.microTransition,
+      children
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimatedBody,
   SortTh,
   Td,
   Th

package/dist/Table.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 Button from "./Button";
 function useMounted() {
   const [mounted, setMounted] = React.useState(false);
@@ -62,19 +64,31 @@ function SortTh({
             unstyled: true,
             type: "button",
             onClick,
-            className: "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/10",
+            className: "group relative inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/10",
             children: [
-              /* @__PURE__ */ jsx("span", { children }),
+              /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                children,
+                active && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    layoutId: "sort-underline",
+                    className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70",
+                    transition: microTransition
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsx(
-                "svg",
+                motion.svg,
                 {
                   suppressHydrationWarning: true,
                   viewBox: "0 0 24 24",
-                  className: `h-4 w-4 transition ${active ? "opacity-80" : "opacity-30"} ${asc ? "" : "rotate-180"}`,
+                  className: `h-4 w-4 ${active ? "" : "opacity-30"}`,
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "2",
                   "aria-hidden": "true",
+                  animate: { rotate: asc ? 0 : 180, opacity: active ? 0.8 : 0.3 },
+                  transition: microTransition,
                   children: /* @__PURE__ */ jsx("path", { d: "M7 14l5-5 5 5" })
                 }
               )
@@ -112,7 +126,19 @@ function Td({
     }
   );
 }
+function AnimatedBody({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    motion.tbody,
+    {
+      className,
+      initial: false,
+      transition: microTransition,
+      children
+    }
+  );
+}
 export {
+  AnimatedBody,
   SortTh,
   Td,
   Th