@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/Toggle/primitives/TogglePrimitive.stories.js

@@ -0,0 +1,122 @@
+import react, { useState } from "react";
+import { ReactComponent } from "@webiny/icons/format_bold.svg";
+import { TogglePrimitive } from "./TogglePrimitive.js";
+const meta = {
+    title: "Components/Form Primitives/Toggle",
+    component: TogglePrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    render: (args)=>{
+        const [checked, setChecked] = useState(args.checked);
+        return /*#__PURE__*/ react.createElement(TogglePrimitive, {
+            ...args,
+            checked: checked,
+            onChange: (value)=>setChecked(value)
+        });
+    }
+};
+const TogglePrimitive_stories = meta;
+const Default = {
+    args: {
+        label: "Toggle"
+    }
+};
+const Checked = {
+    args: {
+        label: "Toggle",
+        checked: true
+    }
+};
+const WithIcon = {
+    args: {
+        label: "Bold",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }
+};
+const WithIconChecked = {
+    args: {
+        label: "Bold",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        checked: true
+    }
+};
+const WithIconTrailing = {
+    args: {
+        label: "Bold",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        iconPosition: "end"
+    }
+};
+const IconOnly = {
+    args: {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }
+};
+const IconOnlyChecked = {
+    args: {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        checked: true
+    }
+};
+const Outline = {
+    args: {
+        label: "Toggle",
+        variant: "outline"
+    }
+};
+const OutlineChecked = {
+    args: {
+        label: "Toggle",
+        variant: "outline",
+        checked: true
+    }
+};
+const Ghost = {
+    args: {
+        label: "Toggle",
+        variant: "ghost"
+    }
+};
+const GhostChecked = {
+    args: {
+        label: "Toggle",
+        variant: "ghost",
+        checked: true
+    }
+};
+const SizeSmall = {
+    args: {
+        label: "Toggle",
+        size: "sm"
+    }
+};
+const SizeLarge = {
+    args: {
+        label: "Toggle",
+        size: "lg"
+    }
+};
+const SizeXL = {
+    args: {
+        label: "Toggle",
+        size: "xl"
+    }
+};
+const Disabled = {
+    args: {
+        label: "Toggle",
+        disabled: true
+    }
+};
+const DisabledChecked = {
+    args: {
+        label: "Toggle",
+        checked: true,
+        disabled: true
+    }
+};
+export default TogglePrimitive_stories;
+export { Checked, Default, Disabled, DisabledChecked, Ghost, GhostChecked, IconOnly, IconOnlyChecked, Outline, OutlineChecked, SizeLarge, SizeSmall, SizeXL, WithIcon, WithIconChecked, WithIconTrailing };
+
+//# sourceMappingURL=TogglePrimitive.stories.js.map

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

@@ -0,0 +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"}

package/Toggle/primitives/index.d.ts

@@ -0,0 +1 @@
+export * from "./TogglePrimitive.js";

package/Toggle/primitives/index.js

@@ -0,0 +1 @@
+export * from "./TogglePrimitive.js";

package/Toggle/primitives/presenters/TogglePresenter.d.ts

@@ -0,0 +1,21 @@
+import type { TogglePrimitivVm } from "../TogglePrimitive.js";
+import type { ToggleItemDto } from "../../domains/index.js";
+type TogglePresenterParams = ToggleItemDto & {
+    onChange?: (checked: boolean) => void;
+};
+interface ITogglePresenter<TParams extends TogglePresenterParams = TogglePresenterParams> {
+    vm: TogglePrimitivVm;
+    init: (params: TParams) => void;
+    changeChecked: (checked: boolean) => void;
+}
+declare class TogglePresenter implements ITogglePresenter {
+    private params?;
+    private item?;
+    constructor();
+    init: (params: TogglePresenterParams) => void;
+    get vm(): {
+        item: import("../../domains/ToggleItemFormatted.js").ToggleItemFormatted | undefined;
+    };
+    changeChecked: (checked: boolean) => void;
+}
+export { TogglePresenter, type TogglePresenterParams, type ITogglePresenter };

package/Toggle/primitives/presenters/TogglePresenter.js

