@multiplatform.one/forms 6.0.0

package/dist/esm/fields/Input/Input.spec.mjs

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

package/dist/esm/fields/Input/Input.spec.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["fireEvent","waitFor","describe","expect","it","vi","renderWithProviders","Form","Input","jsx","result","label","placeholder","name","findTextElement","toBeDefined","input","container","querySelector","getAttribute","toBe","required","textContent","toContain","helperText","error","toBeUndefined","disabled","readOnly","value","skeleton","toBeNull","onChangeText","fn","change","target","toHaveBeenCalledWith","onSubmit","formOptions","defaultValues","submitText","children"],"sources":["../../../../src/fields/Input/Input.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","fireEvent","waitFor","describe","expect","it","vi","renderWithProviders","Form","Input","result","label","placeholder","name","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":"AAAA,SAASA,GAAA,IAAAC,IAAW,2BAAe;AACnC,SAASC,SAAA,EAAUC,OAAQ,QAAI,wBAAU;AACzC,SAASC,QAAA,EAAAC,MAAA,EAAAC,EAAA,EAAAC,EAAA,QAA2B;AACpC,SAASC,mBAAY;AACrB,SAASC,IAAA,oCAAa;AAMd,SAAAC,KAAA;AAJRN,QAAA,CAAS,SAAS,YAAM;EACtBA,QAAA,CAAS,wBAAwB,YAAM;IACrCE,EAAA,CAAG,sCAAsC,YAAM;MAC7C,IAAAK,MAAM,GAAAH,mBAAS,gBAAAP,IAAA,CAAAS,KAAA;QACbE,KAAA;QACFC,WAAA;QACAC,IAAA,EAAO;MACP;MACAT,MAAA,CAAOM,MAAA,CAAOI,eAAa,UAAAC,WAAqB;MACjD,IAAAC,KAAA,GAAAN,MAAA,CAAAO,SAAA,CAAAC,aAAA;MAEDd,MAAG,CAAAY,KAAA,aAAAA,KAAA,WAAwC,QAAM,IAAAA,KAAA,CAAAG,YAAA,iBAAAC,IAAA;IAC/C;IACAf,EAAA,uCAA+B,cAAqB;MACpD,IAAAK,MAAO,GAAAH,mBAAoB,gBAAoBP,IAAA,CAAAS,KAAA;QAC/CE,KAAO,YAAO;QACfE,IAAA;QAEEQ,QAAA;MACD;MAAe,IACbV,KAAA,GAAAD,MAAA,CAAAO,SAAC,CAAAC,aAAY,QAAQ;MACvBd,MAAA,CAAAO,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAAW,WAAA,EAAAC,SAAA;MAEAnB,MAAA,CAAOO,KAAA,KAAO,QAAAA,KAAgB,mBAAmB,IAAEA,KAAA,CAAAW,WAAc,EAAAC,SAAA;IACjE;IACFlB,EAAC;MAED,IAAGK,MAAA,GAAAH,mBAA0B,CAAM,eAAAP,IAAA,CAAAS,KAAA;QACjCE,KAAM,SAAS;QACfa,UAAM,EAAQ,kBAAiB;QAC/BC,KAAO,iBAAO;QACfZ,IAAA;MAED,CAAG;MACDT,MAAM,CAAAM,MAAA,CAAAI,eAAS,sBAAAY,aAAA;MAAAtB,MACb,CAAAM,MAAA,CAAAI,eAAC,gBAAY,GAAAC,WAAgB,EAAI;IAAuB,EAC1D;IACAV,EAAA,yBAAqB,cAAU;MAC/B,IAAAK,MAAO,GAAAH,mBAAoB,gBAAkBP,IAAK,CAAAS,KAAM;QACzDE,KAAA;QAEEE,IAAA;QACDc,QAAM;MACN;MACD,IAAAX,KAAA,GAAAN,MAAA,CAAAO,SAAA,CAAAC,aAAA;MAEDd,MAAG,CAAAY,KAAA,aAAAA,KAAA,cAAyC,SAAAA,KAAY,CAAAG,YAAA,mBAAAC,IAAA;IACtD;IACAf,EAAA,yBAAe;MAAA,IACbK,MAAA,GAAAH,mBAAO,gBAAaP,IAAK,CAAAS,KAAA,EAAO;QAClCE,KAAA;QACAE,IAAM;QACNe,QAAW;QACXC,KAAM;MACP;MACF,IAAAb,KAAA,GAAAN,MAAA,CAAAO,SAAA,CAAAC,aAAA;MAEDd,MAAS,CAAAY,KAAA,aAAAA,KAAqB,KAAM,kBAAAA,KAAA,CAAAG,YAAA,mBAAAC,IAAA;IAClC;IACEf,EAAA,+BAAuB;MACvB,IAAAK,MAAM,GAAAH,mBAAS,gBAAAP,IAAA,CAAAS,KAAA;QACbE,KAAA;QAGFE,IAAA;QACAiB,QAAO;MACR;MACF1B,MAAA,CAAAM,MAAA,CAAAO,SAAA,CAAAC,aAAA,WAAAa,QAAA;IACF","ignoreList":[]}

package/dist/esm/fields/Input/Input.stories.mjs

