@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -1,33 +1,35 @@
-/// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
+declare type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themeWithBorder: boolean;
-    themeDisabled: boolean;
+    themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 export declare const StyledCheckboxContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledCheckbox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    themeDisabled: boolean;
+    themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledCheckMark: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeState: CheckboxThemeState;
 }, {}, {}>;
+export {};

package/types/components/Checkbox/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface CheckboxProps {
     /**
@@ -9,6 +10,7 @@ export interface CheckboxProps {
      */
     description?: string;
     /**
+     * @deprecated This prop will be removed in the next major release. Checkboxes will always have border.
      * Whether the border is shown.
      */
     withBorder?: boolean;
@@ -28,6 +30,15 @@ export interface CheckboxProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Readonly of the checkbox.
+     */
+    readonly?: boolean;
 }
-declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, }: CheckboxProps) => JSX.Element;
+declare type getStateType = {
+    disabled: boolean;
+    readonly: boolean;
+};
+export declare const getThemeState: ({ disabled, readonly }: getStateType) => "default" | "disabled" | "readonly";
+declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/types/components/Chip/StyledChip.d.ts

@@ -0,0 +1,30 @@
+import { TouchableOpacity } from 'react-native';
+declare type StyledChipWrapperProps = {
+    themeVariant?: 'outlined' | 'filled';
+    themeSelected?: boolean;
+};
+declare const StyledChipWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & StyledChipWrapperProps, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledIconWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeSelected?: boolean | undefined;
+    themeVariant?: "filled" | "outlined" | undefined;
+}, {}, {}>;
+declare const StyledIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeSelected?: boolean | undefined;
+    themeVariant?: "filled" | "outlined" | undefined;
+}, {}, {}>;
+export { StyledChipWrapper, StyledIcon, StyledIconWrapper, StyledLabel };

package/types/components/Chip/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { IconName } from '../Icon';
+export interface ChipProps extends ViewProps {
+    /**
+     * The label of the chip.
+     */
+    label: string;
+    /**
+     * Variant of the chip.
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * Whether the chip is selected.
+     */
+    selected?: boolean;
+    /**
+     * Icon of the chip. Usable only with `variant="filled"`.
+     */
+    icon?: IconName;
+    /**
+     * Callback when the chip is pressed.
+     */
+    onPress?: () => void;
+}
+declare const Chip: ({ label, variant, selected, icon, onPress, ...otherProps }: ChipProps) => React.JSX.Element;
+export default Chip;

package/types/components/Collapse/StyledCollapse.d.ts

@@ -1,10 +1,7 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 /**
  * Height need to be high enough to cover most scenario
@@ -13,13 +10,13 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<Animated.
  */
 declare const StyledHiddenWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledChildWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

package/types/components/Collapse/index.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 export interface CollapseProps extends ViewProps {
     children: ReactNode;
@@ -15,5 +16,5 @@ export interface CollapseProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Collapse: ({ open, children, testID, style, onLayout, }: CollapseProps) => JSX.Element;
+declare const Collapse: ({ open, children, testID, style, onLayout, }: CollapseProps) => React.JSX.Element;
 export default Collapse;

package/types/components/ContentNavigator/StyledContentNavigator.d.ts

@@ -1,13 +1,8 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 declare const Wrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const Value: import("@emotion/native").StyledComponent<import("../..").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export { Wrapper, Value };
+export { Wrapper };

package/types/components/ContentNavigator/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 interface ContentNavigatorProps {
@@ -38,5 +39,5 @@ interface ContentNavigatorProps {
      */
     testID?: string;
 }
-declare function ContentNavigator({ onPreviousPress, onNextPress, onPress, value, previousDisabled, nextDisabled, fontSize, testID, style, }: ContentNavigatorProps): JSX.Element;
+declare function ContentNavigator({ onPreviousPress, onNextPress, onPress, value, previousDisabled, nextDisabled, fontSize, testID, style, }: ContentNavigatorProps): React.JSX.Element;
 export default ContentNavigator;

package/types/components/DatePicker/DatePickerAndroid.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { DatePickerProps } from './types';
-declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
+declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => React.JSX.Element;
 export default DatePickerAndroid;

package/types/components/DatePicker/DatePickerCalendar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { DatePickerProps } from './types';
-declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
+declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, monthPickerConfirmLabel, monthPickerCancelLabel, }: Omit<DatePickerProps, 'variant'>) => React.JSX.Element;
 export default DatePickerCalendar;

