@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/esm/hooks/use-pan-event/index.js

@@ -0,0 +1,177 @@
+"use client";
+
+
+import { utils_exports } from "../../utils/index.js";
+import { useLatestRef } from "../use-latest-ref/index.js";
+import { useEffect, useRef } from "react";
+import sync, { cancelSync, getFrameData } from "framesync";
+
+//#region src/hooks/use-pan-event/index.ts
+const subtract = (a, b) => ({
+	x: a.x - (b?.x ?? 0),
+	y: a.y - (b?.y ?? 0)
+});
+const getPanInfo = (info, history) => ({
+	delta: subtract(info.point, history[history.length - 1]),
+	offset: subtract(info.point, history[0]),
+	point: info.point,
+	velocity: getVelocity(history, .1)
+});
+const toMilliseconds = (v) => v * 1e3;
+const getVelocity = (history, timeDelta) => {
+	if (history.length < 2) return {
+		x: 0,
+		y: 0
+	};
+	let i = history.length - 1;
+	let timestampedPoint = void 0;
+	const lastPoint = history[history.length - 1];
+	while (i >= 0) {
+		timestampedPoint = history[i];
+		if (lastPoint && timestampedPoint && lastPoint.timestamp - timestampedPoint.timestamp > toMilliseconds(timeDelta)) break;
+		i--;
+	}
+	if (!lastPoint || !timestampedPoint) return {
+		x: 0,
+		y: 0
+	};
+	const time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1e3;
+	if (time === 0) return {
+		x: 0,
+		y: 0
+	};
+	const currentVelocity = {
+		x: (lastPoint.x - timestampedPoint.x) / time,
+		y: (lastPoint.y - timestampedPoint.y) / time
+	};
+	if (currentVelocity.x === Infinity) currentVelocity.x = 0;
+	if (currentVelocity.y === Infinity) currentVelocity.y = 0;
+	return currentVelocity;
+};
+const filter = (cb) => {
+	return function(ev) {
+		const isMouse = (0, utils_exports.isMouseEvent)(ev);
+		if (!isMouse || ev.button === 0) cb(ev);
+	};
+};
+const wrap = (cb, filterPrimary = false) => {
+	function listener(ev) {
+		return cb(ev, { point: (0, utils_exports.getEventPoint)(ev) });
+	}
+	const fn = filterPrimary ? filter(listener) : listener;
+	return fn;
+};
+const addPointerEvent = (target, type, cb, options) => (0, utils_exports.addDomEvent)(target, type, wrap(cb, type === "pointerdown"), options);
+const pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+const distance1D = (a, b) => Math.abs(a - b);
+const isPoint = (point) => "x" in point && "y" in point;
+const distance = (a, b) => {
+	if (typeof a === "number" && typeof b === "number") return distance1D(a, b);
+	if (isPoint(a) && isPoint(b)) {
+		const xDelta = distance1D(a.x, b.x);
+		const yDelta = distance1D(a.y, b.y);
+		return Math.sqrt(xDelta ** 2 + yDelta ** 2);
+	}
+	return 0;
+};
+const panEvent = (ev, handlers, threshold = 3) => {
+	if ((0, utils_exports.isMultiTouchEvent)(ev)) return;
+	const win = ev.view ?? window;
+	const info = { point: (0, utils_exports.getEventPoint)(ev) };
+	const { timestamp } = getFrameData();
+	const { onEnd, onMove, onSessionEnd, onSessionStart, onStart } = handlers;
+	const history = [{
+		...info.point,
+		timestamp
+	}];
+	let startEvent = null;
+	let lastEvent = null;
+	let lastEventInfo = null;
+	ev.stopPropagation();
+	ev.preventDefault();
+	onSessionStart?.(ev, getPanInfo(info, history));
+	const updatePoint = () => {
+		if (!(lastEvent && lastEventInfo)) return;
+		const info$1 = getPanInfo(lastEventInfo, history);
+		const isPanStarted = startEvent !== null;
+		const isDistancePastThreshold = distance(info$1.offset, {
+			x: 0,
+			y: 0
+		}) >= threshold;
+		if (!isPanStarted && !isDistancePastThreshold) return;
+		const { timestamp: timestamp$1 } = getFrameData();
+		history.push({
+			...info$1.point,
+			timestamp: timestamp$1
+		});
+		if (!isPanStarted) {
+			onStart?.(lastEvent, info$1);
+			startEvent = lastEvent;
+		}
+		onMove?.(lastEvent, info$1);
+	};
+	const onPointerMove = (ev$1, info$1) => {
+		lastEvent = ev$1;
+		lastEventInfo = info$1;
+		sync.update(updatePoint, true);
+	};
+	const onPointerUp = (ev$1, info$1) => {
+		const panInfo = getPanInfo(info$1, history);
+		onSessionEnd?.(ev$1, panInfo);
+		end();
+		if (!onEnd || !startEvent) return;
+		onEnd(ev$1, panInfo);
+	};
+	const updateHandlers = (newHandlers) => {
+		handlers = newHandlers;
+	};
+	let removeListeners = pipe(addPointerEvent(win, "pointermove", onPointerMove), addPointerEvent(win, "pointerup", onPointerUp), addPointerEvent(win, "pointercancel", onPointerUp));
+	const end = () => {
+		removeListeners();
+		cancelSync.update(updatePoint);
+	};
+	return {
+		end,
+		updateHandlers
+	};
+};
+const usePanEvent = (ref, { threshold, onEnd, onMove, onSessionEnd, onSessionStart, onStart }) => {
+	const hasPanEvents = !!onMove || !!onStart || !!onEnd || !!onSessionStart || !!onSessionEnd;
+	const panSession = useRef(null);
+	const handlersRef = useLatestRef({
+		onEnd: (ev, info) => {
+			panSession.current = null;
+			onEnd?.(ev, info);
+		},
+		onMove,
+		onSessionEnd,
+		onSessionStart,
+		onStart
+	});
+	useEffect(() => {
+		panSession.current?.updateHandlers(handlersRef.current);
+	});
+	useEffect(() => {
+		const node = ref.current;
+		if (!node || !hasPanEvents) return;
+		const onPointerDown = (ev) => {
+			panSession.current = panEvent(ev, handlersRef.current, threshold);
+		};
+		return addPointerEvent(node, "pointerdown", onPointerDown);
+	}, [
+		ref,
+		hasPanEvents,
+		handlersRef,
+		threshold
+	]);
+	useEffect(() => {
+		return () => {
+			panSession.current?.end();
+			panSession.current = null;
+		};
+	}, []);
+};
+
+//#endregion
+export { usePanEvent };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-pan-event/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["a: Point","b?: Point","info: PointerEventInfo","history: PanEventHistory","v: number","history: TimestampedPoint[]","timeDelta: number","timestampedPoint: TimestampedPoint | undefined","cb: EventListener","ev: Event","cb: PointerEventListener","ev: any","target: EventTarget","type: \"pointercancel\" | \"pointerdown\" | \"pointermove\" | \"pointerup\"","options?: AddEventListenerOptions","v: Y","a: number","b: number","point: any","a: Y","b: Y","ev: AnyPointerEvent","handlers: Partial<PanEventHandlers>","startEvent: AnyPointerEvent | null","lastEvent: AnyPointerEvent | null","lastEventInfo: null | PointerEventInfo","info","ev","newHandlers: Partial<PanEventHandlers>","ref: RefObject<HTMLElement | null>"],"sources":["../../../../src/hooks/use-pan-event/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { AnyPointerEvent, Point } from \"../../utils\"\nimport sync, { cancelSync, getFrameData } from \"framesync\"\nimport { useEffect, useRef } from \"react\"\nimport {\n  addDomEvent,\n  getEventPoint,\n  isMouseEvent,\n  isMultiTouchEvent,\n} from \"../../utils\"\nimport { useLatestRef } from \"../use-latest-ref\"\n\ninterface PointerEventInfo {\n  point: Point\n}\n\ninterface PanEventInfo {\n  delta: Point\n  offset: Point\n  point: Point\n  velocity: Point\n}\n\ntype PanEventHandler = (ev: AnyPointerEvent, info: PanEventInfo) => void\ntype PointerEventListener = (\n  ev: AnyPointerEvent,\n  info: PointerEventInfo,\n) => void\n\ninterface TimestampedPoint extends Point {\n  timestamp: number\n}\n\ntype PanEventHistory = TimestampedPoint[]\n\ninterface PanEventHandlers {\n  onEnd: PanEventHandler\n  onMove: PanEventHandler\n  onSessionEnd: PanEventHandler\n  onSessionStart: PanEventHandler\n  onStart: PanEventHandler\n}\n\nconst subtract = (a: Point, b?: Point): Point => ({\n  x: a.x - (b?.x ?? 0),\n  y: a.y - (b?.y ?? 0),\n})\n\nconst getPanInfo = (\n  info: PointerEventInfo,\n  history: PanEventHistory,\n): PanEventInfo => ({\n  delta: subtract(info.point, history[history.length - 1]),\n  offset: subtract(info.point, history[0]),\n  point: info.point,\n  velocity: getVelocity(history, 0.1),\n})\n\nconst toMilliseconds = (v: number) => v * 1000\n\nconst getVelocity = (history: TimestampedPoint[], timeDelta: number): Point => {\n  if (history.length < 2) return { x: 0, y: 0 }\n\n  let i = history.length - 1\n  let timestampedPoint: TimestampedPoint | undefined = undefined\n\n  const lastPoint = history[history.length - 1]\n\n  while (i >= 0) {\n    timestampedPoint = history[i]\n\n    if (\n      lastPoint &&\n      timestampedPoint &&\n      lastPoint.timestamp - timestampedPoint.timestamp >\n        toMilliseconds(timeDelta)\n    ) {\n      break\n    }\n\n    i--\n  }\n\n  if (!lastPoint || !timestampedPoint) return { x: 0, y: 0 }\n\n  const time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000\n\n  if (time === 0) return { x: 0, y: 0 }\n\n  const currentVelocity = {\n    x: (lastPoint.x - timestampedPoint.x) / time,\n    y: (lastPoint.y - timestampedPoint.y) / time,\n  }\n\n  if (currentVelocity.x === Infinity) currentVelocity.x = 0\n\n  if (currentVelocity.y === Infinity) currentVelocity.y = 0\n\n  return currentVelocity\n}\n\nconst filter = (cb: EventListener): EventListener => {\n  return function (ev: Event) {\n    const isMouse = isMouseEvent(ev)\n\n    if (!isMouse || ev.button === 0) cb(ev)\n  }\n}\n\nconst wrap = (\n  cb: PointerEventListener,\n  filterPrimary = false,\n): EventListener => {\n  function listener(ev: any) {\n    return cb(ev, { point: getEventPoint(ev) })\n  }\n\n  const fn = filterPrimary ? filter(listener) : listener\n\n  return fn as EventListener\n}\n\nconst addPointerEvent = (\n  target: EventTarget,\n  type: \"pointercancel\" | \"pointerdown\" | \"pointermove\" | \"pointerup\",\n  cb: PointerEventListener,\n  options?: AddEventListenerOptions,\n) => addDomEvent(target, type, wrap(cb, type === \"pointerdown\"), options)\n\nconst pipe =\n  <Y>(...fns: ((a: Y) => Y)[]) =>\n  (v: Y) =>\n    fns.reduce((a, b) => b(a), v)\n\nconst distance1D = (a: number, b: number) => Math.abs(a - b)\n\nconst isPoint = (point: any): point is { x: number; y: number } =>\n  \"x\" in point && \"y\" in point\n\nconst distance = <Y extends number | Point>(a: Y, b: Y) => {\n  if (typeof a === \"number\" && typeof b === \"number\") return distance1D(a, b)\n\n  if (isPoint(a) && isPoint(b)) {\n    const xDelta = distance1D(a.x, b.x)\n    const yDelta = distance1D(a.y, b.y)\n\n    return Math.sqrt(xDelta ** 2 + yDelta ** 2)\n  }\n\n  return 0\n}\n\nconst panEvent = (\n  ev: AnyPointerEvent,\n  handlers: Partial<PanEventHandlers>,\n  threshold = 3,\n) => {\n  if (isMultiTouchEvent(ev)) return\n\n  const win = ev.view ?? window\n  const info = { point: getEventPoint(ev) }\n  const { timestamp } = getFrameData()\n  const { onEnd, onMove, onSessionEnd, onSessionStart, onStart } = handlers\n\n  const history: PanEventHistory = [{ ...info.point, timestamp }]\n\n  let startEvent: AnyPointerEvent | null = null\n  let lastEvent: AnyPointerEvent | null = null\n  let lastEventInfo: null | PointerEventInfo = null\n\n  ev.stopPropagation()\n  ev.preventDefault()\n\n  onSessionStart?.(ev, getPanInfo(info, history))\n\n  const updatePoint = () => {\n    if (!(lastEvent && lastEventInfo)) return\n\n    const info = getPanInfo(lastEventInfo, history)\n\n    const isPanStarted = startEvent !== null\n\n    const isDistancePastThreshold =\n      distance(info.offset, { x: 0, y: 0 }) >= threshold\n\n    if (!isPanStarted && !isDistancePastThreshold) return\n\n    const { timestamp } = getFrameData()\n\n    history.push({ ...info.point, timestamp })\n\n    if (!isPanStarted) {\n      onStart?.(lastEvent, info)\n\n      startEvent = lastEvent\n    }\n\n    onMove?.(lastEvent, info)\n  }\n\n  const onPointerMove = (ev: AnyPointerEvent, info: PointerEventInfo) => {\n    lastEvent = ev\n    lastEventInfo = info\n\n    sync.update(updatePoint, true)\n  }\n\n  const onPointerUp = (ev: AnyPointerEvent, info: PointerEventInfo) => {\n    const panInfo = getPanInfo(info, history)\n\n    onSessionEnd?.(ev, panInfo)\n\n    end()\n\n    if (!onEnd || !startEvent) return\n\n    onEnd(ev, panInfo)\n  }\n\n  const updateHandlers = (newHandlers: Partial<PanEventHandlers>) => {\n    handlers = newHandlers\n  }\n\n  let removeListeners = pipe(\n    addPointerEvent(win, \"pointermove\", onPointerMove),\n    addPointerEvent(win, \"pointerup\", onPointerUp),\n    addPointerEvent(win, \"pointercancel\", onPointerUp),\n  )\n\n  const end = () => {\n    removeListeners()\n\n    cancelSync.update(updatePoint)\n  }\n\n  return {\n    end,\n    updateHandlers,\n  }\n}\n\ntype PanEvent = ReturnType<typeof panEvent>\n\nexport interface UsePanEventProps {\n  threshold?: number\n  onEnd?: PanEventHandler\n  onMove?: PanEventHandler\n  onSessionEnd?: PanEventHandler\n  onSessionStart?: PanEventHandler\n  onStart?: PanEventHandler\n}\n\nexport const usePanEvent = (\n  ref: RefObject<HTMLElement | null>,\n  {\n    threshold,\n    onEnd,\n    onMove,\n    onSessionEnd,\n    onSessionStart,\n    onStart,\n  }: UsePanEventProps,\n) => {\n  const hasPanEvents =\n    !!onMove || !!onStart || !!onEnd || !!onSessionStart || !!onSessionEnd\n\n  const panSession = useRef<null | PanEvent>(null)\n\n  const handlersRef = useLatestRef<Partial<PanEventHandlers>>({\n    onEnd: (ev, info) => {\n      panSession.current = null\n\n      onEnd?.(ev, info)\n    },\n    onMove,\n    onSessionEnd,\n    onSessionStart,\n    onStart,\n  })\n\n  useEffect(() => {\n    panSession.current?.updateHandlers(handlersRef.current)\n  })\n\n  useEffect(() => {\n    const node = ref.current\n\n    if (!node || !hasPanEvents) return\n\n    const onPointerDown = (ev: AnyPointerEvent) => {\n      panSession.current = panEvent(ev, handlersRef.current, threshold)\n    }\n\n    return addPointerEvent(node, \"pointerdown\", onPointerDown)\n  }, [ref, hasPanEvents, handlersRef, threshold])\n\n  useEffect(() => {\n    return () => {\n      panSession.current?.end()\n      panSession.current = null\n    }\n  }, [])\n}\n"],"mappings":";;;;;;;;;AA6CA,MAAM,WAAW,CAACA,GAAUC,OAAsB;CAChD,GAAG,EAAE,KAAK,GAAG,KAAK;CAClB,GAAG,EAAE,KAAK,GAAG,KAAK;AACnB;AAED,MAAM,aAAa,CACjBC,MACAC,aACkB;CAClB,OAAO,SAAS,KAAK,OAAO,QAAQ,QAAQ,SAAS,GAAG;CACxD,QAAQ,SAAS,KAAK,OAAO,QAAQ,GAAG;CACxC,OAAO,KAAK;CACZ,UAAU,YAAY,SAAS,GAAI;AACpC;AAED,MAAM,iBAAiB,CAACC,MAAc,IAAI;AAE1C,MAAM,cAAc,CAACC,SAA6BC,cAA6B;AAC7E,KAAI,QAAQ,SAAS,EAAG,QAAO;EAAE,GAAG;EAAG,GAAG;CAAG;CAE7C,IAAI,IAAI,QAAQ,SAAS;CACzB,IAAIC;CAEJ,MAAM,YAAY,QAAQ,QAAQ,SAAS;AAE3C,QAAO,KAAK,GAAG;AACb,qBAAmB,QAAQ;AAE3B,MACE,aACA,oBACA,UAAU,YAAY,iBAAiB,YACrC,eAAe,UAAU,CAE3B;AAGF;CACD;AAED,MAAK,cAAc,iBAAkB,QAAO;EAAE,GAAG;EAAG,GAAG;CAAG;CAE1D,MAAM,QAAQ,UAAU,YAAY,iBAAiB,aAAa;AAElE,KAAI,SAAS,EAAG,QAAO;EAAE,GAAG;EAAG,GAAG;CAAG;CAErC,MAAM,kBAAkB;EACtB,IAAI,UAAU,IAAI,iBAAiB,KAAK;EACxC,IAAI,UAAU,IAAI,iBAAiB,KAAK;CACzC;AAED,KAAI,gBAAgB,MAAM,SAAU,iBAAgB,IAAI;AAExD,KAAI,gBAAgB,MAAM,SAAU,iBAAgB,IAAI;AAExD,QAAO;AACR;AAED,MAAM,SAAS,CAACC,OAAqC;AACnD,QAAO,SAAUC,IAAW;EAC1B,MAAM,UAAU,gCAAa,GAAG;AAEhC,OAAK,WAAW,GAAG,WAAW,EAAG,IAAG,GAAG;CACxC;AACF;AAED,MAAM,OAAO,CACXC,IACA,gBAAgB,UACE;CAClB,SAAS,SAASC,IAAS;AACzB,SAAO,GAAG,IAAI,EAAE,OAAO,iCAAc,GAAG,CAAE,EAAC;CAC5C;CAED,MAAM,KAAK,gBAAgB,OAAO,SAAS,GAAG;AAE9C,QAAO;AACR;AAED,MAAM,kBAAkB,CACtBC,QACAC,MACAH,IACAI,YACG,+BAAY,QAAQ,MAAM,KAAK,IAAI,SAAS,cAAc,EAAE,QAAQ;AAEzE,MAAM,OACJ,CAAI,GAAG,QACP,CAACC,MACC,IAAI,OAAO,CAAC,GAAG,MAAM,EAAE,EAAE,EAAE,EAAE;AAEjC,MAAM,aAAa,CAACC,GAAWC,MAAc,KAAK,IAAI,IAAI,EAAE;AAE5D,MAAM,UAAU,CAACC,UACf,OAAO,SAAS,OAAO;AAEzB,MAAM,WAAW,CAA2BC,GAAMC,MAAS;AACzD,YAAW,MAAM,mBAAmB,MAAM,SAAU,QAAO,WAAW,GAAG,EAAE;AAE3E,KAAI,QAAQ,EAAE,IAAI,QAAQ,EAAE,EAAE;EAC5B,MAAM,SAAS,WAAW,EAAE,GAAG,EAAE,EAAE;EACnC,MAAM,SAAS,WAAW,EAAE,GAAG,EAAE,EAAE;AAEnC,SAAO,KAAK,KAAK,UAAU,IAAI,UAAU,EAAE;CAC5C;AAED,QAAO;AACR;AAED,MAAM,WAAW,CACfC,IACAC,UACA,YAAY,MACT;AACH,KAAI,qCAAkB,GAAG,CAAE;CAE3B,MAAM,MAAM,GAAG,QAAQ;CACvB,MAAM,OAAO,EAAE,OAAO,iCAAc,GAAG,CAAE;CACzC,MAAM,EAAE,WAAW,GAAG,cAAc;CACpC,MAAM,EAAE,OAAO,QAAQ,cAAc,gBAAgB,SAAS,GAAG;CAEjE,MAAMnB,UAA2B,CAAC;EAAE,GAAG,KAAK;EAAO;CAAW,CAAC;CAE/D,IAAIoB,aAAqC;CACzC,IAAIC,YAAoC;CACxC,IAAIC,gBAAyC;AAE7C,IAAG,iBAAiB;AACpB,IAAG,gBAAgB;AAEnB,kBAAiB,IAAI,WAAW,MAAM,QAAQ,CAAC;CAE/C,MAAM,cAAc,MAAM;AACxB,QAAM,aAAa,eAAgB;EAEnC,MAAMC,SAAO,WAAW,eAAe,QAAQ;EAE/C,MAAM,eAAe,eAAe;EAEpC,MAAM,0BACJ,SAASA,OAAK,QAAQ;GAAE,GAAG;GAAG,GAAG;EAAG,EAAC,IAAI;AAE3C,OAAK,iBAAiB,wBAAyB;EAE/C,MAAM,EAAE,wBAAW,GAAG,cAAc;AAEpC,UAAQ,KAAK;GAAE,GAAGA,OAAK;GAAO;EAAW,EAAC;AAE1C,OAAK,cAAc;AACjB,aAAU,WAAWA,OAAK;AAE1B,gBAAa;EACd;AAED,WAAS,WAAWA,OAAK;CAC1B;CAED,MAAM,gBAAgB,CAACL,MAAqBnB,WAA2B;AACrE,cAAYyB;AACZ,kBAAgBD;AAEhB,OAAK,OAAO,aAAa,KAAK;CAC/B;CAED,MAAM,cAAc,CAACL,MAAqBnB,WAA2B;EACnE,MAAM,UAAU,WAAWwB,QAAM,QAAQ;AAEzC,iBAAeC,MAAI,QAAQ;AAE3B,OAAK;AAEL,OAAK,UAAU,WAAY;AAE3B,QAAMA,MAAI,QAAQ;CACnB;CAED,MAAM,iBAAiB,CAACC,gBAA2C;AACjE,aAAW;CACZ;CAED,IAAI,kBAAkB,KACpB,gBAAgB,KAAK,eAAe,cAAc,EAClD,gBAAgB,KAAK,aAAa,YAAY,EAC9C,gBAAgB,KAAK,iBAAiB,YAAY,CACnD;CAED,MAAM,MAAM,MAAM;AAChB,mBAAiB;AAEjB,aAAW,OAAO,YAAY;CAC/B;AAED,QAAO;EACL;EACA;CACD;AACF;AAaD,MAAa,cAAc,CACzBC,KACA,EACE,WACA,OACA,QACA,cACA,gBACA,SACiB,KAChB;CACH,MAAM,iBACF,YAAY,aAAa,WAAW,oBAAoB;CAE5D,MAAM,aAAa,OAAwB,KAAK;CAEhD,MAAM,cAAc,aAAwC;EAC1D,OAAO,CAAC,IAAI,SAAS;AACnB,cAAW,UAAU;AAErB,WAAQ,IAAI,KAAK;EAClB;EACD;EACA;EACA;EACA;CACD,EAAC;AAEF,WAAU,MAAM;AACd,aAAW,SAAS,eAAe,YAAY,QAAQ;CACxD,EAAC;AAEF,WAAU,MAAM;EACd,MAAM,OAAO,IAAI;AAEjB,OAAK,SAAS,aAAc;EAE5B,MAAM,gBAAgB,CAACR,OAAwB;AAC7C,cAAW,UAAU,SAAS,IAAI,YAAY,SAAS,UAAU;EAClE;AAED,SAAO,gBAAgB,MAAM,eAAe,cAAc;CAC3D,GAAE;EAAC;EAAK;EAAc;EAAa;CAAU,EAAC;AAE/C,WAAU,MAAM;AACd,SAAO,MAAM;AACX,cAAW,SAAS,KAAK;AACzB,cAAW,UAAU;EACtB;CACF,GAAE,CAAE,EAAC;AACP"}

