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

package/types/components/Typography/Label/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+export interface LabelProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Visual intent color to apply to the text.
+     */
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Label: ({ children, intent, allowFontScaling, ...nativeProps }: LabelProps) => React.JSX.Element;
+export default Label;

package/types/components/Typography/Text/StyledText.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { Text } from 'react-native';
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeFontSize: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';

package/types/components/Typography/Text/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactNode } from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 export interface TextProps extends NativeTextProps {
@@ -32,5 +33,5 @@ export interface TextProps extends NativeTextProps {
      */
     typeface?: 'neutral' | 'playful';
 }
-declare const Text: ({ children, fontSize, fontWeight, intent, typeface, allowFontScaling, ...nativeProps }: TextProps) => JSX.Element;
+declare const Text: ({ children, fontSize, fontWeight, intent, typeface, allowFontScaling, ...nativeProps }: TextProps) => React.JSX.Element;
 export default Text;

package/types/components/Typography/Title/StyledTitle.d.ts

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+import { ThemeIntent } from '../types';
+declare type ThemeLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+declare const StyledTitle: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+    themeLevel: ThemeLevel;
+    themeTypeface: 'neutral' | 'playful';
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export { StyledTitle };

package/types/components/Typography/Title/__tests__/StyledTitle.d.ts

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

package/types/components/Typography/Title/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+export interface TitleProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Visual intent color to apply to the text.
+     */
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * The typeface to render the text in:
+     * - `neutral`: The default typeface for the platform.
+     * - `playful`: To visualise a playful content.
+     */
+    typeface?: 'neutral' | 'playful';
+    /**
+     * The level of Title including h1, h2, h3, h4, h5 and h6.
+     */
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+declare const Title: ({ children, intent, allowFontScaling, level, typeface, ...nativeProps }: TitleProps) => React.JSX.Element;
+export default Title;

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

@@ -1,6 +1,17 @@
 import Text from './Text';
+import Caption from './Caption';
+import Label from './Label';
+import Title from './Title';
+import Body from './Body';
 interface TypographyProps {
+    /**
+     * @deprecated Typography.Text will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
+     */
     Text: typeof Text;
+    Caption: typeof Caption;
+    Label: typeof Label;
+    Title: typeof Title;
+    Body: typeof Body;
 }
 declare const Typography: TypographyProps;
 export default Typography;

package/types/components/Typography/types.d.ts

@@ -0,0 +1,6 @@
+export declare const FONTWEIGHT_MAP: {
+    readonly light: "light";
+    readonly regular: "regular";
+    readonly 'semi-bold': "semiBold";
+};
+export declare type ThemeIntent = 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled';

package/types/index.d.ts

@@ -12,6 +12,7 @@ import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Carousel from './components/Carousel';
 import Card from './components/Card';
+import Chip from './components/Chip';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
@@ -21,6 +22,7 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import Error from './components/Error';
 import FAB from './components/FAB';
+import HeroDesignProvider from './components/HeroDesignProvider';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
@@ -42,8 +44,11 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
+import Rate from './components/Rate';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+import Portal from './components/Portal';
+import { ScrollViewWithFAB, SectionListWithFAB, FlatListWithFAB } from './components/AnimatedScroller';
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Image, HeroDesignProvider, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
 export * from './types';

package/types/theme/ThemeProvider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Theme } from './getTheme';
 export interface ThemeProviderProps {
     theme: Partial<Theme> | ((outerTheme: Theme) => Theme);

package/types/theme/ThemeSwitcher.d.ts

@@ -3,6 +3,6 @@ declare type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBe
 declare const ThemeSwitcher: ({ name, children, }: {
     name?: ThemeName | undefined;
     children: React.ReactNode;
-}) => JSX.Element;
-export declare const withTheme: <P extends Record<string, unknown>>(C: React.ComponentType<P>, themeName: ThemeName) => (props: React.PropsWithChildren<P>) => JSX.Element;
+}) => React.JSX.Element;
+export declare const withTheme: <P extends Record<string, unknown>>(C: React.ComponentType<P>, themeName: ThemeName) => (props: React.PropsWithChildren<P>) => React.JSX.Element;
 export default ThemeSwitcher;

