@windrun-huaiin/third-ui 29.2.1 → 30.1.0

package/dist/main/alert-dialog/dialog-styles.d.ts

@@ -1,9 +1,11 @@
 export declare const dialogSurfaceClass: string;
 export declare const dialogThemedOverlayClass: string;
 export declare const dialogContentClass: string;
+export declare const dialogLoadingContentClass: string;
 export declare const dialogHeaderClass = "flex items-start justify-between gap-4";
-export declare const dialogTitleClass = "flex min-w-0 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50";
-export declare const dialogDescriptionClass = "mt-3 text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300";
+export declare const dialogTitleClass = "flex min-w-0 flex-1 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50";
+export declare const dialogTitleTextClass = "min-w-0 flex-1 line-clamp-2 break-words";
+export declare const dialogDescriptionClass = "mt-3 break-words text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300";
 export declare const dialogFooterClass = "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end";
 export declare const closeButtonClass = "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-neutral-400 transition hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200";
 export declare const secondaryButtonClass = "inline-flex min-h-10 items-center justify-center rounded-full border border-neutral-300 bg-white px-5 py-2 text-sm font-semibold text-neutral-700 transition hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:pointer-events-none disabled:opacity-60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800";

package/dist/main/alert-dialog/dialog-styles.js

@@ -4,12 +4,14 @@
 var lib = require('@windrun-huaiin/base-ui/lib');
 var utils = require('@windrun-huaiin/lib/utils');
 
-const dialogSurfaceClass = utils.cn('w-[calc(100vw-2rem)] max-w-md rounded-2xl border bg-white p-5 text-neutral-950 shadow-2xl outline-none dark:bg-neutral-950 dark:text-neutral-50', 'border-neutral-200 dark:border-neutral-800');
+const dialogSurfaceClass = utils.cn('min-h-[240px] w-[calc(100vw-2rem)] max-w-md rounded-2xl border bg-white p-5 text-neutral-950 shadow-2xl outline-none dark:bg-neutral-950 dark:text-neutral-50', 'border-neutral-200 dark:border-neutral-800');
 const dialogThemedOverlayClass = utils.cn(lib.themeMainBgColor, 'opacity-90 backdrop-blur-[2px] dark:opacity-85');
 const dialogContentClass = utils.cn('fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2', dialogSurfaceClass);
+const dialogLoadingContentClass = utils.cn('fixed left-1/2 top-1/2 z-10000 -translate-x-1/2 -translate-y-1/2', dialogSurfaceClass, 'flex items-center justify-center overflow-hidden animate-in fade-in-0 zoom-in-95 duration-150');
 const dialogHeaderClass = 'flex items-start justify-between gap-4';
-const dialogTitleClass = 'flex min-w-0 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50';
-const dialogDescriptionClass = 'mt-3 text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300';
+const dialogTitleClass = 'flex min-w-0 flex-1 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50';
+const dialogTitleTextClass = 'min-w-0 flex-1 line-clamp-2 break-words';
+const dialogDescriptionClass = 'mt-3 break-words text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300';
 const dialogFooterClass = 'mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end';
 const closeButtonClass = 'inline-flex size-8 shrink-0 items-center justify-center rounded-full text-neutral-400 transition hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200';
 const secondaryButtonClass = 'inline-flex min-h-10 items-center justify-center rounded-full border border-neutral-300 bg-white px-5 py-2 text-sm font-semibold text-neutral-700 transition hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:pointer-events-none disabled:opacity-60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800';
