@hero-design/rn 7.1.3-alpha5 → 7.1.3-alpha8

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

@@ -1,12 +1,30 @@
+/// <reference types="react" />
 import { Animated, View, ViewProps } from 'react-native';
 import { TextProps } from '../../Typography/Text';
-declare const StyledContainer: import("styled-components").StyledComponent<typeof View, import("../../../theme").Theme, ViewProps, never>;
-declare const StyledActionGroupContainer: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof View>, import("../../../theme").Theme, Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledContainer: 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 StyledActionGroupContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
-}, never>;
-declare const StyledFAB: import("styled-components").StyledComponent<({ onPress, icon, animated, testID, active, style }: import("../FAB").FABProps) => JSX.Element, import("../../../theme").Theme, {}, never>;
-declare const StyledBackdrop: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof View>, import("../../../theme").Theme, Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
-}, never>;
-declare const StyledHeaderText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element, import("../../../theme").Theme, TextProps, never>;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledHeaderText: import("@emotion/native").StyledComponent<TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
 export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };

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

@@ -1,4 +1,13 @@
+/// <reference types="react" />
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-declare const StyledActionItem: import("styled-components").StyledComponent<typeof TouchableOpacity, import("../../../theme").Theme, TouchableOpacityProps, never>;
-declare const StyledActionItemText: import("styled-components").StyledComponent<({ children, fontSize, fontWeight, intent, ...nativeProps }: import("../../Typography/Text").TextProps) => JSX.Element, import("../../../theme").Theme, TouchableOpacityProps, never>;
+declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TouchableOpacityProps, {}, {}>;
 export { StyledActionItem, StyledActionItemText };

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

@@ -11,7 +11,7 @@ export interface ActionGroupProps {
      * */
     active?: boolean;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -1,13 +1,13 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import { IconProps } from '../Icon';
+import { IconName } from '../Icon';
 export interface FABProps {
     /**
      * Name of the Icon.
      */
-    icon: IconProps['icon'];
+    icon: IconName;
     /**
      * This function is called on pressing the button.
-     * */
+     */
     onPress?: () => void;
     /**
      * Specify if the button is animated.
@@ -18,7 +18,7 @@ export interface FABProps {
      */
     active?: boolean;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/src/components/FAB/StyledFAB.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
+import { IconProps } from '../Icon';
+declare const StyledFABContainer: import("@emotion/native").StyledComponent<TouchableHighlightProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
+}>;
+declare const StyledFABIcon: import("@emotion/native").StyledComponent<IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledFABContainer, StyledFABIcon };

package/types/src/components/Icon/HeroIcon/index.d.ts

@@ -1,7 +1,13 @@
+/// <reference types="react" />
 declare type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
-declare const StyledHeroIcon: import("styled-components").StyledComponent<typeof import("react-native-vector-icons/Icon").Icon, import("../../../theme").Theme, {
+declare const StyledHeroIcon: import("@emotion/native").StyledComponent<import("react-native-vector-icons/Icon").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeSize: ThemeSize;
     themeIntent: ThemeIntent;
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<import("react-native-vector-icons/Icon").Icon> | undefined;
+}>;
 export default StyledHeroIcon;

package/types/src/components/Icon/index.d.ts

@@ -1,6 +1,6 @@
 import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
