import { type JSX, type ReactNode } from "react";
import type { GridDefaults, GridState, Size } from "../types";
/**
 * Options for the `useGridState` hook.
 */
type UseGridStateOptions = GridDefaults & {
    /** Optional key to persist the state in local storage. */
    persist?: string;
};
/**
 * Hook to manage the state of the grid (columns and rows sizes).
 * Can persist the state to local storage.
 *
 * @param options - Configuration options.
 * @returns An observable state object containing the grid configuration.
 */
export declare function useGridState({ persist, ...gridConfig }: UseGridStateOptions): readonly [GridState, (getNextValue: GridState | ((currentState: GridState) => GridState)) => void];
type GridBaseProps = Omit<JSX.IntrinsicElements["div"], "onTouchStart" | "onMouseDown" | "onClickCapture" | "onMouseUp" | "onTouchEnd" | "onMouseMove" | "onTouchMove" | "onChange" | "defaultValue"> & {
    children: ReactNode;
    onChange?: (state: GridState) => void;
    dragHandleSize?: string;
    persist?: string;
};
/**
 * Props for the ResizeableGrid component.
 */
export type GridProps = GridBaseProps & {
    /** Controlled grid state. */
    value?: GridState;
    /** Default grid state for uncontrolled mode. */
    defaultValue?: {
        columns?: Array<Size>;
        rows?: Array<Size>;
    };
};
/**
 * Context to share grid state and event handlers with child components (like drag handles).
 */
export declare let GridContext: import("react").Context<{
    columns: number;
    rows: number;
}>;
/**
 * A container component that provides a resizeable grid layout.
 * Supports dragging handles to resize columns and rows.
 *
 * @param props - Component props.
 * @returns The rendered grid container with drag handles and children.
 *
 * @example
 * ```tsx
 * <ResizeableGrid columns={2} rows={1}>
 *   <GridArea column={{ start: 1, end: 1 }} row={{ start: 1, end: 1 }}>
 *     Left
 *   </GridArea>
 *   <GridArea column={{ start: 2, end: 2 }} row={{ start: 1, end: 1 }}>
 *     Right
 *   </GridArea>
 * </ResizeableGrid>
 * ```
 */
export declare function ResizeableGrid({ children, onChange, dragHandleSize, persist, defaultValue, value, ...props }: GridProps): JSX.Element;
/**
 * Props for the GridArea component.
 */
export type GridAreaProps = JSX.IntrinsicElements["section"] & {
    /** Column range (1-based). */
    column: {
        start: number;
        end: number;
    };
    /** Row range (1-based). */
    row: {
        start: number;
        end: number;
    };
};
/**
 * A component representing a specific area within the grid.
 * Automatically calculates `grid-column` and `grid-row` styles.
 *
 * @param props - Component props.
 * @returns The rendered section element.
 * ```tsx
 * <GridArea column={{ start: 3, end: 4 }} row={{ start: 1, end: 2 }} />
 * ```
 */
export declare function GridArea({ column, row, ...props }: GridAreaProps): JSX.Element;
export {};