@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/SegmentedControl/SegmentedControl.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","SegmentedControl","Icon","ReactComponent","LockIcon","meta","title","component","items","label","value","itemsWithIcons","icon","createElement","Default","render","args","setValue","Object","assign","onChange","VariantLight","variant","VariantDimmed","VariantGhost","className","WithFormComponent","description","validation","isValid","message","disabled","Disabled"],"sources":["SegmentedControl.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SegmentedControl } from \"./SegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControl> = {\n    title: \"Components/Form/SegmentedControl\",\n    component: SegmentedControl\n};\n\nexport default meta;\ntype Story = StoryObj<typeof SegmentedControl>;\n\nconst items = [\n    { label: \"Item\", value: \"item1\" },\n    { label: \"Item\", value: \"item2\" },\n    { label: \"Item\", value: \"item3\" },\n    { label: \"Item\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 1\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <SegmentedControl {...args} value={value} onChange={value => setValue(value)} />;\n    },\n    args: {\n        items: itemsWithIcons\n    }\n};\n\nexport const VariantLight: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return <SegmentedControl items={items} value={value} onChange={setValue} variant=\"light\" />;\n    }\n};\n\nexport const VariantDimmed: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <SegmentedControl items={items} value={value} onChange={setValue} variant=\"dimmed\" />\n        );\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"p-md rounded-md\">\n                <SegmentedControl items={items} value={value} onChange={setValue} variant=\"ghost\" />\n            </div>\n        );\n    }\n};\n\nexport const WithFormComponent: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"space-y-lg\">\n                <SegmentedControl\n                    label=\"Select an option\"\n                    description=\"Choose one of the available options\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                />\n                <SegmentedControl\n                    label=\"With error\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                    validation={{\n                        isValid: false,\n                        message: \"This field is required\"\n                    }}\n                />\n                <SegmentedControl\n                    label=\"Disabled\"\n                    items={items}\n                    value={value}\n                    onChange={setValue}\n                    disabled\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    render: () => {\n        const [value, setValue] = useState(\"item1\");\n\n        return (\n            <div className=\"space-y-md\">\n                <div>\n                    <h3 className=\"text-lg font-semibold mb-sm\">Fully Disabled</h3>\n                    <SegmentedControl items={items} value={value} onChange={setValue} disabled />\n                </div>\n                <div>\n                    <h3 className=\"text-lg font-semibold mb-sm\">Partially Disabled</h3>\n                    <SegmentedControl\n                        items={[\n                            { label: \"Item\", value: \"item1\" },\n                            { label: \"Item (disabled)\", value: \"item2\", disabled: true },\n                            { label: \"Item\", value: \"item3\" },\n                            { label: \"Item (disabled)\", value: \"item4\", disabled: true }\n                        ]}\n                        value={value}\n                        onChange={setValue}\n                    />\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/SegmentedControl/SegmentedControl.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This is a simple smoke test to verify the SegmentedControl component can be imported
+ * and used without errors.
+ */
+export {};

package/SegmentedControl/SegmentedControl.test.js

@@ -0,0 +1,34 @@
+/**
+ * This is a simple smoke test to verify the SegmentedControl component can be imported
+ * and used without errors.
+ */
+
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { SegmentedControl } from "./SegmentedControl.js";
+describe("SegmentedControl", () => {
+  it("should export the component", () => {
+    expect(SegmentedControl).toBeDefined();
+  });
+  it("should accept required props", () => {
+    const items = [{
+      label: "Item 1",
+      value: "item1"
+    }, {
+      label: "Item 2",
+      value: "item2"
+    }];
+    const props = {
+      items,
+      value: "item1",
+      onChange: () => {}
+    };
+
+    // This should not throw
+    expect(() => {
+      /*#__PURE__*/React.createElement(SegmentedControl, props);
+    }).not.toThrow();
+  });
+});
+
+//# sourceMappingURL=SegmentedControl.test.js.map

