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

package/RadioGroup/primitives/RadioGroupPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup/primitives/RadioGroupPrimitive.stories.js","sources":["../../../src/RadioGroup/primitives/RadioGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RadioGroupPrimitive } from \"./RadioGroupPrimitive.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof RadioGroupPrimitive> = {\n    title: \"Components/Form Primitives/RadioGroup\",\n    component: RadioGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <RadioGroupPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        disabled: true,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\"\n    }\n};\n\nexport const WithDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithLongOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla magna vel massa suscipit mollis. Nunc dui felis, iaculis id tortor ut, hendrerit pulvinar felis.\"\n            },\n            {\n                value: \"value-2\",\n                label: \" Pellentesque erat ipsum, posuere dapibus diam id, accumsan sagittis mi. In eu nibh ut nunc ultricies placerat.\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Integer a hendrerit dui. Sed tincidunt vel nibh a finibus.\"\n            }\n        ]\n    }\n};\n\nexport const WithComplexOptions: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                id: \"value-1\",\n                value: \"value-1\",\n                label: (\n                    <div>\n                        <div>{\"Value 1\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 1\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-2\",\n                value: \"value-2\",\n                label: (\n                    <div>\n                        <div>{\"Value 2\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 2\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-3\",\n                value: \"value-3\",\n                label: (\n                    <div>\n                        <div>{\"Value 3\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 3\"}</Text>\n                    </div>\n                )\n            }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <RadioGroupPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button onClick={() => setValue(args.value)} text={\"Reset\"} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","RadioGroupPrimitive","args","value","setValue","useState","Default","Disabled","WithDefaultOption","WithDisabledOption","WithDefaultDisabledOption","WithLongOption","WithComplexOptions","Text","WithExternalValueControl","Button"],"mappings":"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"}
+{"version":3,"file":"RadioGroup/primitives/RadioGroupPrimitive.stories.js","sources":["../../../src/RadioGroup/primitives/RadioGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioGroupPrimitive } from \"./RadioGroupPrimitive.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof RadioGroupPrimitive> = {\n    title: \"Components/Form Primitives/RadioGroup\",\n    component: RadioGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <RadioGroupPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        disabled: true,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\"\n    }\n};\n\nexport const WithDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithDefaultDisabledOption: Story = {\n    args: {\n        ...Default.args,\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    }\n};\n\nexport const WithLongOption: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla magna vel massa suscipit mollis. Nunc dui felis, iaculis id tortor ut, hendrerit pulvinar felis.\"\n            },\n            {\n                value: \"value-2\",\n                label: \" Pellentesque erat ipsum, posuere dapibus diam id, accumsan sagittis mi. In eu nibh ut nunc ultricies placerat.\",\n                disabled: true\n            },\n            {\n                value: \"value-3\",\n                label: \"Integer a hendrerit dui. Sed tincidunt vel nibh a finibus.\"\n            }\n        ]\n    }\n};\n\nexport const WithComplexOptions: Story = {\n    args: {\n        ...Default.args,\n        items: [\n            {\n                id: \"value-1\",\n                value: \"value-1\",\n                label: (\n                    <div>\n                        <div>{\"Value 1\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 1\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-2\",\n                value: \"value-2\",\n                label: (\n                    <div>\n                        <div>{\"Value 2\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 2\"}</Text>\n                    </div>\n                )\n            },\n            {\n                id: \"value-3\",\n                value: \"value-3\",\n                label: (\n                    <div>\n                        <div>{\"Value 3\"}</div>\n                        <Text size={\"sm\"}>{\"Option description 3\"}</Text>\n                    </div>\n                )\n            }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        value: \"value-2\",\n        items: [\n            {\n                value: \"value-1\",\n                label: \"Value 1\"\n            },\n            {\n                value: \"value-2\",\n                label: \"Value 2\"\n            },\n            {\n                value: \"value-3\",\n                label: \"Value 3\"\n            }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <RadioGroupPrimitive\n                        {...args}\n                        value={value}\n                        onChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button onClick={() => setValue(args.value)} text={\"Reset\"} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","RadioGroupPrimitive","args","value","setValue","useState","Default","Disabled","WithDefaultOption","WithDisabledOption","WithDefaultDisabledOption","WithLongOption","WithComplexOptions","Text","WithExternalValueControl","Button"],"mappings":"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"}

package/RangeSlider/RangeSlider.d.ts

@@ -5,21 +5,22 @@ type RangeSliderProps = RangeSliderPrimitiveProps & FormComponentProps & {
     label: React.ReactNode;
     valueConverter?: (value: number) => string;
 };
