swipeon-react 0.0.1-alpha.2

package/LICENSE

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

package/README.md

@@ -0,0 +1,332 @@
+# 🎴 SwipeOn React
+
+[![npm version](https://img.shields.io/npm/v/swipeon-react.svg)](https://www.npmjs.com/package/swipeon-react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+A high-performance, zero-dependency React swipe card library with smooth animations and multi-directional swipe support. Perfect for building Tinder-like interfaces, interactive card stacks, and gesture-based UI components.
+
+## ✨ Features
+
+- 🚀 **High Performance**: Optimized with `requestAnimationFrame` and hardware-accelerated transforms
+- 🎯 **4-Way Swipe**: Support for left, right, up, and down swipes
+- 📱 **Touch & Mouse**: Works seamlessly on both desktop and mobile devices
+- 🎨 **Smooth Animations**: Butter-smooth 60fps animations with spring-back effects
+- 💪 **TypeScript**: Full TypeScript support with comprehensive type definitions
+- 🪶 **Zero Dependencies**: No external dependencies except React
+- ⚙️ **Highly Configurable**: Customizable thresholds, velocities, and animations
+- 🎭 **Rotation Effects**: Optional card rotation during drag for realistic feel
+
+## 📦 Installation
+
+```bash
+npm install swipeon-react
+```
+
+```bash
+yarn add swipeon-react
+```
+
+```bash
+pnpm add swipeon-react
+```
+
+## 🚀 Quick Start
+
+```tsx
+import React from 'react';
+import { SwipeCard } from 'swipeon-react';
+
+function App() {
+  return (
+    <SwipeCard
+      onSwipeLeft={() => console.log('Swiped left! 👈')}
+      onSwipeRight={() => console.log('Swiped right! 👉')}
+      onSwipeUp={() => console.log('Swiped up! 👆')}
+      onSwipeDown={() => console.log('Swiped down! 👇')}
+    >
+      <div style={{ padding: '40px', background: '#fff', borderRadius: '10px' }}>
+        <h2>Swipe me in any direction!</h2>
+        <p>Works with mouse and touch</p>
+      </div>
+    </SwipeCard>
+  );
+}
+
+export default App;
+```
+
+## 📖 API Reference
+
+### SwipeCard Component
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | **required** | Content to render inside the card |
+| `onSwipeLeft` | `() => void` | `undefined` | Callback triggered when card is swiped left |
+| `onSwipeRight` | `() => void` | `undefined` | Callback triggered when card is swiped right |
+| `onSwipeUp` | `() => void` | `undefined` | Callback triggered when card is swiped up |
+| `onSwipeDown` | `() => void` | `undefined` | Callback triggered when card is swiped down |
+| `onSwipeStart` | `() => void` | `undefined` | Callback triggered when swipe starts |
+| `onSwipeEnd` | `() => void` | `undefined` | Callback triggered when swipe ends |
+| `threshold` | `number` | `100` | Minimum distance (px) required to trigger a swipe |
+| `velocityThreshold` | `number` | `0.5` | Minimum velocity required to trigger a swipe |
+| `maxRotation` | `number` | `15` | Maximum rotation angle (degrees) during drag |
+| `exitDuration` | `number` | `300` | Duration (ms) of the exit animation |
+| `returnDuration` | `number` | `200` | Duration (ms) of the spring-back animation |
+| `enableRotation` | `boolean` | `true` | Enable/disable rotation effect during drag |
+| `className` | `string` | `''` | Additional CSS class name |
+| `style` | `CSSProperties` | `{}` | Additional inline styles |
+
+### useSwipe Hook
+
+For advanced use cases, you can use the `useSwipe` hook directly:
+
+```tsx
+import { useSwipe } from 'swipeon-react';
+
+function CustomCard() {
+  const { ref, transform, opacity, transition, isDragging } = useSwipe(
+    {
+      onSwipeLeft: () => console.log('Left!'),
+      onSwipeRight: () => console.log('Right!'),
+    },
+    {
+      threshold: 100,
+      velocityThreshold: 0.5,
+    }
+  );
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        transform,
+        opacity,
+        transition,
+        cursor: isDragging ? 'grabbing' : 'grab',
+      }}
+    >
+      Your content here
+    </div>
+  );
+}
+```
+
+#### Hook Return Values
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `ref` | `RefObject<HTMLDivElement>` | Ref to attach to your swipeable element |
+| `transform` | `string` | CSS transform value for positioning/rotation |
+| `opacity` | `number` | Opacity value based on drag distance |
+| `transition` | `string` | CSS transition value for animations |
+| `isDragging` | `boolean` | Whether the element is currently being dragged |
+
+## 💡 Examples
+
+### Card Stack (Tinder-like)
+
+```tsx
+import React, { useState } from 'react';
+import { SwipeCard } from 'swipeon-react';
+
+const cards = [
+  { id: 1, name: 'Card 1', image: '/card1.jpg' },
+  { id: 2, name: 'Card 2', image: '/card2.jpg' },
+  { id: 3, name: 'Card 3', image: '/card3.jpg' },
+];
+
+function CardStack() {
+  const [deck, setDeck] = useState(cards);
+
+  const handleRemove = () => {
+    setTimeout(() => {
+      setDeck((prev) => prev.slice(0, -1));
+    }, 300);
+  };
+
+  if (deck.length === 0) {
+    return <div>No more cards!</div>;
+  }
+
+  return (
+    <div style={{ position: 'relative', width: '300px', height: '400px' }}>
+      {deck.map((card, index) => (
+        <SwipeCard
+          key={card.id}
+          onSwipeLeft={handleRemove}
+          onSwipeRight={handleRemove}
+          onSwipeUp={handleRemove}
+          onSwipeDown={handleRemove}
+          style={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            zIndex: deck.length - index,
+          }}
+        >
+          <div style={{
+            width: '100%',
+            height: '100%',
+            background: '#fff',
+            borderRadius: '10px',
+            boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
+          }}>
+            <img src={card.image} alt={card.name} style={{ width: '100%' }} />
+            <h3>{card.name}</h3>
+          </div>
+        </SwipeCard>
+      ))}
+    </div>
+  );
+}
+```
+
+### Custom Thresholds
+
+```tsx
+<SwipeCard
+  threshold={150}           // Require 150px movement
+  velocityThreshold={0.8}   // Require faster swipes
+  maxRotation={25}          // More dramatic rotation
+  exitDuration={500}        // Slower exit animation
+>
+  <YourContent />
+</SwipeCard>
+```
+
+### Disable Rotation
+
+```tsx
+<SwipeCard
+  enableRotation={false}
+  onSwipeLeft={() => console.log('Left')}
+  onSwipeRight={() => console.log('Right')}
+>
+  <YourContent />
+</SwipeCard>
+```
+
+### Only Horizontal Swipes
+
+```tsx
+<SwipeCard
+  onSwipeLeft={() => handleSwipe('left')}
+  onSwipeRight={() => handleSwipe('right')}
+  // Don't provide onSwipeUp/onSwipeDown
+>
+  <YourContent />
+</SwipeCard>
+```
+
+## 🎨 Styling
+
+The component applies minimal styling by default. You can customize appearance using:
+
+1. **CSS Classes**:
+```tsx
+<SwipeCard className="my-custom-card">
+  <YourContent />
+</SwipeCard>
+```
+
+2. **Inline Styles**:
+```tsx
+<SwipeCard 
+  style={{ 
+    borderRadius: '20px',
+    boxShadow: '0 10px 40px rgba(0,0,0,0.2)'
+  }}
+>
+  <YourContent />
+</SwipeCard>
+```
+
+3. **Styled Components / Emotion**:
+```tsx
+const StyledSwipeCard = styled(SwipeCard)`
+  border-radius: 20px;
+  background: white;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+`;
+```
+
+## ⚡ Performance Tips
+
+1. **Use `key` prop**: When rendering multiple cards, always provide a unique `key`
+2. **Optimize callbacks**: Use `useCallback` for swipe handlers to prevent unnecessary re-renders
+3. **Limit card stack**: Don't render more than 3-5 cards in a stack
+4. **Optimize images**: Use appropriately sized images to improve performance
+5. **CSS containment**: The library uses `will-change` and `transform3d` for hardware acceleration
+
+## 🌐 Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## 📱 Running the Demo
+
+```bash
+# Clone the repository
+git clone https://github.com/react-forge/swipeon-react.git
+cd swipeon-react
+
+# Install dependencies
+npm install
+
+# Run the demo
+cd example
+npm install
+npm run dev
+```
+
+The demo will open at `http://localhost:3000`
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Watch mode for development
+npm run dev
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📄 License
+
+MIT © [react-forge](https://github.com/react-forge)
+
+## 🙏 Acknowledgments
+
+- Inspired by Tinder's swipe interface
+- Built with React and TypeScript
+- Uses Pointer Events API for unified input handling
+
+## 📧 Support
+
+- 🐛 [Report a bug](https://github.com/react-forge/swipeon-react/issues)
+- 💡 [Request a feature](https://github.com/react-forge/swipeon-react/issues)
+- 📖 [Read the docs](https://github.com/react-forge/swipeon-react#readme)
+
+---
+
+Made with ❤️ by [react-forge](https://github.com/react-forge)

package/dist/index.cjs

@@ -0,0 +1,2 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);const l=(e,t)=>t===0?0:Math.abs(e/t),u=(e,t,n=50)=>{let r=Math.abs(e),i=Math.abs(t);return r<n&&i<n?null:r>i?e>0?`right`:`left`:t>0?`down`:`up`},d=(e,t=15,n=300)=>{let r=e/n*t;return Math.max(-t,Math.min(t,r))},f=(e,t,n=100)=>{let r=1-Math.sqrt(e*e+t*t)/(n*3);return Math.max(.5,Math.min(1,r))},p=e=>`touches`in e&&e.touches&&e.touches.length>0?{x:e.touches[0].clientX,y:e.touches[0].clientY}:`clientX`in e&&`clientY`in e?{x:e.clientX,y:e.clientY}:{x:0,y:0},m={threshold:100,velocityThreshold:.5,maxRotation:15,exitDuration:300,returnDuration:200,enableRotation:!0},h=(e={},t={})=>{let{threshold:n,velocityThreshold:r,maxRotation:i,exitDuration:a,returnDuration:o,enableRotation:s}={...m,...t},h=(0,c.useRef)(null),g=(0,c.useRef)(null),[_,v]=(0,c.useState)({isDragging:!1,startX:0,startY:0,currentX:0,currentY:0,deltaX:0,deltaY:0,velocity:0,direction:null,startTime:0}),[y,b]=(0,c.useState)(`translate3d(0px, 0px, 0px) rotate(0deg)`),[x,S]=(0,c.useState)(1),[C,w]=(0,c.useState)(`none`),T=(0,c.useCallback)(t=>{let n=p(t),r=Date.now();v({isDragging:!0,startX:n.x,startY:n.y,currentX:n.x,currentY:n.y,deltaX:0,deltaY:0,velocity:0,direction:null,startTime:r}),w(`none`),e.onSwipeStart&&e.onSwipeStart()},[e]),E=(0,c.useCallback)(e=>{if(!_.isDragging)return;let t=p(e),r=t.x-_.startX,a=t.y-_.startY;v(e=>({...e,currentX:t.x,currentY:t.y,deltaX:r,deltaY:a})),g.current&&cancelAnimationFrame(g.current),g.current=requestAnimationFrame(()=>{let e=s?d(r,i):0,t=f(r,a,n);b(`translate3d(${r}px, ${a}px, 0px) rotate(${e}deg)`),S(t)})},[_.isDragging,_.startX,_.startY,s,i,n]),D=(0,c.useCallback)(()=>{if(!_.isDragging)return;let{deltaX:t,deltaY:c,startTime:f}=_,p=Date.now()-f,m=Math.sqrt(t*t+c*c),h=l(m,p),g=u(t,c,n/2);if((m>=n||h>=r)&&g){w(`transform ${a}ms ease-out, opacity ${a}ms ease-out`);let n=t*2;b(`translate3d(${n}px, ${c*2}px, 0px) rotate(${s?d(n,i*2):0}deg)`),S(0),setTimeout(()=>{switch(g){case`left`:e.onSwipeLeft?.();break;case`right`:e.onSwipeRight?.();break;case`up`:e.onSwipeUp?.();break;case`down`:e.onSwipeDown?.();break}e.onSwipeEnd&&e.onSwipeEnd(),setTimeout(()=>{w(`none`),b(`translate3d(0px, 0px, 0px) rotate(0deg)`),S(1)},50)},a)}else w(`transform ${o}ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity ${o}ms ease-out`),b(`translate3d(0px, 0px, 0px) rotate(0deg)`),S(1),e.onSwipeEnd&&e.onSwipeEnd();v(e=>({...e,isDragging:!1}))},[_,n,r,a,o,s,i,e]);return(0,c.useEffect)(()=>{let e=h.current;if(!e)return;let t=e=>{T(e)},n=e=>{_.isDragging&&E(e)},r=()=>{D()};return e.addEventListener(`pointerdown`,t),_.isDragging&&(document.addEventListener(`pointermove`,n),document.addEventListener(`pointerup`,r),document.addEventListener(`pointercancel`,r)),()=>{e.removeEventListener(`pointerdown`,t),document.removeEventListener(`pointermove`,n),document.removeEventListener(`pointerup`,r),document.removeEventListener(`pointercancel`,r),g.current&&cancelAnimationFrame(g.current)}},[_.isDragging,T,E,D]),{ref:h,transform:y,opacity:x,transition:C,isDragging:_.isDragging}},g=({children:e,className:t=``,style:n={},onSwipeLeft:r,onSwipeRight:i,onSwipeUp:a,onSwipeDown:o,onSwipeStart:s,onSwipeEnd:l,threshold:u=100,velocityThreshold:d=.5,maxRotation:f=15,exitDuration:p=300,returnDuration:m=200,enableRotation:g=!0})=>{let{ref:_,transform:v,opacity:y,transition:b,isDragging:x}=h({onSwipeLeft:r,onSwipeRight:i,onSwipeUp:a,onSwipeDown:o,onSwipeStart:s,onSwipeEnd:l},{threshold:u,velocityThreshold:d,maxRotation:f,exitDuration:p,returnDuration:m,enableRotation:g}),S={...n,transform:v,opacity:y,transition:b,touchAction:`none`,userSelect:`none`,WebkitUserSelect:`none`,cursor:x?`grabbing`:`grab`,willChange:x?`transform, opacity`:`auto`,position:`relative`};return c.default.createElement(`div`,{ref:_,className:`swipeon-card ${t}`,style:S},e)};exports.SwipeCard=g,exports.useSwipe=h;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["DEFAULT_CONFIG: Required<SwipeConfig>","SwipeCard: React.FC<SwipeCardProps>","cardStyle: CSSProperties"],"sources":["../src/utils/helpers.ts","../src/hooks/useSwipe.ts","../src/components/SwipeCard.tsx"],"sourcesContent":["import { SwipeDirection } from '../types';\n\n/**\n * Calculate the distance between two points\n */\nexport const getDistance = (x1: number, y1: number, x2: number, y2: number): number => {\n  const dx = x2 - x1;\n  const dy = y2 - y1;\n  return Math.sqrt(dx * dx + dy * dy);\n};\n\n/**\n * Calculate velocity based on distance and time\n */\nexport const calculateVelocity = (distance: number, time: number): number => {\n  if (time === 0) return 0;\n  return Math.abs(distance / time);\n};\n\n/**\n * Determine the swipe direction based on deltas\n */\nexport const getSwipeDirection = (\n  deltaX: number,\n  deltaY: number,\n  threshold: number = 50\n): SwipeDirection | null => {\n  const absDeltaX = Math.abs(deltaX);\n  const absDeltaY = Math.abs(deltaY);\n\n  // Need minimum movement\n  if (absDeltaX < threshold && absDeltaY < threshold) {\n    return null;\n  }\n\n  // Determine primary direction\n  if (absDeltaX > absDeltaY) {\n    return deltaX > 0 ? 'right' : 'left';\n  } else {\n    return deltaY > 0 ? 'down' : 'up';\n  }\n};\n\n/**\n * Calculate rotation angle based on horizontal movement\n */\nexport const calculateRotation = (\n  deltaX: number,\n  maxRotation: number = 15,\n  containerWidth: number = 300\n): number => {\n  const rotation = (deltaX / containerWidth) * maxRotation;\n  return Math.max(-maxRotation, Math.min(maxRotation, rotation));\n};\n\n/**\n * Calculate opacity based on drag distance\n */\nexport const calculateOpacity = (\n  deltaX: number,\n  deltaY: number,\n  threshold: number = 100\n): number => {\n  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n  const opacity = 1 - distance / (threshold * 3);\n  return Math.max(0.5, Math.min(1, opacity));\n};\n\n/**\n * Clamp a value between min and max\n */\nexport const clamp = (value: number, min: number, max: number): number => {\n  return Math.max(min, Math.min(max, value));\n};\n\n/**\n * Get touch/pointer coordinates from event\n */\nexport const getEventCoordinates = (\n  event: TouchEvent | PointerEvent | MouseEvent | any\n): { x: number; y: number } => {\n  if ('touches' in event && event.touches && event.touches.length > 0) {\n    return {\n      x: event.touches[0].clientX,\n      y: event.touches[0].clientY,\n    };\n  }\n  \n  if ('clientX' in event && 'clientY' in event) {\n    return {\n      x: event.clientX,\n      y: event.clientY,\n    };\n  }\n  \n  return { x: 0, y: 0 };\n};\n\n","import { useRef, useState, useCallback, useEffect } from 'react';\nimport { SwipeConfig, SwipeCallbacks, GestureState, UseSwipeReturn } from '../types';\nimport {\n  getSwipeDirection,\n  calculateRotation,\n  calculateOpacity,\n  calculateVelocity,\n  getEventCoordinates,\n} from '../utils/helpers';\n\nconst DEFAULT_CONFIG: Required<SwipeConfig> = {\n  threshold: 100,\n  velocityThreshold: 0.5,\n  maxRotation: 15,\n  exitDuration: 300,\n  returnDuration: 200,\n  enableRotation: true,\n};\n\nexport const useSwipe = (\n  callbacks: SwipeCallbacks = {},\n  config: SwipeConfig = {}\n): UseSwipeReturn => {\n  const mergedConfig = { ...DEFAULT_CONFIG, ...config };\n  const {\n    threshold,\n    velocityThreshold,\n    maxRotation,\n    exitDuration,\n    returnDuration,\n    enableRotation,\n  } = mergedConfig;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const animationFrameRef = useRef<number | null>(null);\n  const [gestureState, setGestureState] = useState<GestureState>({\n    isDragging: false,\n    startX: 0,\n    startY: 0,\n    currentX: 0,\n    currentY: 0,\n    deltaX: 0,\n    deltaY: 0,\n    velocity: 0,\n    direction: null,\n    startTime: 0,\n  });\n\n  const [transform, setTransform] = useState('translate3d(0px, 0px, 0px) rotate(0deg)');\n  const [opacity, setOpacity] = useState(1);\n  const [transition, setTransition] = useState('none');\n\n  // Handle swipe start\n  const handleSwipeStart = useCallback(\n    (event: PointerEvent | TouchEvent | MouseEvent) => {\n      const coords = getEventCoordinates(event as any);\n      const now = Date.now();\n\n      setGestureState({\n        isDragging: true,\n        startX: coords.x,\n        startY: coords.y,\n        currentX: coords.x,\n        currentY: coords.y,\n        deltaX: 0,\n        deltaY: 0,\n        velocity: 0,\n        direction: null,\n        startTime: now,\n      });\n\n      setTransition('none');\n      \n      if (callbacks.onSwipeStart) {\n        callbacks.onSwipeStart();\n      }\n    },\n    [callbacks]\n  );\n\n  // Handle swipe move\n  const handleSwipeMove = useCallback(\n    (event: PointerEvent | TouchEvent | MouseEvent) => {\n      if (!gestureState.isDragging) return;\n\n      const coords = getEventCoordinates(event as any);\n      const deltaX = coords.x - gestureState.startX;\n      const deltaY = coords.y - gestureState.startY;\n\n      // Update gesture state\n      setGestureState((prev: GestureState) => ({\n        ...prev,\n        currentX: coords.x,\n        currentY: coords.y,\n        deltaX,\n        deltaY,\n      }));\n\n      // Use RAF for smooth updates\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n\n      animationFrameRef.current = requestAnimationFrame(() => {\n        const rotation = enableRotation ? calculateRotation(deltaX, maxRotation) : 0;\n        const newOpacity = calculateOpacity(deltaX, deltaY, threshold);\n\n        setTransform(\n          `translate3d(${deltaX}px, ${deltaY}px, 0px) rotate(${rotation}deg)`\n        );\n        setOpacity(newOpacity);\n      });\n    },\n    [gestureState.isDragging, gestureState.startX, gestureState.startY, enableRotation, maxRotation, threshold]\n  );\n\n  // Handle swipe end\n  const handleSwipeEnd = useCallback(() => {\n    if (!gestureState.isDragging) return;\n\n    const { deltaX, deltaY, startTime } = gestureState;\n    const timeDelta = Date.now() - startTime;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const velocity = calculateVelocity(distance, timeDelta);\n\n    const direction = getSwipeDirection(deltaX, deltaY, threshold / 2);\n    const shouldSwipe =\n      distance >= threshold || velocity >= velocityThreshold;\n\n    if (shouldSwipe && direction) {\n      // Execute swipe\n      setTransition(`transform ${exitDuration}ms ease-out, opacity ${exitDuration}ms ease-out`);\n      \n      // Calculate exit position (move far enough off screen)\n      const multiplier = 2;\n      const exitX = deltaX * multiplier;\n      const exitY = deltaY * multiplier;\n      const rotation = enableRotation ? calculateRotation(exitX, maxRotation * 2) : 0;\n\n      setTransform(\n        `translate3d(${exitX}px, ${exitY}px, 0px) rotate(${rotation}deg)`\n      );\n      setOpacity(0);\n\n      // Trigger callback after animation\n      setTimeout(() => {\n        switch (direction) {\n          case 'left':\n            callbacks.onSwipeLeft?.();\n            break;\n          case 'right':\n            callbacks.onSwipeRight?.();\n            break;\n          case 'up':\n            callbacks.onSwipeUp?.();\n            break;\n          case 'down':\n            callbacks.onSwipeDown?.();\n            break;\n        }\n        \n        if (callbacks.onSwipeEnd) {\n          callbacks.onSwipeEnd();\n        }\n\n        // Reset after callback\n        setTimeout(() => {\n          setTransition('none');\n          setTransform('translate3d(0px, 0px, 0px) rotate(0deg)');\n          setOpacity(1);\n        }, 50);\n      }, exitDuration);\n    } else {\n      // Spring back\n      setTransition(\n        `transform ${returnDuration}ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity ${returnDuration}ms ease-out`\n      );\n      setTransform('translate3d(0px, 0px, 0px) rotate(0deg)');\n      setOpacity(1);\n\n      if (callbacks.onSwipeEnd) {\n        callbacks.onSwipeEnd();\n      }\n    }\n\n    setGestureState((prev: GestureState) => ({ ...prev, isDragging: false }));\n  }, [\n    gestureState,\n    threshold,\n    velocityThreshold,\n    exitDuration,\n    returnDuration,\n    enableRotation,\n    maxRotation,\n    callbacks,\n  ]);\n\n  // Attach event listeners\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const handlePointerDown = (e: PointerEvent) => {\n      handleSwipeStart(e);\n    };\n\n    const handlePointerMove = (e: PointerEvent) => {\n      if (gestureState.isDragging) {\n        handleSwipeMove(e);\n      }\n    };\n\n    const handlePointerUp = () => {\n      handleSwipeEnd();\n    };\n\n    element.addEventListener('pointerdown', handlePointerDown);\n\n    if (gestureState.isDragging) {\n      document.addEventListener('pointermove', handlePointerMove);\n      document.addEventListener('pointerup', handlePointerUp);\n      document.addEventListener('pointercancel', handlePointerUp);\n    }\n\n    return () => {\n      element.removeEventListener('pointerdown', handlePointerDown);\n      document.removeEventListener('pointermove', handlePointerMove);\n      document.removeEventListener('pointerup', handlePointerUp);\n      document.removeEventListener('pointercancel', handlePointerUp);\n      \n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, [gestureState.isDragging, handleSwipeStart, handleSwipeMove, handleSwipeEnd]);\n\n  return {\n    ref,\n    transform,\n    opacity,\n    transition,\n    isDragging: gestureState.isDragging,\n  };\n};\n\n","import React, { CSSProperties } from 'react';\nimport { useSwipe } from '../hooks/useSwipe';\nimport { SwipeCardProps } from '../types';\n\n/**\n * SwipeCard Component\n * \n * A performant swipeable card component with smooth animations.\n * Supports swipe in all four directions: left, right, up, and down.\n * \n * @example\n * ```tsx\n * <SwipeCard\n *   onSwipeLeft={() => console.log('Swiped left')}\n *   onSwipeRight={() => console.log('Swiped right')}\n *   threshold={100}\n * >\n *   <div>Your content here</div>\n * </SwipeCard>\n * ```\n */\nexport const SwipeCard: React.FC<SwipeCardProps> = ({\n  children,\n  className = '',\n  style = {},\n  onSwipeLeft,\n  onSwipeRight,\n  onSwipeUp,\n  onSwipeDown,\n  onSwipeStart,\n  onSwipeEnd,\n  threshold = 100,\n  velocityThreshold = 0.5,\n  maxRotation = 15,\n  exitDuration = 300,\n  returnDuration = 200,\n  enableRotation = true,\n}) => {\n  const callbacks = {\n    onSwipeLeft,\n    onSwipeRight,\n    onSwipeUp,\n    onSwipeDown,\n    onSwipeStart,\n    onSwipeEnd,\n  };\n\n  const config = {\n    threshold,\n    velocityThreshold,\n    maxRotation,\n    exitDuration,\n    returnDuration,\n    enableRotation,\n  };\n\n  const { ref, transform, opacity, transition, isDragging } = useSwipe(callbacks, config);\n\n  const cardStyle: CSSProperties = {\n    ...style,\n    transform,\n    opacity,\n    transition,\n    touchAction: 'none', // Prevent default touch behaviors\n    userSelect: 'none', // Prevent text selection during drag\n    WebkitUserSelect: 'none',\n    cursor: isDragging ? 'grabbing' : 'grab',\n    willChange: isDragging ? 'transform, opacity' : 'auto',\n    position: 'relative',\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={`swipeon-card ${className}`}\n      style={cardStyle}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default SwipeCard;\n\n"],"mappings":"4fAcA,MAAa,GAAqB,EAAkB,IAC9C,IAAS,EAAU,EAChB,KAAK,IAAI,EAAW,EAAK,CAMrB,GACX,EACA,EACA,EAAoB,KACM,CAC1B,IAAM,EAAY,KAAK,IAAI,EAAO,CAC5B,EAAY,KAAK,IAAI,EAAO,CAWhC,OARE,EAAY,GAAa,EAAY,EAChC,KAIL,EAAY,EACP,EAAS,EAAI,QAAU,OAEvB,EAAS,EAAI,OAAS,MAOpB,GACX,EACA,EAAsB,GACtB,EAAyB,MACd,CACX,IAAM,EAAY,EAAS,EAAkB,EAC7C,OAAO,KAAK,IAAI,CAAC,EAAa,KAAK,IAAI,EAAa,EAAS,CAAC,EAMnD,GACX,EACA,EACA,EAAoB,MACT,CAEX,IAAM,EAAU,EADC,KAAK,KAAK,EAAS,EAAS,EAAS,EAAO,EAC7B,EAAY,GAC5C,OAAO,KAAK,IAAI,GAAK,KAAK,IAAI,EAAG,EAAQ,CAAC,EAa/B,EACX,GAEI,YAAa,GAAS,EAAM,SAAW,EAAM,QAAQ,OAAS,EACzD,CACL,EAAG,EAAM,QAAQ,GAAG,QACpB,EAAG,EAAM,QAAQ,GAAG,QACrB,CAGC,YAAa,GAAS,YAAa,EAC9B,CACL,EAAG,EAAM,QACT,EAAG,EAAM,QACV,CAGI,CAAE,EAAG,EAAG,EAAG,EAAG,CCrFjBA,EAAwC,CAC5C,UAAW,IACX,kBAAmB,GACnB,YAAa,GACb,aAAc,IACd,eAAgB,IAChB,eAAgB,GACjB,CAEY,GACX,EAA4B,EAAE,CAC9B,EAAsB,EAAE,GACL,CAEnB,GAAM,CACJ,YACA,oBACA,cACA,eACA,iBACA,kBAPmB,CAAE,GAAG,EAAgB,GAAG,EAAQ,CAU/C,GAAA,EAAA,EAAA,QAA6B,KAAK,CAClC,GAAA,EAAA,EAAA,QAA0C,KAAK,CAC/C,CAAC,EAAc,IAAA,EAAA,EAAA,UAA0C,CAC7D,WAAY,GACZ,OAAQ,EACR,OAAQ,EACR,SAAU,EACV,SAAU,EACV,OAAQ,EACR,OAAQ,EACR,SAAU,EACV,UAAW,KACX,UAAW,EACZ,CAAC,CAEI,CAAC,EAAW,IAAA,EAAA,EAAA,UAAyB,0CAA0C,CAC/E,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,EAAE,CACnC,CAAC,EAAY,IAAA,EAAA,EAAA,UAA0B,OAAO,CAG9C,GAAA,EAAA,EAAA,aACH,GAAkD,CACjD,IAAM,EAAS,EAAoB,EAAa,CAC1C,EAAM,KAAK,KAAK,CAEtB,EAAgB,CACd,WAAY,GACZ,OAAQ,EAAO,EACf,OAAQ,EAAO,EACf,SAAU,EAAO,EACjB,SAAU,EAAO,EACjB,OAAQ,EACR,OAAQ,EACR,SAAU,EACV,UAAW,KACX,UAAW,EACZ,CAAC,CAEF,EAAc,OAAO,CAEjB,EAAU,cACZ,EAAU,cAAc,EAG5B,CAAC,EAAU,CACZ,CAGK,GAAA,EAAA,EAAA,aACH,GAAkD,CACjD,GAAI,CAAC,EAAa,WAAY,OAE9B,IAAM,EAAS,EAAoB,EAAa,CAC1C,EAAS,EAAO,EAAI,EAAa,OACjC,EAAS,EAAO,EAAI,EAAa,OAGvC,EAAiB,IAAwB,CACvC,GAAG,EACH,SAAU,EAAO,EACjB,SAAU,EAAO,EACjB,SACA,SACD,EAAE,CAGC,EAAkB,SACpB,qBAAqB,EAAkB,QAAQ,CAGjD,EAAkB,QAAU,0BAA4B,CACtD,IAAM,EAAW,EAAiB,EAAkB,EAAQ,EAAY,CAAG,EACrE,EAAa,EAAiB,EAAQ,EAAQ,EAAU,CAE9D,EACE,eAAe,EAAO,MAAM,EAAO,kBAAkB,EAAS,MAC/D,CACD,EAAW,EAAW,EACtB,EAEJ,CAAC,EAAa,WAAY,EAAa,OAAQ,EAAa,OAAQ,EAAgB,EAAa,EAAU,CAC5G,CAGK,GAAA,EAAA,EAAA,iBAAmC,CACvC,GAAI,CAAC,EAAa,WAAY,OAE9B,GAAM,CAAE,SAAQ,SAAQ,aAAc,EAChC,EAAY,KAAK,KAAK,CAAG,EACzB,EAAW,KAAK,KAAK,EAAS,EAAS,EAAS,EAAO,CACvD,EAAW,EAAkB,EAAU,EAAU,CAEjD,EAAY,EAAkB,EAAQ,EAAQ,EAAY,EAAE,CAIlE,IAFE,GAAY,GAAa,GAAY,IAEpB,EAAW,CAE5B,EAAc,aAAa,EAAa,uBAAuB,EAAa,aAAa,CAGzF,IACM,EAAQ,EAAS,EAIvB,EACE,eAAe,EAAM,MAJT,EAAS,EAIY,kBAHlB,EAAiB,EAAkB,EAAO,EAAc,EAAE,CAAG,EAGhB,MAC7D,CACD,EAAW,EAAE,CAGb,eAAiB,CACf,OAAQ,EAAR,CACE,IAAK,OACH,EAAU,eAAe,CACzB,MACF,IAAK,QACH,EAAU,gBAAgB,CAC1B,MACF,IAAK,KACH,EAAU,aAAa,CACvB,MACF,IAAK,OACH,EAAU,eAAe,CACzB,MAGA,EAAU,YACZ,EAAU,YAAY,CAIxB,eAAiB,CACf,EAAc,OAAO,CACrB,EAAa,0CAA0C,CACvD,EAAW,EAAE,EACZ,GAAG,EACL,EAAa,MAGhB,EACE,aAAa,EAAe,sDAAsD,EAAe,aAClG,CACD,EAAa,0CAA0C,CACvD,EAAW,EAAE,CAET,EAAU,YACZ,EAAU,YAAY,CAI1B,EAAiB,IAAwB,CAAE,GAAG,EAAM,WAAY,GAAO,EAAE,EACxE,CACD,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CAAC,CAyCF,OAtCA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAU,EAAI,QACpB,GAAI,CAAC,EAAS,OAEd,IAAM,EAAqB,GAAoB,CAC7C,EAAiB,EAAE,EAGf,EAAqB,GAAoB,CACzC,EAAa,YACf,EAAgB,EAAE,EAIhB,MAAwB,CAC5B,GAAgB,EAWlB,OARA,EAAQ,iBAAiB,cAAe,EAAkB,CAEtD,EAAa,aACf,SAAS,iBAAiB,cAAe,EAAkB,CAC3D,SAAS,iBAAiB,YAAa,EAAgB,CACvD,SAAS,iBAAiB,gBAAiB,EAAgB,MAGhD,CACX,EAAQ,oBAAoB,cAAe,EAAkB,CAC7D,SAAS,oBAAoB,cAAe,EAAkB,CAC9D,SAAS,oBAAoB,YAAa,EAAgB,CAC1D,SAAS,oBAAoB,gBAAiB,EAAgB,CAE1D,EAAkB,SACpB,qBAAqB,EAAkB,QAAQ,GAGlD,CAAC,EAAa,WAAY,EAAkB,EAAiB,EAAe,CAAC,CAEzE,CACL,MACA,YACA,UACA,aACA,WAAY,EAAa,WAC1B,EC7NUC,GAAuC,CAClD,WACA,YAAY,GACZ,QAAQ,EAAE,CACV,cACA,eACA,YACA,cACA,eACA,aACA,YAAY,IACZ,oBAAoB,GACpB,cAAc,GACd,eAAe,IACf,iBAAiB,IACjB,iBAAiB,MACb,CAmBJ,GAAM,CAAE,MAAK,YAAW,UAAS,aAAY,cAAe,EAlB1C,CAChB,cACA,eACA,YACA,cACA,eACA,aACD,CAEc,CACb,YACA,oBACA,cACA,eACA,iBACA,iBACD,CAEsF,CAEjFC,EAA2B,CAC/B,GAAG,EACH,YACA,UACA,aACA,YAAa,OACb,WAAY,OACZ,iBAAkB,OAClB,OAAQ,EAAa,WAAa,OAClC,WAAY,EAAa,qBAAuB,OAChD,SAAU,WACX,CAED,OACE,EAAA,QAAA,cAAC,MAAA,CACM,MACL,UAAW,gBAAgB,IAC3B,MAAO,GAEN,EACG"}

package/dist/index.d.cts

@@ -0,0 +1,100 @@
+import React$1, { CSSProperties, ReactNode } from "react";
+
+//#region src/types/index.d.ts
+
+/**
+ * Swipe direction types
+ */
+type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+/**
+ * Callback function signatures for swipe events
+ */
+interface SwipeCallbacks {
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  onSwipeUp?: () => void;
+  onSwipeDown?: () => void;
+  onSwipeStart?: () => void;
+  onSwipeEnd?: () => void;
+}
+/**
+ * Configuration options for swipe behavior
+ */
+interface SwipeConfig {
+  /** Minimum distance (in pixels) required to trigger a swipe */
+  threshold?: number;
+  /** Minimum velocity required to trigger a swipe */
+  velocityThreshold?: number;
+  /** Maximum rotation angle in degrees during drag */
+  maxRotation?: number;
+  /** Duration of the exit animation in milliseconds */
+  exitDuration?: number;
+  /** Duration of the spring-back animation in milliseconds */
+  returnDuration?: number;
+  /** Enable/disable rotation effect during drag */
+  enableRotation?: boolean;
+}
+/**
+ * Props for the SwipeCard component
+ */
+interface SwipeCardProps extends SwipeCallbacks, SwipeConfig {
+  /** Content to render inside the card */
+  children: ReactNode;
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional inline styles */
+  style?: CSSProperties;
+  /** Unique key for the card (useful in lists) */
+  cardKey?: string | number;
+}
+/**
+ * Internal gesture state for tracking swipe progress
+ */
+interface GestureState {
+  isDragging: boolean;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  deltaX: number;
+  deltaY: number;
+  velocity: number;
+  direction: SwipeDirection | null;
+  startTime: number;
+}
+/**
+ * Return type of the useSwipe hook
+ */
+interface UseSwipeReturn {
+  ref: React.RefObject<HTMLDivElement>;
+  transform: string;
+  opacity: number;
+  transition: string;
+  isDragging: boolean;
+}
+//#endregion
+//#region src/components/SwipeCard.d.ts
+/**
+ * SwipeCard Component
+ *
+ * A performant swipeable card component with smooth animations.
+ * Supports swipe in all four directions: left, right, up, and down.
+ *
+ * @example
+ * ```tsx
+ * <SwipeCard
+ *   onSwipeLeft={() => console.log('Swiped left')}
+ *   onSwipeRight={() => console.log('Swiped right')}
+ *   threshold={100}
+ * >
+ *   <div>Your content here</div>
+ * </SwipeCard>
+ * ```
+ */
+declare const SwipeCard: React$1.FC<SwipeCardProps>;
+//#endregion
+//#region src/hooks/useSwipe.d.ts
+declare const useSwipe: (callbacks?: SwipeCallbacks, config?: SwipeConfig) => UseSwipeReturn;
+//#endregion
+export { type GestureState, type SwipeCallbacks, SwipeCard, type SwipeCardProps, type SwipeConfig, type SwipeDirection, type UseSwipeReturn, useSwipe };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types/index.ts","../src/components/SwipeCard.tsx","../src/hooks/useSwipe.ts"],"sourcesContent":[],"mappings":";;;;;;AAKA;AAKiB,KALL,cAAA,GAKmB,MAAA,GAAA,OAAA,GAAA,IAAA,GAAA,MAAA;AAY/B;AAkBA;;AAMU,UApCO,cAAA,CAoCP;EAN8B,WAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAAgB,YAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAAW,SAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAclD,WAAA,CAAA,EAAA,GAAY,GAAA,IAAA;EAgBZ,YAAA,CAAA,EAAA,GAAc,GAAA,IAAA;;;;ACjD/B;;UDCiB,WAAA;;EEHJ,SAAA,CAAA,EAgOZ,MAAA;EA/NY;EACH,iBAAA,CAAA,EAAA,MAAA;EACP;EA6NF,WAAA,CAAA,EAAA,MAAA;;;;;;;;;;;UF3MgB,cAAA,SAAuB,gBAAgB;;YAE5C;;;;UAIF;;;;;;;UAQO,YAAA;;;;;;;;;aASJ;;;;;;UAOI,cAAA;OACV,KAAA,CAAM,UAAU;;;;;;;;;AAlEvB;AAKA;AAYA;AAkBA;;;;;;AAcA;AAgBA;;;;ACjDA;;cAAa,WAAW,OAAA,CAAM,GAAG;;;cCFpB,uBACA,yBACH,gBACP"}

package/dist/index.d.mts

@@ -0,0 +1,100 @@
+import React$1, { CSSProperties, ReactNode } from "react";
+
+//#region src/types/index.d.ts
+
+/**
+ * Swipe direction types
+ */
+type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+/**
+ * Callback function signatures for swipe events
+ */
+interface SwipeCallbacks {
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  onSwipeUp?: () => void;
+  onSwipeDown?: () => void;
+  onSwipeStart?: () => void;
+  onSwipeEnd?: () => void;
+}
+/**
+ * Configuration options for swipe behavior
+ */
+interface SwipeConfig {
+  /** Minimum distance (in pixels) required to trigger a swipe */
+  threshold?: number;
+  /** Minimum velocity required to trigger a swipe */
+  velocityThreshold?: number;
+  /** Maximum rotation angle in degrees during drag */
+  maxRotation?: number;
+  /** Duration of the exit animation in milliseconds */
+  exitDuration?: number;
+  /** Duration of the spring-back animation in milliseconds */
+  returnDuration?: number;
+  /** Enable/disable rotation effect during drag */
+  enableRotation?: boolean;
+}
+/**
+ * Props for the SwipeCard component
+ */
+interface SwipeCardProps extends SwipeCallbacks, SwipeConfig {
+  /** Content to render inside the card */
+  children: ReactNode;
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional inline styles */
+  style?: CSSProperties;
+  /** Unique key for the card (useful in lists) */
+  cardKey?: string | number;
+}
+/**
+ * Internal gesture state for tracking swipe progress
+ */
+interface GestureState {
+  isDragging: boolean;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  deltaX: number;
+  deltaY: number;
+  velocity: number;
+  direction: SwipeDirection | null;
+  startTime: number;
+}
+/**
+ * Return type of the useSwipe hook
+ */
+interface UseSwipeReturn {
+  ref: React.RefObject<HTMLDivElement>;
+  transform: string;
+  opacity: number;
+  transition: string;
+  isDragging: boolean;
+}
+//#endregion
+//#region src/components/SwipeCard.d.ts
+/**
+ * SwipeCard Component
+ *
+ * A performant swipeable card component with smooth animations.
+ * Supports swipe in all four directions: left, right, up, and down.
+ *
+ * @example
+ * ```tsx
+ * <SwipeCard
+ *   onSwipeLeft={() => console.log('Swiped left')}
+ *   onSwipeRight={() => console.log('Swiped right')}
+ *   threshold={100}
+ * >
+ *   <div>Your content here</div>
+ * </SwipeCard>
+ * ```
+ */
+declare const SwipeCard: React$1.FC<SwipeCardProps>;
+//#endregion
+//#region src/hooks/useSwipe.d.ts
+declare const useSwipe: (callbacks?: SwipeCallbacks, config?: SwipeConfig) => UseSwipeReturn;
+//#endregion
+export { type GestureState, type SwipeCallbacks, SwipeCard, type SwipeCardProps, type SwipeConfig, type SwipeDirection, type UseSwipeReturn, useSwipe };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types/index.ts","../src/components/SwipeCard.tsx","../src/hooks/useSwipe.ts"],"sourcesContent":[],"mappings":";;;;;;AAKA;AAKiB,KALL,cAAA,GAKmB,MAAA,GAAA,OAAA,GAAA,IAAA,GAAA,MAAA;AAY/B;AAkBA;;AAMU,UApCO,cAAA,CAoCP;EAN8B,WAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAAgB,YAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAAW,SAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAclD,WAAA,CAAA,EAAA,GAAY,GAAA,IAAA;EAgBZ,YAAA,CAAA,EAAA,GAAc,GAAA,IAAA;;;;ACjD/B;;UDCiB,WAAA;;EEHJ,SAAA,CAAA,EAgOZ,MAAA;EA/NY;EACH,iBAAA,CAAA,EAAA,MAAA;EACP;EA6NF,WAAA,CAAA,EAAA,MAAA;;;;;;;;;;;UF3MgB,cAAA,SAAuB,gBAAgB;;YAE5C;;;;UAIF;;;;;;;UAQO,YAAA;;;;;;;;;aASJ;;;;;;UAOI,cAAA;OACV,KAAA,CAAM,UAAU;;;;;;;;;AAlEvB;AAKA;AAYA;AAkBA;;;;;;AAcA;AAgBA;;;;ACjDA;;cAAa,WAAW,OAAA,CAAM,GAAG;;;cCFpB,uBACA,yBACH,gBACP"}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import e,{useCallback as t,useEffect as n,useRef as r,useState as i}from"react";const a=(e,t)=>t===0?0:Math.abs(e/t),o=(e,t,n=50)=>{let r=Math.abs(e),i=Math.abs(t);return r<n&&i<n?null:r>i?e>0?`right`:`left`:t>0?`down`:`up`},s=(e,t=15,n=300)=>{let r=e/n*t;return Math.max(-t,Math.min(t,r))},c=(e,t,n=100)=>{let r=1-Math.sqrt(e*e+t*t)/(n*3);return Math.max(.5,Math.min(1,r))},l=e=>`touches`in e&&e.touches&&e.touches.length>0?{x:e.touches[0].clientX,y:e.touches[0].clientY}:`clientX`in e&&`clientY`in e?{x:e.clientX,y:e.clientY}:{x:0,y:0},u={threshold:100,velocityThreshold:.5,maxRotation:15,exitDuration:300,returnDuration:200,enableRotation:!0},d=(e={},d={})=>{let{threshold:f,velocityThreshold:p,maxRotation:m,exitDuration:h,returnDuration:g,enableRotation:_}={...u,...d},v=r(null),y=r(null),[b,x]=i({isDragging:!1,startX:0,startY:0,currentX:0,currentY:0,deltaX:0,deltaY:0,velocity:0,direction:null,startTime:0}),[S,C]=i(`translate3d(0px, 0px, 0px) rotate(0deg)`),[w,T]=i(1),[E,D]=i(`none`),O=t(t=>{let n=l(t),r=Date.now();x({isDragging:!0,startX:n.x,startY:n.y,currentX:n.x,currentY:n.y,deltaX:0,deltaY:0,velocity:0,direction:null,startTime:r}),D(`none`),e.onSwipeStart&&e.onSwipeStart()},[e]),k=t(e=>{if(!b.isDragging)return;let t=l(e),n=t.x-b.startX,r=t.y-b.startY;x(e=>({...e,currentX:t.x,currentY:t.y,deltaX:n,deltaY:r})),y.current&&cancelAnimationFrame(y.current),y.current=requestAnimationFrame(()=>{let e=_?s(n,m):0,t=c(n,r,f);C(`translate3d(${n}px, ${r}px, 0px) rotate(${e}deg)`),T(t)})},[b.isDragging,b.startX,b.startY,_,m,f]),A=t(()=>{if(!b.isDragging)return;let{deltaX:t,deltaY:n,startTime:r}=b,i=Date.now()-r,c=Math.sqrt(t*t+n*n),l=a(c,i),u=o(t,n,f/2);if((c>=f||l>=p)&&u){D(`transform ${h}ms ease-out, opacity ${h}ms ease-out`);let r=t*2;C(`translate3d(${r}px, ${n*2}px, 0px) rotate(${_?s(r,m*2):0}deg)`),T(0),setTimeout(()=>{switch(u){case`left`:e.onSwipeLeft?.();break;case`right`:e.onSwipeRight?.();break;case`up`:e.onSwipeUp?.();break;case`down`:e.onSwipeDown?.();break}e.onSwipeEnd&&e.onSwipeEnd(),setTimeout(()=>{D(`none`),C(`translate3d(0px, 0px, 0px) rotate(0deg)`),T(1)},50)},h)}else D(`transform ${g}ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity ${g}ms ease-out`),C(`translate3d(0px, 0px, 0px) rotate(0deg)`),T(1),e.onSwipeEnd&&e.onSwipeEnd();x(e=>({...e,isDragging:!1}))},[b,f,p,h,g,_,m,e]);return n(()=>{let e=v.current;if(!e)return;let t=e=>{O(e)},n=e=>{b.isDragging&&k(e)},r=()=>{A()};return e.addEventListener(`pointerdown`,t),b.isDragging&&(document.addEventListener(`pointermove`,n),document.addEventListener(`pointerup`,r),document.addEventListener(`pointercancel`,r)),()=>{e.removeEventListener(`pointerdown`,t),document.removeEventListener(`pointermove`,n),document.removeEventListener(`pointerup`,r),document.removeEventListener(`pointercancel`,r),y.current&&cancelAnimationFrame(y.current)}},[b.isDragging,O,k,A]),{ref:v,transform:S,opacity:w,transition:E,isDragging:b.isDragging}},f=({children:t,className:n=``,style:r={},onSwipeLeft:i,onSwipeRight:a,onSwipeUp:o,onSwipeDown:s,onSwipeStart:c,onSwipeEnd:l,threshold:u=100,velocityThreshold:f=.5,maxRotation:p=15,exitDuration:m=300,returnDuration:h=200,enableRotation:g=!0})=>{let{ref:_,transform:v,opacity:y,transition:b,isDragging:x}=d({onSwipeLeft:i,onSwipeRight:a,onSwipeUp:o,onSwipeDown:s,onSwipeStart:c,onSwipeEnd:l},{threshold:u,velocityThreshold:f,maxRotation:p,exitDuration:m,returnDuration:h,enableRotation:g}),S={...r,transform:v,opacity:y,transition:b,touchAction:`none`,userSelect:`none`,WebkitUserSelect:`none`,cursor:x?`grabbing`:`grab`,willChange:x?`transform, opacity`:`auto`,position:`relative`};return e.createElement(`div`,{ref:_,className:`swipeon-card ${n}`,style:S},t)};export{f as SwipeCard,d as useSwipe};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["DEFAULT_CONFIG: Required<SwipeConfig>","SwipeCard: React.FC<SwipeCardProps>","cardStyle: CSSProperties"],"sources":["../src/utils/helpers.ts","../src/hooks/useSwipe.ts","../src/components/SwipeCard.tsx"],"sourcesContent":["import { SwipeDirection } from '../types';\n\n/**\n * Calculate the distance between two points\n */\nexport const getDistance = (x1: number, y1: number, x2: number, y2: number): number => {\n  const dx = x2 - x1;\n  const dy = y2 - y1;\n  return Math.sqrt(dx * dx + dy * dy);\n};\n\n/**\n * Calculate velocity based on distance and time\n */\nexport const calculateVelocity = (distance: number, time: number): number => {\n  if (time === 0) return 0;\n  return Math.abs(distance / time);\n};\n\n/**\n * Determine the swipe direction based on deltas\n */\nexport const getSwipeDirection = (\n  deltaX: number,\n  deltaY: number,\n  threshold: number = 50\n): SwipeDirection | null => {\n  const absDeltaX = Math.abs(deltaX);\n  const absDeltaY = Math.abs(deltaY);\n\n  // Need minimum movement\n  if (absDeltaX < threshold && absDeltaY < threshold) {\n    return null;\n  }\n\n  // Determine primary direction\n  if (absDeltaX > absDeltaY) {\n    return deltaX > 0 ? 'right' : 'left';\n  } else {\n    return deltaY > 0 ? 'down' : 'up';\n  }\n};\n\n/**\n * Calculate rotation angle based on horizontal movement\n */\nexport const calculateRotation = (\n  deltaX: number,\n  maxRotation: number = 15,\n  containerWidth: number = 300\n): number => {\n  const rotation = (deltaX / containerWidth) * maxRotation;\n  return Math.max(-maxRotation, Math.min(maxRotation, rotation));\n};\n\n/**\n * Calculate opacity based on drag distance\n */\nexport const calculateOpacity = (\n  deltaX: number,\n  deltaY: number,\n  threshold: number = 100\n): number => {\n  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n  const opacity = 1 - distance / (threshold * 3);\n  return Math.max(0.5, Math.min(1, opacity));\n};\n\n/**\n * Clamp a value between min and max\n */\nexport const clamp = (value: number, min: number, max: number): number => {\n  return Math.max(min, Math.min(max, value));\n};\n\n/**\n * Get touch/pointer coordinates from event\n */\nexport const getEventCoordinates = (\n  event: TouchEvent | PointerEvent | MouseEvent | any\n): { x: number; y: number } => {\n  if ('touches' in event && event.touches && event.touches.length > 0) {\n    return {\n      x: event.touches[0].clientX,\n      y: event.touches[0].clientY,\n    };\n  }\n  \n  if ('clientX' in event && 'clientY' in event) {\n    return {\n      x: event.clientX,\n      y: event.clientY,\n    };\n  }\n  \n  return { x: 0, y: 0 };\n};\n\n","import { useRef, useState, useCallback, useEffect } from 'react';\nimport { SwipeConfig, SwipeCallbacks, GestureState, UseSwipeReturn } from '../types';\nimport {\n  getSwipeDirection,\n  calculateRotation,\n  calculateOpacity,\n  calculateVelocity,\n  getEventCoordinates,\n} from '../utils/helpers';\n\nconst DEFAULT_CONFIG: Required<SwipeConfig> = {\n  threshold: 100,\n  velocityThreshold: 0.5,\n  maxRotation: 15,\n  exitDuration: 300,\n  returnDuration: 200,\n  enableRotation: true,\n};\n\nexport const useSwipe = (\n  callbacks: SwipeCallbacks = {},\n  config: SwipeConfig = {}\n): UseSwipeReturn => {\n  const mergedConfig = { ...DEFAULT_CONFIG, ...config };\n  const {\n    threshold,\n    velocityThreshold,\n    maxRotation,\n    exitDuration,\n    returnDuration,\n    enableRotation,\n  } = mergedConfig;\n\n  const ref = useRef<HTMLDivElement>(null);\n  const animationFrameRef = useRef<number | null>(null);\n  const [gestureState, setGestureState] = useState<GestureState>({\n    isDragging: false,\n    startX: 0,\n    startY: 0,\n    currentX: 0,\n    currentY: 0,\n    deltaX: 0,\n    deltaY: 0,\n    velocity: 0,\n    direction: null,\n    startTime: 0,\n  });\n\n  const [transform, setTransform] = useState('translate3d(0px, 0px, 0px) rotate(0deg)');\n  const [opacity, setOpacity] = useState(1);\n  const [transition, setTransition] = useState('none');\n\n  // Handle swipe start\n  const handleSwipeStart = useCallback(\n    (event: PointerEvent | TouchEvent | MouseEvent) => {\n      const coords = getEventCoordinates(event as any);\n      const now = Date.now();\n\n      setGestureState({\n        isDragging: true,\n        startX: coords.x,\n        startY: coords.y,\n        currentX: coords.x,\n        currentY: coords.y,\n        deltaX: 0,\n        deltaY: 0,\n        velocity: 0,\n        direction: null,\n        startTime: now,\n      });\n\n      setTransition('none');\n      \n      if (callbacks.onSwipeStart) {\n        callbacks.onSwipeStart();\n      }\n    },\n    [callbacks]\n  );\n\n  // Handle swipe move\n  const handleSwipeMove = useCallback(\n    (event: PointerEvent | TouchEvent | MouseEvent) => {\n      if (!gestureState.isDragging) return;\n\n      const coords = getEventCoordinates(event as any);\n      const deltaX = coords.x - gestureState.startX;\n      const deltaY = coords.y - gestureState.startY;\n\n      // Update gesture state\n      setGestureState((prev: GestureState) => ({\n        ...prev,\n        currentX: coords.x,\n        currentY: coords.y,\n        deltaX,\n        deltaY,\n      }));\n\n      // Use RAF for smooth updates\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n\n      animationFrameRef.current = requestAnimationFrame(() => {\n        const rotation = enableRotation ? calculateRotation(deltaX, maxRotation) : 0;\n        const newOpacity = calculateOpacity(deltaX, deltaY, threshold);\n\n        setTransform(\n          `translate3d(${deltaX}px, ${deltaY}px, 0px) rotate(${rotation}deg)`\n        );\n        setOpacity(newOpacity);\n      });\n    },\n    [gestureState.isDragging, gestureState.startX, gestureState.startY, enableRotation, maxRotation, threshold]\n  );\n\n  // Handle swipe end\n  const handleSwipeEnd = useCallback(() => {\n    if (!gestureState.isDragging) return;\n\n    const { deltaX, deltaY, startTime } = gestureState;\n    const timeDelta = Date.now() - startTime;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const velocity = calculateVelocity(distance, timeDelta);\n\n    const direction = getSwipeDirection(deltaX, deltaY, threshold / 2);\n    const shouldSwipe =\n      distance >= threshold || velocity >= velocityThreshold;\n\n    if (shouldSwipe && direction) {\n      // Execute swipe\n      setTransition(`transform ${exitDuration}ms ease-out, opacity ${exitDuration}ms ease-out`);\n      \n      // Calculate exit position (move far enough off screen)\n      const multiplier = 2;\n      const exitX = deltaX * multiplier;\n      const exitY = deltaY * multiplier;\n      const rotation = enableRotation ? calculateRotation(exitX, maxRotation * 2) : 0;\n\n      setTransform(\n        `translate3d(${exitX}px, ${exitY}px, 0px) rotate(${rotation}deg)`\n      );\n      setOpacity(0);\n\n      // Trigger callback after animation\n      setTimeout(() => {\n        switch (direction) {\n          case 'left':\n            callbacks.onSwipeLeft?.();\n            break;\n          case 'right':\n            callbacks.onSwipeRight?.();\n            break;\n          case 'up':\n            callbacks.onSwipeUp?.();\n            break;\n          case 'down':\n            callbacks.onSwipeDown?.();\n            break;\n        }\n        \n        if (callbacks.onSwipeEnd) {\n          callbacks.onSwipeEnd();\n        }\n\n        // Reset after callback\n        setTimeout(() => {\n          setTransition('none');\n          setTransform('translate3d(0px, 0px, 0px) rotate(0deg)');\n          setOpacity(1);\n        }, 50);\n      }, exitDuration);\n    } else {\n      // Spring back\n      setTransition(\n        `transform ${returnDuration}ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity ${returnDuration}ms ease-out`\n      );\n      setTransform('translate3d(0px, 0px, 0px) rotate(0deg)');\n      setOpacity(1);\n\n      if (callbacks.onSwipeEnd) {\n        callbacks.onSwipeEnd();\n      }\n    }\n\n    setGestureState((prev: GestureState) => ({ ...prev, isDragging: false }));\n  }, [\n    gestureState,\n    threshold,\n    velocityThreshold,\n    exitDuration,\n    returnDuration,\n    enableRotation,\n    maxRotation,\n    callbacks,\n  ]);\n\n  // Attach event listeners\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const handlePointerDown = (e: PointerEvent) => {\n      handleSwipeStart(e);\n    };\n\n    const handlePointerMove = (e: PointerEvent) => {\n      if (gestureState.isDragging) {\n        handleSwipeMove(e);\n      }\n    };\n\n    const handlePointerUp = () => {\n      handleSwipeEnd();\n    };\n\n    element.addEventListener('pointerdown', handlePointerDown);\n\n    if (gestureState.isDragging) {\n      document.addEventListener('pointermove', handlePointerMove);\n      document.addEventListener('pointerup', handlePointerUp);\n      document.addEventListener('pointercancel', handlePointerUp);\n    }\n\n    return () => {\n      element.removeEventListener('pointerdown', handlePointerDown);\n      document.removeEventListener('pointermove', handlePointerMove);\n      document.removeEventListener('pointerup', handlePointerUp);\n      document.removeEventListener('pointercancel', handlePointerUp);\n      \n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, [gestureState.isDragging, handleSwipeStart, handleSwipeMove, handleSwipeEnd]);\n\n  return {\n    ref,\n    transform,\n    opacity,\n    transition,\n    isDragging: gestureState.isDragging,\n  };\n};\n\n","import React, { CSSProperties } from 'react';\nimport { useSwipe } from '../hooks/useSwipe';\nimport { SwipeCardProps } from '../types';\n\n/**\n * SwipeCard Component\n * \n * A performant swipeable card component with smooth animations.\n * Supports swipe in all four directions: left, right, up, and down.\n * \n * @example\n * ```tsx\n * <SwipeCard\n *   onSwipeLeft={() => console.log('Swiped left')}\n *   onSwipeRight={() => console.log('Swiped right')}\n *   threshold={100}\n * >\n *   <div>Your content here</div>\n * </SwipeCard>\n * ```\n */\nexport const SwipeCard: React.FC<SwipeCardProps> = ({\n  children,\n  className = '',\n  style = {},\n  onSwipeLeft,\n  onSwipeRight,\n  onSwipeUp,\n  onSwipeDown,\n  onSwipeStart,\n  onSwipeEnd,\n  threshold = 100,\n  velocityThreshold = 0.5,\n  maxRotation = 15,\n  exitDuration = 300,\n  returnDuration = 200,\n  enableRotation = true,\n}) => {\n  const callbacks = {\n    onSwipeLeft,\n    onSwipeRight,\n    onSwipeUp,\n    onSwipeDown,\n    onSwipeStart,\n    onSwipeEnd,\n  };\n\n  const config = {\n    threshold,\n    velocityThreshold,\n    maxRotation,\n    exitDuration,\n    returnDuration,\n    enableRotation,\n  };\n\n  const { ref, transform, opacity, transition, isDragging } = useSwipe(callbacks, config);\n\n  const cardStyle: CSSProperties = {\n    ...style,\n    transform,\n    opacity,\n    transition,\n    touchAction: 'none', // Prevent default touch behaviors\n    userSelect: 'none', // Prevent text selection during drag\n    WebkitUserSelect: 'none',\n    cursor: isDragging ? 'grabbing' : 'grab',\n    willChange: isDragging ? 'transform, opacity' : 'auto',\n    position: 'relative',\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={`swipeon-card ${className}`}\n      style={cardStyle}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default SwipeCard;\n\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "swipeon-react",
+  "version": "0.0.1-alpha.2",
+  "type": "module",
+  "description": "A high-performance React swipe card library with smooth animations and multi-directional swipe support",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "prepublishOnly": "npm run build",
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "publish:alpha": "npm version prerelease --preid=alpha && npm run build && npm publish --tag alpha",
+    "publish:rc": "npm version prerelease --preid=rc && npm run build && npm publish --tag next",
+    "publish:stable": "npm version patch && npm run build && npm publish --tag latest"
+  },
+  "keywords": [
+    "react",
+    "swipe",
+    "swipe-cards",
+    "tinder",
+    "gestures",
+    "touch",
+    "animation",
+    "typescript"
+  ],
+  "author": "react-forge",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-forge/swipeon-react"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsdown": "0.18.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3"
+  }
+}