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

package/ToggleGroup/domains/ToggleGroupItem.js

@@ -0,0 +1,42 @@
+import { generateId } from "../../utils.js";
+class ToggleGroupItem {
+    constructor(data){
+        this._id = data.id;
+        this._label = data.label;
+        this._value = data.value;
+        this._disabled = data.disabled;
+        this._icon = data.icon;
+        this._iconPosition = data.iconPosition;
+    }
+    static create(data) {
+        return new ToggleGroupItem({
+            id: generateId(data.id),
+            label: data.label,
+            value: data.value,
+            disabled: data.disabled ?? false,
+            icon: data.icon,
+            iconPosition: data.iconPosition ?? "start"
+        });
+    }
+    get id() {
+        return this._id;
+    }
+    get label() {
+        return this._label;
+    }
+    get value() {
+        return this._value;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    get icon() {
+        return this._icon;
+    }
+    get iconPosition() {
+        return this._iconPosition;
+    }
+}
+export { ToggleGroupItem };
+
+//# sourceMappingURL=ToggleGroupItem.js.map

package/ToggleGroup/domains/ToggleGroupItem.js.map

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

package/ToggleGroup/domains/ToggleGroupItemFormatted.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+export interface ToggleGroupItemFormatted {
+    id: string;
+    label?: string | React.ReactNode;
+    value: string;
+    disabled: boolean;
+    icon?: React.ReactNode;
+    iconPosition: "start" | "end";
+}

package/ToggleGroup/domains/ToggleGroupItemFormatter.d.ts

@@ -0,0 +1,5 @@
+import type { ToggleGroupItemFormatted } from "./ToggleGroupItemFormatted.js";
+import type { ToggleGroupItem } from "./ToggleGroupItem.js";
+export declare class ToggleGroupItemFormatter {
+    static format(item: ToggleGroupItem): ToggleGroupItemFormatted;
+}

package/ToggleGroup/domains/ToggleGroupItemFormatter.js

@@ -0,0 +1,15 @@
+class ToggleGroupItemFormatter {
+    static format(item) {
+        return {
+            id: item.id,
+            label: item.label,
+            value: item.value,
+            disabled: item.disabled,
+            icon: item.icon,
+            iconPosition: item.iconPosition
+        };
+    }
+}
+export { ToggleGroupItemFormatter };
+
+//# sourceMappingURL=ToggleGroupItemFormatter.js.map

package/ToggleGroup/domains/ToggleGroupItemFormatter.js.map

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

package/ToggleGroup/domains/ToggleGroupItemParams.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+export interface ToggleGroupItemParams {
+    id?: string;
+    label?: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: "start" | "end";
+}

package/ToggleGroup/domains/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ToggleGroupItem.js";
+export type * from "./ToggleGroupItemFormatted.js";
+export type * from "./ToggleGroupItemParams.js";
+export * from "./ToggleGroupItemFormatter.js";

package/ToggleGroup/domains/index.js

@@ -0,0 +1,2 @@
+export * from "./ToggleGroupItem.js";
+export * from "./ToggleGroupItemFormatter.js";

package/ToggleGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ToggleGroup.js";
+export * from "./primitives/index.js";

package/ToggleGroup/index.js

@@ -0,0 +1,2 @@
+export * from "./ToggleGroup.js";
+export * from "./primitives/index.js";

package/ToggleGroup/primitives/ToggleGroupPrimitive.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils.js";
+import type { ToggleGroupItemFormatted, ToggleGroupItemParams } from "../domains/index.js";
+/**
+ * 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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ToggleGroupVariant = VariantProps<typeof toggleGroupItemVariants>["variant"];
+type ToggleGroupSize = VariantProps<typeof toggleGroupItemVariants>["size"];
+type ToggleGroupSingleProps = {
+    type?: "single";
+    value?: string;
+    onChange?: (value: string) => void;
+};
+type ToggleGroupMultipleProps = {
+    type: "multiple";
+    value?: string[];
+    onChange?: (value: string[]) => void;
+};
+type ToggleGroupPrimitiveBaseProps = {
+    items: ToggleGroupItemParams[];
+    variant?: ToggleGroupVariant;
+    size?: ToggleGroupSize;
+    bordered?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+type ToggleGroupPrimitiveProps = ToggleGroupPrimitiveBaseProps & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
+type ToggleGroupVm = {
+    items: ToggleGroupItemFormatted[];
+};
+declare const ToggleGroupPrimitive: ((props: ToggleGroupPrimitiveProps) => React.JSX.Element) & {
+    original: (props: ToggleGroupPrimitiveProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: ToggleGroupPrimitiveProps) => React.JSX.Element) & {
+        original: (props: ToggleGroupPrimitiveProps) => React.JSX.Element;
+        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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { ToggleGroupPrimitive, type ToggleGroupPrimitiveProps, type ToggleGroupVm, type ToggleGroupVariant, type ToggleGroupSize };

package/ToggleGroup/primitives/ToggleGroupPrimitive.js

@@ -0,0 +1,133 @@
+import { ToggleGroup } from "radix-ui";
+import { cn, cva, makeDecoratable } from "../../utils.js";
+import { useToggleGroup } from "./useToggleGroup.js";
+import * as __rspack_external_react from "react";
+const toggleGroupItemVariants = cva([
+    "border-sm inline-flex items-center justify-center gap-xs whitespace-nowrap font-sans cursor-pointer transition-colors rounded-sm",
+    "focus-visible:outline-none focus-visible:border-accent-default focus-visible:ring-lg focus-visible:ring-primary-dimmed",
+    "disabled:pointer-events-none disabled:opacity-50"
+], {
+    variants: {
+        variant: {
+            primary: [
+                "border-transparent bg-neutral-dimmed text-neutral-strong fill-neutral-strong",
+                "hover:bg-neutral-muted",
+                "data-[state=on]:bg-neutral-xstrong data-[state=on]:text-neutral-light data-[state=on]:fill-neutral-light"
+            ],
+            outline: [
+                "border-neutral-dimmed-darker bg-neutral-base text-neutral-strong fill-neutral-strong",
+                "hover:bg-neutral-light",
+                "data-[state=on]:bg-neutral-dimmed"
+            ],
+            ghost: [
+                "border-transparent bg-transparent text-neutral-strong fill-neutral-strong",
+                "hover:bg-neutral-dark/5",
+                "data-[state=on]:bg-neutral-dark/5 data-[state=on]:fill-neutral-xstrong"
+            ],
+            "ghost-negative": [
+                "border-transparent bg-transparent text-neutral-light fill-neutral-light",
+                "hover:bg-neutral-base/20",
+                "data-[state=on]:bg-neutral-base/30"
+            ]
+        },
+        size: {
+            sm: [
+                "text-sm [&>svg]:size-md",
+                "py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]"
+            ],
+            md: [
+                "text-md [&>svg]:size-md",
+                "py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"
+            ]
+        },
+        contentLayout: {
+            text: "",
+            icon: ""
+        }
+    },
+    compoundVariants: [
+        {
+            size: "sm",
+            contentLayout: "icon",
+            className: "p-[calc(var(--padding-xs)-(var(--border-width-sm)))]"
+        },
+        {
+            size: "md",
+            contentLayout: "icon",
+            className: "p-[calc(var(--padding-sm)-(var(--border-width-sm)))]"
+        }
+    ],
+    defaultVariants: {
+        variant: "primary",
+        size: "md"
+    }
+});
+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)))]",
+            false: ""
+        },
+        variant: {
+            primary: "gap-xs",
+            outline: "gap-xs",
+            ghost: "",
+            "ghost-negative": ""
+        }
+    },
+    defaultVariants: {
+        bordered: false,
+        variant: "primary"
+    }
+});
+const ToggleGroupRenderer = ({ items, changeValue, value, type = "single", variant = "primary", size = "md", bordered = false, disabled, className })=>{
+    const containerClass = cn(toggleGroupVariants({
+        bordered,
+        variant
+    }), className);
+    const radixProps = (0, __rspack_external_react.useMemo)(()=>{
+        if ("multiple" === type) return {
+            type: "multiple",
+            value: value ?? [],
+            onValueChange: changeValue
+        };
+        return {
+            type: "single",
+            value: value ?? "",
+            onValueChange: changeValue
+        };
+    }, [
+        type,
+        value,
+        changeValue
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement(ToggleGroup.Root, {
+        ...radixProps,
+        disabled: disabled,
+        className: containerClass
+    }, items.map((item)=>{
+        const contentLayout = !item.label && item.icon ? "icon" : "text";
+        return /*#__PURE__*/ __rspack_external_react.createElement(ToggleGroup.Item, {
+            key: item.id,
+            value: item.value,
+            disabled: item.disabled,
+            className: cn(toggleGroupItemVariants({
+                variant,
+                size,
+                contentLayout
+            }))
+        }, "end" !== item.iconPosition && item.icon, item.label, "end" === item.iconPosition && item.icon);
+    }));
+};
+const DecoratableToggleGroupPrimitive = (props)=>{
+    const { vm, changeValue } = useToggleGroup(props);
+    return /*#__PURE__*/ __rspack_external_react.createElement(ToggleGroupRenderer, {
+        ...props,
+        items: vm.items,
+        changeValue: changeValue
+    });
+};
+const ToggleGroupPrimitive = makeDecoratable("ToggleGroupPrimitive", DecoratableToggleGroupPrimitive);
+export { ToggleGroupPrimitive };
+
+//# sourceMappingURL=ToggleGroupPrimitive.js.map