package/dist/esm/hooks/use-popper/index.js

@@ -0,0 +1,80 @@
+import { mergeRefs } from "../../utils/ref.js";
+import { useCallback, useMemo } from "react";
+import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react-dom";
+
+//#region src/hooks/use-popper/index.ts
+const PLACEMENT_MAP = {
+	"center-end": "right",
+	"center-start": "left",
+	end: "bottom",
+	"end-center": "bottom",
+	"end-end": "bottom-end",
+	"end-start": "bottom-start",
+	start: "top",
+	"start-center": "top",
+	"start-end": "top-end",
+	"start-start": "top-start"
+};
+const usePopper = ({ autoUpdate: autoUpdateProp = true, elements, flip: flipProp = true, gutter = 8, matchWidth, middleware: middlewareProp, offset: offsetProp, open = true, placement = "start", platform, preventOverflow = true, strategy = "absolute", transform = true, whileElementsMounted: whileElementsMountedProp } = {}) => {
+	const middleware = useMemo(() => {
+		const middleware$1 = [];
+		if (offsetProp) {
+			const [mainAxis, crossAxis] = offsetProp;
+			middleware$1.push(offset({
+				crossAxis,
+				mainAxis
+			}));
+		} else if (gutter) middleware$1.push(offset(gutter));
+		if (flipProp) middleware$1.push(flip());
+		if (preventOverflow) middleware$1.push(shift());
+		if (middlewareProp) middleware$1.push(...middlewareProp);
+		return middleware$1;
+	}, [
+		flipProp,
+		gutter,
+		middlewareProp,
+		offsetProp,
+		preventOverflow
+	]);
+	const whileElementsMounted = useMemo(() => {
+		if (whileElementsMountedProp) return whileElementsMountedProp;
+		if (autoUpdateProp) return autoUpdate;
+	}, [autoUpdateProp, whileElementsMountedProp]);
+	const { floatingStyles, refs,...rest } = useFloating({
+		elements,
+		middleware,
+		open,
+		placement: PLACEMENT_MAP[placement],
+		platform,
+		strategy,
+		transform,
+		whileElementsMounted
+	});
+	const getReferenceProps = useCallback((props) => ({
+		...props,
+		ref: mergeRefs(props?.ref, refs.setReference)
+	}), [refs.setReference]);
+	const getPopperProps = useCallback((props) => ({
+		...props,
+		ref: mergeRefs(props?.ref, refs.setFloating),
+		style: {
+			...props?.style,
+			minWidth: matchWidth ? void 0 : "max-content",
+			...floatingStyles
+		}
+	}), [
+		refs.setFloating,
+		matchWidth,
+		floatingStyles
+	]);
+	return {
+		...rest,
+		refs,
+		getPopperProps,
+		getReferenceProps
+	};
+};
+
+//#endregion
+export { usePopper };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-popper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["PLACEMENT_MAP: {\n  [key in PopperPlacement]: FloatingPlacement\n}","middleware: (false | Middleware | null | undefined)[]","middleware","props?: D extends DOMElement ? HTMLProps<D> : HTMLElementProps","props?: HTMLProps<H>"],"sources":["../../../../src/hooks/use-popper/index.ts"],"sourcesContent":["import type {\n  Placement as FloatingPlacement,\n  Middleware,\n  Platform,\n  Strategy,\n  UseFloatingOptions,\n  VirtualElement,\n} from \"@floating-ui/react-dom\"\nimport type { ComponentRef, Ref } from \"react\"\nimport type {\n  DOMElement,\n  HTMLElementProps,\n  HTMLProps,\n  Placement,\n} from \"../../core\"\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useFloating,\n} from \"@floating-ui/react-dom\"\nimport { useCallback, useMemo } from \"react\"\nimport { mergeRefs } from \"../../utils\"\n\nexport type PopperPlacement = Exclude<Placement, \"center\" | \"center-center\">\n\nconst PLACEMENT_MAP: {\n  [key in PopperPlacement]: FloatingPlacement\n} = {\n  \"center-end\": \"right\",\n  \"center-start\": \"left\",\n  end: \"bottom\",\n  \"end-center\": \"bottom\",\n  \"end-end\": \"bottom-end\",\n  \"end-start\": \"bottom-start\",\n  start: \"top\",\n  \"start-center\": \"top\",\n  \"start-end\": \"top-end\",\n  \"start-start\": \"top-start\",\n}\n\ntype WhileElementsMounted = UseFloatingOptions[\"whileElementsMounted\"]\n\ntype Reference<Y extends DOMElement | VirtualElement = \"div\"> =\n  Y extends DOMElement ? ComponentRef<Y> : Y\n\nexport interface UsePopperProps<Y extends DOMElement | VirtualElement = \"div\"> {\n  /**\n   * If `true`, automatically updates the position of the floating element when necessary.\n   *\n   * @default true\n   */\n  autoUpdate?: boolean\n  /**\n   * Object containing the reference and floating elements.\n   */\n  elements?: {\n    floating?: HTMLElement | null\n    reference?: null | Reference<Y>\n  }\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: boolean\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: number\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: boolean\n  /**\n   * Array of middleware objects to modify the positioning or provide data for\n   * rendering.\n   */\n  middleware?: (false | Middleware | null | undefined)[]\n  /**\n   * The main and cross-axis offset to displace popper element from its reference element.\n   */\n  offset?: [number, number]\n  /**\n   * Whether the popper should be enabled.\n   *\n   * @default true\n   */\n  open?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'start'\n   */\n  placement?: PopperPlacement\n  /**\n   * Custom or extended platform object.\n   */\n  platform?: Platform\n  /**\n   * If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.\n   *\n   * @default true\n   */\n  preventOverflow?: boolean\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: Strategy\n  /**\n   * Whether to use `transform` for positioning instead of `top` and `left`\n   * (layout) in the `floatingStyles` object.\n   *\n   * @default true\n   */\n  transform?: boolean\n  /**\n   * A callback invoked when both the reference and floating elements are\n   * mounted, and cleaned up when either is unmounted. This is useful for\n   * setting up event listeners (e.g. pass `autoUpdate`).\n   */\n  whileElementsMounted?: (\n    reference: Reference<Y>,\n    floating: HTMLElement,\n    update: () => void,\n  ) => () => void\n}\n\nexport const usePopper = <\n  Y extends DOMElement | VirtualElement = \"div\",\n  M extends DOMElement = \"div\",\n>({\n  autoUpdate: autoUpdateProp = true,\n  elements,\n  flip: flipProp = true,\n  gutter = 8,\n  matchWidth,\n  middleware: middlewareProp,\n  offset: offsetProp,\n  open = true,\n  placement = \"start\",\n  platform,\n  preventOverflow = true,\n  strategy = \"absolute\",\n  transform = true,\n  whileElementsMounted: whileElementsMountedProp,\n}: UsePopperProps = {}) => {\n  const middleware = useMemo(() => {\n    const middleware: (false | Middleware | null | undefined)[] = []\n\n    if (offsetProp) {\n      const [mainAxis, crossAxis] = offsetProp\n\n      middleware.push(offset({ crossAxis, mainAxis }))\n    } else if (gutter) {\n      middleware.push(offset(gutter))\n    }\n\n    if (flipProp) middleware.push(flip())\n\n    if (preventOverflow) middleware.push(shift())\n\n    if (middlewareProp) middleware.push(...middlewareProp)\n\n    return middleware\n  }, [flipProp, gutter, middlewareProp, offsetProp, preventOverflow])\n  const whileElementsMounted = useMemo(() => {\n    if (whileElementsMountedProp)\n      return whileElementsMountedProp as WhileElementsMounted\n\n    if (autoUpdateProp) return autoUpdate\n  }, [autoUpdateProp, whileElementsMountedProp])\n\n  const { floatingStyles, refs, ...rest } = useFloating<Reference<Y>>({\n    elements,\n    middleware,\n    open,\n    placement: PLACEMENT_MAP[placement],\n    platform,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  const getReferenceProps = useCallback(\n    <D extends DOMElement | VirtualElement = Y>(\n      props?: D extends DOMElement ? HTMLProps<D> : HTMLElementProps,\n    ) =>\n      ({\n        ...props,\n        ref: mergeRefs(props?.ref as Ref<any>, refs.setReference),\n      }) as D extends DOMElement ? HTMLProps<D> : HTMLElementProps,\n    [refs.setReference],\n  )\n\n  const getPopperProps = useCallback(\n    <H extends DOMElement = M>(props?: HTMLProps<H>) =>\n      ({\n        ...props,\n        ref: mergeRefs(props?.ref as Ref<any>, refs.setFloating),\n        style: {\n          ...props?.style,\n          minWidth: matchWidth ? undefined : \"max-content\",\n          ...floatingStyles,\n        },\n      }) as HTMLProps<H>,\n    [refs.setFloating, matchWidth, floatingStyles],\n  )\n\n  return {\n    ...rest,\n    refs,\n    getPopperProps,\n    getReferenceProps,\n  }\n}\n\nexport type UsePopperReturn = ReturnType<typeof usePopper>\n"],"mappings":";;;;;AA2BA,MAAMA,gBAEF;CACF,cAAc;CACd,gBAAgB;CAChB,KAAK;CACL,cAAc;CACd,WAAW;CACX,aAAa;CACb,OAAO;CACP,gBAAgB;CAChB,aAAa;CACb,eAAe;AAChB;AAiGD,MAAa,YAAY,CAGvB,EACA,YAAY,iBAAiB,MAC7B,UACA,MAAM,WAAW,MACjB,SAAS,GACT,YACA,YAAY,gBACZ,QAAQ,YACR,OAAO,MACP,YAAY,SACZ,UACA,kBAAkB,MAClB,WAAW,YACX,YAAY,MACZ,sBAAsB,0BACP,GAAG,CAAE,MAAK;CACzB,MAAM,aAAa,QAAQ,MAAM;EAC/B,MAAMC,eAAwD,CAAE;AAEhE,MAAI,YAAY;GACd,MAAM,CAAC,UAAU,UAAU,GAAG;AAE9B,gBAAW,KAAK,OAAO;IAAE;IAAW;GAAU,EAAC,CAAC;EACjD,WAAU,OACT,cAAW,KAAK,OAAO,OAAO,CAAC;AAGjC,MAAI,SAAU,cAAW,KAAK,MAAM,CAAC;AAErC,MAAI,gBAAiB,cAAW,KAAK,OAAO,CAAC;AAE7C,MAAI,eAAgB,cAAW,KAAK,GAAG,eAAe;AAEtD,SAAOC;CACR,GAAE;EAAC;EAAU;EAAQ;EAAgB;EAAY;CAAgB,EAAC;CACnE,MAAM,uBAAuB,QAAQ,MAAM;AACzC,MAAI,yBACF,QAAO;AAET,MAAI,eAAgB,QAAO;CAC5B,GAAE,CAAC,gBAAgB,wBAAyB,EAAC;CAE9C,MAAM,EAAE,gBAAgB,KAAM,GAAG,MAAM,GAAG,YAA0B;EAClE;EACA;EACA;EACA,WAAW,cAAc;EACzB;EACA;EACA;EACA;CACD,EAAC;CAEF,MAAM,oBAAoB,YACxB,CACEC,WAEC;EACC,GAAG;EACH,KAAK,UAAU,OAAO,KAAiB,KAAK,aAAa;CAC1D,IACH,CAAC,KAAK,YAAa,EACpB;CAED,MAAM,iBAAiB,YACrB,CAA2BC,WACxB;EACC,GAAG;EACH,KAAK,UAAU,OAAO,KAAiB,KAAK,YAAY;EACxD,OAAO;GACL,GAAG,OAAO;GACV,UAAU,sBAAyB;GACnC,GAAG;EACJ;CACF,IACH;EAAC,KAAK;EAAa;EAAY;CAAe,EAC/C;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;CACD;AACF"}

