react-scroll-indicators 0.1.0

package/README.md

@@ -0,0 +1,81 @@
+# react-scroll-indicators
+
+A small React library that provides **OverflowContainer** — a scrollable container with hover-activated gradient indicators when content overflows. Supports horizontal and vertical scrolling.
+
+## Install
+
+```bash
+npm install react-scroll-indicators
+# or
+pnpm add react-scroll-indicators
+# or
+yarn add react-scroll-indicators
+```
+
+## Peer dependencies
+
+- `react` (>=17)
+- `react-dom` (>=17)
+
+If you use Tailwind CSS, the default indicator styles use Tailwind utility classes. You can override them with `indicatorClassName` or your own CSS.
+
+## Usage
+
+```tsx
+import { OverflowContainer } from "react-scroll-indicators";
+
+function MyComponent() {
+  return (
+    <OverflowContainer className="max-w-md h-48">
+      <div className="flex gap-4">
+        {items.map((item) => (
+          <Card key={item.id} {...item} />
+        ))}
+      </div>
+    </OverflowContainer>
+  );
+}
+```
+
+### With vertical scroll
+
+```tsx
+<OverflowContainer
+  verticalScrollIndicators
+  horizontalScrollIndicators={false}
+  className="h-64 w-64"
+>
+  <div className="flex flex-col gap-2">{/* tall content */}</div>
+</OverflowContainer>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | Content inside the scroll area |
+| `className` | `string` | — | Outer wrapper class |
+| `containerClassName` | `string` | — | Inner scroll container class |
+| `scrollSpeed` | `number` | `10` | Scroll interval in ms (lower = faster) |
+| `scrollDistance` | `number` | `10` | Pixels to scroll per tick |
+| `scrollEndPadding` | `number` | `10` | Padding from end before stopping |
+| `showScrollIndicators` | `boolean` | `true` | Show gradient indicators |
+| `horizontalScrollIndicators` | `boolean` | `true` | Show left/right indicators |
+| `verticalScrollIndicators` | `boolean` | `false` | Show top/bottom indicators |
+| `indicatorClassName` | `string` | — | Override indicator styles |
+| `scrollOnHover` | `boolean` | `true` | Scroll when hovering over indicators |
+
+All standard `div` HTML attributes are also supported (e.g. `style`, `aria-*`).
+
+## Build
+
+```bash
+npm install
+npm run build
+```
+
+Output is in `dist/` (ESM + CJS + types).
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,216 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  OverflowContainer: () => OverflowContainer_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/OverflowContainer.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var OverflowContainer = (0, import_react.forwardRef)(
+  ({
+    className,
+    children,
+    scrollSpeed = 10,
+    scrollDistance = 10,
+    scrollEndPadding = 10,
+    containerClassName,
+    showScrollIndicators = true,
+    horizontalScrollIndicators = true,
+    verticalScrollIndicators = false,
+    indicatorClassName,
+    scrollOnHover = true,
+    ...props
+  }, forwardedRef) => {
+    const containerRef = (0, import_react.useRef)(null);
+    const [canScrollLeft, setCanScrollLeft] = (0, import_react.useState)(false);
+    const [canScrollRight, setCanScrollRight] = (0, import_react.useState)(false);
+    const [canScrollUp, setCanScrollUp] = (0, import_react.useState)(false);
+    const [canScrollDown, setCanScrollDown] = (0, import_react.useState)(false);
+    const intervalRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(() => {
+      if (process.env?.NODE_ENV === "development") {
+        if (scrollSpeed < 0) {
+          console.warn(
+            "OverflowContainer: scrollSpeed should be a positive number"
+          );
+        }
+        if (scrollDistance < 0) {
+          console.warn(
+            "OverflowContainer: scrollDistance should be a positive number"
+          );
+        }
+        if (scrollEndPadding < 0) {
+          console.warn(
+            "OverflowContainer: scrollEndPadding should be a positive number"
+          );
+        }
+      }
+    }, [scrollSpeed, scrollDistance, scrollEndPadding]);
+    const startScroll = (scrollDirection) => {
+      stopScroll();
+      const isHorizontal = scrollDirection === "left" || scrollDirection === "right";
+      const isBackward = scrollDirection === "left" || scrollDirection === "up";
+      const scrollAmount = isBackward ? -scrollDistance : scrollDistance;
+      const container = containerRef.current;
+      if (!container) return;
+      intervalRef.current = setInterval(() => {
+        if (!container) return;
+        const scrollPos = isHorizontal ? container.scrollLeft : container.scrollTop;
+        const scrollSize = isHorizontal ? container.scrollWidth : container.scrollHeight;
+        const clientSize = isHorizontal ? container.clientWidth : container.clientHeight;
+        const canScroll = isBackward ? scrollPos > 0 : scrollPos < scrollSize - clientSize;
+        if (!canScroll) {
+          stopScroll();
+          return;
+        }
+        updateScrollButtons();
+        container.scrollBy({
+          [isHorizontal ? "left" : "top"]: scrollAmount
+        });
+      }, scrollSpeed);
+    };
+    const updateScrollButtons = () => {
+      const container = containerRef.current;
+      if (!container) return;
+      const canScrollLeftVal = container.scrollLeft > scrollEndPadding;
+      const canScrollRightVal = container.scrollLeft < container.scrollWidth - container.clientWidth - scrollEndPadding;
+      const canScrollUpVal = container.scrollTop > scrollEndPadding;
+      const canScrollDownVal = container.scrollTop < container.scrollHeight - container.clientHeight - scrollEndPadding;
+      setCanScrollLeft(canScrollLeftVal);
+      setCanScrollRight(canScrollRightVal);
+      setCanScrollUp(canScrollUpVal);
+      setCanScrollDown(canScrollDownVal);
+    };
+    const stopScroll = () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+    (0, import_react.useEffect)(() => {
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(containerRef.current);
+      } else {
+        forwardedRef.current = containerRef.current;
+      }
+    }, [forwardedRef]);
+    (0, import_react.useEffect)(() => {
+      updateScrollButtons();
+      const container = containerRef.current;
+      if (!container) return;
+      const resizeObserver = new ResizeObserver(updateScrollButtons);
+      resizeObserver.observe(container);
+      return () => {
+        resizeObserver.disconnect();
+        stopScroll();
+      };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        role: "region",
+        "aria-label": "Scrollable content",
+        className: cn("flex relative overflow-hidden", className),
+        ...props,
+        children: [
+          showScrollIndicators && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute left-0 top-0 flex w-full h-full z-50 bg-transparent pointer-events-none", children: [
+            canScrollLeft && horizontalScrollIndicators && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: cn(
+                  "absolute h-full w-4 left-0 top-0 bg-gradient-to-l from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto",
+                  indicatorClassName
+                ),
+                onMouseEnter: () => scrollOnHover && startScroll("left"),
+                onMouseLeave: () => scrollOnHover && stopScroll()
+              }
+            ),
+            canScrollRight && horizontalScrollIndicators && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: cn(
+                  "absolute h-full w-4 right-0 top-0 bg-gradient-to-r from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto",
+                  indicatorClassName
+                ),
+                onMouseEnter: () => scrollOnHover && startScroll("right"),
+                onMouseLeave: () => scrollOnHover && stopScroll()
+              }
+            ),
+            canScrollUp && verticalScrollIndicators && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: cn(
+                  "absolute w-full h-5 left-0 top-0 bg-gradient-to-t from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto",
+                  indicatorClassName
+                ),
+                onMouseEnter: () => scrollOnHover && startScroll("up"),
+                onMouseLeave: () => scrollOnHover && stopScroll()
+              }
+            ),
+            canScrollDown && verticalScrollIndicators && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: cn(
+                  "absolute w-full h-5 left-0 bottom-0 bg-gradient-to-b from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto",
+                  indicatorClassName
+                ),
+                onMouseEnter: () => scrollOnHover && startScroll("down"),
+                onMouseLeave: () => scrollOnHover && stopScroll()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex relative overflow-auto w-full",
+                containerClassName
+              ),
+              ref: containerRef,
+              onScroll: updateScrollButtons,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+OverflowContainer.displayName = "OverflowContainer";
+var OverflowContainer_default = OverflowContainer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OverflowContainer
+});
+/**
+ * OverflowContainer – React component for smooth scrolling with hover-activated
+ * indicators when content overflows. Supports horizontal and vertical scrolling.
+ * @license MIT
+ */
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/OverflowContainer.tsx"],"sourcesContent":["export { default as OverflowContainer } from \"./OverflowContainer\";\nexport type { OverflowContainerProps } from \"./OverflowContainer\";\n","/**\n * OverflowContainer – React component for smooth scrolling with hover-activated\n * indicators when content overflows. Supports horizontal and vertical scrolling.\n * @license MIT\n */\n\nimport {\n  type ForwardedRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\ndeclare const process: { env?: { NODE_ENV?: string } };\n\nfunction cn(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(\" \");\n}\n\nexport interface OverflowContainerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Custom className for the outer container */\n  className?: string;\n\n  /** Content to be rendered inside the scroll container */\n  children: React.ReactNode;\n\n  /**\n   * Speed of the scroll animation in milliseconds. Lower = faster. Positive only.\n   * @default 10\n   */\n  scrollSpeed?: number;\n\n  /**\n   * Distance to scroll in pixels per interval. Positive only.\n   * @default 10\n   */\n  scrollDistance?: number;\n\n  /**\n   * Padding in pixels before the end to stop scrolling. Positive only.\n   * @default 10\n   */\n  scrollEndPadding?: number;\n\n  /** Custom className for the inner scrollable container */\n  containerClassName?: string;\n\n  /**\n   * Whether to show scroll indicators when content overflows.\n   * @default true\n   */\n  showScrollIndicators?: boolean;\n\n  /**\n   * Whether to show horizontal scroll indicators.\n   * @default true\n   */\n  horizontalScrollIndicators?: boolean;\n\n  /**\n   * Whether to show vertical scroll indicators.\n   * @default false\n   */\n  verticalScrollIndicators?: boolean;\n\n  /** Custom className for scroll indicators (overrides default styles) */\n  indicatorClassName?: string;\n\n  /**\n   * Whether to scroll when hovering over indicators.\n   * @default true\n   */\n  scrollOnHover?: boolean;\n}\n\nconst OverflowContainer = forwardRef(\n  (\n    {\n      className,\n      children,\n      scrollSpeed = 10,\n      scrollDistance = 10,\n      scrollEndPadding = 10,\n      containerClassName,\n      showScrollIndicators = true,\n      horizontalScrollIndicators = true,\n      verticalScrollIndicators = false,\n      indicatorClassName,\n      scrollOnHover = true,\n      ...props\n    }: OverflowContainerProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [canScrollLeft, setCanScrollLeft] = useState(false);\n    const [canScrollRight, setCanScrollRight] = useState(false);\n    const [canScrollUp, setCanScrollUp] = useState(false);\n    const [canScrollDown, setCanScrollDown] = useState(false);\n    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n    useEffect(() => {\n      if (process.env?.NODE_ENV === \"development\") {\n        if (scrollSpeed < 0) {\n          console.warn(\n            \"OverflowContainer: scrollSpeed should be a positive number\"\n          );\n        }\n        if (scrollDistance < 0) {\n          console.warn(\n            \"OverflowContainer: scrollDistance should be a positive number\"\n          );\n        }\n        if (scrollEndPadding < 0) {\n          console.warn(\n            \"OverflowContainer: scrollEndPadding should be a positive number\"\n          );\n        }\n      }\n    }, [scrollSpeed, scrollDistance, scrollEndPadding]);\n\n    const startScroll = (scrollDirection: \"left\" | \"right\" | \"up\" | \"down\") => {\n      stopScroll();\n      const isHorizontal =\n        scrollDirection === \"left\" || scrollDirection === \"right\";\n      const isBackward = scrollDirection === \"left\" || scrollDirection === \"up\";\n      const scrollAmount = isBackward ? -scrollDistance : scrollDistance;\n      const container = containerRef.current;\n      if (!container) return;\n\n      intervalRef.current = setInterval(() => {\n        if (!container) return;\n\n        const scrollPos = isHorizontal\n          ? container.scrollLeft\n          : container.scrollTop;\n        const scrollSize = isHorizontal\n          ? container.scrollWidth\n          : container.scrollHeight;\n        const clientSize = isHorizontal\n          ? container.clientWidth\n          : container.clientHeight;\n\n        const canScroll = isBackward\n          ? scrollPos > 0\n          : scrollPos < scrollSize - clientSize;\n\n        if (!canScroll) {\n          stopScroll();\n          return;\n        }\n        updateScrollButtons();\n        container.scrollBy({\n          [isHorizontal ? \"left\" : \"top\"]: scrollAmount,\n        });\n      }, scrollSpeed);\n    };\n\n    const updateScrollButtons = () => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const canScrollLeftVal =\n        container.scrollLeft > scrollEndPadding;\n      const canScrollRightVal =\n        container.scrollLeft <\n        container.scrollWidth - container.clientWidth - scrollEndPadding;\n      const canScrollUpVal = container.scrollTop > scrollEndPadding;\n      const canScrollDownVal =\n        container.scrollTop <\n        container.scrollHeight - container.clientHeight - scrollEndPadding;\n\n      setCanScrollLeft(canScrollLeftVal);\n      setCanScrollRight(canScrollRightVal);\n      setCanScrollUp(canScrollUpVal);\n      setCanScrollDown(canScrollDownVal);\n    };\n\n    const stopScroll = () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n\n    useEffect(() => {\n      if (!forwardedRef) return;\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(containerRef.current);\n      } else {\n        forwardedRef.current = containerRef.current;\n      }\n    }, [forwardedRef]);\n\n    useEffect(() => {\n      updateScrollButtons();\n      const container = containerRef.current;\n      if (!container) return;\n\n      const resizeObserver = new ResizeObserver(updateScrollButtons);\n      resizeObserver.observe(container);\n\n      return () => {\n        resizeObserver.disconnect();\n        stopScroll();\n      };\n    }, []);\n\n    return (\n      <div\n        role=\"region\"\n        aria-label=\"Scrollable content\"\n        className={cn(\"flex relative overflow-hidden\", className)}\n        {...props}\n      >\n        {showScrollIndicators && (\n          <div className=\"absolute left-0 top-0 flex w-full h-full z-50 bg-transparent pointer-events-none\">\n            {canScrollLeft && horizontalScrollIndicators && (\n              <div\n                className={cn(\n                  \"absolute h-full w-4 left-0 top-0 bg-gradient-to-l from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto\",\n                  indicatorClassName\n                )}\n                onMouseEnter={() => scrollOnHover && startScroll(\"left\")}\n                onMouseLeave={() => scrollOnHover && stopScroll()}\n              />\n            )}\n            {canScrollRight && horizontalScrollIndicators && (\n              <div\n                className={cn(\n                  \"absolute h-full w-4 right-0 top-0 bg-gradient-to-r from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto\",\n                  indicatorClassName\n                )}\n                onMouseEnter={() => scrollOnHover && startScroll(\"right\")}\n                onMouseLeave={() => scrollOnHover && stopScroll()}\n              />\n            )}\n            {canScrollUp && verticalScrollIndicators && (\n              <div\n                className={cn(\n                  \"absolute w-full h-5 left-0 top-0 bg-gradient-to-t from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto\",\n                  indicatorClassName\n                )}\n                onMouseEnter={() => scrollOnHover && startScroll(\"up\")}\n                onMouseLeave={() => scrollOnHover && stopScroll()}\n              />\n            )}\n            {canScrollDown && verticalScrollIndicators && (\n              <div\n                className={cn(\n                  \"absolute w-full h-5 left-0 bottom-0 bg-gradient-to-b from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto\",\n                  indicatorClassName\n                )}\n                onMouseEnter={() => scrollOnHover && startScroll(\"down\")}\n                onMouseLeave={() => scrollOnHover && stopScroll()}\n              />\n            )}\n          </div>\n        )}\n        <div\n          className={cn(\n            \"flex relative overflow-auto w-full\",\n            containerClassName\n          )}\n          ref={containerRef}\n          onScroll={updateScrollButtons}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n\nOverflowContainer.displayName = \"OverflowContainer\";\n\nexport default OverflowContainer;\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+
+/**
+ * OverflowContainer – React component for smooth scrolling with hover-activated
+ * indicators when content overflows. Supports horizontal and vertical scrolling.
+ * @license MIT
+ */
+interface OverflowContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Custom className for the outer container */
+    className?: string;
+    /** Content to be rendered inside the scroll container */
+    children: React.ReactNode;
+    /**
+     * Speed of the scroll animation in milliseconds. Lower = faster. Positive only.
+     * @default 10
+     */
+    scrollSpeed?: number;
+    /**
+     * Distance to scroll in pixels per interval. Positive only.
+     * @default 10
+     */
+    scrollDistance?: number;
+    /**
+     * Padding in pixels before the end to stop scrolling. Positive only.
+     * @default 10
+     */
+    scrollEndPadding?: number;
+    /** Custom className for the inner scrollable container */
+    containerClassName?: string;
+    /**
+     * Whether to show scroll indicators when content overflows.
+     * @default true
+     */
+    showScrollIndicators?: boolean;
+    /**
+     * Whether to show horizontal scroll indicators.
+     * @default true
+     */
+    horizontalScrollIndicators?: boolean;
+    /**
+     * Whether to show vertical scroll indicators.
+     * @default false
+     */
+    verticalScrollIndicators?: boolean;
+    /** Custom className for scroll indicators (overrides default styles) */
+    indicatorClassName?: string;
+    /**
+     * Whether to scroll when hovering over indicators.
+     * @default true
+     */
+    scrollOnHover?: boolean;
+}
+declare const OverflowContainer: react.ForwardRefExoticComponent<OverflowContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { OverflowContainer, type OverflowContainerProps };

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+
+/**
+ * OverflowContainer – React component for smooth scrolling with hover-activated
+ * indicators when content overflows. Supports horizontal and vertical scrolling.
+ * @license MIT
+ */
+interface OverflowContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Custom className for the outer container */
+    className?: string;
+    /** Content to be rendered inside the scroll container */
+    children: React.ReactNode;
+    /**
+     * Speed of the scroll animation in milliseconds. Lower = faster. Positive only.
+     * @default 10
+     */
+    scrollSpeed?: number;
+    /**
+     * Distance to scroll in pixels per interval. Positive only.
+     * @default 10
+     */
+    scrollDistance?: number;
+    /**
+     * Padding in pixels before the end to stop scrolling. Positive only.
+     * @default 10
+     */
+    scrollEndPadding?: number;
+    /** Custom className for the inner scrollable container */
+    containerClassName?: string;
+    /**
+     * Whether to show scroll indicators when content overflows.
+     * @default true
+     */
+    showScrollIndicators?: boolean;
+    /**
+     * Whether to show horizontal scroll indicators.
+     * @default true
+     */
+    horizontalScrollIndicators?: boolean;
+    /**
+     * Whether to show vertical scroll indicators.
+     * @default false
+     */
+    verticalScrollIndicators?: boolean;
+    /** Custom className for scroll indicators (overrides default styles) */
+    indicatorClassName?: string;
+    /**
+     * Whether to scroll when hovering over indicators.
+     * @default true
+     */
+    scrollOnHover?: boolean;
+}
+declare const OverflowContainer: react.ForwardRefExoticComponent<OverflowContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { OverflowContainer, type OverflowContainerProps };

package/dist/index.js

@@ -0,0 +1,195 @@
+"use client";
+
+// src/OverflowContainer.tsx
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var OverflowContainer = forwardRef(
+  ({
+    className,
+    children,
+    scrollSpeed = 10,
+    scrollDistance = 10,
+    scrollEndPadding = 10,
+    containerClassName,
+    showScrollIndicators = true,
+    horizontalScrollIndicators = true,
+    verticalScrollIndicators = false,
+    indicatorClassName,
+    scrollOnHover = true,
+    ...props
+  }, forwardedRef) => {
+    const containerRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const [canScrollUp, setCanScrollUp] = useState(false);
+    const [canScrollDown, setCanScrollDown] = useState(false);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+      if (process.env?.NODE_ENV === "development") {
+        if (scrollSpeed < 0) {
+          console.warn(
+            "OverflowContainer: scrollSpeed should be a positive number"
+          );
+        }
+        if (scrollDistance < 0) {
+          console.warn(
+            "OverflowContainer: scrollDistance should be a positive number"
+          );
+        }
+        if (scrollEndPadding < 0) {
+          console.warn(
+            "OverflowContainer: scrollEndPadding should be a positive number"
+          );
+        }
+      }
+    }, [scrollSpeed, scrollDistance, scrollEndPadding]);
+    const startScroll = (scrollDirection) => {
+      stopScroll();
+      const isHorizontal = scrollDirection === "left" || scrollDirection === "right";
+      const isBackward = scrollDirection === "left" || scrollDirection === "up";
+      const scrollAmount = isBackward ? -scrollDistance : scrollDistance;
+      const container = containerRef.current;
+      if (!container) return;
+      intervalRef.current = setInterval(() => {
+        if (!container) return;
+        const scrollPos = isHorizontal ? container.scrollLeft : container.scrollTop;
+        const scrollSize = isHorizontal ? container.scrollWidth : container.scrollHeight;
+        const clientSize = isHorizontal ? container.clientWidth : container.clientHeight;
+        const canScroll = isBackward ? scrollPos > 0 : scrollPos < scrollSize - clientSize;
+        if (!canScroll) {
+          stopScroll();
+          return;
+        }
+        updateScrollButtons();
+        container.scrollBy({
+          [isHorizontal ? "left" : "top"]: scrollAmount
+        });
+      }, scrollSpeed);
+    };
+    const updateScrollButtons = () => {
+      const container = containerRef.current;
+      if (!container) return;
+      const canScrollLeftVal = container.scrollLeft > scrollEndPadding;
+      const canScrollRightVal = container.scrollLeft < container.scrollWidth - container.clientWidth - scrollEndPadding;
+      const canScrollUpVal = container.scrollTop > scrollEndPadding;
+      const canScrollDownVal = container.scrollTop < container.scrollHeight - container.clientHeight - scrollEndPadding;
+      setCanScrollLeft(canScrollLeftVal);
+      setCanScrollRight(canScrollRightVal);
+      setCanScrollUp(canScrollUpVal);
+      setCanScrollDown(canScrollDownVal);
+    };
+    const stopScroll = () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+    useEffect(() => {
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(containerRef.current);
+      } else {
+        forwardedRef.current = containerRef.current;
+      }
+    }, [forwardedRef]);
+    useEffect(() => {
+      updateScrollButtons();
+      const container = containerRef.current;
+      if (!container) return;
+      const resizeObserver = new ResizeObserver(updateScrollButtons);
+      resizeObserver.observe(container);
+      return () => {
+        resizeObserver.disconnect();
+        stopScroll();
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "region",
+        "aria-label": "Scrollable content",
+        className: cn("flex relative overflow-hidden", className),
+        ...props,
+        children: [
+          showScrollIndicators && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-0 flex w-full h-full z-50 bg-transparent pointer-events-none", children: [
+            canScrollLeft && horizontalScrollIndicators && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute h-full w-4 left-0 top-0 bg-gradient-to-l from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto",
+                  indicatorClassName
+                ),
+                onMouseEnter: () => scrollOnHover && startScroll("left"),
+                onMouseLeave: () => scrollOnHover && stopScroll()
+              }
+            ),
+            canScrollRight && horizontalScrollIndicators && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute h-full w-4 right-0 top-0 bg-gradient-to-r from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto",
+                  indicatorClassName
+                ),
+                onMouseEnter: () => scrollOnHover && startScroll("right"),
+                onMouseLeave: () => scrollOnHover && stopScroll()
+              }
+            ),
+            canScrollUp && verticalScrollIndicators && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute w-full h-5 left-0 top-0 bg-gradient-to-t from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto",
+                  indicatorClassName
+                ),
+                onMouseEnter: () => scrollOnHover && startScroll("up"),
+                onMouseLeave: () => scrollOnHover && stopScroll()
+              }
+            ),
+            canScrollDown && verticalScrollIndicators && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute w-full h-5 left-0 bottom-0 bg-gradient-to-b from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto",
+                  indicatorClassName
+                ),
+                onMouseEnter: () => scrollOnHover && startScroll("down"),
+                onMouseLeave: () => scrollOnHover && stopScroll()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex relative overflow-auto w-full",
+                containerClassName
+              ),
+              ref: containerRef,
+              onScroll: updateScrollButtons,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+OverflowContainer.displayName = "OverflowContainer";
+var OverflowContainer_default = OverflowContainer;
+export {
+  OverflowContainer_default as OverflowContainer
+};
+/**
+ * OverflowContainer – React component for smooth scrolling with hover-activated
+ * indicators when content overflows. Supports horizontal and vertical scrolling.
+ * @license MIT
+ */
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/OverflowContainer.tsx"],"sourcesContent":["/**\n * OverflowContainer – React component for smooth scrolling with hover-activated\n * indicators when content overflows. Supports horizontal and vertical scrolling.\n * @license MIT\n */\n\nimport {\n  type ForwardedRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\ndeclare const process: { env?: { NODE_ENV?: string } };\n\nfunction cn(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(\" \");\n}\n\nexport interface OverflowContainerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Custom className for the outer container */\n  className?: string;\n\n  /** Content to be rendered inside the scroll container */\n  children: React.ReactNode;\n\n  /**\n   * Speed of the scroll animation in milliseconds. Lower = faster. Positive only.\n   * @default 10\n   */\n  scrollSpeed?: number;\n\n  /**\n   * Distance to scroll in pixels per interval. Positive only.\n   * @default 10\n   */\n  scrollDistance?: number;\n\n  /**\n   * Padding in pixels before the end to stop scrolling. Positive only.\n   * @default 10\n   */\n  scrollEndPadding?: number;\n\n  /** Custom className for the inner scrollable container */\n  containerClassName?: string;\n\n  /**\n   * Whether to show scroll indicators when content overflows.\n   * @default true\n   */\n  showScrollIndicators?: boolean;\n\n  /**\n   * Whether to show horizontal scroll indicators.\n   * @default true\n   */\n  horizontalScrollIndicators?: boolean;\n\n  /**\n   * Whether to show vertical scroll indicators.\n   * @default false\n   */\n  verticalScrollIndicators?: boolean;\n\n  /** Custom className for scroll indicators (overrides default styles) */\n  indicatorClassName?: string;\n\n  /**\n   * Whether to scroll when hovering over indicators.\n   * @default true\n   */\n  scrollOnHover?: boolean;\n}\n\nconst OverflowContainer = forwardRef(\n  (\n    {\n      className,\n      children,\n      scrollSpeed = 10,\n      scrollDistance = 10,\n      scrollEndPadding = 10,\n      containerClassName,\n      showScrollIndicators = true,\n      horizontalScrollIndicators = true,\n      verticalScrollIndicators = false,\n      indicatorClassName,\n      scrollOnHover = true,\n      ...props\n    }: OverflowContainerProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [canScrollLeft, setCanScrollLeft] = useState(false);\n    const [canScrollRight, setCanScrollRight] = useState(false);\n    const [canScrollUp, setCanScrollUp] = useState(false);\n    const [canScrollDown, setCanScrollDown] = useState(false);\n    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n    useEffect(() => {\n      if (process.env?.NODE_ENV === \"development\") {\n        if (scrollSpeed < 0) {\n          console.warn(\n            \"OverflowContainer: scrollSpeed should be a positive number\"\n          );\n        }\n        if (scrollDistance < 0) {\n          console.warn(\n            \"OverflowContainer: scrollDistance should be a positive number\"\n          );\n        }\n        if (scrollEndPadding < 0) {\n          console.warn(\n            \"OverflowContainer: scrollEndPadding should be a positive number\"\n          );\n        }\n      }\n    }, [scrollSpeed, scrollDistance, scrollEndPadding]);\n\n    const startScroll = (scrollDirection: \"left\" | \"right\" | \"up\" | \"down\") => {\n      stopScroll();\n      const isHorizontal =\n        scrollDirection === \"left\" || scrollDirection === \"right\";\n      const isBackward = scrollDirection === \"left\" || scrollDirection === \"up\";\n      const scrollAmount = isBackward ? -scrollDistance : scrollDistance;\n      const container = containerRef.current;\n      if (!container) return;\n\n      intervalRef.current = setInterval(() => {\n        if (!container) return;\n\n        const scrollPos = isHorizontal\n          ? container.scrollLeft\n          : container.scrollTop;\n        const scrollSize = isHorizontal\n          ? container.scrollWidth\n          : container.scrollHeight;\n        const clientSize = isHorizontal\n          ? container.clientWidth\n          : container.clientHeight;\n\n        const canScroll = isBackward\n          ? scrollPos > 0\n          : scrollPos < scrollSize - clientSize;\n\n        if (!canScroll) {\n          stopScroll();\n          return;\n        }\n        updateScrollButtons();\n        container.scrollBy({\n          [isHorizontal ? \"left\" : \"top\"]: scrollAmount,\n        });\n      }, scrollSpeed);\n    };\n\n    const updateScrollButtons = () => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const canScrollLeftVal =\n        container.scrollLeft > scrollEndPadding;\n      const canScrollRightVal =\n        container.scrollLeft <\n        container.scrollWidth - container.clientWidth - scrollEndPadding;\n      const canScrollUpVal = container.scrollTop > scrollEndPadding;\n      const canScrollDownVal =\n        container.scrollTop <\n        container.scrollHeight - container.clientHeight - scrollEndPadding;\n\n      setCanScrollLeft(canScrollLeftVal);\n      setCanScrollRight(canScrollRightVal);\n      setCanScrollUp(canScrollUpVal);\n      setCanScrollDown(canScrollDownVal);\n    };\n\n    const stopScroll = () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n        intervalRef.current = null;\n      }\n    };\n\n    useEffect(() => {\n      if (!forwardedRef) return;\n      if (typeof forwardedRef === \"function\") {\n        forwardedRef(containerRef.current);\n      } else {\n        forwardedRef.current = containerRef.current;\n      }\n    }, [forwardedRef]);\n\n    useEffect(() => {\n      updateScrollButtons();\n      const container = containerRef.current;\n      if (!container) return;\n\n      const resizeObserver = new ResizeObserver(updateScrollButtons);\n      resizeObserver.observe(container);\n\n      return () => {\n        resizeObserver.disconnect();\n        stopScroll();\n      };\n    }, []);\n\n    return (\n      <div\n        role=\"region\"\n        aria-label=\"Scrollable content\"\n        className={cn(\"flex relative overflow-hidden\", className)}\n        {...props}\n      >\n        {showScrollIndicators && (\n          <div className=\"absolute left-0 top-0 flex w-full h-full z-50 bg-transparent pointer-events-none\">\n            {canScrollLeft && horizontalScrollIndicators && (\n              <div\n                className={cn(\n                  \"absolute h-full w-4 left-0 top-0 bg-gradient-to-l from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto\",\n                  indicatorClassName\n                )}\n                onMouseEnter={() => scrollOnHover && startScroll(\"left\")}\n                onMouseLeave={() => scrollOnHover && stopScroll()}\n              />\n            )}\n            {canScrollRight && horizontalScrollIndicators && (\n              <div\n                className={cn(\n                  \"absolute h-full w-4 right-0 top-0 bg-gradient-to-r from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto\",\n                  indicatorClassName\n                )}\n                onMouseEnter={() => scrollOnHover && startScroll(\"right\")}\n                onMouseLeave={() => scrollOnHover && stopScroll()}\n              />\n            )}\n            {canScrollUp && verticalScrollIndicators && (\n              <div\n                className={cn(\n                  \"absolute w-full h-5 left-0 top-0 bg-gradient-to-t from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto\",\n                  indicatorClassName\n                )}\n                onMouseEnter={() => scrollOnHover && startScroll(\"up\")}\n                onMouseLeave={() => scrollOnHover && stopScroll()}\n              />\n            )}\n            {canScrollDown && verticalScrollIndicators && (\n              <div\n                className={cn(\n                  \"absolute w-full h-5 left-0 bottom-0 bg-gradient-to-b from-black/0 to-black/10 cursor-pointer z-50 pointer-events-auto\",\n                  indicatorClassName\n                )}\n                onMouseEnter={() => scrollOnHover && startScroll(\"down\")}\n                onMouseLeave={() => scrollOnHover && stopScroll()}\n              />\n            )}\n          </div>\n        )}\n        <div\n          className={cn(\n            \"flex relative overflow-auto w-full\",\n            containerClassName\n          )}\n          ref={containerRef}\n          onScroll={updateScrollButtons}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n\nOverflowContainer.displayName = \"OverflowContainer\";\n\nexport default OverflowContainer;\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "react-scroll-indicators",
+  "version": "0.1.0",
+  "description": "React overflow container with hover-activated scroll indicators",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "example": "npm run dev --prefix example"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "keywords": [
+    "react",
+    "scroll",
+    "overflow",
+    "indicators",
+    "container"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ankitc248/react-scroll-indicators.git"
+  }
+}