@hero-design/rn 7.8.0 → 7.10.1

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

@@ -10,6 +10,9 @@ declare const getCardTheme: (theme: GlobalTheme) => {
             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/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, };

package/.expo/README.md

@@ -1,15 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-
-> What do the files contain?
-
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-
-> Should I commit the ".expo" folder?
-
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/packager-info.json

@@ -1,10 +0,0 @@
-{
-  "devToolsPort": 19002,
-  "expoServerPort": null,
-  "packagerPort": 19000,
-  "packagerPid": null,
-  "expoServerNgrokUrl": null,
-  "packagerNgrokUrl": null,
-  "ngrokPid": null,
-  "webpackServerPort": null
-}

package/.expo/prebuild/cached-packages.json

@@ -1,4 +0,0 @@
-{
-  "dependencies": "75a9d3d29379eb983d76968e2681af38c930ef79",
-  "devDependencies": "843b58fa49ff6a9ac1aaf4f6f32cb9da88f61475"
-}

package/.expo/settings.json

@@ -1,10 +0,0 @@
-{
-  "hostType": "lan",
-  "lanType": "ip",
-  "dev": true,
-  "minify": false,
-  "urlRandomness": null,
-  "https": false,
-  "scheme": null,
-  "devClient": false
-}

package/.expo/xcodebuild-error.log

@@ -1,2 +0,0 @@
-2022-08-15 16:30:43.312 xcodebuild[51962:564141] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple.dt.IDEWatchSupportCore
-2022-08-15 16:30:43.312 xcodebuild[51962:564141] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionPointIdentifierToBundleIdentifier for extension Xcode.DebuggerFoundation.AppExtensionToBundleIdentifierMap.watchOS of plug-in com.apple.dt.IDEWatchSupportCore