rn-inputforge 0.4.0 → 0.5.1

package/src/paste/smartPaste.ts

@@ -0,0 +1,132 @@
+export type FieldFlowPasteKind =
+  | 'otp'
+  | 'card'
+  | 'email'
+  | 'phone'
+  | 'address'
+  | 'url'
+  | 'unknown';
+
+export interface FieldFlowAddressPaste {
+  street?: string;
+  city?: string;
+  state?: string;
+  postalCode?: string;
+  country?: string;
+  raw: string;
+}
+
+export interface FieldFlowPasteResult {
+  kind: FieldFlowPasteKind;
+  /** Primary value for a single target field. */
+  value: string;
+  /** Digits-only for OTP / card / phone when applicable. */
+  raw?: string;
+  address?: FieldFlowAddressPaste;
+  confidence: number;
+}
+
+function digitsOnly(s: string): string {
+  return s.replace(/\D/g, '');
+}
+
+/**
+ * Classify clipboard / pasted text and extract a structured value.
+ * Pure — no Clipboard permission required; call from `onPaste` or after reading clipboard.
+ */
+export function routeSmartPaste(text: string): FieldFlowPasteResult {
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return { kind: 'unknown', value: '', confidence: 0 };
+  }
+
+  const digits = digitsOnly(trimmed);
+
+  // OTP: 4–8 digits, little else
+  if (/^\d{4,8}$/.test(digits) && digits.length === trimmed.replace(/\s/g, '').length) {
+    return { kind: 'otp', value: digits, raw: digits, confidence: 0.95 };
+  }
+
+  // Card: 13–19 digits (spaces/dashes ok)
+  if (digits.length >= 13 && digits.length <= 19 && /^[\d\s-]+$/.test(trimmed)) {
+    return { kind: 'card', value: digits, raw: digits, confidence: 0.9 };
+  }
+
+  // Email
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
+    return { kind: 'email', value: trimmed.toLowerCase(), confidence: 0.98 };
+  }
+
+  // URL
+  if (/^https?:\/\//i.test(trimmed) || /^www\./i.test(trimmed)) {
+    return {
+      kind: 'url',
+      value: trimmed.startsWith('http') ? trimmed : `https://${trimmed}`,
+      confidence: 0.9,
+    };
+  }
+
+  // Phone: 7–15 digits with optional + and punctuation
+  if (
+    digits.length >= 7 &&
+    digits.length <= 15 &&
+    /^[+]?[\d\s().-]{7,22}$/.test(trimmed) &&
+    !/[a-zA-Z]{3,}/.test(trimmed)
+  ) {
+    return { kind: 'phone', value: trimmed, raw: digits, confidence: 0.85 };
+  }
+
+  // Multi-line address-ish
+  const lines = trimmed
+    .split(/\r?\n/)
+    .map(l => l.trim())
+    .filter(Boolean);
+  if (lines.length >= 2) {
+    const postalMatch = trimmed.match(/\b([A-Z]{1,2}\d[A-Z\d]?\s*\d[A-Z]{2}|\d{5}(?:-\d{4})?)\b/i);
+    const address: FieldFlowAddressPaste = {
+      street: lines[0],
+      city: lines[1]?.replace(/,.*$/, '').trim(),
+      state: lines[1]?.includes(',')
+        ? lines[1].split(',')[1]?.trim().split(/\s+/)[0]
+        : undefined,
+      postalCode: postalMatch?.[1],
+      raw: trimmed,
+    };
+    return {
+      kind: 'address',
+      value: lines[0],
+      address,
+      confidence: 0.7,
+    };
+  }
+
+  return { kind: 'unknown', value: trimmed, confidence: 0.2 };
+}
+
+export type FieldFlowPasteTargets = Partial<
+  Record<FieldFlowPasteKind, (result: FieldFlowPasteResult) => void>
+> & {
+  /** Called when kind is address and you want field-level writes. */
+  addressFields?: (address: FieldFlowAddressPaste) => void;
+};
+
+/**
+ * Route paste into field setters. Returns true if a handler ran with confidence ≥ minConfidence.
+ */
+export function applySmartPaste(
+  text: string,
+  targets: FieldFlowPasteTargets,
+  minConfidence = 0.7,
+): FieldFlowPasteResult {
+  const result = routeSmartPaste(text);
+  if (result.confidence < minConfidence) return result;
+
+  if (result.kind === 'address' && result.address && targets.addressFields) {
+    targets.addressFields(result.address);
+    return result;
+  }
+
+  const handler = targets[result.kind];
+  if (handler) handler(result);
+  return result;
+}

