@ozen-ui/kit
Version:
React component library
45 lines (44 loc) • 1.83 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Grid.css';
import React from 'react';
import { classnames } from '@bem-react/classnames';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
import { GRID_DEFAULT_COLS, GRID_DEFAULT_GAP, GRID_DEFAULT_TAG, } from './constants';
import { useGenerateGridModsCn } from './useGrid';
export var gridColsVariant = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
export var gridGapVariant = [
'0',
'xs',
's',
'm',
'l',
'xl',
'2xl',
'3xl',
'4xl',
'5xl',
'6xl',
'7xl',
'8xl',
];
export var gridAlignVariant = ['start', 'end', 'center'];
export var gridJustifyVariant = ['start', 'end', 'center'];
export var cnGrid = cn('Grid');
export var Grid = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'Grid',
});
var _a = props.cols, cols = _a === void 0 ? GRID_DEFAULT_COLS : _a, _b = props.gap, gap = _b === void 0 ? GRID_DEFAULT_GAP : _b, _c = props.as, Tag = _c === void 0 ? GRID_DEFAULT_TAG : _c, colGap = props.colGap, rowGap = props.rowGap, align = props.align, justify = props.justify, children = props.children, className = props.className, other = __rest(props, ["cols", "gap", "as", "colGap", "rowGap", "align", "justify", "children", "className"]);
return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, {
cols: cols,
gap: gap,
colGap: colGap,
rowGap: rowGap,
align: align,
justify: justify,
}), className) }, other, { ref: ref }), children));
});
Grid.displayName = 'Grid';