@scripso-homepad/ui 0.4.18 → 0.4.20

package/dist/index.cjs

@@ -460,7 +460,8 @@ var styles = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   withIcon: {
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    gap: 24
   },
   disabled: {
     opacity: 0.6
@@ -474,8 +475,7 @@ var styles = reactNative.StyleSheet.create({
   },
   labelWithIcon: {
     flex: 1,
-    flexShrink: 1,
-    marginRight: 8
+    flexShrink: 1
   },
   iconContainer: {
     alignItems: "center",
@@ -532,12 +532,14 @@ function EyeOffIcon({
     }
   ) });
 }
-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,
@@ -556,8 +558,7 @@ function createOutlineStyle(ringColor) {
     padding: 0,
     backgroundColor: colors.transparent,
     width: "100%",
-    alignSelf: "stretch",
-    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+    alignSelf: "stretch"
   };
 }
 var defaultOutline = {
@@ -567,13 +568,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":
@@ -636,12 +635,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: {
@@ -656,8 +658,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",
@@ -669,6 +670,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 Label({
@@ -717,6 +730,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,
@@ -739,7 +771,10 @@ function Input({
   showPasswordToggle,
   onFocus,
   onBlur,
+  onChangeText,
+  keyboardType,
   multiline,
+  textAlign = "left",
   textAlignVertical,
   ...props
 }) {
@@ -773,6 +808,9 @@ function Input({
     setFocused(false);
     onBlur?.(event);
   }
+  function handleChangeText(value) {
+    onChangeText?.(sanitizeNumericInput(value, keyboardType));
+  }
   const helperMessage = error ?? hint;
   function togglePasswordVisibility() {
     if (!isDisabled) {
@@ -817,20 +855,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: styles3.iconSlot, children: trailingIcon }) : null
@@ -1386,13 +1426,6 @@ function Select({
     inputRange: [0, 1],
     outputRange: ["0deg", "180deg"]
   });
-  const hasError = Boolean(error) || Boolean(invalid);
-  const visualState = resolveInputVisualState({
-    focused: open,
-    error: hasError,
-    disabled
-  });
-  const fieldStyles = getSelectFieldStyles(visualState);
   const selectedValues = react.useMemo(
     () => normalizeSelectedValues(multiple, value),
     [multiple, value]
@@ -1406,6 +1439,14 @@ function Select({
     () => options.filter((option) => !option.disabled),
     [options]
   );
+  const isEffectivelyDisabled = disabled || selectableOptions.length === 0;
+  const hasError = Boolean(error) || Boolean(invalid);
+  const visualState = resolveInputVisualState({
+    focused: open,
+    error: hasError,
+    disabled: isEffectivelyDisabled
+  });
+  const fieldStyles = getSelectFieldStyles(visualState);
   const selectableIndexByValue = react.useMemo(
     () => new Map(
       selectableOptions.map((option, index) => [option.value, index])
@@ -1433,7 +1474,7 @@ function Select({
     setHighlightedIndex(-1);
   }
   function openMenu() {
-    if (disabled || selectableOptions.length === 0) {
+    if (isEffectivelyDisabled) {
       return;
     }
     triggerRef.current?.measureInWindow((x, y, width, height) => {
@@ -1452,7 +1493,6 @@ function Select({
       return;
     }
     if (selectedValues.includes(nextValue)) {
-      onValueChange?.("");
       closeMenu();
       return;
     }
@@ -1482,14 +1522,14 @@ function Select({
   });
   const dropdownTop = anchor ? resolveSelectDropdownTop(anchor, dropdownHeight) : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
+    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled: isEffectivelyDisabled, style: styles4.label, className: labelClassName, children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.Pressable,
       {
         ref: triggerRef,
         accessibilityRole: "button",
-        accessibilityState: { disabled, expanded: open },
-        disabled,
+        accessibilityState: { disabled: isEffectivelyDisabled, expanded: open },
+        disabled: isEffectivelyDisabled,
         onPress: open ? closeMenu : openMenu,
         style: [selectFieldMetrics.container, fieldStyles.container, fieldStyle],
         children: [
@@ -1523,7 +1563,7 @@ function Select({
                 ChevronDownIcon,
                 {
                   size: SELECT_CHEVRON_SIZE,
-                  color: disabled ? colors.stormGray200 : SELECT_CHEVRON_COLOR
+                  color: isEffectivelyDisabled ? colors.stormGray200 : SELECT_CHEVRON_COLOR
                 }
               )
             }
@@ -1532,35 +1572,46 @@ function Select({
       }
     ) }),
     helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closeMenu, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: styles4.overlay, onPress: closeMenu, children: anchor ? /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.View,
-      {
-        ref: menuRef,
-        style: [
-          selectDropdownMetrics.menu,
-          styles4.dropdown,
-          {
-            top: dropdownTop,
-            left: anchor.x,
-            width: anchor.width,
-            height: dropdownHeight
-          }
-        ],
-        children: needsScroll ? /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.ScrollView,
-          {
-            ref: scrollRef,
-            style: styles4.dropdownScroll,
-            contentContainerStyle: styles4.dropdownContent,
-            keyboardShouldPersistTaps: "handled",
-            showsVerticalScrollIndicator: true,
-            bounces: false,
-            nestedScrollEnabled: true,
-            children: optionList
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.dropdownContent, children: optionList })
-      }
-    ) : null }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closeMenu, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.overlay, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          style: styles4.backdrop,
+          onPress: closeMenu,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close"
+        }
+      ),
+      anchor ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: menuRef,
+          style: [
+            selectDropdownMetrics.menu,
+            styles4.dropdown,
+            {
+              top: dropdownTop,
+              left: anchor.x,
+              width: anchor.width,
+              height: dropdownHeight
+            }
+          ],
+          children: needsScroll ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.ScrollView,
+            {
+              ref: scrollRef,
+              style: styles4.dropdownScroll,
+              contentContainerStyle: styles4.dropdownContent,
+              keyboardShouldPersistTaps: "handled",
+              showsVerticalScrollIndicator: true,
+              bounces: false,
+              nestedScrollEnabled: true,
+              children: optionList
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.dropdownContent, children: optionList })
+        }
+      ) : null
+    ] }) })
   ] });
 }
 var styles4 = reactNative.StyleSheet.create({
@@ -1584,11 +1635,15 @@ var styles4 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   overlay: {
-    flex: 1,
+    flex: 1
+  },
+  backdrop: {
+    ...reactNative.StyleSheet.absoluteFillObject,
     backgroundColor: colors.transparent
   },
   dropdown: {
-    position: "absolute"
+    position: "absolute",
+    zIndex: 1
   },
   dropdownScroll: {
     flex: 1
@@ -1949,6 +2004,9 @@ var styles5 = reactNative.StyleSheet.create({
     color: colors.slateBlue
   }
 });
+function sanitizePhoneDigits(value) {
+  return value.replace(/\D/g, "");
+}
 function PhoneInput({
   label,
   countryCode,
@@ -1966,6 +2024,7 @@ function PhoneInput({
   editable = true,
   onFocus,
   onBlur,
+  onChangeText,
   ...props
 }) {
   const wrapperRef = react.useRef(null);
@@ -1990,6 +2049,9 @@ function PhoneInput({
     setFocused(false);
     onBlur?.(event);
   }
+  function handleChangeText(value) {
+    onChangeText?.(sanitizePhoneDigits(value));
+  }
   const helperMessage = error ?? hint;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles6.wrapper, containerStyle], children: [
     label ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2034,7 +2096,8 @@ function PhoneInput({
               onFocus: handleFocus,
               onBlur: handleBlur,
               accessibilityState: { disabled: isDisabled },
-              ...props
+              ...props,
+              onChangeText: handleChangeText
             }
           )
         }