zcomponents-ui 1.2.3 → 1.3.0

package/dist/index.cjs.js

@@ -1,22 +1,22 @@
 'use strict';
 
-var index = require('./index-BZL-Zu45.js');
+var index = require('./index-DZGmLslf.js');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('react-hook-form');
 
-var styles = {"zd-button":"ZDropButton-module_zd-button__XVZ-w","zd-button__toggle":"ZDropButton-module_zd-button__toggle__0jdWn","zd-button__toggle-title":"ZDropButton-module_zd-button__toggle-title__OaiVF","zd-button__toggle-icon":"ZDropButton-module_zd-button__toggle-icon__G4tnb","zd-button__content":"ZDropButton-module_zd-button__content__FS-6m","zd-button__search":"ZDropButton-module_zd-button__search__6Nbrx","zd-button__search-input-field":"ZDropButton-module_zd-button__search-input-field__K2avH","zd-button__search-input":"ZDropButton-module_zd-button__search-input__1e643","zd-button__search-clear-btn":"ZDropButton-module_zd-button__search-clear-btn__hJo2h","zd-button__search-clear-btn-icon":"ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy","zd-button__list":"ZDropButton-module_zd-button__list__prV7p","zd-button__list-item":"ZDropButton-module_zd-button__list-item__uRK0D","zd-button__list-item--active":"ZDropButton-module_zd-button__list-item--active__oPoZA","zd-button__list-item-icon":"ZDropButton-module_zd-button__list-item-icon__xgqOm","zd-button__list-item-title":"ZDropButton-module_zd-button__list-item-title__RHTpc"};
+var styles$1 = {"zd-button":"ZDropButton-module_zd-button__XVZ-w","zd-button__toggle":"ZDropButton-module_zd-button__toggle__0jdWn","zd-button__toggle-title":"ZDropButton-module_zd-button__toggle-title__OaiVF","zd-button__toggle-icon":"ZDropButton-module_zd-button__toggle-icon__G4tnb","zd-button__content":"ZDropButton-module_zd-button__content__FS-6m","zd-button__search":"ZDropButton-module_zd-button__search__6Nbrx","zd-button__search-input-field":"ZDropButton-module_zd-button__search-input-field__K2avH","zd-button__search-input":"ZDropButton-module_zd-button__search-input__1e643","zd-button__search-clear-btn":"ZDropButton-module_zd-button__search-clear-btn__hJo2h","zd-button__search-clear-btn-icon":"ZDropButton-module_zd-button__search-clear-btn-icon__PWwHy","zd-button__list":"ZDropButton-module_zd-button__list__prV7p","zd-button__list-item":"ZDropButton-module_zd-button__list-item__uRK0D","zd-button__list-item--active":"ZDropButton-module_zd-button__list-item--active__oPoZA","zd-button__list-item-icon":"ZDropButton-module_zd-button__list-item-icon__xgqOm","zd-button__list-item-title":"ZDropButton-module_zd-button__list-item-title__RHTpc"};
 
 const ButtonDropdownToggle = (props) => {
     const { title, toggleIcon, toggleClassName, children, onButtonToggleClick } = props;
-    const toggleClasses = index.classNames(styles["zd-button__toggle"], toggleClassName);
+    const toggleClasses = index.classNames(styles$1["zd-button__toggle"], toggleClassName);
     const onToggleClick = (e) => {
         onButtonToggleClick();
     };
     const onToggleMouseLeave = (e) => {
         e.currentTarget.blur();
     };
-    return (jsxRuntime.jsxs("button", { className: toggleClasses, onMouseLeave: onToggleMouseLeave, onClick: onToggleClick, children: [toggleIcon && (jsxRuntime.jsx("div", { className: styles["zd-button__toggle-icon"], children: toggleIcon })), title && (jsxRuntime.jsx("span", { className: styles["zd-button__toggle-title"], children: title })), children] }));
+    return (jsxRuntime.jsxs("button", { className: toggleClasses, onMouseLeave: onToggleMouseLeave, onClick: onToggleClick, children: [toggleIcon && (jsxRuntime.jsx("div", { className: styles$1["zd-button__toggle-icon"], children: toggleIcon })), title && (jsxRuntime.jsx("span", { className: styles$1["zd-button__toggle-title"], children: title })), children] }));
 };
 
 const ZDropButtonContent = (props) => {
@@ -141,19 +141,19 @@ const ZDropButtonContent = (props) => {
     if (!isOpen) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { className: styles["zd-button__content"], style: positionStyles, ref: contentRef, children: children }));
