rn-inputforge 0.3.0 → 0.4.0

package/src/components/FieldFlowDropdown/types.ts

@@ -1,5 +1,6 @@
 import type { ViewStyle, TextStyle } from 'react-native';
-import type { DeepPartial, FieldFlowOption, FieldFlowTheme } from '../../types';
+import type { DeepPartial, FieldFlowOption, FieldFlowTheme, FieldFlowVariant } from '../../types';
+import type { FieldFlowIconSource } from '../../icons';
 
 export type FieldFlowDropdownPresentation = 'bottomSheet' | 'popup' | 'inline';
 
@@ -26,6 +27,12 @@ interface BaseDropdownProps {
   maxModalHeight?: number;
   clearable?: boolean;
 
+  /** Built-in icon name or custom React node on the trigger. */
+  leftIcon?: FieldFlowIconSource;
+  rightIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  variant?: FieldFlowVariant;
+
   containerStyle?: ViewStyle;
   triggerStyle?: ViewStyle;
   labelStyle?: TextStyle;

package/src/components/FieldFlowInput/FieldFlowInput.tsx

@@ -1,29 +1,26 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Pressable, Text, TextInput, View } from 'react-native';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, Text, TextInput, View } from 'react-native';
 import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
 import { defaultTheme } from '../../theme/defaultTheme';
 import { useFieldState } from '../../hooks/useFieldState';
 import { resolveFieldConfig, implicitRulesForType } from '../../utils/keyboardTypes';
 import { sanitizeNumeric, sanitizePhone, truncate } from '../../utils/formatters';
 import { runRules } from '../../validation/validators';
-import { FieldFlowIcon } from '../../icons/Icon';
-import { createStyles, iconColorFor } from './styles';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import { createStyles, iconColorFor, labelColorFor } from './styles';
 import type { FieldFlowInputProps } from './types';
 
-function renderIconNode(
-  icon: FieldFlowInputProps['leftIcon'],
-  color: string,
-): React.ReactNode {
-  if (!icon) return null;
-  if (typeof icon === 'string') {
-    return <FieldFlowIcon name={icon as any} color={color} size={18} />;
-  }
-  return icon;
-}
+const DEFAULT_ICONS: Partial<Record<NonNullable<FieldFlowInputProps['type']>, FieldFlowInputProps['leftIcon']>> = {
+  search: 'search',
+  email: 'mail',
+  phone: 'phone',
+  password: 'lock',
+};
 
 export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(function FieldFlowInput(
   {
     type = 'text',
+    variant = 'outlined',
     label,
     helperText,
     errorText,
@@ -46,16 +43,20 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     rightIcon,
     onLeftIconPress,
     onRightIconPress,
+    iconSize = 18,
     clearable,
     maxLength,
     showCharacterCount,
     onSubmitEditing,
     containerStyle,
+    inputContainerStyle,
     inputStyle,
     labelStyle,
     helperStyle,
+    errorStyle,
     theme: themeOverride,
     testID,
+    placeholder,
     ...rest
   },
   forwardedRef,
@@ -94,11 +95,24 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
   });
 
   const styles = useMemo(
-    () => createStyles(theme, state, fieldConfig.multiline && type !== 'chat'),
-    [theme, state, fieldConfig.multiline, type],
+    () => createStyles(theme, state, fieldConfig.multiline && type !== 'chat', variant),
+    [theme, state, fieldConfig.multiline, type, variant],
   );
   const iconColor = iconColorFor(theme, state);
 
