rn-inputforge 0.4.0 → 0.5.1

package/src/theme/defaultTheme.ts

@@ -1,4 +1,5 @@
 import type { FieldFlowTheme } from '../types';
+import { defaultAppearance } from './appearance';
 
 export const defaultTheme: FieldFlowTheme = {
   colors: {
@@ -16,6 +17,10 @@ export const defaultTheme: FieldFlowTheme = {
     success: '#22C55E',
     icon: '#6B7280',
     iconFocused: '#3B82F6',
+    warning: '#D97706',
+    info: '#0284C7',
+    surfaceMuted: '#F8FAFC',
+    surfaceElevated: '#FFFFFF',
   },
   spacing: {
     paddingHorizontal: 14,
@@ -35,6 +40,7 @@ export const defaultTheme: FieldFlowTheme = {
     duration: 160,
     useNativeDriver: false,
   },
+  appearance: { ...defaultAppearance },
 };
 
 export const darkTheme: FieldFlowTheme = {
@@ -54,5 +60,10 @@ export const darkTheme: FieldFlowTheme = {
     success: '#4ADE80',
     icon: '#9CA3AF',
     iconFocused: '#60A5FA',
+    warning: '#FBBF24',
+    info: '#38BDF8',
+    surfaceMuted: '#15171B',
+    surfaceElevated: '#262B33',
   },
+  appearance: { ...defaultAppearance },
 };

package/src/theme/index.ts

@@ -1,3 +1,6 @@
 export { defaultTheme, darkTheme } from './defaultTheme';
 export { FieldFlowThemeProvider, useFieldFlowTheme, mergeDeep } from './ThemeProvider';
 export type { FieldFlowThemeProviderProps } from './ThemeProvider';
+export { themePresets, getThemePreset } from './presets';
+export type { FieldFlowThemePresetName } from './presets';
+export { applyAppearance, defaultAppearance, surfaceShadow } from './appearance';

package/src/theme/presets.ts

@@ -0,0 +1,120 @@
+import type { DeepPartial, FieldFlowTheme } from '../types';
+import { defaultTheme, darkTheme } from './defaultTheme';
+
+/**
+ * Curated one-liner themes for demos and brand starts.
+ * Pass into `FieldFlowThemeProvider theme={themePresets.soft}`.
+ */
+export const themePresets = {
+  /** Default FieldFlow blue. */
+  default: defaultTheme as DeepPartial<FieldFlowTheme>,
+  /** Bundled dark palette. */
+  dark: darkTheme as DeepPartial<FieldFlowTheme>,
+  /** Soft rounded surfaces, indigo accent. */
+  soft: {
+    colors: {
+      background: '#F8FAFC',
+      backgroundDisabled: '#EEF2F7',
+      border: '#E2E8F0',
+      borderFocused: '#6366F1',
+      borderError: '#F43F5E',
+      borderSuccess: '#10B981',
+      text: '#0F172A',
+      placeholder: '#94A3B8',
+      label: '#475569',
+      labelFocused: '#6366F1',
+      error: '#F43F5E',
+      success: '#10B981',
+      icon: '#64748B',
+      iconFocused: '#6366F1',
+    },
+    spacing: { borderRadius: 16, paddingHorizontal: 16, paddingVertical: 14 },
+    typography: { fontSize: 16, labelFontSize: 13, helperFontSize: 12 },
+  } satisfies DeepPartial<FieldFlowTheme>,
+  /** High-contrast ink on white — docs / legal forms. */
+  contrast: {
+    colors: {
+      background: '#FFFFFF',
+      backgroundDisabled: '#F3F4F6',
+      border: '#111827',
+      borderFocused: '#111827',
+      borderError: '#B91C1C',
+      borderSuccess: '#047857',
+      text: '#111827',
+      placeholder: '#6B7280',
+      label: '#111827',
+      labelFocused: '#111827',
+      error: '#B91C1C',
+      success: '#047857',
+      icon: '#374151',
+      iconFocused: '#111827',
+    },
+    spacing: { borderRadius: 4, borderWidth: 1.5, borderWidthFocused: 2 },
+  } satisfies DeepPartial<FieldFlowTheme>,
+  /** Warm coral accent, cream surfaces. */
+  warm: {
+    colors: {
+      background: '#FFFBF7',
+      backgroundDisabled: '#F5EDE4',
+      border: '#E8D5C4',
+      borderFocused: '#E11D48',
+      borderError: '#DC2626',
+      borderSuccess: '#059669',
+      text: '#1C1917',
+      placeholder: '#A8A29E',
+      label: '#57534E',
+      labelFocused: '#E11D48',
+      error: '#DC2626',
+      success: '#059669',
+      icon: '#78716C',
+      iconFocused: '#E11D48',
+    },
+    spacing: { borderRadius: 12 },
+  } satisfies DeepPartial<FieldFlowTheme>,
+  /** Cool teal — fintech / health. */
+  teal: {
+    colors: {
+      background: '#FFFFFF',
+      backgroundDisabled: '#F0FDFA',
+      border: '#CCFBF1',
+      borderFocused: '#0D9488',
+      borderError: '#E11D48',
+      borderSuccess: '#059669',
+      text: '#134E4A',
+      placeholder: '#5EEAD4',
+      label: '#0F766E',
+      labelFocused: '#0D9488',
+      error: '#E11D48',
+      success: '#059669',
+      icon: '#14B8A6',
+      iconFocused: '#0D9488',
+    },
+    spacing: { borderRadius: 14, paddingHorizontal: 16 },
+  } satisfies DeepPartial<FieldFlowTheme>,
+  /** Midnight elevated cards. */
+  midnight: {
+    colors: {
+      background: '#0B1220',
+      backgroundDisabled: '#111827',
+      border: '#1F2937',
+      borderFocused: '#818CF8',
+      borderError: '#FB7185',
+      borderSuccess: '#34D399',
+      text: '#F9FAFB',
+      placeholder: '#6B7280',
+      label: '#9CA3AF',
+      labelFocused: '#A5B4FC',
+      error: '#FB7185',
+      success: '#34D399',
+      icon: '#9CA3AF',
+      iconFocused: '#A5B4FC',
+    },
+    spacing: { borderRadius: 14 },
+  } satisfies DeepPartial<FieldFlowTheme>,
+} as const;
+
+export type FieldFlowThemePresetName = keyof typeof themePresets;
+
+export function getThemePreset(name: FieldFlowThemePresetName): DeepPartial<FieldFlowTheme> {
+  return themePresets[name];
+}

package/src/types/globals.d.ts

@@ -0,0 +1,2 @@
+/** React Native / Metro global. */
+declare const __DEV__: boolean;

package/src/types/index.ts

@@ -67,6 +67,14 @@ export interface FieldFlowColors {
   success: string;
   icon: string;
   iconFocused: string;
+  /** Soft warning (amber). */
+  warning: string;
+  /** Informational blue/teal. */
+  info: string;
+  /** Muted surface for soft / inset wells. */
+  surfaceMuted: string;
+  /** Elevated card surface. */
+  surfaceElevated: string;
 }
 
 export interface FieldFlowSpacing {
@@ -91,11 +99,31 @@ export interface FieldFlowAnimationConfig {
   useNativeDriver: boolean;
 }
 
+/** Form-wide visual rhythm. */
+export type FieldFlowDensity = 'compact' | 'comfortable' | 'spacious';
+/** Control scale. */
+export type FieldFlowControlSize = 'sm' | 'md' | 'lg';
+/** Chrome depth. */
+export type FieldFlowSurface = 'flat' | 'elevated' | 'soft' | 'inset';
+/** Corner language. */
+export type FieldFlowShape = 'square' | 'rounded' | 'pill';
+/** Focus treatment. */
+export type FieldFlowFocusRing = 'solid' | 'softGlow' | 'underlinePulse';
+
+export interface FieldFlowAppearance {
+  density: FieldFlowDensity;
+  size: FieldFlowControlSize;
+  surface: FieldFlowSurface;
+  shape: FieldFlowShape;
+  focusRing: FieldFlowFocusRing;
+}
+
 export interface FieldFlowTheme {
   colors: FieldFlowColors;
   spacing: FieldFlowSpacing;
   typography: FieldFlowTypography;
   animation: FieldFlowAnimationConfig;
+  appearance: FieldFlowAppearance;
 }
 
 export type DeepPartial<T> = {

package/src/utils/affordance.ts

@@ -0,0 +1,138 @@
+export type FieldFlowAffordanceKind = 'email' | 'phone' | 'currency' | 'custom';
+
+export interface FieldFlowAffordanceChip {
+  /** Visible chip label, e.g. "@gmail.com" or "+1". */
+  label: string;
+  /** Value applied when the chip is pressed. Defaults to `label`. */
+  value?: string;
+  /** Optional accessibility label. */
+  accessibilityLabel?: string;
+}
+
+/** Popular consumer email domains for quick completion. */
+export const DEFAULT_EMAIL_DOMAINS: string[] = [
+  'gmail.com',
+  'outlook.com',
+  'hotmail.com',
+  'yahoo.com',
+  'icloud.com',
+  'proton.me',
+  'aol.com',
+  'mail.com',
+];
+
+/** Common dial-code chips (label shown to the user). */
+export const DEFAULT_PHONE_DIAL_CODES: FieldFlowAffordanceChip[] = [
+  { label: '+1', accessibilityLabel: 'United States / Canada +1' },
+  { label: '+44', accessibilityLabel: 'United Kingdom +44' },
+  { label: '+92', accessibilityLabel: 'Pakistan +92' },
+  { label: '+91', accessibilityLabel: 'India +91' },
+  { label: '+61', accessibilityLabel: 'Australia +61' },
+  { label: '+49', accessibilityLabel: 'Germany +49' },
+  { label: '+971', accessibilityLabel: 'UAE +971' },
+  { label: '+966', accessibilityLabel: 'Saudi Arabia +966' },
+];
+
+/** Currency symbol chips. */
+export const DEFAULT_CURRENCY_SYMBOLS: FieldFlowAffordanceChip[] = [
+  { label: '$', value: '$', accessibilityLabel: 'US Dollar' },
+  { label: '€', value: '€', accessibilityLabel: 'Euro' },
+  { label: '£', value: '£', accessibilityLabel: 'British Pound' },
+  { label: '₹', value: '₹', accessibilityLabel: 'Indian Rupee' },
+  { label: 'Rs', value: 'Rs ', accessibilityLabel: 'Rupee' },
+  { label: 'AED', value: 'AED ', accessibilityLabel: 'UAE Dirham' },
+];
+
+export function emailDomainsToChips(domains: string[]): FieldFlowAffordanceChip[] {
+  return domains.map(domain => ({
+    label: `@${domain}`,
+    value: domain,
+    accessibilityLabel: `Complete with ${domain}`,
+  }));
+}
+
+/**
+ * Apply an email-domain suggestion to the current value.
+ * - `jane` + `gmail.com` → `jane@gmail.com`
+ * - `jane@hot` + `gmail.com` → `jane@gmail.com`
+ * - `jane@gmail.com` + `outlook.com` → `jane@outlook.com`
+ */
+export function applyEmailDomainSuggestion(current: string, domain: string): string {
+  const cleanedDomain = domain.replace(/^@/, '');
+  const at = current.indexOf('@');
+  if (at === -1) {
+    const local = current.trim();
+    return local ? `${local}@${cleanedDomain}` : `@${cleanedDomain}`;
+  }
+  return `${current.slice(0, at)}@${cleanedDomain}`;
+}
+
+/**
+ * Apply a dial-code chip. Replaces an existing leading `+digits` prefix when present.
+ */
+export function applyPhoneDialSuggestion(current: string, dialCode: string): string {
+  const code = dialCode.startsWith('+') ? dialCode : `+${dialCode}`;
+  const rest = current.replace(/^\s*\+?\d{0,4}\s*/, '');
+  return rest ? `${code} ${rest.trimStart()}` : code;
+}
+
+/**
+ * Ensure the value starts with the currency symbol (does not duplicate if already present).
+ */
+export function applyCurrencySymbolSuggestion(current: string, symbol: string): string {
+  const trimmed = current.trimStart();
+  if (trimmed.startsWith(symbol.trim())) return current;
+  const digits = trimmed.replace(/^[^\d.-]+/, '');
+  return `${symbol}${digits}`;
+}
+
+export function resolveAffordanceChips(
+  kind: FieldFlowAffordanceKind,
+  custom?: FieldFlowAffordanceChip[] | string[],
+): FieldFlowAffordanceChip[] {
+  if (custom && custom.length > 0) {
+    return custom.map(item =>
+      typeof item === 'string'
+        ? { label: item.startsWith('@') || item.startsWith('+') ? item : item, value: item }
+        : item,
+    );
+  }
+  switch (kind) {
+    case 'email':
+      return emailDomainsToChips(DEFAULT_EMAIL_DOMAINS);
+    case 'phone':
+      return DEFAULT_PHONE_DIAL_CODES;
+    case 'currency':
+      return DEFAULT_CURRENCY_SYMBOLS;
+    default:
+      return [];
+  }
+}
+
+export function applyAffordanceSuggestion(
+  kind: FieldFlowAffordanceKind,
+  current: string,
+  chip: FieldFlowAffordanceChip,
+): string {
+  const value = chip.value ?? chip.label;
+  switch (kind) {
+    case 'email':
+      return applyEmailDomainSuggestion(current, value);
+    case 'phone':
+      return applyPhoneDialSuggestion(current, value);
+    case 'currency':
+      return applyCurrencySymbolSuggestion(current, value);
+    default:
+      return value;
+  }
+}
+
+/** Infer affordance kind from FieldFlow input `type`. */
+export function affordanceKindFromFieldType(
+  type?: string,
+): FieldFlowAffordanceKind | undefined {
+  if (type === 'email') return 'email';
+  if (type === 'phone') return 'phone';
+  if (type === 'decimal' || type === 'number') return 'currency';
+  return undefined;
+}

package/src/utils/passwordStrength.ts

@@ -0,0 +1,109 @@
+export type PasswordStrengthLevel = 'empty' | 'weak' | 'fair' | 'good' | 'strong';
+
+export interface PasswordStrengthRule {
+  id: string;
+  label: string;
+  test: (password: string) => boolean;
+}
+
+export interface PasswordStrengthResult {
+  score: number;
+  /** 0–4 mapped level (empty when score is 0 and password is empty). */
+  level: PasswordStrengthLevel;
+  /** Fraction 0–1 for progress bars. */
+  progress: number;
+  passed: PasswordStrengthRule[];
+  failed: PasswordStrengthRule[];
+  /** Short human label, e.g. "Strong". */
+  label: string;
+}
+
+export const DEFAULT_PASSWORD_RULES: PasswordStrengthRule[] = [
+  {
+    id: 'length',
+    label: 'At least 8 characters',
+    test: p => p.length >= 8,
+  },
+  {
+    id: 'lowercase',
+    label: 'A lowercase letter',
+    test: p => /[a-z]/.test(p),
+  },
+  {
+    id: 'uppercase',
+    label: 'An uppercase letter',
+    test: p => /[A-Z]/.test(p),
+  },
+  {
+    id: 'number',
+    label: 'A number',
+    test: p => /\d/.test(p),
+  },
+  {
+    id: 'symbol',
+    label: 'A symbol',
+    test: p => /[^A-Za-z0-9]/.test(p),
+  },
+];
+
+const LEVEL_LABELS: Record<PasswordStrengthLevel, string> = {
+  empty: '',
+  weak: 'Weak',
+  fair: 'Fair',
+  good: 'Good',
+  strong: 'Strong',
+};
+
+/**
+ * Score a password against declarative rules (default NIST-ish checklist).
+ * Pure function — safe to unit test and reuse outside React.
+ */
+export function evaluatePasswordStrength(
+  password: string,
+  rules: PasswordStrengthRule[] = DEFAULT_PASSWORD_RULES,
+): PasswordStrengthResult {
+  if (!password) {
+    return {
+      score: 0,
+      level: 'empty',
+      progress: 0,
+      passed: [],
+      failed: [...rules],
+      label: LEVEL_LABELS.empty,
+    };
+  }
+
+  const passed: PasswordStrengthRule[] = [];
+  const failed: PasswordStrengthRule[] = [];
+  for (const rule of rules) {
+    if (rule.test(password)) passed.push(rule);
+    else failed.push(rule);
+  }
+
+  const score = passed.length;
+  const max = Math.max(rules.length, 1);
+  const ratio = score / max;
+
+  let level: PasswordStrengthLevel;
+  if (ratio < 0.4) level = 'weak';
+  else if (ratio < 0.6) level = 'fair';
+  else if (ratio < 0.85) level = 'good';
+  else level = 'strong';
+
+  return {
+    score,
+    level,
+    progress: ratio,
+    passed,
+    failed,
+    label: LEVEL_LABELS[level],
+  };
+}
+
+/** Suggested bar colors for each level (consumers can override). */
+export const PASSWORD_STRENGTH_COLORS: Record<Exclude<PasswordStrengthLevel, 'empty'>, string> = {
+  weak: '#EF4444',
+  fair: '#F59E0B',
+  good: '#3B82F6',
+  strong: '#22C55E',
+};

package/src/utils/phoneCountries.ts

@@ -0,0 +1,44 @@
+export interface FieldFlowCountryDial {
+  /** ISO 3166-1 alpha-2 */
+  code: string;
+  name: string;
+  dial: string;
+  flag?: string;
+}
+
+/** Common dial codes for `FieldFlowPhone`. Extend via `countries` prop. */
+export const DEFAULT_COUNTRY_DIALS: FieldFlowCountryDial[] = [
+  { code: 'US', name: 'United States', dial: '+1', flag: '🇺🇸' },
+  { code: 'GB', name: 'United Kingdom', dial: '+44', flag: '🇬🇧' },
+  { code: 'CA', name: 'Canada', dial: '+1', flag: '🇨🇦' },
+  { code: 'AU', name: 'Australia', dial: '+61', flag: '🇦🇺' },
+  { code: 'DE', name: 'Germany', dial: '+49', flag: '🇩🇪' },
+  { code: 'FR', name: 'France', dial: '+33', flag: '🇫🇷' },
+  { code: 'IN', name: 'India', dial: '+91', flag: '🇮🇳' },
+  { code: 'PK', name: 'Pakistan', dial: '+92', flag: '🇵🇰' },
+  { code: 'AE', name: 'United Arab Emirates', dial: '+971', flag: '🇦🇪' },
+  { code: 'SA', name: 'Saudi Arabia', dial: '+966', flag: '🇸🇦' },
+  { code: 'BR', name: 'Brazil', dial: '+55', flag: '🇧🇷' },
+  { code: 'MX', name: 'Mexico', dial: '+52', flag: '🇲🇽' },
+  { code: 'NG', name: 'Nigeria', dial: '+234', flag: '🇳🇬' },
+  { code: 'ZA', name: 'South Africa', dial: '+27', flag: '🇿🇦' },
+  { code: 'JP', name: 'Japan', dial: '+81', flag: '🇯🇵' },
+  { code: 'KR', name: 'South Korea', dial: '+82', flag: '🇰🇷' },
+  { code: 'CN', name: 'China', dial: '+86', flag: '🇨🇳' },
+  { code: 'SG', name: 'Singapore', dial: '+65', flag: '🇸🇬' },
+  { code: 'TR', name: 'Turkey', dial: '+90', flag: '🇹🇷' },
+  { code: 'ES', name: 'Spain', dial: '+34', flag: '🇪🇸' },
+];
+
+export function findCountryByCode(
+  code: string,
+  list: FieldFlowCountryDial[] = DEFAULT_COUNTRY_DIALS,
+): FieldFlowCountryDial | undefined {
+  return list.find(c => c.code === code);
+}
+
+export function composeE164(dial: string, national: string): string {
+  const digits = national.replace(/\D/g, '');
+  const dialDigits = dial.replace(/\D/g, '');
+  return `+${dialDigits}${digits}`;
+}

package/src/validation/validators.ts

@@ -1,4 +1,8 @@
 import type { FieldFlowRules, ValidationResult, Validator } from '../types';
+import {
+  getValidationMessages,
+  type FieldFlowValidationMessages,
+} from '../i18n/messages';
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const NUMBER_REGEX = /^-?\d+(\.\d+)?$/;
@@ -50,35 +54,41 @@ export const patternValidator =
 /**
  * Turns a declarative `FieldFlowRules` object into an ordered list of validators
  * and runs them against a value, stopping at (and returning) the first failure.
+ * Pass `messages` (or use `locale` via `useFieldFlowForm`) for localized defaults.
  */
-export function runRules(value: string, rules?: FieldFlowRules): ValidationResult {
+export function runRules(
+  value: string,
+  rules?: FieldFlowRules,
+  messages?: FieldFlowValidationMessages,
+): ValidationResult {
   if (!rules) return { valid: true };
 
+  const msg = messages ?? getValidationMessages('en');
   const validators: Validator[] = [];
 
   if (rules.required) {
-    const message = typeof rules.required === 'string' ? rules.required : undefined;
+    const message = typeof rules.required === 'string' ? rules.required : msg.required;
     validators.push(requiredValidator(message));
   }
   if (rules.email) {
-    const message = typeof rules.email === 'string' ? rules.email : undefined;
+    const message = typeof rules.email === 'string' ? rules.email : msg.email;
     validators.push(emailValidator(message));
   }
   if (rules.number) {
-    const message = typeof rules.number === 'string' ? rules.number : undefined;
+    const message = typeof rules.number === 'string' ? rules.number : msg.number;
     validators.push(numberValidator(message));
   }
   if (rules.minLength !== undefined) {
     const cfg = typeof rules.minLength === 'number' ? { value: rules.minLength } : rules.minLength;
-    validators.push(minLengthValidator(cfg.value, cfg.message));
+    validators.push(minLengthValidator(cfg.value, cfg.message ?? msg.minLength(cfg.value)));
   }
   if (rules.maxLength !== undefined) {
     const cfg = typeof rules.maxLength === 'number' ? { value: rules.maxLength } : rules.maxLength;
-    validators.push(maxLengthValidator(cfg.value, cfg.message));
+    validators.push(maxLengthValidator(cfg.value, cfg.message ?? msg.maxLength(cfg.value)));
   }
   if (rules.pattern) {
     const cfg = rules.pattern instanceof RegExp ? { value: rules.pattern } : rules.pattern;
-    validators.push(patternValidator(cfg.value, cfg.message));
+    validators.push(patternValidator(cfg.value, cfg.message ?? msg.pattern));
   }
   if (rules.custom) {
     const customs = Array.isArray(rules.custom) ? rules.custom : [rules.custom];