package/ToggleGroup/primitives/ToggleGroupPrimitive.js.map

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

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { ToggleGroupPrimitive } from "./ToggleGroupPrimitive.js";
+declare const meta: Meta<typeof ToggleGroupPrimitive>;
+export default meta;
+type Story = StoryObj<typeof ToggleGroupPrimitive>;
+export declare const Default: Story;
+export declare const Bordered: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyGhost: Story;
+export declare const WithIconAndText: Story;
+export declare const WithIconAndTextOutline: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const SizeSmall: Story;
+export declare const SizeMedium: Story;
+export declare const Multiple: Story;
+export declare const Disabled: Story;

package/ToggleGroup/primitives/ToggleGroupPrimitive.stories.js

@@ -0,0 +1,161 @@
+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 { ToggleGroupPrimitive } from "./ToggleGroupPrimitive.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 Primitives/ToggleGroup",
+    component: ToggleGroupPrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    render: (args)=>{
+        const [value, setValue] = useState("");
+        return /*#__PURE__*/ react.createElement(ToggleGroupPrimitive, {
+            ...args,
+            type: "single",
+            value: value,
+            onChange: (v)=>setValue(v)
+        });
+    }
+};
+const ToggleGroupPrimitive_stories = meta;
+const Default = {
+    args: {
+        items: textItems
+    }
+};
+const Bordered = {
+    args: {
+        items: textItems,
+        bordered: true
+    }
+};
+const IconOnly = {
+    args: {
+        items: iconItems,
+        bordered: true
+    }
+};
+const IconOnlyGhost = {
+    args: {
+        items: iconItems,
+        variant: "ghost",
+        bordered: true
+    }
+};
+const WithIconAndText = {
+    args: {
+        items: iconTextItems,
+        bordered: true
+    }
+};
+const WithIconAndTextOutline = {
+    args: {
+        items: iconTextItems,
+        variant: "outline",
+        bordered: true
+    }
+};
+const Outline = {
+    args: {
+        items: textItems,
+        variant: "outline",
+        bordered: true
+    }
+};
+const Ghost = {
+    args: {
+        items: textItems,
+        variant: "ghost",
+        bordered: true
+    }
+};
+const SizeSmall = {
+    args: {
+        items: iconItems,
+        size: "sm",
+        bordered: true
+    }
+};
+const SizeMedium = {
+    args: {
+        items: iconItems,
+        size: "md",
+        bordered: true
+    }
+};
+const Multiple = {
+    render: (args)=>{
+        const [value, setValue] = useState([]);
+        return /*#__PURE__*/ react.createElement(ToggleGroupPrimitive, {
+            ...args,
+            type: "multiple",
+            value: value,
+            onChange: (v)=>setValue(v)
+        });
+    },
+    args: {
+        items: iconTextItems,
+        bordered: true
+    }
+};
+const Disabled = {
+    args: {
+        items: iconItems,
+        bordered: true,
+        disabled: true
+    }
+};
+export default ToggleGroupPrimitive_stories;
+export { Bordered, Default, Disabled, Ghost, IconOnly, IconOnlyGhost, Multiple, Outline, SizeMedium, SizeSmall, WithIconAndText, WithIconAndTextOutline };
+
+//# sourceMappingURL=ToggleGroupPrimitive.stories.js.map

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

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

