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

package/dist/beercss/metadata.json

@@ -1,8 +1,8 @@
 {
   "name": "@khipu/design-system/beercss",
-  "version": "0.2.0-alpha.24",
+  "version": "0.2.0-alpha.26",
   "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
-  "buildDate": "2026-05-27T17:53:27.253Z",
+  "buildDate": "2026-05-28T19:59:11.921Z",
   "includes": {
     "beercss": "4.0.1",
     "khipu-tokens": "latest",
@@ -16,7 +16,7 @@
     "jsUnminified": "khipu-beercss.js"
   },
   "cdn": {
-    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.24/dist/beercss/khipu-beercss.min.css",
-    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.24/dist/beercss/khipu-beercss.min.js"
+    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.26/dist/beercss/khipu-beercss.min.css",
+    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.26/dist/beercss/khipu-beercss.min.js"
   }
 }

package/dist/index.d.mts

@@ -238,6 +238,7 @@ declare const colors: {
         main: string;
         light: string;
         dark: string;
+        warm: string;
         container: string;
         contrastText: string;
     };
@@ -254,6 +255,7 @@ declare const colors: {
         main: string;
         light: string;
         dark: string;
+        blue: string;
         container: string;
         contrastText: string;
     };
@@ -375,6 +377,7 @@ declare const fontSizes: {
     readonly '2xl': "1.5rem";
     readonly '3xl': "1.875rem";
     readonly '4xl': "2.25rem";
+    readonly decimalSup: "0.5em";
 };
 declare const lineHeights: {
     readonly tight: 1.2;
@@ -693,6 +696,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                warm: string;
                 container: string;
                 contrastText: string;
             };
@@ -709,6 +713,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                blue: string;
                 container: string;
                 contrastText: string;
             };
@@ -830,6 +835,7 @@ declare const tokensByMode: {
             readonly '2xl': "1.5rem";
             readonly '3xl': "1.875rem";
             readonly '4xl': "2.25rem";
+            readonly decimalSup: "0.5em";
         };
         readonly lineHeights: {
             readonly tight: 1.2;
@@ -1284,6 +1290,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                warm: string;
                 container: string;
                 contrastText: string;
             };
@@ -1300,6 +1307,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                blue: string;
                 container: string;
                 contrastText: string;
             };
