framepexls-ui-lib 0.2.10 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/Checkbox.d.mts +1 -1
  2. package/dist/Checkbox.d.ts +1 -1
  3. package/dist/ComboSelect.js +2 -2
  4. package/dist/ComboSelect.mjs +2 -2
  5. package/dist/DateTimeField.js +1 -1
  6. package/dist/DateTimeField.mjs +1 -1
  7. package/dist/Dropdown.js +3 -2
  8. package/dist/Dropdown.mjs +3 -2
  9. package/dist/Input.js +3 -3
  10. package/dist/Input.mjs +3 -3
  11. package/dist/Link.js +2 -3
  12. package/dist/Link.mjs +2 -3
  13. package/dist/MediaSelector.js +1 -1
  14. package/dist/MediaSelector.mjs +1 -1
  15. package/dist/MotionProvider.d.mts +2 -1
  16. package/dist/MotionProvider.d.ts +2 -1
  17. package/dist/MotionProvider.js +3 -2
  18. package/dist/MotionProvider.mjs +4 -3
  19. package/dist/Pagination.js +5 -17
  20. package/dist/Pagination.mjs +5 -17
  21. package/dist/SearchInput.js +3 -3
  22. package/dist/SearchInput.mjs +3 -3
  23. package/dist/Select.js +3 -2
  24. package/dist/Select.mjs +3 -2
  25. package/dist/Sidebar.js +22 -15
  26. package/dist/Sidebar.mjs +22 -15
  27. package/dist/StorageUsage.js +3 -3
  28. package/dist/StorageUsage.mjs +3 -3
  29. package/dist/Table.js +3 -1
  30. package/dist/Table.mjs +3 -1
  31. package/dist/Textarea.js +3 -3
  32. package/dist/Textarea.mjs +3 -3
  33. package/dist/TimePopover.js +3 -3
  34. package/dist/TimePopover.mjs +3 -3
  35. package/dist/Tooltip.js +3 -2
  36. package/dist/Tooltip.mjs +3 -2
  37. package/dist/UploadCard.js +3 -3
  38. package/dist/UploadCard.mjs +3 -3
  39. package/package.json +1 -1
package/dist/Checkbox.d.mts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/Checkbox.d.ts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/ComboSelect.js CHANGED
@@ -280,7 +280,7 @@ function ComboSelect({
280
280
  ]
281
281
  }
282
282
  );