package/src/schema/FieldFlowSchemaForm.tsx

@@ -0,0 +1,274 @@
+import React, { useMemo, useState } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { FieldFlowInput } from '../components/FieldFlowInput';
+import { FieldFlowCheckbox } from '../components/FieldFlowCheckbox';
+import { FieldFlowSwitch } from '../components/FieldFlowSwitch';
+import { FieldFlowRadio } from '../components/FieldFlowRadio';
+import { FieldFlowSegmented } from '../components/FieldFlowSegmented';
+import { FieldFlowDropdown } from '../components/FieldFlowDropdown';
+import { FieldFlowTags } from '../components/FieldFlowTags';
+import { FieldFlowRating } from '../components/FieldFlowRating';
+import { FieldFlowSlider } from '../components/FieldFlowSlider';
+import { FieldFlowNumberStepper } from '../components/FieldFlowNumberStepper';
+import { FieldFlowSection } from '../components/FieldFlowSection';
+import { useFieldFlowForm } from '../hooks/useFieldFlowForm';
+import type { FieldFlowFormSchema, FieldFlowSchemaField } from './types';
+import type { FieldFlowLocale } from '../i18n/messages';
+
+export type FieldFlowSchemaShowWhenFn = (values: Record<string, string>) => boolean;
+
+export interface FieldFlowSchemaFormProps {
+  schema: FieldFlowFormSchema;
+  /** Named showWhen resolvers referenced by field.showWhen string key. */
+  showWhenFns?: Record<string, FieldFlowSchemaShowWhenFn>;
+  locale?: FieldFlowLocale;
+  onSubmit?: (values: Record<string, string>) => void | Promise<void>;
+  /** Extra non-string state (tags, rating, etc.) change callback. */
+  onMetaChange?: (meta: Record<string, unknown>) => void;
+  /** Render a custom submit footer; receives form submit + values. */
+  renderFooter?: (ctx: {
+    submit: () => Promise<void>;
+    values: Record<string, string>;
+    meta: Record<string, unknown>;
+    isSubmitting: boolean;
+  }) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  testID?: string;
+}
+
+function buildInitial(schema: FieldFlowFormSchema): Record<string, string> {
+  const base: Record<string, string> = { ...(schema.initialValues ?? {}) };
+  for (const field of schema.fields) {
+    if (base[field.name] === undefined) {
+      if (field.type === 'checkbox' || field.type === 'switch') base[field.name] = 'false';
+      else if (field.type === 'rating' || field.type === 'slider' || field.type === 'stepper') {
+        base[field.name] = String(field.min ?? 0);
+      } else base[field.name] = '';
+    }
+  }
+  return base;
+}
+
+function buildRules(schema: FieldFlowFormSchema) {
+  const rules: Record<string, FieldFlowSchemaField['rules']> = {};
+  for (const field of schema.fields) {
+    const r = { ...(field.rules ?? {}) };
+    if (field.required && !r.required) r.required = true;
+    if (field.type === 'email' && r.email === undefined) r.email = true;
+    if (Object.keys(r).length) rules[field.name] = r;
+  }
+  return rules;
+}
+
+/**
+ * Declarative form renderer — JSON / object schema → FieldFlow controls.
+ */
+export function FieldFlowSchemaForm({
+  schema,
+  showWhenFns,
+  locale,
+  onSubmit,
+  onMetaChange,
+  renderFooter,
+  containerStyle,
+  testID,
+}: FieldFlowSchemaFormProps) {
+  const initialValues = useMemo(() => buildInitial(schema), [schema]);
+  const rules = useMemo(() => buildRules(schema), [schema]);
+
+  const form = useFieldFlowForm({
+    initialValues,
+    rules,
+    locale,
+    onSubmit,
+  });
+
+  const [meta, setMeta] = useState<Record<string, unknown>>({});
+
+  const patchMeta = (key: string, value: unknown) => {
+    setMeta(prev => {
+      const next = { ...prev, [key]: value };
+      onMetaChange?.(next);
+      return next;
+    });
+  };
+
+  const isVisible = (field: FieldFlowSchemaField) => {
+    if (!field.showWhen) return true;
+    const fn = showWhenFns?.[field.showWhen];
+    if (!fn) return true;
+    return fn(form.values);
+  };
+
+  const sections = schema.sections ?? [];
+  const bySection = useMemo(() => {
+    const map = new Map<string | null, FieldFlowSchemaField[]>();
+    for (const field of schema.fields) {
+      const key = field.section ?? null;
+      const list = map.get(key) ?? [];
+      list.push(field);
+      map.set(key, list);
+    }
+    return map;
+  }, [schema.fields]);
+
+  const renderField = (field: FieldFlowSchemaField) => {
+    if (!isVisible(field)) return null;
+    const props = form.getInputProps(field.name);
+    if (!props && field.type !== 'checkbox' && field.type !== 'switch' && field.type !== 'rating' && field.type !== 'slider' && field.type !== 'stepper' && field.type !== 'tags' && field.type !== 'dropdown' && field.type !== 'radio' && field.type !== 'segmented') {
+      return null;
+    }
+
+    switch (field.type) {
+      case 'checkbox':
+        return (
+          <FieldFlowCheckbox
+            key={field.name}
+            label={field.label}
+            value={form.values[field.name] === 'true'}
+            onChange={v => form.handleChange(field.name)(v ? 'true' : 'false')}
+            required={field.required}
+            helperText={field.helperText}
+          />
+        );
+      case 'switch':
+        return (
+          <FieldFlowSwitch
+            key={field.name}
+            label={field.label}
+            value={form.values[field.name] === 'true'}
+            onChange={v => form.handleChange(field.name)(v ? 'true' : 'false')}
+            helperText={field.helperText}
+          />
+        );
+      case 'radio':
+        return (
+          <FieldFlowRadio
+            key={field.name}
+            label={field.label}
+            value={form.values[field.name] || null}
+            onChange={v => form.handleChange(field.name)(v)}
+            options={field.options ?? []}
+            required={field.required}
+          />
+        );
+      case 'segmented':
+        return (
+          <FieldFlowSegmented
+            key={field.name}
+            label={field.label}
+            value={form.values[field.name] || null}
+            onChange={v => form.handleChange(field.name)(v)}
+            options={field.options ?? []}
+            required={field.required}
+          />
+        );
+      case 'dropdown':
+        return (
+          <FieldFlowDropdown
+            key={field.name}
+            label={field.label}
+            placeholder={field.placeholder}
+            options={field.options ?? []}
+            value={form.values[field.name] || null}
+            onChange={v => form.handleChange(field.name)(v ?? '')}
+            required={field.required}
+            helperText={field.helperText}
+          />
+        );
+      case 'tags':
+        return (
+          <FieldFlowTags
+            key={field.name}
+            label={field.label}
+            value={(meta[field.name] as string[]) ?? []}
+            onChange={tags => patchMeta(field.name, tags)}
+            placeholder={field.placeholder}
+            helperText={field.helperText}
+          />
+        );
+      case 'rating':
+        return (
+          <FieldFlowRating
+            key={field.name}
+            label={field.label}
+            value={Number(form.values[field.name] || 0)}
+            onChange={v => form.handleChange(field.name)(String(v))}
+            max={field.max ?? 5}
+            required={field.required}
+          />
+        );
+      case 'slider':
+        return (
+          <FieldFlowSlider
+            key={field.name}
+            label={field.label}
+            value={Number(form.values[field.name] || field.min || 0)}
+            onChange={v => form.handleChange(field.name)(String(v))}
+            min={field.min ?? 0}
+            max={field.max ?? 100}
+            step={field.step ?? 1}
+          />
+        );
+      case 'stepper':
+        return (
+          <FieldFlowNumberStepper
+            key={field.name}
+            label={field.label}
+            value={Number(form.values[field.name] || field.min || 0)}
+            onChange={v => form.handleChange(field.name)(String(v))}
+            min={field.min ?? 0}
+            max={field.max ?? 99}
+            step={field.step ?? 1}
+          />
+        );
+      default:
+        return (
+          <FieldFlowInput
+            key={field.name}
+            type={field.type as 'text'}
+            label={field.label}
+            placeholder={field.placeholder}
+            helperText={field.helperText}
+            variant={field.variant}
+            leftIcon={field.leftIcon}
+            autofill={field.autofill}
+            suggestions={field.suggestions}
+            showStrength={field.showStrength}
+            prefix={field.prefix}
+            suffix={field.suffix}
+            {...props!}
+          />
+        );
+    }
+  };
+
+  const unsectioned = bySection.get(null) ?? [];
+
+  return (
+    <View style={containerStyle} testID={testID}>
+      {unsectioned.map(renderField)}
+      {sections.map(section => {
+        const fields = bySection.get(section.id) ?? [];
+        if (!fields.length) return null;
+        return (
+          <FieldFlowSection
+            key={section.id}
+            title={section.title}
+            description={section.description}
+            icon={section.icon}
+            collapsible={section.collapsible}
+          >
+            {fields.map(renderField)}
+          </FieldFlowSection>
+        );
+      })}
+      {renderFooter?.({
+        submit: form.submit,
+        values: form.values,
+        meta,
+        isSubmitting: form.isSubmitting,
+      })}
+    </View>
+  );
+}

