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

package/dist/index.mjs

@@ -1,6 +1,3 @@
-// src/theme/KdsThemeProvider.tsx
-import { useEffect } from "react";
-
 // src/components/core/utils.ts
 import { clsx } from "clsx";
 function hexToRgb(hex) {
@@ -72,106 +69,28 @@ function formatTime(iso) {
   return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
 
+// src/version.ts
+var KDS_VERSION = "0.3.5-alpha.9";
+
 // 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";
-var SCREEN_LAST_HEIGHT_ATTRIBUTE = "data-kds-last-card-height";
-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 animate = (card, from, to) => {
-      card.style.height = `${from}px`;
-      const animation = card.animate(
-        [{ height: `${from}px` }, { height: `${to}px` }],
-        { duration: CARD_TRANSITION_MS, easing: "ease-out" }
-      );
-      const release = () => {
-        card.style.height = "";
-      };
-      animation.finished.then(release).catch(release);
-      return animation;
-    };
-    const observe = (card) => {
-      if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
-        return;
-      }
-      card.setAttribute(CARD_MARK_ATTRIBUTE, "on");
-      const screen = card.parentElement;
-      let previous = card.offsetHeight;
-      let animating = false;
-      const remembered = screen?.getAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE);
-      if (remembered) {
-        const from = Number(remembered);
-        if (Number.isFinite(from) && from > 0 && Math.abs(from - previous) >= CARD_MIN_DELTA_PX) {
-          animating = true;
-          animate(card, from, previous).finished.then(() => {
-            animating = false;
-          }).catch(() => {
-            animating = false;
-          });
-        }
-      }
-      screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
-      const observer = new ResizeObserver(() => {
-        if (animating) {
-          return;
-        }
-        const next = card.offsetHeight;
-        if (Math.abs(next - previous) < CARD_MIN_DELTA_PX) {
-          previous = next;
-          screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
-          return;
-        }
-        animating = true;
-        const animation = animate(card, previous, next);
-        previous = next;
-        screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(next));
-        animation.finished.then(() => {
-          animating = false;
-          previous = card.offsetHeight;
-          screen?.setAttribute(SCREEN_LAST_HEIGHT_ATTRIBUTE, String(previous));
-        }).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),
     "--primary-container": lighten(primaryColor, 0.85),
     "--on-primary-container": primaryColor
   } : void 0;
-  return /* @__PURE__ */ jsx("div", { className: `kds-theme-root ${mode}`, "data-theme": mode, style, children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `kds-theme-root ${mode}`,
+      "data-theme": mode,
+      "data-kds-version": KDS_VERSION,
+      style,
+      children
+    }
+  );
 }
 
 // src/tokens/index.ts
