beez-ui 0.8.1 → 0.8.2

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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/components/animated-collapse.js +9 -3
  3. package/dist/components/animated-list-item.js +37 -34
  4. package/dist/components/presence-swap.js +38 -51
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,12 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
4
4
 
5
5
  ## [Unreleased]
6
6
 
7
+ ## [0.8.2] - 2026-09-27
8
+
9
+ ### Fixed
10
+
11
+ - Con movimiento reducido, `PresenceSwap`, `AnimatedListItem` y `AnimatedCollapse` conservan un fundido breve en lugar de cambiar sin transición; `PresenceSwap` ya no queda trabado en el estado anterior cuando su contenido cambia varias veces seguidas (por ejemplo, error → cargando → cargado).
12
+
7
13
  ## [0.8.1] - 2026-09-27
8
14
 
9
15
  ### Changed
package/dist/components/animated-collapse.js CHANGED
@@ -17,8 +17,14 @@ const COLLAPSE_TRANSITION = {
17
17
  ease: MOTION_EASE
18
18
  }
19
19
  };
20
- /** Reduced motion keeps the open/closed contract but applies it instantly. */
21
- const INSTANT_TRANSITION = { duration: 0 };
20
+ /** Reduced motion applies the height at once but keeps the short fade, so exits always settle. */
21
+ const REDUCED_MOTION_COLLAPSE_TRANSITION = {
22
+ height: { duration: 0 },
23
+ opacity: {
24
+ duration: MOTION_TIMING.panel,
25
+ ease: MOTION_EASE
26
+ }
27
+ };
22
28
  /**
23
29
  * Renders `children` only while `isOpen`, animating height and opacity.
24
30
  * Keep padding inside `children`: the animated wrapper collapses to zero height.
@@ -50,7 +56,7 @@ export function AnimatedCollapse(t0) {
50
56
  height: 0,
51
57
  opacity: 0
52
58
  },
53
- transition: shouldReduceMotion ? INSTANT_TRANSITION : COLLAPSE_TRANSITION,
59
+ transition: shouldReduceMotion ? REDUCED_MOTION_COLLAPSE_TRANSITION : COLLAPSE_TRANSITION,
54
60
  onAnimationStart: () => setIsSettled(false),
55
61
  onAnimationComplete: () => setIsSettled(true),
56
62
  children
package/dist/components/animated-list-item.js CHANGED
@@ -19,8 +19,6 @@ const LIST_ITEM_EXIT_TRANSITION = {
19
19
  duration: MOTION_TIMING.exit,
20
20
  ease: MOTION_EASE
21
21
  };
22
- /** Reduced motion keeps enter/exit semantics (inert while leaving) but without travel or delay. */
23
- const INSTANT_TRANSITION = { duration: 0 };
24
22
  /**
25
23
  * Wrap the list in `<AnimatePresence initial={false}>` so only items added after the
26
24
  * first render animate in, and removed items animate out before leaving the DOM.
@@ -30,7 +28,7 @@ const INSTANT_TRANSITION = { duration: 0 };
30
28
  * @returns The animated item.
31
29
  */
