@chayns-components/devalue-slider 5.0.0-beta.1004 → 5.0.0-beta.1006

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/lib/cjs/components/slider/Slider.js +37 -37
  2. package/lib/cjs/components/slider/Slider.js.map +1 -1
  3. package/lib/cjs/components/slider/Slider.styles.js +7 -7
  4. package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
  5. package/lib/cjs/hooks/design.js +7 -7
  6. package/lib/cjs/hooks/design.js.map +1 -1
  7. package/lib/esm/components/slider/Slider.js +1 -1
  8. package/lib/esm/components/slider/Slider.js.map +1 -1
  9. package/lib/esm/components/slider/Slider.styles.js +1 -1
  10. package/lib/esm/components/slider/Slider.styles.js.map +1 -1
  11. package/lib/esm/hooks/design.js +1 -1
  12. package/lib/esm/hooks/design.js.map +1 -1
  13. package/lib/types/components/slider/Slider.styles.d.ts +14 -1841
  14. package/lib/types/components/timer/Timer.styles.d.ts +1 -262
  15. package/lib/types/hooks/design.d.ts +1 -1
  16. package/package.json +5 -4
package/lib/cjs/components/slider/Slider.js CHANGED
@@ -7,15 +7,15 @@ exports.default = void 0;
7
7
  var _core = require("@chayns-components/core");
8
8
  var _size = _interopRequireDefault(require("@react-hook/size"));
9
9
  var _chaynsApi = require("chayns-api");
10
- var _framerMotion = require("framer-motion");
11
- var _react = _interopRequireWildcard(require("react"));
10
+ var _react = require("motion/react");
11
+ var _react2 = _interopRequireWildcard(require("react"));
12
12
  var _design = require("../../hooks/design");
13
13
  var _common = require("../../utils/common");
14
14
  var _Slider = require("./Slider.styles");
15
15
  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); }
16
16
  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; }
