@khipu/design-system 0.2.0-alpha.79 → 0.2.0-alpha.80

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-06-26T14:17:39.448Z
+ * Generated: 2026-06-30T16:01:25.716Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate

package/dist/beercss/khipu-beercss.scoped.css

@@ -13,7 +13,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-06-26T14:17:39.448Z
+ * Generated: 2026-06-30T16:01:25.716Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate

package/dist/beercss/metadata.json

@@ -1,8 +1,8 @@
 {
   "name": "@khipu/design-system/beercss",
-  "version": "0.2.0-alpha.79",
+  "version": "0.2.0-alpha.80",
   "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
-  "buildDate": "2026-06-26T14:17:41.298Z",
+  "buildDate": "2026-06-30T16:01:28.190Z",
   "includes": {
     "beercss": "4.0.1",
     "khipu-tokens": "latest",
@@ -19,8 +19,8 @@
   },
   "scopeClass": ".kds-theme-root",
   "cdn": {
-    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.79/dist/beercss/khipu-beercss.min.css",
-    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.79/dist/beercss/khipu-beercss.scoped.min.css",
-    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.79/dist/beercss/khipu-beercss.min.js"
+    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.80/dist/beercss/khipu-beercss.min.css",
+    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.80/dist/beercss/khipu-beercss.scoped.min.css",
+    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.80/dist/beercss/khipu-beercss.min.js"
   }
 }

package/dist/index.d.mts

@@ -3362,9 +3362,9 @@ interface KdsCardPlanProps extends React__default.HTMLAttributes<HTMLDivElement>
 }
 declare const KdsCardPlan: React__default.ForwardRefExoticComponent<KdsCardPlanProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLDivElement> {
+interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLElement> {
 }
-declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvoiceStickyProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvoiceStickyProps & React__default.RefAttributes<HTMLElement>>;
 
 /**
  * Khipu Design System - BottomSheet Component
@@ -3508,6 +3508,26 @@ interface KdsMerchantTileProps extends Omit<React__default.HTMLAttributes<HTMLDi
  */
 declare const KdsMerchantTile: React__default.ForwardRefExoticComponent<KdsMerchantTileProps & React__default.RefAttributes<HTMLDivElement>>;
 
+interface KdsInvoiceMerchantProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Logo URL del comercio. Si falla la carga (o no se provee), cae al ícono `storefront`. */
+    logoUrl?: string;
+    /** Color de marca de fondo (ej. del cobro). Si se omite, usa el fondo púrpura del DS. */
+    brandColor?: string;
+}
+/**
+ * KdsInvoiceMerchant — avatar cuadrado del comercio dentro del `kds-invoice-header`.
+ *
+ * Renderiza el markup canónico `.kds-invoice-merchant` (decorativo: `aria-hidden`), con el
+ * logo del comercio y fallback al ícono `storefront` si la imagen no carga. El fondo toma el
+ * color de marca del cobro cuando se provee. Dentro de `.kds-invoice-sticky` el tamaño colapsa
+ * con el scroll vía el CSS del DS (`--collapse-progress`).
+ *
+ * Reemplaza la imagen + `onerror` inline del header server-side por manejo de error en React.
+ *
+ * @css .kds-invoice-merchant, .kds-invoice-merchant img, .kds-invoice-merchant i
+ */
+declare const KdsInvoiceMerchant: React__default.ForwardRefExoticComponent<KdsInvoiceMerchantProps & React__default.RefAttributes<HTMLDivElement>>;
+
 type KdsPaymentTotalVariant = 'default' | 'email';
 /**
  * Color tone for the amount value.
@@ -3708,6 +3728,71 @@ interface UseStickyInvoiceCollapseOptions {
  */
 declare function useStickyInvoiceCollapse(options?: UseStickyInvoiceCollapseOptions): void;
 
