@publikit/hooks 0.1.1 → 1.0.0

package/dist/use-pull-to-refresh.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+var react = require('react');
+
+// use-pull-to-refresh.ts
+function usePullToRefresh({
+  onRefresh,
+  threshold = 80,
+  resistance = 2.5,
+  disabled = false
+}) {
+  const [pullDistance, setPullDistance] = react.useState(0);
+  const [isRefreshing, setIsRefreshing] = react.useState(false);
+  const [isPulling, setIsPulling] = react.useState(false);
+  const [containerElement, setContainerElement] = react.useState(null);
+  const containerRef = react.useRef(null);
+  const startYRef = react.useRef(null);
+  const currentYRef = react.useRef(null);
+  const pullDistanceRef = react.useRef(0);
+  pullDistanceRef.current = pullDistance;
+  const assignContainerRef = react.useCallback((node) => {
+    containerRef.current = node;
+    setContainerElement(node);
+  }, []);
+  const handleTouchStart = react.useCallback(
+    (e) => {
+      if (disabled || isRefreshing) return;
+      const container = containerRef.current;
+      if (!container) return;
+      if (container.scrollTop <= 0) {
+        startYRef.current = e.touches[0].clientY;
+        setIsPulling(true);
+      }
+    },
+    [disabled, isRefreshing]
+  );
+  const handleTouchMove = react.useCallback(
+    (e) => {
+      if (disabled || isRefreshing || startYRef.current === null) return;
+      const container = containerRef.current;
+      if (!container) return;
+      if (container.scrollTop > 0) {
+        startYRef.current = null;
+        setPullDistance(0);
+        setIsPulling(false);
+        return;
+      }
+      currentYRef.current = e.touches[0].clientY;
+      const diff = currentYRef.current - startYRef.current;
+      if (diff > 0) {
+        const distance = Math.min(diff / resistance, threshold * 1.5);
+        setPullDistance(distance);
+        if (distance > 5) {
+          e.preventDefault();
+        }
+      }
+    },
+    [disabled, isRefreshing, resistance, threshold]
+  );
+  const handleTouchEnd = react.useCallback(async () => {
+    if (disabled || isRefreshing) return;
+    startYRef.current = null;
+    currentYRef.current = null;
+    setIsPulling(false);
+    const distance = pullDistanceRef.current;
+    if (distance >= threshold) {
+      setIsRefreshing(true);
+      setPullDistance(threshold * 0.5);
+      try {
+        await onRefresh();
+      } finally {
+        setIsRefreshing(false);
+        setPullDistance(0);
+      }
+    } else {
+      setPullDistance(0);
+    }
+  }, [disabled, isRefreshing, threshold, onRefresh]);
+  react.useEffect(() => {
+    const container = containerElement;
+    if (!container) return;
+    container.addEventListener("touchstart", handleTouchStart, { passive: true });
+    container.addEventListener("touchmove", handleTouchMove, { passive: false });
+    container.addEventListener("touchend", handleTouchEnd, { passive: true });
+    return () => {
+      container.removeEventListener("touchstart", handleTouchStart);
+      container.removeEventListener("touchmove", handleTouchMove);
+      container.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [containerElement, handleTouchStart, handleTouchMove, handleTouchEnd]);
+  const pullProgress = Math.min(pullDistance / threshold, 1);
+  return {
+    pullDistance,
+    isRefreshing,
+    isPulling,
+    containerRef: assignContainerRef,
+    pullProgress
+  };
+}
+
+exports.usePullToRefresh = usePullToRefresh;
+//# sourceMappingURL=use-pull-to-refresh.cjs.map
+//# sourceMappingURL=use-pull-to-refresh.cjs.map

package/dist/use-pull-to-refresh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../use-pull-to-refresh.ts"],"names":["useState","useRef","useCallback","useEffect"],"mappings":";;;;;AAqBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,SAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,UAAA,GAAa,GAAA;AAAA,EACb,QAAA,GAAW;AACb,CAAA,EAAoD;AAClD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,eAAS,CAAC,CAAA;AAClD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,eAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIA,eAA6B,IAAI,CAAA;AAEjF,EAAA,MAAM,YAAA,GAAeC,aAA2B,IAAI,CAAA;AACpD,EAAA,MAAM,SAAA,GAAYA,aAAsB,IAAI,CAAA;AAC5C,EAAA,MAAM,WAAA,GAAcA,aAAsB,IAAI,CAAA;AAC9C,EAAA,MAAM,eAAA,GAAkBA,aAAO,CAAC,CAAA;AAEhC,EAAA,eAAA,CAAgB,OAAA,GAAU,YAAA;AAE1B,EAAA,MAAM,kBAAA,GAAqBC,iBAAA,CAAY,CAAC,IAAA,KAA6B;AACnE,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,IAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,EAC1B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,gBAAA,GAAmBA,iBAAA;AAAA,IACvB,CAAC,CAAA,KAAkB;AACjB,MAAA,IAAI,YAAY,YAAA,EAAc;AAE9B,MAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,MAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,MAAA,IAAI,SAAA,CAAU,aAAa,CAAA,EAAG;AAC5B,QAAA,SAAA,CAAU,OAAA,GAAU,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAA,CAAE,OAAA;AACjC,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,GACzB;AAEA,EAAA,MAAM,eAAA,GAAkBA,iBAAA;AAAA,IACtB,CAAC,CAAA,KAAkB;AACjB,MAAA,IAAI,QAAA,IAAY,YAAA,IAAgB,SAAA,CAAU,OAAA,KAAY,IAAA,EAAM;AAE5D,MAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,MAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,MAAA,IAAI,SAAA,CAAU,YAAY,CAAA,EAAG;AAC3B,QAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AACpB,QAAA,eAAA,CAAgB,CAAC,CAAA;AACjB,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA;AAAA,MACF;AAEA,MAAA,WAAA,CAAY,OAAA,GAAU,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAA,CAAE,OAAA;AACnC,MAAA,MAAM,IAAA,GAAO,WAAA,CAAY,OAAA,GAAU,SAAA,CAAU,OAAA;AAE7C,MAAA,IAAI,OAAO,CAAA,EAAG;AACZ,QAAA,MAAM,WAAW,IAAA,CAAK,GAAA,CAAI,IAAA,GAAO,UAAA,EAAY,YAAY,GAAG,CAAA;AAC5D,QAAA,eAAA,CAAgB,QAAQ,CAAA;AAExB,QAAA,IAAI,WAAW,CAAA,EAAG;AAChB,UAAA,CAAA,CAAE,cAAA,EAAe;AAAA,QACnB;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,QAAA,EAAU,YAAA,EAAc,UAAA,EAAY,SAAS;AAAA,GAChD;AAEA,EAAA,MAAM,cAAA,GAAiBA,kBAAY,YAAY;AAC7C,IAAA,IAAI,YAAY,YAAA,EAAc;AAE9B,IAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AACpB,IAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AACtB,IAAA,YAAA,CAAa,KAAK,CAAA;AAElB,IAAA,MAAM,WAAW,eAAA,CAAgB,OAAA;AAEjC,IAAA,IAAI,YAAY,SAAA,EAAW;AACzB,MAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,MAAA,eAAA,CAAgB,YAAY,GAAG,CAAA;AAE/B,MAAA,IAAI;AACF,QAAA,MAAM,SAAA,EAAU;AAAA,MAClB,CAAA,SAAE;AACA,QAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,QAAA,eAAA,CAAgB,CAAC,CAAA;AAAA,MACnB;AAAA,IACF,CAAA,MAAO;AACL,MAAA,eAAA,CAAgB,CAAC,CAAA;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAA,EAAU,YAAA,EAAc,SAAA,EAAW,SAAS,CAAC,CAAA;AAEjD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAA,GAAY,gBAAA;AAClB,IAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,IAAA,SAAA,CAAU,iBAAiB,YAAA,EAAc,gBAAA,EAAkB,EAAE,OAAA,EAAS,MAAM,CAAA;AAC5E,IAAA,SAAA,CAAU,iBAAiB,WAAA,EAAa,eAAA,EAAiB,EAAE,OAAA,EAAS,OAAO,CAAA;AAC3E,IAAA,SAAA,CAAU,iBAAiB,UAAA,EAAY,cAAA,EAAgB,EAAE,OAAA,EAAS,MAAM,CAAA;AAExE,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,mBAAA,CAAoB,cAAc,gBAAgB,CAAA;AAC5D,MAAA,SAAA,CAAU,mBAAA,CAAoB,aAAa,eAAe,CAAA;AAC1D,MAAA,SAAA,CAAU,mBAAA,CAAoB,YAAY,cAAc,CAAA;AAAA,IAC1D,CAAA;AAAA,EACF,GAAG,CAAC,gBAAA,EAAkB,gBAAA,EAAkB,eAAA,EAAiB,cAAc,CAAC,CAAA;AAExE,EAAA,MAAM,YAAA,GAAe,IAAA,CAAK,GAAA,CAAI,YAAA,GAAe,WAAW,CAAC,CAAA;AAEzD,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,EAAc,kBAAA;AAAA,IACd;AAAA,GACF;AACF","file":"use-pull-to-refresh.cjs","sourcesContent":["import { useState, useEffect, useRef, useCallback, type Ref } from 'react';\r\n\r\nexport interface UsePullToRefreshOptions {\r\n  onRefresh: () => Promise<void>;\r\n  threshold?: number;\r\n  resistance?: number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface UsePullToRefreshReturn {\r\n  pullDistance: number;\r\n  isRefreshing: boolean;\r\n  isPulling: boolean;\r\n  /** Callback ref — attach to the scrollable container element */\r\n  containerRef: Ref<HTMLElement | null>;\r\n  pullProgress: number;\r\n}\r\n\r\n/**\r\n * Hook to add pull-to-refresh gesture for mobile devices.\r\n */\r\nexport function usePullToRefresh({\r\n  onRefresh,\r\n  threshold = 80,\r\n  resistance = 2.5,\r\n  disabled = false,\r\n}: UsePullToRefreshOptions): UsePullToRefreshReturn {\r\n  const [pullDistance, setPullDistance] = useState(0);\r\n  const [isRefreshing, setIsRefreshing] = useState(false);\r\n  const [isPulling, setIsPulling] = useState(false);\r\n  const [containerElement, setContainerElement] = useState<HTMLElement | null>(null);\r\n\r\n  const containerRef = useRef<HTMLElement | null>(null);\r\n  const startYRef = useRef<number | null>(null);\r\n  const currentYRef = useRef<number | null>(null);\r\n  const pullDistanceRef = useRef(0);\r\n\r\n  pullDistanceRef.current = pullDistance;\r\n\r\n  const assignContainerRef = useCallback((node: HTMLElement | null) => {\r\n    containerRef.current = node;\r\n    setContainerElement(node);\r\n  }, []);\r\n\r\n  const handleTouchStart = useCallback(\r\n    (e: TouchEvent) => {\r\n      if (disabled || isRefreshing) return;\r\n\r\n      const container = containerRef.current;\r\n      if (!container) return;\r\n\r\n      if (container.scrollTop <= 0) {\r\n        startYRef.current = e.touches[0].clientY;\r\n        setIsPulling(true);\r\n      }\r\n    },\r\n    [disabled, isRefreshing]\r\n  );\r\n\r\n  const handleTouchMove = useCallback(\r\n    (e: TouchEvent) => {\r\n      if (disabled || isRefreshing || startYRef.current === null) return;\r\n\r\n      const container = containerRef.current;\r\n      if (!container) return;\r\n\r\n      if (container.scrollTop > 0) {\r\n        startYRef.current = null;\r\n        setPullDistance(0);\r\n        setIsPulling(false);\r\n        return;\r\n      }\r\n\r\n      currentYRef.current = e.touches[0].clientY;\r\n      const diff = currentYRef.current - startYRef.current;\r\n\r\n      if (diff > 0) {\r\n        const distance = Math.min(diff / resistance, threshold * 1.5);\r\n        setPullDistance(distance);\r\n\r\n        if (distance > 5) {\r\n          e.preventDefault();\r\n        }\r\n      }\r\n    },\r\n    [disabled, isRefreshing, resistance, threshold]\r\n  );\r\n\r\n  const handleTouchEnd = useCallback(async () => {\r\n    if (disabled || isRefreshing) return;\r\n\r\n    startYRef.current = null;\r\n    currentYRef.current = null;\r\n    setIsPulling(false);\r\n\r\n    const distance = pullDistanceRef.current;\r\n\r\n    if (distance >= threshold) {\r\n      setIsRefreshing(true);\r\n      setPullDistance(threshold * 0.5);\r\n\r\n      try {\r\n        await onRefresh();\r\n      } finally {\r\n        setIsRefreshing(false);\r\n        setPullDistance(0);\r\n      }\r\n    } else {\r\n      setPullDistance(0);\r\n    }\r\n  }, [disabled, isRefreshing, threshold, onRefresh]);\r\n\r\n  useEffect(() => {\r\n    const container = containerElement;\r\n    if (!container) return;\r\n\r\n    container.addEventListener('touchstart', handleTouchStart, { passive: true });\r\n    container.addEventListener('touchmove', handleTouchMove, { passive: false });\r\n    container.addEventListener('touchend', handleTouchEnd, { passive: true });\r\n\r\n    return () => {\r\n      container.removeEventListener('touchstart', handleTouchStart);\r\n      container.removeEventListener('touchmove', handleTouchMove);\r\n      container.removeEventListener('touchend', handleTouchEnd);\r\n    };\r\n  }, [containerElement, handleTouchStart, handleTouchMove, handleTouchEnd]);\r\n\r\n  const pullProgress = Math.min(pullDistance / threshold, 1);\r\n\r\n  return {\r\n    pullDistance,\r\n    isRefreshing,\r\n    isPulling,\r\n    containerRef: assignContainerRef,\r\n    pullProgress,\r\n  };\r\n}\r\n"]}

package/dist/use-pull-to-refresh.d.cts

@@ -0,0 +1,22 @@
+import { Ref } from 'react';
+
+interface UsePullToRefreshOptions {
+    onRefresh: () => Promise<void>;
+    threshold?: number;
+    resistance?: number;
+    disabled?: boolean;
+}
+interface UsePullToRefreshReturn {
+    pullDistance: number;
+    isRefreshing: boolean;
+    isPulling: boolean;
+    /** Callback ref — attach to the scrollable container element */
+    containerRef: Ref<HTMLElement | null>;
+    pullProgress: number;
+}
+/**
+ * Hook to add pull-to-refresh gesture for mobile devices.
+ */
+declare function usePullToRefresh({ onRefresh, threshold, resistance, disabled, }: UsePullToRefreshOptions): UsePullToRefreshReturn;
+
+export { type UsePullToRefreshOptions, type UsePullToRefreshReturn, usePullToRefresh };

package/dist/use-pull-to-refresh.d.ts

@@ -0,0 +1,22 @@
+import { Ref } from 'react';
+
+interface UsePullToRefreshOptions {
+    onRefresh: () => Promise<void>;
+    threshold?: number;
+    resistance?: number;
+    disabled?: boolean;
+}
+interface UsePullToRefreshReturn {
+    pullDistance: number;
+    isRefreshing: boolean;
+    isPulling: boolean;
+    /** Callback ref — attach to the scrollable container element */
+    containerRef: Ref<HTMLElement | null>;
+    pullProgress: number;
+}
+/**
+ * Hook to add pull-to-refresh gesture for mobile devices.
+ */
+declare function usePullToRefresh({ onRefresh, threshold, resistance, disabled, }: UsePullToRefreshOptions): UsePullToRefreshReturn;
+
+export { type UsePullToRefreshOptions, type UsePullToRefreshReturn, usePullToRefresh };

package/dist/use-pull-to-refresh.js

@@ -0,0 +1,101 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+// use-pull-to-refresh.ts
+function usePullToRefresh({
+  onRefresh,
+  threshold = 80,
+  resistance = 2.5,
+  disabled = false
+}) {
+  const [pullDistance, setPullDistance] = useState(0);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isPulling, setIsPulling] = useState(false);
+  const [containerElement, setContainerElement] = useState(null);
+  const containerRef = useRef(null);
+  const startYRef = useRef(null);
+  const currentYRef = useRef(null);
+  const pullDistanceRef = useRef(0);
+  pullDistanceRef.current = pullDistance;
+  const assignContainerRef = useCallback((node) => {
+    containerRef.current = node;
+    setContainerElement(node);
+  }, []);
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (disabled || isRefreshing) return;
+      const container = containerRef.current;
+      if (!container) return;
+      if (container.scrollTop <= 0) {
+        startYRef.current = e.touches[0].clientY;
+        setIsPulling(true);
+      }
+    },
+    [disabled, isRefreshing]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (disabled || isRefreshing || startYRef.current === null) return;
+      const container = containerRef.current;
+      if (!container) return;
+      if (container.scrollTop > 0) {
+        startYRef.current = null;
+        setPullDistance(0);
+        setIsPulling(false);
+        return;
+      }
+      currentYRef.current = e.touches[0].clientY;
+      const diff = currentYRef.current - startYRef.current;
+      if (diff > 0) {
+        const distance = Math.min(diff / resistance, threshold * 1.5);
+        setPullDistance(distance);
+        if (distance > 5) {
+          e.preventDefault();
+        }
+      }
+    },
+    [disabled, isRefreshing, resistance, threshold]
+  );
+  const handleTouchEnd = useCallback(async () => {
+    if (disabled || isRefreshing) return;
+    startYRef.current = null;
+    currentYRef.current = null;
+    setIsPulling(false);
+    const distance = pullDistanceRef.current;
+    if (distance >= threshold) {
+      setIsRefreshing(true);
+      setPullDistance(threshold * 0.5);
+      try {
+        await onRefresh();
+      } finally {
+        setIsRefreshing(false);
+        setPullDistance(0);
+      }
+    } else {
+      setPullDistance(0);
+    }
+  }, [disabled, isRefreshing, threshold, onRefresh]);
+  useEffect(() => {
+    const container = containerElement;
+    if (!container) return;
+    container.addEventListener("touchstart", handleTouchStart, { passive: true });
+    container.addEventListener("touchmove", handleTouchMove, { passive: false });
+    container.addEventListener("touchend", handleTouchEnd, { passive: true });
+    return () => {
+      container.removeEventListener("touchstart", handleTouchStart);
+      container.removeEventListener("touchmove", handleTouchMove);
+      container.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [containerElement, handleTouchStart, handleTouchMove, handleTouchEnd]);
+  const pullProgress = Math.min(pullDistance / threshold, 1);
+  return {
+    pullDistance,
+    isRefreshing,
+    isPulling,
+    containerRef: assignContainerRef,
+    pullProgress
+  };
+}
+
+export { usePullToRefresh };
+//# sourceMappingURL=use-pull-to-refresh.js.map
+//# sourceMappingURL=use-pull-to-refresh.js.map

package/dist/use-pull-to-refresh.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../use-pull-to-refresh.ts"],"names":[],"mappings":"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","file":"use-pull-to-refresh.js","sourcesContent":["import { useState, useEffect, useRef, useCallback, type Ref } from 'react';\r\n\r\nexport interface UsePullToRefreshOptions {\r\n  onRefresh: () => Promise<void>;\r\n  threshold?: number;\r\n  resistance?: number;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface UsePullToRefreshReturn {\r\n  pullDistance: number;\r\n  isRefreshing: boolean;\r\n  isPulling: boolean;\r\n  /** Callback ref — attach to the scrollable container element */\r\n  containerRef: Ref<HTMLElement | null>;\r\n  pullProgress: number;\r\n}\r\n\r\n/**\r\n * Hook to add pull-to-refresh gesture for mobile devices.\r\n */\r\nexport function usePullToRefresh({\r\n  onRefresh,\r\n  threshold = 80,\r\n  resistance = 2.5,\r\n  disabled = false,\r\n}: UsePullToRefreshOptions): UsePullToRefreshReturn {\r\n  const [pullDistance, setPullDistance] = useState(0);\r\n  const [isRefreshing, setIsRefreshing] = useState(false);\r\n  const [isPulling, setIsPulling] = useState(false);\r\n  const [containerElement, setContainerElement] = useState<HTMLElement | null>(null);\r\n\r\n  const containerRef = useRef<HTMLElement | null>(null);\r\n  const startYRef = useRef<number | null>(null);\r\n  const currentYRef = useRef<number | null>(null);\r\n  const pullDistanceRef = useRef(0);\r\n\r\n  pullDistanceRef.current = pullDistance;\r\n\r\n  const assignContainerRef = useCallback((node: HTMLElement | null) => {\r\n    containerRef.current = node;\r\n    setContainerElement(node);\r\n  }, []);\r\n\r\n  const handleTouchStart = useCallback(\r\n    (e: TouchEvent) => {\r\n      if (disabled || isRefreshing) return;\r\n\r\n      const container = containerRef.current;\r\n      if (!container) return;\r\n\r\n      if (container.scrollTop <= 0) {\r\n        startYRef.current = e.touches[0].clientY;\r\n        setIsPulling(true);\r\n      }\r\n    },\r\n    [disabled, isRefreshing]\r\n  );\r\n\r\n  const handleTouchMove = useCallback(\r\n    (e: TouchEvent) => {\r\n      if (disabled || isRefreshing || startYRef.current === null) return;\r\n\r\n      const container = containerRef.current;\r\n      if (!container) return;\r\n\r\n      if (container.scrollTop > 0) {\r\n        startYRef.current = null;\r\n        setPullDistance(0);\r\n        setIsPulling(false);\r\n        return;\r\n      }\r\n\r\n      currentYRef.current = e.touches[0].clientY;\r\n      const diff = currentYRef.current - startYRef.current;\r\n\r\n      if (diff > 0) {\r\n        const distance = Math.min(diff / resistance, threshold * 1.5);\r\n        setPullDistance(distance);\r\n\r\n        if (distance > 5) {\r\n          e.preventDefault();\r\n        }\r\n      }\r\n    },\r\n    [disabled, isRefreshing, resistance, threshold]\r\n  );\r\n\r\n  const handleTouchEnd = useCallback(async () => {\r\n    if (disabled || isRefreshing) return;\r\n\r\n    startYRef.current = null;\r\n    currentYRef.current = null;\r\n    setIsPulling(false);\r\n\r\n    const distance = pullDistanceRef.current;\r\n\r\n    if (distance >= threshold) {\r\n      setIsRefreshing(true);\r\n      setPullDistance(threshold * 0.5);\r\n\r\n      try {\r\n        await onRefresh();\r\n      } finally {\r\n        setIsRefreshing(false);\r\n        setPullDistance(0);\r\n      }\r\n    } else {\r\n      setPullDistance(0);\r\n    }\r\n  }, [disabled, isRefreshing, threshold, onRefresh]);\r\n\r\n  useEffect(() => {\r\n    const container = containerElement;\r\n    if (!container) return;\r\n\r\n    container.addEventListener('touchstart', handleTouchStart, { passive: true });\r\n    container.addEventListener('touchmove', handleTouchMove, { passive: false });\r\n    container.addEventListener('touchend', handleTouchEnd, { passive: true });\r\n\r\n    return () => {\r\n      container.removeEventListener('touchstart', handleTouchStart);\r\n      container.removeEventListener('touchmove', handleTouchMove);\r\n      container.removeEventListener('touchend', handleTouchEnd);\r\n    };\r\n  }, [containerElement, handleTouchStart, handleTouchMove, handleTouchEnd]);\r\n\r\n  const pullProgress = Math.min(pullDistance / threshold, 1);\r\n\r\n  return {\r\n    pullDistance,\r\n    isRefreshing,\r\n    isPulling,\r\n    containerRef: assignContainerRef,\r\n    pullProgress,\r\n  };\r\n}\r\n"]}

package/dist/use-scrollable-container.cjs

@@ -0,0 +1,149 @@
+'use strict';
+
+var react = require('react');
+var utils = require('@publikit/utils');
+
+// use-scrollable-container.ts
+var SCROLL_AMOUNT = 80;
+var SCROLL_CHECK_DELAY = 100;
+var DEFAULT_SCROLL_POSITION_KEY = "scrollable-container-position";
+var STORAGE_DEBOUNCE_MS = 150;
+function resolveStorage(storage) {
+  if (storage === false) return null;
+  if (storage) return storage;
+  if (typeof sessionStorage === "undefined") return null;
+  return sessionStorage;
+}
+function getScrollPosition(element, axis) {
+  return axis === "x" ? element.scrollLeft : element.scrollTop;
+}
+function setScrollPosition(element, axis, position) {
+  if (axis === "x") {
+    element.scrollLeft = position;
+  } else {
+    element.scrollTop = position;
+  }
+}
+function getScrollSize(element, axis) {
+  return axis === "x" ? element.scrollWidth : element.scrollHeight;
+}
+function getClientSize(element, axis) {
+  return axis === "x" ? element.clientWidth : element.clientHeight;
+}
+function useScrollableContainer({
+  scrollPositionKey,
+  axis = "y",
+  scrollAmount = SCROLL_AMOUNT,
+  checkDelay = SCROLL_CHECK_DELAY,
+  storage
+}) {
+  const containerRef = react.useRef(null);
+  const [containerElement, setContainerElement] = react.useState(null);
+  const isRestoringRef = react.useRef(false);
+  const [canScrollBackward, setCanScrollBackward] = react.useState(false);
+  const [canScrollForward, setCanScrollForward] = react.useState(false);
+  const storageAdapter = react.useMemo(() => resolveStorage(storage), [storage]);
+  const assignContainerRef = react.useCallback((node) => {
+    containerRef.current = node;
+    setContainerElement(node);
+  }, []);
+  const saveToStorage = react.useMemo(
+    () => utils.debounce((position) => {
+      if (!storageAdapter) return;
+      try {
+        storageAdapter.setItem(scrollPositionKey, String(position));
+      } catch {
+      }
+    }, STORAGE_DEBOUNCE_MS),
+    [scrollPositionKey, storageAdapter]
+  );
+  const checkScrollability = react.useCallback(() => {
+    if (!containerRef.current || isRestoringRef.current) return;
+    const scrollPosition = getScrollPosition(containerRef.current, axis);
+    const scrollSize = getScrollSize(containerRef.current, axis);
+    const clientSize = getClientSize(containerRef.current, axis);
+    saveToStorage(scrollPosition);
+    setCanScrollBackward(scrollPosition > 0);
+    setCanScrollForward(scrollPosition < scrollSize - clientSize - 1);
+  }, [axis, saveToStorage]);
+  react.useLayoutEffect(() => {
+    if (!containerElement || isRestoringRef.current) return;
+    if (!storageAdapter) return;
+    try {
+      const savedPosition = storageAdapter.getItem(scrollPositionKey);
+      if (savedPosition !== null) {
+        const position = parseInt(savedPosition, 10);
+        const currentPosition = getScrollPosition(containerElement, axis);
+        if (position > 0 && !isNaN(position) && Math.abs(currentPosition - position) > 1) {
+          isRestoringRef.current = true;
+          setScrollPosition(containerElement, axis, position);
+          requestAnimationFrame(() => {
+            isRestoringRef.current = false;
+            checkScrollability();
+          });
+        }
+      }
+    } catch {
+    }
+  }, [axis, containerElement, scrollPositionKey, checkScrollability, storageAdapter]);
+  const preserveScrollPosition = react.useCallback(() => {
+    if (containerRef.current && storageAdapter) {
+      try {
+        storageAdapter.setItem(
+          scrollPositionKey,
+          String(getScrollPosition(containerRef.current, axis))
+        );
+      } catch {
+      }
+    }
+  }, [axis, scrollPositionKey, storageAdapter]);
+  react.useEffect(() => {
+    return () => {
+      saveToStorage.cancel();
+    };
+  }, [saveToStorage]);
+  react.useEffect(() => {
+    if (!containerElement) return;
+    const timeoutId = setTimeout(checkScrollability, checkDelay);
+    const handleScroll = () => {
+      checkScrollability();
+    };
+    containerElement.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", checkScrollability);
+    const resizeObserver = new ResizeObserver(checkScrollability);
+    resizeObserver.observe(containerElement);
+    return () => {
+      clearTimeout(timeoutId);
+      containerElement.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", checkScrollability);
+      resizeObserver.disconnect();
+    };
+  }, [checkDelay, containerElement, checkScrollability]);
+  const scrollBackward = react.useCallback(() => {
+    const delta = -scrollAmount;
+    containerRef.current?.scrollBy(
+      axis === "x" ? { left: delta, behavior: "smooth" } : { top: delta, behavior: "smooth" }
+    );
+  }, [axis, scrollAmount]);
+  const scrollForward = react.useCallback(() => {
+    containerRef.current?.scrollBy(
+      axis === "x" ? { left: scrollAmount, behavior: "smooth" } : { top: scrollAmount, behavior: "smooth" }
+    );
+  }, [axis, scrollAmount]);
+  return {
+    containerRef: assignContainerRef,
+    canScrollBackward,
+    canScrollForward,
+    scrollBackward,
+    scrollForward,
+    checkScrollability,
+    preserveScrollPosition
+  };
+}
+
+exports.DEFAULT_SCROLL_POSITION_KEY = DEFAULT_SCROLL_POSITION_KEY;
+exports.SCROLL_AMOUNT = SCROLL_AMOUNT;
+exports.SCROLL_CHECK_DELAY = SCROLL_CHECK_DELAY;
+exports.useScrollableContainer = useScrollableContainer;
+//# sourceMappingURL=use-scrollable-container.cjs.map
+//# sourceMappingURL=use-scrollable-container.cjs.map

package/dist/use-scrollable-container.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../use-scrollable-container.ts"],"names":["useRef","useState","useMemo","useCallback","debounce","useLayoutEffect","useEffect"],"mappings":";;;;;;AAGO,IAAM,aAAA,GAAgB;AACtB,IAAM,kBAAA,GAAqB;AAC3B,IAAM,2BAAA,GAA8B;AAC3C,IAAM,mBAAA,GAAsB,GAAA;AAiC5B,SAAS,eACP,OAAA,EAC6B;AAC7B,EAAA,IAAI,OAAA,KAAY,OAAO,OAAO,IAAA;AAC9B,EAAA,IAAI,SAAS,OAAO,OAAA;AACpB,EAAA,IAAI,OAAO,cAAA,KAAmB,WAAA,EAAa,OAAO,IAAA;AAClD,EAAA,OAAO,cAAA;AACT;AAEA,SAAS,iBAAA,CAAkB,SAAsB,IAAA,EAA0B;AACzE,EAAA,OAAO,IAAA,KAAS,GAAA,GAAM,OAAA,CAAQ,UAAA,GAAa,OAAA,CAAQ,SAAA;AACrD;AAEA,SAAS,iBAAA,CAAkB,OAAA,EAAsB,IAAA,EAAkB,QAAA,EAAwB;AACzF,EAAA,IAAI,SAAS,GAAA,EAAK;AAChB,IAAA,OAAA,CAAQ,UAAA,GAAa,QAAA;AAAA,EACvB,CAAA,MAAO;AACL,IAAA,OAAA,CAAQ,SAAA,GAAY,QAAA;AAAA,EACtB;AACF;AAEA,SAAS,aAAA,CAAc,SAAsB,IAAA,EAA0B;AACrE,EAAA,OAAO,IAAA,KAAS,GAAA,GAAM,OAAA,CAAQ,WAAA,GAAc,OAAA,CAAQ,YAAA;AACtD;AAEA,SAAS,aAAA,CAAc,SAAsB,IAAA,EAA0B;AACrE,EAAA,OAAO,IAAA,KAAS,GAAA,GAAM,OAAA,CAAQ,WAAA,GAAc,OAAA,CAAQ,YAAA;AACtD;AAKO,SAAS,sBAAA,CACd;AAAA,EACE,iBAAA;AAAA,EACA,IAAA,GAAO,GAAA;AAAA,EACP,YAAA,GAAe,aAAA;AAAA,EACf,UAAA,GAAa,kBAAA;AAAA,EACb;AACF,CAAA,EAC8B;AAC9B,EAAA,MAAM,YAAA,GAAeA,aAA2B,IAAI,CAAA;AACpD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIC,eAA6B,IAAI,CAAA;AACjF,EAAA,MAAM,cAAA,GAAiBD,aAAgB,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC9D,EAAA,MAAM,cAAA,GAAiBC,cAAQ,MAAM,cAAA,CAAe,OAAO,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEvE,EAAA,MAAM,kBAAA,GAAqBC,iBAAA,CAAY,CAAC,IAAA,KAA6B;AACnE,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,IAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,EAC1B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,aAAA,GAAgBD,aAAA;AAAA,IACpB,MACEE,cAAA,CAAS,CAAC,QAAA,KAAqB;AAC7B,MAAA,IAAI,CAAC,cAAA,EAAgB;AACrB,MAAA,IAAI;AACF,QAAA,cAAA,CAAe,OAAA,CAAQ,iBAAA,EAAmB,MAAA,CAAO,QAAQ,CAAC,CAAA;AAAA,MAC5D,CAAA,CAAA,MAAQ;AAAA,MAER;AAAA,IACF,GAAG,mBAAmB,CAAA;AAAA,IACxB,CAAC,mBAAmB,cAAc;AAAA,GACpC;AAEA,EAAA,MAAM,kBAAA,GAAqBD,kBAAY,MAAM;AAC3C,IAAA,IAAI,CAAC,YAAA,CAAa,OAAA,IAAW,cAAA,CAAe,OAAA,EAAS;AACrD,IAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,YAAA,CAAa,OAAA,EAAS,IAAI,CAAA;AACnE,IAAA,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,CAAa,OAAA,EAAS,IAAI,CAAA;AAC3D,IAAA,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,CAAa,OAAA,EAAS,IAAI,CAAA;AAE3D,IAAA,aAAA,CAAc,cAAc,CAAA;AAE5B,IAAA,oBAAA,CAAqB,iBAAiB,CAAC,CAAA;AACvC,IAAA,mBAAA,CAAoB,cAAA,GAAiB,UAAA,GAAa,UAAA,GAAa,CAAC,CAAA;AAAA,EAClE,CAAA,EAAG,CAAC,IAAA,EAAM,aAAa,CAAC,CAAA;AAExB,EAAAE,qBAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,gBAAA,IAAoB,cAAA,CAAe,OAAA,EAAS;AACjD,IAAA,IAAI,CAAC,cAAA,EAAgB;AAErB,IAAA,IAAI;AACF,MAAA,MAAM,aAAA,GAAgB,cAAA,CAAe,OAAA,CAAQ,iBAAiB,CAAA;AAC9D,MAAA,IAAI,kBAAkB,IAAA,EAAM;AAC1B,QAAA,MAAM,QAAA,GAAW,QAAA,CAAS,aAAA,EAAe,EAAE,CAAA;AAC3C,QAAA,MAAM,eAAA,GAAkB,iBAAA,CAAkB,gBAAA,EAAkB,IAAI,CAAA;AAEhE,QAAA,IAAI,QAAA,GAAW,CAAA,IAAK,CAAC,KAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAK,GAAA,CAAI,eAAA,GAAkB,QAAQ,CAAA,GAAI,CAAA,EAAG;AAChF,UAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AACzB,UAAA,iBAAA,CAAkB,gBAAA,EAAkB,MAAM,QAAQ,CAAA;AAClD,UAAA,qBAAA,CAAsB,MAAM;AAC1B,YAAA,cAAA,CAAe,OAAA,GAAU,KAAA;AACzB,YAAA,kBAAA,EAAmB;AAAA,UACrB,CAAC,CAAA;AAAA,QACH;AAAA,MACF;AAAA,IACF,CAAA,CAAA,MAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,IAAA,EAAM,kBAAkB,iBAAA,EAAmB,kBAAA,EAAoB,cAAc,CAAC,CAAA;AAElF,EAAA,MAAM,sBAAA,GAAyBF,kBAAY,MAAM;AAC/C,IAAA,IAAI,YAAA,CAAa,WAAW,cAAA,EAAgB;AAC1C,MAAA,IAAI;AACF,QAAA,cAAA,CAAe,OAAA;AAAA,UACb,iBAAA;AAAA,UACA,MAAA,CAAO,iBAAA,CAAkB,YAAA,CAAa,OAAA,EAAS,IAAI,CAAC;AAAA,SACtD;AAAA,MACF,CAAA,CAAA,MAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,iBAAA,EAAmB,cAAc,CAAC,CAAA;AAE5C,EAAAG,eAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,aAAA,CAAc,MAAA,EAAO;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,gBAAA,EAAkB;AAEvB,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,kBAAA,EAAoB,UAAU,CAAA;AAE3D,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,kBAAA,EAAmB;AAAA,IACrB,CAAA;AAEA,IAAA,gBAAA,CAAiB,iBAAiB,QAAA,EAAU,YAAA,EAAc,EAAE,OAAA,EAAS,MAAM,CAAA;AAC3E,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,kBAAkB,CAAA;AAEpD,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,kBAAkB,CAAA;AAC5D,IAAA,cAAA,CAAe,QAAQ,gBAAgB,CAAA;AAEvC,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,SAAS,CAAA;AACtB,MAAA,gBAAA,CAAiB,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAC3D,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,kBAAkB,CAAA;AACvD,MAAA,cAAA,CAAe,UAAA,EAAW;AAAA,IAC5B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAA,EAAY,gBAAA,EAAkB,kBAAkB,CAAC,CAAA;AAErD,EAAA,MAAM,cAAA,GAAiBH,kBAAY,MAAM;AACvC,IAAA,MAAM,QAAQ,CAAC,YAAA;AACf,IAAA,YAAA,CAAa,OAAA,EAAS,QAAA;AAAA,MACpB,IAAA,KAAS,GAAA,GAAM,EAAE,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,QAAA,EAAS,GAAI,EAAE,GAAA,EAAK,KAAA,EAAO,QAAA,EAAU,QAAA;AAAS,KACxF;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,YAAY,CAAC,CAAA;AAEvB,EAAA,MAAM,aAAA,GAAgBA,kBAAY,MAAM;AACtC,IAAA,YAAA,CAAa,OAAA,EAAS,QAAA;AAAA,MACpB,IAAA,KAAS,GAAA,GACL,EAAE,IAAA,EAAM,YAAA,EAAc,QAAA,EAAU,QAAA,EAAS,GACzC,EAAE,GAAA,EAAK,YAAA,EAAc,QAAA,EAAU,QAAA;AAAS,KAC9C;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,YAAY,CAAC,CAAA;AAEvB,EAAA,OAAO;AAAA,IACL,YAAA,EAAc,kBAAA;AAAA,IACd,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,IACA;AAAA,GACF;AACF","file":"use-scrollable-container.cjs","sourcesContent":["import { useRef, useEffect, useLayoutEffect, useState, useCallback, useMemo, type Ref } from 'react';\r\nimport { debounce } from '@publikit/utils';\r\n\r\nexport const SCROLL_AMOUNT = 80;\r\nexport const SCROLL_CHECK_DELAY = 100;\r\nexport const DEFAULT_SCROLL_POSITION_KEY = 'scrollable-container-position';\r\nconst STORAGE_DEBOUNCE_MS = 150;\r\n\r\nexport type ScrollAxis = 'x' | 'y';\r\n\r\nexport interface ScrollStorageAdapter {\r\n  getItem(key: string): string | null;\r\n  setItem(key: string, value: string): void;\r\n}\r\n\r\nexport interface UseScrollableContainerOptions {\r\n  /** Session/storage key used to persist scroll position. */\r\n  scrollPositionKey: string;\r\n  /** Axis to measure and scroll. */\r\n  axis?: ScrollAxis;\r\n  /** Distance used by scroll helpers. */\r\n  scrollAmount?: number;\r\n  /** Delay before initial scrollability check. */\r\n  checkDelay?: number;\r\n  /** Optional storage adapter. Pass `false` to disable persistence. */\r\n  storage?: ScrollStorageAdapter | false;\r\n}\r\n\r\nexport interface UseScrollableContainerReturn {\r\n  /** Callback ref — attach to the scrollable element. */\r\n  containerRef: Ref<HTMLElement | null>;\r\n  canScrollBackward: boolean;\r\n  canScrollForward: boolean;\r\n  scrollBackward: () => void;\r\n  scrollForward: () => void;\r\n  checkScrollability: () => void;\r\n  preserveScrollPosition: () => void;\r\n}\r\n\r\nfunction resolveStorage(\r\n  storage: ScrollStorageAdapter | false | undefined,\r\n): ScrollStorageAdapter | null {\r\n  if (storage === false) return null;\r\n  if (storage) return storage;\r\n  if (typeof sessionStorage === 'undefined') return null;\r\n  return sessionStorage;\r\n}\r\n\r\nfunction getScrollPosition(element: HTMLElement, axis: ScrollAxis): number {\r\n  return axis === 'x' ? element.scrollLeft : element.scrollTop;\r\n}\r\n\r\nfunction setScrollPosition(element: HTMLElement, axis: ScrollAxis, position: number): void {\r\n  if (axis === 'x') {\r\n    element.scrollLeft = position;\r\n  } else {\r\n    element.scrollTop = position;\r\n  }\r\n}\r\n\r\nfunction getScrollSize(element: HTMLElement, axis: ScrollAxis): number {\r\n  return axis === 'x' ? element.scrollWidth : element.scrollHeight;\r\n}\r\n\r\nfunction getClientSize(element: HTMLElement, axis: ScrollAxis): number {\r\n  return axis === 'x' ? element.clientWidth : element.clientHeight;\r\n}\r\n\r\n/**\r\n * Scrollable container with position persistence and scroll button state.\r\n */\r\nexport function useScrollableContainer(\r\n  {\r\n    scrollPositionKey,\r\n    axis = 'y',\r\n    scrollAmount = SCROLL_AMOUNT,\r\n    checkDelay = SCROLL_CHECK_DELAY,\r\n    storage,\r\n  }: UseScrollableContainerOptions,\r\n): UseScrollableContainerReturn {\r\n  const containerRef = useRef<HTMLElement | null>(null);\r\n  const [containerElement, setContainerElement] = useState<HTMLElement | null>(null);\r\n  const isRestoringRef = useRef<boolean>(false);\r\n  const [canScrollBackward, setCanScrollBackward] = useState(false);\r\n  const [canScrollForward, setCanScrollForward] = useState(false);\r\n  const storageAdapter = useMemo(() => resolveStorage(storage), [storage]);\r\n\r\n  const assignContainerRef = useCallback((node: HTMLElement | null) => {\r\n    containerRef.current = node;\r\n    setContainerElement(node);\r\n  }, []);\r\n\r\n  const saveToStorage = useMemo(\r\n    () =>\r\n      debounce((position: number) => {\r\n        if (!storageAdapter) return;\r\n        try {\r\n          storageAdapter.setItem(scrollPositionKey, String(position));\r\n        } catch {\r\n          // Ignore storage errors\r\n        }\r\n      }, STORAGE_DEBOUNCE_MS),\r\n    [scrollPositionKey, storageAdapter]\r\n  );\r\n\r\n  const checkScrollability = useCallback(() => {\r\n    if (!containerRef.current || isRestoringRef.current) return;\r\n    const scrollPosition = getScrollPosition(containerRef.current, axis);\r\n    const scrollSize = getScrollSize(containerRef.current, axis);\r\n    const clientSize = getClientSize(containerRef.current, axis);\r\n\r\n    saveToStorage(scrollPosition);\r\n\r\n    setCanScrollBackward(scrollPosition > 0);\r\n    setCanScrollForward(scrollPosition < scrollSize - clientSize - 1);\r\n  }, [axis, saveToStorage]);\r\n\r\n  useLayoutEffect(() => {\r\n    if (!containerElement || isRestoringRef.current) return;\r\n    if (!storageAdapter) return;\r\n\r\n    try {\r\n      const savedPosition = storageAdapter.getItem(scrollPositionKey);\r\n      if (savedPosition !== null) {\r\n        const position = parseInt(savedPosition, 10);\r\n        const currentPosition = getScrollPosition(containerElement, axis);\r\n\r\n        if (position > 0 && !isNaN(position) && Math.abs(currentPosition - position) > 1) {\r\n          isRestoringRef.current = true;\r\n          setScrollPosition(containerElement, axis, position);\r\n          requestAnimationFrame(() => {\r\n            isRestoringRef.current = false;\r\n            checkScrollability();\r\n          });\r\n        }\r\n      }\r\n    } catch {\r\n      // Ignore storage errors\r\n    }\r\n  }, [axis, containerElement, scrollPositionKey, checkScrollability, storageAdapter]);\r\n\r\n  const preserveScrollPosition = useCallback(() => {\r\n    if (containerRef.current && storageAdapter) {\r\n      try {\r\n        storageAdapter.setItem(\r\n          scrollPositionKey,\r\n          String(getScrollPosition(containerRef.current, axis)),\r\n        );\r\n      } catch {\r\n        // Ignore storage errors\r\n      }\r\n    }\r\n  }, [axis, scrollPositionKey, storageAdapter]);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      saveToStorage.cancel();\r\n    };\r\n  }, [saveToStorage]);\r\n\r\n  useEffect(() => {\r\n    if (!containerElement) return;\r\n\r\n    const timeoutId = setTimeout(checkScrollability, checkDelay);\r\n\r\n    const handleScroll = () => {\r\n      checkScrollability();\r\n    };\r\n\r\n    containerElement.addEventListener('scroll', handleScroll, { passive: true });\r\n    window.addEventListener('resize', checkScrollability);\r\n\r\n    const resizeObserver = new ResizeObserver(checkScrollability);\r\n    resizeObserver.observe(containerElement);\r\n\r\n    return () => {\r\n      clearTimeout(timeoutId);\r\n      containerElement.removeEventListener('scroll', handleScroll);\r\n      window.removeEventListener('resize', checkScrollability);\r\n      resizeObserver.disconnect();\r\n    };\r\n  }, [checkDelay, containerElement, checkScrollability]);\r\n\r\n  const scrollBackward = useCallback(() => {\r\n    const delta = -scrollAmount;\r\n    containerRef.current?.scrollBy(\r\n      axis === 'x' ? { left: delta, behavior: 'smooth' } : { top: delta, behavior: 'smooth' },\r\n    );\r\n  }, [axis, scrollAmount]);\r\n\r\n  const scrollForward = useCallback(() => {\r\n    containerRef.current?.scrollBy(\r\n      axis === 'x'\r\n        ? { left: scrollAmount, behavior: 'smooth' }\r\n        : { top: scrollAmount, behavior: 'smooth' },\r\n    );\r\n  }, [axis, scrollAmount]);\r\n\r\n  return {\r\n    containerRef: assignContainerRef as Ref<HTMLElement | null>,\r\n    canScrollBackward,\r\n    canScrollForward,\r\n    scrollBackward,\r\n    scrollForward,\r\n    checkScrollability,\r\n    preserveScrollPosition,\r\n  };\r\n}\r\n"]}

package/dist/use-scrollable-container.d.cts

@@ -0,0 +1,38 @@
+import { Ref } from 'react';
+
+declare const SCROLL_AMOUNT = 80;
+declare const SCROLL_CHECK_DELAY = 100;
+declare const DEFAULT_SCROLL_POSITION_KEY = "scrollable-container-position";
+type ScrollAxis = 'x' | 'y';
+interface ScrollStorageAdapter {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+interface UseScrollableContainerOptions {
+    /** Session/storage key used to persist scroll position. */
+    scrollPositionKey: string;
+    /** Axis to measure and scroll. */
+    axis?: ScrollAxis;
+    /** Distance used by scroll helpers. */
+    scrollAmount?: number;
+    /** Delay before initial scrollability check. */
+    checkDelay?: number;
+    /** Optional storage adapter. Pass `false` to disable persistence. */
+    storage?: ScrollStorageAdapter | false;
+}
+interface UseScrollableContainerReturn {
+    /** Callback ref — attach to the scrollable element. */
+    containerRef: Ref<HTMLElement | null>;
+    canScrollBackward: boolean;
+    canScrollForward: boolean;
+    scrollBackward: () => void;
+    scrollForward: () => void;
+    checkScrollability: () => void;
+    preserveScrollPosition: () => void;
+}
+/**
+ * Scrollable container with position persistence and scroll button state.
+ */
+declare function useScrollableContainer({ scrollPositionKey, axis, scrollAmount, checkDelay, storage, }: UseScrollableContainerOptions): UseScrollableContainerReturn;
+
+export { DEFAULT_SCROLL_POSITION_KEY, SCROLL_AMOUNT, SCROLL_CHECK_DELAY, type ScrollAxis, type ScrollStorageAdapter, type UseScrollableContainerOptions, type UseScrollableContainerReturn, useScrollableContainer };

package/dist/use-scrollable-container.d.ts

@@ -0,0 +1,38 @@
+import { Ref } from 'react';
+
+declare const SCROLL_AMOUNT = 80;
+declare const SCROLL_CHECK_DELAY = 100;
+declare const DEFAULT_SCROLL_POSITION_KEY = "scrollable-container-position";
+type ScrollAxis = 'x' | 'y';
+interface ScrollStorageAdapter {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+interface UseScrollableContainerOptions {
+    /** Session/storage key used to persist scroll position. */
+    scrollPositionKey: string;
+    /** Axis to measure and scroll. */
+    axis?: ScrollAxis;
+    /** Distance used by scroll helpers. */
+    scrollAmount?: number;
+    /** Delay before initial scrollability check. */
+    checkDelay?: number;
+    /** Optional storage adapter. Pass `false` to disable persistence. */
+    storage?: ScrollStorageAdapter | false;
+}
+interface UseScrollableContainerReturn {
+    /** Callback ref — attach to the scrollable element. */
+    containerRef: Ref<HTMLElement | null>;
+    canScrollBackward: boolean;
+    canScrollForward: boolean;
+    scrollBackward: () => void;
+    scrollForward: () => void;
+    checkScrollability: () => void;
+    preserveScrollPosition: () => void;
+}
+/**
+ * Scrollable container with position persistence and scroll button state.
+ */
+declare function useScrollableContainer({ scrollPositionKey, axis, scrollAmount, checkDelay, storage, }: UseScrollableContainerOptions): UseScrollableContainerReturn;
+
+export { DEFAULT_SCROLL_POSITION_KEY, SCROLL_AMOUNT, SCROLL_CHECK_DELAY, type ScrollAxis, type ScrollStorageAdapter, type UseScrollableContainerOptions, type UseScrollableContainerReturn, useScrollableContainer };