@anker-in/headless-ui 1.1.74 → 1.1.76

package/dist/esm/hooks/useDraggableScroll.d.ts

@@ -0,0 +1,77 @@
+/**
+ * useDraggableScroll - 拖拽滚动 Hook
+ *
+ * 基于 Framer Motion 实现的水平拖拽滚动功能
+ *
+ * @module useDraggableScroll
+ * @date 2026-01-29
+ */
+export interface UseDraggableScrollOptions {
+    /**
+     * 拖拽速度倍数
+     * @default 1
+     */
+    dragSpeed?: number;
+    /**
+     * 是否启用惯性滚动
+     * @default true
+     */
+    enableMomentum?: boolean;
+    /**
+     * 边界弹性系数（0-1，0表示无弹性）
+     * @default 0.1
+     */
+    dragElastic?: number;
+}
+export interface UseDraggableScrollReturn {
+    /**
+     * 容器 ref
+     */
+    containerRef: React.RefObject<HTMLDivElement>;
+    /**
+     * 是否正在拖拽
+     */
+    isDragging: boolean;
+    /**
+     * 滚动进度（0-100）
+     */
+    scrollProgress: number;
+    /**
+     * 是否可以向左滚动
+     */
+    canScrollLeft: boolean;
+    /**
+     * 是否可以向右滚动
+     */
+    canScrollRight: boolean;
+    /**
+     * 滚动到指定位置
+     */
+    scrollTo: (position: number, smooth?: boolean) => void;
+    /**
+     * 向左滚动
+     */
+    scrollLeft: (amount?: number) => void;
+    /**
+     * 向右滚动
+     */
+    scrollRight: (amount?: number) => void;
+}
+/**
+ * 拖拽滚动 Hook
+ *
+ * @example
+ * ```tsx
+ * const { containerRef, isDragging, scrollProgress } = useDraggableScroll({
+ *   dragSpeed: 1.5,
+ *   enableMomentum: true
+ * })
+ *
+ * return (
+ *   <div ref={containerRef} className="overflow-x-auto">
+ *     {items.map(item => <Item key={item.id} />)}
+ *   </div>
+ * )
+ * ```
+ */
+export declare function useDraggableScroll(options?: UseDraggableScrollOptions): UseDraggableScrollReturn;

package/dist/esm/hooks/useDraggableScroll.js

@@ -0,0 +1,2 @@
+import{useRef as R,useState as l,useEffect as L}from"react";function T(i={}){const{dragSpeed:v=1,enableMomentum:p=!0,dragElastic:D=.1}=i,o=R(null),[g,M]=l(!1),[u,f]=l(0),[m,b]=l(!1),[S,h]=l(!1),n=()=>{const r=o.current;if(!r)return;const{scrollLeft:e,scrollWidth:t,clientWidth:s}=r,a=t-s,d=a>0?e/a*100:0;f(Math.min(100,Math.max(0,d))),b(e>0),h(e<a-1)};L(()=>{const r=o.current;if(!r)return;n(),r.addEventListener("scroll",n);const e=new ResizeObserver(n);return e.observe(r),()=>{r.removeEventListener("scroll",n),e.disconnect()}},[]);const c=(r,e=!0)=>{const t=o.current;t&&t.scrollTo({left:r,behavior:e?"smooth":"auto"})};return{containerRef:o,isDragging:g,scrollProgress:u,canScrollLeft:m,canScrollRight:S,scrollTo:c,scrollLeft:(r=300)=>{const e=o.current;if(!e)return;const t=Math.max(0,e.scrollLeft-r);c(t)},scrollRight:(r=300)=>{const e=o.current;if(!e)return;const t=e.scrollWidth-e.clientWidth,s=Math.min(t,e.scrollLeft+r);c(s)}}}export{T as useDraggableScroll};
+//# sourceMappingURL=useDraggableScroll.js.map

