rn-inputforge 0.3.1 → 0.5.0

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,52 @@ 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: {
+      position: 'relative',
+      overflow: 'visible',
       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,
+    },
+    focusGlow: {
+      position: 'absolute',
+      top: -3,
+      left: -3,
+      right: -3,
+      bottom: -3,
+      borderWidth: 3,
+    },
+    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,
+      paddingHorizontal: 4,
+      zIndex: 2,
+      fontFamily: theme.typography.fontFamily,
     },
     input: {
       flex: 1,
@@ -53,6 +98,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 +121,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,22 @@
 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';
+import type { FieldFlowAffordanceChip, FieldFlowAffordanceKind } from '../../utils/affordance';
+import type { PasswordStrengthRule } from '../../utils/passwordStrength';
 
 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,13 +42,53 @@ 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;
 
+  /**
+   * 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;
+
   maxLength?: number;
   showCharacterCount?: boolean;
 
@@ -46,9 +96,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';
+}

package/src/components/FieldFlowNumberStepper/FieldFlowNumberStepper.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowNumberStepperProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  formatValue?: (value: number) => string;
+  /** Custom − button content. */
+  renderDecrease?: (ctx: { disabled: boolean; onPress: () => void }) => React.ReactNode;
+  /** Custom + button content. */
+  renderIncrease?: (ctx: { disabled: boolean; onPress: () => void }) => React.ReactNode;
+  /** Custom center value display. */
+  renderValue?: (value: number) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowNumberStepper({
+  value,
+  onChange,
+  min = 0,
+  max = 99,
+  step = 1,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  formatValue,
+  renderDecrease,
+  renderIncrease,
+  renderValue,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowNumberStepperProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme, Boolean(errorText), Boolean(disabled)), [theme, errorText, disabled]);
+
+  const dec = () => {
+    if (disabled) return;
+    onChange(Math.max(min, Number((value - step).toFixed(6))));
+  };
+  const inc = () => {
+    if (disabled) return;
+    onChange(Math.min(max, Number((value + step).toFixed(6))));
+  };
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={styles.row}>
+        {renderDecrease ? (
+          renderDecrease({ disabled: Boolean(disabled) || value <= min, onPress: dec })
+        ) : (
+          <Pressable
+            style={[styles.btn, value <= min && styles.btnDisabled]}
+            onPress={dec}
+            disabled={disabled || value <= min}
+            accessibilityLabel="Decrease"
+          >
+            {renderFieldFlowIcon('minus', theme.colors.text, 16)}
+          </Pressable>
+        )}
+        {renderValue ? (
+          renderValue(value)
+        ) : (
+          <Text style={styles.value}>{formatValue ? formatValue(value) : String(value)}</Text>
+        )}
+        {renderIncrease ? (
+          renderIncrease({ disabled: Boolean(disabled) || value >= max, onPress: inc })
+        ) : (
+          <Pressable
+            style={[styles.btn, value >= max && styles.btnDisabled]}
+            onPress={inc}
+            disabled={disabled || value >= max}
+            accessibilityLabel="Increase"
+          >
+            {renderFieldFlowIcon('plus', theme.colors.text, 16)}
+          </Pressable>
+        )}
+      </View>
+
+      {errorText ? (
+        <Text style={styles.error}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={styles.helper}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, hasError: boolean, disabled: boolean) {
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap * 2, opacity: disabled ? 0.6 : 1 },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      marginBottom: theme.spacing.gap,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      borderWidth: hasError ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth,
+      borderColor: hasError ? theme.colors.borderError : theme.colors.border,
+      borderRadius: theme.spacing.borderRadius,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.background,
+    },
+    btn: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    btnDisabled: { opacity: 0.4 },
+    value: {
+      minWidth: 56,
+      textAlign: 'center',
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+      color: theme.colors.text,
+      paddingHorizontal: 8,
+    },
+    helper: { marginTop: 6, fontSize: theme.typography.helperFontSize, color: theme.colors.label },
+    error: { marginTop: 6, fontSize: theme.typography.helperFontSize, color: theme.colors.error },
+  });
+}

package/src/components/FieldFlowNumberStepper/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowNumberStepper } from './FieldFlowNumberStepper';
+export type { FieldFlowNumberStepperProps } from './FieldFlowNumberStepper';