@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/Input/Input.spec.cjs

@@ -0,0 +1,102 @@
+var import_react = require("@testing-library/react");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.cjs");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+(0, import_vitest.describe)("Input", () => {
+  (0, import_vitest.describe)("without form context", () => {
+    (0, import_vitest.it)("renders with label and placeholder", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Name",
+        placeholder: "Enter name",
+        name: "name"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Name")).toBeDefined();
+      const input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input?.getAttribute("placeholder")).toBe("Enter name");
+    });
+    (0, import_vitest.it)("renders required label with asterisk", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Required",
+        name: "req",
+        required: true
+      }));
+      const label = result.container.querySelector("label");
+      (0, import_vitest.expect)(label?.textContent).toContain("Required");
+      (0, import_vitest.expect)(label?.textContent).toContain("*");
+    });
+    (0, import_vitest.it)("renders with helper text and error", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Email",
+        helperText: "Enter your email",
+        error: "Invalid email",
+        name: "email"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Enter your email")).toBeUndefined();
+      (0, import_vitest.expect)(result.findTextElement("Invalid email")).toBeDefined();
+    });
+    (0, import_vitest.it)("renders disabled state", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Disabled",
+        name: "d",
+        disabled: true
+      }));
+      const input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input?.getAttribute("aria-disabled")).toBe("true");
+    });
+    (0, import_vitest.it)("renders readOnly state", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "ReadOnly",
+        name: "r",
+        readOnly: true,
+        value: "hello"
+      }));
+      const input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input?.getAttribute("aria-readonly")).toBe("true");
+    });
+    (0, import_vitest.it)("renders skeleton placeholder", () => {
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Loading",
+        name: "l",
+        skeleton: true
+      }));
+      (0, import_vitest.expect)(result.container.querySelector("input")).toBeNull();
+    });
+    (0, import_vitest.it)("calls onChangeText when value changes", async () => {
+      const onChangeText = import_vitest.vi.fn();
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Text",
+        name: "text",
+        onChangeText
+      }));
+      const input = result.container.querySelector("input");
+      if (input) import_react.fireEvent.change(input, {
+        target: {
+          value: "hello"
+        }
+      });
+      await (0, import_react.waitFor)(() => (0, import_vitest.expect)(onChangeText).toHaveBeenCalledWith("hello"));
+    });
+  });
+  (0, import_vitest.describe)("with form context", () => {
+    (0, import_vitest.it)("renders and validates with tanstack form", async () => {
+      const onSubmit = import_vitest.vi.fn();
+      const result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        formOptions: {
+          defaultValues: {
+            name: ""
+          }
+        },
+        onSubmit,
+        submitText: "Submit",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+          name: "name",
+          label: "Name",
+          required: true
+        })
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Name")).toBeDefined();
+    });
+  });
+});

