@webiny/admin-ui 6.4.0-beta.3 → 6.4.0-beta.4

package/RadioGroup/RadioGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup/RadioGroup.stories.js","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RadioGroup } from \"./RadioGroup.js\";\n\nconst meta: Meta<typeof RadioGroup> = {\n    title: \"Components/Form/RadioGroup\",\n    component: RadioGroup,\n    argTypes: {\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 <RadioGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RadioGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: 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        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one option!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <RadioGroup\n                {...args}\n                value={value}\n                validation={validation}\n                onChange={newValue => setValue(newValue)}\n                onBlur={handleValidation}\n            />\n        );\n    },\n    args: {\n        label: \"Deployment Option\",\n        description: \"Choose your preferred deployment method\",\n        note: \"This setting will determine how your application is deployed\",\n        required: true,\n        disabled: false,\n        items: [\n            {\n                label: \"Automatic Deployment\",\n                value: \"automatic\"\n            },\n            {\n                label: \"Manual Deployment\",\n                value: \"manual\"\n            },\n            {\n                label: \"Scheduled Deployment\",\n                value: \"scheduled\"\n            }\n        ]\n    }\n};\n"],"names":["meta","RadioGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","handleValidation","newValue"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUA,CAAAA,QAASC,SAASD;;IAC3E;AACJ;AAEA,2BAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;SACH;IACL;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aACI;QACJ,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QACnC,MAAM,CAACU,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAE1E,MAAMY,mBAAmB;YACjBf,KAAK,QAAQ,IAAI,CAACC,QAClBa,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAEA,OAAO,WAAP,GACI,oBAACf,YAAUA;YACN,GAAGC,IAAI;YACR,OAAOC;YACP,YAAYY;YACZ,UAAUG,CAAAA,WAAYd,SAASc;YAC/B,QAAQD;;IAGpB;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}
+{"version":3,"file":"RadioGroup/RadioGroup.stories.js","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioGroup } from \"./RadioGroup.js\";\n\nconst meta: Meta<typeof RadioGroup> = {\n    title: \"Components/Form/RadioGroup\",\n    component: RadioGroup,\n    argTypes: {\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 <RadioGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RadioGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: 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        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one option!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <RadioGroup\n                {...args}\n                value={value}\n                validation={validation}\n                onChange={newValue => setValue(newValue)}\n                onBlur={handleValidation}\n            />\n        );\n    },\n    args: {\n        label: \"Deployment Option\",\n        description: \"Choose your preferred deployment method\",\n        note: \"This setting will determine how your application is deployed\",\n        required: true,\n        disabled: false,\n        items: [\n            {\n                label: \"Automatic Deployment\",\n                value: \"automatic\"\n            },\n            {\n                label: \"Manual Deployment\",\n                value: \"manual\"\n            },\n            {\n                label: \"Scheduled Deployment\",\n                value: \"scheduled\"\n            }\n        ]\n    }\n};\n"],"names":["meta","RadioGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","handleValidation","newValue"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUA,CAAAA,QAASC,SAASD;;IAC3E;AACJ;AAEA,2BAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;SACH;IACL;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aACI;QACJ,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QACnC,MAAM,CAACU,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAE1E,MAAMY,mBAAmB;YACjBf,KAAK,QAAQ,IAAI,CAACC,QAClBa,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAEA,OAAO,WAAP,GACI,oBAACf,YAAUA;YACN,GAAGC,IAAI;YACR,OAAOC;YACP,YAAYY;YACZ,UAAUG,CAAAA,WAAYd,SAASc;YAC/B,QAAQD;;IAGpB;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}

