@siberiacancode/reactuse 0.3.0 → 0.3.2

package/dist/esm/hooks/useEventListener/useEventListener.mjs

@@ -1,21 +1,20 @@
-import { useRef as l, useEffect as E } from "react";
-import { useRefState as R } from "../useRefState/useRefState.mjs";
-import { isTarget as m } from "../../utils/helpers/isTarget.mjs";
-import { getElement as L } from "../../utils/helpers/getElement.mjs";
-const O = (...e) => {
-  const t = m(e[0]) ? e[0] : void 0, o = t ? e[1] : e[0], i = t ? e[2] : e[1], n = t ? e[3] : e[2], s = n?.enabled ?? !0, r = R(), c = l(i);
+import { useRef as l, useEffect as R } from "react";
+import { useRefState as L } from "../useRefState/useRefState.mjs";
+import { isTarget as d } from "../../utils/helpers/isTarget.mjs";
+const w = (...e) => {
+  const t = d(e[0]) ? e[0] : void 0, o = t ? e[1] : e[0], i = t ? e[2] : e[1], n = t ? e[3] : e[2], s = n?.enabled ?? !0, r = L(), c = l(i);
   c.current = i;
-  const d = l(n);
-  if (d.current = n, E(() => {
+  const v = l(n);
+  if (v.current = n, R(() => {
     if (!s || !t && !r.state) return;
-    const f = (t ? L(t) : r.current) ?? window, u = (v) => c.current(v);
-    return f.addEventListener(o, u, n), () => {
-      f.removeEventListener(o, u, n);
+    const u = (t ? d.getElement(t) : r.current) ?? window, f = (E) => c.current(E);
+    return u.addEventListener(o, f, n), () => {
+      u.removeEventListener(o, f, n);
     };
   }, [t, r.state, o, s]), !t)
     return r;
 };
 export {
-  O as useEventListener
+  w as useEventListener
 };
 //# sourceMappingURL=useEventListener.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.mjs","sources":["../../../../src/hooks/useEventListener/useEventListener.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use event listener options */\nexport type UseEventListenerOptions = {\n  enabled?: boolean;\n} & AddEventListenerOptions;\n\n/** The use event listener return type */\nexport type UseEventListenerReturn<Target extends Element> = StateRef<Target>;\n\nexport interface UseEventListener {\n  <Event extends keyof WindowEventMap = keyof WindowEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Window, event: WindowEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Document, event: DocumentEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Element, event: HTMLElementEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n    event: Event,\n    listener: (this: Target, event: HTMLElementEventMap[Event]) => void,\n    options?: UseEventListenerOptions,\n    target?: never\n  ): UseEventListenerReturn<Target>;\n\n  <\n    Target extends Element,\n    Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap\n  >(\n    event: Event,\n    listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,\n    options?: UseEventListenerOptions,\n    target?: never\n  ): UseEventListenerReturn<Target>;\n}\n\n/**\n * @name useEventListener\n * @description - Hook that attaches an event listener to the specified target\n * @category Browser\n * @usage necessary\n\n * @overload\n * @template Event Key of window event map\n * @param {Window} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Window, event: WindowEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(window, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @param {Document} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Document, event: DocumentEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(document, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {HookTarget} target The target element to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(ref, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event] | MediaQueryListEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {UseEventListenerReturn<Target>} A reference to the target element\n *\n * @example\n * const ref = useEventListener('click', () => console.log('click'));\n */\nexport const useEventListener = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const event = (target ? params[1] : params[0]) as string;\n  const listener = (target ? params[2] : params[1]) as (...arg: any[]) => undefined | void;\n  const options = (target ? params[3] : params[2]) as UseEventListenerOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n\n  const internalRef = useRefState();\n  const internalListenerRef = useRef(listener);\n  internalListenerRef.current = listener;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = ((target ? getElement(target) : internalRef.current) as Element) ?? window;\n\n    const listener = (event: Event) => internalListenerRef.current(event);\n\n    element.addEventListener(event, listener, options);\n    return () => {\n      element.removeEventListener(event, listener, options);\n    };\n  }, [target, internalRef.state, event, enabled]);\n\n  if (target) return;\n  return internalRef;\n}) as UseEventListener;\n"],"names":["useEventListener","params","target","isTarget","event","listener","options","enabled","internalRef","useRefState","internalListenerRef","useRef","internalOptionsRef","useEffect","element","getElement"],"mappings":";;;;AA6GO,MAAMA,IAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAASF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACtCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAUD,GAAS,WAAW,IAE9BE,IAAcC,EAAA,GACdC,IAAsBC,EAAON,CAAQ;AAC3C,EAAAK,EAAoB,UAAUL;AAC9B,QAAMO,IAAqBD,EAAOL,CAAO;AAgBzC,MAfAM,EAAmB,UAAUN,GAE7BO,EAAU,MAAM;AACd,QAAI,CAACN,KAAY,CAACL,KAAU,CAACM,EAAY,MAAQ;AAEjD,UAAMM,KAAYZ,IAASa,EAAWb,CAAM,IAAIM,EAAY,YAAwB,QAE9EH,IAAW,CAACD,MAAiBM,EAAoB,QAAQN,CAAK;AAEpE,WAAAU,EAAQ,iBAAiBV,GAAOC,GAAUC,CAAO,GAC1C,MAAM;AACX,MAAAQ,EAAQ,oBAAoBV,GAAOC,GAAUC,CAAO;AAAA,IAAA;AAAA,EACtD,GACC,CAACJ,GAAQM,EAAY,OAAOJ,GAAOG,CAAO,CAAC,GAE1C,CAAAL;AACJ,WAAOM;AACT;"}
+{"version":3,"file":"useEventListener.mjs","sources":["../../../../src/hooks/useEventListener/useEventListener.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use event listener options */\nexport type UseEventListenerOptions = {\n  enabled?: boolean;\n} & AddEventListenerOptions;\n\n/** The use event listener return type */\nexport type UseEventListenerReturn<Target extends Element> = StateRef<Target>;\n\nexport interface UseEventListener {\n  <Event extends keyof WindowEventMap = keyof WindowEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Window, event: WindowEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Document, event: DocumentEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Element, event: HTMLElementEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n    event: Event,\n    listener: (this: Target, event: HTMLElementEventMap[Event]) => void,\n    options?: UseEventListenerOptions,\n    target?: never\n  ): UseEventListenerReturn<Target>;\n\n  <\n    Target extends Element,\n    Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap\n  >(\n    event: Event,\n    listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,\n    options?: UseEventListenerOptions,\n    target?: never\n  ): UseEventListenerReturn<Target>;\n}\n\n/**\n * @name useEventListener\n * @description - Hook that attaches an event listener to the specified target\n * @category Browser\n * @usage necessary\n\n * @overload\n * @template Event Key of window event map\n * @param {Window} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Window, event: WindowEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(window, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @param {Document} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Document, event: DocumentEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(document, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {HookTarget} target The target element to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(ref, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event] | MediaQueryListEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {UseEventListenerReturn<Target>} A reference to the target element\n *\n * @example\n * const ref = useEventListener('click', () => console.log('click'));\n */\nexport const useEventListener = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const event = (target ? params[1] : params[0]) as string;\n  const listener = (target ? params[2] : params[1]) as (...arg: any[]) => undefined | void;\n  const options = (target ? params[3] : params[2]) as UseEventListenerOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n\n  const internalRef = useRefState();\n  const internalListenerRef = useRef(listener);\n  internalListenerRef.current = listener;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element =\n      ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n    const listener = (event: Event) => internalListenerRef.current(event);\n\n    element.addEventListener(event, listener, options);\n    return () => {\n      element.removeEventListener(event, listener, options);\n    };\n  }, [target, internalRef.state, event, enabled]);\n\n  if (target) return;\n  return internalRef;\n}) as UseEventListener;\n"],"names":["useEventListener","params","target","isTarget","event","listener","options","enabled","internalRef","useRefState","internalListenerRef","useRef","internalOptionsRef","useEffect","element"],"mappings":";;;AA6GO,MAAMA,IAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAASF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACtCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAUD,GAAS,WAAW,IAE9BE,IAAcC,EAAA,GACdC,IAAsBC,EAAON,CAAQ;AAC3C,EAAAK,EAAoB,UAAUL;AAC9B,QAAMO,IAAqBD,EAAOL,CAAO;AAiBzC,MAhBAM,EAAmB,UAAUN,GAE7BO,EAAU,MAAM;AACd,QAAI,CAACN,KAAY,CAACL,KAAU,CAACM,EAAY,MAAQ;AAEjD,UAAMM,KACFZ,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY,YAAwB,QAEzEH,IAAW,CAACD,MAAiBM,EAAoB,QAAQN,CAAK;AAEpE,WAAAU,EAAQ,iBAAiBV,GAAOC,GAAUC,CAAO,GAC1C,MAAM;AACX,MAAAQ,EAAQ,oBAAoBV,GAAOC,GAAUC,CAAO;AAAA,IAAA;AAAA,EACtD,GACC,CAACJ,GAAQM,EAAY,OAAOJ,GAAOG,CAAO,CAAC,GAE1C,CAAAL;AACJ,WAAOM;AACT;"}

package/dist/esm/hooks/useFocus/useFocus.mjs

@@ -1,27 +1,26 @@
-import { useState as F, useRef as E, useEffect as R } from "react";
-import { useRefState as g } from "../useRefState/useRefState.mjs";
-import { isTarget as L } from "../../utils/helpers/isTarget.mjs";
-import { getElement as j } from "../../utils/helpers/getElement.mjs";
-const V = (...e) => {
-  const n = L(e[0]) ? e[0] : void 0, o = n ? typeof e[1] == "object" ? e[1] : { onFocus: e[1] } : typeof e[0] == "object" ? e[0] : { onFocus: e[0] }, l = o?.enabled ?? !0, b = o?.initialValue ?? !1, [d, u] = F(b), c = g(), f = E(o);
+import { useState as R, useRef as F, useEffect as g } from "react";
+import { useRefState as L } from "../useRefState/useRefState.mjs";
+import { isTarget as m } from "../../utils/helpers/isTarget.mjs";
+const S = (...e) => {
+  const n = m(e[0]) ? e[0] : void 0, o = n ? typeof e[1] == "object" ? e[1] : { onFocus: e[1] } : typeof e[0] == "object" ? e[0] : { onFocus: e[0] }, l = o?.enabled ?? !0, b = o?.initialValue ?? !1, [d, u] = R(b), c = L(), f = F(o);
   f.current = o;
-  const r = E(null), i = () => {
+  const r = F(null), i = () => {
     r.current && (r.current.focus(), u(!0));
   }, a = () => {
     r.current && (r.current.blur(), u(!1));
   };
-  return R(() => {
+  return g(() => {
     if (!l || !n && !c.state) return;
-    const t = n ? j(n) : c.current;
+    const t = n ? m.getElement(n) : c.current;
     if (!t) return;
     r.current = t;
-    const m = (s) => {
+    const v = (s) => {
       f.current?.onFocus?.(s), (!i || s.target.matches?.(":focus-visible")) && u(!0);
-    }, v = (s) => {
+    }, E = (s) => {
       f.current?.onBlur?.(s), u(!1);
     };
-    return b && t.focus(), t.addEventListener("focus", m), t.addEventListener("blur", v), () => {
-      t.removeEventListener("focus", m), t.removeEventListener("blur", v);
+    return b && t.focus(), t.addEventListener("focus", v), t.addEventListener("blur", E), () => {
+      t.removeEventListener("focus", v), t.removeEventListener("blur", E);
     };
   }, [n, c.state, l]), n ? { focus: i, blur: a, focused: d } : {
     ref: c,
@@ -31,6 +30,6 @@ const V = (...e) => {
   };
 };
 export {
-  V as useFocus
+  S as useFocus
 };
 //# sourceMappingURL=useFocus.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFocus.mjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type */\nexport interface UseFocusOptions {\n  /** The enabled state of the focus hook */\n  enabled?: boolean;\n  /** The initial focus state of the target */\n  initialValue?: boolean;\n  /** The on blur callback */\n  onBlur?: (event: FocusEvent) => void;\n  /** The on focus callback */\n  onFocus?: (event: FocusEvent) => void;\n}\n\n/** The use focus return type */\nexport interface UseFocusReturn {\n  /** The boolean state value of the target */\n  focused: boolean;\n  /** Blur the target */\n  blur: () => void;\n  /** Focus the target */\n  focus: () => void;\n}\n\nexport interface UseFocus {\n  (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n  (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n  <Target extends Element>(\n    callback?: (event: FocusEvent) => void,\n    target?: never\n  ): UseFocusReturn & { ref: StateRef<Target> };\n\n  <Target extends Element>(\n    options?: UseFocusOptions,\n    target?: never\n  ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...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        : { onFocus: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onFocus: params[0] }\n  ) as UseFocusOptions | undefined;\n  const enabled = options?.enabled ?? true;\n  const initialValue = options?.initialValue ?? false;\n\n  const [focused, setFocused] = useState(initialValue);\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  const elementRef = useRef<HTMLElement | null>(null);\n\n  const focus = () => {\n    if (!elementRef.current) return;\n    elementRef.current.focus();\n    setFocused(true);\n  };\n\n  const blur = () => {\n    if (!elementRef.current) return;\n    elementRef.current.blur();\n    setFocused(false);\n  };\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n    const element = (target ? getElement(target) : internalRef.current) as HTMLElement;\n    if (!element) return;\n\n    elementRef.current = element;\n\n    const onFocus = (event: FocusEvent) => {\n      internalOptionsRef.current?.onFocus?.(event);\n      if (!focus || (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n    };\n\n    const onBlur = (event: FocusEvent) => {\n      internalOptionsRef.current?.onBlur?.(event);\n      setFocused(false);\n    };\n\n    if (initialValue) element.focus();\n\n    element.addEventListener('focus', onFocus);\n    element.addEventListener('blur', onBlur);\n\n    return () => {\n      element.removeEventListener('focus', onFocus);\n      element.removeEventListener('blur', onBlur);\n    };\n  }, [target, internalRef.state, enabled]);\n\n  if (target) return { focus, blur, focused };\n  return {\n    ref: internalRef,\n    focus,\n    blur,\n    focused\n  };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","getElement","onFocus","event","onBlur"],"mappings":";;;;AA4FO,MAAMA,IAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAErBI,IAAUD,GAAS,WAAW,IAC9BE,IAAeF,GAAS,gBAAgB,IAExC,CAACG,GAASC,CAAU,IAAIC,EAASH,CAAY,GAC7CI,IAAcC,EAAA,GACdC,IAAqBC,EAAOT,CAAO;AACzC,EAAAQ,EAAmB,UAAUR;AAE7B,QAAMU,IAAaD,EAA2B,IAAI,GAE5CE,IAAQ,MAAM;AAClB,IAAKD,EAAW,YAChBA,EAAW,QAAQ,MAAA,GACnBN,EAAW,EAAI;AAAA,EAAA,GAGXQ,IAAO,MAAM;AACjB,IAAKF,EAAW,YAChBA,EAAW,QAAQ,KAAA,GACnBN,EAAW,EAAK;AAAA,EAAA;AA+BlB,SA5BAS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAY,CAACH,KAAU,CAACQ,EAAY,MAAQ;AACjD,UAAMQ,IAAWhB,IAASiB,EAAWjB,CAAM,IAAIQ,EAAY;AAC3D,QAAI,CAACQ,EAAS;AAEd,IAAAJ,EAAW,UAAUI;AAErB,UAAME,IAAU,CAACC,MAAsB;AACrC,MAAAT,EAAmB,SAAS,UAAUS,CAAK,IACvC,CAACN,KAAUM,EAAM,OAAuB,UAAU,gBAAgB,QAAc,EAAI;AAAA,IAAA,GAGpFC,IAAS,CAACD,MAAsB;AACpC,MAAAT,EAAmB,SAAS,SAASS,CAAK,GAC1Cb,EAAW,EAAK;AAAA,IAAA;AAGlB,WAAIF,OAAsB,MAAA,GAE1BY,EAAQ,iBAAiB,SAASE,CAAO,GACzCF,EAAQ,iBAAiB,QAAQI,CAAM,GAEhC,MAAM;AACX,MAAAJ,EAAQ,oBAAoB,SAASE,CAAO,GAC5CF,EAAQ,oBAAoB,QAAQI,CAAM;AAAA,IAAA;AAAA,EAC5C,GACC,CAACpB,GAAQQ,EAAY,OAAOL,CAAO,CAAC,GAEnCH,IAAe,EAAE,OAAAa,GAAO,MAAAC,GAAM,SAAAT,EAAA,IAC3B;AAAA,IACL,KAAKG;AAAA,IACL,OAAAK;AAAA,IACA,MAAAC;AAAA,IACA,SAAAT;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useFocus.mjs","sources":["../../../../src/hooks/useFocus/useFocus.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 focus options type */\nexport interface UseFocusOptions {\n  /** The enabled state of the focus hook */\n  enabled?: boolean;\n  /** The initial focus state of the target */\n  initialValue?: boolean;\n  /** The on blur callback */\n  onBlur?: (event: FocusEvent) => void;\n  /** The on focus callback */\n  onFocus?: (event: FocusEvent) => void;\n}\n\n/** The use focus return type */\nexport interface UseFocusReturn {\n  /** The boolean state value of the target */\n  focused: boolean;\n  /** Blur the target */\n  blur: () => void;\n  /** Focus the target */\n  focus: () => void;\n}\n\nexport interface UseFocus {\n  (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n  (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n  <Target extends Element>(\n    callback?: (event: FocusEvent) => void,\n    target?: never\n  ): UseFocusReturn & { ref: StateRef<Target> };\n\n  <Target extends Element>(\n    options?: UseFocusOptions,\n    target?: never\n  ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...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        : { onFocus: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onFocus: params[0] }\n  ) as UseFocusOptions | undefined;\n  const enabled = options?.enabled ?? true;\n  const initialValue = options?.initialValue ?? false;\n\n  const [focused, setFocused] = useState(initialValue);\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  const elementRef = useRef<HTMLElement | null>(null);\n\n  const focus = () => {\n    if (!elementRef.current) return;\n    elementRef.current.focus();\n    setFocused(true);\n  };\n\n  const blur = () => {\n    if (!elementRef.current) return;\n    elementRef.current.blur();\n    setFocused(false);\n  };\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n    if (!element) return;\n\n    elementRef.current = element;\n\n    const onFocus = (event: FocusEvent) => {\n      internalOptionsRef.current?.onFocus?.(event);\n      if (!focus || (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n    };\n\n    const onBlur = (event: FocusEvent) => {\n      internalOptionsRef.current?.onBlur?.(event);\n      setFocused(false);\n    };\n\n    if (initialValue) element.focus();\n\n    element.addEventListener('focus', onFocus);\n    element.addEventListener('blur', onBlur);\n\n    return () => {\n      element.removeEventListener('focus', onFocus);\n      element.removeEventListener('blur', onBlur);\n    };\n  }, [target, internalRef.state, enabled]);\n\n  if (target) return { focus, blur, focused };\n  return {\n    ref: internalRef,\n    focus,\n    blur,\n    focused\n  };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","onFocus","event","onBlur"],"mappings":";;;AA4FO,MAAMA,IAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAErBI,IAAUD,GAAS,WAAW,IAC9BE,IAAeF,GAAS,gBAAgB,IAExC,CAACG,GAASC,CAAU,IAAIC,EAASH,CAAY,GAC7CI,IAAcC,EAAA,GACdC,IAAqBC,EAAOT,CAAO;AACzC,EAAAQ,EAAmB,UAAUR;AAE7B,QAAMU,IAAaD,EAA2B,IAAI,GAE5CE,IAAQ,MAAM;AAClB,IAAKD,EAAW,YAChBA,EAAW,QAAQ,MAAA,GACnBN,EAAW,EAAI;AAAA,EAAA,GAGXQ,IAAO,MAAM;AACjB,IAAKF,EAAW,YAChBA,EAAW,QAAQ,KAAA,GACnBN,EAAW,EAAK;AAAA,EAAA;AA+BlB,SA5BAS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAY,CAACH,KAAU,CAACQ,EAAY,MAAQ;AACjD,UAAMQ,IAAWhB,IAASC,EAAS,WAAWD,CAAM,IAAIQ,EAAY;AACpE,QAAI,CAACQ,EAAS;AAEd,IAAAJ,EAAW,UAAUI;AAErB,UAAMC,IAAU,CAACC,MAAsB;AACrC,MAAAR,EAAmB,SAAS,UAAUQ,CAAK,IACvC,CAACL,KAAUK,EAAM,OAAuB,UAAU,gBAAgB,QAAc,EAAI;AAAA,IAAA,GAGpFC,IAAS,CAACD,MAAsB;AACpC,MAAAR,EAAmB,SAAS,SAASQ,CAAK,GAC1CZ,EAAW,EAAK;AAAA,IAAA;AAGlB,WAAIF,OAAsB,MAAA,GAE1BY,EAAQ,iBAAiB,SAASC,CAAO,GACzCD,EAAQ,iBAAiB,QAAQG,CAAM,GAEhC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,SAASC,CAAO,GAC5CD,EAAQ,oBAAoB,QAAQG,CAAM;AAAA,IAAA;AAAA,EAC5C,GACC,CAACnB,GAAQQ,EAAY,OAAOL,CAAO,CAAC,GAEnCH,IAAe,EAAE,OAAAa,GAAO,MAAAC,GAAM,SAAAT,EAAA,IAC3B;AAAA,IACL,KAAKG;AAAA,IACL,OAAAK;AAAA,IACA,MAAAC;AAAA,IACA,SAAAT;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs

@@ -1,38 +1,37 @@
 import { useState as p } from "react";
-import { useIsomorphicLayoutEffect as g } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import { useRefState as v } from "../useRefState/useRefState.mjs";
-import { isTarget as h } from "../../utils/helpers/isTarget.mjs";
-import { getElement as S } from "../../utils/helpers/getElement.mjs";
-const x = "a, input, select, textarea, button, object, [tabindex]", b = (e) => Array.from(e.querySelectorAll(x)).filter((o) => {
+import { useIsomorphicLayoutEffect as v } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { useRefState as h } from "../useRefState/useRefState.mjs";
+import { isTarget as b } from "../../utils/helpers/isTarget.mjs";
+const S = "a, input, select, textarea, button, object, [tabindex]", g = (e) => Array.from(e.querySelectorAll(S)).filter((o) => {
   const n = o;
   return n.tabIndex !== -1 && !n.hidden && n.style.display !== "none";
-}), A = (e) => {
+}), x = (e) => {
   const t = e.querySelector("[data-autofocus]");
   if (t) return t.focus();
-  const o = b(e);
+  const o = g(e);
   o.length && o[0].focus();
-}, F = (...e) => {
-  const t = h(e[0]) ? e[0] : void 0, o = t ? e[1] : e[0], [n, c] = p(o), u = v(), l = () => c(!0), i = () => c(!1), f = () => c((r) => !r);
-  return g(() => {
+}, w = (...e) => {
+  const t = b(e[0]) ? e[0] : void 0, o = t ? e[1] : e[0], [n, c] = p(o), u = h(), l = () => c(!0), i = () => c(!1), f = () => c((r) => !r);
+  return v(() => {
     if (!n) return;
-    const r = t ? S(t) : u.current;
+    const r = t ? b.getElement(t) : u.current;
     if (!r) return;
-    const m = r;
-    A(m);
-    const a = (s) => {
+    const a = r;
+    x(a);
+    const m = (s) => {
       if (s.key !== "Tab") return;
-      const [E, ...d] = b(m);
+      const [E, ...d] = g(a);
       if (!d.length) return;
       const y = d.at(-1);
       s.shiftKey && document.activeElement === E && (s.preventDefault(), y.focus()), document.activeElement === y && (s.preventDefault(), E.focus());
     };
-    return document.addEventListener("keydown", a), () => {
-      document.removeEventListener("keydown", a);
+    return document.addEventListener("keydown", m), () => {
+      document.removeEventListener("keydown", m);
     };
   }, [n, t, u.state]), t ? { active: n, enable: l, disable: i, toggle: f } : { active: n, enable: l, disable: i, toggle: f, ref: u };
 };
 export {
-  x as FOCUS_SELECTOR,
-  F as useFocusTrap
+  S as FOCUS_SELECTOR,
+  w as useFocusTrap
 };
 //# sourceMappingURL=useFocusTrap.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.mjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n  const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n  return elements.filter((element) => {\n    const htmlEl = element as HTMLElement;\n    return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n  }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n  const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n  if (autofocusElement) return autofocusElement.focus();\n  const focusableElements = getFocusableElements(element);\n  if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type */\nexport interface UseFocusTrapReturn {\n  /** Whether focus trap is active */\n  active: boolean;\n  /** Disable focus trap */\n  disable: () => void;\n  /** Enable focus trap */\n  enable: () => void;\n  /** Toggle focus trap */\n  toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n  (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n  <Target extends HTMLElement>(\n    active?: boolean,\n    target?: never\n  ): UseFocusTrapReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n *\n * @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n *\n * @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n *\n * @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const initialActive = target ? params[1] : params[0];\n\n  const [active, setActive] = useState(initialActive);\n  const internalRef = useRefState<HTMLElement>();\n\n  const enable = () => setActive(true);\n  const disable = () => setActive(false);\n  const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!active) return;\n\n    const element = target ? getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const htmlElement = element as HTMLElement;\n    focusElement(htmlElement);\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') return;\n\n      const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n      if (!restElements.length) return;\n\n      const lastElement = restElements.at(-1)!;\n\n      if (event.shiftKey && document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n      }\n\n      if (document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [active, target, internalRef.state]);\n\n  if (target) return { active, enable, disable, toggle };\n  return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","getElement","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":";;;;;AAWO,MAAMA,IAAiB,0DAExBC,IAAuB,CAACC,MACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAO,CAACE,MAAY;AAClC,QAAMC,IAASD;AACf,SAAOC,EAAO,aAAa,MAAM,CAACA,EAAO,UAAUA,EAAO,MAAM,YAAY;AAAA,CAC7E,GAGGC,IAAe,CAACF,MAAyB;AAC7C,QAAMG,IAAmBH,EAAQ,cAAc,kBAAkB;AACjE,MAAIG,EAAkB,QAAOA,EAAiB,MAAA;AAC9C,QAAMC,IAAoBL,EAAqBC,CAAO;AACtD,EAAII,EAAkB,UAAQA,EAAkB,CAAC,EAAE,MAAA;AACrD,GA+CaC,IAAgB,IAAIC,MAAkB;AACjD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAgBF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE7C,CAACI,GAAQC,CAAS,IAAIC,EAASH,CAAa,GAC5CI,IAAcC,EAAA,GAEdC,IAAS,MAAMJ,EAAU,EAAI,GAC7BK,IAAU,MAAML,EAAU,EAAK,GAC/BM,IAAS,MAAMN,EAAU,CAACO,MAAwB,CAACA,CAAU;AAqCnE,SAnCAC,EAA0B,MAAM;AAC9B,QAAI,CAACT,EAAQ;AAEb,UAAMV,IAAUO,IAASa,EAAWb,CAAM,IAAIM,EAAY;AAC1D,QAAI,CAACb,EAAS;AAEd,UAAMqB,IAAcrB;AACpB,IAAAE,EAAamB,CAAW;AAExB,UAAMC,IAAY,CAACC,MAAyB;AAC1C,UAAIA,EAAM,QAAQ,MAAO;AAEzB,YAAM,CAACC,GAAc,GAAGC,CAAY,IAAI1B,EAAqBsB,CAAW;AACxE,UAAI,CAACI,EAAa,OAAQ;AAE1B,YAAMC,IAAcD,EAAa,GAAG,EAAE;AAEtC,MAAIF,EAAM,YAAY,SAAS,kBAAkBC,MAC/CD,EAAM,eAAA,GACNG,EAAY,MAAA,IAGV,SAAS,kBAAkBA,MAC7BH,EAAM,eAAA,GACNC,EAAa,MAAA;AAAA,IACf;AAGF,oBAAS,iBAAiB,WAAWF,CAAS,GAEvC,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAS;AAAA,IAAA;AAAA,EACnD,GACC,CAACZ,GAAQH,GAAQM,EAAY,KAAK,CAAC,GAElCN,IAAe,EAAE,QAAAG,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IACvC,EAAE,QAAAP,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,GAAQ,KAAKJ,EAAA;AACjD;"}
+{"version":3,"file":"useFocusTrap.mjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n  const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n  return elements.filter((element) => {\n    const htmlEl = element as HTMLElement;\n    return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n  }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n  const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n  if (autofocusElement) return autofocusElement.focus();\n  const focusableElements = getFocusableElements(element);\n  if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type */\nexport interface UseFocusTrapReturn {\n  /** Whether focus trap is active */\n  active: boolean;\n  /** Disable focus trap */\n  disable: () => void;\n  /** Enable focus trap */\n  enable: () => void;\n  /** Toggle focus trap */\n  toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n  (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n  <Target extends HTMLElement>(\n    active?: boolean,\n    target?: never\n  ): UseFocusTrapReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n *\n * @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n *\n * @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n *\n * @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const initialActive = target ? params[1] : params[0];\n\n  const [active, setActive] = useState(initialActive);\n  const internalRef = useRefState<HTMLElement>();\n\n  const enable = () => setActive(true);\n  const disable = () => setActive(false);\n  const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!active) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const htmlElement = element as HTMLElement;\n    focusElement(htmlElement);\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') return;\n\n      const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n      if (!restElements.length) return;\n\n      const lastElement = restElements.at(-1)!;\n\n      if (event.shiftKey && document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n      }\n\n      if (document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [active, target, internalRef.state]);\n\n  if (target) return { active, enable, disable, toggle };\n  return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":";;;;AAWO,MAAMA,IAAiB,0DAExBC,IAAuB,CAACC,MACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAO,CAACE,MAAY;AAClC,QAAMC,IAASD;AACf,SAAOC,EAAO,aAAa,MAAM,CAACA,EAAO,UAAUA,EAAO,MAAM,YAAY;AAAA,CAC7E,GAGGC,IAAe,CAACF,MAAyB;AAC7C,QAAMG,IAAmBH,EAAQ,cAAc,kBAAkB;AACjE,MAAIG,EAAkB,QAAOA,EAAiB,MAAA;AAC9C,QAAMC,IAAoBL,EAAqBC,CAAO;AACtD,EAAII,EAAkB,UAAQA,EAAkB,CAAC,EAAE,MAAA;AACrD,GA+CaC,IAAgB,IAAIC,MAAkB;AACjD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAgBF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE7C,CAACI,GAAQC,CAAS,IAAIC,EAASH,CAAa,GAC5CI,IAAcC,EAAA,GAEdC,IAAS,MAAMJ,EAAU,EAAI,GAC7BK,IAAU,MAAML,EAAU,EAAK,GAC/BM,IAAS,MAAMN,EAAU,CAACO,MAAwB,CAACA,CAAU;AAqCnE,SAnCAC,EAA0B,MAAM;AAC9B,QAAI,CAACT,EAAQ;AAEb,UAAMV,IAAUO,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACnE,QAAI,CAACb,EAAS;AAEd,UAAMoB,IAAcpB;AACpB,IAAAE,EAAakB,CAAW;AAExB,UAAMC,IAAY,CAACC,MAAyB;AAC1C,UAAIA,EAAM,QAAQ,MAAO;AAEzB,YAAM,CAACC,GAAc,GAAGC,CAAY,IAAIzB,EAAqBqB,CAAW;AACxE,UAAI,CAACI,EAAa,OAAQ;AAE1B,YAAMC,IAAcD,EAAa,GAAG,EAAE;AAEtC,MAAIF,EAAM,YAAY,SAAS,kBAAkBC,MAC/CD,EAAM,eAAA,GACNG,EAAY,MAAA,IAGV,SAAS,kBAAkBA,MAC7BH,EAAM,eAAA,GACNC,EAAa,MAAA;AAAA,IACf;AAGF,oBAAS,iBAAiB,WAAWF,CAAS,GAEvC,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAS;AAAA,IAAA;AAAA,EACnD,GACC,CAACX,GAAQH,GAAQM,EAAY,KAAK,CAAC,GAElCN,IAAe,EAAE,QAAAG,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IACvC,EAAE,QAAAP,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,GAAQ,KAAKJ,EAAA;AACjD;"}

package/dist/esm/hooks/useFullscreen/useFullscreen.mjs

@@ -1,18 +1,17 @@
-import { useState as m, useEffect as E } from "react";
+import { useState as m, useEffect as d } from "react";
 import e from "screenfull";
-import { useRefState as d } from "../useRefState/useRefState.mjs";
-import { isTarget as h } from "../../utils/helpers/isTarget.mjs";
-import { getElement as b } from "../../utils/helpers/getElement.mjs";
-const S = (...t) => {
-  const n = h(t[0]) ? t[0] : void 0, r = n ? t[1] : t[0], [o, a] = m(r?.initialValue ?? !1), l = d(), i = () => {
-    e.isEnabled && (e.isFullscreen ? r?.onEnter?.() : (e.off("change", i), r?.onExit?.()), a(e.isFullscreen));
+import { useRefState as h } from "../useRefState/useRefState.mjs";
+import { isTarget as a } from "../../utils/helpers/isTarget.mjs";
+const v = (...t) => {
+  const n = a(t[0]) ? t[0] : void 0, r = n ? t[1] : t[0], [o, g] = m(r?.initialValue ?? !1), l = h(), i = () => {
+    e.isEnabled && (e.isFullscreen ? r?.onEnter?.() : (e.off("change", i), r?.onExit?.()), g(e.isFullscreen));
   }, s = () => {
-    const u = n ? b(n) : l.current;
+    const u = n ? a.getElement(n) : l.current;
     if (u && e.isEnabled)
       try {
         e.request(u), e.on("change", i);
-      } catch (g) {
-        console.error(g);
+      } catch (E) {
+        console.error(E);
       }
   }, f = () => {
     e.isEnabled && e.exit();
@@ -20,7 +19,7 @@ const S = (...t) => {
     if (o) return f();
     s();
   };
-  return E(
+  return d(
     () => () => {
       e.isEnabled && e.off("change", i);
     },
@@ -39,6 +38,6 @@ const S = (...t) => {
   };
 };
 export {
-  S as useFullscreen
+  v as useFullscreen
 };
 //# sourceMappingURL=useFullscreen.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFullscreen.mjs","sources":["../../../../src/hooks/useFullscreen/useFullscreen.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport screenfull from 'screenfull';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use fullscreen options type */\nexport interface UseFullScreenOptions {\n  /** initial value */\n  initialValue?: boolean;\n  /** on enter fullscreen */\n  onEnter?: () => void;\n  /** on exit fullscreen */\n  onExit?: () => void;\n}\n\n/** The use click outside return type */\nexport interface UseFullScreenReturn {\n  /** The fullscreen state */\n  value: boolean;\n  /** The fullscreen enter method */\n  enter: () => void;\n  /** The fullscreen exit method */\n  exit: () => void;\n  /** The fullscreen toggle method */\n  toggle: () => void;\n}\n\nexport interface UseFullScreen {\n  (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;\n\n  <Target extends Element>(\n    options?: UseFullScreenOptions,\n    target?: never\n  ): UseFullScreenReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFullscreen\n * @description - Hook to handle fullscreen events\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn} An object with the fullscreen state and methods\n *\n * @example\n * const { enter, exit, toggle, value } = useFullscreen(ref);\n *\n * @overload\n * @template Target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn & { ref: RefObject<Target> }} An object with the fullscreen state and methods\n *\n * @example\n * const { ref, enter, exit, toggle, value } = useFullscreen();\n */\nexport const useFullscreen = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (target ? params[1] : params[0]) as UseFullScreenOptions | undefined;\n\n  const [value, setValue] = useState(options?.initialValue ?? false);\n  const internalRef = useRefState<Element>();\n\n  const onChange = () => {\n    if (!screenfull.isEnabled) return;\n\n    if (screenfull.isFullscreen) {\n      options?.onEnter?.();\n    } else {\n      screenfull.off('change', onChange);\n      options?.onExit?.();\n    }\n\n    setValue(screenfull.isFullscreen);\n  };\n\n  const enter = () => {\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    if (screenfull.isEnabled) {\n      try {\n        screenfull.request(element);\n        screenfull.on('change', onChange);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  };\n\n  const exit = () => {\n    if (screenfull.isEnabled) screenfull.exit();\n  };\n\n  const toggle = () => {\n    if (value) return exit();\n    enter();\n  };\n\n  useEffect(\n    () => () => {\n      if (screenfull.isEnabled) screenfull.off('change', onChange);\n    },\n    []\n  );\n\n  if (target)\n    return {\n      enter,\n      exit,\n      toggle,\n      value\n    };\n  return {\n    ref: internalRef,\n    enter,\n    exit,\n    toggle,\n    value\n  };\n}) as UseFullScreen;\n"],"names":["useFullscreen","params","target","isTarget","options","value","setValue","useState","internalRef","useRefState","onChange","screenfull","enter","element","getElement","error","exit","toggle","useEffect"],"mappings":";;;;;AAoEO,MAAMA,IAAiB,IAAIC,MAAkB;AAClD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExC,CAACI,GAAOC,CAAQ,IAAIC,EAASH,GAAS,gBAAgB,EAAK,GAC3DI,IAAcC,EAAA,GAEdC,IAAW,MAAM;AACrB,IAAKC,EAAW,cAEZA,EAAW,eACbP,GAAS,UAAA,KAETO,EAAW,IAAI,UAAUD,CAAQ,GACjCN,GAAS,SAAA,IAGXE,EAASK,EAAW,YAAY;AAAA,EAAA,GAG5BC,IAAQ,MAAM;AAClB,UAAMC,IAAWX,IAASY,EAAWZ,CAAM,IAAIM,EAAY;AAC3D,QAAKK,KAEDF,EAAW;AACb,UAAI;AACF,QAAAA,EAAW,QAAQE,CAAO,GAC1BF,EAAW,GAAG,UAAUD,CAAQ;AAAA,MAAA,SACzBK,GAAO;AACd,gBAAQ,MAAMA,CAAK;AAAA,MAAA;AAAA,EAEvB,GAGIC,IAAO,MAAM;AACjB,IAAIL,EAAW,aAAWA,EAAW,KAAA;AAAA,EAAK,GAGtCM,IAAS,MAAM;AACnB,QAAIZ,UAAcW,EAAA;AAClB,IAAAJ,EAAA;AAAA,EAAM;AAUR,SAPAM;AAAA,IACE,MAAM,MAAM;AACV,MAAIP,EAAW,aAAWA,EAAW,IAAI,UAAUD,CAAQ;AAAA,IAAA;AAAA,IAE7D,CAAA;AAAA,EAAC,GAGCR,IACK;AAAA,IACL,OAAAU;AAAA,IACA,MAAAI;AAAA,IACA,QAAAC;AAAA,IACA,OAAAZ;AAAA,EAAA,IAEG;AAAA,IACL,KAAKG;AAAA,IACL,OAAAI;AAAA,IACA,MAAAI;AAAA,IACA,QAAAC;AAAA,IACA,OAAAZ;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useFullscreen.mjs","sources":["../../../../src/hooks/useFullscreen/useFullscreen.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport screenfull from 'screenfull';\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 fullscreen options type */\nexport interface UseFullScreenOptions {\n  /** initial value */\n  initialValue?: boolean;\n  /** on enter fullscreen */\n  onEnter?: () => void;\n  /** on exit fullscreen */\n  onExit?: () => void;\n}\n\n/** The use click outside return type */\nexport interface UseFullScreenReturn {\n  /** The fullscreen state */\n  value: boolean;\n  /** The fullscreen enter method */\n  enter: () => void;\n  /** The fullscreen exit method */\n  exit: () => void;\n  /** The fullscreen toggle method */\n  toggle: () => void;\n}\n\nexport interface UseFullScreen {\n  (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;\n\n  <Target extends Element>(\n    options?: UseFullScreenOptions,\n    target?: never\n  ): UseFullScreenReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFullscreen\n * @description - Hook to handle fullscreen events\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn} An object with the fullscreen state and methods\n *\n * @example\n * const { enter, exit, toggle, value } = useFullscreen(ref);\n *\n * @overload\n * @template Target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn & { ref: RefObject<Target> }} An object with the fullscreen state and methods\n *\n * @example\n * const { ref, enter, exit, toggle, value } = useFullscreen();\n */\nexport const useFullscreen = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (target ? params[1] : params[0]) as UseFullScreenOptions | undefined;\n\n  const [value, setValue] = useState(options?.initialValue ?? false);\n  const internalRef = useRefState<Element>();\n\n  const onChange = () => {\n    if (!screenfull.isEnabled) return;\n\n    if (screenfull.isFullscreen) {\n      options?.onEnter?.();\n    } else {\n      screenfull.off('change', onChange);\n      options?.onExit?.();\n    }\n\n    setValue(screenfull.isFullscreen);\n  };\n\n  const enter = () => {\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    if (screenfull.isEnabled) {\n      try {\n        screenfull.request(element);\n        screenfull.on('change', onChange);\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  };\n\n  const exit = () => {\n    if (screenfull.isEnabled) screenfull.exit();\n  };\n\n  const toggle = () => {\n    if (value) return exit();\n    enter();\n  };\n\n  useEffect(\n    () => () => {\n      if (screenfull.isEnabled) screenfull.off('change', onChange);\n    },\n    []\n  );\n\n  if (target)\n    return {\n      enter,\n      exit,\n      toggle,\n      value\n    };\n  return {\n    ref: internalRef,\n    enter,\n    exit,\n    toggle,\n    value\n  };\n}) as UseFullScreen;\n"],"names":["useFullscreen","params","target","isTarget","options","value","setValue","useState","internalRef","useRefState","onChange","screenfull","enter","element","error","exit","toggle","useEffect"],"mappings":";;;;AAoEO,MAAMA,IAAiB,IAAIC,MAAkB;AAClD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExC,CAACI,GAAOC,CAAQ,IAAIC,EAASH,GAAS,gBAAgB,EAAK,GAC3DI,IAAcC,EAAA,GAEdC,IAAW,MAAM;AACrB,IAAKC,EAAW,cAEZA,EAAW,eACbP,GAAS,UAAA,KAETO,EAAW,IAAI,UAAUD,CAAQ,GACjCN,GAAS,SAAA,IAGXE,EAASK,EAAW,YAAY;AAAA,EAAA,GAG5BC,IAAQ,MAAM;AAClB,UAAMC,IAAWX,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACpE,QAAKK,KAEDF,EAAW;AACb,UAAI;AACF,QAAAA,EAAW,QAAQE,CAAO,GAC1BF,EAAW,GAAG,UAAUD,CAAQ;AAAA,MAAA,SACzBI,GAAO;AACd,gBAAQ,MAAMA,CAAK;AAAA,MAAA;AAAA,EAEvB,GAGIC,IAAO,MAAM;AACjB,IAAIJ,EAAW,aAAWA,EAAW,KAAA;AAAA,EAAK,GAGtCK,IAAS,MAAM;AACnB,QAAIX,UAAcU,EAAA;AAClB,IAAAH,EAAA;AAAA,EAAM;AAUR,SAPAK;AAAA,IACE,MAAM,MAAM;AACV,MAAIN,EAAW,aAAWA,EAAW,IAAI,UAAUD,CAAQ;AAAA,IAAA;AAAA,IAE7D,CAAA;AAAA,EAAC,GAGCR,IACK;AAAA,IACL,OAAAU;AAAA,IACA,MAAAG;AAAA,IACA,QAAAC;AAAA,IACA,OAAAX;AAAA,EAAA,IAEG;AAAA,IACL,KAAKG;AAAA,IACL,OAAAI;AAAA,IACA,MAAAG;AAAA,IACA,QAAAC;AAAA,IACA,OAAAX;AAAA,EAAA;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useHash.mjs","sources":["../../../../src/hooks/useHash/useHash.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));\n\n/** The use hash options type */\nexport interface UseHashOptions {\n  /** The enabled state of the hook */\n  enabled?: boolean;\n  /** The mode of hash setting */\n  mode?: 'initial' | 'replace';\n  /** Callback function called when hash changes */\n  onChange?: (hash: string) => void;\n}\n\n/** The use hash return type */\ntype UseHashReturn = [string, (value: string) => void];\n\nexport interface UseHash {\n  (initialValue?: string, options?: UseHashOptions): UseHashReturn;\n\n  (options?: UseHashOptions): UseHashReturn;\n\n  (initialValue?: string, callback?: (hash: string) => void): UseHashReturn;\n\n  (callback?: (hash: string) => void): UseHashReturn;\n}\n\n/**\n * @name useHash\n * @description - Hook that manages the hash value\n * @category State\n * @usage low\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\", {\n *   enabled: true,\n *   mode: \"replace\",\n *   onChange: (newHash) => console.log('Hash changed:', newHash)\n * });\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\", (newHash) => console.log('callback'));\n */\nexport const useHash = ((...params: any[]) => {\n  const initialValue = typeof params[0] === 'string' ? params[0] : '';\n  const options =\n    typeof params[1] === 'object'\n      ? params[1]\n      : typeof params[1] === 'function'\n        ? { onChange: params[1] }\n        : typeof params[0] === 'object'\n          ? params[0]\n          : {};\n\n  const enabled = options?.enabled ?? true;\n  const mode = options?.mode ?? 'replace';\n\n  const [hash, setHash] = useState(() => {\n    if (typeof window === 'undefined') return initialValue;\n    return getHash() || initialValue;\n  });\n\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const set = (value: string) => {\n    window.location.hash = value;\n    setHash(value);\n    optionsRef.current?.onChange?.(value);\n  };\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    if (mode === 'replace') window.location.hash = hash;\n\n    const onHashChange = () => {\n      const newHash = getHash();\n      setHash(newHash);\n      optionsRef.current?.onChange?.(newHash);\n    };\n\n    window.addEventListener('hashchange', onHashChange);\n    return () => {\n      window.removeEventListener('hashchange', onHashChange);\n    };\n  }, [enabled, mode]);\n\n  return [hash, set] as const;\n}) as UseHash;\n"],"names":["getHash","useHash","params","initialValue","options","enabled","mode","hash","setHash","useState","optionsRef","useRef","set","value","useEffect","onHashChange","newHash"],"mappings":";AAEO,MAAMA,IAAU,MAAM,mBAAmB,OAAO,SAAS,KAAK,QAAQ,KAAK,EAAE,CAAC,GAsDxEC,IAAW,IAAIC,MAAkB;AAC5C,QAAMC,IAAe,OAAOD,EAAO,CAAC,KAAM,WAAWA,EAAO,CAAC,IAAI,IAC3DE,IACJ,OAAOF,EAAO,CAAC,KAAM,WACjBA,EAAO,CAAC,IACR,OAAOA,EAAO,CAAC,KAAM,aACnB,EAAE,UAAUA,EAAO,CAAC,EAAA,IACpB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,CAAA,GAEJG,IAAUD,GAAS,WAAW,IAC9BE,IAAOF,GAAS,QAAQ,WAExB,CAACG,GAAMC,CAAO,IAAIC,EAAS,MAC3B,OAAO,SAAW,MAAoBN,IACnCH,OAAaG,CACrB,GAEKO,IAAaC,EAAOP,CAAO;AACjC,EAAAM,EAAW,UAAUN;AAErB,QAAMQ,IAAM,CAACC,MAAkB;AAC7B,WAAO,SAAS,OAAOA,GACvBL,EAAQK,CAAK,GACbH,EAAW,SAAS,WAAWG,CAAK;AAAA,EAAA;AAGtC,SAAAC,EAAU,MAAM;AACd,QAAI,CAACT,EAAS;AAEd,IAAIC,MAAS,cAAW,OAAO,SAAS,OAAOC;AAE/C,UAAMQ,IAAe,MAAM;AACzB,YAAMC,IAAUhB,EAAA;AAChB,MAAAQ,EAAQQ,CAAO,GACfN,EAAW,SAAS,WAAWM,CAAO;AAAA,IAAA;AAGxC,kBAAO,iBAAiB,cAAcD,CAAY,GAC3C,MAAM;AACX,aAAO,oBAAoB,cAAcA,CAAY;AAAA,IAAA;AAAA,EACvD,GACC,CAACV,GAASC,CAAI,CAAC,GAEX,CAACC,GAAMK,CAAG;AACnB;"}
+{"version":3,"file":"useHash.mjs","sources":["../../../../src/hooks/useHash/useHash.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));\n\n/** The use hash options type */\nexport interface UseHashOptions {\n  /** The enabled state of the hook */\n  enabled?: boolean;\n  /** The mode of hash setting */\n  mode?: 'initial' | 'replace';\n  /** Callback function called when hash changes */\n  onChange?: (hash: string) => void;\n}\n\n/** The use hash return type */\ntype UseHashReturn = [string, (value: string) => void];\n\nexport interface UseHash {\n  (initialValue?: string, options?: UseHashOptions): UseHashReturn;\n\n  (options?: UseHashOptions): UseHashReturn;\n\n  (initialValue?: string, callback?: (hash: string) => void): UseHashReturn;\n\n  (callback?: (hash: string) => void): UseHashReturn;\n}\n\n/**\n * @name useHash\n * @description - Hook that manages the hash value\n * @category State\n * @usage low\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\");\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\", (newHash) => console.log('callback'));\n *\n * @overload\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash();\n *\n * @overload\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash((newHash) => console.log('callback'));\n */\nexport const useHash = ((...params: any[]) => {\n  const initialValue = typeof params[0] === 'string' ? params[0] : '';\n  const options =\n    typeof params[1] === 'object'\n      ? params[1]\n      : typeof params[1] === 'function'\n        ? { onChange: params[1] }\n        : typeof params[0] === 'object'\n          ? params[0]\n          : {};\n\n  const enabled = options?.enabled ?? true;\n  const mode = options?.mode ?? 'replace';\n\n  const [hash, setHash] = useState(() => {\n    if (typeof window === 'undefined') return initialValue;\n    return getHash() || initialValue;\n  });\n\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const set = (value: string) => {\n    window.location.hash = value;\n    setHash(value);\n    optionsRef.current?.onChange?.(value);\n  };\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    if (mode === 'replace') window.location.hash = hash;\n\n    const onHashChange = () => {\n      const newHash = getHash();\n      setHash(newHash);\n      optionsRef.current?.onChange?.(newHash);\n    };\n\n    window.addEventListener('hashchange', onHashChange);\n    return () => {\n      window.removeEventListener('hashchange', onHashChange);\n    };\n  }, [enabled, mode]);\n\n  return [hash, set] as const;\n}) as UseHash;\n"],"names":["getHash","useHash","params","initialValue","options","enabled","mode","hash","setHash","useState","optionsRef","useRef","set","value","useEffect","onHashChange","newHash"],"mappings":";AAEO,MAAMA,IAAU,MAAM,mBAAmB,OAAO,SAAS,KAAK,QAAQ,KAAK,EAAE,CAAC,GAmExEC,IAAW,IAAIC,MAAkB;AAC5C,QAAMC,IAAe,OAAOD,EAAO,CAAC,KAAM,WAAWA,EAAO,CAAC,IAAI,IAC3DE,IACJ,OAAOF,EAAO,CAAC,KAAM,WACjBA,EAAO,CAAC,IACR,OAAOA,EAAO,CAAC,KAAM,aACnB,EAAE,UAAUA,EAAO,CAAC,EAAA,IACpB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,CAAA,GAEJG,IAAUD,GAAS,WAAW,IAC9BE,IAAOF,GAAS,QAAQ,WAExB,CAACG,GAAMC,CAAO,IAAIC,EAAS,MAC3B,OAAO,SAAW,MAAoBN,IACnCH,OAAaG,CACrB,GAEKO,IAAaC,EAAOP,CAAO;AACjC,EAAAM,EAAW,UAAUN;AAErB,QAAMQ,IAAM,CAACC,MAAkB;AAC7B,WAAO,SAAS,OAAOA,GACvBL,EAAQK,CAAK,GACbH,EAAW,SAAS,WAAWG,CAAK;AAAA,EAAA;AAGtC,SAAAC,EAAU,MAAM;AACd,QAAI,CAACT,EAAS;AAEd,IAAIC,MAAS,cAAW,OAAO,SAAS,OAAOC;AAE/C,UAAMQ,IAAe,MAAM;AACzB,YAAMC,IAAUhB,EAAA;AAChB,MAAAQ,EAAQQ,CAAO,GACfN,EAAW,SAAS,WAAWM,CAAO;AAAA,IAAA;AAGxC,kBAAO,iBAAiB,cAAcD,CAAY,GAC3C,MAAM;AACX,aAAO,oBAAoB,cAAcA,CAAY;AAAA,IAAA;AAAA,EACvD,GACC,CAACV,GAASC,CAAI,CAAC,GAEX,CAACC,GAAMK,CAAG;AACnB;"}

package/dist/esm/hooks/useHotkeys/useHotkeys.mjs

@@ -1,23 +1,22 @@
-import { useRef as m, useEffect as L } from "react";
+import { useRef as m, useEffect as w } from "react";
 import { useEvent as k } from "../useEvent/useEvent.mjs";
-import { useRefState as w } from "../useRefState/useRefState.mjs";
-import { isTarget as p } from "../../utils/helpers/isTarget.mjs";
-import { getElement as E } from "../../utils/helpers/getElement.mjs";
+import { useRefState as E } from "../useRefState/useRefState.mjs";
+import { isTarget as L } from "../../utils/helpers/isTarget.mjs";
 const h = (t, o) => t.toLowerCase().split(/[+_,\-]/g).map((r) => r.trim()).every(
   (r) => o.find(
     (s) => r === s.code.toLocaleLowerCase() || r === s.key.toLocaleLowerCase() || r === s.alias.toLocaleLowerCase()
   )
-), H = (...t) => {
-  const o = p(t[0]) ? t[0] : void 0, r = o ? t[1] : t[0], s = o ? t[2] : t[1], d = o ? t[3] : t[2], i = w(window), n = m([]), u = d?.enabled ?? !0, f = k((e) => {
+), M = (...t) => {
+  const o = L(t[0]) ? t[0] : void 0, r = o ? t[1] : t[0], s = o ? t[2] : t[1], d = o ? t[3] : t[2], i = E(window), n = m([]), u = d?.enabled ?? !0, f = k((e) => {
     if (!u || n.current.some(({ code: c }) => c === e.code)) return;
     const a = d?.alias?.[e.key] ?? e.code, y = [...n.current, { key: e.key, code: e.code, alias: a }];
     n.current = y, r.split(",").map((c) => c.trim()).some((c) => h(c, y)) && (e.preventDefault(), s(e));
   }), l = k((e) => {
     u && (n.current = n.current.filter(({ code: a }) => a !== e.code));
   });
-  if (L(() => {
+  if (w(() => {
     if (n.current = [], !o && !i.state && !u) return;
-    const e = o ? E(o) : i.current;
+    const e = o ? L.getElement(o) : i.current;
     if (e)
       return e.addEventListener("keydown", f), e.addEventListener("keyup", l), () => {
         e.removeEventListener("keydown", f), e.removeEventListener("keyup", l);
@@ -27,6 +26,6 @@ const h = (t, o) => t.toLowerCase().split(/[+_,\-]/g).map((r) => r.trim()).every
 };
 export {
   h as isHotkeyMatch,
-  H as useHotkeys
+  M as useHotkeys
 };
 //# sourceMappingURL=useHotkeys.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useHotkeys.mjs","sources":["../../../../src/hooks/useHotkeys/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hotkeys params type */\nexport interface UseHotkeysOptions {\n  /** Alias map for hotkeys */\n  alias?: Record<string, string>;\n  /** Enable or disable the event listeners */\n  enabled?: boolean;\n}\n\nexport const isHotkeyMatch = (hotkey: string, keys: UseHotkeysKey[]) =>\n  hotkey\n    .toLowerCase()\n    .split(/[+_,\\-]/g)\n    .map((key) => key.trim())\n    .every((key) =>\n      keys.find(\n        (updatedKey) =>\n          key === updatedKey.code.toLocaleLowerCase() ||\n          key === updatedKey.key.toLocaleLowerCase() ||\n          key === updatedKey.alias.toLocaleLowerCase()\n      )\n    );\n\n/** The hotkeys string type */\nexport type UseHotkeysHotkeys = string;\n\n/** The hotkey key information */\nexport interface UseHotkeysKey {\n  /** The alias for the key */\n  alias: string;\n  /** The key code */\n  code: string;\n  /** The key value */\n  key: string;\n}\n\n/** The use hotkeys target type */\nexport type UseHotkeysTarget = Element | React.RefObject<Element | null | undefined>;\n\nexport interface UseHotkeys {\n  (\n    target: UseHotkeysTarget,\n    hotkeys: UseHotkeysHotkeys,\n    callback: (event: KeyboardEvent) => void,\n    options?: UseHotkeysOptions\n  ): void;\n\n  <Target extends Element>(\n    hotkeys: UseHotkeysHotkeys,\n    callback: (event: KeyboardEvent) => void,\n    options?: UseHotkeysOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\n/**\n * @name useHotkeys\n * @description - Hook that listens for hotkeys\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to attach the event listener to\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {void}\n *\n * @example\n * useHotkeys(ref, 'ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * useHotkeys(ref, 'ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n *\n * @overload\n * @template Target The target element\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {StateRef<Target>} A reference to the target element\n *\n * @example\n * const ref = useHotkeys('ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * const ref = useHotkeys('ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n */\nexport const useHotkeys = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const hotkeys = (target ? params[1] : params[0]) as UseHotkeysHotkeys;\n  const callback = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n  const options = (target ? params[3] : params[2]) as UseHotkeysOptions | undefined;\n\n  const internalRef = useRefState(window);\n  const keysRef = useRef<UseHotkeysKey[]>([]);\n  const enabled = options?.enabled ?? true;\n\n  const onKeyDown = useEvent((event: KeyboardEvent) => {\n    if (!enabled) return;\n\n    if (keysRef.current.some(({ code }) => code === event.code)) return;\n\n    const alias = options?.alias?.[event.key] ?? event.code;\n    const updatedKeys = [...keysRef.current, { key: event.key, code: event.code, alias }];\n    keysRef.current = updatedKeys;\n\n    const hotkeysList = hotkeys.split(',').map((h) => h.trim());\n    const isMatch = hotkeysList.some((hotkey) => isHotkeyMatch(hotkey, updatedKeys));\n    if (!isMatch) return;\n    event.preventDefault();\n    callback(event);\n  });\n\n  const onKeyUp = useEvent((event: KeyboardEvent) => {\n    if (!enabled) return;\n    keysRef.current = keysRef.current.filter(({ code }) => code !== event.code);\n  });\n\n  useEffect(() => {\n    keysRef.current = [];\n    if (!target && !internalRef.state && !enabled) return;\n\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    element.addEventListener('keydown', onKeyDown as EventListener);\n    element.addEventListener('keyup', onKeyUp as EventListener);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown as EventListener);\n      element.removeEventListener('keyup', onKeyUp as EventListener);\n    };\n  }, [target, internalRef.state, enabled, hotkeys, onKeyDown, onKeyUp]);\n\n  if (target) return;\n  return internalRef;\n}) as UseHotkeys;\n"],"names":["isHotkeyMatch","hotkey","keys","key","updatedKey","useHotkeys","params","target","isTarget","hotkeys","callback","options","internalRef","useRefState","keysRef","useRef","enabled","onKeyDown","useEvent","event","code","alias","updatedKeys","h","onKeyUp","useEffect","element","getElement"],"mappings":";;;;;AAmBO,MAAMA,IAAgB,CAACC,GAAgBC,MAC5CD,EACG,cACA,MAAM,UAAU,EAChB,IAAI,CAACE,MAAQA,EAAI,KAAA,CAAM,EACvB;AAAA,EAAM,CAACA,MACND,EAAK;AAAA,IACH,CAACE,MACCD,MAAQC,EAAW,KAAK,kBAAA,KACxBD,MAAQC,EAAW,IAAI,kBAAA,KACvBD,MAAQC,EAAW,MAAM,kBAAA;AAAA,EAAkB;AAEjD,GAkESC,IAAc,IAAIC,MAAkB;AAC/C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAcC,EAAY,MAAM,GAChCC,IAAUC,EAAwB,EAAE,GACpCC,IAAUL,GAAS,WAAW,IAE9BM,IAAYC,EAAS,CAACC,MAAyB;AAGnD,QAFI,CAACH,KAEDF,EAAQ,QAAQ,KAAK,CAAC,EAAE,MAAAM,QAAWA,MAASD,EAAM,IAAI,EAAG;AAE7D,UAAME,IAAQV,GAAS,QAAQQ,EAAM,GAAG,KAAKA,EAAM,MAC7CG,IAAc,CAAC,GAAGR,EAAQ,SAAS,EAAE,KAAKK,EAAM,KAAK,MAAMA,EAAM,MAAM,OAAAE,GAAO;AAKpF,IAJAP,EAAQ,UAAUQ,GAEEb,EAAQ,MAAM,GAAG,EAAE,IAAI,CAACc,MAAMA,EAAE,MAAM,EAC9B,KAAK,CAACtB,MAAWD,EAAcC,GAAQqB,CAAW,CAAC,MAE/EH,EAAM,eAAA,GACNT,EAASS,CAAK;AAAA,EAAA,CACf,GAEKK,IAAUN,EAAS,CAACC,MAAyB;AACjD,IAAKH,MACLF,EAAQ,UAAUA,EAAQ,QAAQ,OAAO,CAAC,EAAE,MAAAM,QAAWA,MAASD,EAAM,IAAI;AAAA,EAAA,CAC3E;AAkBD,MAhBAM,EAAU,MAAM;AAEd,QADAX,EAAQ,UAAU,CAAA,GACd,CAACP,KAAU,CAACK,EAAY,SAAS,CAACI,EAAS;AAE/C,UAAMU,IAAWnB,IAASoB,EAAWpB,CAAM,IAAIK,EAAY;AAC3D,QAAKc;AAEL,aAAAA,EAAQ,iBAAiB,WAAWT,CAA0B,GAC9DS,EAAQ,iBAAiB,SAASF,CAAwB,GAEnD,MAAM;AACX,QAAAE,EAAQ,oBAAoB,WAAWT,CAA0B,GACjES,EAAQ,oBAAoB,SAASF,CAAwB;AAAA,MAAA;AAAA,EAC/D,GACC,CAACjB,GAAQK,EAAY,OAAOI,GAASP,GAASQ,GAAWO,CAAO,CAAC,GAEhE,CAAAjB;AACJ,WAAOK;AACT;"}
+{"version":3,"file":"useHotkeys.mjs","sources":["../../../../src/hooks/useHotkeys/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hotkeys params type */\nexport interface UseHotkeysOptions {\n  /** Alias map for hotkeys */\n  alias?: Record<string, string>;\n  /** Enable or disable the event listeners */\n  enabled?: boolean;\n}\n\nexport const isHotkeyMatch = (hotkey: string, keys: UseHotkeysKey[]) =>\n  hotkey\n    .toLowerCase()\n    .split(/[+_,\\-]/g)\n    .map((key) => key.trim())\n    .every((key) =>\n      keys.find(\n        (updatedKey) =>\n          key === updatedKey.code.toLocaleLowerCase() ||\n          key === updatedKey.key.toLocaleLowerCase() ||\n          key === updatedKey.alias.toLocaleLowerCase()\n      )\n    );\n\n/** The hotkeys string type */\nexport type UseHotkeysHotkeys = string;\n\n/** The hotkey key information */\nexport interface UseHotkeysKey {\n  /** The alias for the key */\n  alias: string;\n  /** The key code */\n  code: string;\n  /** The key value */\n  key: string;\n}\n\n/** The use hotkeys target type */\nexport type UseHotkeysTarget = Element | React.RefObject<Element | null | undefined>;\n\nexport interface UseHotkeys {\n  (\n    target: UseHotkeysTarget,\n    hotkeys: UseHotkeysHotkeys,\n    callback: (event: KeyboardEvent) => void,\n    options?: UseHotkeysOptions\n  ): void;\n\n  <Target extends Element>(\n    hotkeys: UseHotkeysHotkeys,\n    callback: (event: KeyboardEvent) => void,\n    options?: UseHotkeysOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\n/**\n * @name useHotkeys\n * @description - Hook that listens for hotkeys\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to attach the event listener to\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {void}\n *\n * @example\n * useHotkeys(ref, 'ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * useHotkeys(ref, 'ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n *\n * @overload\n * @template Target The target element\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {StateRef<Target>} A reference to the target element\n *\n * @example\n * const ref = useHotkeys('ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * const ref = useHotkeys('ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n */\nexport const useHotkeys = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const hotkeys = (target ? params[1] : params[0]) as UseHotkeysHotkeys;\n  const callback = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n  const options = (target ? params[3] : params[2]) as UseHotkeysOptions | undefined;\n\n  const internalRef = useRefState(window);\n  const keysRef = useRef<UseHotkeysKey[]>([]);\n  const enabled = options?.enabled ?? true;\n\n  const onKeyDown = useEvent((event: KeyboardEvent) => {\n    if (!enabled) return;\n\n    if (keysRef.current.some(({ code }) => code === event.code)) return;\n\n    const alias = options?.alias?.[event.key] ?? event.code;\n    const updatedKeys = [...keysRef.current, { key: event.key, code: event.code, alias }];\n    keysRef.current = updatedKeys;\n\n    const hotkeysList = hotkeys.split(',').map((h) => h.trim());\n    const isMatch = hotkeysList.some((hotkey) => isHotkeyMatch(hotkey, updatedKeys));\n    if (!isMatch) return;\n    event.preventDefault();\n    callback(event);\n  });\n\n  const onKeyUp = useEvent((event: KeyboardEvent) => {\n    if (!enabled) return;\n    keysRef.current = keysRef.current.filter(({ code }) => code !== event.code);\n  });\n\n  useEffect(() => {\n    keysRef.current = [];\n    if (!target && !internalRef.state && !enabled) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    element.addEventListener('keydown', onKeyDown as EventListener);\n    element.addEventListener('keyup', onKeyUp as EventListener);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown as EventListener);\n      element.removeEventListener('keyup', onKeyUp as EventListener);\n    };\n  }, [target, internalRef.state, enabled, hotkeys, onKeyDown, onKeyUp]);\n\n  if (target) return;\n  return internalRef;\n}) as UseHotkeys;\n"],"names":["isHotkeyMatch","hotkey","keys","key","updatedKey","useHotkeys","params","target","isTarget","hotkeys","callback","options","internalRef","useRefState","keysRef","useRef","enabled","onKeyDown","useEvent","event","code","alias","updatedKeys","h","onKeyUp","useEffect","element"],"mappings":";;;;AAmBO,MAAMA,IAAgB,CAACC,GAAgBC,MAC5CD,EACG,cACA,MAAM,UAAU,EAChB,IAAI,CAACE,MAAQA,EAAI,KAAA,CAAM,EACvB;AAAA,EAAM,CAACA,MACND,EAAK;AAAA,IACH,CAACE,MACCD,MAAQC,EAAW,KAAK,kBAAA,KACxBD,MAAQC,EAAW,IAAI,kBAAA,KACvBD,MAAQC,EAAW,MAAM,kBAAA;AAAA,EAAkB;AAEjD,GAkESC,IAAc,IAAIC,MAAkB;AAC/C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAcC,EAAY,MAAM,GAChCC,IAAUC,EAAwB,EAAE,GACpCC,IAAUL,GAAS,WAAW,IAE9BM,IAAYC,EAAS,CAACC,MAAyB;AAGnD,QAFI,CAACH,KAEDF,EAAQ,QAAQ,KAAK,CAAC,EAAE,MAAAM,QAAWA,MAASD,EAAM,IAAI,EAAG;AAE7D,UAAME,IAAQV,GAAS,QAAQQ,EAAM,GAAG,KAAKA,EAAM,MAC7CG,IAAc,CAAC,GAAGR,EAAQ,SAAS,EAAE,KAAKK,EAAM,KAAK,MAAMA,EAAM,MAAM,OAAAE,GAAO;AAKpF,IAJAP,EAAQ,UAAUQ,GAEEb,EAAQ,MAAM,GAAG,EAAE,IAAI,CAACc,MAAMA,EAAE,MAAM,EAC9B,KAAK,CAACtB,MAAWD,EAAcC,GAAQqB,CAAW,CAAC,MAE/EH,EAAM,eAAA,GACNT,EAASS,CAAK;AAAA,EAAA,CACf,GAEKK,IAAUN,EAAS,CAACC,MAAyB;AACjD,IAAKH,MACLF,EAAQ,UAAUA,EAAQ,QAAQ,OAAO,CAAC,EAAE,MAAAM,QAAWA,MAASD,EAAM,IAAI;AAAA,EAAA,CAC3E;AAkBD,MAhBAM,EAAU,MAAM;AAEd,QADAX,EAAQ,UAAU,CAAA,GACd,CAACP,KAAU,CAACK,EAAY,SAAS,CAACI,EAAS;AAE/C,UAAMU,IAAWnB,IAASC,EAAS,WAAWD,CAAM,IAAIK,EAAY;AACpE,QAAKc;AAEL,aAAAA,EAAQ,iBAAiB,WAAWT,CAA0B,GAC9DS,EAAQ,iBAAiB,SAASF,CAAwB,GAEnD,MAAM;AACX,QAAAE,EAAQ,oBAAoB,WAAWT,CAA0B,GACjES,EAAQ,oBAAoB,SAASF,CAAwB;AAAA,MAAA;AAAA,EAC/D,GACC,CAACjB,GAAQK,EAAY,OAAOI,GAASP,GAASQ,GAAWO,CAAO,CAAC,GAEhE,CAAAjB;AACJ,WAAOK;AACT;"}

package/dist/esm/hooks/useHover/useHover.mjs

@@ -1,27 +1,26 @@
-import { useState as E, useRef as m, useEffect as d } from "react";
-import { useRefState as L } from "../useRefState/useRefState.mjs";
-import { isTarget as a } from "../../utils/helpers/isTarget.mjs";
-import { getElement as g } from "../../utils/helpers/getElement.mjs";
-const p = (...e) => {
-  const t = a(e[0]) ? e[0] : void 0, r = t ? typeof e[1] == "object" ? e[1] : { onEntry: e[1] } : typeof e[0] == "object" ? e[0] : { onEntry: e[0] }, i = r?.enabled ?? !0, [f, c] = E(!1), o = L(), s = m(r);
-  return s.current = r, d(() => {
+import { useState as d, useRef as m, useEffect as L } from "react";
+import { useRefState as a } from "../useRefState/useRefState.mjs";
+import { isTarget as E } from "../../utils/helpers/isTarget.mjs";
+const R = (...e) => {
+  const t = E(e[0]) ? e[0] : void 0, r = t ? typeof e[1] == "object" ? e[1] : { onEntry: e[1] } : typeof e[0] == "object" ? e[0] : { onEntry: e[0] }, i = r?.enabled ?? !0, [c, f] = d(!1), o = a(), s = m(r);
+  return s.current = r, L(() => {
     if (!i || !t && !o.state) return;
-    const n = t ? g(t) : o.current;
+    const n = t ? E.getElement(t) : o.current;
     if (!n) return;
     const v = (u) => {
-      s.current?.onEntry?.(u), c(!0);
+      s.current?.onEntry?.(u), f(!0);
     }, l = (u) => {
-      s.current?.onLeave?.(u), c(!1);
+      s.current?.onLeave?.(u), f(!1);
     };
     return n.addEventListener("mouseenter", v), n.addEventListener("mouseleave", l), () => {
       n.removeEventListener("mouseenter", v), n.removeEventListener("mouseleave", l);
     };
-  }, [i, t, o.state]), t ? f : {
+  }, [i, t, o.state]), t ? c : {
     ref: o,
-    value: f
+    value: c
   };
 };
 export {
-  p as useHover
+  R as useHover
 };
 //# sourceMappingURL=useHover.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useHover.mjs","sources":["../../../../src/hooks/useHover/useHover.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hover options type */\nexport interface UseHoverOptions {\n  /** The enabled state of the hook */\n  enabled?: boolean;\n  /** The on entry callback */\n  onEntry?: (event: Event) => void;\n  /** The on leave callback */\n  onLeave?: (event: Event) => void;\n}\n\nexport interface UseHoverReturn {\n  value: boolean;\n}\n\nexport interface UseHover {\n  (target: HookTarget, callback?: (event: Event) => void): boolean;\n\n  (target: HookTarget, options?: UseHoverOptions): boolean;\n\n  <Target extends Element>(\n    callback?: (event: Event) => void,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseHoverReturn;\n\n  <Target extends Element>(\n    options?: UseHoverOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseHoverReturn;\n}\n\n/**\n * @name useHover\n * @description - Hook that defines the logic when hovering an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {boolean} The state of the hover\n *\n * @example\n * const hovering = useHover(ref, () => console.log('callback'));\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {boolean} The state of the hover\n *\n * @example\n * const hovering = useHover(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover\n *\n * @example\n * const [ref, hovering] = useHover(() => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover\n *\n * @example\n * const [ref, hovering] = useHover(options);\n */\nexport const useHover = ((...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        : { onEntry: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onEntry: params[0] }\n  ) as UseHoverOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n\n  const [hovering, setHovering] = useState(false);\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const onMouseEnter = (event: Event) => {\n      internalOptionsRef.current?.onEntry?.(event);\n      setHovering(true);\n    };\n\n    const onMouseLeave = (event: Event) => {\n      internalOptionsRef.current?.onLeave?.(event);\n      setHovering(false);\n    };\n\n    element.addEventListener('mouseenter', onMouseEnter);\n    element.addEventListener('mouseleave', onMouseLeave);\n\n    return () => {\n      element.removeEventListener('mouseenter', onMouseEnter);\n      element.removeEventListener('mouseleave', onMouseLeave);\n    };\n  }, [enabled, target, internalRef.state]);\n\n  if (target) return hovering;\n  return {\n    ref: internalRef,\n    value: hovering\n  } as const;\n}) as UseHover;\n"],"names":["useHover","params","target","isTarget","options","enabled","hovering","setHovering","useState","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","getElement","onMouseEnter","event","onMouseLeave"],"mappings":";;;;AAoFO,MAAMA,IAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAGrBI,IAAUD,GAAS,WAAW,IAE9B,CAACE,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAcC,EAAA,GACdC,IAAqBC,EAAOR,CAAO;AA6BzC,SA5BAO,EAAmB,UAAUP,GAE7BS,EAAU,MAAM;AACd,QAAI,CAACR,KAAY,CAACH,KAAU,CAACO,EAAY,MAAQ;AAEjD,UAAMK,IAAWZ,IAASa,EAAWb,CAAM,IAAIO,EAAY;AAE3D,QAAI,CAACK,EAAS;AAEd,UAAME,IAAe,CAACC,MAAiB;AACrC,MAAAN,EAAmB,SAAS,UAAUM,CAAK,GAC3CV,EAAY,EAAI;AAAA,IAAA,GAGZW,IAAe,CAACD,MAAiB;AACrC,MAAAN,EAAmB,SAAS,UAAUM,CAAK,GAC3CV,EAAY,EAAK;AAAA,IAAA;AAGnB,WAAAO,EAAQ,iBAAiB,cAAcE,CAAY,GACnDF,EAAQ,iBAAiB,cAAcI,CAAY,GAE5C,MAAM;AACX,MAAAJ,EAAQ,oBAAoB,cAAcE,CAAY,GACtDF,EAAQ,oBAAoB,cAAcI,CAAY;AAAA,IAAA;AAAA,EACxD,GACC,CAACb,GAASH,GAAQO,EAAY,KAAK,CAAC,GAEnCP,IAAeI,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,OAAOH;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"useHover.mjs","sources":["../../../../src/hooks/useHover/useHover.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 hover options type */\nexport interface UseHoverOptions {\n  /** The enabled state of the hook */\n  enabled?: boolean;\n  /** The on entry callback */\n  onEntry?: (event: Event) => void;\n  /** The on leave callback */\n  onLeave?: (event: Event) => void;\n}\n\nexport interface UseHoverReturn {\n  value: boolean;\n}\n\nexport interface UseHover {\n  (target: HookTarget, callback?: (event: Event) => void): boolean;\n\n  (target: HookTarget, options?: UseHoverOptions): boolean;\n\n  <Target extends Element>(\n    callback?: (event: Event) => void,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseHoverReturn;\n\n  <Target extends Element>(\n    options?: UseHoverOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseHoverReturn;\n}\n\n/**\n * @name useHover\n * @description - Hook that defines the logic when hovering an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {boolean} The state of the hover\n *\n * @example\n * const hovering = useHover(ref, () => console.log('callback'));\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {boolean} The state of the hover\n *\n * @example\n * const hovering = useHover(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover\n *\n * @example\n * const [ref, hovering] = useHover(() => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover\n *\n * @example\n * const [ref, hovering] = useHover(options);\n */\nexport const useHover = ((...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        : { onEntry: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onEntry: params[0] }\n  ) as UseHoverOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n\n  const [hovering, setHovering] = useState(false);\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const onMouseEnter = (event: Event) => {\n      internalOptionsRef.current?.onEntry?.(event);\n      setHovering(true);\n    };\n\n    const onMouseLeave = (event: Event) => {\n      internalOptionsRef.current?.onLeave?.(event);\n      setHovering(false);\n    };\n\n    element.addEventListener('mouseenter', onMouseEnter);\n    element.addEventListener('mouseleave', onMouseLeave);\n\n    return () => {\n      element.removeEventListener('mouseenter', onMouseEnter);\n      element.removeEventListener('mouseleave', onMouseLeave);\n    };\n  }, [enabled, target, internalRef.state]);\n\n  if (target) return hovering;\n  return {\n    ref: internalRef,\n    value: hovering\n  } as const;\n}) as UseHover;\n"],"names":["useHover","params","target","isTarget","options","enabled","hovering","setHovering","useState","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onMouseEnter","event","onMouseLeave"],"mappings":";;;AAoFO,MAAMA,IAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAGrBI,IAAUD,GAAS,WAAW,IAE9B,CAACE,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAcC,EAAA,GACdC,IAAqBC,EAAOR,CAAO;AA6BzC,SA5BAO,EAAmB,UAAUP,GAE7BS,EAAU,MAAM;AACd,QAAI,CAACR,KAAY,CAACH,KAAU,CAACO,EAAY,MAAQ;AAEjD,UAAMK,IAAWZ,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY;AAEpE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAe,CAACC,MAAiB;AACrC,MAAAL,EAAmB,SAAS,UAAUK,CAAK,GAC3CT,EAAY,EAAI;AAAA,IAAA,GAGZU,IAAe,CAACD,MAAiB;AACrC,MAAAL,EAAmB,SAAS,UAAUK,CAAK,GAC3CT,EAAY,EAAK;AAAA,IAAA;AAGnB,WAAAO,EAAQ,iBAAiB,cAAcC,CAAY,GACnDD,EAAQ,iBAAiB,cAAcG,CAAY,GAE5C,MAAM;AACX,MAAAH,EAAQ,oBAAoB,cAAcC,CAAY,GACtDD,EAAQ,oBAAoB,cAAcG,CAAY;AAAA,IAAA;AAAA,EACxD,GACC,CAACZ,GAASH,GAAQO,EAAY,KAAK,CAAC,GAEnCP,IAAeI,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,OAAOH;AAAA,EAAA;AAEX;"}

package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs

@@ -1,22 +1,21 @@
-import { useState as k, useRef as L, useEffect as H } from "react";
-import { useRefState as I } from "../useRefState/useRefState.mjs";
-import { isTarget as T } from "../../utils/helpers/isTarget.mjs";
-import { getElement as W } from "../../utils/helpers/getElement.mjs";
-const M = (...e) => {
-  const t = T(e[0]) ? e[0] : void 0, c = t ? e[1] : e[0], s = t ? e[2] : e[1], i = s?.direction ?? "bottom", l = s?.distance ?? 10, [n, f] = k(!1), o = I(), a = L(c);
+import { useState as H, useRef as L, useEffect as I } from "react";
+import { useRefState as T } from "../useRefState/useRefState.mjs";
+import { isTarget as R } from "../../utils/helpers/isTarget.mjs";
+const B = (...e) => {
+  const t = R(e[0]) ? e[0] : void 0, c = t ? e[1] : e[0], s = t ? e[2] : e[1], i = s?.direction ?? "bottom", l = s?.distance ?? 10, [n, f] = H(!1), o = T(), a = L(c);
   a.current = c;
   const u = L(n);
-  return u.current = n, H(() => {
+  return u.current = n, I(() => {
     if (!t && !o.state) return;
-    const r = t ? W(t) : o.current;
+    const r = t ? R.getElement(t) : o.current;
     if (!r) return;
     const d = async (g) => {
       if (u.current) return;
-      const { clientHeight: R, scrollHeight: b, scrollTop: m, clientWidth: E, scrollWidth: p, scrollLeft: h } = g.target, v = b - (m + R), S = p - (h + E);
+      const { clientHeight: b, scrollHeight: E, scrollTop: m, clientWidth: v, scrollWidth: S, scrollLeft: h } = g.target, k = E - (m + b), p = S - (h + v);
       ({
-        bottom: v,
+        bottom: k,
         top: m,
-        right: S,
+        right: p,
         left: h
       })[i] <= l && (f(!0), await a.current(g), f(!1));
     };
@@ -29,6 +28,6 @@ const M = (...e) => {
   };
 };
 export {
-  M as useInfiniteScroll
+  B as useInfiniteScroll
 };
 //# sourceMappingURL=useInfiniteScroll.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useInfiniteScroll.mjs","sources":["../../../../src/hooks/useInfiniteScroll/useInfiniteScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use infinite scroll options type */\nexport interface UseInfiniteScrollOptions {\n  /** The direction to trigger the callback */\n  direction?: 'bottom' | 'left' | 'right' | 'top';\n  /** The distance in pixels to trigger the callback */\n  distance?: number;\n}\n\nexport interface UseInfiniteScroll {\n  (\n    target: HookTarget,\n    callback: (event: Event) => void,\n    options?: UseInfiniteScrollOptions\n  ): boolean;\n\n  <Target extends Element>(\n    callback: (event: Event) => void,\n    options?: UseInfiniteScrollOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n    loading: boolean;\n  };\n}\n\n/**\n * @name useInfiniteScroll\n * @description - Hook that defines the logic for infinite scroll\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {{ ref: StateRef<Target>, loading: boolean }} An object containing the ref and loading\n *\n * @example\n * const { ref, loading } = useInfiniteScroll(() => console.log('infinite scroll'));\n *\n * @overload\n * @param {HookTarget} target The target element to detect infinite scroll for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {boolean} A loading indicator of the infinite scroll\n *\n * @example\n * const loading = useInfiniteScroll(ref, () => console.log('infinite scroll'));\n */\nexport const useInfiniteScroll = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (event: Event) => void;\n  const options = (target ? params[2] : params[1]) as UseInfiniteScrollOptions | undefined;\n\n  const direction = options?.direction ?? 'bottom';\n  const distance = options?.distance ?? 10;\n\n  const [loading, setIsLoading] = useState(false);\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalLoadingRef = useRef(loading);\n  internalLoadingRef.current = loading;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onLoadMore = async (event: Event) => {\n      if (internalLoadingRef.current) return;\n\n      const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } =\n        event.target as Element;\n      const scrollBottom = scrollHeight - (scrollTop + clientHeight);\n      const scrollRight = scrollWidth - (scrollLeft + clientWidth);\n\n      const distances = {\n        bottom: scrollBottom,\n        top: scrollTop,\n        right: scrollRight,\n        left: scrollLeft\n      };\n\n      if (distances[direction] <= distance) {\n        setIsLoading(true);\n        await internalCallbackRef.current(event);\n        setIsLoading(false);\n      }\n    };\n\n    element.addEventListener('scroll', onLoadMore);\n\n    return () => {\n      element.removeEventListener('scroll', onLoadMore);\n    };\n  }, [target, internalRef.state, direction, distance]);\n\n  if (target) return loading;\n  return {\n    ref: internalRef,\n    loading\n  };\n}) as UseInfiniteScroll;\n"],"names":["useInfiniteScroll","params","target","isTarget","callback","options","direction","distance","loading","setIsLoading","useState","internalRef","useRefState","internalCallbackRef","useRef","internalLoadingRef","useEffect","element","getElement","onLoadMore","event","clientHeight","scrollHeight","scrollTop","clientWidth","scrollWidth","scrollLeft","scrollBottom","scrollRight"],"mappings":";;;;AA6DO,MAAMA,IAAqB,IAAIC,MAAkB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCK,IAAYD,GAAS,aAAa,UAClCE,IAAWF,GAAS,YAAY,IAEhC,CAACG,GAASC,CAAY,IAAIC,EAAS,EAAK,GAExCC,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAC3C,EAAAS,EAAoB,UAAUT;AAC9B,QAAMW,IAAqBD,EAAON,CAAO;AAqCzC,SApCAO,EAAmB,UAAUP,GAE7BQ,EAAU,MAAM;AACd,QAAI,CAACd,KAAU,CAACS,EAAY,MAAO;AACnC,UAAMM,IAAWf,IAASgB,EAAWhB,CAAM,IAAIS,EAAY;AAC3D,QAAI,CAACM,EAAS;AAEd,UAAME,IAAa,OAAOC,MAAiB;AACzC,UAAIL,EAAmB,QAAS;AAEhC,YAAM,EAAE,cAAAM,GAAc,cAAAC,GAAc,WAAAC,GAAW,aAAAC,GAAa,aAAAC,GAAa,YAAAC,MACvEN,EAAM,QACFO,IAAeL,KAAgBC,IAAYF,IAC3CO,IAAcH,KAAeC,IAAaF;AAShD,OAPkB;AAAA,QAChB,QAAQG;AAAA,QACR,KAAKJ;AAAA,QACL,OAAOK;AAAA,QACP,MAAMF;AAAA,MAAA,GAGMpB,CAAS,KAAKC,MAC1BE,EAAa,EAAI,GACjB,MAAMI,EAAoB,QAAQO,CAAK,GACvCX,EAAa,EAAK;AAAA,IACpB;AAGF,WAAAQ,EAAQ,iBAAiB,UAAUE,CAAU,GAEtC,MAAM;AACX,MAAAF,EAAQ,oBAAoB,UAAUE,CAAU;AAAA,IAAA;AAAA,EAClD,GACC,CAACjB,GAAQS,EAAY,OAAOL,GAAWC,CAAQ,CAAC,GAE/CL,IAAeM,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,SAAAH;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useInfiniteScroll.mjs","sources":["../../../../src/hooks/useInfiniteScroll/useInfiniteScroll.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 infinite scroll options type */\nexport interface UseInfiniteScrollOptions {\n  /** The direction to trigger the callback */\n  direction?: 'bottom' | 'left' | 'right' | 'top';\n  /** The distance in pixels to trigger the callback */\n  distance?: number;\n}\n\nexport interface UseInfiniteScroll {\n  (\n    target: HookTarget,\n    callback: (event: Event) => void,\n    options?: UseInfiniteScrollOptions\n  ): boolean;\n\n  <Target extends Element>(\n    callback: (event: Event) => void,\n    options?: UseInfiniteScrollOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n    loading: boolean;\n  };\n}\n\n/**\n * @name useInfiniteScroll\n * @description - Hook that defines the logic for infinite scroll\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {{ ref: StateRef<Target>, loading: boolean }} An object containing the ref and loading\n *\n * @example\n * const { ref, loading } = useInfiniteScroll(() => console.log('infinite scroll'));\n *\n * @overload\n * @param {HookTarget} target The target element to detect infinite scroll for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {boolean} A loading indicator of the infinite scroll\n *\n * @example\n * const loading = useInfiniteScroll(ref, () => console.log('infinite scroll'));\n */\nexport const useInfiniteScroll = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (event: Event) => void;\n  const options = (target ? params[2] : params[1]) as UseInfiniteScrollOptions | undefined;\n\n  const direction = options?.direction ?? 'bottom';\n  const distance = options?.distance ?? 10;\n\n  const [loading, setIsLoading] = useState(false);\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalLoadingRef = useRef(loading);\n  internalLoadingRef.current = loading;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onLoadMore = async (event: Event) => {\n      if (internalLoadingRef.current) return;\n\n      const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } =\n        event.target as Element;\n      const scrollBottom = scrollHeight - (scrollTop + clientHeight);\n      const scrollRight = scrollWidth - (scrollLeft + clientWidth);\n\n      const distances = {\n        bottom: scrollBottom,\n        top: scrollTop,\n        right: scrollRight,\n        left: scrollLeft\n      };\n\n      if (distances[direction] <= distance) {\n        setIsLoading(true);\n        await internalCallbackRef.current(event);\n        setIsLoading(false);\n      }\n    };\n\n    element.addEventListener('scroll', onLoadMore);\n\n    return () => {\n      element.removeEventListener('scroll', onLoadMore);\n    };\n  }, [target, internalRef.state, direction, distance]);\n\n  if (target) return loading;\n  return {\n    ref: internalRef,\n    loading\n  };\n}) as UseInfiniteScroll;\n"],"names":["useInfiniteScroll","params","target","isTarget","callback","options","direction","distance","loading","setIsLoading","useState","internalRef","useRefState","internalCallbackRef","useRef","internalLoadingRef","useEffect","element","onLoadMore","event","clientHeight","scrollHeight","scrollTop","clientWidth","scrollWidth","scrollLeft","scrollBottom","scrollRight"],"mappings":";;;AA6DO,MAAMA,IAAqB,IAAIC,MAAkB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCK,IAAYD,GAAS,aAAa,UAClCE,IAAWF,GAAS,YAAY,IAEhC,CAACG,GAASC,CAAY,IAAIC,EAAS,EAAK,GAExCC,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAC3C,EAAAS,EAAoB,UAAUT;AAC9B,QAAMW,IAAqBD,EAAON,CAAO;AAqCzC,SApCAO,EAAmB,UAAUP,GAE7BQ,EAAU,MAAM;AACd,QAAI,CAACd,KAAU,CAACS,EAAY,MAAO;AACnC,UAAMM,IAAWf,IAASC,EAAS,WAAWD,CAAM,IAAIS,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAa,OAAOC,MAAiB;AACzC,UAAIJ,EAAmB,QAAS;AAEhC,YAAM,EAAE,cAAAK,GAAc,cAAAC,GAAc,WAAAC,GAAW,aAAAC,GAAa,aAAAC,GAAa,YAAAC,MACvEN,EAAM,QACFO,IAAeL,KAAgBC,IAAYF,IAC3CO,IAAcH,KAAeC,IAAaF;AAShD,OAPkB;AAAA,QAChB,QAAQG;AAAA,QACR,KAAKJ;AAAA,QACL,OAAOK;AAAA,QACP,MAAMF;AAAA,MAAA,GAGMnB,CAAS,KAAKC,MAC1BE,EAAa,EAAI,GACjB,MAAMI,EAAoB,QAAQM,CAAK,GACvCV,EAAa,EAAK;AAAA,IACpB;AAGF,WAAAQ,EAAQ,iBAAiB,UAAUC,CAAU,GAEtC,MAAM;AACX,MAAAD,EAAQ,oBAAoB,UAAUC,CAAU;AAAA,IAAA;AAAA,EAClD,GACC,CAAChB,GAAQS,EAAY,OAAOL,GAAWC,CAAQ,CAAC,GAE/CL,IAAeM,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,SAAAH;AAAA,EAAA;AAEJ;"}