@siberiacancode/reactuse 0.3.1 → 0.3.2

package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaControls.cjs","sources":["../../../../src/hooks/useMediaControls/useMediaControls.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const timeRangeToArray = (timeRanges: TimeRanges) => {\n  let ranges: [number, number][] = [];\n\n  for (let i = 0; i < timeRanges.length; ++i)\n    ranges = [...ranges, [timeRanges.start(i), timeRanges.end(i)]];\n\n  return ranges;\n};\n\n/** The media source configuration type */\nexport interface UseMediaSource {\n  /** The media attribute of the media */\n  media?: string;\n  /** The source URL of the media */\n  src: string;\n  /** The MIME type of the media */\n  type?: string;\n}\n\n/** The media controls return type */\nexport interface UseMediaControlsReturn {\n  /** Whether the media is currently buffering */\n  buffered: [number, number][];\n  /** The current playback position in seconds */\n  currentTime: number;\n  /** The total duration of the media in seconds */\n  duration: number;\n  /** Whether the media has ended */\n  ended: boolean;\n  /** Whether the media is currently muted */\n  muted: boolean;\n  /** The current playback rate (1.0 is normal speed) */\n  playbackRate: number;\n  /** Whether the media is currently playing */\n  playing: boolean;\n  /** Whether the media is currently seeking */\n  seeking: boolean;\n  /** Whether the media is currently stalled */\n  stalled: boolean;\n  /** The current volume level (0.0 to 1.0) */\n  volume: number;\n  /** Whether the media is currently waiting */\n  waiting: boolean;\n\n  /** Set the playback rate */\n  changePlaybackRate: (rate: number) => void;\n  /** Set the volume level (0.0 to 1.0) */\n  changeVolume: (volume: number) => void;\n  /** Set the muted state */\n  mute: () => void;\n  /** Pause the media */\n  pause: () => void;\n  /** Start playing the media */\n  play: () => Promise<void>;\n  /** Seek to a specific time in seconds */\n  seek: (time: number) => void;\n  /** Toggle between play and pause */\n  toggle: () => Promise<void>;\n  /** Set the unmuted state */\n  unmute: () => void;\n}\n\nexport interface UseMediaControls {\n  (target: HookTarget, src: string): UseMediaControlsReturn;\n\n  (target: HookTarget, options: UseMediaSource): UseMediaControlsReturn;\n\n  <Target extends HTMLMediaElement>(\n    src: string\n  ): UseMediaControlsReturn & {\n    ref: StateRef<Target>;\n  };\n\n  <Target extends HTMLMediaElement>(\n    options: UseMediaSource\n  ): UseMediaControlsReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useMediaControls\n * @description Hook that provides controls for HTML media elements (audio/video)\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target media element\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n *\n * @example\n * const { playing, play, pause } = useMediaControls(videoRef, 'video.mp4');\n *\n * @overload\n * @param {HookTarget} target The target media element\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n *\n * @example\n * const { playing, play, pause } = useMediaControls(audioRef, { src: 'audio.mp3', type: 'audio/mp3' });\n *\n * @overload\n * @template Target The target media element type\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n *\n * @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>('video.mp4');\n *\n * @overload\n * @template Target The target media element type\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n *\n * @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>({ src: 'video.mp4', type: 'video/mp4' });\n */\nexport const useMediaControls = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { src: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { src: params[0] }\n  ) as UseMediaSource;\n\n  const internalRef = useRefState<HTMLMediaElement>();\n  const elementRef = useRef<HTMLMediaElement | null>(null);\n\n  const [playing, setPlaying] = useState(false);\n  const [duration, setDuration] = useState(0);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [seeking, setSeeking] = useState(false);\n  const [waiting, setWaiting] = useState(false);\n  const [buffered, setBuffered] = useState<[number, number][]>([]);\n  const [stalled, setStalled] = useState(false);\n  const [ended, setEnded] = useState(false);\n  const [playbackRate, setPlaybackRateState] = useState(1);\n\n  const [muted, setMutedState] = useState(false);\n  const [volume, setVolumeState] = useState(1);\n\n  useEffect(() => {\n    const element = (target ? getElement(target) : internalRef.current) as HTMLMediaElement;\n\n    if (!element) return;\n\n    elementRef.current = element;\n    element.src = options.src;\n\n    if (options.type) element.setAttribute('type', options.type);\n    if (options.media) element.setAttribute('media', options.media);\n\n    setDuration(element.duration);\n    setCurrentTime(element.currentTime);\n    setPlaying(false);\n    setEnded(element.ended);\n    setMutedState(element.muted);\n    setVolumeState(element.volume);\n    setPlaybackRateState(element.playbackRate);\n\n    const onPlaying = () => {\n      setPlaying(true);\n      setStalled(false);\n    };\n    const onPause = () => setPlaying(false);\n    const onWaiting = () => setWaiting(true);\n    const onStalled = () => setStalled(true);\n    const onSeeking = () => setSeeking(true);\n    const onSeeked = () => setSeeking(false);\n    const onEnded = () => {\n      setPlaying(false);\n      setEnded(true);\n    };\n    const onDurationChange = () => setDuration(element.duration);\n    const onTimeUpdate = () => setCurrentTime(element.currentTime);\n    const onVolumechange = () => {\n      setMutedState(element.muted);\n      setVolumeState(element.volume);\n    };\n    const onRatechange = () => setPlaybackRateState(element.playbackRate);\n    const onProgress = () => setBuffered(timeRangeToArray(element.buffered));\n\n    element.addEventListener('playing', onPlaying);\n    element.addEventListener('pause', onPause);\n    element.addEventListener('waiting', onWaiting);\n    element.addEventListener('progress', onProgress);\n    element.addEventListener('stalled', onStalled);\n    element.addEventListener('seeking', onSeeking);\n    element.addEventListener('seeked', onSeeked);\n    element.addEventListener('ended', onEnded);\n    element.addEventListener('loadedmetadata', onDurationChange);\n    element.addEventListener('timeupdate', onTimeUpdate);\n    element.addEventListener('volumechange', onVolumechange);\n    element.addEventListener('ratechange', onRatechange);\n\n    return () => {\n      element.removeEventListener('playing', onPlaying);\n      element.removeEventListener('pause', onPause);\n      element.removeEventListener('waiting', onWaiting);\n      element.removeEventListener('progress', onProgress);\n      element.removeEventListener('stalled', onStalled);\n      element.removeEventListener('seeking', onSeeking);\n      element.removeEventListener('seeked', onSeeked);\n      element.removeEventListener('ended', onEnded);\n      element.removeEventListener('loadedmetadata', onDurationChange);\n      element.removeEventListener('timeupdate', onTimeUpdate);\n      element.removeEventListener('volumechange', onVolumechange);\n      element.removeEventListener('ratechange', onRatechange);\n    };\n  }, [target, internalRef.state]);\n\n  const play = async () => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    await element.play();\n  };\n\n  const pause = () => {\n    if (!elementRef.current) return;\n    elementRef.current.pause();\n  };\n\n  const toggle = async () => {\n    if (playing) return pause();\n    return play();\n  };\n\n  const seek = (time: number) => {\n    if (!elementRef.current) return;\n    elementRef.current.currentTime = Math.min(Math.max(time, 0), duration);\n  };\n\n  const changeVolume = (value: number) => {\n    if (!elementRef.current) return;\n    elementRef.current.volume = Math.min(Math.max(value, 0), 1);\n  };\n\n  const mute = () => {\n    if (!elementRef.current) return;\n    elementRef.current.muted = true;\n  };\n\n  const unmute = () => {\n    if (!elementRef.current) return;\n    elementRef.current.muted = false;\n  };\n\n  const changePlaybackRate = (value: number) => {\n    if (!elementRef.current) return;\n    elementRef.current.playbackRate = value;\n  };\n\n  return {\n    playing,\n    duration,\n    currentTime,\n    seeking,\n    waiting,\n    buffered,\n    stalled,\n    ended,\n    playbackRate,\n    muted,\n    volume,\n\n    play,\n    pause,\n    toggle,\n    seek,\n    changeVolume,\n    mute,\n    unmute,\n    changePlaybackRate,\n\n    ...(!target && { ref: internalRef })\n  };\n}) as UseMediaControls;\n"],"names":["timeRangeToArray","timeRanges","ranges","i","useMediaControls","params","target","isTarget","options","internalRef","useRefState","elementRef","useRef","playing","setPlaying","useState","duration","setDuration","currentTime","setCurrentTime","seeking","setSeeking","waiting","setWaiting","buffered","setBuffered","stalled","setStalled","ended","setEnded","playbackRate","setPlaybackRateState","muted","setMutedState","volume","setVolumeState","useEffect","element","getElement","onPlaying","onPause","onWaiting","onStalled","onSeeking","onSeeked","onEnded","onDurationChange","onTimeUpdate","onVolumechange","onRatechange","onProgress","play","pause","time","value"],"mappings":"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"}
+{"version":3,"file":"useMediaControls.cjs","sources":["../../../../src/hooks/useMediaControls/useMediaControls.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const timeRangeToArray = (timeRanges: TimeRanges) => {\n  let ranges: [number, number][] = [];\n\n  for (let i = 0; i < timeRanges.length; ++i)\n    ranges = [...ranges, [timeRanges.start(i), timeRanges.end(i)]];\n\n  return ranges;\n};\n\n/** The media source configuration type */\nexport interface UseMediaSource {\n  /** The media attribute of the media */\n  media?: string;\n  /** The source URL of the media */\n  src: string;\n  /** The MIME type of the media */\n  type?: string;\n}\n\n/** The media controls return type */\nexport interface UseMediaControlsReturn {\n  /** Whether the media is currently buffering */\n  buffered: [number, number][];\n  /** The current playback position in seconds */\n  currentTime: number;\n  /** The total duration of the media in seconds */\n  duration: number;\n  /** Whether the media has ended */\n  ended: boolean;\n  /** Whether the media is currently muted */\n  muted: boolean;\n  /** The current playback rate (1.0 is normal speed) */\n  playbackRate: number;\n  /** Whether the media is currently playing */\n  playing: boolean;\n  /** Whether the media is currently seeking */\n  seeking: boolean;\n  /** Whether the media is currently stalled */\n  stalled: boolean;\n  /** The current volume level (0.0 to 1.0) */\n  volume: number;\n  /** Whether the media is currently waiting */\n  waiting: boolean;\n\n  /** Set the playback rate */\n  changePlaybackRate: (rate: number) => void;\n  /** Set the volume level (0.0 to 1.0) */\n  changeVolume: (volume: number) => void;\n  /** Set the muted state */\n  mute: () => void;\n  /** Pause the media */\n  pause: () => void;\n  /** Start playing the media */\n  play: () => Promise<void>;\n  /** Seek to a specific time in seconds */\n  seek: (time: number) => void;\n  /** Toggle between play and pause */\n  toggle: () => Promise<void>;\n  /** Set the unmuted state */\n  unmute: () => void;\n}\n\nexport interface UseMediaControls {\n  (target: HookTarget, src: string): UseMediaControlsReturn;\n\n  (target: HookTarget, options: UseMediaSource): UseMediaControlsReturn;\n\n  <Target extends HTMLMediaElement>(\n    src: string\n  ): UseMediaControlsReturn & {\n    ref: StateRef<Target>;\n  };\n\n  <Target extends HTMLMediaElement>(\n    options: UseMediaSource\n  ): UseMediaControlsReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useMediaControls\n * @description Hook that provides controls for HTML media elements (audio/video)\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target media element\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n *\n * @example\n * const { playing, play, pause } = useMediaControls(videoRef, 'video.mp4');\n *\n * @overload\n * @param {HookTarget} target The target media element\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n *\n * @example\n * const { playing, play, pause } = useMediaControls(audioRef, { src: 'audio.mp3', type: 'audio/mp3' });\n *\n * @overload\n * @template Target The target media element type\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n *\n * @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>('video.mp4');\n *\n * @overload\n * @template Target The target media element type\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n *\n * @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>({ src: 'video.mp4', type: 'video/mp4' });\n */\nexport const useMediaControls = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { src: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { src: params[0] }\n  ) as UseMediaSource;\n\n  const internalRef = useRefState<HTMLMediaElement>();\n  const elementRef = useRef<HTMLMediaElement | null>(null);\n\n  const [playing, setPlaying] = useState(false);\n  const [duration, setDuration] = useState(0);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [seeking, setSeeking] = useState(false);\n  const [waiting, setWaiting] = useState(false);\n  const [buffered, setBuffered] = useState<[number, number][]>([]);\n  const [stalled, setStalled] = useState(false);\n  const [ended, setEnded] = useState(false);\n  const [playbackRate, setPlaybackRateState] = useState(1);\n\n  const [muted, setMutedState] = useState(false);\n  const [volume, setVolumeState] = useState(1);\n\n  useEffect(() => {\n    const element = (\n      target ? isTarget.getElement(target) : internalRef.current\n    ) as HTMLMediaElement;\n\n    if (!element) return;\n\n    elementRef.current = element;\n    element.src = options.src;\n\n    if (options.type) element.setAttribute('type', options.type);\n    if (options.media) element.setAttribute('media', options.media);\n\n    setDuration(element.duration);\n    setCurrentTime(element.currentTime);\n    setPlaying(false);\n    setEnded(element.ended);\n    setMutedState(element.muted);\n    setVolumeState(element.volume);\n    setPlaybackRateState(element.playbackRate);\n\n    const onPlaying = () => {\n      setPlaying(true);\n      setStalled(false);\n    };\n    const onPause = () => setPlaying(false);\n    const onWaiting = () => setWaiting(true);\n    const onStalled = () => setStalled(true);\n    const onSeeking = () => setSeeking(true);\n    const onSeeked = () => setSeeking(false);\n    const onEnded = () => {\n      setPlaying(false);\n      setEnded(true);\n    };\n    const onDurationChange = () => setDuration(element.duration);\n    const onTimeUpdate = () => setCurrentTime(element.currentTime);\n    const onVolumechange = () => {\n      setMutedState(element.muted);\n      setVolumeState(element.volume);\n    };\n    const onRatechange = () => setPlaybackRateState(element.playbackRate);\n    const onProgress = () => setBuffered(timeRangeToArray(element.buffered));\n\n    element.addEventListener('playing', onPlaying);\n    element.addEventListener('pause', onPause);\n    element.addEventListener('waiting', onWaiting);\n    element.addEventListener('progress', onProgress);\n    element.addEventListener('stalled', onStalled);\n    element.addEventListener('seeking', onSeeking);\n    element.addEventListener('seeked', onSeeked);\n    element.addEventListener('ended', onEnded);\n    element.addEventListener('loadedmetadata', onDurationChange);\n    element.addEventListener('timeupdate', onTimeUpdate);\n    element.addEventListener('volumechange', onVolumechange);\n    element.addEventListener('ratechange', onRatechange);\n\n    return () => {\n      element.removeEventListener('playing', onPlaying);\n      element.removeEventListener('pause', onPause);\n      element.removeEventListener('waiting', onWaiting);\n      element.removeEventListener('progress', onProgress);\n      element.removeEventListener('stalled', onStalled);\n      element.removeEventListener('seeking', onSeeking);\n      element.removeEventListener('seeked', onSeeked);\n      element.removeEventListener('ended', onEnded);\n      element.removeEventListener('loadedmetadata', onDurationChange);\n      element.removeEventListener('timeupdate', onTimeUpdate);\n      element.removeEventListener('volumechange', onVolumechange);\n      element.removeEventListener('ratechange', onRatechange);\n    };\n  }, [target, internalRef.state]);\n\n  const play = async () => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    await element.play();\n  };\n\n  const pause = () => {\n    if (!elementRef.current) return;\n    elementRef.current.pause();\n  };\n\n  const toggle = async () => {\n    if (playing) return pause();\n    return play();\n  };\n\n  const seek = (time: number) => {\n    if (!elementRef.current) return;\n    elementRef.current.currentTime = Math.min(Math.max(time, 0), duration);\n  };\n\n  const changeVolume = (value: number) => {\n    if (!elementRef.current) return;\n    elementRef.current.volume = Math.min(Math.max(value, 0), 1);\n  };\n\n  const mute = () => {\n    if (!elementRef.current) return;\n    elementRef.current.muted = true;\n  };\n\n  const unmute = () => {\n    if (!elementRef.current) return;\n    elementRef.current.muted = false;\n  };\n\n  const changePlaybackRate = (value: number) => {\n    if (!elementRef.current) return;\n    elementRef.current.playbackRate = value;\n  };\n\n  return {\n    playing,\n    duration,\n    currentTime,\n    seeking,\n    waiting,\n    buffered,\n    stalled,\n    ended,\n    playbackRate,\n    muted,\n    volume,\n\n    play,\n    pause,\n    toggle,\n    seek,\n    changeVolume,\n    mute,\n    unmute,\n    changePlaybackRate,\n\n    ...(!target && { ref: internalRef })\n  };\n}) as UseMediaControls;\n"],"names":["timeRangeToArray","timeRanges","ranges","i","useMediaControls","params","target","isTarget","options","internalRef","useRefState","elementRef","useRef","playing","setPlaying","useState","duration","setDuration","currentTime","setCurrentTime","seeking","setSeeking","waiting","setWaiting","buffered","setBuffered","stalled","setStalled","ended","setEnded","playbackRate","setPlaybackRateState","muted","setMutedState","volume","setVolumeState","useEffect","element","onPlaying","onPause","onWaiting","onStalled","onSeeking","onSeeked","onEnded","onDurationChange","onTimeUpdate","onVolumechange","onRatechange","onProgress","play","pause","time","value"],"mappings":"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"}

package/dist/cjs/hooks/useMouse/useMouse.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),f=require("../useRefState/useRefState.cjs"),E=require("../../utils/helpers/isTarget.cjs"),y=require("../../utils/helpers/getElement.cjs"),S=(...l)=>{const n=E.isTarget(l[0])?l[0]:void 0,[c,o]=Y.useState({x:0,y:0,elementX:0,elementY:0,elementPositionX:0,elementPositionY:0,clientX:0,clientY:0}),s=f.useRefState();return Y.useEffect(()=>{const r=e=>{const u=n?y.getElement(n):s.current,t={x:e.pageX,y:e.pageY,clientX:e.clientX,clientY:e.clientY};if(u){const{left:i,top:a}=u.getBoundingClientRect(),d=i+window.scrollX,X=a+window.scrollY,g=e.pageX-d,P=e.pageY-X;t.elementX=g,t.elementY=P,t.elementPositionX=d,t.elementPositionY=X,o(w=>({...w,...t}))}else t.elementX=e.pageX,t.elementY=e.pageY,t.elementPositionX=0,t.elementPositionY=0,o(i=>({...i,...t}))},m=()=>{o(e=>({...e,x:e.x+window.scrollX-e.elementPositionX,y:e.y+window.scrollY-e.elementPositionY,elementPositionX:window.scrollX,elementPositionY:window.scrollY}))};return document.addEventListener("scroll",m,{passive:!0}),document.addEventListener("mousemove",r),()=>{document.removeEventListener("scroll",m),document.removeEventListener("mousemove",r)}},[s.state,n]),n?c:{ref:s,...c}};exports.useMouse=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),y=require("../useRefState/useRefState.cjs"),Y=require("../../utils/helpers/isTarget.cjs"),E=(...l)=>{const n=Y.isTarget(l[0])?l[0]:void 0,[c,o]=X.useState({x:0,y:0,elementX:0,elementY:0,elementPositionX:0,elementPositionY:0,clientX:0,clientY:0}),s=y.useRefState();return X.useEffect(()=>{const r=e=>{const u=n?Y.isTarget.getElement(n):s.current,t={x:e.pageX,y:e.pageY,clientX:e.clientX,clientY:e.clientY};if(u){const{left:i,top:g}=u.getBoundingClientRect(),d=i+window.scrollX,a=g+window.scrollY,P=e.pageX-d,w=e.pageY-a;t.elementX=P,t.elementY=w,t.elementPositionX=d,t.elementPositionY=a,o(f=>({...f,...t}))}else t.elementX=e.pageX,t.elementY=e.pageY,t.elementPositionX=0,t.elementPositionY=0,o(i=>({...i,...t}))},m=()=>{o(e=>({...e,x:e.x+window.scrollX-e.elementPositionX,y:e.y+window.scrollY-e.elementPositionY,elementPositionX:window.scrollX,elementPositionY:window.scrollY}))};return document.addEventListener("scroll",m,{passive:!0}),document.addEventListener("mousemove",r),()=>{document.removeEventListener("scroll",m),document.removeEventListener("mousemove",r)}},[s.state,n]),n?c:{ref:s,...c}};exports.useMouse=E;
 //# sourceMappingURL=useMouse.cjs.map

