npm - @siberiacancode/reactuse - Versions diffs - 0.3.3 → 0.3.4 - Mend

@siberiacancode/reactuse 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (220) hide show

package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useKeyboard.cjs","sources":["../../../../src/hooks/useKeyboard/useKeyboard.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 keyboard event handler type /\nexport type KeyboardEventHandler = (event: KeyboardEvent) => void;\n\n/* The use keyboard event options type /\nexport interface UseKeyboardEventOptions {\n /* The callback function to be invoked on key down /\n onKeyDown?: KeyboardEventHandler;\n /* The callback function to be invoked on key up /\n onKeyUp?: KeyboardEventHandler;\n}\n\nexport interface UseKeyboard {\n (target: HookTarget, callback: KeyboardEventHandler): void;\n\n (target: HookTarget, options: UseKeyboardEventOptions): void;\n\n <Target extends HTMLElement>(\n callback: KeyboardEventHandler,\n target?: never\n ): { ref: StateRef<Target> };\n\n <Target extends HTMLElement>(\n options: UseKeyboardEventOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useKeyboard\n * @description - Hook that helps to listen for keyboard events\n * @category Sensors\n * @usage medium\n \n @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {void}\n \n @example\n * useKeyboard(ref, (event) => console.log('key down'));\n \n @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {void}\n \n @example\n * useKeyboard(ref, { onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n \n @overload\n * @template Target The target element type\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n \n @example\n * const ref = useKeyboard((event) => console.log('key down'));\n \n @overload\n * @template Target The target element type\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n \n @example\n * const ref = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n */\nexport const useKeyboard = ((...params: any[]) => {\n const target = isTarget(params[0]) ? params[0] : undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onKeyDown: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onKeyDown: params[0] }\n ) as UseKeyboardEventOptions;\n\n const internalRef = useRefState(window);\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n const onKeyDown = (event: Event) =>\n internalOptionsRef.current?.onKeyDown?.(event as KeyboardEvent);\n const onKeyUp = (event: Event) => internalOptionsRef.current?.onKeyUp?.(event as KeyboardEvent);\n\n element.addEventListener('keydown', onKeyDown);\n element.addEventListener('keyup', onKeyUp);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown);\n element.removeEventListener('keyup', onKeyUp);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseKeyboard;\n"],"names":["useKeyboard","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onKeyDown","event","onKeyUp"],"mappings":"mMA6EaA,~~EAAe~~,IAAIC,IAAkB,CAChD,MAAMC,EAASC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC3CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,UAAWA,EAAO,CAAC,CAAA,EACvB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,UAAWA,EAAO,CAAC,CAAA,EAGvBI,EAAcC,EAAAA,YAAY,MAAM,EAChCC,EAAqBC,EAAAA,OAAOJ,CAAO,EAsBzC,GArBAG,EAAmB,QAAUH,EAE7BK,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMK,EAAWR,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,QACpE,GAAI,CAACK,EAAS,OAEd,MAAMC,EAAaC,GACjBL,EAAmB,SAAS,YAAYK,CAAsB,EAC1DC,EAAWD,GAAiBL,EAAmB,SAAS,UAAUK,CAAsB,EAE9F,OAAAF,EAAQ,iBAAiB,UAAWC,CAAS,EAC7CD,EAAQ,iBAAiB,QAASG,CAAO,EAElC,IAAM,CACXH,EAAQ,oBAAoB,UAAWC,CAAS,EAChDD,EAAQ,oBAAoB,QAASG,CAAO,CAAA,CAC9C,EACC,CAACX,EAAQG,EAAY,~~KAAK~~,CAAC,~~EAE1B~~,~~CAAAH~~,EACJ,OAAOG,CACT"}
1	+ {"version":3,"file":"useKeyboard.cjs","sources":["../../../../src/hooks/useKeyboard/useKeyboard.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 keyboard event handler type /\nexport type KeyboardEventHandler = (event: KeyboardEvent) => void;\n\n/* The use keyboard event options type /\nexport interface UseKeyboardEventOptions {\n /* The callback function to be invoked on key down /\n onKeyDown?: KeyboardEventHandler;\n /* The callback function to be invoked on key up /\n onKeyUp?: KeyboardEventHandler;\n}\n\nexport interface UseKeyboard {\n (target: HookTarget, callback: KeyboardEventHandler): void;\n\n (target: HookTarget, options: UseKeyboardEventOptions): void;\n\n <Target extends HTMLElement>(\n callback: KeyboardEventHandler,\n target?: never\n ): { ref: StateRef<Target> };\n\n <Target extends HTMLElement>(\n options: UseKeyboardEventOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useKeyboard\n * @description - Hook that helps to listen for keyboard events\n * @category Sensors\n * @usage medium\n \n @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {void}\n \n @example\n * useKeyboard(ref, (event) => console.log('key down'));\n \n @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {void}\n \n @example\n * useKeyboard(ref, { onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n \n @overload\n * @template Target The target element type\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n \n @example\n * const ref = useKeyboard((event) => console.log('key down'));\n \n @overload\n * @template Target The target element type\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n \n @example\n * const ref = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n */\nexport const useKeyboard = ((...params: any[]) => {\n const target = isTarget(params[0]) ? params[0] : undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onKeyDown: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onKeyDown: params[0] }\n ) as UseKeyboardEventOptions;\n\n const internalRef = useRefState(window);\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n const onKeyDown = (event: Event) =>\n internalOptionsRef.current?.onKeyDown?.(event as KeyboardEvent);\n const onKeyUp = (event: Event) => internalOptionsRef.current?.onKeyUp?.(event as KeyboardEvent);\n\n element.addEventListener('keydown', onKeyDown);\n element.addEventListener('keyup', onKeyUp);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown);\n element.removeEventListener('keyup', onKeyUp);\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n if (target) return;\n return internalRef;\n}) as UseKeyboard;\n"],"names":["useKeyboard","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onKeyDown","event","onKeyUp"],"mappings":"mMA6EaA,GAAe,IAAIC,IAAkB,CAChD,MAAMC,EAASC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC3CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,UAAWA,EAAO,CAAC,CAAA,EACvB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,UAAWA,EAAO,CAAC,CAAA,EAGvBI,EAAcC,EAAAA,YAAY,MAAM,EAChCC,EAAqBC,EAAAA,OAAOJ,CAAO,EAsBzC,GArBAG,EAAmB,QAAUH,EAE7BK,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMK,EAAWR,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,QACpE,GAAI,CAACK,EAAS,OAEd,MAAMC,EAAaC,GACjBL,EAAmB,SAAS,YAAYK,CAAsB,EAC1DC,EAAWD,GAAiBL,EAAmB,SAAS,UAAUK,CAAsB,EAE9F,OAAAF,EAAQ,iBAAiB,UAAWC,CAAS,EAC7CD,EAAQ,iBAAiB,QAASG,CAAO,EAElC,IAAM,CACXH,EAAQ,oBAAoB,UAAWC,CAAS,EAChDD,EAAQ,oBAAoB,QAASG,CAAO,CAAA,CAC9C,EACC,CAACX,EAAQG,EAAY,MAAOF,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAExD,CAAAA,EACJ,OAAOG,CACT"}

package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),k=require("../useRefState/useRefState.cjs"),v=require("../../utils/helpers/isTarget.cjs"),E=(...o)=>{const e=v.isTarget(o[0])?o[0]:void 0,d=(e?o[1]:o[0])?.enabled??!0,[y,s]=l.useState([]),c=k.useRefState(window);return l.useEffect(()=>{if(!d)return;s([]);const t=e?v.isTarget.getElement(e):c.current;if(!t)return;const a=i=>{const n=i;s(r=>r.some(({code:u})=>u===n.code)?r:[...r,{key:n.key,code:n.code}])},f=i=>{const n=i;s(r=>r.filter(({code:u})=>u!==n.code))};return t.addEventListener("keydown",a),t.addEventListener("keyup",f),()=>{t.removeEventListener("keydown",a),t.removeEventListener("keyup",f)}},[d,c.state,e]),e?y:{value:y,ref:c}};exports.useKeysPressed=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),v=require("../useRefState/useRefState.cjs"),d=require("../../utils/helpers/isTarget.cjs"),k=((...o)=>{const e=d.isTarget(o[0])?o[0]:void 0,a=(e?o[1]:o[0])?.enabled??!0,[y,s]=l.useState([]),i=v.useRefState(window);return l.useEffect(()=>{if(!a)return;s([]);const t=e?d.isTarget.getElement(e):i.current;if(!t)return;const f=c=>{const n=c;s(r=>r.some(({code:u})=>u===n.code)?r:[...r,{key:n.key,code:n.code}])},g=c=>{const n=c;s(r=>r.filter(({code:u})=>u!==n.code))};return t.addEventListener("keydown",f),t.addEventListener("keyup",g),()=>{t.removeEventListener("keydown",f),t.removeEventListener("keyup",g)}},[a,i.state,e,d.isTarget.getRefState(e)]),e?y:{value:y,ref:i}});exports.useKeysPressed=k;
 //# sourceMappingURL=useKeysPressed.cjs.map

