@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/Slider/Slider.stories.js

@@ -1,265 +1,265 @@
-import React, { useState, useEffect } from "react";
+import react, { useEffect, useState } from "react";
 import { Slider } from "./Slider.js";
 const meta = {
-  title: "Components/Form/Slider",
-  component: Slider,
-  argTypes: {
-    onValueChange: {
-      action: "onValueChange"
+    title: "Components/Form/Slider",
+    component: Slider,
+    argTypes: {
+        onValueChange: {
+            action: "onValueChange"
+        },
+        onValueCommit: {
+            action: "onValueCommit"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
     },
-    onValueCommit: {
-      action: "onValueCommit"
+    parameters: {
+        layout: "padded"
     },
-    disabled: {
-      control: "boolean",
-      defaultValue: false
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement(Slider, {
+            ...args,
+            value: value,
+            onValueChange: (value)=>setValue(value)
+        });
     }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement(Slider, Object.assign({}, args, {
-      value: value,
-      onValueChange: value => setValue(value)
-    }));
-  }
 };
-export default meta;
-export const Default = {};
-export const WithLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label"
-  }
+const Slider_stories = meta;
+const Default = {};
+const WithLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
 };
-export const WithLabelRequired = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true
-  }
+const WithLabelRequired = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
 };
-export const WithDescription = {
-  args: {
-    ...Default.args,
-    description: "Provide the required information for processing your request."
-  }
+const WithDescription = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const WithNotes = {
-  args: {
-    ...Default.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const WithNotes = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const WithErrors = {
-  args: {
-    ...Default.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const WithErrors = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Disabled = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    disabled: true
-  }
+const Disabled = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
 };
-export const FullExample = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true,
-    description: "Provide the required information for processing your request.",
-    note: "Note: Ensure your selection or input is accurate before proceeding.",
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const FullExample = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const WithSideLabel = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    labelPosition: "side"
-  }
+const WithSideLabel = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        labelPosition: "side"
+    }
 };