package/dist/cjs/hooks/useMouse/useMouse.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMouse.cjs","sources":["../../../../src/hooks/useMouse/useMouse.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use mouse return type */\nexport interface UseMouseReturn {\n  /** The current mouse client x position */\n  clientX: number;\n  /** The current mouse client y position */\n  clientY: number;\n  /** The current element position x */\n  elementPositionX: number;\n  /** The current element position y */\n  elementPositionY: number;\n  /** The current element x position */\n  elementX: number;\n  /** The current element y position */\n  elementY: number;\n  /** The current mouse x position */\n  x: number;\n  /** The current mouse y position */\n  y: number;\n}\n\nexport interface UseMouse {\n  (target: HookTarget): UseMouseReturn;\n\n  <Target extends Element>(\n    target?: never\n  ): UseMouseReturn & {\n    ref: StateRef<Target>;\n  };\n\n  (target?: Window): UseMouseReturn;\n}\n\n/**\n * @name useMouse\n * @description - Hook that manages a mouse position\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to manage the mouse position for\n * @returns {UseMouseReturn} An object with the current mouse position\n *\n * @example\n * const { x, y, clientX, clientY, elementX, elementY, elementPositionX, elementPositionY } = useMouse(ref);\n *\n * @overload\n * @template Target The target element\n * @returns {UseMouseReturn & { ref: StateRef<Target> }} An object with the current mouse position and a ref\n *\n * @example\n * const { ref, x, y, clientX, clientY, elementX, elementY, elementPositionX, elementPositionY } = useMouse();\n */\nexport const useMouse = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n\n  const [value, setValue] = useState<UseMouseReturn>({\n    x: 0,\n    y: 0,\n    elementX: 0,\n    elementY: 0,\n    elementPositionX: 0,\n    elementPositionY: 0,\n    clientX: 0,\n    clientY: 0\n  });\n\n  const internalRef = useRefState<Element>();\n\n  useEffect(() => {\n    const onMouseMove = (event: MouseEvent) => {\n      const element = (target ? getElement(target) : internalRef.current) as Element | undefined;\n\n      const updatedValue = {\n        x: event.pageX,\n        y: event.pageY,\n        clientX: event.clientX,\n        clientY: event.clientY\n      } as typeof value;\n\n      if (element) {\n        const { left, top } = element.getBoundingClientRect();\n        const elementPositionX = left + window.scrollX;\n        const elementPositionY = top + window.scrollY;\n        const elementX = event.pageX - elementPositionX;\n        const elementY = event.pageY - elementPositionY;\n\n        updatedValue.elementX = elementX;\n        updatedValue.elementY = elementY;\n        updatedValue.elementPositionX = elementPositionX;\n        updatedValue.elementPositionY = elementPositionY;\n\n        setValue((prevValue) => ({\n          ...prevValue,\n          ...updatedValue\n        }));\n      } else {\n        updatedValue.elementX = event.pageX;\n        updatedValue.elementY = event.pageY;\n        updatedValue.elementPositionX = 0;\n        updatedValue.elementPositionY = 0;\n\n        setValue((prevValue) => ({\n          ...prevValue,\n          ...updatedValue\n        }));\n      }\n    };\n\n    const onScroll = () => {\n      setValue((prevValue) => ({\n        ...prevValue,\n        x: prevValue.x + window.scrollX - prevValue.elementPositionX,\n        y: prevValue.y + window.scrollY - prevValue.elementPositionY,\n        elementPositionX: window.scrollX,\n        elementPositionY: window.scrollY\n      }));\n    };\n\n    document.addEventListener('scroll', onScroll, { passive: true });\n    document.addEventListener('mousemove', onMouseMove);\n    return () => {\n      document.removeEventListener('scroll', onScroll);\n      document.removeEventListener('mousemove', onMouseMove);\n    };\n  }, [internalRef.state, target]);\n\n  if (target) return value;\n  return {\n    ref: internalRef,\n    ...value\n  };\n}) as UseMouse;\n"],"names":["useMouse","params","target","isTarget","value","setValue","useState","internalRef","useRefState","useEffect","onMouseMove","event","element","getElement","updatedValue","left","top","elementPositionX","elementPositionY","elementX","elementY","prevValue","onScroll"],"mappings":"mPA8DaA,EAAY,IAAIC,IAAkB,CAC7C,MAAMC,EAASC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE3C,CAACG,EAAOC,CAAQ,EAAIC,WAAyB,CACjD,EAAG,EACH,EAAG,EACH,SAAU,EACV,SAAU,EACV,iBAAkB,EAClB,iBAAkB,EAClB,QAAS,EACT,QAAS,CAAA,CACV,EAEKC,EAAcC,EAAAA,YAAA,EA4DpB,OA1DAC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAeC,GAAsB,CACzC,MAAMC,EAAWV,EAASW,EAAAA,WAAWX,CAAM,EAAIK,EAAY,QAErDO,EAAe,CACnB,EAAGH,EAAM,MACT,EAAGA,EAAM,MACT,QAASA,EAAM,QACf,QAASA,EAAM,OAAA,EAGjB,GAAIC,EAAS,CACX,KAAM,CAAE,KAAAG,EAAM,IAAAC,GAAQJ,EAAQ,sBAAA,EACxBK,EAAmBF,EAAO,OAAO,QACjCG,EAAmBF,EAAM,OAAO,QAChCG,EAAWR,EAAM,MAAQM,EACzBG,EAAWT,EAAM,MAAQO,EAE/BJ,EAAa,SAAWK,EACxBL,EAAa,SAAWM,EACxBN,EAAa,iBAAmBG,EAChCH,EAAa,iBAAmBI,EAEhCb,EAAUgB,IAAe,CACvB,GAAGA,EACH,GAAGP,CAAA,EACH,CAAA,MAEFA,EAAa,SAAWH,EAAM,MAC9BG,EAAa,SAAWH,EAAM,MAC9BG,EAAa,iBAAmB,EAChCA,EAAa,iBAAmB,EAEhCT,EAAUgB,IAAe,CACvB,GAAGA,EACH,GAAGP,CAAA,EACH,CACJ,EAGIQ,EAAW,IAAM,CACrBjB,EAAUgB,IAAe,CACvB,GAAGA,EACH,EAAGA,EAAU,EAAI,OAAO,QAAUA,EAAU,iBAC5C,EAAGA,EAAU,EAAI,OAAO,QAAUA,EAAU,iBAC5C,iBAAkB,OAAO,QACzB,iBAAkB,OAAO,OAAA,EACzB,CAAA,EAGJ,gBAAS,iBAAiB,SAAUC,EAAU,CAAE,QAAS,GAAM,EAC/D,SAAS,iBAAiB,YAAaZ,CAAW,EAC3C,IAAM,CACX,SAAS,oBAAoB,SAAUY,CAAQ,EAC/C,SAAS,oBAAoB,YAAaZ,CAAW,CAAA,CACvD,EACC,CAACH,EAAY,MAAOL,CAAM,CAAC,EAE1BA,EAAeE,EACZ,CACL,IAAKG,EACL,GAAGH,CAAA,CAEP"}
+{"version":3,"file":"useMouse.cjs","sources":["../../../../src/hooks/useMouse/useMouse.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use mouse return type */\nexport interface UseMouseReturn {\n  /** The current mouse client x position */\n  clientX: number;\n  /** The current mouse client y position */\n  clientY: number;\n  /** The current element position x */\n  elementPositionX: number;\n  /** The current element position y */\n  elementPositionY: number;\n  /** The current element x position */\n  elementX: number;\n  /** The current element y position */\n  elementY: number;\n  /** The current mouse x position */\n  x: number;\n  /** The current mouse y position */\n  y: number;\n}\n\nexport interface UseMouse {\n  (target: HookTarget): UseMouseReturn;\n\n  <Target extends Element>(\n    target?: never\n  ): UseMouseReturn & {\n    ref: StateRef<Target>;\n  };\n\n  (target?: Window): UseMouseReturn;\n}\n\n/**\n * @name useMouse\n * @description - Hook that manages a mouse position\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to manage the mouse position for\n * @returns {UseMouseReturn} An object with the current mouse position\n *\n * @example\n * const { x, y, clientX, clientY, elementX, elementY, elementPositionX, elementPositionY } = useMouse(ref);\n *\n * @overload\n * @template Target The target element\n * @returns {UseMouseReturn & { ref: StateRef<Target> }} An object with the current mouse position and a ref\n *\n * @example\n * const { ref, x, y, clientX, clientY, elementX, elementY, elementPositionX, elementPositionY } = useMouse();\n */\nexport const useMouse = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n\n  const [value, setValue] = useState<UseMouseReturn>({\n    x: 0,\n    y: 0,\n    elementX: 0,\n    elementY: 0,\n    elementPositionX: 0,\n    elementPositionY: 0,\n    clientX: 0,\n    clientY: 0\n  });\n\n  const internalRef = useRefState<Element>();\n\n  useEffect(() => {\n    const onMouseMove = (event: MouseEvent) => {\n      const element = (target ? isTarget.getElement(target) : internalRef.current) as\n        | Element\n        | undefined;\n\n      const updatedValue = {\n        x: event.pageX,\n        y: event.pageY,\n        clientX: event.clientX,\n        clientY: event.clientY\n      } as typeof value;\n\n      if (element) {\n        const { left, top } = element.getBoundingClientRect();\n        const elementPositionX = left + window.scrollX;\n        const elementPositionY = top + window.scrollY;\n        const elementX = event.pageX - elementPositionX;\n        const elementY = event.pageY - elementPositionY;\n\n        updatedValue.elementX = elementX;\n        updatedValue.elementY = elementY;\n        updatedValue.elementPositionX = elementPositionX;\n        updatedValue.elementPositionY = elementPositionY;\n\n        setValue((prevValue) => ({\n          ...prevValue,\n          ...updatedValue\n        }));\n      } else {\n        updatedValue.elementX = event.pageX;\n        updatedValue.elementY = event.pageY;\n        updatedValue.elementPositionX = 0;\n        updatedValue.elementPositionY = 0;\n\n        setValue((prevValue) => ({\n          ...prevValue,\n          ...updatedValue\n        }));\n      }\n    };\n\n    const onScroll = () => {\n      setValue((prevValue) => ({\n        ...prevValue,\n        x: prevValue.x + window.scrollX - prevValue.elementPositionX,\n        y: prevValue.y + window.scrollY - prevValue.elementPositionY,\n        elementPositionX: window.scrollX,\n        elementPositionY: window.scrollY\n      }));\n    };\n\n    document.addEventListener('scroll', onScroll, { passive: true });\n    document.addEventListener('mousemove', onMouseMove);\n    return () => {\n      document.removeEventListener('scroll', onScroll);\n      document.removeEventListener('mousemove', onMouseMove);\n    };\n  }, [internalRef.state, target]);\n\n  if (target) return value;\n  return {\n    ref: internalRef,\n    ...value\n  };\n}) as UseMouse;\n"],"names":["useMouse","params","target","isTarget","value","setValue","useState","internalRef","useRefState","useEffect","onMouseMove","event","element","updatedValue","left","top","elementPositionX","elementPositionY","elementX","elementY","prevValue","onScroll"],"mappings":"mMA8DaA,EAAY,IAAIC,IAAkB,CAC7C,MAAMC,EAASC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE3C,CAACG,EAAOC,CAAQ,EAAIC,WAAyB,CACjD,EAAG,EACH,EAAG,EACH,SAAU,EACV,SAAU,EACV,iBAAkB,EAClB,iBAAkB,EAClB,QAAS,EACT,QAAS,CAAA,CACV,EAEKC,EAAcC,EAAAA,YAAA,EA8DpB,OA5DAC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAeC,GAAsB,CACzC,MAAMC,EAAWV,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIK,EAAY,QAI9DM,EAAe,CACnB,EAAGF,EAAM,MACT,EAAGA,EAAM,MACT,QAASA,EAAM,QACf,QAASA,EAAM,OAAA,EAGjB,GAAIC,EAAS,CACX,KAAM,CAAE,KAAAE,EAAM,IAAAC,GAAQH,EAAQ,sBAAA,EACxBI,EAAmBF,EAAO,OAAO,QACjCG,EAAmBF,EAAM,OAAO,QAChCG,EAAWP,EAAM,MAAQK,EACzBG,EAAWR,EAAM,MAAQM,EAE/BJ,EAAa,SAAWK,EACxBL,EAAa,SAAWM,EACxBN,EAAa,iBAAmBG,EAChCH,EAAa,iBAAmBI,EAEhCZ,EAAUe,IAAe,CACvB,GAAGA,EACH,GAAGP,CAAA,EACH,CAAA,MAEFA,EAAa,SAAWF,EAAM,MAC9BE,EAAa,SAAWF,EAAM,MAC9BE,EAAa,iBAAmB,EAChCA,EAAa,iBAAmB,EAEhCR,EAAUe,IAAe,CACvB,GAAGA,EACH,GAAGP,CAAA,EACH,CACJ,EAGIQ,EAAW,IAAM,CACrBhB,EAAUe,IAAe,CACvB,GAAGA,EACH,EAAGA,EAAU,EAAI,OAAO,QAAUA,EAAU,iBAC5C,EAAGA,EAAU,EAAI,OAAO,QAAUA,EAAU,iBAC5C,iBAAkB,OAAO,QACzB,iBAAkB,OAAO,OAAA,EACzB,CAAA,EAGJ,gBAAS,iBAAiB,SAAUC,EAAU,CAAE,QAAS,GAAM,EAC/D,SAAS,iBAAiB,YAAaX,CAAW,EAC3C,IAAM,CACX,SAAS,oBAAoB,SAAUW,CAAQ,EAC/C,SAAS,oBAAoB,YAAaX,CAAW,CAAA,CACvD,EACC,CAACH,EAAY,MAAOL,CAAM,CAAC,EAE1BA,EAAeE,EACZ,CACL,IAAKG,EACL,GAAGH,CAAA,CAEP"}

package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=require("../useRefState/useRefState.cjs"),v=require("../../utils/helpers/isTarget.cjs"),O=require("../../utils/helpers/getElement.cjs"),h=(...t)=>{const r=v.isTarget(t[0])?t[0]:void 0,e=r?typeof t[1]=="object"?t[1]:{onChange:t[1]}:typeof t[0]=="object"?t[0]:{onChange:t[0]},s=e?.onChange,u=e?.enabled??!0,[i,b]=c.useState(),n=d.useRefState(),a=c.useRef(s);return a.current=s,c.useEffect(()=>{if(!u||!r&&!n.state)return;const l=r?O.getElement(r):n.current;if(!l)return;const o=new MutationObserver((f,g)=>{a.current?.(f,g)});return b(o),o.observe(l,e),()=>{o.disconnect()}},[r,n.state,e?.childList,e?.attributes,e?.characterData,e?.subtree,e?.attributeOldValue,e?.characterDataOldValue,e?.attributeFilter,u]),r?{observer:i}:{ref:n,observer:i}};exports.useMutationObserver=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),v=require("../useRefState/useRefState.cjs"),l=require("../../utils/helpers/isTarget.cjs"),O=(...t)=>{const r=l.isTarget(t[0])?t[0]:void 0,e=r?typeof t[1]=="object"?t[1]:{onChange:t[1]}:typeof t[0]=="object"?t[0]:{onChange:t[0]},c=e?.onChange,u=e?.enabled??!0,[i,f]=s.useState(),n=v.useRefState(),a=s.useRef(c);return a.current=c,s.useEffect(()=>{if(!u||!r&&!n.state)return;const b=r?l.isTarget.getElement(r):n.current;if(!b)return;const o=new MutationObserver((g,d)=>{a.current?.(g,d)});return f(o),o.observe(b,e),()=>{o.disconnect()}},[r,n.state,e?.childList,e?.attributes,e?.characterData,e?.subtree,e?.attributeOldValue,e?.characterDataOldValue,e?.attributeFilter,u]),r?{observer:i}:{ref:n,observer:i}};exports.useMutationObserver=O;
 //# sourceMappingURL=useMutationObserver.cjs.map

