@goodmanlabs/react-swipe-row 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Glenn Goodman
+
+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,23 @@
+# react-swipe-row
+
+A native-feeling horizontal “card rail” for React — momentum scrolling + scroll-snap alignment, with optional desktop paging controls.
+
+This was built to solve a common UI problem: you want a horizontally scrollable row of arbitrary content (cards, tiles, chips, etc.) where the number and size of items is unknown, and you don’t want a “slide-based carousel” that feels artificial or forces layout math.
+
+`react-swipe-row` is intentionally **unopinionated**:
+- You provide the content (any React nodes)
+- The row scrolls naturally (trackpad, mousewheel, touch)
+- Scroll-snap keeps items aligned
+- Optional left/right controls appear automatically on “desktop-like” pointers
+- Control styling (buttons) and item spacing are exposed via props (no need to target internal DOM or CSS)
+
+---
+
+## Install
+
+```bash
+npm install react-swipe-row
+# or
+pnpm add react-swipe-row
+# or
+yarn add react-swipe-row

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ShowControlsMode = 'auto' | 'always' | 'never';
+type SwipeRowClassNames = {
+    /** Outer wrapper around the scroller + controls */
+    root?: string;
+    /** The horizontal scroller element */
+    scroller?: string;
+    /** Wrapper around each item (the snap target) */
+    item?: string;
+    /** Shared class applied to both buttons */
+    controlButton?: string;
+    /** Prev button */
+    prevButton?: string;
+    /** Next button */
+    nextButton?: string;
+};
+type SwipeRowProps = {
+    /** Optional array of React nodes (alternative to children) */
+    items?: React.ReactNode[];
+    children?: React.ReactNode;
+    ariaLabel?: string;
+    /** Enable CSS scroll-snap */
+    snap?: boolean;
+    /** How far arrows / keyboard page (fraction of visible width) */
+    pageFactor?: number;
+    /** When to show left/right controls */
+    showControls?: ShowControlsMode;
+    /** Optional stable id for aria-controls */
+    id?: string;
+    /** Extra class on outer wrapper */
+    className?: string;
+    /**
+     * Spacing between items.
+     * This is a class hook (NOT Tailwind-specific). For non-Tailwind consumers,
+     * they'll typically use the provided default CSS and ignore this.
+     */
+    gapClassName?: string;
+    /** More granular class hooks */
+    classNames?: SwipeRowClassNames;
+    /**
+     * Optional inline style passthrough for the scroller.
+     * Useful for consumers that want scrollbarGutter, etc.
+     */
+    scrollerStyle?: React.CSSProperties;
+};
+declare function SwipeRow({ items, children, ariaLabel, className, gapClassName, snap, pageFactor, showControls, id, classNames, scrollerStyle, }: SwipeRowProps): react_jsx_runtime.JSX.Element;
+
+export { type ShowControlsMode, SwipeRow, type SwipeRowClassNames, type SwipeRowProps, SwipeRow as default };

package/dist/index.js

@@ -0,0 +1,156 @@
+// src/SwipeRow.tsx
+import React, { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function SwipeRow({
+  items,
+  children,
+  ariaLabel = "Scrollable content",
+  className,
+  gapClassName,
+  snap = true,
+  pageFactor = 0.9,
+  showControls = "auto",
+  id,
+  classNames,
+  scrollerStyle
+}) {
+  const scrollerRef = useRef(null);
+  const [canLeft, setCanLeft] = useState(false);
+  const [canRight, setCanRight] = useState(false);
+  const [controlsOn, setControlsOn] = useState(showControls === "always");
+  const autoId = useId();
+  const regionId = id != null ? id : autoId;
+  const content = useMemo(() => {
+    if (items) return items;
+    return React.Children.toArray(children);
+  }, [items, children]);
+  useEffect(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const update = () => {
+      const max = el.scrollWidth - el.clientWidth - 1;
+      setCanLeft(el.scrollLeft > 0);
+      setCanRight(el.scrollLeft < max);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    return () => {
+      el.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (showControls !== "auto") {
+      setControlsOn(showControls === "always");
+      return;
+    }
+    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
+    const set = () => setControlsOn(mq.matches);
+    set();
+    if (mq.addEventListener) mq.addEventListener("change", set);
+    else (_a = mq.addListener) == null ? void 0 : _a.call(mq, set);
+    return () => {
+      var _a2;
+      if (mq.removeEventListener) mq.removeEventListener("change", set);
+      else (_a2 = mq.removeListener) == null ? void 0 : _a2.call(mq, set);
+    };
+  }, [showControls]);
+  const page = (dir) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const step = Math.round(el.clientWidth * pageFactor);
+    el.scrollBy({ left: dir * step, behavior: "smooth" });
+  };
+  const onKeyDown = (e) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const step = Math.round(el.clientWidth * pageFactor);
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      el.scrollBy({ left: step, behavior: "smooth" });
+    }
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      el.scrollBy({ left: -step, behavior: "smooth" });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("rsr-root", className, classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollerRef,
+        role: "region",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+        onKeyDown,
+        className: cx(
+          "rsr-scroller",
+          snap && "rsr-snap",
+          gapClassName,
+          classNames == null ? void 0 : classNames.scroller
+        ),
+        style: {
+          WebkitOverflowScrolling: "touch",
+          // matches your original (optional, but harmless)
+          scrollbarGutter: "stable both-edges",
+          ...scrollerStyle
+        },
+        id: regionId,
+        children: content.map((node, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx("rsr-item", snap && "rsr-snap-item", classNames == null ? void 0 : classNames.item),
+            children: node
+          },
+          i
+        ))
+      }
+    ),
+    controlsOn && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => page(-1),
+          disabled: !canLeft,
+          "aria-controls": regionId,
+          "aria-label": "Scroll left",
+          className: cx(
+            "rsr-control",
+            "rsr-prev",
+            classNames == null ? void 0 : classNames.controlButton,
+            classNames == null ? void 0 : classNames.prevButton
+          ),
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => page(1),
+          disabled: !canRight,
+          "aria-controls": regionId,
+          "aria-label": "Scroll right",
+          className: cx(
+            "rsr-control",
+            "rsr-next",
+            classNames == null ? void 0 : classNames.controlButton,
+            classNames == null ? void 0 : classNames.nextButton
+          ),
+          children: "\u203A"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  SwipeRow,
+  SwipeRow as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SwipeRow.tsx"],"sourcesContent":["import React, { useEffect, useId, useMemo, useRef, useState } from 'react';\n\nexport type ShowControlsMode = 'auto' | 'always' | 'never';\n\nexport type SwipeRowClassNames = {\n    /** Outer wrapper around the scroller + controls */\n    root?: string;\n    /** The horizontal scroller element */\n    scroller?: string;\n    /** Wrapper around each item (the snap target) */\n    item?: string;\n    /** Shared class applied to both buttons */\n    controlButton?: string;\n    /** Prev button */\n    prevButton?: string;\n    /** Next button */\n    nextButton?: string;\n};\n\nexport type SwipeRowProps = {\n    /** Optional array of React nodes (alternative to children) */\n    items?: React.ReactNode[];\n    children?: React.ReactNode;\n\n    ariaLabel?: string;\n\n    /** Enable CSS scroll-snap */\n    snap?: boolean;\n\n    /** How far arrows / keyboard page (fraction of visible width) */\n    pageFactor?: number;\n\n    /** When to show left/right controls */\n    showControls?: ShowControlsMode;\n\n    /** Optional stable id for aria-controls */\n    id?: string;\n\n    /** Extra class on outer wrapper */\n    className?: string;\n\n    /**\n     * Spacing between items.\n     * This is a class hook (NOT Tailwind-specific). For non-Tailwind consumers,\n     * they'll typically use the provided default CSS and ignore this.\n     */\n    gapClassName?: string;\n\n    /** More granular class hooks */\n    classNames?: SwipeRowClassNames;\n\n    /**\n     * Optional inline style passthrough for the scroller.\n     * Useful for consumers that want scrollbarGutter, etc.\n     */\n    scrollerStyle?: React.CSSProperties;\n};\n\nfunction cx(...parts: Array<string | undefined | false | null>) {\n    return parts.filter(Boolean).join(' ');\n}\n\nexport default function SwipeRow({\n                                     items,\n                                     children,\n                                     ariaLabel = 'Scrollable content',\n                                     className,\n                                     gapClassName,\n                                     snap = true,\n                                     pageFactor = 0.9,\n                                     showControls = 'auto',\n                                     id,\n                                     classNames,\n                                     scrollerStyle,\n                                 }: SwipeRowProps) {\n    const scrollerRef = useRef<HTMLDivElement | null>(null);\n\n    const [canLeft, setCanLeft] = useState(false);\n    const [canRight, setCanRight] = useState(false);\n    const [controlsOn, setControlsOn] = useState(showControls === 'always');\n\n    const autoId = useId();\n    const regionId = id ?? autoId;\n\n    const content = useMemo(() => {\n        if (items) return items;\n        return React.Children.toArray(children);\n    }, [items, children]);\n\n    // Enable/disable arrows based on scroll position\n    useEffect(() => {\n        const el = scrollerRef.current;\n        if (!el) return;\n\n        const update = () => {\n            // tolerance: helps avoid off-by-1 due to subpixel rounding\n            const max = el.scrollWidth - el.clientWidth - 1;\n            setCanLeft(el.scrollLeft > 0);\n            setCanRight(el.scrollLeft < max);\n        };\n\n        update();\n        el.addEventListener('scroll', update, { passive: true });\n        window.addEventListener('resize', update);\n\n        return () => {\n            el.removeEventListener('scroll', update);\n            window.removeEventListener('resize', update);\n        };\n    }, []);\n\n    // Decide when to show controls (desktop-ish)\n    useEffect(() => {\n        if (showControls !== 'auto') {\n            setControlsOn(showControls === 'always');\n            return;\n        }\n\n        const mq = window.matchMedia('(hover: hover) and (pointer: fine)');\n        const set = () => setControlsOn(mq.matches);\n\n        set();\n\n        // Safari fallback\n        if (mq.addEventListener) mq.addEventListener('change', set);\n        // eslint-disable-next-line deprecation/deprecation\n        else mq.addListener?.(set);\n\n        return () => {\n            if (mq.removeEventListener) mq.removeEventListener('change', set);\n            // eslint-disable-next-line deprecation/deprecation\n            else mq.removeListener?.(set);\n        };\n    }, [showControls]);\n\n    const page = (dir: -1 | 1) => {\n        const el = scrollerRef.current;\n        if (!el) return;\n        const step = Math.round(el.clientWidth * pageFactor);\n        el.scrollBy({ left: dir * step, behavior: 'smooth' });\n    };\n\n    // Keyboard paging (a11y)\n    const onKeyDown = (e: React.KeyboardEvent) => {\n        const el = scrollerRef.current;\n        if (!el) return;\n        const step = Math.round(el.clientWidth * pageFactor);\n\n        if (e.key === 'ArrowRight') {\n            e.preventDefault();\n            el.scrollBy({ left: step, behavior: 'smooth' });\n        }\n        if (e.key === 'ArrowLeft') {\n            e.preventDefault();\n            el.scrollBy({ left: -step, behavior: 'smooth' });\n        }\n    };\n\n    return (\n        <div className={cx('rsr-root', className, classNames?.root)}>\n            <div\n                ref={scrollerRef}\n                role=\"region\"\n                aria-label={ariaLabel}\n                tabIndex={0}\n                onKeyDown={onKeyDown}\n                className={cx(\n                    'rsr-scroller',\n                    snap && 'rsr-snap',\n                    gapClassName,\n                    classNames?.scroller\n                )}\n                style={{\n                    WebkitOverflowScrolling: 'touch',\n                    // matches your original (optional, but harmless)\n                    scrollbarGutter: 'stable both-edges',\n                    ...scrollerStyle,\n                }}\n                id={regionId}\n            >\n                {content.map((node, i) => (\n                    <div\n                        key={i}\n                        className={cx('rsr-item', snap && 'rsr-snap-item', classNames?.item)}\n                    >\n                        {node}\n                    </div>\n                ))}\n            </div>\n\n            {controlsOn && (\n                <>\n                    <button\n                        type=\"button\"\n                        onClick={() => page(-1)}\n                        disabled={!canLeft}\n                        aria-controls={regionId}\n                        aria-label=\"Scroll left\"\n                        className={cx(\n                            'rsr-control',\n                            'rsr-prev',\n                            classNames?.controlButton,\n                            classNames?.prevButton\n                        )}\n                    >\n                        ‹\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        onClick={() => page(1)}\n                        disabled={!canRight}\n                        aria-controls={regionId}\n                        aria-label=\"Scroll right\"\n                        className={cx(\n                            'rsr-control',\n                            'rsr-next',\n                            classNames?.controlButton,\n                            classNames?.nextButton\n                        )}\n                    >\n                        ›\n                    </button>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":";AAAA,OAAO,SAAS,WAAW,OAAO,SAAS,QAAQ,gBAAgB;AAqL/C,SAUJ,UAVI,KAUJ,YAVI;AA3HpB,SAAS,MAAM,OAAiD;AAC5D,SAAO,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAEe,SAAR,SAA0B;AAAA,EACI;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACJ,GAAkB;AAC/C,QAAM,cAAc,OAA8B,IAAI;AAEtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,iBAAiB,QAAQ;AAEtE,QAAM,SAAS,MAAM;AACrB,QAAM,WAAW,kBAAM;AAEvB,QAAM,UAAU,QAAQ,MAAM;AAC1B,QAAI,MAAO,QAAO;AAClB,WAAO,MAAM,SAAS,QAAQ,QAAQ;AAAA,EAC1C,GAAG,CAAC,OAAO,QAAQ,CAAC;AAGpB,YAAU,MAAM;AACZ,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AAET,UAAM,SAAS,MAAM;AAEjB,YAAM,MAAM,GAAG,cAAc,GAAG,cAAc;AAC9C,iBAAW,GAAG,aAAa,CAAC;AAC5B,kBAAY,GAAG,aAAa,GAAG;AAAA,IACnC;AAEA,WAAO;AACP,OAAG,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;AACvD,WAAO,iBAAiB,UAAU,MAAM;AAExC,WAAO,MAAM;AACT,SAAG,oBAAoB,UAAU,MAAM;AACvC,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAC/C;AAAA,EACJ,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AAhHpB;AAiHQ,QAAI,iBAAiB,QAAQ;AACzB,oBAAc,iBAAiB,QAAQ;AACvC;AAAA,IACJ;AAEA,UAAM,KAAK,OAAO,WAAW,oCAAoC;AACjE,UAAM,MAAM,MAAM,cAAc,GAAG,OAAO;AAE1C,QAAI;AAGJ,QAAI,GAAG,iBAAkB,IAAG,iBAAiB,UAAU,GAAG;AAAA,QAErD,UAAG,gBAAH,4BAAiB;AAEtB,WAAO,MAAM;AAhIrB,UAAAA;AAiIY,UAAI,GAAG,oBAAqB,IAAG,oBAAoB,UAAU,GAAG;AAAA,UAE3D,EAAAA,MAAA,GAAG,mBAAH,gBAAAA,IAAA,SAAoB;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,OAAO,CAAC,QAAgB;AAC1B,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,KAAK,MAAM,GAAG,cAAc,UAAU;AACnD,OAAG,SAAS,EAAE,MAAM,MAAM,MAAM,UAAU,SAAS,CAAC;AAAA,EACxD;AAGA,QAAM,YAAY,CAAC,MAA2B;AAC1C,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,KAAK,MAAM,GAAG,cAAc,UAAU;AAEnD,QAAI,EAAE,QAAQ,cAAc;AACxB,QAAE,eAAe;AACjB,SAAG,SAAS,EAAE,MAAM,MAAM,UAAU,SAAS,CAAC;AAAA,IAClD;AACA,QAAI,EAAE,QAAQ,aAAa;AACvB,QAAE,eAAe;AACjB,SAAG,SAAS,EAAE,MAAM,CAAC,MAAM,UAAU,SAAS,CAAC;AAAA,IACnD;AAAA,EACJ;AAEA,SACI,qBAAC,SAAI,WAAW,GAAG,YAAY,WAAW,yCAAY,IAAI,GACtD;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACP;AAAA,UACA,QAAQ;AAAA,UACR;AAAA,UACA,yCAAY;AAAA,QAChB;AAAA,QACA,OAAO;AAAA,UACH,yBAAyB;AAAA;AAAA,UAEzB,iBAAiB;AAAA,UACjB,GAAG;AAAA,QACP;AAAA,QACA,IAAI;AAAA,QAEH,kBAAQ,IAAI,CAAC,MAAM,MAChB;AAAA,UAAC;AAAA;AAAA,YAEG,WAAW,GAAG,YAAY,QAAQ,iBAAiB,yCAAY,IAAI;AAAA,YAElE;AAAA;AAAA,UAHI;AAAA,QAIT,CACH;AAAA;AAAA,IACL;AAAA,IAEC,cACG,iCACI;AAAA;AAAA,QAAC;AAAA;AAAA,UACG,MAAK;AAAA,UACL,SAAS,MAAM,KAAK,EAAE;AAAA,UACtB,UAAU,CAAC;AAAA,UACX,iBAAe;AAAA,UACf,cAAW;AAAA,UACX,WAAW;AAAA,YACP;AAAA,YACA;AAAA,YACA,yCAAY;AAAA,YACZ,yCAAY;AAAA,UAChB;AAAA,UACH;AAAA;AAAA,MAED;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACG,MAAK;AAAA,UACL,SAAS,MAAM,KAAK,CAAC;AAAA,UACrB,UAAU,CAAC;AAAA,UACX,iBAAe;AAAA,UACf,cAAW;AAAA,UACX,WAAW;AAAA,YACP;AAAA,YACA;AAAA,YACA,yCAAY;AAAA,YACZ,yCAAY;AAAA,UAChB;AAAA,UACH;AAAA;AAAA,MAED;AAAA,OACJ;AAAA,KAER;AAER;","names":["_a"]}

package/dist/style.css

@@ -0,0 +1,87 @@
+/* react-swipe-row: minimal mechanics (unopinionated) */
+
+.rsr-root {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+}
+
+/* Horizontal rail */
+.rsr-scroller {
+    width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    /* layout */
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    align-items: stretch;
+
+    /* prevents parent page swipe-back stealing horizontal scroll */
+    overscroll-behavior-x: contain;
+}
+
+/* Snap behavior */
+.rsr-snap {
+    scroll-snap-type: x mandatory;
+}
+
+.rsr-item {
+    align-self: stretch;
+}
+
+.rsr-snap-item {
+    scroll-snap-align: start;
+}
+
+/* Controls (neutral default styling) */
+.rsr-control {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 36px;
+    height: 36px;
+    border-radius: 9999px;
+
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    background: rgba(255, 255, 255, 0.9);
+    color: rgba(0, 0, 0, 0.85);
+
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.rsr-control:hover {
+    background: rgba(255, 255, 255, 1);
+}
+
+.rsr-control:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+
+.rsr-prev {
+    left: 8px;
+}
+
+.rsr-next {
+    right: 8px;
+}
+
+/* Optional: hide scrollbar in browsers that support it */
+.rsr-scroller {
+    scrollbar-width: none; /* Firefox */
+}
+.rsr-scroller::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@goodmanlabs/react-swipe-row",
+  "version": "0.1.0",
+  "author": "Glenn Goodman",
+  "description": "A native-feeling horizontal scroll-snap card rail for React",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gpgoodman/react-swipe-row.git"
+  },
+  "homepage": "https://github.com/gpgoodman/react-swipe-row#readme",
+  "bugs": {
+    "url": "https://github.com/gpgoodman/react-swipe-row/issues"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "horizontal-scroll",
+    "scroll-snap",
+    "carousel",
+    "card-rail",
+    "swipe",
+    "gesture",
+    "touch",
+    "momentum-scroll",
+    "ui",
+    "frontend",
+    "scrollable",
+    "horizontal",
+    "card-carousel"
+  ],
+  "sideEffects": [
+    "dist/style.css"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/react": "^19.2.8",
+    "happy-dom": "^20.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.17"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run test && npm run build",
+    "build": "tsup && cp src/style.css dist/style.css",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}