@webiny/admin-ui 6.0.0-alpha.0

package/RadioGroup/RadioGroup.js

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "../utils";
+import { RadioGroupPrimitive } from "./primitives";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableRadioGroup = ({
+  label,
+  description,
+  note,
+  required,
+  disabled,
+  validation,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label,
+    required: required,
+    disabled: disabled,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled,
+    className: "wby-mb-xs-plus"
+  }), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: disabled,
+    className: "wby-mt-none wby-mb-xs-plus"
+  }), /*#__PURE__*/React.createElement(RadioGroupPrimitive, props), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: disabled
+  }));
+};
+const RadioGroup = makeDecoratable("RadioGroup", DecoratableRadioGroup);
+export { RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

package/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","makeDecoratable","RadioGroupPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableRadioGroup","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","RadioGroup"],"sources":["RadioGroup.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport { RadioGroupPrimitive, RadioGroupPrimitiveProps } from \"./primitives\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    FormComponentProps\n} from \"~/FormComponent\";\n\ntype RadioGroupProps = RadioGroupPrimitiveProps & FormComponentProps;\n\nconst DecoratableRadioGroup = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: RadioGroupProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className={\"wby-mb-xs-plus\"}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className={\"wby-mt-none wby-mb-xs-plus\"}\n            />\n            <RadioGroupPrimitive {...props} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\nconst RadioGroup = makeDecoratable(\"RadioGroup\", DecoratableRadioGroup);\n\nexport { RadioGroup };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAC5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAMrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGnB,OAAO,CAAC,MAAMgB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzBtB,KAAA,CAAAqB,aAAA,CAACf,kBAAkB;IACfiB,IAAI,EAAEd,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFpB,KAAA,CAAAqB,aAAA,CAACjB,wBAAwB;IACrBmB,IAAI,EAAEb,WAAY;IAClBG,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAE;EAAiB,CAC/B,CAAC,eACFtB,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAE;EAA6B,CAC3C,CAAC,eACFtB,KAAA,CAAAqB,aAAA,CAAClB,mBAAmB,EAAKY,KAAQ,CAAC,eAClCf,KAAA,CAAAqB,aAAA,CAACd,iBAAiB;IAACgB,IAAI,EAAEZ,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMW,UAAU,GAAGtB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASgB,UAAU","ignoreList":[]}

package/RadioGroup/RadioGroup.mdx

