rn-inputforge 0.4.0 → 0.5.1

package/src/components/FieldFlowInput/FieldFlowInput.tsx

@@ -7,6 +7,18 @@ import { resolveFieldConfig, implicitRulesForType } from '../../utils/keyboardTy
 import { sanitizeNumeric, sanitizePhone, truncate } from '../../utils/formatters';
 import { runRules } from '../../validation/validators';
 import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import { useFieldMotion } from '../../motion/useFieldMotion';
+import { FieldFlowAffordance } from '../FieldFlowAffordance';
+import { FieldFlowPasswordStrength } from '../FieldFlowPasswordStrength';
+import { FieldFlowInfoTip } from '../FieldFlowInfoTip';
+import {
+  affordanceKindFromFieldType,
+  type FieldFlowAffordanceKind,
+} from '../../utils/affordance';
+import {
+  autofillRoleFromFieldType,
+  getAutofillProps,
+} from '../../autofill/profiles';
 import { createStyles, iconColorFor, labelColorFor } from './styles';
 import type { FieldFlowInputProps } from './types';
 
@@ -45,6 +57,16 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     onRightIconPress,
     iconSize = 18,
     clearable,
+    suggestions,
+    suggestionsAlwaysVisible = false,
+    showStrength,
+    prefix,
+    suffix,
+    motion = true,
+    autofill,
+    inputAccessoryViewID,
+    helperStatus,
+    infoTip,
     maxLength,
     showCharacterCount,
     onSubmitEditing,
@@ -84,6 +106,11 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     [type, required, rules],
   );
 
+  const autofillProps = useMemo(() => {
+    const role = autofill ?? autofillRoleFromFieldType(type);
+    return role ? getAutofillProps(role) : undefined;
+  }, [autofill, type]);
+
   const resolvedError = errorText ?? localError;
   const state = useFieldState({
     isFocused,
@@ -100,6 +127,14 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
   );
   const iconColor = iconColorFor(theme, state);
 
+  const fieldMotion = useFieldMotion({
+    enabled: motion,
+    isFocused,
+    hasError: Boolean(hasError || resolvedError),
+    isSuccess: Boolean(isSuccess || successText),
+    duration: theme.animation.duration,
+  });
+
   const isFloating = variant === 'floating';
   const floatUp = isFocused || currentValue.length > 0;
   const floatAnim = useRef(new Animated.Value(floatUp ? 1 : 0)).current;
@@ -138,17 +173,34 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     [type, maxLength, isControlled, onChangeText, validateOnChange, runValidation],
   );
 
+  const blurHideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const handleFocus = useCallback(() => {
+    if (blurHideTimer.current) {
+      clearTimeout(blurHideTimer.current);
+      blurHideTimer.current = null;
+    }
     setIsFocused(true);
     onFocus?.();
   }, [onFocus]);
 
   const handleBlur = useCallback(() => {
-    setIsFocused(false);
+    // Delay hiding suggestion chips so a chip press can register first
+    blurHideTimer.current = setTimeout(() => {
+      setIsFocused(false);
+      blurHideTimer.current = null;
+    }, 180);
     runValidation(currentValue);
     onBlur?.();
   }, [runValidation, currentValue, onBlur]);
 
