@vitus-labs/coolgrid/lib/index.d.ts

Ultra flexible and extensible grid system inspired by Bootstrap grid, based on styled-components

import type { BreakpointKeys } from '@vitus-labs/core';
import type { ComponentType } from 'react';
import { extendCss } from '@vitus-labs/unistyle';
import type { FC } from 'react';
import { Provider } from '@vitus-labs/unistyle';
import type { ReactNode } from 'react';

export declare const Col: ElementType<[
'containerWidth',
'width',
'rowComponent',
'rowCss',
'colCss',
'colComponent',
'columns',
'gap',
'gutter',
'contentAlignX'
]>;

declare type ComponentProps = ConfigurationProps & Partial<{
    component: ComponentType;
    css: ExtraStyles;
}>;

declare type ConfigurationProps = Partial<{
    size: ValueType;
    padding: ValueType;
    gap: ValueType;
    gutter: ValueType;
    columns: ValueType;
    colCss: ExtraStyles;
    rowCss: ExtraStyles;
    colComponent: ComponentType;
    rowComponent: ComponentType;
    contentAlignX: ContentAlignX;
    containerWidth: ContainerWidth;
    width: ContainerWidth | ((widths: Record<string, any>) => ContainerWidth);
}>;

export declare const Container: ElementType<['containerWidth']>;

declare type ContainerWidth = CreateValueType<Value>;

declare type ContentAlignX = 'center' | 'left' | 'right' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';

declare type CreateValueType<T> = T | T[] | Partial<Record<BreakpointKeys, T>>;

declare type Css = Parameters<typeof extendCss>[0];

declare type ElementType<O extends string[]> = FC<Omit<ComponentProps, O[number]> & Record<string, unknown> & {
    children?: ReactNode;
}> & {
    pkgName: string;
    VITUS_LABS__COMPONENT: string;
};

declare type ExtraStyles = CreateValueType<Css>;

export { Provider }

export declare const Row: ElementType<[
'containerWidth',
'width',
'rowComponent',
'rowCss'
]>;

export declare const theme: {
    readonly rootSize: 16;
    readonly breakpoints: {
        readonly xs: 0;
        readonly sm: 576;
        readonly md: 768;
        readonly lg: 992;
        readonly xl: 1200;
    };
    readonly grid: {
        readonly columns: 12;
        readonly container: {
            readonly xs: "100%";
            readonly sm: 540;
            readonly md: 720;
            readonly lg: 960;
            readonly xl: 1140;
        };
    };
};

declare type Value = string | number;

declare type ValueType = CreateValueType<number>;

export { }