@hero-design/rn 7.7.0 → 7.8.0

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