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

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":";;;;;;;;AAUA,MAAMA,OAAsC;IACxC,OAAO;IACP,WAAWC;AACf;AAEA,iCAAeD;AAGf,MAAME,QAAQ;IACV;QAAE,OAAO;QAAQ,OAAO;IAAQ;IAChC;QAAE,OAAO;QAAQ,OAAO;IAAQ;IAChC;QAAE,OAAO;QAAQ,OAAO;IAAQ;IAChC;QAAE,OAAO;QAAQ,OAAO;IAAQ;CACnC;AAED,MAAMC,iBAAiB;IACnB;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;CACtF;AAEM,MAAMC,UAAiB;IAC1B,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACN,kBAAgBA;YAAE,GAAGM,IAAI;YAAE,OAAOC;YAAO,UAAUA,CAAAA,QAASC,SAASD;;IACjF;IACA,MAAM;QACF,OAAOL;IACX;AACJ;AAEO,MAAMQ,eAAsB;IAC/B,QAAQ;QACJ,MAAM,CAACH,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GAAO,oBAACT,kBAAgBA;YAAC,OAAOC;YAAO,OAAOM;YAAO,UAAUC;YAAU,SAAQ;;IACrF;AACJ;AAEO,MAAMG,gBAAuB;IAChC,QAAQ;QACJ,MAAM,CAACJ,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GACI,oBAACT,kBAAgBA;YAAC,OAAOC;YAAO,OAAOM;YAAO,UAAUC;YAAU,SAAQ;;IAElF;AACJ;AAEO,MAAMI,eAAsB;IAC/B,QAAQ;QACJ,MAAM,CAACL,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACT,kBAAgBA;YAAC,OAAOC;YAAO,OAAOM;YAAO,UAAUC;YAAU,SAAQ;;IAGtF;AACJ;AAEO,MAAMK,oBAA2B;IACpC,QAAQ;QACJ,MAAM,CAACN,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACT,kBAAgBA;YACb,OAAM;YACN,aAAY;YACZ,OAAOC;YACP,OAAOM;YACP,UAAUC;0BAEd,oBAACR,kBAAgBA;YACb,OAAM;YACN,OAAOC;YACP,OAAOM;YACP,UAAUC;YACV,YAAY;gBACR,SAAS;gBACT,SAAS;YACb;0BAEJ,oBAACR,kBAAgBA;YACb,OAAM;YACN,OAAOC;YACP,OAAOM;YACP,UAAUC;YACV;;IAIhB;AACJ;AAEO,MAAMM,YAAmB;IAC5B,QAAQ;QACJ,MAAM,CAACP,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACT,kBAAgBA;YAAC,OAAOC;YAAO,OAAOM;YAAO,UAAUC;YAAU;;IAG9E;AACJ;AAEO,MAAMO,WAAkB;IAC3B,QAAQ;QACJ,MAAM,CAACR,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAAC,2BACG,oBAAC;YAAG,WAAU;WAA8B,iCAC5C,oBAACT,kBAAgBA;YAAC,OAAOC;YAAO,OAAOM;YAAO,UAAUC;YAAU;2BAEtE,oBAAC,2BACG,oBAAC;YAAG,WAAU;WAA8B,qCAC5C,oBAACR,kBAAgBA;YACb,OAAO;gBACH;oBAAE,OAAO;oBAAQ,OAAO;gBAAQ;gBAChC;oBAAE,OAAO;oBAAmB,OAAO;oBAAS,UAAU;gBAAK;gBAC3D;oBAAE,OAAO;oBAAQ,OAAO;gBAAQ;gBAChC;oBAAE,OAAO;oBAAmB,OAAO;oBAAS,UAAU;gBAAK;aAC9D;YACD,OAAOO;YACP,UAAUC;;IAK9B;AACJ;AAIO,MAAMQ,cAAqB;IAC9B,QAAQ,kBACJ,oBAAChB,iBAAiB,IAAI,sBAClB,oBAACA,iBAAiB,IAAI,CAAC,GAAG;YACtB,OAAO;YACP,SAAS;YACT,oBAAM,oBAACG,MAAIA;gBAAC,oBAAM,oBAACc,2BAAUA;gBAAK,OAAO;;YACzC,uBAAS,oBAAC;gBAAI,WAAW;eAAS;0BAEtC,oBAACjB,iBAAiB,IAAI,CAAC,GAAG;YACtB,OAAO;YACP,SAAS;YACT,oBAAM,oBAACG,MAAIA;gBAAC,oBAAM,oBAACC,gBAAQA;gBAAK,OAAO;;YACvC,uBAAS,oBAAC;gBAAI,WAAW;eAAS;0BAEtC,oBAACJ,iBAAiB,IAAI,CAAC,GAAG;YACtB,OAAO;YACP,SAAS;YACT,oBAAM,oBAACG,MAAIA;gBAAC,oBAAM,oBAACe,6BAAYA;gBAAK,OAAO;;YAC3C,uBAAS,oBAAC;gBAAI,WAAW;eAAS;;AAIlD;AAEO,MAAMC,aAAoB;IAC7B,QAAQ,kBACJ,oBAACnB,iBAAiB,IAAI;YAAC,SAAS;yBAC5B,oBAACA,iBAAiB,IAAI,CAAC,GAAG;YACtB,OAAO;YACP,SAAS;YACT,uBAAS,oBAAC;gBAAI,WAAW;eAAS;0BAEtC,oBAACA,iBAAiB,IAAI,CAAC,GAAG;YACtB,OAAO;YACP,SAAS;YACT,uBAAS,oBAAC;gBAAI,WAAW;eAAS;0BAEtC,oBAACA,iBAAiB,IAAI,CAAC,GAAG;YACtB,OAAO;YACP,SAAS;YACT,uBAAS,oBAAC;gBAAI,WAAW;eAAS;;AAIlD;AAEA,MAAMoB,oBAAoB;IACtB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC,WAAG,kCACJ,oBAACC,QAAMA;QACH,SAAS;QACT,MAAM;QACN,SAAS,IAAMF,aAAa;;AAI5C;AAEO,MAAMG,yBAAgC;IACzC,QAAQ,kBACJ,oBAACxB,iBAAiB,IAAI;YAAC,SAAS;yBAC5B,oBAACA,iBAAiB,IAAI,CAAC,GAAG;YACtB,OAAO;YACP,SAAS;YACT,uBAAS,oBAACoB,mBAAiBA;0BAE/B,oBAACpB,iBAAiB,IAAI,CAAC,GAAG;YACtB,OAAO;YACP,SAAS;YACT,uBAAS,oBAAC;gBAAI,WAAW;eAAS;;AAIlD"}

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

