@hero-design/rn 8.82.0-alpha.0 → 8.82.1

package/types/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Variant } from './StyledAccordion';
+export declare type AccordionItemProps = {
+    header: string | ReactElement;
+    content: ReactElement;
+    open?: boolean;
+    onPress?: () => void;
+    variant?: Variant;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+declare const AccordionItem: ({ header, content, open, onPress, variant, style, testID, }: AccordionItemProps) => React.JSX.Element;
+export default AccordionItem;

package/types/components/Accordion/StyledAccordion.d.ts

@@ -0,0 +1,32 @@
+import { TouchableOpacity, View } from 'react-native';
+export declare type Variant = 'default' | 'card';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledHeaderWrapper: 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;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export declare const StyledCollapse: import("@emotion/native").StyledComponent<import("../Collapse").CollapseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+export declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Key, ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface AccordionProps<K extends Key> {
+    /**
+     * List of accordion items to be rendered. Each item must have an unique key.
+     */
+    items: {
+        header: string | ReactElement;
+        content: ReactElement;
+        key: K;
+        style?: StyleProp<ViewStyle>;
+        testID?: string;
+    }[];
+    /**
+     * Key of the active item.
+     * When activeItemKey and onItemPress is passed, the component is fully controlled.
+     * Otherwise, it would be uncontrolled.
+     */
+    activeItemKey?: K;
+    /**
+     * Callback invoked when an item is pressed.
+     */
+    onItemPress?: (key: K) => void;
+    /**
+     * Item type.
+     */
+    variant?: 'default' | 'card';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => React.JSX.Element;
+export default Accordion;

package/types/components/Alert/StyledAlert.d.ts

@@ -0,0 +1,53 @@
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { TextProps } from '../Typography/Text';
+import { IconProps } from '../Icon';
+declare type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
+declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeVariant: 'rounded' | 'unrounded';
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledIcon: import("@emotion/native").StyledComponent<IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledBody: 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;
+} & TextProps & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    showDivider: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const CTAWrapper: 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;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, StyledBody, StyledIcon, };

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

@@ -0,0 +1,58 @@
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
+interface BasicAlertProps {
+    /**
+     * Alert title.
+     */
+    title?: string | ReactElement;
+    /**
+     * Alert content.
+     */
+    content: string | ReactElement;
+    /**
+     * Icon name of the alert.
+     * - undefined: use default icon according to Alert intent.
+     * - null: no icon at all.
+     * - IconName: an icon identifier from hero-design icon list.
+     */
+    icon?: null | IconName;
+    /**
+     * Visual intent color to apply to alert.
+     */
+    intent?: 'success' | 'info' | 'warning' | 'error' | 'notification';
+    /**
+     * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
+     * - undefined: no action button.
+     */
+    onClose?: () => void;
+    /**
+     * Alert variant.
+     */
+    variant?: 'unrounded' | 'rounded';
+    /**
+     * Addtional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Action label at the right side of the alert.
+     * - undefined: a close icon.
+     */
+    actionLabel?: string;
+}
+declare type AlertProps = (BasicAlertProps & {
+    actionLabel?: undefined;
+}) | (BasicAlertProps & {
+    onClose: () => void;
+    /**
+     * Action label at the right side of the alert.
+     * - undefined: a close icon.
+     */
+    actionLabel: string;
+});
+declare const Alert: ({ content, icon, title, intent, onClose, variant, style, testID, actionLabel, }: AlertProps) => JSX.Element;
+export default Alert;

package/types/components/AnimatedScroller/AnimatedFAB.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+interface AnimatedFABProps {
+    fabProps: FABProps | ActionGroupProps;
+    contentOffsetY: Animated.Value;
+    contentHeight: Animated.Value;
+    layoutHeight: Animated.Value;
+}
+declare const AnimatedFAB: ({ fabProps, contentOffsetY, contentHeight, layoutHeight, }: AnimatedFABProps) => React.JSX.Element;
+export default AnimatedFAB;

package/types/components/AnimatedScroller/AnimatedScrollable.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FlatListProps, ScrollViewProps as RnScrollViewProps, SectionListProps } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+export interface AnimatedScrollerProps<T> {
+    /**
+     * Scroll component, it can be ScrollView, FlatList or SectionList.
+     */
+    ScrollComponent: React.ReactElement<RnScrollViewProps | FlatListProps<T> | SectionListProps<T>>;
+    /**
+     * FAB or FAB.ActionGroup props.
+     */
+    fabProps: FABProps | ActionGroupProps;
+}
+declare function AnimatedScroller<T>({ ScrollComponent, fabProps, }: AnimatedScrollerProps<T>): React.JSX.Element;
+export default AnimatedScroller;

