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

package/Toggle/Toggle.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle/Toggle.stories.js","sources":["../../src/Toggle/Toggle.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Toggle } from \"~/Toggle/index.js\";\n\nconst meta: Meta<typeof Toggle> = {\n    title: \"Components/Form/Toggle\",\n    component: Toggle,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Toggle {...args} checked={checked} onChange={value => setChecked(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Toggle>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        label: \"Toggle\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        label: \"Toggle\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Toggle\n                {...args}\n                checked={checked}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Enable feature\",\n        checked: false,\n        disabled: false,\n        required: true,\n        note: \"Note: This setting can be changed at any time.\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text displayed inside the toggle button\",\n            control: \"text\"\n        },\n        checked: {\n            description: \"Determines if the toggle is active\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the toggle when set to true\",\n            control: \"boolean\"\n        },\n        required: {\n            description: \"Makes the toggle required when set to true\",\n            control: \"boolean\"\n        },\n        variant: {\n            description: \"Visual style: primary (default), outline, ghost, ghost-negative\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of the toggle button\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        note: {\n            description: \"Additional note text below the toggle\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the toggle state changes\"\n        }\n    }\n};\n"],"names":["meta","Toggle","Story","Tooltip","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","IconOnly","IconOnlyChecked","Outline","Ghost","WithNotes","WithErrors","Disabled","Documentation","validation","setValidation","useEffect","handleChange","isChecked","undefined"],"mappings":"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"}
+{"version":3,"file":"Toggle/Toggle.stories.js","sources":["../../src/Toggle/Toggle.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Toggle } from \"~/Toggle/index.js\";\n\nconst meta: Meta<typeof Toggle> = {\n    title: \"Components/Form/Toggle\",\n    component: Toggle,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Toggle {...args} checked={checked} onChange={value => setChecked(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Toggle>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        label: \"Toggle\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        label: \"Toggle\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Toggle\n                {...args}\n                checked={checked}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Enable feature\",\n        checked: false,\n        disabled: false,\n        required: true,\n        note: \"Note: This setting can be changed at any time.\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text displayed inside the toggle button\",\n            control: \"text\"\n        },\n        checked: {\n            description: \"Determines if the toggle is active\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the toggle when set to true\",\n            control: \"boolean\"\n        },\n        required: {\n            description: \"Makes the toggle required when set to true\",\n            control: \"boolean\"\n        },\n        variant: {\n            description: \"Visual style: primary (default), outline, ghost, ghost-negative\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of the toggle button\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        note: {\n            description: \"Additional note text below the toggle\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the toggle state changes\"\n        }\n    }\n};\n"],"names":["meta","Toggle","Story","Tooltip","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","IconOnly","IconOnlyChecked","Outline","Ghost","WithNotes","WithErrors","Disabled","Documentation","validation","setValidation","useEffect","handleChange","isChecked","undefined"],"mappings":"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"}

package/Toggle/primitives/TogglePrimitive.stories.d.ts

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

package/Toggle/primitives/TogglePrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle/primitives/TogglePrimitive.stories.js","sources":["../../../src/Toggle/primitives/TogglePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { TogglePrimitive } from \"./TogglePrimitive.js\";\n\nconst meta: Meta<typeof TogglePrimitive> = {\n    title: \"Components/Form Primitives/Toggle\",\n    component: TogglePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <TogglePrimitive {...args} checked={checked} onChange={value => setChecked(value)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TogglePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const WithIconTrailing: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const OutlineChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\",\n        checked: true\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\",\n        checked: true\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"sm\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"lg\"\n    }\n};\n\nexport const SizeXL: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"xl\"\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const DisabledChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true,\n        disabled: true\n    }\n};\n"],"names":["meta","TogglePrimitive","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","WithIconTrailing","IconOnly","IconOnlyChecked","Outline","OutlineChecked","Ghost","GhostChecked","SizeSmall","SizeLarge","SizeXL","Disabled","DisabledChecked"],"mappings":";;;AAKA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,iBAAeA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUG,CAAAA,QAASF,WAAWE;;IAEnF;AACJ;AAEA,gCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IACnB;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACD,gBAAQA;QACf,SAAS;IACb;AACJ;AAEO,MAAME,mBAA0B;IACnC,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACF,gBAAQA;QACf,cAAc;IAClB;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,MAAM,WAAN,GAAM,oBAACH,gBAAQA;IACnB;AACJ;AAEO,MAAMI,kBAAyB;IAClC,MAAM;QACF,MAAM,WAAN,GAAM,oBAACJ,gBAAQA;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;QACP,SAAS;QACT,SAAS;IACb;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,eAAsB;IAC/B,MAAM;QACF,OAAO;QACP,SAAS;QACT,SAAS;IACb;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;IACd;AACJ"}
+{"version":3,"file":"Toggle/primitives/TogglePrimitive.stories.js","sources":["../../../src/Toggle/primitives/TogglePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { TogglePrimitive } from \"./TogglePrimitive.js\";\n\nconst meta: Meta<typeof TogglePrimitive> = {\n    title: \"Components/Form Primitives/Toggle\",\n    component: TogglePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <TogglePrimitive {...args} checked={checked} onChange={value => setChecked(value)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TogglePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const WithIconTrailing: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const OutlineChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\",\n        checked: true\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\",\n        checked: true\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"sm\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"lg\"\n    }\n};\n\nexport const SizeXL: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"xl\"\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const DisabledChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true,\n        disabled: true\n    }\n};\n"],"names":["meta","TogglePrimitive","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","WithIconTrailing","IconOnly","IconOnlyChecked","Outline","OutlineChecked","Ghost","GhostChecked","SizeSmall","SizeLarge","SizeXL","Disabled","DisabledChecked"],"mappings":";;;AAKA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,iBAAeA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUG,CAAAA,QAASF,WAAWE;;IAEnF;AACJ;AAEA,gCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IACnB;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACD,gBAAQA;QACf,SAAS;IACb;AACJ;AAEO,MAAME,mBAA0B;IACnC,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACF,gBAAQA;QACf,cAAc;IAClB;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,MAAM,WAAN,GAAM,oBAACH,gBAAQA;IACnB;AACJ;AAEO,MAAMI,kBAAyB;IAClC,MAAM;QACF,MAAM,WAAN,GAAM,oBAACJ,gBAAQA;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;QACP,SAAS;QACT,SAAS;IACb;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,eAAsB;IAC/B,MAAM;QACF,OAAO;QACP,SAAS;QACT,SAAS;IACb;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;IACd;AACJ"}

package/ToggleGroup/ToggleGroup.stories.d.ts

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

