@fidely-ui/react
Version:
Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps
24 lines (23 loc) • 729 B
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { styled } from '@fidely-ui/styled-system/jsx';
import { grid } from '@fidely-ui/styled-system/patterns';
import { splitProps } from '../../utils/split-props';
/**
* Grid component
*
* Provides a flexible box layout system using Panda's grid pattern.
*/
export const Grid = forwardRef(function Grid(props, ref) {
const [patternProps, restProps] = splitProps(props, [
'minChildWidth',
'rowGap',
'columnGap',
'columns',
'gap',
]);
const styles = grid.raw(patternProps);
return _jsx(styled.div, { ref: ref, ...styles, ...restProps });
});
Grid.displayName = 'Grid';