@hero-design/rn 7.4.0 → 7.6.1-alpha

package/{types/src → es}/theme/global/colors.d.ts

@@ -3,13 +3,12 @@ declare const systemPalette: {
     primaryLight: string;
     primaryDark: string;
     primaryBackground: string;
-    secondary: string;
-    secondaryLight: string;
     info: string;
     infoLight: string;
     infoBackground: string;
     success: string;
     successDark: string;
+    successLight: string;
     successBackground: string;
     danger: string;
     dangerLight: string;
@@ -22,7 +21,6 @@ declare const systemPalette: {
     backgroundDark: string;
     text: string;
     disabledText: string;
-    disabledLightText: string;
     invertedText: string;
     outline: string;
     archived: string;

package/{types/src → es}/theme/global/index.d.ts

@@ -6,13 +6,12 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         primaryLight: string;
         primaryDark: string;
         primaryBackground: string;
-        secondary: string;
-        secondaryLight: string;
         info: string;
         infoLight: string;
         infoBackground: string;
         success: string;
         successDark: string;
+        successLight: string;
         successBackground: string;
         danger: string;
         dangerLight: string;
@@ -25,7 +24,6 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         backgroundDark: string;
         text: string;
         disabledText: string;
-        disabledLightText: string;
         invertedText: string;
         outline: string;
         archived: string;

package/{types/src → es}/theme/index.d.ts

@@ -1,7 +1,6 @@
 import { GlobalTheme, Scale, SystemPalette } from './global';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
-import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
@@ -17,7 +16,6 @@ declare type Theme = GlobalTheme & {
         avatar: ReturnType<typeof getAvatarTheme>;
         badge: ReturnType<typeof getBadgeTheme>;
         bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
-        button: ReturnType<typeof getButtonTheme>;
         card: ReturnType<typeof getCardTheme>;
         divider: ReturnType<typeof getDividerTheme>;
         drawer: ReturnType<typeof getDrawerTheme>;

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { View, Image, TouchableOpacity, Text } from 'react-native';
+declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge';
+declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+declare const StyledPressable: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<Image> | undefined;
+}>;
+export { StyledPressable, StyledView, StyledImage, StyledTextWrapper, StyledText, };

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

@@ -0,0 +1,25 @@
+import { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
+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';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
+export default Avatar;

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

@@ -0,0 +1,24 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { 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';
+    /**
+     * 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/lib/components/Badge/StyledBadge.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { Animated, Text } from 'react-native';
+declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
+declare type ThemePadding = 'narrowContent' | 'wideContent';
+declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+    themePadding: ThemePadding;
+}, {}, {}>;
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
+export { StyledView, StyledText, StyledStatus };

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

@@ -0,0 +1,32 @@
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
+    /**
+     * Content of the Badge.
+     */
+    content: string | number;
+    /**
+     * 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?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const _default: (({ content: originalContent, visible, max, intent, style, testID, ...nativeProps }: BadgeProps) => JSX.Element) & {
+    Status: ({ children, visible, intent, style, testID, ...nativeProps }: import("./Status").StatusProps) => JSX.Element;
+};
+export default _default;

package/lib/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { View } from 'react-native';
+declare const BottomNavigationTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVisibility?: boolean | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomNavigationContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const ContentWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBarWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const BottomBarItem: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

package/lib/components/BottomNavigation/index.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { IconName } from '../Icon';
+export declare type BottomNavigationTabType = {
+    key: string;
+    title?: string;
+    icon: IconName;
+    component: ReactNode;
+    testID?: string;
+};
+interface BottomNavigationProps extends ViewProps {
+    /**
+     * Callback which is called on tab press, receiving key of upcoming active Tab.
+     */
+    onTabPress: (key: string) => void;
+    /**
+     * Whether inactive tabs should be removed and unmounted in React.
+     * Defaults to `false`.
+     */
+    renderActiveTabOnly?: boolean;
+    /**
+     * Current selected tab key.
+     */
+    selectedTabKey: string;
+    /**
+     * List of Tabs to be rendered. Each Tab must have an unique key.
+     */
+    tabs: {
+        key: string;
+        title?: string;
+        icon: IconName;
+        component: ReactNode;
+        testID?: string;
+    }[];
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const BottomNavigation: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
+export default BottomNavigation;

package/lib/components/Button/IconButton.d.ts

@@ -0,0 +1,34 @@
+import { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
+import { IconProps, IconName } from '../Icon';
+export interface IconButtonProps {
+    /**
+     * Set how far you can touch from the button.
+     */
+    hitSlop?: TouchableOpacityProps['hitSlop'];
+    /**
+     * Name of the Icon.
+     */
+    icon: IconName;
+    /**
+     * Intent of the Icon.
+     */
+    intent?: IconProps['intent'];
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress: () => void;
+    /**
+     * Size of the Icon.
+     */
+    size?: IconProps['size'];
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of component.
+     */
+    testID?: string;
+}
+declare const IconButton: ({ hitSlop, onPress, icon, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
+export default IconButton;

package/lib/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+declare const Button: {
+    readonly Icon: ({ hitSlop, onPress, icon, testID, style, size, intent, }: import("./IconButton").IconButtonProps) => JSX.Element;
+};
+export default Button;

package/lib/components/Card/StyledCard.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { View } from 'react-native';
+declare const StyledCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: 'basic' | 'data';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const LeftDataCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledCard, LeftDataCard };

package/lib/components/Card/__tests__/StyledCard.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Card/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Card/index.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+interface CardProps extends ViewProps {
+    /**
+     * Card's content.
+     */
+    children?: ReactNode;
+    /**
+     * Card type.
+     */
+    variant?: 'basic' | 'data';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Card: ({ variant, children, ...nativeProps }: CardProps) => JSX.Element;
+export default Card;

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

@@ -0,0 +1,15 @@
+/// <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;
+}, {}, {}>;
+declare const StyledChildWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledWrapper, StyledChildWrapper };

package/lib/components/Collapse/__tests__/StyledCollapse.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Collapse/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { ReactNode } from 'react';
+interface CollapseProps extends ViewProps {
+    children: ReactNode;
+    /**
+     * Whether the child components will remain mounted when the Collapse is closed.
+     */
+    keepChildrenMounted?: boolean;
+    /**
+     * Whether the component is open or closed.
+     */
+    open?: boolean;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Collapse: ({ open, keepChildrenMounted, children, testID, style, }: CollapseProps) => JSX.Element;
+export default Collapse;

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

@@ -0,0 +1,13 @@
+/// <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;
+} & {
+    themeMarginHorizontal?: MarginSize | undefined;
+    themeMarginVertical?: MarginSize | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledDivider };

package/lib/components/Divider/__tests__/StyledDivider.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+interface DividerProps extends ViewProps {
+    /**
+     * Horizontal margin size. There is no margin by default.
+     */
+    marginHorizontal?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Vertical margin size. There is no margin by default.
+     */
+    marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Divider: ({ marginHorizontal, marginVertical, style, testID, ...nativeProps }: DividerProps) => JSX.Element;
+export default Divider;

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Animated, 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> | 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;
+}, {}, {}>;
+declare const StyledDrawerContainer: 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;
+} & {
+    enableShadow: boolean;
+}, {}, {}>;
+export { StyledBackdrop, StyledContainer, StyledDrawerContainer };

package/lib/components/Drawer/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Drawer/index.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+interface DrawerProps {
+    /**
+     * Drawer's visibility.
+     */
+    visible: boolean;
+    /**
+     * Drawer's content.
+     */
+    children?: ReactNode;
+    /**
+     * Enable the drawer's backdrop.
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Callback when the drawer is dismissed by interacting outside of the drawer.
+     */
+    onDismiss?: () => void;
+    /**
+     * Testing id of the component.
+     * */
+    testID?: string;
+}
+declare const Drawer: ({ visible, children, hasBackdrop, onDismiss, testID, }: DrawerProps) => JSX.Element;
+export default Drawer;

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Icon from '../../Icon';
+export interface ActionItemProps {
+    testID?: string;
+    title: string;
+    icon: ComponentProps<typeof Icon>['icon'];
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+declare const ActionItem: ({ icon, title, onPress, style, testID, }: ActionItemProps) => JSX.Element;
+export default ActionItem;