package/ToggleGroup/ToggleGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/ToggleGroup.stories.js","sources":["../../src/ToggleGroup/ToggleGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { ToggleGroup } from \"~/ToggleGroup/index.js\";\n\nconst textItems = [\n    { value: \"bold\", label: \"Bold\" },\n    { value: \"italic\", label: \"Italic\" },\n    { value: \"underline\", label: \"Underline\" }\n];\n\nconst iconItems = [\n    { value: \"left\", icon: <AlignLeftIcon /> },\n    { value: \"center\", icon: <AlignCenterIcon /> },\n    { value: \"right\", icon: <AlignRightIcon /> }\n];\n\nconst iconTextItems = [\n    { value: \"bold\", label: \"Bold\", icon: <BoldIcon /> },\n    { value: \"italic\", label: \"Italic\", icon: <ItalicIcon /> },\n    { value: \"underline\", label: \"Underline\", icon: <UnderlineIcon /> }\n];\n\nconst meta: Meta<typeof ToggleGroup> = {\n    title: \"Components/Form/ToggleGroup\",\n    component: ToggleGroup,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ToggleGroup>;\n\nexport const Default: Story = {\n    args: { items: textItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const IconOnly: Story = {\n    args: { items: iconItems, label: \"Alignment\", bordered: true }\n};\n\nexport const IconOnlyGhost: Story = {\n    args: { items: iconItems, label: \"Alignment\", variant: \"ghost\", bordered: true }\n};\n\nexport const WithIconAndText: Story = {\n    args: { items: iconTextItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const Outline: Story = {\n    args: { items: textItems, label: \"Text formatting\", variant: \"outline\", bordered: true }\n};\n\nexport const Ghost: Story = {\n    args: { items: textItems, label: \"Text formatting\", variant: \"ghost\", bordered: true }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        items: iconTextItems,\n        label: \"Text formatting\",\n        description: \"Choose one or more formatting options.\",\n        bordered: true\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        items: iconItems,\n        label: \"Alignment\",\n        note: \"Note: Formatting applies to selected text only.\",\n        bordered: true\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        items: textItems,\n        label: \"Text formatting\",\n        bordered: true,\n        validation: { isValid: false, message: \"Please select a formatting option.\" }\n    }\n};\n\nexport const Multiple: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"multiple\"\n                value={value}\n                onChange={v => setValue(v as string[])}\n            />\n        );\n    },\n    args: { items: iconTextItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const Disabled: Story = {\n    args: { items: iconItems, label: \"Alignment\", bordered: true, disabled: true }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    },\n    args: {\n        items: iconItems,\n        label: \"Alignment\",\n        bordered: true,\n        description: \"Choose a text alignment option.\",\n        note: \"Note: Alignment applies to the selected paragraph.\"\n    },\n    argTypes: {\n        label: { description: \"Label above the group\", control: \"text\" },\n        description: { description: \"Description below the label\", control: \"text\" },\n        note: { description: \"Note below the group\", control: \"text\" },\n        bordered: { description: \"Show a border around the group container\", control: \"boolean\" },\n        disabled: { description: \"Disables all items\", control: \"boolean\" },\n        variant: {\n            description: \"Visual style of items\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of items\",\n            control: \"select\",\n            options: [\"sm\", \"md\"]\n        },\n        onChange: { description: \"Called with the new value when selection changes\" }\n    }\n};\n"],"names":["textItems","iconItems","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","iconTextItems","BoldIcon","ItalicIcon","UnderlineIcon","meta","ToggleGroup","Story","Tooltip","args","value","setValue","useState","v","Default","IconOnly","IconOnlyGhost","WithIconAndText","Outline","Ghost","WithDescription","WithNotes","WithErrors","Multiple","Disabled","Documentation"],"mappings":";;;;;;;;;AAWA,MAAMA,YAAY;IACd;QAAE,OAAO;QAAQ,OAAO;IAAO;IAC/B;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAa,OAAO;IAAY;CAC5C;AAED,MAAMC,YAAY;IACd;QAAE,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;IACzC;QAAE,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,wCAAeA;IAAI;IAC7C;QAAE,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,uCAAcA;IAAI;CAC9C;AAED,MAAMC,gBAAgB;IAClB;QAAE,OAAO;QAAQ,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IAAI;IACnD;QAAE,OAAO;QAAU,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,kCAAUA;IAAI;IACzD;QAAE,OAAO;QAAa,OAAO;QAAa,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;CACrE;AAED,MAAMC,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACC,QAAQ,QAAQ,sBACb,oBAACD,OAAAA;KAGZ;IACD,QAAQE,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiB;QAC3C,OAAO,WAAP,GACI,oBAACN,aAAWA;YACP,GAAGG,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;AACJ;AAEA,4BAAeR;AAGR,MAAMS,UAAiB;IAC1B,MAAM;QAAE,OAAOlB;QAAW,OAAO;QAAmB,UAAU;IAAK;AACvE;AAEO,MAAMmB,WAAkB;IAC3B,MAAM;QAAE,OAAOlB;QAAW,OAAO;QAAa,UAAU;IAAK;AACjE;AAEO,MAAMmB,gBAAuB;IAChC,MAAM;QAAE,OAAOnB;QAAW,OAAO;QAAa,SAAS;QAAS,UAAU;IAAK;AACnF;AAEO,MAAMoB,kBAAyB;IAClC,MAAM;QAAE,OAAOhB;QAAe,OAAO;QAAmB,UAAU;IAAK;AAC3E;AAEO,MAAMiB,UAAiB;IAC1B,MAAM;QAAE,OAAOtB;QAAW,OAAO;QAAmB,SAAS;QAAW,UAAU;IAAK;AAC3F;AAEO,MAAMuB,QAAe;IACxB,MAAM;QAAE,OAAOvB;QAAW,OAAO;QAAmB,SAAS;QAAS,UAAU;IAAK;AACzF;AAEO,MAAMwB,kBAAyB;IAClC,MAAM;QACF,OAAOnB;QACP,OAAO;QACP,aAAa;QACb,UAAU;IACd;AACJ;AAEO,MAAMoB,YAAmB;IAC5B,MAAM;QACF,OAAOxB;QACP,OAAO;QACP,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMyB,aAAoB;IAC7B,MAAM;QACF,OAAO1B;QACP,OAAO;QACP,UAAU;QACV,YAAY;YAAE,SAAS;YAAO,SAAS;QAAqC;IAChF;AACJ;AAEO,MAAM2B,WAAkB;IAC3B,QAAQd,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GACI,oBAACN,aAAWA;YACP,GAAGG,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;IACA,MAAM;QAAE,OAAOZ;QAAe,OAAO;QAAmB,UAAU;IAAK;AAC3E;AAEO,MAAMuB,WAAkB;IAC3B,MAAM;QAAE,OAAO3B;QAAW,OAAO;QAAa,UAAU;QAAM,UAAU;IAAK;AACjF;AAEO,MAAM4B,gBAAuB;IAChC,QAAQhB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiB;QAC3C,OAAO,WAAP,GACI,oBAACN,aAAWA;YACP,GAAGG,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;IACA,MAAM;QACF,OAAOhB;QACP,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;IACV;IACA,UAAU;QACN,OAAO;YAAE,aAAa;YAAyB,SAAS;QAAO;QAC/D,aAAa;YAAE,aAAa;YAA+B,SAAS;QAAO;QAC3E,MAAM;YAAE,aAAa;YAAwB,SAAS;QAAO;QAC7D,UAAU;YAAE,aAAa;YAA4C,SAAS;QAAU;QACxF,UAAU;YAAE,aAAa;YAAsB,SAAS;QAAU;QAClE,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAW;gBAAS;aAAiB;QAC9D;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;aAAK;QACzB;QACA,UAAU;YAAE,aAAa;QAAmD;IAChF;AACJ"}
+{"version":3,"file":"ToggleGroup/ToggleGroup.stories.js","sources":["../../src/ToggleGroup/ToggleGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { ToggleGroup } from \"~/ToggleGroup/index.js\";\n\nconst textItems = [\n    { value: \"bold\", label: \"Bold\" },\n    { value: \"italic\", label: \"Italic\" },\n    { value: \"underline\", label: \"Underline\" }\n];\n\nconst iconItems = [\n    { value: \"left\", icon: <AlignLeftIcon /> },\n    { value: \"center\", icon: <AlignCenterIcon /> },\n    { value: \"right\", icon: <AlignRightIcon /> }\n];\n\nconst iconTextItems = [\n    { value: \"bold\", label: \"Bold\", icon: <BoldIcon /> },\n    { value: \"italic\", label: \"Italic\", icon: <ItalicIcon /> },\n    { value: \"underline\", label: \"Underline\", icon: <UnderlineIcon /> }\n];\n\nconst meta: Meta<typeof ToggleGroup> = {\n    title: \"Components/Form/ToggleGroup\",\n    component: ToggleGroup,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ToggleGroup>;\n\nexport const Default: Story = {\n    args: { items: textItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const IconOnly: Story = {\n    args: { items: iconItems, label: \"Alignment\", bordered: true }\n};\n\nexport const IconOnlyGhost: Story = {\n    args: { items: iconItems, label: \"Alignment\", variant: \"ghost\", bordered: true }\n};\n\nexport const WithIconAndText: Story = {\n    args: { items: iconTextItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const Outline: Story = {\n    args: { items: textItems, label: \"Text formatting\", variant: \"outline\", bordered: true }\n};\n\nexport const Ghost: Story = {\n    args: { items: textItems, label: \"Text formatting\", variant: \"ghost\", bordered: true }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        items: iconTextItems,\n        label: \"Text formatting\",\n        description: \"Choose one or more formatting options.\",\n        bordered: true\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        items: iconItems,\n        label: \"Alignment\",\n        note: \"Note: Formatting applies to selected text only.\",\n        bordered: true\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        items: textItems,\n        label: \"Text formatting\",\n        bordered: true,\n        validation: { isValid: false, message: \"Please select a formatting option.\" }\n    }\n};\n\nexport const Multiple: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"multiple\"\n                value={value}\n                onChange={v => setValue(v as string[])}\n            />\n        );\n    },\n    args: { items: iconTextItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const Disabled: Story = {\n    args: { items: iconItems, label: \"Alignment\", bordered: true, disabled: true }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    },\n    args: {\n        items: iconItems,\n        label: \"Alignment\",\n        bordered: true,\n        description: \"Choose a text alignment option.\",\n        note: \"Note: Alignment applies to the selected paragraph.\"\n    },\n    argTypes: {\n        label: { description: \"Label above the group\", control: \"text\" },\n        description: { description: \"Description below the label\", control: \"text\" },\n        note: { description: \"Note below the group\", control: \"text\" },\n        bordered: { description: \"Show a border around the group container\", control: \"boolean\" },\n        disabled: { description: \"Disables all items\", control: \"boolean\" },\n        variant: {\n            description: \"Visual style of items\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of items\",\n            control: \"select\",\n            options: [\"sm\", \"md\"]\n        },\n        onChange: { description: \"Called with the new value when selection changes\" }\n    }\n};\n"],"names":["textItems","iconItems","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","iconTextItems","BoldIcon","ItalicIcon","UnderlineIcon","meta","ToggleGroup","Story","Tooltip","args","value","setValue","useState","v","Default","IconOnly","IconOnlyGhost","WithIconAndText","Outline","Ghost","WithDescription","WithNotes","WithErrors","Multiple","Disabled","Documentation"],"mappings":";;;;;;;;;AAWA,MAAMA,YAAY;IACd;QAAE,OAAO;QAAQ,OAAO;IAAO;IAC/B;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAa,OAAO;IAAY;CAC5C;AAED,MAAMC,YAAY;IACd;QAAE,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;IACzC;QAAE,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,wCAAeA;IAAI;IAC7C;QAAE,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,uCAAcA;IAAI;CAC9C;AAED,MAAMC,gBAAgB;IAClB;QAAE,OAAO;QAAQ,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IAAI;IACnD;QAAE,OAAO;QAAU,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,kCAAUA;IAAI;IACzD;QAAE,OAAO;QAAa,OAAO;QAAa,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;CACrE;AAED,MAAMC,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACC,QAAQ,QAAQ,sBACb,oBAACD,OAAAA;KAGZ;IACD,QAAQE,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiB;QAC3C,OAAO,WAAP,GACI,oBAACN,aAAWA;YACP,GAAGG,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;AACJ;AAEA,4BAAeR;AAGR,MAAMS,UAAiB;IAC1B,MAAM;QAAE,OAAOlB;QAAW,OAAO;QAAmB,UAAU;IAAK;AACvE;AAEO,MAAMmB,WAAkB;IAC3B,MAAM;QAAE,OAAOlB;QAAW,OAAO;QAAa,UAAU;IAAK;AACjE;AAEO,MAAMmB,gBAAuB;IAChC,MAAM;QAAE,OAAOnB;QAAW,OAAO;QAAa,SAAS;QAAS,UAAU;IAAK;AACnF;AAEO,MAAMoB,kBAAyB;IAClC,MAAM;QAAE,OAAOhB;QAAe,OAAO;QAAmB,UAAU;IAAK;AAC3E;AAEO,MAAMiB,UAAiB;IAC1B,MAAM;QAAE,OAAOtB;QAAW,OAAO;QAAmB,SAAS;QAAW,UAAU;IAAK;AAC3F;AAEO,MAAMuB,QAAe;IACxB,MAAM;QAAE,OAAOvB;QAAW,OAAO;QAAmB,SAAS;QAAS,UAAU;IAAK;AACzF;AAEO,MAAMwB,kBAAyB;IAClC,MAAM;QACF,OAAOnB;QACP,OAAO;QACP,aAAa;QACb,UAAU;IACd;AACJ;AAEO,MAAMoB,YAAmB;IAC5B,MAAM;QACF,OAAOxB;QACP,OAAO;QACP,MAAM;QACN,UAAU;IACd;AACJ;AAEO,MAAMyB,aAAoB;IAC7B,MAAM;QACF,OAAO1B;QACP,OAAO;QACP,UAAU;QACV,YAAY;YAAE,SAAS;YAAO,SAAS;QAAqC;IAChF;AACJ;AAEO,MAAM2B,WAAkB;IAC3B,QAAQd,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GACI,oBAACN,aAAWA;YACP,GAAGG,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;IACA,MAAM;QAAE,OAAOZ;QAAe,OAAO;QAAmB,UAAU;IAAK;AAC3E;AAEO,MAAMuB,WAAkB;IAC3B,MAAM;QAAE,OAAO3B;QAAW,OAAO;QAAa,UAAU;QAAM,UAAU;IAAK;AACjF;AAEO,MAAM4B,gBAAuB;IAChC,QAAQhB,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiB;QAC3C,OAAO,WAAP,GACI,oBAACN,aAAWA;YACP,GAAGG,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;IACA,MAAM;QACF,OAAOhB;QACP,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;IACV;IACA,UAAU;QACN,OAAO;YAAE,aAAa;YAAyB,SAAS;QAAO;QAC/D,aAAa;YAAE,aAAa;YAA+B,SAAS;QAAO;QAC3E,MAAM;YAAE,aAAa;YAAwB,SAAS;QAAO;QAC7D,UAAU;YAAE,aAAa;YAA4C,SAAS;QAAU;QACxF,UAAU;YAAE,aAAa;YAAsB,SAAS;QAAU;QAClE,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAW;gBAAS;aAAiB;QAC9D;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;aAAK;QACzB;QACA,UAAU;YAAE,aAAa;QAAmD;IAChF;AACJ"}

