@toptal/picasso-slider 1.0.6 → 2.0.0

package/dist-package/src/Slider/Slider.d.ts

@@ -1,47 +1,47 @@
-import type { ChangeEvent, ComponentProps } from 'react';
 import React from 'react';
-import { Slider as MUISlider } from '@material-ui/core';
-import type { ValueLabelProps } from '../SliderValueLabel';
-declare type Value = number | number[];
-declare type ValueLabelDisplay = 'on' | 'auto' | 'off';
-export interface Props extends ComponentProps<typeof MUISlider> {
+import type { BaseProps } from '@toptal/picasso-shared';
+export interface Props extends BaseProps {
     /** Minimum slider value */
     min?: number;
     /** Maximum slider value */
     max?: number;
     /** Controlled value of the component */
-    value?: Value;
-    /** The default value. Use when the component is not controlled. */
-    defaultValue?: Value;
+    value?: number | number[];
+    /** The default value. Use when the component is not controlled */
+    defaultValue?: number | number[];
     /** Step for the thumb movement */
     step?: number;
     /** Whether marks are shown or not */
     marks?: boolean;
     /** Whether component is disabled or not */
     disabled?: boolean;
-    /** The tooltip component. */
-    TooltipComponent?: React.ElementType<ValueLabelProps & {
-        index: number;
-    }>;
     /** Controls when tooltip is displayed:
     - **auto** the value tooltip will display when the thumb is hovered or focused.
     - **on** will display persistently.
     - **off** will never display
     */
-    tooltip?: ValueLabelDisplay;
+    tooltip?: 'on' | 'auto' | 'off';
     /** The format function the value tooltip's value. */
     tooltipFormat?: string | ((value: number, index: number) => React.ReactNode);
-    /** Show a compact tooltip */
-    compact?: boolean;
-    /** Disable the portal behavior of the tooltip. The children stay within it's parent */
-    disablePortal?: boolean;
     /** Callback invoked when slider changes its state. */
-    onChange?: (event: ChangeEvent<{}>, value: Value) => void;
+    onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+    /** Callback invoked on focus */
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    /** Callback invoked on blur */
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
     /** Hide thumb when value is undefined or null. Works only when the component is controlled. */
     hideThumbOnEmpty?: boolean;
     /** Disable track highlight. */
     disableTrackHighlight?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Id attribute of the `input` element.
+     */
+    id?: string;
 }
-export declare const Slider: React.ForwardRefExoticComponent<Pick<Props, "tooltip" | "disablePortal" | "compact" | "children" | "value" | "valueLabelDisplay" | "slot" | "style" | "title" | "track" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "scale" | "innerRef" | "key" | "getAriaLabel" | "getAriaValueText" | "marks" | "max" | "min" | "name" | "onChangeCommitted" | "orientation" | "step" | "ThumbComponent" | "ValueLabelComponent" | "valueLabelFormat" | "TooltipComponent" | "tooltipFormat" | "hideThumbOnEmpty" | "disableTrackHighlight"> & React.RefAttributes<HTMLElement>>;
+export declare const Slider: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
 export default Slider;
 //# sourceMappingURL=Slider.d.ts.map

package/dist-package/src/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,KAAsC,MAAM,OAAO,CAAA;AAI1D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAIvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAO1D,aAAK,KAAK,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;AAC9B,aAAK,iBAAiB,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,CAAA;AAE9C,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,SAAS,CAAC;IAC7D,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,mEAAmE;IACnE,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,eAAe,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACzE;;;;MAIE;IACF,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAC5E,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACzD,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,+BAA+B;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAmBD,eAAO,MAAM,MAAM,y9JA8EjB,CAAA;AAYF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAIjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAChC,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;MAIE;IACF,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK,CAAA;IAC/B,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAC5E,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EACxB,WAAW,EAAE,MAAM,KAChB,IAAI,CAAA;IACT,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACxD,+BAA+B;IAC/B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACvD,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,+BAA+B;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,eAAO,MAAM,MAAM,2EA4GjB,CAAA;AAWF,eAAe,MAAM,CAAA"}

package/dist-package/src/Slider/Slider.js

@@ -1,46 +1,55 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef, useRef, useMemo } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Slider as MUISlider } from '@material-ui/core';
-import cx from 'classnames';
-import { useCombinedRefs } from '@toptal/picasso-utils';
-import { SliderValueLabel } from '../SliderValueLabel';
-import { SliderContextProvider } from './SliderContext';
-import styles from './styles';
-const useStyles = makeStyles(styles);
-const createDefaultValueLabelComponent = (tooltip, disablePortal, compact) => {
-    const ValueLableComponent = (props) => (React.createElement(SliderValueLabel, Object.assign({}, props, { tooltip: tooltip, disablePortal: disablePortal, compact: compact })));
-    return ValueLableComponent;
-};
+// import type { ComponentProps } from 'react'
+import React, { forwardRef, useRef } from 'react';
+import { Slider as MUIBaseSlider } from '@mui/base/Slider';
+import { useCombinedRefs, useOnScreen } from '@toptal/picasso-utils';
+import { twJoin, twMerge } from 'tailwind-merge';
+import SliderMark from '../SliderMark';
+import SliderValueLabel from '../SliderValueLabel';
+import { useLabelOverlap } from './hooks';
 export const Slider = forwardRef(function Slider(props, ref) {
-    const { min, max, marks, value, defaultValue = 0, tooltip, tooltipFormat, compact, TooltipComponent: UserDefinedTooltip, step, disabled, disablePortal, onChange, hideThumbOnEmpty, disableTrackHighlight } = props, rest = __rest(props, ["min", "max", "marks", "value", "defaultValue", "tooltip", "tooltipFormat", "compact", "TooltipComponent", "step", "disabled", "disablePortal", "onChange", "hideThumbOnEmpty", "disableTrackHighlight"]);
-    const _a = useStyles(), { wrapper, markTrack, hideThumb, markInactive, unmarkTrack } = _a, classes = __rest(_a, ["wrapper", "markTrack", "hideThumb", "markInactive", "unmarkTrack"]);
+    const { min, max, marks, value, defaultValue = 0, tooltip = 'off', tooltipFormat, step, disabled, onChange, onBlur, onFocus, hideThumbOnEmpty, disableTrackHighlight, className, style, name, id, 'data-private': dataPrivate, 'data-testid': dataTestid, } = props;
+    const containerRef = useRef(null);
     const sliderRef = useCombinedRefs(ref, useRef(null));
+    const { isPartiallyOverlapped, handleValueLabelOnRender } = useLabelOverlap({
+        value,
+    });
     const isThumbHidden = hideThumbOnEmpty && (typeof value === 'undefined' || value === null);
-    const DefaultValueLabelComponent = useMemo(() => createDefaultValueLabelComponent(tooltip, disablePortal, compact), [tooltip, disablePortal, compact]);
-    // From Workaround for https://github.com/mui-org/material-ui/issues/21889
-    const ValueLabelComponent = (UserDefinedTooltip ||
-        DefaultValueLabelComponent);
-    return (React.createElement(SliderContextProvider, null,
-        React.createElement("div", { className: wrapper },
-            React.createElement(MUISlider, Object.assign({}, rest, { ref: sliderRef, defaultValue: defaultValue, value: value, min: min, max: max, step: step, marks: marks, disabled: disabled, classes: Object.assign(Object.assign({}, classes), { track: cx(classes.track, {
-                        [markTrack]: marks,
-                        [unmarkTrack]: disableTrackHighlight,
-                    }), thumb: cx(classes.thumb, {
-                        [hideThumb]: isThumbHidden,
-                    }), markActive: cx(classes.markActive, {
-                        [markInactive]: isThumbHidden || disableTrackHighlight,
-                    }) }), ValueLabelComponent: ValueLabelComponent, valueLabelFormat: tooltipFormat, valueLabelDisplay: tooltip, onChange: onChange })))));
+    // The rootMargin is not working correctly in the storybooks iframe
+    // To test properly we can open the iframe in new window
+    const isContainerOnScreen = useOnScreen({
+        ref: containerRef,
+        rootMargin: '-24px 0px 0px 0px',
+        threshold: 1,
+    });
+    return (React.createElement("div", { ref: containerRef, className: twMerge('my-[6px] mx-0', className), style: style },
+        React.createElement(MUIBaseSlider, { ref: sliderRef, defaultValue: defaultValue, value: value, min: min, max: max, step: step, marks: marks, disabled: disabled, "data-testid": dataTestid, "data-private": dataPrivate, onFocus: onFocus, onBlur: onBlur, name: name, id: id, slots: {
+                mark: SliderMark,
+                valueLabel: SliderValueLabel,
+            }, slotProps: {
+                mark: {
+                    // @ts-expect-error we have custom Mark component, where we extend props and MUI does not understand it
+                    forceInactive: disableTrackHighlight,
+                },
+                root: {
+                    className: 'block cursor-pointer width-full relative py-[6px] -my-[6px]',
+                },
+                rail: {
+                    className: 'block absolute w-full h-[1px] opacity-[0.24] rounded-none bg-gray-500',
+                },
+                thumb: {
+                    className: twJoin('group/thumb flex justify-center items-center w-[15px] h-[15px]', 'rounded-[50%] bg-blue-500 border-[2px] border-solid border-white', '-mt-[7px] -ml-[6px] outline-0 absolute  transition-shadow cursor-pointer', isThumbHidden && 'hidden'),
+                    role: 'slider',
+                },
+                track: {
+                    className: twJoin('block absolute h-[1px]', disableTrackHighlight ? 'bg-gray-200' : 'bg-blue-500'),
+                },
+                valueLabel: {
+                    tooltip,
+                    onRender: handleValueLabelOnRender,
+                    yPlacement: isContainerOnScreen ? 'top' : 'bottom',
+                    isOverlaped: isPartiallyOverlapped,
+                },
+            }, valueLabelFormat: tooltipFormat, onChange: onChange })));
 });
 Slider.displayName = 'Slider';
 Slider.defaultProps = {
@@ -48,7 +57,6 @@ Slider.defaultProps = {
     min: 0,
     max: 100,
     tooltip: 'off',
-    disablePortal: false,
 };
 export default Slider;
 //# sourceMappingURL=Slider.js.map

package/dist-package/src/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/Slider/Slider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/Slider/Slider.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/Slider/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-label-overlap';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/Slider/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Slider/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist-package/src/Slider/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './use-label-overlap';
+//# sourceMappingURL=index.js.map

package/dist-package/src/Slider/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Slider/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist-package/src/Slider/hooks/use-label-overlap.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from 'react';
+export declare const useLabelOverlap: ({ value }: {
+    value?: number | number[] | undefined;
+}) => {
+    isPartiallyOverlapped: boolean;
+    handleValueLabelOnRender: (index: number, labelRef: RefObject<HTMLSpanElement>) => void;
+};
+//# sourceMappingURL=use-label-overlap.d.ts.map

package/dist-package/src/Slider/hooks/use-label-overlap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-label-overlap.d.ts","sourceRoot":"","sources":["../../../../src/Slider/hooks/use-label-overlap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,eAAO,MAAM,eAAe;;;;sCA+BhB,MAAM,YAAY,UAAU,eAAe,CAAC;CAWvD,CAAA"}

package/dist-package/src/Slider/hooks/use-label-overlap.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from 'react';
+import { checkOverlap } from '../../utils';
+export const useLabelOverlap = ({ value }) => {
+    const [isPartiallyOverlapped, setIsPartiallyOverlapped] = useState(false);
+    const [valueLabels, setValueLabels] = useState([]);
+    const isRangeSlider = Array.isArray(value);
+    useEffect(() => {
+        var _a, _b;
+        if (!isRangeSlider) {
+            return;
+        }
+        const isFullyOverlaped = value[0] === value[1];
+        if (isFullyOverlaped) {
+            setIsPartiallyOverlapped(false);
+        }
+        else {
+            if (!(((_a = valueLabels[0]) === null || _a === void 0 ? void 0 : _a.current) && ((_b = valueLabels[1]) === null || _b === void 0 ? void 0 : _b.current))) {
+                return;
+            }
+            setIsPartiallyOverlapped(checkOverlap({
+                firstLabelRect: valueLabels[0].current.getBoundingClientRect(),
+                secondLabelRect: valueLabels[1].current.getBoundingClientRect(),
+                previousResult: isPartiallyOverlapped,
+            }));
+        }
+    }, [value, isRangeSlider, isPartiallyOverlapped, valueLabels]);
+    const handleValueLabelOnRender = useCallback((index, labelRef) => {
+        setValueLabels(valLabels => {
+            valLabels[index] = labelRef;
+            return valLabels;
+        });
+    }, [setValueLabels]);
+    return { isPartiallyOverlapped, handleValueLabelOnRender };
+};
+//# sourceMappingURL=use-label-overlap.js.map

package/dist-package/src/Slider/hooks/use-label-overlap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-label-overlap.js","sourceRoot":"","sources":["../../../../src/Slider/hooks/use-label-overlap.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAiC,EAAE,EAAE;IAC1E,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAC5C,EAAE,CACH,CAAA;IACD,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAE1C,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,CAAC,aAAa,EAAE;YAClB,OAAM;SACP;QACD,MAAM,gBAAgB,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAA;QAE9C,IAAI,gBAAgB,EAAE;YACpB,wBAAwB,CAAC,KAAK,CAAC,CAAA;SAChC;aAAM;YACL,IAAI,CAAC,CAAC,CAAA,MAAA,WAAW,CAAC,CAAC,CAAC,0CAAE,OAAO,MAAI,MAAA,WAAW,CAAC,CAAC,CAAC,0CAAE,OAAO,CAAA,CAAC,EAAE;gBACzD,OAAM;aACP;YAED,wBAAwB,CACtB,YAAY,CAAC;gBACX,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,EAAE;gBAC9D,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,EAAE;gBAC/D,cAAc,EAAE,qBAAqB;aACtC,CAAC,CACH,CAAA;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,WAAW,CAAC,CAAC,CAAA;IAE9D,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,KAAa,EAAE,QAAoC,EAAE,EAAE;QACtD,cAAc,CAAC,SAAS,CAAC,EAAE;YACzB,SAAS,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAA;YAE3B,OAAO,SAAS,CAAA;QAClB,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAA;IAED,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAA;AAC5D,CAAC,CAAA"}

package/dist-package/src/Slider/index.d.ts

@@ -1,6 +1,5 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared';
 import type { Props } from './Slider';
 export { default as Slider } from './Slider';
-export { useSliderContext } from './SliderContext';
 export declare type SliderProps = OmitInternalProps<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/Slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,oBAAY,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,oBAAY,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

package/dist-package/src/Slider/index.js

@@ -1,3 +1,2 @@
 export { default as Slider } from './Slider';
-export { useSliderContext } from './SliderContext';
 //# sourceMappingURL=index.js.map

package/dist-package/src/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Slider/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Slider/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA"}

package/dist-package/src/SliderMark/SliderMark.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type SliderMarkProps = {
+    markActive: boolean;
+    ownerState: {
+        value: number;
+    };
+    style: React.CSSProperties;
+    'data-index': number;
+    forceInactive: boolean;
+};
+declare const SliderMark: ({ markActive, ownerState, "data-index": dataIndex, style, forceInactive, }: SliderMarkProps) => JSX.Element;
+export default SliderMark;
+//# sourceMappingURL=SliderMark.d.ts.map

package/dist-package/src/SliderMark/SliderMark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderMark.d.ts","sourceRoot":"","sources":["../../../src/SliderMark/SliderMark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,oBAAY,eAAe,GAAG;IAC5B,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,OAAO,CAAA;CACvB,CAAA;AAID,QAAA,MAAM,UAAU,+EAMb,eAAe,gBAWjB,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist-package/src/SliderMark/SliderMark.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { twJoin } from 'tailwind-merge';
+import { getBgColor } from '../utils';
+// We need custom Mark component because we have
+// different bg color based on value of the Slider
+const SliderMark = ({ markActive, ownerState, 'data-index': dataIndex, style, forceInactive, }) => {
+    return (React.createElement("span", { "data-index": dataIndex, style: style, className: twJoin('absolute w-[6px] h-[6px] rounded-[50%] border-[2px] top-[1.5px] border-solid border-white opacity-100 -translate-x-2/4 box-content', getBgColor({ markActive, forceInactive, value: ownerState.value })) }));
+};
+export default SliderMark;
+//# sourceMappingURL=SliderMark.js.map

package/dist-package/src/SliderMark/SliderMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderMark.js","sourceRoot":"","sources":["../../../src/SliderMark/SliderMark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAUrC,gDAAgD;AAChD,kDAAkD;AAClD,MAAM,UAAU,GAAG,CAAC,EAClB,UAAU,EACV,UAAU,EACV,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,aAAa,GACG,EAAE,EAAE;IACpB,OAAO,CACL,4CACc,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,MAAM,CACf,oIAAoI,EACpI,UAAU,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,CAAC,CACnE,GACD,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist-package/src/SliderMark/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SliderMark';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/SliderMark/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/SliderMark/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/dist-package/src/SliderMark/index.js

@@ -0,0 +1,2 @@
+export { default } from './SliderMark';
+//# sourceMappingURL=index.js.map

package/dist-package/src/SliderMark/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SliderMark/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/dist-package/src/SliderValueLabel/SliderValueLabel.d.ts

@@ -1,17 +1,12 @@
-/// <reference types="react" />
-import type { ValueLabelProps as MUIValueLabelProps } from '@material-ui/core/Slider';
+import type { SliderValueLabelSlotProps } from '@mui/base/Slider';
+import type { RefObject } from 'react';
 declare type ValueLabelDisplay = 'on' | 'auto' | 'off';
-export declare type ValueLabelProps = MUIValueLabelProps & {
-    valueLabelDisplay: ValueLabelDisplay;
-    index: number;
-};
-export interface Props extends ValueLabelProps {
-    tooltip?: ValueLabelDisplay;
-    disablePortal?: boolean;
-    compact?: boolean;
-    valueLabelDisplay: ValueLabelDisplay;
-    index: number;
-}
-declare const SliderValueLabel: ({ tooltip, disablePortal, compact, children, open, value, valueLabelDisplay, index, }: Props) => JSX.Element;
+declare const SliderValueLabel: ({ children, index, tooltip, onRender, yPlacement, isOverlaped, ownerState: { value }, }: SliderValueLabelSlotProps & {
+    tooltip: ValueLabelDisplay;
+    yPlacement: 'top' | 'bottom';
+    /** indicates if there are two SliderValueLabels that overlap each other */
+    isOverlaped: boolean;
+    onRender: (index: number, ref: RefObject<HTMLSpanElement>) => void;
+}) => JSX.Element;
 export default SliderValueLabel;
 //# sourceMappingURL=SliderValueLabel.d.ts.map

package/dist-package/src/SliderValueLabel/SliderValueLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderValueLabel.d.ts","sourceRoot":"","sources":["../../../src/SliderValueLabel/SliderValueLabel.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAKrF,aAAK,iBAAiB,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,CAAA;AAG9C,oBAAY,eAAe,GAAG,kBAAkB,GAAG;IACjD,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,KAAM,SAAQ,eAAe;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,gBAAgB,0FASnB,KAAK,gBAwCP,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"SliderValueLabel.d.ts","sourceRoot":"","sources":["../../../src/SliderValueLabel/SliderValueLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,aAAK,iBAAiB,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,CAAA;AAqB9C,QAAA,MAAM,gBAAgB;aASX,iBAAiB;gBACd,KAAK,GAAG,QAAQ;IAC5B,2EAA2E;iBAC9D,OAAO;sBACF,MAAM,OAAO,UAAU,eAAe,CAAC,KAAK,IAAI;iBAkDnE,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist-package/src/SliderValueLabel/SliderValueLabel.js

@@ -1,27 +1,44 @@
-import React, { useRef } from 'react';
-import { Tooltip } from '@toptal/picasso-tooltip';
-import { useSliderContext } from '../Slider';
-const SliderValueLabel = ({ tooltip, disablePortal, compact, children, open, value, valueLabelDisplay, index, }) => {
-    const thumbRef = useRef(null);
-    const { registerValueLabel, hasTooltipOverlow } = useSliderContext();
-    const isTooltipAlwaysVisible = tooltip === 'on';
-    if (valueLabelDisplay === 'off') {
-        return children;
-    }
-    const getPlacement = () => {
-        if (hasTooltipOverlow) {
-            return index === 0 ? 'top-end' : 'top-start';
-        }
-        return 'top';
-    };
-    const handleTooltipRef = (tooltipElement) => {
-        // At this moment, both thumb and tooltip refs are set so we can register them in the context
-        const thumbElement = thumbRef.current;
-        if (tooltipElement && thumbElement) {
-            registerValueLabel(index, tooltipElement, thumbElement);
+import React, { useEffect, useRef, useState } from 'react';
+import { twJoin } from 'tailwind-merge';
+import { getXPlacement } from '../utils';
+const classesByTooltip = {
+    off: 'hidden',
+    // We need to use visibility: hidden instead of display: none to keep the
+    // label visible for javascript calculations.
+    auto: 'invisible group-hover/thumb:visible flex justify-center items-center',
+    on: 'flex justify-center items-center',
+};
+const xPlacementClasses = {
+    left: 'right-[calc(100%-13px)]',
+    right: 'left-[calc(100%-13px)]',
+    center: '',
+};
+const yPlacementClasses = {
+    bottom: 'top-[calc(100%+2px)]',
+    top: 'bottom-[calc(100%+2px)]',
+};
+const SliderValueLabel = ({ children, index = -1, tooltip = 'off', onRender, yPlacement, isOverlaped, ownerState: { value }, }) => {
+    const ref = useRef(null);
+    // we need to change the placement of the label if it is overlaped
+    // or if it is out of the viewport
+    const [xPlacement, setXPlacement] = useState('center');
+    useEffect(() => {
+        onRender(index, ref);
+    }, [index, onRender]);
+    useEffect(() => {
+        if (!ref.current) {
+            return;
         }
-    };
-    return (React.createElement(Tooltip, { ref: thumbRef, tooltipRef: handleTooltipRef, content: value, open: open || valueLabelDisplay === 'on', placement: getPlacement(), preventOverflow: isTooltipAlwaysVisible, disablePortal: disablePortal, compact: compact }, children));
+        setXPlacement(getXPlacement({
+            rect: ref.current.getBoundingClientRect(),
+            isOverlaped: isOverlaped,
+            isFirstLabel: index === 0,
+            currentPlacement: xPlacement,
+        }));
+        // we need to recalculate on value change to get new rect
+    }, [isOverlaped, index, xPlacement, value]);
+    return (React.createElement("span", { ref: ref, className: twJoin('absolute will-change-transform transition-transform', classesByTooltip[tooltip], yPlacementClasses[yPlacement], xPlacementClasses[xPlacement]) },
+        React.createElement("span", { className: twJoin('shadow-4 text-sm text-white bg-graphite-800', 'm-1 rounded-sm py-[2px] px-2 max-w-[300px] break-words') }, children)));
 };
 export default SliderValueLabel;
 //# sourceMappingURL=SliderValueLabel.js.map

package/dist-package/src/SliderValueLabel/SliderValueLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderValueLabel.js","sourceRoot":"","sources":["../../../src/SliderValueLabel/SliderValueLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAkB5C,MAAM,gBAAgB,GAAG,CAAC,EACxB,OAAO,EACP,aAAa,EACb,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,iBAAiB,EACjB,KAAK,GACC,EAAE,EAAE;IACV,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC7C,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAA;IACpE,MAAM,sBAAsB,GAAG,OAAO,KAAK,IAAI,CAAA;IAE/C,IAAI,iBAAiB,KAAK,KAAK,EAAE;QAC/B,OAAO,QAAQ,CAAA;KAChB;IAED,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,iBAAiB,EAAE;YACrB,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAA;SAC7C;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,cAA8B,EAAE,EAAE;QAC1D,6FAA6F;QAC7F,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAA;QAErC,IAAI,cAAc,IAAI,YAAY,EAAE;YAClC,kBAAkB,CAAC,KAAK,EAAE,cAAc,EAAE,YAAY,CAAC,CAAA;SACxD;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,OAAO,IACN,GAAG,EAAE,QAAQ,EACb,UAAU,EAAE,gBAAgB,EAC5B,OAAO,EAAE,KAAK,EACd,IAAI,EAAE,IAAI,IAAI,iBAAiB,KAAK,IAAI,EACxC,SAAS,EAAE,YAAY,EAAE,EACzB,eAAe,EAAE,sBAAsB,EACvC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,IAEf,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"SliderValueLabel.js","sourceRoot":"","sources":["../../../src/SliderValueLabel/SliderValueLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAIxC,MAAM,gBAAgB,GAAsC;IAC1D,GAAG,EAAE,QAAQ;IACb,yEAAyE;IACzE,6CAA6C;IAC7C,IAAI,EAAE,sEAAsE;IAC5E,EAAE,EAAE,kCAAkC;CACvC,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,IAAI,EAAE,yBAAyB;IAC/B,KAAK,EAAE,wBAAwB;IAC/B,MAAM,EAAE,EAAE;CACF,CAAA;AAEV,MAAM,iBAAiB,GAAG;IACxB,MAAM,EAAE,sBAAsB;IAC9B,GAAG,EAAE,yBAAyB;CACtB,CAAA;AAEV,MAAM,gBAAgB,GAAG,CAAC,EACxB,QAAQ,EACR,KAAK,GAAG,CAAC,CAAC,EACV,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EAAE,EAAE,KAAK,EAAE,GAOtB,EAAE,EAAE;IACH,MAAM,GAAG,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAEzC,kEAAkE;IAClE,kCAAkC;IAClC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,QAAQ,CACT,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IACtB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAA;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAM;SACP;QAED,aAAa,CACX,aAAa,CAAC;YACZ,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE;YACzC,WAAW,EAAE,WAAW;YACxB,YAAY,EAAE,KAAK,KAAK,CAAC;YACzB,gBAAgB,EAAE,UAAU;SAC7B,CAAC,CACH,CAAA;QACD,yDAAyD;IAC3D,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAA;IAE3C,OAAO,CACL,8BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CACf,qDAAqD,EACrD,gBAAgB,CAAC,OAAO,CAAC,EACzB,iBAAiB,CAAC,UAAU,CAAC,EAC7B,iBAAiB,CAAC,UAAU,CAAC,CAC9B;QAED,8BACE,SAAS,EAAE,MAAM,CACf,6CAA6C,EAC7C,wDAAwD,CACzD,IAEA,QAAQ,CACJ,CACF,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist-package/src/SliderValueLabel/index.d.ts

@@ -1,3 +1,2 @@
-export { default as SliderValueLabel } from './SliderValueLabel';
-export type { Props as SliderValueLabelProps, ValueLabelProps, } from './SliderValueLabel';
+export { default } from './SliderValueLabel';
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/SliderValueLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/SliderValueLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAChE,YAAY,EACV,KAAK,IAAI,qBAAqB,EAC9B,eAAe,GAChB,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/SliderValueLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA"}

package/dist-package/src/SliderValueLabel/index.js

@@ -1,2 +1,2 @@
-export { default as SliderValueLabel } from './SliderValueLabel';
+export { default } from './SliderValueLabel';
 //# sourceMappingURL=index.js.map

package/dist-package/src/SliderValueLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SliderValueLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SliderValueLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA"}

package/dist-package/src/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Slider';
-export * from './SliderValueLabel';
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist-package/src/index.js

@@ -1,3 +1,2 @@
 export * from './Slider';
-export * from './SliderValueLabel';
 //# sourceMappingURL=index.js.map

package/dist-package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist-package/src/utils/check-bg-color.d.ts

@@ -0,0 +1,7 @@
+export declare type GetBgColorProps = {
+    markActive?: boolean;
+    forceInactive?: boolean;
+    value?: number | readonly number[];
+};
+export declare const getBgColor: ({ markActive, forceInactive, value, }: GetBgColorProps) => "bg-gray-500" | "bg-blue-500";
+//# sourceMappingURL=check-bg-color.d.ts.map

package/dist-package/src/utils/check-bg-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-bg-color.d.ts","sourceRoot":"","sources":["../../../src/utils/check-bg-color.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,UAAU,0CAIpB,eAAe,kCAiBjB,CAAA"}

package/dist-package/src/utils/check-bg-color.js

@@ -0,0 +1,15 @@
+export const getBgColor = ({ markActive, forceInactive, value, }) => {
+    const inactive = 'bg-gray-500';
+    const active = 'bg-blue-500';
+    if (forceInactive) {
+        return inactive;
+    }
+    if (markActive) {
+        if (value === undefined) {
+            return inactive;
+        }
+        return active;
+    }
+    return inactive;
+};
+//# sourceMappingURL=check-bg-color.js.map

package/dist-package/src/utils/check-bg-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-bg-color.js","sourceRoot":"","sources":["../../../src/utils/check-bg-color.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,UAAU,EACV,aAAa,EACb,KAAK,GACW,EAAE,EAAE;IACpB,MAAM,QAAQ,GAAG,aAAa,CAAA;IAC9B,MAAM,MAAM,GAAG,aAAa,CAAA;IAE5B,IAAI,aAAa,EAAE;QACjB,OAAO,QAAQ,CAAA;KAChB;IAED,IAAI,UAAU,EAAE;QACd,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB,OAAO,QAAQ,CAAA;SAChB;QAED,OAAO,MAAM,CAAA;KACd;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/dist-package/src/utils/check-overlap.d.ts

@@ -0,0 +1,26 @@
+export declare type CheckOverlapProps = {
+    firstLabelRect: DOMRect;
+    secondLabelRect: DOMRect;
+    previousResult: boolean;
+};
+/**
+ * if we have range slider, there is a chance
+ * when we select values next to each other
+ * that the lables might overlap each other. Like this example:
+ * [   [ ]   ]
+ *    A   B
+ *
+ * In that case we need to reposition the labels to the edges of the thumb.
+ * [  ]   [  ]
+ *    A  B
+ *
+ * In next rerender when we recalculate the position of the labels the
+ * above example would end with result as not overlapping as the position was already changed.
+ * So we need to work with the previous result of this function `previousResult`. When
+ * true we need to add half of the width of the label to simulate the center position.
+ *
+ * This function checks and returns if the labels overlap.
+ * It is called on each render of the component and everytime the Slider changes value.
+ **/
+export declare const checkOverlap: ({ firstLabelRect, secondLabelRect, previousResult, }: CheckOverlapProps) => boolean;
+//# sourceMappingURL=check-overlap.d.ts.map

package/dist-package/src/utils/check-overlap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-overlap.d.ts","sourceRoot":"","sources":["../../../src/utils/check-overlap.ts"],"names":[],"mappings":"AAAA,oBAAY,iBAAiB,GAAG;IAC9B,cAAc,EAAE,OAAO,CAAA;IACvB,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,OAAO,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;;;;;;;;IAkBI;AACJ,eAAO,MAAM,YAAY,yDAItB,iBAAiB,KAAG,OAatB,CAAA"}