@hero-design/rn 7.7.0 → 7.9.0

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

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

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

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

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

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

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

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

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/{MultiSelect/Footer.d.ts → Footer.d.ts}

@@ -1,5 +1,5 @@
-declare function Footer({ label, onPress }: {
+declare const Footer: ({ label, onPress }: {
     label: string;
     onPress: () => void;
-}): JSX.Element;
+}) => 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/__tests__/Option.spec.d.ts

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

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

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

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

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

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

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

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

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

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/{MultiSelect/StyledMultiSelect.d.ts → StyledSelect.d.ts}

@@ -19,7 +19,7 @@ declare const Spacer: import("@emotion/native").StyledComponent<import("react-na
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const FooterText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
+declare const FooterText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

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

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

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

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

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 };

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

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

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

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

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

@@ -14,6 +14,7 @@ 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';
@@ -24,6 +25,7 @@ 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, Checkbox, ContentNavigator, Divider, Drawer, FAB, Icon, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Toast, 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,16 @@ import { GlobalTheme } from '../global';
 declare const getCardTheme: (theme: GlobalTheme) => {
     colors: {
         dataCardIndicator: string;
+        indicator: {
+            archived: string;
+            info: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
+    };
+    sizes: {
+        indicatorWidth: number;
     };
     radii: {
         default: number;

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

@@ -8,6 +8,7 @@ declare const getIconTheme: (theme: GlobalTheme) => {
         success: string;
         warning: string;
         disabledText: string;
+        invertedText: string;
     };
     sizes: {
         xsmall: 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/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;