import type React from 'react';
import type { CxTreeNode, TreeChangeDetail, TreeSelectDetail } from './types.js';
export interface TreeViewRef extends HTMLElement {
    /** Expands all branch nodes in the tree. */
    expandAll(): void;
    /** Collapses all branch nodes in the tree. */
    collapseAll(): void;
    /** Expands a specific node by ID. */
    expand(nodeId: string): void;
    /** Collapses a specific node by ID. */
    collapse(nodeId: string): void;
    /** Selects all non-disabled nodes (multi-select mode only). */
    selectAll(): void;
    /** Deselects all nodes. */
    deselectAll(): void;
    /** Returns the IDs of all currently selected nodes. */
    getSelectedIds(): string[];
    /** Returns the IDs of all currently expanded nodes. */
    getExpandedIds(): string[];
}
/**
 * Pass the recursive `nodes` array as a typed property (CxTreeNode[]), not as children or JSON text.
 * Each node has `id`, `label`, optional `icon`, `children` (recursive), `expanded`, `selected`, `disabled`.
 * For controlled state, use `expandedIds` and `selectedIds` (string[]) instead of per-node state.
 * `onChange` fires on expand/collapse with `{ id, expanded }`. `onSelect` fires on selection with `{ id, label, selected }`.
 * Multi-select mode (`selectionMode="multiple"`) renders tri-state checkboxes with cascade (parent ↔ children).
 * Keyboard: Arrow keys navigate, Enter/Space toggle, Home/End jump, * expands siblings, type-ahead search.
 * Imperative: `expandAll()`, `collapseAll()`, `expand(id)`, `collapse(id)`, `selectAll()`, `deselectAll()` — see the framework access note below.
 * Style zones via `::part(base)`, `::part(item)`, `::part(group)`, `::part(chevron)`, `::part(checkbox)`, `::part(label)`.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<TreeViewRef>(null)`, pass `ref={api}`, then `api.current?.expandAll()`.
 * Available: expandAll(), collapseAll(), expand(), +5 more.
 *
 * @csspart base, item, group, chevron, checkbox, label
 */
export interface TreeViewOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Visual style variant. Allowed values: `default`, `compact`, `outline`.
     * @example 'default'
     */
    variant?: 'default' | 'compact' | 'outline';
    /**
     * Selection behavior: 'none' (display only), 'single' (one item), or 'multiple' (checkboxes with tri-state cascade). Allowed values: `none`, `single`, `multiple`.
     * @example 'none'
     */
    selectionMode?: 'none' | 'single' | 'multiple';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Recursive tree structure. Each node has id, label, optional icon/children/expanded/selected/disabled. When expandedIds or selectedIds are set, per-node expanded/selected fields are ignored.
     * @example [{ id: 'root', label: 'Root' }]
     */
    nodes?: CxTreeNode[];
    /**
     * Controlled expanded state — array of node IDs to expand. When set, overrides per-node expanded fields. Enables controlled expand/collapse without rebuilding the tree.
     * @example ['item-1']
     */
    expandedIds?: string[];
    /**
     * Controlled selected state — array of node IDs to select. When set, overrides per-node selected fields. Enables controlled selection without rebuilding the tree.
     * @example ['item-1']
     */
    selectedIds?: string[];
    /**
     * Fires when the committed component value or state changes. Detail: `TreeChangeDetail`.
     * @example (event) => console.log(event.detail.expanded)
     */
    onChange?: (event: CustomEvent<TreeChangeDetail>) => void;
    /**
     * Fires when the user selects an item or data node. Detail: `TreeSelectDetail`.
     * @example (event) => console.log(event.detail.id)
     */
    onSelect?: (event: CustomEvent<TreeSelectDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<TreeView>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-tree-view>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type TreeViewProps = TreeViewOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TreeViewOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const TreeView: React.ForwardRefExoticComponent<TreeViewOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof TreeViewOwnProps> & React.RefAttributes<TreeViewRef>>;