rn-inputforge 0.3.0 → 0.4.0

package/lib/typescript/utils/masks.d.ts

@@ -0,0 +1,37 @@
+export type FieldFlowMaskType = 'phone' | 'card' | 'currency' | 'date' | 'custom';
+export interface MaskResult {
+    /** Display value shown in the input. */
+    formatted: string;
+    /** Digits / raw value without mask characters (currency keeps decimal point). */
+    raw: string;
+}
+export interface ApplyMaskOptions {
+    /** Currency symbol prefix, e.g. "$" or "Rs ". Default: "$". */
+    currencySymbol?: string;
+    /** Max decimal places for currency. Default: 2. */
+    currencyDecimals?: number;
+    /** Custom mask pattern using `#` for digits. E.g. `(###) ###-####`. */
+    pattern?: string;
+}
+/** Strip everything except digits. */
+export declare function digitsOnly(value: string): string;
+/**
+ * Apply a digit pattern where `#` is a digit slot and any other char is literal.
+ * Extra digits beyond the pattern are ignored.
+ */
+export declare function applyPattern(rawDigits: string, pattern: string): MaskResult;
+export declare function applyPhoneMask(value: string): MaskResult;
+export declare function applyCardMask(value: string): MaskResult;
+export declare function applyDateMask(value: string): MaskResult;
+export declare function applyCurrencyMask(value: string, symbol?: string, decimals?: number): MaskResult;
+/**
+ * Format a value with a built-in or custom mask.
+ * Pass the previous formatted value's raw length context via the incoming `value`
+ * (the function always re-derives from the full string the user typed).
+ */
+export declare function applyMask(value: string, type: FieldFlowMaskType, options?: ApplyMaskOptions): MaskResult;
+/** Convenience: return only the formatted display string. */
+export declare function formatMasked(value: string, type: FieldFlowMaskType, options?: ApplyMaskOptions): string;
+/** Convenience: return only the raw (unmasked) value. */
+export declare function unmask(value: string, type: FieldFlowMaskType, options?: ApplyMaskOptions): string;
+//# sourceMappingURL=masks.d.ts.map

package/lib/typescript/utils/masks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masks.d.ts","sourceRoot":"","sources":["../../../src/utils/masks.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAElF,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,sCAAsC;AACtC,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,UAAU,CAY3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAUxD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAIvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAGvD;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,MAAM,SAAM,EACZ,QAAQ,SAAI,GACX,UAAU,CAqBZ;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,iBAAiB,EACvB,OAAO,GAAE,gBAAqB,GAC7B,UAAU,CAkBZ;AAED,6DAA6D;AAC7D,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,iBAAiB,EACvB,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAER;AAED,yDAAyD;AACzD,wBAAgB,MAAM,CACpB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,iBAAiB,EACvB,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAER"}

package/lib/typescript/validation/index.d.ts

@@ -1,4 +1,6 @@
 export { isValidEmail, isValidNumber, isValidPhone, requiredValidator, emailValidator, numberValidator, phoneValidator, minLengthValidator, maxLengthValidator, patternValidator, runRules, } from './validators';
 export { useValidation } from './useValidation';
 export type { UseValidationResult } from './useValidation';
+export { zodToFormErrors, zodFormValidate, createZodSubmitGuard, fieldRulesFromZodString, } from './zodAdapter';
+export type { ZodSchemaLike, ZodIssueLike, ZodErrorLike } from './zodAdapter';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/validation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/validation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/validation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EACL,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC"}

package/lib/typescript/validation/zodAdapter.d.ts