package/ToggleGroup/domains/ToggleGroupItem.d.ts

@@ -6,6 +6,7 @@ export declare class ToggleGroupItem {
     private readonly _disabled;
     private readonly _icon;
     private readonly _iconPosition;
+    private readonly _tooltip?;
     protected constructor(data: {
         id: string;
         label: any;
@@ -13,6 +14,7 @@ export declare class ToggleGroupItem {
         disabled: boolean;
         icon: any;
         iconPosition: "start" | "end";
+        tooltip?: any;
     });
     static create(data: ToggleGroupItemParams): ToggleGroupItem;
     get id(): string;
@@ -21,4 +23,5 @@ export declare class ToggleGroupItem {
     get disabled(): boolean;
     get icon(): any;
     get iconPosition(): "end" | "start";
+    get tooltip(): any;
 }

package/ToggleGroup/domains/ToggleGroupItem.js

@@ -7,6 +7,7 @@ class ToggleGroupItem {
         this._disabled = data.disabled;
         this._icon = data.icon;
         this._iconPosition = data.iconPosition;
+        this._tooltip = data.tooltip;
     }
     static create(data) {
         return new ToggleGroupItem({
@@ -15,7 +16,8 @@ class ToggleGroupItem {
             value: data.value,
             disabled: data.disabled ?? false,
             icon: data.icon,
-            iconPosition: data.iconPosition ?? "start"
+            iconPosition: data.iconPosition ?? "start",
+            tooltip: data.tooltip
         });
     }
     get id() {
@@ -36,6 +38,9 @@ class ToggleGroupItem {
     get iconPosition() {
         return this._iconPosition;
     }
+    get tooltip() {
+        return this._tooltip;
+    }
 }
 export { ToggleGroupItem };
 

package/ToggleGroup/domains/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/domains/ToggleGroupItem.js","sources":["../../../src/ToggleGroup/domains/ToggleGroupItem.ts"],"sourcesContent":["import type { ToggleGroupItemParams } from \"./ToggleGroupItemParams.js\";\nimport { generateId } from \"~/utils.js\";\n\nexport class ToggleGroupItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string;\n    private readonly _disabled: boolean;\n    private readonly _icon: any;\n    private readonly _iconPosition: \"start\" | \"end\";\n\n    protected constructor(data: {\n        id: string;\n        label: any;\n        value: string;\n        disabled: boolean;\n        icon: any;\n        iconPosition: \"start\" | \"end\";\n    }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._value = data.value;\n        this._disabled = data.disabled;\n        this._icon = data.icon;\n        this._iconPosition = data.iconPosition;\n    }\n\n    static create(data: ToggleGroupItemParams): ToggleGroupItem {\n        return new ToggleGroupItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            disabled: data.disabled ?? false,\n            icon: data.icon,\n            iconPosition: data.iconPosition ?? \"start\"\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get value() {\n        return this._value;\n    }\n\n    get disabled() {\n        return this._disabled;\n    }\n\n    get icon() {\n        return this._icon;\n    }\n\n    get iconPosition() {\n        return this._iconPosition;\n    }\n}\n"],"names":["ToggleGroupItem","data","generateId"],"mappings":";AAGO,MAAMA;IAQT,YAAsBC,IAOrB,CAAE;QACC,IAAI,CAAC,GAAG,GAAGA,KAAK,EAAE;QAClB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,SAAS,GAAGA,KAAK,QAAQ;QAC9B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;QACtB,IAAI,CAAC,aAAa,GAAGA,KAAK,YAAY;IAC1C;IAEA,OAAO,OAAOA,IAA2B,EAAmB;QACxD,OAAO,IAAID,gBAAgB;YACvB,IAAIE,WAAWD,KAAK,EAAE;YACtB,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ,IAAI;YAC3B,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY,IAAI;QACvC;IACJ;IAEA,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,eAAe;QACf,OAAO,IAAI,CAAC,aAAa;IAC7B;AACJ"}
+{"version":3,"file":"ToggleGroup/domains/ToggleGroupItem.js","sources":["../../../src/ToggleGroup/domains/ToggleGroupItem.ts"],"sourcesContent":["import type { ToggleGroupItemParams } from \"./ToggleGroupItemParams.js\";\nimport { generateId } from \"~/utils.js\";\n\nexport class ToggleGroupItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string;\n    private readonly _disabled: boolean;\n    private readonly _icon: any;\n    private readonly _iconPosition: \"start\" | \"end\";\n    private readonly _tooltip?: any;\n\n    protected constructor(data: {\n        id: string;\n        label: any;\n        value: string;\n        disabled: boolean;\n        icon: any;\n        iconPosition: \"start\" | \"end\";\n        tooltip?: any;\n    }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._value = data.value;\n        this._disabled = data.disabled;\n        this._icon = data.icon;\n        this._iconPosition = data.iconPosition;\n        this._tooltip = data.tooltip;\n    }\n\n    static create(data: ToggleGroupItemParams): ToggleGroupItem {\n        return new ToggleGroupItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            disabled: data.disabled ?? false,\n            icon: data.icon,\n            iconPosition: data.iconPosition ?? \"start\",\n            tooltip: data.tooltip\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get value() {\n        return this._value;\n    }\n\n    get disabled() {\n        return this._disabled;\n    }\n\n    get icon() {\n        return this._icon;\n    }\n\n    get iconPosition() {\n        return this._iconPosition;\n    }\n\n    get tooltip() {\n        return this._tooltip;\n    }\n}\n"],"names":["ToggleGroupItem","data","generateId"],"mappings":";AAGO,MAAMA;IAST,YAAsBC,IAQrB,CAAE;QACC,IAAI,CAAC,GAAG,GAAGA,KAAK,EAAE;QAClB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,SAAS,GAAGA,KAAK,QAAQ;QAC9B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;QACtB,IAAI,CAAC,aAAa,GAAGA,KAAK,YAAY;QACtC,IAAI,CAAC,QAAQ,GAAGA,KAAK,OAAO;IAChC;IAEA,OAAO,OAAOA,IAA2B,EAAmB;QACxD,OAAO,IAAID,gBAAgB;YACvB,IAAIE,WAAWD,KAAK,EAAE;YACtB,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ,IAAI;YAC3B,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY,IAAI;YACnC,SAASA,KAAK,OAAO;QACzB;IACJ;IAEA,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,eAAe;QACf,OAAO,IAAI,CAAC,aAAa;IAC7B;IAEA,IAAI,UAAU;QACV,OAAO,IAAI,CAAC,QAAQ;IACxB;AACJ"}

package/ToggleGroup/domains/ToggleGroupItemFormatted.d.ts

@@ -6,4 +6,5 @@ export interface ToggleGroupItemFormatted {
     disabled: boolean;
     icon?: React.ReactNode;
     iconPosition: "start" | "end";
+    tooltip?: React.ReactNode;
 }

package/ToggleGroup/domains/ToggleGroupItemFormatter.js

@@ -6,7 +6,8 @@ class ToggleGroupItemFormatter {
             value: item.value,
             disabled: item.disabled,
             icon: item.icon,
-            iconPosition: item.iconPosition
+            iconPosition: item.iconPosition,
+            tooltip: item.tooltip
         };
     }
 }

