@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/InlineSelect/InlineSelect.js

@@ -0,0 +1,174 @@
+"use strict";
+
+/**
+ * InlineSelect — a compact, borderless select trigger for inside other fields.
+ *
+ * Renders just the selected label + chevron (no FieldBase box) and opens the
+ * shared OptionSheet picker. Designed to live in Input's `leftIcon` /
+ * `rightIcon` slots — currency prefix on an amount field, country code on a
+ * phone field, unit suffix on a measurement — but works anywhere a bare
+ * dropdown trigger is needed (toolbars, list headers).
+ *
+ * Single-select only by design: a multi-select crammed into a field affix has
+ * no sane closed-state rendering. Reach for Select when you need multi.
+ *
+ * ```tsx
+ * <Input
+ *   placeholder="Amount"
+ *   textAlign="right"
+ *   keyboardType="number-pad"
+ *   leftIcon={
+ *     <InlineSelect options={currencies} value={currency} onChange={setCurrency} />
+ *   }
+ * />
+ * ```
+ */
+
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { Chevron } from "../FieldBase/Chevron.js";
+import { resolveFieldSize } from "../FieldBase/FieldBase.js";
+import { OptionSheet } from "../OptionSheet/OptionSheet.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// `unknown` keeps the forwardRef signature non-generic — same pattern as Select.
+const InlineSelect = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled,
+    getOptionDescription,
+    getOptionIcon,
+    value,
+    onChange,
+    placeholder,
+    label,
+    title,
+    searchable = false,
+    haptic,
+    disabled = false,
+    size = 'md',
+    color,
+    chevronColor,
+    chevronSize,
+    textStyle,
+    style,
+    optionStyle,
+    selectedOptionStyle,
+    optionTextStyle,
+    selectedOptionTextStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeTokens = resolveFieldSize(theme, size);
+  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
+  const valueOf = useCallback(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
+  const disabledOf = useCallback(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
+  const descriptionOf = useCallback(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
+  const iconOf = useCallback(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
+  const [open, setOpen] = useState(false);
+  const selectedOption = useMemo(() => {
+    if (value === undefined || value === null) {
+      return undefined;
+    }
+    return options.find(o => valueOf(o) === value);
+  }, [options, value, valueOf]);
+  const isSelected = useCallback(optValue => value === optValue, [value]);
+  const handleOpen = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setOpen(true);
+  }, [disabled, haptic]);
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const handleSelect = useCallback(option => {
+    if (disabledOf(option)) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    onChange(valueOf(option));
+    handleClose();
+  }, [disabledOf, valueOf, onChange, handleClose, haptic]);
+  const triggerColor = disabled ? theme.colors.text.disabled : color ?? theme.components.inlineSelect?.color ?? theme.colors.primary;
+  const displayText = selectedOption !== undefined ? labelOf(selectedOption) : placeholder ?? 'Select';
+  const a11ySummary = selectedOption !== undefined ? `Selected: ${labelOf(selectedOption)}` : placeholder ?? 'No selection';
+  const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      ref: ref,
+      onPress: handleOpen,
+      disabled: disabled,
+      hitSlop: 8,
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        disabled,
+        expanded: open
+      },
+      testID: testID,
+      style: ({
+        pressed
+      }) => [styles.trigger, {
+        columnGap: theme.spacing.xs,
+        opacity: pressed && !disabled ? 0.6 : 1
+      }, style],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.triggerText, {
+          color: triggerColor,
+          fontSize: sizeTokens.fontSize,
+          ...fontFor(theme, 'medium')
+        }, textStyle],
+        numberOfLines: 1,
+        children: displayText
+      }), /*#__PURE__*/_jsx(Chevron, {
+        color: chevronColor ?? triggerColor,
+        size: chevronSize ?? sizeTokens.iconSize,
+        open: open
+      })]
+    }), /*#__PURE__*/_jsx(OptionSheet, {
+      open: open,
+      onClose: handleClose,
+      title: title,
+      accessibilityLabel: label ?? placeholder ?? 'Options',
+      options: options,
+      labelOf: labelOf,
+      valueOf: valueOf,
+      disabledOf: disabledOf,
+      descriptionOf: descriptionOf,
+      iconOf: iconOf,
+      isSelected: isSelected,
+      onSelect: handleSelect,
+      searchable: searchable,
+      optionStyle: optionStyle,
+      selectedOptionStyle: selectedOptionStyle,
+      optionTextStyle: optionTextStyle,
+      selectedOptionTextStyle: selectedOptionTextStyle
+    })]
+  });
+});
+InlineSelect.displayName = 'InlineSelect';
+const buildStyles = _theme => StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  triggerText: {
+    includeFontPadding: false
+  }
+});
+export { InlineSelect };
+export default InlineSelect;
+//# sourceMappingURL=InlineSelect.js.map

