@siberiacancode/reactuse 0.3.2 → 0.3.4

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useParallax.mjs","sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useDeviceOrientation } from '../useDeviceOrientation/useDeviceOrientation';\nimport { useOrientation } from '../useOrientation/useOrientation';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use parallax value type */\nexport interface UseParallaxValue {\n  /** Roll value. Scaled to `-0.5 ~ 0.5` */\n  roll: number;\n  /** Sensor source, can be `mouse` or `deviceOrientation` */\n  source: 'deviceOrientation' | 'mouse';\n  /** Tilt value. Scaled to `-0.5 ~ 0.5` */\n  tilt: number;\n}\n\n/** The use parallax options type */\nexport interface UseParallaxOptions {\n  /** Device orientation roll adjust function */\n  deviceOrientationRollAdjust?: (value: number) => number;\n  /** Device orientation tilt adjust function */\n  deviceOrientationTiltAdjust?: (value: number) => number;\n  /** Mouse roll adjust function */\n  mouseRollAdjust?: (value: number) => number;\n  /** Mouse tilt adjust function */\n  mouseTiltAdjust?: (value: number) => number;\n}\n\ninterface UseParallaxReturn {\n  value: UseParallaxValue;\n}\n\nexport interface UseParallax {\n  (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;\n\n  <Target extends Element>(\n    options?: UseParallaxOptions,\n    target?: never\n  ): UseParallaxReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useParallax\n * @description - Hook to help create parallax effect\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn} An object of parallax values\n *\n * @example\n * const { value } = useParallax(ref);\n *\n * @overload\n * @template Target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn & { ref: StateRef<Target> }} An object of parallax values\n *\n * @example\n * const { ref, value } = useParallax();\n */\nexport const useParallax = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (params[1] ? params[1] : params[0]) as UseParallaxOptions | undefined;\n\n  const internalRef = useRefState<Element>();\n\n  const screenOrientation = useOrientation();\n  const deviceOrientation = useDeviceOrientation();\n\n  const {\n    deviceOrientationRollAdjust = (value) => value,\n    deviceOrientationTiltAdjust = (value) => value,\n    mouseRollAdjust = (value) => value,\n    mouseTiltAdjust = (value) => value\n  } = (options ?? {}) as UseParallaxOptions;\n\n  const [value, setValue] = useState({\n    roll: 0,\n    tilt: 0,\n    source: 'mouse'\n  });\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onMouseMove = (event: MouseEvent) => {\n      const { left, top } = element.getBoundingClientRect();\n      const elementPositionX = left + window.scrollX;\n      const elementPositionY = top + window.scrollY;\n\n      const getSource = () => {\n        const isDeviceOrientation =\n          deviceOrientation.supported &&\n          (deviceOrientation.value.alpha || deviceOrientation.value.gamma);\n\n        if (isDeviceOrientation) return 'deviceOrientation';\n        return 'mouse';\n      };\n\n      const getRoll = () => {\n        const source = getSource();\n        if (source === 'deviceOrientation') {\n          let value: number;\n          switch (screenOrientation.value.orientationType) {\n            case 'landscape-primary':\n              value = deviceOrientation.value.gamma! / 90;\n              break;\n            case 'landscape-secondary':\n              value = -deviceOrientation.value.gamma! / 90;\n              break;\n            case 'portrait-primary':\n              value = -deviceOrientation.value.beta! / 90;\n              break;\n            case 'portrait-secondary':\n              value = deviceOrientation.value.beta! / 90;\n              break;\n            default:\n              value = -deviceOrientation.value.beta! / 90;\n          }\n          return deviceOrientationRollAdjust(value);\n        } else {\n          const y = event.pageY - elementPositionY;\n          const height = element.getBoundingClientRect().height;\n          const value = -(y - height / 2) / height;\n          return mouseRollAdjust(value);\n        }\n      };\n\n      const getTilt = () => {\n        const source = getSource();\n        if (source === 'deviceOrientation') {\n          let value: number;\n          switch (screenOrientation.value.orientationType) {\n            case 'landscape-primary':\n              value = deviceOrientation.value.beta! / 90;\n              break;\n            case 'landscape-secondary':\n              value = -deviceOrientation.value.beta! / 90;\n              break;\n            case 'portrait-primary':\n              value = deviceOrientation.value.gamma! / 90;\n              break;\n            case 'portrait-secondary':\n              value = -deviceOrientation.value.gamma! / 90;\n              break;\n            default:\n              value = deviceOrientation.value.gamma! / 90;\n          }\n          return deviceOrientationTiltAdjust(value);\n        } else {\n          const x = event.pageX - elementPositionX;\n          const width = element.getBoundingClientRect().width;\n          const value = (x - width / 2) / width;\n          return mouseTiltAdjust(value);\n        }\n      };\n\n      const source = getSource();\n      const roll = getRoll();\n      const tilt = getTilt();\n\n      setValue({\n        roll,\n        source,\n        tilt\n      });\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n    };\n  }, [\n    target,\n    internalRef.state,\n    screenOrientation.value.angle,\n    screenOrientation.value.orientationType,\n    deviceOrientation.value.gamma,\n    deviceOrientation.value.beta,\n    deviceOrientation.value.alpha,\n    deviceOrientation.value.absolute\n  ]);\n\n  if (target) return { value };\n\n  return {\n    ref: internalRef,\n    value\n  };\n}) as UseParallax;\n"],"names":["useParallax","params","target","isTarget","options","internalRef","useRefState","screenOrientation","useOrientation","deviceOrientation","useDeviceOrientation","deviceOrientationRollAdjust","value","deviceOrientationTiltAdjust","mouseRollAdjust","mouseTiltAdjust","setValue","useState","useEffect","element","onMouseMove","event","left","top","elementPositionX","elementPositionY","getSource","getRoll","y","height","getTilt","x","width","source","roll","tilt"],"mappings":"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"}
+{"version":3,"file":"useParallax.mjs","sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useDeviceOrientation } from '../useDeviceOrientation/useDeviceOrientation';\nimport { useOrientation } from '../useOrientation/useOrientation';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use parallax value type */\nexport interface UseParallaxValue {\n  /** Roll value. Scaled to `-0.5 ~ 0.5` */\n  roll: number;\n  /** Sensor source, can be `mouse` or `deviceOrientation` */\n  source: 'deviceOrientation' | 'mouse';\n  /** Tilt value. Scaled to `-0.5 ~ 0.5` */\n  tilt: number;\n}\n\n/** The use parallax options type */\nexport interface UseParallaxOptions {\n  /** Device orientation roll adjust function */\n  deviceOrientationRollAdjust?: (value: number) => number;\n  /** Device orientation tilt adjust function */\n  deviceOrientationTiltAdjust?: (value: number) => number;\n  /** Mouse roll adjust function */\n  mouseRollAdjust?: (value: number) => number;\n  /** Mouse tilt adjust function */\n  mouseTiltAdjust?: (value: number) => number;\n}\n\ninterface UseParallaxReturn {\n  value: UseParallaxValue;\n}\n\nexport interface UseParallax {\n  (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;\n\n  <Target extends Element>(\n    options?: UseParallaxOptions,\n    target?: never\n  ): UseParallaxReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useParallax\n * @description - Hook to help create parallax effect\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn} An object of parallax values\n *\n * @example\n * const { value } = useParallax(ref);\n *\n * @overload\n * @template Target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn & { ref: StateRef<Target> }} An object of parallax values\n *\n * @example\n * const { ref, value } = useParallax();\n */\nexport const useParallax = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (params[1] ? params[1] : params[0]) as UseParallaxOptions | undefined;\n\n  const internalRef = useRefState<Element>();\n\n  const screenOrientation = useOrientation();\n  const deviceOrientation = useDeviceOrientation();\n\n  const {\n    deviceOrientationRollAdjust = (value) => value,\n    deviceOrientationTiltAdjust = (value) => value,\n    mouseRollAdjust = (value) => value,\n    mouseTiltAdjust = (value) => value\n  } = (options ?? {}) as UseParallaxOptions;\n\n  const [value, setValue] = useState({\n    roll: 0,\n    tilt: 0,\n    source: 'mouse'\n  });\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onMouseMove = (event: MouseEvent) => {\n      const { left, top } = element.getBoundingClientRect();\n      const elementPositionX = left + window.scrollX;\n      const elementPositionY = top + window.scrollY;\n\n      const getSource = () => {\n        const isDeviceOrientation =\n          deviceOrientation.supported &&\n          (deviceOrientation.value.alpha || deviceOrientation.value.gamma);\n\n        if (isDeviceOrientation) return 'deviceOrientation';\n        return 'mouse';\n      };\n\n      const getRoll = () => {\n        const source = getSource();\n        if (source === 'deviceOrientation') {\n          let value: number;\n          switch (screenOrientation.value.orientationType) {\n            case 'landscape-primary':\n              value = deviceOrientation.value.gamma! / 90;\n              break;\n            case 'landscape-secondary':\n              value = -deviceOrientation.value.gamma! / 90;\n              break;\n            case 'portrait-primary':\n              value = -deviceOrientation.value.beta! / 90;\n              break;\n            case 'portrait-secondary':\n              value = deviceOrientation.value.beta! / 90;\n              break;\n            default:\n              value = -deviceOrientation.value.beta! / 90;\n          }\n          return deviceOrientationRollAdjust(value);\n        } else {\n          const y = event.pageY - elementPositionY;\n          const height = element.getBoundingClientRect().height;\n          const value = -(y - height / 2) / height;\n          return mouseRollAdjust(value);\n        }\n      };\n\n      const getTilt = () => {\n        const source = getSource();\n        if (source === 'deviceOrientation') {\n          let value: number;\n          switch (screenOrientation.value.orientationType) {\n            case 'landscape-primary':\n              value = deviceOrientation.value.beta! / 90;\n              break;\n            case 'landscape-secondary':\n              value = -deviceOrientation.value.beta! / 90;\n              break;\n            case 'portrait-primary':\n              value = deviceOrientation.value.gamma! / 90;\n              break;\n            case 'portrait-secondary':\n              value = -deviceOrientation.value.gamma! / 90;\n              break;\n            default:\n              value = deviceOrientation.value.gamma! / 90;\n          }\n          return deviceOrientationTiltAdjust(value);\n        } else {\n          const x = event.pageX - elementPositionX;\n          const width = element.getBoundingClientRect().width;\n          const value = (x - width / 2) / width;\n          return mouseTiltAdjust(value);\n        }\n      };\n\n      const source = getSource();\n      const roll = getRoll();\n      const tilt = getTilt();\n\n      setValue({\n        roll,\n        source,\n        tilt\n      });\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n    };\n  }, [\n    target,\n    internalRef.state,\n    isTarget.getRefState(target),\n    screenOrientation.value.angle,\n    screenOrientation.value.orientationType,\n    deviceOrientation.value.gamma,\n    deviceOrientation.value.beta,\n    deviceOrientation.value.alpha,\n    deviceOrientation.value.absolute\n  ]);\n\n  if (target) return { value };\n\n  return {\n    ref: internalRef,\n    value\n  };\n}) as UseParallax;\n"],"names":["useParallax","params","target","isTarget","options","internalRef","useRefState","screenOrientation","useOrientation","deviceOrientation","useDeviceOrientation","deviceOrientationRollAdjust","value","deviceOrientationTiltAdjust","mouseRollAdjust","mouseTiltAdjust","setValue","useState","useEffect","element","onMouseMove","event","left","top","elementPositionX","elementPositionY","getSource","getRoll","y","height","getTilt","x","width","source","roll","tilt"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"usePictureInPicture.mjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use picture in picture options type */\nexport interface UsePictureInPictureOptions {\n  /** The callback when Picture-in-Picture mode is entered */\n  onEnter?: () => void;\n  /** The callback when Picture-in-Picture mode is exited */\n  onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n  /** Whether Picture-in-Picture mode is currently active */\n  open: boolean;\n  /** Whether Picture-in-Picture mode is supported by the browser */\n  supported: boolean;\n  /** Request to enter Picture-in-Picture mode */\n  enter: () => Promise<void>;\n  /** Request to exit Picture-in-Picture mode */\n  exit: () => Promise<void>;\n  /** Toggle Picture-in-Picture mode */\n  toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n  (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n  (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n    ref: StateRef<HTMLVideoElement>;\n  };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n * @usage low\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n  const supported =\n    typeof document !== 'undefined' &&\n    'pictureInPictureEnabled' in document &&\n    !!document.pictureInPictureEnabled;\n\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n  const [open, setOpen] = useState(false);\n\n  const internalRef = useRefState<HTMLVideoElement>();\n  const elementRef = useRef<HTMLVideoElement>(null);\n  const onOptionsRef = useRef<UsePictureInPictureOptions>(options);\n  onOptionsRef.current = options;\n\n  const enter = async () => {\n    if (!supported) return;\n\n    if (!elementRef.current) return;\n\n    await elementRef.current.requestPictureInPicture();\n    setOpen(true);\n\n    options.onEnter?.();\n  };\n\n  const exit = async () => {\n    if (!supported) return;\n\n    await document.exitPictureInPicture();\n    setOpen(false);\n    options.onExit?.();\n  };\n\n  useEffect(() => {\n    const element = target\n      ? (isTarget.getElement(target) as HTMLVideoElement)\n      : internalRef.current;\n    if (!element) return;\n\n    elementRef.current = element;\n\n    const onEnterPictureInPicture = () => {\n      setOpen(true);\n      onOptionsRef.current.onEnter?.();\n    };\n\n    const onLeavePictureInPicture = () => {\n      setOpen(false);\n      onOptionsRef.current.onExit?.();\n    };\n\n    element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);\n    element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);\n\n    return () => {\n      element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);\n      element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);\n    };\n  }, [target]);\n\n  const toggle = async () => {\n    if (open) await exit();\n    else await enter();\n  };\n\n  const value = {\n    open,\n    supported,\n    enter,\n    exit,\n    toggle\n  };\n\n  if (target) return value;\n  return { ...value, ref: internalRef };\n}) as UsePictureInPicture;\n"],"names":["usePictureInPicture","params","supported","target","isTarget","options","open","setOpen","useState","internalRef","useRefState","elementRef","useRef","onOptionsRef","enter","exit","useEffect","element","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":";;;AAiEO,MAAMA,IAAuB,IAAIC,MAAkB;AACxD,QAAMC,IACJ,OAAO,WAAa,OACpB,6BAA6B,YAC7B,CAAC,CAAC,SAAS,yBAEPC,IAAUC,EAASH,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CI,KAAYF,IAASF,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAqC,CAAA,GAE9E,CAACK,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAEhCC,IAAcC,EAAA,GACdC,IAAaC,EAAyB,IAAI,GAC1CC,IAAeD,EAAmCP,CAAO;AAC/D,EAAAQ,EAAa,UAAUR;AAEvB,QAAMS,IAAQ,YAAY;AACxB,IAAKZ,KAEAS,EAAW,YAEhB,MAAMA,EAAW,QAAQ,wBAAA,GACzBJ,EAAQ,EAAI,GAEZF,EAAQ,UAAA;AAAA,EAAU,GAGdU,IAAO,YAAY;AACvB,IAAKb,MAEL,MAAM,SAAS,qBAAA,GACfK,EAAQ,EAAK,GACbF,EAAQ,SAAA;AAAA,EAAS;AAGnB,EAAAW,EAAU,MAAM;AACd,UAAMC,IAAUd,IACXC,EAAS,WAAWD,CAAM,IAC3BM,EAAY;AAChB,QAAI,CAACQ,EAAS;AAEd,IAAAN,EAAW,UAAUM;AAErB,UAAMC,IAA0B,MAAM;AACpC,MAAAX,EAAQ,EAAI,GACZM,EAAa,QAAQ,UAAA;AAAA,IAAU,GAG3BM,IAA0B,MAAM;AACpC,MAAAZ,EAAQ,EAAK,GACbM,EAAa,QAAQ,SAAA;AAAA,IAAS;AAGhC,WAAAI,EAAQ,iBAAiB,yBAAyBC,CAAuB,GACzED,EAAQ,iBAAiB,yBAAyBE,CAAuB,GAElE,MAAM;AACX,MAAAF,EAAQ,oBAAoB,yBAAyBC,CAAuB,GAC5ED,EAAQ,oBAAoB,yBAAyBE,CAAuB;AAAA,IAAA;AAAA,EAC9E,GACC,CAAChB,CAAM,CAAC;AAOX,QAAMiB,IAAQ;AAAA,IACZ,MAAAd;AAAA,IACA,WAAAJ;AAAA,IACA,OAAAY;AAAA,IACA,MAAAC;AAAA,IACA,QAVa,YAAY;AACzB,MAAIT,UAAYS,EAAA,UACLD,EAAA;AAAA,IAAM;AAAA,EAQjB;AAGF,SAAIX,IAAeiB,IACZ,EAAE,GAAGA,GAAO,KAAKX,EAAA;AAC1B;"}
+{"version":3,"file":"usePictureInPicture.mjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use picture in picture options type */\nexport interface UsePictureInPictureOptions {\n  /** The callback when Picture-in-Picture mode is entered */\n  onEnter?: () => void;\n  /** The callback when Picture-in-Picture mode is exited */\n  onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n  /** Whether Picture-in-Picture mode is currently active */\n  open: boolean;\n  /** Whether Picture-in-Picture mode is supported by the browser */\n  supported: boolean;\n  /** Request to enter Picture-in-Picture mode */\n  enter: () => Promise<void>;\n  /** Request to exit Picture-in-Picture mode */\n  exit: () => Promise<void>;\n  /** Toggle Picture-in-Picture mode */\n  toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n  (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n  (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n    ref: StateRef<HTMLVideoElement>;\n  };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n * @usage low\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n  const supported =\n    typeof document !== 'undefined' &&\n    'pictureInPictureEnabled' in document &&\n    !!document.pictureInPictureEnabled;\n\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n  const [open, setOpen] = useState(false);\n\n  const internalRef = useRefState<HTMLVideoElement>();\n  const elementRef = useRef<HTMLVideoElement>(null);\n  const onOptionsRef = useRef<UsePictureInPictureOptions>(options);\n  onOptionsRef.current = options;\n\n  const enter = async () => {\n    if (!supported) return;\n\n    if (!elementRef.current) return;\n\n    await elementRef.current.requestPictureInPicture();\n    setOpen(true);\n\n    options.onEnter?.();\n  };\n\n  const exit = async () => {\n    if (!supported) return;\n\n    await document.exitPictureInPicture();\n    setOpen(false);\n    options.onExit?.();\n  };\n\n  useEffect(() => {\n    const element = target\n      ? (isTarget.getElement(target) as HTMLVideoElement)\n      : internalRef.current;\n    if (!element) return;\n\n    elementRef.current = element;\n\n    const onEnterPictureInPicture = () => {\n      setOpen(true);\n      onOptionsRef.current.onEnter?.();\n    };\n\n    const onLeavePictureInPicture = () => {\n      setOpen(false);\n      onOptionsRef.current.onExit?.();\n    };\n\n    element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);\n    element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);\n\n    return () => {\n      element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);\n      element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n  const toggle = async () => {\n    if (open) await exit();\n    else await enter();\n  };\n\n  const value = {\n    open,\n    supported,\n    enter,\n    exit,\n    toggle\n  };\n\n  if (target) return value;\n  return { ...value, ref: internalRef };\n}) as UsePictureInPicture;\n"],"names":["usePictureInPicture","params","supported","target","isTarget","options","open","setOpen","useState","internalRef","useRefState","elementRef","useRef","onOptionsRef","enter","exit","useEffect","element","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":";;;AAiEO,MAAMA,KAAuB,IAAIC,MAAkB;AACxD,QAAMC,IACJ,OAAO,WAAa,OACpB,6BAA6B,YAC7B,CAAC,CAAC,SAAS,yBAEPC,IAAUC,EAASH,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CI,KAAYF,IAASF,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAqC,CAAA,GAE9E,CAACK,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAEhCC,IAAcC,EAAA,GACdC,IAAaC,EAAyB,IAAI,GAC1CC,IAAeD,EAAmCP,CAAO;AAC/D,EAAAQ,EAAa,UAAUR;AAEvB,QAAMS,IAAQ,YAAY;AACxB,IAAKZ,KAEAS,EAAW,YAEhB,MAAMA,EAAW,QAAQ,wBAAA,GACzBJ,EAAQ,EAAI,GAEZF,EAAQ,UAAA;AAAA,EAAU,GAGdU,IAAO,YAAY;AACvB,IAAKb,MAEL,MAAM,SAAS,qBAAA,GACfK,EAAQ,EAAK,GACbF,EAAQ,SAAA;AAAA,EAAS;AAGnB,EAAAW,EAAU,MAAM;AACd,UAAMC,IAAUd,IACXC,EAAS,WAAWD,CAAM,IAC3BM,EAAY;AAChB,QAAI,CAACQ,EAAS;AAEd,IAAAN,EAAW,UAAUM;AAErB,UAAMC,IAA0B,MAAM;AACpC,MAAAX,EAAQ,EAAI,GACZM,EAAa,QAAQ,UAAA;AAAA,IAAU,GAG3BM,IAA0B,MAAM;AACpC,MAAAZ,EAAQ,EAAK,GACbM,EAAa,QAAQ,SAAA;AAAA,IAAS;AAGhC,WAAAI,EAAQ,iBAAiB,yBAAyBC,CAAuB,GACzED,EAAQ,iBAAiB,yBAAyBE,CAAuB,GAElE,MAAM;AACX,MAAAF,EAAQ,oBAAoB,yBAAyBC,CAAuB,GAC5ED,EAAQ,oBAAoB,yBAAyBE,CAAuB;AAAA,IAAA;AAAA,EAC9E,GACC,CAAChB,GAAQM,EAAY,OAAOL,EAAS,YAAYD,CAAM,CAAC,CAAC;AAO5D,QAAMiB,IAAQ;AAAA,IACZ,MAAAd;AAAA,IACA,WAAAJ;AAAA,IACA,OAAAY;AAAA,IACA,MAAAC;AAAA,IACA,QAVa,YAAY;AACzB,MAAIT,UAAYS,EAAA,UACLD,EAAA;AAAA,IAAM;AAAA,EAQjB;AAGF,SAAIX,IAAeiB,IACZ,EAAE,GAAGA,GAAO,KAAKX,EAAA;AAC1B;"}