package/ToggleGroup/primitives/index.d.ts

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

package/ToggleGroup/primitives/index.js

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

package/ToggleGroup/primitives/presenters/ToggleGroupPresenter.d.ts

@@ -0,0 +1,19 @@
+import type { ToggleGroupVm } from "../ToggleGroupPrimitive.js";
+import type { ToggleGroupItemParams } from "../../domains/index.js";
+interface ToggleGroupPresenterParams {
+    items: ToggleGroupItemParams[];
+    onChange?: (value: string | string[]) => void;
+}
+interface IToggleGroupPresenter {
+    vm: ToggleGroupVm;
+    init: (params: ToggleGroupPresenterParams) => void;
+    changeValue: (value: string | string[]) => void;
+}
+declare class ToggleGroupPresenter implements IToggleGroupPresenter {
+    private params?;
+    constructor();
+    init: (params: ToggleGroupPresenterParams) => void;
+    get vm(): ToggleGroupVm;
+    changeValue: (value: string | string[]) => void;
+}
+export { ToggleGroupPresenter, type ToggleGroupPresenterParams, type IToggleGroupPresenter };

package/ToggleGroup/primitives/presenters/ToggleGroupPresenter.js

@@ -0,0 +1,22 @@
+import { makeAutoObservable } from "mobx";
+import { ToggleGroupItem, ToggleGroupItemFormatter } from "../../domains/index.js";
+class ToggleGroupPresenter {
+    constructor(){
+        this.params = void 0;
+        this.init = (params)=>{
+            this.params = params;
+        };
+        this.changeValue = (value)=>{
+            this.params?.onChange?.(value);
+        };
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            items: (this.params?.items ?? []).map((item)=>ToggleGroupItem.create(item)).map((item)=>ToggleGroupItemFormatter.format(item))
+        };
+    }
+}
+export { ToggleGroupPresenter };
+
+//# sourceMappingURL=ToggleGroupPresenter.js.map

