@intlayer/design-system 8.4.4 → 8.4.5

package/dist/esm/hooks/useGetElementOrWindow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useGetElementOrWindow.mjs","names":[],"sources":["../../../src/hooks/useGetElementOrWindow.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useGetElementOrWindow = (container?: HTMLElement) => {\n  const [containerElement, setContainerElement] = useState<\n    HTMLElement | undefined\n  >(container);\n\n  // This useEffect avoids the error of not finding the container\n  useEffect(() => {\n    setContainerElement(container ?? window.document.body);\n  }, [container]);\n\n  return containerElement;\n};\n"],"mappings":"6DAIA,MAAa,EAAyB,GAA4B,CAChE,GAAM,CAAC,EAAkB,GAAuB,EAE9C,EAAU,CAOZ,OAJA,MAAgB,CACd,EAAoB,GAAa,OAAO,SAAS,KAAK,EACrD,CAAC,EAAU,CAAC,CAER"}
+{"version":3,"file":"useGetElementOrWindow.mjs","names":[],"sources":["../../../src/hooks/useGetElementOrWindow.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useGetElementOrWindow = (container?: HTMLElement) => {\n  const [containerElement, setContainerElement] = useState<\n    HTMLElement | undefined\n  >(container);\n\n  // This useEffect avoids the error of not finding the container\n  useEffect(() => {\n    setContainerElement(container ?? window.document.body);\n  }, [container]);\n\n  return containerElement;\n};\n"],"mappings":";;;;;AAIA,MAAa,yBAAyB,cAA4B;CAChE,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,UAAU;AAGZ,iBAAgB;AACd,sBAAoB,aAAa,OAAO,SAAS,KAAK;IACrD,CAAC,UAAU,CAAC;AAEf,QAAO"}

package/dist/esm/hooks/useHorizontalSwipe.mjs

@@ -1,2 +1,124 @@
-"use client";import{useEffect as e,useRef as t,useState as n}from"react";const r=r=>{let{enable:i=!0,onSwipeLeft:a,onSwipeRight:o,itemIndex:s,itemCount:c,thresholdPct:l=20,touchAction:u=`pan-y`,disableWhenSelectingText:d=!0}=r,f=t(null),[p,m]=n(!1),[h,g]=n(0),_=t({pointerId:null,startX:0,startY:0,lastX:0,axisLocked:!1,isHorizontal:!1}),v=t(!1),y=()=>{let e=f.current;return e?e.clientWidth:0},b=e=>{let t=s<=0,n=s>=c-1;return t&&e>0||n&&e<0?e/(1+Math.abs(e)/30):e},x=e=>{i&&_.current.pointerId===null&&(_.current.pointerId=e.pointerId,_.current.startX=e.clientX,_.current.startY=e.clientY,_.current.lastX=e.clientX,_.current.axisLocked=!1,_.current.isHorizontal=!1,v.current=!1,m(!1),g(0))},S=e=>{if(!i||_.current.pointerId!==e.pointerId)return;let t=y();if(!t)return;let n=e.clientX-_.current.startX,r=e.clientY-_.current.startY;if(d){let e=typeof window<`u`?window.getSelection?.():null;if(e&&e.rangeCount>0&&!e.isCollapsed){v.current=!0;return}}if(!_.current.axisLocked){let e=Math.abs(n),t=Math.abs(r);(e>6||t>6)&&(_.current.axisLocked=!0,_.current.isHorizontal=e>t)}if(_.current.isHorizontal){try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}e.preventDefault(),p||m(!0),g(b(n/t*100)),_.current.lastX=e.clientX}},C=e=>{try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}let t=_.current.isHorizontal,n=h;if(m(!1),g(0),_.current.pointerId=null,_.current.axisLocked=!1,_.current.isHorizontal=!1,v.current){v.current=!1;return}t&&(n>l?o?.():n<-l&&a?.())};return e(()=>{g(0),m(!1)},[s]),{containerRef:f,isDragging:p,dragDeltaPct:h,containerProps:{ref:f,onPointerDown:x,onPointerMove:S,onPointerUp:e=>{i&&_.current.pointerId===e.pointerId&&C(e)},onPointerCancel:e=>{i&&_.current.pointerId===e.pointerId&&C(e)},style:{touchAction:u}}}};export{r as useHorizontalSwipe};
+'use client';
+
+import { useEffect, useRef, useState } from "react";
+
+//#region src/hooks/useHorizontalSwipe.ts
+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) return pct / (1 + Math.abs(pct) / 30);
+		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);
+	};
+	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;
+			if (!!sel && sel.rangeCount > 0 && !sel.isCollapsed) {
+				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;
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {}
+		e.preventDefault();
+		if (!isDragging) setIsDragging(true);
+		setDragDeltaPct(applyEdgeResistance(dx / width * 100));
+		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]);
+	return {
+		containerRef,
+		isDragging,
+		dragDeltaPct,
+		containerProps: {
+			ref: containerRef,
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel,
+			style: { touchAction }
+		}
+	};
+};
+
+//#endregion
+export { useHorizontalSwipe };
 //# sourceMappingURL=useHorizontalSwipe.mjs.map

