rn-inputforge 0.3.1 → 0.4.0

package/lib/module/icons/Icon.js

@@ -2,12 +2,12 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, View } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * 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,
@@ -143,9 +143,10 @@ export function FieldFlowIcon({
         })]
       });
     case 'alert':
+    case 'info':
       return /*#__PURE__*/_jsx(View, {
         style: [box, style],
-        children: /*#__PURE__*/_jsxs(View, {
+        children: /*#__PURE__*/_jsx(View, {
           style: {
             width: size,
             height: size,
@@ -155,22 +156,41 @@ export function FieldFlowIcon({
             alignItems: 'center',
             justifyContent: 'center'
           },
-          children: [/*#__PURE__*/_jsx(View, {
-            style: {
-              width: stroke,
-              height: size * 0.32,
-              backgroundColor: color,
-              borderRadius: stroke,
-              marginBottom: size * 0.08
-            }
-          }), /*#__PURE__*/_jsx(View, {
-            style: {
-              width: stroke,
-              height: stroke,
-              borderRadius: stroke / 2,
-              backgroundColor: color
-            }
-          })]
+          children: name === 'info' ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(View, {
+              style: {
+                width: stroke,
+                height: stroke,
+                borderRadius: stroke / 2,
+                backgroundColor: color,
+                marginBottom: size * 0.08
+              }
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                width: stroke,
+                height: size * 0.32,
+                backgroundColor: color,
+                borderRadius: stroke
+              }
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(View, {
+              style: {
+                width: stroke,
+                height: size * 0.32,
+                backgroundColor: color,
+                borderRadius: stroke,
+                marginBottom: size * 0.08
+              }
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                width: stroke,
+                height: stroke,
+                borderRadius: stroke / 2,
+                backgroundColor: color
+              }
+            })]
+          })
         })
       });
     case 'search':
@@ -214,10 +234,7 @@ export function FieldFlowIcon({
             borderLeftWidth: size * 0.7,
             borderTopColor: 'transparent',
             borderBottomColor: 'transparent',
-            borderLeftColor: color,
-            transform: [{
-              rotate: '0deg'
-            }]
+            borderLeftColor: color
           }
         })
       });
@@ -341,40 +358,712 @@ export function FieldFlowIcon({
         })
       });
     case 'chevronDown':
+    case 'chevronUp':
+    case 'chevronLeft':
+    case 'chevronRight':
+      {
+        const rotations = {
+          chevronDown: '0deg',
+          chevronUp: '180deg',
+          chevronLeft: '90deg',
+          chevronRight: '-90deg'
+        };
+        return /*#__PURE__*/_jsxs(View, {
+          style: [box, style, {
+            transform: [{
+              rotate: rotations[name]
+            }]
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              width: size * 0.55,
+              height: stroke,
+              backgroundColor: color,
+              borderRadius: stroke,
+              transform: [{
+                rotate: '45deg'
+              }, {
+                translateX: -size * 0.13
+              }, {
+                translateY: -size * 0.02
+              }],
+              position: 'absolute'
+            }
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              width: size * 0.55,
+              height: stroke,
+              backgroundColor: color,
+              borderRadius: stroke,
+              transform: [{
+                rotate: '-45deg'
+              }, {
+                translateX: size * 0.13
+              }, {
+                translateY: -size * 0.02
+              }],
+              position: 'absolute'
+            }
+          })]
+        });
+      }
+    case 'calendar':
       return /*#__PURE__*/_jsxs(View, {
         style: [box, style],
         children: [/*#__PURE__*/_jsx(View, {
           style: {
-            width: size * 0.55,
-            height: stroke,
+            width: size,
+            height: size * 0.85,
+            borderRadius: size * 0.12,
+            borderWidth: stroke,
+            borderColor: color,
+            marginTop: size * 0.1
+          },
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              height: size * 0.22,
+              backgroundColor: color,
+              opacity: 0.25,
+              borderTopLeftRadius: size * 0.08,
+              borderTopRightRadius: size * 0.08
+            }
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            top: 0,
+            left: size * 0.22,
+            width: stroke,
+            height: size * 0.28,
+            backgroundColor: color,
+            borderRadius: stroke
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            top: 0,
+            right: size * 0.22,
+            width: stroke,
+            height: size * 0.28,
+            backgroundColor: color,
+            borderRadius: stroke
+          }
+        })]
+      });
+    case 'clock':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsxs(View, {
+          style: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderWidth: stroke,
+            borderColor: color,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              position: 'absolute',
+              width: stroke,
+              height: size * 0.28,
+              backgroundColor: color,
+              bottom: size * 0.42,
+              borderRadius: stroke
+            }
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              position: 'absolute',
+              width: size * 0.22,
+              height: stroke,
+              backgroundColor: color,
+              left: size * 0.48,
+              borderRadius: stroke
+            }
+          })]
+        })
+      });
+    case 'creditCard':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsxs(View, {
+          style: {
+            width: size,
+            height: size * 0.7,
+            borderRadius: size * 0.1,
+            borderWidth: stroke,
+            borderColor: color,
+            overflow: 'hidden'
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              marginTop: size * 0.18,
+              height: size * 0.14,
+              backgroundColor: color,
+              opacity: 0.35
+            }
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              marginTop: size * 0.12,
+              marginLeft: size * 0.12,
+              width: size * 0.35,
+              height: stroke,
+              backgroundColor: color,
+              borderRadius: stroke
+            }
+          })]
+        })
+      });
+    case 'currency':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: stroke * 1.2,
+            height: size * 0.85,
             backgroundColor: color,
             borderRadius: stroke,
