@xanui/core 1.2.70 → 1.3.0

package/animate/index.js

@@ -0,0 +1,99 @@
+"use client";
+import Easing from './easing.js';
+
+const animate = ({ from, to, duration = 400, delay = 0, easing = Easing.default, onUpdate, onDone, breakpoints, repeat = 0, repeatBack = false, }) => {
+    let rafId;
+    let cycle = 0;
+    let forward = true;
+    // Track triggered breakpoints
+    const triggered = {};
+    const resolve = (val) => typeof val === "function" ? val() : val;
+    const getEased = (key, t) => {
+        if (typeof easing === "function")
+            return easing(t);
+        if (easing[key])
+            return easing[key](t);
+        return t;
+    };
+    const startAnimation = () => {
+        const fromVal = resolve(from);
+        const toVal = resolve(to);
+        const keys = Object.keys(fromVal);
+        if (breakpoints) {
+            for (const key of keys)
+                triggered[key] = new Set();
+        }
+        const start = performance.now();
+        const frame = (now) => {
+            const progress = duration === 0 ? 1 : Math.min((now - start) / duration, 1);
+            const current = {};
+            for (const key of keys) {
+                const f = forward ? fromVal[key] : toVal[key];
+                const t = forward ? toVal[key] : fromVal[key];
+                const eased = getEased(key, progress);
+                const val = f + (t - f) * eased;
+                current[key] = val;
+                // breakpoints
+                const bps = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints[key];
+                if (bps) {
+                    for (let i = 0; i < bps.length; i++) {
+                        const triggeredSet = triggered[key];
+                        if (!triggeredSet.has(i) &&
+                            ((f < t && val >= bps[i].value) ||
+                                (f > t && val <= bps[i].value))) {
+                            triggeredSet.add(i);
+                            bps[i].callback();
+                        }
+                    }
+                }
+            }
+            onUpdate(current, progress);
+            if (progress < 1) {
+                rafId = requestAnimationFrame(frame);
+            }
+            else {
+                const finalState = forward ? toVal : fromVal;
+                onUpdate(finalState, 1);
+                // fire remaining breakpoints
+                if (breakpoints) {
+                    for (const key of keys) {
+                        const bps = breakpoints[key];
+                        if (!bps)
+                            continue;
+                        const triggeredSet = triggered[key];
+                        for (let i = 0; i < bps.length; i++) {
+                            if (!triggeredSet.has(i)) {
+                                triggeredSet.add(i);
+                                bps[i].callback();
+                            }
+                        }
+                    }
+                }
+                cycle++;
+                if (cycle <= repeat) {
+                    if (repeatBack)
+                        forward = !forward;
+                    startAnimation(); // 🔁 re-run with fresh from/to if functions
+                }
+                else {
+                    onDone === null || onDone === void 0 ? void 0 : onDone();
+                }
+            }
+        };
+        rafId = requestAnimationFrame(frame);
+    };
+    if (delay > 0) {
+        const timeout = setTimeout(startAnimation, delay);
+        return () => {
+            clearTimeout(timeout);
+            cancelAnimationFrame(rafId);
+        };
+    }
+    else {
+        startAnimation();
+        return () => cancelAnimationFrame(rafId);
+    }
+};
+
+export { Easing, animate as default };
+//# sourceMappingURL=index.js.map

