@hero-design/rn 7.3.2 → 7.4.0

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
+export 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' | 'primary';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Text: ({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element;
+export default Text;

package/types/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/index.d.ts

@@ -0,0 +1,25 @@
+import { ThemeProvider, useTheme } from '@emotion/react';
+import theme, { getTheme } from './theme';
+import { scale } from './utils/scale';
+import Avatar from './components/Avatar';
+import Badge from './components/Badge';
+import BottomNavigation from './components/BottomNavigation';
+import BottomSheet from './components/BottomSheet';
+import Button from './components/Button';
+import Card from './components/Card';
+import Collapse from './components/Collapse';
+import ContentNavigator from './components/ContentNavigator';
+import Divider from './components/Divider';
+import Drawer from './components/Drawer';
+import FAB from './components/FAB';
+import Icon from './components/Icon';
+import Progress from './components/Progress';
+import Spinner from './components/Spinner';
+import Radio from './components/Radio';
+import SectionHeading from './components/SectionHeading';
+import Tabs from './components/Tabs';
+import Tag from './components/Tag';
+import TextInput from './components/TextInput';
+import Typography from './components/Typography';
+export { theme, getTheme, useTheme, scale, ThemeProvider, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, ContentNavigator, Divider, Drawer, FAB, Icon, Progress, Spinner, Radio, SectionHeading, Tabs, Tag, TextInput, Typography, };
+export * from './types';

package/types/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/theme/__tests__/index.spec.d.ts

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

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

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

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

@@ -0,0 +1,29 @@
+import { GlobalTheme } from '../global';
+declare const getBadgeTheme: (theme: GlobalTheme) => {
+    colors: {
+        danger: string;
+        info: string;
+        success: string;
+        warning: string;
+        archived: string;
+        text: string;
+    };
+    fonts: {
+        default: string;
+    };
+    fontSizes: {
+        default: number;
+    };
+    sizes: {
+        height: number;
+        minWidth: number;
+        statusHeight: number;
+        statusWidth: number;
+    };
+    space: {
+        horizontalPadding: number;
+        statusPositionTop: number;
+        statusPositionRight: number;
+    };
+};
+export default getBadgeTheme;

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

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+declare const getBottomNavigationTheme: (theme: GlobalTheme) => {
+    colors: {
+        shadow: string;
+        background: string;
+    };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+    };
+    sizes: {
+        height: number;
+    };
+    space: {
+        titleMarginTop: number;
+    };
+};
+export default getBottomNavigationTheme;

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

@@ -0,0 +1,29 @@
+import { GlobalTheme } from '../global';
+declare const getBottomSheetTheme: (theme: GlobalTheme) => {
+    colors: {
+        shadow: string;
+        background: string;
+        backdrop: string;
+    };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+    };
+    radii: {
+        default: number;
+    };
+    sizes: {
+        sectionHeight: number;
+        closeIconWidth: number;
+    };
+    space: {
+        horizontalPadding: number;
+        verticalPadding: number;
+    };
+};
+export default getBottomSheetTheme;

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

@@ -0,0 +1,37 @@
+import { GlobalTheme } from '../global';
+declare const getButtonTheme: (theme: GlobalTheme) => {
+    borderWidth: {
+        default: number;
+    };
+    fonts: {
+        default: string;
+    };
+    fontSize: {
+        default: number;
+    };
+    sizes: {
+        iconSize: number;
+    };
+    radii: {
+        default: number;
+    };
+    colors: {
+        primary: string;
+        pressedPrimary: string;
+        secondary: string;
+        pressedSecondary: string;
+        defaultText: string;
+        disabledText: string;
+        disabledBorder: string;
+        disabledBackground: string;
+        invertedText: string;
+    };
+    lineHeight: {
+        default: number;
+    };
+    space: {
+        buttonPadding: number;
+        iconPadding: number;
+    };
+};
+export default getButtonTheme;

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

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

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

@@ -0,0 +1,7 @@
+import { GlobalTheme } from '../global';
+declare const getContentNavigatorTheme: (theme: GlobalTheme) => {
+    space: {
+        valueHorizontalPadding: number;
+    };
+};
+export default getContentNavigatorTheme;

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

@@ -0,0 +1,17 @@
+import { GlobalTheme } from '../global';
+declare const getDividerTheme: (theme: GlobalTheme) => {
+    colors: {
+        default: string;
+    };
+    space: {
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+};
+export default getDividerTheme;

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

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getDrawerTheme: (theme: GlobalTheme) => {
+    colors: {
+        shadow: string;
+        background: string;
+        backdrop: string;
+    };
+    radii: {
+        default: number;
+    };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+    };
+};
+export default getDrawerTheme;

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

