@khipu/design-system 0.3.4 → 0.3.5-alpha.2

package/dist/index.mjs

@@ -1,3 +1,6 @@
+// src/theme/KdsThemeProvider.tsx
+import { useEffect } from "react";
+
 // src/components/core/utils.ts
 import { clsx } from "clsx";
 function hexToRgb(hex) {
@@ -71,7 +74,70 @@ function formatTime(iso) {
 
 // src/theme/KdsThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
+var CARD_MIN_DELTA_PX = 8;
+var CARD_TRANSITION_MS = 280;
+var BODY_CARD_SELECTOR = ".kds-screen > .kds-card-elevated";
+var CARD_MARK_ATTRIBUTE = "data-kds-height-transition";
+function useCardHeightTransition() {
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    if (typeof Element.prototype.animate !== "function") {
+      return;
+    }
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const observers = [];
+    const observe = (card) => {
+      if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
+        return;
+      }
+      card.setAttribute(CARD_MARK_ATTRIBUTE, "on");
+      let previous = card.offsetHeight;
+      let animating = false;
+      const observer = new ResizeObserver(() => {
+        if (animating) {
+          return;
+        }
+        const next = card.offsetHeight;
+        if (Math.abs(next - previous) < CARD_MIN_DELTA_PX) {
+          previous = next;
+          return;
+        }
+        animating = true;
+        const animation = card.animate(
+          [{ height: `${previous}px` }, { height: `${next}px` }],
+          { duration: CARD_TRANSITION_MS, easing: "ease-out" }
+        );
+        previous = next;
+        animation.finished.then(() => {
+          animating = false;
+          previous = card.offsetHeight;
+        }).catch(() => {
+          animating = false;
+        });
+      });
+      observer.observe(card);
+      observers.push(observer);
+    };
+    document.querySelectorAll(BODY_CARD_SELECTOR).forEach(observe);
+    const tree = new MutationObserver(() => {
+      document.querySelectorAll(BODY_CARD_SELECTOR).forEach(observe);
+    });
+    tree.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      tree.disconnect();
+      observers.forEach((observer) => observer.disconnect());
+      document.querySelectorAll(BODY_CARD_SELECTOR).forEach((card) => {
+        card.removeAttribute(CARD_MARK_ATTRIBUTE);
+      });
+    };
+  }, []);
+}
 function KdsThemeProvider({ primaryColor, mode = "light", children }) {
+  useCardHeightTransition();
   const style = primaryColor ? {
     "--primary": primaryColor,
     "--on-primary": getContrastColor(primaryColor),
@@ -1454,7 +1520,7 @@ var KdsTypography = forwardRef11(
 KdsTypography.displayName = "KdsTypography";
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-import React12, { forwardRef as forwardRef12, Children, useMemo } from "react";
+import React13, { forwardRef as forwardRef12, Children, useMemo } from "react";
 
 // src/components/core/hooks/useTabsKeyboard.ts
 import { useCallback as useCallback2 } from "react";
@@ -1502,8 +1568,8 @@ var KdsTabs = forwardRef12(
         onKeyDown,
         ...props,
         children: Children.map(children, (child, i) => {
-          if (!React12.isValidElement(child)) return child;
-          return React12.cloneElement(child, {
+          if (!React13.isValidElement(child)) return child;
+          return React13.cloneElement(child, {
             _active: i === activeIndex,
             _onClick: () => onChange(i)
           });
@@ -1664,12 +1730,12 @@ KdsChip.displayName = "KdsChip";
 import { forwardRef as forwardRef16 } from "react";
 
 // src/components/core/hooks/useAutoHide.ts
-import { useState as useState3, useEffect, useRef } from "react";
+import { useState as useState3, useEffect as useEffect2, useRef } from "react";
 function useAutoHide(durationMs, onHide) {
   const [visible, setVisible] = useState3(true);
   const onHideRef = useRef(onHide);
   onHideRef.current = onHide;
-  useEffect(() => {
+  useEffect2(() => {
     if (durationMs <= 0) return;
     const timer = setTimeout(() => {
       setVisible(false);
@@ -2113,10 +2179,10 @@ var KdsExpandPanel = forwardRef24(
 KdsExpandPanel.displayName = "KdsExpandPanel";
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect4, useRef as useRef3 } from "react";
 
 // src/components/core/hooks/useCountdown.ts
-import { useState as useState6, useEffect as useEffect2 } from "react";
+import { useState as useState6, useEffect as useEffect3 } from "react";
 function calcRemaining(deadline) {
   const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
   const totalSeconds = Math.floor(diff / 1e3);
@@ -2130,7 +2196,7 @@ function calcRemaining(deadline) {
 }
 function useCountdown(deadline) {
   const [state, setState] = useState6(() => calcRemaining(deadline));
-  useEffect2(() => {
+  useEffect3(() => {
     const tick = () => setState(calcRemaining(deadline));
     const id = setInterval(tick, 1e3);
     return () => clearInterval(id);
@@ -2145,7 +2211,7 @@ var KdsCountdown = forwardRef25(
     const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
     const onExpireRef = useRef3(onExpire);
     onExpireRef.current = onExpire;
-    useEffect3(() => {
+    useEffect4(() => {
       if (expired) {
         onExpireRef.current?.();
       }
@@ -2524,7 +2590,7 @@ KdsMerchantTile.displayName = "KdsMerchantTile";
 import { forwardRef as forwardRef42, useState as useState9 } from "react";
 
 // src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
-import { useEffect as useEffect4, useState as useState8 } from "react";
+import { useEffect as useEffect5, useState as useState8 } from "react";
 
 // src/components/domain/KdsInvoiceMerchant/logoLuminance.ts
 var LIGHT_LOGO_LUMINANCE_THRESHOLD = 0.72;
@@ -2574,7 +2640,7 @@ function pickLogoBackdrop(luminance) {
 // src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
 function useLogoBackdrop(logoUrl) {
   const [backdrop, setBackdrop] = useState8("light");
-  useEffect4(() => {
+  useEffect5(() => {
     let cancelled = false;
     setBackdrop("light");
     if (!logoUrl) {
@@ -2816,12 +2882,12 @@ var guideToFirstInvalidFieldOnBlur = (form) => {
 };
 
 // src/components/core/hooks/useStickyInvoiceCollapse.ts
-import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
 function useStickyInvoiceCollapse(options = {}) {
   const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
   const onCollapseStartRef = useRef4(onCollapseStart);
   onCollapseStartRef.current = onCollapseStart;
-  useEffect5(() => {
+  useEffect6(() => {
     let viewportOffset = 0;
     let ticking = false;
     let wasCollapsing = false;
@@ -2943,11 +3009,11 @@ function useExpandToggle(options = {}) {
 }
 
 // src/components/core/hooks/useHideOnScroll.ts
-import { useEffect as useEffect6, useState as useState11 } from "react";
+import { useEffect as useEffect7, useState as useState11 } from "react";
 function useHideOnScroll(options = {}) {
   const { threshold = 8, topOffset = 0 } = options;
   const [hidden, setHidden] = useState11(false);
-  useEffect6(() => {
+  useEffect7(() => {
     let viewportOffset = 0;
     let lastY = 0;
     let ticking = false;
@@ -2990,12 +3056,12 @@ function useHideOnScroll(options = {}) {
 }
 
 // src/components/core/hooks/useMediaQuery.ts
-import { useEffect as useEffect7, useState as useState12 } from "react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
 function useMediaQuery(query) {
   const [matches, setMatches] = useState12(
     () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     setMatches(mql.matches);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khipu/design-system",
-  "version": "0.3.4",
+  "version": "0.3.5-alpha.2",
   "description": "Khipu Design System - UI components and design tokens for the Khipu payment platform",
   "main": "dist/index.js",
   "module": "dist/index.mjs",