package/animate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/animate/index.ts"],"sourcesContent":["\"use client\"\nimport Easing from \"./easing\";\n\nexport { Easing };\n\nexport type AnimateOptions<T extends Record<string, number>> = {\n   from: T | (() => T);\n   to: T | (() => T);\n   duration?: number;\n   delay?: number;\n   easing?: ((t: number) => number) | Partial<Record<keyof T, (t: number) => number>>;\n   onUpdate: (value: T, progress: number) => void;\n   onDone?: () => void;\n   breakpoints?: Partial<Record<keyof T, Array<{ value: number; callback: () => void }>>>;\n   repeat?: number;\n   repeatBack?: boolean;\n};\n\nconst animate = <T extends Record<string, number>>({\n   from,\n   to,\n   duration = 400,\n   delay = 0,\n   easing = Easing.default,\n   onUpdate,\n   onDone,\n   breakpoints,\n   repeat = 0,\n   repeatBack = false,\n}: AnimateOptions<T>) => {\n   let rafId: number;\n   let cycle = 0;\n   let forward = true;\n\n   // Track triggered breakpoints\n   const triggered: Partial<Record<keyof T, Set<number>>> = {};\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val;\n\n   const getEased = (key: keyof T, t: number) => {\n      if (typeof easing === \"function\") return easing(t);\n      if (easing[key]) return easing[key]!(t);\n      return t;\n   };\n\n   const startAnimation = () => {\n      const fromVal = resolve(from);\n      const toVal = resolve(to);\n\n      const keys = Object.keys(fromVal) as (keyof T)[];\n\n      if (breakpoints) {\n         for (const key of keys) triggered[key] = new Set();\n      }\n\n      const start = performance.now();\n\n      const frame = (now: number) => {\n         const progress =\n            duration === 0 ? 1 : Math.min((now - start) / duration, 1);\n\n         const current: any = {} as T;\n\n         for (const key of keys) {\n            const f = forward ? fromVal[key] : toVal[key];\n            const t = forward ? toVal[key] : fromVal[key];\n\n            const eased = getEased(key, progress);\n            const val = f + (t - f) * eased;\n            current[key] = val;\n\n            // breakpoints\n            const bps = breakpoints?.[key];\n            if (bps) {\n               for (let i = 0; i < bps.length; i++) {\n                  const triggeredSet = triggered[key]!;\n                  if (\n                     !triggeredSet.has(i) &&\n                     ((f < t && val >= bps[i].value) ||\n                        (f > t && val <= bps[i].value))\n                  ) {\n                     triggeredSet.add(i);\n                     bps[i].callback();\n                  }\n               }\n            }\n         }\n\n         onUpdate(current, progress);\n\n         if (progress < 1) {\n            rafId = requestAnimationFrame(frame);\n         } else {\n            const finalState = forward ? toVal : fromVal;\n            onUpdate(finalState, 1);\n\n            // fire remaining breakpoints\n            if (breakpoints) {\n               for (const key of keys) {\n                  const bps = breakpoints[key];\n                  if (!bps) continue;\n\n                  const triggeredSet = triggered[key]!;\n                  for (let i = 0; i < bps.length; i++) {\n                     if (!triggeredSet.has(i)) {\n                        triggeredSet.add(i);\n                        bps[i].callback();\n                     }\n                  }\n               }\n            }\n\n            cycle++;\n\n            if (cycle <= repeat) {\n               if (repeatBack) forward = !forward;\n               startAnimation(); // 🔁 re-run with fresh from/to if functions\n            } else {\n               onDone?.();\n            }\n         }\n      };\n\n      rafId = requestAnimationFrame(frame);\n   };\n\n   if (delay > 0) {\n      const timeout = setTimeout(startAnimation, delay);\n      return () => {\n         clearTimeout(timeout);\n         cancelAnimationFrame(rafId);\n      };\n   } else {\n      startAnimation();\n      return () => cancelAnimationFrame(rafId);\n   }\n};\n\nexport default animate;"],"names":[],"mappings":";;;AAkBA;AAYG;;;;;;AAUA;;AACqC;;AACjB;AACjB;AACH;;AAGG;AACA;;;;AAK2B;;AAG3B;AAEA;;;AAMG;AACG;AACA;;;AAIA;;;;AAKG;AACG;AACA;AAEG;AACG;AAEH;AACA;;;;;AAMZ;AAEA;AACG;;;;AAGA;;;AAIG;AACG;AACA;;AAEA;AACA;;AAEM;AACA;;;;;AAMZ;AAEA;AACG;;;;;AAGA;;;AAGT;AAEA;AACH;AAEA;;AAEG;;;AAGA;;;AAEA;AACA;;AAEN;;"}

package/hooks/useTransition.cjs

@@ -0,0 +1,98 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var index = require('../animate/index.cjs');
+
+const useTransition = (props) => {
+    const { initialStatus = "exited", onEnter, onEntered, onExit, onExited } = props, options = tslib.__rest(props, ["initialStatus", "onEnter", "onEntered", "onExit", "onExited"]);
+    const resolve = (val) => typeof val === "function" ? val() : val;
+    const [open, setOpen] = React.useState(initialStatus === "entered");
+    const [status, setStatus] = React.useState(initialStatus);
+    const stateRef = React.useRef(null);
+    const readyRef = React.useRef(false);
+    const animating = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const from = resolve(options.from);
+        const to = resolve(options.to);
+        stateRef.current = initialStatus === "entered" ? to : from;
+        readyRef.current = true;
+    }, []);
+    const run = React.useCallback((nextOpen, withAnimation = true) => {
+        var _a, _b, _c, _d;
+        if (!readyRef.current || !stateRef.current)
+            return;
+        (_a = animating.current) === null || _a === void 0 ? void 0 : _a.call(animating);
+        const resolvedFrom = resolve(options.from);
+        const resolvedTo = resolve(options.to);
+        const from = stateRef.current;
+        const to = nextOpen ? resolvedTo : resolvedFrom;
+        if (nextOpen) {
+            setStatus("entering");
+            onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+        }
+        else {
+            setStatus("exiting");
+            onExit === null || onExit === void 0 ? void 0 : onExit();
+        }
+        if (!withAnimation) {
+            stateRef.current = to;
+            (_b = options.onUpdate) === null || _b === void 0 ? void 0 : _b.call(options, to, 1);
+            if (nextOpen) {
+                setStatus("entered");
+                onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+            }
+            else {
+                setStatus("exited");
+                onExited === null || onExited === void 0 ? void 0 : onExited();
+            }
+            (_c = options.onDone) === null || _c === void 0 ? void 0 : _c.call(options);
+            return;
+        }
+        animating.current = index.default(Object.assign(Object.assign({}, options), { from,
+            to, duration: (_d = options.duration) !== null && _d !== void 0 ? _d : 400, onUpdate: (value, progress) => {
+                var _a;
+                stateRef.current = value;
+                (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, value, progress);
+            }, onDone: () => {
+                var _a;
+                if (nextOpen) {
+                    setStatus("entered");
+                    onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+                }
+                else {
+                    setStatus("exited");
+                    onExited === null || onExited === void 0 ? void 0 : onExited();
+                }
+                (_a = options.onDone) === null || _a === void 0 ? void 0 : _a.call(options);
+            } }));
+    }, [options, onEnter, onEntered, onExit, onExited]);
+    const enter = React.useCallback((withAnimation = true) => {
+        setOpen(true);
+        run(true, withAnimation);
+    }, [run]);
+    const exit = React.useCallback((withAnimation = true) => {
+        setOpen(false);
+        run(false, withAnimation);
+    }, [run]);
+    const toggle = React.useCallback((withAnimation = true) => {
+        setOpen((prev) => {
+            const next = !prev;
+            run(next, withAnimation);
+            return next;
+        });
+    }, [run]);
+    return {
+        isEntered: open,
+        status,
+        state: stateRef,
+        enter,
+        exit,
+        toggle,
+        isReady: readyRef.current
+    };
+};
+
+module.exports = useTransition;
+//# sourceMappingURL=useTransition.cjs.map

