import { Responsive, numberIterator } from './util';

export declare const gridTemplateRowsValues: readonly [...{
    key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
}[], {
    readonly key: "none";
    readonly value: "none";
}];
export declare const gridTemplateColumnsValues: readonly [...{
    readonly key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
}[], {
    readonly key: "none";
    readonly value: "none";
}];
declare const gridColumnValues: readonly [...{
    key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
}[], {
    readonly key: "span-2";
    readonly value: "span 2";
}, {
    readonly key: "span-3";
    readonly value: "span 3";
}, {
    readonly key: "span-4";
    readonly value: "span 4";
}, {
    readonly key: "span-5";
    readonly value: "span 5";
}, {
    readonly key: "span-6";
    readonly value: "span 6";
}, {
    readonly key: "span-7";
    readonly value: "span 7";
}, {
    readonly key: "span-8";
    readonly value: "span 8";
}, {
    readonly key: "span-9";
    readonly value: "span 9";
}, {
    readonly key: "span-10";
    readonly value: "span 10";
}, {
    readonly key: "span-11";
    readonly value: "span 11";
}, {
    readonly key: "span-12";
    readonly value: "span 12";
}];
declare const gridRowValues: readonly [...{
    key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
}[], {
    readonly key: "span-2";
    readonly value: "span 2";
}, {
    readonly key: "span-3";
    readonly value: "span 3";
}, {
    readonly key: "span-4";
    readonly value: "span 4";
}, {
    readonly key: "span-5";
    readonly value: "span 5";
}, {
    readonly key: "span-6";
    readonly value: "span 6";
}, {
    readonly key: "span-7";
    readonly value: "span 7";
}, {
    readonly key: "span-8";
    readonly value: "span 8";
}, {
    readonly key: "span-9";
    readonly value: "span 9";
}, {
    readonly key: "span-10";
    readonly value: "span 10";
}, {
    readonly key: "span-11";
    readonly value: "span 11";
}, {
    readonly key: "span-12";
    readonly value: "span 12";
}];
export declare const displayGridValues: readonly [{
    readonly key: "none";
    readonly value: "none";
}, {
    readonly key: "grid";
    readonly value: "grid";
}, {
    readonly key: "inline-grid";
    readonly value: "inline-grid";
}];
declare const gridFlowValues: readonly [{
    readonly key: "row";
    readonly value: "row";
}, {
    readonly key: "column";
    readonly value: "column";
}, {
    readonly key: "dense";
    readonly value: "dense";
}, {
    readonly key: "row-dense";
    readonly value: "row-dense";
}, {
    readonly key: "column-dense";
    readonly value: "column-dense";
}];
export declare const gridLayout: readonly [{
    readonly key: "display";
    readonly className: "teddy-display";
    readonly values: readonly [{
        readonly key: "none";
        readonly value: "none";
    }, {
        readonly key: "grid";
        readonly value: "grid";
    }, {
        readonly key: "inline-grid";
        readonly value: "inline-grid";
    }];
}, {
    readonly key: "rows";
    readonly className: "teddy-gtr";
    readonly values: readonly [...{
        key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
        value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    }[], {
        readonly key: "none";
        readonly value: "none";
    }];
}, {
    readonly key: "columns";
    readonly className: "teddy-gtc";
    readonly values: readonly [...{
        readonly key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
        readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
    }[], {
        readonly key: "none";
        readonly value: "none";
    }];
}, {
    readonly key: "flow";
    readonly className: "teddy-gaf";
    readonly values: readonly [{
        readonly key: "row";
        readonly value: "row";
    }, {
        readonly key: "column";
        readonly value: "column";
    }, {
        readonly key: "dense";
        readonly value: "dense";
    }, {
        readonly key: "row-dense";
        readonly value: "row-dense";
    }, {
        readonly key: "column-dense";
        readonly value: "column-dense";
    }];
}];
export declare const gridChildren: readonly [{
    readonly key: "gridColumnStart";
    readonly className: "teddy-gcs";
    readonly values: {
        key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
        value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    }[];
}, {
    readonly key: "gridColumnEnd";
    readonly className: "teddy-gce";
    readonly values: {
        key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
        value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    }[];
}, {
    readonly key: "gridRowStart";
    readonly className: "teddy-grs";
    readonly values: {
        key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
        value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    }[];
}, {
    readonly key: "gridRowEnd";
    readonly className: "teddy-gre";
    readonly values: {
        key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
        value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    }[];
}, {
    readonly key: "gridColumn";
    readonly className: "teddy-gc";
    readonly values: readonly [...{
        key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
        value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    }[], {
        readonly key: "span-2";
        readonly value: "span 2";
    }, {
        readonly key: "span-3";
        readonly value: "span 3";
    }, {
        readonly key: "span-4";
        readonly value: "span 4";
    }, {
        readonly key: "span-5";
        readonly value: "span 5";
    }, {
        readonly key: "span-6";
        readonly value: "span 6";
    }, {
        readonly key: "span-7";
        readonly value: "span 7";
    }, {
        readonly key: "span-8";
        readonly value: "span 8";
    }, {
        readonly key: "span-9";
        readonly value: "span 9";
    }, {
        readonly key: "span-10";
        readonly value: "span 10";
    }, {
        readonly key: "span-11";
        readonly value: "span 11";
    }, {
        readonly key: "span-12";
        readonly value: "span 12";
    }];
}, {
    readonly key: "gridRow";
    readonly className: "teddy-gr";
    readonly values: readonly [...{
        key: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
        value: "1" | "2" | "3" | "10" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
    }[], {
        readonly key: "span-2";
        readonly value: "span 2";
    }, {
        readonly key: "span-3";
        readonly value: "span 3";
    }, {
        readonly key: "span-4";
        readonly value: "span 4";
    }, {
        readonly key: "span-5";
        readonly value: "span 5";
    }, {
        readonly key: "span-6";
        readonly value: "span 6";
    }, {
        readonly key: "span-7";
        readonly value: "span 7";
    }, {
        readonly key: "span-8";
        readonly value: "span 8";
    }, {
        readonly key: "span-9";
        readonly value: "span 9";
    }, {
        readonly key: "span-10";
        readonly value: "span 10";
    }, {
        readonly key: "span-11";
        readonly value: "span 11";
    }, {
        readonly key: "span-12";
        readonly value: "span 12";
    }];
}];
export type GridLayout = {
    /**
     * The display of the grid. It can be 'none', 'inline-grid', 'grid' or a responsive value.
     * @default 'grid'
     */
    display?: Responsive<(typeof displayGridValues)[number]['key']>;
    /**
     * The number of rows in the grid. It can be a number, 'none' or a responsive value.
     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
     * @example rows={{ sm: '3', md: '5' }}
     */
    rows?: Responsive<(typeof gridTemplateRowsValues)[number]['key']>;
    /**
     * The number of columns in the grid. It can be a number, 'none' or a responsive value.
     * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
     * @example columns={{ sm: '3', md: '5' }}
     */
    columns?: Responsive<(typeof gridTemplateColumnsValues)[number]['key']>;
    flow?: Responsive<(typeof gridFlowValues)[number]['key']>;
};
export type GridChildren = {
    /**
     * The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
     */
    gridColumn?: Responsive<(typeof gridColumnValues)[number]['key']>;
    gridColumnStart?: Responsive<(typeof numberIterator)[number]['key']>;
    gridColumnEnd?: Responsive<(typeof numberIterator)[number]['key']>;
    /**
     * The grid-row CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
     */
    gridRow?: Responsive<(typeof gridRowValues)[number]['key']>;
    gridRowStart?: Responsive<(typeof numberIterator)[number]['key']>;
    gridRowEnd?: Responsive<(typeof numberIterator)[number]['key']>;
};
export {};