import { TNode, Value } from '@tempots/dom';
import { ControlSize } from '../theme';
/**
 * Data structure representing a single item in the tree hierarchy.
 */
export interface TreeItemData {
    /** Unique identifier for the tree item */
    id: string;
    /** Display label for the item */
    label: string;
    /** Optional icon name (Iconify format, e.g., `'mdi:folder'`) */
    icon?: string;
    /** Child items nested under this item */
    children?: TreeItemData[];
    /** Optional badge text displayed on the right */
    badge?: string;
}
/**
 * Configuration options for the {@link TreeView} component.
 */
export interface TreeViewOptions {
    /** Array of tree items to render */
    items: Value<TreeItemData[]>;
    /** Currently selected item ID */
    selectedId?: Value<string | undefined>;
    /** Callback when an item is selected */
    onSelect?: (id: string) => void;
    /**
     * Set of expanded item IDs for controlled mode (read-only).
     * When provided, the component reads expansion state from this value.
     * Use together with `onToggle` to handle state updates externally.
     * When omitted, the component manages its own expansion state internally.
     */
    expandedIds?: Value<Set<string>>;
    /**
     * Callback when an item is expanded or collapsed.
     * In controlled mode (when `expandedIds` is provided), use this to update your external state.
     * In uncontrolled mode, this is called after the internal state is updated.
     */
    onToggle?: (id: string, expanded: boolean) => void;
    /** Size of the tree items */
    size?: Value<ControlSize>;
}
/**
 * TreeView component for displaying hierarchical data with expand/collapse functionality.
 *
 * The TreeView renders a tree structure where items can have nested children. Each item
 * can display an icon, label, and badge. Items with children show a chevron that can be
 * clicked to expand or collapse the nested content.
 *
 * The component supports both controlled and uncontrolled modes:
 * - **Controlled**: Pass `expandedIds` as a prop to manage expansion state externally
 * - **Uncontrolled**: Let the component manage its own expansion state internally
 *
 * @param options - Configuration for tree items, selection, expansion, and callbacks
 * @param children - Additional child nodes appended to the tree container
 * @returns A tree navigation element with interactive expand/collapse behavior
 *
 * @example
 * ```typescript
 * // Uncontrolled mode — component manages expansion state internally
 * TreeView({
 *   items: [
 *     {
 *       id: 'folder1',
 *       label: 'Documents',
 *       icon: 'mdi:folder',
 *       children: [
 *         { id: 'file1', label: 'Report.pdf', icon: 'mdi:file-pdf' },
 *         { id: 'file2', label: 'Data.xlsx', icon: 'mdi:file-excel' },
 *       ]
 *     },
 *     { id: 'file3', label: 'Image.png', icon: 'mdi:file-image' }
 *   ],
 *   onSelect: (id) => console.log('Selected:', id),
 * })
 * ```
 *
 * @example
 * ```typescript
 * // Controlled mode — parent manages expansion state
 * const expandedIds = prop(new Set(['folder1']))
 *
 * TreeView({
 *   items: treeData,
 *   expandedIds,
 *   onToggle: (id, expanded) => {
 *     const ids = new Set(expandedIds.value)
 *     expanded ? ids.add(id) : ids.delete(id)
 *     expandedIds.set(ids)
 *   },
 * })
 * ```
 */
export declare function TreeView({ items, selectedId, onSelect, expandedIds: externalExpandedIds, onToggle, size, }: TreeViewOptions, ...children: TNode[]): import("@tempots/dom").Renderable;