@hero-design/rn 6.8.0 → 7.0.2

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

@@ -0,0 +1,7 @@
+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, {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, never>;
+export default StyledHeroIcon;

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

@@ -0,0 +1,2 @@
+declare const IconList: readonly ["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", "image", "import", "incident-siren", "instapay", "list", "loading", "loading-2", "location", "lock", "media-content", "menu", "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", "switch", "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", "number", "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 default IconList;

package/types/src/components/Icon/__tests__/Icon.spec.d.ts

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

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

@@ -0,0 +1,27 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import IconList from './IconList';
+declare type IconName = typeof IconList[number];
+interface IconProps {
+    /**
+     * Name of the `Icon`.
+     */
+    icon: IconName;
+    /**
+     * Addditional style to be applied for `Icon`.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Size of the `Icon`.
+     */
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Intent of the `Icon`.
+     */
+    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Icon: ({ icon, style, size, intent, testID, }: IconProps) => JSX.Element;
+export default Icon;

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

@@ -0,0 +1,7 @@
+import { Text } from 'react-native';
+declare const StyledText: import("styled-components").StyledComponent<typeof Text, import("../../../theme").Theme, {
+    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
+    themeFontWeight: 'light' | 'regular' | 'semi-bold';
+    themeIntent: 'body' | 'subdued';
+}, never>;
+export { StyledText };

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

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

package/types/src/components/Typography/Text/__test__/index.spec.d.ts

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

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { TextProps as NativeTextProps } from 'react-native';
+interface TextProps extends NativeTextProps {
+    /**
+     * Text content.
+     */
+    children: ReactNode;
+    /**
+     * Size of the text.
+     */
+    fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Font weight of the text.
+     */
+    fontWeight?: 'light' | 'regular' | 'semi-bold';
+    /**
+     * Visual intent color to apply to the text.
+     */
+    intent?: 'body' | 'subdued';
+}
+declare const Text: ({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element;
+export default Text;

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

@@ -0,0 +1,6 @@
+import Text from './Text';
+interface TypographyProps {
+    Text: typeof Text;
+}
+declare const Typography: TypographyProps;
+export default Typography;

package/types/src/index.d.ts

@@ -0,0 +1,8 @@
+import { ThemeProvider, useTheme } from 'styled-components-native';
+import theme, { getTheme } from './theme';
+import Badge from './components/Badge';
+import Card from './components/Card';
+import Divider from './components/Divider';
+import Icon from './components/Icon';
+import Typography from './components/Typography';
+export { theme, getTheme, useTheme, ThemeProvider, Badge, Card, Divider, Icon, Typography, };

package/types/src/styled-components.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="styled-components-react-native" />
+import * as styledComponents from 'styled-components/native';
+import type { Theme } from './theme';
+declare const styled: styledComponents.ReactNativeStyledInterface<Theme>, useTheme: () => Theme, css: import("styled-components").ThemedCssFunction<Theme>, ThemeProvider: import("styled-components").ThemeProviderComponent<Theme, Theme>;
+export { useTheme, css, ThemeProvider };
+export default styled;

package/types/src/testHelpers/renderWithTheme.d.ts

@@ -0,0 +1,3 @@
+import { RenderOptions } from '@testing-library/react-native';
+declare const renderWithTheme: (ui: JSX.Element, options?: RenderOptions | undefined) => import("@testing-library/react-native").RenderAPI;
+export default renderWithTheme;

package/types/src/theme/__tests__/index.spec.d.ts

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

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

@@ -0,0 +1,29 @@
+import { GlobalTheme } from '../global';
+declare const getBadgeTheme: (theme: GlobalTheme) => {
+    borderWidths: {
+        default: string;
+    };
+    colors: {
+        danger: string;
+        dangerBackground: string;
+        info: string;
+        infoBackground: string;
+        success: string;
+        successBackground: string;
+        warning: string;
+        warningBackground: string;
+    };
+    padding: {
+        default: string;
+    };
+    fontSizes: {
+        default: string;
+    };
+    fontWeights: {
+        default: number;
+    };
+    radii: {
+        default: string;
+    };
+};
+export default getBadgeTheme;

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

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

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

@@ -0,0 +1,19 @@
+import { GlobalTheme } from '../global';
+declare const getIconTheme: (theme: GlobalTheme) => {
+    colors: {
+        text: string;
+        primary: string;
+        info: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    sizes: {
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+};
+export default getIconTheme;

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

@@ -0,0 +1,25 @@
+import { GlobalTheme } from '../global';
+declare const getTypographyTheme: (theme: GlobalTheme) => {
+    colors: {
+        body: string;
+        subdued: string;
+    };
+    fontSizes: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+    fontWeights: {
+        light: number;
+        regular: number;
+        semiBold: number;
+    };
+    lineHeights: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+};
+export default getTypographyTheme;

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

@@ -0,0 +1,26 @@
+import { palette } from '@hero-design/colors';
+declare const systemPalette: {
+    primary: string;
+    primaryLight: string;
+    info: string;
+    infoLight: string;
+    infoBackground: string;
+    success: string;
+    successDark: string;
+    successLight: string;
+    successBackground: string;
+    danger: string;
+    dangerLight: string;
+    dangerBackground: string;
+    warning: string;
+    warningDark: string;
+    warningBackground: string;
+    platformBackground: string;
+    backgroundLight: string;
+    backgroundDark: string;
+    text: string;
+    disabledText: string;
+    invertedText: string;
+    outline: string;
+};
+export { palette, systemPalette };

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

@@ -0,0 +1,67 @@
+declare const globalTheme: {
+    colors: {
+        primary: string;
+        primaryLight: string;
+        info: string;
+        infoLight: string;
+        infoBackground: string;
+        success: string;
+        successDark: string;
+        successLight: string;
+        successBackground: string;
+        danger: string;
+        dangerLight: string;
+        dangerBackground: string;
+        warning: string;
+        warningDark: string;
+        warningBackground: string;
+        platformBackground: string;
+        backgroundLight: string;
+        backgroundDark: string;
+        text: string;
+        disabledText: string;
+        invertedText: string;
+        outline: string;
+    };
+    space: {
+        xxsmall: number;
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+        xxlarge: number;
+        xxxlarge: number;
+        xxxxlarge: number;
+    };
+    fontSizes: {
+        xxxxxlarge: number;
+        xxxxlarge: number;
+        xxxlarge: number;
+        xxlarge: number;
+        xlarge: number;
+        large: number;
+        medium: number;
+        small: number;
+        xsmall: number;
+    };
+    fontWeights: {
+        light: number;
+        regular: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        xlarge: number;
+        large: number;
+        medium: number;
+        small: number;
+        xsmall: number;
+    };
+    borderWidths: {
+        base: number;
+    };
+};
+declare type GlobalTheme = typeof globalTheme;
+export { GlobalTheme };
+export default globalTheme;

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

@@ -0,0 +1,12 @@
+declare const space: {
+    xxsmall: number;
+    xsmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xlarge: number;
+    xxlarge: number;
+    xxxlarge: number;
+    xxxxlarge: number;
+};
+export { space };

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

@@ -0,0 +1,25 @@
+declare const fontSizes: {
+    xxxxxlarge: number;
+    xxxxlarge: number;
+    xxxlarge: number;
+    xxlarge: number;
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+declare const fontWeights: {
+    light: number;
+    regular: number;
+    semiBold: number;
+    bold: number;
+};
+declare const lineHeights: {
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+export { fontSizes, fontWeights, lineHeights };

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

@@ -0,0 +1,19 @@
+import { GlobalTheme } from './global';
+import getBadgeTheme from './components/badge';
+import getCardTheme from './components/card';
+import getDividerTheme from './components/divider';
+import getIconTheme from './components/icon';
+import getTypographyTheme from './components/typography';
+declare type Theme = GlobalTheme & {
+    __hd__: {
+        badge: ReturnType<typeof getBadgeTheme>;
+        card: ReturnType<typeof getCardTheme>;
+        divider: ReturnType<typeof getDividerTheme>;
+        icon: ReturnType<typeof getIconTheme>;
+        typography: ReturnType<typeof getTypographyTheme>;
+    };
+};
+declare const getTheme: (theme?: GlobalTheme) => Theme;
+declare const theme: Theme;
+export { Theme, getTheme };
+export default theme;

package/types/theme/colors.d.ts

@@ -0,0 +1,24 @@
+import { palette } from '@hero-design/colors';
+declare const systemPalette: {
+    primary: string;
+    primaryLight: string;
+    info: string;
+    infoLight: string;
+    infoBackground: string;
+    success: string;
+    successDark: string;
+    successLight: string;
+    successBackground: string;
+    danger: string;
+    dangerLight: string;
+    dangerBackground: string;
+    warning: string;
+    warningDark: string;
+    warningBackground: string;
+    platformBackground: string;
+    backgroundDark: string;
+    text: string;
+    disabledText: string;
+    invertedText: string;
+};
+export { palette, systemPalette };

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

@@ -0,0 +1,11 @@
+declare const demoStyleColors: {
+    primaryBg: string;
+    dangerBg: string;
+    warningBg: string;
+};
+declare const demoStyleSpace: {
+    smallMargin: number;
+    mediumMargin: number;
+    largeMargin: number;
+};
+export { demoStyleColors, demoStyleSpace };

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

@@ -0,0 +1,14 @@
+import { GlobalTheme } from '../global';
+declare const getExampleComponentTheme: (theme: GlobalTheme) => {
+    colors: {
+        primaryBg: string;
+        dangerBg: string;
+        warningBg: string;
+    };
+    space: {
+        smallMargin: number;
+        mediumMargin: number;
+        largeMargin: number;
+    };
+};
+export default getExampleComponentTheme;

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

@@ -16,11 +16,9 @@ declare const systemPalette: {
     warningDark: string;
     warningBackground: string;
     platformBackground: string;
-    backgroundLight: string;
     backgroundDark: string;
     text: string;
     disabledText: string;
     invertedText: string;
-    outline: string;
 };
 export { palette, systemPalette };

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

@@ -16,12 +16,10 @@ declare const globalTheme: {
         warningDark: string;
         warningBackground: string;
         platformBackground: string;
-        backgroundLight: string;
         backgroundDark: string;
         text: string;
         disabledText: string;
         invertedText: string;
-        outline: string;
     };
     space: {
         xxsmall: number;
@@ -54,9 +52,6 @@ declare const globalTheme: {
         small: number;
         xsmall: number;
     };
-    borderWidths: {
-        base: number;
-    };
 };
 declare type GlobalTheme = typeof globalTheme;
 export { GlobalTheme };

package/types/theme/index.d.ts

@@ -1,8 +1,8 @@
 import { GlobalTheme } from './global';
-import getDividerTheme from './components/divider';
+import getExampleComponentTheme from './components/exampleComponent';
 declare type Theme = GlobalTheme & {
     __hd__: {
-        divider: ReturnType<typeof getDividerTheme>;
+        exampleComponent: ReturnType<typeof getExampleComponentTheme>;
     };
 };
 declare const getTheme: (theme?: GlobalTheme) => Theme;

package/types/theme/space.d.ts

@@ -0,0 +1,12 @@
+declare const space: {
+    xxsmall: number;
+    xsmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xlarge: number;
+    xxlarge: number;
+    xxxlarge: number;
+    xxxxlarge: number;
+};
+export { space };

package/types/theme/typography.d.ts

@@ -0,0 +1,21 @@
+declare const fontSizes: {
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+declare const fontWeights: {
+    light: number;
+    regular: number;
+    semiBold: number;
+    bold: number;
+};
+declare const lineHeights: {
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+export { fontSizes, fontWeights, lineHeights };