Container

# Brok UI: Container (`container`)

A centered content-width primitive with semantic max-width and density-aware gutter tiers.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add container
```

## Usage

```blade
<x-ui.container size="sm" class="rounded-lg border border-border bg-card py-6 text-center text-card-foreground">
    {{ __('Bounded, centered content') }}
</x-ui.container>
```

## Props

- `size` (sm|md|lg|xl|full, default `lg`) — Max-width tier, equivalent to Tailwind's own scale: `sm` 42rem (`max-w-2xl`), `md` 56rem (`max-w-4xl`), `lg` 72rem (`max-w-6xl`) — the dominant block container width (`mx-auto max-w-6xl px-4`, 90 files), `xl` 80rem (`max-w-7xl`), `full` unbounded.
- `gutter` (none|sm|md|lg, default `md`) — Responsive side padding tier.
- `centered` (boolean, default `true`) — Applies `mx-auto` to centre the container.
- `as` (div|section|main|nav|aside|header|footer, default `div`) — Rendered element tag.

## Use when

- Use to structure hierarchy, spacing, and responsiveness so content is easier to scan and navigate.
- Bounding a block or page's content to a readable, centred width.
- Wrapping a section's contents in a fixed max-width column with responsive side gutters.

## Avoid when

- Do not let layout primitives substitute for semantics, headings, or interaction rules users still need.
- The region should bleed full-width; render the children directly instead.

## Anti-patterns

- Using visual layout as a substitute for semantic structure

## Rules

- Use the `<brok:container>` tag (or `<x-ui.container>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/container
- Registry JSON (files, props, contract): https://brokui.dev/r/open/container.json

@props([
    'size' => 'lg',
    'gutter' => 'md',
    'centered' => true,
    'as' => 'div',
])

@php
    $allowedTags = ['div', 'section', 'main', 'nav', 'aside', 'header', 'footer'];
    $tag = in_array($as, $allowedTags, true) ? $as : 'div';
    $sizes = [
        'sm' => 'max-w-content-sm',
        'md' => 'max-w-content-md',
        'lg' => 'max-w-content-lg',
        'xl' => 'max-w-content-xl',
        'full' => 'max-w-none',
    ];
    $gutters = [
        'none' => '',
        'sm' => 'px-gutter-sm',
        'md' => 'px-gutter-md',
        'lg' => 'px-gutter-lg',
    ];
    $sizeKey = array_key_exists($size, $sizes) ? $size : 'lg';
    $gutterKey = array_key_exists($gutter, $gutters) ? $gutter : 'md';
    // A block that composes this container may pass its own data-slot;
    // the browser keeps only the first of two identical attributes, so read
    // the override and print exactly one.
    $slotName = (string) ($attributes->get('data-slot') ?: 'container');
@endphp

<{{ $tag }}
    data-slot="{{ $slotName }}"
    data-size="{{ $sizeKey }}"
    {{ $attributes->except('data-slot')->merge(['class' => trim('w-full min-w-0 '.$sizes[$sizeKey].' '.$gutters[$gutterKey].' '.($centered ? 'mx-auto' : ''))]) }}
>{{ $slot }}</{{ $tag }}>