package/hooks/useTransition.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransition.cjs","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\nimport animate, { AnimateOptions } from \"../animate\"\n\nexport type UseTransitionStatus =\n   | \"entering\"\n   | \"entered\"\n   | \"exiting\"\n   | \"exited\"\n\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\n   initialStatus?: \"entered\" | \"exited\"\n   onEnter?: () => void\n   onEntered?: () => void\n   onExit?: () => void\n   onExited?: () => void\n}\n\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\n   const {\n      initialStatus = \"exited\",\n      onEnter,\n      onEntered,\n      onExit,\n      onExited,\n      ...options\n   } = props\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val\n\n   const [open, setOpen] = useState(initialStatus === \"entered\")\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\n\n   const stateRef = useRef<T | null>(null)\n   const readyRef = useRef(false)\n\n   const animating = useRef<null | (() => void)>(null)\n\n   useLayoutEffect(() => {\n      const from = resolve(options.from)\n      const to = resolve(options.to)\n      stateRef.current = initialStatus === \"entered\" ? to : from\n      readyRef.current = true\n   }, [])\n\n   const run = useCallback(\n      (nextOpen: boolean, withAnimation = true) => {\n         if (!readyRef.current || !stateRef.current) return\n\n         animating.current?.()\n\n         const resolvedFrom = resolve(options.from)\n         const resolvedTo = resolve(options.to)\n         const from = stateRef.current\n         const to = nextOpen ? resolvedTo : resolvedFrom\n\n         if (nextOpen) {\n            setStatus(\"entering\")\n            onEnter?.()\n         } else {\n            setStatus(\"exiting\")\n            onExit?.()\n         }\n\n         if (!withAnimation) {\n            stateRef.current = to\n            options.onUpdate?.(to, 1)\n\n            if (nextOpen) {\n               setStatus(\"entered\")\n               onEntered?.()\n            } else {\n               setStatus(\"exited\")\n               onExited?.()\n            }\n\n            options.onDone?.()\n            return\n         }\n\n         animating.current = animate({\n            ...options,\n            from,\n            to,\n            duration: options.duration ?? 400,\n            onUpdate: (value: T, progress: number) => {\n               stateRef.current = value\n               options.onUpdate?.(value, progress)\n            },\n            onDone: () => {\n               if (nextOpen) {\n                  setStatus(\"entered\")\n                  onEntered?.()\n               } else {\n                  setStatus(\"exited\")\n                  onExited?.()\n               }\n               options.onDone?.()\n            },\n         })\n      },\n      [options, onEnter, onEntered, onExit, onExited]\n   )\n\n   const enter = useCallback((withAnimation = true) => {\n      setOpen(true)\n      run(true, withAnimation)\n   }, [run])\n\n   const exit = useCallback((withAnimation = true) => {\n      setOpen(false)\n      run(false, withAnimation)\n   }, [run])\n\n   const toggle = useCallback((withAnimation = true) => {\n      setOpen((prev) => {\n         const next = !prev\n         run(next, withAnimation)\n         return next\n      })\n   }, [run])\n\n   return {\n      isEntered: open,\n      status,\n      state: stateRef,\n      enter,\n      exit,\n      toggle,\n      isReady: readyRef.current\n   }\n}\n\nexport default useTransition"],"names":[],"mappings":";;;;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;AAGH;;;AAIH;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}

package/hooks/useTransition.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { AnimateOptions } from '../animate/index.js';
+
+type UseTransitionStatus = "entering" | "entered" | "exiting" | "exited";
+type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {
+    initialStatus?: "entered" | "exited";
+    onEnter?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExited?: () => void;
+};
+declare const useTransition: <T extends Record<string, number>>(props: UseTransitionProps<T>) => {
+    isEntered: boolean;
+    status: UseTransitionStatus;
+    state: React.RefObject<T | null>;
+    enter: (withAnimation?: boolean) => void;
+    exit: (withAnimation?: boolean) => void;
+    toggle: (withAnimation?: boolean) => void;
+    isReady: boolean;
+};
+
+export { useTransition as default };
+export type { UseTransitionProps, UseTransitionStatus };