package/lib/module/components/InlineSelect/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, InlineSelect } from "./InlineSelect.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Input/Input.js

@@ -0,0 +1,398 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useReducedMotion } from "../../hooks/index.js";
+import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { FieldBase, RequiredMark, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// FieldBase carries every dimension except `multilineMinHeight` — Input owns
+// the multiline height ramp, so we keep a tiny per-size table for that one key.
+const multilineMinHeightMap = {
+  sm: 72,
+  md: 92,
+  lg: 110
+};
+const Input = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    placeholder,
+    value,
+    onChangeText,
+    error,
+    helperText,
+    secureTextEntry = false,
+    showPasswordToggle = false,
+    disabled = false,
+    multiline = false,
+    leftIcon,
+    rightIcon,
+    size = 'md',
+    variant: variantProp,
+    labelMode: labelModeProp,
+    required = false,
+    maxLength,
+    showCounter = true,
+    textAlign,
+    format,
+    parse,
+    style,
+    containerStyle,
+    inputStyle,
+    labelStyle,
+    messageStyle,
+    borderRadius: borderRadiusProp,
+    onFocus,
+    onBlur,
+    accessibilityLabel,
+    testID,
+    editable,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeTokens = resolveFieldSize(theme, size);
+  const multilineMinHeight = multilineMinHeightMap[size];
+
+  // Resolution chain: caller prop → component-specific token
+  // (`components.input.defaultVariant`) → shared field-family token
+  // (`components.field.defaultVariant`) → library default. The middle step lets
+  // brands flip every input-style control (Input, Select, SearchBar, …) in one
+  // place; the per-component slot still wins when a brand needs a different
+  // default for Input specifically.
+  const variant = variantProp ?? theme.components.input?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'outlined';
+  const labelMode = labelModeProp ?? theme.components.input?.defaultLabelMode ?? 'float';
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const hasValue = typeof value === 'string' && value.length > 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+  const isEditable = !disabled && editable !== false;
+  const shouldFloat = isFocused || hasValue;
+  // Floating label only when explicitly opted into via labelMode='float' AND the
+  // field is single-line. labelMode='top' OR multiline both force a static label
+  // above the field — the staticLabel branch below handles both.
+  const showFloatingLabel = Boolean(label) && !multiline && labelMode === 'float';
+
+  // Animations local to Input: floating label, shake, helper/error fade.
+  // Border + fill animations now live inside FieldBase.
+  const labelAnim = useRef(createAnimatedValue(shouldFloat ? 1 : 0)).current;
+  const shakeAnim = useRef(createAnimatedValue(0)).current;
+  const messageAnim = useRef(createAnimatedValue(hasError || helperText ? 1 : 0)).current;
+
+  // Floating label animation
+  useEffect(() => {
+    const anim = Animated.timing(labelAnim, {
+      toValue: shouldFloat ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [shouldFloat, labelAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Helper / error fade
+  useEffect(() => {
+    const anim = Animated.timing(messageAnim, {
+      toValue: hasError || helperText ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [hasError, helperText, messageAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Error shake — off by default; consumers opt in via
+  // theme.components.input.shakeOnError. The haptic ships with the shake.
+  const reduceMotion = useReducedMotion();
+  const shakeOnError = theme.components.input?.shakeOnError ?? false;
+  const prevErrorRef = useRef(hasError);
+  useEffect(() => {
+    if (!shakeOnError) {
+      prevErrorRef.current = hasError;
+      return;
+    }
+    let anim;
+    if (hasError && !prevErrorRef.current) {
+      // Reduce Motion: keep the error haptic, skip the shake.
+      if (!reduceMotion) {
+        setNativeValue(shakeAnim, 0);
+        anim = Animated.sequence([Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: 0,
+          duration: 100,
+          useNativeDriver: true
+        })]);
+        anim.start();
+      }
+      triggerHaptic('notificationError');
+    }
+    prevErrorRef.current = hasError;
+    return () => anim?.stop();
+  }, [hasError, shakeAnim, shakeOnError, reduceMotion]);
+  const handleFocus = useCallback(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = useCallback(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const togglePasswordVisibility = useCallback(() => {
+    triggerHaptic('selection');
+    setIsPasswordVisible(prev => !prev);
+  }, []);
+
+  // Bridge legacy Input fill-colour API (theme.components.input.fillColors[variant])
+  // onto FieldBase's FieldVariantTokens shape. Keeps consumer overrides working.
+  const fillOverrides = useMemo(() => {
+    const legacy = theme.components.input?.fillColors?.[variant];
+    if (!legacy) {
+      return undefined;
+    }
+    const overrides = {};
+    if (legacy.idleEmpty !== undefined) {
+      overrides.backgroundIdleEmpty = legacy.idleEmpty;
+    }
+    if (legacy.idleFilled !== undefined) {
+      overrides.backgroundIdleFilled = legacy.idleFilled;
+    }
+    if (legacy.focus !== undefined) {
+      overrides.backgroundFocused = legacy.focus;
+    }
+    if (legacy.error !== undefined) {
+      overrides.backgroundError = legacy.error;
+    }
+    if (legacy.disabled !== undefined) {
+      overrides.backgroundDisabled = legacy.disabled;
+    }
+    return Object.keys(overrides).length > 0 ? overrides : undefined;
+  }, [theme.components.input?.fillColors, variant]);
+
+  // Selection / caret / handle colour walks the same resolution chain as the
+  // focused border so brands that override `components.field.<variant>.borderFocused`
+  // get a matching selection tint without also having to update root `border.focus`.
+  const selectionColor = useMemo(() => resolveVariantColors(theme, variant, fillOverrides).borderFocusedRepresentative, [theme, variant, fillOverrides]);
+  const borderRadiusOverride = borderRadiusProp ?? theme.components.input?.borderRadius;
+
+  // Floating label styles
+  const labelTranslateY = labelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -22]
+  });
+  const labelScale = labelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0.85]
+  });
+  // Single source of truth for label colour — used by BOTH static-top and
+  // floating modes. Label stays its resting colour on focus unless the consumer
+  // opts in via theme.components.input.tintLabelOnFocus.
+  const tintLabelOnFocus = theme.components.input?.tintLabelOnFocus ?? false;
+  const labelColor = hasError ? theme.colors.error : isFocused && tintLabelOnFocus ? theme.colors.border.focus : theme.colors.text.secondary;
+  const shakeTranslateX = shakeAnim.interpolate({
+    inputRange: [-1, 0, 1],
+    outputRange: [-6, 0, 6]
+  });
+
+  // The floating label tracks the value's horizontal alignment so
+  // `textAlign="right"` (amount fields) keeps label and text together.
+  // Centre uses `alignSelf` — Yoga aligns absolutely-positioned children by
+  // alignment props when the horizontal insets are left unset.
+  const hasTrailingSlot = Boolean(rightIcon) || showPasswordToggle && secureTextEntry;
+  const floatingLabelPosition = textAlign === 'right' ? {
+    right: sizeTokens.paddingHorizontal + (hasTrailingSlot ? sizeTokens.iconSize + theme.spacing.sm : 0)
+  } : textAlign === 'center' ? {
+    alignSelf: 'center'
+  } : {
+    left: sizeTokens.paddingHorizontal + (leftIcon ? sizeTokens.iconSize + theme.spacing.sm : 0)
+  };
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
+  const inputTextColor = fieldText.color;
+  const placeholderTextColor = fieldText.placeholderColor;
+  const messageText = hasError ? error : helperText;
+  const messageColor = hasError ? theme.colors.error : theme.colors.text.secondary;
+  const a11yLabel = accessibilityLabel ?? label ?? placeholder;
+  const iconColor = disabled ? theme.colors.text.disabled : theme.colors.text.secondary;
+  const trailing = (() => {
+    if (showPasswordToggle && secureTextEntry) {
+      const renderer = isPasswordVisible ? theme.icons?.eyeOff : theme.icons?.eye;
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: togglePasswordVisibility,
+        disabled: !isEditable,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: isPasswordVisible ? 'Hide password' : 'Show password',
+        children: renderer ? renderer({
+          size: sizeTokens.iconSize,
+          color: iconColor
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: {
+            fontSize: sizeTokens.iconSize,
+            color: iconColor
+          },
+          children: isPasswordVisible ? '✕' : '○'
+        })
+      });
+    }
+    if (rightIcon) {
+      return /*#__PURE__*/_jsx(View, {
+        children: rightIcon
+      });
+    }
+    return null;
+  })();
+  const leading = leftIcon ? /*#__PURE__*/_jsx(View, {
+    children: leftIcon
+  }) : null;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.container, {
+      transform: [{
+        translateX: shakeTranslateX
+      }]
+    }, style],
+    children: [label && !showFloatingLabel ? /*#__PURE__*/_jsxs(Text, {
+      style: [styles.staticLabel, {
+        color: labelColor,
+        fontSize: theme.typography.fontSize.sm,
+        ...fontFor(theme, 'medium'),
+        marginBottom: theme.spacing.xxs
+      }, labelStyle],
+      children: [label, required ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.fieldWrapper,
+      children: [/*#__PURE__*/_jsx(FieldBase, {
+        size: size,
+        variant: variant,
+        focused: isFocused,
+        disabled: disabled,
+        error: hasError,
+        filled: hasValue,
+        minHeight: multiline ? multilineMinHeight : undefined,
+        borderRadius: borderRadiusOverride,
+        fillOverrides: fillOverrides,
+        leading: leading,
+        trailing: trailing,
+        style: containerStyle,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          ref: ref,
+          style: [styles.input, {
+            color: inputTextColor,
+            fontSize: sizeTokens.fontSize,
+            ...fieldText.weightStyle,
+            minHeight: multiline ? multilineMinHeight - sizeTokens.paddingVertical * 2 : undefined,
+            textAlignVertical: multiline ? 'top' : 'center'
+          }, inputStyle],
+          textAlign: textAlign,
+          placeholder: showFloatingLabel && !shouldFloat ? undefined : placeholder,
+          placeholderTextColor: placeholderTextColor,
+          value: format && value != null ? format(value) : value,
+          onChangeText: text => {
+            if (!onChangeText) {
+              return;
+            }
+            onChangeText(parse ? parse(text) : text);
+          },
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          editable: isEditable,
+          secureTextEntry: secureTextEntry && !isPasswordVisible,
+          multiline: multiline,
+          maxLength: maxLength,
+          selectionColor: selectionColor,
+          accessibilityLabel: a11yLabel,
+          accessibilityState: {
+            disabled
+          },
+          testID: testID,
+          ...rest
+        })
+      }), showFloatingLabel ? /*#__PURE__*/_jsxs(Animated.Text, {
+        pointerEvents: "none",
+        style: [styles.floatingLabel, floatingLabelPosition, {
+          top: sizeTokens.paddingVertical,
+          color: labelColor,
+          fontSize: sizeTokens.fontSize,
+          ...fontFor(theme, 'medium'),
+          backgroundColor: shouldFloat && variant === 'outlined' ? theme.colors.background.primary : 'transparent',
+          paddingHorizontal: shouldFloat && variant === 'outlined' ? 4 : 0,
+          transform: [{
+            translateY: labelTranslateY
+          }, {
+            scale: labelScale
+          }]
+        }, labelStyle],
+        children: [label, required ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
+      }) : null]
+    }), messageText ? /*#__PURE__*/_jsx(Animated.Text, {
+      style: [styles.messageText, {
+        color: messageColor,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs,
+        opacity: messageAnim
+      }, messageStyle],
+      accessibilityLiveRegion: hasError ? 'polite' : 'none',
+      children: messageText
+    }) : null, showCounter && typeof maxLength === 'number' && typeof value === 'string' ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.counterText, {
+        color: theme.colors.text.tertiary,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs
+      }],
+      children: `${value.length} / ${maxLength}`
+    }) : null]
+  });
+});
+Input.displayName = 'Input';
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  staticLabel: {
+    includeFontPadding: false
+  },
+  // Wraps FieldBase + the absolutely-positioned floating label so the label
+  // can sit over the field's top border without being clipped.
+  fieldWrapper: {
+    position: 'relative',
+    overflow: 'visible'
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
+  },
+  floatingLabel: {
+    position: 'absolute',
+    zIndex: 1
+  },
+  messageText: {
+    includeFontPadding: false
+  },
+  counterText: {
+    alignSelf: 'flex-end',
+    includeFontPadding: false
+  }
+});
+export { Input };
+export default Input;
+//# sourceMappingURL=Input.js.map

