@cube-dev/ui-kit 0.14.16 → 0.16.0

package/types/components/forms/Slider/RangeSlider.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { CubeSliderBaseProps } from './types';
+import type { RangeValue } from '../../../shared';
+export interface CubeRangeSliderProps extends CubeSliderBaseProps<RangeValue<number>> {
+    gradation?: string[];
+}
+declare const __RangeSlider: import("react").ForwardRefExoticComponent<CubeRangeSliderProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
+    cubeInputType: string;
+};
+export { __RangeSlider as RangeSlider };

package/types/components/forms/Slider/Slider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { CubeSliderBaseProps } from './types';
+export interface CubeSliderProps extends CubeSliderBaseProps<number> {
+    gradation?: string[];
+}
+declare const __Slider: import("react").ForwardRefExoticComponent<CubeSliderProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
+    cubeInputType: string;
+};
+export { __Slider as Slider };

package/types/components/forms/Slider/SliderBase.d.ts

@@ -0,0 +1,13 @@
+import { RefObject, ReactNode } from 'react';
+import { SliderState } from '@react-stately/slider';
+import { CubeSliderBaseProps } from './types';
+export interface SliderBaseChildArguments {
+    inputRef: RefObject<HTMLInputElement>;
+    trackRef: RefObject<HTMLElement>;
+    state: SliderState;
+}
+export interface SliderBaseProps<T = number[]> extends CubeSliderBaseProps<T> {
+    children: (opts: SliderBaseChildArguments) => ReactNode;
+}
+declare const _SliderBase: import("react").ForwardRefExoticComponent<SliderBaseProps<number[]> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;
+export { _SliderBase as SliderBase };

package/types/components/forms/{RangeSlider/RangeInput.d.ts → Slider/SliderInput.d.ts}

@@ -8,4 +8,4 @@ export interface RangeInputProps extends CubeNumberInputProps {
     max?: number;
     width?: string;
 }
-export declare function RangeInput(props: RangeInputProps): JSX.Element;
+export declare function SliderInput(props: RangeInputProps): JSX.Element;

package/types/components/forms/Slider/SliderThumb.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+import { AriaSliderThumbOptions } from '@react-aria/slider';
+import { SliderState } from '@react-stately/slider';
+export interface SliderThumbProps extends AriaSliderThumbOptions {
+    state: SliderState;
+    isDisabled?: boolean;
+    trackRef: RefObject<HTMLElement>;
+    inputRef: RefObject<HTMLInputElement>;
+}
+export declare function SliderThumb(props: SliderThumbProps): JSX.Element;

package/types/components/forms/Slider/SliderTrack.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SliderState } from '@react-stately/slider';
+export declare type SliderTrackProps = {
+    state: SliderState;
+    orientation?: 'horizontal' | 'vertical';
+    isDisabled?: boolean;
+};
+export declare function SliderTrack(props: SliderTrackProps): JSX.Element;

package/types/components/forms/Slider/elements.d.ts

@@ -0,0 +1,6 @@
+export declare const SliderThumbElement: any;
+export declare const SliderTrackContainerElement: any;
+export declare const SliderGradationElement: any;
+export declare const SliderGradeElement: any;
+export declare const SliderControlsElement: any;
+export declare const SliderElement: any;

package/types/components/forms/Slider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RangeSlider';
+export * from './Slider';
+export * from './types';

package/types/components/forms/Slider/types.d.ts

@@ -0,0 +1,16 @@
+import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+import { FormFieldProps } from '../../../shared';
+import type { AriaSliderProps } from '@react-types/slider';
+export interface CubeSliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'label'>, BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps {
+    inputStyles?: Styles;
+    gradation?: string[];
+    inputWidth?: string;
+    /**
+     * The display format of the value label.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */
+    showValueLabel?: boolean;
+    /** A function that returns the content to display as the value's label. Overrides default formatted number. */
+    getValueLabel?: (value: T) => string | undefined;
+}

package/types/index.d.ts

@@ -75,8 +75,10 @@ export type { CubeSwitchProps } from './components/forms/Switch/Switch';
 export { Radio } from './components/forms/RadioGroup/Radio';
 export type { CubeRadioProps } from './components/forms/RadioGroup/Radio';
 export type { CubeRadioGroupProps } from './components/forms/RadioGroup/RadioGroup';
