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

package/components/sidebars/SidebarFullscreenToggle.js

@@ -1,16 +1,24 @@
-import { jsx as e } from "react/jsx-runtime";
-import { noop as i } from "es-toolkit/function";
-import m from "../../utils/classNames.js";
-import l from "../button/Button.js";
-import a from "../tooltip/SimpleTooltip.js";
-const g = ({ isFullscreen: t, tooltip: o, onClick: s = i }) => {
-  const n = m(
-    "rioglyph",
-    t ? "rioglyph-resize-small" : "rioglyph-resize-full"
-  ), r = /* @__PURE__ */ e(l, { bsStyle: l.MUTED, iconOnly: !0, onClick: s, "data-testid": "sidebarFullscreenToggle", children: /* @__PURE__ */ e("span", { className: n }) });
-  return o ? /* @__PURE__ */ e(a, { content: o, placement: "bottom", children: r }) : r;
+import e from "../../utils/classNames.js";
+import t from "../tooltip/SimpleTooltip.js";
+import n from "../button/Button.js";
+import { noop as r } from "es-toolkit/function";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/sidebars/SidebarFullscreenToggle.tsx
+var a = ({ isFullscreen: a, tooltip: o, onClick: s = r }) => {
+	let c = e("uikit-icon", a ? "icon-resize-small" : "icon-resize-full"), l = /* @__PURE__ */ i(n, {
+		bsStyle: n.MUTED,
+		iconOnly: !0,
+		onClick: s,
+		"data-testid": "sidebarFullscreenToggle",
+		children: /* @__PURE__ */ i("span", { className: c })
+	});
+	return o ? /* @__PURE__ */ i(t, {
+		content: o,
+		placement: "bottom",
+		children: l
+	}) : l;
 };
-export {
-  g as default
-};
-//# sourceMappingURL=SidebarFullscreenToggle.js.map
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=SidebarFullscreenToggle.js.map

package/components/sidebars/SidebarFullscreenToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFullscreenToggle.js","sources":["../../../src/components/sidebars/SidebarFullscreenToggle.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport Button from '../button/Button';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\n\nexport type SidebarFullscreenToggleProps = {\n    isFullscreen?: boolean;\n    tooltip?: string;\n    onClick?: VoidFunction;\n};\n\nconst SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop }: SidebarFullscreenToggleProps) => {\n    const fullscreenIconClasses = classNames(\n        'rioglyph',\n        isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full'\n    );\n\n    const button = (\n        <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarFullscreenToggle'>\n            <span className={fullscreenIconClasses} />\n        </Button>\n    );\n\n    if (tooltip) {\n        return (\n            <SimpleTooltip content={tooltip} placement='bottom'>\n                {button}\n            </SimpleTooltip>\n        );\n    }\n\n    return button;\n};\n\nexport default SidebarFullscreenToggle;\n"],"names":["SidebarFullscreenToggle","isFullscreen","tooltip","onClick","noop","fullscreenIconClasses","classNames","button","jsx","Button","SimpleTooltip"],"mappings":";;;;;AAYA,MAAMA,IAA0B,CAAC,EAAE,cAAAC,GAAc,SAAAC,GAAS,SAAAC,IAAUC,QAAyC;AACzG,QAAMC,IAAwBC;AAAA,IAC1B;AAAA,IACAL,IAAe,0BAA0B;AAAA,EAAA,GAGvCM,IACF,gBAAAC,EAACC,GAAA,EAAO,SAASA,EAAO,OAAO,UAAQ,IAAC,SAAAN,GAAkB,eAAY,2BAClE,UAAA,gBAAAK,EAAC,QAAA,EAAK,WAAWH,GAAuB,GAC5C;AAGJ,SAAIH,sBAEKQ,GAAA,EAAc,SAASR,GAAS,WAAU,UACtC,UAAAK,GACL,IAIDA;AACX;"}
+{"version":3,"file":"SidebarFullscreenToggle.js","names":[],"sources":["../../../src/components/sidebars/SidebarFullscreenToggle.tsx"],"sourcesContent":["import { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport Button from '../button/Button';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\n\nexport type SidebarFullscreenToggleProps = {\n    isFullscreen?: boolean;\n    tooltip?: string;\n    onClick?: VoidFunction;\n};\n\nconst SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop }: SidebarFullscreenToggleProps) => {\n    const fullscreenIconClasses = classNames('uikit-icon', isFullscreen ? 'icon-resize-small' : 'icon-resize-full');\n\n    const button = (\n        <Button bsStyle={Button.MUTED} iconOnly onClick={onClick} data-testid='sidebarFullscreenToggle'>\n            <span className={fullscreenIconClasses} />\n        </Button>\n    );\n\n    if (tooltip) {\n        return (\n            <SimpleTooltip content={tooltip} placement='bottom'>\n                {button}\n            </SimpleTooltip>\n        );\n    }\n\n    return button;\n};\n\nexport default SidebarFullscreenToggle;\n"],"mappings":";;;;;;AAYA,IAAM,KAA2B,EAAE,iBAAc,YAAS,aAAU,QAAyC;CACzG,IAAM,IAAwB,EAAW,cAAc,IAAe,sBAAsB,kBAAkB,GAExG,IACF,kBAAC,GAAD;EAAQ,SAAS,EAAO;EAAO,UAAA;EAAkB;EAAS,eAAY;YAClE,kBAAC,QAAD,EAAM,WAAW,EAAwB,CAAA;CACrC,CAAA;CAWZ,OARI,IAEI,kBAAC,GAAD;EAAe,SAAS;EAAS,WAAU;YACtC;CACU,CAAA,IAIhB;AACX"}