@@ -17,7 +19,7 @@ const primaryButtonClass = utils.cn('inline-flex min-h-10 items-center justify-c
 const subtlePrimaryButtonClass = utils.cn('inline-flex min-h-10 items-center justify-center rounded-full border px-5 py-2 text-sm font-bold transition hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', lib.themeBgColor, lib.themeBorderColor, lib.themeIconColor, lib.themeRingColor);
 const dangerButtonClass = 'inline-flex min-h-10 items-center justify-center rounded-full bg-red-600 px-5 py-2 text-sm font-bold text-white shadow-sm transition hover:bg-red-700 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 disabled:pointer-events-none disabled:opacity-60 dark:bg-red-600 dark:hover:bg-red-500';
 const highPriorityTitleClass = utils.cn('flex min-w-0 items-center gap-2 text-lg font-bold leading-tight', lib.themeIconColor);
-const highPrioritySurfaceClass = utils.cn(dialogSurfaceClass, 'backdrop-blur-md ring-4 animate-in zoom-in-95 duration-300', lib.themeBorderColor, lib.themeRingColor);
+const highPrioritySurfaceClass = utils.cn(dialogSurfaceClass, 'flex flex-col', 'backdrop-blur-md ring-4 animate-in zoom-in-95 duration-300', lib.themeBorderColor, lib.themeRingColor);
 
 exports.closeButtonClass = closeButtonClass;
 exports.dangerButtonClass = dangerButtonClass;
@@ -25,9 +27,11 @@ exports.dialogContentClass = dialogContentClass;
 exports.dialogDescriptionClass = dialogDescriptionClass;
 exports.dialogFooterClass = dialogFooterClass;
 exports.dialogHeaderClass = dialogHeaderClass;
+exports.dialogLoadingContentClass = dialogLoadingContentClass;
 exports.dialogSurfaceClass = dialogSurfaceClass;
 exports.dialogThemedOverlayClass = dialogThemedOverlayClass;
 exports.dialogTitleClass = dialogTitleClass;
+exports.dialogTitleTextClass = dialogTitleTextClass;
 exports.highPrioritySurfaceClass = highPrioritySurfaceClass;
 exports.highPriorityTitleClass = highPriorityTitleClass;
 exports.primaryButtonClass = primaryButtonClass;

package/dist/main/alert-dialog/dialog-styles.mjs

@@ -2,12 +2,14 @@
 import { themeMainBgColor, themeButtonGradientClass, themeButtonGradientHoverClass, themeRingColor, themeBgColor, themeBorderColor, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 
-const dialogSurfaceClass = cn('w-[calc(100vw-2rem)] max-w-md rounded-2xl border bg-white p-5 text-neutral-950 shadow-2xl outline-none dark:bg-neutral-950 dark:text-neutral-50', 'border-neutral-200 dark:border-neutral-800');
+const dialogSurfaceClass = cn('min-h-[240px] w-[calc(100vw-2rem)] max-w-md rounded-2xl border bg-white p-5 text-neutral-950 shadow-2xl outline-none dark:bg-neutral-950 dark:text-neutral-50', 'border-neutral-200 dark:border-neutral-800');
 const dialogThemedOverlayClass = cn(themeMainBgColor, 'opacity-90 backdrop-blur-[2px] dark:opacity-85');
 const dialogContentClass = cn('fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2', dialogSurfaceClass);
+const dialogLoadingContentClass = cn('fixed left-1/2 top-1/2 z-10000 -translate-x-1/2 -translate-y-1/2', dialogSurfaceClass, 'flex items-center justify-center overflow-hidden animate-in fade-in-0 zoom-in-95 duration-150');
 const dialogHeaderClass = 'flex items-start justify-between gap-4';
-const dialogTitleClass = 'flex min-w-0 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50';
-const dialogDescriptionClass = 'mt-3 text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300';
+const dialogTitleClass = 'flex min-w-0 flex-1 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50';
+const dialogTitleTextClass = 'min-w-0 flex-1 line-clamp-2 break-words';
+const dialogDescriptionClass = 'mt-3 break-words text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300';
 const dialogFooterClass = 'mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end';
 const closeButtonClass = 'inline-flex size-8 shrink-0 items-center justify-center rounded-full text-neutral-400 transition hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200';
 const secondaryButtonClass = 'inline-flex min-h-10 items-center justify-center rounded-full border border-neutral-300 bg-white px-5 py-2 text-sm font-semibold text-neutral-700 transition hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:pointer-events-none disabled:opacity-60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800';
@@ -15,6 +17,6 @@ const primaryButtonClass = cn('inline-flex min-h-10 items-center justify-center
 const subtlePrimaryButtonClass = cn('inline-flex min-h-10 items-center justify-center rounded-full border px-5 py-2 text-sm font-bold transition hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', themeBgColor, themeBorderColor, themeIconColor, themeRingColor);
 const dangerButtonClass = 'inline-flex min-h-10 items-center justify-center rounded-full bg-red-600 px-5 py-2 text-sm font-bold text-white shadow-sm transition hover:bg-red-700 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 disabled:pointer-events-none disabled:opacity-60 dark:bg-red-600 dark:hover:bg-red-500';
 const highPriorityTitleClass = cn('flex min-w-0 items-center gap-2 text-lg font-bold leading-tight', themeIconColor);
-const highPrioritySurfaceClass = cn(dialogSurfaceClass, 'backdrop-blur-md ring-4 animate-in zoom-in-95 duration-300', themeBorderColor, themeRingColor);
+const highPrioritySurfaceClass = cn(dialogSurfaceClass, 'flex flex-col', 'backdrop-blur-md ring-4 animate-in zoom-in-95 duration-300', themeBorderColor, themeRingColor);
 
-export { closeButtonClass, dangerButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogSurfaceClass, dialogThemedOverlayClass, dialogTitleClass, highPrioritySurfaceClass, highPriorityTitleClass, primaryButtonClass, secondaryButtonClass, subtlePrimaryButtonClass };
+export { closeButtonClass, dangerButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogLoadingContentClass, dialogSurfaceClass, dialogThemedOverlayClass, dialogTitleClass, dialogTitleTextClass, highPrioritySurfaceClass, highPriorityTitleClass, primaryButtonClass, secondaryButtonClass, subtlePrimaryButtonClass };

package/dist/main/alert-dialog/high-priority-confirm-dialog.js

@@ -22,11 +22,11 @@ function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, ti
     const handleClose = () => {
         onOpenChange(false);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [open && reactDom.createPortal(jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300", children: jsxRuntime.jsxs("div", { className: utils.cn(dialogStyles.highPrioritySurfaceClass, "scale-100"), role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsxs("h3", { className: dialogStyles.highPriorityTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', lib.themeBgColor, lib.themeBorderColor), children: jsxRuntime.jsx(icons.FAQSIcon, { className: utils.cn('size-5', lib.themeIconColor) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx("div", { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                        void runDialogAction('cancel', onCancel);
-                                    }, className: dialogStyles.secondaryButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                        void runDialogAction('confirm', onConfirm);
-                                    }, className: utils.cn(dialogStyles.primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] }) }), document.body), dialogLoading] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [open && reactDom.createPortal(jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300", children: jsxRuntime.jsxs("div", { className: utils.cn(dialogStyles.highPrioritySurfaceClass, "scale-100"), role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsxs("h3", { className: dialogStyles.highPriorityTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', lib.themeBgColor, lib.themeBorderColor), children: jsxRuntime.jsx(icons.FAQSIcon, { className: utils.cn('size-5', lib.themeIconColor) }) }), jsxRuntime.jsx("span", { className: dialogStyles.dialogTitleTextClass, children: title })] }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [jsxRuntime.jsx("div", { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: utils.cn(dialogStyles.dialogFooterClass, 'mt-auto'), children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                                void runDialogAction('cancel', onCancel);
+                                            }, className: dialogStyles.secondaryButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                                void runDialogAction('confirm', onConfirm);
+                                            }, className: utils.cn(dialogStyles.primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] })] }) }), document.body), dialogLoading] }));
 }
 
 exports.HighPriorityConfirmDialog = HighPriorityConfirmDialog;

