framepexls-ui-lib 0.2.9 → 0.2.10

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,
         {

package/dist/Pagination.js

@@ -33,6 +33,8 @@ __export(Pagination_exports, {
 });
 module.exports = __toCommonJS(Pagination_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 var import_Button = __toESM(require("./Button"));
 function Pagination({
   page,
@@ -56,53 +58,87 @@ 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__ */ (0, import_jsx_runtime.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Button.default,
     {
       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__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.span,
+          {
+            layoutId: "pagination-pill",
+            transition: import_animations.springSm,
+            className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm`
+          }
+        ),
+        children
+      ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "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__ */ (0, import_jsx_runtime.jsx)("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LayoutGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative inline-flex overflow-hidden rounded-2xl border border-slate-200 bg-slate-100/60 shadow-sm dark:border-white/10 dark:bg-white/5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { disabled: page === 1, onClick: () => onPageChange(page - 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
     range.map(
       (it, idx) => it === "..." ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-10 min-w-10 px-3 inline-flex items-center justify-center text-slate-500 dark:text-slate-400", children: "\u2026" }, `dots-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { active: it === page, onClick: () => onPageChange(it), children: it }, it)
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { disabled: page === totalPages, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 6l6 6-6 6" }) }) })
-  ] }) });
+  ] }) }) });
 }