@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,587 +1 @@
-"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 { mergeRefs, triggerHaptic } from "../../utils/index.js";
-import { defaultIcons } from "../AppIcon/defaultIcons.js";
-import { renderSlotIcon } from "../AppIcon/slotIcon.js";
-import { Button } from "../Button/index.js";
-import { FieldBase, FieldErrorGlyph, RequiredMark, RequiredPlaceholder, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/FieldBase.js";
-import { useFloatingLabel } from "../FieldBase/useFloatingLabel.js";
-
-/**
- * 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.
- */
-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,
-    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 = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeTokens = 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] = useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = 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 = useRef(null);
-  const setInputRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
-  const focusInput = 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 = useRef(createAnimatedValue(0)).current;
-  const messageAnim = useRef(createAnimatedValue(hasError || helperText ? 1 : 0)).current;
-
-  // 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(() => {
-    // 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) {
-        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 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 = 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 = 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 => renderSlotIcon(icon, slotState);
-  const trailing = (() => {
-    if (showToggle) {
-      const renderer = (isPasswordVisible ? theme.icons?.eyeOff : theme.icons?.eye) ?? (isPasswordVisible ? defaultIcons.eyeOff : defaultIcons.eye);
-      return /*#__PURE__*/_jsx(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__*/_jsx(Text, {
-      style: [styles.unit, {
-        fontSize: sizeTokens.fontSize,
-        color: placeholderTextColor
-      }, unitStyle],
-      children: unit
-    }) : null;
-    const iconEl = rightIcon ? /*#__PURE__*/_jsx(View, {
-      children: renderSlot(rightIcon)
-    }) : null;
-    if (unitEl && iconEl) {
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.trailingRow,
-        children: [unitEl, iconEl]
-      });
-    }
-    return unitEl ?? iconEl;
-  })();
-  const leading = leftIcon ? /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsxs(Animated.View, {
-    style: [styles.container, {
-      transform: [{
-        translateX: shakeTranslateX
-      }]
-    }, style],
-    children: [label && !showFloatingLabel ? /*#__PURE__*/_jsxs(Text, {
-      style: [styles.staticLabel, {
-        color: labelColor,
-        fontSize: sizeTokens.labelFontSize,
-        ...fontFor(theme, 'semibold'),
-        marginBottom: sizeTokens.labelGap
-      }, labelStyle],
-      children: [label, required ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: [styles.fieldRow, {
-        columnGap: theme.spacing.sm,
-        alignItems: isTextarea ? 'flex-start' : 'stretch'
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.fieldWrapper,
-        children: [/*#__PURE__*/_jsx(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__*/_jsxs(View, {
-            style: styles.inputWrap,
-            children: [/*#__PURE__*/_jsx(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__*/_jsx(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.
-    _jsxs(View, {
-      style: [styles.footerRow, {
-        marginTop: sizeTokens.messageGap
-      }],
-      children: [messageText ? /*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.messageRow, {
-          columnGap: theme.spacing.xs + 2,
-          opacity: messageAnim
-        }],
-        accessibilityLiveRegion: hasError ? 'polite' : 'none',
-        children: [hasError ? /*#__PURE__*/_jsx(FieldErrorGlyph, {
-          size: sizeTokens.messageFontSize,
-          color: messageColor
-        }) : null, /*#__PURE__*/_jsx(Text, {
-          style: [styles.messageText, {
-            color: messageColor,
-            fontSize: sizeTokens.messageFontSize,
-            ...fontFor(theme, 'normal')
-          }, messageStyle],
-          children: messageText
-        })]
-      }) : /*#__PURE__*/_jsx(View, {
-        style: styles.footerSpacer
-      }), counterText ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.counterText, {
-          color: theme.colors.text.tertiary,
-          fontSize: sizeTokens.messageFontSize,
-          ...fontFor(theme, 'normal')
-        }],
-        children: counterText
-      }) : null]
-    }) : 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.
-  // 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
-  }
-});
-export { Input };
-export default Input;
-//# sourceMappingURL=Input.js.map
+"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{mergeRefs,triggerHaptic}from"../../utils/index.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Button}from"../Button/index.js";import{FieldBase,FieldErrorGlyph,FieldLabel,fieldTextAsString,hasFieldText,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const multilineMinHeightMap={sm:72,md:92,lg:110},Input=forwardRef((e,t)=>{const{label:i,help:n,placeholder:o,value:l,onChangeText:r,error:s,helperText:a,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:p=!1,multiline:f=!1,leftIcon:g,rightIcon:m,unit:x,unitStyle:h,prefix:y,prefixStyle:b,readOnly:S=!1,action:v,actionStyle:F,size:w="md",variant:j,labelMode:T,required:z=!1,maxLength:R,showCounter:I=!0,textAlign:V,format:A,parse:_,style:k,containerStyle:C,inputStyle:D,labelStyle:L,messageStyle:H,borderRadius:E,onFocus:M,onBlur:N,accessibilityLabel:P,testID:B,editable:O,...G}=e,q=useTheme(),W=useMemo(()=>buildStyles(q),[q]),$=resolveFieldSize(q,w),X=multilineMinHeightMap[w],J=Math.round(1.4*$.fontSize),K=j??q.components.input?.defaultVariant??q.components.field?.defaultVariant??"outlined",Q=T??q.components.input?.defaultLabelMode??"top",[U,Y]=useState(!1),[Z,ee]=useState(!1),te="password"===d||u||c,ie="password"===d||u,ne="textarea"===d||f,oe=ne?Math.round(.1*$.fontSize):0,le="string"==typeof l&&l.length>0,re=hasFieldText(s),se=hasFieldText(a),ae=hasFieldText(i),de=hasFieldText(y),ce=!p&&!1!==O,ue=U||le||de,pe=useRef(null),fe=useMemo(()=>mergeRefs(pe,t),[t]),ge=useCallback(()=>{ce&&pe.current?.focus()},[ce]),me=ae&&"float"===Q,xe=useRef(createAnimatedValue(0)).current,he=useRef(createAnimatedValue(re||se?1:0)).current;useEffect(()=>{const e=Animated.timing(he,{toValue:re||se?1:0,duration:q.motion.duration.fast,easing:Easing.bezier(...q.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[re,se,he,q.motion.duration.fast,q.motion.easing.standard]);const ye=useReducedMotion(),be=q.components.input?.shakeOnError??!1,Se=useRef(re);useEffect(()=>{if(!be)return void(Se.current=re);let e;return re&&!Se.current&&(ye||(setNativeValue(xe,0),e=Animated.sequence([Animated.timing(xe,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(xe,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(xe,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(xe,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(xe,{toValue:0,duration:100,useNativeDriver:!0})]),e.start()),triggerHaptic("notificationError")),Se.current=re,()=>e?.stop()},[re,xe,be,ye]);const ve=useCallback(e=>{Y(!0),M?.(e)},[M]),Fe=useCallback(e=>{Y(!1),N?.(e)},[N]),we=useCallback(()=>{triggerHaptic("selection"),ee(e=>!e)},[]),je=useMemo(()=>{const e=q.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},[q.components.input?.fillColors,K]),Te=q.colors.field.caret,ze=E??q.components.input?.borderRadius,Re=q.components.input?.tintLabelOnFocus??!1,Ie=U&&Re?q.colors.field.borderFocused:q.colors.field.label,Ve=xe.interpolate({inputRange:[-1,0,1],outputRange:[-6,0,6]}),Ae=Boolean(m)||Boolean(x)||ie,_e="underline"===K,ke=g?$.iconSize+q.spacing.md+1+q.spacing.md:0,Ce=useFloatingLabel({label:i,enabled:me,floated:ue,required:z,variant:K,sizeTokens:$,leadingOffset:ke,trailingOffset:Ae?$.iconSize+q.spacing.sm:0,textAlign:V,paddingLeft:_e?0:$.paddingHorizontal,lineHeight:ne?J:void 0,restNudge:oe,floatTrim:ne?2:0,color:Ie,style:L}),De=resolveFieldTextStyle(q,{disabled:p}),Le=De.color,He=De.placeholderColor,Ee=z&&!ae&&!le&&"string"==typeof o&&o.length>0,Me=re?s:a,Ne=re||se,Pe=I&&"number"==typeof R&&"string"==typeof l?`${l.length} / ${R}`:null,Be=re?q.colors.field.message:q.colors.text.secondary,Oe=P??fieldTextAsString(i)??o,Ge=q.colors.field,qe=p?Ge.iconDisabled:U?Ge.iconFocused:Ge.icon,We={focused:U,disabled:p,error:re,color:qe,size:$.iconSize},renderSlot=e=>renderSlotIcon(e,We),$e=(()=>{if(ie){const e=(Z?q.icons?.eyeOff:q.icons?.eye)??(Z?defaultIcons.eyeOff:defaultIcons.eye);return _jsx(Pressable,{onPress:we,disabled:!ce,hitSlop:8,accessibilityRole:"button",accessibilityLabel:Z?"Hide password":"Show password",children:e({size:$.iconSize,color:qe})})}const e=x?_jsx(Text,{style:[W.unit,{fontSize:$.fontSize,color:He},h],children:x}):null,t=m?_jsx(View,{children:renderSlot(m)}):null;return e&&t?_jsxs(View,{style:W.trailingRow,children:[e,t]}):e??t})(),Xe=g?_jsx(View,{children:renderSlot(g)}):null,Je=de?"string"==typeof y||"number"==typeof y?_jsx(Text,{style:[W.prefix,{fontSize:$.fontSize,color:He,marginRight:q.spacing.xs,lineHeight:ne?J:void 0,paddingTop:ne?oe:void 0},b],children:y}):_jsx(View,{style:[W.prefixNode,{marginRight:q.spacing.xs,minHeight:ne?J:void 0,justifyContent:"center",paddingTop:ne?oe:void 0}],children:y}):null,Ke=v?_jsx(Button,{variant:v.variant??"outline",tone:v.tone??"primary",size:w,title:v.label,leftIcon:v.icon,loading:v.loading,disabled:p||v.disabled,onPress:v.onPress,pressAnimation:!1,testID:v.testID,style:[W.action,{minHeight:$.minHeight,alignSelf:ne?"flex-start":"stretch"},F]}):null;return _jsxs(Animated.View,{style:[W.container,{transform:[{translateX:Ve}]},k],children:[ae&&!me?_jsx(FieldLabel,{size:w,required:z,help:n,color:Ie,style:L,children:i}):null,_jsxs(View,{style:[W.fieldRow,{columnGap:q.spacing.sm,alignItems:ne?"flex-start":"stretch"}],children:[_jsxs(View,{style:W.fieldWrapper,children:[_jsxs(FieldBase,{size:w,variant:K,focused:U,disabled:p,error:re,filled:le,minHeight:ne?X:void 0,borderRadius:ze,fillOverrides:je,leading:Xe,leadingDivider:null!=g,paddingLeft:_e?0:void 0,trailing:$e,slotAlign:ne?"top":"center",slotLineHeight:ne?J:void 0,topNotch:Ce.topNotch,onPress:ge,pressFeedback:!1,style:C,children:[Je,_jsxs(View,{style:W.inputWrap,children:[_jsx(TextInput,{ref:fe,style:[W.input,{color:Le,fontSize:$.fontSize,...De.weightStyle,paddingLeft:_e?0:void 0,minHeight:ne?X-2*$.paddingVertical:void 0,lineHeight:ne?J:void 0,paddingTop:ne?oe:void 0,textAlignVertical:ne?"top":"center"},D],textAlign:V,placeholder:me&&!ue||Ee?void 0:o,placeholderTextColor:He,value:A&&null!=l?A(l):l,onChangeText:e=>{r&&r(_?_(e):e)},onFocus:ve,onBlur:Fe,editable:ce,readOnly:S,secureTextEntry:te&&!Z,multiline:ne,autoCapitalize:te?"none":void 0,autoCorrect:!te&&void 0,maxLength:R,selectionColor:Te,accessibilityLabel:Oe,accessibilityState:{disabled:p},testID:B,...G}),Ee?_jsx(RequiredPlaceholder,{text:o,color:He,fontSize:$.fontSize,weightStyle:De.weightStyle,align:ne?"top":"center",paddingTop:ne?oe:void 0,textAlign:V}):null]})]}),Ce.node]}),Ke]}),Ne||Pe?_jsxs(View,{style:[W.footerRow,{marginTop:$.messageGap}],children:[Ne?_jsxs(Animated.View,{style:[W.messageRow,{columnGap:q.spacing.xs+2,opacity:he}],accessibilityLiveRegion:re?"polite":"none",children:[re?_jsx(FieldErrorGlyph,{size:$.messageFontSize,color:Be}):null,_jsx(Text,{style:[W.messageText,{color:Be,fontSize:$.messageFontSize,...fontFor(q,"normal")},H],children:Me})]}):_jsx(View,{style:W.footerSpacer}),Pe?_jsx(Text,{style:[W.counterText,{color:q.colors.text.tertiary,fontSize:$.messageFontSize,...fontFor(q,"normal")}],children:Pe}):null]}):null]})});Input.displayName="Input";const buildStyles=e=>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}});export{Input};export default Input;

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

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