import { ReactNode, ReactElement } from 'react';
/**
 * Context object passed to the responsive card render function.
 */
export interface ResponsiveCardContext<TRow = unknown> {
    /** The row data for this card */
    row: TRow;
    /** The row index (zero-based) */
    index: number;
}
/**
 * Get the responsive card renderer for a grid element.
 * @internal
 */
export declare function getResponsiveCardRenderer(gridElement: HTMLElement): ((ctx: ResponsiveCardContext<unknown>) => ReactNode) | undefined;
/**
 * Props for the GridResponsiveCard component.
 */
export interface GridResponsiveCardProps<TRow = unknown> {
    /**
     * Render function for the card content.
     * Receives the row data and row index.
     *
     * @example
     * ```tsx
     * <GridResponsiveCard>
     *   {({ row, index }) => (
     *     <div className="custom-card">
     *       <img src={row.avatar} alt={row.name} />
     *       <span>{row.name}</span>
     *     </div>
     *   )}
     * </GridResponsiveCard>
     * ```
     */
    children: (ctx: ResponsiveCardContext<TRow>) => ReactNode;
    /**
     * Card row height in pixels.
     * Use 'auto' for dynamic height based on content.
     * @default 'auto'
     */
    cardRowHeight?: number | 'auto';
}
/**
 * Component for defining custom card layouts in responsive mode.
 *
 * Renders a `<tbw-grid-responsive-card>` custom element in the light DOM that
 * the ResponsivePlugin picks up to render custom cards in mobile/narrow layouts.
 *
 * ## Usage
 *
 * ```tsx
 * import { DataGrid, GridResponsiveCard } from '@toolbox-web/grid-react';
 * import { ResponsivePlugin } from '@toolbox-web/grid/all';
 *
 * function EmployeeGrid() {
 *   const config = {
 *     plugins: [new ResponsivePlugin({ breakpoint: 500 })],
 *     // ... other config
 *   };
 *
 *   return (
 *     <DataGrid rows={employees} gridConfig={config}>
 *       <GridResponsiveCard cardRowHeight={80}>
 *         {({ row, index }) => (
 *           <div className="employee-card">
 *             <img src={row.avatar} alt="" />
 *             <div>
 *               <strong>{row.name}</strong>
 *               <span>{row.department}</span>
 *             </div>
 *           </div>
 *         )}
 *       </GridResponsiveCard>
 *     </DataGrid>
 *   );
 * }
 * ```
 *
 * ## How it works
 *
 * 1. This component renders a `<tbw-grid-responsive-card>` element in the grid's light DOM
 * 2. The ReactGridAdapter detects this element and creates a card renderer
 * 3. When the grid enters responsive mode, the plugin calls your render function for each row
 * 4. The React component is rendered into the card container
 *
 * @category Component
 */
export declare function GridResponsiveCard<TRow = unknown>(props: GridResponsiveCardProps<TRow>): ReactElement;
export declare namespace GridResponsiveCard {
    var displayName: string;
}
//# sourceMappingURL=grid-responsive-card.d.ts.map