package/dist/esm/hooks/useHorizontalSwipe.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHorizontalSwipe.mjs","names":[],"sources":["../../../src/hooks/useHorizontalSwipe.ts"],"sourcesContent":["'use client';\n\nimport {\n  type CSSProperties,\n  type PointerEvent,\n  type PointerEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\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  };\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    // Defer pointer capture until a horizontal gesture is confirmed\n    try {\n      (\n        e.currentTarget as Element & { setPointerCapture: (id: number) => void }\n      ).setPointerCapture(e.pointerId);\n    } catch {}\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"],"mappings":"yEAqCA,MAAa,EACX,GACwB,CACxB,GAAM,CACJ,SAAS,GACT,cACA,eACA,YACA,YACA,eAAe,GACf,cAAc,QACd,2BAA2B,IACzB,EAEE,EAAe,EAA8B,KAAK,CAClD,CAAC,EAAY,GAAiB,EAAS,GAAM,CAC7C,CAAC,EAAc,GAAmB,EAAS,EAAE,CAC7C,EAAkB,EAOrB,CACD,UAAW,KACX,OAAQ,EACR,OAAQ,EACR,MAAO,EACP,WAAY,GACZ,aAAc,GACf,CAAC,CAEI,EAAqB,EAAgB,GAAM,CAE3C,MAA0B,CAC9B,IAAM,EAAO,EAAa,QAC1B,OAAO,EAAO,EAAK,YAAc,GAG7B,EAAuB,GAAgB,CAC3C,IAAM,EAAU,GAAa,EACvB,EAAS,GAAa,EAAY,EAQxC,OANK,GAAW,EAAM,GAAO,GAAU,EAAM,EAGpC,GADY,EADD,KAAK,IAAI,EAAI,CACI,IAI9B,GAGH,EAAsD,GAAM,CAC3D,GACD,EAAgB,QAAQ,YAAc,OAC1C,EAAgB,QAAQ,UAAY,EAAE,UACtC,EAAgB,QAAQ,OAAS,EAAE,QACnC,EAAgB,QAAQ,OAAS,EAAE,QACnC,EAAgB,QAAQ,MAAQ,EAAE,QAClC,EAAgB,QAAQ,WAAa,GACrC,EAAgB,QAAQ,aAAe,GACvC,EAAmB,QAAU,GAC7B,EAAc,GAAM,CACpB,EAAgB,EAAE,GAGd,EAAsD,GAAM,CAEhE,GADI,CAAC,GACD,EAAgB,QAAQ,YAAc,EAAE,UAAW,OAEvD,IAAM,EAAQ,GAAmB,CACjC,GAAI,CAAC,EAAO,OAEZ,IAAM,EAAK,EAAE,QAAU,EAAgB,QAAQ,OACzC,EAAK,EAAE,QAAU,EAAgB,QAAQ,OAG/C,GAAI,EAA0B,CAC5B,IAAM,EACJ,OAAO,OAAW,IAAc,OAAO,gBAAgB,CAAG,KAE5D,GADsB,GAAO,EAAI,WAAa,GAAK,CAAC,EAAI,YACvC,CACf,EAAmB,QAAU,GAC7B,QAIJ,GAAI,CAAC,EAAgB,QAAQ,WAAY,CACvC,IAAM,EAAQ,KAAK,IAAI,EAAG,CACpB,EAAQ,KAAK,IAAI,EAAG,EACtB,EAAQ,GAAK,EAAQ,KACvB,EAAgB,QAAQ,WAAa,GACrC,EAAgB,QAAQ,aAAe,EAAQ,GAI9C,KAAgB,QAAQ,aAK7B,IAAI,CAEA,EAAE,cACF,kBAAkB,EAAE,UAAU,MAC1B,EAER,EAAE,gBAAgB,CAEb,GAAY,EAAc,GAAK,CAGpC,EAAgB,EADH,EAAK,EAAS,IACa,CAAC,CACzC,EAAgB,QAAQ,MAAQ,EAAE,UAG9B,EAAW,GAAoC,CACnD,GAAI,CAEA,EAAE,cAGF,sBAAsB,EAAE,UAAU,MAC9B,EAER,IAAM,EAAgB,EAAgB,QAAQ,aACxC,EAAQ,EAQd,GANA,EAAc,GAAM,CACpB,EAAgB,EAAE,CAClB,EAAgB,QAAQ,UAAY,KACpC,EAAgB,QAAQ,WAAa,GACrC,EAAgB,QAAQ,aAAe,GAEnC,EAAmB,QAAS,CAC9B,EAAmB,QAAU,GAC7B,OAGG,IAED,EAAQ,EACV,KAAgB,CACP,EAAQ,CAAC,GAClB,KAAe,GAuBnB,OAPA,MAAgB,CACd,EAAgB,EAAE,CAClB,EAAc,GAAM,EACnB,CAAC,EAAU,CAAC,CAIR,CACS,eACd,aACA,eACA,eAAgB,CACd,IAAK,EACL,gBACA,gBACA,YA3BsD,GAAM,CACzD,GACD,EAAgB,QAAQ,YAAc,EAAE,WAC5C,EAAQ,EAAE,EAyBR,gBAtB0D,GAAM,CAC7D,GACD,EAAgB,QAAQ,YAAc,EAAE,WAC5C,EAAQ,EAAE,EAoBR,MAZyB,CAAE,cAAa,CAazC,CACF"}
+{"version":3,"file":"useHorizontalSwipe.mjs","names":[],"sources":["../../../src/hooks/useHorizontalSwipe.ts"],"sourcesContent":["'use client';\n\nimport {\n  type CSSProperties,\n  type PointerEvent,\n  type PointerEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\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  };\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    // Defer pointer capture until a horizontal gesture is confirmed\n    try {\n      (\n        e.currentTarget as Element & { setPointerCapture: (id: number) => void }\n      ).setPointerCapture(e.pointerId);\n    } catch {}\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"],"mappings":"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"}

package/dist/esm/hooks/useIntlayerAPI.mjs

@@ -1,2 +1,22 @@
-import{getAuthAPI as e}from"../libs/auth.mjs";import{useAuth as t}from"./useAuth/useAuth.mjs";import{useConfiguration as n}from"@intlayer/editor-react";import{getIntlayerAPI as r}from"@intlayer/api";const i=e=>{let i=n(),{oAuth2AccessToken:a}=t();return r({...a&&{headers:{Authorization:`Bearer ${a.accessToken}`}},...e?.options??{}},e?.intlayerConfiguration??i)},a=t=>{let r=n();return e(t?.intlayerConfiguration??r)};export{a as useIntlayerAuth,i as useIntlayerOAuth};
+import { getAuthAPI } from "../libs/auth.mjs";
+import { useAuth } from "./useAuth/useAuth.mjs";
+import { useConfiguration } from "@intlayer/editor-react";
+import { getIntlayerAPI } from "@intlayer/api";
+
+//#region src/hooks/useIntlayerAPI.ts
+const useIntlayerOAuth = (props) => {
+	const configuration = useConfiguration();
+	const { oAuth2AccessToken } = useAuth();
+	return getIntlayerAPI({
+		...oAuth2AccessToken && { headers: { Authorization: `Bearer ${oAuth2AccessToken.accessToken}` } },
+		...props?.options ?? {}
+	}, props?.intlayerConfiguration ?? configuration);
+};
+const useIntlayerAuth = (props) => {
+	const configuration = useConfiguration();
+	return getAuthAPI(props?.intlayerConfiguration ?? configuration);
+};
+
+//#endregion
+export { useIntlayerAuth, useIntlayerOAuth };
 //# sourceMappingURL=useIntlayerAPI.mjs.map