package/hooks/useTransition.js

@@ -0,0 +1,96 @@
+"use client";
+import { __rest } from 'tslib';
+import { useState, useRef, useLayoutEffect, useCallback } from 'react';
+import animate from '../animate/index.js';
+
+const useTransition = (props) => {
+    const { initialStatus = "exited", onEnter, onEntered, onExit, onExited } = props, options = __rest(props, ["initialStatus", "onEnter", "onEntered", "onExit", "onExited"]);
+    const resolve = (val) => typeof val === "function" ? val() : val;
+    const [open, setOpen] = useState(initialStatus === "entered");
+    const [status, setStatus] = useState(initialStatus);
+    const stateRef = useRef(null);
+    const readyRef = useRef(false);
+    const animating = useRef(null);
+    useLayoutEffect(() => {
+        const from = resolve(options.from);
+        const to = resolve(options.to);
+        stateRef.current = initialStatus === "entered" ? to : from;
+        readyRef.current = true;
+    }, []);
+    const run = useCallback((nextOpen, withAnimation = true) => {
+        var _a, _b, _c, _d;
+        if (!readyRef.current || !stateRef.current)
+            return;
+        (_a = animating.current) === null || _a === void 0 ? void 0 : _a.call(animating);
+        const resolvedFrom = resolve(options.from);
+        const resolvedTo = resolve(options.to);
+        const from = stateRef.current;
+        const to = nextOpen ? resolvedTo : resolvedFrom;
+        if (nextOpen) {
+            setStatus("entering");
+            onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+        }
+        else {
+            setStatus("exiting");
+            onExit === null || onExit === void 0 ? void 0 : onExit();
+        }
+        if (!withAnimation) {
+            stateRef.current = to;
+            (_b = options.onUpdate) === null || _b === void 0 ? void 0 : _b.call(options, to, 1);
+            if (nextOpen) {
+                setStatus("entered");
+                onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+            }
+            else {
+                setStatus("exited");
+                onExited === null || onExited === void 0 ? void 0 : onExited();
+            }
+            (_c = options.onDone) === null || _c === void 0 ? void 0 : _c.call(options);
+            return;
+        }
+        animating.current = animate(Object.assign(Object.assign({}, options), { from,
+            to, duration: (_d = options.duration) !== null && _d !== void 0 ? _d : 400, onUpdate: (value, progress) => {
+                var _a;
+                stateRef.current = value;
+                (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, value, progress);
+            }, onDone: () => {
+                var _a;
+                if (nextOpen) {
+                    setStatus("entered");
+                    onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+                }
+                else {
+                    setStatus("exited");
+                    onExited === null || onExited === void 0 ? void 0 : onExited();
+                }
+                (_a = options.onDone) === null || _a === void 0 ? void 0 : _a.call(options);
+            } }));
+    }, [options, onEnter, onEntered, onExit, onExited]);
+    const enter = useCallback((withAnimation = true) => {
+        setOpen(true);
+        run(true, withAnimation);
+    }, [run]);
+    const exit = useCallback((withAnimation = true) => {
+        setOpen(false);
+        run(false, withAnimation);
+    }, [run]);
+    const toggle = useCallback((withAnimation = true) => {
+        setOpen((prev) => {
+            const next = !prev;
+            run(next, withAnimation);
+            return next;
+        });
+    }, [run]);
+    return {
+        isEntered: open,
+        status,
+        state: stateRef,
+        enter,
+        exit,
+        toggle,
+        isReady: readyRef.current
+    };
+};
+
+export { useTransition as default };
+//# sourceMappingURL=useTransition.js.map