package/dist/esm/hooks/useRefState/useRefState.mjs

@@ -19,6 +19,7 @@ const u = (n, f) => {
   return t.state = f, t;
 };
 export {
+  u as createRefState,
   s as useRefState
 };
 //# sourceMappingURL=useRefState.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useRefState.mjs","sources":["../../../../src/hooks/useRefState/useRefState.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport interface StateRef<Value> {\n  (node: Value): void;\n  current: Value;\n  state?: Value;\n}\n\nconst createRefState = <Value>(\n  initialValue: Value | undefined,\n  setState: (value: Value) => void\n) => {\n  let temp = initialValue;\n  function ref(value: Value) {\n    if (temp === value) return;\n    temp = value;\n    setState(temp);\n  }\n\n  Object.defineProperty(ref, 'current', {\n    get() {\n      return temp;\n    },\n    set(value: Value) {\n      if (temp === value) return;\n      temp = value;\n      setState(temp);\n    },\n    configurable: true,\n    enumerable: true\n  });\n\n  return ref as StateRef<Value>;\n};\n\n/**\n * @name useRefState\n * @description - Hook that returns the state reference of the value\n * @category State\n * @usage low\n *\n * @template Value The type of the value\n * @param {Value} [initialValue] The initial value\n * @returns {StateRef<Value>} The current value\n *\n * @example\n * const internalRefState = useRefState();\n */\nexport const useRefState = <Value>(initialValue?: Value) => {\n  const [state, setState] = useState<Value | undefined>(initialValue);\n  const [ref] = useState(() => createRefState<Value>(initialValue, setState));\n  ref.state = state;\n  return ref;\n};\n"],"names":["createRefState","initialValue","setState","temp","ref","value","useRefState","state","useState"],"mappings":";AAQA,MAAMA,IAAiB,CACrBC,GACAC,MACG;AACH,MAAIC,IAAOF;AACX,WAASG,EAAIC,GAAc;AACzB,IAAIF,MAASE,MACbF,IAAOE,GACPH,EAASC,CAAI;AAAA,EAAA;AAGf,gBAAO,eAAeC,GAAK,WAAW;AAAA,IACpC,MAAM;AACJ,aAAOD;AAAA,IAAA;AAAA,IAET,IAAIE,GAAc;AAChB,MAAIF,MAASE,MACbF,IAAOE,GACPH,EAASC,CAAI;AAAA,IAAA;AAAA,IAEf,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,CACb,GAEMC;AACT,GAeaE,IAAc,CAAQL,MAAyB;AAC1D,QAAM,CAACM,GAAOL,CAAQ,IAAIM,EAA4BP,CAAY,GAC5D,CAACG,CAAG,IAAII,EAAS,MAAMR,EAAsBC,GAAcC,CAAQ,CAAC;AAC1E,SAAAE,EAAI,QAAQG,GACLH;AACT;"}
