mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-05-05 19:19:35 +00:00
git
d23f4a8be4
FakeMUI Components (MUI API compatibility): - Add sx prop support to all components via sxToStyle utility - Add MUI-style variants to Button (contained, outlined) - Add component prop to Typography for polymorphic rendering - Add label prop to Chip (MUI uses label vs children) - Add edge/color/size props to IconButton - Add component prop to List for nav rendering - Add href support to ListItemButton - Add variant prop to Avatar - Add PaperProps to Drawer New @metabuilder/components package: - vanilla/loading - LoadingIndicator, InlineLoader, AsyncLoading - vanilla/error - ErrorBoundary, ErrorDisplay, withErrorBoundary - vanilla/empty-state - EmptyState + 7 specialized variants - vanilla/skeleton - Skeleton + 6 specialized variants - Organized by framework: vanilla/, radix/, fakemui/ Hooks consolidation (FakeMUI → root hooks/): - useAccessible (5 accessibility hooks) - useToast with ToastProvider - FakeMUI re-exports from hooks for backward compatibility WorkflowUI fixes: - Fix showNotification → useUI error/success methods - Fix Redux reducer setTimeout (Immer proxy issue) - Fix useRef type error - Update to Next.js 16.1.6 with webpack mode - Add @metabuilder/fakemui dependency Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
import { sxToStyle } from '../utils/sx'
|
|
|
|
export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children?: React.ReactNode
|
|
container?: boolean
|
|
item?: boolean
|
|
xs?: number | boolean
|
|
sm?: number | boolean
|
|
md?: number | boolean
|
|
lg?: number | boolean
|
|
xl?: number | boolean
|
|
spacing?: string | number
|
|
direction?: 'row' | 'column'
|
|
alignItems?: 'start' | 'center' | 'end' | 'stretch'
|
|
justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
|
|
sx?: Record<string, unknown>
|
|
}
|
|
|
|
export const Grid: React.FC<GridProps> = ({
|
|
children,
|
|
container,
|
|
item,
|
|
xs,
|
|
sm,
|
|
md,
|
|
lg,
|
|
xl,
|
|
spacing,
|
|
direction,
|
|
alignItems,
|
|
justifyContent,
|
|
className = '',
|
|
sx,
|
|
style,
|
|
...props
|
|
}) => (
|
|
<div
|
|
className={`${container ? 'grid-container' : ''} ${item ? 'grid-item' : ''} ${spacing ? `gap-${spacing}` : ''} ${direction ? `flex-${direction}` : ''} ${alignItems ? `items-${alignItems}` : ''} ${justifyContent ? `justify-${justifyContent}` : ''} ${xs ? `col-${xs === true ? 12 : xs}` : ''} ${sm ? `col-sm-${sm === true ? 12 : sm}` : ''} ${md ? `col-md-${md === true ? 12 : md}` : ''} ${lg ? `col-lg-${lg === true ? 12 : lg}` : ''} ${className}`}
|
|
style={{ ...sxToStyle(sx), ...style }}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|