package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMutationObserver.cjs","sources":["../../../../src/hooks/useMutationObserver/useMutationObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The mutation observer callback type */\nexport type UseMutationObserverCallback = (\n  mutations: MutationRecord[],\n  observer: MutationObserver\n) => void;\n\n/** The mutation observer options type */\nexport interface UseMutationObserverOptions extends MutationObserverInit {\n  /** The enabled state of the mutation observer */\n  enabled?: boolean;\n  /** The callback to execute when mutation is detected */\n  onChange?: UseMutationObserverCallback;\n}\n\n/** The mutation observer return type */\nexport interface UseMutationObserverReturn {\n  /** The mutation observer instance */\n  observer?: MutationObserver;\n}\n\nexport interface UseMutationObserver {\n  <Target extends Element>(\n    options?: UseMutationObserverOptions,\n    target?: never\n  ): UseMutationObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, options?: UseMutationObserverOptions): UseMutationObserverReturn;\n\n  <Target extends Element>(\n    callback: UseMutationObserverCallback,\n    target?: never\n  ): UseMutationObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, callback: UseMutationObserverCallback): UseMutationObserverReturn;\n}\n\n/**\n * @name useMutationObserver\n * @description - Hook that gives you mutation observer state\n * @category Sensors\n * @usage low\n *\n * @browserapi MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the mutation observer\n * @param {UseMutationObserverCallback} [options.onChange] The callback to execute when mutation is detected\n * @param {boolean} [options.attributes] Set to true if mutations to target's attributes are to be observed\n * @param {boolean} [options.characterData] Set to true if mutations to target's data are to be observed\n * @param {boolean} [options.childList] Set to true if mutations to target's children are to be observed\n * @param {boolean} [options.subtree] Set to true if mutations to not just target, but also target's descendants are to be observed\n * @returns {UseMutationObserverReturn} An object containing the mutation observer state\n *\n * @example\n * const { observer, stop } = useMutationObserver(ref, { childList: true });\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the mutation observer\n * @param {UseMutationObserverCallback} [options.onChange] The callback to execute when mutation is detected\n * @param {boolean} [options.attributes] Set to true if mutations to target's attributes are to be observed\n * @param {boolean} [options.characterData] Set to true if mutations to target's data are to be observed\n * @param {boolean} [options.childList] Set to true if mutations to target's children are to be observed\n * @param {boolean} [options.subtree] Set to true if mutations to not just target, but also target's descendants are to be observed\n * @returns {UseMutationObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, observer, stop } = useMutationObserver({ childList: true });\n *\n * @overload\n * @template Target The target element\n * @param {UseMutationObserverCallback} callback The callback to execute when mutation is detected\n * @returns {UseMutationObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, observer, stop } = useMutationObserver((mutations) => console.log(mutations));\n *\n * @overload\n * @param {UseMutationObserverCallback} callback The callback to execute when mutation is detected\n * @param {HookTarget} target The target element to observe\n * @returns {UseMutationObserverReturn} An object containing the mutation observer state\n *\n * @example\n * const { observer, stop } = useMutationObserver((mutations) => console.log(mutations), ref);\n */\nexport const useMutationObserver = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onChange: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onChange: params[0] }\n  ) as UseMutationObserverOptions | undefined;\n\n  const callback = options?.onChange;\n  const enabled = options?.enabled ?? true;\n\n  const [observer, setObserver] = useState<MutationObserver>();\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = target ? getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const observer = new MutationObserver((mutations, observer) => {\n      internalCallbackRef.current?.(mutations, observer);\n    });\n\n    setObserver(observer);\n    observer.observe(element as Element, options);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    target,\n    internalRef.state,\n    options?.childList,\n    options?.attributes,\n    options?.characterData,\n    options?.subtree,\n    options?.attributeOldValue,\n    options?.characterDataOldValue,\n    options?.attributeFilter,\n    enabled\n  ]);\n\n  if (target) return { observer };\n  return {\n    ref: internalRef,\n    observer\n  };\n}) as UseMutationObserver;\n"],"names":["useMutationObserver","params","target","isTarget","options","callback","enabled","observer","setObserver","useState","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element","getElement","mutations"],"mappings":"mPAgGaA,EAAuB,IAAIC,IAAkB,CACxD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EACtB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EAGtBI,EAAWD,GAAS,SACpBE,EAAUF,GAAS,SAAW,GAE9B,CAACG,EAAUC,CAAW,EAAIC,WAAA,EAE1BC,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOR,CAAQ,EAgC3C,OA/BAO,EAAoB,QAAUP,EAE9BS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACR,GAAY,CAACJ,GAAU,CAACQ,EAAY,MAAQ,OAEjD,MAAMK,EAAUb,EAASc,EAAAA,WAAWd,CAAM,EAAIQ,EAAY,QAC1D,GAAI,CAACK,EAAS,OAEd,MAAMR,EAAW,IAAI,iBAAiB,CAACU,EAAWV,IAAa,CAC7DK,EAAoB,UAAUK,EAAWV,CAAQ,CAAA,CAClD,EAED,OAAAC,EAAYD,CAAQ,EACpBA,EAAS,QAAQQ,EAAoBX,CAAO,EAErC,IAAM,CACXG,EAAS,WAAA,CAAW,CACtB,EACC,CACDL,EACAQ,EAAY,MACZN,GAAS,UACTA,GAAS,WACTA,GAAS,cACTA,GAAS,QACTA,GAAS,kBACTA,GAAS,sBACTA,GAAS,gBACTE,CAAA,CACD,EAEGJ,EAAe,CAAE,SAAAK,CAAA,EACd,CACL,IAAKG,EACL,SAAAH,CAAA,CAEJ"}
+{"version":3,"file":"useMutationObserver.cjs","sources":["../../../../src/hooks/useMutationObserver/useMutationObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The mutation observer callback type */\nexport type UseMutationObserverCallback = (\n  mutations: MutationRecord[],\n  observer: MutationObserver\n) => void;\n\n/** The mutation observer options type */\nexport interface UseMutationObserverOptions extends MutationObserverInit {\n  /** The enabled state of the mutation observer */\n  enabled?: boolean;\n  /** The callback to execute when mutation is detected */\n  onChange?: UseMutationObserverCallback;\n}\n\n/** The mutation observer return type */\nexport interface UseMutationObserverReturn {\n  /** The mutation observer instance */\n  observer?: MutationObserver;\n}\n\nexport interface UseMutationObserver {\n  <Target extends Element>(\n    options?: UseMutationObserverOptions,\n    target?: never\n  ): UseMutationObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, options?: UseMutationObserverOptions): UseMutationObserverReturn;\n\n  <Target extends Element>(\n    callback: UseMutationObserverCallback,\n    target?: never\n  ): UseMutationObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, callback: UseMutationObserverCallback): UseMutationObserverReturn;\n}\n\n/**\n * @name useMutationObserver\n * @description - Hook that gives you mutation observer state\n * @category Sensors\n * @usage low\n *\n * @browserapi MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the mutation observer\n * @param {UseMutationObserverCallback} [options.onChange] The callback to execute when mutation is detected\n * @param {boolean} [options.attributes] Set to true if mutations to target's attributes are to be observed\n * @param {boolean} [options.characterData] Set to true if mutations to target's data are to be observed\n * @param {boolean} [options.childList] Set to true if mutations to target's children are to be observed\n * @param {boolean} [options.subtree] Set to true if mutations to not just target, but also target's descendants are to be observed\n * @returns {UseMutationObserverReturn} An object containing the mutation observer state\n *\n * @example\n * const { observer, stop } = useMutationObserver(ref, { childList: true });\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the mutation observer\n * @param {UseMutationObserverCallback} [options.onChange] The callback to execute when mutation is detected\n * @param {boolean} [options.attributes] Set to true if mutations to target's attributes are to be observed\n * @param {boolean} [options.characterData] Set to true if mutations to target's data are to be observed\n * @param {boolean} [options.childList] Set to true if mutations to target's children are to be observed\n * @param {boolean} [options.subtree] Set to true if mutations to not just target, but also target's descendants are to be observed\n * @returns {UseMutationObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, observer, stop } = useMutationObserver({ childList: true });\n *\n * @overload\n * @template Target The target element\n * @param {UseMutationObserverCallback} callback The callback to execute when mutation is detected\n * @returns {UseMutationObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, observer, stop } = useMutationObserver((mutations) => console.log(mutations));\n *\n * @overload\n * @param {UseMutationObserverCallback} callback The callback to execute when mutation is detected\n * @param {HookTarget} target The target element to observe\n * @returns {UseMutationObserverReturn} An object containing the mutation observer state\n *\n * @example\n * const { observer, stop } = useMutationObserver((mutations) => console.log(mutations), ref);\n */\nexport const useMutationObserver = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onChange: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onChange: params[0] }\n  ) as UseMutationObserverOptions | undefined;\n\n  const callback = options?.onChange;\n  const enabled = options?.enabled ?? true;\n\n  const [observer, setObserver] = useState<MutationObserver>();\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const observer = new MutationObserver((mutations, observer) => {\n      internalCallbackRef.current?.(mutations, observer);\n    });\n\n    setObserver(observer);\n    observer.observe(element as Element, options);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    target,\n    internalRef.state,\n    options?.childList,\n    options?.attributes,\n    options?.characterData,\n    options?.subtree,\n    options?.attributeOldValue,\n    options?.characterDataOldValue,\n    options?.attributeFilter,\n    enabled\n  ]);\n\n  if (target) return { observer };\n  return {\n    ref: internalRef,\n    observer\n  };\n}) as UseMutationObserver;\n"],"names":["useMutationObserver","params","target","isTarget","options","callback","enabled","observer","setObserver","useState","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element","mutations"],"mappings":"mMAgGaA,EAAuB,IAAIC,IAAkB,CACxD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EACtB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EAGtBI,EAAWD,GAAS,SACpBE,EAAUF,GAAS,SAAW,GAE9B,CAACG,EAAUC,CAAW,EAAIC,WAAA,EAE1BC,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOR,CAAQ,EAgC3C,OA/BAO,EAAoB,QAAUP,EAE9BS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACR,GAAY,CAACJ,GAAU,CAACQ,EAAY,MAAQ,OAEjD,MAAMK,EAAUb,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIQ,EAAY,QACnE,GAAI,CAACK,EAAS,OAEd,MAAMR,EAAW,IAAI,iBAAiB,CAACS,EAAWT,IAAa,CAC7DK,EAAoB,UAAUI,EAAWT,CAAQ,CAAA,CAClD,EAED,OAAAC,EAAYD,CAAQ,EACpBA,EAAS,QAAQQ,EAAoBX,CAAO,EAErC,IAAM,CACXG,EAAS,WAAA,CAAW,CACtB,EACC,CACDL,EACAQ,EAAY,MACZN,GAAS,UACTA,GAAS,WACTA,GAAS,cACTA,GAAS,QACTA,GAAS,kBACTA,GAAS,sBACTA,GAAS,gBACTE,CAAA,CACD,EAEGJ,EAAe,CAAE,SAAAK,CAAA,EACd,CACL,IAAKG,EACL,SAAAH,CAAA,CAEJ"}

package/dist/cjs/hooks/usePaint/usePaint.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),E=require("../useEvent/useEvent.cjs"),S=require("../useRefState/useRefState.cjs"),U=require("../../utils/helpers/isTarget.cjs"),A=require("../../utils/helpers/getElement.cjs"),q=10;class g{x;y;constructor(t,e){this.x=t,this.y=e}update(t){this.x=t.x,this.y=t.y}getDifferenceTo(t){return new g(this.x-t.x,this.y-t.y)}getDistanceTo(t){const e=this.getDifferenceTo(t);return Math.sqrt(e.x**2+e.y**2)}getAngleTo(t){const e=this.getDifferenceTo(t);return Math.atan2(e.y,e.x)}equalsTo(t){return this.x===t.x&&this.y===t.y}moveByAngle(t,e){const o=t+Math.PI/2;return this.x+=Math.sin(o)*e,this.y-=Math.cos(o)*e,this}}class C{pointer;brush;radius;smooth=!1;points=[];lines=[];constructor({x:t,y:e,radius:o,smooth:h}){this.smooth=h,this.pointer=new g(t,e),this.brush=new g(t,e),this.radius=o,this.points=[],this.lines=[]}getBrushCoordinates(){return{x:this.brush.x,y:this.brush.y}}getPointerCoordinates(){return{x:this.pointer.x,y:this.pointer.y}}update(t){if(this.pointer.equalsTo(t))return!1;if(this.pointer.update(t),!this.smooth)return this.brush.update(t),this.points.push(this.getBrushCoordinates()),!0;const e=this.pointer.getDistanceTo(this.brush),o=this.pointer.getAngleTo(this.brush);if(Math.round((e-this.radius)*10)/10>0){const l=o+Math.PI/2;return this.brush.update({x:this.brush.x+Math.sin(l)*(e-this.radius),y:this.brush.y-Math.cos(l)*(e-this.radius)}),this.points.push(this.getBrushCoordinates()),!0}return!1}}const B=(...p)=>{const t=U.isTarget(p[0])?p[0]:void 0,e=(t?p[1]:p[0])??{},o=e?.color??"black",h=e?.opacity??1,l=e?.radius??q,s=v.useRef(new C({x:0,y:0,radius:e?.radius??q,smooth:e?.smooth??!1})),[m,b]=v.useState(!1),x=S.useRefState(),n=v.useRef(null),c=(r,u,f,a)=>{if(!n.current)return;n.current.globalAlpha=f,n.current.strokeStyle=u,n.current.lineWidth=a*2,n.current.lineCap="round",n.current.lineJoin="round";let i=r[0],y=r[1];n.current.beginPath();for(let d=1;d<r.length;d+=1){const L={x:i.x+(y.x-i.x)/2,y:i.y+(y.y-i.y)/2};n.current.quadraticCurveTo(i.x,i.y,L.x,L.y),i=r[d],y=r[d+1]}n.current.lineTo(i.x,i.y),n.current.stroke()},M=()=>{n.current&&n.current.clearRect(0,0,n.current.canvas.width,n.current.canvas.height)},T=E.useEvent(r=>{if(!m)return;e?.onMouseMove?.(r,s.current);const u={x:r.offsetX,y:r.offsetY};s.current.update(u)&&n.current&&(M(),n.current.clearRect(0,0,n.current.canvas.width,n.current.canvas.height),s.current.lines.forEach(({points:a,color:i,opacity:y,radius:d})=>c(a,i,y,d)),c(s.current.points,o,h,l))}),w=E.useEvent(r=>{if(!n.current)return;const u={x:r.offsetX,y:r.offsetY};s.current.brush.update(u),s.current.points.push(u),c(s.current.points,o,h,l),e?.onMouseDown?.(r,s.current),b(!0)}),R=E.useEvent(r=>{n.current&&(s.current.points.length&&(s.current.lines.push({points:s.current.points,color:o,opacity:h,radius:l}),s.current.points=[]),e?.onMouseUp?.(r,s.current),b(!1))}),P=()=>{n.current&&(M(),s.current.lines=[],s.current.points=[])},D=()=>{n.current&&(M(),s.current.lines.pop(),s.current.lines.forEach(({points:r,color:u,opacity:f,radius:a})=>c(r,u,f,a)))};return v.useEffect(()=>{if(!t&&!x.state)return;const r=t?A.getElement(t):x.current;if(r)return n.current=r.getContext("2d"),e?.initialLines&&(s.current.lines=e.initialLines,e.initialLines.forEach(({points:u,color:f,opacity:a,radius:i})=>c(u,f,a,i))),r.addEventListener("mousedown",w),r.addEventListener("mousemove",T),r.addEventListener("mouseup",R),()=>{r&&(r.removeEventListener("mousedown",w),r.removeEventListener("mousemove",T),r.removeEventListener("mouseup",R))}},[t,x.state]),t?{drawing:m,clear:P,undo:D,draw:c,lines:s.current.lines}:{ref:x,drawing:m,clear:P,undo:D,draw:c,lines:s.current.lines}};exports.Paint=C;exports.Pointer=g;exports.usePaint=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),b=require("../useEvent/useEvent.cjs"),U=require("../useRefState/useRefState.cjs"),q=require("../../utils/helpers/isTarget.cjs"),C=10;class g{x;y;constructor(t,e){this.x=t,this.y=e}update(t){this.x=t.x,this.y=t.y}getDifferenceTo(t){return new g(this.x-t.x,this.y-t.y)}getDistanceTo(t){const e=this.getDifferenceTo(t);return Math.sqrt(e.x**2+e.y**2)}getAngleTo(t){const e=this.getDifferenceTo(t);return Math.atan2(e.y,e.x)}equalsTo(t){return this.x===t.x&&this.y===t.y}moveByAngle(t,e){const o=t+Math.PI/2;return this.x+=Math.sin(o)*e,this.y-=Math.cos(o)*e,this}}class S{pointer;brush;radius;smooth=!1;points=[];lines=[];constructor({x:t,y:e,radius:o,smooth:h}){this.smooth=h,this.pointer=new g(t,e),this.brush=new g(t,e),this.radius=o,this.points=[],this.lines=[]}getBrushCoordinates(){return{x:this.brush.x,y:this.brush.y}}getPointerCoordinates(){return{x:this.pointer.x,y:this.pointer.y}}update(t){if(this.pointer.equalsTo(t))return!1;if(this.pointer.update(t),!this.smooth)return this.brush.update(t),this.points.push(this.getBrushCoordinates()),!0;const e=this.pointer.getDistanceTo(this.brush),o=this.pointer.getAngleTo(this.brush);if(Math.round((e-this.radius)*10)/10>0){const l=o+Math.PI/2;return this.brush.update({x:this.brush.x+Math.sin(l)*(e-this.radius),y:this.brush.y-Math.cos(l)*(e-this.radius)}),this.points.push(this.getBrushCoordinates()),!0}return!1}}const A=(...p)=>{const t=q.isTarget(p[0])?p[0]:void 0,e=(t?p[1]:p[0])??{},o=e?.color??"black",h=e?.opacity??1,l=e?.radius??C,s=v.useRef(new S({x:0,y:0,radius:e?.radius??C,smooth:e?.smooth??!1})),[m,E]=v.useState(!1),x=U.useRefState(),n=v.useRef(null),c=(r,u,f,a)=>{if(!n.current)return;n.current.globalAlpha=f,n.current.strokeStyle=u,n.current.lineWidth=a*2,n.current.lineCap="round",n.current.lineJoin="round";let i=r[0],y=r[1];n.current.beginPath();for(let d=1;d<r.length;d+=1){const L={x:i.x+(y.x-i.x)/2,y:i.y+(y.y-i.y)/2};n.current.quadraticCurveTo(i.x,i.y,L.x,L.y),i=r[d],y=r[d+1]}n.current.lineTo(i.x,i.y),n.current.stroke()},M=()=>{n.current&&n.current.clearRect(0,0,n.current.canvas.width,n.current.canvas.height)},T=b.useEvent(r=>{if(!m)return;e?.onMouseMove?.(r,s.current);const u={x:r.offsetX,y:r.offsetY};s.current.update(u)&&n.current&&(M(),n.current.clearRect(0,0,n.current.canvas.width,n.current.canvas.height),s.current.lines.forEach(({points:a,color:i,opacity:y,radius:d})=>c(a,i,y,d)),c(s.current.points,o,h,l))}),w=b.useEvent(r=>{if(!n.current)return;const u={x:r.offsetX,y:r.offsetY};s.current.brush.update(u),s.current.points.push(u),c(s.current.points,o,h,l),e?.onMouseDown?.(r,s.current),E(!0)}),R=b.useEvent(r=>{n.current&&(s.current.points.length&&(s.current.lines.push({points:s.current.points,color:o,opacity:h,radius:l}),s.current.points=[]),e?.onMouseUp?.(r,s.current),E(!1))}),P=()=>{n.current&&(M(),s.current.lines=[],s.current.points=[])},D=()=>{n.current&&(M(),s.current.lines.pop(),s.current.lines.forEach(({points:r,color:u,opacity:f,radius:a})=>c(r,u,f,a)))};return v.useEffect(()=>{if(!t&&!x.state)return;const r=t?q.isTarget.getElement(t):x.current;if(r)return n.current=r.getContext("2d"),e?.initialLines&&(s.current.lines=e.initialLines,e.initialLines.forEach(({points:u,color:f,opacity:a,radius:i})=>c(u,f,a,i))),r.addEventListener("mousedown",w),r.addEventListener("mousemove",T),r.addEventListener("mouseup",R),()=>{r&&(r.removeEventListener("mousedown",w),r.removeEventListener("mousemove",T),r.removeEventListener("mouseup",R))}},[t,x.state]),t?{drawing:m,clear:P,undo:D,draw:c,lines:s.current.lines}:{ref:x,drawing:m,clear:P,undo:D,draw:c,lines:s.current.lines}};exports.Paint=S;exports.Pointer=g;exports.usePaint=A;
 //# sourceMappingURL=usePaint.cjs.map

