@hero-design/rn 7.3.0 → 7.4.0

package/src/theme/components/spinner.ts

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+
+const getSpinnerTheme = (theme: GlobalTheme) => {
+  const color = {
+    default: theme.colors.primary,
+  };
+
+  const space = {
+    spinnerDot: theme.space.medium,
+    spinnerDotPadding: theme.space.small,
+    spinnerTextPaddingTop: theme.space.small,
+  };
+
+  const radii = {
+    default: theme.radii.medium,
+  };
+
+  return { color, space, radii };
+};
+
+export default getSpinnerTheme;

package/src/theme/components/textInput.ts

@@ -0,0 +1,32 @@
+import { GlobalTheme } from '../global';
+
+const getTextInputTheme = (theme: GlobalTheme) => {
+  const colors = {
+    labelBackground: theme.colors.platformBackground,
+    border: theme.colors.text,
+  };
+
+  const space = {
+    containerPadding: theme.space.medium,
+    labelLeft: theme.space.medium,
+    labelTop: theme.lineHeights.small / -2,
+    labelHorizontalPadding: theme.space.xsmall,
+    prefixMarginRight: theme.space.small,
+  };
+
+  const fontSizes = {
+    text: theme.fontSizes.large,
+  };
+
+  const borderWidths = {
+    container: theme.borderWidths.base,
+  };
+
+  const radii = {
+    container: theme.radii.medium,
+  };
+
+  return { colors, space, fontSizes, borderWidths, radii };
+};
+
+export default getTextInputTheme;

package/src/theme/global/borders.ts

@@ -1,21 +1,27 @@
 interface BorderWidths {
   base: number;
+  medium: number;
 }
 
 interface Radii {
   rounded: number;
   base: number;
   medium: number;
+  large: number;
+  xlarge: number;
 }
 
 const getBorderWidths = (baseBorderWidth: number): BorderWidths => ({
   base: baseBorderWidth,
+  medium: baseBorderWidth * 2,
 });
 
 const getRadii = (baseRadius: number): Radii => ({
   rounded: 999,
   base: baseRadius,
   medium: baseRadius * 2,
+  large: baseRadius * 3,
+  xlarge: baseRadius * 4,
 });
 
 export { BorderWidths, getBorderWidths, Radii, getRadii };

package/src/theme/global/colors.ts

@@ -28,6 +28,7 @@ const systemPalette = {
   invertedText: palette.white,
   outline: palette.greyLight60,
   archived: palette.greyLight45,
+  black: palette.black,
 };
 
 type SystemPalette = typeof systemPalette;

package/src/theme/index.ts

@@ -7,35 +7,45 @@ import {
   defaultSystemPalette,
 } from './global';
 
+import getAvatarTheme from './components/avatar';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
+import getBottomSheetTheme from './components/bottomSheet';
 import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
+import getContentNavigatorTheme from './components/contentNavigator';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
-import getTabsTheme from './components/tabs';
-import getTagTheme from './components/tag';
+import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getProgressTheme from './components/progress';
+import getSpinnerTheme from './components/spinner';
+import getRadioTheme from './components/radio';
+import getTabsTheme from './components/tabs';
+import getTagTheme from './components/tag';
+import getTextInputTheme from './components/textInput';
 import getTypographyTheme from './components/typography';
-import getFABTheme from './components/fab';
-import getAvatarTheme from './components/avatar';
 
 type Theme = GlobalTheme & {
   __hd__: {
     avatar: ReturnType<typeof getAvatarTheme>;
     badge: ReturnType<typeof getBadgeTheme>;
     bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
+    bottomSheet: ReturnType<typeof getBottomSheetTheme>;
     button: ReturnType<typeof getButtonTheme>;
     card: ReturnType<typeof getCardTheme>;
+    contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
+    fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
     progress: ReturnType<typeof getProgressTheme>;
+    spinner: ReturnType<typeof getSpinnerTheme>;
+    radio: ReturnType<typeof getRadioTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
     tag: ReturnType<typeof getTagTheme>;
+    textInput: ReturnType<typeof getTextInputTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
-    fab: ReturnType<typeof getFABTheme>;
   };
 };
 
@@ -50,16 +60,21 @@ const getTheme = (
       avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
+      bottomSheet: getBottomSheetTheme(globalTheme),
       button: getButtonTheme(globalTheme),
       card: getCardTheme(globalTheme),
+      contentNavigator: getContentNavigatorTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
-      progress: getProgressTheme(globalTheme),
+      fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      spinner: getSpinnerTheme(globalTheme),
+      progress: getProgressTheme(globalTheme),
+      radio: getRadioTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
+      textInput: getTextInputTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
-      fab: getFABTheme(globalTheme),
     },
   };
 };

