import type React from 'react';
import type { TreemapChangeDetail, TreemapHoverDetail, TreemapNode, TreemapSelectDetail } from './types.js';
export interface TreemapRef extends HTMLElement {
    /** Zooms into a specific node by ID. Fires cx-change. */
    zoomTo(nodeId: string): void;
    /** Zooms out one level toward the root. Fires cx-change. */
    zoomOut(): void;
    /** Returns to the root view. Fires cx-change. */
    resetZoom(): void;
}
/**
 * Treemap is a zoomable hierarchical data visualization. Pass `nodes` as a typed TreemapNode[] property — a recursive tree of `{ id, label, value, intent?, children?, disabled? }`; never stringify it.
 * Cell area is proportional to `value`. Cells with `children` are drillable — click to zoom in, breadcrumb to zoom out.
 * Color: 12 category CSS vars (`--cx-treemap-color-0` through `--cx-treemap-color-11`) auto-assigned by index. Override per-node with `intent` (primary, success, warning, danger, etc.).
 * Zoom state: `currentRoot` prop (node ID to zoom into, empty = root). `onChange` fires with `{ nodeId, path, depth }`.
 * `onSelect` fires on leaf cell click with `{ id, label, value }`. `onHover` fires on cell hover with `{ id, label, value, hasChildren, rect, enter }`.
 * Keyboard: Arrow keys navigate cells by 2D proximity, Enter zooms in, Escape zooms out, Home/End jump to first/last cell.
 * Imperative: `zoomTo(nodeId)`, `zoomOut()`, `resetZoom()` — see the framework access note below.
 * Style zones via `::part(base)`, `::part(grid)`, `::part(breadcrumb)`, `::part(cell)`, `::part(cell-label)`, `::part(cell-value)`, `::part(tooltip)`.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<TreemapRef>(null)`, pass `ref={api}`, then `api.current?.zoomTo()`.
 * Available: zoomTo(), zoomOut(), resetZoom().
 *
 * @csspart base, grid, breadcrumb, breadcrumb-item, cell, cell-label, cell-value, cell-overlay, cell-drill, tooltip
 */
export interface TreemapOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label: string;
    /**
     * Border radius style for cells: 'sharp' (default) or 'rounded'. Allowed values: `sharp`, `rounded`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded';
    /**
     * Grid sizing mode: 'content' (default, 5:3 aspect ratio) or 'fill' (fills parent container height). Allowed values: `content`, `fill`.
     * @example 'content'
     */
    fit?: 'content' | 'fill';
    /**
     * ID of the node to zoom into. When set, renders that node's children. Empty = root view.
     * @example 'example'
     */
    currentRoot?: string;
    /**
     * Minimum cell area fraction (0–1) before a node is aggregated into "Other" (default: 0.001).
     * @defaultValue 0
     * @example 1
     */
    minCellArea?: number;
    /**
     * Whether to display formatted numeric values inside cells (default: true).
     * @defaultValue true
     * @example true
     */
    showValues?: boolean;
    /**
     * Hierarchical tree data. Each node has id, label, value (numeric — determines cell area), optional intent, children (recursive), disabled.
     * @example [{ id: 'root', label: 'Root', value: 100 }]
     */
    nodes: TreemapNode[];
    /**
     * Fires when the committed component value or state changes. Detail: `TreemapChangeDetail`.
     * @example (event) => console.log(event.detail.nodeId)
     */
    onChange?: (event: CustomEvent<TreemapChangeDetail>) => void;
    /**
     * Fires when the user selects an item or data node. Detail: `TreemapSelectDetail`.
     * @example (event) => console.log(event.detail.id)
     */
    onSelect?: (event: CustomEvent<TreemapSelectDetail>) => void;
    /**
     * Fires when the active hover target changes. Detail: `TreemapHoverDetail`.
     * @example (event) => console.log(event.detail.id)
     */
    onHover?: (event: CustomEvent<TreemapHoverDetail>) => 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 `<Treemap>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-treemap>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type TreemapProps = TreemapOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TreemapOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Treemap: React.ForwardRefExoticComponent<TreemapOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof TreemapOwnProps> & React.RefAttributes<TreemapRef>>;