package/dist/cjs/hooks/usePaint/usePaint.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePaint.cjs","sources":["../../../../src/hooks/usePaint/usePaint.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\nconst DEFAULT_BRUSH_RADIUS = 10;\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport class Pointer implements Point {\n  x: number;\n\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n\n  update(point: Point) {\n    this.x = point.x;\n    this.y = point.y;\n  }\n\n  getDifferenceTo(point: Point) {\n    return new Pointer(this.x - point.x, this.y - point.y);\n  }\n\n  getDistanceTo(point: Point) {\n    const diff = this.getDifferenceTo(point);\n    return Math.sqrt(diff.x ** 2 + diff.y ** 2);\n  }\n\n  getAngleTo(point: Point) {\n    const diff = this.getDifferenceTo(point);\n    return Math.atan2(diff.y, diff.x);\n  }\n\n  equalsTo(point: Point) {\n    return this.x === point.x && this.y === point.y;\n  }\n\n  moveByAngle(\n    // The angle in radians\n    angle: number,\n    // How much the point should be moved\n    distance: number\n  ) {\n    // Rotate the angle based on the browser coordinate system ([0,0] in the top left)\n    const angleRotated = angle + Math.PI / 2;\n\n    this.x += Math.sin(angleRotated) * distance;\n    this.y -= Math.cos(angleRotated) * distance;\n\n    return this;\n  }\n}\n\nexport class Paint {\n  pointer: Pointer;\n\n  brush: Pointer;\n\n  radius: number;\n\n  smooth: boolean = false;\n\n  points: Point[] = [];\n\n  lines: { points: Point[]; color: string; radius: number; opacity: number }[] = [];\n\n  constructor({ x, y, radius, smooth }: { x: number; y: number; radius: number; smooth: boolean }) {\n    this.smooth = smooth;\n    this.pointer = new Pointer(x, y);\n    this.brush = new Pointer(x, y);\n    this.radius = radius;\n    this.points = [];\n    this.lines = [];\n  }\n\n  getBrushCoordinates() {\n    return {\n      x: this.brush.x,\n      y: this.brush.y\n    };\n  }\n\n  getPointerCoordinates() {\n    return {\n      x: this.pointer.x,\n      y: this.pointer.y\n    };\n  }\n\n  update(point: Point) {\n    if (this.pointer.equalsTo(point)) return false;\n    this.pointer.update(point);\n\n    if (!this.smooth) {\n      this.brush.update(point);\n      this.points.push(this.getBrushCoordinates());\n      return true;\n    }\n\n    const distance = this.pointer.getDistanceTo(this.brush);\n    const angle = this.pointer.getAngleTo(this.brush);\n    const isOutside = Math.round((distance - this.radius) * 10) / 10 > 0;\n\n    if (isOutside) {\n      const angleRotated = angle + Math.PI / 2;\n      this.brush.update({\n        x: this.brush.x + Math.sin(angleRotated) * (distance - this.radius),\n        y: this.brush.y - Math.cos(angleRotated) * (distance - this.radius)\n      });\n      this.points.push(this.getBrushCoordinates());\n      return true;\n    }\n\n    return false;\n  }\n}\n\nexport interface UsePaintOptions {\n  /** Brush color */\n  color?: string;\n  /** Initial lines */\n  initialLines?: Paint['lines'];\n  /** Brush opacity */\n  opacity?: number;\n  /** Brush radius */\n  radius?: number;\n  /** Smooth brush movement */\n  smooth?: boolean;\n  /** Callback when the mouse is down */\n  onMouseDown?: (event: MouseEvent, paint: Paint) => void;\n  /** Callback when the mouse is moved */\n  onMouseMove?: (event: MouseEvent, paint: Paint) => void;\n  /** Callback when the mouse is up */\n  onMouseUp?: (event: MouseEvent, paint: Paint) => void;\n}\n\nexport interface UsePaintReturn {\n  drawing: boolean;\n  lines: Paint['lines'];\n  clear: () => void;\n  draw: (points: Point[], color: string, opacity: number, radius: number) => void;\n  undo: () => void;\n}\n\nexport interface UsePaint {\n  (target: HookTarget, options?: UsePaintOptions): UsePaintReturn;\n\n  <Target extends HTMLCanvasElement>(\n    options?: UsePaintOptions,\n    target?: never\n  ): UsePaintReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name usePaint\n * @description - Hook that allows you to draw in a specific area\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element to be painted\n * @param {UsePaintOptions} [options] The options to be used\n * @returns {UsePaintReturn} An object containing the current pencil options and functions to interact with the paint\n *\n * @example\n * const drawing = usePaint(canvasRef);\n *\n * @overload\n * @param {UsePaintOptions} [options] The options to be used\n * @returns {UsePaintReturn & { ref: StateRef<HTMLCanvasElement> }} An object containing the current pencil options and functions to interact with the paint\n *\n * @example\n * const { ref, drawing } = usePaint();\n */\nexport const usePaint = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UsePaintOptions) ?? {};\n\n  const color = options?.color ?? 'black';\n  const opacity = options?.opacity ?? 1;\n  const radius = options?.radius ?? DEFAULT_BRUSH_RADIUS;\n\n  const paintRef = useRef<Paint>(\n    new Paint({\n      x: 0,\n      y: 0,\n      radius: options?.radius ?? DEFAULT_BRUSH_RADIUS,\n      smooth: options?.smooth ?? false\n    })\n  );\n  const [drawing, setIsDrawing] = useState(false);\n  const internalRef = useRefState<HTMLCanvasElement>();\n  const contextRef = useRef<CanvasRenderingContext2D | null>(null);\n\n  const draw = (points: Point[], color: string, opacity: number, radius: number) => {\n    if (!contextRef.current) return;\n\n    contextRef.current.globalAlpha = opacity;\n    contextRef.current.strokeStyle = color;\n    contextRef.current.lineWidth = radius * 2;\n    contextRef.current.lineCap = 'round';\n    contextRef.current.lineJoin = 'round';\n\n    let p1 = points[0];\n    let p2 = points[1];\n\n    contextRef.current.beginPath();\n\n    for (let i = 1; i < points.length; i += 1) {\n      const midPoint = {\n        x: p1.x + (p2.x - p1.x) / 2,\n        y: p1.y + (p2.y - p1.y) / 2\n      };\n      contextRef.current.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);\n      p1 = points[i];\n      p2 = points[i + 1];\n    }\n    contextRef.current.lineTo(p1.x, p1.y);\n    contextRef.current.stroke();\n  };\n\n  const clearCanvas = () => {\n    if (!contextRef.current) return;\n    contextRef.current.clearRect(\n      0,\n      0,\n      contextRef.current.canvas.width,\n      contextRef.current.canvas.height\n    );\n  };\n\n  const onMouseMove = useEvent((event: MouseEvent) => {\n    if (!drawing) return;\n    options?.onMouseMove?.(event, paintRef.current);\n\n    const point = { x: event.offsetX, y: event.offsetY };\n\n    const isUpdated = paintRef.current.update(point);\n\n    if (!isUpdated) return;\n    if (!contextRef.current) return;\n    clearCanvas();\n    contextRef.current.clearRect(\n      0,\n      0,\n      contextRef.current.canvas.width,\n      contextRef.current.canvas.height\n    );\n\n    // const brush = paintRef.current.getBrushCoordinates();\n    // // Draw brush point\n    // contextRef.current.beginPath();\n    // contextRef.current.fillStyle = 'red';\n    // contextRef.current.arc(brush.x, brush.y, radius, 0, Math.PI * 2, true);\n    // contextRef.current.fill();\n\n    // // Draw the lazy radius.\n    // contextRef.current.beginPath();\n    // contextRef.current.strokeStyle = '#ccc';\n    // contextRef.current.arc(brush.x, brush.y, radius * 2, 0, Math.PI * 2, true);\n    // contextRef.current.stroke();\n\n    paintRef.current.lines.forEach(({ points, color, opacity, radius }) =>\n      draw(points, color, opacity, radius)\n    );\n    draw(paintRef.current.points, color, opacity, radius);\n  });\n\n  const onMouseDown = useEvent((event: MouseEvent) => {\n    if (!contextRef.current) return;\n\n    const point = { x: event.offsetX, y: event.offsetY };\n    paintRef.current.brush.update(point);\n    paintRef.current.points.push(point);\n    draw(paintRef.current.points, color, opacity, radius);\n\n    options?.onMouseDown?.(event, paintRef.current);\n    setIsDrawing(true);\n  });\n\n  const onMouseUp = useEvent((event: MouseEvent) => {\n    if (!contextRef.current) return;\n\n    if (paintRef.current.points.length) {\n      paintRef.current.lines.push({\n        points: paintRef.current.points,\n        color,\n        opacity,\n        radius\n      });\n      paintRef.current.points = [];\n    }\n\n    options?.onMouseUp?.(event, paintRef.current);\n    setIsDrawing(false);\n  });\n\n  const clear = () => {\n    if (!contextRef.current) return;\n    clearCanvas();\n    paintRef.current.lines = [];\n    paintRef.current.points = [];\n  };\n\n  const undo = () => {\n    if (!contextRef.current) return;\n    clearCanvas();\n\n    paintRef.current.lines.pop();\n    paintRef.current.lines.forEach(({ points, color, opacity, radius }) =>\n      draw(points, color, opacity, radius)\n    );\n  };\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? getElement(target) : internalRef.current) as HTMLCanvasElement;\n    if (!element) return;\n    contextRef.current = element.getContext('2d');\n\n    if (options?.initialLines) {\n      paintRef.current.lines = options.initialLines;\n      options.initialLines.forEach(({ points, color, opacity, radius }) =>\n        draw(points, color, opacity, radius)\n      );\n    }\n\n    element.addEventListener('mousedown', onMouseDown);\n    element.addEventListener('mousemove', onMouseMove);\n    element.addEventListener('mouseup', onMouseUp);\n\n    return () => {\n      if (!element) return;\n      element.removeEventListener('mousedown', onMouseDown);\n      element.removeEventListener('mousemove', onMouseMove);\n      element.removeEventListener('mouseup', onMouseUp);\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return { drawing, clear, undo, draw, lines: paintRef.current.lines };\n  return {\n    ref: internalRef,\n    drawing,\n    clear,\n    undo,\n    draw,\n    lines: paintRef.current.lines\n  };\n}) as UsePaint;\n"],"names":["DEFAULT_BRUSH_RADIUS","Pointer","x","y","point","diff","angle","distance","angleRotated","Paint","radius","smooth","usePaint","params","target","isTarget","options","color","opacity","paintRef","useRef","drawing","setIsDrawing","useState","internalRef","useRefState","contextRef","draw","points","p1","p2","i","midPoint","clearCanvas","onMouseMove","useEvent","event","onMouseDown","onMouseUp","clear","undo","useEffect","element","getElement"],"mappings":"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"}
+{"version":3,"file":"usePaint.cjs","sources":["../../../../src/hooks/usePaint/usePaint.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\nconst DEFAULT_BRUSH_RADIUS = 10;\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport class Pointer implements Point {\n  x: number;\n\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n\n  update(point: Point) {\n    this.x = point.x;\n    this.y = point.y;\n  }\n\n  getDifferenceTo(point: Point) {\n    return new Pointer(this.x - point.x, this.y - point.y);\n  }\n\n  getDistanceTo(point: Point) {\n    const diff = this.getDifferenceTo(point);\n    return Math.sqrt(diff.x ** 2 + diff.y ** 2);\n  }\n\n  getAngleTo(point: Point) {\n    const diff = this.getDifferenceTo(point);\n    return Math.atan2(diff.y, diff.x);\n  }\n\n  equalsTo(point: Point) {\n    return this.x === point.x && this.y === point.y;\n  }\n\n  moveByAngle(\n    // The angle in radians\n    angle: number,\n    // How much the point should be moved\n    distance: number\n  ) {\n    // Rotate the angle based on the browser coordinate system ([0,0] in the top left)\n    const angleRotated = angle + Math.PI / 2;\n\n    this.x += Math.sin(angleRotated) * distance;\n    this.y -= Math.cos(angleRotated) * distance;\n\n    return this;\n  }\n}\n\nexport class Paint {\n  pointer: Pointer;\n\n  brush: Pointer;\n\n  radius: number;\n\n  smooth: boolean = false;\n\n  points: Point[] = [];\n\n  lines: { points: Point[]; color: string; radius: number; opacity: number }[] = [];\n\n  constructor({ x, y, radius, smooth }: { x: number; y: number; radius: number; smooth: boolean }) {\n    this.smooth = smooth;\n    this.pointer = new Pointer(x, y);\n    this.brush = new Pointer(x, y);\n    this.radius = radius;\n    this.points = [];\n    this.lines = [];\n  }\n\n  getBrushCoordinates() {\n    return {\n      x: this.brush.x,\n      y: this.brush.y\n    };\n  }\n\n  getPointerCoordinates() {\n    return {\n      x: this.pointer.x,\n      y: this.pointer.y\n    };\n  }\n\n  update(point: Point) {\n    if (this.pointer.equalsTo(point)) return false;\n    this.pointer.update(point);\n\n    if (!this.smooth) {\n      this.brush.update(point);\n      this.points.push(this.getBrushCoordinates());\n      return true;\n    }\n\n    const distance = this.pointer.getDistanceTo(this.brush);\n    const angle = this.pointer.getAngleTo(this.brush);\n    const isOutside = Math.round((distance - this.radius) * 10) / 10 > 0;\n\n    if (isOutside) {\n      const angleRotated = angle + Math.PI / 2;\n      this.brush.update({\n        x: this.brush.x + Math.sin(angleRotated) * (distance - this.radius),\n        y: this.brush.y - Math.cos(angleRotated) * (distance - this.radius)\n      });\n      this.points.push(this.getBrushCoordinates());\n      return true;\n    }\n\n    return false;\n  }\n}\n\nexport interface UsePaintOptions {\n  /** Brush color */\n  color?: string;\n  /** Initial lines */\n  initialLines?: Paint['lines'];\n  /** Brush opacity */\n  opacity?: number;\n  /** Brush radius */\n  radius?: number;\n  /** Smooth brush movement */\n  smooth?: boolean;\n  /** Callback when the mouse is down */\n  onMouseDown?: (event: MouseEvent, paint: Paint) => void;\n  /** Callback when the mouse is moved */\n  onMouseMove?: (event: MouseEvent, paint: Paint) => void;\n  /** Callback when the mouse is up */\n  onMouseUp?: (event: MouseEvent, paint: Paint) => void;\n}\n\nexport interface UsePaintReturn {\n  drawing: boolean;\n  lines: Paint['lines'];\n  clear: () => void;\n  draw: (points: Point[], color: string, opacity: number, radius: number) => void;\n  undo: () => void;\n}\n\nexport interface UsePaint {\n  (target: HookTarget, options?: UsePaintOptions): UsePaintReturn;\n\n  <Target extends HTMLCanvasElement>(\n    options?: UsePaintOptions,\n    target?: never\n  ): UsePaintReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name usePaint\n * @description - Hook that allows you to draw in a specific area\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element to be painted\n * @param {UsePaintOptions} [options] The options to be used\n * @returns {UsePaintReturn} An object containing the current pencil options and functions to interact with the paint\n *\n * @example\n * const drawing = usePaint(canvasRef);\n *\n * @overload\n * @param {UsePaintOptions} [options] The options to be used\n * @returns {UsePaintReturn & { ref: StateRef<HTMLCanvasElement> }} An object containing the current pencil options and functions to interact with the paint\n *\n * @example\n * const { ref, drawing } = usePaint();\n */\nexport const usePaint = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UsePaintOptions) ?? {};\n\n  const color = options?.color ?? 'black';\n  const opacity = options?.opacity ?? 1;\n  const radius = options?.radius ?? DEFAULT_BRUSH_RADIUS;\n\n  const paintRef = useRef<Paint>(\n    new Paint({\n      x: 0,\n      y: 0,\n      radius: options?.radius ?? DEFAULT_BRUSH_RADIUS,\n      smooth: options?.smooth ?? false\n    })\n  );\n  const [drawing, setIsDrawing] = useState(false);\n  const internalRef = useRefState<HTMLCanvasElement>();\n  const contextRef = useRef<CanvasRenderingContext2D | null>(null);\n\n  const draw = (points: Point[], color: string, opacity: number, radius: number) => {\n    if (!contextRef.current) return;\n\n    contextRef.current.globalAlpha = opacity;\n    contextRef.current.strokeStyle = color;\n    contextRef.current.lineWidth = radius * 2;\n    contextRef.current.lineCap = 'round';\n    contextRef.current.lineJoin = 'round';\n\n    let p1 = points[0];\n    let p2 = points[1];\n\n    contextRef.current.beginPath();\n\n    for (let i = 1; i < points.length; i += 1) {\n      const midPoint = {\n        x: p1.x + (p2.x - p1.x) / 2,\n        y: p1.y + (p2.y - p1.y) / 2\n      };\n      contextRef.current.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);\n      p1 = points[i];\n      p2 = points[i + 1];\n    }\n    contextRef.current.lineTo(p1.x, p1.y);\n    contextRef.current.stroke();\n  };\n\n  const clearCanvas = () => {\n    if (!contextRef.current) return;\n    contextRef.current.clearRect(\n      0,\n      0,\n      contextRef.current.canvas.width,\n      contextRef.current.canvas.height\n    );\n  };\n\n  const onMouseMove = useEvent((event: MouseEvent) => {\n    if (!drawing) return;\n    options?.onMouseMove?.(event, paintRef.current);\n\n    const point = { x: event.offsetX, y: event.offsetY };\n\n    const isUpdated = paintRef.current.update(point);\n\n    if (!isUpdated) return;\n    if (!contextRef.current) return;\n    clearCanvas();\n    contextRef.current.clearRect(\n      0,\n      0,\n      contextRef.current.canvas.width,\n      contextRef.current.canvas.height\n    );\n\n    // const brush = paintRef.current.getBrushCoordinates();\n    // // Draw brush point\n    // contextRef.current.beginPath();\n    // contextRef.current.fillStyle = 'red';\n    // contextRef.current.arc(brush.x, brush.y, radius, 0, Math.PI * 2, true);\n    // contextRef.current.fill();\n\n    // // Draw the lazy radius.\n    // contextRef.current.beginPath();\n    // contextRef.current.strokeStyle = '#ccc';\n    // contextRef.current.arc(brush.x, brush.y, radius * 2, 0, Math.PI * 2, true);\n    // contextRef.current.stroke();\n\n    paintRef.current.lines.forEach(({ points, color, opacity, radius }) =>\n      draw(points, color, opacity, radius)\n    );\n    draw(paintRef.current.points, color, opacity, radius);\n  });\n\n  const onMouseDown = useEvent((event: MouseEvent) => {\n    if (!contextRef.current) return;\n\n    const point = { x: event.offsetX, y: event.offsetY };\n    paintRef.current.brush.update(point);\n    paintRef.current.points.push(point);\n    draw(paintRef.current.points, color, opacity, radius);\n\n    options?.onMouseDown?.(event, paintRef.current);\n    setIsDrawing(true);\n  });\n\n  const onMouseUp = useEvent((event: MouseEvent) => {\n    if (!contextRef.current) return;\n\n    if (paintRef.current.points.length) {\n      paintRef.current.lines.push({\n        points: paintRef.current.points,\n        color,\n        opacity,\n        radius\n      });\n      paintRef.current.points = [];\n    }\n\n    options?.onMouseUp?.(event, paintRef.current);\n    setIsDrawing(false);\n  });\n\n  const clear = () => {\n    if (!contextRef.current) return;\n    clearCanvas();\n    paintRef.current.lines = [];\n    paintRef.current.points = [];\n  };\n\n  const undo = () => {\n    if (!contextRef.current) return;\n    clearCanvas();\n\n    paintRef.current.lines.pop();\n    paintRef.current.lines.forEach(({ points, color, opacity, radius }) =>\n      draw(points, color, opacity, radius)\n    );\n  };\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (\n      target ? isTarget.getElement(target) : internalRef.current\n    ) as HTMLCanvasElement;\n    if (!element) return;\n    contextRef.current = element.getContext('2d');\n\n    if (options?.initialLines) {\n      paintRef.current.lines = options.initialLines;\n      options.initialLines.forEach(({ points, color, opacity, radius }) =>\n        draw(points, color, opacity, radius)\n      );\n    }\n\n    element.addEventListener('mousedown', onMouseDown);\n    element.addEventListener('mousemove', onMouseMove);\n    element.addEventListener('mouseup', onMouseUp);\n\n    return () => {\n      if (!element) return;\n      element.removeEventListener('mousedown', onMouseDown);\n      element.removeEventListener('mousemove', onMouseMove);\n      element.removeEventListener('mouseup', onMouseUp);\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return { drawing, clear, undo, draw, lines: paintRef.current.lines };\n  return {\n    ref: internalRef,\n    drawing,\n    clear,\n    undo,\n    draw,\n    lines: paintRef.current.lines\n  };\n}) as UsePaint;\n"],"names":["DEFAULT_BRUSH_RADIUS","Pointer","x","y","point","diff","angle","distance","angleRotated","Paint","radius","smooth","usePaint","params","target","isTarget","options","color","opacity","paintRef","useRef","drawing","setIsDrawing","useState","internalRef","useRefState","contextRef","draw","points","p1","p2","i","midPoint","clearCanvas","onMouseMove","useEvent","event","onMouseDown","onMouseUp","clear","undo","useEffect","element"],"mappings":"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"}

package/dist/cjs/hooks/useParallax/useParallax.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),A=require("../useDeviceOrientation/useDeviceOrientation.cjs"),D=require("../useOrientation/useOrientation.cjs"),x=require("../useRefState/useRefState.cjs"),B=require("../../utils/helpers/isTarget.cjs"),C=require("../../utils/helpers/getElement.cjs"),M=(...n)=>{const o=B.isTarget(n[0])?n[0]:void 0,p=n[1]?n[1]:n[0],i=x.useRefState(),s=D.useOrientation(),e=A.useDeviceOrientation(),{deviceOrientationRollAdjust:b=a=>a,deviceOrientationTiltAdjust:f=a=>a,mouseRollAdjust:y=a=>a,mouseTiltAdjust:O=a=>a}=p??{},[l,h]=g.useState({roll:0,tilt:0,source:"mouse"});return g.useEffect(()=>{if(!o&&!i.state)return;const a=o?C.getElement(o):i.current;if(!a)return;const v=d=>{const{left:R,top:T}=a.getBoundingClientRect(),k=R+window.scrollX,w=T+window.scrollY,u=()=>e.supported&&(e.value.alpha||e.value.gamma)?"deviceOrientation":"mouse",q=()=>{if(u()==="deviceOrientation"){let t;switch(s.value.orientationType){case"landscape-primary":t=e.value.gamma/90;break;case"landscape-secondary":t=-e.value.gamma/90;break;case"portrait-primary":t=-e.value.beta/90;break;case"portrait-secondary":t=e.value.beta/90;break;default:t=-e.value.beta/90}return b(t)}else{const t=d.pageY-w,r=a.getBoundingClientRect().height,c=-(t-r/2)/r;return y(c)}},S=()=>{if(u()==="deviceOrientation"){let t;switch(s.value.orientationType){case"landscape-primary":t=e.value.beta/90;break;case"landscape-secondary":t=-e.value.beta/90;break;case"portrait-primary":t=e.value.gamma/90;break;case"portrait-secondary":t=-e.value.gamma/90;break;default:t=e.value.gamma/90}return f(t)}else{const t=d.pageX-k,r=a.getBoundingClientRect().width,c=(t-r/2)/r;return O(c)}},j=u(),E=q(),P=S();h({roll:E,source:j,tilt:P})};return document.addEventListener("mousemove",v),()=>{document.removeEventListener("mousemove",v)}},[o,i.state,s.value.angle,s.value.orientationType,e.value.gamma,e.value.beta,e.value.alpha,e.value.absolute]),o?{value:l}:{ref:i,value:l}};exports.useParallax=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),E=require("../useDeviceOrientation/useDeviceOrientation.cjs"),x=require("../useOrientation/useOrientation.cjs"),B=require("../useRefState/useRefState.cjs"),p=require("../../utils/helpers/isTarget.cjs"),C=(...n)=>{const o=p.isTarget(n[0])?n[0]:void 0,b=n[1]?n[1]:n[0],i=B.useRefState(),s=x.useOrientation(),e=E.useDeviceOrientation(),{deviceOrientationRollAdjust:f=a=>a,deviceOrientationTiltAdjust:y=a=>a,mouseRollAdjust:O=a=>a,mouseTiltAdjust:h=a=>a}=b??{},[l,T]=g.useState({roll:0,tilt:0,source:"mouse"});return g.useEffect(()=>{if(!o&&!i.state)return;const a=o?p.isTarget.getElement(o):i.current;if(!a)return;const v=d=>{const{left:R,top:k}=a.getBoundingClientRect(),w=R+window.scrollX,S=k+window.scrollY,u=()=>e.supported&&(e.value.alpha||e.value.gamma)?"deviceOrientation":"mouse",j=()=>{if(u()==="deviceOrientation"){let t;switch(s.value.orientationType){case"landscape-primary":t=e.value.gamma/90;break;case"landscape-secondary":t=-e.value.gamma/90;break;case"portrait-primary":t=-e.value.beta/90;break;case"portrait-secondary":t=e.value.beta/90;break;default:t=-e.value.beta/90}return f(t)}else{const t=d.pageY-S,r=a.getBoundingClientRect().height,c=-(t-r/2)/r;return O(c)}},q=()=>{if(u()==="deviceOrientation"){let t;switch(s.value.orientationType){case"landscape-primary":t=e.value.beta/90;break;case"landscape-secondary":t=-e.value.beta/90;break;case"portrait-primary":t=e.value.gamma/90;break;case"portrait-secondary":t=-e.value.gamma/90;break;default:t=e.value.gamma/90}return y(t)}else{const t=d.pageX-w,r=a.getBoundingClientRect().width,c=(t-r/2)/r;return h(c)}},P=u(),A=j(),D=q();T({roll:A,source:P,tilt:D})};return document.addEventListener("mousemove",v),()=>{document.removeEventListener("mousemove",v)}},[o,i.state,s.value.angle,s.value.orientationType,e.value.gamma,e.value.beta,e.value.alpha,e.value.absolute]),o?{value:l}:{ref:i,value:l}};exports.useParallax=C;
 //# sourceMappingURL=useParallax.cjs.map

