@windrun-huaiin/third-ui 29.2.0 → 30.0.0

package/dist/main/anime/anime-beam-frame.js

@@ -0,0 +1,63 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var animejs = require('animejs');
+var react = require('motion/react');
+var beamFrameConfig = require('../beam-frame-config.js');
+
+function AnimeBeamLayer({ isRunning, duration, radius, size, }) {
+    const aroundBeamRef = React.useRef(null);
+    const animationRef = React.useRef(null);
+    const hasStartedRef = React.useRef(false);
+    const auraGradientId = React.useId().replace(/:/g, '');
+    const softGlowFilterId = React.useId().replace(/:/g, '');
+    React.useEffect(() => {
+        var _a;
+        const node = aroundBeamRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (animationRef.current) {
+            animationRef.current.speed = beamFrameConfig.BASE_DURATION_SECONDS / duration;
+            animationRef.current.play();
+            return undefined;
+        }
+        animationRef.current = animejs.waapi.animate(node, {
+            strokeDashoffset: [0, -1],
+            loop: true,
+            duration: beamFrameConfig.BASE_DURATION_SECONDS * 1000,
+            ease: 'linear',
+        });
+        animationRef.current.speed = beamFrameConfig.BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, []);
+    return (jsxRuntime.jsx(beamFrameConfig.BeamSvgLayer, { beamRef: aroundBeamRef, auraGradientId: auraGradientId, softGlowFilterId: softGlowFilterId, radius: radius, size: size }));
+}
+function AnimeBeamFrame(props) {
+    const { children, active = false, interactive = true, tone = 'theme', duration = beamFrameConfig.BASE_DURATION_SECONDS, radius, className, } = props;
+    const prefersReducedMotion = react.useReducedMotion();
+    const { isRunning, interactionProps } = beamFrameConfig.useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = beamFrameConfig.normalizeDuration(duration);
+    const { ref, size } = beamFrameConfig.useMeasuredFrameSize();
+    return (jsxRuntime.jsx(beamFrameConfig.BeamFrameShell, { active: active, interactive: interactive, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsxRuntime.jsx(AnimeBeamLayer, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+
+exports.AnimeBeamFrame = AnimeBeamFrame;

package/dist/main/anime/anime-beam-frame.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useId, useEffect } from 'react';
+import { waapi } from 'animejs';
+import { useReducedMotion } from 'motion/react';
+import { BASE_DURATION_SECONDS, useInteractiveRunning, useMeasuredFrameSize, BeamFrameShell, normalizeDuration, BeamSvgLayer } from '../beam-frame-config.mjs';
+
+function AnimeBeamLayer({ isRunning, duration, radius, size, }) {
+    const aroundBeamRef = useRef(null);
+    const animationRef = useRef(null);
+    const hasStartedRef = useRef(false);
+    const auraGradientId = useId().replace(/:/g, '');
+    const softGlowFilterId = useId().replace(/:/g, '');
+    useEffect(() => {
+        var _a;
+        const node = aroundBeamRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (animationRef.current) {
+            animationRef.current.speed = BASE_DURATION_SECONDS / duration;
+            animationRef.current.play();
+            return undefined;
+        }
+        animationRef.current = waapi.animate(node, {
+            strokeDashoffset: [0, -1],
+            loop: true,
+            duration: BASE_DURATION_SECONDS * 1000,
+            ease: 'linear',
+        });
+        animationRef.current.speed = BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, []);
+    return (jsx(BeamSvgLayer, { beamRef: aroundBeamRef, auraGradientId: auraGradientId, softGlowFilterId: softGlowFilterId, radius: radius, size: size }));
+}
+function AnimeBeamFrame(props) {
+    const { children, active = false, interactive = true, tone = 'theme', duration = BASE_DURATION_SECONDS, radius, className, } = props;
+    const prefersReducedMotion = useReducedMotion();
+    const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = normalizeDuration(duration);
+    const { ref, size } = useMeasuredFrameSize();
+    return (jsx(BeamFrameShell, { active: active, interactive: interactive, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsx(AnimeBeamLayer, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+
+export { AnimeBeamFrame };

package/dist/main/anime/anime-spiral-loading.d.ts

@@ -0,0 +1,10 @@
+export interface AnimeSpiralLoadingProps {
+    className?: string;
+    dotCount?: number;
+    duration?: number;
+    distanceRem?: number;
+    dotSizeEm?: number;
+    fontSize?: number;
+    paused?: boolean;
+}
+export declare function AnimeSpiralLoading({ className, dotCount, duration, distanceRem, dotSizeEm, fontSize, paused, }: AnimeSpiralLoadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/anime/anime-spiral-loading.js

@@ -0,0 +1,77 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var animejs = require('animejs');
+var utils = require('@windrun-huaiin/lib/utils');
+
+const DEFAULT_DOT_COUNT = 2024;
+const DEFAULT_DURATION = 10000;
+const DEFAULT_DISTANCE_REM = 20;
+const DEFAULT_DOT_SIZE_EM = 1;
+const DEFAULT_FONT_SIZE = 20;
+function AnimeSpiralLoading({ className, dotCount = DEFAULT_DOT_COUNT, duration = DEFAULT_DURATION, distanceRem = DEFAULT_DISTANCE_REM, dotSizeEm = DEFAULT_DOT_SIZE_EM, fontSize = DEFAULT_FONT_SIZE, paused = false, }) {
+    const rootRef = React.useRef(null);
+    const timelineRef = React.useRef(null);
+    const pausedRef = React.useRef(paused);
+    const safeDotCount = Math.max(1, Math.floor(dotCount));
+    const safeDuration = Math.max(1, duration);
+    const angle = React.useMemo(() => (index) => animejs.utils.mapRange(index, 0, safeDotCount, 0, Math.PI * 100), [safeDotCount]);
+    const dots = React.useMemo(() => Array.from({ length: safeDotCount }, (_, index) => {
+        const hue = animejs.utils.round((360 / safeDotCount) * index, 0);
+        return {
+            id: index,
+            background: `hsl(${hue}, 60%, 60%)`,
+        };
+    }), [safeDotCount]);
+    pausedRef.current = paused;
+    React.useEffect(() => {
+        var _a;
+        const root = rootRef.current;
+        if (!root) {
+            return undefined;
+        }
+        const dotNodes = Array.from(root.querySelectorAll('[data-anime-spiral-dot]'));
+        (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        timelineRef.current = animejs.createTimeline()
+            .add(dotNodes, {
+            x: (_target, i) => `${Math.sin(angle(i)) * distanceRem}rem`,
+            y: (_target, i) => `${Math.cos(angle(i)) * distanceRem}rem`,
+            scale: [0, 0.4, 0.2, 0.9, 0],
+            playbackEase: 'inOutSine',
+            loop: true,
+            duration: safeDuration,
+        }, animejs.stagger([0, safeDuration]))
+            .init()
+            .seek(safeDuration);
+        if (pausedRef.current) {
+            timelineRef.current.pause();
+        }
+        return () => {
+            var _a;
+            (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            timelineRef.current = null;
+        };
+    }, [angle, distanceRem, safeDuration, dots]);
+    React.useEffect(() => {
+        const timeline = timelineRef.current;
+        if (!timeline) {
+            return;
+        }
+        if (paused) {
+            timeline.pause();
+        }
+        else {
+            timeline.play();
+        }
+    }, [paused]);
+    return (jsxRuntime.jsx("div", { ref: rootRef, className: utils.cn('relative h-dvh w-full overflow-hidden', className), style: { fontSize }, "aria-hidden": "true", children: dots.map(dot => (jsxRuntime.jsx("div", { "data-anime-spiral-dot": "", className: "absolute left-1/2 top-1/2 rounded-full", style: {
+                width: `${dotSizeEm}em`,
+                height: `${dotSizeEm}em`,
+                margin: `${dotSizeEm / -2}em 0 0 ${dotSizeEm / -2}em`,
+                backgroundColor: dot.background,
+            } }, dot.id))) }));
+}
+
+exports.AnimeSpiralLoading = AnimeSpiralLoading;

package/dist/main/anime/anime-spiral-loading.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import { utils, createTimeline, stagger } from 'animejs';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+const DEFAULT_DOT_COUNT = 2024;
+const DEFAULT_DURATION = 10000;
+const DEFAULT_DISTANCE_REM = 20;
+const DEFAULT_DOT_SIZE_EM = 1;
+const DEFAULT_FONT_SIZE = 20;
+function AnimeSpiralLoading({ className, dotCount = DEFAULT_DOT_COUNT, duration = DEFAULT_DURATION, distanceRem = DEFAULT_DISTANCE_REM, dotSizeEm = DEFAULT_DOT_SIZE_EM, fontSize = DEFAULT_FONT_SIZE, paused = false, }) {
+    const rootRef = useRef(null);
+    const timelineRef = useRef(null);
+    const pausedRef = useRef(paused);
+    const safeDotCount = Math.max(1, Math.floor(dotCount));
+    const safeDuration = Math.max(1, duration);
+    const angle = useMemo(() => (index) => utils.mapRange(index, 0, safeDotCount, 0, Math.PI * 100), [safeDotCount]);
+    const dots = useMemo(() => Array.from({ length: safeDotCount }, (_, index) => {
+        const hue = utils.round((360 / safeDotCount) * index, 0);
+        return {
+            id: index,
+            background: `hsl(${hue}, 60%, 60%)`,
+        };
+    }), [safeDotCount]);
+    pausedRef.current = paused;
+    useEffect(() => {
+        var _a;
+        const root = rootRef.current;
+        if (!root) {
+            return undefined;
+        }
+        const dotNodes = Array.from(root.querySelectorAll('[data-anime-spiral-dot]'));
+        (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        timelineRef.current = createTimeline()
+            .add(dotNodes, {
+            x: (_target, i) => `${Math.sin(angle(i)) * distanceRem}rem`,
+            y: (_target, i) => `${Math.cos(angle(i)) * distanceRem}rem`,
+            scale: [0, 0.4, 0.2, 0.9, 0],
+            playbackEase: 'inOutSine',
+            loop: true,
+            duration: safeDuration,
+        }, stagger([0, safeDuration]))
+            .init()
+            .seek(safeDuration);
+        if (pausedRef.current) {
+            timelineRef.current.pause();
+        }
+        return () => {
+            var _a;
+            (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            timelineRef.current = null;
+        };
+    }, [angle, distanceRem, safeDuration, dots]);
+    useEffect(() => {
+        const timeline = timelineRef.current;
+        if (!timeline) {
+            return;
+        }
+        if (paused) {
+            timeline.pause();
+        }
+        else {
+            timeline.play();
+        }
+    }, [paused]);
+    return (jsx("div", { ref: rootRef, className: cn('relative h-dvh w-full overflow-hidden', className), style: { fontSize }, "aria-hidden": "true", children: dots.map(dot => (jsx("div", { "data-anime-spiral-dot": "", className: "absolute left-1/2 top-1/2 rounded-full", style: {
+                width: `${dotSizeEm}em`,
+                height: `${dotSizeEm}em`,
+                margin: `${dotSizeEm / -2}em 0 0 ${dotSizeEm / -2}em`,
+                backgroundColor: dot.background,
+            } }, dot.id))) }));
+}
+
+export { AnimeSpiralLoading };

package/dist/main/anime/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimeBeamFrame, type BeamFrameProps, type BeamFrameTone, } from './anime-beam-frame';
+export { AnimeSpiralLoading, type AnimeSpiralLoadingProps } from './anime-spiral-loading';

package/dist/main/anime/index.js

@@ -0,0 +1,10 @@
+"use client";
+'use strict';
+
+var animeBeamFrame = require('./anime-beam-frame.js');
+var animeSpiralLoading = require('./anime-spiral-loading.js');
+
+
+
+exports.AnimeBeamFrame = animeBeamFrame.AnimeBeamFrame;
+exports.AnimeSpiralLoading = animeSpiralLoading.AnimeSpiralLoading;

package/dist/main/anime/index.mjs

@@ -0,0 +1,3 @@
+"use client";
+export { AnimeBeamFrame } from './anime-beam-frame.mjs';
+export { AnimeSpiralLoading } from './anime-spiral-loading.mjs';

package/dist/main/beam-frame/animate.d.ts

@@ -0,0 +1,3 @@
+import { type BeamFrameProps } from './share-config';
+export type { BeamFrameProps, BeamFrameTone } from './share-config';
+export declare function AnimeBeamFrame(props: BeamFrameProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/beam-frame/animate.js

@@ -0,0 +1,63 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var animejs = require('animejs');
+var react = require('motion/react');
+var shareConfig = require('./share-config.js');
+
+function AnimeBeamLayer({ isRunning, duration, radius, size, }) {
+    const aroundBeamRef = React.useRef(null);
+    const animationRef = React.useRef(null);
+    const hasStartedRef = React.useRef(false);
+    const auraGradientId = React.useId().replace(/:/g, '');
+    const softGlowFilterId = React.useId().replace(/:/g, '');
+    React.useEffect(() => {
+        var _a;
+        const node = aroundBeamRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (animationRef.current) {
+            animationRef.current.speed = shareConfig.BASE_DURATION_SECONDS / duration;
+            animationRef.current.play();
+            return undefined;
+        }
+        animationRef.current = animejs.waapi.animate(node, {
+            strokeDashoffset: [0, -1],
+            loop: true,
+            duration: shareConfig.BASE_DURATION_SECONDS * 1000,
+            ease: 'linear',
+        });
+        animationRef.current.speed = shareConfig.BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, []);
+    return (jsxRuntime.jsx(shareConfig.BeamSvgLayer, { beamRef: aroundBeamRef, auraGradientId: auraGradientId, softGlowFilterId: softGlowFilterId, radius: radius, size: size }));
+}
+function AnimeBeamFrame(props) {
+    const { children, active = false, interactive = true, tone = 'theme', duration = shareConfig.BASE_DURATION_SECONDS, radius, className, } = props;
+    const prefersReducedMotion = react.useReducedMotion();
+    const { isRunning, interactionProps } = shareConfig.useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = shareConfig.normalizeDuration(duration);
+    const { ref, size } = shareConfig.useMeasuredFrameSize();
+    return (jsxRuntime.jsx(shareConfig.BeamFrameShell, { active: active, interactive: interactive, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsxRuntime.jsx(AnimeBeamLayer, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+
+exports.AnimeBeamFrame = AnimeBeamFrame;

package/dist/main/beam-frame/animate.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useId, useEffect } from 'react';
+import { waapi } from 'animejs';
+import { useReducedMotion } from 'motion/react';
+import { BASE_DURATION_SECONDS, useInteractiveRunning, useMeasuredFrameSize, BeamFrameShell, normalizeDuration, BeamSvgLayer } from './share-config.mjs';
+
+function AnimeBeamLayer({ isRunning, duration, radius, size, }) {
+    const aroundBeamRef = useRef(null);
+    const animationRef = useRef(null);
+    const hasStartedRef = useRef(false);
+    const auraGradientId = useId().replace(/:/g, '');
+    const softGlowFilterId = useId().replace(/:/g, '');
+    useEffect(() => {
+        var _a;
+        const node = aroundBeamRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (animationRef.current) {
+            animationRef.current.speed = BASE_DURATION_SECONDS / duration;
+            animationRef.current.play();
+            return undefined;
+        }
+        animationRef.current = waapi.animate(node, {
+            strokeDashoffset: [0, -1],
+            loop: true,
+            duration: BASE_DURATION_SECONDS * 1000,
+            ease: 'linear',
+        });
+        animationRef.current.speed = BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, []);
+    return (jsx(BeamSvgLayer, { beamRef: aroundBeamRef, auraGradientId: auraGradientId, softGlowFilterId: softGlowFilterId, radius: radius, size: size }));
+}
+function AnimeBeamFrame(props) {
+    const { children, active = false, interactive = true, tone = 'theme', duration = BASE_DURATION_SECONDS, radius, className, } = props;
+    const prefersReducedMotion = useReducedMotion();
+    const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = normalizeDuration(duration);
+    const { ref, size } = useMeasuredFrameSize();
+    return (jsx(BeamFrameShell, { active: active, interactive: interactive, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsx(AnimeBeamLayer, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+
+export { AnimeBeamFrame };

package/dist/main/beam-frame/beam-frame.d.ts

@@ -0,0 +1,4 @@
+export { AnimeBeamFrame } from './animate';
+export { MotionBeamFrame } from './motion';
+export { MotionBeamFrame as BeamFrame } from './motion';
+export type { BeamFrameProps, BeamFrameTone } from './share-config';