@chayns-components/devalue-slider 5.0.0-beta.1161 → 5.0.0-beta.1164

package/lib/esm/components/DevalueSlider.js

@@ -1,17 +1,16 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Slider from './slider/Slider';
 import Timer from './timer/Timer';
-const DevalueSlider = _ref => {
-  let {
-    backgroundColor = 'red',
-    devalueBackgroundColor = 'green',
-    devalueTime,
-    isDisabled,
-    label = 'EINLÖSEN',
-    onDevalue,
-    onChange,
-    onComplete
-  } = _ref;
+const DevalueSlider = ({
+  backgroundColor = 'red',
+  devalueBackgroundColor = 'green',
+  devalueTime,
+  isDisabled,
+  label = 'EINLÖSEN',
+  onDevalue,
+  onChange,
+  onComplete
+}) => {
   const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);
   const sliderRef = useRef(null);
   useEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"DevalueSlider.js","names":["React","useCallback","useEffect","useRef","useState","Slider","Timer","DevalueSlider","_ref","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","label","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","sliderRef","handleCompleted","Date","current","disable","enable","createElement","color","ref","devalueColor","trackText"],"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     * The label of the slider. The default value is \"EINLÖSEN\"\n     */\n    label?: string;\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    label = 'EINLÖSEN',\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\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            trackText={label}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAA4B,OAAO;AAC3F,OAAOC,MAAM,MAA0B,iBAAiB;AACxD,OAAOC,KAAK,MAAM,eAAe;AAkDjC,MAAMC,aAA2C,GAAGC,IAAA,IAS9C;EAAA,IAT+C;IACjDC,eAAe,GAAG,KAAK;IACvBC,sBAAsB,GAAG,OAAO;IAChCC,WAAW;IACXC,UAAU;IACVC,KAAK,GAAG,UAAU;IAClBC,SAAS;IACTC,QAAQ;IACRC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGd,QAAQ,CAACO,WAAW,CAAC;EAErE,MAAMQ,SAAS,GAAGhB,MAAM,CAAY,IAAI,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACZgB,mBAAmB,CAACP,WAAW,CAAC;EACpC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMS,eAAe,GAAGnB,WAAW,CAAC,MAAM;IACtCiB,mBAAmB,CAAC,IAAIG,IAAI,CAAC,CAAC,CAAC;IAE/BL,UAAU,GAAG,CAAC;EAClB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhBd,SAAS,CAAC,MAAM;IACZ,IAAIU,UAAU,EAAE;MACZO,SAAS,CAACG,OAAO,EAAEC,OAAO,CAAC,CAAC;MAE5B;IACJ;IAEAJ,SAAS,CAACG,OAAO,EAAEE,MAAM,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACZ,UAAU,CAAC,CAAC;EAEhB,IAAIK,gBAAgB,EAAE;IAClB,oBAAOjB,KAAA,CAAAyB,aAAA,CAACnB,KAAK;MAACoB,KAAK,EAAEhB,sBAAuB;MAACC,WAAW,EAAEM;IAAiB,CAAE,CAAC;EAClF;EAEA,oBACIjB,KAAA,CAAAyB,aAAA,CAACpB,MAAM;IACHsB,GAAG,EAAER,SAAU;IACfL,SAAS,EAAEA,SAAU;IACrBY,KAAK,EAAEjB,eAAgB;IACvBmB,YAAY,EAAElB,sBAAuB;IACrCM,UAAU,EAAEI,eAAgB;IAC5BL,QAAQ,EAAEA,QAAS;IACnBc,SAAS,EAAEhB;EAAM,CACpB,CAAC;AAEV,CAAC;AAED,eAAeN,aAAa","ignoreList":[]}
+{"version":3,"file":"DevalueSlider.js","names":["React","useCallback","useEffect","useRef","useState","Slider","Timer","DevalueSlider","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","label","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","sliderRef","handleCompleted","Date","current","disable","enable","createElement","color","ref","devalueColor","trackText"],"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     * The label of the slider. The default value is \"EINLÖSEN\"\n     */\n    label?: string;\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    label = 'EINLÖSEN',\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\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            trackText={label}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAA4B,OAAO;AAC3F,OAAOC,MAAM,MAA0B,iBAAiB;AACxD,OAAOC,KAAK,MAAM,eAAe;AAkDjC,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,eAAe,GAAG,KAAK;EACvBC,sBAAsB,GAAG,OAAO;EAChCC,WAAW;EACXC,UAAU;EACVC,KAAK,GAAG,UAAU;EAClBC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGb,QAAQ,CAACM,WAAW,CAAC;EAErE,MAAMQ,SAAS,GAAGf,MAAM,CAAY,IAAI,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACZe,mBAAmB,CAACP,WAAW,CAAC;EACpC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMS,eAAe,GAAGlB,WAAW,CAAC,MAAM;IACtCgB,mBAAmB,CAAC,IAAIG,IAAI,CAAC,CAAC,CAAC;IAE/BL,UAAU,GAAG,CAAC;EAClB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhBb,SAAS,CAAC,MAAM;IACZ,IAAIS,UAAU,EAAE;MACZO,SAAS,CAACG,OAAO,EAAEC,OAAO,CAAC,CAAC;MAE5B;IACJ;IAEAJ,SAAS,CAACG,OAAO,EAAEE,MAAM,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACZ,UAAU,CAAC,CAAC;EAEhB,IAAIK,gBAAgB,EAAE;IAClB,oBAAOhB,KAAA,CAAAwB,aAAA,CAAClB,KAAK;MAACmB,KAAK,EAAEhB,sBAAuB;MAACC,WAAW,EAAEM;IAAiB,CAAE,CAAC;EAClF;EAEA,oBACIhB,KAAA,CAAAwB,aAAA,CAACnB,MAAM;IACHqB,GAAG,EAAER,SAAU;IACfL,SAAS,EAAEA,SAAU;IACrBY,KAAK,EAAEjB,eAAgB;IACvBmB,YAAY,EAAElB,sBAAuB;IACrCM,UAAU,EAAEI,eAAgB;IAC5BL,QAAQ,EAAEA,QAAS;IACnBc,SAAS,EAAEhB;EAAM,CACpB,CAAC;AAEV,CAAC;AAED,eAAeL,aAAa","ignoreList":[]}

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