@@ -0,0 +1,53 @@
+import type { FieldFlowRules } from '../types';
+/**
+ * Minimal structural types so consumers can pass a Zod schema without
+ * rn-inputforge taking a hard dependency on `zod`.
+ */
+export interface ZodIssueLike {
+    path: (string | number)[];
+    message: string;
+}
+export interface ZodErrorLike {
+    issues: ZodIssueLike[];
+}
+export interface ZodSchemaLike<T = unknown> {
+    safeParse: (data: unknown) => {
+        success: true;
+        data: T;
+    } | {
+        success: false;
+        error: ZodErrorLike;
+    };
+}
+/**
+ * Convert a Zod schema parse failure into FieldFlow form errors
+ * (first message per top-level field).
+ */
+export declare function zodToFormErrors<T extends Record<string, string>>(schema: ZodSchemaLike<T>, values: T): Partial<Record<keyof T, string>>;
+/**
+ * Drop into `useFieldFlowForm({ formValidate: zodFormValidate(schema) })`.
+ */
+export declare function zodFormValidate<T extends Record<string, string>>(schema: ZodSchemaLike<T>): (values: T) => Partial<Record<keyof T, string>>;
+/**
+ * Wrap an `onSubmit` so it only runs when Zod passes.
+ * Useful if you keep FieldFlow rules for UX and Zod as the final gate.
+ */
+export declare function createZodSubmitGuard<T extends Record<string, string>>(schema: ZodSchemaLike<T>, onValid: (values: T) => void | Promise<void>, onInvalid?: (errors: Partial<Record<keyof T, string>>) => void): (values: T) => Promise<void>;
+/**
+ * Best-effort map of a Zod string schema onto declarative `FieldFlowRules`.
+ * Supports required / email / min / max / regex. For refinements and objects,
+ * use `zodFormValidate` instead.
+ */
+export declare function fieldRulesFromZodString(zodStringSchema: {
+    _def?: {
+        typeName?: string;
+        checks?: Array<{
+            kind: string;
+            value?: unknown;
+            regex?: RegExp;
+            message?: string;
+        }>;
+    };
+    isOptional?: () => boolean;
+}): FieldFlowRules;
+//# sourceMappingURL=zodAdapter.d.ts.map

package/lib/typescript/validation/zodAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zodAdapter.d.ts","sourceRoot":"","sources":["../../../src/validation/zodAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,YAAY,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,OAAO;IACxC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,CAAC,CAAA;KAAE,GAAG;QAAE,OAAO,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,YAAY,CAAA;KAAE,CAAC;CACpG;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9D,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EACxB,MAAM,EAAE,CAAC,GACR,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAYlC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,IAChF,QAAQ,CAAC,sCAClB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACnE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EACxB,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAC5C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,IAAI,IAEhD,QAAQ,CAAC,mBAQxB;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,eAAe,EAAE;IACvD,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,OAAO,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACrF,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;CAC5B,GAAG,cAAc,CAyBjB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-inputforge",
-  "version": "0.3.0",
-  "description": "A production-ready, highly customizable input field system for React Native (bare CLI) — text/email/number/phone/password/search fields, description fields, chat input, and a single/multi-select dropdown (bottom sheet, popup, or inline), with built-in validation, theming, icons, and keyboard-aware form navigation.",
+  "version": "0.4.0",
+  "description": "A production-ready, highly customizable input field system for React Native (bare CLI & Expo) — text/email/number/phone/password/search, OTP, masked inputs, date/time picker, checkbox/radio/switch, description, chat input, and single/multi-select dropdown, with variants, built-in icons, validation (async, cross-field, Zod), theming, and keyboard-aware form navigation.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -33,20 +33,42 @@
     "form",
     "form-builder",
     "chat-input",
+    "otp",
+    "pin",
+    "masked-input",
+    "checkbox",
+    "radio",
+    "switch",
     "dropdown",
     "select",
     "multi-select",
     "bottom-sheet",
     "keyboard-aware",
     "validation",
+    "zod",
     "typescript",
+    "expo",
     "bare-react-native-cli"
   ],
-  "author": "Your Name <you@example.com>",
+  "author": "Saad Waheed Khan",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/saadwaheed10/rn-inputforge.git"
+  },
+  "homepage": "https://github.com/saadwaheed10/rn-inputforge#readme",
+  "bugs": {
+    "url": "https://github.com/saadwaheed10/rn-inputforge/issues"
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-native": ">=0.73.0"
+    "react-native": ">=0.73.0",
+    "zod": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@react-native/eslint-config": "^0.81.0",
@@ -55,7 +77,7 @@
     "prettier": "^3.4.2",
     "react": "19.2.8",
     "react-native": "0.86.2",
-    "react-native-builder-bob": "^0.41.0",
+    "react-native-builder-bob": "^0.43.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.7.3"
   },