@@ -0,0 +1,51 @@
+import { GlobalTheme } from '../global';
+declare const getFABTheme: (theme: GlobalTheme) => {
+    radii: {
+        actionItem: number;
+    };
+    fonts: {
+        header: string;
+        actionItemText: string;
+        title: string;
+    };
+    fontSizes: {
+        header: number;
+        actionItemText: number;
+        title: number;
+    };
+    colors: {
+        buttonBackground: string;
+        icon: string;
+        headerText: string;
+        actionItemBackground: string;
+        backdropBackground: string;
+        titleText: string;
+    };
+    sizes: {
+        width: number;
+        height: number;
+    };
+    lineHeights: {
+        header: number;
+        actionItemText: number;
+        title: number;
+        icon: number;
+    };
+    space: {
+        actionItemPaddingLeft: number;
+        actionItemPaddingRight: number;
+        actionItemPaddingTop: number;
+        actionItemPaddingBottom: number;
+        actionItemMargin: number;
+        actionItemMarginRight: number;
+        actionItemTextPaddingLeft: number;
+        buttonMarginTop: number;
+        buttonMarginRight: number;
+        headerTextMarginRight: number;
+        headerTextMarginBottom: number;
+        containerPaddingHorizontal: number;
+        containerPaddingVertical: number;
+        titleMarginHorizontal: number;
+    };
+};
+export default getFABTheme;

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

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

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

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getProgressTheme: (theme: GlobalTheme) => {
+    colors: {
+        primary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        background: string;
+        innerBackground: string;
+    };
+    sizes: {
+        radius: number;
+        strokeWidth: number;
+        barHeight: number;
+    };
+    radii: {
+        default: number;
+    };
+};
+export default getProgressTheme;

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

@@ -0,0 +1,25 @@
+import { GlobalTheme } from '../global';
+declare const getRadioTheme: (theme: GlobalTheme) => {
+    sizes: {
+        circle: number;
+        innerCircle: number;
+    };
+    borderWidths: {
+        circle: number;
+    };
+    space: {
+        wrapperPadding: number;
+        circleLeftMargin: number;
+        groupTopMargin: number;
+    };
+    colors: {
+        circle: string;
+        checkedCircle: string;
+        wrapper: string;
+        checkedWrapper: string;
+    };
+    radii: {
+        wrapper: number;
+    };
+};
+export default getRadioTheme;

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

@@ -0,0 +1,15 @@
+import { GlobalTheme } from '../global';
+declare const getSpinnerTheme: (theme: GlobalTheme) => {
+    color: {
+        default: string;
+    };
+    space: {
+        spinnerDot: number;
+        spinnerDotPadding: number;
+        spinnerTextPaddingTop: number;
+    };
+    radii: {
+        default: number;
+    };
+};
+export default getSpinnerTheme;

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

@@ -0,0 +1,27 @@
+import { GlobalTheme } from '../global';
+declare const getTabsTheme: (theme: GlobalTheme) => {
+    borderWidths: {
+        headerBottom: number;
+    };
+    colors: {
+        active: string;
+        inactive: string;
+        activeBackground: string;
+        headerBottom: string;
+        text: string;
+    };
+    space: {
+        flatListHorizontalPadding: number;
+        itemHorizontalPadding: number;
+        itemVerticalPadding: number;
+        outlineHorizontalPadding: number;
+        outlineVerticalPadding: number;
+    };
+    radii: {
+        outline: number;
+    };
+    sizes: {
+        indicator: number;
+    };
+};
+export default getTabsTheme;

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

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

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

@@ -0,0 +1,24 @@
+import { GlobalTheme } from '../global';
+declare const getTextInputTheme: (theme: GlobalTheme) => {
+    colors: {
+        labelBackground: string;
+        border: string;
+    };
+    space: {
+        containerPadding: number;
+        labelLeft: number;
+        labelTop: number;
+        labelHorizontalPadding: number;
+        prefixMarginRight: number;
+    };
+    fontSizes: {
+        text: number;
+    };
+    borderWidths: {
+        container: number;
+    };
+    radii: {
+        container: number;
+    };
+};
+export default getTextInputTheme;

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

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

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

@@ -0,0 +1,14 @@
+interface BorderWidths {
+    base: number;
+    medium: number;
+}
+interface Radii {
+    rounded: number;
+    base: number;
+    medium: number;
+    large: number;
+    xlarge: number;
+}
+declare const getBorderWidths: (baseBorderWidth: number) => BorderWidths;
+declare const getRadii: (baseRadius: number) => Radii;
+export { BorderWidths, getBorderWidths, Radii, getRadii };

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

@@ -0,0 +1,32 @@
+declare const systemPalette: {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    primaryBackground: string;
+    secondary: string;
+    secondaryLight: string;
+    info: string;
+    infoLight: string;
+    infoBackground: string;
+    success: string;
+    successDark: 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;
+    disabledLightText: string;
+    invertedText: string;
+    outline: string;
+    archived: string;
+    black: string;
+};
+declare type SystemPalette = typeof systemPalette;
+export { systemPalette, SystemPalette };

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

@@ -0,0 +1,42 @@
+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;
+        primaryDark: string;
+        primaryBackground: string;
+        secondary: string;
+        secondaryLight: string;
+        info: string;
+        infoLight: string;
+        infoBackground: string;
+        success: string;
+        successDark: 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;
+        disabledLightText: string;
+        invertedText: string;
+        outline: string;
+        archived: string;
+        black: string;
+    };
+    fonts: import("./typography").Fonts;
+    fontSizes: import("./typography").FontSizes;
+    lineHeights: import("./typography").FontSizes;
+    borderWidths: import("./borders").BorderWidths;
+    space: import("./space").Space;
+    radii: import("./borders").Radii;
+};
+declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
+export { GlobalTheme, Scale, SystemPalette, getGlobalTheme, defaultScale, defaultSystemPalette, };

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

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