package/dist/main/alert-dialog/high-priority-confirm-dialog.mjs

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { FAQSIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { dialogHeaderClass, highPriorityTitleClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, secondaryButtonClass, primaryButtonClass, highPrioritySurfaceClass } from './dialog-styles.mjs';
+import { dialogHeaderClass, highPriorityTitleClass, dialogTitleTextClass, closeButtonClass, dialogDescriptionClass, secondaryButtonClass, primaryButtonClass, dialogFooterClass, highPrioritySurfaceClass } from './dialog-styles.mjs';
 import { themeIconColor, themeBgColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
 import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
@@ -20,11 +20,11 @@ function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, ti
     const handleClose = () => {
         onOpenChange(false);
     };
-    return (jsxs(Fragment, { children: [open && createPortal(jsx("div", { className: "fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300", children: jsxs("div", { className: cn(highPrioritySurfaceClass, "scale-100"), role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: dialogHeaderClass, children: [jsxs("h3", { className: highPriorityTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor), children: jsx(FAQSIcon, { className: cn('size-5', themeIconColor) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx("div", { className: dialogDescriptionClass, children: description }), jsxs("div", { className: dialogFooterClass, children: [jsx("button", { type: "button", onClick: () => {
-                                        void runDialogAction('cancel', onCancel);
-                                    }, className: secondaryButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: () => {
-                                        void runDialogAction('confirm', onConfirm);
-                                    }, className: cn(primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] }) }), document.body), dialogLoading] }));
+    return (jsxs(Fragment, { children: [open && createPortal(jsx("div", { className: "fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300", children: jsxs("div", { className: cn(highPrioritySurfaceClass, "scale-100"), role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: dialogHeaderClass, children: [jsxs("h3", { className: highPriorityTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor), children: jsx(FAQSIcon, { className: cn('size-5', themeIconColor) }) }), jsx("span", { className: dialogTitleTextClass, children: title })] }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [jsx("div", { className: dialogDescriptionClass, children: description }), jsxs("div", { className: cn(dialogFooterClass, 'mt-auto'), children: [jsx("button", { type: "button", onClick: () => {
+                                                void runDialogAction('cancel', onCancel);
+                                            }, className: secondaryButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: () => {
+                                                void runDialogAction('confirm', onConfirm);
+                                            }, className: cn(primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] })] }) }), document.body), dialogLoading] }));
 }
 
 export { HighPriorityConfirmDialog };

package/dist/main/alert-dialog/info-dialog.js

@@ -43,7 +43,7 @@ function InfoDialog({ open, onOpenChange, type = 'info', title, description, con
     const Icon = typeClass.Icon;
     const handleClose = () => onOpenChange(false);
     const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsx("div", { className: dialogStyles.dialogFooterClass, children: jsxRuntime.jsx(ui.AlertDialogAction, { className: utils.cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: dialogStyles.dialogTitleTextClass, children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsx("div", { className: dialogStyles.dialogFooterClass, children: jsxRuntime.jsx(ui.AlertDialogAction, { className: utils.cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
                                     void runDialogAction('confirm', onConfirm);
                                 }, children: confirmText }) })] }) }), dialogLoading] }));
 }

package/dist/main/alert-dialog/info-dialog.mjs

@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { BadgeXIcon, BadgeCheckIcon, BadgeAlertIcon, BadgeInfoIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction } from '@windrun-huaiin/base-ui/ui';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
+import { dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, dialogTitleTextClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
 import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
 const infoTypeClassMap = {
@@ -41,7 +41,7 @@ function InfoDialog({ open, onOpenChange, type = 'info', title, description, con
     const Icon = typeClass.Icon;
     const handleClose = () => onOpenChange(false);
     const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
-    return (jsxs(Fragment, { children: [jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsx("div", { className: dialogFooterClass, children: jsx(AlertDialogAction, { className: cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: dialogTitleTextClass, children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsx("div", { className: dialogFooterClass, children: jsx(AlertDialogAction, { className: cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
                                     void runDialogAction('confirm', onConfirm);
                                 }, children: confirmText }) })] }) }), dialogLoading] }));
 }

package/dist/main/alert-dialog/undoable-confirm-dialog.js

@@ -86,9 +86,9 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
                         return;
                     }
                     onOpenChange(nextOpen);
-                }, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900", children: pending ? jsxRuntime.jsx(icons.Trash2Icon, { className: "size-5" }) : jsxRuntime.jsx(icons.CircleAlertIcon, { className: "size-5" }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: displayTitle })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", disabled: confirming, children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: utils.cn(dialogStyles.dialogDescriptionClass, 'min-h-[44px]'), children: jsxRuntime.jsx("span", { children: displayDescription }) }), jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsxRuntime.jsx("span", { className: utils.cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', lib.themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsxRuntime.jsx("span", { className: utils.cn('text-sm font-bold', lib.themeIconColor), children: "s" })] }) }), jsxRuntime.jsx("div", { className: utils.cn(dialogStyles.dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxRuntime.jsxs("button", { type: "button", onClick: () => {
+                }, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900", children: pending ? jsxRuntime.jsx(icons.Trash2Icon, { className: "size-5" }) : jsxRuntime.jsx(icons.CircleAlertIcon, { className: "size-5" }) }), jsxRuntime.jsx("span", { className: dialogStyles.dialogTitleTextClass, children: displayTitle })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", disabled: confirming, children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: utils.cn(dialogStyles.dialogDescriptionClass, 'min-h-[44px]'), children: jsxRuntime.jsx("span", { children: displayDescription }) }), jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsxRuntime.jsx("span", { className: utils.cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', lib.themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsxRuntime.jsx("span", { className: utils.cn('text-sm font-bold', lib.themeIconColor), children: "s" })] }) }), jsxRuntime.jsx("div", { className: utils.cn(dialogStyles.dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxRuntime.jsxs("button", { type: "button", onClick: () => {
                                     void handleUndo();
-                                }, className: dialogStyles.secondaryButtonClass, disabled: confirming, children: [jsxRuntime.jsx(icons.Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleCancel, className: cancelButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: startCountdown, className: confirmButtonClass, children: confirmText })] })) })] }) }), dialogLoading] }));
+                                }, className: utils.cn(dialogStyles.secondaryButtonClass, 'w-full sm:w-auto'), disabled: confirming, children: [jsxRuntime.jsx(icons.Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleCancel, className: utils.cn(cancelButtonClass, 'w-full sm:w-auto'), children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: startCountdown, className: utils.cn(confirmButtonClass, 'w-full sm:w-auto'), children: confirmText })] })) })] }) }), dialogLoading] }));
 }
 
 exports.UndoableConfirmDialog = UndoableConfirmDialog;

