framepexls-ui-lib 0.2.8 → 0.2.10

package/dist/FiltersMultiSelect.js

@@ -109,7 +109,7 @@ function FiltersMultiSelect({
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -6 },
         className: clsx(
-          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
           align === "end" ? "right-0" : "left-0"
         ),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap", style: panelStyle, children: groups.map((g) => {

package/dist/FiltersMultiSelect.mjs

@@ -76,7 +76,7 @@ function FiltersMultiSelect({
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -6 },
         className: clsx(
-          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0b0a0a]",
+          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
           align === "end" ? "right-0" : "left-0"
         ),
         children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap", style: panelStyle, children: groups.map((g) => {

package/dist/Input.js

@@ -34,6 +34,8 @@ __export(Input_exports, {
 module.exports = __toCommonJS(Input_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 cx(...a) {
   return a.filter(Boolean).join(" ");
@@ -56,6 +58,7 @@ const Input = import_react.default.forwardRef(
     }
     const showClear = clearable && !!value && !props.disabled;
     const readOnly = !onChange;
+    const [focused, setFocused] = import_react.default.useState(false);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative content-center", children: [
       leftSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400", children: leftSlot }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -65,6 +68,16 @@ const Input = import_react.default.forwardRef(
           value,
           onChange,
           readOnly,
+          onFocus: (e) => {
+            var _a;
+            setFocused(true);
+            (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+          },
+          onBlur: (e) => {
+            var _a;
+            setFocused(false);
+            (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+          },
           "aria-invalid": error ? true : void 0,
           className: cx(
             baseControl,
@@ -94,6 +107,16 @@ const Input = import_react.default.forwardRef(
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
         }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.span,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 rounded-2xl",
+          initial: false,
+          animate: { boxShadow: focused ? "0 0 0 2px rgba(59,130,246,0.18)" : "0 0 0 0 rgba(0,0,0,0)" },
+          transition: import_animations.microTransition
+        }
       )
     ] });
   }

package/dist/Input.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 cx(...a) {
   return a.filter(Boolean).join(" ");
@@ -23,6 +25,7 @@ const Input = React.forwardRef(
     }
     const showClear = clearable && !!value && !props.disabled;
     const readOnly = !onChange;
+    const [focused, setFocused] = React.useState(false);
     return /* @__PURE__ */ jsxs("div", { className: "relative content-center", children: [
       leftSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400", children: leftSlot }),
       /* @__PURE__ */ jsx(
@@ -32,6 +35,16 @@ const Input = React.forwardRef(
           value,
           onChange,
           readOnly,
+          onFocus: (e) => {
+            var _a;
+            setFocused(true);
+            (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+          },
+          onBlur: (e) => {
+            var _a;
+            setFocused(false);
+            (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+          },
           "aria-invalid": error ? true : void 0,
           className: cx(
             baseControl,
@@ -61,6 +74,16 @@ const Input = React.forwardRef(
           },
           children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
         }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 rounded-2xl",
+          initial: false,
+          animate: { boxShadow: focused ? "0 0 0 2px rgba(59,130,246,0.18)" : "0 0 0 0 rgba(0,0,0,0)" },
+          transition: microTransition
+        }
       )
     ] });
   }

package/dist/KpiCard.js

@@ -23,13 +23,37 @@ __export(KpiCard_exports, {
 });
 module.exports = __toCommonJS(KpiCard_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_framer_motion = require("framer-motion");
+function MotionNumber({ value, format }) {
+  const mv = (0, import_framer_motion.useMotionValue)(value);
+  const [display, setDisplay] = (0, import_react.useState)(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));
+    return () => {
+      controls.stop();
+      unsub();
+    };
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
+}
 function KpiCard({ label, value, delta, help }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-white/10 dark:text-white", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-600 dark:text-white/80", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rounded-full bg-blue-600/10 px-2 py-0.5 text-[12px] font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-200", children: delta })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.span,
+        {
+          initial: { opacity: 0, y: -4 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.2 },
+          className: "rounded-full bg-blue-600/10 px-2 py-0.5 text-[12px] font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-200",
+          children: delta
+        }
+      )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xl font-extrabold", children: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xl font-extrabold", children: typeof value === "number" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MotionNumber, { value }) : value }),
     help && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-[12px] text-slate-500 dark:text-white/70", children: help })
   ] });
 }

