framepexls-ui-lib 0.2.10 → 0.2.12

package/dist/Checkbox.d.mts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Checkbox.d.ts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/ComboSelect.js

@@ -280,7 +280,7 @@ function ComboSelect({
       ]
     }
   );
-  const dropdown = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && dropStyle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  const dropdown = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open && dropStyle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -302,7 +302,7 @@ function ComboSelect({
         ref: dropRef,
         role: "listbox",
         id: listId,
-        style: dropStyle,
+        style: { ...dropStyle, willChange: "transform, opacity" },
         variants: import_animations.popOver,
         initial: "initial",
         animate: "animate",

package/dist/ComboSelect.mjs

@@ -247,7 +247,7 @@ function ComboSelect({
       ]
     }
   );
-  const dropdown = /* @__PURE__ */ jsx(AnimatePresence, { children: open && dropStyle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const dropdown = /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && dropStyle ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -269,7 +269,7 @@ function ComboSelect({
         ref: dropRef,
         role: "listbox",
         id: listId,
-        style: dropStyle,
+        style: { ...dropStyle, willChange: "transform, opacity" },
         variants: popOver,
         initial: "initial",
         animate: "animate",

package/dist/DateTimeField.js

@@ -254,7 +254,7 @@ function DateTimeField({
       animate: "animate",
       transition: import_animations.menuTransition,
       ref: popRef,
-      style: stylePop,
+      style: { ...stylePop, willChange: "transform, opacity" },
       "data-dtf-pop": true,
       className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [

package/dist/DateTimeField.mjs

@@ -221,7 +221,7 @@ function DateTimeField({
       animate: "animate",
       transition: menuTransition,
       ref: popRef,
-      style: stylePop,
+      style: { ...stylePop, willChange: "transform, opacity" },
       "data-dtf-pop": true,
       className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [

package/dist/Dropdown.js

@@ -266,7 +266,7 @@ function Content({
     return out;
   }, [children, isAllowed, defaultHideUnauthorized]);
   return typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_framer_motion.motion.div,
       {
         role: "menu",
@@ -284,7 +284,8 @@ function Content({
           top: pos.top,
           left: pos.left,
           maxHeight: pos.maxH,
-          maxWidth: "calc(100vw - 16px)"
+          maxWidth: "calc(100vw - 16px)",
+          willChange: "transform, opacity"
         },
         className: [
           "z-[9999] overflow-auto rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xl",

package/dist/Dropdown.mjs

@@ -236,7 +236,7 @@ function Content({
     return out;
   }, [children, isAllowed, defaultHideUnauthorized]);
   return typeof document !== "undefined" ? createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx(
       motion.div,
       {
         role: "menu",
@@ -254,7 +254,8 @@ function Content({
           top: pos.top,
           left: pos.left,
           maxHeight: pos.maxH,
-          maxWidth: "calc(100vw - 16px)"
+          maxWidth: "calc(100vw - 16px)",
+          willChange: "transform, opacity"
         },
         className: [
           "z-[9999] overflow-auto rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xl",

package/dist/Input.js

@@ -112,9 +112,9 @@ const Input = import_react.default.forwardRef(
         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)" },
+          className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
+          initial: { opacity: 0 },
+          animate: { opacity: focused ? 1 : 0 },
           transition: import_animations.microTransition
         }
       )

package/dist/Input.mjs

@@ -79,9 +79,9 @@ const Input = React.forwardRef(
         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)" },
+          className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
+          initial: { opacity: 0 },
+          animate: { opacity: focused ? 1 : 0 },
           transition: microTransition
         }
       )

package/dist/Link.js

@@ -81,11 +81,10 @@ function Link({
       ...rest,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: deco ? "" : "", children }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        underline !== "none" && /* @__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"}`,
+            className: `absolute left-0 right-0 -bottom-0.5 h-[2px] origin-left rounded-full ${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 },

package/dist/Link.mjs

@@ -48,11 +48,10 @@ function Link({
       ...rest,
       children: [
         /* @__PURE__ */ jsx("span", { className: deco ? "" : "", children }),
-        /* @__PURE__ */ jsx(
+        underline !== "none" && /* @__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"}`,
+            className: `absolute left-0 right-0 -bottom-0.5 h-[2px] origin-left rounded-full ${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 },

package/dist/MediaSelector.js

@@ -128,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)(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 }) })
+                /* @__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 w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform", initial: { scaleX: 0 }, animate: { scaleX: progress / 100 }, transition: import_animations.springSm }) })
               ] })
             ]
           }

package/dist/MediaSelector.mjs

@@ -95,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(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 }) })
+                /* @__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 w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform", initial: { scaleX: 0 }, animate: { scaleX: progress / 100 }, transition: springSm }) })
               ] })
             ]
           }

package/dist/MotionProvider.d.mts

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

package/dist/MotionProvider.d.ts

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

package/dist/MotionProvider.js

@@ -24,6 +24,7 @@ __export(MotionProvider_exports, {
 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 });
+function MotionProvider({ children, reducedMotion = "user", features = "animation" }) {
+  const feat = features === "max" ? import_framer_motion.domMax : import_framer_motion.domAnimation;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.MotionConfig, { reducedMotion, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LazyMotion, { features: feat, children }) });
 }

package/dist/MotionProvider.mjs

@@ -1,8 +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 });
+import { MotionConfig, LazyMotion, domAnimation, domMax } from "framer-motion";
+function MotionProvider({ children, reducedMotion = "user", features = "animation" }) {
+  const feat = features === "max" ? domMax : domAnimation;
+  return /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, children: /* @__PURE__ */ jsx(LazyMotion, { features: feat, children }) });
 }
 export {
   MotionProvider as default

package/dist/Pagination.js

@@ -33,8 +33,6 @@ __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,
@@ -111,34 +109,24 @@ function Pagination({
     active,
     disabled,
     onClick
-  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Button.default,
     {
       unstyled: true,
       disabled,
       onClick,
       className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
-      ${active ? `${ACTIVE_TEXT[color]}` : "text-slate-900 hover:bg-white/60"}
+      ${active ? `${PILL_BG[color]} ${ACTIVE_TEXT[color]} rounded-2xl shadow-sm` : "text-slate-900 hover:bg-white/60"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
-      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
-      ]
+      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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative inline-flex overflow-hidden rounded-2xl border border-slate-200 bg-slate-100/60 shadow-sm dark:border-white/10 dark:bg-white/5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Btn, { disabled: page === 1, onClick: () => onPageChange(page - 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
     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" }) }) })
-  ] }) }) });
+  ] }) });
 }

package/dist/Pagination.mjs

@@ -1,7 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { LayoutGroup, motion } from "framer-motion";
-import { springSm } from "./animations";
 import Button from "./Button";
 function Pagination({
   page,
@@ -78,36 +76,26 @@ function Pagination({
     active,
     disabled,
     onClick
-  }) => /* @__PURE__ */ jsxs(
+  }) => /* @__PURE__ */ jsx(
     Button,
     {
       unstyled: true,
       disabled,
       onClick,
       className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
-      ${active ? `${ACTIVE_TEXT[color]}` : "text-slate-900 hover:bg-white/60"}
+      ${active ? `${PILL_BG[color]} ${ACTIVE_TEXT[color]} rounded-2xl shadow-sm` : "text-slate-900 hover:bg-white/60"}
       ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
       "aria-current": active ? "page" : void 0,
-      children: [
-        active && /* @__PURE__ */ jsx(
-          motion.span,
-          {
-            layoutId: "pagination-pill",
-            transition: springSm,
-            className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm`
-          }
-        ),
-        children
-      ]
+      children
     }
   );
-  return /* @__PURE__ */ jsx("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex overflow-hidden rounded-2xl border border-slate-200 bg-slate-100/60 shadow-sm dark:border-white/10 dark:bg-white/5", children: [
+  return /* @__PURE__ */ jsx("nav", { className: className || "w-full md:w-auto", children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex overflow-hidden rounded-2xl border border-slate-200 bg-slate-100/60 shadow-sm dark:border-white/10 dark:bg-white/5", children: [
     /* @__PURE__ */ jsx(Btn, { disabled: page === 1, onClick: () => onPageChange(page - 1), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) }) }),
     range.map(
       (it, idx) => it === "..." ? /* @__PURE__ */ jsx("span", { className: "h-10 min-w-10 px-3 inline-flex items-center justify-center text-slate-500 dark:text-slate-400", children: "\u2026" }, `dots-${idx}`) : /* @__PURE__ */ jsx(Btn, { active: it === page, onClick: () => onPageChange(it), children: it }, it)
     ),
     /* @__PURE__ */ jsx(Btn, { disabled: page === totalPages, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6" }) }) })
-  ] }) }) });
+  ] }) });
 }
 export {
   Pagination as default

package/dist/SearchInput.js

@@ -95,9 +95,9 @@ function SearchInput({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_framer_motion.motion.span,
       {
-        className: "pointer-events-none absolute inset-0 rounded-2xl",
-        initial: false,
-        animate: { boxShadow: value ? "0 0 0 2px rgba(56, 189, 248, 0.15)" : "0 0 0 0 rgba(0,0,0,0)" },
+        className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-sky-400/20",
+        initial: { opacity: 0 },
+        animate: { opacity: value ? 1 : 0 },
         transition: import_animations.microTransition
       }
     )

package/dist/SearchInput.mjs

@@ -62,9 +62,9 @@ function SearchInput({
     /* @__PURE__ */ jsx(
       motion.span,
       {
-        className: "pointer-events-none absolute inset-0 rounded-2xl",
-        initial: false,
-        animate: { boxShadow: value ? "0 0 0 2px rgba(56, 189, 248, 0.15)" : "0 0 0 0 rgba(0,0,0,0)" },
+        className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-sky-400/20",
+        initial: { opacity: 0 },
+        animate: { opacity: value ? 1 : 0 },
         transition: microTransition
       }
     )

package/dist/Select.js

@@ -225,7 +225,7 @@ function ModernSelect({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_framer_motion.motion.ul,
       {
         variants: import_animations.popOver,
@@ -248,7 +248,8 @@ function ModernSelect({
           top: menuPos.top,
           left: menuPos.left,
           width: menuPos.width,
-          maxWidth: "calc(100vw - 24px)"
+          maxWidth: "calc(100vw - 24px)",
+          willChange: "transform, opacity"
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/Select.mjs

@@ -192,7 +192,7 @@ function ModernSelect({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsxs(
       motion.ul,
       {
         variants: popOver,
@@ -215,7 +215,8 @@ function ModernSelect({
           top: menuPos.top,
           left: menuPos.left,
           width: menuPos.width,
-          maxWidth: "calc(100vw - 24px)"
+          maxWidth: "calc(100vw - 24px)",
+          willChange: "transform, opacity"
         },
         children: [
           /* @__PURE__ */ jsx(

package/dist/Sidebar.js

@@ -226,7 +226,6 @@ function Sidebar({
       {
         className: [
           "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
-          "transition-[width] duration-200",
           collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
         ].join(" "),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -247,7 +246,7 @@ function Sidebar({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", "transition-[width] duration-200", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -258,8 +257,9 @@ function Sidebar({
           initial: { x: -340 },
           animate: { x: 0 },
           exit: { x: -340 },
-          transition: { type: "spring", stiffness: 260, damping: 28 },
+          transition: { type: "tween", duration: 0.22, ease: "easeOut" },
           className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[var(--fx-surface)]",
+          style: { willChange: "transform" },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -419,15 +419,18 @@ function RenderItem({
             isActive ? `${WRAP_ACTIVE[color]} text-slate-900 dark:text-white` : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10"
           ].join(" "),
           children: [
-            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_framer_motion.motion.span,
               {
-                layoutId: "sidebar-active",
-                className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
-                transition: { type: "spring", stiffness: 300, damping: 26 },
+                className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 0.12 },
                 style: { zIndex: 0 }
-              }
-            ),
+              },
+              `active-${item.key}`
+            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "span",
@@ -472,6 +475,7 @@ function RenderItem({
           exit: { height: 0, opacity: 0, y: -4 },
           transition: { type: "tween", duration: 0.18 },
           className: "mt-1 overflow-hidden",
+          style: { willChange: "height, opacity, transform" },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10", children: children.map((ch) => {
             const active2 = ch.key === activeKey;
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -507,15 +511,18 @@ function RenderItem({
         collapsed ? "justify-center" : ""
       ].join(" "),
       children: [
-        active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_framer_motion.motion.span,
           {
-            layoutId: "sidebar-active",
-            className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
-            transition: { type: "spring", stiffness: 300, damping: 26 },
+            className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.12 },
             style: { zIndex: 0 }
-          }
-        ),
+          },
+          `active-${item.key}`
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {

package/dist/Sidebar.mjs

@@ -193,7 +193,6 @@ function Sidebar({
       {
         className: [
           "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
-          "transition-[width] duration-200",
           collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
         ].join(" "),
         children: /* @__PURE__ */ jsx(
@@ -214,7 +213,7 @@ function Sidebar({
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: ["hidden xl:block", "transition-[width] duration-200", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
+    /* @__PURE__ */ jsx("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
     /* @__PURE__ */ jsx(AnimatePresence, { children: drawerOpen && /* @__PURE__ */ jsxs(motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
       /* @__PURE__ */ jsxs(
@@ -225,8 +224,9 @@ function Sidebar({
           initial: { x: -340 },
           animate: { x: 0 },
           exit: { x: -340 },
-          transition: { type: "spring", stiffness: 260, damping: 28 },
+          transition: { type: "tween", duration: 0.22, ease: "easeOut" },
           className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[var(--fx-surface)]",
+          style: { willChange: "transform" },
           children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
               /* @__PURE__ */ jsx(
@@ -386,15 +386,18 @@ function RenderItem({
             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(
+            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, 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 },
+                className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 0.12 },
                 style: { zIndex: 0 }
-              }
-            ),
+              },
+              `active-${item.key}`
+            ) }),
             /* @__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",
@@ -439,6 +442,7 @@ function RenderItem({
           exit: { height: 0, opacity: 0, y: -4 },
           transition: { type: "tween", duration: 0.18 },
           className: "mt-1 overflow-hidden",
+          style: { willChange: "height, opacity, transform" },
           children: /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/10", children: children.map((ch) => {
             const active2 = ch.key === activeKey;
             return /* @__PURE__ */ jsx(
@@ -474,15 +478,18 @@ function RenderItem({
         collapsed ? "justify-center" : ""
       ].join(" "),
       children: [
-        active && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, 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 },
+            className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.12 },
             style: { zIndex: 0 }
-          }
-        ),
+          },
+          `active-${item.key}`
+        ) }),
         /* @__PURE__ */ jsx(
           "span",
           {

package/dist/StorageUsage.js

@@ -80,11 +80,11 @@ function StorageUsage({
       import_framer_motion.motion.div,
       {
         className: cx(
-          "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
+          "h-full w-full origin-left bg-gradient-to-r from-sky-500/70 to-sky-500/20 will-change-transform",
           barClassName
         ),
-        initial: { width: 0 },
-        animate: { width: `${pct}%` },
+        initial: { scaleX: 0 },
+        animate: { scaleX: pct / 100 },
         transition: import_animations.springSm
       }
     ) }),

package/dist/StorageUsage.mjs

@@ -47,11 +47,11 @@ function StorageUsage({
       motion.div,
       {
         className: cx(
-          "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
+          "h-full w-full origin-left bg-gradient-to-r from-sky-500/70 to-sky-500/20 will-change-transform",
           barClassName
         ),
-        initial: { width: 0 },
-        animate: { width: `${pct}%` },
+        initial: { scaleX: 0 },
+        animate: { scaleX: pct / 100 },
         transition: springSm
       }
     ) }),

package/dist/Table.js

@@ -107,8 +107,10 @@ function SortTh({
                 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",
+                    initial: { opacity: 0 },
+                    animate: { opacity: 0.7 },
+                    exit: { opacity: 0 },
                     transition: import_animations.microTransition
                   }
                 )

package/dist/Table.mjs

@@ -71,8 +71,10 @@ function SortTh({
                 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",
+                    initial: { opacity: 0 },
+                    animate: { opacity: 0.7 },
+                    exit: { opacity: 0 },
                     transition: microTransition
                   }
                 )

package/dist/Textarea.js

@@ -90,9 +90,9 @@ const Textarea = import_react.default.forwardRef(
         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)" },
+          className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
+          initial: { opacity: 0 },
+          animate: { opacity: focused ? 1 : 0 },
           transition: import_animations.microTransition
         }
       )

package/dist/Textarea.mjs

@@ -57,9 +57,9 @@ const Textarea = React.forwardRef(
         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)" },
+          className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
+          initial: { opacity: 0 },
+          animate: { opacity: focused ? 1 : 0 },
           transition: microTransition
         }
       )

package/dist/TimePopover.js

@@ -142,7 +142,7 @@ function TimePopover({
       "data-dtf-pop": true,
       onPointerDownCapture: (e) => e.stopPropagation(),
       onKeyDown,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
@@ -361,7 +361,7 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     import_framer_motion.motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
       variants: import_animations.popOver,
       initial: "initial",
       animate: "animate",
@@ -480,7 +480,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     import_framer_motion.motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
       variants: import_animations.popOver,
       initial: "initial",
       animate: "animate",

package/dist/TimePopover.mjs

@@ -107,7 +107,7 @@ function TimePopover({
       "data-dtf-pop": true,
       onPointerDownCapture: (e) => e.stopPropagation(),
       onKeyDown,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
@@ -326,7 +326,7 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
       variants: popOver,
       initial: "initial",
       animate: "animate",
@@ -445,7 +445,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
       variants: popOver,
       initial: "initial",
       animate: "animate",

package/dist/Tooltip.js

@@ -115,7 +115,7 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     import_react.default.cloneElement(children, triggerProps),
     typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && pos ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open && pos ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_framer_motion.motion.div,
         {
           id,
@@ -133,7 +133,8 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
           style: {
             top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
             left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
-            transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
+            transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)",
+            willChange: "transform, opacity"
           },
           children: content
         }

package/dist/Tooltip.mjs

@@ -82,7 +82,7 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     React.cloneElement(children, triggerProps),
     typeof document !== "undefined" ? createPortal(
-      /* @__PURE__ */ jsx(AnimatePresence, { children: open && pos ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && pos ? /* @__PURE__ */ jsx(
         motion.div,
         {
           id,
@@ -100,7 +100,8 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
           style: {
             top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
             left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
-            transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
+            transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)",
+            willChange: "transform, opacity"
           },
           children: content
         }

package/dist/UploadCard.js

@@ -136,9 +136,9 @@ function UploadCard({
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 h-2 w-full 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: `${pct}%` },
+                      className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
+                      initial: { scaleX: 0 },
+                      animate: { scaleX: pct / 100 },
                       transition: import_animations.springSm
                     }
                   ) }),

package/dist/UploadCard.mjs

@@ -103,9 +103,9 @@ function UploadCard({
                   /* @__PURE__ */ jsx("div", { className: "mt-1 h-2 w-full 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: `${pct}%` },
+                      className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
+                      initial: { scaleX: 0 },
+                      animate: { scaleX: pct / 100 },
                       transition: springSm
                     }
                   ) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",