package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useKeysPressed.cjs","sources":["../../../../src/hooks/useKeysPressed/useKeysPressed.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use keys pressed options type /\nexport interface UseKeysPressedOptions {\n /* Enable or disable the event listeners /\n enabled?: boolean;\n}\n\nexport interface UseKeysPressed {\n (\n target: HookTarget \| Window,\n options?: UseKeysPressedOptions\n ): Array<{\n key: string;\n code: string;\n }>;\n\n <Target extends Element>(\n options?: UseKeysPressedOptions\n ): {\n value: Array<{ key: string; code: string }>;\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useKeysPressed\n * @description Tracks all currently pressed keyboard keys and their codes\n * @category Sensors\n * @usage low\n \n @overload\n * @param {HookTarget \| Window} target DOM element or ref to attach keyboard listeners to\n * @param {UseKeysPressedOptions} [options.enabled=true] Enable or disable the event listeners\n * @returns {Array<{ key: string; code: string }>} Array of currently pressed keys with their key and code values\n \n @example\n * const pressedKeys = useKeysPressed(ref);\n \n @overload\n * @template Target - Type of the target DOM element\n * @param {UseKeysPressedOptions} [options] - Optional configuration options\n * @returns {{ keys: Array<{ key: string; code: string }>; ref: StateRef<Target> }} Object containing pressed keys array and ref to attach to a DOM element\n \n @example\n * const { value, ref } = useKeysPressed();\n */\nexport const useKeysPressed = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseKeysPressedOptions \| undefined;\n\n const enabled = options?.enabled ?? true;\n const [value, setValue] = useState<{ key: string; code: string }[]>([]);\n const internalRef = useRefState(window);\n\n useEffect(() => {\n if (!enabled) return;\n setValue([]);\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onKeyDown = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n setValue((prevValue) => {\n if (prevValue.some(({ code }) => code === keyboardEvent.code)) return prevValue;\n return [...prevValue, { key: keyboardEvent.key, code: keyboardEvent.code }];\n });\n };\n\n const onKeyUp = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n setValue((prevValue) => prevValue.filter(({ code }) => code !== keyboardEvent.code));\n };\n\n element.addEventListener('keydown', onKeyDown);\n element.addEventListener('keyup', onKeyUp);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown);\n element.removeEventListener('keyup', onKeyUp);\n };\n }, [enabled, internalRef.state, target]);\n\n if (target) return value;\n return { value, ref: internalRef };\n}) as UseKeysPressed;\n"],"names":["useKeysPressed","params","target","isTarget","enabled","value","setValue","useState","internalRef","useRefState","useEffect","element","onKeyDown","event","keyboardEvent","prevValue","code","onKeyUp"],"mappings":"mMAuDaA,~~EAAkB~~,IAAIC,IAAkB,CACnD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAG5CG,GAFWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,IAErB,SAAW,GAC9B,CAACI,EAAOC,CAAQ,EAAIC,EAAAA,SAA0C,CAAA,CAAE,EAChEC,EAAcC,EAAAA,YAAY,MAAM,EA+BtC,OA7BAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAS,OACdE,EAAS,CAAA,CAAE,EAEX,MAAMK,EAAWT,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,QACpE,GAAI,CAACG,EAAS,OAEd,MAAMC,EAAaC,GAAiB,CAClC,MAAMC,EAAgBD,EACtBP,EAAUS,GACJA,EAAU,KAAK,CAAC,CAAE,KAAAC,CAAA,IAAWA,IAASF,EAAc,IAAI,EAAUC,EAC/D,CAAC,GAAGA,EAAW,CAAE,IAAKD,EAAc,IAAK,KAAMA,EAAc,KAAM,CAC3E,CAAA,EAGGG,EAAWJ,GAAiB,CAChC,MAAMC,EAAgBD,EACtBP,EAAUS,GAAcA,EAAU,OAAO,CAAC,CAAE,KAAAC,CAAA,IAAWA,IAASF,EAAc,IAAI,CAAC,CAAA,EAGrF,OAAAH,EAAQ,iBAAiB,UAAWC,CAAS,EAC7CD,EAAQ,iBAAiB,QAASM,CAAO,EAElC,IAAM,CACXN,EAAQ,oBAAoB,UAAWC,CAAS,EAChDD,EAAQ,oBAAoB,QAASM,CAAO,CAAA,CAC9C,EACC,CAACb,EAASI,EAAY,MAAON,CAAM,CAAC,~~EAEnCA~~,EAAeG,EACZ,CAAE,MAAAA,EAAO,IAAKG,CAAA,CACvB"}
1	+ {"version":3,"file":"useKeysPressed.cjs","sources":["../../../../src/hooks/useKeysPressed/useKeysPressed.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use keys pressed options type /\nexport interface UseKeysPressedOptions {\n /* Enable or disable the event listeners /\n enabled?: boolean;\n}\n\nexport interface UseKeysPressed {\n (\n target: HookTarget \| Window,\n options?: UseKeysPressedOptions\n ): Array<{\n key: string;\n code: string;\n }>;\n\n <Target extends Element>(\n options?: UseKeysPressedOptions\n ): {\n value: Array<{ key: string; code: string }>;\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useKeysPressed\n * @description Tracks all currently pressed keyboard keys and their codes\n * @category Sensors\n * @usage low\n \n @overload\n * @param {HookTarget \| Window} target DOM element or ref to attach keyboard listeners to\n * @param {UseKeysPressedOptions} [options.enabled=true] Enable or disable the event listeners\n * @returns {Array<{ key: string; code: string }>} Array of currently pressed keys with their key and code values\n \n @example\n * const pressedKeys = useKeysPressed(ref);\n \n @overload\n * @template Target - Type of the target DOM element\n * @param {UseKeysPressedOptions} [options] - Optional configuration options\n * @returns {{ keys: Array<{ key: string; code: string }>; ref: StateRef<Target> }} Object containing pressed keys array and ref to attach to a DOM element\n \n @example\n * const { value, ref } = useKeysPressed();\n */\nexport const useKeysPressed = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseKeysPressedOptions \| undefined;\n\n const enabled = options?.enabled ?? true;\n const [value, setValue] = useState<{ key: string; code: string }[]>([]);\n const internalRef = useRefState(window);\n\n useEffect(() => {\n if (!enabled) return;\n setValue([]);\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onKeyDown = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n setValue((prevValue) => {\n if (prevValue.some(({ code }) => code === keyboardEvent.code)) return prevValue;\n return [...prevValue, { key: keyboardEvent.key, code: keyboardEvent.code }];\n });\n };\n\n const onKeyUp = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n setValue((prevValue) => prevValue.filter(({ code }) => code !== keyboardEvent.code));\n };\n\n element.addEventListener('keydown', onKeyDown);\n element.addEventListener('keyup', onKeyUp);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown);\n element.removeEventListener('keyup', onKeyUp);\n };\n }, [enabled, internalRef.state, target, isTarget.getRefState(target)]);\n\n if (target) return value;\n return { value, ref: internalRef };\n}) as UseKeysPressed;\n"],"names":["useKeysPressed","params","target","isTarget","enabled","value","setValue","useState","internalRef","useRefState","useEffect","element","onKeyDown","event","keyboardEvent","prevValue","code","onKeyUp"],"mappings":"mMAuDaA,GAAkB,IAAIC,IAAkB,CACnD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAG5CG,GAFWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,IAErB,SAAW,GAC9B,CAACI,EAAOC,CAAQ,EAAIC,EAAAA,SAA0C,CAAA,CAAE,EAChEC,EAAcC,EAAAA,YAAY,MAAM,EA+BtC,OA7BAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAS,OACdE,EAAS,CAAA,CAAE,EAEX,MAAMK,EAAWT,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,QACpE,GAAI,CAACG,EAAS,OAEd,MAAMC,EAAaC,GAAiB,CAClC,MAAMC,EAAgBD,EACtBP,EAAUS,GACJA,EAAU,KAAK,CAAC,CAAE,KAAAC,CAAA,IAAWA,IAASF,EAAc,IAAI,EAAUC,EAC/D,CAAC,GAAGA,EAAW,CAAE,IAAKD,EAAc,IAAK,KAAMA,EAAc,KAAM,CAC3E,CAAA,EAGGG,EAAWJ,GAAiB,CAChC,MAAMC,EAAgBD,EACtBP,EAAUS,GAAcA,EAAU,OAAO,CAAC,CAAE,KAAAC,CAAA,IAAWA,IAASF,EAAc,IAAI,CAAC,CAAA,EAGrF,OAAAH,EAAQ,iBAAiB,UAAWC,CAAS,EAC7CD,EAAQ,iBAAiB,QAASM,CAAO,EAElC,IAAM,CACXN,EAAQ,oBAAoB,UAAWC,CAAS,EAChDD,EAAQ,oBAAoB,QAASM,CAAO,CAAA,CAC9C,EACC,CAACb,EAASI,EAAY,MAAON,EAAQC,WAAS,YAAYD,CAAM,CAAC,CAAC,EAEjEA,EAAeG,EACZ,CAAE,MAAAA,EAAO,IAAKG,CAAA,CACvB"}

package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),v=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),w=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),y=(...o)=>{const r=g.isTarget(o[0])?o[0]:void 0,n=(r?o[1]:o[0])?.enabled??!0,[l,i]=d.useState(n),c=w.useRefState(),t=d.useRef(null);v.useIsomorphicLayoutEffect(()=>{const e=(r?g.isTarget.getElement(r):c.current)??document.body;if(!(e instanceof HTMLElement)||(t.current=e,!n))return;const a=window.getComputedStyle(e).overflow;return t.current.__originalOverflow=a,e.style.overflow="hidden",()=>{e.style.overflow=a,t.current=null}},[r,c.state,n]);const u=()=>{if(!t.current)return;const e=t.current;t.current.__originalOverflow=window.getComputedStyle(e).overflow,e.style.overflow="hidden",i(!0)},s=()=>{if(!t.current)return;const e=t.current;e.style.overflow=t.current.__originalOverflow,i(!1)},f=()=>{if(l)return s();u()};return r?{value:l,lock:u,unlock:s,toggle:f}:{ref:c,value:l,lock:u,unlock:s,toggle:f}};exports.useLockScroll=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),v=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),w=require("../useRefState/useRefState.cjs"),i=require("../../utils/helpers/isTarget.cjs"),y=((...o)=>{const r=i.isTarget(o[0])?o[0]:void 0,n=(r?o[1]:o[0])?.enabled??!0,[l,f]=g.useState(n),c=w.useRefState(),t=g.useRef(null);v.useIsomorphicLayoutEffect(()=>{const e=(r?i.isTarget.getElement(r):c.current)??document.body;if(!(e instanceof HTMLElement)||(t.current=e,!n))return;const d=window.getComputedStyle(e).overflow;return t.current.__originalOverflow=d,e.style.overflow="hidden",()=>{e.style.overflow=d,t.current=null}},[r,c.state,i.isTarget.getRefState(r),n]);const u=()=>{if(!t.current)return;const e=t.current;t.current.__originalOverflow=window.getComputedStyle(e).overflow,e.style.overflow="hidden",f(!0)},s=()=>{if(!t.current)return;const e=t.current;e.style.overflow=t.current.__originalOverflow,f(!1)},a=()=>{if(l)return s();u()};return r?{value:l,lock:u,unlock:s,toggle:a}:{ref:c,value:l,lock:u,unlock:s,toggle:a}});exports.useLockScroll=y;
 //# sourceMappingURL=useLockScroll.cjs.map

