@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.e9333b3f0b

package/SegmentedControl/SegmentedControl.stories.js

@@ -1,164 +1,280 @@
-import React, { useState } from "react";
+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 as LockIcon } from "@webiny/icons/notifications.svg";
+import { Button } from "../Button/index.js";
+import { useSegmentedTabs } from "./SegmentedControlTabsContext.js";
 const meta = {
-  title: "Components/Form/SegmentedControl",
-  component: SegmentedControl
+    title: "Components/Form/SegmentedControl",
+    component: SegmentedControl
 };
-export default meta;
-const items = [{
-  label: "Item",
-  value: "item1"
-}, {
-  label: "Item",
-  value: "item2"
-}, {
-  label: "Item",
-  value: "item3"
-}, {
-  label: "Item",
-  value: "item4"
-}];
-const itemsWithIcons = [{
-  label: "Item 1",
-  value: "item1",
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, null),
-    label: "Lock"
-  })
-}, {
-  label: "Item 1",
-  value: "item2",
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, null),
-    label: "Lock"
-  })
-}, {
-  label: "Item 1",
-  value: "item3",
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, null),
-    label: "Lock"
-  })
-}, {
-  label: "Item 1",
-  value: "item4",
-  icon: /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, null),
-    label: "Lock"
-  })
-}];
-export const Default = {
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement(SegmentedControl, Object.assign({}, args, {
-      value: value,
-      onChange: value => setValue(value)
-    }));
-  },
-  args: {
-    items: itemsWithIcons
-  }
+const SegmentedControl_stories = meta;
+const items = [
+    {
+        label: "Item",
+        value: "item1"
+    },
+    {
+        label: "Item",
+        value: "item2"
+    },
+    {
+        label: "Item",
+        value: "item3"
+    },
+    {
+        label: "Item",
+        value: "item4"
+    }
+];
+const itemsWithIcons = [
+    {
+        label: "Item 1",
+        value: "item1",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Lock"
+        })
+    },
+    {
+        label: "Item 1",
+        value: "item2",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Lock"
+        })
+    },
+    {
+        label: "Item 1",
+        value: "item3",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Lock"
+        })
+    },
+    {
+        label: "Item 1",
+        value: "item4",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Lock"
+        })
+    }
+];
+const Default = {
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement(SegmentedControl, {
+            ...args,
+            value: value,
+            onChange: (value)=>setValue(value)
+        });
+    },
+    args: {
+        items: itemsWithIcons
+    }
 };
-export const VariantLight = {
-  render: () => {
-    const [value, setValue] = useState("item1");
-    return /*#__PURE__*/React.createElement(SegmentedControl, {
-      items: items,
-      value: value,
-      onChange: setValue,
-      variant: "light"
-    });
-  }
+const VariantLight = {
+    render: ()=>{
+        const [value, setValue] = useState("item1");
+        return /*#__PURE__*/ react.createElement(SegmentedControl, {
+            items: items,
+            value: value,
+            onChange: setValue,
+            variant: "light"
+        });
+    }
 };
-export const VariantDimmed = {
-  render: () => {
-    const [value, setValue] = useState("item1");
-    return /*#__PURE__*/React.createElement(SegmentedControl, {
-      items: items,
-      value: value,
-      onChange: setValue,
-      variant: "dimmed"
-    });
-  }
+const VariantDimmed = {
+    render: ()=>{
+        const [value, setValue] = useState("item1");
+        return /*#__PURE__*/ react.createElement(SegmentedControl, {
+            items: items,
+            value: value,
+            onChange: setValue,
+            variant: "dimmed"
+        });
+    }
 };
-export const VariantGhost = {
-  render: () => {
-    const [value, setValue] = useState("item1");
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-md rounded-md"
-    }, /*#__PURE__*/React.createElement(SegmentedControl, {
-      items: items,
-      value: value,
-      onChange: setValue,
-      variant: "ghost"
-    }));
-  }
+const VariantGhost = {
+    render: ()=>{
+        const [value, setValue] = useState("item1");
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "p-md rounded-md"
+        }, /*#__PURE__*/ react.createElement(SegmentedControl, {
+            items: items,
+            value: value,
+            onChange: setValue,
+            variant: "ghost"
+        }));
+    }
+};
+const WithFormComponent = {
+    render: ()=>{
+        const [value, setValue] = useState("item1");
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "space-y-lg"
+        }, /*#__PURE__*/ react.createElement(SegmentedControl, {
+            label: "Select an option",
+            description: "Choose one of the available options",
+            items: items,
+            value: value,
+            onChange: setValue
+        }), /*#__PURE__*/ react.createElement(SegmentedControl, {
+            label: "With error",
+            items: items,
+            value: value,
+            onChange: setValue,
+            validation: {
+                isValid: false,
+                message: "This field is required"
+            }
+        }), /*#__PURE__*/ react.createElement(SegmentedControl, {
+            label: "Disabled",
+            items: items,
+            value: value,
+            onChange: setValue,
+            disabled: true
+        }));
+    }
 };
