@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/Slider/Slider.stories.mjs

@@ -0,0 +1,268 @@
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Paragraph, Slider as TamaguiSlider, Text, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { Slider } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/Slider",
+  component: Slider,
+  parameters: {
+    docs: {
+      description: {
+        component: "A slider field component with form integration for selecting values within a range."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the slider"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the slider"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the slider is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the slider is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the slider"
+    },
+    min: {
+      control: "number",
+      description: "Minimum slider value"
+    },
+    max: {
+      control: "number",
+      description: "Maximum slider value"
+    },
+    step: {
+      control: "number",
+      description: "Step increment for slider"
+    },
+    value: {
+      control: "object",
+      description: "Current slider value(s) as array"
+    }
+  }
+};
+var Slider_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          brightness: [80],
+          contrast: [50],
+          saturation: [70]
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        maxWidth: 400,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(Slider, {
+            label: "Brightness",
+            name: "brightness",
+            min: 0,
+            max: 100,
+            helperText: "Adjust image brightness"
+          }), /* @__PURE__ */jsx(Slider, {
+            label: "Contrast",
+            name: "contrast",
+            min: 0,
+            max: 100,
+            helperText: "Adjust image contrast"
+          }), /* @__PURE__ */jsx(Slider, {
+            label: "Saturation",
+            name: "saturation",
+            min: 0,
+            max: 100,
+            helperText: "Adjust color saturation"
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Apply Settings"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Volume",
+    helperText: "Adjust the volume",
+    min: 0,
+    max: 100,
+    step: 1
+  },
+  render: args => /* @__PURE__ */jsx(Slider, {
+    ...args,
+    defaultValue: [50]
+  })
+};
+const Basic = {
+  args: {
+    label: "Volume Level",
+    helperText: "Adjust the volume from 0 to 100",
+    name: "volume",
+    value: [50],
+    min: 0,
+    max: 100,
+    onValueChange: action("onValueChange")
+  }
+};
+const RangeSlider = {
+  args: {
+    label: "Price Range",
+    helperText: "Select minimum and maximum price",
+    name: "priceRange",
+    value: [25, 75],
+    min: 0,
+    max: 100,
+    onValueChange: action("onValueChange")
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled Slider",
+    disabled: true,
+    value: [40],
+    min: 0,
+    max: 100
+  }
+};
+const WithError = {
+  args: {
+    label: "Slider with Error",
+    error: "This field is required",
+    required: true,
+    value: [0],
+    min: 0,
+    max: 100
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(Slider, {
+      label: "Small",
+      size: "$2",
+      value: [30],
+      min: 0,
+      max: 100
+    }), /* @__PURE__ */jsx(Slider, {
+      label: "Medium (default)",
+      size: "$3",
+      value: [50],
+      min: 0,
+      max: 100
+    }), /* @__PURE__ */jsx(Slider, {
+      label: "Large",
+      size: "$4",
+      value: [70],
+      min: 0,
+      max: 100
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState([50]);
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */jsx(Slider, {
+          label: "Adjust Value",
+          value,
+          min: 0,
+          max: 100,
+          onValueChange: setValue
+        }), /* @__PURE__ */jsxs(Text, {
+          children: ["Current value: ", value[0]]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+const Comparison = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customVal, setCustomVal] = useState([50]);
+      const [tamaguiVal, setTamaguiVal] = useState([50]);
+      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 Slider"
+          }), /* @__PURE__ */jsx(Slider, {
+            value: customVal,
+            min: 0,
+            max: 100,
+            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 Slider"
+          }), /* @__PURE__ */jsxs(TamaguiSlider, {
+            value: tamaguiVal,
+            min: 0,
+            max: 100,
+            onValueChange: val => {
+              setTamaguiVal(val);
+              action("tamagui.onValueChange")(val);
+            },
+            children: [/* @__PURE__ */jsx(TamaguiSlider.Track, {
+              children: /* @__PURE__ */jsx(TamaguiSlider.TrackActive, {})
+            }), /* @__PURE__ */jsx(TamaguiSlider.Thumb, {
+              index: 0,
+              circular: true,
+              elevate: true
+            })]
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, Interactive, Main, RangeSlider, Sizes, Standalone, WithError, Slider_stories_default as default };
+//# sourceMappingURL=Slider.stories.mjs.map

package/dist/jsx/fields/Slider/Slider.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","Paragraph","Slider","TamaguiSlider","Text","XStack","YStack","Button","Form","jsx","jsxs","meta","title","component","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","size","options","min","max","step","value","Slider_stories_default","Main","name","render","FormExample","form","defaultValues","brightness","contrast","saturation","onSubmit","maxWidth","children","gap","Standalone","args","defaultValue","Basic","onValueChange","RangeSlider","Disabled","WithError","Sizes","Interactive","InteractiveExample","setValue","Comparison","ComparisonExample","customVal","setCustomVal","tamaguiVal","setTamaguiVal","alignItems","padding","width","color","val","Track","TrackActive","Thumb","index","circular","elevate"],"sources":["../../../../src/fields/Slider/Slider.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Slider/Slider.stories.native.js

@@ -0,0 +1,310 @@
+"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 Slider_stories_exports = {};
+__export(Slider_stories_exports, {
+  Basic: () => Basic,
+  Comparison: () => Comparison,
+  Disabled: () => Disabled,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  RangeSlider: () => RangeSlider,
+  Sizes: () => Sizes,
+  Standalone: () => Standalone,
+  WithError: () => WithError,
+  default: () => Slider_stories_default
+});
+module.exports = __toCommonJS(Slider_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react_form = require("@tanstack/react-form");
+var import_react = 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/Slider",
+  component: import_index.Slider,
+  parameters: {
+    docs: {
+      description: {
+        component: "A slider field component with form integration for selecting values within a range."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the slider"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the slider"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the slider is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the slider is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the slider"
+    },
+    min: {
+      control: "number",
+      description: "Minimum slider value"
+    },
+    max: {
+      control: "number",
+      description: "Maximum slider value"
+    },
+    step: {
+      control: "number",
+      description: "Step increment for slider"
+    },
+    value: {
+      control: "object",
+      description: "Current slider value(s) as array"
+    }
+  }
+};
+var Slider_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          brightness: [80],
+          contrast: [50],
+          saturation: [70]
+        },
+        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,
+        maxWidth: 400,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Slider, {
+            label: "Brightness",
+            name: "brightness",
+            min: 0,
+            max: 100,
+            helperText: "Adjust image brightness"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Slider, {
+            label: "Contrast",
+            name: "contrast",
+            min: 0,
+            max: 100,
+            helperText: "Adjust image contrast"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Slider, {
+            label: "Saturation",
+            name: "saturation",
+            min: 0,
+            max: 100,
+            helperText: "Adjust color saturation"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Apply Settings"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Volume",
+    helperText: "Adjust the volume",
+    min: 0,
+    max: 100,
+    step: 1
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Slider, {
+      ...args,
+      defaultValue: [50]
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Volume Level",
+    helperText: "Adjust the volume from 0 to 100",
+    name: "volume",
+    value: [50],
+    min: 0,
+    max: 100,
+    onValueChange: (0, import_storybook.action)("onValueChange")
+  }
+};
+var RangeSlider = {
+  args: {
+    label: "Price Range",
+    helperText: "Select minimum and maximum price",
+    name: "priceRange",
+    value: [25, 75],
+    min: 0,
+    max: 100,
+    onValueChange: (0, import_storybook.action)("onValueChange")
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Slider",
+    disabled: true,
+    value: [40],
+    min: 0,
+    max: 100
+  }
+};
+var WithError = {
+  args: {
+    label: "Slider with Error",
+    error: "This field is required",
+    required: true,
+    value: [0],
+    min: 0,
+    max: 100
+  }
+};
+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.Slider, {
+        label: "Small",
+        size: "$2",
+        value: [30],
+        min: 0,
+        max: 100
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Slider, {
+        label: "Medium (default)",
+        size: "$3",
+        value: [50],
+        min: 0,
+        max: 100
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Slider, {
+        label: "Large",
+        size: "$4",
+        value: [70],
+        min: 0,
+        max: 100
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render4() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = (0, import_react.useState)([50]);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Slider, {
+          label: "Adjust Value",
+          value,
+          min: 0,
+          max: 100,
+          onValueChange: setValue
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          children: ["Current value: ", value[0]]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveExample, {});
+  }
+};
+var Comparison = {
+  render: function render5() {
+    var ComparisonExample = function ComparisonExample2() {
+      var [customVal, setCustomVal] = (0, import_react.useState)([50]);
+      var [tamaguiVal, setTamaguiVal] = (0, import_react.useState)([50]);
+      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 Slider"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Slider, {
+            value: customVal,
+            min: 0,
+            max: 100,
+            onValueChange: function onValueChange(val) {
+              setCustomVal(val);
+              (0, import_storybook.action)("custom.onValueChange")(val);
+            }
+          })]
+        }), /* @__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 Slider"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
+            value: tamaguiVal,
+            min: 0,
+            max: 100,
+            onValueChange: function onValueChange(val) {
+              setTamaguiVal(val);
+              (0, import_storybook.action)("tamagui.onValueChange")(val);
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {})
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Thumb, {
+              index: 0,
+              circular: true,
+              elevate: true
+            })]
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComparisonExample, {});
+  }
+};
+//# sourceMappingURL=Slider.stories.native.js.map

package/dist/jsx/fields/Slider/Slider.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Slider_stories_exports","Basic","Comparison","Disabled","Interactive","Main","RangeSlider","Sizes","Standalone","WithError","default","Slider_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react_form","import_react","import_tamagui","import_Button","import_Form","import_index","meta","title","component","Slider","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","size","options","min","max","step","render","FormExample","FormExample2","form","useForm","defaultValues","brightness","contrast","saturation","onSubmit","param","action","jsx","Form","maxWidth","children","jsxs","YStack","gap","Button","args","render2","defaultValue","onValueChange","render3"],"sources":["../../../../src/fields/Slider/Slider.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}