rn-inputforge 0.3.0 → 0.4.0

package/src/icons/Icon.tsx

@@ -15,6 +15,37 @@ export type FieldFlowIconName =
   | 'mic'
   | 'mapPin'
   | 'chevronDown'
+  | 'chevronUp'
+  | 'chevronLeft'
+  | 'chevronRight'
+  | 'calendar'
+  | 'clock'
+  | 'creditCard'
+  | 'currency'
+  | 'phone'
+  | 'mail'
+  | 'lock'
+  | 'user'
+  | 'key'
+  | 'hash'
+  | 'otp'
+  | 'radio'
+  | 'radioFilled'
+  | 'switch'
+  | 'star'
+  | 'plus'
+  | 'minus'
+  | 'info'
+  | 'home'
+  | 'settings'
+  | 'edit'
+  | 'trash'
+  | 'link'
+  | 'globe'
+  | 'file'
+  | 'folder'
+  | 'bell'
+  | 'heart'
   | 'spinner';
 
 export interface FieldFlowIconProps {
@@ -28,7 +59,7 @@ export interface FieldFlowIconProps {
  * A minimal, dependency-free icon set built out of basic Views. Ships so consumers
  * don't need to install react-native-svg / vector-icons just to use FieldFlow.
  * Every icon accepts `size` and `color`, and you can always render your own
- * icon via the `leftIcon` / `rightIcon` props on any FieldFlow component instead.
+ * icon via the `leftIcon` / `rightIcon` (or component-specific icon) props.
  */
 export function FieldFlowIcon({ name, size = 18, color = '#6B7280', style }: FieldFlowIconProps) {
   if (name === 'spinner') {
@@ -127,6 +158,7 @@ export function FieldFlowIcon({ name, size = 18, color = '#6B7280', style }: Fie
         </View>
       );
     case 'alert':
+    case 'info':
       return (
         <View style={[box, style]}>
           <View
@@ -140,8 +172,17 @@ export function FieldFlowIcon({ name, size = 18, color = '#6B7280', style }: Fie
               justifyContent: 'center',
             }}
           >
-            <View style={{ width: stroke, height: size * 0.32, backgroundColor: color, borderRadius: stroke, marginBottom: size * 0.08 }} />
-            <View style={{ width: stroke, height: stroke, borderRadius: stroke / 2, backgroundColor: color }} />
+            {name === 'info' ? (
+              <>
+                <View style={{ width: stroke, height: stroke, borderRadius: stroke / 2, backgroundColor: color, marginBottom: size * 0.08 }} />
+                <View style={{ width: stroke, height: size * 0.32, backgroundColor: color, borderRadius: stroke }} />
+              </>
+            ) : (
+              <>
+                <View style={{ width: stroke, height: size * 0.32, backgroundColor: color, borderRadius: stroke, marginBottom: size * 0.08 }} />
+                <View style={{ width: stroke, height: stroke, borderRadius: stroke / 2, backgroundColor: color }} />
+              </>
+            )}
           </View>
         </View>
       );
@@ -187,7 +228,6 @@ export function FieldFlowIcon({ name, size = 18, color = '#6B7280', style }: Fie
               borderTopColor: 'transparent',
               borderBottomColor: 'transparent',
               borderLeftColor: color,
-              transform: [{ rotate: '0deg' }],
             }}
           />
         </View>
@@ -298,8 +338,17 @@ export function FieldFlowIcon({ name, size = 18, color = '#6B7280', style }: Fie
         </View>
       );
     case 'chevronDown':
+    case 'chevronUp':
+    case 'chevronLeft':
+    case 'chevronRight': {
+      const rotations = {
+        chevronDown: '0deg',
+        chevronUp: '180deg',
+        chevronLeft: '90deg',
+        chevronRight: '-90deg',
+      } as const;
       return (
-        <View style={[box, style]}>
+        <View style={[box, style, { transform: [{ rotate: rotations[name] }] }]}>
           <View
             style={{
               width: size * 0.55,
@@ -322,6 +371,403 @@ export function FieldFlowIcon({ name, size = 18, color = '#6B7280', style }: Fie
           />
         </View>
       );
+    }
+    case 'calendar':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size * 0.85,
+              borderRadius: size * 0.12,
+              borderWidth: stroke,
+              borderColor: color,
+              marginTop: size * 0.1,
+            }}
+          >
+            <View style={{ height: size * 0.22, backgroundColor: color, opacity: 0.25, borderTopLeftRadius: size * 0.08, borderTopRightRadius: size * 0.08 }} />
+          </View>
+          <View style={{ position: 'absolute', top: 0, left: size * 0.22, width: stroke, height: size * 0.28, backgroundColor: color, borderRadius: stroke }} />
+          <View style={{ position: 'absolute', top: 0, right: size * 0.22, width: stroke, height: size * 0.28, backgroundColor: color, borderRadius: stroke }} />
+        </View>
+      );
+    case 'clock':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              borderWidth: stroke,
+              borderColor: color,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <View style={{ position: 'absolute', width: stroke, height: size * 0.28, backgroundColor: color, bottom: size * 0.42, borderRadius: stroke }} />
+            <View style={{ position: 'absolute', width: size * 0.22, height: stroke, backgroundColor: color, left: size * 0.48, borderRadius: stroke }} />
+          </View>
+        </View>
+      );
+    case 'creditCard':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size * 0.7,
+              borderRadius: size * 0.1,
+              borderWidth: stroke,
+              borderColor: color,
+              overflow: 'hidden',
+            }}
+          >
+            <View style={{ marginTop: size * 0.18, height: size * 0.14, backgroundColor: color, opacity: 0.35 }} />
+            <View style={{ marginTop: size * 0.12, marginLeft: size * 0.12, width: size * 0.35, height: stroke, backgroundColor: color, borderRadius: stroke }} />
+          </View>
+        </View>
+      );
+    case 'currency':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: stroke * 1.2, height: size * 0.85, backgroundColor: color, borderRadius: stroke, position: 'absolute' }} />
+          <View
+            style={{
+              width: size * 0.7,
+              height: size * 0.7,
+              borderRadius: size * 0.35,
+              borderWidth: stroke * 1.4,
+              borderColor: color,
+            }}
+          />
+        </View>
+      );
+    case 'phone':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.55,
+              height: size,
+              borderRadius: size * 0.12,
+              borderWidth: stroke,
+              borderColor: color,
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              paddingBottom: size * 0.08,
+            }}
+          >
+            <View style={{ width: size * 0.18, height: stroke, backgroundColor: color, borderRadius: stroke }} />
+          </View>
+        </View>
+      );
+    case 'mail':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size * 0.7,
+              borderRadius: size * 0.08,
+              borderWidth: stroke,
+              borderColor: color,
+              overflow: 'hidden',
+            }}
+          >
+            <View
+              style={{
+                position: 'absolute',
+                top: -size * 0.08,
+                left: size * 0.08,
+                width: size * 0.75,
+                height: size * 0.75,
+                borderWidth: stroke,
+                borderColor: color,
+                transform: [{ rotate: '45deg' }],
+              }}
+            />
+          </View>
+        </View>
+      );
+    case 'lock':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.55,
+              height: size * 0.4,
+              borderTopLeftRadius: size * 0.28,
+              borderTopRightRadius: size * 0.28,
+              borderWidth: stroke,
+              borderBottomWidth: 0,
+              borderColor: color,
+              marginBottom: -1,
+            }}
+          />
+          <View
+            style={{
+              width: size * 0.85,
+              height: size * 0.55,
+              borderRadius: size * 0.1,
+              borderWidth: stroke,
+              borderColor: color,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <View style={{ width: size * 0.14, height: size * 0.14, borderRadius: size * 0.07, backgroundColor: color }} />
+          </View>
+        </View>
+      );
+    case 'user':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.4,
+              height: size * 0.4,
+              borderRadius: size * 0.2,
+              borderWidth: stroke,
+              borderColor: color,
+              marginBottom: size * 0.06,
+            }}
+          />
+          <View
+            style={{
+              width: size * 0.85,
+              height: size * 0.35,
+              borderTopLeftRadius: size * 0.4,
+              borderTopRightRadius: size * 0.4,
+              borderWidth: stroke,
+              borderBottomWidth: 0,
+              borderColor: color,
+            }}
+          />
+        </View>
+      );
+    case 'key':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.4,
+              height: size * 0.4,
+              borderRadius: size * 0.2,
+              borderWidth: stroke,
+              borderColor: color,
+              position: 'absolute',
+              left: 0,
+            }}
+          />
+          <View
+            style={{
+              width: size * 0.55,
+              height: stroke * 1.4,
+              backgroundColor: color,
+              position: 'absolute',
+              right: 0,
+              borderRadius: stroke,
+            }}
+          />
+        </View>
+      );
+    case 'hash':
+    case 'otp':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: stroke, height: size * 0.85, backgroundColor: color, transform: [{ rotate: '15deg' }, { translateX: -size * 0.12 }], position: 'absolute' }} />
+          <View style={{ width: stroke, height: size * 0.85, backgroundColor: color, transform: [{ rotate: '15deg' }, { translateX: size * 0.12 }], position: 'absolute' }} />
+          <View style={{ width: size * 0.85, height: stroke, backgroundColor: color, transform: [{ rotate: '-12deg' }, { translateY: -size * 0.15 }], position: 'absolute' }} />
+          <View style={{ width: size * 0.85, height: stroke, backgroundColor: color, transform: [{ rotate: '-12deg' }, { translateY: size * 0.15 }], position: 'absolute' }} />
+        </View>
+      );
+    case 'radio':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size, height: size, borderRadius: size / 2, borderWidth: stroke, borderColor: color }} />
+        </View>
+      );
+    case 'radioFilled':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              borderWidth: stroke,
+              borderColor: color,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <View style={{ width: size * 0.45, height: size * 0.45, borderRadius: size * 0.225, backgroundColor: color }} />
+          </View>
+        </View>
+      );
+    case 'switch':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size * 0.55,
+              borderRadius: size * 0.275,
+              borderWidth: stroke,
+              borderColor: color,
+              justifyContent: 'center',
+              paddingHorizontal: 2,
+            }}
+          >
+            <View style={{ width: size * 0.35, height: size * 0.35, borderRadius: size * 0.175, backgroundColor: color, alignSelf: 'flex-end' }} />
+          </View>
+        </View>
+      );
+    case 'star':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size * 0.9, height: size * 0.9, borderRadius: size * 0.1, backgroundColor: color, transform: [{ rotate: '45deg' }], opacity: 0.9 }} />
+        </View>
+      );
+    case 'plus':
+    case 'minus':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size * 0.7, height: stroke * 1.2, backgroundColor: color, borderRadius: stroke, position: 'absolute' }} />
+          {name === 'plus' ? (
+            <View style={{ width: stroke * 1.2, height: size * 0.7, backgroundColor: color, borderRadius: stroke, position: 'absolute' }} />
+          ) : null}
+        </View>
+      );
+    case 'home':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: 0,
+              height: 0,
+              borderLeftWidth: size * 0.45,
+              borderRightWidth: size * 0.45,
+              borderBottomWidth: size * 0.4,
+              borderLeftColor: 'transparent',
+              borderRightColor: 'transparent',
+              borderBottomColor: color,
+              marginBottom: -2,
+            }}
+          />
+          <View style={{ width: size * 0.7, height: size * 0.45, borderWidth: stroke, borderTopWidth: 0, borderColor: color }} />
+        </View>
+      );
+    case 'settings':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size, height: size, borderRadius: size / 2, borderWidth: stroke * 2, borderColor: color, borderStyle: 'solid', opacity: 0.9 }} />
+          <View style={{ position: 'absolute', width: size * 0.35, height: size * 0.35, borderRadius: size * 0.175, backgroundColor: color }} />
+        </View>
+      );
+    case 'edit':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.35,
+              height: size * 0.85,
+              backgroundColor: color,
+              borderRadius: stroke,
+              transform: [{ rotate: '-45deg' }],
+            }}
+          />
+        </View>
+      );
+    case 'trash':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size * 0.7, height: stroke, backgroundColor: color, marginBottom: 2, borderRadius: stroke }} />
+          <View style={{ width: size * 0.65, height: size * 0.7, borderWidth: stroke, borderColor: color, borderRadius: size * 0.08 }} />
+        </View>
+      );
+    case 'link':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.45,
+              height: size * 0.7,
+              borderRadius: size * 0.22,
+              borderWidth: stroke,
+              borderColor: color,
+              transform: [{ rotate: '-30deg' }, { translateX: -size * 0.1 }],
+              position: 'absolute',
+            }}
+          />
+          <View
+            style={{
+              width: size * 0.45,
+              height: size * 0.7,
+              borderRadius: size * 0.22,
+              borderWidth: stroke,
+              borderColor: color,
+              transform: [{ rotate: '-30deg' }, { translateX: size * 0.1 }],
+              position: 'absolute',
+            }}
+          />
+        </View>
+      );
+    case 'globe':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size, height: size, borderRadius: size / 2, borderWidth: stroke, borderColor: color }} />
+          <View style={{ position: 'absolute', width: size * 0.45, height: size, borderWidth: stroke, borderColor: color, borderRadius: size * 0.22 }} />
+          <View style={{ position: 'absolute', width: size * 0.85, height: stroke, backgroundColor: color }} />
+        </View>
+      );
+    case 'file':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size * 0.75, height: size, borderWidth: stroke, borderColor: color, borderRadius: size * 0.08 }} />
+        </View>
+      );
+    case 'folder':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size * 0.4, height: size * 0.2, backgroundColor: color, borderTopLeftRadius: 3, borderTopRightRadius: 3, alignSelf: 'flex-start', marginLeft: 1, opacity: 0.8 }} />
+          <View style={{ width: size, height: size * 0.65, borderWidth: stroke, borderColor: color, borderRadius: size * 0.08 }} />
+        </View>
+      );
+    case 'bell':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.7,
+              height: size * 0.65,
+              borderTopLeftRadius: size * 0.35,
+              borderTopRightRadius: size * 0.35,
+              borderWidth: stroke,
+              borderColor: color,
+            }}
+          />
+          <View style={{ width: size * 0.2, height: size * 0.15, borderBottomLeftRadius: size * 0.1, borderBottomRightRadius: size * 0.1, backgroundColor: color, marginTop: 1 }} />
+        </View>
+      );
+    case 'heart':
+      return (
+        <View style={[box, style]}>
+          <View style={{ width: size * 0.4, height: size * 0.4, borderRadius: size * 0.2, backgroundColor: color, position: 'absolute', left: size * 0.05, top: size * 0.15 }} />
+          <View style={{ width: size * 0.4, height: size * 0.4, borderRadius: size * 0.2, backgroundColor: color, position: 'absolute', right: size * 0.05, top: size * 0.15 }} />
+          <View
+            style={{
+              width: size * 0.55,
+              height: size * 0.55,
+              backgroundColor: color,
+              transform: [{ rotate: '45deg' }],
+              position: 'absolute',
+              bottom: size * 0.08,
+            }}
+          />
+        </View>
+      );
     default:
       return <View style={[box, style]} />;
   }