@@ -6,20 +6,19 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import { useThumbIcon } from '../../hooks/design';
 import { sleep } from '../../utils/common';
 import { Container, createThumbVariants, Thumb, ThumbIcon, ThumbIconContainer, THUMB_ICON_VARIANTS, Track, TrackBackground, TrackText } from './Slider.styles';
-const Slider = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    color,
-    devalueColor,
-    trackHeight = 50,
-    thumbSize = 40,
-    borderSize = 2,
-    trackText = 'EINLÖSEN',
-    onChange = () => {},
-    onDevalue = () => Promise.resolve({
-      success: true
-    }),
-    onComplete
-  } = _ref;
+const Slider = /*#__PURE__*/forwardRef(({
+  color,
+  devalueColor,
+  trackHeight = 50,
+  thumbSize = 40,
+  borderSize = 2,
+  trackText = 'EINLÖSEN',
+  onChange = () => {},
+  onDevalue = () => Promise.resolve({
+    success: true
+  }),
+  onComplete
+}, ref) => {
   const [trackRef, setTrackRef] = useState(null);
   const [trackWidth] = useSize(trackRef, {
     initialWidth: 300,

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["SmallWaitCursor","useSize","invokeCall","vibrate","useAnimation","useDragControls","useMotionValue","useTransform","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useThumbIcon","sleep","Container","createThumbVariants","Thumb","ThumbIcon","ThumbIconContainer","THUMB_ICON_VARIANTS","Track","TrackBackground","TrackText","Slider","_ref","ref","color","devalueColor","trackHeight","thumbSize","borderSize","trackText","onChange","onDevalue","Promise","resolve","success","onComplete","trackRef","setTrackRef","trackWidth","initialWidth","initialHeight","iconColor","setIconColor","isCompleted","setIsCompleted","isDisabled","setIsDisabled","isCompletedRef","showWaitCursor","setShowWaitCursor","scaleFactor","x","icon","styles","iconStyles","dragControls","vibrationTrigger","value","Math","round","lastVibrationValue","on","current","pattern","containerAnimation","thumbVariants","textOpacity","relativeValue","thumbRadius","parseFloat","toPrecision","relativeBackgroundValue","trackBackground","handlePointerDownCapture","event","currentValue","get","preventDefault","stopPropagation","action","iOSFeedbackVibration","handleRedeem","devaluePromise","sleepPromise","devalued","all","start","handleTrackRef","node","handleDragStart","handleDragEnd","disable","enable","baseFontSize","createElement","animate","$height","$borderSize","$backgroundColor","style","background","variants","$size","$trackHeight","drag","dragElastic","onPointerDownCapture","whileTap","scale","cursor","onDragStart","onDragEnd","dragConstraints","right","left","key","shouldHideBackground","opacity","$color","$baseFontSize"],"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 DragHandler,\n} from 'motion/react';\nimport React, {\n    forwardRef,\n    PointerEvent,\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            (event: PointerEvent) => {\n                const currentValue = relativeValue.get();\n\n                if (currentValue > 5) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                void invokeCall({\n                    action: 19,\n                    value: {\n                        pattern: [50],\n                        iOSFeedbackVibration: 7,\n                    },\n                });\n            },\n            [relativeValue],\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<DragHandler>>(() => {\n            void containerAnimation.start('dragging');\n        }, [containerAnimation]);\n\n        const handleDragEnd = useCallback<NonNullable<DragHandler>>(() => {\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":[]}
+{"version":3,"file":"Slider.js","names":["SmallWaitCursor","useSize","invokeCall","vibrate","useAnimation","useDragControls","useMotionValue","useTransform","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useThumbIcon","sleep","Container","createThumbVariants","Thumb","ThumbIcon","ThumbIconContainer","THUMB_ICON_VARIANTS","Track","TrackBackground","TrackText","Slider","color","devalueColor","trackHeight","thumbSize","borderSize","trackText","onChange","onDevalue","Promise","resolve","success","onComplete","ref","trackRef","setTrackRef","trackWidth","initialWidth","initialHeight","iconColor","setIconColor","isCompleted","setIsCompleted","isDisabled","setIsDisabled","isCompletedRef","showWaitCursor","setShowWaitCursor","scaleFactor","x","icon","styles","iconStyles","dragControls","vibrationTrigger","value","Math","round","lastVibrationValue","on","current","pattern","containerAnimation","thumbVariants","textOpacity","relativeValue","thumbRadius","parseFloat","toPrecision","relativeBackgroundValue","trackBackground","handlePointerDownCapture","event","currentValue","get","preventDefault","stopPropagation","action","iOSFeedbackVibration","handleRedeem","devaluePromise","sleepPromise","devalued","all","start","handleTrackRef","node","handleDragStart","handleDragEnd","disable","enable","baseFontSize","createElement","animate","$height","$borderSize","$backgroundColor","style","background","variants","$size","$trackHeight","drag","dragElastic","onPointerDownCapture","whileTap","scale","cursor","onDragStart","onDragEnd","dragConstraints","right","left","key","shouldHideBackground","opacity","$color","$baseFontSize"],"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 DragHandler,\n} from 'motion/react';\nimport React, {\n    forwardRef,\n    PointerEvent,\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            (event: PointerEvent) => {\n                const currentValue = relativeValue.get();\n\n                if (currentValue > 5) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                void invokeCall({\n                    action: 19,\n                    value: {\n                        pattern: [50],\n                        iOSFeedbackVibration: 7,\n                    },\n                });\n            },\n            [relativeValue],\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<DragHandler>>(() => {\n            void containerAnimation.start('dragging');\n        }, [containerAnimation]);\n\n        const handleDragEnd = useCallback<NonNullable<DragHandler>>(() => {\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/esm/components/slider/Slider.styles.js

@@ -5,66 +5,42 @@ export const Track = styled(motion.div)`
     user-select: none;
     position: relative;
     z-index: 3;
-    height: ${_ref => {
-  let {
-    $height
-  } = _ref;
-  return $height;
-}}px;
-    border-radius: ${_ref2 => {
-  let {
-    $height
-  } = _ref2;
-  return $height / 2;
-}}px;
-    background-color: ${_ref3 => {
-  let {
-    $backgroundColor
-  } = _ref3;
-  return $backgroundColor;
-}};
+    height: ${({
+  $height
+}) => $height}px;
+    border-radius: ${({
+  $height
+}) => $height / 2}px;
+    background-color: ${({
+  $backgroundColor
+}) => $backgroundColor};
 `;
 export const TrackBackground = styled(motion.div)`
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: ${_ref4 => {
-  let {
-    $height
-  } = _ref4;
-  return $height / 2;
-}}px;
+    border-radius: ${({
+  $height
+}) => $height / 2}px;
     z-index: 2;
 `;
 export const Thumb = styled(motion.div)`
-    height: ${_ref5 => {
-  let {
-    $size
-  } = _ref5;
-  return $size;
-}}px;
-    width: ${_ref6 => {
-  let {
-    $size
-  } = _ref6;
-  return $size;
-}}px;
+    height: ${({
+  $size
+}) => $size}px;
+    width: ${({
+  $size
+}) => $size}px;
     border-radius: 50%;
     background-color: white;
-    left: ${_ref7 => {
-  let {
-    $size,
-    $trackHeight
-  } = _ref7;
-  return ($trackHeight - $size - 2) / 2;
-}}px;
-    bottom: ${_ref8 => {
-  let {
-    $size,
-    $trackHeight
-  } = _ref8;
-  return ($trackHeight - $size - 2) / 2 + 1;
-}}px;
+    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;
@@ -72,19 +48,13 @@ export const Thumb = styled(motion.div)`
 export const TrackText = styled(motion.div)`
     position: absolute;
     line-height: 1.15;
-    font-size: ${_ref9 => {
-  let {
-    $baseFontSize
-  } = _ref9;
-  return $baseFontSize;
-}}px;
+    font-size: ${({
+  $baseFontSize
+}) => $baseFontSize}px;
     font-weight: 700;
-    color: ${_ref0 => {
-  let {
-    $color
-  } = _ref0;
-  return $color;
-}};
+    color: ${({
+  $color
+}) => $color};
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -221,47 +191,41 @@ export const ThumbIconContainer = styled.div`
     justify-content: center;
     align-items: center;
 `;
-export const ThumbIcon = styled(motion.i).attrs(_ref1 => {
-  let {
-    icon
-  } = _ref1;
-  return {
-    className: `react-chayns-icon ${icon}`
-  };
-})`
+export const ThumbIcon = styled(motion.i).attrs(({
+  icon
+}) => ({
+  className: `react-chayns-icon ${icon}`
+}))`
     font-size: 22px;
     z-index: 1;
     color: black;
     padding: 5px;
 `;
-export const createThumbVariants = _ref10 => {
-  let {
-    thumbSize,
-    trackWidth,
-    scaleFactor
-  } = _ref10;
-  return {
-    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'
+export 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'
+  }
+});
 export const THUMB_ICON_VARIANTS = {
   base: {
     x: [0, 8, 0, 8, 0],

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["motion","styled","Container","div","Track","_ref","$height","_ref2","_ref3","$backgroundColor","TrackBackground","_ref4","Thumb","_ref5","$size","_ref6","_ref7","$trackHeight","_ref8","TrackText","_ref9","$baseFontSize","_ref0","$color","ThumbIconContainer","ThumbIcon","i","attrs","_ref1","icon","className","createThumbVariants","_ref10","thumbSize","trackWidth","scaleFactor","base","x","backgroundColor","transition","duration","completed","boxShadow","leaving","scale","THUMB_ICON_VARIANTS","ease","repeat","Infinity","repeatDelay","dragging","opacity"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion, Variant, Variants } from 'motion/react';\nimport styled from 'styled-components';\n\ninterface IBaseVariant extends Variants {\n    base: Variant;\n}\n\ninterface IDraggingVariant extends Variants {\n    dragging: Variant;\n}\n\ninterface ICompletedVariant extends Variants {\n    completed: Variant;\n}\n\ninterface ILeavingVariant extends Variants {\n    leaving: Variant;\n}\n\nexport const Container = styled(motion.div)``;\n\nexport type TrackProps = {\n    $height: number;\n    $borderSize: number;\n    $backgroundColor: string;\n};\n\nexport const Track = styled(motion.div)<TrackProps>`\n    user-select: none;\n    position: relative;\n    z-index: 3;\n    height: ${({ $height }) => $height}px;\n    border-radius: ${({ $height }) => $height / 2}px;\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n`;\n\nexport const TrackBackground = styled(motion.div)<{ $height: number }>`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ${({ $height }) => $height / 2}px;\n    z-index: 2;\n`;\n\nexport const Thumb = styled(motion.div)<{\n    $size: number;\n    $trackHeight: number;\n}>`\n    height: ${({ $size }) => $size}px;\n    width: ${({ $size }) => $size}px;\n    border-radius: 50%;\n    background-color: white;\n    left: ${({ $size, $trackHeight }) => ($trackHeight - $size - 2) / 2}px;\n    bottom: ${({ $size, $trackHeight }) => ($trackHeight - $size - 2) / 2 + 1}px;\n    position: absolute;\n    z-index: 3;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0;\n`;\n\nexport const TrackText = styled(motion.div)<{ $color: string; $baseFontSize: number }>`\n    position: absolute;\n    line-height: 1.15;\n    font-size: ${({ $baseFontSize }) => $baseFontSize}px;\n    font-weight: 700;\n    color: ${({ $color }) => $color};\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    z-index: 1;\n    font-family:\n        Roboto Regular,\n        sans-serif;\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: normal;\n        font-weight: normal;\n        src:\n            local('Roboto Regular'),\n            local('Roboto Regular'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: italic;\n        font-weight: normal;\n        src:\n            local('Roboto Regular Italic'),\n            local('Roboto Regular-Italic'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: normal;\n        font-weight: bold;\n        src:\n            local('Roboto Regular Bold'),\n            local('Roboto Regular-Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: italic;\n        font-weight: bold;\n        src:\n            local('Roboto Regular Bold Italic'),\n            local('Roboto Regular-BoldItalic'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff2)\n                format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff)\n                format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: normal;\n        font-weight: normal;\n        src:\n            local('Roboto Bold'),\n            local('Roboto Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: italic;\n        font-weight: normal;\n        src:\n            local('Roboto Bold Italic'),\n            local('Roboto Bold-Italic'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: normal;\n        font-weight: bold;\n        src:\n            local('Roboto Bold Bold'),\n            local('Roboto Bold-Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: italic;\n        font-weight: bold;\n        src:\n            local('Roboto Bold Bold Italic'),\n            local('Roboto Bold-BoldItalic'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n`;\n\nexport const ThumbIconContainer = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const ThumbIcon = styled(motion.i).attrs<{ icon: string }>(({ icon }) => ({\n    className: `react-chayns-icon ${icon}`,\n}))`\n    font-size: 22px;\n    z-index: 1;\n    color: black;\n    padding: 5px;\n`;\n\nexport type CreateThumbVariantsArgs = {\n    trackWidth: number;\n    thumbSize: number;\n    scaleFactor: number;\n};\n\nexport const createThumbVariants = ({\n    thumbSize,\n    trackWidth,\n    scaleFactor,\n}: CreateThumbVariantsArgs): IBaseVariant & ICompletedVariant & ILeavingVariant => ({\n    base: {\n        x: 0,\n        backgroundColor: 'white',\n        transition: { duration: 0.2 },\n    },\n    completed: {\n        x: (trackWidth - thumbSize * scaleFactor) / 2,\n        backgroundColor: 'transparent',\n        boxShadow: 'none',\n        transition: { duration: 0.3 },\n    },\n    leaving: {\n        scale: [1, 2.4, 1],\n        boxShadow: 'none',\n    },\n});\n\nexport const THUMB_ICON_VARIANTS: IBaseVariant &\n    IDraggingVariant &\n    ICompletedVariant &\n    ILeavingVariant = {\n    base: {\n        x: [0, 8, 0, 8, 0],\n        transition: {\n            duration: 1,\n            ease: 'easeInOut',\n            repeat: Infinity,\n            repeatDelay: 5,\n        },\n    },\n    dragging: {\n        x: 0,\n    },\n    completed: {\n        opacity: 1,\n        transition: { duration: 0 },\n    },\n    leaving: {\n        opacity: 1,\n        scale: [1, 2.4, 1],\n        transition: { duration: 0.4, ease: 'easeInOut' },\n    },\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAA2B,cAAc;AACxD,OAAOC,MAAM,MAAM,mBAAmB;AAkBtC,OAAO,MAAMC,SAAS,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC,EAAE;AAQ7C,OAAO,MAAMC,KAAK,GAAGH,MAAM,CAACD,MAAM,CAACG,GAAG,CAAa;AACnD;AACA;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAKC,OAAO;AAAA;AACtC,qBAAqBC,KAAA;EAAA,IAAC;IAAED;EAAQ,CAAC,GAAAC,KAAA;EAAA,OAAKD,OAAO,GAAG,CAAC;AAAA;AACjD,wBAAwBE,KAAA;EAAA,IAAC;IAAEC;EAAiB,CAAC,GAAAD,KAAA;EAAA,OAAKC,gBAAgB;AAAA;AAClE,CAAC;AAED,OAAO,MAAMC,eAAe,GAAGT,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsB;AACtE;AACA;AACA;AACA,qBAAqBQ,KAAA;EAAA,IAAC;IAAEL;EAAQ,CAAC,GAAAK,KAAA;EAAA,OAAKL,OAAO,GAAG,CAAC;AAAA;AACjD;AACA,CAAC;AAED,OAAO,MAAMM,KAAK,GAAGX,MAAM,CAACD,MAAM,CAACG,GAAG,CAGpC;AACF,cAAcU,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA;AAClC,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA;AACjC;AACA;AACA,YAAYE,KAAA;EAAA,IAAC;IAAEF,KAAK;IAAEG;EAAa,CAAC,GAAAD,KAAA;EAAA,OAAK,CAACC,YAAY,GAAGH,KAAK,GAAG,CAAC,IAAI,CAAC;AAAA;AACvE,cAAcI,KAAA;EAAA,IAAC;IAAEJ,KAAK;IAAEG;EAAa,CAAC,GAAAC,KAAA;EAAA,OAAK,CAACD,YAAY,GAAGH,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AAAA;AAC7E;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,SAAS,GAAGlB,MAAM,CAACD,MAAM,CAACG,GAAG,CAA4C;AACtF;AACA;AACA,iBAAiBiB,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAAKC,aAAa;AAAA;AACrD;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAGvB,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMsB,SAAS,GAAGxB,MAAM,CAACD,MAAM,CAAC0B,CAAC,CAAC,CAACC,KAAK,CAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAK,CAAC,GAAAD,KAAA;EAAA,OAAM;IAC7EE,SAAS,EAAE,qBAAqBD,IAAI;EACxC,CAAC;AAAA,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAME,mBAAmB,GAAGC,MAAA;EAAA,IAAC;IAChCC,SAAS;IACTC,UAAU;IACVC;EACqB,CAAC,GAAAH,MAAA;EAAA,OAA0D;IAChFI,IAAI,EAAE;MACFC,CAAC,EAAE,CAAC;MACJC,eAAe,EAAE,OAAO;MACxBC,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI;IAChC,CAAC;IACDC,SAAS,EAAE;MACPJ,CAAC,EAAE,CAACH,UAAU,GAAGD,SAAS,GAAGE,WAAW,IAAI,CAAC;MAC7CG,eAAe,EAAE,aAAa;MAC9BI,SAAS,EAAE,MAAM;MACjBH,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI;IAChC,CAAC;IACDG,OAAO,EAAE;MACLC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;MAClBF,SAAS,EAAE;IACf;EACJ,CAAC;AAAA,CAAC;AAEF,OAAO,MAAMG,mBAGM,GAAG;EAClBT,IAAI,EAAE;IACFC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAClBE,UAAU,EAAE;MACRC,QAAQ,EAAE,CAAC;MACXM,IAAI,EAAE,WAAW;MACjBC,MAAM,EAAEC,QAAQ;MAChBC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,QAAQ,EAAE;IACNb,CAAC,EAAE;EACP,CAAC;EACDI,SAAS,EAAE;IACPU,OAAO,EAAE,CAAC;IACVZ,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAE;EAC9B,CAAC;EACDG,OAAO,EAAE;IACLQ,OAAO,EAAE,CAAC;IACVP,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAClBL,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEM,IAAI,EAAE;IAAY;EACnD;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"Slider.styles.js","names":["motion","styled","Container","div","Track","$height","$backgroundColor","TrackBackground","Thumb","$size","$trackHeight","TrackText","$baseFontSize","$color","ThumbIconContainer","ThumbIcon","i","attrs","icon","className","createThumbVariants","thumbSize","trackWidth","scaleFactor","base","x","backgroundColor","transition","duration","completed","boxShadow","leaving","scale","THUMB_ICON_VARIANTS","ease","repeat","Infinity","repeatDelay","dragging","opacity"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion, Variant, Variants } from 'motion/react';\nimport styled from 'styled-components';\n\ninterface IBaseVariant extends Variants {\n    base: Variant;\n}\n\ninterface IDraggingVariant extends Variants {\n    dragging: Variant;\n}\n\ninterface ICompletedVariant extends Variants {\n    completed: Variant;\n}\n\ninterface ILeavingVariant extends Variants {\n    leaving: Variant;\n}\n\nexport const Container = styled(motion.div)``;\n\nexport type TrackProps = {\n    $height: number;\n    $borderSize: number;\n    $backgroundColor: string;\n};\n\nexport const Track = styled(motion.div)<TrackProps>`\n    user-select: none;\n    position: relative;\n    z-index: 3;\n    height: ${({ $height }) => $height}px;\n    border-radius: ${({ $height }) => $height / 2}px;\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n`;\n\nexport const TrackBackground = styled(motion.div)<{ $height: number }>`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ${({ $height }) => $height / 2}px;\n    z-index: 2;\n`;\n\nexport const Thumb = styled(motion.div)<{\n    $size: number;\n    $trackHeight: number;\n}>`\n    height: ${({ $size }) => $size}px;\n    width: ${({ $size }) => $size}px;\n    border-radius: 50%;\n    background-color: white;\n    left: ${({ $size, $trackHeight }) => ($trackHeight - $size - 2) / 2}px;\n    bottom: ${({ $size, $trackHeight }) => ($trackHeight - $size - 2) / 2 + 1}px;\n    position: absolute;\n    z-index: 3;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0;\n`;\n\nexport const TrackText = styled(motion.div)<{ $color: string; $baseFontSize: number }>`\n    position: absolute;\n    line-height: 1.15;\n    font-size: ${({ $baseFontSize }) => $baseFontSize}px;\n    font-weight: 700;\n    color: ${({ $color }) => $color};\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    z-index: 1;\n    font-family:\n        Roboto Regular,\n        sans-serif;\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: normal;\n        font-weight: normal;\n        src:\n            local('Roboto Regular'),\n            local('Roboto Regular'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: italic;\n        font-weight: normal;\n        src:\n            local('Roboto Regular Italic'),\n            local('Roboto Regular-Italic'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: normal;\n        font-weight: bold;\n        src:\n            local('Roboto Regular Bold'),\n            local('Roboto Regular-Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: italic;\n        font-weight: bold;\n        src:\n            local('Roboto Regular Bold Italic'),\n            local('Roboto Regular-BoldItalic'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff2)\n                format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff)\n                format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: normal;\n        font-weight: normal;\n        src:\n            local('Roboto Bold'),\n            local('Roboto Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: italic;\n        font-weight: normal;\n        src:\n            local('Roboto Bold Italic'),\n            local('Roboto Bold-Italic'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: normal;\n        font-weight: bold;\n        src:\n            local('Roboto Bold Bold'),\n            local('Roboto Bold-Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: italic;\n        font-weight: bold;\n        src:\n            local('Roboto Bold Bold Italic'),\n            local('Roboto Bold-BoldItalic'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n`;\n\nexport const ThumbIconContainer = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const ThumbIcon = styled(motion.i).attrs<{ icon: string }>(({ icon }) => ({\n    className: `react-chayns-icon ${icon}`,\n}))`\n    font-size: 22px;\n    z-index: 1;\n    color: black;\n    padding: 5px;\n`;\n\nexport type CreateThumbVariantsArgs = {\n    trackWidth: number;\n    thumbSize: number;\n    scaleFactor: number;\n};\n\nexport const createThumbVariants = ({\n    thumbSize,\n    trackWidth,\n    scaleFactor,\n}: CreateThumbVariantsArgs): IBaseVariant & ICompletedVariant & ILeavingVariant => ({\n    base: {\n        x: 0,\n        backgroundColor: 'white',\n        transition: { duration: 0.2 },\n    },\n    completed: {\n        x: (trackWidth - thumbSize * scaleFactor) / 2,\n        backgroundColor: 'transparent',\n        boxShadow: 'none',\n        transition: { duration: 0.3 },\n    },\n    leaving: {\n        scale: [1, 2.4, 1],\n        boxShadow: 'none',\n    },\n});\n\nexport const THUMB_ICON_VARIANTS: IBaseVariant &\n    IDraggingVariant &\n    ICompletedVariant &\n    ILeavingVariant = {\n    base: {\n        x: [0, 8, 0, 8, 0],\n        transition: {\n            duration: 1,\n            ease: 'easeInOut',\n            repeat: Infinity,\n            repeatDelay: 5,\n        },\n    },\n    dragging: {\n        x: 0,\n    },\n    completed: {\n        opacity: 1,\n        transition: { duration: 0 },\n    },\n    leaving: {\n        opacity: 1,\n        scale: [1, 2.4, 1],\n        transition: { duration: 0.4, ease: 'easeInOut' },\n    },\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/timer/Timer.js

@@ -2,12 +2,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { getLanguage, vibrate } from 'chayns-api';
 import { Container, Time } from './Timer.styles';
 import { differenceInHours, differenceInMinutes, getTimeTillNow, intervalToDuration } from '../../utils/date';
-const Timer = _ref => {
-  let {
-    devalueTime,
-    color,
-    textColor = 'white'
-  } = _ref;
+const Timer = ({
+  devalueTime,
+  color,
+  textColor = 'white'
+}) => {
   const {
     active: language
   } = getLanguage();

package/lib/esm/components/timer/Timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timer.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","getLanguage","vibrate","Container","Time","differenceInHours","differenceInMinutes","getTimeTillNow","intervalToDuration","Timer","_ref","devalueTime","color","textColor","active","language","refDate","Date","distance","setDistance","start","end","minutesShowValue","Math","max","minutes","toString","secondsShowValue","seconds","current","interval","setInterval","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","distanceLabel","date","currentDate","formatTime","formatString","hours","getHours","padStart","getMinutes","replace","createElement","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getLanguage, vibrate } from 'chayns-api';\n\nimport { Container, Time } from './Timer.styles';\nimport {\n    differenceInHours,\n    differenceInMinutes,\n    getTimeTillNow,\n    intervalToDuration,\n} from '../../utils/date';\n\nexport type TimerProps = {\n    color: string;\n    devalueTime: Date;\n    textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n    const { active: language } = getLanguage();\n\n    const refDate = useRef(new Date());\n    const [distance, setDistance] = useState(\n        intervalToDuration({\n            start: devalueTime,\n            end: new Date(),\n        }),\n    );\n    const minutesShowValue = useMemo(\n        () => Math.max(distance.minutes ?? 0, 0).toString(),\n        [distance.minutes],\n    );\n    const secondsShowValue = useMemo(\n        () => Math.max(distance.seconds ?? 0, 0).toString(),\n        [distance.seconds],\n    );\n\n    useEffect(() => {\n        refDate.current = new Date();\n        const interval = setInterval(() => {\n            refDate.current = new Date();\n            setDistance(\n                intervalToDuration({\n                    start: devalueTime,\n                    end: refDate.current,\n                }),\n            );\n        }, 500);\n        return () => clearInterval(interval);\n    }, [devalueTime]);\n\n    const handlePointerDownCapture = useCallback(() => {\n        void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n    }, []);\n\n    const label = useMemo(() => {\n        let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n        if (differenceInHours(refDate.current, devalueTime) > 0) {\n            const distanceLabel = getTimeTillNow({\n                date: new Date(),\n                currentDate: devalueTime,\n                language,\n            });\n            text = `${distanceLabel} (##TIME## Uhr)`;\n        } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n            text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n        }\n\n        const formatTime = (date: Date, formatString: string): string => {\n            const hours = date.getHours().toString().padStart(2, '0');\n            const minutes = date.getMinutes().toString().padStart(2, '0');\n\n            if (formatString === 'HH:mm') {\n                return `${hours}:${minutes}`;\n            }\n            return '';\n        };\n\n        return text\n            .replace('##MINUTES##', minutesShowValue)\n            .replace('##SECONDS##', secondsShowValue)\n            .replace('##TIME##', formatTime(devalueTime, 'HH:mm'));\n    }, [devalueTime, minutesShowValue, secondsShowValue, language]);\n\n    return (\n        <Container\n            $baseFontSize={17}\n            $borderSize={2}\n            $height={50}\n            $color={color}\n            $textColor={textColor}\n            $backgroundColor={color}\n            onPointerDownCapture={handlePointerDownCapture}\n        >\n            <Time>{label}</Time>\n        </Container>\n    );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Timer.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","getLanguage","vibrate","Container","Time","differenceInHours","differenceInMinutes","getTimeTillNow","intervalToDuration","Timer","devalueTime","color","textColor","active","language","refDate","Date","distance","setDistance","start","end","minutesShowValue","Math","max","minutes","toString","secondsShowValue","seconds","current","interval","setInterval","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","distanceLabel","date","currentDate","formatTime","formatString","hours","getHours","padStart","getMinutes","replace","createElement","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getLanguage, vibrate } from 'chayns-api';\n\nimport { Container, Time } from './Timer.styles';\nimport {\n    differenceInHours,\n    differenceInMinutes,\n    getTimeTillNow,\n    intervalToDuration,\n} from '../../utils/date';\n\nexport type TimerProps = {\n    color: string;\n    devalueTime: Date;\n    textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n    const { active: language } = getLanguage();\n\n    const refDate = useRef(new Date());\n    const [distance, setDistance] = useState(\n        intervalToDuration({\n            start: devalueTime,\n            end: new Date(),\n        }),\n    );\n    const minutesShowValue = useMemo(\n        () => Math.max(distance.minutes ?? 0, 0).toString(),\n        [distance.minutes],\n    );\n    const secondsShowValue = useMemo(\n        () => Math.max(distance.seconds ?? 0, 0).toString(),\n        [distance.seconds],\n    );\n\n    useEffect(() => {\n        refDate.current = new Date();\n        const interval = setInterval(() => {\n            refDate.current = new Date();\n            setDistance(\n                intervalToDuration({\n                    start: devalueTime,\n                    end: refDate.current,\n                }),\n            );\n        }, 500);\n        return () => clearInterval(interval);\n    }, [devalueTime]);\n\n    const handlePointerDownCapture = useCallback(() => {\n        void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n    }, []);\n\n    const label = useMemo(() => {\n        let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n        if (differenceInHours(refDate.current, devalueTime) > 0) {\n            const distanceLabel = getTimeTillNow({\n                date: new Date(),\n                currentDate: devalueTime,\n                language,\n            });\n            text = `${distanceLabel} (##TIME## Uhr)`;\n        } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n            text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n        }\n\n        const formatTime = (date: Date, formatString: string): string => {\n            const hours = date.getHours().toString().padStart(2, '0');\n            const minutes = date.getMinutes().toString().padStart(2, '0');\n\n            if (formatString === 'HH:mm') {\n                return `${hours}:${minutes}`;\n            }\n            return '';\n        };\n\n        return text\n            .replace('##MINUTES##', minutesShowValue)\n            .replace('##SECONDS##', secondsShowValue)\n            .replace('##TIME##', formatTime(devalueTime, 'HH:mm'));\n    }, [devalueTime, minutesShowValue, secondsShowValue, language]);\n\n    return (\n        <Container\n            $baseFontSize={17}\n            $borderSize={2}\n            $height={50}\n            $color={color}\n            $textColor={textColor}\n            $backgroundColor={color}\n            onPointerDownCapture={handlePointerDownCapture}\n        >\n            <Time>{label}</Time>\n        </Container>\n    );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/timer/Timer.styles.js

@@ -1,18 +1,12 @@
 import styled from 'styled-components';
 import { Track } from '../slider/Slider.styles';
 export const Container = styled(Track)`
-    height: ${_ref => {
-  let {
-    $height
-  } = _ref;
-  return $height;
-}}px !important;
-    background-color: ${_ref2 => {
-  let {
-    $color
-  } = _ref2;
-  return $color;
-}};
+    height: ${({
+  $height
+}) => $height}px !important;
+    background-color: ${({
+  $color
+}) => $color};
     display: flex;
     flex-direction: row;
     align-items: center;

package/lib/esm/components/timer/Timer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timer.styles.js","names":["styled","Track","Container","_ref","$height","_ref2","$color","Time","div"],"sources":["../../../../src/components/timer/Timer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Track } from '../slider/Slider.styles';\n\nexport const Container = styled(Track)<{\n    $color: string;\n    $textColor: string;\n    $baseFontSize: number;\n}>`\n    height: ${({ $height }) => $height}px !important;\n    background-color: ${({ $color }) => $color};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: white;\n    container-type: inline-size;\n`;\n\nexport const Time = styled.div`\n    font-size: 6cqw;\n    font-weight: 700;\n    color: white;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,OAAO,MAAMC,SAAS,GAAGF,MAAM,CAACC,KAAK,CAInC;AACF,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAKC,OAAO;AAAA;AACtC,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGP,MAAM,CAACQ,GAAG;AAC9B;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Timer.styles.js","names":["styled","Track","Container","$height","$color","Time","div"],"sources":["../../../../src/components/timer/Timer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Track } from '../slider/Slider.styles';\n\nexport const Container = styled(Track)<{\n    $color: string;\n    $textColor: string;\n    $baseFontSize: number;\n}>`\n    height: ${({ $height }) => $height}px !important;\n    background-color: ${({ $color }) => $color};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: white;\n    container-type: inline-size;\n`;\n\nexport const Time = styled.div`\n    font-size: 6cqw;\n    font-weight: 700;\n    color: white;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,OAAO,MAAMC,SAAS,GAAGF,MAAM,CAACC,KAAK,CAInC;AACF,cAAc,CAAC;EAAEE;AAAQ,CAAC,KAAKA,OAAO;AACtC,wBAAwB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGL,MAAM,CAACM,GAAG;AAC9B;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/utils/date.js

@@ -13,12 +13,11 @@ export const differenceInHours = (date1, date2) => {
   const diffInMilliseconds = date1.getTime() - date2.getTime();
   return Math.floor(diffInMilliseconds / (1000 * 60 * 60)); // Millisekunden in Stunden umrechnen
 };
-export const getTimeTillNow = _ref => {
-  let {
-    date,
-    currentDate,
-    language = Language.English
-  } = _ref;
+export const getTimeTillNow = ({
+  date,
+  currentDate,
+  language = Language.English
+}) => {
   const diffInSeconds = Math.floor((currentDate.getTime() - date.getTime()) / 1000);
   const isPast = diffInSeconds > 0;
   const units = [{

package/lib/esm/utils/date.js.map

@@ -1 +1 @@
-{"version":3,"file":"date.js","names":["Language","addSeconds","date","seconds","result","Date","setSeconds","getSeconds","subHours","hours","setHours","getHours","differenceInHours","date1","date2","diffInMilliseconds","getTime","Math","floor","getTimeTillNow","_ref","currentDate","language","English","diffInSeconds","isPast","units","label","absDiff","abs","find","u","count","formatter","Intl","RelativeTimeFormat","numeric","format","intervalToDuration","interval","startTime","start","endTime","end","years","months","days","minutes","differenceInMinutes"],"sources":["../../../src/utils/date.ts"],"sourcesContent":["import { Language } from 'chayns-api';\n\nexport const addSeconds = (date: Date, seconds: number): Date => {\n    const result = new Date(date);\n    result.setSeconds(date.getSeconds() + seconds);\n    return result;\n};\n\nexport const subHours = (date: Date, hours: number): Date => {\n    const result = new Date(date);\n    result.setHours(date.getHours() - hours);\n    return result;\n};\n\nexport const differenceInHours = (date1: Date, date2: Date): number => {\n    const diffInMilliseconds = date1.getTime() - date2.getTime();\n    return Math.floor(diffInMilliseconds / (1000 * 60 * 60)); // Millisekunden in Stunden umrechnen\n};\n\ninterface GetTimeTillNow {\n    date: Date;\n    currentDate: Date;\n    language: Language;\n}\n\ntype RelativeTimeUnit = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';\n\nexport const getTimeTillNow = ({\n    date,\n    currentDate,\n    language = Language.English,\n}: GetTimeTillNow): string => {\n    const diffInSeconds = Math.floor((currentDate.getTime() - date.getTime()) / 1000);\n    const isPast = diffInSeconds > 0;\n\n    const units: { label: RelativeTimeUnit; seconds: number }[] = [\n        { label: 'year', seconds: 31536000 },\n        { label: 'month', seconds: 2592000 },\n        { label: 'day', seconds: 86400 },\n        { label: 'hour', seconds: 3600 },\n        { label: 'minute', seconds: 60 },\n        { label: 'second', seconds: 1 },\n    ];\n\n    const absDiff = Math.abs(diffInSeconds);\n    const { label, seconds } = units.find((u) => absDiff >= u.seconds) || {\n        label: 'second',\n        seconds: 1,\n    };\n    const count = Math.floor(absDiff / seconds);\n\n    const formatter = new Intl.RelativeTimeFormat(language, { numeric: 'auto' });\n\n    return formatter.format(isPast ? -count : count, label);\n};\n\nexport const intervalToDuration = (interval: {\n    start: Date;\n    end: Date;\n}): {\n    years: number;\n    months: number;\n    days: number;\n    hours: number;\n    minutes: number;\n    seconds: number;\n} => {\n    const startTime = interval.start.getTime();\n    const endTime = interval.end.getTime();\n    const diffInMilliseconds = endTime - startTime;\n\n    const years = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));\n    const months = Math.floor(\n        (diffInMilliseconds % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24 * 30),\n    );\n    const days = Math.floor(\n        (diffInMilliseconds % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24),\n    );\n    const hours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n    const minutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));\n    const seconds = Math.floor((diffInMilliseconds % (1000 * 60)) / 1000);\n\n    return { years, months, days, hours, minutes, seconds };\n};\n\nexport const differenceInMinutes = (date1: Date, date2: Date): number => {\n    const diffInMilliseconds = date1.getTime() - date2.getTime();\n    return Math.floor(diffInMilliseconds / (1000 * 60)); // Millisekunden in Minuten umrechnen\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"date.js","names":["Language","addSeconds","date","seconds","result","Date","setSeconds","getSeconds","subHours","hours","setHours","getHours","differenceInHours","date1","date2","diffInMilliseconds","getTime","Math","floor","getTimeTillNow","currentDate","language","English","diffInSeconds","isPast","units","label","absDiff","abs","find","u","count","formatter","Intl","RelativeTimeFormat","numeric","format","intervalToDuration","interval","startTime","start","endTime","end","years","months","days","minutes","differenceInMinutes"],"sources":["../../../src/utils/date.ts"],"sourcesContent":["import { Language } from 'chayns-api';\n\nexport const addSeconds = (date: Date, seconds: number): Date => {\n    const result = new Date(date);\n    result.setSeconds(date.getSeconds() + seconds);\n    return result;\n};\n\nexport const subHours = (date: Date, hours: number): Date => {\n    const result = new Date(date);\n    result.setHours(date.getHours() - hours);\n    return result;\n};\n\nexport const differenceInHours = (date1: Date, date2: Date): number => {\n    const diffInMilliseconds = date1.getTime() - date2.getTime();\n    return Math.floor(diffInMilliseconds / (1000 * 60 * 60)); // Millisekunden in Stunden umrechnen\n};\n\ninterface GetTimeTillNow {\n    date: Date;\n    currentDate: Date;\n    language: Language;\n}\n\ntype RelativeTimeUnit = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';\n\nexport const getTimeTillNow = ({\n    date,\n    currentDate,\n    language = Language.English,\n}: GetTimeTillNow): string => {\n    const diffInSeconds = Math.floor((currentDate.getTime() - date.getTime()) / 1000);\n    const isPast = diffInSeconds > 0;\n\n    const units: { label: RelativeTimeUnit; seconds: number }[] = [\n        { label: 'year', seconds: 31536000 },\n        { label: 'month', seconds: 2592000 },\n        { label: 'day', seconds: 86400 },\n        { label: 'hour', seconds: 3600 },\n        { label: 'minute', seconds: 60 },\n        { label: 'second', seconds: 1 },\n    ];\n\n    const absDiff = Math.abs(diffInSeconds);\n    const { label, seconds } = units.find((u) => absDiff >= u.seconds) || {\n        label: 'second',\n        seconds: 1,\n    };\n    const count = Math.floor(absDiff / seconds);\n\n    const formatter = new Intl.RelativeTimeFormat(language, { numeric: 'auto' });\n\n    return formatter.format(isPast ? -count : count, label);\n};\n\nexport const intervalToDuration = (interval: {\n    start: Date;\n    end: Date;\n}): {\n    years: number;\n    months: number;\n    days: number;\n    hours: number;\n    minutes: number;\n    seconds: number;\n} => {\n    const startTime = interval.start.getTime();\n    const endTime = interval.end.getTime();\n    const diffInMilliseconds = endTime - startTime;\n\n    const years = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));\n    const months = Math.floor(\n        (diffInMilliseconds % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24 * 30),\n    );\n    const days = Math.floor(\n        (diffInMilliseconds % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24),\n    );\n    const hours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n    const minutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));\n    const seconds = Math.floor((diffInMilliseconds % (1000 * 60)) / 1000);\n\n    return { years, months, days, hours, minutes, seconds };\n};\n\nexport const differenceInMinutes = (date1: Date, date2: Date): number => {\n    const diffInMilliseconds = date1.getTime() - date2.getTime();\n    return Math.floor(diffInMilliseconds / (1000 * 60)); // Millisekunden in Minuten umrechnen\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/devalue-slider",
-    "version": "5.0.0-beta.1161",
+    "version": "5.0.0-beta.1164",
     "description": "A slider to devalue something.",
     "siteEffects": false,
     "browserslist": [
@@ -51,13 +51,13 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.1161",
+        "@chayns-components/core": "^5.0.0-beta.1164",
         "@react-hook/size": "^2.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.27.2",
-        "@babel/core": "^7.27.4",
-        "@babel/preset-env": "^7.27.2",
+        "@babel/cli": "^7.28.0",
+        "@babel/core": "^7.28.0",
+        "@babel/preset-env": "^7.28.0",
         "@babel/preset-react": "^7.27.1",
         "@babel/preset-typescript": "^7.27.1",
         "@types/react": "^18.3.23",
@@ -65,10 +65,10 @@
         "@types/styled-components": "^5.1.34",
         "babel-loader": "^9.2.1",
         "cross-env": "^7.0.3",
-        "lerna": "^8.2.2",
+        "lerna": "^8.2.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "styled-components": "^6.1.18",
+        "styled-components": "^6.1.19",
         "typescript": "^5.8.3"
     },
     "peerDependencies": {
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "86f367657548747796bd36e19564d67a622ab89c"
+    "gitHead": "0653bb30ce6a2d74f0b4607783ed7cf8e7d133ce"
 }