@hero-design/rn 7.6.1-alpha.0 → 7.8.0

package/types/components/Toolbar/ToolbarGroup.d.ts

@@ -0,0 +1,13 @@
+import { ToolbarItemProps } from './ToolbarItem';
+export interface ToolbarGroupProps {
+    /**
+     * List of action items in the toolbar group.
+     */
+    items?: ToolbarItemProps[];
+    /**
+     * Alignment of the items in the group.
+     */
+    align: 'left' | 'center' | 'right';
+}
+declare const ToolbarGroup: ({ align, items }: ToolbarGroupProps) => JSX.Element;
+export default ToolbarGroup;

package/types/components/Toolbar/ToolbarItem.d.ts

@@ -0,0 +1,25 @@
+import { IconName } from '../Icon';
+export interface ToolbarItemProps {
+    /**
+     * Visual intent of the toolbar item.
+     */
+    intent?: 'primary' | 'info' | 'success' | 'danger' | 'warning';
+    /**
+     * Icon of the toolbar item.
+     */
+    icon?: IconName;
+    /**
+     * Action label of the toolbar item.
+     */
+    label?: string;
+    /**
+     * Callback that trigger when user press the toolbar item.
+     */
+    onPress?: () => void;
+    /**
+     * Whether the toolbar item is disabled.
+     */
+    disabled?: boolean;
+}
+declare const ToolbarItem: ({ icon, label, onPress, intent, disabled, }: ToolbarItemProps) => JSX.Element;
+export default ToolbarItem;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface ToolbarProps {
+    /**
+     * Toolbar's content.
+     */
+    children?: ReactNode;
+}
+declare const _default: (({ children }: ToolbarProps) => JSX.Element) & {
+    Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => JSX.Element;
+};
+export default _default;

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