-declare const RangeSlider: (({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
-    original: ({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+declare const DecoratableRangeSlider: ({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+declare const RangeSlider: typeof DecoratableRangeSlider & {
+    original: typeof DecoratableRangeSlider;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
-        original: ({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+    original: typeof DecoratableRangeSlider & {
+        original: typeof DecoratableRangeSlider;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
-        original: ({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableRangeSlider & {
+        original: typeof DecoratableRangeSlider;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/RangeSlider/RangeSlider.stories.d.ts

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

package/RangeSlider/RangeSlider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider/RangeSlider.stories.js","sources":["../../src/RangeSlider/RangeSlider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RangeSlider } from \"./RangeSlider.js\";\n\nconst meta: Meta<typeof RangeSlider> = {\n    title: \"Components/Form/RangeSlider\",\n    component: RangeSlider,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSlider {...args} values={values} onValuesChange={values => setValues(values)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSlider>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    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 Documentation: Story = {\n    render: args => {\n        const [values, setValues] = useState(args.values || [25, 75]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.values changes\n        useEffect(() => {\n            setValues(args.values || [25, 75]);\n        }, [args.values]);\n\n        const handleChange = (newValues: number[]) => {\n            setValues(newValues);\n\n            if (args.required && newValues[0] === 0 && newValues[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or values change\n        useEffect(() => {\n            if (args.required && values[0] === 0 && values[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, values]);\n\n        return (\n            <RangeSlider\n                {...args}\n                values={values}\n                onValuesChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Price Range\",\n        required: true,\n        disabled: false,\n        description: \"Select the minimum and maximum price range\",\n        note: \"Note: The selected range will filter available products\",\n        min: 0,\n        max: 100,\n        step: 1,\n        values: [25, 75],\n        showTooltip: true,\n        transformValue: (value: number) => `$${value}`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the range 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 range 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 range slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the range slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the range slider\",\n            control: \"number\"\n        },\n        values: {\n            description: \"Current values of the range slider [min, max]\",\n            control: \"object\"\n        },\n        showTooltip: {\n            description: \"Whether to show tooltips with the current values\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description:\n                \"Function to transform the numeric values to display text. Please refer to the example code for details on usage.\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onValuesChange: {\n            description: \"Function called when the range slider values change\"\n        },\n        onValuesCommit: {\n            description: \"Function called when the range slider values are committed (on release)\"\n        }\n    }\n};\n"],"names":["meta","RangeSlider","args","values","setValues","useState","Default","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValues","value","undefined"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,gBAAgB;YAAE,QAAQ;QAAiB;QAC3C,gBAAgB;YAAE,QAAQ;QAAiB;QAC3C,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,MAAM;QAChD,OAAO,WAAP,GACI,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,QAAQC;YAAQ,gBAAgBA,CAAAA,SAAUC,UAAUD;;IAEnF;AACJ;AAEA,4BAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,aAAa;IACjB;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,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,QAAQX,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,MAAM,IAAI;YAAC;YAAI;SAAG;QAC5D,MAAM,CAACY,YAAYC,cAAc,GAAGV,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EW,UAAU;YACNZ,UAAUF,KAAK,MAAM,IAAI;gBAAC;gBAAI;aAAG;QACrC,GAAG;YAACA,KAAK,MAAM;SAAC;QAEhB,MAAMe,eAAe,CAACC;YAClBd,UAAUc;YAENhB,KAAK,QAAQ,IAAIgB,AAAiB,MAAjBA,SAAS,CAAC,EAAE,IAAUA,AAAiB,MAAjBA,SAAS,CAAC,EAAE,GACnDH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAwB,KAEjEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFd,KAAK,QAAQ,IAAIC,AAAc,MAAdA,MAAM,CAAC,EAAE,IAAUA,AAAc,MAAdA,MAAM,CAAC,EAAE,GAC7CY,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAwB,KAEjEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACb,KAAK,QAAQ;YAAEC;SAAO;QAE1B,OAAO,WAAP,GACI,oBAACF,aAAWA;YACP,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBc;YAChB,YAAYH;YACZ,UAAUZ,KAAK,QAAQ;YACvB,aAAaA,KAAK,WAAW;YAC7B,gBAAgBA,KAAK,cAAc;;IAG/C;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,KAAK;QACL,KAAK;QACL,MAAM;QACN,QAAQ;YAAC;YAAI;SAAG;QAChB,aAAa;QACb,gBAAgB,CAACiB,QAAkB,CAAC,CAAC,EAAEA,OAAO;QAC9C,YAAYC;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,QAAQ;YACJ,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,gBAAgB;YACZ,aACI;QACR;QACA,YAAY;YACR,aACI;QACR;QACA,gBAAgB;YACZ,aAAa;QACjB;QACA,gBAAgB;YACZ,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"RangeSlider/RangeSlider.stories.js","sources":["../../src/RangeSlider/RangeSlider.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RangeSlider } from \"./RangeSlider.js\";\n\nconst meta: Meta<typeof RangeSlider> = {\n    title: \"Components/Form/RangeSlider\",\n    component: RangeSlider,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSlider {...args} values={values} onValuesChange={values => setValues(values)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSlider>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    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 Documentation: Story = {\n    render: args => {\n        const [values, setValues] = useState(args.values || [25, 75]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.values changes\n        useEffect(() => {\n            setValues(args.values || [25, 75]);\n        }, [args.values]);\n\n        const handleChange = (newValues: number[]) => {\n            setValues(newValues);\n\n            if (args.required && newValues[0] === 0 && newValues[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or values change\n        useEffect(() => {\n            if (args.required && values[0] === 0 && values[1] === 0) {\n                setValidation({ isValid: false, message: \"Please select a range\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, values]);\n\n        return (\n            <RangeSlider\n                {...args}\n                values={values}\n                onValuesChange={handleChange}\n                validation={validation}\n                required={args.required}\n                showTooltip={args.showTooltip}\n                transformValue={args.transformValue}\n            />\n        );\n    },\n    args: {\n        label: \"Price Range\",\n        required: true,\n        disabled: false,\n        description: \"Select the minimum and maximum price range\",\n        note: \"Note: The selected range will filter available products\",\n        min: 0,\n        max: 100,\n        step: 1,\n        values: [25, 75],\n        showTooltip: true,\n        transformValue: (value: number) => `$${value}`,\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the range 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 range 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 range slider\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for the range slider\",\n            control: \"number\"\n        },\n        step: {\n            description: \"Step increment for the range slider\",\n            control: \"number\"\n        },\n        values: {\n            description: \"Current values of the range slider [min, max]\",\n            control: \"object\"\n        },\n        showTooltip: {\n            description: \"Whether to show tooltips with the current values\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        transformValue: {\n            description:\n                \"Function to transform the numeric values to display text. Please refer to the example code for details on usage.\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onValuesChange: {\n            description: \"Function called when the range slider values change\"\n        },\n        onValuesCommit: {\n            description: \"Function called when the range slider values are committed (on release)\"\n        }\n    }\n};\n"],"names":["meta","RangeSlider","args","values","setValues","useState","Default","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","useEffect","handleChange","newValues","value","undefined"],"mappings":"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"}

package/RangeSlider/primitives/RangeSliderPrimitive.stories.d.ts

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

package/RangeSlider/primitives/RangeSliderPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider/primitives/RangeSliderPrimitive.stories.js","sources":["../../../src/RangeSlider/primitives/RangeSliderPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RangeSliderPrimitive } from \"./RangeSliderPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof RangeSliderPrimitive> = {\n    title: \"Components/Form Primitives/RangeSlider\",\n    component: RangeSliderPrimitive,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSliderPrimitive\n                {...args}\n                values={values}\n                onValuesChange={values => setValues(values)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSliderPrimitive>;\n\nexport const Default: Story = {};\n\nexport const WithDefaultValues: Story = {\n    args: {\n        values: [25, 75]\n    }\n};\n\nexport const WithMinAndMaxValues: Story = {\n    args: {\n        min: 25,\n        max: 75\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        values: [25, 75]\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 defaultValues = args.values ?? [25, 75];\n        const [values, setValues] = useState(defaultValues);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <RangeSliderPrimitive\n                        {...args}\n                        values={values}\n                        onValuesChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(defaultValues)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current value: <code>{values.toString()}</code>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","RangeSliderPrimitive","args","values","setValues","useState","Default","WithDefaultValues","WithMinAndMaxValues","WithSteps","Disabled","WithTooltip","WithTooltipSideTop","WithTooltipAndCustomValueTransformer","value","Math","WithExternalValueControl","defaultValues","Button"],"mappings":";;;AAKA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,gBAAgB;YAAE,QAAQ;QAAiB;QAC3C,gBAAgB;YAAE,QAAQ;QAAiB;IAC/C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,MAAM;QAChD,OAAO,WAAP,GACI,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBA,CAAAA,SAAUC,UAAUD;;IAGhD;AACJ;AAEA,qCAAeH;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,oBAA2B;IACpC,MAAM;QACF,QAAQ;YAAC;YAAI;SAAG;IACpB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,KAAK;QACL,KAAK;IACT;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,UAAU;QACV,QAAQ;YAAC;YAAI;SAAG;IACpB;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,CAACC,QACN,GAAGC,KAAK,KAAK,CAACD,OAAO,CAAC,CAAC;IAEtC;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,aAAa;QACb,gBAAgB,CAACF,QACN,GAAGC,KAAK,KAAK,CAACD,OAAO,CAAC,CAAC;IAEtC;IACA,QAAQZ,CAAAA;QACJ,MAAMe,gBAAgBf,KAAK,MAAM,IAAI;YAAC;YAAI;SAAG;QAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASY;QACrC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAAChB,sBAAoBA;YAChB,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBA,CAAAA,SAAUC,UAAUD;2BAG5C,oBAAC;YAAI,WAAW;yBACZ,oBAACe,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMd,UAAUa;2BAEpD,oBAAC;YAAI,WAAW;WAAoB,iCACjB,oBAAC,cAAMd,OAAO,QAAQ;IAIrD;AACJ"}
+{"version":3,"file":"RangeSlider/primitives/RangeSliderPrimitive.stories.js","sources":["../../../src/RangeSlider/primitives/RangeSliderPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RangeSliderPrimitive } from \"./RangeSliderPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof RangeSliderPrimitive> = {\n    title: \"Components/Form Primitives/RangeSlider\",\n    component: RangeSliderPrimitive,\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onValuesCommit: { action: \"onValuesCommit\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <RangeSliderPrimitive\n                {...args}\n                values={values}\n                onValuesChange={values => setValues(values)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RangeSliderPrimitive>;\n\nexport const Default: Story = {};\n\nexport const WithDefaultValues: Story = {\n    args: {\n        values: [25, 75]\n    }\n};\n\nexport const WithMinAndMaxValues: Story = {\n    args: {\n        min: 25,\n        max: 75\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        values: [25, 75]\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 defaultValues = args.values ?? [25, 75];\n        const [values, setValues] = useState(defaultValues);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <RangeSliderPrimitive\n                        {...args}\n                        values={values}\n                        onValuesChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(defaultValues)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current value: <code>{values.toString()}</code>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","RangeSliderPrimitive","args","values","setValues","useState","Default","WithDefaultValues","WithMinAndMaxValues","WithSteps","Disabled","WithTooltip","WithTooltipSideTop","WithTooltipAndCustomValueTransformer","value","Math","WithExternalValueControl","defaultValues","Button"],"mappings":";;;AAKA,MAAMA,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,gBAAgB;YAAE,QAAQ;QAAiB;QAC3C,gBAAgB;YAAE,QAAQ;QAAiB;IAC/C;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,MAAM;QAChD,OAAO,WAAP,GACI,oBAACD,sBAAoBA;YAChB,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBA,CAAAA,SAAUC,UAAUD;;IAGhD;AACJ;AAEA,qCAAeH;AAGR,MAAMM,UAAiB,CAAC;AAExB,MAAMC,oBAA2B;IACpC,MAAM;QACF,QAAQ;YAAC;YAAI;SAAG;IACpB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,KAAK;QACL,KAAK;IACT;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,UAAU;QACV,QAAQ;YAAC;YAAI;SAAG;IACpB;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,CAACC,QACN,GAAGC,KAAK,KAAK,CAACD,OAAO,CAAC,CAAC;IAEtC;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,aAAa;QACb,gBAAgB,CAACF,QACN,GAAGC,KAAK,KAAK,CAACD,OAAO,CAAC,CAAC;IAEtC;IACA,QAAQZ,CAAAA;QACJ,MAAMe,gBAAgBf,KAAK,MAAM,IAAI;YAAC;YAAI;SAAG;QAC7C,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASY;QACrC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAAChB,sBAAoBA;YAChB,GAAGC,IAAI;YACR,QAAQC;YACR,gBAAgBA,CAAAA,SAAUC,UAAUD;2BAG5C,oBAAC;YAAI,WAAW;yBACZ,oBAACe,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMd,UAAUa;2BAEpD,oBAAC;YAAI,WAAW;WAAoB,iCACjB,oBAAC,cAAMd,OAAO,QAAQ;IAIrD;AACJ"}

package/ScrollArea/ScrollArea.d.ts

@@ -13,7 +13,21 @@ export interface ScrollPosition {
 interface ScrollAreaProps extends Omit<React.ComponentProps<typeof ScrollAreaPrimitive.Root>, "onScroll"> {
     onScrollPositionChange?: (position: ScrollPosition) => void;
     onScroll?: (position: ScrollPosition) => void;
+    /**
+     * Classes for the scrolling element itself. Put the height limit here when the area has to grow
+     * with its content up to a maximum, instead of filling a parent of a known height.
+     */
+    viewportClassName?: string;
+    /**
+     * Native scroll handler for the scrolling element, for callers that need the event itself.
+     * `onScroll` reports positions instead.
+     */
+    onViewportScroll?: React.UIEventHandler<HTMLDivElement>;
+    /**
+     * Ref to the scrolling element, for callers that scroll it themselves.
+     */
+    viewportRef?: React.Ref<HTMLDivElement>;
 }
-declare function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...props }: ScrollAreaProps): React.JSX.Element;
-declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
+declare function ScrollArea({ className, children, onScrollPositionChange, onScroll, viewportClassName, onViewportScroll, viewportRef: externalViewportRef, type, ...props }: ScrollAreaProps): React.JSX.Element;
+declare function ScrollBar({ className, orientation, onMouseDown, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
 export { ScrollArea, ScrollBar };

package/ScrollArea/ScrollArea.js

@@ -1,8 +1,15 @@
 import { cn } from "../utils.js";
 import * as __rspack_external_react from "react";
-import * as __rspack_external__radix_ui_react_scroll_area_93228e9e from "@radix-ui/react-scroll-area";
-function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...props }) {
+import * as __rspack_external__radix_ui_react_scroll_area_bdec1136 from "@radix-ui/react-scroll-area";
+function ScrollArea({ className, children, onScrollPositionChange, onScroll, viewportClassName, onViewportScroll, viewportRef: externalViewportRef, type = "auto", ...props }) {
     const viewportRef = __rspack_external_react.useRef(null);
+    const setViewportRef = __rspack_external_react.useCallback((element)=>{
+        viewportRef.current = element;
+        if ("function" == typeof externalViewportRef) externalViewportRef(element);
+        else if (externalViewportRef) externalViewportRef.current = element;
+    }, [
+        externalViewportRef
+    ]);
     __rspack_external_react.useEffect(()=>{
         const viewport = viewportRef.current;
         if (!viewport || !onScrollPositionChange && !onScroll) return;
@@ -28,23 +35,30 @@ function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...
         onScrollPositionChange,
         onScroll
     ]);
-    return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_93228e9e.Root, {
+    return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.Root, {
         "data-slot": "scroll-area",
+        type: type,
         className: cn("relative", className),
         ...props
-    }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_93228e9e.Viewport, {
-        ref: viewportRef,
+    }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.Viewport, {
+        ref: setViewportRef,
         "data-slot": "scroll-area-viewport",
-        className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-    }, children), /*#__PURE__*/ __rspack_external_react.createElement(ScrollBar, null), /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_93228e9e.Corner, null));
+        onScroll: onViewportScroll,
+        className: cn("focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", viewportClassName)
+    }, children), /*#__PURE__*/ __rspack_external_react.createElement(ScrollBar, null), /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.Corner, null));
 }
-function ScrollBar({ className, orientation = "vertical", ...props }) {
-    return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_93228e9e.ScrollAreaScrollbar, {
+function ScrollBar({ className, orientation = "vertical", onMouseDown, ...props }) {
+    const handleMouseDown = (event)=>{
+        onMouseDown?.(event);
+        event.preventDefault();
+    };
+    return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.ScrollAreaScrollbar, {
         "data-slot": "scroll-area-scrollbar",
         orientation: orientation,
-        className: cn("flex touch-none transition-colors select-none", "vertical" === orientation && "h-full w-[8px] border-l border-l-transparent", "horizontal" === orientation && "h-[8px] flex-col border-t border-t-transparent", className),
+        onMouseDown: handleMouseDown,
+        className: cn("flex touch-none transition-colors select-none", "vertical" === orientation && "h-full w-[10px] p-[2px]", "horizontal" === orientation && "h-[10px] flex-col p-[2px]", className),
         ...props
-    }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_93228e9e.ScrollAreaThumb, {
+    }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.ScrollAreaThumb, {
         "data-slot": "scroll-area-thumb",
         className: "bg-neutral-strong/70 relative flex-1 rounded-full"
     }));

package/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea/ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"~/utils.js\";\n\nexport interface ScrollPosition {\n    top: number;\n    left: number;\n    scrollTop: number;\n    scrollLeft: number;\n    scrollHeight: number;\n    scrollWidth: number;\n    clientHeight: number;\n    clientWidth: number;\n}\n\ninterface ScrollAreaProps extends Omit<\n    React.ComponentProps<typeof ScrollAreaPrimitive.Root>,\n    \"onScroll\"\n> {\n    onScrollPositionChange?: (position: ScrollPosition) => void;\n    onScroll?: (position: ScrollPosition) => void;\n}\n\nfunction ScrollArea({\n    className,\n    children,\n    onScrollPositionChange,\n    onScroll,\n    ...props\n}: ScrollAreaProps) {\n    const viewportRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        const viewport = viewportRef.current;\n        if (!viewport || (!onScrollPositionChange && !onScroll)) {\n            return;\n        }\n\n        // The Viewport component itself is the scrollable element.\n        const handleScroll = () => {\n            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =\n                viewport;\n\n            const position: ScrollPosition = {\n                top: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0,\n                left: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0,\n                scrollTop,\n                scrollLeft,\n                scrollHeight,\n                scrollWidth,\n                clientHeight,\n                clientWidth\n            };\n\n            onScrollPositionChange?.(position);\n            onScroll?.(position);\n        };\n\n        // Call handleScroll initially to provide initial position.\n        handleScroll();\n\n        viewport.addEventListener(\"scroll\", handleScroll);\n        return () => viewport.removeEventListener(\"scroll\", handleScroll);\n    }, [onScrollPositionChange, onScroll]);\n\n    return (\n        <ScrollAreaPrimitive.Root\n            data-slot=\"scroll-area\"\n            className={cn(\"relative\", className)}\n            {...props}\n        >\n            <ScrollAreaPrimitive.Viewport\n                ref={viewportRef}\n                data-slot=\"scroll-area-viewport\"\n                className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n            >\n                {children}\n            </ScrollAreaPrimitive.Viewport>\n            <ScrollBar />\n            <ScrollAreaPrimitive.Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n}\n\nfunction ScrollBar({\n    className,\n    orientation = \"vertical\",\n    ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n    return (\n        <ScrollAreaPrimitive.ScrollAreaScrollbar\n            data-slot=\"scroll-area-scrollbar\"\n            orientation={orientation}\n            className={cn(\n                \"flex touch-none transition-colors select-none\",\n                orientation === \"vertical\" && \"h-full w-[8px] border-l border-l-transparent\",\n                orientation === \"horizontal\" && \"h-[8px] flex-col border-t border-t-transparent\",\n                className\n            )}\n            {...props}\n        >\n            <ScrollAreaPrimitive.ScrollAreaThumb\n                data-slot=\"scroll-area-thumb\"\n                className=\"bg-neutral-strong/70 relative flex-1 rounded-full\"\n            />\n        </ScrollAreaPrimitive.ScrollAreaScrollbar>\n    );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollArea","className","children","onScrollPositionChange","onScroll","props","viewportRef","React","viewport","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","ScrollAreaPrimitive","cn","ScrollBar","orientation"],"mappings":";;;AAuBA,SAASA,WAAW,EAChBC,SAAS,EACTC,QAAQ,EACRC,sBAAsB,EACtBC,QAAQ,EACR,GAAGC,OACW;IACd,MAAMC,cAAcC,wBAAAA,MAAY,CAAiB;IAEjDA,wBAAAA,SAAe,CAAC;QACZ,MAAMC,WAAWF,YAAY,OAAO;QACpC,IAAI,CAACE,YAAa,CAACL,0BAA0B,CAACC,UAC1C;QAIJ,MAAMK,eAAe;YACjB,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,EAAEC,YAAY,EAAEC,WAAW,EAAE,GACjFP;YAEJ,MAAMQ,WAA2B;gBAC7B,KAAKJ,eAAeE,eAAeJ,YAAaE,CAAAA,eAAeE,YAAW,IAAK;gBAC/E,MAAMD,cAAcE,cAAcJ,aAAcE,CAAAA,cAAcE,WAAU,IAAK;gBAC7EL;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACJ;YAEAZ,yBAAyBa;YACzBZ,WAAWY;QACf;QAGAP;QAEAD,SAAS,gBAAgB,CAAC,UAAUC;QACpC,OAAO,IAAMD,SAAS,mBAAmB,CAAC,UAAUC;IACxD,GAAG;QAACN;QAAwBC;KAAS;IAErC,OAAO,WAAP,GACI,sCAACa,uDAAAA,IAAwB;QACrB,aAAU;QACV,WAAWC,GAAG,YAAYjB;QACzB,GAAGI,KAAK;qBAET,sCAACY,uDAAAA,QAA4B;QACzB,KAAKX;QACL,aAAU;QACV,WAAU;OAETJ,WAAAA,WAAAA,GAEL,sCAACiB,WAASA,OAAAA,WAAAA,GACV,sCAACF,uDAAAA,MAA0B;AAGvC;AAEA,SAASE,UAAU,EACflB,SAAS,EACTmB,cAAc,UAAU,EACxB,GAAGf,OACgE;IACnE,OAAO,WAAP,GACI,sCAACY,uDAAAA,mBAAuC;QACpC,aAAU;QACV,aAAaG;QACb,WAAWF,GACP,iDACAE,AAAgB,eAAhBA,eAA8B,gDAC9BA,AAAgB,iBAAhBA,eAAgC,kDAChCnB;QAEH,GAAGI,KAAK;qBAET,sCAACY,uDAAAA,eAAmC;QAChC,aAAU;QACV,WAAU;;AAI1B"}
+{"version":3,"file":"ScrollArea/ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"~/utils.js\";\n\nexport interface ScrollPosition {\n    top: number;\n    left: number;\n    scrollTop: number;\n    scrollLeft: number;\n    scrollHeight: number;\n    scrollWidth: number;\n    clientHeight: number;\n    clientWidth: number;\n}\n\ninterface ScrollAreaProps extends Omit<\n    React.ComponentProps<typeof ScrollAreaPrimitive.Root>,\n    \"onScroll\"\n> {\n    onScrollPositionChange?: (position: ScrollPosition) => void;\n    onScroll?: (position: ScrollPosition) => void;\n    /**\n     * Classes for the scrolling element itself. Put the height limit here when the area has to grow\n     * with its content up to a maximum, instead of filling a parent of a known height.\n     */\n    viewportClassName?: string;\n    /**\n     * Native scroll handler for the scrolling element, for callers that need the event itself.\n     * `onScroll` reports positions instead.\n     */\n    onViewportScroll?: React.UIEventHandler<HTMLDivElement>;\n    /**\n     * Ref to the scrolling element, for callers that scroll it themselves.\n     */\n    viewportRef?: React.Ref<HTMLDivElement>;\n}\n\nfunction ScrollArea({\n    className,\n    children,\n    onScrollPositionChange,\n    onScroll,\n    viewportClassName,\n    onViewportScroll,\n    viewportRef: externalViewportRef,\n    /*\n     * Radix would only show the scrollbar once the pointer is inside. Showing it whenever there is\n     * more content is the same rule the rest of the admin follows, a Select included.\n     */\n    type = \"auto\",\n    ...props\n}: ScrollAreaProps) {\n    const viewportRef = React.useRef<HTMLDivElement | null>(null);\n\n    // The internal ref drives the scroll listener below; a caller's ref gets the same element.\n    const setViewportRef = React.useCallback(\n        (element: HTMLDivElement | null) => {\n            viewportRef.current = element;\n            if (typeof externalViewportRef === \"function\") {\n                externalViewportRef(element);\n            } else if (externalViewportRef) {\n                (externalViewportRef as React.MutableRefObject<HTMLDivElement | null>).current =\n                    element;\n            }\n        },\n        [externalViewportRef]\n    );\n\n    React.useEffect(() => {\n        const viewport = viewportRef.current;\n        if (!viewport || (!onScrollPositionChange && !onScroll)) {\n            return;\n        }\n\n        // The Viewport component itself is the scrollable element.\n        const handleScroll = () => {\n            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =\n                viewport;\n\n            const position: ScrollPosition = {\n                top: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0,\n                left: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0,\n                scrollTop,\n                scrollLeft,\n                scrollHeight,\n                scrollWidth,\n                clientHeight,\n                clientWidth\n            };\n\n            onScrollPositionChange?.(position);\n            onScroll?.(position);\n        };\n\n        // Call handleScroll initially to provide initial position.\n        handleScroll();\n\n        viewport.addEventListener(\"scroll\", handleScroll);\n        return () => viewport.removeEventListener(\"scroll\", handleScroll);\n    }, [onScrollPositionChange, onScroll]);\n\n    return (\n        <ScrollAreaPrimitive.Root\n            data-slot=\"scroll-area\"\n            type={type}\n            className={cn(\"relative\", className)}\n            {...props}\n        >\n            <ScrollAreaPrimitive.Viewport\n                ref={setViewportRef}\n                data-slot=\"scroll-area-viewport\"\n                onScroll={onViewportScroll}\n                className={cn(\n                    \"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\",\n                    viewportClassName\n                )}\n            >\n                {children}\n            </ScrollAreaPrimitive.Viewport>\n            <ScrollBar />\n            <ScrollAreaPrimitive.Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n}\n\nfunction ScrollBar({\n    className,\n    orientation = \"vertical\",\n    onMouseDown,\n    ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        onMouseDown?.(event);\n\n        /*\n         * Grabbing a scrollbar must not move focus. An autocomplete closes its list the moment its\n         * input blurs, so without this, dragging the thumb dismisses the list under the pointer.\n         */\n        event.preventDefault();\n    };\n\n    return (\n        <ScrollAreaPrimitive.ScrollAreaScrollbar\n            data-slot=\"scroll-area-scrollbar\"\n            orientation={orientation}\n            onMouseDown={handleMouseDown}\n            className={cn(\n                \"flex touch-none transition-colors select-none\",\n                orientation === \"vertical\" && \"h-full w-[10px] p-[2px]\",\n                orientation === \"horizontal\" && \"h-[10px] flex-col p-[2px]\",\n                className\n            )}\n            {...props}\n        >\n            <ScrollAreaPrimitive.ScrollAreaThumb\n                data-slot=\"scroll-area-thumb\"\n                className=\"bg-neutral-strong/70 relative flex-1 rounded-full\"\n            />\n        </ScrollAreaPrimitive.ScrollAreaScrollbar>\n    );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollArea","className","children","onScrollPositionChange","onScroll","viewportClassName","onViewportScroll","externalViewportRef","type","props","viewportRef","React","setViewportRef","element","viewport","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","ScrollAreaPrimitive","cn","ScrollBar","orientation","onMouseDown","handleMouseDown","event"],"mappings":";;;AAqCA,SAASA,WAAW,EAChBC,SAAS,EACTC,QAAQ,EACRC,sBAAsB,EACtBC,QAAQ,EACRC,iBAAiB,EACjBC,gBAAgB,EAChB,aAAaC,mBAAmB,EAKhCC,OAAO,MAAM,EACb,GAAGC,OACW;IACd,MAAMC,cAAcC,wBAAAA,MAAY,CAAwB;IAGxD,MAAMC,iBAAiBD,wBAAAA,WAAiB,CACpC,CAACE;QACGH,YAAY,OAAO,GAAGG;QACtB,IAAI,AAA+B,cAA/B,OAAON,qBACPA,oBAAoBM;aACjB,IAAIN,qBACNA,oBAAsE,OAAO,GAC1EM;IAEZ,GACA;QAACN;KAAoB;IAGzBI,wBAAAA,SAAe,CAAC;QACZ,MAAMG,WAAWJ,YAAY,OAAO;QACpC,IAAI,CAACI,YAAa,CAACX,0BAA0B,CAACC,UAC1C;QAIJ,MAAMW,eAAe;YACjB,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,EAAEC,YAAY,EAAEC,WAAW,EAAE,GACjFP;YAEJ,MAAMQ,WAA2B;gBAC7B,KAAKJ,eAAeE,eAAeJ,YAAaE,CAAAA,eAAeE,YAAW,IAAK;gBAC/E,MAAMD,cAAcE,cAAcJ,aAAcE,CAAAA,cAAcE,WAAU,IAAK;gBAC7EL;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACJ;YAEAlB,yBAAyBmB;YACzBlB,WAAWkB;QACf;QAGAP;QAEAD,SAAS,gBAAgB,CAAC,UAAUC;QACpC,OAAO,IAAMD,SAAS,mBAAmB,CAAC,UAAUC;IACxD,GAAG;QAACZ;QAAwBC;KAAS;IAErC,OAAO,WAAP,GACI,sCAACmB,uDAAAA,IAAwB;QACrB,aAAU;QACV,MAAMf;QACN,WAAWgB,GAAG,YAAYvB;QACzB,GAAGQ,KAAK;qBAET,sCAACc,uDAAAA,QAA4B;QACzB,KAAKX;QACL,aAAU;QACV,UAAUN;QACV,WAAWkB,GACP,sJACAnB;OAGHH,WAAAA,WAAAA,GAEL,sCAACuB,WAASA,OAAAA,WAAAA,GACV,sCAACF,uDAAAA,MAA0B;AAGvC;AAEA,SAASE,UAAU,EACfxB,SAAS,EACTyB,cAAc,UAAU,EACxBC,WAAW,EACX,GAAGlB,OACgE;IACnE,MAAMmB,kBAAkB,CAACC;QACrBF,cAAcE;QAMdA,MAAM,cAAc;IACxB;IAEA,OAAO,WAAP,GACI,sCAACN,uDAAAA,mBAAuC;QACpC,aAAU;QACV,aAAaG;QACb,aAAaE;QACb,WAAWJ,GACP,iDACAE,AAAgB,eAAhBA,eAA8B,2BAC9BA,AAAgB,iBAAhBA,eAAgC,6BAChCzB;QAEH,GAAGQ,KAAK;qBAET,sCAACc,uDAAAA,eAAmC;QAChC,aAAU;QACV,WAAU;;AAI1B"}

package/ScrollArea/ScrollArea.stories.d.ts

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

package/ScrollArea/ScrollArea.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea/ScrollArea.stories.js","sources":["../../src/ScrollArea/ScrollArea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ScrollArea, ScrollBar, ScrollPosition } from \"./ScrollArea.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst meta: Meta<typeof ScrollArea> = {\n    title: \"Components/ScrollArea\",\n    component: ScrollArea,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof ScrollArea>;\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport const Default: Story = {\n    render: () => {\n        return (\n            <ScrollArea className=\"h-72 w-48 rounded-md border border-neutral-dimmed\">\n                <div className=\"p-4\">\n                    <Heading level={6} className=\"mb-4\">\n                        Tags\n                    </Heading>\n                    {tags.map(tag => (\n                        <div key={tag}>\n                            <Text className=\"text-sm\">{tag}</Text>\n                            <Separator className=\"my-2\" />\n                        </div>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    }\n};\n\nexport const HorizontalScrolling: Story = {\n    render: () => {\n        const works = [\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            }\n        ];\n\n        return (\n            <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border border-neutral-dimmed\">\n                <div className=\"flex w-max space-x-4 p-4\">\n                    {works.map(artwork => (\n                        <figure key={artwork.artist} className=\"shrink-0\">\n                            <div className=\"overflow-hidden rounded-md\">\n                                <img\n                                    src={artwork.art}\n                                    alt={`Photo by ${artwork.artist}`}\n                                    className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                                    width={300}\n                                    height={400}\n                                />\n                            </div>\n                            <figcaption className=\"pt-2 text-xs text-neutral-strong\">\n                                Photo by{\" \"}\n                                <span className=\"font-semibold text-neutral-primary\">\n                                    {artwork.artist}\n                                </span>\n                            </figcaption>\n                        </figure>\n                    ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n        );\n    }\n};\n\nexport const WithScrollPositionTracking: Story = {\n    render: () => {\n        const [position, setPosition] = React.useState<ScrollPosition | null>(null);\n        const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);\n\n        const handleScrollPositionChange = React.useCallback(\n            (pos: ScrollPosition) => {\n                setPosition(pos);\n\n                // Trigger load more when scrolled 90% down.\n                if (pos.top >= 0.9 && !loadMoreTriggered) {\n                    setLoadMoreTriggered(true);\n                    console.log(\"Load more triggered at position:\", pos);\n                } else if (pos.top < 0.9) {\n                    setLoadMoreTriggered(false);\n                }\n            },\n            [loadMoreTriggered]\n        );\n\n        return (\n            <div className=\"space-y-4\">\n                <ScrollArea\n                    className=\"h-72 w-48 rounded-md border border-neutral-dimmed\"\n                    onScrollPositionChange={handleScrollPositionChange}\n                >\n                    <div className=\"p-4\">\n                        <Heading level={6} className=\"mb-4\">\n                            Tags\n                        </Heading>\n                        {tags.map(tag => (\n                            <div key={tag}>\n                                <Text className=\"text-sm\">{tag}</Text>\n                                <Separator className=\"my-2\" />\n                            </div>\n                        ))}\n                    </div>\n                </ScrollArea>\n\n                {position && (\n                    <div className=\"rounded-md border border-neutral-dimmed p-4 space-y-2\">\n                        <Text className=\"font-semibold\">Scroll Position:</Text>\n                        <Text className=\"text-sm\">Top: {(position.top * 100).toFixed(1)}%</Text>\n                        <Text className=\"text-sm\">ScrollTop: {position.scrollTop}px</Text>\n                        <Text className=\"text-sm\">\n                            Load More Triggered: {loadMoreTriggered ? \"Yes\" : \"No\"}\n                        </Text>\n                    </div>\n                )}\n            </div>\n        );\n    }\n};\n"],"names":["meta","ScrollArea","Story","tags","Array","_","i","a","Default","Heading","tag","Text","Separator","HorizontalScrolling","works","artwork","ScrollBar","WithScrollPositionTracking","position","setPosition","React","loadMoreTriggered","setLoadMoreTriggered","handleScrollPositionChange","pos","console"],"mappings":"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"}
+{"version":3,"file":"ScrollArea/ScrollArea.stories.js","sources":["../../src/ScrollArea/ScrollArea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ScrollArea, ScrollBar, ScrollPosition } from \"./ScrollArea.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst meta: Meta<typeof ScrollArea> = {\n    title: \"Components/ScrollArea\",\n    component: ScrollArea,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof ScrollArea>;\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport const Default: Story = {\n    render: () => {\n        return (\n            <ScrollArea className=\"h-72 w-48 rounded-md border border-neutral-dimmed\">\n                <div className=\"p-4\">\n                    <Heading level={6} className=\"mb-4\">\n                        Tags\n                    </Heading>\n                    {tags.map(tag => (\n                        <div key={tag}>\n                            <Text className=\"text-sm\">{tag}</Text>\n                            <Separator className=\"my-2\" />\n                        </div>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    }\n};\n\nexport const HorizontalScrolling: Story = {\n    render: () => {\n        const works = [\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            }\n        ];\n\n        return (\n            <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border border-neutral-dimmed\">\n                <div className=\"flex w-max space-x-4 p-4\">\n                    {works.map(artwork => (\n                        <figure key={artwork.artist} className=\"shrink-0\">\n                            <div className=\"overflow-hidden rounded-md\">\n                                <img\n                                    src={artwork.art}\n                                    alt={`Photo by ${artwork.artist}`}\n                                    className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                                    width={300}\n                                    height={400}\n                                />\n                            </div>\n                            <figcaption className=\"pt-2 text-xs text-neutral-strong\">\n                                Photo by{\" \"}\n                                <span className=\"font-semibold text-neutral-primary\">\n                                    {artwork.artist}\n                                </span>\n                            </figcaption>\n                        </figure>\n                    ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n        );\n    }\n};\n\nexport const WithScrollPositionTracking: Story = {\n    render: () => {\n        const [position, setPosition] = React.useState<ScrollPosition | null>(null);\n        const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);\n\n        const handleScrollPositionChange = React.useCallback(\n            (pos: ScrollPosition) => {\n                setPosition(pos);\n\n                // Trigger load more when scrolled 90% down.\n                if (pos.top >= 0.9 && !loadMoreTriggered) {\n                    setLoadMoreTriggered(true);\n                    console.log(\"Load more triggered at position:\", pos);\n                } else if (pos.top < 0.9) {\n                    setLoadMoreTriggered(false);\n                }\n            },\n            [loadMoreTriggered]\n        );\n\n        return (\n            <div className=\"space-y-4\">\n                <ScrollArea\n                    className=\"h-72 w-48 rounded-md border border-neutral-dimmed\"\n                    onScrollPositionChange={handleScrollPositionChange}\n                >\n                    <div className=\"p-4\">\n                        <Heading level={6} className=\"mb-4\">\n                            Tags\n                        </Heading>\n                        {tags.map(tag => (\n                            <div key={tag}>\n                                <Text className=\"text-sm\">{tag}</Text>\n                                <Separator className=\"my-2\" />\n                            </div>\n                        ))}\n                    </div>\n                </ScrollArea>\n\n                {position && (\n                    <div className=\"rounded-md border border-neutral-dimmed p-4 space-y-2\">\n                        <Text className=\"font-semibold\">Scroll Position:</Text>\n                        <Text className=\"text-sm\">Top: {(position.top * 100).toFixed(1)}%</Text>\n                        <Text className=\"text-sm\">ScrollTop: {position.scrollTop}px</Text>\n                        <Text className=\"text-sm\">\n                            Load More Triggered: {loadMoreTriggered ? \"Yes\" : \"No\"}\n                        </Text>\n                    </div>\n                )}\n            </div>\n        );\n    }\n};\n"],"names":["meta","ScrollArea","Story","tags","Array","_","i","a","Default","Heading","tag","Text","Separator","HorizontalScrolling","works","artwork","ScrollBar","WithScrollPositionTracking","position","setPosition","React","loadMoreTriggered","setLoadMoreTriggered","handleScrollPositionChange","pos","console"],"mappings":"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"}

