@intlayer/design-system 6.1.2 → 6.1.4

package/dist/hooks/useHorizontalSwipe.cjs

@@ -0,0 +1,144 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ReactExports = require("react");
+const useHorizontalSwipe = (config) => {
+  const {
+    enable = true,
+    onSwipeLeft,
+    onSwipeRight,
+    itemIndex,
+    itemCount,
+    thresholdPct = 20,
+    touchAction = "pan-y",
+    disableWhenSelectingText = true
+  } = config;
+  const containerRef = ReactExports.useRef(null);
+  const [isDragging, setIsDragging] = ReactExports.useState(false);
+  const [dragDeltaPct, setDragDeltaPct] = ReactExports.useState(0);
+  const pointerStateRef = ReactExports.useRef({
+    pointerId: null,
+    startX: 0,
+    startY: 0,
+    lastX: 0,
+    axisLocked: false,
+    isHorizontal: false
+  });
+  const isTextSelectingRef = ReactExports.useRef(false);
+  const getContainerWidth = () => {
+    const node = containerRef.current;
+    return node ? node.clientWidth : 0;
+  };
+  const applyEdgeResistance = (pct) => {
+    const atFirst = itemIndex <= 0;
+    const atLast = itemIndex >= itemCount - 1;
+    if (atFirst && pct > 0 || atLast && pct < 0) {
+      const magnitude = Math.abs(pct);
+      const resistance = 1 + magnitude / 30;
+      return pct / resistance;
+    }
+    return pct;
+  };
+  const onPointerDown = (e) => {
+    if (!enable) return;
+    if (pointerStateRef.current.pointerId !== null) return;
+    pointerStateRef.current.pointerId = e.pointerId;
+    pointerStateRef.current.startX = e.clientX;
+    pointerStateRef.current.startY = e.clientY;
+    pointerStateRef.current.lastX = e.clientX;
+    pointerStateRef.current.axisLocked = false;
+    pointerStateRef.current.isHorizontal = false;
+    isTextSelectingRef.current = false;
+    setIsDragging(false);
+    setDragDeltaPct(0);
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (e) => {
+    if (!enable) return;
+    if (pointerStateRef.current.pointerId !== e.pointerId) return;
+    const width = getContainerWidth();
+    if (!width) return;
+    const dx = e.clientX - pointerStateRef.current.startX;
+    const dy = e.clientY - pointerStateRef.current.startY;
+    if (disableWhenSelectingText) {
+      const sel = typeof window !== "undefined" ? window.getSelection?.() : null;
+      const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;
+      if (isSelecting) {
+        isTextSelectingRef.current = true;
+        return;
+      }
+    }
+    if (!pointerStateRef.current.axisLocked) {
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+      if (absDx > 6 || absDy > 6) {
+        pointerStateRef.current.axisLocked = true;
+        pointerStateRef.current.isHorizontal = absDx > absDy;
+      }
+    }
+    if (!pointerStateRef.current.isHorizontal) {
+      return;
+    }
+    e.preventDefault();
+    if (!isDragging) setIsDragging(true);
+    const pct = dx / width * 100;
+    setDragDeltaPct(applyEdgeResistance(pct));
+    pointerStateRef.current.lastX = e.clientX;
+  };
+  const endDrag = (e) => {
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    const wasHorizontal = pointerStateRef.current.isHorizontal;
+    const delta = dragDeltaPct;
+    setIsDragging(false);
+    setDragDeltaPct(0);
+    pointerStateRef.current.pointerId = null;
+    pointerStateRef.current.axisLocked = false;
+    pointerStateRef.current.isHorizontal = false;
+    if (isTextSelectingRef.current) {
+      isTextSelectingRef.current = false;
+      return;
+    }
+    if (!wasHorizontal) return;
+    if (delta > thresholdPct) {
+      onSwipeRight?.();
+    } else if (delta < -thresholdPct) {
+      onSwipeLeft?.();
+    }
+  };
+  const onPointerUp = (e) => {
+    if (!enable) return;
+    if (pointerStateRef.current.pointerId !== e.pointerId) return;
+    endDrag(e);
+  };
+  const onPointerCancel = (e) => {
+    if (!enable) return;
+    if (pointerStateRef.current.pointerId !== e.pointerId) return;
+    endDrag(e);
+  };
+  ReactExports.useEffect(() => {
+    setDragDeltaPct(0);
+    setIsDragging(false);
+  }, [itemIndex]);
+  const style = { touchAction };
+  return {
+    containerRef,
+    isDragging,
+    dragDeltaPct,
+    containerProps: {
+      ref: containerRef,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      style
+    }
+  };
+};
+exports.useHorizontalSwipe = useHorizontalSwipe;
+//# sourceMappingURL=useHorizontalSwipe.cjs.map

package/dist/hooks/useHorizontalSwipe.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalSwipe.cjs","sources":["../../src/hooks/useHorizontalSwipe.ts"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type PointerEvent,\n  type PointerEventHandler,\n  type RefObject,\n} from 'react';\n\nexport type HorizontalSwipeConfig = {\n  onSwipeLeft?: () => void; // move to next item\n  onSwipeRight?: () => void; // move to previous item\n  enable?: boolean;\n  itemIndex: number;\n  itemCount: number;\n  thresholdPct?: number; // percentage of width required to trigger\n  touchAction?: string; // CSS touch-action for the container, defaults to 'pan-y'\n  disableWhenSelectingText?: boolean; // if true, do not swipe while text selection is active\n};\n\nexport type HorizontalSwipeHook = {\n  containerRef: RefObject<HTMLDivElement>;\n  isDragging: boolean;\n  dragDeltaPct: number;\n  containerProps: {\n    ref: RefObject<HTMLDivElement>;\n    onPointerDown: PointerEventHandler<HTMLDivElement>;\n    onPointerMove: PointerEventHandler<HTMLDivElement>;\n    onPointerUp: PointerEventHandler<HTMLDivElement>;\n    onPointerCancel: PointerEventHandler<HTMLDivElement>;\n    style: CSSProperties;\n  };\n};\n\nexport const useHorizontalSwipe = (\n  config: HorizontalSwipeConfig\n): HorizontalSwipeHook => {\n  const {\n    enable = true,\n    onSwipeLeft,\n    onSwipeRight,\n    itemIndex,\n    itemCount,\n    thresholdPct = 20,\n    touchAction = 'pan-y',\n    disableWhenSelectingText = true,\n  } = config;\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [dragDeltaPct, setDragDeltaPct] = useState(0);\n  const pointerStateRef = useRef<{\n    pointerId: number | null;\n    startX: number;\n    startY: number;\n    lastX: number;\n    axisLocked: boolean;\n    isHorizontal: boolean;\n  }>({\n    pointerId: null,\n    startX: 0,\n    startY: 0,\n    lastX: 0,\n    axisLocked: false,\n    isHorizontal: false,\n  });\n\n  const isTextSelectingRef = useRef<boolean>(false);\n\n  const getContainerWidth = () => {\n    const node = containerRef.current;\n    return node ? node.clientWidth : 0;\n  };\n\n  const applyEdgeResistance = (pct: number) => {\n    const atFirst = itemIndex <= 0;\n    const atLast = itemIndex >= itemCount - 1;\n\n    if ((atFirst && pct > 0) || (atLast && pct < 0)) {\n      const magnitude = Math.abs(pct);\n      const resistance = 1 + magnitude / 30;\n      return pct / resistance;\n    }\n\n    return pct;\n  };\n\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!enable) return;\n    if (pointerStateRef.current.pointerId !== null) return;\n    pointerStateRef.current.pointerId = e.pointerId;\n    pointerStateRef.current.startX = e.clientX;\n    pointerStateRef.current.startY = e.clientY;\n    pointerStateRef.current.lastX = e.clientX;\n    pointerStateRef.current.axisLocked = false;\n    pointerStateRef.current.isHorizontal = false;\n    isTextSelectingRef.current = false;\n    setIsDragging(false);\n    setDragDeltaPct(0);\n    try {\n      (\n        e.currentTarget as Element & { setPointerCapture: (id: number) => void }\n      ).setPointerCapture(e.pointerId);\n    } catch {}\n  };\n\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!enable) return;\n    if (pointerStateRef.current.pointerId !== e.pointerId) return;\n\n    const width = getContainerWidth();\n    if (!width) return;\n\n    const dx = e.clientX - pointerStateRef.current.startX;\n    const dy = e.clientY - pointerStateRef.current.startY;\n\n    // If user is selecting text, do not engage swipe\n    if (disableWhenSelectingText) {\n      const sel =\n        typeof window !== 'undefined' ? window.getSelection?.() : null;\n      const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;\n      if (isSelecting) {\n        isTextSelectingRef.current = true;\n        return;\n      }\n    }\n\n    if (!pointerStateRef.current.axisLocked) {\n      const absDx = Math.abs(dx);\n      const absDy = Math.abs(dy);\n      if (absDx > 6 || absDy > 6) {\n        pointerStateRef.current.axisLocked = true;\n        pointerStateRef.current.isHorizontal = absDx > absDy;\n      }\n    }\n\n    if (!pointerStateRef.current.isHorizontal) {\n      return;\n    }\n\n    e.preventDefault();\n\n    if (!isDragging) setIsDragging(true);\n\n    const pct = (dx / width) * 100;\n    setDragDeltaPct(applyEdgeResistance(pct));\n    pointerStateRef.current.lastX = e.clientX;\n  };\n\n  const endDrag = (e: PointerEvent<HTMLDivElement>) => {\n    try {\n      (\n        e.currentTarget as Element & {\n          releasePointerCapture: (id: number) => void;\n        }\n      ).releasePointerCapture(e.pointerId);\n    } catch {}\n\n    const wasHorizontal = pointerStateRef.current.isHorizontal;\n    const delta = dragDeltaPct;\n\n    setIsDragging(false);\n    setDragDeltaPct(0);\n    pointerStateRef.current.pointerId = null;\n    pointerStateRef.current.axisLocked = false;\n    pointerStateRef.current.isHorizontal = false;\n\n    if (isTextSelectingRef.current) {\n      isTextSelectingRef.current = false;\n      return;\n    }\n\n    if (!wasHorizontal) return;\n\n    if (delta > thresholdPct) {\n      onSwipeRight?.();\n    } else if (delta < -thresholdPct) {\n      onSwipeLeft?.();\n    }\n  };\n\n  const onPointerUp: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!enable) return;\n    if (pointerStateRef.current.pointerId !== e.pointerId) return;\n    endDrag(e);\n  };\n\n  const onPointerCancel: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!enable) return;\n    if (pointerStateRef.current.pointerId !== e.pointerId) return;\n    endDrag(e);\n  };\n\n  useEffect(() => {\n    setDragDeltaPct(0);\n    setIsDragging(false);\n  }, [itemIndex]);\n\n  const style: CSSProperties = { touchAction };\n\n  return {\n    containerRef: containerRef as RefObject<HTMLDivElement>,\n    isDragging,\n    dragDeltaPct,\n    containerProps: {\n      ref: containerRef as RefObject<HTMLDivElement>,\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      onPointerCancel,\n      style,\n    },\n  };\n};\n"],"names":["useRef","useState","useEffect"],"mappings":"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"}

