@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,329 @@
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Paragraph, SizableText, Text, ToggleGroup as TamaguiToggleGroup, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { ToggleGroup } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/ToggleGroup",
+  component: ToggleGroup,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the toggle group"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the toggle group"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the toggle group is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the toggle group is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the toggle group"
+    },
+    type: {
+      control: "select",
+      options: ["single", "multiple"],
+      description: "Whether single or multiple items can be selected"
+    }
+  }
+};
+var ToggleGroup_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          alignment: "center",
+          features: ["comments"]
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(ToggleGroup, {
+            label: "Alignment",
+            name: "alignment",
+            type: "single",
+            options: [{
+              label: "Left",
+              value: "left"
+            }, {
+              label: "Center",
+              value: "center"
+            }, {
+              label: "Right",
+              value: "right"
+            }]
+          }), /* @__PURE__ */jsx(ToggleGroup, {
+            label: "Enabled features",
+            name: "features",
+            type: "multiple",
+            options: [{
+              label: "Comments",
+              value: "comments"
+            }, {
+              label: "Mentions",
+              value: "mentions"
+            }, {
+              label: "Attachments",
+              value: "attachments"
+            }]
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Alignment",
+    helperText: "Choose alignment",
+    type: "single",
+    defaultValue: "left",
+    options: [{
+      label: "Left",
+      value: "left"
+    }, {
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Right",
+      value: "right"
+    }]
+  },
+  render: args => /* @__PURE__ */jsx(ToggleGroup, {
+    ...args
+  })
+};
+const Basic = {
+  args: {
+    label: "Text alignment",
+    helperText: "Choose one alignment",
+    type: "single",
+    defaultValue: "left",
+    options: [{
+      label: "Left",
+      value: "left"
+    }, {
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Right",
+      value: "right"
+    }],
+    onValueChange: action("onValueChange")
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled Toggle Group",
+    disabled: true,
+    type: "single",
+    defaultValue: "left",
+    options: [{
+      label: "Left",
+      value: "left"
+    }, {
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Right",
+      value: "right"
+    }]
+  }
+};
+const WithError = {
+  args: {
+    label: "Toggle Group with Error",
+    error: "This field is required",
+    required: true,
+    type: "single",
+    options: [{
+      label: "Left",
+      value: "left"
+    }, {
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Right",
+      value: "right"
+    }]
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(ToggleGroup, {
+      label: "Small",
+      size: "$2",
+      type: "single",
+      defaultValue: "left",
+      options: [{
+        label: "Left",
+        value: "left"
+      }, {
+        label: "Center",
+        value: "center"
+      }, {
+        label: "Right",
+        value: "right"
+      }]
+    }), /* @__PURE__ */jsx(ToggleGroup, {
+      label: "Medium (default)",
+      size: "$3",
+      type: "single",
+      defaultValue: "center",
+      options: [{
+        label: "Left",
+        value: "left"
+      }, {
+        label: "Center",
+        value: "center"
+      }, {
+        label: "Right",
+        value: "right"
+      }]
+    }), /* @__PURE__ */jsx(ToggleGroup, {
+      label: "Large",
+      size: "$4",
+      type: "single",
+      defaultValue: "right",
+      options: [{
+        label: "Left",
+        value: "left"
+      }, {
+        label: "Center",
+        value: "center"
+      }, {
+        label: "Right",
+        value: "right"
+      }]
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState("left");
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */jsx(ToggleGroup, {
+          label: "Text alignment",
+          type: "single",
+          value,
+          onValueChange: val => setValue(val),
+          options: [{
+            label: "Left",
+            value: "left"
+          }, {
+            label: "Center",
+            value: "center"
+          }, {
+            label: "Right",
+            value: "right"
+          }]
+        }), /* @__PURE__ */jsxs(Text, {
+          children: ["Selected: ", value]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+const alignmentOptions = [{
+  label: "Left",
+  value: "left"
+}, {
+  label: "Center",
+  value: "center"
+}, {
+  label: "Right",
+  value: "right"
+}];
+const Comparison = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customVal, setCustomVal] = useState("left");
+      const [tamaguiVal, setTamaguiVal] = useState("left");
+      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 ToggleGroup"
+          }), /* @__PURE__ */jsx(ToggleGroup, {
+            type: "single",
+            value: customVal,
+            options: alignmentOptions,
+            onValueChange: val => {
+              setCustomVal(val);
+              action("custom.onValueChange")(val);
+            }
+          })]
+        }), /* @__PURE__ */jsxs(YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui ToggleGroup"
+          }), /* @__PURE__ */jsx(TamaguiToggleGroup, {
+            type: "single",
+            value: tamaguiVal,
+            onValueChange: val => {
+              setTamaguiVal(val);
+              action("tamagui.onValueChange")(val);
+            },
+            children: alignmentOptions.map(opt => /* @__PURE__ */jsx(TamaguiToggleGroup.Item, {
+              value: opt.value,
+              children: /* @__PURE__ */jsx(SizableText, {
+                children: opt.label
+              })
+            }, opt.value))
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, Interactive, Main, Sizes, Standalone, WithError, ToggleGroup_stories_default as default };
+//# sourceMappingURL=ToggleGroup.stories.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","Paragraph","SizableText","Text","ToggleGroup","TamaguiToggleGroup","XStack","YStack","Button","Form","jsx","jsxs","meta","title","component","parameters","status","type","argTypes","label","control","description","helperText","error","required","disabled","size","options","ToggleGroup_stories_default","Main","name","render","FormExample","form","defaultValues","alignment","features","onSubmit","value","children","gap","Standalone","args","defaultValue","Basic","onValueChange","Disabled","WithError","Sizes","maxWidth","Interactive","InteractiveExample","setValue","val","alignmentOptions","Comparison","ComparisonExample","customVal","setCustomVal","tamaguiVal","setTamaguiVal","alignItems","padding","width","color","map","opt","Item"],"sources":["../../../../src/fields/ToggleGroup/ToggleGroup.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,338 @@
+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, SizableText, Text, ToggleGroup as TamaguiToggleGroup, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { ToggleGroup } from "./index.native.js";
+var meta = {
+  title: "Forms/ToggleGroup",
+  component: ToggleGroup,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the toggle group"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the toggle group"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the toggle group is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the toggle group is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the toggle group"
+    },
+    type: {
+      control: "select",
+      options: ["single", "multiple"],
+      description: "Whether single or multiple items can be selected"
+    }
+  }
+};
+var ToggleGroup_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          alignment: "center",
+          features: ["comments"]
+        },
+        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(ToggleGroup, {
+            label: "Alignment",
+            name: "alignment",
+            type: "single",
+            options: [{
+              label: "Left",
+              value: "left"
+            }, {
+              label: "Center",
+              value: "center"
+            }, {
+              label: "Right",
+              value: "right"
+            }]
+          }), /* @__PURE__ */_jsx(ToggleGroup, {
+            label: "Enabled features",
+            name: "features",
+            type: "multiple",
+            options: [{
+              label: "Comments",
+              value: "comments"
+            }, {
+              label: "Mentions",
+              value: "mentions"
+            }, {
+              label: "Attachments",
+              value: "attachments"
+            }]
+          }), /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Alignment",
+    helperText: "Choose alignment",
+    type: "single",
+    defaultValue: "left",
+    options: [{
+      label: "Left",
+      value: "left"
+    }, {
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Right",
+      value: "right"
+    }]
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */_jsx(ToggleGroup, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Text alignment",
+    helperText: "Choose one alignment",
+    type: "single",
+    defaultValue: "left",
+    options: [{
+      label: "Left",
+      value: "left"
+    }, {
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Right",
+      value: "right"
+    }],
+    onValueChange: action("onValueChange")
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Toggle Group",
+    disabled: true,
+    type: "single",
+    defaultValue: "left",
+    options: [{
+      label: "Left",
+      value: "left"
+    }, {
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Right",
+      value: "right"
+    }]
+  }
+};
+var WithError = {
+  args: {
+    label: "Toggle Group with Error",
+    error: "This field is required",
+    required: true,
+    type: "single",
+    options: [{
+      label: "Left",
+      value: "left"
+    }, {
+      label: "Center",
+      value: "center"
+    }, {
+      label: "Right",
+      value: "right"
+    }]
+  }
+};
+var Sizes = {
+  render: function render3() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(ToggleGroup, {
+        label: "Small",
+        size: "$2",
+        type: "single",
+        defaultValue: "left",
+        options: [{
+          label: "Left",
+          value: "left"
+        }, {
+          label: "Center",
+          value: "center"
+        }, {
+          label: "Right",
+          value: "right"
+        }]
+      }), /* @__PURE__ */_jsx(ToggleGroup, {
+        label: "Medium (default)",
+        size: "$3",
+        type: "single",
+        defaultValue: "center",
+        options: [{
+          label: "Left",
+          value: "left"
+        }, {
+          label: "Center",
+          value: "center"
+        }, {
+          label: "Right",
+          value: "right"
+        }]
+      }), /* @__PURE__ */_jsx(ToggleGroup, {
+        label: "Large",
+        size: "$4",
+        type: "single",
+        defaultValue: "right",
+        options: [{
+          label: "Left",
+          value: "left"
+        }, {
+          label: "Center",
+          value: "center"
+        }, {
+          label: "Right",
+          value: "right"
+        }]
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render4() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = useState("left");
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */_jsx(ToggleGroup, {
+          label: "Text alignment",
+          type: "single",
+          value,
+          onValueChange: function onValueChange(val) {
+            return setValue(val);
+          },
+          options: [{
+            label: "Left",
+            value: "left"
+          }, {
+            label: "Center",
+            value: "center"
+          }, {
+            label: "Right",
+            value: "right"
+          }]
+        }), /* @__PURE__ */_jsxs(Text, {
+          children: ["Selected: ", value]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(InteractiveExample, {});
+  }
+};
+var alignmentOptions = [{
+  label: "Left",
+  value: "left"
+}, {
+  label: "Center",
+  value: "center"
+}, {
+  label: "Right",
+  value: "right"
+}];
+var Comparison = {
+  render: function render5() {
+    var ComparisonExample = function ComparisonExample2() {
+      var [customVal, setCustomVal] = useState("left");
+      var [tamaguiVal, setTamaguiVal] = useState("left");
+      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 ToggleGroup"
+          }), /* @__PURE__ */_jsx(ToggleGroup, {
+            type: "single",
+            value: customVal,
+            options: alignmentOptions,
+            onValueChange: function onValueChange(val) {
+              setCustomVal(val);
+              action("custom.onValueChange")(val);
+            }
+          })]
+        }), /* @__PURE__ */_jsxs(YStack, {
+          gap: "$3",
+          width: 300,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui ToggleGroup"
+          }), /* @__PURE__ */_jsx(TamaguiToggleGroup, {
+            type: "single",
+            value: tamaguiVal,
+            onValueChange: function onValueChange(val) {
+              setTamaguiVal(val);
+              action("tamagui.onValueChange")(val);
+            },
+            children: alignmentOptions.map(function (opt) {
+              return /* @__PURE__ */_jsx(TamaguiToggleGroup.Item, {
+                value: opt.value,
+                children: /* @__PURE__ */_jsx(SizableText, {
+                  children: opt.label
+                })
+              }, opt.value);
+            })
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, Interactive, Main, Sizes, Standalone, WithError, ToggleGroup_stories_default as default };
+//# sourceMappingURL=ToggleGroup.stories.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","action","useForm","useState","Paragraph","SizableText","Text","ToggleGroup","TamaguiToggleGroup","XStack","YStack","Button","Form","meta","title","component","parameters","status","type","argTypes","label","control","description","helperText","error","required","disabled","size","options","ToggleGroup_stories_default","Main","name","render","FormExample","FormExample2","form","defaultValues","alignment","features","onSubmit","param","value","children","gap","Standalone","args","defaultValue","render2","Basic","onValueChange","Disabled","WithError","Sizes","render3","maxWidth"],"sources":["../../../../src/fields/ToggleGroup/ToggleGroup.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}