Layout Components

/**
 * Top application bar component for navigation and branding
 * @param props - App bar props
 * @returns App bar React component
 */
function AppBar(props: AppBarProps): JSX.Element;

interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {
  color?: 'inherit' | 'primary' | 'secondary' | 'default';
  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
}

type AppBarClassKey = 'root' | 'positionFixed' | 'positionAbsolute' | 'positionSticky' | 'positionStatic' | 'positionRelative' | 'colorDefault' | 'colorPrimary' | 'colorSecondary';

import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
import { Menu as MenuIcon } from '@material-ui/icons';

<AppBar position="static" color="primary">
  <Toolbar>
    <IconButton edge="start" color="inherit">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6">
      My Application
    </Typography>
  </Toolbar>
</AppBar>

/**
 * Responsive grid layout system based on CSS Flexbox
 * @param props - Grid props
 * @returns Grid React component
 */
function Grid(props: GridProps): JSX.Element;

interface GridProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, GridClassKey> {
  alignContent?: GridContentAlignment;
  alignItems?: GridItemsAlignment;
  container?: boolean;
  direction?: GridDirection;
  item?: boolean;
  justify?: GridJustification;
  lg?: boolean | GridSize;
  md?: boolean | GridSize;
  sm?: boolean | GridSize;
  spacing?: GridSpacing;
  wrap?: GridWrap;
  xl?: boolean | GridSize;
  xs?: boolean | GridSize;
  zeroMinWidth?: boolean;
}

type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
type GridItemsAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
type GridContentAlignment = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
type GridJustification = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';

import { Grid, Paper } from '@material-ui/core';

// Responsive grid layout
<Grid container spacing={3}>
  <Grid item xs={12} sm={6} md={4}>
    <Paper>Item 1</Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4}>
    <Paper>Item 2</Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4}>
    <Paper>Item 3</Paper>
  </Grid>
</Grid>

// Centered layout
<Grid container justify="center" alignItems="center" style={{ minHeight: '100vh' }}>
  <Grid item xs={12} sm={8} md={6}>
    <Paper>Centered content</Paper>
  </Grid>
</Grid>

/**
 * Material Design surface component with elevation
 * @param props - Paper props
 * @returns Paper React component
 */
function Paper(props: PaperProps): JSX.Element;

interface PaperProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, PaperClassKey> {
  component?: React.ElementType;
  elevation?: number;
  square?: boolean;
}

type PaperClassKey = 'root' | 'rounded' | 'elevation0' | 'elevation1' | 'elevation2' | 'elevation3' | 'elevation4' | 'elevation5' | 'elevation6' | 'elevation7' | 'elevation8' | 'elevation9' | 'elevation10' | 'elevation11' | 'elevation12' | 'elevation13' | 'elevation14' | 'elevation15' | 'elevation16' | 'elevation17' | 'elevation18' | 'elevation19' | 'elevation20' | 'elevation21' | 'elevation22' | 'elevation23' | 'elevation24';

/**
 * Container component for app bar content and actions
 * @param props - Toolbar props
 * @returns Toolbar React component
 */
function Toolbar(props: ToolbarProps): JSX.Element;

interface ToolbarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ToolbarClassKey> {
  disableGutters?: boolean;
  variant?: 'regular' | 'dense';
}

type ToolbarClassKey = 'root' | 'gutters' | 'regular' | 'dense';

/**
 * Component for displaying collections of images in a tiled grid layout
 * @param props - Grid list props
 * @returns Grid list React component
 */
function GridList(props: GridListProps): JSX.Element;

interface GridListProps extends StandardProps<React.HTMLAttributes<HTMLUListElement>, GridListClassKey> {
  cellHeight?: number | 'auto';
  cols?: number;
  component?: React.ElementType;
  spacing?: number;
}

type GridListClassKey = 'root';

/**
 * Individual tile within a grid list
 * @param props - Grid list tile props
 * @returns Grid list tile React component
 */
function GridListTile(props: GridListTileProps): JSX.Element;