package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useLockScroll.cjs","sources":["../../../../src/hooks/useLockScroll/useLockScroll.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use lock scroll options type /\nexport interface UseLockScrollOptions {\n /* Enable or disable scroll locking. Default: true /\n enabled?: boolean;\n}\n\n/* The use lock scroll return type /\nexport interface UseLockScrollReturn<Target extends Element> {\n /* The ref to attach to the element /\n ref: StateRef<Target>;\n /* The value of the lock state /\n value: boolean;\n /* Lock the scroll /\n lock: () => void;\n /* Toggle the scroll lock /\n toggle: () => void;\n /* Unlock the scroll /\n unlock: () => void;\n}\n\nexport interface UseLockScroll {\n (target: HookTarget, options?: UseLockScrollOptions): UseLockScrollReturn<Element>;\n\n <Target extends Element>(\n options?: UseLockScrollOptions,\n target?: never\n ): UseLockScrollReturn<Target> & { ref: StateRef<Target> };\n}\n\n/\n @name useLockScroll\n * @description - Hook that locks scroll on an element or document body\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} [target=document.body] The target element to lock scroll on\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {void}\n \n @example\n * const { lock, unlock, value, toggle } = useLockScroll(ref);\n \n @overload\n * @template Target The target element\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {StateRef<Target>} Ref to attach to element, or locks body scroll by default\n \n @example\n * const { ref, lock, unlock, value, toggle } = useLockScroll();\n */\nexport const useLockScroll = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseLockScrollOptions \| undefined;\n\n const enabled = options?.enabled ?? true;\n const [locked, setLocked] = useState(enabled);\n\n const internalRef = useRefState<Element>();\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? document.body;\n\n if (!(element instanceof HTMLElement)) return;\n\n elementRef.current = element;\n\n if (!enabled) return;\n\n const originalStyle = window.getComputedStyle(element).overflow;\n (elementRef.current as any).__originalOverflow = originalStyle;\n element.style.overflow = 'hidden';\n\n return () => {\n element.style.overflow = originalStyle;\n elementRef.current = null;\n };\n }, [target, internalRef.state, enabled]);\n\n const lock = () => {\n if (!elementRef.current) return;\n const element = elementRef.current as HTMLElement;\n (elementRef.current as any).__originalOverflow = window.getComputedStyle(element).overflow;\n element.style.overflow = 'hidden';\n setLocked(true);\n };\n\n const unlock = () => {\n if (!elementRef.current) return;\n const element = elementRef.current as HTMLElement;\n element.style.overflow = (elementRef.current as any).__originalOverflow;\n setLocked(false);\n };\n\n const toggle = () => {\n if (locked) return unlock();\n lock();\n };\n\n if (target)\n return {\n value: locked,\n lock,\n unlock,\n toggle\n };\n return {\n ref: internalRef,\n value: locked,\n lock,\n unlock,\n toggle\n };\n}) as UseLockScroll;\n"],"names":["useLockScroll","params","target","isTarget","enabled","locked","setLocked","useState","internalRef","useRefState","elementRef","useRef","useIsomorphicLayoutEffect","element","originalStyle","lock","unlock","toggle"],"mappings":"2QA8DaA,~~EAAiB~~,IAAIC,IAAuB,CACvD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAG5CG,GAFWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,IAErB,SAAW,GAC9B,CAACI,EAAQC,CAAS,EAAIC,EAAAA,SAASH,CAAO,EAEtCI,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAgB,IAAI,EAEvCC,EAAAA,0BAA0B,IAAM,CAC9B,MAAMC,GACFX,EAASC,WAAS,WAAWD,CAAM,EAAIM,EAAY,UAAwB,SAAS,KAMxF,GAJI,EAAEK,aAAmB,eAEzBH,EAAW,QAAUG,EAEjB,CAACT,GAAS,OAEd,MAAMU,EAAgB,OAAO,iBAAiBD,CAAO,EAAE,SACtD,OAAAH,EAAW,QAAgB,mBAAqBI,EACjDD,EAAQ,MAAM,SAAW,SAElB,IAAM,CACXA,EAAQ,MAAM,SAAWC,EACzBJ,EAAW,QAAU,IAAA,CACvB,EACC,CAACR,EAAQM,EAAY,~~MAAOJ~~,CAAO,CAAC,~~EAEvC~~,MAAMW,EAAO,IAAM,CACjB,GAAI,CAACL,EAAW,QAAS,OACzB,MAAMG,EAAUH,EAAW,QAC1BA,EAAW,QAAgB,mBAAqB,OAAO,iBAAiBG,CAAO,EAAE,SAClFA,EAAQ,MAAM,SAAW,SACzBP,EAAU,EAAI,CAAA,EAGVU,EAAS,IAAM,CACnB,GAAI,CAACN,EAAW,QAAS,OACzB,MAAMG,EAAUH,EAAW,QAC3BG,EAAQ,MAAM,SAAYH,EAAW,QAAgB,mBACrDJ,EAAU,EAAK,CAAA,EAGXW,EAAS,IAAM,CACnB,GAAIZ,SAAeW,EAAA,EACnBD,EAAA,CAAK,EAGP,OAAIb,EACK,CACL,MAAOG,EACP,KAAAU,EACA,OAAAC,EACA,OAAAC,CAAA,EAEG,CACL,IAAKT,EACL,MAAOH,EACP,KAAAU,EACA,OAAAC,EACA,OAAAC,CAAA,CAEJ"}
1	+ {"version":3,"file":"useLockScroll.cjs","sources":["../../../../src/hooks/useLockScroll/useLockScroll.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use lock scroll options type /\nexport interface UseLockScrollOptions {\n /* Enable or disable scroll locking. Default: true /\n enabled?: boolean;\n}\n\n/* The use lock scroll return type /\nexport interface UseLockScrollReturn<Target extends Element> {\n /* The ref to attach to the element /\n ref: StateRef<Target>;\n /* The value of the lock state /\n value: boolean;\n /* Lock the scroll /\n lock: () => void;\n /* Toggle the scroll lock /\n toggle: () => void;\n /* Unlock the scroll /\n unlock: () => void;\n}\n\nexport interface UseLockScroll {\n (target: HookTarget, options?: UseLockScrollOptions): UseLockScrollReturn<Element>;\n\n <Target extends Element>(\n options?: UseLockScrollOptions,\n target?: never\n ): UseLockScrollReturn<Target> & { ref: StateRef<Target> };\n}\n\n/\n @name useLockScroll\n * @description - Hook that locks scroll on an element or document body\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} [target=document.body] The target element to lock scroll on\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {void}\n \n @example\n * const { lock, unlock, value, toggle } = useLockScroll(ref);\n \n @overload\n * @template Target The target element\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {StateRef<Target>} Ref to attach to element, or locks body scroll by default\n \n @example\n * const { ref, lock, unlock, value, toggle } = useLockScroll();\n */\nexport const useLockScroll = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseLockScrollOptions \| undefined;\n\n const enabled = options?.enabled ?? true;\n const [locked, setLocked] = useState(enabled);\n\n const internalRef = useRefState<Element>();\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? document.body;\n\n if (!(element instanceof HTMLElement)) return;\n\n elementRef.current = element;\n\n if (!enabled) return;\n\n const originalStyle = window.getComputedStyle(element).overflow;\n (elementRef.current as any).__originalOverflow = originalStyle;\n element.style.overflow = 'hidden';\n\n return () => {\n element.style.overflow = originalStyle;\n elementRef.current = null;\n };\n }, [target, internalRef.state, isTarget.getRefState(target), enabled]);\n\n const lock = () => {\n if (!elementRef.current) return;\n const element = elementRef.current as HTMLElement;\n (elementRef.current as any).__originalOverflow = window.getComputedStyle(element).overflow;\n element.style.overflow = 'hidden';\n setLocked(true);\n };\n\n const unlock = () => {\n if (!elementRef.current) return;\n const element = elementRef.current as HTMLElement;\n element.style.overflow = (elementRef.current as any).__originalOverflow;\n setLocked(false);\n };\n\n const toggle = () => {\n if (locked) return unlock();\n lock();\n };\n\n if (target)\n return {\n value: locked,\n lock,\n unlock,\n toggle\n };\n return {\n ref: internalRef,\n value: locked,\n lock,\n unlock,\n toggle\n };\n}) as UseLockScroll;\n"],"names":["useLockScroll","params","target","isTarget","enabled","locked","setLocked","useState","internalRef","useRefState","elementRef","useRef","useIsomorphicLayoutEffect","element","originalStyle","lock","unlock","toggle"],"mappings":"2QA8DaA,GAAiB,IAAIC,IAAuB,CACvD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAG5CG,GAFWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,IAErB,SAAW,GAC9B,CAACI,EAAQC,CAAS,EAAIC,EAAAA,SAASH,CAAO,EAEtCI,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAgB,IAAI,EAEvCC,EAAAA,0BAA0B,IAAM,CAC9B,MAAMC,GACFX,EAASC,WAAS,WAAWD,CAAM,EAAIM,EAAY,UAAwB,SAAS,KAMxF,GAJI,EAAEK,aAAmB,eAEzBH,EAAW,QAAUG,EAEjB,CAACT,GAAS,OAEd,MAAMU,EAAgB,OAAO,iBAAiBD,CAAO,EAAE,SACtD,OAAAH,EAAW,QAAgB,mBAAqBI,EACjDD,EAAQ,MAAM,SAAW,SAElB,IAAM,CACXA,EAAQ,MAAM,SAAWC,EACzBJ,EAAW,QAAU,IAAA,CACvB,EACC,CAACR,EAAQM,EAAY,MAAOL,EAAAA,SAAS,YAAYD,CAAM,EAAGE,CAAO,CAAC,EAErE,MAAMW,EAAO,IAAM,CACjB,GAAI,CAACL,EAAW,QAAS,OACzB,MAAMG,EAAUH,EAAW,QAC1BA,EAAW,QAAgB,mBAAqB,OAAO,iBAAiBG,CAAO,EAAE,SAClFA,EAAQ,MAAM,SAAW,SACzBP,EAAU,EAAI,CAAA,EAGVU,EAAS,IAAM,CACnB,GAAI,CAACN,EAAW,QAAS,OACzB,MAAMG,EAAUH,EAAW,QAC3BG,EAAQ,MAAM,SAAYH,EAAW,QAAgB,mBACrDJ,EAAU,EAAK,CAAA,EAGXW,EAAS,IAAM,CACnB,GAAIZ,SAAeW,EAAA,EACnBD,EAAA,CAAK,EAGP,OAAIb,EACK,CACL,MAAOG,EACP,KAAAU,EACA,OAAAC,EACA,OAAAC,CAAA,EAEG,CACL,IAAKT,EACL,MAAOH,EACP,KAAAU,EACA,OAAAC,EACA,OAAAC,CAAA,CAEJ"}

package/dist/cjs/hooks/useLongPress/useLongPress.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),w=require("../useRefState/useRefState.cjs"),m=require("../../utils/helpers/isTarget.cjs"),T=400,g=(...r)=>{const n=m.isTarget(r[0])?r[0]:void 0,f=n?r[1]:r[0],l=n?r[2]:r[1],[v,E]=s.useState(!1),o=s.useRef(void 0),a=s.useRef(!1),i=w.useRefState(),L=s.useRef(f);L.current=f;const u=s.useRef(l);return u.current=l,s.useEffect(()=>{if(!n&&!i.state)return;const e=n?m.isTarget.getElement(n):i.current;if(!e)return;const d=c=>{u.current?.onStart?.(c),a.current=!0,o.current=setTimeout(()=>{L.current(c),E(!0)},u.current?.threshold??T)},t=c=>{E(R=>(R?u.current?.onFinish?.(c):a.current&&u.current?.onCancel?.(c),!1)),a.current=!1,o.current&&clearTimeout(o.current)};return e.addEventListener("mousedown",d),e.addEventListener("touchstart",d),e.addEventListener("mouseup",t),e.addEventListener("touchend",t),window.addEventListener("mouseup",t),window.addEventListener("touchend",t),()=>{e.removeEventListener("mousedown",d),e.removeEventListener("touchstart",d),e.removeEventListener("mouseup",t),e.removeEventListener("touchend",t),window.removeEventListener("mouseup",t),window.removeEventListener("touchend",t),o.current&&clearTimeout(o.current)}},[n,i.state]),n?v:{ref:i,pressed:v}};exports.useLongPress=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),g=require("../useRefState/useRefState.cjs"),f=require("../../utils/helpers/isTarget.cjs"),T=400,w=((...r)=>{const t=f.isTarget(r[0])?r[0]:void 0,l=t?r[1]:r[0],v=t?r[2]:r[1],[E,L]=s.useState(!1),o=s.useRef(void 0),a=s.useRef(!1),i=g.useRefState(),m=s.useRef(l);m.current=l;const u=s.useRef(v);return u.current=v,s.useEffect(()=>{if(!t&&!i.state)return;const e=t?f.isTarget.getElement(t):i.current;if(!e)return;const d=c=>{u.current?.onStart?.(c),a.current=!0,o.current=setTimeout(()=>{m.current(c),L(!0)},u.current?.threshold??T)},n=c=>{L(R=>(R?u.current?.onFinish?.(c):a.current&&u.current?.onCancel?.(c),!1)),a.current=!1,o.current&&clearTimeout(o.current)};return e.addEventListener("mousedown",d),e.addEventListener("touchstart",d),e.addEventListener("mouseup",n),e.addEventListener("touchend",n),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{e.removeEventListener("mousedown",d),e.removeEventListener("touchstart",d),e.removeEventListener("mouseup",n),e.removeEventListener("touchend",n),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n),o.current&&clearTimeout(o.current)}},[t,i.state,f.isTarget.getRefState(t)]),t?E:{ref:i,pressed:E}});exports.useLongPress=w;
 //# sourceMappingURL=useLongPress.cjs.map

