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

package/types/components/Radio/RadioGroup.d.ts

@@ -1,21 +1,24 @@
 import { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-export interface RadioGroupProps {
+import { OptionType } from './types';
+export interface RadioGroupProps<T> {
     /**
      * An array of radio options to be selected.
      */
-    options: {
-        text: string;
-        value: string;
-    }[];
+    options: OptionType<T>[];
     /**
      * Radio input value.
      */
-    value: string;
+    value: T;
     /**
      * Press event handler receiving selected radio's value.
      */
-    onPress: (value: string) => void;
+    onPress: (value: T) => void;
+    /**
+     * 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.
      */
@@ -25,5 +28,5 @@ export interface RadioGroupProps {
      */
     testID?: string;
 }
-declare const RadioGroup: ({ value, onPress, options, style, testID, }: RadioGroupProps) => ReactElement;
+declare const RadioGroup: <T>({ value, onPress, options, keyExtractor, style, testID, }: RadioGroupProps<T>) => ReactElement;
 export default RadioGroup;

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

@@ -1,4 +1,4 @@
 declare const CompoundRadio: {
-    readonly Group: ({ value, onPress, options, style, testID, }: import("./RadioGroup").RadioGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly Group: <T>({ value, onPress, options, keyExtractor, style, testID, }: import("./RadioGroup").RadioGroupProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 };
 export default CompoundRadio;

package/types/components/Radio/types.d.ts

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

package/types/components/SectionHeading/__tests__/StyledHeading.spec.d.ts

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

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

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

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

@@ -0,0 +1,3 @@
+import { MultiSelectProps } from '.';
+declare function OptionList<T>({ value, options, onPress, keyExtractor, }: Pick<MultiSelectProps<T>, 'value' | 'options' | 'onPress' | 'keyExtractor'>): JSX.Element;
+export default OptionList;

package/types/components/Select/MultiSelect/StyledMultiSelect.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/MultiSelect/__tests__/StyledMultiSelect.spec.d.ts

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

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

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

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

@@ -0,0 +1,39 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { OptionType } from './types';
+export interface MultiSelectProps<T> {
+    /**
+     * An array of options to be selected.
+     */
+    options: OptionType<T>[];
+    /**
+     * Current selected value.
+     */
+    value: T[];
+    /**
+     * onPress event handler.
+     */
+    onPress: (value: T[]) => void;
+    /**
+     * Field label.
+     */
+    label: string;
+    /**
+     * Footer label.
+     */
+    footerLabel: 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 function MultiSelect<T>({ options, value, testID, style, label, footerLabel, onPress, }: MultiSelectProps<T>): JSX.Element;
+export default MultiSelect;

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

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

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

@@ -0,0 +1,5 @@
+import MultiSelect from './MultiSelect';
+declare const CompoundSelect: {
+    readonly Multi: typeof MultiSelect;
+};
+export default CompoundSelect;

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

@@ -0,0 +1,36 @@
+import { Animated, View } from 'react-native';
+declare type ThemeSize = 'small' | 'medium';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeChecked: boolean | undefined;
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledDisabledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledThumbWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledKnot: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {}>;
+export { StyledWrapper, StyledDisabledWrapper, StyledThumbWrapper, StyledKnot };

package/types/components/Switch/__tests__/StyledHeading.spec.d.ts

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

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

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

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

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SwitchProps {
+    /**
+     * Control whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler.
+     */
+    onPress?: () => void;
+    /**
+     * Size of the switch
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Switch: ({ size, disabled, checked, onPress, style, testID, }: SwitchProps) => ReactElement;
+export default Switch;

package/types/components/TextInput/StyledTextInput.d.ts

@@ -9,14 +9,10 @@ declare const Label: import("@emotion/native").StyledComponent<import("../Typogr
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const Prefix: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
 declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
     ref?: import("react").Ref<TextInput> | undefined;
 }>;
-export { Container, Label, Prefix, StyledTextInput };
+export { Container, Label, StyledTextInput };

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

@@ -1,6 +1,6 @@
-import { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle } from 'react-native';
+import { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { IconName } from '../Icon';
-interface TextInputProps extends NativeTextInputProps {
+export interface TextInputProps extends NativeTextInputProps {
     /**
      * Field label.
      */
@@ -10,17 +10,25 @@ interface TextInputProps extends NativeTextInputProps {
      */
     prefix?: IconName;
     /**
-     * Additional style.
+     * Name of Icon to render on the right side of the input.
+     */
+    suffix?: IconName;
+    /**
+     * Additional wrapper style.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Input text style.
+     */
+    textStyle?: StyleProp<TextStyle>;
     /**
      * Testing id of the component.
      */
     testID?: string;
     /**
-     * Accessibility lable for the input (Android).
+     * Accessibility label for the input (Android).
      */
     accessibilityLabelledBy?: string;
 }
-declare const TextInput: ({ label, prefix, style, testID, accessibilityLabelledBy, ...nativeProps }: TextInputProps) => JSX.Element;
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

package/types/index.d.ts

@@ -1,5 +1,4 @@
-import { ThemeProvider, useTheme } from '@emotion/react';
-import theme, { getTheme } from './theme';
+import theme, { getTheme, ThemeProvider, useTheme } from './theme';
 import { scale } from './utils/scale';
 import Alert from './components/Alert';
 import Avatar from './components/Avatar';
@@ -18,9 +17,11 @@ import Progress from './components/Progress';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
+import Select from './components/Select';
+import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
 import TextInput from './components/TextInput';
 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, Tabs, Tag, TextInput, 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 * from './types';

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

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getCheckboxTheme: (theme: GlobalTheme) => {
+    colors: {
+        borderColor: string;
+        text: string;
+        disabled: string;
+    };
+    space: {
+        iconTop: number;
+    };
+    sizes: {
+        base: number;
+    };
+    radii: {
+        base: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+};
+export default getCheckboxTheme;

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

@@ -0,0 +1,13 @@
+import { GlobalTheme } from '../global';
+declare const getSectionHeadingTheme: (theme: GlobalTheme) => {
+    colors: {
+        background: string;
+    };
+    space: {
+        headingVerticalPadding: number;
+        headingHorizontalPadding: number;
+        headingMarginBottom: number;
+        iconMarginRight: number;
+    };
+};
+export default getSectionHeadingTheme;

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

@@ -0,0 +1,17 @@
+import { GlobalTheme } from '../global';
+declare const getSelectTheme: (theme: GlobalTheme) => {
+    space: {
+        optionPadding: number;
+        optionListPadding: number;
+        optionListSpacing: number;
+    };
+    colors: {
+        option: string;
+        checkedOption: string;
+        footerText: string;
+    };
+    radii: {
+        option: number;
+    };
+};
+export default getSelectTheme;

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

@@ -0,0 +1,32 @@
+import { GlobalTheme } from '../global';
+declare const getSwitchTheme: (theme: GlobalTheme) => {
+    colors: {
+        thumb: string;
+        active: string;
+        inactive: string;
+    };
+    thumbSizes: {
+        small: number;
+        medium: number;
+    };
+    widths: {
+        small: number;
+        medium: number;
+    };
+    heights: {
+        small: number;
+        medium: number;
+    };
+    spaces: {
+        small: number;
+        medium: number;
+        inactive: number;
+    };
+    radii: {
+        rounded: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+};
+export default getSwitchTheme;

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

@@ -9,7 +9,7 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         labelLeft: number;
         labelTop: number;
         labelHorizontalPadding: number;
-        prefixMarginRight: number;
+        inputHorizontalMargin: number;
     };
     fontSizes: {
         text: number;

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

@@ -28,6 +28,7 @@ declare const systemPalette: {
     outline: string;
     archived: string;
     black: string;
+    inactiveBackground: string;
 };
 declare type SystemPalette = typeof systemPalette;
 export { systemPalette, SystemPalette };

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

@@ -31,6 +31,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         outline: string;
         archived: string;
         black: string;
+        inactiveBackground: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;

package/types/theme/index.d.ts

@@ -12,8 +12,11 @@ import getDrawerTheme from './components/drawer';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getProgressTheme from './components/progress';
-import getSpinnerTheme from './components/spinner';
 import getRadioTheme from './components/radio';
+import getSectionHeadingTheme from './components/sectionHeading';
+import getSelectTheme from './components/select';
+import getSpinnerTheme from './components/spinner';
+import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
 import getTextInputTheme from './components/textInput';
@@ -33,8 +36,11 @@ declare type Theme = GlobalTheme & {
         fab: ReturnType<typeof getFABTheme>;
         icon: ReturnType<typeof getIconTheme>;
         progress: ReturnType<typeof getProgressTheme>;
-        spinner: ReturnType<typeof getSpinnerTheme>;
         radio: ReturnType<typeof getRadioTheme>;
+        sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
+        select: ReturnType<typeof getSelectTheme>;
+        spinner: ReturnType<typeof getSpinnerTheme>;
+        switch: ReturnType<typeof getSwitchTheme>;
         tabs: ReturnType<typeof getTabsTheme>;
         tag: ReturnType<typeof getTagTheme>;
         textInput: ReturnType<typeof getTextInputTheme>;
@@ -43,5 +49,14 @@ declare type Theme = GlobalTheme & {
 };
 declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;
 declare const theme: Theme;
-export { Theme, getTheme };
+export interface ThemeProviderProps {
+    theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+    children: React.ReactNode;
+}
+interface ThemeProviderType {
+    (props: ThemeProviderProps): React.ReactElement;
+}
+declare const ThemeProvider: ThemeProviderType;
+declare const useTheme: () => Theme;
+export { Theme, getTheme, ThemeProvider, useTheme };
 export default theme;