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

package/ToggleGroup/ToggleGroup.stories.js

@@ -0,0 +1,208 @@
+import React, { useState } from "react";
+import { ReactComponent as BoldIcon } from "@webiny/icons/format_bold.svg";
+import { ReactComponent as ItalicIcon } from "@webiny/icons/format_italic.svg";
+import { ReactComponent as UnderlineIcon } from "@webiny/icons/format_underlined.svg";
+import { ReactComponent as AlignLeftIcon } from "@webiny/icons/format_align_left.svg";
+import { ReactComponent as AlignCenterIcon } from "@webiny/icons/format_align_center.svg";
+import { ReactComponent as AlignRightIcon } 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(AlignLeftIcon, null)
+}, {
+  value: "center",
+  icon: /*#__PURE__*/React.createElement(AlignCenterIcon, null)
+}, {
+  value: "right",
+  icon: /*#__PURE__*/React.createElement(AlignRightIcon, null)
+}];
+const iconTextItems = [{
+  value: "bold",
+  label: "Bold",
+  icon: /*#__PURE__*/React.createElement(BoldIcon, null)
+}, {
+  value: "italic",
+  label: "Italic",
+  icon: /*#__PURE__*/React.createElement(ItalicIcon, null)
+}, {
+  value: "underline",
+  label: "Underline",
+  icon: /*#__PURE__*/React.createElement(UnderlineIcon, 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, Object.assign({}, args, {
+      type: "single",
+      value: value,
+      onChange: v => setValue(v)
+    }));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    items: textItems,
+    label: "Text formatting",
+    bordered: true
+  }
+};
+export const IconOnly = {
+  args: {
+    items: iconItems,
+    label: "Alignment",
+    bordered: true
+  }
+};
+export const IconOnlyGhost = {
+  args: {
+    items: iconItems,
+    label: "Alignment",
+    variant: "ghost",
+    bordered: true
+  }
+};
+export const WithIconAndText = {
+  args: {
+    items: iconTextItems,
+    label: "Text formatting",
+    bordered: true
+  }
+};
+export const Outline = {
+  args: {
+    items: textItems,
+    label: "Text formatting",
+    variant: "outline",
+    bordered: true
+  }
+};
+export const Ghost = {
+  args: {
+    items: textItems,
+    label: "Text formatting",
+    variant: "ghost",
+    bordered: true
+  }
+};
+export const WithDescription = {
+  args: {
+    items: iconTextItems,
+    label: "Text formatting",
+    description: "Choose one or more formatting options.",
+    bordered: true
+  }
+};
+export const WithNotes = {
+  args: {
+    items: iconItems,
+    label: "Alignment",
+    note: "Note: Formatting applies to selected text only.",
+    bordered: true
+  }
+};
+export const WithErrors = {
+  args: {
+    items: textItems,
+    label: "Text formatting",
+    bordered: true,
+    validation: {
+      isValid: false,
+      message: "Please select a formatting option."
+    }
+  }
+};
+export const Multiple = {
+  render: args => {
+    const [value, setValue] = useState([]);
+    return /*#__PURE__*/React.createElement(ToggleGroup, Object.assign({}, args, {
+      type: "multiple",
+      value: value,
+      onChange: v => setValue(v)
+    }));
+  },
+  args: {
+    items: iconTextItems,
+    label: "Text formatting",
+    bordered: true
+  }
+};
+export const Disabled = {
+  args: {
+    items: iconItems,
+    label: "Alignment",
+    bordered: true,
+    disabled: true
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [value, setValue] = useState("");
+    return /*#__PURE__*/React.createElement(ToggleGroup, Object.assign({}, 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"
+    }
+  }
+};
+
+//# sourceMappingURL=ToggleGroup.stories.js.map

package/ToggleGroup/ToggleGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ReactComponent","BoldIcon","ItalicIcon","UnderlineIcon","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","Tooltip","ToggleGroup","textItems","value","label","iconItems","icon","createElement","iconTextItems","meta","title","component","parameters","layout","decorators","Story","Provider","render","args","setValue","Object","assign","type","onChange","v","Default","items","bordered","IconOnly","IconOnlyGhost","variant","WithIconAndText","Outline","Ghost","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Multiple","Disabled","disabled","Documentation","argTypes","control","options","size"],"sources":["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"],"mappings":"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","ignoreList":[]}

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";
+}