package/SegmentedControl/SegmentedControl.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","React","SegmentedControl","toBeDefined","items","label","value","props","onChange","createElement","not","toThrow"],"sources":["SegmentedControl.test.tsx"],"sourcesContent":["/**\n * This is a simple smoke test to verify the SegmentedControl component can be imported\n * and used without errors.\n */\n\nimport { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { SegmentedControl } from \"./SegmentedControl.js\";\n\ndescribe(\"SegmentedControl\", () => {\n    it(\"should export the component\", () => {\n        expect(SegmentedControl).toBeDefined();\n    });\n\n    it(\"should accept required props\", () => {\n        const items = [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2\", value: \"item2\" }\n        ];\n\n        const props = {\n            items,\n            value: \"item1\",\n            onChange: () => {}\n        };\n\n        // This should not throw\n        expect(() => {\n            React.createElement(SegmentedControl, props);\n        }).not.toThrow();\n    });\n});\n"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,QAAQ,QAAQ;AAC7C,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AAEzBJ,QAAQ,CAAC,kBAAkB,EAAE,MAAM;EAC/BC,EAAE,CAAC,6BAA6B,EAAE,MAAM;IACpCC,MAAM,CAACE,gBAAgB,CAAC,CAACC,WAAW,CAAC,CAAC;EAC1C,CAAC,CAAC;EAEFJ,EAAE,CAAC,8BAA8B,EAAE,MAAM;IACrC,MAAMK,KAAK,GAAG,CACV;MAAEC,KAAK,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAQ,CAAC,EACnC;MAAED,KAAK,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAQ,CAAC,CACtC;IAED,MAAMC,KAAK,GAAG;MACVH,KAAK;MACLE,KAAK,EAAE,OAAO;MACdE,QAAQ,EAAEA,CAAA,KAAM,CAAC;IACrB,CAAC;;IAED;IACAR,MAAM,CAAC,MAAM;MACT,aAAAC,KAAK,CAACQ,aAAa,CAACP,gBAAgB,EAAEK,KAAK,CAAC;IAChD,CAAC,CAAC,CAACG,GAAG,CAACC,OAAO,CAAC,CAAC;EACpB,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/SegmentedControl/domains/SegmentedControlItem.d.ts

@@ -0,0 +1,22 @@
+import type { SegmentedControlItemParams } from "./SegmentedControlItemParams.js";
+import type React from "react";
+export declare class SegmentedControlItem {
+    private readonly _id;
+    private readonly _label;
+    private readonly _value;
+    private readonly _disabled;
+    private readonly _icon?;
+    protected constructor(data: {
+        id: string;
+        label: any;
+        value: string | number;
+        disabled: boolean;
+        icon?: React.ReactNode;
+    });
+    static create(data: SegmentedControlItemParams): SegmentedControlItem;
+    get id(): string;
+    get label(): any;
+    get value(): string | number;
+    get disabled(): boolean;
+    get icon(): React.ReactNode;
+}

package/SegmentedControl/domains/SegmentedControlItem.js

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

package/SegmentedControl/domains/SegmentedControlItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateId","SegmentedControlItem","constructor","data","_id","id","_label","label","_value","value","_disabled","disabled","_icon","icon","create"],"sources":["SegmentedControlItem.ts"],"sourcesContent":["import type { SegmentedControlItemParams } from \"./SegmentedControlItemParams.js\";\nimport { generateId } from \"~/utils.js\";\nimport type React from \"react\";\n\nexport class SegmentedControlItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string | number;\n    private readonly _disabled: boolean;\n    private readonly _icon?: React.ReactNode;\n\n    protected constructor(data: {\n        id: string;\n        label: any;\n        value: string | number;\n        disabled: boolean;\n        icon?: React.ReactNode;\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    }\n\n    static create(data: SegmentedControlItemParams) {\n        return new SegmentedControlItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            disabled: data.disabled ?? false,\n            icon: data.icon\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"],"mappings":"AACA,SAASA,UAAU;AAGnB,OAAO,MAAMC,oBAAoB,CAAC;EAOpBC,WAAWA,CAACC,IAMrB,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;EAC1B;EAEA,OAAOC,MAAMA,CAACX,IAAgC,EAAE;IAC5C,OAAO,IAAIF,oBAAoB,CAAC;MAC5BI,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;IACf,CAAC,CAAC;EACN;EAEA,IAAIR,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;AACJ","ignoreList":[]}