+    return (jsxRuntime.jsx("div", { className: styles$1["zd-button__content"], style: positionStyles, ref: contentRef, children: children }));
 };
 
 const ZDropButtonList = (props) => {
     const { children } = props;
-    return jsxRuntime.jsx("ul", { className: styles["zd-button__list"], children: children });
+    return jsxRuntime.jsx("ul", { className: styles$1["zd-button__list"], children: children });
 };
 
 const ZDropButtonListItem = (props) => {
     const { index: index$1, title, Icon, urlPath, className, linkAs: LinkTag = "a", isActive = false, children, } = props;
     const { addToRefs, optionsRef, onItemSelect, searchInputRef } = react.useContext(ZDropButtonContext);
-    const itemContainerClasses = (isActive) => index.classNames(styles["zd-button__list-item"], {
-        [styles["zd-button__list-item--active"]]: !urlPath && isActive,
+    const itemContainerClasses = (isActive) => index.classNames(styles$1["zd-button__list-item"], {
+        [styles$1["zd-button__list-item--active"]]: !urlPath && isActive,
     }, className);
     const onItemClick = (e) => {
         if (!urlPath) {
@@ -217,15 +217,15 @@ const ZDropButtonListItem = (props) => {
     };
     const ItemTypeComponent = urlPath ? LinkTag : "div";
     return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(ItemTypeComponent, { ref: (el) => addToRefs === null || addToRefs === void 0 ? void 0 : addToRefs(el, index$1), className: itemContainerClasses(isActive), tabIndex: 0, onClick: onItemClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, onKeyDown: onItemKeyDown, ...(urlPath &&
-                (LinkTag === "a" ? { href: urlPath } : { to: urlPath })), children: [Icon && (jsxRuntime.jsx("div", { className: styles["zd-button__list-item-icon"], children: Icon })), jsxRuntime.jsx("span", { className: styles["zd-button__list-item-title"], children: title }), children] }) }));
+                (LinkTag === "a" ? { href: urlPath } : { to: urlPath })), children: [Icon && (jsxRuntime.jsx("div", { className: styles$1["zd-button__list-item-icon"], children: Icon })), jsxRuntime.jsx("span", { className: styles$1["zd-button__list-item-title"], children: title }), children] }) }));
 };
 
 const ZDropButtonSearch = (props) => {
     const { placeholder, searchIcon, clearIcon, searchClassName, shouldFocusOnOpen = false, } = props;
     const { onSearch, searchInputRef, optionsRef, isOpen } = react.useContext(ZDropButtonContext);
     const [isSearchActive, setIsSearchActive] = react.useState(false);
-    const searchFormClasses = index.classNames(styles["zd-button__search"]);
-    const searchInputFieldClasses = index.classNames(styles["zd-button__search-input-field"], { active: isSearchActive }, searchClassName);
+    const searchFormClasses = index.classNames(styles$1["zd-button__search"]);
+    const searchInputFieldClasses = index.classNames(styles$1["zd-button__search-input-field"], { active: isSearchActive }, searchClassName);
     const onInputChange = (e) => {
         onSearch === null || onSearch === void 0 ? void 0 : onSearch(e);
     };
@@ -269,7 +269,7 @@ const ZDropButtonSearch = (props) => {
             searchInputRef.current.focus();
         }
     }, []);
-    return (jsxRuntime.jsx("form", { className: searchFormClasses, onMouseEnter: onSearchMouseEnter, onMouseLeave: onSearchMouseLeave, onKeyDown: onSearchKeyDown, children: jsxRuntime.jsxs("div", { className: searchInputFieldClasses, children: [searchIcon && jsxRuntime.jsx("div", { children: searchIcon }), jsxRuntime.jsx("input", { className: styles["zd-button__search-input"], onChange: onInputChange, ref: searchInputRef, placeholder: placeholder }), jsxRuntime.jsx("button", { className: styles["zd-button__search-clear-btn"], type: "button", onClick: onClearClick, children: clearIcon || (jsxRuntime.jsx("span", { className: styles["zd-button__search-clear-btn-icon"] })) })] }) }));
+    return (jsxRuntime.jsx("form", { className: searchFormClasses, onMouseEnter: onSearchMouseEnter, onMouseLeave: onSearchMouseLeave, onKeyDown: onSearchKeyDown, children: jsxRuntime.jsxs("div", { className: searchInputFieldClasses, children: [searchIcon && jsxRuntime.jsx("div", { children: searchIcon }), jsxRuntime.jsx("input", { className: styles$1["zd-button__search-input"], onChange: onInputChange, ref: searchInputRef, placeholder: placeholder }), jsxRuntime.jsx("button", { className: styles$1["zd-button__search-clear-btn"], type: "button", onClick: onClearClick, children: clearIcon || (jsxRuntime.jsx("span", { className: styles$1["zd-button__search-clear-btn-icon"] })) })] }) }));
 };
 
 const ZDropButtonContext = react.createContext({});