-declare type IconName = typeof IconList[number];
+export declare type IconName = typeof IconList[number];
 export interface IconProps {
     /**
      * Name of the Icon.

package/types/src/components/Icon/utils.d.ts

@@ -1,2 +1,2 @@
-declare const isHeroIcon: (x: any) => x is "number" | "menu" | "image" | "switch" | "bold" | "target" | "restart" | "directory" | "document" | "feed" | "list" | "loading" | "sync" | "user" | "send" | "file" | "activate" | "add-person" | "adjustment" | "alignment" | "bank" | "bell" | "billing" | "bookmark" | "box-check" | "box" | "buildings" | "cake" | "calendar-clock" | "calendar" | "carat-down-small" | "carat-down" | "carat-left" | "carat-right" | "carat-up" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "dollar-coin-shine" | "double-buildings" | "edit-template" | "envelope" | "expense" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "folder-user" | "folder" | "funnel-filter" | "global-dollar" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "home" | "import" | "incident-siren" | "instapay" | "loading-2" | "location" | "lock" | "media-content" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "node" | "open-folder" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane" | "play-circle" | "print" | "raising-hands" | "reply" | "reschedule" | "rostering" | "save" | "schedule" | "search-person" | "speaker" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "survey" | "tag" | "teams" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "video-1" | "video-2" | "activate-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell-outlined" | "billing-outlined" | "body-outlined" | "bookmark-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calendar-dates-outlined" | "calendar-star-outlined" | "camera-outlined" | "cancel" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-outlined" | "cog-outlined" | "coin-outlined" | "comment-outlined" | "contacts-outlined" | "credit-card-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-coin-shine-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-outlined" | "edit-template-outlined" | "email-outlined" | "enter-arrow" | "envelope-outlined" | "expense-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "feed-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-verified-outlined" | "folder-outlined" | "folder-user-outlined" | "funnel-filter-outline" | "graph-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "home-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "italic" | "link-1" | "link-2" | "list-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "multiple-folders-outlined" | "multiple-users-outlined" | "node-outlined" | "number-points" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "print-outlined" | "qr-code-outlined" | "re-assign" | "refresh" | "remove" | "reply-outlined" | "return-arrow" | "rostering-outlined" | "save-outlined" | "schedule-outlined" | "search-outlined" | "send-outlined" | "share-1" | "share-2" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "speaker-outlined" | "star-outlined" | "stopwatch-outlined" | "strikethrough" | "survey-outlined" | "switch-outlined" | "target-outlined" | "timesheet-outlined" | "transfer" | "trash-bin-outlined" | "unavailable" | "underline" | "unlock-outlined" | "upload-outlined" | "user-outlined" | "video-1-outlined" | "video-2-outlined";
+declare const isHeroIcon: (x: any) => x is "number" | "image" | "menu" | "switch" | "list" | "activate" | "add-person" | "adjustment" | "alignment" | "bank" | "bell" | "billing" | "bookmark" | "box-check" | "box" | "buildings" | "cake" | "calendar-clock" | "calendar" | "carat-down-small" | "carat-down" | "carat-left" | "carat-right" | "carat-up" | "circle-add" | "circle-cancel" | "circle-check" | "circle-down" | "circle-info" | "circle-left" | "circle-ok" | "circle-pencil" | "circle-question" | "circle-remove" | "circle-right" | "circle-up" | "circle-warning" | "clock" | "cloud-download" | "cloud-upload" | "cog" | "coin" | "contacts" | "credit-card" | "diamond" | "direction-arrows" | "directory" | "document" | "dollar-coin-shine" | "double-buildings" | "edit-template" | "envelope" | "expense" | "eye-circle" | "eye-invisible" | "eye" | "face-meh" | "face-sad" | "face-smiley" | "feed" | "feedbacks" | "file-certified" | "file-clone" | "file-copy" | "file-csv" | "file-dispose" | "file-doc" | "file-excel" | "file-export" | "file-lock" | "file-pdf" | "file-powerpoint" | "file-search" | "file-secured" | "file-sheets" | "file-slide" | "file-verified" | "file-word" | "file" | "folder-user" | "folder" | "funnel-filter" | "global-dollar" | "globe" | "graduation-cap" | "graph" | "happy-sun" | "health-bag" | "heart" | "home" | "import" | "incident-siren" | "instapay" | "loading" | "loading-2" | "location" | "lock" | "media-content" | "moneybag" | "moon" | "multiple-stars" | "multiple-users" | "node" | "open-folder" | "paperclip" | "payment-summary" | "pencil" | "phone" | "piggy-bank" | "plane" | "play-circle" | "print" | "raising-hands" | "reply" | "reschedule" | "rostering" | "save" | "schedule" | "search-person" | "send" | "speaker" | "star-medal" | "star" | "steps-circle" | "stopwatch" | "suitcase" | "survey" | "tag" | "target" | "teams" | "timesheet" | "touch-id" | "trash-bin" | "unlock" | "user" | "video-1" | "video-2" | "activate-outlined" | "add-person-outlined" | "add-section-outlined" | "add-time-outlined" | "add" | "adjustment-outlined" | "alignment-2-outlined" | "alignment-outlined" | "all-caps" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell-outlined" | "billing-outlined" | "body-outlined" | "bold" | "bookmark-outlined" | "box-check-outlined" | "box-outlined" | "bullet-points" | "cake-outlined" | "calendar-dates-outlined" | "calendar-star-outlined" | "camera-outlined" | "cancel" | "checkmark" | "circle-add-outlined" | "circle-cancel-outlined" | "circle-down-outlined" | "circle-info-outlined" | "circle-left-outlined" | "circle-ok-outlined" | "circle-question-outlined" | "circle-remove-outlined" | "circle-right-outlined" | "circle-up-outlined" | "circle-warning-outlined" | "clock-2-outlined" | "clock-outlined" | "cog-outlined" | "coin-outlined" | "comment-outlined" | "contacts-outlined" | "credit-card-outlined" | "direction-arrows-outlined" | "directory-outlined" | "document-outlined" | "dollar-coin-shine-outlined" | "dollar-sign" | "double-buildings-outlined" | "double-left-arrows" | "double-right-arrows" | "download-outlined" | "edit-template-outlined" | "email-outlined" | "enter-arrow" | "envelope-outlined" | "expense-outlined" | "external-link" | "eye-invisible-outlined" | "eye-outlined" | "face-id" | "face-meh-outlined" | "face-open-smiley-outlined" | "face-sad-outlined" | "face-smiley-outlined" | "feed-outlined" | "file-certified-outlined" | "file-clone-outlined" | "file-copy-outlined" | "file-dispose-outlined" | "file-download-outlined" | "file-export-outlined" | "file-lock-outlined" | "file-outlined" | "file-search-outlined" | "file-secured-outlined" | "file-verified-outlined" | "folder-outlined" | "folder-user-outlined" | "funnel-filter-outline" | "graph-outlined" | "happy-sun-outlined" | "health-bag-outlined" | "heart-outlined" | "home-outlined" | "image-outlined" | "import-outlined" | "instapay-outlined" | "italic" | "link-1" | "link-2" | "list-outlined" | "location-outlined" | "lock-outlined" | "locked-file-outlined" | "log-out" | "media-content-outlined" | "menu-close" | "menu-expand" | "menu-fold-outlined" | "menu-unfold-outlined" | "moneybag-outlined" | "moon-outlined" | "more-horizontal" | "more-vertical" | "multiple-folders-outlined" | "multiple-users-outlined" | "node-outlined" | "number-points" | "payment-summary-outlined" | "payslip-outlined" | "pencil-outlined" | "percentage" | "phone-outlined" | "piggy-bank-outlined" | "plane-outlined" | "play-circle-outlined" | "print-outlined" | "qr-code-outlined" | "re-assign" | "refresh" | "remove" | "reply-outlined" | "restart" | "return-arrow" | "rostering-outlined" | "save-outlined" | "schedule-outlined" | "search-outlined" | "send-outlined" | "share-1" | "share-2" | "single-down-arrow" | "single-left-arrow" | "single-right-arrow" | "single-up-arrow" | "speaker-outlined" | "star-outlined" | "stopwatch-outlined" | "strikethrough" | "survey-outlined" | "switch-outlined" | "sync" | "target-outlined" | "timesheet-outlined" | "transfer" | "trash-bin-outlined" | "unavailable" | "underline" | "unlock-outlined" | "upload-outlined" | "user-outlined" | "video-1-outlined" | "video-2-outlined";
 export { isHeroIcon };

package/types/src/components/Tabs/StyledTabs.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { View, FlatList } from 'react-native';
+declare const TabScreen: 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 TabContainer: 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 HeaderTabWrapper: 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 StyledFlatList: new <T>() => FlatList<T>;
+declare const HeaderTabItem: 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 StyledHeaderTabIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeActive: boolean;
+}, {}, {}>;
+declare const StyledHeaderTabText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeActive: boolean;
+}, {}, {}>;
+export { StyledFlatList, HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, ContentWrapper, StyledHeaderTabIcon, StyledHeaderTabText, };

package/types/src/components/Tabs/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 TabType = {
+    key: string;
+    title: string;
+    icon: IconName;
+    component: ReactNode;
+    testID?: string;
+};
+interface TabsProps 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;
+    }[];
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Tabs: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: TabsProps) => JSX.Element;
+export default Tabs;

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

@@ -1,7 +1,13 @@
+/// <reference types="react" />
 import { Text } from 'react-native';
-declare const StyledText: import("styled-components").StyledComponent<typeof Text, import("../../../theme").Theme, {
+declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
     themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary';
-}, never>;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
 export { StyledText };

package/types/src/index.d.ts

@@ -1,11 +1,14 @@
-import { ThemeProvider, useTheme } from 'styled-components-native';
+import { ThemeProvider, useTheme } from '@emotion/react';
 import theme, { getTheme } from './theme';
 import { scale } from './utils/scale';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
+import Button from './components/Button';
 import Card from './components/Card';
 import Divider from './components/Divider';
+import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Tabs from './components/Tabs';
 import Typography from './components/Typography';
-import FAB from './components/FAB';
-export { theme, getTheme, useTheme, scale, ThemeProvider, Badge, BottomNavigation, Card, Divider, Icon, Typography, FAB, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, Badge, BottomNavigation, Button, Card, Divider, FAB, Icon, Tabs, Typography, };
+export * from './types';

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

@@ -1,7 +1,7 @@
 import { GlobalTheme } from '../global';
 declare const getBadgeTheme: (theme: GlobalTheme) => {
     borderWidths: {
-        default: string;
+        default: number;
     };
     colors: {
         danger: string;
@@ -13,17 +13,18 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         warning: string;
         warningBackground: string;
     };
-    padding: {
+    font: {
         default: string;
     };
-    fonts: {
-        default: string;
+    fontSize: {
+        default: number;
     };
-    fontSizes: {
-        default: string;
+    space: {
+        horizontalPadding: number;
+        verticalPadding: number;
     };
     radii: {
-        default: string;
+        default: number;
     };
 };
 export default getBadgeTheme;

package/types/src/theme/components/bottomNavigation.d.ts

@@ -5,13 +5,19 @@ declare const getBottomNavigationTheme: (theme: GlobalTheme) => {
         background: string;
     };
     shadows: {
-        offset: string;
+        offset: {
+            width: number;
+            height: number;
+        };
         opacity: number;
-        radius: string;
+        radius: number;
         elevation: number;
     };
     sizes: {
         height: number;
     };
+    space: {
+        titleMarginTop: number;
+    };
 };
 export default getBottomNavigationTheme;

package/types/src/theme/components/card.d.ts

@@ -1,10 +1,10 @@
 import { GlobalTheme } from '../global';
 declare const getCardTheme: (theme: GlobalTheme) => {
     radii: {
-        default: string;
+        default: number;
     };
     padding: {
-        default: string;
+        default: number;
     };
 };
 export default getCardTheme;

package/types/src/theme/components/divider.d.ts

@@ -4,14 +4,14 @@ declare const getDividerTheme: (theme: GlobalTheme) => {
         default: string;
     };
     space: {
-        xsmall: string;
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
     };
     borderWidths: {
-        default: string;
+        default: number;
     };
 };
 export default getDividerTheme;

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

@@ -1,16 +1,16 @@
 import { GlobalTheme } from '../global';
 declare const getFABTheme: (theme: GlobalTheme) => {
     radii: {
-        actionItem: string;
+        actionItem: number;
     };
     fonts: {
         header: string;
         actionItemText: string;
     };
     fontSizes: {
-        header: string;
-        buttonIcon: string;
-        actionItemText: string;
+        header: number;
+        buttonIcon: number;
+        actionItemText: number;
     };
     colors: {
         buttonBackground: string;
@@ -20,23 +20,25 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         backdropBackground: string;
     };
     sizes: {
-        width: string;
-        height: string;
+        width: number;
+        height: number;
     };
     lineHeights: {
-        header: string;
-        actionItemText: string;
+        header: number;
+        actionItemText: number;
     };
     space: {
-        actionItemPaddingLeft: string;
-        actionItemPaddingRight: string;
-        actionItemPaddingTop: string;
-        actionItemPaddingBottom: string;
-        actionItemMargin: string;
-        actionItemMarginRight: string;
-        actionItemTextPaddingLeft: string;
-        headerTextMarginRight: string;
-        headerTextMarginBottom: string;
+        actionItemPaddingLeft: number;
+        actionItemPaddingRight: number;
+        actionItemPaddingTop: number;
+        actionItemPaddingBottom: number;
+        actionItemMargin: number;
+        actionItemMarginRight: number;
+        actionItemTextPaddingLeft: number;
+        buttonMarginTop: number;
+        buttonMarginRight: number;
+        headerTextMarginRight: number;
+        headerTextMarginBottom: number;
     };
 };
 export default getFABTheme;

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

@@ -0,0 +1,15 @@
+import { GlobalTheme } from '../global';
+declare const getTabsTheme: (theme: GlobalTheme) => {
+    colors: {
+        background: string;
+        active: string;
+        inactive: string;
+    };
+    space: {
+        flatListHorizontalPadding: number;
+        titleMarginLeft: number;
+        itemHorizontalPadding: number;
+        itemVerticalPadding: number;
+    };
+};
+export default getTabsTheme;

package/types/src/theme/components/typography.d.ts

@@ -17,10 +17,10 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
     };
     lineHeights: {
-        small: string;
-        medium: string;
-        large: string;
-        xlarge: string;
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
     };
 };
 export default getTypographyTheme;

package/types/src/theme/global/borders.d.ts

@@ -1,4 +1,5 @@
-declare const borderWidths: {
+interface BorderWidths {
     base: number;
-};
-export { borderWidths };
+}
+declare const getBorderWidths: (baseBorderWidth: number) => BorderWidths;
+export { BorderWidths, getBorderWidths };

package/types/src/theme/global/colors.d.ts

@@ -1,4 +1,3 @@
-import { palette } from '@hero-design/colors';
 declare const systemPalette: {
     primary: string;
     primaryLight: string;
@@ -23,4 +22,5 @@ declare const systemPalette: {
     invertedText: string;
     outline: string;
 };
-export { palette, systemPalette };
+declare type SystemPalette = typeof systemPalette;
+export { systemPalette, SystemPalette };

package/types/src/theme/global/index.d.ts

@@ -1,4 +1,6 @@
-declare const globalTheme: {
+import { scale as defaultScale, Scale } from './scale';
+import { systemPalette as defaultSystemPalette, SystemPalette } from './colors';
+declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     colors: {
         primary: string;
         primaryLight: string;
@@ -23,48 +25,11 @@ declare const globalTheme: {
         invertedText: string;
         outline: string;
     };
-    space: {
-        xxsmall: number;
-        xsmall: number;
-        small: number;
-        medium: number;
-        large: number;
-        xlarge: number;
-        xxlarge: number;
-        xxxlarge: number;
-        xxxxlarge: number;
-    };
-    fonts: {
-        light: string;
-        regular: string;
-        semiBold: string;
-    };
-    fontSizes: {
-        xxxxxlarge: number;
-        xxxxlarge: number;
-        xxxlarge: number;
-        xxlarge: number;
-        xlarge: number;
-        large: number;
-        medium: number;
-        small: number;
-        xsmall: number;
-    };
-    lineHeights: {
-        xxxxxlarge: number;
-        xxxxlarge: number;
-        xxxlarge: number;
-        xxlarge: number;
-        xlarge: number;
-        large: number;
-        medium: number;
-        small: number;
-        xsmall: number;
-    };
-    borderWidths: {
-        base: number;
-    };
+    fonts: import("./typography").Fonts;
+    fontSizes: import("./typography").FontSizes;
+    lineHeights: import("./typography").FontSizes;
+    borderWidths: import("./borders").BorderWidths;
+    space: import("./space").Space;
 };
-declare type GlobalTheme = typeof globalTheme;
-export { GlobalTheme };
-export default globalTheme;
+declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
+export { GlobalTheme, Scale, SystemPalette, getGlobalTheme, defaultScale, defaultSystemPalette, };

package/types/src/theme/global/scale.d.ts

@@ -0,0 +1,8 @@
+declare const scale: {
+    borderWidth: number;
+    space: number;
+    font: string;
+    fontSize: number;
+};
+declare type Scale = typeof scale;
+export { scale, Scale };

package/types/src/theme/global/space.d.ts

@@ -1,12 +1,13 @@
-declare const space: {
-    xxsmall: number;
-    xsmall: number;
-    small: number;
-    medium: number;
+interface Space {
     large: number;
+    medium: number;
+    small: number;
     xlarge: number;
+    xsmall: number;
     xxlarge: number;
+    xxsmall: number;
     xxxlarge: number;
     xxxxlarge: number;
-};
-export { space };
+}
+declare const getSpace: (baseSpace: number) => Space;
+export { Space, getSpace };