package/ToggleGroup/primitives/presenters/ToggleGroupPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup/primitives/presenters/ToggleGroupPresenter.js","sources":["../../../../src/ToggleGroup/primitives/presenters/ToggleGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { ToggleGroupVm } from \"../ToggleGroupPrimitive.js\";\nimport type { ToggleGroupItemParams } from \"../../domains/index.js\";\nimport { ToggleGroupItem, ToggleGroupItemFormatter } from \"../../domains/index.js\";\n\ninterface ToggleGroupPresenterParams {\n    items: ToggleGroupItemParams[];\n    onChange?: (value: string | string[]) => void;\n}\n\ninterface IToggleGroupPresenter {\n    vm: ToggleGroupVm;\n    init: (params: ToggleGroupPresenterParams) => void;\n    changeValue: (value: string | string[]) => void;\n}\n\nclass ToggleGroupPresenter implements IToggleGroupPresenter {\n    private params?: ToggleGroupPresenterParams = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init = (params: ToggleGroupPresenterParams) => {\n        this.params = params;\n    };\n\n    get vm(): ToggleGroupVm {\n        return {\n            items: (this.params?.items ?? [])\n                .map(item => ToggleGroupItem.create(item))\n                .map(item => ToggleGroupItemFormatter.format(item))\n        };\n    }\n\n    public changeValue = (value: string | string[]) => {\n        this.params?.onChange?.(value);\n    };\n}\n\nexport { ToggleGroupPresenter, type ToggleGroupPresenterParams, type IToggleGroupPresenter };\n"],"names":["ToggleGroupPresenter","undefined","params","value","makeAutoObservable","item","ToggleGroupItem","ToggleGroupItemFormatter"],"mappings":";;AAgBA,MAAMA;IAGF,aAAc;aAFN,MAAM,GAAgCC;aAMvC,IAAI,GAAG,CAACC;YACX,IAAI,CAAC,MAAM,GAAGA;QAClB;aAUO,WAAW,GAAG,CAACC;YAClB,IAAI,CAAC,MAAM,EAAE,WAAWA;QAC5B;QAjBIC,mBAAmB,IAAI;IAC3B;IAMA,IAAI,KAAoB;QACpB,OAAO;YACH,OAAQ,KAAI,CAAC,MAAM,EAAE,SAAS,EAAC,EAC1B,GAAG,CAACC,CAAAA,OAAQC,gBAAgB,MAAM,CAACD,OACnC,GAAG,CAACA,CAAAA,OAAQE,yBAAyB,MAAM,CAACF;QACrD;IACJ;AAKJ"}

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

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