package/hooks/useTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransition.js","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\nimport animate, { AnimateOptions } from \"../animate\"\n\nexport type UseTransitionStatus =\n   | \"entering\"\n   | \"entered\"\n   | \"exiting\"\n   | \"exited\"\n\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\n   initialStatus?: \"entered\" | \"exited\"\n   onEnter?: () => void\n   onEntered?: () => void\n   onExit?: () => void\n   onExited?: () => void\n}\n\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\n   const {\n      initialStatus = \"exited\",\n      onEnter,\n      onEntered,\n      onExit,\n      onExited,\n      ...options\n   } = props\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val\n\n   const [open, setOpen] = useState(initialStatus === \"entered\")\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\n\n   const stateRef = useRef<T | null>(null)\n   const readyRef = useRef(false)\n\n   const animating = useRef<null | (() => void)>(null)\n\n   useLayoutEffect(() => {\n      const from = resolve(options.from)\n      const to = resolve(options.to)\n      stateRef.current = initialStatus === \"entered\" ? to : from\n      readyRef.current = true\n   }, [])\n\n   const run = useCallback(\n      (nextOpen: boolean, withAnimation = true) => {\n         if (!readyRef.current || !stateRef.current) return\n\n         animating.current?.()\n\n         const resolvedFrom = resolve(options.from)\n         const resolvedTo = resolve(options.to)\n         const from = stateRef.current\n         const to = nextOpen ? resolvedTo : resolvedFrom\n\n         if (nextOpen) {\n            setStatus(\"entering\")\n            onEnter?.()\n         } else {\n            setStatus(\"exiting\")\n            onExit?.()\n         }\n\n         if (!withAnimation) {\n            stateRef.current = to\n            options.onUpdate?.(to, 1)\n\n            if (nextOpen) {\n               setStatus(\"entered\")\n               onEntered?.()\n            } else {\n               setStatus(\"exited\")\n               onExited?.()\n            }\n\n            options.onDone?.()\n            return\n         }\n\n         animating.current = animate({\n            ...options,\n            from,\n            to,\n            duration: options.duration ?? 400,\n            onUpdate: (value: T, progress: number) => {\n               stateRef.current = value\n               options.onUpdate?.(value, progress)\n            },\n            onDone: () => {\n               if (nextOpen) {\n                  setStatus(\"entered\")\n                  onEntered?.()\n               } else {\n                  setStatus(\"exited\")\n                  onExited?.()\n               }\n               options.onDone?.()\n            },\n         })\n      },\n      [options, onEnter, onEntered, onExit, onExited]\n   )\n\n   const enter = useCallback((withAnimation = true) => {\n      setOpen(true)\n      run(true, withAnimation)\n   }, [run])\n\n   const exit = useCallback((withAnimation = true) => {\n      setOpen(false)\n      run(false, withAnimation)\n   }, [run])\n\n   const toggle = useCallback((withAnimation = true) => {\n      setOpen((prev) => {\n         const next = !prev\n         run(next, withAnimation)\n         return next\n      })\n   }, [run])\n\n   return {\n      isEntered: open,\n      status,\n      state: stateRef,\n      enter,\n      exit,\n      toggle,\n      isReady: readyRef.current\n   }\n}\n\nexport default useTransition"],"names":[],"mappings":";;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;AAGH;;;AAIH;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}

package/hooks/useTransitionGroup.cjs

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var index = require('../animate/index.cjs');
+
+/**
+ * useTransitionGroup - staggered animations for multiple items
+ */
+function useTransitionGroup(options) {
+    // status of each item
+    const [statuses, setStatuses] = React.useState(() => Object.fromEntries(options.items.map((item) => [
+        item.key,
+        options.mountOnEnter ? "exited" : "entered",
+    ])));
+    // refs to cancel per-item animations
+    const animatingRefs = React.useRef({});
+    // track mounted items (for mount/unmount)
+    const [mounted, setMounted] = React.useState(() => Object.fromEntries(options.items.map((item) => [
+        item.key,
+        !options.mountOnEnter,
+    ])));
+    // animate a single item
+    const animateItem = React.useCallback((item, entering, delay = 0) => {
+        var _a, _b;
+        // cancel previous
+        (_b = (_a = animatingRefs.current)[item.key]) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (entering)
+            setStatuses((s) => (Object.assign(Object.assign({}, s), { [item.key]: "entering" })));
+        else
+            setStatuses((s) => (Object.assign(Object.assign({}, s), { [item.key]: "exiting" })));
+        if (entering && options.mountOnEnter) {
+            setMounted((m) => (Object.assign(Object.assign({}, m), { [item.key]: true })));
+        }
+        // start animation after delay
+        const timeout = setTimeout(() => {
+            var _a, _b, _c;
+            if (entering)
+                (_a = options.onEnter) === null || _a === void 0 ? void 0 : _a.call(options, item.key);
+            else
+                (_b = options.onExit) === null || _b === void 0 ? void 0 : _b.call(options, item.key);
+            animatingRefs.current[item.key] = index.default({
+                from: entering ? item.from : item.to,
+                to: entering ? item.to : item.from,
+                duration: (_c = options.duration) !== null && _c !== void 0 ? _c : 400,
+                onUpdate: (value, progress) => { var _a; return (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, value, item.key, progress); },
+                onDone: () => {
+                    var _a, _b;
+                    if (entering) {
+                        setStatuses((s) => (Object.assign(Object.assign({}, s), { [item.key]: "entered" })));
+                        (_a = options.onEntered) === null || _a === void 0 ? void 0 : _a.call(options, item.key);
+                    }
+                    else {
+                        setStatuses((s) => (Object.assign(Object.assign({}, s), { [item.key]: "exited" })));
+                        (_b = options.onExited) === null || _b === void 0 ? void 0 : _b.call(options, item.key);
+                        if (options.unmountOnExit) {
+                            setMounted((m) => (Object.assign(Object.assign({}, m), { [item.key]: false })));
+                        }
+                    }
+                },
+            });
+        }, delay);
+        return () => clearTimeout(timeout);
+    }, [options]);
+    // run staggered animation on array of items
+    const run = React.useCallback((entering) => {
+        options.items.forEach((item, index) => {
+            var _a;
+            const delay = ((_a = options.stagger) !== null && _a !== void 0 ? _a : 100) * index;
+            const status = statuses[item.key];
+            // skip if already animating in same direction
+            if (entering && (status === "entering" || status === "entered"))
+                return;
+            if (!entering && (status === "exiting" || status === "exited"))
+                return;
+            animateItem(item, entering, delay);
+        });
+    }, [options.items, options.stagger, animateItem, statuses]);
+    const enter = React.useCallback(() => run(true), [run]);
+    const exit = React.useCallback(() => run(false), [run]);
+    const toggle = React.useCallback(() => {
+        const anyEntered = Object.values(statuses).some((s) => s === "entering" || s === "entered");
+        run(!anyEntered);
+    }, [run, statuses]);
+    return {
+        statuses,
+        mounted,
+        enter,
+        exit,
+        toggle,
+    };
+}
+
+module.exports = useTransitionGroup;
+//# sourceMappingURL=useTransitionGroup.cjs.map

package/hooks/useTransitionGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionGroup.cjs","sources":["../../src/hooks/useTransitionGroup.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback } from \"react\"\nimport animate from \"../animate\"\nimport { UseTransitionStatus } from \"./useTransition\"\n\nexport type UseTransitionGroupItem<T extends Record<string, number>> = {\n   key: string | number\n   from: T\n   to: T\n}\n\nexport type UseTransitionGroupProps<T extends Record<string, number>> = {\n   items: UseTransitionGroupItem<T>[]\n   duration?: number\n   stagger?: number // delay between items in ms\n   mountOnEnter?: boolean\n   unmountOnExit?: boolean\n   onUpdate?: (value: T, key: string | number, progress: number) => void\n   onEnter?: (key: string | number) => void\n   onEntered?: (key: string | number) => void\n   onExit?: (key: string | number) => void\n   onExited?: (key: string | number) => void\n}\n\n/**\n * useTransitionGroup - staggered animations for multiple items\n */\nfunction useTransitionGroup<T extends Record<string, number>>(\n   options: UseTransitionGroupProps<T>\n) {\n   // status of each item\n   const [statuses, setStatuses] = useState<\n      Record<string | number, UseTransitionStatus>\n   >(\n      () =>\n         Object.fromEntries(\n            options.items.map((item) => [\n               item.key,\n               options.mountOnEnter ? \"exited\" : \"entered\",\n            ])\n         )\n   )\n\n   // refs to cancel per-item animations\n   const animatingRefs = useRef<Record<string | number, (() => void) | null>>({})\n\n   // track mounted items (for mount/unmount)\n   const [mounted, setMounted] = useState<Record<string | number, boolean>>(\n      () =>\n         Object.fromEntries(\n            options.items.map((item) => [\n               item.key,\n               !options.mountOnEnter,\n            ])\n         )\n   )\n\n   // animate a single item\n   const animateItem = useCallback(\n      (item: UseTransitionGroupItem<T>, entering: boolean, delay = 0) => {\n         // cancel previous\n         animatingRefs.current[item.key]?.()\n\n         if (entering) setStatuses((s: any) => ({ ...s, [item.key]: \"entering\" }))\n         else setStatuses((s: any) => ({ ...s, [item.key]: \"exiting\" }))\n\n         if (entering && options.mountOnEnter) {\n            setMounted((m) => ({ ...m, [item.key]: true }))\n         }\n\n         // start animation after delay\n         const timeout = setTimeout(() => {\n            if (entering) options.onEnter?.(item.key)\n            else options.onExit?.(item.key)\n\n            animatingRefs.current[item.key] = animate({\n               from: entering ? item.from : item.to,\n               to: entering ? item.to : item.from,\n               duration: options.duration ?? 400,\n               onUpdate: (value, progress) =>\n                  options.onUpdate?.(value, item.key, progress),\n               onDone: () => {\n                  if (entering) {\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"entered\" }))\n                     options.onEntered?.(item.key)\n                  } else {\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"exited\" }))\n                     options.onExited?.(item.key)\n                     if (options.unmountOnExit) {\n                        setMounted((m) => ({ ...m, [item.key]: false }))\n                     }\n                  }\n               },\n            })\n         }, delay)\n\n         return () => clearTimeout(timeout)\n      },\n      [options]\n   )\n\n   // run staggered animation on array of items\n   const run = useCallback(\n      (entering: boolean) => {\n         options.items.forEach((item, index) => {\n            const delay = (options.stagger ?? 100) * index\n            const status = statuses[item.key]\n\n            // skip if already animating in same direction\n            if (entering && (status === \"entering\" || status === \"entered\")) return\n            if (!entering && (status === \"exiting\" || status === \"exited\")) return\n\n            animateItem(item, entering, delay)\n         })\n      },\n      [options.items, options.stagger, animateItem, statuses]\n   )\n\n   const enter = useCallback(() => run(true), [run])\n   const exit = useCallback(() => run(false), [run])\n   const toggle = useCallback(() => {\n      const anyEntered = Object.values(statuses).some(\n         (s) => s === \"entering\" || s === \"entered\"\n      )\n      run(!anyEntered)\n   }, [run, statuses])\n\n   return {\n      statuses,\n      mounted,\n      enter,\n      exit,\n      toggle,\n   }\n}\n\nexport default useTransitionGroup"],"names":[],"mappings":";;;;;;AAwBA;;AAEG;AACH;;;AAUe;;;;AAOZ;;;AAOY;;;;AAOZ;;;;AAKM;AAAc;;AACT;AAEL;AACG;;;AAIH;;AACG;;;;;AAIG;AACA;AACA;;;;;AAKM;;;;AAGA;;AAEA;AACG;;;;AAIX;;AAGJ;AACH;;AAKH;;;AAGS;;;;;;;AAOA;AACH;AACH;AAIH;AACA;AACA;;AAIG;AACH;;;;;;;;AASH;;"}

package/hooks/useTransitionGroup.d.ts

@@ -0,0 +1,32 @@
+import { UseTransitionStatus } from './useTransition.js';
+
+type UseTransitionGroupItem<T extends Record<string, number>> = {
+    key: string | number;
+    from: T;
+    to: T;
+};
+type UseTransitionGroupProps<T extends Record<string, number>> = {
+    items: UseTransitionGroupItem<T>[];
+    duration?: number;
+    stagger?: number;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    onUpdate?: (value: T, key: string | number, progress: number) => void;
+    onEnter?: (key: string | number) => void;
+    onEntered?: (key: string | number) => void;
+    onExit?: (key: string | number) => void;
+    onExited?: (key: string | number) => void;
+};
+/**
+ * useTransitionGroup - staggered animations for multiple items
+ */
+declare function useTransitionGroup<T extends Record<string, number>>(options: UseTransitionGroupProps<T>): {
+    statuses: Record<string | number, UseTransitionStatus>;
+    mounted: Record<string | number, boolean>;
+    enter: () => void;
+    exit: () => void;
+    toggle: () => void;
+};
+
+export { useTransitionGroup as default };
+export type { UseTransitionGroupItem, UseTransitionGroupProps };

package/hooks/useTransitionGroup.js

@@ -0,0 +1,93 @@
+"use client";
+import { useState, useRef, useCallback } from 'react';
+import animate from '../animate/index.js';
+
+/**
+ * useTransitionGroup - staggered animations for multiple items
+ */
+function useTransitionGroup(options) {
+    // status of each item
+    const [statuses, setStatuses] = useState(() => Object.fromEntries(options.items.map((item) => [
+        item.key,
+        options.mountOnEnter ? "exited" : "entered",
+    ])));
+    // refs to cancel per-item animations
+    const animatingRefs = useRef({});
+    // track mounted items (for mount/unmount)
+    const [mounted, setMounted] = useState(() => Object.fromEntries(options.items.map((item) => [
+        item.key,
+        !options.mountOnEnter,
+    ])));
+    // animate a single item
+    const animateItem = useCallback((item, entering, delay = 0) => {
+        var _a, _b;
+        // cancel previous
+        (_b = (_a = animatingRefs.current)[item.key]) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (entering)
+            setStatuses((s) => (Object.assign(Object.assign({}, s), { [item.key]: "entering" })));
+        else
+            setStatuses((s) => (Object.assign(Object.assign({}, s), { [item.key]: "exiting" })));
+        if (entering && options.mountOnEnter) {
+            setMounted((m) => (Object.assign(Object.assign({}, m), { [item.key]: true })));
+        }
+        // start animation after delay
+        const timeout = setTimeout(() => {
+            var _a, _b, _c;
+            if (entering)
+                (_a = options.onEnter) === null || _a === void 0 ? void 0 : _a.call(options, item.key);
+            else
+                (_b = options.onExit) === null || _b === void 0 ? void 0 : _b.call(options, item.key);
+            animatingRefs.current[item.key] = animate({
+                from: entering ? item.from : item.to,
+                to: entering ? item.to : item.from,
+                duration: (_c = options.duration) !== null && _c !== void 0 ? _c : 400,
+                onUpdate: (value, progress) => { var _a; return (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, value, item.key, progress); },
+                onDone: () => {
+                    var _a, _b;
+                    if (entering) {
+                        setStatuses((s) => (Object.assign(Object.assign({}, s), { [item.key]: "entered" })));
+                        (_a = options.onEntered) === null || _a === void 0 ? void 0 : _a.call(options, item.key);
+                    }
+                    else {
+                        setStatuses((s) => (Object.assign(Object.assign({}, s), { [item.key]: "exited" })));
+                        (_b = options.onExited) === null || _b === void 0 ? void 0 : _b.call(options, item.key);
+                        if (options.unmountOnExit) {
+                            setMounted((m) => (Object.assign(Object.assign({}, m), { [item.key]: false })));
+                        }
+                    }
+                },
+            });
+        }, delay);
+        return () => clearTimeout(timeout);
+    }, [options]);
+    // run staggered animation on array of items
+    const run = useCallback((entering) => {
+        options.items.forEach((item, index) => {
+            var _a;
+            const delay = ((_a = options.stagger) !== null && _a !== void 0 ? _a : 100) * index;
+            const status = statuses[item.key];
+            // skip if already animating in same direction
+            if (entering && (status === "entering" || status === "entered"))
+                return;
+            if (!entering && (status === "exiting" || status === "exited"))
+                return;
+            animateItem(item, entering, delay);
+        });
+    }, [options.items, options.stagger, animateItem, statuses]);
+    const enter = useCallback(() => run(true), [run]);
+    const exit = useCallback(() => run(false), [run]);
+    const toggle = useCallback(() => {
+        const anyEntered = Object.values(statuses).some((s) => s === "entering" || s === "entered");
+        run(!anyEntered);
+    }, [run, statuses]);
+    return {
+        statuses,
+        mounted,
+        enter,
+        exit,
+        toggle,
+    };
+}
+
+export { useTransitionGroup as default };
+//# sourceMappingURL=useTransitionGroup.js.map