@@ -1419,6 +1427,7 @@ declare const tokensByMode: {
             readonly '2xl': "1.5rem";
             readonly '3xl': "1.875rem";
             readonly '4xl': "2.25rem";
+            readonly decimalSup: "0.5em";
         };
         readonly lineHeights: {
             readonly tight: 1.2;
@@ -1880,6 +1889,7 @@ declare const tokens: {
             main: string;
             light: string;
             dark: string;
+            warm: string;
             container: string;
             contrastText: string;
         };
@@ -1896,6 +1906,7 @@ declare const tokens: {
             main: string;
             light: string;
             dark: string;
+            blue: string;
             container: string;
             contrastText: string;
         };
@@ -2017,6 +2028,7 @@ declare const tokens: {
         readonly '2xl': "1.5rem";
         readonly '3xl': "1.875rem";
         readonly '4xl': "2.25rem";
+        readonly decimalSup: "0.5em";
     };
     readonly lineHeights: {
         readonly tight: 1.2;
@@ -3346,6 +3358,105 @@ interface KdsMerchantTileProps extends Omit<React__default.HTMLAttributes<HTMLDi
  */
 declare const KdsMerchantTile: React__default.ForwardRefExoticComponent<KdsMerchantTileProps & React__default.RefAttributes<HTMLDivElement>>;
 
+type KdsPaymentTotalVariant = 'default' | 'email';
+/**
+ * Color tone for the amount value.
+ * - `brand`: default Khipu purple (current behaviour).
+ * - `info`: khipu-blue (#5A5FE0) — LigoPay QR / transfer flows.
+ */
+type KdsPaymentTotalTone = 'brand' | 'info';
+interface KdsPaymentTotalProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Variante visual.
+     * - `default`: monto destacado en color primario (QR / payment view).
+     * - `email`: monto compacto en color de texto primario (email templates).
+     * @default 'default'
+     */
+    variant?: KdsPaymentTotalVariant;
+    /**
+     * Tono de color del monto. Combinable con cualquier `variant`.
+     * - `brand` (default): purple Khipu / texto primario según variante.
+     * - `info`: khipu-blue (#5A5FE0) — pantallas QR/transfer de LigoPay.
+     * @default 'brand'
+     */
+    tone?: KdsPaymentTotalTone;
+    /**
+     * Si `true`, aplica el modificador `kds-payment-total--centered`: remueve el
+     * `padding-left` asimétrico (que existe por defecto para la vista QR de
+     * LigoPay) y centra todo el texto interno. Combinable con `variant` y `tone`.
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Monto a mostrar.
+     * - `number`: el componente formatea (entera + decimal) con `Intl.NumberFormat`.
+     * - `string`: ya formateado (e.g. `"1,500.50"` o `"1500.50"`). Si contiene `.`,
+     *   la parte tras el punto se renderiza como superíndice decimal.
+     */
+    amount: number | string;
+    /**
+     * Símbolo de moneda. Default `'S/'` (sol peruano) para mantener paridad con el origen
+     * en paylink-ligopay. Pásalo explícito para otras monedas (`'$'`, `'CLP$'`, etc.).
+     * @default 'S/'
+     */
+    currency?: string;
+    /**
+     * Cantidad de decimales. `0` o `null` ocultan el superíndice decimal.
+     * Aplica sólo cuando `amount` es `number` o cuando contiene un `.`.
+     * @default 2
+     */
+    decimals?: number | null;
+    /**
+     * Locale BCP-47 para `Intl.NumberFormat` (separadores miles/decimal).
+     * Aplica sólo cuando `amount` es `number`.
+     * @default 'es-PE'
+     */
+    locale?: string;
+    /**
+     * Etiqueta sobre el monto (e.g. `"Monto a pagar"`).
+     * @default 'Monto a pagar'
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Título principal (desktop). En la variante `default` aparece arriba; en `email`
+     * se omite. Pasa `null` para ocultarlo en `default` también.
+     * @default 'Escanea el QR'
+     */
+    title?: React__default.ReactNode;
+    /**
+     * Título alternativo para mobile en variante `default`. En desktop se oculta vía CSS.
+     * Pasa `null` para omitirlo.
+     * @default 'Descarga el QR'
+     */
+    titleMobile?: React__default.ReactNode;
+}
+/**
+ * KdsPaymentTotal — bloque de "monto a pagar" usado en pantallas de pago QR y emails de cobro.
+ *
+ * Portado desde el taglib `<kh:paymentTotal>` de paylink-ligopay
+ * (`KhipuTagLib.groovy:131-177` + `materialize-config.css → .payment-total`).
+ *
+ * **Variantes:**
+ * - `default`: amount grande (`3rem`) en color primario Khipu — vista QR de pago.
+ * - `email`: amount compacto (`1.5rem`) en color texto primario — plantillas email.
+ *
+ * **Layout responsive (default):**
+ * - Desktop: padding-left 80px, title visible (titleMobile oculto).
+ * - Mobile (≤ 1024px): centrado, sólo titleMobile visible.
+ * - La variante `email` mantiene alineación izquierda en todos los breakpoints.
+ *
+ * **Decimal handling:**
+ * - Si `amount` es `number`, se formatea con `Intl.NumberFormat(locale)`.
+ * - Si `amount` es `string` con `.`, la parte tras el punto va al `<sup>`.
+ * - `decimals={0}` o `null` desactivan el superíndice.
+ *
+ * @gsp Origen: paylink-ligopay/grails-app/taglib/com/khipu/payment/paylink/ligopay/KhipuTagLib.groovy
+ * @css .kds-payment-total, .kds-payment-total--email, .kds-payment-total-title,
+ *      .kds-payment-total-title-mobile, .kds-payment-label, .kds-payment-amount,
+ *      .kds-payment-total-decimal-sup
+ */
+declare const KdsPaymentTotal: React__default.ForwardRefExoticComponent<KdsPaymentTotalProps & React__default.RefAttributes<HTMLDivElement>>;
+
 interface KdsBillAttachmentProps extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
     /** Nombre del archivo a descargar. */
     filename: string;
@@ -3424,4 +3535,4 @@ declare function getContrastColor(hex: string): string;
  */
 declare function lighten(hex: string, amount: number): string;
 
-export { type Colors, KdsAccordion, KdsAccordionDetails, type KdsAccordionDetailsProps, type KdsAccordionProps, KdsAccordionSummary, type KdsAccordionSummaryProps, KdsAlert, type KdsAlertProps, type KdsAlertSeverity, KdsBankList, type KdsBankListProps, KdsBankModal, type KdsBankModalProps, KdsBankRow, type KdsBankRowProps, KdsBillAttachment, type KdsBillAttachmentProps, KdsBillAttachments, type KdsBillAttachmentsProps, KdsBottomSheet, type KdsBottomSheetProps, KdsButton, type KdsButtonProps, type KdsButtonSize, type KdsButtonVariant, KdsCard, KdsCardBody, KdsCardFooter, KdsCardHeader, KdsCardPlan, type KdsCardPlanProps, type KdsCardProps, type KdsCardSectionProps, KdsCardSelector, type KdsCardSelectorProps, type KdsCardVariant, KdsCheckbox, type KdsCheckboxProps, KdsChip, type KdsChipColor, type KdsChipProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsInvoiceSticky, type KdsInvoiceStickyProps, KdsLinearProgress, type KdsLinearProgressProps, KdsMerchantTile, type KdsMerchantTileProps, KdsMontoRow, type KdsMontoRowProps, KdsQrRow, type KdsQrRowProps, KdsRadioGroup, type KdsRadioGroupProps, type KdsRadioOption, type KdsRecapItem, KdsRecapList, type KdsRecapListProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSegmentedTabs, type KdsSegmentedTabsProps, KdsSelect, type KdsSelectOption, type KdsSelectProps, KdsSnackbar, type KdsSnackbarProps, type KdsSnackbarType, KdsSpinner, type KdsSpinnerProps, type KdsSpinnerSize, KdsStatusBlock, type KdsStatusBlockProps, type KdsStatusType, KdsStepper, type KdsStepperProps, KdsTab, KdsTabPanel, type KdsTabPanelProps, type KdsTabProps, KdsTabs, type KdsTabsProps, KdsTextField, type KdsTextFieldProps, KdsThemeProvider, type KdsThemeProviderProps, KdsTooltip, type KdsTooltipPlacement, type KdsTooltipProps, KdsTypography, type KdsTypographyProps, type KdsTypographyVariant, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useTabsKeyboard, zIndex };
+export { type Colors, KdsAccordion, KdsAccordionDetails, type KdsAccordionDetailsProps, type KdsAccordionProps, KdsAccordionSummary, type KdsAccordionSummaryProps, KdsAlert, type KdsAlertProps, type KdsAlertSeverity, KdsBankList, type KdsBankListProps, KdsBankModal, type KdsBankModalProps, KdsBankRow, type KdsBankRowProps, KdsBillAttachment, type KdsBillAttachmentProps, KdsBillAttachments, type KdsBillAttachmentsProps, KdsBottomSheet, type KdsBottomSheetProps, KdsButton, type KdsButtonProps, type KdsButtonSize, type KdsButtonVariant, KdsCard, KdsCardBody, KdsCardFooter, KdsCardHeader, KdsCardPlan, type KdsCardPlanProps, type KdsCardProps, type KdsCardSectionProps, KdsCardSelector, type KdsCardSelectorProps, type KdsCardVariant, KdsCheckbox, type KdsCheckboxProps, KdsChip, type KdsChipColor, type KdsChipProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsInvoiceSticky, type KdsInvoiceStickyProps, KdsLinearProgress, type KdsLinearProgressProps, KdsMerchantTile, type KdsMerchantTileProps, KdsMontoRow, type KdsMontoRowProps, KdsPaymentTotal, type KdsPaymentTotalProps, type KdsPaymentTotalVariant, KdsQrRow, type KdsQrRowProps, KdsRadioGroup, type KdsRadioGroupProps, type KdsRadioOption, type KdsRecapItem, KdsRecapList, type KdsRecapListProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSegmentedTabs, type KdsSegmentedTabsProps, KdsSelect, type KdsSelectOption, type KdsSelectProps, KdsSnackbar, type KdsSnackbarProps, type KdsSnackbarType, KdsSpinner, type KdsSpinnerProps, type KdsSpinnerSize, KdsStatusBlock, type KdsStatusBlockProps, type KdsStatusType, KdsStepper, type KdsStepperProps, KdsTab, KdsTabPanel, type KdsTabPanelProps, type KdsTabProps, KdsTabs, type KdsTabsProps, KdsTextField, type KdsTextFieldProps, KdsThemeProvider, type KdsThemeProviderProps, KdsTooltip, type KdsTooltipPlacement, type KdsTooltipProps, KdsTypography, type KdsTypographyProps, type KdsTypographyVariant, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useTabsKeyboard, zIndex };

package/dist/index.d.ts

@@ -238,6 +238,7 @@ declare const colors: {
         main: string;
         light: string;
         dark: string;
+        warm: string;
         container: string;
         contrastText: string;
     };
@@ -254,6 +255,7 @@ declare const colors: {
         main: string;
         light: string;
         dark: string;
+        blue: string;
         container: string;
         contrastText: string;
     };
@@ -375,6 +377,7 @@ declare const fontSizes: {
     readonly '2xl': "1.5rem";
     readonly '3xl': "1.875rem";
     readonly '4xl': "2.25rem";
+    readonly decimalSup: "0.5em";
 };
 declare const lineHeights: {
     readonly tight: 1.2;
@@ -693,6 +696,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                warm: string;
                 container: string;
                 contrastText: string;
             };
@@ -709,6 +713,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                blue: string;
                 container: string;
                 contrastText: string;
             };