package/types/components/AnimatedScroller/FlatListWithFAB.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FlatListProps } from 'react-native';
+import { FABProps } from '../FAB/FAB';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+export interface FlatListWithFABProps<T> extends FlatListProps<T> {
+    /**
+     * FAB or FAB.ActionGroup props props.
+     */
+    fabProps: FABProps | ActionGroupProps;
+}
+declare function FlatListWithFAB<T>({ fabProps, ...props }: FlatListWithFABProps<T>): React.JSX.Element;
+export default FlatListWithFAB;

package/types/components/AnimatedScroller/ScrollViewWithFAB.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ScrollViewProps } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+export interface ScrollViewWithFABProps extends ScrollViewProps {
+    /**
+     * FAB or FAB.ActionGroup props props.
+     */
+    fabProps: FABProps | ActionGroupProps;
+}
+declare const ScrollViewWithFAB: ({ fabProps, ...props }: ScrollViewWithFABProps) => React.JSX.Element;
+export default ScrollViewWithFAB;

package/types/components/AnimatedScroller/SectionListWithFAB.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SectionListProps } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+export interface SectionListWithFABProps<T> extends SectionListProps<T> {
+    /**
+     * FAB or FAB.ActionGroup props props.
+     */
+    fabProps: FABProps | ActionGroupProps;
+}
+declare function SectionListWithFAB<T>({ fabProps, ...props }: SectionListWithFABProps<T>): React.JSX.Element;
+export default SectionListWithFAB;

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

@@ -0,0 +1,4 @@
+import ScrollViewWithFAB from './ScrollViewWithFAB';
+import FlatListWithFAB from './FlatListWithFAB';
+import SectionListWithFAB from './SectionListWithFAB';
+export { ScrollViewWithFAB, FlatListWithFAB, SectionListWithFAB };

package/types/components/Attachment/StyledAttachment.d.ts

@@ -0,0 +1,28 @@
+import { TouchableOpacity, View } from 'react-native';
+declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledContentContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeHighlighted: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledTextContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCTAWrapper: 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;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { StyledContainer, StyledContentContainer, StyledCTAWrapper, StyledTextContainer, };

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+import { ImageProps } from '../Image';
+interface AttachmentProps {
+    /**
+     * Attachment filename.
+     */
+    filename?: string;
+    /**
+     * Attachment preview element.
+     */
+    previewElement: ReactElement<ImageProps | IconProps>;
+    /**
+     * Removing callback. When onRemove is available, a trash icon will be rendered on the right side. The callback will be called when user clicks on trash icon.
+     */
+    onRemove?: () => void;
+    /**
+     * Downloading callback. When onDownload is available, a download icon will be rendered on the right side. The callback will be called when user clicks on download icon.
+     */
+    onDownload?: () => void;
+    /**
+     * The background of the attachment's content will be highlighted if backgroundHighlighted is true.
+     * Default value is false.
+     */
+    backgroundHighlighted?: boolean;
+    /**
+     * Addtional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Attachment: ({ filename, previewElement, onRemove, onDownload, backgroundHighlighted, style, testID, }: AttachmentProps) => React.JSX.Element;
+export default Attachment;

package/types/components/Avatar/Avatar.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
+export interface AvatarProps extends ViewProps {
+    /**
+     * Callback function when pressing component.
+     */
+    onPress?: () => void;
+    /**
+     * Image source to be displayed on avatar.
+     */
+    source?: ImageSourcePropType;
+    /**
+     * Renders title in the placeholder.
+     */
+    title?: string;
+    /**
+     * Intent of the Icon.
+     */
+    intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    /**
+     * Size of the avatar.
+     */
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => React.JSX.Element | null;
+export default Avatar;

package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts

@@ -0,0 +1,30 @@
+import { View } from 'react-native';
+import { AvatarProps } from '../Avatar';
+declare type ThemeVariant = 'horizontal' | 'vertical';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeSize: Required<AvatarProps>['size'];
+    themeAvatarCount: number;
+    themeVariant: ThemeVariant;
+    themeHasSurplus: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledAvatar: import("@emotion/native").StyledComponent<AvatarProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIndex: number;
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export declare const StyledSurplusContainer: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIndex: number;
+    themeSize: AvatarProps['size'];
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+export {};

package/types/components/Avatar/AvatarStack/index.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { AvatarProps } from '../Avatar';
+export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
+    /**
+     * Avatar elements to be rendered.
+     */
+    children: ReactElement<Omit<AvatarProps, 'size' | 'style'>>[];
+    /**
+     * Max avatars to show.
+     */
+    max?: number;
+    /**
+     * The total number of avatars. Used for calculating the number of extra avatars.
+     */
+    total?: number;
+    /**
+     * Custom renderer of extraAvatars.
+     */
+    renderSurplus?: (value: number) => ReactNode;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Variant of the avatar stack.
+     */
+    variant?: 'horizontal' | 'vertical';
+}
+declare const AvatarStack: ({ children, max, size, style, testID, variant, total, renderSurplus, }: AvatarStackProps) => React.JSX.Element;
+export default AvatarStack;

