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

package/components/charts/chartHelper.js

@@ -1,15 +1,11 @@
-import c from "../../styles/variables/colors/colors.json.js";
-const s = c, i = "#a7afbb24", e = ["color-warmup-corn", "color-coldplay-khaki"], n = Object.keys(s).reverse().filter((o) => !e.includes(o)).map((o) => s[o]), p = (o) => n[o], l = (o) => o ? s[o] : void 0, C = (o) => {
-  if (!o)
-    return;
-  const r = { ...o }, { stroke: t } = r;
-  return r.stroke = t && !t.startsWith("#") ? l(t) : t, r;
+import e from "../../styles/variables/colors/colors.js";
+//#region src/components/charts/chartHelper.ts
+var t = e, n = "#a7afbb24", r = ["color-warmup-corn", "color-coldplay-khaki"], i = Object.keys(t).reverse().filter((e) => !r.includes(e)).map((e) => t[e]), a = (e) => i[e], o = (e) => e ? t[e] : void 0, s = (e) => {
+	if (!e) return;
+	let t = { ...e }, { stroke: n } = t;
+	return t.stroke = n && !n.startsWith("#") ? o(n) : n, t;
 };
-export {
-  i as CURSOR_BACKGROUND_COLOR,
-  n as defaultChartColors,
-  l as getColor,
-  p as getFromDefaultColors,
-  C as mapGridOptions
-};
-//# sourceMappingURL=chartHelper.js.map
+//#endregion
+export { n as CURSOR_BACKGROUND_COLOR, i as defaultChartColors, o as getColor, a as getFromDefaultColors, s as mapGridOptions };
+
+//# sourceMappingURL=chartHelper.js.map

package/components/charts/chartHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"chartHelper.js","sources":["../../../src/components/charts/chartHelper.ts"],"sourcesContent":["import colorsJson from '../../styles/variables/colors/colors.json';\n\ntype Colors = {\n    [key: string]: string;\n};\n\nconst colors: Colors = colorsJson;\n\nexport type DataType = Record<string, unknown> & { color?: string };\n\nexport const CURSOR_BACKGROUND_COLOR = '#a7afbb24';\n\nconst brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];\n\nexport const defaultChartColors = Object.keys(colors)\n    .reverse()\n    .filter(key => !brightColors.includes(key))\n    .map(key => colors[key]);\n\nexport const getFromDefaultColors = (index: number) => defaultChartColors[index];\n\nexport const getColor = (colorKey?: string) => (colorKey ? colors[colorKey] : undefined);\n\nexport const mapGridOptions = <T extends { stroke?: string }>(gridOptions?: T) => {\n    if (!gridOptions) {\n        return;\n    }\n\n    const mappedGridOptions = { ...gridOptions };\n    const { stroke } = mappedGridOptions;\n\n    mappedGridOptions.stroke = stroke && !stroke.startsWith('#') ? getColor(stroke) : stroke;\n\n    return mappedGridOptions;\n};\n"],"names":["colors","colorsJson","CURSOR_BACKGROUND_COLOR","brightColors","defaultChartColors","key","getFromDefaultColors","index","getColor","colorKey","mapGridOptions","gridOptions","mappedGridOptions","stroke"],"mappings":";AAMA,MAAMA,IAAiBC,GAIVC,IAA0B,aAEjCC,IAAe,CAAC,qBAAqB,sBAAsB,GAEpDC,IAAqB,OAAO,KAAKJ,CAAM,EAC/C,QAAA,EACA,OAAO,CAAAK,MAAO,CAACF,EAAa,SAASE,CAAG,CAAC,EACzC,IAAI,CAAAA,MAAOL,EAAOK,CAAG,CAAC,GAEdC,IAAuB,CAACC,MAAkBH,EAAmBG,CAAK,GAElEC,IAAW,CAACC,MAAuBA,IAAWT,EAAOS,CAAQ,IAAI,QAEjEC,IAAiB,CAAgCC,MAAoB;AAC9E,MAAI,CAACA;AACD;AAGJ,QAAMC,IAAoB,EAAE,GAAGD,EAAA,GACzB,EAAE,QAAAE,MAAWD;AAEnB,SAAAA,EAAkB,SAASC,KAAU,CAACA,EAAO,WAAW,GAAG,IAAIL,EAASK,CAAM,IAAIA,GAE3ED;AACX;"}
+{"version":3,"file":"chartHelper.js","names":[],"sources":["../../../src/components/charts/chartHelper.ts"],"sourcesContent":["import colorsJson from '../../styles/variables/colors/colors.json';\n\ntype Colors = {\n    [key: string]: string;\n};\n\nconst colors: Colors = colorsJson;\n\nexport type DataType = Record<string, unknown> & { color?: string };\n\nexport const CURSOR_BACKGROUND_COLOR = '#a7afbb24';\n\nconst brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];\n\nexport const defaultChartColors = Object.keys(colors)\n    .reverse()\n    .filter(key => !brightColors.includes(key))\n    .map(key => colors[key]);\n\nexport const getFromDefaultColors = (index: number) => defaultChartColors[index];\n\nexport const getColor = (colorKey?: string) => (colorKey ? colors[colorKey] : undefined);\n\nexport const mapGridOptions = <T extends { stroke?: string }>(gridOptions?: T) => {\n    if (!gridOptions) {\n        return;\n    }\n\n    const mappedGridOptions = { ...gridOptions };\n    const { stroke } = mappedGridOptions;\n\n    mappedGridOptions.stroke = stroke && !stroke.startsWith('#') ? getColor(stroke) : stroke;\n\n    return mappedGridOptions;\n};\n"],"mappings":";;AAMA,IAAM,IAAiB,GAIV,IAA0B,aAEjC,IAAe,CAAC,qBAAqB,sBAAsB,GAEpD,IAAqB,OAAO,KAAK,CAAM,CAAC,CAChD,QAAQ,CAAC,CACT,QAAO,MAAO,CAAC,EAAa,SAAS,CAAG,CAAC,CAAC,CAC1C,KAAI,MAAO,EAAO,EAAI,GAEd,KAAwB,MAAkB,EAAmB,IAE7D,KAAY,MAAuB,IAAW,EAAO,KAAY,KAAA,GAEjE,KAAiD,MAAoB;CAC9E,IAAI,CAAC,GACD;CAGJ,IAAM,IAAoB,EAAE,GAAG,EAAY,GACrC,EAAE,cAAW;CAInB,OAFA,EAAkB,SAAS,KAAU,CAAC,EAAO,WAAW,GAAG,IAAI,EAAS,CAAM,IAAI,GAE3E;AACX"}