package/dist/KpiCard.mjs

@@ -1,12 +1,36 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { animate, useMotionValue, motion } from "framer-motion";
+function MotionNumber({ value, format }) {
+  const mv = useMotionValue(value);
+  const [display, setDisplay] = useState(value);
+  useEffect(() => {
+    const controls = animate(mv, value, { duration: 0.5, ease: "easeOut" });
+    const unsub = mv.on("change", (v) => setDisplay(v));
+    return () => {
+      controls.stop();
+      unsub();
+    };
+  }, [value]);
+  return /* @__PURE__ */ jsx("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
+}
 function KpiCard({ label, value, delta, help }) {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-white/10 dark:text-white", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("span", { className: "text-slate-600 dark:text-white/80", children: label }),
-      /* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-600/10 px-2 py-0.5 text-[12px] font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-200", children: delta })
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          initial: { opacity: 0, y: -4 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.2 },
+          className: "rounded-full bg-blue-600/10 px-2 py-0.5 text-[12px] font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-200",
+          children: delta
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-1 text-xl font-extrabold", children: value }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-xl font-extrabold", children: typeof value === "number" ? /* @__PURE__ */ jsx(MotionNumber, { value }) : value }),
     help && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[12px] text-slate-500 dark:text-white/70", children: help })
   ] });
 }

package/dist/Link.js