package/dist/hooks/useHorizontalSwipe.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, PointerEventHandler, RefObject } from 'react';
+export type HorizontalSwipeConfig = {
+    onSwipeLeft?: () => void;
+    onSwipeRight?: () => void;
+    enable?: boolean;
+    itemIndex: number;
+    itemCount: number;
+    thresholdPct?: number;
+    touchAction?: string;
+    disableWhenSelectingText?: boolean;
+};
+export type HorizontalSwipeHook = {
+    containerRef: RefObject<HTMLDivElement>;
+    isDragging: boolean;
+    dragDeltaPct: number;
+    containerProps: {
+        ref: RefObject<HTMLDivElement>;
+        onPointerDown: PointerEventHandler<HTMLDivElement>;
+        onPointerMove: PointerEventHandler<HTMLDivElement>;
+        onPointerUp: PointerEventHandler<HTMLDivElement>;
+        onPointerCancel: PointerEventHandler<HTMLDivElement>;
+        style: CSSProperties;
+    };
+};
+export declare const useHorizontalSwipe: (config: HorizontalSwipeConfig) => HorizontalSwipeHook;
+//# sourceMappingURL=useHorizontalSwipe.d.ts.map

package/dist/hooks/useHorizontalSwipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalSwipe.d.ts","sourceRoot":"","sources":["../../src/hooks/useHorizontalSwipe.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,aAAa,EAElB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE;QACd,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;QAC/B,aAAa,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACnD,aAAa,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACnD,WAAW,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACjD,eAAe,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;QACrD,KAAK,EAAE,aAAa,CAAC;KACtB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,qBAAqB,KAC5B,mBAiLF,CAAC"}

