@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/Input/Input.js

@@ -1,591 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Input = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _index3 = require("../../utils/index.js");
-var _defaultIcons = require("../AppIcon/defaultIcons.js");
-var _slotIcon = require("../AppIcon/slotIcon.js");
-var _index4 = require("../Button/index.js");
-var _FieldBase = require("../FieldBase/FieldBase.js");
-var _useFloatingLabel = require("../FieldBase/useFloatingLabel.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * What kind of field this is. One prop switches the whole behaviour set:
- * - `'input'` (default): single-line text.
- * - `'password'`: masked value, eye toggle in the trailing slot, no
- *   auto-capitalisation or autocorrect.
- * - `'textarea'`: multi-line, taller box, text anchored to the top. A
- *   floating label rests on the first line and rises to the top edge like it
- *   does on a single-line field.
- */
-
-/** State handed to a `leftIcon` / `rightIcon` render function. */
-
-/** An icon name, `{ name, variant }`, a node, or a render function; see `SlotIcon`. */
-
-/**
- * A button beside the field box, for a "Verify" / "Apply" / "Look up" action
- * on what was typed. Drawn with the library Button at the box's own height,
- * outlined by default; the label stays above the box and the helper or error
- * below it, not the button.
- */
-
-// 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 = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    label,
-    placeholder,
-    value,
-    onChangeText,
-    error,
-    helperText,
-    type = 'input',
-    secureTextEntry = false,
-    showPasswordToggle = false,
-    disabled = false,
-    multiline = false,
-    leftIcon,
-    rightIcon,
-    unit,
-    unitStyle,
-    action,
-    actionStyle,
-    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 = (0, _index2.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
-  const multilineMinHeight = multilineMinHeightMap[size];
-  // A textarea sets its line height explicitly so FieldBase can centre the
-  // slots on the first line; single-line fields leave the platform default.
-  const textareaLineHeight = Math.round(sizeTokens.fontSize * 1.4);
-
-  // 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 ?? 'top';
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [isPasswordVisible, setIsPasswordVisible] = (0, _react.useState)(false);
-
-  // `type` is the switch; the React Native props and `showPasswordToggle`
-  // still work on their own so a plain `secureTextEntry` field stays masked
-  // without an eye and `multiline` alone still grows the box.
-  const isPassword = type === 'password' || showPasswordToggle || secureTextEntry;
-  const showToggle = type === 'password' || showPasswordToggle;
-  const isTextarea = type === 'textarea' || multiline;
-  // On a single-line field the platform's own line box leaves the glyphs
-  // about a point below the icon's centre (measured: 3px at 2.75x); a
-  // textarea's explicit line box centres them exactly, which reads as
-  // "higher" beside the same icon. This nudge pushes the textarea's text and
-  // resting label down by that same optical amount (1dp at sm/md, 2dp at lg)
-  // so both field types line up with the icon identically.
-  const textareaOpticalNudge = isTextarea ? Math.round(sizeTokens.fontSize * 0.1) : 0;
-  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;
-
-  // The field's own handle on the TextInput, beside the consumer's ref: a
-  // tap anywhere on the box (padding, icon, gap) focuses the input, not
-  // only a tap on its text.
-  const inputRef = (0, _react.useRef)(null);
-  const setInputRef = (0, _react.useMemo)(() => (0, _index3.mergeRefs)(inputRef, ref), [ref]);
-  const focusInput = (0, _react.useCallback)(() => {
-    if (isEditable) {
-      inputRef.current?.focus();
-    }
-  }, [isEditable]);
-  // Floating label only when explicitly opted into via labelMode='float';
-  // labelMode='top' keeps the static label above the field. A textarea floats
-  // too: its label rests on the first line (the text is top-anchored) and
-  // rises to the top edge exactly like a single-line field's.
-  const showFloatingLabel = Boolean(label) && labelMode === 'float';
-
-  // Animations local to Input: floating label, shake, helper/error fade.
-  // Border + fill animations now live inside FieldBase.
-  const shakeAnim = (0, _react.useRef)((0, _index2.createAnimatedValue)(0)).current;
-  const messageAnim = (0, _react.useRef)((0, _index2.createAnimatedValue)(hasError || helperText ? 1 : 0)).current;
-
-  // Helper / error fade
-  (0, _react.useEffect)(() => {
-    const anim = _reactNative.Animated.timing(messageAnim, {
-      toValue: hasError || helperText ? 1 : 0,
-      duration: theme.motion.duration.fast,
-      easing: _reactNative.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 = (0, _index.useReducedMotion)();
-  const shakeOnError = theme.components.input?.shakeOnError ?? false;
-  const prevErrorRef = (0, _react.useRef)(hasError);
-  (0, _react.useEffect)(() => {
-    // Equivalent-mutant note: removing this `return` cannot change behaviour.
-    // The line above it always sets `prevErrorRef.current = hasError` first,
-    // so falling through to the check below becomes `hasError &&
-    // !prevErrorRef.current` === `hasError && !hasError`, which is always
-    // false — the shake/haptic branch can never fire, and the redundant
-    // `prevErrorRef.current = hasError` reassignment at the bottom is a no-op.
-    if (!shakeOnError) {
-      prevErrorRef.current = hasError;
-      return;
-    }
-    let anim;
-    if (hasError && !prevErrorRef.current) {
-      // Reduce Motion: keep the error haptic, skip the shake.
-      if (!reduceMotion) {
-        (0, _index2.setNativeValue)(shakeAnim, 0);
-        anim = _reactNative.Animated.sequence([_reactNative.Animated.timing(shakeAnim, {
-          toValue: 1,
-          duration: 50,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(shakeAnim, {
-          toValue: -1,
-          duration: 50,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(shakeAnim, {
-          toValue: 1,
-          duration: 50,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(shakeAnim, {
-          toValue: -1,
-          duration: 50,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(shakeAnim, {
-          toValue: 0,
-          duration: 100,
-          useNativeDriver: true
-        })]);
-        anim.start();
-      }
-      (0, _index3.triggerHaptic)('notificationError');
-    }
-    prevErrorRef.current = hasError;
-    return () => anim?.stop();
-  }, [hasError, shakeAnim, shakeOnError, reduceMotion]);
-  const handleFocus = (0, _react.useCallback)(e => {
-    setIsFocused(true);
-    onFocus?.(e);
-  }, [onFocus]);
-  const handleBlur = (0, _react.useCallback)(e => {
-    setIsFocused(false);
-    onBlur?.(e);
-  }, [onBlur]);
-  const togglePasswordVisibility = (0, _react.useCallback)(() => {
-    (0, _index3.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 = (0, _react.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 is the field palette's caret blue: the
-  // spec draws it a step stronger than the focus ring, so it is its own token
-  // rather than a read-back of the focused border.
-  const selectionColor = theme.colors.field.caret;
-  const borderRadiusOverride = borderRadiusProp ?? theme.components.input?.borderRadius;
-
-  // Floating label styles.
-  // The floated label must land straddling the top border for EVERY size, not
-  // just `lg`. The resting label sits at `top: paddingVertical`; RN scales a
-  // view around its own centre, so the floated centre = restingTop + labelH/2 +
-  // translateY. Taking labelH ≈ fontSize, translateY = -(paddingVertical +
-  // fontSize / 2) puts the floated centre on the box's top edge regardless of
-  // size. (A former constant -22 was tuned only for `lg`, where 14 + 16/2 = 22,
-  // and left `sm`/`md` floating above the border because their padding is
-  // smaller.)
-  // The floating label (position, notch, animation) is the field family's shared hook below.
-  // Single source of truth for label colour — used by BOTH static-top and
-  // floating modes. The spec keeps the label on its resting ink through focus
-  // AND error (the error state speaks through the ring and the message row,
-  // not the label); consumers can still opt into a focus tint via
-  // theme.components.input.tintLabelOnFocus.
-  const tintLabelOnFocus = theme.components.input?.tintLabelOnFocus ?? false;
-  const labelColor = isFocused && tintLabelOnFocus ? theme.colors.field.borderFocused : theme.colors.field.label;
-  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) || Boolean(unit) || showToggle;
-  const isUnderline = variant === 'underline';
-  // Where the text starts when a leading icon is set: FieldBase lays out
-  // icon, hairline divider and content with its default gap between each.
-  const leadingOffset = leftIcon ? sizeTokens.iconSize + theme.spacing.md + 1 + theme.spacing.md : 0;
-  const floating = (0, _useFloatingLabel.useFloatingLabel)({
-    label,
-    enabled: showFloatingLabel,
-    floated: shouldFloat,
-    required,
-    variant,
-    sizeTokens,
-    leadingOffset,
-    trailingOffset: hasTrailingSlot ? sizeTokens.iconSize + theme.spacing.sm : 0,
-    textAlign,
-    paddingLeft: isUnderline ? 0 : sizeTokens.paddingHorizontal,
-    lineHeight: isTextarea ? textareaLineHeight : undefined,
-    restNudge: textareaOpticalNudge,
-    floatTrim: isTextarea ? 2 : 0,
-    color: labelColor,
-    style: labelStyle
-  });
-  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
-    disabled
-  });
-  const inputTextColor = fieldText.color;
-  const placeholderTextColor = fieldText.placeholderColor;
-  // A required field with no label shows its marker after the placeholder
-  // ("Email *") and drops it with the placeholder once there is a value; the
-  // native placeholder is suppressed while the field draws its own.
-  const requiredPlaceholder = required && !label && !hasValue && typeof placeholder === 'string' && placeholder.length > 0;
-  const messageText = hasError ? error : helperText;
-  const counterText = showCounter && typeof maxLength === 'number' && typeof value === 'string' ? `${value.length} / ${maxLength}` : null;
-  const messageColor = hasError ? theme.colors.field.message : theme.colors.text.secondary;
-  const a11yLabel = accessibilityLabel ?? label ?? placeholder;
-
-  // Slot icons follow the field palette: grey at rest, dark while focused,
-  // dimmed while disabled (the spec's phone and eye glyphs across the five
-  // columns). Render-function icons receive the colour; plain nodes are the
-  // consumer's own.
-  const fieldPalette = theme.colors.field;
-  const iconColor = disabled ? fieldPalette.iconDisabled : isFocused ? fieldPalette.iconFocused : fieldPalette.icon;
-  const slotState = {
-    focused: isFocused,
-    disabled,
-    error: hasError,
-    color: iconColor,
-    size: sizeTokens.iconSize
-  };
-  const renderSlot = icon => (0, _slotIcon.renderSlotIcon)(icon, slotState);
-  const trailing = (() => {
-    if (showToggle) {
-      const renderer = (isPasswordVisible ? theme.icons?.eyeOff : theme.icons?.eye) ?? (isPasswordVisible ? _defaultIcons.defaultIcons.eyeOff : _defaultIcons.defaultIcons.eye);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        onPress: togglePasswordVisibility,
-        disabled: !isEditable,
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: isPasswordVisible ? 'Hide password' : 'Show password',
-        children: renderer({
-          size: sizeTokens.iconSize,
-          color: iconColor
-        })
-      });
-    }
-    const unitEl = unit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.unit, {
-        fontSize: sizeTokens.fontSize,
-        color: placeholderTextColor
-      }, unitStyle],
-      children: unit
-    }) : null;
-    const iconEl = rightIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      children: renderSlot(rightIcon)
-    }) : null;
-    if (unitEl && iconEl) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.trailingRow,
-        children: [unitEl, iconEl]
-      });
-    }
-    return unitEl ?? iconEl;
-  })();
-  const leading = leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    children: renderSlot(leftIcon)
-  }) : null;
-
-  // The action button takes the field's own minHeight: the Button size
-  // ladder runs a couple of points shorter than the field ladder at every
-  // size, and the two must sit flush. A textarea's button hugs the top
-  // rather than stretching over the whole box.
-  const actionNode = action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Button, {
-    variant: action.variant ?? 'outline',
-    tone: action.tone ?? 'primary',
-    size: size,
-    title: action.label,
-    leftIcon: action.icon,
-    loading: action.loading,
-    disabled: disabled || action.disabled,
-    onPress: action.onPress,
-    pressAnimation: false,
-    testID: action.testID,
-    style: [styles.action, {
-      minHeight: sizeTokens.minHeight,
-      alignSelf: isTextarea ? 'flex-start' : 'stretch'
-    }, actionStyle]
-  }) : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.container, {
-      transform: [{
-        translateX: shakeTranslateX
-      }]
-    }, style],
-    children: [label && !showFloatingLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-      style: [styles.staticLabel, {
-        color: labelColor,
-        fontSize: sizeTokens.labelFontSize,
-        ...(0, _index2.fontFor)(theme, 'semibold'),
-        marginBottom: sizeTokens.labelGap
-      }, labelStyle],
-      children: [label, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.RequiredMark, {}) : null]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.fieldRow, {
-        columnGap: theme.spacing.sm,
-        alignItems: isTextarea ? 'flex-start' : 'stretch'
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.fieldWrapper,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldBase, {
-          size: size,
-          variant: variant,
-          focused: isFocused,
-          disabled: disabled,
-          error: hasError,
-          filled: hasValue,
-          minHeight: isTextarea ? multilineMinHeight : undefined,
-          borderRadius: borderRadiusOverride,
-          fillOverrides: fillOverrides,
-          leading: leading,
-          leadingDivider: leftIcon != null,
-          paddingLeft: isUnderline ? 0 : undefined,
-          trailing: trailing,
-          slotAlign: isTextarea ? 'top' : 'center',
-          slotLineHeight: isTextarea ? textareaLineHeight : undefined,
-          topNotch: floating.topNotch,
-          onPress: focusInput,
-          pressFeedback: false,
-          style: containerStyle,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.inputWrap,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-              ref: setInputRef,
-              style: [styles.input, {
-                color: inputTextColor,
-                fontSize: sizeTokens.fontSize,
-                ...fieldText.weightStyle,
-                // The spec's underline row starts its text flush with the rule.
-                paddingLeft: isUnderline ? 0 : undefined,
-                minHeight: isTextarea ? multilineMinHeight - sizeTokens.paddingVertical * 2 : undefined,
-                lineHeight: isTextarea ? textareaLineHeight : undefined,
-                paddingTop: isTextarea ? textareaOpticalNudge : undefined,
-                textAlignVertical: isTextarea ? 'top' : 'center'
-              }, inputStyle],
-              textAlign: textAlign,
-              placeholder: showFloatingLabel && !shouldFloat ? undefined : requiredPlaceholder ? 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: isPassword && !isPasswordVisible,
-              multiline: isTextarea,
-              autoCapitalize: isPassword ? 'none' : undefined,
-              autoCorrect: isPassword ? false : undefined,
-              maxLength: maxLength,
-              selectionColor: selectionColor,
-              accessibilityLabel: a11yLabel,
-              accessibilityState: {
-                disabled
-              },
-              testID: testID,
-              ...rest
-            }), requiredPlaceholder ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.RequiredPlaceholder, {
-              text: placeholder,
-              color: placeholderTextColor,
-              fontSize: sizeTokens.fontSize,
-              weightStyle: fieldText.weightStyle,
-              align: isTextarea ? 'top' : 'center',
-              paddingTop: isTextarea ? textareaOpticalNudge : undefined,
-              textAlign: textAlign
-            }) : null]
-          })
-        }), floating.node]
-      }), actionNode]
-    }), messageText || counterText ?
-    /*#__PURE__*/
-    // One footer row under the box: the helper / error message on the
-    // left, the character counter on the right, both at the message
-    // size and the same `messageGap` from the box. The counter used to
-    // render on its own line BELOW the message, so it sat a whole line
-    // lower than the helper text.
-    (0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.footerRow, {
-        marginTop: sizeTokens.messageGap
-      }],
-      children: [messageText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-        style: [styles.messageRow, {
-          columnGap: theme.spacing.xs + 2,
-          opacity: messageAnim
-        }],
-        accessibilityLiveRegion: hasError ? 'polite' : 'none',
-        children: [hasError ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldErrorGlyph, {
-          size: sizeTokens.messageFontSize,
-          color: messageColor
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.messageText, {
-            color: messageColor,
-            fontSize: sizeTokens.messageFontSize,
-            ...(0, _index2.fontFor)(theme, 'normal')
-          }, messageStyle],
-          children: messageText
-        })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.footerSpacer
-      }), counterText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.counterText, {
-          color: theme.colors.text.tertiary,
-          fontSize: sizeTokens.messageFontSize,
-          ...(0, _index2.fontFor)(theme, 'normal')
-        }],
-        children: counterText
-      }) : null]
-    }) : null]
-  });
-});
-Input.displayName = 'Input';
-const buildStyles = _theme => _reactNative.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.
-  // The box and, when set, the action button side by side.
-  fieldRow: {
-    flexDirection: 'row'
-  },
-  // Takes the row; with an action button beside it, the rest of the row.
-  fieldWrapper: {
-    position: 'relative',
-    overflow: 'visible',
-    flex: 1
-  },
-  action: {
-    flexShrink: 0
-  },
-  input: {
-    flex: 1,
-    padding: 0,
-    margin: 0,
-    includeFontPadding: false
-  },
-  // Hosts the text input and, for a required field with no label, the
-  // placeholder-with-marker overlay drawn over it while the field is empty.
-  inputWrap: {
-    flex: 1,
-    alignSelf: 'stretch',
-    justifyContent: 'center'
-  },
-  unit: {
-    includeFontPadding: false
-  },
-  // Unit and trailing icon side by side, the same gap FieldBase leaves
-  // between its own slots.
-  trailingRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    columnGap: 8
-  },
-  // Footer under the box: message (or a spacer) on the left, counter on the
-  // right, one line, one `messageGap` from the box.
-  footerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    columnGap: 8
-  },
-  footerSpacer: {
-    flex: 1
-  },
-  messageRow: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  messageText: {
-    flexShrink: 1,
-    includeFontPadding: false
-  },
-  counterText: {
-    flexShrink: 0,
-    includeFontPadding: false
-  }
-});
-var _default = exports.default = Input;
-//# sourceMappingURL=Input.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Input=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../Button/index.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_useFloatingLabel=require("../FieldBase/useFloatingLabel.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,a,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(r=t?n:i){if(r.has(e))return r.get(e);r.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?r(o,t,a):o[t]=e[t]);return o})(e,t)}const multilineMinHeightMap={sm:72,md:92,lg:110},Input=exports.Input=(0,_react.forwardRef)((e,t)=>{const{label:i,help:n,placeholder:r,value:a,onChangeText:o,error:l,helperText:s,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:p=!1,multiline:f=!1,leftIcon:x,rightIcon:g,unit:_,unitStyle:m,prefix:v,prefixStyle:h,readOnly:y=!1,action:b,actionStyle:j,size:R="md",variant:S,labelMode:F,required:w=!1,maxLength:N,showCounter:I=!0,textAlign:z,format:T,parse:V,style:k,containerStyle:B,inputStyle:A,labelStyle:q,messageStyle:D,borderRadius:C,onFocus:L,onBlur:M,accessibilityLabel:P,testID:H,editable:O,...E}=e,W=(0,_index2.useTheme)(),G=(0,_react.useMemo)(()=>buildStyles(W),[W]),$=(0,_FieldBase.resolveFieldSize)(W,R),X=multilineMinHeightMap[R],J=Math.round(1.4*$.fontSize),K=S??W.components.input?.defaultVariant??W.components.field?.defaultVariant??"outlined",Q=F??W.components.input?.defaultLabelMode??"top",[U,Y]=(0,_react.useState)(!1),[Z,ee]=(0,_react.useState)(!1),te="password"===d||u||c,ie="password"===d||u,ne="textarea"===d||f,re=ne?Math.round(.1*$.fontSize):0,ae="string"==typeof a&&a.length>0,oe=(0,_FieldBase.hasFieldText)(l),le=(0,_FieldBase.hasFieldText)(s),se=(0,_FieldBase.hasFieldText)(i),de=(0,_FieldBase.hasFieldText)(v),ce=!p&&!1!==O,ue=U||ae||de,pe=(0,_react.useRef)(null),fe=(0,_react.useMemo)(()=>(0,_index3.mergeRefs)(pe,t),[t]),xe=(0,_react.useCallback)(()=>{ce&&pe.current?.focus()},[ce]),ge=se&&"float"===Q,_e=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,me=(0,_react.useRef)((0,_index2.createAnimatedValue)(oe||le?1:0)).current;(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing(me,{toValue:oe||le?1:0,duration:W.motion.duration.fast,easing:_reactNative.Easing.bezier(...W.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[oe,le,me,W.motion.duration.fast,W.motion.easing.standard]);const ve=(0,_index.useReducedMotion)(),he=W.components.input?.shakeOnError??!1,ye=(0,_react.useRef)(oe);(0,_react.useEffect)(()=>{if(!he)return void(ye.current=oe);let e;return oe&&!ye.current&&(ve||((0,_index2.setNativeValue)(_e,0),e=_reactNative.Animated.sequence([_reactNative.Animated.timing(_e,{toValue:1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(_e,{toValue:-1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(_e,{toValue:1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(_e,{toValue:-1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(_e,{toValue:0,duration:100,useNativeDriver:!0})]),e.start()),(0,_index3.triggerHaptic)("notificationError")),ye.current=oe,()=>e?.stop()},[oe,_e,he,ve]);const be=(0,_react.useCallback)(e=>{Y(!0),L?.(e)},[L]),je=(0,_react.useCallback)(e=>{Y(!1),M?.(e)},[M]),Re=(0,_react.useCallback)(()=>{(0,_index3.triggerHaptic)("selection"),ee(e=>!e)},[]),Se=(0,_react.useMemo)(()=>{const e=W.components.input?.fillColors?.[K];if(!e)return;const t={};return void 0!==e.idleEmpty&&(t.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(t.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(t.backgroundFocused=e.focus),void 0!==e.error&&(t.backgroundError=e.error),void 0!==e.disabled&&(t.backgroundDisabled=e.disabled),Object.keys(t).length>0?t:void 0},[W.components.input?.fillColors,K]),Fe=W.colors.field.caret,we=C??W.components.input?.borderRadius,Ne=W.components.input?.tintLabelOnFocus??!1,Ie=U&&Ne?W.colors.field.borderFocused:W.colors.field.label,ze=_e.interpolate({inputRange:[-1,0,1],outputRange:[-6,0,6]}),Te=Boolean(g)||Boolean(_)||ie,Ve="underline"===K,ke=x?$.iconSize+W.spacing.md+1+W.spacing.md:0,Be=(0,_useFloatingLabel.useFloatingLabel)({label:i,enabled:ge,floated:ue,required:w,variant:K,sizeTokens:$,leadingOffset:ke,trailingOffset:Te?$.iconSize+W.spacing.sm:0,textAlign:z,paddingLeft:Ve?0:$.paddingHorizontal,lineHeight:ne?J:void 0,restNudge:re,floatTrim:ne?2:0,color:Ie,style:q}),Ae=(0,_FieldBase.resolveFieldTextStyle)(W,{disabled:p}),qe=Ae.color,De=Ae.placeholderColor,Ce=w&&!se&&!ae&&"string"==typeof r&&r.length>0,Le=oe?l:s,Me=oe||le,Pe=I&&"number"==typeof N&&"string"==typeof a?`${a.length} / ${N}`:null,He=oe?W.colors.field.message:W.colors.text.secondary,Oe=P??(0,_FieldBase.fieldTextAsString)(i)??r,Ee=W.colors.field,We=p?Ee.iconDisabled:U?Ee.iconFocused:Ee.icon,Ge={focused:U,disabled:p,error:oe,color:We,size:$.iconSize},renderSlot=e=>(0,_slotIcon.renderSlotIcon)(e,Ge),$e=(()=>{if(ie){const e=(Z?W.icons?.eyeOff:W.icons?.eye)??(Z?_defaultIcons.defaultIcons.eyeOff:_defaultIcons.defaultIcons.eye);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:Re,disabled:!ce,hitSlop:8,accessibilityRole:"button",accessibilityLabel:Z?"Hide password":"Show password",children:e({size:$.iconSize,color:We})})}const e=_?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[G.unit,{fontSize:$.fontSize,color:De},m],children:_}):null,t=g?(0,_jsxRuntime.jsx)(_reactNative.View,{children:renderSlot(g)}):null;return e&&t?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:G.trailingRow,children:[e,t]}):e??t})(),Xe=x?(0,_jsxRuntime.jsx)(_reactNative.View,{children:renderSlot(x)}):null,Je=de?"string"==typeof v||"number"==typeof v?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[G.prefix,{fontSize:$.fontSize,color:De,marginRight:W.spacing.xs,lineHeight:ne?J:void 0,paddingTop:ne?re:void 0},h],children:v}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[G.prefixNode,{marginRight:W.spacing.xs,minHeight:ne?J:void 0,justifyContent:"center",paddingTop:ne?re:void 0}],children:v}):null,Ke=b?(0,_jsxRuntime.jsx)(_index4.Button,{variant:b.variant??"outline",tone:b.tone??"primary",size:R,title:b.label,leftIcon:b.icon,loading:b.loading,disabled:p||b.disabled,onPress:b.onPress,pressAnimation:!1,testID:b.testID,style:[G.action,{minHeight:$.minHeight,alignSelf:ne?"flex-start":"stretch"},j]}):null;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[G.container,{transform:[{translateX:ze}]},k],children:[se&&!ge?(0,_jsxRuntime.jsx)(_FieldBase.FieldLabel,{size:R,required:w,help:n,color:Ie,style:q,children:i}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[G.fieldRow,{columnGap:W.spacing.sm,alignItems:ne?"flex-start":"stretch"}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:G.fieldWrapper,children:[(0,_jsxRuntime.jsxs)(_FieldBase.FieldBase,{size:R,variant:K,focused:U,disabled:p,error:oe,filled:ae,minHeight:ne?X:void 0,borderRadius:we,fillOverrides:Se,leading:Xe,leadingDivider:null!=x,paddingLeft:Ve?0:void 0,trailing:$e,slotAlign:ne?"top":"center",slotLineHeight:ne?J:void 0,topNotch:Be.topNotch,onPress:xe,pressFeedback:!1,style:B,children:[Je,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:G.inputWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:fe,style:[G.input,{color:qe,fontSize:$.fontSize,...Ae.weightStyle,paddingLeft:Ve?0:void 0,minHeight:ne?X-2*$.paddingVertical:void 0,lineHeight:ne?J:void 0,paddingTop:ne?re:void 0,textAlignVertical:ne?"top":"center"},A],textAlign:z,placeholder:ge&&!ue||Ce?void 0:r,placeholderTextColor:De,value:T&&null!=a?T(a):a,onChangeText:e=>{o&&o(V?V(e):e)},onFocus:be,onBlur:je,editable:ce,readOnly:y,secureTextEntry:te&&!Z,multiline:ne,autoCapitalize:te?"none":void 0,autoCorrect:!te&&void 0,maxLength:N,selectionColor:Fe,accessibilityLabel:Oe,accessibilityState:{disabled:p},testID:H,...E}),Ce?(0,_jsxRuntime.jsx)(_FieldBase.RequiredPlaceholder,{text:r,color:De,fontSize:$.fontSize,weightStyle:Ae.weightStyle,align:ne?"top":"center",paddingTop:ne?re:void 0,textAlign:z}):null]})]}),Be.node]}),Ke]}),Me||Pe?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[G.footerRow,{marginTop:$.messageGap}],children:[Me?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[G.messageRow,{columnGap:W.spacing.xs+2,opacity:me}],accessibilityLiveRegion:oe?"polite":"none",children:[oe?(0,_jsxRuntime.jsx)(_FieldBase.FieldErrorGlyph,{size:$.messageFontSize,color:He}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[G.messageText,{color:He,fontSize:$.messageFontSize,...(0,_index2.fontFor)(W,"normal")},D],children:Le})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:G.footerSpacer}),Pe?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[G.counterText,{color:W.colors.text.tertiary,fontSize:$.messageFontSize,...(0,_index2.fontFor)(W,"normal")}],children:Pe}):null]}):null]})});Input.displayName="Input";const buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},fieldRow:{flexDirection:"row"},fieldWrapper:{position:"relative",overflow:"visible",flex:1},action:{flexShrink:0},input:{padding:0,margin:0,includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"},unit:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center",columnGap:8},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},footerSpacer:{flex:1},messageRow:{flex:1,flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1},counterText:{flexShrink:0,includeFontPadding:!1}});var _default=exports.default=Input;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function () {
-    return _Input.Input;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Input.default;
-  }
-});
-var _Input = _interopRequireWildcard(require("./Input.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Input",{enumerable:!0,get:function(){return _Input.Input}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Input.default}});var _Input=_interopRequireWildcard(require("./Input.js"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var u,o,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(u=t?n:r){if(u.has(e))return u.get(e);u.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(u=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?u(i,t,o):i[t]=e[t]);return i})(e,t)}