@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/alert-dialog/index.tsx

@@ -0,0 +1,282 @@
+/**
+ * 确认对话框 AlertDialog
+ *
+ * 模态确认弹窗，要求用户对破坏性 / 不可撤销操作进行显式确认，基于 Radix AlertDialog 原语。
+ * 与 Dialog 共享 size scale 与视觉规范（圆角 / padding / 分隔线），区别在于强制焦点陷阱、
+ * 按钮二选一语义、不允许通过外部点击关闭。
+ *
+ * 视觉规范：
+ * - 外层容器圆角走主题默认（`rounded-md`），自身不带 padding，由 Header / Body / Footer 各自控制
+ * - Header 区：`pt-3 pr-14 pb-3 pl-5`，底部 1px 分隔线默认 `border-border`（紧凑模式居中、宽屏模式左对齐）
+ * - Body 区：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground
+ * - Footer 区：`px-5 py-4`，顶部分隔线默认透明
+ *
+ * @when
+ * - 删除操作的二次确认
+ * - 不可撤销操作的警告提示
+ * - 重要流程的最终确认步骤
+ */
+'use client';
+
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/button';
+
+export interface AlertDialogProps
+  extends Omit<
+    React.ComponentProps<typeof AlertDialogPrimitive.Root>,
+    'open' | 'defaultOpen' | 'onOpenChange'
+  > {
+  /** 受控显示状态。 */
+  open?: boolean;
+  /** 非受控初始显示状态。 @default false */
+  defaultOpen?: boolean;
+  /**
+   * 显示 / 关闭状态变化回调。
+   * @param open 当前是否显示
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+function AlertDialog({ ...props }: AlertDialogProps) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * AlertDialog 主体内容容器。
+ *
+ * 通过 `size` 控制最大宽度（与 Dialog 同一 scale）：
+ * - `sm`：紧凑确认场景（≈ 400px，默认）
+ * - `md`：通用警告场景（≈ 600px）
+ * - `lg`：信息密集型确认（≈ 800px）
+ * - `xl`：宽幅复杂内容（≈ 1200px）
+ */
+function AlertDialogContent({
+  className,
+  size = 'sm',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  /** 内容区尺寸。 @default 'sm' */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- mobile viewport needs calc(100% - 2rem) for safe inset; box-shadow drives via component-level token --dialog-shadow per ADR 0026.
+          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-md bg-popover text-sm text-popover-foreground shadow-[var(--dialog-shadow,0px_6px_24px_0px_rgba(0,0,0,0.1))] duration-100 outline-none data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-xl data-[size=lg]:sm:max-w-3xl data-[size=xl]:sm:max-w-6xl data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+/**
+ * AlertDialog Header 容器。
+ *
+ * 视觉规范：`pt-3 pr-14 pb-3 pl-5`，底部 1px 分隔线默认 `border-border`，可通过
+ * `className="border-transparent"` 关闭。默认居中布局（紧凑确认弹窗惯例）；当 size>=md 时
+ * 自动切换为左对齐 + media 横置布局。
+ */
+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 border-b border-border pt-3 pr-14 pb-3 pl-5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=md]/alert-dialog-content:place-items-start sm:group-data-[size=md]/alert-dialog-content:text-left sm:group-data-[size=md]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] sm:group-data-[size=lg]/alert-dialog-content:place-items-start sm:group-data-[size=lg]/alert-dialog-content:text-left sm:group-data-[size=lg]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] sm:group-data-[size=xl]/alert-dialog-content:place-items-start sm:group-data-[size=xl]/alert-dialog-content:text-left sm:group-data-[size=xl]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * AlertDialog 内容区（Body）。
+ *
+ * 视觉规范：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground。
+ * 用于在 Header / Footer 之外承载补充说明、列表等正文内容。
+ */
+function AlertDialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-body"
+      className={cn('px-5 pt-4 pb-5 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Footer 容器。
+ *
+ * 视觉规范：`px-5 py-4`，顶部分隔线默认透明。
+ * sm size 紧凑模式下按钮均分两列；其他 size 在 sm 断点以上水平右对齐。
+ */
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 border-t border-transparent px-5 py-4 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}
+    />
+  );
+}
+
+/**
+ * 标题前的图标 / 媒体槽，用于 destructive / warning 视觉强化。
+ *
+ * 紧凑模式（size=sm）下置顶居中；宽屏模式（size>=md）下置于标题左侧。
+ */
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=md]/alert-dialog-content:row-span-2 sm:group-data-[size=lg]/alert-dialog-content:row-span-2 sm:group-data-[size=xl]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'text-sm leading-5 font-medium text-foreground sm:group-data-[size=md]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 sm:group-data-[size=lg]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 sm:group-data-[size=xl]/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]:text-primary *:[a]:hover:text-primary/80',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * 主操作按钮（确认 / 提交）。默认 `variant="default"`；
+ * destructive 场景请显式传入 `variant="destructive"`。
+ */
+function AlertDialogAction({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+/** 取消按钮。默认 `variant="outline"`。 */
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/alert-dialog/meta.md

@@ -0,0 +1,86 @@
+# AlertDialog
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+确认对话框 AlertDialog
+模态确认弹窗，要求用户对破坏性 / 不可撤销操作进行显式确认，基于 Radix AlertDialog 原语。
+与 Dialog 共享 size scale 与视觉规范（圆角 / padding / 分隔线），区别在于强制焦点陷阱、
+按钮二选一语义、不允许通过外部点击关闭。
+视觉规范：
+- 外层容器圆角走主题默认（`rounded-md`），自身不带 padding，由 Header / Body / Footer 各自控制
+- Header 区：`pt-3 pr-14 pb-3 pl-5`，底部 1px 分隔线默认 `border-border`（紧凑模式居中、宽屏模式左对齐）
+- Body 区：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground
+- Footer 区：`px-5 py-4`，顶部分隔线默认透明
+
+## 使用场景
+
+- 删除操作的二次确认
+- 不可撤销操作的警告提示
+- 重要流程的最终确认步骤
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean` | – | – | 受控显示状态。 |
+| `defaultOpen` | `boolean` | `false` | – | 非受控初始显示状态。 |
+| `onOpenChange` | `(open: boolean) => void` | – | – | 显示 / 关闭状态变化回调。 |
+
+## 示例
+
+### Sizes
+
+多档尺寸 — sm / md / lg，与 Dialog 共享 size scale。
+
+```tsx
+<div className="flex flex-wrap gap-2">
+  {(['sm', 'md', 'lg'] as const).map((size) => (
+    <AlertDialog key={size}>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">size = {size}</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent size={size}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认操作？</AlertDialogTitle>
+          <AlertDialogDescription>
+            当前 size={size}。sm 紧凑居中，md/lg 切换为左对齐 + media 横置。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction>确认</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ))}
+</div>
+```
+
+### WithMedia
+
+带图标 — 通过 AlertDialogMedia 在标题前放置警告图标。
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button>触发</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent size="md">
+    <AlertDialogHeader>
+      <AlertDialogMedia>
+        <TriangleAlertIcon className="text-warning" />
+      </AlertDialogMedia>
+      <AlertDialogTitle>操作确认</AlertDialogTitle>
+      <AlertDialogDescription>
+        你确定要执行此操作吗？该操作将影响所有相关配置，请谨慎操作。
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>取消</AlertDialogCancel>
+      <AlertDialogAction>确认</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```

package/src/components/alert-dialog/stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './index';
+import { Button } from '@/components/button';
+import { TriangleAlertIcon } from 'lucide-react';
+
+const meta = {
+  title: '反馈 · Feedback/AlertDialog 确认对话框',
+  component: AlertDialog,
+  subcomponents: {
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogMedia,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogAction,
+    AlertDialogCancel,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof AlertDialog>;
+
+/** 基础确认对话框 — destructive 删除场景。 */
+export const Default: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">删除</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认删除？</AlertDialogTitle>
+          <AlertDialogDescription>
+            此操作不可撤销，将永久删除该账户和所有相关数据。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction variant="destructive">确认删除</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
+/** 多档尺寸 — sm / md / lg，与 Dialog 共享 size scale。 */
+export const Sizes: Story = {
+  name: '尺寸 size',
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      {(['sm', 'md', 'lg'] as const).map((size) => (
+        <AlertDialog key={size}>
+          <AlertDialogTrigger asChild>
+            <Button variant="outline">size = {size}</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent size={size}>
+            <AlertDialogHeader>
+              <AlertDialogTitle>确认操作？</AlertDialogTitle>
+              <AlertDialogDescription>
+                当前 size={size}。sm 紧凑居中，md/lg 切换为左对齐 + media 横置。
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>取消</AlertDialogCancel>
+              <AlertDialogAction>确认</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ))}
+    </div>
+  ),
+};
+
+/** 带图标 — 通过 AlertDialogMedia 在标题前放置警告图标。 */
+export const WithMedia: Story = {
+  name: '带警告图标',
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button>触发</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent size="md">
+        <AlertDialogHeader>
+          <AlertDialogMedia>
+            <TriangleAlertIcon className="text-warning" />
+          </AlertDialogMedia>
+          <AlertDialogTitle>操作确认</AlertDialogTitle>
+          <AlertDialogDescription>
+            你确定要执行此操作吗？该操作将影响所有相关配置，请谨慎操作。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction>确认</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
+/** 异步确认 — onAction 返回 Promise，loading 期间禁止关闭。 */
+export const Async: Story = {
+  name: '异步确认',
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = React.useState(false);
+      const [loading, setLoading] = React.useState(false);
+      const onConfirm = async (e: React.MouseEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        await new Promise((r) => setTimeout(r, 1500));
+        setLoading(false);
+        setOpen(false);
+      };
+      return (
+        <AlertDialog
+          open={open}
+          onOpenChange={(next) => {
+            if (loading) return;
+            setOpen(next);
+          }}
+        >
+          <AlertDialogTrigger asChild>
+            <Button variant="destructive">删除</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>确认删除？</AlertDialogTitle>
+              <AlertDialogDescription>
+                onAction 返回 Promise，loading 期间无法关闭对话框。
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
+              <Button
+                variant="destructive"
+                loading={loading}
+                onClick={onConfirm}
+              >
+                确认删除
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/components/avatar/index.tsx

@@ -0,0 +1,159 @@
+/**
+ * 头像 Avatar
+ *
+ * 用来代表用户或事物，支持图片、图标或字符展示。图片加载失败时自动降级到 fallback。
+ *
+ * 组合结构：Avatar > AvatarImage + AvatarFallback (+ AvatarBadge)；AvatarGroup > Avatar* (+ AvatarGroupCount)
+ *
+ * @when
+ * - 用户列表 / 评论区 / 卡片中展示用户形象
+ * - 配合用户名称、状态或徽标展示
+ * - 多个用户聚合展示时使用 AvatarGroup
+ */
+
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const avatarVariants = cva(
+  'group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken',
+  {
+    variants: {
+      size: {
+        sm: 'size-6',
+        default: 'size-8',
+        lg: 'size-10',
+      },
+      shape: {
+        circle: 'rounded-full after:rounded-full',
+        square: 'rounded-md after:rounded-md',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      shape: 'circle',
+    },
+  },
+);
+
+export interface AvatarProps
+  extends React.ComponentProps<typeof AvatarPrimitive.Root>,
+    VariantProps<typeof avatarVariants> {
+  /** 头像尺寸 */
+  size?: 'sm' | 'default' | 'lg';
+  /** 头像形状 */
+  shape?: 'circle' | 'square';
+}
+
+function Avatar({
+  className,
+  size = 'default',
+  shape = 'circle',
+  ...props
+}: AvatarProps) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      data-shape={shape}
+      className={cn(avatarVariants({ size, shape }), className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        'aspect-square size-full object-cover',
+        'group-data-[shape=circle]/avatar:rounded-full group-data-[shape=square]/avatar:rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'flex size-full items-center justify-center bg-muted text-muted-foreground',
+        'group-data-[shape=circle]/avatar:rounded-full group-data-[shape=square]/avatar:rounded-md',
+        'group-data-[size=sm]/avatar:text-xs group-data-[size=default]/avatar:text-xs group-data-[size=lg]/avatar:text-sm',
+        '[&>svg]:size-1/2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground ring-2 ring-background',
+        'group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:text-sm group-has-data-[size=sm]/avatar-group:size-6',
+        'group-has-data-[shape=square]/avatar-group:rounded-md',
+        '[&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+  avatarVariants,
+};