Layout Components

/**
 * CSS Grid layout component with responsive design capabilities
 * @param props - Grid component props
 */
function Grid(props: GridProps): JSX.Element;

interface GridProps extends BoxProps, StylesApiProps<GridFactory> {
  /** Gutter between columns, key of theme.spacing or any valid CSS value */
  gutter?: StyleProp<MantineSpacing>;
  /** If set, columns in the last row expand to fill all available space */
  grow?: boolean;
  /** Sets justify-content CSS property */
  justify?: React.CSSProperties['justifyContent'];
  /** Sets align-items CSS property */
  align?: React.CSSProperties['alignItems'];
  /** Number of columns in each row */
  columns?: number;
  /** Sets overflow CSS property on the root element */
  overflow?: React.CSSProperties['overflow'];
  /** Type of queries used for responsive styles */
  type?: 'media' | 'container';
  /** Breakpoints values, only used with type="container" */
  breakpoints?: GridBreakpoints;
  children?: React.ReactNode;
}

/**
 * Grid column component
 * @param props - GridCol component props
 */
function GridCol(props: GridColProps): JSX.Element;

interface GridColProps extends BoxProps {
  /** Column span - number of columns the item should occupy */
  span?: number | 'auto' | { base?: number | 'auto'; xs?: number | 'auto'; sm?: number | 'auto'; md?: number | 'auto'; lg?: number | 'auto'; xl?: number | 'auto'; };
  /** Column offset - number of columns to offset the item by */
  offset?: number | { base?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; };
  /** Column order */
  order?: number | { base?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; };
  children?: React.ReactNode;
}

// Compound components
Grid.Col = GridCol;

type GridStylesNames = 'root' | 'col' | 'inner' | 'container';
type GridCssVariables = {
  root: '--grid-justify' | '--grid-align' | '--grid-overflow';
};

import { Grid } from "@mantine/core";

// Basic grid
<Grid>
  <Grid.Col span={4}>Column 1</Grid.Col>
  <Grid.Col span={4}>Column 2</Grid.Col>
  <Grid.Col span={4}>Column 3</Grid.Col>
</Grid>

// Custom gutter and columns
<Grid gutter="xl" columns={24}>
  <Grid.Col span={8}>1/3 width</Grid.Col>
  <Grid.Col span={16}>2/3 width</Grid.Col>
</Grid>

// Responsive grid
<Grid>
  <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
    Responsive column
  </Grid.Col>
  <Grid.Col span={{ base: 12, md: 6, lg: 9 }}>
    Responsive column
  </Grid.Col>
</Grid>

// Grid with grow and alignment
<Grid grow gutter="md" justify="center" align="flex-end">
  <Grid.Col span={4}>Short content</Grid.Col>
  <Grid.Col span={4}>
    Very long content that makes the column taller
  </Grid.Col>
  <Grid.Col span={4}>Medium content</Grid.Col>
</Grid>

// Grid with offset and order
<Grid>
  <Grid.Col span={6} offset={3}>
    Centered column
  </Grid.Col>
  <Grid.Col span={4} order={{ base: 2, md: 1 }}>
    Second on mobile, first on desktop
  </Grid.Col>
  <Grid.Col span={4} order={{ base: 1, md: 2 }}>
    First on mobile, second on desktop
  </Grid.Col>
</Grid>

// Container queries
<Grid type="container" breakpoints={{ xs: '400px', sm: '600px', md: '800px' }}>
  <Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
    Container query responsive
  </Grid.Col>
</Grid>

/**
 * Flexbox layout component with comprehensive flex properties
 * @param props - Flex component props
 */
function Flex<C = 'div'>(props: FlexProps<C>): JSX.Element;

interface FlexProps<C = 'div'> extends BoxProps<C>, StylesApiProps<FlexFactory> {
  /** CSS gap property */
  gap?: StyleProp<MantineSpacing>;
  /** CSS row-gap property */
  rowGap?: StyleProp<MantineSpacing>;
  /** CSS column-gap property */
  columnGap?: StyleProp<MantineSpacing>;
  /** CSS align-items property */
  align?: StyleProp<React.CSSProperties['alignItems']>;
  /** CSS justify-content property */
  justify?: StyleProp<React.CSSProperties['justifyContent']>;
  /** CSS flex-wrap property */
  wrap?: StyleProp<React.CSSProperties['flexWrap']>;
  /** CSS flex-direction property */
  direction?: StyleProp<React.CSSProperties['flexDirection']>;
  children?: React.ReactNode;
}

