@allbluecn/admin-app 0.3.3 → 0.3.4

package/allblue-ui/src/data-table/table-detail-layout.tsx

@@ -0,0 +1,97 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useNavigate } from "@tanstack/react-router";
+import { Button } from "../ui/button";
+import { Skeleton } from "../ui/skeleton";
+import { ArrowLeftIcon } from "lucide-react";
+
+interface TableDetailLayoutProps {
+  backHref: string;
+  // i18n 由消费方注入（包内不依赖 @/paraglide），原 admin 实现默认回退文案由调用方显式传入
+  backLabel: string;
+  title: string;
+  subtitle?: string;
+  avatar?: React.ReactNode;
+  badges?: React.ReactNode;
+  actions?: React.ReactNode;
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+export function TableDetailLayout({
+  backHref,
+  backLabel,
+  title,
+  subtitle,
+  avatar,
+  badges,
+  actions,
+  loading,
+  children,
+}: TableDetailLayoutProps) {
+  const navigate = useNavigate();
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-24" />
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-12 w-12 rounded-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-6 w-40" />
+            <Skeleton className="h-4 w-60" />
+          </div>
+        </div>
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="sticky top-0 z-10 bg-background border-b px-6 py-2.5">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => navigate({ to: backHref })}
+          className="gap-1.5 text-muted-foreground hover:text-foreground"
+        >
+          <ArrowLeftIcon className="h-4 w-4" />
+          {backLabel}
+        </Button>
+      </div>
+      <div className="p-6 pt-4 space-y-6">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-4">
+            {avatar}
+            <div>
+              <div className="flex items-center gap-2">
+                <h1 className="text-2xl font-bold">{title}</h1>
+                {badges}
+              </div>
+              {subtitle && <p className="text-muted-foreground mt-1">{subtitle}</p>}
+            </div>
+          </div>
+          {actions && <div className="flex gap-2">{actions}</div>}
+        </div>
+
+        {children}
+      </div>
+    </div>
+  );
+}

package/allblue-ui/src/hooks/use-load-more.ts

@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * 无限滚动加载状态机：IntersectionObserver 哨兵 + loading 防重入。
+ *
+ * 哨兵进入视口且 hasMore 时触发 onLoadMore；返回 Promise 时 resolve 后解除
+ * loading，同步返回则由调用方经 hasMore/数据更新间接解除。供
+ * InfiniteScrollSentinel 等无限滚动组件复用。
+ */
+export function useLoadMore(
+  onLoadMore: () => void | Promise<void>,
+  hasMore: boolean,
+  rootRef?: React.RefObject<HTMLElement | null>,
+): {
+  /** 挂到滚动末端哨兵元素上 */
+  sentinelRef: React.RefObject<HTMLDivElement | null>;
+  loading: boolean;
+} {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const [loading, setLoading] = useState(false);
+  const loadingRef = useRef(false);
+
+  useEffect(() => {
+    loadingRef.current = loading;
+  }, [loading]);
+
+  useEffect(() => {
+    if (!sentinelRef.current || !hasMore) return;
+
+    if (observerRef.current) observerRef.current.disconnect();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && !loadingRef.current) {
+          setLoading(true);
+          const result = onLoadMore();
+          if (result && typeof (result as Promise<void>).then === "function") {
+            (result as Promise<void>).then(() => setLoading(false));
+          }
+        }
+      },
+      { root: rootRef?.current ?? null, rootMargin: "80px" },
+    );
+
+    observer.observe(sentinelRef.current);
+    observerRef.current = observer;
+    return () => observer.disconnect();
+    // onLoadMore 由调用方保证稳定（多为 useCallback），与原实现一致仅依赖 hasMore/rootRef
+  }, [hasMore, rootRef]);
+
+  return { sentinelRef, loading };
+}

package/allblue-ui/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/allblue-ui/src/index.ts

@@ -0,0 +1,31 @@
+export * from "./ui/alert"
+export * from "./ui/alert-dialog"
+export * from "./ui/avatar"
+export * from "./ui/badge"
+export * from "./ui/button"
+export * from "./ui/card"
+export * from "./ui/checkbox"
+export * from "./ui/collapsible"
+export * from "./ui/dialog"
+export * from "./ui/dropdown-menu"
+export * from "./ui/field"
+export * from "./ui/input"
+export * from "./ui/input-group"
+export * from "./ui/label"
+export * from "./ui/pagination"
+export * from "./ui/select"
+export * from "./ui/separator"
+export * from "./ui/sheet"
+export * from "./ui/sidebar"
+export * from "./ui/skeleton"
+export * from "./ui/switch"
+export * from "./ui/table"
+export * from "./ui/textarea"
+export * from "./ui/toast"
+export * from "./ui/tooltip"
+export { ConfirmDialog, type ConfirmDialogProps } from "./components/confirm-dialog"
+export { InfiniteScrollSentinel } from "./components/infinite-scroll-sentinel"
+export { useLoadMore } from "./hooks/use-load-more"
+export { useIsMobile } from "./hooks/use-mobile"
+export { getBoringAvatarUrl, getAvatarFallback, type AvatarOptions } from "./lib/avatar"
+export { cn } from "./lib/utils"