package/ToggleGroup/domains/ToggleGroupItemFormatter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/domains/ToggleGroupItemFormatter.js","sources":["../../../src/ToggleGroup/domains/ToggleGroupItemFormatter.ts"],"sourcesContent":["import type { ToggleGroupItemFormatted } from \"./ToggleGroupItemFormatted.js\";\nimport type { ToggleGroupItem } from \"./ToggleGroupItem.js\";\n\nexport class ToggleGroupItemFormatter {\n    static format(item: ToggleGroupItem): ToggleGroupItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: item.value,\n            disabled: item.disabled,\n            icon: item.icon,\n            iconPosition: item.iconPosition\n        };\n    }\n}\n"],"names":["ToggleGroupItemFormatter","item"],"mappings":"AAGO,MAAMA;IACT,OAAO,OAAOC,IAAqB,EAA4B;QAC3D,OAAO;YACH,IAAIA,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY;QACnC;IACJ;AACJ"}
+{"version":3,"file":"ToggleGroup/domains/ToggleGroupItemFormatter.js","sources":["../../../src/ToggleGroup/domains/ToggleGroupItemFormatter.ts"],"sourcesContent":["import type { ToggleGroupItemFormatted } from \"./ToggleGroupItemFormatted.js\";\nimport type { ToggleGroupItem } from \"./ToggleGroupItem.js\";\n\nexport class ToggleGroupItemFormatter {\n    static format(item: ToggleGroupItem): ToggleGroupItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: item.value,\n            disabled: item.disabled,\n            icon: item.icon,\n            iconPosition: item.iconPosition,\n            tooltip: item.tooltip\n        };\n    }\n}\n"],"names":["ToggleGroupItemFormatter","item"],"mappings":"AAGO,MAAMA;IACT,OAAO,OAAOC,IAAqB,EAA4B;QAC3D,OAAO;YACH,IAAIA,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY;YAC/B,SAASA,KAAK,OAAO;QACzB;IACJ;AACJ"}

package/ToggleGroup/domains/ToggleGroupItemParams.d.ts

@@ -6,4 +6,5 @@ export interface ToggleGroupItemParams {
     disabled?: boolean;
     icon?: React.ReactNode;
     iconPosition?: "start" | "end";
+    tooltip?: React.ReactNode;
 }

package/ToggleGroup/primitives/ToggleGroupPrimitive.js

@@ -1,5 +1,6 @@
 import { ToggleGroup } from "radix-ui";
 import { cn, cva, makeDecoratable } from "../../utils.js";