package/SegmentedControl/SegmentedControlTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl/SegmentedControlTabs.js","sources":["../../src/SegmentedControl/SegmentedControlTabs.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { Tabs } from \"radix-ui\";\nimport { cn, withStaticProps } from \"~/utils.js\";\nimport { SegmentedControlPrimitive } from \"./primitives/index.js\";\nimport type { SegmentedControlPrimitiveProps } from \"./primitives/index.js\";\nimport {\n    SegmentedControlTabsContext,\n    type SegmentedTabItem\n} from \"./SegmentedControlTabsContext.js\";\nimport { SegmentedControlTab } from \"./SegmentedControlTab.js\";\n\nexport interface SegmentedControlTabsProps {\n    children: React.ReactNode;\n    variant?: SegmentedControlPrimitiveProps[\"variant\"];\n    defaultValue?: string;\n    className?: string;\n}\n\nconst BaseSegmentedControlTabs = ({\n    children,\n    variant,\n    defaultValue,\n    className\n}: SegmentedControlTabsProps) => {\n    const [tabs, setTabs] = useState<SegmentedTabItem[]>([]);\n    const [activeTab, setActiveTab] = useState(defaultValue ?? \"\");\n\n    useEffect(() => {\n        if (!activeTab && tabs.length > 0) {\n            setActiveTab(tabs[0].value);\n        }\n    }, [tabs]);\n\n    const items = useMemo(\n        () =>\n            tabs\n                .filter(tab => tab.visible !== false)\n                .map(tab => ({\n                    value: tab.value,\n                    label: tab.trigger,\n                    icon: tab.icon,\n                    disabled: tab.disabled\n                })),\n        [tabs]\n    );\n\n    const context = useMemo(\n        () => ({\n            activeTab,\n            setActiveTab,\n            addTab(tab: SegmentedTabItem) {\n                setTabs(prev => {\n                    const idx = prev.findIndex(t => t.value === tab.value);\n                    if (idx > -1) {\n                        return [...prev.slice(0, idx), tab, ...prev.slice(idx + 1)];\n                    }\n                    return [...prev, tab];\n                });\n            },\n            removeTab(id: string) {\n                setTabs(prev => prev.filter(t => t.id !== id));\n            }\n        }),\n        [activeTab, setActiveTab]\n    );\n\n    return (\n        <SegmentedControlTabsContext.Provider value={context}>\n            <Tabs.Root value={activeTab} onValueChange={setActiveTab} className={className}>\n                <SegmentedControlPrimitive\n                    items={items}\n                    value={activeTab}\n                    onChange={setActiveTab}\n                    variant={variant}\n                    fullWidth\n                />\n                {tabs.map(tab => (\n                    <Tabs.Content\n                        key={tab.id}\n                        value={tab.value}\n                        forceMount\n                        className={cn(\"focus-visible:outline-none\", \"data-[state=inactive]:hidden\")}\n                    >\n                        {tab.content}\n                    </Tabs.Content>\n                ))}\n                {children}\n            </Tabs.Root>\n        </SegmentedControlTabsContext.Provider>\n    );\n};\n\nexport const SegmentedControlTabs = withStaticProps(BaseSegmentedControlTabs, {\n    Tab: SegmentedControlTab\n});\n"],"names":["BaseSegmentedControlTabs","children","variant","defaultValue","className","tabs","setTabs","useState","activeTab","setActiveTab","useEffect","items","useMemo","tab","context","prev","idx","t","id","SegmentedControlTabsContext","Tabs","SegmentedControlPrimitive","cn","SegmentedControlTabs","withStaticProps","SegmentedControlTab"],"mappings":";;;;;;AAkBA,MAAMA,2BAA2B,CAAC,EAC9BC,QAAQ,EACRC,OAAO,EACPC,YAAY,EACZC,SAAS,EACe;IACxB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAA6B,EAAE;IACvD,MAAM,CAACC,WAAWC,aAAa,GAAGF,SAASJ,gBAAgB;IAE3DO,UAAU;QACN,IAAI,CAACF,aAAaH,KAAK,MAAM,GAAG,GAC5BI,aAAaJ,IAAI,CAAC,EAAE,CAAC,KAAK;IAElC,GAAG;QAACA;KAAK;IAET,MAAMM,QAAQC,QACV,IACIP,KACK,MAAM,CAACQ,CAAAA,MAAOA,AAAgB,UAAhBA,IAAI,OAAO,EACzB,GAAG,CAACA,CAAAA,MAAQ;gBACT,OAAOA,IAAI,KAAK;gBAChB,OAAOA,IAAI,OAAO;gBAClB,MAAMA,IAAI,IAAI;gBACd,UAAUA,IAAI,QAAQ;YAC1B,KACR;QAACR;KAAK;IAGV,MAAMS,UAAUF,QACZ,IAAO;YACHJ;YACAC;YACA,QAAOI,GAAqB;gBACxBP,QAAQS,CAAAA;oBACJ,MAAMC,MAAMD,KAAK,SAAS,CAACE,CAAAA,IAAKA,EAAE,KAAK,KAAKJ,IAAI,KAAK;oBACrD,IAAIG,MAAM,IACN,OAAO;2BAAID,KAAK,KAAK,CAAC,GAAGC;wBAAMH;2BAAQE,KAAK,KAAK,CAACC,MAAM;qBAAG;oBAE/D,OAAO;2BAAID;wBAAMF;qBAAI;gBACzB;YACJ;YACA,WAAUK,EAAU;gBAChBZ,QAAQS,CAAAA,OAAQA,KAAK,MAAM,CAACE,CAAAA,IAAKA,EAAE,EAAE,KAAKC;YAC9C;QACJ,IACA;QAACV;QAAWC;KAAa;IAG7B,OAAO,WAAP,GACI,oBAACU,4BAA4B,QAAQ;QAAC,OAAOL;qBACzC,oBAACM,KAAK,IAAI;QAAC,OAAOZ;QAAW,eAAeC;QAAc,WAAWL;qBACjE,oBAACiB,2BAAyBA;QACtB,OAAOV;QACP,OAAOH;QACP,UAAUC;QACV,SAASP;QACT;QAEHG,KAAK,GAAG,CAACQ,CAAAA,MAAAA,WAAAA,GACN,oBAACO,KAAK,OAAO;YACT,KAAKP,IAAI,EAAE;YACX,OAAOA,IAAI,KAAK;YAChB;YACA,WAAWS,GAAG,8BAA8B;WAE3CT,IAAI,OAAO,IAGnBZ;AAIjB;AAEO,MAAMsB,uBAAuBC,gBAAgBxB,0BAA0B;IAC1E,KAAKyB;AACT"}