package/SegmentedControl/domains/SegmentedControlItemFormatted.d.ts

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

package/SegmentedControl/domains/SegmentedControlItemFormatted.js

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

package/SegmentedControl/domains/SegmentedControlItemFormatted.js.map

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

package/SegmentedControl/domains/SegmentedControlItemFormatter.d.ts

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

package/SegmentedControl/domains/SegmentedControlItemFormatter.js

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

package/SegmentedControl/domains/SegmentedControlItemFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SegmentedControlItemFormatter","format","item","id","label","value","String","disabled","icon"],"sources":["SegmentedControlItemFormatter.ts"],"sourcesContent":["import type { SegmentedControlItemFormatted } from \"./SegmentedControlItemFormatted.js\";\nimport type { SegmentedControlItem } from \"./SegmentedControlItem.js\";\n\nexport class SegmentedControlItemFormatter {\n    static format(item: SegmentedControlItem): SegmentedControlItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: String(item.value),\n            disabled: item.disabled,\n            icon: item.icon\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,6BAA6B,CAAC;EACvC,OAAOC,MAAMA,CAACC,IAA0B,EAAiC;IACrE,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;MACjBC,KAAK,EAAEC,MAAM,CAACJ,IAAI,CAACG,KAAK,CAAC;MACzBE,QAAQ,EAAEL,IAAI,CAACK,QAAQ;MACvBC,IAAI,EAAEN,IAAI,CAACM;IACf,CAAC;EACL;AACJ","ignoreList":[]}

package/SegmentedControl/domains/SegmentedControlItemParams.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+export interface SegmentedControlItemParams {
+    id?: string;
+    label: string | React.ReactNode;
+    value: string | number;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}

package/SegmentedControl/domains/SegmentedControlItemParams.js

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

package/SegmentedControl/domains/SegmentedControlItemParams.js.map

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

package/SegmentedControl/domains/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./SegmentedControlItem.js";
+export * from "./SegmentedControlItemParams.js";
+export * from "./SegmentedControlItemFormatted.js";
+export * from "./SegmentedControlItemFormatter.js";

package/SegmentedControl/domains/index.js

@@ -0,0 +1,6 @@
+export * from "./SegmentedControlItem.js";
+export * from "./SegmentedControlItemParams.js";
+export * from "./SegmentedControlItemFormatted.js";
+export * from "./SegmentedControlItemFormatter.js";
+
+//# sourceMappingURL=index.js.map

package/SegmentedControl/domains/index.js.map

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

package/SegmentedControl/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SegmentedControl.js";
+export * from "./primitives/index.js";
+export * from "./domains/index.js";

package/SegmentedControl/index.js

@@ -0,0 +1,5 @@
+export * from "./SegmentedControl.js";
+export * from "./primitives/index.js";
+export * from "./domains/index.js";
+
+//# sourceMappingURL=index.js.map

package/SegmentedControl/index.js.map

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