package/src/components/FieldFlowCheckbox/FieldFlowCheckbox.tsx

@@ -0,0 +1,174 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View, ViewStyle, TextStyle } 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 interface FieldFlowCheckboxProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** Position of the label relative to the box. Default: 'right'. */
+  labelPosition?: 'left' | 'right';
+  /** Icon shown when checked. Default: 'check'. Pass a custom node to fully replace. */
+  checkedIcon?: FieldFlowIconSource;
+  /** Optional icon shown when unchecked. */
+  uncheckedIcon?: FieldFlowIconSource;
+  /** Icon beside the label (leading). */
+  leftIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  /** Checked box / icon tint. Defaults to theme borderFocused. */
+  checkedColor?: string;
+  /** Unchecked border color. */
+  uncheckedColor?: string;
+  boxSize?: number;
+  boxStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  errorStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowCheckbox({
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  labelPosition = 'right',
+  checkedIcon = 'check',
+  uncheckedIcon,
+  leftIcon,
+  iconSize = 14,
+  checkedColor,
+  uncheckedColor,
+  boxSize = 22,
+  boxStyle,
+  containerStyle,
+  labelStyle,
+  helperStyle,
+  errorStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowCheckboxProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(
+    () => createStyles(theme, Boolean(errorText), Boolean(disabled), boxSize),
+    [theme, errorText, disabled, boxSize],
+  );
+  const checked = Boolean(value);
+  const activeColor = checkedColor ?? theme.colors.borderFocused;
+  const idleColor = uncheckedColor ?? (errorText ? theme.colors.borderError : theme.colors.border);
+
+  const box = (
+    <View
+      style={[
+        styles.box,
+        checked && { backgroundColor: activeColor, borderColor: activeColor },
+        !checked && { borderColor: idleColor },
+        disabled ? styles.boxDisabled : null,
+        boxStyle,
+      ]}
+    >
+      {checked
+        ? renderFieldFlowIcon(checkedIcon, '#FFFFFF', iconSize)
+        : uncheckedIcon
+          ? renderFieldFlowIcon(uncheckedIcon, idleColor, iconSize)
+          : null}
+    </View>
+  );
+
+  const labelNode = label ? (
+    <Text style={[styles.label, labelStyle]}>
+      {label}
+      {required ? ' *' : ''}
+    </Text>
+  ) : null;
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID}>
+      <Pressable
+        onPress={() => !disabled && onChange(!checked)}
+        disabled={disabled}
+        style={styles.row}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked, disabled: Boolean(disabled) }}
+        accessibilityLabel={label}
+        hitSlop={6}
+      >
+        {leftIcon ? (
+          <View style={styles.leftIcon}>{renderFieldFlowIcon(leftIcon, theme.colors.icon, 18)}</View>
+        ) : null}
+        {labelPosition === 'left' ? labelNode : null}
+        {box}
+        {labelPosition === 'right' ? labelNode : null}
+      </Pressable>
+      {errorText ? (
+        <Text style={[styles.errorText, errorStyle, helperStyle]}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, _hasError: boolean, disabled: boolean, boxSize: number) {
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+      opacity: disabled ? 0.6 : 1,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+    },
+    leftIcon: {
+      marginRight: 2,
+    },
+    box: {
+      width: boxSize,
+      height: boxSize,
+      borderRadius: 6,
+      borderWidth: theme.spacing.borderWidthFocused,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    boxDisabled: {
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    label: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      fontWeight: '400',
+      fontFamily: theme.typography.fontFamily,
+    },
+    helperText: {
+      marginTop: theme.spacing.gap / 1.5,
+      marginLeft: boxSize + theme.spacing.gap,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+    },
+    errorText: {
+      marginTop: theme.spacing.gap / 1.5,
+      marginLeft: boxSize + theme.spacing.gap,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+    },
+  });
+}

package/src/components/FieldFlowCheckbox/index.ts

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