rn-inputforge 0.5.0 → 0.5.1

package/src/components/FieldFlowAuthActions/FieldFlowAuthActions.tsx

@@ -0,0 +1,146 @@
+import React, { useMemo } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { renderFieldFlowIcon, type FieldFlowIconSource } from '../../icons';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export type FieldFlowAuthProvider = 'passkey' | 'apple' | 'google' | 'biometric' | string;
+
+export interface FieldFlowAuthAction {
+  id: FieldFlowAuthProvider;
+  label: string;
+  icon?: FieldFlowIconSource;
+  onPress: () => void | Promise<void>;
+  disabled?: boolean;
+}
+
+export interface FieldFlowAuthActionsProps {
+  actions: FieldFlowAuthAction[];
+  title?: string;
+  /** Divider text between auth strip and password form. Default: "or continue with email". */
+  dividerLabel?: string;
+  loadingId?: string | null;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Auth action strip for passkey / SSO / biometric — place above password fields.
+ * All providers are injected; FieldFlow only themes the chrome.
+ */
+export function FieldFlowAuthActions({
+  actions,
+  title = 'Sign in faster',
+  dividerLabel = 'or continue with email',
+  loadingId,
+  containerStyle,
+  titleStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowAuthActionsProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  if (!actions.length) return null;
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {title ? <Text style={[styles.title, titleStyle]}>{title}</Text> : null}
+      <View style={styles.row}>
+        {actions.map(action => {
+          const loading = loadingId === action.id;
+          return (
+            <Pressable
+              key={action.id}
+              style={[styles.btn, (action.disabled || loading) && styles.btnDisabled]}
+              disabled={action.disabled || loading}
+              onPress={() => void action.onPress()}
+              accessibilityRole="button"
+              accessibilityLabel={action.label}
+            >
+              {loading ? (
+                <ActivityIndicator size="small" color={theme.colors.borderFocused} />
+              ) : (
+                <>
+                  {action.icon
+                    ? renderFieldFlowIcon(action.icon, theme.colors.text, 18)
+                    : null}
+                  <Text style={styles.btnLabel} numberOfLines={1}>
+                    {action.label}
+                  </Text>
+                </>
+              )}
+            </Pressable>
+          );
+        })}
+      </View>
+      {dividerLabel ? (
+        <View style={styles.dividerRow}>
+          <View style={styles.line} />
+          <Text style={styles.divider}>{dividerLabel}</Text>
+          <View style={styles.line} />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap * 2 },
+    title: {
+      fontSize: theme.typography.labelFontSize,
+      color: theme.colors.label,
+      fontWeight: '500',
+      marginBottom: theme.spacing.gap,
+      textAlign: 'center',
+    },
+    row: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, justifyContent: 'center' },
+    btn: {
+      flexGrow: 1,
+      minWidth: '30%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+      paddingVertical: 12,
+      paddingHorizontal: 12,
+      borderRadius: theme.spacing.borderRadius,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      backgroundColor: theme.colors.background,
+    },
+    btnDisabled: { opacity: 0.5 },
+    btnLabel: {
+      fontSize: theme.typography.helperFontSize + 1,
+      fontWeight: '600',
+      color: theme.colors.text,
+    },
+    dividerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: theme.spacing.gap * 1.5,
+      gap: 10,
+    },
+    line: { flex: 1, height: StyleSheet.hairlineWidth, backgroundColor: theme.colors.border },
+    divider: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+    },
+  });
+}

package/src/components/FieldFlowAuthActions/index.ts

@@ -0,0 +1,6 @@
+export { FieldFlowAuthActions } from './FieldFlowAuthActions';
+export type {
+  FieldFlowAuthActionsProps,
+  FieldFlowAuthAction,
+  FieldFlowAuthProvider,
+} from './FieldFlowAuthActions';

