@razorpay/blade 6.0.4 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/build/components/index.d.ts +251 -150
- package/build/components/index.native.d.ts +251 -150
- package/build/components/index.native.js +34 -12
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.web.js +806 -206
- package/build/components/index.web.js.map +1 -1
- package/build/css/bankingThemeDarkDesktop.css +1 -1
- package/build/css/bankingThemeDarkMobile.css +1 -1
- package/build/css/bankingThemeLightDesktop.css +1 -1
- package/build/css/bankingThemeLightMobile.css +1 -1
- package/build/css/paymentThemeDarkDesktop.css +1 -1
- package/build/css/paymentThemeDarkMobile.css +1 -1
- package/build/css/paymentThemeLightDesktop.css +1 -1
- package/build/css/paymentThemeLightMobile.css +1 -1
- package/build/tokens/index.native.js.map +1 -1
- package/build/utils/index.d.ts +2 -0
- package/build/utils/index.native.d.ts +2 -0
- package/build/utils/index.native.js +2 -2
- package/build/utils/index.native.js.map +1 -1
- package/build/utils/index.web.js +2 -0
- package/build/utils/index.web.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @razorpay/blade
|
|
2
2
|
|
|
3
|
+
## 6.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- aff735ba: feat: add `List`, `ListItem`, `ListItemLink` & `ListItemCode` components
|
|
8
|
+
|
|
9
|
+
## 6.0.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 38e8e6d0: chore(OTPInput): add `autoCompleteSuggestionType` prop and disable password manager with `isMasked`
|
|
14
|
+
|
|
15
|
+
We wanted to disable the password managers for OTPInput when `isMasked` is set. The straightforward way to do this is set autocomplete='off' (i.e autoCompleteSuggestionType='none'). The issue with autocomplete is that its not an enforcement but a suggestion to the browser to follow. Safari mostly adheres to it but Chrome and Firefox ignores it and shows the password managers anyway. We decided on a workaround to unset `type` on first render and set it to `password` once a value is entered. This way the password managers won't make any suggestions when the user is on an empty OTP input field.
|
|
16
|
+
|
|
3
17
|
## 6.0.4
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -2446,6 +2446,20 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
|
|
|
2446
2446
|
* Masks input characters in all the fields
|
|
2447
2447
|
*/
|
|
2448
2448
|
isMasked?: boolean;
|
|
2449
|
+
/**
|
|
2450
|
+
* Determines what autoComplete suggestion type to show. Defaults to `oneTimeCode`.
|
|
2451
|
+
*
|
|
2452
|
+
* It's not recommended to turn this off in favor of otp input practices.
|
|
2453
|
+
*
|
|
2454
|
+
*
|
|
2455
|
+
* Internally it'll render platform specific attributes:
|
|
2456
|
+
*
|
|
2457
|
+
* - web: `autocomplete`
|
|
2458
|
+
* - iOS: `textContentType`
|
|
2459
|
+
* - android: `autoComplete`
|
|
2460
|
+
*
|
|
2461
|
+
*/
|
|
2462
|
+
autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
|
|
2449
2463
|
};
|
|
2450
2464
|
/**
|
|
2451
2465
|
* OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
|
|
@@ -2461,7 +2475,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
|
|
|
2461
2475
|
* />
|
|
2462
2476
|
* ```
|
|
2463
2477
|
*/
|
|
2464
|
-
declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, }: OTPInputProps) => React__default.ReactElement;
|
|
2478
|
+
declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, }: OTPInputProps) => React__default.ReactElement;
|
|
2465
2479
|
|
|
2466
2480
|
declare type IndicatorCommonProps = {
|
|
2467
2481
|
/**
|
|
@@ -2500,6 +2514,241 @@ declare type IndicatorWithA11yLabel = {
|
|
|
2500
2514
|
declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
|
|
2501
2515
|
declare const Indicator: ({ accessibilityLabel, children, size, intent, }: IndicatorProps) => ReactElement;
|
|
2502
2516
|
|
|
2517
|
+
declare type ListItemProps = {
|
|
2518
|
+
/**
|
|
2519
|
+
* Children to be rendered for ListItem. This can be a text, ListItemLink or another List.
|
|
2520
|
+
*
|
|
2521
|
+
*/
|
|
2522
|
+
children: React__default.ReactNode;
|
|
2523
|
+
/**
|
|
2524
|
+
* Icon to be rendered for a ListItem's bullet.
|
|
2525
|
+
*
|
|
2526
|
+
*/
|
|
2527
|
+
icon?: IconComponent;
|
|
2528
|
+
/**
|
|
2529
|
+
* This is a private prop to be used only for internal logic purposes.
|
|
2530
|
+
*
|
|
2531
|
+
*/
|
|
2532
|
+
_itemNumber?: undefined;
|
|
2533
|
+
};
|
|
2534
|
+
declare const ListItem: {
|
|
2535
|
+
({ children, icon, _itemNumber }: ListItemProps): React__default.ReactElement;
|
|
2536
|
+
componentId: string;
|
|
2537
|
+
};
|
|
2538
|
+
|
|
2539
|
+
declare type ListCommonProps = {
|
|
2540
|
+
/**
|
|
2541
|
+
* ListItem to be rendered for the List.
|
|
2542
|
+
*
|
|
2543
|
+
*/
|
|
2544
|
+
children: React__default.ReactElement<ListItemProps> | React__default.ReactElement<ListItemProps>[];
|
|
2545
|
+
/**
|
|
2546
|
+
* Sets the variant to be rendered for the List.
|
|
2547
|
+
*
|
|
2548
|
+
* @default 'unordered'
|
|
2549
|
+
*/
|
|
2550
|
+
variant?: 'unordered' | 'ordered' | 'ordered-filled';
|
|
2551
|
+
/**
|
|
2552
|
+
* Sets the size for the List.
|
|
2553
|
+
*
|
|
2554
|
+
* @default 'medium'
|
|
2555
|
+
*/
|
|
2556
|
+
size?: 'small' | 'medium';
|
|
2557
|
+
};
|
|
2558
|
+
declare type ListWithIconProps = ListCommonProps & {
|
|
2559
|
+
variant?: 'unordered';
|
|
2560
|
+
icon?: IconComponent;
|
|
2561
|
+
};
|
|
2562
|
+
declare type ListWithoutIconProps = ListCommonProps & {
|
|
2563
|
+
variant?: 'ordered' | 'ordered-filled';
|
|
2564
|
+
icon?: undefined;
|
|
2565
|
+
};
|
|
2566
|
+
declare type ListProps = ListWithIconProps | ListWithoutIconProps;
|
|
2567
|
+
/**
|
|
2568
|
+
* List Component is used to display a set of related items that are composed of text/links. Each list item begins with a bullet or a number.
|
|
2569
|
+
*
|
|
2570
|
+
* ## Usage
|
|
2571
|
+
*
|
|
2572
|
+
* ```tsx
|
|
2573
|
+
* <List
|
|
2574
|
+
* variant='unordered'
|
|
2575
|
+
* size='medium'
|
|
2576
|
+
* >
|
|
2577
|
+
* <ListItem>
|
|
2578
|
+
* Item 1
|
|
2579
|
+
* <List>
|
|
2580
|
+
* <ListItem>Item 1.1</ListItem>
|
|
2581
|
+
* </List>
|
|
2582
|
+
* </ListItem>
|
|
2583
|
+
* <ListItem>Item 2</ListItem>
|
|
2584
|
+
* <List />
|
|
2585
|
+
* ```
|
|
2586
|
+
*/
|
|
2587
|
+
declare const List: {
|
|
2588
|
+
({ variant, size, children, icon }: ListProps): React__default.ReactElement;
|
|
2589
|
+
componentId: string;
|
|
2590
|
+
};
|
|
2591
|
+
|
|
2592
|
+
declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
|
|
2593
|
+
declare const ListItemLink: {
|
|
2594
|
+
({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, }: ListItemLinkProps): React.ReactElement;
|
|
2595
|
+
componentId: string;
|
|
2596
|
+
};
|
|
2597
|
+
|
|
2598
|
+
declare type TitleProps = {
|
|
2599
|
+
size?: 'small' | 'medium' | 'large';
|
|
2600
|
+
contrast?: ColorContrastTypes;
|
|
2601
|
+
type?: TextTypes;
|
|
2602
|
+
children: string;
|
|
2603
|
+
};
|
|
2604
|
+
declare const Title: ({ size, type, contrast, children, }: TitleProps) => ReactElement;
|
|
2605
|
+
|
|
2606
|
+
declare type HeadingVariant = 'regular' | 'subheading';
|
|
2607
|
+
declare type HeadingSize = 'small' | 'medium' | 'large';
|
|
2608
|
+
declare type HeadingCommonProps = {
|
|
2609
|
+
type?: TextTypes;
|
|
2610
|
+
contrast?: ColorContrastTypes;
|
|
2611
|
+
children: string;
|
|
2612
|
+
};
|
|
2613
|
+
declare type HeadingNormalVariant = HeadingCommonProps & {
|
|
2614
|
+
variant?: Exclude<HeadingVariant, 'subheading'>;
|
|
2615
|
+
/**
|
|
2616
|
+
*
|
|
2617
|
+
* @default small
|
|
2618
|
+
*/
|
|
2619
|
+
size?: HeadingSize;
|
|
2620
|
+
weight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
2621
|
+
};
|
|
2622
|
+
declare type HeadingSubHeadingVariant = HeadingCommonProps & {
|
|
2623
|
+
variant?: Extract<HeadingVariant, 'subheading'>;
|
|
2624
|
+
/**
|
|
2625
|
+
* `size` cannot be used with variant="subheading". Either change to variant="regular" or remove size prop
|
|
2626
|
+
*/
|
|
2627
|
+
size?: undefined;
|
|
2628
|
+
weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'bold'>;
|
|
2629
|
+
};
|
|
2630
|
+
/**
|
|
2631
|
+
* Conditionally changing props based on variant.
|
|
2632
|
+
* Overloads or union gives wrong intellisense.
|
|
2633
|
+
*/
|
|
2634
|
+
declare type HeadingProps<T> = T extends {
|
|
2635
|
+
variant: infer Variant;
|
|
2636
|
+
} ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
|
|
2637
|
+
declare const Heading: <T extends {
|
|
2638
|
+
variant: HeadingVariant;
|
|
2639
|
+
}>({ variant, size, type, weight, contrast, children, }: HeadingProps<T>) => ReactElement;
|
|
2640
|
+
|
|
2641
|
+
declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
|
|
2642
|
+
declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
|
|
2643
|
+
declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
|
|
2644
|
+
declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
|
|
2645
|
+
declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
|
|
2646
|
+
declare type BaseTextProps = {
|
|
2647
|
+
id?: string;
|
|
2648
|
+
color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
|
|
2649
|
+
fontFamily?: keyof Theme$1['typography']['fonts']['family'];
|
|
2650
|
+
fontSize?: keyof Theme$1['typography']['fonts']['size'];
|
|
2651
|
+
fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
2652
|
+
fontStyle?: 'italic' | 'normal';
|
|
2653
|
+
textDecorationLine?: 'line-through' | 'none' | 'underline';
|
|
2654
|
+
lineHeight?: keyof Theme$1['typography']['lineHeights'];
|
|
2655
|
+
/**
|
|
2656
|
+
* Web only
|
|
2657
|
+
*/
|
|
2658
|
+
as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
|
|
2659
|
+
textAlign?: 'center' | 'justify' | 'left' | 'right';
|
|
2660
|
+
truncateAfterLines?: number;
|
|
2661
|
+
className?: string;
|
|
2662
|
+
style?: React.CSSProperties;
|
|
2663
|
+
children: React.ReactNode;
|
|
2664
|
+
accessibilityProps?: Partial<AccessibilityProps>;
|
|
2665
|
+
/**
|
|
2666
|
+
* React Native only
|
|
2667
|
+
*/
|
|
2668
|
+
numberOfLines?: number;
|
|
2669
|
+
componentName?: 'text' | 'title' | 'heading' | 'code';
|
|
2670
|
+
};
|
|
2671
|
+
|
|
2672
|
+
declare type TextCommonProps = {
|
|
2673
|
+
type?: TextTypes;
|
|
2674
|
+
contrast?: ColorContrastTypes;
|
|
2675
|
+
truncateAfterLines?: number;
|
|
2676
|
+
children: React.ReactNode;
|
|
2677
|
+
weight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
2678
|
+
/**
|
|
2679
|
+
* **For Internal use only**: Sets the color of the Text component
|
|
2680
|
+
*/
|
|
2681
|
+
color?: BaseTextProps['color'];
|
|
2682
|
+
};
|
|
2683
|
+
declare type TextVariant = 'body' | 'caption';
|
|
2684
|
+
declare type TextBodyVariant = TextCommonProps & {
|
|
2685
|
+
variant?: Extract<TextVariant, 'body'>;
|
|
2686
|
+
size?: 'xsmall' | 'small' | 'medium';
|
|
2687
|
+
};
|
|
2688
|
+
declare type TextCaptionVariant = TextCommonProps & {
|
|
2689
|
+
variant?: Extract<TextVariant, 'caption'>;
|
|
2690
|
+
size?: 'medium';
|
|
2691
|
+
};
|
|
2692
|
+
/**
|
|
2693
|
+
* Conditionally changing props based on variant.
|
|
2694
|
+
* Overloads or union gives wrong intellisense.
|
|
2695
|
+
*/
|
|
2696
|
+
declare type TextProps<T> = T extends {
|
|
2697
|
+
variant: infer Variant;
|
|
2698
|
+
} ? Variant extends 'caption' ? TextCaptionVariant : Variant extends 'body' ? TextBodyVariant : T : T;
|
|
2699
|
+
declare type TextForwardedAs = {
|
|
2700
|
+
forwardedAs?: BaseTextProps['as'];
|
|
2701
|
+
};
|
|
2702
|
+
declare const getTextProps: <T extends {
|
|
2703
|
+
variant: TextVariant;
|
|
2704
|
+
}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "size" | "variant" | "type" | "weight" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
|
|
2705
|
+
declare const Text: <T extends {
|
|
2706
|
+
variant: TextVariant;
|
|
2707
|
+
}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
|
|
2708
|
+
|
|
2709
|
+
declare type CodeProps = {
|
|
2710
|
+
children: string;
|
|
2711
|
+
/**
|
|
2712
|
+
* Decides the fontSize and padding of Code
|
|
2713
|
+
*
|
|
2714
|
+
* @default small
|
|
2715
|
+
*/
|
|
2716
|
+
size?: 'small' | 'medium';
|
|
2717
|
+
};
|
|
2718
|
+
/**
|
|
2719
|
+
* Code component can be used for displaying token, variable names, or inlined code snippets.
|
|
2720
|
+
*
|
|
2721
|
+
* ## Usage
|
|
2722
|
+
*
|
|
2723
|
+
* ### In Web
|
|
2724
|
+
* In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
|
|
2725
|
+
*
|
|
2726
|
+
* ```tsx
|
|
2727
|
+
* <Text>
|
|
2728
|
+
* Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
|
|
2729
|
+
* </Text>
|
|
2730
|
+
* ```
|
|
2731
|
+
*
|
|
2732
|
+
* ### In React Native
|
|
2733
|
+
*
|
|
2734
|
+
* In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
|
|
2735
|
+
*
|
|
2736
|
+
* ```tsx
|
|
2737
|
+
* <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
|
|
2738
|
+
* <Text>Lorem ipsum </Text>
|
|
2739
|
+
* <Code>SENTRY_TOKEN</Code>
|
|
2740
|
+
* <Text> normal text</Text>
|
|
2741
|
+
* </Box>
|
|
2742
|
+
* ```
|
|
2743
|
+
*/
|
|
2744
|
+
declare const Code: ({ children, size }: CodeProps) => JSX.Element;
|
|
2745
|
+
|
|
2746
|
+
declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
|
|
2747
|
+
declare const ListItemCode: {
|
|
2748
|
+
({ children }: ListItemCodeProps): React.ReactElement;
|
|
2749
|
+
componentId: string;
|
|
2750
|
+
};
|
|
2751
|
+
|
|
2503
2752
|
declare type Assertiveness = AriaAttributes['liveRegion'];
|
|
2504
2753
|
|
|
2505
2754
|
/**
|
|
@@ -2742,154 +2991,6 @@ declare type SkipNavContentProps = {
|
|
|
2742
2991
|
};
|
|
2743
2992
|
declare const SkipNavContent: ({ id }: SkipNavContentProps) => JSX.Element;
|
|
2744
2993
|
|
|
2745
|
-
declare type TitleProps = {
|
|
2746
|
-
size?: 'small' | 'medium' | 'large';
|
|
2747
|
-
contrast?: ColorContrastTypes;
|
|
2748
|
-
type?: TextTypes;
|
|
2749
|
-
children: string;
|
|
2750
|
-
};
|
|
2751
|
-
declare const Title: ({ size, type, contrast, children, }: TitleProps) => ReactElement;
|
|
2752
|
-
|
|
2753
|
-
declare type HeadingVariant = 'regular' | 'subheading';
|
|
2754
|
-
declare type HeadingSize = 'small' | 'medium' | 'large';
|
|
2755
|
-
declare type HeadingCommonProps = {
|
|
2756
|
-
type?: TextTypes;
|
|
2757
|
-
contrast?: ColorContrastTypes;
|
|
2758
|
-
children: string;
|
|
2759
|
-
};
|
|
2760
|
-
declare type HeadingNormalVariant = HeadingCommonProps & {
|
|
2761
|
-
variant?: Exclude<HeadingVariant, 'subheading'>;
|
|
2762
|
-
/**
|
|
2763
|
-
*
|
|
2764
|
-
* @default small
|
|
2765
|
-
*/
|
|
2766
|
-
size?: HeadingSize;
|
|
2767
|
-
weight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
2768
|
-
};
|
|
2769
|
-
declare type HeadingSubHeadingVariant = HeadingCommonProps & {
|
|
2770
|
-
variant?: Extract<HeadingVariant, 'subheading'>;
|
|
2771
|
-
/**
|
|
2772
|
-
* `size` cannot be used with variant="subheading". Either change to variant="regular" or remove size prop
|
|
2773
|
-
*/
|
|
2774
|
-
size?: undefined;
|
|
2775
|
-
weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'bold'>;
|
|
2776
|
-
};
|
|
2777
|
-
/**
|
|
2778
|
-
* Conditionally changing props based on variant.
|
|
2779
|
-
* Overloads or union gives wrong intellisense.
|
|
2780
|
-
*/
|
|
2781
|
-
declare type HeadingProps<T> = T extends {
|
|
2782
|
-
variant: infer Variant;
|
|
2783
|
-
} ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
|
|
2784
|
-
declare const Heading: <T extends {
|
|
2785
|
-
variant: HeadingVariant;
|
|
2786
|
-
}>({ variant, size, type, weight, contrast, children, }: HeadingProps<T>) => ReactElement;
|
|
2787
|
-
|
|
2788
|
-
declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
|
|
2789
|
-
declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
|
|
2790
|
-
declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
|
|
2791
|
-
declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
|
|
2792
|
-
declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
|
|
2793
|
-
declare type BaseTextProps = {
|
|
2794
|
-
id?: string;
|
|
2795
|
-
color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
|
|
2796
|
-
fontFamily?: keyof Theme$1['typography']['fonts']['family'];
|
|
2797
|
-
fontSize?: keyof Theme$1['typography']['fonts']['size'];
|
|
2798
|
-
fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
2799
|
-
fontStyle?: 'italic' | 'normal';
|
|
2800
|
-
textDecorationLine?: 'line-through' | 'none' | 'underline';
|
|
2801
|
-
lineHeight?: keyof Theme$1['typography']['lineHeights'];
|
|
2802
|
-
/**
|
|
2803
|
-
* Web only
|
|
2804
|
-
*/
|
|
2805
|
-
as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
|
|
2806
|
-
textAlign?: 'center' | 'justify' | 'left' | 'right';
|
|
2807
|
-
truncateAfterLines?: number;
|
|
2808
|
-
className?: string;
|
|
2809
|
-
style?: React.CSSProperties;
|
|
2810
|
-
children: React.ReactNode;
|
|
2811
|
-
accessibilityProps?: Partial<AccessibilityProps>;
|
|
2812
|
-
/**
|
|
2813
|
-
* React Native only
|
|
2814
|
-
*/
|
|
2815
|
-
numberOfLines?: number;
|
|
2816
|
-
componentName?: 'text' | 'title' | 'heading' | 'code';
|
|
2817
|
-
};
|
|
2818
|
-
|
|
2819
|
-
declare type TextCommonProps = {
|
|
2820
|
-
type?: TextTypes;
|
|
2821
|
-
contrast?: ColorContrastTypes;
|
|
2822
|
-
truncateAfterLines?: number;
|
|
2823
|
-
children: React.ReactNode;
|
|
2824
|
-
weight?: keyof Theme$1['typography']['fonts']['weight'];
|
|
2825
|
-
/**
|
|
2826
|
-
* **For Internal use only**: Sets the color of the Text component
|
|
2827
|
-
*/
|
|
2828
|
-
color?: BaseTextProps['color'];
|
|
2829
|
-
};
|
|
2830
|
-
declare type TextVariant = 'body' | 'caption';
|
|
2831
|
-
declare type TextBodyVariant = TextCommonProps & {
|
|
2832
|
-
variant?: Extract<TextVariant, 'body'>;
|
|
2833
|
-
size?: 'xsmall' | 'small' | 'medium';
|
|
2834
|
-
};
|
|
2835
|
-
declare type TextCaptionVariant = TextCommonProps & {
|
|
2836
|
-
variant?: Extract<TextVariant, 'caption'>;
|
|
2837
|
-
size?: 'medium';
|
|
2838
|
-
};
|
|
2839
|
-
/**
|
|
2840
|
-
* Conditionally changing props based on variant.
|
|
2841
|
-
* Overloads or union gives wrong intellisense.
|
|
2842
|
-
*/
|
|
2843
|
-
declare type TextProps<T> = T extends {
|
|
2844
|
-
variant: infer Variant;
|
|
2845
|
-
} ? Variant extends 'caption' ? TextCaptionVariant : Variant extends 'body' ? TextBodyVariant : T : T;
|
|
2846
|
-
declare type TextForwardedAs = {
|
|
2847
|
-
forwardedAs?: BaseTextProps['as'];
|
|
2848
|
-
};
|
|
2849
|
-
declare const getTextProps: <T extends {
|
|
2850
|
-
variant: TextVariant;
|
|
2851
|
-
}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "size" | "variant" | "type" | "weight" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
|
|
2852
|
-
declare const Text: <T extends {
|
|
2853
|
-
variant: TextVariant;
|
|
2854
|
-
}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
|
|
2855
|
-
|
|
2856
|
-
declare type CodeProps = {
|
|
2857
|
-
children: string;
|
|
2858
|
-
/**
|
|
2859
|
-
* Decides the fontSize and padding of Code
|
|
2860
|
-
*
|
|
2861
|
-
* @default small
|
|
2862
|
-
*/
|
|
2863
|
-
size?: 'small' | 'medium';
|
|
2864
|
-
};
|
|
2865
|
-
/**
|
|
2866
|
-
* Code component can be used for displaying token, variable names, or inlined code snippets.
|
|
2867
|
-
*
|
|
2868
|
-
* ## Usage
|
|
2869
|
-
*
|
|
2870
|
-
* ### In Web
|
|
2871
|
-
* In web, you can use it inside `Text` component or individually. The component is set to display `inline-block`
|
|
2872
|
-
*
|
|
2873
|
-
* ```tsx
|
|
2874
|
-
* <Text>
|
|
2875
|
-
* Lorem ipsum <Code>SENTRY_TOKEN</Code> normal text
|
|
2876
|
-
* </Text>
|
|
2877
|
-
* ```
|
|
2878
|
-
*
|
|
2879
|
-
* ### In React Native
|
|
2880
|
-
*
|
|
2881
|
-
* In React Native, you would have to align it using flex to make sure the Code and the surrounding text is correctly aligned
|
|
2882
|
-
*
|
|
2883
|
-
* ```tsx
|
|
2884
|
-
* <Box flexWrap="wrap" flexDirection="row" alignItems="flex-start">
|
|
2885
|
-
* <Text>Lorem ipsum </Text>
|
|
2886
|
-
* <Code>SENTRY_TOKEN</Code>
|
|
2887
|
-
* <Text> normal text</Text>
|
|
2888
|
-
* </Box>
|
|
2889
|
-
* ```
|
|
2890
|
-
*/
|
|
2891
|
-
declare const Code: ({ children, size }: CodeProps) => JSX.Element;
|
|
2892
|
-
|
|
2893
2994
|
declare type VisuallyHiddenProps = {
|
|
2894
2995
|
children: React.ReactNode;
|
|
2895
2996
|
};
|
|
@@ -2898,4 +2999,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
|
|
|
2898
2999
|
|
|
2899
3000
|
declare const screenReaderStyles: CSSObject;
|
|
2900
3001
|
|
|
2901
|
-
export { ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, 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, BoxIcon, BriefcaseIcon, 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, 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, ListIcon, 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, 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, useTheme };
|
|
3002
|
+
export { ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, 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, BoxIcon, BriefcaseIcon, 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, 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, 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, useTheme };
|