package/dist/esm/hooks/use-previous/index.js

@@ -0,0 +1,22 @@
+"use client";
+
+
+import { useEffect, useRef } from "react";
+
+//#region src/hooks/use-previous/index.ts
+/**
+* `usePrevious` is a custom hook for obtaining the previous value.
+*
+* @see https://yamada-ui.com/hooks/use-previous
+*/
+const usePrevious = (value) => {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref.current;
+};
+
+//#endregion
+export { usePrevious };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-previous/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["value: T"],"sources":["../../../../src/hooks/use-previous/index.ts"],"sourcesContent":["\"use client\"\n\nimport { useEffect, useRef } from \"react\"\n\n/**\n * `usePrevious` is a custom hook for obtaining the previous value.\n *\n * @see https://yamada-ui.com/hooks/use-previous\n */\nexport const usePrevious = <T>(value: T) => {\n  const ref = useRef<T | undefined>(undefined)\n\n  useEffect(() => {\n    ref.current = value\n  }, [value])\n\n  return ref.current\n}\n"],"mappings":";;;;;;;;;;;AASA,MAAa,cAAc,CAAIA,UAAa;CAC1C,MAAM,MAAM,cAAgC;AAE5C,WAAU,MAAM;AACd,MAAI,UAAU;CACf,GAAE,CAAC,KAAM,EAAC;AAEX,QAAO,IAAI;AACZ"}

