@razorpay/blade 8.1.0 → 8.2.2

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.
@@ -1,4775 +0,0 @@
1
- /// <reference types="react" />
2
- import * as React$1 from 'react';
3
- import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
4
- import * as react_native from 'react-native';
5
- import { AccessibilityRole, ViewStyle, ImageSourcePropType, View, GestureResponderEvent } from 'react-native';
6
- import { CSSObject } from 'styled-components';
7
- import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
8
-
9
- type BorderRadius = Readonly<{
10
- /** none: 0(px/rem/pt) */
11
- none: 0;
12
- /** small: 2(px/rem/pt) */
13
- small: 2;
14
- /** medium: 4(px/rem/pt) */
15
- medium: 4;
16
- /** large: 8(px/rem/pt) */
17
- large: 8;
18
- /** max: 9999(px/rem/pt). This will round the left and right side of the box element */
19
- max: 9999;
20
- /** round: 50%(pt). This will turn the box element into a circle */
21
- round: '50%';
22
- }>;
23
-
24
- type BorderWidth = Readonly<{
25
- /** none: 0(px/rem/pt) */
26
- none: 0;
27
- /** thin: 1(px/rem/pt) */
28
- thin: 1;
29
- /** thick: 1.5(px/rem/pt) */
30
- thick: 1.5;
31
- }>;
32
-
33
- type Border = Readonly<{
34
- radius: BorderRadius;
35
- width: BorderWidth;
36
- }>;
37
-
38
- type Breakpoints = Readonly<{
39
- /**
40
- * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
41
- *
42
- * Think of this as styles without any media query.
43
- *
44
- * ### Example
45
- *
46
- * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
47
- * ```jsx
48
- * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
49
- * ```
50
- *
51
- * This roughly translates into -
52
- *
53
- * ```
54
- * .Box {
55
- * margin: 'spacing.1';
56
- * }
57
- *
58
- * @media screen and (min-width: 768px) {
59
- * .Box {
60
- * margin: 'spacing.2';
61
- * }
62
- * }
63
- * ```
64
- */
65
- base: number;
66
- /**
67
- * `@media screen and (min-width: 320px)`
68
- *
69
- * Small Mobiles
70
- */
71
- xs: number;
72
- /**
73
- * `@media screen and (min-width: 480px)`
74
- *
75
- * Mobiles and Small Tablets
76
- */
77
- s: number;
78
- /**
79
- * `@media screen and (min-width: 768px)`
80
- *
81
- * Medium and Large Tablets.
82
- *
83
- * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
84
- * Hence this breakpoint can be used for desktop styling.
85
- *
86
- * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
87
- *
88
- * ```jsx
89
- * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
90
- * ```
91
- *
92
- */
93
- m: number;
94
- /**
95
- * `@media screen and (min-width: 1024px)`
96
- *
97
- * Desktop
98
- */
99
- l: number;
100
- /**
101
- * `@media screen and (min-width: 1200px)`
102
- *
103
- * HD Desktop
104
- */
105
- xl: number;
106
- }>;
107
-
108
- type FontFamily = {
109
- /** Used for all type of textual content except code snippets */
110
- text: string;
111
- /** Used for code snippets */
112
- code: string;
113
- };
114
-
115
- type FontWeight = {
116
- regular: 400;
117
- bold: 700;
118
- };
119
-
120
- /**
121
- * For font size and line-heights we can’t say from xl to 2xl the value will necessary increase.
122
- * it might decrease or remain same because these are alias tokens and we need aliases for cross platform.
123
- * so for example xl on mobile can be 32px and on desktop xl can be 34px,
124
- * similarly 2xl on mobile can be 34px but on desktop doesn’t necessarily mean 2xl will be more than xl(34px) it can be 32 as well since visually they make better hierarchy.
125
- */
126
-
127
- type FontSize = {
128
- /** desktop: 9(px/rem/pt)
129
- *
130
- * mobile: 9(px/rem/pt)
131
- */
132
- 10: number;
133
- /** desktop: 10(px/rem/pt)
134
- *
135
- * mobile: 10(px/rem/pt)
136
- */
137
- 25: number;
138
- /** desktop: 11(px/rem/pt)
139
- *
140
- * mobile: 11(px/rem/pt)
141
- */
142
- 50: number;
143
- /** desktop: 12(px/rem/pt)
144
- *
145
- * mobile: 12(px/rem/pt)
146
- */
147
- 75: number;
148
- /** desktop: 14(px/rem/pt)
149
- *
150
- * mobile: 14(px/rem/pt)
151
- */
152
- 100: number;
153
- /** desktop: 16(px/rem/pt)
154
- *
155
- * mobile: 16(px/rem/pt)
156
- */
157
- 200: number;
158
- /** desktop: 18(px/rem/pt)
159
- *
160
- * mobile: 16(px/rem/pt)
161
- */
162
- 300: number;
163
- /** desktop: 20(px/rem/pt)
164
- *
165
- * mobile: 18(px/rem/pt)
166
- */
167
- 400: number;
168
- /** desktop: 22(px/rem/pt)
169
- *
170
- * mobile: 20(px/rem/pt)
171
- */
172
- 500: number;
173
- /** desktop: 24(px/rem/pt)
174
- *
175
- * mobile: 20(px/rem/pt)
176
- */
177
- 600: number;
178
- /** desktop: 28(px/rem/pt)
179
- *
180
- * mobile: 24(px/rem/pt)
181
- */
182
- 700: number;
183
- /** desktop: 32(px/rem/pt)
184
- *
185
- * mobile: 28(px/rem/pt)
186
- */
187
- 800: number;
188
- /** desktop: 36(px/rem/pt)
189
- *
190
- * mobile: 32(px/rem/pt)
191
- */
192
- 900: number;
193
- /** desktop: 40(px/rem/pt)
194
- *
195
- * mobile: 32(px/rem/pt)
196
- */
197
- 1000: number;
198
- };
199
-
200
- type Typography = {
201
- fonts: {
202
- family: FontFamily;
203
- size: FontSize;
204
- weight: FontWeight;
205
- };
206
- lineHeights: {
207
- /** desktop: 0(px/rem/pt)
208
- *
209
- * mobile: 0(px/rem/pt)
210
- */
211
- 0: number;
212
- /** desktop: 14(px/rem/pt)
213
- *
214
- * mobile: 14(px/rem/pt)
215
- */
216
- 25: number;
217
- /** desktop: 16(px/rem/pt)
218
- *
219
- * mobile: 16(px/rem/pt)
220
- */
221
- 50: number;
222
- /** desktop: 18(px/rem/pt)
223
- *
224
- * mobile: 18(px/rem/pt)
225
- */
226
- 75: number;
227
- /** desktop: 20(px/rem/pt)
228
- *
229
- * mobile: 20(px/rem/pt)
230
- */
231
- 100: number;
232
- /** desktop: 24(px/rem/pt)
233
- *
234
- * mobile: 20(px/rem/pt)
235
- */
236
- 200: number;
237
- /** desktop: 24(px/rem/pt)
238
- *
239
- * mobile: 24(px/rem/pt)
240
- */
241
- 300: number;
242
- /** desktop: 28(px/rem/pt)
243
- *
244
- * mobile: 24(px/rem/pt)
245
- */
246
- 400: number;
247
- /** desktop: 32(px/rem/pt)
248
- *
249
- * mobile: 28(px/rem/pt)
250
- */
251
- 500: number;
252
- /** desktop: 40(px/rem/pt)
253
- *
254
- * mobile: 32(px/rem/pt)
255
- */
256
- 600: number;
257
- /** desktop: 40(px/rem/pt)
258
- *
259
- * mobile: 40(px/rem/pt)
260
- */
261
- 700: number;
262
- /** desktop: 48(px/rem/pt)
263
- *
264
- * mobile: 40(px/rem/pt)
265
- */
266
- 800: number;
267
- };
268
- // letterSpacings: {};
269
- };
270
-
271
- type TypographyPlatforms$1 = 'onDesktop' | 'onMobile';
272
-
273
- type TypographyWithPlatforms = Record<TypographyPlatforms$1, Typography>;
274
-
275
- /**
276
- * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
277
- *
278
- * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
279
- */
280
-
281
- type Spacing = Readonly<{
282
- /** 0: 0(px/rem/pt) */
283
- 0: 0;
284
- /** 1: 2(px/rem/pt) */
285
- 1: 2;
286
- /** 2: 4(px/rem/pt) */
287
- 2: 4;
288
- /** 3: 8(px/rem/pt) */
289
- 3: 8;
290
- /** 4: 12(px/rem/pt) */
291
- 4: 12;
292
- /** 5: 16(px/rem/pt) */
293
- 5: 16;
294
- /** 6: 20(px/rem/pt) */
295
- 6: 20;
296
- /** 7: 24(px/rem/pt) */
297
- 7: 24;
298
- /** 8: 32(px/rem/pt) */
299
- 8: 32;
300
- /** 9: 40(px/rem/pt) */
301
- 9: 40;
302
- /** 10: 48(px/rem/pt) */
303
- 10: 48;
304
- /** 11: 56(px/rem/pt) */
305
- 11: 56;
306
- }>;
307
-
308
- type ColorSchemeNames = 'dark' | 'light';
309
- type ColorSchemeNamesInput = ColorSchemeNames | 'system';
310
-
311
- type ColorSchemeModes = 'onDark' | 'onLight';
312
-
313
- type ShadowLevels = 1 | 2 | 3 | 4 | 5;
314
-
315
- type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
316
-
317
- type ColorContrastTypes = 'low' | 'high';
318
-
319
- type Shadows = {
320
- offsetX: {
321
- level: Record<ShadowLevels, number>;
322
- };
323
- offsetY: {
324
- level: Record<ShadowLevels, number>;
325
- };
326
- blurRadius: {
327
- level: Record<ShadowLevels, number>;
328
- };
329
- color: Record<
330
- ColorSchemeModes,
331
- {
332
- level: Record<ShadowLevels, string>;
333
- }
334
- >;
335
- androidElevation: {
336
- level: Record<ShadowLevels, number>;
337
- };
338
- };
339
-
340
- type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
341
-
342
- type ColorContrast = {
343
- [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
344
- };
345
-
346
- type ActionStates = {
347
- default: string;
348
- hover: string;
349
- focus: string;
350
- active: string;
351
- disabled: string;
352
- };
353
-
354
- type LinkActionStates = ActionStates & {
355
- visited: string;
356
- };
357
-
358
- type ActionStatesWithContrast = {
359
- default: ColorContrast;
360
- hover: ColorContrast;
361
- focus: ColorContrast;
362
- active: ColorContrast;
363
- disabled: ColorContrast;
364
- };
365
-
366
- type ActionVariants = {
367
- primary: ActionStates;
368
- secondary: ActionStates;
369
- tertiary: ActionStates;
370
- link: LinkActionStates;
371
- };
372
-
373
- type ActionVariantsWithContrast = {
374
- primary: ActionStatesWithContrast;
375
- secondary: ActionStatesWithContrast;
376
- tertiary: ActionStatesWithContrast;
377
- link: ActionStatesWithContrast;
378
- };
379
-
380
- // export type ActionProperties = {
381
- // background: ActionVariants;
382
- // border: ActionVariants;
383
- // text: ActionVariants;
384
- // icon: ActionVariants;
385
- // };
386
-
387
- type FeedbackActions = {
388
- background: Pick<ActionVariantsWithContrast, 'primary'>;
389
- border: Pick<ActionVariantsWithContrast, 'primary'>;
390
- text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
391
- icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
392
- };
393
-
394
- type Colors = {
395
- brand: {
396
- primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
397
- secondary: Record<500, string>;
398
- gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
399
- };
400
- feedback: {
401
- background: Record<Feedback, ColorContrast>;
402
- border: Record<Feedback, ColorContrast>;
403
- text: Record<Feedback, ColorContrast>;
404
- icon: Record<Feedback, ColorContrast>;
405
- positive: {
406
- action: FeedbackActions;
407
- };
408
- negative: {
409
- action: FeedbackActions;
410
- };
411
- information: {
412
- action: FeedbackActions;
413
- };
414
- notice: {
415
- action: FeedbackActions;
416
- };
417
- neutral: {
418
- action: FeedbackActions;
419
- };
420
- };
421
- surface: {
422
- background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
423
- border: Record<'normal' | 'subtle', ColorContrast>;
424
- text: Record<TextTypes, ColorContrast>;
425
- action: {
426
- icon: ActionStatesWithContrast;
427
- };
428
- };
429
- overlay: Record<'background', string>;
430
- action: {
431
- background: Omit<ActionVariants, 'link'>;
432
- border: Omit<ActionVariants, 'link'>;
433
- text: ActionVariants;
434
- icon: ActionVariants;
435
- };
436
- badge: {
437
- background: {
438
- blue: ColorContrast;
439
- };
440
- border: {
441
- blue: ColorContrast;
442
- };
443
- text: {
444
- blue: ColorContrast;
445
- };
446
- icon: {
447
- blue: ColorContrast;
448
- };
449
- };
450
- };
451
-
452
- type ColorsWithModes = Record<ColorSchemeModes, Colors>;
453
-
454
- type ThemeTokens = {
455
- name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
456
- border: Border;
457
- breakpoints: Breakpoints;
458
- colors: ColorsWithModes;
459
- motion: Motion;
460
- spacing: Spacing;
461
- shadows: Shadows;
462
- typography: TypographyWithPlatforms;
463
- };
464
-
465
- // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
466
- type AriaRoles =
467
- | Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'>
468
- | 'alert'
469
- | 'alertdialog'
470
- | 'application'
471
- | 'article'
472
- | 'banner'
473
- | 'button'
474
- | 'cell'
475
- | 'checkbox'
476
- | 'columnheader'
477
- | 'combobox'
478
- | 'complementary'
479
- | 'contentinfo'
480
- | 'definition'
481
- | 'dialog'
482
- | 'directory'
483
- | 'document'
484
- | 'feed'
485
- | 'figure'
486
- | 'form'
487
- | 'grid'
488
- | 'gridcell'
489
- | 'group'
490
- | 'heading'
491
- | 'img'
492
- | 'link'
493
- | 'list'
494
- | 'listbox'
495
- | 'listitem'
496
- | 'log'
497
- | 'main'
498
- | 'marquee'
499
- | 'math'
500
- | 'menu'
501
- | 'menubar'
502
- | 'menuitem'
503
- | 'menuitemcheckbox'
504
- | 'menuitemradio'
505
- | 'meter'
506
- | 'navigation'
507
- | 'none'
508
- | 'note'
509
- | 'option'
510
- | 'presentation'
511
- | 'progressbar'
512
- | 'radio'
513
- | 'radiogroup'
514
- | 'region'
515
- | 'row'
516
- | 'rowgroup'
517
- | 'rowheader'
518
- | 'scrollbar'
519
- | 'search'
520
- | 'searchbox'
521
- | 'separator'
522
- | 'slider'
523
- | 'spinbutton'
524
- | 'status'
525
- | 'switch'
526
- | 'tab'
527
- | 'table'
528
- | 'tablist'
529
- | 'tabpanel'
530
- | 'term'
531
- | 'textbox'
532
- | 'timer'
533
- | 'toolbar'
534
- | 'tooltip'
535
- | 'tree'
536
- | 'treegrid'
537
- | 'treeitem';
538
- type AccessibilityProps = AriaAttributes;
539
-
540
- type AriaAttributes = {
541
- role: AriaRoles;
542
- /**
543
- * Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
544
- */
545
- activeDescendant?: string;
546
- /**
547
- * 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.
548
- */
549
- atomic?: boolean;
550
- /**
551
- * 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.
552
- */
553
- autoComplete?: 'none' | 'inline' | 'list' | 'both';
554
- /**
555
- * 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.
556
- */
557
- busy?: boolean;
558
- /**
559
- * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
560
- * @see aria-pressed @see aria-selected.
561
- */
562
- checked?: boolean | 'mixed';
563
- /**
564
- * Defines the total number of columns in a table, grid, or treegrid.
565
- * @see aria-colindex.
566
- */
567
- colCount?: number;
568
- /**
569
- * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
570
- * @see aria-colcount @see aria-colspan.
571
- */
572
- colIndex?: number;
573
- /**
574
- * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
575
- * @see aria-colindex @see aria-rowspan.
576
- */
577
- colSpan?: number;
578
- /**
579
- * Identifies the element (or elements) whose contents or presence are controlled by the current element.
580
- * @see aria-owns.
581
- */
582
- controls?: string;
583
- /**
584
- * Indicates the element that represents the current item within a container or set of related elements.
585
- */
586
- current?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
587
- /**
588
- * Identifies the element (or elements) that describes the object.
589
- * @see aria-labelledby
590
- */
591
- describedBy?: string;
592
- /**
593
- * Identifies the element that provides a detailed, extended description for the object.
594
- * @see aria-describedby.
595
- */
596
- details?: string;
597
- /**
598
- * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
599
- * @see aria-hidden @see aria-readonly.
600
- */
601
- disabled?: boolean;
602
- /**
603
- * Indicates what functions can be performed when a dragged object is released on the drop target.
604
- * @deprecated in ARIA 1.1
605
- */
606
- dropEffect?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup';
607
- /**
608
- * Identifies the element that provides an error message for the object.
609
- * @see aria-invalid @see aria-describedby.
610
- */
611
- errorMessage?: string;
612
- /**
613
- * Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
614
- */
615
- expanded?: boolean;
616
- /**
617
- * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
618
- * allows assistive technology to override the general default of reading in document source order.
619
- */
620
- flowTo?: string;
621
- /**
622
- * Indicates an element's "grabbed" state in a drag-and-drop operation.
623
- * @deprecated in ARIA 1.1
624
- */
625
- grabbed?: boolean;
626
- /**
627
- * Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
628
- */
629
- hasPopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
630
- /**
631
- * Indicates whether the element is exposed to an accessibility API.
632
- * @see aria-disabled.
633
- */
634
- hidden?: boolean;
635
- /**
636
- * Indicates the entered value does not conform to the format expected by the application.
637
- * @see aria-errormessage.
638
- */
639
- invalid?: boolean | 'grammar' | 'spelling';
640
- /**
641
- * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
642
- */
643
- keyShortcuts?: string;
644
- /**
645
- * Defines a string value that labels the current element.
646
- * @see aria-labelledby.
647
- */
648
- label?: string;
649
- /**
650
- * Identifies the element (or elements) that labels the current element.
651
- * @see aria-describedby.
652
- */
653
- labelledBy?: string;
654
- /**
655
- * Defines the hierarchical level of an element within a structure.
656
- */
657
- level?: number;
658
- /**
659
- * 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.
660
- */
661
- liveRegion?: 'off' | 'assertive' | 'polite';
662
- /**
663
- * Indicates whether an element is modal when displayed.
664
- */
665
- modal?: boolean;
666
- /**
667
- * Indicates whether a text box accepts multiple lines of input or only a single line.
668
- */
669
- multiline?: boolean;
670
- /**
671
- * Indicates that the user may select more than one item from the current selectable descendants.
672
- */
673
- multiSelectable?: boolean;
674
- /**
675
- * Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
676
- */
677
- orientation?: 'horizontal' | 'vertical';
678
- /**
679
- * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
680
- * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
681
- * @see aria-controls.
682
- */
683
- owns?: string;
684
- /**
685
- * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
686
- * A hint could be a sample value or a brief description of the expected format.
687
- */
688
- placeholder?: string;
689
- /**
690
- * 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.
691
- * @see aria-setsize.
692
- */
693
- posInSet?: number;
694
- /**
695
- * Indicates the current "pressed" state of toggle buttons.
696
- * @see aria-checked @see aria-selected.
697
- */
698
- pressed?: boolean | 'mixed';
699
- /**
700
- * Indicates that the element is not editable, but is otherwise operable.
701
- * @see aria-disabled.
702
- */
703
- readOnly?: boolean;
704
- /**
705
- * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
706
- * @see aria-atomic.
707
- */
708
- relevant?:
709
- | 'additions'
710
- | 'additions removals'
711
- | 'additions text'
712
- | 'all'
713
- | 'removals'
714
- | 'removals additions'
715
- | 'removals text'
716
- | 'text'
717
- | 'text additions'
718
- | 'text removals';
719
- /**
720
- * Indicates that user input is required on the element before a form may be submitted.
721
- */
722
- required?: boolean;
723
- /**
724
- * Defines a human-readable, author-localized description for the role of an element.
725
- */
726
- roleDescription?: string;
727
- /**
728
- * Defines the total number of rows in a table, grid, or treegrid.
729
- * @see aria-rowindex.
730
- */
731
- rowCount?: number;
732
- /**
733
- * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
734
- * @see aria-rowcount @see aria-rowspan.
735
- */
736
- rowIndex?: number;
737
- /**
738
- * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
739
- * @see aria-rowindex @see aria-colspan.
740
- */
741
- rowSpan?: number;
742
- /**
743
- * Indicates the current "selected" state of various widgets.
744
- * @see aria-checked @see aria-pressed.
745
- */
746
- selected?: boolean;
747
- /**
748
- * 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.
749
- * @see aria-posinset.
750
- */
751
- setSize?: number;
752
- /**
753
- * Indicates if items in a table or grid are sorted in ascending or descending order.
754
- */
755
- sort?: 'none' | 'ascending' | 'descending' | 'other';
756
- /**
757
- * Defines the maximum allowed value for a range widget.
758
- */
759
- valueMax?: number;
760
- /**
761
- * Defines the minimum allowed value for a range widget.
762
- */
763
- valueMin?: number;
764
- /**
765
- * Defines the current value for a range widget.
766
- * @see aria-valuetext.
767
- */
768
- valueNow?: number;
769
- /**
770
- * Defines the human readable text alternative of aria-valuenow for a range widget.
771
- */
772
- valueText?: string;
773
- };
774
-
775
- /* eslint-disable @typescript-eslint/no-explicit-any */
776
-
777
- /**
778
- * Brands a type making them act as nominal
779
- * @see https://medium.com/@KevinBGreene/surviving-the-typescript-ecosystem-branding-and-type-tagging-6cf6e516523d
780
- */
781
- type Brand<Type, Name extends string> = Type & { __brand__?: Name };
782
-
783
- type NativeOrWebBrand = Brand<any, 'native' | 'web'>;
784
-
785
- /* eslint-disable @typescript-eslint/no-namespace */
786
-
787
-
788
- declare namespace Platform {
789
- export type Name = 'native';
790
- /**
791
- * Right now, the module resolution is set to resolve `.native` files,
792
- *
793
- * Thus Platform.Select<> type will return the `native` type
794
- */
795
- export type Select<Options extends { web: unknown; native: unknown }> = Brand<
796
- Options[Name],
797
- 'platform-native'
798
- >;
799
-
800
- export type CastNative<T extends NativeOrWebBrand | undefined> = Extract<
801
- T,
802
- { __brand__?: 'platform-native' | 'platform-all' }
803
- >;
804
-
805
- export type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<
806
- T,
807
- { __brand__?: 'platform-web' | 'platform-all' }
808
- >;
809
- }
810
-
811
- type Duration = {
812
- /** `70` milliseconds */
813
- '2xquick': 70;
814
- /** `150` milliseconds */
815
- xquick: 150;
816
- /** `200` milliseconds */
817
- quick: 200;
818
- /** `250` milliseconds */
819
- moderate: 250;
820
- /** `300` milliseconds */
821
- xmoderate: 300;
822
- /** `400` milliseconds */
823
- gentle: 400;
824
- /** `600` milliseconds */
825
- xgentle: 600;
826
- /** `900` milliseconds */
827
- '2xgentle': 900;
828
- };
829
-
830
- type Delay = {
831
- /** `70` milliseconds */
832
- '2xshort': 70;
833
- /** `120` milliseconds */
834
- xshort: 120;
835
- /** `180` milliseconds */
836
- short: 180;
837
- /** `3000` milliseconds */
838
- long: 3000;
839
- /** `5000` milliseconds */
840
- xlong: 5000;
841
- };
842
-
843
- type EasingFunctionFactory = { factory: () => (value: number) => number }; // similar to EasingFunctionFactory of `react-native-reanimated`
844
- type EasingType<Value extends string> = Platform.Select<{
845
- web: Value;
846
- native: EasingFunctionFactory;
847
- }>;
848
-
849
- type Easing = {
850
- /** Easings for all standard animations*/
851
- standard: {
852
- /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
853
- *
854
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
855
- attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
856
- /** `cubic-bezier(0.3, 0, 0.2, 1)`
857
- *
858
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
859
- effective: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
860
- /** `cubic-bezier(0.5, 0, 0, 1)`
861
- *
862
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
863
- revealing: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
864
- /** `cubic-bezier(1, 0.5, 0, 0.5)`
865
- *
866
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
867
- wary: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
868
- };
869
- /** Easings for all entrance animations*/
870
- entrance: {
871
- /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
872
- *
873
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
874
- attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
875
- /** `cubic-bezier(0, 0, 0.2, 1)`
876
- *
877
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
878
- effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
879
- /** `cubic-bezier(0, 0, 0, 1)`
880
- *
881
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
882
- revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
883
- };
884
- /** Easings for all exit animations*/
885
- exit: {
886
- /** `cubic-bezier(0.7, 0, 0.5, 1)`
887
- *
888
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
889
- attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
890
- /** `cubic-bezier(0.17, 0, 1, 1)`
891
- *
892
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
893
- effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
894
- /** `cubic-bezier(0.5, 0, 1, 1)`
895
- *
896
- * Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
897
- revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
898
- };
899
- };
900
-
901
- type Motion = Readonly<{
902
- delay: Delay;
903
- duration: Duration;
904
- easing: Easing;
905
- }>;
906
-
907
- /**
908
- * @template TokenType token type generic
909
- * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast`
910
- */
911
- type DotNotationColorStringToken<TokenType> = {
912
- [K in keyof TokenType]: `${Extract<K, number | string>}.${TokenType[K] extends Record<
913
- string,
914
- string
915
- >
916
- ? Extract<keyof TokenType[K], number | string>
917
- : DotNotationColorStringToken<TokenType[K]>}`;
918
- }[keyof TokenType];
919
-
920
- type DotNotationSpacingStringToken = `spacing.${keyof Spacing}`;
921
-
922
- /**
923
- * Use this when you want children to be string.
924
- *
925
- * This covers scenarios like
926
- * ```jsx
927
- * <Title>Hi</Title>
928
- * <Title>{dynamicVariable} something</Title>
929
- * ```
930
- *
931
- *
932
- * ### Usage
933
- *
934
- * ```ts
935
- * import type { StringChildrenType } from '~helpers/types';
936
- *
937
- * type MyProps = {
938
- * children: StringChildrenType;
939
- * }
940
- * ```
941
- */
942
- type StringChildrenType = React__default.ReactText | React__default.ReactText[];
943
-
944
- /**
945
- *
946
- * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
947
- *
948
- * ### Usage
949
- *
950
- * ```ts
951
- * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
952
- * ```
953
- *
954
- * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
955
- *
956
- * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
957
- * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
958
- *
959
- */
960
- type StringWithAutocomplete = string & Record<never, never>;
961
-
962
- type TestID = {
963
- testID?: string;
964
- };
965
-
966
- /**
967
- * Similar to `Pick` except this returns `never` when value doesn't exist (native `Pick` returns `unknown`).
968
- *
969
- * You might have to ts-ignore the non-existing type error while using this. This is done so that you can get jsdoc from actual type.
970
- *
971
- * E.g. This will pick from ViewStyle prop if value exists else returns undefined.
972
- *
973
- * ```ts
974
- * // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
975
- * native: PickIfExist<ViewStyle, T>;
976
- * ```
977
- */
978
- type PickIfExist$1<T, K extends keyof T> = {
979
- [P in K]: P extends keyof T ? T[P] : never;
980
- };
981
-
982
- /**
983
- * Picks the types based on the platform (web / native).
984
- *
985
- * E.g.
986
- * ```ts
987
- * type CSSObject = PickCSSByPlatform<'display'>
988
- * // On Web --> This will be all possible web display properties like `block`, `flex`, `inline`, and more.
989
- * // On Native --> This will be just `flex` and `none`
990
- * ```
991
- */
992
- type PickCSSByPlatform$1<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
993
- web: PickIfExist$1<CSSObject, T>;
994
- // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
995
- native: PickIfExist$1<ViewStyle, T>;
996
- }>;
997
-
998
- declare type ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;
999
- declare const useActionListContext: () => ActionListContextProp;
1000
- declare type ActionListProps = {
1001
- children: React__default.ReactNode[];
1002
- /**
1003
- * Decides the backgroundColor of ActionList
1004
- */
1005
- surfaceLevel?: 2 | 3;
1006
- } & TestID;
1007
- declare const ActionList: React__default.MemoExoticComponent<({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element>;
1008
-
1009
- type Theme$1 = {
1010
- name: ThemeTokens['name'];
1011
- border: Border;
1012
- breakpoints: Breakpoints;
1013
- colors: Colors;
1014
- spacing: Spacing;
1015
- motion: Motion;
1016
- shadows: Omit<Shadows, 'color'> & {
1017
- color: {
1018
- level: Record<ShadowLevels, string>;
1019
- };
1020
- };
1021
- typography: Typography;
1022
- };
1023
-
1024
- /**
1025
- * Returns the value or the responsive object with that value
1026
- *
1027
- * ## Usage
1028
- *
1029
- * Example if you pass string argument, return type will be string or responsive object with string value
1030
- *
1031
- * `MakeValueResponsive<string>`
1032
- * ```ts
1033
- * string |
1034
- * {
1035
- * base?: string;
1036
- * xs?: string;
1037
- * s?: string;
1038
- * // ... other breakpoints
1039
- * }
1040
- * ```
1041
- *
1042
- */
1043
- // When type is `never`, we just want to return `never` rather than { base: never, ...etc } since that prop is intended to be never used
1044
- // Explaination of [T] extends [never] -> https://stackoverflow.com/questions/65492464/typescript-never-type-condition
1045
- type MakeValueResponsive$1<T> = [T] extends [never]
1046
- ? never
1047
- :
1048
- | T
1049
- | {
1050
- // Using this instead of Record to maintain the jsdoc from breakpoints.ts
1051
- [P in keyof Breakpoints]?: T;
1052
- };
1053
-
1054
- /**
1055
- * Turns all the values in object into responsive object.
1056
- *
1057
- * ```ts
1058
- * MakeObjectResponsive<{ hello: string}>
1059
- *
1060
- * // Outputs:
1061
- * {
1062
- * hello: string | {
1063
- * base?: string;
1064
- * xs?: string;
1065
- * s?: string;
1066
- * // ... other breakpoints
1067
- * }
1068
- * }
1069
- * ```
1070
- */
1071
- type MakeObjectResponsive$1<T> = { [P in keyof T]: MakeValueResponsive$1<T[P]> };
1072
-
1073
- type ArrayOfMaxLength4$1<T> = readonly [T?, T?, T?, T?];
1074
- type SpaceUnits$1 = Platform.Select<{
1075
- web: 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
1076
- native: 'px' | '%';
1077
- }>;
1078
- type SpacingValueType$1 = DotNotationSpacingStringToken | `${string}${SpaceUnits$1}` | 'auto';
1079
-
1080
- type MarginProps$1 = MakeObjectResponsive$1<{
1081
- /**
1082
- * ### Margin Shorthand
1083
- *
1084
- * #### Usage
1085
- *
1086
- * ```jsx
1087
- * margin="spacing.3"
1088
- * margin="20px"
1089
- * margin={["spacing.3", "spacing.1", "spacing.0", "10px"]}
1090
- * ```
1091
- *
1092
- * ---
1093
- * #### Spacing to Pixel values
1094
- *
1095
- * - `spacing.0` - 0px
1096
- * - `spacing.1` - 2px
1097
- * - `spacing.2` - 4px
1098
- * - `spacing.3` - 8px
1099
- * - `spacing.4` - 12px
1100
- * - `spacing.5` - 16px
1101
- * - `spacing.6` - 20px
1102
- * - `spacing.7` - 24px
1103
- * - `spacing.8` - 32px
1104
- * - `spacing.9` - 40px
1105
- * - `spacing.10` - 48px
1106
- * - `spacing.11` - 56px
1107
- *
1108
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1109
- *
1110
- */
1111
- margin: SpacingValueType$1 | ArrayOfMaxLength4$1<SpacingValueType$1>;
1112
- /**
1113
- * ### Margin Horizontal
1114
- *
1115
- * #### Usage
1116
- *
1117
- * ```jsx
1118
- * marginX="spacing.3"
1119
- * marginX="20px"
1120
- * ```
1121
- *
1122
- * ---
1123
- * #### Spacing to Pixel values
1124
- *
1125
- * - `spacing.0` - 0px
1126
- * - `spacing.1` - 2px
1127
- * - `spacing.2` - 4px
1128
- * - `spacing.3` - 8px
1129
- * - `spacing.4` - 12px
1130
- * - `spacing.5` - 16px
1131
- * - `spacing.6` - 20px
1132
- * - `spacing.7` - 24px
1133
- * - `spacing.8` - 32px
1134
- * - `spacing.9` - 40px
1135
- * - `spacing.10` - 48px
1136
- * - `spacing.11` - 56px
1137
- *
1138
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1139
- *
1140
- */
1141
- marginX: SpacingValueType$1;
1142
- /**
1143
- * ### Margin Vertical
1144
- *
1145
- * #### Usage
1146
- *
1147
- * ```jsx
1148
- * marginY="spacing.3"
1149
- * marginY="20px"
1150
- * ```
1151
- *
1152
- * ---
1153
- * #### Spacing to Pixel values
1154
- *
1155
- * - `spacing.0` - 0px
1156
- * - `spacing.1` - 2px
1157
- * - `spacing.2` - 4px
1158
- * - `spacing.3` - 8px
1159
- * - `spacing.4` - 12px
1160
- * - `spacing.5` - 16px
1161
- * - `spacing.6` - 20px
1162
- * - `spacing.7` - 24px
1163
- * - `spacing.8` - 32px
1164
- * - `spacing.9` - 40px
1165
- * - `spacing.10` - 48px
1166
- * - `spacing.11` - 56px
1167
- *
1168
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1169
- *
1170
- */
1171
- marginY: SpacingValueType$1;
1172
- /**
1173
- * ### Margin Top
1174
- *
1175
- * #### Usage
1176
- *
1177
- * ```jsx
1178
- * marginTop="spacing.3"
1179
- * marginTop="20px"
1180
- * ```
1181
- *
1182
- * ---
1183
- * #### Spacing to Pixel values
1184
- *
1185
- * - `spacing.0` - 0px
1186
- * - `spacing.1` - 2px
1187
- * - `spacing.2` - 4px
1188
- * - `spacing.3` - 8px
1189
- * - `spacing.4` - 12px
1190
- * - `spacing.5` - 16px
1191
- * - `spacing.6` - 20px
1192
- * - `spacing.7` - 24px
1193
- * - `spacing.8` - 32px
1194
- * - `spacing.9` - 40px
1195
- * - `spacing.10` - 48px
1196
- * - `spacing.11` - 56px
1197
- *
1198
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1199
- */
1200
- marginTop: SpacingValueType$1;
1201
- /**
1202
- * ### Margin Right
1203
- *
1204
- * #### Usage
1205
- *
1206
- * ```jsx
1207
- * marginRight="spacing.3"
1208
- * marginRight="20px"
1209
- * ```
1210
- *
1211
- * ---
1212
- * #### Spacing to Pixel values
1213
- *
1214
- * - `spacing.0` - 0px
1215
- * - `spacing.1` - 2px
1216
- * - `spacing.2` - 4px
1217
- * - `spacing.3` - 8px
1218
- * - `spacing.4` - 12px
1219
- * - `spacing.5` - 16px
1220
- * - `spacing.6` - 20px
1221
- * - `spacing.7` - 24px
1222
- * - `spacing.8` - 32px
1223
- * - `spacing.9` - 40px
1224
- * - `spacing.10` - 48px
1225
- * - `spacing.11` - 56px
1226
- *
1227
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1228
- */
1229
- marginRight: SpacingValueType$1;
1230
- /**
1231
- * ### Margin Bottom
1232
- *
1233
- * #### Usage
1234
- *
1235
- * ```jsx
1236
- * marginBottom="spacing.3"
1237
- * marginBottom="20px"
1238
- * ```
1239
- *
1240
- * ---
1241
- * #### Spacing to Pixel values
1242
- *
1243
- * - `spacing.0` - 0px
1244
- * - `spacing.1` - 2px
1245
- * - `spacing.2` - 4px
1246
- * - `spacing.3` - 8px
1247
- * - `spacing.4` - 12px
1248
- * - `spacing.5` - 16px
1249
- * - `spacing.6` - 20px
1250
- * - `spacing.7` - 24px
1251
- * - `spacing.8` - 32px
1252
- * - `spacing.9` - 40px
1253
- * - `spacing.10` - 48px
1254
- * - `spacing.11` - 56px
1255
- *
1256
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1257
- */
1258
- marginBottom: SpacingValueType$1;
1259
- /**
1260
- * ### Margin Left
1261
- *
1262
- * #### Usage
1263
- *
1264
- * ```jsx
1265
- * marginLeft="spacing.3"
1266
- * marginLeft="20px"
1267
- * ```
1268
- *
1269
- * ---
1270
- * #### Spacing to Pixel values
1271
- *
1272
- * - `spacing.0` - 0px
1273
- * - `spacing.1` - 2px
1274
- * - `spacing.2` - 4px
1275
- * - `spacing.3` - 8px
1276
- * - `spacing.4` - 12px
1277
- * - `spacing.5` - 16px
1278
- * - `spacing.6` - 20px
1279
- * - `spacing.7` - 24px
1280
- * - `spacing.8` - 32px
1281
- * - `spacing.9` - 40px
1282
- * - `spacing.10` - 48px
1283
- * - `spacing.11` - 56px
1284
- *
1285
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1286
- */
1287
- marginLeft: SpacingValueType$1;
1288
- }>;
1289
-
1290
- type FlexboxProps$1 = MakeObjectResponsive$1<
1291
- {
1292
- /**
1293
- * This uses the native gap property which might not work on older browsers.
1294
- * If you want to support older browsers, you might want to use `margin` instead.
1295
- *
1296
- * @see https://caniuse.com/?search=gap
1297
- */
1298
- gap: SpacingValueType$1;
1299
- /**
1300
- * This uses the native row-gap property which might not work on older browsers.
1301
- * If you want to support older browsers, you might want to use `margin` instead.
1302
- *
1303
- * @see https://caniuse.com/?search=row-gap
1304
- */
1305
- rowGap: SpacingValueType$1;
1306
- /**
1307
- * This uses the native column-gap property which might not work on older browsers.
1308
- * If you want to support older browsers, you might want to use `margin` instead.
1309
- *
1310
- * @see https://caniuse.com/?search=column-gap
1311
- */
1312
- columnGap: SpacingValueType$1;
1313
- /**
1314
- * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
1315
- *
1316
- * @see https://developer.mozilla.org/docs/Web/CSS/flex
1317
- */
1318
- flex: string | number;
1319
- } & PickCSSByPlatform$1<
1320
- | 'flexWrap'
1321
- | 'flexDirection'
1322
- | 'flexGrow'
1323
- | 'flexShrink'
1324
- | 'flexBasis'
1325
- | 'alignItems'
1326
- | 'alignContent'
1327
- | 'alignSelf'
1328
- | 'justifyItems'
1329
- | 'justifyContent'
1330
- | 'justifySelf'
1331
- | 'placeSelf'
1332
- | 'order'
1333
- >
1334
- >;
1335
-
1336
- type PositionProps$1 = MakeObjectResponsive$1<
1337
- {
1338
- top: SpacingValueType$1;
1339
- right: SpacingValueType$1;
1340
- bottom: SpacingValueType$1;
1341
- left: SpacingValueType$1;
1342
- } & PickCSSByPlatform$1<'position' | 'zIndex'>
1343
- >;
1344
-
1345
- type GridProps$1 = MakeObjectResponsive$1<
1346
- PickCSSByPlatform$1<
1347
- | 'grid'
1348
- | 'gridColumn'
1349
- | 'gridRow'
1350
- | 'gridRowStart'
1351
- | 'gridRowEnd'
1352
- | 'gridColumnStart'
1353
- | 'gridColumnEnd'
1354
- | 'gridArea'
1355
- | 'gridAutoFlow'
1356
- | 'gridAutoRows'
1357
- | 'gridAutoColumns'
1358
- | 'gridTemplate'
1359
- | 'gridTemplateAreas'
1360
- | 'gridTemplateColumns'
1361
- | 'gridTemplateRows'
1362
- >
1363
- >;
1364
-
1365
- type StyledPropsBlade = Partial<
1366
- Omit<
1367
- MarginProps$1 &
1368
- Pick<FlexboxProps$1, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &
1369
- PositionProps$1 &
1370
- Pick<
1371
- GridProps$1,
1372
- | 'gridColumn'
1373
- | 'gridRow'
1374
- | 'gridRowStart'
1375
- | 'gridRowEnd'
1376
- | 'gridColumnStart'
1377
- | 'gridColumnEnd'
1378
- | 'gridArea'
1379
- >,
1380
- '__brand__'
1381
- >
1382
- >;
1383
-
1384
- type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
1385
- Theme$1['colors']['feedback']['icon']
1386
- >}`;
1387
-
1388
- type FeedbackActionIconColors$1 = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<
1389
- Theme$1['colors']['feedback'][Feedback]['action']['icon']
1390
- >}`;
1391
-
1392
- type ActionIconColors$1 = `action.icon.${DotNotationColorStringToken<
1393
- Theme$1['colors']['action']['icon']
1394
- >}`;
1395
-
1396
- type TextIconColors$1 = `surface.text.${DotNotationColorStringToken<
1397
- Theme$1['colors']['surface']['text']
1398
- >}`;
1399
-
1400
- type SurfaceActionIconColors$1 = `surface.action.icon.${DotNotationColorStringToken<
1401
- Theme$1['colors']['surface']['action']['icon']
1402
- >}`;
1403
-
1404
- type BadgeIconColors$1 = `badge.icon.${DotNotationColorStringToken<
1405
- Theme$1['colors']['badge']['icon']
1406
- >}`;
1407
-
1408
- type IconSize$1 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
1409
- type IconProps$1 = {
1410
- /**
1411
- * Color token (not to be confused with actual hsla value)
1412
- */
1413
- color:
1414
- | ActionIconColors$1
1415
- | SurfaceActionIconColors$1
1416
- | FeedbackIconColors$1
1417
- | FeedbackActionIconColors$1
1418
- | TextIconColors$1
1419
- | BadgeIconColors$1
1420
- | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
1421
- size: IconSize$1;
1422
- } & StyledPropsBlade;
1423
- type IconComponent$1 = React.ComponentType<IconProps$1>;
1424
-
1425
- declare type ActionListItemProps = {
1426
- title: string;
1427
- description?: string;
1428
- onClick?: (clickProps: {
1429
- name: string;
1430
- value?: boolean;
1431
- }) => void;
1432
- /**
1433
- * value that you get from `onChange` event on SelectInput or in form submissions.
1434
- */
1435
- value: string;
1436
- /**
1437
- * Link to open when item is clicked.
1438
- */
1439
- href?: string;
1440
- /**
1441
- * HTML target of the link
1442
- */
1443
- target?: string;
1444
- /**
1445
- * Item that goes on left-side of item.
1446
- *
1447
- * Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`
1448
- *
1449
- * Will be overriden in multiselect
1450
- */
1451
- leading?: React__default.ReactNode;
1452
- /**
1453
- * Item that goes on right-side of item.
1454
- *
1455
- * Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`
1456
- */
1457
- trailing?: React__default.ReactNode;
1458
- isDisabled?: boolean;
1459
- intent?: Extract<Feedback, 'negative'>;
1460
- /**
1461
- * Can be used in combination of `onClick` to highlight item as selected in Button Triggers.
1462
- *
1463
- * When trigger is SelectInput, Use `value` prop on SelectInput instead to make dropdown controlled.
1464
- */
1465
- isSelected?: boolean;
1466
- /**
1467
- * Internally passed from ActionList. No need to pass it explicitly
1468
- *
1469
- * @private
1470
- */
1471
- _index?: number;
1472
- } & TestID;
1473
- declare const ActionListSectionDivider: () => JSX.Element;
1474
- declare type ActionListSectionProps = {
1475
- title: string;
1476
- children: React__default.ReactNode[] | React__default.ReactNode;
1477
- /**
1478
- * Internally used to hide the divider on final item in React Native.
1479
- *
1480
- * Should not be used by consumers (also won't work on web)
1481
- *
1482
- * @private
1483
- */
1484
- _hideDivider?: boolean;
1485
- } & TestID;
1486
- declare const ActionListSection: ({ title, children, testID, _hideDivider, }: ActionListSectionProps) => JSX.Element;
1487
- declare const ActionListItemIcon: ({ icon }: {
1488
- icon: IconComponent$1;
1489
- }) => JSX.Element;
1490
- declare const ActionListItemText: ({ children, }: {
1491
- children: StringChildrenType;
1492
- }) => React__default.ReactElement;
1493
- declare const ActionListItem: React__default.MemoExoticComponent<(props: ActionListItemProps) => JSX.Element>;
1494
-
1495
- declare type ActionListHeaderProps = {
1496
- title: string;
1497
- /**
1498
- * Asset to be added on left side of Header.
1499
- *
1500
- * Valid children - `ActionListHeaderIcon`
1501
- */
1502
- leading?: React__default.ReactNode;
1503
- } & TestID;
1504
- declare const ActionListHeader: (props: ActionListHeaderProps) => JSX.Element;
1505
- declare const ActionListHeaderIcon: ({ icon }: {
1506
- icon: IconComponent$1;
1507
- }) => React__default.ReactElement;
1508
-
1509
- declare type ActionListFooterProps = {
1510
- title?: string;
1511
- /**
1512
- * Asset to be added on left side of Footer.
1513
- *
1514
- * Valid children - `ActionListFooterIcon`
1515
- */
1516
- leading?: React__default.ReactNode;
1517
- /**
1518
- * Elements to be added on right side of Footer.
1519
- *
1520
- * Anything can be passed here but maybe don't? Should ideally have Button or Tick Icon Buttons.
1521
- */
1522
- trailing?: React__default.ReactNode;
1523
- } & TestID;
1524
- declare const ActionListFooter: (props: ActionListFooterProps) => JSX.Element;
1525
- declare const ActionListFooterIcon: ({ icon }: {
1526
- icon: IconComponent$1;
1527
- }) => React__default.ReactElement;
1528
-
1529
- declare type ActionListItemAssetProps = {
1530
- /**
1531
- * Source of the image.
1532
- *
1533
- * Can either be a string URI or `require('/local/image')` in React Native
1534
- */
1535
- src: string | ImageSourcePropType;
1536
- /**
1537
- * Alt tag for the image
1538
- */
1539
- alt: string;
1540
- };
1541
- declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
1542
-
1543
- declare type PrimaryAction = {
1544
- text: string;
1545
- onClick: () => void;
1546
- };
1547
- declare type SecondaryActionButton = {
1548
- text: string;
1549
- onClick: () => void;
1550
- };
1551
- declare type SecondaryActionLinkButton = {
1552
- text: string;
1553
- href: string;
1554
- onClick?: () => void;
1555
- target?: string;
1556
- /**
1557
- * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`
1558
- */
1559
- rel?: string;
1560
- };
1561
- declare type SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;
1562
- declare type AlertProps = {
1563
- /**
1564
- * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.
1565
- */
1566
- description: ReactChild;
1567
- /**
1568
- * A brief heading
1569
- */
1570
- title?: string;
1571
- /**
1572
- * Shows a dismiss button
1573
- *
1574
- * @default true
1575
- */
1576
- isDismissible?: boolean;
1577
- /**
1578
- * A callback when the dismiss button is clicked
1579
- */
1580
- onDismiss?: () => void;
1581
- /**
1582
- * Can be set to `high` for a more prominent look. Not to be confused with a11y contrast.
1583
- *
1584
- * @default low
1585
- */
1586
- contrast?: ColorContrastTypes;
1587
- /**
1588
- * Makes the Alert span the entire container width, instead of the default max width of `584px`.
1589
- * This also makes the alert borderless, useful for creating full bleed layouts.
1590
- *
1591
- * @default false
1592
- */
1593
- isFullWidth?: boolean;
1594
- /**
1595
- * Sets the color tone
1596
- *
1597
- * @default neutral
1598
- */
1599
- intent?: Feedback;
1600
- /**
1601
- * Renders a primary action button and a secondary action link button
1602
- */
1603
- actions?: {
1604
- /**
1605
- * Renders a button (should **always** be present if `secondary` action is being used)
1606
- */
1607
- primary: PrimaryAction;
1608
- /**
1609
- * Renders a Link button
1610
- */
1611
- secondary?: SecondaryAction;
1612
- };
1613
- } & TestID & StyledPropsBlade;
1614
- declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
1615
-
1616
- declare type BadgeProps = {
1617
- /**
1618
- * Sets the label for the badge.
1619
- *
1620
- */
1621
- children: StringChildrenType;
1622
- /**
1623
- * Sets the variant of the badge.
1624
- *
1625
- * @default 'neutral'
1626
- */
1627
- variant?: Feedback | 'blue';
1628
- /**
1629
- * Sets the contrast of the badge.
1630
- *
1631
- * @default 'low'
1632
- */
1633
- contrast?: 'low' | 'high';
1634
- /**
1635
- * Sets the size of the badge.
1636
- *
1637
- * @default 'medium'
1638
- */
1639
- size?: 'small' | 'medium' | 'large';
1640
- /**
1641
- * Icon to be displayed in the badge.
1642
- * Accepts a component of type `IconComponent` from Blade.
1643
- *
1644
- */
1645
- icon?: IconComponent$1;
1646
- /**
1647
- * Sets the fontWeight of the label.
1648
- *
1649
- * @default 'regular'
1650
- */
1651
- fontWeight?: 'regular' | 'bold';
1652
- } & TestID & StyledPropsBlade;
1653
- declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, ...styledProps }: BadgeProps) => ReactElement;
1654
-
1655
- declare type BladeProviderProps = {
1656
- themeTokens: ThemeTokens;
1657
- colorScheme?: ColorSchemeNamesInput;
1658
- children: ReactNode;
1659
- };
1660
-
1661
- declare const BladeProvider: ({ themeTokens, colorScheme, children, }: BladeProviderProps) => ReactElement;
1662
-
1663
- declare type UseColorScheme = {
1664
- colorScheme: ColorSchemeNames;
1665
- setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;
1666
- };
1667
-
1668
- declare type TypographyPlatforms = 'onDesktop' | 'onMobile';
1669
-
1670
- declare type ThemeContext = UseColorScheme & {
1671
- theme: Theme;
1672
- platform: TypographyPlatforms;
1673
- };
1674
- declare const ThemeContext: React$1.Context<ThemeContext>;
1675
- declare const useTheme: () => ThemeContext;
1676
-
1677
- declare type Theme = {
1678
- name: ThemeTokens['name'];
1679
- border: Border;
1680
- breakpoints: Breakpoints;
1681
- colors: Colors;
1682
- spacing: Spacing;
1683
- motion: Motion;
1684
- shadows: Omit<Shadows, 'color'> & {
1685
- color: {
1686
- level: Record<ShadowLevels, string>;
1687
- };
1688
- };
1689
- typography: Typography;
1690
- };
1691
-
1692
- /**
1693
- * Returns the value or the responsive object with that value
1694
- *
1695
- * ## Usage
1696
- *
1697
- * Example if you pass string argument, return type will be string or responsive object with string value
1698
- *
1699
- * `MakeValueResponsive<string>`
1700
- * ```ts
1701
- * string |
1702
- * {
1703
- * base?: string;
1704
- * xs?: string;
1705
- * s?: string;
1706
- * // ... other breakpoints
1707
- * }
1708
- * ```
1709
- *
1710
- */
1711
- declare type MakeValueResponsive<T> = [T] extends [never] ? never : T | {
1712
- [P in keyof Breakpoints]?: T;
1713
- };
1714
- /**
1715
- * Turns all the values in object into responsive object.
1716
- *
1717
- * ```ts
1718
- * MakeObjectResponsive<{ hello: string}>
1719
- *
1720
- * // Outputs:
1721
- * {
1722
- * hello: string | {
1723
- * base?: string;
1724
- * xs?: string;
1725
- * s?: string;
1726
- * // ... other breakpoints
1727
- * }
1728
- * }
1729
- * ```
1730
- */
1731
- declare type MakeObjectResponsive<T> = {
1732
- [P in keyof T]: MakeValueResponsive<T[P]>;
1733
- };
1734
-
1735
- declare type ArrayOfMaxLength4<T> = readonly [T?, T?, T?, T?];
1736
- declare type SpaceUnits = Platform.Select<{
1737
- web: 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
1738
- native: 'px' | '%';
1739
- }>;
1740
- declare type SpacingValueType = DotNotationSpacingStringToken | `${string}${SpaceUnits}` | 'auto';
1741
- /**
1742
- * @IMPORTANT
1743
- *
1744
- * 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.
1745
- *
1746
- * 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
1747
- *
1748
- * Checkout example of find and replace query-
1749
- * {@link https://user-images.githubusercontent.com/30949385/221802507-40c7adbc-484a-47b3-9035-ae1e97080b51.png}
1750
- *
1751
- */
1752
- declare type PaddingProps = MakeObjectResponsive<{
1753
- /**
1754
- * ### Padding Shorthand
1755
- *
1756
- * #### Usage
1757
- *
1758
- * ```jsx
1759
- * padding="spacing.3"
1760
- * padding="20px"
1761
- * padding={["spacing.3", "spacing.1", "spacing.0", "10px"]}
1762
- * ```
1763
- *
1764
- * ---
1765
- * #### Spacing to Pixel values
1766
- *
1767
- * - `spacing.0` - 0px
1768
- * - `spacing.1` - 2px
1769
- * - `spacing.2` - 4px
1770
- * - `spacing.3` - 8px
1771
- * - `spacing.4` - 12px
1772
- * - `spacing.5` - 16px
1773
- * - `spacing.6` - 20px
1774
- * - `spacing.7` - 24px
1775
- * - `spacing.8` - 32px
1776
- * - `spacing.9` - 40px
1777
- * - `spacing.10` - 48px
1778
- * - `spacing.11` - 56px
1779
- *
1780
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1781
- *
1782
- */
1783
- padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
1784
- /**
1785
- * ### Padding Horizontal
1786
- *
1787
- * #### Usage
1788
- *
1789
- * ```jsx
1790
- * paddingX="spacing.3"
1791
- * paddingX="20px"
1792
- * ```
1793
- *
1794
- * ---
1795
- * #### Spacing to Pixel values
1796
- *
1797
- * - `spacing.0` - 0px
1798
- * - `spacing.1` - 2px
1799
- * - `spacing.2` - 4px
1800
- * - `spacing.3` - 8px
1801
- * - `spacing.4` - 12px
1802
- * - `spacing.5` - 16px
1803
- * - `spacing.6` - 20px
1804
- * - `spacing.7` - 24px
1805
- * - `spacing.8` - 32px
1806
- * - `spacing.9` - 40px
1807
- * - `spacing.10` - 48px
1808
- * - `spacing.11` - 56px
1809
- *
1810
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1811
- *
1812
- */
1813
- paddingX: SpacingValueType;
1814
- /**
1815
- * ### Padding Vertical
1816
- *
1817
- * #### Usage
1818
- *
1819
- * ```jsx
1820
- * paddingY="spacing.3"
1821
- * paddingY="20px"
1822
- * ```
1823
- *
1824
- * ---
1825
- * #### Spacing to Pixel values
1826
- *
1827
- * - `spacing.0` - 0px
1828
- * - `spacing.1` - 2px
1829
- * - `spacing.2` - 4px
1830
- * - `spacing.3` - 8px
1831
- * - `spacing.4` - 12px
1832
- * - `spacing.5` - 16px
1833
- * - `spacing.6` - 20px
1834
- * - `spacing.7` - 24px
1835
- * - `spacing.8` - 32px
1836
- * - `spacing.9` - 40px
1837
- * - `spacing.10` - 48px
1838
- * - `spacing.11` - 56px
1839
- *
1840
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1841
- *
1842
- */
1843
- paddingY: SpacingValueType;
1844
- /**
1845
- * ### Padding Top
1846
- *
1847
- * #### Usage
1848
- *
1849
- * ```jsx
1850
- * paddingTop="spacing.3"
1851
- * paddingTop="20px"
1852
- * ```
1853
- *
1854
- * ---
1855
- * #### Spacing to Pixel values
1856
- *
1857
- * - `spacing.0` - 0px
1858
- * - `spacing.1` - 2px
1859
- * - `spacing.2` - 4px
1860
- * - `spacing.3` - 8px
1861
- * - `spacing.4` - 12px
1862
- * - `spacing.5` - 16px
1863
- * - `spacing.6` - 20px
1864
- * - `spacing.7` - 24px
1865
- * - `spacing.8` - 32px
1866
- * - `spacing.9` - 40px
1867
- * - `spacing.10` - 48px
1868
- * - `spacing.11` - 56px
1869
- *
1870
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1871
- */
1872
- paddingTop: SpacingValueType;
1873
- /**
1874
- * ### Padding Right
1875
- *
1876
- * #### Usage
1877
- *
1878
- * ```jsx
1879
- * paddingRight="spacing.3"
1880
- * paddingRight="20px"
1881
- * ```
1882
- *
1883
- * ---
1884
- * #### Spacing to Pixel values
1885
- *
1886
- * - `spacing.0` - 0px
1887
- * - `spacing.1` - 2px
1888
- * - `spacing.2` - 4px
1889
- * - `spacing.3` - 8px
1890
- * - `spacing.4` - 12px
1891
- * - `spacing.5` - 16px
1892
- * - `spacing.6` - 20px
1893
- * - `spacing.7` - 24px
1894
- * - `spacing.8` - 32px
1895
- * - `spacing.9` - 40px
1896
- * - `spacing.10` - 48px
1897
- * - `spacing.11` - 56px
1898
- *
1899
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1900
- */
1901
- paddingRight: SpacingValueType;
1902
- /**
1903
- * ### Padding Bottom
1904
- *
1905
- * #### Usage
1906
- *
1907
- * ```jsx
1908
- * paddingBottom="spacing.3"
1909
- * paddingBottom="20px"
1910
- * ```
1911
- *
1912
- * ---
1913
- * #### Spacing to Pixel values
1914
- *
1915
- * - `spacing.0` - 0px
1916
- * - `spacing.1` - 2px
1917
- * - `spacing.2` - 4px
1918
- * - `spacing.3` - 8px
1919
- * - `spacing.4` - 12px
1920
- * - `spacing.5` - 16px
1921
- * - `spacing.6` - 20px
1922
- * - `spacing.7` - 24px
1923
- * - `spacing.8` - 32px
1924
- * - `spacing.9` - 40px
1925
- * - `spacing.10` - 48px
1926
- * - `spacing.11` - 56px
1927
- *
1928
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1929
- */
1930
- paddingBottom: SpacingValueType;
1931
- /**
1932
- * ### Padding Left
1933
- *
1934
- * #### Usage
1935
- *
1936
- * ```jsx
1937
- * paddingLeft="spacing.3"
1938
- * paddingLeft="20px"
1939
- * ```
1940
- *
1941
- * ---
1942
- * #### Spacing to Pixel values
1943
- *
1944
- * - `spacing.0` - 0px
1945
- * - `spacing.1` - 2px
1946
- * - `spacing.2` - 4px
1947
- * - `spacing.3` - 8px
1948
- * - `spacing.4` - 12px
1949
- * - `spacing.5` - 16px
1950
- * - `spacing.6` - 20px
1951
- * - `spacing.7` - 24px
1952
- * - `spacing.8` - 32px
1953
- * - `spacing.9` - 40px
1954
- * - `spacing.10` - 48px
1955
- * - `spacing.11` - 56px
1956
- *
1957
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1958
- */
1959
- paddingLeft: SpacingValueType;
1960
- }>;
1961
- declare type MarginProps = MakeObjectResponsive<{
1962
- /**
1963
- * ### Margin Shorthand
1964
- *
1965
- * #### Usage
1966
- *
1967
- * ```jsx
1968
- * margin="spacing.3"
1969
- * margin="20px"
1970
- * margin={["spacing.3", "spacing.1", "spacing.0", "10px"]}
1971
- * ```
1972
- *
1973
- * ---
1974
- * #### Spacing to Pixel values
1975
- *
1976
- * - `spacing.0` - 0px
1977
- * - `spacing.1` - 2px
1978
- * - `spacing.2` - 4px
1979
- * - `spacing.3` - 8px
1980
- * - `spacing.4` - 12px
1981
- * - `spacing.5` - 16px
1982
- * - `spacing.6` - 20px
1983
- * - `spacing.7` - 24px
1984
- * - `spacing.8` - 32px
1985
- * - `spacing.9` - 40px
1986
- * - `spacing.10` - 48px
1987
- * - `spacing.11` - 56px
1988
- *
1989
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1990
- *
1991
- */
1992
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
1993
- /**
1994
- * ### Margin Horizontal
1995
- *
1996
- * #### Usage
1997
- *
1998
- * ```jsx
1999
- * marginX="spacing.3"
2000
- * marginX="20px"
2001
- * ```
2002
- *
2003
- * ---
2004
- * #### Spacing to Pixel values
2005
- *
2006
- * - `spacing.0` - 0px
2007
- * - `spacing.1` - 2px
2008
- * - `spacing.2` - 4px
2009
- * - `spacing.3` - 8px
2010
- * - `spacing.4` - 12px
2011
- * - `spacing.5` - 16px
2012
- * - `spacing.6` - 20px
2013
- * - `spacing.7` - 24px
2014
- * - `spacing.8` - 32px
2015
- * - `spacing.9` - 40px
2016
- * - `spacing.10` - 48px
2017
- * - `spacing.11` - 56px
2018
- *
2019
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2020
- *
2021
- */
2022
- marginX: SpacingValueType;
2023
- /**
2024
- * ### Margin Vertical
2025
- *
2026
- * #### Usage
2027
- *
2028
- * ```jsx
2029
- * marginY="spacing.3"
2030
- * marginY="20px"
2031
- * ```
2032
- *
2033
- * ---
2034
- * #### Spacing to Pixel values
2035
- *
2036
- * - `spacing.0` - 0px
2037
- * - `spacing.1` - 2px
2038
- * - `spacing.2` - 4px
2039
- * - `spacing.3` - 8px
2040
- * - `spacing.4` - 12px
2041
- * - `spacing.5` - 16px
2042
- * - `spacing.6` - 20px
2043
- * - `spacing.7` - 24px
2044
- * - `spacing.8` - 32px
2045
- * - `spacing.9` - 40px
2046
- * - `spacing.10` - 48px
2047
- * - `spacing.11` - 56px
2048
- *
2049
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2050
- *
2051
- */
2052
- marginY: SpacingValueType;
2053
- /**
2054
- * ### Margin Top
2055
- *
2056
- * #### Usage
2057
- *
2058
- * ```jsx
2059
- * marginTop="spacing.3"
2060
- * marginTop="20px"
2061
- * ```
2062
- *
2063
- * ---
2064
- * #### Spacing to Pixel values
2065
- *
2066
- * - `spacing.0` - 0px
2067
- * - `spacing.1` - 2px
2068
- * - `spacing.2` - 4px
2069
- * - `spacing.3` - 8px
2070
- * - `spacing.4` - 12px
2071
- * - `spacing.5` - 16px
2072
- * - `spacing.6` - 20px
2073
- * - `spacing.7` - 24px
2074
- * - `spacing.8` - 32px
2075
- * - `spacing.9` - 40px
2076
- * - `spacing.10` - 48px
2077
- * - `spacing.11` - 56px
2078
- *
2079
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2080
- */
2081
- marginTop: SpacingValueType;
2082
- /**
2083
- * ### Margin Right
2084
- *
2085
- * #### Usage
2086
- *
2087
- * ```jsx
2088
- * marginRight="spacing.3"
2089
- * marginRight="20px"
2090
- * ```
2091
- *
2092
- * ---
2093
- * #### Spacing to Pixel values
2094
- *
2095
- * - `spacing.0` - 0px
2096
- * - `spacing.1` - 2px
2097
- * - `spacing.2` - 4px
2098
- * - `spacing.3` - 8px
2099
- * - `spacing.4` - 12px
2100
- * - `spacing.5` - 16px
2101
- * - `spacing.6` - 20px
2102
- * - `spacing.7` - 24px
2103
- * - `spacing.8` - 32px
2104
- * - `spacing.9` - 40px
2105
- * - `spacing.10` - 48px
2106
- * - `spacing.11` - 56px
2107
- *
2108
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2109
- */
2110
- marginRight: SpacingValueType;
2111
- /**
2112
- * ### Margin Bottom
2113
- *
2114
- * #### Usage
2115
- *
2116
- * ```jsx
2117
- * marginBottom="spacing.3"
2118
- * marginBottom="20px"
2119
- * ```
2120
- *
2121
- * ---
2122
- * #### Spacing to Pixel values
2123
- *
2124
- * - `spacing.0` - 0px
2125
- * - `spacing.1` - 2px
2126
- * - `spacing.2` - 4px
2127
- * - `spacing.3` - 8px
2128
- * - `spacing.4` - 12px
2129
- * - `spacing.5` - 16px
2130
- * - `spacing.6` - 20px
2131
- * - `spacing.7` - 24px
2132
- * - `spacing.8` - 32px
2133
- * - `spacing.9` - 40px
2134
- * - `spacing.10` - 48px
2135
- * - `spacing.11` - 56px
2136
- *
2137
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2138
- */
2139
- marginBottom: SpacingValueType;
2140
- /**
2141
- * ### Margin Left
2142
- *
2143
- * #### Usage
2144
- *
2145
- * ```jsx
2146
- * marginLeft="spacing.3"
2147
- * marginLeft="20px"
2148
- * ```
2149
- *
2150
- * ---
2151
- * #### Spacing to Pixel values
2152
- *
2153
- * - `spacing.0` - 0px
2154
- * - `spacing.1` - 2px
2155
- * - `spacing.2` - 4px
2156
- * - `spacing.3` - 8px
2157
- * - `spacing.4` - 12px
2158
- * - `spacing.5` - 16px
2159
- * - `spacing.6` - 20px
2160
- * - `spacing.7` - 24px
2161
- * - `spacing.8` - 32px
2162
- * - `spacing.9` - 40px
2163
- * - `spacing.10` - 48px
2164
- * - `spacing.11` - 56px
2165
- *
2166
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2167
- */
2168
- marginLeft: SpacingValueType;
2169
- }>;
2170
-
2171
- declare type LayoutProps = MakeObjectResponsive<{
2172
- height: SpacingValueType;
2173
- minHeight: SpacingValueType;
2174
- maxHeight: SpacingValueType;
2175
- width: SpacingValueType;
2176
- minWidth: SpacingValueType;
2177
- maxWidth: SpacingValueType;
2178
- } & PickCSSByPlatform$1<'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
2179
- declare type FlexboxProps = MakeObjectResponsive<{
2180
- /**
2181
- * This uses the native gap property which might not work on older browsers.
2182
- * If you want to support older browsers, you might want to use `margin` instead.
2183
- *
2184
- * @see https://caniuse.com/?search=gap
2185
- */
2186
- gap: SpacingValueType;
2187
- /**
2188
- * This uses the native row-gap property which might not work on older browsers.
2189
- * If you want to support older browsers, you might want to use `margin` instead.
2190
- *
2191
- * @see https://caniuse.com/?search=row-gap
2192
- */
2193
- rowGap: SpacingValueType;
2194
- /**
2195
- * This uses the native column-gap property which might not work on older browsers.
2196
- * If you want to support older browsers, you might want to use `margin` instead.
2197
- *
2198
- * @see https://caniuse.com/?search=column-gap
2199
- */
2200
- columnGap: SpacingValueType;
2201
- /**
2202
- * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
2203
- *
2204
- * @see https://developer.mozilla.org/docs/Web/CSS/flex
2205
- */
2206
- flex: string | number;
2207
- } & PickCSSByPlatform$1<'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'order'>>;
2208
- declare type PositionProps = MakeObjectResponsive<{
2209
- top: SpacingValueType;
2210
- right: SpacingValueType;
2211
- bottom: SpacingValueType;
2212
- left: SpacingValueType;
2213
- } & PickCSSByPlatform$1<'position' | 'zIndex'>>;
2214
- declare type GridProps = MakeObjectResponsive<PickCSSByPlatform$1<'grid' | 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows'>>;
2215
- declare type ColorObjects = 'feedback' | 'surface' | 'action';
2216
- declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
2217
- declare type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<Theme$1['colors'][T]['border']>}`;
2218
- declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span"];
2219
- declare type BoxAsType = typeof validBoxAsValues[number];
2220
- declare type BoxVisualProps = MakeObjectResponsive<{
2221
- backgroundColor: BackgroundColorString<'surface'>;
2222
- borderWidth: keyof Border['width'];
2223
- borderColor: BorderColorString<'surface'>;
2224
- borderTopWidth: keyof Border['width'];
2225
- borderTopColor: BorderColorString<'surface'>;
2226
- borderRightWidth: keyof Border['width'];
2227
- borderRightColor: BorderColorString<'surface'>;
2228
- borderBottomWidth: keyof Border['width'];
2229
- borderBottomColor: BorderColorString<'surface'>;
2230
- borderLeftWidth: keyof Border['width'];
2231
- borderLeftColor: BorderColorString<'surface'>;
2232
- borderRadius: keyof Border['radius'];
2233
- borderTopLeftRadius: keyof Border['radius'];
2234
- borderTopRightRadius: keyof Border['radius'];
2235
- borderBottomRightRadius: keyof Border['radius'];
2236
- borderBottomLeftRadius: keyof Border['radius'];
2237
- }> & {
2238
- as: BoxAsType;
2239
- };
2240
- declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
2241
- children?: React.ReactNode | React.ReactNode[];
2242
- } & TestID>;
2243
-
2244
- /**
2245
- * ## Box
2246
- *
2247
- * Box is the basic Layout component.
2248
- *
2249
- *
2250
- * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
2251
- *
2252
- * Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.
2253
- *
2254
- * ----
2255
- *
2256
- * ### Usage
2257
- *
2258
- * ```jsx
2259
- * <Box display="flex">
2260
- * ```
2261
-
2262
- * #### Responsive Props
2263
- *
2264
- * ```jsx
2265
- * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
2266
- * ```
2267
- *
2268
- * #### Margin and Padding Shorthands
2269
- *
2270
- * ```jsx
2271
- * <Box padding={["spacing.3", "spacing.10"]} />
2272
- * ```
2273
- *
2274
- * ---
2275
- *
2276
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
2277
- *
2278
- */
2279
- declare const Box: (props: BoxProps) => JSX.Element;
2280
-
2281
- declare const ComponentIds: {
2282
- CardHeader: string;
2283
- CardHeaderTrailing: string;
2284
- CardHeaderLeading: string;
2285
- CardFooter: string;
2286
- CardFooterTrailing: string;
2287
- CardFooterLeading: string;
2288
- CardBody: string;
2289
- CardHeaderIcon: string;
2290
- CardHeaderCounter: string;
2291
- CardHeaderBadge: string;
2292
- CardHeaderText: string;
2293
- CardHeaderLink: string;
2294
- CardHeaderIconButton: string;
2295
- };
2296
- declare type CardProps = {
2297
- /**
2298
- * Card contents
2299
- */
2300
- children: React__default.ReactNode;
2301
- /**
2302
- * Sets the background color of the Card according to the surface level tokens
2303
- *
2304
- * eg: `theme.colors.surface.background.level1`
2305
- *
2306
- * **Description:**
2307
- *
2308
- * - 2: Used in layouts which are on top of the main background
2309
- * - 3: Used over the cards template or as a text input backgrounds.
2310
- *
2311
- * **Links:**
2312
- * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
2313
- * - Figma: https://shorturl.at/fsvwK
2314
- */
2315
- surfaceLevel?: 2 | 3;
2316
- } & TestID & StyledPropsBlade;
2317
- declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardProps) => React__default.ReactElement;
2318
- declare type CardBodyProps = {
2319
- children: React__default.ReactNode;
2320
- } & TestID;
2321
- declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
2322
-
2323
- declare type LinkCommonProps = {
2324
- variant?: 'anchor' | 'button';
2325
- icon?: IconComponent$1;
2326
- iconPosition?: 'left' | 'right';
2327
- isDisabled?: boolean;
2328
- onClick?: (event: SyntheticEvent) => void;
2329
- href?: string;
2330
- target?: string;
2331
- accessibilityLabel?: string;
2332
- /**
2333
- * Sets the size of the link
2334
- *
2335
- * @default medium
2336
- */
2337
- size?: 'small' | 'medium' | 'large';
2338
- } & TestID & StyledPropsBlade & Platform.Select<{
2339
- native: {
2340
- /**
2341
- * Defines how far your touch can start away from the link
2342
- */
2343
- hitSlop?: {
2344
- top?: number;
2345
- right?: number;
2346
- bottom?: number;
2347
- left?: number;
2348
- } | number;
2349
- /**
2350
- * This is a web only prop and has no effect on react-native.
2351
- */
2352
- htmlTitle?: undefined;
2353
- };
2354
- web: {
2355
- /**
2356
- * This is a react-native only prop and has no effect on web.
2357
- */
2358
- hitSlop?: undefined;
2359
- /**
2360
- * The title of the link which is displayed as a tooltip.
2361
- */
2362
- htmlTitle?: string;
2363
- };
2364
- }>;
2365
- declare type LinkWithoutIconProps = LinkCommonProps & {
2366
- icon?: undefined;
2367
- children: StringChildrenType;
2368
- };
2369
- declare type LinkWithIconProps = LinkCommonProps & {
2370
- icon: IconComponent$1;
2371
- children?: StringChildrenType;
2372
- };
2373
- declare type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
2374
- declare type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
2375
- variant?: 'anchor';
2376
- href?: string;
2377
- target?: string;
2378
- rel?: string;
2379
- isDisabled?: undefined;
2380
- };
2381
- declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
2382
- variant?: 'button';
2383
- isDisabled?: boolean;
2384
- href?: undefined;
2385
- target?: undefined;
2386
- rel?: undefined;
2387
- };
2388
- declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
2389
- declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, htmlTitle, ...styledProps }: LinkProps) => ReactElement;
2390
-
2391
- /* eslint-disable @typescript-eslint/no-explicit-any */
2392
-
2393
-
2394
- type BladeElementRef = Platform.Select<{
2395
- web: Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
2396
- native: React.MutableRefObject<any>;
2397
- }>;
2398
-
2399
- declare type ButtonCommonProps = {
2400
- variant?: 'primary' | 'secondary' | 'tertiary';
2401
- size?: 'xsmall' | 'small' | 'medium' | 'large';
2402
- iconPosition?: 'left' | 'right';
2403
- isDisabled?: boolean;
2404
- isFullWidth?: boolean;
2405
- isLoading?: boolean;
2406
- accessibilityLabel?: string;
2407
- type?: 'button' | 'reset' | 'submit';
2408
- onClick?: Platform.Select<{
2409
- native: (event: GestureResponderEvent) => void;
2410
- web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
2411
- }>;
2412
- } & TestID & StyledPropsBlade;
2413
- declare type ButtonWithoutIconProps = ButtonCommonProps & {
2414
- icon?: undefined;
2415
- children: StringChildrenType;
2416
- };
2417
- declare type ButtonWithIconProps = ButtonCommonProps & {
2418
- icon: IconComponent$1;
2419
- children?: StringChildrenType;
2420
- };
2421
- declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
2422
- declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<BladeElementRef>>;
2423
-
2424
- type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
2425
- Theme$1['colors']['feedback']['text']
2426
- >}`;
2427
- type FeedbackActionColors$1 = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<
2428
- Theme$1['colors']['feedback'][Feedback]['action']['text']
2429
- >}`;
2430
- type SurfaceColors$1 = `surface.text.${DotNotationColorStringToken<
2431
- Theme$1['colors']['surface']['text']
2432
- >}`;
2433
- type ActionColors$1 = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
2434
- type BadgeTextColors$1 = `badge.text.${DotNotationColorStringToken<
2435
- Theme$1['colors']['badge']['text']
2436
- >}`;
2437
-
2438
- type BaseTextProps$1 = {
2439
- id?: string;
2440
- color?: ActionColors$1 | FeedbackColors$1 | SurfaceColors$1 | FeedbackActionColors$1 | BadgeTextColors$1;
2441
- fontFamily?: keyof Theme$1['typography']['fonts']['family'];
2442
- fontSize?: keyof Theme$1['typography']['fonts']['size'];
2443
- fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
2444
- fontStyle?: 'italic' | 'normal';
2445
- textDecorationLine?: 'line-through' | 'none' | 'underline';
2446
- lineHeight?: keyof Theme$1['typography']['lineHeights'];
2447
- /**
2448
- * Web only
2449
- */
2450
- as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
2451
- textAlign?: 'center' | 'justify' | 'left' | 'right';
2452
- truncateAfterLines?: number;
2453
- className?: string;
2454
- style?: React.CSSProperties;
2455
- children: React.ReactNode;
2456
- accessibilityProps?: Partial<AccessibilityProps>;
2457
- /**
2458
- * React Native only
2459
- */
2460
- numberOfLines?: number;
2461
- componentName?: 'text' | 'title' | 'heading' | 'code';
2462
- } & TestID &
2463
- StyledPropsBlade;
2464
-
2465
- /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
2466
-
2467
-
2468
- type TextCommonProps$1 = {
2469
- type?: TextTypes;
2470
- contrast?: ColorContrastTypes;
2471
- truncateAfterLines?: number;
2472
- children: React.ReactNode;
2473
- weight?: keyof Theme$1['typography']['fonts']['weight'];
2474
- /**
2475
- * **For Internal use only**: Sets the color of the Text component
2476
- */
2477
- color?: BaseTextProps$1['color'];
2478
- textAlign?: BaseTextProps$1['textAlign'];
2479
- } & TestID &
2480
- StyledPropsBlade;
2481
-
2482
- type TextVariant$1 = 'body' | 'caption';
2483
-
2484
- type TextBodyVariant$1 = TextCommonProps$1 & {
2485
- variant?: Extract<TextVariant$1, 'body'>;
2486
- size?: 'xsmall' | 'small' | 'medium' | 'large';
2487
- };
2488
-
2489
- type TextCaptionVariant$1 = TextCommonProps$1 & {
2490
- variant?: Extract<TextVariant$1, 'caption'>;
2491
- size?: 'medium';
2492
- };
2493
-
2494
- /**
2495
- * Conditionally changing props based on variant.
2496
- * Overloads or union gives wrong intellisense.
2497
- */
2498
- type TextProps$1<T> = T extends {
2499
- variant: infer Variant;
2500
- }
2501
- ? Variant extends 'caption'
2502
- ? TextCaptionVariant$1
2503
- : Variant extends 'body'
2504
- ? TextBodyVariant$1
2505
- : T
2506
- : T;
2507
-
2508
- type CounterProps$1 = {
2509
- /**
2510
- * Sets the value for the counter.
2511
- */
2512
- value: number;
2513
- /**
2514
- * Sets the max value for the counter.
2515
- * If value exceedes `max` it will render `value+`
2516
- */
2517
- max?: number;
2518
- /**
2519
- * Sets the intent of the counter.
2520
- *
2521
- * @default 'neutral'
2522
- */
2523
- intent?: Feedback;
2524
- /**
2525
- * Sets the contrast of the counter.
2526
- *
2527
- * @default 'low'
2528
- */
2529
- contrast?: 'high' | 'low';
2530
- /**
2531
- * Sets the size of the counter.
2532
- *
2533
- * @default 'medium'
2534
- */
2535
- size?: 'small' | 'medium' | 'large';
2536
- } & TestID &
2537
- StyledPropsBlade;
2538
-
2539
- declare const CardHeaderIcon: ({ icon }: {
2540
- icon: IconComponent$1;
2541
- }) => React__default.ReactElement;
2542
- declare const CardHeaderCounter: (props: CounterProps$1) => React__default.ReactElement;
2543
- declare const CardHeaderBadge: (props: BadgeProps) => React__default.ReactElement;
2544
- declare const CardHeaderText: (props: TextProps$1<{
2545
- variant: TextVariant$1;
2546
- }>) => React__default.ReactElement;
2547
- declare const CardHeaderLink: (props: LinkProps) => React__default.ReactElement;
2548
- declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'> & {
2549
- icon: IconComponent$1;
2550
- };
2551
- declare const CardHeaderIconButton: (props: CardHeaderIconButtonProps) => React__default.ReactElement;
2552
- declare type CardHeaderProps = {
2553
- children?: React__default.ReactNode;
2554
- } & TestID;
2555
- declare const CardHeader: ({ children, testID }: CardHeaderProps) => React__default.ReactElement;
2556
- declare type CardHeaderLeadingProps = {
2557
- title: string;
2558
- subtitle?: string;
2559
- /**
2560
- * prefix element of Card
2561
- *
2562
- * Accepts: `CardHeaderIcon` component
2563
- */
2564
- prefix?: React__default.ReactNode;
2565
- /**
2566
- * suffix element of Card
2567
- *
2568
- * Accepts: `CardHeaderCounter` component
2569
- */
2570
- suffix?: React__default.ReactNode;
2571
- };
2572
- declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
2573
- declare type CardHeaderTrailingProps = {
2574
- /**
2575
- * Renders a visual ornament in card header trailing section
2576
- *
2577
- * Accepts: `CardHeaderLink`, `CardHeaderText`, `CardHeaderIconButton`, `CardHeaderBadge`
2578
- */
2579
- visual?: React__default.ReactNode;
2580
- };
2581
- declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
2582
-
2583
- declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
2584
- text: ButtonProps['children'];
2585
- };
2586
- declare type CardFooterProps = {
2587
- children?: React__default.ReactNode;
2588
- } & TestID;
2589
- declare const CardFooter: ({ children, testID }: CardFooterProps) => React__default.ReactElement;
2590
- declare type CardFooterLeadingProps = {
2591
- title?: string;
2592
- subtitle?: string;
2593
- };
2594
- declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React__default.ReactElement;
2595
- declare type CardFooterTrailingProps = {
2596
- actions?: {
2597
- primary?: CardFooterAction;
2598
- secondary?: CardFooterAction;
2599
- };
2600
- };
2601
- declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React__default.ReactElement;
2602
-
2603
- declare type IconButtonProps = {
2604
- /**
2605
- * Icon component to be rendered, eg. `CloseIcon`
2606
- */
2607
- icon: IconComponent$1;
2608
- onClick: () => void;
2609
- /**
2610
- * Icon size
2611
- *
2612
- * @default 'medium'
2613
- */
2614
- size?: 'medium' | 'large';
2615
- /**
2616
- * Icon contrast
2617
- *
2618
- * @default 'low'
2619
- */
2620
- contrast?: 'low' | 'high';
2621
- /**
2622
- * Sets aria-label to help users know what the action does, eg 'Dismiss alert'
2623
- */
2624
- accessibilityLabel: string;
2625
- };
2626
- declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<BladeElementRef>>;
2627
-
2628
- declare type CounterProps = {
2629
- /**
2630
- * Sets the value for the counter.
2631
- */
2632
- value: number;
2633
- /**
2634
- * Sets the max value for the counter.
2635
- * If value exceedes `max` it will render `value+`
2636
- */
2637
- max?: number;
2638
- /**
2639
- * Sets the intent of the counter.
2640
- *
2641
- * @default 'neutral'
2642
- */
2643
- intent?: Feedback;
2644
- /**
2645
- * Sets the contrast of the counter.
2646
- *
2647
- * @default 'low'
2648
- */
2649
- contrast?: 'high' | 'low';
2650
- /**
2651
- * Sets the size of the counter.
2652
- *
2653
- * @default 'medium'
2654
- */
2655
- size?: 'small' | 'medium' | 'large';
2656
- } & TestID & StyledPropsBlade;
2657
- declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
2658
-
2659
- declare type OnChange = ({ isChecked, event, value, }: {
2660
- isChecked: boolean;
2661
- event?: React__default.ChangeEvent;
2662
- value?: string;
2663
- }) => void;
2664
- declare type CheckboxProps = {
2665
- /**
2666
- * If `true`, The checkbox will be checked. This also makes the checkbox controlled
2667
- * Use `onChange` to update its value
2668
- *
2669
- * @default false
2670
- */
2671
- isChecked?: boolean;
2672
- /**
2673
- * If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled
2674
- *
2675
- * @default false
2676
- */
2677
- defaultChecked?: boolean;
2678
- /**
2679
- * The callback invoked when the checked state of the `Checkbox` changes.
2680
- */
2681
- onChange?: OnChange;
2682
- /**
2683
- * Sets the label of the checkbox
2684
- */
2685
- children: React__default.ReactNode;
2686
- /**
2687
- * Help text for the checkbox
2688
- */
2689
- helpText?: string;
2690
- /**
2691
- * Error text for the checkbox
2692
- *
2693
- * Renders when `validationState` is set to 'error'
2694
- */
2695
- errorText?: string;
2696
- /**
2697
- * If `true`, the checkbox will be indeterminate.
2698
- * This does not modify the isChecked property.
2699
- *
2700
- * @default false
2701
- */
2702
- isIndeterminate?: boolean;
2703
- /**
2704
- * The name of the input field in a checkbox
2705
- * (Useful for form submission).
2706
- */
2707
- name?: string;
2708
- /**
2709
- * The value to be used in the checkbox input.
2710
- * This is the value that will be returned on form submission.
2711
- */
2712
- value?: string;
2713
- /**
2714
- * If `true`, the checkbox will be disabled
2715
- *
2716
- * @default false
2717
- */
2718
- isDisabled?: boolean;
2719
- /**
2720
- * If `true`, the checkbox input is marked as required,
2721
- * and `required` attribute will be added
2722
- *
2723
- * @default false
2724
- */
2725
- isRequired?: boolean;
2726
- /**
2727
- * If `error`, the checkbox input is marked as invalid,
2728
- * and `invalid` attribute will be added
2729
- */
2730
- validationState?: 'error' | 'none';
2731
- /**
2732
- * Size of the checkbox
2733
- *
2734
- * @default "medium"
2735
- */
2736
- size?: 'small' | 'medium';
2737
- /**
2738
- * Sets the tab-index property on checkbox element
2739
- *
2740
- */
2741
- tabIndex?: number;
2742
- } & TestID & StyledPropsBlade;
2743
- declare const Checkbox: React__default.ForwardRefExoticComponent<{
2744
- /**
2745
- * If `true`, The checkbox will be checked. This also makes the checkbox controlled
2746
- * Use `onChange` to update its value
2747
- *
2748
- * @default false
2749
- */
2750
- isChecked?: boolean | undefined;
2751
- /**
2752
- * If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled
2753
- *
2754
- * @default false
2755
- */
2756
- defaultChecked?: boolean | undefined;
2757
- /**
2758
- * The callback invoked when the checked state of the `Checkbox` changes.
2759
- */
2760
- onChange?: OnChange | undefined;
2761
- /**
2762
- * Sets the label of the checkbox
2763
- */
2764
- children: React__default.ReactNode;
2765
- /**
2766
- * Help text for the checkbox
2767
- */
2768
- helpText?: string | undefined;
2769
- /**
2770
- * Error text for the checkbox
2771
- *
2772
- * Renders when `validationState` is set to 'error'
2773
- */
2774
- errorText?: string | undefined;
2775
- /**
2776
- * If `true`, the checkbox will be indeterminate.
2777
- * This does not modify the isChecked property.
2778
- *
2779
- * @default false
2780
- */
2781
- isIndeterminate?: boolean | undefined;
2782
- /**
2783
- * The name of the input field in a checkbox
2784
- * (Useful for form submission).
2785
- */
2786
- name?: string | undefined;
2787
- /**
2788
- * The value to be used in the checkbox input.
2789
- * This is the value that will be returned on form submission.
2790
- */
2791
- value?: string | undefined;
2792
- /**
2793
- * If `true`, the checkbox will be disabled
2794
- *
2795
- * @default false
2796
- */
2797
- isDisabled?: boolean | undefined;
2798
- /**
2799
- * If `true`, the checkbox input is marked as required,
2800
- * and `required` attribute will be added
2801
- *
2802
- * @default false
2803
- */
2804
- isRequired?: boolean | undefined;
2805
- /**
2806
- * If `error`, the checkbox input is marked as invalid,
2807
- * and `invalid` attribute will be added
2808
- */
2809
- validationState?: "none" | "error" | undefined;
2810
- /**
2811
- * Size of the checkbox
2812
- *
2813
- * @default "medium"
2814
- */
2815
- size?: "small" | "medium" | undefined;
2816
- /**
2817
- * Sets the tab-index property on checkbox element
2818
- *
2819
- */
2820
- tabIndex?: number | undefined;
2821
- } & TestID & Partial<Omit<MakeObjectResponsive<{
2822
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
2823
- marginX: SpacingValueType;
2824
- marginY: SpacingValueType;
2825
- marginTop: SpacingValueType;
2826
- marginRight: SpacingValueType;
2827
- marginBottom: SpacingValueType;
2828
- marginLeft: SpacingValueType;
2829
- }> & Pick<MakeObjectResponsive<{
2830
- gap: SpacingValueType;
2831
- rowGap: SpacingValueType;
2832
- columnGap: SpacingValueType;
2833
- flex: string | number;
2834
- } & PickIfExist$1<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
2835
- __brand__?: "platform-native" | undefined;
2836
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
2837
- top: SpacingValueType;
2838
- right: SpacingValueType;
2839
- bottom: SpacingValueType;
2840
- left: SpacingValueType;
2841
- } & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
2842
- __brand__?: "platform-native" | undefined;
2843
- }> & Pick<MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
2844
-
2845
- declare type CheckboxGroupProps = {
2846
- /**
2847
- * Accepts multiple checkboxes as children
2848
- */
2849
- children: React__default.ReactNode;
2850
- /**
2851
- * Help text of the checkbox group
2852
- */
2853
- helpText?: string;
2854
- /**
2855
- * Error text of the checkbox group
2856
- * Renders when `validationState` is set to 'error'
2857
- *
2858
- * Overrides helpText
2859
- */
2860
- errorText?: string;
2861
- /**
2862
- * Sets the error state of the CheckboxGroup
2863
- * If set to `error` it will render the `errorText` of the group,
2864
- * and propagate `invalid` prop to every checkbox
2865
- */
2866
- validationState?: 'error' | 'none';
2867
- /**
2868
- * Renders a necessity indicator after CheckboxGroup label
2869
- *
2870
- * If set to `undefined` it renders nothing.
2871
- */
2872
- necessityIndicator?: 'required' | 'optional' | 'none';
2873
- /**
2874
- * Sets the disabled state of the CheckboxGroup
2875
- * If set to `true` it propagate down to all the checkboxes
2876
- *
2877
- * @default false
2878
- */
2879
- isDisabled?: boolean;
2880
- /**
2881
- * Renders the label of the checkbox group
2882
- */
2883
- label: string;
2884
- /**
2885
- * Sets the position of the label
2886
- *
2887
- * @default 'top'
2888
- */
2889
- labelPosition?: 'top' | 'left';
2890
- /**
2891
- * Initial value of the checkbox group
2892
- */
2893
- defaultValue?: string[];
2894
- /**
2895
- * value of the checkbox group
2896
- *
2897
- * Use `onChange` to update its value
2898
- */
2899
- value?: string[];
2900
- /**
2901
- * The callback invoked when any of the checkbox's state changes
2902
- */
2903
- onChange?: ({ name, values }: {
2904
- name: string;
2905
- values: string[];
2906
- }) => void;
2907
- /**
2908
- * The name of the input field in a checkbox
2909
- * (Useful for form submission).
2910
- */
2911
- name?: string;
2912
- /**
2913
- * Size of the checkbox
2914
- *
2915
- * @default "medium"
2916
- */
2917
- size?: 'small' | 'medium';
2918
- } & TestID & StyledPropsBlade;
2919
- declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: CheckboxGroupProps) => React__default.ReactElement;
2920
-
2921
- declare type DropdownProps = {
2922
- selectionType?: 'single' | 'multiple';
2923
- onDismiss?: () => void;
2924
- children: React__default.ReactNode[];
2925
- } & StyledPropsBlade;
2926
- declare const Dropdown: ({ children, selectionType, onDismiss, ...styledProps }: DropdownProps) => JSX.Element;
2927
-
2928
- declare type DropdownOverlayProps = {
2929
- children: React__default.ReactNode;
2930
- } & TestID;
2931
-
2932
- declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => JSX.Element;
2933
-
2934
- declare type BaseButtonCommonProps = {
2935
- size?: 'xsmall' | 'small' | 'medium' | 'large';
2936
- iconPosition?: 'left' | 'right';
2937
- isDisabled?: boolean;
2938
- isFullWidth?: boolean;
2939
- onBlur?: Platform.Select<{
2940
- native: (event: GestureResponderEvent) => void;
2941
- web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
2942
- }>;
2943
- onKeyDown?: Platform.Select<{
2944
- native: (event: GestureResponderEvent) => void;
2945
- web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
2946
- }>;
2947
- onClick?: Platform.Select<{
2948
- native: (event: GestureResponderEvent) => void;
2949
- web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
2950
- }>;
2951
- type?: 'button' | 'reset' | 'submit';
2952
- isLoading?: boolean;
2953
- accessibilityLabel?: string;
2954
- variant?: 'primary' | 'secondary' | 'tertiary';
2955
- contrast?: 'low' | 'high';
2956
- intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
2957
- } & TestID & StyledPropsBlade;
2958
- declare type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
2959
- icon?: undefined;
2960
- children: StringChildrenType;
2961
- };
2962
- declare type BaseButtonWithIconProps = BaseButtonCommonProps & {
2963
- icon: IconComponent$1;
2964
- children?: StringChildrenType;
2965
- };
2966
- declare type BaseButtonProps = BaseButtonWithIconProps | BaseButtonWithoutIconProps;
2967
-
2968
- declare type DropdownButtonProps = ButtonProps & {
2969
- onBlur?: BaseButtonProps['onBlur'];
2970
- onKeyDown?: BaseButtonProps['onKeyDown'];
2971
- };
2972
- declare const DropdownButton: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, onBlur, onKeyDown, size, type, variant, accessibilityLabel, testID, ...styledProps }: DropdownButtonProps) => JSX.Element;
2973
-
2974
- declare const ArrowDownIcon: IconComponent;
2975
-
2976
- declare const ArrowLeftIcon: IconComponent;
2977
-
2978
- declare const ArrowRightIcon: IconComponent;
2979
-
2980
- declare const ArrowUpRightIcon: IconComponent;
2981
-
2982
- declare const ArrowUpIcon: IconComponent;
2983
-
2984
- declare const Attachment: ({ size, color, ...styledProps }: IconProps) => ReactElement;
2985
-
2986
- declare const CheckIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
2987
-
2988
- declare const ChevronDownIcon: IconComponent;
2989
-
2990
- declare const ChevronLeftIcon: IconComponent;
2991
-
2992
- declare const ChevronRightIcon: IconComponent;
2993
-
2994
- declare const ChevronUpIcon: IconComponent;
2995
-
2996
- declare const CloseIcon: IconComponent;
2997
-
2998
- declare const CreditCardIcon: IconComponent;
2999
-
3000
- declare const DollarIcon: IconComponent;
3001
-
3002
- declare const DownloadIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3003
-
3004
- declare const EditIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3005
-
3006
- declare const EyeIcon: IconComponent;
3007
-
3008
- declare const EyeOffIcon: IconComponent;
3009
-
3010
- declare const FileTextIcon: IconComponent;
3011
-
3012
- declare const HistoryIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3013
-
3014
- declare const HomeIcon: IconComponent;
3015
-
3016
- declare const InfoIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3017
-
3018
- declare const LinkIcon: IconComponent;
3019
-
3020
- declare const LockIcon: IconComponent;
3021
-
3022
- declare const PauseIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3023
-
3024
- declare const PlusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3025
-
3026
- declare const RupeeIcon: IconComponent;
3027
-
3028
- declare const SearchIcon: IconComponent;
3029
-
3030
- declare const SettingsIcon: IconComponent;
3031
-
3032
- declare const SlashIcon: IconComponent;
3033
-
3034
- declare const BankIcon: IconComponent;
3035
-
3036
- declare const TrashIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3037
-
3038
- declare const AlertTriangleIcon$1: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3039
-
3040
- declare const AlertTriangleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3041
-
3042
- declare const CheckCircleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3043
-
3044
- declare const MinusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3045
-
3046
- declare const TrendingUpIcon: IconComponent;
3047
-
3048
- declare const TrendingDownIcon: IconComponent;
3049
-
3050
- declare const UsersIcon: IconComponent;
3051
-
3052
- declare const HelpCircleIcon: IconComponent;
3053
-
3054
- declare const ExternalLinkIcon: IconComponent;
3055
-
3056
- declare const MailIcon: IconComponent;
3057
-
3058
- declare const AlertCircleIcon: IconComponent;
3059
-
3060
- declare const AlertOnlyIcon: IconComponent;
3061
-
3062
- declare const QRCodeIcon: IconComponent;
3063
-
3064
- declare const BellIcon: IconComponent;
3065
-
3066
- declare const BellOffIcon: IconComponent;
3067
-
3068
- declare const BookmarkIcon: IconComponent;
3069
-
3070
- declare const CheckSquareIcon: IconComponent;
3071
-
3072
- declare const ClipboardIcon: IconComponent;
3073
-
3074
- declare const CommandIcon: IconComponent;
3075
-
3076
- declare const CopyIcon: IconComponent;
3077
-
3078
- declare const CropIcon: IconComponent;
3079
-
3080
- declare const CutIcon: IconComponent;
3081
-
3082
- declare const DownloadCloudIcon: IconComponent;
3083
-
3084
- declare const EditInlineIcon: IconComponent;
3085
-
3086
- declare const EditComposeIcon: IconComponent;
3087
-
3088
- declare const FileIcon: IconComponent;
3089
-
3090
- declare const FilePlusIcon: IconComponent;
3091
-
3092
- declare const FileMinusIcon: IconComponent;
3093
-
3094
- declare const FilterIcon: IconComponent;
3095
-
3096
- declare const FlagIcon: IconComponent;
3097
-
3098
- declare const FolderIcon: IconComponent;
3099
-
3100
- declare const GlobeIcon: IconComponent;
3101
-
3102
- declare const HashIcon: IconComponent;
3103
-
3104
- declare const HeartIcon: IconComponent;
3105
-
3106
- declare const LogInIcon: IconComponent;
3107
-
3108
- declare const LogOutIcon: IconComponent;
3109
-
3110
- declare const MaximizeIcon: IconComponent;
3111
-
3112
- declare const FullScreenEnterIcon: IconComponent;
3113
-
3114
- declare const FullScreenExitIcon: IconComponent;
3115
-
3116
- declare const MenuIcon: IconComponent;
3117
-
3118
- declare const MicIcon: IconComponent;
3119
-
3120
- declare const MicOffIcon: IconComponent;
3121
-
3122
- declare const MinimizeIcon: IconComponent;
3123
-
3124
- declare const MinusSquareIcon: IconComponent;
3125
-
3126
- declare const MinusCircleIcon: IconComponent;
3127
-
3128
- declare const MoreVerticalIcon: IconComponent;
3129
-
3130
- declare const MoreHorizontalIcon: IconComponent;
3131
-
3132
- declare const MoveIcon: IconComponent;
3133
-
3134
- declare const PauseCircleIcon: IconComponent;
3135
-
3136
- declare const PlayIcon: IconComponent;
3137
-
3138
- declare const PlayCircleIcon: IconComponent;
3139
-
3140
- declare const PlusCircleIcon: IconComponent;
3141
-
3142
- declare const PlusSquareIcon: IconComponent;
3143
-
3144
- declare const PowerIcon: IconComponent;
3145
-
3146
- declare const RefreshIcon: IconComponent;
3147
-
3148
- declare const RepeatIcon: IconComponent;
3149
-
3150
- declare const RotateClockWiseIcon: IconComponent;
3151
-
3152
- declare const RotateCounterClockWiseIcon: IconComponent;
3153
-
3154
- declare const SaveIcon: IconComponent;
3155
-
3156
- declare const ShareIcon: IconComponent;
3157
-
3158
- declare const ExportIcon: IconComponent;
3159
-
3160
- declare const ShoppingCartIcon: IconComponent;
3161
-
3162
- declare const StopCircleIcon: IconComponent;
3163
-
3164
- declare const SunIcon: IconComponent;
3165
-
3166
- declare const ToggleLeftIcon: IconComponent;
3167
-
3168
- declare const ToggleRightIcon: IconComponent;
3169
-
3170
- declare const ListIcon: IconComponent;
3171
-
3172
- declare const StarIcon: IconComponent;
3173
-
3174
- declare const SlidersIcon: IconComponent;
3175
-
3176
- declare const PaperclipIcon: IconComponent;
3177
-
3178
- declare const UploadCloudIcon: IconComponent;
3179
-
3180
- declare const TargetIcon: IconComponent;
3181
-
3182
- declare const UnlockIcon: IconComponent;
3183
-
3184
- declare const ThumbsUpIcon: IconComponent;
3185
-
3186
- declare const ThumbsDownIcon: IconComponent;
3187
-
3188
- declare const UploadIcon: IconComponent;
3189
-
3190
- declare const VideoIcon: IconComponent;
3191
-
3192
- declare const XSquareIcon: IconComponent;
3193
-
3194
- declare const XCircleIcon: IconComponent;
3195
-
3196
- declare const ZapIcon: IconComponent;
3197
-
3198
- declare const ZoomOutIcon: IconComponent;
3199
-
3200
- declare const ZoomInIcon: IconComponent;
3201
-
3202
- declare const AlignJustifyIcon: IconComponent;
3203
-
3204
- declare const AlignRightIcon: IconComponent;
3205
-
3206
- declare const AlignLeftIcon: IconComponent;
3207
-
3208
- declare const AlignCenterIcon: IconComponent;
3209
-
3210
- declare const AnchorIcon: IconComponent;
3211
-
3212
- declare const BoldIcon: IconComponent;
3213
-
3214
- declare const ScissorsIcon: IconComponent;
3215
-
3216
- declare const DeleteIcon: IconComponent;
3217
-
3218
- declare const GridIcon: IconComponent;
3219
-
3220
- declare const ImageIcon: IconComponent;
3221
-
3222
- declare const InboxIcon: IconComponent;
3223
-
3224
- declare const ItalicIcon: IconComponent;
3225
-
3226
- declare const TypeIcon: IconComponent;
3227
-
3228
- declare const UnderlineIcon: IconComponent;
3229
-
3230
- declare const FilmIcon: IconComponent;
3231
-
3232
- declare const AirplayIcon: IconComponent;
3233
-
3234
- declare const AtSignIcon: IconComponent;
3235
-
3236
- declare const BluetoothIcon: IconComponent;
3237
-
3238
- declare const CameraIcon: IconComponent;
3239
-
3240
- declare const CameraOffIcon: IconComponent;
3241
-
3242
- declare const CastIcon: IconComponent;
3243
-
3244
- declare const MessageCircleIcon: IconComponent;
3245
-
3246
- declare const MessageSquareIcon: IconComponent;
3247
-
3248
- declare const PhoneCallIcon: IconComponent;
3249
-
3250
- declare const PhoneIcon: IconComponent;
3251
-
3252
- declare const PhoneOutgoingIcon: IconComponent;
3253
-
3254
- declare const PhoneOffIcon: IconComponent;
3255
-
3256
- declare const PhoneMissedIcon: IconComponent;
3257
-
3258
- declare const PhoneIncomingIcon: IconComponent;
3259
-
3260
- declare const PhoneForwardedIcon: IconComponent;
3261
-
3262
- declare const RadioIcon: IconComponent;
3263
-
3264
- declare const VideoOffIcon: IconComponent;
3265
-
3266
- declare const VoicemailIcon: IconComponent;
3267
-
3268
- declare const WifiIcon: IconComponent;
3269
-
3270
- declare const WifiOffIcon: IconComponent;
3271
-
3272
- declare const ApertureIcon: IconComponent;
3273
-
3274
- declare const AwardIcon: IconComponent;
3275
-
3276
- declare const BoxIcon: IconComponent;
3277
-
3278
- declare const BriefcaseIcon: IconComponent;
3279
-
3280
- declare const ChromeIcon: IconComponent;
3281
-
3282
- declare const CircleIcon: IconComponent;
3283
-
3284
- declare const CrosshairIcon: IconComponent;
3285
-
3286
- declare const DiscIcon: IconComponent;
3287
-
3288
- declare const DropletIcon: IconComponent;
3289
-
3290
- declare const FeatherIcon: IconComponent;
3291
-
3292
- declare const LayersIcon: IconComponent;
3293
-
3294
- declare const LayoutIcon: IconComponent;
3295
-
3296
- declare const SidebarIcon: IconComponent;
3297
-
3298
- declare const SquareIcon: IconComponent;
3299
-
3300
- declare const TriangleIcon: IconComponent;
3301
-
3302
- declare const LifeBuoyIcon: IconComponent;
3303
-
3304
- declare const LoaderIcon: IconComponent;
3305
-
3306
- declare const OctagonIcon: IconComponent;
3307
-
3308
- declare const PackageIcon: IconComponent;
3309
-
3310
- declare const PercentIcon: IconComponent;
3311
-
3312
- declare const ShieldIcon: IconComponent;
3313
-
3314
- declare const UmbrellaIcon: IconComponent;
3315
-
3316
- declare const WindIcon: IconComponent;
3317
-
3318
- declare const ArrowUpLeftIcon: IconComponent;
3319
-
3320
- declare const ArrowDownRightIcon: IconComponent;
3321
-
3322
- declare const ArrowDownLeftIcon: IconComponent;
3323
-
3324
- declare const ChevronsRightIcon: IconComponent;
3325
-
3326
- declare const ChevronsLeftIcon: IconComponent;
3327
-
3328
- declare const ChevronsDownIcon: IconComponent;
3329
-
3330
- declare const ChevronsUpIcon: IconComponent;
3331
-
3332
- declare const CornerUpRightIcon: IconComponent;
3333
-
3334
- declare const CornerDownLeftIcon: IconComponent;
3335
-
3336
- declare const CornerRightUpIcon: IconComponent;
3337
-
3338
- declare const CornerRightDownIcon: IconComponent;
3339
-
3340
- declare const CornerLeftUpIcon: IconComponent;
3341
-
3342
- declare const CornerDownRightIcon: IconComponent;
3343
-
3344
- declare const CornerUpLeftIcon: IconComponent;
3345
-
3346
- declare const CornerLeftDownIcon: IconComponent;
3347
-
3348
- declare const FastForwardIcon: IconComponent;
3349
-
3350
- declare const HeadphonesIcon: IconComponent;
3351
-
3352
- declare const MusicIcon: IconComponent;
3353
-
3354
- declare const RewindIcon: IconComponent;
3355
-
3356
- declare const SkipBackIcon: IconComponent;
3357
-
3358
- declare const SkipForwardIcon: IconComponent;
3359
-
3360
- declare const VolumeIcon: IconComponent;
3361
-
3362
- declare const VolumeMuteIcon: IconComponent;
3363
-
3364
- declare const VolumeLowIcon: IconComponent;
3365
-
3366
- declare const VolumeHighIcon: IconComponent;
3367
-
3368
- declare const CalendarIcon: IconComponent;
3369
-
3370
- declare const ClockIcon: IconComponent;
3371
-
3372
- declare const CloudIcon: IconComponent;
3373
-
3374
- declare const CloudDrizzleIcon: IconComponent;
3375
-
3376
- declare const CloudSnowIcon: IconComponent;
3377
-
3378
- declare const CloudOffIcon: IconComponent;
3379
-
3380
- declare const CloudLightningIcon: IconComponent;
3381
-
3382
- declare const MoonIcon: IconComponent;
3383
-
3384
- declare const SunsetIcon: IconComponent;
3385
-
3386
- declare const SunriseIcon: IconComponent;
3387
-
3388
- declare const WatchIcon: IconComponent;
3389
-
3390
- declare const CloudRainIcon: IconComponent;
3391
-
3392
- declare const BatteryChargingIcon: IconComponent;
3393
-
3394
- declare const BatteryIcon: IconComponent;
3395
-
3396
- declare const CpuIcon: IconComponent;
3397
-
3398
- declare const MonitorIcon: IconComponent;
3399
-
3400
- declare const PrinterIcon: IconComponent;
3401
-
3402
- declare const ServerIcon: IconComponent;
3403
-
3404
- declare const SmartphoneIcon: IconComponent;
3405
-
3406
- declare const SpeakerIcon: IconComponent;
3407
-
3408
- declare const TabletIcon: IconComponent;
3409
-
3410
- declare const ThermometerIcon: IconComponent;
3411
-
3412
- declare const TvIcon: IconComponent;
3413
-
3414
- declare const CodepenIcon: IconComponent;
3415
-
3416
- declare const FacebookIcon: IconComponent;
3417
-
3418
- declare const GitlabIcon: IconComponent;
3419
-
3420
- declare const GithubIcon: IconComponent;
3421
-
3422
- declare const InstagramIcon: IconComponent;
3423
-
3424
- declare const PocketIcon: IconComponent;
3425
-
3426
- declare const SlackIcon: IconComponent;
3427
-
3428
- declare const TwitterIcon: IconComponent;
3429
-
3430
- declare const UserCheckIcon: IconComponent;
3431
-
3432
- declare const UserXIcon: IconComponent;
3433
-
3434
- declare const UserPlusIcon: IconComponent;
3435
-
3436
- declare const UserMinusIcon: IconComponent;
3437
-
3438
- declare const ActivityIcon: IconComponent;
3439
-
3440
- declare const BarChartIcon: IconComponent;
3441
-
3442
- declare const BarChartAltIcon: IconComponent;
3443
-
3444
- declare const PieChartIcon: IconComponent;
3445
-
3446
- declare const CompassIcon: IconComponent;
3447
-
3448
- declare const MapIcon: IconComponent;
3449
-
3450
- declare const MapPinIcon: IconComponent;
3451
-
3452
- declare const NavigationIcon: IconComponent;
3453
-
3454
- declare const DollarsIcon: IconComponent;
3455
-
3456
- declare const RupeesIcon: IconComponent;
3457
-
3458
- declare const DashboardIcon: IconComponent;
3459
-
3460
- declare const InvoicesIcon: IconComponent;
3461
-
3462
- declare const PaymentLinksIcon: IconComponent;
3463
-
3464
- declare const PaymentButtonsIcon: IconComponent;
3465
-
3466
- declare const PaymentPagesIcon: IconComponent;
3467
-
3468
- declare const RoutesIcon: IconComponent;
3469
-
3470
- declare const SubscriptionsIcon: IconComponent;
3471
-
3472
- declare const SmartCollectIcon: IconComponent;
3473
-
3474
- declare const CustomersIcon: IconComponent;
3475
-
3476
- declare const OffersIcon: IconComponent;
3477
-
3478
- declare const ReportsIcon: IconComponent;
3479
-
3480
- declare const MyAccountIcon: IconComponent;
3481
-
3482
- declare const RazorpayIcon: IconComponent;
3483
-
3484
- declare const RazorpayXIcon: IconComponent;
3485
-
3486
- declare const BookIcon: IconComponent;
3487
-
3488
- declare const SettlementsIcon: IconComponent;
3489
-
3490
- declare const ShuffleIcon: IconComponent;
3491
-
3492
- declare const TagIcon: IconComponent;
3493
-
3494
- declare const UserIcon: IconComponent;
3495
-
3496
- declare const TransactionsIcon: IconComponent;
3497
-
3498
- declare const AnnouncementIcon: IconComponent;
3499
-
3500
- declare const AppStoreIcon: IconComponent;
3501
-
3502
- declare const CoinsIcon: IconComponent;
3503
-
3504
- declare const BillIcon: IconComponent;
3505
-
3506
- declare const StampIcon: IconComponent;
3507
-
3508
- declare const MenuDotsIcon: IconComponent;
3509
-
3510
- declare const SendIcon: IconComponent;
3511
-
3512
- declare const MailOpenIcon: IconComponent;
3513
-
3514
- declare const BulkPayoutsIcon: IconComponent;
3515
-
3516
- declare type FeedbackIconColors = `feedback.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback']['icon']>}`;
3517
- declare type FeedbackActionIconColors = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['icon']>}`;
3518
- declare type ActionIconColors = `action.icon.${DotNotationColorStringToken<Theme$1['colors']['action']['icon']>}`;
3519
- declare type TextIconColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
3520
- declare type SurfaceActionIconColors = `surface.action.icon.${DotNotationColorStringToken<Theme$1['colors']['surface']['action']['icon']>}`;
3521
- declare type BadgeIconColors = `badge.icon.${DotNotationColorStringToken<Theme$1['colors']['badge']['icon']>}`;
3522
- declare type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
3523
- declare type IconProps = {
3524
- /**
3525
- * Color token (not to be confused with actual hsla value)
3526
- */
3527
- color: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
3528
- size: IconSize;
3529
- } & StyledPropsBlade;
3530
- declare type IconComponent = React.ComponentType<IconProps>;
3531
-
3532
- /**
3533
- * Similar to `Pick` except this returns `never` when value doesn't exist (native `Pick` returns `unknown`).
3534
- *
3535
- * You might have to ts-ignore the non-existing type error while using this. This is done so that you can get jsdoc from actual type.
3536
- *
3537
- * E.g. This will pick from ViewStyle prop if value exists else returns undefined.
3538
- *
3539
- * ```ts
3540
- * // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
3541
- * native: PickIfExist<ViewStyle, T>;
3542
- * ```
3543
- */
3544
- declare type PickIfExist<T, K extends keyof T> = {
3545
- [P in K]: P extends keyof T ? T[P] : never;
3546
- };
3547
- /**
3548
- * Picks the types based on the platform (web / native).
3549
- *
3550
- * E.g.
3551
- * ```ts
3552
- * type CSSObject = PickCSSByPlatform<'display'>
3553
- * // On Web --> This will be all possible web display properties like `block`, `flex`, `inline`, and more.
3554
- * // On Native --> This will be just `flex` and `none`
3555
- * ```
3556
- */
3557
- declare type PickCSSByPlatform<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
3558
- web: PickIfExist<CSSObject, T>;
3559
- native: PickIfExist<ViewStyle, T>;
3560
- }>;
3561
-
3562
- declare type FormInputLabelProps = {
3563
- /**
3564
- * Label to be shown for the input field
3565
- */
3566
- label: string;
3567
- /**
3568
- * Desktop only prop. Default value on mobile will be `top`
3569
- */
3570
- labelPosition?: 'left' | 'top';
3571
- /**
3572
- * Displays `(optional)` when `optional` is passed or `*` when `required` is passed
3573
- */
3574
- necessityIndicator?: 'required' | 'optional' | 'none';
3575
- };
3576
-
3577
- declare type FormInputOnEvent = ({ name, value }: {
3578
- name?: string;
3579
- value?: string;
3580
- }) => void;
3581
- declare type FormInputValidationProps = {
3582
- /**
3583
- * Help text for the input
3584
- */
3585
- helpText?: string;
3586
- /**
3587
- * Error text for the input
3588
- *
3589
- * Renders when `validationState` is set to 'error'
3590
- */
3591
- errorText?: string;
3592
- /**
3593
- * success text for the input
3594
- *
3595
- * Renders when `validationState` is set to 'success'
3596
- */
3597
- successText?: string;
3598
- /**
3599
- * If `error`, the input is marked as invalid,
3600
- * and `invalid` attribute will be added
3601
- *
3602
- * If `success`, the input is marked as valid,
3603
- *
3604
- */
3605
- validationState?: 'success' | 'error' | 'none';
3606
- };
3607
-
3608
- type FormInputHandleOnKeyDownEvent = ({
3609
- name,
3610
- key,
3611
- code,
3612
- event,
3613
- }: FormInputOnKeyDownEvent) => void;
3614
-
3615
- type FormInputOnKeyDownEvent = {
3616
- name?: string;
3617
- key?: string;
3618
- code?: string;
3619
- event: KeyboardEvent<HTMLInputElement>;
3620
- };
3621
-
3622
- declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
3623
- /**
3624
- * Determines if it needs to be rendered as input, textarea or button
3625
- */
3626
- as?: 'input' | 'textarea' | 'button';
3627
- /**
3628
- * ID that will be used for accessibility
3629
- */
3630
- id: string;
3631
- /**
3632
- * Placeholder text to be displayed inside the input field
3633
- */
3634
- placeholder?: string;
3635
- /**
3636
- * Type of Input Field to be rendered.
3637
- *
3638
- * @default text
3639
- */
3640
- type?: 'text' | 'telephone' | 'email' | 'url' | 'number' | 'search' | 'password';
3641
- /**
3642
- * Used to set the default value of input field when it's uncontrolled
3643
- */
3644
- defaultValue?: string;
3645
- /**
3646
- * The name of the input field.
3647
- *
3648
- * Useful in form submissions
3649
- */
3650
- name?: string;
3651
- /**
3652
- * The callback function to be invoked when the input field gets focus
3653
- */
3654
- onFocus?: FormInputOnEvent;
3655
- /**
3656
- * The callback function to be invoked when the value of the input field changes
3657
- */
3658
- onChange?: FormInputOnEvent;
3659
- /**
3660
- * The callback function to be invoked when input is clicked
3661
- */
3662
- onClick?: FormInputOnEvent;
3663
- /**
3664
- * The callback function to be invoked when the value of the input field has any input
3665
- */
3666
- onInput?: FormInputOnEvent;
3667
- /**
3668
- * The callback function to be invoked whenever there is a keyDown event
3669
- */
3670
- onKeyDown?: FormInputHandleOnKeyDownEvent;
3671
- /**
3672
- * The callback function to be invoked when the the input field loses focus
3673
- *
3674
- * For React Native this will call `onEndEditing` event since we want to get the last value of the input field
3675
- */
3676
- onBlur?: FormInputOnEvent;
3677
- /**
3678
- * Ignores the blur event animation (Used in Select to ignore blur animation when item in option is clicked)
3679
- */
3680
- shouldIgnoreBlurAnimation?: boolean;
3681
- /**
3682
- * Used to turn the input field to controlled so user can control the value
3683
- */
3684
- value?: string;
3685
- /**
3686
- * Used to disable the input field
3687
- */
3688
- isDisabled?: boolean;
3689
- /**
3690
- * If true, the input is marked as required, and `required` attribute will be added
3691
- */
3692
- isRequired?: boolean;
3693
- /**
3694
- * Icon to be shown at the start of the input field
3695
- */
3696
- leadingIcon?: IconComponent$1;
3697
- /**
3698
- * Prefix symbol to be displayed at the beginning of the input field. If leadingIcon is provided it'll be placed after it
3699
- */
3700
- prefix?: string;
3701
- /**
3702
- * Element to be rendered before suffix. This is decided by the component which is extending BaseInput
3703
- *
3704
- * eg: consumers can render a loader or they could render a clear button
3705
- */
3706
- interactionElement?: ReactNode;
3707
- /**
3708
- * Suffix symbol to be displayed at the end of the input field. If trailingIcon is provided it'll be placed before it
3709
- */
3710
- suffix?: string;
3711
- /**
3712
- * Icon to be displayed at the end of the input field
3713
- */
3714
- trailingIcon?: IconComponent$1;
3715
- /**
3716
- * Displays the character counter under the input field
3717
- */
3718
- maxCharacters?: number;
3719
- /**
3720
- * alignment of the text inside input field
3721
- */
3722
- textAlign?: 'left' | 'center' | 'right';
3723
- /**
3724
- * If true, focuses the input field on load
3725
- *
3726
- * **Note:**
3727
- * Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments.
3728
- * When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.
3729
- */
3730
- autoFocus?: boolean;
3731
- /**
3732
- * Hints the platform to display an appropriate virtual keyboard
3733
- *
3734
- * **Native:** Passes as is the `keyboardType` attribute
3735
- *
3736
- * **Web:** Passes the value to the `inputMode` attribute
3737
- */
3738
- keyboardType?: 'text' | 'search' | 'telephone' | 'email' | 'url' | 'decimal';
3739
- /**
3740
- * determines what return key to show on the keyboard of mobile devices/virtual keyboard
3741
- * **Note**: Few values are platform dependent and might not render on all the platforms
3742
- *
3743
- * `default` is only available on native. it'll be mapped to `enter` for web
3744
- * `previous` is only available on native android
3745
- */
3746
- keyboardReturnKeyType?: 'default' | 'go' | 'done' | 'next' | 'previous' | 'search' | 'send';
3747
- /**
3748
- * determines what autoComplete suggestion type to show
3749
- *
3750
- * Internally it'll render platform specific attributes:
3751
- *
3752
- * - web: `autocomplete`
3753
- * - iOS: `textContentType`
3754
- * - android: `autoComplete`
3755
- *
3756
- */
3757
- autoCompleteSuggestionType?: 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
3758
- /**
3759
- * Element to be rendered on the trailing slot of input field label
3760
- */
3761
- trailingHeaderSlot?: (value?: string) => ReactNode;
3762
- /**
3763
- * Element to be rendered on the trailing slot of input field footer
3764
- */
3765
- trailingFooterSlot?: (value?: string) => ReactNode;
3766
- /**
3767
- * Sets the textarea's number of lines
3768
- */
3769
- numberOfLines?: 2 | 3 | 4 | 5;
3770
- /**
3771
- * Sets the accessibility label for the input
3772
- */
3773
- accessibilityLabel?: string;
3774
- /**
3775
- * Sets the id of the label
3776
- *
3777
- * (Useful when assigning one label to multiple elements using aria-labelledby)
3778
- */
3779
- labelId?: string;
3780
- /**
3781
- * Can be used in select to set the id of the active descendant from the listbox
3782
- */
3783
- activeDescendant?: string;
3784
- /**
3785
- * Hides the label text
3786
- */
3787
- hideLabelText?: boolean;
3788
- /**
3789
- * Hides the form hint text
3790
- */
3791
- hideFormHint?: boolean;
3792
- /**
3793
- * componentName prop sets the data-blade-component attribute name
3794
- * for internal metric collection purposes
3795
- */
3796
- componentName?: string;
3797
- /**
3798
- * whether the input has a popup
3799
- */
3800
- hasPopup?: AriaAttributes['hasPopup'];
3801
- /**
3802
- * id of the popup
3803
- */
3804
- popupId?: string;
3805
- /**
3806
- * true if popup is in expanded state
3807
- */
3808
- isPopupExpanded?: boolean;
3809
- /**
3810
- * sets the autocapitalize behavior for the input
3811
- */
3812
- autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
3813
- } & TestID & Platform.Select<{
3814
- native: {
3815
- /**
3816
- * The callback function to be invoked when the value of the input field is submitted.
3817
- */
3818
- onSubmit?: FormInputOnEvent;
3819
- };
3820
- web: {
3821
- /**
3822
- * This is a react-native only prop and has no effect on web.
3823
- */
3824
- onSubmit?: undefined;
3825
- };
3826
- }> & StyledPropsBlade;
3827
-
3828
- declare type Type = Exclude<BaseInputProps['type'], 'password'>;
3829
- declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID'> & {
3830
- /**
3831
- * Decides whether to render a clear icon button
3832
- */
3833
- showClearButton?: boolean;
3834
- /**
3835
- * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
3836
- */
3837
- onClearButtonClick?: () => void;
3838
- /**
3839
- * Decides whether to show a loading spinner for the input field.
3840
- */
3841
- isLoading?: boolean;
3842
- /**
3843
- * Icon that will be rendered at the beginning of the input field
3844
- */
3845
- icon?: IconComponent$1;
3846
- /**
3847
- * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
3848
- *
3849
- *
3850
- * **Note on number type**
3851
- *
3852
- * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
3853
- * If you have a usecase where you only want to support number input, you can handle it on validations end.
3854
- *
3855
- * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
3856
- *
3857
- * @default text
3858
- */
3859
- type?: Type;
3860
- } & StyledPropsBlade;
3861
- declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "defaultValue" | "prefix" | "autoCapitalize" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
3862
- /**
3863
- * Decides whether to render a clear icon button
3864
- */
3865
- showClearButton?: boolean | undefined;
3866
- /**
3867
- * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
3868
- */
3869
- onClearButtonClick?: (() => void) | undefined;
3870
- /**
3871
- * Decides whether to show a loading spinner for the input field.
3872
- */
3873
- isLoading?: boolean | undefined;
3874
- /**
3875
- * Icon that will be rendered at the beginning of the input field
3876
- */
3877
- icon?: IconComponent$1 | undefined;
3878
- /**
3879
- * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
3880
- *
3881
- *
3882
- * **Note on number type**
3883
- *
3884
- * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
3885
- * If you have a usecase where you only want to support number input, you can handle it on validations end.
3886
- *
3887
- * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
3888
- *
3889
- * @default text
3890
- */
3891
- type?: Type;
3892
- } & Partial<Omit<MakeObjectResponsive<{
3893
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
3894
- marginX: SpacingValueType;
3895
- marginY: SpacingValueType;
3896
- marginTop: SpacingValueType;
3897
- marginRight: SpacingValueType;
3898
- marginBottom: SpacingValueType;
3899
- marginLeft: SpacingValueType;
3900
- }> & Pick<MakeObjectResponsive<{
3901
- gap: SpacingValueType;
3902
- rowGap: SpacingValueType;
3903
- columnGap: SpacingValueType;
3904
- flex: string | number;
3905
- } & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
3906
- __brand__?: "platform-native" | undefined;
3907
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
3908
- top: SpacingValueType;
3909
- right: SpacingValueType;
3910
- bottom: SpacingValueType;
3911
- left: SpacingValueType;
3912
- } & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
3913
- __brand__?: "platform-native" | undefined;
3914
- }> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
3915
-
3916
- declare type PasswordInputExtraProps = {
3917
- /**
3918
- * Shows a reveal button to toggle password visibility
3919
- *
3920
- * @default true
3921
- */
3922
- showRevealButton?: boolean;
3923
- /**
3924
- * Displays asterisk (`*`) when `isRequired` is enabled
3925
- *
3926
- * @default none
3927
- */
3928
- necessityIndicator?: Exclude<BaseInputProps['necessityIndicator'], 'optional'>;
3929
- /**
3930
- * Determines what autoComplete suggestion type to show. Defaults to using platform heuristics.
3931
- *
3932
- * It's not recommended to turn this off in favor of safe password practices.
3933
- * Providing `password` or `newPassword` is more informative to the platform for browser autofill or password managers.
3934
- *
3935
- * **Note**: Using `newPassword` on iOS has some [known issue](https://github.com/facebook/react-native/issues/21911) on React Native
3936
- *
3937
- * Internally it'll render platform specific attributes:
3938
- *
3939
- * - web: `autocomplete`
3940
- * - iOS: `textContentType`
3941
- * - android: `autoComplete`
3942
- *
3943
- */
3944
- autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
3945
- };
3946
- declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
3947
- declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<MakeObjectResponsive<{
3948
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
3949
- marginX: SpacingValueType;
3950
- marginY: SpacingValueType;
3951
- marginTop: SpacingValueType;
3952
- marginRight: SpacingValueType;
3953
- marginBottom: SpacingValueType;
3954
- marginLeft: SpacingValueType;
3955
- }> & Pick<MakeObjectResponsive<{
3956
- gap: SpacingValueType;
3957
- rowGap: SpacingValueType;
3958
- columnGap: SpacingValueType;
3959
- flex: string | number;
3960
- } & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
3961
- __brand__?: "platform-native" | undefined;
3962
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
3963
- top: SpacingValueType;
3964
- right: SpacingValueType;
3965
- bottom: SpacingValueType;
3966
- left: SpacingValueType;
3967
- } & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
3968
- __brand__?: "platform-native" | undefined;
3969
- }> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
3970
-
3971
- declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID'> & {
3972
- /**
3973
- * Decides whether to render a clear icon button
3974
- */
3975
- showClearButton?: boolean;
3976
- /**
3977
- * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
3978
- */
3979
- onClearButtonClick?: () => void;
3980
- } & StyledPropsBlade;
3981
- declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "numberOfLines" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters"> & {
3982
- /**
3983
- * Decides whether to render a clear icon button
3984
- */
3985
- showClearButton?: boolean | undefined;
3986
- /**
3987
- * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
3988
- */
3989
- onClearButtonClick?: (() => void) | undefined;
3990
- } & Partial<Omit<MakeObjectResponsive<{
3991
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
3992
- marginX: SpacingValueType;
3993
- marginY: SpacingValueType;
3994
- marginTop: SpacingValueType;
3995
- marginRight: SpacingValueType;
3996
- marginBottom: SpacingValueType;
3997
- marginLeft: SpacingValueType;
3998
- }> & Pick<MakeObjectResponsive<{
3999
- gap: SpacingValueType;
4000
- rowGap: SpacingValueType;
4001
- columnGap: SpacingValueType;
4002
- flex: string | number;
4003
- } & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
4004
- __brand__?: "platform-native" | undefined;
4005
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
4006
- top: SpacingValueType;
4007
- right: SpacingValueType;
4008
- bottom: SpacingValueType;
4009
- left: SpacingValueType;
4010
- } & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
4011
- __brand__?: "platform-native" | undefined;
4012
- }> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
4013
-
4014
- declare type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
4015
- name?: string;
4016
- value?: string;
4017
- inputIndex: number;
4018
- }) => void;
4019
- declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID'> & {
4020
- /**
4021
- * Determines the number of input fields to show for the OTP
4022
- * @default 6
4023
- */
4024
- otpLength?: 4 | 6;
4025
- /**
4026
- * The callback function to be invoked when all the values of the OTPInput are filled
4027
- */
4028
- onOTPFilled?: FormInputOnEvent;
4029
- /**
4030
- * Masks input characters in all the fields
4031
- */
4032
- isMasked?: boolean;
4033
- /**
4034
- * Determines what autoComplete suggestion type to show. Defaults to `oneTimeCode`.
4035
- *
4036
- * It's not recommended to turn this off in favor of otp input practices.
4037
- *
4038
- *
4039
- * Internally it'll render platform specific attributes:
4040
- *
4041
- * - web: `autocomplete`
4042
- * - iOS: `textContentType`
4043
- * - android: `autoComplete`
4044
- *
4045
- */
4046
- autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
4047
- /**
4048
- * The callback function to be invoked when one of the input fields gets focus
4049
- */
4050
- onFocus?: FormInputOnEventWithIndex;
4051
- /**
4052
- * The callback function to be invoked when one of the input fields is blurred
4053
- */
4054
- onBlur?: FormInputOnEventWithIndex;
4055
- } & StyledPropsBlade;
4056
- /**
4057
- * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
4058
- *
4059
- * ## Usage
4060
- *
4061
- * ```tsx
4062
- * <OTPInput
4063
- * label="Enter OTP"
4064
- * name="otpInput"
4065
- * onChange={({ name, value }): void => console.log({ name, value })}
4066
- * onOTPFilled={({ name, value }): void => console.log({ name, value })}
4067
- * />
4068
- * ```
4069
- */
4070
- declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onFocus, onBlur, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
4071
-
4072
- declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
4073
- icon?: IconComponent$1;
4074
- /**
4075
- * Controlled value of the Select. Use it in combination of `onChange`.
4076
- *
4077
- * Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
4078
- */
4079
- value?: string | string[];
4080
- /**
4081
- * Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
4082
- */
4083
- defaultValue?: string | string[];
4084
- onChange?: ({ name, values }: {
4085
- name?: string;
4086
- values: string[];
4087
- }) => void;
4088
- };
4089
- /**
4090
- * ### SelectInput
4091
- *
4092
- * Our equivalent of `<select>` tag. Lets you select items from given options.
4093
- *
4094
- * To be used in combination of `Dropdown` and `ActionList` component
4095
- *
4096
- * ---
4097
- *
4098
- * #### Usage
4099
- *
4100
- * ```diff
4101
- * <Dropdown>
4102
- * + <SelectInput label="Select Fruits" />
4103
- * <DropdownOverlay>
4104
- * <ActionList>
4105
- * <ActionListItem title="Mango" value="mango" />
4106
- * <ActionListItem title="Apple" value="apple" />
4107
- * </ActionList>
4108
- * </DropdownOverlay>
4109
- * </Dropdown>
4110
- * ```
4111
- *
4112
- * ---
4113
- *
4114
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
4115
- */
4116
- declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "prefix" | "onFocus" | "onBlur" | "onClick" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix"> & {
4117
- icon?: IconComponent$1 | undefined;
4118
- /**
4119
- * Controlled value of the Select. Use it in combination of `onChange`.
4120
- *
4121
- * Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
4122
- */
4123
- value?: string | string[] | undefined;
4124
- /**
4125
- * Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
4126
- */
4127
- defaultValue?: string | string[] | undefined;
4128
- onChange?: (({ name, values }: {
4129
- name?: string | undefined;
4130
- values: string[];
4131
- }) => void) | undefined;
4132
- } & React__default.RefAttributes<BladeElementRef>>;
4133
-
4134
- declare type IndicatorCommonProps = {
4135
- /**
4136
- * Sets the color tone
4137
- *
4138
- * @default neutral
4139
- */
4140
- intent?: Feedback;
4141
- /**
4142
- * Size of the indicator
4143
- *
4144
- * @default medium
4145
- */
4146
- size?: 'small' | 'medium' | 'large';
4147
- } & TestID & StyledPropsBlade;
4148
- declare type IndicatorWithoutA11yLabel = {
4149
- /**
4150
- * A text label to show alongside the indicator dot
4151
- */
4152
- children: StringChildrenType;
4153
- /**
4154
- * a11y label for screen readers
4155
- */
4156
- accessibilityLabel?: string;
4157
- };
4158
- declare type IndicatorWithA11yLabel = {
4159
- /**
4160
- * a11y label for screen readers
4161
- */
4162
- accessibilityLabel: string;
4163
- /**
4164
- * A text label to show alongside the indicator dot
4165
- */
4166
- children?: StringChildrenType;
4167
- };
4168
- declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
4169
- declare const Indicator: ({ accessibilityLabel, children, size, intent, testID, ...styledProps }: IndicatorProps) => ReactElement;
4170
-
4171
- declare type ListItemProps = {
4172
- /**
4173
- * Children to be rendered for ListItem. This can be a text, ListItemLink or another List.
4174
- *
4175
- */
4176
- children: React__default.ReactNode;
4177
- /**
4178
- * Icon to be rendered for a ListItem's bullet.
4179
- *
4180
- */
4181
- icon?: IconComponent;
4182
- /**
4183
- * This is a private prop to be used only for internal logic purposes.
4184
- *
4185
- */
4186
- _itemNumber?: undefined;
4187
- } & TestID;
4188
- declare const ListItem: ({ children, icon, _itemNumber, testID, }: ListItemProps) => React__default.ReactElement;
4189
-
4190
- declare type ListCommonProps = {
4191
- /**
4192
- * ListItem to be rendered for the List.
4193
- *
4194
- */
4195
- children: React__default.ReactElement<ListItemProps> | React__default.ReactElement<ListItemProps>[];
4196
- /**
4197
- * Sets the variant to be rendered for the List.
4198
- *
4199
- * @default 'unordered'
4200
- */
4201
- variant?: 'unordered' | 'ordered' | 'ordered-filled';
4202
- /**
4203
- * Sets the size for the List.
4204
- *
4205
- * @default 'medium'
4206
- */
4207
- size?: 'small' | 'medium';
4208
- } & TestID & StyledPropsBlade;
4209
- declare type ListWithIconProps = ListCommonProps & {
4210
- variant?: 'unordered';
4211
- icon?: IconComponent;
4212
- };
4213
- declare type ListWithoutIconProps = ListCommonProps & {
4214
- variant?: 'ordered' | 'ordered-filled';
4215
- icon?: undefined;
4216
- };
4217
- declare type ListProps = ListWithIconProps | ListWithoutIconProps;
4218
- declare const List: ({ variant, size, children, icon, testID, ...styledProps }: ListProps) => React__default.ReactElement;
4219
-
4220
- declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
4221
- declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
4222
-
4223
- declare type TitleProps = {
4224
- size?: 'small' | 'medium' | 'large' | 'xlarge';
4225
- contrast?: ColorContrastTypes;
4226
- type?: TextTypes;
4227
- children: StringChildrenType;
4228
- } & TestID & StyledPropsBlade;
4229
- declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
4230
-
4231
- declare type HeadingVariant = 'regular' | 'subheading';
4232
- declare type HeadingSize = 'small' | 'medium' | 'large';
4233
- declare type HeadingCommonProps = {
4234
- type?: TextTypes;
4235
- contrast?: ColorContrastTypes;
4236
- children: StringChildrenType;
4237
- } & TestID & StyledPropsBlade;
4238
- declare type HeadingNormalVariant = HeadingCommonProps & {
4239
- variant?: Exclude<HeadingVariant, 'subheading'>;
4240
- /**
4241
- *
4242
- * @default small
4243
- */
4244
- size?: HeadingSize;
4245
- weight?: keyof Theme$1['typography']['fonts']['weight'];
4246
- };
4247
- declare type HeadingSubHeadingVariant = HeadingCommonProps & {
4248
- variant?: Extract<HeadingVariant, 'subheading'>;
4249
- /**
4250
- * `size` cannot be used with variant="subheading". Either change to variant="regular" or remove size prop
4251
- */
4252
- size?: undefined;
4253
- weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'bold'>;
4254
- };
4255
- /**
4256
- * Conditionally changing props based on variant.
4257
- * Overloads or union gives wrong intellisense.
4258
- */
4259
- declare type HeadingProps<T> = T extends {
4260
- variant: infer Variant;
4261
- } ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
4262
- declare const Heading: <T extends {
4263
- variant: HeadingVariant;
4264
- }>({ variant, size, type, weight, contrast, children, testID, ...styledProps }: HeadingProps<T>) => ReactElement;
4265
-
4266
- declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
4267
- declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
4268
- declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
4269
- declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
4270
- declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
4271
- declare type BaseTextProps = {
4272
- id?: string;
4273
- color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
4274
- fontFamily?: keyof Theme$1['typography']['fonts']['family'];
4275
- fontSize?: keyof Theme$1['typography']['fonts']['size'];
4276
- fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
4277
- fontStyle?: 'italic' | 'normal';
4278
- textDecorationLine?: 'line-through' | 'none' | 'underline';
4279
- lineHeight?: keyof Theme$1['typography']['lineHeights'];
4280
- /**
4281
- * Web only
4282
- */
4283
- as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
4284
- textAlign?: 'center' | 'justify' | 'left' | 'right';
4285
- truncateAfterLines?: number;
4286
- className?: string;
4287
- style?: React.CSSProperties;
4288
- children: React.ReactNode;
4289
- accessibilityProps?: Partial<AccessibilityProps>;
4290
- /**
4291
- * React Native only
4292
- */
4293
- numberOfLines?: number;
4294
- componentName?: 'text' | 'title' | 'heading' | 'code';
4295
- } & TestID & StyledPropsBlade;
4296
-
4297
- declare type TextCommonProps = {
4298
- type?: TextTypes;
4299
- contrast?: ColorContrastTypes;
4300
- truncateAfterLines?: number;
4301
- children: React.ReactNode;
4302
- weight?: keyof Theme$1['typography']['fonts']['weight'];
4303
- /**
4304
- * **For Internal use only**: Sets the color of the Text component
4305
- */
4306
- color?: BaseTextProps['color'];
4307
- textAlign?: BaseTextProps['textAlign'];
4308
- } & TestID & StyledPropsBlade;
4309
- declare type TextVariant = 'body' | 'caption';
4310
- declare type TextBodyVariant = TextCommonProps & {
4311
- variant?: Extract<TextVariant, 'body'>;
4312
- size?: 'xsmall' | 'small' | 'medium' | 'large';
4313
- };
4314
- declare type TextCaptionVariant = TextCommonProps & {
4315
- variant?: Extract<TextVariant, 'caption'>;
4316
- size?: 'medium';
4317
- };
4318
- /**
4319
- * Conditionally changing props based on variant.
4320
- * Overloads or union gives wrong intellisense.
4321
- */
4322
- declare type TextProps<T> = T extends {
4323
- variant: infer Variant;
4324
- } ? Variant extends 'caption' ? TextCaptionVariant : Variant extends 'body' ? TextBodyVariant : T : T;
4325
- declare type TextForwardedAs = {
4326
- forwardedAs?: BaseTextProps['as'];
4327
- };
4328
- declare type GetTextPropsReturn = Omit<BaseTextProps, 'children'> & TextForwardedAs;
4329
- declare type GetTextProps<T extends {
4330
- variant: TextVariant;
4331
- }> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'testID' | 'textAlign'>;
4332
- declare const getTextProps: <T extends {
4333
- variant: TextVariant;
4334
- }>({ variant, type, weight, size, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
4335
- declare const Text: <T extends {
4336
- variant: TextVariant;
4337
- }>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, ...styledProps }: TextProps<T>) => ReactElement;
4338
-
4339
- declare type CodeProps = {
4340
- children: StringChildrenType;
4341
- /**
4342
- * Decides the fontSize and padding of Code
4343
- *
4344
- * @default small
4345
- */
4346
- size?: 'small' | 'medium';
4347
- weight?: 'regular' | 'bold';
4348
- } & TestID & StyledPropsBlade;
4349
- /**
4350
- * Code component can be used for displaying token, variable names, or inlined code snippets.
4351
- *
4352
- * ## Usage
4353
- *
4354
- * ### In Web
4355
- * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
4356
- *
4357
- * ```tsx
4358
- * <Text>
4359
- * Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
4360
- * </Text>
4361
- * ```
4362
- *
4363
- * ### In React Native
4364
- *
4365
- * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
4366
- *
4367
- * ```tsx
4368
- * <BaseBox flexWrap="wrap" flexDirection="row" alignItems="flex-start">
4369
- * <Text>Lorem ipsum </Text>
4370
- * <Code>SENTRY_TOKEN</Code>
4371
- * <Text> normal text</Text>
4372
- * </BaseBox>
4373
- * ```
4374
- */
4375
- declare const Code: ({ children, size, weight, testID, ...styledProps }: CodeProps) => JSX.Element;
4376
-
4377
- declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
4378
- declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;
4379
-
4380
- declare type Assertiveness = AriaAttributes['liveRegion'];
4381
-
4382
- declare function announce(message: string, _assertiveness?: Assertiveness): void;
4383
- declare function clearAnnouncer(_assertiveness: Assertiveness): void;
4384
- declare function destroyAnnouncer(): void;
4385
-
4386
- declare type ProgressBarCommonProps = {
4387
- /**
4388
- * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.
4389
- */
4390
- accessibilityLabel?: string;
4391
- /**
4392
- * Sets the contrast for the progress bar
4393
- * @default 'low'
4394
- */
4395
- contrast?: ColorContrastTypes;
4396
- /**
4397
- * Sets the intent of the progress bar which changes the feedback color.
4398
- */
4399
- intent?: Feedback;
4400
- /**
4401
- * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
4402
- */
4403
- label?: string;
4404
- /**
4405
- * Sets the size of the progress bar.
4406
- * @default 'small'
4407
- */
4408
- size?: 'small' | 'medium';
4409
- /**
4410
- * Sets the progress value of the progress bar.
4411
- * @default 'small'
4412
- */
4413
- value?: number;
4414
- /**
4415
- * Sets the minimum value for the progress bar.
4416
- * @default 0
4417
- */
4418
- min?: number;
4419
- /**
4420
- * Sets the maximum value for the progress bar.
4421
- * @default 100
4422
- */
4423
- max?: number;
4424
- } & TestID & StyledPropsBlade;
4425
- declare type ProgressBarVariant = 'progress' | 'meter';
4426
- declare type ProgressBarProgressProps = ProgressBarCommonProps & {
4427
- /**
4428
- * Sets the variant to be rendered for the progress bar.
4429
- * @default 'progress'
4430
- */
4431
- variant?: Extract<ProgressBarVariant, 'progress'>;
4432
- /**
4433
- * Sets whether the progress bar is in an indeterminate state.
4434
- * @default false
4435
- */
4436
- isIndeterminate?: boolean;
4437
- /**
4438
- * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
4439
- * @default true
4440
- */
4441
- showPercentage?: boolean;
4442
- };
4443
- declare type ProgressBarMeterProps = ProgressBarCommonProps & {
4444
- /**
4445
- * Sets the variant to be rendered for thr progress bar.
4446
- * @default 'progress'
4447
- */
4448
- variant?: Extract<ProgressBarVariant, 'meter'>;
4449
- /**
4450
- * Sets whether the progress bar is in an indeterminate state.
4451
- * @default false
4452
- */
4453
- isIndeterminate?: undefined;
4454
- /**
4455
- * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
4456
- * @default false
4457
- */
4458
- showPercentage?: undefined;
4459
- };
4460
- declare type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
4461
- declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
4462
-
4463
- declare type RadioProps = {
4464
- /**
4465
- * Sets the label text of the Radio
4466
- */
4467
- children: StringChildrenType;
4468
- /**
4469
- * Help text for the Radio
4470
- */
4471
- helpText?: string;
4472
- /**
4473
- * The value to be used in the Radio input.
4474
- * This is the value that will be returned on form submission.
4475
- */
4476
- value: string;
4477
- /**
4478
- * If `true`, the Radio will be disabled
4479
- *
4480
- * @default false
4481
- */
4482
- isDisabled?: boolean;
4483
- /**
4484
- * Size of the radios
4485
- *
4486
- * @default "medium"
4487
- */
4488
- size?: 'small' | 'medium';
4489
- } & TestID & StyledPropsBlade;
4490
- declare const Radio: React__default.ForwardRefExoticComponent<{
4491
- /**
4492
- * Sets the label text of the Radio
4493
- */
4494
- children: StringChildrenType;
4495
- /**
4496
- * Help text for the Radio
4497
- */
4498
- helpText?: string | undefined;
4499
- /**
4500
- * The value to be used in the Radio input.
4501
- * This is the value that will be returned on form submission.
4502
- */
4503
- value: string;
4504
- /**
4505
- * If `true`, the Radio will be disabled
4506
- *
4507
- * @default false
4508
- */
4509
- isDisabled?: boolean | undefined;
4510
- /**
4511
- * Size of the radios
4512
- *
4513
- * @default "medium"
4514
- */
4515
- size?: "small" | "medium" | undefined;
4516
- } & TestID & Partial<Omit<MakeObjectResponsive<{
4517
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
4518
- marginX: SpacingValueType;
4519
- marginY: SpacingValueType;
4520
- marginTop: SpacingValueType;
4521
- marginRight: SpacingValueType;
4522
- marginBottom: SpacingValueType;
4523
- marginLeft: SpacingValueType;
4524
- }> & Pick<MakeObjectResponsive<{
4525
- gap: SpacingValueType;
4526
- rowGap: SpacingValueType;
4527
- columnGap: SpacingValueType;
4528
- flex: string | number;
4529
- } & PickIfExist$1<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
4530
- __brand__?: "platform-native" | undefined;
4531
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
4532
- top: SpacingValueType;
4533
- right: SpacingValueType;
4534
- bottom: SpacingValueType;
4535
- left: SpacingValueType;
4536
- } & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
4537
- __brand__?: "platform-native" | undefined;
4538
- }> & Pick<MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
4539
-
4540
- declare type RadioGroupProps = {
4541
- /**
4542
- * Accepts multiple radios as children
4543
- */
4544
- children: React__default.ReactNode;
4545
- /**
4546
- * Help text of the radio group
4547
- */
4548
- helpText?: string;
4549
- /**
4550
- * Error text of the radio group
4551
- * Renders when `validationState` is set to 'error'
4552
- *
4553
- * Overrides helpText
4554
- */
4555
- errorText?: string;
4556
- /**
4557
- * Sets the error state of the radioGroup
4558
- * If set to `error` it will render the `errorText` of the group,
4559
- * and propagate `invalid` prop to every radio
4560
- */
4561
- validationState?: 'error' | 'none';
4562
- /**
4563
- * Renders a necessity indicator after radioGroup label
4564
- *
4565
- * If set to `undefined` it renders nothing.
4566
- */
4567
- necessityIndicator?: 'required' | 'optional' | 'none';
4568
- /**
4569
- * Sets the disabled state of the radioGroup
4570
- * If set to `true` it propagate down to all the radios
4571
- *
4572
- * @default false
4573
- */
4574
- isDisabled?: boolean;
4575
- /**
4576
- * Renders the label of the radio group
4577
- */
4578
- label: string;
4579
- /**
4580
- * Sets the position of the label
4581
- *
4582
- * @default 'top'
4583
- */
4584
- labelPosition?: 'top' | 'left';
4585
- /**
4586
- * Initial value of the radio group
4587
- */
4588
- defaultValue?: string;
4589
- /**
4590
- * value of the radio group
4591
- *
4592
- * Use `onChange` to update its value
4593
- */
4594
- value?: string;
4595
- /**
4596
- * The callback invoked when any of the radio's state changes
4597
- */
4598
- onChange?: ({ name, value }: {
4599
- name: string | undefined;
4600
- value: string;
4601
- }) => void;
4602
- /**
4603
- * The name of the input field in a radio
4604
- * (Useful for form submission).
4605
- */
4606
- name?: string;
4607
- /**
4608
- * Size of the radios
4609
- *
4610
- * @default "medium"
4611
- */
4612
- size?: 'small' | 'medium';
4613
- } & TestID & StyledPropsBlade;
4614
- declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
4615
-
4616
- declare type BaseSpinnerProps = {
4617
- intent?: Feedback;
4618
- /**
4619
- * Sets the label of the spinner.
4620
- *
4621
- * @default 'right'
4622
- */
4623
- label?: string;
4624
- /**
4625
- * Sets the label of the spinner.
4626
- *
4627
- */
4628
- labelPosition?: 'right' | 'bottom';
4629
- /**
4630
- * Sets the contrast of the spinner.
4631
- *
4632
- * @default 'low'
4633
- */
4634
- contrast?: ColorContrastTypes;
4635
- /**
4636
- * Sets the size of the spinner.
4637
- *
4638
- * @default 'medium'
4639
- */
4640
- size?: 'medium' | 'large' | 'xlarge';
4641
- /**
4642
- * Sets the aria-label for web & accessibilityLabel react-native.
4643
- *
4644
- */
4645
- accessibilityLabel: string;
4646
- } & TestID & StyledPropsBlade;
4647
-
4648
- declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'>;
4649
- declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
4650
-
4651
- declare type SkipNavLinkProps = {
4652
- id?: string;
4653
- children?: StringChildrenType;
4654
- };
4655
- declare const SkipNavLink: (_props: SkipNavLinkProps) => never;
4656
- declare const SkipNavContent: (_props: SkipNavLinkProps) => never;
4657
-
4658
- declare type VisuallyHiddenProps = {
4659
- children: React.ReactNode;
4660
- } & TestID;
4661
-
4662
- declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => JSX.Element;
4663
-
4664
- /**
4665
- * Screen reader class adapted from webaim
4666
- * https://webaim.org/techniques/css/invisiblecontent/#techniques
4667
- */
4668
- declare const screenReaderStyles: CSSObject;
4669
-
4670
- declare type Currency = 'INR' | 'MYR';
4671
- declare type AmountProps = {
4672
- /**
4673
- * The value to be rendered within the component.
4674
- *
4675
- */
4676
- value: number;
4677
- /**
4678
- * Sets the intent of the amount.
4679
- *
4680
- * @default undefined
4681
- */
4682
- intent?: Exclude<Feedback, 'neutral'>;
4683
- /**
4684
- * Sets the size of the amount.
4685
- *
4686
- * @default 'body-medium'
4687
- */
4688
- size?: 'body-medium-bold' | 'body-small' | 'body-small-bold' | 'body-medium' | 'body-medium-bold' | 'heading-small' | 'heading-small-bold' | 'heading-large' | 'heading-large-bold' | 'title-small' | 'title-medium';
4689
- /**
4690
- * Indicates what the suffix of amount should be
4691
- *
4692
- * @default 'decimals'
4693
- */
4694
- suffix?: 'decimals' | 'none' | 'humanize';
4695
- /**
4696
- * Makes the prefix symbol and decimal digits small and faded
4697
- *
4698
- * @default true
4699
- */
4700
- isAffixSubtle?: true | false;
4701
- /**
4702
- * Prefix to be shown before the amount value. The prefix can be either a currency symbol or a currency code.
4703
- *
4704
- * @default 'currency-symbol'
4705
- */
4706
- prefix?: 'currency-symbol' | 'currency-code';
4707
- /**
4708
- * The currency of the amount.
4709
- *
4710
- * @default 'INR'
4711
- * */
4712
- currency?: Currency;
4713
- } & TestID & StyledPropsBlade;
4714
- declare const Amount: ({ value, suffix, size, isAffixSubtle, intent, prefix, testID, currency, ...styledProps }: AmountProps) => ReactElement;
4715
-
4716
- declare type BaseHeaderProps = {
4717
- title?: string;
4718
- subtitle?: string;
4719
- /**
4720
- * Leading part of the header placed at the left most side of the header
4721
- */
4722
- leading?: React__default.ReactNode;
4723
- /**
4724
- * Trailing part of the header placed at the right most side of the header
4725
- */
4726
- trailing?: React__default.ReactNode;
4727
- /**
4728
- * Placed adjacent to the title text
4729
- */
4730
- titleSuffix?: React__default.ReactNode;
4731
- /**
4732
- * @default true
4733
- */
4734
- showDivider?: boolean;
4735
- /**
4736
- * @default false
4737
- */
4738
- showBackButton?: boolean;
4739
- /**
4740
- * @default true
4741
- */
4742
- showCloseButton?: boolean;
4743
- onCloseButtonClick?: () => void;
4744
- onBackButtonClick?: () => void;
4745
- closeButtonRef: React__default.MutableRefObject<any>;
4746
- } & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'>;
4747
-
4748
- declare type BaseFooterProps = {
4749
- children: React__default.ReactNode;
4750
- showDivider?: boolean;
4751
- };
4752
-
4753
- declare type SnapPoints = [number, number, number];
4754
-
4755
- declare type BottomSheetProps = {
4756
- children: React.ReactNode;
4757
- snapPoints?: SnapPoints;
4758
- onDismiss?: () => void;
4759
- isOpen?: boolean;
4760
- initialFocusRef?: React.MutableRefObject<any>;
4761
- };
4762
- declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'showBackButton' | 'onBackButtonClick'>;
4763
- declare type BottomSheetFooterProps = Pick<BaseFooterProps, 'children'>;
4764
-
4765
- declare const BottomSheetHeader: ({ title, subtitle, leading, trailing, titleSuffix, showBackButton, onBackButtonClick, }: BottomSheetHeaderProps) => React__default.ReactElement;
4766
-
4767
- declare const BottomSheetBody: ({ children }: {
4768
- children: React__default.ReactNode;
4769
- }) => React__default.ReactElement;
4770
-
4771
- declare const BottomSheetFooter: ({ children }: BottomSheetFooterProps) => React__default.ReactElement;
4772
-
4773
- declare const BottomSheet: ({ children, snapPoints, isOpen, onDismiss, initialFocusRef, }: BottomSheetProps) => React__default.ReactElement;
4774
-
4775
- export { 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, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, 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, 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, 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, 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, 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, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, 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 };