@@ -5,7 +5,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
 } & {
     themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
-    themeIntent: 'body' | 'subdued' | 'primary';
+    themeIntent: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

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

@@ -16,9 +16,9 @@ export interface TextProps extends NativeTextProps {
     /**
      * Visual intent color to apply to the text.
      */
-    intent?: 'body' | 'subdued' | 'primary';
+    intent?: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<TextStyle>;
     /**

package/types/index.d.ts

@@ -8,11 +8,13 @@ import BottomSheet from './components/BottomSheet';
 import Button from './components/Button';
 import Card from './components/Card';
 import Collapse from './components/Collapse';
+import Checkbox from './components/Checkbox';
 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 List from './components/List';
 import Progress from './components/Progress';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
@@ -22,6 +24,8 @@ import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
 import TextInput from './components/TextInput';
+import Toast from './components/Toast';
+import Toolbar from './components/Toolbar';
 import Typography from './components/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 { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, Checkbox, ContentNavigator, Divider, Drawer, FAB, Icon, List, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Toast, Toolbar, Typography, };
 export * from './types';

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

@@ -20,6 +20,8 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         pressedPrimary: string;
         secondary: string;
         pressedSecondary: string;
+        danger: string;
+        pressedDanger: string;
         defaultText: string;
         disabledText: string;
         disabledBorder: string;

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

@@ -2,6 +2,13 @@ import { GlobalTheme } from '../global';
 declare const getCardTheme: (theme: GlobalTheme) => {
     colors: {
         dataCardIndicator: string;
+        indicator: {
+            archived: string;
+            info: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
     };
     radii: {
         default: number;

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

@@ -0,0 +1,40 @@
+import { GlobalTheme } from '../global';
+declare const getListTheme: (theme: GlobalTheme) => {
+    colors: {
+        checkedListItemContainerBackground: string;
+        listItemContainerBackground: string;
+        leadingStatus: {
+            danger: string;
+            info: string;
+            success: string;
+            warning: string;
+            archived: string;
+        };
+    };
+    space: {
+        listItemContainerPadding: number;
+        leadingStatusMarginRight: number;
+        prefixContainerMarginRight: number;
+        suffixContainerMarginLeft: number;
+    };
+    radii: {
+        card: number;
+        cardShadow: number;
+        leadingStatus: number;
+    };
+    offsets: {
+        cardShadow: {
+            width: number;
+            height: number;
+        };
+    };
+    widths: {
+        leadingStatus: number;
+    };
+    opacity: {
+        disabled: number;
+        enabled: number;
+        cardShadow: number;
+    };
+};
+export default getListTheme;

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

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

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

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getToolbarTheme: (theme: GlobalTheme) => {
+    colors: {
+        background: string;
+        border: string;
+        primary: string;
+        info: string;
+        success: string;
+        danger: string;
+        error: string;
+        disabled: string;
+    };
+    space: {
+        verticalPadding: number;
+        horizontalPadding: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+};
+export default getToolbarTheme;

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

@@ -4,6 +4,10 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         body: string;
         subdued: string;
         primary: string;
+        info: string;
+        danger: string;
+        warning: string;
+        success: string;
     };
     fonts: {
         light: string;

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

@@ -10,12 +10,15 @@ declare const systemPalette: {
     infoLight: string;
     infoBackground: string;
     success: string;
+    successLight: string;
     successDark: string;
     successBackground: string;
     danger: string;
+    dangerMediumLight: string;
     dangerLight: string;
     dangerBackground: string;
     warning: string;
+    warningLight: string;
     warningDark: string;
     warningBackground: string;
     platformBackground: string;
@@ -26,9 +29,11 @@ declare const systemPalette: {
     disabledLightText: string;
     invertedText: string;
     outline: string;
+    archivedDark: string;
     archived: string;
     black: string;
     inactiveBackground: string;
+    shadow: string;
 };
 declare type SystemPalette = typeof systemPalette;
 export { systemPalette, SystemPalette };

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

@@ -13,12 +13,15 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         infoLight: string;
         infoBackground: string;
         success: string;
+        successLight: string;
         successDark: string;
         successBackground: string;
         danger: string;
+        dangerMediumLight: string;
         dangerLight: string;
         dangerBackground: string;
         warning: string;
+        warningLight: string;
         warningDark: string;
         warningBackground: string;
         platformBackground: string;
@@ -29,9 +32,11 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         disabledLightText: string;
         invertedText: string;
         outline: string;
+        archivedDark: string;
         archived: string;
         black: string;
         inactiveBackground: string;
+        shadow: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;

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

@@ -2,6 +2,7 @@ interface Space {
     large: number;
     medium: number;
     small: number;
+    smallMedium: number;
     xlarge: number;
     xsmall: number;
     xxlarge: number;

package/types/theme/index.d.ts

@@ -6,6 +6,7 @@ import getBottomNavigationTheme from './components/bottomNavigation';
 import getBottomSheetTheme from './components/bottomSheet';
 import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
+import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
@@ -20,7 +21,10 @@ import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
 import getTextInputTheme from './components/textInput';
+import getToastTheme from './components/toast';
+import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
+import getListTheme from './components/list';
 declare type Theme = GlobalTheme & {
     __hd__: {
         alert: ReturnType<typeof getAlertTheme>;
@@ -30,6 +34,7 @@ declare type Theme = GlobalTheme & {
         bottomSheet: ReturnType<typeof getBottomSheetTheme>;
         button: ReturnType<typeof getButtonTheme>;
         card: ReturnType<typeof getCardTheme>;
+        checkbox: ReturnType<typeof getCheckboxTheme>;
         contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
         divider: ReturnType<typeof getDividerTheme>;
         drawer: ReturnType<typeof getDrawerTheme>;
@@ -44,7 +49,10 @@ declare type Theme = GlobalTheme & {
         tabs: ReturnType<typeof getTabsTheme>;
         tag: ReturnType<typeof getTagTheme>;
         textInput: ReturnType<typeof getTextInputTheme>;
+        toast: ReturnType<typeof getToastTheme>;
+        toolbar: ReturnType<typeof getToolbarTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
+        list: ReturnType<typeof getListTheme>;
     };
 };
 declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;

package/.turbo/turbo-build:types.log

@@ -1,2 +0,0 @@
-@hero-design/rn:build:types: cache hit, replaying output 811bf8e2c962eb5e
-@hero-design/rn:build:types: $ tsc --noEmit false --emitDeclarationOnly

package/.turbo/turbo-build:watch.log

@@ -1 +0,0 @@
-@hero-design/rn:build:watch: cache hit, replaying output 15c0a10624cccb1c

package/.turbo/turbo-lint.log

@@ -1,2 +0,0 @@
-@hero-design/rn:lint: cache hit, replaying output 63186ed2dde9d7c3
-@hero-design/rn:lint: $ eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore

package/.turbo/turbo-type-check.log

@@ -1,2 +0,0 @@
-@hero-design/rn:type-check: cache hit, replaying output a43cdadcca01cb04
-@hero-design/rn:type-check: $ tsc --noEmit

package/es/components/Avatar/StyledAvatar.d.ts

@@ -1,46 +0,0 @@
-/// <reference types="react" />
-import { View, Image, TouchableOpacity, Text } from 'react-native';
-declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge';
-declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
-declare const StyledPressable: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeSize: ThemeSize;
-    themeIntent: ThemeIntent;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
-declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeSize: ThemeSize;
-    themeIntent: ThemeIntent;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-declare const StyledTextWrapper: 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 StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeSize: ThemeSize;
-    themeIntent: ThemeIntent;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
-declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeSize: ThemeSize;
-}, {}, {
-    ref?: import("react").Ref<Image> | undefined;
-}>;
-export { StyledPressable, StyledView, StyledImage, StyledTextWrapper, StyledText, };

package/es/components/Avatar/index.d.ts

@@ -1,25 +0,0 @@
-import { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
-interface AvatarProps extends ViewProps {
-    /** Callback function when pressing component. */
-    onPress?: () => void;
-    /** Image source to be displayed on avatar. */
-    source?: ImageSourcePropType;
-    /** Renders title in the placeholder. */
-    title?: string;
-    /**
-     * Intent of the Icon.
-     */
-    intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
-    /** Size of the avatar. */
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    /**
-     * Addditional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-}
-declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
-export default Avatar;

package/es/components/Badge/Status.d.ts

@@ -1,24 +0,0 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { ReactNode } from 'react';
-export interface StatusProps extends ViewProps {
-    children: ReactNode;
-    /**
-     * Whether the Status Badge is visible.
-     */
-    visible?: boolean;
-    /**
-    /**
-     * Visual intent color to apply to Status Badge.
-     */
-    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-}
-declare const Status: ({ children, visible, intent, style, testID, ...nativeProps }: StatusProps) => JSX.Element;
-export default Status;

package/es/components/Badge/StyledBadge.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import { Animated, Text } from 'react-native';
-declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
-declare type ThemePadding = 'narrowContent' | 'wideContent';
-declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeIntent: ThemeIntent;
-    themePadding: ThemePadding;
-}, {}, {}>;
-declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
-declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeIntent: ThemeIntent;
-}, {}, {}>;
-export { StyledView, StyledText, StyledStatus };