package/src/components/FieldFlowCompleteness/FieldFlowCompleteness.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+export interface FieldFlowCompletenessViewModel {
+  remaining: number;
+  percent: number;
+  progress: number;
+  isComplete: boolean;
+  estimatedSecondsLeft: number;
+}
+
+export interface FieldFlowCompletenessProps {
+  /** Pass result from `useFieldFlowCompleteness` (any form value shape). */
+  completeness: FieldFlowCompletenessViewModel;
+  title?: string;
+  /** Show “~Ns left” estimate. Default: true. */
+  showEstimate?: boolean;
+  /** Custom remaining copy. */
+  formatRemaining?: (remaining: number) => string;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowCompleteness({
+  completeness,
+  title = 'Form progress',
+  showEstimate = true,
+  formatRemaining,
+  containerStyle,
+  titleStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowCompletenessProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const remainingCopy =
+    formatRemaining?.(completeness.remaining) ??
+    (completeness.isComplete
+      ? 'All set'
+      : `${completeness.remaining} field${completeness.remaining === 1 ? '' : 's'} left`);
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID} accessibilityRole="progressbar">
+      <View style={styles.header}>
+        <Text style={[styles.title, titleStyle]}>{title}</Text>
+        <Text style={styles.percent}>{completeness.percent}%</Text>
+      </View>
+      <View style={styles.track}>
+        <View style={[styles.fill, { flex: Math.max(0.001, completeness.progress) }]} />
+        <View style={{ flex: Math.max(0.001, 1 - completeness.progress) }} />
+      </View>
+      <Text style={styles.meta}>
+        {remainingCopy}
+        {showEstimate && !completeness.isComplete
+          ? ` · ~${completeness.estimatedSecondsLeft}s`
+          : ''}
+      </Text>
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrap: {
+      marginBottom: theme.spacing.gap * 2,
+      padding: theme.spacing.paddingHorizontal,
+      borderRadius: theme.spacing.borderRadius + 2,
+      backgroundColor: theme.colors.backgroundDisabled,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+    },
+    header: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },
+    title: {
+      fontSize: theme.typography.helperFontSize + 1,
+      fontWeight: '600',
+      color: theme.colors.text,
+    },
+    percent: {
+      fontSize: theme.typography.helperFontSize + 1,
+      fontWeight: '700',
+      color: theme.colors.borderFocused,
+    },
+    track: {
+      flexDirection: 'row',
+      height: 6,
+      borderRadius: 3,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.border,
+    },
+    fill: {
+      backgroundColor: theme.colors.borderFocused,
+      borderRadius: 3,
+    },
+    meta: {
+      marginTop: 8,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+    },
+  });
+}

package/src/components/FieldFlowCompleteness/index.ts

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

package/src/components/FieldFlowFormHeader/FieldFlowFormHeader.tsx