package/dist/cjs/hooks/useLongPress/useLongPress.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useLongPress.cjs","sources":["../../../../src/hooks/useLongPress/useLongPress.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type LongPressEvents = MouseEvent \| TouchEvent;\n\n// * The use long press options type /\nexport interface UseLongPressOptions {\n // The threshold time in milliseconds\n threshold?: number;\n // * The callback function to be invoked on long press cancel\n onCancel?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press end\n onFinish?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press start\n onStart?: (event: LongPressEvents) => void;\n}\n\nexport interface UseLongPress {\n (\n target: HookTarget,\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions\n ): boolean;\n\n <Target extends Element>(\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n pressed: boolean;\n };\n}\n\nconst DEFAULT_THRESHOLD_TIME = 400;\n\n/*\n @name useLongPress\n * @description - Hook that defines the logic when long pressing an element\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} target The target element to be long pressed\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n \n @example\n * const pressed = useLongPress(ref, () => console.log('callback'));\n \n @overload\n * @template Target The target element\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n \n @example\n * const { ref, pressed } = useLongPress(() => console.log('callback'));\n */\nexport const useLongPress = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const callback = (target ? params[1] : params[0]) as (event: LongPressEvents) => void;\n const options = (target ? params[2] : params[1]) as UseLongPressOptions \| undefined;\n\n const [pressed, setPressed] = useState(false);\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const isPressedRef = useRef(false);\n const internalRef = useRefState<Element>();\n\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onStart = (event: LongPressEvents) => {\n internalOptionsRef.current?.onStart?.(event);\n\n isPressedRef.current = true;\n timeoutIdRef.current = setTimeout(() => {\n internalCallbackRef.current(event);\n setPressed(true);\n }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n };\n\n const onCancel = (event: LongPressEvents) => {\n setPressed((prevPressed) => {\n if (prevPressed) {\n internalOptionsRef.current?.onFinish?.(event);\n } else if (isPressedRef.current) {\n internalOptionsRef.current?.onCancel?.(event);\n }\n\n return false;\n });\n\n isPressedRef.current = false;\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n\n element.addEventListener('mousedown', onStart as EventListener);\n element.addEventListener('touchstart', onStart as EventListener);\n element.addEventListener('mouseup', onCancel as EventListener);\n element.addEventListener('touchend', onCancel as EventListener);\n window.addEventListener('mouseup', onCancel as EventListener);\n window.addEventListener('touchend', onCancel as EventListener);\n\n return () => {\n element.removeEventListener('mousedown', onStart as EventListener);\n element.removeEventListener('touchstart', onStart as EventListener);\n element.removeEventListener('mouseup', onCancel as EventListener);\n element.removeEventListener('touchend', onCancel as EventListener);\n window.removeEventListener('mouseup', onCancel as EventListener);\n window.removeEventListener('touchend', onCancel as EventListener);\n\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n }, [target, internalRef.state]);\n\n if (target) return pressed;\n return {\n ref: internalRef,\n pressed\n };\n}) as UseLongPress;\n"],"names":["DEFAULT_THRESHOLD_TIME","useLongPress","params","target","isTarget","callback","options","pressed","setPressed","useState","timeoutIdRef","useRef","isPressedRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","onStart","event","onCancel","prevPressed"],"mappings":"mMAyCMA,EAAyB,IA0BlBC,~~EAAgB~~,IAAIC,IAAuB,CACtD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExC,CAACK,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAeC,EAAAA,OAAsC,MAAS,EAC9DC,EAAeD,EAAAA,OAAO,EAAK,EAC3BE,EAAcC,EAAAA,YAAA,EAEdC,EAAsBJ,EAAAA,OAAON,CAAQ,EAC3CU,EAAoB,QAAUV,EAC9B,MAAMW,EAAqBL,EAAAA,OAAOL,CAAO,EAqDzC,OApDAU,EAAmB,QAAUV,EAE7BW,EAAAA,UAAU,IAAM,CACd,GAAI,CAACd,GAAU,CAACU,EAAY,MAAO,OAEnC,MAAMK,EAAUf,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIU,EAAY,QACnE,GAAI,CAACK,EAAS,OAEd,MAAMC,EAAWC,GAA2B,CAC1CJ,EAAmB,SAAS,UAAUI,CAAK,EAE3CR,EAAa,QAAU,GACvBF,EAAa,QAAU,WAAW,IAAM,CACtCK,EAAoB,QAAQK,CAAK,EACjCZ,EAAW,EAAI,CAAA,EACdQ,EAAmB,SAAS,WAAahB,CAAsB,CAAA,EAG9DqB,EAAYD,GAA2B,CAC3CZ,EAAYc,IACNA,EACFN,EAAmB,SAAS,WAAWI,CAAK,EACnCR,EAAa,SACtBI,EAAmB,SAAS,WAAWI,CAAK,EAGvC,GACR,EAEDR,EAAa,QAAU,GACnBF,EAAa,SAAS,aAAaA,EAAa,OAAO,CAAA,EAG7D,OAAAQ,EAAQ,iBAAiB,YAAaC,CAAwB,EAC9DD,EAAQ,iBAAiB,aAAcC,CAAwB,EAC/DD,EAAQ,iBAAiB,UAAWG,CAAyB,EAC7DH,EAAQ,iBAAiB,WAAYG,CAAyB,EAC9D,OAAO,iBAAiB,UAAWA,CAAyB,EAC5D,OAAO,iBAAiB,WAAYA,CAAyB,EAEtD,IAAM,CACXH,EAAQ,oBAAoB,YAAaC,CAAwB,EACjED,EAAQ,oBAAoB,aAAcC,CAAwB,EAClED,EAAQ,oBAAoB,UAAWG,CAAyB,EAChEH,EAAQ,oBAAoB,WAAYG,CAAyB,EACjE,OAAO,oBAAoB,UAAWA,CAAyB,EAC/D,OAAO,oBAAoB,WAAYA,CAAyB,EAE5DX,EAAa,SAAS,aAAaA,EAAa,OAAO,CAAA,CAC7D,EACC,CAACP,EAAQU,EAAY,~~KAAK~~,CAAC,~~EAE1BV~~,EAAeI,EACZ,CACL,IAAKM,EACL,QAAAN,CAAA,CAEJ"}
1	+ {"version":3,"file":"useLongPress.cjs","sources":["../../../../src/hooks/useLongPress/useLongPress.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type LongPressEvents = MouseEvent \| TouchEvent;\n\n// * The use long press options type /\nexport interface UseLongPressOptions {\n // The threshold time in milliseconds\n threshold?: number;\n // * The callback function to be invoked on long press cancel\n onCancel?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press end\n onFinish?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press start\n onStart?: (event: LongPressEvents) => void;\n}\n\nexport interface UseLongPress {\n (\n target: HookTarget,\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions\n ): boolean;\n\n <Target extends Element>(\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n pressed: boolean;\n };\n}\n\nconst DEFAULT_THRESHOLD_TIME = 400;\n\n/*\n @name useLongPress\n * @description - Hook that defines the logic when long pressing an element\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} target The target element to be long pressed\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n \n @example\n * const pressed = useLongPress(ref, () => console.log('callback'));\n \n @overload\n * @template Target The target element\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n \n @example\n * const { ref, pressed } = useLongPress(() => console.log('callback'));\n */\nexport const useLongPress = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const callback = (target ? params[1] : params[0]) as (event: LongPressEvents) => void;\n const options = (target ? params[2] : params[1]) as UseLongPressOptions \| undefined;\n\n const [pressed, setPressed] = useState(false);\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const isPressedRef = useRef(false);\n const internalRef = useRefState<Element>();\n\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onStart = (event: LongPressEvents) => {\n internalOptionsRef.current?.onStart?.(event);\n\n isPressedRef.current = true;\n timeoutIdRef.current = setTimeout(() => {\n internalCallbackRef.current(event);\n setPressed(true);\n }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n };\n\n const onCancel = (event: LongPressEvents) => {\n setPressed((prevPressed) => {\n if (prevPressed) {\n internalOptionsRef.current?.onFinish?.(event);\n } else if (isPressedRef.current) {\n internalOptionsRef.current?.onCancel?.(event);\n }\n\n return false;\n });\n\n isPressedRef.current = false;\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n\n element.addEventListener('mousedown', onStart as EventListener);\n element.addEventListener('touchstart', onStart as EventListener);\n element.addEventListener('mouseup', onCancel as EventListener);\n element.addEventListener('touchend', onCancel as EventListener);\n window.addEventListener('mouseup', onCancel as EventListener);\n window.addEventListener('touchend', onCancel as EventListener);\n\n return () => {\n element.removeEventListener('mousedown', onStart as EventListener);\n element.removeEventListener('touchstart', onStart as EventListener);\n element.removeEventListener('mouseup', onCancel as EventListener);\n element.removeEventListener('touchend', onCancel as EventListener);\n window.removeEventListener('mouseup', onCancel as EventListener);\n window.removeEventListener('touchend', onCancel as EventListener);\n\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n if (target) return pressed;\n return {\n ref: internalRef,\n pressed\n };\n}) as UseLongPress;\n"],"names":["DEFAULT_THRESHOLD_TIME","useLongPress","params","target","isTarget","callback","options","pressed","setPressed","useState","timeoutIdRef","useRef","isPressedRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","onStart","event","onCancel","prevPressed"],"mappings":"mMAyCMA,EAAyB,IA0BlBC,GAAgB,IAAIC,IAAuB,CACtD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExC,CAACK,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAeC,EAAAA,OAAsC,MAAS,EAC9DC,EAAeD,EAAAA,OAAO,EAAK,EAC3BE,EAAcC,EAAAA,YAAA,EAEdC,EAAsBJ,EAAAA,OAAON,CAAQ,EAC3CU,EAAoB,QAAUV,EAC9B,MAAMW,EAAqBL,EAAAA,OAAOL,CAAO,EAqDzC,OApDAU,EAAmB,QAAUV,EAE7BW,EAAAA,UAAU,IAAM,CACd,GAAI,CAACd,GAAU,CAACU,EAAY,MAAO,OAEnC,MAAMK,EAAUf,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIU,EAAY,QACnE,GAAI,CAACK,EAAS,OAEd,MAAMC,EAAWC,GAA2B,CAC1CJ,EAAmB,SAAS,UAAUI,CAAK,EAE3CR,EAAa,QAAU,GACvBF,EAAa,QAAU,WAAW,IAAM,CACtCK,EAAoB,QAAQK,CAAK,EACjCZ,EAAW,EAAI,CAAA,EACdQ,EAAmB,SAAS,WAAahB,CAAsB,CAAA,EAG9DqB,EAAYD,GAA2B,CAC3CZ,EAAYc,IACNA,EACFN,EAAmB,SAAS,WAAWI,CAAK,EACnCR,EAAa,SACtBI,EAAmB,SAAS,WAAWI,CAAK,EAGvC,GACR,EAEDR,EAAa,QAAU,GACnBF,EAAa,SAAS,aAAaA,EAAa,OAAO,CAAA,EAG7D,OAAAQ,EAAQ,iBAAiB,YAAaC,CAAwB,EAC9DD,EAAQ,iBAAiB,aAAcC,CAAwB,EAC/DD,EAAQ,iBAAiB,UAAWG,CAAyB,EAC7DH,EAAQ,iBAAiB,WAAYG,CAAyB,EAC9D,OAAO,iBAAiB,UAAWA,CAAyB,EAC5D,OAAO,iBAAiB,WAAYA,CAAyB,EAEtD,IAAM,CACXH,EAAQ,oBAAoB,YAAaC,CAAwB,EACjED,EAAQ,oBAAoB,aAAcC,CAAwB,EAClED,EAAQ,oBAAoB,UAAWG,CAAyB,EAChEH,EAAQ,oBAAoB,WAAYG,CAAyB,EACjE,OAAO,oBAAoB,UAAWA,CAAyB,EAC/D,OAAO,oBAAoB,WAAYA,CAAyB,EAE5DX,EAAa,SAAS,aAAaA,EAAa,OAAO,CAAA,CAC7D,EACC,CAACP,EAAQU,EAAY,MAAOT,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAExDA,EAAeI,EACZ,CACL,IAAKM,EACL,QAAAN,CAAA,CAEJ"}

package/dist/cjs/hooks/useMeasure/useMeasure.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),S=require("../useRefState/useRefState.cjs"),u=require("../../utils/helpers/isTarget.cjs"),m=(...r)=>{const e=u.isTarget(r[0])?r[0]:void 0,t=S.useRefState(),[s,a]=c.useState({x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0});return c.useEffect(()=>{if(!e&&!t.state)return;const n=e?u.isTarget.getElement(e):t.current;if(!n)return;const o=new ResizeObserver(f=>{const i=f[0];if(!i)return;const{x:g,y:h,width:l,height:b,top:d,left:R,bottom:v,right:y}=i.contentRect;a({x:g,y:h,width:l,height:b,top:d,left:R,bottom:v,right:y})});return o.observe(n),()=>{o.disconnect()}},[e,t.state]),e?s:{ref:t,...s}};exports.useMeasure=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),y=require("../useRefState/useRefState.cjs"),r=require("../../utils/helpers/isTarget.cjs"),T=((...s)=>{const e=r.isTarget(s[0])?s[0]:void 0,t=y.useRefState(),[n,a]=u.useState({x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0});return u.useEffect(()=>{if(!e&&!t.state)return;const i=e?r.isTarget.getElement(e):t.current;if(!i)return;const o=new ResizeObserver(f=>{const c=f[0];if(!c)return;const{x:g,y:h,width:l,height:b,top:R,left:d,bottom:S,right:v}=c.contentRect;a({x:g,y:h,width:l,height:b,top:R,left:d,bottom:S,right:v})});return o.observe(i),()=>{o.disconnect()}},[e,t.state,r.isTarget.getRefState(e)]),e?n:{ref:t,...n}});exports.useMeasure=T;
 //# sourceMappingURL=useMeasure.cjs.map

