tessl/npm-mui--system

MUI System is a set of CSS utilities to help you build custom designs more efficiently with composable style functions, responsive design utilities, and theme-aware styling.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Layout Components

Name: tessl/npm-mui--system
Author: tessl

Core React components for building layouts with system props support, responsive design capabilities, and theme integration. These components serve as the foundation for MUI System's layout system.

Capabilities

Box Component

Universal container component that accepts all system props and serves as the building block for other components.

/**
 * Universal container component with all system props support
 * @param props - Box props including system props and sx
 * @returns Styled div element (or custom component)
 */
declare const Box: OverridableComponent<BoxTypeMap>;

interface BoxProps<
  RootComponent extends React.ElementType = 'div',
  AdditionalProps = {}
> {
  /** Child components */
  children?: React.ReactNode;
  
  /** Element type to render (default: 'div') */
  component?: React.ElementType;
  
  /** Advanced styling with theme access and responsive values */
  sx?: SxProps<Theme>;
  
  /** All system props (spacing, colors, typography, etc.) */
  [key: string]: any;
}

interface BoxTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div',
  Theme extends object = Theme
> {
  props: AdditionalProps & BoxOwnProps<Theme>;
  defaultComponent: RootComponent;
}

interface BoxOwnProps<Theme extends object = Theme> extends SystemProps<Theme> {
  children?: React.ReactNode;
  ref?: React.Ref<unknown>;
  sx?: SxProps<Theme>;
}

// CSS classes for Box component
const boxClasses: {
  root: string;
};

Usage Examples:

import { Box } from "@mui/system";

// Basic usage with system props
<Box p={2} m={1} bgcolor="primary.main" color="white">
  Content
</Box>

// Responsive values
<Box
  width={{ xs: '100%', sm: '50%', md: '25%' }}
  p={{ xs: 1, sm: 2, md: 3 }}
>
  Responsive box
</Box>

// Using sx prop for advanced styling
<Box
  sx={{
    width: 300,
    '&:hover': {
      backgroundColor: 'grey.100',
      transform: 'scale(1.05)',
    },
    '@media (max-width: 600px)': {
      width: '100%',
    },
  }}
>
  Advanced styling
</Box>

// Custom component
<Box component="section" p={2}>
  Renders as section element
</Box>

Container Component

Responsive container component that centers content and applies max-width constraints based on breakpoints.

/**
 * Responsive container component with max-width constraints
 * @param props - Container props
 * @returns Centered container element
 */
declare const Container: OverridableComponent<ContainerTypeMap>;

interface ContainerProps<
  RootComponent extends React.ElementType = 'div',
  AdditionalProps = {}
> {
  /** Child components */
  children?: React.ReactNode;
  
  /** Maximum width constraint */
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
  
  /** Whether to use fixed max-width instead of responsive */
  fixed?: boolean;
  
  /** Remove horizontal padding */
  disableGutters?: boolean;
  
  /** CSS classes override */
  classes?: Partial<ContainerClasses>;
  
  /** Advanced styling */
  sx?: SxProps<Theme>;
  
  /** Element type to render */
  component?: React.ElementType;
}

interface ContainerTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div'
> {
  props: AdditionalProps & ContainerProps;
  defaultComponent: RootComponent;
}

// CSS classes for Container component
const containerClasses: {
  root: string;
  disableGutters: string;
  fixed: string;
  maxWidthXs: string;
  maxWidthSm: string;
  maxWidthMd: string;
  maxWidthLg: string;
  maxWidthXl: string;
};

/**
 * Factory function for creating custom container components
 * @param options - Container creation options
 * @returns Custom container component
 */
function createContainer<Theme extends object = Theme>(
  options?: CreateContainerOptions<Theme>
): React.ComponentType<ContainerProps>;

interface CreateContainerOptions<Theme> {
  createStyledComponent?: CreateStyledComponent<Theme>;
  useThemeProps?: (props: any) => any;
  componentName?: string;
}

Usage Examples:

import { Container } from "@mui/system";

// Basic container
<Container>
  <p>This content is centered and has max-width constraints</p>
</Container>

// Fixed max-width
<Container maxWidth="md">
  <p>Fixed to medium breakpoint width</p>
</Container>

// Full width container
<Container maxWidth={false}>
  <p>No max-width constraint</p>
</Container>

// No gutters
<Container disableGutters>
  <p>No horizontal padding</p>
</Container>

Grid Component

Modern CSS Grid layout system with responsive capabilities and flexible configuration options.

/**
 * CSS Grid layout component with responsive capabilities
 * @param props - Grid props
 * @returns Grid container or item element
 */
declare const Grid: React.ComponentType<GridProps>;

interface GridProps<
  RootComponent extends React.ElementType = 'div',
  AdditionalProps = {}
