react-sway 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -1,9 +1,62 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
+/**
+ * Props for the ReactSway infinite scrolling component.
+ */
 interface ReactSwayProps {
+    /** Enable/disable auto-scrolling. @default true */
+    autoScroll?: boolean;
+    /** Content elements to render in the infinite scroll container. */
     children: ReactNode;
+    /** Auto-scroll direction. @default 'up' */
+    direction?: 'down' | 'up';
+    /** Enable mouse/touch drag interaction. @default true */
+    draggable?: boolean;
+    /** Momentum decay coefficient (0-1, lower = more friction). @default 0.95 */
+    friction?: number;
+    /** Enable keyboard controls (Space, ArrowUp/Down, Home/End). @default true */
+    keyboard?: boolean;
+    /** Enable lazy visibility detection via IntersectionObserver. @default true */
+    lazy?: boolean;
+    /** IntersectionObserver rootMargin for lazy visibility detection. @default '100px' */
+    lazyRootMargin?: string;
+    /** IntersectionObserver threshold for lazy visibility detection. @default 0.01 */
+    lazyThreshold?: number;
+    /** Fired when scrolling pauses (user interaction or Space key). */
+    onPause?: () => void;
+    /** Fired when scrolling resumes after pause. */
+    onResume?: () => void;
+    /** Fired on every position change with the current scroll position. */
+    onScroll?: (position: number) => void;
+    /** Pause auto-scroll during user interaction. @default true */
+    pauseOnInteraction?: boolean;
+    /** Milliseconds before auto-scroll resumes after interaction. @default 2000 */
+    resumeDelay?: number;
+    /** Auto-scroll speed in pixels per frame at 60fps. @default 0.5 */
+    speed?: number;
+    /** Enable mouse wheel scrolling. @default true */
+    wheelEnabled?: boolean;
 }
-declare function ReactSway({ children }: ReactSwayProps): react_jsx_runtime.JSX.Element;
+/**
+ * A smooth, infinite scrolling container component.
+ *
+ * Renders children in a continuously looping scroll area with support for
+ * auto-scrolling, mouse drag, touch swipe, wheel, and keyboard interactions.
+ * Content is duplicated to create a seamless loop effect. Duplicate content
+ * is wrapped in `<aside>` elements with `aria-hidden="true"` for accessibility.
+ *
+ * Respects `prefers-reduced-motion: reduce` by lowering auto-scroll speed
+ * and disabling momentum effects.
+ *
+ * @example
+ * ```tsx
+ * <ReactSway direction="up" speed={1} friction={0.9}>
+ *   <div className="content-item">Item 1</div>
+ *   <div className="content-item">Item 2</div>
+ * </ReactSway>
+ * ```
+ */
+declare function ReactSway({ autoScroll, children, direction, draggable, friction, keyboard, lazy, lazyRootMargin, lazyThreshold, onPause, onResume, onScroll, pauseOnInteraction, resumeDelay, speed, wheelEnabled, }: ReactSwayProps): react_jsx_runtime.JSX.Element;
 
-export { ReactSway };
+export { ReactSway, type ReactSwayProps };

package/dist/index.d.ts

@@ -1,9 +1,62 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
+/**
+ * Props for the ReactSway infinite scrolling component.
+ */
 interface ReactSwayProps {
+    /** Enable/disable auto-scrolling. @default true */
+    autoScroll?: boolean;
+    /** Content elements to render in the infinite scroll container. */
     children: ReactNode;
+    /** Auto-scroll direction. @default 'up' */
+    direction?: 'down' | 'up';
+    /** Enable mouse/touch drag interaction. @default true */
+    draggable?: boolean;
+    /** Momentum decay coefficient (0-1, lower = more friction). @default 0.95 */
+    friction?: number;
+    /** Enable keyboard controls (Space, ArrowUp/Down, Home/End). @default true */
+    keyboard?: boolean;
+    /** Enable lazy visibility detection via IntersectionObserver. @default true */
+    lazy?: boolean;
+    /** IntersectionObserver rootMargin for lazy visibility detection. @default '100px' */
+    lazyRootMargin?: string;
+    /** IntersectionObserver threshold for lazy visibility detection. @default 0.01 */
+    lazyThreshold?: number;
+    /** Fired when scrolling pauses (user interaction or Space key). */
+    onPause?: () => void;
+    /** Fired when scrolling resumes after pause. */
+    onResume?: () => void;
+    /** Fired on every position change with the current scroll position. */
+    onScroll?: (position: number) => void;
+    /** Pause auto-scroll during user interaction. @default true */
+    pauseOnInteraction?: boolean;
+    /** Milliseconds before auto-scroll resumes after interaction. @default 2000 */
+    resumeDelay?: number;
+    /** Auto-scroll speed in pixels per frame at 60fps. @default 0.5 */
+    speed?: number;
+    /** Enable mouse wheel scrolling. @default true */
+    wheelEnabled?: boolean;
 }
-declare function ReactSway({ children }: ReactSwayProps): react_jsx_runtime.JSX.Element;
+/**
+ * A smooth, infinite scrolling container component.
+ *
+ * Renders children in a continuously looping scroll area with support for
+ * auto-scrolling, mouse drag, touch swipe, wheel, and keyboard interactions.
+ * Content is duplicated to create a seamless loop effect. Duplicate content
+ * is wrapped in `<aside>` elements with `aria-hidden="true"` for accessibility.
+ *
+ * Respects `prefers-reduced-motion: reduce` by lowering auto-scroll speed
+ * and disabling momentum effects.
+ *
+ * @example
+ * ```tsx
+ * <ReactSway direction="up" speed={1} friction={0.9}>
+ *   <div className="content-item">Item 1</div>
+ *   <div className="content-item">Item 2</div>
+ * </ReactSway>
+ * ```
+ */
+declare function ReactSway({ autoScroll, children, direction, draggable, friction, keyboard, lazy, lazyRootMargin, lazyThreshold, onPause, onResume, onScroll, pauseOnInteraction, resumeDelay, speed, wheelEnabled, }: ReactSwayProps): react_jsx_runtime.JSX.Element;
 
-export { ReactSway };
+export { ReactSway, type ReactSwayProps };