AuthShell constructor

AuthShell({ Object? brand, String? title, String? description, Object? child, List<Object?> children = const [], Object? footer, Object maxWidth = 420, String? className, Map<String, Object?> props = const {}, Map<String, Object?> style = const {}, DartStyle? dartStyle, DartStyle? cardDartStyle, })

Creates an auth shell for login, register, and recovery screens.

Implementation

AuthShell({
  Object? brand,
  String? title,
  String? description,
  Object? child,
  List<Object?> children = const [],
  Object? footer,
  Object maxWidth = 420,
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
  DartStyle? cardDartStyle,
}) : super(
        'div',
        props: mergeComponentProps(
          props,
          className: className,
          dartStyle: DartStyle(
            minHeight: '100vh',
            display: Display.grid,
            alignItems: AlignItems.center,
            background: ThemeToken.color(
              'authBackground',
              fallback: '#f8fafc',
            ).toCss(),
            padding: const EdgeInsets.all(24),
          ).merge(dartStyle),
          style: style,
        ),
        children: [
          SafeArea(
            child: ConstrainedBox(
              maxWidth: maxWidth,
              center: true,
              child: Box(
                tag: 'main',
                dartStyle: DartStyle(
                  display: Display.grid,
                  gap: 20,
                  padding: const EdgeInsets.all(24),
                  radius: ThemeToken.radius('lg', fallback: '12px').toCss(),
                  background: ThemeToken.color(
                    'surface',
                    fallback: '#ffffff',
                  ).toCss(),
                  border: Border.all(
                    color: ThemeToken.color(
                      'surfaceBorder',
                      fallback: '#e4e7ec',
                    ).toCss(),
                  ),
                  shadow: Shadow(
                    y: 18,
                    blur: 44,
                    spread: -18,
                    color: ThemeToken.shadow(
                      'authCard',
                      fallback: 'rgba(16, 24, 40, 0.22)',
                    ).toCss(),
                  ),
                ).merge(cardDartStyle),
                children: [
                  if (brand != null) brand,
                  if (title != null || description != null)
                    _ShellHeading(
                      title: title,
                      description: description,
                      centered: true,
                    ),
                  ...normalizeChildren(child, children),
                  if (footer != null) footer,
                ],
              ),
            ),
          ),
        ],
      );