@windrun-huaiin/third-ui 20.0.0 → 21.0.0

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'

package/src/main/language-detector.tsx

@@ -1,11 +1,3 @@
-/**
- * @license
- * MIT License
- * Copyright (c) 2026 D8ger
- * 
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 'use client'
 
 import { XIcon } from "@windrun-huaiin/base-ui/icons"

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

@@ -1,21 +0,0 @@
-"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');
-
-function AdsAlertDialog({ open, onOpenChange, title, description, imgSrc, imgHref, cancelText, onCancel, confirmText, onConfirm, }) {
-    const [imgError, setImgError] = React.useState(false);
-    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.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", children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between mb-2", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1 min-w-0 text-xl font-semibold", children: [jsxRuntime.jsx(icons.InfoIcon, { className: "w-5 h-5" }), jsxRuntime.jsx("span", { className: "truncate", children: title })] }) }), jsxRuntime.jsx("button", { className: "text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 text-xl ml-4", onClick: () => onOpenChange(false), "aria-label": "Close", tabIndex: 0, children: jsxRuntime.jsx(icons.XIcon, { className: "w-5 h-5" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: "text-base font-medium text-neutral-800 dark:text-neutral-100 mb-2", children: description }), imgSrc && (jsxRuntime.jsx("div", { className: "w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2", children: imgError ? (jsxRuntime.jsxs("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", children: [jsxRuntime.jsx(icons.ImageOffIcon, { className: "w-12 h-12 mb-2" }), jsxRuntime.jsx("span", { children: "Image loading failed" })] })) : imgHref ? (jsxRuntime.jsx("a", { href: imgHref, target: "_blank", rel: "noopener noreferrer", className: "block w-full h-full", children: jsxRuntime.jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", 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: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" })) })), (cancelText || confirmText) && (jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [cancelText && (jsxRuntime.jsx("button", { onClick: () => {
-                                onOpenChange(false);
-                                onCancel === null || onCancel === void 0 ? void 0 : 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", children: cancelText })), confirmText && (jsxRuntime.jsx(ui.AlertDialogAction, { onClick: () => {
-                                onOpenChange(false);
-                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-                            }, className: "px-6 py-2 rounded-lg bg-purple-500 text-white font-semibold hover:bg-purple-600 transition", children: confirmText }))] }))] }) }));
-}
-
-exports.AdsAlertDialog = AdsAlertDialog;

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

@@ -1,19 +0,0 @@
-"use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
-import Image from 'next/image';
-import { InfoIcon, XIcon, ImageOffIcon } from '@windrun-huaiin/base-ui/icons';
-import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction } from '@windrun-huaiin/base-ui/ui';
-
-function AdsAlertDialog({ open, onOpenChange, title, description, imgSrc, imgHref, cancelText, onCancel, confirmText, onConfirm, }) {
-    const [imgError, setImgError] = useState(false);
-    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(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", children: [jsxs("div", { className: "flex flex-row items-center justify-between mb-2", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-row items-center gap-1 min-w-0 text-xl font-semibold", children: [jsx(InfoIcon, { className: "w-5 h-5" }), jsx("span", { className: "truncate", children: title })] }) }), jsx("button", { className: "text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 text-xl ml-4", onClick: () => onOpenChange(false), "aria-label": "Close", tabIndex: 0, children: jsx(XIcon, { className: "w-5 h-5" }) })] }), jsx(AlertDialogDescription, { className: "text-base font-medium text-neutral-800 dark:text-neutral-100 mb-2", children: description }), imgSrc && (jsx("div", { className: "w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2", children: imgError ? (jsxs("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", children: [jsx(ImageOffIcon, { className: "w-12 h-12 mb-2" }), jsx("span", { children: "Image loading failed" })] })) : imgHref ? (jsx("a", { href: imgHref, target: "_blank", rel: "noopener noreferrer", className: "block w-full h-full", children: jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" }) })) : (jsx(Image, { src: imgSrc, alt: "image", fill: true, className: "object-contain rounded-lg", priority: false, placeholder: "empty", unoptimized: true, onError: () => setImgError(true), sizes: "(max-width: 400px) 100vw, 400px" })) })), (cancelText || confirmText) && (jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [cancelText && (jsx("button", { onClick: () => {
-                                onOpenChange(false);
-                                onCancel === null || onCancel === void 0 ? void 0 : 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", children: cancelText })), confirmText && (jsx(AlertDialogAction, { onClick: () => {
-                                onOpenChange(false);
-                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-                            }, className: "px-6 py-2 rounded-lg bg-purple-500 text-white font-semibold hover:bg-purple-600 transition", children: confirmText }))] }))] }) }));
-}
-
-export { AdsAlertDialog };