@hero-design/rn 7.10.2-rc.0 → 7.11.2

package/types/components/PinInput/PinCell.d.ts

@@ -0,0 +1,8 @@
+import { State } from './StyledPinInput';
+declare function PinCell({ value, secure, focused, state, }: {
+    value: string;
+    secure?: boolean;
+    focused?: boolean;
+    state?: State;
+}): JSX.Element;
+export default PinCell;

package/types/components/PinInput/StyledPinInput.d.ts

@@ -0,0 +1,73 @@
+import { Text, TextInput, View } from 'react-native';
+export declare const StyledWrapper: 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 declare const StyledPinWrapper: 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 declare type State = 'default' | 'disabled' | 'error';
+export declare const StyledCell: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeFocused: boolean;
+    themeState: State;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledCellText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeState: State;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledSpacer: 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 declare const StyledMask: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeState: State;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledFilledMask: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeState: State;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledHiddenInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themePinLength: number;
+}, {}, {
+    ref?: import("react").Ref<TextInput> | undefined;
+}>;
+export declare const StyledErrorContainer: 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 declare const StyledErrorMessage: 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;
+}>;

package/types/components/PinInput/__tests__/PinCell.spec.d.ts

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

package/types/components/PinInput/__tests__/StyledPinInput.spec.d.ts

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

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

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

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

@@ -0,0 +1,48 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { State } from './StyledPinInput';
+interface PinInputProps {
+    /**
+     * The value to show for the input.
+     */
+    value?: string;
+    /**
+     * Callback function that's called when the text changed.
+     */
+    onChangeText: (value: string) => void;
+    /**
+     * Callback function that's called when the input is completely filled.
+     */
+    onFulfill?: (value: string) => void;
+    /**
+     * Number of character for the input.
+     */
+    length?: number;
+    disabled?: boolean;
+    /**
+     * Whether the pin value is secured using masks.
+     * By default, this is true, meaning that masks are shown to hide pin value.
+     */
+    secure?: boolean;
+    /**
+     * If true, focuses the input on componentDidMount.
+     */
+    autoFocus?: boolean;
+    /**
+     * Error message.
+     */
+    error?: string;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+export declare function getState({ disabled, error, }: {
+    disabled?: boolean;
+    error?: string;
+}): State;
+declare function PinInput({ value, onChangeText, onFulfill, length, disabled, secure, autoFocus, error, style, testID, }: PinInputProps): JSX.Element;
+export default PinInput;

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

@@ -94,4 +94,10 @@ declare const StyledErrorAndHelpTextContainer: import("@emotion/native").StyledC
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, };
+declare const StyledErrorAndMaxLengthContainer: 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 { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };

package/types/components/Typography/Text/StyledText.d.ts

@@ -3,7 +3,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
+    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
 }, {}, {

package/types/components/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
+    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
     /**
      * Font weight of the text.
      */

package/types/index.d.ts

@@ -15,6 +15,7 @@ import Drawer from './components/Drawer';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
 import List from './components/List';
+import PinInput from './components/PinInput';
 import Progress from './components/Progress';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
@@ -27,5 +28,5 @@ 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, List, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Toast, Toolbar, Typography, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, Checkbox, ContentNavigator, Divider, Drawer, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Toast, Toolbar, Typography, };
 export * from './types';

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

@@ -0,0 +1,35 @@
+import { GlobalTheme } from '../global';
+declare const getPinInputTheme: (theme: GlobalTheme) => {
+    borderWidths: {
+        default: number;
+        focused: number;
+    };
+    colors: {
+        default: string;
+        mask: string;
+        error: string;
+        disabled: string;
+    };
+    fonts: {
+        cellText: string;
+        errorMessage: string;
+    };
+    fontSizes: {
+        cellText: number;
+        errorMessage: number;
+    };
+    sizes: {
+        cellWidth: number;
+        cellHeight: number;
+        mask: number;
+    };
+    space: {
+        spacer: number;
+        errorMessagePadding: number;
+    };
+    radii: {
+        cell: number;
+        mask: number;
+    };
+};
+export default getPinInputTheme;

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

@@ -58,10 +58,10 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         labelHorizontalPadding: number;
         inputHorizontalMargin: number;
         containerMarginVertical: number;
-        errorContainerMarginLeft: number;
         errorContainerMarginRight: number;
         errorMarginLeft: number;
         maxLengthLabelMarginLeft: number;
+        errorAndHelpTextContainerPaddingLeft: number;
     };
     fontSizes: {
         text: number;

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

@@ -19,12 +19,14 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         medium: number;
         large: number;
         xlarge: number;
+        xxxxxlarge: number;
     };
     lineHeights: {
         small: number;
         medium: number;
         large: number;
         xlarge: number;
+        xxxxxlarge: number;
     };
 };
 export default getTypographyTheme;

package/types/theme/index.d.ts

@@ -12,6 +12,8 @@ import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
+import getListTheme from './components/list';
+import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
 import getSectionHeadingTheme from './components/sectionHeading';
@@ -24,7 +26,6 @@ import getTextInputTheme from './components/textInput';
 import getToastTheme from './components/toast';
 import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
-import getListTheme from './components/list';
 declare type Theme = GlobalTheme & {
     __hd__: {
         alert: ReturnType<typeof getAlertTheme>;
@@ -40,6 +41,8 @@ declare type Theme = GlobalTheme & {
         drawer: ReturnType<typeof getDrawerTheme>;
         fab: ReturnType<typeof getFABTheme>;
         icon: ReturnType<typeof getIconTheme>;
+        list: ReturnType<typeof getListTheme>;
+        pinInput: ReturnType<typeof getPinInputTheme>;
         progress: ReturnType<typeof getProgressTheme>;
         radio: ReturnType<typeof getRadioTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
@@ -52,7 +55,6 @@ declare type Theme = GlobalTheme & {
         toast: ReturnType<typeof getToastTheme>;
         toolbar: ReturnType<typeof getToolbarTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
-        list: ReturnType<typeof getListTheme>;
     };
 };
 declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;