@@ -33,6 +33,8 @@ __export(Link_exports, {
 });
 module.exports = __toCommonJS(Link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 var import_link = __toESM(require("next/link"));
 function Link({
   href,
@@ -75,10 +77,22 @@ function Link({
   const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "span",
     {
-      className: [base, sizeCls, COLORS[color], deco, className != null ? className : ""].join(" "),
+      className: [base, sizeCls, COLORS[color], className != null ? className : "", "relative group"].join(" "),
       ...rest,
       children: [
-        children,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: deco ? "" : "", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.span,
+          {
+            layoutId: "link-underline",
+            className: `absolute left-0 right-0 -bottom-0.5 h-[2px] origin-left rounded-full ${underline === "none" ? "hidden" : ""} ${underline === "always" ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
+            style: { backgroundColor: "currentColor" },
+            initial: { scaleX: underline === "always" ? 1 : 0 },
+            animate: { scaleX: underline === "always" ? 1 : 0 },
+            whileHover: underline === "hover" ? { scaleX: 1 } : void 0,
+            transition: import_animations.microTransition
+          }
+        ),
         showAnchorIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-[15px] w-[15px] opacity-80", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 3h7v7" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 14L21 3" }),

package/dist/Link.mjs

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 import NextLink from "next/link";
 function Link({
   href,
@@ -42,10 +44,22 @@ function Link({
   const content = /* @__PURE__ */ jsxs(
     "span",
     {
-      className: [base, sizeCls, COLORS[color], deco, className != null ? className : ""].join(" "),
+      className: [base, sizeCls, COLORS[color], className != null ? className : "", "relative group"].join(" "),
       ...rest,
       children: [
-        children,
+        /* @__PURE__ */ jsx("span", { className: deco ? "" : "", children }),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layoutId: "link-underline",
+            className: `absolute left-0 right-0 -bottom-0.5 h-[2px] origin-left rounded-full ${underline === "none" ? "hidden" : ""} ${underline === "always" ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
+            style: { backgroundColor: "currentColor" },
+            initial: { scaleX: underline === "always" ? 1 : 0 },
+            animate: { scaleX: underline === "always" ? 1 : 0 },
+            whileHover: underline === "hover" ? { scaleX: 1 } : void 0,
+            transition: microTransition
+          }
+        ),
         showAnchorIcon && /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-[15px] w-[15px] opacity-80", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: [
           /* @__PURE__ */ jsx("path", { d: "M14 3h7v7" }),
           /* @__PURE__ */ jsx("path", { d: "M10 14L21 3" }),

package/dist/MediaCard.js

@@ -36,6 +36,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_image = __toESM(require("next/image"));
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 function MediaCard({
   imageUrl,
   title,
@@ -57,23 +59,28 @@ function MediaCard({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+    import_framer_motion.motion.div,
     {
+      whileHover: { y: -2 },
+      transition: import_animations.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-white/5",
         className != null ? className : ""
       ].join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full bg-slate-100 relative", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_image.default,
-          {
-            src: imageUrl,
-            alt: title,
-            fill: true,
-            sizes: "(min-width:1024px) 20vw, (min-width:768px) 25vw, (min-width:640px) 33vw, 50vw",
-            className: "object-cover"
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "aspect-square w-full bg-slate-100 relative", children: [
+          imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_image.default,
+            {
+              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__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 p-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-medium", children: title }),

package/dist/MediaCard.mjs

@@ -3,6 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Image from "next/image";
 import ActionIconButton from "./ActionIconButton";
+import { motion } from "framer-motion";
+import { microTransition } from "./animations";
 function MediaCard({
   imageUrl,
   title,
@@ -24,23 +26,28 @@ function MediaCard({
     }
   };
   return /* @__PURE__ */ jsxs(
-    "div",
+    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-white/5",
         className != null ? className : ""
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-slate-100 relative", 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"
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "h-full w-full" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full bg-slate-100 relative", 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 }),

package/dist/MediaSelector.js

@@ -39,6 +39,8 @@ var import_Button = __toESM(require("./Button"));
 var import_Input = __toESM(require("./Input"));
 var import_Dialog = __toESM(require("./Dialog"));
 var import_Pagination = __toESM(require("./Pagination"));
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 function MediaSelector({
   value,
   onChange,
@@ -126,7 +128,7 @@ function MediaSelector({
                   progress,
                   "%"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20", style: { width: `${progress}%` } }) })
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20", initial: { width: 0 }, animate: { width: `${progress}%` }, transition: import_animations.springSm }) })
               ] })
             ]
           }
@@ -193,9 +195,9 @@ function MediaSelector({
             ] }),
             lastPage > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.default, { page, totalPages: lastPage, onPageChange: setPage })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: items.map((m) => {
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: items.map((m) => {
             var _a;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { layout: true, initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 8 }, transition: import_animations.springSm, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_Button.default,
               {
                 unstyled: true,
@@ -207,13 +209,12 @@ function MediaSelector({
                   onClose == null ? void 0 : onClose();
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-[1.01]" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-105" }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate p-1 text-xs", children: m.nombre })
                 ]
-              },
-              m.id
-            );
-          }) })
+              }
+            ) }, m.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", onClick: () => {

package/dist/MediaSelector.mjs

@@ -6,6 +6,8 @@ import Button from "./Button";
 import Input from "./Input";
 import Dialog from "./Dialog";
 import Pagination from "./Pagination";
+import { AnimatePresence, motion } from "framer-motion";
+import { springSm } from "./animations";
 function MediaSelector({
   value,
   onChange,
@@ -93,7 +95,7 @@ function MediaSelector({
                   progress,
                   "%"
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20", style: { width: `${progress}%` } }) })
+                /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(motion.div, { className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20", initial: { width: 0 }, animate: { width: `${progress}%` }, transition: springSm }) })
               ] })
             ]
           }
@@ -160,9 +162,9 @@ function MediaSelector({
             ] }),
             lastPage > 1 && /* @__PURE__ */ jsx(Pagination, { page, totalPages: lastPage, onPageChange: setPage })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: items.map((m) => {
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: items.map((m) => {
             var _a;
-            return /* @__PURE__ */ jsxs(
+            return /* @__PURE__ */ jsx(motion.div, { layout: true, initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 8 }, transition: springSm, children: /* @__PURE__ */ jsxs(
               Button,
               {
                 unstyled: true,
@@ -174,13 +176,12 @@ function MediaSelector({
                   onClose == null ? void 0 : onClose();
                 },
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-[1.01]" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden rounded-xl bg-slate-100", children: /* @__PURE__ */ jsx("img", { src: (_a = m.url) != null ? _a : "", alt: m.nombre, className: "h-full w-full object-cover transition group-hover:scale-105" }) }),
                   /* @__PURE__ */ jsx("div", { className: "truncate p-1 text-xs", children: m.nombre })
                 ]
-              },
-              m.id
-            );
-          }) })
+              }
+            ) }, m.id);
+          }) }) })
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => {

package/dist/MotionProvider.d.mts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+declare function MotionProvider({ children, reducedMotion }: {
+    children: React__default.ReactNode;
+    reducedMotion?: "user" | "always" | "never";
+}): react_jsx_runtime.JSX.Element;
+
+export { MotionProvider as default };

package/dist/MotionProvider.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+declare function MotionProvider({ children, reducedMotion }: {
+    children: React__default.ReactNode;
+    reducedMotion?: "user" | "always" | "never";
+}): react_jsx_runtime.JSX.Element;
+
+export { MotionProvider as default };

package/dist/MotionProvider.js

@@ -0,0 +1,29 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MotionProvider_exports = {};
+__export(MotionProvider_exports, {
+  default: () => MotionProvider
+});
+module.exports = __toCommonJS(MotionProvider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+function MotionProvider({ children, reducedMotion = "user" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.MotionConfig, { reducedMotion, children });
+}

package/dist/MotionProvider.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { MotionConfig } from "framer-motion";
+function MotionProvider({ children, reducedMotion = "user" }) {
+  return /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, children });
+}
+export {
+  MotionProvider as default
+};

