@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/Skeleton/Skeleton.stories.js

@@ -26,6 +26,13 @@ const meta = {
                 "xxl",
                 "3xl"
             ]
+        },
+        shade: {
+            control: "select",
+            options: [
+                "dark",
+                "light"
+            ]
         }
     }
 };
@@ -98,10 +105,21 @@ const TripleExtraLarge = {
         size: "3xl"
     }
 };
+const Dark = {
+    args: {
+        shade: "dark"
+    }
+};
+const Light = {
+    args: {
+        shade: "light"
+    }
+};
 const Documentation = {
     args: {
         type: "area",
-        size: "lg"
+        size: "lg",
+        shade: "dark"
     },
     argTypes: {
         type: {
@@ -125,10 +143,18 @@ const Documentation = {
                 "xxl",
                 "3xl"
             ]
+        },
+        shade: {
+            control: "select",
+            description: "The shade of the skeleton",
+            options: [
+                "dark",
+                "light"
+            ]
         }
     }
 };
 export default Skeleton_stories;
-export { Area, Default, Documentation, DoubleExtraLarge, ExtraLarge, ExtraSmall, Large, Medium, MultipleAreas, Small, Text, Thumbnail, TripleExtraLarge };
+export { Area, Dark, Default, Documentation, DoubleExtraLarge, ExtraLarge, ExtraSmall, Large, Light, Medium, MultipleAreas, Small, Text, Thumbnail, TripleExtraLarge };
 
 //# sourceMappingURL=Skeleton.stories.js.map

