@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,325 @@
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Label, Paragraph, RadioGroup as TamaguiRadioGroup, Text, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { RadioGroup } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    docs: {
+      description: {
+        component: "A radio group component with form integration for single selection."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the radio group"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the radio group"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the radio group is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the radio group is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the radio group"
+    },
+    value: {
+      control: "text",
+      description: "The selected value"
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Layout orientation of the radio group"
+    }
+  }
+};
+var RadioGroup_stories_default = meta;
+const sampleOptions = [{
+  value: "option1",
+  label: "Option 1"
+}, {
+  value: "option2",
+  label: "Option 2"
+}, {
+  value: "option3",
+  label: "Option 3"
+}];
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          role: "",
+          notifications: "enabled",
+          theme: ""
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        className: "max-w-md",
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(RadioGroup, {
+            label: "User Role",
+            name: "role",
+            helperText: "Select your role in the system",
+            required: true,
+            options: [{
+              value: "admin",
+              label: "Admin"
+            }, {
+              value: "user",
+              label: "User"
+            }, {
+              value: "guest",
+              label: "Guest"
+            }]
+          }), /* @__PURE__ */jsx(RadioGroup, {
+            label: "Email Notifications",
+            name: "notifications",
+            helperText: "Choose how you want to receive notifications",
+            options: [{
+              value: "enabled",
+              label: "Enabled"
+            }, {
+              value: "disabled",
+              label: "Disabled"
+            }]
+          }), /* @__PURE__ */jsx(RadioGroup, {
+            label: "Theme Preference",
+            name: "theme",
+            helperText: "Select your preferred theme",
+            orientation: "horizontal",
+            options: [{
+              value: "light",
+              label: "Light"
+            }, {
+              value: "dark",
+              label: "Dark"
+            }, {
+              value: "auto",
+              label: "Auto"
+            }]
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Save Preferences"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Favorite color",
+    helperText: "Pick one",
+    options: sampleOptions
+  },
+  render: args => /* @__PURE__ */jsx(RadioGroup, {
+    ...args
+  })
+};
+const Basic = {
+  args: {
+    label: "Choose an option",
+    helperText: "Select one option from the list",
+    name: "basic",
+    value: "option1",
+    options: sampleOptions,
+    onValueChange: action("onValueChange")
+  }
+};
+const Horizontal = {
+  args: {
+    label: "Horizontal Layout",
+    helperText: "Options arranged horizontally",
+    name: "horizontal",
+    orientation: "horizontal",
+    options: sampleOptions
+  }
+};
+const WithChildren = {
+  args: {
+    label: "Custom children",
+    helperText: "Using children instead of options prop",
+    name: "custom"
+  },
+  render: args => /* @__PURE__ */jsx(RadioGroup, {
+    ...args,
+    children: /* @__PURE__ */jsx(YStack, {
+      gap: "$2",
+      children: sampleOptions.map(option => /* @__PURE__ */jsxs(XStack, {
+        gap: "$2",
+        alignItems: "center",
+        children: [/* @__PURE__ */jsx(TamaguiRadioGroup.Item, {
+          value: option.value,
+          id: option.value,
+          children: /* @__PURE__ */jsx(TamaguiRadioGroup.Indicator, {})
+        }), /* @__PURE__ */jsx(Label, {
+          htmlFor: option.value,
+          children: option.label
+        })]
+      }, option.value))
+    })
+  })
+};
+const Pointy = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(RadioGroup, {
+      label: "Pointy (hard angles)",
+      pointy: true,
+      options: sampleOptions,
+      defaultValue: "option1"
+    }), /* @__PURE__ */jsx(RadioGroup, {
+      label: "Regular (default)",
+      pointy: false,
+      options: sampleOptions,
+      defaultValue: "option1"
+    })]
+  })
+};
+const Disabled = {
+  args: {
+    label: "Disabled Radio Group",
+    disabled: true,
+    options: sampleOptions,
+    value: "option1"
+  }
+};
+const WithError = {
+  args: {
+    label: "Radio Group with Error",
+    error: "This field is required",
+    required: true,
+    options: sampleOptions
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(RadioGroup, {
+      label: "Small",
+      size: "$2",
+      options: sampleOptions
+    }), /* @__PURE__ */jsx(RadioGroup, {
+      label: "Medium (default)",
+      size: "$3",
+      options: sampleOptions
+    }), /* @__PURE__ */jsx(RadioGroup, {
+      label: "Large",
+      size: "$4",
+      options: sampleOptions
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState("");
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */jsx(RadioGroup, {
+          label: "Select an option",
+          options: sampleOptions,
+          value,
+          onValueChange: setValue
+        }), /* @__PURE__ */jsxs(Text, {
+          children: ["Selected: ", value || "None"]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+const Comparison = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customVal, setCustomVal] = useState("option1");
+      const [tamaguiVal, setTamaguiVal] = useState("option1");
+      return /* @__PURE__ */jsxs(XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */jsxs(YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom RadioGroup"
+          }), /* @__PURE__ */jsx(RadioGroup, {
+            options: sampleOptions,
+            value: customVal,
+            onValueChange: val => {
+              setCustomVal(val);
+              action("custom.onValueChange")(val);
+            }
+          })]
+        }), /* @__PURE__ */jsxs(YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui RadioGroup"
+          }), /* @__PURE__ */jsx(TamaguiRadioGroup, {
+            value: tamaguiVal,
+            onValueChange: val => {
+              setTamaguiVal(val);
+              action("tamagui.onValueChange")(val);
+            },
+            children: /* @__PURE__ */jsx(YStack, {
+              gap: "$2",
+              children: sampleOptions.map(option => /* @__PURE__ */jsxs(XStack, {
+                gap: "$2",
+                alignItems: "center",
+                children: [/* @__PURE__ */jsx(TamaguiRadioGroup.Item, {
+                  value: option.value,
+                  id: `t-${option.value}`,
+                  children: /* @__PURE__ */jsx(TamaguiRadioGroup.Indicator, {})
+                }), /* @__PURE__ */jsx(Label, {
+                  htmlFor: `t-${option.value}`,
+                  children: option.label
+                })]
+              }, option.value))
+            })
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, Horizontal, Interactive, Main, Pointy, Sizes, Standalone, WithChildren, WithError, RadioGroup_stories_default as default };
+//# sourceMappingURL=RadioGroup.stories.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","Label","Paragraph","RadioGroup","TamaguiRadioGroup","Text","XStack","YStack","Button","Form","jsx","jsxs","meta","title","component","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","size","options","value","orientation","RadioGroup_stories_default","sampleOptions","Main","name","render","FormExample","form","defaultValues","role","notifications","theme","onSubmit","className","children","gap","Standalone","args","Basic","onValueChange","Horizontal","WithChildren","map","option","alignItems","Item","id","Indicator","htmlFor","Pointy","maxWidth","pointy","defaultValue","Disabled","WithError","Sizes","Interactive","InteractiveExample","setValue","Comparison","ComparisonExample","customVal","setCustomVal","tamaguiVal","setTamaguiVal","padding","width","color","val"],"sources":["../../../../src/fields/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/fields/RadioGroup/RadioGroup.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 { Label, Paragraph, RadioGroup as TamaguiRadioGroup, Text, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { RadioGroup } from "./index.native.js";
+var meta = {
+  title: "Forms/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    docs: {
+      description: {
+        component: "A radio group component with form integration for single selection."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the radio group"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the radio group"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the radio group is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the radio group is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the radio group"
+    },
+    value: {
+      control: "text",
+      description: "The selected value"
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Layout orientation of the radio group"
+    }
+  }
+};
+var RadioGroup_stories_default = meta;
+var sampleOptions = [{
+  value: "option1",
+  label: "Option 1"
+}, {
+  value: "option2",
+  label: "Option 2"
+}, {
+  value: "option3",
+  label: "Option 3"
+}];
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          role: "",
+          notifications: "enabled",
+          theme: ""
+        },
+        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(RadioGroup, {
+            label: "User Role",
+            name: "role",
+            helperText: "Select your role in the system",
+            required: true,
+            options: [{
+              value: "admin",
+              label: "Admin"
+            }, {
+              value: "user",
+              label: "User"
+            }, {
+              value: "guest",
+              label: "Guest"
+            }]
+          }), /* @__PURE__ */_jsx(RadioGroup, {
+            label: "Email Notifications",
+            name: "notifications",
+            helperText: "Choose how you want to receive notifications",
+            options: [{
+              value: "enabled",
+              label: "Enabled"
+            }, {
+              value: "disabled",
+              label: "Disabled"
+            }]
+          }), /* @__PURE__ */_jsx(RadioGroup, {
+            label: "Theme Preference",
+            name: "theme",
+            helperText: "Select your preferred theme",
+            orientation: "horizontal",
+            options: [{
+              value: "light",
+              label: "Light"
+            }, {
+              value: "dark",
+              label: "Dark"
+            }, {
+              value: "auto",
+              label: "Auto"
+            }]
+          }), /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            children: "Save Preferences"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Favorite color",
+    helperText: "Pick one",
+    options: sampleOptions
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */_jsx(RadioGroup, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Choose an option",
+    helperText: "Select one option from the list",
+    name: "basic",
+    value: "option1",
+    options: sampleOptions,
+    onValueChange: action("onValueChange")
+  }
+};
+var Horizontal = {
+  args: {
+    label: "Horizontal Layout",
+    helperText: "Options arranged horizontally",
+    name: "horizontal",
+    orientation: "horizontal",
+    options: sampleOptions
+  }
+};
+var WithChildren = {
+  args: {
+    label: "Custom children",
+    helperText: "Using children instead of options prop",
+    name: "custom"
+  },
+  render: function render3(args) {
+    return /* @__PURE__ */_jsx(RadioGroup, {
+      ...args,
+      children: /* @__PURE__ */_jsx(YStack, {
+        gap: "$2",
+        children: sampleOptions.map(function (option) {
+          return /* @__PURE__ */_jsxs(XStack, {
+            gap: "$2",
+            alignItems: "center",
+            children: [/* @__PURE__ */_jsx(TamaguiRadioGroup.Item, {
+              value: option.value,
+              id: option.value,
+              children: /* @__PURE__ */_jsx(TamaguiRadioGroup.Indicator, {})
+            }), /* @__PURE__ */_jsx(Label, {
+              htmlFor: option.value,
+              children: option.label
+            })]
+          }, option.value);
+        })
+      })
+    });
+  }
+};
+var Pointy = {
+  render: function render4() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(RadioGroup, {
+        label: "Pointy (hard angles)",
+        pointy: true,
+        options: sampleOptions,
+        defaultValue: "option1"
+      }), /* @__PURE__ */_jsx(RadioGroup, {
+        label: "Regular (default)",
+        pointy: false,
+        options: sampleOptions,
+        defaultValue: "option1"
+      })]
+    });
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Radio Group",
+    disabled: true,
+    options: sampleOptions,
+    value: "option1"
+  }
+};
+var WithError = {
+  args: {
+    label: "Radio Group with Error",
+    error: "This field is required",
+    required: true,
+    options: sampleOptions
+  }
+};
+var Sizes = {
+  render: function render5() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(RadioGroup, {
+        label: "Small",
+        size: "$2",
+        options: sampleOptions
+      }), /* @__PURE__ */_jsx(RadioGroup, {
+        label: "Medium (default)",
+        size: "$3",
+        options: sampleOptions
+      }), /* @__PURE__ */_jsx(RadioGroup, {
+        label: "Large",
+        size: "$4",
+        options: sampleOptions
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render6() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = useState("");
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */_jsx(RadioGroup, {
+          label: "Select an option",
+          options: sampleOptions,
+          value,
+          onValueChange: setValue
+        }), /* @__PURE__ */_jsxs(Text, {
+          children: ["Selected: ", value || "None"]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(InteractiveExample, {});
+  }
+};
+var Comparison = {
+  render: function render7() {
+    var ComparisonExample = function ComparisonExample2() {
+      var [customVal, setCustomVal] = useState("option1");
+      var [tamaguiVal, setTamaguiVal] = useState("option1");
+      return /* @__PURE__ */_jsxs(XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */_jsxs(YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom RadioGroup"
+          }), /* @__PURE__ */_jsx(RadioGroup, {
+            options: sampleOptions,
+            value: customVal,
+            onValueChange: function onValueChange(val) {
+              setCustomVal(val);
+              action("custom.onValueChange")(val);
+            }
+          })]
+        }), /* @__PURE__ */_jsxs(YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui RadioGroup"
+          }), /* @__PURE__ */_jsx(TamaguiRadioGroup, {
+            value: tamaguiVal,
+            onValueChange: function onValueChange(val) {
+              setTamaguiVal(val);
+              action("tamagui.onValueChange")(val);
+            },
+            children: /* @__PURE__ */_jsx(YStack, {
+              gap: "$2",
+              children: sampleOptions.map(function (option) {
+                return /* @__PURE__ */_jsxs(XStack, {
+                  gap: "$2",
+                  alignItems: "center",
+                  children: [/* @__PURE__ */_jsx(TamaguiRadioGroup.Item, {
+                    value: option.value,
+                    id: `t-${option.value}`,
+                    children: /* @__PURE__ */_jsx(TamaguiRadioGroup.Indicator, {})
+                  }), /* @__PURE__ */_jsx(Label, {
+                    htmlFor: `t-${option.value}`,
+                    children: option.label
+                  })]
+                }, option.value);
+              })
+            })
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, Horizontal, Interactive, Main, Pointy, Sizes, Standalone, WithChildren, WithError, RadioGroup_stories_default as default };
+//# sourceMappingURL=RadioGroup.stories.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","action","useForm","useState","Label","Paragraph","RadioGroup","TamaguiRadioGroup","Text","XStack","YStack","Button","Form","meta","title","component","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","size","options","value","orientation","RadioGroup_stories_default","sampleOptions","Main","name","render","FormExample","FormExample2","form","defaultValues","role","notifications","theme","onSubmit","param","className","children","gap","Standalone","args","render2","Basic","onValueChange","Horizontal","WithChildren","render3","map","option","alignItems","Item","id","Indicator","htmlFor","Pointy","render4","maxWidth","pointy","defaultValue","Disabled","WithError","Sizes","render5"],"sources":["../../../../src/fields/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}