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. 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

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

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

Usage

<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
• Split Reverse
• Centered
• Typing
• Error State
• Success
• Container Widths
• Custom Illustration
• Brand Follows Art

Source

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