package/types/components/DatePicker/DatePickerIOS.d.ts

@@ -1,4 +1,4 @@
+import React from 'react';
 import type { DatePickerProps } from './types';
-export declare const getInitialDateValue: (value: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date;
-declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
+declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => React.JSX.Element;
 export default DatePickerIOS;

package/types/components/DatePicker/StyledDatePicker.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledPickerWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

package/types/components/DatePicker/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { DatePickerProps } from './types';
-declare const DatePicker: ({ variant, ...props }: DatePickerProps) => JSX.Element;
+declare const DatePicker: ({ variant, ...props }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

package/types/components/DatePicker/types.d.ts

@@ -63,4 +63,12 @@ export interface DatePickerProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Calendar variant prop. Label for the confirm button of the month picker, Android only.
+     */
+    monthPickerConfirmLabel?: string;
+    /**
+     * Calendar variant prop. Label for the cancel button of the month picker, Android only.
+     */
+    monthPickerCancelLabel?: string;
 }

package/types/components/DatePicker/useCalculateDate.d.ts

@@ -0,0 +1,4 @@
+import { DatePickerProps } from './types';
+export declare const getDateValue: (value: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date;
+declare const useCalculateDate: ({ maxDate, minDate, onChange, value, }: Pick<DatePickerProps, 'maxDate' | 'minDate' | 'onChange' | 'value'>) => void;
+export default useCalculateDate;

package/types/components/Divider/StyledDivider.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 declare const StyledDivider: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeMarginHorizontal?: MarginSize | undefined;
     themeMarginVertical?: MarginSize | undefined;

package/types/components/Divider/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 interface DividerProps extends ViewProps {
     /**
@@ -17,5 +18,5 @@ interface DividerProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Divider: ({ marginHorizontal, marginVertical, style, testID, ...nativeProps }: DividerProps) => JSX.Element;
+declare const Divider: ({ marginHorizontal, marginVertical, style, testID, ...nativeProps }: DividerProps) => React.JSX.Element;
 export default Divider;

package/types/components/Drawer/StyledDrawer.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     enableShadow: boolean;
 }, {}, {
@@ -11,43 +10,37 @@ declare const StyledContainer: import("@emotion/native").StyledComponent<ViewPro
 }>;
 declare const StyledDragableContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     enableShadow: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 declare const StyledDrawerContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     enableShadow: boolean;
 }, {}, {}>;
 declare const StyledDragableDrawerContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     enableShadow: boolean;
 }, {}, {}>;
 declare const StyledHandlerContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledHandler: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     active?: boolean | undefined;
 }, {}, {

package/types/components/Empty/StyledEmpty.d.ts

@@ -1,21 +1,20 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 declare type ThemeVariant = 'light' | 'dark';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledTitle: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledTitle: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVariant: ThemeVariant;
 }, {}, {}>;
-declare const StyledDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVariant: ThemeVariant;
 }, {}, {}>;

package/types/components/Error/StyledError.d.ts

@@ -1,15 +1,12 @@
-/// <reference types="react" />
-import { Modal, View } from 'react-native';
+import { View } from 'react-native';
 declare type ErrorVariant = 'full-screen' | 'in-page';
-declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
+declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("../Modal").ModalProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Modal> | undefined;
-}>;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
 declare const StyledErrorContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVariant: ErrorVariant;
 }, {}, {
@@ -17,44 +14,40 @@ declare const StyledErrorContainer: import("@emotion/native").StyledComponent<im
 }>;
 declare const StyledErrorContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledErrorButtonContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledErrorButtonPrimary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 declare const StyledErrorButtonSecondary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 declare const StyledErrorImageContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledErrorImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
-declare const StyledErrorTitle: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledErrorTitle: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
-declare const StyledErrorDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledErrorDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 export { ErrorVariant, StyledErrorModal, StyledErrorImage, StyledErrorContainer, StyledErrorButtonContainer, StyledErrorButtonPrimary, StyledErrorButtonSecondary, StyledErrorContent, StyledErrorTitle, StyledErrorDescription, StyledErrorImageContainer, };

package/types/components/FAB/ActionGroup/ActionItem.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import type { ComponentProps } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle } from 'react-native';
 import Icon from '../../Icon';
 export interface ActionItemProps {
     testID?: string;
@@ -9,5 +10,9 @@ export interface ActionItemProps {
     style?: StyleProp<ViewStyle>;
     key?: string;
 }
-declare const ActionItem: ({ icon, title, onPress, style, testID, }: ActionItemProps) => JSX.Element;
+interface AnimatedActionItemProps extends ActionItemProps {
+    index: number;
+    active?: boolean;
+}
+declare const ActionItem: ({ icon, title, onPress, style, testID, index, active, }: AnimatedActionItemProps) => React.JSX.Element;
 export default ActionItem;

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -1,31 +1,27 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
 import type { ViewProps } from 'react-native';
-import type { TextProps } from '../../Typography/Text';
 declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledActionGroupContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
+declare const StyledContainerInModal: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & {
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledActionGroupContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
-declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & import("react").RefAttributes<import("../FAB").FABHandles> & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
-declare const StyledHeaderText: import("@emotion/native").StyledComponent<TextProps & {
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };
+export { StyledActionGroupContainer, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledFAB, };

package/types/components/FAB/ActionGroup/StyledActionItem.d.ts

@@ -1,19 +1,18 @@
-/// <reference types="react" />
 import { TouchableHighlight } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { IconProps } from '../../Icon';
 declare const StyledActionItem: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
-declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../..").TextProps & {
+declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & TouchableOpacityProps, {}, {}>;
 declare const StyledIcon: import("@emotion/native").StyledComponent<IconProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {}>;
 export { StyledIcon, StyledActionItem, StyledActionItemText };

package/types/components/FAB/ActionGroup/index.d.ts

@@ -1,8 +1,15 @@
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../../Icon';
 import type { ActionItemProps } from './ActionItem';
+export declare type ActionGroupHandles = {
+    showFAB: () => void;
+    collapseFAB: () => void;
+    hideFAB: () => void;
+};
 export interface ActionGroupProps {
     /**
+     * @deprecated headerTitle will be removed in the next major release.
      * Title of the action group header.
      */
     headerTitle?: string;
@@ -10,6 +17,10 @@ export interface ActionGroupProps {
      * This function is called on pressing the FAB button.
      * */
     onPress?: () => void;
+    /**
+     * This function is called on pressing the FAB backdrop.
+     * */
+    onBackdropPress?: () => void;
     /**
      * Specify if the FAB button is in active state and the action group is shown.
      * */
@@ -35,5 +46,5 @@ export interface ActionGroupProps {
      */
     testID?: string;
 }
-declare const ActionGroup: ({ headerTitle, onPress, active, style, items, testID, fabTitle, fabIcon, }: ActionGroupProps) => JSX.Element;
+declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<ActionGroupHandles>>;
 export default ActionGroup;

package/types/components/FAB/AnimatedFABIcon.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { IconProps } from '../Icon';
 declare type Props = {
     active?: boolean;
 } & IconProps;
-declare const AnimatedFABIcon: ({ active, ...iconProps }: Props) => JSX.Element;
+declare const AnimatedFABIcon: ({ active, ...iconProps }: Props) => React.JSX.Element;
 export { AnimatedFABIcon };