@multiplatform.one/components 2.0.23 → 3.0.0

package/dist/jsx/organize/SimpleInput/SimpleInput.stories.native.js

@@ -1,59 +1,56 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "react";
 import { SimpleInput } from ".";
-import { YStack } from "tamagui";
-import { Key, Eye } from "@tamagui/lucide-icons";
-var SimpleInput_stories_default = {
+function _define_property(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {}, ownKeys = Object.keys(source);
+    typeof Object.getOwnPropertySymbols == "function" && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+    }))), ownKeys.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+var meta = {
   title: "organize/SimpleInput",
   component: SimpleInput,
   parameters: {
     status: {
       type: "beta"
     }
+  },
+  argTypes: {
+    inputType: {
+      control: {}
+    }
   }
-}, password = function() {
-  return /* @__PURE__ */ _jsx(YStack, {
-    justifyContent: "center",
-    alignItems: "center",
-    children: /* @__PURE__ */ _jsx(SimpleInput, {
-      password: !0,
-      size: "$3",
-      iconAfter: Key,
-      passwordWithoutIcon: !0
-    })
-  });
-}, iconBefore = function() {
-  return /* @__PURE__ */ _jsx(SimpleInput, {
-    password: !0,
-    width: 800,
-    height: 50,
-    iconBefore: Key
-  });
-}, iconAfter = function() {
-  return /* @__PURE__ */ _jsx(SimpleInput, {
-    width: 250,
-    height: 50,
-    iconAfter: Eye,
-    placeholder: "icon after input box"
-  });
-}, circular = function() {
-  return /* @__PURE__ */ _jsx(SimpleInput, {
-    placeholder: "icon after input box",
-    circular: !0,
-    password: !0
-  });
-}, passwordWithoutIcon = function() {
-  return /* @__PURE__ */ _jsx(SimpleInput, {
-    password: !0,
-    passwordWithoutIcon: !0
-  });
+}, main = function(args) {
+  return /* @__PURE__ */ _jsx(SimpleInput, _object_spread({}, args));
+}, mainArgs = {
+  inputType: "TEXT"
+};
+main.args = mainArgs;
+var passwordInputType = function(args) {
+  return /* @__PURE__ */ _jsx(SimpleInput, _object_spread({}, args));
+}, passwordInputTypeArgs = {
+  inputType: "PASSWORD",
+  secureTextEntry: !0
 };
+passwordInputType.args = passwordInputTypeArgs;
+main.args = mainArgs;
+var SimpleInput_stories_default = meta;
 export {
-  circular,
   SimpleInput_stories_default as default,
-  iconAfter,
-  iconBefore,
-  password,
-  passwordWithoutIcon
+  main,
+  passwordInputType
 };
 //# sourceMappingURL=SimpleInput.stories.js.map

