@khipu/design-system 0.2.0-alpha.83 → 0.2.0-alpha.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/beercss/khipu-beercss.css +155 -6
- package/dist/beercss/khipu-beercss.js +63 -0
- package/dist/beercss/khipu-beercss.min.css +1 -1
- package/dist/beercss/khipu-beercss.min.js +1 -1
- package/dist/beercss/khipu-beercss.scoped.css +155 -6
- package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.d.mts +89 -2
- package/dist/index.d.ts +89 -2
- package/dist/index.js +224 -142
- package/dist/index.mjs +191 -111
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khipu/design-system/beercss",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.85",
|
|
4
4
|
"description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
|
|
5
|
-
"buildDate": "2026-07-
|
|
5
|
+
"buildDate": "2026-07-01T19:20:39.383Z",
|
|
6
6
|
"includes": {
|
|
7
7
|
"beercss": "4.0.1",
|
|
8
8
|
"khipu-tokens": "latest",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
},
|
|
20
20
|
"scopeClass": ".kds-theme-root",
|
|
21
21
|
"cdn": {
|
|
22
|
-
"css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.
|
|
23
|
-
"cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.
|
|
24
|
-
"js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.
|
|
22
|
+
"css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.85/dist/beercss/khipu-beercss.min.css",
|
|
23
|
+
"cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.85/dist/beercss/khipu-beercss.scoped.min.css",
|
|
24
|
+
"js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.85/dist/beercss/khipu-beercss.min.js"
|
|
25
25
|
}
|
|
26
26
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -368,6 +368,7 @@ declare const fontWeights: {
|
|
|
368
368
|
readonly bold: 700;
|
|
369
369
|
};
|
|
370
370
|
declare const fontSizes: {
|
|
371
|
+
readonly '2xs': "0.625rem";
|
|
371
372
|
readonly xs: "0.75rem";
|
|
372
373
|
readonly sm: "0.875rem";
|
|
373
374
|
readonly base: "1rem";
|
|
@@ -826,6 +827,7 @@ declare const tokensByMode: {
|
|
|
826
827
|
readonly bold: 700;
|
|
827
828
|
};
|
|
828
829
|
readonly fontSizes: {
|
|
830
|
+
readonly '2xs': "0.625rem";
|
|
829
831
|
readonly xs: "0.75rem";
|
|
830
832
|
readonly sm: "0.875rem";
|
|
831
833
|
readonly base: "1rem";
|
|
@@ -1132,6 +1134,11 @@ declare const tokensByMode: {
|
|
|
1132
1134
|
};
|
|
1133
1135
|
};
|
|
1134
1136
|
readonly responsiveBaseFontSizes: {
|
|
1137
|
+
readonly '2xs': {
|
|
1138
|
+
readonly mobile: "0.5625rem";
|
|
1139
|
+
readonly tablet: "0.625rem";
|
|
1140
|
+
readonly desktop: "0.625rem";
|
|
1141
|
+
};
|
|
1135
1142
|
readonly xs: {
|
|
1136
1143
|
readonly mobile: "0.6875rem";
|
|
1137
1144
|
readonly tablet: "0.75rem";
|
|
@@ -1418,6 +1425,7 @@ declare const tokensByMode: {
|
|
|
1418
1425
|
readonly bold: 700;
|
|
1419
1426
|
};
|
|
1420
1427
|
readonly fontSizes: {
|
|
1428
|
+
readonly '2xs': "0.625rem";
|
|
1421
1429
|
readonly xs: "0.75rem";
|
|
1422
1430
|
readonly sm: "0.875rem";
|
|
1423
1431
|
readonly base: "1rem";
|
|
@@ -1724,6 +1732,11 @@ declare const tokensByMode: {
|
|
|
1724
1732
|
};
|
|
1725
1733
|
};
|
|
1726
1734
|
readonly responsiveBaseFontSizes: {
|
|
1735
|
+
readonly '2xs': {
|
|
1736
|
+
readonly mobile: "0.5625rem";
|
|
1737
|
+
readonly tablet: "0.625rem";
|
|
1738
|
+
readonly desktop: "0.625rem";
|
|
1739
|
+
};
|
|
1727
1740
|
readonly xs: {
|
|
1728
1741
|
readonly mobile: "0.6875rem";
|
|
1729
1742
|
readonly tablet: "0.75rem";
|
|
@@ -2019,6 +2032,7 @@ declare const tokens: {
|
|
|
2019
2032
|
readonly bold: 700;
|
|
2020
2033
|
};
|
|
2021
2034
|
readonly fontSizes: {
|
|
2035
|
+
readonly '2xs': "0.625rem";
|
|
2022
2036
|
readonly xs: "0.75rem";
|
|
2023
2037
|
readonly sm: "0.875rem";
|
|
2024
2038
|
readonly base: "1rem";
|
|
@@ -2325,6 +2339,11 @@ declare const tokens: {
|
|
|
2325
2339
|
};
|
|
2326
2340
|
};
|
|
2327
2341
|
readonly responsiveBaseFontSizes: {
|
|
2342
|
+
readonly '2xs': {
|
|
2343
|
+
readonly mobile: "0.5625rem";
|
|
2344
|
+
readonly tablet: "0.625rem";
|
|
2345
|
+
readonly desktop: "0.625rem";
|
|
2346
|
+
};
|
|
2328
2347
|
readonly xs: {
|
|
2329
2348
|
readonly mobile: "0.6875rem";
|
|
2330
2349
|
readonly tablet: "0.75rem";
|
|
@@ -2817,7 +2836,7 @@ declare const KdsAlert: React__default.ForwardRefExoticComponent<KdsAlertProps &
|
|
|
2817
2836
|
/**
|
|
2818
2837
|
* Custom Khipu typography variants that map to specific design tokens
|
|
2819
2838
|
*/
|
|
2820
|
-
type KdsTypographyVariant = 'display1' | 'display2' | 'heading1' | 'heading2' | 'heading3' | 'body-large' | 'body' | 'body-small' | 'label' | 'label-small' | 'muted' | 'link' | 'strong';
|
|
2839
|
+
type KdsTypographyVariant = 'display1' | 'display2' | 'heading1' | 'heading2' | 'heading3' | 'body-large' | 'body' | 'body-small' | 'label' | 'label-small' | 'value' | 'code' | 'caption' | 'muted' | 'link' | 'strong';
|
|
2821
2840
|
type ElementTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label';
|
|
2822
2841
|
interface KdsTypographyProps extends React__default.HTMLAttributes<HTMLElement> {
|
|
2823
2842
|
/**
|
|
@@ -3298,6 +3317,40 @@ declare const KdsCountdown: React__default.ForwardRefExoticComponent<KdsCountdow
|
|
|
3298
3317
|
type KdsSegmentedTabsProps = KdsTabsProps;
|
|
3299
3318
|
declare const KdsSegmentedTabs: React$1.ForwardRefExoticComponent<KdsTabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3300
3319
|
|
|
3320
|
+
/**
|
|
3321
|
+
* Khipu Design System - Floating Action Button (FAB)
|
|
3322
|
+
*
|
|
3323
|
+
* A circular, icon-only floating button built with native HTML and kds-* CSS classes.
|
|
3324
|
+
* Presentational only: pair it with `useHideOnScroll` and drive the `hidden` prop for
|
|
3325
|
+
* hide-on-scroll behavior.
|
|
3326
|
+
*/
|
|
3327
|
+
|
|
3328
|
+
type KdsFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
|
|
3329
|
+
interface KdsFabProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3330
|
+
/** Material Symbols icon name, e.g. "close". */
|
|
3331
|
+
icon: string;
|
|
3332
|
+
/** Accessible label — required, since the button is icon-only. */
|
|
3333
|
+
'aria-label': string;
|
|
3334
|
+
/** Corner to pin to (fixed). Use `none` to leave positioning to the consumer. Default `top-right`. */
|
|
3335
|
+
position?: KdsFabPosition;
|
|
3336
|
+
/** When true, animates the button out (fade + slight move) and disables interaction. */
|
|
3337
|
+
hidden?: boolean;
|
|
3338
|
+
}
|
|
3339
|
+
/**
|
|
3340
|
+
* Floating action button — circular, icon-only, with an animated hide state.
|
|
3341
|
+
*
|
|
3342
|
+
* @example
|
|
3343
|
+
* ```tsx
|
|
3344
|
+
* // Static, pinned top-right
|
|
3345
|
+
* <KdsFab icon="close" aria-label="Cancelar pago" onClick={openCancel} />
|
|
3346
|
+
*
|
|
3347
|
+
* // Hide on scroll down, show on scroll up
|
|
3348
|
+
* const { hidden } = useHideOnScroll();
|
|
3349
|
+
* <KdsFab icon="close" aria-label="Cancelar pago" hidden={hidden} onClick={openCancel} />
|
|
3350
|
+
* ```
|
|
3351
|
+
*/
|
|
3352
|
+
declare const KdsFab: React__default.ForwardRefExoticComponent<KdsFabProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
3353
|
+
|
|
3301
3354
|
interface KdsBankRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'name'> {
|
|
3302
3355
|
/**
|
|
3303
3356
|
* Contenido principal de la fila. Acepta texto o nodo — permite contenido en
|
|
@@ -3798,6 +3851,40 @@ interface UseExpandToggleResult {
|
|
|
3798
3851
|
*/
|
|
3799
3852
|
declare function useExpandToggle(options?: UseExpandToggleOptions): UseExpandToggleResult;
|
|
3800
3853
|
|
|
3854
|
+
/**
|
|
3855
|
+
* Options for {@link useHideOnScroll}.
|
|
3856
|
+
*/
|
|
3857
|
+
interface UseHideOnScrollOptions {
|
|
3858
|
+
/** Minimum scroll delta (px) before toggling, to avoid jitter. Default 8. */
|
|
3859
|
+
threshold?: number;
|
|
3860
|
+
/** Scroll offset (px) at/under which the element is always visible. Default 0. */
|
|
3861
|
+
topOffset?: number;
|
|
3862
|
+
}
|
|
3863
|
+
/**
|
|
3864
|
+
* Result of {@link useHideOnScroll}.
|
|
3865
|
+
*/
|
|
3866
|
+
interface UseHideOnScrollResult {
|
|
3867
|
+
/** True when the element should be hidden (user scrolled down past the threshold). */
|
|
3868
|
+
hidden: boolean;
|
|
3869
|
+
}
|
|
3870
|
+
/**
|
|
3871
|
+
* Hide-on-scroll-down / show-on-scroll-up for floating UI (e.g. `KdsFab`).
|
|
3872
|
+
*
|
|
3873
|
+
* Returns `{ hidden }`: starts visible, hides once the user scrolls **down** past
|
|
3874
|
+
* `threshold`, shows again as soon as they scroll **up**, and is always visible while
|
|
3875
|
+
* within `topOffset` of the top. Coalesced through `requestAnimationFrame` so it stays cheap.
|
|
3876
|
+
*
|
|
3877
|
+
* Works standalone (`window.scrollY`) and **embedded in an iframe**, where the widget does
|
|
3878
|
+
* not scroll internally and the parent posts the scroll offset via
|
|
3879
|
+
* `postMessage({ type: 'VIEWPORT_OFFSET', offsetTop })` — the same mechanism as
|
|
3880
|
+
* {@link useStickyInvoiceCollapse}.
|
|
3881
|
+
*
|
|
3882
|
+
* @example
|
|
3883
|
+
* const { hidden } = useHideOnScroll();
|
|
3884
|
+
* <KdsFab icon="close" aria-label="Cancelar" hidden={hidden} onClick={open} />
|
|
3885
|
+
*/
|
|
3886
|
+
declare function useHideOnScroll(options?: UseHideOnScrollOptions): UseHideOnScrollResult;
|
|
3887
|
+
|
|
3801
3888
|
/**
|
|
3802
3889
|
* Khipu Design System - Core Utilities
|
|
3803
3890
|
*
|
|
@@ -3816,4 +3903,4 @@ declare function getContrastColor(hex: string): string;
|
|
|
3816
3903
|
*/
|
|
3817
3904
|
declare function lighten(hex: string, amount: number): string;
|
|
3818
3905
|
|
|
3819
|
-
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 };
|
|
3906
|
+
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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -368,6 +368,7 @@ declare const fontWeights: {
|
|
|
368
368
|
readonly bold: 700;
|
|
369
369
|
};
|
|
370
370
|
declare const fontSizes: {
|
|
371
|
+
readonly '2xs': "0.625rem";
|
|
371
372
|
readonly xs: "0.75rem";
|
|
372
373
|
readonly sm: "0.875rem";
|
|
373
374
|
readonly base: "1rem";
|
|
@@ -826,6 +827,7 @@ declare const tokensByMode: {
|
|
|
826
827
|
readonly bold: 700;
|
|
827
828
|
};
|
|
828
829
|
readonly fontSizes: {
|
|
830
|
+
readonly '2xs': "0.625rem";
|
|
829
831
|
readonly xs: "0.75rem";
|
|
830
832
|
readonly sm: "0.875rem";
|
|
831
833
|
readonly base: "1rem";
|
|
@@ -1132,6 +1134,11 @@ declare const tokensByMode: {
|
|
|
1132
1134
|
};
|
|
1133
1135
|
};
|
|
1134
1136
|
readonly responsiveBaseFontSizes: {
|
|
1137
|
+
readonly '2xs': {
|
|
1138
|
+
readonly mobile: "0.5625rem";
|
|
1139
|
+
readonly tablet: "0.625rem";
|
|
1140
|
+
readonly desktop: "0.625rem";
|
|
1141
|
+
};
|
|
1135
1142
|
readonly xs: {
|
|
1136
1143
|
readonly mobile: "0.6875rem";
|
|
1137
1144
|
readonly tablet: "0.75rem";
|
|
@@ -1418,6 +1425,7 @@ declare const tokensByMode: {
|
|
|
1418
1425
|
readonly bold: 700;
|
|
1419
1426
|
};
|
|
1420
1427
|
readonly fontSizes: {
|
|
1428
|
+
readonly '2xs': "0.625rem";
|
|
1421
1429
|
readonly xs: "0.75rem";
|
|
1422
1430
|
readonly sm: "0.875rem";
|
|
1423
1431
|
readonly base: "1rem";
|
|
@@ -1724,6 +1732,11 @@ declare const tokensByMode: {
|
|
|
1724
1732
|
};
|
|
1725
1733
|
};
|
|
1726
1734
|
readonly responsiveBaseFontSizes: {
|
|
1735
|
+
readonly '2xs': {
|
|
1736
|
+
readonly mobile: "0.5625rem";
|
|
1737
|
+
readonly tablet: "0.625rem";
|
|
1738
|
+
readonly desktop: "0.625rem";
|
|
1739
|
+
};
|
|
1727
1740
|
readonly xs: {
|
|
1728
1741
|
readonly mobile: "0.6875rem";
|
|
1729
1742
|
readonly tablet: "0.75rem";
|
|
@@ -2019,6 +2032,7 @@ declare const tokens: {
|
|
|
2019
2032
|
readonly bold: 700;
|
|
2020
2033
|
};
|
|
2021
2034
|
readonly fontSizes: {
|
|
2035
|
+
readonly '2xs': "0.625rem";
|
|
2022
2036
|
readonly xs: "0.75rem";
|
|
2023
2037
|
readonly sm: "0.875rem";
|
|
2024
2038
|
readonly base: "1rem";
|
|
@@ -2325,6 +2339,11 @@ declare const tokens: {
|
|
|
2325
2339
|
};
|
|
2326
2340
|
};
|
|
2327
2341
|
readonly responsiveBaseFontSizes: {
|
|
2342
|
+
readonly '2xs': {
|
|
2343
|
+
readonly mobile: "0.5625rem";
|
|
2344
|
+
readonly tablet: "0.625rem";
|
|
2345
|
+
readonly desktop: "0.625rem";
|
|
2346
|
+
};
|
|
2328
2347
|
readonly xs: {
|
|
2329
2348
|
readonly mobile: "0.6875rem";
|
|
2330
2349
|
readonly tablet: "0.75rem";
|
|
@@ -2817,7 +2836,7 @@ declare const KdsAlert: React__default.ForwardRefExoticComponent<KdsAlertProps &
|
|
|
2817
2836
|
/**
|
|
2818
2837
|
* Custom Khipu typography variants that map to specific design tokens
|
|
2819
2838
|
*/
|
|
2820
|
-
type KdsTypographyVariant = 'display1' | 'display2' | 'heading1' | 'heading2' | 'heading3' | 'body-large' | 'body' | 'body-small' | 'label' | 'label-small' | 'muted' | 'link' | 'strong';
|
|
2839
|
+
type KdsTypographyVariant = 'display1' | 'display2' | 'heading1' | 'heading2' | 'heading3' | 'body-large' | 'body' | 'body-small' | 'label' | 'label-small' | 'value' | 'code' | 'caption' | 'muted' | 'link' | 'strong';
|
|
2821
2840
|
type ElementTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label';
|
|
2822
2841
|
interface KdsTypographyProps extends React__default.HTMLAttributes<HTMLElement> {
|
|
2823
2842
|
/**
|
|
@@ -3298,6 +3317,40 @@ declare const KdsCountdown: React__default.ForwardRefExoticComponent<KdsCountdow
|
|
|
3298
3317
|
type KdsSegmentedTabsProps = KdsTabsProps;
|
|
3299
3318
|
declare const KdsSegmentedTabs: React$1.ForwardRefExoticComponent<KdsTabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3300
3319
|
|
|
3320
|
+
/**
|
|
3321
|
+
* Khipu Design System - Floating Action Button (FAB)
|
|
3322
|
+
*
|
|
3323
|
+
* A circular, icon-only floating button built with native HTML and kds-* CSS classes.
|
|
3324
|
+
* Presentational only: pair it with `useHideOnScroll` and drive the `hidden` prop for
|
|
3325
|
+
* hide-on-scroll behavior.
|
|
3326
|
+
*/
|
|
3327
|
+
|
|
3328
|
+
type KdsFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
|
|
3329
|
+
interface KdsFabProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3330
|
+
/** Material Symbols icon name, e.g. "close". */
|
|
3331
|
+
icon: string;
|
|
3332
|
+
/** Accessible label — required, since the button is icon-only. */
|
|
3333
|
+
'aria-label': string;
|
|
3334
|
+
/** Corner to pin to (fixed). Use `none` to leave positioning to the consumer. Default `top-right`. */
|
|
3335
|
+
position?: KdsFabPosition;
|
|
3336
|
+
/** When true, animates the button out (fade + slight move) and disables interaction. */
|
|
3337
|
+
hidden?: boolean;
|
|
3338
|
+
}
|
|
3339
|
+
/**
|
|
3340
|
+
* Floating action button — circular, icon-only, with an animated hide state.
|
|
3341
|
+
*
|
|
3342
|
+
* @example
|
|
3343
|
+
* ```tsx
|
|
3344
|
+
* // Static, pinned top-right
|
|
3345
|
+
* <KdsFab icon="close" aria-label="Cancelar pago" onClick={openCancel} />
|
|
3346
|
+
*
|
|
3347
|
+
* // Hide on scroll down, show on scroll up
|
|
3348
|
+
* const { hidden } = useHideOnScroll();
|
|
3349
|
+
* <KdsFab icon="close" aria-label="Cancelar pago" hidden={hidden} onClick={openCancel} />
|
|
3350
|
+
* ```
|
|
3351
|
+
*/
|
|
3352
|
+
declare const KdsFab: React__default.ForwardRefExoticComponent<KdsFabProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
3353
|
+
|
|
3301
3354
|
interface KdsBankRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'name'> {
|
|
3302
3355
|
/**
|
|
3303
3356
|
* Contenido principal de la fila. Acepta texto o nodo — permite contenido en
|
|
@@ -3798,6 +3851,40 @@ interface UseExpandToggleResult {
|
|
|
3798
3851
|
*/
|
|
3799
3852
|
declare function useExpandToggle(options?: UseExpandToggleOptions): UseExpandToggleResult;
|
|
3800
3853
|
|
|
3854
|
+
/**
|
|
3855
|
+
* Options for {@link useHideOnScroll}.
|
|
3856
|
+
*/
|
|
3857
|
+
interface UseHideOnScrollOptions {
|
|
3858
|
+
/** Minimum scroll delta (px) before toggling, to avoid jitter. Default 8. */
|
|
3859
|
+
threshold?: number;
|
|
3860
|
+
/** Scroll offset (px) at/under which the element is always visible. Default 0. */
|
|
3861
|
+
topOffset?: number;
|
|
3862
|
+
}
|
|
3863
|
+
/**
|
|
3864
|
+
* Result of {@link useHideOnScroll}.
|
|
3865
|
+
*/
|
|
3866
|
+
interface UseHideOnScrollResult {
|
|
3867
|
+
/** True when the element should be hidden (user scrolled down past the threshold). */
|
|
3868
|
+
hidden: boolean;
|
|
3869
|
+
}
|
|
3870
|
+
/**
|
|
3871
|
+
* Hide-on-scroll-down / show-on-scroll-up for floating UI (e.g. `KdsFab`).
|
|
3872
|
+
*
|
|
3873
|
+
* Returns `{ hidden }`: starts visible, hides once the user scrolls **down** past
|
|
3874
|
+
* `threshold`, shows again as soon as they scroll **up**, and is always visible while
|
|
3875
|
+
* within `topOffset` of the top. Coalesced through `requestAnimationFrame` so it stays cheap.
|
|
3876
|
+
*
|
|
3877
|
+
* Works standalone (`window.scrollY`) and **embedded in an iframe**, where the widget does
|
|
3878
|
+
* not scroll internally and the parent posts the scroll offset via
|
|
3879
|
+
* `postMessage({ type: 'VIEWPORT_OFFSET', offsetTop })` — the same mechanism as
|
|
3880
|
+
* {@link useStickyInvoiceCollapse}.
|
|
3881
|
+
*
|
|
3882
|
+
* @example
|
|
3883
|
+
* const { hidden } = useHideOnScroll();
|
|
3884
|
+
* <KdsFab icon="close" aria-label="Cancelar" hidden={hidden} onClick={open} />
|
|
3885
|
+
*/
|
|
3886
|
+
declare function useHideOnScroll(options?: UseHideOnScrollOptions): UseHideOnScrollResult;
|
|
3887
|
+
|
|
3801
3888
|
/**
|
|
3802
3889
|
* Khipu Design System - Core Utilities
|
|
3803
3890
|
*
|
|
@@ -3816,4 +3903,4 @@ declare function getContrastColor(hex: string): string;
|
|
|
3816
3903
|
*/
|
|
3817
3904
|
declare function lighten(hex: string, amount: number): string;
|
|
3818
3905
|
|
|
3819
|
-
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 };
|
|
3906
|
+
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 };
|