-export { RangeSlider } from './components/forms/RangeSlider/RangeSlider';
-export type { CubeRangeSliderProps } from './components/forms/RangeSlider/RangeSlider';
+export { RangeSlider } from './components/forms/Slider/RangeSlider';
+export type { CubeRangeSliderProps } from './components/forms/Slider/RangeSlider';
+export { Slider } from './components/forms/Slider/Slider';
+export type { CubeSliderProps } from './components/forms/Slider/Slider';
 export { ComboBox } from './components/pickers/ComboBox/ComboBox';
 export type { CubeComboBoxProps } from './components/pickers/ComboBox/ComboBox';
 export { Menu } from './components/pickers/Menu/Menu';

package/types/shared/index.d.ts

@@ -1,3 +1,4 @@
 export * from './form';
 export declare type Axis = 'top' | 'right' | 'bottom' | 'left';
 export declare type PlacementAxis = Axis | 'center';
+export declare type RangeValue<T> = [T, T];

package/cjs/components/forms/RangeSlider/RangeSlider.js

@@ -1,100 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.16
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RangeSlider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const slider_1 = require("@react-aria/slider");
-const slider_2 = require("@react-stately/slider");
-const FieldWrapper_1 = require("../../forms/FieldWrapper");
-const tasty_1 = require("../../../tasty");
-const Form_1 = require("../Form");
-const Slide_1 = require("./Slide");
-const Gradation_1 = require("./Gradation");
-const Thumb_1 = require("./Thumb");
-const RangeInput_1 = require("./RangeInput");
-const styled_1 = require("./styled");
-const helpers_1 = require("./helpers");
-function RangeSlider(allProps, ref) {
-    const props = (0, Form_1.useFormProps)(allProps);
-    let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, defaultValue, value, gradation, step = 1, isDisabled, showInput, inputStyles, minValue, maxValue, inputWidth, formatOptions, onChange, onChangeEnd, orientation: formOrientation, ...otherProps } = props;
-    let orientation = allProps.orientation || 'horizontal';
-    const [min, max] = (0, helpers_1.getMinMaxValue)(minValue, maxValue, value || defaultValue);
-    const ranges = (0, helpers_1.getRanges)(defaultValue || value || [0, 1]);
-    const isSingle = ranges.length <= 1;
-    const trackRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)(null);
-    const numberFormatter = new Intl.NumberFormat();
-    const baseProps = {
-        step,
-        orientation,
-        isDisabled,
-        minValue: min,
-        maxValue: max,
-        value: (0, helpers_1.getValidValue)(value, min, max),
-        defaultValue: (0, helpers_1.getValidValue)(defaultValue, min, max),
-        onChange(range) {
-            if (onChange) {
-                onChange(Array.isArray(range) ? range : [range]);
-            }
-        },
-        onChangeEnd(range) {
-            if (onChangeEnd) {
-                onChangeEnd(Array.isArray(range) ? range : [range]);
-            }
-        },
-    };
-    const state = (0, slider_2.useSliderState)({
-        ...props,
-        ...baseProps,
-        numberFormatter,
-    });
-    const { groupProps, trackProps, labelProps } = (0, slider_1.useSlider)({
-        ...props,
-        ...baseProps,
-    }, state, trackRef);
-    const inputProps = {
-        step,
-        state,
-        isDisabled,
-        styles: inputStyles,
-        min: baseProps.minValue,
-        max: baseProps.maxValue,
-    };
-    const sliderField = ((0, jsx_runtime_1.jsxs)(styled_1.StyledSlider, { ...groupProps, mods: {
-            sideLabel: labelPosition === 'side',
-            inputs: showInput,
-        }, children: [!isSingle && showInput && ((0, jsx_runtime_1.jsx)(RangeInput_1.RangeInput, { formatOptions: formatOptions, width: inputWidth, index: 0, ...inputProps }, void 0)), (0, jsx_runtime_1.jsx)(styled_1.StyledContent, { children: (0, jsx_runtime_1.jsxs)(styled_1.StyledControls, { ...trackProps, ref: trackRef, children: [(0, jsx_runtime_1.jsx)(Slide_1.Slide, { state: state, ranges: ranges, isSingle: isSingle, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: ranges, values: gradation }, void 0), ranges.map((thumb) => ((0, jsx_runtime_1.jsx)(Thumb_1.Thumb, { index: thumb, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled, defaultValue: baseProps.defaultValue && baseProps.defaultValue[thumb] }, thumb)))] }, void 0) }, void 0), showInput && ((0, jsx_runtime_1.jsx)(RangeInput_1.RangeInput, { formatOptions: formatOptions, width: inputWidth, index: state.values.length > 1 ? 1 : 0, ...inputProps }, void 0))] }, void 0));
-    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
-            labelPosition,
-            label,
-            extra,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            labelProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            labelSuffix,
-            Component: sliderField,
-            ref: ref,
-        } }, void 0));
-}
-const _RangeSlider = (0, react_1.forwardRef)(RangeSlider);
-const __RangeSlider = Object.assign(_RangeSlider, {
-    cubeInputType: 'CheckboxGroup',
-});
-exports.RangeSlider = __RangeSlider;
-
-        