package/dist/jsx/organize/SimpleInput/SimpleInput.stories.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/organize/SimpleInput/home/clayrisser/Projects/bitspur/multiplatform.one/multiplatform.one/packages/components/src/organize/SimpleInput/SimpleInput.stories.tsx"],
-  "mappings": "AAmBC,SAAA,OAAA,YAAA;AAED,OAAkB;AAClB,SAASA,mBAAmB;AAC5B,SAASC,cAAc;AACvB,SAASC,KAAKC,WAAW;AAEzB,IAAA,8BAAe;EACbC,OAAO;EACPC,WAAWL;EACXM,YAAY;IAAEC,QAAQ;MAAEC,MAAM;IAAO;EAAE;AACzC,GAEaC,WAAW,WAAA;SACtB,qBAACR,QAAAA;IAAOS,gBAAe;IAASC,YAAW;cACzC,qBAACX,aAAAA;MAAYS,UAAQ;MAACG,MAAK;MAAKC,WAAWX;MAAKY,qBAAmB;;;GAI1DC,aAAa,WAAA;SAAM,qBAACf,aAAAA;IAAYS,UAAQ;IAACO,OAAO;IAAKC,QAAQ;IAAIF,YAAYb;;GAE7EW,YAAY,WAAA;SACvB,qBAACb,aAAAA;IAAYgB,OAAO;IAAKC,QAAQ;IAAIJ,WAAWV;IAAKe,aAAY;;GAGtDC,WAAW,WAAA;SAAM,qBAACnB,aAAAA;IAAYkB,aAAY;IAAuBC,UAAQ;IAACV,UAAQ;;GAElFK,sBAAsB,WAAA;SAAM,qBAACd,aAAAA;IAAYS,UAAQ;IAACK,qBAAmB;;;",
-  "names": ["SimpleInput", "YStack", "Key", "Eye", "title", "component", "parameters", "status", "type", "password", "justifyContent", "alignItems", "size", "iconAfter", "passwordWithoutIcon", "iconBefore", "width", "height", "placeholder", "circular"]
+  "sources": ["../../../../src/organize/SimpleInput/home/dharmendraboddeda/Projects/bitspur/multiplatform.one/multiplatform.one/packages/components/src/organize/SimpleInput/SimpleInput.stories.tsx"],
+  "mappings": ";AAAA,OAAkB;AAClB,SAASA,mBAAqC;;;;;;;;;;;;;;;;;;;;AAG9C,IAAMC,OAAa;EACjBC,OAAO;EACPC,WAAWH;EACXI,YAAY;IAAEC,QAAQ;MAAEC,MAAM;IAAO;EAAE;EACvCC,UAAU;IACRC,WAAW;MACTC,SAAS,CAAC;IACZ;EACF;AACF,GAEaC,OAAO,SAACC,MAAAA;SAA2B,qBAACX,aAAAA,eAAAA,CAAAA,GAAgBW,IAAAA,CAAAA;GAE3DC,WAA6B;EACjCJ,WAAW;AACb;AAEAE,KAAKC,OAAOC;AAEL,IAAMC,oBAAoB,SAACF,MAAAA;SAA2B,qBAACX,aAAAA,eAAAA,CAAAA,GAAgBW,IAAAA,CAAAA;GAExEG,wBAA0C;EAC9CN,WAAW;EACXO,iBAAiB;AACnB;AAEAF,kBAAkBF,OAAOG;AAEzBJ,KAAKC,OAAOC;AAEZ,IAAA,8BAAeX;",
+  "names": ["SimpleInput", "meta", "title", "component", "parameters", "status", "type", "argTypes", "inputType", "control", "main", "args", "mainArgs", "passwordInputType", "passwordInputTypeArgs", "secureTextEntry"]
 }

package/dist/jsx/organize/SimpleInput/index.js

@@ -1,129 +1,27 @@
 import React, { useEffect } from "react";
-import { Button, Input, XGroup, XStack } from "tamagui";
+import { Button, Input, XStack } from "tamagui";
 import { Eye, EyeOff } from "@tamagui/lucide-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
