rn-inputforge 0.4.0 → 0.5.1

package/src/components/FieldFlowAffordance/FieldFlowAffordance.tsx

@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  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';
+import {
+  applyAffordanceSuggestion,
+  resolveAffordanceChips,
+  type FieldFlowAffordanceChip,
+  type FieldFlowAffordanceKind,
+} from '../../utils/affordance';
+
+export interface FieldFlowAffordanceProps {
+  /** Preset chip set. Ignored when `chips` is provided. */
+  kind?: FieldFlowAffordanceKind;
+  /** Explicit chips (strings or objects). Overrides `kind` defaults when non-empty. */
+  chips?: FieldFlowAffordanceChip[] | string[];
+  /** Current field value — used to compute the next value on chip press. */
+  value?: string;
+  /** Called with the updated field value after a chip is applied. */
+  onSelect: (nextValue: string, chip: FieldFlowAffordanceChip) => void;
+  /** Hide the bar entirely. Useful when the parent field is blurred. Default: false. */
+  hidden?: boolean;
+  /** When true, chips that would leave the value unchanged are still pressable. Default: true. */
+  allowNoop?: boolean;
+  containerStyle?: ViewStyle;
+  chipStyle?: ViewStyle;
+  chipTextStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Horizontal suggestion chips shown under (or near) a field — email domains,
+ * phone dial codes, currency symbols, or a fully custom chip list.
+ */
+export function FieldFlowAffordance({
+  kind = 'custom',
+  chips: chipsProp,
+  value = '',
+  onSelect,
+  hidden = false,
+  allowNoop = true,
+  containerStyle,
+  chipStyle,
+  chipTextStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowAffordanceProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const chips = useMemo(
+    () => resolveAffordanceChips(kind, chipsProp),
+    [kind, chipsProp],
+  );
+
+  if (hidden || chips.length === 0) return null;
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID} accessibilityRole="menu">
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={styles.row}
+      >
+        {chips.map((chip, index) => {
+          const next = applyAffordanceSuggestion(kind, value, chip);
+          const disabled = !allowNoop && next === value;
+          return (
+            <Pressable
+              key={`${chip.label}-${index}`}
+              onPress={() => onSelect(next, chip)}
+              disabled={disabled}
+              style={({ pressed }) => [
+                styles.chip,
+                pressed && styles.chipPressed,
+                disabled && styles.chipDisabled,
+                chipStyle,
+              ]}
+              accessibilityRole="button"
+              accessibilityLabel={chip.accessibilityLabel ?? chip.label}
+              accessibilityState={{ disabled }}
+            >
+              <Text style={[styles.chipText, chipTextStyle]} numberOfLines={1}>
+                {chip.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrapper: {
+      marginTop: theme.spacing.gap,
+      marginBottom: theme.spacing.gap / 2,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+      paddingRight: theme.spacing.paddingHorizontal,
+    },
+    chip: {
+      paddingHorizontal: 12,
+      paddingVertical: 7,
+      borderRadius: 999,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      backgroundColor: theme.colors.background,
+    },
+    chipPressed: {
+      borderColor: theme.colors.borderFocused,
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    chipDisabled: {
+      opacity: 0.4,
+    },
+    chipText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.text,
+      fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
+    },
+  });
+}

package/src/components/FieldFlowAffordance/index.ts

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

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/FieldFlowCreditCard/FieldFlowCreditCard.tsx

@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native';
+import { FieldFlowMaskedInput } from '../FieldFlowMaskedInput';
+import { FieldFlowInput } from '../FieldFlowInput';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowCreditCardValue {
+  number: string;
+  expiry: string;
+  cvc: string;
+  name?: string;
+}
+
+export interface FieldFlowCreditCardProps {
+  value: FieldFlowCreditCardValue;
+  onChange: (value: FieldFlowCreditCardValue) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  /** Per-field errors. */
+  errors?: Partial<Record<keyof FieldFlowCreditCardValue, string>>;
+  disabled?: boolean;
+  required?: boolean;
+  showName?: boolean;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+function formatExpiry(raw: string): string {
+  const digits = raw.replace(/\D/g, '').slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+}
+
+export function FieldFlowCreditCard({
+  value,
+  onChange,
+  label = 'Card details',
+  helperText,
+  errorText,
+  errors,
+  disabled,
+  required,
+  showName = false,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowCreditCardProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const patch = (partial: Partial<FieldFlowCreditCardValue>) => onChange({ ...value, ...partial });
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <FieldFlowMaskedInput
+        mask="card"
+        label="Card number"
+        leftIcon="creditCard"
+        value={value.number}
+        valueMode="raw"
+        onChangeText={(_formatted, raw) => patch({ number: raw })}
+        errorText={errors?.number}
+        disabled={disabled}
+        theme={themeOverride}
+      />
+
+      <View style={styles.row}>
+        <View style={styles.half}>
+          <FieldFlowInput
+            label="Expiry"
+            placeholder="MM/YY"
+            keyboardType="number-pad"
+            value={value.expiry}
+            onChangeText={text => patch({ expiry: formatExpiry(text) })}
+            maxLength={5}
+            errorText={errors?.expiry}
+            disabled={disabled}
+            leftIcon="calendar"
+            theme={themeOverride}
+          />
+        </View>
+        <View style={styles.half}>
+          <FieldFlowInput
+            label="CVC"
+            placeholder="123"
+            keyboardType="number-pad"
+            value={value.cvc}
+            onChangeText={text => patch({ cvc: text.replace(/\D/g, '').slice(0, 4) })}
+            maxLength={4}
+            errorText={errors?.cvc}
+            disabled={disabled}
+            leftIcon="lock"
+            secureTextEntry
+            theme={themeOverride}
+          />
+        </View>
+      </View>
+
+      {showName ? (
+        <FieldFlowInput
+          label="Name on card"
+          value={value.name ?? ''}
+          onChangeText={name => patch({ name })}
+          errorText={errors?.name}
+          disabled={disabled}
+          leftIcon="user"
+          autoCapitalize="words"
+          theme={themeOverride}
+        />
+      ) : null}
+
+      {errorText ? (
+        <Text style={styles.error}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={styles.helper}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap },
+    label: {
+      fontSize: theme.typography.fontSize + 1,
+      fontWeight: '600',
+      color: theme.colors.text,
+      marginBottom: theme.spacing.gap,
+    },
+    row: { flexDirection: 'row', gap: 12 },
+    half: { flex: 1 },
+    helper: { fontSize: theme.typography.helperFontSize, color: theme.colors.label, marginTop: -4 },
+    error: { fontSize: theme.typography.helperFontSize, color: theme.colors.error, marginTop: -4 },
+  });
+}

package/src/components/FieldFlowCreditCard/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowCreditCard } from './FieldFlowCreditCard';
+export type { FieldFlowCreditCardProps, FieldFlowCreditCardValue } from './FieldFlowCreditCard';