package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils.js";
+import type { SegmentedControlItemParams, SegmentedControlItemFormatted } from "../domains/index.js";
+/**
+ * Segmented Control Item Button
+ */
+declare const segmentedControlItemVariants: (props?: ({
+    variant?: "ghost" | "dimmed" | "light" | null | undefined;
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+/**
+ * Segmented Control Primitive
+ */
+interface SegmentedControlPrimitiveProps {
+    items: SegmentedControlItemParams[];
+    /**
+     * Callback triggered when the selected value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The selected value.
+     */
+    value?: string;
+    /**
+     * Visual style variant.
+     */
+    variant?: VariantProps<typeof segmentedControlItemVariants>["variant"];
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Disabled state for all items.
+     */
+    disabled?: boolean;
+}
+interface SegmentedControlVm {
+    items: SegmentedControlItemFormatted[];
+}
+interface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {
+    items: SegmentedControlItemFormatted[];
+    changeValue: (value: string) => void;
+}
+declare const SegmentedControlRenderer: ({ items, changeValue, value, variant, className, disabled }: SegmentedControlRendererProps) => React.JSX.Element;
+/**
+ * Segmented Control Primitive Component
+ */
+declare const SegmentedControlPrimitive: (props: SegmentedControlPrimitiveProps) => React.JSX.Element;
+export { SegmentedControlPrimitive, SegmentedControlRenderer, type SegmentedControlPrimitiveProps, type SegmentedControlVm };

package/SegmentedControl/primitives/SegmentedControlPrimitive.js

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { cn, cva } from "../../utils.js";
+import { useSegmentedControl } from "./useSegmentedControl.js";
+import { Icon } from "../../Icon/index.js";
+
+/**
+ * Segmented Control Item Button
+ */
+const segmentedControlItemVariants = cva(["inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md", "text-md px-sm-extra py-xs [&>svg]:size-md gap-xs", "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0", "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"], {
+  variants: {
+    variant: {
+      light: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80", "hover:data-[state=inactive]:text-neutral-primary", "hover:data-[state=inactive]:bg-neutral-base/80", "active:data-[state=inactive]:bg-neutral-base/80"],
+      dimmed: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80", "hover:data-[state=inactive]:text-neutral-primary", "hover:data-[state=inactive]:bg-neutral-base/80", "active:data-[state=inactive]:bg-neutral-base/80"],
+      ghost: ["text-neutral-strong fill-neutral-xstrong", "data-[state=active]:bg-neutral-dark/5", "hover:data-[state=inactive]:bg-neutral-dark/5", "active:data-[state=inactive]:bg-neutral-dark/5"]
+    }
+  },
+  defaultVariants: {
+    variant: "light"
+  }
+});
+const segmentedControlRootVariants = cva("inline-flex rounded-md p-xxs gap-xs", {
+  variants: {
+    variant: {
+      light: "bg-neutral-light",
+      dimmed: "bg-neutral-dimmed",
+      ghost: ""
+    }
+  },
+  defaultVariants: {
+    variant: "light"
+  }
+});
+const SegmentedControlItemButton = ({
+  item,
+  isActive,
+  onValueChange,
+  variant,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("button", Object.assign({
+    type: "button",
+    role: "radio",
+    "aria-checked": isActive,
+    "data-state": isActive ? "active" : "inactive",
+    disabled: item.disabled,
+    onClick: () => onValueChange(item.value),
+    className: cn(segmentedControlItemVariants({
+      variant
+    }), className)
+  }, props), item.icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: item.icon,
+    size: "sm",
+    label: String(item.label),
+    color: "neutral-strong"
+  }), item.label);
+};
+
+/**
+ * Segmented Control Primitive
+ */
+
+const SegmentedControlRenderer = ({
+  items,
+  changeValue,
+  value,
+  variant = "light",
+  className,
+  disabled
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    role: "radiogroup",
+    className: cn(segmentedControlRootVariants({
+      variant
+    }), className)
+  }, items.map(item => /*#__PURE__*/React.createElement(SegmentedControlItemButton, {
+    key: item.id,
+    item: {
+      ...item,
+      disabled: disabled || item.disabled
+    },
+    isActive: value === item.value,
+    onValueChange: changeValue,
+    variant: variant
+  })));
+};
+
+/**
+ * Segmented Control Primitive Component
+ */
+const SegmentedControlPrimitive = props => {
+  const {
+    vm,
+    changeValue
+  } = useSegmentedControl(props);
+  return /*#__PURE__*/React.createElement(SegmentedControlRenderer, Object.assign({}, props, {
+    items: vm.items,
+    changeValue: changeValue
+  }));
+};
+export { SegmentedControlPrimitive, SegmentedControlRenderer };
+
+//# sourceMappingURL=SegmentedControlPrimitive.js.map

package/SegmentedControl/primitives/SegmentedControlPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","useSegmentedControl","Icon","segmentedControlItemVariants","variants","variant","light","dimmed","ghost","defaultVariants","segmentedControlRootVariants","SegmentedControlItemButton","item","isActive","onValueChange","className","props","createElement","Object","assign","type","role","disabled","onClick","value","icon","size","label","String","color","SegmentedControlRenderer","items","changeValue","map","key","id","SegmentedControlPrimitive","vm"],"sources":["SegmentedControlPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport type {\n    SegmentedControlItemParams,\n    SegmentedControlItemFormatted\n} from \"../domains/index.js\";\nimport { useSegmentedControl } from \"./useSegmentedControl.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\n/**\n * Segmented Control Item Button\n */\nconst segmentedControlItemVariants = cva(\n    [\n        \"inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer relative rounded-md\",\n        \"text-md px-sm-extra py-xs [&>svg]:size-md gap-xs\",\n        \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed focus-visible:ring-offset-0\",\n        \"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            variant: {\n                light: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                dimmed: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:text-neutral-primary data-[state=active]:fill-neutral-xstrong data-[state=active]:bg-neutral-base/80\",\n                    \"hover:data-[state=inactive]:text-neutral-primary\",\n                    \"hover:data-[state=inactive]:bg-neutral-base/80\",\n                    \"active:data-[state=inactive]:bg-neutral-base/80\"\n                ],\n                ghost: [\n                    \"text-neutral-strong fill-neutral-xstrong\",\n                    \"data-[state=active]:bg-neutral-dark/5\",\n                    \"hover:data-[state=inactive]:bg-neutral-dark/5\",\n                    \"active:data-[state=inactive]:bg-neutral-dark/5\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"light\"\n        }\n    }\n);\n\nconst segmentedControlRootVariants = cva(\"inline-flex rounded-md p-xxs gap-xs\", {\n    variants: {\n        variant: {\n            light: \"bg-neutral-light\",\n            dimmed: \"bg-neutral-dimmed\",\n            ghost: \"\"\n        }\n    },\n    defaultVariants: {\n        variant: \"light\"\n    }\n});\n\ninterface SegmentedControlItemProps\n    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n    item: SegmentedControlItemFormatted;\n    isActive: boolean;\n    onValueChange: (value: string) => void;\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n}\n\nconst SegmentedControlItemButton = ({\n    item,\n    isActive,\n    onValueChange,\n    variant,\n    className,\n    ...props\n}: SegmentedControlItemProps) => {\n    return (\n        <button\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            data-state={isActive ? \"active\" : \"inactive\"}\n            disabled={item.disabled}\n            onClick={() => onValueChange(item.value)}\n            className={cn(segmentedControlItemVariants({ variant }), className)}\n            {...props}\n        >\n            {item.icon && (\n                <Icon\n                    icon={item.icon}\n                    size={\"sm\"}\n                    label={String(item.label)}\n                    color={\"neutral-strong\"}\n                />\n            )}\n            {item.label}\n        </button>\n    );\n};\n\n/**\n * Segmented Control Primitive\n */\ninterface SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemParams[];\n    /**\n     * Callback triggered when the selected value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * The selected value.\n     */\n    value?: string;\n    /**\n     * Visual style variant.\n     */\n    variant?: VariantProps<typeof segmentedControlItemVariants>[\"variant\"];\n    /**\n     * Additional class name.\n     */\n    className?: string;\n    /**\n     * Disabled state for all items.\n     */\n    disabled?: boolean;\n}\n\ninterface SegmentedControlVm {\n    items: SegmentedControlItemFormatted[];\n}\n\ninterface SegmentedControlRendererProps extends SegmentedControlPrimitiveProps {\n    items: SegmentedControlItemFormatted[];\n    changeValue: (value: string) => void;\n}\n\nconst SegmentedControlRenderer = ({\n    items,\n    changeValue,\n    value,\n    variant = \"light\",\n    className,\n    disabled\n}: SegmentedControlRendererProps) => {\n    return (\n        <div role=\"radiogroup\" className={cn(segmentedControlRootVariants({ variant }), className)}>\n            {items.map(item => (\n                <SegmentedControlItemButton\n                    key={item.id}\n                    item={{ ...item, disabled: disabled || item.disabled }}\n                    isActive={value === item.value}\n                    onValueChange={changeValue}\n                    variant={variant}\n                />\n            ))}\n        </div>\n    );\n};\n\n/**\n * Segmented Control Primitive Component\n */\nconst SegmentedControlPrimitive = (props: SegmentedControlPrimitiveProps) => {\n    const { vm, changeValue } = useSegmentedControl(props);\n    return <SegmentedControlRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nexport {\n    SegmentedControlPrimitive,\n    SegmentedControlRenderer,\n    type SegmentedControlPrimitiveProps,\n    type SegmentedControlVm\n};\n"],"mappings":"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","ignoreList":[]}

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { SegmentedControlPrimitive } from "./SegmentedControlPrimitive.js";
+declare const meta: Meta<typeof SegmentedControlPrimitive>;
+export default meta;
+type Story = StoryObj<typeof SegmentedControlPrimitive>;
+export declare const Default: Story;
+export declare const WithDefaultOption: Story;
+export declare const WithIcons: Story;
+export declare const VariantLight: Story;
+export declare const VariantDimmed: Story;
+export declare const VariantGhost: Story;
+export declare const Disabled: Story;
+export declare const PartiallyDisabled: Story;

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import { SegmentedControlPrimitive } from "./SegmentedControlPrimitive.js";
+import { Icon } from "../../Icon/index.js";
+import { ReactComponent as LockIcon } from "@webiny/icons/notifications.svg";
+const meta = {
+  title: "Components/Form Primitives/SegmentedControl",
+  component: SegmentedControlPrimitive,
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "w-full"
+    }, /*#__PURE__*/React.createElement(SegmentedControlPrimitive, Object.assign({}, args, {
+      value: value,
+      onChange: value => setValue(value)
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "mt-4 text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
+  }
+};
+export default meta;
+const items = [{
+  label: "Item 1",
+  value: "item1"
+}, {
+  label: "Item 2",
+  value: "item2"
+}, {
+  label: "Item 3",
+  value: "item3"
+}, {
+  label: "Item 4",
+  value: "item4"
+}];
+const itemsWithIcons = [{
+  label: "Item 1",
+  value: "item1",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 2",
+  value: "item2",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 3",
+  value: "item3",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 4",
+  value: "item4",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}];
+export const Default = {
+  args: {
+    items
+  }
+};
+export const WithDefaultOption = {
+  args: {
+    items,
+    value: "item2"
+  }
+};
+export const WithIcons = {
+  args: {
+    items: itemsWithIcons,
+    value: "item1"
+  }
+};
+export const VariantLight = {
+  args: {
+    items,
+    value: "item1",
+    variant: "light"
+  }
+};
+export const VariantDimmed = {
+  args: {
+    items,
+    value: "item1",
+    variant: "dimmed"
+  }
+};
+export const VariantGhost = {
+  render: args => {
+    const [value, setValue] = useState(args.value || "item1");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "p-md rounded-md bg-neutral-light"
+    }, /*#__PURE__*/React.createElement(SegmentedControlPrimitive, Object.assign({}, args, {
+      items: items,
+      value: value,
+      onChange: value => setValue(value),
+      variant: "ghost"
+    })));
+  }
+};
+export const Disabled = {
+  args: {
+    items,
+    value: "item2",
+    disabled: true
+  }
+};
+export const PartiallyDisabled = {
+  args: {
+    items: [{
+      label: "Item 1",
+      value: "item1"
+    }, {
+      label: "Item 2 (disabled)",
+      value: "item2",
+      disabled: true
+    }, {
+      label: "Item 3",
+      value: "item3"
+    }, {
+      label: "Item 4 (disabled)",
+      value: "item4",
+      disabled: true
+    }],
+    value: "item1"
+  }
+};
+
+//# sourceMappingURL=SegmentedControlPrimitive.stories.js.map

