import { VariantProps } from "@trackunit/css-class-variance-utilities";
import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
import { ReactElement, ReactNode } from "react";
import { cvaWidgetContent } from "./WidgetContent.variants";
export type WidgetContentVariants = NonNullable<VariantProps<typeof cvaWidgetContent>>;
export interface WidgetContentProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
    /**
     * Child elements to render in the body
     */
    children: ReactNode | null;
    /**
     * Grid layout structure: 'none' for basic stacking, 'top-fill' for fixed header with flexible content, 'fill-bottom' for flexible content with fixed footer, 'top-fill-bottom' for header and footer with flexible middle
     *
     * @default 'none'
     */
    layout: NonNullable<WidgetContentVariants["layout"]>;
    /**
     * Internal padding: 'none' for no padding, 'responsive' for consistent padding around content
     *
     * @default 'none'
     */
    padding: NonNullable<WidgetContentVariants["padding"]>;
    /**
     * Spacing between child elements: 'none' for no gaps, 'responsive' for consistent spacing between items
     *
     * @default 'none'
     */
    gap: NonNullable<WidgetContentVariants["gap"]>;
    /**
     * Content alignment: 'none' for a standard layout, 'centered' to center content within the layout
     *
     * @default 'none'
     */
    centering: NonNullable<WidgetContentVariants["centering"]>;
}
/**
 * WidgetContent is the layout foundation for all widget body content. It provides CSS Grid-based
 * layout structures, responsive padding, spacing between child elements, and optional centering.
 * The padding intentionally lives on this component (not on the Widget wrapper) so that overflow
 * scrollbars are not inset.
 *
 * ### Layout options
 * - `"none"` — basic stacking with no grid structure
 * - `"top-fill"` — fixed-height header (first child) with remaining space filled by content
 * - `"fill-bottom"` — content fills available space with a fixed-height footer at the bottom
 * - `"top-fill-bottom"` — fixed header, flexible middle, and fixed footer
 *
 * ### When to use
 * Use WidgetContent as the direct child of a widget `Card` to structure its body — for example, a `KPI` at the top with a chart filling the rest.
 *
 * ### When not to use
 * Do not use WidgetContent outside a widget context. For general page layout, use `Page` and `PageContent`.
 *
 * @example KPI with chart using top-fill layout
 * ```tsx
 * import { WidgetContent } from "@trackunit/react-widgets";
 * import { KPI } from "@trackunit/react-components";
 *
 * const AssetWidget = () => (
 *   <WidgetContent layout="top-fill" padding="responsive" gap="none" centering="none">
 *     <KPI title="Critical Assets" unit="assets" value={42} />
 *     <div>Chart goes here</div>
 *   </WidgetContent>
 * );
 * ```
 * @param {WidgetContentProps} props - The props for the WidgetContent component
 * @returns {ReactElement} WidgetContent component
 */
export declare const WidgetContent: ({ children, "data-testid": dataTestId, layout, padding, gap, className, centering, ref, style, }: WidgetContentProps) => ReactElement;