package/SegmentedControl/SegmentedControlTabsContext.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+export interface SegmentedTabItem {
+    id: string;
+    value: string;
+    trigger: React.ReactNode;
+    icon?: React.ReactElement;
+    content: React.ReactNode;
+    disabled?: boolean;
+    visible?: boolean;
+}
+interface SegmentedControlTabsContextValue {
+    addTab: (tab: SegmentedTabItem) => void;
+    removeTab: (id: string) => void;
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+}
+export declare const SegmentedControlTabsContext: React.Context<SegmentedControlTabsContextValue>;
+export declare const useSegmentedTabs: () => SegmentedControlTabsContextValue;
+export {};

package/SegmentedControl/SegmentedControlTabsContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+const SegmentedControlTabsContext = createContext({
+    addTab: ()=>void 0,
+    removeTab: ()=>void 0,
+    activeTab: "",
+    setActiveTab: ()=>void 0
+});
+const useSegmentedTabs = ()=>useContext(SegmentedControlTabsContext);
+export { SegmentedControlTabsContext, useSegmentedTabs };
+
+//# sourceMappingURL=SegmentedControlTabsContext.js.map

package/SegmentedControl/SegmentedControlTabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl/SegmentedControlTabsContext.js","sources":["../../src/SegmentedControl/SegmentedControlTabsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type React from \"react\";\n\nexport interface SegmentedTabItem {\n    id: string;\n    value: string;\n    trigger: React.ReactNode;\n    icon?: React.ReactElement;\n    content: React.ReactNode;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\ninterface SegmentedControlTabsContextValue {\n    addTab: (tab: SegmentedTabItem) => void;\n    removeTab: (id: string) => void;\n    activeTab: string;\n    setActiveTab: (tab: string) => void;\n}\n\nexport const SegmentedControlTabsContext = createContext<SegmentedControlTabsContextValue>({\n    addTab: () => undefined,\n    removeTab: () => undefined,\n    activeTab: \"\",\n    setActiveTab: () => undefined\n});\n\nexport const useSegmentedTabs = () => useContext(SegmentedControlTabsContext);\n"],"names":["SegmentedControlTabsContext","createContext","undefined","useSegmentedTabs","useContext"],"mappings":";AAoBO,MAAMA,8BAA8BC,cAAgD;IACvF,QAAQ,IAAMC;IACd,WAAW,IAAMA;IACjB,WAAW;IACX,cAAc,IAAMA;AACxB;AAEO,MAAMC,mBAAmB,IAAMC,WAAWJ"}

package/SegmentedControl/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./SegmentedControl.js";
+export * from "./SegmentedControlTabs.js";
+export { useSegmentedTabs } from "./SegmentedControlTabsContext.js";
 export * from "./primitives/index.js";
 export * from "./domains/index.js";

package/SegmentedControl/index.js

@@ -1,3 +1,5 @@
 export * from "./SegmentedControl.js";
+export * from "./SegmentedControlTabs.js";
 export * from "./primitives/index.js";
 export * from "./domains/index.js";
+export { useSegmentedTabs } from "./SegmentedControlTabsContext.js";

package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts

@@ -32,6 +32,10 @@ interface SegmentedControlPrimitiveProps {
      * Disabled state for all items.
      */
     disabled?: boolean;
+    /**
+     * Stretch the control to fill its container width, with buttons sharing space equally.
+     */
+    fullWidth?: boolean;
 }
 interface SegmentedControlVm {
     items: SegmentedControlItemFormatted[];
@@ -40,7 +44,7 @@ interface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {
     items: SegmentedControlItemFormatted[];
     changeValue: (value: string) => void;
 }
-declare const SegmentedControlRenderer: ({ items, changeValue, value, variant, className, disabled }: SegmentedControlRendererProps) => React.JSX.Element;
+declare const SegmentedControlRenderer: ({ items, changeValue, value, variant, className, disabled, fullWidth }: SegmentedControlRendererProps) => React.JSX.Element;
 /**
  * Segmented Control Primitive Component
  */

package/SegmentedControl/primitives/SegmentedControlPrimitive.js

@@ -65,11 +65,11 @@ const SegmentedControlItemButton = ({ item, isActive, onValueChange, variant, cl
         label: String(item.label),
         color: "neutral-strong"
     }), item.label);