+  useEffect(
+    () => () => {
+      if (blurHideTimer.current) clearTimeout(blurHideTimer.current);
+    },
+    [],
+  );
+
   const handleClear = useCallback(() => {
     if (!isControlled) setInternalValue('');
     onChangeText?.('');
@@ -197,78 +249,205 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
 
   const showExternalLabel = Boolean(label) && !isFloating;
 
+  const affordanceConfig = useMemo(() => {
+    if (!suggestions) return null;
+    if (suggestions === true) {
+      const kind = affordanceKindFromFieldType(type);
+      return kind ? { kind, chips: undefined as undefined } : null;
+    }
+    if (typeof suggestions === 'string') {
+      return { kind: suggestions as FieldFlowAffordanceKind, chips: undefined as undefined };
+    }
+    return { kind: 'custom' as FieldFlowAffordanceKind, chips: suggestions };
+  }, [suggestions, type]);
+
+  const showAffordance =
+    Boolean(affordanceConfig) &&
+    !disabled &&
+    !readOnly &&
+    (suggestionsAlwaysVisible || isFocused);
+
+  const renderAffix = (affix: string | React.ReactNode | undefined, side: 'left' | 'right') => {
+    if (affix == null || affix === false) return null;
+    if (typeof affix === 'string') {
+      return (
+        <Text
+          style={[
+            styles.affixText,
+            side === 'left' ? styles.iconSlotLeft : styles.iconSlotRight,
+          ]}
+          numberOfLines={1}
+        >
+          {affix}
+        </Text>
+      );
+    }
+    return <View style={side === 'left' ? styles.iconSlotLeft : styles.iconSlotRight}>{affix}</View>;
+  };
+
+  const focusRing = theme.appearance?.focusRing ?? 'softGlow';
+  const showFocusRing = motion && focusRing !== 'underlinePulse';
+  const resolvedHelperStatus =
+    helperStatus ??
+    (resolvedError ? 'error' : successText ? 'success' : helperText ? 'info' : 'none');
+
+  const helperIconName =
+    resolvedHelperStatus === 'success'
+      ? 'check'
+      : resolvedHelperStatus === 'error' || resolvedHelperStatus === 'warning'
+        ? 'alert'
+        : resolvedHelperStatus === 'info'
+          ? 'info'
+          : null;
+
+  const helperIconColor =
+    resolvedHelperStatus === 'success'
+      ? theme.colors.success
+      : resolvedHelperStatus === 'error'
+        ? theme.colors.error
+        : resolvedHelperStatus === 'warning'
+          ? theme.colors.warning
+          : theme.colors.info;
+
+  const helperTextStyle =
+    resolvedError
+      ? styles.errorText
+      : successText
+        ? styles.successText
+        : resolvedHelperStatus === 'warning'
+          ? styles.warningText
+          : resolvedHelperStatus === 'info' && helperText
+            ? styles.infoText
+            : styles.helperText;
+
   return (
     <View style={[styles.wrapper, containerStyle]} testID={testID}>
       {showExternalLabel ? (
-        <Text style={[styles.label, labelStyle]}>
-          {label}
-          {required ? ' *' : ''}
-        </Text>
-      ) : null}
-
-      <View style={[styles.inputContainer, inputContainerStyle]}>
-        {isFloating && label ? (
-          <Animated.Text style={[styles.floatingLabel, floatingLabelStyle, labelStyle]} pointerEvents="none">
+        <View style={styles.labelRow}>
+          <Text style={[styles.label, labelStyle]}>
             {label}
             {required ? ' *' : ''}
-          </Animated.Text>
-        ) : null}
-
-        {resolvedLeftIcon ? (
-          <Pressable
-            onPress={onLeftIconPress}
-            disabled={!onLeftIconPress}
-            style={[styles.iconSlot, styles.iconSlotLeft]}
-            hitSlop={8}
-            accessibilityRole={onLeftIconPress ? 'button' : undefined}
-          >
-            {renderFieldFlowIcon(resolvedLeftIcon, iconColor, iconSize)}
-          </Pressable>
-        ) : null}
-
-        <TextInput
-          ref={innerRef}
+          </Text>
+          {infoTip ? <FieldFlowInfoTip tip={infoTip} theme={themeOverride} /> : null}
+        </View>
+      ) : null}
+
+      <Animated.View style={fieldMotion.containerStyle}>
+        <View style={[styles.inputContainer, inputContainerStyle]}>
+          {showFocusRing ? (
+            <Animated.View
+              pointerEvents="none"
+              style={[
+                styles.focusGlow,
+                {
+                  opacity: fieldMotion.glowOpacity.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, focusRing === 'solid' ? 1 : 0.22],
+                  }),
+                  borderColor: theme.colors.borderFocused,
+                },
+              ]}
+            />
+          ) : null}
+
+          {isFloating && label ? (
+            <Animated.Text style={[styles.floatingLabel, floatingLabelStyle, labelStyle]} pointerEvents="none">
+              {label}
+              {required ? ' *' : ''}
+            </Animated.Text>
+          ) : null}
+
+          {resolvedLeftIcon ? (
+            <Pressable
+              onPress={onLeftIconPress}
+              disabled={!onLeftIconPress}
+              style={[styles.iconSlot, styles.iconSlotLeft]}
+              hitSlop={8}
+              accessibilityRole={onLeftIconPress ? 'button' : undefined}
+            >
+              {renderFieldFlowIcon(resolvedLeftIcon, iconColor, iconSize)}
+            </Pressable>
+          ) : null}
+
+          {renderAffix(prefix, 'left')}
+
+          <TextInput
+            ref={innerRef}
+            value={currentValue}
+            onChangeText={handleChangeText}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onSubmitEditing={onSubmitEditing}
+            editable={!disabled && !readOnly && !loading}
+            placeholder={isFloating ? (floatUp ? placeholder : undefined) : placeholder}
+            placeholderTextColor={theme.colors.placeholder}
+            keyboardType={fieldConfig.keyboardType}
+            secureTextEntry={fieldConfig.secureTextEntry && !showPassword}
+            autoCapitalize={autofillProps?.autoCapitalize ?? fieldConfig.autoCapitalize}
+            autoCorrect={autofillProps?.autoCorrect ?? fieldConfig.autoCorrect}
+            multiline={fieldConfig.multiline && type !== 'chat'}
+            maxLength={maxLength}
+            returnKeyType={fieldConfig.multiline ? 'default' : 'done'}
+            inputAccessoryViewID={inputAccessoryViewID}
+            style={[styles.input, inputStyle]}
+            {...autofillProps}
+            {...rest}
+          />
+
+          {renderAffix(suffix, 'right')}
+
+          {resolvedRightIcon ? (
+            <Animated.View style={{ transform: [{ scale: fieldMotion.successScale }] }}>
+              <Pressable
+                onPress={rightIconPress}
+                disabled={!rightIconPress}
+                style={[styles.iconSlot, styles.iconSlotRight]}
+                hitSlop={8}
+                accessibilityRole={rightIconPress ? 'button' : undefined}
+              >
+                {renderFieldFlowIcon(resolvedRightIcon, iconColor, iconSize)}
+              </Pressable>
+            </Animated.View>
+          ) : null}
+        </View>
+      </Animated.View>
+
+      {showAffordance && affordanceConfig ? (
+        <FieldFlowAffordance
+          kind={affordanceConfig.kind}
+          chips={affordanceConfig.chips}
           value={currentValue}
-          onChangeText={handleChangeText}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onSubmitEditing={onSubmitEditing}
-          editable={!disabled && !readOnly && !loading}
-          placeholder={isFloating ? (floatUp ? placeholder : undefined) : placeholder}
-          placeholderTextColor={theme.colors.placeholder}
-          keyboardType={fieldConfig.keyboardType}
-          secureTextEntry={fieldConfig.secureTextEntry && !showPassword}
-          autoCapitalize={fieldConfig.autoCapitalize}
-          autoCorrect={fieldConfig.autoCorrect}
-          multiline={fieldConfig.multiline && type !== 'chat'}
-          maxLength={maxLength}
-          returnKeyType={fieldConfig.multiline ? 'default' : 'done'}
-          style={[styles.input, inputStyle]}
-          {...rest}
+          onSelect={next => {
+            handleChangeText(next);
+            innerRef.current?.focus();
+          }}
+          theme={themeOverride}
         />
+      ) : null}
 