package/src/schema/index.ts

@@ -0,0 +1,8 @@
+export { FieldFlowSchemaForm } from './FieldFlowSchemaForm';
+export type { FieldFlowSchemaFormProps, FieldFlowSchemaShowWhenFn } from './FieldFlowSchemaForm';
+export type {
+  FieldFlowFormSchema,
+  FieldFlowSchemaField,
+  FieldFlowSchemaFieldType,
+  FieldFlowSchemaSection,
+} from './types';

package/src/schema/types.ts

@@ -0,0 +1,63 @@
+import type { FieldFlowRules, FieldFlowOption, FieldFlowVariant } from '../types';
+import type { FieldFlowAutofillRole } from '../autofill/profiles';
+import type { FieldFlowIconSource } from '../icons';
+
+export type FieldFlowSchemaFieldType =
+  | 'text'
+  | 'email'
+  | 'phone'
+  | 'password'
+  | 'number'
+  | 'decimal'
+  | 'search'
+  | 'multiline'
+  | 'switch'
+  | 'checkbox'
+  | 'radio'
+  | 'segmented'
+  | 'dropdown'
+  | 'tags'
+  | 'rating'
+  | 'slider'
+  | 'stepper';
+
+export interface FieldFlowSchemaField {
+  name: string;
+  type: FieldFlowSchemaFieldType;
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  required?: boolean;
+  rules?: FieldFlowRules;
+  variant?: FieldFlowVariant;
+  autofill?: FieldFlowAutofillRole;
+  leftIcon?: FieldFlowIconSource;
+  options?: FieldFlowOption[];
+  /** For slider / stepper / rating. */
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Show when predicate returns true (values bag). */
+  showWhen?: string;
+  /** JSON-serializable expression keys — resolved by `showWhenFns` map on the renderer. */
+  section?: string;
+  suggestions?: boolean | 'email' | 'phone' | 'currency';
+  showStrength?: boolean;
+  prefix?: string;
+  suffix?: string;
+}
+
+export interface FieldFlowSchemaSection {
+  id: string;
+  title?: string;
+  description?: string;
+  icon?: FieldFlowIconSource;
+  collapsible?: boolean;
+}
+
+export interface FieldFlowFormSchema {
+  fields: FieldFlowSchemaField[];
+  sections?: FieldFlowSchemaSection[];
+  /** Initial string values for text-like fields. */
+  initialValues?: Record<string, string>;
+}