-const SegmentedControlRenderer = ({ items, changeValue, value, variant = "light", className, disabled })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+const SegmentedControlRenderer = ({ items, changeValue, value, variant = "light", className, disabled, fullWidth })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
         role: "radiogroup",
         className: cn(segmentedControlRootVariants({
             variant
-        }), className)
+        }), fullWidth && "flex w-full", className)
     }, items.map((item)=>/*#__PURE__*/ __rspack_external_react.createElement(SegmentedControlItemButton, {
             key: item.id,
             item: {
@@ -78,7 +78,8 @@ const SegmentedControlRenderer = ({ items, changeValue, value, variant = "light"
             },
             isActive: value === item.value,
             onValueChange: changeValue,
-            variant: variant
+            variant: variant,
+            className: fullWidth ? "flex-1" : void 0
         })));
 const SegmentedControlPrimitive = (props)=>{
     const { vm, changeValue } = useSegmentedControl(props);

package/SegmentedControl/primitives/SegmentedControlPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type {\n    SegmentedControlItemParams,\n    SegmentedControlItemFormatted\n} from \"../domains/index.js\";\nimport { useSegmentedControl } from \"./useSegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\n/**\n * Segmented Control Item Button\n */\nconst segmentedControlItemVariants = cva(\n    [\n        \"inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md\",\n        \"text-md px-sm-extra py-xs [&>svg]:size-md gap-xs\",\n        \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0\",\n        \"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                light: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                dimmed: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                ghost: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:bg-neutral-dark/5\",\n                    \"hover:data-[state=inactive]:bg-neutral-dark/5\",\n                    \"active:data-[state=inactive]:bg-neutral-dark/5\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"light\"\n        }\n    }\n);\n\nconst segmentedControlRootVariants = cva(\"inline-flex rounded-md p-xxs gap-xs\", {\n    variants: {\n        variant: {\n            light: \"bg-neutral-light\",\n            dimmed: \"bg-neutral-dimmed\",\n            ghost: \"\"\n        }\n    },\n    defaultVariants: {\n        variant: \"light\"\n    }\n});\n\ninterface SegmentedControlItemProps extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    \"value\"\n> {\n    item: SegmentedControlItemFormatted;\n    isActive: boolean;\n    onValueChange: (value: string) => void;\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n}\n\nconst SegmentedControlItemButton = ({\n    item,\n    isActive,\n    onValueChange,\n    variant,\n    className,\n    ...props\n}: SegmentedControlItemProps) => {\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-state={isActive ? \"active\" : \"inactive\"}\n            disabled={item.disabled}\n            onClick={() => onValueChange(item.value)}\n            className={cn(segmentedControlItemVariants({ variant }), className)}\n            {...props}\n        >\n            {item.icon && (\n                <Icon\n                    icon={item.icon}\n                    size={\"sm\"}\n                    label={String(item.label)}\n                    color={\"neutral-strong\"}\n                />\n            )}\n            {item.label}\n        </button>\n    );\n};\n\n/**\n * Segmented Control Primitive\n */\ninterface SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * The selected value.\n     */\n    value?: string;\n    /**\n     * Visual style variant.\n     */\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n    /**\n     * Additional class name.\n     */\n    className?: string;\n    /**\n     * Disabled state for all items.\n     */\n    disabled?: boolean;\n}\n\ninterface SegmentedControlVm {\n    items: SegmentedControlItemFormatted[];\n}\n\ninterface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst SegmentedControlRenderer = ({\n    items,\n    changeValue,\n    value,\n    variant = \"light\",\n    className,\n    disabled\n}: SegmentedControlRendererProps) => {\n    return (\n        <div role=\"radiogroup\" className={cn(segmentedControlRootVariants({ variant }), className)}>\n            {items.map(item => (\n                <SegmentedControlItemButton\n                    key={item.id}\n                    item={{ ...item, disabled: disabled || item.disabled }}\n                    isActive={value === item.value}\n                    onValueChange={changeValue}\n                    variant={variant}\n                />\n            ))}\n        </div>\n    );\n};\n\n/**\n * Segmented Control Primitive Component\n */\nconst SegmentedControlPrimitive = (props: SegmentedControlPrimitiveProps) => {\n    const { vm, changeValue } = useSegmentedControl(props);\n    return <SegmentedControlRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nexport {\n    SegmentedControlPrimitive,\n    SegmentedControlRenderer,\n    type SegmentedControlPrimitiveProps,\n    type SegmentedControlVm\n};\n"],"names":["segmentedControlItemVariants","cva","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","variant","className","props","cn","Icon","String","SegmentedControlRenderer","items","changeValue","value","disabled","SegmentedControlPrimitive","vm","useSegmentedControl"],"mappings":";;;;AAYA,MAAMA,+BAA+BC,IACjC;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,OAAO;gBACH;gBACA;gBACA;gBACA;gBACA;aACH;YACD,QAAQ;gBACJ;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAGJ,MAAMC,+BAA+BD,IAAI,uCAAuC;IAC5E,UAAU;QACN,SAAS;YACL,OAAO;YACP,QAAQ;YACR,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAYA,MAAME,6BAA6B,CAAC,EAChCC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACPC,SAAS,EACT,GAAGC,OACqB,GACjB,WAAP,GACI,sCAAC;QACG,MAAK;QACL,MAAK;QACL,gBAAcJ;QACd,cAAYA,WAAW,WAAW;QAClC,UAAUD,KAAK,QAAQ;QACvB,SAAS,IAAME,cAAcF,KAAK,KAAK;QACvC,WAAWM,GAAGV,6BAA6B;YAAEO;QAAQ,IAAIC;QACxD,GAAGC,KAAK;OAERL,KAAK,IAAI,IAAI,WAAJ,GACN,sCAACO,MAAIA;QACD,MAAMP,KAAK,IAAI;QACf,MAAM;QACN,OAAOQ,OAAOR,KAAK,KAAK;QACxB,OAAO;QAGdA,KAAK,KAAK;AAyCvB,MAAMS,2BAA2B,CAAC,EAC9BC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLT,UAAU,OAAO,EACjBC,SAAS,EACTS,QAAQ,EACoB,GACrB,WAAP,GACI,sCAAC;QAAI,MAAK;QAAa,WAAWP,GAAGR,6BAA6B;YAAEK;QAAQ,IAAIC;OAC3EM,MAAM,GAAG,CAACV,CAAAA,OAAAA,WAAAA,GACP,sCAACD,4BAA0BA;YACvB,KAAKC,KAAK,EAAE;YACZ,MAAM;gBAAE,GAAGA,IAAI;gBAAE,UAAUa,YAAYb,KAAK,QAAQ;YAAC;YACrD,UAAUY,UAAUZ,KAAK,KAAK;YAC9B,eAAeW;YACf,SAASR;;AAU7B,MAAMW,4BAA4B,CAACT;IAC/B,MAAM,EAAEU,EAAE,EAAEJ,WAAW,EAAE,GAAGK,oBAAoBX;IAChD,OAAO,WAAP,GAAO,sCAACI,0BAAwBA;QAAE,GAAGJ,KAAK;QAAE,OAAOU,GAAG,KAAK;QAAE,aAAaJ;;AAC9E"}
+{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type {\n    SegmentedControlItemParams,\n    SegmentedControlItemFormatted\n} from \"../domains/index.js\";\nimport { useSegmentedControl } from \"./useSegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\n/**\n * Segmented Control Item Button\n */\nconst segmentedControlItemVariants = cva(\n    [\n        \"inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md\",\n        \"text-md px-sm-extra py-xs [&>svg]:size-md gap-xs\",\n        \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0\",\n        \"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                light: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                dimmed: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                ghost: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:bg-neutral-dark/5\",\n                    \"hover:data-[state=inactive]:bg-neutral-dark/5\",\n                    \"active:data-[state=inactive]:bg-neutral-dark/5\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"light\"\n        }\n    }\n);\n\nconst segmentedControlRootVariants = cva(\"inline-flex rounded-md p-xxs gap-xs\", {\n    variants: {\n        variant: {\n            light: \"bg-neutral-light\",\n            dimmed: \"bg-neutral-dimmed\",\n            ghost: \"\"\n        }\n    },\n    defaultVariants: {\n        variant: \"light\"\n    }\n});\n\ninterface SegmentedControlItemProps extends Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    \"value\"\n> {\n    item: SegmentedControlItemFormatted;\n    isActive: boolean;\n    onValueChange: (value: string) => void;\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n}\n\nconst SegmentedControlItemButton = ({\n    item,\n    isActive,\n    onValueChange,\n    variant,\n    className,\n    ...props\n}: SegmentedControlItemProps) => {\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-state={isActive ? \"active\" : \"inactive\"}\n            disabled={item.disabled}\n            onClick={() => onValueChange(item.value)}\n            className={cn(segmentedControlItemVariants({ variant }), className)}\n            {...props}\n        >\n            {item.icon && (\n                <Icon\n                    icon={item.icon}\n                    size={\"sm\"}\n                    label={String(item.label)}\n                    color={\"neutral-strong\"}\n                />\n            )}\n            {item.label}\n        </button>\n    );\n};\n\n/**\n * Segmented Control Primitive\n */\ninterface SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * The selected value.\n     */\n    value?: string;\n    /**\n     * Visual style variant.\n     */\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n    /**\n     * Additional class name.\n     */\n    className?: string;\n    /**\n     * Disabled state for all items.\n     */\n    disabled?: boolean;\n    /**\n     * Stretch the control to fill its container width, with buttons sharing space equally.\n     */\n    fullWidth?: boolean;\n}\n\ninterface SegmentedControlVm {\n    items: SegmentedControlItemFormatted[];\n}\n\ninterface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst SegmentedControlRenderer = ({\n    items,\n    changeValue,\n    value,\n    variant = \"light\",\n    className,\n    disabled,\n    fullWidth\n}: SegmentedControlRendererProps) => {\n    return (\n        <div\n            role=\"radiogroup\"\n            className={cn(\n                segmentedControlRootVariants({ variant }),\n                fullWidth && \"flex w-full\",\n                className\n            )}\n        >\n            {items.map(item => (\n                <SegmentedControlItemButton\n                    key={item.id}\n                    item={{ ...item, disabled: disabled || item.disabled }}\n                    isActive={value === item.value}\n                    onValueChange={changeValue}\n                    variant={variant}\n                    className={fullWidth ? \"flex-1\" : undefined}\n                />\n            ))}\n        </div>\n    );\n};\n\n/**\n * Segmented Control Primitive Component\n */\nconst SegmentedControlPrimitive = (props: SegmentedControlPrimitiveProps) => {\n    const { vm, changeValue } = useSegmentedControl(props);\n    return <SegmentedControlRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nexport {\n    SegmentedControlPrimitive,\n    SegmentedControlRenderer,\n    type SegmentedControlPrimitiveProps,\n    type SegmentedControlVm\n};\n"],"names":["segmentedControlItemVariants","cva","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","variant","className","props","cn","Icon","String","SegmentedControlRenderer","items","changeValue","value","disabled","fullWidth","undefined","SegmentedControlPrimitive","vm","useSegmentedControl"],"mappings":";;;;AAYA,MAAMA,+BAA+BC,IACjC;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,OAAO;gBACH;gBACA;gBACA;gBACA;gBACA;aACH;YACD,QAAQ;gBACJ;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAGJ,MAAMC,+BAA+BD,IAAI,uCAAuC;IAC5E,UAAU;QACN,SAAS;YACL,OAAO;YACP,QAAQ;YACR,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAYA,MAAME,6BAA6B,CAAC,EAChCC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,OAAO,EACPC,SAAS,EACT,GAAGC,OACqB,GACjB,WAAP,GACI,sCAAC;QACG,MAAK;QACL,MAAK;QACL,gBAAcJ;QACd,cAAYA,WAAW,WAAW;QAClC,UAAUD,KAAK,QAAQ;QACvB,SAAS,IAAME,cAAcF,KAAK,KAAK;QACvC,WAAWM,GAAGV,6BAA6B;YAAEO;QAAQ,IAAIC;QACxD,GAAGC,KAAK;OAERL,KAAK,IAAI,IAAI,WAAJ,GACN,sCAACO,MAAIA;QACD,MAAMP,KAAK,IAAI;QACf,MAAM;QACN,OAAOQ,OAAOR,KAAK,KAAK;QACxB,OAAO;QAGdA,KAAK,KAAK;AA6CvB,MAAMS,2BAA2B,CAAC,EAC9BC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLT,UAAU,OAAO,EACjBC,SAAS,EACTS,QAAQ,EACRC,SAAS,EACmB,GACrB,WAAP,GACI,sCAAC;QACG,MAAK;QACL,WAAWR,GACPR,6BAA6B;YAAEK;QAAQ,IACvCW,aAAa,eACbV;OAGHM,MAAM,GAAG,CAACV,CAAAA,OAAAA,WAAAA,GACP,sCAACD,4BAA0BA;YACvB,KAAKC,KAAK,EAAE;YACZ,MAAM;gBAAE,GAAGA,IAAI;gBAAE,UAAUa,YAAYb,KAAK,QAAQ;YAAC;YACrD,UAAUY,UAAUZ,KAAK,KAAK;YAC9B,eAAeW;YACf,SAASR;YACT,WAAWW,YAAY,WAAWC;;AAUtD,MAAMC,4BAA4B,CAACX;IAC/B,MAAM,EAAEY,EAAE,EAAEN,WAAW,EAAE,GAAGO,oBAAoBb;IAChD,OAAO,WAAP,GAAO,sCAACI,0BAAwBA;QAAE,GAAGJ,KAAK;QAAE,OAAOY,GAAG,KAAK;QAAE,aAAaN;;AAC9E"}

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { SegmentedControlPrimitive } from "./SegmentedControlPrimitive.js";
 declare const meta: Meta<typeof SegmentedControlPrimitive>;
 export default meta;
