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

package/Toggle/primitives/TogglePrimitive.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Toggle as TogglePrimitives } from "radix-ui";
+import { type VariantProps } from "../../utils.js";
+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;
+} & 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;
+};
+type TogglePrimitivVm = {
+    item?: ToggleItemFormatted;
+};
+declare const TogglePrimitive: ((props: TogglePrimitiveProps) => React.JSX.Element | null) & {
+    original: (props: TogglePrimitiveProps) => React.JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: TogglePrimitiveProps) => React.JSX.Element | null) & {
+        original: (props: TogglePrimitiveProps) => React.JSX.Element | null;
+        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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { TogglePrimitive, type TogglePrimitiveProps, type TogglePrimitivVm };

package/Toggle/primitives/TogglePrimitive.js

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { Toggle as TogglePrimitives } from "radix-ui";
+import { cn, cva, makeDecoratable } from "../../utils.js";
+import { useToggle } from "./useToggle.js";
+/**
+ * Toggle Renderer
+ */
+
+const toggleVariants = cva(["border-sm inline-flex items-center justify-center gap-xs whitespace-nowrap font-sans cursor-pointer transition-colors", "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-dimmed", "data-[state=on]:bg-neutral-muted"],
+      "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 rounded-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 rounded-md [&>svg]:size-md", "py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"],
+      lg: ["text-md rounded-md [&>svg]:size-md-plus", "py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]"],
+      xl: ["text-lg font-semibold rounded-md [&>svg]:size-lg", "py-[calc(theme(padding.md-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(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)))]"
+  }, {
+    size: "lg",
+    contentLayout: "icon",
+    className: "p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]"
+  }, {
+    size: "xl",
+    contentLayout: "icon",
+    className: "p-[calc(var(--padding-md)-(var(--border-width-sm)))]"
+  }],
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+const ToggleRenderer = ({
+  id,
+  label,
+  icon,
+  iconPosition,
+  changeChecked,
+  className,
+  variant,
+  size,
+  disabled,
+  checked
+}) => {
+  const contentLayout = useMemo(() => {
+    return !label && icon ? "icon" : "text";
+  }, [label, icon]);
+  return /*#__PURE__*/React.createElement(TogglePrimitives.Root, {
+    id: id,
+    pressed: checked,
+    className: cn(toggleVariants({
+      variant,
+      size,
+      contentLayout
+    }), className),
+    disabled: disabled,
+    onPressedChange: changeChecked
+  }, iconPosition !== "end" && icon, label, iconPosition === "end" && icon);
+};
+
+/**
+ * Toggle
+ */
+const DecoratableTogglePrimitive = props => {
+  const {
+    vm,
+    changeChecked
+  } = useToggle(props);
+  if (!vm.item) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToggleRenderer, Object.assign({}, props, vm.item, {
+    changeChecked: changeChecked
+  }));
+};
+const TogglePrimitive = makeDecoratable("TogglePrimitive", DecoratableTogglePrimitive);
+export { TogglePrimitive };
+
+//# sourceMappingURL=TogglePrimitive.js.map