package/RadioGroup/primitives/RadioGroupPrimitive.stories.d.ts

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

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.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":"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"}
+{"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.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

@@ -20,5 +20,9 @@ declare const SegmentedControl: (({ label, description, note, hint, required, di
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Tabs: (({ children, variant, defaultValue, className }: import("./SegmentedControlTabs.js").SegmentedControlTabsProps) => React.JSX.Element) & {
+        Tab: (props: import("./SegmentedControlTab.js").SegmentedControlTabProps) => null;
+    };
 };
 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

package/SegmentedControl/SegmentedControl.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl/SegmentedControl.stories.js","sources":["../../src/SegmentedControl/SegmentedControl.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SegmentedControl } from \"./SegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControl> = {\n    title: \"Components/Form/SegmentedControl\",\n    component: SegmentedControl\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SegmentedControl>;\n\nconst items = [\n    { label: \"Item\", value: \"item1\" },\n    { label: \"Item\", value: \"item2\" },\n    { label: \"Item\", value: \"item3\" },\n    { label: \"Item\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <SegmentedControl {...args} value={value} onChange={value => setValue(value)} />;\n    },\n    args: {\n        items: itemsWithIcons\n    }\n};\n\nexport const VariantLight: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return <SegmentedControl items={items} value={value} onChange={setValue} variant=\"light\" />;\n    }\n};\n\nexport const VariantDimmed: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <SegmentedControl items={items} value={value} onChange={setValue} variant=\"dimmed\" />\n        );\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"p-md rounded-md\">\n                <SegmentedControl items={items} value={value} onChange={setValue} variant=\"ghost\" />\n            </div>\n        );\n    }\n};\n\nexport const WithFormComponent: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"space-y-lg\">\n                <SegmentedControl\n                    label=\"Select an option\"\n                    description=\"Choose one of the available options\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                />\n                <SegmentedControl\n                    label=\"With error\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                    validation={{\n                        isValid: false,\n                        message: \"This field is required\"\n                    }}\n                />\n                <SegmentedControl\n                    label=\"Disabled\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                    disabled\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"space-y-md\">\n                <div>\n                    <h3 className=\"text-lg font-semibold mb-sm\">Fully Disabled</h3>\n                    <SegmentedControl items={items} value={value} onChange={setValue} disabled />\n                </div>\n                <div>\n                    <h3 className=\"text-lg font-semibold mb-sm\">Partially Disabled</h3>\n                    <SegmentedControl\n                        items={[\n                            { label: \"Item\", value: \"item1\" },\n                            { label: \"Item (disabled)\", value: \"item2\", disabled: true },\n                            { label: \"Item\", value: \"item3\" },\n                            { label: \"Item (disabled)\", value: \"item4\", disabled: true }\n                        ]}\n                        value={value}\n                        onChange={setValue}\n                    />\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","SegmentedControl","items","itemsWithIcons","Icon","LockIcon","Default","args","value","setValue","useState","VariantLight","VariantDimmed","VariantGhost","WithFormComponent","Disabled"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl/SegmentedControl.stories.js","sources":["../../src/SegmentedControl/SegmentedControl.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { SegmentedControl } from \"./SegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { useSegmentedTabs } from \"./SegmentedControlTabsContext.js\";\n\nconst meta: Meta<typeof SegmentedControl> = {\n    title: \"Components/Form/SegmentedControl\",\n    component: SegmentedControl\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SegmentedControl>;\n\nconst items = [\n    { label: \"Item\", value: \"item1\" },\n    { label: \"Item\", value: \"item2\" },\n    { label: \"Item\", value: \"item3\" },\n    { label: \"Item\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <SegmentedControl {...args} value={value} onChange={value => setValue(value)} />;\n    },\n    args: {\n        items: itemsWithIcons\n    }\n};\n\nexport const VariantLight: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return <SegmentedControl items={items} value={value} onChange={setValue} variant=\"light\" />;\n    }\n};\n\nexport const VariantDimmed: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <SegmentedControl items={items} value={value} onChange={setValue} variant=\"dimmed\" />\n        );\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"p-md rounded-md\">\n                <SegmentedControl items={items} value={value} onChange={setValue} variant=\"ghost\" />\n            </div>\n        );\n    }\n};\n\nexport const WithFormComponent: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"space-y-lg\">\n                <SegmentedControl\n                    label=\"Select an option\"\n                    description=\"Choose one of the available options\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                />\n                <SegmentedControl\n                    label=\"With error\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                    validation={{\n                        isValid: false,\n                        message: \"This field is required\"\n                    }}\n                />\n                <SegmentedControl\n                    label=\"Disabled\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                    disabled\n                />\n            </div>\n        );\n    }\n};\n\nexport const FullWidth: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"w-[500px]\">\n                <SegmentedControl items={items} value={value} onChange={setValue} fullWidth />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"space-y-md\">\n                <div>\n                    <h3 className=\"text-lg font-semibold mb-sm\">Fully Disabled</h3>\n                    <SegmentedControl items={items} value={value} onChange={setValue} disabled />\n                </div>\n                <div>\n                    <h3 className=\"text-lg font-semibold mb-sm\">Partially Disabled</h3>\n                    <SegmentedControl\n                        items={[\n                            { label: \"Item\", value: \"item1\" },\n                            { label: \"Item (disabled)\", value: \"item2\", disabled: true },\n                            { label: \"Item\", value: \"item3\" },\n                            { label: \"Item (disabled)\", value: \"item4\", disabled: true }\n                        ]}\n                        value={value}\n                        onChange={setValue}\n                    />\n                </div>\n            </div>\n        );\n    }\n};\n\n// SegmentedControl.Tabs stories\n\nexport const TabsDefault: Story = {\n    render: () => (\n        <SegmentedControl.Tabs>\n            <SegmentedControl.Tabs.Tab\n                value={\"account\"}\n                trigger={\"Account\"}\n                icon={<Icon icon={<PersonIcon />} label={\"Account\"} />}\n                content={<div className={\"p-md\"}>{\"Account content\"}</div>}\n            />\n            <SegmentedControl.Tabs.Tab\n                value={\"security\"}\n                trigger={\"Security\"}\n                icon={<Icon icon={<LockIcon />} label={\"Security\"} />}\n                content={<div className={\"p-md\"}>{\"Security content\"}</div>}\n            />\n            <SegmentedControl.Tabs.Tab\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                icon={<Icon icon={<SettingsIcon />} label={\"Preferences\"} />}\n                content={<div className={\"p-md\"}>{\"Preferences content\"}</div>}\n            />\n        </SegmentedControl.Tabs>\n    )\n};\n\nexport const TabsDimmed: Story = {\n    render: () => (\n        <SegmentedControl.Tabs variant={\"dimmed\"}>\n            <SegmentedControl.Tabs.Tab\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={<div className={\"p-md\"}>{\"Account content\"}</div>}\n            />\n            <SegmentedControl.Tabs.Tab\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={<div className={\"p-md\"}>{\"Security content\"}</div>}\n            />\n            <SegmentedControl.Tabs.Tab\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={<div className={\"p-md\"}>{\"Preferences content\"}</div>}\n            />\n        </SegmentedControl.Tabs>\n    )\n};\n\nconst SwitchFromContent = () => {\n    const { setActiveTab } = useSegmentedTabs();\n    return (\n        <div className={\"p-md flex flex-col gap-sm\"}>\n            <p>{\"Account content\"}</p>\n            <Button\n                variant={\"secondary\"}\n                text={\"Go to Security\"}\n                onClick={() => setActiveTab(\"security\")}\n            />\n        </div>\n    );\n};\n\nexport const TabsProgrammaticSwitch: Story = {\n    render: () => (\n        <SegmentedControl.Tabs variant={\"dimmed\"}>\n            <SegmentedControl.Tabs.Tab\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={<SwitchFromContent />}\n            />\n            <SegmentedControl.Tabs.Tab\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={<div className={\"p-md\"}>{\"Security content\"}</div>}\n            />\n        </SegmentedControl.Tabs>\n    )\n};\n"],"names":["meta","SegmentedControl","items","itemsWithIcons","Icon","LockIcon","Default","args","value","setValue","useState","VariantLight","VariantDimmed","VariantGhost","WithFormComponent","FullWidth","Disabled","TabsDefault","PersonIcon","SettingsIcon","TabsDimmed","SwitchFromContent","setActiveTab","useSegmentedTabs","Button","TabsProgrammaticSwitch"],"mappings":"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"}

