@hero-design/rn 7.3.2 → 7.6.0

package/types/components/Switch/StyledSwitch.d.ts

@@ -0,0 +1,36 @@
+import { Animated, View } from 'react-native';
+declare type ThemeSize = 'small' | 'medium';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeChecked: boolean | undefined;
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledDisabledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledThumbWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledKnot: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {}>;
+export { StyledWrapper, StyledDisabledWrapper, StyledThumbWrapper, StyledKnot };

package/types/components/Switch/__tests__/StyledHeading.spec.d.ts

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

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

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

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

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SwitchProps {
+    /**
+     * Control whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler.
+     */
+    onPress?: () => void;
+    /**
+     * Size of the switch
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Switch: ({ size, disabled, checked, onPress, style, testID, }: SwitchProps) => ReactElement;
+export default Switch;

package/types/{src/components → components}/Tabs/StyledScrollableTabs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
 import PagerView from 'react-native-pager-view';
 declare const TabScreen: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {

package/types/{src/components → components}/Tabs/StyledTabs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
 import PagerView from 'react-native-pager-view';
 declare const TabContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {

package/types/components/Tabs/__tests__/ScrollableTabs.spec.d.ts

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

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

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

package/types/{src/components → components}/Tag/StyledTag.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { View, Text } from 'react-native';
 declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {

package/types/components/Tag/__tests__/Tag.spec.d.ts

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

package/types/components/TextInput/StyledTextInput.d.ts

@@ -0,0 +1,18 @@
+import { TextInput, View } from 'react-native';
+declare const Container: 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 Label: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TextInput> | undefined;
+}>;
+export { Container, Label, StyledTextInput };

package/types/components/TextInput/__tests__/StyledTextInput.spec.d.ts

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

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

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

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

@@ -0,0 +1,34 @@
+import { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { IconName } from '../Icon';
+export interface TextInputProps extends NativeTextInputProps {
+    /**
+     * Field label.
+     */
+    label?: string;
+    /**
+     * Name of Icon to render on the left side of the input, before the user's cursor.
+     */
+    prefix?: IconName;
+    /**
+     * Name of Icon to render on the right side of the input.
+     */
+    suffix?: IconName;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Input text style.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Accessibility label for the input (Android).
+     */
+    accessibilityLabelledBy?: string;
+}
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, ...nativeProps }: TextInputProps) => JSX.Element;
+export default TextInput;

package/types/{src/components → components}/Typography/Text/StyledText.d.ts

@@ -1,4 +1,3 @@
-/// <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;

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

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

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

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

package/types/{src/index.d.ts → index.d.ts}

@@ -1,19 +1,28 @@
 import { ThemeProvider, useTheme } from '@emotion/react';
 import theme, { getTheme } from './theme';
 import { scale } from './utils/scale';
+import Alert from './components/Alert';
 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 Select from './components/Select';
+import Switch from './components/Switch';
 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, Button, Card, Collapse, Divider, Drawer, FAB, Icon, Progress, Tabs, Tag, Typography, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, ContentNavigator, Divider, Drawer, FAB, Icon, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Typography, };
 export * from './types';

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

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

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

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+declare const getAlertTheme: (theme: GlobalTheme) => {
+    colors: {
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        divider: string;
+    };
+    radii: {
+        default: number;
+    };
+    sizes: {
+        height: number;
+    };
+    space: {
+        padding: number;
+    };
+    borderWidths: {
+        base: number;
+    };
+};
+export default getAlertTheme;

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/contentNavigator.d.ts

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

package/types/{src/theme → theme}/components/icon.d.ts

@@ -7,6 +7,7 @@ declare const getIconTheme: (theme: GlobalTheme) => {
         danger: string;
         success: string;
         warning: string;
+        disabledText: string;
     };
     sizes: {
         xsmall: number;

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/sectionHeading.d.ts

@@ -0,0 +1,13 @@
+import { GlobalTheme } from '../global';
+declare const getSectionHeadingTheme: (theme: GlobalTheme) => {
+    colors: {
+        background: string;
+    };
+    space: {
+        headingVerticalPadding: number;
+        headingHorizontalPadding: number;
+        headingMarginBottom: number;
+        iconMarginRight: number;
+    };
+};
+export default getSectionHeadingTheme;

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

@@ -0,0 +1,17 @@
+import { GlobalTheme } from '../global';
+declare const getSelectTheme: (theme: GlobalTheme) => {
+    space: {
+        optionPadding: number;
+        optionListPadding: number;
+        optionListSpacing: number;
+    };
+    colors: {
+        option: string;
+        checkedOption: string;
+        footerText: string;
+    };
+    radii: {
+        option: number;
+    };
+};
+export default getSelectTheme;

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/switch.d.ts

@@ -0,0 +1,32 @@
+import { GlobalTheme } from '../global';
+declare const getSwitchTheme: (theme: GlobalTheme) => {
+    colors: {
+        thumb: string;
+        active: string;
+        inactive: string;
+    };
+    thumbSizes: {
+        small: number;
+        medium: number;
+    };
+    widths: {
+        small: number;
+        medium: number;
+    };
+    heights: {
+        small: number;
+        medium: number;
+    };
+    spaces: {
+        small: number;
+        medium: number;
+        inactive: number;
+    };
+    radii: {
+        rounded: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+};
+export default getSwitchTheme;

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;
+        inputHorizontalMargin: number;
+    };
+    fontSizes: {
+        text: number;
+    };
+    borderWidths: {
+        container: number;
+    };
+    radii: {
+        container: number;
+    };
+};
+export default getTextInputTheme;