package/dist/main/alert-dialog/undoable-confirm-dialog.mjs

@@ -6,7 +6,7 @@ import { Trash2Icon, CircleAlertIcon, XIcon, Undo2Icon } from '@windrun-huaiin/b
 import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription } from '@windrun-huaiin/base-ui/ui';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, secondaryButtonClass, dangerButtonClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
+import { dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, dialogTitleTextClass, closeButtonClass, dialogDescriptionClass, secondaryButtonClass, dangerButtonClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
 import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
 function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', emphasis = 'confirm', countdownSeconds = 5, loadingActions, loadingFullPage, onCancel, onConfirm, onUndo, }) {
@@ -84,9 +84,9 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
                         return;
                     }
                     onOpenChange(nextOpen);
-                }, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900", children: pending ? jsx(Trash2Icon, { className: "size-5" }) : jsx(CircleAlertIcon, { className: "size-5" }) }), jsx("span", { className: "min-w-0 truncate", children: displayTitle })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", disabled: confirming, children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: cn(dialogDescriptionClass, 'min-h-[44px]'), children: jsx("span", { children: displayDescription }) }), jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsx("span", { className: cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsx("span", { className: cn('text-sm font-bold', themeIconColor), children: "s" })] }) }), jsx("div", { className: cn(dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxs("button", { type: "button", onClick: () => {
+                }, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900", children: pending ? jsx(Trash2Icon, { className: "size-5" }) : jsx(CircleAlertIcon, { className: "size-5" }) }), jsx("span", { className: dialogTitleTextClass, children: displayTitle })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", disabled: confirming, children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: cn(dialogDescriptionClass, 'min-h-[44px]'), children: jsx("span", { children: displayDescription }) }), jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsx("span", { className: cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsx("span", { className: cn('text-sm font-bold', themeIconColor), children: "s" })] }) }), jsx("div", { className: cn(dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxs("button", { type: "button", onClick: () => {
                                     void handleUndo();
-                                }, className: secondaryButtonClass, disabled: confirming, children: [jsx(Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: handleCancel, className: cancelButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: startCountdown, className: confirmButtonClass, children: confirmText })] })) })] }) }), dialogLoading] }));
+                                }, className: cn(secondaryButtonClass, 'w-full sm:w-auto'), disabled: confirming, children: [jsx(Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: handleCancel, className: cn(cancelButtonClass, 'w-full sm:w-auto'), children: cancelText }), jsx("button", { type: "button", onClick: startCountdown, className: cn(confirmButtonClass, 'w-full sm:w-auto'), children: confirmText })] })) })] }) }), dialogLoading] }));
 }
 
 export { UndoableConfirmDialog };