+/**
+ * Options for {@link useExpandToggle}.
+ */
+interface UseExpandToggleOptions {
+    /** Initial open state when uncontrolled. Default `false`. */
+    defaultOpen?: boolean;
+    /** Controlled open state. When provided, the hook is controlled and `onOpenChange` must drive updates. */
+    open?: boolean;
+    /** Called whenever the open state should change (toggle click). */
+    onOpenChange?: (open: boolean) => void;
+    /** Override the generated panel id (`aria-controls` / panel `id`). Defaults to a stable `useId()`. */
+    id?: string;
+}
+/** Props to spread on the `.kds-expand-toggle` `<button>`. */
+interface ExpandToggleProps {
+    type: 'button';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** Props to spread on the `.kds-expand-panel` `<div>`. */
+interface ExpandPanelProps {
+    id: string;
+    className: string;
+    hidden: boolean;
+}
+/**
+ * Result of {@link useExpandToggle}.
+ */
+interface UseExpandToggleResult {
+    /** Current open state. */
+    open: boolean;
+    /** Imperatively set the open state (e.g. close on header collapse). */
+    setOpen: (open: boolean) => void;
+    /** Toggle the open state. */
+    toggle: () => void;
+    /** Prop-getter for the `.kds-expand-toggle` button — wires `aria-expanded`, `aria-controls`, `onClick`. */
+    getToggleProps: () => ExpandToggleProps;
+    /**
+     * Prop-getter for the `.kds-expand-panel` div — wires `id`, the `open` class and the
+     * `hidden` attribute. Pass the base class (defaults to `kds-expand-panel`).
+     */
+    getPanelProps: (baseClassName?: string) => ExpandPanelProps;
+}
+/**
+ * Accessible disclosure (expand/collapse) wiring for the DS `.kds-expand-toggle` +
+ * `.kds-expand-panel` pattern — the React equivalent of the vanilla `initExpandToggle`
+ * (`khipu-init.js`) for consumers that don't load the global DS JS.
+ *
+ * It links button and panel via a stable `aria-controls`/`id` pair (`useId`), reflects the
+ * open state through `aria-expanded` (which drives the caret rotation in CSS) and toggles the
+ * `open` class on the panel (whose `max-height` animation the DS CSS owns). The `hidden`
+ * attribute is also set when closed — the DS provides a `.kds-expand-panel[hidden]` rule that
+ * keeps the panel `display:block` so the collapse still animates.
+ *
+ * Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage. Combine
+ * with `useStickyInvoiceCollapse({ onCollapseStart: () => setOpen(false) })` to close on scroll.
+ *
+ * @example
+ * const detail = useExpandToggle();
+ * <button className="kds-expand-toggle" {...detail.getToggleProps()}>…</button>
+ * <div {...detail.getPanelProps('kds-expand-panel')}>…</div>
+ */
+declare function useExpandToggle(options?: UseExpandToggleOptions): UseExpandToggleResult;
+
 /**
  * Khipu Design System - Core Utilities
  *
@@ -3726,4 +3811,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, KdsCopyButton, type KdsCopyButtonProps, 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, KdsSearchField, type KdsSearchFieldProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSecureLoader, type KdsSecureLoaderProps, 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, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };
+export { type Colors, type ExpandPanelProps, type ExpandToggleProps, 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, KdsCopyButton, type KdsCopyButtonProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsInvoiceMerchant, type KdsInvoiceMerchantProps, 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, KdsSearchField, type KdsSearchFieldProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSecureLoader, type KdsSecureLoaderProps, 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, type UseExpandToggleOptions, type UseExpandToggleResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };

package/dist/index.d.ts

@@ -3362,9 +3362,9 @@ interface KdsCardPlanProps extends React__default.HTMLAttributes<HTMLDivElement>
 }
 declare const KdsCardPlan: React__default.ForwardRefExoticComponent<KdsCardPlanProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLDivElement> {
+interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLElement> {
 }
-declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvoiceStickyProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvoiceStickyProps & React__default.RefAttributes<HTMLElement>>;
 
 /**
  * Khipu Design System - BottomSheet Component
@@ -3508,6 +3508,26 @@ interface KdsMerchantTileProps extends Omit<React__default.HTMLAttributes<HTMLDi
  */
 declare const KdsMerchantTile: React__default.ForwardRefExoticComponent<KdsMerchantTileProps & React__default.RefAttributes<HTMLDivElement>>;
 
+interface KdsInvoiceMerchantProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Logo URL del comercio. Si falla la carga (o no se provee), cae al ícono `storefront`. */
+    logoUrl?: string;
+    /** Color de marca de fondo (ej. del cobro). Si se omite, usa el fondo púrpura del DS. */
+    brandColor?: string;
+}
+/**
+ * KdsInvoiceMerchant — avatar cuadrado del comercio dentro del `kds-invoice-header`.
+ *
+ * Renderiza el markup canónico `.kds-invoice-merchant` (decorativo: `aria-hidden`), con el
+ * logo del comercio y fallback al ícono `storefront` si la imagen no carga. El fondo toma el
+ * color de marca del cobro cuando se provee. Dentro de `.kds-invoice-sticky` el tamaño colapsa
+ * con el scroll vía el CSS del DS (`--collapse-progress`).
+ *
+ * Reemplaza la imagen + `onerror` inline del header server-side por manejo de error en React.
+ *
+ * @css .kds-invoice-merchant, .kds-invoice-merchant img, .kds-invoice-merchant i
+ */
+declare const KdsInvoiceMerchant: React__default.ForwardRefExoticComponent<KdsInvoiceMerchantProps & React__default.RefAttributes<HTMLDivElement>>;
+
 type KdsPaymentTotalVariant = 'default' | 'email';
 /**
  * Color tone for the amount value.
@@ -3708,6 +3728,71 @@ interface UseStickyInvoiceCollapseOptions {
  */
 declare function useStickyInvoiceCollapse(options?: UseStickyInvoiceCollapseOptions): void;
 
