@razorpay/blade 8.11.3 → 8.12.1
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/components/index.d.ts +399 -7
- package/build/components/index.native.d.ts +399 -7
- package/build/components/index.native.js +39 -37
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.web.js +1461 -1267
- package/build/components/index.web.js.map +1 -1
- package/build/css/bankingThemeDarkDesktop.css +1 -1
- package/build/css/bankingThemeDarkMobile.css +1 -1
- package/build/css/bankingThemeLightDesktop.css +1 -1
- package/build/css/bankingThemeLightMobile.css +1 -1
- package/build/css/paymentThemeDarkDesktop.css +1 -1
- package/build/css/paymentThemeDarkMobile.css +1 -1
- package/build/css/paymentThemeLightDesktop.css +1 -1
- package/build/css/paymentThemeLightMobile.css +1 -1
- package/build/utils/index.d.ts +12 -0
- package/build/utils/index.native.d.ts +12 -0
- package/build/utils/index.native.js +1 -1
- package/build/utils/index.native.js.map +1 -1
- package/build/utils/index.web.js +13 -1
- package/build/utils/index.web.js.map +1 -1
- package/package.json +2 -2
|
@@ -1099,6 +1099,228 @@ type SpacingValueType$1 =
|
|
|
1099
1099
|
| 'max-content'
|
|
1100
1100
|
| 'min-content';
|
|
1101
1101
|
|
|
1102
|
+
/**
|
|
1103
|
+
* @IMPORTANT
|
|
1104
|
+
*
|
|
1105
|
+
* I wish there was better way to re-use jsdoc but I checked and there isn't so we have to explicitly add docs to each prop.
|
|
1106
|
+
*
|
|
1107
|
+
* When you want to change a specific token value, you can select the entire block of spacing value mapping and do find and replace on it
|
|
1108
|
+
*
|
|
1109
|
+
* Checkout example of find and replace query-
|
|
1110
|
+
* {@link https://user-images.githubusercontent.com/30949385/221802507-40c7adbc-484a-47b3-9035-ae1e97080b51.png}
|
|
1111
|
+
*
|
|
1112
|
+
*/
|
|
1113
|
+
|
|
1114
|
+
type PaddingProps$1 = MakeObjectResponsive$1<{
|
|
1115
|
+
/**
|
|
1116
|
+
* ### Padding Shorthand
|
|
1117
|
+
*
|
|
1118
|
+
* #### Usage
|
|
1119
|
+
*
|
|
1120
|
+
* ```jsx
|
|
1121
|
+
* padding="spacing.3"
|
|
1122
|
+
* padding="20px"
|
|
1123
|
+
* padding={["spacing.3", "spacing.1", "spacing.0", "10px"]}
|
|
1124
|
+
* ```
|
|
1125
|
+
*
|
|
1126
|
+
* ---
|
|
1127
|
+
* #### Spacing to Pixel values
|
|
1128
|
+
*
|
|
1129
|
+
* - `spacing.0` - 0px
|
|
1130
|
+
* - `spacing.1` - 2px
|
|
1131
|
+
* - `spacing.2` - 4px
|
|
1132
|
+
* - `spacing.3` - 8px
|
|
1133
|
+
* - `spacing.4` - 12px
|
|
1134
|
+
* - `spacing.5` - 16px
|
|
1135
|
+
* - `spacing.6` - 20px
|
|
1136
|
+
* - `spacing.7` - 24px
|
|
1137
|
+
* - `spacing.8` - 32px
|
|
1138
|
+
* - `spacing.9` - 40px
|
|
1139
|
+
* - `spacing.10` - 48px
|
|
1140
|
+
* - `spacing.11` - 56px
|
|
1141
|
+
*
|
|
1142
|
+
* {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
|
|
1143
|
+
*
|
|
1144
|
+
*/
|
|
1145
|
+
padding: SpacingValueType$1 | ArrayOfMaxLength4$1<SpacingValueType$1>;
|
|
1146
|
+
/**
|
|
1147
|
+
* ### Padding Horizontal
|
|
1148
|
+
*
|
|
1149
|
+
* #### Usage
|
|
1150
|
+
*
|
|
1151
|
+
* ```jsx
|
|
1152
|
+
* paddingX="spacing.3"
|
|
1153
|
+
* paddingX="20px"
|
|
1154
|
+
* ```
|
|
1155
|
+
*
|
|
1156
|
+
* ---
|
|
1157
|
+
* #### Spacing to Pixel values
|
|
1158
|
+
*
|
|
1159
|
+
* - `spacing.0` - 0px
|
|
1160
|
+
* - `spacing.1` - 2px
|
|
1161
|
+
* - `spacing.2` - 4px
|
|
1162
|
+
* - `spacing.3` - 8px
|
|
1163
|
+
* - `spacing.4` - 12px
|
|
1164
|
+
* - `spacing.5` - 16px
|
|
1165
|
+
* - `spacing.6` - 20px
|
|
1166
|
+
* - `spacing.7` - 24px
|
|
1167
|
+
* - `spacing.8` - 32px
|
|
1168
|
+
* - `spacing.9` - 40px
|
|
1169
|
+
* - `spacing.10` - 48px
|
|
1170
|
+
* - `spacing.11` - 56px
|
|
1171
|
+
*
|
|
1172
|
+
* {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
|
|
1173
|
+
*
|
|
1174
|
+
*/
|
|
1175
|
+
paddingX: SpacingValueType$1;
|
|
1176
|
+
/**
|
|
1177
|
+
* ### Padding Vertical
|
|
1178
|
+
*
|
|
1179
|
+
* #### Usage
|
|
1180
|
+
*
|
|
1181
|
+
* ```jsx
|
|
1182
|
+
* paddingY="spacing.3"
|
|
1183
|
+
* paddingY="20px"
|
|
1184
|
+
* ```
|
|
1185
|
+
*
|
|
1186
|
+
* ---
|
|
1187
|
+
* #### Spacing to Pixel values
|
|
1188
|
+
*
|
|
1189
|
+
* - `spacing.0` - 0px
|
|
1190
|
+
* - `spacing.1` - 2px
|
|
1191
|
+
* - `spacing.2` - 4px
|
|
1192
|
+
* - `spacing.3` - 8px
|
|
1193
|
+
* - `spacing.4` - 12px
|
|
1194
|
+
* - `spacing.5` - 16px
|
|
1195
|
+
* - `spacing.6` - 20px
|
|
1196
|
+
* - `spacing.7` - 24px
|
|
1197
|
+
* - `spacing.8` - 32px
|
|
1198
|
+
* - `spacing.9` - 40px
|
|
1199
|
+
* - `spacing.10` - 48px
|
|
1200
|
+
* - `spacing.11` - 56px
|
|
1201
|
+
*
|
|
1202
|
+
* {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
|
|
1203
|
+
*
|
|
1204
|
+
*/
|
|
1205
|
+
paddingY: SpacingValueType$1;
|
|
1206
|
+
/**
|
|
1207
|
+
* ### Padding Top
|
|
1208
|
+
*
|
|
1209
|
+
* #### Usage
|
|
1210
|
+
*
|
|
1211
|
+
* ```jsx
|
|
1212
|
+
* paddingTop="spacing.3"
|
|
1213
|
+
* paddingTop="20px"
|
|
1214
|
+
* ```
|
|
1215
|
+
*
|
|
1216
|
+
* ---
|
|
1217
|
+
* #### Spacing to Pixel values
|
|
1218
|
+
*
|
|
1219
|
+
* - `spacing.0` - 0px
|
|
1220
|
+
* - `spacing.1` - 2px
|
|
1221
|
+
* - `spacing.2` - 4px
|
|
1222
|
+
* - `spacing.3` - 8px
|
|
1223
|
+
* - `spacing.4` - 12px
|
|
1224
|
+
* - `spacing.5` - 16px
|
|
1225
|
+
* - `spacing.6` - 20px
|
|
1226
|
+
* - `spacing.7` - 24px
|
|
1227
|
+
* - `spacing.8` - 32px
|
|
1228
|
+
* - `spacing.9` - 40px
|
|
1229
|
+
* - `spacing.10` - 48px
|
|
1230
|
+
* - `spacing.11` - 56px
|
|
1231
|
+
*
|
|
1232
|
+
* {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
|
|
1233
|
+
*/
|
|
1234
|
+
paddingTop: SpacingValueType$1;
|
|
1235
|
+
/**
|
|
1236
|
+
* ### Padding Right
|
|
1237
|
+
*
|
|
1238
|
+
* #### Usage
|
|
1239
|
+
*
|
|
1240
|
+
* ```jsx
|
|
1241
|
+
* paddingRight="spacing.3"
|
|
1242
|
+
* paddingRight="20px"
|
|
1243
|
+
* ```
|
|
1244
|
+
*
|
|
1245
|
+
* ---
|
|
1246
|
+
* #### Spacing to Pixel values
|
|
1247
|
+
*
|
|
1248
|
+
* - `spacing.0` - 0px
|
|
1249
|
+
* - `spacing.1` - 2px
|
|
1250
|
+
* - `spacing.2` - 4px
|
|
1251
|
+
* - `spacing.3` - 8px
|
|
1252
|
+
* - `spacing.4` - 12px
|
|
1253
|
+
* - `spacing.5` - 16px
|
|
1254
|
+
* - `spacing.6` - 20px
|
|
1255
|
+
* - `spacing.7` - 24px
|
|
1256
|
+
* - `spacing.8` - 32px
|
|
1257
|
+
* - `spacing.9` - 40px
|
|
1258
|
+
* - `spacing.10` - 48px
|
|
1259
|
+
* - `spacing.11` - 56px
|
|
1260
|
+
*
|
|
1261
|
+
* {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
|
|
1262
|
+
*/
|
|
1263
|
+
paddingRight: SpacingValueType$1;
|
|
1264
|
+
/**
|
|
1265
|
+
* ### Padding Bottom
|
|
1266
|
+
*
|
|
1267
|
+
* #### Usage
|
|
1268
|
+
*
|
|
1269
|
+
* ```jsx
|
|
1270
|
+
* paddingBottom="spacing.3"
|
|
1271
|
+
* paddingBottom="20px"
|
|
1272
|
+
* ```
|
|
1273
|
+
*
|
|
1274
|
+
* ---
|
|
1275
|
+
* #### Spacing to Pixel values
|
|
1276
|
+
*
|
|
1277
|
+
* - `spacing.0` - 0px
|
|
1278
|
+
* - `spacing.1` - 2px
|
|
1279
|
+
* - `spacing.2` - 4px
|
|
1280
|
+
* - `spacing.3` - 8px
|
|
1281
|
+
* - `spacing.4` - 12px
|
|
1282
|
+
* - `spacing.5` - 16px
|
|
1283
|
+
* - `spacing.6` - 20px
|
|
1284
|
+
* - `spacing.7` - 24px
|
|
1285
|
+
* - `spacing.8` - 32px
|
|
1286
|
+
* - `spacing.9` - 40px
|
|
1287
|
+
* - `spacing.10` - 48px
|
|
1288
|
+
* - `spacing.11` - 56px
|
|
1289
|
+
*
|
|
1290
|
+
* {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
|
|
1291
|
+
*/
|
|
1292
|
+
paddingBottom: SpacingValueType$1;
|
|
1293
|
+
/**
|
|
1294
|
+
* ### Padding Left
|
|
1295
|
+
*
|
|
1296
|
+
* #### Usage
|
|
1297
|
+
*
|
|
1298
|
+
* ```jsx
|
|
1299
|
+
* paddingLeft="spacing.3"
|
|
1300
|
+
* paddingLeft="20px"
|
|
1301
|
+
* ```
|
|
1302
|
+
*
|
|
1303
|
+
* ---
|
|
1304
|
+
* #### Spacing to Pixel values
|
|
1305
|
+
*
|
|
1306
|
+
* - `spacing.0` - 0px
|
|
1307
|
+
* - `spacing.1` - 2px
|
|
1308
|
+
* - `spacing.2` - 4px
|
|
1309
|
+
* - `spacing.3` - 8px
|
|
1310
|
+
* - `spacing.4` - 12px
|
|
1311
|
+
* - `spacing.5` - 16px
|
|
1312
|
+
* - `spacing.6` - 20px
|
|
1313
|
+
* - `spacing.7` - 24px
|
|
1314
|
+
* - `spacing.8` - 32px
|
|
1315
|
+
* - `spacing.9` - 40px
|
|
1316
|
+
* - `spacing.10` - 48px
|
|
1317
|
+
* - `spacing.11` - 56px
|
|
1318
|
+
*
|
|
1319
|
+
* {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
|
|
1320
|
+
*/
|
|
1321
|
+
paddingLeft: SpacingValueType$1;
|
|
1322
|
+
}>;
|
|
1323
|
+
|
|
1102
1324
|
type MarginProps$1 = MakeObjectResponsive$1<{
|
|
1103
1325
|
/**
|
|
1104
1326
|
* ### Margin Shorthand
|
|
@@ -1335,6 +1557,17 @@ type BladeCommonEvents$1 = {
|
|
|
1335
1557
|
}>;
|
|
1336
1558
|
};
|
|
1337
1559
|
|
|
1560
|
+
type LayoutProps$1 = MakeObjectResponsive$1<
|
|
1561
|
+
{
|
|
1562
|
+
height: SpacingValueType$1;
|
|
1563
|
+
minHeight: SpacingValueType$1;
|
|
1564
|
+
maxHeight: SpacingValueType$1;
|
|
1565
|
+
width: SpacingValueType$1;
|
|
1566
|
+
minWidth: SpacingValueType$1;
|
|
1567
|
+
maxWidth: SpacingValueType$1;
|
|
1568
|
+
} & PickCSSByPlatform<'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign'>
|
|
1569
|
+
>;
|
|
1570
|
+
|
|
1338
1571
|
type FlexboxProps$1 = MakeObjectResponsive$1<
|
|
1339
1572
|
{
|
|
1340
1573
|
/**
|
|
@@ -1410,6 +1643,88 @@ type GridProps$1 = MakeObjectResponsive$1<
|
|
|
1410
1643
|
>
|
|
1411
1644
|
>;
|
|
1412
1645
|
|
|
1646
|
+
type ColorObjects$1 = 'feedback' | 'surface' | 'action';
|
|
1647
|
+
type BackgroundColorString$1<T extends ColorObjects$1> = `${T}.background.${DotNotationColorStringToken<
|
|
1648
|
+
Theme$1['colors'][T]['background']
|
|
1649
|
+
>}`;
|
|
1650
|
+
type BorderColorString$1<T extends ColorObjects$1> = `${T}.border.${DotNotationColorStringToken<
|
|
1651
|
+
Theme$1['colors'][T]['border']
|
|
1652
|
+
>}`;
|
|
1653
|
+
|
|
1654
|
+
// Created this as an array so I can reuse it for runtime validation
|
|
1655
|
+
declare const validBoxAsValues$1 = [
|
|
1656
|
+
'div',
|
|
1657
|
+
'section',
|
|
1658
|
+
'footer',
|
|
1659
|
+
'header',
|
|
1660
|
+
'main',
|
|
1661
|
+
'aside',
|
|
1662
|
+
'nav',
|
|
1663
|
+
'span',
|
|
1664
|
+
'label',
|
|
1665
|
+
] as const;
|
|
1666
|
+
|
|
1667
|
+
type BoxAsType$1 = typeof validBoxAsValues$1[number];
|
|
1668
|
+
|
|
1669
|
+
type BaseBoxVisualProps = MakeObjectResponsive$1<
|
|
1670
|
+
{
|
|
1671
|
+
borderRadius: keyof Border['radius'];
|
|
1672
|
+
backgroundColor:
|
|
1673
|
+
| BackgroundColorString$1<'feedback'>
|
|
1674
|
+
| BackgroundColorString$1<'surface'>
|
|
1675
|
+
| BackgroundColorString$1<'action'>
|
|
1676
|
+
| (string & Record<never, never>);
|
|
1677
|
+
lineHeight: SpacingValueType$1;
|
|
1678
|
+
touchAction: CSSObject['touchAction'];
|
|
1679
|
+
userSelect: CSSObject['userSelect'];
|
|
1680
|
+
borderWidth: keyof Border['width'];
|
|
1681
|
+
borderColor: BorderColorString$1<'surface'>;
|
|
1682
|
+
borderTopWidth: keyof Border['width'];
|
|
1683
|
+
borderTopColor: BorderColorString$1<'surface'>;
|
|
1684
|
+
borderRightWidth: keyof Border['width'];
|
|
1685
|
+
borderRightColor: BorderColorString$1<'surface'>;
|
|
1686
|
+
borderBottomWidth: keyof Border['width'];
|
|
1687
|
+
borderBottomColor: BorderColorString$1<'surface'>;
|
|
1688
|
+
borderLeftWidth: keyof Border['width'];
|
|
1689
|
+
borderLeftColor: BorderColorString$1<'surface'>;
|
|
1690
|
+
borderTopLeftRadius: keyof Border['radius'];
|
|
1691
|
+
borderTopRightRadius: keyof Border['radius'];
|
|
1692
|
+
borderBottomRightRadius: keyof Border['radius'];
|
|
1693
|
+
borderBottomLeftRadius: keyof Border['radius'];
|
|
1694
|
+
} & PickCSSByPlatform<
|
|
1695
|
+
| 'border'
|
|
1696
|
+
| 'borderLeft'
|
|
1697
|
+
| 'borderRight'
|
|
1698
|
+
| 'borderTop'
|
|
1699
|
+
| 'borderBottom'
|
|
1700
|
+
| 'opacity'
|
|
1701
|
+
| 'pointerEvents'
|
|
1702
|
+
>
|
|
1703
|
+
>;
|
|
1704
|
+
|
|
1705
|
+
type BoxVisualProps$1 = MakeObjectResponsive$1<{
|
|
1706
|
+
backgroundColor: BackgroundColorString$1<'surface'>;
|
|
1707
|
+
borderWidth: keyof Border['width'];
|
|
1708
|
+
borderColor: BorderColorString$1<'surface'>;
|
|
1709
|
+
borderTopWidth: keyof Border['width'];
|
|
1710
|
+
borderTopColor: BorderColorString$1<'surface'>;
|
|
1711
|
+
borderRightWidth: keyof Border['width'];
|
|
1712
|
+
borderRightColor: BorderColorString$1<'surface'>;
|
|
1713
|
+
borderBottomWidth: keyof Border['width'];
|
|
1714
|
+
borderBottomColor: BorderColorString$1<'surface'>;
|
|
1715
|
+
borderLeftWidth: keyof Border['width'];
|
|
1716
|
+
borderLeftColor: BorderColorString$1<'surface'>;
|
|
1717
|
+
borderRadius: keyof Border['radius'];
|
|
1718
|
+
borderTopLeftRadius: keyof Border['radius'];
|
|
1719
|
+
borderTopRightRadius: keyof Border['radius'];
|
|
1720
|
+
borderBottomRightRadius: keyof Border['radius'];
|
|
1721
|
+
borderBottomLeftRadius: keyof Border['radius'];
|
|
1722
|
+
}> & {
|
|
1723
|
+
// Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object
|
|
1724
|
+
// styled-components do not support passing `as` prop as an object
|
|
1725
|
+
as: BoxAsType$1;
|
|
1726
|
+
};
|
|
1727
|
+
|
|
1413
1728
|
type StyledPropsBlade = Partial<
|
|
1414
1729
|
Omit<
|
|
1415
1730
|
MarginProps$1 &
|
|
@@ -1429,6 +1744,70 @@ type StyledPropsBlade = Partial<
|
|
|
1429
1744
|
>
|
|
1430
1745
|
>;
|
|
1431
1746
|
|
|
1747
|
+
type BoxCallbackProps$1 = Omit<
|
|
1748
|
+
Platform.Select<{
|
|
1749
|
+
web: {
|
|
1750
|
+
/**
|
|
1751
|
+
* **Warning**
|
|
1752
|
+
*
|
|
1753
|
+
* Make sure to not use Box when you want to create a trigger that performs action on hover.
|
|
1754
|
+
* You would probably want to render it as `button` using `styled.button` instead.
|
|
1755
|
+
*
|
|
1756
|
+
* Use this for hoverable containers in cases like custom menus.
|
|
1757
|
+
*/
|
|
1758
|
+
onMouseOver: React.MouseEventHandler<HTMLElement>;
|
|
1759
|
+
/**
|
|
1760
|
+
* **Warning**
|
|
1761
|
+
*
|
|
1762
|
+
* Make sure to not use Box when you want to create a trigger that performs action on hover.
|
|
1763
|
+
* You would probably want to render it as `button` using `styled.button` instead.
|
|
1764
|
+
*
|
|
1765
|
+
* Use this for hoverable containers in cases like custom menus.
|
|
1766
|
+
*/
|
|
1767
|
+
onMouseEnter: React.MouseEventHandler<HTMLElement>;
|
|
1768
|
+
/**
|
|
1769
|
+
* **Warning**
|
|
1770
|
+
*
|
|
1771
|
+
* Make sure to not use Box when you want to create a trigger that performs action on hover.
|
|
1772
|
+
* You would probably want to render it as `button` using `styled.button` instead.
|
|
1773
|
+
*
|
|
1774
|
+
* Use this for hoverable containers in cases like custom menus.
|
|
1775
|
+
*/
|
|
1776
|
+
onMouseLeave: React.MouseEventHandler<HTMLElement>;
|
|
1777
|
+
onScroll: React.UIEventHandler<HTMLElement>;
|
|
1778
|
+
};
|
|
1779
|
+
native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;
|
|
1780
|
+
}>,
|
|
1781
|
+
'__brand__'
|
|
1782
|
+
>;
|
|
1783
|
+
|
|
1784
|
+
type BoxProps$1 = Partial<
|
|
1785
|
+
PaddingProps$1 &
|
|
1786
|
+
MarginProps$1 &
|
|
1787
|
+
LayoutProps$1 &
|
|
1788
|
+
FlexboxProps$1 &
|
|
1789
|
+
PositionProps$1 &
|
|
1790
|
+
GridProps$1 &
|
|
1791
|
+
BoxCallbackProps$1 &
|
|
1792
|
+
BoxVisualProps$1 & {
|
|
1793
|
+
children?: React.ReactNode | React.ReactNode[];
|
|
1794
|
+
tabIndex?: number;
|
|
1795
|
+
} & TestID
|
|
1796
|
+
>;
|
|
1797
|
+
|
|
1798
|
+
// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.
|
|
1799
|
+
// So first we Omit Visual props of Box
|
|
1800
|
+
// Then we append BaseBoxVisualProps and some other props for styled-components like class and id
|
|
1801
|
+
type BaseBoxProps = Omit<BoxProps$1, keyof BoxVisualProps$1> &
|
|
1802
|
+
Partial<
|
|
1803
|
+
BaseBoxVisualProps & {
|
|
1804
|
+
className?: string;
|
|
1805
|
+
id?: string;
|
|
1806
|
+
tabIndex?: number;
|
|
1807
|
+
}
|
|
1808
|
+
> &
|
|
1809
|
+
BladeCommonEvents$1;
|
|
1810
|
+
|
|
1432
1811
|
type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
|
|
1433
1812
|
Theme$1['colors']['feedback']['icon']
|
|
1434
1813
|
>}`;
|
|
@@ -2983,7 +3362,7 @@ type BaseTextProps$1 = {
|
|
|
2983
3362
|
* React Native only
|
|
2984
3363
|
*/
|
|
2985
3364
|
numberOfLines?: number;
|
|
2986
|
-
componentName?: 'text' | 'title' | 'heading' | 'code';
|
|
3365
|
+
componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code';
|
|
2987
3366
|
} & TestID &
|
|
2988
3367
|
StyledPropsBlade;
|
|
2989
3368
|
|
|
@@ -5397,7 +5776,7 @@ declare type BaseTextProps = {
|
|
|
5397
5776
|
* React Native only
|
|
5398
5777
|
*/
|
|
5399
5778
|
numberOfLines?: number;
|
|
5400
|
-
componentName?: 'text' | 'title' | 'heading' | 'code';
|
|
5779
|
+
componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code';
|
|
5401
5780
|
} & TestID & StyledPropsBlade;
|
|
5402
5781
|
|
|
5403
5782
|
declare const validAsValues$2: readonly ["span", "h1", "h2", "h3", "h4", "h5", "h6"];
|
|
@@ -6251,12 +6630,21 @@ declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle'
|
|
|
6251
6630
|
titleSuffix?: BaseHeaderProps['titleSuffix'];
|
|
6252
6631
|
};
|
|
6253
6632
|
declare type BottomSheetFooterProps = Pick<BaseFooterProps, 'children'>;
|
|
6633
|
+
declare type BottomSheetBodyProps = {
|
|
6634
|
+
children: React.ReactNode;
|
|
6635
|
+
/**
|
|
6636
|
+
* Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
|
|
6637
|
+
* @default `spacing.5`
|
|
6638
|
+
*
|
|
6639
|
+
* **Links:**
|
|
6640
|
+
* - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
|
|
6641
|
+
*/
|
|
6642
|
+
padding?: Extract<SpacingValueType$1, 'spacing.0' | 'spacing.5'>;
|
|
6643
|
+
};
|
|
6254
6644
|
|
|
6255
6645
|
declare const BottomSheetHeader: ({ title, subtitle, leading, trailing, titleSuffix, showBackButton, onBackButtonClick, }: BottomSheetHeaderProps) => React__default.ReactElement;
|
|
6256
6646
|
|
|
6257
|
-
declare const BottomSheetBody: ({ children }:
|
|
6258
|
-
children: React__default.ReactNode;
|
|
6259
|
-
}) => React__default.ReactElement;
|
|
6647
|
+
declare const BottomSheetBody: ({ children, padding, }: BottomSheetBodyProps) => React__default.ReactElement;
|
|
6260
6648
|
|
|
6261
6649
|
declare const BottomSheetFooter: ({ children }: BottomSheetFooterProps) => React__default.ReactElement;
|
|
6262
6650
|
|
|
@@ -6362,8 +6750,12 @@ declare const CollapsibleButton: React$1.ForwardRefExoticComponent<CollapsibleBu
|
|
|
6362
6750
|
|
|
6363
6751
|
declare type CollapsibleBodyProps = {
|
|
6364
6752
|
children: ReactNode;
|
|
6753
|
+
/**
|
|
6754
|
+
* **Internal**: used for React Native specific workarounds. Collapsible automatically takes care of width, you shouldn't need to configure this
|
|
6755
|
+
*/
|
|
6756
|
+
_width?: BaseBoxProps['width'];
|
|
6365
6757
|
} & TestID;
|
|
6366
|
-
declare const CollapsibleBody: ({ children, testID }: CollapsibleBodyProps) => ReactElement;
|
|
6758
|
+
declare const CollapsibleBody: ({ children, testID, _width }: CollapsibleBodyProps) => ReactElement;
|
|
6367
6759
|
|
|
6368
6760
|
declare type TooltipProps = {
|
|
6369
6761
|
content: string;
|
|
@@ -6413,4 +6805,4 @@ declare type BladeCommonEvents = {
|
|
|
6413
6805
|
}>;
|
|
6414
6806
|
};
|
|
6415
6807
|
|
|
6416
|
-
export { AccordionItem, AccordionItemProps, AccordionProps,
|
|
6808
|
+
export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, 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, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, 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, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, 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, 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, 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, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, 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, useActionListContext, useTheme };
|