Remove touch handlers, allow card switch from top

app/dynamic-pay-button/DynamicPayButton.tsx

@@ -9,7 +9,6 @@ import { Content } from './components/Content';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import {
   type DynamicBuyButtonContextProps,
-  type DynamicBuyButtonProps,
   type TabContentProps,
   TABS,
 } from './';
@@ -27,10 +26,7 @@ import { TabsList } from './components/TabsList';
  *
  * @author Joonas Sandell <[email protected]>
  */
-export const DynamicPayButton = ({
-  onCardTouchEnd,
-  onCardTouchStart,
-}: DynamicBuyButtonProps) => {
+export const DynamicPayButton = () => {
   const [ccv, setCcv] = useState<string>('');
   const [icon, setIcon] = useState(<CreditCard />);
   const [loading, setLoading] = useState(false);
@@ -112,8 +108,6 @@ export const DynamicPayButton = ({
               handleOpen,
               inputRef,
               loading,
-              onCardTouchEnd,
-              onCardTouchStart,
               open,
               overflow,
               selectedTab,

app/dynamic-pay-button/components/Card.tsx

@@ -21,8 +21,7 @@ export const Card = ({
   variant = 'visa',
   ...props
 }: CardProps) => {
-  const { onCardTouchEnd, onCardTouchStart, overflow, setOverflow } =
-    useDynamicPayButton();
+  const { overflow, setOverflow } = useDynamicPayButton();
   const [flip, setFlip] = useState(false);
   const x = useMotionValue(0);
   const scale = useTransform(x, [-150, 0, 150], [0.8, 1, 0.8]);
@@ -33,10 +32,12 @@ export const Card = ({
 
   const handleDragEndOffset: DragHandlers['onDragEnd'] = (e, info) => {
     if (front) {
-      if (info.offset.x < -100) {
-        onDragEndOffset && onDragEndOffset(e, info);
-      }
-      if (info.offset.x > 100 || info.offset.y > 50) {
+      if (
+        info.offset.x < -100 ||
+        info.offset.x > 100 ||
+        info.offset.y < -50 ||
+        info.offset.y > 50
+      ) {
         onDragEndOffset && onDragEndOffset(e, info);
       }
     }
@@ -57,8 +58,6 @@ export const Card = ({
       initial={false}
       onDragEnd={handleDragEndOffset}
       onDragStart={() => !overflow && setOverflow(true)}
-      onTouchEnd={e => onCardTouchEnd && onCardTouchEnd(e)}
-      onTouchStart={e => onCardTouchStart && onCardTouchStart(e)}
       style={{
         perspective: 1000,
         rotate,

app/dynamic-pay-button/types.ts

@@ -5,17 +5,11 @@ import {
   type PropsWithChildren,
   type RefObject,
   type SetStateAction,
-  type TouchEventHandler,
 } from 'react';
 import { type DragHandlers, type HTMLMotionProps } from 'framer-motion';
 import { type TabsContentProps } from '@radix-ui/react-tabs';
 
-export interface DynamicBuyButtonProps {
-  onCardTouchEnd?: TouchEventHandler<HTMLDivElement>;
-  onCardTouchStart?: TouchEventHandler<HTMLDivElement>;
-}
-
-export interface DynamicBuyButtonContextProps extends DynamicBuyButtonProps {
+export interface DynamicBuyButtonContextProps {
   ccv: string;
   handleOpen: () => void;
   inputRef: RefObject<HTMLInputElement>;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joonassandell/ui-lab",
   "description": "User interface laboratory by Joonas Sandell",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
   "author": {
     "name": "Joonas Sandell",