type FlexStylesNames = 'root';

import { Flex, Box } from "@mantine/core";

// Basic flex layout
<Flex gap="md" justify="center" align="center" direction="row" wrap="wrap">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>

// Responsive flex properties
<Flex
  gap={{ base: 'sm', md: 'lg' }}
  direction={{ base: 'column', md: 'row' }}
  justify={{ base: 'center', md: 'space-between' }}
>
  <Box>Responsive item 1</Box>
  <Box>Responsive item 2</Box>
</Flex>

// Flex as different component
<Flex<'section'> component="section" direction="column" gap="xl">
  <Box>Section content</Box>
</Flex>

/**
 * Vertical stack layout component for arranging elements in a column
 * @param props - Stack component props
 */
function Stack(props: StackProps): JSX.Element;

interface StackProps extends BoxProps, StylesApiProps<StackFactory> {
  /** Spacing between children, key of theme.spacing or any valid CSS value */
  gap?: StyleProp<MantineSpacing>;
  /** CSS justify-content property */
  justify?: StyleProp<React.CSSProperties['justifyContent']>;
  /** CSS align-items property */
  align?: StyleProp<React.CSSProperties['alignItems']>;
  children?: React.ReactNode;
}

type StackStylesNames = 'root';
type StackCssVariables = {
  root: '--stack-gap' | '--stack-align' | '--stack-justify';
};

import { Stack, Button, Text } from "@mantine/core";

// Basic stack
<Stack gap="md">
  <Text>First item</Text>
  <Text>Second item</Text>
  <Button>Third item</Button>
</Stack>

// Stack with alignment
<Stack gap="lg" align="center" justify="space-between" h={300}>
  <Text>Top item</Text>
  <Text>Middle item</Text>
  <Text>Bottom item</Text>
</Stack>

// Responsive stack
<Stack gap={{ base: 'xs', md: 'md' }} align={{ base: 'stretch', md: 'center' }}>
  <Text>Responsive item 1</Text>
  <Text>Responsive item 2</Text>
</Stack>

/**
 * Horizontal group layout component for arranging elements in a row
 * @param props - Group component props  
 */
function Group(props: GroupProps): JSX.Element;

interface GroupProps extends BoxProps, StylesApiProps<GroupFactory> {
  /** Spacing between children, key of theme.spacing or any valid CSS value */
  gap?: StyleProp<MantineSpacing>;
  /** CSS justify-content property */
  justify?: StyleProp<React.CSSProperties['justifyContent']>;
  /** CSS align-items property */
  align?: StyleProp<React.CSSProperties['alignItems']>;
  /** CSS flex-wrap property */
  wrap?: StyleProp<React.CSSProperties['flexWrap']>;
  /** Determines whether children should be prevented from shrinking */
  preventGrowOverflow?: boolean;
  /** Determines whether children should have flex-grow: 1 */
  grow?: boolean;
  children?: React.ReactNode;
}

type GroupStylesNames = 'root';
type GroupCssVariables = {
  root: '--group-gap' | '--group-align' | '--group-justify' | '--group-wrap';
};

import { Group, Button } from "@mantine/core";

// Basic horizontal group
<Group gap="md">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</Group>

// Group with alignment and wrapping
<Group gap="sm" justify="center" wrap="wrap">
  <Button>Item 1</Button>
  <Button>Item 2</Button>
  <Button>Item 3</Button>
  <Button>Item 4</Button>
</Group>

// Group with grow
<Group gap="md" grow>
  <Button>Equal width 1</Button>
  <Button>Equal width 2</Button>
</Group>

/**
 * Centered container with max-width constraints
 * @param props - Container component props
 */
function Container(props: ContainerProps): JSX.Element;

interface ContainerProps extends BoxProps, StylesApiProps<ContainerFactory> {
  /** Maximum width of the container, key of theme.breakpoints or any valid CSS value */
  size?: MantineSize | number | string;
  /** Determines whether the container should have fluid width */
  fluid?: boolean;
  children?: React.ReactNode;
}

