@windrun-huaiin/third-ui 16.0.1 → 20.1.0

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

@@ -0,0 +1,24 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Image = require('next/image');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var ui = require('@windrun-huaiin/base-ui/ui');
+var utils = require('@windrun-huaiin/lib/utils');
+var dialogStyles = require('./dialog-styles.js');
+
+function AdsAlertDialog({ open, onOpenChange, title, description, imgSrc, imgHref, cancelText, onCancel, confirmText, onConfirm, }) {
+    const [imgError, setImgError] = React.useState(false);
+    const handleClose = () => onOpenChange(false);
+    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, 'max-w-md p-4'), 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: "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", children: jsxRuntime.jsx(icons.BellIcon, { className: "size-5" }) }), jsxRuntime.jsx("span", { className: "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: utils.cn(dialogStyles.dialogDescriptionClass, 'mb-3 text-base text-neutral-800 dark:text-neutral-100'), children: description }), imgSrc && (jsxRuntime.jsx("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", children: imgError ? (jsxRuntime.jsxs("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", children: [jsxRuntime.jsx(icons.ImageOffIcon, { className: "mb-2 size-12" }), jsxRuntime.jsx("span", { children: "Image loading failed" })] })) : imgHref ? (jsxRuntime.jsx("a", { href: imgHref, target: "_blank", rel: "noopener noreferrer", className: "block h-full w-full", children: jsxRuntime.jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "rounded-lg object-contain", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" }) })) : (jsxRuntime.jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "rounded-lg object-contain", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" })) })), (cancelText || confirmText) && (jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [cancelText && (jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                onOpenChange(false);
+                                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                            }, className: dialogStyles.secondaryButtonClass, children: cancelText })), confirmText && (jsxRuntime.jsx(ui.AlertDialogAction, { onClick: () => {
+                                onOpenChange(false);
+                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                            }, className: confirmText && !cancelText ? dialogStyles.subtlePrimaryButtonClass : dialogStyles.primaryButtonClass, children: confirmText }))] }))] }) }));
+}
+
+exports.AdsAlertDialog = AdsAlertDialog;

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Image from 'next/image';
+import { BellIcon, XIcon, ImageOffIcon } 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, secondaryButtonClass, subtlePrimaryButtonClass, primaryButtonClass, dialogContentClass } from './dialog-styles.mjs';
+
+function AdsAlertDialog({ open, onOpenChange, title, description, imgSrc, imgHref, cancelText, onCancel, confirmText, onConfirm, }) {
+    const [imgError, setImgError] = useState(false);
+    const handleClose = () => onOpenChange(false);
+    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, 'max-w-md p-4'), overlayClassName: dialogThemedOverlayClass, onOverlayClick: 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-neutral-100 text-neutral-600 ring-1 ring-neutral-200 dark:bg-neutral-900 dark:text-neutral-300 dark:ring-neutral-800", children: jsx(BellIcon, { className: "size-5" }) }), jsx("span", { className: "truncate", children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: cn(dialogDescriptionClass, 'mb-3 text-base text-neutral-800 dark:text-neutral-100'), children: description }), imgSrc && (jsx("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", children: imgError ? (jsxs("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", children: [jsx(ImageOffIcon, { className: "mb-2 size-12" }), jsx("span", { children: "Image loading failed" })] })) : imgHref ? (jsx("a", { href: imgHref, target: "_blank", rel: "noopener noreferrer", className: "block h-full w-full", children: jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "rounded-lg object-contain", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" }) })) : (jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "rounded-lg object-contain", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" })) })), (cancelText || confirmText) && (jsxs("div", { className: dialogFooterClass, children: [cancelText && (jsx("button", { type: "button", onClick: () => {
+                                onOpenChange(false);
+                                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                            }, className: secondaryButtonClass, children: cancelText })), confirmText && (jsx(AlertDialogAction, { onClick: () => {
+                                onOpenChange(false);
+                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                            }, className: confirmText && !cancelText ? subtlePrimaryButtonClass : primaryButtonClass, children: confirmText }))] }))] }) }));
+}
+
+export { AdsAlertDialog };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+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;
+}
+export declare function ConfirmDialog({ open, onOpenChange, type, title, description, cancelText, confirmText, onCancel, onConfirm, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,40 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var ui = require('@windrun-huaiin/base-ui/ui');
+var utils = require('@windrun-huaiin/lib/utils');
+var dialogStyles = require('./dialog-styles.js');
+
+const confirmTypeClassMap = {
+    normal: {
+        content: '',
+        iconWrap: utils.cn(lib.themeBgColor, 'ring-0'),
+        icon: lib.themeIconColor,
+        action: dialogStyles.primaryButtonClass,
+        Icon: icons.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: dialogStyles.dangerButtonClass,
+        Icon: icons.CircleAlertIcon,
+    },
+};
+function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', onCancel, onConfirm, }) {
+    const typeClass = confirmTypeClassMap[type];
+    const Icon = typeClass.Icon;
+    const handleCancel = () => {
+        onOpenChange(false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleCancel, 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: handleCancel, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [jsxRuntime.jsx(ui.AlertDialogCancel, { className: dialogStyles.secondaryButtonClass, onClick: handleCancel, children: cancelText }), jsxRuntime.jsx(ui.AlertDialogAction, { className: typeClass.action, onClick: () => {
+                                onOpenChange(false);
+                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                            }, children: confirmText })] })] }) }));
+}
+
+exports.ConfirmDialog = ConfirmDialog;

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CircleAlertIcon, CircleQuestionMarkIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeBgColor, themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { dangerButtonClass, primaryButtonClass, dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, secondaryButtonClass, dialogContentClass } from './dialog-styles.mjs';
+
+const confirmTypeClassMap = {
+    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,
+    },
+};
+function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', onCancel, onConfirm, }) {
+    const typeClass = confirmTypeClassMap[type];
+    const Icon = typeClass.Icon;
+    const handleCancel = () => {
+        onOpenChange(false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleCancel, 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: handleCancel, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsxs("div", { className: dialogFooterClass, children: [jsx(AlertDialogCancel, { className: secondaryButtonClass, onClick: handleCancel, children: cancelText }), jsx(AlertDialogAction, { className: typeClass.action, onClick: () => {
+                                onOpenChange(false);
+                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                            }, children: confirmText })] })] }) }));
+}
+
+export { ConfirmDialog };

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