package/dist/main/anime/anime-404-page.d.ts

@@ -0,0 +1,14 @@
+import { type SupportedThemeColor } from '@windrun-huaiin/base-ui/lib';
+import { type ReactNode } from 'react';
+export interface AnimeNotFoundPageProps {
+    siteIcon: ReactNode;
+    homeUrl?: string;
+    className?: string;
+    compact?: boolean;
+    themeClass?: SupportedThemeColor;
+    themeColor?: string;
+    ambientAnimated?: boolean;
+    doorOpen?: boolean;
+    onDoorOpenChange?: (open: boolean) => void;
+}
+export declare function AnimeNotFoundPage({ siteIcon, homeUrl, className, compact, themeClass, themeColor, ambientAnimated, doorOpen, onDoorOpenChange, }: AnimeNotFoundPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/anime/anime-404-page.js

@@ -0,0 +1,197 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+var animejs = require('animejs');
+var react = require('motion/react');
+var React = require('react');
+
+const THEME_BG_CLASS_MAP = {
+    'text-purple-500': 'bg-purple-500/20',
+    'text-orange-500': 'bg-orange-500/20',
+    'text-indigo-500': 'bg-indigo-500/20',
+    'text-emerald-500': 'bg-emerald-500/20',
+    'text-rose-500': 'bg-rose-500/20',
+};
+const dust = Array.from({ length: 10 }, (_, index) => ({
+    id: index,
+    left: `${12 + index * 8}%`,
+    top: `${18 + (index % 5) * 13}%`,
+    size: 3 + (index % 3),
+}));
+function AnimeNotFoundPage({ siteIcon, homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/', className, compact = false, themeClass, themeColor, ambientAnimated = true, doorOpen, onDoorOpenChange, }) {
+    const rootRef = React.useRef(null);
+    const timelineRef = React.useRef(null);
+    const shimmerRef = React.useRef(null);
+    const doorAnimationRef = React.useRef(null);
+    const lightAnimationRef = React.useRef(null);
+    const handleAnimationRef = React.useRef(null);
+    const messageAnimationRef = React.useRef(null);
+    const isDoorOpenRef = React.useRef(doorOpen !== null && doorOpen !== void 0 ? doorOpen : false);
+    const prefersReducedMotion = react.useReducedMotion();
+    const activeThemeClass = themeClass !== null && themeClass !== void 0 ? themeClass : lib.themeIconColor;
+    const activeGradientClass = themeClass ? lib.THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : lib.themeButtonGradientClass;
+    const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : lib.themeBgColor;
+    const doorStyle = React.useMemo(() => ({
+        '--not-found-theme': themeColor !== null && themeColor !== void 0 ? themeColor : lib.themeSvgIconColor,
+    }), [themeColor]);
+    React.useEffect(() => {
+        var _a, _b;
+        const root = rootRef.current;
+        if (!root || prefersReducedMotion) {
+            return undefined;
+        }
+        const door = root.querySelector('[data-not-found-door]');
+        const light = root.querySelector('[data-not-found-light]');
+        const message = root.querySelector('[data-not-found-message]');
+        const plate = root.querySelector('[data-not-found-plate]');
+        const handle = root.querySelector('[data-not-found-handle]');
+        const dustNodes = Array.from(root.querySelectorAll('[data-not-found-dust]'));
+        if (!door || !light || !plate || !handle) {
+            return undefined;
+        }
+        door.style.transform = 'rotateY(-2deg) translateX(0)';
+        light.style.opacity = '0.2';
+        light.style.transform = 'scaleX(0.78)';
+        if (message) {
+            message.style.opacity = '0';
+            message.style.transform = 'translateY(8px)';
+        }
+        (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        (_b = shimmerRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+        timelineRef.current = null;
+        shimmerRef.current = null;
+        if (ambientAnimated) {
+            timelineRef.current = animejs.createTimeline({ loop: true })
+                .add(plate, {
+                translateY: [0, -3, 0],
+                scale: [1, 1.025, 1],
+                duration: 1400,
+                ease: 'inOutSine',
+            })
+                .add(plate, {
+                translateY: [0, -3, 0],
+                scale: [1, 1.025, 1],
+                duration: 1400,
+                ease: 'inOutSine',
+            }, '+=900')
+                .add(dustNodes, {
+                opacity: [0, 0.72, 0],
+                translateY: [14, -18],
+                translateX: (_target, index) => (index % 2 === 0 ? 10 : -10),
+                scale: [0.4, 1, 0.6],
+                duration: 1800,
+                delay: animejs.stagger(80),
+                ease: 'outSine',
+            }, '<+=200');
+            shimmerRef.current = animejs.animate(root.querySelectorAll('[data-not-found-shimmer]'), {
+                translateX: ['-120%', '120%'],
+                opacity: [0, 0.8, 0],
+                duration: 2400,
+                delay: animejs.stagger(160),
+                ease: 'inOutSine',
+                loop: true,
+            });
+        }
+        return () => {
+            var _a, _b, _c, _d, _e, _f;
+            (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            timelineRef.current = null;
+            (_b = shimmerRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+            shimmerRef.current = null;
+            (_c = doorAnimationRef.current) === null || _c === void 0 ? void 0 : _c.revert();
+            doorAnimationRef.current = null;
+            (_d = lightAnimationRef.current) === null || _d === void 0 ? void 0 : _d.revert();
+            lightAnimationRef.current = null;
+            (_e = handleAnimationRef.current) === null || _e === void 0 ? void 0 : _e.revert();
+            handleAnimationRef.current = null;
+            (_f = messageAnimationRef.current) === null || _f === void 0 ? void 0 : _f.revert();
+            messageAnimationRef.current = null;
+        };
+    }, [ambientAnimated, prefersReducedMotion]);
+    const setDoorOpen = React.useCallback((nextOpen) => {
+        var _a, _b, _c, _d;
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const door = root.querySelector('[data-not-found-door]');
+        const light = root.querySelector('[data-not-found-light]');
+        const handle = root.querySelector('[data-not-found-handle]');
+        const message = root.querySelector('[data-not-found-message]');
+        if (!door || !light || !handle) {
+            return;
+        }
+        isDoorOpenRef.current = nextOpen;
+        (_a = doorAnimationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        (_b = lightAnimationRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+        (_c = handleAnimationRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+        (_d = messageAnimationRef.current) === null || _d === void 0 ? void 0 : _d.pause();
+        doorAnimationRef.current = null;
+        lightAnimationRef.current = null;
+        handleAnimationRef.current = null;
+        messageAnimationRef.current = null;
+        if (prefersReducedMotion) {
+            door.style.transform = nextOpen ? 'rotateY(-72deg) translateX(-12px)' : 'rotateY(-2deg) translateX(0)';
+            light.style.opacity = nextOpen ? '0.8' : '0.2';
+            light.style.transform = nextOpen ? 'scaleX(1.28)' : 'scaleX(0.78)';
+            if (message) {
+                message.style.opacity = nextOpen ? '1' : '0';
+                message.style.transform = nextOpen ? 'translateY(0)' : 'translateY(8px)';
+            }
+            return;
+        }
+        doorAnimationRef.current = animejs.animate(door, {
+            rotateY: nextOpen ? -72 : -2,
+            translateX: nextOpen ? -12 : 0,
+            duration: 1050,
+            ease: 'inOutCubic',
+        });
+        lightAnimationRef.current = animejs.animate(light, {
+            opacity: nextOpen ? 0.8 : 0.2,
+            scaleX: nextOpen ? 1.28 : 0.78,
+            duration: 1050,
+            ease: 'inOutSine',
+        });
+        handleAnimationRef.current = animejs.animate(handle, {
+            scale: [1, 1.05, 1],
+            duration: 520,
+            ease: 'inOutSine',
+        });
+        if (message) {
+            messageAnimationRef.current = animejs.animate(message, {
+                opacity: nextOpen ? [0, 1] : [1, 0],
+                translateY: nextOpen ? [10, 0] : [0, 4, 10],
+                scale: nextOpen ? [0.96, 1] : [1, 0.98],
+                duration: nextOpen ? 620 : 520,
+                delay: nextOpen ? 320 : 280,
+                ease: nextOpen ? 'outCubic' : 'inOutSine',
+            });
+        }
+    }, [prefersReducedMotion]);
+    React.useEffect(() => {
+        if (doorOpen === undefined || doorOpen === isDoorOpenRef.current) {
+            return;
+        }
+        setDoorOpen(doorOpen);
+    }, [doorOpen, setDoorOpen]);
+    const toggleDoor = () => {
+        const nextOpen = !isDoorOpenRef.current;
+        if (doorOpen !== undefined) {
+            onDoorOpenChange === null || onDoorOpenChange === void 0 ? void 0 : onDoorOpenChange(nextOpen);
+            return;
+        }
+        setDoorOpen(nextOpen);
+        onDoorOpenChange === null || onDoorOpenChange === void 0 ? void 0 : onDoorOpenChange(nextOpen);
+    };
+    return (jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn('relative flex w-full items-center justify-center overflow-hidden px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className), style: doorStyle, children: [jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.75),transparent_34%),linear-gradient(180deg,rgba(250,250,250,0.96),rgba(244,244,245,0.72))] dark:bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.08),transparent_34%),linear-gradient(180deg,rgba(24,24,27,0.96),rgba(9,9,11,0.92))]" }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-1/2 bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.05))] dark:bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.34))]" }), jsxRuntime.jsxs("div", { className: "flex w-full max-w-3xl flex-col items-center gap-5", children: [jsxRuntime.jsx("section", { className: "text-center", children: jsxRuntime.jsx("h3", { className: utils.cn('whitespace-nowrap text-[clamp(2.15rem,8vw,3.4rem)] font-black leading-none tracking-normal bg-linear-to-r bg-clip-text text-transparent', activeGradientClass), children: "Page Not Found" }) }), jsxRuntime.jsx("section", { className: "flex w-full justify-center", children: jsxRuntime.jsxs("div", { className: "relative aspect-[0.78] w-full max-w-[270px] sm:max-w-[315px] md:max-w-[330px] perspective-distant", children: [jsxRuntime.jsx("div", { "data-not-found-light": "", className: "absolute left-[14%] top-[7%] h-[86%] w-[72%] rounded-[28px] bg-[radial-gradient(circle_at_50%_45%,rgba(255,255,255,0.96),color-mix(in_srgb,var(--not-found-theme)_42%,transparent)_42%,transparent_72%)] opacity-25 blur-xl" }), jsxRuntime.jsx("div", { className: "absolute inset-[4%] rounded-[32px] border border-black/10 bg-neutral-950/5 shadow-2xl shadow-black/10 dark:border-white/10 dark:bg-white/5" }), jsxRuntime.jsx("div", { className: "absolute inset-[8%] rounded-[26px] bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(228,228,231,0.86))] shadow-[inset_0_1px_0_rgba(255,255,255,0.85)] dark:bg-[linear-gradient(180deg,rgba(39,39,42,0.92),rgba(24,24,27,0.96))]" }), jsxRuntime.jsxs("p", { "data-not-found-message": "", className: "pointer-events-none absolute right-[16%] top-[29%] z-2 max-w-[46%] text-right text-sm font-medium leading-6 text-muted-foreground opacity-100", children: [jsxRuntime.jsx("span", { className: "block", children: "The page" }), jsxRuntime.jsx("span", { className: "block", children: "you're looking for" }), jsxRuntime.jsx("span", { className: "block", children: "doesn't exist" })] }), jsxRuntime.jsx("button", { type: "button", className: "absolute inset-[8%] z-1 rounded-[26px] outline-none focus-visible:ring-2 focus-visible:ring-(--not-found-theme)", "aria-label": "Toggle the 404 door", onClick: toggleDoor }), jsxRuntime.jsxs("div", { "data-not-found-door": "", className: "absolute inset-[8%] z-10 origin-left rounded-[26px] border border-black/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.92),rgba(212,212,216,0.9))] shadow-2xl shadow-black/20 will-change-transform dark:border-white/10 dark:bg-[linear-gradient(145deg,rgba(63,63,70,0.96),rgba(24,24,27,0.98))]", children: [jsxRuntime.jsxs("div", { className: "absolute inset-4 overflow-hidden rounded-[20px]", children: [jsxRuntime.jsx("div", { "data-not-found-shimmer": "", className: "absolute inset-y-0 w-1/3 -skew-x-12 bg-white/35 blur-md dark:bg-white/12" }), jsxRuntime.jsxs("a", { href: homeUrl, className: "absolute inset-x-5 bottom-5 flex h-[39%] flex-col items-center justify-center gap-2 rounded-2xl border border-black/10 bg-white/25 text-sm text-muted-foreground transition-opacity hover:opacity-80 dark:border-white/10 dark:bg-white/5", children: [jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [siteIcon, jsxRuntime.jsx("span", { children: "Woops!" })] }), jsxRuntime.jsx("span", { className: utils.cn('text-xs font-semibold underline underline-offset-4', activeThemeClass, 'decoration-current'), children: "Back to Homepage" })] })] }), jsxRuntime.jsxs("div", { "data-not-found-plate": "", className: "absolute left-1/2 top-[18%] flex h-[88px] w-[156px] -translate-x-1/2 items-center justify-center overflow-hidden rounded-2xl border border-black/10 bg-white/86 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-black/30", children: [jsxRuntime.jsx("div", { "data-not-found-shimmer": "", className: "absolute inset-y-0 w-1/2 -skew-x-12 bg-white/60 blur-md dark:bg-white/15" }), jsxRuntime.jsx("span", { className: utils.cn('relative text-5xl font-black tabular-nums bg-linear-to-r bg-clip-text text-transparent', activeGradientClass), children: "404" })] }), jsxRuntime.jsx("button", { type: "button", "data-not-found-handle": "", className: "group absolute right-[1%] top-[39%] z-10 flex size-12 items-center justify-center rounded-full outline-none ring-offset-2 transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-(--not-found-theme)", "aria-label": "Toggle the 404 door", onClick: toggleDoor, children: jsxRuntime.jsxs("span", { className: "relative grid h-8 w-6 place-items-center rounded-full border border-black/10 bg-white/50 shadow-inner shadow-black/10 backdrop-blur-sm transform-[rotateY(18deg)] dark:border-white/15 dark:bg-black/25", children: [jsxRuntime.jsx("span", { className: "absolute size-10 rounded-full bg-(--not-found-theme) opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-25" }), jsxRuntime.jsx("span", { className: "relative grid size-4 place-items-center rounded-full border border-black/10 bg-(--not-found-theme) shadow-lg shadow-black/25 dark:border-white/15", children: jsxRuntime.jsx("span", { className: "absolute right-1 top-1 size-1 rounded-full bg-white/75" }) })] }) })] }), dust.map(dot => (jsxRuntime.jsx("span", { "data-not-found-dust": "", className: utils.cn('absolute rounded-full opacity-0', activeBgClass), style: {
+                                        left: dot.left,
+                                        top: dot.top,
+                                        width: dot.size,
+                                        height: dot.size,
+                                    } }, dot.id)))] }) })] })] }));
+}
+
+exports.AnimeNotFoundPage = AnimeNotFoundPage;