package/Skeleton/Skeleton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton/Skeleton.stories.js","sources":["../../src/Skeleton/Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n"],"names":["meta","Skeleton","Default","Text","Thumbnail","Area","MultipleAreas","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Documentation"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;IACJ;AACJ;AAEA,yBAAeD;AAIR,MAAME,UAAiB,CAAC;AAExB,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;QACN,WAAW;IACf;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAAC;YAAI,WAAU;yBACX,oBAACL,UAAQA;YAAC,MAAK;YAAO,WAAW;0BACjC,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAW;2BAErC,oBAAC,2BACG,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAU;;AAIhD;AAEO,MAAMM,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,MAAM;IACV;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;IACJ;AACJ"}
+{"version":3,"file":"Skeleton/Skeleton.stories.js","sources":["../../src/Skeleton/Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        },\n        shade: {\n            control: \"select\",\n            options: [\"dark\", \"light\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Dark: Story = {\n    args: {\n        shade: \"dark\"\n    }\n};\n\nexport const Light: Story = {\n    args: {\n        shade: \"light\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\",\n        shade: \"dark\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        },\n        shade: {\n            control: \"select\",\n            description: \"The shade of the skeleton\",\n            options: [\"dark\", \"light\"]\n        }\n    }\n};\n"],"names":["meta","Skeleton","Default","Text","Thumbnail","Area","MultipleAreas","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Dark","Light","Documentation"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;QACA,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAQ;aAAQ;QAC9B;IACJ;AACJ;AAEA,yBAAeD;AAIR,MAAME,UAAiB,CAAC;AAExB,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;QACN,WAAW;IACf;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAAC;YAAI,WAAU;yBACX,oBAACL,UAAQA;YAAC,MAAK;YAAO,WAAW;0BACjC,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAW;2BAErC,oBAAC,2BACG,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAU;;AAIhD;AAEO,MAAMM,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,MAAM;QACN,OAAO;IACX;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;QACA,OAAO;YACH,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;aAAQ;QAC9B;IACJ;AACJ"}

package/Slider/Slider.d.ts

@@ -7,21 +7,22 @@ import type { FormComponentProps } from "../FormComponent/index.js";
 type SliderProps = FormComponentProps & SliderPrimitiveProps & {
     labelPosition?: "top" | "side";
 };
-declare const Slider: (({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-    original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+declare const DecoratableSlider: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+declare const Slider: typeof DecoratableSlider & {
+    original: typeof DecoratableSlider;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-        original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    original: typeof DecoratableSlider & {
+        original: typeof DecoratableSlider;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-        original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSlider & {
+        original: typeof DecoratableSlider;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Slider/Slider.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Slider } from "./Slider.js";
 declare const meta: Meta<typeof Slider>;
 export default meta;

package/Slider/Slider.stories.js.map

@@ -1 +1 @@
-{"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"}
+{"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\";\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/primitives/SliderPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { SliderPrimitive } from "./SliderPrimitive.js";
 declare const meta: Meta<typeof SliderPrimitive>;
 export default meta;

package/Slider/primitives/SliderPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider/primitives/SliderPrimitive.stories.js","sources":["../../../src/Slider/primitives/SliderPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SliderPrimitive } from \"./SliderPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof SliderPrimitive> = {\n    title: \"Components/Form Primitives/Slider\",\n    component: SliderPrimitive,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onValueCommit: { action: \"onValueCommit\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <SliderPrimitive {...args} value={value} onValueChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SliderPrimitive>;\n\nexport const Default: Story = {};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        value: 50\n    }\n};\n\nexport const WithMinAndMaxValues: Story = {\n    args: {\n        min: 10,\n        max: 20\n    }\n};\n\nexport const WithNegativeMinValue: Story = {\n    args: {\n        min: -100,\n        max: 100,\n        value: 0\n    }\n};\n\nexport const WithSteps: Story = {\n    args: {\n        step: 10\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        disabled: true,\n        value: 50\n    }\n};\n\nexport const WithTooltip: Story = {\n    args: {\n        showTooltip: true\n    }\n};\n\nexport const WithTooltipSideTop: Story = {\n    args: {\n        showTooltip: true,\n        tooltipSide: \"top\"\n    }\n};\n\nexport const WithTooltipAndCustomValueTransformer: Story = {\n    args: {\n        showTooltip: true,\n        transformValue: (value: number) => {\n            return `${Math.round(value)}%`;\n        }\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        showTooltip: true,\n        transformValue: (value: number) => {\n            return `${Math.round(value)}%`;\n        }\n    },\n    render: args => {\n        const defaultValue = 50;\n        const [value, setValue] = useState(defaultValue);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <SliderPrimitive\n                        {...args}\n                        value={value}\n                        onValueChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(defaultValue)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current value: <code>{value}</code>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","SliderPrimitive","args","value","setValue","useState","Default","WithDefaultValue","WithMinAndMaxValues","WithNegativeMinValue","WithSteps","Disabled","WithTooltip","WithTooltipSideTop","WithTooltipAndCustomValueTransformer","Math","WithExternalValueControl","defaultValue","Button"],"mappings":";;;AAKA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,eAAe;YAAE,QAAQ;QAAgB;QACzC,eAAe;YAAE,QAAQ;QAAgB;IAC7C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,iBAAeA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,eAAeA,CAAAA,QAASC,SAASD;;IACrF;AACJ;AAEA,gCAAeH;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,mBAA0B;IACnC,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,KAAK;QACL,KAAK;IACT;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,KAAK;QACL,KAAK;QACL,OAAO;IACX;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,UAAU;QACV,OAAO;IACX;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,aAAa;IACjB;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,aAAa;QACb,aAAa;IACjB;AACJ;AAEO,MAAMC,uCAA8C;IACvD,MAAM;QACF,aAAa;QACb,gBAAgB,CAACX,QACN,GAAGY,KAAK,KAAK,CAACZ,OAAO,CAAC,CAAC;IAEtC;AACJ;AAEO,MAAMa,2BAAkC;IAC3C,MAAM;QACF,aAAa;QACb,gBAAgB,CAACb,QACN,GAAGY,KAAK,KAAK,CAACZ,OAAO,CAAC,CAAC;IAEtC;IACA,QAAQD,CAAAA;QACJ,MAAMe,eAAe;QACrB,MAAM,CAACd,OAAOC,SAAS,GAAGC,SAASY;QACnC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAAChB,iBAAeA;YACX,GAAGC,IAAI;YACR,OAAOC;YACP,eAAeA,CAAAA,QAASC,SAASD;2BAGzC,oBAAC;YAAI,WAAW;yBACZ,oBAACe,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMd,SAASa;2BAEnD,oBAAC;YAAI,WAAW;WAAoB,iCACjB,oBAAC,cAAMd;IAItC;AACJ"}
+{"version":3,"file":"Slider/primitives/SliderPrimitive.stories.js","sources":["../../../src/Slider/primitives/SliderPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { SliderPrimitive } from \"./SliderPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof SliderPrimitive> = {\n    title: \"Components/Form Primitives/Slider\",\n    component: SliderPrimitive,\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onValueCommit: { action: \"onValueCommit\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <SliderPrimitive {...args} value={value} onValueChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SliderPrimitive>;\n\nexport const Default: Story = {};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        value: 50\n    }\n};\n\nexport const WithMinAndMaxValues: Story = {\n    args: {\n        min: 10,\n        max: 20\n    }\n};\n\nexport const WithNegativeMinValue: Story = {\n    args: {\n        min: -100,\n        max: 100,\n        value: 0\n    }\n};\n\nexport const WithSteps: Story = {\n    args: {\n        step: 10\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        disabled: true,\n        value: 50\n    }\n};\n\nexport const WithTooltip: Story = {\n    args: {\n        showTooltip: true\n    }\n};\n\nexport const WithTooltipSideTop: Story = {\n    args: {\n        showTooltip: true,\n        tooltipSide: \"top\"\n    }\n};\n\nexport const WithTooltipAndCustomValueTransformer: Story = {\n    args: {\n        showTooltip: true,\n        transformValue: (value: number) => {\n            return `${Math.round(value)}%`;\n        }\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        showTooltip: true,\n        transformValue: (value: number) => {\n            return `${Math.round(value)}%`;\n        }\n    },\n    render: args => {\n        const defaultValue = 50;\n        const [value, setValue] = useState(defaultValue);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <SliderPrimitive\n                        {...args}\n                        value={value}\n                        onValueChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(defaultValue)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current value: <code>{value}</code>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","SliderPrimitive","args","value","setValue","useState","Default","WithDefaultValue","WithMinAndMaxValues","WithNegativeMinValue","WithSteps","Disabled","WithTooltip","WithTooltipSideTop","WithTooltipAndCustomValueTransformer","Math","WithExternalValueControl","defaultValue","Button"],"mappings":";;;AAKA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,eAAe;YAAE,QAAQ;QAAgB;QACzC,eAAe;YAAE,QAAQ;QAAgB;IAC7C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,iBAAeA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,eAAeA,CAAAA,QAASC,SAASD;;IACrF;AACJ;AAEA,gCAAeH;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,mBAA0B;IACnC,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,KAAK;QACL,KAAK;IACT;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,KAAK;QACL,KAAK;QACL,OAAO;IACX;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,UAAU;QACV,OAAO;IACX;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,aAAa;IACjB;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,aAAa;QACb,aAAa;IACjB;AACJ;AAEO,MAAMC,uCAA8C;IACvD,MAAM;QACF,aAAa;QACb,gBAAgB,CAACX,QACN,GAAGY,KAAK,KAAK,CAACZ,OAAO,CAAC,CAAC;IAEtC;AACJ;AAEO,MAAMa,2BAAkC;IAC3C,MAAM;QACF,aAAa;QACb,gBAAgB,CAACb,QACN,GAAGY,KAAK,KAAK,CAACZ,OAAO,CAAC,CAAC;IAEtC;IACA,QAAQD,CAAAA;QACJ,MAAMe,eAAe;QACrB,MAAM,CAACd,OAAOC,SAAS,GAAGC,SAASY;QACnC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAAChB,iBAAeA;YACX,GAAGC,IAAI;YACR,OAAOC;YACP,eAAeA,CAAAA,QAASC,SAASD;2BAGzC,oBAAC;YAAI,WAAW;yBACZ,oBAACe,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMd,SAASa;2BAEnD,oBAAC;YAAI,WAAW;WAAoB,iCACjB,oBAAC,cAAMd;IAItC;AACJ"}

package/SteppedProgress/SteppedProgress.d.ts

@@ -3,21 +3,22 @@ import type { ProgressItemParams } from "./domains/index.js";
 interface SteppedProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     items: ProgressItemParams[];
 }
-declare const SteppedProgress: (({ items, ...props }: SteppedProgressProps) => React.JSX.Element) & {
-    original: ({ items, ...props }: SteppedProgressProps) => React.JSX.Element;
+declare const DecoratableSteppedProgress: ({ items, ...props }: SteppedProgressProps) => React.JSX.Element;
+declare const SteppedProgress: typeof DecoratableSteppedProgress & {
+    original: typeof DecoratableSteppedProgress;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ items, ...props }: SteppedProgressProps) => React.JSX.Element) & {
-        original: ({ items, ...props }: SteppedProgressProps) => React.JSX.Element;
+    original: typeof DecoratableSteppedProgress & {
+        original: typeof DecoratableSteppedProgress;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ items, ...props }: SteppedProgressProps) => React.JSX.Element) & {
-        original: ({ items, ...props }: SteppedProgressProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSteppedProgress & {
+        original: typeof DecoratableSteppedProgress;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/SteppedProgress/SteppedProgress.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { SteppedProgress } from "./SteppedProgress.js";
 declare const meta: Meta<typeof SteppedProgress>;
 export default meta;

package/SteppedProgress/SteppedProgress.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SteppedProgress/SteppedProgress.stories.js","sources":["../../src/SteppedProgress/SteppedProgress.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SteppedProgress } from \"./SteppedProgress.js\";\nimport { ProgressItemState } from \"~/SteppedProgress/domains/index.js\";\n\nconst meta: Meta<typeof SteppedProgress> = {\n    title: \"Components/SteppedProgress\",\n    component: SteppedProgress,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SteppedProgress>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Step\"\n            },\n            {\n                label: \"Step In Progress\",\n                state: ProgressItemState.IN_PROGRESS\n            },\n            {\n                label: \"Step Completed\",\n                state: ProgressItemState.COMPLETED\n            },\n            {\n                label: \"Completed Affirmative\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE\n            }\n        ]\n    }\n};\n\nexport const WithMultipleLines: Story = {\n    decorators: [\n        Story => (\n            <div\n                style={{\n                    width: \"240px\"\n                }}\n            >\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        items: [\n            {\n                label: \"Step but with multiple lines of text.\"\n            },\n            {\n                label: \"Step in progress but with multiple lines of text.\",\n                state: ProgressItemState.IN_PROGRESS\n            },\n            {\n                label: \"Step completed but with multiple lines of text.\",\n                state: ProgressItemState.COMPLETED\n            },\n            {\n                label: \"Completed affirmative but with multiple lines of text.\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE\n            }\n        ]\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        items: [\n            {\n                label: \"Step\",\n                disabled: true\n            },\n            {\n                label: \"Step In Progress\",\n                state: ProgressItemState.IN_PROGRESS,\n                disabled: true\n            },\n            {\n                label: \"Step Completed\",\n                state: ProgressItemState.COMPLETED,\n                disabled: true\n            },\n            {\n                label: \"Completed Affirmative\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE,\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const Errored: Story = {\n    args: {\n        items: [\n            {\n                label: \"Step\",\n                errored: true\n            },\n            {\n                label: \"Step In Progress\",\n                state: ProgressItemState.IN_PROGRESS,\n                errored: true\n            },\n            {\n                label: \"Step Completed\",\n                state: ProgressItemState.COMPLETED,\n                errored: true\n            },\n            {\n                label: \"Completed Affirmative\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE,\n                errored: true\n            }\n        ]\n    }\n};\n\nexport const DisabledAndErrored: Story = {\n    args: {\n        items: [\n            {\n                label: \"Step\",\n                disabled: true,\n                errored: true\n            },\n            {\n                label: \"Step In Progress\",\n                state: ProgressItemState.IN_PROGRESS,\n                disabled: true,\n                errored: true\n            },\n            {\n                label: \"Step Completed\",\n                state: ProgressItemState.COMPLETED,\n                disabled: true,\n                errored: true\n            },\n            {\n                label: \"Completed Affirmative\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE,\n                disabled: true,\n                errored: true\n            }\n        ]\n    }\n};\n"],"names":["meta","SteppedProgress","Default","ProgressItemState","WithMultipleLines","Story","Disabled","Errored","DisabledAndErrored"],"mappings":";;;AAKA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,UAAU,CAAC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,gCAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAOC,kBAAkB,WAAW;YACxC;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;YACtC;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;YAClD;SACH;IACL;AACJ;AAEO,MAAMC,oBAA2B;IACpC,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBACG,OAAO;oBACH,OAAO;gBACX;6BAEA,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,OAAO;YACH;gBACI,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAOF,kBAAkB,WAAW;YACxC;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;YACtC;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;YAClD;SACH;IACL;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAOH,kBAAkB,WAAW;gBACpC,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;gBAClC,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;gBAC9C,UAAU;YACd;SACH;IACL;AACJ;AAEO,MAAMI,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOJ,kBAAkB,WAAW;gBACpC,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;gBAClC,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;gBAC9C,SAAS;YACb;SACH;IACL;AACJ;AAEO,MAAMK,qBAA4B;IACrC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,UAAU;gBACV,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOL,kBAAkB,WAAW;gBACpC,UAAU;gBACV,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;gBAClC,UAAU;gBACV,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;gBAC9C,UAAU;gBACV,SAAS;YACb;SACH;IACL;AACJ"}
+{"version":3,"file":"SteppedProgress/SteppedProgress.stories.js","sources":["../../src/SteppedProgress/SteppedProgress.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { SteppedProgress } from \"./SteppedProgress.js\";\nimport { ProgressItemState } from \"~/SteppedProgress/domains/index.js\";\n\nconst meta: Meta<typeof SteppedProgress> = {\n    title: \"Components/SteppedProgress\",\n    component: SteppedProgress,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SteppedProgress>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Step\"\n            },\n            {\n                label: \"Step In Progress\",\n                state: ProgressItemState.IN_PROGRESS\n            },\n            {\n                label: \"Step Completed\",\n                state: ProgressItemState.COMPLETED\n            },\n            {\n                label: \"Completed Affirmative\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE\n            }\n        ]\n    }\n};\n\nexport const WithMultipleLines: Story = {\n    decorators: [\n        Story => (\n            <div\n                style={{\n                    width: \"240px\"\n                }}\n            >\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        items: [\n            {\n                label: \"Step but with multiple lines of text.\"\n            },\n            {\n                label: \"Step in progress but with multiple lines of text.\",\n                state: ProgressItemState.IN_PROGRESS\n            },\n            {\n                label: \"Step completed but with multiple lines of text.\",\n                state: ProgressItemState.COMPLETED\n            },\n            {\n                label: \"Completed affirmative but with multiple lines of text.\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE\n            }\n        ]\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        items: [\n            {\n                label: \"Step\",\n                disabled: true\n            },\n            {\n                label: \"Step In Progress\",\n                state: ProgressItemState.IN_PROGRESS,\n                disabled: true\n            },\n            {\n                label: \"Step Completed\",\n                state: ProgressItemState.COMPLETED,\n                disabled: true\n            },\n            {\n                label: \"Completed Affirmative\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE,\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const Errored: Story = {\n    args: {\n        items: [\n            {\n                label: \"Step\",\n                errored: true\n            },\n            {\n                label: \"Step In Progress\",\n                state: ProgressItemState.IN_PROGRESS,\n                errored: true\n            },\n            {\n                label: \"Step Completed\",\n                state: ProgressItemState.COMPLETED,\n                errored: true\n            },\n            {\n                label: \"Completed Affirmative\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE,\n                errored: true\n            }\n        ]\n    }\n};\n\nexport const DisabledAndErrored: Story = {\n    args: {\n        items: [\n            {\n                label: \"Step\",\n                disabled: true,\n                errored: true\n            },\n            {\n                label: \"Step In Progress\",\n                state: ProgressItemState.IN_PROGRESS,\n                disabled: true,\n                errored: true\n            },\n            {\n                label: \"Step Completed\",\n                state: ProgressItemState.COMPLETED,\n                disabled: true,\n                errored: true\n            },\n            {\n                label: \"Completed Affirmative\",\n                state: ProgressItemState.COMPLETED_AFFIRMATIVE,\n                disabled: true,\n                errored: true\n            }\n        ]\n    }\n};\n"],"names":["meta","SteppedProgress","Default","ProgressItemState","WithMultipleLines","Story","Disabled","Errored","DisabledAndErrored"],"mappings":";;;AAKA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,UAAU,CAAC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,gCAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAOC,kBAAkB,WAAW;YACxC;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;YACtC;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;YAClD;SACH;IACL;AACJ;AAEO,MAAMC,oBAA2B;IACpC,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBACG,OAAO;oBACH,OAAO;gBACX;6BAEA,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,OAAO;YACH;gBACI,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAOF,kBAAkB,WAAW;YACxC;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;YACtC;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;YAClD;SACH;IACL;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAOH,kBAAkB,WAAW;gBACpC,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;gBAClC,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;gBAC9C,UAAU;YACd;SACH;IACL;AACJ;AAEO,MAAMI,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOJ,kBAAkB,WAAW;gBACpC,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;gBAClC,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;gBAC9C,SAAS;YACb;SACH;IACL;AACJ;AAEO,MAAMK,qBAA4B;IACrC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,UAAU;gBACV,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOL,kBAAkB,WAAW;gBACpC,UAAU;gBACV,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,SAAS;gBAClC,UAAU;gBACV,SAAS;YACb;YACA;gBACI,OAAO;gBACP,OAAOA,kBAAkB,qBAAqB;gBAC9C,UAAU;gBACV,SAAS;YACb;SACH;IACL;AACJ"}

package/SteppedProgress/SteppedProgressItem.d.ts

@@ -1,21 +1,22 @@
 import React from "react";
 import { type ProgressItemFormatted } from "./domains/index.js";
 type SteppedProgressItemProps = React.HTMLAttributes<HTMLDivElement> & ProgressItemFormatted;
-declare const SteppedProgressItem: (({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element) & {
-    original: ({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element;
+declare const DecoratableSteppedProgressItem: ({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element;
+declare const SteppedProgressItem: typeof DecoratableSteppedProgressItem & {
+    original: typeof DecoratableSteppedProgressItem;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element) & {
-        original: ({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element;
+    original: typeof DecoratableSteppedProgressItem & {
+        original: typeof DecoratableSteppedProgressItem;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element) & {
-        original: ({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSteppedProgressItem & {
+        original: typeof DecoratableSteppedProgressItem;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Switch/Switch.d.ts

@@ -1,24 +1,25 @@
 import React from "react";
 import type { SwitchPrimitiveProps } from "./primitives/index.js";
-import type { FormComponentProps } from "../FormComponent/index.js";
-type SwitchProps = SwitchPrimitiveProps & FormComponentProps;
-declare const Switch: (({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
-    original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+import { type FormComponentProps } from "../FormComponent/index.js";
+type SwitchProps = Omit<SwitchPrimitiveProps, "label"> & FormComponentProps;
+declare const DecoratableSwitch: ({ label, description, hint, note, required, disabled, validation, ...props }: SwitchProps) => React.JSX.Element;
+declare const Switch: typeof DecoratableSwitch & {
+    original: typeof DecoratableSwitch;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
-        original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+    original: typeof DecoratableSwitch & {
+        original: typeof DecoratableSwitch;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
-        original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSwitch & {
+        original: typeof DecoratableSwitch;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export { Switch };
+export { Switch, type SwitchProps };

package/Switch/Switch.js

@@ -1,24 +1,38 @@
 import react, { useMemo } from "react";
-import { makeDecoratable } from "../utils.js";
+import { generateId, makeDecoratable } from "../utils.js";
 import { SwitchPrimitive } from "./primitives/index.js";
-import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent/index.js";
-const DecoratableSwitch = ({ note, validation, ...props })=>{
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
+const DecoratableSwitch = ({ label, description, hint, note, required, disabled, validation, ...props })=>{
     const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const id = useMemo(()=>generateId(props.id), [
+        props.id
+    ]);
     const invalid = useMemo(()=>false === validationIsValid, [
         validationIsValid
     ]);
     return /*#__PURE__*/ react.createElement("div", {
         className: "w-full"
-    }, /*#__PURE__*/ react.createElement(SwitchPrimitive, {
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        htmlFor: id,
+        text: label,
+        required: required,
+        disabled: disabled,
+        invalid: invalid,
+        hint: hint
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(SwitchPrimitive, {
         ...props,
-        disabled: props.disabled
+        id: id,
+        disabled: disabled
     }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
         text: validationMessage,
         invalid: invalid,
-        disabled: props.disabled
+        disabled: disabled
     }), /*#__PURE__*/ react.createElement(FormComponentNote, {
         text: note,
-        disabled: props.disabled
+        disabled: disabled
     }));
 };
 const Switch = makeDecoratable("Switch", DecoratableSwitch);

package/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch/Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SwitchPrimitiveProps } from \"./primitives/index.js\";\nimport { SwitchPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport { FormComponentErrorMessage, FormComponentNote } from \"~/FormComponent/index.js\";\n\ntype SwitchProps = SwitchPrimitiveProps & FormComponentProps;\n\nconst DecoratableSwitch = ({ note, validation, ...props }: SwitchProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <SwitchPrimitive {...props} disabled={props.disabled} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={props.disabled}\n            />\n            <FormComponentNote text={note} disabled={props.disabled} />\n        </div>\n    );\n};\n\nconst Switch = makeDecoratable(\"Switch\", DecoratableSwitch);\n\nexport { Switch };\n"],"names":["DecoratableSwitch","note","validation","props","validationIsValid","validationMessage","invalid","useMemo","SwitchPrimitive","FormComponentErrorMessage","FormComponentNote","Switch","makeDecoratable"],"mappings":";;;;AASA,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,UAAU,EAAE,GAAGC,OAAoB;IAClE,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,iBAAeA;QAAE,GAAGL,KAAK;QAAE,UAAUA,MAAM,QAAQ;sBACpD,oBAACM,2BAAyBA;QACtB,MAAMJ;QACN,SAASC;QACT,UAAUH,MAAM,QAAQ;sBAE5B,oBAACO,mBAAiBA;QAAC,MAAMT;QAAM,UAAUE,MAAM,QAAQ;;AAGnE;AAEA,MAAMQ,SAASC,gBAAgB,UAAUZ"}
+{"version":3,"file":"Switch/Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { generateId, makeDecoratable } from \"~/utils.js\";\nimport type { SwitchPrimitiveProps } from \"./primitives/index.js\";\nimport { SwitchPrimitive } from \"./primitives/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent/index.js\";\n\ntype SwitchProps = Omit<SwitchPrimitiveProps, \"label\"> & FormComponentProps;\n\nconst DecoratableSwitch = ({\n    label,\n    description,\n    hint,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SwitchProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const id = useMemo(() => generateId(props.id), [props.id]);\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <FormComponentLabel\n                htmlFor={id}\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n                hint={hint}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <SwitchPrimitive {...props} id={id} disabled={disabled} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst Switch = makeDecoratable(\"Switch\", DecoratableSwitch);\n\nexport { Switch, type SwitchProps };\n"],"names":["DecoratableSwitch","label","description","hint","note","required","disabled","validation","props","validationIsValid","validationMessage","id","useMemo","generateId","invalid","FormComponentLabel","FormComponentDescription","SwitchPrimitive","FormComponentErrorMessage","FormComponentNote","Switch","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,oBAAoB,CAAC,EACvBC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACO;IACV,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,KAAKC,QAAQ,IAAMC,WAAWL,MAAM,EAAE,GAAG;QAACA,MAAM,EAAE;KAAC;IACzD,MAAMM,UAAUF,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACM,oBAAkBA;QACf,SAASJ;QACT,MAAMV;QACN,UAAUI;QACV,UAAUC;QACV,SAASQ;QACT,MAAMX;sBAEV,oBAACa,0BAAwBA;QAAC,MAAMd;QAAa,UAAUI;sBACvD,oBAACW,iBAAeA;QAAE,GAAGT,KAAK;QAAE,IAAIG;QAAI,UAAUL;sBAC9C,oBAACY,2BAAyBA;QACtB,MAAMR;QACN,SAASI;QACT,UAAUR;sBAEd,oBAACa,mBAAiBA;QAAC,MAAMf;QAAM,UAAUE;;AAGrD;AAEA,MAAMc,SAASC,gBAAgB,UAAUrB"}

package/Switch/Switch.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Switch } from "../Switch/index.js";
 declare const meta: Meta<typeof Switch>;
 export default meta;

package/Switch/Switch.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch/Switch.stories.js","sources":["../../src/Switch/Switch.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Switch } from \"~/Switch/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\n\nconst meta: Meta<typeof Switch> = {\n    title: \"Components/Form/Switch\",\n    component: Switch,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Switch {...args} checked={checked} onChange={value => setChecked(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Switch>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    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        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 Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update checked state when args.checked changes\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            // Simple required validation\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Switch\n                {...args}\n                checked={checked}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Enable feature\",\n        checked: false,\n        disabled: false,\n        required: true,\n        description: \"Enabling this feature will activate additional functionality.\",\n        note: \"Note: This setting can be changed at any time.\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the switch\",\n            control: \"text\"\n        },\n        checked: {\n            description: \"Determines if the switch is checked\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the switch when set to true\",\n            control: \"boolean\"\n        },\n        required: {\n            description: \"Makes the switch required when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the switch\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the switch\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the switch state changes\"\n        }\n    }\n};\n"],"names":["meta","Switch","Story","Tooltip","args","checked","setChecked","useState","value","Default","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","isChecked","undefined"],"mappings":";;;AAKA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACC,QAAQ,QAAQ,sBACb,oBAACD,OAAAA;KAGZ;IACD,QAAQE,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GAAO,oBAACH,QAAMA;YAAE,GAAGG,IAAI;YAAE,SAASC;YAAS,UAAUG,CAAAA,QAASF,WAAWE;;IAC7E;AACJ;AAEA,uBAAeR;AAGR,MAAMS,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMG,YAAmB;IAC5B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,aAAoB;IAC7B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMM,cAAqB;IAC9B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMO,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO,IAAI;QACvD,MAAM,CAACa,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EY,UAAU;YACNb,WAAWF,KAAK,OAAO,IAAI;QAC/B,GAAG;YAACA,KAAK,OAAO;SAAC;QAEjB,MAAMgB,eAAe,CAACC;YAClBf,WAAWe;YAGPjB,KAAK,QAAQ,IAAI,CAACiB,YAClBH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFf,KAAK,QAAQ,IAAI,CAACC,UAClBa,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACd,KAAK,QAAQ;YAAEC;SAAQ;QAE3B,OAAO,WAAP,GACI,oBAACJ,QAAMA;YACF,GAAGG,IAAI;YACR,SAASC;YACT,UAAUe;YACV,YAAYH;YACZ,UAAUb,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAYkB;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,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,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"Switch/Switch.stories.js","sources":["../../src/Switch/Switch.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Switch } from \"~/Switch/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\n\nconst meta: Meta<typeof Switch> = {\n    title: \"Components/Form/Switch\",\n    component: Switch,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Switch {...args} checked={checked} onChange={value => setChecked(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Switch>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    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        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 Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update checked state when args.checked changes\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            // Simple required validation\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Switch\n                {...args}\n                checked={checked}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Enable feature\",\n        checked: false,\n        disabled: false,\n        required: true,\n        description: \"Enabling this feature will activate additional functionality.\",\n        note: \"Note: This setting can be changed at any time.\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the switch\",\n            control: \"text\"\n        },\n        checked: {\n            description: \"Determines if the switch is checked\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the switch when set to true\",\n            control: \"boolean\"\n        },\n        required: {\n            description: \"Makes the switch required when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the switch\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the switch\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the switch state changes\"\n        }\n    }\n};\n"],"names":["meta","Switch","Story","Tooltip","args","checked","setChecked","useState","value","Default","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","isChecked","undefined"],"mappings":";;;AAKA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACC,QAAQ,QAAQ,sBACb,oBAACD,OAAAA;KAGZ;IACD,QAAQE,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GAAO,oBAACH,QAAMA;YAAE,GAAGG,IAAI;YAAE,SAASC;YAAS,UAAUG,CAAAA,QAASF,WAAWE;;IAC7E;AACJ;AAEA,uBAAeR;AAGR,MAAMS,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMG,YAAmB;IAC5B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,aAAoB;IAC7B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMM,cAAqB;IAC9B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMO,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO,IAAI;QACvD,MAAM,CAACa,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EY,UAAU;YACNb,WAAWF,KAAK,OAAO,IAAI;QAC/B,GAAG;YAACA,KAAK,OAAO;SAAC;QAEjB,MAAMgB,eAAe,CAACC;YAClBf,WAAWe;YAGPjB,KAAK,QAAQ,IAAI,CAACiB,YAClBH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFf,KAAK,QAAQ,IAAI,CAACC,UAClBa,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACd,KAAK,QAAQ;YAAEC;SAAQ;QAE3B,OAAO,WAAP,GACI,oBAACJ,QAAMA;YACF,GAAGG,IAAI;YACR,SAASC;YACT,UAAUe;YACV,YAAYH;YACZ,UAAUb,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAYkB;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,SAAS;YACL,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,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}

package/Switch/domains/SwitchItemDto.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 export interface SwitchItemDto {
     id?: string;
-    label: React.ReactNode;
+    label?: React.ReactNode;
     value?: number | string | boolean;
     checked?: boolean;
     disabled?: boolean;

package/Switch/primitives/SwitchPrimitive.d.ts

@@ -14,21 +14,25 @@ type SwitchPrimitiveProps = Omit<SwitchPrimitives.SwitchProps, "defaultChecked"
 type SwitchPrimitivVm = {
     item?: SwitchItemFormatted;
 };
-declare const SwitchPrimitive: ((props: SwitchPrimitiveProps) => React.JSX.Element | null) & {
-    original: (props: SwitchPrimitiveProps) => React.JSX.Element | null;
+/**
+ * Switch
+ */
+declare const DecoratableSwitchPrimitive: (props: SwitchPrimitiveProps) => React.JSX.Element | null;
+declare const SwitchPrimitive: typeof DecoratableSwitchPrimitive & {
+    original: typeof DecoratableSwitchPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SwitchPrimitiveProps) => React.JSX.Element | null) & {
-        original: (props: SwitchPrimitiveProps) => React.JSX.Element | null;
+    original: typeof DecoratableSwitchPrimitive & {
+        original: typeof DecoratableSwitchPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SwitchPrimitiveProps) => React.JSX.Element | null) & {
-        original: (props: SwitchPrimitiveProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSwitchPrimitive & {
+        original: typeof DecoratableSwitchPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Switch/primitives/SwitchPrimitive.js

@@ -18,7 +18,7 @@ const SwitchRenderer = ({ id, label, changeChecked, description, className, labe
         className: cn(switchVariants({
             labelPosition
         }), className)
-    }, /*#__PURE__*/ __rspack_external_react.createElement(Label, {
+    }, label && /*#__PURE__*/ __rspack_external_react.createElement(Label, {
         htmlFor: id,
         text: label,
         disabled: disabled,
@@ -30,10 +30,11 @@ const SwitchRenderer = ({ id, label, changeChecked, description, className, labe
         id: id,
         checked: checked,
         className: cn([
-            "peer inline-flex h-md w-[26px] mt-xxs shrink-0 cursor-pointer items-center rounded-xxl border-sm transition-colors",
+            "peer inline-flex h-md w-[26px] shrink-0 cursor-pointer items-center rounded-xxl border-sm transition-colors",
             "border-transparent data-[state=checked]:bg-secondary data-[state=unchecked]:bg-neutral-strong",
             "focus-visible:outline-none focus-visible:border-success focus-visible:ring-lg focus-visible:ring-primary-dimmed",
-            "disabled:cursor-not-allowed disabled:bg-neutral-muted disabled:data-[state=checked]:bg-neutral-muted"
+            "disabled:cursor-not-allowed disabled:bg-neutral-muted disabled:data-[state=checked]:bg-neutral-muted",
+            label && "mt-xxs"
         ]),
         disabled: disabled,
         onCheckedChange: changeChecked

package/Switch/primitives/SwitchPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch/primitives/SwitchPrimitive.js","sources":["../../../src/Switch/primitives/SwitchPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Switch as SwitchPrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { Label } from \"~/Label/index.js\";\nimport { useSwitch } from \"./useSwitch.js\";\nimport type { SwitchItemDto, SwitchItemFormatted } from \"../domains/index.js\";\n\n/**\n * Switch Renderer\n */\n\nconst switchVariants = cva(\"inline-flex items-start space-x-sm\", {\n    variants: {\n        labelPosition: {\n            start: \"\",\n            end: \"flex-row-reverse space-x-sm-extra space-x-reverse\"\n        }\n    },\n    defaultVariants: {\n        labelPosition: \"start\"\n    }\n});\n\ntype SwitchPrimitiveProps = Omit<\n    SwitchPrimitives.SwitchProps,\n    \"defaultChecked\" | \"onCheckedChange\" | \"onChange\"\n> &\n    VariantProps<typeof switchVariants> &\n    SwitchItemDto & {\n        onChange?: (checked: boolean) => void;\n    };\n\ntype SwitchPrimitivVm = {\n    item?: SwitchItemFormatted;\n};\n\ntype SwitchRendererProps = Omit<SwitchPrimitiveProps, \"onCheckedChange\"> &\n    NonNullable<SwitchPrimitivVm[\"item\"]> & {\n        changeChecked: (checked: boolean) => void;\n        description?: React.ReactNode;\n    };\n\nconst SwitchRenderer = ({\n    id,\n    label,\n    changeChecked,\n    description,\n    className,\n    labelPosition,\n    disabled,\n    required,\n    checked\n}: SwitchRendererProps) => {\n    return (\n        <div className={cn(switchVariants({ labelPosition }), className)}>\n            <Label\n                htmlFor={id}\n                text={label}\n                disabled={disabled}\n                required={required}\n                hint={description}\n                weight={\"light\"}\n                className={\"text-md\"}\n            />\n            <SwitchPrimitives.Root\n                id={id}\n                checked={checked}\n                className={cn([\n                    \"peer inline-flex h-md w-[26px] mt-xxs shrink-0 cursor-pointer items-center rounded-xxl border-sm transition-colors\",\n                    \"border-transparent data-[state=checked]:bg-secondary data-[state=unchecked]:bg-neutral-strong\",\n                    \"focus-visible:outline-none focus-visible:border-success focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n                    \"disabled:cursor-not-allowed disabled:bg-neutral-muted disabled:data-[state=checked]:bg-neutral-muted\"\n                ])}\n                disabled={disabled}\n                onCheckedChange={changeChecked}\n            >\n                <SwitchPrimitives.Thumb\n                    className={cn(\n                        \"pointer-events-none block h-sm-plus w-sm-plus rounded-xxl bg-neutral-base shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-sm-extra data-[state=unchecked]:translate-x-xxs\"\n                    )}\n                />\n            </SwitchPrimitives.Root>\n        </div>\n    );\n};\n\n/**\n * Switch\n */\nconst DecoratableSwitchPrimitive = (props: SwitchPrimitiveProps) => {\n    const { vm, changeChecked } = useSwitch(props);\n\n    if (!vm.item) {\n        return null;\n    }\n\n    return <SwitchRenderer {...props} {...vm.item} changeChecked={changeChecked} />;\n};\nconst SwitchPrimitive = makeDecoratable(\"SwitchPrimitive\", DecoratableSwitchPrimitive);\n\nexport { SwitchPrimitive, type SwitchPrimitiveProps, type SwitchPrimitivVm };\n"],"names":["switchVariants","cva","SwitchRenderer","id","label","changeChecked","description","className","labelPosition","disabled","required","checked","cn","Label","SwitchPrimitives","DecoratableSwitchPrimitive","props","vm","useSwitch","SwitchPrimitive","makeDecoratable"],"mappings":";;;;;AAWA,MAAMA,iBAAiBC,IAAI,sCAAsC;IAC7D,UAAU;QACN,eAAe;YACX,OAAO;YACP,KAAK;QACT;IACJ;IACA,iBAAiB;QACb,eAAe;IACnB;AACJ;AAqBA,MAAMC,iBAAiB,CAAC,EACpBC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,WAAW,EACXC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACW,GACX,WAAP,GACI,sCAAC;QAAI,WAAWC,GAAGZ,eAAe;YAAEQ;QAAc,IAAID;qBAClD,sCAACM,OAAKA;QACF,SAASV;QACT,MAAMC;QACN,UAAUK;QACV,UAAUC;QACV,MAAMJ;QACN,QAAQ;QACR,WAAW;sBAEf,sCAACQ,OAAAA,IAAqB;QAClB,IAAIX;QACJ,SAASQ;QACT,WAAWC,GAAG;YACV;YACA;YACA;YACA;SACH;QACD,UAAUH;QACV,iBAAiBJ;qBAEjB,sCAACS,OAAAA,KAAsB;QACnB,WAAWF,GACP;;AAWxB,MAAMG,6BAA6B,CAACC;IAChC,MAAM,EAAEC,EAAE,EAAEZ,aAAa,EAAE,GAAGa,UAAUF;IAExC,IAAI,CAACC,GAAG,IAAI,EACR,OAAO;IAGX,OAAO,WAAP,GAAO,sCAACf,gBAAcA;QAAE,GAAGc,KAAK;QAAG,GAAGC,GAAG,IAAI;QAAE,eAAeZ;;AAClE;AACA,MAAMc,kBAAkBC,gBAAgB,mBAAmBL"}
+{"version":3,"file":"Switch/primitives/SwitchPrimitive.js","sources":["../../../src/Switch/primitives/SwitchPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Switch as SwitchPrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { Label } from \"~/Label/index.js\";\nimport { useSwitch } from \"./useSwitch.js\";\nimport type { SwitchItemDto, SwitchItemFormatted } from \"../domains/index.js\";\n\n/**\n * Switch Renderer\n */\n\nconst switchVariants = cva(\"inline-flex items-start space-x-sm\", {\n    variants: {\n        labelPosition: {\n            start: \"\",\n            end: \"flex-row-reverse space-x-sm-extra space-x-reverse\"\n        }\n    },\n    defaultVariants: {\n        labelPosition: \"start\"\n    }\n});\n\ntype SwitchPrimitiveProps = Omit<\n    SwitchPrimitives.SwitchProps,\n    \"defaultChecked\" | \"onCheckedChange\" | \"onChange\"\n> &\n    VariantProps<typeof switchVariants> &\n    SwitchItemDto & {\n        onChange?: (checked: boolean) => void;\n    };\n\ntype SwitchPrimitivVm = {\n    item?: SwitchItemFormatted;\n};\n\ntype SwitchRendererProps = Omit<SwitchPrimitiveProps, \"onCheckedChange\"> &\n    NonNullable<SwitchPrimitivVm[\"item\"]> & {\n        changeChecked: (checked: boolean) => void;\n        description?: React.ReactNode;\n    };\n\nconst SwitchRenderer = ({\n    id,\n    label,\n    changeChecked,\n    description,\n    className,\n    labelPosition,\n    disabled,\n    required,\n    checked\n}: SwitchRendererProps) => {\n    return (\n        <div className={cn(switchVariants({ labelPosition }), className)}>\n            {label && (\n                <Label\n                    htmlFor={id}\n                    text={label}\n                    disabled={disabled}\n                    required={required}\n                    hint={description}\n                    weight={\"light\"}\n                    className={\"text-md\"}\n                />\n            )}\n            <SwitchPrimitives.Root\n                id={id}\n                checked={checked}\n                className={cn([\n                    \"peer inline-flex h-md w-[26px] shrink-0 cursor-pointer items-center rounded-xxl border-sm transition-colors\",\n                    \"border-transparent data-[state=checked]:bg-secondary data-[state=unchecked]:bg-neutral-strong\",\n                    \"focus-visible:outline-none focus-visible:border-success focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n                    \"disabled:cursor-not-allowed disabled:bg-neutral-muted disabled:data-[state=checked]:bg-neutral-muted\",\n                    // Nudges the switch down to line up with the inline label's text.\n                    label && \"mt-xxs\"\n                ])}\n                disabled={disabled}\n                onCheckedChange={changeChecked}\n            >\n                <SwitchPrimitives.Thumb\n                    className={cn(\n                        \"pointer-events-none block h-sm-plus w-sm-plus rounded-xxl bg-neutral-base shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-sm-extra data-[state=unchecked]:translate-x-xxs\"\n                    )}\n                />\n            </SwitchPrimitives.Root>\n        </div>\n    );\n};\n\n/**\n * Switch\n */\nconst DecoratableSwitchPrimitive = (props: SwitchPrimitiveProps) => {\n    const { vm, changeChecked } = useSwitch(props);\n\n    if (!vm.item) {\n        return null;\n    }\n\n    return <SwitchRenderer {...props} {...vm.item} changeChecked={changeChecked} />;\n};\nconst SwitchPrimitive = makeDecoratable(\"SwitchPrimitive\", DecoratableSwitchPrimitive);\n\nexport { SwitchPrimitive, type SwitchPrimitiveProps, type SwitchPrimitivVm };\n"],"names":["switchVariants","cva","SwitchRenderer","id","label","changeChecked","description","className","labelPosition","disabled","required","checked","cn","Label","SwitchPrimitives","DecoratableSwitchPrimitive","props","vm","useSwitch","SwitchPrimitive","makeDecoratable"],"mappings":";;;;;AAWA,MAAMA,iBAAiBC,IAAI,sCAAsC;IAC7D,UAAU;QACN,eAAe;YACX,OAAO;YACP,KAAK;QACT;IACJ;IACA,iBAAiB;QACb,eAAe;IACnB;AACJ;AAqBA,MAAMC,iBAAiB,CAAC,EACpBC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,WAAW,EACXC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACW,GACX,WAAP,GACI,sCAAC;QAAI,WAAWC,GAAGZ,eAAe;YAAEQ;QAAc,IAAID;OACjDH,SAAS,WAATA,GACG,sCAACS,OAAKA;QACF,SAASV;QACT,MAAMC;QACN,UAAUK;QACV,UAAUC;QACV,MAAMJ;QACN,QAAQ;QACR,WAAW;sBAGnB,sCAACQ,OAAAA,IAAqB;QAClB,IAAIX;QACJ,SAASQ;QACT,WAAWC,GAAG;YACV;YACA;YACA;YACA;YAEAR,SAAS;SACZ;QACD,UAAUK;QACV,iBAAiBJ;qBAEjB,sCAACS,OAAAA,KAAsB;QACnB,WAAWF,GACP;;AAWxB,MAAMG,6BAA6B,CAACC;IAChC,MAAM,EAAEC,EAAE,EAAEZ,aAAa,EAAE,GAAGa,UAAUF;IAExC,IAAI,CAACC,GAAG,IAAI,EACR,OAAO;IAGX,OAAO,WAAP,GAAO,sCAACf,gBAAcA;QAAE,GAAGc,KAAK;QAAG,GAAGC,GAAG,IAAI;QAAE,eAAeZ;;AAClE;AACA,MAAMc,kBAAkBC,gBAAgB,mBAAmBL"}

package/Switch/primitives/SwitchPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { SwitchPrimitive } from "./SwitchPrimitive.js";
 declare const meta: Meta<typeof SwitchPrimitive>;
 export default meta;

package/Switch/primitives/SwitchPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch/primitives/SwitchPrimitive.stories.js","sources":["../../../src/Switch/primitives/SwitchPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SwitchPrimitive } from \"./SwitchPrimitive.js\";\n\nconst meta: Meta<typeof SwitchPrimitive> = {\n    title: \"Components/Form Primitives/Switch\",\n    component: SwitchPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <SwitchPrimitive {...args} checked={checked} onChange={value => setChecked(value)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SwitchPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Label\"\n    }\n};\n\nexport const WithLeadingLabel: Story = {\n    args: {\n        label: \"Leading label\",\n        labelPosition: \"start\"\n    }\n};\n\nexport const WithLongLeadingLabel: Story = {\n    args: {\n        label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n        labelPosition: \"start\"\n    }\n};\n\nexport const WithTrailingLabel: Story = {\n    args: {\n        label: \"Trailing label\",\n        labelPosition: \"end\"\n    }\n};\n\nexport const WithLongTrailingLabel: Story = {\n    args: {\n        label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n        labelPosition: \"end\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        checked: true\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Label\",\n        disabled: true\n    }\n};\n"],"names":["meta","SwitchPrimitive","args","checked","setChecked","useState","value","Default","WithLeadingLabel","WithLongLeadingLabel","WithTrailingLabel","WithLongTrailingLabel","Checked","Disabled"],"mappings":";;AAIA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,iBAAeA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUG,CAAAA,QAASF,WAAWE;;IAEnF;AACJ;AAEA,gCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;AACJ;AAEO,MAAMC,wBAA+B;IACxC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ"}
+{"version":3,"file":"Switch/primitives/SwitchPrimitive.stories.js","sources":["../../../src/Switch/primitives/SwitchPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { SwitchPrimitive } from \"./SwitchPrimitive.js\";\n\nconst meta: Meta<typeof SwitchPrimitive> = {\n    title: \"Components/Form Primitives/Switch\",\n    component: SwitchPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <SwitchPrimitive {...args} checked={checked} onChange={value => setChecked(value)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SwitchPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Label\"\n    }\n};\n\nexport const WithLeadingLabel: Story = {\n    args: {\n        label: \"Leading label\",\n        labelPosition: \"start\"\n    }\n};\n\nexport const WithLongLeadingLabel: Story = {\n    args: {\n        label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n        labelPosition: \"start\"\n    }\n};\n\nexport const WithTrailingLabel: Story = {\n    args: {\n        label: \"Trailing label\",\n        labelPosition: \"end\"\n    }\n};\n\nexport const WithLongTrailingLabel: Story = {\n    args: {\n        label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Maecenas nec risus sit amet ante efficitur venenatis id eget eros. Aenean mollis vel dolor vitae vestibulum. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n        labelPosition: \"end\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        checked: true\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Label\",\n        disabled: true\n    }\n};\n"],"names":["meta","SwitchPrimitive","args","checked","setChecked","useState","value","Default","WithLeadingLabel","WithLongLeadingLabel","WithTrailingLabel","WithLongTrailingLabel","Checked","Disabled"],"mappings":";;AAIA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,iBAAeA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUG,CAAAA,QAASF,WAAWE;;IAEnF;AACJ;AAEA,gCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;AACJ;AAEO,MAAMC,wBAA+B;IACxC,MAAM;QACF,OAAO;QACP,eAAe;IACnB;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,SAAS;IACb;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ"}