+/**
+ * Options for {@link useExpandToggle}.
+ */
+interface UseExpandToggleOptions {
+    /** Initial open state when uncontrolled. Default `false`. */
+    defaultOpen?: boolean;
+    /** Controlled open state. When provided, the hook is controlled and `onOpenChange` must drive updates. */
+    open?: boolean;
+    /** Called whenever the open state should change (toggle click). */
+    onOpenChange?: (open: boolean) => void;
+    /** Override the generated panel id (`aria-controls` / panel `id`). Defaults to a stable `useId()`. */
+    id?: string;
+}
+/** Props to spread on the `.kds-expand-toggle` `<button>`. */
+interface ExpandToggleProps {
+    type: 'button';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** Props to spread on the `.kds-expand-panel` `<div>`. */
+interface ExpandPanelProps {
+    id: string;
+    className: string;
+    hidden: boolean;
+}
+/**
+ * Result of {@link useExpandToggle}.
+ */
+interface UseExpandToggleResult {
+    /** Current open state. */
+    open: boolean;
+    /** Imperatively set the open state (e.g. close on header collapse). */
+    setOpen: (open: boolean) => void;
+    /** Toggle the open state. */
+    toggle: () => void;
+    /** Prop-getter for the `.kds-expand-toggle` button — wires `aria-expanded`, `aria-controls`, `onClick`. */
+    getToggleProps: () => ExpandToggleProps;
+    /**
+     * Prop-getter for the `.kds-expand-panel` div — wires `id`, the `open` class and the
+     * `hidden` attribute. Pass the base class (defaults to `kds-expand-panel`).
+     */
+    getPanelProps: (baseClassName?: string) => ExpandPanelProps;
+}
+/**
+ * Accessible disclosure (expand/collapse) wiring for the DS `.kds-expand-toggle` +
+ * `.kds-expand-panel` pattern — the React equivalent of the vanilla `initExpandToggle`
+ * (`khipu-init.js`) for consumers that don't load the global DS JS.
+ *
+ * It links button and panel via a stable `aria-controls`/`id` pair (`useId`), reflects the
+ * open state through `aria-expanded` (which drives the caret rotation in CSS) and toggles the
+ * `open` class on the panel (whose `max-height` animation the DS CSS owns). The `hidden`
+ * attribute is also set when closed — the DS provides a `.kds-expand-panel[hidden]` rule that
+ * keeps the panel `display:block` so the collapse still animates.
+ *
+ * Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage. Combine
+ * with `useStickyInvoiceCollapse({ onCollapseStart: () => setOpen(false) })` to close on scroll.
+ *
+ * @example
+ * const detail = useExpandToggle();
+ * <button className="kds-expand-toggle" {...detail.getToggleProps()}>…</button>
+ * <div {...detail.getPanelProps('kds-expand-panel')}>…</div>
+ */
+declare function useExpandToggle(options?: UseExpandToggleOptions): UseExpandToggleResult;
+
 /**
  * Khipu Design System - Core Utilities
  *
@@ -3726,4 +3811,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, KdsCopyButton, type KdsCopyButtonProps, 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, KdsSearchField, type KdsSearchFieldProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSecureLoader, type KdsSecureLoaderProps, 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, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };
+export { type Colors, type ExpandPanelProps, type ExpandToggleProps, 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, KdsCopyButton, type KdsCopyButtonProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsInvoiceMerchant, type KdsInvoiceMerchantProps, 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, KdsSearchField, type KdsSearchFieldProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSecureLoader, type KdsSecureLoaderProps, 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, type UseExpandToggleOptions, type UseExpandToggleResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };

package/dist/index.js

@@ -55,6 +55,7 @@ __export(index_exports, {
   KdsCountdown: () => KdsCountdown,
   KdsDivider: () => KdsDivider,
   KdsExpandPanel: () => KdsExpandPanel,
+  KdsInvoiceMerchant: () => KdsInvoiceMerchant,
   KdsInvoiceSticky: () => KdsInvoiceSticky,
   KdsLinearProgress: () => KdsLinearProgress,
   KdsMerchantTile: () => KdsMerchantTile,
@@ -102,6 +103,7 @@ __export(index_exports, {
   useAutoHide: () => useAutoHide,
   useCopyToClipboard: () => useCopyToClipboard,
   useCountdown: () => useCountdown,
+  useExpandToggle: () => useExpandToggle,
   useStickyInvoiceCollapse: () => useStickyInvoiceCollapse,
   useTabsKeyboard: () => useTabsKeyboard,
   zIndex: () => zIndex
@@ -2373,7 +2375,15 @@ KdsCardPlan.displayName = "KdsCardPlan";
 var import_react37 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var KdsInvoiceSticky = (0, import_react37.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "article",
+    {
+      ref,
+      className: (0, import_clsx.clsx)("kds-card-elevated", "kds-invoice-sticky", className),
+      ...props,
+      children
+    }
+  )
 );
 KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
 
@@ -2527,10 +2537,32 @@ var KdsMerchantTile = (0, import_react43.forwardRef)(
 );
 KdsMerchantTile.displayName = "KdsMerchantTile";
 
-// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
+// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
 var import_react44 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var KdsPaymentTotal = (0, import_react44.forwardRef)(
+var KdsInvoiceMerchant = (0, import_react44.forwardRef)(
+  ({ logoUrl, brandColor, className, style, ...props }, ref) => {
+    const [failed, setFailed] = (0, import_react44.useState)(false);
+    const showLogo = !!logoUrl && !failed;
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("kds-invoice-merchant", className),
+        "aria-hidden": "true",
+        style: brandColor ? { background: brandColor, ...style } : style,
+        ...props,
+        children: showLogo ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "material-symbols-outlined", children: "storefront" })
+      }
+    );
+  }
+);
+KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
+
+// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
+var import_react45 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var KdsPaymentTotal = (0, import_react45.forwardRef)(
   ({
     variant = "default",
     tone = "brand",
@@ -2548,7 +2580,7 @@ var KdsPaymentTotal = (0, import_react44.forwardRef)(
     const { integer, fraction } = formatAmount(amount, decimals, locale);
     const isEmail = variant === "email";
     const isInfoTone = tone === "info";
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "div",
       {
         ref,
@@ -2561,14 +2593,14 @@ var KdsPaymentTotal = (0, import_react44.forwardRef)(
         ),
         ...props,
         children: [
-          !isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h5", { className: "kds-payment-total-title", children: title }),
-          !isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
-          label != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h6", { className: "kds-payment-label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("h5", { className: "kds-payment-amount", children: [
+          !isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "kds-payment-total-title", children: title }),
+          !isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
+          label != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "kds-payment-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("h5", { className: "kds-payment-amount", children: [
             currency,
             " ",
             integer,
-            fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
+            fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
           ] })
         ]
       }
@@ -2604,10 +2636,10 @@ function formatAmount(amount, decimals, locale) {
 }
 
 // src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
-var import_react45 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var KdsBillAttachment = (0, import_react45.forwardRef)(
-  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+var import_react46 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var KdsBillAttachment = (0, import_react46.forwardRef)(
+  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "a",
     {
       ref,
@@ -2617,25 +2649,25 @@ var KdsBillAttachment = (0, import_react45.forwardRef)(
       className: (0, import_clsx.clsx)("kds-bill-attachment", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "material-symbols-outlined", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: filename })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "material-symbols-outlined", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: filename })
       ]
     }
   )
 );
 KdsBillAttachment.displayName = "KdsBillAttachment";
-var KdsBillAttachments = (0, import_react45.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
+var KdsBillAttachments = (0, import_react46.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
 );
 KdsBillAttachments.displayName = "KdsBillAttachments";
 
 // src/components/core/hooks/useStickyInvoiceCollapse.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 function useStickyInvoiceCollapse(options = {}) {
   const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
-  const onCollapseStartRef = (0, import_react46.useRef)(onCollapseStart);
+  const onCollapseStartRef = (0, import_react47.useRef)(onCollapseStart);
   onCollapseStartRef.current = onCollapseStart;
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     let viewportOffset = 0;
     let ticking = false;
     let wasCollapsing = false;
@@ -2705,6 +2737,45 @@ function useStickyInvoiceCollapse(options = {}) {
     };
   }, [collapseEnd, mobileBreakpoint]);
 }
+
+// src/components/core/hooks/useExpandToggle.ts
+var import_react48 = require("react");
+function useExpandToggle(options = {}) {
+  const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
+  const generatedId = (0, import_react48.useId)();
+  const panelId = id ?? `kds-expand-${generatedId}`;
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react48.useState)(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = (0, import_react48.useCallback)(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = (0, import_react48.useCallback)(() => setOpen(!open), [open, setOpen]);
+  const getToggleProps = (0, import_react48.useCallback)(
+    () => ({
+      type: "button",
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      onClick: () => toggle()
+    }),
+    [open, panelId, toggle]
+  );
+  const getPanelProps = (0, import_react48.useCallback)(
+    (baseClassName = "kds-expand-panel") => ({
+      id: panelId,
+      className: open ? `${baseClassName} open` : baseClassName,
+      hidden: !open
+    }),
+    [open, panelId]
+  );
+  return { open, setOpen, toggle, getToggleProps, getPanelProps };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   KdsAccordion,
@@ -2732,6 +2803,7 @@ function useStickyInvoiceCollapse(options = {}) {
   KdsCountdown,
   KdsDivider,
   KdsExpandPanel,
+  KdsInvoiceMerchant,
   KdsInvoiceSticky,
   KdsLinearProgress,
   KdsMerchantTile,
@@ -2779,6 +2851,7 @@ function useStickyInvoiceCollapse(options = {}) {
   useAutoHide,
   useCopyToClipboard,
   useCountdown,
+  useExpandToggle,
   useStickyInvoiceCollapse,
   useTabsKeyboard,
   zIndex

package/dist/index.mjs

@@ -2263,7 +2263,15 @@ KdsCardPlan.displayName = "KdsCardPlan";
 import { forwardRef as forwardRef33 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var KdsInvoiceSticky = forwardRef33(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx35("div", { ref, className: clsx("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx35(
+    "article",
+    {
+      ref,
+      className: clsx("kds-card-elevated", "kds-invoice-sticky", className),
+      ...props,
+      children
+    }
+  )
 );
 KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
 
@@ -2417,10 +2425,32 @@ var KdsMerchantTile = forwardRef39(
 );
 KdsMerchantTile.displayName = "KdsMerchantTile";
 
+// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
+import { forwardRef as forwardRef40, useState as useState8 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var KdsInvoiceMerchant = forwardRef40(
+  ({ logoUrl, brandColor, className, style, ...props }, ref) => {
+    const [failed, setFailed] = useState8(false);
+    const showLogo = !!logoUrl && !failed;
+    return /* @__PURE__ */ jsx42(
+      "div",
+      {
+        ref,
+        className: clsx("kds-invoice-merchant", className),
+        "aria-hidden": "true",
+        style: brandColor ? { background: brandColor, ...style } : style,
+        ...props,
+        children: showLogo ? /* @__PURE__ */ jsx42("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx42("i", { className: "material-symbols-outlined", children: "storefront" })
+      }
+    );
+  }
+);
+KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
+
 // src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
