rn-inputforge 0.3.1 → 0.5.0

package/src/index.ts

@@ -19,21 +19,162 @@ export type {
   FieldFlowDropdownPresentation,
 } from './components/FieldFlowDropdown';
 
+export { FieldFlowOTP } from './components/FieldFlowOTP';
+export type { FieldFlowOTPProps } from './components/FieldFlowOTP';
+
+export { FieldFlowMaskedInput } from './components/FieldFlowMaskedInput';
+export type { FieldFlowMaskedInputProps } from './components/FieldFlowMaskedInput';
+
+export { FieldFlowCheckbox } from './components/FieldFlowCheckbox';
+export type { FieldFlowCheckboxProps } from './components/FieldFlowCheckbox';
+
+export { FieldFlowRadio } from './components/FieldFlowRadio';
+export type { FieldFlowRadioProps } from './components/FieldFlowRadio';
+
+export { FieldFlowSwitch } from './components/FieldFlowSwitch';
+export type { FieldFlowSwitchProps } from './components/FieldFlowSwitch';
+
+export { FieldFlowDateTimePicker } from './components/FieldFlowDateTimePicker';
+export type {
+  FieldFlowDateTimePickerProps,
+  FieldFlowDateTimeMode,
+} from './components/FieldFlowDateTimePicker';
+
+export { FieldFlowAffordance } from './components/FieldFlowAffordance';
+export type { FieldFlowAffordanceProps } from './components/FieldFlowAffordance';
+
+export { FieldFlowDraftBanner } from './components/FieldFlowDraftBanner';
+export type { FieldFlowDraftBannerProps } from './components/FieldFlowDraftBanner';
+
+export { FieldFlowTags } from './components/FieldFlowTags';
+export type { FieldFlowTagsProps } from './components/FieldFlowTags';
+
+export { FieldFlowPasswordStrength } from './components/FieldFlowPasswordStrength';
+export type { FieldFlowPasswordStrengthProps } from './components/FieldFlowPasswordStrength';
+
+export { FieldFlowSection } from './components/FieldFlowSection';
+export type { FieldFlowSectionProps } from './components/FieldFlowSection';
+
+export { FieldFlowSegmented } from './components/FieldFlowSegmented';
+export type { FieldFlowSegmentedProps } from './components/FieldFlowSegmented';
+
+export { FieldFlowStepper } from './components/FieldFlowStepper';
+export type { FieldFlowStepperProps, FieldFlowStepRenderContext } from './components/FieldFlowStepper';
+
+export { FieldFlowPhone } from './components/FieldFlowPhone';
+export type { FieldFlowPhoneProps, FieldFlowPhoneValue } from './components/FieldFlowPhone';
+
+export { FieldFlowUpload } from './components/FieldFlowUpload';
+export type {
+  FieldFlowUploadProps,
+  FieldFlowUploadFile,
+  FieldFlowUploadPicker,
+} from './components/FieldFlowUpload';
+
+export { FieldFlowTypeahead } from './components/FieldFlowTypeahead';
+export type { FieldFlowTypeaheadProps, FieldFlowTypeaheadFetcher } from './components/FieldFlowTypeahead';
+
+export { FieldFlowRating } from './components/FieldFlowRating';
+export type { FieldFlowRatingProps } from './components/FieldFlowRating';
+
+export { FieldFlowSlider } from './components/FieldFlowSlider';
+export type { FieldFlowSliderProps } from './components/FieldFlowSlider';
+
+export { FieldFlowNumberStepper } from './components/FieldFlowNumberStepper';
+export type { FieldFlowNumberStepperProps } from './components/FieldFlowNumberStepper';
+
+export { FieldFlowCreditCard } from './components/FieldFlowCreditCard';
+export type { FieldFlowCreditCardProps, FieldFlowCreditCardValue } from './components/FieldFlowCreditCard';
+
+export { FieldFlowSignature } from './components/FieldFlowSignature';
+export type {
+  FieldFlowSignatureProps,
+  FieldFlowSignatureValue,
+  FieldFlowStroke,
+  FieldFlowPoint,
+} from './components/FieldFlowSignature';
+
+// Adapters (optional peers: react-hook-form)
+export {
+  FieldFlowController,
+  FieldFlowTagsController,
+  mapRhfToFieldFlowProps,
+} from './adapters';
+export type {
+  FieldFlowControllerProps,
+  FieldFlowTagsControllerProps,
+} from './adapters';
+
 // Theming