@@ -1547,7 +1466,7 @@ var KdsTypography = forwardRef11(
 KdsTypography.displayName = "KdsTypography";
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-import React13, { forwardRef as forwardRef12, Children, useMemo } from "react";
+import React12, { forwardRef as forwardRef12, Children, useMemo } from "react";
 
 // src/components/core/hooks/useTabsKeyboard.ts
 import { useCallback as useCallback2 } from "react";
@@ -1595,8 +1514,8 @@ var KdsTabs = forwardRef12(
         onKeyDown,
         ...props,
         children: Children.map(children, (child, i) => {
-          if (!React13.isValidElement(child)) return child;
-          return React13.cloneElement(child, {
+          if (!React12.isValidElement(child)) return child;
+          return React12.cloneElement(child, {
             _active: i === activeIndex,
             _onClick: () => onChange(i)
           });
@@ -1757,12 +1676,12 @@ KdsChip.displayName = "KdsChip";
 import { forwardRef as forwardRef16 } from "react";
 
 // src/components/core/hooks/useAutoHide.ts
-import { useState as useState3, useEffect as useEffect2, useRef } from "react";
+import { useState as useState3, useEffect, useRef } from "react";
 function useAutoHide(durationMs, onHide) {
   const [visible, setVisible] = useState3(true);
   const onHideRef = useRef(onHide);
   onHideRef.current = onHide;
-  useEffect2(() => {
+  useEffect(() => {
     if (durationMs <= 0) return;
     const timer = setTimeout(() => {
       setVisible(false);
@@ -2206,10 +2125,10 @@ var KdsExpandPanel = forwardRef24(
 KdsExpandPanel.displayName = "KdsExpandPanel";
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect3, useRef as useRef3 } from "react";
 
 // src/components/core/hooks/useCountdown.ts
-import { useState as useState6, useEffect as useEffect3 } from "react";
+import { useState as useState6, useEffect as useEffect2 } from "react";
 function calcRemaining(deadline) {
   const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
   const totalSeconds = Math.floor(diff / 1e3);
@@ -2223,7 +2142,7 @@ function calcRemaining(deadline) {
 }
 function useCountdown(deadline) {
   const [state, setState] = useState6(() => calcRemaining(deadline));
-  useEffect3(() => {
+  useEffect2(() => {
     const tick = () => setState(calcRemaining(deadline));
     const id = setInterval(tick, 1e3);
     return () => clearInterval(id);
@@ -2238,7 +2157,7 @@ var KdsCountdown = forwardRef25(
     const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
     const onExpireRef = useRef3(onExpire);
     onExpireRef.current = onExpire;
-    useEffect4(() => {
+    useEffect3(() => {
       if (expired) {
         onExpireRef.current?.();
       }
@@ -2617,7 +2536,7 @@ KdsMerchantTile.displayName = "KdsMerchantTile";
 import { forwardRef as forwardRef42, useState as useState9 } from "react";
 
 // src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect4, useState as useState8 } from "react";
 
 // src/components/domain/KdsInvoiceMerchant/logoLuminance.ts
 var LIGHT_LOGO_LUMINANCE_THRESHOLD = 0.72;
@@ -2667,7 +2586,7 @@ function pickLogoBackdrop(luminance) {
 // src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
 function useLogoBackdrop(logoUrl) {
   const [backdrop, setBackdrop] = useState8("light");
-  useEffect5(() => {
+  useEffect4(() => {
     let cancelled = false;
     setBackdrop("light");
     if (!logoUrl) {
@@ -2909,12 +2828,12 @@ var guideToFirstInvalidFieldOnBlur = (form) => {
 };
 
 // src/components/core/hooks/useStickyInvoiceCollapse.ts
-import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
 function useStickyInvoiceCollapse(options = {}) {
   const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
   const onCollapseStartRef = useRef4(onCollapseStart);
   onCollapseStartRef.current = onCollapseStart;
-  useEffect6(() => {
+  useEffect5(() => {
     let viewportOffset = 0;
     let ticking = false;
     let wasCollapsing = false;
@@ -3036,11 +2955,11 @@ function useExpandToggle(options = {}) {
 }
 
 // src/components/core/hooks/useHideOnScroll.ts
-import { useEffect as useEffect7, useState as useState11 } from "react";
+import { useEffect as useEffect6, useState as useState11 } from "react";
 function useHideOnScroll(options = {}) {
   const { threshold = 8, topOffset = 0 } = options;
   const [hidden, setHidden] = useState11(false);
-  useEffect7(() => {
+  useEffect6(() => {
     let viewportOffset = 0;
     let lastY = 0;
     let ticking = false;
@@ -3083,12 +3002,12 @@ function useHideOnScroll(options = {}) {
 }
 
 // src/components/core/hooks/useMediaQuery.ts
-import { useEffect as useEffect8, useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState12 } from "react";
 function useMediaQuery(query) {
   const [matches, setMatches] = useState12(
     () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
   );
-  useEffect8(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     setMatches(mql.matches);
@@ -3099,6 +3018,7 @@ function useMediaQuery(query) {
   return matches;
 }
 export {
+  KDS_VERSION,
   KdsAccordion,
   KdsAccordionDetails,
   KdsAccordionSummary,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khipu/design-system",
-  "version": "0.3.5-alpha.6",
+  "version": "0.3.5-alpha.9",
   "description": "Khipu Design System - UI components and design tokens for the Khipu payment platform",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -49,7 +49,7 @@
   },
   "scripts": {
     "build": "npm run build:web && npm run tokens:export && node scripts/generate-css-variables.js && npm run beercss:build",
-    "build:web": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build:web": "node scripts/generate-version.js && tsup src/index.ts --format cjs,esm --dts --clean",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
     "demo": "vite --config demo/vite.config.ts",
     "typecheck": "tsc --noEmit",