# AuthLayout

> Screen for signing in: a brand, an illustration that reacts to the form and the form itself, laid out by the width of the layout.

Source: https://ui.jcsoftdev.com/docs/components/auth-layout

Screen for signing in: a brand, an illustration that reacts to the form and the form itself,
laid out by the width of the layout. It owns the sign-in state (controlled or not) and shares it
with `AuthIllustration` and `LoginForm`, so wiring them is just placing them inside.

Parts: `AuthLayout.Brand`, `AuthLayout.Art`, `AuthLayout.Panel` and `AuthLayout.Footer`.

## Import

```ts
import { AuthLayout } from "@jcsoftdev/ui/auth";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/auth/auth-layout`.

## Usage

```tsx
<AuthLayout layout="split" state="idle" progress={0} activeIndex={0}>
  <>
          <AuthLayout.Brand>EduModules</AuthLayout.Brand>
          <AuthLayout.Art />
          <AuthLayout.Panel>
            <PanelContent />
          </AuthLayout.Panel>
          <AuthLayout.Footer>Soporte: ayuda@edumodules.pe</AuthLayout.Footer>
        </>
</AuthLayout>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `layout` | `"split" \| "split-reverse" \| "centered"` | `"split"` | `split` puts the art beside the panel once the layout is 768px wide, `split-reverse` swaps the sides, `centered` centers the panel over a faded illustration. Narrower than that the art stacks above the panel, and under 448px it is dropped. All of it follows t… |
| `panel` | `"solid" \| "paper"` | `"paper"` | `paper` is the card over a tinted page. `solid` fills one side with a solid color for the art and leaves the form open on the other (no card). It applies to `split` and `split-reverse`; `centered` ignores it. A solid root sets `--auth-art-bg` and `--auth-art-… |
| `state` | `"error" \| "typing" \| "success" \| "idle" \| "password"` |  | What the screen is doing, for the illustration. Controlled; `LoginForm` keeps it current when left alone. |
| `defaultState` | `"error" \| "typing" \| "success" \| "idle" \| "password"` | `"idle"` |  |
| `onStateChange` | `((state: AuthState) => void)` |  |  |
| `progress` | `number` |  | Fill of the whole form, 0 to 1. |
| `defaultProgress` | `number` | `0` |  |
| `onProgressChange` | `((progress: number) => void)` |  |  |
| `activeIndex` | `number` |  | Index of the portal in use (0 to 2). |
| `defaultActiveIndex` | `number` | `0` |  |
| `onActiveIndexChange` | `((index: number) => void)` |  |  |
| `classNames` | `Partial<Record<AuthLayoutPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Split](/storybook/?path=/story/auth-authlayout--split)
- [Split Reverse](/storybook/?path=/story/auth-authlayout--split-reverse)
- [Centered](/storybook/?path=/story/auth-authlayout--centered)
- [Typing](/storybook/?path=/story/auth-authlayout--typing)
- [Error State](/storybook/?path=/story/auth-authlayout--error-state)
- [Success](/storybook/?path=/story/auth-authlayout--success)
- [Container Widths](/storybook/?path=/story/auth-authlayout--container-widths)
- [Custom Illustration](/storybook/?path=/story/auth-authlayout--custom-illustration)
- [Brand Follows Art](/storybook/?path=/story/auth-authlayout--brand-follows-art)

## Source

`packages/ui/src/auth/auth-layout/auth-layout.tsx`