package/dist/cjs/hooks/useParallax/useParallax.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useParallax.cjs","sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useDeviceOrientation } from '../useDeviceOrientation/useDeviceOrientation';\nimport { useOrientation } from '../useOrientation/useOrientation';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use parallax value type */\nexport interface UseParallaxValue {\n  /** Roll value. Scaled to `-0.5 ~ 0.5` */\n  roll: number;\n  /** Sensor source, can be `mouse` or `deviceOrientation` */\n  source: 'deviceOrientation' | 'mouse';\n  /** Tilt value. Scaled to `-0.5 ~ 0.5` */\n  tilt: number;\n}\n\n/** The use parallax options type */\nexport interface UseParallaxOptions {\n  /** Device orientation roll adjust function */\n  deviceOrientationRollAdjust?: (value: number) => number;\n  /** Device orientation tilt adjust function */\n  deviceOrientationTiltAdjust?: (value: number) => number;\n  /** Mouse roll adjust function */\n  mouseRollAdjust?: (value: number) => number;\n  /** Mouse tilt adjust function */\n  mouseTiltAdjust?: (value: number) => number;\n}\n\ninterface UseParallaxReturn {\n  value: UseParallaxValue;\n}\n\nexport interface UseParallax {\n  (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;\n\n  <Target extends Element>(\n    options?: UseParallaxOptions,\n    target?: never\n  ): UseParallaxReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useParallax\n * @description - Hook to help create parallax effect\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn} An object of parallax values\n *\n * @example\n * const { value } = useParallax(ref);\n *\n * @overload\n * @template Target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn & { ref: StateRef<Target> }} An object of parallax values\n *\n * @example\n * const { ref, value } = useParallax();\n */\nexport const useParallax = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (params[1] ? params[1] : params[0]) as UseParallaxOptions | undefined;\n\n  const internalRef = useRefState<Element>();\n\n  const screenOrientation = useOrientation();\n  const deviceOrientation = useDeviceOrientation();\n\n  const {\n    deviceOrientationRollAdjust = (value) => value,\n    deviceOrientationTiltAdjust = (value) => value,\n    mouseRollAdjust = (value) => value,\n    mouseTiltAdjust = (value) => value\n  } = (options ?? {}) as UseParallaxOptions;\n\n  const [value, setValue] = useState({\n    roll: 0,\n    tilt: 0,\n    source: 'mouse'\n  });\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onMouseMove = (event: MouseEvent) => {\n      const { left, top } = element.getBoundingClientRect();\n      const elementPositionX = left + window.scrollX;\n      const elementPositionY = top + window.scrollY;\n\n      const getSource = () => {\n        const isDeviceOrientation =\n          deviceOrientation.supported &&\n          (deviceOrientation.value.alpha || deviceOrientation.value.gamma);\n\n        if (isDeviceOrientation) return 'deviceOrientation';\n        return 'mouse';\n      };\n\n      const getRoll = () => {\n        const source = getSource();\n        if (source === 'deviceOrientation') {\n          let value: number;\n          switch (screenOrientation.value.orientationType) {\n            case 'landscape-primary':\n              value = deviceOrientation.value.gamma! / 90;\n              break;\n            case 'landscape-secondary':\n              value = -deviceOrientation.value.gamma! / 90;\n              break;\n            case 'portrait-primary':\n              value = -deviceOrientation.value.beta! / 90;\n              break;\n            case 'portrait-secondary':\n              value = deviceOrientation.value.beta! / 90;\n              break;\n            default:\n              value = -deviceOrientation.value.beta! / 90;\n          }\n          return deviceOrientationRollAdjust(value);\n        } else {\n          const y = event.pageY - elementPositionY;\n          const height = element.getBoundingClientRect().height;\n          const value = -(y - height / 2) / height;\n          return mouseRollAdjust(value);\n        }\n      };\n\n      const getTilt = () => {\n        const source = getSource();\n        if (source === 'deviceOrientation') {\n          let value: number;\n          switch (screenOrientation.value.orientationType) {\n            case 'landscape-primary':\n              value = deviceOrientation.value.beta! / 90;\n              break;\n            case 'landscape-secondary':\n              value = -deviceOrientation.value.beta! / 90;\n              break;\n            case 'portrait-primary':\n              value = deviceOrientation.value.gamma! / 90;\n              break;\n            case 'portrait-secondary':\n              value = -deviceOrientation.value.gamma! / 90;\n              break;\n            default:\n              value = deviceOrientation.value.gamma! / 90;\n          }\n          return deviceOrientationTiltAdjust(value);\n        } else {\n          const x = event.pageX - elementPositionX;\n          const width = element.getBoundingClientRect().width;\n          const value = (x - width / 2) / width;\n          return mouseTiltAdjust(value);\n        }\n      };\n\n      const source = getSource();\n      const roll = getRoll();\n      const tilt = getTilt();\n\n      setValue({\n        roll,\n        source,\n        tilt\n      });\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n    };\n  }, [\n    target,\n    internalRef.state,\n    screenOrientation.value.angle,\n    screenOrientation.value.orientationType,\n    deviceOrientation.value.gamma,\n    deviceOrientation.value.beta,\n    deviceOrientation.value.alpha,\n    deviceOrientation.value.absolute\n  ]);\n\n  if (target) return { value };\n\n  return {\n    ref: internalRef,\n    value\n  };\n}) as UseParallax;\n"],"names":["useParallax","params","target","isTarget","options","internalRef","useRefState","screenOrientation","useOrientation","deviceOrientation","useDeviceOrientation","deviceOrientationRollAdjust","value","deviceOrientationTiltAdjust","mouseRollAdjust","mouseTiltAdjust","setValue","useState","useEffect","element","getElement","onMouseMove","event","left","top","elementPositionX","elementPositionY","getSource","getRoll","y","height","getTilt","x","width","source","roll","tilt"],"mappings":"mWAuEaA,EAAe,IAAIC,IAAkB,CAChD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWH,EAAO,CAAC,EAAIA,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE3CI,EAAcC,EAAAA,YAAA,EAEdC,EAAoBC,EAAAA,eAAA,EACpBC,EAAoBC,EAAAA,qBAAA,EAEpB,CACJ,4BAAAC,EAA+BC,GAAUA,EACzC,4BAAAC,EAA+BD,GAAUA,EACzC,gBAAAE,EAAmBF,GAAUA,EAC7B,gBAAAG,EAAmBH,GAAUA,CAAA,EAC1BR,GAAW,CAAA,EAEV,CAACQ,EAAOI,CAAQ,EAAIC,WAAS,CACjC,KAAM,EACN,KAAM,EACN,OAAQ,OAAA,CACT,EA0GD,OAxGAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAAChB,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMc,EAAWjB,EAASkB,EAAAA,WAAWlB,CAAM,EAAIG,EAAY,QAC3D,GAAI,CAACc,EAAS,OAEd,MAAME,EAAeC,GAAsB,CACzC,KAAM,CAAE,KAAAC,EAAM,IAAAC,GAAQL,EAAQ,sBAAA,EACxBM,EAAmBF,EAAO,OAAO,QACjCG,EAAmBF,EAAM,OAAO,QAEhCG,EAAY,IAEdlB,EAAkB,YACjBA,EAAkB,MAAM,OAASA,EAAkB,MAAM,OAE5B,oBACzB,QAGHmB,EAAU,IAAM,CAEpB,GADeD,EAAA,IACA,oBAAqB,CAClC,IAAIf,EACJ,OAAQL,EAAkB,MAAM,gBAAA,CAC9B,IAAK,oBACHK,EAAQH,EAAkB,MAAM,MAAS,GACzC,MACF,IAAK,sBACHG,EAAQ,CAACH,EAAkB,MAAM,MAAS,GAC1C,MACF,IAAK,mBACHG,EAAQ,CAACH,EAAkB,MAAM,KAAQ,GACzC,MACF,IAAK,qBACHG,EAAQH,EAAkB,MAAM,KAAQ,GACxC,MACF,QACEG,EAAQ,CAACH,EAAkB,MAAM,KAAQ,EAAA,CAE7C,OAAOE,EAA4BC,CAAK,CAAA,KACnC,CACL,MAAMiB,EAAIP,EAAM,MAAQI,EAClBI,EAASX,EAAQ,sBAAA,EAAwB,OACzCP,EAAQ,EAAEiB,EAAIC,EAAS,GAAKA,EAClC,OAAOhB,EAAgBF,CAAK,CAAA,CAC9B,EAGImB,EAAU,IAAM,CAEpB,GADeJ,EAAA,IACA,oBAAqB,CAClC,IAAIf,EACJ,OAAQL,EAAkB,MAAM,gBAAA,CAC9B,IAAK,oBACHK,EAAQH,EAAkB,MAAM,KAAQ,GACxC,MACF,IAAK,sBACHG,EAAQ,CAACH,EAAkB,MAAM,KAAQ,GACzC,MACF,IAAK,mBACHG,EAAQH,EAAkB,MAAM,MAAS,GACzC,MACF,IAAK,qBACHG,EAAQ,CAACH,EAAkB,MAAM,MAAS,GAC1C,MACF,QACEG,EAAQH,EAAkB,MAAM,MAAS,EAAA,CAE7C,OAAOI,EAA4BD,CAAK,CAAA,KACnC,CACL,MAAMoB,EAAIV,EAAM,MAAQG,EAClBQ,EAAQd,EAAQ,sBAAA,EAAwB,MACxCP,GAASoB,EAAIC,EAAQ,GAAKA,EAChC,OAAOlB,EAAgBH,CAAK,CAAA,CAC9B,EAGIsB,EAASP,EAAA,EACTQ,EAAOP,EAAA,EACPQ,EAAOL,EAAA,EAEbf,EAAS,CACP,KAAAmB,EACA,OAAAD,EACA,KAAAE,CAAA,CACD,CAAA,EAGH,gBAAS,iBAAiB,YAAaf,CAAW,EAC3C,IAAM,CACX,SAAS,oBAAoB,YAAaA,CAAW,CAAA,CACvD,EACC,CACDnB,EACAG,EAAY,MACZE,EAAkB,MAAM,MACxBA,EAAkB,MAAM,gBACxBE,EAAkB,MAAM,MACxBA,EAAkB,MAAM,KACxBA,EAAkB,MAAM,MACxBA,EAAkB,MAAM,QAAA,CACzB,EAEGP,EAAe,CAAE,MAAAU,CAAA,EAEd,CACL,IAAKP,EACL,MAAAO,CAAA,CAEJ"}
+{"version":3,"file":"useParallax.cjs","sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useDeviceOrientation } from '../useDeviceOrientation/useDeviceOrientation';\nimport { useOrientation } from '../useOrientation/useOrientation';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use parallax value type */\nexport interface UseParallaxValue {\n  /** Roll value. Scaled to `-0.5 ~ 0.5` */\n  roll: number;\n  /** Sensor source, can be `mouse` or `deviceOrientation` */\n  source: 'deviceOrientation' | 'mouse';\n  /** Tilt value. Scaled to `-0.5 ~ 0.5` */\n  tilt: number;\n}\n\n/** The use parallax options type */\nexport interface UseParallaxOptions {\n  /** Device orientation roll adjust function */\n  deviceOrientationRollAdjust?: (value: number) => number;\n  /** Device orientation tilt adjust function */\n  deviceOrientationTiltAdjust?: (value: number) => number;\n  /** Mouse roll adjust function */\n  mouseRollAdjust?: (value: number) => number;\n  /** Mouse tilt adjust function */\n  mouseTiltAdjust?: (value: number) => number;\n}\n\ninterface UseParallaxReturn {\n  value: UseParallaxValue;\n}\n\nexport interface UseParallax {\n  (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;\n\n  <Target extends Element>(\n    options?: UseParallaxOptions,\n    target?: never\n  ): UseParallaxReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useParallax\n * @description - Hook to help create parallax effect\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn} An object of parallax values\n *\n * @example\n * const { value } = useParallax(ref);\n *\n * @overload\n * @template Target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn & { ref: StateRef<Target> }} An object of parallax values\n *\n * @example\n * const { ref, value } = useParallax();\n */\nexport const useParallax = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (params[1] ? params[1] : params[0]) as UseParallaxOptions | undefined;\n\n  const internalRef = useRefState<Element>();\n\n  const screenOrientation = useOrientation();\n  const deviceOrientation = useDeviceOrientation();\n\n  const {\n    deviceOrientationRollAdjust = (value) => value,\n    deviceOrientationTiltAdjust = (value) => value,\n    mouseRollAdjust = (value) => value,\n    mouseTiltAdjust = (value) => value\n  } = (options ?? {}) as UseParallaxOptions;\n\n  const [value, setValue] = useState({\n    roll: 0,\n    tilt: 0,\n    source: 'mouse'\n  });\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onMouseMove = (event: MouseEvent) => {\n      const { left, top } = element.getBoundingClientRect();\n      const elementPositionX = left + window.scrollX;\n      const elementPositionY = top + window.scrollY;\n\n      const getSource = () => {\n        const isDeviceOrientation =\n          deviceOrientation.supported &&\n          (deviceOrientation.value.alpha || deviceOrientation.value.gamma);\n\n        if (isDeviceOrientation) return 'deviceOrientation';\n        return 'mouse';\n      };\n\n      const getRoll = () => {\n        const source = getSource();\n        if (source === 'deviceOrientation') {\n          let value: number;\n          switch (screenOrientation.value.orientationType) {\n            case 'landscape-primary':\n              value = deviceOrientation.value.gamma! / 90;\n              break;\n            case 'landscape-secondary':\n              value = -deviceOrientation.value.gamma! / 90;\n              break;\n            case 'portrait-primary':\n              value = -deviceOrientation.value.beta! / 90;\n              break;\n            case 'portrait-secondary':\n              value = deviceOrientation.value.beta! / 90;\n              break;\n            default:\n              value = -deviceOrientation.value.beta! / 90;\n          }\n          return deviceOrientationRollAdjust(value);\n        } else {\n          const y = event.pageY - elementPositionY;\n          const height = element.getBoundingClientRect().height;\n          const value = -(y - height / 2) / height;\n          return mouseRollAdjust(value);\n        }\n      };\n\n      const getTilt = () => {\n        const source = getSource();\n        if (source === 'deviceOrientation') {\n          let value: number;\n          switch (screenOrientation.value.orientationType) {\n            case 'landscape-primary':\n              value = deviceOrientation.value.beta! / 90;\n              break;\n            case 'landscape-secondary':\n              value = -deviceOrientation.value.beta! / 90;\n              break;\n            case 'portrait-primary':\n              value = deviceOrientation.value.gamma! / 90;\n              break;\n            case 'portrait-secondary':\n              value = -deviceOrientation.value.gamma! / 90;\n              break;\n            default:\n              value = deviceOrientation.value.gamma! / 90;\n          }\n          return deviceOrientationTiltAdjust(value);\n        } else {\n          const x = event.pageX - elementPositionX;\n          const width = element.getBoundingClientRect().width;\n          const value = (x - width / 2) / width;\n          return mouseTiltAdjust(value);\n        }\n      };\n\n      const source = getSource();\n      const roll = getRoll();\n      const tilt = getTilt();\n\n      setValue({\n        roll,\n        source,\n        tilt\n      });\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n    };\n  }, [\n    target,\n    internalRef.state,\n    screenOrientation.value.angle,\n    screenOrientation.value.orientationType,\n    deviceOrientation.value.gamma,\n    deviceOrientation.value.beta,\n    deviceOrientation.value.alpha,\n    deviceOrientation.value.absolute\n  ]);\n\n  if (target) return { value };\n\n  return {\n    ref: internalRef,\n    value\n  };\n}) as UseParallax;\n"],"names":["useParallax","params","target","isTarget","options","internalRef","useRefState","screenOrientation","useOrientation","deviceOrientation","useDeviceOrientation","deviceOrientationRollAdjust","value","deviceOrientationTiltAdjust","mouseRollAdjust","mouseTiltAdjust","setValue","useState","useEffect","element","onMouseMove","event","left","top","elementPositionX","elementPositionY","getSource","getRoll","y","height","getTilt","x","width","source","roll","tilt"],"mappings":"mTAuEaA,EAAe,IAAIC,IAAkB,CAChD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWH,EAAO,CAAC,EAAIA,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE3CI,EAAcC,EAAAA,YAAA,EAEdC,EAAoBC,EAAAA,eAAA,EACpBC,EAAoBC,EAAAA,qBAAA,EAEpB,CACJ,4BAAAC,EAA+BC,GAAUA,EACzC,4BAAAC,EAA+BD,GAAUA,EACzC,gBAAAE,EAAmBF,GAAUA,EAC7B,gBAAAG,EAAmBH,GAAUA,CAAA,EAC1BR,GAAW,CAAA,EAEV,CAACQ,EAAOI,CAAQ,EAAIC,WAAS,CACjC,KAAM,EACN,KAAM,EACN,OAAQ,OAAA,CACT,EA0GD,OAxGAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAAChB,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMc,EAAWjB,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,QACpE,GAAI,CAACc,EAAS,OAEd,MAAMC,EAAeC,GAAsB,CACzC,KAAM,CAAE,KAAAC,EAAM,IAAAC,GAAQJ,EAAQ,sBAAA,EACxBK,EAAmBF,EAAO,OAAO,QACjCG,EAAmBF,EAAM,OAAO,QAEhCG,EAAY,IAEdjB,EAAkB,YACjBA,EAAkB,MAAM,OAASA,EAAkB,MAAM,OAE5B,oBACzB,QAGHkB,EAAU,IAAM,CAEpB,GADeD,EAAA,IACA,oBAAqB,CAClC,IAAId,EACJ,OAAQL,EAAkB,MAAM,gBAAA,CAC9B,IAAK,oBACHK,EAAQH,EAAkB,MAAM,MAAS,GACzC,MACF,IAAK,sBACHG,EAAQ,CAACH,EAAkB,MAAM,MAAS,GAC1C,MACF,IAAK,mBACHG,EAAQ,CAACH,EAAkB,MAAM,KAAQ,GACzC,MACF,IAAK,qBACHG,EAAQH,EAAkB,MAAM,KAAQ,GACxC,MACF,QACEG,EAAQ,CAACH,EAAkB,MAAM,KAAQ,EAAA,CAE7C,OAAOE,EAA4BC,CAAK,CAAA,KACnC,CACL,MAAMgB,EAAIP,EAAM,MAAQI,EAClBI,EAASV,EAAQ,sBAAA,EAAwB,OACzCP,EAAQ,EAAEgB,EAAIC,EAAS,GAAKA,EAClC,OAAOf,EAAgBF,CAAK,CAAA,CAC9B,EAGIkB,EAAU,IAAM,CAEpB,GADeJ,EAAA,IACA,oBAAqB,CAClC,IAAId,EACJ,OAAQL,EAAkB,MAAM,gBAAA,CAC9B,IAAK,oBACHK,EAAQH,EAAkB,MAAM,KAAQ,GACxC,MACF,IAAK,sBACHG,EAAQ,CAACH,EAAkB,MAAM,KAAQ,GACzC,MACF,IAAK,mBACHG,EAAQH,EAAkB,MAAM,MAAS,GACzC,MACF,IAAK,qBACHG,EAAQ,CAACH,EAAkB,MAAM,MAAS,GAC1C,MACF,QACEG,EAAQH,EAAkB,MAAM,MAAS,EAAA,CAE7C,OAAOI,EAA4BD,CAAK,CAAA,KACnC,CACL,MAAMmB,EAAIV,EAAM,MAAQG,EAClBQ,EAAQb,EAAQ,sBAAA,EAAwB,MACxCP,GAASmB,EAAIC,EAAQ,GAAKA,EAChC,OAAOjB,EAAgBH,CAAK,CAAA,CAC9B,EAGIqB,EAASP,EAAA,EACTQ,EAAOP,EAAA,EACPQ,EAAOL,EAAA,EAEbd,EAAS,CACP,KAAAkB,EACA,OAAAD,EACA,KAAAE,CAAA,CACD,CAAA,EAGH,gBAAS,iBAAiB,YAAaf,CAAW,EAC3C,IAAM,CACX,SAAS,oBAAoB,YAAaA,CAAW,CAAA,CACvD,EACC,CACDlB,EACAG,EAAY,MACZE,EAAkB,MAAM,MACxBA,EAAkB,MAAM,gBACxBE,EAAkB,MAAM,MACxBA,EAAkB,MAAM,KACxBA,EAAkB,MAAM,MACxBA,EAAkB,MAAM,QAAA,CACzB,EAEGP,EAAe,CAAE,MAAAU,CAAA,EAEd,CACL,IAAKP,EACL,MAAAO,CAAA,CAEJ"}

