swipe-row 1.0.0

package/README.md

@@ -0,0 +1,143 @@
+# React Swipe Row Component 🚀
+
+A highly customizable, iOS-style swipeable row component for React applications. Built with `framer-motion` for buttery-smooth spring physics animations. Perfect for creating lists with interactive hidden actions like "Archive", "Delete", or "Reply".
+
+![npm version](https://img.shields.io/npm/v/swipe-row)
+![React](https://img.shields.io/badge/react-%5E18.2.0-blue)
+![TypeScript](https://img.shields.io/badge/TypeScript-%5E5.2.2-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+
+---
+
+## ✨ Features
+
+- **Fluid Animations:** Powered by [Framer Motion](https://www.framer.com/motion/) with native-feeling spring physics.
+- **Dynamic Actions:** Pass an unlimited number of custom action buttons (Edit, Delete, Archive, etc.).
+- **Automatic Styling:** Built-in basic styling with CSS Modules so it just works out of the box without polluting global scopes.
+- **Dark Mode Support:** Automatically detects system preferences and adjusts action background colors.
+- **Fully Typed:** Written in TypeScript for excellent Developer Experience and IntelliSense.
+- **Zero Config:** Auto-calculates swipe distances based on your button widths.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install swipe-row framer-motion
+# or
+yarn add swipe-row framer-motion
+# or
+pnpm add swipe-row framer-motion
+```
+
+*Note: `framer-motion` is required as a peer dependency for animations.*
+
+---
+
+## 💻 Usage
+
+First, import the component and the necessary CSS styles into your React file:
+
+```tsx
+import { SwipeRow } from 'swipe-row';
+import 'swipe-row/style.css'; // Important for default styling!
+```
+
+### Basic Example (Single Action)
+
+```tsx
+function BasicList() {
+  return (
+    <SwipeRow
+      actions={[
+        {
+          label: 'Delete',
+          onClick: () => console.log('Deleted!'),
+          backgroundColor: '#ef4444', // Tailwind red-500
+        }
+      ]}
+    >
+      <div style={{ padding: '16px' }}>
+        Swipe me to the left!
+      </div>
+    </SwipeRow>
+  );
+}
+```
+
+### Advanced Example (Multiple Actions)
+
+You can pass multiple action objects. The component will automatically calculate how far the user needs to swipe.
+
+```tsx
+function EmailList() {
+  const handleArchive = () => alert('Archived');
+  const handleReply = () => alert('Replying...');
+
+  return (
+    <SwipeRow
+      actions={[
+        {
+          label: 'Reply',
+          onClick: handleReply,
+          backgroundColor: '#3b82f6', // Tailwind blue-500
+          width: 80, // Default is 80px
+        },
+        {
+          label: 'Archive',
+          onClick: handleArchive,
+          backgroundColor: '#f59e0b', // Tailwind amber-500
+          width: 90, 
+        }
+      ]}
+    >
+      <div style={{ padding: '20px', borderBottom: '1px solid #eee' }}>
+        <h4>Job Application Updates</h4>
+        <p>You have successfully submitted your resume...</p>
+      </div>
+    </SwipeRow>
+  );
+}
+```
+
+---
+
+## 🛠 Props
+
+### `SwipeRow`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `React.ReactNode` | **Required** | The main visible content of your row. |
+| `actions` | `SwipeAction[]` | **Required** | Array of action configurations to be revealed on swipe. |
+| `maxSwipe` | `number` | `undefined` | Override the automatic swipe width calculation (px). |
+
+### `SwipeAction` Object
+
+Configure each button in the `actions` array:
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `label` | `React.ReactNode` | **Required** | The text or icon to show inside the button. |
+| `onClick` | `() => void` | **Required** | Function to call when clicked. |
+| `backgroundColor` | `string` | `'#64748b'` | CSS background color for the button. |
+| `color` | `string` | `'white'` | CSS text color. |
+| `width` | `number` | `80` | Width of the button in pixels. Used for auto element calculation. |
+| `className` | `string` | `undefined` | Custom CSS class applied to the button element. |
+| `ariaLabel` | `string` | `label` string value | For screen readers. |
+
+---
+
+## 🧪 Local Development
+
+1. Clone the repository
+2. Install dependencies: `npm install`
+3. Start the Vite playground: `npm run dev`
+4. Run unit tests: `npm run test`
+5. Build the library: `npm run build`
+
+---
+
+## 📄 License
+
+MIT © nahkar - Feel free to use in personal and commercial projects!

package/dist/components/SwipeRow/SwipeRow.d.ts

@@ -0,0 +1,29 @@
+export type SwipeAction = {
+    /** The visual content of the button (e.g. text or icon) */
+    label: React.ReactNode;
+    /** Callback triggered when this action is clicked */
+    onClick: () => void;
+    /** Background color for this action button */
+    backgroundColor?: string;
+    /** Text color for this action button */
+    color?: string;
+    /** Width of the button. Defaults to 80px */
+    width?: number;
+    /** Additional CSS class for the button */
+    className?: string;
+    /** Accessibility label. Defaults to label if it is a string a fallback string */
+    ariaLabel?: string;
+};
+export type SwipeRowProps = {
+    /** The content to be displayed in the row */
+    children: React.ReactNode;
+    /** An array of action objects to render behind the row */
+    actions: SwipeAction[];
+    /** Optional custom swipe threshold. Computed automatically if not provided. */
+    maxSwipe?: number;
+};
+/**
+ * SwipeRow creates an iOS style swipeable row element that reveals generic actions behind it.
+ * Highly configurable and built for generic use across various projects.
+ */
+export declare function SwipeRow({ children, actions, maxSwipe }: SwipeRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SwipeRow/index.d.ts

@@ -0,0 +1,2 @@
+export { SwipeRow } from './SwipeRow';
+export type { SwipeRowProps } from './SwipeRow';

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './SwipeRow';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/style.css

@@ -0,0 +1 @@
+._container_1y7jq_1{position:relative;overflow:hidden;border-radius:12px;background-color:#f3f4f6;touch-action:pan-y;-webkit-user-select:none;user-select:none;box-shadow:0 2px 8px #0000000d}._actionsBackground_1y7jq_11{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:flex-end;background-color:#f3f4f6}._actionButton_1y7jq_19{display:flex;align-items:center;justify-content:center;border:none;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:filter .2s}._actionButton_1y7jq_19:hover{filter:brightness(.9)}._foreground_1y7jq_35{position:relative;background-color:#fff;padding:16px;width:100%;box-sizing:border-box;border-radius:12px;box-shadow:-2px 0 10px #00000008}@media (prefers-color-scheme: dark){._container_1y7jq_1,._actionsBackground_1y7jq_11{background-color:#171717}._foreground_1y7jq_35{background-color:#262626;color:#fff}}

package/dist/swipe-row.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("framer-motion"),u=require("react"),b="_container_1y7jq_1",p="_actionsBackground_1y7jq_11",_="_actionButton_1y7jq_19",j="_foreground_1y7jq_35",s={container:b,actionsBackground:p,actionButton:_,foreground:j};function h({children:l,actions:c,maxSwipe:i}){const o=e.useMotionValue(0),d=u.useRef(null),g=u.useMemo(()=>-c.reduce((n,r)=>n+(r.width||80),0),[c]),t=i!==void 0?i:g,f=e.useTransform(o,[t/2,0],[1,0]),m=()=>{o.get()<t/2?e.animate(o,t,{type:"spring",bounce:0,duration:.3}):e.animate(o,0,{type:"spring",bounce:0,duration:.3})};return a.jsxs("div",{ref:d,className:s.container,children:[a.jsx(e.motion.div,{style:{opacity:f},className:s.actionsBackground,children:c.map((n,r)=>{const y=typeof n.label=="string"?n.label:`Action ${r}`;return a.jsx("button",{onClick:n.onClick,className:`${s.actionButton} ${n.className||""}`.trim(),style:{width:n.width||80,backgroundColor:n.backgroundColor||"#64748b",color:n.color||"white"},"aria-label":n.ariaLabel||y,children:n.label},r)})}),a.jsx(e.motion.div,{drag:"x",dragConstraints:{left:t,right:0},dragElastic:.1,style:{x:o},onDragEnd:m,className:s.foreground,children:l})]})}exports.SwipeRow=h;
+//# sourceMappingURL=swipe-row.cjs.js.map

package/dist/swipe-row.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe-row.cjs.js","sources":["../src/components/SwipeRow/SwipeRow.tsx"],"sourcesContent":["import { motion, useMotionValue, useTransform, animate } from 'framer-motion';\nimport { useRef, useMemo } from 'react';\nimport styles from './SwipeRow.module.css';\n\nexport type SwipeAction = {\n  /** The visual content of the button (e.g. text or icon) */\n  label: React.ReactNode;\n  /** Callback triggered when this action is clicked */\n  onClick: () => void;\n  /** Background color for this action button */\n  backgroundColor?: string;\n  /** Text color for this action button */\n  color?: string;\n  /** Width of the button. Defaults to 80px */\n  width?: number;\n  /** Additional CSS class for the button */\n  className?: string;\n  /** Accessibility label. Defaults to label if it is a string a fallback string */\n  ariaLabel?: string;\n};\n\nexport type SwipeRowProps = {\n  /** The content to be displayed in the row */\n  children: React.ReactNode;\n  /** An array of action objects to render behind the row */\n  actions: SwipeAction[];\n  /** Optional custom swipe threshold. Computed automatically if not provided. */\n  maxSwipe?: number;\n};\n\n/**\n * SwipeRow creates an iOS style swipeable row element that reveals generic actions behind it.\n * Highly configurable and built for generic use across various projects.\n */\nexport function SwipeRow({ children, actions, maxSwipe }: SwipeRowProps) {\n  const x = useMotionValue(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const calculatedMaxSwipe = useMemo(() => {\n    return -actions.reduce((acc, action) => acc + (action.width || 80), 0);\n  }, [actions]);\n\n  const swipeDistance = maxSwipe !== undefined ? maxSwipe : calculatedMaxSwipe;\n\n  const backgroundOpacity = useTransform(x, [swipeDistance / 2, 0], [1, 0]);\n\n  const handleDragEnd = () => {\n    const current = x.get();\n\n    // Swipe threshold to snap open\n    if (current < swipeDistance / 2) {\n      animate(x, swipeDistance, { type: 'spring', bounce: 0, duration: 0.3 });\n    } else {\n      animate(x, 0, { type: 'spring', bounce: 0, duration: 0.3 });\n    }\n  };\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      {/* ACTIONS BACKGROUND */}\n      <motion.div\n        style={{ opacity: backgroundOpacity }}\n        className={styles.actionsBackground}\n      >\n        {actions.map((action, index) => {\n          const defaultAria = typeof action.label === 'string' ? action.label : `Action ${index}`;\n          return (\n            <button\n              key={index}\n              onClick={action.onClick}\n              className={`${styles.actionButton} ${action.className || ''}`.trim()}\n              style={{\n                width: action.width || 80,\n                backgroundColor: action.backgroundColor || '#64748b', // Slate\n                color: action.color || 'white',\n              }}\n              aria-label={action.ariaLabel || defaultAria}\n            >\n              {action.label}\n            </button>\n          );\n        })}\n      </motion.div>\n\n      {/* FOREGROUND */}\n      <motion.div\n        drag=\"x\"\n        dragConstraints={{ left: swipeDistance, right: 0 }}\n        dragElastic={0.1}\n        style={{ x }}\n        onDragEnd={handleDragEnd}\n        className={styles.foreground}\n      >\n        {children}\n      </motion.div>\n    </div>\n  );\n}\n"],"names":["SwipeRow","children","actions","maxSwipe","x","useMotionValue","containerRef","useRef","calculatedMaxSwipe","useMemo","acc","action","swipeDistance","backgroundOpacity","useTransform","handleDragEnd","animate","styles","jsx","motion","index","defaultAria"],"mappings":"8UAkCO,SAASA,EAAS,CAAE,SAAAC,EAAU,QAAAC,EAAS,SAAAC,GAA2B,CACvE,MAAMC,EAAIC,EAAAA,eAAe,CAAC,EACpBC,EAAeC,EAAAA,OAAuB,IAAI,EAE1CC,EAAqBC,EAAAA,QAAQ,IAC1B,CAACP,EAAQ,OAAO,CAACQ,EAAKC,IAAWD,GAAOC,EAAO,OAAS,IAAK,CAAC,EACpE,CAACT,CAAO,CAAC,EAENU,EAAgBT,IAAa,OAAYA,EAAWK,EAEpDK,EAAoBC,EAAAA,aAAaV,EAAG,CAACQ,EAAgB,EAAG,CAAC,EAAG,CAAC,EAAG,CAAC,CAAC,EAElEG,EAAgB,IAAM,CACVX,EAAE,IAAA,EAGJQ,EAAgB,EAC5BI,UAAQZ,EAAGQ,EAAe,CAAE,KAAM,SAAU,OAAQ,EAAG,SAAU,GAAK,EAEtEI,UAAQZ,EAAG,EAAG,CAAE,KAAM,SAAU,OAAQ,EAAG,SAAU,GAAK,CAE9D,EAEA,cACG,MAAA,CAAI,IAAKE,EAAc,UAAWW,EAAO,UAExC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,OAAO,IAAP,CACC,MAAO,CAAE,QAASN,CAAA,EAClB,UAAWI,EAAO,kBAEjB,SAAAf,EAAQ,IAAI,CAACS,EAAQS,IAAU,CAC9B,MAAMC,EAAc,OAAOV,EAAO,OAAU,SAAWA,EAAO,MAAQ,UAAUS,CAAK,GACrF,OACEF,EAAAA,IAAC,SAAA,CAEC,QAASP,EAAO,QAChB,UAAW,GAAGM,EAAO,YAAY,IAAIN,EAAO,WAAa,EAAE,GAAG,KAAA,EAC9D,MAAO,CACL,MAAOA,EAAO,OAAS,GACvB,gBAAiBA,EAAO,iBAAmB,UAC3C,MAAOA,EAAO,OAAS,OAAA,EAEzB,aAAYA,EAAO,WAAaU,EAE/B,SAAAV,EAAO,KAAA,EAVHS,CAAA,CAaX,CAAC,CAAA,CAAA,EAIHF,EAAAA,IAACC,EAAAA,OAAO,IAAP,CACC,KAAK,IACL,gBAAiB,CAAE,KAAMP,EAAe,MAAO,CAAA,EAC/C,YAAa,GACb,MAAO,CAAE,EAAAR,CAAA,EACT,UAAWW,EACX,UAAWE,EAAO,WAEjB,SAAAhB,CAAA,CAAA,CACH,EACF,CAEJ"}

package/dist/swipe-row.es.js

@@ -0,0 +1,58 @@
+import { jsxs as y, jsx as c } from "react/jsx-runtime";
+import { useMotionValue as b, useTransform as _, motion as i, animate as l } from "framer-motion";
+import { useRef as h, useMemo as k } from "react";
+const B = "_container_1y7jq_1", w = "_actionsBackground_1y7jq_11", j = "_actionButton_1y7jq_19", C = "_foreground_1y7jq_35", e = {
+  container: B,
+  actionsBackground: w,
+  actionButton: j,
+  foreground: C
+};
+function x({ children: u, actions: a, maxSwipe: s }) {
+  const n = b(0), d = h(null), g = k(() => -a.reduce((o, r) => o + (r.width || 80), 0), [a]), t = s !== void 0 ? s : g, f = _(n, [t / 2, 0], [1, 0]), m = () => {
+    n.get() < t / 2 ? l(n, t, { type: "spring", bounce: 0, duration: 0.3 }) : l(n, 0, { type: "spring", bounce: 0, duration: 0.3 });
+  };
+  return /* @__PURE__ */ y("div", { ref: d, className: e.container, children: [
+    /* @__PURE__ */ c(
+      i.div,
+      {
+        style: { opacity: f },
+        className: e.actionsBackground,
+        children: a.map((o, r) => {
+          const p = typeof o.label == "string" ? o.label : `Action ${r}`;
+          return /* @__PURE__ */ c(
+            "button",
+            {
+              onClick: o.onClick,
+              className: `${e.actionButton} ${o.className || ""}`.trim(),
+              style: {
+                width: o.width || 80,
+                backgroundColor: o.backgroundColor || "#64748b",
+                // Slate
+                color: o.color || "white"
+              },
+              "aria-label": o.ariaLabel || p,
+              children: o.label
+            },
+            r
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ c(
+      i.div,
+      {
+        drag: "x",
+        dragConstraints: { left: t, right: 0 },
+        dragElastic: 0.1,
+        style: { x: n },
+        onDragEnd: m,
+        className: e.foreground,
+        children: u
+      }
+    )
+  ] });
+}
+export {
+  x as SwipeRow
+};
+//# sourceMappingURL=swipe-row.es.js.map

package/dist/swipe-row.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe-row.es.js","sources":["../src/components/SwipeRow/SwipeRow.tsx"],"sourcesContent":["import { motion, useMotionValue, useTransform, animate } from 'framer-motion';\nimport { useRef, useMemo } from 'react';\nimport styles from './SwipeRow.module.css';\n\nexport type SwipeAction = {\n  /** The visual content of the button (e.g. text or icon) */\n  label: React.ReactNode;\n  /** Callback triggered when this action is clicked */\n  onClick: () => void;\n  /** Background color for this action button */\n  backgroundColor?: string;\n  /** Text color for this action button */\n  color?: string;\n  /** Width of the button. Defaults to 80px */\n  width?: number;\n  /** Additional CSS class for the button */\n  className?: string;\n  /** Accessibility label. Defaults to label if it is a string a fallback string */\n  ariaLabel?: string;\n};\n\nexport type SwipeRowProps = {\n  /** The content to be displayed in the row */\n  children: React.ReactNode;\n  /** An array of action objects to render behind the row */\n  actions: SwipeAction[];\n  /** Optional custom swipe threshold. Computed automatically if not provided. */\n  maxSwipe?: number;\n};\n\n/**\n * SwipeRow creates an iOS style swipeable row element that reveals generic actions behind it.\n * Highly configurable and built for generic use across various projects.\n */\nexport function SwipeRow({ children, actions, maxSwipe }: SwipeRowProps) {\n  const x = useMotionValue(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const calculatedMaxSwipe = useMemo(() => {\n    return -actions.reduce((acc, action) => acc + (action.width || 80), 0);\n  }, [actions]);\n\n  const swipeDistance = maxSwipe !== undefined ? maxSwipe : calculatedMaxSwipe;\n\n  const backgroundOpacity = useTransform(x, [swipeDistance / 2, 0], [1, 0]);\n\n  const handleDragEnd = () => {\n    const current = x.get();\n\n    // Swipe threshold to snap open\n    if (current < swipeDistance / 2) {\n      animate(x, swipeDistance, { type: 'spring', bounce: 0, duration: 0.3 });\n    } else {\n      animate(x, 0, { type: 'spring', bounce: 0, duration: 0.3 });\n    }\n  };\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      {/* ACTIONS BACKGROUND */}\n      <motion.div\n        style={{ opacity: backgroundOpacity }}\n        className={styles.actionsBackground}\n      >\n        {actions.map((action, index) => {\n          const defaultAria = typeof action.label === 'string' ? action.label : `Action ${index}`;\n          return (\n            <button\n              key={index}\n              onClick={action.onClick}\n              className={`${styles.actionButton} ${action.className || ''}`.trim()}\n              style={{\n                width: action.width || 80,\n                backgroundColor: action.backgroundColor || '#64748b', // Slate\n                color: action.color || 'white',\n              }}\n              aria-label={action.ariaLabel || defaultAria}\n            >\n              {action.label}\n            </button>\n          );\n        })}\n      </motion.div>\n\n      {/* FOREGROUND */}\n      <motion.div\n        drag=\"x\"\n        dragConstraints={{ left: swipeDistance, right: 0 }}\n        dragElastic={0.1}\n        style={{ x }}\n        onDragEnd={handleDragEnd}\n        className={styles.foreground}\n      >\n        {children}\n      </motion.div>\n    </div>\n  );\n}\n"],"names":["SwipeRow","children","actions","maxSwipe","x","useMotionValue","containerRef","useRef","calculatedMaxSwipe","useMemo","acc","action","swipeDistance","backgroundOpacity","useTransform","handleDragEnd","animate","styles","jsx","motion","index","defaultAria"],"mappings":";;;;;;;;;AAkCO,SAASA,EAAS,EAAE,UAAAC,GAAU,SAAAC,GAAS,UAAAC,KAA2B;AACvE,QAAMC,IAAIC,EAAe,CAAC,GACpBC,IAAeC,EAAuB,IAAI,GAE1CC,IAAqBC,EAAQ,MAC1B,CAACP,EAAQ,OAAO,CAACQ,GAAKC,MAAWD,KAAOC,EAAO,SAAS,KAAK,CAAC,GACpE,CAACT,CAAO,CAAC,GAENU,IAAgBT,MAAa,SAAYA,IAAWK,GAEpDK,IAAoBC,EAAaV,GAAG,CAACQ,IAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAElEG,IAAgB,MAAM;AAI1B,IAHgBX,EAAE,IAAA,IAGJQ,IAAgB,IAC5BI,EAAQZ,GAAGQ,GAAe,EAAE,MAAM,UAAU,QAAQ,GAAG,UAAU,KAAK,IAEtEI,EAAQZ,GAAG,GAAG,EAAE,MAAM,UAAU,QAAQ,GAAG,UAAU,KAAK;AAAA,EAE9D;AAEA,2BACG,OAAA,EAAI,KAAKE,GAAc,WAAWW,EAAO,WAExC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC,EAAO;AAAA,MAAP;AAAA,QACC,OAAO,EAAE,SAASN,EAAA;AAAA,QAClB,WAAWI,EAAO;AAAA,QAEjB,UAAAf,EAAQ,IAAI,CAACS,GAAQS,MAAU;AAC9B,gBAAMC,IAAc,OAAOV,EAAO,SAAU,WAAWA,EAAO,QAAQ,UAAUS,CAAK;AACrF,iBACE,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,SAASP,EAAO;AAAA,cAChB,WAAW,GAAGM,EAAO,YAAY,IAAIN,EAAO,aAAa,EAAE,GAAG,KAAA;AAAA,cAC9D,OAAO;AAAA,gBACL,OAAOA,EAAO,SAAS;AAAA,gBACvB,iBAAiBA,EAAO,mBAAmB;AAAA;AAAA,gBAC3C,OAAOA,EAAO,SAAS;AAAA,cAAA;AAAA,cAEzB,cAAYA,EAAO,aAAaU;AAAA,cAE/B,UAAAV,EAAO;AAAA,YAAA;AAAA,YAVHS;AAAA,UAAA;AAAA,QAaX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,gBAAAF;AAAA,MAACC,EAAO;AAAA,MAAP;AAAA,QACC,MAAK;AAAA,QACL,iBAAiB,EAAE,MAAMP,GAAe,OAAO,EAAA;AAAA,QAC/C,aAAa;AAAA,QACb,OAAO,EAAE,GAAAR,EAAA;AAAA,QACT,WAAWW;AAAA,QACX,WAAWE,EAAO;AAAA,QAEjB,UAAAhB;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "swipe-row",
+  "version": "1.0.0",
+  "description": "A highly customizable, iOS-style swipeable row component for React applications.",
+  "type": "module",
+  "main": "./dist/swipe-row.cjs.js",
+  "module": "./dist/swipe-row.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/swipe-row.es.js",
+      "require": "./dist/swipe-row.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test": "vitest run",
+    "test:ui": "vitest --ui"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.3.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/ui": "^3.2.4",
+    "jsdom": "^27.0.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.9.0",
+    "vitest": "^3.2.4"
+  },
+  "keywords": [
+    "react",
+    "framer-motion",
+    "swipe",
+    "swipeable",
+    "list",
+    "row",
+    "ios",
+    "gesture",
+    "components"
+  ],
+  "author": "nahkar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nahkar/swipe-row.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nahkar/swipe-row/issues"
+  },
+  "homepage": "https://github.com/nahkar/swipe-row#readme",
+  "license": "MIT",
+  "dependencies": {
+    "framer-motion": "^12.34.3"
+  }
+}