@@ -0,0 +1,32 @@
+import { makeAutoObservable } from "mobx";
+import { ToggleItem, ToggleItemMapper } from "../../domains/index.js";
+class TogglePresenter {
+    constructor(){
+        this.params = void 0;
+        this.item = void 0;
+        this.init = (params)=>{
+            this.params = params;
+            this.item = ToggleItem.create({
+                id: params.id,
+                label: params.label,
+                value: params.value,
+                checked: params.checked,
+                disabled: params.disabled,
+                icon: params.icon,
+                iconPosition: params.iconPosition
+            });
+        };
+        this.changeChecked = (checked)=>{
+            this.params?.onChange?.(checked);
+        };
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            item: this.item ? ToggleItemMapper.toFormatted(this.item) : void 0
+        };
+    }
+}
+export { TogglePresenter };
+
+//# sourceMappingURL=TogglePresenter.js.map

package/Toggle/primitives/presenters/TogglePresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle/primitives/presenters/TogglePresenter.js","sources":["../../../../src/Toggle/primitives/presenters/TogglePresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { TogglePrimitivVm } from \"../TogglePrimitive.js\";\nimport type { ToggleItemDto } from \"../../domains/index.js\";\nimport { ToggleItem, ToggleItemMapper } from \"../../domains/index.js\";\n\ntype TogglePresenterParams = ToggleItemDto & {\n    onChange?: (checked: boolean) => void;\n};\n\ninterface ITogglePresenter<TParams extends TogglePresenterParams = TogglePresenterParams> {\n    vm: TogglePrimitivVm;\n    init: (params: TParams) => void;\n    changeChecked: (checked: boolean) => void;\n}\n\nclass TogglePresenter implements ITogglePresenter {\n    private params?: TogglePresenterParams = undefined;\n    private item?: ToggleItem = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init = (params: TogglePresenterParams) => {\n        this.params = params;\n        this.item = ToggleItem.create({\n            id: params.id,\n            label: params.label,\n            value: params.value,\n            checked: params.checked,\n            disabled: params.disabled,\n            icon: params.icon,\n            iconPosition: params.iconPosition\n        });\n    };\n\n    get vm() {\n        return {\n            item: this.item ? ToggleItemMapper.toFormatted(this.item) : undefined\n        };\n    }\n\n    public changeChecked = (checked: boolean) => {\n        this.params?.onChange?.(checked);\n    };\n}\n\nexport { TogglePresenter, type TogglePresenterParams, type ITogglePresenter };\n"],"names":["TogglePresenter","undefined","params","ToggleItem","checked","makeAutoObservable","ToggleItemMapper"],"mappings":";;AAeA,MAAMA;IAIF,aAAc;aAHN,MAAM,GAA2BC;aACjC,IAAI,GAAgBA;aAMrB,IAAI,GAAG,CAACC;YACX,IAAI,CAAC,MAAM,GAAGA;YACd,IAAI,CAAC,IAAI,GAAGC,WAAW,MAAM,CAAC;gBAC1B,IAAID,OAAO,EAAE;gBACb,OAAOA,OAAO,KAAK;gBACnB,OAAOA,OAAO,KAAK;gBACnB,SAASA,OAAO,OAAO;gBACvB,UAAUA,OAAO,QAAQ;gBACzB,MAAMA,OAAO,IAAI;gBACjB,cAAcA,OAAO,YAAY;YACrC;QACJ;aAQO,aAAa,GAAG,CAACE;YACpB,IAAI,CAAC,MAAM,EAAE,WAAWA;QAC5B;QAxBIC,mBAAmB,IAAI;IAC3B;IAeA,IAAI,KAAK;QACL,OAAO;YACH,MAAM,IAAI,CAAC,IAAI,GAAGC,iBAAiB,WAAW,CAAC,IAAI,CAAC,IAAI,IAAIL;QAChE;IACJ;AAKJ"}

package/Toggle/primitives/presenters/index.d.ts

@@ -0,0 +1 @@
+export * from "./TogglePresenter.js";

package/Toggle/primitives/presenters/index.js

@@ -0,0 +1 @@
+export * from "./TogglePresenter.js";

package/Toggle/primitives/useToggle.d.ts

@@ -0,0 +1,7 @@
+import type { TogglePrimitiveProps } from "./TogglePrimitive.js";
+export declare const useToggle: (props: TogglePrimitiveProps) => {
+    vm: {
+        item: import("../domains/ToggleItemFormatted.js").ToggleItemFormatted | undefined;
+    };
+    changeChecked: (checked: boolean) => void;
+};

package/Toggle/primitives/useToggle.js