+import { Tooltip } from "../../Tooltip/index.js";
 import { useToggleGroup } from "./useToggleGroup.js";
 import * as __rspack_external_react from "react";
 const toggleGroupItemVariants = cva([
@@ -107,8 +108,7 @@ const ToggleGroupRenderer = ({ items, changeValue, value, type = "single", varia
         className: containerClass
     }, items.map((item)=>{
         const contentLayout = !item.label && item.icon ? "icon" : "text";
-        return /*#__PURE__*/ __rspack_external_react.createElement(ToggleGroup.Item, {
-            key: item.id,
+        const trigger = /*#__PURE__*/ __rspack_external_react.createElement(ToggleGroup.Item, {
             value: item.value,
             disabled: item.disabled,
             className: cn(toggleGroupItemVariants({
@@ -117,6 +117,15 @@ const ToggleGroupRenderer = ({ items, changeValue, value, type = "single", varia
                 contentLayout
             }))
         }, "end" !== item.iconPosition && item.icon, item.label, "end" === item.iconPosition && item.icon);
+        if (item.tooltip) return /*#__PURE__*/ __rspack_external_react.createElement(Tooltip, {
+            key: item.id,
+            content: item.tooltip,
+            side: "bottom",
+            trigger: trigger
+        });
+        return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, {
+            key: item.id
+        }, trigger);
     }));
 };
 const DecoratableToggleGroupPrimitive = (props)=>{

package/ToggleGroup/primitives/ToggleGroupPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/primitives/ToggleGroupPrimitive.js","sources":["../../../src/ToggleGroup/primitives/ToggleGroupPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { useToggleGroup } from \"./useToggleGroup.js\";\nimport type { ToggleGroupItemFormatted, ToggleGroupItemParams } from \"../domains/index.js\";\n\n/**\n * Toggle Group Item\n */\n\nconst toggleGroupItemVariants = cva(\n    [\n        \"border-sm inline-flex items-center justify-center gap-xs whitespace-nowrap font-sans cursor-pointer transition-colors rounded-sm\",\n        \"focus-visible:outline-none focus-visible:border-accent-default focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n        \"disabled:pointer-events-none disabled:opacity-50\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"border-transparent bg-neutral-dimmed text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-muted\",\n                    \"data-[state=on]:bg-neutral-xstrong data-[state=on]:text-neutral-light data-[state=on]:fill-neutral-light\"\n                ],\n                outline: [\n                    \"border-neutral-dimmed-darker bg-neutral-base text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-light\",\n                    \"data-[state=on]:bg-neutral-dimmed\"\n                ],\n                ghost: [\n                    \"border-transparent bg-transparent text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"data-[state=on]:bg-neutral-dark/5 data-[state=on]:fill-neutral-xstrong\"\n                ],\n                \"ghost-negative\": [\n                    \"border-transparent bg-transparent text-neutral-light fill-neutral-light\",\n                    \"hover:bg-neutral-base/20\",\n                    \"data-[state=on]:bg-neutral-base/30\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"text-sm [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ],\n                md: [\n                    \"text-md [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ]\n            },\n            contentLayout: {\n                text: \"\",\n                icon: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\n/**\n * Toggle Group Container\n */\n\nconst toggleGroupVariants = cva(\"inline-flex items-center\", {\n    variants: {\n        bordered: {\n            true: \"rounded-md border-sm border-neutral-dimmed-darker p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\",\n            false: \"\"\n        },\n        variant: {\n            primary: \"gap-xs\",\n            outline: \"gap-xs\",\n            ghost: \"\",\n            \"ghost-negative\": \"\"\n        }\n    },\n    defaultVariants: {\n        bordered: false,\n        variant: \"primary\"\n    }\n});\n\ntype ToggleGroupVariant = VariantProps<typeof toggleGroupItemVariants>[\"variant\"];\ntype ToggleGroupSize = VariantProps<typeof toggleGroupItemVariants>[\"size\"];\n\ntype ToggleGroupSingleProps = {\n    type?: \"single\";\n    value?: string;\n    onChange?: (value: string) => void;\n};\n\ntype ToggleGroupMultipleProps = {\n    type: \"multiple\";\n    value?: string[];\n    onChange?: (value: string[]) => void;\n};\n\ntype ToggleGroupPrimitiveBaseProps = {\n    items: ToggleGroupItemParams[];\n    variant?: ToggleGroupVariant;\n    size?: ToggleGroupSize;\n    bordered?: boolean;\n    disabled?: boolean;\n    className?: string;\n};\n\ntype ToggleGroupPrimitiveProps = ToggleGroupPrimitiveBaseProps &\n    (ToggleGroupSingleProps | ToggleGroupMultipleProps);\n\ntype ToggleGroupVm = {\n    items: ToggleGroupItemFormatted[];\n};\n\n/**\n * Toggle Group Renderer\n */\n\ntype ToggleGroupRendererProps = ToggleGroupPrimitiveProps & {\n    items: ToggleGroupItemFormatted[];\n    changeValue: (value: string | string[]) => void;\n};\n\nconst ToggleGroupRenderer = ({\n    items,\n    changeValue,\n    value,\n    type = \"single\",\n    variant = \"primary\",\n    size = \"md\",\n    bordered = false,\n    disabled,\n    className\n}: ToggleGroupRendererProps) => {\n    const containerClass = cn(toggleGroupVariants({ bordered, variant }), className);\n\n    const radixProps = useMemo(() => {\n        if (type === \"multiple\") {\n            return {\n                type: \"multiple\" as const,\n                value: (value as string[] | undefined) ?? [],\n                onValueChange: changeValue as (value: string[]) => void\n            };\n        }\n        return {\n            type: \"single\" as const,\n            value: (value as string | undefined) ?? \"\",\n            onValueChange: changeValue as (value: string) => void\n        };\n    }, [type, value, changeValue]);\n\n    return (\n        <ToggleGroupPrimitives.Root {...radixProps} disabled={disabled} className={containerClass}>\n            {items.map(item => {\n                const contentLayout = !item.label && item.icon ? \"icon\" : \"text\";\n                return (\n                    <ToggleGroupPrimitives.Item\n                        key={item.id}\n                        value={item.value}\n                        disabled={item.disabled}\n                        className={cn(toggleGroupItemVariants({ variant, size, contentLayout }))}\n                    >\n                        {item.iconPosition !== \"end\" && item.icon}\n                        {item.label}\n                        {item.iconPosition === \"end\" && item.icon}\n                    </ToggleGroupPrimitives.Item>\n                );\n            })}\n        </ToggleGroupPrimitives.Root>\n    );\n};\n\n/**\n * Toggle Group Primitive\n */\n\nconst DecoratableToggleGroupPrimitive = (props: ToggleGroupPrimitiveProps) => {\n    const { vm, changeValue } = useToggleGroup(props);\n    return <ToggleGroupRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nconst ToggleGroupPrimitive = makeDecoratable(\n    \"ToggleGroupPrimitive\",\n    DecoratableToggleGroupPrimitive\n);\n\nexport {\n    ToggleGroupPrimitive,\n    type ToggleGroupPrimitiveProps,\n    type ToggleGroupVm,\n    type ToggleGroupVariant,\n    type ToggleGroupSize\n};\n"],"names":["toggleGroupItemVariants","cva","toggleGroupVariants","ToggleGroupRenderer","items","changeValue","value","type","variant","size","bordered","disabled","className","containerClass","cn","radixProps","useMemo","ToggleGroupPrimitives","item","contentLayout","DecoratableToggleGroupPrimitive","props","vm","useToggleGroup","ToggleGroupPrimitive","makeDecoratable"],"mappings":";;;;AAWA,MAAMA,0BAA0BC,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;aACH;YACD,SAAS;gBACL;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,eAAe;YACX,MAAM;YACN,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAOJ,MAAMC,sBAAsBD,IAAI,4BAA4B;IACxD,UAAU;QACN,UAAU;YACN,MAAM;YACN,OAAO;QACX;QACA,SAAS;YACL,SAAS;YACT,SAAS;YACT,OAAO;YACP,kBAAkB;QACtB;IACJ;IACA,iBAAiB;QACb,UAAU;QACV,SAAS;IACb;AACJ;AA0CA,MAAME,sBAAsB,CAAC,EACzBC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,OAAO,QAAQ,EACfC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,WAAW,KAAK,EAChBC,QAAQ,EACRC,SAAS,EACc;IACvB,MAAMC,iBAAiBC,GAAGZ,oBAAoB;QAAEQ;QAAUF;IAAQ,IAAII;IAEtE,MAAMG,aAAaC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ;QACvB,IAAIT,AAAS,eAATA,MACA,OAAO;YACH,MAAM;YACN,OAAQD,SAAkC,EAAE;YAC5C,eAAeD;QACnB;QAEJ,OAAO;YACH,MAAM;YACN,OAAQC,SAAgC;YACxC,eAAeD;QACnB;IACJ,GAAG;QAACE;QAAMD;QAAOD;KAAY;IAE7B,OAAO,WAAP,GACI,sCAACY,YAAAA,IAA0B;QAAE,GAAGF,UAAU;QAAE,UAAUJ;QAAU,WAAWE;OACtET,MAAM,GAAG,CAACc,CAAAA;QACP,MAAMC,gBAAgB,CAACD,KAAK,KAAK,IAAIA,KAAK,IAAI,GAAG,SAAS;QAC1D,OAAO,WAAP,GACI,sCAACD,YAAAA,IAA0B;YACvB,KAAKC,KAAK,EAAE;YACZ,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;YACvB,WAAWJ,GAAGd,wBAAwB;gBAAEQ;gBAASC;gBAAMU;YAAc;WAEpED,AAAsB,UAAtBA,KAAK,YAAY,IAAcA,KAAK,IAAI,EACxCA,KAAK,KAAK,EACVA,AAAsB,UAAtBA,KAAK,YAAY,IAAcA,KAAK,IAAI;IAGrD;AAGZ;AAMA,MAAME,kCAAkC,CAACC;IACrC,MAAM,EAAEC,EAAE,EAAEjB,WAAW,EAAE,GAAGkB,eAAeF;IAC3C,OAAO,WAAP,GAAO,sCAAClB,qBAAmBA;QAAE,GAAGkB,KAAK;QAAE,OAAOC,GAAG,KAAK;QAAE,aAAajB;;AACzE;AAEA,MAAMmB,uBAAuBC,gBACzB,wBACAL"}
+{"version":3,"file":"ToggleGroup/primitives/ToggleGroupPrimitive.js","sources":["../../../src/ToggleGroup/primitives/ToggleGroupPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { useToggleGroup } from \"./useToggleGroup.js\";\nimport type { ToggleGroupItemFormatted, ToggleGroupItemParams } from \"../domains/index.js\";\n\n/**\n * Toggle Group Item\n */\n\nconst toggleGroupItemVariants = cva(\n    [\n        \"border-sm inline-flex items-center justify-center gap-xs whitespace-nowrap font-sans cursor-pointer transition-colors rounded-sm\",\n        \"focus-visible:outline-none focus-visible:border-accent-default focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n        \"disabled:pointer-events-none disabled:opacity-50\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"border-transparent bg-neutral-dimmed text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-muted\",\n                    \"data-[state=on]:bg-neutral-xstrong data-[state=on]:text-neutral-light data-[state=on]:fill-neutral-light\"\n                ],\n                outline: [\n                    \"border-neutral-dimmed-darker bg-neutral-base text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-light\",\n                    \"data-[state=on]:bg-neutral-dimmed\"\n                ],\n                ghost: [\n                    \"border-transparent bg-transparent text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"data-[state=on]:bg-neutral-dark/5 data-[state=on]:fill-neutral-xstrong\"\n                ],\n                \"ghost-negative\": [\n                    \"border-transparent bg-transparent text-neutral-light fill-neutral-light\",\n                    \"hover:bg-neutral-base/20\",\n                    \"data-[state=on]:bg-neutral-base/30\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"text-sm [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ],\n                md: [\n                    \"text-md [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ]\n            },\n            contentLayout: {\n                text: \"\",\n                icon: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\n/**\n * Toggle Group Container\n */\n\nconst toggleGroupVariants = cva(\"inline-flex items-center\", {\n    variants: {\n        bordered: {\n            true: \"rounded-md border-sm border-neutral-dimmed-darker p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\",\n            false: \"\"\n        },\n        variant: {\n            primary: \"gap-xs\",\n            outline: \"gap-xs\",\n            ghost: \"\",\n            \"ghost-negative\": \"\"\n        }\n    },\n    defaultVariants: {\n        bordered: false,\n        variant: \"primary\"\n    }\n});\n\ntype ToggleGroupVariant = VariantProps<typeof toggleGroupItemVariants>[\"variant\"];\ntype ToggleGroupSize = VariantProps<typeof toggleGroupItemVariants>[\"size\"];\n\ntype ToggleGroupSingleProps = {\n    type?: \"single\";\n    value?: string;\n    onChange?: (value: string) => void;\n};\n\ntype ToggleGroupMultipleProps = {\n    type: \"multiple\";\n    value?: string[];\n    onChange?: (value: string[]) => void;\n};\n\ntype ToggleGroupPrimitiveBaseProps = {\n    items: ToggleGroupItemParams[];\n    variant?: ToggleGroupVariant;\n    size?: ToggleGroupSize;\n    bordered?: boolean;\n    disabled?: boolean;\n    className?: string;\n};\n\ntype ToggleGroupPrimitiveProps = ToggleGroupPrimitiveBaseProps &\n    (ToggleGroupSingleProps | ToggleGroupMultipleProps);\n\ntype ToggleGroupVm = {\n    items: ToggleGroupItemFormatted[];\n};\n\n/**\n * Toggle Group Renderer\n */\n\ntype ToggleGroupRendererProps = ToggleGroupPrimitiveProps & {\n    items: ToggleGroupItemFormatted[];\n    changeValue: (value: string | string[]) => void;\n};\n\nconst ToggleGroupRenderer = ({\n    items,\n    changeValue,\n    value,\n    type = \"single\",\n    variant = \"primary\",\n    size = \"md\",\n    bordered = false,\n    disabled,\n    className\n}: ToggleGroupRendererProps) => {\n    const containerClass = cn(toggleGroupVariants({ bordered, variant }), className);\n\n    const radixProps = useMemo(() => {\n        if (type === \"multiple\") {\n            return {\n                type: \"multiple\" as const,\n                value: (value as string[] | undefined) ?? [],\n                onValueChange: changeValue as (value: string[]) => void\n            };\n        }\n        return {\n            type: \"single\" as const,\n            value: (value as string | undefined) ?? \"\",\n            onValueChange: changeValue as (value: string) => void\n        };\n    }, [type, value, changeValue]);\n\n    return (\n        <ToggleGroupPrimitives.Root {...radixProps} disabled={disabled} className={containerClass}>\n            {items.map(item => {\n                const contentLayout = !item.label && item.icon ? \"icon\" : \"text\";\n                const trigger = (\n                    <ToggleGroupPrimitives.Item\n                        value={item.value}\n                        disabled={item.disabled}\n                        className={cn(toggleGroupItemVariants({ variant, size, contentLayout }))}\n                    >\n                        {item.iconPosition !== \"end\" && item.icon}\n                        {item.label}\n                        {item.iconPosition === \"end\" && item.icon}\n                    </ToggleGroupPrimitives.Item>\n                );\n                if (item.tooltip) {\n                    return (\n                        <Tooltip\n                            key={item.id}\n                            content={item.tooltip}\n                            side=\"bottom\"\n                            trigger={trigger}\n                        />\n                    );\n                }\n                return <React.Fragment key={item.id}>{trigger}</React.Fragment>;\n            })}\n        </ToggleGroupPrimitives.Root>\n    );\n};\n\n/**\n * Toggle Group Primitive\n */\n\nconst DecoratableToggleGroupPrimitive = (props: ToggleGroupPrimitiveProps) => {\n    const { vm, changeValue } = useToggleGroup(props);\n    return <ToggleGroupRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nconst ToggleGroupPrimitive = makeDecoratable(\n    \"ToggleGroupPrimitive\",\n    DecoratableToggleGroupPrimitive\n);\n\nexport {\n    ToggleGroupPrimitive,\n    type ToggleGroupPrimitiveProps,\n    type ToggleGroupVm,\n    type ToggleGroupVariant,\n    type ToggleGroupSize\n};\n"],"names":["toggleGroupItemVariants","cva","toggleGroupVariants","ToggleGroupRenderer","items","changeValue","value","type","variant","size","bordered","disabled","className","containerClass","cn","radixProps","useMemo","ToggleGroupPrimitives","item","contentLayout","trigger","Tooltip","React","DecoratableToggleGroupPrimitive","props","vm","useToggleGroup","ToggleGroupPrimitive","makeDecoratable"],"mappings":";;;;;AAYA,MAAMA,0BAA0BC,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;aACH;YACD,SAAS;gBACL;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,eAAe;YACX,MAAM;YACN,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAOJ,MAAMC,sBAAsBD,IAAI,4BAA4B;IACxD,UAAU;QACN,UAAU;YACN,MAAM;YACN,OAAO;QACX;QACA,SAAS;YACL,SAAS;YACT,SAAS;YACT,OAAO;YACP,kBAAkB;QACtB;IACJ;IACA,iBAAiB;QACb,UAAU;QACV,SAAS;IACb;AACJ;AA0CA,MAAME,sBAAsB,CAAC,EACzBC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,OAAO,QAAQ,EACfC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,WAAW,KAAK,EAChBC,QAAQ,EACRC,SAAS,EACc;IACvB,MAAMC,iBAAiBC,GAAGZ,oBAAoB;QAAEQ;QAAUF;IAAQ,IAAII;IAEtE,MAAMG,aAAaC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ;QACvB,IAAIT,AAAS,eAATA,MACA,OAAO;YACH,MAAM;YACN,OAAQD,SAAkC,EAAE;YAC5C,eAAeD;QACnB;QAEJ,OAAO;YACH,MAAM;YACN,OAAQC,SAAgC;YACxC,eAAeD;QACnB;IACJ,GAAG;QAACE;QAAMD;QAAOD;KAAY;IAE7B,OAAO,WAAP,GACI,sCAACY,YAAAA,IAA0B;QAAE,GAAGF,UAAU;QAAE,UAAUJ;QAAU,WAAWE;OACtET,MAAM,GAAG,CAACc,CAAAA;QACP,MAAMC,gBAAgB,CAACD,KAAK,KAAK,IAAIA,KAAK,IAAI,GAAG,SAAS;QAC1D,MAAME,UAAU,WAAVA,GACF,sCAACH,YAAAA,IAA0B;YACvB,OAAOC,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;YACvB,WAAWJ,GAAGd,wBAAwB;gBAAEQ;gBAASC;gBAAMU;YAAc;WAEpED,AAAsB,UAAtBA,KAAK,YAAY,IAAcA,KAAK,IAAI,EACxCA,KAAK,KAAK,EACVA,AAAsB,UAAtBA,KAAK,YAAY,IAAcA,KAAK,IAAI;QAGjD,IAAIA,KAAK,OAAO,EACZ,OAAO,WAAP,GACI,sCAACG,SAAOA;YACJ,KAAKH,KAAK,EAAE;YACZ,SAASA,KAAK,OAAO;YACrB,MAAK;YACL,SAASE;;QAIrB,OAAO,WAAP,GAAO,sCAACE,wBAAAA,QAAc;YAAC,KAAKJ,KAAK,EAAE;WAAGE;IAC1C;AAGZ;AAMA,MAAMG,kCAAkC,CAACC;IACrC,MAAM,EAAEC,EAAE,EAAEpB,WAAW,EAAE,GAAGqB,eAAeF;IAC3C,OAAO,WAAP,GAAO,sCAACrB,qBAAmBA;QAAE,GAAGqB,KAAK;QAAE,OAAOC,GAAG,KAAK;QAAE,aAAapB;;AACzE;AAEA,MAAMsB,uBAAuBC,gBACzB,wBACAL"}

package/ToggleGroup/primitives/ToggleGroupPrimitive.stories.d.ts

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

package/ToggleGroup/primitives/ToggleGroupPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/primitives/ToggleGroupPrimitive.stories.js","sources":["../../../src/ToggleGroup/primitives/ToggleGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { ToggleGroupPrimitive } from \"./ToggleGroupPrimitive.js\";\n\nconst textItems = [\n    { value: \"bold\", label: \"Bold\" },\n    { value: \"italic\", label: \"Italic\" },\n    { value: \"underline\", label: \"Underline\" }\n];\n\nconst iconItems = [\n    { value: \"left\", icon: <AlignLeftIcon /> },\n    { value: \"center\", icon: <AlignCenterIcon /> },\n    { value: \"right\", icon: <AlignRightIcon /> }\n];\n\nconst iconTextItems = [\n    { value: \"bold\", label: \"Bold\", icon: <BoldIcon /> },\n    { value: \"italic\", label: \"Italic\", icon: <ItalicIcon /> },\n    { value: \"underline\", label: \"Underline\", icon: <UnderlineIcon /> }\n];\n\nconst meta: Meta<typeof ToggleGroupPrimitive> = {\n    title: \"Components/Form Primitives/ToggleGroup\",\n    component: ToggleGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroupPrimitive\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ToggleGroupPrimitive>;\n\nexport const Default: Story = {\n    args: { items: textItems }\n};\n\nexport const Bordered: Story = {\n    args: { items: textItems, bordered: true }\n};\n\nexport const IconOnly: Story = {\n    args: { items: iconItems, bordered: true }\n};\n\nexport const IconOnlyGhost: Story = {\n    args: { items: iconItems, variant: \"ghost\", bordered: true }\n};\n\nexport const WithIconAndText: Story = {\n    args: { items: iconTextItems, bordered: true }\n};\n\nexport const WithIconAndTextOutline: Story = {\n    args: { items: iconTextItems, variant: \"outline\", bordered: true }\n};\n\nexport const Outline: Story = {\n    args: { items: textItems, variant: \"outline\", bordered: true }\n};\n\nexport const Ghost: Story = {\n    args: { items: textItems, variant: \"ghost\", bordered: true }\n};\n\nexport const SizeSmall: Story = {\n    args: { items: iconItems, size: \"sm\", bordered: true }\n};\n\nexport const SizeMedium: Story = {\n    args: { items: iconItems, size: \"md\", bordered: true }\n};\n\nexport const Multiple: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return (\n            <ToggleGroupPrimitive\n                {...args}\n                type=\"multiple\"\n                value={value}\n                onChange={v => setValue(v as string[])}\n            />\n        );\n    },\n    args: { items: iconTextItems, bordered: true }\n};\n\nexport const Disabled: Story = {\n    args: { items: iconItems, bordered: true, disabled: true }\n};\n"],"names":["textItems","iconItems","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","iconTextItems","BoldIcon","ItalicIcon","UnderlineIcon","meta","ToggleGroupPrimitive","args","value","setValue","useState","v","Default","Bordered","IconOnly","IconOnlyGhost","WithIconAndText","WithIconAndTextOutline","Outline","Ghost","SizeSmall","SizeMedium","Multiple","Disabled"],"mappings":";;;;;;;;AAUA,MAAMA,YAAY;IACd;QAAE,OAAO;QAAQ,OAAO;IAAO;IAC/B;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAa,OAAO;IAAY;CAC5C;AAED,MAAMC,YAAY;IACd;QAAE,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;IACzC;QAAE,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,wCAAeA;IAAI;IAC7C;QAAE,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,uCAAcA;IAAI;CAC9C;AAED,MAAMC,gBAAgB;IAClB;QAAE,OAAO;QAAQ,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IAAI;IACnD;QAAE,OAAO;QAAU,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,kCAAUA;IAAI;IACzD;QAAE,OAAO;QAAa,OAAO;QAAa,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;CACrE;AAED,MAAMC,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiB;QAC3C,OAAO,WAAP,GACI,oBAACJ,sBAAoBA;YAChB,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;AACJ;AAEA,qCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QAAE,OAAOhB;IAAU;AAC7B;AAEO,MAAMiB,WAAkB;IAC3B,MAAM;QAAE,OAAOjB;QAAW,UAAU;IAAK;AAC7C;AAEO,MAAMkB,WAAkB;IAC3B,MAAM;QAAE,OAAOjB;QAAW,UAAU;IAAK;AAC7C;AAEO,MAAMkB,gBAAuB;IAChC,MAAM;QAAE,OAAOlB;QAAW,SAAS;QAAS,UAAU;IAAK;AAC/D;AAEO,MAAMmB,kBAAyB;IAClC,MAAM;QAAE,OAAOf;QAAe,UAAU;IAAK;AACjD;AAEO,MAAMgB,yBAAgC;IACzC,MAAM;QAAE,OAAOhB;QAAe,SAAS;QAAW,UAAU;IAAK;AACrE;AAEO,MAAMiB,UAAiB;IAC1B,MAAM;QAAE,OAAOtB;QAAW,SAAS;QAAW,UAAU;IAAK;AACjE;AAEO,MAAMuB,QAAe;IACxB,MAAM;QAAE,OAAOvB;QAAW,SAAS;QAAS,UAAU;IAAK;AAC/D;AAEO,MAAMwB,YAAmB;IAC5B,MAAM;QAAE,OAAOvB;QAAW,MAAM;QAAM,UAAU;IAAK;AACzD;AAEO,MAAMwB,aAAoB;IAC7B,MAAM;QAAE,OAAOxB;QAAW,MAAM;QAAM,UAAU;IAAK;AACzD;AAEO,MAAMyB,WAAkB;IAC3B,QAAQf,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GACI,oBAACJ,sBAAoBA;YAChB,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;IACA,MAAM;QAAE,OAAOV;QAAe,UAAU;IAAK;AACjD;AAEO,MAAMsB,WAAkB;IAC3B,MAAM;QAAE,OAAO1B;QAAW,UAAU;QAAM,UAAU;IAAK;AAC7D"}
+{"version":3,"file":"ToggleGroup/primitives/ToggleGroupPrimitive.stories.js","sources":["../../../src/ToggleGroup/primitives/ToggleGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { ToggleGroupPrimitive } from \"./ToggleGroupPrimitive.js\";\n\nconst textItems = [\n    { value: \"bold\", label: \"Bold\" },\n    { value: \"italic\", label: \"Italic\" },\n    { value: \"underline\", label: \"Underline\" }\n];\n\nconst iconItems = [\n    { value: \"left\", icon: <AlignLeftIcon /> },\n    { value: \"center\", icon: <AlignCenterIcon /> },\n    { value: \"right\", icon: <AlignRightIcon /> }\n];\n\nconst iconTextItems = [\n    { value: \"bold\", label: \"Bold\", icon: <BoldIcon /> },\n    { value: \"italic\", label: \"Italic\", icon: <ItalicIcon /> },\n    { value: \"underline\", label: \"Underline\", icon: <UnderlineIcon /> }\n];\n\nconst meta: Meta<typeof ToggleGroupPrimitive> = {\n    title: \"Components/Form Primitives/ToggleGroup\",\n    component: ToggleGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroupPrimitive\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ToggleGroupPrimitive>;\n\nexport const Default: Story = {\n    args: { items: textItems }\n};\n\nexport const Bordered: Story = {\n    args: { items: textItems, bordered: true }\n};\n\nexport const IconOnly: Story = {\n    args: { items: iconItems, bordered: true }\n};\n\nexport const IconOnlyGhost: Story = {\n    args: { items: iconItems, variant: \"ghost\", bordered: true }\n};\n\nexport const WithIconAndText: Story = {\n    args: { items: iconTextItems, bordered: true }\n};\n\nexport const WithIconAndTextOutline: Story = {\n    args: { items: iconTextItems, variant: \"outline\", bordered: true }\n};\n\nexport const Outline: Story = {\n    args: { items: textItems, variant: \"outline\", bordered: true }\n};\n\nexport const Ghost: Story = {\n    args: { items: textItems, variant: \"ghost\", bordered: true }\n};\n\nexport const SizeSmall: Story = {\n    args: { items: iconItems, size: \"sm\", bordered: true }\n};\n\nexport const SizeMedium: Story = {\n    args: { items: iconItems, size: \"md\", bordered: true }\n};\n\nexport const Multiple: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return (\n            <ToggleGroupPrimitive\n                {...args}\n                type=\"multiple\"\n                value={value}\n                onChange={v => setValue(v as string[])}\n            />\n        );\n    },\n    args: { items: iconTextItems, bordered: true }\n};\n\nexport const Disabled: Story = {\n    args: { items: iconItems, bordered: true, disabled: true }\n};\n"],"names":["textItems","iconItems","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","iconTextItems","BoldIcon","ItalicIcon","UnderlineIcon","meta","ToggleGroupPrimitive","args","value","setValue","useState","v","Default","Bordered","IconOnly","IconOnlyGhost","WithIconAndText","WithIconAndTextOutline","Outline","Ghost","SizeSmall","SizeMedium","Multiple","Disabled"],"mappings":";;;;;;;;AAUA,MAAMA,YAAY;IACd;QAAE,OAAO;QAAQ,OAAO;IAAO;IAC/B;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAa,OAAO;IAAY;CAC5C;AAED,MAAMC,YAAY;IACd;QAAE,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;IACzC;QAAE,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,wCAAeA;IAAI;IAC7C;QAAE,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,uCAAcA;IAAI;CAC9C;AAED,MAAMC,gBAAgB;IAClB;QAAE,OAAO;QAAQ,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IAAI;IACnD;QAAE,OAAO;QAAU,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,kCAAUA;IAAI;IACzD;QAAE,OAAO;QAAa,OAAO;QAAa,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;CACrE;AAED,MAAMC,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiB;QAC3C,OAAO,WAAP,GACI,oBAACJ,sBAAoBA;YAChB,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;AACJ;AAEA,qCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QAAE,OAAOhB;IAAU;AAC7B;AAEO,MAAMiB,WAAkB;IAC3B,MAAM;QAAE,OAAOjB;QAAW,UAAU;IAAK;AAC7C;AAEO,MAAMkB,WAAkB;IAC3B,MAAM;QAAE,OAAOjB;QAAW,UAAU;IAAK;AAC7C;AAEO,MAAMkB,gBAAuB;IAChC,MAAM;QAAE,OAAOlB;QAAW,SAAS;QAAS,UAAU;IAAK;AAC/D;AAEO,MAAMmB,kBAAyB;IAClC,MAAM;QAAE,OAAOf;QAAe,UAAU;IAAK;AACjD;AAEO,MAAMgB,yBAAgC;IACzC,MAAM;QAAE,OAAOhB;QAAe,SAAS;QAAW,UAAU;IAAK;AACrE;AAEO,MAAMiB,UAAiB;IAC1B,MAAM;QAAE,OAAOtB;QAAW,SAAS;QAAW,UAAU;IAAK;AACjE;AAEO,MAAMuB,QAAe;IACxB,MAAM;QAAE,OAAOvB;QAAW,SAAS;QAAS,UAAU;IAAK;AAC/D;AAEO,MAAMwB,YAAmB;IAC5B,MAAM;QAAE,OAAOvB;QAAW,MAAM;QAAM,UAAU;IAAK;AACzD;AAEO,MAAMwB,aAAoB;IAC7B,MAAM;QAAE,OAAOxB;QAAW,MAAM;QAAM,UAAU;IAAK;AACzD;AAEO,MAAMyB,WAAkB;IAC3B,QAAQf,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GACI,oBAACJ,sBAAoBA;YAChB,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;IACA,MAAM;QAAE,OAAOV;QAAe,UAAU;IAAK;AACjD;AAEO,MAAMsB,WAAkB;IAC3B,MAAM;QAAE,OAAO1B;QAAW,UAAU;QAAM,UAAU;IAAK;AAC7D"}

package/Tooltip/Tooltip.stories.d.ts

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

package/Tooltip/Tooltip.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip/Tooltip.stories.js","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"flex flex-col gap-xs\">\n                <Text size=\"sm\" className=\"font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"names":["meta","Tooltip","Story","Default","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","Icon","InfoIcon","Documentation","Positioning","Alignment","WithButtonTrigger","Button","WithFormattedContent","Text","WithHelpIcon","HelpIcon"],"mappings":"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"}
+{"version":3,"file":"Tooltip/Tooltip.stories.js","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"flex flex-col gap-xs\">\n                <Text size=\"sm\" className=\"font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"names":["meta","Tooltip","Story","Default","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","Icon","InfoIcon","Documentation","Positioning","Alignment","WithButtonTrigger","Button","WithFormattedContent","Text","WithHelpIcon","HelpIcon"],"mappings":"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"}

package/Tree/Tree.stories.d.ts

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

package/Tree/Tree.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree/Tree.stories.js","sources":["../../src/Tree/Tree.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as ArticleIcon } from \"@webiny/icons/article.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Tree } from \"./Tree.js\";\n\nconst meta: Meta<typeof Tree> = {\n    title: \"Components/Tree\",\n    component: Tree,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tree>;\n\nexport const Default: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithRootId: Story = {\n    args: {\n        ...Default.args,\n        rootId: \"1\"\n    }\n};\n\nexport const WithDefaultOpenNodesIds: Story = {\n    args: {\n        ...Default.args,\n        defaultOpenNodeIds: [\"1\"]\n    }\n};\n\nexport const WithActiveNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                active: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithLoadingNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                loading: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\n// Example custom data type\ninterface CustomData {\n    foo: string;\n    bar: number;\n}\n\ntype StoryWithCustomData = StoryObj<typeof Tree<CustomData>>;\n\nexport const WithCustomData: StoryWithCustomData = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { foo: \"bar\", bar: 42 }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { foo: \"baz\", bar: 99 }\n            }\n        ],\n        onDrop: async (newTree, options) => {\n            // newTree and options are fully typed with CustomData\n            console.log(\"Custom data tree:\", newTree);\n            console.log(\"Custom data drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnDropCallback: Story = {\n    args: {\n        ...Default.args,\n        onDrop: async (newTree, options) => {\n            console.log(\"New tree structure:\", newTree);\n            console.log(\"Drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnChangeOpenCallback: Story = {\n    args: {\n        ...Default.args,\n        onChangeOpen: newOpenNodes => {\n            console.log(\"New open nodes:\", newOpenNodes);\n        }\n    }\n};\n\nexport const WithCanDrag: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drag this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrag: node => node?.id !== \"1\"\n    }\n};\n\nexport const WithCanDrop: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drop on this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrop: (_, options) => {\n            const { dropTargetId } = options;\n\n            if (dropTargetId === \"1\") {\n                return false; // Prevent dropping on Node 1\n            }\n\n            return true;\n        }\n    }\n};\n\n// Example custom data type\ninterface CustomRenderData {\n    icon: React.ReactElement;\n}\n\ntype StoryWithCustomNodeRenderer = StoryObj<typeof Tree<CustomRenderData>>;\n\nexport const WithCustomNodeRenderer: StoryWithCustomNodeRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"4\",\n                parentId: \"0\",\n                label: \"Node 4\",\n                data: { icon: <ArticleIcon /> }\n            }\n        ],\n        renderer: node => (\n            <Tree.Item.Content>\n                <Tree.Item.Icon label={node.label} element={node.icon} />\n                {node.label}\n            </Tree.Item.Content>\n        )\n    }\n};\n\n// Example custom sorting by `order` property\ninterface CustomSortCallbackData {\n    order: number;\n}\n\ntype WithCustomSortCallbackRenderer = StoryObj<typeof Tree<CustomSortCallbackData>>;\n\nexport const WithCustomSortCallback: WithCustomSortCallbackRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: {\n                    order: 3\n                }\n            },\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: {\n                    order: 1\n                }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: {\n                    order: 2\n                }\n            },\n            {\n                id: \"5\",\n                parentId: \"1\",\n                label: \"Node 5\",\n                data: {\n                    order: 5\n                }\n            },\n            {\n                id: \"4\",\n                parentId: \"1\",\n                label: \"Node 4\",\n                data: {\n                    order: 4\n                }\n            },\n            {\n                id: \"6\",\n                parentId: \"1\",\n                label: \"Node 6\",\n                data: {\n                    order: 6\n                }\n            }\n        ],\n        sort: (a, b) => (a.data?.order ?? 0) - (b.data?.order ?? 0)\n    }\n};\n"],"names":["meta","Tree","Default","WithRootId","WithDefaultOpenNodesIds","WithActiveNodes","WithLoadingNodes","WithCustomData","newTree","options","console","WithOnDropCallback","WithOnChangeOpenCallback","newOpenNodes","WithCanDrag","node","WithCanDrop","_","dropTargetId","WithCustomNodeRenderer","FolderIcon","ArticleIcon","WithCustomSortCallback","a","b"],"mappings":"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"}
+{"version":3,"file":"Tree/Tree.stories.js","sources":["../../src/Tree/Tree.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as ArticleIcon } from \"@webiny/icons/article.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Tree } from \"./Tree.js\";\n\nconst meta: Meta<typeof Tree> = {\n    title: \"Components/Tree\",\n    component: Tree,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tree>;\n\nexport const Default: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithRootId: Story = {\n    args: {\n        ...Default.args,\n        rootId: \"1\"\n    }\n};\n\nexport const WithDefaultOpenNodesIds: Story = {\n    args: {\n        ...Default.args,\n        defaultOpenNodeIds: [\"1\"]\n    }\n};\n\nexport const WithActiveNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                active: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithLoadingNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                loading: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\n// Example custom data type\ninterface CustomData {\n    foo: string;\n    bar: number;\n}\n\ntype StoryWithCustomData = StoryObj<typeof Tree<CustomData>>;\n\nexport const WithCustomData: StoryWithCustomData = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { foo: \"bar\", bar: 42 }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { foo: \"baz\", bar: 99 }\n            }\n        ],\n        onDrop: async (newTree, options) => {\n            // newTree and options are fully typed with CustomData\n            console.log(\"Custom data tree:\", newTree);\n            console.log(\"Custom data drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnDropCallback: Story = {\n    args: {\n        ...Default.args,\n        onDrop: async (newTree, options) => {\n            console.log(\"New tree structure:\", newTree);\n            console.log(\"Drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnChangeOpenCallback: Story = {\n    args: {\n        ...Default.args,\n        onChangeOpen: newOpenNodes => {\n            console.log(\"New open nodes:\", newOpenNodes);\n        }\n    }\n};\n\nexport const WithCanDrag: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drag this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrag: node => node?.id !== \"1\"\n    }\n};\n\nexport const WithCanDrop: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drop on this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrop: (_, options) => {\n            const { dropTargetId } = options;\n\n            if (dropTargetId === \"1\") {\n                return false; // Prevent dropping on Node 1\n            }\n\n            return true;\n        }\n    }\n};\n\n// Example custom data type\ninterface CustomRenderData {\n    icon: React.ReactElement;\n}\n\ntype StoryWithCustomNodeRenderer = StoryObj<typeof Tree<CustomRenderData>>;\n\nexport const WithCustomNodeRenderer: StoryWithCustomNodeRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"4\",\n                parentId: \"0\",\n                label: \"Node 4\",\n                data: { icon: <ArticleIcon /> }\n            }\n        ],\n        renderer: node => (\n            <Tree.Item.Content>\n                <Tree.Item.Icon label={node.label} element={node.icon} />\n                {node.label}\n            </Tree.Item.Content>\n        )\n    }\n};\n\n// Example custom sorting by `order` property\ninterface CustomSortCallbackData {\n    order: number;\n}\n\ntype WithCustomSortCallbackRenderer = StoryObj<typeof Tree<CustomSortCallbackData>>;\n\nexport const WithCustomSortCallback: WithCustomSortCallbackRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: {\n                    order: 3\n                }\n            },\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: {\n                    order: 1\n                }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: {\n                    order: 2\n                }\n            },\n            {\n                id: \"5\",\n                parentId: \"1\",\n                label: \"Node 5\",\n                data: {\n                    order: 5\n                }\n            },\n            {\n                id: \"4\",\n                parentId: \"1\",\n                label: \"Node 4\",\n                data: {\n                    order: 4\n                }\n            },\n            {\n                id: \"6\",\n                parentId: \"1\",\n                label: \"Node 6\",\n                data: {\n                    order: 6\n                }\n            }\n        ],\n        sort: (a, b) => (a.data?.order ?? 0) - (b.data?.order ?? 0)\n    }\n};\n"],"names":["meta","Tree","Default","WithRootId","WithDefaultOpenNodesIds","WithActiveNodes","WithLoadingNodes","WithCustomData","newTree","options","console","WithOnDropCallback","WithOnChangeOpenCallback","newOpenNodes","WithCanDrag","node","WithCanDrop","_","dropTargetId","WithCustomNodeRenderer","FolderIcon","ArticleIcon","WithCustomSortCallback","a","b"],"mappings":"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"}

package/Widget/Widget.stories.d.ts

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