-        {resolvedRightIcon ? (
-          <Pressable
-            onPress={rightIconPress}
-            disabled={!rightIconPress}
-            style={[styles.iconSlot, styles.iconSlotRight]}
-            hitSlop={8}
-            accessibilityRole={rightIconPress ? 'button' : undefined}
-          >
-            {renderFieldFlowIcon(resolvedRightIcon, iconColor, iconSize)}
-          </Pressable>
-        ) : null}
-      </View>
+      {type === 'password' && showStrength ? (
+        <FieldFlowPasswordStrength
+          password={currentValue}
+          showRules={typeof showStrength === 'object' ? showStrength.showRules : true}
+          rules={typeof showStrength === 'object' ? showStrength.rules : undefined}
+          theme={themeOverride}
+        />
+      ) : null}
 
       {(helperText || resolvedError || successText || (showCharacterCount && maxLength)) && (
-        <View style={styles.footerRow}>
-          <View style={{ flex: 1 }}>
+        <Animated.View style={[styles.footerRow, { opacity: fieldMotion.messageOpacity }]}>
+          <View style={styles.helperRow}>
+            {helperIconName && (resolvedError || successText || helperText) ? (
+              <View style={{ marginTop: 1 }}>
+                {renderFieldFlowIcon(helperIconName, helperIconColor, 13)}
+              </View>
+            ) : null}
             {resolvedError ? (
-              <Text style={[styles.errorText, errorStyle, helperStyle]}>{resolvedError}</Text>
+              <Text style={[helperTextStyle, errorStyle, helperStyle]}>{resolvedError}</Text>
             ) : successText ? (
-              <Text style={[styles.successText, helperStyle]}>{successText}</Text>
+              <Text style={[helperTextStyle, helperStyle]}>{successText}</Text>
             ) : helperText ? (
-              <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+              <Text style={[helperTextStyle, helperStyle]}>{helperText}</Text>
             ) : null}
           </View>
           {showCharacterCount && maxLength ? (
@@ -276,7 +455,7 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
               {currentValue.length}/{maxLength}
             </Text>
           ) : null}
-        </View>
+        </Animated.View>
       )}
     </View>
   );