package/Toggle/primitives/TogglePrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Toggle","TogglePrimitives","cn","cva","makeDecoratable","useToggle","toggleVariants","variants","variant","primary","outline","ghost","size","sm","md","lg","xl","contentLayout","text","icon","compoundVariants","className","defaultVariants","ToggleRenderer","id","label","iconPosition","changeChecked","disabled","checked","createElement","Root","pressed","onPressedChange","DecoratableTogglePrimitive","props","vm","item","Object","assign","TogglePrimitive"],"sources":["TogglePrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { Toggle as TogglePrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { useToggle } from \"./useToggle.js\";\nimport type { ToggleItemDto, ToggleItemFormatted } from \"../domains/index.js\";\n\n/**\n * Toggle Renderer\n */\n\nconst toggleVariants = cva(\n    [\n        \"border-sm inline-flex items-center justify-center gap-xs whitespace-nowrap font-sans cursor-pointer transition-colors\",\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-dimmed\",\n                    \"data-[state=on]:bg-neutral-muted\"\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 rounded-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 rounded-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                lg: [\n                    \"text-md rounded-md [&>svg]:size-md-plus\",\n                    \"py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n                ],\n                xl: [\n                    \"text-lg font-semibold rounded-md [&>svg]:size-lg\",\n                    \"py-[calc(theme(padding.md-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(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                size: \"lg\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\ntype TogglePrimitiveProps = Omit<\n    TogglePrimitives.ToggleProps,\n    \"defaultPressed\" | \"onPressedChange\" | \"onChange\" | \"pressed\"\n> &\n    VariantProps<typeof toggleVariants> &\n    ToggleItemDto & {\n        onChange?: (checked: boolean) => void;\n    };\n\ntype TogglePrimitivVm = {\n    item?: ToggleItemFormatted;\n};\n\ntype ToggleRendererProps = Omit<TogglePrimitiveProps, \"onPressedChange\" | \"contentLayout\"> &\n    NonNullable<TogglePrimitivVm[\"item\"]> & {\n        changeChecked: (checked: boolean) => void;\n    };\n\nconst ToggleRenderer = ({\n    id,\n    label,\n    icon,\n    iconPosition,\n    changeChecked,\n    className,\n    variant,\n    size,\n    disabled,\n    checked\n}: ToggleRendererProps) => {\n    const contentLayout = useMemo<\"text\" | \"icon\">(() => {\n        return !label && icon ? \"icon\" : \"text\";\n    }, [label, icon]);\n\n    return (\n        <TogglePrimitives.Root\n            id={id}\n            pressed={checked}\n            className={cn(toggleVariants({ variant, size, contentLayout }), className)}\n            disabled={disabled}\n            onPressedChange={changeChecked}\n        >\n            {iconPosition !== \"end\" && icon}\n            {label}\n            {iconPosition === \"end\" && icon}\n        </TogglePrimitives.Root>\n    );\n};\n\n/**\n * Toggle\n */\nconst DecoratableTogglePrimitive = (props: TogglePrimitiveProps) => {\n    const { vm, changeChecked } = useToggle(props);\n\n    if (!vm.item) {\n        return null;\n    }\n\n    return <ToggleRenderer {...props} {...vm.item} changeChecked={changeChecked} />;\n};\nconst TogglePrimitive = makeDecoratable(\"TogglePrimitive\", DecoratableTogglePrimitive);\n\nexport { TogglePrimitive, type TogglePrimitiveProps, type TogglePrimitivVm };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { TogglePrimitive } from "./TogglePrimitive.js";
+declare const meta: Meta<typeof TogglePrimitive>;
+export default meta;
+type Story = StoryObj<typeof TogglePrimitive>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const WithIcon: Story;
+export declare const WithIconChecked: Story;
+export declare const WithIconTrailing: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyChecked: Story;
+export declare const Outline: Story;
+export declare const OutlineChecked: Story;
+export declare const Ghost: Story;
+export declare const GhostChecked: Story;
+export declare const SizeSmall: Story;
+export declare const SizeLarge: Story;
+export declare const SizeXL: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;

package/Toggle/primitives/TogglePrimitive.stories.js

@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import { ReactComponent as BoldIcon } 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, Object.assign({}, args, {
+      checked: checked,
+      onChange: value => setChecked(value)
+    }));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    label: "Toggle"
+  }
+};
+export const Checked = {
+  args: {
+    label: "Toggle",
+    checked: true
+  }
+};
+export const WithIcon = {
+  args: {
+    label: "Bold",
+    icon: /*#__PURE__*/React.createElement(BoldIcon, null)
+  }
+};
+export const WithIconChecked = {
+  args: {
+    label: "Bold",
+    icon: /*#__PURE__*/React.createElement(BoldIcon, null),
+    checked: true
+  }
+};
+export const WithIconTrailing = {
+  args: {
+    label: "Bold",
+    icon: /*#__PURE__*/React.createElement(BoldIcon, null),
+    iconPosition: "end"
+  }
+};
+export const IconOnly = {
+  args: {
+    icon: /*#__PURE__*/React.createElement(BoldIcon, null)
+  }
+};
+export const IconOnlyChecked = {
+  args: {
+    icon: /*#__PURE__*/React.createElement(BoldIcon, null),
+    checked: true
+  }
+};
+export const Outline = {
+  args: {
+    label: "Toggle",
+    variant: "outline"
+  }
+};
+export const OutlineChecked = {
+  args: {
+    label: "Toggle",
+    variant: "outline",
+    checked: true
+  }
+};
+export const Ghost = {
+  args: {
+    label: "Toggle",
+    variant: "ghost"
+  }
+};
+export const GhostChecked = {
+  args: {
+    label: "Toggle",
+    variant: "ghost",
+    checked: true
+  }
+};
+export const SizeSmall = {
+  args: {
+    label: "Toggle",
+    size: "sm"
+  }
+};
+export const SizeLarge = {
+  args: {
+    label: "Toggle",
+    size: "lg"
+  }
+};
+export const SizeXL = {
+  args: {
+    label: "Toggle",
+    size: "xl"
+  }
+};
+export const Disabled = {
+  args: {
+    label: "Toggle",
+    disabled: true
+  }
+};
+export const DisabledChecked = {
+  args: {
+    label: "Toggle",
+    checked: true,
+    disabled: true
+  }
+};
+
+//# sourceMappingURL=TogglePrimitive.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ReactComponent","BoldIcon","TogglePrimitive","meta","title","component","parameters","layout","render","args","checked","setChecked","createElement","Object","assign","onChange","value","Default","label","Checked","WithIcon","icon","WithIconChecked","WithIconTrailing","iconPosition","IconOnly","IconOnlyChecked","Outline","variant","OutlineChecked","Ghost","GhostChecked","SizeSmall","size","SizeLarge","SizeXL","Disabled","disabled","DisabledChecked"],"sources":["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"],"mappings":"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","ignoreList":[]}