type ContainerStylesNames = 'root';
type ContainerCssVariables = {
  root: '--container-size';
};

import { Container, Text } from "@mantine/core";

// Basic container
<Container>
  <Text>Centered content with max-width</Text>
</Container>

// Custom size container
<Container size="xs">
  <Text>Small container</Text>
</Container>

// Fluid container
<Container fluid>
  <Text>Full width container</Text>
</Container>

// Container with custom size
<Container size={600}>
  <Text>Container with 600px max-width</Text>
</Container>

/**
 * Simple responsive grid layout with automatic column sizing
 * @param props - SimpleGrid component props
 */
function SimpleGrid(props: SimpleGridProps): JSX.Element;

interface SimpleGridProps extends BoxProps, StylesApiProps<SimpleGridFactory> {
  /** Number of columns for different screen sizes */
  cols?: number | { base?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; };
  /** Spacing between grid items, key of theme.spacing or any valid CSS value */
  spacing?: StyleProp<MantineSpacing>;
  /** Minimum column width, if set, cols will be ignored */
  minColWidth?: number | string;
  children?: React.ReactNode;
}

type SimpleGridStylesNames = 'root';

import { SimpleGrid, Box } from "@mantine/core";

// Basic simple grid
<SimpleGrid cols={3} spacing="lg">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
  <Box>Item 4</Box>
  <Box>Item 5</Box>
  <Box>Item 6</Box>
</SimpleGrid>

// Responsive simple grid
<SimpleGrid 
  cols={{ base: 1, sm: 2, lg: 3 }} 
  spacing={{ base: 'md', md: 'xl' }}
>
  <Box>Responsive item 1</Box>
  <Box>Responsive item 2</Box>
  <Box>Responsive item 3</Box>
</SimpleGrid>

// Simple grid with minimum column width
<SimpleGrid minColWidth={250} spacing="md">
  <Box>Auto-sizing item 1</Box>
  <Box>Auto-sizing item 2</Box>
  <Box>Auto-sizing item 3</Box>
</SimpleGrid>

/**
 * Centers content both horizontally and vertically
 * @param props - Center component props
 */
function Center<C = 'div'>(props: CenterProps<C>): JSX.Element;

interface CenterProps<C = 'div'> extends BoxProps<C>, StylesApiProps<CenterFactory> {
  /** Determines whether content should be centered inline (using CSS text-align) */
  inline?: boolean;
  children?: React.ReactNode;
}

type CenterStylesNames = 'root';

import { Center, Box } from "@mantine/core";

// Basic center
<Center h={200}>
  <Box>Centered content</Box>
</Center>

// Inline center
<Center inline>
  <Box>Inline centered content</Box>
</Center>

// Center as different component
<Center<'section'> component="section" h="100vh">
  <Box>Full height centered</Box>
</Center>

/**
 * Adds spacing between elements without using margin or padding
 * @param props - Space component props
 */
function Space(props: SpaceProps): JSX.Element;

interface SpaceProps extends BoxProps, StylesApiProps<SpaceFactory> {
  /** Width of horizontal space, key of theme.spacing or any valid CSS value */
  w?: StyleProp<MantineSpacing>;
  /** Height of vertical space, key of theme.spacing or any valid CSS value */
  h?: StyleProp<MantineSpacing>;
}

import { Space, Text } from "@mantine/core";

// Horizontal spacing
<div>
  <Text component="span">Text 1</Text>
  <Space w="md" />
  <Text component="span">Text 2</Text>
</div>

// Vertical spacing
<div>
  <Text>Line 1</Text>
  <Space h="xl" />
  <Text>Line 2</Text>
</div>

// Responsive spacing
<div>
  <Text>Content</Text>
  <Space h={{ base: 'md', md: 'xl' }} />
  <Text>More content</Text>
</div>

/**
 * Complete application shell layout component
 * @param props - AppShell component props
 */
function AppShell(props: AppShellProps): JSX.Element;