package/cjs/components/forms/RangeSlider/Slide.js

@@ -1,28 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.16
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slide = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_1 = require("./styled");
-function Slide(props) {
-    const { ranges, state, isDisabled, isSingle } = props;
-    const style = {};
-    const mods = (0, react_1.useMemo)(() => ({
-        single: isSingle,
-        disabled: isDisabled,
-    }), [isDisabled, isSingle]);
-    ranges.forEach((rangeIndex) => {
-        style[`--thumb-${rangeIndex}-value`] = state.getThumbPercent(rangeIndex);
-    });
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledSlide, { mods: mods, children: (0, jsx_runtime_1.jsx)(styled_1.StyledSlideTrack, { style: style, mods: mods }, void 0) }, void 0));
-}
-exports.Slide = Slide;
-
-        

package/cjs/components/forms/RangeSlider/Thumb.js

@@ -1,36 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.16
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Thumb = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const slider_1 = require("@react-aria/slider");
-const interactions_1 = require("@react-aria/interactions");
-const visually_hidden_1 = require("@react-aria/visually-hidden");
-const focus_1 = require("@react-aria/focus");
-const react_2 = require("../../../utils/react");
-const styled_1 = require("./styled");
-function Thumb(props) {
-    const { state, isDisabled } = props;
-    const ref = (0, react_1.useRef)(null);
-    const { thumbProps, inputProps, isDragging, isFocused } = (0, slider_1.useSliderThumb)({
-        ...props,
-        inputRef: ref,
-    }, state);
-    const { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
-    return ((0, jsx_runtime_1.jsx)(focus_1.FocusRing, { within: true, children: (0, jsx_runtime_1.jsx)(styled_1.StyledThumb, { mods: {
-                hovered: isHovered,
-                dragged: isDragging,
-                focused: !isDragging && isFocused,
-                disabled: isDisabled,
-            }, ...(0, react_2.mergeProps)(thumbProps, hoverProps), role: "presentation", children: (0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps }, void 0) }, void 0) }, void 0) }, void 0));
-}
-exports.Thumb = Thumb;
-
-        

package/cjs/components/forms/RangeSlider/helpers.js

@@ -1,62 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.16
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMinMaxValue = exports.getValidValue = exports.isValueValid = exports.isNumber = exports.getRanges = void 0;
-function getRanges(value) {
-    if (Array.isArray(value)) {
-        return value.length >= 2 ? [0, 1] : [0];
-    }
-    return [0];
-}
-exports.getRanges = getRanges;
-function isNumber(val) {
-    return typeof val === 'number';
-}
-exports.isNumber = isNumber;
-function isValueValid(value) {
-    return (Array.isArray(value) &&
-        value.length === 2 &&
-        isNumber(value[0]) &&
-        isNumber(value[1]));
-}
-exports.isValueValid = isValueValid;
-function getValidValue(value, min, max) {
-    if (isValueValid(value)) {
-        // try to fix jumbled values
-        let minVal = Math.min(...value);
-        let maxVal = Math.max(...value);
-        // try to fix wrong min value
-        if (isNumber(min) && minVal < min) {
-            minVal = min;
-        }
-        // try to fix wrong max value
-        if (isNumber(max) && maxVal >= max) {
-            maxVal = max;
-        }
-        return [minVal, maxVal];
-    }
-    return value;
-}
-exports.getValidValue = getValidValue;
-function getMinMaxValue(min, max, value) {
-    if (isNumber(min) && isNumber(max)) {
-        if (isValueValid(value)) {
-            const minValue = Math.min(...value);
-            const maxValue = Math.max(...value);
-            // try to set min and max from value if they overflows
-            return [Math.min(min, max, minValue), Math.max(min, max, maxValue)];
-        }
-        // also try to fix jumbled min and max
-        return [Math.min(min, max), Math.max(min, max)];
-    }
-    return [min, max];
-}
-exports.getMinMaxValue = getMinMaxValue;
-
-        