package/dist/esm/hooks/use-processing/index.js

@@ -0,0 +1,42 @@
+"use client";
+
+
+import { useUnmountEffect } from "../../utils/effect.js";
+import { useBoolean } from "../use-boolean/index.js";
+import { useCallback, useMemo, useRef } from "react";
+
+//#region src/hooks/use-processing/index.ts
+/**
+* `useProcessing` is a custom hook for handling processing states.
+*
+* @see https://yamada-ui.com/hooks/use-processing
+*/
+const useProcessing = (init) => {
+	const [loading, { off, on }] = useBoolean(init);
+	const countRef = useRef(0);
+	const start = useCallback(() => {
+		countRef.current += 1;
+		on();
+	}, [on]);
+	const finish = useCallback(() => {
+		countRef.current -= 1;
+		if (countRef.current <= 0) off();
+	}, [off]);
+	useUnmountEffect(() => {
+		countRef.current = 0;
+	});
+	const controls = useMemo(() => ({
+		finish,
+		loading,
+		start
+	}), [
+		finish,
+		loading,
+		start
+	]);
+	return controls;
+};
+
+//#endregion
+export { useProcessing };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-processing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["init?: boolean"],"sources":["../../../../src/hooks/use-processing/index.ts"],"sourcesContent":["\"use client\"\n\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useUnmountEffect } from \"../../utils\"\nimport { useBoolean } from \"../use-boolean\"\n\n/**\n * `useProcessing` is a custom hook for handling processing states.\n *\n * @see https://yamada-ui.com/hooks/use-processing\n */\nexport const useProcessing = (init?: boolean) => {\n  const [loading, { off, on }] = useBoolean(init)\n  const countRef = useRef<number>(0)\n\n  const start = useCallback(() => {\n    countRef.current += 1\n\n    on()\n  }, [on])\n\n  const finish = useCallback(() => {\n    countRef.current -= 1\n\n    if (countRef.current <= 0) off()\n  }, [off])\n\n  useUnmountEffect(() => {\n    countRef.current = 0\n  })\n\n  const controls = useMemo(\n    () => ({\n      finish,\n      loading,\n      start,\n    }),\n    [finish, loading, start],\n  )\n\n  return controls\n}\n\nexport type UseProcessingReturn = ReturnType<typeof useProcessing>\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,gBAAgB,CAACA,SAAmB;CAC/C,MAAM,CAAC,SAAS,EAAE,KAAK,IAAI,CAAC,GAAG,WAAW,KAAK;CAC/C,MAAM,WAAW,OAAe,EAAE;CAElC,MAAM,QAAQ,YAAY,MAAM;AAC9B,WAAS,WAAW;AAEpB,MAAI;CACL,GAAE,CAAC,EAAG,EAAC;CAER,MAAM,SAAS,YAAY,MAAM;AAC/B,WAAS,WAAW;AAEpB,MAAI,SAAS,WAAW,EAAG,MAAK;CACjC,GAAE,CAAC,GAAI,EAAC;AAET,kBAAiB,MAAM;AACrB,WAAS,UAAU;CACpB,EAAC;CAEF,MAAM,WAAW,QACf,OAAO;EACL;EACA;EACA;CACD,IACD;EAAC;EAAQ;EAAS;CAAM,EACzB;AAED,QAAO;AACR"}

package/dist/esm/hooks/use-resize-observer/index.js

@@ -0,0 +1,57 @@
+"use client";
+
+
+import { utils_exports } from "../../utils/index.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+//#region src/hooks/use-resize-observer/index.ts
+const defaultRect = {
+	bottom: 0,
+	height: 0,
+	left: 0,
+	right: 0,
+	top: 0,
+	width: 0,
+	x: 0,
+	y: 0
+};
+/**
+* `useResizeObserver` is a custom hook that tracks changes in the size and position of an element.
+*
+* @see https://yamada-ui.com/hooks/use-resize-observer
+*/
+const useResizeObserver = () => {
+	const id = useRef(0);
+	const ref = useRef(null);
+	const [rect, setRect] = useState(defaultRect);
+	const observer = useMemo(() => {
+		if (!(0, utils_exports.createdDom)()) return null;
+		return new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			cancelAnimationFrame(id.current);
+			id.current = requestAnimationFrame(() => {
+				if (ref.current) setRect(entry.contentRect);
+			});
+		});
+	}, []);
+	useEffect(() => {
+		if (ref.current) observer?.observe(ref.current);
+		return () => {
+			observer?.disconnect();
+			if (id.current) cancelAnimationFrame(id.current);
+		};
+	}, [observer]);
+	return [ref, rect];
+};
+const useElementSize = () => {
+	const [ref, { height, width }] = useResizeObserver();
+	return {
+		ref,
+		height,
+		width
+	};
+};
+
+//#endregion
+export { useElementSize, useResizeObserver };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-resize-observer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["defaultRect: ObserverRect"],"sources":["../../../../src/hooks/use-resize-observer/index.ts"],"sourcesContent":["\"use client\"\n\nimport { useEffect, useMemo, useRef, useState } from \"react\"\nimport { createdDom } from \"../../utils\"\n\nexport interface ObserverRect extends Omit<DOMRectReadOnly, \"toJSON\"> {}\n\nconst defaultRect: ObserverRect = {\n  bottom: 0,\n  height: 0,\n  left: 0,\n  right: 0,\n  top: 0,\n  width: 0,\n  x: 0,\n  y: 0,\n}\n\n/**\n * `useResizeObserver` is a custom hook that tracks changes in the size and position of an element.\n *\n * @see https://yamada-ui.com/hooks/use-resize-observer\n */\nexport const useResizeObserver = <T extends HTMLElement = any>() => {\n  const id = useRef(0)\n  const ref = useRef<T>(null)\n  const [rect, setRect] = useState<ObserverRect>(defaultRect)\n\n  const observer = useMemo(() => {\n    if (!createdDom()) return null\n\n    return new ResizeObserver(([entry]) => {\n      if (!entry) return\n\n      cancelAnimationFrame(id.current)\n\n      id.current = requestAnimationFrame(() => {\n        if (ref.current) setRect(entry.contentRect)\n      })\n    })\n  }, [])\n\n  useEffect(() => {\n    if (ref.current) observer?.observe(ref.current)\n\n    return () => {\n      observer?.disconnect()\n\n      if (id.current) cancelAnimationFrame(id.current)\n    }\n  }, [observer])\n\n  return [ref, rect] as const\n}\n\nexport const useElementSize = <T extends HTMLElement = any>() => {\n  const [ref, { height, width }] = useResizeObserver<T>()\n\n  return { ref, height, width }\n}\n"],"mappings":";;;;;;;AAOA,MAAMA,cAA4B;CAChC,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,GAAG;CACH,GAAG;AACJ;;;;;;AAOD,MAAa,oBAAoB,MAAmC;CAClE,MAAM,KAAK,OAAO,EAAE;CACpB,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAuB,YAAY;CAE3D,MAAM,WAAW,QAAQ,MAAM;AAC7B,OAAK,+BAAY,CAAE,QAAO;AAE1B,SAAO,IAAI,eAAe,CAAC,CAAC,MAAM,KAAK;AACrC,QAAK,MAAO;AAEZ,wBAAqB,GAAG,QAAQ;AAEhC,MAAG,UAAU,sBAAsB,MAAM;AACvC,QAAI,IAAI,QAAS,SAAQ,MAAM,YAAY;GAC5C,EAAC;EACH;CACF,GAAE,CAAE,EAAC;AAEN,WAAU,MAAM;AACd,MAAI,IAAI,QAAS,WAAU,QAAQ,IAAI,QAAQ;AAE/C,SAAO,MAAM;AACX,aAAU,YAAY;AAEtB,OAAI,GAAG,QAAS,sBAAqB,GAAG,QAAQ;EACjD;CACF,GAAE,CAAC,QAAS,EAAC;AAEd,QAAO,CAAC,KAAK,IAAK;AACnB;AAED,MAAa,iBAAiB,MAAmC;CAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,OAAO,CAAC,GAAG,mBAAsB;AAEvD,QAAO;EAAE;EAAK;EAAQ;CAAO;AAC9B"}

package/dist/esm/hooks/use-size/index.js

@@ -0,0 +1,94 @@
+"use client";
+
+
+import { useSafeLayoutEffect } from "../../utils/effect.js";
+import { isRefObject } from "../../utils/ref.js";
+import { utils_exports } from "../../utils/index.js";
+import { useState } from "react";
+
+//#region src/hooks/use-size/index.ts
+const trackElementSize = (el, cb) => {
+	if (!el) {
+		cb(void 0);
+		return;
+	}
+	cb({
+		height: el.offsetHeight,
+		width: el.offsetWidth
+	});
+	const win = el.ownerDocument.defaultView ?? window;
+	const observer = new win.ResizeObserver((entries) => {
+		if (!(0, utils_exports.isArray)(entries) || !entries.length) return;
+		const [entry] = entries;
+		let width;
+		let height;
+		if (entry && "borderBoxSize" in entry) {
+			const borderSizeEntry = entry.borderBoxSize;
+			const borderSize = (0, utils_exports.isArray)(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+			width = borderSize.inlineSize;
+			height = borderSize.blockSize;
+		} else {
+			width = el.offsetWidth;
+			height = el.offsetHeight;
+		}
+		cb({
+			height,
+			width
+		});
+	});
+	observer.observe(el, { box: "border-box" });
+	return () => observer.unobserve(el);
+};
+const trackMutation = (el, cb) => {
+	if (!el?.parentElement) return;
+	const win = el.ownerDocument.defaultView ?? window;
+	const observer = new win.MutationObserver(() => {
+		cb();
+	});
+	observer.observe(el.parentElement, { childList: true });
+	return () => {
+		observer.disconnect();
+	};
+};
+const useSizes = ({ getNodes, observeMutation = true }) => {
+	const [sizes, setSizes] = useState([]);
+	const [count, setCount] = useState(0);
+	useSafeLayoutEffect(() => {
+		const elements = getNodes();
+		const cleanups = elements.map((element, index) => trackElementSize(element, (size) => {
+			setSizes((sizes$1) => {
+				return [
+					...sizes$1.slice(0, index),
+					size,
+					...sizes$1.slice(index + 1)
+				];
+			});
+		}));
+		if (observeMutation) {
+			const firstNode = elements[0];
+			cleanups.push(trackMutation(firstNode, () => {
+				setCount((count$1) => count$1 + 1);
+			}));
+		}
+		return () => {
+			cleanups.forEach((cleanup) => {
+				cleanup?.();
+			});
+		};
+	}, [count]);
+	return sizes;
+};
+const useSize = (refOrEl) => {
+	const [size] = useSizes({
+		getNodes: () => {
+			const node = isRefObject(refOrEl) ? refOrEl.current : refOrEl;
+			return [node];
+		},
+		observeMutation: false
+	});
+	return size;
+};
+
+//#endregion
+export { trackElementSize, useSize, useSizes };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-size/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["el: HTMLElement | null","cb: (size: Size | undefined) => void","width: number","height: number","el: HTMLElement | null | undefined","cb: () => void","sizes","count","refOrEl: React.RefObject<T> | T"],"sources":["../../../../src/hooks/use-size/index.ts"],"sourcesContent":["\"use client\"\n\nimport { useState } from \"react\"\nimport { isArray, isRefObject, useSafeLayoutEffect } from \"../../utils\"\n\ninterface Size {\n  height: number\n  width: number\n}\n\nexport const trackElementSize = (\n  el: HTMLElement | null,\n  cb: (size: Size | undefined) => void,\n) => {\n  if (!el) {\n    cb(undefined)\n\n    return\n  }\n\n  cb({ height: el.offsetHeight, width: el.offsetWidth })\n\n  const win = el.ownerDocument.defaultView ?? window\n\n  const observer = new win.ResizeObserver((entries) => {\n    if (!isArray(entries) || !entries.length) return\n\n    const [entry] = entries\n    let width: number\n    let height: number\n\n    if (entry && \"borderBoxSize\" in entry) {\n      const borderSizeEntry = entry.borderBoxSize\n      const borderSize = isArray(borderSizeEntry)\n        ? borderSizeEntry[0]\n        : borderSizeEntry\n\n      width = borderSize.inlineSize\n      height = borderSize.blockSize\n    } else {\n      width = el.offsetWidth\n      height = el.offsetHeight\n    }\n\n    cb({ height, width })\n  })\n\n  observer.observe(el, { box: \"border-box\" })\n\n  return () => observer.unobserve(el)\n}\n\nconst trackMutation = (el: HTMLElement | null | undefined, cb: () => void) => {\n  if (!el?.parentElement) return\n\n  const win = el.ownerDocument.defaultView ?? window\n\n  const observer = new win.MutationObserver(() => {\n    cb()\n  })\n\n  observer.observe(el.parentElement, { childList: true })\n\n  return () => {\n    observer.disconnect()\n  }\n}\n\nexport const useSizes = <T extends HTMLElement | null>({\n  getNodes,\n  observeMutation = true,\n}: {\n  getNodes: () => T[]\n  observeMutation?: boolean\n}) => {\n  const [sizes, setSizes] = useState<Size[]>([])\n  const [count, setCount] = useState(0)\n\n  useSafeLayoutEffect(() => {\n    const elements = getNodes()\n\n    const cleanups = elements.map((element, index) =>\n      trackElementSize(element, (size) => {\n        setSizes((sizes) => {\n          return [\n            ...sizes.slice(0, index),\n            size,\n            ...sizes.slice(index + 1),\n          ] as Size[]\n        })\n      }),\n    )\n\n    if (observeMutation) {\n      const firstNode = elements[0]\n\n      cleanups.push(\n        trackMutation(firstNode, () => {\n          setCount((count) => count + 1)\n        }),\n      )\n    }\n\n    return () => {\n      cleanups.forEach((cleanup) => {\n        cleanup?.()\n      })\n    }\n  }, [count])\n\n  return sizes as (Size | undefined)[]\n}\n\nexport const useSize = <T extends HTMLElement | null>(\n  refOrEl: React.RefObject<T> | T,\n) => {\n  const [size] = useSizes({\n    getNodes: () => {\n      const node = isRefObject(refOrEl) ? refOrEl.current : refOrEl\n\n      return [node]\n    },\n\n    observeMutation: false,\n  })\n\n  return size as Size | undefined\n}\n"],"mappings":";;;;;;;;;AAUA,MAAa,mBAAmB,CAC9BA,IACAC,OACG;AACH,MAAK,IAAI;AACP,YAAa;AAEb;CACD;AAED,IAAG;EAAE,QAAQ,GAAG;EAAc,OAAO,GAAG;CAAa,EAAC;CAEtD,MAAM,MAAM,GAAG,cAAc,eAAe;CAE5C,MAAM,WAAW,IAAI,IAAI,eAAe,CAAC,YAAY;AACnD,OAAK,2BAAQ,QAAQ,KAAK,QAAQ,OAAQ;EAE1C,MAAM,CAAC,MAAM,GAAG;EAChB,IAAIC;EACJ,IAAIC;AAEJ,MAAI,SAAS,mBAAmB,OAAO;GACrC,MAAM,kBAAkB,MAAM;GAC9B,MAAM,aAAa,2BAAQ,gBAAgB,GACvC,gBAAgB,KAChB;AAEJ,WAAQ,WAAW;AACnB,YAAS,WAAW;EACrB,OAAM;AACL,WAAQ,GAAG;AACX,YAAS,GAAG;EACb;AAED,KAAG;GAAE;GAAQ;EAAO,EAAC;CACtB;AAED,UAAS,QAAQ,IAAI,EAAE,KAAK,aAAc,EAAC;AAE3C,QAAO,MAAM,SAAS,UAAU,GAAG;AACpC;AAED,MAAM,gBAAgB,CAACC,IAAoCC,OAAmB;AAC5E,MAAK,IAAI,cAAe;CAExB,MAAM,MAAM,GAAG,cAAc,eAAe;CAE5C,MAAM,WAAW,IAAI,IAAI,iBAAiB,MAAM;AAC9C,MAAI;CACL;AAED,UAAS,QAAQ,GAAG,eAAe,EAAE,WAAW,KAAM,EAAC;AAEvD,QAAO,MAAM;AACX,WAAS,YAAY;CACtB;AACF;AAED,MAAa,WAAW,CAA+B,EACrD,UACA,kBAAkB,MAInB,KAAK;CACJ,MAAM,CAAC,OAAO,SAAS,GAAG,SAAiB,CAAE,EAAC;CAC9C,MAAM,CAAC,OAAO,SAAS,GAAG,SAAS,EAAE;AAErC,qBAAoB,MAAM;EACxB,MAAM,WAAW,UAAU;EAE3B,MAAM,WAAW,SAAS,IAAI,CAAC,SAAS,UACtC,iBAAiB,SAAS,CAAC,SAAS;AAClC,YAAS,CAACC,YAAU;AAClB,WAAO;KACL,GAAG,QAAM,MAAM,GAAG,MAAM;KACxB;KACA,GAAG,QAAM,MAAM,QAAQ,EAAE;IAC1B;GACF,EAAC;EACH,EAAC,CACH;AAED,MAAI,iBAAiB;GACnB,MAAM,YAAY,SAAS;AAE3B,YAAS,KACP,cAAc,WAAW,MAAM;AAC7B,aAAS,CAACC,YAAUA,UAAQ,EAAE;GAC/B,EAAC,CACH;EACF;AAED,SAAO,MAAM;AACX,YAAS,QAAQ,CAAC,YAAY;AAC5B,eAAW;GACZ,EAAC;EACH;CACF,GAAE,CAAC,KAAM,EAAC;AAEX,QAAO;AACR;AAED,MAAa,UAAU,CACrBC,YACG;CACH,MAAM,CAAC,KAAK,GAAG,SAAS;EACtB,UAAU,MAAM;GACd,MAAM,OAAO,YAAY,QAAQ,GAAG,QAAQ,UAAU;AAEtD,UAAO,CAAC,IAAK;EACd;EAED,iBAAiB;CAClB,EAAC;AAEF,QAAO;AACR"}

package/dist/esm/hooks/use-timeout/index.js

@@ -0,0 +1,27 @@
+"use client";
+
+
+import { useCallbackRef } from "../../utils/ref.js";
+import { useEffect } from "react";
+
+//#region src/hooks/use-timeout/index.ts
+/**
+* `useTimeout` is a custom hook that executes a function after a specified number of milliseconds.
+*
+* @see https://yamada-ui.com/hooks/use-timeout
+*/
+const useTimeout = (callback, delay) => {
+	const callbackRef = useCallbackRef(callback);
+	useEffect(() => {
+		if (delay == null) return void 0;
+		let timeoutId = null;
+		timeoutId = setTimeout(callbackRef, delay);
+		return () => {
+			clearTimeout(timeoutId);
+		};
+	}, [delay, callbackRef]);
+};
+
+//#endregion
+export { useTimeout };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-timeout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["callback: (...args: any[]) => void","delay: null | number","timeoutId: NodeJS.Timeout | null"],"sources":["../../../../src/hooks/use-timeout/index.ts"],"sourcesContent":["\"use client\"\n\nimport { useEffect } from \"react\"\nimport { useCallbackRef } from \"../../utils\"\n\n/**\n * `useTimeout` is a custom hook that executes a function after a specified number of milliseconds.\n *\n * @see https://yamada-ui.com/hooks/use-timeout\n */\nexport const useTimeout = (\n  callback: (...args: any[]) => void,\n  delay: null | number,\n) => {\n  const callbackRef = useCallbackRef(callback)\n\n  useEffect(() => {\n    if (delay == null) return undefined\n\n    let timeoutId: NodeJS.Timeout | null = null\n\n    timeoutId = setTimeout(callbackRef, delay)\n\n    return () => {\n      clearTimeout(timeoutId)\n    }\n  }, [delay, callbackRef])\n}\n"],"mappings":";;;;;;;;;;;;AAUA,MAAa,aAAa,CACxBA,UACAC,UACG;CACH,MAAM,cAAc,eAAe,SAAS;AAE5C,WAAU,MAAM;AACd,MAAI,SAAS,KAAM;EAEnB,IAAIC,YAAmC;AAEvC,cAAY,WAAW,aAAa,MAAM;AAE1C,SAAO,MAAM;AACX,gBAAa,UAAU;EACxB;CACF,GAAE,CAAC,OAAO,WAAY,EAAC;AACzB"}