package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),v=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),m=require("../../utils/helpers/getElement.cjs"),I=(...n)=>{const i=typeof document<"u"&&"pictureInPictureEnabled"in document&&!!document.pictureInPictureEnabled,t=g.isTarget(n[0])?n[0]:void 0,r=(t?n[1]:n[0])??{},[a,u]=c.useState(!1),f=v.useRefState(),o=c.useRef(null),s=c.useRef(r);s.current=r;const l=async()=>{i&&o.current&&(await o.current.requestPictureInPicture(),u(!0),r.onEnter?.())},d=async()=>{i&&(await document.exitPictureInPicture(),u(!1),r.onExit?.())};c.useEffect(()=>{const e=t?m.getElement(t):f.current;if(!e)return;o.current=e;const P=()=>{u(!0),s.current.onEnter?.()},E=()=>{u(!1),s.current.onExit?.()};return e.addEventListener("enterpictureinpicture",P),e.addEventListener("leavepictureinpicture",E),()=>{e.removeEventListener("enterpictureinpicture",P),e.removeEventListener("leavepictureinpicture",E)}},[t]);const p={open:a,supported:i,enter:l,exit:d,toggle:async()=>{a?await d():await l()}};return t?p:{...p,ref:f}};exports.usePictureInPicture=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),g=require("../useRefState/useRefState.cjs"),v=require("../../utils/helpers/isTarget.cjs"),I=(...n)=>{const c=typeof document<"u"&&"pictureInPictureEnabled"in document&&!!document.pictureInPictureEnabled,t=v.isTarget(n[0])?n[0]:void 0,r=(t?n[1]:n[0])??{},[a,u]=i.useState(!1),f=g.useRefState(),o=i.useRef(null),s=i.useRef(r);s.current=r;const l=async()=>{c&&o.current&&(await o.current.requestPictureInPicture(),u(!0),r.onEnter?.())},d=async()=>{c&&(await document.exitPictureInPicture(),u(!1),r.onExit?.())};i.useEffect(()=>{const e=t?v.isTarget.getElement(t):f.current;if(!e)return;o.current=e;const P=()=>{u(!0),s.current.onEnter?.()},E=()=>{u(!1),s.current.onExit?.()};return e.addEventListener("enterpictureinpicture",P),e.addEventListener("leavepictureinpicture",E),()=>{e.removeEventListener("enterpictureinpicture",P),e.removeEventListener("leavepictureinpicture",E)}},[t]);const p={open:a,supported:c,enter:l,exit:d,toggle:async()=>{a?await d():await l()}};return t?p:{...p,ref:f}};exports.usePictureInPicture=I;
 //# sourceMappingURL=usePictureInPicture.cjs.map

package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePictureInPicture.cjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use picture in picture options type */\nexport interface UsePictureInPictureOptions {\n  /** The callback when Picture-in-Picture mode is entered */\n  onEnter?: () => void;\n  /** The callback when Picture-in-Picture mode is exited */\n  onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n  /** Whether Picture-in-Picture mode is currently active */\n  open: boolean;\n  /** Whether Picture-in-Picture mode is supported by the browser */\n  supported: boolean;\n  /** Request to enter Picture-in-Picture mode */\n  enter: () => Promise<void>;\n  /** Request to exit Picture-in-Picture mode */\n  exit: () => Promise<void>;\n  /** Toggle Picture-in-Picture mode */\n  toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n  (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n  (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n    ref: StateRef<HTMLVideoElement>;\n  };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n * @usage low\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n  const supported =\n    typeof document !== 'undefined' &&\n    'pictureInPictureEnabled' in document &&\n    !!document.pictureInPictureEnabled;\n\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n  const [open, setOpen] = useState(false);\n\n  const internalRef = useRefState<HTMLVideoElement>();\n  const elementRef = useRef<HTMLVideoElement>(null);\n  const onOptionsRef = useRef<UsePictureInPictureOptions>(options);\n  onOptionsRef.current = options;\n\n  const enter = async () => {\n    if (!supported) return;\n\n    if (!elementRef.current) return;\n\n    await elementRef.current.requestPictureInPicture();\n    setOpen(true);\n\n    options.onEnter?.();\n  };\n\n  const exit = async () => {\n    if (!supported) return;\n\n    await document.exitPictureInPicture();\n    setOpen(false);\n    options.onExit?.();\n  };\n\n  useEffect(() => {\n    const element = target ? (getElement(target) as HTMLVideoElement) : internalRef.current;\n    if (!element) return;\n\n    elementRef.current = element;\n\n    const onEnterPictureInPicture = () => {\n      setOpen(true);\n      onOptionsRef.current.onEnter?.();\n    };\n\n    const onLeavePictureInPicture = () => {\n      setOpen(false);\n      onOptionsRef.current.onExit?.();\n    };\n\n    element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);\n    element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);\n\n    return () => {\n      element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);\n      element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);\n    };\n  }, [target]);\n\n  const toggle = async () => {\n    if (open) await exit();\n    else await enter();\n  };\n\n  const value = {\n    open,\n    supported,\n    enter,\n    exit,\n    toggle\n  };\n\n  if (target) return value;\n  return { ...value, ref: internalRef };\n}) as UsePictureInPicture;\n"],"names":["usePictureInPicture","params","supported","target","isTarget","options","open","setOpen","useState","internalRef","useRefState","elementRef","useRef","onOptionsRef","enter","exit","useEffect","element","getElement","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":"mPAiEaA,EAAuB,IAAIC,IAAkB,CACxD,MAAMC,EACJ,OAAO,SAAa,KACpB,4BAA6B,UAC7B,CAAC,CAAC,SAAS,wBAEPC,EAAUC,EAAAA,SAASH,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CI,GAAYF,EAASF,EAAO,CAAC,EAAIA,EAAO,CAAC,IAAqC,CAAA,EAE9E,CAACK,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAEhCC,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAyB,IAAI,EAC1CC,EAAeD,EAAAA,OAAmCP,CAAO,EAC/DQ,EAAa,QAAUR,EAEvB,MAAMS,EAAQ,SAAY,CACnBZ,GAEAS,EAAW,UAEhB,MAAMA,EAAW,QAAQ,wBAAA,EACzBJ,EAAQ,EAAI,EAEZF,EAAQ,UAAA,EAAU,EAGdU,EAAO,SAAY,CAClBb,IAEL,MAAM,SAAS,qBAAA,EACfK,EAAQ,EAAK,EACbF,EAAQ,SAAA,EAAS,EAGnBW,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAUd,EAAUe,EAAAA,WAAWf,CAAM,EAAyBM,EAAY,QAChF,GAAI,CAACQ,EAAS,OAEdN,EAAW,QAAUM,EAErB,MAAME,EAA0B,IAAM,CACpCZ,EAAQ,EAAI,EACZM,EAAa,QAAQ,UAAA,CAAU,EAG3BO,EAA0B,IAAM,CACpCb,EAAQ,EAAK,EACbM,EAAa,QAAQ,SAAA,CAAS,EAGhC,OAAAI,EAAQ,iBAAiB,wBAAyBE,CAAuB,EACzEF,EAAQ,iBAAiB,wBAAyBG,CAAuB,EAElE,IAAM,CACXH,EAAQ,oBAAoB,wBAAyBE,CAAuB,EAC5EF,EAAQ,oBAAoB,wBAAyBG,CAAuB,CAAA,CAC9E,EACC,CAACjB,CAAM,CAAC,EAOX,MAAMkB,EAAQ,CACZ,KAAAf,EACA,UAAAJ,EACA,MAAAY,EACA,KAAAC,EACA,OAVa,SAAY,CACrBT,QAAYS,EAAA,QACLD,EAAA,CAAM,CAQjB,EAGF,OAAIX,EAAekB,EACZ,CAAE,GAAGA,EAAO,IAAKZ,CAAA,CAC1B"}
+{"version":3,"file":"usePictureInPicture.cjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use picture in picture options type */\nexport interface UsePictureInPictureOptions {\n  /** The callback when Picture-in-Picture mode is entered */\n  onEnter?: () => void;\n  /** The callback when Picture-in-Picture mode is exited */\n  onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n  /** Whether Picture-in-Picture mode is currently active */\n  open: boolean;\n  /** Whether Picture-in-Picture mode is supported by the browser */\n  supported: boolean;\n  /** Request to enter Picture-in-Picture mode */\n  enter: () => Promise<void>;\n  /** Request to exit Picture-in-Picture mode */\n  exit: () => Promise<void>;\n  /** Toggle Picture-in-Picture mode */\n  toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n  (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n  (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n    ref: StateRef<HTMLVideoElement>;\n  };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n * @usage low\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n  const supported =\n    typeof document !== 'undefined' &&\n    'pictureInPictureEnabled' in document &&\n    !!document.pictureInPictureEnabled;\n\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n  const [open, setOpen] = useState(false);\n\n  const internalRef = useRefState<HTMLVideoElement>();\n  const elementRef = useRef<HTMLVideoElement>(null);\n  const onOptionsRef = useRef<UsePictureInPictureOptions>(options);\n  onOptionsRef.current = options;\n\n  const enter = async () => {\n    if (!supported) return;\n\n    if (!elementRef.current) return;\n\n    await elementRef.current.requestPictureInPicture();\n    setOpen(true);\n\n    options.onEnter?.();\n  };\n\n  const exit = async () => {\n    if (!supported) return;\n\n    await document.exitPictureInPicture();\n    setOpen(false);\n    options.onExit?.();\n  };\n\n  useEffect(() => {\n    const element = target\n      ? (isTarget.getElement(target) as HTMLVideoElement)\n      : internalRef.current;\n    if (!element) return;\n\n    elementRef.current = element;\n\n    const onEnterPictureInPicture = () => {\n      setOpen(true);\n      onOptionsRef.current.onEnter?.();\n    };\n\n    const onLeavePictureInPicture = () => {\n      setOpen(false);\n      onOptionsRef.current.onExit?.();\n    };\n\n    element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);\n    element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);\n\n    return () => {\n      element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);\n      element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);\n    };\n  }, [target]);\n\n  const toggle = async () => {\n    if (open) await exit();\n    else await enter();\n  };\n\n  const value = {\n    open,\n    supported,\n    enter,\n    exit,\n    toggle\n  };\n\n  if (target) return value;\n  return { ...value, ref: internalRef };\n}) as UsePictureInPicture;\n"],"names":["usePictureInPicture","params","supported","target","isTarget","options","open","setOpen","useState","internalRef","useRefState","elementRef","useRef","onOptionsRef","enter","exit","useEffect","element","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":"mMAiEaA,EAAuB,IAAIC,IAAkB,CACxD,MAAMC,EACJ,OAAO,SAAa,KACpB,4BAA6B,UAC7B,CAAC,CAAC,SAAS,wBAEPC,EAAUC,EAAAA,SAASH,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CI,GAAYF,EAASF,EAAO,CAAC,EAAIA,EAAO,CAAC,IAAqC,CAAA,EAE9E,CAACK,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAEhCC,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAyB,IAAI,EAC1CC,EAAeD,EAAAA,OAAmCP,CAAO,EAC/DQ,EAAa,QAAUR,EAEvB,MAAMS,EAAQ,SAAY,CACnBZ,GAEAS,EAAW,UAEhB,MAAMA,EAAW,QAAQ,wBAAA,EACzBJ,EAAQ,EAAI,EAEZF,EAAQ,UAAA,EAAU,EAGdU,EAAO,SAAY,CAClBb,IAEL,MAAM,SAAS,qBAAA,EACfK,EAAQ,EAAK,EACbF,EAAQ,SAAA,EAAS,EAGnBW,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAUd,EACXC,EAAAA,SAAS,WAAWD,CAAM,EAC3BM,EAAY,QAChB,GAAI,CAACQ,EAAS,OAEdN,EAAW,QAAUM,EAErB,MAAMC,EAA0B,IAAM,CACpCX,EAAQ,EAAI,EACZM,EAAa,QAAQ,UAAA,CAAU,EAG3BM,EAA0B,IAAM,CACpCZ,EAAQ,EAAK,EACbM,EAAa,QAAQ,SAAA,CAAS,EAGhC,OAAAI,EAAQ,iBAAiB,wBAAyBC,CAAuB,EACzED,EAAQ,iBAAiB,wBAAyBE,CAAuB,EAElE,IAAM,CACXF,EAAQ,oBAAoB,wBAAyBC,CAAuB,EAC5ED,EAAQ,oBAAoB,wBAAyBE,CAAuB,CAAA,CAC9E,EACC,CAAChB,CAAM,CAAC,EAOX,MAAMiB,EAAQ,CACZ,KAAAd,EACA,UAAAJ,EACA,MAAAY,EACA,KAAAC,EACA,OAVa,SAAY,CACrBT,QAAYS,EAAA,QACLD,EAAA,CAAM,CAQjB,EAGF,OAAIX,EAAeiB,EACZ,CAAE,GAAGA,EAAO,IAAKX,CAAA,CAC1B"}