32
30
  export function AnimatedListItem(t0) {
33
- const $ = _c(22);
31
+ const $ = _c(24);
34
32
  let children;
35
33
  let className;
36
34
  let elementProps;
@@ -56,6 +54,8 @@ export function AnimatedListItem(t0) {
56
54
  const MotionElement = ANIMATED_LIST_ITEM_ELEMENTS[as];
57
55
  const isPresent = useIsPresent();
58
56
  const shouldReduceMotion = usePrefersReducedMotion();
57
+ const distance = shouldReduceMotion ? 0 : MOTION_LIST_ITEM_DISTANCE;
58
+ const enterScale = shouldReduceMotion ? 1 : MOTION_ITEM_ENTER_SCALE;
59
59
  const t3 = isPresent ? elementProps["aria-hidden"] : true;
60
60
  const t4 = !isPresent || undefined;
61
61
  let t5;
@@ -68,41 +68,44 @@ export function AnimatedListItem(t0) {
68
68
  }
69
69
  const t6 = layout && !shouldReduceMotion ? "position" : false;
70
70
  let t7;
71
- let t8;
72
- if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
71
+ if ($[8] !== distance || $[9] !== enterScale) {
73
72
  t7 = {
74
73
  opacity: 0,
75
- y: MOTION_LIST_ITEM_DISTANCE,
76
- scale: MOTION_ITEM_ENTER_SCALE
74
+ y: distance,
75
+ scale: enterScale
77
76
  };
77
+ $[8] = distance;
78
+ $[9] = enterScale;
79
+ $[10] = t7;
80
+ } else {
81
+ t7 = $[10];
82
+ }
83
+ let t8;
84
+ if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
78
85
  t8 = {
79
86
  opacity: 1,
80
87
  y: 0,
81
88
  scale: 1
82
89
  };
83
- $[8] = t7;
84
- $[9] = t8;
90
+ $[11] = t8;
85
91
  } else {
86
- t7 = $[8];
87
- t8 = $[9];
92
+ t8 = $[11];
88
93
  }
89
- const t9 = shouldReduceMotion ? INSTANT_TRANSITION : LIST_ITEM_EXIT_TRANSITION;
90
- let t10;
91
- if ($[10] !== t9) {
92
- t10 = {
94
+ let t9;
95
+ if ($[12] !== enterScale) {
96
+ t9 = {
93
97
  opacity: 0,
94
- scale: MOTION_ITEM_ENTER_SCALE,
95
- transition: t9
98
+ scale: enterScale,
99
+ transition: LIST_ITEM_EXIT_TRANSITION
96
100
  };
97
- $[10] = t9;
98
- $[11] = t10;
101
+ $[12] = enterScale;
102
+ $[13] = t9;
99
103
  } else {
100
- t10 = $[11];
104
+ t9 = $[13];
101
105
  }
102
- const t11 = shouldReduceMotion ? INSTANT_TRANSITION : LIST_ITEM_TRANSITION;
103
- let t12;
104
- if ($[12] !== MotionElement || $[13] !== children || $[14] !== elementProps || $[15] !== t10 || $[16] !== t11 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
105
- t12 = /* @__PURE__ */ _jsx(MotionElement, {
106
+ let t10;
107
+ if ($[14] !== MotionElement || $[15] !== children || $[16] !== elementProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6 || $[21] !== t7 || $[22] !== t9) {
108
+ t10 = /* @__PURE__ */ _jsx(MotionElement, {
106
109
  "data-slot": "animated-list-item",
107
110
  ...elementProps,
108
111
  "aria-hidden": t3,
@@ -111,22 +114,22 @@ export function AnimatedListItem(t0) {
111
114
  layout: t6,
112
115
  initial: t7,
113
116
  animate: t8,
114
- exit: t10,
115
- transition: t11,
117
+ exit: t9,
118
+ transition: LIST_ITEM_TRANSITION,
116
119
  children
117
120
  });
118
- $[12] = MotionElement;
119
- $[13] = children;
120
- $[14] = elementProps;
121
- $[15] = t10;
122
- $[16] = t11;
121
+ $[14] = MotionElement;
122
+ $[15] = children;
123
+ $[16] = elementProps;
123
124
  $[17] = t3;
124
125
  $[18] = t4;
125
126
  $[19] = t5;
126
127
  $[20] = t6;
127
- $[21] = t12;
128
+ $[21] = t7;
129
+ $[22] = t9;
130
+ $[23] = t10;
128
131
  } else {
129
- t12 = $[21];
132
+ t10 = $[23];
130
133
  }
131
- return t12;
134
+ return t10;
132
135
  }
package/dist/components/presence-swap.js CHANGED
@@ -9,7 +9,6 @@ const PRESENCE_SWAP_ELEMENTS = {
9
9
  div: motion.div,
10
10
  span: motion.span
11
11
  };
12
- const INSTANT_TRANSITION = { duration: 0 };
13
12
  /**
14
13
  * One keyed state of the swap. While it animates out it turns inert and hidden
15
14
  * from assistive technology, so stale controls cannot be clicked or announced.
@@ -17,7 +16,7 @@ const INSTANT_TRANSITION = { duration: 0 };
17
16
  * @returns The animated state.
18
17
  */
19
18
  function PresenceSwapItem(t0) {
20
- const $ = _c(20);
19
+ const $ = _c(14);
21
20
  const { as, className, children } = t0;
22
21
  const MotionElement = PRESENCE_SWAP_ELEMENTS[as];
23
22
  const isPresent = useIsPresent();
@@ -37,78 +36,66 @@ function PresenceSwapItem(t0) {
37
36
  t3 = $[1];
38
37
  }
39
38
  let t4;
40
- if ($[2] !== shouldReduceMotion) {
41
- t4 = shouldReduceMotion ? INSTANT_TRANSITION : {
42
- duration: MOTION_TIMING.enter,
43
- ease: MOTION_EASE
44
- };
45
- $[2] = shouldReduceMotion;
46
- $[3] = t4;
47
- } else {
48
- t4 = $[3];
49
- }
50
- let t5;
51
- if ($[4] !== t4) {
52
- t5 = {
39
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
40
+ t4 = {
53
41
  opacity: 1,
54
42
  y: 0,
55
- transition: t4
43
+ transition: {
44
+ duration: MOTION_TIMING.enter,
45
+ ease: MOTION_EASE
46
+ }
56
47
  };
57
- $[4] = t4;
58
- $[5] = t5;
48
+ $[2] = t4;
59
49
  } else {
60
- t5 = $[5];
50
+ t4 = $[2];
61
51
  }
62
- const t6 = -distance;
63
- let t7;
64
- if ($[6] !== shouldReduceMotion) {
65
- t7 = shouldReduceMotion ? INSTANT_TRANSITION : {
52
+ const t5 = -distance;
53
+ let t6;
54
+ if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
55
+ t6 = {
66
56
  duration: MOTION_TIMING.exit,
67
57
  ease: MOTION_EASE
68
58
  };
69
- $[6] = shouldReduceMotion;
70
- $[7] = t7;
59
+ $[3] = t6;
71
60
  } else {
72
- t7 = $[7];
61
+ t6 = $[3];
73
62
  }
74
- let t8;
75
- if ($[8] !== t6 || $[9] !== t7) {
76
- t8 = {
63
+ let t7;
64
+ if ($[4] !== t5) {
65
+ t7 = {
77
66
  opacity: 0,
78
- y: t6,
79
- transition: t7
67
+ y: t5,
68
+ transition: t6
80
69
  };
81
- $[8] = t6;
82
- $[9] = t7;
83
- $[10] = t8;
70
+ $[4] = t5;
71
+ $[5] = t7;
84
72
  } else {
85
- t8 = $[10];
73
+ t7 = $[5];
86
74
  }
87
- let t9;
88
- if ($[11] !== MotionElement || $[12] !== children || $[13] !== className || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t8) {
89
- t9 = /* @__PURE__ */ _jsx(MotionElement, {
75
+ let t8;
76
+ if ($[6] !== MotionElement || $[7] !== children || $[8] !== className || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t7) {
77
+ t8 = /* @__PURE__ */ _jsx(MotionElement, {
90
78
  "data-slot": "presence-swap",
91
79
  "aria-hidden": t1,
92
80
  inert: t2,
93
81
  className,
94
82
  initial: t3,
95
- animate: t5,
96
- exit: t8,
83
+ animate: t4,
84
+ exit: t7,
97
85
  children
98
86
  });
99
- $[11] = MotionElement;
100
- $[12] = children;
101
- $[13] = className;
102
- $[14] = t1;
103
- $[15] = t2;
104
- $[16] = t3;
105
- $[17] = t5;
106
- $[18] = t8;
107
- $[19] = t9;
87
+ $[6] = MotionElement;
88
+ $[7] = children;
89
+ $[8] = className;
90
+ $[9] = t1;
91
+ $[10] = t2;
92
+ $[11] = t3;
93
+ $[12] = t7;
94
+ $[13] = t8;
108
95
  } else {
109
- t9 = $[19];
96
+ t8 = $[13];
110
97
  }
111
- return t9;
98
+ return t8;
112
99
  }
113
100
  /**
114
101
  * Swaps keyed content with a short lift-and-fade; the first render is not animated.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beez-ui",
3
- "version": "0.8.1",
3
+ "version": "0.8.2",
4
4
  "description": "Shared UI components with the customizations extracted from TuTribu.",
5
5
  "type": "module",
6
6
  "sideEffects": [