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

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 +31 -4
  5. package/dist/index.mjs +31 -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-14T15:09:26.125Z
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-14T15:09:26.125Z
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.6",
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-14T15:09:28.792Z",
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.6/dist/beercss/khipu-beercss.min.css",
23
+ "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.6/dist/beercss/khipu-beercss.scoped.min.css",
24
+ "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.6/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,39 @@ function useCardHeightTransition() {
218
219
  return;
219
220
  }
220
221
  const observers = [];
222
+ const animate = (card, from, to) => {
223
+ card.style.height = `${from}px`;
224
+ const animation = card.animate(
225
+ [{ height: `${from}px` }, { height: `${to}px` }],
226
+ { duration: CARD_TRANSITION_MS, easing: "ease-out" }
227
+ );
228
+ const release = () => {
229
+ card.style.height = "";
230
+ };
231
+ animation.finished.then(release).catch(release);
232
+ return animation;
233
+ };
221
234
  const observe = (card) => {
222
235
  if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
223
236
  return;
224
237
  }
225
238
  card.setAttribute(CARD_MARK_ATTRIBUTE, "on");
239
+ const screen = card.parentElement;
226
240
  let previous = card.offsetHeight;
227
241
  let animating = false;
242
+ const remembered = screen?.getAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE);
243
+ if (remembered) {
244
+ const from = Number(remembered);
245
+ if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
246
+ animating = true;
247
+ animate(card, from, previous).finished.then(() => {
248
+ animating = false;
249
+ }).catch(() => {
250
+ animating = false;
251
+ });
252
+ }
253
+ }
254
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
228
255
  const observer = new ResizeObserver(() => {
229
256
  if (animating) {
230
257
  return;
@@ -232,17 +259,17 @@ function useCardHeightTransition() {
232
259
  const next = card.offsetHeight;
233
260
  if (Math.abs(next - previous) < CARD_MIN_DELTA_PX) {
234
261
  previous = next;
262
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
235
263
  return;
236
264
  }
237
265
  animating = true;
238
- const animation = card.animate(
239
- [{ height: `${previous}px` }, { height: `${next}px` }],
240
- { duration: CARD_TRANSITION_MS, easing: "ease-out" }
241
- );
266
+ const animation = animate(card, previous, next);
242
267
  previous = next;
268
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
243
269
  animation.finished.then(() => {
244
270
  animating = false;
245
271
  previous = card.offsetHeight;
272
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
246
273
  }).catch(() => {
247
274
  animating = false;
248
275
  });
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,39 @@ function useCardHeightTransition() {
90
91
  return;
91
92
  }
92
93
  const observers = [];
94
+ const animate = (card, from, to) => {
95
+ card.style.height = `${from}px`;
96
+ const animation = card.animate(
97
+ [{ height: `${from}px` }, { height: `${to}px` }],
98
+ { duration: CARD_TRANSITION_MS, easing: "ease-out" }
99
+ );
100
+ const release = () => {
101
+ card.style.height = "";
102
+ };
103
+ animation.finished.then(release).catch(release);
104
+ return animation;
105
+ };
93
106
  const observe = (card) => {
94
107
  if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
95
108
  return;
96
109
  }
97
110
  card.setAttribute(CARD_MARK_ATTRIBUTE, "on");
111
+ const screen = card.parentElement;
98
112
  let previous = card.offsetHeight;
99
113
  let animating = false;
114
+ const remembered = screen?.getAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE);
115
+ if (remembered) {
116
+ const from = Number(remembered);
117
+ if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
118
+ animating = true;
119
+ animate(card, from, previous).finished.then(() => {
120
+ animating = false;
121
+ }).catch(() => {
122
+ animating = false;
123
+ });
124
+ }
125
+ }
126
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
100
127
  const observer = new ResizeObserver(() => {
101
128
  if (animating) {
102
129
  return;
@@ -104,17 +131,17 @@ function useCardHeightTransition() {
104
131
  const next = card.offsetHeight;
105
132
  if (Math.abs(next - previous) < CARD_MIN_DELTA_PX) {
106
133
  previous = next;
134
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
107
135
  return;
108
136
  }
109
137
  animating = true;
110
- const animation = card.animate(
111
- [{ height: `${previous}px` }, { height: `${next}px` }],
112
- { duration: CARD_TRANSITION_MS, easing: "ease-out" }
113
- );
138
+ const animation = animate(card, previous, next);
114
139
  previous = next;
140
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
115
141
  animation.finished.then(() => {
116
142
  animating = false;
117
143
  previous = card.offsetHeight;
144
+ screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
118
145
  }).catch(() => {
119
146
  animating = false;
120
147
  });
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.6",
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",