import * as React from 'react';
import type { LucideIcon } from 'lucide-react';
import { type CategoricalColor } from '../../tokens/categorical-color';
/**
 * Avatar — 頭像元件
 *
 * 三種內容模式（按優先順序）：
 *   1. src → 圖片
 *   2. icon → icon 在底色圓/方形內
 *   3. alt → 取首字作文字 fallback
 *   4. 都沒有 → 預設 User icon
 *
 * ── 尺寸 ──
 *   size 接受任意 px 值，icon 自動 = round_even(size × 0.6)
 *   文字 fallback 字體 = size × 0.5
 *
 * ── 形狀 ──
 *   circle（預設）→ rounded-full，用於人物
 *   square → rounded-md (4px)，用於實體（專案、組織、App）
 */
type ColorKey = CategoricalColor;
export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
    /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 */
    size?: number | 'fill';
    /** 形狀：circle（人物）或 square（實體），預設 circle */
    shape?: 'circle' | 'square';
    /** 圖片 URL */
    src?: string;
    /** 替代文字（圖片失敗時取首字作 fallback） */
    alt?: string;
    /** Icon 模式（LucideIcon） */
    icon?: LucideIcon;
    /** Icon / text fallback 的背景色，預設 neutral */
    color?: ColorKey;
    /** 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false */
    solid?: boolean;
    /**
     * 在線狀態指示器(presence),顯示在 avatar **右下角**。
     * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。
     * 位置語義:右下 = "此人的 presence"(使用者聚焦於「這個人是誰 + 現在 在不在」)。
     */
    status?: 'online' | 'away' | 'busy' | 'offline';
    /**
     * 未讀 / 通知計數 badge,顯示在 avatar **右上角**。
     * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。
     * 位置語義:右上 = "關於此對話的新事件數量"(使用者聚焦於「有多少未處理」);
     * 與右下的 presence 共存不衝突(不同角、不同語義)。
     * `> 99` 自動顯示 "99+"(交給內部 Badge 的 `max` 行為)。
     */
    badgeCount?: number;
    /**
     * 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。
     * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。
     */
    hoverCard?: React.ReactNode;
}
export interface AvatarData {
    /** 圖片 URL */
    src?: string;
    /** 替代文字（圖片失敗時取首字作 fallback） */
    alt: string;
    /** Icon / text fallback 的背景色，預設 neutral */
    color?: ColorKey;
    /**
     * Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。
     * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。
     * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)
     * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。
     */
    hoverCard?: React.ReactNode;
}
export declare const avatarMeta: {
    readonly component: "Avatar";
    readonly family: null;
    readonly variants: {};
    readonly sizes: {};
    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
    readonly tokens: {
        readonly bg: readonly ["bg-surface-raised"];
        readonly fg: readonly ["--foreground", "--on-emphasis"];
        readonly ring: readonly ["ring-ring"];
    };
};
declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>>;
export { Avatar };
//# sourceMappingURL=avatar.d.ts.map