@@ -0,0 +1,47 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { TogglePresenter } from "./presenters/TogglePresenter.js";
+const useToggle = (props)=>{
+    const params = useMemo(()=>({
+            id: props.id,
+            label: props.label,
+            value: props.value,
+            checked: props.checked,
+            disabled: props.disabled,
+            icon: props.icon,
+            iconPosition: props.iconPosition,
+            onChange: props.onChange
+        }), [
+        props.id,
+        props.label,
+        props.value,
+        props.checked,
+        props.disabled,
+        props.icon,
+        props.iconPosition,
+        props.onChange
+    ]);
+    const presenter = useMemo(()=>{
+        const presenter = new TogglePresenter();
+        presenter.init(params);
+        return presenter;
+    }, []);
+    const [vm, setVm] = useState(presenter.vm);
+    useEffect(()=>{
+        presenter.init(params);
+    }, [
+        params
+    ]);
+    useEffect(()=>autorun(()=>{
+            setVm(presenter.vm);
+        }), [
+        presenter
+    ]);
+    return {
+        vm,
+        changeChecked: presenter.changeChecked
+    };
+};
+export { useToggle };
+
+//# sourceMappingURL=useToggle.js.map

package/Toggle/primitives/useToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle/primitives/useToggle.js","sources":["../../../src/Toggle/primitives/useToggle.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { TogglePrimitiveProps } from \"./TogglePrimitive.js\";\nimport type { TogglePresenterParams } from \"./presenters/TogglePresenter.js\";\nimport { TogglePresenter } from \"./presenters/TogglePresenter.js\";\n\nexport const useToggle = (props: TogglePrimitiveProps) => {\n    const params: TogglePresenterParams = useMemo(\n        () => ({\n            id: props.id,\n            label: props.label,\n            value: props.value,\n            checked: props.checked,\n            disabled: props.disabled,\n            icon: props.icon,\n            iconPosition: props.iconPosition,\n            onChange: props.onChange\n        }),\n        [\n            props.id,\n            props.label,\n            props.value,\n            props.checked,\n            props.disabled,\n            props.icon,\n            props.iconPosition,\n            props.onChange\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const presenter = new TogglePresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeChecked: presenter.changeChecked };\n};\n"],"names":["useToggle","props","params","useMemo","presenter","TogglePresenter","vm","setVm","useState","useEffect","autorun"],"mappings":";;;AAMO,MAAMA,YAAY,CAACC;IACtB,MAAMC,SAAgCC,QAClC,IAAO;YACH,IAAIF,MAAM,EAAE;YACZ,OAAOA,MAAM,KAAK;YAClB,OAAOA,MAAM,KAAK;YAClB,SAASA,MAAM,OAAO;YACtB,UAAUA,MAAM,QAAQ;YACxB,MAAMA,MAAM,IAAI;YAChB,cAAcA,MAAM,YAAY;YAChC,UAAUA,MAAM,QAAQ;QAC5B,IACA;QACIA,MAAM,EAAE;QACRA,MAAM,KAAK;QACXA,MAAM,KAAK;QACXA,MAAM,OAAO;QACbA,MAAM,QAAQ;QACdA,MAAM,IAAI;QACVA,MAAM,YAAY;QAClBA,MAAM,QAAQ;KACjB;IAGL,MAAMG,YAAYD,QAAQ;QACtB,MAAMC,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAACF;QACf,OAAOE;IACX,GAAG,EAAE;IAEL,MAAM,CAACE,IAAIC,MAAM,GAAGC,SAASJ,UAAU,EAAE;IAEzCK,UAAU;QACNL,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;KAAO;IAEXO,UAAU,IACCC,QAAQ;YACXH,MAAMH,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QAAEE;QAAI,eAAeF,UAAU,aAAa;IAAC;AACxD"}

package/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,24 @@
+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;
+    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;
+        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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { ToggleGroup, type ToggleGroupProps };

