/**
 * Layout components — Column, Row, Grid, Container, Div, Span, etc.
 */
import { ContainerComponent, type Component } from '../../core/component.js';
import type { ContainerProps, RxStr } from '../../core/component.js';
import type { Ref } from '../../rx/collection.js';
/** Semantic gap tokens → numeric values (matching Tailwind spacing scale). */
export type GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
/** Accepts a numeric gap OR a semantic token. Resolves to a number. */
export type Gap = number | GapToken;
export interface ColumnProps extends ContainerProps {
    gap?: Gap;
    align?: string;
}
export declare function Column(props: ColumnProps & {
    children?: Component[];
}): ContainerComponent;
export interface RowProps extends ContainerProps {
    gap?: Gap;
    align?: string;
}
export declare function Row(props: RowProps & {
    children?: Component[];
}): ContainerComponent;
export interface GridProps extends ContainerProps {
    columns?: number | Record<string, number>;
    gap?: Gap;
    minColumnWidth?: string;
    align?: string;
}
export declare function Grid(props: GridProps & {
    children?: Component[];
}): ContainerComponent;
export interface GridItemProps extends ContainerProps {
    colSpan?: number;
    rowSpan?: number;
}
export declare function GridItem(props: GridItemProps & {
    children?: Component[];
}): ContainerComponent;
export declare function Container(props?: ContainerProps): ContainerComponent;
export declare function Div(props?: ContainerProps): ContainerComponent;
export declare function Span(props?: ContainerProps): ContainerComponent;
export interface DashboardProps extends ContainerProps {
    columns?: number;
    rowHeight?: number;
    gap?: number;
}
export declare function Dashboard(props: DashboardProps & {
    children?: Component[];
}): ContainerComponent;
export interface DashboardItemProps extends ContainerProps {
    col?: number;
    row?: number;
    colSpan?: number;
    rowSpan?: number;
}
export declare function DashboardItem(props: DashboardItemProps & {
    children?: Component[];
}): ContainerComponent;
export declare function Pages(props?: ContainerProps): ContainerComponent;
export interface PageProps extends ContainerProps {
    name: string;
}
export declare function Page(props: PageProps): ContainerComponent;
/**
 * A detail pane that displays content from a Ref. Compiles to a conditional
 * block: shows `children` when the ref resolves, shows `empty` otherwise.
 *
 * @example
 * ```ts
 * const detail = Detail({ of: selectedPatient })
 * detail.add(Heading(selectedPatient.dot('name')))
 * ```
 */
export interface DetailProps extends ContainerProps {
    /** Reactive reference expression (e.g. from `collection.by(signal)`) */
    of: Ref | RxStr;
    /** Component to show when ref resolves to null/undefined */
    empty?: Component;
}
export declare function Detail(props: DetailProps): ContainerComponent;
/**
 * Two-pane layout: master (list) on the left, detail on the right.
 * Expects exactly two children: the master panel and the detail panel.
 *
 * @example
 * ```ts
 * const md = MasterDetail({ masterWidth: '350px' })
 * md.add(table)    // master
 * md.add(detail)   // detail
 * ```
 */
export interface MasterDetailProps extends ContainerProps {
    /** Width of the master pane. Defaults to '33%'. */
    masterWidth?: string;
    gap?: number;
}
export declare function MasterDetail(props?: MasterDetailProps): ContainerComponent;
//# sourceMappingURL=index.d.ts.map