# LoginScreen (demo)

A UI-only walk-through of the canonical Rahhal phone-OTP login: phone step → OTP step → success. Two layouts share the same form body — `centered` (default) is a focused single-card screen; `split` adds a brand-led marketing pane on the start edge at `lg+`. Production mini-apps consume the same UX via `<LoginScreen>` from `@rahhal/auth/react`.

[View examples](https://marsam.rahhal.app/components/login-screen) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `Demo only · production lives in @rahhal/auth/react`

**Category:** `auth`

## Layouts

| layout | use when |
| --- | --- |
| centered (default) | focused / utility sign-in — small surface, fast for repeat visitors |
| split | first-touch / public mini-app — brand pane + form pane at `lg+`, marketing hidden under `lg` |

## Props (`<LoginScreen>` from @rahhal/auth/react)

| prop | type | purpose |
| --- | --- | --- |
| labels | LoginScreenLabels | every translated string the screen renders |
| toast | LoginToastAdapter | success / error feedback adapter (pass `toast` from `@rahhal/ui/toaster`) |
| logoLightSrc / logoDarkSrc | string | theme-paired logo URLs rendered in the card header |
| onSignedIn | () => void | fires the moment the session goes live — typically navigates away from `/login` |
| topActions | ReactNode | fixed top-end slot (theme + locale switchers, etc.) |
| layout | "centered" | "split" | default "centered" — back-compatible with the original screen |
| marketing | ReactNode | marketing-pane content for `layout="split"` (hidden under `lg`); pass `<LoginMarketingPanel>` for the canonical structured shape, or any JSX for full freedom |
| resendCooldownSeconds | number | default 90 |

## `<LoginMarketingPanel>` slots

Drop into `<LoginScreen marketing={…}>` for the brand-led pane:

| slot | purpose |
| --- | --- |
| brand | small logo + wordmark in the start-top corner |
| eyebrow | small pill above the headline (e.g. "Welcome back") |
| headline | required big headline — gets the platform's primary→accent gradient treatment |
| body | 1–2 sentences supporting the headline |
| bullets | value-prop list with optional leading icons |
| footer | small print pinned to the bottom; defaults to `© <year> Rahhal` |

## Mobile

Under `lg` the marketing pane is hidden and the form fills the screen — phone visitors see the same fast utility surface as the centered layout, regardless of which variant the app picks.

## Catalog demo

The demo at `/login` toggles layouts via `?variant=split`. The catalog `LoginScreen` page exposes both as buttons. The demo is intentionally **not** wired to `@rahhal/auth` — the design-system app must not depend on the auth package per the platform's CLAUDE.md.