-function SimpleInput({
-  value,
-  size,
-  password,
-  iconBefore,
-  iconAfter,
-  height,
-  width,
-  iconStyle,
-  circular,
-  placeholder,
-  iconAfterScale,
-  iconBeforeScale,
-  iconPasswordScale,
-  iconAfterAsButton,
-  iconBeforeAsButton,
-  iconsAsButton,
-  passwordWithoutIcon,
-  paddingHorizontal,
-  onChangeText,
-  ...props
-}) {
-  const [show, setShow] = React.useState(!1), [inputValue, setInputValue] = React.useState(value ?? ""), [borderWidth, setBorderWidth] = React.useState(1), [secureTextEntry, setSecureTextEntry] = React.useState(password), totalIcons = (iconBefore ? 1 : 0) + (iconAfter || password && !passwordWithoutIcon ? 1 : 0), inputValuePadding = iconBefore ? 0 : 24, iconPercentage = totalIcons === 1 ? "20%" : totalIcons === 2 ? "10%" : void 0, inputPercentage = iconPercentage ? "80%" : "100%";
-  useEffect(() => {
-    inputValue && onChangeText && onChangeText(inputValue);
-  }, [inputValue]), useEffect(() => {
-    if (password) {
-      if (show) {
-        setSecureTextEntry(!1);
-        return;
-      }
-      if (!show && password) {
-        setSecureTextEntry(!0);
-        return;
-      }
-    }
-  }, [password, show]);
-  function handleValueChange(text) {
-    setInputValue(text), onChangeText && onChangeText(text);
-  }
-  return /* @__PURE__ */ jsx(XStack, { children: /* @__PURE__ */ jsxs(
-    XGroup,
-    {
-      ...props,
-      height: size,
-      borderRadius: circular ? 9999999 : props.borderRadius || size,
-      borderWidth,
-      borderColor: "$backgroundFocus",
-      minHeight: height || "$5",
-      width: width || "$20",
-      children: [
-        iconBefore && /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: iconBefore,
-            unstyled: !(iconsAsButton || iconBeforeAsButton),
-            ...iconStyle,
-            justifyContent: "center",
-            alignItems: "center",
-            scaleIcon: iconBeforeScale,
-            width: iconPercentage,
-            height: "100%",
-            padding: 0
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            onChangeText: handleValueChange,
-            value: inputValue,
-            ...props,
-            size,
-            onFocus: (e) => {
-              setBorderWidth(2), props.onFocus?.(e);
-            },
-            onBlur: (e) => {
-              setBorderWidth(1), props.onBlur?.(e);
-            },
-            height: "100%",
-            placeholder,
-            width: inputPercentage,
-            paddingLeft: inputValuePadding,
-            paddingRight: inputValuePadding,
-            unstyled: !0,
-            borderWidth: 0,
-            paddingHorizontal,
-            secureTextEntry
-          }
-        ),
-        !!password && !passwordWithoutIcon && /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: show ? Eye : EyeOff,
-            scaleIcon: iconPasswordScale,
-            height: "100%",
-            ...iconStyle,
-            width: iconPercentage,
-            onPress: (e) => {
-              setShow((prev) => !prev), setBorderWidth(2), props.onPress?.(e);
-            },
-            justifyContent: "center",
-            alignItems: "center",
-            padding: 0
-          }
-        ),
-        !!iconAfter && (!password || passwordWithoutIcon) && /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: iconAfter,
-            ...iconStyle,
-            justifyContent: "center",
-            alignItems: "center",
-            scaleIcon: iconBeforeScale,
-            width: iconPercentage,
-            unstyled: !(iconsAsButton || iconAfterAsButton),
-            height: "100%",
-            padding: 0
-          }
-        )
-      ]
-    }
-  ) });
+function SimpleInput({ inputType = "TEXT", xStackProps, buttonProps, ...props }) {
+  const [hideText, setHideText] = React.useState(
+    !!(props?.secureTextEntry || inputType === "PASSWORD")
+  ), [isValidText, setIsValidText] = React.useState(!0);
+  return useEffect(() => {
+    props.secureTextEntry ? setHideText(!0) : setHideText(!1);
+  }, [props.secureTextEntry]), /* @__PURE__ */ jsxs(XStack, { theme: isValidText ? "system" : "red", space: "$1", ...xStackProps, children: [
+    /* @__PURE__ */ jsx(Input, { ...props, secureTextEntry: hideText, onChangeText: (text) => {
+      if (inputType === "EMAIL")
+        if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(text))
+          setIsValidText(!0);
+        else {
+          setIsValidText(!1);
+          return;
+        }
+      else
+        setIsValidText(!0);
+    } }),
+    inputType === "PASSWORD" && /* @__PURE__ */ jsx(Button, { onPress: () => setHideText(!hideText), children: /* @__PURE__ */ jsx(Button.Icon, { children: hideText ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {}) }) })
+  ] });
 }
 export {
   SimpleInput

package/dist/jsx/organize/SimpleInput/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/organize/SimpleInput/index.tsx"],
-  "mappings": "AAqBA,OAAO,SAAS,iBAAiB;AAGjC,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAC9C,SAAS,KAAK,cAAc;AAkFtB,SAWI,KAXJ;AAvDC,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,EAAK,GACtC,CAAC,YAAY,aAAa,IAAI,MAAM,SAA6B,SAAS,EAAE,GAC5E,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,CAAC,GAChD,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,QAAQ,GAC/D,cAAc,aAAa,IAAI,MAAM,aAAc,YAAY,CAAC,sBAAuB,IAAI,IAC3F,oBAAoB,aAAa,IAAI,IACrC,iBAAiB,eAAe,IAAI,QAAQ,eAAe,IAAI,QAAQ,QACvE,kBAAkB,iBAAiB,QAAQ;AAEjD,YAAU,MAAM;AACd,IAAK,cACD,gBAAc,aAAa,UAAU;AAAA,EAC3C,GAAG,CAAC,UAAU,CAAC,GAEf,UAAU,MAAM;AACd,QAAK,UACL;AAAA,UAAI,MAAM;AACR,2BAAmB,EAAO;AAC1B;AAAA,MACF;AACA,UAAI,CAAC,QAAQ,UAAU;AACrB,2BAAmB,EAAM;AACzB;AAAA,MACF;AAAA;AAAA,EACF,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,WAAS,kBAAkB,MAAc;AACvC,kBAAc,IAAI,GACd,gBAAc,aAAa,IAAI;AAAA,EACrC;AAEA,SACE,oBAAC,UACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ;AAAA,MAER,cAAc,WAAW,UAAU,MAAM,gBAAgB;AAAA,MACzD;AAAA,MACA,aAAY;AAAA,MACZ,WAAW,UAAU;AAAA,MACrB,OAAO,SAAS;AAAA,MAEf;AAAA,sBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,UAAU,EAAE,iBAAiB;AAAA,YAC5B,GAAG;AAAA,YACJ,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,WAAW;AAAA,YACX,OAAO;AAAA,YACP,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACX;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,cAAc;AAAA,YACd,OAAO;AAAA,YACN,GAAG;AAAA,YACJ;AAAA,YACA,SAAS,CAAC,MAAM;AACd,6BAAe,CAAC,GAChB,MAAM,UAAU,CAAC;AAAA,YACnB;AAAA,YACA,QAAQ,CAAC,MAAM;AACb,6BAAe,CAAC,GAChB,MAAM,SAAS,CAAC;AAAA,YAClB;AAAA,YACA,QAAO;AAAA,YACP;AAAA,YACA,OAAO;AAAA,YACP,aAAa;AAAA,YACb,cAAc;AAAA,YACd,UAAQ;AAAA,YACR,aAAa;AAAA,YACb;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACC,CAAC,CAAC,YAAY,CAAC,uBACd;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,OAAO,MAAM;AAAA,YACnB,WAAW;AAAA,YACX,QAAO;AAAA,YACN,GAAG;AAAA,YACJ,OAAO;AAAA,YACP,SAAS,CAAC,MAAM;AACd,sBAAQ,CAAC,SAAS,CAAC,IAAI,GACvB,eAAe,CAAC,GAChB,MAAM,UAAU,CAAC;AAAA,YACnB;AAAA,YACA,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,SAAS;AAAA;AAAA,QACX;AAAA,QAED,CAAC,CAAC,cAAc,CAAC,YAAY,wBAC5B;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACL,GAAG;AAAA,YACJ,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,WAAW;AAAA,YACX,OAAO;AAAA,YACP,UAAU,EAAE,iBAAiB;AAAA,YAC7B,QAAO;AAAA,YACP,SAAS;AAAA;AAAA,QACX;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
+  "mappings": "AAAA,OAAO,SAAS,iBAAiB;AAEjC,SAAS,QAAQ,OAAe,cAAc;AAC9C,SAAS,KAAK,cAAc;AAiCxB,SACE,KADF;AAzBG,SAAS,YAAY,EAAE,YAAY,QAAQ,aAAa,aAAa,GAAG,MAAM,GAAqB;AACxG,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM;AAAA,IACpC,UAAO,mBAAmB,cAAc;AAAA,EAC1C,GACM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAkB,EAAI;AAElE,mBAAU,MAAM;AACd,UAAM,kBAAkB,YAAY,EAAI,IAAI,YAAY,EAAK;AAAA,EAC/D,GAAG,CAAC,MAAM,eAAe,CAAC,GAiBxB,qBAAC,UAAO,OAAO,cAAc,WAAW,OAAO,OAAM,MAAM,GAAG,aAC5D;AAAA,wBAAC,SAAO,GAAG,OAAO,iBAAiB,UAAU,cAhBvB,CAAC,SAAiB;AAC1C,UAAI,cAAc;AAEhB,YADqB,mDACH,KAAK,IAAI;AAIzB,yBAAe,EAAI;AAAA,aAJS;AAC5B,yBAAe,EAAK;AACpB;AAAA,QACF;AAAA;AAIA,uBAAe,EAAI;AAAA,IAEvB,GAIkF;AAAA,IAC7E,cAAc,cACb,oBAAC,UAAO,SAAS,MAAM,YAAY,CAAC,QAAQ,GAC1C,8BAAC,OAAO,MAAP,EAAa,qBAAW,oBAAC,UAAO,IAAK,oBAAC,OAAI,GAAG,GAChD;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/dist/jsx/organize/SimpleInput/index.mjs

@@ -1,117 +1,38 @@
 import React, { useEffect } from "react";
-import { Button, Input, XGroup, XStack } from "tamagui";
+import { Button, Input, XStack } from "tamagui";
 import { Eye, EyeOff } from "@tamagui/lucide-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 function SimpleInput({
-  value,
-  size,
-  password,
-  iconBefore,
-  iconAfter,
-  height,
-  width,
-  iconStyle,
-  circular,
-  placeholder,
-  iconAfterScale,
-  iconBeforeScale,
-  iconPasswordScale,
-  iconAfterAsButton,
-  iconBeforeAsButton,
-  iconsAsButton,
-  passwordWithoutIcon,
-  paddingHorizontal,
-  onChangeText,
+  inputType = "TEXT",
+  xStackProps,
+  buttonProps,
   ...props
 }) {
-  const [show, setShow] = React.useState(!1),
-    [inputValue, setInputValue] = React.useState(value ?? ""),
-    [borderWidth, setBorderWidth] = React.useState(1),
-    [secureTextEntry, setSecureTextEntry] = React.useState(password),
-    totalIcons = (iconBefore ? 1 : 0) + (iconAfter || password && !passwordWithoutIcon ? 1 : 0),
-    inputValuePadding = iconBefore ? 0 : 24,
-    iconPercentage = totalIcons === 1 ? "20%" : totalIcons === 2 ? "10%" : void 0,
-    inputPercentage = iconPercentage ? "80%" : "100%";
-  useEffect(() => {
-    inputValue && onChangeText && onChangeText(inputValue);
-  }, [inputValue]), useEffect(() => {
-    if (password) {
-      if (show) {
-        setSecureTextEntry(!1);
-        return;
-      }
-      if (!show && password) {
-        setSecureTextEntry(!0);
-        return;
-      }
-    }
-  }, [password, show]);
-  function handleValueChange(text) {
-    setInputValue(text), onChangeText && onChangeText(text);
-  }
-  return /* @__PURE__ */jsx(XStack, {
-    children: /* @__PURE__ */jsxs(XGroup, {
+  const [hideText, setHideText] = React.useState(!!(props?.secureTextEntry || inputType === "PASSWORD")),
+    [isValidText, setIsValidText] = React.useState(!0);
+  return useEffect(() => {
+    props.secureTextEntry ? setHideText(!0) : setHideText(!1);
+  }, [props.secureTextEntry]), /* @__PURE__ */jsxs(XStack, {
+    theme: isValidText ? "system" : "red",
+    space: "$1",
+    ...xStackProps,
+    children: [/* @__PURE__ */jsx(Input, {
       ...props,
-      height: size,
-      borderRadius: circular ? 9999999 : props.borderRadius || size,
-      borderWidth,
-      borderColor: "$backgroundFocus",
-      minHeight: height || "$5",
-      width: width || "$20",
-      children: [iconBefore && /* @__PURE__ */jsx(Button, {
-        icon: iconBefore,
-        unstyled: !(iconsAsButton || iconBeforeAsButton),
-        ...iconStyle,
-        justifyContent: "center",
-        alignItems: "center",
-        scaleIcon: iconBeforeScale,
-        width: iconPercentage,
-        height: "100%",
-        padding: 0
-      }), /* @__PURE__ */jsx(Input, {
-        onChangeText: handleValueChange,
-        value: inputValue,
-        ...props,
-        size,
-        onFocus: e => {
-          setBorderWidth(2), props.onFocus?.(e);
-        },
-        onBlur: e => {
-          setBorderWidth(1), props.onBlur?.(e);
-        },
-        height: "100%",
-        placeholder,
-        width: inputPercentage,
-        paddingLeft: inputValuePadding,
-        paddingRight: inputValuePadding,
-        unstyled: !0,
-        borderWidth: 0,
-        paddingHorizontal,
-        secureTextEntry
-      }), !!password && !passwordWithoutIcon && /* @__PURE__ */jsx(Button, {
-        icon: show ? Eye : EyeOff,
-        scaleIcon: iconPasswordScale,
-        height: "100%",
-        ...iconStyle,
-        width: iconPercentage,
-        onPress: e => {
-          setShow(prev => !prev), setBorderWidth(2), props.onPress?.(e);
-        },
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 0
-      }), !!iconAfter && (!password || passwordWithoutIcon) && /* @__PURE__ */jsx(Button, {
-        icon: iconAfter,
-        ...iconStyle,
-        justifyContent: "center",
-        alignItems: "center",
-        scaleIcon: iconBeforeScale,
-        width: iconPercentage,
-        unstyled: !(iconsAsButton || iconAfterAsButton),
-        height: "100%",
-        padding: 0
-      })]
-    })
+      secureTextEntry: hideText,
+      onChangeText: text => {
+        if (inputType === "EMAIL") {
+          if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(text)) setIsValidText(!0);else {
+            setIsValidText(!1);
+            return;
+          }
+        } else setIsValidText(!0);
+      }
+    }), inputType === "PASSWORD" && /* @__PURE__ */jsx(Button, {
+      onPress: () => setHideText(!hideText),
+      children: /* @__PURE__ */jsx(Button.Icon, {
+        children: hideText ? /* @__PURE__ */jsx(EyeOff, {}) : /* @__PURE__ */jsx(Eye, {})
+      })
+    })]
   });
 }
 export { SimpleInput };

package/dist/jsx/organize/SimpleInput/index.native.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from "react";
-import { Button, Input, XGroup, XStack } from "tamagui";
+import { Button, Input, XStack } from "tamagui";
 import { Eye, EyeOff } from "@tamagui/lucide-icons";
 function _array_like_to_array(arr, len) {
   (len == null || len > arr.length) && (len = arr.length);
@@ -95,123 +95,47 @@ function _unsupported_iterable_to_array(o, minLen) {
   }
 }
 function SimpleInput(_param) {
-  var value = _param.value, size = _param.size, password = _param.password, iconBefore = _param.iconBefore, iconAfter = _param.iconAfter, height = _param.height, width = _param.width, iconStyle = _param.iconStyle, circular = _param.circular, placeholder = _param.placeholder, iconAfterScale = _param.iconAfterScale, iconBeforeScale = _param.iconBeforeScale, iconPasswordScale = _param.iconPasswordScale, iconAfterAsButton = _param.iconAfterAsButton, iconBeforeAsButton = _param.iconBeforeAsButton, iconsAsButton = _param.iconsAsButton, passwordWithoutIcon = _param.passwordWithoutIcon, paddingHorizontal = _param.paddingHorizontal, onChangeText = _param.onChangeText, props = _object_without_properties(_param, [
-    "value",
-    "size",
-    "password",
-    "iconBefore",
-    "iconAfter",
-    "height",
-    "width",
-    "iconStyle",
-    "circular",
-    "placeholder",
-    "iconAfterScale",
-    "iconBeforeScale",
-    "iconPasswordScale",
-    "iconAfterAsButton",
-    "iconBeforeAsButton",
-    "iconsAsButton",
-    "passwordWithoutIcon",
-    "paddingHorizontal",
-    "onChangeText"
-  ]), _React_useState = _sliced_to_array(React.useState(!1), 2), show = _React_useState[0], setShow = _React_useState[1], _React_useState1 = _sliced_to_array(React.useState(value ?? ""), 2), inputValue = _React_useState1[0], setInputValue = _React_useState1[1], _React_useState2 = _sliced_to_array(React.useState(1), 2), borderWidth = _React_useState2[0], setBorderWidth = _React_useState2[1], _React_useState3 = _sliced_to_array(React.useState(password), 2), secureTextEntry = _React_useState3[0], setSecureTextEntry = _React_useState3[1], totalIcons = (iconBefore ? 1 : 0) + (iconAfter || password && !passwordWithoutIcon ? 1 : 0), inputValuePadding = iconBefore ? 0 : 24, iconPercentage = totalIcons === 1 ? "20%" : totalIcons === 2 ? "10%" : void 0, inputPercentage = iconPercentage ? "80%" : "100%";
+  var _param_inputType = _param.inputType, inputType = _param_inputType === void 0 ? "TEXT" : _param_inputType, xStackProps = _param.xStackProps, buttonProps = _param.buttonProps, props = _object_without_properties(_param, [
+    "inputType",
+    "xStackProps",
+    "buttonProps"
+  ]), _React_useState = _sliced_to_array(React.useState(!!(props != null && props.secureTextEntry || inputType === "PASSWORD")), 2), hideText = _React_useState[0], setHideText = _React_useState[1], _React_useState1 = _sliced_to_array(React.useState(!0), 2), isValidText = _React_useState1[0], setIsValidText = _React_useState1[1];
   useEffect(function() {
-    inputValue && onChangeText && onChangeText(inputValue);
+    props.secureTextEntry ? setHideText(!0) : setHideText(!1);
   }, [
-    inputValue
-  ]), useEffect(function() {
-    if (password) {
-      if (show) {
-        setSecureTextEntry(!1);
-        return;
-      }
-      if (!show && password) {
-        setSecureTextEntry(!0);
+    props.secureTextEntry
+  ]);
+  var handleInputChange = function(text) {
+    if (inputType === "EMAIL") {
+      var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+      if (emailPattern.test(text))
+        setIsValidText(!0);
+      else {
+        setIsValidText(!1);
         return;
       }
-    }
-  }, [
-    password,
-    show
-  ]);
-  function handleValueChange(text) {
-    setInputValue(text), onChangeText && onChangeText(text);
-  }
-  return /* @__PURE__ */ _jsx(XStack, {
-    children: /* @__PURE__ */ _jsxs(XGroup, _object_spread_props(_object_spread({}, props), {
-      height: size,
-      // @ts-ignore
-      borderRadius: circular ? 9999999 : props.borderRadius || size,
-      borderWidth,
-      borderColor: "$backgroundFocus",
-      minHeight: height || "$5",
-      width: width || "$20",
-      children: [
-        iconBefore && /* @__PURE__ */ _jsx(Button, _object_spread_props(_object_spread({
-          icon: iconBefore,
-          unstyled: !(iconsAsButton || iconBeforeAsButton)
-        }, iconStyle), {
-          justifyContent: "center",
-          alignItems: "center",
-          scaleIcon: iconBeforeScale,
-          width: iconPercentage,
-          height: "100%",
-          padding: 0
-        })),
-        /* @__PURE__ */ _jsx(Input, _object_spread_props(_object_spread({
-          onChangeText: handleValueChange,
-          value: inputValue
-        }, props), {
-          size,
-          onFocus: function(e) {
-            var _props_onFocus;
-            setBorderWidth(2), (_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 || _props_onFocus.call(props, e);
-          },
-          onBlur: function(e) {
-            var _props_onBlur;
-            setBorderWidth(1), (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 || _props_onBlur.call(props, e);
-          },
-          height: "100%",
-          placeholder,
-          width: inputPercentage,
-          paddingLeft: inputValuePadding,
-          paddingRight: inputValuePadding,
-          unstyled: !0,
-          borderWidth: 0,
-          paddingHorizontal,
-          secureTextEntry
-        })),
-        !!password && !passwordWithoutIcon && /* @__PURE__ */ _jsx(Button, _object_spread_props(_object_spread({
-          icon: show ? Eye : EyeOff,
-          scaleIcon: iconPasswordScale,
-          height: "100%"
-        }, iconStyle), {
-          width: iconPercentage,
-          onPress: function(e) {
-            var _props_onPress;
-            setShow(function(prev) {
-              return !prev;
-            }), setBorderWidth(2), (_props_onPress = props.onPress) === null || _props_onPress === void 0 || _props_onPress.call(props, e);
-          },
-          justifyContent: "center",
-          alignItems: "center",
-          padding: 0
-        })),
-        !!iconAfter && (!password || passwordWithoutIcon) && /* @__PURE__ */ _jsx(Button, _object_spread_props(_object_spread({
-          icon: iconAfter
-        }, iconStyle), {
-          justifyContent: "center",
-          alignItems: "center",
-          scaleIcon: iconBeforeScale,
-          width: iconPercentage,
-          unstyled: !(iconsAsButton || iconAfterAsButton),
-          height: "100%",
-          padding: 0
-        }))
-      ]
-    }))
-  });
+    } else
+      setIsValidText(!0);
+  };
+  return /* @__PURE__ */ _jsxs(XStack, _object_spread_props(_object_spread({
+    theme: isValidText ? "system" : "red",
+    space: "$1"
+  }, xStackProps), {
+    children: [
+      /* @__PURE__ */ _jsx(Input, _object_spread_props(_object_spread({}, props), {
+        secureTextEntry: hideText,
+        onChangeText: handleInputChange
+      })),
+      inputType === "PASSWORD" && /* @__PURE__ */ _jsx(Button, {
+        onPress: function() {
+          return setHideText(!hideText);
+        },
+        children: /* @__PURE__ */ _jsx(Button.Icon, {
+          children: hideText ? /* @__PURE__ */ _jsx(EyeOff, {}) : /* @__PURE__ */ _jsx(Eye, {})
+        })
+      })
+    ]
+  }));
 }
 export {
   SimpleInput

package/dist/jsx/organize/SimpleInput/index.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/organize/SimpleInput/home/clayrisser/Projects/bitspur/multiplatform.one/multiplatform.one/packages/components/src/organize/SimpleInput/index.tsx"],
-  "mappings": "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",
-  "names": ["React", "useEffect", "Button", "Input", "XGroup", "XStack", "Eye", "EyeOff", "SimpleInput", "value", "size", "password", "iconBefore", "iconAfter", "height", "width", "iconStyle", "circular", "placeholder", "iconAfterScale", "iconBeforeScale", "iconPasswordScale", "iconAfterAsButton", "iconBeforeAsButton", "iconsAsButton", "passwordWithoutIcon", "paddingHorizontal", "onChangeText", "props", "useState", "show", "setShow", "inputValue", "setInputValue", "borderWidth", "setBorderWidth", "secureTextEntry", "setSecureTextEntry", "totalIcons", "inputValuePadding", "iconPercentage", "undefined", "inputPercentage", "handleValueChange", "text", "borderRadius", "borderColor", "minHeight", "icon", "unstyled", "justifyContent", "alignItems", "scaleIcon", "padding", "onFocus", "e", "onBlur", "paddingLeft", "paddingRight", "onPress", "prev"]
+  "sources": ["../../../../src/organize/SimpleInput/home/dharmendraboddeda/Projects/bitspur/multiplatform.one/multiplatform.one/packages/components/src/organize/SimpleInput/index.tsx"],
+  "mappings": ";AAAA,OAAOA,SAASC,iBAAiB;AAEjC,SAASC,QAAQC,OAAeC,cAAc;AAC9C,SAASC,KAAKC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQrB,SAASC,YAAY,QAAA;yBAAA,OAAEC,WAAAA,YAAAA,qBAAAA,SAAY,SAAA,kBAAQC,cAAtB,OAAsBA,aAAaC,cAAnC,OAAmCA,aAAgBC,QAAAA,2BAAnD,QAAA;IAAEH;IAAoBC;IAAaC;MAC7BV,kBAAAA,iBAAAA,MAAMY,SACpCD,YAAAA,QAAAA,MAAOE,mBAAmBL,cAAc,WAAoB,GAAA,CAAA,GADvDM,WAAyBd,gBAAAA,CAAAA,GAAfe,cAAef,gBAAAA,CAAAA,GAGMA,mBAAAA,iBAAAA,MAAMY,SAAkB,EAAA,GAAA,CAAA,GAAvDI,cAA+BhB,iBAAAA,CAAAA,GAAlBiB,iBAAkBjB,iBAAAA,CAAAA;AAEtCC,YAAU,WAAA;AACRU,UAAME,kBAAkBE,YAAY,EAAA,IAAQA,YAAY,EAAA;EAC1D,GAAG;IAACJ,MAAME;GAAgB;AAE1B,MAAMK,oBAAoB,SAACC,MAAAA;AACzB,QAAIX,cAAc,SAAS;AACzB,UAAMY,eAAe;AACrB,UAAKA,aAAaC,KAAKF,IAAAA;AAIrBF,uBAAe,EAAA;WAJa;AAC5BA,uBAAe,EAAA;AACf;MACF;IAGF;AACEA,qBAAe,EAAA;EAEnB;AAEA,SACE,sBAACb,QAAAA,qBAAAA,eAAAA;IAAOkB,OAAON,cAAc,WAAW;IAAOO,OAAM;KAASd,WAAAA,GAAAA;;MAC5D,qBAACN,OAAAA,qBAAAA,eAAAA,CAAAA,GAAUQ,KAAAA,GAAAA;QAAOE,iBAAiBC;QAAUU,cAAcN;;MAC1DV,cAAc,cACb,qBAACN,QAAAA;QAAOuB,SAAS,WAAA;iBAAMV,YAAY,CAACD,QAAAA;;kBAClC,qBAACZ,OAAOwB,MAAI;oBAAEZ,WAAW,qBAACR,QAAAA,CAAAA,CAAAA,IAAY,qBAACD,KAAAA,CAAAA,CAAAA;;;;;AAKjD;",
+  "names": ["React", "useEffect", "Button", "Input", "XStack", "Eye", "EyeOff", "SimpleInput", "inputType", "xStackProps", "buttonProps", "props", "useState", "secureTextEntry", "hideText", "setHideText", "isValidText", "setIsValidText", "handleInputChange", "text", "emailPattern", "test", "theme", "space", "onChangeText", "onPress", "Icon"]
 }