package/dist/hooks/useHorizontalSwipe.mjs

@@ -0,0 +1,144 @@
+"use client";
+import { useRef, useState, useEffect } from "react";
+const useHorizontalSwipe = (config) => {
+  const {
+    enable = true,
+    onSwipeLeft,
+    onSwipeRight,
+    itemIndex,
+    itemCount,
+    thresholdPct = 20,
+    touchAction = "pan-y",
+    disableWhenSelectingText = true
+  } = config;
+  const containerRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragDeltaPct, setDragDeltaPct] = useState(0);
+  const pointerStateRef = useRef({
+    pointerId: null,
+    startX: 0,
+    startY: 0,
+    lastX: 0,
+    axisLocked: false,
+    isHorizontal: false
+  });
+  const isTextSelectingRef = useRef(false);
+  const getContainerWidth = () => {
+    const node = containerRef.current;
+    return node ? node.clientWidth : 0;
+  };
+  const applyEdgeResistance = (pct) => {
+    const atFirst = itemIndex <= 0;
+    const atLast = itemIndex >= itemCount - 1;
+    if (atFirst && pct > 0 || atLast && pct < 0) {
+      const magnitude = Math.abs(pct);
+      const resistance = 1 + magnitude / 30;
+      return pct / resistance;
+    }
+    return pct;
+  };
+  const onPointerDown = (e) => {
+    if (!enable) return;
+    if (pointerStateRef.current.pointerId !== null) return;
+    pointerStateRef.current.pointerId = e.pointerId;
+    pointerStateRef.current.startX = e.clientX;
+    pointerStateRef.current.startY = e.clientY;
+    pointerStateRef.current.lastX = e.clientX;
+    pointerStateRef.current.axisLocked = false;
+    pointerStateRef.current.isHorizontal = false;
+    isTextSelectingRef.current = false;
+    setIsDragging(false);
+    setDragDeltaPct(0);
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (e) => {
+    if (!enable) return;
+    if (pointerStateRef.current.pointerId !== e.pointerId) return;
+    const width = getContainerWidth();
+    if (!width) return;
+    const dx = e.clientX - pointerStateRef.current.startX;
+    const dy = e.clientY - pointerStateRef.current.startY;
+    if (disableWhenSelectingText) {
+      const sel = typeof window !== "undefined" ? window.getSelection?.() : null;
+      const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;
+      if (isSelecting) {
+        isTextSelectingRef.current = true;
+        return;
+      }
+    }
+    if (!pointerStateRef.current.axisLocked) {
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+      if (absDx > 6 || absDy > 6) {
+        pointerStateRef.current.axisLocked = true;
+        pointerStateRef.current.isHorizontal = absDx > absDy;
+      }
+    }
+    if (!pointerStateRef.current.isHorizontal) {
+      return;
+    }
+    e.preventDefault();
+    if (!isDragging) setIsDragging(true);
+    const pct = dx / width * 100;
+    setDragDeltaPct(applyEdgeResistance(pct));
+    pointerStateRef.current.lastX = e.clientX;
+  };
+  const endDrag = (e) => {
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    const wasHorizontal = pointerStateRef.current.isHorizontal;
+    const delta = dragDeltaPct;
+    setIsDragging(false);
+    setDragDeltaPct(0);
+    pointerStateRef.current.pointerId = null;
+    pointerStateRef.current.axisLocked = false;
+    pointerStateRef.current.isHorizontal = false;
+    if (isTextSelectingRef.current) {
+      isTextSelectingRef.current = false;
+      return;
+    }
+    if (!wasHorizontal) return;
+    if (delta > thresholdPct) {
+      onSwipeRight?.();
+    } else if (delta < -thresholdPct) {
+      onSwipeLeft?.();
+    }
+  };
+  const onPointerUp = (e) => {
+    if (!enable) return;
+    if (pointerStateRef.current.pointerId !== e.pointerId) return;
+    endDrag(e);
+  };
+  const onPointerCancel = (e) => {
+    if (!enable) return;
+    if (pointerStateRef.current.pointerId !== e.pointerId) return;
+    endDrag(e);
+  };
+  useEffect(() => {
+    setDragDeltaPct(0);
+    setIsDragging(false);
+  }, [itemIndex]);
+  const style = { touchAction };
+  return {
+    containerRef,
+    isDragging,
+    dragDeltaPct,
+    containerProps: {
+      ref: containerRef,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      style
+    }
+  };
+};
+export {
+  useHorizontalSwipe
+};
+//# sourceMappingURL=useHorizontalSwipe.mjs.map