package/SegmentedControl/primitives/SegmentedControlPrimitive.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","SegmentedControlPrimitive","Icon","ReactComponent","LockIcon","meta","title","component","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","onChange","items","label","itemsWithIcons","icon","Default","WithDefaultOption","WithIcons","VariantLight","variant","VariantDimmed","VariantGhost","Disabled","disabled","PartiallyDisabled"],"sources":["SegmentedControlPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { SegmentedControlPrimitive } from \"./SegmentedControlPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/notifications.svg\";\n\nconst meta: Meta<typeof SegmentedControlPrimitive> = {\n    title: \"Components/Form Primitives/SegmentedControl\",\n    component: SegmentedControlPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SegmentedControlPrimitive\n                    {...args}\n                    value={value}\n                    onChange={value => setValue(value)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SegmentedControlPrimitive>;\n\nconst items = [\n    { label: \"Item 1\", value: \"item1\" },\n    { label: \"Item 2\", value: \"item2\" },\n    { label: \"Item 3\", value: \"item3\" },\n    { label: \"Item 4\", value: \"item4\" }\n];\n\nconst itemsWithIcons = [\n    { label: \"Item 1\", value: \"item1\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 2\", value: \"item2\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 3\", value: \"item3\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> },\n    { label: \"Item 4\", value: \"item4\", icon: <Icon icon={<LockIcon />} label=\"Lock\" /> }\n];\n\nexport const Default: Story = {\n    args: {\n        items\n    }\n};\n\nexport const WithDefaultOption: Story = {\n    args: {\n        items,\n        value: \"item2\"\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        items: itemsWithIcons,\n        value: \"item1\"\n    }\n};\n\nexport const VariantLight: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"light\"\n    }\n};\n\nexport const VariantDimmed: Story = {\n    args: {\n        items,\n        value: \"item1\",\n        variant: \"dimmed\"\n    }\n};\n\nexport const VariantGhost: Story = {\n    render: args => {\n        const [value, setValue] = useState(args.value || \"item1\");\n        return (\n            <div className=\"p-md rounded-md bg-neutral-light\">\n                <SegmentedControlPrimitive\n                    {...args}\n                    items={items}\n                    value={value}\n                    onChange={value => setValue(value)}\n                    variant=\"ghost\"\n                />\n            </div>\n        );\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        items,\n        value: \"item2\",\n        disabled: true\n    }\n};\n\nexport const PartiallyDisabled: Story = {\n    args: {\n        items: [\n            { label: \"Item 1\", value: \"item1\" },\n            { label: \"Item 2 (disabled)\", value: \"item2\", disabled: true },\n            { label: \"Item 3\", value: \"item3\" },\n            { label: \"Item 4 (disabled)\", value: \"item4\", disabled: true }\n        ],\n        value: \"item1\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/SegmentedControl/primitives/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SegmentedControlPrimitive.js";
+export * from "./useSegmentedControl.js";
+export * from "./presenters/SegmentedControlPresenter.js";