+{"version":3,"file":"useRefState.mjs","sources":["../../../../src/hooks/useRefState/useRefState.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport interface StateRef<Value> {\n  (node: Value): void;\n  current: Value;\n  state?: Value;\n}\n\nexport const createRefState = <Value>(\n  initialValue: Value | undefined,\n  setState: (value: Value) => void\n) => {\n  let temp = initialValue;\n  function ref(value: Value) {\n    if (temp === value) return;\n    temp = value;\n    setState(temp);\n  }\n\n  Object.defineProperty(ref, 'current', {\n    get() {\n      return temp;\n    },\n    set(value: Value) {\n      if (temp === value) return;\n      temp = value;\n      setState(temp);\n    },\n    configurable: true,\n    enumerable: true\n  });\n\n  return ref as StateRef<Value>;\n};\n\n/**\n * @name useRefState\n * @description - Hook that returns the state reference of the value\n * @category State\n * @usage low\n *\n * @template Value The type of the value\n * @param {Value} [initialValue] The initial value\n * @returns {StateRef<Value>} The current value\n *\n * @example\n * const internalRefState = useRefState();\n */\nexport const useRefState = <Value>(initialValue?: Value) => {\n  const [state, setState] = useState<Value | undefined>(initialValue);\n  const [ref] = useState(() => createRefState<Value>(initialValue, setState));\n  ref.state = state;\n  return ref;\n};\n"],"names":["createRefState","initialValue","setState","temp","ref","value","useRefState","state","useState"],"mappings":";AAQO,MAAMA,IAAiB,CAC5BC,GACAC,MACG;AACH,MAAIC,IAAOF;AACX,WAASG,EAAIC,GAAc;AACzB,IAAIF,MAASE,MACbF,IAAOE,GACPH,EAASC,CAAI;AAAA,EAAA;AAGf,gBAAO,eAAeC,GAAK,WAAW;AAAA,IACpC,MAAM;AACJ,aAAOD;AAAA,IAAA;AAAA,IAET,IAAIE,GAAc;AAChB,MAAIF,MAASE,MACbF,IAAOE,GACPH,EAASC,CAAI;AAAA,IAAA;AAAA,IAEf,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,CACb,GAEMC;AACT,GAeaE,IAAc,CAAQL,MAAyB;AAC1D,QAAM,CAACM,GAAOL,CAAQ,IAAIM,EAA4BP,CAAY,GAC5D,CAACG,CAAG,IAAII,EAAS,MAAMR,EAAsBC,GAAcC,CAAQ,CAAC;AAC1E,SAAAE,EAAI,QAAQG,GACLH;AACT;"}

