import * as React from 'react';
import { type VariantProps } from 'class-variance-authority';
import type { LucideIcon } from 'lucide-react';
/**
 * Button — shadcn 風格，橋接設計系統 token
 *
 * ── Variants ──
 *   primary    主要操作，藍底白字
 *   secondary  次要品牌操作，藍框藍字；正面 vs 負面並存時用於正面那個
 *   tertiary   一般輔助操作，灰框灰字，hover 轉藍（最常用的非主要按鈕）
 *   text       無底色無邊框，hover 顯示灰底（工具列、密集 UI）
 *   link       外觀像連結的按鈕（本質仍是 button）
 *
 * ── danger prop ──
 *   danger     套用危險色（紅色）；僅 primary / secondary / text 支援（tertiary / link 不支援，見 spec 禁止事項）
 *
 *   <Button variant="primary" danger>永久刪除</Button>        → 紅底白字（立即不可逆）
 *   <Button variant="secondary" danger>移至垃圾桶</Button>    → 紅框紅字（點下去還可反悔）
 *
 * ── pressed prop（toggle）──
 *   pressed    Toggle 按下狀態（持續 on/off），寫入 aria-pressed + data-state
 *   僅 secondary / tertiary / text 三個 variant 支援 toggle 視覺：
 *     - secondary + pressed → primary-subtle 底、primary 字、透明邊框
 *     - tertiary  + pressed → primary-subtle 底、primary 字、透明邊框（同 secondary 按下視覺）
 *     - text      + pressed → primary-subtle 底、primary 字、透明邊框（預設 pressedTone='emphasis'，同 secondary/tertiary 按下視覺）；pressedTone='neutral' 時才走 neutral-selected 灰底
 *   primary / link 傳入 pressed 無視覺效果（語意不符）
 *
 * ── Sizes（預設 md）──
 *   xs   h-field-xs（24px 固定），不隨 density 縮放
 *   sm   h-field-sm，md=28px / lg=32px
 *   md   h-field-md，md=32px / lg=36px  ← 預設（跟 Field/Input 對齊）
 *   lg   h-field-lg，md=36px / lg=40px
 *   icon-only 不是獨立尺寸 — 加 iconOnly prop 讓任何尺寸變正方形
 *
 * ── 內部結構 ──
 *   [startIcon?]  [label]  [badge? + endIcon?]
 *
 * ── 用法範例 ──
 *   <Button startIcon={Plus}>新增</Button>
 *   <Button variant="tertiary">取消</Button>
 *   <Button variant="primary" danger>永久刪除</Button>
 *   <Button variant="text" pressed={isPinned} startIcon={Pin} aria-label="釘選" iconOnly />
 *   <Button badge={<Badge count={3} />} endIcon={ChevronDown}>通知</Button>
 *   <Button size="sm" iconOnly startIcon={Plus} aria-label="新增" />
 *   <Button iconOnly startIcon={Bell} aria-label="通知 (3 則)"
 *           overlayBadge={<Badge count={3} />} />  ← badge 自動貼 icon 右上角
 *
 * ── asChild ──
 *   <Button asChild><Link to="/home">回首頁</Link></Button>
 */
