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

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

@@ -13,7 +13,7 @@ export interface CheckboxProps {
      */
     onPress?: () => void;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -7,7 +7,7 @@ interface CollapseProps extends ViewProps {
      */
     open?: boolean;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -15,7 +15,7 @@ export interface IconProps {
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<TextStyle>;
     /**

package/types/components/List/BasicListItem.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+export interface ListItemProps {
+    /**
+     * Name of Icon or component to render on the left side of title.
+     */
+    prefix?: IconName | React.ReactElement;
+    /**
+     * Name of Icon or component to render on the right side of title.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * The title of the component.
+     */
+    title: string;
+    /**
+     * The subtile title of the component.
+     */
+    subtitle?: string;
+    /**
+     * Whether the component is disabled. Default value is false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component is selected. Default value is false
+     */
+    selected?: boolean;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress?: () => void;
+}
+declare const BasicListItem: ({ prefix, suffix, title, subtitle, style, testID, selected, disabled, onPress, }: ListItemProps) => JSX.Element;
+export default BasicListItem;

package/types/components/List/ListItem.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+export interface ListItemProps {
+    /**
+     * Name of Icon or ReactElement to render on the left side of title.
+     */
+    prefix?: IconName | React.ReactElement;
+    /**
+     * Name of Icon or ReactElement to render on the right side of title.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * The title of the component.
+     */
+    title?: string;
+    /**
+     * The subtile title of the component.
+     */
+    subtitle?: string;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Children to be rendered inside the component.
+     */
+    children?: ReactNode;
+    /**
+     * Leading status of the component
+     * */
+    leadingStatus?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    variant?: 'full-width' | 'card';
+    /**
+     * Whether the component is disabled. Default value is false
+     */
+    disabled?: boolean;
+    /** * Whether the component is selected. Default value is false
+     */
+    selected?: boolean;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress?: () => void;
+}
+declare const ListItem: ({ prefix, suffix, title, subtitle, style, testID, selected, children, leadingStatus, variant, onPress, disabled, }: ListItemProps) => JSX.Element;
+export default ListItem;

package/types/components/List/StyledBasicListItem.d.ts

@@ -0,0 +1,29 @@
+import { TouchableOpacity, View } from 'react-native';
+declare const StyledPrefixContainer: 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 StyledSuffixContainer: 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 StyledTitleContainer: 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 StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSelected?: boolean | undefined;
+    themeDisabled?: boolean | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { StyledListItemContainer, StyledPrefixContainer, StyledTitleContainer, StyledSuffixContainer, };

package/types/components/List/StyledListItem.d.ts

@@ -0,0 +1,51 @@
+import { TouchableOpacity, View } from 'react-native';
+export declare type Variant = 'full-width' | 'card';
+export declare type LeadingStatusIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
+declare const StyledListItemContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSelected?: boolean | undefined;
+    themeVariant?: Variant | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledContentContainer: 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 StyledChildrenContainer: 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 StyledLeadingStatus: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeLeadingStatusIntent: LeadingStatusIntent;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledPrefixContainer: 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 StyledSuffixContainer: 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 StyledTitleContainer: 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;
+}>;
+export { StyledListItemContainer, StyledContentContainer, StyledChildrenContainer, StyledLeadingStatus, StyledPrefixContainer, StyledTitleContainer, StyledSuffixContainer, };

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

@@ -0,0 +1,8 @@
+import ListItem from './ListItem';
+import BasicListItem from './BasicListItem';
+interface ListType {
+    Item: typeof ListItem;
+    BasicItem: typeof BasicListItem;
+}
+declare const List: ListType;
+export default List;

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

@@ -27,7 +27,7 @@ export interface SectionHeadingProps extends ViewProps {
      */
     intent?: 'subdued' | 'body' | 'primary';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/components/Select/Footer.d.ts

@@ -0,0 +1,5 @@
+declare const Footer: ({ label, onPress }: {
+    label: string;
+    onPress: () => void;
+}) => JSX.Element;
+export default Footer;

package/types/components/Select/MultiSelect/Option.d.ts

@@ -0,0 +1,6 @@
+declare const Option: ({ text, selected, onPress, }: {
+    text: string;
+    selected: boolean;
+    onPress: () => void;
+}) => JSX.Element;
+export default Option;

package/types/components/Select/MultiSelect/OptionList.d.ts

@@ -1,3 +1,9 @@
 import { MultiSelectProps } from '.';
-declare function OptionList<T>({ value, options, onPress, keyExtractor, }: Pick<MultiSelectProps<T>, 'value' | 'options' | 'onPress' | 'keyExtractor'>): JSX.Element;
+interface OptionListProps<T> extends MultiSelectProps<T> {
+    /**
+     * event handler for select
+     */
+    onPress: (value: T[]) => void;
+}
+declare const OptionList: <T>({ value, options, onPress, keyExtractor, }: Pick<OptionListProps<T>, "onPress" | "value" | "options" | "keyExtractor">) => JSX.Element;
 export default OptionList;

package/types/components/Select/MultiSelect/index.d.ts

@@ -1,5 +1,5 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import { OptionType } from './types';
+import { OptionType } from '../types';
 export interface MultiSelectProps<T> {
     /**
      * An array of options to be selected.
@@ -10,9 +10,9 @@ export interface MultiSelectProps<T> {
      */
     value: T[];
     /**
-     * onPress event handler.
+     * event handler for footer button.
      */
-    onPress: (value: T[]) => void;
+    onConfirm: (value: T[]) => void;
     /**
      * Field label.
      */
@@ -35,5 +35,5 @@ export interface MultiSelectProps<T> {
      */
     testID?: string;
 }
-declare function MultiSelect<T>({ options, value, testID, style, label, footerLabel, onPress, }: MultiSelectProps<T>): JSX.Element;
+declare function MultiSelect<T>({ options, value, testID, style, label, footerLabel, onConfirm, }: MultiSelectProps<T>): JSX.Element;
 export default MultiSelect;

package/types/components/Select/SingleSelect/Option.d.ts

@@ -0,0 +1,6 @@
+declare const Option: ({ text, selected, onPress, }: {
+    text: string;
+    selected: boolean;
+    onPress: () => void;
+}) => JSX.Element;
+export default Option;

package/types/components/Select/SingleSelect/OptionList.d.ts

@@ -0,0 +1,9 @@
+import { SingleSelectProps } from '.';
+interface OptionListProps<T> extends SingleSelectProps<T> {
+    /**
+     * event handler for select
+     */
+    onPress: (value: T | null) => void;
+}
+declare const OptionList: <T>({ value, options, onPress, keyExtractor, }: Pick<OptionListProps<T>, "onPress" | "value" | "options" | "keyExtractor">) => JSX.Element;
+export default OptionList;

package/types/components/Select/SingleSelect/index.d.ts

@@ -0,0 +1,35 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { OptionType } from '../types';
+export interface SingleSelectProps<T> {
+    /**
+     * An array of options to be selected.
+     */
+    options: OptionType<T>[];
+    /**
+     * Current selected value.
+     */
+    value: T | null;
+    /**
+     * event handler for confirm button
+     */
+    onConfirm: (value: T | null) => void;
+    /**
+     * Field label.
+     */
+    label: string;
+    /**
+     * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+     * The default extractor checks option.key, and then falls back to using the index, like React does.
+     */
+    keyExtractor?: (option: OptionType<T>, index?: number) => string;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const SingleSelect: <T>({ options, value, testID, style, label, onConfirm, }: SingleSelectProps<T>) => JSX.Element;
+export default SingleSelect;

package/types/components/Select/StyledSelect.d.ts

@@ -0,0 +1,26 @@
+import { View, TouchableOpacity } from 'react-native';
+declare const OptionWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSelected: boolean;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const OptionListWrapper: 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 Spacer: 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 FooterText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { OptionWrapper, OptionListWrapper, Spacer, FooterText };

package/types/components/Select/helpers.d.ts

@@ -0,0 +1,2 @@
+import { OptionType } from './types';
+export declare const getKey: <T>(option: OptionType<T>, index: number, keyExtractor?: ((opt: OptionType<T>, i?: number | undefined) => string) | undefined) => import("react").Key;

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

@@ -1,5 +1,5 @@
 import MultiSelect from './MultiSelect';
-declare const CompoundSelect: {
-    readonly Multi: typeof MultiSelect;
+declare const _default: (<T>({ options, value, testID, style, label, onConfirm, }: import("./SingleSelect").SingleSelectProps<T>) => JSX.Element) & {
+    Multi: typeof MultiSelect;
 };
-export default CompoundSelect;
+export default _default;

package/types/components/Select/types.d.ts

@@ -0,0 +1,5 @@
+export declare type OptionType<T> = {
+    value: T;
+    text: string;
+    key?: string;
+};

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

@@ -18,7 +18,7 @@ export interface SwitchProps {
      */
     size?: 'small' | 'medium';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

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/components/Toolbar/StyledToolbar.d.ts

@@ -0,0 +1,22 @@
+import { TouchableOpacity, View, ViewProps } from 'react-native';
+declare const ToolbarWrapper: 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 ToolbarGroupWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    align: 'left' | 'center' | 'right';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const ToolbarItemWrapper: 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 { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper };