@windrun-huaiin/third-ui 16.0.1 → 20.1.0

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';
+

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

@@ -0,0 +1,139 @@
+'use client';
+
+import React from 'react';
+import {
+  BadgeAlertIcon,
+  BadgeCheckIcon,
+  BadgeInfoIcon,
+  BadgeXIcon,
+  XIcon,
+} from '@windrun-huaiin/base-ui/icons';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import {
+  closeButtonClass,
+  dialogContentClass,
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  dialogThemedOverlayClass,
+  dialogTitleClass,
+} from './dialog-styles';
+
+export type InfoDialogType = 'info' | 'warn' | 'success' | 'error';
+type InfoDialogIcon = typeof BadgeInfoIcon;
+
+interface InfoDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  type?: InfoDialogType;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  confirmText?: string;
+  onConfirm?: () => void;
+}
+
+const infoTypeClassMap: Record<InfoDialogType, {
+  content: string;
+  iconWrap: string;
+  icon: string;
+  action: string;
+  Icon: InfoDialogIcon;
+}> = {
+  info: {
+    content: 'border-sky-300 dark:border-sky-700',
+    iconWrap: 'bg-sky-100 text-sky-600 ring-sky-200 dark:bg-sky-950 dark:text-sky-300 dark:ring-sky-900',
+    icon: 'text-sky-600 dark:text-sky-300',
+    action: 'bg-sky-600 text-white hover:bg-sky-700 focus-visible:ring-sky-500 dark:bg-sky-500 dark:hover:bg-sky-400',
+    Icon: BadgeInfoIcon,
+  },
+  warn: {
+    content: 'border-amber-300 dark:border-amber-700',
+    iconWrap: 'bg-amber-100 text-amber-700 ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:ring-amber-900',
+    icon: 'text-amber-700 dark:text-amber-300',
+    action: 'bg-amber-600 text-white hover:bg-amber-700 focus-visible:ring-amber-500 dark:bg-amber-500 dark:hover:bg-amber-400',
+    Icon: BadgeAlertIcon,
+  },
+  success: {
+    content: 'border-emerald-300 dark:border-emerald-700',
+    iconWrap: 'bg-emerald-100 text-emerald-600 ring-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:ring-emerald-900',
+    icon: 'text-emerald-600 dark:text-emerald-300',
+    action: 'bg-emerald-600 text-white hover:bg-emerald-700 focus-visible:ring-emerald-500 dark:bg-emerald-500 dark:hover:bg-emerald-400',
+    Icon: BadgeCheckIcon,
+  },
+  error: {
+    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: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500 dark:bg-red-600 dark:hover:bg-red-500',
+    Icon: BadgeXIcon,
+  },
+};
+
+export function InfoDialog({
+  open,
+  onOpenChange,
+  type = 'info',
+  title,
+  description,
+  confirmText = 'OK',
+  onConfirm,
+}: InfoDialogProps) {
+  const typeClass = infoTypeClassMap[type];
+  const Icon = typeClass.Icon;
+  const handleClose = () => onOpenChange(false);
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent
+        className={cn(dialogContentClass, typeClass.content)}
+        overlayClassName={dialogThemedOverlayClass}
+        onOverlayClick={handleClose}
+      >
+        <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={handleClose}
+            aria-label="Close"
+          >
+            <XIcon className="size-4" />
+          </button>
+        </div>
+
+        <AlertDialogDescription className={dialogDescriptionClass}>
+          {description}
+        </AlertDialogDescription>
+
+        <div className={dialogFooterClass}>
+          <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={() => {
+              onOpenChange(false);
+              onConfirm?.();
+            }}
+          >
+            {confirmText}
+          </AlertDialogAction>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/main/index.ts

@@ -4,7 +4,7 @@
 export * from './go-to-top';
 export * from './loading';
 export * from './nprogress-bar';
-export * from './ads-alert-dialog';
+export * from './alert-dialog';
 export * from './x-button'
 export * from './x-toggle-button'
 export * from './ai-prompt-textarea'