package/components/slider/RangeSlider.js

@@ -1,113 +1,106 @@
-import { jsxs as W, jsx as c } from "react/jsx-runtime";
-import { useState as u, useEffect as Z } from "react";
-import { noop as A } from "es-toolkit/compat";
-import ee from "../../utils/classNames.js";
-import { getCurrentBackgroundColor as te } from "../../utils/currentColors.js";
-const M = (r, t) => {
-  const o = t <= r ? t : r, m = r >= t ? r : t;
-  return [o, m];
-}, ie = (r) => {
-  const {
-    minValue: t = 0,
-    maxValue: o = Number.MAX_VALUE,
-    valueLabels: m = !1,
-    valueLabelUnit: v,
-    step: C = 1,
-    color: B = "primary",
-    leftValue: N,
-    rightValue: k,
-    className: w,
-    disabled: P = !1,
-    onChange: E = A,
-    onDragEnd: b = A,
-    ...X
-  } = r, [j, R] = u(!1), [z, p] = u(!1), [a, x] = u(N || t), [n, $] = u(k || o), [y, g] = u(!1), [I, f] = u(!1);
-  Z(() => {
-    a >= t && a <= o && n >= t && n <= o && (x(a), $(n));
-  }, [a, n, t, o]);
-  const U = (e) => {
-    const s = e.valueLeft ? e.valueLeft : a, l = e.valueRight ? e.valueRight : n;
-    x(s), $(l), g(!!e.valueLeft), f(!!e.valueRight);
-    const [i, h] = M(s, l);
-    E(i, h);
-  }, H = (e) => {
-    U({ valueLeft: Number.parseInt(e.target.value, 10) });
-  }, S = (e) => {
-    U({ valueRight: Number.parseInt(e.target.value, 10) });
-  }, T = () => {
-    g(!0), f(!1);
-  }, _ = () => {
-    g(!1), f(!0);
-  }, D = (e) => {
-    const s = (a - t) / (o - t), l = (n - t) / (o - t);
-    return (s + l) / 2 * e;
-  }, q = (e) => {
-    const s = e.target;
-    if (!y) {
-      const l = s.getBoundingClientRect(), i = e.clientX - l.left, h = s.offsetWidth, d = D(h);
-      n > a && i > d && (R(!1), p(!0)), n < a && i < d && (R(!1), p(!0));
-    }
-  }, F = (e) => {
-    const s = e.target;
-    if (!I) {
-      const l = s.getBoundingClientRect(), i = e.clientX - l.left, h = s.offsetWidth, d = D(h);
-      n > a && i < d && (R(!0), p(!1)), n < a && i > d && (R(!0), p(!1));
-    }
-  }, G = () => {
-    g(!1), f(!1);
-    const [e, s] = M(a, n);
-    b(e, s);
-  }, J = () => {
-    g(!1), f(!1);
-    const [e, s] = M(a, n);
-    b(e, s);
-  }, [L, V] = M(a, n), K = 100 * (V - L) / (o - t), O = 100 * (L - t) / (o - t), Q = ee(
-    "range-slider",
-    P && "disabled",
-    m && "show-value-labels",
-    w && w
-  ), Y = te(B);
-  return /* @__PURE__ */ W("div", { ...X, className: Q, style: { color: Y }, children: [
-    /* @__PURE__ */ c("div", { className: "range-whole-track" }),
-    /* @__PURE__ */ c("div", { className: "range-track", style: { width: `${K}%`, left: `${O}%` }, children: m && /* @__PURE__ */ W("div", { className: "user-select-none", children: [
-      /* @__PURE__ */ c("div", { className: "range-value", children: /* @__PURE__ */ c("span", { children: v ? `${L} ${v}` : L }) }),
-      /* @__PURE__ */ c("div", { className: "range-value", children: /* @__PURE__ */ c("span", { children: v ? `${V} ${v}` : V }) })
-    ] }) }),
-    /* @__PURE__ */ c(
-      "input",
-      {
-        className: `${y ? "changing" : ""}`,
-        style: { zIndex: j ? "6" : "5" },
-        value: a,
-        min: t,
-        max: o,
-        step: C,
-        type: "range",
-        onChange: H,
-        onMouseDown: T,
-        onMouseMove: q,
-        onMouseUp: G
-      }
-    ),
-    /* @__PURE__ */ c(
-      "input",
-      {
-        className: `${I ? "changing" : ""}`,
-        style: { zIndex: z ? "6" : "5" },
-        value: n,
-        min: t,
-        max: o,
-        step: C,
-        type: "range",
-        onChange: S,
-        onMouseDown: _,
-        onMouseMove: F,
-        onMouseUp: J
-      }
-    )
-  ] });
+import e from "../../utils/classNames.js";
+import { getCurrentBackgroundColor as t } from "../../utils/currentColors.js";
+import { useEffect as n, useState as r } from "react";
+import { noop as i } from "es-toolkit/compat";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/slider/RangeSlider.tsx
+var s = (e, t) => [t <= e ? t : e, e >= t ? e : t], c = (c) => {
+	let { minValue: l = 0, maxValue: u = Number.MAX_VALUE, valueLabels: d = !1, valueLabelUnit: f, step: p = 1, color: m = "primary", leftValue: h, rightValue: g, className: _, disabled: v = !1, onChange: y = i, onDragEnd: b = i, ...x } = c, [S, C] = r(!1), [w, T] = r(!1), [E, D] = r(h || l), [O, k] = r(g || u), [A, j] = r(!1), [M, N] = r(!1);
+	n(() => {
+		E >= l && E <= u && O >= l && O <= u && (D(E), k(O));
+	}, [
+		E,
+		O,
+		l,
+		u
+	]);
+	let P = (e) => {
+		let t = e.valueLeft ? e.valueLeft : E, n = e.valueRight ? e.valueRight : O;
+		D(t), k(n), j(!!e.valueLeft), N(!!e.valueRight);
+		let [r, i] = s(t, n);
+		y(r, i);
+	}, F = (e) => {
+		P({ valueLeft: Number.parseInt(e.target.value, 10) });
+	}, I = (e) => {
+		P({ valueRight: Number.parseInt(e.target.value, 10) });
+	}, L = () => {
+		j(!0), N(!1);
+	}, R = () => {
+		j(!1), N(!0);
+	}, z = (e) => ((E - l) / (u - l) + (O - l) / (u - l)) / 2 * e, B = (e) => {
+		let t = e.target;
+		if (!A) {
+			let n = t.getBoundingClientRect(), r = e.clientX - n.left, i = t.offsetWidth, a = z(i);
+			O > E && r > a && (C(!1), T(!0)), O < E && r < a && (C(!1), T(!0));
+		}
+	}, V = (e) => {
+		let t = e.target;
+		if (!M) {
+			let n = t.getBoundingClientRect(), r = e.clientX - n.left, i = t.offsetWidth, a = z(i);
+			O > E && r < a && (C(!0), T(!1)), O < E && r > a && (C(!0), T(!1));
+		}
+	}, H = () => {
+		j(!1), N(!1);
+		let [e, t] = s(E, O);
+		b(e, t);
+	}, U = () => {
+		j(!1), N(!1);
+		let [e, t] = s(E, O);
+		b(e, t);
+	}, [W, G] = s(E, O), K = 100 * (G - W) / (u - l), q = 100 * (W - l) / (u - l), J = e("range-slider", v && "disabled", d && "show-value-labels", _ && _), Y = t(m);
+	return /* @__PURE__ */ o("div", {
+		...x,
+		className: J,
+		style: { color: Y },
+		children: [
+			/* @__PURE__ */ a("div", { className: "range-whole-track" }),
+			/* @__PURE__ */ a("div", {
+				className: "range-track",
+				style: {
+					width: `${K}%`,
+					left: `${q}%`
+				},
+				children: d && /* @__PURE__ */ o("div", {
+					className: "user-select-none",
+					children: [/* @__PURE__ */ a("div", {
+						className: "range-value",
+						children: /* @__PURE__ */ a("span", { children: f ? `${W} ${f}` : W })
+					}), /* @__PURE__ */ a("div", {
+						className: "range-value",
+						children: /* @__PURE__ */ a("span", { children: f ? `${G} ${f}` : G })
+					})]
+				})
+			}),
+			/* @__PURE__ */ a("input", {
+				className: `${A ? "changing" : ""}`,
+				style: { zIndex: S ? "6" : "5" },
+				value: E,
+				min: l,
+				max: u,
+				step: p,
+				type: "range",
+				onChange: F,
+				onMouseDown: L,
+				onMouseMove: B,
+				onMouseUp: H
+			}),
+			/* @__PURE__ */ a("input", {
+				className: `${M ? "changing" : ""}`,
+				style: { zIndex: w ? "6" : "5" },
+				value: O,
+				min: l,
+				max: u,
+				step: p,
+				type: "range",
+				onChange: I,
+				onMouseDown: R,
+				onMouseMove: V,
+				onMouseUp: U
+			})
+		]
+	});
 };
-export {
-  ie as default
-};
-//# sourceMappingURL=RangeSlider.js.map
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=RangeSlider.js.map

package/components/slider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sources":["../../../src/components/slider/RangeSlider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, type MouseEvent, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nconst getRangeValues = (valueLeft: number, valueRight: number) => {\n    const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;\n    const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;\n    return [finalLeftValue, finalRightValue];\n};\n\nexport type RangeSliderProps = {\n    /**\n     * The current left value of the selected range.\n     */\n    leftValue?: number;\n\n    /**\n     * The current right value of the selected range.\n     */\n    rightValue?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value labels.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst RangeSlider = (props: RangeSliderProps) => {\n    const {\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        step = 1,\n        color = 'primary',\n        leftValue,\n        rightValue,\n        className,\n        disabled = false,\n        onChange = noop,\n        onDragEnd = noop,\n        ...remainingProps\n    } = props;\n\n    const [activeLeft, setActiveLeft] = useState(false);\n    const [activeRight, setActiveRight] = useState(false);\n    const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);\n    const [valueRight, setValueRight] = useState(rightValue ? rightValue : maxValue);\n    const [isChangingLeft, setIsChangingLeft] = useState(false);\n    const [isChangingRight, setIsChangingRight] = useState(false);\n\n    useEffect(() => {\n        if (valueLeft >= minValue && valueLeft <= maxValue && valueRight >= minValue && valueRight <= maxValue) {\n            setValueLeft(valueLeft);\n            setValueRight(valueRight);\n        }\n    }, [valueLeft, valueRight, minValue, maxValue]);\n\n    const changeValues = (newValues: { valueLeft?: number; valueRight?: number }) => {\n        const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;\n        const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;\n\n        setValueLeft(newValueLeft);\n        setValueRight(newValueRight);\n\n        setIsChangingLeft(!!newValues.valueLeft);\n        setIsChangingRight(!!newValues.valueRight);\n\n        const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);\n        onChange(newLeftValue, newRightValue);\n    };\n\n    const handleChangeValueLeft = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });\n    };\n\n    const handleChangeValueRight = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });\n    };\n\n    const onMouseDownLeft = () => {\n        setIsChangingLeft(true);\n        setIsChangingRight(false);\n    };\n\n    const onMouseDownRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(true);\n    };\n\n    const getTrackMiddlePosition = (targetWidth: number) => {\n        const trackValueLeftRelative = (valueLeft - minValue) / (maxValue - minValue);\n        const trackValueRightRelative = (valueRight - minValue) / (maxValue - minValue);\n        const trackMiddleRelative = (trackValueLeftRelative + trackValueRightRelative) / 2;\n\n        return trackMiddleRelative * targetWidth;\n    };\n\n    const onMouseMoveLeft = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingLeft) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n\n            if (valueRight < valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n        }\n    };\n\n    const onMouseMoveRight = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingRight) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n\n            if (valueRight < valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n        }\n    };\n\n    const onMouseUpLeft = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const onMouseUpRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const [finalLeftValue, finalRightValue] = getRangeValues(valueLeft, valueRight);\n\n    const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);\n    const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        className && className\n    );\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%`, left: `${trackLeft}%` }}>\n                {valueLabels && (\n                    <div className='user-select-none'>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue}</span>\n                        </div>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue}</span>\n                        </div>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChangingLeft ? 'changing' : ''}`}\n                style={{ zIndex: activeLeft ? '6' : '5' }}\n                value={valueLeft}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueLeft}\n                onMouseDown={onMouseDownLeft}\n                onMouseMove={onMouseMoveLeft}\n                onMouseUp={onMouseUpLeft}\n            />\n            <input\n                className={`${isChangingRight ? 'changing' : ''}`}\n                style={{ zIndex: activeRight ? '6' : '5' }}\n                value={valueRight}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueRight}\n                onMouseDown={onMouseDownRight}\n                onMouseMove={onMouseMoveRight}\n                onMouseUp={onMouseUpRight}\n            />\n        </div>\n    );\n};\n\nexport default RangeSlider;\n"],"names":["getRangeValues","valueLeft","valueRight","finalLeftValue","finalRightValue","RangeSlider","props","minValue","maxValue","valueLabels","valueLabelUnit","step","color","leftValue","rightValue","className","disabled","onChange","noop","onDragEnd","remainingProps","activeLeft","setActiveLeft","useState","activeRight","setActiveRight","setValueLeft","setValueRight","isChangingLeft","setIsChangingLeft","isChangingRight","setIsChangingRight","useEffect","changeValues","newValues","newValueLeft","newValueRight","newLeftValue","newRightValue","handleChangeValueLeft","event","handleChangeValueRight","onMouseDownLeft","onMouseDownRight","getTrackMiddlePosition","targetWidth","trackValueLeftRelative","trackValueRightRelative","onMouseMoveLeft","target","clientRect","mouseHover","trackMiddlePosition","onMouseMoveRight","onMouseUpLeft","onMouseUpRight","trackWidth","trackLeft","wrapperClassNames","classNames","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"RangeSlider.js","names":[],"sources":["../../../src/components/slider/RangeSlider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, type MouseEvent, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nconst getRangeValues = (valueLeft: number, valueRight: number) => {\n    const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;\n    const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;\n    return [finalLeftValue, finalRightValue];\n};\n\nexport type RangeSliderProps = {\n    /**\n     * The current left value of the selected range.\n     */\n    leftValue?: number;\n\n    /**\n     * The current right value of the selected range.\n     */\n    rightValue?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value labels.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newLeftValue: number, newRightValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst RangeSlider = (props: RangeSliderProps) => {\n    const {\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        step = 1,\n        color = 'primary',\n        leftValue,\n        rightValue,\n        className,\n        disabled = false,\n        onChange = noop,\n        onDragEnd = noop,\n        ...remainingProps\n    } = props;\n\n    const [activeLeft, setActiveLeft] = useState(false);\n    const [activeRight, setActiveRight] = useState(false);\n    const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);\n    const [valueRight, setValueRight] = useState(rightValue ? rightValue : maxValue);\n    const [isChangingLeft, setIsChangingLeft] = useState(false);\n    const [isChangingRight, setIsChangingRight] = useState(false);\n\n    useEffect(() => {\n        if (valueLeft >= minValue && valueLeft <= maxValue && valueRight >= minValue && valueRight <= maxValue) {\n            setValueLeft(valueLeft);\n            setValueRight(valueRight);\n        }\n    }, [valueLeft, valueRight, minValue, maxValue]);\n\n    const changeValues = (newValues: { valueLeft?: number; valueRight?: number }) => {\n        const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;\n        const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;\n\n        setValueLeft(newValueLeft);\n        setValueRight(newValueRight);\n\n        setIsChangingLeft(!!newValues.valueLeft);\n        setIsChangingRight(!!newValues.valueRight);\n\n        const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);\n        onChange(newLeftValue, newRightValue);\n    };\n\n    const handleChangeValueLeft = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });\n    };\n\n    const handleChangeValueRight = (event: ChangeEvent<HTMLInputElement>) => {\n        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });\n    };\n\n    const onMouseDownLeft = () => {\n        setIsChangingLeft(true);\n        setIsChangingRight(false);\n    };\n\n    const onMouseDownRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(true);\n    };\n\n    const getTrackMiddlePosition = (targetWidth: number) => {\n        const trackValueLeftRelative = (valueLeft - minValue) / (maxValue - minValue);\n        const trackValueRightRelative = (valueRight - minValue) / (maxValue - minValue);\n        const trackMiddleRelative = (trackValueLeftRelative + trackValueRightRelative) / 2;\n\n        return trackMiddleRelative * targetWidth;\n    };\n\n    const onMouseMoveLeft = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingLeft) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n\n            if (valueRight < valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(false);\n                setActiveRight(true);\n            }\n        }\n    };\n\n    const onMouseMoveRight = (event: MouseEvent<HTMLInputElement>) => {\n        const target = event.target as HTMLInputElement;\n        if (!isChangingRight) {\n            const clientRect = target.getBoundingClientRect();\n            const mouseHover = event.clientX - clientRect.left;\n            const targetWidth = target.offsetWidth;\n\n            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);\n\n            if (valueRight > valueLeft && mouseHover < trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n\n            if (valueRight < valueLeft && mouseHover > trackMiddlePosition) {\n                setActiveLeft(true);\n                setActiveRight(false);\n            }\n        }\n    };\n\n    const onMouseUpLeft = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const onMouseUpRight = () => {\n        setIsChangingLeft(false);\n        setIsChangingRight(false);\n\n        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);\n        onDragEnd(newLeftValue, newRightValue);\n    };\n\n    const [finalLeftValue, finalRightValue] = getRangeValues(valueLeft, valueRight);\n\n    const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);\n    const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        className && className\n    );\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%`, left: `${trackLeft}%` }}>\n                {valueLabels && (\n                    <div className='user-select-none'>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue}</span>\n                        </div>\n                        <div className='range-value'>\n                            <span>{valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue}</span>\n                        </div>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChangingLeft ? 'changing' : ''}`}\n                style={{ zIndex: activeLeft ? '6' : '5' }}\n                value={valueLeft}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueLeft}\n                onMouseDown={onMouseDownLeft}\n                onMouseMove={onMouseMoveLeft}\n                onMouseUp={onMouseUpLeft}\n            />\n            <input\n                className={`${isChangingRight ? 'changing' : ''}`}\n                style={{ zIndex: activeRight ? '6' : '5' }}\n                value={valueRight}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChangeValueRight}\n                onMouseDown={onMouseDownRight}\n                onMouseMove={onMouseMoveRight}\n                onMouseUp={onMouseUpRight}\n            />\n        </div>\n    );\n};\n\nexport default RangeSlider;\n"],"mappings":"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"}