package/dist/cjs/hooks/useMeasure/useMeasure.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useMeasure.cjs","sources":["../../../../src/hooks/useMeasure/useMeasure.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use measure return type /\nexport type UseMeasureReturn = Pick<\n DOMRectReadOnly,\n 'bottom' \| 'height' \| 'left' \| 'right' \| 'top' \| 'width' \| 'x' \| 'y'\n>;\n\nexport interface UseMeasure {\n (target: HookTarget): UseMeasureReturn;\n\n <Target extends Element>(\n target?: never\n ): UseMeasureReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useMeasure\n * @description - Hook to measure the size and position of an element\n * @category Browser\n * @usage low\n \n @overload\n * @param {HookTarget} target The element to measure\n * @returns {UseMeasureReturn} The element's size and position\n \n @example\n * const { x, y, width, height, top, left, bottom, right } = useMeasure(ref);\n \n @overload\n * @template Target The element to measure\n * @returns {UseMeasureReturn & { ref: StateRef<Target> }} The element's size and position\n \n @example\n * const { ref, x, y, width, height, top, left, bottom, right } = useMeasure();\n */\nexport const useMeasure = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const internalRef = useRefState<Element>();\n const [rect, setRect] = useState({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0\n });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const resizeObserver = new ResizeObserver((entries) => {\n const entry = entries[0];\n if (!entry) return;\n\n const { x, y, width, height, top, left, bottom, right } = entry.contentRect;\n setRect({ x, y, width, height, top, left, bottom, right });\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [target, internalRef.state]);\n\n if (target) return rect;\n return { ref: internalRef, ...rect };\n}) as UseMeasure;\n"],"names":["useMeasure","params","target","isTarget","internalRef","useRefState","rect","setRect","useState","useEffect","element","resizeObserver","entries","entry","x","y","width","height","top","left","bottom","right"],"mappings":"mMA8CaA,~~EAAc~~,IAAIC,IAAkB,CAC/C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EAAcC,EAAAA,YAAA,EACd,CAACC,EAAMC,CAAO,EAAIC,WAAS,CAC/B,EAAG,EACH,EAAG,EACH,MAAO,EACP,OAAQ,EACR,IAAK,EACL,KAAM,EACN,OAAQ,EACR,MAAO,CAAA,CACR,EAuBD,OArBAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,GAAU,CAACE,EAAY,MAAO,OAEnC,MAAMM,EAAWR,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIE,EAAY,QACpE,GAAI,CAACM,EAAS,OAEd,MAAMC,EAAiB,IAAI,eAAgBC,GAAY,CACrD,MAAMC,EAAQD,EAAQ,CAAC,EACvB,GAAI,CAACC,EAAO,OAEZ,KAAM,CAAE,EAAAC,EAAG,EAAAC,EAAG,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,KAAAC,EAAM,OAAAC,EAAQ,MAAAC,CAAA,EAAUR,EAAM,YAChEN,EAAQ,CAAE,EAAAO,EAAG,EAAAC,EAAG,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,KAAAC,EAAM,OAAAC,EAAQ,MAAAC,EAAO,CAAA,CAC1D,EAED,OAAAV,EAAe,QAAQD,CAAO,EAEvB,IAAM,CACXC,EAAe,WAAA,CAAW,CAC5B,EACC,CAACT,EAAQE,EAAY,~~KAAK~~,CAAC,~~EAE1BF~~,EAAeI,EACZ,CAAE,IAAKF,EAAa,GAAGE,CAAA,CAChC"}
1	+ {"version":3,"file":"useMeasure.cjs","sources":["../../../../src/hooks/useMeasure/useMeasure.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use measure return type /\nexport type UseMeasureReturn = Pick<\n DOMRectReadOnly,\n 'bottom' \| 'height' \| 'left' \| 'right' \| 'top' \| 'width' \| 'x' \| 'y'\n>;\n\nexport interface UseMeasure {\n (target: HookTarget): UseMeasureReturn;\n\n <Target extends Element>(\n target?: never\n ): UseMeasureReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useMeasure\n * @description - Hook to measure the size and position of an element\n * @category Browser\n * @usage low\n \n @overload\n * @param {HookTarget} target The element to measure\n * @returns {UseMeasureReturn} The element's size and position\n \n @example\n * const { x, y, width, height, top, left, bottom, right } = useMeasure(ref);\n \n @overload\n * @template Target The element to measure\n * @returns {UseMeasureReturn & { ref: StateRef<Target> }} The element's size and position\n \n @example\n * const { ref, x, y, width, height, top, left, bottom, right } = useMeasure();\n */\nexport const useMeasure = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const internalRef = useRefState<Element>();\n const [rect, setRect] = useState({\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0\n });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const resizeObserver = new ResizeObserver((entries) => {\n const entry = entries[0];\n if (!entry) return;\n\n const { x, y, width, height, top, left, bottom, right } = entry.contentRect;\n setRect({ x, y, width, height, top, left, bottom, right });\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n if (target) return rect;\n return { ref: internalRef, ...rect };\n}) as UseMeasure;\n"],"names":["useMeasure","params","target","isTarget","internalRef","useRefState","rect","setRect","useState","useEffect","element","resizeObserver","entries","entry","x","y","width","height","top","left","bottom","right"],"mappings":"mMA8CaA,GAAc,IAAIC,IAAkB,CAC/C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EAAcC,EAAAA,YAAA,EACd,CAACC,EAAMC,CAAO,EAAIC,WAAS,CAC/B,EAAG,EACH,EAAG,EACH,MAAO,EACP,OAAQ,EACR,IAAK,EACL,KAAM,EACN,OAAQ,EACR,MAAO,CAAA,CACR,EAuBD,OArBAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,GAAU,CAACE,EAAY,MAAO,OAEnC,MAAMM,EAAWR,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIE,EAAY,QACpE,GAAI,CAACM,EAAS,OAEd,MAAMC,EAAiB,IAAI,eAAgBC,GAAY,CACrD,MAAMC,EAAQD,EAAQ,CAAC,EACvB,GAAI,CAACC,EAAO,OAEZ,KAAM,CAAE,EAAAC,EAAG,EAAAC,EAAG,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,KAAAC,EAAM,OAAAC,EAAQ,MAAAC,CAAA,EAAUR,EAAM,YAChEN,EAAQ,CAAE,EAAAO,EAAG,EAAAC,EAAG,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,KAAAC,EAAM,OAAAC,EAAQ,MAAAC,EAAO,CAAA,CAC1D,EAED,OAAAV,EAAe,QAAQD,CAAO,EAEvB,IAAM,CACXC,EAAe,WAAA,CAAW,CAC5B,EACC,CAACT,EAAQE,EAAY,MAAOD,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAExDA,EAAeI,EACZ,CAAE,IAAKF,EAAa,GAAGE,CAAA,CAChC"}