@@ -0,0 +1,14 @@
+export declare const dialogSurfaceClass: string;
+export declare const dialogThemedOverlayClass: string;
+export declare const dialogContentClass: 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 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";
+export declare const primaryButtonClass: string;
+export declare const subtlePrimaryButtonClass: string;
+export declare 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 declare const highPriorityTitleClass: string;
+export declare const highPrioritySurfaceClass: string;

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

@@ -0,0 +1,35 @@
+"use client";
+'use strict';
+
+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 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 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 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';
+const primaryButtonClass = utils.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', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, lib.themeRingColor);
+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);
+
+exports.closeButtonClass = closeButtonClass;
+exports.dangerButtonClass = dangerButtonClass;
+exports.dialogContentClass = dialogContentClass;
+exports.dialogDescriptionClass = dialogDescriptionClass;
+exports.dialogFooterClass = dialogFooterClass;
+exports.dialogHeaderClass = dialogHeaderClass;
+exports.dialogSurfaceClass = dialogSurfaceClass;
+exports.dialogThemedOverlayClass = dialogThemedOverlayClass;
+exports.dialogTitleClass = dialogTitleClass;
+exports.highPrioritySurfaceClass = highPrioritySurfaceClass;
+exports.highPriorityTitleClass = highPriorityTitleClass;
+exports.primaryButtonClass = primaryButtonClass;
+exports.secondaryButtonClass = secondaryButtonClass;
+exports.subtlePrimaryButtonClass = subtlePrimaryButtonClass;

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

@@ -0,0 +1,20 @@
+"use client";
+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 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 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 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';
+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);
+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);
+
+export { closeButtonClass, dangerButtonClass, dialogContentClass, dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogSurfaceClass, dialogThemedOverlayClass, dialogTitleClass, highPrioritySurfaceClass, highPriorityTitleClass, primaryButtonClass, secondaryButtonClass, subtlePrimaryButtonClass };

package/dist/main/alert-dialog/high-priority-confirm-dialog.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface HighPriorityConfirmDialogProps {
+    open: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+    title: string;
+    description: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+}
+export declare function HighPriorityConfirmDialog({ open, onCancel, onConfirm, title, description, confirmText, cancelText, }: HighPriorityConfirmDialogProps): React.ReactPortal | null;
+export {};

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