package/src/icons/index.ts

@@ -1,2 +1,4 @@
 export { FieldFlowIcon } from './Icon';
 export type { FieldFlowIconName, FieldFlowIconProps } from './Icon';
+export { renderFieldFlowIcon } from './renderIcon';
+export type { FieldFlowIconSource } from './renderIcon';

package/src/icons/renderIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FieldFlowIcon, type FieldFlowIconName } from './Icon';
+
+/** Built-in icon name or any custom React node (vector icons, images, etc.). */
+export type FieldFlowIconSource = FieldFlowIconName | React.ReactNode;
+
+export function renderFieldFlowIcon(
+  icon: FieldFlowIconSource | undefined,
+  color: string,
+  size = 18,
+): React.ReactNode {
+  if (icon == null || icon === false) return null;
+  if (typeof icon === 'string') {
+    return <FieldFlowIcon name={icon as FieldFlowIconName} color={color} size={size} />;
+  }
+  return icon;
+}

package/src/index.ts

@@ -19,6 +19,27 @@ 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';
+
 // Theming
 export { FieldFlowThemeProvider, useFieldFlowTheme, defaultTheme, darkTheme } from './theme';
 export type { FieldFlowThemeProviderProps } from './theme';
@@ -29,6 +50,9 @@ export type {
   UseFieldFlowFormOptions,
   UseFieldFlowFormResult,
   FieldFlowFormRules,
+  AsyncFieldValidator,
+  AsyncFieldValidators,
+  CrossFieldRule,
   UseKeyboardManagerOptions,
   UseKeyboardManagerResult,
   UseFieldStateOptions,
@@ -48,12 +72,30 @@ 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';
 
-// 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 +103,7 @@ export type {
   FieldFlowState,
   FieldFlowRules,
   FieldFlowOption,
+  FieldFlowVariant,
   ValidationResult,
   Validator,
   FieldFlowColors,

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'