package/dist/esm/hooks/useIntlayerAPI.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIntlayerAPI.mjs","names":[],"sources":["../../../src/hooks/useIntlayerAPI.ts"],"sourcesContent":["import {\n  type FetcherOptions,\n  getIntlayerAPI,\n  type IntlayerAPI,\n} from '@intlayer/api';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { type AuthAPI, getAuthAPI } from '../libs/auth';\nimport { useAuth } from './useAuth';\n\nexport type UseIntlayerAuthProps = {\n  options?: FetcherOptions;\n  intlayerConfiguration?: IntlayerConfig;\n};\n\nexport const useIntlayerOAuth = (props?: UseIntlayerAuthProps): IntlayerAPI => {\n  const configuration = useConfiguration();\n  const { oAuth2AccessToken } = useAuth();\n\n  return getIntlayerAPI(\n    {\n      ...(oAuth2AccessToken && {\n        headers: {\n          Authorization: `Bearer ${oAuth2AccessToken.accessToken}`,\n        },\n      }),\n      ...(props?.options ?? {}),\n    },\n    props?.intlayerConfiguration ?? configuration\n  );\n};\n\nexport const useIntlayerAuth = (props?: UseIntlayerAuthProps): AuthAPI => {\n  const configuration = useConfiguration();\n\n  return getAuthAPI(props?.intlayerConfiguration ?? configuration);\n};\n"],"mappings":"uMAeA,MAAa,EAAoB,GAA8C,CAC7E,IAAM,EAAgB,GAAkB,CAClC,CAAE,qBAAsB,GAAS,CAEvC,OAAO,EACL,CACE,GAAI,GAAqB,CACvB,QAAS,CACP,cAAe,UAAU,EAAkB,cAC5C,CACF,CACD,GAAI,GAAO,SAAW,EAAE,CACzB,CACD,GAAO,uBAAyB,EACjC,EAGU,EAAmB,GAA0C,CACxE,IAAM,EAAgB,GAAkB,CAExC,OAAO,EAAW,GAAO,uBAAyB,EAAc"}
+{"version":3,"file":"useIntlayerAPI.mjs","names":[],"sources":["../../../src/hooks/useIntlayerAPI.ts"],"sourcesContent":["import {\n  type FetcherOptions,\n  getIntlayerAPI,\n  type IntlayerAPI,\n} from '@intlayer/api';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { type AuthAPI, getAuthAPI } from '../libs/auth';\nimport { useAuth } from './useAuth';\n\nexport type UseIntlayerAuthProps = {\n  options?: FetcherOptions;\n  intlayerConfiguration?: IntlayerConfig;\n};\n\nexport const useIntlayerOAuth = (props?: UseIntlayerAuthProps): IntlayerAPI => {\n  const configuration = useConfiguration();\n  const { oAuth2AccessToken } = useAuth();\n\n  return getIntlayerAPI(\n    {\n      ...(oAuth2AccessToken && {\n        headers: {\n          Authorization: `Bearer ${oAuth2AccessToken.accessToken}`,\n        },\n      }),\n      ...(props?.options ?? {}),\n    },\n    props?.intlayerConfiguration ?? configuration\n  );\n};\n\nexport const useIntlayerAuth = (props?: UseIntlayerAuthProps): AuthAPI => {\n  const configuration = useConfiguration();\n\n  return getAuthAPI(props?.intlayerConfiguration ?? configuration);\n};\n"],"mappings":";;;;;;AAeA,MAAa,oBAAoB,UAA8C;CAC7E,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,EAAE,sBAAsB,SAAS;AAEvC,QAAO,eACL;EACE,GAAI,qBAAqB,EACvB,SAAS,EACP,eAAe,UAAU,kBAAkB,eAC5C,EACF;EACD,GAAI,OAAO,WAAW,EAAE;EACzB,EACD,OAAO,yBAAyB,cACjC;;AAGH,MAAa,mBAAmB,UAA0C;CACxE,MAAM,gBAAgB,kBAAkB;AAExC,QAAO,WAAW,OAAO,yBAAyB,cAAc"}

package/dist/esm/hooks/useIsDarkMode.mjs

@@ -1,2 +1,16 @@
-"use client";import{useEffect as e,useState as t}from"react";const n=()=>{let[n,r]=t(!1);return e(()=>{r(document.querySelector(`html`)?.getAttribute(`data-theme`)===`dark`)},[]),n};export{n as useIsDarkMode};
+'use client';
+
+import { useEffect, useState } from "react";
+
+//#region src/hooks/useIsDarkMode.ts
+const useIsDarkMode = () => {
+	const [isDarkMode, setIsDarkMode] = useState(false);
+	useEffect(() => {
+		setIsDarkMode(document.querySelector("html")?.getAttribute("data-theme") === "dark");
+	}, []);
+	return isDarkMode;
+};
+
+//#endregion
+export { useIsDarkMode };
 //# sourceMappingURL=useIsDarkMode.mjs.map

package/dist/esm/hooks/useIsDarkMode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsDarkMode.mjs","names":[],"sources":["../../../src/hooks/useIsDarkMode.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useIsDarkMode = () => {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n\n  useEffect(() => {\n    const htmlElement = document.querySelector('html');\n    const isDarkMode = htmlElement?.getAttribute('data-theme') === 'dark';\n    setIsDarkMode(isDarkMode);\n  }, []);\n\n  return isDarkMode;\n};\n"],"mappings":"6DAIA,MAAa,MAAsB,CACjC,GAAM,CAAC,EAAY,GAAiB,EAAS,GAAM,CAQnD,OANA,MAAgB,CAGd,EAFoB,SAAS,cAAc,OAAO,EAClB,aAAa,aAAa,GAAK,OACtC,EACxB,EAAE,CAAC,CAEC"}
+{"version":3,"file":"useIsDarkMode.mjs","names":[],"sources":["../../../src/hooks/useIsDarkMode.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useIsDarkMode = () => {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n\n  useEffect(() => {\n    const htmlElement = document.querySelector('html');\n    const isDarkMode = htmlElement?.getAttribute('data-theme') === 'dark';\n    setIsDarkMode(isDarkMode);\n  }, []);\n\n  return isDarkMode;\n};\n"],"mappings":";;;;;AAIA,MAAa,sBAAsB;CACjC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAEnD,iBAAgB;AAGd,gBAFoB,SAAS,cAAc,OAAO,EAClB,aAAa,aAAa,KAAK,OACtC;IACxB,EAAE,CAAC;AAEN,QAAO"}

package/dist/esm/hooks/useIsMounted.mjs

@@ -1,2 +1,16 @@
-"use client";import{useEffect as e,useState as t}from"react";const n=()=>{let[n,r]=t(!1);return e(()=>{r(!0)},[]),n};export{n as useIsMounted};
+'use client';
+
+import { useEffect, useState } from "react";
+
+//#region src/hooks/useIsMounted.ts
+const useIsMounted = () => {
+	const [isMounted, setIsMounted] = useState(false);
+	useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	return isMounted;
+};
+
+//#endregion
+export { useIsMounted };
 //# sourceMappingURL=useIsMounted.mjs.map

package/dist/esm/hooks/useIsMounted.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsMounted.mjs","names":[],"sources":["../../../src/hooks/useIsMounted.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useIsMounted = () => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  return isMounted;\n};\n"],"mappings":"6DAIA,MAAa,MAAqB,CAChC,GAAM,CAAC,EAAW,GAAgB,EAAS,GAAM,CAMjD,OAJA,MAAgB,CACd,EAAa,GAAK,EACjB,EAAE,CAAC,CAEC"}
+{"version":3,"file":"useIsMounted.mjs","names":[],"sources":["../../../src/hooks/useIsMounted.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useIsMounted = () => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  return isMounted;\n};\n"],"mappings":";;;;;AAIA,MAAa,qBAAqB;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,iBAAgB;AACd,eAAa,KAAK;IACjB,EAAE,CAAC;AAEN,QAAO"}

package/dist/esm/hooks/useItemSelector.mjs

