@chayns-components/core 5.0.0-beta.8 → 5.0.0-beta.801

package/lib/cjs/components/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n    calculateGradientOffset,\n    calculatePopupPosition,\n    fillSlider,\n    getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is selected.\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: 40,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: 40,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const toSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: toValue,\n                popupWidth: thumbWidth,\n            }),\n        [maxValue, minValue, thumbWidth, toValue],\n    );\n\n    const fromSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: fromValue,\n                popupWidth: thumbWidth,\n            }),\n        [fromValue, maxValue, minValue, thumbWidth],\n    );\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [interval, onSelect, shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={40}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel\n                            $width={thumbWidth}\n                            $isBigSlider={isBigSlider}\n                            $position={fromSliderThumbContentPosition}\n                            ref={fromSliderThumbContentRef}\n                        >\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel\n                                $width={thumbWidth}\n                                $isBigSlider={isBigSlider}\n                                $position={toSliderThumbContentPosition}\n                                ref={toSliderThumbContentRef}\n                            >\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={40}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbWidth,\n            fromSliderThumbContentPosition,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toSliderThumbContentPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider/Slider.styles.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSliderThumbLabel = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
+    width: 100%;
+    height: 30px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+    user-select: none;
+`;
+const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.default)(_framerMotion.motion.input).attrs(({
+  $isInterval,
+  $value,
+  $thumbWidth,
+  $min,
+  $max,
+  theme
+}) => ({
+  style: {
+    pointerEvents: $isInterval ? 'none' : 'all',
+    width: `calc(100% - ${$thumbWidth}px)`,
+    background: !$isInterval ? `linear-gradient(
+            to right,
+            ${theme['409'] ?? ''} 0%,
+            ${theme['409'] ?? ''}
+            ${($value - $min) / ($max - $min) * 100}%,
+            ${theme['403'] ?? ''}
+            ${($value - $min) / ($max - $min) * 100}%,
+            ${theme['403'] ?? ''}
+        )` : undefined
+  }
+}))`
+    position: absolute;
+    border-radius: 100px;
+    -webkit-appearance: none;
+
+    outline: none;
+    cursor: pointer !important;
+    z-index: 2;
+    appearance: none;
+
+    // Slider thumb for chrome
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 50px;
+        height: 20px;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: all;
+        position: relative;
+    }
+
+    // slider thumb for firefox
+
+    &::-moz-range-thumb {
+        width: 50px;
+        height: 20px;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: all;
+        position: relative;
+    }
+`;
+const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.div.attrs(({
+  $position,
+  $isBigSlider
+}) => ({
+  style: {
+    left: `${$position}px`,
+    height: `${$isBigSlider ? 0 : 20}px`
+  }
+}))`
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border-radius: 100px;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    z-index: 3;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    white-space: nowrap;
+    top: 5px;
+
+    transition: top 0.2s ease 0s;
+`;
+const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponents.default.span.attrs(({
+  $position,
+  $isBigSlider,
+  $width
+}) => ({
+  style: {
+    minWidth: `${$width}px`,
+    top: `-${$isBigSlider ? 45 : 35}px`,
+    left: `${$position}px`
+  }
+}))`
+    pointer-events: none;
+    color: #222;
+
+    height: 20px;
+    cursor: pointer;
+    border-radius: 3px;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    z-index: 3;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    white-space: nowrap;
+
+    transition: top 0.2s ease 0s;
+
+    &::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+        left: ${({
+  $position
+}) => $position * -1}px;
+        transform: rotate(225deg);
+        bottom: -7px;
+    }
+
+    &::before {
+        background-color: inherit;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        border-radius: 3px;
+        top: 0;
+        z-index: -1;
+    }
+`;
+//# sourceMappingURL=Slider.styles.js.map

package/lib/cjs/components/slider/Slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n    ({ $position, $isBigSlider, $width }) => ({\n        style: {\n            minWidth: `${$width}px`,\n            top: `-${$isBigSlider ? 45 : 35}px`,\n            left: `${$position}px`,\n        },\n    }),\n)`\n    pointer-events: none;\n    color: #222;\n\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider-button/SliderButton.js