-import { forwardRef as forwardRef40 } from "react";
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
-var KdsPaymentTotal = forwardRef40(
+import { forwardRef as forwardRef41 } from "react";
+import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
+var KdsPaymentTotal = forwardRef41(
   ({
     variant = "default",
     tone = "brand",
@@ -2451,14 +2481,14 @@ var KdsPaymentTotal = forwardRef40(
         ),
         ...props,
         children: [
-          !isEmail && title != null && /* @__PURE__ */ jsx42("h5", { className: "kds-payment-total-title", children: title }),
-          !isEmail && titleMobile != null && /* @__PURE__ */ jsx42("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
-          label != null && /* @__PURE__ */ jsx42("h6", { className: "kds-payment-label", children: label }),
+          !isEmail && title != null && /* @__PURE__ */ jsx43("h5", { className: "kds-payment-total-title", children: title }),
+          !isEmail && titleMobile != null && /* @__PURE__ */ jsx43("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
+          label != null && /* @__PURE__ */ jsx43("h6", { className: "kds-payment-label", children: label }),
           /* @__PURE__ */ jsxs32("h5", { className: "kds-payment-amount", children: [
             currency,
             " ",
             integer,
-            fraction !== null && /* @__PURE__ */ jsx42("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
+            fraction !== null && /* @__PURE__ */ jsx43("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
           ] })
         ]
       }
@@ -2494,9 +2524,9 @@ function formatAmount(amount, decimals, locale) {
 }
 
 // src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
-import { forwardRef as forwardRef41 } from "react";
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
-var KdsBillAttachment = forwardRef41(
+import { forwardRef as forwardRef42 } from "react";
+import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+var KdsBillAttachment = forwardRef42(
   ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ jsxs33(
     "a",
     {
@@ -2507,15 +2537,15 @@ var KdsBillAttachment = forwardRef41(
       className: clsx("kds-bill-attachment", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx43("i", { className: "material-symbols-outlined", children: icon }),
-        /* @__PURE__ */ jsx43("span", { children: filename })
+        /* @__PURE__ */ jsx44("i", { className: "material-symbols-outlined", children: icon }),
+        /* @__PURE__ */ jsx44("span", { children: filename })
       ]
     }
   )
 );
 KdsBillAttachment.displayName = "KdsBillAttachment";
-var KdsBillAttachments = forwardRef41(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx43("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
+var KdsBillAttachments = forwardRef42(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
 );
 KdsBillAttachments.displayName = "KdsBillAttachments";
 
@@ -2595,6 +2625,45 @@ function useStickyInvoiceCollapse(options = {}) {
     };
   }, [collapseEnd, mobileBreakpoint]);
 }
+
+// src/components/core/hooks/useExpandToggle.ts
+import { useCallback as useCallback4, useId, useState as useState9 } from "react";
+function useExpandToggle(options = {}) {
+  const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
+  const generatedId = useId();
+  const panelId = id ?? `kds-expand-${generatedId}`;
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState9(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback4(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = useCallback4(() => setOpen(!open), [open, setOpen]);
+  const getToggleProps = useCallback4(
+    () => ({
+      type: "button",
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      onClick: () => toggle()
+    }),
+    [open, panelId, toggle]
+  );
+  const getPanelProps = useCallback4(
+    (baseClassName = "kds-expand-panel") => ({
+      id: panelId,
+      className: open ? `${baseClassName} open` : baseClassName,
+      hidden: !open
+    }),
+    [open, panelId]
+  );
+  return { open, setOpen, toggle, getToggleProps, getPanelProps };
+}
 export {
   KdsAccordion,
   KdsAccordionDetails,
@@ -2621,6 +2690,7 @@ export {
   KdsCountdown,
   KdsDivider,
   KdsExpandPanel,
+  KdsInvoiceMerchant,
   KdsInvoiceSticky,
   KdsLinearProgress,
   KdsMerchantTile,
@@ -2668,6 +2738,7 @@ export {
   useAutoHide,
   useCopyToClipboard,
   useCountdown,
+  useExpandToggle,
   useStickyInvoiceCollapse,
   useTabsKeyboard,
   zIndex

package/package.json

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