package/types/{src/theme → theme}/global/borders.d.ts

@@ -1,10 +1,13 @@
 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;

package/types/{src/theme → theme}/global/colors.d.ts

@@ -6,6 +6,7 @@ declare const systemPalette: {
     secondary: string;
     secondaryLight: string;
     info: string;
+    infoMediumLight: string;
     infoLight: string;
     infoBackground: string;
     success: string;
@@ -26,6 +27,8 @@ declare const systemPalette: {
     invertedText: string;
     outline: string;
     archived: string;
+    black: string;
+    inactiveBackground: string;
 };
 declare type SystemPalette = typeof systemPalette;
 export { systemPalette, SystemPalette };

package/types/{src/theme → theme}/global/index.d.ts

@@ -9,6 +9,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         secondary: string;
         secondaryLight: string;
         info: string;
+        infoMediumLight: string;
         infoLight: string;
         infoBackground: string;
         success: string;
@@ -29,6 +30,8 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         invertedText: string;
         outline: string;
         archived: string;
+        black: string;
+        inactiveBackground: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;

package/types/{src/theme → theme}/index.d.ts

@@ -1,32 +1,50 @@
 import { GlobalTheme, Scale, SystemPalette } from './global';
+import getAlertTheme from './components/alert';
+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 getRadioTheme from './components/radio';
+import getSectionHeadingTheme from './components/sectionHeading';
+import getSelectTheme from './components/select';
+import getSpinnerTheme from './components/spinner';
+import getSwitchTheme from './components/switch';
+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';
 declare type Theme = GlobalTheme & {
     __hd__: {
+        alert: ReturnType<typeof getAlertTheme>;
         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>;
+        radio: ReturnType<typeof getRadioTheme>;
+        sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
+        select: ReturnType<typeof getSelectTheme>;
+        spinner: ReturnType<typeof getSpinnerTheme>;
+        switch: ReturnType<typeof getSwitchTheme>;
         tabs: ReturnType<typeof getTabsTheme>;
         tag: ReturnType<typeof getTagTheme>;
+        textInput: ReturnType<typeof getTextInputTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
-        fab: ReturnType<typeof getFABTheme>;
     };
 };
 declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;

package/types/utils/__tests__/scale.spec.d.ts

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

package/app.json

@@ -1,8 +0,0 @@
-{
-  "name": "Mobile Hero Design Playground",
-  "entryPoint": "expoEntry.js",
-  "owner": "thinkei",
-  "slug": "Mobile-Hero-Design-Playground"
-
-
-}

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

@@ -1,2 +0,0 @@
-declare const AvatarPlayground: () => JSX.Element;
-export default AvatarPlayground;

package/types/playground/components/Badge.d.ts

@@ -1,2 +0,0 @@
-declare const BadgePlayground: () => JSX.Element;
-export default BadgePlayground;

package/types/playground/components/BottomNavigation.d.ts

@@ -1,2 +0,0 @@
-declare const BottomNavigationPlayground: () => JSX.Element;
-export default BottomNavigationPlayground;

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

@@ -1,2 +0,0 @@
-declare const ButtonPlayground: () => JSX.Element;
-export default ButtonPlayground;

package/types/playground/components/Card.d.ts

@@ -1,2 +0,0 @@
-declare const CardPlayground: () => JSX.Element;
-export default CardPlayground;

package/types/playground/components/Collapse.d.ts

@@ -1,2 +0,0 @@
-declare const CollapsePlayground: () => JSX.Element;
-export default CollapsePlayground;

package/types/playground/components/Divider.d.ts

@@ -1,2 +0,0 @@
-declare const DividerPlayground: () => JSX.Element;
-export default DividerPlayground;

package/types/playground/components/Drawer.d.ts

@@ -1,2 +0,0 @@
-declare const DrawerPlayground: () => JSX.Element;
-export default DrawerPlayground;