@@ -1,2 +1,147 @@
-"use client";import{useEffect as e,useRef as t,useState as n}from"react";const r=e=>e?.getAttribute(`aria-selected`)===`true`,i=(i,{selector:a=r,isHoverable:o=!1,orientation:s=`horizontal`}={selector:r,isHoverable:!1,orientation:`horizontal`})=>{let[c,l]=n(null),[u,d]=n(null),f=t(null),p=t(null),m=i.current.length,h=()=>{let e=null;if(u?(e=u,f.current&&=(clearTimeout(f.current),null)):e=i.current.find(a)??null,!e){l(s===`vertical`?e=>{let t=e,n={top:t?.top??0,height:t?.height??0,opacity:0};return p.current=n,n}:e=>{let t=e,n={left:t?.left??0,width:t?.width??0,opacity:0};return p.current=n,n});return}if(s===`vertical`){let t={top:e.offsetTop,height:e.offsetHeight,opacity:1};l(t),p.current=t}else{let t={left:e.offsetLeft,width:e.offsetWidth,opacity:1};l(t),p.current=t}};return e(()=>{h(),window.addEventListener(`resize`,h),window.addEventListener(`DOMContentLoaded`,h);let e=[];i.current.forEach(t=>{if(t){let n=new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`&&t.attributeName===`aria-selected`){h();break}});n.observe(t,{attributes:!0,attributeFilter:[`aria-selected`]}),e.push(n)}});let t=[],n=e=>{if(!e)return;let n=new ResizeObserver(()=>{h()});n.observe(e),t.push(n)},r=i.current.find(a)??null;r&&n(r),u&&n(u);let s=e=>{f.current&&=(clearTimeout(f.current),null),d(e.currentTarget)},c=()=>{f.current&&clearTimeout(f.current),f.current=setTimeout(()=>{d(null)},150)};return o&&i.current.forEach(e=>{e?.addEventListener(`mouseenter`,s,{passive:!0}),e?.addEventListener(`mouseleave`,c,{passive:!0})}),()=>{f.current&&clearTimeout(f.current),window.removeEventListener(`resize`,h),window.removeEventListener(`DOMContentLoaded`,h),e.forEach(e=>{e.disconnect()}),t.forEach(e=>{e.disconnect()}),i.current.forEach(e=>{e?.removeEventListener(`mouseenter`,s),e?.removeEventListener(`mouseleave`,c)})}},[i,a,u,m,s]),{choiceIndicatorPosition:c,calculatePosition:h,orientation:s}};export{i as useItemSelector};
+'use client';
+
+import { useEffect, useRef, useState } from "react";
+
+//#region src/hooks/useItemSelector.ts
+const selectorDefault = (option) => option?.getAttribute("aria-selected") === "true";
+const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable = false, orientation = "horizontal" } = {
+	selector: selectorDefault,
+	isHoverable: false,
+	orientation: "horizontal"
+}) => {
+	const [choiceIndicatorPosition, setChoiceIndicatorPosition] = useState(null);
+	const [hoveredItem, setHoveredItem] = useState(null);
+	const hideTimeoutRef = useRef(null);
+	const lastPositionRef = useRef(null);
+	const itemsLength = optionsRefs.current.length;
+	const calculatePosition = () => {
+		let targetElement = null;
+		if (hoveredItem) {
+			targetElement = hoveredItem;
+			if (hideTimeoutRef.current) {
+				clearTimeout(hideTimeoutRef.current);
+				hideTimeoutRef.current = null;
+			}
+		} else targetElement = optionsRefs.current.find(selector) ?? null;
+		if (!targetElement) {
+			if (orientation === "vertical") setChoiceIndicatorPosition((prev) => {
+				const verticalPrev = prev;
+				const newPosition = {
+					top: verticalPrev?.top ?? 0,
+					height: verticalPrev?.height ?? 0,
+					opacity: 0
+				};
+				lastPositionRef.current = newPosition;
+				return newPosition;
+			});
+			else setChoiceIndicatorPosition((prev) => {
+				const horizontalPrev = prev;
+				const newPosition = {
+					left: horizontalPrev?.left ?? 0,
+					width: horizontalPrev?.width ?? 0,
+					opacity: 0
+				};
+				lastPositionRef.current = newPosition;
+				return newPosition;
+			});
+			return;
+		}
+		if (orientation === "vertical") {
+			const newPosition = {
+				top: targetElement.offsetTop,
+				height: targetElement.offsetHeight,
+				opacity: 1
+			};
+			setChoiceIndicatorPosition(newPosition);
+			lastPositionRef.current = newPosition;
+		} else {
+			const newPosition = {
+				left: targetElement.offsetLeft,
+				width: targetElement.offsetWidth,
+				opacity: 1
+			};
+			setChoiceIndicatorPosition(newPosition);
+			lastPositionRef.current = newPosition;
+		}
+	};
+	useEffect(() => {
+		calculatePosition();
+		window.addEventListener("resize", calculatePosition);
+		window.addEventListener("DOMContentLoaded", calculatePosition);
+		const mutationObservers = [];
+		optionsRefs.current.forEach((option) => {
+			if (option) {
+				const observer = new MutationObserver((mutations) => {
+					for (const mutation of mutations) if (mutation.type === "attributes" && mutation.attributeName === "aria-selected") {
+						calculatePosition();
+						break;
+					}
+				});
+				observer.observe(option, {
+					attributes: true,
+					attributeFilter: ["aria-selected"]
+				});
+				mutationObservers.push(observer);
+			}
+		});
+		const resizeObservers = [];
+		const observeSize = (element) => {
+			if (!element) return;
+			const resizeObserver = new ResizeObserver(() => {
+				calculatePosition();
+			});
+			resizeObserver.observe(element);
+			resizeObservers.push(resizeObserver);
+		};
+		const selectedItem = optionsRefs.current.find(selector) ?? null;
+		if (selectedItem) observeSize(selectedItem);
+		if (hoveredItem) observeSize(hoveredItem);
+		const handleMouseEnter = (event) => {
+			if (hideTimeoutRef.current) {
+				clearTimeout(hideTimeoutRef.current);
+				hideTimeoutRef.current = null;
+			}
+			setHoveredItem(event.currentTarget);
+		};
+		const handleMouseLeave = () => {
+			if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+			hideTimeoutRef.current = setTimeout(() => {
+				setHoveredItem(null);
+			}, 150);
+		};
+		if (isHoverable) optionsRefs.current.forEach((option) => {
+			option?.addEventListener("mouseenter", handleMouseEnter, { passive: true });
+			option?.addEventListener("mouseleave", handleMouseLeave, { passive: true });
+		});
+		return () => {
+			if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+			window.removeEventListener("resize", calculatePosition);
+			window.removeEventListener("DOMContentLoaded", calculatePosition);
+			mutationObservers.forEach((observer) => {
+				observer.disconnect();
+			});
+			resizeObservers.forEach((observer) => {
+				observer.disconnect();
+			});
+			optionsRefs.current.forEach((option) => {
+				option?.removeEventListener("mouseenter", handleMouseEnter);
+				option?.removeEventListener("mouseleave", handleMouseLeave);
+			});
+		};
+	}, [
+		optionsRefs,
+		selector,
+		hoveredItem,
+		itemsLength,
+		orientation
+	]);
+	return {
+		choiceIndicatorPosition,
+		calculatePosition,
+		orientation
+	};
+};
+
+//#endregion
+export { useItemSelector };
 //# sourceMappingURL=useItemSelector.mjs.map

package/dist/esm/hooks/useItemSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useItemSelector.mjs","names":[],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' | 'vertical';\n\ntype HorizontalStyleState = {\n  left: number;\n  width: number;\n  opacity: number;\n};\n\ntype VerticalStyleState = {\n  top: number;\n  height: number;\n  opacity: number;\n};\n\ntype StyleState = HorizontalStyleState | VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n  selector?: (option: HTMLElement, index: number) => boolean;\n  isHoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n  optionsRefs: RefObject<HTMLElement[]>,\n  {\n    selector = selectorDefault,\n    isHoverable = false,\n    orientation = 'horizontal',\n  }: Options = {\n    selector: selectorDefault,\n    isHoverable: false,\n    orientation: 'horizontal',\n  }\n) => {\n  const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n    useState<StyleState | null>(null);\n\n  const [hoveredItem, setHoveredItem] = useState<HTMLElement | null>(null);\n  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const lastPositionRef = useRef<StyleState | null>(null);\n\n  const itemsLength = optionsRefs.current.length;\n\n  const calculatePosition = () => {\n    let targetElement: HTMLElement | null = null;\n\n    if (hoveredItem) {\n      targetElement = hoveredItem;\n      // Clear any pending hide timeout when hovering over an item\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n    } else {\n      targetElement = optionsRefs.current.find(selector) ?? null;\n    }\n\n    if (!targetElement) {\n      // Keep previous position but set opacity to 0\n      if (orientation === 'vertical') {\n        setChoiceIndicatorPosition((prev) => {\n          const verticalPrev = prev as VerticalStyleState | null;\n          const newPosition: VerticalStyleState = {\n            top: verticalPrev?.top ?? 0,\n            height: verticalPrev?.height ?? 0,\n            opacity: 0,\n          };\n          lastPositionRef.current = newPosition;\n          return newPosition;\n        });\n      } else {\n        setChoiceIndicatorPosition((prev) => {\n          const horizontalPrev = prev as HorizontalStyleState | null;\n          const newPosition: HorizontalStyleState = {\n            left: horizontalPrev?.left ?? 0,\n            width: horizontalPrev?.width ?? 0,\n            opacity: 0,\n          };\n          lastPositionRef.current = newPosition;\n          return newPosition;\n        });\n      }\n      return;\n    }\n\n    if (orientation === 'vertical') {\n      const top = targetElement.offsetTop;\n      const height = targetElement.offsetHeight;\n\n      const newPosition = {\n        top,\n        height,\n        opacity: 1,\n      };\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n    } else {\n      const left = targetElement.offsetLeft;\n      const width = targetElement.offsetWidth;\n\n      const newPosition = {\n        left,\n        width,\n        opacity: 1,\n      };\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n    }\n  };\n\n  useEffect(() => {\n    calculatePosition();\n\n    // Event listeners for window events\n    window.addEventListener('resize', calculatePosition);\n    window.addEventListener('DOMContentLoaded', calculatePosition);\n\n    // MutationObserver to watch for 'aria-selected' changes\n    const mutationObservers: MutationObserver[] = [];\n\n    optionsRefs.current.forEach((option) => {\n      if (option) {\n        const observer = new MutationObserver((mutations) => {\n          for (const mutation of mutations) {\n            if (\n              mutation.type === 'attributes' &&\n              mutation.attributeName === 'aria-selected'\n            ) {\n              calculatePosition();\n              break;\n            }\n          }\n        });\n\n        observer.observe(option, {\n          attributes: true,\n          attributeFilter: ['aria-selected'],\n        });\n\n        mutationObservers.push(observer);\n      }\n    });\n\n    // ResizeObserver to watch for size changes\n    const resizeObservers: ResizeObserver[] = [];\n\n    const observeSize = (element: HTMLElement) => {\n      if (!element) return;\n      const resizeObserver = new ResizeObserver(() => {\n        calculatePosition();\n      });\n      resizeObserver.observe(element);\n      resizeObservers.push(resizeObserver);\n    };\n\n    // Observe the selected item\n    const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n    if (selectedItem) {\n      observeSize(selectedItem);\n    }\n\n    // Observe the hovered item\n    if (hoveredItem) {\n      observeSize(hoveredItem);\n    }\n\n    // Add hover event listeners\n    const handleMouseEnter = (event: Event) => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n      setHoveredItem(event.currentTarget as HTMLElement);\n    };\n\n    const handleMouseLeave = () => {\n      // Clear any existing timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Keep the indicator at its current position for 150ms\n      // before removing the hovered item\n      hideTimeoutRef.current = setTimeout(() => {\n        setHoveredItem(null);\n      }, 150); // 150ms delay before hiding\n    };\n\n    if (isHoverable) {\n      optionsRefs.current.forEach((option) => {\n        option?.addEventListener('mouseenter', handleMouseEnter, {\n          passive: true,\n        });\n        option?.addEventListener('mouseleave', handleMouseLeave, {\n          passive: true,\n        });\n      });\n    }\n\n    return () => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Cleanup window event listeners\n      window.removeEventListener('resize', calculatePosition);\n      window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n      // Disconnect MutationObservers\n      mutationObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Disconnect ResizeObservers\n      resizeObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Remove hover event listeners\n      optionsRefs.current.forEach((option) => {\n        option?.removeEventListener('mouseenter', handleMouseEnter);\n        option?.removeEventListener('mouseleave', handleMouseLeave);\n      });\n    };\n  }, [optionsRefs, selector, hoveredItem, itemsLength, orientation]);\n\n  return { choiceIndicatorPosition, calculatePosition, orientation };\n};\n"],"mappings":"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"}
+{"version":3,"file":"useItemSelector.mjs","names":[],"sources":["../../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport type ItemSelectorOrientation = 'horizontal' | 'vertical';\n\ntype HorizontalStyleState = {\n  left: number;\n  width: number;\n  opacity: number;\n};\n\ntype VerticalStyleState = {\n  top: number;\n  height: number;\n  opacity: number;\n};\n\ntype StyleState = HorizontalStyleState | VerticalStyleState;\n\nconst selectorDefault = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\ntype Options = {\n  selector?: (option: HTMLElement, index: number) => boolean;\n  isHoverable?: boolean;\n  orientation?: ItemSelectorOrientation;\n};\n\nexport const useItemSelector = (\n  optionsRefs: RefObject<HTMLElement[]>,\n  {\n    selector = selectorDefault,\n    isHoverable = false,\n    orientation = 'horizontal',\n  }: Options = {\n    selector: selectorDefault,\n    isHoverable: false,\n    orientation: 'horizontal',\n  }\n) => {\n  const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n    useState<StyleState | null>(null);\n\n  const [hoveredItem, setHoveredItem] = useState<HTMLElement | null>(null);\n  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const lastPositionRef = useRef<StyleState | null>(null);\n\n  const itemsLength = optionsRefs.current.length;\n\n  const calculatePosition = () => {\n    let targetElement: HTMLElement | null = null;\n\n    if (hoveredItem) {\n      targetElement = hoveredItem;\n      // Clear any pending hide timeout when hovering over an item\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n    } else {\n      targetElement = optionsRefs.current.find(selector) ?? null;\n    }\n\n    if (!targetElement) {\n      // Keep previous position but set opacity to 0\n      if (orientation === 'vertical') {\n        setChoiceIndicatorPosition((prev) => {\n          const verticalPrev = prev as VerticalStyleState | null;\n          const newPosition: VerticalStyleState = {\n            top: verticalPrev?.top ?? 0,\n            height: verticalPrev?.height ?? 0,\n            opacity: 0,\n          };\n          lastPositionRef.current = newPosition;\n          return newPosition;\n        });\n      } else {\n        setChoiceIndicatorPosition((prev) => {\n          const horizontalPrev = prev as HorizontalStyleState | null;\n          const newPosition: HorizontalStyleState = {\n            left: horizontalPrev?.left ?? 0,\n            width: horizontalPrev?.width ?? 0,\n            opacity: 0,\n          };\n          lastPositionRef.current = newPosition;\n          return newPosition;\n        });\n      }\n      return;\n    }\n\n    if (orientation === 'vertical') {\n      const top = targetElement.offsetTop;\n      const height = targetElement.offsetHeight;\n\n      const newPosition = {\n        top,\n        height,\n        opacity: 1,\n      };\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n    } else {\n      const left = targetElement.offsetLeft;\n      const width = targetElement.offsetWidth;\n\n      const newPosition = {\n        left,\n        width,\n        opacity: 1,\n      };\n      setChoiceIndicatorPosition(newPosition);\n      lastPositionRef.current = newPosition;\n    }\n  };\n\n  useEffect(() => {\n    calculatePosition();\n\n    // Event listeners for window events\n    window.addEventListener('resize', calculatePosition);\n    window.addEventListener('DOMContentLoaded', calculatePosition);\n\n    // MutationObserver to watch for 'aria-selected' changes\n    const mutationObservers: MutationObserver[] = [];\n\n    optionsRefs.current.forEach((option) => {\n      if (option) {\n        const observer = new MutationObserver((mutations) => {\n          for (const mutation of mutations) {\n            if (\n              mutation.type === 'attributes' &&\n              mutation.attributeName === 'aria-selected'\n            ) {\n              calculatePosition();\n              break;\n            }\n          }\n        });\n\n        observer.observe(option, {\n          attributes: true,\n          attributeFilter: ['aria-selected'],\n        });\n\n        mutationObservers.push(observer);\n      }\n    });\n\n    // ResizeObserver to watch for size changes\n    const resizeObservers: ResizeObserver[] = [];\n\n    const observeSize = (element: HTMLElement) => {\n      if (!element) return;\n      const resizeObserver = new ResizeObserver(() => {\n        calculatePosition();\n      });\n      resizeObserver.observe(element);\n      resizeObservers.push(resizeObserver);\n    };\n\n    // Observe the selected item\n    const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n    if (selectedItem) {\n      observeSize(selectedItem);\n    }\n\n    // Observe the hovered item\n    if (hoveredItem) {\n      observeSize(hoveredItem);\n    }\n\n    // Add hover event listeners\n    const handleMouseEnter = (event: Event) => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n      setHoveredItem(event.currentTarget as HTMLElement);\n    };\n\n    const handleMouseLeave = () => {\n      // Clear any existing timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Keep the indicator at its current position for 150ms\n      // before removing the hovered item\n      hideTimeoutRef.current = setTimeout(() => {\n        setHoveredItem(null);\n      }, 150); // 150ms delay before hiding\n    };\n\n    if (isHoverable) {\n      optionsRefs.current.forEach((option) => {\n        option?.addEventListener('mouseenter', handleMouseEnter, {\n          passive: true,\n        });\n        option?.addEventListener('mouseleave', handleMouseLeave, {\n          passive: true,\n        });\n      });\n    }\n\n    return () => {\n      // Clear any pending hide timeout\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n      }\n\n      // Cleanup window event listeners\n      window.removeEventListener('resize', calculatePosition);\n      window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n      // Disconnect MutationObservers\n      mutationObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Disconnect ResizeObservers\n      resizeObservers.forEach((observer) => {\n        observer.disconnect();\n      });\n\n      // Remove hover event listeners\n      optionsRefs.current.forEach((option) => {\n        option?.removeEventListener('mouseenter', handleMouseEnter);\n        option?.removeEventListener('mouseleave', handleMouseLeave);\n      });\n    };\n  }, [optionsRefs, selector, hoveredItem, itemsLength, orientation]);\n\n  return { choiceIndicatorPosition, calculatePosition, orientation };\n};\n"],"mappings":"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"}

package/dist/esm/hooks/useKeyboardDetector.mjs

@@ -1,2 +1,27 @@
-"use client";import{useEffect as e,useState as t}from"react";const n=()=>{let[n,r]=t(null);return e(()=>{let e=()=>{window.visualViewport?.height&&window.visualViewport.height<window.innerHeight-100&&window.visualViewport?r(window.visualViewport.height):r(null)};return window.visualViewport?.addEventListener(`resize`,e,{passive:!0}),e(),()=>{window.visualViewport?.removeEventListener(`resize`,e)}},[]),{windowHeight:n,isKeyboardOpen:n!==null}};export{n as useKeyboardDetector};
+'use client';
+
+import { useEffect, useState } from "react";
+
+//#region src/hooks/useKeyboardDetector.ts
+const useKeyboardDetector = () => {
+	const [windowHeight, setWindowHeight] = useState(null);
+	useEffect(() => {
+		const updateHeight = () => {
+			if (Boolean(window.visualViewport?.height && window.visualViewport.height < window.innerHeight - 100) && window.visualViewport) setWindowHeight(window.visualViewport.height);
+			else setWindowHeight(null);
+		};
+		window.visualViewport?.addEventListener("resize", updateHeight, { passive: true });
+		updateHeight();
+		return () => {
+			window.visualViewport?.removeEventListener("resize", updateHeight);
+		};
+	}, []);
+	return {
+		windowHeight,
+		isKeyboardOpen: windowHeight !== null
+	};
+};
+
+//#endregion
+export { useKeyboardDetector };
 //# sourceMappingURL=useKeyboardDetector.mjs.map

package/dist/esm/hooks/useKeyboardDetector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardDetector.mjs","names":[],"sources":["../../../src/hooks/useKeyboardDetector.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useKeyboardDetector = () => {\n  const [windowHeight, setWindowHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    const updateHeight = () => {\n      const isKeyboardOpen = Boolean(\n        window.visualViewport?.height &&\n          window.visualViewport.height < window.innerHeight - 100\n      );\n\n      if (isKeyboardOpen && window.visualViewport) {\n        setWindowHeight(window.visualViewport.height);\n      } else {\n        setWindowHeight(null);\n      }\n    };\n\n    // Listen for changes in visualViewport height\n    window.visualViewport?.addEventListener('resize', updateHeight, {\n      passive: true,\n    });\n    updateHeight(); // Set initial height\n\n    return () => {\n      window.visualViewport?.removeEventListener('resize', updateHeight);\n    };\n  }, []);\n\n  return { windowHeight, isKeyboardOpen: windowHeight !== null };\n};\n"],"mappings":"6DAIA,MAAa,MAA4B,CACvC,GAAM,CAAC,EAAc,GAAmB,EAAwB,KAAK,CA2BrE,OAzBA,MAAgB,CACd,IAAM,MAAqB,CAEvB,OAAO,gBAAgB,QACrB,OAAO,eAAe,OAAS,OAAO,YAAc,KAGlC,OAAO,eAC3B,EAAgB,OAAO,eAAe,OAAO,CAE7C,EAAgB,KAAK,EAUzB,OALA,OAAO,gBAAgB,iBAAiB,SAAU,EAAc,CAC9D,QAAS,GACV,CAAC,CACF,GAAc,KAED,CACX,OAAO,gBAAgB,oBAAoB,SAAU,EAAa,GAEnE,EAAE,CAAC,CAEC,CAAE,eAAc,eAAgB,IAAiB,KAAM"}
+{"version":3,"file":"useKeyboardDetector.mjs","names":[],"sources":["../../../src/hooks/useKeyboardDetector.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useKeyboardDetector = () => {\n  const [windowHeight, setWindowHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    const updateHeight = () => {\n      const isKeyboardOpen = Boolean(\n        window.visualViewport?.height &&\n          window.visualViewport.height < window.innerHeight - 100\n      );\n\n      if (isKeyboardOpen && window.visualViewport) {\n        setWindowHeight(window.visualViewport.height);\n      } else {\n        setWindowHeight(null);\n      }\n    };\n\n    // Listen for changes in visualViewport height\n    window.visualViewport?.addEventListener('resize', updateHeight, {\n      passive: true,\n    });\n    updateHeight(); // Set initial height\n\n    return () => {\n      window.visualViewport?.removeEventListener('resize', updateHeight);\n    };\n  }, []);\n\n  return { windowHeight, isKeyboardOpen: windowHeight !== null };\n};\n"],"mappings":";;;;;AAIA,MAAa,4BAA4B;CACvC,MAAM,CAAC,cAAc,mBAAmB,SAAwB,KAAK;AAErE,iBAAgB;EACd,MAAM,qBAAqB;AAMzB,OALuB,QACrB,OAAO,gBAAgB,UACrB,OAAO,eAAe,SAAS,OAAO,cAAc,IACvD,IAEqB,OAAO,eAC3B,iBAAgB,OAAO,eAAe,OAAO;OAE7C,iBAAgB,KAAK;;AAKzB,SAAO,gBAAgB,iBAAiB,UAAU,cAAc,EAC9D,SAAS,MACV,CAAC;AACF,gBAAc;AAEd,eAAa;AACX,UAAO,gBAAgB,oBAAoB,UAAU,aAAa;;IAEnE,EAAE,CAAC;AAEN,QAAO;EAAE;EAAc,gBAAgB,iBAAiB;EAAM"}

package/dist/esm/hooks/usePersistedStore.mjs

@@ -1,2 +1,66 @@
-"use client";import{useCallback as e,useEffect as t,useMemo as n,useState as r}from"react";const i=(i,a)=>{let[o,s]=r(()=>{if(a!==void 0){let e=typeof a==`function`?a():a;if(typeof window>`u`)return e;let t=localStorage?.getItem(i);if(t)try{return JSON.parse(t)}catch(e){console.error(e)}return e}});t(()=>{let e=localStorage?.getItem(i);if(e&&e!==`undefined`&&o===void 0)try{s(JSON.parse(e))}catch(e){console.error(e)}else a!==void 0&&o===void 0&&s(a)},[i,o]);let c=e(e=>{s(t=>{let n=typeof e==`function`?e(t):e;return n===void 0?t:(localStorage?.setItem(i,JSON.stringify(n)),n)})},[i,s]),l=e(()=>{let e=localStorage?.getItem(i);e&&s(JSON.parse(e))},[i,s]),u=e(()=>{localStorage?.removeItem(i),s(void 0)},[i]);return n(()=>[o,c,l,u],[o,c,l,u])};export{i as usePersistedStore};
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+//#region src/hooks/usePersistedStore.ts
+const usePersistedStore = (key, initialState) => {
+	const [state, setState] = useState(() => {
+		if (initialState !== void 0) {
+			const result = typeof initialState === "function" ? initialState() : initialState;
+			if (typeof window === "undefined") return result;
+			const persistedState = localStorage?.getItem(key);
+			if (persistedState) try {
+				return JSON.parse(persistedState);
+			} catch (e) {
+				console.error(e);
+			}
+			return result;
+		}
+	});
+	useEffect(() => {
+		const persistedState = localStorage?.getItem(key);
+		if (persistedState && persistedState !== "undefined" && state === void 0) try {
+			setState(JSON.parse(persistedState));
+		} catch (e) {
+			console.error(e);
+		}
+		else if (initialState !== void 0 && state === void 0) setState(initialState);
+	}, [key, state]);
+	/**
+	* Allows setting state either directly or via a functional update.
+	* If passed a function, we merge/update based on the previous state.
+	*/
+	const setStateWrapper = useCallback((valueOrUpdater) => {
+		setState((prev) => {
+			const newValue = typeof valueOrUpdater === "function" ? valueOrUpdater(prev) : valueOrUpdater;
+			if (typeof newValue !== "undefined") {
+				localStorage?.setItem(key, JSON.stringify(newValue));
+				return newValue;
+			}
+			return prev;
+		});
+	}, [key, setState]);
+	const loadState = useCallback(() => {
+		const savedState = localStorage?.getItem(key);
+		if (savedState) setState(JSON.parse(savedState));
+	}, [key, setState]);
+	const clearState = useCallback(() => {
+		localStorage?.removeItem(key);
+		setState(void 0);
+	}, [key]);
+	return useMemo(() => [
+		state,
+		setStateWrapper,
+		loadState,
+		clearState
+	], [
+		state,
+		setStateWrapper,
+		loadState,
+		clearState
+	]);
+};
+
+//#endregion
+export { usePersistedStore };
 //# sourceMappingURL=usePersistedStore.mjs.map

package/dist/esm/hooks/usePersistedStore.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePersistedStore.mjs","names":[],"sources":["../../../src/hooks/usePersistedStore.ts"],"sourcesContent":["'use client';\n\nimport {\n  type Dispatch,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nexport const usePersistedStore = <S>(\n  key: string,\n  initialState?: S | (() => S)\n): [S, Dispatch<SetStateAction<S>>, () => void, () => void] => {\n  const [state, setState] = useState<S>(() => {\n    // If you have an initial value on the client, send a message out immediately\n    if (initialState !== undefined) {\n      const result: S =\n        typeof initialState === 'function'\n          ? (initialState as () => S)()\n          : initialState;\n\n      if (typeof window === 'undefined') return result;\n\n      const persistedState = localStorage?.getItem(key);\n\n      if (persistedState) {\n        try {\n          return JSON.parse(persistedState);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n\n      return result;\n    }\n\n    return undefined as S;\n  });\n\n  useEffect(() => {\n    const persistedState = localStorage?.getItem(key);\n\n    if (\n      persistedState &&\n      persistedState !== 'undefined' &&\n      state === undefined\n    ) {\n      try {\n        setState(JSON.parse(persistedState));\n      } catch (e) {\n        console.error(e);\n      }\n    } else if (initialState !== undefined && state === undefined) {\n      setState(initialState);\n    }\n  }, [key, state]);\n\n  /**\n   * Allows setting state either directly or via a functional update.\n   * If passed a function, we merge/update based on the previous state.\n   */\n  const setStateWrapper: typeof setState = useCallback(\n    (valueOrUpdater: SetStateAction<S>) => {\n      setState((prev) => {\n        const newValue: S =\n          typeof valueOrUpdater === 'function'\n            ? (valueOrUpdater as (prevVal: S) => S)(prev)\n            : valueOrUpdater;\n\n        if (typeof newValue !== 'undefined') {\n          localStorage?.setItem(key, JSON.stringify(newValue));\n          return newValue;\n        }\n\n        return prev;\n      });\n    },\n    [key, setState]\n  );\n\n  const loadState = useCallback(() => {\n    const savedState = localStorage?.getItem(key);\n    if (savedState) {\n      setState(JSON.parse(savedState));\n    }\n  }, [key, setState]);\n\n  const clearState = useCallback(() => {\n    localStorage?.removeItem(key);\n    setState(undefined as S);\n  }, [key]);\n\n  return useMemo(\n    () => [state, setStateWrapper, loadState, clearState],\n    [state, setStateWrapper, loadState, clearState]\n  );\n};\n"],"mappings":"2FAWA,MAAa,GACX,EACA,IAC6D,CAC7D,GAAM,CAAC,EAAO,GAAY,MAAkB,CAE1C,GAAI,IAAiB,IAAA,GAAW,CAC9B,IAAM,EACJ,OAAO,GAAiB,WACnB,GAA0B,CAC3B,EAEN,GAAI,OAAO,OAAW,IAAa,OAAO,EAE1C,IAAM,EAAiB,cAAc,QAAQ,EAAI,CAEjD,GAAI,EACF,GAAI,CACF,OAAO,KAAK,MAAM,EAAe,OAC1B,EAAG,CACV,QAAQ,MAAM,EAAE,CAIpB,OAAO,IAIT,CAEF,MAAgB,CACd,IAAM,EAAiB,cAAc,QAAQ,EAAI,CAEjD,GACE,GACA,IAAmB,aACnB,IAAU,IAAA,GAEV,GAAI,CACF,EAAS,KAAK,MAAM,EAAe,CAAC,OAC7B,EAAG,CACV,QAAQ,MAAM,EAAE,MAET,IAAiB,IAAA,IAAa,IAAU,IAAA,IACjD,EAAS,EAAa,EAEvB,CAAC,EAAK,EAAM,CAAC,CAMhB,IAAM,EAAmC,EACtC,GAAsC,CACrC,EAAU,GAAS,CACjB,IAAM,EACJ,OAAO,GAAmB,WACrB,EAAqC,EAAK,CAC3C,EAON,OALW,IAAa,OAKjB,GAJL,cAAc,QAAQ,EAAK,KAAK,UAAU,EAAS,CAAC,CAC7C,IAIT,EAEJ,CAAC,EAAK,EAAS,CAChB,CAEK,EAAY,MAAkB,CAClC,IAAM,EAAa,cAAc,QAAQ,EAAI,CACzC,GACF,EAAS,KAAK,MAAM,EAAW,CAAC,EAEjC,CAAC,EAAK,EAAS,CAAC,CAEb,EAAa,MAAkB,CACnC,cAAc,WAAW,EAAI,CAC7B,EAAS,IAAA,GAAe,EACvB,CAAC,EAAI,CAAC,CAET,OAAO,MACC,CAAC,EAAO,EAAiB,EAAW,EAAW,CACrD,CAAC,EAAO,EAAiB,EAAW,EAAW,CAChD"}
+{"version":3,"file":"usePersistedStore.mjs","names":[],"sources":["../../../src/hooks/usePersistedStore.ts"],"sourcesContent":["'use client';\n\nimport {\n  type Dispatch,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nexport const usePersistedStore = <S>(\n  key: string,\n  initialState?: S | (() => S)\n): [S, Dispatch<SetStateAction<S>>, () => void, () => void] => {\n  const [state, setState] = useState<S>(() => {\n    // If you have an initial value on the client, send a message out immediately\n    if (initialState !== undefined) {\n      const result: S =\n        typeof initialState === 'function'\n          ? (initialState as () => S)()\n          : initialState;\n\n      if (typeof window === 'undefined') return result;\n\n      const persistedState = localStorage?.getItem(key);\n\n      if (persistedState) {\n        try {\n          return JSON.parse(persistedState);\n        } catch (e) {\n          console.error(e);\n        }\n      }\n\n      return result;\n    }\n\n    return undefined as S;\n  });\n\n  useEffect(() => {\n    const persistedState = localStorage?.getItem(key);\n\n    if (\n      persistedState &&\n      persistedState !== 'undefined' &&\n      state === undefined\n    ) {\n      try {\n        setState(JSON.parse(persistedState));\n      } catch (e) {\n        console.error(e);\n      }\n    } else if (initialState !== undefined && state === undefined) {\n      setState(initialState);\n    }\n  }, [key, state]);\n\n  /**\n   * Allows setting state either directly or via a functional update.\n   * If passed a function, we merge/update based on the previous state.\n   */\n  const setStateWrapper: typeof setState = useCallback(\n    (valueOrUpdater: SetStateAction<S>) => {\n      setState((prev) => {\n        const newValue: S =\n          typeof valueOrUpdater === 'function'\n            ? (valueOrUpdater as (prevVal: S) => S)(prev)\n            : valueOrUpdater;\n\n        if (typeof newValue !== 'undefined') {\n          localStorage?.setItem(key, JSON.stringify(newValue));\n          return newValue;\n        }\n\n        return prev;\n      });\n    },\n    [key, setState]\n  );\n\n  const loadState = useCallback(() => {\n    const savedState = localStorage?.getItem(key);\n    if (savedState) {\n      setState(JSON.parse(savedState));\n    }\n  }, [key, setState]);\n\n  const clearState = useCallback(() => {\n    localStorage?.removeItem(key);\n    setState(undefined as S);\n  }, [key]);\n\n  return useMemo(\n    () => [state, setStateWrapper, loadState, clearState],\n    [state, setStateWrapper, loadState, clearState]\n  );\n};\n"],"mappings":";;;;;AAWA,MAAa,qBACX,KACA,iBAC6D;CAC7D,MAAM,CAAC,OAAO,YAAY,eAAkB;AAE1C,MAAI,iBAAiB,QAAW;GAC9B,MAAM,SACJ,OAAO,iBAAiB,aACnB,cAA0B,GAC3B;AAEN,OAAI,OAAO,WAAW,YAAa,QAAO;GAE1C,MAAM,iBAAiB,cAAc,QAAQ,IAAI;AAEjD,OAAI,eACF,KAAI;AACF,WAAO,KAAK,MAAM,eAAe;YAC1B,GAAG;AACV,YAAQ,MAAM,EAAE;;AAIpB,UAAO;;GAIT;AAEF,iBAAgB;EACd,MAAM,iBAAiB,cAAc,QAAQ,IAAI;AAEjD,MACE,kBACA,mBAAmB,eACnB,UAAU,OAEV,KAAI;AACF,YAAS,KAAK,MAAM,eAAe,CAAC;WAC7B,GAAG;AACV,WAAQ,MAAM,EAAE;;WAET,iBAAiB,UAAa,UAAU,OACjD,UAAS,aAAa;IAEvB,CAAC,KAAK,MAAM,CAAC;;;;;CAMhB,MAAM,kBAAmC,aACtC,mBAAsC;AACrC,YAAU,SAAS;GACjB,MAAM,WACJ,OAAO,mBAAmB,aACrB,eAAqC,KAAK,GAC3C;AAEN,OAAI,OAAO,aAAa,aAAa;AACnC,kBAAc,QAAQ,KAAK,KAAK,UAAU,SAAS,CAAC;AACpD,WAAO;;AAGT,UAAO;IACP;IAEJ,CAAC,KAAK,SAAS,CAChB;CAED,MAAM,YAAY,kBAAkB;EAClC,MAAM,aAAa,cAAc,QAAQ,IAAI;AAC7C,MAAI,WACF,UAAS,KAAK,MAAM,WAAW,CAAC;IAEjC,CAAC,KAAK,SAAS,CAAC;CAEnB,MAAM,aAAa,kBAAkB;AACnC,gBAAc,WAAW,IAAI;AAC7B,WAAS,OAAe;IACvB,CAAC,IAAI,CAAC;AAET,QAAO,cACC;EAAC;EAAO;EAAiB;EAAW;EAAW,EACrD;EAAC;EAAO;EAAiB;EAAW;EAAW,CAChD"}