+            position: 'absolute'
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.7,
+            height: size * 0.7,
+            borderRadius: size * 0.35,
+            borderWidth: stroke * 1.4,
+            borderColor: color
+          }
+        })]
+      });
+    case 'phone':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsx(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
+          },
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              width: size * 0.18,
+              height: stroke,
+              backgroundColor: color,
+              borderRadius: stroke
+            }
+          })
+        })
+      });
+    case 'mail':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size,
+            height: size * 0.7,
+            borderRadius: size * 0.08,
+            borderWidth: stroke,
+            borderColor: color,
+            overflow: 'hidden'
+          },
+          children: /*#__PURE__*/_jsx(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'
+              }]
+            }
+          })
+        })
+      });
+    case 'lock':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(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
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.85,
+            height: size * 0.55,
+            borderRadius: size * 0.1,
+            borderWidth: stroke,
+            borderColor: color,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              width: size * 0.14,
+              height: size * 0.14,
+              borderRadius: size * 0.07,
+              backgroundColor: color
+            }
+          })
+        })]
+      });
+    case 'user':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.4,
+            height: size * 0.4,
+            borderRadius: size * 0.2,
+            borderWidth: stroke,
+            borderColor: color,
+            marginBottom: size * 0.06
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.85,
+            height: size * 0.35,
+            borderTopLeftRadius: size * 0.4,
+            borderTopRightRadius: size * 0.4,
+            borderWidth: stroke,
+            borderBottomWidth: 0,
+            borderColor: color
+          }
+        })]
+      });
+    case 'key':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.4,
+            height: size * 0.4,
+            borderRadius: size * 0.2,
+            borderWidth: stroke,
+            borderColor: color,
+            position: 'absolute',
+            left: 0
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.55,
+            height: stroke * 1.4,
+            backgroundColor: color,
+            position: 'absolute',
+            right: 0,
+            borderRadius: stroke
+          }
+        })]
+      });
+    case 'hash':
+    case 'otp':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: stroke,
+            height: size * 0.85,
+            backgroundColor: color,
             transform: [{
-              rotate: '45deg'
+              rotate: '15deg'
             }, {
-              translateX: -size * 0.13
+              translateX: -size * 0.12
+            }],
+            position: 'absolute'
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: stroke,
+            height: size * 0.85,
+            backgroundColor: color,
+            transform: [{
+              rotate: '15deg'
             }, {
-              translateY: -size * 0.02
+              translateX: size * 0.12
             }],
             position: 'absolute'
           }
         }), /*#__PURE__*/_jsx(View, {
           style: {
-            width: size * 0.55,
+            width: size * 0.85,
             height: stroke,
             backgroundColor: color,
+            transform: [{
+              rotate: '-12deg'
+            }, {
+              translateY: -size * 0.15
+            }],
+            position: 'absolute'
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.85,
+            height: stroke,
+            backgroundColor: color,
+            transform: [{
+              rotate: '-12deg'
+            }, {
+              translateY: size * 0.15
+            }],
+            position: 'absolute'
+          }
+        })]
+      });
+    case 'radio':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderWidth: stroke,
+            borderColor: color
+          }
+        })
+      });
+    case 'radioFilled':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderWidth: stroke,
+            borderColor: color,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              width: size * 0.45,
+              height: size * 0.45,
+              borderRadius: size * 0.225,
+              backgroundColor: color
+            }
+          })
+        })
+      });
+    case 'switch':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size,
+            height: size * 0.55,
+            borderRadius: size * 0.275,
+            borderWidth: stroke,
+            borderColor: color,
+            justifyContent: 'center',
+            paddingHorizontal: 2
+          },
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              width: size * 0.35,
+              height: size * 0.35,
+              borderRadius: size * 0.175,
+              backgroundColor: color,
+              alignSelf: 'flex-end'
+            }
+          })
+        })
+      });
+    case 'star':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.9,
+            height: size * 0.9,
+            borderRadius: size * 0.1,
+            backgroundColor: color,
+            transform: [{
+              rotate: '45deg'
+            }],
+            opacity: 0.9
+          }
+        })
+      });
+    case 'plus':
+    case 'minus':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.7,
+            height: stroke * 1.2,
+            backgroundColor: color,
+            borderRadius: stroke,
+            position: 'absolute'
+          }
+        }), name === 'plus' ? /*#__PURE__*/_jsx(View, {
+          style: {
+            width: stroke * 1.2,
+            height: size * 0.7,
+            backgroundColor: color,
+            borderRadius: stroke,
+            position: 'absolute'
+          }
+        }) : null]
+      });
+    case 'home':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(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
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.7,
+            height: size * 0.45,
+            borderWidth: stroke,
+            borderTopWidth: 0,
+            borderColor: color
+          }
+        })]
+      });
+    case 'settings':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderWidth: stroke * 2,
+            borderColor: color,
+            borderStyle: 'solid',
+            opacity: 0.9
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            width: size * 0.35,
+            height: size * 0.35,
+            borderRadius: size * 0.175,
+            backgroundColor: color
+          }
+        })]
+      });
+    case 'edit':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.35,
+            height: size * 0.85,
+            backgroundColor: color,
             borderRadius: stroke,
             transform: [{
               rotate: '-45deg'
+            }]
+          }
+        })
+      });
+    case 'trash':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.7,
+            height: stroke,
+            backgroundColor: color,
+            marginBottom: 2,
+            borderRadius: stroke
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.65,
+            height: size * 0.7,
+            borderWidth: stroke,
+            borderColor: color,
+            borderRadius: size * 0.08
+          }
+        })]
+      });
+    case 'link':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.45,
+            height: size * 0.7,
+            borderRadius: size * 0.22,
+            borderWidth: stroke,
+            borderColor: color,
+            transform: [{
+              rotate: '-30deg'
             }, {
-              translateX: size * 0.13
+              translateX: -size * 0.1
+            }],
+            position: 'absolute'
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.45,
+            height: size * 0.7,
+            borderRadius: size * 0.22,
+            borderWidth: stroke,
+            borderColor: color,
+            transform: [{
+              rotate: '-30deg'
             }, {
-              translateY: -size * 0.02
+              translateX: size * 0.1
             }],
             position: 'absolute'
           }
         })]
       });