package/dist/MultiComboSelect.js

@@ -38,6 +38,8 @@ var import_ComboSelect = __toESM(require("./ComboSelect"));
 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 MultiComboSelect({
   options,
   value,
@@ -93,12 +95,12 @@ function MultiComboSelect({
         }
       }
     ),
-    value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
-      value.slice(0, Math.max(0, maxVisibleTags)).map((v) => {
+    value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, { className: "mt-2 flex flex-wrap gap-1.5", layout: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: value.slice(0, Math.max(0, maxVisibleTags)).map((v) => {
         const opt = options.find((o) => o.value === v);
         if (!opt) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }, v);
-      }),
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { layout: true, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: import_animations.springSm, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }) }, v);
+      }) }),
       enableDialog && value.length > maxVisibleTags && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_Button.default,
         {

package/dist/MultiComboSelect.mjs

@@ -5,6 +5,8 @@ import ComboSelect from "./ComboSelect";
 import Dialog from "./Dialog";
 import Button from "./Button";
 import Badge from "./Badge";
+import { AnimatePresence, motion } from "framer-motion";
+import { springSm } from "./animations";
 function MultiComboSelect({
   options,
   value,
@@ -60,12 +62,12 @@ function MultiComboSelect({
         }
       }
     ),
-    value.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
-      value.slice(0, Math.max(0, maxVisibleTags)).map((v) => {
+    value.length > 0 && /* @__PURE__ */ jsxs(motion.div, { className: "mt-2 flex flex-wrap gap-1.5", layout: true, children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: value.slice(0, Math.max(0, maxVisibleTags)).map((v) => {
         const opt = options.find((o) => o.value === v);
         if (!opt) return null;
-        return /* @__PURE__ */ jsx(Badge, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }, v);
-      }),
+        return /* @__PURE__ */ jsx(motion.div, { layout: true, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: springSm, children: /* @__PURE__ */ jsx(Badge, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }) }, v);
+      }) }),
       enableDialog && value.length > maxVisibleTags && /* @__PURE__ */ jsxs(
         Button,
         {