-export const WithFormComponent = {
-  render: () => {
-    const [value, setValue] = useState("item1");
-    return /*#__PURE__*/React.createElement("div", {
-      className: "space-y-lg"
-    }, /*#__PURE__*/React.createElement(SegmentedControl, {
-      label: "Select an option",
-      description: "Choose one of the available options",
-      items: items,
-      value: value,
-      onChange: setValue
-    }), /*#__PURE__*/React.createElement(SegmentedControl, {
-      label: "With error",
-      items: items,
-      value: value,
-      onChange: setValue,
-      validation: {
-        isValid: false,
-        message: "This field is required"
-      }
-    }), /*#__PURE__*/React.createElement(SegmentedControl, {
-      label: "Disabled",
-      items: items,
-      value: value,
-      onChange: setValue,
-      disabled: true
+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");
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "space-y-md"
+        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("h3", {
+            className: "text-lg font-semibold mb-sm"
+        }, "Fully Disabled"), /*#__PURE__*/ react.createElement(SegmentedControl, {
+            items: items,
+            value: value,
+            onChange: setValue,
+            disabled: true
+        })), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("h3", {
+            className: "text-lg font-semibold mb-sm"
+        }, "Partially Disabled"), /*#__PURE__*/ react.createElement(SegmentedControl, {
+            items: [
+                {
+                    label: "Item",
+                    value: "item1"
+                },
+                {
+                    label: "Item (disabled)",
+                    value: "item2",
+                    disabled: true
+                },
+                {
+                    label: "Item",
+                    value: "item3"
+                },
+                {
+                    label: "Item (disabled)",
+                    value: "item4",
+                    disabled: true
+                }
+            ],
+            value: value,
+            onChange: setValue
+        })));
+    }
+};
+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")
     }));
-  }
 };
-export const Disabled = {
-  render: () => {
-    const [value, setValue] = useState("item1");
-    return /*#__PURE__*/React.createElement("div", {
-      className: "space-y-md"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
-      className: "text-lg font-semibold mb-sm"
-    }, "Fully Disabled"), /*#__PURE__*/React.createElement(SegmentedControl, {
-      items: items,
-      value: value,
-      onChange: setValue,
-      disabled: true
-    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
-      className: "text-lg font-semibold mb-sm"
-    }, "Partially Disabled"), /*#__PURE__*/React.createElement(SegmentedControl, {
-      items: [{
-        label: "Item",
-        value: "item1"
-      }, {
-        label: "Item (disabled)",
-        value: "item2",
-        disabled: true
-      }, {
-        label: "Item",
-        value: "item3"
-      }, {
-        label: "Item (disabled)",
-        value: "item4",
-        disabled: true
-      }],
-      value: value,
-      onChange: setValue
-    })));
-  }
+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, FullWidth, TabsDefault, TabsDimmed, TabsProgrammaticSwitch, VariantDimmed, VariantGhost, VariantLight, WithFormComponent };
 
 //# sourceMappingURL=SegmentedControl.stories.js.map

package/SegmentedControl/SegmentedControl.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","SegmentedControl","Icon","ReactComponent","LockIcon","meta","title","component","items","label","value","itemsWithIcons","icon","createElement","Default","render","args","setValue","Object","assign","onChange","VariantLight","variant","VariantDimmed","VariantGhost","className","WithFormComponent","description","validation","isValid","message","disabled","Disabled"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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/SegmentedControl.test.js

@@ -1,34 +1,13 @@
-/**
- * This is a simple smoke test to verify the SegmentedControl component can be imported
- * and used without errors.
- */
-
-import { describe, it, expect } from "vitest";
-import React from "react";
+import { describe, expect, it } from "vitest";
+import "react";
 import { SegmentedControl } from "./SegmentedControl.js";