package/allblue-ui/src/lib/avatar.ts

@@ -0,0 +1,41 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+const DICE_BEAR_BASE = "https://api.dicebear.com/7.x";
+
+const DICE_BEAR_STYLES = ["avataaars", "micah", "notionists", "lorelei", "adventurer"] as const;
+
+type DiceBearStyle = (typeof DICE_BEAR_STYLES)[number];
+
+export interface AvatarOptions {
+  style?: DiceBearStyle;
+  size?: number;
+  square?: boolean;
+}
+
+export function getBoringAvatarUrl(
+  seed: string,
+  options: AvatarOptions = {}
+): string {
+  const { style = "avataaars", size = 80 } = options;
+
+  return `${DICE_BEAR_BASE}/${style}/svg?seed=${encodeURIComponent(seed)}&size=${size}`;
+}
+
+export function getAvatarFallback(name: string): string {
+  return name.charAt(0).toUpperCase();
+}

package/allblue-ui/src/lib/datetime.ts

@@ -0,0 +1,226 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { formatInTimeZone, toZonedTime, fromZonedTime } from 'date-fns-tz'
+import { startOfDay, subDays } from 'date-fns'
+
+const FALLBACK_TIMEZONE = 'Asia/Shanghai'
+
+/**
+ * 解析生效时区：项目时区 > 用户时区 > 浏览器时区 > Asia/Shanghai
+ */
+export function resolveTimezone(
+  projectTz?: string | null,
+  userTz?: string | null,
+): string {
+  const browserTz =
+    typeof Intl !== 'undefined'
+      ? Intl.DateTimeFormat().resolvedOptions().timeZone
+      : FALLBACK_TIMEZONE
+  return projectTz || userTz || browserTz || FALLBACK_TIMEZONE
+}
+
+/**
+ * 时区感知的时间格式化。
+ * @param date UTC Date 对象（来自 DB）
+ * @param timezone IANA 时区，如 "Asia/Shanghai"
+ * @param fmt date-fns 格式，默认 "yyyy-MM-dd HH:mm"
+ */
+export function formatDate(
+  date: Date,
+  timezone: string,
+  fmt = 'yyyy-MM-dd HH:mm',
+): string {
+  try {
+    return formatInTimeZone(date, timezone, fmt)
+  } catch {
+    return formatInTimeZone(date, FALLBACK_TIMEZONE, fmt)
+  }
+}
+
+/**
+ * 确定性时间戳格式化：固定时区 + date-fns 数字格式，不依赖运行环境 locale/时区。
+ * SSR 与客户端输出字节级一致，专治 toLocaleString() 引发的 hydration mismatch。
+ * @param date Date 对象或 ISO 字符串
+ * @param fmt date-fns 格式，默认 "yyyy-MM-dd HH:mm"
+ */
+export function formatTimestamp(
+  date: Date | string,
+  fmt = 'yyyy-MM-dd HH:mm',
+): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  if (Number.isNaN(d.getTime())) return '-'
+  return formatDate(d, FALLBACK_TIMEZONE, fmt)
+}
+
+/**
+ * 相对时间（今天/昨天/具体日期），基于时区计算「今天的 0 点」。
+ * @param now 当前时间（测试注入；生产用默认 new Date()）
+ */
+export function formatRelative(
+  date: Date,
+  timezone: string,
+  now: Date = new Date(),
+): string {
+  try {
+    const todayStart = startOfDayInTimeZone(now, timezone)
+    const yesterdayStart = new Date(todayStart)
+    yesterdayStart.setDate(yesterdayStart.getDate() - 1)
+
+    const dateStart = startOfDayInTimeZone(date, timezone)
+
+    if (dateStart.getTime() === todayStart.getTime()) return '今天'
+    if (dateStart.getTime() === yesterdayStart.getTime()) return '昨天'
+    return formatInTimeZone(date, timezone, 'yyyy-MM-dd')
+  } catch {
+    return formatInTimeZone(date, FALLBACK_TIMEZONE, 'yyyy-MM-dd')
+  }
+}
+
+/**
+ * 获取指定时区下某天的 0 点（UTC Date 对象）。
+ */
+function startOfDayInTimeZone(date: Date, timezone: string): Date {
+  const zoned = toZonedTime(date, timezone)
+  const dayStart = startOfDay(zoned)
+  return fromZonedTime(dayStart, timezone)
+}
+
+/**
+ * 对话历史日期分组标签（今天/昨天/本周/具体日期）。
+ * @param date UTC Date 对象
+ * @param timezone IANA 时区
+ */
+export function formatChatDate(date: Date, timezone: string): string {
+  try {
+    const now = new Date()
+    const todayStart = startOfDayInTimeZone(now, timezone)
+    const yesterdayStart = subDays(todayStart, 1)
+    const weekStart = subDays(todayStart, 7)
+
+    const dateStart = startOfDayInTimeZone(date, timezone)
+
+    if (dateStart.getTime() === todayStart.getTime()) return '今天'
+    if (dateStart.getTime() === yesterdayStart.getTime()) return '昨天'
+    if (dateStart.getTime() >= weekStart.getTime()) return '本周'
+
+    const currentYear = Number(formatInTimeZone(now, timezone, 'yyyy'))
+    const dateYear = Number(formatInTimeZone(date, timezone, 'yyyy'))
+    if (dateYear === currentYear) {
+      return formatInTimeZone(date, timezone, 'M月d日')
+    }
+    return formatInTimeZone(date, timezone, 'yyyy年M月d日')
+  } catch {
+    return formatInTimeZone(date, FALLBACK_TIMEZONE, 'yyyy-MM-dd')
+  }
+}
+
+
+// ---- 本地日历工具（自 lib/date-utils.ts 并入：按本地时区做日历网格/日键计算，无时区转换） ----
+
+/** 解析 "yyyy-MM-dd" 前缀为本地 Date（避免 UTC 偏移） */
+export function parseDate(s: string): Date {
+  const datePart = s.slice(0, 10)
+  const [y, m, d] = datePart.split('-').map(Number)
+  return new Date(y, m - 1, d)
+}
+
+/** 本地时区 yyyy-MM-dd 日键（与 timezone 版 formatDate 区分） */
+export function formatDateLocal(d: Date): string {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  )
+}
+
+export function getMonthGrid(
+  year: number,
+  month: number,
+): Array<{ date: Date; inMonth: boolean }> {
+  const firstDay = new Date(year, month, 1)
+  const startOffset = firstDay.getDay() // 周日=0
+  const gridStart = new Date(year, month, 1 - startOffset)
+  const result: Array<{ date: Date; inMonth: boolean }> = []
+  for (let i = 0; i < 42; i++) {
+    const date = new Date(gridStart)
+    date.setDate(gridStart.getDate() + i)
+    result.push({ date, inMonth: date.getMonth() === month })
+  }
+  return result
+}
+
+export function getWeekGrid(
+  year: number,
+  month: number,
+  day: number,
+): Array<{ date: Date; inMonth: boolean }> {
+  const anchor = new Date(year, month, day)
+  const startOffset = anchor.getDay()
+  const gridStart = new Date(year, month, day - startOffset)
+  const result: Array<{ date: Date; inMonth: boolean }> = []
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(gridStart)
+    date.setDate(gridStart.getDate() + i)
+    result.push({ date, inMonth: date.getMonth() === month })
+  }
+  return result
+}
+
+export function buildTimelineRange(
+  start: Date,
+  end: Date,
+  mode: 'month' | 'week',
+): Array<{ start: Date; label: string }> {
+  const ticks: Array<{ start: Date; label: string }> = []
+  const cursor = new Date(start.getFullYear(), start.getMonth(), 1)
+  const endDate = new Date(end.getFullYear(), end.getMonth(), 1)
+  while (cursor <= endDate) {
+    const label =
+      mode === 'month'
+        ? `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}`
+        : `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`
+    ticks.push({ start: new Date(cursor), label })
+    if (mode === 'month') cursor.setMonth(cursor.getMonth() + 1)
+    else cursor.setDate(cursor.getDate() + 7)
+  }
+  return ticks
+}
+
+export function getRangeFromDates(dates: Date[]): { start: Date; end: Date } {
+  if (dates.length === 0) {
+    const now = new Date()
+    return {
+      start: new Date(now.getFullYear(), now.getMonth(), 1),
+      end: new Date(now.getFullYear(), now.getMonth() + 2, 0),
+    }
+  }
+  const times = dates.map((d) => d.getTime())
+  const min = new Date(Math.min(...times))
+  const max = new Date(Math.max(...times))
+  return {
+    start: new Date(min.getFullYear(), min.getMonth() - 1, 1),
+    end: new Date(max.getFullYear(), max.getMonth() + 1, 0),
+  }
+}