package/SegmentedControl/SegmentedControlTab.d.ts

@@ -0,0 +1,10 @@
+import type React from "react";
+export interface SegmentedControlTabProps {
+    value: string;
+    trigger: React.ReactNode;
+    icon?: React.ReactElement;
+    content: React.ReactNode;
+    disabled?: boolean;
+    visible?: boolean;
+}
+export declare const SegmentedControlTab: (props: SegmentedControlTabProps) => null;

package/SegmentedControl/SegmentedControlTab.js

@@ -0,0 +1,21 @@
+import { useContext, useEffect, useRef } from "react";
+import { generateId } from "../utils.js";
+import { SegmentedControlTabsContext } from "./SegmentedControlTabsContext.js";
+const SegmentedControlTab = (props)=>{
+    const { addTab, removeTab } = useContext(SegmentedControlTabsContext);
+    const idRef = useRef(generateId());
+    useEffect(()=>{
+        addTab({
+            ...props,
+            id: idRef.current,
+            visible: props.visible ?? true
+        });
+    }, [
+        props
+    ]);
+    useEffect(()=>()=>removeTab(idRef.current), []);
+    return null;
+};
+export { SegmentedControlTab };
+
+//# sourceMappingURL=SegmentedControlTab.js.map

package/SegmentedControl/SegmentedControlTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl/SegmentedControlTab.js","sources":["../../src/SegmentedControl/SegmentedControlTab.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useContext, useEffect, useRef } from \"react\";\nimport { generateId } from \"~/utils.js\";\nimport { SegmentedControlTabsContext } from \"./SegmentedControlTabsContext.js\";\n\nexport interface SegmentedControlTabProps {\n    value: string;\n    trigger: React.ReactNode;\n    icon?: React.ReactElement;\n    content: React.ReactNode;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\nexport const SegmentedControlTab = (props: SegmentedControlTabProps) => {\n    const { addTab, removeTab } = useContext(SegmentedControlTabsContext);\n    const idRef = useRef(generateId());\n\n    useEffect(() => {\n        addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => removeTab(idRef.current);\n    }, []);\n\n    return null;\n};\n"],"names":["SegmentedControlTab","props","addTab","removeTab","useContext","SegmentedControlTabsContext","idRef","useRef","generateId","useEffect"],"mappings":";;;AAcO,MAAMA,sBAAsB,CAACC;IAChC,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACzC,MAAMC,QAAQC,OAAOC;IAErBC,UAAU;QACNP,OAAO;YAAE,GAAGD,KAAK;YAAE,IAAIK,MAAM,OAAO;YAAE,SAASL,MAAM,OAAO,IAAI;QAAK;IACzE,GAAG;QAACA;KAAM;IAEVQ,UAAU,IACC,IAAMN,UAAUG,MAAM,OAAO,GACrC,EAAE;IAEL,OAAO;AACX"}