package/types/components/Avatar/AvatarStack/utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
+ */
+export declare const useAvatarColors: () => string[];

package/types/components/Avatar/StyledAvatar.d.ts

@@ -0,0 +1,34 @@
+import { View, Image, TouchableOpacity } from 'react-native';
+import { TextProps } from '../Typography/Text';
+declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
+declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+declare const StyledWrapper: 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;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledText: import("@emotion/native").StyledComponent<TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {}>;
+declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<Image> | undefined;
+}>;
+export { StyledWrapper, StyledImage, StyledTextWrapper, StyledText };

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

@@ -0,0 +1,6 @@
+import { useAvatarColors } from './AvatarStack/utils';
+declare const _default: (({ onPress, source, testID, style, title, size, intent, }: import("./Avatar").AvatarProps) => import("react").JSX.Element | null) & {
+    Stack: ({ children, max, size, style, testID, variant, total, renderSurplus, }: import("./AvatarStack").AvatarStackProps) => import("react").JSX.Element;
+};
+export default _default;
+export { useAvatarColors };

package/types/components/Badge/Status.d.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+export interface StatusProps extends ViewProps {
+    children: ReactNode;
+    /**
+     * Whether the Status Badge is visible.
+     */
+    visible?: boolean;
+    /**
+    /**
+     * Visual intent color to apply to Status Badge.
+     */
+    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'primary';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Status: ({ children, visible, intent, style, testID, ...nativeProps }: StatusProps) => JSX.Element;
+export default Status;

package/types/components/Badge/StyledBadge.d.ts

@@ -0,0 +1,33 @@
+import { Animated } from 'react-native';
+declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+declare type ThemePadding = 'narrowContent' | 'wideContent';
+declare type ThemeSize = 'medium' | 'small';
+declare type ThemeVariant = 'filled' | 'outlined';
+declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+    themePadding: ThemePadding;
+    themeSize: ThemeSize;
+    themeVariant: ThemeVariant;
+}, {}, {}>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {}>;
+declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+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;
+} & {
+    themeSize: ThemeSize;
+}, {}, {}>;
+export { StyledView, StyledText, StyledStatus, StyledIcon };

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

@@ -0,0 +1,6 @@
+import { BasicBadgeProps, IconBadgeProps } from './types';
+export declare type BadgeProps = BasicBadgeProps | IconBadgeProps;
+declare const _default: (({ content: originalContent, visible, max, intent, style, testID, size, variant, icon, ...nativeProps }: BadgeProps) => JSX.Element) & {
+    Status: ({ children, visible, intent, style, testID, ...nativeProps }: import("./Status").StatusProps) => JSX.Element;
+};
+export default _default;

package/types/components/Badge/types.d.ts

@@ -0,0 +1,53 @@
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+interface BaseBadgeProps extends React.ComponentProps<typeof Animated.View> {
+    /**
+     * Whether the Badge is visible.
+     */
+    visible?: boolean;
+    /**
+     * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
+     */
+    max?: number;
+    /**
+     * Visual intent color to apply to Badge.
+     */
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Size of the badge
+     */
+    size?: 'medium' | 'small';
+    /**
+     * Variant of the badge
+     */
+    variant?: 'filled' | 'outlined';
+}
+export interface BasicBadgeProps extends BaseBadgeProps {
+    /**
+     * Content of the Badge.
+     */
+    content: string | number;
+    /**
+     * Use Icon as the content of the Badge.
+     */
+    icon?: never;
+}
+export interface IconBadgeProps extends BaseBadgeProps {
+    /**
+     * Content of the Badge.
+     */
+    content?: never;
+    /**
+     * Use Icon as the content of the Badge.
+     */
+    icon: IconName;
+}
+export {};