interface AppShellProps extends BoxProps, StylesApiProps<AppShellFactory> {
  /** Header configuration */
  header?: AppShellHeaderConfiguration;
  /** Navbar configuration */
  navbar?: AppShellNavbarConfiguration;
  /** Aside configuration */
  aside?: AppShellAsideConfiguration;
  /** Footer configuration */
  footer?: AppShellFooterConfiguration;
  /** Determines whether associated elements should have fixed position */
  fixed?: boolean;
  /** AppShell content */
  children?: React.ReactNode;
}

interface AppShellHeaderConfiguration {
  height: AppShellResponsiveSize;
  collapsed?: boolean;
  offset?: boolean;
}

interface AppShellNavbarConfiguration {
  width: AppShellResponsiveSize;
  breakpoint?: MantineBreakpoint | number;
  collapsed?: { mobile?: boolean; desktop?: boolean };
}

interface AppShellAsideConfiguration {
  width: AppShellResponsiveSize;
  breakpoint?: MantineBreakpoint | number;
  collapsed?: { mobile?: boolean; desktop?: boolean };
}

interface AppShellFooterConfiguration {
  height: AppShellResponsiveSize;
  collapsed?: boolean;
  offset?: boolean;
}

type AppShellResponsiveSize = number | string | { base?: number | string; xs?: number | string; sm?: number | string; md?: number | string; lg?: number | string; xl?: number | string; };

/**
 * AppShell compound components
 */
function AppShellHeader(props: AppShellHeaderProps): JSX.Element;
function AppShellNavbar(props: AppShellNavbarProps): JSX.Element;
function AppShellAside(props: AppShellAsideProps): JSX.Element;
function AppShellFooter(props: AppShellFooterProps): JSX.Element;
function AppShellMain(props: AppShellMainProps): JSX.Element;
function AppShellSection(props: AppShellSectionProps): JSX.Element;

// Compound components
AppShell.Header = AppShellHeader;
AppShell.Navbar = AppShellNavbar;
AppShell.Aside = AppShellAside;
AppShell.Footer = AppShellFooter;
AppShell.Main = AppShellMain;
AppShell.Section = AppShellSection;

type AppShellStylesNames = 'root' | 'navbar' | 'header' | 'main' | 'aside' | 'footer';

import { AppShell, Burger, Group, Button } from "@mantine/core";
import { useState } from "react";

function Demo() {
  const [opened, setOpened] = useState(false);

  return (
    <AppShell
      header={{ height: 60 }}
      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}
      aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: false, mobile: true } }}
      footer={{ height: 60 }}
      padding="md"
    >
      <AppShell.Header>
        <Group h="100%" px="md">
          <Burger opened={opened} onClick={() => setOpened(!opened)} hiddenFrom="sm" size="sm" />
          <div>Logo</div>
        </Group>
      </AppShell.Header>

      <AppShell.Navbar p="md">
        Navbar content
      </AppShell.Navbar>

      <AppShell.Main>
        Main content
      </AppShell.Main>

      <AppShell.Aside p="md">
        Aside content
      </AppShell.Aside>

      <AppShell.Footer p="md">
        Footer content
      </AppShell.Footer>
    </AppShell>
  );
}

// Responsive AppShell with sections
<AppShell
  header={{ 
    height: { base: 60, md: 70, lg: 80 } 
  }}
  navbar={{ 
    width: { base: 200, md: 250, lg: 300 },
    breakpoint: 'sm',
    collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }
  }}
  aside={{
    width: { base: 200, md: 250 },
    breakpoint: 'md',
    collapsed: { desktop: false, mobile: true }
  }}
>
  <AppShell.Header>
    <Group justify="space-between" h="100%" px="md">
      <Burger />
      <Group>
        <Button>Login</Button>
      </Group>
    </Group>
  </AppShell.Header>

  <AppShell.Navbar>
    <AppShell.Section grow>
      <NavbarLinksGroup />
    </AppShell.Section>
    <AppShell.Section>
      <UserButton />
    </AppShell.Section>
  </AppShell.Navbar>

  <AppShell.Main>
    <Container size="xl">
      {children}
    </Container>
  </AppShell.Main>

  <AppShell.Aside>
    <Stack gap="md">
      <TableOfContents />
    </Stack>
  </AppShell.Aside>
</AppShell>