package/dist/hooks/useHorizontalSwipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalSwipe.mjs","sources":["../../src/hooks/useHorizontalSwipe.ts"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type PointerEvent,\n  type PointerEventHandler,\n  type RefObject,\n} from 'react';\n\nexport type HorizontalSwipeConfig = {\n  onSwipeLeft?: () => void; // move to next item\n  onSwipeRight?: () => void; // move to previous item\n  enable?: boolean;\n  itemIndex: number;\n  itemCount: number;\n  thresholdPct?: number; // percentage of width required to trigger\n  touchAction?: string; // CSS touch-action for the container, defaults to 'pan-y'\n  disableWhenSelectingText?: boolean; // if true, do not swipe while text selection is active\n};\n\nexport type HorizontalSwipeHook = {\n  containerRef: RefObject<HTMLDivElement>;\n  isDragging: boolean;\n  dragDeltaPct: number;\n  containerProps: {\n    ref: RefObject<HTMLDivElement>;\n    onPointerDown: PointerEventHandler<HTMLDivElement>;\n    onPointerMove: PointerEventHandler<HTMLDivElement>;\n    onPointerUp: PointerEventHandler<HTMLDivElement>;\n    onPointerCancel: PointerEventHandler<HTMLDivElement>;\n    style: CSSProperties;\n  };\n};\n\nexport const useHorizontalSwipe = (\n  config: HorizontalSwipeConfig\n): HorizontalSwipeHook => {\n  const {\n    enable = true,\n    onSwipeLeft,\n    onSwipeRight,\n    itemIndex,\n    itemCount,\n    thresholdPct = 20,\n    touchAction = 'pan-y',\n    disableWhenSelectingText = true,\n  } = config;\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [dragDeltaPct, setDragDeltaPct] = useState(0);\n  const pointerStateRef = useRef<{\n    pointerId: number | null;\n    startX: number;\n    startY: number;\n    lastX: number;\n    axisLocked: boolean;\n    isHorizontal: boolean;\n  }>({\n    pointerId: null,\n    startX: 0,\n    startY: 0,\n    lastX: 0,\n    axisLocked: false,\n    isHorizontal: false,\n  });\n\n  const isTextSelectingRef = useRef<boolean>(false);\n\n  const getContainerWidth = () => {\n    const node = containerRef.current;\n    return node ? node.clientWidth : 0;\n  };\n\n  const applyEdgeResistance = (pct: number) => {\n    const atFirst = itemIndex <= 0;\n    const atLast = itemIndex >= itemCount - 1;\n\n    if ((atFirst && pct > 0) || (atLast && pct < 0)) {\n      const magnitude = Math.abs(pct);\n      const resistance = 1 + magnitude / 30;\n      return pct / resistance;\n    }\n\n    return pct;\n  };\n\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!enable) return;\n    if (pointerStateRef.current.pointerId !== null) return;\n    pointerStateRef.current.pointerId = e.pointerId;\n    pointerStateRef.current.startX = e.clientX;\n    pointerStateRef.current.startY = e.clientY;\n    pointerStateRef.current.lastX = e.clientX;\n    pointerStateRef.current.axisLocked = false;\n    pointerStateRef.current.isHorizontal = false;\n    isTextSelectingRef.current = false;\n    setIsDragging(false);\n    setDragDeltaPct(0);\n    try {\n      (\n        e.currentTarget as Element & { setPointerCapture: (id: number) => void }\n      ).setPointerCapture(e.pointerId);\n    } catch {}\n  };\n\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!enable) return;\n    if (pointerStateRef.current.pointerId !== e.pointerId) return;\n\n    const width = getContainerWidth();\n    if (!width) return;\n\n    const dx = e.clientX - pointerStateRef.current.startX;\n    const dy = e.clientY - pointerStateRef.current.startY;\n\n    // If user is selecting text, do not engage swipe\n    if (disableWhenSelectingText) {\n      const sel =\n        typeof window !== 'undefined' ? window.getSelection?.() : null;\n      const isSelecting = !!sel && sel.rangeCount > 0 && !sel.isCollapsed;\n      if (isSelecting) {\n        isTextSelectingRef.current = true;\n        return;\n      }\n    }\n\n    if (!pointerStateRef.current.axisLocked) {\n      const absDx = Math.abs(dx);\n      const absDy = Math.abs(dy);\n      if (absDx > 6 || absDy > 6) {\n        pointerStateRef.current.axisLocked = true;\n        pointerStateRef.current.isHorizontal = absDx > absDy;\n      }\n    }\n\n    if (!pointerStateRef.current.isHorizontal) {\n      return;\n    }\n\n    e.preventDefault();\n\n    if (!isDragging) setIsDragging(true);\n\n    const pct = (dx / width) * 100;\n    setDragDeltaPct(applyEdgeResistance(pct));\n    pointerStateRef.current.lastX = e.clientX;\n  };\n\n  const endDrag = (e: PointerEvent<HTMLDivElement>) => {\n    try {\n      (\n        e.currentTarget as Element & {\n          releasePointerCapture: (id: number) => void;\n        }\n      ).releasePointerCapture(e.pointerId);\n    } catch {}\n\n    const wasHorizontal = pointerStateRef.current.isHorizontal;\n    const delta = dragDeltaPct;\n\n    setIsDragging(false);\n    setDragDeltaPct(0);\n    pointerStateRef.current.pointerId = null;\n    pointerStateRef.current.axisLocked = false;\n    pointerStateRef.current.isHorizontal = false;\n\n    if (isTextSelectingRef.current) {\n      isTextSelectingRef.current = false;\n      return;\n    }\n\n    if (!wasHorizontal) return;\n\n    if (delta > thresholdPct) {\n      onSwipeRight?.();\n    } else if (delta < -thresholdPct) {\n      onSwipeLeft?.();\n    }\n  };\n\n  const onPointerUp: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!enable) return;\n    if (pointerStateRef.current.pointerId !== e.pointerId) return;\n    endDrag(e);\n  };\n\n  const onPointerCancel: PointerEventHandler<HTMLDivElement> = (e) => {\n    if (!enable) return;\n    if (pointerStateRef.current.pointerId !== e.pointerId) return;\n    endDrag(e);\n  };\n\n  useEffect(() => {\n    setDragDeltaPct(0);\n    setIsDragging(false);\n  }, [itemIndex]);\n\n  const style: CSSProperties = { touchAction };\n\n  return {\n    containerRef: containerRef as RefObject<HTMLDivElement>,\n    isDragging,\n    dragDeltaPct,\n    containerProps: {\n      ref: containerRef as RefObject<HTMLDivElement>,\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      onPointerCancel,\n      style,\n    },\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "6.1.2",
+  "version": "6.1.4",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -60,6 +60,31 @@
     "./css": "./src/tailwind.css",
     "./css-output": "./dist/tailwind.css"
   },