package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),d=require("../useRefState/useRefState.cjs"),S=require("../../utils/helpers/isTarget.cjs"),y=require("../../utils/helpers/getElement.cjs"),O=(...e)=>{const t=S.isTarget(e[0])?e[0]:void 0,n=t?typeof e[1]=="object"?e[1]:{onChange:e[1]}:typeof e[0]=="object"?e[0]:{onChange:e[0]},c=n?.onChange,u=n?.enabled??!0,[i,a]=s.useState(),[b,v]=s.useState(),r=d.useRefState(),f=s.useRef(c);return f.current=c,s.useEffect(()=>{if(!u||!t&&!r.state)return;const l=t?y.getElement(t):r.current;if(!l)return;const o=new ResizeObserver(([g],R)=>{a(g),f.current?.(g,R)});return v(o),o.observe(l,n),()=>{o.disconnect()}},[t,r.state,n?.box,u]),t?{entry:i,observer:b}:{ref:r,entry:i,observer:b}};exports.useResizeObserver=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),S=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),y=(...e)=>{const t=g.isTarget(e[0])?e[0]:void 0,n=t?typeof e[1]=="object"?e[1]:{onChange:e[1]}:typeof e[0]=="object"?e[0]:{onChange:e[0]},c=n?.onChange,u=n?.enabled??!0,[i,v]=s.useState(),[b,R]=s.useState(),r=S.useRefState(),f=s.useRef(c);return f.current=c,s.useEffect(()=>{if(!u||!t&&!r.state)return;const l=t?g.isTarget.getElement(t):r.current;if(!l)return;const o=new ResizeObserver(([a],d)=>{v(a),f.current?.(a,d)});return R(o),o.observe(l,n),()=>{o.disconnect()}},[t,r.state,n?.box,u]),t?{entry:i,observer:b}:{ref:r,entry:i,observer:b}};exports.useResizeObserver=y;
 //# sourceMappingURL=useResizeObserver.cjs.map

package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.cjs","sources":["../../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The resize observer callback type */\nexport type UseResizeObserverCallback = (\n  entry: ResizeObserverEntry,\n  observer: ResizeObserver\n) => void;\n\n/** The resize observer options type */\nexport interface UseResizeObserverOptions extends ResizeObserverOptions {\n  /** The enabled state of the resize observer */\n  enabled?: boolean;\n  /** The callback to execute when resize is detected */\n  onChange?: UseResizeObserverCallback;\n}\n\n/** The resize observer return type */\nexport interface UseResizeObserverReturn {\n  /** The resize observer entries */\n  entry: ResizeObserverEntry;\n  /** The resize observer instance */\n  observer?: ResizeObserver;\n}\n\nexport interface UseResizeObserver {\n  <Target extends Element>(\n    options?: UseResizeObserverOptions,\n    target?: never\n  ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;\n\n  <Target extends Element>(\n    callback: UseResizeObserverCallback,\n    target?: never\n  ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;\n}\n\n/**\n * @name useResizeObserver\n * @description - Hook that gives you resize observer state\n * @category Sensors\n * @usage low\n *\n * @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entries, observer } = useResizeObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver();\n *\n * @overload\n * @template Target The target element\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));\n */\nexport const useResizeObserver = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onChange: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onChange: params[0] }\n  ) as UseResizeObserverOptions | undefined;\n\n  const callback = options?.onChange;\n  const enabled = options?.enabled ?? true;\n\n  const [entry, setEntry] = useState<ResizeObserverEntry>();\n  const [observer, setObserver] = useState<ResizeObserver>();\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = target ? getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(([entry], observer) => {\n      setEntry(entry);\n      internalCallbackRef.current?.(entry, observer);\n    });\n\n    setObserver(observer);\n    observer.observe(element as Element, options);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [target, internalRef.state, options?.box, enabled]);\n\n  if (target) return { entry, observer };\n  return {\n    ref: internalRef,\n    entry,\n    observer\n  };\n}) as UseResizeObserver;\n"],"names":["useResizeObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","observer","setObserver","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element","getElement"],"mappings":"mPA4FaA,EAAqB,IAAIC,IAAkB,CACtD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EACtB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EAGtBI,EAAWD,GAAS,SACpBE,EAAUF,GAAS,SAAW,GAE9B,CAACG,EAAOC,CAAQ,EAAIC,WAAA,EACpB,CAACC,EAAUC,CAAW,EAAIF,WAAA,EAE1BG,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOV,CAAQ,EAsB3C,OArBAS,EAAoB,QAAUT,EAE9BW,EAAAA,UAAU,IAAM,CACd,GAAI,CAACV,GAAY,CAACJ,GAAU,CAACU,EAAY,MAAQ,OAEjD,MAAMK,EAAUf,EAASgB,EAAAA,WAAWhB,CAAM,EAAIU,EAAY,QAC1D,GAAI,CAACK,EAAS,OAEd,MAAMP,EAAW,IAAI,eAAe,CAAC,CAACH,CAAK,EAAGG,IAAa,CACzDF,EAASD,CAAK,EACdO,EAAoB,UAAUP,EAAOG,CAAQ,CAAA,CAC9C,EAED,OAAAC,EAAYD,CAAQ,EACpBA,EAAS,QAAQO,EAAoBb,CAAO,EAErC,IAAM,CACXM,EAAS,WAAA,CAAW,CACtB,EACC,CAACR,EAAQU,EAAY,MAAOR,GAAS,IAAKE,CAAO,CAAC,EAEjDJ,EAAe,CAAE,MAAAK,EAAO,SAAAG,CAAA,EACrB,CACL,IAAKE,EACL,MAAAL,EACA,SAAAG,CAAA,CAEJ"}
+{"version":3,"file":"useResizeObserver.cjs","sources":["../../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The resize observer callback type */\nexport type UseResizeObserverCallback = (\n  entry: ResizeObserverEntry,\n  observer: ResizeObserver\n) => void;\n\n/** The resize observer options type */\nexport interface UseResizeObserverOptions extends ResizeObserverOptions {\n  /** The enabled state of the resize observer */\n  enabled?: boolean;\n  /** The callback to execute when resize is detected */\n  onChange?: UseResizeObserverCallback;\n}\n\n/** The resize observer return type */\nexport interface UseResizeObserverReturn {\n  /** The resize observer entries */\n  entry: ResizeObserverEntry;\n  /** The resize observer instance */\n  observer?: ResizeObserver;\n}\n\nexport interface UseResizeObserver {\n  <Target extends Element>(\n    options?: UseResizeObserverOptions,\n    target?: never\n  ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;\n\n  <Target extends Element>(\n    callback: UseResizeObserverCallback,\n    target?: never\n  ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;\n}\n\n/**\n * @name useResizeObserver\n * @description - Hook that gives you resize observer state\n * @category Sensors\n * @usage low\n *\n * @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entries, observer } = useResizeObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver();\n *\n * @overload\n * @template Target The target element\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));\n */\nexport const useResizeObserver = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onChange: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onChange: params[0] }\n  ) as UseResizeObserverOptions | undefined;\n\n  const callback = options?.onChange;\n  const enabled = options?.enabled ?? true;\n\n  const [entry, setEntry] = useState<ResizeObserverEntry>();\n  const [observer, setObserver] = useState<ResizeObserver>();\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(([entry], observer) => {\n      setEntry(entry);\n      internalCallbackRef.current?.(entry, observer);\n    });\n\n    setObserver(observer);\n    observer.observe(element as Element, options);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [target, internalRef.state, options?.box, enabled]);\n\n  if (target) return { entry, observer };\n  return {\n    ref: internalRef,\n    entry,\n    observer\n  };\n}) as UseResizeObserver;\n"],"names":["useResizeObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","observer","setObserver","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":"mMA4FaA,EAAqB,IAAIC,IAAkB,CACtD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EACtB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EAGtBI,EAAWD,GAAS,SACpBE,EAAUF,GAAS,SAAW,GAE9B,CAACG,EAAOC,CAAQ,EAAIC,WAAA,EACpB,CAACC,EAAUC,CAAW,EAAIF,WAAA,EAE1BG,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOV,CAAQ,EAsB3C,OArBAS,EAAoB,QAAUT,EAE9BW,EAAAA,UAAU,IAAM,CACd,GAAI,CAACV,GAAY,CAACJ,GAAU,CAACU,EAAY,MAAQ,OAEjD,MAAMK,EAAUf,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIU,EAAY,QACnE,GAAI,CAACK,EAAS,OAEd,MAAMP,EAAW,IAAI,eAAe,CAAC,CAACH,CAAK,EAAGG,IAAa,CACzDF,EAASD,CAAK,EACdO,EAAoB,UAAUP,EAAOG,CAAQ,CAAA,CAC9C,EAED,OAAAC,EAAYD,CAAQ,EACpBA,EAAS,QAAQO,EAAoBb,CAAO,EAErC,IAAM,CACXM,EAAS,WAAA,CAAW,CACtB,EACC,CAACR,EAAQU,EAAY,MAAOR,GAAS,IAAKE,CAAO,CAAC,EAEjDJ,EAAe,CAAE,MAAAK,EAAO,SAAAG,CAAA,EACrB,CACL,IAAKE,EACL,MAAAL,EACA,SAAAG,CAAA,CAEJ"}

package/dist/cjs/hooks/useRightClick/useRightClick.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),h=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),v=require("../../utils/helpers/getElement.cjs"),R=(...r)=>{const e=g.isTarget(r[0])?r[0]:void 0,l=e?r[1]:r[0],a=e?r[2]:r[1],o=h.useRefState(),s=i.useRef(l);s.current=l;const u=i.useRef(a);if(u.current=a,i.useEffect(()=>{if(!e&&!o.state)return;const n=e?v.getElement(e):o.current;if(!n)return;const f=t=>{t.preventDefault(),u.current?.onStart?.(t);const c=t;s.current({x:c.clientX,y:c.clientY},t)},d=t=>{t.preventDefault(),u.current?.onStart?.(t);const c=t;s.current({x:c.touches[0].clientX,y:c.touches[0].clientY},t)},E=t=>{t.preventDefault(),u.current?.onEnd?.(t)};return n.addEventListener("contextmenu",f),n.addEventListener("touchstart",d),n.addEventListener("touchend",E),()=>{n.removeEventListener("contextmenu",f),n.removeEventListener("touchstart",d),n.removeEventListener("touchend",E)}},[e,o.state]),!e)return o};exports.useRightClick=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),g=require("../useRefState/useRefState.cjs"),h=require("../../utils/helpers/isTarget.cjs"),v=(...r)=>{const e=h.isTarget(r[0])?r[0]:void 0,l=e?r[1]:r[0],a=e?r[2]:r[1],o=g.useRefState(),s=i.useRef(l);s.current=l;const u=i.useRef(a);if(u.current=a,i.useEffect(()=>{if(!e&&!o.state)return;const n=e?h.isTarget.getElement(e):o.current;if(!n)return;const f=t=>{t.preventDefault(),u.current?.onStart?.(t);const c=t;s.current({x:c.clientX,y:c.clientY},t)},d=t=>{t.preventDefault(),u.current?.onStart?.(t);const c=t;s.current({x:c.touches[0].clientX,y:c.touches[0].clientY},t)},E=t=>{t.preventDefault(),u.current?.onEnd?.(t)};return n.addEventListener("contextmenu",f),n.addEventListener("touchstart",d),n.addEventListener("touchend",E),()=>{n.removeEventListener("contextmenu",f),n.removeEventListener("touchstart",d),n.removeEventListener("touchend",E)}},[e,o.state]),!e)return o};exports.useRightClick=v;
 //# sourceMappingURL=useRightClick.cjs.map

package/dist/cjs/hooks/useRightClick/useRightClick.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useRightClick.cjs","sources":["../../../../src/hooks/useRightClick/useRightClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type RightClickEvent = MouseEvent | TouchEvent;\nexport interface RightClickPositions {\n  x: number;\n  y: number;\n}\n\nexport interface UseRightClickOptions {\n  // * The callback function to be invoked on right click end\n  onEnd?: (event: RightClickEvent) => void;\n  // * The callback function to be invoked on right click start\n  onStart?: (event: RightClickEvent) => void;\n}\n\nexport interface UseRightClick {\n  (target: HookTarget, callback: (event: Event) => void, options?: UseRightClickOptions): void;\n\n  <Target extends Element>(\n    callback: (positions: RightClickPositions, event: Event) => void,\n    options?: UseRightClickOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\n/**\n * @name useRightClick\n * @description - Hook that handles right-click events and long press on mobile devices\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for right-click handling\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {void}\n *\n * @example\n * useRightClick(ref, () => console.log('clicked'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {StateRef<Target>} Ref to attach to the element\n *\n * @example\n * const ref = useRightClick(() => console.log('clicked'));\n */\nexport const useRightClick = ((...params: any[]): any => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (\n    positions: RightClickPositions,\n    event: RightClickEvent\n  ) => void;\n  const options = (target ? params[2] : params[1]) as UseRightClickOptions;\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = target ? getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const onContextMenu = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onStart?.(event);\n      const mouseEvent = event as MouseEvent;\n      internalCallbackRef.current({ x: mouseEvent.clientX, y: mouseEvent.clientY }, event);\n    };\n\n    const onTouchStart = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onStart?.(event);\n      const touchEvent = event as TouchEvent;\n      internalCallbackRef.current(\n        { x: touchEvent.touches[0].clientX, y: touchEvent.touches[0].clientY },\n        event\n      );\n    };\n\n    const onTouchEnd = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onEnd?.(event);\n    };\n\n    element.addEventListener('contextmenu', onContextMenu as EventListener);\n\n    element.addEventListener('touchstart', onTouchStart as EventListener);\n    element.addEventListener('touchend', onTouchEnd as EventListener);\n\n    return () => {\n      element.removeEventListener('contextmenu', onContextMenu as EventListener);\n\n      element.removeEventListener('touchstart', onTouchStart as EventListener);\n      element.removeEventListener('touchend', onTouchEnd as EventListener);\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseRightClick;\n"],"names":["useRightClick","params","target","isTarget","callback","options","internalRef","useRefState","internalCallbackRef","useRef","internalOptionsRef","useEffect","element","getElement","onContextMenu","event","mouseEvent","onTouchStart","touchEvent","onTouchEnd"],"mappings":"mPAuDaA,EAAiB,IAAIC,IAAuB,CACvD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAIzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCK,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOL,CAAQ,EAC3CI,EAAoB,QAAUJ,EAC9B,MAAMM,EAAqBD,EAAAA,OAAOJ,CAAO,EA4CzC,GA3CAK,EAAmB,QAAUL,EAE7BM,EAAAA,UAAU,IAAM,CACd,GAAI,CAACT,GAAU,CAACI,EAAY,MAAO,OAEnC,MAAMM,EAAUV,EAASW,EAAAA,WAAWX,CAAM,EAAII,EAAY,QAC1D,GAAI,CAACM,EAAS,OAEd,MAAME,EAAiBC,GAA2B,CAChDA,EAAM,eAAA,EACNL,EAAmB,SAAS,UAAUK,CAAK,EAC3C,MAAMC,EAAaD,EACnBP,EAAoB,QAAQ,CAAE,EAAGQ,EAAW,QAAS,EAAGA,EAAW,OAAA,EAAWD,CAAK,CAAA,EAG/EE,EAAgBF,GAA2B,CAC/CA,EAAM,eAAA,EACNL,EAAmB,SAAS,UAAUK,CAAK,EAC3C,MAAMG,EAAaH,EACnBP,EAAoB,QAClB,CAAE,EAAGU,EAAW,QAAQ,CAAC,EAAE,QAAS,EAAGA,EAAW,QAAQ,CAAC,EAAE,OAAA,EAC7DH,CAAA,CACF,EAGII,EAAcJ,GAA2B,CAC7CA,EAAM,eAAA,EACNL,EAAmB,SAAS,QAAQK,CAAK,CAAA,EAG3C,OAAAH,EAAQ,iBAAiB,cAAeE,CAA8B,EAEtEF,EAAQ,iBAAiB,aAAcK,CAA6B,EACpEL,EAAQ,iBAAiB,WAAYO,CAA2B,EAEzD,IAAM,CACXP,EAAQ,oBAAoB,cAAeE,CAA8B,EAEzEF,EAAQ,oBAAoB,aAAcK,CAA6B,EACvEL,EAAQ,oBAAoB,WAAYO,CAA2B,CAAA,CACrE,EACC,CAACjB,EAAQI,EAAY,KAAK,CAAC,EAE1B,CAAAJ,EACJ,OAAOI,CACT"}
+{"version":3,"file":"useRightClick.cjs","sources":["../../../../src/hooks/useRightClick/useRightClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type RightClickEvent = MouseEvent | TouchEvent;\nexport interface RightClickPositions {\n  x: number;\n  y: number;\n}\n\nexport interface UseRightClickOptions {\n  // * The callback function to be invoked on right click end\n  onEnd?: (event: RightClickEvent) => void;\n  // * The callback function to be invoked on right click start\n  onStart?: (event: RightClickEvent) => void;\n}\n\nexport interface UseRightClick {\n  (target: HookTarget, callback: (event: Event) => void, options?: UseRightClickOptions): void;\n\n  <Target extends Element>(\n    callback: (positions: RightClickPositions, event: Event) => void,\n    options?: UseRightClickOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\n/**\n * @name useRightClick\n * @description - Hook that handles right-click events and long press on mobile devices\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for right-click handling\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {void}\n *\n * @example\n * useRightClick(ref, () => console.log('clicked'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {StateRef<Target>} Ref to attach to the element\n *\n * @example\n * const ref = useRightClick(() => console.log('clicked'));\n */\nexport const useRightClick = ((...params: any[]): any => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (\n    positions: RightClickPositions,\n    event: RightClickEvent\n  ) => void;\n  const options = (target ? params[2] : params[1]) as UseRightClickOptions;\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const onContextMenu = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onStart?.(event);\n      const mouseEvent = event as MouseEvent;\n      internalCallbackRef.current({ x: mouseEvent.clientX, y: mouseEvent.clientY }, event);\n    };\n\n    const onTouchStart = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onStart?.(event);\n      const touchEvent = event as TouchEvent;\n      internalCallbackRef.current(\n        { x: touchEvent.touches[0].clientX, y: touchEvent.touches[0].clientY },\n        event\n      );\n    };\n\n    const onTouchEnd = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onEnd?.(event);\n    };\n\n    element.addEventListener('contextmenu', onContextMenu as EventListener);\n\n    element.addEventListener('touchstart', onTouchStart as EventListener);\n    element.addEventListener('touchend', onTouchEnd as EventListener);\n\n    return () => {\n      element.removeEventListener('contextmenu', onContextMenu as EventListener);\n\n      element.removeEventListener('touchstart', onTouchStart as EventListener);\n      element.removeEventListener('touchend', onTouchEnd as EventListener);\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseRightClick;\n"],"names":["useRightClick","params","target","isTarget","callback","options","internalRef","useRefState","internalCallbackRef","useRef","internalOptionsRef","useEffect","element","onContextMenu","event","mouseEvent","onTouchStart","touchEvent","onTouchEnd"],"mappings":"mMAuDaA,EAAiB,IAAIC,IAAuB,CACvD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAIzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCK,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOL,CAAQ,EAC3CI,EAAoB,QAAUJ,EAC9B,MAAMM,EAAqBD,EAAAA,OAAOJ,CAAO,EA4CzC,GA3CAK,EAAmB,QAAUL,EAE7BM,EAAAA,UAAU,IAAM,CACd,GAAI,CAACT,GAAU,CAACI,EAAY,MAAO,OAEnC,MAAMM,EAAUV,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAII,EAAY,QACnE,GAAI,CAACM,EAAS,OAEd,MAAMC,EAAiBC,GAA2B,CAChDA,EAAM,eAAA,EACNJ,EAAmB,SAAS,UAAUI,CAAK,EAC3C,MAAMC,EAAaD,EACnBN,EAAoB,QAAQ,CAAE,EAAGO,EAAW,QAAS,EAAGA,EAAW,OAAA,EAAWD,CAAK,CAAA,EAG/EE,EAAgBF,GAA2B,CAC/CA,EAAM,eAAA,EACNJ,EAAmB,SAAS,UAAUI,CAAK,EAC3C,MAAMG,EAAaH,EACnBN,EAAoB,QAClB,CAAE,EAAGS,EAAW,QAAQ,CAAC,EAAE,QAAS,EAAGA,EAAW,QAAQ,CAAC,EAAE,OAAA,EAC7DH,CAAA,CACF,EAGII,EAAcJ,GAA2B,CAC7CA,EAAM,eAAA,EACNJ,EAAmB,SAAS,QAAQI,CAAK,CAAA,EAG3C,OAAAF,EAAQ,iBAAiB,cAAeC,CAA8B,EAEtED,EAAQ,iBAAiB,aAAcI,CAA6B,EACpEJ,EAAQ,iBAAiB,WAAYM,CAA2B,EAEzD,IAAM,CACXN,EAAQ,oBAAoB,cAAeC,CAA8B,EAEzED,EAAQ,oBAAoB,aAAcI,CAA6B,EACvEJ,EAAQ,oBAAoB,WAAYM,CAA2B,CAAA,CACrE,EACC,CAAChB,EAAQI,EAAY,KAAK,CAAC,EAE1B,CAAAJ,EACJ,OAAOI,CACT"}

package/dist/cjs/hooks/useScroll/useScroll.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),O=require("../useRefState/useRefState.cjs"),P=require("../../utils/helpers/isTarget.cjs"),V=require("../../utils/helpers/getElement.cjs"),H=1,_=(...o)=>{const c=P.isTarget(o[0])?o[0]:void 0,R=c?typeof o[1]=="object"?o[1]:{onScroll:o[1]}:typeof o[0]=="object"?o[0]:{onScroll:o[0]},g=O.useRefState(),a=d.useRef(R),u=d.useRef(null);a.current=R;const[m,y]=d.useState(!1),f=d.useRef({x:0,y:0});d.useEffect(()=>{if(!c&&!g.state)return;const e=(c?V.getElement(c):g.current)??window;u.current=e;const l=t=>{y(!1),R?.onStop?.(t)},s=t=>{y(!0);const r=t.target===document?t.target.documentElement:t.target,{display:v,flexDirection:T,direction:I}=r.style,h=I==="rtl"?-1:1,i=r.scrollLeft;let n=r.scrollTop;r instanceof Document&&!n&&(n=window.document.body.scrollTop);const S=a.current?.offset,p=i*h<=(S?.left??0),x=i*h+r.clientWidth>=r.scrollWidth-(S?.right??0)-H,L=n<=(S?.top??0),w=n+r.clientHeight>=r.scrollHeight-(S?.bottom??0)-H,q=v==="flex"&&T==="column-reverse",D=v==="flex"&&T==="column-reverse",j={x:i,y:n,directions:{left:i<f.current.x,right:i>f.current.x,top:n<f.current.y,bottom:n>f.current.y},arrived:{left:D?x:p,right:D?p:x,top:q?w:L,bottom:q?L:w}};f.current={x:i,y:n},a.current?.onScroll?.(j,t)};return e.addEventListener("scroll",s),e.addEventListener("scrollend",l),()=>{e.removeEventListener("scroll",s),e.removeEventListener("scrollend",l)}},[c,g.state]);const E=e=>{if(!u.current)return;const{behavior:l,block:s,inline:t}=e??{};u.current.scrollIntoView({behavior:l,block:s,inline:t})},b=e=>{if(!u.current)return;const{x:l,y:s,behavior:t}=e??{};u.current.scrollTo({left:l,top:s,behavior:t})};return c?{scrollIntoView:E,scrollTo:b,scrolling:m}:{ref:g,scrolling:m,scrollIntoView:E,scrollTo:b}};exports.useScroll=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),P=require("../useRefState/useRefState.cjs"),I=require("../../utils/helpers/isTarget.cjs"),j=1,V=(...o)=>{const c=I.isTarget(o[0])?o[0]:void 0,a=c?typeof o[1]=="object"?o[1]:{onScroll:o[1]}:typeof o[0]=="object"?o[0]:{onScroll:o[0]},g=P.useRefState(),R=d.useRef(a),u=d.useRef(null);R.current=a;const[y,b]=d.useState(!1),f=d.useRef({x:0,y:0});d.useEffect(()=>{if(!c&&!g.state)return;const e=(c?I.isTarget.getElement(c):g.current)??window;u.current=e;const l=t=>{b(!1),a?.onStop?.(t)},s=t=>{b(!0);const r=t.target===document?t.target.documentElement:t.target,{display:E,flexDirection:T,direction:q}=r.style,h=q==="rtl"?-1:1,i=r.scrollLeft;let n=r.scrollTop;r instanceof Document&&!n&&(n=window.document.body.scrollTop);const S=R.current?.offset,p=i*h<=(S?.left??0),x=i*h+r.clientWidth>=r.scrollWidth-(S?.right??0)-j,L=n<=(S?.top??0),w=n+r.clientHeight>=r.scrollHeight-(S?.bottom??0)-j,D=E==="flex"&&T==="column-reverse",H=E==="flex"&&T==="column-reverse",O={x:i,y:n,directions:{left:i<f.current.x,right:i>f.current.x,top:n<f.current.y,bottom:n>f.current.y},arrived:{left:H?x:p,right:H?p:x,top:D?w:L,bottom:D?L:w}};f.current={x:i,y:n},R.current?.onScroll?.(O,t)};return e.addEventListener("scroll",s),e.addEventListener("scrollend",l),()=>{e.removeEventListener("scroll",s),e.removeEventListener("scrollend",l)}},[c,g.state]);const m=e=>{if(!u.current)return;const{behavior:l,block:s,inline:t}=e??{};u.current.scrollIntoView({behavior:l,block:s,inline:t})},v=e=>{if(!u.current)return;const{x:l,y:s,behavior:t}=e??{};u.current.scrollTo({left:l,top:s,behavior:t})};return c?{scrollIntoView:m,scrollTo:v,scrolling:y}:{ref:g,scrolling:y,scrollIntoView:m,scrollTo:v}};exports.useScroll=V;
 //# sourceMappingURL=useScroll.cjs.map

