rn-inputforge 0.3.1 → 0.5.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;
+}