@@ -830,6 +835,7 @@ declare const tokensByMode: {
             readonly '2xl': "1.5rem";
             readonly '3xl': "1.875rem";
             readonly '4xl': "2.25rem";
+            readonly decimalSup: "0.5em";
         };
         readonly lineHeights: {
             readonly tight: 1.2;
@@ -1284,6 +1290,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                warm: string;
                 container: string;
                 contrastText: string;
             };
@@ -1300,6 +1307,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                blue: string;
                 container: string;
                 contrastText: string;
             };
@@ -1419,6 +1427,7 @@ declare const tokensByMode: {
             readonly '2xl': "1.5rem";
             readonly '3xl': "1.875rem";
             readonly '4xl': "2.25rem";
+            readonly decimalSup: "0.5em";
         };
         readonly lineHeights: {
             readonly tight: 1.2;
@@ -1880,6 +1889,7 @@ declare const tokens: {
             main: string;
             light: string;
             dark: string;
+            warm: string;
             container: string;
             contrastText: string;
         };
@@ -1896,6 +1906,7 @@ declare const tokens: {
             main: string;
             light: string;
             dark: string;
+            blue: string;
             container: string;
             contrastText: string;
         };
@@ -2017,6 +2028,7 @@ declare const tokens: {
         readonly '2xl': "1.5rem";
         readonly '3xl': "1.875rem";
         readonly '4xl': "2.25rem";
+        readonly decimalSup: "0.5em";
     };
     readonly lineHeights: {
         readonly tight: 1.2;
@@ -3346,6 +3358,105 @@ interface KdsMerchantTileProps extends Omit<React__default.HTMLAttributes<HTMLDi
  */
 declare const KdsMerchantTile: React__default.ForwardRefExoticComponent<KdsMerchantTileProps & React__default.RefAttributes<HTMLDivElement>>;
 
+type KdsPaymentTotalVariant = 'default' | 'email';
+/**
+ * Color tone for the amount value.
+ * - `brand`: default Khipu purple (current behaviour).
+ * - `info`: khipu-blue (#5A5FE0) — LigoPay QR / transfer flows.
+ */
+type KdsPaymentTotalTone = 'brand' | 'info';
+interface KdsPaymentTotalProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Variante visual.
+     * - `default`: monto destacado en color primario (QR / payment view).
+     * - `email`: monto compacto en color de texto primario (email templates).
+     * @default 'default'
+     */
+    variant?: KdsPaymentTotalVariant;
+    /**
+     * Tono de color del monto. Combinable con cualquier `variant`.
+     * - `brand` (default): purple Khipu / texto primario según variante.
+     * - `info`: khipu-blue (#5A5FE0) — pantallas QR/transfer de LigoPay.
+     * @default 'brand'
+     */
+    tone?: KdsPaymentTotalTone;
+    /**
+     * Si `true`, aplica el modificador `kds-payment-total--centered`: remueve el
+     * `padding-left` asimétrico (que existe por defecto para la vista QR de
+     * LigoPay) y centra todo el texto interno. Combinable con `variant` y `tone`.
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Monto a mostrar.
+     * - `number`: el componente formatea (entera + decimal) con `Intl.NumberFormat`.
+     * - `string`: ya formateado (e.g. `"1,500.50"` o `"1500.50"`). Si contiene `.`,
+     *   la parte tras el punto se renderiza como superíndice decimal.
+     */
+    amount: number | string;
+    /**
+     * Símbolo de moneda. Default `'S/'` (sol peruano) para mantener paridad con el origen
+     * en paylink-ligopay. Pásalo explícito para otras monedas (`'$'`, `'CLP$'`, etc.).
+     * @default 'S/'
+     */
+    currency?: string;
+    /**
+     * Cantidad de decimales. `0` o `null` ocultan el superíndice decimal.
+     * Aplica sólo cuando `amount` es `number` o cuando contiene un `.`.
+     * @default 2
+     */
+    decimals?: number | null;
+    /**
+     * Locale BCP-47 para `Intl.NumberFormat` (separadores miles/decimal).
+     * Aplica sólo cuando `amount` es `number`.
+     * @default 'es-PE'
+     */
+    locale?: string;
+    /**
+     * Etiqueta sobre el monto (e.g. `"Monto a pagar"`).
+     * @default 'Monto a pagar'
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Título principal (desktop). En la variante `default` aparece arriba; en `email`
+     * se omite. Pasa `null` para ocultarlo en `default` también.
+     * @default 'Escanea el QR'
+     */
+    title?: React__default.ReactNode;
+    /**
+     * Título alternativo para mobile en variante `default`. En desktop se oculta vía CSS.
+     * Pasa `null` para omitirlo.
+     * @default 'Descarga el QR'
+     */
+    titleMobile?: React__default.ReactNode;
+}
+/**
+ * KdsPaymentTotal — bloque de "monto a pagar" usado en pantallas de pago QR y emails de cobro.
+ *
+ * Portado desde el taglib `<kh:paymentTotal>` de paylink-ligopay
+ * (`KhipuTagLib.groovy:131-177` + `materialize-config.css → .payment-total`).
+ *
+ * **Variantes:**
+ * - `default`: amount grande (`3rem`) en color primario Khipu — vista QR de pago.
+ * - `email`: amount compacto (`1.5rem`) en color texto primario — plantillas email.
+ *
+ * **Layout responsive (default):**
+ * - Desktop: padding-left 80px, title visible (titleMobile oculto).
+ * - Mobile (≤ 1024px): centrado, sólo titleMobile visible.
+ * - La variante `email` mantiene alineación izquierda en todos los breakpoints.
+ *
+ * **Decimal handling:**
+ * - Si `amount` es `number`, se formatea con `Intl.NumberFormat(locale)`.
+ * - Si `amount` es `string` con `.`, la parte tras el punto va al `<sup>`.
+ * - `decimals={0}` o `null` desactivan el superíndice.
+ *
+ * @gsp Origen: paylink-ligopay/grails-app/taglib/com/khipu/payment/paylink/ligopay/KhipuTagLib.groovy
+ * @css .kds-payment-total, .kds-payment-total--email, .kds-payment-total-title,
+ *      .kds-payment-total-title-mobile, .kds-payment-label, .kds-payment-amount,
+ *      .kds-payment-total-decimal-sup
+ */
+declare const KdsPaymentTotal: React__default.ForwardRefExoticComponent<KdsPaymentTotalProps & React__default.RefAttributes<HTMLDivElement>>;
+
 interface KdsBillAttachmentProps extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
     /** Nombre del archivo a descargar. */
     filename: string;
@@ -3424,4 +3535,4 @@ declare function getContrastColor(hex: string): string;
  */
 declare function lighten(hex: string, amount: number): string;
 
-export { type Colors, KdsAccordion, KdsAccordionDetails, type KdsAccordionDetailsProps, type KdsAccordionProps, KdsAccordionSummary, type KdsAccordionSummaryProps, KdsAlert, type KdsAlertProps, type KdsAlertSeverity, KdsBankList, type KdsBankListProps, KdsBankModal, type KdsBankModalProps, KdsBankRow, type KdsBankRowProps, KdsBillAttachment, type KdsBillAttachmentProps, KdsBillAttachments, type KdsBillAttachmentsProps, KdsBottomSheet, type KdsBottomSheetProps, KdsButton, type KdsButtonProps, type KdsButtonSize, type KdsButtonVariant, KdsCard, KdsCardBody, KdsCardFooter, KdsCardHeader, KdsCardPlan, type KdsCardPlanProps, type KdsCardProps, type KdsCardSectionProps, KdsCardSelector, type KdsCardSelectorProps, type KdsCardVariant, KdsCheckbox, type KdsCheckboxProps, KdsChip, type KdsChipColor, type KdsChipProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsInvoiceSticky, type KdsInvoiceStickyProps, KdsLinearProgress, type KdsLinearProgressProps, KdsMerchantTile, type KdsMerchantTileProps, KdsMontoRow, type KdsMontoRowProps, KdsQrRow, type KdsQrRowProps, KdsRadioGroup, type KdsRadioGroupProps, type KdsRadioOption, type KdsRecapItem, KdsRecapList, type KdsRecapListProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSegmentedTabs, type KdsSegmentedTabsProps, KdsSelect, type KdsSelectOption, type KdsSelectProps, KdsSnackbar, type KdsSnackbarProps, type KdsSnackbarType, KdsSpinner, type KdsSpinnerProps, type KdsSpinnerSize, KdsStatusBlock, type KdsStatusBlockProps, type KdsStatusType, KdsStepper, type KdsStepperProps, KdsTab, KdsTabPanel, type KdsTabPanelProps, type KdsTabProps, KdsTabs, type KdsTabsProps, KdsTextField, type KdsTextFieldProps, KdsThemeProvider, type KdsThemeProviderProps, KdsTooltip, type KdsTooltipPlacement, type KdsTooltipProps, KdsTypography, type KdsTypographyProps, type KdsTypographyVariant, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useTabsKeyboard, zIndex };
+export { type Colors, KdsAccordion, KdsAccordionDetails, type KdsAccordionDetailsProps, type KdsAccordionProps, KdsAccordionSummary, type KdsAccordionSummaryProps, KdsAlert, type KdsAlertProps, type KdsAlertSeverity, KdsBankList, type KdsBankListProps, KdsBankModal, type KdsBankModalProps, KdsBankRow, type KdsBankRowProps, KdsBillAttachment, type KdsBillAttachmentProps, KdsBillAttachments, type KdsBillAttachmentsProps, KdsBottomSheet, type KdsBottomSheetProps, KdsButton, type KdsButtonProps, type KdsButtonSize, type KdsButtonVariant, KdsCard, KdsCardBody, KdsCardFooter, KdsCardHeader, KdsCardPlan, type KdsCardPlanProps, type KdsCardProps, type KdsCardSectionProps, KdsCardSelector, type KdsCardSelectorProps, type KdsCardVariant, KdsCheckbox, type KdsCheckboxProps, KdsChip, type KdsChipColor, type KdsChipProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsInvoiceSticky, type KdsInvoiceStickyProps, KdsLinearProgress, type KdsLinearProgressProps, KdsMerchantTile, type KdsMerchantTileProps, KdsMontoRow, type KdsMontoRowProps, KdsPaymentTotal, type KdsPaymentTotalProps, type KdsPaymentTotalVariant, KdsQrRow, type KdsQrRowProps, KdsRadioGroup, type KdsRadioGroupProps, type KdsRadioOption, type KdsRecapItem, KdsRecapList, type KdsRecapListProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSegmentedTabs, type KdsSegmentedTabsProps, KdsSelect, type KdsSelectOption, type KdsSelectProps, KdsSnackbar, type KdsSnackbarProps, type KdsSnackbarType, KdsSpinner, type KdsSpinnerProps, type KdsSpinnerSize, KdsStatusBlock, type KdsStatusBlockProps, type KdsStatusType, KdsStepper, type KdsStepperProps, KdsTab, KdsTabPanel, type KdsTabPanelProps, type KdsTabProps, KdsTabs, type KdsTabsProps, KdsTextField, type KdsTextFieldProps, KdsThemeProvider, type KdsThemeProviderProps, KdsTooltip, type KdsTooltipPlacement, type KdsTooltipProps, KdsTypography, type KdsTypographyProps, type KdsTypographyVariant, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useTabsKeyboard, zIndex };

package/dist/index.js

@@ -58,6 +58,7 @@ __export(index_exports, {
   KdsLinearProgress: () => KdsLinearProgress,
   KdsMerchantTile: () => KdsMerchantTile,
   KdsMontoRow: () => KdsMontoRow,
+  KdsPaymentTotal: () => KdsPaymentTotal,
   KdsQrRow: () => KdsQrRow,
   KdsRadioGroup: () => KdsRadioGroup,
   KdsRecapList: () => KdsRecapList,
@@ -452,6 +453,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"
@@ -470,6 +473,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"
@@ -512,8 +517,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,
@@ -2286,11 +2293,87 @@ var KdsMerchantTile = (0, import_react39.forwardRef)(
 );
 KdsMerchantTile.displayName = "KdsMerchantTile";
 
-// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
+// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
 var import_react40 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var KdsBillAttachment = (0, import_react40.forwardRef)(
-  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+var KdsPaymentTotal = (0, import_react40.forwardRef)(
+  ({
+    variant = "default",
+    tone = "brand",
+    centered = false,
+    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__ */ (0, import_jsx_runtime38.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)(
+          "kds-payment-total",
+          isEmail && "kds-payment-total--email",
+          isInfoTone && "kds-payment-total--tone-info",
+          centered && "kds-payment-total--centered",
+          className
+        ),
+        ...props,
+        children: [
+          !isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h5", { className: "kds-payment-total-title", children: title }),
+          !isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
+          label != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h6", { className: "kds-payment-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("h5", { className: "kds-payment-amount", children: [
+            currency,
+            " ",
+            integer,
+            fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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
+var import_react41 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var KdsBillAttachment = (0, import_react41.forwardRef)(
+  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "a",
     {
       ref,
@@ -2300,15 +2383,15 @@ var KdsBillAttachment = (0, import_react40.forwardRef)(
       className: (0, import_clsx.clsx)("kds-bill-attachment", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", { className: "material-symbols-outlined", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: filename })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { className: "material-symbols-outlined", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: filename })
       ]
     }
   )
 );
 KdsBillAttachment.displayName = "KdsBillAttachment";
-var KdsBillAttachments = (0, import_react40.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
+var KdsBillAttachments = (0, import_react41.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
 );
 KdsBillAttachments.displayName = "KdsBillAttachments";
 // Annotate the CommonJS export names for ESM import in node:
@@ -2341,6 +2424,7 @@ KdsBillAttachments.displayName = "KdsBillAttachments";
   KdsLinearProgress,
   KdsMerchantTile,
   KdsMontoRow,
+  KdsPaymentTotal,
   KdsQrRow,
   KdsRadioGroup,
   KdsRecapList,