@windrun-huaiin/third-ui 29.2.1 → 30.1.0

package/src/main/404-page.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { NotFoundIcon } from '@windrun-huaiin/base-ui/components/shared';
+import {
+  THEME_BUTTON_GRADIENT_CLASS_MAP,
+  themeBgColor,
+  themeButtonGradientClass,
+  themeIconColor,
+  themeViaColor,
+  type SupportedThemeColor,
+} from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useEffect, useState, type ReactNode } from 'react';
+
+interface NotFoundPageProps {
+  siteIcon: ReactNode;
+  errorIcon?: ReactNode;
+  className?: string;
+  compact?: boolean;
+  themeClass?: SupportedThemeColor;
+  animated?: boolean;
+}
+
+const THEME_BG_CLASS_MAP: Record<SupportedThemeColor, string> = {
+  '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 THEME_VIA_CLASS_MAP: Record<SupportedThemeColor, string> = {
+  'text-purple-500': 'via-purple-500/20',
+  'text-orange-500': 'via-orange-500/20',
+  'text-indigo-500': 'via-indigo-500/20',
+  'text-emerald-500': 'via-emerald-500/20',
+  'text-rose-500': 'via-rose-500/20',
+};
+
+export function NotFoundPage({
+  siteIcon,
+  errorIcon,
+  className,
+  compact = false,
+  themeClass,
+  animated = true,
+}: NotFoundPageProps) {
+  const [glitchText, setGlitchText] = useState('404');
+  const homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/';
+  const activeThemeClass = themeClass ?? themeIconColor;
+  const activeGradientClass = themeClass ? THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : themeButtonGradientClass;
+  const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : themeBgColor;
+  const activeViaClass = themeClass ? THEME_VIA_CLASS_MAP[themeClass] : themeViaColor;
+
+  useEffect(() => {
+    if (!animated) {
+      setGlitchText('404');
+      return undefined;
+    }
+
+    const glitchChars = ['4', '0', '4', '?', '#', '!', '*', '&', '%', '$'];
+
+    const interval = setInterval(() => {
+      if (Math.random() < 0.5) {
+        setGlitchText('404');
+      } else {
+        const randomChars = Array.from(
+          { length: 3 },
+          () => glitchChars[Math.floor(Math.random() * glitchChars.length)]
+        ).join('');
+        setGlitchText(randomChars);
+      }
+    }, 600);
+
+    return () => clearInterval(interval);
+  }, [animated]);
+
+  return (
+    <div className={cn('relative flex w-full flex-col items-center justify-center px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className)}>
+      <div className="text-center space-y-8 max-w-2xl">
+        <div className="relative flex justify-center">
+          <h1
+            className={cn(
+              'text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none',
+              activeGradientClass
+            )}
+            style={{
+              fontFamily: 'Montserrat, monospace',
+              textShadow: '0 0 30px rgba(172, 98, 253, 0.3)',
+              letterSpacing: '0.1em',
+            }}
+          >
+            {glitchText}
+          </h1>
+          <div className="absolute inset-0 pointer-events-none">
+            <div className={cn('h-full w-full bg-linear-to-b from-transparent to-transparent', animated && 'animate-pulse', activeViaClass)} />
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl md:text-3xl font-semibold text-foreground">
+            Page Not Found
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-md mx-auto leading-relaxed">
+            The page you&#39;re looking for doesn&#39;t exist
+          </p>
+          <a
+            href={homeUrl}
+            className={cn(
+              'inline-flex text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80',
+              activeThemeClass,
+              'decoration-current'
+            )}
+          >
+            Back to Homepage
+          </a>
+        </div>
+
+        <div className="flex justify-center items-center gap-8 pt-8 opacity-60">
+          <a
+            href={homeUrl}
+            className="flex items-center gap-2 text-sm text-muted-foreground transition-opacity hover:opacity-80"
+          >
+            {siteIcon}
+            <span>Woops!</span>
+          </a>
+          <div className={cn('w-2 h-2 rounded-full', animated && 'animate-ping', activeBgClass)} />
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            {errorIcon ?? <NotFoundIcon />}
+            <span>Error Code: 404</span>
+          </div>
+        </div>
+      </div>
+
+      <div className={cn('pointer-events-none inset-0 overflow-hidden -z-10', compact ? 'absolute' : 'fixed')}>
+        <div
+          className="absolute inset-0 opacity-[0.02] dark:opacity-[0.05]"
+          style={{
+            backgroundImage: `
+                linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
+              `,
+            backgroundSize: '50px 50px',
+          }}
+        />
+
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div
+            key={i}
+            className={cn('absolute w-2 h-2 rounded-full', animated && 'animate-bounce', activeBgClass)}
+            style={{
+              left: `${20 + i * 15}%`,
+              top: `${30 + (i % 3) * 20}%`,
+              animationDelay: `${i * 0.5}s`,
+              animationDuration: `${2 + i * 0.3}s`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/main/alert-dialog/confirm-dialog.tsx

@@ -21,6 +21,7 @@ import {
   dialogHeaderClass,
   dialogThemedOverlayClass,
   dialogTitleClass,
+  dialogTitleTextClass,
   primaryButtonClass,
   secondaryButtonClass,
 } from './dialog-styles';
@@ -108,7 +109,7 @@ export function ConfirmDialog({
                 <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
                   <Icon className={cn('size-5', typeClass.icon)} />
                 </span>
-                <span className="min-w-0 truncate">{title}</span>
+                <span className={dialogTitleTextClass}>{title}</span>
               </div>
             </AlertDialogTitle>
             <button

package/src/main/alert-dialog/dialog-loading-action.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 import { Loading } from '../loading';
+import { dialogLoadingContentClass } from './dialog-styles';
 
 export type DialogLoadingAction = 'cancel' | 'confirm' | 'undo';
 export type DialogActionHandler = () => void | Promise<void>;
@@ -29,18 +30,19 @@ export function useDialogLoadingAction({
     action: DialogLoadingAction,
     handler?: DialogActionHandler
   ) => {
-    onOpenChange(false);
-
     if (!handler) {
+      onOpenChange(false);
       return;
     }
 
     if (!loadingActions?.includes(action)) {
+      onOpenChange(false);
       await handler();
       return;
     }
 
     setLoading(true);
+    onOpenChange(false);
 
     try {
       await handler();
@@ -56,12 +58,12 @@ export function useDialogLoadingAction({
           <Loading className="h-full w-full" />
         </div>
       ) : (
-        <div className="pointer-events-none fixed inset-0 z-10000 flex items-center justify-center p-4">
-          <div className="pointer-events-auto overflow-hidden rounded-[28px] bg-neutral-50/58 shadow-[0_18px_56px_rgba(15,23,42,0.14)] backdrop-blur-md dark:bg-neutral-900/58 dark:shadow-[0_18px_56px_rgba(0,0,0,0.34)]">
+        <div className="fixed inset-0 z-10000">
+          <div className={dialogLoadingContentClass}>
             <Loading
               compact
               label="Loading"
-              className="min-h-[250px] w-[min(22rem,calc(100vw-2rem))] bg-transparent"
+              className="min-h-[220px] w-fit max-w-full rounded-none bg-transparent px-0 py-0 dark:bg-transparent"
               labelClassName="text-foreground"
             />
           </div>

package/src/main/alert-dialog/dialog-styles.ts

@@ -12,7 +12,7 @@ import {
 import { cn } from '@windrun-huaiin/lib/utils';
 
 export 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',
+  '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'
 );
 
@@ -26,13 +26,22 @@ export const dialogContentClass = cn(
   dialogSurfaceClass
 );
 
+export 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'
+);
+
 export const dialogHeaderClass = 'flex items-start justify-between gap-4';
 
 export const dialogTitleClass =
-  'flex min-w-0 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50';
+  'flex min-w-0 flex-1 items-center gap-2 text-lg font-bold leading-tight text-neutral-950 dark:text-neutral-50';
+
+export const dialogTitleTextClass =
+  'min-w-0 flex-1 line-clamp-2 break-words';
 
 export const dialogDescriptionClass =
-  'mt-3 text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300';
+  'mt-3 break-words text-sm font-medium leading-relaxed text-neutral-600 dark:text-neutral-300';
 
 export const dialogFooterClass = 'mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end';
 
@@ -67,6 +76,7 @@ export const highPriorityTitleClass = cn(
 
 export const highPrioritySurfaceClass = cn(
   dialogSurfaceClass,
+  'flex flex-col',
   'backdrop-blur-md ring-4 animate-in zoom-in-95 duration-300',
   themeBorderColor,
   themeRingColor

package/src/main/alert-dialog/high-priority-confirm-dialog.tsx

@@ -11,6 +11,7 @@ import {
   dialogHeaderClass,
   highPrioritySurfaceClass,
   highPriorityTitleClass,
+  dialogTitleTextClass,
   primaryButtonClass,
   secondaryButtonClass,
 } from "./dialog-styles";
@@ -71,7 +72,7 @@ export function HighPriorityConfirmDialog({
                 <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor)}>
                   <FAQSIcon className={cn('size-5', themeIconColor)} />
                 </span>
-                <span className="min-w-0 truncate">{title}</span>
+                <span className={dialogTitleTextClass}>{title}</span>
               </h3>
               <button
                 type="button"
@@ -82,28 +83,30 @@ export function HighPriorityConfirmDialog({
                 <XIcon className="size-4" />
               </button>
             </div>
-            <div className={dialogDescriptionClass}>
-              {description}
-            </div>
-            <div className={dialogFooterClass}>
-              <button
-                type="button"
-                onClick={() => {
-                  void runDialogAction('cancel', onCancel);
-                }}
-                className={secondaryButtonClass}
-              >
-                {cancelText}
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  void runDialogAction('confirm', onConfirm);
-                }}
-                className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
-              >
-                {confirmText}
-              </button>
+            <div className="flex min-h-0 flex-1 flex-col">
+              <div className={dialogDescriptionClass}>
+                {description}
+              </div>
+              <div className={cn(dialogFooterClass, 'mt-auto')}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    void runDialogAction('cancel', onCancel);
+                  }}
+                  className={secondaryButtonClass}
+                >
+                  {cancelText}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    void runDialogAction('confirm', onConfirm);
+                  }}
+                  className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
+                >
+                  {confirmText}
+                </button>
+              </div>
             </div>
           </div>
         </div>,

package/src/main/alert-dialog/info-dialog.tsx

@@ -24,6 +24,7 @@ import {
   dialogHeaderClass,
   dialogThemedOverlayClass,
   dialogTitleClass,
+  dialogTitleTextClass,
 } from './dialog-styles';
 import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from './dialog-loading-action';
 
@@ -109,7 +110,7 @@ export function InfoDialog({
                 <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
                   <Icon className={cn('size-5', typeClass.icon)} />
                 </span>
-                <span className="min-w-0 truncate">{title}</span>
+                <span className={dialogTitleTextClass}>{title}</span>
               </div>
             </AlertDialogTitle>
             <button

package/src/main/alert-dialog/undoable-confirm-dialog.tsx

@@ -19,6 +19,7 @@ import {
   dialogHeaderClass,
   dialogThemedOverlayClass,
   dialogTitleClass,
+  dialogTitleTextClass,
   secondaryButtonClass,
 } from './dialog-styles';
 import type { ConfirmDialogEmphasis } from './confirm-dialog';
@@ -163,7 +164,7 @@ export function UndoableConfirmDialog({
                 <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">
                   {pending ? <Trash2Icon className="size-5" /> : <CircleAlertIcon className="size-5" />}
                 </span>
-                <span className="min-w-0 truncate">{displayTitle}</span>
+                <span className={dialogTitleTextClass}>{displayTitle}</span>
               </div>
             </AlertDialogTitle>
             <button
@@ -199,7 +200,7 @@ export function UndoableConfirmDialog({
                 onClick={() => {
                   void handleUndo();
                 }}
-                className={secondaryButtonClass}
+                className={cn(secondaryButtonClass, 'w-full sm:w-auto')}
                 disabled={confirming}
               >
                 <Undo2Icon className="mr-1.5 size-4" />
@@ -207,21 +208,21 @@ export function UndoableConfirmDialog({
               </button>
             ) : (
               <>
-                <button
-                  type="button"
-                  onClick={handleCancel}
-                  className={cancelButtonClass}
-                >
-                  {cancelText}
-                </button>
-                <button
-                  type="button"
-                  onClick={startCountdown}
-                  className={confirmButtonClass}
-                >
-                  {confirmText}
-                </button>
-              </>
+              <button
+                type="button"
+                onClick={handleCancel}
+                className={cn(cancelButtonClass, 'w-full sm:w-auto')}
+              >
+                {cancelText}
+              </button>
+              <button
+                type="button"
+                onClick={startCountdown}
+                className={cn(confirmButtonClass, 'w-full sm:w-auto')}
+              >
+                {confirmText}
+              </button>
+            </>
             )}
           </div>
         </AlertDialogContent>