package/dist/cjs/hooks/useScroll/useScroll.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScroll.cjs","sources":["../../../../src/hooks/useScroll/useScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\n\nexport interface UseScrollOptions {\n  /** The on scroll callback */\n  onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\n\n  /** The on end scroll callback */\n  onStop?: (event: Event) => void;\n\n  /** Offset arrived states by x pixels. */\n  offset?: {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n  };\n}\n\nexport interface UseScrollCallbackParams {\n  /** The element x position */\n  x: number;\n  /** The element y position */\n  y: number;\n  /** State of scroll arrived */\n  arrived: {\n    left: boolean;\n    right: boolean;\n    top: boolean;\n    bottom: boolean;\n  };\n  /** State of scroll direction */\n  directions: {\n    left: boolean;\n    right: boolean;\n    top: boolean;\n    bottom: boolean;\n  };\n}\n\n/** The scroll into view params type */\nexport interface ScrollIntoViewParams {\n  behavior?: ScrollBehavior;\n  block?: ScrollLogicalPosition;\n  inline?: ScrollLogicalPosition;\n}\n/** The scroll to params type */\nexport interface ScrollToParams {\n  behavior?: ScrollBehavior;\n  x: number;\n  y: number;\n}\n\n/** The use scroll return type */\nexport interface UseScrollReturn {\n  /** The state of scrolling */\n  scrolling: boolean;\n  /** Function to scroll element into view */\n  scrollIntoView: (params?: ScrollIntoViewParams) => void;\n  /** Function to scroll element to a specific position */\n  scrollTo: (params?: ScrollToParams) => void;\n}\n\nexport interface UseScroll {\n  (\n    target?: HookTarget,\n    callback?: (params: UseScrollCallbackParams, event: Event) => void\n  ): UseScrollReturn;\n\n  (target?: HookTarget, options?: UseScrollOptions): UseScrollReturn;\n\n  <Target extends Element>(\n    callback?: (params: UseScrollCallbackParams, event: Event) => void,\n    target?: never\n  ): UseScrollReturn & { ref: StateRef<Target> };\n\n  <Target extends Element>(\n    options?: UseScrollOptions,\n    target?: never\n  ): UseScrollReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useScroll\n * @description - Hook that allows you to control scroll a element\n * @category Sensors\n * @usage low\n *\n * @overload\n * @template Target The target element\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0]  The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn} The state of scrolling\n *\n * @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn} The state of scrolling\n *\n * @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {Target} [target=window] The target element to scroll\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0]  The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n *\n * @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(options);\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n *\n * @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(() => console.log('callback'));\n */\nexport const useScroll = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onScroll: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onScroll: params[0] }\n  ) as UseScrollOptions | undefined;\n\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  const elementRef = useRef<Element>(null);\n  internalOptionsRef.current = options;\n\n  const [scrolling, setScrolling] = useState(false);\n  const scrollPositionRef = useRef({ x: 0, y: 0 });\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const element = ((target ? getElement(target) : internalRef.current) as Element) ?? window;\n\n    elementRef.current = element;\n\n    const onScrollEnd = (event: Event) => {\n      setScrolling(false);\n      options?.onStop?.(event);\n    };\n\n    const onScroll = (event: Event) => {\n      setScrolling(true);\n      const target = (\n        event.target === document ? (event.target as Document).documentElement : event.target\n      ) as HTMLElement;\n\n      const { display, flexDirection, direction } = target.style;\n      const directionMultiplier = direction === 'rtl' ? -1 : 1;\n\n      const scrollLeft = target.scrollLeft;\n      let scrollTop = target.scrollTop;\n      if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\n\n      const offset = internalOptionsRef.current?.offset;\n      const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\n      const right =\n        scrollLeft * directionMultiplier + target.clientWidth >=\n        target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n      const top = scrollTop <= (offset?.top ?? 0);\n      const bottom =\n        scrollTop + target.clientHeight >=\n        target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n\n      const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\n      const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\n\n      const params = {\n        x: scrollLeft,\n        y: scrollTop,\n        directions: {\n          left: scrollLeft < scrollPositionRef.current.x,\n          right: scrollLeft > scrollPositionRef.current.x,\n          top: scrollTop < scrollPositionRef.current.y,\n          bottom: scrollTop > scrollPositionRef.current.y\n        },\n        arrived: {\n          left: isRowReverse ? right : left,\n          right: isRowReverse ? left : right,\n          top: isColumnReverse ? bottom : top,\n          bottom: isColumnReverse ? top : bottom\n        }\n      };\n\n      scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\n      internalOptionsRef.current?.onScroll?.(params, event);\n    };\n\n    element.addEventListener('scroll', onScroll);\n    element.addEventListener('scrollend', onScrollEnd);\n\n    return () => {\n      element.removeEventListener('scroll', onScroll);\n      element.removeEventListener('scrollend', onScrollEnd);\n    };\n  }, [target, internalRef.state]);\n\n  const scrollIntoView = (params?: {\n    behavior?: ScrollBehavior;\n    block?: ScrollLogicalPosition;\n    inline?: ScrollLogicalPosition;\n  }) => {\n    if (!elementRef.current) return;\n\n    const { behavior, block, inline } = params ?? {};\n\n    elementRef.current.scrollIntoView({\n      behavior,\n      block,\n      inline\n    });\n  };\n\n  const scrollTo = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n    if (!elementRef.current) return;\n\n    const { x, y, behavior } = params ?? {};\n\n    elementRef.current.scrollTo({ left: x, top: y, behavior });\n  };\n\n  if (target) return { scrollIntoView, scrollTo, scrolling };\n  return {\n    ref: internalRef,\n    scrolling,\n    scrollIntoView,\n    scrollTo\n  };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","elementRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","getElement","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse","scrollIntoView","behavior","block","inline","scrollTo","x","y"],"mappings":"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"}
+{"version":3,"file":"useScroll.cjs","sources":["../../../../src/hooks/useScroll/useScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\n\nexport interface UseScrollOptions {\n  /** The on scroll callback */\n  onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\n\n  /** The on end scroll callback */\n  onStop?: (event: Event) => void;\n\n  /** Offset arrived states by x pixels. */\n  offset?: {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n  };\n}\n\nexport interface UseScrollCallbackParams {\n  /** The element x position */\n  x: number;\n  /** The element y position */\n  y: number;\n  /** State of scroll arrived */\n  arrived: {\n    left: boolean;\n    right: boolean;\n    top: boolean;\n    bottom: boolean;\n  };\n  /** State of scroll direction */\n  directions: {\n    left: boolean;\n    right: boolean;\n    top: boolean;\n    bottom: boolean;\n  };\n}\n\n/** The scroll into view params type */\nexport interface ScrollIntoViewParams {\n  behavior?: ScrollBehavior;\n  block?: ScrollLogicalPosition;\n  inline?: ScrollLogicalPosition;\n}\n/** The scroll to params type */\nexport interface ScrollToParams {\n  behavior?: ScrollBehavior;\n  x: number;\n  y: number;\n}\n\n/** The use scroll return type */\nexport interface UseScrollReturn {\n  /** The state of scrolling */\n  scrolling: boolean;\n  /** Function to scroll element into view */\n  scrollIntoView: (params?: ScrollIntoViewParams) => void;\n  /** Function to scroll element to a specific position */\n  scrollTo: (params?: ScrollToParams) => void;\n}\n\nexport interface UseScroll {\n  (\n    target?: HookTarget,\n    callback?: (params: UseScrollCallbackParams, event: Event) => void\n  ): UseScrollReturn;\n\n  (target?: HookTarget, options?: UseScrollOptions): UseScrollReturn;\n\n  <Target extends Element>(\n    callback?: (params: UseScrollCallbackParams, event: Event) => void,\n    target?: never\n  ): UseScrollReturn & { ref: StateRef<Target> };\n\n  <Target extends Element>(\n    options?: UseScrollOptions,\n    target?: never\n  ): UseScrollReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useScroll\n * @description - Hook that allows you to control scroll a element\n * @category Sensors\n * @usage low\n *\n * @overload\n * @template Target The target element\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0]  The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn} The state of scrolling\n *\n * @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn} The state of scrolling\n *\n * @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {Target} [target=window] The target element to scroll\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0]  The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n *\n * @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(options);\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n *\n * @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(() => console.log('callback'));\n */\nexport const useScroll = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onScroll: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onScroll: params[0] }\n  ) as UseScrollOptions | undefined;\n\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  const elementRef = useRef<Element>(null);\n  internalOptionsRef.current = options;\n\n  const [scrolling, setScrolling] = useState(false);\n  const scrollPositionRef = useRef({ x: 0, y: 0 });\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const element =\n      ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n    elementRef.current = element;\n\n    const onScrollEnd = (event: Event) => {\n      setScrolling(false);\n      options?.onStop?.(event);\n    };\n\n    const onScroll = (event: Event) => {\n      setScrolling(true);\n      const target = (\n        event.target === document ? (event.target as Document).documentElement : event.target\n      ) as HTMLElement;\n\n      const { display, flexDirection, direction } = target.style;\n      const directionMultiplier = direction === 'rtl' ? -1 : 1;\n\n      const scrollLeft = target.scrollLeft;\n      let scrollTop = target.scrollTop;\n      if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\n\n      const offset = internalOptionsRef.current?.offset;\n      const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\n      const right =\n        scrollLeft * directionMultiplier + target.clientWidth >=\n        target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n      const top = scrollTop <= (offset?.top ?? 0);\n      const bottom =\n        scrollTop + target.clientHeight >=\n        target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n\n      const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\n      const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\n\n      const params = {\n        x: scrollLeft,\n        y: scrollTop,\n        directions: {\n          left: scrollLeft < scrollPositionRef.current.x,\n          right: scrollLeft > scrollPositionRef.current.x,\n          top: scrollTop < scrollPositionRef.current.y,\n          bottom: scrollTop > scrollPositionRef.current.y\n        },\n        arrived: {\n          left: isRowReverse ? right : left,\n          right: isRowReverse ? left : right,\n          top: isColumnReverse ? bottom : top,\n          bottom: isColumnReverse ? top : bottom\n        }\n      };\n\n      scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\n      internalOptionsRef.current?.onScroll?.(params, event);\n    };\n\n    element.addEventListener('scroll', onScroll);\n    element.addEventListener('scrollend', onScrollEnd);\n\n    return () => {\n      element.removeEventListener('scroll', onScroll);\n      element.removeEventListener('scrollend', onScrollEnd);\n    };\n  }, [target, internalRef.state]);\n\n  const scrollIntoView = (params?: {\n    behavior?: ScrollBehavior;\n    block?: ScrollLogicalPosition;\n    inline?: ScrollLogicalPosition;\n  }) => {\n    if (!elementRef.current) return;\n\n    const { behavior, block, inline } = params ?? {};\n\n    elementRef.current.scrollIntoView({\n      behavior,\n      block,\n      inline\n    });\n  };\n\n  const scrollTo = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n    if (!elementRef.current) return;\n\n    const { x, y, behavior } = params ?? {};\n\n    elementRef.current.scrollTo({ left: x, top: y, behavior });\n  };\n\n  if (target) return { scrollIntoView, scrollTo, scrolling };\n  return {\n    ref: internalRef,\n    scrolling,\n    scrollIntoView,\n    scrollTo\n  };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","elementRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse","scrollIntoView","behavior","block","inline","scrollTo","x","y"],"mappings":"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"}

package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),m=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),v=require("../useRefState/useRefState.cjs"),w=require("../../utils/helpers/isTarget.cjs"),I=require("../../utils/helpers/getElement.cjs"),S=(...t)=>{const e=w.isTarget(t[0])?t[0]:void 0,c=e?t[1]:t[0],r=v.useRefState(),{behavior:s="smooth",block:u="start",inline:l="nearest",immediately:f=!0}=c??{},o=h.useRef(null);m.useIsomorphicLayoutEffect(()=>{if(!f||!e&&!r.state)return;const n=(e?I.getElement(e):r.current)??window;o.current=n,n.scrollIntoView({behavior:s,block:u,inline:l})},[e,r.state]);const i=n=>{if(!o.current)return;const{behavior:a,block:b,inline:g}=n??{};o.current.scrollIntoView({behavior:a,block:b,inline:g})};return e?{trigger:i}:{ref:r,trigger:i}};exports.useScrollIntoView=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),v=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),w=require("../useRefState/useRefState.cjs"),c=require("../../utils/helpers/isTarget.cjs"),I=(...t)=>{const e=c.isTarget(t[0])?t[0]:void 0,s=e?t[1]:t[0],r=w.useRefState(),{behavior:u="smooth",block:l="start",inline:a="nearest",immediately:f=!0}=s??{},o=m.useRef(null);v.useIsomorphicLayoutEffect(()=>{if(!f||!e&&!r.state)return;const n=(e?c.isTarget.getElement(e):r.current)??window;o.current=n,n.scrollIntoView({behavior:u,block:l,inline:a})},[e,r.state]);const i=n=>{if(!o.current)return;const{behavior:b,block:g,inline:h}=n??{};o.current.scrollIntoView({behavior:b,block:g,inline:h})};return e?{trigger:i}:{ref:r,trigger:i}};exports.useScrollIntoView=I;
 //# sourceMappingURL=useScrollIntoView.cjs.map