@razorpay/blade 11.6.3 → 11.8.0
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/build/lib/native/components/Accordion/Accordion.js +2 -2
- package/build/lib/native/components/Accordion/Accordion.js.map +1 -1
- package/build/lib/native/components/Accordion/AccordionButton.native.js +2 -2
- package/build/lib/native/components/Accordion/AccordionButton.native.js.map +1 -1
- package/build/lib/native/components/Accordion/AccordionContext.js +2 -2
- package/build/lib/native/components/Accordion/AccordionContext.js.map +1 -1
- package/build/lib/native/components/Accordion/AccordionItem.js +11 -14
- package/build/lib/native/components/Accordion/AccordionItem.js.map +1 -1
- package/build/lib/native/components/Accordion/AccordionItemBody.js +24 -0
- package/build/lib/native/components/Accordion/AccordionItemBody.js.map +1 -0
- package/build/lib/native/components/Accordion/AccordionItemHeader.js +24 -0
- package/build/lib/native/components/Accordion/AccordionItemHeader.js.map +1 -0
- package/build/lib/native/components/Accordion/commonStyles.js +1 -1
- package/build/lib/native/components/Accordion/commonStyles.js.map +1 -1
- package/build/lib/native/components/Accordion/componentIds.js +4 -0
- package/build/lib/native/components/Accordion/componentIds.js.map +1 -0
- package/build/lib/native/components/ActionList/ActionListBox.native.js +1 -4
- package/build/lib/native/components/ActionList/ActionListBox.native.js.map +1 -1
- package/build/lib/native/components/BaseHeaderFooter/BaseHeader.js +1 -1
- package/build/lib/native/components/BaseHeaderFooter/BaseHeader.js.map +1 -1
- package/build/lib/native/components/Button/BaseButton/AnimatedButtonContent.native.js +16 -0
- package/build/lib/native/components/Button/BaseButton/AnimatedButtonContent.native.js.map +1 -0
- package/build/lib/native/components/Button/BaseButton/BaseButton.js +7 -5
- package/build/lib/native/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/native/components/Button/BaseButton/StyledBaseButton.native.js +1 -1
- package/build/lib/native/components/Button/BaseButton/StyledBaseButton.native.js.map +1 -1
- package/build/lib/native/components/ButtonGroup/ButtonGroup.native.js +7 -0
- package/build/lib/native/components/ButtonGroup/ButtonGroup.native.js.map +1 -0
- package/build/lib/native/components/ButtonGroup/ButtonGroupContext.js +6 -0
- package/build/lib/native/components/ButtonGroup/ButtonGroupContext.js.map +1 -0
- package/build/lib/native/components/Collapsible/CollapsibleBodyContent.native.js.map +1 -1
- package/build/lib/native/components/index.js +3 -0
- package/build/lib/native/components/index.js.map +1 -1
- package/build/lib/native/utils/metaAttribute/metaConstants.js +1 -1
- package/build/lib/native/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/development/components/Accordion/Accordion.js +57 -6
- package/build/lib/web/development/components/Accordion/Accordion.js.map +1 -1
- package/build/lib/web/development/components/Accordion/AccordionButton.web.js +21 -25
- package/build/lib/web/development/components/Accordion/AccordionButton.web.js.map +1 -1
- package/build/lib/web/development/components/Accordion/AccordionContext.js +16 -1
- package/build/lib/web/development/components/Accordion/AccordionContext.js.map +1 -1
- package/build/lib/web/development/components/Accordion/AccordionItem.js +66 -66
- package/build/lib/web/development/components/Accordion/AccordionItem.js.map +1 -1
- package/build/lib/web/development/components/Accordion/AccordionItemBody.js +84 -0
- package/build/lib/web/development/components/Accordion/AccordionItemBody.js.map +1 -0
- package/build/lib/web/development/components/Accordion/AccordionItemHeader.js +71 -0
- package/build/lib/web/development/components/Accordion/AccordionItemHeader.js.map +1 -0
- package/build/lib/web/development/components/Accordion/StyledAccordionButton.web.js +3 -2
- package/build/lib/web/development/components/Accordion/StyledAccordionButton.web.js.map +1 -1
- package/build/lib/web/development/components/Accordion/commonStyles.js +8 -6
- package/build/lib/web/development/components/Accordion/commonStyles.js.map +1 -1
- package/build/lib/web/development/components/Accordion/componentIds.js +8 -0
- package/build/lib/web/development/components/Accordion/componentIds.js.map +1 -0
- package/build/lib/web/development/components/Accordion/index.js +2 -0
- package/build/lib/web/development/components/Accordion/index.js.map +1 -1
- package/build/lib/web/development/components/BaseHeaderFooter/BaseHeader.js +131 -68
- package/build/lib/web/development/components/BaseHeaderFooter/BaseHeader.js.map +1 -1
- package/build/lib/web/development/components/Button/BaseButton/AnimatedButtonContent.web.js +18 -0
- package/build/lib/web/development/components/Button/BaseButton/AnimatedButtonContent.web.js.map +1 -0
- package/build/lib/web/development/components/Button/BaseButton/BaseButton.js +116 -66
- package/build/lib/web/development/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/web/development/components/ButtonGroup/ButtonGroup.web.js +158 -0
- package/build/lib/web/development/components/ButtonGroup/ButtonGroup.web.js.map +1 -0
- package/build/lib/web/development/components/ButtonGroup/ButtonGroupContext.js +11 -0
- package/build/lib/web/development/components/ButtonGroup/ButtonGroupContext.js.map +1 -0
- package/build/lib/web/development/components/ButtonGroup/StyledButtonGroup.js +47 -0
- package/build/lib/web/development/components/ButtonGroup/StyledButtonGroup.js.map +1 -0
- package/build/lib/web/development/components/ButtonGroup/index.js +2 -0
- package/build/lib/web/development/components/ButtonGroup/index.js.map +1 -0
- package/build/lib/web/development/components/Collapsible/CollapsibleBodyContent.web.js +3 -1
- package/build/lib/web/development/components/Collapsible/CollapsibleBodyContent.web.js.map +1 -1
- package/build/lib/web/development/components/index.js +4 -0
- package/build/lib/web/development/components/index.js.map +1 -1
- package/build/lib/web/development/utils/metaAttribute/metaConstants.js +3 -0
- package/build/lib/web/development/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/production/components/Accordion/Accordion.js +57 -6
- package/build/lib/web/production/components/Accordion/Accordion.js.map +1 -1
- package/build/lib/web/production/components/Accordion/AccordionButton.web.js +21 -25
- package/build/lib/web/production/components/Accordion/AccordionButton.web.js.map +1 -1
- package/build/lib/web/production/components/Accordion/AccordionContext.js +16 -1
- package/build/lib/web/production/components/Accordion/AccordionContext.js.map +1 -1
- package/build/lib/web/production/components/Accordion/AccordionItem.js +66 -66
- package/build/lib/web/production/components/Accordion/AccordionItem.js.map +1 -1
- package/build/lib/web/production/components/Accordion/AccordionItemBody.js +84 -0
- package/build/lib/web/production/components/Accordion/AccordionItemBody.js.map +1 -0
- package/build/lib/web/production/components/Accordion/AccordionItemHeader.js +71 -0
- package/build/lib/web/production/components/Accordion/AccordionItemHeader.js.map +1 -0
- package/build/lib/web/production/components/Accordion/StyledAccordionButton.web.js +3 -2
- package/build/lib/web/production/components/Accordion/StyledAccordionButton.web.js.map +1 -1
- package/build/lib/web/production/components/Accordion/commonStyles.js +8 -6
- package/build/lib/web/production/components/Accordion/commonStyles.js.map +1 -1
- package/build/lib/web/production/components/Accordion/componentIds.js +8 -0
- package/build/lib/web/production/components/Accordion/componentIds.js.map +1 -0
- package/build/lib/web/production/components/Accordion/index.js +2 -0
- package/build/lib/web/production/components/Accordion/index.js.map +1 -1
- package/build/lib/web/production/components/BaseHeaderFooter/BaseHeader.js +131 -68
- package/build/lib/web/production/components/BaseHeaderFooter/BaseHeader.js.map +1 -1
- package/build/lib/web/production/components/Button/BaseButton/AnimatedButtonContent.web.js +18 -0
- package/build/lib/web/production/components/Button/BaseButton/AnimatedButtonContent.web.js.map +1 -0
- package/build/lib/web/production/components/Button/BaseButton/BaseButton.js +116 -66
- package/build/lib/web/production/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/web/production/components/ButtonGroup/ButtonGroup.web.js +158 -0
- package/build/lib/web/production/components/ButtonGroup/ButtonGroup.web.js.map +1 -0
- package/build/lib/web/production/components/ButtonGroup/ButtonGroupContext.js +11 -0
- package/build/lib/web/production/components/ButtonGroup/ButtonGroupContext.js.map +1 -0
- package/build/lib/web/production/components/ButtonGroup/StyledButtonGroup.js +47 -0
- package/build/lib/web/production/components/ButtonGroup/StyledButtonGroup.js.map +1 -0
- package/build/lib/web/production/components/ButtonGroup/index.js +2 -0
- package/build/lib/web/production/components/ButtonGroup/index.js.map +1 -0
- package/build/lib/web/production/components/Collapsible/CollapsibleBodyContent.web.js +3 -1
- package/build/lib/web/production/components/Collapsible/CollapsibleBodyContent.web.js.map +1 -1
- package/build/lib/web/production/components/index.js +4 -0
- package/build/lib/web/production/components/index.js.map +1 -1
- package/build/lib/web/production/utils/metaAttribute/metaConstants.js +3 -0
- package/build/lib/web/production/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/types/components/index.d.ts +1120 -965
- package/build/types/components/index.native.d.ts +1091 -962
- package/package.json +2 -2
|
@@ -4,8 +4,8 @@ import React__default, { ReactNode, ReactElement, ReactChild, SyntheticEvent, Ke
|
|
|
4
4
|
import { View, ViewStyle, AccessibilityRole, GestureResponderEvent } from 'react-native';
|
|
5
5
|
import * as styled_components from 'styled-components';
|
|
6
6
|
import { CSSObject } from 'styled-components';
|
|
7
|
-
import { CurrencyCodeType } from '@razorpay/i18nify-js/currency';
|
|
8
7
|
import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
|
|
8
|
+
import { CurrencyCodeType } from '@razorpay/i18nify-js/currency';
|
|
9
9
|
import * as csstype from 'csstype';
|
|
10
10
|
import { Placement, UseFloatingOptions } from '@floating-ui/react';
|
|
11
11
|
import { Toast } from 'react-hot-toast';
|
|
@@ -1349,35 +1349,6 @@ type BoxRefType = Platform.Select<{
|
|
|
1349
1349
|
native: View;
|
|
1350
1350
|
}>;
|
|
1351
1351
|
|
|
1352
|
-
type AccordionProps = {
|
|
1353
|
-
/**
|
|
1354
|
-
* Makes the passed item index expanded by default (uncontrolled)
|
|
1355
|
-
*/
|
|
1356
|
-
defaultExpandedIndex?: number;
|
|
1357
|
-
/**
|
|
1358
|
-
* Expands the passed index (controlled), `-1` implies no expanded items
|
|
1359
|
-
*/
|
|
1360
|
-
expandedIndex?: number;
|
|
1361
|
-
/**
|
|
1362
|
-
* Callback for change in any item's expanded state,
|
|
1363
|
-
* `-1` implies no expanded items
|
|
1364
|
-
*/
|
|
1365
|
-
onExpandChange?: ({ expandedIndex }: {
|
|
1366
|
-
expandedIndex: number;
|
|
1367
|
-
}) => void;
|
|
1368
|
-
/**
|
|
1369
|
-
* Adds numeric index at the beginning of items
|
|
1370
|
-
*
|
|
1371
|
-
* @default false
|
|
1372
|
-
*/
|
|
1373
|
-
showNumberPrefix?: boolean;
|
|
1374
|
-
/**
|
|
1375
|
-
* Accepts `AccordionItem` child nodes
|
|
1376
|
-
*/
|
|
1377
|
-
children: ReactElement | ReactElement[];
|
|
1378
|
-
} & TestID & StyledPropsBlade;
|
|
1379
|
-
declare const Accordion: ({ defaultExpandedIndex, expandedIndex, onExpandChange, showNumberPrefix, children, testID, ...styledProps }: AccordionProps) => ReactElement;
|
|
1380
|
-
|
|
1381
1352
|
declare const ArrowDownIcon: IconComponent;
|
|
1382
1353
|
|
|
1383
1354
|
declare const ArrowLeftIcon: IconComponent;
|
|
@@ -1936,922 +1907,88 @@ type IconProps = {
|
|
|
1936
1907
|
} & StyledPropsBlade;
|
|
1937
1908
|
type IconComponent = React.ComponentType<IconProps>;
|
|
1938
1909
|
|
|
1939
|
-
type
|
|
1940
|
-
|
|
1941
|
-
* Title text content
|
|
1942
|
-
*/
|
|
1943
|
-
title: string;
|
|
1944
|
-
/**
|
|
1945
|
-
* Body text content
|
|
1946
|
-
*/
|
|
1947
|
-
description?: string;
|
|
1948
|
-
/**
|
|
1949
|
-
* Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)
|
|
1950
|
-
*/
|
|
1951
|
-
icon?: IconComponent;
|
|
1952
|
-
/**
|
|
1953
|
-
* Slot, renders any custom content
|
|
1954
|
-
*/
|
|
1955
|
-
children?: ReactNode;
|
|
1956
|
-
/**
|
|
1957
|
-
* **Internal:** used for determining numbering, you don't need to pass this,
|
|
1958
|
-
* instead pass `showNumberPrefix` to root `Accordion`
|
|
1959
|
-
*/
|
|
1960
|
-
_index?: number;
|
|
1961
|
-
} & TestID;
|
|
1962
|
-
declare const AccordionItem: ({ title, description, icon, children, _index, testID, }: AccordionItemProps) => ReactElement;
|
|
1963
|
-
|
|
1964
|
-
type ActionListProps = {
|
|
1965
|
-
children: React__default.ReactNode[];
|
|
1966
|
-
} & TestID;
|
|
1967
|
-
/**
|
|
1968
|
-
* ### ActionList
|
|
1969
|
-
*
|
|
1970
|
-
* List of multiple actionable items. Can be used as menu items inside `Dropdown`,
|
|
1971
|
-
* `BottomSheet` and as selectable items when combined with `SelectInput`
|
|
1972
|
-
*
|
|
1973
|
-
* #### Usage
|
|
1974
|
-
*
|
|
1975
|
-
* ```jsx
|
|
1976
|
-
* <Dropdown>
|
|
1977
|
-
* <SelectInput label="Select Action" />
|
|
1978
|
-
* <DropdownOverlay>
|
|
1979
|
-
* <DropdownHeader title="Header Title" />
|
|
1980
|
-
* <ActionList>
|
|
1981
|
-
* <ActionListItem
|
|
1982
|
-
* title="Home"
|
|
1983
|
-
* value="home"
|
|
1984
|
-
* leading={<ActionListItemIcon icon={HomeIcon} />}
|
|
1985
|
-
* />
|
|
1986
|
-
* <ActionListItem
|
|
1987
|
-
* title="Pricing"
|
|
1988
|
-
* value="pricing"
|
|
1989
|
-
* leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
|
|
1990
|
-
* />
|
|
1991
|
-
* </ActionList>
|
|
1992
|
-
* <DropdownFooter><Button>Apply</Button></DropdownFooter>
|
|
1993
|
-
* </DropdownOverlay>
|
|
1994
|
-
* </Dropdown>
|
|
1995
|
-
* ```
|
|
1996
|
-
*
|
|
1997
|
-
*/
|
|
1998
|
-
declare const ActionList: React__default.MemoExoticComponent<({ children, testID }: ActionListProps) => React__default.ReactElement>;
|
|
1999
|
-
|
|
2000
|
-
type BadgeProps = {
|
|
2001
|
-
/**
|
|
2002
|
-
* Sets the label for the badge.
|
|
2003
|
-
*
|
|
2004
|
-
*/
|
|
2005
|
-
children: StringChildrenType;
|
|
2006
|
-
/**
|
|
2007
|
-
* Sets the color of the badge.
|
|
2008
|
-
*
|
|
2009
|
-
* @default 'neutral'
|
|
2010
|
-
*/
|
|
2011
|
-
color?: FeedbackColors | 'primary';
|
|
1910
|
+
type AccordionVariantType = 'filled' | 'transparent';
|
|
1911
|
+
type AccordionProps = {
|
|
2012
1912
|
/**
|
|
2013
|
-
*
|
|
2014
|
-
*
|
|
2015
|
-
* @default 'subtle'
|
|
1913
|
+
* Makes the passed item index expanded by default (uncontrolled)
|
|
2016
1914
|
*/
|
|
2017
|
-
|
|
1915
|
+
defaultExpandedIndex?: number;
|
|
2018
1916
|
/**
|
|
2019
|
-
*
|
|
2020
|
-
*
|
|
2021
|
-
* @default 'medium'
|
|
1917
|
+
* Expands the passed index (controlled), `-1` implies no expanded items
|
|
2022
1918
|
*/
|
|
2023
|
-
|
|
1919
|
+
expandedIndex?: number;
|
|
2024
1920
|
/**
|
|
2025
|
-
*
|
|
2026
|
-
*
|
|
2027
|
-
*
|
|
1921
|
+
* Callback for change in any item's expanded state,
|
|
1922
|
+
* `-1` implies no expanded items
|
|
2028
1923
|
*/
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
declare const Badge: ({ children, emphasis, icon: Icon, size, color, testID, ...styledProps }: BadgeProps) => ReactElement;
|
|
2032
|
-
|
|
2033
|
-
type ActionListItemProps = {
|
|
2034
|
-
title: string;
|
|
2035
|
-
description?: string;
|
|
2036
|
-
onClick?: (clickProps: {
|
|
2037
|
-
name: string;
|
|
2038
|
-
value?: boolean;
|
|
1924
|
+
onExpandChange?: ({ expandedIndex }: {
|
|
1925
|
+
expandedIndex: number;
|
|
2039
1926
|
}) => void;
|
|
2040
1927
|
/**
|
|
2041
|
-
*
|
|
2042
|
-
*/
|
|
2043
|
-
value: string;
|
|
2044
|
-
/**
|
|
2045
|
-
* Link to open when item is clicked.
|
|
2046
|
-
*/
|
|
2047
|
-
href?: string;
|
|
2048
|
-
/**
|
|
2049
|
-
* HTML target of the link
|
|
2050
|
-
*/
|
|
2051
|
-
target?: string;
|
|
2052
|
-
/**
|
|
2053
|
-
* Item that goes on left-side of item.
|
|
2054
|
-
*
|
|
2055
|
-
* Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`
|
|
2056
|
-
*
|
|
2057
|
-
* Will be overriden in multiselect
|
|
2058
|
-
*/
|
|
2059
|
-
leading?: React__default.ReactNode;
|
|
2060
|
-
/**
|
|
2061
|
-
* Item that goes on right-side of item.
|
|
2062
|
-
*
|
|
2063
|
-
* Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`
|
|
2064
|
-
*/
|
|
2065
|
-
trailing?: React__default.ReactNode;
|
|
2066
|
-
/**
|
|
2067
|
-
* Item that goes immediately next to the title.
|
|
2068
|
-
*
|
|
2069
|
-
* Valid elements - `<ActionListItemBadge />`, `<ActionListItemBadgeGroup />`
|
|
2070
|
-
*
|
|
2071
|
-
*/
|
|
2072
|
-
titleSuffix?: React__default.ReactElement;
|
|
2073
|
-
isDisabled?: boolean;
|
|
2074
|
-
intent?: Extract<FeedbackColors, 'negative'>;
|
|
2075
|
-
/**
|
|
2076
|
-
* Can be used in combination of `onClick` to highlight item as selected in Button Triggers.
|
|
1928
|
+
* Adds numeric index at the beginning of items
|
|
2077
1929
|
*
|
|
2078
|
-
*
|
|
1930
|
+
* @default false
|
|
2079
1931
|
*/
|
|
2080
|
-
|
|
1932
|
+
showNumberPrefix?: boolean;
|
|
2081
1933
|
/**
|
|
2082
|
-
*
|
|
1934
|
+
* Visual variant of AccordionItem
|
|
2083
1935
|
*
|
|
2084
|
-
* @
|
|
1936
|
+
* @default transparent
|
|
2085
1937
|
*/
|
|
2086
|
-
|
|
2087
|
-
} & TestID;
|
|
2088
|
-
type ActionListSectionProps = {
|
|
2089
|
-
title: string;
|
|
2090
|
-
children: React__default.ReactNode[] | React__default.ReactNode;
|
|
1938
|
+
variant?: AccordionVariantType;
|
|
2091
1939
|
/**
|
|
2092
|
-
*
|
|
2093
|
-
*
|
|
2094
|
-
* Should not be used by consumers (also won't work on web)
|
|
1940
|
+
* Size of the Accordion
|
|
2095
1941
|
*
|
|
2096
|
-
* @
|
|
1942
|
+
* @default large
|
|
2097
1943
|
*/
|
|
2098
|
-
|
|
1944
|
+
size?: 'large' | 'medium';
|
|
2099
1945
|
/**
|
|
2100
|
-
*
|
|
2101
|
-
*
|
|
2102
|
-
* @private
|
|
1946
|
+
* Accepts `AccordionItem` child nodes
|
|
2103
1947
|
*/
|
|
2104
|
-
|
|
2105
|
-
} & TestID;
|
|
2106
|
-
declare const ActionListSection: ({ title, children, testID, _hideDivider, _sectionChildValues, }: ActionListSectionProps) => React__default.ReactElement;
|
|
2107
|
-
declare const ActionListItemIcon: ({ icon }: {
|
|
2108
|
-
icon: IconComponent;
|
|
2109
|
-
}) => React__default.ReactElement;
|
|
2110
|
-
declare const ActionListItemBadgeGroup: ({ children, }: {
|
|
2111
|
-
children: React__default.ReactElement[] | React__default.ReactElement;
|
|
2112
|
-
}) => React__default.ReactElement;
|
|
2113
|
-
declare const ActionListItemBadge: (props: BadgeProps) => React__default.ReactElement;
|
|
2114
|
-
declare const ActionListItemText: ({ children, }: {
|
|
2115
|
-
children: StringChildrenType;
|
|
2116
|
-
}) => React__default.ReactElement;
|
|
2117
|
-
declare const ActionListItem: React__default.MemoExoticComponent<(props: ActionListItemProps) => React__default.ReactElement>;
|
|
1948
|
+
children: React__default.ReactElement | React__default.ReactElement[];
|
|
1949
|
+
} & TestID & StyledPropsBlade;
|
|
2118
1950
|
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
1951
|
+
/**
|
|
1952
|
+
* # Accordion
|
|
1953
|
+
*
|
|
1954
|
+
* An accordion is used to allow users to toggle between different content sections in a compact vertical stack.
|
|
1955
|
+
*
|
|
1956
|
+
* ## Usage
|
|
1957
|
+
*
|
|
1958
|
+
* ```jsx
|
|
1959
|
+
* <Accordion>
|
|
1960
|
+
* <AccordionItem>
|
|
1961
|
+
* <AccordionItemHeader title="Title" />
|
|
1962
|
+
* <AccordionItemBody>
|
|
1963
|
+
* <Text color="surface.text.gray.subtle">
|
|
1964
|
+
* Hello this is accordion body content
|
|
1965
|
+
* </Text>
|
|
1966
|
+
* </AccordionItemBody>
|
|
1967
|
+
* </AccordionItem>
|
|
1968
|
+
* <AccordionItem>
|
|
1969
|
+
* <AccordionItemHeader title="Title" />
|
|
1970
|
+
* <AccordionItemBody>
|
|
1971
|
+
* <Text color="surface.text.gray.subtle">
|
|
1972
|
+
* Hello this is accordion body content
|
|
1973
|
+
* </Text>
|
|
1974
|
+
* </AccordionItemBody>
|
|
1975
|
+
* </AccordionItem>
|
|
1976
|
+
* </Accordion>
|
|
1977
|
+
* ```
|
|
1978
|
+
*
|
|
1979
|
+
* Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs
|
|
1980
|
+
*
|
|
1981
|
+
*/
|
|
1982
|
+
declare const Accordion: ({ defaultExpandedIndex, expandedIndex, onExpandChange, showNumberPrefix, children, variant, size, testID, ...styledProps }: AccordionProps) => ReactElement;
|
|
2130
1983
|
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
type SecondaryActionLinkButton = {
|
|
2140
|
-
text: string;
|
|
2141
|
-
href: string;
|
|
2142
|
-
onClick?: () => void;
|
|
2143
|
-
target?: string;
|
|
2144
|
-
/**
|
|
2145
|
-
* When `target` is set to `_blank` this is automatically set to `noopener noreferrer`
|
|
2146
|
-
*/
|
|
2147
|
-
rel?: string;
|
|
2148
|
-
};
|
|
2149
|
-
type SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;
|
|
2150
|
-
type AlertProps = {
|
|
2151
|
-
/**
|
|
2152
|
-
* Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.
|
|
2153
|
-
*/
|
|
2154
|
-
description: ReactChild;
|
|
2155
|
-
/**
|
|
2156
|
-
* A brief heading
|
|
2157
|
-
*/
|
|
2158
|
-
title?: string;
|
|
2159
|
-
/**
|
|
2160
|
-
* Shows a dismiss button
|
|
2161
|
-
*
|
|
2162
|
-
* @default true
|
|
2163
|
-
*/
|
|
2164
|
-
isDismissible?: boolean;
|
|
2165
|
-
/**
|
|
2166
|
-
* A callback when the dismiss button is clicked
|
|
2167
|
-
*/
|
|
2168
|
-
onDismiss?: () => void;
|
|
2169
|
-
/**
|
|
2170
|
-
* Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.
|
|
2171
|
-
*
|
|
2172
|
-
* @default subtle
|
|
2173
|
-
*/
|
|
2174
|
-
emphasis?: SubtleOrIntense;
|
|
2175
|
-
/**
|
|
2176
|
-
* Makes the Alert span the entire container width, instead of the default max width of `584px`.
|
|
2177
|
-
* This also makes the alert borderless, useful for creating full bleed layouts.
|
|
2178
|
-
*
|
|
2179
|
-
* @default false
|
|
2180
|
-
*/
|
|
2181
|
-
isFullWidth?: boolean;
|
|
2182
|
-
/**
|
|
2183
|
-
* Sets the color tone
|
|
2184
|
-
*/
|
|
2185
|
-
color?: FeedbackColors;
|
|
2186
|
-
/**
|
|
2187
|
-
* Renders a primary action button and a secondary action link button
|
|
2188
|
-
*/
|
|
2189
|
-
actions?: {
|
|
2190
|
-
/**
|
|
2191
|
-
* Renders a button (should **always** be present if `secondary` action is being used)
|
|
2192
|
-
*/
|
|
2193
|
-
primary?: PrimaryAction;
|
|
2194
|
-
/**
|
|
2195
|
-
* Renders a Link button
|
|
2196
|
-
*/
|
|
2197
|
-
secondary?: SecondaryAction;
|
|
2198
|
-
};
|
|
2199
|
-
} & TestID & StyledPropsBlade;
|
|
2200
|
-
declare const Alert: ({ description, title, isDismissible, onDismiss, emphasis, isFullWidth, color, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
|
|
2201
|
-
|
|
2202
|
-
type AriaRoles = Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'> | 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'meter' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
|
|
2203
|
-
type AccessibilityProps = AriaAttributes;
|
|
2204
|
-
type AriaAttributes = {
|
|
2205
|
-
role: AriaRoles;
|
|
2206
|
-
/**
|
|
2207
|
-
* Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
|
|
2208
|
-
*/
|
|
2209
|
-
activeDescendant?: string;
|
|
2210
|
-
/**
|
|
2211
|
-
* Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
|
|
2212
|
-
*/
|
|
2213
|
-
atomic?: boolean;
|
|
2214
|
-
/**
|
|
2215
|
-
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
|
|
2216
|
-
*/
|
|
2217
|
-
autoComplete?: 'none' | 'inline' | 'list' | 'both';
|
|
2218
|
-
/**
|
|
2219
|
-
* Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
|
|
2220
|
-
*/
|
|
2221
|
-
busy?: boolean;
|
|
2222
|
-
/**
|
|
2223
|
-
* Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
|
|
2224
|
-
* @see aria-pressed @see aria-selected.
|
|
2225
|
-
*/
|
|
2226
|
-
checked?: boolean | 'mixed';
|
|
2227
|
-
/**
|
|
2228
|
-
* Defines the total number of columns in a table, grid, or treegrid.
|
|
2229
|
-
* @see aria-colindex.
|
|
2230
|
-
*/
|
|
2231
|
-
colCount?: number;
|
|
2232
|
-
/**
|
|
2233
|
-
* Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
|
|
2234
|
-
* @see aria-colcount @see aria-colspan.
|
|
2235
|
-
*/
|
|
2236
|
-
colIndex?: number;
|
|
2237
|
-
/**
|
|
2238
|
-
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
|
|
2239
|
-
* @see aria-colindex @see aria-rowspan.
|
|
2240
|
-
*/
|
|
2241
|
-
colSpan?: number;
|
|
2242
|
-
/**
|
|
2243
|
-
* Identifies the element (or elements) whose contents or presence are controlled by the current element.
|
|
2244
|
-
* @see aria-owns.
|
|
2245
|
-
*/
|
|
2246
|
-
controls?: string;
|
|
2247
|
-
/**
|
|
2248
|
-
* Indicates the element that represents the current item within a container or set of related elements.
|
|
2249
|
-
*/
|
|
2250
|
-
current?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
|
|
2251
|
-
/**
|
|
2252
|
-
* Identifies the element (or elements) that describes the object.
|
|
2253
|
-
* @see aria-labelledby
|
|
2254
|
-
*/
|
|
2255
|
-
describedBy?: string;
|
|
2256
|
-
/**
|
|
2257
|
-
* Identifies the element that provides a detailed, extended description for the object.
|
|
2258
|
-
* @see aria-describedby.
|
|
2259
|
-
*/
|
|
2260
|
-
details?: string;
|
|
2261
|
-
/**
|
|
2262
|
-
* Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
|
|
2263
|
-
* @see aria-hidden @see aria-readonly.
|
|
2264
|
-
*/
|
|
2265
|
-
disabled?: boolean;
|
|
2266
|
-
/**
|
|
2267
|
-
* Indicates what functions can be performed when a dragged object is released on the drop target.
|
|
2268
|
-
* @deprecated in ARIA 1.1
|
|
2269
|
-
*/
|
|
2270
|
-
dropEffect?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup';
|
|
2271
|
-
/**
|
|
2272
|
-
* Identifies the element that provides an error message for the object.
|
|
2273
|
-
* @see aria-invalid @see aria-describedby.
|
|
2274
|
-
*/
|
|
2275
|
-
errorMessage?: string;
|
|
2276
|
-
/**
|
|
2277
|
-
* Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
|
|
2278
|
-
*/
|
|
2279
|
-
expanded?: boolean;
|
|
2280
|
-
/**
|
|
2281
|
-
* Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
|
|
2282
|
-
* allows assistive technology to override the general default of reading in document source order.
|
|
2283
|
-
*/
|
|
2284
|
-
flowTo?: string;
|
|
2285
|
-
/**
|
|
2286
|
-
* Indicates an element's "grabbed" state in a drag-and-drop operation.
|
|
2287
|
-
* @deprecated in ARIA 1.1
|
|
2288
|
-
*/
|
|
2289
|
-
grabbed?: boolean;
|
|
2290
|
-
/**
|
|
2291
|
-
* Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
|
|
2292
|
-
*/
|
|
2293
|
-
hasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
2294
|
-
/**
|
|
2295
|
-
* Indicates whether the element is exposed to an accessibility API.
|
|
2296
|
-
* @see aria-disabled.
|
|
2297
|
-
*/
|
|
2298
|
-
hidden?: boolean;
|
|
2299
|
-
/**
|
|
2300
|
-
* Indicates the entered value does not conform to the format expected by the application.
|
|
2301
|
-
* @see aria-errormessage.
|
|
2302
|
-
*/
|
|
2303
|
-
invalid?: boolean | 'grammar' | 'spelling';
|
|
2304
|
-
/**
|
|
2305
|
-
* Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
|
|
2306
|
-
*/
|
|
2307
|
-
keyShortcuts?: string;
|
|
2308
|
-
/**
|
|
2309
|
-
* Defines a string value that labels the current element.
|
|
2310
|
-
* @see aria-labelledby.
|
|
2311
|
-
*/
|
|
2312
|
-
label?: string;
|
|
2313
|
-
/**
|
|
2314
|
-
* Identifies the element (or elements) that labels the current element.
|
|
2315
|
-
* @see aria-describedby.
|
|
2316
|
-
*/
|
|
2317
|
-
labelledBy?: string;
|
|
2318
|
-
/**
|
|
2319
|
-
* Defines the hierarchical level of an element within a structure.
|
|
2320
|
-
*/
|
|
2321
|
-
level?: number;
|
|
2322
|
-
/**
|
|
2323
|
-
* Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
|
|
2324
|
-
*/
|
|
2325
|
-
liveRegion?: 'off' | 'assertive' | 'polite';
|
|
2326
|
-
/**
|
|
2327
|
-
* Indicates whether an element is modal when displayed.
|
|
2328
|
-
*/
|
|
2329
|
-
modal?: boolean;
|
|
2330
|
-
/**
|
|
2331
|
-
* Indicates whether a text box accepts multiple lines of input or only a single line.
|
|
2332
|
-
*/
|
|
2333
|
-
multiline?: boolean;
|
|
2334
|
-
/**
|
|
2335
|
-
* Indicates that the user may select more than one item from the current selectable descendants.
|
|
2336
|
-
*/
|
|
2337
|
-
multiSelectable?: boolean;
|
|
2338
|
-
/**
|
|
2339
|
-
* Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
|
|
2340
|
-
*/
|
|
2341
|
-
orientation?: 'horizontal' | 'vertical';
|
|
2342
|
-
/**
|
|
2343
|
-
* Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
|
|
2344
|
-
* between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
|
|
2345
|
-
* @see aria-controls.
|
|
2346
|
-
*/
|
|
2347
|
-
owns?: string;
|
|
2348
|
-
/**
|
|
2349
|
-
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
|
|
2350
|
-
* A hint could be a sample value or a brief description of the expected format.
|
|
2351
|
-
*/
|
|
2352
|
-
placeholder?: string;
|
|
2353
|
-
/**
|
|
2354
|
-
* Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
|
|
2355
|
-
* @see aria-setsize.
|
|
2356
|
-
*/
|
|
2357
|
-
posInSet?: number;
|
|
2358
|
-
/**
|
|
2359
|
-
* Indicates the current "pressed" state of toggle buttons.
|
|
2360
|
-
* @see aria-checked @see aria-selected.
|
|
2361
|
-
*/
|
|
2362
|
-
pressed?: boolean | 'mixed';
|
|
2363
|
-
/**
|
|
2364
|
-
* Indicates that the element is not editable, but is otherwise operable.
|
|
2365
|
-
* @see aria-disabled.
|
|
2366
|
-
*/
|
|
2367
|
-
readOnly?: boolean;
|
|
2368
|
-
/**
|
|
2369
|
-
* Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
|
|
2370
|
-
* @see aria-atomic.
|
|
2371
|
-
*/
|
|
2372
|
-
relevant?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals';
|
|
2373
|
-
/**
|
|
2374
|
-
* Indicates that user input is required on the element before a form may be submitted.
|
|
2375
|
-
*/
|
|
2376
|
-
required?: boolean;
|
|
2377
|
-
/**
|
|
2378
|
-
* Defines a human-readable, author-localized description for the role of an element.
|
|
2379
|
-
*/
|
|
2380
|
-
roleDescription?: string;
|
|
2381
|
-
/**
|
|
2382
|
-
* Defines the total number of rows in a table, grid, or treegrid.
|
|
2383
|
-
* @see aria-rowindex.
|
|
2384
|
-
*/
|
|
2385
|
-
rowCount?: number;
|
|
2386
|
-
/**
|
|
2387
|
-
* Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
|
|
2388
|
-
* @see aria-rowcount @see aria-rowspan.
|
|
2389
|
-
*/
|
|
2390
|
-
rowIndex?: number;
|
|
2391
|
-
/**
|
|
2392
|
-
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
|
|
2393
|
-
* @see aria-rowindex @see aria-colspan.
|
|
2394
|
-
*/
|
|
2395
|
-
rowSpan?: number;
|
|
2396
|
-
/**
|
|
2397
|
-
* Indicates the current "selected" state of various widgets.
|
|
2398
|
-
* @see aria-checked @see aria-pressed.
|
|
2399
|
-
*/
|
|
2400
|
-
selected?: boolean;
|
|
2401
|
-
/**
|
|
2402
|
-
* Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
|
|
2403
|
-
* @see aria-posinset.
|
|
2404
|
-
*/
|
|
2405
|
-
setSize?: number;
|
|
2406
|
-
/**
|
|
2407
|
-
* Indicates if items in a table or grid are sorted in ascending or descending order.
|
|
2408
|
-
*/
|
|
2409
|
-
sort?: 'none' | 'ascending' | 'descending' | 'other';
|
|
2410
|
-
/**
|
|
2411
|
-
* Defines the maximum allowed value for a range widget.
|
|
2412
|
-
*/
|
|
2413
|
-
valueMax?: number;
|
|
2414
|
-
/**
|
|
2415
|
-
* Defines the minimum allowed value for a range widget.
|
|
2416
|
-
*/
|
|
2417
|
-
valueMin?: number;
|
|
2418
|
-
/**
|
|
2419
|
-
* Defines the current value for a range widget.
|
|
2420
|
-
* @see aria-valuetext.
|
|
2421
|
-
*/
|
|
2422
|
-
valueNow?: number;
|
|
2423
|
-
/**
|
|
2424
|
-
* Defines the human readable text alternative of aria-valuenow for a range widget.
|
|
2425
|
-
*/
|
|
2426
|
-
valueText?: string;
|
|
2427
|
-
};
|
|
2428
|
-
|
|
2429
|
-
type InteractiveText = DotNotationToken<Theme['colors']['interactive']['text']>;
|
|
2430
|
-
type SurfaceText = DotNotationToken<Theme['colors']['surface']['text']>;
|
|
2431
|
-
type FeedbackText = DotNotationToken<Theme['colors']['feedback']['text']>;
|
|
2432
|
-
type TextColors = `interactive.text.${InteractiveText}` | `surface.text.${SurfaceText}` | `feedback.text.${FeedbackText}`;
|
|
2433
|
-
type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div' | 'label';
|
|
2434
|
-
type BaseTextProps = {
|
|
2435
|
-
id?: string;
|
|
2436
|
-
color?: TextColors;
|
|
2437
|
-
fontFamily?: keyof Theme['typography']['fonts']['family'];
|
|
2438
|
-
fontSize?: keyof Theme['typography']['fonts']['size'];
|
|
2439
|
-
fontWeight?: keyof Theme['typography']['fonts']['weight'];
|
|
2440
|
-
fontStyle?: 'italic' | 'normal';
|
|
2441
|
-
textDecorationLine?: 'line-through' | 'none' | 'underline';
|
|
2442
|
-
lineHeight?: keyof Theme['typography']['lineHeights'];
|
|
2443
|
-
letterSpacing?: keyof Theme['typography']['letterSpacings'];
|
|
2444
|
-
wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
|
|
2445
|
-
opacity?: number;
|
|
2446
|
-
/**
|
|
2447
|
-
* Web only
|
|
2448
|
-
*/
|
|
2449
|
-
as?: As;
|
|
2450
|
-
textAlign?: 'center' | 'justify' | 'left' | 'right';
|
|
2451
|
-
truncateAfterLines?: number;
|
|
2452
|
-
className?: string;
|
|
2453
|
-
style?: React.CSSProperties;
|
|
2454
|
-
children: React.ReactNode;
|
|
2455
|
-
accessibilityProps?: Partial<AccessibilityProps>;
|
|
2456
|
-
/**
|
|
2457
|
-
* React Native only
|
|
2458
|
-
*/
|
|
2459
|
-
numberOfLines?: number;
|
|
2460
|
-
componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code' | 'display';
|
|
2461
|
-
} & TestID & StyledPropsBlade;
|
|
2462
|
-
type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
|
|
2463
|
-
|
|
2464
|
-
type AmountSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
|
|
2465
|
-
type AmountDisplayProps = {
|
|
2466
|
-
type?: 'display';
|
|
2467
|
-
size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
|
|
2468
|
-
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
|
|
2469
|
-
};
|
|
2470
|
-
type AmountHeadingProps = {
|
|
2471
|
-
type?: 'heading';
|
|
2472
|
-
size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
|
|
2473
|
-
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
|
|
2474
|
-
};
|
|
2475
|
-
type AmountBodyProps = {
|
|
2476
|
-
type?: 'body';
|
|
2477
|
-
size?: Extract<AmountSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
2478
|
-
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
|
|
2479
|
-
};
|
|
2480
|
-
type AmountTypeProps = AmountDisplayProps | AmountHeadingProps | AmountBodyProps;
|
|
2481
|
-
|
|
2482
|
-
type AmountCommonProps = {
|
|
2483
|
-
/**
|
|
2484
|
-
* The value to be rendered within the component.
|
|
2485
|
-
*
|
|
2486
|
-
*/
|
|
2487
|
-
value: number;
|
|
2488
|
-
/**
|
|
2489
|
-
* Sets the color of the amount.
|
|
2490
|
-
*
|
|
2491
|
-
* @default undefined
|
|
2492
|
-
*/
|
|
2493
|
-
color?: BaseTextProps['color'];
|
|
2494
|
-
/**
|
|
2495
|
-
* Indicates what the suffix of amount should be
|
|
2496
|
-
*
|
|
2497
|
-
* @default 'decimals'
|
|
2498
|
-
*/
|
|
2499
|
-
suffix?: 'decimals' | 'none' | 'humanize';
|
|
2500
|
-
/**
|
|
2501
|
-
* Makes the currency indicator(currency symbol/code) and decimal digits small and faded
|
|
2502
|
-
*
|
|
2503
|
-
* @default true
|
|
2504
|
-
*/
|
|
2505
|
-
isAffixSubtle?: true | false;
|
|
2506
|
-
/**
|
|
2507
|
-
* Determines the visual representation of the currency, choose between displaying the currency symbol or code.
|
|
2508
|
-
*
|
|
2509
|
-
* Note: Currency symbol and code is determined by the locale set in user's browser or set via @razorpay/i18nify-react library.
|
|
2510
|
-
*
|
|
2511
|
-
* @default 'currency-symbol'
|
|
2512
|
-
*/
|
|
2513
|
-
currencyIndicator?: 'currency-symbol' | 'currency-code';
|
|
2514
|
-
/**
|
|
2515
|
-
* The currency of the amount. Note that this component
|
|
2516
|
-
* only displays the provided value in the specified currency, it does not perform any currency conversion.
|
|
2517
|
-
*
|
|
2518
|
-
* @default 'INR'
|
|
2519
|
-
* */
|
|
2520
|
-
currency?: CurrencyCodeType;
|
|
2521
|
-
/**
|
|
2522
|
-
* If true, the amount text will have a line through it.
|
|
2523
|
-
*
|
|
2524
|
-
* @default false
|
|
2525
|
-
*/
|
|
2526
|
-
isStrikethrough?: boolean;
|
|
2527
|
-
} & TestID & StyledPropsBlade;
|
|
2528
|
-
type AmountProps = AmountTypeProps & AmountCommonProps;
|
|
2529
|
-
declare const Amount: ({ value, suffix, type, size, weight, isAffixSubtle, isStrikethrough, color, currencyIndicator, currency, testID, ...styledProps }: AmountProps) => ReactElement;
|
|
2530
|
-
|
|
2531
|
-
type SnapPoints = [number, number, number];
|
|
2532
|
-
|
|
2533
|
-
type BaseHeaderProps = {
|
|
2534
|
-
title?: string;
|
|
2535
|
-
subtitle?: string;
|
|
2536
|
-
/**
|
|
2537
|
-
* Leading part of the header placed at the left most side of the header
|
|
2538
|
-
*/
|
|
2539
|
-
leading?: React__default.ReactNode;
|
|
2540
|
-
/**
|
|
2541
|
-
* Trailing part of the header placed at the right most side of the header
|
|
2542
|
-
*/
|
|
2543
|
-
trailing?: React__default.ReactNode;
|
|
2544
|
-
/**
|
|
2545
|
-
* Placed adjacent to the title text
|
|
2546
|
-
*/
|
|
2547
|
-
titleSuffix?: React__default.ReactNode;
|
|
2548
|
-
/**
|
|
2549
|
-
* @default true
|
|
2550
|
-
*/
|
|
2551
|
-
showDivider?: boolean;
|
|
2552
|
-
/**
|
|
2553
|
-
* @default false
|
|
2554
|
-
*/
|
|
2555
|
-
showBackButton?: boolean;
|
|
2556
|
-
/**
|
|
2557
|
-
* @default true
|
|
2558
|
-
*/
|
|
2559
|
-
showCloseButton?: boolean;
|
|
2560
|
-
onCloseButtonClick?: () => void;
|
|
2561
|
-
onBackButtonClick?: () => void;
|
|
2562
|
-
closeButtonRef?: React__default.MutableRefObject<any>;
|
|
2563
|
-
backButtonRef?: React__default.MutableRefObject<any>;
|
|
2564
|
-
metaComponentName?: string;
|
|
2565
|
-
/**
|
|
2566
|
-
* inner child of BottomSheetHeader. Meant to be used for AutoComplete only
|
|
2567
|
-
*/
|
|
2568
|
-
children?: React__default.ReactElement;
|
|
2569
|
-
} & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'> & TestID;
|
|
2570
|
-
|
|
2571
|
-
type BaseFooterProps = {
|
|
2572
|
-
children: React__default.ReactNode;
|
|
2573
|
-
metaComponentName?: string;
|
|
2574
|
-
showDivider?: boolean;
|
|
2575
|
-
} & TestID;
|
|
2576
|
-
|
|
2577
|
-
type BottomSheetProps = {
|
|
2578
|
-
/**
|
|
2579
|
-
* Accepts BottomSheetHeader, BottomSheetFooter, BottomSheetBody
|
|
2580
|
-
*/
|
|
2581
|
-
children: React.ReactNode;
|
|
2582
|
-
/**
|
|
2583
|
-
* SnapPoints in which the bottom sheeet will rest on.
|
|
2584
|
-
* Accepts numbers between 0 & 1 which maps to the total view height of the screen, 0.5 means 50% of screen height.
|
|
2585
|
-
*
|
|
2586
|
-
* @default [0.35, 0.5, 0.85]
|
|
2587
|
-
*/
|
|
2588
|
-
snapPoints?: SnapPoints;
|
|
2589
|
-
/**
|
|
2590
|
-
* Called when the bottom sheet is closed, either by user state, hitting `esc` or tapping backdrop
|
|
2591
|
-
*/
|
|
2592
|
-
onDismiss?: () => void;
|
|
2593
|
-
/**
|
|
2594
|
-
* Toggles bottom sheet state
|
|
2595
|
-
*
|
|
2596
|
-
* @default false
|
|
2597
|
-
*/
|
|
2598
|
-
isOpen?: boolean;
|
|
2599
|
-
/**
|
|
2600
|
-
* Ref element you want to get keyboard focus when opening the sheet
|
|
2601
|
-
* By default the initial focus will go to the close button
|
|
2602
|
-
*/
|
|
2603
|
-
initialFocusRef?: React.MutableRefObject<any>;
|
|
2604
|
-
/**
|
|
2605
|
-
* Sets the z-index of the bottom sheet
|
|
2606
|
-
* Note: when using stacked bottom sheet make sure all the bottom sheets have the same zIndex
|
|
2607
|
-
* @default 100
|
|
2608
|
-
*/
|
|
2609
|
-
zIndex?: number;
|
|
2610
|
-
};
|
|
2611
|
-
type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick' | 'children'> & {
|
|
2612
|
-
/**
|
|
2613
|
-
* Trailing element to be rendered in the Header
|
|
2614
|
-
*
|
|
2615
|
-
* Accepts one of `Badge`, `Text`, `Button`, `Link`
|
|
2616
|
-
*/
|
|
2617
|
-
trailing?: BaseHeaderProps['trailing'];
|
|
2618
|
-
/**
|
|
2619
|
-
* Renders an adornment besides the title
|
|
2620
|
-
*
|
|
2621
|
-
* Accepts `Counter`
|
|
2622
|
-
*/
|
|
2623
|
-
titleSuffix?: BaseHeaderProps['titleSuffix'];
|
|
2624
|
-
};
|
|
2625
|
-
type BottomSheetFooterProps = Pick<BaseFooterProps, 'children'>;
|
|
2626
|
-
type BottomSheetBodyProps = {
|
|
2627
|
-
children: React.ReactNode;
|
|
2628
|
-
/**
|
|
2629
|
-
* Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
|
|
2630
|
-
* @default `spacing.5`
|
|
2631
|
-
*
|
|
2632
|
-
* **Links:**
|
|
2633
|
-
* - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
|
|
2634
|
-
*/
|
|
2635
|
-
padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.5'>;
|
|
2636
|
-
};
|
|
2637
|
-
|
|
2638
|
-
declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, children, }: BottomSheetHeaderProps) => React__default.ReactElement;
|
|
2639
|
-
|
|
2640
|
-
declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__default.ReactElement;
|
|
2641
|
-
|
|
2642
|
-
declare const BottomSheetBody: ({ children, padding, }: BottomSheetBodyProps) => React__default.ReactElement;
|
|
2643
|
-
|
|
2644
|
-
declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, zIndex, }: BottomSheetProps) => React__default.ReactElement;
|
|
2645
|
-
|
|
2646
|
-
type BaseLinkCommonProps = {
|
|
2647
|
-
color?: 'primary' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
|
|
2648
|
-
icon?: IconComponent;
|
|
2649
|
-
iconPosition?: 'left' | 'right';
|
|
2650
|
-
onClick?: (event: SyntheticEvent) => void;
|
|
2651
|
-
onBlur?: Platform.Select<{
|
|
2652
|
-
native: (event: GestureResponderEvent) => void;
|
|
2653
|
-
web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
|
|
2654
|
-
}>;
|
|
2655
|
-
onMouseLeave?: Platform.Select<{
|
|
2656
|
-
native: (event: GestureResponderEvent) => void;
|
|
2657
|
-
web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
2658
|
-
}>;
|
|
2659
|
-
onKeyDown?: Platform.Select<{
|
|
2660
|
-
native: (event: GestureResponderEvent) => void;
|
|
2661
|
-
web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
|
|
2662
|
-
}>;
|
|
2663
|
-
accessibilityProps?: Partial<AccessibilityProps>;
|
|
2664
|
-
/**
|
|
2665
|
-
* Sets the size of the link
|
|
2666
|
-
*
|
|
2667
|
-
* @default medium
|
|
2668
|
-
*/
|
|
2669
|
-
size?: Extract<BaseTextSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
2670
|
-
/**
|
|
2671
|
-
* Defines how far your touch can start away from the link. This is a react-native only prop and has no effect on web.
|
|
2672
|
-
*/
|
|
2673
|
-
hitSlop?: {
|
|
2674
|
-
top?: number;
|
|
2675
|
-
right?: number;
|
|
2676
|
-
bottom?: number;
|
|
2677
|
-
left?: number;
|
|
2678
|
-
} | number;
|
|
2679
|
-
/**
|
|
2680
|
-
* The title of the link which is displayed as a tooltip. This is a web only prop and has no effect on react-native.
|
|
2681
|
-
*/
|
|
2682
|
-
htmlTitle?: string;
|
|
2683
|
-
opacity?: number;
|
|
2684
|
-
} & TestID & StyledPropsBlade & Omit<BladeCommonEvents, 'onBlur' | 'onMouseLeave'>;
|
|
2685
|
-
type BaseLinkWithoutIconProps = BaseLinkCommonProps & {
|
|
2686
|
-
icon?: undefined;
|
|
2687
|
-
children: StringChildrenType;
|
|
2688
|
-
};
|
|
2689
|
-
type BaseLinkWithIconProps = BaseLinkCommonProps & {
|
|
2690
|
-
icon: IconComponent;
|
|
2691
|
-
children?: StringChildrenType;
|
|
2692
|
-
};
|
|
2693
|
-
type BaseLinkPropsWithOrWithoutIcon = BaseLinkWithIconProps | BaseLinkWithoutIconProps;
|
|
2694
|
-
type BaseLinkAnchorVariantProps = BaseLinkPropsWithOrWithoutIcon & {
|
|
2695
|
-
variant?: 'anchor';
|
|
2696
|
-
href?: string;
|
|
2697
|
-
target?: string;
|
|
2698
|
-
rel?: string;
|
|
2699
|
-
isDisabled?: undefined;
|
|
2700
|
-
};
|
|
2701
|
-
type BaseLinkButtonVariantProps = BaseLinkPropsWithOrWithoutIcon & {
|
|
2702
|
-
variant?: 'button';
|
|
2703
|
-
isDisabled?: boolean;
|
|
2704
|
-
href?: undefined;
|
|
2705
|
-
target?: undefined;
|
|
2706
|
-
rel?: undefined;
|
|
2707
|
-
};
|
|
2708
|
-
type BaseLinkProps = BaseLinkAnchorVariantProps | BaseLinkButtonVariantProps;
|
|
2709
|
-
|
|
2710
|
-
type LinkCommonProps = {
|
|
2711
|
-
variant?: 'anchor' | 'button';
|
|
2712
|
-
icon?: IconComponent;
|
|
2713
|
-
color?: 'primary' | 'white' | 'neutral';
|
|
2714
|
-
iconPosition?: 'left' | 'right';
|
|
2715
|
-
isDisabled?: boolean;
|
|
2716
|
-
onClick?: (event: SyntheticEvent) => void;
|
|
2717
|
-
href?: string;
|
|
2718
|
-
target?: string;
|
|
2719
|
-
accessibilityLabel?: string;
|
|
2720
|
-
/**
|
|
2721
|
-
* It is exposed for internal usage with tooltip.
|
|
2722
|
-
*
|
|
2723
|
-
* @private
|
|
2724
|
-
*/
|
|
2725
|
-
'aria-describedby'?: string;
|
|
2726
|
-
/**
|
|
2727
|
-
* Sets the size of the link
|
|
2728
|
-
*
|
|
2729
|
-
* @default medium
|
|
2730
|
-
*/
|
|
2731
|
-
size?: BaseLinkProps['size'];
|
|
2732
|
-
} & TestID & StyledPropsBlade & BladeCommonEvents & Platform.Select<{
|
|
2733
|
-
native: {
|
|
2734
|
-
/**
|
|
2735
|
-
* Defines how far your touch can start away from the link
|
|
2736
|
-
*/
|
|
2737
|
-
hitSlop?: {
|
|
2738
|
-
top?: number;
|
|
2739
|
-
right?: number;
|
|
2740
|
-
bottom?: number;
|
|
2741
|
-
left?: number;
|
|
2742
|
-
} | number;
|
|
2743
|
-
/**
|
|
2744
|
-
* This is a web only prop and has no effect on react-native.
|
|
2745
|
-
*/
|
|
2746
|
-
htmlTitle?: undefined;
|
|
2747
|
-
};
|
|
2748
|
-
web: {
|
|
2749
|
-
/**
|
|
2750
|
-
* This is a react-native only prop and has no effect on web.
|
|
2751
|
-
*/
|
|
2752
|
-
hitSlop?: undefined;
|
|
2753
|
-
/**
|
|
2754
|
-
* The title of the link which is displayed as a tooltip.
|
|
2755
|
-
*/
|
|
2756
|
-
htmlTitle?: string;
|
|
2757
|
-
};
|
|
2758
|
-
}>;
|
|
2759
|
-
type LinkWithoutIconProps = LinkCommonProps & {
|
|
2760
|
-
icon?: undefined;
|
|
2761
|
-
children: StringChildrenType;
|
|
2762
|
-
};
|
|
2763
|
-
type LinkWithIconProps = LinkCommonProps & {
|
|
2764
|
-
icon: IconComponent;
|
|
2765
|
-
children?: StringChildrenType;
|
|
2766
|
-
};
|
|
2767
|
-
type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
|
|
2768
|
-
type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
|
|
2769
|
-
variant?: 'anchor';
|
|
2770
|
-
href?: string;
|
|
2771
|
-
target?: string;
|
|
2772
|
-
rel?: string;
|
|
2773
|
-
isDisabled?: undefined;
|
|
2774
|
-
};
|
|
2775
|
-
type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
|
|
2776
|
-
variant?: 'button';
|
|
2777
|
-
isDisabled?: boolean;
|
|
2778
|
-
href?: undefined;
|
|
2779
|
-
target?: undefined;
|
|
2780
|
-
rel?: undefined;
|
|
2781
|
-
};
|
|
2782
|
-
type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
|
|
2783
|
-
declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<BladeElementRef>>;
|
|
2784
|
-
|
|
2785
|
-
type BreadcrumbProps = StyledPropsBlade & {
|
|
2786
|
-
/**
|
|
2787
|
-
* Size of the Breadcrumb
|
|
2788
|
-
*
|
|
2789
|
-
* @default medium
|
|
2790
|
-
*/
|
|
2791
|
-
size?: 'small' | 'medium' | 'large';
|
|
2792
|
-
/**
|
|
2793
|
-
* Color of the Breadcrumb
|
|
2794
|
-
*
|
|
2795
|
-
* @default neutral
|
|
2796
|
-
*/
|
|
2797
|
-
color?: 'neutral' | 'primary' | 'white';
|
|
2798
|
-
/**
|
|
2799
|
-
* Content of the Breadcrumb, accepts BreadcrumbItem
|
|
2800
|
-
*/
|
|
2801
|
-
children: React.ReactNode;
|
|
2802
|
-
/**
|
|
2803
|
-
* Whether to show the last separator
|
|
2804
|
-
*/
|
|
2805
|
-
showLastSeparator?: boolean;
|
|
2806
|
-
/**
|
|
2807
|
-
* aria-label for breadcrumb
|
|
2808
|
-
*/
|
|
2809
|
-
accessibilityLabel?: string;
|
|
2810
|
-
};
|
|
2811
|
-
type BreadcrumbItemProps = {
|
|
2812
|
-
/**
|
|
2813
|
-
* Href of the BreadcrumbItem
|
|
2814
|
-
*/
|
|
2815
|
-
href: string;
|
|
2816
|
-
/**
|
|
2817
|
-
* Function to be called on click of the BreadcrumbItem,
|
|
2818
|
-
*
|
|
2819
|
-
* This can be used to integrate with routing libraries like `react-router-dom`
|
|
2820
|
-
*/
|
|
2821
|
-
onClick?: LinkProps['onClick'];
|
|
2822
|
-
/**
|
|
2823
|
-
* Whether the BreadcrumbItem is the current page,
|
|
2824
|
-
* Sets the aria-current attribute to `page`
|
|
2825
|
-
*
|
|
2826
|
-
* @default false
|
|
2827
|
-
*/
|
|
2828
|
-
isCurrentPage?: boolean;
|
|
2829
|
-
/**
|
|
2830
|
-
* Content of the BreadcrumbItem
|
|
2831
|
-
*/
|
|
2832
|
-
children?: StringChildrenType;
|
|
2833
|
-
/**
|
|
2834
|
-
* Icon to be shown before the BreadcrumbItem
|
|
2835
|
-
*/
|
|
2836
|
-
icon?: IconComponent;
|
|
2837
|
-
/**
|
|
2838
|
-
* Accessibility label for the BreadcrumbItem, can be used in icon only variant
|
|
2839
|
-
*/
|
|
2840
|
-
accessibilityLabel?: string;
|
|
2841
|
-
};
|
|
2842
|
-
|
|
2843
|
-
declare const Breadcrumb: ({ size, color, showLastSeparator, accessibilityLabel, children, ...styledProps }: BreadcrumbProps) => React__default.ReactElement;
|
|
2844
|
-
|
|
2845
|
-
declare const BreadcrumbItem: ({ children, href, icon: Icon, isCurrentPage, onClick, accessibilityLabel, }: BreadcrumbItemProps) => React__default.ReactElement;
|
|
2846
|
-
|
|
2847
|
-
declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps & MarginProps & {
|
|
2848
|
-
width: SpacingValueType | {
|
|
2849
|
-
readonly base?: SpacingValueType | undefined;
|
|
2850
|
-
readonly xs?: SpacingValueType | undefined;
|
|
2851
|
-
readonly s?: SpacingValueType | undefined;
|
|
2852
|
-
readonly m?: SpacingValueType | undefined;
|
|
2853
|
-
readonly l?: SpacingValueType | undefined;
|
|
2854
|
-
readonly xl?: SpacingValueType | undefined;
|
|
1984
|
+
declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps & MarginProps & {
|
|
1985
|
+
width: SpacingValueType | {
|
|
1986
|
+
readonly base?: SpacingValueType | undefined;
|
|
1987
|
+
readonly xs?: SpacingValueType | undefined;
|
|
1988
|
+
readonly s?: SpacingValueType | undefined;
|
|
1989
|
+
readonly m?: SpacingValueType | undefined;
|
|
1990
|
+
readonly l?: SpacingValueType | undefined;
|
|
1991
|
+
readonly xl?: SpacingValueType | undefined;
|
|
2855
1992
|
};
|
|
2856
1993
|
display?: csstype.Property.Display | {
|
|
2857
1994
|
readonly base?: csstype.Property.Display | undefined;
|
|
@@ -3341,47 +2478,998 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
|
|
|
3341
2478
|
readonly l?: csstype.Property.BackgroundPosition<string | number> | undefined;
|
|
3342
2479
|
readonly xl?: csstype.Property.BackgroundPosition<string | number> | undefined;
|
|
3343
2480
|
} | undefined;
|
|
3344
|
-
borderColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
|
|
3345
|
-
readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
3346
|
-
readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
3347
|
-
readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
3348
|
-
readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
3349
|
-
readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
3350
|
-
readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
2481
|
+
borderColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
|
|
2482
|
+
readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
2483
|
+
readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
2484
|
+
readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
2485
|
+
readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
2486
|
+
readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
2487
|
+
readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
|
|
2488
|
+
};
|
|
2489
|
+
borderRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
|
|
2490
|
+
readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
|
|
2491
|
+
readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
|
|
2492
|
+
readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
|
|
2493
|
+
readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
|
|
2494
|
+
readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
|
|
2495
|
+
readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
|
|
2496
|
+
};
|
|
2497
|
+
borderWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
|
|
2498
|
+
readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
|
|
2499
|
+
readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
|
|
2500
|
+
readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
|
|
2501
|
+
readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
|
|
2502
|
+
readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
|
|
2503
|
+
readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
|
|
2504
|
+
};
|
|
2505
|
+
__brand__?: "platform-web" | {
|
|
2506
|
+
readonly base?: "platform-web" | undefined;
|
|
2507
|
+
readonly xs?: "platform-web" | undefined;
|
|
2508
|
+
readonly s?: "platform-web" | undefined;
|
|
2509
|
+
readonly m?: "platform-web" | undefined;
|
|
2510
|
+
readonly l?: "platform-web" | undefined;
|
|
2511
|
+
readonly xl?: "platform-web" | undefined;
|
|
2512
|
+
} | undefined;
|
|
2513
|
+
} & MakeObjectResponsive<{
|
|
2514
|
+
backgroundColor: "transparent" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense";
|
|
2515
|
+
}, "backgroundColor"> & {
|
|
2516
|
+
as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
|
|
2517
|
+
} & {
|
|
2518
|
+
children?: React__default.ReactNode | React__default.ReactNode[];
|
|
2519
|
+
tabIndex?: number | undefined;
|
|
2520
|
+
id?: string | undefined;
|
|
2521
|
+
} & TestID> & React__default.RefAttributes<BoxRefType>>;
|
|
2522
|
+
|
|
2523
|
+
type BaseHeaderProps = {
|
|
2524
|
+
title?: string;
|
|
2525
|
+
subtitle?: string;
|
|
2526
|
+
/**
|
|
2527
|
+
* Leading part of the header placed at the left most side of the header
|
|
2528
|
+
*/
|
|
2529
|
+
leading?: React__default.ReactNode;
|
|
2530
|
+
/**
|
|
2531
|
+
* Trailing part of the header placed at the right most side of the header
|
|
2532
|
+
*/
|
|
2533
|
+
trailing?: React__default.ReactNode;
|
|
2534
|
+
/**
|
|
2535
|
+
* Placed adjacent to the title text
|
|
2536
|
+
*/
|
|
2537
|
+
titleSuffix?: React__default.ReactNode;
|
|
2538
|
+
/**
|
|
2539
|
+
* @default true
|
|
2540
|
+
*/
|
|
2541
|
+
showDivider?: boolean;
|
|
2542
|
+
/**
|
|
2543
|
+
* @default false
|
|
2544
|
+
*/
|
|
2545
|
+
showBackButton?: boolean;
|
|
2546
|
+
/**
|
|
2547
|
+
* Slot for rendering any trailing interaction element into BaseHeader.
|
|
2548
|
+
*
|
|
2549
|
+
* E.g. Used in accordion to render CollapsibleChevronIcon
|
|
2550
|
+
*/
|
|
2551
|
+
trailingInteractionElement?: React__default.ReactNode;
|
|
2552
|
+
/**
|
|
2553
|
+
* Decides size of the Header
|
|
2554
|
+
*/
|
|
2555
|
+
size?: 'large' | 'medium';
|
|
2556
|
+
/**
|
|
2557
|
+
* @default true
|
|
2558
|
+
*/
|
|
2559
|
+
showCloseButton?: boolean;
|
|
2560
|
+
/**
|
|
2561
|
+
* Disabled state of BaseHeader
|
|
2562
|
+
*
|
|
2563
|
+
* @default false
|
|
2564
|
+
*/
|
|
2565
|
+
isDisabled?: boolean;
|
|
2566
|
+
paddingX?: BoxProps['paddingX'];
|
|
2567
|
+
marginY?: BoxProps['marginY'];
|
|
2568
|
+
onCloseButtonClick?: () => void;
|
|
2569
|
+
onBackButtonClick?: () => void;
|
|
2570
|
+
closeButtonRef?: React__default.MutableRefObject<any>;
|
|
2571
|
+
backButtonRef?: React__default.MutableRefObject<any>;
|
|
2572
|
+
metaComponentName?: string;
|
|
2573
|
+
/**
|
|
2574
|
+
* inner child of BottomSheetHeader. Meant to be used for AutoComplete only
|
|
2575
|
+
*/
|
|
2576
|
+
children?: React__default.ReactElement | React__default.ReactElement[];
|
|
2577
|
+
} & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'> & TestID;
|
|
2578
|
+
|
|
2579
|
+
declare const AccordionItemHeader: ({ title, subtitle, leading, children, trailing, titleSuffix, }: Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'children' | 'trailing' | 'titleSuffix'>) => React.ReactElement;
|
|
2580
|
+
|
|
2581
|
+
declare const AccordionItemBody: ({ children, _description, }: {
|
|
2582
|
+
children?: React.ReactNode | StringChildrenType;
|
|
2583
|
+
_description?: string | undefined;
|
|
2584
|
+
}) => React.ReactElement;
|
|
2585
|
+
|
|
2586
|
+
type AccordionItemProps = {
|
|
2587
|
+
/**
|
|
2588
|
+
* Title text content
|
|
2589
|
+
*
|
|
2590
|
+
* @deprecated Use AccordionItemHeader and AccordionItemBody
|
|
2591
|
+
*
|
|
2592
|
+
* Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API
|
|
2593
|
+
*/
|
|
2594
|
+
title?: string;
|
|
2595
|
+
/**
|
|
2596
|
+
* Body text content
|
|
2597
|
+
*
|
|
2598
|
+
* @deprecated Use AccordionItemHeader and AccordionItemBody
|
|
2599
|
+
*
|
|
2600
|
+
* Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API
|
|
2601
|
+
*/
|
|
2602
|
+
description?: string;
|
|
2603
|
+
/**
|
|
2604
|
+
* Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)
|
|
2605
|
+
*
|
|
2606
|
+
* @deprecated Use `leading={<StarIcon size="large" />}` on AccordionItemHeader instead
|
|
2607
|
+
*
|
|
2608
|
+
* Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API
|
|
2609
|
+
*/
|
|
2610
|
+
icon?: IconComponent;
|
|
2611
|
+
/**
|
|
2612
|
+
* Slot, renders any custom content
|
|
2613
|
+
*/
|
|
2614
|
+
children?: ReactNode | ReactNode[];
|
|
2615
|
+
/**
|
|
2616
|
+
* Disabled state of the item
|
|
2617
|
+
*
|
|
2618
|
+
* @default false
|
|
2619
|
+
*/
|
|
2620
|
+
isDisabled?: boolean;
|
|
2621
|
+
/**
|
|
2622
|
+
* **Internal:** used for determining numbering, you don't need to pass this,
|
|
2623
|
+
* instead pass `showNumberPrefix` to root `Accordion`
|
|
2624
|
+
*/
|
|
2625
|
+
_index?: number;
|
|
2626
|
+
} & TestID;
|
|
2627
|
+
declare const AccordionItem: ({ title, description, icon, children, isDisabled, _index, testID, }: AccordionItemProps) => ReactElement;
|
|
2628
|
+
|
|
2629
|
+
type ActionListProps = {
|
|
2630
|
+
children: React__default.ReactNode[];
|
|
2631
|
+
} & TestID;
|
|
2632
|
+
/**
|
|
2633
|
+
* ### ActionList
|
|
2634
|
+
*
|
|
2635
|
+
* List of multiple actionable items. Can be used as menu items inside `Dropdown`,
|
|
2636
|
+
* `BottomSheet` and as selectable items when combined with `SelectInput`
|
|
2637
|
+
*
|
|
2638
|
+
* #### Usage
|
|
2639
|
+
*
|
|
2640
|
+
* ```jsx
|
|
2641
|
+
* <Dropdown>
|
|
2642
|
+
* <SelectInput label="Select Action" />
|
|
2643
|
+
* <DropdownOverlay>
|
|
2644
|
+
* <DropdownHeader title="Header Title" />
|
|
2645
|
+
* <ActionList>
|
|
2646
|
+
* <ActionListItem
|
|
2647
|
+
* title="Home"
|
|
2648
|
+
* value="home"
|
|
2649
|
+
* leading={<ActionListItemIcon icon={HomeIcon} />}
|
|
2650
|
+
* />
|
|
2651
|
+
* <ActionListItem
|
|
2652
|
+
* title="Pricing"
|
|
2653
|
+
* value="pricing"
|
|
2654
|
+
* leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
|
|
2655
|
+
* />
|
|
2656
|
+
* </ActionList>
|
|
2657
|
+
* <DropdownFooter><Button>Apply</Button></DropdownFooter>
|
|
2658
|
+
* </DropdownOverlay>
|
|
2659
|
+
* </Dropdown>
|
|
2660
|
+
* ```
|
|
2661
|
+
*
|
|
2662
|
+
*/
|
|
2663
|
+
declare const ActionList: React__default.MemoExoticComponent<({ children, testID }: ActionListProps) => React__default.ReactElement>;
|
|
2664
|
+
|
|
2665
|
+
type BadgeProps = {
|
|
2666
|
+
/**
|
|
2667
|
+
* Sets the label for the badge.
|
|
2668
|
+
*
|
|
2669
|
+
*/
|
|
2670
|
+
children: StringChildrenType;
|
|
2671
|
+
/**
|
|
2672
|
+
* Sets the color of the badge.
|
|
2673
|
+
*
|
|
2674
|
+
* @default 'neutral'
|
|
2675
|
+
*/
|
|
2676
|
+
color?: FeedbackColors | 'primary';
|
|
2677
|
+
/**
|
|
2678
|
+
* Sets the contrast of the badge.
|
|
2679
|
+
*
|
|
2680
|
+
* @default 'subtle'
|
|
2681
|
+
*/
|
|
2682
|
+
emphasis?: SubtleOrIntense;
|
|
2683
|
+
/**
|
|
2684
|
+
* Sets the size of the badge.
|
|
2685
|
+
*
|
|
2686
|
+
* @default 'medium'
|
|
2687
|
+
*/
|
|
2688
|
+
size?: 'small' | 'medium' | 'large';
|
|
2689
|
+
/**
|
|
2690
|
+
* Icon to be displayed in the badge.
|
|
2691
|
+
* Accepts a component of type `IconComponent` from Blade.
|
|
2692
|
+
*
|
|
2693
|
+
*/
|
|
2694
|
+
icon?: IconComponent;
|
|
2695
|
+
} & TestID & StyledPropsBlade;
|
|
2696
|
+
declare const Badge: ({ children, emphasis, icon: Icon, size, color, testID, ...styledProps }: BadgeProps) => ReactElement;
|
|
2697
|
+
|
|
2698
|
+
type ActionListItemProps = {
|
|
2699
|
+
title: string;
|
|
2700
|
+
description?: string;
|
|
2701
|
+
onClick?: (clickProps: {
|
|
2702
|
+
name: string;
|
|
2703
|
+
value?: boolean;
|
|
2704
|
+
}) => void;
|
|
2705
|
+
/**
|
|
2706
|
+
* value that you get from `onChange` event on SelectInput or in form submissions.
|
|
2707
|
+
*/
|
|
2708
|
+
value: string;
|
|
2709
|
+
/**
|
|
2710
|
+
* Link to open when item is clicked.
|
|
2711
|
+
*/
|
|
2712
|
+
href?: string;
|
|
2713
|
+
/**
|
|
2714
|
+
* HTML target of the link
|
|
2715
|
+
*/
|
|
2716
|
+
target?: string;
|
|
2717
|
+
/**
|
|
2718
|
+
* Item that goes on left-side of item.
|
|
2719
|
+
*
|
|
2720
|
+
* Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`
|
|
2721
|
+
*
|
|
2722
|
+
* Will be overriden in multiselect
|
|
2723
|
+
*/
|
|
2724
|
+
leading?: React__default.ReactNode;
|
|
2725
|
+
/**
|
|
2726
|
+
* Item that goes on right-side of item.
|
|
2727
|
+
*
|
|
2728
|
+
* Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`
|
|
2729
|
+
*/
|
|
2730
|
+
trailing?: React__default.ReactNode;
|
|
2731
|
+
/**
|
|
2732
|
+
* Item that goes immediately next to the title.
|
|
2733
|
+
*
|
|
2734
|
+
* Valid elements - `<ActionListItemBadge />`, `<ActionListItemBadgeGroup />`
|
|
2735
|
+
*
|
|
2736
|
+
*/
|
|
2737
|
+
titleSuffix?: React__default.ReactElement;
|
|
2738
|
+
isDisabled?: boolean;
|
|
2739
|
+
intent?: Extract<FeedbackColors, 'negative'>;
|
|
2740
|
+
/**
|
|
2741
|
+
* Can be used in combination of `onClick` to highlight item as selected in Button Triggers.
|
|
2742
|
+
*
|
|
2743
|
+
* When trigger is SelectInput, Use `value` prop on SelectInput instead to make dropdown controlled.
|
|
2744
|
+
*/
|
|
2745
|
+
isSelected?: boolean;
|
|
2746
|
+
/**
|
|
2747
|
+
* Internally passed from ActionList. No need to pass it explicitly
|
|
2748
|
+
*
|
|
2749
|
+
* @private
|
|
2750
|
+
*/
|
|
2751
|
+
_index?: number;
|
|
2752
|
+
} & TestID;
|
|
2753
|
+
type ActionListSectionProps = {
|
|
2754
|
+
title: string;
|
|
2755
|
+
children: React__default.ReactNode[] | React__default.ReactNode;
|
|
2756
|
+
/**
|
|
2757
|
+
* Internally used to hide the divider on final item in React Native.
|
|
2758
|
+
*
|
|
2759
|
+
* Should not be used by consumers (also won't work on web)
|
|
2760
|
+
*
|
|
2761
|
+
* @private
|
|
2762
|
+
*/
|
|
2763
|
+
_hideDivider?: boolean;
|
|
2764
|
+
/**
|
|
2765
|
+
* Internally used to hide / show section in AutoComplete
|
|
2766
|
+
*
|
|
2767
|
+
* @private
|
|
2768
|
+
*/
|
|
2769
|
+
_sectionChildValues?: string[];
|
|
2770
|
+
} & TestID;
|
|
2771
|
+
declare const ActionListSection: ({ title, children, testID, _hideDivider, _sectionChildValues, }: ActionListSectionProps) => React__default.ReactElement;
|
|
2772
|
+
declare const ActionListItemIcon: ({ icon }: {
|
|
2773
|
+
icon: IconComponent;
|
|
2774
|
+
}) => React__default.ReactElement;
|
|
2775
|
+
declare const ActionListItemBadgeGroup: ({ children, }: {
|
|
2776
|
+
children: React__default.ReactElement[] | React__default.ReactElement;
|
|
2777
|
+
}) => React__default.ReactElement;
|
|
2778
|
+
declare const ActionListItemBadge: (props: BadgeProps) => React__default.ReactElement;
|
|
2779
|
+
declare const ActionListItemText: ({ children, }: {
|
|
2780
|
+
children: StringChildrenType;
|
|
2781
|
+
}) => React__default.ReactElement;
|
|
2782
|
+
declare const ActionListItem: React__default.MemoExoticComponent<(props: ActionListItemProps) => React__default.ReactElement>;
|
|
2783
|
+
|
|
2784
|
+
type ActionListItemAssetProps = {
|
|
2785
|
+
/**
|
|
2786
|
+
* Source of the image.
|
|
2787
|
+
*/
|
|
2788
|
+
src: string;
|
|
2789
|
+
/**
|
|
2790
|
+
* Alt tag for the image
|
|
2791
|
+
*/
|
|
2792
|
+
alt: string;
|
|
2793
|
+
};
|
|
2794
|
+
declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
|
|
2795
|
+
|
|
2796
|
+
type PrimaryAction = {
|
|
2797
|
+
text: string;
|
|
2798
|
+
onClick: () => void;
|
|
2799
|
+
};
|
|
2800
|
+
type SecondaryActionButton = {
|
|
2801
|
+
text: string;
|
|
2802
|
+
onClick: () => void;
|
|
2803
|
+
};
|
|
2804
|
+
type SecondaryActionLinkButton = {
|
|
2805
|
+
text: string;
|
|
2806
|
+
href: string;
|
|
2807
|
+
onClick?: () => void;
|
|
2808
|
+
target?: string;
|
|
2809
|
+
/**
|
|
2810
|
+
* When `target` is set to `_blank` this is automatically set to `noopener noreferrer`
|
|
2811
|
+
*/
|
|
2812
|
+
rel?: string;
|
|
2813
|
+
};
|
|
2814
|
+
type SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;
|
|
2815
|
+
type AlertProps = {
|
|
2816
|
+
/**
|
|
2817
|
+
* Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.
|
|
2818
|
+
*/
|
|
2819
|
+
description: ReactChild;
|
|
2820
|
+
/**
|
|
2821
|
+
* A brief heading
|
|
2822
|
+
*/
|
|
2823
|
+
title?: string;
|
|
2824
|
+
/**
|
|
2825
|
+
* Shows a dismiss button
|
|
2826
|
+
*
|
|
2827
|
+
* @default true
|
|
2828
|
+
*/
|
|
2829
|
+
isDismissible?: boolean;
|
|
2830
|
+
/**
|
|
2831
|
+
* A callback when the dismiss button is clicked
|
|
2832
|
+
*/
|
|
2833
|
+
onDismiss?: () => void;
|
|
2834
|
+
/**
|
|
2835
|
+
* Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.
|
|
2836
|
+
*
|
|
2837
|
+
* @default subtle
|
|
2838
|
+
*/
|
|
2839
|
+
emphasis?: SubtleOrIntense;
|
|
2840
|
+
/**
|
|
2841
|
+
* Makes the Alert span the entire container width, instead of the default max width of `584px`.
|
|
2842
|
+
* This also makes the alert borderless, useful for creating full bleed layouts.
|
|
2843
|
+
*
|
|
2844
|
+
* @default false
|
|
2845
|
+
*/
|
|
2846
|
+
isFullWidth?: boolean;
|
|
2847
|
+
/**
|
|
2848
|
+
* Sets the color tone
|
|
2849
|
+
*/
|
|
2850
|
+
color?: FeedbackColors;
|
|
2851
|
+
/**
|
|
2852
|
+
* Renders a primary action button and a secondary action link button
|
|
2853
|
+
*/
|
|
2854
|
+
actions?: {
|
|
2855
|
+
/**
|
|
2856
|
+
* Renders a button (should **always** be present if `secondary` action is being used)
|
|
2857
|
+
*/
|
|
2858
|
+
primary?: PrimaryAction;
|
|
2859
|
+
/**
|
|
2860
|
+
* Renders a Link button
|
|
2861
|
+
*/
|
|
2862
|
+
secondary?: SecondaryAction;
|
|
3351
2863
|
};
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
2864
|
+
} & TestID & StyledPropsBlade;
|
|
2865
|
+
declare const Alert: ({ description, title, isDismissible, onDismiss, emphasis, isFullWidth, color, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
|
|
2866
|
+
|
|
2867
|
+
type AriaRoles = Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'> | 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'meter' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
|
|
2868
|
+
type AccessibilityProps = AriaAttributes;
|
|
2869
|
+
type AriaAttributes = {
|
|
2870
|
+
role: AriaRoles;
|
|
2871
|
+
/**
|
|
2872
|
+
* Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
|
|
2873
|
+
*/
|
|
2874
|
+
activeDescendant?: string;
|
|
2875
|
+
/**
|
|
2876
|
+
* Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
|
|
2877
|
+
*/
|
|
2878
|
+
atomic?: boolean;
|
|
2879
|
+
/**
|
|
2880
|
+
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
|
|
2881
|
+
*/
|
|
2882
|
+
autoComplete?: 'none' | 'inline' | 'list' | 'both';
|
|
2883
|
+
/**
|
|
2884
|
+
* Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
|
|
2885
|
+
*/
|
|
2886
|
+
busy?: boolean;
|
|
2887
|
+
/**
|
|
2888
|
+
* Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
|
|
2889
|
+
* @see aria-pressed @see aria-selected.
|
|
2890
|
+
*/
|
|
2891
|
+
checked?: boolean | 'mixed';
|
|
2892
|
+
/**
|
|
2893
|
+
* Defines the total number of columns in a table, grid, or treegrid.
|
|
2894
|
+
* @see aria-colindex.
|
|
2895
|
+
*/
|
|
2896
|
+
colCount?: number;
|
|
2897
|
+
/**
|
|
2898
|
+
* Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
|
|
2899
|
+
* @see aria-colcount @see aria-colspan.
|
|
2900
|
+
*/
|
|
2901
|
+
colIndex?: number;
|
|
2902
|
+
/**
|
|
2903
|
+
* Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
|
|
2904
|
+
* @see aria-colindex @see aria-rowspan.
|
|
2905
|
+
*/
|
|
2906
|
+
colSpan?: number;
|
|
2907
|
+
/**
|
|
2908
|
+
* Identifies the element (or elements) whose contents or presence are controlled by the current element.
|
|
2909
|
+
* @see aria-owns.
|
|
2910
|
+
*/
|
|
2911
|
+
controls?: string;
|
|
2912
|
+
/**
|
|
2913
|
+
* Indicates the element that represents the current item within a container or set of related elements.
|
|
2914
|
+
*/
|
|
2915
|
+
current?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
|
|
2916
|
+
/**
|
|
2917
|
+
* Identifies the element (or elements) that describes the object.
|
|
2918
|
+
* @see aria-labelledby
|
|
2919
|
+
*/
|
|
2920
|
+
describedBy?: string;
|
|
2921
|
+
/**
|
|
2922
|
+
* Identifies the element that provides a detailed, extended description for the object.
|
|
2923
|
+
* @see aria-describedby.
|
|
2924
|
+
*/
|
|
2925
|
+
details?: string;
|
|
2926
|
+
/**
|
|
2927
|
+
* Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
|
|
2928
|
+
* @see aria-hidden @see aria-readonly.
|
|
2929
|
+
*/
|
|
2930
|
+
disabled?: boolean;
|
|
2931
|
+
/**
|
|
2932
|
+
* Indicates what functions can be performed when a dragged object is released on the drop target.
|
|
2933
|
+
* @deprecated in ARIA 1.1
|
|
2934
|
+
*/
|
|
2935
|
+
dropEffect?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup';
|
|
2936
|
+
/**
|
|
2937
|
+
* Identifies the element that provides an error message for the object.
|
|
2938
|
+
* @see aria-invalid @see aria-describedby.
|
|
2939
|
+
*/
|
|
2940
|
+
errorMessage?: string;
|
|
2941
|
+
/**
|
|
2942
|
+
* Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
|
|
2943
|
+
*/
|
|
2944
|
+
expanded?: boolean;
|
|
2945
|
+
/**
|
|
2946
|
+
* Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
|
|
2947
|
+
* allows assistive technology to override the general default of reading in document source order.
|
|
2948
|
+
*/
|
|
2949
|
+
flowTo?: string;
|
|
2950
|
+
/**
|
|
2951
|
+
* Indicates an element's "grabbed" state in a drag-and-drop operation.
|
|
2952
|
+
* @deprecated in ARIA 1.1
|
|
2953
|
+
*/
|
|
2954
|
+
grabbed?: boolean;
|
|
2955
|
+
/**
|
|
2956
|
+
* Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
|
|
2957
|
+
*/
|
|
2958
|
+
hasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
2959
|
+
/**
|
|
2960
|
+
* Indicates whether the element is exposed to an accessibility API.
|
|
2961
|
+
* @see aria-disabled.
|
|
2962
|
+
*/
|
|
2963
|
+
hidden?: boolean;
|
|
2964
|
+
/**
|
|
2965
|
+
* Indicates the entered value does not conform to the format expected by the application.
|
|
2966
|
+
* @see aria-errormessage.
|
|
2967
|
+
*/
|
|
2968
|
+
invalid?: boolean | 'grammar' | 'spelling';
|
|
2969
|
+
/**
|
|
2970
|
+
* Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
|
|
2971
|
+
*/
|
|
2972
|
+
keyShortcuts?: string;
|
|
2973
|
+
/**
|
|
2974
|
+
* Defines a string value that labels the current element.
|
|
2975
|
+
* @see aria-labelledby.
|
|
2976
|
+
*/
|
|
2977
|
+
label?: string;
|
|
2978
|
+
/**
|
|
2979
|
+
* Identifies the element (or elements) that labels the current element.
|
|
2980
|
+
* @see aria-describedby.
|
|
2981
|
+
*/
|
|
2982
|
+
labelledBy?: string;
|
|
2983
|
+
/**
|
|
2984
|
+
* Defines the hierarchical level of an element within a structure.
|
|
2985
|
+
*/
|
|
2986
|
+
level?: number;
|
|
2987
|
+
/**
|
|
2988
|
+
* Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
|
|
2989
|
+
*/
|
|
2990
|
+
liveRegion?: 'off' | 'assertive' | 'polite';
|
|
2991
|
+
/**
|
|
2992
|
+
* Indicates whether an element is modal when displayed.
|
|
2993
|
+
*/
|
|
2994
|
+
modal?: boolean;
|
|
2995
|
+
/**
|
|
2996
|
+
* Indicates whether a text box accepts multiple lines of input or only a single line.
|
|
2997
|
+
*/
|
|
2998
|
+
multiline?: boolean;
|
|
2999
|
+
/**
|
|
3000
|
+
* Indicates that the user may select more than one item from the current selectable descendants.
|
|
3001
|
+
*/
|
|
3002
|
+
multiSelectable?: boolean;
|
|
3003
|
+
/**
|
|
3004
|
+
* Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
|
|
3005
|
+
*/
|
|
3006
|
+
orientation?: 'horizontal' | 'vertical';
|
|
3007
|
+
/**
|
|
3008
|
+
* Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
|
|
3009
|
+
* between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
|
|
3010
|
+
* @see aria-controls.
|
|
3011
|
+
*/
|
|
3012
|
+
owns?: string;
|
|
3013
|
+
/**
|
|
3014
|
+
* Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
|
|
3015
|
+
* A hint could be a sample value or a brief description of the expected format.
|
|
3016
|
+
*/
|
|
3017
|
+
placeholder?: string;
|
|
3018
|
+
/**
|
|
3019
|
+
* Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
|
|
3020
|
+
* @see aria-setsize.
|
|
3021
|
+
*/
|
|
3022
|
+
posInSet?: number;
|
|
3023
|
+
/**
|
|
3024
|
+
* Indicates the current "pressed" state of toggle buttons.
|
|
3025
|
+
* @see aria-checked @see aria-selected.
|
|
3026
|
+
*/
|
|
3027
|
+
pressed?: boolean | 'mixed';
|
|
3028
|
+
/**
|
|
3029
|
+
* Indicates that the element is not editable, but is otherwise operable.
|
|
3030
|
+
* @see aria-disabled.
|
|
3031
|
+
*/
|
|
3032
|
+
readOnly?: boolean;
|
|
3033
|
+
/**
|
|
3034
|
+
* Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
|
|
3035
|
+
* @see aria-atomic.
|
|
3036
|
+
*/
|
|
3037
|
+
relevant?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals';
|
|
3038
|
+
/**
|
|
3039
|
+
* Indicates that user input is required on the element before a form may be submitted.
|
|
3040
|
+
*/
|
|
3041
|
+
required?: boolean;
|
|
3042
|
+
/**
|
|
3043
|
+
* Defines a human-readable, author-localized description for the role of an element.
|
|
3044
|
+
*/
|
|
3045
|
+
roleDescription?: string;
|
|
3046
|
+
/**
|
|
3047
|
+
* Defines the total number of rows in a table, grid, or treegrid.
|
|
3048
|
+
* @see aria-rowindex.
|
|
3049
|
+
*/
|
|
3050
|
+
rowCount?: number;
|
|
3051
|
+
/**
|
|
3052
|
+
* Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
|
|
3053
|
+
* @see aria-rowcount @see aria-rowspan.
|
|
3054
|
+
*/
|
|
3055
|
+
rowIndex?: number;
|
|
3056
|
+
/**
|
|
3057
|
+
* Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
|
|
3058
|
+
* @see aria-rowindex @see aria-colspan.
|
|
3059
|
+
*/
|
|
3060
|
+
rowSpan?: number;
|
|
3061
|
+
/**
|
|
3062
|
+
* Indicates the current "selected" state of various widgets.
|
|
3063
|
+
* @see aria-checked @see aria-pressed.
|
|
3064
|
+
*/
|
|
3065
|
+
selected?: boolean;
|
|
3066
|
+
/**
|
|
3067
|
+
* Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
|
|
3068
|
+
* @see aria-posinset.
|
|
3069
|
+
*/
|
|
3070
|
+
setSize?: number;
|
|
3071
|
+
/**
|
|
3072
|
+
* Indicates if items in a table or grid are sorted in ascending or descending order.
|
|
3073
|
+
*/
|
|
3074
|
+
sort?: 'none' | 'ascending' | 'descending' | 'other';
|
|
3075
|
+
/**
|
|
3076
|
+
* Defines the maximum allowed value for a range widget.
|
|
3077
|
+
*/
|
|
3078
|
+
valueMax?: number;
|
|
3079
|
+
/**
|
|
3080
|
+
* Defines the minimum allowed value for a range widget.
|
|
3081
|
+
*/
|
|
3082
|
+
valueMin?: number;
|
|
3083
|
+
/**
|
|
3084
|
+
* Defines the current value for a range widget.
|
|
3085
|
+
* @see aria-valuetext.
|
|
3086
|
+
*/
|
|
3087
|
+
valueNow?: number;
|
|
3088
|
+
/**
|
|
3089
|
+
* Defines the human readable text alternative of aria-valuenow for a range widget.
|
|
3090
|
+
*/
|
|
3091
|
+
valueText?: string;
|
|
3092
|
+
};
|
|
3093
|
+
|
|
3094
|
+
type InteractiveText = DotNotationToken<Theme['colors']['interactive']['text']>;
|
|
3095
|
+
type SurfaceText = DotNotationToken<Theme['colors']['surface']['text']>;
|
|
3096
|
+
type FeedbackText = DotNotationToken<Theme['colors']['feedback']['text']>;
|
|
3097
|
+
type TextColors = `interactive.text.${InteractiveText}` | `surface.text.${SurfaceText}` | `feedback.text.${FeedbackText}`;
|
|
3098
|
+
type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div' | 'label';
|
|
3099
|
+
type BaseTextProps = {
|
|
3100
|
+
id?: string;
|
|
3101
|
+
color?: TextColors;
|
|
3102
|
+
fontFamily?: keyof Theme['typography']['fonts']['family'];
|
|
3103
|
+
fontSize?: keyof Theme['typography']['fonts']['size'];
|
|
3104
|
+
fontWeight?: keyof Theme['typography']['fonts']['weight'];
|
|
3105
|
+
fontStyle?: 'italic' | 'normal';
|
|
3106
|
+
textDecorationLine?: 'line-through' | 'none' | 'underline';
|
|
3107
|
+
lineHeight?: keyof Theme['typography']['lineHeights'];
|
|
3108
|
+
letterSpacing?: keyof Theme['typography']['letterSpacings'];
|
|
3109
|
+
wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
|
|
3110
|
+
opacity?: number;
|
|
3111
|
+
/**
|
|
3112
|
+
* Web only
|
|
3113
|
+
*/
|
|
3114
|
+
as?: As;
|
|
3115
|
+
textAlign?: 'center' | 'justify' | 'left' | 'right';
|
|
3116
|
+
truncateAfterLines?: number;
|
|
3117
|
+
className?: string;
|
|
3118
|
+
style?: React.CSSProperties;
|
|
3119
|
+
children: React.ReactNode;
|
|
3120
|
+
accessibilityProps?: Partial<AccessibilityProps>;
|
|
3121
|
+
/**
|
|
3122
|
+
* React Native only
|
|
3123
|
+
*/
|
|
3124
|
+
numberOfLines?: number;
|
|
3125
|
+
componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code' | 'display';
|
|
3126
|
+
} & TestID & StyledPropsBlade;
|
|
3127
|
+
type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
|
|
3128
|
+
|
|
3129
|
+
type AmountSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
|
|
3130
|
+
type AmountDisplayProps = {
|
|
3131
|
+
type?: 'display';
|
|
3132
|
+
size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
|
|
3133
|
+
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
|
|
3134
|
+
};
|
|
3135
|
+
type AmountHeadingProps = {
|
|
3136
|
+
type?: 'heading';
|
|
3137
|
+
size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
|
|
3138
|
+
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
|
|
3139
|
+
};
|
|
3140
|
+
type AmountBodyProps = {
|
|
3141
|
+
type?: 'body';
|
|
3142
|
+
size?: Extract<AmountSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
3143
|
+
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
|
|
3144
|
+
};
|
|
3145
|
+
type AmountTypeProps = AmountDisplayProps | AmountHeadingProps | AmountBodyProps;
|
|
3146
|
+
|
|
3147
|
+
type AmountCommonProps = {
|
|
3148
|
+
/**
|
|
3149
|
+
* The value to be rendered within the component.
|
|
3150
|
+
*
|
|
3151
|
+
*/
|
|
3152
|
+
value: number;
|
|
3153
|
+
/**
|
|
3154
|
+
* Sets the color of the amount.
|
|
3155
|
+
*
|
|
3156
|
+
* @default undefined
|
|
3157
|
+
*/
|
|
3158
|
+
color?: BaseTextProps['color'];
|
|
3159
|
+
/**
|
|
3160
|
+
* Indicates what the suffix of amount should be
|
|
3161
|
+
*
|
|
3162
|
+
* @default 'decimals'
|
|
3163
|
+
*/
|
|
3164
|
+
suffix?: 'decimals' | 'none' | 'humanize';
|
|
3165
|
+
/**
|
|
3166
|
+
* Makes the currency indicator(currency symbol/code) and decimal digits small and faded
|
|
3167
|
+
*
|
|
3168
|
+
* @default true
|
|
3169
|
+
*/
|
|
3170
|
+
isAffixSubtle?: true | false;
|
|
3171
|
+
/**
|
|
3172
|
+
* Determines the visual representation of the currency, choose between displaying the currency symbol or code.
|
|
3173
|
+
*
|
|
3174
|
+
* Note: Currency symbol and code is determined by the locale set in user's browser or set via @razorpay/i18nify-react library.
|
|
3175
|
+
*
|
|
3176
|
+
* @default 'currency-symbol'
|
|
3177
|
+
*/
|
|
3178
|
+
currencyIndicator?: 'currency-symbol' | 'currency-code';
|
|
3179
|
+
/**
|
|
3180
|
+
* The currency of the amount. Note that this component
|
|
3181
|
+
* only displays the provided value in the specified currency, it does not perform any currency conversion.
|
|
3182
|
+
*
|
|
3183
|
+
* @default 'INR'
|
|
3184
|
+
* */
|
|
3185
|
+
currency?: CurrencyCodeType;
|
|
3186
|
+
/**
|
|
3187
|
+
* If true, the amount text will have a line through it.
|
|
3188
|
+
*
|
|
3189
|
+
* @default false
|
|
3190
|
+
*/
|
|
3191
|
+
isStrikethrough?: boolean;
|
|
3192
|
+
} & TestID & StyledPropsBlade;
|
|
3193
|
+
type AmountProps = AmountTypeProps & AmountCommonProps;
|
|
3194
|
+
declare const Amount: ({ value, suffix, type, size, weight, isAffixSubtle, isStrikethrough, color, currencyIndicator, currency, testID, ...styledProps }: AmountProps) => ReactElement;
|
|
3195
|
+
|
|
3196
|
+
type SnapPoints = [number, number, number];
|
|
3197
|
+
|
|
3198
|
+
type BaseFooterProps = {
|
|
3199
|
+
children: React__default.ReactNode;
|
|
3200
|
+
metaComponentName?: string;
|
|
3201
|
+
showDivider?: boolean;
|
|
3202
|
+
} & TestID;
|
|
3203
|
+
|
|
3204
|
+
type BottomSheetProps = {
|
|
3205
|
+
/**
|
|
3206
|
+
* Accepts BottomSheetHeader, BottomSheetFooter, BottomSheetBody
|
|
3207
|
+
*/
|
|
3208
|
+
children: React.ReactNode;
|
|
3209
|
+
/**
|
|
3210
|
+
* SnapPoints in which the bottom sheeet will rest on.
|
|
3211
|
+
* Accepts numbers between 0 & 1 which maps to the total view height of the screen, 0.5 means 50% of screen height.
|
|
3212
|
+
*
|
|
3213
|
+
* @default [0.35, 0.5, 0.85]
|
|
3214
|
+
*/
|
|
3215
|
+
snapPoints?: SnapPoints;
|
|
3216
|
+
/**
|
|
3217
|
+
* Called when the bottom sheet is closed, either by user state, hitting `esc` or tapping backdrop
|
|
3218
|
+
*/
|
|
3219
|
+
onDismiss?: () => void;
|
|
3220
|
+
/**
|
|
3221
|
+
* Toggles bottom sheet state
|
|
3222
|
+
*
|
|
3223
|
+
* @default false
|
|
3224
|
+
*/
|
|
3225
|
+
isOpen?: boolean;
|
|
3226
|
+
/**
|
|
3227
|
+
* Ref element you want to get keyboard focus when opening the sheet
|
|
3228
|
+
* By default the initial focus will go to the close button
|
|
3229
|
+
*/
|
|
3230
|
+
initialFocusRef?: React.MutableRefObject<any>;
|
|
3231
|
+
/**
|
|
3232
|
+
* Sets the z-index of the bottom sheet
|
|
3233
|
+
* Note: when using stacked bottom sheet make sure all the bottom sheets have the same zIndex
|
|
3234
|
+
* @default 100
|
|
3235
|
+
*/
|
|
3236
|
+
zIndex?: number;
|
|
3237
|
+
};
|
|
3238
|
+
type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick' | 'children'> & {
|
|
3239
|
+
/**
|
|
3240
|
+
* Trailing element to be rendered in the Header
|
|
3241
|
+
*
|
|
3242
|
+
* Accepts one of `Badge`, `Text`, `Button`, `Link`
|
|
3243
|
+
*/
|
|
3244
|
+
trailing?: BaseHeaderProps['trailing'];
|
|
3245
|
+
/**
|
|
3246
|
+
* Renders an adornment besides the title
|
|
3247
|
+
*
|
|
3248
|
+
* Accepts `Counter`
|
|
3249
|
+
*/
|
|
3250
|
+
titleSuffix?: BaseHeaderProps['titleSuffix'];
|
|
3251
|
+
};
|
|
3252
|
+
type BottomSheetFooterProps = Pick<BaseFooterProps, 'children'>;
|
|
3253
|
+
type BottomSheetBodyProps = {
|
|
3254
|
+
children: React.ReactNode;
|
|
3255
|
+
/**
|
|
3256
|
+
* Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
|
|
3257
|
+
* @default `spacing.5`
|
|
3258
|
+
*
|
|
3259
|
+
* **Links:**
|
|
3260
|
+
* - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
|
|
3261
|
+
*/
|
|
3262
|
+
padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.5'>;
|
|
3263
|
+
};
|
|
3264
|
+
|
|
3265
|
+
declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, children, }: BottomSheetHeaderProps) => React__default.ReactElement;
|
|
3266
|
+
|
|
3267
|
+
declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__default.ReactElement;
|
|
3268
|
+
|
|
3269
|
+
declare const BottomSheetBody: ({ children, padding, }: BottomSheetBodyProps) => React__default.ReactElement;
|
|
3270
|
+
|
|
3271
|
+
declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, zIndex, }: BottomSheetProps) => React__default.ReactElement;
|
|
3272
|
+
|
|
3273
|
+
type BaseLinkCommonProps = {
|
|
3274
|
+
color?: 'primary' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
|
|
3275
|
+
icon?: IconComponent;
|
|
3276
|
+
iconPosition?: 'left' | 'right';
|
|
3277
|
+
onClick?: (event: SyntheticEvent) => void;
|
|
3278
|
+
onBlur?: Platform.Select<{
|
|
3279
|
+
native: (event: GestureResponderEvent) => void;
|
|
3280
|
+
web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
|
|
3281
|
+
}>;
|
|
3282
|
+
onMouseLeave?: Platform.Select<{
|
|
3283
|
+
native: (event: GestureResponderEvent) => void;
|
|
3284
|
+
web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
3285
|
+
}>;
|
|
3286
|
+
onKeyDown?: Platform.Select<{
|
|
3287
|
+
native: (event: GestureResponderEvent) => void;
|
|
3288
|
+
web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
|
|
3289
|
+
}>;
|
|
3290
|
+
accessibilityProps?: Partial<AccessibilityProps>;
|
|
3291
|
+
/**
|
|
3292
|
+
* Sets the size of the link
|
|
3293
|
+
*
|
|
3294
|
+
* @default medium
|
|
3295
|
+
*/
|
|
3296
|
+
size?: Extract<BaseTextSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
3297
|
+
/**
|
|
3298
|
+
* Defines how far your touch can start away from the link. This is a react-native only prop and has no effect on web.
|
|
3299
|
+
*/
|
|
3300
|
+
hitSlop?: {
|
|
3301
|
+
top?: number;
|
|
3302
|
+
right?: number;
|
|
3303
|
+
bottom?: number;
|
|
3304
|
+
left?: number;
|
|
3305
|
+
} | number;
|
|
3306
|
+
/**
|
|
3307
|
+
* The title of the link which is displayed as a tooltip. This is a web only prop and has no effect on react-native.
|
|
3308
|
+
*/
|
|
3309
|
+
htmlTitle?: string;
|
|
3310
|
+
opacity?: number;
|
|
3311
|
+
} & TestID & StyledPropsBlade & Omit<BladeCommonEvents, 'onBlur' | 'onMouseLeave'>;
|
|
3312
|
+
type BaseLinkWithoutIconProps = BaseLinkCommonProps & {
|
|
3313
|
+
icon?: undefined;
|
|
3314
|
+
children: StringChildrenType;
|
|
3315
|
+
};
|
|
3316
|
+
type BaseLinkWithIconProps = BaseLinkCommonProps & {
|
|
3317
|
+
icon: IconComponent;
|
|
3318
|
+
children?: StringChildrenType;
|
|
3319
|
+
};
|
|
3320
|
+
type BaseLinkPropsWithOrWithoutIcon = BaseLinkWithIconProps | BaseLinkWithoutIconProps;
|
|
3321
|
+
type BaseLinkAnchorVariantProps = BaseLinkPropsWithOrWithoutIcon & {
|
|
3322
|
+
variant?: 'anchor';
|
|
3323
|
+
href?: string;
|
|
3324
|
+
target?: string;
|
|
3325
|
+
rel?: string;
|
|
3326
|
+
isDisabled?: undefined;
|
|
3327
|
+
};
|
|
3328
|
+
type BaseLinkButtonVariantProps = BaseLinkPropsWithOrWithoutIcon & {
|
|
3329
|
+
variant?: 'button';
|
|
3330
|
+
isDisabled?: boolean;
|
|
3331
|
+
href?: undefined;
|
|
3332
|
+
target?: undefined;
|
|
3333
|
+
rel?: undefined;
|
|
3334
|
+
};
|
|
3335
|
+
type BaseLinkProps = BaseLinkAnchorVariantProps | BaseLinkButtonVariantProps;
|
|
3336
|
+
|
|
3337
|
+
type LinkCommonProps = {
|
|
3338
|
+
variant?: 'anchor' | 'button';
|
|
3339
|
+
icon?: IconComponent;
|
|
3340
|
+
color?: 'primary' | 'white' | 'neutral';
|
|
3341
|
+
iconPosition?: 'left' | 'right';
|
|
3342
|
+
isDisabled?: boolean;
|
|
3343
|
+
onClick?: (event: SyntheticEvent) => void;
|
|
3344
|
+
href?: string;
|
|
3345
|
+
target?: string;
|
|
3346
|
+
accessibilityLabel?: string;
|
|
3347
|
+
/**
|
|
3348
|
+
* It is exposed for internal usage with tooltip.
|
|
3349
|
+
*
|
|
3350
|
+
* @private
|
|
3351
|
+
*/
|
|
3352
|
+
'aria-describedby'?: string;
|
|
3353
|
+
/**
|
|
3354
|
+
* Sets the size of the link
|
|
3355
|
+
*
|
|
3356
|
+
* @default medium
|
|
3357
|
+
*/
|
|
3358
|
+
size?: BaseLinkProps['size'];
|
|
3359
|
+
} & TestID & StyledPropsBlade & BladeCommonEvents & Platform.Select<{
|
|
3360
|
+
native: {
|
|
3361
|
+
/**
|
|
3362
|
+
* Defines how far your touch can start away from the link
|
|
3363
|
+
*/
|
|
3364
|
+
hitSlop?: {
|
|
3365
|
+
top?: number;
|
|
3366
|
+
right?: number;
|
|
3367
|
+
bottom?: number;
|
|
3368
|
+
left?: number;
|
|
3369
|
+
} | number;
|
|
3370
|
+
/**
|
|
3371
|
+
* This is a web only prop and has no effect on react-native.
|
|
3372
|
+
*/
|
|
3373
|
+
htmlTitle?: undefined;
|
|
3359
3374
|
};
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3375
|
+
web: {
|
|
3376
|
+
/**
|
|
3377
|
+
* This is a react-native only prop and has no effect on web.
|
|
3378
|
+
*/
|
|
3379
|
+
hitSlop?: undefined;
|
|
3380
|
+
/**
|
|
3381
|
+
* The title of the link which is displayed as a tooltip.
|
|
3382
|
+
*/
|
|
3383
|
+
htmlTitle?: string;
|
|
3367
3384
|
};
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
}
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
}
|
|
3385
|
+
}>;
|
|
3386
|
+
type LinkWithoutIconProps = LinkCommonProps & {
|
|
3387
|
+
icon?: undefined;
|
|
3388
|
+
children: StringChildrenType;
|
|
3389
|
+
};
|
|
3390
|
+
type LinkWithIconProps = LinkCommonProps & {
|
|
3391
|
+
icon: IconComponent;
|
|
3392
|
+
children?: StringChildrenType;
|
|
3393
|
+
};
|
|
3394
|
+
type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
|
|
3395
|
+
type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
|
|
3396
|
+
variant?: 'anchor';
|
|
3397
|
+
href?: string;
|
|
3398
|
+
target?: string;
|
|
3399
|
+
rel?: string;
|
|
3400
|
+
isDisabled?: undefined;
|
|
3401
|
+
};
|
|
3402
|
+
type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
|
|
3403
|
+
variant?: 'button';
|
|
3404
|
+
isDisabled?: boolean;
|
|
3405
|
+
href?: undefined;
|
|
3406
|
+
target?: undefined;
|
|
3407
|
+
rel?: undefined;
|
|
3408
|
+
};
|
|
3409
|
+
type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
|
|
3410
|
+
declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<BladeElementRef>>;
|
|
3411
|
+
|
|
3412
|
+
type BreadcrumbProps = StyledPropsBlade & {
|
|
3413
|
+
/**
|
|
3414
|
+
* Size of the Breadcrumb
|
|
3415
|
+
*
|
|
3416
|
+
* @default medium
|
|
3417
|
+
*/
|
|
3418
|
+
size?: 'small' | 'medium' | 'large';
|
|
3419
|
+
/**
|
|
3420
|
+
* Color of the Breadcrumb
|
|
3421
|
+
*
|
|
3422
|
+
* @default neutral
|
|
3423
|
+
*/
|
|
3424
|
+
color?: 'neutral' | 'primary' | 'white';
|
|
3425
|
+
/**
|
|
3426
|
+
* Content of the Breadcrumb, accepts BreadcrumbItem
|
|
3427
|
+
*/
|
|
3428
|
+
children: React.ReactNode;
|
|
3429
|
+
/**
|
|
3430
|
+
* Whether to show the last separator
|
|
3431
|
+
*/
|
|
3432
|
+
showLastSeparator?: boolean;
|
|
3433
|
+
/**
|
|
3434
|
+
* aria-label for breadcrumb
|
|
3435
|
+
*/
|
|
3436
|
+
accessibilityLabel?: string;
|
|
3437
|
+
};
|
|
3438
|
+
type BreadcrumbItemProps = {
|
|
3439
|
+
/**
|
|
3440
|
+
* Href of the BreadcrumbItem
|
|
3441
|
+
*/
|
|
3442
|
+
href: string;
|
|
3443
|
+
/**
|
|
3444
|
+
* Function to be called on click of the BreadcrumbItem,
|
|
3445
|
+
*
|
|
3446
|
+
* This can be used to integrate with routing libraries like `react-router-dom`
|
|
3447
|
+
*/
|
|
3448
|
+
onClick?: LinkProps['onClick'];
|
|
3449
|
+
/**
|
|
3450
|
+
* Whether the BreadcrumbItem is the current page,
|
|
3451
|
+
* Sets the aria-current attribute to `page`
|
|
3452
|
+
*
|
|
3453
|
+
* @default false
|
|
3454
|
+
*/
|
|
3455
|
+
isCurrentPage?: boolean;
|
|
3456
|
+
/**
|
|
3457
|
+
* Content of the BreadcrumbItem
|
|
3458
|
+
*/
|
|
3459
|
+
children?: StringChildrenType;
|
|
3460
|
+
/**
|
|
3461
|
+
* Icon to be shown before the BreadcrumbItem
|
|
3462
|
+
*/
|
|
3463
|
+
icon?: IconComponent;
|
|
3464
|
+
/**
|
|
3465
|
+
* Accessibility label for the BreadcrumbItem, can be used in icon only variant
|
|
3466
|
+
*/
|
|
3467
|
+
accessibilityLabel?: string;
|
|
3468
|
+
};
|
|
3469
|
+
|
|
3470
|
+
declare const Breadcrumb: ({ size, color, showLastSeparator, accessibilityLabel, children, ...styledProps }: BreadcrumbProps) => React__default.ReactElement;
|
|
3471
|
+
|
|
3472
|
+
declare const BreadcrumbItem: ({ children, href, icon: Icon, isCurrentPage, onClick, accessibilityLabel, }: BreadcrumbItemProps) => React__default.ReactElement;
|
|
3385
3473
|
|
|
3386
3474
|
type BaseButtonCommonProps = {
|
|
3387
3475
|
href?: BaseLinkProps['href'];
|
|
@@ -3535,6 +3623,73 @@ declare const IconButton: React__default.ForwardRefExoticComponent<{
|
|
|
3535
3623
|
__brand__?: "platform-web" | undefined;
|
|
3536
3624
|
} & React__default.RefAttributes<BladeElementRef>>;
|
|
3537
3625
|
|
|
3626
|
+
type ButtonGroupProps = {
|
|
3627
|
+
/**
|
|
3628
|
+
* Accepts multiple Button components as children
|
|
3629
|
+
*/
|
|
3630
|
+
children: React.ReactNode;
|
|
3631
|
+
/**
|
|
3632
|
+
* Specifies the visual style variant of the ButtonGroup.
|
|
3633
|
+
*
|
|
3634
|
+
* @default 'primary'
|
|
3635
|
+
*/
|
|
3636
|
+
variant?: ButtonProps['variant'];
|
|
3637
|
+
/**
|
|
3638
|
+
* Specifies the size of the ButtonGroup.
|
|
3639
|
+
*
|
|
3640
|
+
* @default 'medium'
|
|
3641
|
+
*/
|
|
3642
|
+
size?: ButtonProps['size'];
|
|
3643
|
+
/**
|
|
3644
|
+
* Specifies the color of the ButtonGroup.
|
|
3645
|
+
*
|
|
3646
|
+
* @default 'primary'
|
|
3647
|
+
*/
|
|
3648
|
+
color?: ButtonProps['color'];
|
|
3649
|
+
/**
|
|
3650
|
+
* Specifies whether the ButtonGroup should take up the full width of its container.
|
|
3651
|
+
*/
|
|
3652
|
+
isFullWidth?: boolean;
|
|
3653
|
+
/**
|
|
3654
|
+
* Disables or enables the ButtonGroup component
|
|
3655
|
+
*
|
|
3656
|
+
* @default false
|
|
3657
|
+
*/
|
|
3658
|
+
isDisabled?: boolean;
|
|
3659
|
+
/**
|
|
3660
|
+
* Test ID for automation
|
|
3661
|
+
*/
|
|
3662
|
+
testID?: string;
|
|
3663
|
+
};
|
|
3664
|
+
|
|
3665
|
+
/**
|
|
3666
|
+
* ### ButtonGroup Component
|
|
3667
|
+
*
|
|
3668
|
+
* The ButtonGroup component is used to group related buttons together.
|
|
3669
|
+
*
|
|
3670
|
+
* ---
|
|
3671
|
+
*
|
|
3672
|
+
* #### Usage
|
|
3673
|
+
*
|
|
3674
|
+
* ```jsx
|
|
3675
|
+
const App = () => {
|
|
3676
|
+
return (
|
|
3677
|
+
<ButtonGroup>
|
|
3678
|
+
<Button icon={RefreshIcon}>Sync</Button>
|
|
3679
|
+
<Button icon={ShareIcon}>Share</Button>
|
|
3680
|
+
<Button icon={DownloadIcon}>Download</Button>
|
|
3681
|
+
</ButtonGroup>
|
|
3682
|
+
);
|
|
3683
|
+
}
|
|
3684
|
+
* ```
|
|
3685
|
+
*
|
|
3686
|
+
* ---
|
|
3687
|
+
*
|
|
3688
|
+
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-buttongroup FileUpload Documentation}
|
|
3689
|
+
*
|
|
3690
|
+
*/
|
|
3691
|
+
declare const ButtonGroup: ({ children, isDisabled, size, color, variant, isFullWidth, testID, ...styledProps }: ButtonGroupProps) => React__default.ReactElement;
|
|
3692
|
+
|
|
3538
3693
|
type CardSpacingValueType = Extract<SpacingValueType, 'spacing.0' | 'spacing.3' | 'spacing.4' | 'spacing.5' | 'spacing.7'>;
|
|
3539
3694
|
|
|
3540
3695
|
declare const ComponentIds: {
|
|
@@ -9070,4 +9225,4 @@ declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => Rea
|
|
|
9070
9225
|
*/
|
|
9071
9226
|
declare const screenReaderStyles: CSSObject;
|
|
9072
9227
|
|
|
9073
|
-
export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AutoCompleteProps, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, BladeFile, BladeFileList, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileUploadProps, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabPanel, TabPanelProps, Table, TableBackgroundColors, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationCommonProps, TablePaginationProps, TablePaginationType, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme, useToast };
|
|
9228
|
+
export { Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AutoCompleteProps, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, BladeFile, BladeFileList, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileUploadProps, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabPanel, TabPanelProps, Table, TableBackgroundColors, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationCommonProps, TablePaginationProps, TablePaginationType, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme, useToast };
|