package/cjs/components/forms/RangeSlider/styled.js

@@ -1,111 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.16
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledContent = exports.StyledSlider = exports.StyledControls = exports.StyledGrade = exports.StyledGradation = exports.StyledSlideTrack = exports.StyledSlide = exports.StyledThumb = void 0;
-const tasty_1 = require("../../../tasty");
-exports.StyledThumb = (0, tasty_1.tasty)({
-    styles: {
-        top: '2x',
-        width: '2x',
-        height: '2x',
-        fill: {
-            '': '#purple',
-            hovered: '#purple-text',
-            dragged: '#purple',
-            disabled: '#dark-04',
-        },
-        cursor: 'pointer',
-        shadow: {
-            '': '0px 2px 4px #dark.2',
-            dragged: 'inset 0 0 0 2px #purple-text, 0px 2px 4px #dark.2',
-        },
-        radius: '50%',
-        border: {
-            '': null,
-            focused: '3px solid #purple-04',
-        },
-        transition: 'theme',
-    },
-});
-exports.StyledSlide = (0, tasty_1.tasty)({
-    styles: {
-        top: '1.875x',
-        position: 'absolute',
-        fill: {
-            '': '#dark-05',
-            // disabled: '#dark-04',
-        },
-        height: '2px',
-        width: '100%',
-        radius: true,
-    },
-});
-exports.StyledSlideTrack = (0, tasty_1.tasty)({
-    styles: {
-        position: 'absolute',
-        '@start-range': {
-            '': '@thumb-0-value',
-            single: '0',
-        },
-        '@end-range': {
-            '': '(1 - @thumb-1-value)',
-            single: '(1 - @thumb-0-value)',
-        },
-        left: '(@start-range * 100%)',
-        right: '(@end-range * 100%)',
-        height: '2px',
-        fill: {
-            '': '#purple',
-            disabled: '#dark-04',
-        },
-        radius: true,
-    },
-});
-exports.StyledGradation = (0, tasty_1.tasty)({
-    styles: {},
-});
-exports.StyledGrade = (0, tasty_1.tasty)({
-    styles: {},
-});
-exports.StyledControls = (0, tasty_1.tasty)({
-    styles: {
-        position: 'relative',
-        width: '100% - 2x',
-        height: '4x',
-    },
-});
-exports.StyledSlider = (0, tasty_1.tasty)({
-    qa: 'RangeSlider',
-    as: 'section',
-    styles: {
-        position: 'relative',
-        display: 'inline-flex',
-        verticalAlign: 'middle',
-        gap: {
-            '': '0',
-            inputs: '1x',
-        },
-        flexDirection: {
-            '': 'column',
-            inputs: 'row',
-        },
-        alignItems: 'center',
-        width: '100%',
-    },
-});
-exports.StyledContent = (0, tasty_1.tasty)({
-    styles: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-        width: '100%',
-    },
-});
-
-        

package/es/components/forms/RangeSlider/RangeSlider.js