package/dist/cjs/fields/Input/Input.spec.native.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@testing-library/react");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+(0, import_vitest.describe)("Input", function () {
+  (0, import_vitest.describe)("without form context", function () {
+    (0, import_vitest.it)("renders with label and placeholder", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Name",
+        placeholder: "Enter name",
+        name: "name"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Name")).toBeDefined();
+      var input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.getAttribute("placeholder")).toBe("Enter name");
+    });
+    (0, import_vitest.it)("renders required label with asterisk", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Required",
+        name: "req",
+        required: true
+      }));
+      var label = result.container.querySelector("label");
+      (0, import_vitest.expect)(label === null || label === void 0 ? void 0 : label.textContent).toContain("Required");
+      (0, import_vitest.expect)(label === null || label === void 0 ? void 0 : label.textContent).toContain("*");
+    });
+    (0, import_vitest.it)("renders with helper text and error", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Email",
+        helperText: "Enter your email",
+        error: "Invalid email",
+        name: "email"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Enter your email")).toBeUndefined();
+      (0, import_vitest.expect)(result.findTextElement("Invalid email")).toBeDefined();
+    });
+    (0, import_vitest.it)("renders disabled state", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Disabled",
+        name: "d",
+        disabled: true
+      }));
+      var input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.getAttribute("aria-disabled")).toBe("true");
+    });
+    (0, import_vitest.it)("renders readOnly state", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "ReadOnly",
+        name: "r",
+        readOnly: true,
+        value: "hello"
+      }));
+      var input = result.container.querySelector("input");
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.getAttribute("aria-readonly")).toBe("true");
+    });
+    (0, import_vitest.it)("renders skeleton placeholder", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Loading",
+        name: "l",
+        skeleton: true
+      }));
+      (0, import_vitest.expect)(result.container.querySelector("input")).toBeNull();
+    });
+    (0, import_vitest.it)("calls onChangeText when value changes", async function () {
+      var onChangeText = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Text",
+        name: "text",
+        onChangeText
+      }));
+      var input = result.container.querySelector("input");
+      if (input) import_react.fireEvent.change(input, {
+        target: {
+          value: "hello"
+        }
+      });
+      await (0, import_react.waitFor)(function () {
+        return (0, import_vitest.expect)(onChangeText).toHaveBeenCalledWith("hello");
+      });
+    });
+  });
+  (0, import_vitest.describe)("with form context", function () {
+    (0, import_vitest.it)("renders and validates with tanstack form", async function () {
+      var onSubmit = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        formOptions: {
+          defaultValues: {
+            name: ""
+          }
+        },
+        onSubmit,
+        submitText: "Submit",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+          name: "name",
+          label: "Name",
+          required: true
+        })
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Name")).toBeDefined();
+    });
+  });
+});
+//# sourceMappingURL=Input.spec.native.js.map

package/dist/cjs/fields/Input/Input.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_react","import_vitest","import_test_utils","import_Form","import_index","describe","it","result","renderWithProviders","jsx","Input","label","placeholder","name","expect","findTextElement","toBeDefined","input","container","querySelector","getAttribute","toBe","required","textContent","toContain","helperText","error","toBeUndefined","disabled","readOnly","value","skeleton","toBeNull"],"sources":["../../../../src/fields/Input/Input.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/Input/Input.stories.cjs

@@ -0,0 +1,220 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Input_stories_exports = {};
+__export(Input_stories_exports, {
+  Basic: () => Basic,
+  Comparison: () => Comparison,
+  Disabled: () => Disabled,
+  Main: () => Main,
+  Sizes: () => Sizes,
+  WithError: () => WithError,
+  default: () => Input_stories_default
+});
+module.exports = __toCommonJS(Input_stories_exports);
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react = require("@phosphor-icons/react");
+var import_react_form = require("@tanstack/react-form");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.cjs");
+var import_Form = require("../../Form/index.cjs");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const meta = {
+  title: "Forms/Input",
+  component: import_index.Input,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    placeholder: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"]
+    },
+    value: {
+      control: "text"
+    },
+    defaultValue: {
+      control: "text"
+    }
+  }
+};
+var Input_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = (0, import_react_form.useForm)({
+        defaultValues: {
+          firstName: "",
+          email: ""
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          (0, import_storybook.action)("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        form,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+            label: "First name",
+            name: "firstName",
+            placeholder: "Jane",
+            required: true
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+            label: "Email",
+            name: "email",
+            placeholder: "jane@example.com",
+            required: true,
+            validators: {
+              onBlur: ({
+                value
+              }) => {
+                if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return "Invalid email address";
+              }
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+const Basic = {
+  args: {
+    label: "Full name",
+    placeholder: "Enter your name",
+    helperText: "This appears on your profile",
+    defaultValue: ""
+  },
+  render: args => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+    onChangeText: text => (0, import_storybook.action)("onChangeText")(text),
+    rightIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {}),
+    leftIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {}),
+    ...args
+  })
+};
+const Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    placeholder: "Cannot interact"
+  }
+};
+const WithError = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+      label: "Small",
+      size: "$2",
+      placeholder: "Small input"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+      label: "Medium (default)",
+      size: "$3",
+      placeholder: "Medium input"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+      label: "Large",
+      size: "$4",
+      placeholder: "Large input"
+    })]
+  })
+};
+const Comparison = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customVal, setCustomVal] = (0, import_react2.useState)("");
+      const [tamaguiVal, setTamaguiVal] = (0, import_react2.useState)("");
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom Input"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+            placeholder: "Enter your name",
+            value: customVal,
+            onChangeText: text => {
+              setCustomVal(text);
+              (0, import_storybook.action)("custom.onChangeText")(text);
+            }
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui Input"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+            placeholder: "Enter your name",
+            value: tamaguiVal,
+            onChangeText: text => {
+              setTamaguiVal(text);
+              (0, import_storybook.action)("tamagui.onChangeText")(text);
+            }
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComparisonExample, {});
+  }
+};

