@siberiacancode/reactuse 0.3.10 → 0.3.12

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 && 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":";;;AAUO,MAAMA,IAAmB,CAACC,MAA2B;AAC1D,MAAIC,IAA6B,CAAA;AAEjC,WAASC,IAAI,GAAGA,IAAIF,EAAW,QAAQ,EAAEE;AACvC,IAAAD,IAAS,CAAC,GAAGA,GAAQ,CAACD,EAAW,MAAME,CAAC,GAAGF,EAAW,IAAIE,CAAC,CAAC,CAAC;AAE/D,SAAOD;AACT,GA6GaE,MAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,KAAKA,EAAO,CAAC,EAAA,IACjB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,KAAKA,EAAO,CAAC,EAAA,GAGjBI,IAAcC,EAAA,GACdC,IAAaC,EAAgC,IAAI,GAEjD,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAUC,CAAW,IAAIF,EAAS,CAAC,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAC1C,CAACK,GAASC,CAAU,IAAIN,EAAS,EAAK,GACtC,CAACO,GAASC,CAAU,IAAIR,EAAS,EAAK,GACtC,CAACS,GAAUC,CAAW,IAAIV,EAA6B,CAAA,CAAE,GACzD,CAACW,GAASC,CAAU,IAAIZ,EAAS,EAAK,GACtC,CAACa,GAAOC,CAAQ,IAAId,EAAS,EAAK,GAClC,CAACe,GAAcC,CAAoB,IAAIhB,EAAS,CAAC,GAEjD,CAACiB,GAAOC,CAAa,IAAIlB,EAAS,EAAK,GACvC,CAACmB,GAAQC,CAAc,IAAIpB,EAAS,CAAC;AAE3C,EAAAqB,EAAU,MAAM;AACd,UAAMC,IACJ/B,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY;AAGrD,QAAI,CAAC4B,EAAS;AAEd,IAAA1B,EAAW,UAAU0B,GACrBA,EAAQ,MAAM7B,EAAQ,KAElBA,EAAQ,QAAM6B,EAAQ,aAAa,QAAQ7B,EAAQ,IAAI,GACvDA,EAAQ,SAAO6B,EAAQ,aAAa,SAAS7B,EAAQ,KAAK,GAE9DS,EAAYoB,EAAQ,QAAQ,GAC5BlB,EAAekB,EAAQ,WAAW,GAClCvB,EAAW,EAAK,GAChBe,EAASQ,EAAQ,KAAK,GACtBJ,EAAcI,EAAQ,KAAK,GAC3BF,EAAeE,EAAQ,MAAM,GAC7BN,EAAqBM,EAAQ,YAAY;AAEzC,UAAMC,IAAY,MAAM;AACtB,MAAAxB,EAAW,EAAI,GACfa,EAAW,EAAK;AAAA,IAAA,GAEZY,IAAU,MAAMzB,EAAW,EAAK,GAChC0B,IAAY,MAAMjB,EAAW,EAAI,GACjCkB,IAAY,MAAMd,EAAW,EAAI,GACjCe,IAAY,MAAMrB,EAAW,EAAI,GACjCsB,IAAW,MAAMtB,EAAW,EAAK,GACjCuB,IAAU,MAAM;AACpB,MAAA9B,EAAW,EAAK,GAChBe,EAAS,EAAI;AAAA,IAAA,GAETgB,IAAmB,MAAM5B,EAAYoB,EAAQ,QAAQ,GACrDS,IAAe,MAAM3B,EAAekB,EAAQ,WAAW,GACvDU,IAAiB,MAAM;AAC3B,MAAAd,EAAcI,EAAQ,KAAK,GAC3BF,EAAeE,EAAQ,MAAM;AAAA,IAAA,GAEzBW,IAAe,MAAMjB,EAAqBM,EAAQ,YAAY,GAC9DY,IAAa,MAAMxB,EAAYzB,EAAiBqC,EAAQ,QAAQ,CAAC;AAEvE,WAAAA,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASE,CAAO,GACzCF,EAAQ,iBAAiB,WAAWG,CAAS,GAC7CH,EAAQ,iBAAiB,YAAYY,CAAU,GAC/CZ,EAAQ,iBAAiB,WAAWI,CAAS,GAC7CJ,EAAQ,iBAAiB,WAAWK,CAAS,GAC7CL,EAAQ,iBAAiB,UAAUM,CAAQ,GAC3CN,EAAQ,iBAAiB,SAASO,CAAO,GACzCP,EAAQ,iBAAiB,kBAAkBQ,CAAgB,GAC3DR,EAAQ,iBAAiB,cAAcS,CAAY,GACnDT,EAAQ,iBAAiB,gBAAgBU,CAAc,GACvDV,EAAQ,iBAAiB,cAAcW,CAAY,GAE5C,MAAM;AACX,MAAAX,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASE,CAAO,GAC5CF,EAAQ,oBAAoB,WAAWG,CAAS,GAChDH,EAAQ,oBAAoB,YAAYY,CAAU,GAClDZ,EAAQ,oBAAoB,WAAWI,CAAS,GAChDJ,EAAQ,oBAAoB,WAAWK,CAAS,GAChDL,EAAQ,oBAAoB,UAAUM,CAAQ,GAC9CN,EAAQ,oBAAoB,SAASO,CAAO,GAC5CP,EAAQ,oBAAoB,kBAAkBQ,CAAgB,GAC9DR,EAAQ,oBAAoB,cAAcS,CAAY,GACtDT,EAAQ,oBAAoB,gBAAgBU,CAAc,GAC1DV,EAAQ,oBAAoB,cAAcW,CAAY;AAAA,IAAA;AAAA,EACxD,GACC,CAAC1C,KAAUC,EAAS,cAAcD,CAAM,GAAGG,EAAY,KAAK,CAAC;AAEhE,QAAMyC,IAAO,YAAY;AACvB,UAAMb,IAAU1B,EAAW;AAC3B,IAAK0B,KAEL,MAAMA,EAAQ,KAAA;AAAA,EAAK,GAGfc,IAAQ,MAAM;AAClB,IAAKxC,EAAW,WAChBA,EAAW,QAAQ,MAAA;AAAA,EAAM;AAiC3B,SAAO;AAAA,IACL,SAAAE;AAAA,IACA,UAAAG;AAAA,IACA,aAAAE;AAAA,IACA,SAAAE;AAAA,IACA,SAAAE;AAAA,IACA,UAAAE;AAAA,IACA,SAAAE;AAAA,IACA,OAAAE;AAAA,IACA,cAAAE;AAAA,IACA,OAAAE;AAAA,IACA,QAAAE;AAAA,IAEA,MAAAgB;AAAA,IACA,OAAAC;AAAA,IACA,QA7Ca,OAAOC,IAAQ,CAACvC,MACzBuC,IAAcF,EAAA,IACXC,EAAA;AAAA,IA4CP,MAzCW,CAACE,MAAiB;AAC7B,MAAK1C,EAAW,YAChBA,EAAW,QAAQ,cAAc,KAAK,IAAI,KAAK,IAAI0C,GAAM,CAAC,GAAGrC,CAAQ;AAAA,IAAA;AAAA,IAwCrE,cArCmB,CAACoC,MAAkB;AACtC,MAAKzC,EAAW,YAChBA,EAAW,QAAQ,SAAS,KAAK,IAAI,KAAK,IAAIyC,GAAO,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,IAoC1D,MAjCW,MAAM;AACjB,MAAKzC,EAAW,YAChBA,EAAW,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAgC3B,QA7Ba,MAAM;AACnB,MAAKA,EAAW,YAChBA,EAAW,QAAQ,QAAQ;AAAA,IAAA;AAAA,IA4B3B,oBAzByB,CAACyC,MAAkB;AAC5C,MAAKzC,EAAW,YAChBA,EAAW,QAAQ,eAAeyC;AAAA,IAAA;AAAA,IAyBlC,GAAI,CAAC9C,KAAU,EAAE,KAAKG,EAAA;AAAA,EAAY;AAEtC;"}
+{"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  /** 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":";;;AAUO,MAAMA,IAAmB,CAACC,MAA2B;AAC1D,MAAIC,IAA6B,CAAA;AAEjC,WAASC,IAAI,GAAGA,IAAIF,EAAW,QAAQ,EAAEE;AACvC,IAAAD,IAAS,CAAC,GAAGA,GAAQ,CAACD,EAAW,MAAME,CAAC,GAAGF,EAAW,IAAIE,CAAC,CAAC,CAAC;AAE/D,SAAOD;AACT,GA4GaE,MAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,KAAKA,EAAO,CAAC,EAAA,IACjB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,KAAKA,EAAO,CAAC,EAAA,GAGjBI,IAAcC,EAAA,GACdC,IAAaC,EAAgC,IAAI,GAEjD,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAUC,CAAW,IAAIF,EAAS,CAAC,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAC1C,CAACK,GAASC,CAAU,IAAIN,EAAS,EAAK,GACtC,CAACO,GAASC,CAAU,IAAIR,EAAS,EAAK,GACtC,CAACS,GAAUC,CAAW,IAAIV,EAA6B,CAAA,CAAE,GACzD,CAACW,GAASC,CAAU,IAAIZ,EAAS,EAAK,GACtC,CAACa,GAAOC,CAAQ,IAAId,EAAS,EAAK,GAClC,CAACe,GAAcC,CAAoB,IAAIhB,EAAS,CAAC,GAEjD,CAACiB,GAAOC,CAAa,IAAIlB,EAAS,EAAK,GACvC,CAACmB,GAAQC,CAAc,IAAIpB,EAAS,CAAC;AAE3C,EAAAqB,EAAU,MAAM;AACd,UAAMC,IACJ/B,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY;AAGrD,QAAI,CAAC4B,EAAS;AAEd,IAAA1B,EAAW,UAAU0B,GACrBA,EAAQ,MAAM7B,EAAQ,KAElBA,EAAQ,QAAM6B,EAAQ,aAAa,QAAQ7B,EAAQ,IAAI,GACvDA,EAAQ,SAAO6B,EAAQ,aAAa,SAAS7B,EAAQ,KAAK,GAE9DS,EAAYoB,EAAQ,QAAQ,GAC5BlB,EAAekB,EAAQ,WAAW,GAClCvB,EAAW,EAAK,GAChBe,EAASQ,EAAQ,KAAK,GACtBJ,EAAcI,EAAQ,KAAK,GAC3BF,EAAeE,EAAQ,MAAM,GAC7BN,EAAqBM,EAAQ,YAAY;AAEzC,UAAMC,IAAY,MAAM;AACtB,MAAAxB,EAAW,EAAI,GACfa,EAAW,EAAK;AAAA,IAAA,GAEZY,IAAU,MAAMzB,EAAW,EAAK,GAChC0B,IAAY,MAAMjB,EAAW,EAAI,GACjCkB,IAAY,MAAMd,EAAW,EAAI,GACjCe,IAAY,MAAMrB,EAAW,EAAI,GACjCsB,IAAW,MAAMtB,EAAW,EAAK,GACjCuB,IAAU,MAAM;AACpB,MAAA9B,EAAW,EAAK,GAChBe,EAAS,EAAI;AAAA,IAAA,GAETgB,IAAmB,MAAM5B,EAAYoB,EAAQ,QAAQ,GACrDS,IAAe,MAAM3B,EAAekB,EAAQ,WAAW,GACvDU,IAAiB,MAAM;AAC3B,MAAAd,EAAcI,EAAQ,KAAK,GAC3BF,EAAeE,EAAQ,MAAM;AAAA,IAAA,GAEzBW,IAAe,MAAMjB,EAAqBM,EAAQ,YAAY,GAC9DY,IAAa,MAAMxB,EAAYzB,EAAiBqC,EAAQ,QAAQ,CAAC;AAEvE,WAAAA,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASE,CAAO,GACzCF,EAAQ,iBAAiB,WAAWG,CAAS,GAC7CH,EAAQ,iBAAiB,YAAYY,CAAU,GAC/CZ,EAAQ,iBAAiB,WAAWI,CAAS,GAC7CJ,EAAQ,iBAAiB,WAAWK,CAAS,GAC7CL,EAAQ,iBAAiB,UAAUM,CAAQ,GAC3CN,EAAQ,iBAAiB,SAASO,CAAO,GACzCP,EAAQ,iBAAiB,kBAAkBQ,CAAgB,GAC3DR,EAAQ,iBAAiB,cAAcS,CAAY,GACnDT,EAAQ,iBAAiB,gBAAgBU,CAAc,GACvDV,EAAQ,iBAAiB,cAAcW,CAAY,GAE5C,MAAM;AACX,MAAAX,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASE,CAAO,GAC5CF,EAAQ,oBAAoB,WAAWG,CAAS,GAChDH,EAAQ,oBAAoB,YAAYY,CAAU,GAClDZ,EAAQ,oBAAoB,WAAWI,CAAS,GAChDJ,EAAQ,oBAAoB,WAAWK,CAAS,GAChDL,EAAQ,oBAAoB,UAAUM,CAAQ,GAC9CN,EAAQ,oBAAoB,SAASO,CAAO,GAC5CP,EAAQ,oBAAoB,kBAAkBQ,CAAgB,GAC9DR,EAAQ,oBAAoB,cAAcS,CAAY,GACtDT,EAAQ,oBAAoB,gBAAgBU,CAAc,GAC1DV,EAAQ,oBAAoB,cAAcW,CAAY;AAAA,IAAA;AAAA,EACxD,GACC,CAAC1C,KAAUC,EAAS,cAAcD,CAAM,GAAGG,EAAY,KAAK,CAAC;AAEhE,QAAMyC,IAAO,YAAY;AACvB,UAAMb,IAAU1B,EAAW;AAC3B,IAAK0B,KAEL,MAAMA,EAAQ,KAAA;AAAA,EAAK,GAGfc,IAAQ,MAAM;AAClB,IAAKxC,EAAW,WAChBA,EAAW,QAAQ,MAAA;AAAA,EAAM;AAiC3B,SAAO;AAAA,IACL,SAAAE;AAAA,IACA,UAAAG;AAAA,IACA,aAAAE;AAAA,IACA,SAAAE;AAAA,IACA,SAAAE;AAAA,IACA,UAAAE;AAAA,IACA,SAAAE;AAAA,IACA,OAAAE;AAAA,IACA,cAAAE;AAAA,IACA,OAAAE;AAAA,IACA,QAAAE;AAAA,IAEA,MAAAgB;AAAA,IACA,OAAAC;AAAA,IACA,QA7Ca,OAAOC,IAAQ,CAACvC,MACzBuC,IAAcF,EAAA,IACXC,EAAA;AAAA,IA4CP,MAzCW,CAACE,MAAiB;AAC7B,MAAK1C,EAAW,YAChBA,EAAW,QAAQ,cAAc,KAAK,IAAI,KAAK,IAAI0C,GAAM,CAAC,GAAGrC,CAAQ;AAAA,IAAA;AAAA,IAwCrE,cArCmB,CAACoC,MAAkB;AACtC,MAAKzC,EAAW,YAChBA,EAAW,QAAQ,SAAS,KAAK,IAAI,KAAK,IAAIyC,GAAO,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,IAoC1D,MAjCW,MAAM;AACjB,MAAKzC,EAAW,YAChBA,EAAW,QAAQ,QAAQ;AAAA,IAAA;AAAA,IAgC3B,QA7Ba,MAAM;AACnB,MAAKA,EAAW,YAChBA,EAAW,QAAQ,QAAQ;AAAA,IAAA;AAAA,IA4B3B,oBAzByB,CAACyC,MAAkB;AAC5C,MAAKzC,EAAW,YAChBA,EAAW,QAAQ,eAAeyC;AAAA,IAAA;AAAA,IAyBlC,GAAI,CAAC9C,KAAU,EAAE,KAAKG,EAAA;AAAA,EAAY;AAEtC;"}