package/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,38 @@
+import react, { useMemo } from "react";
+import { makeDecoratable } from "../utils.js";
+import { ToggleGroupPrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
+const DecoratableToggleGroup = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: label,
+        hint: hint,
+        required: required,
+        disabled: disabled,
+        invalid: invalid
+    }), /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: description,
+        disabled: disabled,
+        className: "mb-xs-plus"
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled,
+        className: "mt-none mb-xs-plus"
+    }), /*#__PURE__*/ react.createElement(ToggleGroupPrimitive, {
+        ...props,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
+};
+const ToggleGroup = makeDecoratable("ToggleGroup", DecoratableToggleGroup);
+export { ToggleGroup };
+
+//# sourceMappingURL=ToggleGroup.js.map

package/ToggleGroup/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup/ToggleGroup.js","sources":["../../src/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { ToggleGroupPrimitiveProps } from \"./primitives/index.js\";\nimport { ToggleGroupPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype ToggleGroupProps = ToggleGroupPrimitiveProps & FormComponentProps;\n\nconst DecoratableToggleGroup = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: ToggleGroupProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className=\"mb-xs-plus\"\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className=\"mt-none mb-xs-plus\"\n            />\n            <ToggleGroupPrimitive {...props} disabled={disabled} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst ToggleGroup = makeDecoratable(\"ToggleGroup\", DecoratableToggleGroup);\n\nexport { ToggleGroup, type ToggleGroupProps };\n"],"names":["DecoratableToggleGroup","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","FormComponentLabel","FormComponentDescription","FormComponentErrorMessage","ToggleGroupPrimitive","FormComponentNote","ToggleGroup","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,yBAAyB,CAAC,EAC5BC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACY;IACf,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACI,oBAAkBA;QACf,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;sBAEb,oBAACG,0BAAwBA;QACrB,MAAMZ;QACN,UAAUI;QACV,WAAU;sBAEd,oBAACS,2BAAyBA;QACtB,MAAML;QACN,SAASC;QACT,UAAUL;QACV,WAAU;sBAEd,oBAACU,sBAAoBA;QAAE,GAAGR,KAAK;QAAE,UAAUF;sBAC3C,oBAACW,mBAAiBA;QAAC,MAAMd;QAAM,UAAUG;;AAGrD;AAEA,MAAMY,cAAcC,gBAAgB,eAAenB"}

package/ToggleGroup/ToggleGroup.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { ToggleGroup } from "../ToggleGroup/index.js";
+declare const meta: Meta<typeof ToggleGroup>;
+export default meta;
+type Story = StoryObj<typeof ToggleGroup>;
+export declare const Default: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyGhost: Story;
+export declare const WithIconAndText: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Multiple: Story;
+export declare const Disabled: Story;
+export declare const Documentation: Story;

package/ToggleGroup/ToggleGroup.stories.js

