@khipu/design-system 0.2.0-alpha.88 → 0.2.0-alpha.89

package/dist/beercss/metadata.json

@@ -1,8 +1,8 @@
 {
   "name": "@khipu/design-system/beercss",
-  "version": "0.2.0-alpha.88",
+  "version": "0.2.0-alpha.89",
   "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
-  "buildDate": "2026-07-02T19:08:17.515Z",
+  "buildDate": "2026-07-02T20:44:17.820Z",
   "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.88/dist/beercss/khipu-beercss.min.css",
-    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.88/dist/beercss/khipu-beercss.scoped.min.css",
-    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.88/dist/beercss/khipu-beercss.min.js"
+    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.89/dist/beercss/khipu-beercss.min.css",
+    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.89/dist/beercss/khipu-beercss.scoped.min.css",
+    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.89/dist/beercss/khipu-beercss.min.js"
   }
 }

package/dist/index.d.mts

@@ -3325,13 +3325,17 @@ declare const KdsSegmentedTabs: React$1.ForwardRefExoticComponent<KdsTabsProps &
  * hide-on-scroll behavior.
  */
 
-type KdsFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
+type KdsFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'corner' | 'none';
 interface KdsFabProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Material Symbols icon name, e.g. "close". */
     icon: string;
     /** Accessible label — required, since the button is icon-only. */
     'aria-label': string;
-    /** Corner to pin to (fixed). Use `none` to leave positioning to the consumer. Default `top-right`. */
+    /**
+     * Corner to pin to (fixed). `corner` mounts it centered OVER the top-right corner of the
+     * content column (`--kds-fab-column-width`), overlapping outward; `top-right` insets inside it.
+     * Use `none` to leave positioning to the consumer. Default `top-right`.
+     */
     position?: KdsFabPosition;
     /** When true, animates the button out (fade + slight move) and disables interaction. */
     hidden?: boolean;
@@ -3902,5 +3906,12 @@ declare function getContrastColor(hex: string): string;
  * @param amount - 0 = original, 1 = white. Typical: 0.85 for container colors.
  */
 declare function lighten(hex: string, amount: number): string;
+/**
+ * Format an ISO 8601 string as "DD-MM-YYYY HH:mm" (24h) in the browser's local timezone.
+ * Returns "" for empty or invalid input. Numeric (not `Intl` locale-aware) so the 24h + numeric
+ * output matches server-side (ICU/Java) formatting regardless of locale.
+ * @param iso - ISO 8601 date-time, e.g. "2026-08-26T03:59:00.000Z"
+ */
+declare function formatDateTime(iso?: string): string;
 
-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, KdsFab, type KdsFabPosition, type KdsFabProps, 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 UseHideOnScrollOptions, type UseHideOnScrollResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useHideOnScroll, 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, KdsFab, type KdsFabPosition, type KdsFabProps, 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 UseHideOnScrollOptions, type UseHideOnScrollResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, formatDateTime, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useHideOnScroll, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };

package/dist/index.d.ts

@@ -3325,13 +3325,17 @@ declare const KdsSegmentedTabs: React$1.ForwardRefExoticComponent<KdsTabsProps &
  * hide-on-scroll behavior.
  */
 
-type KdsFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
+type KdsFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'corner' | 'none';
 interface KdsFabProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Material Symbols icon name, e.g. "close". */
     icon: string;
     /** Accessible label — required, since the button is icon-only. */
     'aria-label': string;
-    /** Corner to pin to (fixed). Use `none` to leave positioning to the consumer. Default `top-right`. */
+    /**
+     * Corner to pin to (fixed). `corner` mounts it centered OVER the top-right corner of the
+     * content column (`--kds-fab-column-width`), overlapping outward; `top-right` insets inside it.
+     * Use `none` to leave positioning to the consumer. Default `top-right`.
+     */
     position?: KdsFabPosition;
     /** When true, animates the button out (fade + slight move) and disables interaction. */
     hidden?: boolean;
@@ -3902,5 +3906,12 @@ declare function getContrastColor(hex: string): string;
  * @param amount - 0 = original, 1 = white. Typical: 0.85 for container colors.
  */
 declare function lighten(hex: string, amount: number): string;
+/**
+ * Format an ISO 8601 string as "DD-MM-YYYY HH:mm" (24h) in the browser's local timezone.
+ * Returns "" for empty or invalid input. Numeric (not `Intl` locale-aware) so the 24h + numeric
+ * output matches server-side (ICU/Java) formatting regardless of locale.
+ * @param iso - ISO 8601 date-time, e.g. "2026-08-26T03:59:00.000Z"
+ */
+declare function formatDateTime(iso?: string): string;
 
-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, KdsFab, type KdsFabPosition, type KdsFabProps, 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 UseHideOnScrollOptions, type UseHideOnScrollResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useHideOnScroll, 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, KdsFab, type KdsFabPosition, type KdsFabProps, 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 UseHideOnScrollOptions, type UseHideOnScrollResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, formatDateTime, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useHideOnScroll, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };

package/dist/index.js

@@ -90,6 +90,7 @@ __export(index_exports, {
   fontFamilies: () => fontFamilies,
   fontSizes: () => fontSizes,
   fontWeights: () => fontWeights,
+  formatDateTime: () => formatDateTime,
   getContrastColor: () => getContrastColor,
   letterSpacings: () => letterSpacings,
   lighten: () => lighten,
@@ -148,6 +149,19 @@ function lighten(hex, amount) {
     b + (255 - b) * amount
   );
 }
+function formatDateTime(iso) {
+  if (!iso) {
+    return "";
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  const pad = (n) => n.toString().padStart(2, "0");
+  const datePart = `${pad(date.getDate())}-${pad(date.getMonth() + 1)}-${date.getFullYear()}`;
+  const timePart = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  return `${datePart} ${timePart}`;
+}
 
 // src/theme/KdsThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -2929,6 +2943,7 @@ function useHideOnScroll(options = {}) {
   fontFamilies,
   fontSizes,
   fontWeights,
+  formatDateTime,
   getContrastColor,
   letterSpacings,
   lighten,

package/dist/index.mjs

@@ -34,6 +34,19 @@ function lighten(hex, amount) {
     b + (255 - b) * amount
   );
 }
+function formatDateTime(iso) {
+  if (!iso) {
+    return "";
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  const pad = (n) => n.toString().padStart(2, "0");
+  const datePart = `${pad(date.getDate())}-${pad(date.getMonth() + 1)}-${date.getFullYear()}`;
+  const timePart = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  return `${datePart} ${timePart}`;
+}
 
 // src/theme/KdsThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -2814,6 +2827,7 @@ export {
   fontFamilies,
   fontSizes,
   fontWeights,
+  formatDateTime,
   getContrastColor,
   letterSpacings,
   lighten,

package/package.json

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