@windrun-huaiin/third-ui 20.0.0 → 21.0.0

package/src/fuma/mdx/math.tsx

@@ -0,0 +1,130 @@
+import katex from 'katex';
+import { cn } from '@windrun-huaiin/lib/utils';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type MathSourceProps = {
+  children?: ReactNode;
+  math?: string;
+  formula?: string;
+};
+
+type Align = 'left' | 'center' | 'right';
+
+export type MathBlockProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
+  MathSourceProps & {
+    title?: ReactNode;
+    titleAlign?: Align;
+  };
+
+export type InlineMathProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> &
+  MathSourceProps & {
+    align?: Align;
+  };
+
+const alignClassMap: Record<Align, string> = {
+  left: 'text-left justify-start',
+  center: 'text-center justify-center',
+  right: 'text-right justify-end',
+};
+
+const textAlignClassMap: Record<Align, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+function getMathSource({ children, math, formula }: MathSourceProps): string {
+  if (typeof math === 'string' && math.trim() !== '') return math.trim();
+  if (typeof formula === 'string' && formula.trim() !== '') return formula.trim();
+  if (typeof children === 'string' && children.trim() !== '') return children.trim();
+
+  if (Array.isArray(children)) {
+    const text = children
+      .map((item) => (typeof item === 'string' ? item : ''))
+      .join('')
+      .trim();
+
+    if (text !== '') return text;
+  }
+
+  return '';
+}
+
+function renderMath(source: string, displayMode: boolean) {
+  if (source === '') return '';
+
+  return katex.renderToString(source, {
+    displayMode,
+    throwOnError: false,
+    output: 'html',
+    strict: 'ignore',
+    trust: false,
+  });
+}
+
+export function MathBlock({
+  title,
+  titleAlign = 'center',
+  children,
+  math,
+  formula,
+  className,
+  ...props
+}: MathBlockProps) {
+  const source = getMathSource({ children, math, formula });
+  const html = renderMath(source, true);
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        'not-prose my-6 overflow-x-auto rounded-xl border bg-fd-card p-4 text-fd-card-foreground',
+        className,
+      )}
+    >
+      {title ? (
+        <div
+          className={cn(
+            'mb-3 text-sm font-medium text-fd-muted-foreground',
+            alignClassMap[titleAlign].split(' ')[0],
+          )}
+        >
+          {title}
+        </div>
+      ) : null}
+      {html ? (
+        <div
+          className="min-w-fit [&_.katex-display]:my-0 [&_.katex-display]:overflow-x-auto [&_.katex-display]:overflow-y-hidden"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      ) : (
+        <div className="text-sm text-fd-muted-foreground">Empty math block.</div>
+      )}
+    </div>
+  );
+}
+
+export function InlineMath({
+  children,
+  math,
+  formula,
+  align = 'center',
+  className,
+  ...props
+}: InlineMathProps) {
+  const source = getMathSource({ children, math, formula });
+  const html = renderMath(source, false);
+
+  return (
+    <span
+      {...props}
+      className={cn(
+        'mx-1 inline-flex max-w-full align-middle rounded-md bg-neutral-200 px-2 py-0.5 text-sm leading-none dark:bg-white/20 [&_.katex]:text-inherit',
+        textAlignClassMap[align],
+        className,
+      )}
+    >
+      <span dangerouslySetInnerHTML={{ __html: html }} />
+    </span>
+  );
+}

package/src/fuma/mdx/zia-card.tsx

