@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,4789 +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 { AccessibilityRole, ViewStyle, View, GestureResponderEvent } from 'react-native';
5
- import * as styled_components from 'styled-components';
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 = 'web';
790
- /**
791
- * Right now, the module resolution is set to resolve `.web` files,
792
- *
793
- * Thus Platform.Select<> type will return the `web` type
794
- */
795
- export type Select<Options extends { web: unknown; native: unknown }> = Brand<
796
- Options[Name],
797
- 'platform-web'
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
- src: string;
1534
- /**
1535
- * Alt tag for the image
1536
- */
1537
- alt: string;
1538
- };
1539
- declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
1540
-
1541
- declare type PrimaryAction = {
1542
- text: string;
1543
- onClick: () => void;
1544
- };
1545
- declare type SecondaryActionButton = {
1546
- text: string;
1547
- onClick: () => void;
1548
- };
1549
- declare type SecondaryActionLinkButton = {
1550
- text: string;
1551
- href: string;
1552
- onClick?: () => void;
1553
- target?: string;
1554
- /**
1555
- * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`
1556
- */
1557
- rel?: string;
1558
- };
1559
- declare type SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;
1560
- declare type AlertProps = {
1561
- /**
1562
- * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.
1563
- */
1564
- description: ReactChild;
1565
- /**
1566
- * A brief heading
1567
- */
1568
- title?: string;
1569
- /**
1570
- * Shows a dismiss button
1571
- *
1572
- * @default true
1573
- */
1574
- isDismissible?: boolean;
1575
- /**
1576
- * A callback when the dismiss button is clicked
1577
- */
1578
- onDismiss?: () => void;
1579
- /**
1580
- * Can be set to `high` for a more prominent look. Not to be confused with a11y contrast.
1581
- *
1582
- * @default low
1583
- */
1584
- contrast?: ColorContrastTypes;
1585
- /**
1586
- * Makes the Alert span the entire container width, instead of the default max width of `584px`.
1587
- * This also makes the alert borderless, useful for creating full bleed layouts.
1588
- *
1589
- * @default false
1590
- */
1591
- isFullWidth?: boolean;
1592
- /**
1593
- * Sets the color tone
1594
- *
1595
- * @default neutral
1596
- */
1597
- intent?: Feedback;
1598
- /**
1599
- * Renders a primary action button and a secondary action link button
1600
- */
1601
- actions?: {
1602
- /**
1603
- * Renders a button (should **always** be present if `secondary` action is being used)
1604
- */
1605
- primary: PrimaryAction;
1606
- /**
1607
- * Renders a Link button
1608
- */
1609
- secondary?: SecondaryAction;
1610
- };
1611
- } & TestID & StyledPropsBlade;
1612
- declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
1613
-
1614
- declare type BadgeProps = {
1615
- /**
1616
- * Sets the label for the badge.
1617
- *
1618
- */
1619
- children: StringChildrenType;
1620
- /**
1621
- * Sets the variant of the badge.
1622
- *
1623
- * @default 'neutral'
1624
- */
1625
- variant?: Feedback | 'blue';
1626
- /**
1627
- * Sets the contrast of the badge.
1628
- *
1629
- * @default 'low'
1630
- */
1631
- contrast?: 'low' | 'high';
1632
- /**
1633
- * Sets the size of the badge.
1634
- *
1635
- * @default 'medium'
1636
- */
1637
- size?: 'small' | 'medium' | 'large';
1638
- /**
1639
- * Icon to be displayed in the badge.
1640
- * Accepts a component of type `IconComponent` from Blade.
1641
- *
1642
- */
1643
- icon?: IconComponent$1;
1644
- /**
1645
- * Sets the fontWeight of the label.
1646
- *
1647
- * @default 'regular'
1648
- */
1649
- fontWeight?: 'regular' | 'bold';
1650
- } & TestID & StyledPropsBlade;
1651
- declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, ...styledProps }: BadgeProps) => ReactElement;
1652
-
1653
- declare type BladeProviderProps = {
1654
- themeTokens: ThemeTokens;
1655
- colorScheme?: ColorSchemeNamesInput;
1656
- children: ReactNode;
1657
- };
1658
-
1659
- declare const BladeProvider: ({ themeTokens, colorScheme, children, }: BladeProviderProps) => ReactElement;
1660
-
1661
- declare type UseColorScheme = {
1662
- colorScheme: ColorSchemeNames;
1663
- setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;
1664
- };
1665
-
1666
- declare type TypographyPlatforms = 'onDesktop' | 'onMobile';
1667
-
1668
- declare type ThemeContext = UseColorScheme & {
1669
- theme: Theme;
1670
- platform: TypographyPlatforms;
1671
- };
1672
- declare const ThemeContext: React$1.Context<ThemeContext>;
1673
- declare const useTheme: () => ThemeContext;
1674
-
1675
- declare type Theme = {
1676
- name: ThemeTokens['name'];
1677
- border: Border;
1678
- breakpoints: Breakpoints;
1679
- colors: Colors;
1680
- spacing: Spacing;
1681
- motion: Motion;
1682
- shadows: Omit<Shadows, 'color'> & {
1683
- color: {
1684
- level: Record<ShadowLevels, string>;
1685
- };
1686
- };
1687
- typography: Typography;
1688
- };
1689
-
1690
- /**
1691
- * Returns the value or the responsive object with that value
1692
- *
1693
- * ## Usage
1694
- *
1695
- * Example if you pass string argument, return type will be string or responsive object with string value
1696
- *
1697
- * `MakeValueResponsive<string>`
1698
- * ```ts
1699
- * string |
1700
- * {
1701
- * base?: string;
1702
- * xs?: string;
1703
- * s?: string;
1704
- * // ... other breakpoints
1705
- * }
1706
- * ```
1707
- *
1708
- */
1709
- declare type MakeValueResponsive<T> = [T] extends [never] ? never : T | {
1710
- [P in keyof Breakpoints]?: T;
1711
- };
1712
- /**
1713
- * Turns all the values in object into responsive object.
1714
- *
1715
- * ```ts
1716
- * MakeObjectResponsive<{ hello: string}>
1717
- *
1718
- * // Outputs:
1719
- * {
1720
- * hello: string | {
1721
- * base?: string;
1722
- * xs?: string;
1723
- * s?: string;
1724
- * // ... other breakpoints
1725
- * }
1726
- * }
1727
- * ```
1728
- */
1729
- declare type MakeObjectResponsive<T> = {
1730
- [P in keyof T]: MakeValueResponsive<T[P]>;
1731
- };
1732
-
1733
- declare type ArrayOfMaxLength4<T> = readonly [T?, T?, T?, T?];
1734
- declare type SpaceUnits = Platform.Select<{
1735
- web: 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
1736
- native: 'px' | '%';
1737
- }>;
1738
- declare type SpacingValueType = DotNotationSpacingStringToken | `${string}${SpaceUnits}` | 'auto';
1739
- /**
1740
- * @IMPORTANT
1741
- *
1742
- * 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.
1743
- *
1744
- * 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
1745
- *
1746
- * Checkout example of find and replace query-
1747
- * {@link https://user-images.githubusercontent.com/30949385/221802507-40c7adbc-484a-47b3-9035-ae1e97080b51.png}
1748
- *
1749
- */
1750
- declare type PaddingProps = MakeObjectResponsive<{
1751
- /**
1752
- * ### Padding Shorthand
1753
- *
1754
- * #### Usage
1755
- *
1756
- * ```jsx
1757
- * padding="spacing.3"
1758
- * padding="20px"
1759
- * padding={["spacing.3", "spacing.1", "spacing.0", "10px"]}
1760
- * ```
1761
- *
1762
- * ---
1763
- * #### Spacing to Pixel values
1764
- *
1765
- * - `spacing.0` - 0px
1766
- * - `spacing.1` - 2px
1767
- * - `spacing.2` - 4px
1768
- * - `spacing.3` - 8px
1769
- * - `spacing.4` - 12px
1770
- * - `spacing.5` - 16px
1771
- * - `spacing.6` - 20px
1772
- * - `spacing.7` - 24px
1773
- * - `spacing.8` - 32px
1774
- * - `spacing.9` - 40px
1775
- * - `spacing.10` - 48px
1776
- * - `spacing.11` - 56px
1777
- *
1778
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1779
- *
1780
- */
1781
- padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
1782
- /**
1783
- * ### Padding Horizontal
1784
- *
1785
- * #### Usage
1786
- *
1787
- * ```jsx
1788
- * paddingX="spacing.3"
1789
- * paddingX="20px"
1790
- * ```
1791
- *
1792
- * ---
1793
- * #### Spacing to Pixel values
1794
- *
1795
- * - `spacing.0` - 0px
1796
- * - `spacing.1` - 2px
1797
- * - `spacing.2` - 4px
1798
- * - `spacing.3` - 8px
1799
- * - `spacing.4` - 12px
1800
- * - `spacing.5` - 16px
1801
- * - `spacing.6` - 20px
1802
- * - `spacing.7` - 24px
1803
- * - `spacing.8` - 32px
1804
- * - `spacing.9` - 40px
1805
- * - `spacing.10` - 48px
1806
- * - `spacing.11` - 56px
1807
- *
1808
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1809
- *
1810
- */
1811
- paddingX: SpacingValueType;
1812
- /**
1813
- * ### Padding Vertical
1814
- *
1815
- * #### Usage
1816
- *
1817
- * ```jsx
1818
- * paddingY="spacing.3"
1819
- * paddingY="20px"
1820
- * ```
1821
- *
1822
- * ---
1823
- * #### Spacing to Pixel values
1824
- *
1825
- * - `spacing.0` - 0px
1826
- * - `spacing.1` - 2px
1827
- * - `spacing.2` - 4px
1828
- * - `spacing.3` - 8px
1829
- * - `spacing.4` - 12px
1830
- * - `spacing.5` - 16px
1831
- * - `spacing.6` - 20px
1832
- * - `spacing.7` - 24px
1833
- * - `spacing.8` - 32px
1834
- * - `spacing.9` - 40px
1835
- * - `spacing.10` - 48px
1836
- * - `spacing.11` - 56px
1837
- *
1838
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1839
- *
1840
- */
1841
- paddingY: SpacingValueType;
1842
- /**
1843
- * ### Padding Top
1844
- *
1845
- * #### Usage
1846
- *
1847
- * ```jsx
1848
- * paddingTop="spacing.3"
1849
- * paddingTop="20px"
1850
- * ```
1851
- *
1852
- * ---
1853
- * #### Spacing to Pixel values
1854
- *
1855
- * - `spacing.0` - 0px
1856
- * - `spacing.1` - 2px
1857
- * - `spacing.2` - 4px
1858
- * - `spacing.3` - 8px
1859
- * - `spacing.4` - 12px
1860
- * - `spacing.5` - 16px
1861
- * - `spacing.6` - 20px
1862
- * - `spacing.7` - 24px
1863
- * - `spacing.8` - 32px
1864
- * - `spacing.9` - 40px
1865
- * - `spacing.10` - 48px
1866
- * - `spacing.11` - 56px
1867
- *
1868
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1869
- */
1870
- paddingTop: SpacingValueType;
1871
- /**
1872
- * ### Padding Right
1873
- *
1874
- * #### Usage
1875
- *
1876
- * ```jsx
1877
- * paddingRight="spacing.3"
1878
- * paddingRight="20px"
1879
- * ```
1880
- *
1881
- * ---
1882
- * #### Spacing to Pixel values
1883
- *
1884
- * - `spacing.0` - 0px
1885
- * - `spacing.1` - 2px
1886
- * - `spacing.2` - 4px
1887
- * - `spacing.3` - 8px
1888
- * - `spacing.4` - 12px
1889
- * - `spacing.5` - 16px
1890
- * - `spacing.6` - 20px
1891
- * - `spacing.7` - 24px
1892
- * - `spacing.8` - 32px
1893
- * - `spacing.9` - 40px
1894
- * - `spacing.10` - 48px
1895
- * - `spacing.11` - 56px
1896
- *
1897
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1898
- */
1899
- paddingRight: SpacingValueType;
1900
- /**
1901
- * ### Padding Bottom
1902
- *
1903
- * #### Usage
1904
- *
1905
- * ```jsx
1906
- * paddingBottom="spacing.3"
1907
- * paddingBottom="20px"
1908
- * ```
1909
- *
1910
- * ---
1911
- * #### Spacing to Pixel values
1912
- *
1913
- * - `spacing.0` - 0px
1914
- * - `spacing.1` - 2px
1915
- * - `spacing.2` - 4px
1916
- * - `spacing.3` - 8px
1917
- * - `spacing.4` - 12px
1918
- * - `spacing.5` - 16px
1919
- * - `spacing.6` - 20px
1920
- * - `spacing.7` - 24px
1921
- * - `spacing.8` - 32px
1922
- * - `spacing.9` - 40px
1923
- * - `spacing.10` - 48px
1924
- * - `spacing.11` - 56px
1925
- *
1926
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1927
- */
1928
- paddingBottom: SpacingValueType;
1929
- /**
1930
- * ### Padding Left
1931
- *
1932
- * #### Usage
1933
- *
1934
- * ```jsx
1935
- * paddingLeft="spacing.3"
1936
- * paddingLeft="20px"
1937
- * ```
1938
- *
1939
- * ---
1940
- * #### Spacing to Pixel values
1941
- *
1942
- * - `spacing.0` - 0px
1943
- * - `spacing.1` - 2px
1944
- * - `spacing.2` - 4px
1945
- * - `spacing.3` - 8px
1946
- * - `spacing.4` - 12px
1947
- * - `spacing.5` - 16px
1948
- * - `spacing.6` - 20px
1949
- * - `spacing.7` - 24px
1950
- * - `spacing.8` - 32px
1951
- * - `spacing.9` - 40px
1952
- * - `spacing.10` - 48px
1953
- * - `spacing.11` - 56px
1954
- *
1955
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1956
- */
1957
- paddingLeft: SpacingValueType;
1958
- }>;
1959
- declare type MarginProps = MakeObjectResponsive<{
1960
- /**
1961
- * ### Margin Shorthand
1962
- *
1963
- * #### Usage
1964
- *
1965
- * ```jsx
1966
- * margin="spacing.3"
1967
- * margin="20px"
1968
- * margin={["spacing.3", "spacing.1", "spacing.0", "10px"]}
1969
- * ```
1970
- *
1971
- * ---
1972
- * #### Spacing to Pixel values
1973
- *
1974
- * - `spacing.0` - 0px
1975
- * - `spacing.1` - 2px
1976
- * - `spacing.2` - 4px
1977
- * - `spacing.3` - 8px
1978
- * - `spacing.4` - 12px
1979
- * - `spacing.5` - 16px
1980
- * - `spacing.6` - 20px
1981
- * - `spacing.7` - 24px
1982
- * - `spacing.8` - 32px
1983
- * - `spacing.9` - 40px
1984
- * - `spacing.10` - 48px
1985
- * - `spacing.11` - 56px
1986
- *
1987
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
1988
- *
1989
- */
1990
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
1991
- /**
1992
- * ### Margin Horizontal
1993
- *
1994
- * #### Usage
1995
- *
1996
- * ```jsx
1997
- * marginX="spacing.3"
1998
- * marginX="20px"
1999
- * ```
2000
- *
2001
- * ---
2002
- * #### Spacing to Pixel values
2003
- *
2004
- * - `spacing.0` - 0px
2005
- * - `spacing.1` - 2px
2006
- * - `spacing.2` - 4px
2007
- * - `spacing.3` - 8px
2008
- * - `spacing.4` - 12px
2009
- * - `spacing.5` - 16px
2010
- * - `spacing.6` - 20px
2011
- * - `spacing.7` - 24px
2012
- * - `spacing.8` - 32px
2013
- * - `spacing.9` - 40px
2014
- * - `spacing.10` - 48px
2015
- * - `spacing.11` - 56px
2016
- *
2017
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2018
- *
2019
- */
2020
- marginX: SpacingValueType;
2021
- /**
2022
- * ### Margin Vertical
2023
- *
2024
- * #### Usage
2025
- *
2026
- * ```jsx
2027
- * marginY="spacing.3"
2028
- * marginY="20px"
2029
- * ```
2030
- *
2031
- * ---
2032
- * #### Spacing to Pixel values
2033
- *
2034
- * - `spacing.0` - 0px
2035
- * - `spacing.1` - 2px
2036
- * - `spacing.2` - 4px
2037
- * - `spacing.3` - 8px
2038
- * - `spacing.4` - 12px
2039
- * - `spacing.5` - 16px
2040
- * - `spacing.6` - 20px
2041
- * - `spacing.7` - 24px
2042
- * - `spacing.8` - 32px
2043
- * - `spacing.9` - 40px
2044
- * - `spacing.10` - 48px
2045
- * - `spacing.11` - 56px
2046
- *
2047
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2048
- *
2049
- */
2050
- marginY: SpacingValueType;
2051
- /**
2052
- * ### Margin Top
2053
- *
2054
- * #### Usage
2055
- *
2056
- * ```jsx
2057
- * marginTop="spacing.3"
2058
- * marginTop="20px"
2059
- * ```
2060
- *
2061
- * ---
2062
- * #### Spacing to Pixel values
2063
- *
2064
- * - `spacing.0` - 0px
2065
- * - `spacing.1` - 2px
2066
- * - `spacing.2` - 4px
2067
- * - `spacing.3` - 8px
2068
- * - `spacing.4` - 12px
2069
- * - `spacing.5` - 16px
2070
- * - `spacing.6` - 20px
2071
- * - `spacing.7` - 24px
2072
- * - `spacing.8` - 32px
2073
- * - `spacing.9` - 40px
2074
- * - `spacing.10` - 48px
2075
- * - `spacing.11` - 56px
2076
- *
2077
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2078
- */
2079
- marginTop: SpacingValueType;
2080
- /**
2081
- * ### Margin Right
2082
- *
2083
- * #### Usage
2084
- *
2085
- * ```jsx
2086
- * marginRight="spacing.3"
2087
- * marginRight="20px"
2088
- * ```
2089
- *
2090
- * ---
2091
- * #### Spacing to Pixel values
2092
- *
2093
- * - `spacing.0` - 0px
2094
- * - `spacing.1` - 2px
2095
- * - `spacing.2` - 4px
2096
- * - `spacing.3` - 8px
2097
- * - `spacing.4` - 12px
2098
- * - `spacing.5` - 16px
2099
- * - `spacing.6` - 20px
2100
- * - `spacing.7` - 24px
2101
- * - `spacing.8` - 32px
2102
- * - `spacing.9` - 40px
2103
- * - `spacing.10` - 48px
2104
- * - `spacing.11` - 56px
2105
- *
2106
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2107
- */
2108
- marginRight: SpacingValueType;
2109
- /**
2110
- * ### Margin Bottom
2111
- *
2112
- * #### Usage
2113
- *
2114
- * ```jsx
2115
- * marginBottom="spacing.3"
2116
- * marginBottom="20px"
2117
- * ```
2118
- *
2119
- * ---
2120
- * #### Spacing to Pixel values
2121
- *
2122
- * - `spacing.0` - 0px
2123
- * - `spacing.1` - 2px
2124
- * - `spacing.2` - 4px
2125
- * - `spacing.3` - 8px
2126
- * - `spacing.4` - 12px
2127
- * - `spacing.5` - 16px
2128
- * - `spacing.6` - 20px
2129
- * - `spacing.7` - 24px
2130
- * - `spacing.8` - 32px
2131
- * - `spacing.9` - 40px
2132
- * - `spacing.10` - 48px
2133
- * - `spacing.11` - 56px
2134
- *
2135
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2136
- */
2137
- marginBottom: SpacingValueType;
2138
- /**
2139
- * ### Margin Left
2140
- *
2141
- * #### Usage
2142
- *
2143
- * ```jsx
2144
- * marginLeft="spacing.3"
2145
- * marginLeft="20px"
2146
- * ```
2147
- *
2148
- * ---
2149
- * #### Spacing to Pixel values
2150
- *
2151
- * - `spacing.0` - 0px
2152
- * - `spacing.1` - 2px
2153
- * - `spacing.2` - 4px
2154
- * - `spacing.3` - 8px
2155
- * - `spacing.4` - 12px
2156
- * - `spacing.5` - 16px
2157
- * - `spacing.6` - 20px
2158
- * - `spacing.7` - 24px
2159
- * - `spacing.8` - 32px
2160
- * - `spacing.9` - 40px
2161
- * - `spacing.10` - 48px
2162
- * - `spacing.11` - 56px
2163
- *
2164
- * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
2165
- */
2166
- marginLeft: SpacingValueType;
2167
- }>;
2168
-
2169
- declare type LayoutProps = MakeObjectResponsive<{
2170
- height: SpacingValueType;
2171
- minHeight: SpacingValueType;
2172
- maxHeight: SpacingValueType;
2173
- width: SpacingValueType;
2174
- minWidth: SpacingValueType;
2175
- maxWidth: SpacingValueType;
2176
- } & PickCSSByPlatform$1<'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
2177
- declare type FlexboxProps = MakeObjectResponsive<{
2178
- /**
2179
- * This uses the native gap property which might not work on older browsers.
2180
- * If you want to support older browsers, you might want to use `margin` instead.
2181
- *
2182
- * @see https://caniuse.com/?search=gap
2183
- */
2184
- gap: SpacingValueType;
2185
- /**
2186
- * This uses the native row-gap property which might not work on older browsers.
2187
- * If you want to support older browsers, you might want to use `margin` instead.
2188
- *
2189
- * @see https://caniuse.com/?search=row-gap
2190
- */
2191
- rowGap: SpacingValueType;
2192
- /**
2193
- * This uses the native column-gap property which might not work on older browsers.
2194
- * If you want to support older browsers, you might want to use `margin` instead.
2195
- *
2196
- * @see https://caniuse.com/?search=column-gap
2197
- */
2198
- columnGap: SpacingValueType;
2199
- /**
2200
- * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
2201
- *
2202
- * @see https://developer.mozilla.org/docs/Web/CSS/flex
2203
- */
2204
- flex: string | number;
2205
- } & PickCSSByPlatform$1<'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'order'>>;
2206
- declare type PositionProps = MakeObjectResponsive<{
2207
- top: SpacingValueType;
2208
- right: SpacingValueType;
2209
- bottom: SpacingValueType;
2210
- left: SpacingValueType;
2211
- } & PickCSSByPlatform$1<'position' | 'zIndex'>>;
2212
- declare type GridProps = MakeObjectResponsive<PickCSSByPlatform$1<'grid' | 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows'>>;
2213
- declare type ColorObjects = 'feedback' | 'surface' | 'action';
2214
- declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
2215
- declare type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<Theme$1['colors'][T]['border']>}`;
2216
- declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span"];
2217
- declare type BoxAsType = typeof validBoxAsValues[number];
2218
- declare type BoxVisualProps = MakeObjectResponsive<{
2219
- backgroundColor: BackgroundColorString<'surface'>;
2220
- borderWidth: keyof Border['width'];
2221
- borderColor: BorderColorString<'surface'>;
2222
- borderTopWidth: keyof Border['width'];
2223
- borderTopColor: BorderColorString<'surface'>;
2224
- borderRightWidth: keyof Border['width'];
2225
- borderRightColor: BorderColorString<'surface'>;
2226
- borderBottomWidth: keyof Border['width'];
2227
- borderBottomColor: BorderColorString<'surface'>;
2228
- borderLeftWidth: keyof Border['width'];
2229
- borderLeftColor: BorderColorString<'surface'>;
2230
- borderRadius: keyof Border['radius'];
2231
- borderTopLeftRadius: keyof Border['radius'];
2232
- borderTopRightRadius: keyof Border['radius'];
2233
- borderBottomRightRadius: keyof Border['radius'];
2234
- borderBottomLeftRadius: keyof Border['radius'];
2235
- }> & {
2236
- as: BoxAsType;
2237
- };
2238
- declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
2239
- children?: React.ReactNode | React.ReactNode[];
2240
- } & TestID>;
2241
-
2242
- /**
2243
- * ## Box
2244
- *
2245
- * Box is the basic Layout component.
2246
- *
2247
- *
2248
- * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
2249
- *
2250
- * 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.
2251
- *
2252
- * ----
2253
- *
2254
- * ### Usage
2255
- *
2256
- * ```jsx
2257
- * <Box display="flex">
2258
- * ```
2259
-
2260
- * #### Responsive Props
2261
- *
2262
- * ```jsx
2263
- * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
2264
- * ```
2265
- *
2266
- * #### Margin and Padding Shorthands
2267
- *
2268
- * ```jsx
2269
- * <Box padding={["spacing.3", "spacing.10"]} />
2270
- * ```
2271
- *
2272
- * ---
2273
- *
2274
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
2275
- *
2276
- */
2277
- declare const Box: (props: BoxProps) => JSX.Element;
2278
-
2279
- declare const ComponentIds: {
2280
- CardHeader: string;
2281
- CardHeaderTrailing: string;
2282
- CardHeaderLeading: string;
2283
- CardFooter: string;
2284
- CardFooterTrailing: string;
2285
- CardFooterLeading: string;
2286
- CardBody: string;
2287
- CardHeaderIcon: string;
2288
- CardHeaderCounter: string;
2289
- CardHeaderBadge: string;
2290
- CardHeaderText: string;
2291
- CardHeaderLink: string;
2292
- CardHeaderIconButton: string;
2293
- };
2294
- declare type CardProps = {
2295
- /**
2296
- * Card contents
2297
- */
2298
- children: React__default.ReactNode;
2299
- /**
2300
- * Sets the background color of the Card according to the surface level tokens
2301
- *
2302
- * eg: `theme.colors.surface.background.level1`
2303
- *
2304
- * **Description:**
2305
- *
2306
- * - 2: Used in layouts which are on top of the main background
2307
- * - 3: Used over the cards template or as a text input backgrounds.
2308
- *
2309
- * **Links:**
2310
- * - Docs: https://blade.razorpay.com/?path=/docs/tokens-colors--page#-theme-tokens
2311
- * - Figma: https://shorturl.at/fsvwK
2312
- */
2313
- surfaceLevel?: 2 | 3;
2314
- } & TestID & StyledPropsBlade;
2315
- declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardProps) => React__default.ReactElement;
2316
- declare type CardBodyProps = {
2317
- children: React__default.ReactNode;
2318
- } & TestID;
2319
- declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
2320
-
2321
- declare type LinkCommonProps = {
2322
- variant?: 'anchor' | 'button';
2323
- icon?: IconComponent$1;
2324
- iconPosition?: 'left' | 'right';
2325
- isDisabled?: boolean;
2326
- onClick?: (event: SyntheticEvent) => void;
2327
- href?: string;
2328
- target?: string;
2329
- accessibilityLabel?: string;
2330
- /**
2331
- * Sets the size of the link
2332
- *
2333
- * @default medium
2334
- */
2335
- size?: 'small' | 'medium' | 'large';
2336
- } & TestID & StyledPropsBlade & Platform.Select<{
2337
- native: {
2338
- /**
2339
- * Defines how far your touch can start away from the link
2340
- */
2341
- hitSlop?: {
2342
- top?: number;
2343
- right?: number;
2344
- bottom?: number;
2345
- left?: number;
2346
- } | number;
2347
- /**
2348
- * This is a web only prop and has no effect on react-native.
2349
- */
2350
- htmlTitle?: undefined;
2351
- };
2352
- web: {
2353
- /**
2354
- * This is a react-native only prop and has no effect on web.
2355
- */
2356
- hitSlop?: undefined;
2357
- /**
2358
- * The title of the link which is displayed as a tooltip.
2359
- */
2360
- htmlTitle?: string;
2361
- };
2362
- }>;
2363
- declare type LinkWithoutIconProps = LinkCommonProps & {
2364
- icon?: undefined;
2365
- children: StringChildrenType;
2366
- };
2367
- declare type LinkWithIconProps = LinkCommonProps & {
2368
- icon: IconComponent$1;
2369
- children?: StringChildrenType;
2370
- };
2371
- declare type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
2372
- declare type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
2373
- variant?: 'anchor';
2374
- href?: string;
2375
- target?: string;
2376
- rel?: string;
2377
- isDisabled?: undefined;
2378
- };
2379
- declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
2380
- variant?: 'button';
2381
- isDisabled?: boolean;
2382
- href?: undefined;
2383
- target?: undefined;
2384
- rel?: undefined;
2385
- };
2386
- declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
2387
- declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, htmlTitle, ...styledProps }: LinkProps) => ReactElement;
2388
-
2389
- /* eslint-disable @typescript-eslint/no-explicit-any */
2390
-
2391
-
2392
- type BladeElementRef = Platform.Select<{
2393
- web: Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
2394
- native: React.MutableRefObject<any>;
2395
- }>;
2396
-
2397
- declare type ButtonCommonProps = {
2398
- variant?: 'primary' | 'secondary' | 'tertiary';
2399
- size?: 'xsmall' | 'small' | 'medium' | 'large';
2400
- iconPosition?: 'left' | 'right';
2401
- isDisabled?: boolean;
2402
- isFullWidth?: boolean;
2403
- isLoading?: boolean;
2404
- accessibilityLabel?: string;
2405
- type?: 'button' | 'reset' | 'submit';
2406
- onClick?: Platform.Select<{
2407
- native: (event: GestureResponderEvent) => void;
2408
- web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
2409
- }>;
2410
- } & TestID & StyledPropsBlade;
2411
- declare type ButtonWithoutIconProps = ButtonCommonProps & {
2412
- icon?: undefined;
2413
- children: StringChildrenType;
2414
- };
2415
- declare type ButtonWithIconProps = ButtonCommonProps & {
2416
- icon: IconComponent$1;
2417
- children?: StringChildrenType;
2418
- };
2419
- declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
2420
- declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<BladeElementRef>>;
2421
-
2422
- type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
2423
- Theme$1['colors']['feedback']['text']
2424
- >}`;
2425
- type FeedbackActionColors$1 = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<
2426
- Theme$1['colors']['feedback'][Feedback]['action']['text']
2427
- >}`;
2428
- type SurfaceColors$1 = `surface.text.${DotNotationColorStringToken<
2429
- Theme$1['colors']['surface']['text']
2430
- >}`;
2431
- type ActionColors$1 = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
2432
- type BadgeTextColors$1 = `badge.text.${DotNotationColorStringToken<
2433
- Theme$1['colors']['badge']['text']
2434
- >}`;
2435
-
2436
- type BaseTextProps$1 = {
2437
- id?: string;
2438
- color?: ActionColors$1 | FeedbackColors$1 | SurfaceColors$1 | FeedbackActionColors$1 | BadgeTextColors$1;
2439
- fontFamily?: keyof Theme$1['typography']['fonts']['family'];
2440
- fontSize?: keyof Theme$1['typography']['fonts']['size'];
2441
- fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
2442
- fontStyle?: 'italic' | 'normal';
2443
- textDecorationLine?: 'line-through' | 'none' | 'underline';
2444
- lineHeight?: keyof Theme$1['typography']['lineHeights'];
2445
- /**
2446
- * Web only
2447
- */
2448
- as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
2449
- textAlign?: 'center' | 'justify' | 'left' | 'right';
2450
- truncateAfterLines?: number;
2451
- className?: string;
2452
- style?: React.CSSProperties;
2453
- children: React.ReactNode;
2454
- accessibilityProps?: Partial<AccessibilityProps>;
2455
- /**
2456
- * React Native only
2457
- */
2458
- numberOfLines?: number;
2459
- componentName?: 'text' | 'title' | 'heading' | 'code';
2460
- } & TestID &
2461
- StyledPropsBlade;
2462
-
2463
- /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
2464
-
2465
-
2466
- type TextCommonProps$1 = {
2467
- type?: TextTypes;
2468
- contrast?: ColorContrastTypes;
2469
- truncateAfterLines?: number;
2470
- children: React.ReactNode;
2471
- weight?: keyof Theme$1['typography']['fonts']['weight'];
2472
- /**
2473
- * **For Internal use only**: Sets the color of the Text component
2474
- */
2475
- color?: BaseTextProps$1['color'];
2476
- textAlign?: BaseTextProps$1['textAlign'];
2477
- } & TestID &
2478
- StyledPropsBlade;
2479
-
2480
- type TextVariant$1 = 'body' | 'caption';
2481
-
2482
- type TextBodyVariant$1 = TextCommonProps$1 & {
2483
- variant?: Extract<TextVariant$1, 'body'>;
2484
- size?: 'xsmall' | 'small' | 'medium' | 'large';
2485
- };
2486
-
2487
- type TextCaptionVariant$1 = TextCommonProps$1 & {
2488
- variant?: Extract<TextVariant$1, 'caption'>;
2489
- size?: 'medium';
2490
- };
2491
-
2492
- /**
2493
- * Conditionally changing props based on variant.
2494
- * Overloads or union gives wrong intellisense.
2495
- */
2496
- type TextProps$1<T> = T extends {
2497
- variant: infer Variant;
2498
- }
2499
- ? Variant extends 'caption'
2500
- ? TextCaptionVariant$1
2501
- : Variant extends 'body'
2502
- ? TextBodyVariant$1
2503
- : T
2504
- : T;
2505
-
2506
- type CounterProps$1 = {
2507
- /**
2508
- * Sets the value for the counter.
2509
- */
2510
- value: number;
2511
- /**
2512
- * Sets the max value for the counter.
2513
- * If value exceedes `max` it will render `value+`
2514
- */
2515
- max?: number;
2516
- /**
2517
- * Sets the intent of the counter.
2518
- *
2519
- * @default 'neutral'
2520
- */
2521
- intent?: Feedback;
2522
- /**
2523
- * Sets the contrast of the counter.
2524
- *
2525
- * @default 'low'
2526
- */
2527
- contrast?: 'high' | 'low';
2528
- /**
2529
- * Sets the size of the counter.
2530
- *
2531
- * @default 'medium'
2532
- */
2533
- size?: 'small' | 'medium' | 'large';
2534
- } & TestID &
2535
- StyledPropsBlade;
2536
-
2537
- declare const CardHeaderIcon: ({ icon }: {
2538
- icon: IconComponent$1;
2539
- }) => React__default.ReactElement;
2540
- declare const CardHeaderCounter: (props: CounterProps$1) => React__default.ReactElement;
2541
- declare const CardHeaderBadge: (props: BadgeProps) => React__default.ReactElement;
2542
- declare const CardHeaderText: (props: TextProps$1<{
2543
- variant: TextVariant$1;
2544
- }>) => React__default.ReactElement;
2545
- declare const CardHeaderLink: (props: LinkProps) => React__default.ReactElement;
2546
- declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'> & {
2547
- icon: IconComponent$1;
2548
- };
2549
- declare const CardHeaderIconButton: (props: CardHeaderIconButtonProps) => React__default.ReactElement;
2550
- declare type CardHeaderProps = {
2551
- children?: React__default.ReactNode;
2552
- } & TestID;
2553
- declare const CardHeader: ({ children, testID }: CardHeaderProps) => React__default.ReactElement;
2554
- declare type CardHeaderLeadingProps = {
2555
- title: string;
2556
- subtitle?: string;
2557
- /**
2558
- * prefix element of Card
2559
- *
2560
- * Accepts: `CardHeaderIcon` component
2561
- */
2562
- prefix?: React__default.ReactNode;
2563
- /**
2564
- * suffix element of Card
2565
- *
2566
- * Accepts: `CardHeaderCounter` component
2567
- */
2568
- suffix?: React__default.ReactNode;
2569
- };
2570
- declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
2571
- declare type CardHeaderTrailingProps = {
2572
- /**
2573
- * Renders a visual ornament in card header trailing section
2574
- *
2575
- * Accepts: `CardHeaderLink`, `CardHeaderText`, `CardHeaderIconButton`, `CardHeaderBadge`
2576
- */
2577
- visual?: React__default.ReactNode;
2578
- };
2579
- declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
2580
-
2581
- declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
2582
- text: ButtonProps['children'];
2583
- };
2584
- declare type CardFooterProps = {
2585
- children?: React__default.ReactNode;
2586
- } & TestID;
2587
- declare const CardFooter: ({ children, testID }: CardFooterProps) => React__default.ReactElement;
2588
- declare type CardFooterLeadingProps = {
2589
- title?: string;
2590
- subtitle?: string;
2591
- };
2592
- declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React__default.ReactElement;
2593
- declare type CardFooterTrailingProps = {
2594
- actions?: {
2595
- primary?: CardFooterAction;
2596
- secondary?: CardFooterAction;
2597
- };
2598
- };
2599
- declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React__default.ReactElement;
2600
-
2601
- declare type IconButtonProps = {
2602
- /**
2603
- * Icon component to be rendered, eg. `CloseIcon`
2604
- */
2605
- icon: IconComponent$1;
2606
- onClick: () => void;
2607
- /**
2608
- * Icon size
2609
- *
2610
- * @default 'medium'
2611
- */
2612
- size?: 'medium' | 'large';
2613
- /**
2614
- * Icon contrast
2615
- *
2616
- * @default 'low'
2617
- */
2618
- contrast?: 'low' | 'high';
2619
- /**
2620
- * Sets aria-label to help users know what the action does, eg 'Dismiss alert'
2621
- */
2622
- accessibilityLabel: string;
2623
- };
2624
- declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<BladeElementRef>>;
2625
-
2626
- declare type CounterProps = {
2627
- /**
2628
- * Sets the value for the counter.
2629
- */
2630
- value: number;
2631
- /**
2632
- * Sets the max value for the counter.
2633
- * If value exceedes `max` it will render `value+`
2634
- */
2635
- max?: number;
2636
- /**
2637
- * Sets the intent of the counter.
2638
- *
2639
- * @default 'neutral'
2640
- */
2641
- intent?: Feedback;
2642
- /**
2643
- * Sets the contrast of the counter.
2644
- *
2645
- * @default 'low'
2646
- */
2647
- contrast?: 'high' | 'low';
2648
- /**
2649
- * Sets the size of the counter.
2650
- *
2651
- * @default 'medium'
2652
- */
2653
- size?: 'small' | 'medium' | 'large';
2654
- } & TestID & StyledPropsBlade;
2655
- declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
2656
-
2657
- declare type OnChange = ({ isChecked, event, value, }: {
2658
- isChecked: boolean;
2659
- event?: React__default.ChangeEvent;
2660
- value?: string;
2661
- }) => void;
2662
- declare type CheckboxProps = {
2663
- /**
2664
- * If `true`, The checkbox will be checked. This also makes the checkbox controlled
2665
- * Use `onChange` to update its value
2666
- *
2667
- * @default false
2668
- */
2669
- isChecked?: boolean;
2670
- /**
2671
- * If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled
2672
- *
2673
- * @default false
2674
- */
2675
- defaultChecked?: boolean;
2676
- /**
2677
- * The callback invoked when the checked state of the `Checkbox` changes.
2678
- */
2679
- onChange?: OnChange;
2680
- /**
2681
- * Sets the label of the checkbox
2682
- */
2683
- children: React__default.ReactNode;
2684
- /**
2685
- * Help text for the checkbox
2686
- */
2687
- helpText?: string;
2688
- /**
2689
- * Error text for the checkbox
2690
- *
2691
- * Renders when `validationState` is set to 'error'
2692
- */
2693
- errorText?: string;
2694
- /**
2695
- * If `true`, the checkbox will be indeterminate.
2696
- * This does not modify the isChecked property.
2697
- *
2698
- * @default false
2699
- */
2700
- isIndeterminate?: boolean;
2701
- /**
2702
- * The name of the input field in a checkbox
2703
- * (Useful for form submission).
2704
- */
2705
- name?: string;
2706
- /**
2707
- * The value to be used in the checkbox input.
2708
- * This is the value that will be returned on form submission.
2709
- */
2710
- value?: string;
2711
- /**
2712
- * If `true`, the checkbox will be disabled
2713
- *
2714
- * @default false
2715
- */
2716
- isDisabled?: boolean;
2717
- /**
2718
- * If `true`, the checkbox input is marked as required,
2719
- * and `required` attribute will be added
2720
- *
2721
- * @default false
2722
- */
2723
- isRequired?: boolean;
2724
- /**
2725
- * If `error`, the checkbox input is marked as invalid,
2726
- * and `invalid` attribute will be added
2727
- */
2728
- validationState?: 'error' | 'none';
2729
- /**
2730
- * Size of the checkbox
2731
- *
2732
- * @default "medium"
2733
- */
2734
- size?: 'small' | 'medium';
2735
- /**
2736
- * Sets the tab-index property on checkbox element
2737
- *
2738
- */
2739
- tabIndex?: number;
2740
- } & TestID & StyledPropsBlade;
2741
- declare const Checkbox: React__default.ForwardRefExoticComponent<{
2742
- /**
2743
- * If `true`, The checkbox will be checked. This also makes the checkbox controlled
2744
- * Use `onChange` to update its value
2745
- *
2746
- * @default false
2747
- */
2748
- isChecked?: boolean | undefined;
2749
- /**
2750
- * If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled
2751
- *
2752
- * @default false
2753
- */
2754
- defaultChecked?: boolean | undefined;
2755
- /**
2756
- * The callback invoked when the checked state of the `Checkbox` changes.
2757
- */
2758
- onChange?: OnChange | undefined;
2759
- /**
2760
- * Sets the label of the checkbox
2761
- */
2762
- children: React__default.ReactNode;
2763
- /**
2764
- * Help text for the checkbox
2765
- */
2766
- helpText?: string | undefined;
2767
- /**
2768
- * Error text for the checkbox
2769
- *
2770
- * Renders when `validationState` is set to 'error'
2771
- */
2772
- errorText?: string | undefined;
2773
- /**
2774
- * If `true`, the checkbox will be indeterminate.
2775
- * This does not modify the isChecked property.
2776
- *
2777
- * @default false
2778
- */
2779
- isIndeterminate?: boolean | undefined;
2780
- /**
2781
- * The name of the input field in a checkbox
2782
- * (Useful for form submission).
2783
- */
2784
- name?: string | undefined;
2785
- /**
2786
- * The value to be used in the checkbox input.
2787
- * This is the value that will be returned on form submission.
2788
- */
2789
- value?: string | undefined;
2790
- /**
2791
- * If `true`, the checkbox will be disabled
2792
- *
2793
- * @default false
2794
- */
2795
- isDisabled?: boolean | undefined;
2796
- /**
2797
- * If `true`, the checkbox input is marked as required,
2798
- * and `required` attribute will be added
2799
- *
2800
- * @default false
2801
- */
2802
- isRequired?: boolean | undefined;
2803
- /**
2804
- * If `error`, the checkbox input is marked as invalid,
2805
- * and `invalid` attribute will be added
2806
- */
2807
- validationState?: "none" | "error" | undefined;
2808
- /**
2809
- * Size of the checkbox
2810
- *
2811
- * @default "medium"
2812
- */
2813
- size?: "small" | "medium" | undefined;
2814
- /**
2815
- * Sets the tab-index property on checkbox element
2816
- *
2817
- */
2818
- tabIndex?: number | undefined;
2819
- } & TestID & Partial<Omit<MakeObjectResponsive<{
2820
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
2821
- marginX: SpacingValueType;
2822
- marginY: SpacingValueType;
2823
- marginTop: SpacingValueType;
2824
- marginRight: SpacingValueType;
2825
- marginBottom: SpacingValueType;
2826
- marginLeft: SpacingValueType;
2827
- }> & Pick<MakeObjectResponsive<{
2828
- gap: SpacingValueType;
2829
- rowGap: SpacingValueType;
2830
- columnGap: SpacingValueType;
2831
- flex: string | number;
2832
- } & PickIfExist$1<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
2833
- __brand__?: "platform-web" | undefined;
2834
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
2835
- top: SpacingValueType;
2836
- right: SpacingValueType;
2837
- bottom: SpacingValueType;
2838
- left: SpacingValueType;
2839
- } & PickIfExist$1<styled_components.CSSObject, "position" | "zIndex"> & {
2840
- __brand__?: "platform-web" | undefined;
2841
- }> & 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>>;
2842
-
2843
- declare type CheckboxGroupProps = {
2844
- /**
2845
- * Accepts multiple checkboxes as children
2846
- */
2847
- children: React__default.ReactNode;
2848
- /**
2849
- * Help text of the checkbox group
2850
- */
2851
- helpText?: string;
2852
- /**
2853
- * Error text of the checkbox group
2854
- * Renders when `validationState` is set to 'error'
2855
- *
2856
- * Overrides helpText
2857
- */
2858
- errorText?: string;
2859
- /**
2860
- * Sets the error state of the CheckboxGroup
2861
- * If set to `error` it will render the `errorText` of the group,
2862
- * and propagate `invalid` prop to every checkbox
2863
- */
2864
- validationState?: 'error' | 'none';
2865
- /**
2866
- * Renders a necessity indicator after CheckboxGroup label
2867
- *
2868
- * If set to `undefined` it renders nothing.
2869
- */
2870
- necessityIndicator?: 'required' | 'optional' | 'none';
2871
- /**
2872
- * Sets the disabled state of the CheckboxGroup
2873
- * If set to `true` it propagate down to all the checkboxes
2874
- *
2875
- * @default false
2876
- */
2877
- isDisabled?: boolean;
2878
- /**
2879
- * Renders the label of the checkbox group
2880
- */
2881
- label: string;
2882
- /**
2883
- * Sets the position of the label
2884
- *
2885
- * @default 'top'
2886
- */
2887
- labelPosition?: 'top' | 'left';
2888
- /**
2889
- * Initial value of the checkbox group
2890
- */
2891
- defaultValue?: string[];
2892
- /**
2893
- * value of the checkbox group
2894
- *
2895
- * Use `onChange` to update its value
2896
- */
2897
- value?: string[];
2898
- /**
2899
- * The callback invoked when any of the checkbox's state changes
2900
- */
2901
- onChange?: ({ name, values }: {
2902
- name: string;
2903
- values: string[];
2904
- }) => void;
2905
- /**
2906
- * The name of the input field in a checkbox
2907
- * (Useful for form submission).
2908
- */
2909
- name?: string;
2910
- /**
2911
- * Size of the checkbox
2912
- *
2913
- * @default "medium"
2914
- */
2915
- size?: 'small' | 'medium';
2916
- } & TestID & StyledPropsBlade;
2917
- declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: CheckboxGroupProps) => React__default.ReactElement;
2918
-
2919
- declare type DropdownProps = {
2920
- selectionType?: 'single' | 'multiple';
2921
- onDismiss?: () => void;
2922
- children: React__default.ReactNode[];
2923
- } & StyledPropsBlade;
2924
- declare const Dropdown: ({ children, selectionType, onDismiss, ...styledProps }: DropdownProps) => JSX.Element;
2925
-
2926
- declare type DropdownOverlayProps = {
2927
- children: React__default.ReactNode;
2928
- } & TestID;
2929
- declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => JSX.Element;
2930
-
2931
- declare type BaseButtonCommonProps = {
2932
- size?: 'xsmall' | 'small' | 'medium' | 'large';
2933
- iconPosition?: 'left' | 'right';
2934
- isDisabled?: boolean;
2935
- isFullWidth?: boolean;
2936
- onBlur?: Platform.Select<{
2937
- native: (event: GestureResponderEvent) => void;
2938
- web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
2939
- }>;
2940
- onKeyDown?: Platform.Select<{
2941
- native: (event: GestureResponderEvent) => void;
2942
- web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
2943
- }>;
2944
- onClick?: Platform.Select<{
2945
- native: (event: GestureResponderEvent) => void;
2946
- web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
2947
- }>;
2948
- type?: 'button' | 'reset' | 'submit';
2949
- isLoading?: boolean;
2950
- accessibilityLabel?: string;
2951
- variant?: 'primary' | 'secondary' | 'tertiary';
2952
- contrast?: 'low' | 'high';
2953
- intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
2954
- } & TestID & StyledPropsBlade;
2955
- declare type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
2956
- icon?: undefined;
2957
- children: StringChildrenType;
2958
- };
2959
- declare type BaseButtonWithIconProps = BaseButtonCommonProps & {
2960
- icon: IconComponent$1;
2961
- children?: StringChildrenType;
2962
- };
2963
- declare type BaseButtonProps = BaseButtonWithIconProps | BaseButtonWithoutIconProps;
2964
-
2965
- declare type DropdownButtonProps = ButtonProps & {
2966
- onBlur?: BaseButtonProps['onBlur'];
2967
- onKeyDown?: BaseButtonProps['onKeyDown'];
2968
- };
2969
- declare const DropdownButton: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, onBlur, onKeyDown, size, type, variant, accessibilityLabel, testID, ...styledProps }: DropdownButtonProps) => JSX.Element;
2970
-
2971
- declare const ArrowDownIcon: IconComponent;
2972
-
2973
- declare const ArrowLeftIcon: IconComponent;
2974
-
2975
- declare const ArrowRightIcon: IconComponent;
2976
-
2977
- declare const ArrowUpRightIcon: IconComponent;
2978
-
2979
- declare const ArrowUpIcon: IconComponent;
2980
-
2981
- declare const Attachment: ({ size, color, ...styledProps }: IconProps) => ReactElement;
2982
-
2983
- declare const CheckIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
2984
-
2985
- declare const ChevronDownIcon: IconComponent;
2986
-
2987
- declare const ChevronLeftIcon: IconComponent;
2988
-
2989
- declare const ChevronRightIcon: IconComponent;
2990
-
2991
- declare const ChevronUpIcon: IconComponent;
2992
-
2993
- declare const CloseIcon: IconComponent;
2994
-
2995
- declare const CreditCardIcon: IconComponent;
2996
-
2997
- declare const DollarIcon: IconComponent;
2998
-
2999
- declare const DownloadIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3000
-
3001
- declare const EditIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3002
-
3003
- declare const EyeIcon: IconComponent;
3004
-
3005
- declare const EyeOffIcon: IconComponent;
3006
-
3007
- declare const FileTextIcon: IconComponent;
3008
-
3009
- declare const HistoryIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3010
-
3011
- declare const HomeIcon: IconComponent;
3012
-
3013
- declare const InfoIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3014
-
3015
- declare const LinkIcon: IconComponent;
3016
-
3017
- declare const LockIcon: IconComponent;
3018
-
3019
- declare const PauseIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3020
-
3021
- declare const PlusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3022
-
3023
- declare const RupeeIcon: IconComponent;
3024
-
3025
- declare const SearchIcon: IconComponent;
3026
-
3027
- declare const SettingsIcon: IconComponent;
3028
-
3029
- declare const SlashIcon: IconComponent;
3030
-
3031
- declare const BankIcon: IconComponent;
3032
-
3033
- declare const TrashIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3034
-
3035
- declare const AlertTriangleIcon$1: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3036
-
3037
- declare const AlertTriangleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3038
-
3039
- declare const CheckCircleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3040
-
3041
- declare const MinusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
3042
-
3043
- declare const TrendingUpIcon: IconComponent;
3044
-
3045
- declare const TrendingDownIcon: IconComponent;
3046
-
3047
- declare const UsersIcon: IconComponent;
3048
-
3049
- declare const HelpCircleIcon: IconComponent;
3050
-
3051
- declare const ExternalLinkIcon: IconComponent;
3052
-
3053
- declare const MailIcon: IconComponent;
3054
-
3055
- declare const AlertCircleIcon: IconComponent;
3056
-
3057
- declare const AlertOnlyIcon: IconComponent;
3058
-
3059
- declare const QRCodeIcon: IconComponent;
3060
-
3061
- declare const BellIcon: IconComponent;
3062
-
3063
- declare const BellOffIcon: IconComponent;
3064
-
3065
- declare const BookmarkIcon: IconComponent;
3066
-
3067
- declare const CheckSquareIcon: IconComponent;
3068
-
3069
- declare const ClipboardIcon: IconComponent;
3070
-
3071
- declare const CommandIcon: IconComponent;
3072
-
3073
- declare const CopyIcon: IconComponent;
3074
-
3075
- declare const CropIcon: IconComponent;
3076
-
3077
- declare const CutIcon: IconComponent;
3078
-
3079
- declare const DownloadCloudIcon: IconComponent;
3080
-
3081
- declare const EditInlineIcon: IconComponent;
3082
-
3083
- declare const EditComposeIcon: IconComponent;
3084
-
3085
- declare const FileIcon: IconComponent;
3086
-
3087
- declare const FilePlusIcon: IconComponent;
3088
-
3089
- declare const FileMinusIcon: IconComponent;
3090
-
3091
- declare const FilterIcon: IconComponent;
3092
-
3093
- declare const FlagIcon: IconComponent;
3094
-
3095
- declare const FolderIcon: IconComponent;
3096
-
3097
- declare const GlobeIcon: IconComponent;
3098
-
3099
- declare const HashIcon: IconComponent;
3100
-
3101
- declare const HeartIcon: IconComponent;
3102
-
3103
- declare const LogInIcon: IconComponent;
3104
-
3105
- declare const LogOutIcon: IconComponent;
3106
-
3107
- declare const MaximizeIcon: IconComponent;
3108
-
3109
- declare const FullScreenEnterIcon: IconComponent;
3110
-
3111
- declare const FullScreenExitIcon: IconComponent;
3112
-
3113
- declare const MenuIcon: IconComponent;
3114
-
3115
- declare const MicIcon: IconComponent;
3116
-
3117
- declare const MicOffIcon: IconComponent;
3118
-
3119
- declare const MinimizeIcon: IconComponent;
3120
-
3121
- declare const MinusSquareIcon: IconComponent;
3122
-
3123
- declare const MinusCircleIcon: IconComponent;
3124
-
3125
- declare const MoreVerticalIcon: IconComponent;
3126
-
3127
- declare const MoreHorizontalIcon: IconComponent;
3128
-
3129
- declare const MoveIcon: IconComponent;
3130
-
3131
- declare const PauseCircleIcon: IconComponent;
3132
-
3133
- declare const PlayIcon: IconComponent;
3134
-
3135
- declare const PlayCircleIcon: IconComponent;
3136
-
3137
- declare const PlusCircleIcon: IconComponent;
3138
-
3139
- declare const PlusSquareIcon: IconComponent;
3140
-
3141
- declare const PowerIcon: IconComponent;
3142
-
3143
- declare const RefreshIcon: IconComponent;
3144
-
3145
- declare const RepeatIcon: IconComponent;
3146
-
3147
- declare const RotateClockWiseIcon: IconComponent;
3148
-
3149
- declare const RotateCounterClockWiseIcon: IconComponent;
3150
-
3151
- declare const SaveIcon: IconComponent;
3152
-
3153
- declare const ShareIcon: IconComponent;
3154
-
3155
- declare const ExportIcon: IconComponent;
3156
-
3157
- declare const ShoppingCartIcon: IconComponent;
3158
-
3159
- declare const StopCircleIcon: IconComponent;
3160
-
3161
- declare const SunIcon: IconComponent;
3162
-
3163
- declare const ToggleLeftIcon: IconComponent;
3164
-
3165
- declare const ToggleRightIcon: IconComponent;
3166
-
3167
- declare const ListIcon: IconComponent;
3168
-
3169
- declare const StarIcon: IconComponent;
3170
-
3171
- declare const SlidersIcon: IconComponent;
3172
-
3173
- declare const PaperclipIcon: IconComponent;
3174
-
3175
- declare const UploadCloudIcon: IconComponent;
3176
-
3177
- declare const TargetIcon: IconComponent;
3178
-
3179
- declare const UnlockIcon: IconComponent;
3180
-
3181
- declare const ThumbsUpIcon: IconComponent;
3182
-
3183
- declare const ThumbsDownIcon: IconComponent;
3184
-
3185
- declare const UploadIcon: IconComponent;
3186
-
3187
- declare const VideoIcon: IconComponent;
3188
-
3189
- declare const XSquareIcon: IconComponent;
3190
-
3191
- declare const XCircleIcon: IconComponent;
3192
-
3193
- declare const ZapIcon: IconComponent;
3194
-
3195
- declare const ZoomOutIcon: IconComponent;
3196
-
3197
- declare const ZoomInIcon: IconComponent;
3198
-
3199
- declare const AlignJustifyIcon: IconComponent;
3200
-
3201
- declare const AlignRightIcon: IconComponent;
3202
-
3203
- declare const AlignLeftIcon: IconComponent;
3204
-
3205
- declare const AlignCenterIcon: IconComponent;
3206
-
3207
- declare const AnchorIcon: IconComponent;
3208
-
3209
- declare const BoldIcon: IconComponent;
3210
-
3211
- declare const ScissorsIcon: IconComponent;
3212
-
3213
- declare const DeleteIcon: IconComponent;
3214
-
3215
- declare const GridIcon: IconComponent;
3216
-
3217
- declare const ImageIcon: IconComponent;
3218
-
3219
- declare const InboxIcon: IconComponent;
3220
-
3221
- declare const ItalicIcon: IconComponent;
3222
-
3223
- declare const TypeIcon: IconComponent;
3224
-
3225
- declare const UnderlineIcon: IconComponent;
3226
-
3227
- declare const FilmIcon: IconComponent;
3228
-
3229
- declare const AirplayIcon: IconComponent;
3230
-
3231
- declare const AtSignIcon: IconComponent;
3232
-
3233
- declare const BluetoothIcon: IconComponent;
3234
-
3235
- declare const CameraIcon: IconComponent;
3236
-
3237
- declare const CameraOffIcon: IconComponent;
3238
-
3239
- declare const CastIcon: IconComponent;
3240
-
3241
- declare const MessageCircleIcon: IconComponent;
3242
-
3243
- declare const MessageSquareIcon: IconComponent;
3244
-
3245
- declare const PhoneCallIcon: IconComponent;
3246
-
3247
- declare const PhoneIcon: IconComponent;
3248
-
3249
- declare const PhoneOutgoingIcon: IconComponent;
3250
-
3251
- declare const PhoneOffIcon: IconComponent;
3252
-
3253
- declare const PhoneMissedIcon: IconComponent;
3254
-
3255
- declare const PhoneIncomingIcon: IconComponent;
3256
-
3257
- declare const PhoneForwardedIcon: IconComponent;
3258
-
3259
- declare const RadioIcon: IconComponent;
3260
-
3261
- declare const VideoOffIcon: IconComponent;
3262
-
3263
- declare const VoicemailIcon: IconComponent;
3264
-
3265
- declare const WifiIcon: IconComponent;
3266
-
3267
- declare const WifiOffIcon: IconComponent;
3268
-
3269
- declare const ApertureIcon: IconComponent;
3270
-
3271
- declare const AwardIcon: IconComponent;
3272
-
3273
- declare const BoxIcon: IconComponent;
3274
-
3275
- declare const BriefcaseIcon: IconComponent;
3276
-
3277
- declare const ChromeIcon: IconComponent;
3278
-
3279
- declare const CircleIcon: IconComponent;
3280
-
3281
- declare const CrosshairIcon: IconComponent;
3282
-
3283
- declare const DiscIcon: IconComponent;
3284
-
3285
- declare const DropletIcon: IconComponent;
3286
-
3287
- declare const FeatherIcon: IconComponent;
3288
-
3289
- declare const LayersIcon: IconComponent;
3290
-
3291
- declare const LayoutIcon: IconComponent;
3292
-
3293
- declare const SidebarIcon: IconComponent;
3294
-
3295
- declare const SquareIcon: IconComponent;
3296
-
3297
- declare const TriangleIcon: IconComponent;
3298
-
3299
- declare const LifeBuoyIcon: IconComponent;
3300
-
3301
- declare const LoaderIcon: IconComponent;
3302
-
3303
- declare const OctagonIcon: IconComponent;
3304
-
3305
- declare const PackageIcon: IconComponent;
3306
-
3307
- declare const PercentIcon: IconComponent;
3308
-
3309
- declare const ShieldIcon: IconComponent;
3310
-
3311
- declare const UmbrellaIcon: IconComponent;
3312
-
3313
- declare const WindIcon: IconComponent;
3314
-
3315
- declare const ArrowUpLeftIcon: IconComponent;
3316
-
3317
- declare const ArrowDownRightIcon: IconComponent;
3318
-
3319
- declare const ArrowDownLeftIcon: IconComponent;
3320
-
3321
- declare const ChevronsRightIcon: IconComponent;
3322
-
3323
- declare const ChevronsLeftIcon: IconComponent;
3324
-
3325
- declare const ChevronsDownIcon: IconComponent;
3326
-
3327
- declare const ChevronsUpIcon: IconComponent;
3328
-
3329
- declare const CornerUpRightIcon: IconComponent;
3330
-
3331
- declare const CornerDownLeftIcon: IconComponent;
3332
-
3333
- declare const CornerRightUpIcon: IconComponent;
3334
-
3335
- declare const CornerRightDownIcon: IconComponent;
3336
-
3337
- declare const CornerLeftUpIcon: IconComponent;
3338
-
3339
- declare const CornerDownRightIcon: IconComponent;
3340
-
3341
- declare const CornerUpLeftIcon: IconComponent;
3342
-
3343
- declare const CornerLeftDownIcon: IconComponent;
3344
-
3345
- declare const FastForwardIcon: IconComponent;
3346
-
3347
- declare const HeadphonesIcon: IconComponent;
3348
-
3349
- declare const MusicIcon: IconComponent;
3350
-
3351
- declare const RewindIcon: IconComponent;
3352
-
3353
- declare const SkipBackIcon: IconComponent;
3354
-
3355
- declare const SkipForwardIcon: IconComponent;
3356
-
3357
- declare const VolumeIcon: IconComponent;
3358
-
3359
- declare const VolumeMuteIcon: IconComponent;
3360
-
3361
- declare const VolumeLowIcon: IconComponent;
3362
-
3363
- declare const VolumeHighIcon: IconComponent;
3364
-
3365
- declare const CalendarIcon: IconComponent;
3366
-
3367
- declare const ClockIcon: IconComponent;
3368
-
3369
- declare const CloudIcon: IconComponent;
3370
-
3371
- declare const CloudDrizzleIcon: IconComponent;
3372
-
3373
- declare const CloudSnowIcon: IconComponent;
3374
-
3375
- declare const CloudOffIcon: IconComponent;
3376
-
3377
- declare const CloudLightningIcon: IconComponent;
3378
-
3379
- declare const MoonIcon: IconComponent;
3380
-
3381
- declare const SunsetIcon: IconComponent;
3382
-
3383
- declare const SunriseIcon: IconComponent;
3384
-
3385
- declare const WatchIcon: IconComponent;
3386
-
3387
- declare const CloudRainIcon: IconComponent;
3388
-
3389
- declare const BatteryChargingIcon: IconComponent;
3390
-
3391
- declare const BatteryIcon: IconComponent;
3392
-
3393
- declare const CpuIcon: IconComponent;
3394
-
3395
- declare const MonitorIcon: IconComponent;
3396
-
3397
- declare const PrinterIcon: IconComponent;
3398
-
3399
- declare const ServerIcon: IconComponent;
3400
-
3401
- declare const SmartphoneIcon: IconComponent;
3402
-
3403
- declare const SpeakerIcon: IconComponent;
3404
-
3405
- declare const TabletIcon: IconComponent;
3406
-
3407
- declare const ThermometerIcon: IconComponent;
3408
-
3409
- declare const TvIcon: IconComponent;
3410
-
3411
- declare const CodepenIcon: IconComponent;
3412
-
3413
- declare const FacebookIcon: IconComponent;
3414
-
3415
- declare const GitlabIcon: IconComponent;
3416
-
3417
- declare const GithubIcon: IconComponent;
3418
-
3419
- declare const InstagramIcon: IconComponent;
3420
-
3421
- declare const PocketIcon: IconComponent;
3422
-
3423
- declare const SlackIcon: IconComponent;
3424
-
3425
- declare const TwitterIcon: IconComponent;
3426
-
3427
- declare const UserCheckIcon: IconComponent;
3428
-
3429
- declare const UserXIcon: IconComponent;
3430
-
3431
- declare const UserPlusIcon: IconComponent;
3432
-
3433
- declare const UserMinusIcon: IconComponent;
3434
-
3435
- declare const ActivityIcon: IconComponent;
3436
-
3437
- declare const BarChartIcon: IconComponent;
3438
-
3439
- declare const BarChartAltIcon: IconComponent;
3440
-
3441
- declare const PieChartIcon: IconComponent;
3442
-
3443
- declare const CompassIcon: IconComponent;
3444
-
3445
- declare const MapIcon: IconComponent;
3446
-
3447
- declare const MapPinIcon: IconComponent;
3448
-
3449
- declare const NavigationIcon: IconComponent;
3450
-
3451
- declare const DollarsIcon: IconComponent;
3452
-
3453
- declare const RupeesIcon: IconComponent;
3454
-
3455
- declare const DashboardIcon: IconComponent;
3456
-
3457
- declare const InvoicesIcon: IconComponent;
3458
-
3459
- declare const PaymentLinksIcon: IconComponent;
3460
-
3461
- declare const PaymentButtonsIcon: IconComponent;
3462
-
3463
- declare const PaymentPagesIcon: IconComponent;
3464
-
3465
- declare const RoutesIcon: IconComponent;
3466
-
3467
- declare const SubscriptionsIcon: IconComponent;
3468
-
3469
- declare const SmartCollectIcon: IconComponent;
3470
-
3471
- declare const CustomersIcon: IconComponent;
3472
-
3473
- declare const OffersIcon: IconComponent;
3474
-
3475
- declare const ReportsIcon: IconComponent;
3476
-
3477
- declare const MyAccountIcon: IconComponent;
3478
-
3479
- declare const RazorpayIcon: IconComponent;
3480
-
3481
- declare const RazorpayXIcon: IconComponent;
3482
-
3483
- declare const BookIcon: IconComponent;
3484
-
3485
- declare const SettlementsIcon: IconComponent;
3486
-
3487
- declare const ShuffleIcon: IconComponent;
3488
-
3489
- declare const TagIcon: IconComponent;
3490
-
3491
- declare const UserIcon: IconComponent;
3492
-
3493
- declare const TransactionsIcon: IconComponent;
3494
-
3495
- declare const AnnouncementIcon: IconComponent;
3496
-
3497
- declare const AppStoreIcon: IconComponent;
3498
-
3499
- declare const CoinsIcon: IconComponent;
3500
-
3501
- declare const BillIcon: IconComponent;
3502
-
3503
- declare const StampIcon: IconComponent;
3504
-
3505
- declare const MenuDotsIcon: IconComponent;
3506
-
3507
- declare const SendIcon: IconComponent;
3508
-
3509
- declare const MailOpenIcon: IconComponent;
3510
-
3511
- declare const BulkPayoutsIcon: IconComponent;
3512
-
3513
- declare type FeedbackIconColors = `feedback.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback']['icon']>}`;
3514
- declare type FeedbackActionIconColors = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['icon']>}`;
3515
- declare type ActionIconColors = `action.icon.${DotNotationColorStringToken<Theme$1['colors']['action']['icon']>}`;
3516
- declare type TextIconColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
3517
- declare type SurfaceActionIconColors = `surface.action.icon.${DotNotationColorStringToken<Theme$1['colors']['surface']['action']['icon']>}`;
3518
- declare type BadgeIconColors = `badge.icon.${DotNotationColorStringToken<Theme$1['colors']['badge']['icon']>}`;
3519
- declare type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
3520
- declare type IconProps = {
3521
- /**
3522
- * Color token (not to be confused with actual hsla value)
3523
- */
3524
- color: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
3525
- size: IconSize;
3526
- } & StyledPropsBlade;
3527
- declare type IconComponent = React.ComponentType<IconProps>;
3528
-
3529
- /**
3530
- * Similar to `Pick` except this returns `never` when value doesn't exist (native `Pick` returns `unknown`).
3531
- *
3532
- * 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.
3533
- *
3534
- * E.g. This will pick from ViewStyle prop if value exists else returns undefined.
3535
- *
3536
- * ```ts
3537
- * // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
3538
- * native: PickIfExist<ViewStyle, T>;
3539
- * ```
3540
- */
3541
- declare type PickIfExist<T, K extends keyof T> = {
3542
- [P in K]: P extends keyof T ? T[P] : never;
3543
- };
3544
- /**
3545
- * Picks the types based on the platform (web / native).
3546
- *
3547
- * E.g.
3548
- * ```ts
3549
- * type CSSObject = PickCSSByPlatform<'display'>
3550
- * // On Web --> This will be all possible web display properties like `block`, `flex`, `inline`, and more.
3551
- * // On Native --> This will be just `flex` and `none`
3552
- * ```
3553
- */
3554
- declare type PickCSSByPlatform<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
3555
- web: PickIfExist<CSSObject, T>;
3556
- native: PickIfExist<ViewStyle, T>;
3557
- }>;
3558
-
3559
- declare type FormInputLabelProps = {
3560
- /**
3561
- * Label to be shown for the input field
3562
- */
3563
- label: string;
3564
- /**
3565
- * Desktop only prop. Default value on mobile will be `top`
3566
- */
3567
- labelPosition?: 'left' | 'top';
3568
- /**
3569
- * Displays `(optional)` when `optional` is passed or `*` when `required` is passed
3570
- */
3571
- necessityIndicator?: 'required' | 'optional' | 'none';
3572
- };
3573
-
3574
- declare type FormInputOnEvent = ({ name, value }: {
3575
- name?: string;
3576
- value?: string;
3577
- }) => void;
3578
- declare type FormInputValidationProps = {
3579
- /**
3580
- * Help text for the input
3581
- */
3582
- helpText?: string;
3583
- /**
3584
- * Error text for the input
3585
- *
3586
- * Renders when `validationState` is set to 'error'
3587
- */
3588
- errorText?: string;
3589
- /**
3590
- * success text for the input
3591
- *
3592
- * Renders when `validationState` is set to 'success'
3593
- */
3594
- successText?: string;
3595
- /**
3596
- * If `error`, the input is marked as invalid,
3597
- * and `invalid` attribute will be added
3598
- *
3599
- * If `success`, the input is marked as valid,
3600
- *
3601
- */
3602
- validationState?: 'success' | 'error' | 'none';
3603
- };
3604
-
3605
- type FormInputHandleOnKeyDownEvent = ({
3606
- name,
3607
- key,
3608
- code,
3609
- event,
3610
- }: FormInputOnKeyDownEvent) => void;
3611
-
3612
- type FormInputOnKeyDownEvent = {
3613
- name?: string;
3614
- key?: string;
3615
- code?: string;
3616
- event: KeyboardEvent<HTMLInputElement>;
3617
- };
3618
-
3619
- declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
3620
- /**
3621
- * Determines if it needs to be rendered as input, textarea or button
3622
- */
3623
- as?: 'input' | 'textarea' | 'button';
3624
- /**
3625
- * ID that will be used for accessibility
3626
- */
3627
- id: string;
3628
- /**
3629
- * Placeholder text to be displayed inside the input field
3630
- */
3631
- placeholder?: string;
3632
- /**
3633
- * Type of Input Field to be rendered.
3634
- *
3635
- * @default text
3636
- */
3637
- type?: 'text' | 'telephone' | 'email' | 'url' | 'number' | 'search' | 'password';
3638
- /**
3639
- * Used to set the default value of input field when it's uncontrolled
3640
- */
3641
- defaultValue?: string;
3642
- /**
3643
- * The name of the input field.
3644
- *
3645
- * Useful in form submissions
3646
- */
3647
- name?: string;
3648
- /**
3649
- * The callback function to be invoked when the input field gets focus
3650
- */
3651
- onFocus?: FormInputOnEvent;
3652
- /**
3653
- * The callback function to be invoked when the value of the input field changes
3654
- */
3655
- onChange?: FormInputOnEvent;
3656
- /**
3657
- * The callback function to be invoked when input is clicked
3658
- */
3659
- onClick?: FormInputOnEvent;
3660
- /**
3661
- * The callback function to be invoked when the value of the input field has any input
3662
- */
3663
- onInput?: FormInputOnEvent;
3664
- /**
3665
- * The callback function to be invoked whenever there is a keyDown event
3666
- */
3667
- onKeyDown?: FormInputHandleOnKeyDownEvent;
3668
- /**
3669
- * The callback function to be invoked when the the input field loses focus
3670
- *
3671
- * For React Native this will call `onEndEditing` event since we want to get the last value of the input field
3672
- */
3673
- onBlur?: FormInputOnEvent;
3674
- /**
3675
- * Ignores the blur event animation (Used in Select to ignore blur animation when item in option is clicked)
3676
- */
3677
- shouldIgnoreBlurAnimation?: boolean;
3678
- /**
3679
- * Used to turn the input field to controlled so user can control the value
3680
- */
3681
- value?: string;
3682
- /**
3683
- * Used to disable the input field
3684
- */
3685
- isDisabled?: boolean;
3686
- /**
3687
- * If true, the input is marked as required, and `required` attribute will be added
3688
- */
3689
- isRequired?: boolean;
3690
- /**
3691
- * Icon to be shown at the start of the input field
3692
- */
3693
- leadingIcon?: IconComponent$1;
3694
- /**
3695
- * Prefix symbol to be displayed at the beginning of the input field. If leadingIcon is provided it'll be placed after it
3696
- */
3697
- prefix?: string;
3698
- /**
3699
- * Element to be rendered before suffix. This is decided by the component which is extending BaseInput
3700
- *
3701
- * eg: consumers can render a loader or they could render a clear button
3702
- */
3703
- interactionElement?: ReactNode;
3704
- /**
3705
- * Suffix symbol to be displayed at the end of the input field. If trailingIcon is provided it'll be placed before it
3706
- */
3707
- suffix?: string;
3708
- /**
3709
- * Icon to be displayed at the end of the input field
3710
- */
3711
- trailingIcon?: IconComponent$1;
3712
- /**
3713
- * Displays the character counter under the input field
3714
- */
3715
- maxCharacters?: number;
3716
- /**
3717
- * alignment of the text inside input field
3718
- */
3719
- textAlign?: 'left' | 'center' | 'right';
3720
- /**
3721
- * If true, focuses the input field on load
3722
- *
3723
- * **Note:**
3724
- * Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments.
3725
- * When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.
3726
- */
3727
- autoFocus?: boolean;
3728
- /**
3729
- * Hints the platform to display an appropriate virtual keyboard
3730
- *
3731
- * **Native:** Passes as is the `keyboardType` attribute
3732
- *
3733
- * **Web:** Passes the value to the `inputMode` attribute
3734
- */
3735
- keyboardType?: 'text' | 'search' | 'telephone' | 'email' | 'url' | 'decimal';
3736
- /**
3737
- * determines what return key to show on the keyboard of mobile devices/virtual keyboard
3738
- * **Note**: Few values are platform dependent and might not render on all the platforms
3739
- *
3740
- * `default` is only available on native. it'll be mapped to `enter` for web
3741
- * `previous` is only available on native android
3742
- */
3743
- keyboardReturnKeyType?: 'default' | 'go' | 'done' | 'next' | 'previous' | 'search' | 'send';
3744
- /**
3745
- * determines what autoComplete suggestion type to show
3746
- *
3747
- * Internally it'll render platform specific attributes:
3748
- *
3749
- * - web: `autocomplete`
3750
- * - iOS: `textContentType`
3751
- * - android: `autoComplete`
3752
- *
3753
- */
3754
- autoCompleteSuggestionType?: 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
3755
- /**
3756
- * Element to be rendered on the trailing slot of input field label
3757
- */
3758
- trailingHeaderSlot?: (value?: string) => ReactNode;
3759
- /**
3760
- * Element to be rendered on the trailing slot of input field footer
3761
- */
3762
- trailingFooterSlot?: (value?: string) => ReactNode;
3763
- /**
3764
- * Sets the textarea's number of lines
3765
- */
3766
- numberOfLines?: 2 | 3 | 4 | 5;
3767
- /**
3768
- * Sets the accessibility label for the input
3769
- */
3770
- accessibilityLabel?: string;
3771
- /**
3772
- * Sets the id of the label
3773
- *
3774
- * (Useful when assigning one label to multiple elements using aria-labelledby)
3775
- */
3776
- labelId?: string;
3777
- /**
3778
- * Can be used in select to set the id of the active descendant from the listbox
3779
- */
3780
- activeDescendant?: string;
3781
- /**
3782
- * Hides the label text
3783
- */
3784
- hideLabelText?: boolean;
3785
- /**
3786
- * Hides the form hint text
3787
- */
3788
- hideFormHint?: boolean;
3789
- /**
3790
- * componentName prop sets the data-blade-component attribute name
3791
- * for internal metric collection purposes
3792
- */
3793
- componentName?: string;
3794
- /**
3795
- * whether the input has a popup
3796
- */
3797
- hasPopup?: AriaAttributes['hasPopup'];
3798
- /**
3799
- * id of the popup
3800
- */
3801
- popupId?: string;
3802
- /**
3803
- * true if popup is in expanded state
3804
- */
3805
- isPopupExpanded?: boolean;
3806
- /**
3807
- * sets the autocapitalize behavior for the input
3808
- */
3809
- autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
3810
- } & TestID & Platform.Select<{
3811
- native: {
3812
- /**
3813
- * The callback function to be invoked when the value of the input field is submitted.
3814
- */
3815
- onSubmit?: FormInputOnEvent;
3816
- };
3817
- web: {
3818
- /**
3819
- * This is a react-native only prop and has no effect on web.
3820
- */
3821
- onSubmit?: undefined;
3822
- };
3823
- }> & StyledPropsBlade;
3824
-
3825
- declare type Type = Exclude<BaseInputProps['type'], 'password'>;
3826
- 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'> & {
3827
- /**
3828
- * Decides whether to render a clear icon button
3829
- */
3830
- showClearButton?: boolean;
3831
- /**
3832
- * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
3833
- */
3834
- onClearButtonClick?: () => void;
3835
- /**
3836
- * Decides whether to show a loading spinner for the input field.
3837
- */
3838
- isLoading?: boolean;
3839
- /**
3840
- * Icon that will be rendered at the beginning of the input field
3841
- */
3842
- icon?: IconComponent$1;
3843
- /**
3844
- * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
3845
- *
3846
- *
3847
- * **Note on number type**
3848
- *
3849
- * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
3850
- * If you have a usecase where you only want to support number input, you can handle it on validations end.
3851
- *
3852
- * 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
3853
- *
3854
- * @default text
3855
- */
3856
- type?: Type;
3857
- } & StyledPropsBlade;
3858
- declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "defaultValue" | "prefix" | "autoCapitalize" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
3859
- /**
3860
- * Decides whether to render a clear icon button
3861
- */
3862
- showClearButton?: boolean | undefined;
3863
- /**
3864
- * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
3865
- */
3866
- onClearButtonClick?: (() => void) | undefined;
3867
- /**
3868
- * Decides whether to show a loading spinner for the input field.
3869
- */
3870
- isLoading?: boolean | undefined;
3871
- /**
3872
- * Icon that will be rendered at the beginning of the input field
3873
- */
3874
- icon?: IconComponent$1 | undefined;
3875
- /**
3876
- * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
3877
- *
3878
- *
3879
- * **Note on number type**
3880
- *
3881
- * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
3882
- * If you have a usecase where you only want to support number input, you can handle it on validations end.
3883
- *
3884
- * 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
3885
- *
3886
- * @default text
3887
- */
3888
- type?: Type;
3889
- } & Partial<Omit<MakeObjectResponsive<{
3890
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
3891
- marginX: SpacingValueType;
3892
- marginY: SpacingValueType;
3893
- marginTop: SpacingValueType;
3894
- marginRight: SpacingValueType;
3895
- marginBottom: SpacingValueType;
3896
- marginLeft: SpacingValueType;
3897
- }> & Pick<MakeObjectResponsive<{
3898
- gap: SpacingValueType;
3899
- rowGap: SpacingValueType;
3900
- columnGap: SpacingValueType;
3901
- flex: string | number;
3902
- } & PickIfExist<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
3903
- __brand__?: "platform-web" | undefined;
3904
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
3905
- top: SpacingValueType;
3906
- right: SpacingValueType;
3907
- bottom: SpacingValueType;
3908
- left: SpacingValueType;
3909
- } & PickIfExist<styled_components.CSSObject, "position" | "zIndex"> & {
3910
- __brand__?: "platform-web" | undefined;
3911
- }> & 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>>;
3912
-
3913
- declare type PasswordInputExtraProps = {
3914
- /**
3915
- * Shows a reveal button to toggle password visibility
3916
- *
3917
- * @default true
3918
- */
3919
- showRevealButton?: boolean;
3920
- /**
3921
- * Displays asterisk (`*`) when `isRequired` is enabled
3922
- *
3923
- * @default none
3924
- */
3925
- necessityIndicator?: Exclude<BaseInputProps['necessityIndicator'], 'optional'>;
3926
- /**
3927
- * Determines what autoComplete suggestion type to show. Defaults to using platform heuristics.
3928
- *
3929
- * It's not recommended to turn this off in favor of safe password practices.
3930
- * Providing `password` or `newPassword` is more informative to the platform for browser autofill or password managers.
3931
- *
3932
- * **Note**: Using `newPassword` on iOS has some [known issue](https://github.com/facebook/react-native/issues/21911) on React Native
3933
- *
3934
- * Internally it'll render platform specific attributes:
3935
- *
3936
- * - web: `autocomplete`
3937
- * - iOS: `textContentType`
3938
- * - android: `autoComplete`
3939
- *
3940
- */
3941
- autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
3942
- };
3943
- 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;
3944
- declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<MakeObjectResponsive<{
3945
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
3946
- marginX: SpacingValueType;
3947
- marginY: SpacingValueType;
3948
- marginTop: SpacingValueType;
3949
- marginRight: SpacingValueType;
3950
- marginBottom: SpacingValueType;
3951
- marginLeft: SpacingValueType;
3952
- }> & Pick<MakeObjectResponsive<{
3953
- gap: SpacingValueType;
3954
- rowGap: SpacingValueType;
3955
- columnGap: SpacingValueType;
3956
- flex: string | number;
3957
- } & PickIfExist<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
3958
- __brand__?: "platform-web" | undefined;
3959
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
3960
- top: SpacingValueType;
3961
- right: SpacingValueType;
3962
- bottom: SpacingValueType;
3963
- left: SpacingValueType;
3964
- } & PickIfExist<styled_components.CSSObject, "position" | "zIndex"> & {
3965
- __brand__?: "platform-web" | undefined;
3966
- }> & 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>>;
3967
-
3968
- 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'> & {
3969
- /**
3970
- * Decides whether to render a clear icon button
3971
- */
3972
- showClearButton?: boolean;
3973
- /**
3974
- * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
3975
- */
3976
- onClearButtonClick?: () => void;
3977
- } & StyledPropsBlade;
3978
- declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "numberOfLines" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters"> & {
3979
- /**
3980
- * Decides whether to render a clear icon button
3981
- */
3982
- showClearButton?: boolean | undefined;
3983
- /**
3984
- * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
3985
- */
3986
- onClearButtonClick?: (() => void) | undefined;
3987
- } & Partial<Omit<MakeObjectResponsive<{
3988
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
3989
- marginX: SpacingValueType;
3990
- marginY: SpacingValueType;
3991
- marginTop: SpacingValueType;
3992
- marginRight: SpacingValueType;
3993
- marginBottom: SpacingValueType;
3994
- marginLeft: SpacingValueType;
3995
- }> & Pick<MakeObjectResponsive<{
3996
- gap: SpacingValueType;
3997
- rowGap: SpacingValueType;
3998
- columnGap: SpacingValueType;
3999
- flex: string | number;
4000
- } & PickIfExist<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
4001
- __brand__?: "platform-web" | undefined;
4002
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
4003
- top: SpacingValueType;
4004
- right: SpacingValueType;
4005
- bottom: SpacingValueType;
4006
- left: SpacingValueType;
4007
- } & PickIfExist<styled_components.CSSObject, "position" | "zIndex"> & {
4008
- __brand__?: "platform-web" | undefined;
4009
- }> & 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>>;
4010
-
4011
- declare type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
4012
- name?: string;
4013
- value?: string;
4014
- inputIndex: number;
4015
- }) => void;
4016
- declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID'> & {
4017
- /**
4018
- * Determines the number of input fields to show for the OTP
4019
- * @default 6
4020
- */
4021
- otpLength?: 4 | 6;
4022
- /**
4023
- * The callback function to be invoked when all the values of the OTPInput are filled
4024
- */
4025
- onOTPFilled?: FormInputOnEvent;
4026
- /**
4027
- * Masks input characters in all the fields
4028
- */
4029
- isMasked?: boolean;
4030
- /**
4031
- * Determines what autoComplete suggestion type to show. Defaults to `oneTimeCode`.
4032
- *
4033
- * It's not recommended to turn this off in favor of otp input practices.
4034
- *
4035
- *
4036
- * Internally it'll render platform specific attributes:
4037
- *
4038
- * - web: `autocomplete`
4039
- * - iOS: `textContentType`
4040
- * - android: `autoComplete`
4041
- *
4042
- */
4043
- autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
4044
- /**
4045
- * The callback function to be invoked when one of the input fields gets focus
4046
- */
4047
- onFocus?: FormInputOnEventWithIndex;
4048
- /**
4049
- * The callback function to be invoked when one of the input fields is blurred
4050
- */
4051
- onBlur?: FormInputOnEventWithIndex;
4052
- } & StyledPropsBlade;
4053
- /**
4054
- * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
4055
- *
4056
- * ## Usage
4057
- *
4058
- * ```tsx
4059
- * <OTPInput
4060
- * label="Enter OTP"
4061
- * name="otpInput"
4062
- * onChange={({ name, value }): void => console.log({ name, value })}
4063
- * onOTPFilled={({ name, value }): void => console.log({ name, value })}
4064
- * />
4065
- * ```
4066
- */
4067
- 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;
4068
-
4069
- declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
4070
- icon?: IconComponent$1;
4071
- /**
4072
- * Controlled value of the Select. Use it in combination of `onChange`.
4073
- *
4074
- * Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
4075
- */
4076
- value?: string | string[];
4077
- /**
4078
- * Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
4079
- */
4080
- defaultValue?: string | string[];
4081
- onChange?: ({ name, values }: {
4082
- name?: string;
4083
- values: string[];
4084
- }) => void;
4085
- };
4086
- /**
4087
- * ### SelectInput
4088
- *
4089
- * Our equivalent of `<select>` tag. Lets you select items from given options.
4090
- *
4091
- * To be used in combination of `Dropdown` and `ActionList` component
4092
- *
4093
- * ---
4094
- *
4095
- * #### Usage
4096
- *
4097
- * ```diff
4098
- * <Dropdown>
4099
- * + <SelectInput label="Select Fruits" />
4100
- * <DropdownOverlay>
4101
- * <ActionList>
4102
- * <ActionListItem title="Mango" value="mango" />
4103
- * <ActionListItem title="Apple" value="apple" />
4104
- * </ActionList>
4105
- * </DropdownOverlay>
4106
- * </Dropdown>
4107
- * ```
4108
- *
4109
- * ---
4110
- *
4111
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
4112
- */
4113
- declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "prefix" | "onFocus" | "onBlur" | "onClick" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix"> & {
4114
- icon?: IconComponent$1 | undefined;
4115
- /**
4116
- * Controlled value of the Select. Use it in combination of `onChange`.
4117
- *
4118
- * Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
4119
- */
4120
- value?: string | string[] | undefined;
4121
- /**
4122
- * Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
4123
- */
4124
- defaultValue?: string | string[] | undefined;
4125
- onChange?: (({ name, values }: {
4126
- name?: string | undefined;
4127
- values: string[];
4128
- }) => void) | undefined;
4129
- } & React__default.RefAttributes<BladeElementRef>>;
4130
-
4131
- declare type IndicatorCommonProps = {
4132
- /**
4133
- * Sets the color tone
4134
- *
4135
- * @default neutral
4136
- */
4137
- intent?: Feedback;
4138
- /**
4139
- * Size of the indicator
4140
- *
4141
- * @default medium
4142
- */
4143
- size?: 'small' | 'medium' | 'large';
4144
- } & TestID & StyledPropsBlade;
4145
- declare type IndicatorWithoutA11yLabel = {
4146
- /**
4147
- * A text label to show alongside the indicator dot
4148
- */
4149
- children: StringChildrenType;
4150
- /**
4151
- * a11y label for screen readers
4152
- */
4153
- accessibilityLabel?: string;
4154
- };
4155
- declare type IndicatorWithA11yLabel = {
4156
- /**
4157
- * a11y label for screen readers
4158
- */
4159
- accessibilityLabel: string;
4160
- /**
4161
- * A text label to show alongside the indicator dot
4162
- */
4163
- children?: StringChildrenType;
4164
- };
4165
- declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
4166
- declare const Indicator: ({ accessibilityLabel, children, size, intent, testID, ...styledProps }: IndicatorProps) => ReactElement;
4167
-
4168
- declare type ListItemProps = {
4169
- /**
4170
- * Children to be rendered for ListItem. This can be a text, ListItemLink or another List.
4171
- *
4172
- */
4173
- children: React__default.ReactNode;
4174
- /**
4175
- * Icon to be rendered for a ListItem's bullet.
4176
- *
4177
- */
4178
- icon?: IconComponent;
4179
- /**
4180
- * This is a private prop to be used only for internal logic purposes.
4181
- *
4182
- */
4183
- _itemNumber?: undefined;
4184
- } & TestID;
4185
- declare const ListItem: ({ children, icon, _itemNumber, testID, }: ListItemProps) => React__default.ReactElement;
4186
-
4187
- declare type ListCommonProps = {
4188
- /**
4189
- * ListItem to be rendered for the List.
4190
- *
4191
- */
4192
- children: React__default.ReactElement<ListItemProps> | React__default.ReactElement<ListItemProps>[];
4193
- /**
4194
- * Sets the variant to be rendered for the List.
4195
- *
4196
- * @default 'unordered'
4197
- */
4198
- variant?: 'unordered' | 'ordered' | 'ordered-filled';
4199
- /**
4200
- * Sets the size for the List.
4201
- *
4202
- * @default 'medium'
4203
- */
4204
- size?: 'small' | 'medium';
4205
- } & TestID & StyledPropsBlade;
4206
- declare type ListWithIconProps = ListCommonProps & {
4207
- variant?: 'unordered';
4208
- icon?: IconComponent;
4209
- };
4210
- declare type ListWithoutIconProps = ListCommonProps & {
4211
- variant?: 'ordered' | 'ordered-filled';
4212
- icon?: undefined;
4213
- };
4214
- declare type ListProps = ListWithIconProps | ListWithoutIconProps;
4215
- declare const List: ({ variant, size, children, icon, testID, ...styledProps }: ListProps) => React__default.ReactElement;
4216
-
4217
- declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
4218
- declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
4219
-
4220
- declare type TitleProps = {
4221
- size?: 'small' | 'medium' | 'large' | 'xlarge';
4222
- contrast?: ColorContrastTypes;
4223
- type?: TextTypes;
4224
- children: StringChildrenType;
4225
- } & TestID & StyledPropsBlade;
4226
- declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
4227
-
4228
- declare type HeadingVariant = 'regular' | 'subheading';
4229
- declare type HeadingSize = 'small' | 'medium' | 'large';
4230
- declare type HeadingCommonProps = {
4231
- type?: TextTypes;
4232
- contrast?: ColorContrastTypes;
4233
- children: StringChildrenType;
4234
- } & TestID & StyledPropsBlade;
4235
- declare type HeadingNormalVariant = HeadingCommonProps & {
4236
- variant?: Exclude<HeadingVariant, 'subheading'>;
4237
- /**
4238
- *
4239
- * @default small
4240
- */
4241
- size?: HeadingSize;
4242
- weight?: keyof Theme$1['typography']['fonts']['weight'];
4243
- };
4244
- declare type HeadingSubHeadingVariant = HeadingCommonProps & {
4245
- variant?: Extract<HeadingVariant, 'subheading'>;
4246
- /**
4247
- * `size` cannot be used with variant="subheading". Either change to variant="regular" or remove size prop
4248
- */
4249
- size?: undefined;
4250
- weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'bold'>;
4251
- };
4252
- /**
4253
- * Conditionally changing props based on variant.
4254
- * Overloads or union gives wrong intellisense.
4255
- */
4256
- declare type HeadingProps<T> = T extends {
4257
- variant: infer Variant;
4258
- } ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
4259
- declare const Heading: <T extends {
4260
- variant: HeadingVariant;
4261
- }>({ variant, size, type, weight, contrast, children, testID, ...styledProps }: HeadingProps<T>) => ReactElement;
4262
-
4263
- declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
4264
- declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
4265
- declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
4266
- declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
4267
- declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
4268
- declare type BaseTextProps = {
4269
- id?: string;
4270
- color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
4271
- fontFamily?: keyof Theme$1['typography']['fonts']['family'];
4272
- fontSize?: keyof Theme$1['typography']['fonts']['size'];
4273
- fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
4274
- fontStyle?: 'italic' | 'normal';
4275
- textDecorationLine?: 'line-through' | 'none' | 'underline';
4276
- lineHeight?: keyof Theme$1['typography']['lineHeights'];
4277
- /**
4278
- * Web only
4279
- */
4280
- as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
4281
- textAlign?: 'center' | 'justify' | 'left' | 'right';
4282
- truncateAfterLines?: number;
4283
- className?: string;
4284
- style?: React.CSSProperties;
4285
- children: React.ReactNode;
4286
- accessibilityProps?: Partial<AccessibilityProps>;
4287
- /**
4288
- * React Native only
4289
- */
4290
- numberOfLines?: number;
4291
- componentName?: 'text' | 'title' | 'heading' | 'code';
4292
- } & TestID & StyledPropsBlade;
4293
-
4294
- declare type TextCommonProps = {
4295
- type?: TextTypes;
4296
- contrast?: ColorContrastTypes;
4297
- truncateAfterLines?: number;
4298
- children: React.ReactNode;
4299
- weight?: keyof Theme$1['typography']['fonts']['weight'];
4300
- /**
4301
- * **For Internal use only**: Sets the color of the Text component
4302
- */
4303
- color?: BaseTextProps['color'];
4304
- textAlign?: BaseTextProps['textAlign'];
4305
- } & TestID & StyledPropsBlade;
4306
- declare type TextVariant = 'body' | 'caption';
4307
- declare type TextBodyVariant = TextCommonProps & {
4308
- variant?: Extract<TextVariant, 'body'>;
4309
- size?: 'xsmall' | 'small' | 'medium' | 'large';
4310
- };
4311
- declare type TextCaptionVariant = TextCommonProps & {
4312
- variant?: Extract<TextVariant, 'caption'>;
4313
- size?: 'medium';
4314
- };
4315
- /**
4316
- * Conditionally changing props based on variant.
4317
- * Overloads or union gives wrong intellisense.
4318
- */
4319
- declare type TextProps<T> = T extends {
4320
- variant: infer Variant;
4321
- } ? Variant extends 'caption' ? TextCaptionVariant : Variant extends 'body' ? TextBodyVariant : T : T;
4322
- declare type TextForwardedAs = {
4323
- forwardedAs?: BaseTextProps['as'];
4324
- };
4325
- declare type GetTextPropsReturn = Omit<BaseTextProps, 'children'> & TextForwardedAs;
4326
- declare type GetTextProps<T extends {
4327
- variant: TextVariant;
4328
- }> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'testID' | 'textAlign'>;
4329
- declare const getTextProps: <T extends {
4330
- variant: TextVariant;
4331
- }>({ variant, type, weight, size, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
4332
- declare const Text: <T extends {
4333
- variant: TextVariant;
4334
- }>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, ...styledProps }: TextProps<T>) => ReactElement;
4335
-
4336
- declare type CodeProps = {
4337
- children: StringChildrenType;
4338
- /**
4339
- * Decides the fontSize and padding of Code
4340
- *
4341
- * @default small
4342
- */
4343
- size?: 'small' | 'medium';
4344
- weight?: 'regular' | 'bold';
4345
- } & TestID & StyledPropsBlade;
4346
- /**
4347
- * Code component can be used for displaying token, variable names, or inlined code snippets.
4348
- *
4349
- * ## Usage
4350
- *
4351
- * ### In Web
4352
- * In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
4353
- *
4354
- * ```tsx
4355
- * <Text>
4356
- * Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
4357
- * </Text>
4358
- * ```
4359
- *
4360
- * ### In React Native
4361
- *
4362
- * In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
4363
- *
4364
- * ```tsx
4365
- * <BaseBox flexWrap="wrap" flexDirection="row" alignItems="flex-start">
4366
- * <Text>Lorem ipsum </Text>
4367
- * <Code>SENTRY_TOKEN</Code>
4368
- * <Text> normal text</Text>
4369
- * </BaseBox>
4370
- * ```
4371
- */
4372
- declare const Code: ({ children, size, weight, testID, ...styledProps }: CodeProps) => JSX.Element;
4373
-
4374
- declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
4375
- declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;
4376
-
4377
- declare type Assertiveness = AriaAttributes['liveRegion'];
4378
-
4379
- /**
4380
- * Announces the message using screen reader technology.
4381
- */
4382
- declare function announce(message: string, assertiveness?: Assertiveness): void;
4383
- /**
4384
- * Stops all queued announcements.
4385
- */
4386
- declare function clearAnnouncer(assertiveness: Assertiveness): void;
4387
- /**
4388
- * Removes the announcer from the DOM.
4389
- */
4390
- declare function destroyAnnouncer(): void;
4391
-
4392
- declare type ProgressBarCommonProps = {
4393
- /**
4394
- * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.
4395
- */
4396
- accessibilityLabel?: string;
4397
- /**
4398
- * Sets the contrast for the progress bar
4399
- * @default 'low'
4400
- */
4401
- contrast?: ColorContrastTypes;
4402
- /**
4403
- * Sets the intent of the progress bar which changes the feedback color.
4404
- */
4405
- intent?: Feedback;
4406
- /**
4407
- * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
4408
- */
4409
- label?: string;
4410
- /**
4411
- * Sets the size of the progress bar.
4412
- * @default 'small'
4413
- */
4414
- size?: 'small' | 'medium';
4415
- /**
4416
- * Sets the progress value of the progress bar.
4417
- * @default 'small'
4418
- */
4419
- value?: number;
4420
- /**
4421
- * Sets the minimum value for the progress bar.
4422
- * @default 0
4423
- */
4424
- min?: number;
4425
- /**
4426
- * Sets the maximum value for the progress bar.
4427
- * @default 100
4428
- */
4429
- max?: number;
4430
- } & TestID & StyledPropsBlade;
4431
- declare type ProgressBarVariant = 'progress' | 'meter';
4432
- declare type ProgressBarProgressProps = ProgressBarCommonProps & {
4433
- /**
4434
- * Sets the variant to be rendered for the progress bar.
4435
- * @default 'progress'
4436
- */
4437
- variant?: Extract<ProgressBarVariant, 'progress'>;
4438
- /**
4439
- * Sets whether the progress bar is in an indeterminate state.
4440
- * @default false
4441
- */
4442
- isIndeterminate?: boolean;
4443
- /**
4444
- * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
4445
- * @default true
4446
- */
4447
- showPercentage?: boolean;
4448
- };
4449
- declare type ProgressBarMeterProps = ProgressBarCommonProps & {
4450
- /**
4451
- * Sets the variant to be rendered for thr progress bar.
4452
- * @default 'progress'
4453
- */
4454
- variant?: Extract<ProgressBarVariant, 'meter'>;
4455
- /**
4456
- * Sets whether the progress bar is in an indeterminate state.
4457
- * @default false
4458
- */
4459
- isIndeterminate?: undefined;
4460
- /**
4461
- * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.
4462
- * @default false
4463
- */
4464
- showPercentage?: undefined;
4465
- };
4466
- declare type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
4467
- declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
4468
-
4469
- declare type RadioProps = {
4470
- /**
4471
- * Sets the label text of the Radio
4472
- */
4473
- children: StringChildrenType;
4474
- /**
4475
- * Help text for the Radio
4476
- */
4477
- helpText?: string;
4478
- /**
4479
- * The value to be used in the Radio input.
4480
- * This is the value that will be returned on form submission.
4481
- */
4482
- value: string;
4483
- /**
4484
- * If `true`, the Radio will be disabled
4485
- *
4486
- * @default false
4487
- */
4488
- isDisabled?: boolean;
4489
- /**
4490
- * Size of the radios
4491
- *
4492
- * @default "medium"
4493
- */
4494
- size?: 'small' | 'medium';
4495
- } & TestID & StyledPropsBlade;
4496
- declare const Radio: React__default.ForwardRefExoticComponent<{
4497
- /**
4498
- * Sets the label text of the Radio
4499
- */
4500
- children: StringChildrenType;
4501
- /**
4502
- * Help text for the Radio
4503
- */
4504
- helpText?: string | undefined;
4505
- /**
4506
- * The value to be used in the Radio input.
4507
- * This is the value that will be returned on form submission.
4508
- */
4509
- value: string;
4510
- /**
4511
- * If `true`, the Radio will be disabled
4512
- *
4513
- * @default false
4514
- */
4515
- isDisabled?: boolean | undefined;
4516
- /**
4517
- * Size of the radios
4518
- *
4519
- * @default "medium"
4520
- */
4521
- size?: "small" | "medium" | undefined;
4522
- } & TestID & Partial<Omit<MakeObjectResponsive<{
4523
- margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
4524
- marginX: SpacingValueType;
4525
- marginY: SpacingValueType;
4526
- marginTop: SpacingValueType;
4527
- marginRight: SpacingValueType;
4528
- marginBottom: SpacingValueType;
4529
- marginLeft: SpacingValueType;
4530
- }> & Pick<MakeObjectResponsive<{
4531
- gap: SpacingValueType;
4532
- rowGap: SpacingValueType;
4533
- columnGap: SpacingValueType;
4534
- flex: string | number;
4535
- } & PickIfExist$1<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
4536
- __brand__?: "platform-web" | undefined;
4537
- }>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
4538
- top: SpacingValueType;
4539
- right: SpacingValueType;
4540
- bottom: SpacingValueType;
4541
- left: SpacingValueType;
4542
- } & PickIfExist$1<styled_components.CSSObject, "position" | "zIndex"> & {
4543
- __brand__?: "platform-web" | undefined;
4544
- }> & 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>>;
4545
-
4546
- declare type RadioGroupProps = {
4547
- /**
4548
- * Accepts multiple radios as children
4549
- */
4550
- children: React__default.ReactNode;
4551
- /**
4552
- * Help text of the radio group
4553
- */
4554
- helpText?: string;
4555
- /**
4556
- * Error text of the radio group
4557
- * Renders when `validationState` is set to 'error'
4558
- *
4559
- * Overrides helpText
4560
- */
4561
- errorText?: string;
4562
- /**
4563
- * Sets the error state of the radioGroup
4564
- * If set to `error` it will render the `errorText` of the group,
4565
- * and propagate `invalid` prop to every radio
4566
- */
4567
- validationState?: 'error' | 'none';
4568
- /**
4569
- * Renders a necessity indicator after radioGroup label
4570
- *
4571
- * If set to `undefined` it renders nothing.
4572
- */
4573
- necessityIndicator?: 'required' | 'optional' | 'none';
4574
- /**
4575
- * Sets the disabled state of the radioGroup
4576
- * If set to `true` it propagate down to all the radios
4577
- *
4578
- * @default false
4579
- */
4580
- isDisabled?: boolean;
4581
- /**
4582
- * Renders the label of the radio group
4583
- */
4584
- label: string;
4585
- /**
4586
- * Sets the position of the label
4587
- *
4588
- * @default 'top'
4589
- */
4590
- labelPosition?: 'top' | 'left';
4591
- /**
4592
- * Initial value of the radio group
4593
- */
4594
- defaultValue?: string;
4595
- /**
4596
- * value of the radio group
4597
- *
4598
- * Use `onChange` to update its value
4599
- */
4600
- value?: string;
4601
- /**
4602
- * The callback invoked when any of the radio's state changes
4603
- */
4604
- onChange?: ({ name, value }: {
4605
- name: string | undefined;
4606
- value: string;
4607
- }) => void;
4608
- /**
4609
- * The name of the input field in a radio
4610
- * (Useful for form submission).
4611
- */
4612
- name?: string;
4613
- /**
4614
- * Size of the radios
4615
- *
4616
- * @default "medium"
4617
- */
4618
- size?: 'small' | 'medium';
4619
- } & TestID & StyledPropsBlade;
4620
- declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
4621
-
4622
- declare type BaseSpinnerProps = {
4623
- intent?: Feedback;
4624
- /**
4625
- * Sets the label of the spinner.
4626
- *
4627
- * @default 'right'
4628
- */
4629
- label?: string;
4630
- /**
4631
- * Sets the label of the spinner.
4632
- *
4633
- */
4634
- labelPosition?: 'right' | 'bottom';
4635
- /**
4636
- * Sets the contrast of the spinner.
4637
- *
4638
- * @default 'low'
4639
- */
4640
- contrast?: ColorContrastTypes;
4641
- /**
4642
- * Sets the size of the spinner.
4643
- *
4644
- * @default 'medium'
4645
- */
4646
- size?: 'medium' | 'large' | 'xlarge';
4647
- /**
4648
- * Sets the aria-label for web & accessibilityLabel react-native.
4649
- *
4650
- */
4651
- accessibilityLabel: string;
4652
- } & TestID & StyledPropsBlade;
4653
-
4654
- declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'>;
4655
- declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
4656
-
4657
- declare type SkipNavLinkProps = {
4658
- id?: string;
4659
- children?: StringChildrenType;
4660
- };
4661
- declare const SkipNavLink: ({ id, children, }: SkipNavLinkProps) => JSX.Element;
4662
- declare type SkipNavContentProps = {
4663
- id?: string;
4664
- } & TestID;
4665
- declare const SkipNavContent: ({ id, testID, }: SkipNavContentProps) => JSX.Element;
4666
-
4667
- declare type VisuallyHiddenProps = {
4668
- children: React.ReactNode;
4669
- } & TestID;
4670
-
4671
- declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => JSX.Element;
4672
-
4673
- /**
4674
- * Screen reader class adapted from webaim
4675
- * https://webaim.org/techniques/css/invisiblecontent/#techniques
4676
- */
4677
- declare const screenReaderStyles: CSSObject;
4678
-
4679
- declare type Currency = 'INR' | 'MYR';
4680
- declare type AmountProps = {
4681
- /**
4682
- * The value to be rendered within the component.
4683
- *
4684
- */
4685
- value: number;
4686
- /**
4687
- * Sets the intent of the amount.
4688
- *
4689
- * @default undefined
4690
- */
4691
- intent?: Exclude<Feedback, 'neutral'>;
4692
- /**
4693
- * Sets the size of the amount.
4694
- *
4695
- * @default 'body-medium'
4696
- */
4697
- 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';
4698
- /**
4699
- * Indicates what the suffix of amount should be
4700
- *
4701
- * @default 'decimals'
4702
- */
4703
- suffix?: 'decimals' | 'none' | 'humanize';
4704
- /**
4705
- * Makes the prefix symbol and decimal digits small and faded
4706
- *
4707
- * @default true
4708
- */
4709
- isAffixSubtle?: true | false;
4710
- /**
4711
- * Prefix to be shown before the amount value. The prefix can be either a currency symbol or a currency code.
4712
- *
4713
- * @default 'currency-symbol'
4714
- */
4715
- prefix?: 'currency-symbol' | 'currency-code';
4716
- /**
4717
- * The currency of the amount.
4718
- *
4719
- * @default 'INR'
4720
- * */
4721
- currency?: Currency;
4722
- } & TestID & StyledPropsBlade;
4723
- declare const Amount: ({ value, suffix, size, isAffixSubtle, intent, prefix, testID, currency, ...styledProps }: AmountProps) => ReactElement;
4724
-
4725
- declare type BaseHeaderProps = {
4726
- title?: string;
4727
- subtitle?: string;
4728
- /**
4729
- * Leading part of the header placed at the left most side of the header
4730
- */
4731
- leading?: React__default.ReactNode;
4732
- /**
4733
- * Trailing part of the header placed at the right most side of the header
4734
- */
4735
- trailing?: React__default.ReactNode;
4736
- /**
4737
- * Placed adjacent to the title text
4738
- */
4739
- titleSuffix?: React__default.ReactNode;
4740
- /**
4741
- * @default true
4742
- */
4743
- showDivider?: boolean;
4744
- /**
4745
- * @default false
4746
- */
4747
- showBackButton?: boolean;
4748
- /**
4749
- * @default true
4750
- */
4751
- showCloseButton?: boolean;
4752
- onCloseButtonClick?: () => void;
4753
- onBackButtonClick?: () => void;
4754
- closeButtonRef: React__default.MutableRefObject<any>;
4755
- } & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'>;
4756
-
4757
- declare type BaseFooterProps$1 = {
4758
- children: React__default.ReactNode;
4759
- showDivider?: boolean;
4760
- };
4761
-
4762
- declare type SnapPoints = [number, number, number];
4763
-
4764
- declare type BottomSheetProps = {
4765
- children: React.ReactNode;
4766
- snapPoints?: SnapPoints;
4767
- onDismiss?: () => void;
4768
- isOpen?: boolean;
4769
- initialFocusRef?: React.MutableRefObject<any>;
4770
- };
4771
- declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'showBackButton' | 'onBackButtonClick'>;
4772
- declare type BottomSheetFooterProps = Pick<BaseFooterProps$1, 'children'>;
4773
-
4774
- declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, }: BottomSheetHeaderProps) => React__default.ReactElement;
4775
-
4776
- type BaseFooterProps = {
4777
- children: React__default.ReactNode;
4778
- showDivider?: boolean;
4779
- };
4780
-
4781
- declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__default.ReactElement;
4782
-
4783
- declare const BottomSheetBody: ({ children }: {
4784
- children: React__default.ReactNode;
4785
- }) => React__default.ReactElement;
4786
-
4787
- declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, }: BottomSheetProps) => React__default.ReactElement;
4788
-
4789
- 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 };