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,
               ],
             ),
           ),
         ),
       ],
     );