package/SegmentedControl/SegmentedControlTabs.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { SegmentedControlPrimitiveProps } from "./primitives/index.js";
+export interface SegmentedControlTabsProps {
+    children: React.ReactNode;
+    variant?: SegmentedControlPrimitiveProps["variant"];
+    defaultValue?: string;
+    className?: string;
+}
+export declare const SegmentedControlTabs: (({ children, variant, defaultValue, className }: SegmentedControlTabsProps) => React.JSX.Element) & {
+    Tab: (props: import("./SegmentedControlTab.js").SegmentedControlTabProps) => null;
+};

package/SegmentedControl/SegmentedControlTabs.js

@@ -0,0 +1,71 @@
+import react, { useEffect, useMemo, useState } from "react";
+import { Tabs } from "radix-ui";
+import { cn, withStaticProps } from "../utils.js";
+import { SegmentedControlPrimitive } from "./primitives/index.js";
+import { SegmentedControlTabsContext } from "./SegmentedControlTabsContext.js";
+import { SegmentedControlTab } from "./SegmentedControlTab.js";
+const BaseSegmentedControlTabs = ({ children, variant, defaultValue, className })=>{
+    const [tabs, setTabs] = useState([]);
+    const [activeTab, setActiveTab] = useState(defaultValue ?? "");
+    useEffect(()=>{
+        if (!activeTab && tabs.length > 0) setActiveTab(tabs[0].value);
+    }, [
+        tabs
+    ]);
+    const items = useMemo(()=>tabs.filter((tab)=>false !== tab.visible).map((tab)=>({
+                value: tab.value,
+                label: tab.trigger,
+                icon: tab.icon,
+                disabled: tab.disabled
+            })), [
+        tabs
+    ]);
+    const context = useMemo(()=>({
+            activeTab,
+            setActiveTab,
+            addTab (tab) {
+                setTabs((prev)=>{
+                    const idx = prev.findIndex((t)=>t.value === tab.value);
+                    if (idx > -1) return [
+                        ...prev.slice(0, idx),
+                        tab,
+                        ...prev.slice(idx + 1)
+                    ];
+                    return [
+                        ...prev,
+                        tab
+                    ];
+                });
+            },
+            removeTab (id) {
+                setTabs((prev)=>prev.filter((t)=>t.id !== id));
+            }
+        }), [
+        activeTab,
+        setActiveTab
+    ]);
+    return /*#__PURE__*/ react.createElement(SegmentedControlTabsContext.Provider, {
+        value: context
+    }, /*#__PURE__*/ react.createElement(Tabs.Root, {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        className: className
+    }, /*#__PURE__*/ react.createElement(SegmentedControlPrimitive, {
+        items: items,
+        value: activeTab,
+        onChange: setActiveTab,
+        variant: variant,
+        fullWidth: true
+    }), tabs.map((tab)=>/*#__PURE__*/ react.createElement(Tabs.Content, {
+            key: tab.id,
+            value: tab.value,
+            forceMount: true,
+            className: cn("focus-visible:outline-none", "data-[state=inactive]:hidden")
+        }, tab.content)), children));
+};
+const SegmentedControlTabs = withStaticProps(BaseSegmentedControlTabs, {
+    Tab: SegmentedControlTab
+});
+export { SegmentedControlTabs };
+
+//# sourceMappingURL=SegmentedControlTabs.js.map