-describe("SegmentedControl", () => {
-  it("should export the component", () => {
-    expect(SegmentedControl).toBeDefined();
-  });
-  it("should accept required props", () => {
-    const items = [{
-      label: "Item 1",
-      value: "item1"
-    }, {
-      label: "Item 2",
-      value: "item2"
-    }];
-    const props = {
-      items,
-      value: "item1",
-      onChange: () => {}
-    };
-
-    // This should not throw
-    expect(() => {
-      /*#__PURE__*/React.createElement(SegmentedControl, props);
-    }).not.toThrow();
-  });
+describe("SegmentedControl", ()=>{
+    it("should export the component", ()=>{
+        expect(SegmentedControl).toBeDefined();
+    });
+    it("should accept required props", ()=>{
+        expect(()=>{}).not.toThrow();
+    });
 });
 
 //# sourceMappingURL=SegmentedControl.test.js.map

package/SegmentedControl/SegmentedControl.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["describe","it","expect","React","SegmentedControl","toBeDefined","items","label","value","props","onChange","createElement","not","toThrow"],"sources":["SegmentedControl.test.tsx"],"sourcesContent":["/**\n * This is a simple smoke test to verify the SegmentedControl component can be imported\n * and used without errors.\n */\n\nimport { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { SegmentedControl } from \"./SegmentedControl.js\";\n\ndescribe(\"SegmentedControl\", () => {\n    it(\"should export the component\", () => {\n        expect(SegmentedControl).toBeDefined();\n    });\n\n    it(\"should accept required props\", () => {\n        const items = [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2\", value: \"item2\" }\n        ];\n\n        const props = {\n            items,\n            value: \"item1\",\n            onChange: () => {}\n        };\n\n        // This should not throw\n        expect(() => {\n            React.createElement(SegmentedControl, props);\n        }).not.toThrow();\n    });\n});\n"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,QAAQ,QAAQ;AAC7C,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AAEzBJ,QAAQ,CAAC,kBAAkB,EAAE,MAAM;EAC/BC,EAAE,CAAC,6BAA6B,EAAE,MAAM;IACpCC,MAAM,CAACE,gBAAgB,CAAC,CAACC,WAAW,CAAC,CAAC;EAC1C,CAAC,CAAC;EAEFJ,EAAE,CAAC,8BAA8B,EAAE,MAAM;IACrC,MAAMK,KAAK,GAAG,CACV;MAAEC,KAAK,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAQ,CAAC,EACnC;MAAED,KAAK,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAQ,CAAC,CACtC;IAED,MAAMC,KAAK,GAAG;MACVH,KAAK;MACLE,KAAK,EAAE,OAAO;MACdE,QAAQ,EAAEA,CAAA,KAAM,CAAC;IACrB,CAAC;;IAED;IACAR,MAAM,CAAC,MAAM;MACT,aAAAC,KAAK,CAACQ,aAAa,CAACP,gBAAgB,EAAEK,KAAK,CAAC;IAChD,CAAC,CAAC,CAACG,GAAG,CAACC,OAAO,CAAC,CAAC;EACpB,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"SegmentedControl/SegmentedControl.test.js","sources":["../../src/SegmentedControl/SegmentedControl.test.tsx"],"sourcesContent":["/**\n * This is a simple smoke test to verify the SegmentedControl component can be imported\n * and used without errors.\n */\n\nimport { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { SegmentedControl } from \"./SegmentedControl.js\";\n\ndescribe(\"SegmentedControl\", () => {\n    it(\"should export the component\", () => {\n        expect(SegmentedControl).toBeDefined();\n    });\n\n    it(\"should accept required props\", () => {\n        const items = [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2\", value: \"item2\" }\n        ];\n\n        const props = {\n            items,\n            value: \"item1\",\n            onChange: () => {}\n        };\n\n        // This should not throw\n        expect(() => {\n            React.createElement(SegmentedControl, props);\n        }).not.toThrow();\n    });\n});\n"],"names":["describe","it","expect","SegmentedControl"],"mappings":";;;AASAA,SAAS,oBAAoB;IACzBC,GAAG,+BAA+B;QAC9BC,OAAOC,kBAAkB,WAAW;IACxC;IAEAF,GAAG,gCAAgC;QAa/BC,OAAO,KAEP,GAAG,GAAG,CAAC,OAAO;IAClB;AACJ"}

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,14 @@
+import React from "react";
+import type { SegmentedControlPrimitiveProps } from "./primitives/index.js";
+import { SegmentedControlTab } from "./SegmentedControlTab.js";
+export interface SegmentedControlTabsProps {
+    children: React.ReactNode;
+    variant?: SegmentedControlPrimitiveProps["variant"];
+    defaultValue?: string;
+    className?: string;
+}
+declare const BaseSegmentedControlTabs: ({ children, variant, defaultValue, className }: SegmentedControlTabsProps) => React.JSX.Element;
+export declare const SegmentedControlTabs: typeof BaseSegmentedControlTabs & {
+    Tab: typeof SegmentedControlTab;
+};
+export {};