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

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

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