@trackany-device/components 1.1.0 → 1.2.0

package/src/layouts/app/TopNavLayout.tsx

@@ -8,6 +8,8 @@ import { Toolbar } from './partials/Toolbar';
 import { Footer } from './partials/Footer';
 import { HeaderTopbar } from './partials/HeaderTopbar';
 
+const HEADER_HEIGHT = 70;
+
 interface TopNavLayoutProps extends BaseAppLayoutProps {
     headerRightSlot?: ReactNode;
     navRightSlot?: ReactNode;
@@ -26,7 +28,7 @@ export function TopNavLayout({
     breadcrumbs = [],
     toolbarActions,
     stickyHeader = true,
-    stickyOffset = 100,
+    stickyOffset = HEADER_HEIGHT,
     onLogout,
     settingsUrl,
     logoutUrl,
@@ -46,21 +48,14 @@ export function TopNavLayout({
         return () => window.removeEventListener('scroll', handleScroll);
     }, [stickyHeader, stickyOffset]);
 
-    const headerHeight = isSticky ? '60px' : '100px';
-
     return (
-        <div
-            className="flex grow flex-col min-h-screen"
-            style={{ '--header-height': headerHeight } as React.CSSProperties}
-        >
+        <div className="flex grow flex-col min-h-screen">
             {/* Header */}
             <header
                 className={cn(
-                    'flex items-center shrink-0 transition-[height] border-b border-border',
-                    'h-(--header-height)',
-                    stickyHeader && isSticky && 'fixed z-10 top-0 inset-x-0 shadow-xs backdrop-blur-md bg-background/80',
+                    'flex items-center shrink-0 h-[70px] border-b border-border bg-background transition-shadow',
+                    stickyHeader && isSticky && 'fixed z-10 top-0 inset-x-0 shadow-sm backdrop-blur-md bg-background/90',
                 )}
-                style={{ height: headerHeight }}
             >
                 <div className="container mx-auto px-4 flex justify-between items-center gap-4">
                     {/* Logo */}
@@ -81,7 +76,7 @@ export function TopNavLayout({
             </header>
 
             {/* Spacer when header is sticky */}
-            {stickyHeader && isSticky && <div style={{ height: '100px' }} aria-hidden="true" />}
+            {stickyHeader && isSticky && <div style={{ height: `${HEADER_HEIGHT}px` }} aria-hidden="true" />}
 
             {/* Horizontal navbar */}
             <Navbar navItems={navItems} currentUrl={currentUrl} rightSlot={navRightSlot} />

package/src/layouts/app/WorkspaceSidebarLayout.tsx

@@ -1,7 +1,6 @@
 'use client';
-// layout-14/20: workspace sidebar — primary nav + workspace switcher + secondary panel
-// Used for multi-workspace apps (similar to Notion, Linear, Slack)
-import { type ReactNode } from 'react';
+
+import { useState, type ReactNode } from 'react';
 import { cn } from '../../lib/utils';
 import type { BaseAppLayoutProps } from './layout-types';
 import { Toolbar } from './partials/Toolbar';
@@ -9,6 +8,8 @@ import { Footer } from './partials/Footer';
 import { HeaderTopbar } from './partials/HeaderTopbar';
 import { AccordionMenu, AccordionMenuGroup, AccordionMenuItem, AccordionMenuSub, AccordionMenuSubContent, AccordionMenuSubTrigger } from '../../components/ui/accordion-menu';
 import { ScrollArea } from '../../components/ui/scroll-area';
+import { Menu, X } from 'lucide-react';
+import { Button } from '../../controls/Button';
 
 interface WorkspaceSidebarLayoutProps extends BaseAppLayoutProps {
     workspaces?: Array<{ id: string; name: string; icon?: string; href: string }>;
@@ -28,60 +29,116 @@ export function WorkspaceSidebarLayout({
     onLogout, settingsUrl, logoutUrl, unreadCount = 0,
     footerLinks = [], copyright, showToolbar = true,
 }: WorkspaceSidebarLayoutProps) {
+    const [mobileOpen, setMobileOpen] = useState(false);
     const allNavItems = [...navItems, ...secondaryItems];
+
     return (
         <div className="flex min-h-screen">
-            {/* Workspace strip */}
-            {workspaces.length > 0 && (
-                <div className="w-[52px] flex flex-col items-center py-3 gap-1.5 border-e border-sidebar-border bg-sidebar shrink-0">
-                    {logo && <a href={logoHref} className="mb-2">{logo}</a>}
-                    {workspaces.map((ws, i) => (
-                        <a key={i} href={ws.href} className={cn('w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold transition-colors', activeWorkspace === ws.id ? 'bg-sidebar-primary text-sidebar-primary-foreground' : 'bg-sidebar-accent text-sidebar-foreground hover:bg-sidebar-accent/80')}>
-                            {ws.icon ?? ws.name.slice(0, 2)}
-                        </a>
-                    ))}
-                </div>
-            )}
-
-            {/* Main sidebar */}
-            <aside className="w-56 shrink-0 flex flex-col border-e border-sidebar-border bg-sidebar">
-                {!workspaces.length && logo && (
-                    <div className="flex items-center gap-2 px-4 h-[70px] border-b border-sidebar-border shrink-0">
-                        <a href={logoHref}>{logo}</a>
-                        {appName && <span className="text-sm font-semibold">{appName}</span>}
+            {/* Desktop sidebar — always in-flow, hidden on mobile */}
+            <div className="hidden lg:flex shrink-0">
+                {/* Workspace strip */}
+                {workspaces.length > 0 && (
+                    <div className="w-[52px] flex flex-col items-center py-3 gap-1.5 border-e border-sidebar-border bg-sidebar shrink-0">
+                        {logo && <a href={logoHref} className="mb-2">{logo}</a>}
+                        {workspaces.map((ws, i) => (
+                            <a key={i} href={ws.href} className={cn('w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold transition-colors', activeWorkspace === ws.id ? 'bg-sidebar-primary text-sidebar-primary-foreground' : 'bg-sidebar-accent text-sidebar-foreground hover:bg-sidebar-accent/80')}>
+                                {ws.icon ?? ws.name.slice(0, 2)}
+                            </a>
+                        ))}
                     </div>
                 )}
-                <ScrollArea className="flex-1 py-2 px-2">
-                    <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
-                        <AccordionMenuGroup>
-                            {allNavItems.map((item, i) => (
-                                item.items ? (
-                                    <AccordionMenuSub key={i} value={item.title}>
-                                        <AccordionMenuSubTrigger>{item.title}</AccordionMenuSubTrigger>
-                                        <AccordionMenuSubContent type="single" collapsible parentValue={item.title}>
-                                            {item.items.map((c, ci) => <AccordionMenuItem key={ci} value={c.href ?? c.title} asChild><a href={c.href}>{c.title}</a></AccordionMenuItem>)}
-                                        </AccordionMenuSubContent>
-                                    </AccordionMenuSub>
-                                ) : (
-                                    <AccordionMenuItem key={i} value={item.href ?? item.title} asChild><a href={item.href}>{item.title}</a></AccordionMenuItem>
-                                )
-                            ))}
-                        </AccordionMenuGroup>
-                        {communities.length > 0 && (
+
+                {/* Main sidebar */}
+                <aside className="w-56 shrink-0 flex flex-col border-e border-sidebar-border bg-sidebar">
+                    {!workspaces.length && logo && (
+                        <div className="flex items-center gap-2 px-4 h-[70px] border-b border-sidebar-border shrink-0">
+                            <a href={logoHref}>{logo}</a>
+                            {appName && <span className="text-sm font-semibold">{appName}</span>}
+                        </div>
+                    )}
+                    <ScrollArea className="flex-1 py-2 px-2">
+                        <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
                             <AccordionMenuGroup>
-                                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">Communities</div>
-                                {communities.map((c, i) => (
-                                    <AccordionMenuItem key={i} value={c.href} asChild><a href={c.href}>{c.name}</a></AccordionMenuItem>
+                                {allNavItems.map((item, i) => (
+                                    item.items ? (
+                                        <AccordionMenuSub key={i} value={item.title}>
+                                            <AccordionMenuSubTrigger>{item.title}</AccordionMenuSubTrigger>
+                                            <AccordionMenuSubContent type="single" collapsible parentValue={item.title}>
+                                                {item.items.map((c, ci) => <AccordionMenuItem key={ci} value={c.href ?? c.title} asChild><a href={c.href}>{c.title}</a></AccordionMenuItem>)}
+                                            </AccordionMenuSubContent>
+                                        </AccordionMenuSub>
+                                    ) : (
+                                        <AccordionMenuItem key={i} value={item.href ?? item.title} asChild><a href={item.href}>{item.title}</a></AccordionMenuItem>
+                                    )
                                 ))}
                             </AccordionMenuGroup>
-                        )}
-                    </AccordionMenu>
-                </ScrollArea>
-                {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
-            </aside>
+                            {communities.length > 0 && (
+                                <AccordionMenuGroup>
+                                    <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">Communities</div>
+                                    {communities.map((c, i) => (
+                                        <AccordionMenuItem key={i} value={c.href} asChild><a href={c.href}>{c.name}</a></AccordionMenuItem>
+                                    ))}
+                                </AccordionMenuGroup>
+                            )}
+                        </AccordionMenu>
+                    </ScrollArea>
+                    {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
+                </aside>
+            </div>
+
+            {/* Mobile sidebar overlay — only rendered when open */}
+            {mobileOpen && (
+                <>
+                    <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setMobileOpen(false)} />
+                    <aside className="fixed inset-y-0 start-0 z-40 w-[280px] flex flex-col border-e border-sidebar-border bg-sidebar lg:hidden">
+                        <div className="flex items-center gap-2 px-4 h-[70px] border-b border-sidebar-border shrink-0">
+                            {logo && <a href={logoHref}>{logo}</a>}
+                            {appName && <span className="text-sm font-semibold">{appName}</span>}
+                            <Button variant="ghost" size="sm" className="size-8 p-0 ml-auto" onClick={() => setMobileOpen(false)}>
+                                <X className="size-4" />
+                            </Button>
+                        </div>
+                        <ScrollArea className="flex-1 py-2 px-2">
+                            <AccordionMenu type="single" collapsible matchPath={(href) => !!href && currentUrl.startsWith(href)} selectedValue={currentUrl}>
+                                <AccordionMenuGroup>
+                                    {allNavItems.map((item, i) => (
+                                        item.items ? (
+                                            <AccordionMenuSub key={i} value={item.title}>
+                                                <AccordionMenuSubTrigger>{item.title}</AccordionMenuSubTrigger>
+                                                <AccordionMenuSubContent type="single" collapsible parentValue={item.title}>
+                                                    {item.items.map((c, ci) => <AccordionMenuItem key={ci} value={c.href ?? c.title} asChild><a href={c.href}>{c.title}</a></AccordionMenuItem>)}
+                                                </AccordionMenuSubContent>
+                                            </AccordionMenuSub>
+                                        ) : (
+                                            <AccordionMenuItem key={i} value={item.href ?? item.title} asChild><a href={item.href}>{item.title}</a></AccordionMenuItem>
+                                        )
+                                    ))}
+                                </AccordionMenuGroup>
+                                {communities.length > 0 && (
+                                    <AccordionMenuGroup>
+                                        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">Communities</div>
+                                        {communities.map((c, i) => (
+                                            <AccordionMenuItem key={i} value={c.href} asChild><a href={c.href}>{c.name}</a></AccordionMenuItem>
+                                        ))}
+                                    </AccordionMenuGroup>
+                                )}
+                            </AccordionMenu>
+                        </ScrollArea>
+                        {sidebarFooter && <div className="p-3 border-t border-sidebar-border">{sidebarFooter}</div>}
+                    </aside>
+                </>
+            )}
 
             <div className="flex flex-col flex-1 min-w-0">
                 <header className="flex items-center h-[70px] border-b border-border bg-background px-4 shrink-0">
+                    <Button
+                        variant="ghost" size="sm"
+                        className="size-9 p-0 rounded-full lg:hidden mr-2"
+                        onClick={() => setMobileOpen((o) => !o)}
+                        aria-label="Toggle menu"
+                    >
+                        {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                    </Button>
                     <div className="flex-1" />
                     <HeaderTopbar user={user} unreadCount={unreadCount} settingsUrl={settingsUrl} logoutUrl={logoutUrl} onLogout={onLogout} />
                 </header>

package/src/layouts/app/partials/Navbar.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import type { NavItem } from '../../../types/navigation';
 import { cn } from '../../../lib/utils';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, Menu, X } from 'lucide-react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../../components/ui/dropdown-menu';
 
 interface NavbarProps {
@@ -23,10 +23,14 @@ function hasActiveChild(items: NavItem[], currentUrl: string): boolean {
 }
 
 export function Navbar({ navItems = [], currentUrl = '', rightSlot, className }: NavbarProps) {
+    const [mobileOpen, setMobileOpen] = useState(false);
+
     return (
-        <div className={cn('border-b border-border pb-5 lg:pb-0 mb-5 lg:mb-10', className)}>
-            <div className="container mx-auto px-4 flex flex-wrap justify-between items-center gap-2">
-                <nav className="flex items-stretch overflow-x-auto">
+        // relative so the mobile dropdown can be absolute-positioned
+        <div className={cn('border-b border-border relative', className)}>
+            <div className="container mx-auto px-4 flex justify-between items-center gap-2">
+                {/* Desktop nav */}
+                <nav className="hidden lg:flex items-stretch overflow-x-auto">
                     {navItems.map((item, index) => {
                         const active = isActive(item, currentUrl);
                         const childActive = item.items ? hasActiveChild(item.items, currentUrl) : false;
@@ -50,10 +54,7 @@ export function Navbar({ navItems = [], currentUrl = '', rightSlot, className }:
                                     <DropdownMenuContent sideOffset={0} className="min-w-[175px]">
                                         {item.items.map((child, ci) => (
                                             <DropdownMenuItem key={ci} asChild>
-                                                <a
-                                                    href={child.href}
-                                                    className={cn(isActive(child, currentUrl) && 'bg-accent')}
-                                                >
+                                                <a href={child.href} className={cn(isActive(child, currentUrl) && 'bg-accent')}>
                                                     {child.title}
                                                 </a>
                                             </DropdownMenuItem>
@@ -78,8 +79,58 @@ export function Navbar({ navItems = [], currentUrl = '', rightSlot, className }:
                         );
                     })}
                 </nav>
-                {rightSlot && <div className="flex items-center gap-4">{rightSlot}</div>}
+
+                {/* Mobile: hamburger on the left, right slot hidden */}
+                <button
+                    className="lg:hidden flex items-center justify-center size-9 rounded-md hover:bg-accent transition-colors"
+                    onClick={() => setMobileOpen((o) => !o)}
+                    aria-label="Toggle navigation"
+                >
+                    {mobileOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+                </button>
+
+                {rightSlot && <div className="hidden lg:flex items-center gap-4">{rightSlot}</div>}
             </div>
+
+            {/* Mobile dropdown — absolute so it overlays content without shifting layout */}
+            {mobileOpen && (
+                <div className="lg:hidden absolute top-full left-0 right-0 z-50 border-b border-border bg-background shadow-md pb-2">
+                    {navItems.map((item, i) =>
+                        item.items && item.items.length > 0 ? (
+                            <div key={i}>
+                                <div className="px-4 pt-3 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                                    {item.title}
+                                </div>
+                                {item.items.map((child, ci) => (
+                                    <a
+                                        key={ci}
+                                        href={child.href}
+                                        className={cn(
+                                            'block px-6 py-2 text-sm hover:bg-accent transition-colors',
+                                            isActive(child, currentUrl) && 'text-primary font-medium',
+                                        )}
+                                        onClick={() => setMobileOpen(false)}
+                                    >
+                                        {child.title}
+                                    </a>
+                                ))}
+                            </div>
+                        ) : (
+                            <a
+                                key={i}
+                                href={item.href}
+                                className={cn(
+                                    'block px-4 py-2.5 text-sm hover:bg-accent transition-colors',
+                                    isActive(item, currentUrl) && 'text-primary font-medium',
+                                )}
+                                onClick={() => setMobileOpen(false)}
+                            >
+                                {item.title}
+                            </a>
+                        ),
+                    )}
+                </div>
+            )}
         </div>
     );
 }

package/src/layouts/app/partials/Toolbar.tsx

@@ -13,7 +13,7 @@ interface ToolbarProps {
 
 export function Toolbar({ title, breadcrumbs = [], actions, className, currentUrl }: ToolbarProps) {
     return (
-        <div className={cn('mb-5 lg:mb-10', className)}>
+        <div className={cn('pt-5 mb-5 lg:pt-7 lg:mb-10', className)}>
             <div className="container mx-auto px-4 flex items-center justify-between flex-wrap gap-5">
                 <div className="flex items-center flex-wrap gap-1 lg:gap-5">
                     {title && <h1 className="font-medium text-lg text-mono">{title}</h1>}

package/src/layouts/auth/AuthCenteredLayout.tsx

@@ -5,13 +5,19 @@ interface Props extends AuthLayoutProps {
     logo?: ReactNode;
     appName?: string;
     homeUrl?: string;
-    bannerUrl?: string;
+    backgroundImage?: string;
+    backgroundImageDark?: string;
 }
 
-export default function AuthCenteredLayout({ children, title, description, logo, appName, homeUrl = '/', bannerUrl = '/banner.png' }: Props) {
+export default function AuthCenteredLayout({ children, title, description, logo, appName, homeUrl = '/', backgroundImage, backgroundImageDark }: Props) {
     return (
-        <div className="relative flex min-h-svh flex-col items-center justify-center bg-background bg-cover bg-center bg-no-repeat p-6"
-            style={{ backgroundImage: `url(${bannerUrl})` }}>
+        <div className="auth-centered-bg relative flex min-h-svh flex-col items-center justify-center bg-background bg-cover bg-center bg-no-repeat p-6">
+            {(backgroundImage || backgroundImageDark) && (
+                <style>{`
+                    .auth-centered-bg { ${backgroundImage ? `background-image: url('${backgroundImage}');` : ''} }
+                    .dark .auth-centered-bg { ${backgroundImageDark ? `background-image: url('${backgroundImageDark}');` : ''} }
+                `}</style>
+            )}
             <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-background/95 via-background/85 to-primary-subtle/60" />
 
             <div className="relative z-10 w-full max-w-md">

package/src/lib/map-markers.ts

@@ -3,6 +3,11 @@ import arrowGreen  from '../assets/map/arrows/map-arrow-green.png';
 import arrowPurple from '../assets/map/arrows/map-arrow-purple.png';
 import arrowRed    from '../assets/map/arrows/map-arrow-red.png';
 
+import pinBlue   from '../assets/map/pins/map-pin-blue.png';
+import pinGreen  from '../assets/map/pins/map-pin-green.png';
+import pinPurple from '../assets/map/pins/map-pin-purple.png';
+import pinRed    from '../assets/map/pins/map-pin-red.png';
+
 import flagBlue   from '../assets/map/flags/flag-blue.png';
 import flagGreen  from '../assets/map/flags/flag-green.png';
 import flagRed    from '../assets/map/flags/flag-red.png';
@@ -80,11 +85,19 @@ export function deviceArrowUrl(signal: number | null | undefined): string {
     return ARROW_URLS[markerColor(signal)];
 }
 
-// ─── Pin colours (device has no heading) ─────────────────────────────────────
+// ─── Pin markers (device has no heading) ─────────────────────────────────────
+
+/** Pin image URLs keyed by colour. */
+export const PIN_URLS: Record<MarkerColor, string> = {
+    red:    pinRed,
+    purple: pinPurple,
+    blue:   pinBlue,
+    green:  pinGreen,
+};
 
 /**
- * Hex fill colours for the static pin marker (rendered as a DOM element,
- * no separate image needed).
+ * Hex fill colours for the static pin marker (CSS fallback when images
+ * are unavailable or for lightweight circle-only rendering).
  */
 export const PIN_COLORS: Record<MarkerColor, string> = {
     red:    '#ef4444',
@@ -93,6 +106,11 @@ export const PIN_COLORS: Record<MarkerColor, string> = {
     green:  '#22c55e',
 };
 
+/** Returns the pin image URL for a device, given its network signal. */
+export function devicePinUrl(signal: number | null | undefined): string {
+    return PIN_URLS[markerColor(signal)];
+}
+
 /** Returns the hex pin colour for a device, given its network signal. */
 export function devicePinColor(signal: number | null | undefined): string {
     return PIN_COLORS[markerColor(signal)];

package/src/pages/login/ConfirmPasswordPage.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { AuthLayoutVariant } from "../../index";
+import { ConfirmPasswordForm } from "../../elements/ConfirmPasswordForm";
+import { AuthLayoutResolved, AUTH_LAYOUT_ARG_TYPE } from "../../layouts/LayoutSwitcher";
+
+
+export default function ConfirmPasswordPage({
+    authLayout, 
+    password , 
+    setPassword, 
+    errors = {}, 
+    processing = false, 
+    title ="Confirm password", 
+    description = "This is a secure area — please re-enter your password"
+}: { 
+    authLayout: AuthLayoutVariant; 
+    password: string; 
+    setPassword: (password: string) => void;
+    errors?: { password?: string };
+    processing?: boolean;
+    title?: string;
+    description?: string;
+}) {
+    return (
+        <AuthLayoutResolved variant={authLayout} title={title} description={description}>
+            <ConfirmPasswordForm
+                password={password}
+                    errors={errors}
+                    processing={processing}
+                    onChange={setPassword}
+                    onSubmit={(e) => e.preventDefault()}
+                />
+            </AuthLayoutResolved>
+        );
+}

package/src/pages/login/ForgotPasswordPage.tsx

@@ -0,0 +1,41 @@
+import type { FormEvent } from 'react';
+import type { AuthLayoutVariant } from '../../index';
+import type { ForgotPasswordFormData, ForgotPasswordFormErrors } from '../../elements/ForgotPasswordForm';
+import { ForgotPasswordForm } from '../../elements/ForgotPasswordForm';
+import { AuthLayoutResolved } from '../../layouts/LayoutSwitcher';
+
+export default function ForgotPasswordPage({
+    authLayout,
+    data,
+    setData,
+    errors = {},
+    processing = false,
+    status,
+    loginUrl = '/login',
+    title = 'Forgot password?',
+    description = "We'll email you a reset link",
+}: {
+    authLayout: AuthLayoutVariant;
+    data: ForgotPasswordFormData;
+    setData: (d: ForgotPasswordFormData) => void;
+    errors?: ForgotPasswordFormErrors;
+    processing?: boolean;
+    status?: string;
+    loginUrl?: string;
+    title?: string;
+    description?: string;
+}) {
+    return (
+        <AuthLayoutResolved variant={authLayout} title={title} description={description}>
+            <ForgotPasswordForm
+                data={data}
+                errors={errors}
+                processing={processing}
+                status={status}
+                loginUrl={loginUrl}
+                onChange={(field, value) => setData({ ...data, [field]: value })}
+                onSubmit={(e: FormEvent) => e.preventDefault()}
+            />
+        </AuthLayoutResolved>
+    );
+}

package/src/pages/login/LoginPage.tsx

@@ -0,0 +1,50 @@
+import type { FormEvent } from 'react';
+import type { AuthLayoutVariant } from '../../index';
+import type { LoginFormData, LoginFormErrors } from '../../elements/LoginForm';
+import { LoginForm } from '../../elements/LoginForm';
+import { AuthLayoutResolved } from '../../layouts/LayoutSwitcher';
+
+export default function LoginPage({
+    authLayout,
+    data,
+    setData,
+    errors = {},
+    processing = false,
+    status,
+    canResetPassword = true,
+    canRegister = true,
+    forgotPasswordUrl = '/forgot-password',
+    registerUrl = '/register',
+    title = 'Sign in',
+    description = 'Enter your credentials to continue',
+}: {
+    authLayout: AuthLayoutVariant;
+    data: LoginFormData;
+    setData: (d: LoginFormData) => void;
+    errors?: LoginFormErrors;
+    processing?: boolean;
+    status?: string;
+    canResetPassword?: boolean;
+    canRegister?: boolean;
+    forgotPasswordUrl?: string;
+    registerUrl?: string;
+    title?: string;
+    description?: string;
+}) {
+    return (
+        <AuthLayoutResolved variant={authLayout} title={title} description={description}>
+            <LoginForm
+                data={data}
+                errors={errors}
+                processing={processing}
+                status={status}
+                canResetPassword={canResetPassword}
+                canRegister={canRegister}
+                forgotPasswordUrl={forgotPasswordUrl}
+                registerUrl={registerUrl}
+                onChange={(field, value) => setData({ ...data, [field]: value })}
+                onSubmit={(e: FormEvent) => e.preventDefault()}
+            />
+        </AuthLayoutResolved>
+    );
+}

package/src/pages/login/RegisterPage.tsx

@@ -0,0 +1,41 @@
+import type { FormEvent } from 'react';
+import type { AuthLayoutVariant } from '../../index';
+import type { RegisterFormData, RegisterFormErrors, PhoneCountry } from '../../elements/RegisterForm';
+import { RegisterForm } from '../../elements/RegisterForm';
+import { AuthLayoutResolved } from '../../layouts/LayoutSwitcher';
+
+export default function RegisterPage({
+    authLayout,
+    data,
+    setData,
+    errors = {},
+    processing = false,
+    loginUrl = '/login',
+    phoneCountries,
+    title = 'Create an account',
+    description = 'Fill in your details to get started',
+}: {
+    authLayout: AuthLayoutVariant;
+    data: RegisterFormData;
+    setData: (d: RegisterFormData) => void;
+    errors?: RegisterFormErrors;
+    processing?: boolean;
+    loginUrl?: string;
+    phoneCountries?: PhoneCountry[];
+    title?: string;
+    description?: string;
+}) {
+    return (
+        <AuthLayoutResolved variant={authLayout} title={title} description={description}>
+            <RegisterForm
+                data={data}
+                errors={errors}
+                processing={processing}
+                loginUrl={loginUrl}
+                phoneCountries={phoneCountries}
+                onChange={(field, value) => setData({ ...data, [field]: value })}
+                onSubmit={(e: FormEvent) => e.preventDefault()}
+            />
+        </AuthLayoutResolved>
+    );
+}

package/src/pages/login/ResetPasswordPage.tsx

@@ -0,0 +1,35 @@
+import type { FormEvent } from 'react';
+import type { AuthLayoutVariant } from '../../index';
+import type { ResetPasswordFormData, ResetPasswordFormErrors } from '../../elements/ResetPasswordForm';
+import { ResetPasswordForm } from '../../elements/ResetPasswordForm';
+import { AuthLayoutResolved } from '../../layouts/LayoutSwitcher';
+
+export default function ResetPasswordPage({
+    authLayout,
+    data,
+    setData,
+    errors = {},
+    processing = false,
+    title = 'Reset password',
+    description = 'Enter your new password below',
+}: {
+    authLayout: AuthLayoutVariant;
+    data: ResetPasswordFormData;
+    setData: (d: ResetPasswordFormData) => void;
+    errors?: ResetPasswordFormErrors;
+    processing?: boolean;
+    title?: string;
+    description?: string;
+}) {
+    return (
+        <AuthLayoutResolved variant={authLayout} title={title} description={description}>
+            <ResetPasswordForm
+                data={data}
+                errors={errors}
+                processing={processing}
+                onChange={(field, value) => setData({ ...data, [field]: value })}
+                onSubmit={(e: FormEvent) => e.preventDefault()}
+            />
+        </AuthLayoutResolved>
+    );
+}