@windrun-huaiin/third-ui 29.2.1 → 30.1.0

package/dist/main/info-tooltip.js

@@ -3,21 +3,69 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var reactDom = require('react-dom');
 var icons = require('@windrun-huaiin/base-ui/icons');
 var lib = require('@windrun-huaiin/base-ui/lib');
 var utils = require('@windrun-huaiin/lib/utils');
 
+const TOOLTIP_MARGIN = 12;
+const TOOLTIP_GAP = 8;
+const TOOLTIP_MAX_WIDTH = 288;
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function getTooltipPosition(target, align, desktopSide) {
+    const rect = target.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const maxWidth = Math.min(TOOLTIP_MAX_WIDTH, Math.max(160, viewportWidth - TOOLTIP_MARGIN * 2));
+    const useInlineSide = desktopSide === 'right' && viewportWidth >= 768;
+    if (useInlineSide) {
+        const rightSpace = viewportWidth - rect.right - TOOLTIP_GAP - TOOLTIP_MARGIN;
+        const leftSpace = rect.left - TOOLTIP_GAP - TOOLTIP_MARGIN;
+        const placeRight = rightSpace >= Math.min(220, maxWidth) || rightSpace >= leftSpace;
+        const preferredLeft = placeRight
+            ? rect.right + TOOLTIP_GAP
+            : rect.left - maxWidth - TOOLTIP_GAP;
+        return {
+            left: clamp(preferredLeft, TOOLTIP_MARGIN, viewportWidth - maxWidth - TOOLTIP_MARGIN),
+            top: clamp(rect.top + rect.height / 2, TOOLTIP_MARGIN + 40, viewportHeight - TOOLTIP_MARGIN - 40),
+            maxWidth,
+            side: 'inline',
+        };
+    }
+    const preferredLeft = align === 'start'
+        ? rect.left
+        : rect.right - maxWidth;
+    return {
+        left: clamp(preferredLeft, TOOLTIP_MARGIN, viewportWidth - maxWidth - TOOLTIP_MARGIN),
+        top: Math.min(rect.bottom + TOOLTIP_GAP, viewportHeight - TOOLTIP_MARGIN),
+        maxWidth,
+        side: 'bottom',
+    };
+}
 function InfoTooltip({ content, className, align = 'end', desktopSide = 'right', }) {
     const normalizedContent = content.trim();
     const containerRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
     const [open, setOpen] = React.useState(false);
+    const [position, setPosition] = React.useState(null);
+    const updatePosition = () => {
+        if (!containerRef.current) {
+            return;
+        }
+        setPosition(getTooltipPosition(containerRef.current, align, desktopSide));
+    };
     React.useEffect(() => {
         function handlePointerDown(event) {
+            var _a;
             if (!containerRef.current) {
                 return;
             }
             const target = event.target;
-            if (target instanceof Node && !containerRef.current.contains(target)) {
+            if (target instanceof Node &&
+                !containerRef.current.contains(target) &&
+                !((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
                 setOpen(false);
             }
         }
@@ -28,21 +76,34 @@ function InfoTooltip({ content, className, align = 'end', desktopSide = 'right',
             document.removeEventListener('touchstart', handlePointerDown);
         };
     }, []);
+    React.useEffect(() => {
+        if (!open) {
+            setPosition(null);
+            return;
+        }
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [align, desktopSide, open]);
     if (!normalizedContent) {
         return null;
     }
-    return (jsxRuntime.jsxs("span", { ref: containerRef, className: utils.cn('relative inline-flex h-5 w-5 shrink-0 align-middle', className), onMouseLeave: () => setOpen(false), children: [jsxRuntime.jsx("button", { type: "button", onMouseEnter: () => setOpen(true), onPointerDown: (event) => {
+    return (jsxRuntime.jsxs("span", { ref: containerRef, className: utils.cn('inline-flex h-5 w-5 shrink-0 align-middle', className), onMouseLeave: () => setOpen(false), children: [jsxRuntime.jsx("button", { type: "button", onMouseEnter: () => setOpen(true), onPointerDown: (event) => {
                     event.stopPropagation();
                 }, onClick: (event) => {
                     event.stopPropagation();
                     setOpen((value) => !value);
-                }, className: utils.cn('inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 transition', 'hover:bg-black/5 hover:dark:bg-white/5', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-950', 'hover:text-slate-700 dark:hover:text-white focus-visible:text-slate-700 dark:focus-visible:text-white', lib.themeIconColor, lib.themeRingColor), "aria-label": normalizedContent, "aria-expanded": open, children: jsxRuntime.jsx(icons.CircleQuestionMarkIcon, { className: "h-4 w-4" }) }), jsxRuntime.jsx("span", { className: utils.cn('pointer-events-none absolute top-full z-50 mt-2 w-[min(18rem,calc(100vw-2rem))] rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300', align === 'start' ? 'left-0 right-auto' : 'right-0 left-auto', desktopSide === 'right'
-                    ? align === 'start'
-                        ? 'sm:left-0 sm:right-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
-                        : 'sm:right-0 sm:left-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
-                    : align === 'start'
-                        ? 'md:left-0 md:right-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0'
-                        : 'md:right-0 md:left-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0', open ? 'block' : 'hidden', lib.themeBorderColor), role: "tooltip", children: normalizedContent })] }));
+                }, className: utils.cn('inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 transition', 'hover:bg-black/5 hover:dark:bg-white/5', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-950', 'hover:text-slate-700 dark:hover:text-white focus-visible:text-slate-700 dark:focus-visible:text-white', lib.themeIconColor, lib.themeRingColor), "aria-label": normalizedContent, "aria-expanded": open, children: jsxRuntime.jsx(icons.CircleQuestionMarkIcon, { className: "h-4 w-4" }) }), open && position
+                ? reactDom.createPortal(jsxRuntime.jsx("span", { ref: tooltipRef, className: utils.cn('pointer-events-none fixed z-50 max-h-[calc(100vh-1.5rem)] overflow-y-auto rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300', position.side === 'inline' && '-translate-y-1/2', lib.themeBorderColor), style: {
+                        left: position.left,
+                        top: position.top,
+                        width: position.maxWidth,
+                    }, role: "tooltip", children: normalizedContent }), document.body)
+                : null] }));
 }
 
 exports.InfoTooltip = InfoTooltip;

package/dist/main/info-tooltip.mjs

@@ -1,21 +1,69 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { CircleQuestionMarkIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeIconColor, themeRingColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 
+const TOOLTIP_MARGIN = 12;
+const TOOLTIP_GAP = 8;
+const TOOLTIP_MAX_WIDTH = 288;
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function getTooltipPosition(target, align, desktopSide) {
+    const rect = target.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const maxWidth = Math.min(TOOLTIP_MAX_WIDTH, Math.max(160, viewportWidth - TOOLTIP_MARGIN * 2));
+    const useInlineSide = desktopSide === 'right' && viewportWidth >= 768;
+    if (useInlineSide) {
+        const rightSpace = viewportWidth - rect.right - TOOLTIP_GAP - TOOLTIP_MARGIN;
+        const leftSpace = rect.left - TOOLTIP_GAP - TOOLTIP_MARGIN;
+        const placeRight = rightSpace >= Math.min(220, maxWidth) || rightSpace >= leftSpace;
+        const preferredLeft = placeRight
+            ? rect.right + TOOLTIP_GAP
+            : rect.left - maxWidth - TOOLTIP_GAP;
+        return {
+            left: clamp(preferredLeft, TOOLTIP_MARGIN, viewportWidth - maxWidth - TOOLTIP_MARGIN),
+            top: clamp(rect.top + rect.height / 2, TOOLTIP_MARGIN + 40, viewportHeight - TOOLTIP_MARGIN - 40),
+            maxWidth,
+            side: 'inline',
+        };
+    }
+    const preferredLeft = align === 'start'
+        ? rect.left
+        : rect.right - maxWidth;
+    return {
+        left: clamp(preferredLeft, TOOLTIP_MARGIN, viewportWidth - maxWidth - TOOLTIP_MARGIN),
+        top: Math.min(rect.bottom + TOOLTIP_GAP, viewportHeight - TOOLTIP_MARGIN),
+        maxWidth,
+        side: 'bottom',
+    };
+}
 function InfoTooltip({ content, className, align = 'end', desktopSide = 'right', }) {
     const normalizedContent = content.trim();
     const containerRef = useRef(null);
+    const tooltipRef = useRef(null);
     const [open, setOpen] = useState(false);
+    const [position, setPosition] = useState(null);
+    const updatePosition = () => {
+        if (!containerRef.current) {
+            return;
+        }
+        setPosition(getTooltipPosition(containerRef.current, align, desktopSide));
+    };
     useEffect(() => {
         function handlePointerDown(event) {
+            var _a;
             if (!containerRef.current) {
                 return;
             }
             const target = event.target;
-            if (target instanceof Node && !containerRef.current.contains(target)) {
+            if (target instanceof Node &&
+                !containerRef.current.contains(target) &&
+                !((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
                 setOpen(false);
             }
         }
@@ -26,21 +74,34 @@ function InfoTooltip({ content, className, align = 'end', desktopSide = 'right',
             document.removeEventListener('touchstart', handlePointerDown);
         };
     }, []);
+    useEffect(() => {
+        if (!open) {
+            setPosition(null);
+            return;
+        }
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [align, desktopSide, open]);
     if (!normalizedContent) {
         return null;
     }
-    return (jsxs("span", { ref: containerRef, className: cn('relative inline-flex h-5 w-5 shrink-0 align-middle', className), onMouseLeave: () => setOpen(false), children: [jsx("button", { type: "button", onMouseEnter: () => setOpen(true), onPointerDown: (event) => {
+    return (jsxs("span", { ref: containerRef, className: cn('inline-flex h-5 w-5 shrink-0 align-middle', className), onMouseLeave: () => setOpen(false), children: [jsx("button", { type: "button", onMouseEnter: () => setOpen(true), onPointerDown: (event) => {
                     event.stopPropagation();
                 }, onClick: (event) => {
                     event.stopPropagation();
                     setOpen((value) => !value);
-                }, className: cn('inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 transition', 'hover:bg-black/5 hover:dark:bg-white/5', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-950', 'hover:text-slate-700 dark:hover:text-white focus-visible:text-slate-700 dark:focus-visible:text-white', themeIconColor, themeRingColor), "aria-label": normalizedContent, "aria-expanded": open, children: jsx(CircleQuestionMarkIcon, { className: "h-4 w-4" }) }), jsx("span", { className: cn('pointer-events-none absolute top-full z-50 mt-2 w-[min(18rem,calc(100vw-2rem))] rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300', align === 'start' ? 'left-0 right-auto' : 'right-0 left-auto', desktopSide === 'right'
-                    ? align === 'start'
-                        ? 'sm:left-0 sm:right-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
-                        : 'sm:right-0 sm:left-auto md:left-full md:right-auto md:top-1/2 md:mt-0 md:ml-2 md:-translate-y-1/2'
-                    : align === 'start'
-                        ? 'md:left-0 md:right-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0'
-                        : 'md:right-0 md:left-auto md:top-full md:mt-2 md:ml-0 md:translate-y-0', open ? 'block' : 'hidden', themeBorderColor), role: "tooltip", children: normalizedContent })] }));
+                }, className: cn('inline-flex h-5 w-5 items-center justify-center rounded-full text-slate-400 transition', 'hover:bg-black/5 hover:dark:bg-white/5', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-950', 'hover:text-slate-700 dark:hover:text-white focus-visible:text-slate-700 dark:focus-visible:text-white', themeIconColor, themeRingColor), "aria-label": normalizedContent, "aria-expanded": open, children: jsx(CircleQuestionMarkIcon, { className: "h-4 w-4" }) }), open && position
+                ? createPortal(jsx("span", { ref: tooltipRef, className: cn('pointer-events-none fixed z-50 max-h-[calc(100vh-1.5rem)] overflow-y-auto rounded-2xl border bg-white/95 px-3 py-2 text-xs leading-5 text-slate-600 shadow-xl backdrop-blur-sm dark:bg-slate-950/95 dark:text-slate-300', position.side === 'inline' && '-translate-y-1/2', themeBorderColor), style: {
+                        left: position.left,
+                        top: position.top,
+                        width: position.maxWidth,
+                    }, role: "tooltip", children: normalizedContent }), document.body)
+                : null] }));
 }
 
 export { InfoTooltip };

package/dist/main/loading-frame/index.d.ts

@@ -1 +1,2 @@
 export { SnakeLoadingFrame, SnakeLoadingPreview } from '../snake-loading-frame';
+export type { SnakeLoadingFrameProps, SnakeLoadingPreviewProps, } from '../snake-loading-frame';

package/dist/main/loading.d.ts

@@ -5,6 +5,7 @@ interface LoadingProps {
     className?: string;
     label?: string;
     labelClassName?: string;
+    paused?: boolean;
 }
-export declare function Loading({ themeColor, compact, className, label, labelClassName, }?: LoadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Loading({ themeColor, compact, className, label, labelClassName, paused, }?: LoadingProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/loading.js

@@ -2,8 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var utils = require('@windrun-huaiin/lib/utils');
 var lib = require('@windrun-huaiin/base-ui/lib');
+var animejs = require('animejs');
 
 const NUM_ROWS = 15;
 const NUM_COLS = 15;
@@ -53,36 +55,77 @@ function createLoadingPalette(baseHex) {
         shiftColor(baseHex, { r: -24, g: -14, b: 6 }),
     ];
 }
-function Loading({ themeColor = lib.themeSvgIconColor, compact = false, className, label = 'Loading...', labelClassName, } = {}) {
-    const colors = createLoadingPalette(themeColor);
-    const dots = [];
+function Loading({ themeColor = lib.themeSvgIconColor, compact = false, className, label = 'Loading...', labelClassName, paused = false, } = {}) {
+    const gridRef = React.useRef(null);
+    const animationRef = React.useRef(null);
+    const pausedRef = React.useRef(paused);
+    const colors = React.useMemo(() => createLoadingPalette(themeColor), [themeColor]);
     const centerX = (NUM_COLS - 1) / 2;
     const centerY = (NUM_ROWS - 1) / 2;
-    for (let i = 0; i < NUM_ROWS; i++) {
-        for (let j = 0; j < NUM_COLS; j++) {
-            // Calculate distance from the center of the grid
-            const distance = Math.sqrt(Math.pow(i - centerY, 2) + Math.pow(j - centerX, 2));
-            dots.push({
-                id: `${i}-${j}`,
-                row: i,
-                col: j,
-                // Animation delay based on distance, creating a ripple effect
-                delay: distance * STAGGER_DELAY_FACTOR,
-                // Color selection based on distance rings
-                color: colors[Math.floor(distance) % colors.length],
-            });
+    const dots = React.useMemo(() => {
+        const nextDots = [];
+        for (let i = 0; i < NUM_ROWS; i++) {
+            for (let j = 0; j < NUM_COLS; j++) {
+                const distance = Math.sqrt(Math.pow(i - centerY, 2) + Math.pow(j - centerX, 2));
+                nextDots.push({
+                    id: `${i}-${j}`,
+                    row: i,
+                    col: j,
+                    delay: distance * STAGGER_DELAY_FACTOR,
+                    color: colors[Math.floor(distance) % colors.length],
+                });
+            }
         }
-    }
+        return nextDots;
+    }, [centerX, centerY, colors]);
     // Calculate the total width and height of the dot container
     const containerWidth = (NUM_COLS - 1) * SPACING + DOT_SIZE;
     const containerHeight = (NUM_ROWS - 1) * SPACING + DOT_SIZE;
-    return (jsxRuntime.jsx("div", { className: utils.cn('flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-900', compact ? 'min-h-[250px] rounded-[28px] px-4 py-2' : 'min-h-screen', className), children: jsxRuntime.jsxs("div", { style: {
+    pausedRef.current = paused;
+    React.useEffect(() => {
+        var _a;
+        const grid = gridRef.current;
+        if (!grid) {
+            return undefined;
+        }
+        const dotNodes = Array.from(grid.querySelectorAll('[data-loading-dot]'));
+        (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        animationRef.current = animejs.animate(dotNodes, {
+            opacity: [0, 1, 0.7, 0],
+            scale: [0.2, 1.2, 0.8, 0.2],
+            duration: ANIMATION_DURATION * 1000,
+            delay: (target) => { var _a; return Number((_a = target === null || target === void 0 ? void 0 : target.dataset.loadingDelay) !== null && _a !== void 0 ? _a : 0) * 1000; },
+            ease: 'inOutSine',
+            loop: true,
+        });
+        if (pausedRef.current) {
+            animationRef.current.pause();
+        }
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, [dots]);
+    React.useEffect(() => {
+        const animation = animationRef.current;
+        if (!animation) {
+            return;
+        }
+        if (paused) {
+            animation.pause();
+        }
+        else {
+            animation.play();
+        }
+    }, [paused]);
+    return (jsxRuntime.jsx("div", { className: utils.cn('flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-900', compact ? 'min-h-[250px] rounded-[28px] px-4 py-2' : 'min-h-screen', className), children: jsxRuntime.jsxs("div", { ref: gridRef, style: {
                 width: containerWidth,
                 height: containerHeight,
                 position: 'relative',
                 borderRadius: '50%', // Make the container circular
                 overflow: 'hidden', // Clip dots outside the circle
-            }, children: [dots.map(dot => (jsxRuntime.jsx("div", { style: {
+            }, children: [dots.map(dot => (jsxRuntime.jsx("div", { "data-loading-dot": "", "data-loading-delay": dot.delay, style: {
                         position: 'absolute',
                         left: dot.col * SPACING,
                         top: dot.row * SPACING,
@@ -90,13 +133,8 @@ function Loading({ themeColor = lib.themeSvgIconColor, compact = false, classNam
                         height: DOT_SIZE,
                         backgroundColor: dot.color,
                         borderRadius: '50%',
-                        animationName: 'loading-dot-pulse',
-                        animationDuration: `${ANIMATION_DURATION}s`,
-                        animationTimingFunction: 'cubic-bezier(0.45, 0, 0.55, 1)',
-                        animationIterationCount: 'infinite',
-                        animationDelay: `${dot.delay}s`,
-                        opacity: 0,
-                        transform: 'scale(0)',
+                        opacity: 0.35,
+                        transform: 'scale(0.2)',
                     } }, dot.id))), jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", style: { pointerEvents: 'none' }, children: jsxRuntime.jsx("p", { className: utils.cn('text-xl font-semibold text-white', labelClassName), children: label }) })] }) }));
 }
 

package/dist/main/loading.mjs

@@ -1,7 +1,9 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
+import { animate } from 'animejs';
 
 const NUM_ROWS = 15;
 const NUM_COLS = 15;
@@ -51,36 +53,77 @@ function createLoadingPalette(baseHex) {
         shiftColor(baseHex, { r: -24, g: -14, b: 6 }),
     ];
 }
-function Loading({ themeColor = themeSvgIconColor, compact = false, className, label = 'Loading...', labelClassName, } = {}) {
-    const colors = createLoadingPalette(themeColor);
-    const dots = [];
+function Loading({ themeColor = themeSvgIconColor, compact = false, className, label = 'Loading...', labelClassName, paused = false, } = {}) {
+    const gridRef = useRef(null);
+    const animationRef = useRef(null);
+    const pausedRef = useRef(paused);
+    const colors = useMemo(() => createLoadingPalette(themeColor), [themeColor]);
     const centerX = (NUM_COLS - 1) / 2;
     const centerY = (NUM_ROWS - 1) / 2;
-    for (let i = 0; i < NUM_ROWS; i++) {
-        for (let j = 0; j < NUM_COLS; j++) {
-            // Calculate distance from the center of the grid
-            const distance = Math.sqrt(Math.pow(i - centerY, 2) + Math.pow(j - centerX, 2));
-            dots.push({
-                id: `${i}-${j}`,
-                row: i,
-                col: j,
-                // Animation delay based on distance, creating a ripple effect
-                delay: distance * STAGGER_DELAY_FACTOR,
-                // Color selection based on distance rings
-                color: colors[Math.floor(distance) % colors.length],
-            });
+    const dots = useMemo(() => {
+        const nextDots = [];
+        for (let i = 0; i < NUM_ROWS; i++) {
+            for (let j = 0; j < NUM_COLS; j++) {
+                const distance = Math.sqrt(Math.pow(i - centerY, 2) + Math.pow(j - centerX, 2));
+                nextDots.push({
+                    id: `${i}-${j}`,
+                    row: i,
+                    col: j,
+                    delay: distance * STAGGER_DELAY_FACTOR,
+                    color: colors[Math.floor(distance) % colors.length],
+                });
+            }
         }
-    }
+        return nextDots;
+    }, [centerX, centerY, colors]);
     // Calculate the total width and height of the dot container
     const containerWidth = (NUM_COLS - 1) * SPACING + DOT_SIZE;
     const containerHeight = (NUM_ROWS - 1) * SPACING + DOT_SIZE;
-    return (jsx("div", { className: cn('flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-900', compact ? 'min-h-[250px] rounded-[28px] px-4 py-2' : 'min-h-screen', className), children: jsxs("div", { style: {
+    pausedRef.current = paused;
+    useEffect(() => {
+        var _a;
+        const grid = gridRef.current;
+        if (!grid) {
+            return undefined;
+        }
+        const dotNodes = Array.from(grid.querySelectorAll('[data-loading-dot]'));
+        (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        animationRef.current = animate(dotNodes, {
+            opacity: [0, 1, 0.7, 0],
+            scale: [0.2, 1.2, 0.8, 0.2],
+            duration: ANIMATION_DURATION * 1000,
+            delay: (target) => { var _a; return Number((_a = target === null || target === void 0 ? void 0 : target.dataset.loadingDelay) !== null && _a !== void 0 ? _a : 0) * 1000; },
+            ease: 'inOutSine',
+            loop: true,
+        });
+        if (pausedRef.current) {
+            animationRef.current.pause();
+        }
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, [dots]);
+    useEffect(() => {
+        const animation = animationRef.current;
+        if (!animation) {
+            return;
+        }
+        if (paused) {
+            animation.pause();
+        }
+        else {
+            animation.play();
+        }
+    }, [paused]);
+    return (jsx("div", { className: cn('flex flex-col items-center justify-center bg-neutral-100 dark:bg-neutral-900', compact ? 'min-h-[250px] rounded-[28px] px-4 py-2' : 'min-h-screen', className), children: jsxs("div", { ref: gridRef, style: {
                 width: containerWidth,
                 height: containerHeight,
                 position: 'relative',
                 borderRadius: '50%', // Make the container circular
                 overflow: 'hidden', // Clip dots outside the circle
-            }, children: [dots.map(dot => (jsx("div", { style: {
+            }, children: [dots.map(dot => (jsx("div", { "data-loading-dot": "", "data-loading-delay": dot.delay, style: {
                         position: 'absolute',
                         left: dot.col * SPACING,
                         top: dot.row * SPACING,
@@ -88,13 +131,8 @@ function Loading({ themeColor = themeSvgIconColor, compact = false, className, l
                         height: DOT_SIZE,
                         backgroundColor: dot.color,
                         borderRadius: '50%',
-                        animationName: 'loading-dot-pulse',
-                        animationDuration: `${ANIMATION_DURATION}s`,
-                        animationTimingFunction: 'cubic-bezier(0.45, 0, 0.55, 1)',
-                        animationIterationCount: 'infinite',
-                        animationDelay: `${dot.delay}s`,
-                        opacity: 0,
-                        transform: 'scale(0)',
+                        opacity: 0.35,
+                        transform: 'scale(0.2)',
                     } }, dot.id))), jsx("div", { className: "absolute inset-0 flex items-center justify-center", style: { pointerEvents: 'none' }, children: jsx("p", { className: cn('text-xl font-semibold text-white', labelClassName), children: label }) })] }) }));
 }
 

package/dist/main/motion/creative-left-panel.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface CreativeLeftPanelProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function CreativeLeftPanel({ children, className }: CreativeLeftPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/motion/creative-left-panel.js

@@ -0,0 +1,11 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+
+function CreativeLeftPanel({ children, className = '' }) {
+    return (jsxRuntime.jsx("div", { className: `relative h-full ${className}`, children: jsxRuntime.jsxs("div", { className: "relative h-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 backdrop-blur-2xl shadow-xl", children: [jsxRuntime.jsx("div", { className: "absolute -left-1 -top-1 z-30", children: jsxRuntime.jsxs("div", { className: "relative h-28 w-32 bg-linear-to-br from-orange-500 via-orange-600 to-orange-700 rounded-br-[2.75rem] shadow-lg", children: [jsxRuntime.jsx("div", { className: "absolute left-4 top-4 h-10 w-10 rounded-full bg-white/30 blur-sm" }), jsxRuntime.jsx("div", { className: "absolute left-6 top-6 h-5 w-14 rotate-12 rounded bg-white/20" })] }) }), jsxRuntime.jsxs("svg", { className: "absolute bottom-0 left-0 z-20 h-[380px] w-full pointer-events-none", viewBox: "0 0 680 420", preserveAspectRatio: "none", fill: "none", children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("linearGradient", { id: "leftGlow", x1: "0%", y1: "100%", x2: "100%", y2: "30%", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#f97316", stopOpacity: "0.25" }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#fb923c", stopOpacity: "0.08" })] }) }), jsxRuntime.jsx(react.motion.path, { d: "M 0 380 \n               Q 85 425 165 355 \n               Q 255 265 355 285 \n               Q 480 310 555 245 \n               Q 615 195 680 235", stroke: "url(#leftGlow)", strokeWidth: "22", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.4, ease: "easeOut" } }), jsxRuntime.jsx(react.motion.path, { d: "M 0 380 \n               Q 85 425 165 355 \n               Q 255 265 355 285 \n               Q 480 310 555 245 \n               Q 615 195 680 235", stroke: "#fbbf24", strokeWidth: "3", strokeOpacity: "0.45", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.6, ease: "easeOut" } })] }), jsxRuntime.jsx("div", { className: "relative z-10 h-full p-6 sm:p-8 pb-16", children: children })] }) }));
+}
+
+exports.CreativeLeftPanel = CreativeLeftPanel;

package/dist/main/motion/creative-left-panel.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+
+function CreativeLeftPanel({ children, className = '' }) {
+    return (jsx("div", { className: `relative h-full ${className}`, children: jsxs("div", { className: "relative h-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 backdrop-blur-2xl shadow-xl", children: [jsx("div", { className: "absolute -left-1 -top-1 z-30", children: jsxs("div", { className: "relative h-28 w-32 bg-linear-to-br from-orange-500 via-orange-600 to-orange-700 rounded-br-[2.75rem] shadow-lg", children: [jsx("div", { className: "absolute left-4 top-4 h-10 w-10 rounded-full bg-white/30 blur-sm" }), jsx("div", { className: "absolute left-6 top-6 h-5 w-14 rotate-12 rounded bg-white/20" })] }) }), jsxs("svg", { className: "absolute bottom-0 left-0 z-20 h-[380px] w-full pointer-events-none", viewBox: "0 0 680 420", preserveAspectRatio: "none", fill: "none", children: [jsx("defs", { children: jsxs("linearGradient", { id: "leftGlow", x1: "0%", y1: "100%", x2: "100%", y2: "30%", children: [jsx("stop", { offset: "0%", stopColor: "#f97316", stopOpacity: "0.25" }), jsx("stop", { offset: "100%", stopColor: "#fb923c", stopOpacity: "0.08" })] }) }), jsx(motion.path, { d: "M 0 380 \n               Q 85 425 165 355 \n               Q 255 265 355 285 \n               Q 480 310 555 245 \n               Q 615 195 680 235", stroke: "url(#leftGlow)", strokeWidth: "22", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.4, ease: "easeOut" } }), jsx(motion.path, { d: "M 0 380 \n               Q 85 425 165 355 \n               Q 255 265 355 285 \n               Q 480 310 555 245 \n               Q 615 195 680 235", stroke: "#fbbf24", strokeWidth: "3", strokeOpacity: "0.45", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.6, ease: "easeOut" } })] }), jsx("div", { className: "relative z-10 h-full p-6 sm:p-8 pb-16", children: children })] }) }));
+}
+
+export { CreativeLeftPanel };

package/dist/main/motion/creative-right-panel.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface CreativeRightPanelProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function CreativeRightPanel({ children, className }: CreativeRightPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/motion/creative-right-panel.js

@@ -0,0 +1,11 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+
+function CreativeRightPanel({ children, className = '' }) {
+    return (jsxRuntime.jsx("div", { className: `relative h-full ${className}`, children: jsxRuntime.jsxs("div", { className: "relative h-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 backdrop-blur-2xl shadow-xl", children: [jsxRuntime.jsx("svg", { className: "absolute bottom-0 right-0 z-20 h-[380px] w-full pointer-events-none", viewBox: "0 0 680 420", preserveAspectRatio: "none", fill: "none", children: jsxRuntime.jsx(react.motion.path, { d: "M 0 235 \n               Q 65 195 145 245 \n               Q 220 310 345 285 \n               Q 445 265 535 355 \n               Q 615 425 680 380", stroke: "#f97316", strokeWidth: "18", strokeOpacity: "0.18", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.2, ease: "easeOut" } }) }), jsxRuntime.jsx("div", { className: "relative z-10 h-full p-6 sm:p-8 pb-12", children: children })] }) }));
+}
+
+exports.CreativeRightPanel = CreativeRightPanel;

package/dist/main/motion/creative-right-panel.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+
+function CreativeRightPanel({ children, className = '' }) {
+    return (jsx("div", { className: `relative h-full ${className}`, children: jsxs("div", { className: "relative h-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 backdrop-blur-2xl shadow-xl", children: [jsx("svg", { className: "absolute bottom-0 right-0 z-20 h-[380px] w-full pointer-events-none", viewBox: "0 0 680 420", preserveAspectRatio: "none", fill: "none", children: jsx(motion.path, { d: "M 0 235 \n               Q 65 195 145 245 \n               Q 220 310 345 285 \n               Q 445 265 535 355 \n               Q 615 425 680 380", stroke: "#f97316", strokeWidth: "18", strokeOpacity: "0.18", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.2, ease: "easeOut" } }) }), jsx("div", { className: "relative z-10 h-full p-6 sm:p-8 pb-12", children: children })] }) }));
+}
+
+export { CreativeRightPanel };

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

@@ -0,0 +1 @@
+export { MotionBeamFrame, MotionBeamFrame as BeamFrame, type BeamFrameProps, type BeamFrameTone, } from './motion-beam-frame';

package/dist/main/motion/index.js

@@ -0,0 +1,9 @@
+"use client";
+'use strict';
+
+var motionBeamFrame = require('./motion-beam-frame.js');
+
+
+
+exports.BeamFrame = motionBeamFrame.MotionBeamFrame;
+exports.MotionBeamFrame = motionBeamFrame.MotionBeamFrame;

package/dist/main/motion/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+export { MotionBeamFrame as BeamFrame, MotionBeamFrame } from './motion-beam-frame.mjs';

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

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