package/hooks/useTransitionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionGroup.js","sources":["../../src/hooks/useTransitionGroup.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback } from \"react\"\nimport animate from \"../animate\"\nimport { UseTransitionStatus } from \"./useTransition\"\n\nexport type UseTransitionGroupItem<T extends Record<string, number>> = {\n   key: string | number\n   from: T\n   to: T\n}\n\nexport type UseTransitionGroupProps<T extends Record<string, number>> = {\n   items: UseTransitionGroupItem<T>[]\n   duration?: number\n   stagger?: number // delay between items in ms\n   mountOnEnter?: boolean\n   unmountOnExit?: boolean\n   onUpdate?: (value: T, key: string | number, progress: number) => void\n   onEnter?: (key: string | number) => void\n   onEntered?: (key: string | number) => void\n   onExit?: (key: string | number) => void\n   onExited?: (key: string | number) => void\n}\n\n/**\n * useTransitionGroup - staggered animations for multiple items\n */\nfunction useTransitionGroup<T extends Record<string, number>>(\n   options: UseTransitionGroupProps<T>\n) {\n   // status of each item\n   const [statuses, setStatuses] = useState<\n      Record<string | number, UseTransitionStatus>\n   >(\n      () =>\n         Object.fromEntries(\n            options.items.map((item) => [\n               item.key,\n               options.mountOnEnter ? \"exited\" : \"entered\",\n            ])\n         )\n   )\n\n   // refs to cancel per-item animations\n   const animatingRefs = useRef<Record<string | number, (() => void) | null>>({})\n\n   // track mounted items (for mount/unmount)\n   const [mounted, setMounted] = useState<Record<string | number, boolean>>(\n      () =>\n         Object.fromEntries(\n            options.items.map((item) => [\n               item.key,\n               !options.mountOnEnter,\n            ])\n         )\n   )\n\n   // animate a single item\n   const animateItem = useCallback(\n      (item: UseTransitionGroupItem<T>, entering: boolean, delay = 0) => {\n         // cancel previous\n         animatingRefs.current[item.key]?.()\n\n         if (entering) setStatuses((s: any) => ({ ...s, [item.key]: \"entering\" }))\n         else setStatuses((s: any) => ({ ...s, [item.key]: \"exiting\" }))\n\n         if (entering && options.mountOnEnter) {\n            setMounted((m) => ({ ...m, [item.key]: true }))\n         }\n\n         // start animation after delay\n         const timeout = setTimeout(() => {\n            if (entering) options.onEnter?.(item.key)\n            else options.onExit?.(item.key)\n\n            animatingRefs.current[item.key] = animate({\n               from: entering ? item.from : item.to,\n               to: entering ? item.to : item.from,\n               duration: options.duration ?? 400,\n               onUpdate: (value, progress) =>\n                  options.onUpdate?.(value, item.key, progress),\n               onDone: () => {\n                  if (entering) {\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"entered\" }))\n                     options.onEntered?.(item.key)\n                  } else {\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"exited\" }))\n                     options.onExited?.(item.key)\n                     if (options.unmountOnExit) {\n                        setMounted((m) => ({ ...m, [item.key]: false }))\n                     }\n                  }\n               },\n            })\n         }, delay)\n\n         return () => clearTimeout(timeout)\n      },\n      [options]\n   )\n\n   // run staggered animation on array of items\n   const run = useCallback(\n      (entering: boolean) => {\n         options.items.forEach((item, index) => {\n            const delay = (options.stagger ?? 100) * index\n            const status = statuses[item.key]\n\n            // skip if already animating in same direction\n            if (entering && (status === \"entering\" || status === \"entered\")) return\n            if (!entering && (status === \"exiting\" || status === \"exited\")) return\n\n            animateItem(item, entering, delay)\n         })\n      },\n      [options.items, options.stagger, animateItem, statuses]\n   )\n\n   const enter = useCallback(() => run(true), [run])\n   const exit = useCallback(() => run(false), [run])\n   const toggle = useCallback(() => {\n      const anyEntered = Object.values(statuses).some(\n         (s) => s === \"entering\" || s === \"entered\"\n      )\n      run(!anyEntered)\n   }, [run, statuses])\n\n   return {\n      statuses,\n      mounted,\n      enter,\n      exit,\n      toggle,\n   }\n}\n\nexport default useTransitionGroup"],"names":[],"mappings":";;;;AAwBA;;AAEG;AACH;;;AAUe;;;;AAOZ;;;AAOY;;;;AAOZ;;;;AAKM;AAAc;;AACT;AAEL;AACG;;;AAIH;;AACG;;;;;AAIG;AACA;AACA;;;;;AAKM;;;;AAGA;;AAEA;AACG;;;;AAIX;;AAGJ;AACH;;AAKH;;;AAGS;;;;;;;AAOA;AACH;AACH;AAIH;AACA;AACA;;AAIG;AACH;;;;;;;;AASH;;"}