package/ToggleGroup/domains/ToggleGroupItem.js

@@ -0,0 +1,41 @@
+import { generateId } from "../../utils.js";
+export 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;
+  }
+}
+
+//# sourceMappingURL=ToggleGroupItem.js.map

package/ToggleGroup/domains/ToggleGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateId","ToggleGroupItem","constructor","data","_id","id","_label","label","_value","value","_disabled","disabled","_icon","icon","_iconPosition","iconPosition","create"],"sources":["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"],"mappings":"AACA,SAASA,UAAU;AAEnB,OAAO,MAAMC,eAAe,CAAC;EAQfC,WAAWA,CAACC,IAOrB,EAAE;IACC,IAAI,CAACC,GAAG,GAAGD,IAAI,CAACE,EAAE;IAClB,IAAI,CAACC,MAAM,GAAGH,IAAI,CAACI,KAAK;IACxB,IAAI,CAACC,MAAM,GAAGL,IAAI,CAACM,KAAK;IACxB,IAAI,CAACC,SAAS,GAAGP,IAAI,CAACQ,QAAQ;IAC9B,IAAI,CAACC,KAAK,GAAGT,IAAI,CAACU,IAAI;IACtB,IAAI,CAACC,aAAa,GAAGX,IAAI,CAACY,YAAY;EAC1C;EAEA,OAAOC,MAAMA,CAACb,IAA2B,EAAmB;IACxD,OAAO,IAAIF,eAAe,CAAC;MACvBI,EAAE,EAAEL,UAAU,CAACG,IAAI,CAACE,EAAE,CAAC;MACvBE,KAAK,EAAEJ,IAAI,CAACI,KAAK;MACjBE,KAAK,EAAEN,IAAI,CAACM,KAAK;MACjBE,QAAQ,EAAER,IAAI,CAACQ,QAAQ,IAAI,KAAK;MAChCE,IAAI,EAAEV,IAAI,CAACU,IAAI;MACfE,YAAY,EAAEZ,IAAI,CAACY,YAAY,IAAI;IACvC,CAAC,CAAC;EACN;EAEA,IAAIV,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACD,GAAG;EACnB;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIG,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACD,SAAS;EACzB;EAEA,IAAIG,IAAIA,CAAA,EAAG;IACP,OAAO,IAAI,CAACD,KAAK;EACrB;EAEA,IAAIG,YAAYA,CAAA,EAAG;IACf,OAAO,IAAI,CAACD,aAAa;EAC7B;AACJ","ignoreList":[]}

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/ToggleGroupItemFormatted.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=ToggleGroupItemFormatted.js.map

package/ToggleGroup/domains/ToggleGroupItemFormatted.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["ToggleGroupItemFormatted.ts"],"sourcesContent":["import type React from \"react\";\n\nexport interface ToggleGroupItemFormatted {\n    id: string;\n    label?: string | React.ReactNode;\n    value: string;\n    disabled: boolean;\n    icon?: React.ReactNode;\n    iconPosition: \"start\" | \"end\";\n}\n"],"mappings":"","ignoreList":[]}

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,14 @@
+export class ToggleGroupItemFormatter {
+  static format(item) {
+    return {
+      id: item.id,
+      label: item.label,
+      value: item.value,
+      disabled: item.disabled,
+      icon: item.icon,
+      iconPosition: item.iconPosition
+    };
+  }
+}
+
+//# sourceMappingURL=ToggleGroupItemFormatter.js.map

package/ToggleGroup/domains/ToggleGroupItemFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ToggleGroupItemFormatter","format","item","id","label","value","disabled","icon","iconPosition"],"sources":["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"],"mappings":"AAGA,OAAO,MAAMA,wBAAwB,CAAC;EAClC,OAAOC,MAAMA,CAACC,IAAqB,EAA4B;IAC3D,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;MACjBC,KAAK,EAAEH,IAAI,CAACG,KAAK;MACjBC,QAAQ,EAAEJ,IAAI,CAACI,QAAQ;MACvBC,IAAI,EAAEL,IAAI,CAACK,IAAI;MACfC,YAAY,EAAEN,IAAI,CAACM;IACvB,CAAC;EACL;AACJ","ignoreList":[]}

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/ToggleGroupItemParams.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=ToggleGroupItemParams.js.map