package/es/components/Badge/index.d.ts

@@ -1,32 +0,0 @@
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import React from 'react';
-interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
-    /**
-     * Content of the Badge.
-     */
-    content: string | number;
-    /**
-     * Whether the Badge is visible.
-     */
-    visible?: boolean;
-    /**
-     * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
-     */
-    max?: number;
-    /**
-     * Visual intent color to apply to Badge.
-     */
-    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-}
-declare const _default: (({ content: originalContent, visible, max, intent, style, testID, ...nativeProps }: BadgeProps) => JSX.Element) & {
-    Status: ({ children, visible, intent, style, testID, ...nativeProps }: import("./Status").StatusProps) => JSX.Element;
-};
-export default _default;

package/es/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -1,52 +0,0 @@
-/// <reference types="react" />
-import { View } from 'react-native';
-declare const BottomNavigationTab: 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 BottomNavigationContainer: 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 BottomBarWrapper: 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 BottomBar: 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 BottomBarItem: 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 StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

package/es/components/BottomNavigation/index.d.ts

@@ -1,45 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { IconName } from '../Icon';
-export declare type BottomNavigationTabType = {
-    key: string;
-    title?: string;
-    icon: IconName;
-    component: ReactNode;
-    testID?: string;
-};
-interface BottomNavigationProps 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;
-    }[];
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-}
-declare const BottomNavigation: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
-export default BottomNavigation;

package/es/components/Button/IconButton.d.ts

@@ -1,34 +0,0 @@
-import { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
-import { IconProps, IconName } from '../Icon';
-export interface IconButtonProps {
-    /**
-     * Set how far you can touch from the button.
-     */
-    hitSlop?: TouchableOpacityProps['hitSlop'];
-    /**
-     * Name of the Icon.
-     */
-    icon: IconName;
-    /**
-     * Intent of the Icon.
-     */
-    intent?: IconProps['intent'];
-    /**
-     * Set the handler to handle press event.
-     */
-    onPress: () => void;
-    /**
-     * Size of the Icon.
-     */
-    size?: IconProps['size'];
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of component.
-     */
-    testID?: string;
-}
-declare const IconButton: ({ hitSlop, onPress, icon, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
-export default IconButton;