@@ -22,6 +22,7 @@ export function ZiaCard({ icon, title, description, ...props }: ZiaCardProps) {
     return (
       <Link
         href={props.href!}
+        prefetch={false}
         data-card
         className={cn(
           'block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full',

package/src/main/{ads-alert-dialog.tsx → alert-dialog/ads-alert-dialog.tsx}

@@ -1,15 +1,28 @@
 'use client';
 
-import React, { useState } from "react";
-import Image from "next/image";
-import { ImageOffIcon, InfoIcon, XIcon } from "@windrun-huaiin/base-ui/icons";
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { BellIcon, ImageOffIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import {
   AlertDialog,
+  AlertDialogAction,
   AlertDialogContent,
-  AlertDialogTitle,
   AlertDialogDescription,
-  AlertDialogAction,
-} from "@windrun-huaiin/base-ui/ui";
+  AlertDialogTitle,
+} from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import {
+  closeButtonClass,
+  dialogContentClass,
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  dialogThemedOverlayClass,
+  dialogTitleClass,
+  primaryButtonClass,
+  secondaryButtonClass,
+  subtlePrimaryButtonClass,
+} from './dialog-styles';
 
 interface AdsAlertDialogProps {
   open: boolean;
@@ -37,49 +50,52 @@ export function AdsAlertDialog({
   onConfirm,
 }: AdsAlertDialogProps) {
   const [imgError, setImgError] = useState(false);
+  const handleClose = () => onOpenChange(false);
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent
-        className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl border border-neutral-200 dark:border-neutral-700 max-w-md w-full min-w-[320px] p-4 flex flex-col items-stretch"
+        className={cn(dialogContentClass, 'max-w-md p-4')}
+        overlayClassName={dialogThemedOverlayClass}
+        onOverlayClick={handleClose}
       >
-        {/* Header: left icon + title, right X close */}
-        <div className="flex flex-row items-center justify-between mb-2">
+        <div className={dialogHeaderClass}>
           <AlertDialogTitle asChild>
-            <div className="flex flex-row items-center gap-1 min-w-0 text-xl font-semibold">
-              <InfoIcon className="w-5 h-5" />
+            <div className={dialogTitleClass}>
+              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 ring-1 ring-neutral-200 dark:bg-neutral-900 dark:text-neutral-300 dark:ring-neutral-800">
+                <BellIcon className="size-5" />
+              </span>
               <span className="truncate">{title}</span>
             </div>
           </AlertDialogTitle>
           <button
-            className="text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 text-xl ml-4"
-            onClick={() => onOpenChange(false)}
+            type="button"
+            className={closeButtonClass}
+            onClick={handleClose}
             aria-label="Close"
-            tabIndex={0}
           >
-            <XIcon className="w-5 h-5" />
+            <XIcon className="size-4" />
           </button>
         </div>
-        
-        {/* description area */}
-        <AlertDialogDescription className="text-base font-medium text-neutral-800 dark:text-neutral-100 mb-2">
+
+        <AlertDialogDescription className={cn(dialogDescriptionClass, 'mb-3 text-base text-neutral-800 dark:text-neutral-100')}>
           {description}
         </AlertDialogDescription>
-        {/* image area (optional) */}
+
         {imgSrc && (
-          <div className="w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2">
+          <div className="relative mb-2 flex h-[220px] w-full max-w-[400px] items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900">
             {imgError ? (
-              <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg text-neutral-400 text-sm">
-                <ImageOffIcon className="w-12 h-12 mb-2" />
+              <div className="absolute inset-0 flex flex-col items-center justify-center border border-dashed border-neutral-300 text-sm text-neutral-400 dark:border-neutral-700">
+                <ImageOffIcon className="mb-2 size-12" />
                 <span>Image loading failed</span>
               </div>
             ) : imgHref ? (
-              <a href={imgHref} target="_blank" rel="noopener noreferrer" className="block w-full h-full">
+              <a href={imgHref} target="_blank" rel="noopener noreferrer" className="block h-full w-full">
                 <Image
                   src={imgSrc}
                   alt="image"
                   fill
-                  className="object-contain rounded-lg"
+                  className="rounded-lg object-contain"
                   priority={false}
                   placeholder="empty"
                   unoptimized
@@ -92,7 +108,7 @@ export function AdsAlertDialog({
                 src={imgSrc}
                 alt="image"
                 fill
-                className="object-contain rounded-lg"
+                className="rounded-lg object-contain"
                 priority={false}
                 placeholder="empty"
                 unoptimized
@@ -102,16 +118,17 @@ export function AdsAlertDialog({
             )}
           </div>
         )}
-        {/* button area (optional) */}
+
         {(cancelText || confirmText) && (
-          <div className="flex justify-end gap-2 mt-2">
+          <div className={dialogFooterClass}>
             {cancelText && (
               <button
+                type="button"
                 onClick={() => {
                   onOpenChange(false);
                   onCancel?.();
                 }}
-                className="px-6 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200 font-semibold hover:bg-neutral-100 dark:hover:bg-neutral-700 transition"
+                className={secondaryButtonClass}
               >
                 {cancelText}
               </button>
@@ -122,7 +139,7 @@ export function AdsAlertDialog({
                   onOpenChange(false);
                   onConfirm?.();
                 }}
-                className="px-6 py-2 rounded-lg bg-purple-500 text-white font-semibold hover:bg-purple-600 transition"
+                className={confirmText && !cancelText ? subtlePrimaryButtonClass : primaryButtonClass}
               >
                 {confirmText}
               </AlertDialogAction>

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

@@ -0,0 +1,131 @@
+'use client';
+
+import React from 'react';
+import { CircleAlertIcon, CircleQuestionMarkIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeBgColor, themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import {
+  closeButtonClass,
+  dangerButtonClass,
+  dialogContentClass,
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  dialogThemedOverlayClass,
+  dialogTitleClass,
+  primaryButtonClass,
+  secondaryButtonClass,
+} from './dialog-styles';
+
+export type ConfirmDialogType = 'normal' | 'danger';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  type?: ConfirmDialogType;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  cancelText?: string;
+  confirmText?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+}
+
+const confirmTypeClassMap: Record<ConfirmDialogType, {
+  content: string;
+  iconWrap: string;
+  icon: string;
+  action: string;
+  Icon: typeof CircleQuestionMarkIcon;
+}> = {
+  normal: {
+    content: '',
+    iconWrap: cn(themeBgColor, 'ring-0'),
+    icon: themeIconColor,
+    action: primaryButtonClass,
+    Icon: CircleQuestionMarkIcon,
+  },
+  danger: {
+    content: 'border-red-300 dark:border-red-700',
+    iconWrap: 'bg-red-100 text-red-600 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900',
+    icon: 'text-red-600 dark:text-red-300',
+    action: dangerButtonClass,
+    Icon: CircleAlertIcon,
+  },
+};
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  type = 'normal',
+  title,
+  description,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  onCancel,
+  onConfirm,
+}: ConfirmDialogProps) {
+  const typeClass = confirmTypeClassMap[type];
+  const Icon = typeClass.Icon;
+
+  const handleCancel = () => {
+    onOpenChange(false);
+    onCancel?.();
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent
+        className={cn(dialogContentClass, typeClass.content)}
+        overlayClassName={dialogThemedOverlayClass}
+        onOverlayClick={handleCancel}
+      >
+        <div className={dialogHeaderClass}>
+          <AlertDialogTitle asChild>
+            <div className={dialogTitleClass}>
+              <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>
+            </div>
+          </AlertDialogTitle>
+          <button
+            type="button"
+            className={closeButtonClass}
+            onClick={handleCancel}
+            aria-label="Close"
+          >
+            <XIcon className="size-4" />
+          </button>
+        </div>
+
+        <AlertDialogDescription className={dialogDescriptionClass}>
+          {description}
+        </AlertDialogDescription>
+
+        <div className={dialogFooterClass}>
+          <AlertDialogCancel className={secondaryButtonClass} onClick={handleCancel}>
+            {cancelText}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            className={typeClass.action}
+            onClick={() => {
+              onOpenChange(false);
+              onConfirm?.();
+            }}
+          >
+            {confirmText}
+          </AlertDialogAction>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -0,0 +1,73 @@
+'use client';
+
+import {
+  themeBgColor,
+  themeBorderColor,
+  themeButtonGradientClass,
+  themeButtonGradientHoverClass,
+  themeIconColor,
+  themeMainBgColor,
+  themeRingColor,
+} from '@windrun-huaiin/base-ui/lib';
+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',
+  'border-neutral-200 dark:border-neutral-800'
+);
+
+export const dialogThemedOverlayClass = cn(
+  themeMainBgColor,
+  'opacity-90 backdrop-blur-[2px] dark:opacity-85'
+);
+
+export const dialogContentClass = cn(
+  'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
+  dialogSurfaceClass
+);
+
+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';
+
+export const dialogDescriptionClass =
+  'mt-3 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';
+
+export 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 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';
+
+export const primaryButtonClass = cn(
+  'inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold text-white shadow-sm transition hover:shadow-md focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60',
+  themeButtonGradientClass,
+  themeButtonGradientHoverClass,
+  themeRingColor
+);
+
+export 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
+);
+
+export 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';
+
+export const highPriorityTitleClass = cn(
+  'flex min-w-0 items-center gap-2 text-lg font-bold leading-tight',
+  themeIconColor
+);
+
+export const highPrioritySurfaceClass = cn(
+  dialogSurfaceClass,
+  'backdrop-blur-md ring-4 animate-in zoom-in-95 duration-300',
+  themeBorderColor,
+  themeRingColor
+);

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

@@ -0,0 +1,94 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { FAQSIcon, XIcon } from "@windrun-huaiin/base-ui/icons";
+import { cn } from "@windrun-huaiin/lib/utils";
+import {
+  closeButtonClass,
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  highPrioritySurfaceClass,
+  highPriorityTitleClass,
+  primaryButtonClass,
+  secondaryButtonClass,
+} from "./dialog-styles";
+import { themeBgColor, themeBorderColor, themeIconColor } from "@windrun-huaiin/base-ui/lib";
+
+interface HighPriorityConfirmDialogProps {
+  open: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export function HighPriorityConfirmDialog({
+  open,
+  onCancel,
+  onConfirm,
+  title,
+  description,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+}: HighPriorityConfirmDialogProps) {
+  const [mounted, setMounted] = useState(false);
+  
+  useEffect(() => {
+    // Ensure portal target exists and prevent hydration mismatch
+    setTimeout(() => setMounted(true), 0);
+  }, []);
+
+  if (!open || !mounted) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
+      <div 
+        className={cn(highPrioritySurfaceClass, "scale-100")}
+        role="dialog"
+        aria-modal="true"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className={dialogHeaderClass}>
+          <h3 className={highPriorityTitleClass}>
+            <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>
+          </h3>
+          <button
+            type="button"
+            className={closeButtonClass}
+            onClick={onCancel}
+            aria-label="Close"
+          >
+            <XIcon className="size-4" />
+          </button>
+        </div>
+        <div className={dialogDescriptionClass}>
+          {description}
+        </div>
+        <div className={dialogFooterClass}>
+          <button
+            type="button"
+            onClick={onCancel}
+            className={secondaryButtonClass}
+          >
+            {cancelText}
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

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

@@ -0,0 +1,7 @@
+'use client';
+
+export * from './ads-alert-dialog';
+export * from './confirm-dialog';
+export * from './high-priority-confirm-dialog';
+export * from './info-dialog';
+