package/ToggleGroup/domains/ToggleGroupItemParams.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["ToggleGroupItemParams.ts"],"sourcesContent":["import type React from \"react\";\n\nexport interface ToggleGroupItemParams {\n    id?: string;\n    label?: React.ReactNode;\n    value: string;\n    disabled?: boolean;\n    icon?: React.ReactNode;\n    iconPosition?: \"start\" | \"end\";\n}\n"],"mappings":"","ignoreList":[]}

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,4 @@
+export * from "./ToggleGroupItem.js";
+export * from "./ToggleGroupItemFormatter.js";
+
+//# sourceMappingURL=index.js.map

package/ToggleGroup/domains/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ToggleGroupItem.js\";\nexport type * from \"./ToggleGroupItemFormatted.js\";\nexport type * from \"./ToggleGroupItemParams.js\";\nexport * from \"./ToggleGroupItemFormatter.js\";\n"],"mappings":"AAAA;AAGA","ignoreList":[]}

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,4 @@
+export * from "./ToggleGroup.js";
+export * from "./primitives/index.js";
+
+//# sourceMappingURL=index.js.map

package/ToggleGroup/index.js.map

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

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 * as React from "react";
+import { useMemo } from "react";
+import { ToggleGroup as ToggleGroupPrimitives } from "radix-ui";
+import { cn, cva, makeDecoratable } from "../../utils.js";
+import { useToggleGroup } from "./useToggleGroup.js";
+/**
+ * Toggle Group Item
+ */
+
+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"
+  }
+});
+
+/**
+ * Toggle Group Container
+ */
+
+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"
+  }
+});
+
+/**
+ * Toggle Group Renderer
+ */
+
+const ToggleGroupRenderer = ({
+  items,
+  changeValue,
+  value,
+  type = "single",
+  variant = "primary",
+  size = "md",
+  bordered = false,
+  disabled,
+  className
+}) => {
+  const containerClass = cn(toggleGroupVariants({
+    bordered,
+    variant
+  }), className);
+  const radixProps = useMemo(() => {
+    if (type === "multiple") {
+      return {
+        type: "multiple",
+        value: value ?? [],
+        onValueChange: changeValue
+      };
+    }
+    return {
+      type: "single",
+      value: value ?? "",
+      onValueChange: changeValue
+    };
+  }, [type, value, changeValue]);
+  return /*#__PURE__*/React.createElement(ToggleGroupPrimitives.Root, Object.assign({}, radixProps, {
+    disabled: disabled,
+    className: containerClass
+  }), items.map(item => {
+    const contentLayout = !item.label && item.icon ? "icon" : "text";
+    return /*#__PURE__*/React.createElement(ToggleGroupPrimitives.Item, {
+      key: item.id,
+      value: item.value,
+      disabled: item.disabled,
+      className: cn(toggleGroupItemVariants({
+        variant,
+        size,
+        contentLayout
+      }))
+    }, item.iconPosition !== "end" && item.icon, item.label, item.iconPosition === "end" && item.icon);
+  }));
+};
+
+/**
+ * Toggle Group Primitive
+ */
+
+const DecoratableToggleGroupPrimitive = props => {
+  const {
+    vm,
+    changeValue
+  } = useToggleGroup(props);
+  return /*#__PURE__*/React.createElement(ToggleGroupRenderer, Object.assign({}, 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,"names":["React","useMemo","ToggleGroup","ToggleGroupPrimitives","cn","cva","makeDecoratable","useToggleGroup","toggleGroupItemVariants","variants","variant","primary","outline","ghost","size","sm","md","contentLayout","text","icon","compoundVariants","className","defaultVariants","toggleGroupVariants","bordered","true","false","ToggleGroupRenderer","items","changeValue","value","type","disabled","containerClass","radixProps","onValueChange","createElement","Root","Object","assign","map","item","label","Item","key","id","iconPosition","DecoratableToggleGroupPrimitive","props","vm","ToggleGroupPrimitive"],"sources":["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"],"mappings":"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","ignoreList":[]}

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;