package/SegmentedControl/SegmentedControl.d.ts

@@ -2,23 +2,28 @@ import React from "react";
 import type { SegmentedControlPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type SegmentedControlProps = SegmentedControlPrimitiveProps & FormComponentProps;
-declare const SegmentedControl: (({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+declare const DecoratableSegmentedControl: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+declare const SegmentedControl: typeof DecoratableSegmentedControl & {
+    original: typeof DecoratableSegmentedControl;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+    original: typeof DecoratableSegmentedControl & {
+        original: typeof DecoratableSegmentedControl;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSegmentedControl & {
+        original: typeof DecoratableSegmentedControl;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Tabs: (({ children, variant, defaultValue, className }: import("./SegmentedControlTabs.js").SegmentedControlTabsProps) => React.JSX.Element) & {
+        Tab: typeof import("./SegmentedControlTab.js").SegmentedControlTab;
+    };
 };
 export { SegmentedControl, type SegmentedControlProps };

package/SegmentedControl/SegmentedControl.js

@@ -1,5 +1,6 @@
 import react, { useMemo } from "react";
-import { makeDecoratable } from "../utils.js";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { SegmentedControlTabs } from "./SegmentedControlTabs.js";
 import { SegmentedControlPrimitive } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 const DecoratableSegmentedControl = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
@@ -32,7 +33,10 @@ const DecoratableSegmentedControl = ({ label, description, note, hint, required,
         disabled: disabled
     }));
 };
-const SegmentedControl = makeDecoratable("SegmentedControl", DecoratableSegmentedControl);
+const BaseSegmentedControl = makeDecoratable("SegmentedControl", DecoratableSegmentedControl);
+const SegmentedControl = withStaticProps(BaseSegmentedControl, {
+    Tabs: SegmentedControlTabs
+});
 export { SegmentedControl };
 
 //# sourceMappingURL=SegmentedControl.js.map

package/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl/SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SegmentedControlPrimitiveProps } from \"./primitives/index.js\";\nimport { SegmentedControlPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype SegmentedControlProps = SegmentedControlPrimitiveProps & FormComponentProps;\n\nconst DecoratableSegmentedControl = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SegmentedControlProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className=\"mb-xs-plus\"\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className=\"mt-none mb-xs-plus\"\n            />\n            <SegmentedControlPrimitive {...props} disabled={disabled} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst SegmentedControl = makeDecoratable(\"SegmentedControl\", DecoratableSegmentedControl);\n\nexport { SegmentedControl, type SegmentedControlProps };\n"],"names":["DecoratableSegmentedControl","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","FormComponentLabel","FormComponentDescription","FormComponentErrorMessage","SegmentedControlPrimitive","FormComponentNote","SegmentedControl","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,8BAA8B,CAAC,EACjCC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACiB;IACpB,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,WAAU;qBACX,oBAACI,oBAAkBA;QACf,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;sBAEb,oBAACG,0BAAwBA;QACrB,MAAMZ;QACN,UAAUI;QACV,WAAU;sBAEd,oBAACS,2BAAyBA;QACtB,MAAML;QACN,SAASC;QACT,UAAUL;QACV,WAAU;sBAEd,oBAACU,2BAAyBA;QAAE,GAAGR,KAAK;QAAE,UAAUF;sBAChD,oBAACW,mBAAiBA;QAAC,MAAMd;QAAM,UAAUG;;AAGrD;AAEA,MAAMY,mBAAmBC,gBAAgB,oBAAoBnB"}
+{"version":3,"file":"SegmentedControl/SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SegmentedControlTabs } from \"./SegmentedControlTabs.js\";\nimport type { SegmentedControlPrimitiveProps } from \"./primitives/index.js\";\nimport { SegmentedControlPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype SegmentedControlProps = SegmentedControlPrimitiveProps & FormComponentProps;\n\nconst DecoratableSegmentedControl = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SegmentedControlProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className=\"mb-xs-plus\"\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className=\"mt-none mb-xs-plus\"\n            />\n            <SegmentedControlPrimitive {...props} disabled={disabled} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst BaseSegmentedControl = makeDecoratable(\"SegmentedControl\", DecoratableSegmentedControl);\n\nconst SegmentedControl = withStaticProps(BaseSegmentedControl, {\n    Tabs: SegmentedControlTabs\n});\n\nexport { SegmentedControl, type SegmentedControlProps };\n"],"names":["DecoratableSegmentedControl","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","FormComponentLabel","FormComponentDescription","FormComponentErrorMessage","SegmentedControlPrimitive","FormComponentNote","BaseSegmentedControl","makeDecoratable","SegmentedControl","withStaticProps","SegmentedControlTabs"],"mappings":";;;;;AAeA,MAAMA,8BAA8B,CAAC,EACjCC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACiB;IACpB,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,WAAU;qBACX,oBAACI,oBAAkBA;QACf,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;sBAEb,oBAACG,0BAAwBA;QACrB,MAAMZ;QACN,UAAUI;QACV,WAAU;sBAEd,oBAACS,2BAAyBA;QACtB,MAAML;QACN,SAASC;QACT,UAAUL;QACV,WAAU;sBAEd,oBAACU,2BAAyBA;QAAE,GAAGR,KAAK;QAAE,UAAUF;sBAChD,oBAACW,mBAAiBA;QAAC,MAAMd;QAAM,UAAUG;;AAGrD;AAEA,MAAMY,uBAAuBC,gBAAgB,oBAAoBnB;AAEjE,MAAMoB,mBAAmBC,gBAAgBH,sBAAsB;IAC3D,MAAMI;AACV"}

package/SegmentedControl/SegmentedControl.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { SegmentedControl } from "./SegmentedControl.js";
 declare const meta: Meta<typeof SegmentedControl>;
 export default meta;
@@ -8,4 +8,8 @@ export declare const VariantLight: Story;
 export declare const VariantDimmed: Story;
 export declare const VariantGhost: Story;
 export declare const WithFormComponent: Story;
+export declare const FullWidth: Story;
 export declare const Disabled: Story;
+export declare const TabsDefault: Story;
+export declare const TabsDimmed: Story;
+export declare const TabsProgrammaticSwitch: Story;

package/SegmentedControl/SegmentedControl.stories.js

@@ -1,7 +1,11 @@
 import react, { useState } from "react";
+import { ReactComponent } from "@webiny/icons/notifications.svg";
+import { ReactComponent as person_svg_ReactComponent } from "@webiny/icons/person.svg";
+import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
 import { SegmentedControl } from "./SegmentedControl.js";
 import { Icon } from "../Icon/index.js";
-import { ReactComponent } from "@webiny/icons/notifications.svg";
+import { Button } from "../Button/index.js";
+import { useSegmentedTabs } from "./SegmentedControlTabsContext.js";
 const meta = {
     title: "Components/Form/SegmentedControl",
     component: SegmentedControl
@@ -136,6 +140,19 @@ const WithFormComponent = {
         }));
     }
 };
