@khipu/design-system 0.2.0-alpha.24 → 0.2.0-alpha.25

package/dist/index.mjs

@@ -347,6 +347,8 @@ var semanticColors = {
     // From Figma: warning/light
     dark: "#E65100",
     // From Figma: warning/dark
+    warm: "#8A6D1A",
+    // Warm/olive variant for header icons (LigoPay handoff v2)
     container: "#FFFBEB",
     // Light amber background for chips/badges
     contrastText: "#FFFFFF"
@@ -365,6 +367,8 @@ var semanticColors = {
     main: "#0288D1",
     light: "#03A9F4",
     dark: "#01579B",
+    blue: "#5A5FE0",
+    // Khipu-blue / LigoPay informational blue (distinct from cyan main)
     container: "#EFF6FF",
     // Light blue background for chips/badges
     contrastText: "#FFFFFF"
@@ -407,8 +411,10 @@ var fontSizes = {
   // 24px
   "3xl": "1.875rem",
   // 30px
-  "4xl": "2.25rem"
+  "4xl": "2.25rem",
   // 36px
+  decimalSup: "0.5em"
+  // Relative size for decimal superscript in amount displays
 };
 var lineHeights = {
   tight: 1.2,
@@ -2181,11 +2187,85 @@ var KdsMerchantTile = forwardRef35(
 );
 KdsMerchantTile.displayName = "KdsMerchantTile";
 
-// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
+// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
 import { forwardRef as forwardRef36 } from "react";
 import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
-var KdsBillAttachment = forwardRef36(
-  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ jsxs28(
+var KdsPaymentTotal = forwardRef36(
+  ({
+    variant = "default",
+    tone = "brand",
+    amount,
+    currency = "S/",
+    decimals = 2,
+    locale = "es-PE",
+    label = "Monto a pagar",
+    title = "Escanea el QR",
+    titleMobile = "Descarga el QR",
+    className,
+    ...props
+  }, ref) => {
+    const { integer, fraction } = formatAmount(amount, decimals, locale);
+    const isEmail = variant === "email";
+    const isInfoTone = tone === "info";
+    return /* @__PURE__ */ jsxs28(
+      "div",
+      {
+        ref,
+        className: clsx(
+          "kds-payment-total",
+          isEmail && "kds-payment-total--email",
+          isInfoTone && "kds-payment-total--tone-info",
+          className
+        ),
+        ...props,
+        children: [
+          !isEmail && title != null && /* @__PURE__ */ jsx38("h5", { className: "kds-payment-total-title", children: title }),
+          !isEmail && titleMobile != null && /* @__PURE__ */ jsx38("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
+          label != null && /* @__PURE__ */ jsx38("h6", { className: "kds-payment-label", children: label }),
+          /* @__PURE__ */ jsxs28("h5", { className: "kds-payment-amount", children: [
+            currency,
+            " ",
+            integer,
+            fraction !== null && /* @__PURE__ */ jsx38("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
+          ] })
+        ]
+      }
+    );
+  }
+);
+KdsPaymentTotal.displayName = "KdsPaymentTotal";
+function formatAmount(amount, decimals, locale) {
+  const showDecimals = typeof decimals === "number" && decimals > 0;
+  if (typeof amount === "number") {
+    if (showDecimals) {
+      const fixed = amount.toFixed(decimals);
+      const [int, frac] = fixed.split(".");
+      const formattedInt2 = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(
+        Number(int)
+      );
+      return { integer: formattedInt2, fraction: frac ?? null };
+    }
+    const formattedInt = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(
+      Math.trunc(amount)
+    );
+    return { integer: formattedInt, fraction: null };
+  }
+  const str = amount.trim();
+  const dotIdx = str.indexOf(".");
+  if (dotIdx === -1 || !showDecimals) {
+    return { integer: str, fraction: null };
+  }
+  return {
+    integer: str.slice(0, dotIdx),
+    fraction: str.slice(dotIdx + 1)
+  };
+}
+
+// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
+import { forwardRef as forwardRef37 } from "react";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+var KdsBillAttachment = forwardRef37(
+  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ jsxs29(
     "a",
     {
       ref,
@@ -2195,15 +2275,15 @@ var KdsBillAttachment = forwardRef36(
       className: clsx("kds-bill-attachment", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx38("i", { className: "material-symbols-outlined", children: icon }),
-        /* @__PURE__ */ jsx38("span", { children: filename })
+        /* @__PURE__ */ jsx39("i", { className: "material-symbols-outlined", children: icon }),
+        /* @__PURE__ */ jsx39("span", { children: filename })
       ]
     }
   )
 );
 KdsBillAttachment.displayName = "KdsBillAttachment";
-var KdsBillAttachments = forwardRef36(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx38("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
+var KdsBillAttachments = forwardRef37(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx39("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
 );
 KdsBillAttachments.displayName = "KdsBillAttachments";
 export {
@@ -2235,6 +2315,7 @@ export {
   KdsLinearProgress,
   KdsMerchantTile,
   KdsMontoRow,
+  KdsPaymentTotal,
   KdsQrRow,
   KdsRadioGroup,
   KdsRecapList,

package/package.json

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