package/dist/cjs/fields/Input/Input.stories.native.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Input_stories_exports = {};
+__export(Input_stories_exports, {
+  Basic: () => Basic,
+  Comparison: () => Comparison,
+  Disabled: () => Disabled,
+  Main: () => Main,
+  Sizes: () => Sizes,
+  WithError: () => WithError,
+  default: () => Input_stories_default
+});
+module.exports = __toCommonJS(Input_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react = require("@phosphor-icons/react");
+var import_react_form = require("@tanstack/react-form");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.native.js");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+var meta = {
+  title: "Forms/Input",
+  component: import_index.Input,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    placeholder: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"]
+    },
+    value: {
+      control: "text"
+    },
+    defaultValue: {
+      control: "text"
+    }
+  }
+};
+var Input_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          firstName: "",
+          email: ""
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          (0, import_storybook.action)("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        form,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+            label: "First name",
+            name: "firstName",
+            placeholder: "Jane",
+            required: true
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+            label: "Email",
+            name: "email",
+            placeholder: "jane@example.com",
+            required: true,
+            validators: {
+              onBlur: function onBlur(param) {
+                var {
+                  value
+                } = param;
+                if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return "Invalid email address";
+              }
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+var Basic = {
+  args: {
+    label: "Full name",
+    placeholder: "Enter your name",
+    helperText: "This appears on your profile",
+    defaultValue: ""
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+      onChangeText: function onChangeText(text) {
+        return (0, import_storybook.action)("onChangeText")(text);
+      },
+      rightIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {}),
+      leftIcon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {}),
+      ...args
+    });
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    placeholder: "Cannot interact"
+  }
+};
+var WithError = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true
+  }
+};
+var Sizes = {
+  render: function render3() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Small",
+        size: "$2",
+        placeholder: "Small input"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Medium (default)",
+        size: "$3",
+        placeholder: "Medium input"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+        label: "Large",
+        size: "$4",
+        placeholder: "Large input"
+      })]
+    });
+  }
+};
+var Comparison = {
+  render: function render4() {
+    var ComparisonExample = function ComparisonExample2() {
+      var [customVal, setCustomVal] = (0, import_react2.useState)("");
+      var [tamaguiVal, setTamaguiVal] = (0, import_react2.useState)("");
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom Input"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Input, {
+            placeholder: "Enter your name",
+            value: customVal,
+            onChangeText: function onChangeText(text) {
+              setCustomVal(text);
+              (0, import_storybook.action)("custom.onChangeText")(text);
+            }
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui Input"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+            placeholder: "Enter your name",
+            value: tamaguiVal,
+            onChangeText: function onChangeText(text) {
+              setTamaguiVal(text);
+              (0, import_storybook.action)("tamagui.onChangeText")(text);
+            }
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComparisonExample, {});
+  }
+};
+//# sourceMappingURL=Input.stories.native.js.map

package/dist/cjs/fields/Input/Input.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Input_stories_exports","__export","Basic","Comparison","Disabled","Main","Sizes","WithError","default","Input_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react","import_react_form","import_react2","import_tamagui","import_Button","import_Form","import_index","meta","title","component","Input","parameters","status","type","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","defaultValue","name","render","FormExample","FormExample2","form","useForm","defaultValues","firstName","email","onSubmit","param","action","jsx","Form","children","jsxs","YStack","gap","validators","onBlur","test","Button","args","render2","onChangeText","text","rightIcon","XIcon","leftIcon","MagnifyingGlassIcon","render3","maxWidth"],"sources":["../../../../src/fields/Input/Input.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}