@@ -0,0 +1,279 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _useElementSize = require("../../hooks/useElementSize");
+var _calculate = require("../../utils/calculate");
+var _sliderButton = require("../../utils/sliderButton");
+var _SliderButton = require("./SliderButton.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SliderButton = ({
+  selectedButtonId,
+  isDisabled,
+  items,
+  onChange
+}) => {
+  const [selectedButton, setSelectedButton] = (0, _react.useState)(undefined);
+  const [dragRange, setDragRange] = (0, _react.useState)({
+    left: 0,
+    right: 0
+  });
+  const sliderButtonRef = (0, _react.useRef)(null);
+  const sliderButtonWrapperRef = (0, _react.useRef)(null);
+  const timeout = (0, _react.useRef)();
+  const preventHandleScroll = (0, _react.useRef)(false);
+  const [scope, animate] = (0, _framerMotion.useAnimate)();
+  const itemWidth = (0, _react.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
+  const sliderSize = (0, _useElementSize.useElementSize)(sliderButtonRef);
+  const theme = (0, _styledComponents.useTheme)();
+  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length, [itemWidth, items.length, sliderSize]);
+  (0, _react.useEffect)(() => {
+    if (sliderSize) {
+      const sliderWidth = itemWidth * (items.length - 1);
+      const count = Math.floor(sliderSize.width / itemWidth);
+      setDragRange({
+        left: 0,
+        right: isSliderBigger ? itemWidth * count : sliderWidth
+      });
+    }
+  }, [isSliderBigger, itemWidth, items.length, sliderSize]);
+  const animation = (0, _react.useCallback)(async x => {
+    await animate(scope.current, {
+      x
+    }, {
+      type: 'tween',
+      duration: 0.2
+    });
+  }, [animate, scope]);
+  const setItemPosition = (0, _react.useCallback)(index => {
+    if (!isSliderBigger) {
+      void animation(itemWidth * index);
+      return;
+    }
+    const count = dragRange.right / itemWidth;
+    if (items.length - count >= index) {
+      void animation(0);
+    } else {
+      void animation(itemWidth * (count - (items.length - index)));
+    }
+    if (sliderButtonWrapperRef.current) {
+      sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;
+    }
+  }, [animation, dragRange.right, isSliderBigger, itemWidth, items.length]);
+  (0, _react.useEffect)(() => {
+    if (selectedButtonId) {
+      setSelectedButton(selectedButtonId);
+      const index = items.findIndex(({
+        id
+      }) => id === selectedButtonId);
+      if (index >= 0) {
+        setItemPosition(index);
+      }
+    } else {
+      var _items$;
+      setSelectedButton((_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.id);
+    }
+  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition]);
+  const handleClick = (0, _react.useCallback)((id, index) => {
+    if (isDisabled) {
+      return;
+    }
+    setSelectedButton(id);
+    if (typeof onChange === 'function') {
+      onChange(id);
+    }
+    setItemPosition(index);
+  }, [isDisabled, onChange, setItemPosition]);
+  const buttons = (0, _react.useMemo)(() => items.map(({
+    id,
+    text
+  }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+    $width: itemWidth,
+    key: `slider-button-${id}`,
+    onClick: () => handleClick(id, index),
+    $isSelected: id === selectedButton
+  }, text)), [handleClick, itemWidth, items, selectedButton]);
+  const thumbText = (0, _react.useMemo)(() => {
+    var _items$2;
+    const selectedItem = items.find(({
+      id
+    }) => id === selectedButton);
+    return selectedItem ? selectedItem.text : (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.text;
+  }, [items, selectedButton]);
+
+  /**
+   * Creates an array with the snap points relative to the width of the items
+   */
+  const snapPoints = (0, _react.useMemo)(() => {
+    const points = [0];
+    for (let i = 1; i < items.length; i++) {
+      points.push(itemWidth * i);
+    }
+    return points;
+  }, [itemWidth, items.length]);
+  const handleDragEnd = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.setRefreshScrollEnabled)(true);
+    const position = (0, _sliderButton.getThumbPosition)({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      middle,
+      left
+    } = position;
+    let scrollLeft = 0;
+    if (sliderButtonWrapperRef.current) {
+      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
+      sliderButtonWrapperRef.current.scrollLeft = (0, _sliderButton.getNearestPoint)({
+        snapPoints,
+        position: middle,
+        scrollLeft: scrollLeft - left
+      }).nearestPoint;
+    }
+    const {
+      nearestIndex
+    } = (0, _sliderButton.getNearestPoint)({
+      snapPoints,
+      position: middle,
+      scrollLeft
+    });
+    const {
+      nearestPoint
+    } = (0, _sliderButton.getNearestPoint)({
+      snapPoints,
+      position: middle,
+      scrollLeft: 0
+    });
+    if (nearestPoint >= 0 && nearestIndex >= 0) {
+      var _items$nearestIndex;
+      void animation(nearestPoint);
+      const id = (_items$nearestIndex = items[nearestIndex]) === null || _items$nearestIndex === void 0 ? void 0 : _items$nearestIndex.id;
+      setSelectedButton(id);
+      if (typeof onChange === 'function' && id) {
+        onChange(id);
+      }
+    }
+    preventHandleScroll.current = false;
+  }, [animation, itemWidth, items, onChange, scope, snapPoints]);
+  const handleWhileDrag = (0, _react.useCallback)(() => {
+    preventHandleScroll.current = true;
+    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
+    const position = (0, _sliderButton.getThumbPosition)({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      right,
+      left,
+      middle
+    } = position;
+    let scrollLeft = 0;
+    const scrollSpeed = 3;
+    if (sliderButtonWrapperRef.current) {
+      if (right >= dragRange.right) {
+        sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;
+      }
+      if (left <= dragRange.left) {
+        sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;
+      }
+      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
+    }
+    const {
+      nearestIndex
+    } = (0, _sliderButton.getNearestPoint)({
+      snapPoints,
+      position: middle,
+      scrollLeft
+    });
+    if (nearestIndex >= 0) {
+      var _items$nearestIndex2;
+      setSelectedButton((_items$nearestIndex2 = items[nearestIndex]) === null || _items$nearestIndex2 === void 0 ? void 0 : _items$nearestIndex2.id);
+    }
+  }, [dragRange, itemWidth, items, scope, snapPoints]);
+
+  // With this, the handleScroll works before the thumb is moved the first time.
+  (0, _react.useEffect)(() => {
+    void animation(1);
+    void animation(0);
+  }, [animation]);
+  const handleScroll = (0, _react.useCallback)(event => {
+    if (preventHandleScroll.current) {
+      return;
+    }
+    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
+    const position = (0, _sliderButton.getThumbPosition)({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      middle
+    } = position;
+    const {
+      scrollLeft
+    } = event.target;
+    const {
+      nearestIndex
+    } = (0, _sliderButton.getNearestPoint)({
+      snapPoints,
+      position: middle,
+      scrollLeft
+    });
+    if (nearestIndex >= 0) {
+      var _items$nearestIndex3;
+      setSelectedButton((_items$nearestIndex3 = items[nearestIndex]) === null || _items$nearestIndex3 === void 0 ? void 0 : _items$nearestIndex3.id);
+    }
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = window.setTimeout(() => {
+      handleDragEnd();
+    }, 200);
+  }, [handleDragEnd, itemWidth, items, scope, snapPoints]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButton, {
+    $isDisabled: isDisabled,
+    ref: sliderButtonRef
+  }, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
+    ref: scope,
+    drag: isDisabled ? false : 'x',
+    dragElastic: 0,
+    dragConstraints: isSliderBigger ? {
+      ...dragRange,
+      right: dragRange.right - itemWidth
+    } : {
+      ...dragRange
+    },
+    $width: itemWidth,
+    onDrag: handleWhileDrag,
+    onDragEnd: handleDragEnd,
+    whileTap: isDisabled ? {} : {
+      backgroundColor: theme['407']
+    },
+    whileHover: isDisabled ? {} : {
+      backgroundColor: theme['409']
+    }
+  }, thumbText), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
+    $isDisabled: isDisabled,
+    $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
+    ref: sliderButtonWrapperRef,
+    onScroll: handleScroll
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, dragRange, handleDragEnd, handleScroll, handleWhileDrag, isDisabled, isSliderBigger, itemWidth, scope, thumbText]);
+};
+SliderButton.displayName = 'SliderButton';
+var _default = exports.default = SliderButton;
+//# sourceMappingURL=SliderButton.js.map

