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

package/Toggle/Toggle.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { TogglePrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type ToggleProps = TogglePrimitiveProps & FormComponentProps;
-declare const Toggle: (({ note, validation, ...props }: ToggleProps) => React.JSX.Element) & {
-    original: ({ note, validation, ...props }: ToggleProps) => React.JSX.Element;
+declare const DecoratableToggle: ({ note, validation, ...props }: ToggleProps) => React.JSX.Element;
+declare const Toggle: typeof DecoratableToggle & {
+    original: typeof DecoratableToggle;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ note, validation, ...props }: ToggleProps) => React.JSX.Element) & {
-        original: ({ note, validation, ...props }: ToggleProps) => React.JSX.Element;
+    original: typeof DecoratableToggle & {
+        original: typeof DecoratableToggle;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ note, validation, ...props }: ToggleProps) => React.JSX.Element) & {
-        original: ({ note, validation, ...props }: ToggleProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableToggle & {
+        original: typeof DecoratableToggle;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Toggle/Toggle.stories.d.ts

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

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.d.ts

@@ -6,9 +6,9 @@ import type { ToggleItemDto, ToggleItemFormatted } from "../domains/index.js";
  * Toggle Renderer
  */
 declare const toggleVariants: (props?: ({
-    variant?: "primary" | "ghost" | "ghost-negative" | "outline" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    contentLayout?: "text" | "icon" | null | undefined;
+    variant?: "ghost" | "ghost-negative" | "outline" | "primary" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+    contentLayout?: "icon" | "text" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TogglePrimitiveProps = Omit<TogglePrimitives.ToggleProps, "defaultPressed" | "onPressedChange" | "onChange" | "pressed"> & VariantProps<typeof toggleVariants> & ToggleItemDto & {
     onChange?: (checked: boolean) => void;
@@ -16,21 +16,25 @@ type TogglePrimitiveProps = Omit<TogglePrimitives.ToggleProps, "defaultPressed"
 type TogglePrimitivVm = {
     item?: ToggleItemFormatted;
 };
-declare const TogglePrimitive: ((props: TogglePrimitiveProps) => React.JSX.Element | null) & {
-    original: (props: TogglePrimitiveProps) => React.JSX.Element | null;
+/**
+ * Toggle
+ */
+declare const DecoratableTogglePrimitive: (props: TogglePrimitiveProps) => React.JSX.Element | null;
+declare const TogglePrimitive: typeof DecoratableTogglePrimitive & {
+    original: typeof DecoratableTogglePrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: TogglePrimitiveProps) => React.JSX.Element | null) & {
-        original: (props: TogglePrimitiveProps) => React.JSX.Element | null;
+    original: typeof DecoratableTogglePrimitive & {
+        original: typeof DecoratableTogglePrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: TogglePrimitiveProps) => React.JSX.Element | null) & {
-        original: (props: TogglePrimitiveProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTogglePrimitive & {
+        original: typeof DecoratableTogglePrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

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.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { ToggleGroupPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type ToggleGroupProps = ToggleGroupPrimitiveProps & FormComponentProps;
-declare const ToggleGroup: (({ label, description, note, hint, required, disabled, validation, ...props }: ToggleGroupProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: ToggleGroupProps) => React.JSX.Element;
+declare const DecoratableToggleGroup: ({ label, description, note, hint, required, disabled, validation, ...props }: ToggleGroupProps) => React.JSX.Element;
+declare const ToggleGroup: typeof DecoratableToggleGroup & {
+    original: typeof DecoratableToggleGroup;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: ToggleGroupProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: ToggleGroupProps) => React.JSX.Element;
+    original: typeof DecoratableToggleGroup & {
+        original: typeof DecoratableToggleGroup;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: ToggleGroupProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: ToggleGroupProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableToggleGroup & {
+        original: typeof DecoratableToggleGroup;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

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

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.d.ts

@@ -5,9 +5,9 @@ import type { ToggleGroupItemFormatted, ToggleGroupItemParams } from "../domains
  * Toggle Group Item
  */
 declare const toggleGroupItemVariants: (props?: ({
-    variant?: "primary" | "ghost" | "ghost-negative" | "outline" | null | undefined;
-    size?: "sm" | "md" | null | undefined;
-    contentLayout?: "text" | "icon" | null | undefined;
+    variant?: "ghost" | "ghost-negative" | "outline" | "primary" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
+    contentLayout?: "icon" | "text" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ToggleGroupVariant = VariantProps<typeof toggleGroupItemVariants>["variant"];
 type ToggleGroupSize = VariantProps<typeof toggleGroupItemVariants>["size"];
@@ -33,21 +33,25 @@ type ToggleGroupPrimitiveProps = ToggleGroupPrimitiveBaseProps & (ToggleGroupSin
 type ToggleGroupVm = {
     items: ToggleGroupItemFormatted[];
 };
-declare const ToggleGroupPrimitive: ((props: ToggleGroupPrimitiveProps) => React.JSX.Element) & {
-    original: (props: ToggleGroupPrimitiveProps) => React.JSX.Element;
+/**
+ * Toggle Group Primitive
+ */
+declare const DecoratableToggleGroupPrimitive: (props: ToggleGroupPrimitiveProps) => React.JSX.Element;
+declare const ToggleGroupPrimitive: typeof DecoratableToggleGroupPrimitive & {
+    original: typeof DecoratableToggleGroupPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ToggleGroupPrimitiveProps) => React.JSX.Element) & {
-        original: (props: ToggleGroupPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableToggleGroupPrimitive & {
+        original: typeof DecoratableToggleGroupPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ToggleGroupPrimitiveProps) => React.JSX.Element) & {
-        original: (props: ToggleGroupPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableToggleGroupPrimitive & {
+        original: typeof DecoratableToggleGroupPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

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([
@@ -65,7 +66,7 @@ const toggleGroupItemVariants = cva([
 const toggleGroupVariants = cva("inline-flex items-center", {
     variants: {
         bordered: {
-            true: "rounded-md border-sm border-neutral-dimmed-darker p-[calc(var(--padding-xs)-(var(--border-width-sm)))]",
+            true: "rounded-md border-sm border-neutral-muted p-[calc(var(--padding-xs)-(var(--border-width-sm)))]",
             false: ""
         },
         variant: {
@@ -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            // Same border as outlined buttons (e.g. tertiary), so a toggle group sits evenly next to them.\n            true: \"rounded-md border-sm border-neutral-muted 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;YAEN,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.d.ts

@@ -12,21 +12,22 @@ interface TooltipProps extends Omit<TooltipPrimitive.TooltipContentProps, "conte
     trigger: React.ReactNode;
     rawTrigger?: boolean;
 }
-declare const Tooltip: (({ align, content, onOpenChange, showArrow, side, variant, trigger, delay, ...props }: TooltipProps) => React.JSX.Element) & {
-    original: ({ align, content, onOpenChange, showArrow, side, variant, trigger, delay, ...props }: TooltipProps) => React.JSX.Element;
+declare const DecoratableTooltip: ({ align, content, onOpenChange, showArrow, side, variant, trigger, delay, ...props }: TooltipProps) => React.JSX.Element;
+declare const Tooltip: typeof DecoratableTooltip & {
+    original: typeof DecoratableTooltip;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ align, content, onOpenChange, showArrow, side, variant, trigger, delay, ...props }: TooltipProps) => React.JSX.Element) & {
-        original: ({ align, content, onOpenChange, showArrow, side, variant, trigger, delay, ...props }: TooltipProps) => React.JSX.Element;
+    original: typeof DecoratableTooltip & {
+        original: typeof DecoratableTooltip;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ align, content, onOpenChange, showArrow, side, variant, trigger, delay, ...props }: TooltipProps) => React.JSX.Element) & {
-        original: ({ align, content, onOpenChange, showArrow, side, variant, trigger, delay, ...props }: TooltipProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTooltip & {
+        original: typeof DecoratableTooltip;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

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;