import { ReactNode, ReactElement } from 'react';
/**
 * Context object passed to the detail panel render function.
 */
export interface DetailPanelContext<TRow = unknown> {
    /** The row data for this detail panel */
    row: TRow;
    /** The row index */
    rowIndex: number;
}
/**
 * Get the detail renderer for a grid element.
 * @internal
 */
export declare function getDetailRenderer(gridElement: HTMLElement): ((ctx: DetailPanelContext<unknown>) => ReactNode) | undefined;
/**
 * Props for the GridDetailPanel component.
 */
export interface GridDetailPanelProps<TRow = unknown> {
    /**
     * Render function for the detail panel content.
     * Receives the row data and row index.
     *
     * @example
     * ```tsx
     * <GridDetailPanel>
     *   {({ row }) => <EmployeeDetails employee={row} />}
     * </GridDetailPanel>
     * ```
     */
    children: (ctx: DetailPanelContext<TRow>) => ReactNode;
    /**
     * Whether to show the expand/collapse column.
     * @default true
     */
    showExpandColumn?: boolean;
    /**
     * Animation style for expand/collapse.
     * - 'slide': Smooth height animation (default)
     * - 'fade': Opacity transition
     * - false: No animation
     * @default 'slide'
     */
    animation?: 'slide' | 'fade' | false;
}
/**
 * Component for defining a master-detail panel within a DataGrid.
 *
 * Renders a `<tbw-grid-detail>` custom element in the light DOM that the
 * MasterDetailPlugin picks up to render expandable row details.
 *
 * ## Usage
 *
 * ```tsx
 * import { DataGrid, GridDetailPanel } from '@toolbox-web/grid-react';
 * import { MasterDetailPlugin } from '@toolbox-web/grid/all';
 *
 * function EmployeeGrid() {
 *   const config = {
 *     plugins: [new MasterDetailPlugin()],
 *     // ... other config
 *   };
 *
 *   return (
 *     <DataGrid rows={employees} gridConfig={config}>
 *       <GridDetailPanel showExpandColumn animation="slide">
 *         {({ row }) => (
 *           <div className="detail-panel">
 *             <h3>{row.firstName} {row.lastName}</h3>
 *             <p>Department: {row.department}</p>
 *             <p>Email: {row.email}</p>
 *           </div>
 *         )}
 *       </GridDetailPanel>
 *     </DataGrid>
 *   );
 * }
 * ```
 *
 * ## How it works
 *
 * 1. This component renders a `<tbw-grid-detail>` element in the grid's light DOM
 * 2. The ReactGridAdapter detects this element and creates a detail renderer
 * 3. When a row is expanded, the adapter calls your render function
 * 4. The React component is rendered into the detail row container
 *
 * @category Component
 */
export declare function GridDetailPanel<TRow = unknown>(props: GridDetailPanelProps<TRow>): ReactElement;
export declare namespace GridDetailPanel {
    var displayName: string;
}
//# sourceMappingURL=grid-detail-panel.d.ts.map