interface GridListTileProps extends StandardProps<React.HTMLAttributes<HTMLLIElement>, GridListTileClassKey> {
  cols?: number;
  component?: React.ElementType;
  rows?: number;
}

type GridListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth';

/**
 * Bar component for displaying metadata over grid list tiles
 * @param props - Grid list tile bar props
 * @returns Grid list tile bar React component
 */
function GridListTileBar(props: GridListTileBarProps): JSX.Element;

interface GridListTileBarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, GridListTileBarClassKey> {
  actionIcon?: React.ReactNode;
  actionPosition?: 'left' | 'right';
  subtitle?: React.ReactNode;
  title?: React.ReactNode;
  titlePosition?: 'top' | 'bottom';
}

type GridListTileBarClassKey = 'root' | 'titlePositionBottom' | 'titlePositionTop' | 'rootSubtitle' | 'titleWrap' | 'titleWrapActionPosLeft' | 'titleWrapActionPosRight' | 'title' | 'subtitle' | 'actionIcon' | 'actionIconActionPosLeft';

/**
 * Responsive utility component for hiding content at specific breakpoints
 * @param props - Hidden props
 * @returns Hidden React component or null
 */
function Hidden(props: HiddenProps): JSX.Element | null;

interface HiddenProps {
  children: React.ReactNode;
  implementation?: 'js' | 'css';
  initialWidth?: Breakpoint;
  lgDown?: boolean;
  lgUp?: boolean;
  mdDown?: boolean;
  mdUp?: boolean;
  only?: Breakpoint | Breakpoint[];
  smDown?: boolean;
  smUp?: boolean;
  xlDown?: boolean;
  xlUp?: boolean;
  xsDown?: boolean;
  xsUp?: boolean;
}

import { Hidden, Typography } from '@material-ui/core';

// Hide on mobile screens
<Hidden xsDown>
  <Typography>This content is hidden on mobile</Typography>
</Hidden>

// Show only on desktop
<Hidden mdDown>
  <Typography>Desktop only content</Typography>
</Hidden>

// Hide on specific breakpoint
<Hidden only={['sm', 'md']}>
  <Typography>Hidden on small and medium screens</Typography>
</Hidden>

/**
 * Navigation drawer component for side navigation
 * @param props - Drawer props
 * @returns Drawer React component
 */
function Drawer(props: DrawerProps): JSX.Element;

interface DrawerProps extends StandardProps<ModalProps, DrawerClassKey> {
  anchor?: 'left' | 'top' | 'right' | 'bottom';
  children?: React.ReactNode;
  elevation?: number;
  ModalProps?: Partial<ModalProps>;
  onClose?: (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => void;
  open?: boolean;
  PaperProps?: Partial<PaperProps>;
  SlideProps?: Partial<SlideProps>;
  transitionDuration?: TransitionProps['timeout'];
  variant?: 'permanent' | 'persistent' | 'temporary';
}

type DrawerClassKey = 'root' | 'docked' | 'paper' | 'paperAnchorLeft' | 'paperAnchorRight' | 'paperAnchorTop' | 'paperAnchorBottom' | 'paperAnchorDockedLeft' | 'paperAnchorDockedTop' | 'paperAnchorDockedRight' | 'paperAnchorDockedBottom' | 'modal';

/**
 * Enhanced drawer with swipe gesture support for mobile devices
 * @param props - Swipeable drawer props
 * @returns Swipeable drawer React component
 */
function SwipeableDrawer(props: SwipeableDrawerProps): JSX.Element;

interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {
  disableBackdropTransition?: boolean;
  disableDiscovery?: boolean;
  disableSwipeToOpen?: boolean;
  hysteresis?: number;
  minFlingVelocity?: number;
  onClose: (event: React.SyntheticEvent<{}>) => void;
  onOpen: (event: React.SyntheticEvent<{}>) => void;
  open: boolean;
  SwipeAreaProps?: object;
  swipeAreaWidth?: number;
}