package/Toggle/primitives/index.d.ts

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

package/Toggle/primitives/index.js

@@ -0,0 +1,3 @@
+export * from "./TogglePrimitive.js";
+
+//# sourceMappingURL=index.js.map

package/Toggle/primitives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./TogglePrimitive.js\";\n"],"mappings":"AAAA","ignoreList":[]}

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 {
+  params = undefined;
+  item = undefined;
+  constructor() {
+    makeAutoObservable(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
+    });
+  };
+  get vm() {
+    return {
+      item: this.item ? ToggleItemMapper.toFormatted(this.item) : undefined
+    };
+  }
+  changeChecked = checked => {
+    this.params?.onChange?.(checked);
+  };
+}
+export { TogglePresenter };
+
+//# sourceMappingURL=TogglePresenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","ToggleItem","ToggleItemMapper","TogglePresenter","params","undefined","item","constructor","init","create","id","label","value","checked","disabled","icon","iconPosition","vm","toFormatted","changeChecked","onChange"],"sources":["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"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAGzC,SAASC,UAAU,EAAEC,gBAAgB;AAYrC,MAAMC,eAAe,CAA6B;EACtCC,MAAM,GAA2BC,SAAS;EAC1CC,IAAI,GAAgBD,SAAS;EAErCE,WAAWA,CAAA,EAAG;IACVP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOQ,IAAI,GAAIJ,MAA6B,IAAK;IAC7C,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACE,IAAI,GAAGL,UAAU,CAACQ,MAAM,CAAC;MAC1BC,EAAE,EAAEN,MAAM,CAACM,EAAE;MACbC,KAAK,EAAEP,MAAM,CAACO,KAAK;MACnBC,KAAK,EAAER,MAAM,CAACQ,KAAK;MACnBC,OAAO,EAAET,MAAM,CAACS,OAAO;MACvBC,QAAQ,EAAEV,MAAM,CAACU,QAAQ;MACzBC,IAAI,EAAEX,MAAM,CAACW,IAAI;MACjBC,YAAY,EAAEZ,MAAM,CAACY;IACzB,CAAC,CAAC;EACN,CAAC;EAED,IAAIC,EAAEA,CAAA,EAAG;IACL,OAAO;MACHX,IAAI,EAAE,IAAI,CAACA,IAAI,GAAGJ,gBAAgB,CAACgB,WAAW,CAAC,IAAI,CAACZ,IAAI,CAAC,GAAGD;IAChE,CAAC;EACL;EAEOc,aAAa,GAAIN,OAAgB,IAAK;IACzC,IAAI,CAACT,MAAM,EAAEgB,QAAQ,GAAGP,OAAO,CAAC;EACpC,CAAC;AACL;AAEA,SAASV,eAAe","ignoreList":[]}

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

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