@@ -279,7 +279,7 @@ const ZDropButton = (props) => {
     const optionsRef = react.useRef([]);
     const searchInputRef = react.useRef(null);
     const [isOpen, setIsOpen] = react.useState(false);
-    const buttonContainerClasses = index.classNames(styles["zd-button"], className);
+    const buttonContainerClasses = index.classNames(styles$1["zd-button"], className);
     const addToRefs = (element, index) => {
         return (optionsRef.current[index] = element);
     };
@@ -318,7 +318,570 @@ ZDropButton.List = ZDropButtonList;
 ZDropButton.Item = ZDropButtonListItem;
 ZDropButton.Search = ZDropButtonSearch;
 
+const thumbInteractArea = 24;
+const checkIsInputSwapAllowed = (activeIndex, comparedIndex, clientPosition, valuePosition) => {
+    return (activeIndex === comparedIndex &&
+        clientPosition !== null &&
+        clientPosition !== undefined &&
+        clientPosition < valuePosition + thumbInteractArea &&
+        clientPosition > valuePosition - thumbInteractArea);
+};
+
+const getMinMax = (firstValue, secondValue) => {
+    const min = firstValue < secondValue ? firstValue : secondValue;
+    const max = firstValue > secondValue ? firstValue : secondValue;
+    return { min, max };
+};
+
+// import { UnitList } from "../types/zRangeTypes";
+const convertToUnit = (rawValue, units = [], unitDivisors = [], isIndicatorUnitHidden = false, scaleFn = (x) => x) => {
+    var _a, _b;
+    if (!units.length)
+        return String(rawValue);
+    if (!Number.isFinite(rawValue))
+        return String(rawValue);
+    const scaled = scaleFn(rawValue);
+    const sign = scaled < 0 ? "-" : "";
+    const value = Math.abs(scaled);
+    const divisors = unitDivisors
+        .slice(0, units.length)
+        .map((d) => (d > 0 ? d : 1));
+    if (!divisors.length) {
+        return `${sign}${value.toFixed(units[0].fractionDigits)} ${units[0].unit}`;
+    }
+    let idx = 0;
+    for (let i = 0; i < units.length; i++) {
+        const d = (_a = divisors[i]) !== null && _a !== void 0 ? _a : 1;
+        if (value >= d)
+            idx = i;
+    }
+    const d = (_b = divisors[idx]) !== null && _b !== void 0 ? _b : 1;
+    const converted = value / d;
+    if (isIndicatorUnitHidden) {
+        return `${sign}${converted.toFixed(units[idx].fractionDigits)}`;
+    }
+    return `${sign}${converted.toFixed(units[idx].fractionDigits)} ${units[idx].unit}`;
+};
+
+const calculateStepPosition = (currentValue, element, min, max) => {
+    if (!element) {
+        return 0;
+    }
+    return ((currentValue - min) * element.clientWidth) / (max - min);
+};
+
+class ZRangeValue {
+    constructor(min, max, unitDivisors, unitList, scale) {
+        this.min = min;
+        this.max = max;
+        this.unitDivisors = unitDivisors;
+        this.unitList = unitList;
+        this.scale = scale;
+        this.min.getPosition = this.getMinPosition.bind(this);
+        this.max.getPosition = this.getMaxPosition.bind(this);
+    }
+    getMinPosition() {
+        return calculateStepPosition(this.min.value, this.min.inputRef.current, this.min.initialValue, this.max.initialValue);
+    }
+    getMaxPosition() {
+        return calculateStepPosition(this.max.value, this.max.inputRef.current, this.min.initialValue, this.max.initialValue);
+    }
+    getRangeMiddle() {
+        return (this.max.value - this.min.value) / 2;
+    }
+    getValueLabel(forValue) {
+        const value = getMinMax(this.min.value, this.max.value)[forValue];
+        const valueLabel = this.scale ? this.scale(value) : value;
+        return this.unitList
+            ? convertToUnit(valueLabel, this.unitList, this.unitDivisors).toString()
+            : `${valueLabel}`;
+    }
+}
+
+var styles = {"z-range":"ZRange-module_z-range__z6bqS","z-range__container":"ZRange-module_z-range__container__RSKdQ","z-range__label":"ZRange-module_z-range__label__vcLKv","z-range__value-indicator-icon":"ZRange-module_z-range__value-indicator-icon__A4CDC","z-range__inputs-wrapper":"ZRange-module_z-range__inputs-wrapper__K3sk3","z-range__slider":"ZRange-module_z-range__slider__fubBh","z-range__slider-track":"ZRange-module_z-range__slider-track__m8rsi","z-range__slider-track-selected-range":"ZRange-module_z-range__slider-track-selected-range__P0Qm4","z-range__slider-values-wrapper":"ZRange-module_z-range__slider-values-wrapper__jdtV1","z-range__slider-value":"ZRange-module_z-range__slider-value__rSDuP","z-range__slider-first-value":"ZRange-module_z-range__slider-first-value__LzOA9"};
+
+const getCssVariablePxValue = (element, cssVariableName, fallbackPx) => {
+    const rawValue = getComputedStyle(element)
+        .getPropertyValue(cssVariableName)
+        .trim();
+    const parsedPx = parseFloat(rawValue);
+    return Number.isFinite(parsedPx) ? parsedPx : fallbackPx;
+};
+
+const ZRangeSliderValue = (props) => {
+    const { value, icon, sliderValueClassName } = props;
+    const thumbClasses = index.classNames(styles["z-range__slider-value"], styles["z-range__slider-first-value"], sliderValueClassName);
+    return (jsxRuntime.jsxs("div", { className: thumbClasses, children: [icon && jsxRuntime.jsx("span", { children: icon }), jsxRuntime.jsx("span", { children: value })] }));
+};
+
+const indicatorTopGap = 2; // px
+const ZRangeIndicator = (props) => {
+    const { valueIndicatorRef, indicatorStyles, indicatorValue, rangeTrackRef, inputElement, scaleFunction, unitList, unitDivisors, scale, icon, iconKey, isHighlighted, isIndicatorUnitHidden = false, } = props;
+    const [valueIndicatorStyles, setValueIndicatorStyles] = react.useState({});
+    const indicatorClasses = index.classNames("z-range__value-indicator", {
+        "z-range__value-indicator--active": typeof indicatorValue === "number" && isHighlighted,
+    }, indicatorStyles === null || indicatorStyles === void 0 ? void 0 : indicatorStyles.indicator, {
+        ...((indicatorStyles === null || indicatorStyles === void 0 ? void 0 : indicatorStyles.indicatorMin)
+            ? { [indicatorStyles === null || indicatorStyles === void 0 ? void 0 : indicatorStyles.indicatorMin]: iconKey === "min" }
+            : {}),
+        ...((indicatorStyles === null || indicatorStyles === void 0 ? void 0 : indicatorStyles.indicatorMax)
+            ? { [indicatorStyles === null || indicatorStyles === void 0 ? void 0 : indicatorStyles.indicatorMax]: iconKey === "max" }
+            : {}),
+    });
+    const indicatorIconClasses = index.classNames(styles["z-range__value-indicator-icon"], indicatorStyles === null || indicatorStyles === void 0 ? void 0 : indicatorStyles.indicatorIcon);
+    const indicatorValueClasses = index.classNames("z-range__value-indicator-value", indicatorStyles === null || indicatorStyles === void 0 ? void 0 : indicatorStyles.indicatorValue);
+    react.useLayoutEffect(() => {
+        var _a;
+        if (((_a = rangeTrackRef === null || rangeTrackRef === void 0 ? void 0 : rangeTrackRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && inputElement) {
+            setValueIndicatorStyles({
+                bottom: `${rangeTrackRef.current.offsetHeight +
+                    getCssVariablePxValue(inputElement, "--thumb-size", 16) / 2 +
+                    indicatorTopGap}px`,
+            });
+        }
+    }, [indicatorValue, valueIndicatorRef, rangeTrackRef]);
+    return (jsxRuntime.jsxs("div", { ref: valueIndicatorRef, style: valueIndicatorStyles, className: indicatorClasses, children: [icon != null && typeof indicatorValue === "number" && (jsxRuntime.jsx("div", { className: indicatorIconClasses, children: icon }, iconKey !== null && iconKey !== void 0 ? iconKey : "indicator-icon")), typeof indicatorValue === "number" && (jsxRuntime.jsx("span", { className: indicatorValueClasses, children: convertToUnit(scale ? scaleFunction(indicatorValue) : indicatorValue, unitList, unitDivisors, isIndicatorUnitHidden) }))] }));
+};
+
+const ZRangeTrack = (props) => {
+    const { rangeTrackRef, selectedRangeRef, selectedRangeStyle, trackStyles } = props;
+    const { trackContainer, trackRange, trackSelected } = trackStyles;
+    const trackClasses = index.classNames(styles["z-range__slider"], trackContainer);
+    const rangeClasses = index.classNames(styles["z-range__slider-track"], trackRange);
+    const selectedRangeClasses = index.classNames(styles["z-range__slider-track-selected-range"], trackSelected);
+    return (jsxRuntime.jsxs("div", { className: trackClasses, children: [jsxRuntime.jsx("div", { ref: rangeTrackRef, className: rangeClasses }), jsxRuntime.jsx("div", { ref: selectedRangeRef, className: selectedRangeClasses, style: selectedRangeStyle })] }));
+};
+
+const ZRangeInputs = (props) => {
+    const { rangeValue, min, max, step, inputMinClasses, inputMaxClasses, onInputChange, onMouseDown, onTouchStart, onMouseMove, onTouchMove, onMouseUp, onTouchEnd, } = props;
+    return (jsxRuntime.jsxs("div", { className: styles["z-range__inputs-wrapper"], children: [jsxRuntime.jsx("input", { ref: rangeValue.min.inputRef, name: "0", type: "range", min: min, max: max, 
+                // step={step || 1}
+                step: "any", value: rangeValue.min.value, className: inputMinClasses, onInput: onInputChange, onMouseDown: onMouseDown, onTouchStart: onTouchStart, onMouseMove: onMouseMove, onTouchMove: onTouchMove, onMouseUp: onMouseUp, onTouchEnd: onTouchEnd }), jsxRuntime.jsx("input", { ref: rangeValue.max.inputRef, name: "1", type: "range", min: min, max: max, 
+                // step={step || 1}
+                step: "any", value: rangeValue.max.value, className: inputMaxClasses, onInput: onInputChange, onMouseDown: onMouseDown, onTouchStart: onTouchStart, onMouseMove: onMouseMove, onTouchMove: onTouchMove, onMouseUp: onMouseUp, onTouchEnd: onTouchEnd })] }));
+};
+
+const ZRangeLabel = (props) => {
+    const { label, labelClassName } = props;
+    const labelClasses = index.classNames(styles["z-range__label"], labelClassName);
+    return jsxRuntime.jsx("div", { className: labelClasses, children: label });
+};
+
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const ZRange = (props) => {
+    var _a;
+    const { value, name, min, max, step, scale, unitDivisors, unitList, label, onSelect, onChange, icons, stylesClasses, isIndicatorUnitHidden, } = props;
+    const scaleFunction = (x) => 
+    // eslint-disable-next-line no-new-func
+    scale ? new Function("x", `return ${scale}`)(x) : x;
+    const containerRef = react.useRef(null);
+    const rangeTrackRef = react.useRef(null);
+    const selectedRangeRef = react.useRef(null);
+    const valueIndicatorRef = react.useRef(null);
+    const thumbOffsetRef = react.useRef({ 0: 0, 1: 0 });
+    const [indicatorValue, setIndicatorValue] = react.useState(undefined);
+    const [activeInputIndex, setActiveInputIndex] = react.useState(0);
+    const [rangeValue, setRangeValue] = react.useState(new ZRangeValue({
+        value: typeof (value === null || value === void 0 ? void 0 : value.min) === "number" ? value.min : min,
+        initialValue: min,
+        inputRef: react.useRef(null),
+    }, {
+        value: typeof (value === null || value === void 0 ? void 0 : value.max) === "number" ? value.max : max,
+        initialValue: max,
+        inputRef: react.useRef(null),
+    }, unitDivisors, unitList, scaleFunction));
+    const [clientPositionX, setClientPositionX] = react.useState(null);
+    const [isMoving, setIsMoving] = react.useState(false);
+    const [isHighlighted, setIsHighlighted] = react.useState(false);
+    const [selectedRangeStyle, setSelectedRangeStyle] = react.useState({
+        width: 0,
+        left: 0,
+        right: 0,
+    });
+    const stepValue = typeof step === "number" && step > 0 ? step : 1;
+    const maxForInput = min + Math.ceil((max - min) / stepValue) * stepValue;
+    const mapValueToInputRange = (domainValue) => domainValue >= max ? maxForInput : domainValue;
+    const mapInputRangeToValue = (inputValue) => Math.min(inputValue, max);
+    const rangeValueForInput = react.useMemo(() => {
+        return new ZRangeValue({
+            ...rangeValue.min,
+            value: mapValueToInputRange(rangeValue.min.value),
+            initialValue: min,
+            inputRef: rangeValue.min.inputRef,
+        }, {
+            ...rangeValue.max,
+            value: mapValueToInputRange(rangeValue.max.value),
+            initialValue: maxForInput,
+            inputRef: rangeValue.max.inputRef,
+        }, unitDivisors, unitList, scaleFunction);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        rangeValue.min.value,
+        rangeValue.max.value,
+        min,
+        max,
+        maxForInput,
+        stepValue,
+        unitDivisors,
+        unitList,
+        scale,
+    ]);
+    const containerClasses = index.classNames(styles["z-range__container"], stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.container);
+    const inputMinClasses = index.classNames("z-range__input", "z-range__input-first", {
+        "z-range__input--active": activeInputIndex === 0 && isHighlighted,
+    }, stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.input, activeInputIndex === 0 && isHighlighted && (stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.inputActive)
+        ? stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.inputActive
+        : "");
+    const inputMaxClasses = index.classNames("z-range__input", "z-range__input-second", { "z-range__input--active": activeInputIndex === 1 && isHighlighted }, stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.input, activeInputIndex === 1 && isHighlighted && (stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.inputActive)
+        ? stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.inputActive
+        : "");
+    react.useEffect(() => {
+        if (!value)
+            return;
+        const nextMin = clamp(value.min, min, max);
+        const nextMax = clamp(value.max, min, max);
+        const nextRangeValue = new ZRangeValue({
+            ...rangeValue.min,
+            value: nextMin,
+            initialValue: min,
+            inputRef: rangeValue.min.inputRef,
+        }, {
+            ...rangeValue.max,
+            value: nextMax,
+            initialValue: max,
+            inputRef: rangeValue.max.inputRef,
+        }, unitDivisors, unitList, scaleFunction);
+        setRangeValue(nextRangeValue);
+        setIndicatorValue(undefined);
+        thumbOffsetRef.current[0] = 0;
+        thumbOffsetRef.current[1] = 0;
+        requestAnimationFrame(() => {
+            const val = activeInputIndex === 0 ? nextMin : nextMax;
+            setRangeValuePosition(val);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value === null || value === void 0 ? void 0 : value.min, value === null || value === void 0 ? void 0 : value.max, min, max]);
+    const getThumbCenterXInContainer = (input, currentValueReal, containerEl) => {
+        const currentValue = mapValueToInputRange(currentValueReal);
+        const thumbTravelRatio = clamp01((currentValue - min) / (maxForInput - min));
+        const inputRect = input.getBoundingClientRect();
+        const containerRect = containerEl.getBoundingClientRect();
+        const thumbSize = getCssVariablePxValue(input, "--thumb-size", 16);
+        const usable = inputRect.width - thumbSize;
+        const thumbCenterXInInput = thumbSize / 2 + usable * thumbTravelRatio;
+        const inputLeftInContainer = inputRect.left - containerRect.left;
+        return inputLeftInContainer + thumbCenterXInInput;
+    };
+    const setRangeValuePosition = (currentValueReal, inputIndex = activeInputIndex) => {
+        var _a;
+        const indicator = valueIndicatorRef.current;
+        const container = containerRef.current;
+        const input = (_a = (inputIndex === 0
+            ? rangeValue.min.inputRef.current
+            : rangeValue.max.inputRef.current)) !== null && _a !== void 0 ? _a : rangeValue.min.inputRef.current;
+        if (!indicator || !container || !input)
+            return;
+        const distanceLeft = getThumbCenterXInContainer(input, currentValueReal, container);
+        indicator.style.left = `${Math.round(distanceLeft)}px`;
+        indicator.style.transform = `translateX(-50%)`;
+    };
+    const updateRangeValues = (currentValueReal, inputIndex) => {
+        const updatedRangeValue = new ZRangeValue({
+            ...(inputIndex === 0
+                ? { ...rangeValue.min, value: currentValueReal }
+                : rangeValue.min),
+        }, {
+            ...(inputIndex === 0
+                ? rangeValue.max
+                : { ...rangeValue.max, value: currentValueReal }),
+        }, rangeValue.unitDivisors, rangeValue.unitList, rangeValue.scale);
+        setRangeValue(updatedRangeValue);
+        setIndicatorValue(currentValueReal);
+        if (!onChange)
+            return;
+        const { min: currentMin, max: currentMax } = getMinMax(updatedRangeValue.min.value, updatedRangeValue.max.value);
+        onChange({
+            ...updatedRangeValue,
+            min: { ...updatedRangeValue.min, value: currentMin },
+            max: { ...updatedRangeValue.max, value: currentMax },
+        }, name);
+    };
+    const onInputChange = (e) => {
+        if (!rangeTrackRef.current ||
+            !rangeValue.min.inputRef.current ||
+            !rangeValue.max.inputRef.current) {
+            return;
+        }
+        const currentValue = mapInputRangeToValue(Number(e.target.value));
+        const rangeTrackRect = rangeTrackRef.current.getBoundingClientRect();
+        const clientPositionOnTrack = clientPositionX != null ? clientPositionX - rangeTrackRect.left : null;
+        const minValueStepPosition = rangeValue.getMinPosition();
+        const maxValueStepPosition = rangeValue.getMaxPosition();
+        if (checkIsInputSwapAllowed(activeInputIndex, 0, clientPositionOnTrack, maxValueStepPosition)) {
+            return;
+        }
+        if (checkIsInputSwapAllowed(activeInputIndex, 1, clientPositionOnTrack, minValueStepPosition)) {
+            return;
+        }
+        const { min: currentMin, max: currentMax } = getMinMax(rangeValue.min.value, rangeValue.max.value);
+        const rangeMiddle = (currentMax - currentMin) / 2;
+        if (rangeValue.max.value > rangeValue.min.value) {
+            if (currentValue < currentMin + rangeMiddle) {
+                setActiveInputIndex(0);
+                setRangeValuePosition(currentValue);
+                updateRangeValues(currentValue, 0);
+                return;
+            }
+            if (currentValue > currentMin + rangeMiddle) {
+                setActiveInputIndex(1);
+                setRangeValuePosition(currentValue);
+                updateRangeValues(currentValue, 1);
+                return;
+            }
+        }
+        if (rangeValue.min.value > rangeValue.max.value) {
+            if (currentValue < currentMin + rangeMiddle) {
+                setActiveInputIndex(1);
+                setRangeValuePosition(currentValue);
+                updateRangeValues(currentValue, 1);
+                return;
+            }
+            if (currentValue > currentMin + rangeMiddle) {
+                setActiveInputIndex(0);
+                setRangeValuePosition(currentValue);
+                updateRangeValues(currentValue, 0);
+                return;
+            }
+        }
+        setRangeValuePosition(currentValue);
+        updateRangeValues(currentValue, activeInputIndex);
+    };
+    const onMoveStart = (e) => {
+        setIsMoving(true);
+        setIsHighlighted(true);
+        const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+        setClientPositionX(clientX);
+        const container = containerRef.current;
+        const input = activeInputIndex === 0
+            ? rangeValue.min.inputRef.current
+            : rangeValue.max.inputRef.current;
+        if (container && input) {
+            const containerRect = container.getBoundingClientRect();
+            const pointerXInContainer = clientX - containerRect.left;
+            const currentValReal = activeInputIndex === 0 ? rangeValue.min.value : rangeValue.max.value;
+            const thumbXInContainer = getThumbCenterXInContainer(input, currentValReal, container);
+            const thumbSize = getCssVariablePxValue(input, "--thumb-size", 16);
+            const dist = Math.abs(pointerXInContainer - thumbXInContainer);
+            thumbOffsetRef.current[activeInputIndex] =
+                dist <= thumbSize / 2 ? pointerXInContainer - thumbXInContainer : 0;
+        }
+        if (!rangeTrackRef.current ||
+            !rangeValue.min.inputRef.current ||
+            !rangeValue.max.inputRef.current) {
+            return;
+        }
+        const rangeTrackRect = rangeTrackRef.current.getBoundingClientRect();
+        const clientPositionOnTrack = clientX - rangeTrackRect.left;
+        const minValueStepPosition = rangeValue.getMinPosition();
+        const maxValueStepPosition = rangeValue.getMaxPosition();
+        if (checkIsInputSwapAllowed(activeInputIndex, 0, clientPositionOnTrack, maxValueStepPosition)) {
+            setActiveInputIndex(1);
+            thumbOffsetRef.current[1] = 0;
+            setRangeValuePosition(rangeValue.max.value, 1);
+            updateRangeValues(rangeValue.max.value, 1);
+        }
+        if (checkIsInputSwapAllowed(activeInputIndex, 1, clientPositionOnTrack, minValueStepPosition)) {
+            setActiveInputIndex(0);
+            thumbOffsetRef.current[0] = 0;
+            setRangeValuePosition(rangeValue.min.value);
+            updateRangeValues(rangeValue.min.value, 0);
+        }
+    };
+    const onMove = (e) => {
+        var _a, _b;
+        if (!isMoving)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const currentPositionX = "clientX" in e ? e.clientX : (_b = (_a = e.touches) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.clientX;
+        const element = activeInputIndex === 0
+            ? rangeValue.min.inputRef
+            : rangeValue.max.inputRef;
+        if (!(element.current && currentPositionX != null))
+            return;
+        const slider = element.current;
+        const sliderRect = slider.getBoundingClientRect();
+        const offsetX = currentPositionX -
+            sliderRect.left -
+            thumbOffsetRef.current[activeInputIndex];
+        const thumbSize = getCssVariablePxValue(slider, "--thumb-size", 16);
+        const usable = Math.max(1, sliderRect.width - thumbSize);
+        const posOnUsable = clamp(offsetX - thumbSize / 2, 0, usable);
+        const ratio = posOnUsable / usable;
+        const rawValue = min + ratio * (maxForInput - min);
+        const roundedValue = Math.round((rawValue - min) / stepValue) * stepValue + min;
+        const limitedInputValue = clamp(roundedValue, min, maxForInput);
+        const limitedRealValue = mapInputRangeToValue(limitedInputValue);
+        setRangeValuePosition(limitedRealValue, activeInputIndex);
+        updateRangeValues(limitedRealValue, activeInputIndex);
+    };
+    const onMoveStop = (e) => {
+        var _a, _b, _c;
+        setIsMoving(false);
+        setIsHighlighted(false);
+        if (!((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) &&
+            rangeValue.min.inputRef.current &&
+            rangeValue.max.inputRef.current) {
+            const firstValue = activeInputIndex === 0
+                ? mapInputRangeToValue(Number((_b = rangeValue.min.inputRef.current) === null || _b === void 0 ? void 0 : _b.value))
+                : rangeValue.min.value;
+            const secondValue = activeInputIndex === 1
+                ? mapInputRangeToValue(Number((_c = rangeValue.max.inputRef.current) === null || _c === void 0 ? void 0 : _c.value))
+                : rangeValue.max.value;
+            const { min: lastMin, max: lastMax } = getMinMax(firstValue, secondValue);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+                ...rangeValue,
+                min: { ...rangeValue.min, value: lastMin },
+                max: { ...rangeValue.max, value: lastMax },
+            }, name);
+            updateRangeValues(activeInputIndex === 0 ? lastMin : lastMax, activeInputIndex);
+            return;
+        }
+        const targetValueReal = mapInputRangeToValue(Number(e.target.value));
+        const { min: currentMin, max: currentMax } = getMinMax(e.target.name === "0"
+            ? targetValueReal
+            : rangeValue.min.value, e.target.name === "0"
+            ? rangeValue.max.value
+            : targetValueReal);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+            ...rangeValue,
+            min: { ...rangeValue.min, value: currentMin },
+            max: { ...rangeValue.max, value: currentMax },
+        }, name);
+    };
+    const onMoveEnd = (e) => {
+        onMoveStop(e);
+        e.stopPropagation();
+    };
+    react.useEffect(() => {
+        if (!isMoving)
+            return;
+        const handleTouchEnd = () => {
+            setIsMoving(false);
+            setIsHighlighted(false);
+        };
+        document.addEventListener("touchend", handleTouchEnd);
+        return () => document.removeEventListener("touchend", handleTouchEnd);
+    }, [isMoving]);
+    react.useEffect(() => {
+        if (!isMoving)
+            return;
+        const handleMouseUp = () => {
+            setIsMoving(false);
+            setIsHighlighted(false);
+        };
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => document.removeEventListener("mouseup", handleMouseUp);
+    }, [isMoving]);
+    const calculateSelectedRangeStyle = () => {
+        if (!rangeTrackRef.current)
+            return;
+        const innerWidth = rangeTrackRef.current.clientWidth;
+        const { min: valueMinReal, max: valueMaxReal } = getMinMax(rangeValue.min.value, rangeValue.max.value);
+        const valueMin = mapValueToInputRange(valueMinReal);
+        const valueMax = mapValueToInputRange(valueMaxReal);
+        const ratioMin = clamp01((valueMin - min) / (maxForInput - min));
+        const ratioMax = clamp01((valueMax - min) / (maxForInput - min));
+        const leftPx = innerWidth * ratioMin;
+        const rightPx = innerWidth * ratioMax;
+        setSelectedRangeStyle({
+            left: `${leftPx}px`,
+            width: `${Math.max(0, rightPx - leftPx)}px`,
+        });
+    };
+    react.useEffect(() => {
+        calculateSelectedRangeStyle();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        rangeValue.min.value,
+        rangeValue.max.value,
+        min,
+        max,
+        stepValue,
+        maxForInput,
+    ]);
+    react.useEffect(() => {
+        setRangeValuePosition(activeInputIndex === 0 ? rangeValue.min.value : rangeValue.max.value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    react.useLayoutEffect(() => {
+        const track = rangeTrackRef.current;
+        if (!track)
+            return;
+        let rafId = null;
+        const updateValue = () => {
+            calculateSelectedRangeStyle();
+            const updatedValue = typeof indicatorValue === "number"
+                ? indicatorValue
+                : activeInputIndex === 0
+                    ? rangeValue.min.value
+                    : rangeValue.max.value;
+            setRangeValuePosition(updatedValue);
+        };
+        const updateSchedule = () => {
+            if (rafId !== null)
+                return;
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                updateValue();
+            });
+        };
+        updateSchedule();
+        const observer = new ResizeObserver(updateSchedule);
+        observer.observe(track);
+        window.addEventListener("resize", updateSchedule);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("resize", updateSchedule);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [
+        min,
+        max,
+        stepValue,
+        maxForInput,
+        indicatorValue,
+        activeInputIndex,
+        rangeValue.min.value,
+        rangeValue.max.value,
+    ]);
+    const lowValue = Math.min(rangeValue.min.value, rangeValue.max.value);
+    const indicatorIsMin = typeof indicatorValue === "number" ? indicatorValue === lowValue : false;
+    const indicatorIcon = (icons === null || icons === void 0 ? void 0 : icons.indicatorMin) && (icons === null || icons === void 0 ? void 0 : icons.indicatorMax)
+        ? indicatorIsMin
+            ? icons.indicatorMin
+            : icons.indicatorMax
+        : undefined;
+    const indicatorIconKey = indicatorIsMin ? "min" : "max";
+    return (jsxRuntime.jsxs("div", { className: containerClasses, children: [label && (jsxRuntime.jsx(ZRangeLabel, { label: label, labelClassName: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.label })), jsxRuntime.jsxs("div", { ref: containerRef, className: styles["z-range"], children: [jsxRuntime.jsx(ZRangeInputs, { rangeValue: rangeValueForInput, min: min, max: maxForInput, step: stepValue, inputMinClasses: inputMinClasses, inputMaxClasses: inputMaxClasses, onInputChange: onInputChange, onMouseDown: onMoveStart, onTouchStart: onMoveStart, onMouseMove: onMove, onTouchMove: onMove, onMouseUp: onMoveEnd, onTouchEnd: onMoveEnd }), jsxRuntime.jsx(ZRangeTrack, { rangeTrackRef: rangeTrackRef, selectedRangeRef: selectedRangeRef, selectedRangeStyle: selectedRangeStyle, trackStyles: {
+                            trackContainer: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.trackContainer,
+                            trackRange: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.trackRange,
+                            trackSelected: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.trackSelected,
+                        } }), jsxRuntime.jsx(ZRangeIndicator, { valueIndicatorRef: valueIndicatorRef, indicatorStyles: {
+                            indicator: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.indicator,
+                            indicatorMin: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.indicatorMin,
+                            indicatorMax: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.indicatorMax,
+                            indicatorValue: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.indicatorValue,
+                            indicatorIcon: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.indicatorIcon,
+                        }, indicatorValue: indicatorValue, rangeTrackRef: rangeTrackRef, inputElement: activeInputIndex === 0
+                            ? rangeValue.min.inputRef.current
+                            : (_a = rangeValue.max.inputRef.current) !== null && _a !== void 0 ? _a : rangeValue.min.inputRef.current, scaleFunction: scaleFunction, unitList: unitList, unitDivisors: unitDivisors, scale: scale, icon: indicatorIcon, iconKey: indicatorIconKey, isHighlighted: isHighlighted, isIndicatorUnitHidden: isIndicatorUnitHidden })] }), jsxRuntime.jsxs("div", { className: styles["z-range__slider-values-wrapper"], children: [jsxRuntime.jsx(ZRangeSliderValue, { sliderValueClassName: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.sliderValue, value: rangeValue.getValueLabel("min"), icon: icons === null || icons === void 0 ? void 0 : icons.thumbMin }), jsxRuntime.jsx(ZRangeSliderValue, { sliderValueClassName: stylesClasses === null || stylesClasses === void 0 ? void 0 : stylesClasses.sliderValue, value: rangeValue.getValueLabel("max"), icon: icons === null || icons === void 0 ? void 0 : icons.thumbMax })] })] }));
+};
+
 exports.ZDrop = index.ZDrop;
 exports.ZDropField = index.ZDropField;
 exports.ZDropButton = ZDropButton;
+exports.ZRange = ZRange;
 //# sourceMappingURL=index.cjs.js.map