@@ -0,0 +1,235 @@
+import react, { useState } from "react";
+import { ReactComponent } from "@webiny/icons/format_bold.svg";
+import { ReactComponent as format_italic_svg_ReactComponent } from "@webiny/icons/format_italic.svg";
+import { ReactComponent as format_underlined_svg_ReactComponent } from "@webiny/icons/format_underlined.svg";
+import { ReactComponent as format_align_left_svg_ReactComponent } from "@webiny/icons/format_align_left.svg";
+import { ReactComponent as format_align_center_svg_ReactComponent } from "@webiny/icons/format_align_center.svg";
+import { ReactComponent as format_align_right_svg_ReactComponent } from "@webiny/icons/format_align_right.svg";
+import { Tooltip } from "../Tooltip/index.js";
+import { ToggleGroup } from "./index.js";
+const textItems = [
+    {
+        value: "bold",
+        label: "Bold"
+    },
+    {
+        value: "italic",
+        label: "Italic"
+    },
+    {
+        value: "underline",
+        label: "Underline"
+    }
+];
+const iconItems = [
+    {
+        value: "left",
+        icon: /*#__PURE__*/ react.createElement(format_align_left_svg_ReactComponent, null)
+    },
+    {
+        value: "center",
+        icon: /*#__PURE__*/ react.createElement(format_align_center_svg_ReactComponent, null)
+    },
+    {
+        value: "right",
+        icon: /*#__PURE__*/ react.createElement(format_align_right_svg_ReactComponent, null)
+    }
+];
+const iconTextItems = [
+    {
+        value: "bold",
+        label: "Bold",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    },
+    {
+        value: "italic",
+        label: "Italic",
+        icon: /*#__PURE__*/ react.createElement(format_italic_svg_ReactComponent, null)
+    },
+    {
+        value: "underline",
+        label: "Underline",
+        icon: /*#__PURE__*/ react.createElement(format_underlined_svg_ReactComponent, null)
+    }
+];
+const meta = {
+    title: "Components/Form/ToggleGroup",
+    component: ToggleGroup,
+    parameters: {
+        layout: "padded"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement(Tooltip.Provider, null, /*#__PURE__*/ react.createElement(Story, null))
+    ],
+    render: (args)=>{
+        const [value, setValue] = useState("");
+        return /*#__PURE__*/ react.createElement(ToggleGroup, {
+            ...args,
+            type: "single",
+            value: value,
+            onChange: (v)=>setValue(v)
+        });
+    }
+};
+const ToggleGroup_stories = meta;
+const Default = {
+    args: {
+        items: textItems,
+        label: "Text formatting",
+        bordered: true
+    }
+};
+const IconOnly = {
+    args: {
+        items: iconItems,
+        label: "Alignment",
+        bordered: true
+    }
+};
+const IconOnlyGhost = {
+    args: {
+        items: iconItems,
+        label: "Alignment",
+        variant: "ghost",
+        bordered: true
+    }
+};
+const WithIconAndText = {
+    args: {
+        items: iconTextItems,
+        label: "Text formatting",
+        bordered: true
+    }
+};
+const Outline = {
+    args: {
+        items: textItems,
+        label: "Text formatting",
+        variant: "outline",
+        bordered: true
+    }
+};
+const Ghost = {
+    args: {
+        items: textItems,
+        label: "Text formatting",
+        variant: "ghost",
+        bordered: true
+    }
+};
+const WithDescription = {
+    args: {
+        items: iconTextItems,
+        label: "Text formatting",
+        description: "Choose one or more formatting options.",
+        bordered: true
+    }
+};
+const WithNotes = {
+    args: {
+        items: iconItems,
+        label: "Alignment",
+        note: "Note: Formatting applies to selected text only.",
+        bordered: true
+    }
+};
+const WithErrors = {
+    args: {
+        items: textItems,
+        label: "Text formatting",
+        bordered: true,
+        validation: {
+            isValid: false,
+            message: "Please select a formatting option."
+        }
+    }
+};
+const Multiple = {
+    render: (args)=>{
+        const [value, setValue] = useState([]);
+        return /*#__PURE__*/ react.createElement(ToggleGroup, {
+            ...args,
+            type: "multiple",
+            value: value,
+            onChange: (v)=>setValue(v)
+        });
+    },
+    args: {
+        items: iconTextItems,
+        label: "Text formatting",
+        bordered: true
+    }
+};
+const Disabled = {
+    args: {
+        items: iconItems,
+        label: "Alignment",
+        bordered: true,
+        disabled: true
+    }
+};
+const Documentation = {
+    render: (args)=>{
+        const [value, setValue] = useState("");
+        return /*#__PURE__*/ react.createElement(ToggleGroup, {
+            ...args,
+            type: "single",
+            value: value,
+            onChange: (v)=>setValue(v)
+        });
+    },
+    args: {
+        items: iconItems,
+        label: "Alignment",
+        bordered: true,
+        description: "Choose a text alignment option.",
+        note: "Note: Alignment applies to the selected paragraph."
+    },
+    argTypes: {
+        label: {
+            description: "Label above the group",
+            control: "text"
+        },
+        description: {
+            description: "Description below the label",
+            control: "text"
+        },
+        note: {
+            description: "Note below the group",
+            control: "text"
+        },
+        bordered: {
+            description: "Show a border around the group container",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables all items",
+            control: "boolean"
+        },
+        variant: {
+            description: "Visual style of items",
+            control: "select",
+            options: [
+                "primary",
+                "outline",
+                "ghost",
+                "ghost-negative"
+            ]
+        },
+        size: {
+            description: "Size of items",
+            control: "select",
+            options: [
+                "sm",
+                "md"
+            ]
+        },
+        onChange: {
+            description: "Called with the new value when selection changes"
+        }
+    }
+};
+export default ToggleGroup_stories;
+export { Default, Disabled, Documentation, Ghost, IconOnly, IconOnlyGhost, Multiple, Outline, WithDescription, WithErrors, WithIconAndText, WithNotes };
+
+//# sourceMappingURL=ToggleGroup.stories.js.map

package/ToggleGroup/ToggleGroup.stories.js.map

@@ -0,0 +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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"}

package/ToggleGroup/domains/ToggleGroupItem.d.ts

@@ -0,0 +1,24 @@
+import type { ToggleGroupItemParams } from "./ToggleGroupItemParams.js";
+export declare class ToggleGroupItem {
+    private readonly _id;
+    private readonly _label;
+    private readonly _value;
+    private readonly _disabled;
+    private readonly _icon;
+    private readonly _iconPosition;
+    protected constructor(data: {
+        id: string;
+        label: any;
+        value: string;
+        disabled: boolean;
+        icon: any;
+        iconPosition: "start" | "end";
+    });
+    static create(data: ToggleGroupItemParams): ToggleGroupItem;
+    get id(): string;
+    get label(): any;
+    get value(): string;
+    get disabled(): boolean;
+    get icon(): any;
+    get iconPosition(): "end" | "start";
+}