package/dist/esm/hooks/useDraggableScroll.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useDraggableScroll.ts"],
+  "sourcesContent": ["/**\n * useDraggableScroll - \u62D6\u62FD\u6EDA\u52A8 Hook\n *\n * \u57FA\u4E8E Framer Motion \u5B9E\u73B0\u7684\u6C34\u5E73\u62D6\u62FD\u6EDA\u52A8\u529F\u80FD\n *\n * @module useDraggableScroll\n * @date 2026-01-29\n */\n\nimport { useRef, useState, useEffect } from 'react'\n\nexport interface UseDraggableScrollOptions {\n  /**\n   * \u62D6\u62FD\u901F\u5EA6\u500D\u6570\n   * @default 1\n   */\n  dragSpeed?: number\n\n  /**\n   * \u662F\u5426\u542F\u7528\u60EF\u6027\u6EDA\u52A8\n   * @default true\n   */\n  enableMomentum?: boolean\n\n  /**\n   * \u8FB9\u754C\u5F39\u6027\u7CFB\u6570\uFF080-1\uFF0C0\u8868\u793A\u65E0\u5F39\u6027\uFF09\n   * @default 0.1\n   */\n  dragElastic?: number\n}\n\nexport interface UseDraggableScrollReturn {\n  /**\n   * \u5BB9\u5668 ref\n   */\n  containerRef: React.RefObject<HTMLDivElement>\n\n  /**\n   * \u662F\u5426\u6B63\u5728\u62D6\u62FD\n   */\n  isDragging: boolean\n\n  /**\n   * \u6EDA\u52A8\u8FDB\u5EA6\uFF080-100\uFF09\n   */\n  scrollProgress: number\n\n  /**\n   * \u662F\u5426\u53EF\u4EE5\u5411\u5DE6\u6EDA\u52A8\n   */\n  canScrollLeft: boolean\n\n  /**\n   * \u662F\u5426\u53EF\u4EE5\u5411\u53F3\u6EDA\u52A8\n   */\n  canScrollRight: boolean\n\n  /**\n   * \u6EDA\u52A8\u5230\u6307\u5B9A\u4F4D\u7F6E\n   */\n  scrollTo: (position: number, smooth?: boolean) => void\n\n  /**\n   * \u5411\u5DE6\u6EDA\u52A8\n   */\n  scrollLeft: (amount?: number) => void\n\n  /**\n   * \u5411\u53F3\u6EDA\u52A8\n   */\n  scrollRight: (amount?: number) => void\n}\n\n/**\n * \u62D6\u62FD\u6EDA\u52A8 Hook\n *\n * @example\n * ```tsx\n * const { containerRef, isDragging, scrollProgress } = useDraggableScroll({\n *   dragSpeed: 1.5,\n *   enableMomentum: true\n * })\n *\n * return (\n *   <div ref={containerRef} className=\"overflow-x-auto\">\n *     {items.map(item => <Item key={item.id} />)}\n *   </div>\n * )\n * ```\n */\nexport function useDraggableScroll(options: UseDraggableScrollOptions = {}): UseDraggableScrollReturn {\n  const { dragSpeed = 1, enableMomentum = true, dragElastic = 0.1 } = options\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [isDragging, setIsDragging] = useState(false)\n  const [scrollProgress, setScrollProgress] = useState(0)\n  const [canScrollLeft, setCanScrollLeft] = useState(false)\n  const [canScrollRight, setCanScrollRight] = useState(false)\n\n  // \u66F4\u65B0\u6EDA\u52A8\u72B6\u6001\n  const updateScrollState = () => {\n    const container = containerRef.current\n    if (!container) return\n\n    const { scrollLeft, scrollWidth, clientWidth } = container\n\n    // \u8BA1\u7B97\u6EDA\u52A8\u8FDB\u5EA6\n    const maxScroll = scrollWidth - clientWidth\n    const progress = maxScroll > 0 ? (scrollLeft / maxScroll) * 100 : 0\n    setScrollProgress(Math.min(100, Math.max(0, progress)))\n\n    // \u66F4\u65B0\u6EDA\u52A8\u65B9\u5411\u53EF\u7528\u6027\n    setCanScrollLeft(scrollLeft > 0)\n    setCanScrollRight(scrollLeft < maxScroll - 1) // -1 \u5BB9\u9519\n  }\n\n  // \u76D1\u542C\u5BB9\u5668\u6EDA\u52A8\u4E8B\u4EF6\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    // \u521D\u59CB\u5316\u72B6\u6001\n    updateScrollState()\n\n    // \u76D1\u542C\u6EDA\u52A8\n    container.addEventListener('scroll', updateScrollState)\n\n    // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\n    const resizeObserver = new ResizeObserver(updateScrollState)\n    resizeObserver.observe(container)\n\n    return () => {\n      container.removeEventListener('scroll', updateScrollState)\n      resizeObserver.disconnect()\n    }\n  }, [])\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u4F4D\u7F6E\n  const scrollTo = (position: number, smooth = true) => {\n    const container = containerRef.current\n    if (!container) return\n\n    container.scrollTo({\n      left: position,\n      behavior: smooth ? 'smooth' : 'auto',\n    })\n  }\n\n  // \u5411\u5DE6\u6EDA\u52A8\n  const scrollLeftFn = (amount = 300) => {\n    const container = containerRef.current\n    if (!container) return\n\n    const targetScroll = Math.max(0, container.scrollLeft - amount)\n    scrollTo(targetScroll)\n  }\n\n  // \u5411\u53F3\u6EDA\u52A8\n  const scrollRightFn = (amount = 300) => {\n    const container = containerRef.current\n    if (!container) return\n\n    const maxScroll = container.scrollWidth - container.clientWidth\n    const targetScroll = Math.min(maxScroll, container.scrollLeft + amount)\n    scrollTo(targetScroll)\n  }\n\n  return {\n    containerRef,\n    isDragging,\n    scrollProgress,\n    canScrollLeft,\n    canScrollRight,\n    scrollTo,\n    scrollLeft: scrollLeftFn,\n    scrollRight: scrollRightFn,\n  }\n}\n"],
+  "mappings": "AASA,OAAS,UAAAA,EAAQ,YAAAC,EAAU,aAAAC,MAAiB,QAiFrC,SAASC,EAAmBC,EAAqC,CAAC,EAA6B,CACpG,KAAM,CAAE,UAAAC,EAAY,EAAG,eAAAC,EAAiB,GAAM,YAAAC,EAAc,EAAI,EAAIH,EAE9DI,EAAeR,EAAuB,IAAI,EAC1C,CAACS,EAAYC,CAAa,EAAIT,EAAS,EAAK,EAC5C,CAACU,EAAgBC,CAAiB,EAAIX,EAAS,CAAC,EAChD,CAACY,EAAeC,CAAgB,EAAIb,EAAS,EAAK,EAClD,CAACc,EAAgBC,CAAiB,EAAIf,EAAS,EAAK,EAGpDgB,EAAoB,IAAM,CAC9B,MAAMC,EAAYV,EAAa,QAC/B,GAAI,CAACU,EAAW,OAEhB,KAAM,CAAE,WAAAC,EAAY,YAAAC,EAAa,YAAAC,CAAY,EAAIH,EAG3CI,EAAYF,EAAcC,EAC1BE,EAAWD,EAAY,EAAKH,EAAaG,EAAa,IAAM,EAClEV,EAAkB,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGW,CAAQ,CAAC,CAAC,EAGtDT,EAAiBK,EAAa,CAAC,EAC/BH,EAAkBG,EAAaG,EAAY,CAAC,CAC9C,EAGApB,EAAU,IAAM,CACd,MAAMgB,EAAYV,EAAa,QAC/B,GAAI,CAACU,EAAW,OAGhBD,EAAkB,EAGlBC,EAAU,iBAAiB,SAAUD,CAAiB,EAGtD,MAAMO,EAAiB,IAAI,eAAeP,CAAiB,EAC3D,OAAAO,EAAe,QAAQN,CAAS,EAEzB,IAAM,CACXA,EAAU,oBAAoB,SAAUD,CAAiB,EACzDO,EAAe,WAAW,CAC5B,CACF,EAAG,CAAC,CAAC,EAGL,MAAMC,EAAW,CAACC,EAAkBC,EAAS,KAAS,CACpD,MAAMT,EAAYV,EAAa,QAC1BU,GAELA,EAAU,SAAS,CACjB,KAAMQ,EACN,SAAUC,EAAS,SAAW,MAChC,CAAC,CACH,EAqBA,MAAO,CACL,aAAAnB,EACA,WAAAC,EACA,eAAAE,EACA,cAAAE,EACA,eAAAE,EACA,SAAAU,EACA,WAzBmB,CAACG,EAAS,MAAQ,CACrC,MAAMV,EAAYV,EAAa,QAC/B,GAAI,CAACU,EAAW,OAEhB,MAAMW,EAAe,KAAK,IAAI,EAAGX,EAAU,WAAaU,CAAM,EAC9DH,EAASI,CAAY,CACvB,EAoBE,YAjBoB,CAACD,EAAS,MAAQ,CACtC,MAAMV,EAAYV,EAAa,QAC/B,GAAI,CAACU,EAAW,OAEhB,MAAMI,EAAYJ,EAAU,YAAcA,EAAU,YAC9CW,EAAe,KAAK,IAAIP,EAAWJ,EAAU,WAAaU,CAAM,EACtEH,EAASI,CAAY,CACvB,CAWA,CACF",
+  "names": ["useRef", "useState", "useEffect", "useDraggableScroll", "options", "dragSpeed", "enableMomentum", "dragElastic", "containerRef", "isDragging", "setIsDragging", "scrollProgress", "setScrollProgress", "canScrollLeft", "setCanScrollLeft", "canScrollRight", "setCanScrollRight", "updateScrollState", "container", "scrollLeft", "scrollWidth", "clientWidth", "maxScroll", "progress", "resizeObserver", "scrollTo", "position", "smooth", "amount", "targetScroll"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.1.74",
+  "version": "1.1.76",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",