@razorpay/blade 8.4.1 → 8.6.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.
@@ -2172,7 +2172,7 @@ declare type LayoutProps = MakeObjectResponsive<{
2172
2172
  width: SpacingValueType;
2173
2173
  minWidth: SpacingValueType;
2174
2174
  maxWidth: SpacingValueType;
2175
- } & PickCSSByPlatform$1<'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
2175
+ } & PickCSSByPlatform$1<'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign'>>;
2176
2176
  declare type FlexboxProps = MakeObjectResponsive<{
2177
2177
  /**
2178
2178
  * This uses the native gap property which might not work on older browsers.
@@ -2212,7 +2212,7 @@ declare type GridProps = MakeObjectResponsive<PickCSSByPlatform$1<'grid' | 'grid
2212
2212
  declare type ColorObjects = 'feedback' | 'surface' | 'action';
2213
2213
  declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
2214
2214
  declare type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<Theme$1['colors'][T]['border']>}`;
2215
- declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span"];
2215
+ declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span", "label"];
2216
2216
  declare type BoxAsType = typeof validBoxAsValues[number];
2217
2217
  declare type BoxVisualProps = MakeObjectResponsive<{
2218
2218
  backgroundColor: BackgroundColorString<'surface'>;
@@ -2298,7 +2298,7 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<MakeObjectRe
2298
2298
  width: SpacingValueType;
2299
2299
  minWidth: SpacingValueType;
2300
2300
  maxWidth: SpacingValueType;
2301
- } & PickIfExist$1<styled_components.CSSObject, "display" | "overflowX" | "overflowY" | "overflow"> & {
2301
+ } & PickIfExist$1<styled_components.CSSObject, "display" | "overflowX" | "overflowY" | "textAlign" | "overflow"> & {
2302
2302
  __brand__?: "platform-web" | undefined;
2303
2303
  }> & MakeObjectResponsive<{
2304
2304
  gap: SpacingValueType;
@@ -2337,7 +2337,7 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<MakeObjectRe
2337
2337
  borderBottomRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
2338
2338
  borderBottomLeftRadius: "none" | "small" | "medium" | "large" | "max" | "round";
2339
2339
  }> & {
2340
- as: "header" | "main" | "aside" | "div" | "footer" | "nav" | "section" | "span";
2340
+ as: "header" | "main" | "label" | "aside" | "div" | "footer" | "nav" | "section" | "span";
2341
2341
  } & {
2342
2342
  children?: React__default.ReactNode | React__default.ReactNode[];
2343
2343
  } & TestID> & React__default.RefAttributes<BoxRefType>>;
@@ -2405,6 +2405,74 @@ declare type CardBodyProps = {
2405
2405
  } & TestID;
2406
2406
  declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
2407
2407
 
2408
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2409
+
2410
+
2411
+ type BladeElementRef = Platform.Select<{
2412
+ web: Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
2413
+ native: React.MutableRefObject<any>;
2414
+ }>;
2415
+
2416
+ declare type BaseLinkCommonProps = {
2417
+ intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
2418
+ contrast?: 'low' | 'high';
2419
+ icon?: IconComponent$1;
2420
+ iconPosition?: 'left' | 'right';
2421
+ onClick?: (event: SyntheticEvent) => void;
2422
+ onBlur?: Platform.Select<{
2423
+ native: (event: GestureResponderEvent) => void;
2424
+ web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
2425
+ }>;
2426
+ onKeyDown?: Platform.Select<{
2427
+ native: (event: GestureResponderEvent) => void;
2428
+ web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
2429
+ }>;
2430
+ accessibilityLabel?: string;
2431
+ /**
2432
+ * Sets the size of the link
2433
+ *
2434
+ * @default medium
2435
+ */
2436
+ size?: 'xsmall' | 'small' | 'medium' | 'large';
2437
+ /**
2438
+ * Defines how far your touch can start away from the link. This is a react-native only prop and has no effect on web.
2439
+ */
2440
+ hitSlop?: {
2441
+ top?: number;
2442
+ right?: number;
2443
+ bottom?: number;
2444
+ left?: number;
2445
+ } | number;
2446
+ /**
2447
+ * The title of the link which is displayed as a tooltip. This is a web only prop and has no effect on react-native.
2448
+ */
2449
+ htmlTitle?: string;
2450
+ } & TestID & StyledPropsBlade;
2451
+ declare type BaseLinkWithoutIconProps = BaseLinkCommonProps & {
2452
+ icon?: undefined;
2453
+ children: StringChildrenType;
2454
+ };
2455
+ declare type BaseLinkWithIconProps = BaseLinkCommonProps & {
2456
+ icon: IconComponent$1;
2457
+ children?: StringChildrenType;
2458
+ };
2459
+ declare type BaseLinkPropsWithOrWithoutIcon = BaseLinkWithIconProps | BaseLinkWithoutIconProps;
2460
+ declare type BaseLinkAnchorVariantProps = BaseLinkPropsWithOrWithoutIcon & {
2461
+ variant?: 'anchor';
2462
+ href?: string;
2463
+ target?: string;
2464
+ rel?: string;
2465
+ isDisabled?: undefined;
2466
+ };
2467
+ declare type BaseLinkButtonVariantProps = BaseLinkPropsWithOrWithoutIcon & {
2468
+ variant?: 'button';
2469
+ isDisabled?: boolean;
2470
+ href?: undefined;
2471
+ target?: undefined;
2472
+ rel?: undefined;
2473
+ };
2474
+ declare type BaseLinkProps = BaseLinkAnchorVariantProps | BaseLinkButtonVariantProps;
2475
+
2408
2476
  declare type LinkCommonProps = {
2409
2477
  variant?: 'anchor' | 'button';
2410
2478
  icon?: IconComponent$1;
@@ -2419,7 +2487,7 @@ declare type LinkCommonProps = {
2419
2487
  *
2420
2488
  * @default medium
2421
2489
  */
2422
- size?: 'small' | 'medium' | 'large';
2490
+ size?: BaseLinkProps['size'];
2423
2491
  } & TestID & StyledPropsBlade & Platform.Select<{
2424
2492
  native: {
2425
2493
  /**
@@ -2473,15 +2541,60 @@ declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
2473
2541
  declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
2474
2542
  declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, htmlTitle, ...styledProps }: LinkProps) => ReactElement;
2475
2543
 
2476
- /* eslint-disable @typescript-eslint/no-explicit-any */
2477
-
2478
-
2479
- type BladeElementRef = Platform.Select<{
2480
- web: Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
2481
- native: React.MutableRefObject<any>;
2482
- }>;
2544
+ declare type BaseButtonCommonProps = {
2545
+ href?: BaseLinkProps['href'];
2546
+ target?: BaseLinkProps['target'];
2547
+ rel?: BaseLinkProps['rel'];
2548
+ size?: 'xsmall' | 'small' | 'medium' | 'large';
2549
+ iconPosition?: 'left' | 'right';
2550
+ isDisabled?: boolean;
2551
+ isFullWidth?: boolean;
2552
+ onBlur?: Platform.Select<{
2553
+ native: (event: GestureResponderEvent) => void;
2554
+ web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
2555
+ }>;
2556
+ onKeyDown?: Platform.Select<{
2557
+ native: (event: GestureResponderEvent) => void;
2558
+ web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
2559
+ }>;
2560
+ onClick?: Platform.Select<{
2561
+ native: (event: GestureResponderEvent) => void;
2562
+ web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
2563
+ }>;
2564
+ type?: 'button' | 'reset' | 'submit';
2565
+ isLoading?: boolean;
2566
+ accessibilityLabel?: string;
2567
+ variant?: 'primary' | 'secondary' | 'tertiary';
2568
+ contrast?: 'low' | 'high';
2569
+ intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
2570
+ } & TestID & StyledPropsBlade;
2571
+ declare type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
2572
+ icon?: undefined;
2573
+ children: StringChildrenType;
2574
+ };
2575
+ declare type BaseButtonWithIconProps = BaseButtonCommonProps & {
2576
+ icon: IconComponent$1;
2577
+ children?: StringChildrenType;
2578
+ };
2579
+ declare type BaseButtonProps = BaseButtonWithIconProps | BaseButtonWithoutIconProps;
2483
2580
 
2484
2581
  declare type ButtonCommonProps = {
2582
+ /**
2583
+ * Automatically renders button with `a` tag with `href` on web
2584
+ */
2585
+ href?: BaseButtonProps['href'];
2586
+ /**
2587
+ * anchor target attribute
2588
+ *
2589
+ * Should only be used alongside `href`
2590
+ */
2591
+ target?: BaseButtonProps['target'];
2592
+ /**
2593
+ * anchor rel attribute
2594
+ *
2595
+ * Should only be used alongside `href`
2596
+ */
2597
+ rel?: BaseButtonProps['rel'];
2485
2598
  variant?: 'primary' | 'secondary' | 'tertiary';
2486
2599
  size?: 'xsmall' | 'small' | 'medium' | 'large';
2487
2600
  iconPosition?: 'left' | 'right';
@@ -2741,7 +2854,7 @@ declare type CounterProps = {
2741
2854
  } & TestID & StyledPropsBlade;
2742
2855
  declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
2743
2856
 
2744
- declare type OnChange = ({ isChecked, event, value, }: {
2857
+ declare type OnChange$1 = ({ isChecked, event, value, }: {
2745
2858
  isChecked: boolean;
2746
2859
  event?: React__default.ChangeEvent;
2747
2860
  value?: string;
@@ -2763,7 +2876,7 @@ declare type CheckboxProps = {
2763
2876
  /**
2764
2877
  * The callback invoked when the checked state of the `Checkbox` changes.
2765
2878
  */
2766
- onChange?: OnChange;
2879
+ onChange?: OnChange$1;
2767
2880
  /**
2768
2881
  * Sets the label of the checkbox
2769
2882
  */
@@ -2842,7 +2955,7 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
2842
2955
  /**
2843
2956
  * The callback invoked when the checked state of the `Checkbox` changes.
2844
2957
  */
2845
- onChange?: OnChange | undefined;
2958
+ onChange?: OnChange$1 | undefined;
2846
2959
  /**
2847
2960
  * Sets the label of the checkbox
2848
2961
  */
@@ -3015,46 +3128,18 @@ declare type DropdownOverlayProps = {
3015
3128
  } & TestID;
3016
3129
  declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => JSX.Element;
3017
3130
 
3018
- declare type BaseButtonCommonProps = {
3019
- size?: 'xsmall' | 'small' | 'medium' | 'large';
3020
- iconPosition?: 'left' | 'right';
3021
- isDisabled?: boolean;
3022
- isFullWidth?: boolean;
3023
- onBlur?: Platform.Select<{
3024
- native: (event: GestureResponderEvent) => void;
3025
- web: (event: React__default.FocusEvent<HTMLButtonElement>) => void;
3026
- }>;
3027
- onKeyDown?: Platform.Select<{
3028
- native: (event: GestureResponderEvent) => void;
3029
- web: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
3030
- }>;
3031
- onClick?: Platform.Select<{
3032
- native: (event: GestureResponderEvent) => void;
3033
- web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
3034
- }>;
3035
- type?: 'button' | 'reset' | 'submit';
3036
- isLoading?: boolean;
3037
- accessibilityLabel?: string;
3038
- variant?: 'primary' | 'secondary' | 'tertiary';
3039
- contrast?: 'low' | 'high';
3040
- intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
3041
- } & TestID & StyledPropsBlade;
3042
- declare type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
3043
- icon?: undefined;
3044
- children: StringChildrenType;
3045
- };
3046
- declare type BaseButtonWithIconProps = BaseButtonCommonProps & {
3047
- icon: IconComponent$1;
3048
- children?: StringChildrenType;
3049
- };
3050
- declare type BaseButtonProps = BaseButtonWithIconProps | BaseButtonWithoutIconProps;
3051
-
3052
3131
  declare type DropdownButtonProps = ButtonProps & {
3053
3132
  onBlur?: BaseButtonProps['onBlur'];
3054
3133
  onKeyDown?: BaseButtonProps['onKeyDown'];
3055
3134
  };
3056
3135
  declare const DropdownButton: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, onBlur, onKeyDown, size, type, variant, accessibilityLabel, testID, ...styledProps }: DropdownButtonProps) => JSX.Element;
3057
3136
 
3137
+ declare type DropdownLinkProps = LinkButtonVariantProps & {
3138
+ onBlur?: BaseLinkProps['onBlur'];
3139
+ onKeyDown?: BaseLinkProps['onKeyDown'];
3140
+ };
3141
+ declare const DropdownLink: ({ children, icon, iconPosition, onClick, onBlur, onKeyDown, isDisabled, href, target, rel, accessibilityLabel, size, testID, hitSlop, htmlTitle, ...styledProps }: DropdownLinkProps) => JSX.Element;
3142
+
3058
3143
  declare const ArrowDownIcon: IconComponent;
3059
3144
 
3060
3145
  declare const ArrowLeftIcon: IconComponent;
@@ -4312,12 +4397,44 @@ declare type TitleProps = {
4312
4397
  } & TestID & StyledPropsBlade;
4313
4398
  declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
4314
4399
 
4400
+ declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
4401
+ declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
4402
+ declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
4403
+ declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
4404
+ declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
4405
+ declare type BaseTextProps = {
4406
+ id?: string;
4407
+ color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
4408
+ fontFamily?: keyof Theme$1['typography']['fonts']['family'];
4409
+ fontSize?: keyof Theme$1['typography']['fonts']['size'];
4410
+ fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
4411
+ fontStyle?: 'italic' | 'normal';
4412
+ textDecorationLine?: 'line-through' | 'none' | 'underline';
4413
+ lineHeight?: keyof Theme$1['typography']['lineHeights'];
4414
+ /**
4415
+ * Web only
4416
+ */
4417
+ as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
4418
+ textAlign?: 'center' | 'justify' | 'left' | 'right';
4419
+ truncateAfterLines?: number;
4420
+ className?: string;
4421
+ style?: React.CSSProperties;
4422
+ children: React.ReactNode;
4423
+ accessibilityProps?: Partial<AccessibilityProps>;
4424
+ /**
4425
+ * React Native only
4426
+ */
4427
+ numberOfLines?: number;
4428
+ componentName?: 'text' | 'title' | 'heading' | 'code';
4429
+ } & TestID & StyledPropsBlade;
4430
+
4315
4431
  declare type HeadingVariant = 'regular' | 'subheading';
4316
4432
  declare type HeadingSize = 'small' | 'medium' | 'large';
4317
4433
  declare type HeadingCommonProps = {
4318
4434
  type?: TextTypes;
4319
4435
  contrast?: ColorContrastTypes;
4320
4436
  children: StringChildrenType;
4437
+ textAlign?: BaseTextProps['textAlign'];
4321
4438
  } & TestID & StyledPropsBlade;
4322
4439
  declare type HeadingNormalVariant = HeadingCommonProps & {
4323
4440
  variant?: Exclude<HeadingVariant, 'subheading'>;
@@ -4345,38 +4462,7 @@ declare type HeadingProps<T> = T extends {
4345
4462
  } ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
4346
4463
  declare const Heading: <T extends {
4347
4464
  variant: HeadingVariant;
4348
- }>({ variant, size, type, weight, contrast, children, testID, ...styledProps }: HeadingProps<T>) => ReactElement;
4349
-
4350
- declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
4351
- declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
4352
- declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
4353
- declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
4354
- declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
4355
- declare type BaseTextProps = {
4356
- id?: string;
4357
- color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
4358
- fontFamily?: keyof Theme$1['typography']['fonts']['family'];
4359
- fontSize?: keyof Theme$1['typography']['fonts']['size'];
4360
- fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
4361
- fontStyle?: 'italic' | 'normal';
4362
- textDecorationLine?: 'line-through' | 'none' | 'underline';
4363
- lineHeight?: keyof Theme$1['typography']['lineHeights'];
4364
- /**
4365
- * Web only
4366
- */
4367
- as?: 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
4368
- textAlign?: 'center' | 'justify' | 'left' | 'right';
4369
- truncateAfterLines?: number;
4370
- className?: string;
4371
- style?: React.CSSProperties;
4372
- children: React.ReactNode;
4373
- accessibilityProps?: Partial<AccessibilityProps>;
4374
- /**
4375
- * React Native only
4376
- */
4377
- numberOfLines?: number;
4378
- componentName?: 'text' | 'title' | 'heading' | 'code';
4379
- } & TestID & StyledPropsBlade;
4465
+ }>({ variant, size, type, weight, contrast, children, testID, textAlign, ...styledProps }: HeadingProps<T>) => ReactElement;
4380
4466
 
4381
4467
  declare type TextCommonProps = {
4382
4468
  type?: TextTypes;
@@ -4751,6 +4837,64 @@ declare type SkipNavContentProps = {
4751
4837
  } & TestID;
4752
4838
  declare const SkipNavContent: ({ id, testID, }: SkipNavContentProps) => JSX.Element;
4753
4839
 
4840
+ declare type OnChange = ({ isChecked, value, event, }: {
4841
+ isChecked: boolean;
4842
+ event?: React.ChangeEvent;
4843
+ value?: string;
4844
+ }) => void;
4845
+ declare type SwitchProps = {
4846
+ /**
4847
+ * If `true`, The switch will be checked. This also makes the switch controlled
4848
+ * Use `onChange` to update its value
4849
+ *
4850
+ * @default false
4851
+ */
4852
+ isChecked?: boolean;
4853
+ /**
4854
+ * If `true`, the switch will be initially checked. This also makes the switch uncontrolled
4855
+ *
4856
+ * @default false
4857
+ */
4858
+ defaultChecked?: boolean;
4859
+ /**
4860
+ * The callback invoked when the checked state of the `Switch` changes.
4861
+ */
4862
+ onChange?: OnChange;
4863
+ /**
4864
+ * The name of the input field in a switch
4865
+ * (Useful for form submission).
4866
+ */
4867
+ name?: string;
4868
+ /**
4869
+ * The value to be used in the switch input.
4870
+ * This is the value that will be returned on form submission.
4871
+ */
4872
+ value?: string;
4873
+ /**
4874
+ * If `true`, the switch will be disabled
4875
+ *
4876
+ * @default false
4877
+ */
4878
+ isDisabled?: boolean;
4879
+ /**
4880
+ * Size of the switch
4881
+ *
4882
+ * @default "medium"
4883
+ */
4884
+ size?: 'small' | 'medium';
4885
+ /**
4886
+ * Provides accessible label for internal checkbox component that sets the aria-label prop for screen readers.
4887
+ */
4888
+ accessibilityLabel: string;
4889
+ /**
4890
+ * The id of the input field in a switch, useful for associating a label element with the input via htmlFor prop
4891
+ */
4892
+ id?: string;
4893
+ testID?: string;
4894
+ };
4895
+
4896
+ declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<BladeElementRef>>;
4897
+
4754
4898
  declare type VisuallyHiddenProps = {
4755
4899
  children: React.ReactNode;
4756
4900
  } & TestID;
@@ -4849,13 +4993,47 @@ declare type BaseFooterProps$1 = {
4849
4993
  declare type SnapPoints = [number, number, number];
4850
4994
 
4851
4995
  declare type BottomSheetProps = {
4996
+ /**
4997
+ * Accepts BottomSheetHeader, BottomSheetFooter, BottomSheetBody
4998
+ */
4852
4999
  children: React.ReactNode;
5000
+ /**
5001
+ * SnapPoints in which the bottom sheeet will rest on.
5002
+ * Accepts numbers between 0 & 1 which maps to the total view height of the screen, 0.5 means 50% of screen height.
5003
+ *
5004
+ * @default [0.35, 0.5, 0.85]
5005
+ */
4853
5006
  snapPoints?: SnapPoints;
5007
+ /**
5008
+ * Called when the bottom sheet is closed, either by user state, hitting `esc` or tapping backdrop
5009
+ */
4854
5010
  onDismiss?: () => void;
5011
+ /**
5012
+ * Toggles bottom sheet state
5013
+ *
5014
+ * @default false
5015
+ */
4855
5016
  isOpen?: boolean;
5017
+ /**
5018
+ * Ref element you want to get keyboard focus when opening the sheet
5019
+ * By default the initial focus will go to the close button
5020
+ */
4856
5021
  initialFocusRef?: React.MutableRefObject<any>;
4857
5022
  };
4858
- declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix' | 'showBackButton' | 'onBackButtonClick'>;
5023
+ declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick'> & {
5024
+ /**
5025
+ * Trailing element to be rendered in the Header
5026
+ *
5027
+ * Accepts one of `Badge`, `Text`, `Button`, `Link`
5028
+ */
5029
+ trailing?: BaseHeaderProps['trailing'];
5030
+ /**
5031
+ * Renders an adornment besides the title
5032
+ *
5033
+ * Accepts `Counter`
5034
+ */
5035
+ titleSuffix?: BaseHeaderProps['titleSuffix'];
5036
+ };
4859
5037
  declare type BottomSheetFooterProps = Pick<BaseFooterProps$1, 'children'>;
4860
5038
 
4861
5039
  declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, }: BottomSheetHeaderProps) => React__default.ReactElement;
@@ -4873,4 +5051,4 @@ declare const BottomSheetBody: ({ children }: {
4873
5051
 
4874
5052
  declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, }: BottomSheetProps) => React__default.ReactElement;
4875
5053
 
4876
- 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, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, 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 };
5054
+ 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, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, 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 };