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

package/Toggle/Toggle.stories.js

@@ -0,0 +1,200 @@
+import react, { useEffect, useState } from "react";
+import { ReactComponent } from "@webiny/icons/format_bold.svg";
+import { Tooltip } from "../Tooltip/index.js";
+import { Toggle } from "./index.js";
+const meta = {
+    title: "Components/Form/Toggle",
+    component: Toggle,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement(Tooltip.Provider, null, /*#__PURE__*/ react.createElement(Story, null))
+    ],
+    render: (args)=>{
+        const [checked, setChecked] = useState(args.checked);
+        return /*#__PURE__*/ react.createElement(Toggle, {
+            ...args,
+            checked: checked,
+            onChange: (value)=>setChecked(value)
+        });
+    }
+};
+const Toggle_stories = meta;
+const Default = {
+    args: {
+        label: "Toggle"
+    }
+};
+const Checked = {
+    args: {
+        label: "Toggle",
+        checked: true
+    }
+};
+const WithIcon = {
+    args: {
+        label: "Bold",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }
+};
+const WithIconChecked = {
+    args: {
+        label: "Bold",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        checked: true
+    }
+};
+const IconOnly = {
+    args: {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }
+};
+const IconOnlyChecked = {
+    args: {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        checked: true
+    }
+};
+const Outline = {
+    args: {
+        label: "Toggle",
+        variant: "outline"
+    }
+};
+const Ghost = {
+    args: {
+        label: "Toggle",
+        variant: "ghost"
+    }
+};
+const WithNotes = {
+    args: {
+        label: "Toggle",
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+const WithErrors = {
+    args: {
+        label: "Toggle",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+const Disabled = {
+    args: {
+        label: "Toggle",
+        disabled: true
+    }
+};
+const Documentation = {
+    render: (args)=>{
+        const [checked, setChecked] = useState(args.checked || false);
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: ""
+        });
+        useEffect(()=>{
+            setChecked(args.checked || false);
+        }, [
+            args.checked
+        ]);
+        const handleChange = (isChecked)=>{
+            setChecked(isChecked);
+            args.required && !isChecked ? setValidation({
+                isValid: false,
+                message: "This field is required"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        };
+        useEffect(()=>{
+            args.required && !checked ? setValidation({
+                isValid: false,
+                message: "This field is required"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        }, [
+            args.required,
+            checked
+        ]);
+        return /*#__PURE__*/ react.createElement(Toggle, {
+            ...args,
+            checked: checked,
+            onChange: handleChange,
+            validation: validation,
+            required: args.required
+        });
+    },
+    args: {
+        label: "Enable feature",
+        checked: false,
+        disabled: false,
+        required: true,
+        note: "Note: This setting can be changed at any time.",
+        validation: void 0
+    },
+    argTypes: {
+        label: {
+            description: "Label text displayed inside the toggle button",
+            control: "text"
+        },
+        checked: {
+            description: "Determines if the toggle is active",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the toggle when set to true",
+            control: "boolean"
+        },
+        required: {
+            description: "Makes the toggle required when set to true",
+            control: "boolean"
+        },
+        variant: {
+            description: "Visual style: primary (default), outline, ghost, ghost-negative",
+            control: "select",
+            options: [
+                "primary",
+                "outline",
+                "ghost",
+                "ghost-negative"
+            ]
+        },
+        size: {
+            description: "Size of the toggle button",
+            control: "select",
+            options: [
+                "sm",
+                "md",
+                "lg",
+                "xl"
+            ]
+        },
+        note: {
+            description: "Additional note text below the toggle",
+            control: "text"
+        },
+        validation: {
+            description: "Object containing validation state and message. Please refer to the example code for details on usage."
+        },
+        onChange: {
+            description: "Function called when the toggle state changes"
+        }
+    }
+};
+export default Toggle_stories;
+export { Checked, Default, Disabled, Documentation, Ghost, IconOnly, IconOnlyChecked, Outline, WithErrors, WithIcon, WithIconChecked, WithNotes };
+
+//# sourceMappingURL=Toggle.stories.js.map

package/Toggle/Toggle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle/Toggle.stories.js","sources":["../../src/Toggle/Toggle.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Toggle } from \"~/Toggle/index.js\";\n\nconst meta: Meta<typeof Toggle> = {\n    title: \"Components/Form/Toggle\",\n    component: Toggle,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Toggle {...args} checked={checked} onChange={value => setChecked(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Toggle>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        label: \"Toggle\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        label: \"Toggle\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Toggle\n                {...args}\n                checked={checked}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Enable feature\",\n        checked: false,\n        disabled: false,\n        required: true,\n        note: \"Note: This setting can be changed at any time.\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text displayed inside the toggle button\",\n            control: \"text\"\n        },\n        checked: {\n            description: \"Determines if the toggle is active\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the toggle when set to true\",\n            control: \"boolean\"\n        },\n        required: {\n            description: \"Makes the toggle required when set to true\",\n            control: \"boolean\"\n        },\n        variant: {\n            description: \"Visual style: primary (default), outline, ghost, ghost-negative\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of the toggle button\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        note: {\n            description: \"Additional note text below the toggle\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Function called when the toggle state changes\"\n        }\n    }\n};\n"],"names":["meta","Toggle","Story","Tooltip","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","IconOnly","IconOnlyChecked","Outline","Ghost","WithNotes","WithErrors","Disabled","Documentation","validation","setValidation","useEffect","handleChange","isChecked","undefined"],"mappings":"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"}

package/Toggle/domains/ToggleItem.d.ts

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

package/Toggle/domains/ToggleItem.js

@@ -0,0 +1,47 @@
+import { generateId } from "../../utils.js";
+class ToggleItem {
+    constructor(data){
+        this._id = data.id;
+        this._label = data.label;
+        this._value = data.value;
+        this._checked = data.checked;
+        this._disabled = data.disabled;
+        this._icon = data.icon;
+        this._iconPosition = data.iconPosition;
+    }
+    static create(data) {
+        return new ToggleItem({
+            id: generateId(data.id),
+            label: data.label,
+            value: data.value,
+            checked: data.checked ?? Boolean(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 checked() {
+        return this._checked;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    get icon() {
+        return this._icon;
+    }
+    get iconPosition() {
+        return this._iconPosition;
+    }
+}
+export { ToggleItem };
+
+//# sourceMappingURL=ToggleItem.js.map

package/Toggle/domains/ToggleItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle/domains/ToggleItem.js","sources":["../../../src/Toggle/domains/ToggleItem.ts"],"sourcesContent":["import type { ToggleItemDto } from \"./ToggleItemDto.js\";\nimport { generateId } from \"~/utils.js\";\n\nexport class ToggleItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string | number;\n    private readonly _checked: boolean;\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: any;\n        checked: boolean;\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._checked = data.checked;\n        this._disabled = data.disabled;\n        this._icon = data.icon;\n        this._iconPosition = data.iconPosition;\n    }\n\n    static create(data: ToggleItemDto): ToggleItem {\n        return new ToggleItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            checked: data.checked ?? Boolean(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 checked() {\n        return this._checked;\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":["ToggleItem","data","generateId","Boolean"],"mappings":";AAGO,MAAMA;IAST,YAAsBC,IAQrB,CAAE;QACC,IAAI,CAAC,GAAG,GAAGA,KAAK,EAAE;QAClB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,QAAQ,GAAGA,KAAK,OAAO;QAC5B,IAAI,CAAC,SAAS,GAAGA,KAAK,QAAQ;QAC9B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;QACtB,IAAI,CAAC,aAAa,GAAGA,KAAK,YAAY;IAC1C;IAEA,OAAO,OAAOA,IAAmB,EAAc;QAC3C,OAAO,IAAID,WAAW;YAClB,IAAIE,WAAWD,KAAK,EAAE;YACtB,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,SAASA,KAAK,OAAO,IAAIE,QAAQF,KAAK,KAAK;YAC3C,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,UAAU;QACV,OAAO,IAAI,CAAC,QAAQ;IACxB;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/Toggle/domains/ToggleItemDto.d.ts

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

package/Toggle/domains/ToggleItemFormatted.d.ts

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

package/Toggle/domains/ToggleItemMapper.d.ts

@@ -0,0 +1,5 @@
+import type { ToggleItemFormatted } from "./ToggleItemFormatted.js";
+import type { ToggleItem } from "./ToggleItem.js";
+export declare class ToggleItemMapper {
+    static toFormatted(item: ToggleItem): ToggleItemFormatted;
+}

package/Toggle/domains/ToggleItemMapper.js

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

package/Toggle/domains/ToggleItemMapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle/domains/ToggleItemMapper.js","sources":["../../../src/Toggle/domains/ToggleItemMapper.ts"],"sourcesContent":["import type { ToggleItemFormatted } from \"./ToggleItemFormatted.js\";\nimport type { ToggleItem } from \"./ToggleItem.js\";\n\nexport class ToggleItemMapper {\n    static toFormatted(item: ToggleItem): ToggleItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: item.value,\n            checked: item.checked,\n            disabled: item.disabled,\n            icon: item.icon,\n            iconPosition: item.iconPosition\n        };\n    }\n}\n"],"names":["ToggleItemMapper","item"],"mappings":"AAGO,MAAMA;IACT,OAAO,YAAYC,IAAgB,EAAuB;QACtD,OAAO;YACH,IAAIA,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,SAASA,KAAK,OAAO;YACrB,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY;QACnC;IACJ;AACJ"}

package/Toggle/domains/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ToggleItem.js";
+export type * from "./ToggleItemDto.js";
+export type * from "./ToggleItemFormatted.js";
+export * from "./ToggleItemMapper.js";

package/Toggle/domains/index.js

@@ -0,0 +1,2 @@
+export * from "./ToggleItem.js";
+export * from "./ToggleItemMapper.js";

package/Toggle/index.d.ts

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

package/Toggle/index.js

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

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,112 @@
+import { Toggle } from "radix-ui";
+import { cn, cva, makeDecoratable } from "../../utils.js";
+import { useToggle } from "./useToggle.js";
+import * as __rspack_external_react from "react";
+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 = (0, __rspack_external_react.useMemo)(()=>!label && icon ? "icon" : "text", [
+        label,
+        icon
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement(Toggle.Root, {
+        id: id,
+        pressed: checked,
+        className: cn(toggleVariants({
+            variant,
+            size,
+            contentLayout
+        }), className),
+        disabled: disabled,
+        onPressedChange: changeChecked
+    }, "end" !== iconPosition && icon, label, "end" === iconPosition && icon);
+};
+const DecoratableTogglePrimitive = (props)=>{
+    const { vm, changeChecked } = useToggle(props);
+    if (!vm.item) return null;
+    return /*#__PURE__*/ __rspack_external_react.createElement(ToggleRenderer, {
+        ...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,"file":"Toggle/primitives/TogglePrimitive.js","sources":["../../../src/Toggle/primitives/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"],"names":["toggleVariants","cva","ToggleRenderer","id","label","icon","iconPosition","changeChecked","className","variant","size","disabled","checked","contentLayout","useMemo","TogglePrimitives","cn","DecoratableTogglePrimitive","props","vm","useToggle","TogglePrimitive","makeDecoratable"],"mappings":";;;;AAWA,MAAMA,iBAAiBC,IACnB;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;YACD,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;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAqBJ,MAAMC,iBAAiB,CAAC,EACpBC,EAAE,EACFC,KAAK,EACLC,IAAI,EACJC,YAAY,EACZC,aAAa,EACbC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACW;IAClB,MAAMC,gBAAgBC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAyB,IACpC,CAACV,SAASC,OAAO,SAAS,QAClC;QAACD;QAAOC;KAAK;IAEhB,OAAO,WAAP,GACI,sCAACU,OAAAA,IAAqB;QAClB,IAAIZ;QACJ,SAASS;QACT,WAAWI,GAAGhB,eAAe;YAAES;YAASC;YAAMG;QAAc,IAAIL;QAChE,UAAUG;QACV,iBAAiBJ;OAEhBD,AAAiB,UAAjBA,gBAA0BD,MAC1BD,OACAE,AAAiB,UAAjBA,gBAA0BD;AAGvC;AAKA,MAAMY,6BAA6B,CAACC;IAChC,MAAM,EAAEC,EAAE,EAAEZ,aAAa,EAAE,GAAGa,UAAUF;IAExC,IAAI,CAACC,GAAG,IAAI,EACR,OAAO;IAGX,OAAO,WAAP,GAAO,sCAACjB,gBAAcA;QAAE,GAAGgB,KAAK;QAAG,GAAGC,GAAG,IAAI;QAAE,eAAeZ;;AAClE;AACA,MAAMc,kBAAkBC,gBAAgB,mBAAmBL"}

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;