+  const isFloating = variant === 'floating';
+  const floatUp = isFocused || currentValue.length > 0;
+  const floatAnim = useRef(new Animated.Value(floatUp ? 1 : 0)).current;
+
+  useEffect(() => {
+    if (!isFloating) return;
+    Animated.timing(floatAnim, {
+      toValue: floatUp ? 1 : 0,
+      duration: theme.animation.duration,
+      useNativeDriver: false,
+    }).start();
+  }, [floatAnim, floatUp, isFloating, theme.animation.duration]);
+
   const runValidation = useCallback(
     (nextValue: string) => {
       const result = runRules(nextValue, effectiveRules);
@@ -144,11 +158,12 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
   const isClearable = clearable ?? type === 'search';
   const showClearButton = isClearable && currentValue.length > 0 && !disabled && !readOnly && !loading;
 
-  const resolvedLeftIcon = leftIcon ?? (type === 'search' ? 'search' : undefined);
-  let resolvedRightIcon = rightIcon;
+  const resolvedLeftIcon = leftIcon === null ? undefined : leftIcon !== undefined ? leftIcon : DEFAULT_ICONS[type];
+  let resolvedRightIcon: FieldFlowInputProps['rightIcon'] | undefined =
+    rightIcon === null ? undefined : rightIcon;
   let rightIconPress = onRightIconPress;
 
-  if (!resolvedRightIcon) {
+  if (rightIcon === undefined) {
     if (loading) {
       resolvedRightIcon = 'spinner';
     } else if (type === 'password') {
@@ -164,24 +179,50 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     }
   }
 
+  const floatingLabelStyle = {
+    top: floatAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [
+        theme.spacing.paddingVertical + (theme.typography.fontSize - theme.typography.labelFontSize) / 2 + 2,
+        -theme.typography.labelFontSize / 2 - 2,
+      ],
+    }),
+    fontSize: floatAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [theme.typography.fontSize, theme.typography.labelFontSize],
+    }),
+    color: labelColorFor(theme, state),
+    left: theme.spacing.paddingHorizontal + (resolvedLeftIcon ? iconSize + theme.spacing.gap : 0),
+  };
+
+  const showExternalLabel = Boolean(label) && !isFloating;
+
   return (
     <View style={[styles.wrapper, containerStyle]} testID={testID}>
-      {label ? (
+      {showExternalLabel ? (
         <Text style={[styles.label, labelStyle]}>
           {label}
           {required ? ' *' : ''}
         </Text>
       ) : null}
 
-      <View style={styles.inputContainer}>
+      <View style={[styles.inputContainer, inputContainerStyle]}>
+        {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}
           >
-            {renderIconNode(resolvedLeftIcon, iconColor)}
+            {renderFieldFlowIcon(resolvedLeftIcon, iconColor, iconSize)}
           </Pressable>
         ) : null}
 
@@ -193,6 +234,7 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
           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}
@@ -211,8 +253,9 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
             disabled={!rightIconPress}
             style={[styles.iconSlot, styles.iconSlotRight]}
             hitSlop={8}
+            accessibilityRole={rightIconPress ? 'button' : undefined}
           >
-            {renderIconNode(resolvedRightIcon, iconColor)}
+            {renderFieldFlowIcon(resolvedRightIcon, iconColor, iconSize)}
           </Pressable>
         ) : null}
       </View>