declare const buttonVariants: (props?: ({
    variant?: "text" | "link" | "primary" | "secondary" | "tertiary" | null | undefined;
    danger?: boolean | null | undefined;
    pressedTone?: "emphasis" | "neutral" | null | undefined;
    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
interface ButtonGroupContextValue {
    fullWidth?: boolean;
}
declare const ButtonGroupContext: React.Context<ButtonGroupContextValue>;
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'danger'> {
    /**
     * 將樣式套用至子元件（e.g. React Router Link）。
     *
     * ⚠️ **icon-only + asChild 警告**:當 `iconOnly={true}` 且 `asChild={true}` 時,內建
     * Tooltip wrapper 不啟動(Radix Slot 不接受多 child)。consumer 必須**自管 child 的 `aria-label`**
     * 給 screen reader,並視需要自行包 `<Tooltip>`(對齊 Polaris / Radix asChild idiom)。
     * Button 不會主動補 tooltip — 否則會破壞 Slot 單 child 規則。
     */
    asChild?: boolean;
    /**
     * 按鈕視覺強調等級。
     * `destructive` / `ghost` 為 shadcn 內部 compat，請勿在應用程式碼中直接使用。
     */
    variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'link';
    /** 套用危險色（紅色）。僅 primary / secondary / text 支援（tertiary / link 不支援，見 spec 禁止事項）。 */
    danger?: boolean;
    /**
     * Toggle 按下狀態（持續 on/off）。設定時 Button 變為 toggle：
     * - 自動寫入 `aria-pressed` + `data-state="on" | "off"`
     * - 樣式由 variant × `pressedTone` 的 compoundVariants 套用
     * - 僅 secondary / tertiary / text 有 toggle 視覺；primary / link 傳入無效果
     *
     * 不傳此 prop 時 Button 就是一般按鈕，不帶 aria-pressed。
     */
    pressed?: boolean;
    /**
     * Pressed 視覺色調(2026-05-21 v12 加):
     * - `'emphasis'`(預設)→ 淡藍底 / primary 字(對齊 Figma toolbar / Linear toolbar /
     *   Material ToggleButton 共識 — toolbar functional toggle / 篩選啟用 / 面板開關)
     * - `'neutral'` → 灰底 / foreground 字(對齊 Linear / Notion / VS Code Activity Bar
     *   共識 — sidebar/contextual nav row pressed)
     *
     * 僅在 `pressed` 啟用且 variant ∈ {secondary, tertiary, text} 時生效。
     * 跨 toggle context 維持單一 prop API,consumer 視語意選 tone 不另開 variant。
     */
    pressedTone?: 'emphasis' | 'neutral';
    /** 左側 icon（LucideIcon），最多一個，loading 時自動替換為 spinner */
    startIcon?: LucideIcon;
    /** 右側 badge（ReactNode），通常傳入計數指示器 */
    badge?: React.ReactNode;
    /**
     * Overlay badge(iconOnly 專用)。接收 `<Badge>` 元素,Button 內部**自動定位在 startIcon 右上角**——
     * badge 中心對齊 icon 的 top-right corner(Material BadgedBox / iOS App icon canonical),不是按鈕邊緣。
     * 解決手刻 `relative + absolute -top-1 -right-1` 讓 badge 飄在按鈕 chrome 右上的問題。
     *
     * 世界級對照:Material BadgedBox、iOS App Icon、Ant Badge wrap icon,badge 相對於**視覺重心**(icon)。
     * 只在 `iconOnly=true` 時生效;非 iconOnly 時應該用 inline `badge` prop 放 suffix 位置。
     */
    overlayBadge?: React.ReactNode;
    /** 右側 icon（LucideIcon），放在 badge 右邊，通常用於 ChevronDown 等方向指示 */
    endIcon?: LucideIcon;
    /** Icon-only 模式：移除 padding，變為正方形（必須同時設定 aria-label） */
    iconOnly?: boolean;
    /**
     * Dismiss 視覺類(X close only canonical)。專用於 **X(close)icon 的 dismiss 語意** —
     * 「關閉 surface / 忽略訊息」。**不適用 Trash / Delete / Clear / Remove 等 destructive / clear 操作**。
     *
     * 自動套用:
     * - `variant="text"`(強制 override 其他 variant)
     * - `iconOnly=true`(強制)
     * - Icon 色 override:`fg-muted` → hover `foreground`(跟 Inline Action dismiss 視覺一致)
     *
     * 典型 case:Dialog / Sheet / Popover / Alert / Toast / Coachmark 的 **chrome corner close X**
     * (action group region — corner 可多 action,close 左側加 Separator + refresh / share 等)。
     *
     * 非 dismiss(**不套此 prop**):
     * - Trash / Delete → destructive action,Button 用一般 variant 或 Inline Action(按 row size 判)
     * - Clear → 欄位清空,用 Inline Action
     * - Remove → collection 移除,用一般 Button / Inline Action
     *
     * 詳見 button.spec.md「Dismiss 視覺類」段 + patterns/element-anatomy/item-anatomy.spec.md
     * 「Dismiss canonical — X close only」段。
     */
    dismiss?: boolean;
    /** 載入中狀態：startIcon 替換為 spinner，自動 disabled；badge / endIcon 維持顯示以避免 layout shift */
    loading?: boolean;
    /** 撐滿父容器寬度 */
    fullWidth?: boolean;
}
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * componentMeta — Story Auto-Compile 系統消費的結構化 canonical
 * (見 .claude/planning/story-auto-compile.md Phase 1)
 *
 * compile-stories.mjs 讀本 export + spec.md frontmatter 產出
 * anatomy.stories.tsx 的 variant/size/state/token 矩陣 canonical section。
 *
 * Keys 必跟 buttonVariants cva + spec frontmatter 對齊(compile-time 驗證)。
 */
export declare const buttonMeta: {
    readonly component: "Button";
    readonly family: 3;
    readonly variants: {
        readonly primary: {
            readonly purpose: "主要 action / CTA";
        };
        readonly secondary: {
            readonly purpose: "次要 action(陪襯 primary)";
        };
        readonly tertiary: {
            readonly purpose: "第三級 action(tool-like)";
        };
        readonly text: {
            readonly purpose: "文字樣式 action(low emphasis / toolbar)";
        };
        readonly link: {
            readonly purpose: "內文連結(inline reading)";
        };
    };
    readonly sizes: {
        readonly xs: {
            readonly fieldHeight: 24;
            readonly iconSize: 16;
            readonly typography: "caption";
        };
        readonly sm: {
            readonly fieldHeight: 28;
            readonly iconSize: 16;
            readonly typography: "body";
        };
        readonly md: {
            readonly fieldHeight: 32;
            readonly iconSize: 16;
            readonly typography: "body";
        };
        readonly lg: {
            readonly fieldHeight: 36;
            readonly iconSize: 20;
            readonly typography: "body-lg";
        };
    };
    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
    readonly tokens: {
        readonly bg: readonly ["--primary", "--primary-hover", "--primary-active", "--bg-disabled"];
        readonly fg: readonly ["--on-emphasis", "--fg-disabled"];
        readonly ring: readonly ["--ring"];
    };
    readonly defaultVariant: "tertiary";
    readonly defaultSize: "md";
};
export { Button, buttonVariants, ButtonGroupContext };
//# sourceMappingURL=button.d.ts.map