package/tsconfig.json

@@ -5,6 +5,7 @@
     "outDir": "types",
     "moduleResolution": "node",
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "jsx": "react-native",
     "strict": true,
     "allowUnreachableCode": false,
@@ -12,9 +13,16 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "skipLibCheck": true,
-    "types": ["jest"],
+    "types": [
+      "jest"
+    ]
   },
-  "include": ["src", "playground"],
-  "exclude": ["node_modules"],
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "playground"
+  ],
   "extends": "expo/tsconfig.base"
 }

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

@@ -0,0 +1,45 @@
+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/types/components/Avatar/__tests__/StyledAvatar.spec.d.ts

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

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

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

package/types/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/types/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/types/components/Badge/StyledBadge.d.ts

@@ -0,0 +1,27 @@
+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/types/components/Badge/__tests__/Badge.spec.d.ts

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

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

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

package/types/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/types/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -0,0 +1,51 @@
+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/types/components/BottomNavigation/__tests__/index.spec.d.ts

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

package/types/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/types/components/BottomSheet/Footer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare const Footer: ({ children, showDivider, }: {
+    children: ReactNode;
+    showDivider: boolean;
+}) => JSX.Element;
+export default Footer;

package/types/components/BottomSheet/Header.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, }: {
+    content: string | ReactElement;
+    showDivider: boolean;
+    onRequestClose?: (() => void) | undefined;
+    showCloseButton: boolean;
+}) => JSX.Element;
+export default Header;

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -0,0 +1,46 @@
+import { Animated, View, ViewProps } from 'react-native';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledBottomSheet: 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;
+}, {}, {}>;
+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 StyledHeaderWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledHeader: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    adjacentIcon: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledFooter: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, };

package/types/components/BottomSheet/__tests__/index.spec.d.ts

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

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

@@ -0,0 +1,51 @@
+import { ReactElement, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface BottomSheetProps {
+    /**
+     * Bottom sheet open state.
+     */
+    open: boolean;
+    /**
+     * Bottom sheet's header.
+     */
+    header?: string | ReactElement;
+    /**
+     * Bottom sheet's footer.
+     */
+    footer?: ReactNode;
+    /**
+     * Bottom sheet's content.
+     */
+    children?: ReactNode;
+    /**
+     * Callback is called when the Bottom Sheet is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback is called when the user taps the back button on Android or when the bottom sheet
+     * is being dismiss by interacting outside of the bottom sheet.
+     */
+    onRequestClose?: () => void;
+    /**
+     * Displays an X button on bottom sheet header that will invoke onRequestClose callback on press.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Enable the bottom sheet's backdrop.
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Displays dividers between header, footer and body.
+     */
+    showDivider?: boolean;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const BottomSheet: ({ open, header, footer, children, onOpen, onRequestClose, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
+export default BottomSheet;

package/types/components/Button/Button.d.ts

@@ -0,0 +1,57 @@
+import { ReactChild } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+import { Intent, ThemeVariant } from './StyledButton';
+export interface ButtonProps {
+    /**
+     * Helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+     */
+    accessibilityHint?: string;
+    /**
+     * A succinct label in a localized string that identifies the accessibility element
+     */
+    accessibilityLabel?: string;
+    /**
+     * Disable state of button.
+     */
+    disabled?: boolean;
+    /**
+     * Places an icon within the button, before the button's text
+     */
+    icon?: IconName;
+    /**
+     * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
+     */
+    intent?: 'primary' | 'secondary';
+    /**
+     * Loading state of button.
+     */
+    loading?: boolean;
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress: () => void;
+    /**
+     * Places an icon within the button, after the button's text
+     */
+    rightIcon?: IconName;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Button label.
+     */
+    text: ReactChild;
+    /**
+     * Button type.
+     */
+    variant?: 'basic-transparent' | 'filled' | 'outlined';
+}
+export declare const getThemeVariant: (variant: 'basic-transparent' | 'filled' | 'outlined', intent: Intent) => ThemeVariant;
+declare const Button: ({ accessibilityHint, accessibilityLabel, disabled, icon, intent, loading, onPress, rightIcon, style, testID, text, variant, }: ButtonProps) => JSX.Element;
+export default Button;