@siberiacancode/reactuse 0.3.7 → 0.3.8

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

@@ -1 +1 @@
-{"version":3,"file":"useMediaControls.mjs","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, isTarget.getRefState(target)]);\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 (value = !playing) => {\n    if (value) return play();\n    return pause();\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","value","time"],"mappings":"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"}
+{"version":3,"file":"useMediaControls.mjs","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 && isTarget.getRawElement(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 (value = !playing) => {\n    if (value) return play();\n    return pause();\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","value","time"],"mappings":"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"}

package/dist/esm/hooks/useMouse/useMouse.mjs

@@ -1,8 +1,8 @@
-import { useState as P, useEffect as p } from "react";
+import { useState as f, useEffect as p } from "react";
 import { useRefState as E } from "../useRefState/useRefState.mjs";
-import { isTarget as l } from "../../utils/helpers/isTarget.mjs";
+import { isTarget as s } from "../../utils/helpers/isTarget.mjs";
 const R = ((...m) => {
-  const o = l(m[0]) ? m[0] : void 0, [c, n] = P({
+  const o = s(m[0]) ? m[0] : void 0, [c, n] = f({
     x: 0,
     y: 0,
     elementX: 0,
@@ -14,21 +14,21 @@ const R = ((...m) => {
   }), i = E();
   return p(() => {
     const r = (e) => {
-      const Y = o ? l.getElement(o) : i.current, t = {
+      const Y = o ? s.getElement(o) : i.current, t = {
         x: e.pageX,
         y: e.pageY,
         clientX: e.clientX,
         clientY: e.clientY
       };
       if (Y) {
-        const { left: s, top: a } = Y.getBoundingClientRect(), d = s + window.scrollX, u = a + window.scrollY, f = e.pageX - d, g = e.pageY - u;
-        t.elementX = f, t.elementY = g, t.elementPositionX = d, t.elementPositionY = u, n((w) => ({
-          ...w,
+        const { left: l, top: a } = Y.getBoundingClientRect(), d = l + window.scrollX, u = a + window.scrollY, w = e.pageX - d, g = e.pageY - u;
+        t.elementX = w, t.elementY = g, t.elementPositionX = d, t.elementPositionY = u, n((P) => ({
+          ...P,
           ...t
         }));
       } else
-        t.elementX = e.pageX, t.elementY = e.pageY, t.elementPositionX = 0, t.elementPositionY = 0, n((s) => ({
-          ...s,
+        t.elementX = e.pageX, t.elementY = e.pageY, t.elementPositionX = 0, t.elementPositionY = 0, n((l) => ({
+          ...l,
           ...t
         }));
     }, X = () => {
@@ -43,7 +43,7 @@ const R = ((...m) => {
     return document.addEventListener("scroll", X, { passive: !0 }), document.addEventListener("mousemove", r), () => {
       document.removeEventListener("scroll", X), document.removeEventListener("mousemove", r);
     };
-  }, [i.state, o, l.getRefState(o)]), o ? c : {
+  }, [i.state, o && s.getRawElement(o)]), o ? c : {
     ref: i,
     ...c
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useMouse.mjs","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, isTarget.getRefState(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":";;;AA8DO,MAAMA,KAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE3C,CAACG,GAAOC,CAAQ,IAAIC,EAAyB;AAAA,IACjD,GAAG;AAAA,IACH,GAAG;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV,GAEKC,IAAcC,EAAA;AA8DpB,SA5DAC,EAAU,MAAM;AACd,UAAMC,IAAc,CAACC,MAAsB;AACzC,YAAMC,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAIK,EAAY,SAI9DM,IAAe;AAAA,QACnB,GAAGF,EAAM;AAAA,QACT,GAAGA,EAAM;AAAA,QACT,SAASA,EAAM;AAAA,QACf,SAASA,EAAM;AAAA,MAAA;AAGjB,UAAIC,GAAS;AACX,cAAM,EAAE,MAAAE,GAAM,KAAAC,MAAQH,EAAQ,sBAAA,GACxBI,IAAmBF,IAAO,OAAO,SACjCG,IAAmBF,IAAM,OAAO,SAChCG,IAAWP,EAAM,QAAQK,GACzBG,IAAWR,EAAM,QAAQM;AAE/B,QAAAJ,EAAa,WAAWK,GACxBL,EAAa,WAAWM,GACxBN,EAAa,mBAAmBG,GAChCH,EAAa,mBAAmBI,GAEhCZ,EAAS,CAACe,OAAe;AAAA,UACvB,GAAGA;AAAA,UACH,GAAGP;AAAA,QAAA,EACH;AAAA,MAAA;AAEF,QAAAA,EAAa,WAAWF,EAAM,OAC9BE,EAAa,WAAWF,EAAM,OAC9BE,EAAa,mBAAmB,GAChCA,EAAa,mBAAmB,GAEhCR,EAAS,CAACe,OAAe;AAAA,UACvB,GAAGA;AAAA,UACH,GAAGP;AAAA,QAAA,EACH;AAAA,IACJ,GAGIQ,IAAW,MAAM;AACrB,MAAAhB,EAAS,CAACe,OAAe;AAAA,QACvB,GAAGA;AAAA,QACH,GAAGA,EAAU,IAAI,OAAO,UAAUA,EAAU;AAAA,QAC5C,GAAGA,EAAU,IAAI,OAAO,UAAUA,EAAU;AAAA,QAC5C,kBAAkB,OAAO;AAAA,QACzB,kBAAkB,OAAO;AAAA,MAAA,EACzB;AAAA,IAAA;AAGJ,oBAAS,iBAAiB,UAAUC,GAAU,EAAE,SAAS,IAAM,GAC/D,SAAS,iBAAiB,aAAaX,CAAW,GAC3C,MAAM;AACX,eAAS,oBAAoB,UAAUW,CAAQ,GAC/C,SAAS,oBAAoB,aAAaX,CAAW;AAAA,IAAA;AAAA,EACvD,GACC,CAACH,EAAY,OAAOL,GAAQC,EAAS,YAAYD,CAAM,CAAC,CAAC,GAExDA,IAAeE,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,GAAGH;AAAA,EAAA;AAEP;"}
+{"version":3,"file":"useMouse.mjs","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 && isTarget.getRawElement(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":";;;AA8DO,MAAMA,KAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE3C,CAACG,GAAOC,CAAQ,IAAIC,EAAyB;AAAA,IACjD,GAAG;AAAA,IACH,GAAG;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV,GAEKC,IAAcC,EAAA;AA8DpB,SA5DAC,EAAU,MAAM;AACd,UAAMC,IAAc,CAACC,MAAsB;AACzC,YAAMC,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAIK,EAAY,SAI9DM,IAAe;AAAA,QACnB,GAAGF,EAAM;AAAA,QACT,GAAGA,EAAM;AAAA,QACT,SAASA,EAAM;AAAA,QACf,SAASA,EAAM;AAAA,MAAA;AAGjB,UAAIC,GAAS;AACX,cAAM,EAAE,MAAAE,GAAM,KAAAC,MAAQH,EAAQ,sBAAA,GACxBI,IAAmBF,IAAO,OAAO,SACjCG,IAAmBF,IAAM,OAAO,SAChCG,IAAWP,EAAM,QAAQK,GACzBG,IAAWR,EAAM,QAAQM;AAE/B,QAAAJ,EAAa,WAAWK,GACxBL,EAAa,WAAWM,GACxBN,EAAa,mBAAmBG,GAChCH,EAAa,mBAAmBI,GAEhCZ,EAAS,CAACe,OAAe;AAAA,UACvB,GAAGA;AAAA,UACH,GAAGP;AAAA,QAAA,EACH;AAAA,MAAA;AAEF,QAAAA,EAAa,WAAWF,EAAM,OAC9BE,EAAa,WAAWF,EAAM,OAC9BE,EAAa,mBAAmB,GAChCA,EAAa,mBAAmB,GAEhCR,EAAS,CAACe,OAAe;AAAA,UACvB,GAAGA;AAAA,UACH,GAAGP;AAAA,QAAA,EACH;AAAA,IACJ,GAGIQ,IAAW,MAAM;AACrB,MAAAhB,EAAS,CAACe,OAAe;AAAA,QACvB,GAAGA;AAAA,QACH,GAAGA,EAAU,IAAI,OAAO,UAAUA,EAAU;AAAA,QAC5C,GAAGA,EAAU,IAAI,OAAO,UAAUA,EAAU;AAAA,QAC5C,kBAAkB,OAAO;AAAA,QACzB,kBAAkB,OAAO;AAAA,MAAA,EACzB;AAAA,IAAA;AAGJ,oBAAS,iBAAiB,UAAUC,GAAU,EAAE,SAAS,IAAM,GAC/D,SAAS,iBAAiB,aAAaX,CAAW,GAC3C,MAAM;AACX,eAAS,oBAAoB,UAAUW,CAAQ,GAC/C,SAAS,oBAAoB,aAAaX,CAAW;AAAA,IAAA;AAAA,EACvD,GACC,CAACH,EAAY,OAAOL,KAAUC,EAAS,cAAcD,CAAM,CAAC,CAAC,GAE5DA,IAAeE,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,GAAGH;AAAA,EAAA;AAEP;"}

package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs

@@ -2,21 +2,20 @@ import { useState as g, useRef as v, useEffect as h } from "react";
 import { useRefState as O } from "../useRefState/useRefState.mjs";
 import { isTarget as c } from "../../utils/helpers/isTarget.mjs";
 const j = ((...t) => {
-  const r = c(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, f] = g(), n = O(), a = v(s);
+  const r = c(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] = g(), n = O(), a = v(s);
   return a.current = s, h(() => {
     if (!u || !r && !n.state) return;
-    const b = r ? c.getElement(r) : n.current;
-    if (!b) return;
-    const o = new MutationObserver((l, d) => {
-      a.current?.(l, d);
+    const l = r ? c.getElement(r) : n.current;
+    if (!l) return;
+    const o = new MutationObserver((f, d) => {
+      a.current?.(f, d);
     });
-    return f(o), o.observe(b, e), () => {
+    return b(o), o.observe(l, e), () => {
       o.disconnect();
     };
   }, [
-    r,
+    r && c.getRawElement(r),
     n.state,
-    c.getRefState(r),
     e?.childList,
     e?.attributes,
     e?.characterData,

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

@@ -1 +1 @@
-{"version":3,"file":"useMutationObserver.mjs","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    isTarget.getRefState(target),\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":";;;AAgGO,MAAMA,KAAuB,IAAIC,MAAkB;AACxD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAUC,CAAW,IAAIC,EAAA,GAE1BC,IAAcC,EAAA,GACdC,IAAsBC,EAAOR,CAAQ;AAiC3C,SAhCAO,EAAoB,UAAUP,GAE9BS,EAAU,MAAM;AACd,QAAI,CAACR,KAAY,CAACJ,KAAU,CAACQ,EAAY,MAAQ;AAEjD,UAAMK,IAAUb,IAASC,EAAS,WAAWD,CAAM,IAAIQ,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMR,IAAW,IAAI,iBAAiB,CAACS,GAAWT,MAAa;AAC7D,MAAAK,EAAoB,UAAUI,GAAWT,CAAQ;AAAA,IAAA,CAClD;AAED,WAAAC,EAAYD,CAAQ,GACpBA,EAAS,QAAQQ,GAAoBX,CAAO,GAErC,MAAM;AACXG,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC;AAAA,IACDL;AAAA,IACAQ,EAAY;AAAA,IACZP,EAAS,YAAYD,CAAM;AAAA,IAC3BE,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTE;AAAA,EAAA,CACD,GAEGJ,IAAe,EAAE,UAAAK,EAAA,IACd;AAAA,IACL,KAAKG;AAAA,IACL,UAAAH;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useMutationObserver.mjs","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 && isTarget.getRawElement(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":";;;AAgGO,MAAMA,KAAuB,IAAIC,MAAkB;AACxD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAUC,CAAW,IAAIC,EAAA,GAE1BC,IAAcC,EAAA,GACdC,IAAsBC,EAAOR,CAAQ;AAgC3C,SA/BAO,EAAoB,UAAUP,GAE9BS,EAAU,MAAM;AACd,QAAI,CAACR,KAAY,CAACJ,KAAU,CAACQ,EAAY,MAAQ;AAEjD,UAAMK,IAAUb,IAASC,EAAS,WAAWD,CAAM,IAAIQ,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMR,IAAW,IAAI,iBAAiB,CAACS,GAAWT,MAAa;AAC7D,MAAAK,EAAoB,UAAUI,GAAWT,CAAQ;AAAA,IAAA,CAClD;AAED,WAAAC,EAAYD,CAAQ,GACpBA,EAAS,QAAQQ,GAAoBX,CAAO,GAErC,MAAM;AACXG,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC;AAAA,IACDL,KAAUC,EAAS,cAAcD,CAAM;AAAA,IACvCQ,EAAY;AAAA,IACZN,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTE;AAAA,EAAA,CACD,GAEGJ,IAAe,EAAE,UAAAK,EAAA,IACd;AAAA,IACL,KAAKG;AAAA,IACL,UAAAH;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/usePaint/usePaint.mjs

@@ -1,6 +1,6 @@
-import { useRef as P, useState as A, useEffect as S } from "react";
+import { useRef as P, useState as A, useEffect as B } from "react";
 import { useEvent as M } from "../useEvent/useEvent.mjs";
-import { useRefState as B } from "../useRefState/useRefState.mjs";
+import { useRefState as S } from "../useRefState/useRefState.mjs";
 import { isTarget as b } from "../../utils/helpers/isTarget.mjs";
 const U = 10;
 class x {
@@ -59,26 +59,26 @@ class q {
       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 f = o + Math.PI / 2;
+      const l = o + Math.PI / 2;
       return this.brush.update({
-        x: this.brush.x + Math.sin(f) * (e - this.radius),
-        y: this.brush.y - Math.cos(f) * (e - this.radius)
+        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 Y = ((...p) => {
-  const t = b(p[0]) ? p[0] : void 0, e = (t ? p[1] : p[0]) ?? {}, o = e?.color ?? "black", h = e?.opacity ?? 1, f = e?.radius ?? U, s = P(
+  const t = b(p[0]) ? p[0] : void 0, e = (t ? p[1] : p[0]) ?? {}, o = e?.color ?? "black", h = e?.opacity ?? 1, l = e?.radius ?? U, s = P(
     new q({
       x: 0,
       y: 0,
       radius: e?.radius ?? U,
       smooth: e?.smooth ?? !1
     })
-  ), [m, w] = A(!1), g = B(), n = P(null), c = (r, u, l, a) => {
+  ), [m, w] = A(!1), g = S(), n = P(null), c = (r, u, f, a) => {
     if (!n.current) return;
-    n.current.globalAlpha = l, n.current.strokeStyle = u, n.current.lineWidth = a * 2, n.current.lineCap = "round", n.current.lineJoin = "round";
+    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) {
@@ -107,35 +107,35 @@ const Y = ((...p) => {
       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, f));
+    ), c(s.current.points, o, h, l));
   }), T = M((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, f), e?.onMouseDown?.(r, s.current), w(!0);
+    s.current.brush.update(u), s.current.points.push(u), c(s.current.points, o, h, l), e?.onMouseDown?.(r, s.current), w(!0);
   }), R = M((r) => {
     n.current && (s.current.points.length && (s.current.lines.push({
       points: s.current.points,
       color: o,
       opacity: h,
-      radius: f
+      radius: l
     }), s.current.points = []), e?.onMouseUp?.(r, s.current), w(!1));
   }), D = () => {
     n.current && (v(), s.current.lines = [], s.current.points = []);
   }, L = () => {
     n.current && (v(), s.current.lines.pop(), s.current.lines.forEach(
-      ({ points: r, color: u, opacity: l, radius: a }) => c(r, u, l, a)
+      ({ points: r, color: u, opacity: f, radius: a }) => c(r, u, f, a)
     ));
   };
-  return S(() => {
+  return B(() => {
     if (!t && !g.state) return;
     const r = t ? b.getElement(t) : g.current;
     if (r)
       return n.current = r.getContext("2d"), e?.initialLines && (s.current.lines = e.initialLines, e.initialLines.forEach(
-        ({ points: u, color: l, opacity: a, radius: i }) => c(u, l, a, i)
+        ({ points: u, color: f, opacity: a, radius: i }) => c(u, f, a, i)
       )), r.addEventListener("mousedown", T), r.addEventListener("mousemove", E), r.addEventListener("mouseup", R), () => {
         r && (r.removeEventListener("mousedown", T), r.removeEventListener("mousemove", E), r.removeEventListener("mouseup", R));
       };
-  }, [t, g.state, b.getRefState(t)]), t ? { drawing: m, clear: D, undo: L, draw: c, lines: s.current.lines } : {
+  }, [t && b.getRawElement(t), g.state]), t ? { drawing: m, clear: D, undo: L, draw: c, lines: s.current.lines } : {
     ref: g,
     drawing: m,
     clear: D,

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

@@ -1 +1 @@
-{"version":3,"file":"usePaint.mjs","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, isTarget.getRefState(target)]);\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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"}
+{"version":3,"file":"usePaint.mjs","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 && isTarget.getRawElement(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":";;;;AAWA,MAAMA,IAAuB;AAOtB,MAAMC,EAAyB;AAAA,EACpC;AAAA,EAEA;AAAA,EAEA,YAAYC,GAAWC,GAAW;AAChC,SAAK,IAAID,GACT,KAAK,IAAIC;AAAA,EAAA;AAAA,EAGX,OAAOC,GAAc;AACnB,SAAK,IAAIA,EAAM,GACf,KAAK,IAAIA,EAAM;AAAA,EAAA;AAAA,EAGjB,gBAAgBA,GAAc;AAC5B,WAAO,IAAIH,EAAQ,KAAK,IAAIG,EAAM,GAAG,KAAK,IAAIA,EAAM,CAAC;AAAA,EAAA;AAAA,EAGvD,cAAcA,GAAc;AAC1B,UAAMC,IAAO,KAAK,gBAAgBD,CAAK;AACvC,WAAO,KAAK,KAAKC,EAAK,KAAK,IAAIA,EAAK,KAAK,CAAC;AAAA,EAAA;AAAA,EAG5C,WAAWD,GAAc;AACvB,UAAMC,IAAO,KAAK,gBAAgBD,CAAK;AACvC,WAAO,KAAK,MAAMC,EAAK,GAAGA,EAAK,CAAC;AAAA,EAAA;AAAA,EAGlC,SAASD,GAAc;AACrB,WAAO,KAAK,MAAMA,EAAM,KAAK,KAAK,MAAMA,EAAM;AAAA,EAAA;AAAA,EAGhD,YAEEE,GAEAC,GACA;AAEA,UAAMC,IAAeF,IAAQ,KAAK,KAAK;AAEvC,gBAAK,KAAK,KAAK,IAAIE,CAAY,IAAID,GACnC,KAAK,KAAK,KAAK,IAAIC,CAAY,IAAID,GAE5B;AAAA,EAAA;AAEX;AAEO,MAAME,EAAM;AAAA,EACjB;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA,SAAkB;AAAA,EAElB,SAAkB,CAAA;AAAA,EAElB,QAA+E,CAAA;AAAA,EAE/E,YAAY,EAAE,GAAAP,GAAG,GAAAC,GAAG,QAAAO,GAAQ,QAAAC,KAAqE;AAC/F,SAAK,SAASA,GACd,KAAK,UAAU,IAAIV,EAAQC,GAAGC,CAAC,GAC/B,KAAK,QAAQ,IAAIF,EAAQC,GAAGC,CAAC,GAC7B,KAAK,SAASO,GACd,KAAK,SAAS,CAAA,GACd,KAAK,QAAQ,CAAA;AAAA,EAAC;AAAA,EAGhB,sBAAsB;AACpB,WAAO;AAAA,MACL,GAAG,KAAK,MAAM;AAAA,MACd,GAAG,KAAK,MAAM;AAAA,IAAA;AAAA,EAChB;AAAA,EAGF,wBAAwB;AACtB,WAAO;AAAA,MACL,GAAG,KAAK,QAAQ;AAAA,MAChB,GAAG,KAAK,QAAQ;AAAA,IAAA;AAAA,EAClB;AAAA,EAGF,OAAON,GAAc;AACnB,QAAI,KAAK,QAAQ,SAASA,CAAK,EAAG,QAAO;AAGzC,QAFA,KAAK,QAAQ,OAAOA,CAAK,GAErB,CAAC,KAAK;AACR,kBAAK,MAAM,OAAOA,CAAK,GACvB,KAAK,OAAO,KAAK,KAAK,oBAAA,CAAqB,GACpC;AAGT,UAAMG,IAAW,KAAK,QAAQ,cAAc,KAAK,KAAK,GAChDD,IAAQ,KAAK,QAAQ,WAAW,KAAK,KAAK;AAGhD,QAFkB,KAAK,OAAOC,IAAW,KAAK,UAAU,EAAE,IAAI,KAAK,GAEpD;AACb,YAAMC,IAAeF,IAAQ,KAAK,KAAK;AACvC,kBAAK,MAAM,OAAO;AAAA,QAChB,GAAG,KAAK,MAAM,IAAI,KAAK,IAAIE,CAAY,KAAKD,IAAW,KAAK;AAAA,QAC5D,GAAG,KAAK,MAAM,IAAI,KAAK,IAAIC,CAAY,KAAKD,IAAW,KAAK;AAAA,MAAA,CAC7D,GACD,KAAK,OAAO,KAAK,KAAK,oBAAA,CAAqB,GACpC;AAAA,IAAA;AAGT,WAAO;AAAA,EAAA;AAEX;AA2DO,MAAMK,KAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,KAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,MAA0B,CAAA,GAEnEI,IAAQD,GAAS,SAAS,SAC1BE,IAAUF,GAAS,WAAW,GAC9BN,IAASM,GAAS,UAAUhB,GAE5BmB,IAAWC;AAAA,IACf,IAAIX,EAAM;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,MACH,QAAQO,GAAS,UAAUhB;AAAA,MAC3B,QAAQgB,GAAS,UAAU;AAAA,IAAA,CAC5B;AAAA,EAAA,GAEG,CAACK,GAASC,CAAY,IAAIC,EAAS,EAAK,GACxCC,IAAcC,EAAA,GACdC,IAAaN,EAAwC,IAAI,GAEzDO,IAAO,CAACC,GAAiBX,GAAeC,GAAiBR,MAAmB;AAChF,QAAI,CAACgB,EAAW,QAAS;AAEzB,IAAAA,EAAW,QAAQ,cAAcR,GACjCQ,EAAW,QAAQ,cAAcT,GACjCS,EAAW,QAAQ,YAAYhB,IAAS,GACxCgB,EAAW,QAAQ,UAAU,SAC7BA,EAAW,QAAQ,WAAW;AAE9B,QAAIG,IAAKD,EAAO,CAAC,GACbE,IAAKF,EAAO,CAAC;AAEjB,IAAAF,EAAW,QAAQ,UAAA;AAEnB,aAASK,IAAI,GAAGA,IAAIH,EAAO,QAAQG,KAAK,GAAG;AACzC,YAAMC,IAAW;AAAA,QACf,GAAGH,EAAG,KAAKC,EAAG,IAAID,EAAG,KAAK;AAAA,QAC1B,GAAGA,EAAG,KAAKC,EAAG,IAAID,EAAG,KAAK;AAAA,MAAA;AAE5B,MAAAH,EAAW,QAAQ,iBAAiBG,EAAG,GAAGA,EAAG,GAAGG,EAAS,GAAGA,EAAS,CAAC,GACtEH,IAAKD,EAAOG,CAAC,GACbD,IAAKF,EAAOG,IAAI,CAAC;AAAA,IAAA;AAEnB,IAAAL,EAAW,QAAQ,OAAOG,EAAG,GAAGA,EAAG,CAAC,GACpCH,EAAW,QAAQ,OAAA;AAAA,EAAO,GAGtBO,IAAc,MAAM;AACxB,IAAKP,EAAW,WAChBA,EAAW,QAAQ;AAAA,MACjB;AAAA,MACA;AAAA,MACAA,EAAW,QAAQ,OAAO;AAAA,MAC1BA,EAAW,QAAQ,OAAO;AAAA,IAAA;AAAA,EAC5B,GAGIQ,IAAcC,EAAS,CAACC,MAAsB;AAClD,QAAI,CAACf,EAAS;AACd,IAAAL,GAAS,cAAcoB,GAAOjB,EAAS,OAAO;AAE9C,UAAMf,IAAQ,EAAE,GAAGgC,EAAM,SAAS,GAAGA,EAAM,QAAA;AAI3C,IAFkBjB,EAAS,QAAQ,OAAOf,CAAK,KAG1CsB,EAAW,YAChBO,EAAA,GACAP,EAAW,QAAQ;AAAA,MACjB;AAAA,MACA;AAAA,MACAA,EAAW,QAAQ,OAAO;AAAA,MAC1BA,EAAW,QAAQ,OAAO;AAAA,IAAA,GAgB5BP,EAAS,QAAQ,MAAM;AAAA,MAAQ,CAAC,EAAE,QAAAS,GAAQ,OAAAX,GAAO,SAAAC,GAAS,QAAAR,EAAAA,MACxDiB,EAAKC,GAAQX,GAAOC,GAASR,CAAM;AAAA,IAAA,GAErCiB,EAAKR,EAAS,QAAQ,QAAQF,GAAOC,GAASR,CAAM;AAAA,EAAA,CACrD,GAEK2B,IAAcF,EAAS,CAACC,MAAsB;AAClD,QAAI,CAACV,EAAW,QAAS;AAEzB,UAAMtB,IAAQ,EAAE,GAAGgC,EAAM,SAAS,GAAGA,EAAM,QAAA;AAC3C,IAAAjB,EAAS,QAAQ,MAAM,OAAOf,CAAK,GACnCe,EAAS,QAAQ,OAAO,KAAKf,CAAK,GAClCuB,EAAKR,EAAS,QAAQ,QAAQF,GAAOC,GAASR,CAAM,GAEpDM,GAAS,cAAcoB,GAAOjB,EAAS,OAAO,GAC9CG,EAAa,EAAI;AAAA,EAAA,CAClB,GAEKgB,IAAYH,EAAS,CAACC,MAAsB;AAChD,IAAKV,EAAW,YAEZP,EAAS,QAAQ,OAAO,WAC1BA,EAAS,QAAQ,MAAM,KAAK;AAAA,MAC1B,QAAQA,EAAS,QAAQ;AAAA,MACzB,OAAAF;AAAA,MACA,SAAAC;AAAA,MACA,QAAAR;AAAA,IAAA,CACD,GACDS,EAAS,QAAQ,SAAS,CAAA,IAG5BH,GAAS,YAAYoB,GAAOjB,EAAS,OAAO,GAC5CG,EAAa,EAAK;AAAA,EAAA,CACnB,GAEKiB,IAAQ,MAAM;AAClB,IAAKb,EAAW,YAChBO,EAAA,GACAd,EAAS,QAAQ,QAAQ,CAAA,GACzBA,EAAS,QAAQ,SAAS,CAAA;AAAA,EAAC,GAGvBqB,IAAO,MAAM;AACjB,IAAKd,EAAW,YAChBO,EAAA,GAEAd,EAAS,QAAQ,MAAM,IAAA,GACvBA,EAAS,QAAQ,MAAM;AAAA,MAAQ,CAAC,EAAE,QAAAS,GAAQ,OAAAX,GAAO,SAAAC,GAAS,QAAAR,EAAAA,MACxDiB,EAAKC,GAAQX,GAAOC,GAASR,CAAM;AAAA,IAAA;AAAA,EACrC;AA+BF,SA5BA+B,EAAU,MAAM;AACd,QAAI,CAAC3B,KAAU,CAACU,EAAY,MAAO;AAEnC,UAAMkB,IACJ5B,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AAErD,QAAKkB;AACL,aAAAhB,EAAW,UAAUgB,EAAQ,WAAW,IAAI,GAExC1B,GAAS,iBACXG,EAAS,QAAQ,QAAQH,EAAQ,cACjCA,EAAQ,aAAa;AAAA,QAAQ,CAAC,EAAE,QAAAY,GAAQ,OAAAX,GAAO,SAAAC,GAAS,QAAAR,EAAAA,MACtDiB,EAAKC,GAAQX,GAAOC,GAASR,CAAM;AAAA,MAAA,IAIvCgC,EAAQ,iBAAiB,aAAaL,CAAW,GACjDK,EAAQ,iBAAiB,aAAaR,CAAW,GACjDQ,EAAQ,iBAAiB,WAAWJ,CAAS,GAEtC,MAAM;AACX,QAAKI,MACLA,EAAQ,oBAAoB,aAAaL,CAAW,GACpDK,EAAQ,oBAAoB,aAAaR,CAAW,GACpDQ,EAAQ,oBAAoB,WAAWJ,CAAS;AAAA,MAAA;AAAA,EAClD,GACC,CAACxB,KAAUC,EAAS,cAAcD,CAAM,GAAGU,EAAY,KAAK,CAAC,GAE5DV,IAAe,EAAE,SAAAO,GAAS,OAAAkB,GAAO,MAAAC,GAAM,MAAAb,GAAM,OAAOR,EAAS,QAAQ,MAAA,IAClE;AAAA,IACL,KAAKK;AAAA,IACL,SAAAH;AAAA,IACA,OAAAkB;AAAA,IACA,MAAAC;AAAA,IACA,MAAAb;AAAA,IACA,OAAOR,EAAS,QAAQ;AAAA,EAAA;AAE5B;"}

package/dist/esm/hooks/useParallax/useParallax.mjs

@@ -1,25 +1,25 @@
-import { useState as B, useEffect as C } from "react";
-import { useDeviceOrientation as D } from "../useDeviceOrientation/useDeviceOrientation.mjs";
-import { useOrientation as P } from "../useOrientation/useOrientation.mjs";
+import { useState as C, useEffect as D } from "react";
+import { useDeviceOrientation as P } from "../useDeviceOrientation/useDeviceOrientation.mjs";
+import { useOrientation as S } from "../useOrientation/useOrientation.mjs";
 import { useRefState as X } from "../useRefState/useRefState.mjs";
-import { isTarget as l } from "../../utils/helpers/isTarget.mjs";
+import { isTarget as u } from "../../utils/helpers/isTarget.mjs";
 const z = ((...n) => {
-  const o = l(n[0]) ? n[0] : void 0, p = n[1] ? n[1] : n[0], i = X(), s = P(), e = D(), {
+  const o = u(n[0]) ? n[0] : void 0, p = n[1] ? n[1] : n[0], i = X(), s = S(), e = P(), {
     deviceOrientationRollAdjust: f = (a) => a,
     deviceOrientationTiltAdjust: b = (a) => a,
     mouseRollAdjust: y = (a) => a,
     mouseTiltAdjust: O = (a) => a
-  } = p ?? {}, [v, h] = B({
+  } = p ?? {}, [m, h] = C({
     roll: 0,
     tilt: 0,
     source: "mouse"
   });
-  return C(() => {
+  return D(() => {
     if (!o && !i.state) return;
-    const a = o ? l.getElement(o) : i.current;
+    const a = o ? u.getElement(o) : i.current;
     if (!a) return;
-    const m = (d) => {
-      const { left: R, top: k } = a.getBoundingClientRect(), w = R + window.scrollX, T = k + window.scrollY, c = () => e.supported && (e.value.alpha || e.value.gamma) ? "deviceOrientation" : "mouse", j = () => {
+    const v = (d) => {
+      const { left: w, top: R } = a.getBoundingClientRect(), k = w + window.scrollX, T = R + window.scrollY, c = () => e.supported && (e.value.alpha || e.value.gamma) ? "deviceOrientation" : "mouse", E = () => {
         if (c() === "deviceOrientation") {
           let t;
           switch (s.value.orientationType) {
@@ -40,10 +40,10 @@ const z = ((...n) => {
           }
           return f(t);
         } else {
-          const t = d.pageY - T, r = a.getBoundingClientRect().height, u = -(t - r / 2) / r;
-          return y(u);
+          const t = d.pageY - T, r = a.getBoundingClientRect().height, l = -(t - r / 2) / r;
+          return y(l);
         }
-      }, A = () => {
+      }, j = () => {
         if (c() === "deviceOrientation") {
           let t;
           switch (s.value.orientationType) {
@@ -64,32 +64,31 @@ const z = ((...n) => {
           }
           return b(t);
         } else {
-          const t = d.pageX - w, r = a.getBoundingClientRect().width, u = (t - r / 2) / r;
-          return O(u);
+          const t = d.pageX - k, r = a.getBoundingClientRect().width, l = (t - r / 2) / r;
+          return O(l);
         }
-      }, E = c(), S = j(), x = A();
+      }, A = c(), x = E(), B = j();
       h({
-        roll: S,
-        source: E,
-        tilt: x
+        roll: x,
+        source: A,
+        tilt: B
       });
     };
-    return document.addEventListener("mousemove", m), () => {
-      document.removeEventListener("mousemove", m);
+    return document.addEventListener("mousemove", v), () => {
+      document.removeEventListener("mousemove", v);
     };
   }, [
-    o,
+    o && u.getRawElement(o),
     i.state,
-    l.getRefState(o),
     s.value.angle,
     s.value.orientationType,
     e.value.gamma,
     e.value.beta,
     e.value.alpha,
     e.value.absolute
-  ]), o ? { value: v } : {
+  ]), o ? { value: m } : {
     ref: i,
-    value: v
+    value: m
   };
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"useParallax.mjs","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    isTarget.getRefState(target),\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":"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"}
+{"version":3,"file":"useParallax.mjs","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 && isTarget.getRawElement(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":"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"}

package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs

@@ -4,9 +4,9 @@ import { isTarget as a } from "../../utils/helpers/isTarget.mjs";
 const y = ((...n) => {
   const c = typeof document < "u" && "pictureInPictureEnabled" in document && !!document.pictureInPictureEnabled, e = a(n[0]) ? n[0] : void 0, r = (e ? n[1] : n[0]) ?? {}, [f, i] = v(!1), u = I(), o = P(null), s = P(r);
   s.current = r;
-  const p = async () => {
+  const l = async () => {
     c && o.current && (await o.current.requestPictureInPicture(), i(!0), r.onEnter?.());
-  }, l = async () => {
+  }, p = async () => {
     c && (await document.exitPictureInPicture(), i(!1), r.onExit?.());
   };
   g(() => {
@@ -21,14 +21,14 @@ const y = ((...n) => {
     return t.addEventListener("enterpictureinpicture", E), t.addEventListener("leavepictureinpicture", m), () => {
       t.removeEventListener("enterpictureinpicture", E), t.removeEventListener("leavepictureinpicture", m);
     };
-  }, [e, u.state, a.getRefState(e)]);
+  }, [e && a.getRawElement(e), u.state]);
   const d = {
     open: f,
     supported: c,
-    enter: p,
-    exit: l,
+    enter: l,
+    exit: p,
     toggle: async () => {
-      f ? await l() : await p();
+      f ? await p() : await l();
     }
   };
   return e ? d : { ...d, ref: u };

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

@@ -1 +1 @@
-{"version":3,"file":"usePictureInPicture.mjs","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, internalRef.state, isTarget.getRefState(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":";;;AAiEO,MAAMA,KAAuB,IAAIC,MAAkB;AACxD,QAAMC,IACJ,OAAO,WAAa,OACpB,6BAA6B,YAC7B,CAAC,CAAC,SAAS,yBAEPC,IAAUC,EAASH,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CI,KAAYF,IAASF,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAqC,CAAA,GAE9E,CAACK,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAEhCC,IAAcC,EAAA,GACdC,IAAaC,EAAyB,IAAI,GAC1CC,IAAeD,EAAmCP,CAAO;AAC/D,EAAAQ,EAAa,UAAUR;AAEvB,QAAMS,IAAQ,YAAY;AACxB,IAAKZ,KAEAS,EAAW,YAEhB,MAAMA,EAAW,QAAQ,wBAAA,GACzBJ,EAAQ,EAAI,GAEZF,EAAQ,UAAA;AAAA,EAAU,GAGdU,IAAO,YAAY;AACvB,IAAKb,MAEL,MAAM,SAAS,qBAAA,GACfK,EAAQ,EAAK,GACbF,EAAQ,SAAA;AAAA,EAAS;AAGnB,EAAAW,EAAU,MAAM;AACd,UAAMC,IAAUd,IACXC,EAAS,WAAWD,CAAM,IAC3BM,EAAY;AAChB,QAAI,CAACQ,EAAS;AAEd,IAAAN,EAAW,UAAUM;AAErB,UAAMC,IAA0B,MAAM;AACpC,MAAAX,EAAQ,EAAI,GACZM,EAAa,QAAQ,UAAA;AAAA,IAAU,GAG3BM,IAA0B,MAAM;AACpC,MAAAZ,EAAQ,EAAK,GACbM,EAAa,QAAQ,SAAA;AAAA,IAAS;AAGhC,WAAAI,EAAQ,iBAAiB,yBAAyBC,CAAuB,GACzED,EAAQ,iBAAiB,yBAAyBE,CAAuB,GAElE,MAAM;AACX,MAAAF,EAAQ,oBAAoB,yBAAyBC,CAAuB,GAC5ED,EAAQ,oBAAoB,yBAAyBE,CAAuB;AAAA,IAAA;AAAA,EAC9E,GACC,CAAChB,GAAQM,EAAY,OAAOL,EAAS,YAAYD,CAAM,CAAC,CAAC;AAO5D,QAAMiB,IAAQ;AAAA,IACZ,MAAAd;AAAA,IACA,WAAAJ;AAAA,IACA,OAAAY;AAAA,IACA,MAAAC;AAAA,IACA,QAVa,YAAY;AACzB,MAAIT,UAAYS,EAAA,UACLD,EAAA;AAAA,IAAM;AAAA,EAQjB;AAGF,SAAIX,IAAeiB,IACZ,EAAE,GAAGA,GAAO,KAAKX,EAAA;AAC1B;"}
+{"version":3,"file":"usePictureInPicture.mjs","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 && isTarget.getRawElement(target), internalRef.state]);\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":";;;AAiEO,MAAMA,KAAuB,IAAIC,MAAkB;AACxD,QAAMC,IACJ,OAAO,WAAa,OACpB,6BAA6B,YAC7B,CAAC,CAAC,SAAS,yBAEPC,IAAUC,EAASH,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CI,KAAYF,IAASF,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAqC,CAAA,GAE9E,CAACK,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAEhCC,IAAcC,EAAA,GACdC,IAAaC,EAAyB,IAAI,GAC1CC,IAAeD,EAAmCP,CAAO;AAC/D,EAAAQ,EAAa,UAAUR;AAEvB,QAAMS,IAAQ,YAAY;AACxB,IAAKZ,KAEAS,EAAW,YAEhB,MAAMA,EAAW,QAAQ,wBAAA,GACzBJ,EAAQ,EAAI,GAEZF,EAAQ,UAAA;AAAA,EAAU,GAGdU,IAAO,YAAY;AACvB,IAAKb,MAEL,MAAM,SAAS,qBAAA,GACfK,EAAQ,EAAK,GACbF,EAAQ,SAAA;AAAA,EAAS;AAGnB,EAAAW,EAAU,MAAM;AACd,UAAMC,IAAUd,IACXC,EAAS,WAAWD,CAAM,IAC3BM,EAAY;AAChB,QAAI,CAACQ,EAAS;AAEd,IAAAN,EAAW,UAAUM;AAErB,UAAMC,IAA0B,MAAM;AACpC,MAAAX,EAAQ,EAAI,GACZM,EAAa,QAAQ,UAAA;AAAA,IAAU,GAG3BM,IAA0B,MAAM;AACpC,MAAAZ,EAAQ,EAAK,GACbM,EAAa,QAAQ,SAAA;AAAA,IAAS;AAGhC,WAAAI,EAAQ,iBAAiB,yBAAyBC,CAAuB,GACzED,EAAQ,iBAAiB,yBAAyBE,CAAuB,GAElE,MAAM;AACX,MAAAF,EAAQ,oBAAoB,yBAAyBC,CAAuB,GAC5ED,EAAQ,oBAAoB,yBAAyBE,CAAuB;AAAA,IAAA;AAAA,EAC9E,GACC,CAAChB,KAAUC,EAAS,cAAcD,CAAM,GAAGM,EAAY,KAAK,CAAC;AAOhE,QAAMW,IAAQ;AAAA,IACZ,MAAAd;AAAA,IACA,WAAAJ;AAAA,IACA,OAAAY;AAAA,IACA,MAAAC;AAAA,IACA,QAVa,YAAY;AACzB,MAAIT,UAAYS,EAAA,UACLD,EAAA;AAAA,IAAM;AAAA,EAQjB;AAGF,SAAIX,IAAeiB,IACZ,EAAE,GAAGA,GAAO,KAAKX,EAAA;AAC1B;"}