@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/radiobutton/RadioButton.js

@@ -1,93 +1,82 @@
-import { jsxs as N, jsx as n } from "react/jsx-runtime";
-import { useRef as O } from "react";
-import { noop as g } from "es-toolkit/compat";
-import x from "../../utils/classNames.js";
-const S = (s) => {
-  const { icon: o, iconSize: e, iconLabelPosition: a, text: i } = s, l = {
-    width: `${e}px`,
-    height: `${e}px`,
-    fontSize: `${e}px`,
-    lineHeight: `${e}px`
-  };
-  return /* @__PURE__ */ N("span", { className: `radio-icon label-${a}`, children: [
-    /* @__PURE__ */ n("span", { className: `rioglyph ${o}`, style: l }),
-    /* @__PURE__ */ n("span", { className: "radio-label", children: i })
-  ] });
-}, k = (s) => {
-  const {
-    icon: o = "",
-    iconLabelPosition: e = "vertical",
-    iconSize: a = 16,
-    label: i,
-    onClick: l = g,
-    onChange: m = g,
-    checked: c,
-    defaultChecked: I,
-    disabled: u = !1,
-    className: h,
-    inline: L = !1,
-    right: y = !1,
-    custom: f = !1,
-    name: R,
-    value: $,
-    tabIndex: D = 0,
-    inputRef: v,
-    children: r,
-    ...w
-  } = s, p = c != null, d = O(null), z = (t) => {
-    switch (t.key) {
-      case " ":
-      // toggle on space
-      case "Enter":
-        A(t);
-        break;
-    }
-  }, A = (t) => {
-    if (t.preventDefault(), !u) {
-      if (p) {
-        m(t);
-        return;
-      }
-      if (d.current) {
-        const b = d.current.firstChild;
-        b.checked = !b.checked;
-      }
-    }
-  }, C = i || r, B = x("radio", L && "radio-inline", h), E = x(y && "icon-right", h);
-  return /* @__PURE__ */ N(
-    "label",
-    {
-      ...w,
-      className: B,
-      tabIndex: D,
-      onKeyDown: z,
-      ref: d,
-      children: [
-        /* @__PURE__ */ n(
-          "input",
-          {
-            type: "radio",
-            defaultChecked: I,
-            checked: c,
-            disabled: u,
-            className: E,
-            ref: v,
-            onClick: l,
-            onChange: p ? m : void 0,
-            name: R,
-            value: $
-          }
-        ),
-        !!o && /* @__PURE__ */ n(S, { icon: o, iconSize: a, iconLabelPosition: e, text: C }),
-        !o && !f && /* @__PURE__ */ n("span", { className: "radio-text", children: /* @__PURE__ */ n("span", { children: C }) }),
-        f && r && r
-      ]
-    }
-  );
+import e from "../../utils/classNames.js";
+import { normalizeIconName as t } from "../../utils/iconNames.js";
+import { useRef as n } from "react";
+import { noop as r } from "es-toolkit/compat";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/radiobutton/RadioButton.tsx
+var o = (e) => {
+	let { iconName: n, icon: r, iconSize: o, iconLabelPosition: s, text: c } = e, l = n ?? r ?? "", u = {
+		width: `${o}px`,
+		height: `${o}px`,
+		fontSize: `${o}px`,
+		lineHeight: `${o}px`
+	};
+	return /* @__PURE__ */ a("span", {
+		className: `radio-icon label-${s}`,
+		children: [/* @__PURE__ */ i("span", {
+			className: `uikit-icon ${t(l)}`,
+			style: u
+		}), /* @__PURE__ */ i("span", {
+			className: "radio-label",
+			children: c
+		})]
+	});
+}, s = (t) => {
+	let { iconName: s, icon: c, iconLabelPosition: l = "vertical", iconSize: u = 16, label: d, onClick: f = r, onChange: p = r, checked: m, defaultChecked: h, disabled: g = !1, className: _, inline: v = !1, right: y = !1, custom: b = !1, name: x, value: S, tabIndex: C = 0, inputRef: w, children: T, ...E } = t, D = s ?? c ?? "", O = m != null, k = n(null), A = (e) => {
+		switch (e.key) {
+			case " ":
+			case "Enter":
+				j(e);
+				break;
+			default: break;
+		}
+	}, j = (e) => {
+		if (e.preventDefault(), !g) {
+			if (O) {
+				p(e);
+				return;
+			}
+			if (k.current) {
+				let e = k.current.firstChild;
+				e.checked = !e.checked;
+			}
+		}
+	}, M = d || T, N = e("radio", v && "radio-inline", _), P = e(y && "icon-right", _), F = !!D, I = b && T, L = !D && !b;
+	return /* @__PURE__ */ a("label", {
+		...E,
+		className: N,
+		tabIndex: C,
+		onKeyDown: A,
+		ref: k,
+		children: [
+			/* @__PURE__ */ i("input", {
+				type: "radio",
+				defaultChecked: h,
+				checked: m,
+				disabled: g,
+				className: P,
+				ref: w,
+				onClick: f,
+				onChange: O ? p : void 0,
+				name: x,
+				value: S
+			}),
+			F && /* @__PURE__ */ i(o, {
+				iconName: D,
+				iconSize: u,
+				iconLabelPosition: l,
+				text: M
+			}),
+			L && /* @__PURE__ */ i("span", {
+				className: "radio-text",
+				children: /* @__PURE__ */ i("span", { children: M })
+			}),
+			I && T
+		]
+	});
 };
-k.ICON_LABEL_VERTICAL = "vertical";
-k.ICON_LABEL_HORIZONTAL = "horizontal";
-export {
-  k as default
-};
-//# sourceMappingURL=RadioButton.js.map
+s.ICON_LABEL_VERTICAL = "vertical", s.ICON_LABEL_HORIZONTAL = "horizontal";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=RadioButton.js.map

package/components/radiobutton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radiobutton/RadioButton.tsx"],"sourcesContent":["import {\n    type ChangeEvent,\n    type ChangeEventHandler,\n    type KeyboardEvent,\n    type MouseEventHandler,\n    type PropsWithChildren,\n    type ReactNode,\n    type Ref,\n    useRef,\n    type HTMLProps,\n} from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\n\ntype RadioButtonIconProps = {\n    icon: string;\n    iconSize: number;\n    iconLabelPosition: 'vertical' | 'horizontal';\n    text: string | ReactNode;\n};\n\nconst RadioButtonIcon = (props: RadioButtonIconProps) => {\n    const { icon, iconSize, iconLabelPosition, text } = props;\n\n    const iconStyles = {\n        width: `${iconSize}px`,\n        height: `${iconSize}px`,\n        fontSize: `${iconSize}px`,\n        lineHeight: `${iconSize}px`,\n    };\n\n    return (\n        <span className={`radio-icon label-${iconLabelPosition}`}>\n            <span className={`rioglyph ${icon}`} style={iconStyles} />\n            <span className='radio-label'>{text}</span>\n        </span>\n    );\n};\n\nexport type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick' | 'onChange'> & {\n    /**\n     * Define any rioglyph icon like \"rioglyph-truck\".\n     */\n    icon?: string;\n\n    /**\n     * The label position.\n     *\n     * Possible values are: `'horizontal'` or `'vertical'`.\n     *\n     * @default 'vertical'\n     */\n    iconLabelPosition?: 'vertical' | 'horizontal';\n\n    /**\n     * The icon Size in px.\n     *\n     * @default 16\n     */\n    iconSize?: number;\n\n    /**\n     * Defines the label text.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Callback function that is invoked when the radio button is clicked.\n     *\n     * @default () => {}\n     */\n    onClick?: MouseEventHandler<{ value: string | string[] | number }>;\n\n    /**\n     * Callback function that is invoked when the radio button is toggled and the state should change (for controlled\n     * usage).\n     *\n     * @default () => {}\n     */\n    onChange?: ChangeEventHandler;\n\n    /**\n     * Defines whether the radio is checked (for controlled usage).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the radio is initially checked (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    className?: string;\n\n    /**\n     * Defines whether the radio button is applying an inline style.\n     *\n     * Use this in combination with other radio buttons.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Displays the icon on the right side of the text.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a radio tick.\n     *\n     * @default false\n     */\n    custom?: boolean;\n\n    /**\n     * Name to be given to the input element.\n     */\n    name?: string;\n\n    /**\n     * The value attribute is a string containing the radio button's value but __it is never shown to the user__.\n     *\n     * It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are\n     * currently checked are submitted, and the reported value is the value of the value attribute.\n     *\n     * If the value is not otherwise specified, it is the string on by default.\n     *\n     * This is useful when using native `FormData` when submitting a form to get the selected radio button value.\n     */\n    value?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * An index of 0 means that the element should be focusable in sequential keyboard navigation, but its order is\n     * defined by the document's source order. To disable the focus set the value to -1.\n     *\n     * A positive value means the element should be focusable in sequential keyboard navigation,\n     * with its order defined by the value of the number.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Ref which is added to the input element.\n     */\n    inputRef?: Ref<HTMLInputElement>;\n};\n\nconst RadioButton = (props: PropsWithChildren<RadioButtonProps>) => {\n    const {\n        icon = '',\n        iconLabelPosition = 'vertical',\n        iconSize = 16,\n        label,\n        onClick = noop,\n        onChange = noop,\n        checked,\n        defaultChecked,\n        disabled = false,\n        className,\n        inline = false,\n        right = false,\n        custom = false,\n        name,\n        value,\n        tabIndex = 0,\n        inputRef,\n        children,\n        ...remainingProps\n    } = props;\n\n    const isControlled = checked !== null && checked !== undefined;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    const handleToggleKeyDown = (event: KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ': // toggle on space\n            case 'Enter': // open on enter\n                toggle(event);\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: KeyboardEvent<HTMLLabelElement>) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        // Controlled case - uses \"onChange()\" instead of \"onClick()\" callback\n        if (isControlled) {\n            onChange(event as unknown as ChangeEvent<HTMLInputElement>);\n            return;\n        }\n\n        // Uncontrolled case - set the input checked or unchecked\n        if (labelRef.current) {\n            const checkbox = labelRef.current.firstChild as HTMLInputElement;\n            checkbox.checked = !checkbox.checked;\n        }\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames('radio', inline && 'radio-inline', className);\n    const inputClassnames = classNames(right && 'icon-right', className);\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                type='radio'\n                defaultChecked={defaultChecked}\n                checked={checked}\n                disabled={disabled}\n                className={inputClassnames}\n                ref={inputRef}\n                onClick={onClick}\n                // Only wire onChange for controlled usage; uncontrolled relies on native state + onClick.\n                onChange={isControlled ? onChange : undefined}\n                name={name}\n                value={value}\n            />\n            {renderCustomIcon && (\n                <RadioButtonIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && (\n                <span className='radio-text'>\n                    <span>{text}</span>\n                </span>\n            )}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nRadioButton.ICON_LABEL_VERTICAL = 'vertical';\nRadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport default RadioButton;\n"],"names":["RadioButtonIcon","props","icon","iconSize","iconLabelPosition","text","iconStyles","jsxs","jsx","RadioButton","label","onClick","noop","onChange","checked","defaultChecked","disabled","className","inline","right","custom","name","value","tabIndex","inputRef","children","remainingProps","isControlled","labelRef","useRef","handleToggleKeyDown","event","toggle","checkbox","labelClassnames","classNames","inputClassnames"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/radiobutton/RadioButton.tsx"],"sourcesContent":["import {\n    type ChangeEvent,\n    type ChangeEventHandler,\n    type KeyboardEvent,\n    type MouseEventHandler,\n    type PropsWithChildren,\n    type ReactNode,\n    type Ref,\n    useRef,\n    type HTMLProps,\n} from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { normalizeIconName } from '../../utils/iconNames';\nimport type { IconType } from '../icon/Icon';\n\ntype RadioButtonIconProps = {\n    iconName?: IconType;\n    /**\n     * Legacy alias for `iconName`.\n     *\n     * @deprecated Use `iconName` instead.\n     */\n    icon?: IconType;\n    iconSize: number;\n    iconLabelPosition: 'vertical' | 'horizontal';\n    text: string | ReactNode;\n};\n\nconst RadioButtonIcon = (props: RadioButtonIconProps) => {\n    const { iconName, icon: legacyIcon, iconSize, iconLabelPosition, text } = props;\n    const resolvedIconName = iconName ?? legacyIcon ?? '';\n\n    const iconStyles = {\n        width: `${iconSize}px`,\n        height: `${iconSize}px`,\n        fontSize: `${iconSize}px`,\n        lineHeight: `${iconSize}px`,\n    };\n\n    return (\n        <span className={`radio-icon label-${iconLabelPosition}`}>\n            <span className={`uikit-icon ${normalizeIconName(resolvedIconName)}`} style={iconStyles} />\n            <span className='radio-label'>{text}</span>\n        </span>\n    );\n};\n\nexport type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick' | 'onChange'> & {\n    /**\n     * Define any uikit-icon icon like \"icon-truck\".\n     */\n    iconName?: IconType;\n\n    /**\n     * Legacy alias for `iconName`.\n     *\n     * @deprecated Use `iconName` instead.\n     */\n    icon?: IconType;\n\n    /**\n     * The label position.\n     *\n     * Possible values are: `'horizontal'` or `'vertical'`.\n     *\n     * @default 'vertical'\n     */\n    iconLabelPosition?: 'vertical' | 'horizontal';\n\n    /**\n     * The icon Size in px.\n     *\n     * @default 16\n     */\n    iconSize?: number;\n\n    /**\n     * Defines the label text.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Callback function that is invoked when the radio button is clicked.\n     *\n     * @default () => {}\n     */\n    onClick?: MouseEventHandler<{ value: string | string[] | number }>;\n\n    /**\n     * Callback function that is invoked when the radio button is toggled and the state should change (for controlled\n     * usage).\n     *\n     * @default () => {}\n     */\n    onChange?: ChangeEventHandler;\n\n    /**\n     * Defines whether the radio is checked (for controlled usage).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the radio is initially checked (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    className?: string;\n\n    /**\n     * Defines whether the radio button is applying an inline style.\n     *\n     * Use this in combination with other radio buttons.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Displays the icon on the right side of the text.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a radio tick.\n     *\n     * @default false\n     */\n    custom?: boolean;\n\n    /**\n     * Name to be given to the input element.\n     */\n    name?: string;\n\n    /**\n     * The value attribute is a string containing the radio button's value but __it is never shown to the user__.\n     *\n     * It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are\n     * currently checked are submitted, and the reported value is the value of the value attribute.\n     *\n     * If the value is not otherwise specified, it is the string on by default.\n     *\n     * This is useful when using native `FormData` when submitting a form to get the selected radio button value.\n     */\n    value?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * An index of 0 means that the element should be focusable in sequential keyboard navigation, but its order is\n     * defined by the document's source order. To disable the focus set the value to -1.\n     *\n     * A positive value means the element should be focusable in sequential keyboard navigation,\n     * with its order defined by the value of the number.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Ref which is added to the input element.\n     */\n    inputRef?: Ref<HTMLInputElement>;\n};\n\nconst RadioButton = (props: PropsWithChildren<RadioButtonProps>) => {\n    const {\n        iconName,\n        icon: legacyIcon,\n        iconLabelPosition = 'vertical',\n        iconSize = 16,\n        label,\n        onClick = noop,\n        onChange = noop,\n        checked,\n        defaultChecked,\n        disabled = false,\n        className,\n        inline = false,\n        right = false,\n        custom = false,\n        name,\n        value,\n        tabIndex = 0,\n        inputRef,\n        children,\n        ...remainingProps\n    } = props;\n\n    const resolvedIconName = iconName ?? legacyIcon ?? '';\n\n    const isControlled = checked !== null && checked !== undefined;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    const handleToggleKeyDown = (event: KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ': // toggle on space\n            case 'Enter': // open on enter\n                toggle(event);\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: KeyboardEvent<HTMLLabelElement>) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        // Controlled case - uses \"onChange()\" instead of \"onClick()\" callback\n        if (isControlled) {\n            onChange(event as unknown as ChangeEvent<HTMLInputElement>);\n            return;\n        }\n\n        // Uncontrolled case - set the input checked or unchecked\n        if (labelRef.current) {\n            const checkbox = labelRef.current.firstChild as HTMLInputElement;\n            checkbox.checked = !checkbox.checked;\n        }\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames('radio', inline && 'radio-inline', className);\n    const inputClassnames = classNames(right && 'icon-right', className);\n\n    const renderCustomIcon = !!resolvedIconName;\n    const renderCustomContent = custom && children;\n    const renderDefault = !resolvedIconName && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                type='radio'\n                defaultChecked={defaultChecked}\n                checked={checked}\n                disabled={disabled}\n                className={inputClassnames}\n                ref={inputRef}\n                onClick={onClick}\n                // Only wire onChange for controlled usage; uncontrolled relies on native state + onClick.\n                onChange={isControlled ? onChange : undefined}\n                name={name}\n                value={value}\n            />\n            {renderCustomIcon && (\n                <RadioButtonIcon\n                    iconName={resolvedIconName}\n                    iconSize={iconSize}\n                    iconLabelPosition={iconLabelPosition}\n                    text={text}\n                />\n            )}\n            {renderDefault && (\n                <span className='radio-text'>\n                    <span>{text}</span>\n                </span>\n            )}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nRadioButton.ICON_LABEL_VERTICAL = 'vertical';\nRadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport default RadioButton;\n"],"mappings":";;;;;;AA8BA,IAAM,KAAmB,MAAgC;CACrD,IAAM,EAAE,aAAU,MAAM,GAAY,aAAU,sBAAmB,YAAS,GACpE,IAAmB,KAAY,KAAc,IAE7C,IAAa;EACf,OAAO,GAAG,EAAS;EACnB,QAAQ,GAAG,EAAS;EACpB,UAAU,GAAG,EAAS;EACtB,YAAY,GAAG,EAAS;CAC5B;CAEA,OACI,kBAAC,QAAD;EAAM,WAAW,oBAAoB;YAArC,CACI,kBAAC,QAAD;GAAM,WAAW,cAAc,EAAkB,CAAgB;GAAK,OAAO;EAAa,CAAA,GAC1F,kBAAC,QAAD;GAAM,WAAU;aAAe;EAAW,CAAA,CACxC;;AAEd,GAoIM,KAAe,MAA+C;CAChE,IAAM,EACF,aACA,MAAM,GACN,uBAAoB,YACpB,cAAW,IACX,UACA,aAAU,GACV,cAAW,GACX,YACA,mBACA,cAAW,IACX,cACA,YAAS,IACT,WAAQ,IACR,YAAS,IACT,SACA,UACA,cAAW,GACX,aACA,aACA,GAAG,MACH,GAEE,IAAmB,KAAY,KAAc,IAE7C,IAAe,KAAY,MAE3B,IAAW,EAAyB,IAAI,GAExC,KAAuB,MAA2C;EACpE,QAAQ,EAAM,KAAd;GACI,KAAK;GACL,KAAK;IACD,EAAO,CAAK;IACZ;GAEJ,SACI;EACR;CACJ,GAEM,KAAU,MAA2C;EACvD,MAAM,eAAe,GAEjB,IAKJ;OAAI,GAAc;IACd,EAAS,CAAiD;IAC1D;GACJ;GAGA,IAAI,EAAS,SAAS;IAClB,IAAM,IAAW,EAAS,QAAQ;IAClC,EAAS,UAAU,CAAC,EAAS;GACjC;EANA;CAOJ,GAEM,IAAO,KAAS,GAEhB,IAAkB,EAAW,SAAS,KAAU,gBAAgB,CAAS,GACzE,IAAkB,EAAW,KAAS,cAAc,CAAS,GAE7D,IAAmB,CAAC,CAAC,GACrB,IAAsB,KAAU,GAChC,IAAgB,CAAC,KAAoB,CAAC;CAE5C,OACI,kBAAC,SAAD;EACI,GAAI;EACJ,WAAW;EACD;EACV,WAAW;EACX,KAAK;YALT;GAOI,kBAAC,SAAD;IACI,MAAK;IACW;IACP;IACC;IACV,WAAW;IACX,KAAK;IACI;IAET,UAAU,IAAe,IAAW,KAAA;IAC9B;IACC;GACV,CAAA;GACA,KACG,kBAAC,GAAD;IACI,UAAU;IACA;IACS;IACb;GACT,CAAA;GAEJ,KACG,kBAAC,QAAD;IAAM,WAAU;cACZ,kBAAC,QAAD,EAAA,UAAO,EAAW,CAAA;GAChB,CAAA;GAET,KAAuB;EACrB;;AAEf;AAEA,EAAY,sBAAsB,YAClC,EAAY,wBAAwB"}

package/components/radiobutton/RadioCardGroup.js

@@ -1,110 +1,82 @@
-import { jsx as d, jsxs as b } from "react/jsx-runtime";
-import { createContext as P, useContext as j, useState as x, Children as B, isValidElement as v, cloneElement as L } from "react";
-import c from "../../utils/classNames.js";
-import S from "./RadioButton.js";
-const V = P(void 0), A = (o, t, l, s) => {
-  if (s === "stacked") {
-    const n = t === 0, a = t === l - 1;
-    return c(
-      "padding-15 border",
-      n && "rounded-top-left rounded-top-right",
-      !n && "margin-top--1",
-      a && "rounded-bottom-left rounded-bottom-right",
-      o && "border-color-highlight bg-highlight-decent z-index-1"
-    );
-  }
-  if (s === "stacked-horizontal") {
-    const n = t === 0, a = t === l - 1;
-    return c(
-      "padding-15 border",
-      n && "rounded-top-left rounded-bottom-left",
-      !n && "margin-left--1",
-      a && "rounded-top-right rounded-bottom-right",
-      o && "border-color-highlight bg-highlight-decent z-index-1"
-    );
-  }
-  return c("padding-15 border rounded", o && "border-color-highlight");
-}, N = (o) => {
-  const { value: t, disabled: l = !1, className: s, children: n, _itemIndex: a = 0, _itemsCount: u = 1, ...h } = o, r = j(V);
-  if (!r)
-    throw new Error("RadioCardItem must be used inside RadioCardGroup.");
-  const m = r.selectedValue === t;
-  return /* @__PURE__ */ d(
-    S,
-    {
-      ...h,
-      name: r.name,
-      value: t,
-      custom: !0,
-      checked: m,
-      onChange: (g) => r.onSelect(t, g),
-      disabled: l,
-      className: c(
-        A(m, a, u, r.variant),
-        r.focusedValue === t && !m && "border-color-gray",
-        r.cardClassName,
-        s
-      ),
-      onFocus: () => r.setFocusedValue(t),
-      onBlur: () => r.setFocusedValue(void 0),
-      children: /* @__PURE__ */ d("div", { className: "radio-text-wrapper display-flex", children: n })
-    }
-  );
-}, O = ({ className: o, ...t }) => /* @__PURE__ */ d("span", { className: c("radio-text", o), ...t }), K = (o) => {
-  const {
-    name: t,
-    options: l = [],
-    value: s,
-    defaultValue: n,
-    variant: a = "inline",
-    gap: u = "gap-15",
-    onChange: h,
-    className: r,
-    cardClassName: m,
-    children: g,
-    ...y
-  } = o, p = s != null, [I, R] = x(n), [k, F] = x(), _ = p ? s : I, z = (e) => (i) => {
-    p || R(e), h?.(e, i);
-  }, w = c(
-    a === "stacked" && "display-flex flex-column",
-    a === "stacked-horizontal" && "display-flex",
-    a === "inline" && "display-flex",
-    a === "inline" && u,
-    r
-  ), E = {
-    name: t,
-    selectedValue: _,
-    variant: a,
-    cardClassName: m,
-    focusedValue: k,
-    setFocusedValue: F,
-    onSelect: (e, i) => z(e)(i)
-  }, f = B.toArray(g).filter((e) => v(e)), C = f.map((e, i) => !v(e) || e.type !== N ? e : L(e, {
-    _itemIndex: i,
-    _itemsCount: f.length
-  })), G = l.map((e, i) => /* @__PURE__ */ b(
-    N,
-    {
-      value: e.value,
-      disabled: e.disabled,
-      className: e.className,
-      _itemIndex: i,
-      _itemsCount: l.length,
-      children: [
-        /* @__PURE__ */ d(O, {}),
-        /* @__PURE__ */ b("div", { className: "margin-left-5 margin-right-5", children: [
-          /* @__PURE__ */ d("div", { className: "text-medium", children: e.label }),
-          e.description && /* @__PURE__ */ d("div", { className: "text-color-dark", children: e.description })
-        ] })
-      ]
-    },
-    e.value
-  ));
-  return /* @__PURE__ */ d(V.Provider, { value: E, children: /* @__PURE__ */ d("div", { className: w, ...y, children: C.length > 0 ? C : G }) });
+import e from "../../utils/classNames.js";
+import t from "./RadioButton.js";
+import { Children as n, cloneElement as r, createContext as i, isValidElement as a, useContext as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/radiobutton/RadioCardGroup.tsx
+var u = i(void 0), d = (t, n, r, i) => {
+	if (i === "stacked") {
+		let i = n === 0, a = n === r - 1;
+		return e("padding-15 border", i && "rounded-top-left rounded-top-right", !i && "margin-top--1", a && "rounded-bottom-left rounded-bottom-right", t && "border-color-highlight bg-highlight-decent z-index-1");
+	}
+	if (i === "stacked-horizontal") {
+		let i = n === 0, a = n === r - 1;
+		return e("padding-15 border", i && "rounded-top-left rounded-bottom-left", !i && "margin-left--1", a && "rounded-top-right rounded-bottom-right", t && "border-color-highlight bg-highlight-decent z-index-1");
+	}
+	return e("padding-15 border rounded", t && "border-color-highlight");
+}, f = (n) => {
+	let { value: r, disabled: i = !1, className: a, children: s, _itemIndex: l = 0, _itemsCount: f = 1, ...p } = n, m = o(u);
+	if (!m) throw Error("RadioCardItem must be used inside RadioCardGroup.");
+	let h = m.selectedValue === r;
+	return /* @__PURE__ */ c(t, {
+		...p,
+		name: m.name,
+		value: r,
+		custom: !0,
+		checked: h,
+		onChange: (e) => m.onSelect(r, e),
+		disabled: i,
+		className: e(d(h, l, f, m.variant), m.focusedValue === r && !h && "border-color-gray", m.cardClassName, a),
+		onFocus: () => m.setFocusedValue(r),
+		onBlur: () => m.setFocusedValue(void 0),
+		children: /* @__PURE__ */ c("div", {
+			className: "radio-text-wrapper display-flex",
+			children: s
+		})
+	});
+}, p = ({ className: t, ...n }) => /* @__PURE__ */ c("span", {
+	className: e("radio-text", t),
+	...n
+}), m = (t) => {
+	let { name: i, options: o = [], value: d, defaultValue: m, variant: h = "inline", gap: g = "gap-15", onChange: _, className: v, cardClassName: y, children: b, ...x } = t, S = d != null, [C, w] = s(m), [T, E] = s(), D = S ? d : C, O = (e) => (t) => {
+		S || w(e), _?.(e, t);
+	}, k = e(h === "stacked" && "display-flex flex-column", h === "stacked-horizontal" && "display-flex", h === "inline" && "display-flex", h === "inline" && g, v), A = {
+		name: i,
+		selectedValue: D,
+		variant: h,
+		cardClassName: y,
+		focusedValue: T,
+		setFocusedValue: E,
+		onSelect: (e, t) => O(e)(t)
+	}, j = n.toArray(b).filter((e) => a(e)), M = j.map((e, t) => !a(e) || e.type !== f ? e : r(e, {
+		_itemIndex: t,
+		_itemsCount: j.length
+	})), N = o.map((e, t) => /* @__PURE__ */ l(f, {
+		value: e.value,
+		disabled: e.disabled,
+		className: e.className,
+		_itemIndex: t,
+		_itemsCount: o.length,
+		children: [/* @__PURE__ */ c(p, {}), /* @__PURE__ */ l("div", {
+			className: "margin-left-5 margin-right-5",
+			children: [/* @__PURE__ */ c("div", {
+				className: "text-medium",
+				children: e.label
+			}), e.description && /* @__PURE__ */ c("div", {
+				className: "text-color-dark",
+				children: e.description
+			})]
+		})]
+	}, e.value));
+	return /* @__PURE__ */ c(u.Provider, {
+		value: A,
+		children: /* @__PURE__ */ c("div", {
+			className: k,
+			...x,
+			children: M.length > 0 ? M : N
+		})
+	});
 };
-export {
-  O as RadioCardIndicator,
-  N as RadioCardItem,
-  K as default
-};
-//# sourceMappingURL=RadioCardGroup.js.map
+//#endregion
+export { p as RadioCardIndicator, f as RadioCardItem, m as default };
+
+//# sourceMappingURL=RadioCardGroup.js.map

package/components/radiobutton/RadioCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radiobutton/RadioCardGroup.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    createContext,\n    type ChangeEvent,\n    type HTMLProps,\n    isValidElement,\n    type ReactNode,\n    useContext,\n    useState,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\nimport RadioButton from './RadioButton';\n\nexport type RadioCardOption = {\n    /**\n     * Value passed to the underlying input element.\n     */\n    value: string;\n\n    /**\n     * Card headline content.\n     */\n    label: string | ReactNode;\n\n    /**\n     * Optional description shown below the card headline.\n     */\n    description?: string | ReactNode;\n\n    /**\n     * Disables the option.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to apply to a single card.\n     */\n    className?: string;\n};\n\nexport type RadioCardGroupProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'defaultValue'> & {\n    /**\n     * Name used for all radios in this group.\n     */\n    name: string;\n\n    /**\n     * List of selectable options.\n     */\n    options?: RadioCardOption[];\n\n    /**\n     * Selected value (controlled usage).\n     */\n    value?: string;\n\n    /**\n     * Initially selected value (uncontrolled usage).\n     */\n    defaultValue?: string;\n\n    /**\n     * Card layout variant.\n     *\n     * Possible values are: `'inline'`, `'stacked'` or `'stacked-horizontal'`.\n     *\n     * @default 'inline'\n     */\n    variant?: 'inline' | 'stacked' | 'stacked-horizontal';\n\n    /**\n     * Gap utility class used for the inline layout.\n     *\n     * @default 'gap-15'\n     */\n    gap?: string;\n\n    /**\n     * Callback invoked when selection changes.\n     */\n    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Additional classes applied to each card.\n     */\n    cardClassName?: string;\n};\n\ntype RadioCardGroupContextValue = {\n    name: string;\n    selectedValue?: string;\n    variant: 'inline' | 'stacked' | 'stacked-horizontal';\n    cardClassName?: string;\n    focusedValue?: string;\n    setFocusedValue: (value?: string) => void;\n    onSelect: (value: string, event: ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst RadioCardGroupContext = createContext<RadioCardGroupContextValue | undefined>(undefined);\n\nconst getCardClassName = (\n    isSelected: boolean,\n    index: number,\n    optionsCount: number,\n    variant: 'inline' | 'stacked' | 'stacked-horizontal'\n) => {\n    if (variant === 'stacked') {\n        const isFirst = index === 0;\n        const isLast = index === optionsCount - 1;\n\n        return classNames(\n            'padding-15 border',\n            isFirst && 'rounded-top-left rounded-top-right',\n            !isFirst && 'margin-top--1',\n            isLast && 'rounded-bottom-left rounded-bottom-right',\n            isSelected && 'border-color-highlight bg-highlight-decent z-index-1'\n        );\n    }\n\n    if (variant === 'stacked-horizontal') {\n        const isFirst = index === 0;\n        const isLast = index === optionsCount - 1;\n\n        return classNames(\n            'padding-15 border',\n            isFirst && 'rounded-top-left rounded-bottom-left',\n            !isFirst && 'margin-left--1',\n            isLast && 'rounded-top-right rounded-bottom-right',\n            isSelected && 'border-color-highlight bg-highlight-decent z-index-1'\n        );\n    }\n\n    return classNames('padding-15 border rounded', isSelected && 'border-color-highlight');\n};\n\ntype RadioCardItemProps = Omit<HTMLProps<HTMLLabelElement>, 'onClick' | 'onChange' | 'onBlur' | 'onFocus'> & {\n    /**\n     * Value passed to the underlying radio input.\n     */\n    value: string;\n\n    /**\n     * Disables this radio card.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n};\n\ntype InternalRadioCardItemProps = {\n    _itemIndex?: number;\n    _itemsCount?: number;\n};\n\nexport const RadioCardItem = (props: RadioCardItemProps & InternalRadioCardItemProps) => {\n    const { value, disabled = false, className, children, _itemIndex = 0, _itemsCount = 1, ...remainingProps } = props;\n\n    const context = useContext(RadioCardGroupContext);\n\n    if (!context) {\n        throw new Error('RadioCardItem must be used inside RadioCardGroup.');\n    }\n\n    const isSelected = context.selectedValue === value;\n\n    return (\n        <RadioButton\n            {...remainingProps}\n            name={context.name}\n            value={value}\n            custom\n            checked={isSelected}\n            onChange={event => context.onSelect(value, event as ChangeEvent<HTMLInputElement>)}\n            disabled={disabled}\n            className={classNames(\n                getCardClassName(isSelected, _itemIndex, _itemsCount, context.variant),\n                context.focusedValue === value && !isSelected && 'border-color-gray',\n                context.cardClassName,\n                className\n            )}\n            onFocus={() => context.setFocusedValue(value)}\n            onBlur={() => context.setFocusedValue(undefined)}\n        >\n            <div className='radio-text-wrapper display-flex'>{children}</div>\n        </RadioButton>\n    );\n};\n\ntype RadioCardIndicatorProps = Omit<HTMLProps<HTMLSpanElement>, 'children'>;\n\nexport const RadioCardIndicator = ({ className, ...remainingProps }: RadioCardIndicatorProps) => (\n    <span className={classNames('radio-text', className)} {...remainingProps} />\n);\n\nconst RadioCardGroup = (props: RadioCardGroupProps) => {\n    const {\n        name,\n        options = [],\n        value,\n        defaultValue,\n        variant = 'inline',\n        gap = 'gap-15',\n        onChange,\n        className,\n        cardClassName,\n        children,\n        ...remainingProps\n    } = props;\n\n    const isControlled = value !== null && value !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [focusedValue, setFocusedValue] = useState<string>();\n\n    const selectedValue = isControlled ? value : internalValue;\n\n    const handleChange = (nextValue: string) => (event: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) {\n            setInternalValue(nextValue);\n        }\n\n        onChange?.(nextValue, event);\n    };\n\n    const groupClassName = classNames(\n        variant === 'stacked' && 'display-flex flex-column',\n        variant === 'stacked-horizontal' && 'display-flex',\n        variant === 'inline' && 'display-flex',\n        variant === 'inline' && gap,\n        className\n    );\n\n    const contextValue: RadioCardGroupContextValue = {\n        name,\n        selectedValue,\n        variant,\n        cardClassName,\n        focusedValue,\n        setFocusedValue,\n        onSelect: (nextValue, event) => handleChange(nextValue)(event),\n    };\n\n    const itemChildren = Children.toArray(children).filter(child => isValidElement(child));\n    const mappedChildren = itemChildren.map((child, index) => {\n        if (!isValidElement(child) || child.type !== RadioCardItem) {\n            return child;\n        }\n\n        return cloneElement(child, {\n            _itemIndex: index,\n            _itemsCount: itemChildren.length,\n        });\n    });\n\n    const mappedOptions = options.map((option, index) => (\n        <RadioCardItem\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled}\n            className={option.className}\n            _itemIndex={index}\n            _itemsCount={options.length}\n        >\n            <RadioCardIndicator />\n            <div className='margin-left-5 margin-right-5'>\n                <div className='text-medium'>{option.label}</div>\n                {option.description && <div className='text-color-dark'>{option.description}</div>}\n            </div>\n        </RadioCardItem>\n    ));\n\n    return (\n        <RadioCardGroupContext.Provider value={contextValue}>\n            <div className={groupClassName} {...remainingProps}>\n                {mappedChildren.length > 0 ? mappedChildren : mappedOptions}\n            </div>\n        </RadioCardGroupContext.Provider>\n    );\n};\n\nexport default RadioCardGroup;\n"],"names":["RadioCardGroupContext","createContext","getCardClassName","isSelected","index","optionsCount","variant","isFirst","isLast","classNames","RadioCardItem","props","value","disabled","className","children","_itemIndex","_itemsCount","remainingProps","context","useContext","jsx","RadioButton","event","RadioCardIndicator","RadioCardGroup","name","options","defaultValue","gap","onChange","cardClassName","isControlled","internalValue","setInternalValue","useState","focusedValue","setFocusedValue","selectedValue","handleChange","nextValue","groupClassName","contextValue","itemChildren","Children","child","isValidElement","mappedChildren","cloneElement","mappedOptions","option","jsxs"],"mappings":"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"}
+{"version":3,"file":"RadioCardGroup.js","names":[],"sources":["../../../src/components/radiobutton/RadioCardGroup.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    createContext,\n    type ChangeEvent,\n    type HTMLProps,\n    isValidElement,\n    type ReactNode,\n    useContext,\n    useState,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\nimport RadioButton from './RadioButton';\n\nexport type RadioCardOption = {\n    /**\n     * Value passed to the underlying input element.\n     */\n    value: string;\n\n    /**\n     * Card headline content.\n     */\n    label: string | ReactNode;\n\n    /**\n     * Optional description shown below the card headline.\n     */\n    description?: string | ReactNode;\n\n    /**\n     * Disables the option.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to apply to a single card.\n     */\n    className?: string;\n};\n\nexport type RadioCardGroupProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'defaultValue'> & {\n    /**\n     * Name used for all radios in this group.\n     */\n    name: string;\n\n    /**\n     * List of selectable options.\n     */\n    options?: RadioCardOption[];\n\n    /**\n     * Selected value (controlled usage).\n     */\n    value?: string;\n\n    /**\n     * Initially selected value (uncontrolled usage).\n     */\n    defaultValue?: string;\n\n    /**\n     * Card layout variant.\n     *\n     * Possible values are: `'inline'`, `'stacked'` or `'stacked-horizontal'`.\n     *\n     * @default 'inline'\n     */\n    variant?: 'inline' | 'stacked' | 'stacked-horizontal';\n\n    /**\n     * Gap utility class used for the inline layout.\n     *\n     * @default 'gap-15'\n     */\n    gap?: string;\n\n    /**\n     * Callback invoked when selection changes.\n     */\n    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Additional classes applied to each card.\n     */\n    cardClassName?: string;\n};\n\ntype RadioCardGroupContextValue = {\n    name: string;\n    selectedValue?: string;\n    variant: 'inline' | 'stacked' | 'stacked-horizontal';\n    cardClassName?: string;\n    focusedValue?: string;\n    setFocusedValue: (value?: string) => void;\n    onSelect: (value: string, event: ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst RadioCardGroupContext = createContext<RadioCardGroupContextValue | undefined>(undefined);\n\nconst getCardClassName = (\n    isSelected: boolean,\n    index: number,\n    optionsCount: number,\n    variant: 'inline' | 'stacked' | 'stacked-horizontal'\n) => {\n    if (variant === 'stacked') {\n        const isFirst = index === 0;\n        const isLast = index === optionsCount - 1;\n\n        return classNames(\n            'padding-15 border',\n            isFirst && 'rounded-top-left rounded-top-right',\n            !isFirst && 'margin-top--1',\n            isLast && 'rounded-bottom-left rounded-bottom-right',\n            isSelected && 'border-color-highlight bg-highlight-decent z-index-1'\n        );\n    }\n\n    if (variant === 'stacked-horizontal') {\n        const isFirst = index === 0;\n        const isLast = index === optionsCount - 1;\n\n        return classNames(\n            'padding-15 border',\n            isFirst && 'rounded-top-left rounded-bottom-left',\n            !isFirst && 'margin-left--1',\n            isLast && 'rounded-top-right rounded-bottom-right',\n            isSelected && 'border-color-highlight bg-highlight-decent z-index-1'\n        );\n    }\n\n    return classNames('padding-15 border rounded', isSelected && 'border-color-highlight');\n};\n\ntype RadioCardItemProps = Omit<HTMLProps<HTMLLabelElement>, 'onClick' | 'onChange' | 'onBlur' | 'onFocus'> & {\n    /**\n     * Value passed to the underlying radio input.\n     */\n    value: string;\n\n    /**\n     * Disables this radio card.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n};\n\ntype InternalRadioCardItemProps = {\n    _itemIndex?: number;\n    _itemsCount?: number;\n};\n\nexport const RadioCardItem = (props: RadioCardItemProps & InternalRadioCardItemProps) => {\n    const { value, disabled = false, className, children, _itemIndex = 0, _itemsCount = 1, ...remainingProps } = props;\n\n    const context = useContext(RadioCardGroupContext);\n\n    if (!context) {\n        throw new Error('RadioCardItem must be used inside RadioCardGroup.');\n    }\n\n    const isSelected = context.selectedValue === value;\n\n    return (\n        <RadioButton\n            {...remainingProps}\n            name={context.name}\n            value={value}\n            custom\n            checked={isSelected}\n            onChange={event => context.onSelect(value, event as ChangeEvent<HTMLInputElement>)}\n            disabled={disabled}\n            className={classNames(\n                getCardClassName(isSelected, _itemIndex, _itemsCount, context.variant),\n                context.focusedValue === value && !isSelected && 'border-color-gray',\n                context.cardClassName,\n                className\n            )}\n            onFocus={() => context.setFocusedValue(value)}\n            onBlur={() => context.setFocusedValue(undefined)}\n        >\n            <div className='radio-text-wrapper display-flex'>{children}</div>\n        </RadioButton>\n    );\n};\n\ntype RadioCardIndicatorProps = Omit<HTMLProps<HTMLSpanElement>, 'children'>;\n\nexport const RadioCardIndicator = ({ className, ...remainingProps }: RadioCardIndicatorProps) => (\n    <span className={classNames('radio-text', className)} {...remainingProps} />\n);\n\nconst RadioCardGroup = (props: RadioCardGroupProps) => {\n    const {\n        name,\n        options = [],\n        value,\n        defaultValue,\n        variant = 'inline',\n        gap = 'gap-15',\n        onChange,\n        className,\n        cardClassName,\n        children,\n        ...remainingProps\n    } = props;\n\n    const isControlled = value !== null && value !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [focusedValue, setFocusedValue] = useState<string>();\n\n    const selectedValue = isControlled ? value : internalValue;\n\n    const handleChange = (nextValue: string) => (event: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) {\n            setInternalValue(nextValue);\n        }\n\n        onChange?.(nextValue, event);\n    };\n\n    const groupClassName = classNames(\n        variant === 'stacked' && 'display-flex flex-column',\n        variant === 'stacked-horizontal' && 'display-flex',\n        variant === 'inline' && 'display-flex',\n        variant === 'inline' && gap,\n        className\n    );\n\n    const contextValue: RadioCardGroupContextValue = {\n        name,\n        selectedValue,\n        variant,\n        cardClassName,\n        focusedValue,\n        setFocusedValue,\n        onSelect: (nextValue, event) => handleChange(nextValue)(event),\n    };\n\n    const itemChildren = Children.toArray(children).filter(child => isValidElement(child));\n    const mappedChildren = itemChildren.map((child, index) => {\n        if (!isValidElement<RadioCardItemProps & InternalRadioCardItemProps>(child) || child.type !== RadioCardItem) {\n            return child;\n        }\n\n        return cloneElement(child, {\n            _itemIndex: index,\n            _itemsCount: itemChildren.length,\n        });\n    });\n\n    const mappedOptions = options.map((option, index) => (\n        <RadioCardItem\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled}\n            className={option.className}\n            _itemIndex={index}\n            _itemsCount={options.length}\n        >\n            <RadioCardIndicator />\n            <div className='margin-left-5 margin-right-5'>\n                <div className='text-medium'>{option.label}</div>\n                {option.description && <div className='text-color-dark'>{option.description}</div>}\n            </div>\n        </RadioCardItem>\n    ));\n\n    return (\n        <RadioCardGroupContext.Provider value={contextValue}>\n            <div className={groupClassName} {...remainingProps}>\n                {mappedChildren.length > 0 ? mappedChildren : mappedOptions}\n            </div>\n        </RadioCardGroupContext.Provider>\n    );\n};\n\nexport default RadioCardGroup;\n"],"mappings":"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"}

package/components/releaseNotes/ReleaseNotes.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];
+export type NoteContent = (React.ReactNode | React.ReactElement) | (React.ReactNode | React.ReactElement)[];
 export type NoteProps = {
     version: string;
     note: {

package/components/releaseNotes/ReleaseNotes.js

@@ -1,19 +1,41 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { map as r, toPairs as o, isArray as c } from "es-toolkit/compat";
-const m = (s) => {
-  const { note: i, version: n } = s, { date: a, content: t } = i;
-  return /* @__PURE__ */ l("div", { className: "panel panel-default", children: [
-    /* @__PURE__ */ e("div", { className: "panel-heading", children: /* @__PURE__ */ l("div", { className: "display-flex justify-content-between", children: [
-      /* @__PURE__ */ e("span", { className: "text-size-16 text-medium", children: `${n}` }),
-      /* @__PURE__ */ e("span", { className: "text-thin", children: a })
-    ] }) }),
-    /* @__PURE__ */ e("div", { className: "panel-body white-space-pre-line", children: c(t) ? /* @__PURE__ */ e("ul", { className: "margin-bottom-0 margin-left-5 padding-left-25", children: r(t, (d) => /* @__PURE__ */ e("li", { children: d }, `${n}-note-${Math.random()}`)) }) : /* @__PURE__ */ e("div", { children: t }) })
-  ] }, `${n}-note`);
-}, N = (s) => {
-  const { releaseNotes: i, ...n } = s;
-  return /* @__PURE__ */ e("div", { ...n, children: r(o(i), ([a, t]) => /* @__PURE__ */ e(m, { note: t, version: a }, a)) });
+import { isArray as e, map as t, toPairs as n } from "es-toolkit/compat";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/releaseNotes/ReleaseNotes.tsx
+var a = (n) => {
+	let { note: a, version: o } = n, { date: s, content: c } = a;
+	return /* @__PURE__ */ i("div", {
+		className: "panel panel-default",
+		children: [/* @__PURE__ */ r("div", {
+			className: "panel-heading",
+			children: /* @__PURE__ */ i("div", {
+				className: "display-flex justify-content-between",
+				children: [/* @__PURE__ */ r("span", {
+					className: "text-size-16 text-medium",
+					children: `${o}`
+				}), /* @__PURE__ */ r("span", {
+					className: "text-thin",
+					children: s
+				})]
+			})
+		}), /* @__PURE__ */ r("div", {
+			className: "panel-body white-space-pre-line",
+			children: e(c) ? /* @__PURE__ */ r("ul", {
+				className: "margin-bottom-0 margin-left-5 padding-left-25",
+				children: t(c, (e) => /* @__PURE__ */ r("li", { children: e }, `${o}-note-${Math.random()}`))
+			}) : /* @__PURE__ */ r("div", { children: c })
+		})]
+	}, `${o}-note`);
+}, o = (e) => {
+	let { releaseNotes: i, ...o } = e;
+	return /* @__PURE__ */ r("div", {
+		...o,
+		children: t(n(i), ([e, t]) => /* @__PURE__ */ r(a, {
+			note: t,
+			version: e
+		}, e))
+	});
 };
-export {
-  N as default
-};
-//# sourceMappingURL=ReleaseNotes.js.map
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=ReleaseNotes.js.map

package/components/releaseNotes/ReleaseNotes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNotes.js","sources":["../../../src/components/releaseNotes/ReleaseNotes.tsx"],"sourcesContent":["import type React from 'react';\nimport { isArray, map, toPairs } from 'es-toolkit/compat';\n\nexport type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];\n\nexport type NoteProps = {\n    version: string;\n    note: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nconst Note = (props: NoteProps) => {\n    const { note, version } = props;\n    const { date, content } = note;\n    return (\n        <div className='panel panel-default' key={`${version}-note`}>\n            <div className='panel-heading'>\n                <div className='display-flex justify-content-between'>\n                    <span className='text-size-16 text-medium'>{`${version}`}</span>\n                    <span className='text-thin'>{date}</span>\n                </div>\n            </div>\n            <div className='panel-body white-space-pre-line'>\n                {isArray(content) ? (\n                    <ul className='margin-bottom-0 margin-left-5 padding-left-25'>\n                        {map(content, (item: React.ReactNode) => (\n                            <li key={`${version}-note-${Math.random()}`}>{item}</li>\n                        ))}\n                    </ul>\n                ) : (\n                    <div>{content}</div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport type ReleaseNotesData = {\n    [key: string]: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nexport type ReleaseNotesProps = {\n    /**\n     * Translated release notes of the following shape:\n     *\n     * @example\n     * {\n     *     \"0.1.2\": {\n     *         date: '23.07.2018',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Map view within the tour history table\n     *                 • Modern map design as used in the Beta of the fleet monitor\n     *                 • Works with all event types\n     *             </div>\n     *         ),\n     *     }\n     * }\n     */\n    releaseNotes: ReleaseNotesData;\n};\n\nconst ReleaseNotes = (props: ReleaseNotesProps) => {\n    const { releaseNotes, ...remainingProps } = props;\n    return (\n        <div {...remainingProps}>\n            {map(toPairs(releaseNotes), ([key, note]) => (\n                <Note key={key} note={note} version={key} />\n            ))}\n        </div>\n    );\n};\n\nexport default ReleaseNotes;\n"],"names":["Note","props","note","version","date","content","jsxs","jsx","isArray","map","item","ReleaseNotes","releaseNotes","remainingProps","toPairs","key"],"mappings":";;AAaA,MAAMA,IAAO,CAACC,MAAqB;AAC/B,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYF,GACpB,EAAE,MAAAG,GAAM,SAAAC,EAAA,IAAYH;AAC1B,SACI,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAU,iBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,GAAGJ,CAAO,IAAG;AAAA,MACzD,gBAAAI,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAK;AAAA,IAAA,EAAA,CACtC,EAAA,CACJ;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mCACV,UAAAC,EAAQH,CAAO,IACZ,gBAAAE,EAAC,MAAA,EAAG,WAAU,iDACT,UAAAE,EAAIJ,GAAS,CAACK,MACX,gBAAAH,EAAC,MAAA,EAA6C,UAAAG,EAAA,GAArC,GAAGP,CAAO,SAAS,KAAK,OAAA,CAAQ,EAAU,CACtD,EAAA,CACL,IAEA,gBAAAI,EAAC,OAAA,EAAK,aAAQ,EAAA,CAEtB;AAAA,EAAA,EAAA,GAjBsC,GAAGJ,CAAO,OAkBpD;AAER,GA8BMQ,IAAe,CAACV,MAA6B;AAC/C,QAAM,EAAE,cAAAW,GAAc,GAAGC,EAAA,IAAmBZ;AAC5C,SACI,gBAAAM,EAAC,SAAK,GAAGM,GACJ,YAAIC,EAAQF,CAAY,GAAG,CAAC,CAACG,GAAKb,CAAI,wBAClCF,GAAA,EAAe,MAAAE,GAAY,SAASa,EAAA,GAA1BA,CAA+B,CAC7C,GACL;AAER;"}
+{"version":3,"file":"ReleaseNotes.js","names":[],"sources":["../../../src/components/releaseNotes/ReleaseNotes.tsx"],"sourcesContent":["import type React from 'react';\nimport { isArray, map, toPairs } from 'es-toolkit/compat';\n\nexport type NoteContent = (React.ReactNode | React.ReactElement) | (React.ReactNode | React.ReactElement)[];\n\nexport type NoteProps = {\n    version: string;\n    note: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nconst Note = (props: NoteProps) => {\n    const { note, version } = props;\n    const { date, content } = note;\n    return (\n        <div className='panel panel-default' key={`${version}-note`}>\n            <div className='panel-heading'>\n                <div className='display-flex justify-content-between'>\n                    <span className='text-size-16 text-medium'>{`${version}`}</span>\n                    <span className='text-thin'>{date}</span>\n                </div>\n            </div>\n            <div className='panel-body white-space-pre-line'>\n                {isArray(content) ? (\n                    <ul className='margin-bottom-0 margin-left-5 padding-left-25'>\n                        {map(content, (item: React.ReactNode) => (\n                            <li key={`${version}-note-${Math.random()}`}>{item}</li>\n                        ))}\n                    </ul>\n                ) : (\n                    <div>{content}</div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport type ReleaseNotesData = {\n    [key: string]: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nexport type ReleaseNotesProps = {\n    /**\n     * Translated release notes of the following shape:\n     *\n     * @example\n     * {\n     *     \"0.1.2\": {\n     *         date: '23.07.2018',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Map view within the tour history table\n     *                 • Modern map design as used in the Beta of the fleet monitor\n     *                 • Works with all event types\n     *             </div>\n     *         ),\n     *     }\n     * }\n     */\n    releaseNotes: ReleaseNotesData;\n};\n\nconst ReleaseNotes = (props: ReleaseNotesProps) => {\n    const { releaseNotes, ...remainingProps } = props;\n    return (\n        <div {...remainingProps}>\n            {map(toPairs(releaseNotes), ([key, note]) => (\n                <Note key={key} note={note} version={key} />\n            ))}\n        </div>\n    );\n};\n\nexport default ReleaseNotes;\n"],"mappings":";;;AAaA,IAAM,KAAQ,MAAqB;CAC/B,IAAM,EAAE,SAAM,eAAY,GACpB,EAAE,SAAM,eAAY;CAC1B,OACI,kBAAC,OAAD;EAAK,WAAU;YAAf,CACI,kBAAC,OAAD;GAAK,WAAU;aACX,kBAAC,OAAD;IAAK,WAAU;cAAf,CACI,kBAAC,QAAD;KAAM,WAAU;eAA4B,GAAG;IAAgB,CAAA,GAC/D,kBAAC,QAAD;KAAM,WAAU;eAAa;IAAW,CAAA,CACvC;;EACJ,CAAA,GACL,kBAAC,OAAD;GAAK,WAAU;aACV,EAAQ,CAAO,IACZ,kBAAC,MAAD;IAAI,WAAU;cACT,EAAI,IAAU,MACX,kBAAC,MAAD,EAAA,UAA8C,EAAS,GAA9C,GAAG,EAAQ,QAAQ,KAAK,OAAO,GAAe,CAC1D;GACD,CAAA,IAEJ,kBAAC,OAAD,EAAA,UAAM,EAAa,CAAA;EAEtB,CAAA,CACJ;IAlBqC,GAAG,EAAQ,MAkBhD;AAEb,GA8BM,KAAgB,MAA6B;CAC/C,IAAM,EAAE,iBAAc,GAAG,MAAmB;CAC5C,OACI,kBAAC,OAAD;EAAK,GAAI;YACJ,EAAI,EAAQ,CAAY,IAAI,CAAC,GAAK,OAC/B,kBAAC,GAAD;GAAsB;GAAM,SAAS;EAAM,GAAhC,CAAgC,CAC9C;CACA,CAAA;AAEb"}