@@ -221,11 +264,11 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
         <View style={styles.footerRow}>
           <View style={{ flex: 1 }}>
             {resolvedError ? (
-              <Text style={styles.errorText}>{resolvedError}</Text>
+              <Text style={[styles.errorText, errorStyle, helperStyle]}>{resolvedError}</Text>
             ) : successText ? (
-              <Text style={styles.successText}>{successText}</Text>
+              <Text style={[styles.successText, helperStyle]}>{successText}</Text>
             ) : helperText ? (
-              <Text style={styles.helperText}>{helperText}</Text>
+              <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
             ) : null}
           </View>
           {showCharacterCount && maxLength ? (

package/src/components/FieldFlowInput/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import type { FieldFlowState, FieldFlowTheme } from '../../types';
+import type { FieldFlowState, FieldFlowTheme, FieldFlowVariant } from '../../types';
 
 export function borderColorFor(theme: FieldFlowTheme, state: FieldFlowState): string {
   switch (state) {
@@ -24,7 +24,17 @@ export function iconColorFor(theme: FieldFlowTheme, state: FieldFlowState): stri
   return state === 'focused' ? theme.colors.iconFocused : theme.colors.icon;
 }
 
-export function createStyles(theme: FieldFlowTheme, state: FieldFlowState, multiline: boolean) {
+export function createStyles(
+  theme: FieldFlowTheme,
+  state: FieldFlowState,
+  multiline: boolean,
+  variant: FieldFlowVariant = 'outlined',
+) {
+  const isUnderline = variant === 'underline';
+  const isFilled = variant === 'filled';
+  const isFloating = variant === 'floating';
+  const borderW = state === 'focused' ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth;
+
   return StyleSheet.create({
     wrapper: {
       marginBottom: theme.spacing.gap * 2,
@@ -34,17 +44,36 @@ export function createStyles(theme: FieldFlowTheme, state: FieldFlowState, multi
       marginBottom: theme.spacing.gap / 1.5,
       color: labelColorFor(theme, state),
       fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
     },
     inputContainer: {
       flexDirection: 'row',
       alignItems: multiline ? 'flex-start' : 'center',
-      backgroundColor: state === 'disabled' ? theme.colors.backgroundDisabled : theme.colors.background,
-      borderRadius: theme.spacing.borderRadius,
-      borderWidth: state === 'focused' ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth,
+      backgroundColor: state === 'disabled'
+        ? theme.colors.backgroundDisabled
+        : isFilled
+          ? theme.colors.backgroundDisabled
+          : isUnderline
+            ? 'transparent'
+            : theme.colors.background,
+      borderRadius: isUnderline ? 0 : theme.spacing.borderRadius,
+      borderWidth: isUnderline ? 0 : isFilled ? 0 : borderW,
+      borderBottomWidth: isUnderline ? borderW + (state === 'focused' ? 0.5 : 0) : isFilled ? 0 : borderW,
       borderColor: borderColorFor(theme, state),
       paddingHorizontal: theme.spacing.paddingHorizontal,
       paddingVertical: multiline ? theme.spacing.paddingVertical : 0,
-      minHeight: multiline ? undefined : theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6,
+      minHeight: multiline
+        ? undefined
+        : theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6 + (isFloating ? 6 : 0),
+      paddingTop: isFloating && !multiline ? theme.spacing.paddingVertical + 6 : undefined,
+    },
+    floatingLabel: {
+      position: 'absolute',
+      left: theme.spacing.paddingHorizontal,
+      backgroundColor: isFilled ? theme.colors.backgroundDisabled : theme.colors.background,
+      paddingHorizontal: 4,
+      zIndex: 2,
+      fontFamily: theme.typography.fontFamily,
     },
     input: {
       flex: 1,
@@ -53,6 +82,8 @@ export function createStyles(theme: FieldFlowTheme, state: FieldFlowState, multi
       paddingVertical: multiline ? 0 : theme.spacing.paddingVertical,
       textAlignVertical: multiline ? 'top' : 'center',
       minHeight: multiline ? 80 : undefined,
+      fontFamily: theme.typography.fontFamily,
+      fontWeight: theme.typography.fontWeight,
     },
     iconSlot: {
       alignItems: 'center',
@@ -74,21 +105,25 @@ export function createStyles(theme: FieldFlowTheme, state: FieldFlowState, multi
       fontSize: theme.typography.helperFontSize,
       color: theme.colors.label,
       flexShrink: 1,
+      fontFamily: theme.typography.fontFamily,
     },
     errorText: {
       fontSize: theme.typography.helperFontSize,
       color: theme.colors.error,
       flexShrink: 1,
+      fontFamily: theme.typography.fontFamily,
     },
     successText: {
       fontSize: theme.typography.helperFontSize,
       color: theme.colors.success,
       flexShrink: 1,
+      fontFamily: theme.typography.fontFamily,
     },
     charCount: {
       fontSize: theme.typography.helperFontSize,
       color: theme.colors.placeholder,
       marginLeft: theme.spacing.gap,
+      fontFamily: theme.typography.fontFamily,
     },
   });
 }

package/src/components/FieldFlowInput/types.ts

@@ -1,12 +1,19 @@
-import type React from 'react';
 import type { TextInputProps, ViewStyle, TextStyle } from 'react-native';
-import type { FieldFlowFieldType, FieldFlowRules, DeepPartial, FieldFlowTheme } from '../../types';
-import type { FieldFlowIconName } from '../../icons';
+import type { FieldFlowFieldType, FieldFlowRules, FieldFlowVariant, DeepPartial, FieldFlowTheme } from '../../types';
+import type { FieldFlowIconSource } from '../../icons';
 
 export interface FieldFlowInputProps
   extends Omit<TextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'onSubmitEditing'> {
   /** Determines keyboard, secure entry, validation defaults, and default icon behavior. */
   type?: FieldFlowFieldType;
+  /**
+   * Visual style.
+   * - `outlined` (default) — bordered box
+   * - `filled` — filled background, no/soft border
+   * - `underline` — bottom border only
+   * - `floating` — label animates into the border when focused/filled
+   */
+  variant?: FieldFlowVariant;
   label?: string;
   helperText?: string;
   errorText?: string;
@@ -32,10 +39,20 @@ export interface FieldFlowInputProps
   /** Called with the validation result whenever a validation pass runs. */
   onValidate?: (result: { valid: boolean; message?: string }) => void;
 
-  leftIcon?: FieldFlowIconName | React.ReactNode;
-  rightIcon?: FieldFlowIconName | React.ReactNode;
+  /**
+   * Built-in icon name or any custom React node.
+   * Pass `null` to hide the type’s default icon (e.g. mail for email).
+   */
+  leftIcon?: FieldFlowIconSource | null;
+  /**
+   * Built-in icon name or any custom React node.
+   * Pass `null` to suppress automatic right icons (clear / password toggle / status).
+   */
+  rightIcon?: FieldFlowIconSource | null;
   onLeftIconPress?: () => void;
   onRightIconPress?: () => void;
+  /** Override default icon size. Default: 18. */
+  iconSize?: number;
   /** Shows an "x" clear button when there's text (defaults to true for `search`, false otherwise). */
   clearable?: boolean;
 
@@ -46,9 +63,11 @@ export interface FieldFlowInputProps
   onSubmitEditing?: () => void;
 
   containerStyle?: ViewStyle;
+  inputContainerStyle?: ViewStyle;
   inputStyle?: TextStyle;
   labelStyle?: TextStyle;
   helperStyle?: TextStyle;
+  errorStyle?: TextStyle;
   theme?: DeepPartial<FieldFlowTheme>;
 
   testID?: string;

package/src/components/FieldFlowMaskedInput/FieldFlowMaskedInput.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import type { TextInput } from 'react-native';
+import { FieldFlowInput } from '../FieldFlowInput';
+import { applyMask } from '../../utils/masks';
+import type { FieldFlowIconSource } from '../../icons';
+import type { FieldFlowMaskedInputProps } from './types';
+
+function keyboardForMask(mask: FieldFlowMaskedInputProps['mask']) {
+  switch (mask) {
+    case 'currency':
+      return 'decimal-pad' as const;
+    case 'phone':
+      return 'phone-pad' as const;
+    default:
+      return 'number-pad' as const;
+  }
+}
+
+const DEFAULT_MASK_ICONS: Record<FieldFlowMaskedInputProps['mask'], FieldFlowIconSource> = {
+  phone: 'phone',
+  card: 'creditCard',
+  currency: 'currency',
+  date: 'calendar',
+  custom: 'hash',
+};
+
+export const FieldFlowMaskedInput = forwardRef<TextInput, FieldFlowMaskedInputProps>(
+  function FieldFlowMaskedInput(
+    {
+      mask,
+      maskOptions,
+      value,
+      defaultValue,
+      onChangeText,
+      valueMode = 'formatted',
+      leftIcon,
+      ...rest
+    },
+    ref,
+  ) {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState(() => {
+      if (defaultValue === undefined) return '';
+      return applyMask(defaultValue, mask, maskOptions).formatted;
+    });
+
+    const displayValue = useMemo(() => {
+      const source = isControlled ? value ?? '' : internal;
+      return applyMask(source, mask, maskOptions).formatted;
+    }, [isControlled, value, internal, mask, maskOptions]);
+
+    const handleChange = useCallback(
+      (rawInput: string) => {
+        const result = applyMask(rawInput, mask, maskOptions);
+        if (!isControlled) setInternal(result.formatted);
+        const primary = valueMode === 'raw' ? result.raw : result.formatted;
+        onChangeText?.(primary, result.raw);
+      },
+      [isControlled, mask, maskOptions, onChangeText, valueMode],
+    );
+
+    return (
+      <FieldFlowInput
+        ref={ref}
+        {...rest}
+        type="text"
+        value={displayValue}
+        onChangeText={handleChange}
+        keyboardType={keyboardForMask(mask)}
+        autoCapitalize="none"
+        autoCorrect={false}
+        leftIcon={leftIcon !== undefined ? leftIcon : DEFAULT_MASK_ICONS[mask]}
+      />
+    );
+  },
+);

package/src/components/FieldFlowMaskedInput/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowMaskedInput } from './FieldFlowMaskedInput';
+export type { FieldFlowMaskedInputProps } from './types';

package/src/components/FieldFlowMaskedInput/types.ts

@@ -0,0 +1,22 @@
+import type { FieldFlowInputProps } from '../FieldFlowInput/types';
+import type { ApplyMaskOptions, FieldFlowMaskType } from '../../utils/masks';
+
+export interface FieldFlowMaskedInputProps
+  extends Omit<FieldFlowInputProps, 'type' | 'onChangeText' | 'value' | 'defaultValue'> {
+  /** Built-in mask. Use `custom` with `maskOptions.pattern` for your own pattern (`#` = digit). */
+  mask: FieldFlowMaskType;
+  maskOptions?: ApplyMaskOptions;
+
+  value?: string;
+  defaultValue?: string;
+  /**
+   * Called with both the formatted display value and the raw unmasked value.
+   * Prefer `raw` when posting to an API.
+   */
+  onChangeText?: (formatted: string, raw: string) => void;
+  /**
+   * Which value to keep in controlled `value` / emit as the primary string.
+   * Default: `'formatted'`.
+   */
+  valueMode?: 'formatted' | 'raw';
+}