@scripso-homepad/ui 0.4.19 → 0.4.21

package/dist/web/index.cjs

@@ -28650,12 +28650,16 @@ var buttonTypography = {
 };
 
 // src/theme/input.ts
-var INPUT_HEIGHT = 52;
+var INPUT_HEIGHT = 56;
 var INPUT_ICON_SIZE = 20;
 var INPUT_ICON_GAP = 10;
 var INPUT_OUTLINE_WIDTH = 2;
-var INPUT_TEXT_LINE_HEIGHT = 19;
+var INPUT_TEXT_LINE_HEIGHT = 20;
 var INPUT_WEB_VERTICAL_PADDING = 14;
+var INPUT_VERTICAL_PADDING = 14;
+var INPUT_HORIZONTAL_PADDING = 16;
+var INPUT_MULTILINE_MIN_HEIGHT = 120;
+var INPUT_MULTILINE_INNER_MIN_HEIGHT = INPUT_MULTILINE_MIN_HEIGHT - INPUT_VERTICAL_PADDING * 2;
 function resolveInputVisualState({
   focused = false,
   error = false,
@@ -28674,8 +28678,7 @@ function createOutlineStyle(ringColor) {
     padding: 0,
     backgroundColor: colors.transparent,
     width: "100%",
-    alignSelf: "stretch",
-    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+    alignSelf: "stretch"
   };
 }
 var defaultOutline = {
@@ -28685,13 +28688,11 @@ var defaultOutline = {
   padding: 0,
   backgroundColor: colors.transparent,
   width: "100%",
-  alignSelf: "stretch",
-  ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+  alignSelf: "stretch"
 };
 function getInputFieldStyles(state) {
   const containerBase = {
-    borderRadius: radii.lg,
-    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+    borderRadius: radii.lg
   };
   switch (state) {
     case "disabled":
@@ -28749,19 +28750,35 @@ function getInputFieldStyles(state) {
   }
 }
 var inputFieldMetrics = reactNative.StyleSheet.create({
-  container: {
+  containerBase: {
     flexDirection: "row",
-    alignItems: "center",
-    height: INPUT_HEIGHT,
     borderRadius: radii.lg,
-    padding: 16,
+    paddingHorizontal: INPUT_HORIZONTAL_PADDING,
+    paddingVertical: INPUT_VERTICAL_PADDING,
     gap: INPUT_ICON_GAP,
     ...reactNative.Platform.OS === "web" ? {
       boxSizing: "border-box",
       paddingVertical: INPUT_WEB_VERTICAL_PADDING,
-      paddingHorizontal: 16
+      paddingHorizontal: INPUT_HORIZONTAL_PADDING
     } : null
   },
+  container: {
+    alignItems: "center",
+    height: INPUT_HEIGHT,
+    // Do not clip glyph ascenders on single-line fields (Armenian / tall fonts).
+    overflow: "visible"
+  },
+  /**
+   * Column layout + explicit minHeight so the TextInput hit target matches the
+   * visible box on Android release builds (row + flexGrow:0 collapsed taps).
+   */
+  containerMultiline: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+    minHeight: INPUT_MULTILINE_MIN_HEIGHT,
+    overflow: "hidden"
+  },
   input: {
     flex: 1,
     minWidth: 0,
@@ -28774,8 +28791,7 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
     margin: 0,
     borderWidth: 0,
     backgroundColor: colors.transparent,
-    ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
-    ...reactNative.Platform.OS === "ios" ? { lineHeight: INPUT_TEXT_LINE_HEIGHT, paddingVertical: 2 } : null,
+    // Leave lineHeight unset so platform font metrics keep placeholder tops visible.
     ...reactNative.Platform.OS === "web" ? {
       alignSelf: "center",
       outlineStyle: "none",
@@ -28786,7 +28802,21 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
   },
   /** Single-line: avoid Android lineHeight jump between placeholder and typed text. */
   inputSingleLine: {
-    ...reactNative.Platform.OS === "android" ? { textAlignVertical: "center" } : null
+    ...reactNative.Platform.OS === "android" ? { textAlignVertical: "center", includeFontPadding: false } : null
+  },
+  /**
+   * Fill the column container so the whole field is tappable in release APKs.
+   * `textAlignVertical: "top"` keeps typed text (and Android placeholder) at the top.
+   */
+  inputMultiline: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%",
+    minHeight: INPUT_MULTILINE_INNER_MIN_HEIGHT,
+    alignSelf: "stretch",
+    textAlignVertical: "top",
+    ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null
   }
 });
 function hasClassList(node) {
@@ -28919,6 +28949,7 @@ function Input({
   onChangeText,
   keyboardType,
   multiline,
+  textAlign = "left",
   textAlignVertical,
   ...props
 }) {
@@ -28990,7 +29021,12 @@ function Input({
       reactNative.View,
       {
         ref: fieldRef,
-        style: [inputFieldMetrics.container, fieldStyles.container, fieldStyle],
+        style: [
+          inputFieldMetrics.containerBase,
+          multiline ? inputFieldMetrics.containerMultiline : inputFieldMetrics.container,
+          fieldStyles.container,
+          fieldStyle
+        ],
         children: [
           leftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconSlot, children: renderInputIcon(leftIcon, iconColor) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -28999,7 +29035,7 @@ function Input({
               ref: inputRef,
               style: [
                 inputFieldMetrics.input,
-                !multiline ? inputFieldMetrics.inputSingleLine : null,
+                multiline ? inputFieldMetrics.inputMultiline : inputFieldMetrics.inputSingleLine,
                 fieldStyles.text,
                 style
               ],
@@ -29007,9 +29043,11 @@ function Input({
               editable,
               keyboardType,
               multiline,
+              scrollEnabled: multiline ? true : void 0,
               secureTextEntry: effectiveSecureTextEntry,
-              textAlign: "left",
+              textAlign,
               textAlignVertical: resolvedTextAlignVertical,
+              underlineColorAndroid: "transparent",
               onFocus: handleFocus,
               onBlur: handleBlur,
               accessibilityState: { disabled: isDisabled },