@hero-design/rn 7.9.0 → 7.10.1

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

@@ -1,11 +1,64 @@
 import { TextInput, View } from 'react-native';
-declare const Container: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+export declare type Variant = 'default' | 'filled' | 'focused' | 'disabled' | 'readonly' | 'error';
+declare const StyledContainer: 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 Label: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledLabelContainer: 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 StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {}>;
+declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {}>;
+declare const StyledLabelContainerInsideTextInput: 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 StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {}>;
+declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {}>;
+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;
+}>;
+declare const StyledError: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {}>;
+declare const StyledHelperText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
@@ -15,4 +68,30 @@ declare const StyledTextInput: import("@emotion/native").StyledComponent<import(
 }, {}, {
     ref?: import("react").Ref<TextInput> | undefined;
 }>;
-export { Container, Label, StyledTextInput };
+declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledTextInputContainer: 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 StyledTextInputAndLabelContainer: 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 StyledErrorAndHelpTextContainer: 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, };

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

@@ -1,4 +1,6 @@
+import React from 'react';
 import { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { Variant } from './StyledTextInput';
 import { IconName } from '../Icon';
 export interface TextInputProps extends NativeTextInputProps {
     /**
@@ -6,13 +8,13 @@ export interface TextInputProps extends NativeTextInputProps {
      */
     label?: string;
     /**
-     * Name of Icon to render on the left side of the input, before the user's cursor.
+     * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
      */
-    prefix?: IconName;
+    prefix?: IconName | React.ReactElement;
     /**
-     * Name of Icon to render on the right side of the input.
+     * Name of Icon or ReactElement to render on the right side of the input.
      */
-    suffix?: IconName;
+    suffix?: IconName | React.ReactElement;
     /**
      * Additional wrapper style.
      */
@@ -29,6 +31,32 @@ export interface TextInputProps extends NativeTextInputProps {
      * Accessibility label for the input (Android).
      */
     accessibilityLabelledBy?: string;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+    /**
+     *  Whether the input is required, if true, an asterisk will be appended to the label.
+     * */
+    required?: boolean;
+    /**
+     *  Placeholder text to display.
+     * */
+    placeholder?: string;
+    /**
+     * Whether the input is editable.
+     * */
+    editable?: boolean;
+    disabled?: boolean;
+    maxLength?: number;
+    helpText?: string;
 }
-declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, ...nativeProps }: TextInputProps) => JSX.Element;
+export declare const getVariant: ({ disabled, error, editable, isFocused, isEmptyValue, }: {
+    disabled?: boolean | undefined;
+    error?: string | undefined;
+    editable?: boolean | undefined;
+    isFocused?: boolean | undefined;
+    isEmptyValue?: boolean | undefined;
+}) => Variant;
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, maxLength, helpText, value, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

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

@@ -8,12 +8,15 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
     };
     fontSize: {
         default: number;
+        utility: number;
+        textVariant: number;
     };
     sizes: {
         iconSize: number;
     };
     radii: {
         default: number;
+        utilityRadii: number;
     };
     colors: {
         primary: string;
@@ -27,6 +30,7 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         disabledBorder: string;
         disabledBackground: string;
         invertedText: string;
+        utilityBackground: string;
     };
     lineHeight: {
         default: number;
@@ -34,6 +38,8 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
     space: {
         buttonPadding: number;
         iconPadding: number;
+        utilityPadding: number;
+        utilityIconPadding: number;
     };
 };
 export default getButtonTheme;

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

@@ -2,20 +2,79 @@ import { GlobalTheme } from '../global';
 declare const getTextInputTheme: (theme: GlobalTheme) => {
     colors: {
         labelBackground: string;
-        border: string;
+        asterisks: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+            focused: string;
+        };
+        error: string;
+        placeholderIfNotFocused: string;
+        placeholderIfFocued: string;
+        label: string;
+        readonlyLabel: string;
+        disabledLabel: string;
+        text: string;
+        borders: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+            focused: string;
+        };
+        labels: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+            focused: string;
+        };
+        labelsInsideTextInput: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+            focused: string;
+        };
+        maxLengthLabels: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+            focused: string;
+        };
     };
     space: {
         containerPadding: number;
         labelLeft: number;
         labelTop: number;
+        labelPaddingBottom: number;
         labelHorizontalPadding: number;
         inputHorizontalMargin: number;
+        containerMarginVertical: number;
+        errorContainerMarginLeft: number;
+        errorContainerMarginRight: number;
+        errorMarginLeft: number;
+        maxLengthLabelMarginLeft: number;
     };
     fontSizes: {
         text: number;
+        labelInsideTextInput: number;
+        error: number;
+        maxLength: number;
+        asteriskLabel: number;
     };
     borderWidths: {
-        container: number;
+        container: {
+            normal: number;
+            focused: number;
+        };
     };
     radii: {
         container: number;

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

@@ -25,6 +25,7 @@ declare const systemPalette: {
     backgroundLight: string;
     backgroundDark: string;
     text: string;
+    subduedText: string;
     disabledText: string;
     disabledLightText: string;
     invertedText: string;

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

@@ -28,6 +28,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         backgroundLight: string;
         backgroundDark: string;
         text: string;
+        subduedText: string;
         disabledText: string;
         disabledLightText: string;
         invertedText: string;

package/types/types.d.ts

@@ -1,5 +1,6 @@
 import { BottomNavigationTabType } from './components/BottomNavigation';
 import { IconName } from './components/Icon';
 import { TabType } from './components/Tabs';
+import { TextInputProps } from './components/TextInput';
 import { Theme } from './theme';
-export type { BottomNavigationTabType, IconName, TabType, Theme };
+export type { BottomNavigationTabType, IconName, TabType, Theme, TextInputProps, };