-export { FieldFlowThemeProvider, useFieldFlowTheme, defaultTheme, darkTheme } from './theme';
-export type { FieldFlowThemeProviderProps } from './theme';
+export {
+  FieldFlowThemeProvider,
+  useFieldFlowTheme,
+  defaultTheme,
+  darkTheme,
+  themePresets,
+  getThemePreset,
+} from './theme';
+export type { FieldFlowThemeProviderProps, FieldFlowThemePresetName } from './theme';
+
+// Motion
+export { useFieldMotion, useReducedMotion } from './motion';
+export type { UseFieldMotionOptions, UseFieldMotionResult } from './motion';
 
 // Hooks
-export { useFieldFlowForm, useKeyboardManager, useFieldState } from './hooks';
+export {
+  useFieldFlowForm,
+  useKeyboardManager,
+  useFieldState,
+  useFormIntelligence,
+  useFieldFlowArray,
+  useFieldFlowDraft,
+  useFieldFlowSteps,
+  useFieldFlowDirtyGuard,
+} from './hooks';
 export type {
   UseFieldFlowFormOptions,
   UseFieldFlowFormResult,
   FieldFlowFormRules,
+  AsyncFieldValidator,
+  AsyncFieldValidators,
+  CrossFieldRule,
+  FieldConditionFn,
+  FieldConditionConfig,
+  FieldConditions,
+  FieldVisibilityState,
   UseKeyboardManagerOptions,
   UseKeyboardManagerResult,
   UseFieldStateOptions,
+  UseFormIntelligenceResult,
+  UseFieldFlowArrayOptions,
+  UseFieldFlowArrayResult,
+  FieldFlowDraftStorage,
+  FieldFlowDraftPayload,
+  UseFieldFlowDraftOptions,
+  UseFieldFlowDraftResult,
+  FieldFlowStepDefinition,
+  UseFieldFlowStepsOptions,
+  UseFieldFlowStepsResult,
+  UseFieldFlowDirtyGuardOptions,
+  UseFieldFlowDirtyGuardResult,
 } from './hooks';
 
