@scripso-homepad/ui 0.4.18 → 0.4.20

package/dist/web/index.cjs

@@ -28650,12 +28650,14 @@ 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;
 function resolveInputVisualState({
   focused = false,
   error = false,
@@ -28674,8 +28676,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 +28686,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":
@@ -28754,12 +28753,15 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
     alignItems: "center",
     height: INPUT_HEIGHT,
     borderRadius: radii.lg,
-    padding: 16,
+    paddingHorizontal: INPUT_HORIZONTAL_PADDING,
+    paddingVertical: INPUT_VERTICAL_PADDING,
     gap: INPUT_ICON_GAP,
+    // Do not clip glyph ascenders (Armenian / tall fonts).
+    overflow: "visible",
     ...reactNative.Platform.OS === "web" ? {
       boxSizing: "border-box",
       paddingVertical: INPUT_WEB_VERTICAL_PADDING,
-      paddingHorizontal: 16
+      paddingHorizontal: INPUT_HORIZONTAL_PADDING
     } : null
   },
   input: {
@@ -28774,8 +28776,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",
@@ -28787,6 +28788,18 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
   /** Single-line: avoid Android lineHeight jump between placeholder and typed text. */
   inputSingleLine: {
     ...reactNative.Platform.OS === "android" ? { textAlignVertical: "center" } : null
+  },
+  /**
+   * Multiline fields should not flex-fill the container — on iOS a tall TextInput
+   * vertically centers the placeholder.
+   */
+  inputMultiline: {
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%",
+    alignSelf: "stretch",
+    textAlignVertical: "top"
   }
 });
 function hasClassList(node) {
@@ -28875,6 +28888,25 @@ function renderInputIcon(icon, color) {
   }
   return icon;
 }
+var INTEGER_KEYBOARD_TYPES = /* @__PURE__ */ new Set([
+  "numeric",
+  "number-pad",
+  "phone-pad"
+]);
+function sanitizeNumericInput(value, keyboardType) {
+  if (keyboardType === "decimal-pad") {
+    const normalized = value.replace(/,/g, ".").replace(/[^\d.]/g, "");
+    const separatorIndex = normalized.indexOf(".");
+    if (separatorIndex === -1) {
+      return normalized;
+    }
+    return normalized.slice(0, separatorIndex + 1) + normalized.slice(separatorIndex + 1).replace(/\./g, "");
+  }
+  if (keyboardType && INTEGER_KEYBOARD_TYPES.has(keyboardType)) {
+    return value.replace(/\D/g, "");
+  }
+  return value;
+}
 function Input({
   label,
   leftIcon,
@@ -28897,7 +28929,10 @@ function Input({
   showPasswordToggle,
   onFocus,
   onBlur,
+  onChangeText,
+  keyboardType,
   multiline,
+  textAlign = "left",
   textAlignVertical,
   ...props
 }) {
@@ -28931,6 +28966,9 @@ function Input({
     setFocused(false);
     onBlur?.(event);
   }
+  function handleChangeText(value) {
+    onChangeText?.(sanitizeNumericInput(value, keyboardType));
+  }
   const helperMessage = error ?? hint;
   function togglePasswordVisibility() {
     if (!isDisabled) {
@@ -28975,20 +29013,22 @@ function Input({
               ref: inputRef,
               style: [
                 inputFieldMetrics.input,
-                !multiline ? inputFieldMetrics.inputSingleLine : null,
+                multiline ? inputFieldMetrics.inputMultiline : inputFieldMetrics.inputSingleLine,
                 fieldStyles.text,
                 style
               ],
               placeholderTextColor: fieldStyles.placeholder,
               editable,
+              keyboardType,
               multiline,
               secureTextEntry: effectiveSecureTextEntry,
-              textAlign: "left",
+              textAlign,
               textAlignVertical: resolvedTextAlignVertical,
               onFocus: handleFocus,
               onBlur: handleBlur,
               accessibilityState: { disabled: isDisabled },
-              ...props
+              ...props,
+              onChangeText: handleChangeText
             }
           ),
           trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconSlot, children: trailingIcon }) : null
@@ -30583,7 +30623,7 @@ function TableActionsMenu({
       {
         ref: triggerRef,
         variant: "menu",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(TableMoreIcon, { className: "size-6" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(TableMoreIcon, { className: "size-5" }),
         ariaLabel: triggerAriaLabel,
         onClick: () => setOpen((current) => !current),
         "aria-expanded": open,
@@ -30997,7 +31037,8 @@ var styles3 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   withIcon: {
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    gap: 24
   },
   disabled: {
     opacity: 0.6
@@ -31011,8 +31052,7 @@ var styles3 = reactNative.StyleSheet.create({
   },
   labelWithIcon: {
     flex: 1,
-    flexShrink: 1,
-    marginRight: 8
+    flexShrink: 1
   },
   iconContainer: {
     alignItems: "center",