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

package/types/components/Toast/StyledToast.d.ts

@@ -0,0 +1,45 @@
+import { Animated, TouchableOpacity, View, ViewProps } from 'react-native';
+declare const ToastContainerWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    position: 'top' | 'bottom';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const Container: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: 'default' | 'round';
+    themeIntent: 'success' | 'info' | 'warning' | 'error';
+}, {}, {}>;
+declare const IconContainer: 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 TextContainer: 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 ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    showDivider: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { ToastContainerWrapper, Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };

package/types/components/Toast/Toast.d.ts

@@ -0,0 +1,3 @@
+import { ToastProps } from './types';
+declare const Toast: ({ content, icon, variant, intent, style, duration, autoDismiss, onAction, actionLabel, onDismiss, }: ToastProps) => JSX.Element;
+export default Toast;

package/types/components/Toast/ToastContainer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ToastContainerProps } from './types';
+import { ToastControllerContextType } from './ToastContext';
+declare const ToastContainer: React.ForwardRefExoticComponent<ToastContainerProps & React.RefAttributes<ToastControllerContextType>>;
+export default ToastContainer;

package/types/components/Toast/ToastContext.d.ts

@@ -0,0 +1,11 @@
+import { ToastContainerProps, ToastProps } from './types';
+export declare type ToastControllerContextType = {
+    show: (props: Omit<ToastProps, 'position'>) => string;
+    hide: (id: string) => void;
+    clearAll: () => void;
+};
+export declare const ToastContext: import("react").Context<ToastControllerContextType>;
+export declare type ToastConfigContextType = Pick<ToastContainerProps, 'position' | 'displayType'>;
+export declare const ToastConfigContext: import("react").Context<ToastConfigContextType>;
+export declare const useToastConfig: () => ToastConfigContextType;
+export declare const useToast: () => ToastControllerContextType;

package/types/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ToastContainerProps } from './types';
+declare type ToastProviderProps = {
+    /**
+     * Content to be wrapped.
+     */
+    children?: ReactNode;
+} & ToastContainerProps;
+declare const ToastProvider: ({ children, displayType, position, }: ToastProviderProps) => JSX.Element;
+export default ToastProvider;

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

@@ -0,0 +1,8 @@
+declare const Toast: {
+    Provider: ({ children, displayType, position, }: {
+        children?: import("react").ReactNode;
+    } & import("./types").ToastContainerProps) => JSX.Element;
+    Container: import("react").ForwardRefExoticComponent<import("./types").ToastContainerProps & import("react").RefAttributes<import("./ToastContext").ToastControllerContextType>>;
+    useToast: () => import("./ToastContext").ToastControllerContextType;
+};
+export default Toast;

package/types/components/Toast/types.d.ts

@@ -0,0 +1,67 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+export interface ToastProps {
+    /**
+     * Toast content.
+     */
+    content: string | ReactElement;
+    /**
+     * Icon name of the Toast.
+     * - undefined: use default icon according to Toast intent.
+     * - null: no icon at all.
+     * - IconName: an icon identifier from hero-design icon list.
+     */
+    icon?: null | IconName;
+    /**
+     * Visual intent color to apply to alert.
+     */
+    intent?: 'success' | 'info' | 'warning' | 'error';
+    /**
+     * Toast variants
+     */
+    variant?: 'default' | 'round';
+    /**
+     * Whether the toast message should be dismissed after the duration expired.
+     */
+    autoDismiss?: boolean;
+    /**
+     * Duration (in miliseconds) of how long the toast message will be displayed before it disapprears.
+     */
+    duration?: number;
+    /**
+     * Display action button with passed on the right side of the toast message.
+     * This action button will will dismiss the toast on pressed.
+     */
+    actionLabel?: string | ReactElement;
+    /**
+     * Callback that will be called when the action button of the toast is pressed.
+     */
+    onAction?: () => void;
+    /**
+     * Callback that will be called when the toast message is dismissed.
+     */
+    onDismiss?: () => void;
+    /**
+     * Addtitional style.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+export interface ToastContainerProps {
+    /**
+     * Displays multiple toasts at a time or one by one.
+     */
+    displayType?: 'single' | 'stack';
+    /**
+     * Position that the toast message will appear on the screen.
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * Additional style for toasts container.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+export declare type ToastItemProps = {
+    id: string;
+    props: Omit<ToastProps, 'position'>;
+};

package/types/index.d.ts

@@ -8,6 +8,7 @@ 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';
@@ -22,6 +23,7 @@ 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 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, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Toast, Typography, };
 export * from './types';

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/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,6 +21,7 @@ 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 getTypographyTheme from './components/typography';
 declare type Theme = GlobalTheme & {
     __hd__: {
@@ -30,6 +32,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,6 +47,7 @@ declare type Theme = GlobalTheme & {
         tabs: ReturnType<typeof getTabsTheme>;
         tag: ReturnType<typeof getTagTheme>;
         textInput: ReturnType<typeof getTextInputTheme>;
+        toast: ReturnType<typeof getToastTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
     };
 };

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/__tests__/Badge.spec.d.ts

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

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

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

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

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

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;