package/lib/module/components/Input/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, Input } from "./Input.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -0,0 +1,111 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { Keyboard, Platform, ScrollView, TextInput } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A ScrollView that keeps the focused input visible above the keyboard — no
+ * native dependency. On keyboard show it pads the content by the keyboard
+ * height and scrolls the focused TextInput so its bottom sits `extraScrollHeight`
+ * above the keyboard, but only when it would otherwise be covered (so already-
+ * visible fields don't jump). The classic measure-and-scroll approach, in pure RN.
+ */
+const KeyboardAwareScrollView = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    extraScrollHeight = 24,
+    disabled = false,
+    contentContainerStyle,
+    onScroll,
+    onLayout,
+    ...rest
+  } = props;
+  const scrollRef = useRef(null);
+  const scrollYRef = useRef(0);
+  const viewportHeightRef = useRef(0);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const setRefs = useCallback(node => {
+    scrollRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  const scrollFocusedIntoView = useCallback(kbHeight => {
+    const scroll = scrollRef.current;
+    const stateApi = TextInput?.State;
+    const focused = stateApi?.currentlyFocusedInput?.();
+    if (!scroll || !focused?.measureLayout) {
+      return;
+    }
+    focused.measureLayout(scroll, (_left, top, _width, height) => {
+      const scrollY = scrollYRef.current;
+      const viewportH = viewportHeightRef.current;
+      if (viewportH <= 0) {
+        return;
+      }
+      const keyboardTop = viewportH - kbHeight - extraScrollHeight;
+      const fieldBottomInViewport = top - scrollY + height;
+      if (fieldBottomInViewport > keyboardTop) {
+        const delta = fieldBottomInViewport - keyboardTop;
+        scroll.scrollTo({
+          y: scrollY + delta,
+          animated: true
+        });
+      }
+    }, () => undefined);
+  }, [extraScrollHeight]);
+  useEffect(() => {
+    if (disabled) {
+      return undefined;
+    }
+    // iOS exposes the will* events (smoother); Android only fires did*.
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    let rafId;
+    const showSub = Keyboard.addListener(showEvent, e => {
+      const height = e.endCoordinates?.height ?? 0;
+      setKeyboardHeight(height);
+      // Wait a frame so the padding is applied before we scroll. Tracked so
+      // it can be cancelled on unmount (never runs against a torn-down tree).
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(() => scrollFocusedIntoView(height));
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
+    return () => {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+      }
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [disabled, scrollFocusedIntoView]);
+  const handleLayout = useCallback(e => {
+    viewportHeightRef.current = e.nativeEvent.layout.height;
+    onLayout?.(e);
+  }, [onLayout]);
+  const handleScroll = useCallback(e => {
+    scrollYRef.current = e.nativeEvent.contentOffset.y;
+    onScroll?.(e);
+  }, [onScroll]);
+  return /*#__PURE__*/_jsx(ScrollView, {
+    ref: setRefs,
+    onScroll: handleScroll,
+    onLayout: handleLayout,
+    scrollEventThrottle: 16,
+    keyboardShouldPersistTaps: "handled",
+    keyboardDismissMode: Platform.OS === 'ios' ? 'interactive' : 'on-drag',
+    contentContainerStyle: [contentContainerStyle, {
+      paddingBottom: keyboardHeight
+    }],
+    ...rest,
+    children: children
+  });
+});
+KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+export { KeyboardAwareScrollView };
+export default KeyboardAwareScrollView;
+//# sourceMappingURL=KeyboardAwareScrollView.js.map

package/lib/module/components/KeyboardAwareScrollView/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { KeyboardAwareScrollView } from "./KeyboardAwareScrollView.js";
+//# sourceMappingURL=index.js.map