package/allblue-ui/src/lib/sanitize.ts

@@ -0,0 +1,18 @@
+import DOMPurify from 'isomorphic-dompurify'
+
+// HTML 清理：默认配置（html + svg + mathMl profile 均启用），
+// 覆盖富文本 diff、附件预览等 7 处 HTML 渲染场景。
+export function sanitize(html: string): string {
+  return DOMPurify.sanitize(html)
+}
+
+// SVG 清理：头像渲染（NotionAvatar）专用。
+// 显式复用默认配置——DOMPurify 默认 profile 已包含 SVG 滤镜元素
+// （<defs>/<filter>/<feMorphology>/<feFlood>/<feComposite>/<feMerge>/<feMergeNode>），
+// 同时清除 <script>/on*/javascript: 等 XSS 载荷。
+// 禁止改成 USE_PROFILES: { svg: true }——严格 SVG profile 会移除全部 fe* 滤镜元素，
+// 头像轮廓辉光（feMorphology+feFlood+feComposite+feMerge）会失效渲染白屏。
+// 结构完整性由 __tests__/security/xss-sanitize.test.ts 的双向断言锁定。
+export function sanitizeSvg(svg: string): string {
+  return DOMPurify.sanitize(svg)
+}

package/allblue-ui/src/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn"

package/allblue-ui/src/ui/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { cn } from "cn"
+
+import { Button } from "./button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}