17
17
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
18
- const Slider = /*#__PURE__*/(0, _react.forwardRef)(({
18
+ const Slider = /*#__PURE__*/(0, _react2.forwardRef)(({
19
19
  color,
20
20
  devalueColor,
21
21
  trackHeight = 50,
@@ -28,28 +28,28 @@ const Slider = /*#__PURE__*/(0, _react.forwardRef)(({
28
28
  }),
29
29
  onComplete
30
30
  }, ref) => {
31
- const [trackRef, setTrackRef] = (0, _react.useState)(null);
31
+ const [trackRef, setTrackRef] = (0, _react2.useState)(null);
32
32
  const [trackWidth] = (0, _size.default)(trackRef, {
33
33
  initialWidth: 300,
34
34
  initialHeight: 50
35
35
  });
36
- const [iconColor, setIconColor] = (0, _react.useState)('black');
37
- const [isCompleted, setIsCompleted] = (0, _react.useState)(false);
38
- const [isDisabled, setIsDisabled] = (0, _react.useState)(false);
39
- const isCompletedRef = (0, _react.useRef)(isCompleted);
40
- const [showWaitCursor, setShowWaitCursor] = (0, _react.useState)(false);
41
- const scaleFactor = (0, _react.useMemo)(() => trackHeight / thumbSize, [thumbSize, trackHeight]);
42
- const x = (0, _framerMotion.useMotionValue)(0);
36
+ const [iconColor, setIconColor] = (0, _react2.useState)('black');
37
+ const [isCompleted, setIsCompleted] = (0, _react2.useState)(false);
38
+ const [isDisabled, setIsDisabled] = (0, _react2.useState)(false);
39
+ const isCompletedRef = (0, _react2.useRef)(isCompleted);
40
+ const [showWaitCursor, setShowWaitCursor] = (0, _react2.useState)(false);
41
+ const scaleFactor = (0, _react2.useMemo)(() => trackHeight / thumbSize, [thumbSize, trackHeight]);
42
+ const x = (0, _react.useMotionValue)(0);
43
43
  const {
44
44
  icon,
45
45
  styles: iconStyles
46
46
  } = (0, _design.useThumbIcon)(x, iconColor);
47
- const dragControls = (0, _framerMotion.useDragControls)();
48
- const vibrationTrigger = (0, _framerMotion.useTransform)(x,
47
+ const dragControls = (0, _react.useDragControls)();
48
+ const vibrationTrigger = (0, _react.useTransform)(x,
49
49
  // round to 10 to avoid unnecessary vibrate calls
50
50
  value => Math.round(value / 10) * 10);
51
- const lastVibrationValue = (0, _react.useRef)(0);
52
- (0, _react.useEffect)(() => {
51
+ const lastVibrationValue = (0, _react2.useRef)(0);
52
+ (0, _react2.useEffect)(() => {
53
53
  vibrationTrigger.on('change', value => {
54
54
  if (!isCompletedRef.current && value !== lastVibrationValue.current) {
55
55
  lastVibrationValue.current = value;
@@ -59,33 +59,33 @@ const Slider = /*#__PURE__*/(0, _react.forwardRef)(({
59
59
  }
60
60
  });
61
61
  }, [vibrationTrigger]);
62
- const containerAnimation = (0, _framerMotion.useAnimation)();
63
- const thumbVariants = (0, _react.useMemo)(() => (0, _Slider.createThumbVariants)({
62
+ const containerAnimation = (0, _react.useAnimation)();
63
+ const thumbVariants = (0, _react2.useMemo)(() => (0, _Slider.createThumbVariants)({
64
64
  thumbSize,
65
65
  trackWidth,
66
66
  scaleFactor
67
67
  }), [scaleFactor, thumbSize, trackWidth]);
68
- const textOpacity = (0, _framerMotion.useTransform)(x, [0, 120], [1, 0]);
68
+ const textOpacity = (0, _react.useTransform)(x, [0, 120], [1, 0]);
69
69
 
70
70
  // this is the relative value of the right edge of the thumb
71
- const relativeValue = (0, _framerMotion.useTransform)(x, value => {
71
+ const relativeValue = (0, _react.useTransform)(x, value => {
72
72
  if (!value) return 0;
73
73
  const thumbRadius = thumbSize * scaleFactor;
74
74
  return parseFloat(((value + thumbRadius) / trackWidth * 100).toPrecision(2));
75
75
  });
76
76
 
77
77
  // this is the relative value of the center of the thumb, it is used for the background gradient
78
- const relativeBackgroundValue = (0, _framerMotion.useTransform)(x, value => {
78
+ const relativeBackgroundValue = (0, _react.useTransform)(x, value => {
79
79
  if (!value) return 0;
80
80
  const thumbRadius = thumbSize * scaleFactor / 2;
81
81
  return parseFloat(((value + thumbRadius) / trackWidth * 100).toPrecision(2));
82
82
  });
83
- const trackBackground = (0, _framerMotion.useTransform)(relativeBackgroundValue, value => {
83
+ const trackBackground = (0, _react.useTransform)(relativeBackgroundValue, value => {
84
84
  if (isCompleted) return devalueColor;
85
85
  if (!value) return 'transparent';
86
86
  return `linear-gradient(to right, ${devalueColor} ${value}%, transparent ${value}%)`;
87
87
  });
88
- const handlePointerDownCapture = (0, _react.useCallback)(event => {
88
+ const handlePointerDownCapture = (0, _react2.useCallback)(event => {
89
89
  const currentValue = relativeValue.get();
90
90
  if (currentValue > 5) {
91
91
  event.preventDefault();
@@ -99,7 +99,7 @@ const Slider = /*#__PURE__*/(0, _react.forwardRef)(({
99
99
  }
100
100
  });
101
101
  }, [relativeValue]);
102
- const handleRedeem = (0, _react.useCallback)(async () => {
102
+ const handleRedeem = (0, _react2.useCallback)(async () => {
103
103
  setShowWaitCursor(true);
104
104
  setIsCompleted(true);
105
105
  isCompletedRef.current = true;
@@ -126,27 +126,27 @@ const Slider = /*#__PURE__*/(0, _react.forwardRef)(({
126
126
  await containerAnimation.start('leaving');
127
127
  onComplete === null || onComplete === void 0 || onComplete();
128
128
  }, [containerAnimation, onComplete, onDevalue]);
129
- const handleTrackRef = (0, _react.useCallback)(node => {
129
+ const handleTrackRef = (0, _react2.useCallback)(node => {
130
130
  setTrackRef(node);
131
131
  }, []);
132
- const handleDragStart = (0, _react.useCallback)(() => {
132
+ const handleDragStart = (0, _react2.useCallback)(() => {
133
133
  void containerAnimation.start('dragging');
134
134
  }, [containerAnimation]);
135
- const handleDragEnd = (0, _react.useCallback)(() => {
135
+ const handleDragEnd = (0, _react2.useCallback)(() => {
136
136
  if (relativeValue.get() > 98) {
137
137
  void handleRedeem();
138
138
  return;
139
139
  }
140
140
  void containerAnimation.start('base');
141
141
  }, [relativeValue, containerAnimation, handleRedeem]);
142
- (0, _react.useEffect)(() => {
142
+ (0, _react2.useEffect)(() => {
143
143
  void containerAnimation.start('base');
144
144
  }, [containerAnimation]);
145
- (0, _react.useEffect)(() => {
145
+ (0, _react2.useEffect)(() => {
146
146
  if (isCompleted) return () => {};
147
147
  return relativeValue.on('change', onChange);
148
148
  }, [isCompleted, onChange, relativeValue]);
149
- (0, _react.useImperativeHandle)(ref, () => ({
149
+ (0, _react2.useImperativeHandle)(ref, () => ({
150
150
  disable: () => {
151
151
  setIsDisabled(true);
152
152
  setShowWaitCursor(false);
@@ -158,20 +158,20 @@ const Slider = /*#__PURE__*/(0, _react.forwardRef)(({
158
158
  setIsDisabled(false);
159
159
  }
160
160
  }), [containerAnimation]);
161
- const baseFontSize = (0, _react.useMemo)(() => 22, []);
162
- return /*#__PURE__*/_react.default.createElement(_Slider.Container, {
161
+ const baseFontSize = (0, _react2.useMemo)(() => 22, []);
162
+ return /*#__PURE__*/_react2.default.createElement(_Slider.Container, {
163
163
  animate: containerAnimation
164
- }, /*#__PURE__*/_react.default.createElement(_Slider.Track, {
164
+ }, /*#__PURE__*/_react2.default.createElement(_Slider.Track, {
165
165
  $height: trackHeight,
166
166
  $borderSize: borderSize,
167
167
  $backgroundColor: color,
168
168
  ref: handleTrackRef
169
- }, /*#__PURE__*/_react.default.createElement(_Slider.TrackBackground, {
169
+ }, /*#__PURE__*/_react2.default.createElement(_Slider.TrackBackground, {
170
170
  $height: trackHeight,
171
171
  style: {
172
172
  background: trackBackground
173
173
  }
174
- }), /*#__PURE__*/_react.default.createElement(_Slider.Thumb, {
174
+ }), /*#__PURE__*/_react2.default.createElement(_Slider.Thumb, {
175
175
  variants: thumbVariants,
176
176
  $size: thumbSize,
177
177
  $trackHeight: trackHeight,
@@ -192,15 +192,15 @@ const Slider = /*#__PURE__*/(0, _react.forwardRef)(({
192
192
  right: trackWidth - thumbSize * scaleFactor,
193
193
  left: 0
194
194
  }
195
- }, /*#__PURE__*/_react.default.createElement(_Slider.ThumbIconContainer, null, !showWaitCursor && /*#__PURE__*/_react.default.createElement(_Slider.ThumbIcon, {
195
+ }, /*#__PURE__*/_react2.default.createElement(_Slider.ThumbIconContainer, null, !showWaitCursor && /*#__PURE__*/_react2.default.createElement(_Slider.ThumbIcon, {
196
196
  key: "thumb-icon",
197
197
  icon: icon,
198
198
  variants: _Slider.THUMB_ICON_VARIANTS,
199
199
  style: iconStyles
200
- }), showWaitCursor && /*#__PURE__*/_react.default.createElement(_core.SmallWaitCursor, {
200
+ }), showWaitCursor && /*#__PURE__*/_react2.default.createElement(_core.SmallWaitCursor, {
201
201
  shouldHideBackground: true,
202
202
  color: "black"
203
- }))), /*#__PURE__*/_react.default.createElement(_Slider.TrackText, {
203
+ }))), /*#__PURE__*/_react2.default.createElement(_Slider.TrackText, {
204
204
  style: {
205
205
  opacity: textOpacity
206
206
  },
package/lib/cjs/components/slider/Slider.js.map CHANGED
@@ -1 +1 @@
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","event","currentValue","preventDefault","stopPropagation","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 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<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":[]}
1
+ {"version":3,"file":"Slider.js","names":["_core","require","_size","_interopRequireDefault","_chaynsApi","_react","_react2","_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","event","currentValue","preventDefault","stopPropagation","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 '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<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 CHANGED
@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.createThumbVariants = exports.TrackText = exports.TrackBackground = exports.Track = exports.ThumbIconContainer = exports.ThumbIcon = exports.Thumb = exports.THUMB_ICON_VARIANTS = exports.Container = void 0;
7
- var _framerMotion = require("framer-motion");
7
+ var _react = require("motion/react");
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- const Container = exports.Container = (0, _styledComponents.default)(_framerMotion.motion.div)``;
11
- const Track = exports.Track = (0, _styledComponents.default)(_framerMotion.motion.div)`
10
+ const Container = exports.Container = (0, _styledComponents.default)(_react.motion.div)``;
11
+ const Track = exports.Track = (0, _styledComponents.default)(_react.motion.div)`
12
12
  user-select: none;
13
13
  position: relative;
14
14
  z-index: 3;
@@ -22,7 +22,7 @@ const Track = exports.Track = (0, _styledComponents.default)(_framerMotion.motio
22
22
  $backgroundColor
23
23
  }) => $backgroundColor};
24
24
  `;
25
- const TrackBackground = exports.TrackBackground = (0, _styledComponents.default)(_framerMotion.motion.div)`
25
+ const TrackBackground = exports.TrackBackground = (0, _styledComponents.default)(_react.motion.div)`
26
26
  position: absolute;
27
27
  width: 100%;
28
28
  height: 100%;
@@ -31,7 +31,7 @@ const TrackBackground = exports.TrackBackground = (0, _styledComponents.default)
31
31
  }) => $height / 2}px;
32
32
  z-index: 2;
33
33
  `;
34
- const Thumb = exports.Thumb = (0, _styledComponents.default)(_framerMotion.motion.div)`
34
+ const Thumb = exports.Thumb = (0, _styledComponents.default)(_react.motion.div)`
35
35
  height: ${({
36
36
  $size
37
37
  }) => $size}px;
@@ -52,7 +52,7 @@ const Thumb = exports.Thumb = (0, _styledComponents.default)(_framerMotion.motio
52
52
  z-index: 3;
53
53
  box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0;
54
54
  `;
55
- const TrackText = exports.TrackText = (0, _styledComponents.default)(_framerMotion.motion.div)`
55
+ const TrackText = exports.TrackText = (0, _styledComponents.default)(_react.motion.div)`
56
56
  position: absolute;
57
57
  line-height: 1.15;
58
58
  font-size: ${({
@@ -198,7 +198,7 @@ const ThumbIconContainer = exports.ThumbIconContainer = _styledComponents.defaul
198
198
  justify-content: center;
199
199
  align-items: center;
200
200
  `;
201
- const ThumbIcon = exports.ThumbIcon = (0, _styledComponents.default)(_framerMotion.motion.i).attrs(({
201
+ const ThumbIcon = exports.ThumbIcon = (0, _styledComponents.default)(_react.motion.i).attrs(({
202
202
  icon
203
203
  }) => ({
204
204
  className: `react-chayns-icon ${icon}`
package/lib/cjs/components/slider/Slider.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","Container","exports","styled","motion","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 'framer-motion';\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,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAkBhC,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAC,EAAE;AAQtC,MAAMC,KAAK,GAAAJ,OAAA,CAAAI,KAAA,GAAG,IAAAH,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAa;AACnD;AACA;AACA;AACA,cAAc,CAAC;EAAEE;AAAQ,CAAC,KAAKA,OAAO;AACtC,qBAAqB,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE,CAAC;AAEM,MAAMC,eAAe,GAAAP,OAAA,CAAAO,eAAA,GAAG,IAAAN,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AACtE;AACA;AACA;AACA,qBAAqB,CAAC;EAAEE;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD;AACA,CAAC;AAEM,MAAMG,KAAK,GAAAR,OAAA,CAAAQ,KAAA,GAAG,IAAAP,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAGpC;AACF,cAAc,CAAC;EAAEM;AAAM,CAAC,KAAKA,KAAK;AAClC,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA,YAAY,CAAC;EAAEA,KAAK;EAAEC;AAAa,CAAC,KAAK,CAACA,YAAY,GAAGD,KAAK,GAAG,CAAC,IAAI,CAAC;AACvE,cAAc,CAAC;EAAEA,KAAK;EAAEC;AAAa,CAAC,KAAK,CAACA,YAAY,GAAGD,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AAC7E;AACA;AACA;AACA,CAAC;AAEM,MAAME,SAAS,GAAAX,OAAA,CAAAW,SAAA,GAAG,IAAAV,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAA4C;AACtF;AACA;AACA,iBAAiB,CAAC;EAAES;AAAc,CAAC,KAAKA,aAAa;AACrD;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;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;AAEM,MAAMC,kBAAkB,GAAAd,OAAA,CAAAc,kBAAA,GAAGb,yBAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMY,SAAS,GAAAf,OAAA,CAAAe,SAAA,GAAG,IAAAd,yBAAM,EAACC,oBAAM,CAACc,CAAC,CAAC,CAACC,KAAK,CAAmB,CAAC;EAAEC;AAAK,CAAC,MAAM;EAC7EC,SAAS,EAAE,qBAAqBD,IAAI;AACxC,CAAC,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAME,mBAAmB,GAAGA,CAAC;EAChCC,SAAS;EACTC,UAAU;EACVC;AACqB,CAAC,MAA0D;EAChFC,IAAI,EAAE;IACFC,CAAC,EAAE,CAAC;IACJC,eAAe,EAAE,OAAO;IACxBC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAChC,CAAC;EACDC,SAAS,EAAE;IACPJ,CAAC,EAAE,CAACH,UAAU,GAAGD,SAAS,GAAGE,WAAW,IAAI,CAAC;IAC7CG,eAAe,EAAE,aAAa;IAC9BI,SAAS,EAAE,MAAM;IACjBH,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAChC,CAAC;EACDG,OAAO,EAAE;IACLC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAClBF,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAAC9B,OAAA,CAAAoB,mBAAA,GAAAA,mBAAA;AAEI,MAAMa,mBAGM,GAAAjC,OAAA,CAAAiC,mBAAA,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":[]}
1
+ {"version":3,"file":"Slider.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","Container","exports","styled","motion","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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAkBhC,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC,EAAE;AAQtC,MAAMC,KAAK,GAAAJ,OAAA,CAAAI,KAAA,GAAG,IAAAH,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAa;AACnD;AACA;AACA;AACA,cAAc,CAAC;EAAEE;AAAQ,CAAC,KAAKA,OAAO;AACtC,qBAAqB,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE,CAAC;AAEM,MAAMC,eAAe,GAAAP,OAAA,CAAAO,eAAA,GAAG,IAAAN,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAsB;AACtE;AACA;AACA;AACA,qBAAqB,CAAC;EAAEE;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD;AACA,CAAC;AAEM,MAAMG,KAAK,GAAAR,OAAA,CAAAQ,KAAA,GAAG,IAAAP,yBAAM,EAACC,aAAM,CAACC,GAAG,CAGpC;AACF,cAAc,CAAC;EAAEM;AAAM,CAAC,KAAKA,KAAK;AAClC,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA,YAAY,CAAC;EAAEA,KAAK;EAAEC;AAAa,CAAC,KAAK,CAACA,YAAY,GAAGD,KAAK,GAAG,CAAC,IAAI,CAAC;AACvE,cAAc,CAAC;EAAEA,KAAK;EAAEC;AAAa,CAAC,KAAK,CAACA,YAAY,GAAGD,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AAC7E;AACA;AACA;AACA,CAAC;AAEM,MAAME,SAAS,GAAAX,OAAA,CAAAW,SAAA,GAAG,IAAAV,yBAAM,EAACC,aAAM,CAACC,GAAG,CAA4C;AACtF;AACA;AACA,iBAAiB,CAAC;EAAES;AAAc,CAAC,KAAKA,aAAa;AACrD;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;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;AAEM,MAAMC,kBAAkB,GAAAd,OAAA,CAAAc,kBAAA,GAAGb,yBAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMY,SAAS,GAAAf,OAAA,CAAAe,SAAA,GAAG,IAAAd,yBAAM,EAACC,aAAM,CAACc,CAAC,CAAC,CAACC,KAAK,CAAmB,CAAC;EAAEC;AAAK,CAAC,MAAM;EAC7EC,SAAS,EAAE,qBAAqBD,IAAI;AACxC,CAAC,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAME,mBAAmB,GAAGA,CAAC;EAChCC,SAAS;EACTC,UAAU;EACVC;AACqB,CAAC,MAA0D;EAChFC,IAAI,EAAE;IACFC,CAAC,EAAE,CAAC;IACJC,eAAe,EAAE,OAAO;IACxBC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAChC,CAAC;EACDC,SAAS,EAAE;IACPJ,CAAC,EAAE,CAACH,UAAU,GAAGD,SAAS,GAAGE,WAAW,IAAI,CAAC;IAC7CG,eAAe,EAAE,aAAa;IAC9BI,SAAS,EAAE,MAAM;IACjBH,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAChC,CAAC;EACDG,OAAO,EAAE;IACLC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAClBF,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAAC9B,OAAA,CAAAoB,mBAAA,GAAAA,mBAAA;AAEI,MAAMa,mBAGM,GAAAjC,OAAA,CAAAiC,mBAAA,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":[]}
package/lib/cjs/hooks/design.js CHANGED
@@ -4,23 +4,23 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useThumbIcon = void 0;
7
- var _framerMotion = require("framer-motion");
8
- var _react = require("react");
7
+ var _react = require("motion/react");
8
+ var _react2 = require("react");
9
9
  const useThumbIcon = (x, iconColor) => {
10
- const [icon, setIcon] = (0, _react.useState)('fas fa-arrow-right');
11
- const opacity = (0, _framerMotion.useTransform)(x, [0, 5, 6, 200], [1, 0, 0, 1]);
12
- const styles = (0, _react.useMemo)(() => ({
10
+ const [icon, setIcon] = (0, _react2.useState)('fas fa-arrow-right');
11
+ const opacity = (0, _react.useTransform)(x, [0, 5, 6, 200], [1, 0, 0, 1]);
12
+ const styles = (0, _react2.useMemo)(() => ({
13
13
  opacity,
14
14
  color: iconColor
15
15
  }), [iconColor, opacity]);
16
- (0, _react.useEffect)(() => x.on('change', value => {
16
+ (0, _react2.useEffect)(() => x.on('change', value => {
17
17
  if (value > 5) {
18
18
  setIcon('fas fa-check');
19
19
  } else {
20
20
  setIcon('fas fa-arrow-right');
21
21
  }
22
22
  }), [x]);
23
- return (0, _react.useMemo)(() => ({
23
+ return (0, _react2.useMemo)(() => ({
24
24
  icon,
25
25
  styles
26
26
  }), [icon, styles]);
package/lib/cjs/hooks/design.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"design.js","names":["_framerMotion","require","_react","useThumbIcon","x","iconColor","icon","setIcon","useState","opacity","useTransform","styles","useMemo","color","useEffect","on","value","exports"],"sources":["../../../src/hooks/design.ts"],"sourcesContent":["import { MotionStyle, MotionValue, useTransform } from 'framer-motion';\nimport { useEffect, useMemo, useState } from 'react';\n\nexport type UseThumbIconRes = {\n icon: string;\n styles: MotionStyle;\n};\nexport const useThumbIcon = (x: MotionValue<number>, iconColor: string): UseThumbIconRes => {\n const [icon, setIcon] = useState('fas fa-arrow-right');\n const opacity = useTransform(x, [0, 5, 6, 200], [1, 0, 0, 1]);\n const styles = useMemo<MotionStyle>(\n () => ({\n opacity,\n color: iconColor,\n }),\n [iconColor, opacity],\n );\n\n useEffect(\n () =>\n x.on('change', (value) => {\n if (value > 5) {\n setIcon('fas fa-check');\n } else {\n setIcon('fas fa-arrow-right');\n }\n }),\n [x],\n );\n\n return useMemo(() => ({ icon, styles }), [icon, styles]);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAMO,MAAME,YAAY,GAAGA,CAACC,CAAsB,EAAEC,SAAiB,KAAsB;EACxF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAC,oBAAoB,CAAC;EACtD,MAAMC,OAAO,GAAG,IAAAC,0BAAY,EAACN,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7D,MAAMO,MAAM,GAAG,IAAAC,cAAO,EAClB,OAAO;IACHH,OAAO;IACPI,KAAK,EAAER;EACX,CAAC,CAAC,EACF,CAACA,SAAS,EAAEI,OAAO,CACvB,CAAC;EAED,IAAAK,gBAAS,EACL,MACIV,CAAC,CAACW,EAAE,CAAC,QAAQ,EAAGC,KAAK,IAAK;IACtB,IAAIA,KAAK,GAAG,CAAC,EAAE;MACXT,OAAO,CAAC,cAAc,CAAC;IAC3B,CAAC,MAAM;MACHA,OAAO,CAAC,oBAAoB,CAAC;IACjC;EACJ,CAAC,CAAC,EACN,CAACH,CAAC,CACN,CAAC;EAED,OAAO,IAAAQ,cAAO,EAAC,OAAO;IAAEN,IAAI;IAAEK;EAAO,CAAC,CAAC,EAAE,CAACL,IAAI,EAAEK,MAAM,CAAC,CAAC;AAC5D,CAAC;AAACM,OAAA,CAAAd,YAAA,GAAAA,YAAA","ignoreList":[]}
1
+ {"version":3,"file":"design.js","names":["_react","require","_react2","useThumbIcon","x","iconColor","icon","setIcon","useState","opacity","useTransform","styles","useMemo","color","useEffect","on","value","exports"],"sources":["../../../src/hooks/design.ts"],"sourcesContent":["import { MotionStyle, MotionValue, useTransform } from 'motion/react';\nimport { useEffect, useMemo, useState } from 'react';\n\nexport type UseThumbIconRes = {\n icon: string;\n styles: MotionStyle;\n};\nexport const useThumbIcon = (x: MotionValue<number>, iconColor: string): UseThumbIconRes => {\n const [icon, setIcon] = useState('fas fa-arrow-right');\n const opacity = useTransform(x, [0, 5, 6, 200], [1, 0, 0, 1]);\n const styles = useMemo<MotionStyle>(\n () => ({\n opacity,\n color: iconColor,\n }),\n [iconColor, opacity],\n );\n\n useEffect(\n () =>\n x.on('change', (value) => {\n if (value > 5) {\n setIcon('fas fa-check');\n } else {\n setIcon('fas fa-arrow-right');\n }\n }),\n [x],\n );\n\n return useMemo(() => ({ icon, styles }), [icon, styles]);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAMO,MAAME,YAAY,GAAGA,CAACC,CAAsB,EAAEC,SAAiB,KAAsB;EACxF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,gBAAQ,EAAC,oBAAoB,CAAC;EACtD,MAAMC,OAAO,GAAG,IAAAC,mBAAY,EAACN,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7D,MAAMO,MAAM,GAAG,IAAAC,eAAO,EAClB,OAAO;IACHH,OAAO;IACPI,KAAK,EAAER;EACX,CAAC,CAAC,EACF,CAACA,SAAS,EAAEI,OAAO,CACvB,CAAC;EAED,IAAAK,iBAAS,EACL,MACIV,CAAC,CAACW,EAAE,CAAC,QAAQ,EAAGC,KAAK,IAAK;IACtB,IAAIA,KAAK,GAAG,CAAC,EAAE;MACXT,OAAO,CAAC,cAAc,CAAC;IAC3B,CAAC,MAAM;MACHA,OAAO,CAAC,oBAAoB,CAAC;IACjC;EACJ,CAAC,CAAC,EACN,CAACH,CAAC,CACN,CAAC;EAED,OAAO,IAAAQ,eAAO,EAAC,OAAO;IAAEN,IAAI;IAAEK;EAAO,CAAC,CAAC,EAAE,CAACL,IAAI,EAAEK,MAAM,CAAC,CAAC;AAC5D,CAAC;AAACM,OAAA,CAAAd,YAAA,GAAAA,YAAA","ignoreList":[]}
package/lib/esm/components/slider/Slider.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { SmallWaitCursor } from '@chayns-components/core';
2
2
  import useSize from '@react-hook/size';
3
3
  import { invokeCall, vibrate } from 'chayns-api';
4
- import { useAnimation, useDragControls, useMotionValue, useTransform } from 'framer-motion';
4
+ import { useAnimation, useDragControls, useMotionValue, useTransform } from 'motion/react';
5
5
  import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
6
6
  import { useThumbIcon } from '../../hooks/design';
7
7
  import { sleep } from '../../utils/common';
package/lib/esm/components/slider/Slider.js.map CHANGED
@@ -1 +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 DragHandlers,\n} from 'framer-motion';\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<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":[]}
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 DragHandlers,\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<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/esm/components/slider/Slider.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { motion } from 'framer-motion';
1
+ import { motion } from 'motion/react';
2
2
  import styled from 'styled-components';
3
3
  export const Container = styled(motion.div)``;
4
4
  export const Track = styled(motion.div)`