package/components/checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
 import { default as React, ReactNode, PropsWithChildren } from 'react';
+import { IconType } from '../icon/Icon';
 declare const ICON_LABEL_VERTICAL = "vertical";
 declare const ICON_LABEL_HORIZONTAL = "horizontal";
 export type CheckboxProps = {
@@ -16,9 +17,15 @@ export type CheckboxProps = {
      */
     label?: string | ReactNode;
     /**
-     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.
+     * Define a custom icon for the checkbox by naming a uikit-icon icon like `icon-truck`.
      */
-    icon?: string;
+    iconName?: IconType;
+    /**
+     * Legacy alias for `iconName`.
+     *
+     * @deprecated Use `iconName` instead.
+     */
+    icon?: IconType;
     /**
      * The icon size in pixel.
      */

package/components/checkbox/Checkbox.js

@@ -1,101 +1,67 @@
-import { jsxs as F, jsx as r } from "react/jsx-runtime";
-import { useRef as H, useEffect as K } from "react";
-import { noop as k } from "es-toolkit/function";
-import p from "../../utils/classNames.js";
-import { CheckboxIcon as P } from "./CheckboxIcon.js";
-const S = 16, x = "vertical", V = "horizontal", I = (l) => {
-  const {
-    checked: L,
-    children: o,
-    className: d,
-    custom: m = !1,
-    defaultChecked: g,
-    disabled: c = !1,
-    error: N = !1,
-    icon: s = "",
-    iconLabelPosition: E = x,
-    iconSize: _ = S,
-    id: f = l.name,
-    indeterminate: a = !1,
-    inline: A = !1,
-    inputRef: O,
-    label: R,
-    name: D,
-    onChange: h = k,
-    onClick: u = k,
-    required: T = !1,
-    right: y,
-    size: C,
-    tabIndex: B = 0,
-    ...w
-  } = l, n = H(null);
-  K(() => {
-    const e = n.current?.firstChild;
-    e && (e.indeterminate = a);
-  }, [a, n.current]);
-  const z = (e) => {
-    switch (e.key) {
-      case " ":
-        b(e);
-        break;
-      case "Enter":
-        b(e);
-        break;
-    }
-  }, b = (e) => {
-    if (e.preventDefault(), c)
-      return;
-    const t = n.current?.firstChild;
-    t.indeterminate && (t.indeterminate = !1), t.checked = !t.checked, u(e), h(e);
-  }, i = R || o, Z = p(
-    "checkbox",
-    A && "checkbox-inline",
-    C === "large" && "checkbox-large",
-    y && "checkbox-right",
-    c && "disabled",
-    d
-  ), j = p(
-    N && "error",
-    C === "large" && "large",
-    a && "indeterminate",
-    d
-  );
-  return /* @__PURE__ */ F(
-    "label",
-    {
-      ...w,
-      className: Z,
-      tabIndex: B,
-      htmlFor: f,
-      onKeyDown: z,
-      ref: n,
-      children: [
-        /* @__PURE__ */ r(
-          "input",
-          {
-            id: f,
-            name: D,
-            type: "checkbox",
-            checked: L,
-            required: T,
-            defaultChecked: g,
-            disabled: c,
-            className: j,
-            onClick: u,
-            onChange: h,
-            ref: O
-          }
-        ),
-        !!s && /* @__PURE__ */ r(P, { icon: s, iconSize: _, iconLabelPosition: E, text: i }),
-        !s && !m && /* @__PURE__ */ r("span", { className: "checkbox-text", children: i && /* @__PURE__ */ r("span", { children: i }) }),
-        m && o && o
-      ]
-    }
-  );
+import e from "../../utils/classNames.js";
+import { CheckboxIcon as t } from "./CheckboxIcon.js";
+import { useEffect as n, useRef as r } from "react";
+import { noop as i } from "es-toolkit/function";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/checkbox/Checkbox.tsx
+var s = 16, c = "vertical", l = "horizontal", u = (l) => {
+	let { checked: u, children: d, className: f, custom: p = !1, defaultChecked: m, disabled: h = !1, error: g = !1, iconName: _, icon: v, iconLabelPosition: y = c, iconSize: b = s, id: x = l.name, indeterminate: S = !1, inline: C = !1, inputRef: w, label: T, name: E, onChange: D = i, onClick: O = i, required: k = !1, right: A, size: j, tabIndex: M = 0, ...N } = l, P = _ ?? v ?? "", F = r(null);
+	n(() => {
+		let e = F.current?.firstChild;
+		e && (e.indeterminate = S);
+	}, [S, F.current]);
+	let I = (e) => {
+		switch (e.key) {
+			case " ":
+				L(e);
+				break;
+			case "Enter":
+				L(e);
+				break;
+			default: break;
+		}
+	}, L = (e) => {
+		if (e.preventDefault(), h) return;
+		let t = F.current?.firstChild;
+		t.indeterminate &&= !1, t.checked = !t.checked, O(e), D(e);
+	}, R = T || d, z = e("checkbox", C && "checkbox-inline", j === "large" && "checkbox-large", A && "checkbox-right", h && "disabled", f), B = e(g && "error", j === "large" && "large", S && "indeterminate", f), V = !!P, H = p && d, U = !P && !p;
+	return /* @__PURE__ */ o("label", {
+		...N,
+		className: z,
+		tabIndex: M,
+		htmlFor: x,
+		onKeyDown: I,
+		ref: F,
+		children: [
+			/* @__PURE__ */ a("input", {
+				id: x,
+				name: E,
+				type: "checkbox",
+				checked: u,
+				required: k,
+				defaultChecked: m,
+				disabled: h,
+				className: B,
+				onClick: O,
+				onChange: D,
+				ref: w
+			}),
+			V && /* @__PURE__ */ a(t, {
+				iconName: P,
+				iconSize: b,
+				iconLabelPosition: y,
+				text: R
+			}),
+			U && /* @__PURE__ */ a("span", {
+				className: "checkbox-text",
+				children: R && /* @__PURE__ */ a("span", { children: R })
+			}),
+			H && d
+		]
+	});
 };
-I.ICON_LABEL_VERTICAL = x;
-I.ICON_LABEL_HORIZONTAL = V;
-export {
-  I as default
-};
-//# sourceMappingURL=Checkbox.js.map
+u.ICON_LABEL_VERTICAL = c, u.ICON_LABEL_HORIZONTAL = l;
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=Checkbox.js.map

package/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { CheckboxIcon } from './CheckboxIcon';\n\nconst DEFAULT_ICON_SIZE = 16;\n\nconst ICON_LABEL_VERTICAL = 'vertical';\nconst ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport type CheckboxProps = {\n    /**\n     * Passed through as HTML attribute to the underlying input.\n     * Set an `id` or a `name` otherwise.\n     */\n    id?: string;\n\n    /**\n     * Passed through as HTML attribute to the underlying input\n     */\n    name?: string;\n\n    /**\n     * Define some text or component as a label.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.\n     */\n    icon?: string;\n\n    /**\n     * The icon size in pixel.\n     */\n    iconSize?: number;\n\n    /**\n     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.\n     *\n     * Possible values are: `horizontal` or `vertical`.\n     */\n    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;\n\n    /**\n     * Callback function that is invoked when the checkbox is checked or unchecked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function that is invoked when the checkbox value changes.\n     * This will also be invoked by a keyboard event.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines whether the checkbox is checked or not (state cannot be changed).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the checkbox is initially checked or not (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled or not.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a checkbox tick.\n     * Note, when using the `custom` option, make sure to wrap the children with the class name\n     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name\n     * `checkbox-text`.\n     *\n     * @example\n     * <div className='checkbox-text-wrapper display-flex justify-content-between'>\n     *     <div className='margin-right-15'>\n     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>\n     *         <div className='text-color-dark'>This option is a first option</div>\n     *     </div>\n     *     <div className='checkbox-text' />\n     * </div>\n     */\n    custom?: boolean;\n\n    /**\n     * Defines whether the checkbox is required or not.\n     *\n     * @default false\n     */\n    required?: boolean;\n\n    /**\n     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different\n     * selection state.\n     *\n     * @default false\n     */\n    indeterminate?: boolean;\n\n    /**\n     * Defines whether the checkbox is applying an inline style. Use this in combination\n     * with other checkboxes.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Defines whether the checkbox is on the right side.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Use \"error\" to change color of the checkbox.\n     *\n     * @default false\n     */\n    error?: boolean;\n\n    /**\n     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.\n     *\n     * Possible values are:\n     * `large`\n     */\n    size?: 'large';\n\n    /**\n     * A React ref assigned to the input itself.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the input field.\n     */\n    className?: string;\n};\n\ntype CheckboxEvent =\n    | React.MouseEvent<HTMLInputElement>\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLLabelElement>;\n\nconst Checkbox = (props: PropsWithChildren<CheckboxProps>) => {\n    const {\n        checked,\n        children,\n        className,\n        custom = false,\n        defaultChecked,\n        disabled = false,\n        error = false,\n        icon = '',\n        iconLabelPosition = ICON_LABEL_VERTICAL,\n        iconSize = DEFAULT_ICON_SIZE,\n        id = props.name,\n        indeterminate = false,\n        inline = false,\n        inputRef,\n        label,\n        name,\n        onChange = noop,\n        onClick = noop,\n        required = false,\n        right,\n        size,\n        tabIndex = 0,\n        ...remainingProps\n    } = props;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useEffect(() => {\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n        if (input) {\n            input.indeterminate = indeterminate;\n        }\n    }, [indeterminate, labelRef.current]);\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ':\n                // toggle on space\n                toggle(event);\n                break;\n            case 'Enter':\n                // open on enter\n                toggle(event);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: CheckboxEvent) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n\n        if (input.indeterminate) {\n            input.indeterminate = false;\n        }\n\n        input.checked = !input.checked;\n\n        onClick(event as React.MouseEvent<HTMLInputElement>);\n        onChange(event as React.ChangeEvent<HTMLInputElement>);\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames(\n        'checkbox',\n        inline && 'checkbox-inline',\n        size === 'large' && 'checkbox-large',\n        right && 'checkbox-right',\n        disabled && 'disabled',\n        className\n    );\n\n    const inputClassnames = classNames(\n        error && 'error',\n        size === 'large' && 'large',\n        indeterminate && 'indeterminate',\n        className\n    );\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            htmlFor={id}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                id={id}\n                name={name}\n                type='checkbox'\n                checked={checked}\n                required={required}\n                defaultChecked={defaultChecked}\n                disabled={disabled}\n                className={inputClassnames}\n                onClick={onClick}\n                onChange={onChange}\n                ref={inputRef}\n            />\n            {renderCustomIcon && (\n                <CheckboxIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && <span className='checkbox-text'>{text && <span>{text}</span>}</span>}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nCheckbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL as typeof ICON_LABEL_VERTICAL;\nCheckbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL as typeof ICON_LABEL_HORIZONTAL;\n\nexport default Checkbox;\n"],"names":["DEFAULT_ICON_SIZE","ICON_LABEL_VERTICAL","ICON_LABEL_HORIZONTAL","Checkbox","props","checked","children","className","custom","defaultChecked","disabled","error","icon","iconLabelPosition","iconSize","id","indeterminate","inline","inputRef","label","name","onChange","noop","onClick","required","right","size","tabIndex","remainingProps","labelRef","useRef","useEffect","input","handleToggleKeyDown","event","toggle","text","labelClassnames","classNames","inputClassnames","jsxs","jsx","CheckboxIcon"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IAEpBC,IAAsB,YACtBC,IAAwB,cAwJxBC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,mBAAAC,IAAoBZ;AAAA,IACpB,UAAAa,IAAWd;AAAA,IACX,IAAAe,IAAKX,EAAM;AAAA,IACX,eAAAY,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,SAAAC,IAAUD;AAAA,IACV,UAAAE,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHxB,GAEEyB,IAAWC,EAAyB,IAAI;AAE9C,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAQH,EAAS,SAAS;AAChC,IAAIG,MACAA,EAAM,gBAAgBhB;AAAA,EAE9B,GAAG,CAACA,GAAea,EAAS,OAAO,CAAC;AAEpC,QAAMI,IAAsB,CAACC,MAAiD;AAC1E,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,MACJ,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAEA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAAyB;AAGrC,QAFAA,EAAM,eAAA,GAEFxB;AACA;AAGJ,UAAMsB,IAAQH,EAAS,SAAS;AAEhC,IAAIG,EAAM,kBACNA,EAAM,gBAAgB,KAG1BA,EAAM,UAAU,CAACA,EAAM,SAEvBT,EAAQW,CAA2C,GACnDb,EAASa,CAA4C;AAAA,EACzD,GAEME,IAAOjB,KAASb,GAEhB+B,IAAkBC;AAAA,IACpB;AAAA,IACArB,KAAU;AAAA,IACVS,MAAS,WAAW;AAAA,IACpBD,KAAS;AAAA,IACTf,KAAY;AAAA,IACZH;AAAA,EAAA,GAGEgC,IAAkBD;AAAA,IACpB3B,KAAS;AAAA,IACTe,MAAS,WAAW;AAAA,IACpBV,KAAiB;AAAA,IACjBT;AAAA,EAAA;AAOJ,SACI,gBAAAiC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWS;AAAA,MACX,UAAAV;AAAA,MACA,SAASZ;AAAA,MACT,WAAWkB;AAAA,MACX,KAAKJ;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAA1B;AAAA,YACA,MAAAK;AAAA,YACA,MAAK;AAAA,YACL,SAAAf;AAAA,YACA,UAAAmB;AAAA,YACA,gBAAAf;AAAA,YACA,UAAAC;AAAA,YACA,WAAW6B;AAAA,YACX,SAAAhB;AAAA,YACA,UAAAF;AAAA,YACA,KAAKH;AAAA,UAAA;AAAA,QAAA;AAAA,QAxBQ,CAAC,CAACN,KA2Bf,gBAAA6B,EAACC,GAAA,EAAa,MAAA9B,GAAY,UAAAE,GAAoB,mBAAAD,GAAsC,MAAAuB,GAAY;AAAA,QAzBtF,CAACxB,KAAQ,CAACJ,uBA2BL,QAAA,EAAK,WAAU,iBAAiB,UAAA4B,KAAQ,gBAAAK,EAAC,QAAA,EAAM,UAAAL,EAAA,CAAK,EAAA,CAAQ;AAAA,QA5B3D5B,KAAUF,KA6BNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAH,EAAS,sBAAsBF;AAC/BE,EAAS,wBAAwBD;"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport type { IconType } from '../icon/Icon';\n\nconst DEFAULT_ICON_SIZE = 16;\n\nconst ICON_LABEL_VERTICAL = 'vertical';\nconst ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport type CheckboxProps = {\n    /**\n     * Passed through as HTML attribute to the underlying input.\n     * Set an `id` or a `name` otherwise.\n     */\n    id?: string;\n\n    /**\n     * Passed through as HTML attribute to the underlying input\n     */\n    name?: string;\n\n    /**\n     * Define some text or component as a label.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Define a custom icon for the checkbox by naming a 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 icon size in pixel.\n     */\n    iconSize?: number;\n\n    /**\n     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.\n     *\n     * Possible values are: `horizontal` or `vertical`.\n     */\n    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;\n\n    /**\n     * Callback function that is invoked when the checkbox is checked or unchecked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function that is invoked when the checkbox value changes.\n     * This will also be invoked by a keyboard event.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines whether the checkbox is checked or not (state cannot be changed).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the checkbox is initially checked or not (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled or not.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a checkbox tick.\n     * Note, when using the `custom` option, make sure to wrap the children with the class name\n     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name\n     * `checkbox-text`.\n     *\n     * @example\n     * <div className='checkbox-text-wrapper display-flex justify-content-between'>\n     *     <div className='margin-right-15'>\n     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>\n     *         <div className='text-color-dark'>This option is a first option</div>\n     *     </div>\n     *     <div className='checkbox-text' />\n     * </div>\n     */\n    custom?: boolean;\n\n    /**\n     * Defines whether the checkbox is required or not.\n     *\n     * @default false\n     */\n    required?: boolean;\n\n    /**\n     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different\n     * selection state.\n     *\n     * @default false\n     */\n    indeterminate?: boolean;\n\n    /**\n     * Defines whether the checkbox is applying an inline style. Use this in combination\n     * with other checkboxes.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Defines whether the checkbox is on the right side.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Use \"error\" to change color of the checkbox.\n     *\n     * @default false\n     */\n    error?: boolean;\n\n    /**\n     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.\n     *\n     * Possible values are:\n     * `large`\n     */\n    size?: 'large';\n\n    /**\n     * A React ref assigned to the input itself.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the input field.\n     */\n    className?: string;\n};\n\ntype CheckboxEvent =\n    | React.MouseEvent<HTMLInputElement>\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLLabelElement>;\n\nconst Checkbox = (props: PropsWithChildren<CheckboxProps>) => {\n    const {\n        checked,\n        children,\n        className,\n        custom = false,\n        defaultChecked,\n        disabled = false,\n        error = false,\n        iconName,\n        icon: legacyIcon,\n        iconLabelPosition = ICON_LABEL_VERTICAL,\n        iconSize = DEFAULT_ICON_SIZE,\n        id = props.name,\n        indeterminate = false,\n        inline = false,\n        inputRef,\n        label,\n        name,\n        onChange = noop,\n        onClick = noop,\n        required = false,\n        right,\n        size,\n        tabIndex = 0,\n        ...remainingProps\n    } = props;\n\n    const resolvedIconName = iconName ?? legacyIcon ?? '';\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useEffect(() => {\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n        if (input) {\n            input.indeterminate = indeterminate;\n        }\n    }, [indeterminate, labelRef.current]);\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ':\n                // toggle on space\n                toggle(event);\n                break;\n            case 'Enter':\n                // open on enter\n                toggle(event);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: CheckboxEvent) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n\n        if (input.indeterminate) {\n            input.indeterminate = false;\n        }\n\n        input.checked = !input.checked;\n\n        onClick(event as React.MouseEvent<HTMLInputElement>);\n        onChange(event as React.ChangeEvent<HTMLInputElement>);\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames(\n        'checkbox',\n        inline && 'checkbox-inline',\n        size === 'large' && 'checkbox-large',\n        right && 'checkbox-right',\n        disabled && 'disabled',\n        className\n    );\n\n    const inputClassnames = classNames(\n        error && 'error',\n        size === 'large' && 'large',\n        indeterminate && 'indeterminate',\n        className\n    );\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            htmlFor={id}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                id={id}\n                name={name}\n                type='checkbox'\n                checked={checked}\n                required={required}\n                defaultChecked={defaultChecked}\n                disabled={disabled}\n                className={inputClassnames}\n                onClick={onClick}\n                onChange={onChange}\n                ref={inputRef}\n            />\n            {renderCustomIcon && (\n                <CheckboxIcon\n                    iconName={resolvedIconName}\n                    iconSize={iconSize}\n                    iconLabelPosition={iconLabelPosition}\n                    text={text}\n                />\n            )}\n            {renderDefault && <span className='checkbox-text'>{text && <span>{text}</span>}</span>}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nCheckbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL as typeof ICON_LABEL_VERTICAL;\nCheckbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL as typeof ICON_LABEL_HORIZONTAL;\n\nexport default Checkbox;\n"],"mappings":";;;;;;AAOA,IAAM,IAAoB,IAEpB,IAAsB,YACtB,IAAwB,cA+JxB,KAAY,MAA4C;CAC1D,IAAM,EACF,YACA,aACA,cACA,YAAS,IACT,mBACA,cAAW,IACX,WAAQ,IACR,aACA,MAAM,GACN,uBAAoB,GACpB,cAAW,GACX,QAAK,EAAM,MACX,mBAAgB,IAChB,YAAS,IACT,aACA,UACA,SACA,cAAW,GACX,aAAU,GACV,cAAW,IACX,UACA,SACA,cAAW,GACX,GAAG,MACH,GAEE,IAAmB,KAAY,KAAc,IAE7C,IAAW,EAAyB,IAAI;CAE9C,QAAgB;EACZ,IAAM,IAAQ,EAAS,SAAS;EAChC,AAAI,MACA,EAAM,gBAAgB;CAE9B,GAAG,CAAC,GAAe,EAAS,OAAO,CAAC;CAEpC,IAAM,KAAuB,MAAiD;EAC1E,QAAQ,EAAM,KAAd;GACI,KAAK;IAED,EAAO,CAAK;IACZ;GACJ,KAAK;IAED,EAAO,CAAK;IACZ;GACJ,SACI;EACR;CACJ,GAEM,KAAU,MAAyB;EAGrC,IAFA,EAAM,eAAe,GAEjB,GACA;EAGJ,IAAM,IAAQ,EAAS,SAAS;EAShC,AAPA,AACI,EAAM,kBAAgB,IAG1B,EAAM,UAAU,CAAC,EAAM,SAEvB,EAAQ,CAA2C,GACnD,EAAS,CAA4C;CACzD,GAEM,IAAO,KAAS,GAEhB,IAAkB,EACpB,YACA,KAAU,mBACV,MAAS,WAAW,kBACpB,KAAS,kBACT,KAAY,YACZ,CACJ,GAEM,IAAkB,EACpB,KAAS,SACT,MAAS,WAAW,SACpB,KAAiB,iBACjB,CACJ,GAEM,IAAmB,CAAC,CAAC,GACrB,IAAsB,KAAU,GAChC,IAAgB,CAAC,KAAoB,CAAC;CAE5C,OACI,kBAAC,SAAD;EACI,GAAI;EACJ,WAAW;EACD;EACV,SAAS;EACT,WAAW;EACX,KAAK;YANT;GAQI,kBAAC,SAAD;IACQ;IACE;IACN,MAAK;IACI;IACC;IACM;IACN;IACV,WAAW;IACF;IACC;IACV,KAAK;GACR,CAAA;GACA,KACG,kBAAC,GAAD;IACI,UAAU;IACA;IACS;IACb;GACT,CAAA;GAEJ,KAAiB,kBAAC,QAAD;IAAM,WAAU;cAAiB,KAAQ,kBAAC,QAAD,EAAA,UAAO,EAAW,CAAA;GAAQ,CAAA;GACpF,KAAuB;EACrB;;AAEf;AAEA,EAAS,sBAAsB,GAC/B,EAAS,wBAAwB"}

package/components/checkbox/CheckboxIcon.d.ts

@@ -1,6 +1,13 @@
 import { ReactNode } from 'react';
+import { IconType } from '../icon/Icon';
 type CheckboxIconProps = {
-    icon: string;
+    iconName?: IconType;
+    /**
+     * Legacy alias for `iconName`.
+     *
+     * @deprecated Use `iconName` instead.
+     */
+    icon?: IconType;
     iconSize: number;
     iconLabelPosition: 'vertical' | 'horizontal';
     text?: string | ReactNode;

package/components/checkbox/CheckboxIcon.js

@@ -1,17 +1,25 @@
-import { jsxs as l, jsx as c } from "react/jsx-runtime";
-const x = (o) => {
-  const { icon: n, iconSize: e, iconLabelPosition: s, text: i } = o, t = {
-    width: `${e}px`,
-    height: `${e}px`,
-    fontSize: `${e}px`,
-    lineHeight: `${e}px`
-  };
-  return /* @__PURE__ */ l("span", { className: `checkbox-icon label-${s}`, children: [
-    /* @__PURE__ */ c("span", { className: `rioglyph ${n}`, style: t }),
-    /* @__PURE__ */ c("span", { className: "checkbox-label", children: i })
-  ] });
+import { normalizeIconName as e } from "../../utils/iconNames.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/checkbox/CheckboxIcon.tsx
+var r = (r) => {
+	let { iconName: i, icon: a, iconSize: o, iconLabelPosition: s, text: c } = r, l = i ?? a ?? "", u = {
+		width: `${o}px`,
+		height: `${o}px`,
+		fontSize: `${o}px`,
+		lineHeight: `${o}px`
+	};
+	return /* @__PURE__ */ n("span", {
+		className: `checkbox-icon label-${s}`,
+		children: [/* @__PURE__ */ t("span", {
+			className: `uikit-icon ${e(l)}`,
+			style: u
+		}), /* @__PURE__ */ t("span", {
+			className: "checkbox-label",
+			children: c
+		})]
+	});
 };
-export {
-  x as CheckboxIcon
-};
-//# sourceMappingURL=CheckboxIcon.js.map
+//#endregion
+export { r as CheckboxIcon };
+
+//# sourceMappingURL=CheckboxIcon.js.map

package/components/checkbox/CheckboxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../../../src/components/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\ntype CheckboxIconProps = {\n    icon: string;\n    iconSize: number;\n    iconLabelPosition: 'vertical' | 'horizontal';\n    text?: string | ReactNode;\n};\n\nexport const CheckboxIcon = (props: CheckboxIconProps) => {\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={`checkbox-icon label-${iconLabelPosition}`}>\n            <span className={`rioglyph ${icon}`} style={iconStyles} />\n            <span className='checkbox-label'>{text}</span>\n        </span>\n    );\n};\n"],"names":["CheckboxIcon","props","icon","iconSize","iconLabelPosition","text","iconStyles","jsxs","jsx"],"mappings":";AASO,MAAMA,IAAe,CAACC,MAA6B;AACtD,QAAM,EAAE,MAAAC,GAAM,UAAAC,GAAU,mBAAAC,GAAmB,MAAAC,MAASJ,GAE9CK,IAAa;AAAA,IACf,OAAO,GAAGH,CAAQ;AAAA,IAClB,QAAQ,GAAGA,CAAQ;AAAA,IACnB,UAAU,GAAGA,CAAQ;AAAA,IACrB,YAAY,GAAGA,CAAQ;AAAA,EAAA;AAG3B,SACI,gBAAAI,EAAC,QAAA,EAAK,WAAW,uBAAuBH,CAAiB,IACrD,UAAA;AAAA,IAAA,gBAAAI,EAAC,UAAK,WAAW,YAAYN,CAAI,IAAI,OAAOI,GAAY;AAAA,IACxD,gBAAAE,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAH,EAAA,CAAK;AAAA,EAAA,GAC3C;AAER;"}
+{"version":3,"file":"CheckboxIcon.js","names":[],"sources":["../../../src/components/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { normalizeIconName } from '../../utils/iconNames';\nimport type { IconType } from '../icon/Icon';\n\ntype CheckboxIconProps = {\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\nexport const CheckboxIcon = (props: CheckboxIconProps) => {\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={`checkbox-icon label-${iconLabelPosition}`}>\n            <span className={`uikit-icon ${normalizeIconName(resolvedIconName)}`} style={iconStyles} />\n            <span className='checkbox-label'>{text}</span>\n        </span>\n    );\n};\n"],"mappings":";;;AAkBA,IAAa,KAAgB,MAA6B;CACtD,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,uBAAuB;YAAxC,CACI,kBAAC,QAAD;GAAM,WAAW,cAAc,EAAkB,CAAgB;GAAK,OAAO;EAAa,CAAA,GAC1F,kBAAC,QAAD;GAAM,WAAU;aAAkB;EAAW,CAAA,CAC3C;;AAEd"}