/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
import { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
export declare const ALIGN_ITEMS: readonly ["start", "end", "center", "baseline", "stretch"];
export declare const ALIGN_SELF: readonly ["auto", "start", "end", "center", "baseline", "stretch"];
export declare const DIRECTION: readonly ["row", "row-reverse", "column", "column-reverse"];
export declare const JUSTIFY_CONTENT: readonly ["start", "end", "center", "between", "around"];
export declare const TEXT_ALIGN: readonly ["start", "end", "center", "justify"];
export declare const SPACE: readonly [false, "xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
export declare const WRAP: readonly ["nowrap", "wrap", "wrap-reverse"];
export declare const PLACEMENT: readonly ["end", "start", "center"];
export type AlignItems = (typeof ALIGN_ITEMS)[number];
export type AlignSelf = (typeof ALIGN_SELF)[number];
export type Direction = (typeof DIRECTION)[number];
export type JustifyContent = (typeof JUSTIFY_CONTENT)[number];
export type TextAlign = (typeof TEXT_ALIGN)[number];
export type GridNumber = number | string;
export type Breakpoint = number | string | boolean;
export type Space = (typeof SPACE)[number];
export type Wrap = (typeof WRAP)[number];
export interface IColProps extends HTMLAttributes<HTMLDivElement> {
    /** Sets the total number of grid `columns` that the column spans on all screen sizes */
    size?: number | string;
    /** Defines the column size on extra-small screens.
     *  See [breakpoints](/components/theme-object#default_theme).
     */
    xs?: number | string | boolean;
    /** Defines the column size on small screens*/
    sm?: number | string | boolean;
    /** Defines the column size on medium screens */
    md?: number | string | boolean;
    /** Defines the column size on large screens */
    lg?: number | string | boolean;
    /** Defines the column size on extra-large screens */
    xl?: number | string | boolean;
    /**
     * Applies the `align-self` flex item property, overriding `Row alignItems`
     * vertical alignment on all screen sizes
     */
    alignSelf?: AlignSelf;
    /** Applies the `align-self` flex item property to the column on extra-small screens */
    alignSelfXs?: AlignSelf;
    /** Applies the `align-self` flex item property to the column on small screens */
    alignSelfSm?: AlignSelf;
    /** Applies the `align-self` flex item property to the column on medium screens */
    alignSelfMd?: AlignSelf;
    /** Applies the `align-self` flex item property to the column on large screens */
    alignSelfLg?: AlignSelf;
    /** Applies the `align-self` flex item property to the column on extra-large screens */
    alignSelfXl?: AlignSelf;
    /**
     * Applies the RTL-aware `text-align` property to the column on all screen sizes
     */
    textAlign?: TextAlign;
    /** Applies the `text-align` property to the column on extra-small screens */
    textAlignXs?: TextAlign;
    /** Applies the `text-align` property to the column on small screens */
    textAlignSm?: TextAlign;
    /** Applies the `text-align` property to the column on medium screens */
    textAlignMd?: TextAlign;
    /** Applies the `text-align` property to the column on large screens */
    textAlignLg?: TextAlign;
    /** Applies the `text-align` property to the column on extra-large screens */
    textAlignXl?: TextAlign;
    /**
     * Offsets the column relative to the total number of `columns` in the
     * grid on all screen sizes
     */
    offset?: number | string;
    /** Applies offset to the column on extra-small screens */
    offsetXs?: number | string;
    /** Applies offset to the column on small screens */
    offsetSm?: number | string;
    /** Applies offset to the column on medium screens */
    offsetMd?: number | string;
    /** Applies offset to the column on large screens */
    offsetLg?: number | string;
    /** Applies offset to the column on extra-large screens */
    offsetXl?: number | string;
    /**
     * Applies the `order` flex item property to the column on all screen sizes. Note that
     * order modification can introduce accessibility problems by
     * confusing tab ordering. Rely on semantic DOM ordering whenever possible.
     */
    order?: number | string;
    /** Sets the `order` flex item property of the column on extra-small screens */
    orderXs?: number | string;
    /** Sets the `order` flex item property of the column on small screens */
    orderSm?: number | string;
    /** Sets the `order` flex item property of the column on medium screens */
    orderMd?: number | string;
    /** Sets the `order` flex item property of the column on large screens */
    orderLg?: number | string;
    /** Sets the `order` flex item property of the column on extra-large screens */
    orderXl?: number | string;
}
export interface IGridProps extends HTMLAttributes<HTMLDivElement> {
    /** Defines the number of individual columns that the grid contains */
    columns?: number | string;
    /** Specifies the grid column gutter width. The value `false` collapses the gutters */
    gutters?: Space;
    /** Highlights the columns for layout debugging */
    debug?: boolean;
}
export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Applies the `align-items` flex container property to the row.
     * This affects vertical `Col` alignment on all screen sizes.
     */
    alignItems?: AlignItems;
    /** Applies the `align-items` flex container property to the row on extra-small screens */
    alignItemsXs?: AlignItems;
    /** Applies the `align-items` flex container property to the row on small screens */
    alignItemsSm?: AlignItems;
    /** Applies the `align-items` flex container property to the row on medium screens */
    alignItemsMd?: AlignItems;
    /** Applies the `align-items` flex container property to the row on large screens */
    alignItemsLg?: AlignItems;
    /** Applies the `align-items` flex container property to the row on extra-large screens */
    alignItemsXl?: AlignItems;
    /**
     * Applies the `justify-content` flex container property to the row.
     * This affects horizontal `Col` alignment on all screen sizes.
     */
    justifyContent?: JustifyContent;
    /** Applies the `justify-content` flex container property to the row on extra-small screens */
    justifyContentXs?: JustifyContent;
    /** Applies the `justify-content` flex container property to the row on small screens */
    justifyContentSm?: JustifyContent;
    /** Applies the `justify-content` flex container property to the row on medium screens */
    justifyContentMd?: JustifyContent;
    /** Applies the `justify-content` flex container property to the row on large screens */
    justifyContentLg?: JustifyContent;
    /** Applies the `justify-content` flex container property to the row on extra-large screens */
    justifyContentXl?: JustifyContent;
    /**
     * Applies the `flex-wrap` container property to the row. This affects `Col` wrapping on
     * all screen sizes.
     */
    wrap?: Wrap;
    /** Applies the `flex-wrap` container property to the row on extra-small screens */
    wrapXs?: Wrap;
    /** Applies the `flex-wrap` container property to the row on small screens */
    wrapSm?: Wrap;
    /** Applies the `flex-wrap` container property to the row on medium screens */
    wrapMd?: Wrap;
    /** Applies the `flex-wrap` container property to the row on large screens */
    wrapLg?: Wrap;
    /** Applies the `flex-wrap` container property to the row on extra-large screens */
    wrapXl?: Wrap;
}
export declare const ORIENTATION: readonly ["top", "bottom", "start", "end"];
export type Orientation = (typeof ORIENTATION)[number];
export interface IPaneProviderProps {
    /** Identifies the pane provider */
    id?: string;
    /** Provides the total width, in `px` units, of all panes in the layout */
    totalPanesWidth: number;
    /** Provides the total height, in `px` units, of all panes in the layout */
    totalPanesHeight: number;
    /** Defines default row values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter. */
    defaultRowValues?: Record<string, number>;
    /** Defines default column values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter. */
    defaultColumnValues?: Record<string, number>;
    /** Defines row values, in `fr` units, for a controlled layout. The values are keyed by splitter. */
    rowValues?: Record<string, number>;
    /** Defines column values, in `fr` units, for a controlled layout. The values are keyed by splitter. */
    columnValues?: Record<string, number>;
    /**
     * Handles splitter position changes
     *
     * @param rowValues The updated row values
     * @param columnValues The updated column values
     */
    onChange?: (rowValues: Record<string, number>, columnValues: Record<string, number>) => void;
    /**
     * Surfaces render props for applying splitter state to the supporting layout
     *
     * @param id Provides the `id` prop, if specified; otherwise, a generated ID.
     * @param getColumnValue Gets column value by key
     * @param getRowValue Gets row value by key
     * @param getGridTemplateRows Gets grid template rows track
     * @param getGridTemplateColumns Gets grid template columns track
     */
    children?: ({ id, getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: {
        id: string;
        getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
        getRowValue: (splitterKey: string, isPixels?: boolean) => number;
        getGridTemplateRows: (isPixels?: boolean) => string;
        getGridTemplateColumns: (isPixels?: boolean) => string;
    }) => ReactNode;
}
export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
    /** Identifies the associated `PaneProvider`. Assumes the closest parent provider, by default. */
    providerId?: string;
    /** Specifies the splitter key */
    layoutKey: string;
    /** Sets a minimum, in `fr` units, for splitter position */
    min: number;
    /** Sets a maximum, in `fr` units, for splitter position */
    max: number;
    /** Determines splitter orientation within a pane */
    orientation?: Orientation;
    /** Determines if the splitter only toggles between `min` and `max` */
    isFixed?: boolean;
}
export interface ISplitterButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    /** Adjusts the placement of the splitter button. Assumes start when vertical and center when horizontal, by default. */
    placement?: (typeof PLACEMENT)[number];
    /** Renders the provided label text inside a tooltip */
    label: string;
}