package/src/components/FieldFlowInput/styles.ts

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import type { FieldFlowState, FieldFlowTheme, FieldFlowVariant } from '../../types';
+import { surfaceShadow } from '../../theme/appearance';
 
 export function borderColorFor(theme: FieldFlowTheme, state: FieldFlowState): string {
   switch (state) {
@@ -33,32 +34,51 @@ export function createStyles(
   const isUnderline = variant === 'underline';
   const isFilled = variant === 'filled';
   const isFloating = variant === 'floating';
+  const appearance = theme.appearance;
+  const surface = appearance?.surface ?? 'flat';
+  const focusRing = appearance?.focusRing ?? 'softGlow';
   const borderW = state === 'focused' ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth;
+  const shadow = !isUnderline ? surfaceShadow(surface) : null;
+
+  let backgroundColor = theme.colors.background;
+  if (state === 'disabled') backgroundColor = theme.colors.backgroundDisabled;
+  else if (isFilled || surface === 'soft') backgroundColor = theme.colors.surfaceMuted ?? theme.colors.backgroundDisabled;
+  else if (surface === 'inset') backgroundColor = theme.colors.surfaceMuted ?? theme.colors.backgroundDisabled;
+  else if (surface === 'elevated') backgroundColor = theme.colors.surfaceElevated ?? theme.colors.background;
+  else if (isUnderline) backgroundColor = 'transparent';
+
+  const glowPad = focusRing === 'solid' ? 2 : focusRing === 'softGlow' ? 3 : 0;
 
   return StyleSheet.create({
     wrapper: {
       marginBottom: theme.spacing.gap * 2,
     },
+    labelRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      marginBottom: theme.spacing.gap / 1.5,
+    },
     label: {
       fontSize: theme.typography.labelFontSize,
-      marginBottom: theme.spacing.gap / 1.5,
       color: labelColorFor(theme, state),
       fontWeight: '500',
       fontFamily: theme.typography.fontFamily,
+      flexShrink: 1,
     },
     inputContainer: {
+      position: 'relative',
+      overflow: 'visible',
       flexDirection: 'row',
       alignItems: multiline ? 'flex-start' : 'center',
-      backgroundColor: state === 'disabled'
-        ? theme.colors.backgroundDisabled
-        : isFilled
-          ? theme.colors.backgroundDisabled
-          : isUnderline
-            ? 'transparent'
-            : theme.colors.background,
+      backgroundColor,
       borderRadius: isUnderline ? 0 : theme.spacing.borderRadius,
-      borderWidth: isUnderline ? 0 : isFilled ? 0 : borderW,
-      borderBottomWidth: isUnderline ? borderW + (state === 'focused' ? 0.5 : 0) : isFilled ? 0 : borderW,
+      borderWidth: isUnderline ? 0 : isFilled && surface !== 'inset' ? 0 : borderW,
+      borderBottomWidth: isUnderline
+        ? borderW + (state === 'focused' && focusRing === 'underlinePulse' ? 1 : state === 'focused' ? 0.5 : 0)
+        : isFilled && surface !== 'inset'
+          ? 0
+          : borderW,
       borderColor: borderColorFor(theme, state),
       paddingHorizontal: theme.spacing.paddingHorizontal,
       paddingVertical: multiline ? theme.spacing.paddingVertical : 0,
@@ -66,11 +86,29 @@ export function createStyles(
         ? undefined
         : theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6 + (isFloating ? 6 : 0),
       paddingTop: isFloating && !multiline ? theme.spacing.paddingVertical + 6 : undefined,
+      ...(shadow ?? null),
+    },
+    focusGlow: {
+      position: 'absolute',
+      top: -glowPad,
+      left: -glowPad,
+      right: -glowPad,
+      bottom: -glowPad,
+      borderWidth: focusRing === 'solid' ? 2 : focusRing === 'softGlow' ? 3 : 0,
+      borderRadius: theme.spacing.borderRadius + glowPad,
+    },
+    affixText: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.label,
+      fontFamily: theme.typography.fontFamily,
+      fontWeight: '500',
     },
     floatingLabel: {
       position: 'absolute',
       left: theme.spacing.paddingHorizontal,
-      backgroundColor: isFilled ? theme.colors.backgroundDisabled : theme.colors.background,
+      backgroundColor: isFilled || surface === 'soft' || surface === 'inset'
+        ? theme.colors.surfaceMuted ?? theme.colors.backgroundDisabled
+        : theme.colors.background,
       paddingHorizontal: 4,
       zIndex: 2,
       fontFamily: theme.typography.fontFamily,
@@ -98,8 +136,16 @@ export function createStyles(
     },
     footerRow: {
       flexDirection: 'row',
+      alignItems: 'flex-start',
       justifyContent: 'space-between',
       marginTop: theme.spacing.gap / 1.5,
+      gap: 6,
+    },
+    helperRow: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: 6,
     },
     helperText: {
       fontSize: theme.typography.helperFontSize,
@@ -119,6 +165,18 @@ export function createStyles(
       flexShrink: 1,
       fontFamily: theme.typography.fontFamily,
     },
+    warningText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.warning,
+      flexShrink: 1,
+      fontFamily: theme.typography.fontFamily,
+    },
+    infoText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.info,
+      flexShrink: 1,
+      fontFamily: theme.typography.fontFamily,
+    },
     charCount: {
       fontSize: theme.typography.helperFontSize,
       color: theme.colors.placeholder,

package/src/components/FieldFlowInput/types.ts

@@ -1,6 +1,10 @@
+import type React from 'react';
 import type { TextInputProps, ViewStyle, TextStyle } from 'react-native';
 import type { FieldFlowFieldType, FieldFlowRules, FieldFlowVariant, DeepPartial, FieldFlowTheme } from '../../types';
 import type { FieldFlowIconSource } from '../../icons';
+import type { FieldFlowAffordanceChip, FieldFlowAffordanceKind } from '../../utils/affordance';
+import type { PasswordStrengthRule } from '../../utils/passwordStrength';
+import type { FieldFlowAutofillRole } from '../../autofill/profiles';
 
 export interface FieldFlowInputProps
   extends Omit<TextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'onSubmitEditing'> {
@@ -56,6 +60,56 @@ export interface FieldFlowInputProps
   /** Shows an "x" clear button when there's text (defaults to true for `search`, false otherwise). */
   clearable?: boolean;
 
+  /**
+   * Smart suggestion chips shown while the field is focused.
+   * - `true` — infer from `type` (email → domains, phone → dial codes, number/decimal → currency)
+   * - `'email' | 'phone' | 'currency'` — force a preset
+   * - `string[]` / chip objects — fully custom list
+   */
+  suggestions?: boolean | FieldFlowAffordanceKind | FieldFlowAffordanceChip[] | string[];
+  /** Keep suggestion chips visible even when blurred. Default: false. */
+  suggestionsAlwaysVisible?: boolean;
+
+  /**
+   * Show a password strength meter under the field (only meaningful for `type="password"`).
+   * Pass `true` for defaults, or `{ showRules?: boolean; rules?: PasswordStrengthRule[] }`.
+   */
+  showStrength?: boolean | { showRules?: boolean; rules?: PasswordStrengthRule[] };
+
+  /**
+   * Text or node rendered inside the field before the value (e.g. `+92`, `$`, `https://`).
+   * Shown in addition to `leftIcon` when both are set.
+   */
+  prefix?: string | React.ReactNode;
+  /** Text or node rendered inside the field after the value (e.g. `kg`, `.com`). */
+  suffix?: string | React.ReactNode;
+
+  /**
+   * Micro-interactions: focus glow, error shake, message fade, success pop.
+   * Respects OS Reduce Motion. Default: true.
+   */
+  motion?: boolean;
+
+  /**
+   * Platform autofill role (`email`, `password`, `oneTimeCode`, …).
+   * When omitted, a sensible default is inferred from `type` (email/phone/password).
+   * Pass `off` to disable. See `autofillProfiles` for screen bundles.
+   */
+  autofill?: FieldFlowAutofillRole;
+
+  /**
+   * iOS keyboard accessory id — pair with `FieldFlowKeyboardToolbar` `nativeID`.
+   */
+  inputAccessoryViewID?: string;
+
+  /**
+   * Soft status icon beside helper / success / warning copy.
+   * Error state always shows an alert icon when helperStatus is unset.
+   */
+  helperStatus?: 'info' | 'success' | 'warning' | 'error' | 'none';
+  /** Tip text — renders a `FieldFlowInfoTip` next to the label. */
+  infoTip?: string;
+
   maxLength?: number;
   showCharacterCount?: boolean;