+  "main": "dist/components/index.cjs",
+  "module": "dist/components/index.mjs",
+  "types": "dist/components/index.d.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/components/index.d.ts"
+      ],
+      "hooks": [
+        "./dist/hooks/index.d.ts"
+      ],
+      "providers": [
+        "./dist/providers/index.d.ts"
+      ],
+      "libs": [
+        "./dist/libs/index.d.ts"
+      ],
+      "tailwind-config": [
+        "./dist/tailwind.config.d.ts"
+      ],
+      "package.json": [
+        "./package.json"
+      ]
+    }
+  },
   "files": [
     "dist"
   ],
@@ -85,13 +110,13 @@
     "tailwind-merge": "^3.3.1",
     "zod": "^3.25.56",
     "zustand": "^4.5.6",
-    "@intlayer/api": "6.1.2",
-    "@intlayer/config": "6.1.2",
-    "@intlayer/core": "6.1.2",
-    "@intlayer/dictionaries-entry": "6.1.2",
-    "@intlayer/editor-react": "6.1.2",
-    "intlayer": "6.1.2",
-    "react-intlayer": "6.1.2"
+    "@intlayer/api": "6.1.4",
+    "@intlayer/config": "6.1.4",
+    "@intlayer/core": "6.1.4",
+    "@intlayer/dictionaries-entry": "6.1.4",
+    "intlayer": "6.1.4",
+    "@intlayer/editor-react": "6.1.4",
+    "react-intlayer": "6.1.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.7",
@@ -130,12 +155,12 @@
     "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.2.4",