> extends SystemProps<Theme> {
  /** Child components */
  children?: React.ReactNode;
  
  /** Whether this is a grid container */
  container?: boolean;
  
  /** Grid item size (1-12 or auto/grow) */
  size?: ResponsiveStyleValue<GridSize>;
  
  /** Grid item offset */
  offset?: ResponsiveStyleValue<GridOffset>;
  
  /** Grid container spacing (applies to both column and row spacing) */
  spacing?: ResponsiveStyleValue<GridSpacing>;
  
  /** Grid container horizontal spacing (overrides spacing) */
  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
  
  /** Grid container vertical spacing (overrides spacing) */
  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
  
  /** Grid container columns (default: 12) */
  columns?: ResponsiveStyleValue<number>;
  
  /** Grid container direction (default: 'row') */
  direction?: ResponsiveStyleValue<GridDirection>;
  
  /** Grid container wrapping (default: 'wrap') */
  wrap?: GridWrap;
  
  /** Internal nesting level (starts at 0, increases with nested containers) */
  unstable_level?: number;
  
  /** CSS classes override */
  classes?: Partial<GridClasses>;
  
  /** Advanced styling */
  sx?: SxProps<Theme>;
  
  /** Element type to render */
  component?: React.ElementType;
}

// Grid type definitions
type GridSize = 'auto' | 'grow' | number | false;
type GridOffset = 'auto' | number;
type GridSpacing = number | string;
type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';

// CSS classes for Grid component
const gridClasses: {
  root: string;
  container: string;
  item: string;
  zeroMinWidth: string;
  [key: string]: string;
};

/**
 * Factory function for creating custom grid components
 * @param options - Grid creation options
 * @returns Custom grid component
 */
function createGrid<Theme extends object = Theme>(
  options?: CreateGridOptions<Theme>
): React.ComponentType<GridProps>;

interface CreateGridOptions<Theme> {
  createStyledComponent?: CreateStyledComponent<Theme>;
  useThemeProps?: (props: any) => any;
  componentName?: string;
}

Usage Examples:

import { Grid } from "@mui/system";

// Grid container with spacing
<Grid container spacing={2}>
  <Grid size={6}>
    <p>Half width item</p>
  </Grid>
  <Grid size={6}>
    <p>Half width item</p>
  </Grid>
</Grid>

// Responsive grid sizes
<Grid container spacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid size={{ xs: 12, sm: 6, md: 4 }}>
    <p>Responsive item</p>
  </Grid>
  <Grid size={{ xs: 12, sm: 6, md: 8 }}>
    <p>Responsive item</p>
  </Grid>
</Grid>

// Grid with offset
<Grid container>
  <Grid size={4} offset={2}>
    <p>Offset item</p>
  </Grid>
</Grid>

// Auto-sizing and grow
<Grid container>
  <Grid size="auto">
    <p>Auto width</p>
  </Grid>
  <Grid size="grow">
    <p>Takes remaining space</p>
  </Grid>
</Grid>

Stack Component

One-dimensional layout component for arranging items in a single direction with consistent spacing.

/**
 * One-dimensional layout component with spacing
 * @param props - Stack props
 * @returns Flexbox container element
 */
declare const Stack: React.ComponentType<StackProps>;

interface StackProps<
  RootComponent extends React.ElementType = 'div',
  AdditionalProps = {}
> {
  /** Child components */
  children?: React.ReactNode;
  
  /** Layout direction */
  direction?: StackDirection | ResponsiveStyleValue<StackDirection>;
  
  /** Spacing between items */
  spacing?: number | string | ResponsiveStyleValue<number | string>;
  
  /** Divider element between items */
  divider?: React.ReactNode;
  
  /** Use CSS gap instead of margin for spacing */
  useFlexGap?: boolean;
  
  /** CSS classes override */
  classes?: Partial<StackClasses>;
  
  /** Advanced styling */
  sx?: SxProps<Theme>;
  
  /** Element type to render */
  component?: React.ElementType;
}

type StackDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';

// CSS classes for Stack component
const stackClasses: {
  root: string;
};

/**
 * Factory function for creating custom stack components
 * @param options - Stack creation options
 * @returns Custom stack component
 */
function createStack<Theme extends object = Theme>(
  options?: CreateStackOptions<Theme>
): React.ComponentType<StackProps>;

interface CreateStackOptions<Theme> {
  createStyledComponent?: CreateStyledComponent<Theme>;
  useThemeProps?: (props: any) => any;
  componentName?: string;
}

Usage Examples:

import { Stack, Divider } from "@mui/system";

// Vertical stack with spacing
<Stack spacing={2}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

// Horizontal stack
<Stack direction="row" spacing={1}>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</Stack>

// Stack with dividers
<Stack spacing={1} divider={<Divider />}>
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</Stack>

// Responsive direction and spacing
<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={{ xs: 1, sm: 2, md: 4 }}
>
  <div>Responsive item 1</div>
  <div>Responsive item 2</div>
</Stack>

// Using flexbox gap
<Stack direction="row" spacing={2} useFlexGap>
  <div>Gap item 1</div>
  <div>Gap item 2</div>
</Stack>

Component Integration

All layout components integrate seamlessly with:

System Props: All CSS properties available as props with theme integration
sx Prop: Advanced styling with pseudo-selectors, media queries, and theme access
Theme Provider: Automatic theme context access for consistent styling
Responsive Values: Object syntax for breakpoint-specific values
TypeScript: Full type safety with generic component types and prop interfaces

The components also support component composition and can be used as building blocks for more complex layout patterns.