package/dist/esm/hooks/use-token/index.js

@@ -0,0 +1,47 @@
+import { utils_exports } from "../../utils/index.js";
+import { useTheme } from "../../core/system/theme-provider.js";
+import { useColorMode } from "../../core/system/color-mode-provider.js";
+import { useMemo } from "react";
+
+//#region src/hooks/use-token/index.ts
+/**
+* `useToken` is a custom hook for retrieving tokens from the theme.
+*
+* @see https://yamada-ui.com/hooks/use-token
+*/
+const useToken = (name, path) => {
+	const { theme } = useTheme();
+	const { colorMode } = useColorMode();
+	return useMemo(() => getToken(name, path)(theme, colorMode), [
+		name,
+		path,
+		theme,
+		colorMode
+	]);
+};
+const getToken = (name, path) => (theme, colorMode) => {
+	if (name === "layerStyles") name = "styles.layerStyles";
+	if (name === "textStyles") name = "styles.textStyles";
+	let value = (0, utils_exports.getMemoizedObject)(theme, `${name}.${path}`);
+	if (!(0, utils_exports.isUndefined)(value)) if ((0, utils_exports.isArray)(value)) {
+		const [lightValue, darkValue] = value;
+		return colorMode !== "dark" ? lightValue : darkValue;
+	} else return value;
+	else {
+		value = (0, utils_exports.getMemoizedObject)(theme, `semantics.${name}.${path}`);
+		if ((0, utils_exports.isArray)(value)) value = [(0, utils_exports.getMemoizedObject)(theme, `${name}.${value[0]}`, value[0]), (0, utils_exports.getMemoizedObject)(theme, `${name}.${value[1]}`, value[1])];
+		else value = (0, utils_exports.getMemoizedObject)(theme, `${name}.${value}`) ?? value;
+		if ((0, utils_exports.isArray)(value)) {
+			const [lightValue, darkValue] = value;
+			value = colorMode !== "dark" ? lightValue : darkValue;
+			if ((0, utils_exports.isArray)(value)) {
+				const [lightValue$1, darkValue$1] = value;
+				return colorMode !== "dark" ? lightValue$1 : darkValue$1;
+			} else return value;
+		} else return value;
+	}
+};
+
+//#endregion
+export { getToken, useToken };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-token/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["name: M","path: number | ThemeTokens[M] | undefined","theme: StyledTheme","colorMode?: ColorMode","lightValue","darkValue"],"sources":["../../../../src/hooks/use-token/index.ts"],"sourcesContent":["import type { ColorMode, StyledTheme, ThemeTokens } from \"../../core\"\nimport { useMemo } from \"react\"\nimport { useColorMode, useTheme } from \"../../core\"\nimport { getMemoizedObject as get, isArray, isUndefined } from \"../../utils\"\n\ntype OmittedTheme = Omit<ThemeTokens, \"colorSchemes\" | \"themeSchemes\">\n\n/**\n * `useToken` is a custom hook for retrieving tokens from the theme.\n *\n * @see https://yamada-ui.com/hooks/use-token\n */\nexport const useToken = <\n  Y extends number | string = string,\n  M extends keyof OmittedTheme = keyof OmittedTheme,\n>(\n  name: M,\n  path: number | ThemeTokens[M] | undefined,\n) => {\n  const { theme } = useTheme()\n  const { colorMode } = useColorMode()\n\n  return useMemo(\n    () => getToken<Y, M>(name, path)(theme, colorMode),\n    [name, path, theme, colorMode],\n  )\n}\n\nexport const getToken =\n  <\n    Y extends number | string = string,\n    M extends keyof OmittedTheme = keyof OmittedTheme,\n  >(\n    name: M,\n    path: number | ThemeTokens[M] | undefined,\n  ) =>\n  (theme: StyledTheme, colorMode?: ColorMode) => {\n    if (name === \"layerStyles\") name = \"styles.layerStyles\" as M\n    if (name === \"textStyles\") name = \"styles.textStyles\" as M\n\n    let value = get<[Y, Y] | undefined | Y>(theme, `${name}.${path}`)\n\n    if (!isUndefined(value)) {\n      if (isArray(value)) {\n        const [lightValue, darkValue] = value\n\n        return colorMode !== \"dark\" ? lightValue : darkValue\n      } else {\n        return value\n      }\n    } else {\n      value = get<[Y, Y] | undefined | Y>(theme, `semantics.${name}.${path}`)\n\n      if (isArray(value)) {\n        value = [\n          get<Y>(theme, `${name}.${value[0]}`, value[0]),\n          get<Y>(theme, `${name}.${value[1]}`, value[1]),\n        ]\n      } else {\n        value = get<undefined | Y>(theme, `${name}.${value}`) ?? value\n      }\n\n      if (isArray(value)) {\n        const [lightValue, darkValue] = value\n\n        value = colorMode !== \"dark\" ? lightValue : darkValue\n\n        if (isArray(value)) {\n          const [lightValue, darkValue] = value as unknown as [Y, Y]\n\n          return colorMode !== \"dark\" ? lightValue : darkValue\n        } else {\n          return value\n        }\n      } else {\n        return value\n      }\n    }\n  }\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,WAAW,CAItBA,MACAC,SACG;CACH,MAAM,EAAE,OAAO,GAAG,UAAU;CAC5B,MAAM,EAAE,WAAW,GAAG,cAAc;AAEpC,QAAO,QACL,MAAM,SAAe,MAAM,KAAK,CAAC,OAAO,UAAU,EAClD;EAAC;EAAM;EAAM;EAAO;CAAU,EAC/B;AACF;AAED,MAAa,WACX,CAIED,MACAC,SAEF,CAACC,OAAoBC,cAA0B;AAC7C,KAAI,SAAS,cAAe,QAAO;AACnC,KAAI,SAAS,aAAc,QAAO;CAElC,IAAI,QAAQ,qCAA4B,UAAU,KAAK,GAAG,OAAO;AAEjE,MAAK,+BAAY,MAAM,CACrB,KAAI,2BAAQ,MAAM,EAAE;EAClB,MAAM,CAAC,YAAY,UAAU,GAAG;AAEhC,SAAO,cAAc,SAAS,aAAa;CAC5C,MACC,QAAO;MAEJ;AACL,UAAQ,qCAA4B,QAAQ,YAAY,KAAK,GAAG,OAAO;AAEvE,MAAI,2BAAQ,MAAM,CAChB,SAAQ,CACN,qCAAO,UAAU,KAAK,GAAG,MAAM,MAAM,MAAM,GAAG,EAC9C,qCAAO,UAAU,KAAK,GAAG,MAAM,MAAM,MAAM,GAAG,AAC/C;MAED,SAAQ,qCAAmB,UAAU,KAAK,GAAG,QAAQ,IAAI;AAG3D,MAAI,2BAAQ,MAAM,EAAE;GAClB,MAAM,CAAC,YAAY,UAAU,GAAG;AAEhC,WAAQ,cAAc,SAAS,aAAa;AAE5C,OAAI,2BAAQ,MAAM,EAAE;IAClB,MAAM,CAACC,cAAYC,YAAU,GAAG;AAEhC,WAAO,cAAc,SAASD,eAAaC;GAC5C,MACC,QAAO;EAEV,MACC,QAAO;CAEV;AACF"}