-export const WithSideLabelRequired = {
-  args: {
-    ...WithSideLabel.args,
-    required: true
-  }
+const WithSideLabelRequired = {
+    args: {
+        ...WithSideLabel.args,
+        required: true
+    }
 };
-export const WithSideLabelAndDescription = {
-  args: {
-    ...WithSideLabel.args,
-    description: "Provide the required information for processing your request."
-  }
+const WithSideLabelAndDescription = {
+    args: {
+        ...WithSideLabel.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const WithSideLabelAndNotes = {
-  args: {
-    ...WithSideLabel.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const WithSideLabelAndNotes = {
+    args: {
+        ...WithSideLabel.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const WithSideLabelAndErrors = {
-  args: {
-    ...WithSideLabel.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const WithSideLabelAndErrors = {
+    args: {
+        ...WithSideLabel.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const WithSideLabelDisabled = {
-  args: {
-    ...WithSideLabel.args,
-    label: "Any field label",
-    disabled: true
-  }
+const WithSideLabelDisabled = {
+    args: {
+        ...WithSideLabel.args,
+        label: "Any field label",
+        disabled: true
+    }
 };
-export const WithSideLabelFullExample = {
-  args: {
-    ...WithSideLabel.args,
-    label: "Any field label",
-    required: true,
-    description: "Provide the required information for processing your request.",
-    note: "Note: Ensure your selection or input is accurate before proceeding.",
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const WithSideLabelFullExample = {
+    args: {
+        ...WithSideLabel.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Documentation = {
-  render: args => {
-    const [value, setValue] = useState(args.value || 50);
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: ""
-    });
-
-    // Update value when args.value changes
-    useEffect(() => {
-      setValue(args.value ?? 50);
-    }, [args.value]);
-    const handleChange = newValue => {
-      setValue(newValue);
-      if (args.required && newValue === 0) {
-        setValidation({
-          isValid: false,
-          message: "Please select a value"
-        });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
+const Documentation = {
+    render: (args)=>{
+        const [value, setValue] = useState(args.value || 50);
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: ""
         });
-      }
-    };
-
-    // Validate on required change or value change
-    useEffect(() => {
-      if (args.required && value === 0) {
-        setValidation({
-          isValid: false,
-          message: "Please select a value"
+        useEffect(()=>{
+            setValue(args.value ?? 50);
+        }, [
+            args.value
+        ]);
+        const handleChange = (newValue)=>{
+            setValue(newValue);
+            args.required && 0 === newValue ? setValidation({
+                isValid: false,
+                message: "Please select a value"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        };
+        useEffect(()=>{
+            args.required && 0 === value ? setValidation({
+                isValid: false,
+                message: "Please select a value"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        }, [
+            args.required,
+            value
+        ]);
+        return /*#__PURE__*/ react.createElement(Slider, {
+            ...args,
+            value: value,
+            onValueChange: handleChange,
+            validation: validation,
+            required: args.required,
+            showTooltip: args.showTooltip,
+            transformValue: args.transformValue
         });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
-        });
-      }
-    }, [args.required, value]);
-    return /*#__PURE__*/React.createElement(Slider, Object.assign({}, args, {
-      value: value,
-      onValueChange: handleChange,
-      validation: validation,
-      required: args.required,
-      showTooltip: args.showTooltip,
-      transformValue: args.transformValue
-    }));
-  },
-  args: {
-    label: "Volume Level",
-    required: true,
-    disabled: false,
-    description: "Adjust the volume level of your device",
-    note: "Note: Higher values may cause distortion on some devices",
-    min: 0,
-    max: 100,
-    step: 1,
-    value: 50,
-    showTooltip: true,
-    transformValue: value => `${value}%`,
-    validation: undefined
-  },
-  argTypes: {
-    label: {
-      description: "Label text for the slider",
-      control: "text"
-    },
-    required: {
-      description: "Makes the field required when set to true",
-      control: "boolean"
-    },
-    disabled: {
-      description: "Disables the slider when set to true",
-      control: "boolean"
-    },
-    description: {
-      description: "Additional description text below the field",
-      control: "text"
-    },
-    note: {
-      description: "Additional note text below the field",
-      control: "text"
-    },
-    min: {
-      description: "Minimum value for the slider",
-      control: "number"
-    },
-    max: {
-      description: "Maximum value for the slider",
-      control: "number"
-    },
-    step: {
-      description: "Step increment for the slider",
-      control: "number"
-    },
-    value: {
-      description: "Current value of the slider",
-      control: "number"
-    },
-    showTooltip: {
-      description: "Whether to show a tooltip with the current value",
-      control: "boolean",
-      defaultValue: true
-    },
-    transformValue: {
-      description: "Function to transform the numeric value to display text"
-    },
-    labelPosition: {
-      description: "Position of the label relative to the slider",
-      control: "radio",
-      options: ["top", "side"]
-    },
-    validation: {
-      description: "Object containing validation state and message. Please refer to the example code for details on usage."
     },
-    onValueChange: {
-      description: "Function called when the slider value changes"
+    args: {
+        label: "Volume Level",
+        required: true,
+        disabled: false,
+        description: "Adjust the volume level of your device",
+        note: "Note: Higher values may cause distortion on some devices",
+        min: 0,
+        max: 100,
+        step: 1,
+        value: 50,
+        showTooltip: true,
+        transformValue: (value)=>`${value}%`,
+        validation: void 0
     },
-    onValueCommit: {
-      description: "Function called when the slider value is committed (on release)"
+    argTypes: {
+        label: {
+            description: "Label text for the slider",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the slider when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        min: {
+            description: "Minimum value for the slider",
+            control: "number"
+        },
+        max: {
+            description: "Maximum value for the slider",
+            control: "number"
+        },
+        step: {
+            description: "Step increment for the slider",
+            control: "number"
+        },
+        value: {
+            description: "Current value of the slider",
+            control: "number"
+        },
+        showTooltip: {
+            description: "Whether to show a tooltip with the current value",
+            control: "boolean",
+            defaultValue: true
+        },
+        transformValue: {
+            description: "Function to transform the numeric value to display text"
+        },
+        labelPosition: {
+            description: "Position of the label relative to the slider",
+            control: "radio",
+            options: [
+                "top",
+                "side"
+            ]
+        },
+        validation: {
+            description: "Object containing validation state and message. Please refer to the example code for details on usage."
+        },
+        onValueChange: {
+            description: "Function called when the slider value changes"
+        },
+        onValueCommit: {
+            description: "Function called when the slider value is committed (on release)"
+        }
     }
-  }
 };
+export default Slider_stories;
+export { Default, Disabled, Documentation, FullExample, WithDescription, WithErrors, WithLabel, WithLabelRequired, WithNotes, WithSideLabel, WithSideLabelAndDescription, WithSideLabelAndErrors, WithSideLabelAndNotes, WithSideLabelDisabled, WithSideLabelFullExample, WithSideLabelRequired };
 
 //# sourceMappingURL=Slider.stories.js.map

package/Slider/Slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","Slider","meta","title","component","argTypes","onValueChange","action","onValueCommit","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","Default","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","WithSideLabel","labelPosition","WithSideLabelRequired","WithSideLabelAndDescription","WithSideLabelAndNotes","WithSideLabelAndErrors","WithSideLabelDisabled","WithSideLabelFullExample","Documentation","setValidation","handleChange","newValue","showTooltip","transformValue","min","max","step","undefined","options"],"sources":["Slider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Slider } from \"./Slider.js\";\n\nconst meta: Meta<typeof Slider> = {\n    title: \"Components/Form/Slider\",\n    component: Slider,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onValueCommit: { action: \"onValueCommit\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Slider {...args} value={value} onValueChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Slider>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithSideLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        labelPosition: \"side\"\n    }\n};\n\nexport const WithSideLabelRequired: Story = {\n    args: {\n        ...WithSideLabel.args,\n        required: true\n    }\n};\n\nexport const WithSideLabelAndDescription: Story = {\n    args: {\n        ...WithSideLabel.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithSideLabelAndNotes: Story = {\n    args: {\n        ...WithSideLabel.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithSideLabelAndErrors: Story = {\n    args: {\n        ...WithSideLabel.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithSideLabelDisabled: Story = {\n    args: {\n        ...WithSideLabel.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithSideLabelFullExample: Story = {\n    args: {\n        ...WithSideLabel.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || 50);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value ?? 50);\n        }, [args.value]);\n\n        const handleChange = (newValue: number) => {\n            setValue(newValue);\n\n            if (args.required && newValue === 0) {\n                setValidation({ isValid: false, message: \"Please select a value\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && value === 0) {\n                setValidation({ isValid: false, message: \"Please select a value\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <Slider\n                {...args}\n                value={value}\n                onValueChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Volume Level\",\n        required: true,\n        disabled: false,\n        description: \"Adjust the volume level of your device\",\n        note: \"Note: Higher values may cause distortion on some devices\",\n        min: 0,\n        max: 100,\n        step: 1,\n        value: 50,\n        showTooltip: true,\n        transformValue: (value: number) => `${value}%`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the slider\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the slider when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        min: {\n            description: \"Minimum value for the slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the slider\",\n            control: \"number\"\n        },\n        value: {\n            description: \"Current value of the slider\",\n            control: \"number\"\n        },\n        showTooltip: {\n            description: \"Whether to show a tooltip with the current value\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description: \"Function to transform the numeric value to display text\"\n        },\n        labelPosition: {\n            description: \"Position of the label relative to the slider\",\n            control: \"radio\",\n            options: [\"top\", \"side\"]\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onValueChange: {\n            description: \"Function called when the slider value changes\"\n        },\n        onValueCommit: {\n            description: \"Function called when the slider value is committed (on release)\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider/Slider.stories.js","sources":["../../src/Slider/Slider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Slider } from \"./Slider.js\";\n\nconst meta: Meta<typeof Slider> = {\n    title: \"Components/Form/Slider\",\n    component: Slider,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onValueCommit: { action: \"onValueCommit\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Slider {...args} value={value} onValueChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Slider>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithSideLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        labelPosition: \"side\"\n    }\n};\n\nexport const WithSideLabelRequired: Story = {\n    args: {\n        ...WithSideLabel.args,\n        required: true\n    }\n};\n\nexport const WithSideLabelAndDescription: Story = {\n    args: {\n        ...WithSideLabel.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithSideLabelAndNotes: Story = {\n    args: {\n        ...WithSideLabel.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithSideLabelAndErrors: Story = {\n    args: {\n        ...WithSideLabel.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithSideLabelDisabled: Story = {\n    args: {\n        ...WithSideLabel.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithSideLabelFullExample: Story = {\n    args: {\n        ...WithSideLabel.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || 50);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setValue(args.value ?? 50);\n        }, [args.value]);\n\n        const handleChange = (newValue: number) => {\n            setValue(newValue);\n\n            if (args.required && newValue === 0) {\n                setValidation({ isValid: false, message: \"Please select a value\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && value === 0) {\n                setValidation({ isValid: false, message: \"Please select a value\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, value]);\n\n        return (\n            <Slider\n                {...args}\n                value={value}\n                onValueChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Volume Level\",\n        required: true,\n        disabled: false,\n        description: \"Adjust the volume level of your device\",\n        note: \"Note: Higher values may cause distortion on some devices\",\n        min: 0,\n        max: 100,\n        step: 1,\n        value: 50,\n        showTooltip: true,\n        transformValue: (value: number) => `${value}%`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the slider\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the slider when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        min: {\n            description: \"Minimum value for the slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the slider\",\n            control: \"number\"\n        },\n        value: {\n            description: \"Current value of the slider\",\n            control: \"number\"\n        },\n        showTooltip: {\n            description: \"Whether to show a tooltip with the current value\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description: \"Function to transform the numeric value to display text\"\n        },\n        labelPosition: {\n            description: \"Position of the label relative to the slider\",\n            control: \"radio\",\n            options: [\"top\", \"side\"]\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onValueChange: {\n            description: \"Function called when the slider value changes\"\n        },\n        onValueCommit: {\n            description: \"Function called when the slider value is committed (on release)\"\n        }\n    }\n};\n"],"names":["meta","Slider","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","WithSideLabel","WithSideLabelRequired","WithSideLabelAndDescription","WithSideLabelAndNotes","WithSideLabelAndErrors","WithSideLabelDisabled","WithSideLabelFullExample","Documentation","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":"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ACb,gBAAgB,CAACC,QAAkB,GAAGA,MAAM,CAAC,CAAC;QAC9C,YAAYwB;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,KAAK;YACD,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,gBAAgB;YACZ,aAAa;QACjB;QACA,eAAe;YACX,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;aAAO;QAC5B;QACA,YAAY;YACR,aACI;QACR;QACA,eAAe;YACX,aAAa;QACjB;QACA,eAAe;YACX,aAAa;QACjB;IACJ;AACJ"}

package/Slider/index.js

@@ -1,4 +1,2 @@
 export * from "./Slider.js";
 export * from "./primitives/index.js";
-
-//# sourceMappingURL=index.js.map

package/Slider/primitives/SliderPrimitive.js

@@ -1,37 +1,25 @@
-import * as React from "react";
 import { useSlider } from "./useSlider.js";
 import { SliderRoot, SliderThumb, SliderTrack } from "./components/index.js";
-const SliderPrimitiveRenderer = ({
-  tooltipSide,
-  textValue,
-  showTooltip,
-  ...sliderProps
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex h-md w-full"
-  }, /*#__PURE__*/React.createElement(SliderRoot, sliderProps, /*#__PURE__*/React.createElement(SliderTrack, null), /*#__PURE__*/React.createElement(SliderThumb, {
-    textValue: textValue,
-    showTooltip: showTooltip,
-    tooltipSide: tooltipSide
-  })));
-};
-const SliderPrimitive = props => {
-  const {
-    transformValue,
-    ...restProps
-  } = props;
-  const {
-    vm,
-    changeValue,
-    commitValue
-  } = useSlider({
-    ...restProps,
-    transformValue
-  });
-  return /*#__PURE__*/React.createElement(SliderPrimitiveRenderer, Object.assign({}, restProps, vm, {
-    onValueChange: changeValue,
-    onValueCommit: commitValue
-  }));
+import * as __rspack_external_react from "react";
+const SliderPrimitiveRenderer = ({ tooltipSide, textValue, showTooltip, ...sliderProps })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex h-md w-full"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(SliderRoot, sliderProps, /*#__PURE__*/ __rspack_external_react.createElement(SliderTrack, null), /*#__PURE__*/ __rspack_external_react.createElement(SliderThumb, {
+        textValue: textValue,
+        showTooltip: showTooltip,
+        tooltipSide: tooltipSide
+    })));
+const SliderPrimitive = (props)=>{
+    const { transformValue, ...restProps } = props;
+    const { vm, changeValue, commitValue } = useSlider({
+        ...restProps,
+        transformValue
+    });
+    return /*#__PURE__*/ __rspack_external_react.createElement(SliderPrimitiveRenderer, {
+        ...restProps,
+        ...vm,
+        onValueChange: changeValue,
+        onValueCommit: commitValue
+    });
 };
 export { SliderPrimitive, SliderPrimitiveRenderer };
 

package/Slider/primitives/SliderPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useSlider","SliderRoot","SliderThumb","SliderTrack","SliderPrimitiveRenderer","tooltipSide","textValue","showTooltip","sliderProps","createElement","className","SliderPrimitive","props","transformValue","restProps","vm","changeValue","commitValue","Object","assign","onValueChange","onValueCommit"],"sources":["SliderPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Slider as SliderPrimitives } from \"radix-ui\";\nimport { useSlider } from \"./useSlider.js\";\nimport { SliderRoot, SliderThumb, SliderTrack, type SliderThumbProps } from \"./components/index.js\";\n\ntype SliderRootProps = Omit<SliderPrimitives.SliderProps, \"min\"> & {\n    min: number;\n};\n\ntype SliderPrimitiveRendererProps = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitiveRenderer = ({\n    tooltipSide,\n    textValue,\n    showTooltip,\n    ...sliderProps\n}: SliderPrimitiveVm) => {\n    return (\n        <div className={\"flex h-md w-full\"}>\n            <SliderRoot {...sliderProps}>\n                <SliderTrack />\n                <SliderThumb\n                    textValue={textValue}\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                />\n            </SliderRoot>\n        </div>\n    );\n};\n\ninterface SliderPrimitiveProps extends Omit<\n    SliderPrimitives.SliderProps,\n    \"defaultValue\" | \"value\" | \"onValueChange\" | \"onValueCommit\"\n> {\n    onValueChange: (value: number) => void;\n    onValueCommit?: (value: number) => void;\n    showTooltip?: boolean;\n    tooltipSide?: \"top\" | \"bottom\";\n    transformValue?: (value: number) => string;\n    value?: number;\n}\n\ntype SliderPrimitiveVm = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitive = (props: SliderPrimitiveProps) => {\n    const { transformValue, ...restProps } = props;\n    const { vm, changeValue, commitValue } = useSlider({ ...restProps, transformValue });\n\n    return (\n        <SliderPrimitiveRenderer\n            {...restProps}\n            {...vm}\n            onValueChange={changeValue}\n            onValueCommit={commitValue}\n        />\n    );\n};\n\nexport {\n    SliderPrimitive,\n    SliderPrimitiveRenderer,\n    type SliderPrimitiveVm,\n    type SliderPrimitiveProps,\n    type SliderPrimitiveRendererProps\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,SAAS;AAClB,SAASC,UAAU,EAAEC,WAAW,EAAEC,WAAW;AAQ7C,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,WAAW;EACXC,SAAS;EACTC,WAAW;EACX,GAAGC;AACY,CAAC,KAAK;EACrB,oBACIT,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAAmB,gBAC/BX,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAKO,WAAW,eACvBT,KAAA,CAAAU,aAAA,CAACN,WAAW,MAAE,CAAC,eACfJ,KAAA,CAAAU,aAAA,CAACP,WAAW;IACRI,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzBF,WAAW,EAAEA;EAAY,CAC5B,CACO,CACX,CAAC;AAEd,CAAC;AAgBD,MAAMM,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAM;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EAC9C,MAAM;IAAEG,EAAE;IAAEC,WAAW;IAAEC;EAAY,CAAC,GAAGjB,SAAS,CAAC;IAAE,GAAGc,SAAS;IAAED;EAAe,CAAC,CAAC;EAEpF,oBACId,KAAA,CAAAU,aAAA,CAACL,uBAAuB,EAAAc,MAAA,CAAAC,MAAA,KAChBL,SAAS,EACTC,EAAE;IACNK,aAAa,EAAEJ,WAAY;IAC3BK,aAAa,EAAEJ;EAAY,EAC9B,CAAC;AAEV,CAAC;AAED,SACIN,eAAe,EACfP,uBAAuB","ignoreList":[]}
+{"version":3,"file":"Slider/primitives/SliderPrimitive.js","sources":["../../../src/Slider/primitives/SliderPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Slider as SliderPrimitives } from \"radix-ui\";\nimport { useSlider } from \"./useSlider.js\";\nimport { SliderRoot, SliderThumb, SliderTrack, type SliderThumbProps } from \"./components/index.js\";\n\ntype SliderRootProps = Omit<SliderPrimitives.SliderProps, \"min\"> & {\n    min: number;\n};\n\ntype SliderPrimitiveRendererProps = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitiveRenderer = ({\n    tooltipSide,\n    textValue,\n    showTooltip,\n    ...sliderProps\n}: SliderPrimitiveVm) => {\n    return (\n        <div className={\"flex h-md w-full\"}>\n            <SliderRoot {...sliderProps}>\n                <SliderTrack />\n                <SliderThumb\n                    textValue={textValue}\n                    showTooltip={showTooltip}\n                    tooltipSide={tooltipSide}\n                />\n            </SliderRoot>\n        </div>\n    );\n};\n\ninterface SliderPrimitiveProps extends Omit<\n    SliderPrimitives.SliderProps,\n    \"defaultValue\" | \"value\" | \"onValueChange\" | \"onValueCommit\"\n> {\n    onValueChange: (value: number) => void;\n    onValueCommit?: (value: number) => void;\n    showTooltip?: boolean;\n    tooltipSide?: \"top\" | \"bottom\";\n    transformValue?: (value: number) => string;\n    value?: number;\n}\n\ntype SliderPrimitiveVm = SliderRootProps & SliderThumbProps;\n\nconst SliderPrimitive = (props: SliderPrimitiveProps) => {\n    const { transformValue, ...restProps } = props;\n    const { vm, changeValue, commitValue } = useSlider({ ...restProps, transformValue });\n\n    return (\n        <SliderPrimitiveRenderer\n            {...restProps}\n            {...vm}\n            onValueChange={changeValue}\n            onValueCommit={commitValue}\n        />\n    );\n};\n\nexport {\n    SliderPrimitive,\n    SliderPrimitiveRenderer,\n    type SliderPrimitiveVm,\n    type SliderPrimitiveProps,\n    type SliderPrimitiveRendererProps\n};\n"],"names":["SliderPrimitiveRenderer","tooltipSide","textValue","showTooltip","sliderProps","SliderRoot","SliderTrack","SliderThumb","SliderPrimitive","props","transformValue","restProps","vm","changeValue","commitValue","useSlider"],"mappings":";;;AAWA,MAAMA,0BAA0B,CAAC,EAC7BC,WAAW,EACXC,SAAS,EACTC,WAAW,EACX,GAAGC,aACa,GACT,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAACC,YAAeD,aAAAA,WAAAA,GACZ,sCAACE,aAAWA,OAAAA,WAAAA,GACZ,sCAACC,aAAWA;QACR,WAAWL;QACX,aAAaC;QACb,aAAaF;;AAqBjC,MAAMO,kBAAkB,CAACC;IACrB,MAAM,EAAEC,cAAc,EAAE,GAAGC,WAAW,GAAGF;IACzC,MAAM,EAAEG,EAAE,EAAEC,WAAW,EAAEC,WAAW,EAAE,GAAGC,UAAU;QAAE,GAAGJ,SAAS;QAAED;IAAe;IAElF,OAAO,WAAP,GACI,sCAACV,yBAAuBA;QACnB,GAAGW,SAAS;QACZ,GAAGC,EAAE;QACN,eAAeC;QACf,eAAeC;;AAG3B"}