package/src/theme/ThemeProvider.tsx

@@ -1,6 +1,18 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import type { DeepPartial, FieldFlowTheme } from '../types';
+import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import type {
+  DeepPartial,
+  FieldFlowAppearance,
+  FieldFlowControlSize,
+  FieldFlowDensity,
+  FieldFlowFocusRing,
+  FieldFlowShape,
+  FieldFlowSurface,
+  FieldFlowTheme,
+} from '../types';
 import { defaultTheme } from './defaultTheme';
+import { applyAppearance, defaultAppearance } from './appearance';
+import { useReducedMotion } from '../motion/useReducedMotion';
 
 const FieldFlowThemeContext = createContext<FieldFlowTheme>(defaultTheme);
 
@@ -27,18 +39,95 @@ function mergeDeep<T extends Record<string, any>>(base: T, override?: DeepPartia
 
 export interface FieldFlowThemeProviderProps {
   theme?: DeepPartial<FieldFlowTheme>;
+  /** Form-wide density. Default: comfortable. */
+  density?: FieldFlowDensity;
+  /** Control size scale. Default: md. */
+  size?: FieldFlowControlSize;
+  /** Surface depth language. Default: flat. */
+  surface?: FieldFlowSurface;
+  /** Corner shape. Default: rounded. */
+  shape?: FieldFlowShape;
+  /** Focus ring style. Default: softGlow. */
+  focusRing?: FieldFlowFocusRing;
+  /**
+   * Soft crossfade when the resolved theme changes (e.g. switching presets).
+   * Default: true. Skipped when Reduce Motion is on.
+   */
+  animateTheme?: boolean;
   children: React.ReactNode;
 }
 
 /**
  * Wrap your app (or a screen/form) in this provider to apply a custom theme.
- * Any field not covered by your overrides falls back to FieldFlow's defaults,
- * so you only need to specify what you want to change.
+ * Density / size / shape / surface / focusRing are one-liner visual knobs.
  */
-export function FieldFlowThemeProvider({ theme, children }: FieldFlowThemeProviderProps) {
-  const merged = useMemo(() => mergeDeep(defaultTheme, theme), [theme]);
+export function FieldFlowThemeProvider({
+  theme,
+  density,
+  size,
+  surface,
+  shape,
+  focusRing,
+  animateTheme = true,
+  children,
+}: FieldFlowThemeProviderProps) {
+  const reducedMotion = useReducedMotion();
+  const appearanceOverride = useMemo(() => {
+    const partial: Partial<FieldFlowAppearance> = {};
+    if (density) partial.density = density;
+    if (size) partial.size = size;
+    if (surface) partial.surface = surface;
+    if (shape) partial.shape = shape;
+    if (focusRing) partial.focusRing = focusRing;
+    return partial;
+  }, [density, size, surface, shape, focusRing]);
+
+  const merged = useMemo(() => {
+    const base = mergeDeep(defaultTheme, theme);
+    const withAppearanceDefaults: FieldFlowTheme = {
+      ...base,
+      appearance: { ...defaultAppearance, ...(base.appearance ?? {}), ...appearanceOverride },
+      colors: {
+        ...defaultTheme.colors,
+        ...base.colors,
+      },
+    };
+    return applyAppearance(withAppearanceDefaults, appearanceOverride);
+  }, [theme, appearanceOverride]);
+
+  const opacity = useRef(new Animated.Value(1)).current;
+  const themeKey = useMemo(
+    () =>
+      JSON.stringify({
+        colors: merged.colors,
+        appearance: merged.appearance,
+        spacing: merged.spacing,
+      }),
+    [merged],
+  );
+  const prevKey = useRef(themeKey);
+
+  useEffect(() => {
+    if (!animateTheme || reducedMotion) {
+      opacity.setValue(1);
+      prevKey.current = themeKey;
+      return;
+    }
+    if (prevKey.current === themeKey) return;
+    prevKey.current = themeKey;
+    opacity.setValue(0.35);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: Math.max(180, merged.animation.duration + 40),
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [themeKey, animateTheme, reducedMotion, opacity, merged.animation.duration]);
+
   return (
-    <FieldFlowThemeContext.Provider value={merged}>{children}</FieldFlowThemeContext.Provider>
+    <FieldFlowThemeContext.Provider value={merged}>
+      <Animated.View style={{ opacity }}>{children}</Animated.View>
+    </FieldFlowThemeContext.Provider>
   );
 }
 

package/src/theme/appearance.ts

@@ -0,0 +1,105 @@
+import type {
+  FieldFlowAppearance,
+  FieldFlowControlSize,
+  FieldFlowDensity,
+  FieldFlowFocusRing,
+  FieldFlowShape,
+  FieldFlowSurface,
+  FieldFlowTheme,
+} from '../types';
+
+export const defaultAppearance: FieldFlowAppearance = {
+  density: 'comfortable',
+  size: 'md',
+  surface: 'flat',
+  shape: 'rounded',
+  focusRing: 'softGlow',
+};
+
+const DENSITY_SCALE: Record<FieldFlowDensity, number> = {
+  compact: 0.85,
+  comfortable: 1,
+  spacious: 1.18,
+};
+
+const SIZE_SCALE: Record<FieldFlowControlSize, number> = {
+  sm: 0.88,
+  md: 1,
+  lg: 1.14,
+};
+
+const SHAPE_RADIUS: Record<FieldFlowShape, (base: number) => number> = {
+  square: () => 4,
+  rounded: base => base,
+  pill: () => 999,
+};
+
+function scale(n: number, factor: number): number {
+  return Math.round(n * factor * 10) / 10;
+}
+
+/**
+ * Apply density / size / shape onto spacing + typography.
+ * Surface and focusRing stay as appearance flags for components to read.
+ */
+export function applyAppearance(
+  theme: FieldFlowTheme,
+  appearance: Partial<FieldFlowAppearance> = {},
+): FieldFlowTheme {
+  const next: FieldFlowAppearance = {
+    ...defaultAppearance,
+    ...(theme.appearance ?? defaultAppearance),
+    ...appearance,
+  };
+  const factor = DENSITY_SCALE[next.density] * SIZE_SCALE[next.size];
+  const radius = SHAPE_RADIUS[next.shape](theme.spacing.borderRadius);
+
+  return {
+    ...theme,
+    appearance: next,
+    spacing: {
+      ...theme.spacing,
+      paddingHorizontal: scale(theme.spacing.paddingHorizontal, factor),
+      paddingVertical: scale(theme.spacing.paddingVertical, factor),
+      gap: scale(theme.spacing.gap, factor),
+      borderRadius: radius,
+    },
+    typography: {
+      ...theme.typography,
+      fontSize: scale(theme.typography.fontSize, factor),
+      labelFontSize: scale(theme.typography.labelFontSize, factor),
+      helperFontSize: scale(theme.typography.helperFontSize, Math.min(factor, 1.1)),
+    },
+  };
+}
+
+export function surfaceShadow(surface: FieldFlowSurface): {
+  shadowColor?: string;
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  shadowOffset?: { width: number; height: number };
+  elevation?: number;
+} | null {
+  switch (surface) {
+    case 'elevated':
+      return {
+        shadowColor: '#000',
+        shadowOpacity: 0.08,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 3,
+      };
+    case 'soft':
+      return {
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 1,
+      };
+    default:
+      return null;
+  }
+}
+
+export type { FieldFlowDensity, FieldFlowControlSize, FieldFlowSurface, FieldFlowShape, FieldFlowFocusRing };