package/types/theme/components/badge.d.ts

@@ -30,4 +30,19 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         default: number;
     };
 };
+declare type GetBadgeThemeReturnType = ReturnType<typeof getBadgeTheme>;
+export interface BadgeThemeType extends GetBadgeThemeReturnType {
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fonts: GetBadgeThemeReturnType['fonts'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fontSizes: GetBadgeThemeReturnType['fontSizes'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    lineHeights: GetBadgeThemeReturnType['lineHeights'];
+}
 export default getBadgeTheme;

package/types/theme/components/button.d.ts

@@ -1,5 +1,8 @@
 import type { GlobalTheme } from '../global';
 declare const getButtonTheme: (theme: GlobalTheme) => {
+    lineHeights: {
+        titleOfTextVariant: number;
+    };
     borderWidth: {
         default: number;
     };
@@ -50,4 +53,15 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         utilityPadding: number;
     };
 };
+declare type GetButtonThemeReturnType = ReturnType<typeof getButtonTheme>;
+export interface ButtonThemeType extends GetButtonThemeReturnType {
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fonts: GetButtonThemeReturnType['fonts'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fontSize: GetButtonThemeReturnType['fontSize'];
+}
 export default getButtonTheme;

package/types/theme/components/calendar.d.ts

@@ -21,6 +21,8 @@ declare const getCalendarTheme: (theme: GlobalTheme) => {
         rowVerticalPadding: number;
         headerVerticalPadding: number;
         headerHorizontalPadding: number;
+        headerMarginRight: number;
+        iosPickerMarginVertical: number;
     };
 };
 export default getCalendarTheme;

package/types/theme/components/cardCarousel.d.ts

@@ -1,16 +1,6 @@
 import type { GlobalTheme } from '../global';
 declare const getCardCarouselTheme: (theme: GlobalTheme) => {
-    shadows: {
-        offset: {
-            width: number;
-            height: number;
-        };
-        opacity: number;
-        radius: number;
-        elevation: number;
-    };
     colors: {
-        shadow: string;
         carouselItemBackground: string;
     };
     space: {

package/types/theme/components/carousel.d.ts

@@ -1,7 +1,6 @@
 import type { GlobalTheme } from '../global';
 declare const getCarouselTheme: (theme: GlobalTheme) => {
     space: {
-        headingMarginTop: number;
         headingMarginBottom: number;
         footerPaddingHorizontal: number;
         footerPaddingVertical: number;
@@ -19,4 +18,19 @@ declare const getCarouselTheme: (theme: GlobalTheme) => {
         heading: number;
     };
 };
+declare type GetCarouselThemeReturnType = ReturnType<typeof getCarouselTheme>;
+export interface CarouselThemeType extends GetCarouselThemeReturnType {
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fonts: GetCarouselThemeReturnType['fonts'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fontSizes: GetCarouselThemeReturnType['fontSizes'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    lineHeights: GetCarouselThemeReturnType['lineHeights'];
+}
 export default getCarouselTheme;

package/types/theme/components/checkbox.d.ts

@@ -1,8 +1,11 @@
 import type { GlobalTheme } from '../global';
 declare const getCheckboxTheme: (theme: GlobalTheme) => {
     colors: {
-        default: string;
-        disabledBorder: string;
+        borders: {
+            default: string;
+            disabled: string;
+            readonly: string;
+        };
     };
     space: {
         iconTop: number;

package/types/theme/components/chip.d.ts

@@ -0,0 +1,40 @@
+import type { GlobalTheme } from '../global';
+declare const getChipTheme: (theme: GlobalTheme) => {
+    colors: {
+        primaryBackground: string;
+        secondaryBackground: string;
+        filledBackground: string;
+        outlinedBackground: string;
+        wrapperBorder: string;
+        wrapperSelectedBorder: string;
+        selectedPrimaryText: string;
+    };
+    space: {
+        wrapperHorizontalPadding: number;
+        wrapperVerticalPadding: number;
+        iconWrapperMarginRight: number;
+    };
+    sizes: {
+        wrapperBorder: number;
+    };
+    radii: {
+        wrapper: number;
+    };
+    borderWidths: {
+        wrapper: number;
+        icon: number;
+    };
+    shadows: {
+        filledWrapper: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
+    };
+};
+export default getChipTheme;

package/types/theme/components/empty.d.ts

@@ -23,4 +23,15 @@ declare const getEmptyTheme: (theme: GlobalTheme) => {
         description: string;
     };
 };
+declare type GetEmptyThemeReturnType = ReturnType<typeof getEmptyTheme>;
+export interface EmptyThemeType extends GetEmptyThemeReturnType {
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fonts: GetEmptyThemeReturnType['fonts'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fontSizes: GetEmptyThemeReturnType['fontSizes'];
+}
 export default getEmptyTheme;

package/types/theme/components/error.d.ts

@@ -33,4 +33,19 @@ declare const getErrorTheme: (theme: GlobalTheme) => {
         description: number;
     };
 };
+declare type GetErrorThemeReturnType = ReturnType<typeof getErrorTheme>;
+export interface ErrorThemeType extends GetErrorThemeReturnType {
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fonts: GetErrorThemeReturnType['fonts'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fontSizes: GetErrorThemeReturnType['fontSizes'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    lineHeight: GetErrorThemeReturnType['lineHeight'];
+}
 export default getErrorTheme;

package/types/theme/components/fab.d.ts

@@ -4,26 +4,23 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         actionItem: number;
     };
     fonts: {
-        header: string;
         actionItemText: string;
         title: string;
     };
     fontSizes: {
-        header: number;
         actionItemText: number;
         title: number;
     };
     colors: {
         buttonBackground: string;
         buttonPressedBackground: string;
+        buttonActiveBackground: string;
         icon: string;
-        headerText: string;
         actionItemBackground: string;
         actionItemPressedBackground: string;
         backdropBackground: string;
         titleText: string;
         actionItemText: string;
-        shadow: string;
     };
     sizes: {
         width: number;
@@ -32,7 +29,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         iconContainerHeight: number;
     };
     lineHeights: {
-        header: number;
         actionItemText: number;
         title: number;
         icon: number;
@@ -45,6 +41,7 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         opacity: number;
         radius: number;
         elevation: number;
+        color: string;
     };
     space: {
         actionItemPadding: number;
@@ -53,10 +50,19 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         actionItemTextPaddingLeft: number;
         buttonMarginTop: number;
         buttonMarginRight: number;
-        headerTextMarginRight: number;
-        headerTextMarginBottom: number;
         containerPadding: number;
         titleMarginHorizontal: number;
     };
 };
+declare type GetFABThemeReturnType = ReturnType<typeof getFABTheme>;
+export interface FABThemeType extends GetFABThemeReturnType {
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fonts: GetFABThemeReturnType['fonts'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fontSizes: GetFABThemeReturnType['fontSizes'];
+}
 export default getFABTheme;

package/types/theme/components/list.d.ts

@@ -16,11 +16,11 @@ declare const getListTheme: (theme: GlobalTheme) => {
         leadingStatusMarginRight: number;
         prefixContainerMarginRight: number;
         suffixContainerMarginLeft: number;
+        childrenContainerTopMargin: number;
     };
     radii: {
-        card: number;
+        item: number;
         basicItem: number;
-        cardShadow: number;
         leadingStatus: number;
     };
     widths: {
@@ -29,14 +29,18 @@ declare const getListTheme: (theme: GlobalTheme) => {
     opacity: {
         disabled: number;
         enabled: number;
-        cardShadow: number;
     };
     shadows: {
-        cardOffset: {
-            width: number;
-            height: number;
+        card: {
+            offset: {
+                width: number;
+                height: number;
+            };
+            elevation: number;
+            color: string;
+            radius: number;
+            opacity: number;
         };
-        cardElevation: number;
     };
 };
 export default getListTheme;

package/types/theme/components/pinInput.d.ts

@@ -36,4 +36,19 @@ declare const getPinInputTheme: (theme: GlobalTheme) => {
         mask: number;
     };
 };
+declare type GetPinInputThemeReturnType = ReturnType<typeof getPinInputTheme>;
+export interface PinInputThemeType extends GetPinInputThemeReturnType {
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fonts: GetPinInputThemeReturnType['fonts'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fontSizes: GetPinInputThemeReturnType['fontSizes'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    lineHeights: GetPinInputThemeReturnType['lineHeights'];
+}
 export default getPinInputTheme;

package/types/theme/components/radio.d.ts

@@ -9,10 +9,16 @@ declare const getRadioTheme: (theme: GlobalTheme) => {
     };
     space: {
         circleLeftMargin: number;
-        groupTopMargin: number;
+        groupTopMarginSmall: number;
+        groupTopMarginMedium: number;
     };
     colors: {
         circle: string;
+        checked: string;
+        intents: {
+            light: string;
+            dark: string;
+        };
     };
 };
 export default getRadioTheme;

package/types/theme/components/rate.d.ts

@@ -0,0 +1,11 @@
+import type { GlobalTheme } from '../global';
+declare const getRateTheme: (theme: GlobalTheme) => {
+    colors: {
+        iconStroke: string;
+    };
+    spaces: {
+        iconWrapperPadding: number;
+        iconWrapperMarginRight: number;
+    };
+};
+export default getRateTheme;

package/types/theme/components/sectionHeading.d.ts

@@ -2,6 +2,7 @@ import type { GlobalTheme } from '../global';
 declare const getSectionHeadingTheme: (theme: GlobalTheme) => {
     colors: {
         background: string;
+        backgroundSmall: string;
     };
     space: {
         headingVerticalPadding: number;

package/types/theme/components/success.d.ts

@@ -29,4 +29,15 @@ declare const getSuccessTheme: (theme: GlobalTheme) => {
         description: string;
     };
 };
+declare type GetSuccessThemeReturnType = ReturnType<typeof getSuccessTheme>;
+export interface SuccessThemeType extends GetSuccessThemeReturnType {
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fonts: GetSuccessThemeReturnType['fonts'];
+    /**
+     * @deprecated will be removed in v9
+     * */
+    fontSizes: GetSuccessThemeReturnType['fontSizes'];
+}
 export default getSuccessTheme;

package/types/theme/components/swipeable.d.ts

@@ -4,6 +4,13 @@ declare const getSwipeableTheme: (theme: GlobalTheme) => {
         success: string;
         danger: string;
         primary: string;
+        defaultContainerBackground: string;
+    };
+    radii: {
+        swipeableContainer: number;
+    };
+    space: {
+        containerExtraWidth: number;
     };
 };
 export default getSwipeableTheme;

package/types/theme/components/switch.d.ts

@@ -25,7 +25,7 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
         paddingHorizontal: number;
         selector: {
             iconPadding: number;
-            wrapperPadding: number;
+            wrapperHorizontalPadding: number;
         };
     };
     radii: {

package/types/theme/components/tabs.d.ts

@@ -18,6 +18,7 @@ declare const getTabsTheme: (theme: GlobalTheme) => {
         itemMargin: number;
         outlineHorizontalPadding: number;
         outlineVerticalPadding: number;
+        tabIndicatorBottom: number;
     };
     radii: {
         outline: number;