package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs

@@ -1,25 +1,25 @@
-import { useState as v, useRef as a, useEffect as h } from "react";
+import { useState as v, useRef as C, useEffect as h } from "react";
 import { useRefState as y } from "../useRefState/useRefState.mjs";
-import { isTarget as g } from "../../utils/helpers/isTarget.mjs";
-const k = (...e) => {
-  const t = g(e[0]) ? e[0] : void 0, n = t ? typeof e[1] == "object" ? e[1] : { onChange: e[1] } : typeof e[0] == "object" ? e[0] : { onChange: e[0] }, s = n?.onChange, c = n?.enabled ?? !0, [f, R] = v(), [i, d] = v(), r = y(), u = a(s);
-  return u.current = s, h(() => {
-    if (!c || !t && !r.state) return;
-    const b = t ? g.getElement(t) : r.current;
-    if (!b) return;
-    const o = new ResizeObserver(([l], C) => {
-      R(l), u.current?.(l, C);
+import { isTarget as s } from "../../utils/helpers/isTarget.mjs";
+const j = ((...e) => {
+  const t = s(e[0]) ? e[0] : void 0, n = t ? typeof e[1] == "object" ? e[1] : { onChange: e[1] } : typeof e[0] == "object" ? e[0] : { onChange: e[0] }, c = n?.onChange, f = n?.enabled ?? !0, [i, R] = v(), [u, a] = v(), r = y(), b = C(c);
+  return b.current = c, h(() => {
+    if (!f || !t && !r.state) return;
+    const l = t ? s.getElement(t) : r.current;
+    if (!l) return;
+    const o = new ResizeObserver(([g], d) => {
+      R(g), b.current?.(g, d);
     });
-    return d(o), o.observe(b, n), () => {
+    return a(o), o.observe(l, n), () => {
       o.disconnect();
     };
-  }, [t, r.state, n?.box, c]), t ? { entry: f, observer: i } : {
+  }, [t, r.state, s.getRefState(t), n?.box, f]), t ? { entry: i, observer: u } : {
     ref: r,
-    entry: f,
-    observer: i
+    entry: i,
+    observer: u
   };
-};
+});
 export {
-  k as useResizeObserver
+  j as useResizeObserver
 };
 //# sourceMappingURL=useResizeObserver.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.mjs","sources":["../../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The resize observer callback type */\nexport type UseResizeObserverCallback = (\n  entry: ResizeObserverEntry,\n  observer: ResizeObserver\n) => void;\n\n/** The resize observer options type */\nexport interface UseResizeObserverOptions extends ResizeObserverOptions {\n  /** The enabled state of the resize observer */\n  enabled?: boolean;\n  /** The callback to execute when resize is detected */\n  onChange?: UseResizeObserverCallback;\n}\n\n/** The resize observer return type */\nexport interface UseResizeObserverReturn {\n  /** The resize observer entries */\n  entry: ResizeObserverEntry;\n  /** The resize observer instance */\n  observer?: ResizeObserver;\n}\n\nexport interface UseResizeObserver {\n  <Target extends Element>(\n    options?: UseResizeObserverOptions,\n    target?: never\n  ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;\n\n  <Target extends Element>(\n    callback: UseResizeObserverCallback,\n    target?: never\n  ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;\n}\n\n/**\n * @name useResizeObserver\n * @description - Hook that gives you resize observer state\n * @category Sensors\n * @usage low\n *\n * @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entries, observer } = useResizeObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver();\n *\n * @overload\n * @template Target The target element\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));\n */\nexport const useResizeObserver = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onChange: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onChange: params[0] }\n  ) as UseResizeObserverOptions | undefined;\n\n  const callback = options?.onChange;\n  const enabled = options?.enabled ?? true;\n\n  const [entry, setEntry] = useState<ResizeObserverEntry>();\n  const [observer, setObserver] = useState<ResizeObserver>();\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(([entry], observer) => {\n      setEntry(entry);\n      internalCallbackRef.current?.(entry, observer);\n    });\n\n    setObserver(observer);\n    observer.observe(element as Element, options);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [target, internalRef.state, options?.box, enabled]);\n\n  if (target) return { entry, observer };\n  return {\n    ref: internalRef,\n    entry,\n    observer\n  };\n}) as UseResizeObserver;\n"],"names":["useResizeObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","observer","setObserver","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":";;;AA4FO,MAAMA,IAAqB,IAAIC,MAAkB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAOC,CAAQ,IAAIC,EAAA,GACpB,CAACC,GAAUC,CAAW,IAAIF,EAAA,GAE1BG,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAsB3C,SArBAS,EAAoB,UAAUT,GAE9BW,EAAU,MAAM;AACd,QAAI,CAACV,KAAY,CAACJ,KAAU,CAACU,EAAY,MAAQ;AAEjD,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMP,IAAW,IAAI,eAAe,CAAC,CAACH,CAAK,GAAGG,MAAa;AACzD,MAAAF,EAASD,CAAK,GACdO,EAAoB,UAAUP,GAAOG,CAAQ;AAAA,IAAA,CAC9C;AAED,WAAAC,EAAYD,CAAQ,GACpBA,EAAS,QAAQO,GAAoBb,CAAO,GAErC,MAAM;AACXM,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACR,GAAQU,EAAY,OAAOR,GAAS,KAAKE,CAAO,CAAC,GAEjDJ,IAAe,EAAE,OAAAK,GAAO,UAAAG,EAAA,IACrB;AAAA,IACL,KAAKE;AAAA,IACL,OAAAL;AAAA,IACA,UAAAG;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useResizeObserver.mjs","sources":["../../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The resize observer callback type */\nexport type UseResizeObserverCallback = (\n  entry: ResizeObserverEntry,\n  observer: ResizeObserver\n) => void;\n\n/** The resize observer options type */\nexport interface UseResizeObserverOptions extends ResizeObserverOptions {\n  /** The enabled state of the resize observer */\n  enabled?: boolean;\n  /** The callback to execute when resize is detected */\n  onChange?: UseResizeObserverCallback;\n}\n\n/** The resize observer return type */\nexport interface UseResizeObserverReturn {\n  /** The resize observer entries */\n  entry: ResizeObserverEntry;\n  /** The resize observer instance */\n  observer?: ResizeObserver;\n}\n\nexport interface UseResizeObserver {\n  <Target extends Element>(\n    options?: UseResizeObserverOptions,\n    target?: never\n  ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;\n\n  <Target extends Element>(\n    callback: UseResizeObserverCallback,\n    target?: never\n  ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;\n}\n\n/**\n * @name useResizeObserver\n * @description - Hook that gives you resize observer state\n * @category Sensors\n * @usage low\n *\n * @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entries, observer } = useResizeObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver();\n *\n * @overload\n * @template Target The target element\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));\n */\nexport const useResizeObserver = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onChange: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onChange: params[0] }\n  ) as UseResizeObserverOptions | undefined;\n\n  const callback = options?.onChange;\n  const enabled = options?.enabled ?? true;\n\n  const [entry, setEntry] = useState<ResizeObserverEntry>();\n  const [observer, setObserver] = useState<ResizeObserver>();\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(([entry], observer) => {\n      setEntry(entry);\n      internalCallbackRef.current?.(entry, observer);\n    });\n\n    setObserver(observer);\n    observer.observe(element as Element, options);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target), options?.box, enabled]);\n\n  if (target) return { entry, observer };\n  return {\n    ref: internalRef,\n    entry,\n    observer\n  };\n}) as UseResizeObserver;\n"],"names":["useResizeObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","observer","setObserver","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":";;;AA4FO,MAAMA,KAAqB,IAAIC,MAAkB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAOC,CAAQ,IAAIC,EAAA,GACpB,CAACC,GAAUC,CAAW,IAAIF,EAAA,GAE1BG,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAsB3C,SArBAS,EAAoB,UAAUT,GAE9BW,EAAU,MAAM;AACd,QAAI,CAACV,KAAY,CAACJ,KAAU,CAACU,EAAY,MAAQ;AAEjD,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMP,IAAW,IAAI,eAAe,CAAC,CAACH,CAAK,GAAGG,MAAa;AACzD,MAAAF,EAASD,CAAK,GACdO,EAAoB,UAAUP,GAAOG,CAAQ;AAAA,IAAA,CAC9C;AAED,WAAAC,EAAYD,CAAQ,GACpBA,EAAS,QAAQO,GAAoBb,CAAO,GAErC,MAAM;AACXM,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACR,GAAQU,EAAY,OAAOT,EAAS,YAAYD,CAAM,GAAGE,GAAS,KAAKE,CAAO,CAAC,GAE/EJ,IAAe,EAAE,OAAAK,GAAO,UAAAG,EAAA,IACrB;AAAA,IACL,KAAKE;AAAA,IACL,OAAAL;AAAA,IACA,UAAAG;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useRightClick/useRightClick.mjs

@@ -1,34 +1,34 @@
-import { useRef as d, useEffect as m } from "react";
+import { useRef as h, useEffect as m } from "react";
 import { useRefState as v } from "../useRefState/useRefState.mjs";
-import { isTarget as h } from "../../utils/helpers/isTarget.mjs";
-const g = (...r) => {
-  const e = h(r[0]) ? r[0] : void 0, i = e ? r[1] : r[0], l = e ? r[2] : r[1], c = v(), s = d(i);
-  s.current = i;
-  const u = d(l);
+import { isTarget as i } from "../../utils/helpers/isTarget.mjs";
+const g = ((...r) => {
+  const e = i(r[0]) ? r[0] : void 0, f = e ? r[1] : r[0], l = e ? r[2] : r[1], c = v(), s = h(f);
+  s.current = f;
+  const u = h(l);
   if (u.current = l, m(() => {
     if (!e && !c.state) return;
-    const n = e ? h.getElement(e) : c.current;
+    const n = e ? i.getElement(e) : c.current;
     if (!n) return;
-    const f = (t) => {
+    const a = (t) => {
       t.preventDefault(), u.current?.onStart?.(t);
       const o = t;
       s.current({ x: o.clientX, y: o.clientY }, t);
-    }, a = (t) => {
+    }, E = (t) => {
       t.preventDefault(), u.current?.onStart?.(t);
       const o = t;
       s.current(
         { x: o.touches[0].clientX, y: o.touches[0].clientY },
         t
       );
-    }, E = (t) => {
+    }, d = (t) => {
       t.preventDefault(), u.current?.onEnd?.(t);
     };
-    return n.addEventListener("contextmenu", f), n.addEventListener("touchstart", a), n.addEventListener("touchend", E), () => {
-      n.removeEventListener("contextmenu", f), n.removeEventListener("touchstart", a), n.removeEventListener("touchend", E);
+    return n.addEventListener("contextmenu", a), n.addEventListener("touchstart", E), n.addEventListener("touchend", d), () => {
+      n.removeEventListener("contextmenu", a), n.removeEventListener("touchstart", E), n.removeEventListener("touchend", d);
     };
-  }, [e, c.state]), !e)
+  }, [e, c.state, i.getRefState(e)]), !e)
     return c;
-};
+});
 export {
   g as useRightClick
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useRightClick.mjs","sources":["../../../../src/hooks/useRightClick/useRightClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type RightClickEvent = MouseEvent | TouchEvent;\nexport interface RightClickPositions {\n  x: number;\n  y: number;\n}\n\nexport interface UseRightClickOptions {\n  // * The callback function to be invoked on right click end\n  onEnd?: (event: RightClickEvent) => void;\n  // * The callback function to be invoked on right click start\n  onStart?: (event: RightClickEvent) => void;\n}\n\nexport interface UseRightClick {\n  (target: HookTarget, callback: (event: Event) => void, options?: UseRightClickOptions): void;\n\n  <Target extends Element>(\n    callback: (positions: RightClickPositions, event: Event) => void,\n    options?: UseRightClickOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\n/**\n * @name useRightClick\n * @description - Hook that handles right-click events and long press on mobile devices\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for right-click handling\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {void}\n *\n * @example\n * useRightClick(ref, () => console.log('clicked'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {StateRef<Target>} Ref to attach to the element\n *\n * @example\n * const ref = useRightClick(() => console.log('clicked'));\n */\nexport const useRightClick = ((...params: any[]): any => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (\n    positions: RightClickPositions,\n    event: RightClickEvent\n  ) => void;\n  const options = (target ? params[2] : params[1]) as UseRightClickOptions;\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const onContextMenu = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onStart?.(event);\n      const mouseEvent = event as MouseEvent;\n      internalCallbackRef.current({ x: mouseEvent.clientX, y: mouseEvent.clientY }, event);\n    };\n\n    const onTouchStart = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onStart?.(event);\n      const touchEvent = event as TouchEvent;\n      internalCallbackRef.current(\n        { x: touchEvent.touches[0].clientX, y: touchEvent.touches[0].clientY },\n        event\n      );\n    };\n\n    const onTouchEnd = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onEnd?.(event);\n    };\n\n    element.addEventListener('contextmenu', onContextMenu as EventListener);\n\n    element.addEventListener('touchstart', onTouchStart as EventListener);\n    element.addEventListener('touchend', onTouchEnd as EventListener);\n\n    return () => {\n      element.removeEventListener('contextmenu', onContextMenu as EventListener);\n\n      element.removeEventListener('touchstart', onTouchStart as EventListener);\n      element.removeEventListener('touchend', onTouchEnd as EventListener);\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseRightClick;\n"],"names":["useRightClick","params","target","isTarget","callback","options","internalRef","useRefState","internalCallbackRef","useRef","internalOptionsRef","useEffect","element","onContextMenu","event","mouseEvent","onTouchStart","touchEvent","onTouchEnd"],"mappings":";;;AAuDO,MAAMA,IAAiB,IAAIC,MAAuB;AACvD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAIzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCK,IAAcC,EAAA,GACdC,IAAsBC,EAAOL,CAAQ;AAC3C,EAAAI,EAAoB,UAAUJ;AAC9B,QAAMM,IAAqBD,EAAOJ,CAAO;AA4CzC,MA3CAK,EAAmB,UAAUL,GAE7BM,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAUV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AACnE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAgB,CAACC,MAA2B;AAChD,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,UAAUI,CAAK;AAC3C,YAAMC,IAAaD;AACnB,MAAAN,EAAoB,QAAQ,EAAE,GAAGO,EAAW,SAAS,GAAGA,EAAW,QAAA,GAAWD,CAAK;AAAA,IAAA,GAG/EE,IAAe,CAACF,MAA2B;AAC/C,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,UAAUI,CAAK;AAC3C,YAAMG,IAAaH;AACnB,MAAAN,EAAoB;AAAA,QAClB,EAAE,GAAGS,EAAW,QAAQ,CAAC,EAAE,SAAS,GAAGA,EAAW,QAAQ,CAAC,EAAE,QAAA;AAAA,QAC7DH;AAAA,MAAA;AAAA,IACF,GAGII,IAAa,CAACJ,MAA2B;AAC7C,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,QAAQI,CAAK;AAAA,IAAA;AAG3C,WAAAF,EAAQ,iBAAiB,eAAeC,CAA8B,GAEtED,EAAQ,iBAAiB,cAAcI,CAA6B,GACpEJ,EAAQ,iBAAiB,YAAYM,CAA2B,GAEzD,MAAM;AACX,MAAAN,EAAQ,oBAAoB,eAAeC,CAA8B,GAEzED,EAAQ,oBAAoB,cAAcI,CAA6B,GACvEJ,EAAQ,oBAAoB,YAAYM,CAA2B;AAAA,IAAA;AAAA,EACrE,GACC,CAAChB,GAAQI,EAAY,KAAK,CAAC,GAE1B,CAAAJ;AACJ,WAAOI;AACT;"}
+{"version":3,"file":"useRightClick.mjs","sources":["../../../../src/hooks/useRightClick/useRightClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type RightClickEvent = MouseEvent | TouchEvent;\nexport interface RightClickPositions {\n  x: number;\n  y: number;\n}\n\nexport interface UseRightClickOptions {\n  // * The callback function to be invoked on right click end\n  onEnd?: (event: RightClickEvent) => void;\n  // * The callback function to be invoked on right click start\n  onStart?: (event: RightClickEvent) => void;\n}\n\nexport interface UseRightClick {\n  (target: HookTarget, callback: (event: Event) => void, options?: UseRightClickOptions): void;\n\n  <Target extends Element>(\n    callback: (positions: RightClickPositions, event: Event) => void,\n    options?: UseRightClickOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\n/**\n * @name useRightClick\n * @description - Hook that handles right-click events and long press on mobile devices\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for right-click handling\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {void}\n *\n * @example\n * useRightClick(ref, () => console.log('clicked'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {StateRef<Target>} Ref to attach to the element\n *\n * @example\n * const ref = useRightClick(() => console.log('clicked'));\n */\nexport const useRightClick = ((...params: any[]): any => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (\n    positions: RightClickPositions,\n    event: RightClickEvent\n  ) => void;\n  const options = (target ? params[2] : params[1]) as UseRightClickOptions;\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const onContextMenu = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onStart?.(event);\n      const mouseEvent = event as MouseEvent;\n      internalCallbackRef.current({ x: mouseEvent.clientX, y: mouseEvent.clientY }, event);\n    };\n\n    const onTouchStart = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onStart?.(event);\n      const touchEvent = event as TouchEvent;\n      internalCallbackRef.current(\n        { x: touchEvent.touches[0].clientX, y: touchEvent.touches[0].clientY },\n        event\n      );\n    };\n\n    const onTouchEnd = (event: RightClickEvent) => {\n      event.preventDefault();\n      internalOptionsRef.current?.onEnd?.(event);\n    };\n\n    element.addEventListener('contextmenu', onContextMenu as EventListener);\n\n    element.addEventListener('touchstart', onTouchStart as EventListener);\n    element.addEventListener('touchend', onTouchEnd as EventListener);\n\n    return () => {\n      element.removeEventListener('contextmenu', onContextMenu as EventListener);\n\n      element.removeEventListener('touchstart', onTouchStart as EventListener);\n      element.removeEventListener('touchend', onTouchEnd as EventListener);\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n  if (target) return;\n  return internalRef;\n}) as UseRightClick;\n"],"names":["useRightClick","params","target","isTarget","callback","options","internalRef","useRefState","internalCallbackRef","useRef","internalOptionsRef","useEffect","element","onContextMenu","event","mouseEvent","onTouchStart","touchEvent","onTouchEnd"],"mappings":";;;AAuDO,MAAMA,KAAiB,IAAIC,MAAuB;AACvD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAIzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCK,IAAcC,EAAA,GACdC,IAAsBC,EAAOL,CAAQ;AAC3C,EAAAI,EAAoB,UAAUJ;AAC9B,QAAMM,IAAqBD,EAAOJ,CAAO;AA4CzC,MA3CAK,EAAmB,UAAUL,GAE7BM,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAUV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AACnE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAgB,CAACC,MAA2B;AAChD,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,UAAUI,CAAK;AAC3C,YAAMC,IAAaD;AACnB,MAAAN,EAAoB,QAAQ,EAAE,GAAGO,EAAW,SAAS,GAAGA,EAAW,QAAA,GAAWD,CAAK;AAAA,IAAA,GAG/EE,IAAe,CAACF,MAA2B;AAC/C,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,UAAUI,CAAK;AAC3C,YAAMG,IAAaH;AACnB,MAAAN,EAAoB;AAAA,QAClB,EAAE,GAAGS,EAAW,QAAQ,CAAC,EAAE,SAAS,GAAGA,EAAW,QAAQ,CAAC,EAAE,QAAA;AAAA,QAC7DH;AAAA,MAAA;AAAA,IACF,GAGII,IAAa,CAACJ,MAA2B;AAC7C,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,QAAQI,CAAK;AAAA,IAAA;AAG3C,WAAAF,EAAQ,iBAAiB,eAAeC,CAA8B,GAEtED,EAAQ,iBAAiB,cAAcI,CAA6B,GACpEJ,EAAQ,iBAAiB,YAAYM,CAA2B,GAEzD,MAAM;AACX,MAAAN,EAAQ,oBAAoB,eAAeC,CAA8B,GAEzED,EAAQ,oBAAoB,cAAcI,CAA6B,GACvEJ,EAAQ,oBAAoB,YAAYM,CAA2B;AAAA,IAAA;AAAA,EACrE,GACC,CAAChB,GAAQI,EAAY,OAAOH,EAAS,YAAYD,CAAM,CAAC,CAAC,GAExD,CAAAA;AACJ,WAAOI;AACT;"}

package/dist/esm/hooks/useScroll/useScroll.mjs

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