@@ -11,3 +11,4 @@ export declare const VariantDimmed: Story;
 export declare const VariantGhost: Story;
 export declare const Disabled: Story;
 export declare const PartiallyDisabled: Story;
+export declare const FullWidth: Story;

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js

@@ -151,7 +151,14 @@ const PartiallyDisabled = {
         value: "item1"
     }
 };
+const FullWidth = {
+    args: {
+        items: items,
+        value: "item1",
+        fullWidth: true
+    }
+};
 export default SegmentedControlPrimitive_stories;
-export { Default, Disabled, PartiallyDisabled, VariantDimmed, VariantGhost, VariantLight, WithDefaultOption, WithIcons };
+export { Default, Disabled, FullWidth, PartiallyDisabled, VariantDimmed, VariantGhost, VariantLight, WithDefaultOption, WithIcons };
 
 //# sourceMappingURL=SegmentedControlPrimitive.stories.js.map

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.stories.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SegmentedControlPrimitive } from \"./SegmentedControlPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControlPrimitive> = {\n    title: \"Components/Form Primitives/SegmentedControl\",\n    component: SegmentedControlPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SegmentedControlPrimitive\n                    {...args}\n                    value={value}\n                    onChange={value => setValue(value)}\n                />\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 SegmentedControlPrimitive>;\n\nconst items = [\n    { label: \"Item 1\", value: \"item1\" },\n    { label: \"Item 2\", value: \"item2\" },\n    { label: \"Item 3\", value: \"item3\" },\n    { label: \"Item 4\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 2\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 3\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 4\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    args: {\n        items\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        items,\n        value: \"item2\"\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        items: itemsWithIcons,\n        value: \"item1\"\n    }\n};\n\nexport const VariantLight: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"light\"\n    }\n};\n\nexport const VariantDimmed: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"dimmed\"\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"item1\");\n        return (\n            <div className=\"p-md rounded-md bg-neutral-light\">\n                <SegmentedControlPrimitive\n                    {...args}\n                    items={items}\n                    value={value}\n                    onChange={value => setValue(value)}\n                    variant=\"ghost\"\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        items,\n        value: \"item2\",\n        disabled: true\n    }\n};\n\nexport const PartiallyDisabled: Story = {\n    args: {\n        items: [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2 (disabled)\", value: \"item2\", disabled: true },\n            { label: \"Item 3\", value: \"item3\" },\n            { label: \"Item 4 (disabled)\", value: \"item4\", disabled: true }\n        ],\n        value: \"item1\"\n    }\n};\n"],"names":["meta","SegmentedControlPrimitive","args","value","setValue","useState","items","itemsWithIcons","Icon","LockIcon","Default","WithDefaultOption","WithIcons","VariantLight","VariantDimmed","VariantGhost","Disabled","PartiallyDisabled"],"mappings":";;;;AAMA,MAAMA,OAA+C;IACjD,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,2BAAyBA;YACrB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASC,SAASD;0BAEhC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA;IAI9C;AACJ;AAEA,0CAAeH;AAIf,MAAMM,QAAQ;IACV;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;CACrC;AAED,MAAMC,iBAAiB;IACnB;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;CACtF;AAEM,MAAMC,UAAiB;IAC1B,MAAM;QACFJ,OAAAA;IACJ;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACFL,OAAAA;QACA,OAAO;IACX;AACJ;AAEO,MAAMM,YAAmB;IAC5B,MAAM;QACF,OAAOL;QACP,OAAO;IACX;AACJ;AAEO,MAAMM,eAAsB;IAC/B,MAAM;QACFP,OAAAA;QACA,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,MAAM;QACFR,OAAAA;QACA,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMS,eAAsB;IAC/B,QAAQb,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACD,2BAAyBA;YACrB,GAAGC,IAAI;YACR,OAAOI;YACP,OAAOH;YACP,UAAUA,CAAAA,QAASC,SAASD;YAC5B,SAAQ;;IAIxB;AACJ;AAEO,MAAMa,WAAkB;IAC3B,MAAM;QACFV,OAAAA;QACA,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBAAE,OAAO;gBAAU,OAAO;YAAQ;YAClC;gBAAE,OAAO;gBAAqB,OAAO;gBAAS,UAAU;YAAK;YAC7D;gBAAE,OAAO;gBAAU,OAAO;YAAQ;YAClC;gBAAE,OAAO;gBAAqB,OAAO;gBAAS,UAAU;YAAK;SAChE;QACD,OAAO;IACX;AACJ"}
+{"version":3,"file":"SegmentedControl/primitives/SegmentedControlPrimitive.stories.js","sources":["../../../src/SegmentedControl/primitives/SegmentedControlPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { SegmentedControlPrimitive } from \"./SegmentedControlPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControlPrimitive> = {\n    title: \"Components/Form Primitives/SegmentedControl\",\n    component: SegmentedControlPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SegmentedControlPrimitive\n                    {...args}\n                    value={value}\n                    onChange={value => setValue(value)}\n                />\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 SegmentedControlPrimitive>;\n\nconst items = [\n    { label: \"Item 1\", value: \"item1\" },\n    { label: \"Item 2\", value: \"item2\" },\n    { label: \"Item 3\", value: \"item3\" },\n    { label: \"Item 4\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 2\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 3\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 4\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    args: {\n        items\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        items,\n        value: \"item2\"\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        items: itemsWithIcons,\n        value: \"item1\"\n    }\n};\n\nexport const VariantLight: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"light\"\n    }\n};\n\nexport const VariantDimmed: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"dimmed\"\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"item1\");\n        return (\n            <div className=\"p-md rounded-md bg-neutral-light\">\n                <SegmentedControlPrimitive\n                    {...args}\n                    items={items}\n                    value={value}\n                    onChange={value => setValue(value)}\n                    variant=\"ghost\"\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        items,\n        value: \"item2\",\n        disabled: true\n    }\n};\n\nexport const PartiallyDisabled: Story = {\n    args: {\n        items: [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2 (disabled)\", value: \"item2\", disabled: true },\n            { label: \"Item 3\", value: \"item3\" },\n            { label: \"Item 4 (disabled)\", value: \"item4\", disabled: true }\n        ],\n        value: \"item1\"\n    }\n};\n\nexport const FullWidth: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        fullWidth: true\n    }\n};\n"],"names":["meta","SegmentedControlPrimitive","args","value","setValue","useState","items","itemsWithIcons","Icon","LockIcon","Default","WithDefaultOption","WithIcons","VariantLight","VariantDimmed","VariantGhost","Disabled","PartiallyDisabled","FullWidth"],"mappings":";;;;AAMA,MAAMA,OAA+C;IACjD,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,2BAAyBA;YACrB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,QAASC,SAASD;0BAEhC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA;IAI9C;AACJ;AAEA,0CAAeH;AAIf,MAAMM,QAAQ;IACV;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;IAClC;QAAE,OAAO;QAAU,OAAO;IAAQ;CACrC;AAED,MAAMC,iBAAiB;IACnB;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;IACnF;QAAE,OAAO;QAAU,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;IAAU;CACtF;AAEM,MAAMC,UAAiB;IAC1B,MAAM;QACFJ,OAAAA;IACJ;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACFL,OAAAA;QACA,OAAO;IACX;AACJ;AAEO,MAAMM,YAAmB;IAC5B,MAAM;QACF,OAAOL;QACP,OAAO;IACX;AACJ;AAEO,MAAMM,eAAsB;IAC/B,MAAM;QACFP,OAAAA;QACA,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,MAAM;QACFR,OAAAA;QACA,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMS,eAAsB;IAC/B,QAAQb,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,OAAO,WAAP,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACD,2BAAyBA;YACrB,GAAGC,IAAI;YACR,OAAOI;YACP,OAAOH;YACP,UAAUA,CAAAA,QAASC,SAASD;YAC5B,SAAQ;;IAIxB;AACJ;AAEO,MAAMa,WAAkB;IAC3B,MAAM;QACFV,OAAAA;QACA,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBAAE,OAAO;gBAAU,OAAO;YAAQ;YAClC;gBAAE,OAAO;gBAAqB,OAAO;gBAAS,UAAU;YAAK;YAC7D;gBAAE,OAAO;gBAAU,OAAO;YAAQ;YAClC;gBAAE,OAAO;gBAAqB,OAAO;gBAAS,UAAU;YAAK;SAChE;QACD,OAAO;IACX;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACFZ,OAAAA;QACA,OAAO;QACP,WAAW;IACf;AACJ"}

