@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,273 @@
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Paragraph, TextArea as TamaguiTextArea, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { TextArea } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/TextArea",
+  component: TextArea,
+  parameters: {
+    docs: {
+      description: {
+        component: "A textarea component with form integration for multi-line text input."
+      }
+    }
+  },
+  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"]
+    },
+    maxLength: {
+      control: "number"
+    },
+    autoResize: {
+      control: "boolean"
+    },
+    value: {
+      control: "text"
+    }
+  }
+};
+var TextArea_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          title: "",
+          description: "",
+          notes: "Some default notes..."
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        className: "max-w-md",
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(TextArea, {
+            label: "Title",
+            name: "title",
+            textAreaProps: {
+              placeholder: "Enter a title"
+            },
+            required: true
+          }), /* @__PURE__ */jsx(TextArea, {
+            label: "Description",
+            name: "description",
+            textAreaProps: {
+              placeholder: "Enter a detailed description",
+              numberOfLines: 4
+            },
+            helperText: "Provide as much detail as possible"
+          }), /* @__PURE__ */jsx(TextArea, {
+            label: "Additional Notes",
+            name: "notes",
+            textAreaProps: {
+              placeholder: "Any additional notes...",
+              numberOfLines: 3
+            }
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Save"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Description",
+    placeholder: "Enter description...",
+    helperText: "Up to 500 characters",
+    disabled: false,
+    required: false,
+    size: "$3"
+  },
+  render: args => /* @__PURE__ */jsx(TextArea, {
+    ...args
+  })
+};
+const Basic = {
+  args: {
+    label: "Description",
+    helperText: "Enter a detailed description",
+    name: "description",
+    textAreaProps: {
+      placeholder: "Type your description here..."
+    },
+    onChangeText: action("onChangeText")
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    textAreaProps: {
+      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(TextArea, {
+      label: "Small",
+      size: "$2",
+      textAreaProps: {
+        placeholder: "Small textarea"
+      }
+    }), /* @__PURE__ */jsx(TextArea, {
+      label: "Medium (default)",
+      size: "$3",
+      textAreaProps: {
+        placeholder: "Medium textarea"
+      }
+    }), /* @__PURE__ */jsx(TextArea, {
+      label: "Large",
+      size: "$4",
+      textAreaProps: {
+        placeholder: "Large textarea"
+      }
+    })]
+  })
+};
+const WithMaxLength = {
+  args: {
+    ...Basic.args,
+    textAreaProps: {
+      ...Basic.args?.textAreaProps,
+      maxLength: 100
+    },
+    helperText: "Maximum 100 characters"
+  }
+};
+const AutoResize = {
+  render: () => {
+    const AutoResizeExample = () => {
+      const [val, setVal] = useState("");
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        padding: "$4",
+        maxWidth: 500,
+        children: [/* @__PURE__ */jsx(Paragraph, {
+          size: "$3",
+          fontWeight: "bold",
+          children: "Auto-resize TextArea"
+        }), /* @__PURE__ */jsx(Paragraph, {
+          size: "$2",
+          color: "$placeholderColor",
+          children: "This textarea grows as you type, up to the maxRows limit (6 rows). Try pasting or typing multiple lines."
+        }), /* @__PURE__ */jsx(TextArea, {
+          label: "Auto-growing notes",
+          autoResize: true,
+          minRows: 2,
+          maxRows: 6,
+          value: val,
+          onChangeText: text => {
+            setVal(text);
+            action("onChangeText")(text);
+          },
+          textAreaProps: {
+            placeholder: "Start typing to see it grow..."
+          },
+          showCount: true
+        }), /* @__PURE__ */jsx(TextArea, {
+          label: "Default (no auto-resize)",
+          value: val,
+          onChangeText: setVal,
+          textAreaProps: {
+            placeholder: "Fixed height for comparison"
+          }
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(AutoResizeExample, {});
+  }
+};
+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 TextArea"
+          }), /* @__PURE__ */jsx(TextArea, {
+            textAreaProps: {
+              placeholder: "Type here..."
+            },
+            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 TextArea"
+          }), /* @__PURE__ */jsx(TamaguiTextArea, {
+            placeholder: "Type here...",
+            value: tamaguiVal,
+            onChangeText: text => {
+              setTamaguiVal(text);
+              action("tamagui.onChangeText")(text);
+            }
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(ComparisonExample, {});
+  }
+};
+export { AutoResize, Basic, Comparison, Disabled, Main, Sizes, Standalone, WithError, WithMaxLength, TextArea_stories_default as default };
+//# sourceMappingURL=TextArea.stories.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","Paragraph","TextArea","TamaguiTextArea","XStack","YStack","Button","Form","jsx","jsxs","meta","title","component","parameters","docs","description","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","maxLength","autoResize","value","TextArea_stories_default","Main","name","render","FormExample","form","defaultValues","notes","onSubmit","className","children","gap","textAreaProps","numberOfLines","Standalone","args","Basic","onChangeText","Disabled","WithError","Sizes","maxWidth","WithMaxLength","AutoResize","AutoResizeExample","val","setVal","padding","fontWeight","color","minRows","maxRows","text","showCount","Comparison","ComparisonExample","customVal","setCustomVal","tamaguiVal","setTamaguiVal","alignItems","width"],"sources":["../../../../src/fields/TextArea/TextArea.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,279 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Paragraph, TextArea as TamaguiTextArea, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { TextArea } from "./index.native.js";
+var _Basic_args;
+var meta = {
+  title: "Forms/TextArea",
+  component: TextArea,
+  parameters: {
+    docs: {
+      description: {
+        component: "A textarea component with form integration for multi-line text input."
+      }
+    }
+  },
+  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"]
+    },
+    maxLength: {
+      control: "number"
+    },
+    autoResize: {
+      control: "boolean"
+    },
+    value: {
+      control: "text"
+    }
+  }
+};
+var TextArea_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          title: "",
+          description: "",
+          notes: "Some default notes..."
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */_jsx(Form, {
+        form,
+        className: "max-w-md",
+        children: /* @__PURE__ */_jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */_jsx(TextArea, {
+            label: "Title",
+            name: "title",
+            textAreaProps: {
+              placeholder: "Enter a title"
+            },
+            required: true
+          }), /* @__PURE__ */_jsx(TextArea, {
+            label: "Description",
+            name: "description",
+            textAreaProps: {
+              placeholder: "Enter a detailed description",
+              numberOfLines: 4
+            },
+            helperText: "Provide as much detail as possible"
+          }), /* @__PURE__ */_jsx(TextArea, {
+            label: "Additional Notes",
+            name: "notes",
+            textAreaProps: {
+              placeholder: "Any additional notes...",
+              numberOfLines: 3
+            }
+          }), /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            children: "Save"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Description",
+    placeholder: "Enter description...",
+    helperText: "Up to 500 characters",
+    disabled: false,
+    required: false,
+    size: "$3"
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */_jsx(TextArea, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Description",
+    helperText: "Enter a detailed description",
+    name: "description",
+    textAreaProps: {
+      placeholder: "Type your description here..."
+    },
+    onChangeText: action("onChangeText")
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    textAreaProps: {
+      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(TextArea, {
+        label: "Small",
+        size: "$2",
+        textAreaProps: {
+          placeholder: "Small textarea"
+        }
+      }), /* @__PURE__ */_jsx(TextArea, {
+        label: "Medium (default)",
+        size: "$3",
+        textAreaProps: {
+          placeholder: "Medium textarea"
+        }
+      }), /* @__PURE__ */_jsx(TextArea, {
+        label: "Large",
+        size: "$4",
+        textAreaProps: {
+          placeholder: "Large textarea"
+        }
+      })]
+    });
+  }
+};
+var WithMaxLength = {
+  args: {
+    ...Basic.args,
+    textAreaProps: {
+      ...((_Basic_args = Basic.args) === null || _Basic_args === void 0 ? void 0 : _Basic_args.textAreaProps),
+      maxLength: 100
+    },
+    helperText: "Maximum 100 characters"
+  }
+};
+var AutoResize = {
+  render: function render4() {
+    var AutoResizeExample = function AutoResizeExample2() {
+      var [val, setVal] = useState("");
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        padding: "$4",
+        maxWidth: 500,
+        children: [/* @__PURE__ */_jsx(Paragraph, {
+          size: "$3",
+          fontWeight: "bold",
+          children: "Auto-resize TextArea"
+        }), /* @__PURE__ */_jsx(Paragraph, {
+          size: "$2",
+          color: "$placeholderColor",
+          children: "This textarea grows as you type, up to the maxRows limit (6 rows). Try pasting or typing multiple lines."
+        }), /* @__PURE__ */_jsx(TextArea, {
+          label: "Auto-growing notes",
+          autoResize: true,
+          minRows: 2,
+          maxRows: 6,
+          value: val,
+          onChangeText: function onChangeText(text) {
+            setVal(text);
+            action("onChangeText")(text);
+          },
+          textAreaProps: {
+            placeholder: "Start typing to see it grow..."
+          },
+          showCount: true
+        }), /* @__PURE__ */_jsx(TextArea, {
+          label: "Default (no auto-resize)",
+          value: val,
+          onChangeText: setVal,
+          textAreaProps: {
+            placeholder: "Fixed height for comparison"
+          }
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(AutoResizeExample, {});
+  }
+};
+var Comparison = {
+  render: function render5() {
+    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 TextArea"
+          }), /* @__PURE__ */_jsx(TextArea, {
+            textAreaProps: {
+              placeholder: "Type here..."
+            },
+            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 TextArea"
+          }), /* @__PURE__ */_jsx(TamaguiTextArea, {
+            placeholder: "Type here...",
+            value: tamaguiVal,
+            onChangeText: function onChangeText(text) {
+              setTamaguiVal(text);
+              action("tamagui.onChangeText")(text);
+            }
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(ComparisonExample, {});
+  }
+};
+export { AutoResize, Basic, Comparison, Disabled, Main, Sizes, Standalone, WithError, WithMaxLength, TextArea_stories_default as default };
+//# sourceMappingURL=TextArea.stories.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","action","useForm","useState","Paragraph","TextArea","TamaguiTextArea","XStack","YStack","Button","Form","_Basic_args","meta","title","component","parameters","docs","description","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","maxLength","autoResize","value","TextArea_stories_default","Main","name","render","FormExample","FormExample2","form","defaultValues","notes","onSubmit","param","className","children","gap","textAreaProps","numberOfLines","Standalone","args","render2","Basic","onChangeText","Disabled","WithError","Sizes","render3","maxWidth","WithMaxLength","AutoResize","render4","AutoResizeExample","AutoResizeExample2","val","setVal","padding","fontWeight","color"],"sources":["../../../../src/fields/TextArea/TextArea.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}