package/Toggle/primitives/presenters/index.js

@@ -0,0 +1,3 @@
+export * from "./TogglePresenter.js";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./TogglePresenter.js\";\n"],"mappings":"AAAA","ignoreList":[]}

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,35 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { TogglePresenter } from "./presenters/TogglePresenter.js";
+export 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(() => {
+    return autorun(() => {
+      setVm(presenter.vm);
+    });
+  }, [presenter]);
+  return {
+    vm,
+    changeChecked: presenter.changeChecked
+  };
+};
+
+//# sourceMappingURL=useToggle.js.map

package/Toggle/primitives/useToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","autorun","TogglePresenter","useToggle","props","params","id","label","value","checked","disabled","icon","iconPosition","onChange","presenter","init","vm","setVm","changeChecked"],"sources":["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"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,eAAe;AAExB,OAAO,MAAMC,SAAS,GAAIC,KAA2B,IAAK;EACtD,MAAMC,MAA6B,GAAGN,OAAO,CACzC,OAAO;IACHO,EAAE,EAAEF,KAAK,CAACE,EAAE;IACZC,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,KAAK,EAAEJ,KAAK,CAACI,KAAK;IAClBC,OAAO,EAAEL,KAAK,CAACK,OAAO;IACtBC,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,IAAI,EAAEP,KAAK,CAACO,IAAI;IAChBC,YAAY,EAAER,KAAK,CAACQ,YAAY;IAChCC,QAAQ,EAAET,KAAK,CAACS;EACpB,CAAC,CAAC,EACF,CACIT,KAAK,CAACE,EAAE,EACRF,KAAK,CAACG,KAAK,EACXH,KAAK,CAACI,KAAK,EACXJ,KAAK,CAACK,OAAO,EACbL,KAAK,CAACM,QAAQ,EACdN,KAAK,CAACO,IAAI,EACVP,KAAK,CAACQ,YAAY,EAClBR,KAAK,CAACS,QAAQ,CAEtB,CAAC;EAED,MAAMC,SAAS,GAAGf,OAAO,CAAC,MAAM;IAC5B,MAAMe,SAAS,GAAG,IAAIZ,eAAe,CAAC,CAAC;IACvCY,SAAS,CAACC,IAAI,CAACV,MAAM,CAAC;IACtB,OAAOS,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACE,EAAE,EAAEC,KAAK,CAAC,GAAGjB,QAAQ,CAACc,SAAS,CAACE,EAAE,CAAC;EAE1ClB,SAAS,CAAC,MAAM;IACZgB,SAAS,CAACC,IAAI,CAACV,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBgB,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE,EAAE;IAAEE,aAAa,EAAEJ,SAAS,CAACI;EAAc,CAAC;AACzD,CAAC","ignoreList":[]}

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,47 @@
+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(() => validationIsValid === false, [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, Object.assign({}, 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,"names":["React","useMemo","makeDecoratable","ToggleGroupPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableToggleGroup","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","ToggleGroup"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,oBAAoB;AAE7B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,sBAAsB,GAAGA,CAAC;EAC5BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACW,CAAC,KAAK;EACpB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC;EAAQ,gBACnBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IACrBoB,IAAI,EAAEd,WAAY;IAClBI,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAC;EAAY,CACzB,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAC;EAAoB,CACjC,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACnB,oBAAoB,EAAAsB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA;EAAS,EAAE,CAAC,eACvDd,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMa,WAAW,GAAGzB,eAAe,CAAC,aAAa,EAAEM,sBAAsB,CAAC;AAE1E,SAASmB,WAAW","ignoreList":[]}

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;