UNPKG

@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
'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';