+    case 'globe':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderWidth: stroke,
+            borderColor: color
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            width: size * 0.45,
+            height: size,
+            borderWidth: stroke,
+            borderColor: color,
+            borderRadius: size * 0.22
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            width: size * 0.85,
+            height: stroke,
+            backgroundColor: color
+          }
+        })]
+      });
+    case 'file':
+      return /*#__PURE__*/_jsx(View, {
+        style: [box, style],
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.75,
+            height: size,
+            borderWidth: stroke,
+            borderColor: color,
+            borderRadius: size * 0.08
+          }
+        })
+      });
+    case 'folder':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.4,
+            height: size * 0.2,
+            backgroundColor: color,
+            borderTopLeftRadius: 3,
+            borderTopRightRadius: 3,
+            alignSelf: 'flex-start',
+            marginLeft: 1,
+            opacity: 0.8
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size,
+            height: size * 0.65,
+            borderWidth: stroke,
+            borderColor: color,
+            borderRadius: size * 0.08
+          }
+        })]
+      });
+    case 'bell':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.7,
+            height: size * 0.65,
+            borderTopLeftRadius: size * 0.35,
+            borderTopRightRadius: size * 0.35,
+            borderWidth: stroke,
+            borderColor: color
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.2,
+            height: size * 0.15,
+            borderBottomLeftRadius: size * 0.1,
+            borderBottomRightRadius: size * 0.1,
+            backgroundColor: color,
+            marginTop: 1
+          }
+        })]
+      });
+    case 'heart':
+      return /*#__PURE__*/_jsxs(View, {
+        style: [box, style],
+        children: [/*#__PURE__*/_jsx(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
+          }
+        }), /*#__PURE__*/_jsx(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
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            width: size * 0.55,
+            height: size * 0.55,
+            backgroundColor: color,
+            transform: [{
+              rotate: '45deg'
+            }],
+            position: 'absolute',
+            bottom: size * 0.08
+          }
+        })]
+      });
     default:
       return /*#__PURE__*/_jsx(View, {
         style: [box, style]