import * as React from 'react';
import type { LucideIcon } from 'lucide-react';
import { type InlineActionConfig } from '../../patterns/element-anatomy/item-anatomy';
/**
 * TreeView — 階層結構的遞迴元件
 *
 * 一個 TreeItem 就是一個 node——有 children 就可展開,沒有就是 leaf。
 * 沒有第二個概念(沒有 TreeGroup)。
 *
 * TreeView 負責:
 *   1. 遞迴渲染 + indent
 *   2. 展開/收合狀態管理
 *   3. 鍵盤導覽 + ARIA tree
 *
 * 它不管 node 裡面長什麼樣——icon、badge、status indicator 等
 * 由 consumer 透過 props / slots 決定。
 *
 * 詳見 tree-view.spec.md。
 */
type SizeKey = 'sm' | 'md' | 'lg';
type SelectionMode = 'single' | 'multiple' | 'none';
/**
 * TreeView 的使用脈絡,決定 item 的水平 padding:
 * - `'sidebar'`:頁面側邊欄,用 `--layout-space-loose` token(md=16px / lg=24px,跟 density 連動)
 * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem / DropdownMenu
 */
type TreeContext = 'sidebar' | 'menu';
/** Drag drop position — 拖放目標的三種位置 */
export type TreeDropPosition = 'before' | 'after' | 'inside';
/** onDragEnd callback 的參數 */
export interface TreeDragEndEvent {
    /** 被拖曳的 node id */
    sourceId: string;
    /** 目標 node id */
    targetId: string;
    /** 放置位置:before(同層上方)/ after(同層下方)/ inside(成為子 node) */
    position: TreeDropPosition;
}
export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {
    /** 元件尺寸,影響 node 高度、icon 大小、indent 寬度 */
    size?: SizeKey;
    /**
     * 使用脈絡,決定 item 的水平 padding:
     * - `'sidebar'`(預設):頁面側邊欄,`--layout-space-loose`(md=16px / lg=24px,隨 density 連動)
     * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem
     */
    context?: TreeContext;
    /** 選取模式。預設 'single'(sidebar nav / stepper) */
    selectionMode?: SelectionMode;
    /** 點擊 label 時是否同時展開 children。預設 false(chevron 是展開的唯一控件) */
    expandOnSelect?: boolean;
    /** 受控:展開的 node id 集合 */
    expandedIds?: Set<string>;
    /** 受控:展開狀態變更 callback */
    onExpandedChange?: (ids: Set<string>) => void;
    /** 受控:選取的 node id 集合 */
    selectedIds?: Set<string>;
    /** 受控:選取狀態變更 callback */
    onSelectedChange?: (ids: Set<string>) => void;
    /** 非受控:預設展開的 node id 陣列 */
    defaultExpandedIds?: string[];
    /** 非受控:預設選取的 node id 陣列 */
    defaultSelectedIds?: string[];
    /**
     * 啟用拖曳排序。預設 false。
     * 啟用後整列可拖(Figma 風格,無 grip handle;靠 distance:5 區分 click vs drag),
     * 拖曳時顯示 drop indicator(before / after / inside 三種位置)。
     * Consumer 透過 `onDragEnd` callback 接收 reorder 事件,自行更新 data。
     */
    draggable?: boolean;
    /** Drag 結束時觸發,提供 sourceId、targetId、position。Consumer 負責 reorder。 */
    onDragEnd?: (event: TreeDragEndEvent) => void;
    /** ARIA label */
    'aria-label'?: string;
}
declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;
declare const treeItemVariants: (props?: ({
    size?: import("../../patterns/element-anatomy/item-anatomy").RowSize | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {
    /** 唯一 id。必填,用於 expand / select / keyboard 追蹤 */
    id: string;
    /** 主要文字 */
    label: React.ReactNode;
    /** 左側 icon(chevron 之後)。LucideIcon 型別,尺寸由 TreeView size 決定 */
    icon?: LucideIcon;
    /**
     * Checkbox(多選模式,label 前方)。傳入 ReactNode(Checkbox 元件)。
     * 位置:在 icon 之後、label 之前。
     * 單選模式通常不需要(用 bg-neutral-selected 表達選中)。
     */
    checkbox?: React.ReactNode;
    /**
     * 右側 inline actions(suffix slot,宣告式 API)。對齊 `uiSize.spec.md`「Inline Action」
     * 與 `SidebarMenuButton.inlineActions` 的同一條規格——TreeItem / SidebarMenuButton /
     * 未來的 row primitive 全部用同一個 declarative API。
     *
     * Consumer 只宣告 intent,TreeItem 用 `<ItemInlineAction>` 自動渲染:
     * - Icon 尺寸 = `ICON_SIZE[treeViewSize]`(自動)
     * - Hover bg、tooltip、aria-label、cursor-pointer 自動處理
     * - **不可以**手刻 button JSX(canonical 實作在 `item-layout.tsx`)
     *
     * ```tsx
     * <TreeItem
     *   id="inbox"
     *   icon={Inbox}
     *   label="Inbox"
     *   inlineActions={[
     *     { icon: MoreVertical, label: '更多', onClick: handleMore },
     *     { icon: Plus,           label: '新增', onClick: handleAdd },
     *   ]}
     *   actionsReveal="hover"
     * />
     * ```
     *
     * 若需要永遠可見的 suffix(如 badge 計數),放在 `label` 內:
     * ```tsx
     * <TreeItem label={<>Inbox <Badge count={3} /></>} />
     * ```
     */
    inlineActions?: InlineActionConfig[];
    /**
     * 右側 actions slot(ReactNode)— escape hatch 供 consumer 放自訂元素
     * (如 DropdownMenu trigger / 自訂 popover / 多 tier 動作)。
     *
     * 跟 `inlineActions` 互斥(同時傳 `inlineActionsSlot` 會優先,`inlineActions` 被忽略)。
     *
     * 規則對齊 Input.endSlot canonical:90% case 用 `inlineActions` 宣告式 API,
     * 10% config 表達不出時走 slot。視覺一致性由 consumer 負責(可使用 host 內部 helper
     * — 但禁止 app-code 直接 import L3 primitive,見 `check_l3_primitive_import.sh`)。
     */
    inlineActionsSlot?: React.ReactNode;
    /**
     * Inline actions 的顯示模式:
     * - `"hover"`(預設):row hover 或鍵盤 focus(focus-visible)時才淡入
     * - `false`:常駐顯示
     *
     * 對齊 `SidebarMenuButton.actionsReveal`,同一套規則。
     */
    actionsReveal?: false | "hover";
    /**
     * 取代 icon 的位置。用於 stepper 的 status indicator(●/○/✓)。
     * 設定後 icon 不渲染、改渲染 indicator;chevron 永遠保留(expandable=旋轉箭頭 / leaf=placeholder)。
     */
    indicator?: React.ReactNode;
    /** 是否停用 */
    disabled?: boolean;
    /** 子 TreeItem(有 children = expandable,沒有 = leaf) */
    children?: React.ReactNode;
}
declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLDivElement>>;
export declare const treeViewMeta: {
    readonly component: "TreeView";
    readonly family: null;
    readonly variants: {};
    readonly sizes: {};
    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
    readonly tokens: {
        readonly bg: readonly ["bg-neutral-hover", "bg-primary", "bg-primary-subtle", "bg-surface"];
        readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"];
        readonly ring: readonly ["ring-ring"];
    };
    readonly defaultSize: "md";
};
export { TreeView, TreeItem, treeItemVariants };
//# sourceMappingURL=tree-view.d.ts.map