@scripso-homepad/ui 0.4.18 → 0.4.19

package/dist/index.d.cts

@@ -48,7 +48,7 @@ interface InputProps extends TextInputProps {
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, multiline, textAlignVertical, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, onChangeText, keyboardType, multiline, textAlignVertical, ...props }: InputProps): react.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -104,7 +104,7 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, ...props }: PhoneInputProps): react.JSX.Element;
 
 type Country = {
     code: string;

package/dist/index.d.ts

@@ -48,7 +48,7 @@ interface InputProps extends TextInputProps {
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, multiline, textAlignVertical, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, onChangeText, keyboardType, multiline, textAlignVertical, ...props }: InputProps): react.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -104,7 +104,7 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, ...props }: PhoneInputProps): react.JSX.Element;
 
 type Country = {
     code: string;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-U7OSCJKA.js';
-export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-U7OSCJKA.js';
+import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-THZ3HYMF.js';
+export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-THZ3HYMF.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
 import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
 import Svg2, { Path } from 'react-native-svg';
@@ -520,13 +520,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 = useMemo(
     () => normalizeSelectedValues(multiple, value),
     [multiple, value]
@@ -540,6 +533,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 = useMemo(
     () => new Map(
       selectableOptions.map((option, index) => [option.value, index])
@@ -567,7 +568,7 @@ function Select({
     setHighlightedIndex(-1);
   }
   function openMenu() {
-    if (disabled || selectableOptions.length === 0) {
+    if (isEffectivelyDisabled) {
       return;
     }
     triggerRef.current?.measureInWindow((x, y, width, height) => {
@@ -616,14 +617,14 @@ function Select({
   });
   const dropdownTop = anchor ? resolveSelectDropdownTop(anchor, dropdownHeight) : 0;
   return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles.label, className: labelClassName, children: label }) : null,
+    label ? /* @__PURE__ */ jsx(Label, { disabled: isEffectivelyDisabled, style: styles.label, className: labelClassName, children: label }) : null,
     /* @__PURE__ */ jsx(View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxs(
       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: [
@@ -657,7 +658,7 @@ function Select({
                 ChevronDownIcon,
                 {
                   size: SELECT_CHEVRON_SIZE,
-                  color: disabled ? colors.stormGray200 : SELECT_CHEVRON_COLOR
+                  color: isEffectivelyDisabled ? colors.stormGray200 : SELECT_CHEVRON_COLOR
                 }
               )
             }
@@ -666,35 +667,46 @@ function Select({
       }
     ) }),
     helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles.error : styles.hint, children: helperMessage }) : null,
-    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closeMenu, children: /* @__PURE__ */ jsx(Pressable, { style: styles.overlay, onPress: closeMenu, children: anchor ? /* @__PURE__ */ jsx(
-      View,
-      {
-        ref: menuRef,
-        style: [
-          selectDropdownMetrics.menu,
-          styles.dropdown,
-          {
-            top: dropdownTop,
-            left: anchor.x,
-            width: anchor.width,
-            height: dropdownHeight
-          }
-        ],
-        children: needsScroll ? /* @__PURE__ */ jsx(
-          ScrollView,
-          {
-            ref: scrollRef,
-            style: styles.dropdownScroll,
-            contentContainerStyle: styles.dropdownContent,
-            keyboardShouldPersistTaps: "handled",
-            showsVerticalScrollIndicator: true,
-            bounces: false,
-            nestedScrollEnabled: true,
-            children: optionList
-          }
-        ) : /* @__PURE__ */ jsx(View, { style: styles.dropdownContent, children: optionList })
-      }
-    ) : null }) })
+    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closeMenu, children: /* @__PURE__ */ jsxs(View, { style: styles.overlay, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          style: styles.backdrop,
+          onPress: closeMenu,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close"
+        }
+      ),
+      anchor ? /* @__PURE__ */ jsx(
+        View,
+        {
+          ref: menuRef,
+          style: [
+            selectDropdownMetrics.menu,
+            styles.dropdown,
+            {
+              top: dropdownTop,
+              left: anchor.x,
+              width: anchor.width,
+              height: dropdownHeight
+            }
+          ],
+          children: needsScroll ? /* @__PURE__ */ jsx(
+            ScrollView,
+            {
+              ref: scrollRef,
+              style: styles.dropdownScroll,
+              contentContainerStyle: styles.dropdownContent,
+              keyboardShouldPersistTaps: "handled",
+              showsVerticalScrollIndicator: true,
+              bounces: false,
+              nestedScrollEnabled: true,
+              children: optionList
+            }
+          ) : /* @__PURE__ */ jsx(View, { style: styles.dropdownContent, children: optionList })
+        }
+      ) : null
+    ] }) })
   ] });
 }
 var styles = StyleSheet.create({
@@ -718,11 +730,15 @@ var styles = StyleSheet.create({
     justifyContent: "center"
   },
   overlay: {
-    flex: 1,
+    flex: 1
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: colors.transparent
   },
   dropdown: {
-    position: "absolute"
+    position: "absolute",
+    zIndex: 1
   },
   dropdownScroll: {
     flex: 1
@@ -1083,6 +1099,9 @@ var styles2 = StyleSheet.create({
     color: colors.slateBlue
   }
 });
+function sanitizePhoneDigits(value) {
+  return value.replace(/\D/g, "");
+}
 function PhoneInput({
   label,
   countryCode,
@@ -1100,6 +1119,7 @@ function PhoneInput({
   editable = true,
   onFocus,
   onBlur,
+  onChangeText,
   ...props
 }) {
   const wrapperRef = useRef(null);
@@ -1124,6 +1144,9 @@ function PhoneInput({
     setFocused(false);
     onBlur?.(event);
   }
+  function handleChangeText(value) {
+    onChangeText?.(sanitizePhoneDigits(value));
+  }
   const helperMessage = error ?? hint;
   return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
     label ? /* @__PURE__ */ jsx(
@@ -1168,7 +1191,8 @@ function PhoneInput({
               onFocus: handleFocus,
               onBlur: handleBlur,
               accessibilityState: { disabled: isDisabled },
-              ...props
+              ...props,
+              onChangeText: handleChangeText
             }
           )
         }