283
- 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: [
283
+ 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: [
284
284
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
285
285
  "div",
286
286
  {
@@ -302,7 +302,7 @@ function ComboSelect({
302
302
  ref: dropRef,
303
303
  role: "listbox",
304
304
  id: listId,
305
- style: dropStyle,
305
+ style: { ...dropStyle, willChange: "transform, opacity" },
306
306
  variants: import_animations.popOver,
307
307
  initial: "initial",
308
308
  animate: "animate",
package/dist/ComboSelect.mjs CHANGED
@@ -247,7 +247,7 @@ function ComboSelect({
247
247
  ]
248
248
  }
249
249
  );
250
- const dropdown = /* @__PURE__ */ jsx(AnimatePresence, { children: open && dropStyle ? /* @__PURE__ */ jsxs(Fragment, { children: [
250
+ const dropdown = /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && dropStyle ? /* @__PURE__ */ jsxs(Fragment, { children: [
251
251
  /* @__PURE__ */ jsx(
252
252
  "div",
253
253
  {
@@ -269,7 +269,7 @@ function ComboSelect({
269
269
  ref: dropRef,
270
270
  role: "listbox",
271
271
  id: listId,
272
- style: dropStyle,
272
+ style: { ...dropStyle, willChange: "transform, opacity" },
273
273
  variants: popOver,
274
274
  initial: "initial",
275
275
  animate: "animate",
package/dist/DateTimeField.js CHANGED
@@ -254,7 +254,7 @@ function DateTimeField({
254
254
  animate: "animate",
255
255
  transition: import_animations.menuTransition,
256
256
  ref: popRef,
257
- style: stylePop,
257
+ style: { ...stylePop, willChange: "transform, opacity" },
258
258
  "data-dtf-pop": true,
259
259
  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)]",
260
260
  children: [
package/dist/DateTimeField.mjs CHANGED
@@ -221,7 +221,7 @@ function DateTimeField({
221
221
  animate: "animate",
222
222
  transition: menuTransition,
223
223
  ref: popRef,
224
- style: stylePop,
224
+ style: { ...stylePop, willChange: "transform, opacity" },
225
225
  "data-dtf-pop": true,
226
226
  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)]",
227
227
  children: [
package/dist/Dropdown.js CHANGED
@@ -266,7 +266,7 @@ function Content({
266
266
  return out;
267
267
  }, [children, isAllowed, defaultHideUnauthorized]);
268
268
  return typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
269
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
269
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
270
270
  import_framer_motion.motion.div,
271
271
  {
272
272
  role: "menu",
@@ -284,7 +284,8 @@ function Content({
284
284
  top: pos.top,
285
285
  left: pos.left,
286
286
  maxHeight: pos.maxH,
287
- maxWidth: "calc(100vw - 16px)"
287
+ maxWidth: "calc(100vw - 16px)",
288
+ willChange: "transform, opacity"
288
289
  },
289
290
  className: [
290
291
  "z-[9999] overflow-auto rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xl",
package/dist/Dropdown.mjs CHANGED
@@ -236,7 +236,7 @@ function Content({
236
236
  return out;
237
237
  }, [children, isAllowed, defaultHideUnauthorized]);
238
238
  return typeof document !== "undefined" ? createPortal(
239
- /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
239
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx(
240
240
  motion.div,
241
241
  {
242
242
  role: "menu",
@@ -254,7 +254,8 @@ function Content({
254
254
  top: pos.top,
255
255
  left: pos.left,
256
256
  maxHeight: pos.maxH,
257
- maxWidth: "calc(100vw - 16px)"
257
+ maxWidth: "calc(100vw - 16px)",
258
+ willChange: "transform, opacity"
258
259
  },
259
260
  className: [
260
261
  "z-[9999] overflow-auto rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xl",
package/dist/Input.js CHANGED
@@ -112,9 +112,9 @@ const Input = import_react.default.forwardRef(
112
112
  import_framer_motion.motion.span,
113
113
  {
114
114
  "aria-hidden": true,
115
- className: "pointer-events-none absolute inset-0 rounded-2xl",
116
- initial: false,
117
- animate: { boxShadow: focused ? "0 0 0 2px rgba(59,130,246,0.18)" : "0 0 0 0 rgba(0,0,0,0)" },
115
+ className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
116
+ initial: { opacity: 0 },
117
+ animate: { opacity: focused ? 1 : 0 },
118
118
  transition: import_animations.microTransition
119
119
  }
120
120
  )
package/dist/Input.mjs CHANGED
@@ -79,9 +79,9 @@ const Input = React.forwardRef(
79
79
  motion.span,
80
80
  {
81
81
  "aria-hidden": true,
82
- className: "pointer-events-none absolute inset-0 rounded-2xl",
83
- initial: false,
84
- animate: { boxShadow: focused ? "0 0 0 2px rgba(59,130,246,0.18)" : "0 0 0 0 rgba(0,0,0,0)" },
82
+ className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
83
+ initial: { opacity: 0 },
84
+ animate: { opacity: focused ? 1 : 0 },
85
85
  transition: microTransition
86
86
  }
87
87
  )
package/dist/Link.js CHANGED
@@ -81,11 +81,10 @@ function Link({
81
81
  ...rest,
82
82
  children: [
83
83
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: deco ? "" : "", children }),
84
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
84
+ underline !== "none" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
85
85
  import_framer_motion.motion.span,
86
86
  {
87
- layoutId: "link-underline",
88
- 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"}`,
87
+ 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"}`,
89
88
  style: { backgroundColor: "currentColor" },
90
89
  initial: { scaleX: underline === "always" ? 1 : 0 },
91
90
  animate: { scaleX: underline === "always" ? 1 : 0 },
package/dist/Link.mjs CHANGED
@@ -48,11 +48,10 @@ function Link({
48
48
  ...rest,
49
49
  children: [
50
50
  /* @__PURE__ */ jsx("span", { className: deco ? "" : "", children }),
51
- /* @__PURE__ */ jsx(
51
+ underline !== "none" && /* @__PURE__ */ jsx(
52
52
  motion.span,
53
53
  {
54
- layoutId: "link-underline",
55
- 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"}`,
54
+ 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"}`,
56
55
  style: { backgroundColor: "currentColor" },
57
56
  initial: { scaleX: underline === "always" ? 1 : 0 },
58
57
  animate: { scaleX: underline === "always" ? 1 : 0 },
package/dist/MediaSelector.js CHANGED
@@ -128,7 +128,7 @@ function MediaSelector({
128
128
  progress,
129
129
  "%"
130
130
  ] }),
131
- /* @__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 }) })
131
+ /* @__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 }) })
132
132
  ] })
133
133
  ]
134
134
  }
package/dist/MediaSelector.mjs CHANGED
@@ -95,7 +95,7 @@ function MediaSelector({
95
95
  progress,
96
96
  "%"
97
97
  ] }),
98
- /* @__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 }) })
98
+ /* @__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 }) })
99
99
  ] })
100
100
  ]
101
101
  }
package/dist/MotionProvider.d.mts CHANGED
@@ -1,9 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React__default from 'react';
3
3
 
4
- declare function MotionProvider({ children, reducedMotion }: {
4
+ declare function MotionProvider({ children, reducedMotion, features }: {
5
5
  children: React__default.ReactNode;
6
6
  reducedMotion?: "user" | "always" | "never";
7
+ features?: "animation" | "max";
7
8
  }): react_jsx_runtime.JSX.Element;
8
9
 
9
10
  export { MotionProvider as default };
package/dist/MotionProvider.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React__default from 'react';
3
3
 
4
- declare function MotionProvider({ children, reducedMotion }: {
4
+ declare function MotionProvider({ children, reducedMotion, features }: {
5
5
  children: React__default.ReactNode;
6
6
  reducedMotion?: "user" | "always" | "never";
7
+ features?: "animation" | "max";
7
8
  }): react_jsx_runtime.JSX.Element;
8
9
 
9
10
  export { MotionProvider as default };
package/dist/MotionProvider.js CHANGED
@@ -24,6 +24,7 @@ __export(MotionProvider_exports, {
24
24
  module.exports = __toCommonJS(MotionProvider_exports);
25
25
  var import_jsx_runtime = require("react/jsx-runtime");
26
26
  var import_framer_motion = require("framer-motion");
27
- function MotionProvider({ children, reducedMotion = "user" }) {
28
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.MotionConfig, { reducedMotion, children });
27
+ function MotionProvider({ children, reducedMotion = "user", features = "animation" }) {
28
+ const feat = features === "max" ? import_framer_motion.domMax : import_framer_motion.domAnimation;
29
+ 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 }) });
29
30
  }
package/dist/MotionProvider.mjs CHANGED
@@ -1,8 +1,9 @@
1
1
  "use client";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { MotionConfig } from "framer-motion";
4
- function MotionProvider({ children, reducedMotion = "user" }) {
5
- return /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, children });
3
+ import { MotionConfig, LazyMotion, domAnimation, domMax } from "framer-motion";
4
+ function MotionProvider({ children, reducedMotion = "user", features = "animation" }) {
5
+ const feat = features === "max" ? domMax : domAnimation;
6
+ return /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, children: /* @__PURE__ */ jsx(LazyMotion, { features: feat, children }) });
6
7
  }
7
8
  export {
8
9
  MotionProvider as default
package/dist/Pagination.js CHANGED
@@ -33,8 +33,6 @@ __export(Pagination_exports, {
33
33
  });
34
34
  module.exports = __toCommonJS(Pagination_exports);
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_framer_motion = require("framer-motion");
37
- var import_animations = require("./animations");
38
36
  var import_Button = __toESM(require("./Button"));
39
37
  function Pagination({
40
38
  page,
@@ -111,34 +109,24 @@ function Pagination({
111
109
  active,
112
110
  disabled,
113
111
  onClick
114
- }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
112
+ }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
113
  import_Button.default,
116
114
  {
117
115
  unstyled: true,
118
116
  disabled,
119
117
  onClick,
120
118
  className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
121
- ${active ? `${ACTIVE_TEXT[color]}` : "text-slate-900 hover:bg-white/60"}
119
+ ${active ? `${PILL_BG[color]} ${ACTIVE_TEXT[color]} rounded-2xl shadow-sm` : "text-slate-900 hover:bg-white/60"}
122
120
  ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
123
121
  "aria-current": active ? "page" : void 0,
124
- children: [
125
- active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
126
- import_framer_motion.motion.span,
127
- {
128
- layoutId: "pagination-pill",
129
- transition: import_animations.springSm,
130
- className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm`
131
- }
132
- ),
133
- children
134
- ]
122
+ children
135
123
  }
136
124
  );
137
- 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: [
125
+ 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: [
138
126
  /* @__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" }) }) }),
139
127
  range.map(
140
128
  (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)
141
129
  ),
142
130
  /* @__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" }) }) })
143
- ] }) }) });
131
+ ] }) });
144
132
  }
package/dist/Pagination.mjs CHANGED
@@ -1,7 +1,5 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { LayoutGroup, motion } from "framer-motion";
4
- import { springSm } from "./animations";
5
3
  import Button from "./Button";
6
4
  function Pagination({
7
5
  page,
@@ -78,36 +76,26 @@ function Pagination({
78
76
  active,
79
77
  disabled,
80
78
  onClick
81
- }) => /* @__PURE__ */ jsxs(
79
+ }) => /* @__PURE__ */ jsx(
82
80
  Button,
83
81
  {
84
82
  unstyled: true,
85
83
  disabled,
86
84
  onClick,
87
85
  className: `relative h-10 min-w-10 px-3 inline-flex items-center justify-center text-[15px] font-medium transition
88
- ${active ? `${ACTIVE_TEXT[color]}` : "text-slate-900 hover:bg-white/60"}
86
+ ${active ? `${PILL_BG[color]} ${ACTIVE_TEXT[color]} rounded-2xl shadow-sm` : "text-slate-900 hover:bg-white/60"}
89
87
  ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
90
88
  "aria-current": active ? "page" : void 0,
91
- children: [
92
- active && /* @__PURE__ */ jsx(
93
- motion.span,
94
- {
95
- layoutId: "pagination-pill",
96
- transition: springSm,
97
- className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm`
98
- }
99
- ),
100
- children
101
- ]
89
+ children
102
90
  }
103
91
  );
104
- 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: [
92
+ 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: [
105
93
  /* @__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" }) }) }),
106
94
  range.map(
107
95
  (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)
108
96
  ),
109
97
  /* @__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" }) }) })
110
- ] }) }) });
98
+ ] }) });
111
99
  }
112
100
  export {
113
101
  Pagination as default
package/dist/SearchInput.js CHANGED
@@ -95,9 +95,9 @@ function SearchInput({
95
95
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
96
96
  import_framer_motion.motion.span,
97
97
  {
98
- className: "pointer-events-none absolute inset-0 rounded-2xl",
99
- initial: false,
100
- animate: { boxShadow: value ? "0 0 0 2px rgba(56, 189, 248, 0.15)" : "0 0 0 0 rgba(0,0,0,0)" },
98
+ className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-sky-400/20",
99
+ initial: { opacity: 0 },
100
+ animate: { opacity: value ? 1 : 0 },
101
101
  transition: import_animations.microTransition
102
102
  }
103
103
  )
package/dist/SearchInput.mjs CHANGED
@@ -62,9 +62,9 @@ function SearchInput({
62
62
  /* @__PURE__ */ jsx(
63
63
  motion.span,
64
64
  {
65
- className: "pointer-events-none absolute inset-0 rounded-2xl",
66
- initial: false,
67
- animate: { boxShadow: value ? "0 0 0 2px rgba(56, 189, 248, 0.15)" : "0 0 0 0 rgba(0,0,0,0)" },
65
+ className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-sky-400/20",
66
+ initial: { opacity: 0 },
67
+ animate: { opacity: value ? 1 : 0 },
68
68
  transition: microTransition
69
69
  }
70
70
  )
package/dist/Select.js CHANGED
@@ -225,7 +225,7 @@ function ModernSelect({
225
225
  }
226
226
  )
227
227
  ] }),
228
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
228
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
229
229
  import_framer_motion.motion.ul,
230
230
  {
231
231
  variants: import_animations.popOver,
@@ -248,7 +248,8 @@ function ModernSelect({
248
248
  top: menuPos.top,
249
249
  left: menuPos.left,
250
250
  width: menuPos.width,
251
- maxWidth: "calc(100vw - 24px)"
251
+ maxWidth: "calc(100vw - 24px)",
252
+ willChange: "transform, opacity"
252
253
  },
253
254
  children: [
254
255
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/Select.mjs CHANGED
@@ -192,7 +192,7 @@ function ModernSelect({
192
192
  }
193
193
  )
194
194
  ] }),
195
- /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(
195
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsxs(
196
196
  motion.ul,
197
197
  {
198
198
  variants: popOver,
@@ -215,7 +215,8 @@ function ModernSelect({
215
215
  top: menuPos.top,
216
216
  left: menuPos.left,
217
217
  width: menuPos.width,
218
- maxWidth: "calc(100vw - 24px)"
218
+ maxWidth: "calc(100vw - 24px)",
219
+ willChange: "transform, opacity"
219
220
  },
220
221
  children: [
221
222
  /* @__PURE__ */ jsx(
package/dist/Sidebar.js CHANGED
@@ -226,7 +226,6 @@ function Sidebar({
226
226
  {
227
227
  className: [
228
228
  "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",
229
- "transition-[width] duration-200",
230
229
  collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
231
230
  ].join(" "),
232
231
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -247,7 +246,7 @@ function Sidebar({
247
246
  )
248
247
  }
249
248
  ),
250
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", "transition-[width] duration-200", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
249
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
251
250
  /* @__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: [
252
251
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40" }),
253
252
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -258,8 +257,9 @@ function Sidebar({
258
257
  initial: { x: -340 },
259
258
  animate: { x: 0 },
260
259
  exit: { x: -340 },
261
- transition: { type: "spring", stiffness: 260, damping: 28 },
260
+ transition: { type: "tween", duration: 0.22, ease: "easeOut" },
262
261
  className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[var(--fx-surface)]",
262
+ style: { willChange: "transform" },
263
263
  children: [
264
264
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
265
265
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -419,15 +419,18 @@ function RenderItem({
419
419
  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"
420
420
  ].join(" "),
421
421
  children: [
422
- isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
422
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
423
423
  import_framer_motion.motion.span,
424
424
  {
425
- layoutId: "sidebar-active",
426
- className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
427
- transition: { type: "spring", stiffness: 300, damping: 26 },
425
+ className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
426
+ initial: { opacity: 0 },
427
+ animate: { opacity: 1 },
428
+ exit: { opacity: 0 },
429
+ transition: { duration: 0.12 },
428
430
  style: { zIndex: 0 }
429
- }
430
- ),
431
+ },
432
+ `active-${item.key}`
433
+ ) }),
431
434
  /* @__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: [
432
435
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
433
436
  "span",
@@ -472,6 +475,7 @@ function RenderItem({
472
475
  exit: { height: 0, opacity: 0, y: -4 },
473
476
  transition: { type: "tween", duration: 0.18 },
474
477
  className: "mt-1 overflow-hidden",
478
+ style: { willChange: "height, opacity, transform" },
475
479
  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) => {
476
480
  const active2 = ch.key === activeKey;
477
481
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -507,15 +511,18 @@ function RenderItem({
507
511
  collapsed ? "justify-center" : ""
508
512
  ].join(" "),
509
513
  children: [
510
- active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
514
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
511
515
  import_framer_motion.motion.span,
512
516
  {
513
- layoutId: "sidebar-active",
514
- className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
515
- transition: { type: "spring", stiffness: 300, damping: 26 },
517
+ className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
518
+ initial: { opacity: 0 },
519
+ animate: { opacity: 1 },
520
+ exit: { opacity: 0 },
521
+ transition: { duration: 0.12 },
516
522
  style: { zIndex: 0 }
517
- }
518
- ),
523
+ },
524
+ `active-${item.key}`
525
+ ) }),
519
526
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
520
527
  "span",
521
528
  {
package/dist/Sidebar.mjs CHANGED
@@ -193,7 +193,6 @@ function Sidebar({
193
193
  {
194
194
  className: [
195
195
  "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",
196
- "transition-[width] duration-200",
197
196
  collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
198
197
  ].join(" "),
199
198
  children: /* @__PURE__ */ jsx(
@@ -214,7 +213,7 @@ function Sidebar({
214
213
  )
215
214
  }
216
215
  ),
217
- /* @__PURE__ */ jsx("div", { className: ["hidden xl:block", "transition-[width] duration-200", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
216
+ /* @__PURE__ */ jsx("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
218
217
  /* @__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: [
219
218
  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
220
219
  /* @__PURE__ */ jsxs(
@@ -225,8 +224,9 @@ function Sidebar({
225
224
  initial: { x: -340 },
226
225
  animate: { x: 0 },
227
226
  exit: { x: -340 },
228
- transition: { type: "spring", stiffness: 260, damping: 28 },
227
+ transition: { type: "tween", duration: 0.22, ease: "easeOut" },
229
228
  className: "relative h-full w-[88%] max-w-80 bg-white px-5 py-6 shadow-2xl dark:bg-[var(--fx-surface)]",
229
+ style: { willChange: "transform" },
230
230
  children: [
231
231
  /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
232
232
  /* @__PURE__ */ jsx(
@@ -386,15 +386,18 @@ function RenderItem({
386
386
  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"
387
387
  ].join(" "),
388
388
  children: [
389
- isActive && /* @__PURE__ */ jsx(
389
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isActive && /* @__PURE__ */ jsx(
390
390
  motion.span,
391
391
  {
392
- layoutId: "sidebar-active",
393
- className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
394
- transition: { type: "spring", stiffness: 300, damping: 26 },
392
+ className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
393
+ initial: { opacity: 0 },
394
+ animate: { opacity: 1 },
395
+ exit: { opacity: 0 },
396
+ transition: { duration: 0.12 },
395
397
  style: { zIndex: 0 }
396
- }
397
- ),
398
+ },
399
+ `active-${item.key}`
400
+ ) }),
398
401
  /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
399
402
  /* @__PURE__ */ jsx(
400
403
  "span",
@@ -439,6 +442,7 @@ function RenderItem({
439
442
  exit: { height: 0, opacity: 0, y: -4 },
440
443
  transition: { type: "tween", duration: 0.18 },
441
444
  className: "mt-1 overflow-hidden",
445
+ style: { willChange: "height, opacity, transform" },
442
446
  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) => {
443
447
  const active2 = ch.key === activeKey;
444
448
  return /* @__PURE__ */ jsx(
@@ -474,15 +478,18 @@ function RenderItem({
474
478
  collapsed ? "justify-center" : ""
475
479
  ].join(" "),
476
480
  children: [
477
- active && /* @__PURE__ */ jsx(
481
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: active && /* @__PURE__ */ jsx(
478
482
  motion.span,
479
483
  {
480
- layoutId: "sidebar-active",
481
- className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
482
- transition: { type: "spring", stiffness: 300, damping: 26 },
484
+ className: `pointer-events-none absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
485
+ initial: { opacity: 0 },
486
+ animate: { opacity: 1 },
487
+ exit: { opacity: 0 },
488
+ transition: { duration: 0.12 },
483
489
  style: { zIndex: 0 }
484
- }
485
- ),
490
+ },
491
+ `active-${item.key}`
492
+ ) }),
486
493
  /* @__PURE__ */ jsx(
487
494
  "span",
488
495
  {
package/dist/StorageUsage.js CHANGED
@@ -80,11 +80,11 @@ function StorageUsage({
80
80
  import_framer_motion.motion.div,
81
81
  {
82
82
  className: cx(
83
- "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
83
+ "h-full w-full origin-left bg-gradient-to-r from-sky-500/70 to-sky-500/20 will-change-transform",
84
84
  barClassName
85
85
  ),
86
- initial: { width: 0 },
87
- animate: { width: `${pct}%` },
86
+ initial: { scaleX: 0 },
87
+ animate: { scaleX: pct / 100 },
88
88
  transition: import_animations.springSm
89
89
  }
90
90
  ) }),
package/dist/StorageUsage.mjs CHANGED
@@ -47,11 +47,11 @@ function StorageUsage({
47
47
  motion.div,
48
48
  {
49
49
  className: cx(
50
- "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
50
+ "h-full w-full origin-left bg-gradient-to-r from-sky-500/70 to-sky-500/20 will-change-transform",
51
51
  barClassName
52
52
  ),
53
- initial: { width: 0 },
54
- animate: { width: `${pct}%` },
53
+ initial: { scaleX: 0 },
54
+ animate: { scaleX: pct / 100 },
55
55
  transition: springSm
56
56
  }
57
57
  ) }),
package/dist/Table.js CHANGED
@@ -107,8 +107,10 @@ function SortTh({
107
107
  active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
108
108
  import_framer_motion.motion.span,
109
109
  {
110
- layoutId: "sort-underline",
111
110
  className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70",
111
+ initial: { opacity: 0 },
112
+ animate: { opacity: 0.7 },
113
+ exit: { opacity: 0 },
112
114
  transition: import_animations.microTransition
113
115
  }
114
116
  )
package/dist/Table.mjs CHANGED
@@ -71,8 +71,10 @@ function SortTh({
71
71
  active && /* @__PURE__ */ jsx(
72
72
  motion.span,
73
73
  {
74
- layoutId: "sort-underline",
75
74
  className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70",
75
+ initial: { opacity: 0 },
76
+ animate: { opacity: 0.7 },
77
+ exit: { opacity: 0 },
76
78
  transition: microTransition
77
79
  }
78
80
  )
package/dist/Textarea.js CHANGED
@@ -90,9 +90,9 @@ const Textarea = import_react.default.forwardRef(
90
90
  import_framer_motion.motion.span,
91
91
  {
92
92
  "aria-hidden": true,
93
- className: "pointer-events-none absolute inset-0 rounded-2xl",
94
- initial: false,
95
- animate: { boxShadow: focused ? "0 0 0 2px rgba(59,130,246,0.18)" : "0 0 0 0 rgba(0,0,0,0)" },
93
+ className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
94
+ initial: { opacity: 0 },
95
+ animate: { opacity: focused ? 1 : 0 },
96
96
  transition: import_animations.microTransition
97
97
  }
98
98
  )
package/dist/Textarea.mjs CHANGED
@@ -57,9 +57,9 @@ const Textarea = React.forwardRef(
57
57
  motion.span,
58
58
  {
59
59
  "aria-hidden": true,
60
- className: "pointer-events-none absolute inset-0 rounded-2xl",
61
- initial: false,
62
- animate: { boxShadow: focused ? "0 0 0 2px rgba(59,130,246,0.18)" : "0 0 0 0 rgba(0,0,0,0)" },
60
+ className: "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500/20",
61
+ initial: { opacity: 0 },
62
+ animate: { opacity: focused ? 1 : 0 },
63
63
  transition: microTransition
64
64
  }
65
65
  )
package/dist/TimePopover.js CHANGED
@@ -142,7 +142,7 @@ function TimePopover({
142
142
  "data-dtf-pop": true,
143
143
  onPointerDownCapture: (e) => e.stopPropagation(),
144
144
  onKeyDown,
145
- style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
145
+ style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
146
146
  className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
147
147
  children: [
148
148
  /* @__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
361
361
  import_framer_motion.motion.div,
362
362
  {
363
363
  ref: popRef,
364
- style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
364
+ style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
365
365
  variants: import_animations.popOver,
366
366
  initial: "initial",
367
367
  animate: "animate",
@@ -480,7 +480,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
480
480
  import_framer_motion.motion.div,
481
481
  {
482
482
  ref: popRef,
483
- style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
483
+ style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
484
484
  variants: import_animations.popOver,
485
485
  initial: "initial",
486
486
  animate: "animate",
package/dist/TimePopover.mjs CHANGED
@@ -107,7 +107,7 @@ function TimePopover({
107
107
  "data-dtf-pop": true,
108
108
  onPointerDownCapture: (e) => e.stopPropagation(),
109
109
  onKeyDown,
110
- style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
110
+ style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
111
111
  className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
112
112
  children: [
113
113
  /* @__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
326
326
  motion.div,
327
327
  {
328
328
  ref: popRef,
329
- style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
329
+ style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
330
330
  variants: popOver,
331
331
  initial: "initial",
332
332
  animate: "animate",
@@ -445,7 +445,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
445
445
  motion.div,
446
446
  {
447
447
  ref: popRef,
448
- style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
448
+ style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
449
449
  variants: popOver,
450
450
  initial: "initial",
451
451
  animate: "animate",
package/dist/Tooltip.js CHANGED
@@ -115,7 +115,7 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
115
115
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
116
116
  import_react.default.cloneElement(children, triggerProps),
117
117
  typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
118
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && pos ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
118
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open && pos ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
119
119
  import_framer_motion.motion.div,
120
120
  {
121
121
  id,
@@ -133,7 +133,8 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
133
133
  style: {
134
134
  top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
135
135
  left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
136
- transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
136
+ transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)",
137
+ willChange: "transform, opacity"
137
138
  },
138
139
  children: content
139
140
  }
package/dist/Tooltip.mjs CHANGED
@@ -82,7 +82,7 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
82
82
  return /* @__PURE__ */ jsxs(Fragment, { children: [
83
83
  React.cloneElement(children, triggerProps),
84
84
  typeof document !== "undefined" ? createPortal(
85
- /* @__PURE__ */ jsx(AnimatePresence, { children: open && pos ? /* @__PURE__ */ jsx(
85
+ /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && pos ? /* @__PURE__ */ jsx(
86
86
  motion.div,
87
87
  {
88
88
  id,
@@ -100,7 +100,8 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
100
100
  style: {
101
101
  top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
102
102
  left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
103
- transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
103
+ transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)",
104
+ willChange: "transform, opacity"
104
105
  },
105
106
  children: content
106
107
  }
package/dist/UploadCard.js CHANGED
@@ -136,9 +136,9 @@ function UploadCard({
136
136
  /* @__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)(
137
137
  import_framer_motion.motion.div,
138
138
  {
139
- className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20",
140
- initial: { width: 0 },
141
- animate: { width: `${pct}%` },
139
+ className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
140
+ initial: { scaleX: 0 },
141
+ animate: { scaleX: pct / 100 },
142
142
  transition: import_animations.springSm
143
143
  }
144
144
  ) }),
package/dist/UploadCard.mjs CHANGED
@@ -103,9 +103,9 @@ function UploadCard({
103
103
  /* @__PURE__ */ jsx("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(
104
104
  motion.div,
105
105
  {
106
- className: "h-full bg-gradient-to-r from-emerald-500/70 to-emerald-500/20",
107
- initial: { width: 0 },
108
- animate: { width: `${pct}%` },
106
+ className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
107
+ initial: { scaleX: 0 },
108
+ animate: { scaleX: pct / 100 },
109
109
  transition: springSm
110
110
  }
111
111
  ) }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.2.10",
3
+ "version": "0.2.12",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",