@@ -0,0 +1,106 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { surfaceShadow } from '../../theme/appearance';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowFormHeaderProps {
+  title: string;
+  subtitle?: string;
+  /** Optional illustration / logo node. */
+  illustration?: React.ReactNode;
+  /** 0–1 progress under the header. */
+  progress?: number;
+  /** Soft elevated card chrome. Default: true. */
+  elevated?: boolean;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  subtitleStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Calm visual intro for a form screen — title, subtitle, illustration, optional progress.
+ */
+export function FieldFlowFormHeader({
+  title,
+  subtitle,
+  illustration,
+  progress,
+  elevated = true,
+  containerStyle,
+  titleStyle,
+  subtitleStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowFormHeaderProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme, elevated), [theme, elevated]);
+  const clamped = progress == null ? null : Math.min(1, Math.max(0, progress));
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {illustration ? <View style={styles.illustration}>{illustration}</View> : null}
+      <Text style={[styles.title, titleStyle]}>{title}</Text>
+      {subtitle ? <Text style={[styles.subtitle, subtitleStyle]}>{subtitle}</Text> : null}
+      {clamped != null ? (
+        <View style={styles.track}>
+          <View style={[styles.fill, { flex: Math.max(0.001, clamped) }]} />
+          <View style={{ flex: Math.max(0.001, 1 - clamped) }} />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, elevated: boolean) {
+  return StyleSheet.create({
+    wrap: {
+      marginBottom: theme.spacing.gap * 2.5,
+      padding: theme.spacing.paddingHorizontal + 4,
+      borderRadius: theme.spacing.borderRadius + 4,
+      backgroundColor: elevated
+        ? theme.colors.surfaceElevated ?? theme.colors.background
+        : 'transparent',
+      borderWidth: elevated ? StyleSheet.hairlineWidth : 0,
+      borderColor: theme.colors.border,
+      ...(elevated ? surfaceShadow('soft') ?? {} : null),
+    },
+    illustration: {
+      marginBottom: theme.spacing.gap * 1.5,
+      alignItems: 'flex-start',
+    },
+    title: {
+      fontSize: theme.typography.fontSize + 8,
+      fontWeight: '700',
+      color: theme.colors.text,
+      letterSpacing: -0.3,
+      fontFamily: theme.typography.fontFamily,
+    },
+    subtitle: {
+      marginTop: 6,
+      fontSize: theme.typography.helperFontSize + 1,
+      color: theme.colors.label,
+      lineHeight: theme.typography.helperFontSize + 8,
+      fontFamily: theme.typography.fontFamily,
+    },
+    track: {
+      flexDirection: 'row',
+      height: 4,
+      borderRadius: 2,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.backgroundDisabled,
+      marginTop: theme.spacing.gap * 1.5,
+    },
+    fill: {
+      backgroundColor: theme.colors.borderFocused,
+      borderRadius: 2,
+    },
+  });
+}

package/src/components/FieldFlowFormHeader/index.ts

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

package/src/components/FieldFlowInfoTip/FieldFlowInfoTip.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Modal,
+  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 FieldFlowInfoTipProps {
+  /** Tip body shown in the popover. */
+  tip: string;
+  title?: string;
+  /** Accessible name for the ? button. */
+  accessibilityLabel?: string;
+  containerStyle?: ViewStyle;
+  tipStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Soft “?” tip beside a label — keeps forms calm without permanent helper clutter.
+ */
+export function FieldFlowInfoTip({
+  tip,
+  title = 'About this field',
+  accessibilityLabel = 'More information',
+  containerStyle,
+  tipStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowInfoTipProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={containerStyle} testID={testID}>
+      <Pressable
+        onPress={() => setOpen(true)}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        style={styles.trigger}
+      >
+        {renderFieldFlowIcon('info', theme.colors.info, 14)}
+      </Pressable>
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable style={styles.backdrop} onPress={() => setOpen(false)} />
+        <View style={styles.sheet} accessibilityRole="summary">
+          <Text style={styles.title}>{title}</Text>
+          <Text style={[styles.body, tipStyle]}>{tip}</Text>
+          <Pressable onPress={() => setOpen(false)} style={styles.done} accessibilityRole="button">
+            <Text style={styles.doneText}>Got it</Text>
+          </Pressable>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    trigger: {
+      width: 22,
+      height: 22,
+      borderRadius: 11,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: `${theme.colors.info}18`,
+    },
+    backdrop: {
+      ...StyleSheet.absoluteFill,
+      backgroundColor: 'rgba(0,0,0,0.35)',
+    },
+    sheet: {
+      position: 'absolute',
+      left: 24,
+      right: 24,
+      top: '32%',
+      padding: 18,
+      borderRadius: theme.spacing.borderRadius + 4,
+      backgroundColor: theme.colors.surfaceElevated ?? theme.colors.background,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+    },
+    title: {
+      fontSize: theme.typography.fontSize,
+      fontWeight: '700',
+      color: theme.colors.text,
+      marginBottom: 8,
+    },
+    body: {
+      fontSize: theme.typography.helperFontSize + 1,
+      color: theme.colors.label,
+      lineHeight: theme.typography.helperFontSize + 8,
+      marginBottom: 16,
+    },
+    done: {
+      alignSelf: 'flex-end',
+      paddingHorizontal: 14,
+      paddingVertical: 8,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: theme.colors.borderFocused,
+    },
+    doneText: { color: '#fff', fontWeight: '700', fontSize: theme.typography.helperFontSize + 1 },
+  });
+}

package/src/components/FieldFlowInfoTip/index.ts

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

package/src/components/FieldFlowInlineAlert/FieldFlowInlineAlert.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, 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 { useReducedMotion } from '../../motion/useReducedMotion';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export type FieldFlowAlertTone = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+
+export interface FieldFlowInlineAlertProps {
+  tone?: FieldFlowAlertTone;
+  title?: string;
+  message: string;
+  /** Soft enter animation. Default: true. */
+  animated?: boolean;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  messageStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Calm inline banner — tips, soft warnings, success notes.
+ * Easy on the eyes; themeable tones.
+ */
+export function FieldFlowInlineAlert({
+  tone = 'info',
+  title,
+  message,
+  animated = true,
+  containerStyle,
+  titleStyle,
+  messageStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowInlineAlertProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const reducedMotion = useReducedMotion();
+  const opacity = useRef(new Animated.Value(animated && !reducedMotion ? 0 : 1)).current;
+  const translate = useRef(new Animated.Value(animated && !reducedMotion ? 6 : 0)).current;
+
+  useEffect(() => {
+    if (!animated || reducedMotion) return;
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.animation.duration + 80,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(translate, {
+        toValue: 0,
+        duration: theme.animation.duration + 80,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [animated, reducedMotion, opacity, translate, theme.animation.duration]);
+
+  const palette = toneColors(theme, tone);
+  const styles = useMemo(() => createStyles(theme, palette), [theme, palette]);
+  const icon =
+    tone === 'success' ? 'check' : tone === 'error' || tone === 'warning' ? 'alert' : 'info';
+
+  return (
+    <Animated.View
+      style={[styles.wrap, containerStyle, { opacity, transform: [{ translateY: translate }] }]}
+      testID={testID}
+      accessibilityRole="text"
+    >
+      <View style={styles.icon}>{renderFieldFlowIcon(icon, palette.fg, 16)}</View>
+      <View style={styles.copy}>
+        {title ? <Text style={[styles.title, titleStyle]}>{title}</Text> : null}
+        <Text style={[styles.message, messageStyle]}>{message}</Text>
+      </View>
+    </Animated.View>
+  );
+}
+
+function toneColors(theme: FieldFlowTheme, tone: FieldFlowAlertTone) {
+  switch (tone) {
+    case 'success':
+      return { fg: theme.colors.success, bg: softBg(theme.colors.success) };
+    case 'warning':
+      return { fg: theme.colors.warning, bg: softBg(theme.colors.warning) };
+    case 'error':
+      return { fg: theme.colors.error, bg: softBg(theme.colors.error) };
+    case 'neutral':
+      return { fg: theme.colors.label, bg: theme.colors.surfaceMuted };
+    case 'info':
+    default:
+      return { fg: theme.colors.info, bg: softBg(theme.colors.info) };
+  }
+}
+
+function softBg(hex: string): string {
+  // Simple alpha wash without color lib — works for #RRGGBB
+  if (hex.startsWith('#') && hex.length === 7) return `${hex}18`;
+  return hex;
+}
+
+function createStyles(theme: FieldFlowTheme, palette: { fg: string; bg: string }) {
+  return StyleSheet.create({
+    wrap: {
+      flexDirection: 'row',
+      gap: 10,
+      padding: theme.spacing.paddingHorizontal,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: palette.bg,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: `${palette.fg}33`,
+      marginBottom: theme.spacing.gap * 2,
+    },
+    icon: { paddingTop: 2 },
+    copy: { flex: 1 },
+    title: {
+      fontSize: theme.typography.helperFontSize + 1,
+      fontWeight: '600',
+      color: palette.fg,
+      marginBottom: 2,
+    },
+    message: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.text,
+      lineHeight: theme.typography.helperFontSize + 6,
+    },
+  });
+}

package/src/components/FieldFlowInlineAlert/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowInlineAlert } from './FieldFlowInlineAlert';
+export type { FieldFlowInlineAlertProps, FieldFlowAlertTone } from './FieldFlowInlineAlert';