@hero-design/rn-work-uikit 1.13.4 → 1.13.5

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.13.4",
+  "version": "1.13.5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "types": "types/index.d.ts",
   "react-native": "src/index.ts",
+  "types": "types/index.d.ts",
   "description": "EH Work specific UI components built on top of @hero-design/rn",
   "scripts": {
     "lint": "eslint src --quiet",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "8.124.2",
+    "@hero-design/rn": "8.125.0",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {

package/src/components/TextInput/index.tsx

@@ -252,7 +252,7 @@ export const InternalTextInput = forwardRef<
       style: StyleSheet.flatten([
         {
           backgroundColor,
-          color: theme.__hd__.textInput.colors.text,
+          color: theme.__hd__.textInput.colors.text.default,
         },
         textInputStyle,
       ]),

package/src/theme/components/textInput.ts

@@ -7,7 +7,13 @@ const getTextInputTheme = (theme: Theme) => {
   const colors = {
     ...baseTextInputTheme.colors,
     // Example: override specific colors
-    // text: theme.colors.customTextColor,
+    asterisks: {
+      default: theme.colors.onErrorSurface,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onErrorSurface,
+    },
     borders: {
       default: theme.colors.secondaryOutline,
       error: theme.colors.onErrorSurface,
@@ -24,6 +30,13 @@ const getTextInputTheme = (theme: Theme) => {
       filled: theme.colors.inactiveOnDefaultGlobalSurface,
       focused: theme.colors.onDefaultGlobalSurface,
     },
+    labelsInsideTextInput: {
+      default: theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onDefaultGlobalSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface,
+    },
     maxLengthLabels: {
       default: theme.colors.onDefaultGlobalSurface,
       error: theme.colors.onErrorSurface,
@@ -37,7 +50,8 @@ const getTextInputTheme = (theme: Theme) => {
   const space = {
     ...baseTextInputTheme.space,
     // Example: override specific spacing
-    // containerPadding: theme.space.large,
+    containerPadding: theme.space.medium,
+    errorMarginLeft: theme.space.xsmall,
     inputWrapperMarginVertical: theme.space.small,
     prefixAndInputContainerGap: theme.space.xsmall,
   };
@@ -56,10 +70,6 @@ const getTextInputTheme = (theme: Theme) => {
 
   const borderWidths = {
     ...baseTextInputTheme.borderWidths,
-    container: {
-      ...baseTextInputTheme.borderWidths.container,
-      normal: theme.borderWidths.medium,
-    },
   };
 
   const radii = {
@@ -71,6 +81,7 @@ const getTextInputTheme = (theme: Theme) => {
     containerMinHeight: theme.sizes.xxxxlarge,
     errorAndHelpTextContainerHeight: 0,
     textInputMinHeight: baseTextInputTheme.fontSizes.text + theme.space.small,
+    textareaHeight: theme.sizes['15xlarge'],
   };
 
   const lineHeights = {

package/types/index.d.ts

@@ -396,6 +396,13 @@ declare const _default: React$1.ForwardRefExoticComponent<Omit<RichTextEditorPro
 
 declare const getTextInputTheme: (theme: Theme$1) => {
     colors: {
+        asterisks: {
+            default: string;
+            error: string;
+            disabled: string;
+            readonly: string;
+            filled: string;
+        };
         borders: {
             default: string;
             error: string;
@@ -412,32 +419,32 @@ declare const getTextInputTheme: (theme: Theme$1) => {
             filled: string;
             focused: string;
         };
-        maxLengthLabels: {
+        labelsInsideTextInput: {
             default: string;
             error: string;
             disabled: string;
             readonly: string;
             filled: string;
-            focused: string;
         };
-        labelBackground: string;
-        containerBackground: string;
-        asterisks: {
+        maxLengthLabels: {
             default: string;
             error: string;
             disabled: string;
             readonly: string;
             filled: string;
+            focused: string;
         };
+        labelBackground: string;
+        containerBackground: string;
         error: string;
-        text: string;
-        labelsInsideTextInput: {
+        text: {
             default: string;
+            filled: string;
             error: string;
-            disabled: string;
             readonly: string;
-            filled: string;
+            disabled: string;
         };
+        readonlyBackground: string;
         placeholder: {
             default: string;
             error: string;
@@ -447,9 +454,12 @@ declare const getTextInputTheme: (theme: Theme$1) => {
         };
     };
     space: {
+        containerPadding: number;
+        errorMarginLeft: number;
         inputWrapperMarginVertical: number;
         prefixAndInputContainerGap: number;
-        containerPadding: number;
+        containerHorizontalPadding: number;
+        containerVerticalPadding: number;
         labelLeft: number;
         labelTop: number;
         labelPaddingBottom: number;
@@ -457,11 +467,12 @@ declare const getTextInputTheme: (theme: Theme$1) => {
         inputHorizontalMargin: number;
         errorContainerMarginRight: number;
         errorAndHelpTextContainerMarginTop: number;
-        errorMarginLeft: number;
-        errorAndHelpTextContainerHorizontalPadding: number;
         containerMarginTop: number;
         labelInsideTextInputMarginTop: number;
         errorAndHelpTextContainerPaddingTop: number;
+        inputAndLabelContainerPaddingTop: number;
+        labelFocusedTranslateY: number;
+        textareaLabelIdleTranslateY: number;
     };
     fonts: {
         text: string;
@@ -488,10 +499,12 @@ declare const getTextInputTheme: (theme: Theme$1) => {
         errorAndHelpTextContainerHeight: number;
         textInputMinHeight: number;
         textareaHeight: number;
+        errorAndHelpTextContainerMinHeight: number;
         textInputMaxHeight: number;
     };
     lineHeights: {
         topLabel: number;
+        label: number;
     };
 };