@razorpay/blade 9.5.1 → 9.5.3
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 +102 -79
- package/build/components/index.development.web.js +1613 -1404
- package/build/components/index.development.web.js.map +1 -1
- package/build/components/index.native.d.ts +124 -77
- package/build/components/index.native.js +51 -49
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.production.web.js +1347 -1358
- package/build/components/index.production.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/tokens/index.development.web.js +55 -4
- package/build/tokens/index.development.web.js.map +1 -1
- package/build/tokens/index.native.js +4 -2
- package/build/tokens/index.native.js.map +1 -1
- package/build/tokens/index.production.web.js.map +1 -1
- package/build/utils/index.d.ts +8 -4
- package/build/utils/index.development.web.js +24 -3
- package/build/utils/index.development.web.js.map +1 -1
- package/build/utils/index.native.d.ts +8 -4
- package/build/utils/index.native.js +4 -2
- package/build/utils/index.native.js.map +1 -1
- package/build/utils/index.production.web.js.map +1 -1
- package/package.json +13 -12
|
@@ -3096,6 +3096,72 @@ declare type CardBodyProps = {
|
|
|
3096
3096
|
} & TestID;
|
|
3097
3097
|
declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
|
|
3098
3098
|
|
|
3099
|
+
type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
|
|
3100
|
+
Theme$1['colors']['feedback']['text']
|
|
3101
|
+
>}`;
|
|
3102
|
+
type FeedbackActionColors$1 = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<
|
|
3103
|
+
Theme$1['colors']['feedback'][Feedback]['action']['text']
|
|
3104
|
+
>}`;
|
|
3105
|
+
type SurfaceColors$1 = `surface.text.${DotNotationColorStringToken<
|
|
3106
|
+
Theme$1['colors']['surface']['text']
|
|
3107
|
+
>}`;
|
|
3108
|
+
type ActionColors$1 = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
|
|
3109
|
+
type BadgeTextColors$1 = `badge.text.${DotNotationColorStringToken<
|
|
3110
|
+
Theme$1['colors']['badge']['text']
|
|
3111
|
+
>}`;
|
|
3112
|
+
|
|
3113
|
+
type BrandPrimaryColors$1 = `brand.primary.${keyof Theme$1['colors']['brand']['primary']}`;
|
|
3114
|
+
|
|
3115
|
+
type As$1 =
|
|
3116
|
+
| 'code'
|
|
3117
|
+
| 'h1'
|
|
3118
|
+
| 'h2'
|
|
3119
|
+
| 'h3'
|
|
3120
|
+
| 'h4'
|
|
3121
|
+
| 'h5'
|
|
3122
|
+
| 'h6'
|
|
3123
|
+
| 'p'
|
|
3124
|
+
| 'span'
|
|
3125
|
+
| 'abbr'
|
|
3126
|
+
| 'q'
|
|
3127
|
+
| 'cite'
|
|
3128
|
+
| 'figcaption'
|
|
3129
|
+
| 'div';
|
|
3130
|
+
type BaseTextProps$1 = {
|
|
3131
|
+
id?: string;
|
|
3132
|
+
color?:
|
|
3133
|
+
| BrandPrimaryColors$1
|
|
3134
|
+
| ActionColors$1
|
|
3135
|
+
| FeedbackColors$1
|
|
3136
|
+
| SurfaceColors$1
|
|
3137
|
+
| FeedbackActionColors$1
|
|
3138
|
+
| BadgeTextColors$1;
|
|
3139
|
+
fontFamily?: keyof Theme$1['typography']['fonts']['family'];
|
|
3140
|
+
fontSize?: keyof Theme$1['typography']['fonts']['size'];
|
|
3141
|
+
fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
3142
|
+
fontStyle?: 'italic' | 'normal';
|
|
3143
|
+
textDecorationLine?: 'line-through' | 'none' | 'underline';
|
|
3144
|
+
lineHeight?: keyof Theme$1['typography']['lineHeights'];
|
|
3145
|
+
/**
|
|
3146
|
+
* Web only
|
|
3147
|
+
*/
|
|
3148
|
+
as?: As$1;
|
|
3149
|
+
textAlign?: 'center' | 'justify' | 'left' | 'right';
|
|
3150
|
+
truncateAfterLines?: number;
|
|
3151
|
+
className?: string;
|
|
3152
|
+
style?: React.CSSProperties;
|
|
3153
|
+
children: React.ReactNode;
|
|
3154
|
+
accessibilityProps?: Partial<AccessibilityProps>;
|
|
3155
|
+
/**
|
|
3156
|
+
* React Native only
|
|
3157
|
+
*/
|
|
3158
|
+
numberOfLines?: number;
|
|
3159
|
+
componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code';
|
|
3160
|
+
} & TestID &
|
|
3161
|
+
StyledPropsBlade$1;
|
|
3162
|
+
|
|
3163
|
+
type BaseTextSizes$1 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
3164
|
+
|
|
3099
3165
|
declare type BaseLinkCommonProps = {
|
|
3100
3166
|
intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
|
|
3101
3167
|
contrast?: 'low' | 'high';
|
|
@@ -3114,13 +3180,13 @@ declare type BaseLinkCommonProps = {
|
|
|
3114
3180
|
native: (event: GestureResponderEvent) => void;
|
|
3115
3181
|
web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
|
|
3116
3182
|
}>;
|
|
3117
|
-
|
|
3183
|
+
accessibilityProps?: Partial<AccessibilityProps>;
|
|
3118
3184
|
/**
|
|
3119
3185
|
* Sets the size of the link
|
|
3120
3186
|
*
|
|
3121
3187
|
* @default medium
|
|
3122
3188
|
*/
|
|
3123
|
-
size?: 'xsmall' | 'small' | 'medium' | 'large'
|
|
3189
|
+
size?: Extract<BaseTextSizes$1, 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
3124
3190
|
/**
|
|
3125
3191
|
* Defines how far your touch can start away from the link. This is a react-native only prop and has no effect on web.
|
|
3126
3192
|
*/
|
|
@@ -3169,6 +3235,12 @@ declare type LinkCommonProps = {
|
|
|
3169
3235
|
href?: string;
|
|
3170
3236
|
target?: string;
|
|
3171
3237
|
accessibilityLabel?: string;
|
|
3238
|
+
/**
|
|
3239
|
+
* It is exposed for internal usage with tooltip.
|
|
3240
|
+
*
|
|
3241
|
+
* @private
|
|
3242
|
+
*/
|
|
3243
|
+
'aria-describedby'?: string;
|
|
3172
3244
|
/**
|
|
3173
3245
|
* Sets the size of the link
|
|
3174
3246
|
*
|
|
@@ -3246,7 +3318,7 @@ declare type BaseButtonCommonProps = {
|
|
|
3246
3318
|
}>;
|
|
3247
3319
|
type?: 'button' | 'reset' | 'submit';
|
|
3248
3320
|
isLoading?: boolean;
|
|
3249
|
-
|
|
3321
|
+
accessibilityProps?: Partial<AccessibilityProps>;
|
|
3250
3322
|
variant?: 'primary' | 'secondary' | 'tertiary';
|
|
3251
3323
|
contrast?: 'low' | 'high';
|
|
3252
3324
|
intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
|
|
@@ -3286,6 +3358,12 @@ declare type ButtonCommonProps = {
|
|
|
3286
3358
|
isLoading?: boolean;
|
|
3287
3359
|
accessibilityLabel?: string;
|
|
3288
3360
|
type?: 'button' | 'reset' | 'submit';
|
|
3361
|
+
/**
|
|
3362
|
+
* It is exposed for internal usage with tooltip.
|
|
3363
|
+
*
|
|
3364
|
+
* @private
|
|
3365
|
+
*/
|
|
3366
|
+
'aria-describedby'?: string;
|
|
3289
3367
|
onClick?: Platform.Select<{
|
|
3290
3368
|
native: (event: GestureResponderEvent) => void;
|
|
3291
3369
|
web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
@@ -3340,70 +3418,6 @@ declare type CounterProps = {
|
|
|
3340
3418
|
} & TestID & StyledPropsBlade$1;
|
|
3341
3419
|
declare const Counter: ({ value, max, intent, variant, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
|
|
3342
3420
|
|
|
3343
|
-
type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
|
|
3344
|
-
Theme$1['colors']['feedback']['text']
|
|
3345
|
-
>}`;
|
|
3346
|
-
type FeedbackActionColors$1 = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<
|
|
3347
|
-
Theme$1['colors']['feedback'][Feedback]['action']['text']
|
|
3348
|
-
>}`;
|
|
3349
|
-
type SurfaceColors$1 = `surface.text.${DotNotationColorStringToken<
|
|
3350
|
-
Theme$1['colors']['surface']['text']
|
|
3351
|
-
>}`;
|
|
3352
|
-
type ActionColors$1 = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
|
|
3353
|
-
type BadgeTextColors$1 = `badge.text.${DotNotationColorStringToken<
|
|
3354
|
-
Theme$1['colors']['badge']['text']
|
|
3355
|
-
>}`;
|
|
3356
|
-
|
|
3357
|
-
type BrandPrimaryColors$1 = `brand.primary.${keyof Theme$1['colors']['brand']['primary']}`;
|
|
3358
|
-
|
|
3359
|
-
type As$1 =
|
|
3360
|
-
| 'code'
|
|
3361
|
-
| 'h1'
|
|
3362
|
-
| 'h2'
|
|
3363
|
-
| 'h3'
|
|
3364
|
-
| 'h4'
|
|
3365
|
-
| 'h5'
|
|
3366
|
-
| 'h6'
|
|
3367
|
-
| 'p'
|
|
3368
|
-
| 'span'
|
|
3369
|
-
| 'abbr'
|
|
3370
|
-
| 'q'
|
|
3371
|
-
| 'cite'
|
|
3372
|
-
| 'figcaption'
|
|
3373
|
-
| 'div';
|
|
3374
|
-
type BaseTextProps$1 = {
|
|
3375
|
-
id?: string;
|
|
3376
|
-
color?:
|
|
3377
|
-
| BrandPrimaryColors$1
|
|
3378
|
-
| ActionColors$1
|
|
3379
|
-
| FeedbackColors$1
|
|
3380
|
-
| SurfaceColors$1
|
|
3381
|
-
| FeedbackActionColors$1
|
|
3382
|
-
| BadgeTextColors$1;
|
|
3383
|
-
fontFamily?: keyof Theme$1['typography']['fonts']['family'];
|
|
3384
|
-
fontSize?: keyof Theme$1['typography']['fonts']['size'];
|
|
3385
|
-
fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
3386
|
-
fontStyle?: 'italic' | 'normal';
|
|
3387
|
-
textDecorationLine?: 'line-through' | 'none' | 'underline';
|
|
3388
|
-
lineHeight?: keyof Theme$1['typography']['lineHeights'];
|
|
3389
|
-
/**
|
|
3390
|
-
* Web only
|
|
3391
|
-
*/
|
|
3392
|
-
as?: As$1;
|
|
3393
|
-
textAlign?: 'center' | 'justify' | 'left' | 'right';
|
|
3394
|
-
truncateAfterLines?: number;
|
|
3395
|
-
className?: string;
|
|
3396
|
-
style?: React.CSSProperties;
|
|
3397
|
-
children: React.ReactNode;
|
|
3398
|
-
accessibilityProps?: Partial<AccessibilityProps>;
|
|
3399
|
-
/**
|
|
3400
|
-
* React Native only
|
|
3401
|
-
*/
|
|
3402
|
-
numberOfLines?: number;
|
|
3403
|
-
componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code';
|
|
3404
|
-
} & TestID &
|
|
3405
|
-
StyledPropsBlade$1;
|
|
3406
|
-
|
|
3407
3421
|
/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
|
|
3408
3422
|
|
|
3409
3423
|
|
|
@@ -3430,12 +3444,12 @@ type TextVariant$1 = 'body' | 'caption';
|
|
|
3430
3444
|
|
|
3431
3445
|
type TextBodyVariant$1 = TextCommonProps$1 & {
|
|
3432
3446
|
variant?: Extract<TextVariant$1, 'body'>;
|
|
3433
|
-
size?: 'xsmall' | 'small' | 'medium' | 'large'
|
|
3447
|
+
size?: Extract<BaseTextSizes$1, 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
3434
3448
|
};
|
|
3435
3449
|
|
|
3436
3450
|
type TextCaptionVariant$1 = TextCommonProps$1 & {
|
|
3437
3451
|
variant?: Extract<TextVariant$1, 'caption'>;
|
|
3438
|
-
size?: 'medium'
|
|
3452
|
+
size?: Extract<BaseTextSizes$1, 'medium'>;
|
|
3439
3453
|
};
|
|
3440
3454
|
|
|
3441
3455
|
/**
|
|
@@ -5354,6 +5368,7 @@ declare type BaseTextProps = {
|
|
|
5354
5368
|
numberOfLines?: number;
|
|
5355
5369
|
componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code';
|
|
5356
5370
|
} & TestID & StyledPropsBlade$1;
|
|
5371
|
+
declare type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
5357
5372
|
|
|
5358
5373
|
declare const validAsValues$2: readonly ["span", "h1", "h2", "h3", "h4", "h5", "h6"];
|
|
5359
5374
|
declare type TitleProps = {
|
|
@@ -5364,7 +5379,7 @@ declare type TitleProps = {
|
|
|
5364
5379
|
* **Note** This takes priority over `type` and `constrast` prop to decide color of title
|
|
5365
5380
|
*/
|
|
5366
5381
|
color?: BaseTextProps['color'];
|
|
5367
|
-
size?: 'small' | 'medium' | 'large' | 'xlarge'
|
|
5382
|
+
size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
|
|
5368
5383
|
contrast?: ColorContrastTypes;
|
|
5369
5384
|
type?: TextTypes;
|
|
5370
5385
|
children: React.ReactNode;
|
|
@@ -5374,7 +5389,6 @@ declare type TitleProps = {
|
|
|
5374
5389
|
declare const Title: ({ as, size, type, contrast, color, children, testID, textAlign, textDecorationLine, ...styledProps }: TitleProps) => ReactElement;
|
|
5375
5390
|
|
|
5376
5391
|
declare type HeadingVariant = 'regular' | 'subheading';
|
|
5377
|
-
declare type HeadingSize = 'small' | 'medium' | 'large';
|
|
5378
5392
|
declare const validAsValues$1: readonly ["span", "h1", "h2", "h3", "h4", "h5", "h6"];
|
|
5379
5393
|
declare type HeadingCommonProps = {
|
|
5380
5394
|
as?: typeof validAsValues$1[number];
|
|
@@ -5396,7 +5410,7 @@ declare type HeadingNormalVariant = HeadingCommonProps & {
|
|
|
5396
5410
|
*
|
|
5397
5411
|
* @default small
|
|
5398
5412
|
*/
|
|
5399
|
-
size?:
|
|
5413
|
+
size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large'>;
|
|
5400
5414
|
weight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
5401
5415
|
};
|
|
5402
5416
|
declare type HeadingSubHeadingVariant = HeadingCommonProps & {
|
|
@@ -5438,11 +5452,11 @@ declare type TextCommonProps = {
|
|
|
5438
5452
|
declare type TextVariant = 'body' | 'caption';
|
|
5439
5453
|
declare type TextBodyVariant = TextCommonProps & {
|
|
5440
5454
|
variant?: Extract<TextVariant, 'body'>;
|
|
5441
|
-
size?: 'xsmall' | 'small' | 'medium' | 'large'
|
|
5455
|
+
size?: Extract<BaseTextSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
5442
5456
|
};
|
|
5443
5457
|
declare type TextCaptionVariant = TextCommonProps & {
|
|
5444
5458
|
variant?: Extract<TextVariant, 'caption'>;
|
|
5445
|
-
size?: 'medium'
|
|
5459
|
+
size?: Extract<BaseTextSizes, 'medium'>;
|
|
5446
5460
|
};
|
|
5447
5461
|
/**
|
|
5448
5462
|
* Conditionally changing props based on variant.
|
|
@@ -5472,7 +5486,7 @@ declare type CodeCommonProps = {
|
|
|
5472
5486
|
*
|
|
5473
5487
|
* @default small
|
|
5474
5488
|
*/
|
|
5475
|
-
size?: 'small' | 'medium'
|
|
5489
|
+
size?: Extract<BaseTextSizes, 'small' | 'medium'>;
|
|
5476
5490
|
weight?: 'regular' | 'bold';
|
|
5477
5491
|
isHighlighted?: boolean;
|
|
5478
5492
|
color?: BaseTextProps['color'];
|
|
@@ -5557,13 +5571,40 @@ declare type ModalBodyProps = {
|
|
|
5557
5571
|
declare const ModalBody: (props: ModalBodyProps) => React__default.ReactElement;
|
|
5558
5572
|
|
|
5559
5573
|
declare type ModalProps = {
|
|
5560
|
-
|
|
5574
|
+
/**
|
|
5575
|
+
* Children of Modal
|
|
5576
|
+
* Only ModalHeader, ModalBody and ModalFooter are allowed as children
|
|
5577
|
+
*/
|
|
5578
|
+
children: React.ReactNode;
|
|
5579
|
+
/**
|
|
5580
|
+
Sets the modal to open or close
|
|
5581
|
+
* @default false
|
|
5582
|
+
*/
|
|
5561
5583
|
isOpen: boolean;
|
|
5584
|
+
/**
|
|
5585
|
+
* Callback function when user clicks on close button or outside the modal or on pressing escape key.
|
|
5586
|
+
*/
|
|
5562
5587
|
onDismiss: () => void;
|
|
5563
|
-
|
|
5588
|
+
/**
|
|
5589
|
+
* Ref to the element to be focused on opening the modal.
|
|
5590
|
+
*/
|
|
5591
|
+
initialFocusRef?: React.MutableRefObject<any>;
|
|
5592
|
+
/**
|
|
5593
|
+
* Size of the modal
|
|
5594
|
+
* @default 'small'
|
|
5595
|
+
*/
|
|
5564
5596
|
size?: 'small' | 'medium' | 'large';
|
|
5597
|
+
/**
|
|
5598
|
+
* Accessibility label for the modal
|
|
5599
|
+
*/
|
|
5565
5600
|
accessibilityLabel?: string;
|
|
5601
|
+
/**
|
|
5602
|
+
* Sets the z-index of the modal
|
|
5603
|
+
* @default 1000
|
|
5604
|
+
*/
|
|
5605
|
+
zIndex?: number;
|
|
5566
5606
|
};
|
|
5607
|
+
|
|
5567
5608
|
declare const Modal: (props: ModalProps) => React__default.ReactElement;
|
|
5568
5609
|
|
|
5569
5610
|
declare type ProgressBarCommonProps = {
|
|
@@ -6360,6 +6401,12 @@ declare type BottomSheetProps = {
|
|
|
6360
6401
|
* By default the initial focus will go to the close button
|
|
6361
6402
|
*/
|
|
6362
6403
|
initialFocusRef?: React.MutableRefObject<any>;
|
|
6404
|
+
/**
|
|
6405
|
+
* Sets the z-index of the bottom sheet
|
|
6406
|
+
* Note: when using stacked bottom sheet make sure all the bottom sheets have the same zIndex
|
|
6407
|
+
* @default 100
|
|
6408
|
+
*/
|
|
6409
|
+
zIndex?: number;
|
|
6363
6410
|
};
|
|
6364
6411
|
declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick'> & {
|
|
6365
6412
|
/**
|