package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),J=require("../useRefState/useRefState.cjs"),j=require("../../utils/helpers/isTarget.cjs"),q=r=>{let a=[];for(let s=0;s<r.length;++s)a=[...a,[r.start(s),r.end(s)]];return a},K=(...r)=>{const a=j.isTarget(r[0])?r[0]:void 0,s=a?typeof r[1]=="object"?r[1]:{src:r[1]}:typeof r[0]=="object"?r[0]:{src:r[0]},u=J.useRefState(),t=n.useRef(null),[i,o]=n.useState(!1),[c,d]=n.useState(0),[x,l]=n.useState(0),[D,m]=n.useState(!1),[W,B]=n.useState(!1),[O,U]=n.useState([]),[z,v]=n.useState(!1),[F,g]=n.useState(!1),[G,f]=n.useState(1),[H,E]=n.useState(!1),[I,y]=n.useState(1);n.useEffect(()=>{const e=a?j.isTarget.getElement(a):u.current;if(!e)return;t.current=e,e.src=s.src,s.type&&e.setAttribute("type",s.type),s.media&&e.setAttribute("media",s.media),d(e.duration),l(e.currentTime),o(!1),g(e.ended),E(e.muted),y(e.volume),f(e.playbackRate);const p=()=>{o(!0),v(!1)},k=()=>o(!1),h=()=>B(!0),b=()=>v(!0),R=()=>m(!0),T=()=>m(!1),M=()=>{o(!1),g(!0)},P=()=>d(e.duration),w=()=>l(e.currentTime),A=()=>{E(e.muted),y(e.volume)},C=()=>f(e.playbackRate),V=()=>U(q(e.buffered));return e.addEventListener("playing",p),e.addEventListener("pause",k),e.addEventListener("waiting",h),e.addEventListener("progress",V),e.addEventListener("stalled",b),e.addEventListener("seeking",R),e.addEventListener("seeked",T),e.addEventListener("ended",M),e.addEventListener("loadedmetadata",P),e.addEventListener("timeupdate",w),e.addEventListener("volumechange",A),e.addEventListener("ratechange",C),()=>{e.removeEventListener("playing",p),e.removeEventListener("pause",k),e.removeEventListener("waiting",h),e.removeEventListener("progress",V),e.removeEventListener("stalled",b),e.removeEventListener("seeking",R),e.removeEventListener("seeked",T),e.removeEventListener("ended",M),e.removeEventListener("loadedmetadata",P),e.removeEventListener("timeupdate",w),e.removeEventListener("volumechange",A),e.removeEventListener("ratechange",C)}},[a,u.state]);const L=async()=>{const e=t.current;e&&await e.play()},S=()=>{t.current&&t.current.pause()};return{playing:i,duration:c,currentTime:x,seeking:D,waiting:W,buffered:O,stalled:z,ended:F,playbackRate:G,muted:H,volume:I,play:L,pause:S,toggle:async()=>i?S():L(),seek:e=>{t.current&&(t.current.currentTime=Math.min(Math.max(e,0),c))},changeVolume:e=>{t.current&&(t.current.volume=Math.min(Math.max(e,0),1))},mute:()=>{t.current&&(t.current.muted=!0)},unmute:()=>{t.current&&(t.current.muted=!1)},changePlaybackRate:e=>{t.current&&(t.current.playbackRate=e)},...!a&&{ref:u}}};exports.timeRangeToArray=q;exports.useMediaControls=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),J=require("../useRefState/useRefState.cjs"),i=require("../../utils/helpers/isTarget.cjs"),q=r=>{let s=[];for(let a=0;a<r.length;++a)s=[...s,[r.start(a),r.end(a)]];return s},K=((...r)=>{const s=i.isTarget(r[0])?r[0]:void 0,a=s?typeof r[1]=="object"?r[1]:{src:r[1]}:typeof r[0]=="object"?r[0]:{src:r[0]},u=J.useRefState(),t=n.useRef(null),[c,o]=n.useState(!1),[d,l]=n.useState(0),[x,m]=n.useState(0),[D,g]=n.useState(!1),[W,B]=n.useState(!1),[O,U]=n.useState([]),[z,v]=n.useState(!1),[F,f]=n.useState(!1),[G,E]=n.useState(1),[H,y]=n.useState(!1),[I,L]=n.useState(1);n.useEffect(()=>{const e=s?i.isTarget.getElement(s):u.current;if(!e)return;t.current=e,e.src=a.src,a.type&&e.setAttribute("type",a.type),a.media&&e.setAttribute("media",a.media),l(e.duration),m(e.currentTime),o(!1),f(e.ended),y(e.muted),L(e.volume),E(e.playbackRate);const k=()=>{o(!0),v(!1)},h=()=>o(!1),b=()=>B(!0),R=()=>v(!0),T=()=>g(!0),M=()=>g(!1),P=()=>{o(!1),f(!0)},w=()=>l(e.duration),A=()=>m(e.currentTime),C=()=>{y(e.muted),L(e.volume)},V=()=>E(e.playbackRate),j=()=>U(q(e.buffered));return e.addEventListener("playing",k),e.addEventListener("pause",h),e.addEventListener("waiting",b),e.addEventListener("progress",j),e.addEventListener("stalled",R),e.addEventListener("seeking",T),e.addEventListener("seeked",M),e.addEventListener("ended",P),e.addEventListener("loadedmetadata",w),e.addEventListener("timeupdate",A),e.addEventListener("volumechange",C),e.addEventListener("ratechange",V),()=>{e.removeEventListener("playing",k),e.removeEventListener("pause",h),e.removeEventListener("waiting",b),e.removeEventListener("progress",j),e.removeEventListener("stalled",R),e.removeEventListener("seeking",T),e.removeEventListener("seeked",M),e.removeEventListener("ended",P),e.removeEventListener("loadedmetadata",w),e.removeEventListener("timeupdate",A),e.removeEventListener("volumechange",C),e.removeEventListener("ratechange",V)}},[s,u.state,i.isTarget.getRefState(s)]);const S=async()=>{const e=t.current;e&&await e.play()},p=()=>{t.current&&t.current.pause()};return{playing:c,duration:d,currentTime:x,seeking:D,waiting:W,buffered:O,stalled:z,ended:F,playbackRate:G,muted:H,volume:I,play:S,pause:p,toggle:async()=>c?p():S(),seek:e=>{t.current&&(t.current.currentTime=Math.min(Math.max(e,0),d))},changeVolume:e=>{t.current&&(t.current.volume=Math.min(Math.max(e,0),1))},mute:()=>{t.current&&(t.current.muted=!0)},unmute:()=>{t.current&&(t.current.muted=!1)},changePlaybackRate:e=>{t.current&&(t.current.playbackRate=e)},...!s&&{ref:u}}});exports.timeRangeToArray=q;exports.useMediaControls=K;
 //# sourceMappingURL=useMediaControls.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useMediaControls.cjs","sources":["../../../../src/hooks/useMediaControls/useMediaControls.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const timeRangeToArray = (timeRanges: TimeRanges) => {\n let ranges: [number, number][] = [];\n\n for (let i = 0; i < timeRanges.length; ++i)\n ranges = [...ranges, [timeRanges.start(i), timeRanges.end(i)]];\n\n return ranges;\n};\n\n/** The media source configuration type /\nexport interface UseMediaSource {\n /* The media attribute of the media /\n media?: string;\n /* The source URL of the media /\n src: string;\n /* The MIME type of the media /\n type?: string;\n}\n\n/* The media controls return type /\nexport interface UseMediaControlsReturn {\n /* Whether the media is currently buffering /\n buffered: [number, number][];\n /* The current playback position in seconds /\n currentTime: number;\n /* The total duration of the media in seconds /\n duration: number;\n /* Whether the media has ended /\n ended: boolean;\n /* Whether the media is currently muted /\n muted: boolean;\n /* The current playback rate (1.0 is normal speed) /\n playbackRate: number;\n /* Whether the media is currently playing /\n playing: boolean;\n /* Whether the media is currently seeking /\n seeking: boolean;\n /* Whether the media is currently stalled /\n stalled: boolean;\n /* The current volume level (0.0 to 1.0) /\n volume: number;\n /* Whether the media is currently waiting /\n waiting: boolean;\n\n /* Set the playback rate /\n changePlaybackRate: (rate: number) => void;\n /* Set the volume level (0.0 to 1.0) /\n changeVolume: (volume: number) => void;\n /* Set the muted state /\n mute: () => void;\n /* Pause the media /\n pause: () => void;\n /* Start playing the media /\n play: () => Promise<void>;\n /* Seek to a specific time in seconds /\n seek: (time: number) => void;\n /* Toggle between play and pause /\n toggle: () => Promise<void>;\n /* Set the unmuted state /\n unmute: () => void;\n}\n\nexport interface UseMediaControls {\n (target: HookTarget, src: string): UseMediaControlsReturn;\n\n (target: HookTarget, options: UseMediaSource): UseMediaControlsReturn;\n\n <Target extends HTMLMediaElement>(\n src: string\n ): UseMediaControlsReturn & {\n ref: StateRef<Target>;\n };\n\n <Target extends HTMLMediaElement>(\n options: UseMediaSource\n ): UseMediaControlsReturn & { ref: StateRef<Target> };\n}\n\n/\n @name useMediaControls\n * @description Hook that provides controls for HTML media elements (audio/video)\n * @category Browser\n * @usage low\n \n @overload\n * @param {HookTarget} target The target media element\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n \n @example\n * const { playing, play, pause } = useMediaControls(videoRef, 'video.mp4');\n \n @overload\n * @param {HookTarget} target The target media element\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n \n @example\n * const { playing, play, pause } = useMediaControls(audioRef, { src: 'audio.mp3', type: 'audio/mp3' });\n \n @overload\n * @template Target The target media element type\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n \n @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>('video.mp4');\n \n @overload\n * @template Target The target media element type\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n \n @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>({ src: 'video.mp4', type: 'video/mp4' });\n */\nexport const useMediaControls = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { src: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { src: params[0] }\n ) as UseMediaSource;\n\n const internalRef = useRefState<HTMLMediaElement>();\n const elementRef = useRef<HTMLMediaElement \| null>(null);\n\n const [playing, setPlaying] = useState(false);\n const [duration, setDuration] = useState(0);\n const [currentTime, setCurrentTime] = useState(0);\n const [seeking, setSeeking] = useState(false);\n const [waiting, setWaiting] = useState(false);\n const [buffered, setBuffered] = useState<[number, number][]>([]);\n const [stalled, setStalled] = useState(false);\n const [ended, setEnded] = useState(false);\n const [playbackRate, setPlaybackRateState] = useState(1);\n\n const [muted, setMutedState] = useState(false);\n const [volume, setVolumeState] = useState(1);\n\n useEffect(() => {\n const element = (\n target ? isTarget.getElement(target) : internalRef.current\n ) as HTMLMediaElement;\n\n if (!element) return;\n\n elementRef.current = element;\n element.src = options.src;\n\n if (options.type) element.setAttribute('type', options.type);\n if (options.media) element.setAttribute('media', options.media);\n\n setDuration(element.duration);\n setCurrentTime(element.currentTime);\n setPlaying(false);\n setEnded(element.ended);\n setMutedState(element.muted);\n setVolumeState(element.volume);\n setPlaybackRateState(element.playbackRate);\n\n const onPlaying = () => {\n setPlaying(true);\n setStalled(false);\n };\n const onPause = () => setPlaying(false);\n const onWaiting = () => setWaiting(true);\n const onStalled = () => setStalled(true);\n const onSeeking = () => setSeeking(true);\n const onSeeked = () => setSeeking(false);\n const onEnded = () => {\n setPlaying(false);\n setEnded(true);\n };\n const onDurationChange = () => setDuration(element.duration);\n const onTimeUpdate = () => setCurrentTime(element.currentTime);\n const onVolumechange = () => {\n setMutedState(element.muted);\n setVolumeState(element.volume);\n };\n const onRatechange = () => setPlaybackRateState(element.playbackRate);\n const onProgress = () => setBuffered(timeRangeToArray(element.buffered));\n\n element.addEventListener('playing', onPlaying);\n element.addEventListener('pause', onPause);\n element.addEventListener('waiting', onWaiting);\n element.addEventListener('progress', onProgress);\n element.addEventListener('stalled', onStalled);\n element.addEventListener('seeking', onSeeking);\n element.addEventListener('seeked', onSeeked);\n element.addEventListener('ended', onEnded);\n element.addEventListener('loadedmetadata', onDurationChange);\n element.addEventListener('timeupdate', onTimeUpdate);\n element.addEventListener('volumechange', onVolumechange);\n element.addEventListener('ratechange', onRatechange);\n\n return () => {\n element.removeEventListener('playing', onPlaying);\n element.removeEventListener('pause', onPause);\n element.removeEventListener('waiting', onWaiting);\n element.removeEventListener('progress', onProgress);\n element.removeEventListener('stalled', onStalled);\n element.removeEventListener('seeking', onSeeking);\n element.removeEventListener('seeked', onSeeked);\n element.removeEventListener('ended', onEnded);\n element.removeEventListener('loadedmetadata', onDurationChange);\n element.removeEventListener('timeupdate', onTimeUpdate);\n element.removeEventListener('volumechange', onVolumechange);\n element.removeEventListener('ratechange', onRatechange);\n };\n }, [target, internalRef.state]);\n\n const play = async () => {\n const element = elementRef.current;\n if (!element) return;\n\n await element.play();\n };\n\n const pause = () => {\n if (!elementRef.current) return;\n elementRef.current.pause();\n };\n\n const toggle = async () => {\n if (playing) return pause();\n return play();\n };\n\n const seek = (time: number) => {\n if (!elementRef.current) return;\n elementRef.current.currentTime = Math.min(Math.max(time, 0), duration);\n };\n\n const changeVolume = (value: number) => {\n if (!elementRef.current) return;\n elementRef.current.volume = Math.min(Math.max(value, 0), 1);\n };\n\n const mute = () => {\n if (!elementRef.current) return;\n elementRef.current.muted = true;\n };\n\n const unmute = () => {\n if (!elementRef.current) return;\n elementRef.current.muted = false;\n };\n\n const changePlaybackRate = (value: number) => {\n if (!elementRef.current) return;\n elementRef.current.playbackRate = value;\n };\n\n return {\n playing,\n duration,\n currentTime,\n seeking,\n waiting,\n buffered,\n stalled,\n ended,\n playbackRate,\n muted,\n volume,\n\n play,\n pause,\n toggle,\n seek,\n changeVolume,\n mute,\n unmute,\n changePlaybackRate,\n\n ...(!target && { ref: internalRef })\n };\n}) as UseMediaControls;\n"],"names":["timeRangeToArray","timeRanges","ranges","i","useMediaControls","params","target","isTarget","options","internalRef","useRefState","elementRef","useRef","playing","setPlaying","useState","duration","setDuration","currentTime","setCurrentTime","seeking","setSeeking","waiting","setWaiting","buffered","setBuffered","stalled","setStalled","ended","setEnded","playbackRate","setPlaybackRateState","muted","setMutedState","volume","setVolumeState","useEffect","element","onPlaying","onPause","onWaiting","onStalled","onSeeking","onSeeked","onEnded","onDurationChange","onTimeUpdate","onVolumechange","onRatechange","onProgress","play","pause","time","value"],"mappings":"mMAUaA,EAAoBC,GAA2B,CAC1D,IAAIC,EAA6B,CAAA,EAEjC,QAASC,EAAI,EAAGA,EAAIF,EAAW,OAAQ,EAAEE,EACvCD,EAAS,CAAC,GAAGA,EAAQ,CAACD,EAAW,MAAME,CAAC,EAAGF,EAAW,IAAIE,CAAC,CAAC,CAAC,EAE/D,OAAOD,CACT,EA6GaE,EAAoB,IAAIC,IAAkB,CACrD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,IAAKA,EAAO,CAAC,CAAA,EACjB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,IAAKA,EAAO,CAAC,CAAA,EAGjBI,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAgC,IAAI,EAEjD,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtC,CAACC,EAAUC,CAAW,EAAIF,EAAAA,SAAS,CAAC,EACpC,CAACG,EAAaC,CAAc,EAAIJ,EAAAA,SAAS,CAAC,EAC1C,CAACK,EAASC,CAAU,EAAIN,EAAAA,SAAS,EAAK,EACtC,CAACO,EAASC,CAAU,EAAIR,EAAAA,SAAS,EAAK,EACtC,CAACS,EAAUC,CAAW,EAAIV,EAAAA,SAA6B,CAAA,CAAE,EACzD,CAACW,EAASC,CAAU,EAAIZ,EAAAA,SAAS,EAAK,EACtC,CAACa,EAAOC,CAAQ,EAAId,EAAAA,SAAS,EAAK,EAClC,CAACe,EAAcC,CAAoB,EAAIhB,EAAAA,SAAS,CAAC,EAEjD,CAACiB,EAAOC,CAAa,EAAIlB,EAAAA,SAAS,EAAK,EACvC,CAACmB,EAAQC,CAAc,EAAIpB,EAAAA,SAAS,CAAC,EAE3CqB,EAAAA,UAAU,IAAM,CACd,MAAMC,EACJ/B,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,QAGrD,GAAI,CAAC4B,EAAS,OAEd1B,EAAW,QAAU0B,EACrBA,EAAQ,IAAM7B,EAAQ,IAElBA,EAAQ,MAAM6B,EAAQ,aAAa,OAAQ7B,EAAQ,IAAI,EACvDA,EAAQ,OAAO6B,EAAQ,aAAa,QAAS7B,EAAQ,KAAK,EAE9DS,EAAYoB,EAAQ,QAAQ,EAC5BlB,EAAekB,EAAQ,WAAW,EAClCvB,EAAW,EAAK,EAChBe,EAASQ,EAAQ,KAAK,EACtBJ,EAAcI,EAAQ,KAAK,EAC3BF,EAAeE,EAAQ,MAAM,EAC7BN,EAAqBM,EAAQ,YAAY,EAEzC,MAAMC,EAAY,IAAM,CACtBxB,EAAW,EAAI,EACfa,EAAW,EAAK,CAAA,EAEZY,EAAU,IAAMzB,EAAW,EAAK,EAChC0B,EAAY,IAAMjB,EAAW,EAAI,EACjCkB,EAAY,IAAMd,EAAW,EAAI,EACjCe,EAAY,IAAMrB,EAAW,EAAI,EACjCsB,EAAW,IAAMtB,EAAW,EAAK,EACjCuB,EAAU,IAAM,CACpB9B,EAAW,EAAK,EAChBe,EAAS,EAAI,CAAA,EAETgB,EAAmB,IAAM5B,EAAYoB,EAAQ,QAAQ,EACrDS,EAAe,IAAM3B,EAAekB,EAAQ,WAAW,EACvDU,EAAiB,IAAM,CAC3Bd,EAAcI,EAAQ,KAAK,EAC3BF,EAAeE,EAAQ,MAAM,CAAA,EAEzBW,EAAe,IAAMjB,EAAqBM,EAAQ,YAAY,EAC9DY,EAAa,IAAMxB,EAAYzB,EAAiBqC,EAAQ,QAAQ,CAAC,EAEvE,OAAAA,EAAQ,iBAAiB,UAAWC,CAAS,EAC7CD,EAAQ,iBAAiB,QAASE,CAAO,EACzCF,EAAQ,iBAAiB,UAAWG,CAAS,EAC7CH,EAAQ,iBAAiB,WAAYY,CAAU,EAC/CZ,EAAQ,iBAAiB,UAAWI,CAAS,EAC7CJ,EAAQ,iBAAiB,UAAWK,CAAS,EAC7CL,EAAQ,iBAAiB,SAAUM,CAAQ,EAC3CN,EAAQ,iBAAiB,QAASO,CAAO,EACzCP,EAAQ,iBAAiB,iBAAkBQ,CAAgB,EAC3DR,EAAQ,iBAAiB,aAAcS,CAAY,EACnDT,EAAQ,iBAAiB,eAAgBU,CAAc,EACvDV,EAAQ,iBAAiB,aAAcW,CAAY,EAE5C,IAAM,CACXX,EAAQ,oBAAoB,UAAWC,CAAS,EAChDD,EAAQ,oBAAoB,QAASE,CAAO,EAC5CF,EAAQ,oBAAoB,UAAWG,CAAS,EAChDH,EAAQ,oBAAoB,WAAYY,CAAU,EAClDZ,EAAQ,oBAAoB,UAAWI,CAAS,EAChDJ,EAAQ,oBAAoB,UAAWK,CAAS,EAChDL,EAAQ,oBAAoB,SAAUM,CAAQ,EAC9CN,EAAQ,oBAAoB,QAASO,CAAO,EAC5CP,EAAQ,oBAAoB,iBAAkBQ,CAAgB,EAC9DR,EAAQ,oBAAoB,aAAcS,CAAY,EACtDT,EAAQ,oBAAoB,eAAgBU,CAAc,EAC1DV,EAAQ,oBAAoB,aAAcW,CAAY,CAAA,CACxD,EACC,CAAC1C,EAAQG,EAAY,KAAK,CAAC,EAE9B,MAAMyC,EAAO,SAAY,CACvB,MAAMb,EAAU1B,EAAW,QACtB0B,GAEL,MAAMA,EAAQ,KAAA,CAAK,EAGfc,EAAQ,IAAM,CACbxC,EAAW,SAChBA,EAAW,QAAQ,MAAA,CAAM,EAiC3B,MAAO,CACL,QAAAE,EACA,SAAAG,EACA,YAAAE,EACA,QAAAE,EACA,QAAAE,EACA,SAAAE,EACA,QAAAE,EACA,MAAAE,EACA,aAAAE,EACA,MAAAE,EACA,OAAAE,EAEA,KAAAgB,EACA,MAAAC,EACA,OA7Ca,SACTtC,EAAgBsC,EAAA,EACbD,EAAA,EA4CP,KAzCYE,GAAiB,CACxBzC,EAAW,UAChBA,EAAW,QAAQ,YAAc,KAAK,IAAI,KAAK,IAAIyC,EAAM,CAAC,EAAGpC,CAAQ,EAAA,EAwCrE,aArCoBqC,GAAkB,CACjC1C,EAAW,UAChBA,EAAW,QAAQ,OAAS,KAAK,IAAI,KAAK,IAAI0C,EAAO,CAAC,EAAG,CAAC,EAAA,EAoC1D,KAjCW,IAAM,CACZ1C,EAAW,UAChBA,EAAW,QAAQ,MAAQ,GAAA,EAgC3B,OA7Ba,IAAM,CACdA,EAAW,UAChBA,EAAW,QAAQ,MAAQ,GAAA,EA4B3B,mBAzB0B0C,GAAkB,CACvC1C,EAAW,UAChBA,EAAW,QAAQ,aAAe0C,EAAA,EAyBlC,GAAI,CAAC/C,GAAU,CAAE,IAAKG,CAAA,CAAY,CAEtC"}
