framepexls-ui-lib 0.2.10 → 0.2.11

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 (37) hide show
  1. package/dist/ComboSelect.js +2 -2
  2. package/dist/ComboSelect.mjs +2 -2
  3. package/dist/DateTimeField.js +1 -1
  4. package/dist/DateTimeField.mjs +1 -1
  5. package/dist/Dropdown.js +3 -2
  6. package/dist/Dropdown.mjs +3 -2
  7. package/dist/Input.js +3 -3
  8. package/dist/Input.mjs +3 -3
  9. package/dist/Link.js +2 -2
  10. package/dist/Link.mjs +2 -2
  11. package/dist/MediaSelector.js +1 -1
  12. package/dist/MediaSelector.mjs +1 -1
  13. package/dist/MotionProvider.d.mts +2 -1
  14. package/dist/MotionProvider.d.ts +2 -1
  15. package/dist/MotionProvider.js +3 -2
  16. package/dist/MotionProvider.mjs +4 -3
  17. package/dist/Pagination.js +2 -1
  18. package/dist/Pagination.mjs +2 -1
  19. package/dist/SearchInput.js +3 -3
  20. package/dist/SearchInput.mjs +3 -3
  21. package/dist/Select.js +3 -2
  22. package/dist/Select.mjs +3 -2
  23. package/dist/Sidebar.js +4 -4
  24. package/dist/Sidebar.mjs +4 -4
  25. package/dist/StorageUsage.js +3 -3
  26. package/dist/StorageUsage.mjs +3 -3
  27. package/dist/Table.js +3 -2
  28. package/dist/Table.mjs +3 -2
  29. package/dist/Textarea.js +3 -3
  30. package/dist/Textarea.mjs +3 -3
  31. package/dist/TimePopover.js +3 -3
  32. package/dist/TimePopover.mjs +3 -3
  33. package/dist/Tooltip.js +3 -2
  34. package/dist/Tooltip.mjs +3 -2
  35. package/dist/UploadCard.js +3 -3
  36. package/dist/UploadCard.mjs +3 -3
  37. package/package.json +1 -1
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
@@ -85,8 +85,8 @@ function Link({
85
85
  import_framer_motion.motion.span,
86
86
  {
87
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"}`,
89
- style: { backgroundColor: "currentColor" },
88
+ className: `absolute left-0 right-0 -bottom-0.5 h-[2px] origin-left rounded-full will-change-transform ${underline === "none" ? "hidden" : ""} ${underline === "always" ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
89
+ style: { backgroundColor: "currentColor", willChange: "transform" },
90
90
  initial: { scaleX: underline === "always" ? 1 : 0 },
91
91
  animate: { scaleX: underline === "always" ? 1 : 0 },
92
92
  whileHover: underline === "hover" ? { scaleX: 1 } : void 0,
package/dist/Link.mjs CHANGED
@@ -52,8 +52,8 @@ function Link({
52
52
  motion.span,
53
53
  {
54
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"}`,
56
- style: { backgroundColor: "currentColor" },
55
+ className: `absolute left-0 right-0 -bottom-0.5 h-[2px] origin-left rounded-full will-change-transform ${underline === "none" ? "hidden" : ""} ${underline === "always" ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
56
+ style: { backgroundColor: "currentColor", willChange: "transform" },
57
57
  initial: { scaleX: underline === "always" ? 1 : 0 },
58
58
  animate: { scaleX: underline === "always" ? 1 : 0 },
59
59
  whileHover: underline === "hover" ? { scaleX: 1 } : void 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
@@ -127,7 +127,8 @@ function Pagination({
127
127
  {
128
128
  layoutId: "pagination-pill",
129
129
  transition: import_animations.springSm,
130
- className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm`
130
+ className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm will-change-transform`,
131
+ style: { willChange: "transform" }
131
132
  }
132
133
  ),
133
134
  children
package/dist/Pagination.mjs CHANGED
@@ -94,7 +94,8 @@ function Pagination({
94
94
  {
95
95
  layoutId: "pagination-pill",
96
96
  transition: springSm,
97
- className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm`
97
+ className: `absolute inset-0 rounded-2xl ${PILL_BG[color]} shadow-sm will-change-transform`,
98
+ style: { willChange: "transform" }
98
99
  }
99
100
  ),
100
101
  children
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
@@ -423,9 +423,9 @@ function RenderItem({
423
423
  import_framer_motion.motion.span,
424
424
  {
425
425
  layoutId: "sidebar-active",
426
- className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
426
+ className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]} will-change-transform`,
427
427
  transition: { type: "spring", stiffness: 300, damping: 26 },
428
- style: { zIndex: 0 }
428
+ style: { zIndex: 0, willChange: "transform" }
429
429
  }
430
430
  ),
431
431
  /* @__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: [
@@ -511,9 +511,9 @@ function RenderItem({
511
511
  import_framer_motion.motion.span,
512
512
  {
513
513
  layoutId: "sidebar-active",
514
- className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
514
+ className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]} will-change-transform`,
515
515
  transition: { type: "spring", stiffness: 300, damping: 26 },
516
- style: { zIndex: 0 }
516
+ style: { zIndex: 0, willChange: "transform" }
517
517
  }
518
518
  ),
519
519
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/Sidebar.mjs CHANGED
@@ -390,9 +390,9 @@ function RenderItem({
390
390
  motion.span,
391
391
  {
392
392
  layoutId: "sidebar-active",
393
- className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
393
+ className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]} will-change-transform`,
394
394
  transition: { type: "spring", stiffness: 300, damping: 26 },
395
- style: { zIndex: 0 }
395
+ style: { zIndex: 0, willChange: "transform" }
396
396
  }
397
397
  ),
398
398
  /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
@@ -478,9 +478,9 @@ function RenderItem({
478
478
  motion.span,
479
479
  {
480
480
  layoutId: "sidebar-active",
481
- className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]}`,
481
+ className: `absolute inset-0 rounded-2xl ${WRAP_ACTIVE[color]} will-change-transform`,
482
482
  transition: { type: "spring", stiffness: 300, damping: 26 },
483
- style: { zIndex: 0 }
483
+ style: { zIndex: 0, willChange: "transform" }
484
484
  }
485
485
  ),
486
486
  /* @__PURE__ */ jsx(
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
@@ -108,8 +108,9 @@ function SortTh({
108
108
  import_framer_motion.motion.span,
109
109
  {
110
110
  layoutId: "sort-underline",
111
- className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70",
112
- transition: import_animations.microTransition
111
+ className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70 will-change-transform",
112
+ transition: import_animations.microTransition,
113
+ style: { willChange: "transform" }
113
114
  }
114
115
  )
115
116
  ] }),
package/dist/Table.mjs CHANGED
@@ -72,8 +72,9 @@ function SortTh({
72
72
  motion.span,
73
73
  {
74
74
  layoutId: "sort-underline",
75
- className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70",
76
- transition: microTransition
75
+ className: "absolute -bottom-0.5 left-0 right-0 h-0.5 rounded-full bg-current opacity-70 will-change-transform",
76
+ transition: microTransition,
77
+ style: { willChange: "transform" }
77
78
  }
78
79
  )
79
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.11",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",