@@ -0,0 +1,23 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var utils = require('@windrun-huaiin/lib/utils');
+var dialogStyles = require('./dialog-styles.js');
+var lib = require('@windrun-huaiin/base-ui/lib');
+
+function HighPriorityConfirmDialog({ open, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", }) {
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+        // Ensure portal target exists and prevent hydration mismatch
+        setTimeout(() => setMounted(true), 0);
+    }, []);
+    if (!open || !mounted)
+        return null;
+    return 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: onCancel, "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: onCancel, className: dialogStyles.secondaryButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: onConfirm, className: utils.cn(dialogStyles.primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] }) }), document.body);
+}
+
+exports.HighPriorityConfirmDialog = HighPriorityConfirmDialog;

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { themeIconColor, themeBgColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
+
+function HighPriorityConfirmDialog({ open, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", }) {
+    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(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: onCancel, "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: onCancel, className: secondaryButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: onConfirm, className: cn(primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] }) }), document.body);
+}
+
+export { HighPriorityConfirmDialog };

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export type InfoDialogType = 'info' | 'warn' | 'success' | 'error';
+interface InfoDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    type?: InfoDialogType;
+    title: React.ReactNode;
+    description: React.ReactNode;
+    confirmText?: string;
+    onConfirm?: () => void;
+}
+export declare function InfoDialog({ open, onOpenChange, type, title, description, confirmText, onConfirm, }: InfoDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,50 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var ui = require('@windrun-huaiin/base-ui/ui');
+var utils = require('@windrun-huaiin/lib/utils');
+var dialogStyles = require('./dialog-styles.js');
+
+const infoTypeClassMap = {
+    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: icons.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: icons.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: icons.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: icons.BadgeXIcon,
+    },
+};
+function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', onConfirm, }) {
+    const typeClass = infoTypeClassMap[type];
+    const Icon = typeClass.Icon;
+    const handleClose = () => onOpenChange(false);
+    return (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: () => {
+                            onOpenChange(false);
+                            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                        }, children: confirmText }) })] }) }));
+}
+
+exports.InfoDialog = InfoDialog;

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

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } 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';
+
+const infoTypeClassMap = {
+    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,
+    },
+};
+function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', onConfirm, }) {
+    const typeClass = infoTypeClassMap[type];
+    const Icon = typeClass.Icon;
+    const handleClose = () => onOpenChange(false);
+    return (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: () => {
+                            onOpenChange(false);
+                            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+                        }, children: confirmText }) })] }) }));
+}
+
+export { InfoDialog };

package/dist/main/index.d.ts

@@ -1,7 +1,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';

package/dist/main/index.js

@@ -4,7 +4,10 @@
 var goToTop = require('./go-to-top.js');
 var loading = require('./loading.js');
 var nprogressBar = require('./nprogress-bar.js');
-var adsAlertDialog = require('./ads-alert-dialog.js');
+var adsAlertDialog = require('./alert-dialog/ads-alert-dialog.js');
+var confirmDialog = require('./alert-dialog/confirm-dialog.js');
+var highPriorityConfirmDialog = require('./alert-dialog/high-priority-confirm-dialog.js');
+var infoDialog = require('./alert-dialog/info-dialog.js');
 var xButton = require('./x-button.js');
 var xToggleButton = require('./x-toggle-button.js');
 var aiPromptTextarea = require('./ai-prompt-textarea.js');
@@ -33,6 +36,9 @@ exports.Loading = loading.Loading;
 exports.getLoadingCycleDurationMs = loading.getLoadingCycleDurationMs;
 exports.NProgressBar = nprogressBar.NProgressBar;
 exports.AdsAlertDialog = adsAlertDialog.AdsAlertDialog;
+exports.ConfirmDialog = confirmDialog.ConfirmDialog;
+exports.HighPriorityConfirmDialog = highPriorityConfirmDialog.HighPriorityConfirmDialog;
+exports.InfoDialog = infoDialog.InfoDialog;
 exports.XButton = xButton.XButton;
 exports.XToggleButton = xToggleButton.XToggleButton;
 exports.AIPromptTextarea = aiPromptTextarea.AIPromptTextarea;

package/dist/main/index.mjs

@@ -2,7 +2,10 @@
 export { GoToTop } from './go-to-top.mjs';
 export { Loading, getLoadingCycleDurationMs } from './loading.mjs';
 export { NProgressBar } from './nprogress-bar.mjs';
-export { AdsAlertDialog } from './ads-alert-dialog.mjs';
+export { AdsAlertDialog } from './alert-dialog/ads-alert-dialog.mjs';
+export { ConfirmDialog } from './alert-dialog/confirm-dialog.mjs';
+export { HighPriorityConfirmDialog } from './alert-dialog/high-priority-confirm-dialog.mjs';
+export { InfoDialog } from './alert-dialog/info-dialog.mjs';
 export { XButton } from './x-button.mjs';
 export { XToggleButton } from './x-toggle-button.mjs';
 export { AIPromptTextarea } from './ai-prompt-textarea.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "16.0.1",
+  "version": "20.1.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -102,9 +102,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^16.0.0",
-    "@windrun-huaiin/lib": "^16.0.0",
-    "@windrun-huaiin/contracts": "^16.0.0"
+    "@windrun-huaiin/base-ui": "^20.1.0",
+    "@windrun-huaiin/contracts": "^20.0.0",
+    "@windrun-huaiin/lib": "^20.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",