@chayns-components/devalue-slider 5.0.0-beta.734

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Tobit Laboratories AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,18 @@
+# `devalue-slider`
+
+This is a slider component that can be devalued.For a normal devalue the user will drag the slider
+to the right and release it. It will show a loading cursor and call the onDevalue handler. If the
+onDevalue handler does not give a successful response the thumb will snap back to the left. This
+gives feedback to the user and the person who validates the devalue.
+
+The developer should care about some additional security measures to prevent fraud. For example this
+could be an offline detection. For this you can disable the Slider with the isDisabled prop. This
+will also cancel the current user drag.
+
+## Usage
+
+```
+import { DevalueSlider } from '@chayns-components/devalue-slider';
+
+<DevalueSlider />
+```

package/lib/cjs/components/DevalueSlider.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Slider = _interopRequireDefault(require("./slider/Slider"));
+var _Timer = _interopRequireDefault(require("./timer/Timer"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 DevalueSlider = ({
+  backgroundColor = 'red',
+  devalueBackgroundColor = 'green',
+  devalueTime,
+  isDisabled,
+  onDevalue,
+  onChange,
+  onComplete
+}) => {
+  const [timerDevalueTime, setTimerDevalueTime] = (0, _react.useState)(devalueTime);
+  const sliderRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (devalueTime) return;
+    setTimerDevalueTime(devalueTime);
+  }, [devalueTime]);
+  const handleCompleted = (0, _react.useCallback)(() => {
+    setTimerDevalueTime(new Date());
+    onComplete === null || onComplete === void 0 || onComplete();
+  }, [onComplete]);
+  (0, _react.useEffect)(() => {
+    var _sliderRef$current2;
+    if (isDisabled) {
+      var _sliderRef$current;
+      (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 || _sliderRef$current.disable();
+      return;
+    }
+    (_sliderRef$current2 = sliderRef.current) === null || _sliderRef$current2 === void 0 || _sliderRef$current2.enable();
+  }, [isDisabled]);
+  if (timerDevalueTime) {
+    return /*#__PURE__*/_react.default.createElement(_Timer.default, {
+      color: devalueBackgroundColor,
+      devalueTime: timerDevalueTime
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_Slider.default, {
+    ref: sliderRef,
+    onDevalue: onDevalue,
+    color: backgroundColor,
+    devalueColor: devalueBackgroundColor,
+    onComplete: handleCompleted,
+    onChange: onChange
+  });
+};
+var _default = exports.default = DevalueSlider;
+//# sourceMappingURL=DevalueSlider.js.map

package/lib/cjs/components/DevalueSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevalueSlider.js","names":["_react","_interopRequireWildcard","require","_Slider","_interopRequireDefault","_Timer","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DevalueSlider","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","useState","sliderRef","useRef","useEffect","handleCompleted","useCallback","Date","_sliderRef$current2","_sliderRef$current","current","disable","enable","createElement","color","ref","devalueColor","_default","exports"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        if (devalueTime) return;\n\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />;\n    }\n\n    return (\n        <Slider\n            ref={sliderRef}\n            onDevalue={onDevalue}\n            color={backgroundColor}\n            devalueColor={devalueBackgroundColor}\n            onComplete={handleCompleted}\n            onChange={onChange}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@chayns-components/core");
+var _size = _interopRequireDefault(require("@react-hook/size"));
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _design = require("../../hooks/design");
+var _common = require("../../utils/common");
+var _Slider = require("./Slider.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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Slider = /*#__PURE__*/(0, _react.forwardRef)(({
+  color,
+  devalueColor,
+  trackHeight = 50,
+  thumbSize = 40,
+  borderSize = 2,
+  trackText = 'EINLÖSEN',
+  onChange = () => {},
+  onDevalue = () => Promise.resolve({
+    success: true
+  }),
+  onComplete
+}, ref) => {
+  const [trackRef, setTrackRef] = (0, _react.useState)(null);
+  const [trackWidth] = (0, _size.default)(trackRef, {
+    initialWidth: 300,
+    initialHeight: 50
+  });
+  const [iconColor, setIconColor] = (0, _react.useState)('black');
+  const [isCompleted, setIsCompleted] = (0, _react.useState)(false);
+  const [isDisabled, setIsDisabled] = (0, _react.useState)(false);
+  const isCompletedRef = (0, _react.useRef)(isCompleted);
+  const [showWaitCursor, setShowWaitCursor] = (0, _react.useState)(false);
+  const scaleFactor = (0, _react.useMemo)(() => trackHeight / thumbSize, [thumbSize, trackHeight]);
+  const x = (0, _framerMotion.useMotionValue)(0);
+  const {
+    icon,
+    styles: iconStyles
+  } = (0, _design.useThumbIcon)(x, iconColor);
+  const dragControls = (0, _framerMotion.useDragControls)();
+  const vibrationTrigger = (0, _framerMotion.useTransform)(x,
+  // round to 10 to avoid unnecessary vibrate calls
+  value => Math.round(value / 10) * 10);
+  const lastVibrationValue = (0, _react.useRef)(0);
+  (0, _react.useEffect)(() => {
+    vibrationTrigger.on('change', value => {
+      if (!isCompletedRef.current && value !== lastVibrationValue.current) {
+        lastVibrationValue.current = value;
+        void (0, _chaynsApi.vibrate)({
+          pattern: [10]
+        });
+      }
+    });
+  }, [vibrationTrigger]);
+  const containerAnimation = (0, _framerMotion.useAnimation)();
+  const thumbVariants = (0, _react.useMemo)(() => (0, _Slider.createThumbVariants)({
+    thumbSize,
+    trackWidth,
+    scaleFactor
+  }), [scaleFactor, thumbSize, trackWidth]);
+  const textOpacity = (0, _framerMotion.useTransform)(x, [0, 120], [1, 0]);
+
+  // this is the relative value of the right edge of the thumb
+  const relativeValue = (0, _framerMotion.useTransform)(x, value => {
+    if (!value) return 0;
+    const thumbRadius = thumbSize * scaleFactor;
+    return parseFloat(((value + thumbRadius) / trackWidth * 100).toPrecision(2));
+  });
+
+  // this is the relative value of the center of the thumb, it is used for the background gradient
+  const relativeBackgroundValue = (0, _framerMotion.useTransform)(x, value => {
+    if (!value) return 0;
+    const thumbRadius = thumbSize * scaleFactor / 2;
+    return parseFloat(((value + thumbRadius) / trackWidth * 100).toPrecision(2));
+  });
+  const trackBackground = (0, _framerMotion.useTransform)(relativeBackgroundValue, value => {
+    if (isCompleted) return devalueColor;
+    if (!value) return 'transparent';
+    return `linear-gradient(to right, ${devalueColor} ${value}%, transparent ${value}%)`;
+  });
+  const handlePointerDownCapture = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.invokeCall)({
+      action: 19,
+      value: {
+        pattern: [50],
+        iOSFeedbackVibration: 7
+      }
+    });
+  }, []);
+  const handleRedeem = (0, _react.useCallback)(async () => {
+    setShowWaitCursor(true);
+    setIsCompleted(true);
+    isCompletedRef.current = true;
+    const devaluePromise = onDevalue();
+    const sleepPromise = (0, _common.sleep)(1000);
+    const [devalued] = await Promise.all([devaluePromise, sleepPromise]);
+    if (!devalued.success) {
+      setShowWaitCursor(false);
+      setIsCompleted(false);
+      isCompletedRef.current = false;
+      await containerAnimation.start('base');
+      return;
+    }
+    setShowWaitCursor(false);
+    setIconColor('white');
+    void (0, _chaynsApi.invokeCall)({
+      action: 19,
+      value: {
+        iOSFeedbackVibration: 3,
+        pattern: [100, 200, 100]
+      }
+    });
+    await containerAnimation.start('completed');
+    await containerAnimation.start('leaving');
+    onComplete === null || onComplete === void 0 || onComplete();
+  }, [containerAnimation, onComplete, onDevalue]);
+  const handleTrackRef = (0, _react.useCallback)(node => {
+    setTrackRef(node);
+  }, []);
+  const handleDragStart = (0, _react.useCallback)(() => {
+    void containerAnimation.start('dragging');
+  }, [containerAnimation]);
+  const handleDragEnd = (0, _react.useCallback)(() => {
+    if (relativeValue.get() > 98) {
+      void handleRedeem();
+      return;
+    }
+    void containerAnimation.start('base');
+  }, [relativeValue, containerAnimation, handleRedeem]);
+  (0, _react.useEffect)(() => {
+    void containerAnimation.start('base');
+  }, [containerAnimation]);
+  (0, _react.useEffect)(() => {
+    if (isCompleted) return () => {};
+    return relativeValue.on('change', onChange);
+  }, [isCompleted, onChange, relativeValue]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    disable: () => {
+      setIsDisabled(true);
+      setShowWaitCursor(false);
+      setIsCompleted(false);
+      isCompletedRef.current = false;
+      void containerAnimation.start('base');
+    },
+    enable: () => {
+      setIsDisabled(false);
+    }
+  }), [containerAnimation]);
+  const baseFontSize = (0, _react.useMemo)(() => 22, []);
+  return /*#__PURE__*/_react.default.createElement(_Slider.Container, {
+    animate: containerAnimation
+  }, /*#__PURE__*/_react.default.createElement(_Slider.Track, {
+    $height: trackHeight,
+    $borderSize: borderSize,
+    $backgroundColor: color,
+    ref: handleTrackRef
+  }, /*#__PURE__*/_react.default.createElement(_Slider.TrackBackground, {
+    $height: trackHeight,
+    style: {
+      background: trackBackground
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Slider.Thumb, {
+    variants: thumbVariants,
+    $size: thumbSize,
+    $trackHeight: trackHeight,
+    style: {
+      x
+    },
+    drag: isCompleted || isDisabled ? false : 'x',
+    dragElastic: 0,
+    onPointerDownCapture: handlePointerDownCapture,
+    whileTap: {
+      scale: 1.4,
+      cursor: 'grabbing'
+    },
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    dragControls: dragControls,
+    dragConstraints: {
+      right: trackWidth - thumbSize * scaleFactor,
+      left: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Slider.ThumbIconContainer, null, !showWaitCursor && /*#__PURE__*/_react.default.createElement(_Slider.ThumbIcon, {
+    key: "thumb-icon",
+    icon: icon,
+    variants: _Slider.THUMB_ICON_VARIANTS,
+    style: iconStyles
+  }), showWaitCursor && /*#__PURE__*/_react.default.createElement(_core.SmallWaitCursor, {
+    shouldHideBackground: true,
+    color: "black"
+  }))), /*#__PURE__*/_react.default.createElement(_Slider.TrackText, {
+    style: {
+      opacity: textOpacity
+    },
+    $color: "white",
+    $baseFontSize: baseFontSize
+  }, trackText)));
+});
+var _default = exports.default = Slider;
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["_core","require","_size","_interopRequireDefault","_chaynsApi","_framerMotion","_react","_interopRequireWildcard","_design","_common","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","forwardRef","color","devalueColor","trackHeight","thumbSize","borderSize","trackText","onChange","onDevalue","Promise","resolve","success","onComplete","ref","trackRef","setTrackRef","useState","trackWidth","useSize","initialWidth","initialHeight","iconColor","setIconColor","isCompleted","setIsCompleted","isDisabled","setIsDisabled","isCompletedRef","useRef","showWaitCursor","setShowWaitCursor","scaleFactor","useMemo","x","useMotionValue","icon","styles","iconStyles","useThumbIcon","dragControls","useDragControls","vibrationTrigger","useTransform","value","Math","round","lastVibrationValue","useEffect","on","current","vibrate","pattern","containerAnimation","useAnimation","thumbVariants","createThumbVariants","textOpacity","relativeValue","thumbRadius","parseFloat","toPrecision","relativeBackgroundValue","trackBackground","handlePointerDownCapture","useCallback","invokeCall","action","iOSFeedbackVibration","handleRedeem","devaluePromise","sleepPromise","sleep","devalued","all","start","handleTrackRef","node","handleDragStart","handleDragEnd","useImperativeHandle","disable","enable","baseFontSize","createElement","Container","animate","Track","$height","$borderSize","$backgroundColor","TrackBackground","style","background","Thumb","variants","$size","$trackHeight","drag","dragElastic","onPointerDownCapture","whileTap","scale","cursor","onDragStart","onDragEnd","dragConstraints","right","left","ThumbIconContainer","ThumbIcon","key","THUMB_ICON_VARIANTS","SmallWaitCursor","shouldHideBackground","TrackText","opacity","$color","$baseFontSize","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport useSize from '@react-hook/size';\nimport { invokeCall, vibrate } from 'chayns-api';\nimport {\n    useAnimation,\n    useDragControls,\n    useMotionValue,\n    useTransform,\n    type DragHandlers,\n} from 'framer-motion';\nimport React, {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useThumbIcon } from '../../hooks/design';\nimport { sleep } from '../../utils/common';\nimport type { DevalueSliderProps } from '../DevalueSlider';\nimport {\n    Container,\n    createThumbVariants,\n    Thumb,\n    ThumbIcon,\n    ThumbIconContainer,\n    THUMB_ICON_VARIANTS,\n    Track,\n    TrackBackground,\n    TrackText,\n} from './Slider.styles';\n\nexport type SliderProps = {\n    color: NonNullable<DevalueSliderProps['backgroundColor']>;\n    devalueColor: NonNullable<DevalueSliderProps['devalueBackgroundColor']>;\n    thumbSize?: number;\n    trackHeight?: number;\n    trackText?: string;\n    borderSize?: number;\n    onChange: DevalueSliderProps['onChange'];\n    onDevalue: DevalueSliderProps['onDevalue'];\n    onComplete: DevalueSliderProps['onComplete'];\n};\n\nexport type SliderRef = {\n    disable: () => void;\n    enable: () => void;\n};\n\nconst Slider = forwardRef<SliderRef, SliderProps>(\n    (\n        {\n            color,\n            devalueColor,\n            trackHeight = 50,\n            thumbSize = 40,\n            borderSize = 2,\n            trackText = 'EINLÖSEN',\n            onChange = () => {},\n            onDevalue = () => Promise.resolve({ success: true }),\n            onComplete,\n        },\n        ref,\n    ) => {\n        const [trackRef, setTrackRef] = useState<HTMLDivElement | null>(null);\n        const [trackWidth] = useSize(trackRef, { initialWidth: 300, initialHeight: 50 });\n        const [iconColor, setIconColor] = useState('black');\n        const [isCompleted, setIsCompleted] = useState(false);\n        const [isDisabled, setIsDisabled] = useState(false);\n        const isCompletedRef = useRef(isCompleted);\n        const [showWaitCursor, setShowWaitCursor] = useState(false);\n        const scaleFactor = useMemo(() => trackHeight / thumbSize, [thumbSize, trackHeight]);\n\n        const x = useMotionValue(0);\n        const { icon, styles: iconStyles } = useThumbIcon(x, iconColor);\n        const dragControls = useDragControls();\n\n        const vibrationTrigger = useTransform(\n            x,\n            // round to 10 to avoid unnecessary vibrate calls\n            (value) => Math.round(value / 10) * 10,\n        );\n        const lastVibrationValue = useRef(0);\n        useEffect(() => {\n            vibrationTrigger.on('change', (value) => {\n                if (!isCompletedRef.current && value !== lastVibrationValue.current) {\n                    lastVibrationValue.current = value;\n                    void vibrate({ pattern: [10] });\n                }\n            });\n        }, [vibrationTrigger]);\n\n        const containerAnimation = useAnimation();\n        const thumbVariants = useMemo(\n            () =>\n                createThumbVariants({\n                    thumbSize,\n                    trackWidth,\n                    scaleFactor,\n                }),\n            [scaleFactor, thumbSize, trackWidth],\n        );\n\n        const textOpacity = useTransform(x, [0, 120], [1, 0]);\n\n        // this is the relative value of the right edge of the thumb\n        const relativeValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = thumbSize * scaleFactor;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        // this is the relative value of the center of the thumb, it is used for the background gradient\n        const relativeBackgroundValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = (thumbSize * scaleFactor) / 2;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        const trackBackground = useTransform(relativeBackgroundValue, (value) => {\n            if (isCompleted) return devalueColor;\n            if (!value) return 'transparent';\n            return `linear-gradient(to right, ${devalueColor} ${value}%, transparent ${value}%)`;\n        });\n\n        const handlePointerDownCapture = useCallback(() => {\n            void invokeCall({\n                action: 19,\n                value: {\n                    pattern: [50],\n                    iOSFeedbackVibration: 7,\n                },\n            });\n        }, []);\n\n        const handleRedeem = useCallback(async () => {\n            setShowWaitCursor(true);\n            setIsCompleted(true);\n            isCompletedRef.current = true;\n\n            const devaluePromise = onDevalue();\n            const sleepPromise = sleep(1000);\n            const [devalued] = await Promise.all([devaluePromise, sleepPromise]);\n\n            if (!devalued.success) {\n                setShowWaitCursor(false);\n                setIsCompleted(false);\n                isCompletedRef.current = false;\n                await containerAnimation.start('base');\n                return;\n            }\n\n            setShowWaitCursor(false);\n            setIconColor('white');\n            void invokeCall({\n                action: 19,\n                value: {\n                    iOSFeedbackVibration: 3,\n                    pattern: [100, 200, 100],\n                },\n            });\n\n            await containerAnimation.start('completed');\n            await containerAnimation.start('leaving');\n            onComplete?.();\n        }, [containerAnimation, onComplete, onDevalue]);\n\n        const handleTrackRef = useCallback((node: HTMLDivElement | null) => {\n            setTrackRef(node);\n        }, []);\n\n        const handleDragStart = useCallback<NonNullable<DragHandlers['onDragStart']>>(() => {\n            void containerAnimation.start('dragging');\n        }, [containerAnimation]);\n\n        const handleDragEnd = useCallback<NonNullable<DragHandlers['onDragEnd']>>(() => {\n            if (relativeValue.get() > 98) {\n                void handleRedeem();\n                return;\n            }\n\n            void containerAnimation.start('base');\n        }, [relativeValue, containerAnimation, handleRedeem]);\n\n        useEffect(() => {\n            void containerAnimation.start('base');\n        }, [containerAnimation]);\n\n        useEffect(() => {\n            if (isCompleted) return () => {};\n            return relativeValue.on('change', onChange);\n        }, [isCompleted, onChange, relativeValue]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                disable: () => {\n                    setIsDisabled(true);\n                    setShowWaitCursor(false);\n                    setIsCompleted(false);\n                    isCompletedRef.current = false;\n                    void containerAnimation.start('base');\n                },\n                enable: () => {\n                    setIsDisabled(false);\n                },\n            }),\n            [containerAnimation],\n        );\n\n        const baseFontSize = useMemo(() => 22, []);\n\n        return (\n            <Container animate={containerAnimation}>\n                <Track\n                    $height={trackHeight}\n                    $borderSize={borderSize}\n                    $backgroundColor={color}\n                    ref={handleTrackRef}\n                >\n                    <TrackBackground\n                        $height={trackHeight}\n                        style={{ background: trackBackground }}\n                    />\n                    <Thumb\n                        variants={thumbVariants}\n                        $size={thumbSize}\n                        $trackHeight={trackHeight}\n                        style={{ x }}\n                        drag={isCompleted || isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        onPointerDownCapture={handlePointerDownCapture}\n                        whileTap={{ scale: 1.4, cursor: 'grabbing' }}\n                        onDragStart={handleDragStart}\n                        onDragEnd={handleDragEnd}\n                        dragControls={dragControls}\n                        dragConstraints={{\n                            right: trackWidth - thumbSize * scaleFactor,\n                            left: 0,\n                        }}\n                    >\n                        <ThumbIconContainer>\n                            {!showWaitCursor && (\n                                <ThumbIcon\n                                    key=\"thumb-icon\"\n                                    icon={icon}\n                                    variants={THUMB_ICON_VARIANTS}\n                                    style={iconStyles}\n                                />\n                            )}\n                            {showWaitCursor && (\n                                <SmallWaitCursor shouldHideBackground color=\"black\" />\n                            )}\n                        </ThumbIconContainer>\n                    </Thumb>\n                    <TrackText\n                        style={{ opacity: textOpacity }}\n                        $color=\"white\"\n                        $baseFontSize={baseFontSize}\n                    >\n                        {trackText}\n                    </TrackText>\n                </Track>\n            </Container>\n        );\n    },\n);\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createThumbVariants = exports.TrackText = exports.TrackBackground = exports.Track = exports.ThumbIconContainer = exports.ThumbIcon = exports.Thumb = exports.THUMB_ICON_VARIANTS = exports.Container = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Container = exports.Container = (0, _styledComponents.default)(_framerMotion.motion.div)``;
+const Track = exports.Track = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    user-select: none;
+    position: relative;
+    z-index: 3;
+    height: ${({
+  $height
+}) => $height}px;
+    border-radius: ${({
+  $height
+}) => $height / 2}px;
+    background-color: ${({
+  $backgroundColor
+}) => $backgroundColor};
+`;
+const TrackBackground = exports.TrackBackground = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: ${({
+  $height
+}) => $height / 2}px;
+    z-index: 2;
+`;
+const Thumb = exports.Thumb = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    height: ${({
+  $size
+}) => $size}px;
+    width: ${({
+  $size
+}) => $size}px;
+    border-radius: 50%;
+    background-color: white;
+    left: ${({
+  $size,
+  $trackHeight
+}) => ($trackHeight - $size - 2) / 2}px;
+    bottom: ${({
+  $size,
+  $trackHeight
+}) => ($trackHeight - $size - 2) / 2 + 1}px;
+    position: absolute;
+    z-index: 3;
+    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0;
+`;
+const TrackText = exports.TrackText = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    position: absolute;
+    line-height: 1.15;
+    font-size: ${({
+  $baseFontSize
+}) => $baseFontSize}px;
+    font-weight: 700;
+    color: ${({
+  $color
+}) => $color};
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    z-index: 1;
+    font-family:
+        Roboto Regular,
+        sans-serif;
+
+    @font-face {
+        font-family: 'Roboto Regular';
+        font-style: normal;
+        font-weight: normal;
+        src:
+            local('Roboto Regular'),
+            local('Roboto Regular'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.ttf)
+                format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Regular';
+        font-style: italic;
+        font-weight: normal;
+        src:
+            local('Roboto Regular Italic'),
+            local('Roboto Regular-Italic'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Regular';
+        font-style: normal;
+        font-weight: bold;
+        src:
+            local('Roboto Regular Bold'),
+            local('Roboto Regular-Bold'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Regular';
+        font-style: italic;
+        font-weight: bold;
+        src:
+            local('Roboto Regular Bold Italic'),
+            local('Roboto Regular-BoldItalic'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff2)
+                format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff)
+                format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.ttf)
+                format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Bold';
+        font-style: normal;
+        font-weight: normal;
+        src:
+            local('Roboto Bold'),
+            local('Roboto Bold'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Bold';
+        font-style: italic;
+        font-weight: normal;
+        src:
+            local('Roboto Bold Italic'),
+            local('Roboto Bold-Italic'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Bold';
+        font-style: normal;
+        font-weight: bold;
+        src:
+            local('Roboto Bold Bold'),
+            local('Roboto Bold-Bold'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: 'Roboto Bold';
+        font-style: italic;
+        font-weight: bold;
+        src:
+            local('Roboto Bold Bold Italic'),
+            local('Roboto Bold-BoldItalic'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff) format('woff'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.ttf)
+                format('truetype'),
+            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.svg) format('svg');
+        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
+    }
+`;
+const ThumbIconContainer = exports.ThumbIconContainer = _styledComponents.default.div`
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+`;
+const ThumbIcon = exports.ThumbIcon = (0, _styledComponents.default)(_framerMotion.motion.i).attrs(({
+  icon
+}) => ({
+  className: `react-chayns-icon ${icon}`
+}))`
+    font-size: 22px;
+    z-index: 1;
+    color: black;
+    padding: 5px;
+`;
+const createThumbVariants = ({
+  thumbSize,
+  trackWidth,
+  scaleFactor
+}) => ({
+  base: {
+    x: 0,
+    backgroundColor: 'white',
+    transition: {
+      duration: 0.2
+    }
+  },
+  completed: {
+    x: (trackWidth - thumbSize * scaleFactor) / 2,
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+    transition: {
+      duration: 0.3
+    }
+  },
+  leaving: {
+    scale: [1, 2.4, 1],
+    boxShadow: 'none'
+  }
+});
+exports.createThumbVariants = createThumbVariants;
+const THUMB_ICON_VARIANTS = exports.THUMB_ICON_VARIANTS = {
+  base: {
+    x: [0, 8, 0, 8, 0],
+    transition: {
+      duration: 1,
+      ease: 'easeInOut',
+      repeat: Infinity,
+      repeatDelay: 5
+    }
+  },
+  dragging: {
+    x: 0
+  },
+  completed: {
+    opacity: 1,
+    transition: {
+      duration: 0
+    }
+  },
+  leaving: {
+    opacity: 1,
+    scale: [1, 2.4, 1],
+    transition: {
+      duration: 0.4,
+      ease: 'easeInOut'
+    }
+  }
+};
+//# sourceMappingURL=Slider.styles.js.map