@@ -0,0 +1,189 @@
+import { action } from "@multiplatform.one/storybook";
+import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Input as TamaguiInput, Paragraph, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { Input } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/Input",
+  component: 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 = useForm({
+        defaultValues: {
+          firstName: "",
+          email: ""
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(Input, {
+            label: "First name",
+            name: "firstName",
+            placeholder: "Jane",
+            required: true
+          }), /* @__PURE__ */jsx(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__ */jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Basic = {
+  args: {
+    label: "Full name",
+    placeholder: "Enter your name",
+    helperText: "This appears on your profile",
+    defaultValue: ""
+  },
+  render: args => /* @__PURE__ */jsx(Input, {
+    onChangeText: text => action("onChangeText")(text),
+    rightIcon: /* @__PURE__ */jsx(XIcon, {}),
+    leftIcon: /* @__PURE__ */jsx(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__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(Input, {
+      label: "Small",
+      size: "$2",
+      placeholder: "Small input"
+    }), /* @__PURE__ */jsx(Input, {
+      label: "Medium (default)",
+      size: "$3",
+      placeholder: "Medium input"
+    }), /* @__PURE__ */jsx(Input, {
+      label: "Large",
+      size: "$4",
+      placeholder: "Large input"
+    })]
+  })
+};
+const Comparison = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customVal, setCustomVal] = useState("");
+      const [tamaguiVal, setTamaguiVal] = useState("");
+      return /* @__PURE__ */jsxs(XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */jsxs(YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom Input"
+          }), /* @__PURE__ */jsx(Input, {
+            placeholder: "Enter your name",
+            value: customVal,
+            onChangeText: text => {
+              setCustomVal(text);
+              action("custom.onChangeText")(text);
+            }
+          })]
+        }), /* @__PURE__ */jsxs(YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui Input"
+          }), /* @__PURE__ */jsx(TamaguiInput, {
+            placeholder: "Enter your name",
+            value: tamaguiVal,
+            onChangeText: text => {
+              setTamaguiVal(text);
+              action("tamagui.onChangeText")(text);
+            }
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, Main, Sizes, WithError, Input_stories_default as default };
+//# sourceMappingURL=Input.stories.mjs.map

package/dist/esm/fields/Input/Input.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["action","MagnifyingGlassIcon","XIcon","useForm","useState","Input","TamaguiInput","Paragraph","XStack","YStack","Button","Form","jsx","jsxs","meta","title","component","parameters","status","type","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","value","defaultValue","Input_stories_default","Main","name","render","FormExample","form","defaultValues","firstName","email","onSubmit","children","gap","validators","onBlur","test","Basic","args","onChangeText","text","rightIcon","leftIcon","Disabled","WithError","Sizes","maxWidth","Comparison","ComparisonExample","customVal","setCustomVal","tamaguiVal","setTamaguiVal","alignItems","padding","width","color"],"sources":["../../../../src/fields/Input/Input.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from "@multiplatform.one/storybook";
+import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Input as TamaguiInput, Paragraph, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { Input } from "./index.native.js";
+var meta = {
+  title: "Forms/Input",
+  component: 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 = useForm({
+        defaultValues: {
+          firstName: "",
+          email: ""
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */_jsx(Form, {
+        form,
+        children: /* @__PURE__ */_jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */_jsx(Input, {
+            label: "First name",
+            name: "firstName",
+            placeholder: "Jane",
+            required: true
+          }), /* @__PURE__ */_jsx(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__ */_jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_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__ */_jsx(Input, {
+      onChangeText: function onChangeText(text) {
+        return action("onChangeText")(text);
+      },
+      rightIcon: /* @__PURE__ */_jsx(XIcon, {}),
+      leftIcon: /* @__PURE__ */_jsx(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__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(Input, {
+        label: "Small",
+        size: "$2",
+        placeholder: "Small input"
+      }), /* @__PURE__ */_jsx(Input, {
+        label: "Medium (default)",
+        size: "$3",
+        placeholder: "Medium input"
+      }), /* @__PURE__ */_jsx(Input, {
+        label: "Large",
+        size: "$4",
+        placeholder: "Large input"
+      })]
+    });
+  }
+};
+var Comparison = {
+  render: function render4() {
+    var ComparisonExample = function ComparisonExample2() {
+      var [customVal, setCustomVal] = useState("");
+      var [tamaguiVal, setTamaguiVal] = useState("");
+      return /* @__PURE__ */_jsxs(XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */_jsxs(YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom Input"
+          }), /* @__PURE__ */_jsx(Input, {
+            placeholder: "Enter your name",
+            value: customVal,
+            onChangeText: function onChangeText(text) {
+              setCustomVal(text);
+              action("custom.onChangeText")(text);
+            }
+          })]
+        }), /* @__PURE__ */_jsxs(YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui Input"
+          }), /* @__PURE__ */_jsx(TamaguiInput, {
+            placeholder: "Enter your name",
+            value: tamaguiVal,
+            onChangeText: function onChangeText(text) {
+              setTamaguiVal(text);
+              action("tamagui.onChangeText")(text);
+            }
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, Main, Sizes, WithError, Input_stories_default as default };
+//# sourceMappingURL=Input.stories.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","action","MagnifyingGlassIcon","XIcon","useForm","useState","Input","TamaguiInput","Paragraph","XStack","YStack","Button","Form","meta","title","component","parameters","status","type","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","value","defaultValue","Input_stories_default","Main","name","render","FormExample","FormExample2","form","defaultValues","firstName","email","onSubmit","param","children","gap","validators","onBlur","test","Basic","args","render2","onChangeText","text","rightIcon","leftIcon","Disabled","WithError","Sizes","render3","maxWidth"],"sources":["../../../../src/fields/Input/Input.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}