package/SegmentedControl/primitives/index.js

@@ -0,0 +1,5 @@
+export * from "./SegmentedControlPrimitive.js";
+export * from "./useSegmentedControl.js";
+export * from "./presenters/SegmentedControlPresenter.js";
+
+//# sourceMappingURL=index.js.map

package/SegmentedControl/primitives/index.js.map

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

package/SegmentedControl/primitives/presenters/SegmentedControlPresenter.d.ts

@@ -0,0 +1,22 @@
+import type { SegmentedControlVm } from "../SegmentedControlPrimitive.js";
+import type { SegmentedControlItemParams } from "../../../SegmentedControl/domains/SegmentedControlItemParams.js";
+interface SegmentedControlPresenterParams<TValue = string> {
+    items: SegmentedControlItemParams[];
+    onValueChange?: (value: TValue) => void;
+}
+interface ISegmentedControlPresenter<TValue = string> {
+    vm: SegmentedControlVm;
+    init: (props: SegmentedControlPresenterParams<TValue>) => void;
+    changeValue: (value: TValue) => void;
+}
+declare class SegmentedControlPresenter<TValue = string> implements ISegmentedControlPresenter<TValue> {
+    private params?;
+    constructor();
+    init: (params: SegmentedControlPresenterParams<TValue>) => void;
+    get vm(): {
+        items: import("../../index.js").SegmentedControlItemFormatted[];
+    };
+    changeValue: (value: TValue) => void;
+    private getSegmentedControlItems;
+}
+export { SegmentedControlPresenter, type SegmentedControlPresenterParams, type ISegmentedControlPresenter };