+const FullWidth = {
+    render: ()=>{
+        const [value, setValue] = useState("item1");
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-[500px]"
+        }, /*#__PURE__*/ react.createElement(SegmentedControl, {
+            items: items,
+            value: value,
+            onChange: setValue,
+            fullWidth: true
+        }));
+    }
+};
 const Disabled = {
     render: ()=>{
         const [value, setValue] = useState("item1");
@@ -176,7 +193,88 @@ const Disabled = {
         })));
     }
 };
+const TabsDefault = {
+    render: ()=>/*#__PURE__*/ react.createElement(SegmentedControl.Tabs, null, /*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+            value: "account",
+            trigger: "Account",
+            icon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null),
+                label: "Account"
+            }),
+            content: /*#__PURE__*/ react.createElement("div", {
+                className: "p-md"
+            }, "Account content")
+        }), /*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+            value: "security",
+            trigger: "Security",
+            icon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Security"
+            }),
+            content: /*#__PURE__*/ react.createElement("div", {
+                className: "p-md"
+            }, "Security content")
+        }), /*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+            value: "preferences",
+            trigger: "Preferences",
+            icon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+                label: "Preferences"
+            }),
+            content: /*#__PURE__*/ react.createElement("div", {
+                className: "p-md"
+            }, "Preferences content")
+        }))
+};
+const TabsDimmed = {
+    render: ()=>/*#__PURE__*/ react.createElement(SegmentedControl.Tabs, {
+            variant: "dimmed"
+        }, /*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+            value: "account",
+            trigger: "Account",
+            content: /*#__PURE__*/ react.createElement("div", {
+                className: "p-md"
+            }, "Account content")
+        }), /*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+            value: "security",
+            trigger: "Security",
+            content: /*#__PURE__*/ react.createElement("div", {
+                className: "p-md"
+            }, "Security content")
+        }), /*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+            value: "preferences",
+            trigger: "Preferences",
+            content: /*#__PURE__*/ react.createElement("div", {
+                className: "p-md"
+            }, "Preferences content")
+        }))
+};
+const SwitchFromContent = ()=>{
+    const { setActiveTab } = useSegmentedTabs();
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "p-md flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("p", null, "Account content"), /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Go to Security",
+        onClick: ()=>setActiveTab("security")
+    }));
+};
+const TabsProgrammaticSwitch = {
+    render: ()=>/*#__PURE__*/ react.createElement(SegmentedControl.Tabs, {
+            variant: "dimmed"
+        }, /*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+            value: "account",
+            trigger: "Account",
+            content: /*#__PURE__*/ react.createElement(SwitchFromContent, null)
+        }), /*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+            value: "security",
+            trigger: "Security",
+            content: /*#__PURE__*/ react.createElement("div", {
+                className: "p-md"
+            }, "Security content")
+        }))
+};
 export default SegmentedControl_stories;
-export { Default, Disabled, VariantDimmed, VariantGhost, VariantLight, WithFormComponent };
+export { Default, Disabled, FullWidth, TabsDefault, TabsDimmed, TabsProgrammaticSwitch, VariantDimmed, VariantGhost, VariantLight, WithFormComponent };
 
 //# sourceMappingURL=SegmentedControl.stories.js.map