@chayns-components/swipeable-wrapper 5.0.0-beta.998 → 5.0.0

package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableWrapper.js","names":["vibrate","animate","useMotionValue","React","useCallback","useEffect","useMemo","useRef","useState","calcThreshold","SwipeableAction","SWIPEABLE_ACTION_WIDTH","StyledMotionSwipeableWrapper","StyledSwipeableWrapperContent","SwipeableWrapper","_ref","children","leftActions","rightActions","shouldUseOpacityAnimation","leftThreshold","setLeftThreshold","actionCount","length","direction","width","window","innerWidth","rightThreshold","setRightThreshold","swipeableWrapperRef","listItemXOffset","close","open","current","parentElement","offsetWidth","closeCallback","event","eventTarget","target","contains","document","addEventListener","removeEventListener","onChange","newValue","previous","getPrevious","hasCrossedLeftThreshold","hasCrossedRightThreshold","iOSFeedbackVibration","pattern","handlePan","_","info","currentXOffset","get","dampingFactor","offset","x","delta","Math","abs","set","handlePanEnd","action","state","leftActionElements","Array","from","reverse","map","item","index","createElement","activationThreshold","key","position","totalActionCount","rightActionElements","onPan","onPanEnd","ref","style","displayName"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.tsx"],"sourcesContent":["import { vibrate } from 'chayns-api';\nimport { animate, PanInfo, useMotionValue } from 'framer-motion';\nimport React, {\n    CSSProperties,\n    FC,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calcThreshold } from '../../utils/threshold';\nimport SwipeableAction, { SWIPEABLE_ACTION_WIDTH } from './swipeable-action/SwipeableAction';\nimport {\n    StyledMotionSwipeableWrapper,\n    StyledSwipeableWrapperContent,\n} from './SwipeableWrapper.styles';\n\nexport type SwipeableActionItem = {\n    action: VoidFunction;\n    backgroundColor: CSSProperties['backgroundColor'];\n    color: CSSProperties['color'];\n    text?: ReactNode;\n    icon: ReactNode;\n    key: string;\n};\n\nexport type SwipeableWrapperProps = {\n    /**\n     * The content of the Swipeable item.\n     */\n    children: ReactNode;\n    /**\n     * The left-side actions, ordered from the left to the right.\n     */\n    leftActions?: SwipeableActionItem[];\n    /**\n     * The right-side actions, ordered from left to the right.\n     */\n    rightActions?: SwipeableActionItem[];\n    /**\n     * Whether the opacity should be animated when swiping in the actions.\n     */\n    shouldUseOpacityAnimation?: boolean;\n};\n\nconst SwipeableWrapper: FC<SwipeableWrapperProps> = ({\n    children,\n    leftActions = [],\n    rightActions = [],\n    shouldUseOpacityAnimation,\n}) => {\n    const [leftThreshold, setLeftThreshold] = useState(\n        calcThreshold({\n            actionCount: leftActions.length,\n            direction: 'left',\n            width: window.innerWidth,\n        }),\n    );\n\n    const [rightThreshold, setRightThreshold] = useState(\n        calcThreshold({\n            actionCount: rightActions.length,\n            direction: 'right',\n            width: window.innerWidth,\n        }),\n    );\n\n    const swipeableWrapperRef = useRef<HTMLDivElement | null>(null);\n\n    const listItemXOffset = useMotionValue(0);\n\n    const close = useCallback(() => {\n        void animate(listItemXOffset, 0);\n    }, [listItemXOffset]);\n\n    const open = useCallback(\n        (direction: 'left' | 'right') => {\n            switch (direction) {\n                case 'left':\n                    void animate(listItemXOffset, SWIPEABLE_ACTION_WIDTH * leftActions.length);\n                    break;\n                case 'right':\n                    void animate(listItemXOffset, -SWIPEABLE_ACTION_WIDTH * rightActions.length);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    useEffect(() => {\n        const width = swipeableWrapperRef.current?.parentElement?.offsetWidth;\n\n        // This check was deliberately chosen because a width of 0 is also not permitted.\n        if (width) {\n            setLeftThreshold(\n                calcThreshold({\n                    actionCount: leftActions.length,\n                    direction: 'left',\n                    width,\n                }),\n            );\n\n            setRightThreshold(\n                calcThreshold({\n                    actionCount: rightActions.length,\n                    direction: 'right',\n                    width,\n                }),\n            );\n        }\n    }, [leftActions.length, rightActions.length]);\n\n    // Close an opened menu when anything outside it is tapped\n    useEffect(() => {\n        function closeCallback(event: MouseEvent | TouchEvent) {\n            const eventTarget = event.target;\n\n            // @ts-expect-error: Pretty sure that the event target is always a Node.\n            if (eventTarget && !swipeableWrapperRef.current?.contains(eventTarget)) {\n                close();\n            }\n        }\n\n        document.addEventListener('mousedown', closeCallback);\n        document.addEventListener('touchstart', closeCallback);\n\n        return () => {\n            document.removeEventListener('mousedown', closeCallback);\n            document.removeEventListener('touchstart', closeCallback);\n        };\n    }, [close]);\n\n    // Vibrate when the threshold is passed\n    useEffect(\n        () =>\n            listItemXOffset.onChange((newValue: number) => {\n                const previous = listItemXOffset.getPrevious();\n\n                if (!previous) {\n                    return;\n                }\n\n                const hasCrossedLeftThreshold =\n                    (previous < leftThreshold && newValue >= leftThreshold) ||\n                    (previous > leftThreshold && newValue <= leftThreshold);\n\n                const hasCrossedRightThreshold =\n                    (previous < rightThreshold && newValue >= rightThreshold) ||\n                    (previous > rightThreshold && newValue <= rightThreshold);\n\n                if (hasCrossedLeftThreshold || hasCrossedRightThreshold) {\n                    void vibrate({ iOSFeedbackVibration: 6, pattern: [150] });\n                }\n            }),\n        [leftThreshold, listItemXOffset, rightThreshold],\n    );\n\n    const handlePan = useCallback(\n        (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {\n            const currentXOffset = listItemXOffset.get();\n\n            const dampingFactor =\n                (info.offset.x > 0 && leftActions.length > 0) ||\n                (info.offset.x < 0 && rightActions.length > 0) ||\n                (currentXOffset > 0 && info.delta.x < 0) ||\n                (currentXOffset < 0 && info.delta.x > 0)\n                    ? 1\n                    : 0.75 / (Math.abs(info.offset.x) / 9);\n\n            if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {\n                listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    const handlePanEnd = useCallback(() => {\n        const offset = listItemXOffset.get();\n\n        if (offset > leftThreshold) {\n            leftActions[0]?.action();\n            close();\n        } else if (offset < rightThreshold) {\n            rightActions[rightActions.length - 1]?.action();\n            close();\n        } else {\n            let state: 'left-open' | 'right-open' | 'closed';\n\n            if (offset > 2) {\n                state = 'left-open';\n            } else if (offset < -2) {\n                state = 'right-open';\n            } else {\n                state = 'closed';\n            }\n\n            // eslint-disable-next-line default-case\n            switch (state) {\n                case 'left-open':\n                    if (offset < SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('left');\n                    }\n                    break;\n                case 'right-open':\n                    if (offset > -SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('right');\n                    }\n                    break;\n                case 'closed':\n                    if (offset > SWIPEABLE_ACTION_WIDTH) {\n                        open('left');\n                    } else if (offset < -SWIPEABLE_ACTION_WIDTH) {\n                        open('right');\n                    } else {\n                        close();\n                    }\n            }\n        }\n    }, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);\n\n    const leftActionElements = useMemo(\n        () =>\n            Array.from(leftActions)\n                .reverse()\n                .map((item, index) => (\n                    <SwipeableAction\n                        activationThreshold={leftThreshold}\n                        close={close}\n                        index={index}\n                        item={item}\n                        key={item.key}\n                        listItemXOffset={listItemXOffset}\n                        position=\"left\"\n                        shouldUseOpacityAnimation={shouldUseOpacityAnimation}\n                        totalActionCount={leftActions.length}\n                    />\n                )),\n        [close, leftActions, leftThreshold, listItemXOffset, shouldUseOpacityAnimation],\n    );\n\n    const rightActionElements = useMemo(\n        () =>\n            rightActions.map((item, index) => (\n                <SwipeableAction\n                    activationThreshold={rightThreshold}\n                    close={close}\n                    index={index}\n                    item={item}\n                    key={item.key}\n                    listItemXOffset={listItemXOffset}\n                    position=\"right\"\n                    shouldUseOpacityAnimation={shouldUseOpacityAnimation}\n                    totalActionCount={rightActions.length}\n                />\n            )),\n        [rightActions, rightThreshold, close, listItemXOffset, shouldUseOpacityAnimation],\n    );\n\n    return (\n        <StyledMotionSwipeableWrapper\n            onPan={handlePan}\n            onPanEnd={handlePanEnd}\n            ref={swipeableWrapperRef}\n            style={{ x: listItemXOffset }}\n        >\n            {leftActionElements}\n            <StyledSwipeableWrapperContent>{children}</StyledSwipeableWrapperContent>\n            {rightActionElements}\n        </StyledMotionSwipeableWrapper>\n    );\n};\n\nSwipeableWrapper.displayName = 'SwipeableWrapper';\n\nexport default SwipeableWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SwipeableWrapper.js","names":["vibrate","animate","useMotionValue","React","useCallback","useEffect","useMemo","useRef","useState","calcThreshold","SwipeableAction","SWIPEABLE_ACTION_WIDTH","StyledMotionSwipeableWrapper","StyledSwipeableWrapperContent","SwipeableWrapper","children","leftActions","rightActions","shouldUseOpacityAnimation","isDisabled","onSwipeEnd","onSwipeStart","leftThreshold","setLeftThreshold","actionCount","length","direction","width","window","innerWidth","rightThreshold","setRightThreshold","swipeableWrapperRef","isSwipingRef","listItemXOffset","close","open","current","parentElement","offsetWidth","closeCallback","event","eventTarget","target","contains","document","addEventListener","removeEventListener","on","newValue","previous","getPrevious","hasCrossedLeftThreshold","hasCrossedRightThreshold","iOSFeedbackVibration","pattern","handlePan","_","info","currentXOffset","get","dampingFactor","offset","x","delta","Math","abs","set","handlePanEnd","action","state","leftActionElements","Array","from","reverse","map","item","index","createElement","activationThreshold","key","position","totalActionCount","rightActionElements","onPan","undefined","onPanEnd","ref","style","displayName"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.tsx"],"sourcesContent":["import { vibrate } from 'chayns-api';\nimport { animate, PanInfo, useMotionValue } from 'motion/react';\nimport React, {\n    CSSProperties,\n    FC,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calcThreshold } from '../../utils/threshold';\nimport SwipeableAction, { SWIPEABLE_ACTION_WIDTH } from './swipeable-action/SwipeableAction';\nimport {\n    StyledMotionSwipeableWrapper,\n    StyledSwipeableWrapperContent,\n} from './SwipeableWrapper.styles';\n\nexport type SwipeableActionItem = {\n    action: VoidFunction;\n    backgroundColor: CSSProperties['backgroundColor'];\n    color: CSSProperties['color'];\n    text?: ReactNode;\n    icon: ReactNode;\n    key: string;\n};\n\nexport type SwipeableWrapperProps = {\n    /**\n     * The content of the Swipeable item.\n     */\n    children: ReactNode;\n    /**\n     * The left-side actions, ordered from the left to the right.\n     */\n    leftActions?: SwipeableActionItem[];\n    /**\n     * The right-side actions, ordered from left to the right.\n     */\n    rightActions?: SwipeableActionItem[];\n    /**\n     * Whether the opacity should be animated when swiping in the actions.\n     */\n    shouldUseOpacityAnimation?: boolean;\n    /**\n     * Whether the swipeable functionality is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Callback to be executed when the swiping is started.\n     */\n    onSwipeStart?: VoidFunction;\n    /**\n     * Callback to be executed when the swiping is ended.\n     */\n    onSwipeEnd?: VoidFunction;\n};\n\nconst SwipeableWrapper: FC<SwipeableWrapperProps> = ({\n    children,\n    leftActions = [],\n    rightActions = [],\n    shouldUseOpacityAnimation,\n    isDisabled = false,\n    onSwipeEnd,\n    onSwipeStart,\n}) => {\n    const [leftThreshold, setLeftThreshold] = useState(\n        calcThreshold({\n            actionCount: leftActions.length,\n            direction: 'left',\n            width: window.innerWidth,\n        }),\n    );\n\n    const [rightThreshold, setRightThreshold] = useState(\n        calcThreshold({\n            actionCount: rightActions.length,\n            direction: 'right',\n            width: window.innerWidth,\n        }),\n    );\n\n    const swipeableWrapperRef = useRef<HTMLDivElement | null>(null);\n    const isSwipingRef = useRef(false);\n\n    const listItemXOffset = useMotionValue(0);\n\n    const close = useCallback(() => {\n        void animate(listItemXOffset, 0);\n    }, [listItemXOffset]);\n\n    const open = useCallback(\n        (direction: 'left' | 'right') => {\n            switch (direction) {\n                case 'left':\n                    void animate(listItemXOffset, SWIPEABLE_ACTION_WIDTH * leftActions.length);\n                    break;\n                case 'right':\n                    void animate(listItemXOffset, -SWIPEABLE_ACTION_WIDTH * rightActions.length);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    useEffect(() => {\n        const width = swipeableWrapperRef.current?.parentElement?.offsetWidth;\n\n        // This check was deliberately chosen because a width of 0 is also not permitted.\n        if (width) {\n            setLeftThreshold(\n                calcThreshold({\n                    actionCount: leftActions.length,\n                    direction: 'left',\n                    width,\n                }),\n            );\n\n            setRightThreshold(\n                calcThreshold({\n                    actionCount: rightActions.length,\n                    direction: 'right',\n                    width,\n                }),\n            );\n        }\n    }, [leftActions.length, rightActions.length]);\n\n    // Close an opened menu when anything outside it is tapped\n    useEffect(() => {\n        function closeCallback(event: MouseEvent | TouchEvent) {\n            const eventTarget = event.target;\n\n            // @ts-expect-error: Pretty sure that the event target is always a Node.\n            if (eventTarget && !swipeableWrapperRef.current?.contains(eventTarget)) {\n                close();\n            }\n        }\n\n        document.addEventListener('mousedown', closeCallback);\n        document.addEventListener('touchstart', closeCallback);\n\n        return () => {\n            document.removeEventListener('mousedown', closeCallback);\n            document.removeEventListener('touchstart', closeCallback);\n        };\n    }, [close]);\n\n    // Vibrate when the threshold is passed\n    useEffect(\n        () =>\n            listItemXOffset.on('change', (newValue: number) => {\n                const previous = listItemXOffset.getPrevious();\n\n                if (!previous) {\n                    return;\n                }\n\n                const hasCrossedLeftThreshold =\n                    (previous < leftThreshold && newValue >= leftThreshold) ||\n                    (previous > leftThreshold && newValue <= leftThreshold);\n\n                const hasCrossedRightThreshold =\n                    (previous < rightThreshold && newValue >= rightThreshold) ||\n                    (previous > rightThreshold && newValue <= rightThreshold);\n\n                if (hasCrossedLeftThreshold || hasCrossedRightThreshold) {\n                    void vibrate({ iOSFeedbackVibration: 6, pattern: [150] });\n                }\n            }),\n        [leftThreshold, listItemXOffset, rightThreshold],\n    );\n\n    const handlePan = useCallback(\n        (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {\n            if (!isSwipingRef.current) {\n                isSwipingRef.current = true;\n\n                if (typeof onSwipeStart === 'function') {\n                    onSwipeStart();\n                }\n            }\n\n            const currentXOffset = listItemXOffset.get();\n\n            const dampingFactor =\n                (info.offset.x > 0 && leftActions.length > 0) ||\n                (info.offset.x < 0 && rightActions.length > 0) ||\n                (currentXOffset > 0 && info.delta.x < 0) ||\n                (currentXOffset < 0 && info.delta.x > 0)\n                    ? 1\n                    : 0.75 / (Math.abs(info.offset.x) / 9);\n\n            if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {\n                listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);\n            }\n        },\n        [leftActions.length, listItemXOffset, onSwipeStart, rightActions.length],\n    );\n\n    const handlePanEnd = useCallback(() => {\n        if (typeof onSwipeEnd === 'function') {\n            onSwipeEnd();\n        }\n\n        isSwipingRef.current = false;\n\n        const offset = listItemXOffset.get();\n\n        if (offset > leftThreshold) {\n            leftActions[0]?.action();\n            close();\n        } else if (offset < rightThreshold) {\n            rightActions[rightActions.length - 1]?.action();\n            close();\n        } else {\n            let state: 'left-open' | 'right-open' | 'closed';\n\n            if (offset > 2) {\n                state = 'left-open';\n            } else if (offset < -2) {\n                state = 'right-open';\n            } else {\n                state = 'closed';\n            }\n\n            // eslint-disable-next-line default-case\n            switch (state) {\n                case 'left-open':\n                    if (offset < SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('left');\n                    }\n                    break;\n                case 'right-open':\n                    if (offset > -SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('right');\n                    }\n                    break;\n                case 'closed':\n                    if (offset > SWIPEABLE_ACTION_WIDTH) {\n                        open('left');\n                    } else if (offset < -SWIPEABLE_ACTION_WIDTH) {\n                        open('right');\n                    } else {\n                        close();\n                    }\n            }\n        }\n    }, [\n        close,\n        leftActions,\n        leftThreshold,\n        listItemXOffset,\n        onSwipeEnd,\n        open,\n        rightActions,\n        rightThreshold,\n    ]);\n\n    const leftActionElements = useMemo(\n        () =>\n            Array.from(leftActions)\n                .reverse()\n                .map((item, index) => (\n                    <SwipeableAction\n                        activationThreshold={leftThreshold}\n                        close={close}\n                        index={index}\n                        item={item}\n                        key={item.key}\n                        listItemXOffset={listItemXOffset}\n                        position=\"left\"\n                        shouldUseOpacityAnimation={shouldUseOpacityAnimation}\n                        totalActionCount={leftActions.length}\n                    />\n                )),\n        [close, leftActions, leftThreshold, listItemXOffset, shouldUseOpacityAnimation],\n    );\n\n    const rightActionElements = useMemo(\n        () =>\n            rightActions.map((item, index) => (\n                <SwipeableAction\n                    activationThreshold={rightThreshold}\n                    close={close}\n                    index={index}\n                    item={item}\n                    key={item.key}\n                    listItemXOffset={listItemXOffset}\n                    position=\"right\"\n                    shouldUseOpacityAnimation={shouldUseOpacityAnimation}\n                    totalActionCount={rightActions.length}\n                />\n            )),\n        [rightActions, rightThreshold, close, listItemXOffset, shouldUseOpacityAnimation],\n    );\n\n    return (\n        <StyledMotionSwipeableWrapper\n            onPan={isDisabled ? undefined : handlePan}\n            onPanEnd={isDisabled ? undefined : handlePanEnd}\n            ref={swipeableWrapperRef}\n            style={{ x: listItemXOffset }}\n        >\n            {leftActionElements}\n            <StyledSwipeableWrapperContent>{children}</StyledSwipeableWrapperContent>\n            {rightActionElements}\n        </StyledMotionSwipeableWrapper>\n    );\n};\n\nSwipeableWrapper.displayName = 'SwipeableWrapper';\n\nexport default SwipeableWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.styles.js

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled from 'styled-components';
 export const StyledMotionSwipeableWrapper = styled(motion.div)`
     position: relative;

package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableWrapper.styles.js","names":["motion","styled","StyledMotionSwipeableWrapper","div","StyledSwipeableWrapperContent"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)<FramerMotionBugFix>`\n    position: relative;\n    touch-action: pan-y;\n    user-select: none;\n`;\n\nexport const StyledSwipeableWrapperContent = styled.div`\n    width: 100%;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,4BAA4B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAClF;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAG;AACvD;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SwipeableWrapper.styles.js","names":["motion","styled","StyledMotionSwipeableWrapper","div","StyledSwipeableWrapperContent"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)`\n    position: relative;\n    touch-action: pan-y;\n    user-select: none;\n`;\n\nexport const StyledSwipeableWrapperContent = styled.div`\n    width: 100%;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,4BAA4B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AAC9D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAG;AACvD;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.js

@@ -1,18 +1,17 @@
-import { useMotionValueEvent, useSpring, useTransform } from 'framer-motion';
+import { useMotionValueEvent, useSpring, useTransform } from 'motion/react';
 import React, { useEffect } from 'react';
 import { StyledMotionSwipeableAction, StyledSwipeableActionButton } from './SwipeableAction.styles';
 export const SWIPEABLE_ACTION_WIDTH = 72;
-const SwipeableAction = _ref => {
-  let {
-    activationThreshold,
-    close,
-    index,
-    item,
-    listItemXOffset,
-    position,
-    shouldUseOpacityAnimation,
-    totalActionCount
-  } = _ref;
+const SwipeableAction = ({
+  activationThreshold,
+  close,
+  index,
+  item,
+  listItemXOffset,
+  position,
+  shouldUseOpacityAnimation,
+  totalActionCount
+}) => {
   const [pointerEvents, setPointerEvents] = React.useState('none');
   const handleButtonClick = () => {
     item.action();
@@ -48,8 +47,7 @@ const SwipeableAction = _ref => {
    * Combines the two values above to create the correct X transform that has
    * to be applied to the action.
    */
-  const actionX = useTransform([actionOffset, actionOverlayOffset], _ref2 => {
-    let [x, y] = _ref2;
+  const actionX = useTransform([actionOffset, actionOverlayOffset], ([x, y]) => {
     if (position === 'left') {
       return Math.min((x ?? 0) + (y ?? 0), 0);
     }

package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableAction.js","names":["useMotionValueEvent","useSpring","useTransform","React","useEffect","StyledMotionSwipeableAction","StyledSwipeableActionButton","SWIPEABLE_ACTION_WIDTH","SwipeableAction","_ref","activationThreshold","close","index","item","listItemXOffset","position","shouldUseOpacityAnimation","totalActionCount","pointerEvents","setPointerEvents","useState","handleButtonClick","action","actionOffset","newValue","maxOffset","fractionalOffset","Math","max","min","actionOverlayOffset","bounce","actionX","_ref2","x","y","opacity","abs","value","isOuterMost","undefined","onChange","lastValue","getPrevious","set","createElement","$backgroundColor","backgroundColor","$position","style","onClick","$color","color","$width","icon","text","displayName"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.tsx"],"sourcesContent":["import { MotionValue, useMotionValueEvent, useSpring, useTransform } from 'framer-motion';\nimport React, { FC, useEffect } from 'react';\nimport type { SwipeableActionItem } from '../SwipeableWrapper';\nimport { StyledMotionSwipeableAction, StyledSwipeableActionButton } from './SwipeableAction.styles';\n\nexport const SWIPEABLE_ACTION_WIDTH = 72;\n\nexport type SwipeableActionProps = {\n    activationThreshold: number;\n    close: VoidFunction;\n    index: number;\n    item: SwipeableActionItem;\n    listItemXOffset: MotionValue<number>;\n    position: 'left' | 'right';\n    shouldUseOpacityAnimation?: boolean;\n    totalActionCount: number;\n};\n\nconst SwipeableAction: FC<SwipeableActionProps> = ({\n    activationThreshold,\n    close,\n    index,\n    item,\n    listItemXOffset,\n    position,\n    shouldUseOpacityAnimation,\n    totalActionCount,\n}) => {\n    const [pointerEvents, setPointerEvents] = React.useState<'auto' | 'none'>('none');\n\n    const handleButtonClick = () => {\n        item.action();\n        close();\n    };\n\n    /**\n     * By default, the action sticks to the content of the swipeable item. This\n     * makes it move outwards to reveal the inner items.\n     */\n    const actionOffset = useTransform(listItemXOffset, (newValue) => {\n        const maxOffset = SWIPEABLE_ACTION_WIDTH * index;\n        const fractionalOffset = (-newValue / totalActionCount) * index;\n\n        switch (position) {\n            case 'left':\n                return Math.max(-maxOffset, fractionalOffset);\n            case 'right':\n                return Math.min(maxOffset, fractionalOffset);\n            default:\n                return 0;\n        }\n    });\n\n    /**\n     * Brings the item in again if past the threshold. Only relevant for\n     * outermost items.\n     */\n    const actionOverlayOffset = useSpring(0, {\n        bounce: 0,\n    }) as MotionValue<number>;\n\n    /**\n     * Combines the two values above to create the correct X transform that has\n     * to be applied to the action.\n     */\n    const actionX = useTransform<number, number>([actionOffset, actionOverlayOffset], ([x, y]) => {\n        if (position === 'left') {\n            return Math.min((x ?? 0) + (y ?? 0), 0);\n        }\n\n        return Math.max((x ?? 0) + (y ?? 0), 0);\n    });\n\n    const opacity = useTransform(listItemXOffset, (x) =>\n        Math.max(0, Math.min(1, Math.abs(x) / 72)),\n    );\n\n    useMotionValueEvent(opacity, 'change', (value) => {\n        setPointerEvents(value < 0.5 ? 'none' : 'auto');\n    });\n\n    // Animate to the middle after passing threshold if outermost item\n    useEffect(() => {\n        const isOuterMost = index === totalActionCount - 1;\n\n        if (!isOuterMost) return undefined;\n\n        return listItemXOffset.onChange((newValue) => {\n            const lastValue = listItemXOffset.getPrevious();\n\n            if (!lastValue) {\n                return;\n            }\n\n            // eslint-disable-next-line default-case\n            switch (position) {\n                case 'left':\n                    if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * index);\n                    } else if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n                    break;\n                case 'right':\n                    if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * -1 * index);\n                    } else if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n            }\n        });\n    }, [\n        actionOverlayOffset,\n        activationThreshold,\n        index,\n        listItemXOffset,\n        position,\n        totalActionCount,\n    ]);\n\n    return (\n        <StyledMotionSwipeableAction\n            $backgroundColor={item.backgroundColor}\n            $position={position}\n            style={{ x: actionX, opacity: shouldUseOpacityAnimation ? opacity : 1 }}\n        >\n            <StyledSwipeableActionButton\n                onClick={handleButtonClick}\n                style={{ pointerEvents }}\n                $color={item.color}\n                $width={`${SWIPEABLE_ACTION_WIDTH}px`}\n            >\n                {item.icon}\n                {item.text}\n            </StyledSwipeableActionButton>\n        </StyledMotionSwipeableAction>\n    );\n};\n\nSwipeableAction.displayName = 'SwipeableAction';\n\nexport default SwipeableAction;\n"],"mappings":"AAAA,SAAsBA,mBAAmB,EAAEC,SAAS,EAAEC,YAAY,QAAQ,eAAe;AACzF,OAAOC,KAAK,IAAQC,SAAS,QAAQ,OAAO;AAE5C,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,0BAA0B;AAEnG,OAAO,MAAMC,sBAAsB,GAAG,EAAE;AAaxC,MAAMC,eAAyC,GAAGC,IAAA,IAS5C;EAAA,IAT6C;IAC/CC,mBAAmB;IACnBC,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,yBAAyB;IACzBC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,aAAa,EAAEC,gBAAgB,CAAC,GAAGhB,KAAK,CAACiB,QAAQ,CAAkB,MAAM,CAAC;EAEjF,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC5BR,IAAI,CAACS,MAAM,CAAC,CAAC;IACbX,KAAK,CAAC,CAAC;EACX,CAAC;;EAED;AACJ;AACA;AACA;EACI,MAAMY,YAAY,GAAGrB,YAAY,CAACY,eAAe,EAAGU,QAAQ,IAAK;IAC7D,MAAMC,SAAS,GAAGlB,sBAAsB,GAAGK,KAAK;IAChD,MAAMc,gBAAgB,GAAI,CAACF,QAAQ,GAAGP,gBAAgB,GAAIL,KAAK;IAE/D,QAAQG,QAAQ;MACZ,KAAK,MAAM;QACP,OAAOY,IAAI,CAACC,GAAG,CAAC,CAACH,SAAS,EAAEC,gBAAgB,CAAC;MACjD,KAAK,OAAO;QACR,OAAOC,IAAI,CAACE,GAAG,CAACJ,SAAS,EAAEC,gBAAgB,CAAC;MAChD;QACI,OAAO,CAAC;IAChB;EACJ,CAAC,CAAC;;EAEF;AACJ;AACA;AACA;EACI,MAAMI,mBAAmB,GAAG7B,SAAS,CAAC,CAAC,EAAE;IACrC8B,MAAM,EAAE;EACZ,CAAC,CAAwB;;EAEzB;AACJ;AACA;AACA;EACI,MAAMC,OAAO,GAAG9B,YAAY,CAAiB,CAACqB,YAAY,EAAEO,mBAAmB,CAAC,EAAEG,KAAA,IAAY;IAAA,IAAX,CAACC,CAAC,EAAEC,CAAC,CAAC,GAAAF,KAAA;IACrF,IAAIlB,QAAQ,KAAK,MAAM,EAAE;MACrB,OAAOY,IAAI,CAACE,GAAG,CAAC,CAACK,CAAC,IAAI,CAAC,KAAKC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;IAC3C;IAEA,OAAOR,IAAI,CAACC,GAAG,CAAC,CAACM,CAAC,IAAI,CAAC,KAAKC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;EAC3C,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAGlC,YAAY,CAACY,eAAe,EAAGoB,CAAC,IAC5CP,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEF,IAAI,CAACU,GAAG,CAACH,CAAC,CAAC,GAAG,EAAE,CAAC,CAC7C,CAAC;EAEDlC,mBAAmB,CAACoC,OAAO,EAAE,QAAQ,EAAGE,KAAK,IAAK;IAC9CnB,gBAAgB,CAACmB,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;EACnD,CAAC,CAAC;;EAEF;EACAlC,SAAS,CAAC,MAAM;IACZ,MAAMmC,WAAW,GAAG3B,KAAK,KAAKK,gBAAgB,GAAG,CAAC;IAElD,IAAI,CAACsB,WAAW,EAAE,OAAOC,SAAS;IAElC,OAAO1B,eAAe,CAAC2B,QAAQ,CAAEjB,QAAQ,IAAK;MAC1C,MAAMkB,SAAS,GAAG5B,eAAe,CAAC6B,WAAW,CAAC,CAAC;MAE/C,IAAI,CAACD,SAAS,EAAE;QACZ;MACJ;;MAEA;MACA,QAAQ3B,QAAQ;QACZ,KAAK,MAAM;UACP,IAAIS,QAAQ,GAAGd,mBAAmB,IAAIgC,SAAS,IAAIhC,mBAAmB,EAAE;YACpEoB,mBAAmB,CAACc,GAAG,CAACrC,sBAAsB,GAAGK,KAAK,CAAC;UAC3D,CAAC,MAAM,IAAIY,QAAQ,GAAGd,mBAAmB,IAAIgC,SAAS,IAAIhC,mBAAmB,EAAE;YAC3EoB,mBAAmB,CAACc,GAAG,CAAC,CAAC,CAAC;UAC9B;UACA;QACJ,KAAK,OAAO;UACR,IAAIpB,QAAQ,GAAGd,mBAAmB,IAAIgC,SAAS,IAAIhC,mBAAmB,EAAE;YACpEoB,mBAAmB,CAACc,GAAG,CAACrC,sBAAsB,GAAG,CAAC,CAAC,GAAGK,KAAK,CAAC;UAChE,CAAC,MAAM,IAAIY,QAAQ,GAAGd,mBAAmB,IAAIgC,SAAS,IAAIhC,mBAAmB,EAAE;YAC3EoB,mBAAmB,CAACc,GAAG,CAAC,CAAC,CAAC;UAC9B;MACR;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CACCd,mBAAmB,EACnBpB,mBAAmB,EACnBE,KAAK,EACLE,eAAe,EACfC,QAAQ,EACRE,gBAAgB,CACnB,CAAC;EAEF,oBACId,KAAA,CAAA0C,aAAA,CAACxC,2BAA2B;IACxByC,gBAAgB,EAAEjC,IAAI,CAACkC,eAAgB;IACvCC,SAAS,EAAEjC,QAAS;IACpBkC,KAAK,EAAE;MAAEf,CAAC,EAAEF,OAAO;MAAEI,OAAO,EAAEpB,yBAAyB,GAAGoB,OAAO,GAAG;IAAE;EAAE,gBAExEjC,KAAA,CAAA0C,aAAA,CAACvC,2BAA2B;IACxB4C,OAAO,EAAE7B,iBAAkB;IAC3B4B,KAAK,EAAE;MAAE/B;IAAc,CAAE;IACzBiC,MAAM,EAAEtC,IAAI,CAACuC,KAAM;IACnBC,MAAM,EAAE,GAAG9C,sBAAsB;EAAK,GAErCM,IAAI,CAACyC,IAAI,EACTzC,IAAI,CAAC0C,IACmB,CACJ,CAAC;AAEtC,CAAC;AAED/C,eAAe,CAACgD,WAAW,GAAG,iBAAiB;AAE/C,eAAehD,eAAe","ignoreList":[]}
+{"version":3,"file":"SwipeableAction.js","names":["useMotionValueEvent","useSpring","useTransform","React","useEffect","StyledMotionSwipeableAction","StyledSwipeableActionButton","SWIPEABLE_ACTION_WIDTH","SwipeableAction","activationThreshold","close","index","item","listItemXOffset","position","shouldUseOpacityAnimation","totalActionCount","pointerEvents","setPointerEvents","useState","handleButtonClick","action","actionOffset","newValue","maxOffset","fractionalOffset","Math","max","min","actionOverlayOffset","bounce","actionX","x","y","opacity","abs","value","isOuterMost","undefined","onChange","lastValue","getPrevious","set","createElement","$backgroundColor","backgroundColor","$position","style","onClick","$color","color","$width","icon","text","displayName"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.tsx"],"sourcesContent":["import { MotionValue, useMotionValueEvent, useSpring, useTransform } from 'motion/react';\nimport React, { FC, useEffect } from 'react';\nimport type { SwipeableActionItem } from '../SwipeableWrapper';\nimport { StyledMotionSwipeableAction, StyledSwipeableActionButton } from './SwipeableAction.styles';\n\nexport const SWIPEABLE_ACTION_WIDTH = 72;\n\nexport type SwipeableActionProps = {\n    activationThreshold: number;\n    close: VoidFunction;\n    index: number;\n    item: SwipeableActionItem;\n    listItemXOffset: MotionValue<number>;\n    position: 'left' | 'right';\n    shouldUseOpacityAnimation?: boolean;\n    totalActionCount: number;\n};\n\nconst SwipeableAction: FC<SwipeableActionProps> = ({\n    activationThreshold,\n    close,\n    index,\n    item,\n    listItemXOffset,\n    position,\n    shouldUseOpacityAnimation,\n    totalActionCount,\n}) => {\n    const [pointerEvents, setPointerEvents] = React.useState<'auto' | 'none'>('none');\n\n    const handleButtonClick = () => {\n        item.action();\n        close();\n    };\n\n    /**\n     * By default, the action sticks to the content of the swipeable item. This\n     * makes it move outwards to reveal the inner items.\n     */\n    const actionOffset = useTransform(listItemXOffset, (newValue) => {\n        const maxOffset = SWIPEABLE_ACTION_WIDTH * index;\n        const fractionalOffset = (-newValue / totalActionCount) * index;\n\n        switch (position) {\n            case 'left':\n                return Math.max(-maxOffset, fractionalOffset);\n            case 'right':\n                return Math.min(maxOffset, fractionalOffset);\n            default:\n                return 0;\n        }\n    });\n\n    /**\n     * Brings the item in again if past the threshold. Only relevant for\n     * outermost items.\n     */\n    const actionOverlayOffset = useSpring(0, {\n        bounce: 0,\n    }) as MotionValue<number>;\n\n    /**\n     * Combines the two values above to create the correct X transform that has\n     * to be applied to the action.\n     */\n    const actionX = useTransform<number, number>([actionOffset, actionOverlayOffset], ([x, y]) => {\n        if (position === 'left') {\n            return Math.min((x ?? 0) + (y ?? 0), 0);\n        }\n\n        return Math.max((x ?? 0) + (y ?? 0), 0);\n    });\n\n    const opacity = useTransform(listItemXOffset, (x) =>\n        Math.max(0, Math.min(1, Math.abs(x) / 72)),\n    );\n\n    useMotionValueEvent(opacity, 'change', (value) => {\n        setPointerEvents(value < 0.5 ? 'none' : 'auto');\n    });\n\n    // Animate to the middle after passing threshold if outermost item\n    useEffect(() => {\n        const isOuterMost = index === totalActionCount - 1;\n\n        if (!isOuterMost) return undefined;\n\n        return listItemXOffset.onChange((newValue) => {\n            const lastValue = listItemXOffset.getPrevious();\n\n            if (!lastValue) {\n                return;\n            }\n\n            // eslint-disable-next-line default-case\n            switch (position) {\n                case 'left':\n                    if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * index);\n                    } else if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n                    break;\n                case 'right':\n                    if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * -1 * index);\n                    } else if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n            }\n        });\n    }, [\n        actionOverlayOffset,\n        activationThreshold,\n        index,\n        listItemXOffset,\n        position,\n        totalActionCount,\n    ]);\n\n    return (\n        <StyledMotionSwipeableAction\n            $backgroundColor={item.backgroundColor}\n            $position={position}\n            style={{ x: actionX, opacity: shouldUseOpacityAnimation ? opacity : 1 }}\n        >\n            <StyledSwipeableActionButton\n                onClick={handleButtonClick}\n                style={{ pointerEvents }}\n                $color={item.color}\n                $width={`${SWIPEABLE_ACTION_WIDTH}px`}\n            >\n                {item.icon}\n                {item.text}\n            </StyledSwipeableActionButton>\n        </StyledMotionSwipeableAction>\n    );\n};\n\nSwipeableAction.displayName = 'SwipeableAction';\n\nexport default SwipeableAction;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js

@@ -1,22 +1,18 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 export const StyledMotionSwipeableAction = styled(motion.div)`
-    background-color: ${_ref => {
-  let {
-    $backgroundColor
-  } = _ref;
-  return $backgroundColor;
-}};
+    background-color: ${({
+  $backgroundColor
+}) => $backgroundColor};
     display: flex;
     height: 100%;
     position: absolute;
     top: 0;
     width: 200vw;
 
-    ${_ref2 => {
-  let {
-    $position
-  } = _ref2;
+    ${({
+  $position
+}) => {
   if ($position === 'left') {
     return css`
                 justify-content: flex-end;
@@ -34,12 +30,9 @@ export const StyledSwipeableActionButton = styled.button`
     appearance: none;
     background: none;
     box-shadow: none;
-    color: ${_ref3 => {
-  let {
-    $color
-  } = _ref3;
-  return $color;
-}};
+    color: ${({
+  $color
+}) => $color};
     display: flex;
     flex-direction: column;
     font-size: 88%;
@@ -48,11 +41,8 @@ export const StyledSwipeableActionButton = styled.button`
     justify-content: center;
     margin: 0;
     padding: 0;
-    width: ${_ref4 => {
-  let {
-    $width
-  } = _ref4;
-  return $width;
-}};
+    width: ${({
+  $width
+}) => $width};
 `;
 //# sourceMappingURL=SwipeableAction.styles.js.map

package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableAction.styles.js","names":["motion","styled","css","StyledMotionSwipeableAction","div","_ref","$backgroundColor","_ref2","$position","StyledSwipeableActionButton","button","_ref3","$color","_ref4","$width"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\ntype StyledSwipeableActionProps = {\n    $position: 'left' | 'right';\n    $backgroundColor: CSSProperties['backgroundColor'];\n};\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n    display: flex;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 200vw;\n\n    ${({ $position }) => {\n        if ($position === 'left') {\n            return css`\n                justify-content: flex-end;\n                right: 100%;\n            `;\n        }\n        return css`\n            justify-content: flex-start;\n            left: 100%;\n        `;\n    }}\n`;\n\ntype StyledSwipeableActionButtonsProps = {\n    $width: CSSProperties['width'];\n    $color: CSSProperties['color'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n    align-items: center;\n    appearance: none;\n    background: none;\n    box-shadow: none;\n    color: ${({ $color }) => $color};\n    display: flex;\n    flex-direction: column;\n    font-size: 88%;\n    gap: 4px;\n    height: 100%;\n    justify-content: center;\n    margin: 0;\n    padding: 0;\n    width: ${({ $width }) => $width};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,2BAA2B,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACzF,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAiB,CAAC,GAAAD,IAAA;EAAA,OAAKC,gBAAgB;AAAA;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,IAAIC,SAAS,KAAK,MAAM,EAAE;IACtB,OAAON,GAAG;AACtB;AACA;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAOD,OAAO,MAAMO,2BAA2B,GAAGR,MAAM,CAACS,MAAyC;AAC3F;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC,CAAC","ignoreList":[]}
+{"version":3,"file":"SwipeableAction.styles.js","names":["motion","styled","css","StyledMotionSwipeableAction","div","$backgroundColor","$position","StyledSwipeableActionButton","button","$color","$width"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\ntype StyledSwipeableActionProps = {\n    $position: 'left' | 'right';\n    $backgroundColor: CSSProperties['backgroundColor'];\n};\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n    display: flex;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 200vw;\n\n    ${({ $position }) => {\n        if ($position === 'left') {\n            return css`\n                justify-content: flex-end;\n                right: 100%;\n            `;\n        }\n        return css`\n            justify-content: flex-start;\n            left: 100%;\n        `;\n    }}\n`;\n\ntype StyledSwipeableActionButtonsProps = {\n    $width: CSSProperties['width'];\n    $color: CSSProperties['color'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n    align-items: center;\n    appearance: none;\n    background: none;\n    box-shadow: none;\n    color: ${({ $color }) => $color};\n    display: flex;\n    flex-direction: column;\n    font-size: 88%;\n    gap: 4px;\n    height: 100%;\n    justify-content: center;\n    margin: 0;\n    padding: 0;\n    width: ${({ $width }) => $width};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,2BAA2B,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACzF,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAU,CAAC,KAAK;EACjB,IAAIA,SAAS,KAAK,MAAM,EAAE;IACtB,OAAOJ,GAAG;AACtB;AACA;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAOD,OAAO,MAAMK,2BAA2B,GAAGN,MAAM,CAACO,MAAyC;AAC3F;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC,CAAC","ignoreList":[]}

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","SwipeableWrapper"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as SwipeableWrapper } from './components/swipeable-wrapper/SwipeableWrapper';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,iDAAiD","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","SwipeableWrapper"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as SwipeableWrapper } from './components/swipeable-wrapper/SwipeableWrapper';\n\nexport type { SwipeableActionItem } from './components/swipeable-wrapper/SwipeableWrapper';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,iDAAiD","ignoreList":[]}

package/lib/esm/utils/threshold.js

@@ -1,10 +1,7 @@
 import { SWIPEABLE_ACTION_WIDTH } from '../components/swipeable-wrapper/swipeable-action/SwipeableAction';
-export const calcThreshold = _ref => {
-  let {
-    actionCount,
-    direction,
-    width
-  } = _ref;
-  return Math.max(width / 2, SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);
-};
+export const calcThreshold = ({
+  actionCount,
+  direction,
+  width
+}) => Math.max(width / 2, SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);
 //# sourceMappingURL=threshold.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"threshold.js","names":["SWIPEABLE_ACTION_WIDTH","calcThreshold","_ref","actionCount","direction","width","Math","max"],"sources":["../../../src/utils/threshold.ts"],"sourcesContent":["import { SWIPEABLE_ACTION_WIDTH } from '../components/swipeable-wrapper/swipeable-action/SwipeableAction';\n\ninterface CalcThresholdOptions {\n    actionCount: number;\n    direction: 'left' | 'right';\n    width: number;\n}\n\nexport const calcThreshold = ({ actionCount, direction, width }: CalcThresholdOptions) =>\n    Math.max(width / 2, SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);\n"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,kEAAkE;AAQzG,OAAO,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,SAAS;IAAEC;EAA4B,CAAC,GAAAH,IAAA;EAAA,OACjFI,IAAI,CAACC,GAAG,CAACF,KAAK,GAAG,CAAC,EAAEL,sBAAsB,GAAGG,WAAW,CAAC,IAAIC,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAAA","ignoreList":[]}
+{"version":3,"file":"threshold.js","names":["SWIPEABLE_ACTION_WIDTH","calcThreshold","actionCount","direction","width","Math","max"],"sources":["../../../src/utils/threshold.ts"],"sourcesContent":["import { SWIPEABLE_ACTION_WIDTH } from '../components/swipeable-wrapper/swipeable-action/SwipeableAction';\n\ninterface CalcThresholdOptions {\n    actionCount: number;\n    direction: 'left' | 'right';\n    width: number;\n}\n\nexport const calcThreshold = ({ actionCount, direction, width }: CalcThresholdOptions) =>\n    Math.max(width / 2, SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);\n"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,kEAAkE;AAQzG,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;EAAEC;AAA4B,CAAC,KACjFC,IAAI,CAACC,GAAG,CAACF,KAAK,GAAG,CAAC,EAAEJ,sBAAsB,GAAGE,WAAW,CAAC,IAAIC,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/types/components/swipeable-wrapper/SwipeableWrapper.d.ts

@@ -24,6 +24,18 @@ export type SwipeableWrapperProps = {
      * Whether the opacity should be animated when swiping in the actions.
      */
     shouldUseOpacityAnimation?: boolean;
+    /**
+     * Whether the swipeable functionality is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Callback to be executed when the swiping is started.
+     */
+    onSwipeStart?: VoidFunction;
+    /**
+     * Callback to be executed when the swiping is ended.
+     */
+    onSwipeEnd?: VoidFunction;
 };
 declare const SwipeableWrapper: FC<SwipeableWrapperProps>;
 export default SwipeableWrapper;

package/lib/types/components/swipeable-wrapper/SwipeableWrapper.styles.d.ts

@@ -1,267 +1,4 @@
-export declare const StyledMotionSwipeableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
-    title?: string | undefined;
-    slot?: string | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoCapitalize?: (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined;
-    autoFocus?: boolean | undefined;
-    className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
-    role?: import("react").AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    color?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "off" | "on" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    is?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const StyledMotionSwipeableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
-}>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledSwipeableWrapperContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/swipeable-wrapper/swipeable-action/SwipeableAction.d.ts

@@ -1,4 +1,4 @@
-import { MotionValue } from 'framer-motion';
+import { MotionValue } from 'motion/react';
 import { FC } from 'react';
 import type { SwipeableActionItem } from '../SwipeableWrapper';
 export declare const SWIPEABLE_ACTION_WIDTH = 72;