@khipu/design-system 0.3.5-alpha.4 → 0.3.5-alpha.5

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 (6) hide show
  1. package/dist/beercss/khipu-beercss.css +1 -1
  2. package/dist/beercss/khipu-beercss.scoped.css +1 -1
  3. package/dist/beercss/metadata.json +5 -5
  4. package/dist/index.js +23 -4
  5. package/dist/index.mjs +23 -4
  6. package/package.json +1 -1
package/dist/beercss/khipu-beercss.css CHANGED
@@ -13,7 +13,7 @@
13
13
  *
14
14
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
15
15
  * Source: design-system/src/tokens/tokens.json
16
- * Generated: 2026-08-13T17:53:31.569Z
16
+ * Generated: 2026-08-13T18:35:56.760Z
17
17
  *
18
18
  * To regenerate:
19
19
  * cd design-system && npm run tokens:generate
package/dist/beercss/khipu-beercss.scoped.css CHANGED
@@ -15,7 +15,7 @@
15
15
  *
16
16
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
17
17
  * Source: design-system/src/tokens/tokens.json
18
- * Generated: 2026-08-13T17:53:31.569Z
18
+ * Generated: 2026-08-13T18:35:56.760Z
19
19
  *
20
20
  * To regenerate:
21
21
  * cd design-system && npm run tokens:generate
package/dist/beercss/metadata.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@khipu/design-system/beercss",
3
- "version": "0.3.5-alpha.4",
3
+ "version": "0.3.5-alpha.5",
4
4
  "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
5
- "buildDate": "2026-08-13T17:53:34.000Z",
5
+ "buildDate": "2026-08-13T18:35:59.338Z",
6
6
  "includes": {
7
7
  "beercss": "4.0.1",
8
8
  "khipu-tokens": "latest",
@@ -19,8 +19,8 @@
19
19
  },
20
20
  "scopeClass": ".kds-theme-root",
21
21
  "cdn": {
22
- "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.4/dist/beercss/khipu-beercss.min.css",
23
- "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.4/dist/beercss/khipu-beercss.scoped.min.css",
24
- "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.4/dist/beercss/khipu-beercss.min.js"
22
+ "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.5/dist/beercss/khipu-beercss.min.css",
23
+ "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.5/dist/beercss/khipu-beercss.scoped.min.css",
24
+ "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.5/dist/beercss/khipu-beercss.min.js"
25
25
  }
26
26
  }
package/dist/index.js CHANGED
@@ -206,6 +206,7 @@ var CARD_MIN_DELTA_PX = 8;
206
206
  var CARD_TRANSITION_MS = 280;
207
207
  var BODY_CARD_SELECTOR = ".kds-screen > .kds-card-elevated";
208
208
  var CARD_MARK_ATTRIBUTE = "data-kds-height-transition";
209
+ var SCREEN_LAST_HEIGHT_ATTRIBUTE = "data-kds-last-card-height";
209
210
  function useCardHeightTransition() {
210
211
  (0, import_react.useEffect)(() => {
211
212
  if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
@@ -218,13 +219,31 @@ function useCardHeightTransition() {
218
219
  return;
219
220
  }
220
221
  const observers = [];
222
+ const animate = (card, from, to) => card.animate(
223
+ [{ height: `${from}px` }, { height: `${to}px` }],
224
+ { duration: CARD_TRANSITION_MS, easing: "ease-out" }
225
+ );
221
226
  const observe = (card) => {
222
227
  if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
223
228
  return;
224
229
  }
225
230
  card.setAttribute(CARD_MARK_ATTRIBUTE, "on");
231
+ const screen = card.parentElement;
226
232
  let previous = card.offsetHeight;
227
233
  let animating = false;
234
+ const remembered = screen?.getAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE);
235
+ if (remembered) {
236
+ const from = Number(remembered);
237
+ if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
238
+ animating = true;
239
+ animate(card, from, previous).finished.then(() => {
240
+ animating = false;
241
+ }).catch(() => {
242
+ animating = false;
243
+ });
244
+ }
245
+ }
246
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
228
247
  const observer = new ResizeObserver(() => {
229
248
  if (animating) {
230
249
  return;
@@ -232,17 +251,17 @@ function useCardHeightTransition() {
232
251
  const next = card.offsetHeight;
233
252
  if (Math.abs(next - previous) < CARD_MIN_DELTA_PX) {
234
253
  previous = next;
254
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
235
255
  return;
236
256
  }
237
257
  animating = true;
238
- const animation = card.animate(
239
- [{ height: `${previous}px` }, { height: `${next}px` }],
240
- { duration: CARD_TRANSITION_MS, easing: "ease-out" }
241
- );
258
+ const animation = animate(card, previous, next);
242
259
  previous = next;
260
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
243
261
  animation.finished.then(() => {
244
262
  animating = false;
245
263
  previous = card.offsetHeight;
264
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
246
265
  }).catch(() => {
247
266
  animating = false;
248
267
  });
package/dist/index.mjs CHANGED
@@ -78,6 +78,7 @@ var CARD_MIN_DELTA_PX = 8;
78
78
  var CARD_TRANSITION_MS = 280;
79
79
  var BODY_CARD_SELECTOR = ".kds-screen > .kds-card-elevated";
80
80
  var CARD_MARK_ATTRIBUTE = "data-kds-height-transition";
81
+ var SCREEN_LAST_HEIGHT_ATTRIBUTE = "data-kds-last-card-height";
81
82
  function useCardHeightTransition() {
82
83
  useEffect(() => {
83
84
  if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
@@ -90,13 +91,31 @@ function useCardHeightTransition() {
90
91
  return;
91
92
  }
92
93
  const observers = [];
94
+ const animate = (card, from, to) => card.animate(
95
+ [{ height: `${from}px` }, { height: `${to}px` }],
96
+ { duration: CARD_TRANSITION_MS, easing: "ease-out" }
97
+ );
93
98
  const observe = (card) => {
94
99
  if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
95
100
  return;
96
101
  }
97
102
  card.setAttribute(CARD_MARK_ATTRIBUTE, "on");
103
+ const screen = card.parentElement;
98
104
  let previous = card.offsetHeight;
99
105
  let animating = false;
106
+ const remembered = screen?.getAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE);
107
+ if (remembered) {
108
+ const from = Number(remembered);
109
+ if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
110
+ animating = true;
111
+ animate(card, from, previous).finished.then(() => {
112
+ animating = false;
113
+ }).catch(() => {
114
+ animating = false;
115
+ });
116
+ }
117
+ }
118
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
100
119
  const observer = new ResizeObserver(() => {
101
120
  if (animating) {
102
121
  return;
@@ -104,17 +123,17 @@ function useCardHeightTransition() {
104
123
  const next = card.offsetHeight;
105
124
  if (Math.abs(next - previous) < CARD_MIN_DELTA_PX) {
106
125
  previous = next;
126
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
107
127
  return;
108
128
  }
109
129
  animating = true;
110
- const animation = card.animate(
111
- [{ height: `${previous}px` }, { height: `${next}px` }],
112
- { duration: CARD_TRANSITION_MS, easing: "ease-out" }
113
- );
130
+ const animation = animate(card, previous, next);
114
131
  previous = next;
132
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
115
133
  animation.finished.then(() => {
116
134
  animating = false;
117
135
  previous = card.offsetHeight;
136
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
118
137
  }).catch(() => {
119
138
  animating = false;
120
139
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khipu/design-system",
3
- "version": "0.3.5-alpha.4",
3
+ "version": "0.3.5-alpha.5",
4
4
  "description": "Khipu Design System - UI components and design tokens for the Khipu payment platform",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",