package/dist/esm/hooks/usePostMessage/usePostMessage.mjs

@@ -1,20 +1,24 @@
-import { useRef as n, useEffect as o } from "react";
-const d = (e, t) => {
-  const a = n(t);
-  return a.current = t, o(() => {
-    const r = (s) => {
-      Array.isArray(e) && (!e.includes(s.origin) || !e.includes("*")) || s.origin !== e && e !== "*" || a.current(s.data, s);
+import { useRef as i, useEffect as u } from "react";
+const f = (s, t) => {
+  const o = i(t);
+  o.current = t;
+  const r = i(s);
+  return r.current = s, u(() => {
+    const n = (e) => {
+      if (Array.isArray(r.current)) {
+        if (!r.current.includes(e.origin)) return;
+      } else if (r.current !== "*" && e.origin !== r.current)
+        return;
+      o.current(e.data, e);
     };
-    return window.addEventListener("message", r), () => window.removeEventListener("message", r);
-  }, []), (r) => {
-    if (Array.isArray(e)) {
-      e.forEach((s) => window.postMessage(r, s));
-      return;
-    }
-    window.postMessage(r, e);
+    return window.addEventListener("message", n), () => window.removeEventListener("message", n);
+  }, []), (n) => {
+    if (Array.isArray(r.current))
+      return r.current.forEach((e) => window.postMessage(n, e));
+    window.postMessage(n, r.current);
   };
 };
 export {
-  d as usePostMessage
+  f as usePostMessage
 };
 //# sourceMappingURL=usePostMessage.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePostMessage.mjs","sources":["../../../../src/hooks/usePostMessage/usePostMessage.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport type UsePostMessageReturn<Message> = (message: Message) => void;\n\n/**\n * @name usePostMessage\n * @description - Hook that allows you to receive messages from other origins\n * @category Browser\n * @usage low\n *\n * @overload\n * @template Message The message data type\n * @param {string | string[]} origin The origin of the message\n * @param {(message: Message) => Message} callback callback to get received message\n * @returns {(message: Message) => void} An object containing the current message\n *\n * @example\n * const postMessage = usePostMessage();\n */\nexport const usePostMessage = <Message>(\n  origin: string | '*' | string[],\n  callback: (message: Message, event: MessageEvent<Message>) => void\n): UsePostMessageReturn<Message> => {\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    const onMessage = (event: MessageEvent<Message>) => {\n      if (\n        (Array.isArray(origin) && (!origin.includes(event.origin) || !origin.includes('*'))) ||\n        (event.origin !== origin && origin !== '*')\n      )\n        return;\n\n      internalCallbackRef.current(event.data as Message, event);\n    };\n\n    window.addEventListener('message', onMessage);\n    return () => window.removeEventListener('message', onMessage);\n  }, []);\n\n  const postMessage = (message: Message) => {\n    if (Array.isArray(origin)) {\n      origin.forEach((origin) => window.postMessage(message, origin));\n      return;\n    }\n\n    window.postMessage(message, origin);\n  };\n\n  return postMessage;\n};\n"],"names":["usePostMessage","origin","callback","internalCallbackRef","useRef","useEffect","onMessage","event","message"],"mappings":";AAmBO,MAAMA,IAAiB,CAC5BC,GACAC,MACkC;AAClC,QAAMC,IAAsBC,EAAOF,CAAQ;AAC3C,SAAAC,EAAoB,UAAUD,GAE9BG,EAAU,MAAM;AACd,UAAMC,IAAY,CAACC,MAAiC;AAClD,MACG,MAAM,QAAQN,CAAM,MAAM,CAACA,EAAO,SAASM,EAAM,MAAM,KAAK,CAACN,EAAO,SAAS,GAAG,MAChFM,EAAM,WAAWN,KAAUA,MAAW,OAIzCE,EAAoB,QAAQI,EAAM,MAAiBA,CAAK;AAAA,IAAA;AAG1D,kBAAO,iBAAiB,WAAWD,CAAS,GACrC,MAAM,OAAO,oBAAoB,WAAWA,CAAS;AAAA,EAAA,GAC3D,EAAE,GAEe,CAACE,MAAqB;AACxC,QAAI,MAAM,QAAQP,CAAM,GAAG;AACzB,MAAAA,EAAO,QAAQ,CAACA,MAAW,OAAO,YAAYO,GAASP,CAAM,CAAC;AAC9D;AAAA,IAAA;AAGF,WAAO,YAAYO,GAASP,CAAM;AAAA,EAAA;AAItC;"}
+{"version":3,"file":"usePostMessage.mjs","sources":["../../../../src/hooks/usePostMessage/usePostMessage.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** The origin of the message */\nexport type UsePostMessageOrigin = string | '*' | string[];\n\n/** The return type of the usePostMessage hook */\nexport type UsePostMessageReturn<Message> = (message: Message) => void;\n\n/**\n * @name usePostMessage\n * @description - Hook that allows you to receive messages from other origins\n * @category Browser\n * @usage low\n *\n * @overload\n * @template Message The message data type\n * @param {UsePostMessageOrigin} origin The origin of the message\n * @param {(message: Message) => Message} callback callback to get received message\n * @returns {(message: Message) => void} An object containing the current message\n *\n * @example\n * const postMessage = usePostMessage();\n */\nexport const usePostMessage = <Message>(\n  origin: UsePostMessageOrigin,\n  callback: (message: Message, event: MessageEvent<Message>) => void\n): UsePostMessageReturn<Message> => {\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalOriginRef = useRef(origin);\n  internalOriginRef.current = origin;\n\n  useEffect(() => {\n    const onMessage = (event: MessageEvent<Message>) => {\n      if (Array.isArray(internalOriginRef.current)) {\n        if (!internalOriginRef.current.includes(event.origin)) return;\n      } else if (internalOriginRef.current !== '*' && event.origin !== internalOriginRef.current)\n        return;\n\n      internalCallbackRef.current(event.data as Message, event);\n    };\n\n    window.addEventListener('message', onMessage);\n    return () => window.removeEventListener('message', onMessage);\n  }, []);\n\n  const postMessage = (message: Message) => {\n    if (Array.isArray(internalOriginRef.current))\n      return internalOriginRef.current.forEach((origin) => window.postMessage(message, origin));\n\n    window.postMessage(message, internalOriginRef.current);\n  };\n\n  return postMessage;\n};\n"],"names":["usePostMessage","origin","callback","internalCallbackRef","useRef","internalOriginRef","useEffect","onMessage","event","message"],"mappings":";AAuBO,MAAMA,IAAiB,CAC5BC,GACAC,MACkC;AAClC,QAAMC,IAAsBC,EAAOF,CAAQ;AAC3C,EAAAC,EAAoB,UAAUD;AAC9B,QAAMG,IAAoBD,EAAOH,CAAM;AACvC,SAAAI,EAAkB,UAAUJ,GAE5BK,EAAU,MAAM;AACd,UAAMC,IAAY,CAACC,MAAiC;AAClD,UAAI,MAAM,QAAQH,EAAkB,OAAO;AACzC,YAAI,CAACA,EAAkB,QAAQ,SAASG,EAAM,MAAM,EAAG;AAAA,iBAC9CH,EAAkB,YAAY,OAAOG,EAAM,WAAWH,EAAkB;AACjF;AAEF,MAAAF,EAAoB,QAAQK,EAAM,MAAiBA,CAAK;AAAA,IAAA;AAG1D,kBAAO,iBAAiB,WAAWD,CAAS,GACrC,MAAM,OAAO,oBAAoB,WAAWA,CAAS;AAAA,EAAA,GAC3D,EAAE,GAEe,CAACE,MAAqB;AACxC,QAAI,MAAM,QAAQJ,EAAkB,OAAO;AACzC,aAAOA,EAAkB,QAAQ,QAAQ,CAACJ,MAAW,OAAO,YAAYQ,GAASR,CAAM,CAAC;AAE1F,WAAO,YAAYQ,GAASJ,EAAkB,OAAO;AAAA,EAAA;AAIzD;"}

package/dist/esm/hooks/useSticky/useSticky.mjs

@@ -20,7 +20,7 @@ const R = ((...o) => {
     return e.addEventListener("scroll", n), window.addEventListener("resize", n), window.addEventListener("orientationchange", n), n(), () => {
       e.removeEventListener("scroll", n), window.removeEventListener("resize", n), window.removeEventListener("orientationchange", n);
     };
-  }, [t && s.getRawElement(t), i.state, c, r?.root]), t ? u : {
+  }, [t && s.getRawElement(t), i.state, c, r?.root]), t ? { stuck: u } : {
     stuck: u,
     ref: i
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useSticky.mjs","sources":["../../../../src/hooks/useSticky/useSticky.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 sticky return type */\nexport interface UseStickyReturn {\n  stuck: boolean;\n}\n\n/** The use sticky axis type */\nexport type UseStickyAxis = 'horizontal' | 'vertical';\n\n/** The use sticky options type */\nexport interface UseStickyOptions {\n  axis?: UseStickyAxis;\n  root?: HookTarget;\n}\n\nexport interface UseSticky {\n  (target: HookTarget, options?: UseStickyOptions): boolean;\n\n  <Target extends Element>(\n    options?: UseStickyOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseStickyReturn;\n}\n\n/**\n * @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n *\n * @example\n * const stuck  = useSticky(ref);\n *\n * @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ stickyRef: StateRef<Target> } & UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (target ? params[1] : params[0]) as UseStickyOptions;\n  const axis = options?.axis ?? 'vertical';\n\n  const internalRef = useRefState<Element>();\n  const [stuck, setStuck] = useState(false);\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n    const elementOffsetTop =\n      element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n    const elementOffsetLeft =\n      element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n    const onSticky = () => {\n      if (axis === 'vertical') {\n        const scrollTop = root.scrollTop;\n        setStuck(scrollTop >= elementOffsetTop);\n      }\n\n      if (axis === 'horizontal') {\n        const scrollLeft = root.scrollLeft;\n        setStuck(scrollLeft >= elementOffsetLeft);\n      }\n    };\n\n    root.addEventListener('scroll', onSticky);\n    window.addEventListener('resize', onSticky);\n    window.addEventListener('orientationchange', onSticky);\n\n    onSticky();\n\n    return () => {\n      root.removeEventListener('scroll', onSticky);\n      window.removeEventListener('resize', onSticky);\n      window.removeEventListener('orientationchange', onSticky);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state, axis, options?.root]);\n\n  if (target) return stuck;\n  return {\n    stuck,\n    ref: internalRef\n  };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":";;;AA0DO,MAAMA,KAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAOD,GAAS,QAAQ,YAExBE,IAAcC,EAAA,GACd,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAwCxC,SAtCAC,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAQT,GAAS,OAAOD,EAAS,WAAWC,EAAQ,IAAI,IAAI,UAC5DU,IACJF,EAAQ,wBAAwB,MAAMC,EAAK,YAAYA,EAAK,sBAAA,EAAwB,KAChFE,IACJH,EAAQ,wBAAwB,OAAOC,EAAK,aAAaA,EAAK,sBAAA,EAAwB,MAElFG,IAAW,MAAM;AACrB,UAAIX,MAAS,YAAY;AACvB,cAAMY,IAAYJ,EAAK;AACvB,QAAAJ,EAASQ,KAAaH,CAAgB;AAAA,MAAA;AAGxC,UAAIT,MAAS,cAAc;AACzB,cAAMa,IAAaL,EAAK;AACxB,QAAAJ,EAASS,KAAcH,CAAiB;AAAA,MAAA;AAAA,IAC1C;AAGF,WAAAF,EAAK,iBAAiB,UAAUG,CAAQ,GACxC,OAAO,iBAAiB,UAAUA,CAAQ,GAC1C,OAAO,iBAAiB,qBAAqBA,CAAQ,GAErDA,EAAA,GAEO,MAAM;AACX,MAAAH,EAAK,oBAAoB,UAAUG,CAAQ,GAC3C,OAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,qBAAqBA,CAAQ;AAAA,IAAA;AAAA,EAC1D,GACC,CAACd,KAAUC,EAAS,cAAcD,CAAM,GAAGI,EAAY,OAAOD,GAAMD,GAAS,IAAI,CAAC,GAEjFF,IAAeM,IACZ;AAAA,IACL,OAAAA;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}
+{"version":3,"file":"useSticky.mjs","sources":["../../../../src/hooks/useSticky/useSticky.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 sticky return type */\nexport interface UseStickyReturn {\n  stuck: boolean;\n}\n\n/** The use sticky axis type */\nexport type UseStickyAxis = 'horizontal' | 'vertical';\n\n/** The use sticky options type */\nexport interface UseStickyOptions {\n  axis?: UseStickyAxis;\n  root?: HookTarget;\n}\n\nexport interface UseSticky {\n  (target: HookTarget, options?: UseStickyOptions): UseStickyReturn;\n\n  <Target extends Element>(\n    options?: UseStickyOptions,\n    target?: never\n  ): UseStickyReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck } = useSticky(ref);\n *\n * @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ ref: StateRef<Target> } & UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (target ? params[1] : params[0]) as UseStickyOptions;\n  const axis = options?.axis ?? 'vertical';\n\n  const internalRef = useRefState<Element>();\n  const [stuck, setStuck] = useState(false);\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n    const elementOffsetTop =\n      element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n    const elementOffsetLeft =\n      element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n    const onSticky = () => {\n      if (axis === 'vertical') {\n        const scrollTop = root.scrollTop;\n        setStuck(scrollTop >= elementOffsetTop);\n      }\n\n      if (axis === 'horizontal') {\n        const scrollLeft = root.scrollLeft;\n        setStuck(scrollLeft >= elementOffsetLeft);\n      }\n    };\n\n    root.addEventListener('scroll', onSticky);\n    window.addEventListener('resize', onSticky);\n    window.addEventListener('orientationchange', onSticky);\n\n    onSticky();\n\n    return () => {\n      root.removeEventListener('scroll', onSticky);\n      window.removeEventListener('resize', onSticky);\n      window.removeEventListener('orientationchange', onSticky);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state, axis, options?.root]);\n\n  if (target) return { stuck };\n  return {\n    stuck,\n    ref: internalRef\n  };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":";;;AA0DO,MAAMA,KAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAOD,GAAS,QAAQ,YAExBE,IAAcC,EAAA,GACd,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAwCxC,SAtCAC,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAQT,GAAS,OAAOD,EAAS,WAAWC,EAAQ,IAAI,IAAI,UAC5DU,IACJF,EAAQ,wBAAwB,MAAMC,EAAK,YAAYA,EAAK,sBAAA,EAAwB,KAChFE,IACJH,EAAQ,wBAAwB,OAAOC,EAAK,aAAaA,EAAK,sBAAA,EAAwB,MAElFG,IAAW,MAAM;AACrB,UAAIX,MAAS,YAAY;AACvB,cAAMY,IAAYJ,EAAK;AACvB,QAAAJ,EAASQ,KAAaH,CAAgB;AAAA,MAAA;AAGxC,UAAIT,MAAS,cAAc;AACzB,cAAMa,IAAaL,EAAK;AACxB,QAAAJ,EAASS,KAAcH,CAAiB;AAAA,MAAA;AAAA,IAC1C;AAGF,WAAAF,EAAK,iBAAiB,UAAUG,CAAQ,GACxC,OAAO,iBAAiB,UAAUA,CAAQ,GAC1C,OAAO,iBAAiB,qBAAqBA,CAAQ,GAErDA,EAAA,GAEO,MAAM;AACX,MAAAH,EAAK,oBAAoB,UAAUG,CAAQ,GAC3C,OAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,qBAAqBA,CAAQ;AAAA,IAAA;AAAA,EAC1D,GACC,CAACd,KAAUC,EAAS,cAAcD,CAAM,GAAGI,EAAY,OAAOD,GAAMD,GAAS,IAAI,CAAC,GAEjFF,IAAe,EAAE,OAAAM,EAAA,IACd;AAAA,IACL,OAAAA;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}

package/dist/esm/hooks/useWindowScroll/useWindowScroll.mjs

@@ -7,10 +7,7 @@ const i = ({
   const r = { behavior: e };
   typeof o == "number" && (r.left = o), typeof n == "number" && (r.top = n), window.scrollTo(r);
 }, w = () => {
-  const [o, n] = t({
-    x: typeof window < "u" ? window.scrollX : Number.POSITIVE_INFINITY,
-    y: typeof window < "u" ? window.scrollY : Number.POSITIVE_INFINITY
-  });
+  const [o, n] = t(() => typeof window > "u" ? { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY } : { x: window.scrollX, y: window.scrollY });
   return s(() => {
     const e = () => n({ x: window.scrollX, y: window.scrollY });
     return window.addEventListener("scroll", e), window.addEventListener("resize", e), () => {

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

@@ -1 +1 @@
-{"version":3,"file":"useWindowScroll.mjs","sources":["../../../../src/hooks/useWindowScroll/useWindowScroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface ScrollPosition {\n  x: number;\n  y: number;\n}\n\nexport const scrollTo = ({\n  x,\n  y,\n  behavior = 'smooth'\n}: Partial<ScrollPosition & ScrollOptions>) => {\n  const scrollOptions: ScrollToOptions = { behavior };\n  if (typeof x === 'number') scrollOptions.left = x;\n  if (typeof y === 'number') scrollOptions.top = y;\n  window.scrollTo(scrollOptions);\n};\n\n/**\n * @name useWindowScroll\n * @description - Hook that manages the window scroll position\n * @category Sensors\n * @usage low\n *\n * @returns {UseWindowScrollReturn} An object containing the current window scroll position\n *\n * @example\n * const { value, scrollTo } = useWindowScroll();\n */\nexport const useWindowScroll = () => {\n  const [value, setValue] = useState<ScrollPosition>({\n    x: typeof window !== 'undefined' ? window.scrollX : Number.POSITIVE_INFINITY,\n    y: typeof window !== 'undefined' ? window.scrollY : Number.POSITIVE_INFINITY\n  });\n\n  useEffect(() => {\n    const onChange = () => setValue({ x: window.scrollX, y: window.scrollY });\n    window.addEventListener('scroll', onChange);\n    window.addEventListener('resize', onChange);\n    return () => {\n      window.removeEventListener('scroll', onChange);\n      window.removeEventListener('resize', onChange);\n    };\n  }, []);\n\n  return { value, scrollTo };\n};\n"],"names":["scrollTo","x","y","behavior","scrollOptions","useWindowScroll","value","setValue","useState","useEffect","onChange"],"mappings":";AAOO,MAAMA,IAAW,CAAC;AAAA,EACvB,GAAAC;AAAA,EACA,GAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAA+C;AAC7C,QAAMC,IAAiC,EAAE,UAAAD,EAAA;AACzC,EAAI,OAAOF,KAAM,aAAUG,EAAc,OAAOH,IAC5C,OAAOC,KAAM,aAAUE,EAAc,MAAMF,IAC/C,OAAO,SAASE,CAAa;AAC/B,GAaaC,IAAkB,MAAM;AACnC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAyB;AAAA,IACjD,GAAG,OAAO,SAAW,MAAc,OAAO,UAAU,OAAO;AAAA,IAC3D,GAAG,OAAO,SAAW,MAAc,OAAO,UAAU,OAAO;AAAA,EAAA,CAC5D;AAED,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAW,MAAMH,EAAS,EAAE,GAAG,OAAO,SAAS,GAAG,OAAO,SAAS;AACxE,kBAAO,iBAAiB,UAAUG,CAAQ,GAC1C,OAAO,iBAAiB,UAAUA,CAAQ,GACnC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,UAAUA,CAAQ;AAAA,IAAA;AAAA,EAC/C,GACC,EAAE,GAEE,EAAE,OAAAJ,GAAO,UAAAN,EAAA;AAClB;"}
+{"version":3,"file":"useWindowScroll.mjs","sources":["../../../../src/hooks/useWindowScroll/useWindowScroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface ScrollPosition {\n  x: number;\n  y: number;\n}\n\nexport const scrollTo = ({\n  x,\n  y,\n  behavior = 'smooth'\n}: Partial<ScrollPosition & ScrollOptions>) => {\n  const scrollOptions: ScrollToOptions = { behavior };\n  if (typeof x === 'number') scrollOptions.left = x;\n  if (typeof y === 'number') scrollOptions.top = y;\n  window.scrollTo(scrollOptions);\n};\n\n/**\n * @name useWindowScroll\n * @description - Hook that manages the window scroll position\n * @category Sensors\n * @usage low\n *\n * @returns {UseWindowScrollReturn} An object containing the current window scroll position\n *\n * @example\n * const { value, scrollTo } = useWindowScroll();\n */\nexport const useWindowScroll = () => {\n  const [value, setValue] = useState<ScrollPosition>(() => {\n    if (typeof window === 'undefined')\n      return { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY };\n    return { x: window.scrollX, y: window.scrollY };\n  });\n\n  useEffect(() => {\n    const onChange = () => setValue({ x: window.scrollX, y: window.scrollY });\n    window.addEventListener('scroll', onChange);\n    window.addEventListener('resize', onChange);\n    return () => {\n      window.removeEventListener('scroll', onChange);\n      window.removeEventListener('resize', onChange);\n    };\n  }, []);\n\n  return { value, scrollTo };\n};\n"],"names":["scrollTo","x","y","behavior","scrollOptions","useWindowScroll","value","setValue","useState","useEffect","onChange"],"mappings":";AAOO,MAAMA,IAAW,CAAC;AAAA,EACvB,GAAAC;AAAA,EACA,GAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAA+C;AAC7C,QAAMC,IAAiC,EAAE,UAAAD,EAAA;AACzC,EAAI,OAAOF,KAAM,aAAUG,EAAc,OAAOH,IAC5C,OAAOC,KAAM,aAAUE,EAAc,MAAMF,IAC/C,OAAO,SAASE,CAAa;AAC/B,GAaaC,IAAkB,MAAM;AACnC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAyB,MAC7C,OAAO,SAAW,MACb,EAAE,GAAG,OAAO,mBAAmB,GAAG,OAAO,kBAAA,IAC3C,EAAE,GAAG,OAAO,SAAS,GAAG,OAAO,QAAA,CACvC;AAED,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAW,MAAMH,EAAS,EAAE,GAAG,OAAO,SAAS,GAAG,OAAO,SAAS;AACxE,kBAAO,iBAAiB,UAAUG,CAAQ,GAC1C,OAAO,iBAAiB,UAAUA,CAAQ,GACnC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,UAAUA,CAAQ;AAAA,IAAA;AAAA,EAC/C,GACC,EAAE,GAEE,EAAE,OAAAJ,GAAO,UAAAN,EAAA;AAClB;"}

package/dist/types/hooks/useActiveElement/useActiveElement.d.ts

@@ -1,13 +1,14 @@
 import { HookTarget } from '../../utils/helpers';
 import { StateRef } from '../useRefState/useRefState';
 /** The use active element return type */
-export type UseActiveElementReturn<ActiveElement extends HTMLElement = HTMLElement> = ActiveElement | null;
+export interface UseActiveElementReturn<ActiveElement extends HTMLElement = HTMLElement> {
+    value: ActiveElement | null;
+}
 export interface UseActiveElement {
     (): UseActiveElementReturn;
     <Target extends Element, ActiveElement extends HTMLElement = HTMLElement>(target?: never): {
         ref: StateRef<Target>;
-        value: UseActiveElementReturn<ActiveElement>;
-    };
+    } & UseActiveElementReturn<ActiveElement>;
     <ActiveElement extends HTMLElement = HTMLElement>(target: HookTarget): UseActiveElementReturn<ActiveElement>;
 }
 /**

package/dist/types/hooks/useAutoScroll/useAutoScroll.d.ts

@@ -9,7 +9,9 @@ export interface UseAutoScrollOptions {
 }
 export interface UseAutoScroll {
     (target: HookTarget, options?: UseAutoScrollOptions): void;
-    <Target extends HTMLElement>(options?: UseAutoScrollOptions): StateRef<Target>;
+    <Target extends HTMLElement>(options?: UseAutoScrollOptions): {
+        ref: StateRef<Target>;
+    };
 }
 /**
  * @name useAutoScroll
@@ -28,9 +30,9 @@ export interface UseAutoScroll {
  * @overload
  * @template Target
  * @param {boolean} [options.enabled] Whether auto-scrolling is enabled
- * @returns {StateRef<Target>} A React ref to attach to the list element
+ * @returns {{ ref: StateRef<Target> }} A React ref to attach to the list element
  *
  * @example
- * const ref = useAutoScroll();
+ * const { ref } = useAutoScroll();
  */
 export declare const useAutoScroll: UseAutoScroll;

package/dist/types/hooks/useClickOutside/useClickOutside.d.ts

@@ -2,7 +2,9 @@ import { HookTarget } from '../../utils/helpers';
 import { StateRef } from '../useRefState/useRefState';
 export interface UseClickOutside {
     (target: HookTarget, callback: (event: Event) => void): void;
-    <Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;
+    <Target extends Element>(callback: (event: Event) => void, target?: never): {
+        ref: StateRef<Target>;
+    };
 }
 /**
  * @name useClickOutside
@@ -21,10 +23,10 @@ export interface UseClickOutside {
  * @overload
  * @template Target The target element(s)
  * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected
- * @returns {StateRef<Target>} A ref to attach to the target element
+ * @returns {{ ref: StateRef<Target> }} A ref to attach to the target element
  *
  * @example
- * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));
+ * const { ref } = useClickOutside<HTMLDivElement>(() => console.log('click outside'));
  *
  * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}
  */

package/dist/types/hooks/useDoubleClick/useDoubleClick.d.ts

@@ -9,8 +9,10 @@ export interface UseDoubleClickOptions {
     onSingleClick?: (event: DoubleClickEvents) => void;
 }
 export interface UseDoubleClick {
-    (target: HookTarget, callback: (event: DoubleClickEvents) => void, options?: UseDoubleClickOptions): boolean;
-    <Target extends Element>(callback: (event: DoubleClickEvents) => void, options?: UseDoubleClickOptions, target?: never): StateRef<Target>;
+    (target: HookTarget, callback: (event: DoubleClickEvents) => void, options?: UseDoubleClickOptions): void;
+    <Target extends Element>(callback: (event: DoubleClickEvents) => void, options?: UseDoubleClickOptions, target?: never): {
+        ref: StateRef<Target>;
+    };
 }
 export declare const DEFAULT_THRESHOLD_TIME = 300;
 /**
@@ -23,7 +25,7 @@ export declare const DEFAULT_THRESHOLD_TIME = 300;
  * @param {HookTarget} target The target element to be double clicked
  * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click
  * @param {UseDoubleClickOptions} [options] The options for the double click
- * @returns {boolean} The double clicking state
+ * @returns {void} The double clicking state
  *
  * @example
  * useDoubleClick(ref, () => console.log('double clicked'));
@@ -32,10 +34,10 @@ export declare const DEFAULT_THRESHOLD_TIME = 300;
  * @template Target The target element
  * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click
  * @param {UseDoubleClickOptions} [options] The options for the double click
- * @returns {boolean} The double clicking state
+ * @returns {{ ref: StateRef<Target> }} The double clicking state
  *
  * @example
- * const ref = useDoubleClick(() => console.log('double clicked'));
+ * const { ref } = useDoubleClick(() => console.log('double clicked'));
  *
  * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}
  */

package/dist/types/hooks/useFocusTrap/useFocusTrap.d.ts

@@ -27,7 +27,7 @@ export interface UseFocusTrap {
  * @overload
  * @param {HookTarget} target The target element for focus trap
  * @param {boolean} [active=true] Whether focus trap is active
- * @returns {UseFocusTrapReturn} Object with control methods and state
+ * @returns {UseFocusTrapReturn} Object with the focus trap state and methods
  *
  * @example
  * const { active, disable, toggle, enable } = useFocusTrap(ref, true);
@@ -35,7 +35,7 @@ export interface UseFocusTrap {
  * @overload
  * @template Target The target element type
  * @param {boolean} [active=true] Whether focus trap is active
- * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls
+ * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with the focus trap state and methods
  *
  * @example
  * const { ref, active, disable, toggle, enable } = useFocusTrap(true);

package/dist/types/hooks/useHash/useHash.d.ts

@@ -9,7 +9,12 @@ export interface UseHashOptions {
     onChange?: (hash: string) => void;
 }
 /** The use hash return type */
-type UseHashReturn = [string, (value: string) => void];
+interface UseHashReturn {
+    /** The hash value */
+    value: string;
+    /** The function to set the hash value */
+    set: (value: string) => void;
+}
 export interface UseHash {
     (initialValue?: string, options?: UseHashOptions): UseHashReturn;
     (options?: UseHashOptions): UseHashReturn;
@@ -31,7 +36,7 @@ export interface UseHash {
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
  *
  * @example
- * const [hash, setHash] = useHash("initial");
+ * const { value, set } = useHash("initial");
  *
  * @overload
  * @param {string} [initialValue] The initial hash value if no hash exists
@@ -39,7 +44,7 @@ export interface UseHash {
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
  *
  * @example
- * const [hash, setHash] = useHash("initial", (newHash) => console.log('callback'));
+ * const { value, set } = useHash("initial", (newHash) => console.log('callback'));
  *
  * @overload
  * @param {UseHashOptions} [options] Configuration options
@@ -49,14 +54,14 @@ export interface UseHash {
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
  *
  * @example
- * const [hash, setHash] = useHash();
+ * const { value, set } = useHash();
  *
  * @overload
  * @param {(hash: string) => void} [callback] Callback function called when hash changes
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
  *
  * @example
- * const [hash, setHash] = useHash((newHash) => console.log('callback'));
+ * const { value, set } = useHash((newHash) => console.log('callback'));
  */
 export declare const useHash: UseHash;
 export {};

package/dist/types/hooks/useHover/useHover.d.ts

@@ -9,18 +9,20 @@ export interface UseHoverOptions {
     /** The on leave callback */
     onLeave?: (event: Event) => void;
 }
+/** The use hover return type */
 export interface UseHoverReturn {
+    /** The value of the hover */
     value: boolean;
 }
 export interface UseHover {
-    (target: HookTarget, callback?: (event: Event) => void): boolean;
-    (target: HookTarget, options?: UseHoverOptions): boolean;
-    <Target extends Element>(callback?: (event: Event) => void, target?: never): {
+    (target: HookTarget, callback?: (event: Event) => void): UseHoverReturn;
+    (target: HookTarget, options?: UseHoverOptions): UseHoverReturn;
+    <Target extends Element>(callback?: (event: Event) => void, target?: never): UseHoverReturn & {
         ref: StateRef<Target>;
-    } & UseHoverReturn;
-    <Target extends Element>(options?: UseHoverOptions, target?: never): {
+    };
+    <Target extends Element>(options?: UseHoverOptions, target?: never): UseHoverReturn & {
         ref: StateRef<Target>;
-    } & UseHoverReturn;
+    };
 }
 /**
  * @name useHover

package/dist/types/hooks/useInfiniteScroll/useInfiniteScroll.d.ts

@@ -7,11 +7,17 @@ export interface UseInfiniteScrollOptions {
     /** The distance in pixels to trigger the callback */
     distance?: number;
 }
+/** The use infinite scroll return type */
+export interface UseInfiniteScrollReturn {
+    /** The loading state of the infinite scroll */
+    loading: boolean;
+    /** The ref to attach to the element */
+    ref: StateRef<Element>;
+}
 export interface UseInfiniteScroll {
-    (target: HookTarget, callback: (event: Event) => void, options?: UseInfiniteScrollOptions): boolean;
-    <Target extends Element>(callback: (event: Event) => void, options?: UseInfiniteScrollOptions, target?: never): {
+    (target: HookTarget, callback: (event: Event) => void, options?: UseInfiniteScrollOptions): UseInfiniteScrollReturn;
+    <Target extends Element>(callback: (event: Event) => void, options?: UseInfiniteScrollOptions, target?: never): UseInfiniteScrollReturn & {
         ref: StateRef<Target>;
-        loading: boolean;
     };
 }
 /**
@@ -25,7 +31,7 @@ export interface UseInfiniteScroll {
  * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected
  * @param {number} [options.distance=10] The distance in pixels to trigger the callback
  * @param {string} [options.direction='bottom'] The direction to trigger the callback
- * @returns {{ ref: StateRef<Target>, loading: boolean }} An object containing the ref and loading
+ * @returns {UseInfiniteScrollReturn & { ref: StateRef<Target> }} An object containing the ref and loading
  *
  * @example
  * const { ref, loading } = useInfiniteScroll(() => console.log('infinite scroll'));
@@ -35,9 +41,9 @@ export interface UseInfiniteScroll {
  * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected
  * @param {number} [options.distance=10] The distance in pixels to trigger the callback
  * @param {string} [options.direction='bottom'] The direction to trigger the callback
- * @returns {boolean} A loading indicator of the infinite scroll
+ * @returns {UseInfiniteScrollReturn} An object containing the ref and loading
  *
  * @example
- * const loading = useInfiniteScroll(ref, () => console.log('infinite scroll'));
+ * const { loading } = useInfiniteScroll(ref, () => console.log('infinite scroll'));
  */
 export declare const useInfiniteScroll: UseInfiniteScroll;

package/dist/types/hooks/useKeyPress/useKeyPress.d.ts

@@ -4,10 +4,16 @@ import { StateRef } from '../useRefState/useRefState';
 export type UseKeyPressKey = string | string[];
 /** The callback function to be invoked when key is pressed */
 export type UseKeyPressCallback = (pressed: boolean, event: KeyboardEvent) => void;
+/** The use key press return type */
+export interface UseKeyPressReturn {
+    /** The pressed state of the key */
+    pressed: boolean;
+    /** The ref to attach to the element */
+    ref: StateRef<Element>;
+}
 export interface UseKeyPress {
-    (target: HookTarget | Window, key: UseKeyPressKey, callback?: UseKeyPressCallback): boolean;
-    <Target extends Element>(key: UseKeyPressKey, callback?: UseKeyPressCallback, target?: never): {
-        pressed: boolean;
+    (target: HookTarget | Window, key: UseKeyPressKey, callback?: UseKeyPressCallback): UseKeyPressReturn;
+    <Target extends Element>(key: UseKeyPressKey, callback?: UseKeyPressCallback, target?: never): UseKeyPressReturn & {
         ref: StateRef<Target>;
     };
 }
@@ -21,7 +27,7 @@ export interface UseKeyPress {
  * @param {HookTarget} [target=window] The target to attach the event listeners to
  * @param {UseKeyPressKey} key The key or keys to listen for
  * @param {(pressed: boolean, event: KeyboardEvent) => void} [callback] Callback function invoked when key is pressed
- * @returns {boolean} The pressed state of the key
+ * @returns {UseKeyPressReturn} An object containing the pressed state and ref
  *
  * @example
  * const isKeyPressed = useKeyPress(ref, 'a');

package/dist/types/hooks/useKeysPressed/useKeysPressed.d.ts

@@ -5,16 +5,16 @@ export interface UseKeysPressedOptions {
     /** Enable or disable the event listeners */
     enabled?: boolean;
 }
-export interface UseKeysPressed {
-    (target: HookTarget | Window, options?: UseKeysPressedOptions): Array<{
+export interface UseKeysPressedReturn {
+    /** The array of currently pressed keys */
+    value: Array<{
         key: string;
         code: string;
     }>;
-    <Target extends Element>(options?: UseKeysPressedOptions): {
-        value: Array<{
-            key: string;
-            code: string;
-        }>;
+}
+export interface UseKeysPressed {
+    (target: HookTarget | Window, options?: UseKeysPressedOptions): UseKeysPressedReturn;
+    <Target extends Element>(options?: UseKeysPressedOptions): UseKeysPressedReturn & {
         ref: StateRef<Target>;
     };
 }
@@ -27,15 +27,15 @@ export interface UseKeysPressed {
  * @overload
  * @param {HookTarget | Window} target DOM element or ref to attach keyboard listeners to
  * @param {UseKeysPressedOptions} [options.enabled=true] Enable or disable the event listeners
- * @returns {Array<{ key: string; code: string }>} Array of currently pressed keys with their key and code values
+ * @returns {UseKeysPressedReturn} Object containing the array of currently pressed keys
  *
  * @example
- * const pressedKeys = useKeysPressed(ref);
+ * const { value } = useKeysPressed(ref);
  *
  * @overload
  * @template Target - Type of the target DOM element
  * @param {UseKeysPressedOptions} [options] - Optional configuration options
- * @returns {{ keys: Array<{ key: string; code: string }>; ref: StateRef<Target> }} Object containing pressed keys array and ref to attach to a DOM element
+ * @returns {UseKeysPressedReturn & { ref: StateRef<Target> }} Object containing the array of currently pressed keys and ref to attach to the element
  *
  * @example
  * const { value, ref } = useKeysPressed();

package/dist/types/hooks/useLongPress/useLongPress.d.ts

@@ -7,12 +7,18 @@ export interface UseLongPressOptions {
     onFinish?: (event: LongPressEvents) => void;
     onStart?: (event: LongPressEvents) => void;
 }
+/** The use long press return type */
+export interface UseLongPressReturn {
+    /** The long pressing state */
+    pressed: boolean;
+    /** The ref to attach to the element */
+    ref: StateRef<Element>;
+}
 export interface UseLongPress {
-    (target: HookTarget, callback: (event: LongPressEvents) => void, options?: UseLongPressOptions): boolean;
+    (target: HookTarget, callback: (event: LongPressEvents) => void, options?: UseLongPressOptions): UseLongPressReturn;
     <Target extends Element>(callback: (event: LongPressEvents) => void, options?: UseLongPressOptions, target?: never): {
         ref: StateRef<Target>;
-        pressed: boolean;
-    };
+    } & UseLongPressReturn;
 }
 /**
  * @name useLongPress

package/dist/types/hooks/usePostMessage/usePostMessage.d.ts

@@ -1,3 +1,6 @@
+/** The origin of the message */
+export type UsePostMessageOrigin = string | '*' | string[];
+/** The return type of the usePostMessage hook */
 export type UsePostMessageReturn<Message> = (message: Message) => void;
 /**
  * @name usePostMessage
@@ -7,11 +10,11 @@ export type UsePostMessageReturn<Message> = (message: Message) => void;
  *
  * @overload
  * @template Message The message data type
- * @param {string | string[]} origin The origin of the message
+ * @param {UsePostMessageOrigin} origin The origin of the message
  * @param {(message: Message) => Message} callback callback to get received message
  * @returns {(message: Message) => void} An object containing the current message
  *
  * @example
  * const postMessage = usePostMessage();
  */
-export declare const usePostMessage: <Message>(origin: string | "*" | string[], callback: (message: Message, event: MessageEvent<Message>) => void) => UsePostMessageReturn<Message>;
+export declare const usePostMessage: <Message>(origin: UsePostMessageOrigin, callback: (message: Message, event: MessageEvent<Message>) => void) => UsePostMessageReturn<Message>;

package/dist/types/hooks/useSticky/useSticky.d.ts

@@ -12,10 +12,10 @@ export interface UseStickyOptions {
     root?: HookTarget;
 }
 export interface UseSticky {
-    (target: HookTarget, options?: UseStickyOptions): boolean;
-    <Target extends Element>(options?: UseStickyOptions, target?: never): {
+    (target: HookTarget, options?: UseStickyOptions): UseStickyReturn;
+    <Target extends Element>(options?: UseStickyOptions, target?: never): UseStickyReturn & {
         ref: StateRef<Target>;
-    } & UseStickyReturn;
+    };
 }
 /**
  * @name UseSticky
@@ -30,12 +30,12 @@ export interface UseSticky {
  * @returns {UseStickyReturn} The state of the sticky
  *
  * @example
- * const stuck  = useSticky(ref);
+ * const { stuck } = useSticky(ref);
  *
  * @overload
  * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component
  * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component
- * @returns {{ stickyRef: StateRef<Target> } & UseStickyReturn} The state of the sticky
+ * @returns {{ ref: StateRef<Target> } & UseStickyReturn} The state of the sticky
  *
  * @example
  * const { stuck, ref } = useSticky();