package/ToggleGroup/primitives/presenters/index.js

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

package/ToggleGroup/primitives/useToggleGroup.d.ts

@@ -0,0 +1,5 @@
+import type { ToggleGroupPrimitiveProps } from "./ToggleGroupPrimitive.js";
+export declare const useToggleGroup: (props: ToggleGroupPrimitiveProps) => {
+    vm: import("./ToggleGroupPrimitive.js").ToggleGroupVm;
+    changeValue: (value: string | string[]) => void;
+};

package/ToggleGroup/primitives/useToggleGroup.js

@@ -0,0 +1,31 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { ToggleGroupPresenter } from "./presenters/ToggleGroupPresenter.js";
+const useToggleGroup = (props)=>{
+    const params = useMemo(()=>({
+            items: props.items,
+            onChange: props.onChange
+        }), [
+        props.items,
+        props.onChange
+    ]);
+    const presenter = useMemo(()=>new ToggleGroupPresenter(), []);
+    useEffect(()=>{
+        presenter.init(params);
+    }, [
+        params
+    ]);
+    const [vm, setVm] = useState(presenter.vm);
+    useEffect(()=>autorun(()=>{
+            setVm(presenter.vm);
+        }), [
+        presenter
+    ]);
+    return {
+        vm,
+        changeValue: presenter.changeValue
+    };
+};
+export { useToggleGroup };
+
+//# sourceMappingURL=useToggleGroup.js.map

package/ToggleGroup/primitives/useToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup/primitives/useToggleGroup.js","sources":["../../../src/ToggleGroup/primitives/useToggleGroup.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { ToggleGroupPrimitiveProps } from \"./ToggleGroupPrimitive.js\";\nimport type { ToggleGroupPresenterParams } from \"./presenters/ToggleGroupPresenter.js\";\nimport { ToggleGroupPresenter } from \"./presenters/ToggleGroupPresenter.js\";\n\nexport const useToggleGroup = (props: ToggleGroupPrimitiveProps) => {\n    const params: ToggleGroupPresenterParams = useMemo(\n        () => ({\n            items: props.items,\n            onChange: props.onChange as ((value: string | string[]) => void) | undefined\n        }),\n        [props.items, props.onChange]\n    );\n\n    const presenter = useMemo(() => new ToggleGroupPresenter(), []);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeValue: presenter.changeValue };\n};\n"],"names":["useToggleGroup","props","params","useMemo","presenter","ToggleGroupPresenter","useEffect","vm","setVm","useState","autorun"],"mappings":";;;AAMO,MAAMA,iBAAiB,CAACC;IAC3B,MAAMC,SAAqCC,QACvC,IAAO;YACH,OAAOF,MAAM,KAAK;YAClB,UAAUA,MAAM,QAAQ;QAC5B,IACA;QAACA,MAAM,KAAK;QAAEA,MAAM,QAAQ;KAAC;IAGjC,MAAMG,YAAYD,QAAQ,IAAM,IAAIE,wBAAwB,EAAE;IAE9DC,UAAU;QACNF,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;KAAO;IAEX,MAAM,CAACK,IAAIC,MAAM,GAAGC,SAASL,UAAU,EAAE;IAEzCE,UAAU,IACCI,QAAQ;YACXF,MAAMJ,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QAAEG;QAAI,aAAaH,UAAU,WAAW;IAAC;AACpD"}