1	+ {"version":3,"file":"useMediaControls.cjs","sources":["../../../../src/hooks/useMediaControls/useMediaControls.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const timeRangeToArray = (timeRanges: TimeRanges) => {\n let ranges: [number, number][] = [];\n\n for (let i = 0; i < timeRanges.length; ++i)\n ranges = [...ranges, [timeRanges.start(i), timeRanges.end(i)]];\n\n return ranges;\n};\n\n/** The media source configuration type /\nexport interface UseMediaSource {\n /* The media attribute of the media /\n media?: string;\n /* The source URL of the media /\n src: string;\n /* The MIME type of the media /\n type?: string;\n}\n\n/* The media controls return type /\nexport interface UseMediaControlsReturn {\n /* Whether the media is currently buffering /\n buffered: [number, number][];\n /* The current playback position in seconds /\n currentTime: number;\n /* The total duration of the media in seconds /\n duration: number;\n /* Whether the media has ended /\n ended: boolean;\n /* Whether the media is currently muted /\n muted: boolean;\n /* The current playback rate (1.0 is normal speed) /\n playbackRate: number;\n /* Whether the media is currently playing /\n playing: boolean;\n /* Whether the media is currently seeking /\n seeking: boolean;\n /* Whether the media is currently stalled /\n stalled: boolean;\n /* The current volume level (0.0 to 1.0) /\n volume: number;\n /* Whether the media is currently waiting /\n waiting: boolean;\n\n /* Set the playback rate /\n changePlaybackRate: (rate: number) => void;\n /* Set the volume level (0.0 to 1.0) /\n changeVolume: (volume: number) => void;\n /* Set the muted state /\n mute: () => void;\n /* Pause the media /\n pause: () => void;\n /* Start playing the media /\n play: () => Promise<void>;\n /* Seek to a specific time in seconds /\n seek: (time: number) => void;\n /* Toggle between play and pause /\n toggle: () => Promise<void>;\n /* Set the unmuted state /\n unmute: () => void;\n}\n\nexport interface UseMediaControls {\n (target: HookTarget, src: string): UseMediaControlsReturn;\n\n (target: HookTarget, options: UseMediaSource): UseMediaControlsReturn;\n\n <Target extends HTMLMediaElement>(\n src: string\n ): UseMediaControlsReturn & {\n ref: StateRef<Target>;\n };\n\n <Target extends HTMLMediaElement>(\n options: UseMediaSource\n ): UseMediaControlsReturn & { ref: StateRef<Target> };\n}\n\n/\n @name useMediaControls\n * @description Hook that provides controls for HTML media elements (audio/video)\n * @category Browser\n * @usage low\n \n @overload\n * @param {HookTarget} target The target media element\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n \n @example\n * const { playing, play, pause } = useMediaControls(videoRef, 'video.mp4');\n \n @overload\n * @param {HookTarget} target The target media element\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n \n @example\n * const { playing, play, pause } = useMediaControls(audioRef, { src: 'audio.mp3', type: 'audio/mp3' });\n \n @overload\n * @template Target The target media element type\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n \n @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>('video.mp4');\n \n @overload\n * @template Target The target media element type\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n \n @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>({ src: 'video.mp4', type: 'video/mp4' });\n */\nexport const useMediaControls = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { src: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { src: params[0] }\n ) as UseMediaSource;\n\n const internalRef = useRefState<HTMLMediaElement>();\n const elementRef = useRef<HTMLMediaElement \| null>(null);\n\n const [playing, setPlaying] = useState(false);\n const [duration, setDuration] = useState(0);\n const [currentTime, setCurrentTime] = useState(0);\n const [seeking, setSeeking] = useState(false);\n const [waiting, setWaiting] = useState(false);\n const [buffered, setBuffered] = useState<[number, number][]>([]);\n const [stalled, setStalled] = useState(false);\n const [ended, setEnded] = useState(false);\n const [playbackRate, setPlaybackRateState] = useState(1);\n\n const [muted, setMutedState] = useState(false);\n const [volume, setVolumeState] = useState(1);\n\n useEffect(() => {\n const element = (\n target ? isTarget.getElement(target) : internalRef.current\n ) as HTMLMediaElement;\n\n if (!element) return;\n\n elementRef.current = element;\n element.src = options.src;\n\n if (options.type) element.setAttribute('type', options.type);\n if (options.media) element.setAttribute('media', options.media);\n\n setDuration(element.duration);\n setCurrentTime(element.currentTime);\n setPlaying(false);\n setEnded(element.ended);\n setMutedState(element.muted);\n setVolumeState(element.volume);\n setPlaybackRateState(element.playbackRate);\n\n const onPlaying = () => {\n setPlaying(true);\n setStalled(false);\n };\n const onPause = () => setPlaying(false);\n const onWaiting = () => setWaiting(true);\n const onStalled = () => setStalled(true);\n const onSeeking = () => setSeeking(true);\n const onSeeked = () => setSeeking(false);\n const onEnded = () => {\n setPlaying(false);\n setEnded(true);\n };\n const onDurationChange = () => setDuration(element.duration);\n const onTimeUpdate = () => setCurrentTime(element.currentTime);\n const onVolumechange = () => {\n setMutedState(element.muted);\n setVolumeState(element.volume);\n };\n const onRatechange = () => setPlaybackRateState(element.playbackRate);\n const onProgress = () => setBuffered(timeRangeToArray(element.buffered));\n\n element.addEventListener('playing', onPlaying);\n element.addEventListener('pause', onPause);\n element.addEventListener('waiting', onWaiting);\n element.addEventListener('progress', onProgress);\n element.addEventListener('stalled', onStalled);\n element.addEventListener('seeking', onSeeking);\n element.addEventListener('seeked', onSeeked);\n element.addEventListener('ended', onEnded);\n element.addEventListener('loadedmetadata', onDurationChange);\n element.addEventListener('timeupdate', onTimeUpdate);\n element.addEventListener('volumechange', onVolumechange);\n element.addEventListener('ratechange', onRatechange);\n\n return () => {\n element.removeEventListener('playing', onPlaying);\n element.removeEventListener('pause', onPause);\n element.removeEventListener('waiting', onWaiting);\n element.removeEventListener('progress', onProgress);\n element.removeEventListener('stalled', onStalled);\n element.removeEventListener('seeking', onSeeking);\n element.removeEventListener('seeked', onSeeked);\n element.removeEventListener('ended', onEnded);\n element.removeEventListener('loadedmetadata', onDurationChange);\n element.removeEventListener('timeupdate', onTimeUpdate);\n element.removeEventListener('volumechange', onVolumechange);\n element.removeEventListener('ratechange', onRatechange);\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n const play = async () => {\n const element = elementRef.current;\n if (!element) return;\n\n await element.play();\n };\n\n const pause = () => {\n if (!elementRef.current) return;\n elementRef.current.pause();\n };\n\n const toggle = async () => {\n if (playing) return pause();\n return play();\n };\n\n const seek = (time: number) => {\n if (!elementRef.current) return;\n elementRef.current.currentTime = Math.min(Math.max(time, 0), duration);\n };\n\n const changeVolume = (value: number) => {\n if (!elementRef.current) return;\n elementRef.current.volume = Math.min(Math.max(value, 0), 1);\n };\n\n const mute = () => {\n if (!elementRef.current) return;\n elementRef.current.muted = true;\n };\n\n const unmute = () => {\n if (!elementRef.current) return;\n elementRef.current.muted = false;\n };\n\n const changePlaybackRate = (value: number) => {\n if (!elementRef.current) return;\n elementRef.current.playbackRate = value;\n };\n\n return {\n playing,\n duration,\n currentTime,\n seeking,\n waiting,\n buffered,\n stalled,\n ended,\n playbackRate,\n muted,\n volume,\n\n play,\n pause,\n toggle,\n seek,\n changeVolume,\n mute,\n unmute,\n changePlaybackRate,\n\n ...(!target && { ref: internalRef })\n };\n}) as UseMediaControls;\n"],"names":["timeRangeToArray","timeRanges","ranges","i","useMediaControls","params","target","isTarget","options","internalRef","useRefState","elementRef","useRef","playing","setPlaying","useState","duration","setDuration","currentTime","setCurrentTime","seeking","setSeeking","waiting","setWaiting","buffered","setBuffered","stalled","setStalled","ended","setEnded","playbackRate","setPlaybackRateState","muted","setMutedState","volume","setVolumeState","useEffect","element","onPlaying","onPause","onWaiting","onStalled","onSeeking","onSeeked","onEnded","onDurationChange","onTimeUpdate","onVolumechange","onRatechange","onProgress","play","pause","time","value"],"mappings":"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"}

