@vitus-labs/coolgrid
Version:
Ultra flexible and extensible grid system inspired by Bootstrap grid, based on styled-components
74 lines (73 loc) • 2.47 kB
TypeScript
import { Provider, extendCss } from "@vitus-labs/unistyle";
import { BreakpointKeys } from "@vitus-labs/core";
import { ComponentType, FC, ReactNode } from "react";
//#region src/types.d.ts
type CreateValueType<T> = T | T[] | Partial<Record<BreakpointKeys, T>>;
type Value = string | number;
type Css = Parameters<typeof extendCss>[0];
type ExtraStyles = CreateValueType<Css>;
type ValueType = CreateValueType<number>;
type ContainerWidth = CreateValueType<Value>;
type ContentAlignX = 'center' | 'left' | 'right' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';
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);
}>;
type ComponentProps = ConfigurationProps & Partial<{
component: ComponentType;
css: ExtraStyles;
}>;
type ElementType<O extends string[]> = FC<Omit<ComponentProps, O[number]> & Record<string, unknown> & {
children?: ReactNode;
}> & {
pkgName: string;
VITUS_LABS__COMPONENT: string;
};
//#endregion
//#region src/Col/component.d.ts
declare const Component: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss', 'colCss', 'colComponent', 'columns', 'gap', 'gutter', 'contentAlignX']>;
//#endregion
//#region src/Container/component.d.ts
declare const Component$1: ElementType<['containerWidth']>;
//#endregion
//#region src/Row/component.d.ts
declare const Component$2: ElementType<['containerWidth', 'width', 'rowComponent', 'rowCss']>;
//#endregion
//#region src/theme.d.ts
/**
* Default Bootstrap-like grid configuration. Provides 5 breakpoints (xs-xl),
* a 12-column grid, and responsive container max-widths matching Bootstrap 4.
*/
declare const _default: {
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;
};
};
};
//#endregion
export { Component as Col, Component$1 as Container, Provider, Component$2 as Row, _default as theme };
//# sourceMappingURL=index2.d.ts.map