+// i18n
+export {
+  validationMessageCatalogs,
+  getValidationMessages,
+  createValidationMessages,
+} from './i18n';
+export type { FieldFlowLocale, FieldFlowValidationMessages } from './i18n';
+
+// Phone helpers
+export {
+  DEFAULT_COUNTRY_DIALS,
+  findCountryByCode,
+  composeE164,
+} from './utils/phoneCountries';
+export type { FieldFlowCountryDial } from './utils/phoneCountries';
+
 // Validation
 export {
   useValidation,
@@ -48,12 +189,71 @@ export {
   minLengthValidator,
   maxLengthValidator,
   patternValidator,
+  zodToFormErrors,
+  zodFormValidate,
+  createZodSubmitGuard,
+  fieldRulesFromZodString,
 } from './validation';
-export type { UseValidationResult } from './validation';
+export type { UseValidationResult, ZodSchemaLike, ZodIssueLike, ZodErrorLike } from './validation';
+
+// Masks
+export {
+  applyMask,
+  applyPattern,
+  formatMasked,
+  unmask,
+  digitsOnly,
+  applyPhoneMask,
+  applyCardMask,
+  applyDateMask,
+  applyCurrencyMask,
+} from './utils/masks';
+export type { FieldFlowMaskType, MaskResult, ApplyMaskOptions } from './utils/masks';
+
+// Affordance helpers
+export {
+  applyEmailDomainSuggestion,
+  applyPhoneDialSuggestion,
+  applyCurrencySymbolSuggestion,
+  applyAffordanceSuggestion,
+  resolveAffordanceChips,
+  emailDomainsToChips,
+  affordanceKindFromFieldType,
+  DEFAULT_EMAIL_DOMAINS,
+  DEFAULT_PHONE_DIAL_CODES,
+  DEFAULT_CURRENCY_SYMBOLS,
+} from './utils/affordance';
+export type { FieldFlowAffordanceKind, FieldFlowAffordanceChip } from './utils/affordance';
+
+// Password strength
+export {
+  evaluatePasswordStrength,
+  DEFAULT_PASSWORD_RULES,
+  PASSWORD_STRENGTH_COLORS,
+} from './utils/passwordStrength';
+export type {
+  PasswordStrengthLevel,
+  PasswordStrengthRule,
+  PasswordStrengthResult,
+} from './utils/passwordStrength';
+
+// Form intelligence / a11y
+export {
+  focusFirstError,
+  announceForAccessibility,
+  buildValidationAnnouncement,
+  setAccessibilityFocus,
+} from './intelligence';
+export type {
+  FieldRefMap,
+  FieldFrictionStats,
+  FormHealthReport,
+  FormIntelligenceOptions,
+} from './intelligence';
 
-// Icons (in case consumers want to reuse FieldFlow's built-in icon set elsewhere)
-export { FieldFlowIcon } from './icons';
-export type { FieldFlowIconName, FieldFlowIconProps } from './icons';
+// Icons
+export { FieldFlowIcon, renderFieldFlowIcon } from './icons';
+export type { FieldFlowIconName, FieldFlowIconProps, FieldFlowIconSource } from './icons';
 
 // Types
 export type {
@@ -61,6 +261,7 @@ export type {
   FieldFlowState,
   FieldFlowRules,
   FieldFlowOption,
+  FieldFlowVariant,
   ValidationResult,
   Validator,
   FieldFlowColors,

package/src/intelligence/formAccessibility.ts

@@ -0,0 +1,87 @@
+import { AccessibilityInfo, findNodeHandle, type TextInput } from 'react-native';
+
+export type FieldRefMap<T extends string = string> = Partial<
+  Record<T, { current: TextInput | null } | TextInput | null>
+>;
+
+function resolveNode(ref: FieldRefMap[string]): TextInput | null {
+  if (!ref) return null;
+  if (typeof ref === 'object' && 'current' in ref) return ref.current ?? null;
+  return ref;
+}
+
+/**
+ * Focus the first field (in `order` or object key order) that has an error.
+ * Returns the field key that was focused, or `undefined` if none.
+ */
+export function focusFirstError<T extends string>(
+  errors: Partial<Record<T, string | undefined>>,
+  refs: FieldRefMap<T>,
+  order?: T[],
+): T | undefined {
+  const keys = order ?? (Object.keys(errors) as T[]);
+  for (const key of keys) {
+    if (!errors[key]) continue;
+    const node = resolveNode(refs[key]);
+    if (node && typeof node.focus === 'function') {
+      node.focus();
+      return key;
+    }
+  }
+  // Fallback: any field with an error that has a ref, even if not in order
+  for (const key of Object.keys(errors) as T[]) {
+    if (!errors[key]) continue;
+    const node = resolveNode(refs[key]);
+    if (node && typeof node.focus === 'function') {
+      node.focus();
+      return key;
+    }
+  }
+  return undefined;
+}
+
+/** Announce a short message to VoiceOver / TalkBack when available. */
+export function announceForAccessibility(message: string): void {
+  if (!message) return;
+  try {
+    AccessibilityInfo.announceForAccessibility(message);
+  } catch {
+    // Older RN / platforms without announce support — silently ignore.
+  }
+}
+
+/**
+ * Build a concise announcement for failed validation, e.g.
+ * "Form has 2 errors. Email is required."
+ */
+export function buildValidationAnnouncement(
+  errors: Partial<Record<string, string | undefined>>,
+): string {
+  const entries = Object.entries(errors).filter(([, msg]) => Boolean(msg)) as Array<
+    [string, string]
+  >;
+  if (entries.length === 0) return '';
+  const [firstField, firstMessage] = entries[0];
+  if (entries.length === 1) {
+    return `${formatFieldName(firstField)}: ${firstMessage}`;
+  }
+  return `Form has ${entries.length} errors. ${formatFieldName(firstField)}: ${firstMessage}`;
+}
+
+function formatFieldName(field: string): string {
+  return field
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/[_-]/g, ' ')
+    .replace(/^\w/, c => c.toUpperCase())
+    .trim();
+}
+
+/** Best-effort: mark a native view as accessibility-focused (Android). */
+export function setAccessibilityFocus(ref: { current: TextInput | null } | TextInput | null): void {
+  const node = resolveNode(ref);
+  if (!node) return;
+  const handle = findNodeHandle(node);
+  if (handle != null) {
+    AccessibilityInfo.setAccessibilityFocus?.(handle);
+  }
+}

package/src/intelligence/index.ts

@@ -0,0 +1,12 @@
+export {
+  focusFirstError,
+  announceForAccessibility,
+  buildValidationAnnouncement,
+  setAccessibilityFocus,
+} from './formAccessibility';
+export type { FieldRefMap } from './formAccessibility';
+export type {
+  FieldFrictionStats,
+  FormHealthReport,
+  FormIntelligenceOptions,
+} from './types';

package/src/intelligence/types.ts

@@ -0,0 +1,34 @@
+export interface FieldFrictionStats {
+  focusCount: number;
+  /** Cumulative milliseconds the field was focused. */
+  totalFocusMs: number;
+  errorCount: number;
+  changeCount: number;
+  blurCount: number;
+  lastFocusedAt?: number;
+  /** Running focus session start (ms since epoch); cleared on blur. */
+  focusStartedAt?: number;
+}
+
+export interface FormHealthReport {
+  /** Wall-clock ms from first interaction to this report. */
+  sessionMs: number;
+  submitAttempts: number;
+  successfulSubmits: number;
+  fields: Record<string, FieldFrictionStats>;
+  /**
+   * Fields sorted by estimated friction (errors × 3 + focusCount + changeCount / 10).
+   * Useful for product analytics / debugging onboarding drop-off.
+   */
+  mostFriction: Array<{ field: string; score: number }>;
+  generatedAt: number;
+}
+
+export interface FormIntelligenceOptions {
+  /** Called whenever a new report is produced (submit attempt, or `flush()`). */
+  onReport?: (report: FormHealthReport) => void;
+  /** When true (default), failed submit focuses & announces the first invalid field. */
+  focusFirstError?: boolean;
+  /** Announce errors via `AccessibilityInfo.announceForAccessibility`. Default: true. */
+  announceErrors?: boolean;
+}

package/src/motion/index.ts

@@ -0,0 +1,3 @@
+export { useReducedMotion } from './useReducedMotion';
+export { useFieldMotion } from './useFieldMotion';
+export type { UseFieldMotionOptions, UseFieldMotionResult } from './useFieldMotion';

package/src/motion/useFieldMotion.ts

@@ -0,0 +1,120 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { useReducedMotion } from './useReducedMotion';
+
+export interface UseFieldMotionOptions {
+  /** Master switch. Default: true. */
+  enabled?: boolean;
+  isFocused: boolean;
+  hasError: boolean;
+  isSuccess?: boolean;
+  /** Base duration from theme. */
+  duration?: number;
+}
+
+export interface UseFieldMotionResult {
+  /** Apply to the field chrome (input container). */
+  containerStyle: {
+    transform: Array<{ translateX: Animated.AnimatedInterpolation<string | number> }>;
+  };
+  /** Soft focus glow overlay opacity (0–1). */
+  glowOpacity: Animated.Value;
+  /** Footer message fade. */
+  messageOpacity: Animated.Value;
+  /** Success check scale pop. */
+  successScale: Animated.Value;
+  reducedMotion: boolean;
+}
+
+/**
+ * Field micro-interactions: error shake, focus glow, message cross-fade, success pop.
+ * Uses RN Animated only (no Reanimated) and respects Reduce Motion.
+ */
+export function useFieldMotion({
+  enabled = true,
+  isFocused,
+  hasError,
+  isSuccess,
+  duration = 180,
+}: UseFieldMotionOptions): UseFieldMotionResult {
+  const reducedMotion = useReducedMotion();
+  const active = enabled && !reducedMotion;
+
+  const shake = useRef(new Animated.Value(0)).current;
+  const glowOpacity = useRef(new Animated.Value(0)).current;
+  const messageOpacity = useRef(new Animated.Value(1)).current;
+  const successScale = useRef(new Animated.Value(1)).current;
+  const prevError = useRef(hasError);
+
+  // Focus glow
+  useEffect(() => {
+    if (!active) {
+      glowOpacity.setValue(isFocused ? 0.35 : 0);
+      return;
+    }
+    Animated.timing(glowOpacity, {
+      toValue: isFocused ? 1 : 0,
+      duration,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [active, isFocused, glowOpacity, duration]);
+
+  // Error shake when error turns on
+  useEffect(() => {
+    const justErrored = hasError && !prevError.current;
+    prevError.current = hasError;
+    if (!justErrored) return;
+
+    if (!active) return;
+
+    shake.setValue(0);
+    Animated.sequence([
+      Animated.timing(shake, { toValue: 1, duration: 40, useNativeDriver: true }),
+      Animated.timing(shake, { toValue: -1, duration: 40, useNativeDriver: true }),
+      Animated.timing(shake, { toValue: 1, duration: 40, useNativeDriver: true }),
+      Animated.timing(shake, { toValue: -1, duration: 40, useNativeDriver: true }),
+      Animated.timing(shake, { toValue: 0, duration: 40, useNativeDriver: true }),
+    ]).start();
+
+    messageOpacity.setValue(0);
+    Animated.timing(messageOpacity, {
+      toValue: 1,
+      duration: duration + 40,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [hasError, active, shake, messageOpacity, duration]);
+
+  // Success pop
+  useEffect(() => {
+    if (!isSuccess) {
+      successScale.setValue(1);
+      return;
+    }
+    if (!active) return;
+    successScale.setValue(0.6);
+    Animated.spring(successScale, {
+      toValue: 1,
+      friction: 5,
+      tension: 140,
+      useNativeDriver: true,
+    }).start();
+  }, [isSuccess, active, successScale]);
+
+  const translateX = shake.interpolate({
+    inputRange: [-1, 0, 1],
+    outputRange: [-6, 0, 6],
+  });
+
+  return useMemo(
+    () => ({
+      containerStyle: { transform: [{ translateX }] },
+      glowOpacity,
+      messageOpacity,
+      successScale,
+      reducedMotion,
+    }),
+    [translateX, glowOpacity, messageOpacity, successScale, reducedMotion],
+  );
+}

package/src/motion/useReducedMotion.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+/**
+ * Tracks the OS “Reduce Motion” preference so FieldFlow can skip decorative animation.
+ */
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled?.()
+      .then(value => {
+        if (mounted) setReduced(Boolean(value));
+      })
+      .catch(() => {
+        /* older RN */
+      });
+
+    const sub = AccessibilityInfo.addEventListener?.('reduceMotionChanged', setReduced);
+    return () => {
+      mounted = false;
+      // RN versions differ: subscription may be `{ remove }` or a legacy remover fn
+      if (sub && typeof (sub as { remove?: () => void }).remove === 'function') {
+        (sub as { remove: () => void }).remove();
+      }
+    };
+  }, []);
+
+  return reduced;
+}

package/src/theme/index.ts

@@ -1,3 +1,5 @@
 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';

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/index.ts

@@ -7,8 +7,13 @@ export interface FieldFlowOption {
   disabled?: boolean;
   /** Optional secondary line of text shown under the label in the option list. */
   description?: string;
+  /** Built-in icon name or a custom React node shown beside the option. */
+  icon?: import('../icons').FieldFlowIconSource;
 }
 
+/** Visual style for text-like FieldFlow fields. */
+export type FieldFlowVariant = 'outlined' | 'filled' | 'underline' | 'floating';
+
 export type FieldFlowFieldType =
   | 'text'
   | 'email'