@@ -1,97 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.16
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
-import { useSlider } from '@react-aria/slider';
-import { useSliderState } from '@react-stately/slider';
-import { FieldWrapper } from '../../forms/FieldWrapper';
-import { extractStyles, OUTER_STYLES, } from '../../../tasty';
-import { useFormProps } from '../Form';
-import { Slide } from './Slide';
-import { Gradation } from './Gradation';
-import { Thumb } from './Thumb';
-import { RangeInput } from './RangeInput';
-import { StyledControls, StyledSlider, StyledContent } from './styled';
-import { getMinMaxValue, getRanges, getValidValue, } from './helpers';
-function RangeSlider(allProps, ref) {
-    const props = useFormProps(allProps);
-    let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, defaultValue, value, gradation, step = 1, isDisabled, showInput, inputStyles, minValue, maxValue, inputWidth, formatOptions, onChange, onChangeEnd, orientation: formOrientation, ...otherProps } = props;
-    let orientation = allProps.orientation || 'horizontal';
-    const [min, max] = getMinMaxValue(minValue, maxValue, value || defaultValue);
-    const ranges = getRanges(defaultValue || value || [0, 1]);
-    const isSingle = ranges.length <= 1;
-    const trackRef = useRef(null);
-    const inputRef = useRef(null);
-    const numberFormatter = new Intl.NumberFormat();
-    const baseProps = {
-        step,
-        orientation,
-        isDisabled,
-        minValue: min,
-        maxValue: max,
-        value: getValidValue(value, min, max),
-        defaultValue: getValidValue(defaultValue, min, max),
-        onChange(range) {
-            if (onChange) {
-                onChange(Array.isArray(range) ? range : [range]);
-            }
-        },
-        onChangeEnd(range) {
-            if (onChangeEnd) {
-                onChangeEnd(Array.isArray(range) ? range : [range]);
-            }
-        },
-    };
-    const state = useSliderState({
-        ...props,
-        ...baseProps,
-        numberFormatter,
-    });
-    const { groupProps, trackProps, labelProps } = useSlider({
-        ...props,
-        ...baseProps,
-    }, state, trackRef);
-    const inputProps = {
-        step,
-        state,
-        isDisabled,
-        styles: inputStyles,
-        min: baseProps.minValue,
-        max: baseProps.maxValue,
-    };
-    const sliderField = (_jsxs(StyledSlider, { ...groupProps, mods: {
-            sideLabel: labelPosition === 'side',
-            inputs: showInput,
-        }, children: [!isSingle && showInput && (_jsx(RangeInput, { formatOptions: formatOptions, width: inputWidth, index: 0, ...inputProps }, void 0)), _jsx(StyledContent, { children: _jsxs(StyledControls, { ...trackProps, ref: trackRef, children: [_jsx(Slide, { state: state, ranges: ranges, isSingle: isSingle, isDisabled: isDisabled }, void 0), _jsx(Gradation, { state: state, ranges: ranges, values: gradation }, void 0), ranges.map((thumb) => (_jsx(Thumb, { index: thumb, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled, defaultValue: baseProps.defaultValue && baseProps.defaultValue[thumb] }, thumb)))] }, void 0) }, void 0), showInput && (_jsx(RangeInput, { formatOptions: formatOptions, width: inputWidth, index: state.values.length > 1 ? 1 : 0, ...inputProps }, void 0))] }, void 0));
-    styles = extractStyles(otherProps, OUTER_STYLES, styles);
-    return (_jsx(FieldWrapper, { ...{
-            labelPosition,
-            label,
-            extra,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            labelProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            labelSuffix,
-            Component: sliderField,
-            ref: ref,
-        } }, void 0));
-}
-const _RangeSlider = forwardRef(RangeSlider);
-const __RangeSlider = Object.assign(_RangeSlider, {
-    cubeInputType: 'CheckboxGroup',
-});
-export { __RangeSlider as RangeSlider };
-
-        

package/es/components/forms/RangeSlider/Slide.js

@@ -1,24 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.16
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { StyledSlide, StyledSlideTrack } from './styled';
-export function Slide(props) {
-    const { ranges, state, isDisabled, isSingle } = props;
-    const style = {};
-    const mods = useMemo(() => ({
-        single: isSingle,
-        disabled: isDisabled,
-    }), [isDisabled, isSingle]);
-    ranges.forEach((rangeIndex) => {
-        style[`--thumb-${rangeIndex}-value`] = state.getThumbPercent(rangeIndex);
-    });
-    return (_jsx(StyledSlide, { mods: mods, children: _jsx(StyledSlideTrack, { style: style, mods: mods }, void 0) }, void 0));
-}
-
-        

package/es/components/forms/RangeSlider/Thumb.js

@@ -1,32 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.16
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useSliderThumb } from '@react-aria/slider';
-import { useHover } from '@react-aria/interactions';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { FocusRing } from '@react-aria/focus';
-import { mergeProps } from '../../../utils/react';
-import { StyledThumb } from './styled';
-export function Thumb(props) {
-    const { state, isDisabled } = props;
-    const ref = useRef(null);
-    const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb({
-        ...props,
-        inputRef: ref,
-    }, state);
-    const { hoverProps, isHovered } = useHover({ isDisabled });
-    return (_jsx(FocusRing, { within: true, children: _jsx(StyledThumb, { mods: {
-                hovered: isHovered,
-                dragged: isDragging,
-                focused: !isDragging && isFocused,
-                disabled: isDisabled,
-            }, ...mergeProps(thumbProps, hoverProps), role: "presentation", children: _jsx(VisuallyHidden, { children: _jsx("input", { ref: ref, ...inputProps }, void 0) }, void 0) }, void 0) }, void 0));
-}
-
-