-    "@intlayer/backend": "6.1.2",
+    "@intlayer/backend": "6.1.4",
     "@utils/eslint-config": "1.0.4",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "@utils/tsup-config": "1.0.4",
-    "vite-intlayer": "6.1.2"
+    "vite-intlayer": "6.1.4"
   },
   "peerDependencies": {
     "@monaco-editor/react": "^4.7.0",
@@ -149,14 +174,14 @@
     "react-dom": ">=16.0.0",
     "tailwind-merge": "^3.3.1",
     "zustand": "^4.5.6",
-    "@intlayer/api": "6.1.2",
-    "@intlayer/backend": "6.1.2",
-    "@intlayer/config": "6.1.2",
-    "@intlayer/core": "6.1.2",
-    "@intlayer/dictionaries-entry": "6.1.2",
-    "@intlayer/editor-react": "6.1.2",
-    "intlayer": "6.1.2",
-    "react-intlayer": "6.1.2"
+    "@intlayer/api": "6.1.4",
+    "@intlayer/backend": "6.1.4",
+    "@intlayer/editor-react": "6.1.4",
+    "intlayer": "6.1.4",
+    "react-intlayer": "6.1.4",
+    "@intlayer/dictionaries-entry": "6.1.4",
+    "@intlayer/config": "6.1.4",
+    "@intlayer/core": "6.1.4"
   },
   "scripts": {
     "build": "pnpm clean & pnpm build:ci",