@@ -0,0 +1,148 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as RadioGroupStories from './RadioGroup.stories';
+
+<Meta of={RadioGroupStories} />
+
+# Radio Group
+
+Radio buttons allow users to select only one option from a set of mutually exclusive choices. A radio group is a collection of radio buttons that are related to each other, ensuring that only one option can be selected at a time.
+
+## Usage
+
+<Canvas of={RadioGroupStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { RadioGroup } from "@webiny/admin-ui";
+
+const RadioGroupExample = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (!value) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <RadioGroup
+            label="Deployment Option"
+            description="Choose your preferred deployment method"
+            note="This setting will determine how your application is deployed"
+            required={true}
+            items={[
+                {
+                    label: "Automatic Deployment",
+                    value: "automatic"
+                },
+                {
+                    label: "Manual Deployment",
+                    value: "manual"
+                },
+                {
+                    label: "Scheduled Deployment",
+                    value: "scheduled"
+                }
+            ]}
+            value={value}
+            validation={validation}
+            onChange={newValue => setValue(newValue)}
+            onBlur={handleValidation}
+        />
+    );
+};
+
+export default RadioGroupExample;
+
+`} }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/RadioGroup/RadioGroup.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={RadioGroupStories.Documentation} />
+
+> **Note:** While the `required` prop will show the required indicator (*) next to the label, you need to implement the validation logic using the `validation` and `onBlur` props to handle the actual validation behavior.
+
+```jsx
+import React, { useState } from "react";
+
+import { RadioGroup } from "@webiny/admin-ui";
+
+const RadioGroupExample = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValidation = () => {
+        if (!value) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <RadioGroup
+            label="Deployment Option"
+            description="Choose your preferred deployment method"
+            note="This setting will determine how your application is deployed"
+            required={true}
+            items={[
+                {
+                    label: "Automatic Deployment",
+                    value: "automatic"
+                },
+                {
+                    label: "Manual Deployment",
+                    value: "manual"
+                },
+                {
+                    label: "Scheduled Deployment",
+                    value: "scheduled"
+                }
+            ]}
+            value={value}
+            validation={validation}
+            onChange={newValue => setValue(newValue)}
+            onBlur={handleValidation}
+        />
+    );
+};
+
+export default RadioGroupExample;
+```
+
+## Anatomy
+
+### General
+Radio input enable users to select a single item from a list of offered choices. A radio input group organizes related radio input options together for better clarity and functionality.
+
+<img src="/images/storybook/radio-group/anatomy.png" alt="Anatomy"/>
+
+### Radio input options
+Radio inputs can exist in two different states: Selected and Not Selected. When a radio input is used for bulk selection, all other options must be excluded since the very purpose of a radio input is to provide only one selectable option.
+<img src="/images/storybook/radio-group/options.png" alt="Radio input options"/>
+
+### States
+<img src="/images/storybook/radio-group/states.png" alt="States"/>
+
+## Usage
+
+### Text overflow
+When the radio item text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
+
+<img src="/images/storybook/radio-group/text-overflow.png" alt="Text overflow"/>
+
+
+

package/RadioGroup/RadioGroup.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroup } from "./RadioGroup";
+declare const meta: Meta<typeof RadioGroup>;
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithRequiredLabel: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const Documentation: Story;

package/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import { RadioGroup } from "./RadioGroup";
+const meta = {
+  title: "Components/Form/RadioGroup",
+  component: RadioGroup,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({}, args, {
+      value: value,
+      onChange: value => setValue(value)
+    }));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    items: [{
+      label: "Value 1",
+      value: "value-1"
+    }, {
+      label: "Value 2",
+      value: "value-2"
+    }, {
+      label: "Value 3",
+      value: "value-3"
+    }]
+  }
+};
+export const WithLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label"
+  }
+};
+export const WithRequiredLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    ...Default.args,
+    description: "Provide the required information for processing your request."
+  }
+};
+export const WithNotes = {
+  args: {
+    ...Default.args,
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const WithErrors = {
+  args: {
+    ...Default.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    disabled: true,
+    items: [{
+      label: "Value 1",
+      value: "value-1",
+      disabled: true
+    }, {
+      label: "Value 2",
+      value: "value-2",
+      disabled: true
+    }, {
+      label: "Value 3",
+      value: "value-3",
+      disabled: true
+    }]
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Select which deploy option do you prefer",
+    required: true,
+    description: "Deployment option is simply a way of parsing the data based on your database settings.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "You must select at least one option!"
+    }
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+    const handleValidation = () => {
+      if (args.required && !value) {
+        setValidation({
+          isValid: false,
+          message: "This field is required"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    };
+    return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({}, args, {
+      value: value,
+      validation: validation,
+      onChange: newValue => setValue(newValue),
+      onBlur: handleValidation
+    }));
+  },
+  args: {
+    label: "Deployment Option",
+    description: "Choose your preferred deployment method",
+    note: "This setting will determine how your application is deployed",
+    required: true,
+    disabled: false,
+    items: [{
+      label: "Automatic Deployment",
+      value: "automatic"
+    }, {
+      label: "Manual Deployment",
+      value: "manual"
+    }, {
+      label: "Scheduled Deployment",
+      value: "scheduled"
+    }]
+  }
+};
+
+//# sourceMappingURL=RadioGroup.stories.js.map

package/RadioGroup/RadioGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","RadioGroup","meta","title","component","argTypes","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","onChange","Default","items","label","WithLabel","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","setValidation","handleValidation","newValue","onBlur"],"sources":["RadioGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioGroup } from \"./RadioGroup\";\n\nconst meta: Meta<typeof RadioGroup> = {\n    title: \"Components/Form/RadioGroup\",\n    component: RadioGroup,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <RadioGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RadioGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true,\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one option!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <RadioGroup\n                {...args}\n                value={value}\n                validation={validation}\n                onChange={newValue => setValue(newValue)}\n                onBlur={handleValidation}\n            />\n        );\n    },\n    args: {\n        label: \"Deployment Option\",\n        description: \"Choose your preferred deployment method\",\n        note: \"This setting will determine how your application is deployed\",\n        required: true,\n        disabled: false,\n        items: [\n            {\n                label: \"Automatic Deployment\",\n                value: \"automatic\"\n            },\n            {\n                label: \"Manual Deployment\",\n                value: \"manual\"\n            },\n            {\n                label: \"Scheduled Deployment\",\n                value: \"scheduled\"\n            }\n        ]\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/RadioGroup/domains/RadioItem.d.ts

@@ -0,0 +1,18 @@
+import { RadioItemParams } from "./RadioItemParams";
+export declare class RadioItem {
+    private readonly _id;
+    private readonly _label;
+    private readonly _value;
+    private readonly _disabled;
+    protected constructor(data: {
+        id: string;
+        label: any;
+        value: string | number;
+        disabled: boolean;
+    });
+    static create(data: RadioItemParams): RadioItem;
+    get id(): string;
+    get label(): any;
+    get value(): string | number;
+    get disabled(): boolean;
+}

package/RadioGroup/domains/RadioItem.js

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

package/RadioGroup/domains/RadioItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateId","RadioItem","constructor","data","_id","id","_label","label","_value","value","_disabled","disabled","create"],"sources":["RadioItem.ts"],"sourcesContent":["import { RadioItemParams } from \"./RadioItemParams\";\nimport { generateId } from \"~/utils\";\n\nexport class RadioItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string | number;\n    private readonly _disabled: boolean;\n\n    protected constructor(data: {\n        id: string;\n        label: any;\n        value: string | number;\n        disabled: boolean;\n    }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._value = data.value;\n        this._disabled = data.disabled;\n    }\n\n    static create(data: RadioItemParams) {\n        return new RadioItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            disabled: data.disabled ?? false\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"],"mappings":"AACA,SAASA,UAAU;AAEnB,OAAO,MAAMC,SAAS,CAAC;EAMTC,WAAWA,CAACC,IAKrB,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;EAClC;EAEA,OAAOC,MAAMA,CAACT,IAAqB,EAAE;IACjC,OAAO,IAAIF,SAAS,CAAC;MACjBI,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;IAC/B,CAAC,CAAC;EACN;EAEA,IAAIN,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;AACJ","ignoreList":[]}

package/RadioGroup/domains/RadioItemFormatted.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface RadioItemFormatted {
+    id: string;
+    label: string | React.ReactNode;
+    value: string;
+    disabled: boolean;
+}

package/RadioGroup/domains/RadioItemFormatted.js

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

package/RadioGroup/domains/RadioItemFormatted.js.map

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

package/RadioGroup/domains/RadioItemFormatter.d.ts

@@ -0,0 +1,5 @@
+import { RadioItemFormatted } from "./RadioItemFormatted";
+import { RadioItem } from "./RadioItem";
+export declare class RadioItemFormatter {
+    static format(item: RadioItem): RadioItemFormatted;
+}

package/RadioGroup/domains/RadioItemFormatter.js

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

package/RadioGroup/domains/RadioItemFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RadioItemFormatter","format","item","id","label","value","String","disabled"],"sources":["RadioItemFormatter.ts"],"sourcesContent":["import { RadioItemFormatted } from \"./RadioItemFormatted\";\nimport { RadioItem } from \"./RadioItem\";\n\nexport class RadioItemFormatter {\n    static format(item: RadioItem): RadioItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: String(item.value),\n            disabled: item.disabled\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,kBAAkB,CAAC;EAC5B,OAAOC,MAAMA,CAACC,IAAe,EAAsB;IAC/C,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;IACnB,CAAC;EACL;AACJ","ignoreList":[]}

package/RadioGroup/domains/RadioItemParams.d.ts

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

package/RadioGroup/domains/RadioItemParams.js

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

package/RadioGroup/domains/RadioItemParams.js.map

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

package/RadioGroup/domains/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./RadioItem";
+export * from "./RadioItemFormatted";
+export * from "./RadioItemFormatter";
+export * from "./RadioItemParams";

package/RadioGroup/domains/index.js

@@ -0,0 +1,6 @@
+export * from "./RadioItem";
+export * from "./RadioItemFormatted";
+export * from "./RadioItemFormatter";
+export * from "./RadioItemParams";
+
+//# sourceMappingURL=index.js.map

package/RadioGroup/domains/index.js.map

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

package/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./primitives";
+export * from "./RadioGroup";

package/RadioGroup/index.js

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

package/RadioGroup/index.js.map

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

package/RadioGroup/primitives/Radio.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+/**
+ * RadioItem
+ */
+interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+    label: string | React.ReactNode;
+    id: string;
+}
+declare const Radio: (({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
+    original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
+        original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
+        original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Radio, type RadioProps };

package/RadioGroup/primitives/Radio.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cn, makeDecoratable } from "../../utils";
+import { Label } from "../../Label";
+
+/**
+ * RadioItem
+ */
+
+const DecoratableRadio = ({
+  className,
+  label,
+  id,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-start wby-space-x-sm-extra"
+  }, /*#__PURE__*/React.createElement(RadioGroupPrimitive.Item, Object.assign({
+    id: id,
+    className: cn(["wby-group wby-peer wby-aspect-square wby-h-md wby-w-md wby-rounded-xl wby-mt-xxs", "wby-bg-neutral-base wby-border-sm wby-border-neutral-muted wby-ring-offset-background", "focus:wby-outline-none focus-visible:wby-border-accent-default focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed focus-visible:wby-ring-offset-0", "disabled:wby-cursor-not-allowed disabled:wby-border-neutral-muted disabled:wby-bg-neutral-disabled"], className)
+  }, props), /*#__PURE__*/React.createElement(RadioGroupPrimitive.Indicator, {
+    className: "wby-flex wby-items-center wby-justify-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cn(["wby-h-sm wby-w-sm wby-rounded-xl", "wby-bg-primary-default", "group-disabled:wby-bg-neutral-strong"])
+  }))), /*#__PURE__*/React.createElement(Label, {
+    htmlFor: id,
+    text: label,
+    weight: "light",
+    className: "wby-text-md"
+  }));
+};
+const Radio = makeDecoratable("Radio", DecoratableRadio);
+export { Radio };
+
+//# sourceMappingURL=Radio.js.map

package/RadioGroup/primitives/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","RadioGroup","RadioGroupPrimitive","cn","makeDecoratable","Label","DecoratableRadio","className","label","id","props","createElement","Item","Object","assign","Indicator","htmlFor","text","weight","Radio"],"sources":["Radio.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport { Label } from \"~/Label\";\n\n/**\n * RadioItem\n */\ninterface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {\n    label: string | React.ReactNode;\n    id: string;\n}\n\nconst DecoratableRadio = ({ className, label, id, ...props }: RadioProps) => {\n    return (\n        <div className=\"wby-flex wby-items-start wby-space-x-sm-extra\">\n            <RadioGroupPrimitive.Item\n                id={id}\n                className={cn(\n                    [\n                        \"wby-group wby-peer wby-aspect-square wby-h-md wby-w-md wby-rounded-xl wby-mt-xxs\",\n                        \"wby-bg-neutral-base wby-border-sm wby-border-neutral-muted wby-ring-offset-background\",\n                        \"focus:wby-outline-none focus-visible:wby-border-accent-default focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed focus-visible:wby-ring-offset-0\",\n                        \"disabled:wby-cursor-not-allowed disabled:wby-border-neutral-muted disabled:wby-bg-neutral-disabled\"\n                    ],\n                    className\n                )}\n                {...props}\n            >\n                <RadioGroupPrimitive.Indicator className=\"wby-flex wby-items-center wby-justify-center\">\n                    <span\n                        className={cn([\n                            \"wby-h-sm wby-w-sm wby-rounded-xl\",\n                            \"wby-bg-primary-default\",\n                            \"group-disabled:wby-bg-neutral-strong\"\n                        ])}\n                    />\n                </RadioGroupPrimitive.Indicator>\n            </RadioGroupPrimitive.Item>\n            <Label htmlFor={id} text={label} weight={\"light\"} className={\"wby-text-md\"} />\n        </div>\n    );\n};\nconst Radio = makeDecoratable(\"Radio\", DecoratableRadio);\n\nexport { Radio, type RadioProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,IAAIC,mBAAmB,QAAQ,UAAU;AAC5D,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,KAAK;;AAEd;AACA;AACA;;AAMA,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,KAAK;EAAEC,EAAE;EAAE,GAAGC;AAAkB,CAAC,KAAK;EACzE,oBACIV,KAAA,CAAAW,aAAA;IAAKJ,SAAS,EAAC;EAA+C,gBAC1DP,KAAA,CAAAW,aAAA,CAACT,mBAAmB,CAACU,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACrBL,EAAE,EAAEA,EAAG;IACPF,SAAS,EAAEJ,EAAE,CACT,CACI,kFAAkF,EAClF,uFAAuF,EACvF,gKAAgK,EAChK,oGAAoG,CACvG,EACDI,SACJ;EAAE,GACEG,KAAK,gBAETV,KAAA,CAAAW,aAAA,CAACT,mBAAmB,CAACa,SAAS;IAACR,SAAS,EAAC;EAA8C,gBACnFP,KAAA,CAAAW,aAAA;IACIJ,SAAS,EAAEJ,EAAE,CAAC,CACV,kCAAkC,EAClC,wBAAwB,EACxB,sCAAsC,CACzC;EAAE,CACN,CAC0B,CACT,CAAC,eAC3BH,KAAA,CAAAW,aAAA,CAACN,KAAK;IAACW,OAAO,EAAEP,EAAG;IAACQ,IAAI,EAAET,KAAM;IAACU,MAAM,EAAE,OAAQ;IAACX,SAAS,EAAE;EAAc,CAAE,CAC5E,CAAC;AAEd,CAAC;AACD,MAAMY,KAAK,GAAGf,eAAe,CAAC,OAAO,EAAEE,gBAAgB,CAAC;AAExD,SAASa,KAAK","ignoreList":[]}

package/RadioGroup/primitives/RadioGroupPrimitive.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitives } from "radix-ui";
+import { RadioItemParams, RadioItemFormatted } from "../domains";
+/**
+ * Radio Group Renderer
+ */
+interface RadioGroupPrimitiveProps extends Omit<RadioGroupPrimitives.RadioGroupProps, "defaultValue" | "onChange" | "onValueChange" | "value"> {
+    items: RadioItemParams[];
+    /**
+     * Callback triggered when the selected value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Optional selected item.
+     */
+    value?: string;
+}
+interface RadioGroupVm {
+    items: RadioItemFormatted[];
+}
+interface RadioGroupRendererProps extends Omit<RadioGroupPrimitiveProps, "onChange"> {
+    items: RadioItemFormatted[];
+    changeValue: (value: string) => void;
+}
+declare const RadioGroupRenderer: ({ items, changeValue, value, disabled }: RadioGroupRendererProps) => React.JSX.Element;
+/**
+ * Radio Group Primitive
+ */
+declare const RadioGroupPrimitive: (props: RadioGroupPrimitiveProps) => React.JSX.Element;
+/**
+ * @deprecated
+ * This component is retained in @webiny/admin-ui and used in  @webiny/ui solely as a compatibility layer.
+ * It is marked as deprecated because nesting `Radio` components inside `RadioGroup` is no longer the recommended approach.
+ * Instead, we now pass an array of `RadioItemDto` directly to `RadioGroup` for better maintainability.
+ */
+declare const DeprecatedRadioGroup: ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => React.JSX.Element;
+export { RadioGroupPrimitive, RadioGroupRenderer, DeprecatedRadioGroup, type RadioGroupPrimitiveProps, type RadioGroupVm };