package/Select/Select.stories.d.ts

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

package/Select/Select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select/Select.stories.js","sources":["../../src/Select/Select.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Select } from \"~/Select/index.js\";\n\nconst meta: Meta<typeof Select> = {\n    title: \"Components/Form/Select\",\n    component: Select,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\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 <Select {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Select>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"CAT\", label: \"Central Africa Time (UTC+2)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" },\n            { value: \"CST_CHINA\", label: \"China Standard Time (UTC+8)\" },\n            { value: \"JST\", label: \"Japan Standard Time (UTC+9)\" },\n            { value: \"AWST\", label: \"Australian Western Standard Time (UTC+8)\" },\n            { value: \"NZST\", label: \"New Zealand Standard Time (UTC+12)\" },\n            { value: \"FJT\", label: \"Fiji Time (UTC+12)\" },\n            { value: \"ART\", label: \"Argentina Time (UTC-3)\" },\n            { value: \"BOT\", label: \"Bolivia Time (UTC-4)\" },\n            { value: \"BRT\", label: \"Brasilia Time (UTC-3)\" }\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    }\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 [value, setValue] = useState(\"\");\n\n        return <Select {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Time Zone\",\n        description: \"Select your preferred time zone\",\n        note: \"This setting will affect how times are displayed throughout the application\",\n        required: true,\n        disabled: false,\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" }\n        ]\n    }\n};\n"],"names":["meta","Select","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","newValue"],"mappings":";;AAIA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,cAAc;YAAE,QAAQ;QAAe;QACvC,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,QAAMA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IACrD;AACJ;AAEA,uBAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAAS;YACL;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAiC;YACxD;gBAAE,OAAO;gBAAa,OAAO;YAA8B;YAC3D;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAQ,OAAO;YAA2C;YACnE;gBAAE,OAAO;gBAAQ,OAAO;YAAqC;YAC7D;gBAAE,OAAO;gBAAO,OAAO;YAAqB;YAC5C;gBAAE,OAAO;gBAAO,OAAO;YAAyB;YAChD;gBAAE,OAAO;gBAAO,OAAO;YAAuB;YAC9C;gBAAE,OAAO;gBAAO,OAAO;YAAwB;SAClD;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;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GAAO,oBAACJ,QAAMA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUY,CAAAA,WAAYX,SAASW;;IAC1E;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,SAAS;YACL;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAiC;SAC3D;IACL;AACJ"}
+{"version":3,"file":"Select/Select.stories.js","sources":["../../src/Select/Select.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Select } from \"~/Select/index.js\";\n\nconst meta: Meta<typeof Select> = {\n    title: \"Components/Form/Select\",\n    component: Select,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\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 <Select {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Select>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"CAT\", label: \"Central Africa Time (UTC+2)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" },\n            { value: \"CST_CHINA\", label: \"China Standard Time (UTC+8)\" },\n            { value: \"JST\", label: \"Japan Standard Time (UTC+9)\" },\n            { value: \"AWST\", label: \"Australian Western Standard Time (UTC+8)\" },\n            { value: \"NZST\", label: \"New Zealand Standard Time (UTC+12)\" },\n            { value: \"FJT\", label: \"Fiji Time (UTC+12)\" },\n            { value: \"ART\", label: \"Argentina Time (UTC-3)\" },\n            { value: \"BOT\", label: \"Bolivia Time (UTC-4)\" },\n            { value: \"BRT\", label: \"Brasilia Time (UTC-3)\" }\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    }\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 [value, setValue] = useState(\"\");\n\n        return <Select {...args} value={value} onChange={newValue => setValue(newValue)} />;\n    },\n    args: {\n        label: \"Time Zone\",\n        description: \"Select your preferred time zone\",\n        note: \"This setting will affect how times are displayed throughout the application\",\n        required: true,\n        disabled: false,\n        options: [\n            { value: \"EST\", label: \"Eastern Standard Time (UTC-5)\" },\n            { value: \"CST\", label: \"Central Standard Time (UTC-6)\" },\n            { value: \"PST\", label: \"Pacific Standard Time (UTC-8)\" },\n            { value: \"GMT\", label: \"Greenwich Mean Time (UTC+0)\" },\n            { value: \"CET\", label: \"Central European Time (UTC+1)\" },\n            { value: \"IST\", label: \"India Standard Time (UTC+5:30)\" }\n        ]\n    }\n};\n"],"names":["meta","Select","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","newValue"],"mappings":";;AAIA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,cAAc;YAAE,QAAQ;QAAe;QACvC,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,QAAMA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IACrD;AACJ;AAEA,uBAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAAS;YACL;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAiC;YACxD;gBAAE,OAAO;gBAAa,OAAO;YAA8B;YAC3D;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAQ,OAAO;YAA2C;YACnE;gBAAE,OAAO;gBAAQ,OAAO;YAAqC;YAC7D;gBAAE,OAAO;gBAAO,OAAO;YAAqB;YAC5C;gBAAE,OAAO;gBAAO,OAAO;YAAyB;YAChD;gBAAE,OAAO;gBAAO,OAAO;YAAuB;YAC9C;gBAAE,OAAO;gBAAO,OAAO;YAAwB;SAClD;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;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QAEnC,OAAO,WAAP,GAAO,oBAACJ,QAAMA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUY,CAAAA,WAAYX,SAASW;;IAC1E;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,SAAS;YACL;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAA8B;YACrD;gBAAE,OAAO;gBAAO,OAAO;YAAgC;YACvD;gBAAE,OAAO;gBAAO,OAAO;YAAiC;SAC3D;IACL;AACJ"}

package/Select/primitives/SelectPrimitive.stories.d.ts

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