package/dist/cjs/hooks/useMouse/useMouse.cjs CHANGED Viewed

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

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

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

package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs CHANGED Viewed

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

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

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

package/dist/cjs/hooks/useOtpCredential/useOtpCredential.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),u=(...t)=>{const n=typeof navigator<"u"&&"OTPCredential"in navigator&&!!navigator.OTPCredential,s=typeof t[0]=="function"?t[0]:t[0]?.onSuccess,a=typeof t[0]=="function"?t[0]?.onError:void 0,[i,o]=c.useState(!1),e=c.useRef(new AbortController);return{supported:n,abort:()=>{e.current.abort(),e.current=new AbortController,e.current.signal.onabort=()=>o(!0)},aborted:i,get:async()=>{if(n){e.current=new AbortController;try{const r=await navigator.credentials.get({otp:{transport:["sms"]},signal:e.current.signal});return s?.(r),o(!1),r}catch(r){a?.(r)}}}}};exports.useOtpCredential=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),u=((...t)=>{const n=typeof navigator<"u"&&"OTPCredential"in navigator&&!!navigator.OTPCredential,s=typeof t[0]=="function"?t[0]:t[0]?.onSuccess,a=typeof t[0]=="function"?t[0]?.onError:void 0,[i,o]=c.useState(!1),e=c.useRef(new AbortController);return{supported:n,abort:()=>{e.current.abort(),e.current=new AbortController,e.current.signal.onabort=()=>o(!0)},aborted:i,get:async()=>{if(n){e.current=new AbortController;try{const r=await navigator.credentials.get({otp:{transport:["sms"]},signal:e.current.signal});return s?.(r),o(!1),r}catch(r){a?.(r)}}}}});exports.useOtpCredential=u;
 //# sourceMappingURL=useOtpCredential.cjs.map

package/dist/cjs/hooks/useOtpCredential/useOtpCredential.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOtpCredential.cjs","sources":["../../../../src/hooks/useOtpCredential/useOtpCredential.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\ndeclare global {\n interface OTPOptions {\n readonly transport: string[];\n }\n\n interface CredentialRequestOptions {\n readonly otp: OTPOptions;\n }\n\n interface Credential {\n readonly code: string;\n }\n}\n\n/* The use otp credential callback type /\nexport type UseOtpCredentialCallback = (otp: Credential \| null) => void;\n\n/ The use otp credential options type /\nexport interface UseOtpCredentialParams {\n / The callback function to be invoked on error /\n onError: (error: any) => void;\n / The callback function to be invoked on success /\n onSuccess: (credential: Credential \| null) => void;\n}\n\n/ The use otp credential return type /\nexport interface UseOtpCredentialReturn {\n / The abort function /\n abort: AbortController['abort'];\n / The aborted state of the query /\n aborted: boolean;\n / The supported state of the otp credential /\n supported: boolean;\n / The get otp credential function /\n get: () => Promise<Credential \| null>;\n}\n\nexport interface UseOtpCredential {\n (callback?: UseOtpCredentialCallback): UseOtpCredentialReturn;\n\n (params?: UseOtpCredentialParams): UseOtpCredentialReturn;\n}\n\n/\n @name useOtpCredential\n * @description - Hook that creates an otp credential\n * @category Browser\n * @usage low\n \n @browserapi navigator.credentials https://developer.mozilla.org/en-US/docs/Web/API/Navigator/credentials\n \n @overload\n * @param {UseOtpCredentialCallback} callback The callback function to be invoked\n * @returns {UseOtpCredentialReturn}\n \n @example\n * useOtpCredential((credential) => console.log(credential));\n \n @overload\n * @param {UseOtpCredentialCallback} params.onSuccess The callback function to be invoked on success\n * @param {UseOtpCredentialCallback} params.onError The callback function to be invoked on error\n * @returns {UseOtpCredentialReturn}\n \n @example\n * useOtpCredential({ onSuccess: (credential) => console.log(credential), onError: (error) => console.log(error) });\n */\nexport const useOtpCredential = ((...params: any[]) => {\n const supported =\n typeof navigator !== 'undefined' && 'OTPCredential' in navigator && !!navigator.OTPCredential;\n\n const onSuccess =\n typeof params[0] === 'function'\n ? (params[0] as UseOtpCredentialCallback \| undefined)\n : (params[0] as UseOtpCredentialParams \| undefined)?.onSuccess;\n\n const onError =\n typeof params[0] === 'function'\n ? (params[0] as UseOtpCredentialParams \| undefined)?.onError\n : undefined;\n\n const [aborted, setAborted] = useState(false);\n\n const abortControllerRef = useRef<AbortController>(new AbortController());\n\n const get = async () => {\n if (!supported) return;\n\n abortControllerRef.current = new AbortController();\n try {\n const credential = await navigator.credentials.get({\n otp: { transport: ['sms'] },\n signal: abortControllerRef.current.signal\n });\n onSuccess?.(credential);\n setAborted(false);\n return credential;\n } catch (error) {\n onError?.(error);\n }\n };\n\n const abort = () => {\n abortControllerRef.current.abort();\n abortControllerRef.current = new AbortController();\n abortControllerRef.current.signal.onabort = () => setAborted(true);\n };\n\n return { supported, abort, aborted, get };\n}) as UseOtpCredential;\n"],"names":["useOtpCredential","params","supported","onSuccess","onError","aborted","setAborted","useState","abortControllerRef","useRef","credential","error"],"mappings":"yGAoEaA,~~EAAoB~~,IAAIC,IAAkB,CACrD,MAAMC,EACJ,OAAO,UAAc,KAAe,kBAAmB,WAAa,CAAC,CAAC,UAAU,cAE5EC,EACJ,OAAOF,EAAO,CAAC,GAAM,WAChBA,EAAO,CAAC,EACRA,EAAO,CAAC,GAA0C,UAEnDG,EACJ,OAAOH,EAAO,CAAC,GAAM,WAChBA,EAAO,CAAC,GAA0C,QACnD,OAEA,CAACI,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAEtCC,EAAqBC,EAAAA,OAAwB,IAAI,eAAiB,EAyBxE,MAAO,CAAE,UAAAP,EAAW,MANN,IAAM,CAClBM,EAAmB,QAAQ,MAAA,EAC3BA,EAAmB,QAAU,IAAI,gBACjCA,EAAmB,QAAQ,OAAO,QAAU,IAAMF,EAAW,EAAI,CAAA,EAGxC,QAAAD,EAAS,IAvBxB,SAAY,CACtB,GAAKH,EAEL,CAAAM,EAAmB,QAAU,IAAI,gBACjC,GAAI,CACF,MAAME,EAAa,MAAM,UAAU,YAAY,IAAI,CACjD,IAAK,CAAE,UAAW,CAAC,KAAK,CAAA,EACxB,OAAQF,EAAmB,QAAQ,MAAA,CACpC,EACD,OAAAL,IAAYO,CAAU,EACtBJ,EAAW,EAAK,EACTI,CAAA,OACAC,EAAO,CACdP,IAAUO,CAAK,CAAA,EACjB,CASkC,CACtC"}
1	+ {"version":3,"file":"useOtpCredential.cjs","sources":["../../../../src/hooks/useOtpCredential/useOtpCredential.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\ndeclare global {\n interface OTPOptions {\n readonly transport: string[];\n }\n\n interface CredentialRequestOptions {\n readonly otp: OTPOptions;\n }\n\n interface Credential {\n readonly code: string;\n }\n}\n\n/* The use otp credential callback type /\nexport type UseOtpCredentialCallback = (otp: Credential \| null) => void;\n\n/ The use otp credential options type /\nexport interface UseOtpCredentialParams {\n / The callback function to be invoked on error /\n onError: (error: any) => void;\n / The callback function to be invoked on success /\n onSuccess: (credential: Credential \| null) => void;\n}\n\n/ The use otp credential return type /\nexport interface UseOtpCredentialReturn {\n / The abort function /\n abort: AbortController['abort'];\n / The aborted state of the query /\n aborted: boolean;\n / The supported state of the otp credential /\n supported: boolean;\n / The get otp credential function /\n get: () => Promise<Credential \| null>;\n}\n\nexport interface UseOtpCredential {\n (callback?: UseOtpCredentialCallback): UseOtpCredentialReturn;\n\n (params?: UseOtpCredentialParams): UseOtpCredentialReturn;\n}\n\n/\n @name useOtpCredential\n * @description - Hook that creates an otp credential\n * @category Browser\n * @usage low\n \n @browserapi navigator.credentials https://developer.mozilla.org/en-US/docs/Web/API/Navigator/credentials\n \n @overload\n * @param {UseOtpCredentialCallback} callback The callback function to be invoked\n * @returns {UseOtpCredentialReturn}\n \n @example\n * useOtpCredential((credential) => console.log(credential));\n \n @overload\n * @param {UseOtpCredentialCallback} params.onSuccess The callback function to be invoked on success\n * @param {UseOtpCredentialCallback} params.onError The callback function to be invoked on error\n * @returns {UseOtpCredentialReturn}\n \n @example\n * useOtpCredential({ onSuccess: (credential) => console.log(credential), onError: (error) => console.log(error) });\n */\nexport const useOtpCredential = ((...params: any[]) => {\n const supported =\n typeof navigator !== 'undefined' && 'OTPCredential' in navigator && !!navigator.OTPCredential;\n\n const onSuccess =\n typeof params[0] === 'function'\n ? (params[0] as UseOtpCredentialCallback \| undefined)\n : (params[0] as UseOtpCredentialParams \| undefined)?.onSuccess;\n\n const onError =\n typeof params[0] === 'function'\n ? (params[0] as UseOtpCredentialParams \| undefined)?.onError\n : undefined;\n\n const [aborted, setAborted] = useState(false);\n\n const abortControllerRef = useRef<AbortController>(new AbortController());\n\n const get = async () => {\n if (!supported) return;\n\n abortControllerRef.current = new AbortController();\n try {\n const credential = await navigator.credentials.get({\n otp: { transport: ['sms'] },\n signal: abortControllerRef.current.signal\n });\n onSuccess?.(credential);\n setAborted(false);\n return credential;\n } catch (error) {\n onError?.(error);\n }\n };\n\n const abort = () => {\n abortControllerRef.current.abort();\n abortControllerRef.current = new AbortController();\n abortControllerRef.current.signal.onabort = () => setAborted(true);\n };\n\n return { supported, abort, aborted, get };\n}) as UseOtpCredential;\n"],"names":["useOtpCredential","params","supported","onSuccess","onError","aborted","setAborted","useState","abortControllerRef","useRef","credential","error"],"mappings":"yGAoEaA,GAAoB,IAAIC,IAAkB,CACrD,MAAMC,EACJ,OAAO,UAAc,KAAe,kBAAmB,WAAa,CAAC,CAAC,UAAU,cAE5EC,EACJ,OAAOF,EAAO,CAAC,GAAM,WAChBA,EAAO,CAAC,EACRA,EAAO,CAAC,GAA0C,UAEnDG,EACJ,OAAOH,EAAO,CAAC,GAAM,WAChBA,EAAO,CAAC,GAA0C,QACnD,OAEA,CAACI,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAEtCC,EAAqBC,EAAAA,OAAwB,IAAI,eAAiB,EAyBxE,MAAO,CAAE,UAAAP,EAAW,MANN,IAAM,CAClBM,EAAmB,QAAQ,MAAA,EAC3BA,EAAmB,QAAU,IAAI,gBACjCA,EAAmB,QAAQ,OAAO,QAAU,IAAMF,EAAW,EAAI,CAAA,EAGxC,QAAAD,EAAS,IAvBxB,SAAY,CACtB,GAAKH,EAEL,CAAAM,EAAmB,QAAU,IAAI,gBACjC,GAAI,CACF,MAAME,EAAa,MAAM,UAAU,YAAY,IAAI,CACjD,IAAK,CAAE,UAAW,CAAC,KAAK,CAAA,EACxB,OAAQF,EAAmB,QAAQ,MAAA,CACpC,EACD,OAAAL,IAAYO,CAAU,EACtBJ,EAAW,EAAK,EACTI,CAAA,OACAC,EAAO,CACdP,IAAUO,CAAK,CAAA,EACjB,CASkC,CACtC"}

package/dist/cjs/hooks/usePaint/usePaint.cjs CHANGED Viewed

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

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

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

package/dist/cjs/hooks/useParallax/useParallax.cjs CHANGED Viewed

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