package/lib/cjs/components/slider-button/SliderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderButton.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_calculate","_sliderButton","_SliderButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SliderButton","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","useState","undefined","dragRange","setDragRange","left","right","sliderButtonRef","useRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","useAnimate","itemWidth","useMemo","calculateBiggestWidth","sliderSize","useElementSize","theme","useTheme","isSliderBigger","Math","floor","width","length","useEffect","sliderWidth","count","animation","useCallback","x","current","type","duration","setItemPosition","index","scrollLeft","findIndex","id","_items$","handleClick","buttons","map","text","createElement","StyledSliderButtonItem","$width","key","onClick","$isSelected","thumbText","_items$2","selectedItem","find","snapPoints","points","push","handleDragEnd","setRefreshScrollEnabled","position","getThumbPosition","middle","getNearestPoint","nearestPoint","nearestIndex","_items$nearestIndex","handleWhileDrag","scrollSpeed","_items$nearestIndex2","handleScroll","event","target","_items$nearestIndex3","clearTimeout","window","setTimeout","StyledSliderButton","$isDisabled","ref","StyledMotionSliderButtonThumb","drag","dragElastic","dragConstraints","onDrag","onDragEnd","whileTap","backgroundColor","whileHover","StyledSliderButtonWrapper","onScroll","AnimatePresence","StyledSliderButtonButtonsWrapper","displayName","_default","exports"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonButtonsWrapper,\n    StyledSliderButtonItem,\n    StyledSliderButtonWrapper,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when a button is selected.\n     * @param id\n     */\n    onChange?: (id: string) => void;\n    /**\n     * The buttons that are slidable.\n     */\n    items: SliderButtonItem[];\n    /**\n     * The id of a button that should be selected.\n     */\n    selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n    const [selectedButton, setSelectedButton] = useState<string | undefined>(undefined);\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n    const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n    const timeout = useRef<number>();\n    const preventHandleScroll = useRef(false);\n\n    const [scope, animate] = useAnimate();\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const theme: Theme = useTheme();\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length,\n        [itemWidth, items.length, sliderSize],\n    );\n\n    useEffect(() => {\n        if (sliderSize) {\n            const sliderWidth = itemWidth * (items.length - 1);\n\n            const count = Math.floor(sliderSize.width / itemWidth);\n\n            setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n        }\n    }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n    const animation = useCallback(\n        async (x: number) => {\n            await animate(\n                scope.current,\n                { x },\n                {\n                    type: 'tween',\n                    duration: 0.2,\n                },\n            );\n        },\n        [animate, scope],\n    );\n\n    const setItemPosition = useCallback(\n        (index: number) => {\n            if (!isSliderBigger) {\n                void animation(itemWidth * index);\n\n                return;\n            }\n\n            const count = dragRange.right / itemWidth;\n\n            if (items.length - count >= index) {\n                void animation(0);\n            } else {\n                void animation(itemWidth * (count - (items.length - index)));\n            }\n\n            if (sliderButtonWrapperRef.current) {\n                sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;\n            }\n        },\n        [animation, dragRange.right, isSliderBigger, itemWidth, items.length],\n    );\n\n    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n\n            const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (index >= 0) {\n                setItemPosition(index);\n            }\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [\n        animation,\n        dragRange.right,\n        isSliderBigger,\n        itemWidth,\n        items,\n        selectedButtonId,\n        setItemPosition,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function') {\n                onChange(id);\n            }\n\n            setItemPosition(index);\n        },\n        [isDisabled, onChange, setItemPosition],\n    );\n\n    const buttons = useMemo(\n        () =>\n            items.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                    $isSelected={id === selectedButton}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            )),\n        [handleClick, itemWidth, items, selectedButton],\n    );\n\n    const thumbText = useMemo(() => {\n        const selectedItem = items.find(({ id }) => id === selectedButton);\n\n        return selectedItem ? selectedItem.text : items[0]?.text;\n    }, [items, selectedButton]);\n\n    /**\n     * Creates an array with the snap points relative to the width of the items\n     */\n    const snapPoints = useMemo(() => {\n        const points = [0];\n\n        for (let i = 1; i < items.length; i++) {\n            points.push(itemWidth * i);\n        }\n\n        return points;\n    }, [itemWidth, items.length]);\n\n    const handleDragEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { middle, left } = position;\n\n        let scrollLeft = 0;\n\n        if (sliderButtonWrapperRef.current) {\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n            sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n                snapPoints,\n                position: middle,\n                scrollLeft: scrollLeft - left,\n            }).nearestPoint;\n        }\n\n        const { nearestIndex } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft,\n        });\n\n        const { nearestPoint } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft: 0,\n        });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            const id = items[nearestIndex]?.id;\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n\n        preventHandleScroll.current = false;\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        preventHandleScroll.current = true;\n        void setRefreshScrollEnabled(false);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { right, left, middle } = position;\n\n        let scrollLeft = 0;\n\n        const scrollSpeed = 3;\n\n        if (sliderButtonWrapperRef.current) {\n            if (right >= dragRange.right) {\n                sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;\n            }\n\n            if (left <= dragRange.left) {\n                sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;\n            }\n\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [dragRange, itemWidth, items, scope, snapPoints]);\n\n    // With this, the handleScroll works before the thumb is moved the first time.\n    useEffect(() => {\n        void animation(1);\n        void animation(0);\n    }, [animation]);\n\n    const handleScroll = useCallback(\n        (event: UIEvent<HTMLElement>) => {\n            if (preventHandleScroll.current) {\n                return;\n            }\n\n            void setRefreshScrollEnabled(false);\n\n            const position = getThumbPosition({ scope, itemWidth });\n\n            if (!position) {\n                return;\n            }\n\n            const { middle } = position;\n\n            const { scrollLeft } = event.target as HTMLDivElement;\n\n            const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n            if (nearestIndex >= 0) {\n                setSelectedButton(items[nearestIndex]?.id);\n            }\n\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleDragEnd();\n            }, 200);\n        },\n        [handleDragEnd, itemWidth, items, scope, snapPoints],\n    );\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <StyledMotionSliderButtonThumb\n                    ref={scope}\n                    drag={isDisabled ? false : 'x'}\n                    dragElastic={0}\n                    dragConstraints={\n                        isSliderBigger\n                            ? { ...dragRange, right: dragRange.right - itemWidth }\n                            : { ...dragRange }\n                    }\n                    $width={itemWidth}\n                    onDrag={handleWhileDrag}\n                    onDragEnd={handleDragEnd}\n                    whileTap={isDisabled ? {} : { backgroundColor: theme['407'] }}\n                    whileHover={isDisabled ? {} : { backgroundColor: theme['409'] }}\n                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\n                    $isDisabled={isDisabled}\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                    onScroll={handleScroll}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleScroll,\n            handleWhileDrag,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            scope,\n            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider-button/SliderButton.styles.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSliderButtonWrapper = exports.StyledSliderButtonItem = exports.StyledSliderButtonButtonsWrapper = exports.StyledSliderButton = exports.StyledMotionSliderButtonThumb = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledSliderButton = exports.StyledSliderButton = _styledComponents.default.div`
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    width: 100%;
+    touch-action: none;
+`;
+const StyledSliderButtonWrapper = exports.StyledSliderButtonWrapper = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${({
+  theme
+}) => theme['404']};
+    border-radius: 3px;
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: inline-flex;
+    line-height: 1.15;
+    height: 32px;
+    position: relative;
+    user-select: none;
+    transition: opacity 0.3s ease;
+    z-index: 1;
+
+    width: ${({
+  $width
+}) => $width}px;
+
+    max-width: 100%;
+    overflow-x: ${({
+  $isDisabled
+}) => $isDisabled ? 'hidden' : 'scroll'};
+
+    // Chrome
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    // IE and Edge
+    -ms-overflow-style: none;
+
+    // Firefox
+    scrollbar-width: none;
+`;
+const StyledSliderButtonItem = exports.StyledSliderButtonItem = _styledComponents.default.div`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    padding: 7px 12px;
+    min-width: ${({
+  $width
+}) => $width}px;
+    max-width: ${({
+  $width
+}) => $width}px;
+    display: flex;
+    justify-content: center;
+    color: white;
+`;
+const StyledSliderButtonButtonsWrapper = exports.StyledSliderButtonButtonsWrapper = _styledComponents.default.div`
+    position: absolute;
+    display: flex;
+    align-items: center;
+`;
+const StyledMotionSliderButtonThumb = exports.StyledMotionSliderButtonThumb = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    background-color: ${({
+  theme
+}) => theme['408']};
+    width: ${({
+  $width
+}) => $width}px;
+    position: absolute;
+    border-radius: 3px;
+    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+    z-index: 3;
+    height: 32px;
+    padding: 7px 12px;
+    display: flex;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+`;
+//# sourceMappingURL=SliderButton.styles.js.map