package/components/slider/Slider.js

@@ -1,63 +1,55 @@
-import { jsxs as M, jsx as l } from "react/jsx-runtime";
-import { useState as m, useEffect as U } from "react";
-import { noop as d } from "es-toolkit/compat";
-import j from "../../utils/classNames.js";
-import { getCurrentBackgroundColor as A } from "../../utils/currentColors.js";
-const X = (g) => {
-  const {
-    value: e = 0,
-    minValue: a = 0,
-    maxValue: r = Number.MAX_VALUE,
-    valueLabels: o = !1,
-    valueLabelUnit: t,
-    largeValueLabels: h = !1,
-    hideValueBar: p = !1,
-    color: f = "primary",
-    step: v = 1,
-    onChange: b = d,
-    onDragEnd: C = d,
-    className: i,
-    disabled: N = !1,
-    ...V
-  } = g, [s, c] = m(e || a), [w, n] = m(!1);
-  U(() => {
-    e >= a && e <= r && c(e);
-  }, [e, a, r]);
-  const k = (E) => {
-    const u = Number.parseInt(E.target.value, 10);
-    c(u), n(!0), b(u);
-  }, x = () => {
-    n(!1), C(s);
-  }, y = () => {
-    n(!0);
-  }, L = j(
-    "range-slider",
-    N && "disabled",
-    o && "show-value-labels",
-    p && "hide-value-bar",
-    h && "large-value-labels",
-    i && i
-  ), $ = 100 * (s - a) / (r - a), B = A(f);
-  return /* @__PURE__ */ M("div", { ...V, className: L, style: { color: B }, children: [
-    /* @__PURE__ */ l("div", { className: "range-whole-track" }),
-    /* @__PURE__ */ l("div", { className: "range-track", style: { width: `${$}%` }, children: o && /* @__PURE__ */ l("div", { className: "range-value", children: /* @__PURE__ */ l("span", { children: t ? `${s} ${t}` : s }) }) }),
-    /* @__PURE__ */ l(
-      "input",
-      {
-        className: `${w ? "changing" : ""}`,
-        value: s,
-        min: a,
-        max: r,
-        step: v,
-        type: "range",
-        onChange: k,
-        onMouseDown: y,
-        onMouseUp: x
-      }
-    )
-  ] });
+import e from "../../utils/classNames.js";
+import { getCurrentBackgroundColor as t } from "../../utils/currentColors.js";
+import { useEffect as n, useState as r } from "react";
+import { noop as i } from "es-toolkit/compat";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/slider/Slider.tsx
+var s = (s) => {
+	let { value: c = 0, minValue: l = 0, maxValue: u = Number.MAX_VALUE, valueLabels: d = !1, valueLabelUnit: f, largeValueLabels: p = !1, hideValueBar: m = !1, color: h = "primary", step: g = 1, onChange: _ = i, onDragEnd: v = i, className: y, disabled: b = !1, ...x } = s, [S, C] = r(c || l), [w, T] = r(!1);
+	n(() => {
+		c >= l && c <= u && C(c);
+	}, [
+		c,
+		l,
+		u
+	]);
+	let E = (e) => {
+		let t = Number.parseInt(e.target.value, 10);
+		C(t), T(!0), _(t);
+	}, D = () => {
+		T(!1), v(S);
+	}, O = () => {
+		T(!0);
+	}, k = e("range-slider", b && "disabled", d && "show-value-labels", m && "hide-value-bar", p && "large-value-labels", y && y), A = 100 * (S - l) / (u - l), j = t(h);
+	return /* @__PURE__ */ o("div", {
+		...x,
+		className: k,
+		style: { color: j },
+		children: [
+			/* @__PURE__ */ a("div", { className: "range-whole-track" }),
+			/* @__PURE__ */ a("div", {
+				className: "range-track",
+				style: { width: `${A}%` },
+				children: d && /* @__PURE__ */ a("div", {
+					className: "range-value",
+					children: /* @__PURE__ */ a("span", { children: f ? `${S} ${f}` : S })
+				})
+			}),
+			/* @__PURE__ */ a("input", {
+				className: `${w ? "changing" : ""}`,
+				value: S,
+				min: l,
+				max: u,
+				step: g,
+				type: "range",
+				onChange: E,
+				onMouseDown: O,
+				onMouseUp: D
+			})
+		]
+	});
 };
-export {
-  X as default
-};
-//# sourceMappingURL=Slider.js.map
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=Slider.js.map

package/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nexport type SliderProps = {\n    /**\n     * The current value.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue?: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value label.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Whether to hide the dark-colored value bar.\n     *\n     * @default false\n     */\n    hideValueBar?: boolean;\n\n    /**\n     * Whether to show larger value labels instead of the normal ones.\n     *\n     * @default false\n     */\n    largeValueLabels?: boolean;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst Slider = (props: SliderProps) => {\n    const {\n        value = 0,\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        largeValueLabels = false,\n        hideValueBar = false,\n        color = 'primary',\n        step = 1,\n        onChange = noop,\n        onDragEnd = noop,\n        className,\n        disabled = false,\n        ...remainingProps\n    } = props;\n\n    const [currentValue, setCurrentValue] = useState(value ? value : minValue);\n    const [isChanging, setIsChanging] = useState(false);\n\n    useEffect(() => {\n        if (value >= minValue && value <= maxValue) {\n            setCurrentValue(value);\n        }\n    }, [value, minValue, maxValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = Number.parseInt(event.target.value, 10);\n        setCurrentValue(newValue);\n        setIsChanging(true);\n        onChange(newValue);\n    };\n\n    const onMouseUp = () => {\n        setIsChanging(false);\n        onDragEnd(currentValue);\n    };\n\n    const onMouseDown = () => {\n        setIsChanging(true);\n    };\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        hideValueBar && 'hide-value-bar',\n        largeValueLabels && 'large-value-labels',\n        className && className\n    );\n\n    const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%` }}>\n                {valueLabels && (\n                    <div className='range-value'>\n                        <span>{valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue}</span>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChanging ? 'changing' : ''}`}\n                value={currentValue}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChange}\n                onMouseDown={onMouseDown}\n                onMouseUp={onMouseUp}\n            />\n        </div>\n    );\n};\n\nexport default Slider;\n"],"names":["Slider","props","value","minValue","maxValue","valueLabels","valueLabelUnit","largeValueLabels","hideValueBar","color","step","onChange","noop","onDragEnd","className","disabled","remainingProps","currentValue","setCurrentValue","useState","isChanging","setIsChanging","useEffect","handleChange","event","newValue","onMouseUp","onMouseDown","wrapperClassNames","classNames","trackWidth","sliderBackgroundColor","getCurrentBackgroundColor","jsxs","jsx"],"mappings":";;;;;AAoGA,MAAMA,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW,OAAO;AAAA,IAClB,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAWC;AAAA,IACX,WAAAC,IAAYD;AAAA,IACZ,WAAAE;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAcC,CAAe,IAAIC,EAASjB,KAAgBC,CAAQ,GACnE,CAACiB,GAAYC,CAAa,IAAIF,EAAS,EAAK;AAElD,EAAAG,EAAU,MAAM;AACZ,IAAIpB,KAASC,KAAYD,KAASE,KAC9Bc,EAAgBhB,CAAK;AAAA,EAE7B,GAAG,CAACA,GAAOC,GAAUC,CAAQ,CAAC;AAE9B,QAAMmB,IAAe,CAACC,MAAyC;AAC3D,UAAMC,IAAW,OAAO,SAASD,EAAM,OAAO,OAAO,EAAE;AACvD,IAAAN,EAAgBO,CAAQ,GACxBJ,EAAc,EAAI,GAClBV,EAASc,CAAQ;AAAA,EACrB,GAEMC,IAAY,MAAM;AACpB,IAAAL,EAAc,EAAK,GACnBR,EAAUI,CAAY;AAAA,EAC1B,GAEMU,IAAc,MAAM;AACtB,IAAAN,EAAc,EAAI;AAAA,EACtB,GAEMO,IAAoBC;AAAA,IACtB;AAAA,IACAd,KAAY;AAAA,IACZV,KAAe;AAAA,IACfG,KAAgB;AAAA,IAChBD,KAAoB;AAAA,IACpBO,KAAaA;AAAA,EAAA,GAGXgB,IAAc,OAAOb,IAAed,MAAcC,IAAWD,IAE7D4B,IAAwBC,EAA0BvB,CAAK;AAE7D,SACI,gBAAAwB,EAAC,OAAA,EAAK,GAAGjB,GAAgB,WAAWY,GAAmB,OAAO,EAAE,OAAOG,EAAA,GACnE,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,IACnC,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAc,OAAO,EAAE,OAAO,GAAGJ,CAAU,IAAA,GACrD,UAAAzB,KACG,gBAAA6B,EAAC,SAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAA5B,IAAiB,GAAGW,CAAY,IAAIX,CAAc,KAAKW,EAAA,CAAa,EAAA,CAC/E,GAER;AAAA,IACA,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAGd,IAAa,aAAa,EAAE;AAAA,QAC1C,OAAOH;AAAA,QACP,KAAKd;AAAA,QACL,KAAKC;AAAA,QACL,MAAAM;AAAA,QACA,MAAK;AAAA,QACL,UAAUa;AAAA,QACV,aAAAI;AAAA,QACA,WAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { type ChangeEvent, type HTMLAttributes, useEffect, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nexport type SliderProps = {\n    /**\n     * The current value.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * The lower limit.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * The upper limit.\n     *\n     * @default Number.MAX_VALUE\n     */\n    maxValue?: number;\n\n    /**\n     * Whether to show the value labels.\n     *\n     * @default false\n     */\n    valueLabels?: boolean;\n\n    /**\n     * Additional unit used for the slider value label.\n     */\n    valueLabelUnit?: string | React.ReactNode;\n\n    /**\n     * Whether to hide the dark-colored value bar.\n     *\n     * @default false\n     */\n    hideValueBar?: boolean;\n\n    /**\n     * Whether to show larger value labels instead of the normal ones.\n     *\n     * @default false\n     */\n    largeValueLabels?: boolean;\n\n    /**\n     * Selector step value.\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Defines the color of the slider.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'success'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * Disables all pointer events.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback to get the new value every time it changes.\n     */\n    onChange?: (newValue: number) => void;\n\n    /**\n     * Callback to get the value after the slider ended dragging.\n     */\n    onDragEnd?: (newValue: number) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;\n\nconst Slider = (props: SliderProps) => {\n    const {\n        value = 0,\n        minValue = 0,\n        maxValue = Number.MAX_VALUE,\n        valueLabels = false,\n        valueLabelUnit,\n        largeValueLabels = false,\n        hideValueBar = false,\n        color = 'primary',\n        step = 1,\n        onChange = noop,\n        onDragEnd = noop,\n        className,\n        disabled = false,\n        ...remainingProps\n    } = props;\n\n    const [currentValue, setCurrentValue] = useState(value ? value : minValue);\n    const [isChanging, setIsChanging] = useState(false);\n\n    useEffect(() => {\n        if (value >= minValue && value <= maxValue) {\n            setCurrentValue(value);\n        }\n    }, [value, minValue, maxValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = Number.parseInt(event.target.value, 10);\n        setCurrentValue(newValue);\n        setIsChanging(true);\n        onChange(newValue);\n    };\n\n    const onMouseUp = () => {\n        setIsChanging(false);\n        onDragEnd(currentValue);\n    };\n\n    const onMouseDown = () => {\n        setIsChanging(true);\n    };\n\n    const wrapperClassNames = classNames(\n        'range-slider',\n        disabled && 'disabled',\n        valueLabels && 'show-value-labels',\n        hideValueBar && 'hide-value-bar',\n        largeValueLabels && 'large-value-labels',\n        className && className\n    );\n\n    const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);\n\n    const sliderBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} style={{ color: sliderBackgroundColor }}>\n            <div className='range-whole-track' />\n            <div className='range-track' style={{ width: `${trackWidth}%` }}>\n                {valueLabels && (\n                    <div className='range-value'>\n                        <span>{valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue}</span>\n                    </div>\n                )}\n            </div>\n            <input\n                className={`${isChanging ? 'changing' : ''}`}\n                value={currentValue}\n                min={minValue}\n                max={maxValue}\n                step={step}\n                type='range'\n                onChange={handleChange}\n                onMouseDown={onMouseDown}\n                onMouseUp={onMouseUp}\n            />\n        </div>\n    );\n};\n\nexport default Slider;\n"],"mappings":";;;;;;AAoGA,IAAM,KAAU,MAAuB;CACnC,IAAM,EACF,WAAQ,GACR,cAAW,GACX,cAAW,OAAO,WAClB,iBAAc,IACd,mBACA,sBAAmB,IACnB,kBAAe,IACf,WAAQ,WACR,UAAO,GACP,cAAW,GACX,eAAY,GACZ,cACA,cAAW,IACX,GAAG,MACH,GAEE,CAAC,GAAc,KAAmB,EAAS,KAAgB,CAAQ,GACnE,CAAC,GAAY,KAAiB,EAAS,EAAK;CAElD,QAAgB;EACZ,AAAI,KAAS,KAAY,KAAS,KAC9B,EAAgB,CAAK;CAE7B,GAAG;EAAC;EAAO;EAAU;CAAQ,CAAC;CAE9B,IAAM,KAAgB,MAAyC;EAC3D,IAAM,IAAW,OAAO,SAAS,EAAM,OAAO,OAAO,EAAE;EAGvD,AAFA,EAAgB,CAAQ,GACxB,EAAc,EAAI,GAClB,EAAS,CAAQ;CACrB,GAEM,UAAkB;EAEpB,AADA,EAAc,EAAK,GACnB,EAAU,CAAY;CAC1B,GAEM,UAAoB;EACtB,EAAc,EAAI;CACtB,GAEM,IAAoB,EACtB,gBACA,KAAY,YACZ,KAAe,qBACf,KAAgB,kBAChB,KAAoB,sBACpB,KAAa,CACjB,GAEM,IAAc,OAAO,IAAe,MAAc,IAAW,IAE7D,IAAwB,EAA0B,CAAK;CAE7D,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;EAAmB,OAAO,EAAE,OAAO,EAAsB;YAA7F;GACI,kBAAC,OAAD,EAAK,WAAU,oBAAqB,CAAA;GACpC,kBAAC,OAAD;IAAK,WAAU;IAAc,OAAO,EAAE,OAAO,GAAG,EAAW,GAAG;cACzD,KACG,kBAAC,OAAD;KAAK,WAAU;eACX,kBAAC,QAAD,EAAA,UAAO,IAAiB,GAAG,EAAa,GAAG,MAAmB,EAAmB,CAAA;IAChF,CAAA;GAER,CAAA;GACL,kBAAC,SAAD;IACI,WAAW,GAAG,IAAa,aAAa;IACxC,OAAO;IACP,KAAK;IACL,KAAK;IACC;IACN,MAAK;IACL,UAAU;IACG;IACF;GACd,CAAA;EACA;;AAEb"}