first commit

laravel/resources/css/app.css

@@ -0,0 +1,143 @@
+@import 'tailwindcss';
+
+@import 'tw-animate-css';
+
+@source '../views';
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+    --font-sans:
+        'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
+
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.87 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.87 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.145 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.145 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.985 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.396 0.141 25.723);
+    --destructive-foreground: oklch(0.637 0.237 25.331);
+    --border: oklch(0.269 0 0);
+    --input: oklch(0.269 0 0);
+    --ring: oklch(0.439 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.985 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(0.269 0 0);
+    --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

laravel/resources/js/app.tsx

@@ -0,0 +1,32 @@
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '../css/app.css';
+import { initializeTheme } from './hooks/use-appearance';
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => (title ? `${title} - ${appName}` : appName),
+    resolve: (name) =>
+        resolvePageComponent(
+            `./pages/${name}.tsx`,
+            import.meta.glob('./pages/**/*.tsx'),
+        ),
+    setup({ el, App, props }) {
+        const root = createRoot(el);
+
+        root.render(
+            <StrictMode>
+                <App {...props} />
+            </StrictMode>,
+        );
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});
+
+// This will set light / dark mode on load...
+initializeTheme();

laravel/resources/js/components/alert-error.tsx

@@ -0,0 +1,24 @@
+import { AlertCircleIcon } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+
+export default function AlertError({
+    errors,
+    title,
+}: {
+    errors: string[];
+    title?: string;
+}) {
+    return (
+        <Alert variant="destructive">
+            <AlertCircleIcon />
+            <AlertTitle>{title || 'Something went wrong.'}</AlertTitle>
+            <AlertDescription>
+                <ul className="list-inside list-disc text-sm">
+                    {Array.from(new Set(errors)).map((error, index) => (
+                        <li key={index}>{error}</li>
+                    ))}
+                </ul>
+            </AlertDescription>
+        </Alert>
+    );
+}

laravel/resources/js/components/app-content.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { SidebarInset } from '@/components/ui/sidebar';
+
+type Props = React.ComponentProps<'main'> & {
+    variant?: 'header' | 'sidebar';
+};
+
+export function AppContent({ variant = 'header', children, ...props }: Props) {
+    if (variant === 'sidebar') {
+        return <SidebarInset {...props}>{children}</SidebarInset>;
+    }
+
+    return (
+        <main
+            className="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl"
+            {...props}
+        >
+            {children}
+        </main>
+    );
+}

laravel/resources/js/components/app-header.tsx

@@ -0,0 +1,251 @@
+import { Link, usePage } from '@inertiajs/react';
+import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-react';
+import { Breadcrumbs } from '@/components/breadcrumbs';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+    NavigationMenu,
+    NavigationMenuItem,
+    NavigationMenuList,
+    navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu';
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from '@/components/ui/sheet';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { UserMenuContent } from '@/components/user-menu-content';
+import { useCurrentUrl } from '@/hooks/use-current-url';
+import { useInitials } from '@/hooks/use-initials';
+import { cn, toUrl } from '@/lib/utils';
+import { dashboard } from '@/routes';
+import type { BreadcrumbItem, NavItem, SharedData } from '@/types';
+import AppLogo from './app-logo';
+import AppLogoIcon from './app-logo-icon';
+
+type Props = {
+    breadcrumbs?: BreadcrumbItem[];
+};
+
+const mainNavItems: NavItem[] = [
+    {
+        title: 'Dashboard',
+        href: dashboard(),
+        icon: LayoutGrid,
+    },
+];
+
+const rightNavItems: NavItem[] = [
+    {
+        title: 'Repository',
+        href: 'https://github.com/laravel/react-starter-kit',
+        icon: Folder,
+    },
+    {
+        title: 'Documentation',
+        href: 'https://laravel.com/docs/starter-kits#react',
+        icon: BookOpen,
+    },
+];
+
+const activeItemStyles =
+    'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
+
+export function AppHeader({ breadcrumbs = [] }: Props) {
+    const page = usePage<SharedData>();
+    const { auth } = page.props;
+    const getInitials = useInitials();
+    const { isCurrentUrl, whenCurrentUrl } = useCurrentUrl();
+    return (
+        <>
+            <div className="border-b border-sidebar-border/80">
+                <div className="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
+                    {/* Mobile Menu */}
+                    <div className="lg:hidden">
+                        <Sheet>
+                            <SheetTrigger asChild>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="mr-2 h-[34px] w-[34px]"
+                                >
+                                    <Menu className="h-5 w-5" />
+                                </Button>
+                            </SheetTrigger>
+                            <SheetContent
+                                side="left"
+                                className="flex h-full w-64 flex-col items-stretch justify-between bg-sidebar"
+                            >
+                                <SheetTitle className="sr-only">
+                                    Navigation Menu
+                                </SheetTitle>
+                                <SheetHeader className="flex justify-start text-left">
+                                    <AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
+                                </SheetHeader>
+                                <div className="flex h-full flex-1 flex-col space-y-4 p-4">
+                                    <div className="flex h-full flex-col justify-between text-sm">
+                                        <div className="flex flex-col space-y-4">
+                                            {mainNavItems.map((item) => (
+                                                <Link
+                                                    key={item.title}
+                                                    href={item.href}
+                                                    className="flex items-center space-x-2 font-medium"
+                                                >
+                                                    {item.icon && (
+                                                        <item.icon className="h-5 w-5" />
+                                                    )}
+                                                    <span>{item.title}</span>
+                                                </Link>
+                                            ))}
+                                        </div>
+
+                                        <div className="flex flex-col space-y-4">
+                                            {rightNavItems.map((item) => (
+                                                <a
+                                                    key={item.title}
+                                                    href={toUrl(item.href)}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                    className="flex items-center space-x-2 font-medium"
+                                                >
+                                                    {item.icon && (
+                                                        <item.icon className="h-5 w-5" />
+                                                    )}
+                                                    <span>{item.title}</span>
+                                                </a>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            </SheetContent>
+                        </Sheet>
+                    </div>
+
+                    <Link
+                        href={dashboard()}
+                        prefetch
+                        className="flex items-center space-x-2"
+                    >
+                        <AppLogo />
+                    </Link>
+
+                    {/* Desktop Navigation */}
+                    <div className="ml-6 hidden h-full items-center space-x-6 lg:flex">
+                        <NavigationMenu className="flex h-full items-stretch">
+                            <NavigationMenuList className="flex h-full items-stretch space-x-2">
+                                {mainNavItems.map((item, index) => (
+                                    <NavigationMenuItem
+                                        key={index}
+                                        className="relative flex h-full items-center"
+                                    >
+                                        <Link
+                                            href={item.href}
+                                            className={cn(
+                                                navigationMenuTriggerStyle(),
+                                                whenCurrentUrl(
+                                                    item.href,
+                                                    activeItemStyles,
+                                                ),
+                                                'h-9 cursor-pointer px-3',
+                                            )}
+                                        >
+                                            {item.icon && (
+                                                <item.icon className="mr-2 h-4 w-4" />
+                                            )}
+                                            {item.title}
+                                        </Link>
+                                        {isCurrentUrl(item.href) && (
+                                            <div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"></div>
+                                        )}
+                                    </NavigationMenuItem>
+                                ))}
+                            </NavigationMenuList>
+                        </NavigationMenu>
+                    </div>
+
+                    <div className="ml-auto flex items-center space-x-2">
+                        <div className="relative flex items-center space-x-1">
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="group h-9 w-9 cursor-pointer"
+                            >
+                                <Search className="!size-5 opacity-80 group-hover:opacity-100" />
+                            </Button>
+                            <div className="ml-1 hidden gap-1 lg:flex">
+                                {rightNavItems.map((item) => (
+                                    <TooltipProvider
+                                        key={item.title}
+                                        delayDuration={0}
+                                    >
+                                        <Tooltip>
+                                            <TooltipTrigger>
+                                                <a
+                                                    href={toUrl(item.href)}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                    className="group inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium text-accent-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+                                                >
+                                                    <span className="sr-only">
+                                                        {item.title}
+                                                    </span>
+                                                    {item.icon && (
+                                                        <item.icon className="size-5 opacity-80 group-hover:opacity-100" />
+                                                    )}
+                                                </a>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                <p>{item.title}</p>
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </TooltipProvider>
+                                ))}
+                            </div>
+                        </div>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    variant="ghost"
+                                    className="size-10 rounded-full p-1"
+                                >
+                                    <Avatar className="size-8 overflow-hidden rounded-full">
+                                        <AvatarImage
+                                            src={auth.user.avatar}
+                                            alt={auth.user.name}
+                                        />
+                                        <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
+                                            {getInitials(auth.user.name)}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent className="w-56" align="end">
+                                <UserMenuContent user={auth.user} />
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                </div>
+            </div>
+            {breadcrumbs.length > 1 && (
+                <div className="flex w-full border-b border-sidebar-border/70">
+                    <div className="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
+                        <Breadcrumbs breadcrumbs={breadcrumbs} />
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

laravel/resources/js/components/app-logo-icon.tsx

@@ -0,0 +1,13 @@
+import type { SVGAttributes } from 'react';
+
+export default function AppLogoIcon(props: SVGAttributes<SVGElement>) {
+    return (
+        <svg {...props} viewBox="0 0 40 42" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.2 5.63325L8.6 0.855469L0 5.63325V32.1434L16.2 41.1434L32.4 32.1434V23.699L40 19.4767V9.85547L31.4 5.07769L22.8 9.85547V18.2999L17.2 21.411V5.63325ZM38 18.2999L32.4 21.411V15.2545L38 12.1434V18.2999ZM36.9409 10.4439L31.4 13.5221L25.8591 10.4439L31.4 7.36561L36.9409 10.4439ZM24.8 18.2999V12.1434L30.4 15.2545V21.411L24.8 18.2999ZM23.8 20.0323L29.3409 23.1105L16.2 30.411L10.6591 27.3328L23.8 20.0323ZM7.6 27.9212L15.2 32.1434V38.2999L2 30.9666V7.92116L7.6 11.0323V27.9212ZM8.6 9.29991L3.05913 6.22165L8.6 3.14339L14.1409 6.22165L8.6 9.29991ZM30.4 24.8101L17.2 32.1434V38.2999L30.4 30.9666V24.8101ZM9.6 11.0323L15.2 7.92117V22.5221L9.6 25.6333V11.0323Z"
+            />
+        </svg>
+    );
+}

laravel/resources/js/components/app-logo.tsx

@@ -0,0 +1,16 @@
+import AppLogoIcon from './app-logo-icon';
+
+export default function AppLogo() {
+    return (
+        <>
+            <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <AppLogoIcon className="size-5 fill-current text-white dark:text-black" />
+            </div>
+            <div className="ml-1 grid flex-1 text-left text-sm">
+                <span className="mb-0.5 truncate leading-tight font-semibold">
+                    Laravel Starter Kit
+                </span>
+            </div>
+        </>
+    );
+}

laravel/resources/js/components/app-shell.tsx

@@ -0,0 +1,21 @@
+import { usePage } from '@inertiajs/react';
+import type { ReactNode } from 'react';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import type { SharedData } from '@/types';
+
+type Props = {
+    children: ReactNode;
+    variant?: 'header' | 'sidebar';
+};
+
+export function AppShell({ children, variant = 'header' }: Props) {
+    const isOpen = usePage<SharedData>().props.sidebarOpen;
+
+    if (variant === 'header') {
+        return (
+            <div className="flex min-h-screen w-full flex-col">{children}</div>
+        );
+    }
+
+    return <SidebarProvider defaultOpen={isOpen}>{children}</SidebarProvider>;
+}

laravel/resources/js/components/app-sidebar-header.tsx

@@ -0,0 +1,18 @@
+import { Breadcrumbs } from '@/components/breadcrumbs';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
+
+export function AppSidebarHeader({
+    breadcrumbs = [],
+}: {
+    breadcrumbs?: BreadcrumbItemType[];
+}) {
+    return (
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/50 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
+            <div className="flex items-center gap-2">
+                <SidebarTrigger className="-ml-1" />
+                <Breadcrumbs breadcrumbs={breadcrumbs} />
+            </div>
+        </header>
+    );
+}

laravel/resources/js/components/app-sidebar.tsx

@@ -0,0 +1,65 @@
+import { Link } from '@inertiajs/react';
+import { BookOpen, Folder, LayoutGrid } from 'lucide-react';
+import { NavFooter } from '@/components/nav-footer';
+import { NavMain } from '@/components/nav-main';
+import { NavUser } from '@/components/nav-user';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import { dashboard } from '@/routes';
+import type { NavItem } from '@/types';
+import AppLogo from './app-logo';
+
+const mainNavItems: NavItem[] = [
+    {
+        title: 'Dashboard',
+        href: dashboard(),
+        icon: LayoutGrid,
+    },
+];
+
+const footerNavItems: NavItem[] = [
+    {
+        title: 'Repository',
+        href: 'https://github.com/laravel/react-starter-kit',
+        icon: Folder,
+    },
+    {
+        title: 'Documentation',
+        href: 'https://laravel.com/docs/starter-kits#react',
+        icon: BookOpen,
+    },
+];
+
+export function AppSidebar() {
+    return (
+        <Sidebar collapsible="icon" variant="inset">
+            <SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton size="lg" asChild>
+                            <Link href={dashboard()} prefetch>
+                                <AppLogo />
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarHeader>
+
+            <SidebarContent>
+                <NavMain items={mainNavItems} />
+            </SidebarContent>
+
+            <SidebarFooter>
+                <NavFooter items={footerNavItems} className="mt-auto" />
+                <NavUser />
+            </SidebarFooter>
+        </Sidebar>
+    );
+}

laravel/resources/js/components/appearance-tabs.tsx

@@ -0,0 +1,45 @@
+import type { LucideIcon } from 'lucide-react';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import type { HTMLAttributes } from 'react';
+import type { Appearance } from '@/hooks/use-appearance';
+import { useAppearance } from '@/hooks/use-appearance';
+import { cn } from '@/lib/utils';
+
+export default function AppearanceToggleTab({
+    className = '',
+    ...props
+}: HTMLAttributes<HTMLDivElement>) {
+    const { appearance, updateAppearance } = useAppearance();
+
+    const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [
+        { value: 'light', icon: Sun, label: 'Light' },
+        { value: 'dark', icon: Moon, label: 'Dark' },
+        { value: 'system', icon: Monitor, label: 'System' },
+    ];
+
+    return (
+        <div
+            className={cn(
+                'inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800',
+                className,
+            )}
+            {...props}
+        >
+            {tabs.map(({ value, icon: Icon, label }) => (
+                <button
+                    key={value}
+                    onClick={() => updateAppearance(value)}
+                    className={cn(
+                        'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
+                        appearance === value
+                            ? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
+                            : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+                    )}
+                >
+                    <Icon className="-ml-1 h-4 w-4" />
+                    <span className="ml-1.5 text-sm">{label}</span>
+                </button>
+            ))}
+        </div>
+    );
+}

laravel/resources/js/components/breadcrumbs.tsx

@@ -0,0 +1,49 @@
+import { Link } from '@inertiajs/react';
+import { Fragment } from 'react';
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
+
+export function Breadcrumbs({
+    breadcrumbs,
+}: {
+    breadcrumbs: BreadcrumbItemType[];
+}) {
+    return (
+        <>
+            {breadcrumbs.length > 0 && (
+                <Breadcrumb>
+                    <BreadcrumbList>
+                        {breadcrumbs.map((item, index) => {
+                            const isLast = index === breadcrumbs.length - 1;
+                            return (
+                                <Fragment key={index}>
+                                    <BreadcrumbItem>
+                                        {isLast ? (
+                                            <BreadcrumbPage>
+                                                {item.title}
+                                            </BreadcrumbPage>
+                                        ) : (
+                                            <BreadcrumbLink asChild>
+                                                <Link href={item.href}>
+                                                    {item.title}
+                                                </Link>
+                                            </BreadcrumbLink>
+                                        )}
+                                    </BreadcrumbItem>
+                                    {!isLast && <BreadcrumbSeparator />}
+                                </Fragment>
+                            );
+                        })}
+                    </BreadcrumbList>
+                </Breadcrumb>
+            )}
+        </>
+    );
+}

laravel/resources/js/components/delete-user.tsx

@@ -0,0 +1,121 @@
+import { Form } from '@inertiajs/react';
+import { useRef } from 'react';
+import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
+import Heading from '@/components/heading';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export default function DeleteUser() {
+    const passwordInput = useRef<HTMLInputElement>(null);
+
+    return (
+        <div className="space-y-6">
+            <Heading
+                variant="small"
+                title="Delete account"
+                description="Delete your account and all of its resources"
+            />
+            <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
+                <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
+                    <p className="font-medium">Warning</p>
+                    <p className="text-sm">
+                        Please proceed with caution, this cannot be undone.
+                    </p>
+                </div>
+
+                <Dialog>
+                    <DialogTrigger asChild>
+                        <Button
+                            variant="destructive"
+                            data-test="delete-user-button"
+                        >
+                            Delete account
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogTitle>
+                            Are you sure you want to delete your account?
+                        </DialogTitle>
+                        <DialogDescription>
+                            Once your account is deleted, all of its resources
+                            and data will also be permanently deleted. Please
+                            enter your password to confirm you would like to
+                            permanently delete your account.
+                        </DialogDescription>
+
+                        <Form
+                            {...ProfileController.destroy.form()}
+                            options={{
+                                preserveScroll: true,
+                            }}
+                            onError={() => passwordInput.current?.focus()}
+                            resetOnSuccess
+                            className="space-y-6"
+                        >
+                            {({ resetAndClearErrors, processing, errors }) => (
+                                <>
+                                    <div className="grid gap-2">
+                                        <Label
+                                            htmlFor="password"
+                                            className="sr-only"
+                                        >
+                                            Password
+                                        </Label>
+
+                                        <Input
+                                            id="password"
+                                            type="password"
+                                            name="password"
+                                            ref={passwordInput}
+                                            placeholder="Password"
+                                            autoComplete="current-password"
+                                        />
+
+                                        <InputError message={errors.password} />
+                                    </div>
+
+                                    <DialogFooter className="gap-2">
+                                        <DialogClose asChild>
+                                            <Button
+                                                variant="secondary"
+                                                onClick={() =>
+                                                    resetAndClearErrors()
+                                                }
+                                            >
+                                                Cancel
+                                            </Button>
+                                        </DialogClose>
+
+                                        <Button
+                                            variant="destructive"
+                                            disabled={processing}
+                                            asChild
+                                        >
+                                            <button
+                                                type="submit"
+                                                data-test="confirm-delete-user-button"
+                                            >
+                                                Delete account
+                                            </button>
+                                        </Button>
+                                    </DialogFooter>
+                                </>
+                            )}
+                        </Form>
+                    </DialogContent>
+                </Dialog>
+            </div>
+        </div>
+    );
+}

laravel/resources/js/components/heading.tsx

@@ -0,0 +1,26 @@
+export default function Heading({
+    title,
+    description,
+    variant = 'default',
+}: {
+    title: string;
+    description?: string;
+    variant?: 'default' | 'small';
+}) {
+    return (
+        <header className={variant === 'small' ? '' : 'mb-8 space-y-0.5'}>
+            <h2
+                className={
+                    variant === 'small'
+                        ? 'mb-0.5 text-base font-medium'
+                        : 'text-xl font-semibold tracking-tight'
+                }
+            >
+                {title}
+            </h2>
+            {description && (
+                <p className="text-sm text-muted-foreground">{description}</p>
+            )}
+        </header>
+    );
+}

laravel/resources/js/components/input-error.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export default function InputError({
+    message,
+    className = '',
+    ...props
+}: HTMLAttributes<HTMLParagraphElement> & { message?: string }) {
+    return message ? (
+        <p
+            {...props}
+            className={cn('text-sm text-red-600 dark:text-red-400', className)}
+        >
+            {message}
+        </p>
+    ) : null;
+}

laravel/resources/js/components/nav-footer.tsx

@@ -0,0 +1,49 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import { toUrl } from '@/lib/utils';
+import type { NavItem } from '@/types';
+
+export function NavFooter({
+    items,
+    className,
+    ...props
+}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
+    items: NavItem[];
+}) {
+    return (
+        <SidebarGroup
+            {...props}
+            className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}
+        >
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton
+                                asChild
+                                className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
+                            >
+                                <a
+                                    href={toUrl(item.href)}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    {item.icon && (
+                                        <item.icon className="h-5 w-5" />
+                                    )}
+                                    <span>{item.title}</span>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    );
+}

laravel/resources/js/components/nav-main.tsx

@@ -0,0 +1,36 @@
+import { Link } from '@inertiajs/react';
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import { useCurrentUrl } from '@/hooks/use-current-url';
+import type { NavItem } from '@/types';
+
+export function NavMain({ items = [] }: { items: NavItem[] }) {
+    const { isCurrentUrl } = useCurrentUrl();
+
+    return (
+        <SidebarGroup className="px-2 py-0">
+            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarMenu>
+                {items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton
+                            asChild
+                            isActive={isCurrentUrl(item.href)}
+                            tooltip={{ children: item.title }}
+                        >
+                            <Link href={item.href} prefetch>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                ))}
+            </SidebarMenu>
+        </SidebarGroup>
+    );
+}

laravel/resources/js/components/nav-user.tsx

@@ -0,0 +1,55 @@
+import { usePage } from '@inertiajs/react';
+import { ChevronsUpDown } from 'lucide-react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from '@/components/ui/sidebar';
+import { UserInfo } from '@/components/user-info';
+import { UserMenuContent } from '@/components/user-menu-content';
+import { useIsMobile } from '@/hooks/use-mobile';
+import type { SharedData } from '@/types';
+
+export function NavUser() {
+    const { auth } = usePage<SharedData>().props;
+    const { state } = useSidebar();
+    const isMobile = useIsMobile();
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            size="lg"
+                            className="group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent"
+                            data-test="sidebar-menu-button"
+                        >
+                            <UserInfo user={auth.user} />
+                            <ChevronsUpDown className="ml-auto size-4" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                        align="end"
+                        side={
+                            isMobile
+                                ? 'bottom'
+                                : state === 'collapsed'
+                                  ? 'left'
+                                  : 'bottom'
+                        }
+                    >
+                        <UserMenuContent user={auth.user} />
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}

laravel/resources/js/components/text-link.tsx

@@ -0,0 +1,23 @@
+import { Link } from '@inertiajs/react';
+import type { ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
+
+type Props = ComponentProps<typeof Link>;
+
+export default function TextLink({
+    className = '',
+    children,
+    ...props
+}: Props) {
+    return (
+        <Link
+            className={cn(
+                'text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </Link>
+    );
+}

laravel/resources/js/components/two-factor-recovery-codes.tsx

@@ -0,0 +1,164 @@
+import { Form } from '@inertiajs/react';
+import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { regenerateRecoveryCodes } from '@/routes/two-factor';
+import AlertError from './alert-error';
+
+type Props = {
+    recoveryCodesList: string[];
+    fetchRecoveryCodes: () => Promise<void>;
+    errors: string[];
+};
+
+export default function TwoFactorRecoveryCodes({
+    recoveryCodesList,
+    fetchRecoveryCodes,
+    errors,
+}: Props) {
+    const [codesAreVisible, setCodesAreVisible] = useState<boolean>(false);
+    const codesSectionRef = useRef<HTMLDivElement | null>(null);
+    const canRegenerateCodes = recoveryCodesList.length > 0 && codesAreVisible;
+
+    const toggleCodesVisibility = useCallback(async () => {
+        if (!codesAreVisible && !recoveryCodesList.length) {
+            await fetchRecoveryCodes();
+        }
+
+        setCodesAreVisible(!codesAreVisible);
+
+        if (!codesAreVisible) {
+            setTimeout(() => {
+                codesSectionRef.current?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            });
+        }
+    }, [codesAreVisible, recoveryCodesList.length, fetchRecoveryCodes]);
+
+    useEffect(() => {
+        if (!recoveryCodesList.length) {
+            fetchRecoveryCodes();
+        }
+    }, [recoveryCodesList.length, fetchRecoveryCodes]);
+
+    const RecoveryCodeIconComponent = codesAreVisible ? EyeOff : Eye;
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex gap-3">
+                    <LockKeyhole className="size-4" aria-hidden="true" />
+                    2FA Recovery Codes
+                </CardTitle>
+                <CardDescription>
+                    Recovery codes let you regain access if you lose your 2FA
+                    device. Store them in a secure password manager.
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <div className="flex flex-col gap-3 select-none sm:flex-row sm:items-center sm:justify-between">
+                    <Button
+                        onClick={toggleCodesVisibility}
+                        className="w-fit"
+                        aria-expanded={codesAreVisible}
+                        aria-controls="recovery-codes-section"
+                    >
+                        <RecoveryCodeIconComponent
+                            className="size-4"
+                            aria-hidden="true"
+                        />
+                        {codesAreVisible ? 'Hide' : 'View'} Recovery Codes
+                    </Button>
+
+                    {canRegenerateCodes && (
+                        <Form
+                            {...regenerateRecoveryCodes.form()}
+                            options={{ preserveScroll: true }}
+                            onSuccess={fetchRecoveryCodes}
+                        >
+                            {({ processing }) => (
+                                <Button
+                                    variant="secondary"
+                                    type="submit"
+                                    disabled={processing}
+                                    aria-describedby="regenerate-warning"
+                                >
+                                    <RefreshCw /> Regenerate Codes
+                                </Button>
+                            )}
+                        </Form>
+                    )}
+                </div>
+                <div
+                    id="recovery-codes-section"
+                    className={`relative overflow-hidden transition-all duration-300 ${codesAreVisible ? 'h-auto opacity-100' : 'h-0 opacity-0'}`}
+                    aria-hidden={!codesAreVisible}
+                >
+                    <div className="mt-3 space-y-3">
+                        {errors?.length ? (
+                            <AlertError errors={errors} />
+                        ) : (
+                            <>
+                                <div
+                                    ref={codesSectionRef}
+                                    className="grid gap-1 rounded-lg bg-muted p-4 font-mono text-sm"
+                                    role="list"
+                                    aria-label="Recovery codes"
+                                >
+                                    {recoveryCodesList.length ? (
+                                        recoveryCodesList.map((code, index) => (
+                                            <div
+                                                key={index}
+                                                role="listitem"
+                                                className="select-text"
+                                            >
+                                                {code}
+                                            </div>
+                                        ))
+                                    ) : (
+                                        <div
+                                            className="space-y-2"
+                                            aria-label="Loading recovery codes"
+                                        >
+                                            {Array.from(
+                                                { length: 8 },
+                                                (_, index) => (
+                                                    <div
+                                                        key={index}
+                                                        className="h-4 animate-pulse rounded bg-muted-foreground/20"
+                                                        aria-hidden="true"
+                                                    />
+                                                ),
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div className="text-xs text-muted-foreground select-none">
+                                    <p id="regenerate-warning">
+                                        Each recovery code can be used once to
+                                        access your account and will be removed
+                                        after use. If you need more, click{' '}
+                                        <span className="font-bold">
+                                            Regenerate Codes
+                                        </span>{' '}
+                                        above.
+                                    </p>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

laravel/resources/js/components/two-factor-setup-modal.tsx

@@ -0,0 +1,347 @@
+import { Form } from '@inertiajs/react';
+import { REGEXP_ONLY_DIGITS } from 'input-otp';
+import { Check, Copy, ScanLine } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { useAppearance } from '@/hooks/use-appearance';
+import { useClipboard } from '@/hooks/use-clipboard';
+import { OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth';
+import { confirm } from '@/routes/two-factor';
+import AlertError from './alert-error';
+import { Spinner } from './ui/spinner';
+
+function GridScanIcon() {
+    return (
+        <div className="mb-3 rounded-full border border-border bg-card p-0.5 shadow-sm">
+            <div className="relative overflow-hidden rounded-full border border-border bg-muted p-2.5">
+                <div className="absolute inset-0 grid grid-cols-5 opacity-50">
+                    {Array.from({ length: 5 }, (_, i) => (
+                        <div
+                            key={`col-${i + 1}`}
+                            className="border-r border-border last:border-r-0"
+                        />
+                    ))}
+                </div>
+                <div className="absolute inset-0 grid grid-rows-5 opacity-50">
+                    {Array.from({ length: 5 }, (_, i) => (
+                        <div
+                            key={`row-${i + 1}`}
+                            className="border-b border-border last:border-b-0"
+                        />
+                    ))}
+                </div>
+                <ScanLine className="relative z-20 size-6 text-foreground" />
+            </div>
+        </div>
+    );
+}
+
+function TwoFactorSetupStep({
+    qrCodeSvg,
+    manualSetupKey,
+    buttonText,
+    onNextStep,
+    errors,
+}: {
+    qrCodeSvg: string | null;
+    manualSetupKey: string | null;
+    buttonText: string;
+    onNextStep: () => void;
+    errors: string[];
+}) {
+    const { resolvedAppearance } = useAppearance();
+    const [copiedText, copy] = useClipboard();
+    const IconComponent = copiedText === manualSetupKey ? Check : Copy;
+
+    return (
+        <>
+            {errors?.length ? (
+                <AlertError errors={errors} />
+            ) : (
+                <>
+                    <div className="mx-auto flex max-w-md overflow-hidden">
+                        <div className="mx-auto aspect-square w-64 rounded-lg border border-border">
+                            <div className="z-10 flex h-full w-full items-center justify-center p-5">
+                                {qrCodeSvg ? (
+                                    <div
+                                        className="aspect-square w-full rounded-lg bg-white p-2 [&_svg]:size-full"
+                                        dangerouslySetInnerHTML={{
+                                            __html: qrCodeSvg,
+                                        }}
+                                        style={{
+                                            filter:
+                                                resolvedAppearance === 'dark'
+                                                    ? 'invert(1) brightness(1.5)'
+                                                    : undefined,
+                                        }}
+                                    />
+                                ) : (
+                                    <Spinner />
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex w-full space-x-5">
+                        <Button className="w-full" onClick={onNextStep}>
+                            {buttonText}
+                        </Button>
+                    </div>
+
+                    <div className="relative flex w-full items-center justify-center">
+                        <div className="absolute inset-0 top-1/2 h-px w-full bg-border" />
+                        <span className="relative bg-card px-2 py-1">
+                            or, enter the code manually
+                        </span>
+                    </div>
+
+                    <div className="flex w-full space-x-2">
+                        <div className="flex w-full items-stretch overflow-hidden rounded-xl border border-border">
+                            {!manualSetupKey ? (
+                                <div className="flex h-full w-full items-center justify-center bg-muted p-3">
+                                    <Spinner />
+                                </div>
+                            ) : (
+                                <>
+                                    <input
+                                        type="text"
+                                        readOnly
+                                        value={manualSetupKey}
+                                        className="h-full w-full bg-background p-3 text-foreground outline-none"
+                                    />
+                                    <button
+                                        onClick={() => copy(manualSetupKey)}
+                                        className="border-l border-border px-3 hover:bg-muted"
+                                    >
+                                        <IconComponent className="w-4" />
+                                    </button>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                </>
+            )}
+        </>
+    );
+}
+
+function TwoFactorVerificationStep({
+    onClose,
+    onBack,
+}: {
+    onClose: () => void;
+    onBack: () => void;
+}) {
+    const [code, setCode] = useState<string>('');
+    const pinInputContainerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        setTimeout(() => {
+            pinInputContainerRef.current?.querySelector('input')?.focus();
+        }, 0);
+    }, []);
+
+    return (
+        <Form
+            {...confirm.form()}
+            onSuccess={() => onClose()}
+            resetOnError
+            resetOnSuccess
+        >
+            {({
+                processing,
+                errors,
+            }: {
+                processing: boolean;
+                errors?: { confirmTwoFactorAuthentication?: { code?: string } };
+            }) => (
+                <>
+                    <div
+                        ref={pinInputContainerRef}
+                        className="relative w-full space-y-3"
+                    >
+                        <div className="flex w-full flex-col items-center space-y-3 py-2">
+                            <InputOTP
+                                id="otp"
+                                name="code"
+                                maxLength={OTP_MAX_LENGTH}
+                                onChange={setCode}
+                                disabled={processing}
+                                pattern={REGEXP_ONLY_DIGITS}
+                            >
+                                <InputOTPGroup>
+                                    {Array.from(
+                                        { length: OTP_MAX_LENGTH },
+                                        (_, index) => (
+                                            <InputOTPSlot
+                                                key={index}
+                                                index={index}
+                                            />
+                                        ),
+                                    )}
+                                </InputOTPGroup>
+                            </InputOTP>
+                            <InputError
+                                message={
+                                    errors?.confirmTwoFactorAuthentication?.code
+                                }
+                            />
+                        </div>
+
+                        <div className="flex w-full space-x-5">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                className="flex-1"
+                                onClick={onBack}
+                                disabled={processing}
+                            >
+                                Back
+                            </Button>
+                            <Button
+                                type="submit"
+                                className="flex-1"
+                                disabled={
+                                    processing || code.length < OTP_MAX_LENGTH
+                                }
+                            >
+                                Confirm
+                            </Button>
+                        </div>
+                    </div>
+                </>
+            )}
+        </Form>
+    );
+}
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    requiresConfirmation: boolean;
+    twoFactorEnabled: boolean;
+    qrCodeSvg: string | null;
+    manualSetupKey: string | null;
+    clearSetupData: () => void;
+    fetchSetupData: () => Promise<void>;
+    errors: string[];
+};
+
+export default function TwoFactorSetupModal({
+    isOpen,
+    onClose,
+    requiresConfirmation,
+    twoFactorEnabled,
+    qrCodeSvg,
+    manualSetupKey,
+    clearSetupData,
+    fetchSetupData,
+    errors,
+}: Props) {
+    const [showVerificationStep, setShowVerificationStep] =
+        useState<boolean>(false);
+
+    const modalConfig = useMemo<{
+        title: string;
+        description: string;
+        buttonText: string;
+    }>(() => {
+        if (twoFactorEnabled) {
+            return {
+                title: 'Two-Factor Authentication Enabled',
+                description:
+                    'Two-factor authentication is now enabled. Scan the QR code or enter the setup key in your authenticator app.',
+                buttonText: 'Close',
+            };
+        }
+
+        if (showVerificationStep) {
+            return {
+                title: 'Verify Authentication Code',
+                description:
+                    'Enter the 6-digit code from your authenticator app',
+                buttonText: 'Continue',
+            };
+        }
+
+        return {
+            title: 'Enable Two-Factor Authentication',
+            description:
+                'To finish enabling two-factor authentication, scan the QR code or enter the setup key in your authenticator app',
+            buttonText: 'Continue',
+        };
+    }, [twoFactorEnabled, showVerificationStep]);
+
+    const handleModalNextStep = useCallback(() => {
+        if (requiresConfirmation) {
+            setShowVerificationStep(true);
+            return;
+        }
+
+        clearSetupData();
+        onClose();
+    }, [requiresConfirmation, clearSetupData, onClose]);
+
+    const resetModalState = useCallback(() => {
+        setShowVerificationStep(false);
+
+        if (twoFactorEnabled) {
+            clearSetupData();
+        }
+    }, [twoFactorEnabled, clearSetupData]);
+
+    useEffect(() => {
+        if (isOpen && !qrCodeSvg) {
+            fetchSetupData();
+        }
+    }, [isOpen, qrCodeSvg, fetchSetupData]);
+
+    const handleClose = useCallback(() => {
+        resetModalState();
+        onClose();
+    }, [onClose, resetModalState]);
+
+    return (
+        <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader className="flex items-center justify-center">
+                    <GridScanIcon />
+                    <DialogTitle>{modalConfig.title}</DialogTitle>
+                    <DialogDescription className="text-center">
+                        {modalConfig.description}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="flex flex-col items-center space-y-5">
+                    {showVerificationStep ? (
+                        <TwoFactorVerificationStep
+                            onClose={onClose}
+                            onBack={() => setShowVerificationStep(false)}
+                        />
+                    ) : (
+                        <TwoFactorSetupStep
+                            qrCodeSvg={qrCodeSvg}
+                            manualSetupKey={manualSetupKey}
+                            buttonText={modalConfig.buttonText}
+                            onNextStep={handleModalNextStep}
+                            errors={errors}
+                        />
+                    )}
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}

laravel/resources/js/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

laravel/resources/js/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

laravel/resources/js/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

laravel/resources/js/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

laravel/resources/js/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

laravel/resources/js/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

laravel/resources/js/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

laravel/resources/js/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

laravel/resources/js/components/ui/dialog.tsx

@@ -0,0 +1,133 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

laravel/resources/js/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

laravel/resources/js/components/ui/icon.tsx

@@ -0,0 +1,14 @@
+import type { LucideIcon } from 'lucide-react';
+
+interface IconProps {
+    iconNode?: LucideIcon | null;
+    className?: string;
+}
+
+export function Icon({ iconNode: IconComponent, className }: IconProps) {
+    if (!IconComponent) {
+        return null;
+    }
+
+    return <IconComponent className={className} />;
+}

laravel/resources/js/components/ui/input-otp.tsx

@@ -0,0 +1,69 @@
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

laravel/resources/js/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

laravel/resources/js/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

laravel/resources/js/components/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-accent/50 data-[state=open]:bg-accent/50 data-[active=true]:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

laravel/resources/js/components/ui/placeholder-pattern.tsx

@@ -0,0 +1,20 @@
+import { useId } from 'react';
+
+interface PlaceholderPatternProps {
+    className?: string;
+}
+
+export function PlaceholderPattern({ className }: PlaceholderPatternProps) {
+    const patternId = useId();
+
+    return (
+        <svg className={className} fill="none">
+            <defs>
+                <pattern id={patternId} x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+                    <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+                </pattern>
+            </defs>
+            <rect stroke="none" fill={`url(#${patternId})`} width="100%" height="100%"></rect>
+        </svg>
+    );
+}

laravel/resources/js/components/ui/select.tsx

@@ -0,0 +1,179 @@
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>span]:line-clamp-1",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

laravel/resources/js/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

laravel/resources/js/components/ui/sheet.tsx

@@ -0,0 +1,137 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

laravel/resources/js/components/ui/sidebar.tsx

@@ -0,0 +1,722 @@
+import { Slot } from "@radix-ui/react-slot"
+import type { VariantProps} from "class-variance-authority";
+import { cva } from "class-variance-authority"
+import { PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContext>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetHeader className="sr-only">
+          <SheetTitle>Sidebar</SheetTitle>
+          <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+        </SheetHeader>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        className={cn(
+          "relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar, isMobile, state } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      {isMobile || state === "collapsed" ? <PanelLeftOpenIcon /> : <PanelLeftCloseIcon />}
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex max-w-full min-h-svh flex-1 flex-col",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:select-none group-data-[collapsible=icon]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+
+  // wrapping in useState to ensure the width is stable across renders
+  // also ensures we have a stable reference to the style object
+  const [skeletonStyle] = React.useState(() => (
+      {
+        "--skeleton-width": `${Math.floor(Math.random() * 40) + 50}%` // Random width between 50 to 90%.
+    } as React.CSSProperties
+  ))
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={skeletonStyle}
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

laravel/resources/js/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

laravel/resources/js/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

laravel/resources/js/components/ui/toggle-group.tsx

@@ -0,0 +1,71 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

laravel/resources/js/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

laravel/resources/js/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-w-sm rounded-md px-3 py-1.5 text-xs",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

laravel/resources/js/components/user-info.tsx

@@ -0,0 +1,32 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useInitials } from '@/hooks/use-initials';
+import type { User } from '@/types';
+
+export function UserInfo({
+    user,
+    showEmail = false,
+}: {
+    user: User;
+    showEmail?: boolean;
+}) {
+    const getInitials = useInitials();
+
+    return (
+        <>
+            <Avatar className="h-8 w-8 overflow-hidden rounded-full">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
+                    {getInitials(user.name)}
+                </AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                {showEmail && (
+                    <span className="truncate text-xs text-muted-foreground">
+                        {user.email}
+                    </span>
+                )}
+            </div>
+        </>
+    );
+}

laravel/resources/js/components/user-menu-content.tsx

@@ -0,0 +1,63 @@
+import { Link, router } from '@inertiajs/react';
+import { LogOut, Settings } from 'lucide-react';
+import {
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { UserInfo } from '@/components/user-info';
+import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
+import { logout } from '@/routes';
+import { edit } from '@/routes/profile';
+import type { User } from '@/types';
+
+type Props = {
+    user: User;
+};
+
+export function UserMenuContent({ user }: Props) {
+    const cleanup = useMobileNavigation();
+
+    const handleLogout = () => {
+        cleanup();
+        router.flushAll();
+    };
+
+    return (
+        <>
+            <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                    <UserInfo user={user} showEmail={true} />
+                </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+                <DropdownMenuItem asChild>
+                    <Link
+                        className="block w-full cursor-pointer"
+                        href={edit()}
+                        prefetch
+                        onClick={cleanup}
+                    >
+                        <Settings className="mr-2" />
+                        Settings
+                    </Link>
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+                <Link
+                    className="block w-full cursor-pointer"
+                    href={logout()}
+                    as="button"
+                    onClick={handleLogout}
+                    data-test="logout-button"
+                >
+                    <LogOut className="mr-2" />
+                    Log out
+                </Link>
+            </DropdownMenuItem>
+        </>
+    );
+}

laravel/resources/js/hooks/use-appearance.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
+
+export type ResolvedAppearance = 'light' | 'dark';
+export type Appearance = ResolvedAppearance | 'system';
+
+export type UseAppearanceReturn = {
+    readonly appearance: Appearance;
+    readonly resolvedAppearance: ResolvedAppearance;
+    readonly updateAppearance: (mode: Appearance) => void;
+};
+
+const listeners = new Set<() => void>();
+let currentAppearance: Appearance = 'system';
+
+const prefersDark = (): boolean => {
+    if (typeof window === 'undefined') return false;
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const setCookie = (name: string, value: string, days = 365): void => {
+    if (typeof document === 'undefined') return;
+    const maxAge = days * 24 * 60 * 60;
+    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
+
+const getStoredAppearance = (): Appearance => {
+    if (typeof window === 'undefined') return 'system';
+
+    return (localStorage.getItem('appearance') as Appearance) || 'system';
+};
+
+const isDarkMode = (appearance: Appearance): boolean => {
+    return appearance === 'dark' || (appearance === 'system' && prefersDark());
+};
+
+const applyTheme = (appearance: Appearance): void => {
+    if (typeof document === 'undefined') return;
+
+    const isDark = isDarkMode(appearance);
+
+    document.documentElement.classList.toggle('dark', isDark);
+    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+};
+
+const subscribe = (callback: () => void) => {
+    listeners.add(callback);
+
+    return () => listeners.delete(callback);
+};
+
+const notify = (): void => listeners.forEach((listener) => listener());
+
+const mediaQuery = (): MediaQueryList | null => {
+    if (typeof window === 'undefined') return null;
+
+    return window.matchMedia('(prefers-color-scheme: dark)');
+};
+
+const handleSystemThemeChange = (): void => {
+    applyTheme(currentAppearance);
+    notify();
+};
+
+export function initializeTheme(): void {
+    if (typeof window === 'undefined') return;
+
+    if (!localStorage.getItem('appearance')) {
+        localStorage.setItem('appearance', 'system');
+        setCookie('appearance', 'system');
+    }
+
+    currentAppearance = getStoredAppearance();
+    applyTheme(currentAppearance);
+
+    // Set up system theme change listener
+    mediaQuery()?.addEventListener('change', handleSystemThemeChange);
+}
+
+export function useAppearance(): UseAppearanceReturn {
+    const appearance: Appearance = useSyncExternalStore(
+        subscribe,
+        () => currentAppearance,
+        () => 'system',
+    );
+
+    const resolvedAppearance: ResolvedAppearance = useMemo(
+        () => (isDarkMode(appearance) ? 'dark' : 'light'),
+        [appearance],
+    );
+
+    const updateAppearance = useCallback((mode: Appearance): void => {
+        currentAppearance = mode;
+
+        // Store in localStorage for client-side persistence...
+        localStorage.setItem('appearance', mode);
+
+        // Store in cookie for SSR...
+        setCookie('appearance', mode);
+
+        applyTheme(mode);
+        notify();
+    }, []);
+
+    return { appearance, resolvedAppearance, updateAppearance } as const;
+}

laravel/resources/js/hooks/use-clipboard.ts

@@ -0,0 +1,32 @@
+// Credit: https://usehooks-ts.com/
+import { useCallback, useState } from 'react';
+
+export type CopiedValue = string | null;
+export type CopyFn = (text: string) => Promise<boolean>;
+export type UseClipboardReturn = [CopiedValue, CopyFn];
+
+export function useClipboard(): UseClipboardReturn {
+    const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+    const copy: CopyFn = useCallback(async (text) => {
+        if (!navigator?.clipboard) {
+            console.warn('Clipboard not supported');
+
+            return false;
+        }
+
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopiedText(text);
+
+            return true;
+        } catch (error) {
+            console.warn('Copy failed', error);
+            setCopiedText(null);
+
+            return false;
+        }
+    }, []);
+
+    return [copiedText, copy];
+}

laravel/resources/js/hooks/use-current-url.ts

@@ -0,0 +1,58 @@
+import type { InertiaLinkProps } from '@inertiajs/react';
+import { usePage } from '@inertiajs/react';
+import { toUrl } from '@/lib/utils';
+
+export type IsCurrentUrlFn = (
+    urlToCheck: NonNullable<InertiaLinkProps['href']>,
+    currentUrl?: string,
+) => boolean;
+
+export type WhenCurrentUrlFn = <TIfTrue, TIfFalse = null>(
+    urlToCheck: NonNullable<InertiaLinkProps['href']>,
+    ifTrue: TIfTrue,
+    ifFalse?: TIfFalse,
+) => TIfTrue | TIfFalse;
+
+export type UseCurrentUrlReturn = {
+    currentUrl: string;
+    isCurrentUrl: IsCurrentUrlFn;
+    whenCurrentUrl: WhenCurrentUrlFn;
+};
+
+export function useCurrentUrl(): UseCurrentUrlReturn {
+    const page = usePage();
+    const currentUrlPath = new URL(page.url, window?.location.origin).pathname;
+
+    const isCurrentUrl: IsCurrentUrlFn = (
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        currentUrl?: string,
+    ) => {
+        const urlToCompare = currentUrl ?? currentUrlPath;
+        const urlString = toUrl(urlToCheck);
+
+        if (!urlString.startsWith('http')) {
+            return urlString === urlToCompare;
+        }
+
+        try {
+            const absoluteUrl = new URL(urlString);
+            return absoluteUrl.pathname === urlToCompare;
+        } catch {
+            return false;
+        }
+    };
+
+    const whenCurrentUrl: WhenCurrentUrlFn = <TIfTrue, TIfFalse = null>(
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        ifTrue: TIfTrue,
+        ifFalse: TIfFalse = null as TIfFalse,
+    ): TIfTrue | TIfFalse => {
+        return isCurrentUrl(urlToCheck) ? ifTrue : ifFalse;
+    };
+
+    return {
+        currentUrl: currentUrlPath,
+        isCurrentUrl,
+        whenCurrentUrl,
+    };
+}

laravel/resources/js/hooks/use-initials.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+
+export type GetInitialsFn = (fullName: string) => string;
+
+export function useInitials(): GetInitialsFn {
+    return useCallback((fullName: string): string => {
+        const names = fullName.trim().split(' ');
+
+        if (names.length === 0) return '';
+        if (names.length === 1) return names[0].charAt(0).toUpperCase();
+
+        const firstInitial = names[0].charAt(0);
+        const lastInitial = names[names.length - 1].charAt(0);
+
+        return `${firstInitial}${lastInitial}`.toUpperCase();
+    }, []);
+}

laravel/resources/js/hooks/use-mobile-navigation.ts

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+
+export type CleanupFn = () => void;
+
+export function useMobileNavigation(): CleanupFn {
+    return useCallback(() => {
+        // Remove pointer-events style from body...
+        document.body.style.removeProperty('pointer-events');
+    }, []);
+}

laravel/resources/js/hooks/use-mobile.tsx

@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+const mql =
+    typeof window === 'undefined'
+        ? undefined
+        : window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+function mediaQueryListener(callback: (event: MediaQueryListEvent) => void) {
+    if (!mql) {
+        return () => {};
+    }
+
+    mql.addEventListener('change', callback);
+
+    return () => {
+        mql.removeEventListener('change', callback);
+    };
+}
+
+function isSmallerThanBreakpoint(): boolean {
+    return mql?.matches ?? false;
+}
+
+function getServerSnapshot(): boolean {
+    return false;
+}
+
+export function useIsMobile(): boolean {
+    return useSyncExternalStore(
+        mediaQueryListener,
+        isSmallerThanBreakpoint,
+        getServerSnapshot,
+    );
+}

laravel/resources/js/hooks/use-two-factor-auth.ts

@@ -0,0 +1,110 @@
+import { useCallback, useMemo, useState } from 'react';
+import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
+import type { TwoFactorSecretKey, TwoFactorSetupData } from '@/types';
+
+export type UseTwoFactorAuthReturn = {
+    qrCodeSvg: string | null;
+    manualSetupKey: string | null;
+    recoveryCodesList: string[];
+    hasSetupData: boolean;
+    errors: string[];
+    clearErrors: () => void;
+    clearSetupData: () => void;
+    fetchQrCode: () => Promise<void>;
+    fetchSetupKey: () => Promise<void>;
+    fetchSetupData: () => Promise<void>;
+    fetchRecoveryCodes: () => Promise<void>;
+};
+
+export const OTP_MAX_LENGTH = 6;
+
+const fetchJson = async <T>(url: string): Promise<T> => {
+    const response = await fetch(url, {
+        headers: { Accept: 'application/json' },
+    });
+
+    if (!response.ok) {
+        throw new Error(`Failed to fetch: ${response.status}`);
+    }
+
+    return response.json();
+};
+
+export const useTwoFactorAuth = (): UseTwoFactorAuthReturn => {
+    const [qrCodeSvg, setQrCodeSvg] = useState<string | null>(null);
+    const [manualSetupKey, setManualSetupKey] = useState<string | null>(null);
+    const [recoveryCodesList, setRecoveryCodesList] = useState<string[]>([]);
+    const [errors, setErrors] = useState<string[]>([]);
+
+    const hasSetupData = useMemo<boolean>(
+        () => qrCodeSvg !== null && manualSetupKey !== null,
+        [qrCodeSvg, manualSetupKey],
+    );
+
+    const fetchQrCode = useCallback(async (): Promise<void> => {
+        try {
+            const { svg } = await fetchJson<TwoFactorSetupData>(qrCode.url());
+            setQrCodeSvg(svg);
+        } catch {
+            setErrors((prev) => [...prev, 'Failed to fetch QR code']);
+            setQrCodeSvg(null);
+        }
+    }, []);
+
+    const fetchSetupKey = useCallback(async (): Promise<void> => {
+        try {
+            const { secretKey: key } = await fetchJson<TwoFactorSecretKey>(
+                secretKey.url(),
+            );
+            setManualSetupKey(key);
+        } catch {
+            setErrors((prev) => [...prev, 'Failed to fetch a setup key']);
+            setManualSetupKey(null);
+        }
+    }, []);
+
+    const clearErrors = useCallback((): void => {
+        setErrors([]);
+    }, []);
+
+    const clearSetupData = useCallback((): void => {
+        setManualSetupKey(null);
+        setQrCodeSvg(null);
+        clearErrors();
+    }, [clearErrors]);
+
+    const fetchRecoveryCodes = useCallback(async (): Promise<void> => {
+        try {
+            clearErrors();
+            const codes = await fetchJson<string[]>(recoveryCodes.url());
+            setRecoveryCodesList(codes);
+        } catch {
+            setErrors((prev) => [...prev, 'Failed to fetch recovery codes']);
+            setRecoveryCodesList([]);
+        }
+    }, [clearErrors]);
+
+    const fetchSetupData = useCallback(async (): Promise<void> => {
+        try {
+            clearErrors();
+            await Promise.all([fetchQrCode(), fetchSetupKey()]);
+        } catch {
+            setQrCodeSvg(null);
+            setManualSetupKey(null);
+        }
+    }, [clearErrors, fetchQrCode, fetchSetupKey]);
+
+    return {
+        qrCodeSvg,
+        manualSetupKey,
+        recoveryCodesList,
+        hasSetupData,
+        errors,
+        clearErrors,
+        clearSetupData,
+        fetchQrCode,
+        fetchSetupKey,
+        fetchSetupData,
+        fetchRecoveryCodes,
+    };
+};

laravel/resources/js/layouts/app-layout.tsx

@@ -0,0 +1,8 @@
+import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
+import type { AppLayoutProps } from '@/types';
+
+export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => (
+    <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
+        {children}
+    </AppLayoutTemplate>
+);

laravel/resources/js/layouts/app/app-header-layout.tsx

@@ -0,0 +1,16 @@
+import { AppContent } from '@/components/app-content';
+import { AppHeader } from '@/components/app-header';
+import { AppShell } from '@/components/app-shell';
+import type { AppLayoutProps } from '@/types';
+
+export default function AppHeaderLayout({
+    children,
+    breadcrumbs,
+}: AppLayoutProps) {
+    return (
+        <AppShell>
+            <AppHeader breadcrumbs={breadcrumbs} />
+            <AppContent>{children}</AppContent>
+        </AppShell>
+    );
+}

laravel/resources/js/layouts/app/app-sidebar-layout.tsx

@@ -0,0 +1,20 @@
+import { AppContent } from '@/components/app-content';
+import { AppShell } from '@/components/app-shell';
+import { AppSidebar } from '@/components/app-sidebar';
+import { AppSidebarHeader } from '@/components/app-sidebar-header';
+import type { AppLayoutProps } from '@/types';
+
+export default function AppSidebarLayout({
+    children,
+    breadcrumbs = [],
+}: AppLayoutProps) {
+    return (
+        <AppShell variant="sidebar">
+            <AppSidebar />
+            <AppContent variant="sidebar" className="overflow-x-hidden">
+                <AppSidebarHeader breadcrumbs={breadcrumbs} />
+                {children}
+            </AppContent>
+        </AppShell>
+    );
+}

laravel/resources/js/layouts/auth-layout.tsx

@@ -0,0 +1,18 @@
+import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
+
+export default function AuthLayout({
+    children,
+    title,
+    description,
+    ...props
+}: {
+    children: React.ReactNode;
+    title: string;
+    description: string;
+}) {
+    return (
+        <AuthLayoutTemplate title={title} description={description} {...props}>
+            {children}
+        </AuthLayoutTemplate>
+    );
+}

laravel/resources/js/layouts/auth/auth-card-layout.tsx

@@ -0,0 +1,48 @@
+import { Link } from '@inertiajs/react';
+import type { PropsWithChildren } from 'react';
+import AppLogoIcon from '@/components/app-logo-icon';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { home } from '@/routes';
+
+export default function AuthCardLayout({
+    children,
+    title,
+    description,
+}: PropsWithChildren<{
+    name?: string;
+    title?: string;
+    description?: string;
+}>) {
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+            <div className="flex w-full max-w-md flex-col gap-6">
+                <Link
+                    href={home()}
+                    className="flex items-center gap-2 self-center font-medium"
+                >
+                    <div className="flex h-9 w-9 items-center justify-center">
+                        <AppLogoIcon className="size-9 fill-current text-black dark:text-white" />
+                    </div>
+                </Link>
+
+                <div className="flex flex-col gap-6">
+                    <Card className="rounded-xl">
+                        <CardHeader className="px-10 pt-8 pb-0 text-center">
+                            <CardTitle className="text-xl">{title}</CardTitle>
+                            <CardDescription>{description}</CardDescription>
+                        </CardHeader>
+                        <CardContent className="px-10 py-8">
+                            {children}
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}

laravel/resources/js/layouts/auth/auth-simple-layout.tsx

@@ -0,0 +1,38 @@
+import { Link } from '@inertiajs/react';
+import AppLogoIcon from '@/components/app-logo-icon';
+import { home } from '@/routes';
+import type { AuthLayoutProps } from '@/types';
+
+export default function AuthSimpleLayout({
+    children,
+    title,
+    description,
+}: AuthLayoutProps) {
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+            <div className="w-full max-w-sm">
+                <div className="flex flex-col gap-8">
+                    <div className="flex flex-col items-center gap-4">
+                        <Link
+                            href={home()}
+                            className="flex flex-col items-center gap-2 font-medium"
+                        >
+                            <div className="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
+                                <AppLogoIcon className="size-9 fill-current text-[var(--foreground)] dark:text-white" />
+                            </div>
+                            <span className="sr-only">{title}</span>
+                        </Link>
+
+                        <div className="space-y-2 text-center">
+                            <h1 className="text-xl font-medium">{title}</h1>
+                            <p className="text-center text-sm text-muted-foreground">
+                                {description}
+                            </p>
+                        </div>
+                    </div>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

laravel/resources/js/layouts/auth/auth-split-layout.tsx

@@ -0,0 +1,44 @@
+import { Link, usePage } from '@inertiajs/react';
+import AppLogoIcon from '@/components/app-logo-icon';
+import { home } from '@/routes';
+import type { AuthLayoutProps, SharedData } from '@/types';
+
+export default function AuthSplitLayout({
+    children,
+    title,
+    description,
+}: AuthLayoutProps) {
+    const { name } = usePage<SharedData>().props;
+
+    return (
+        <div className="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
+            <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
+                <div className="absolute inset-0 bg-zinc-900" />
+                <Link
+                    href={home()}
+                    className="relative z-20 flex items-center text-lg font-medium"
+                >
+                    <AppLogoIcon className="mr-2 size-8 fill-current text-white" />
+                    {name}
+                </Link>
+            </div>
+            <div className="w-full lg:p-8">
+                <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+                    <Link
+                        href={home()}
+                        className="relative z-20 flex items-center justify-center lg:hidden"
+                    >
+                        <AppLogoIcon className="h-10 fill-current text-black sm:h-12" />
+                    </Link>
+                    <div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
+                        <h1 className="text-xl font-medium">{title}</h1>
+                        <p className="text-sm text-balance text-muted-foreground">
+                            {description}
+                        </p>
+                    </div>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

laravel/resources/js/layouts/settings/layout.tsx

@@ -0,0 +1,89 @@
+import { Link } from '@inertiajs/react';
+import type { PropsWithChildren } from 'react';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { useCurrentUrl } from '@/hooks/use-current-url';
+import { cn, toUrl } from '@/lib/utils';
+import { edit as editAppearance } from '@/routes/appearance';
+import { edit } from '@/routes/profile';
+import { show } from '@/routes/two-factor';
+import { edit as editPassword } from '@/routes/user-password';
+import type { NavItem } from '@/types';
+
+const sidebarNavItems: NavItem[] = [
+    {
+        title: 'Profile',
+        href: edit(),
+        icon: null,
+    },
+    {
+        title: 'Password',
+        href: editPassword(),
+        icon: null,
+    },
+    {
+        title: 'Two-Factor Auth',
+        href: show(),
+        icon: null,
+    },
+    {
+        title: 'Appearance',
+        href: editAppearance(),
+        icon: null,
+    },
+];
+
+export default function SettingsLayout({ children }: PropsWithChildren) {
+    const { isCurrentUrl } = useCurrentUrl();
+
+    // When server-side rendering, we only render the layout on the client...
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return (
+        <div className="px-4 py-6">
+            <Heading
+                title="Settings"
+                description="Manage your profile and account settings"
+            />
+
+            <div className="flex flex-col lg:flex-row lg:space-x-12">
+                <aside className="w-full max-w-xl lg:w-48">
+                    <nav
+                        className="flex flex-col space-y-1 space-x-0"
+                        aria-label="Settings"
+                    >
+                        {sidebarNavItems.map((item, index) => (
+                            <Button
+                                key={`${toUrl(item.href)}-${index}`}
+                                size="sm"
+                                variant="ghost"
+                                asChild
+                                className={cn('w-full justify-start', {
+                                    'bg-muted': isCurrentUrl(item.href),
+                                })}
+                            >
+                                <Link href={item.href}>
+                                    {item.icon && (
+                                        <item.icon className="h-4 w-4" />
+                                    )}
+                                    {item.title}
+                                </Link>
+                            </Button>
+                        ))}
+                    </nav>
+                </aside>
+
+                <Separator className="my-6 lg:hidden" />
+
+                <div className="flex-1 md:max-w-2xl">
+                    <section className="max-w-xl space-y-12">
+                        {children}
+                    </section>
+                </div>
+            </div>
+        </div>
+    );
+}

laravel/resources/js/lib/utils.ts

@@ -0,0 +1,11 @@
+import type { InertiaLinkProps } from '@inertiajs/react';
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+export function toUrl(url: NonNullable<InertiaLinkProps['href']>): string {
+    return typeof url === 'string' ? url : url.url;
+}

laravel/resources/js/pages/Articles/Show.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import type { Article, Comment } from '@/types/article';
+
+export default function Show({ articleId }: { articleId: number }) {
+    const [article, setArticle] = useState<Article | null>(null);
+    const [form, setForm] = useState({ author_name: '', content: '' });
+
+    // загрузка статьи
+    useEffect(() => {
+        fetch(`/api/articles/${articleId}`)
+            .then((res) => res.json())
+            .then((res) => setArticle(res.data)) // <-- берём data
+            .catch(console.error);
+    }, [articleId]);
+
+    const submit = async () => {
+        if (!form.author_name || !form.content) return;
+
+        const res = await fetch(`/api/articles/${articleId}/comments`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(form),
+        });
+
+        if (!res.ok) return;
+
+        const result = await res.json();
+        const newComment: Comment = result.data; // <-- API возвращает CommentResource
+
+        setArticle((prev) =>
+            prev ? { ...prev, comments: [...prev.comments, newComment] } : prev,
+        );
+
+        setForm({ author_name: '', content: '' });
+    };
+
+    if (!article) return <div className="p-6">Статья не найдена</div>;
+
+    return (
+        <div className="space-y-6 p-6">
+            <h1 className="text-2xl font-bold">{article.title}</h1>
+            <p className="whitespace-pre-line text-gray-700">
+                {article.content}
+            </p>
+
+            <section className="space-y-3">
+                <h2 className="text-xl font-semibold">Комментарии</h2>
+                {article.comments.map((c) => (
+                    <div key={c.id} className="rounded border p-3">
+                        <div className="text-sm text-gray-500">
+                            {c.author_name}
+                        </div>
+                        <div>{c.content}</div>
+                    </div>
+                ))}
+            </section>
+
+            <section className="space-y-2">
+                <h3 className="font-semibold">Добавить комментарий</h3>
+                <input
+                    className="w-full border p-2"
+                    placeholder="Ваше имя"
+                    value={form.author_name}
+                    onChange={(e) =>
+                        setForm({ ...form, author_name: e.target.value })
+                    }
+                />
+                <textarea
+                    className="w-full border p-2"
+                    placeholder="Комментарий"
+                    value={form.content}
+                    onChange={(e) =>
+                        setForm({ ...form, content: e.target.value })
+                    }
+                />
+                <button
+                    onClick={submit}
+                    className="rounded bg-black px-4 py-2 text-white"
+                >
+                    Отправить
+                </button>
+            </section>
+        </div>
+    );
+}

laravel/resources/js/pages/auth/confirm-password.tsx

@@ -0,0 +1,50 @@
+import { Form, Head } from '@inertiajs/react';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import AuthLayout from '@/layouts/auth-layout';
+import { store } from '@/routes/password/confirm';
+
+export default function ConfirmPassword() {
+    return (
+        <AuthLayout
+            title="Confirm your password"
+            description="This is a secure area of the application. Please confirm your password before continuing."
+        >
+            <Head title="Confirm password" />
+
+            <Form {...store.form()} resetOnSuccess={['password']}>
+                {({ processing, errors }) => (
+                    <div className="space-y-6">
+                        <div className="grid gap-2">
+                            <Label htmlFor="password">Password</Label>
+                            <Input
+                                id="password"
+                                type="password"
+                                name="password"
+                                placeholder="Password"
+                                autoComplete="current-password"
+                                autoFocus
+                            />
+
+                            <InputError message={errors.password} />
+                        </div>
+
+                        <div className="flex items-center">
+                            <Button
+                                className="w-full"
+                                disabled={processing}
+                                data-test="confirm-password-button"
+                            >
+                                {processing && <Spinner />}
+                                Confirm password
+                            </Button>
+                        </div>
+                    </div>
+                )}
+            </Form>
+        </AuthLayout>
+    );
+}

laravel/resources/js/pages/auth/forgot-password.tsx

@@ -0,0 +1,68 @@
+// Components
+import { Form, Head } from '@inertiajs/react';
+import { LoaderCircle } from 'lucide-react';
+import InputError from '@/components/input-error';
+import TextLink from '@/components/text-link';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import AuthLayout from '@/layouts/auth-layout';
+import { login } from '@/routes';
+import { email } from '@/routes/password';
+
+export default function ForgotPassword({ status }: { status?: string }) {
+    return (
+        <AuthLayout
+            title="Forgot password"
+            description="Enter your email to receive a password reset link"
+        >
+            <Head title="Forgot password" />
+
+            {status && (
+                <div className="mb-4 text-center text-sm font-medium text-green-600">
+                    {status}
+                </div>
+            )}
+
+            <div className="space-y-6">
+                <Form {...email.form()}>
+                    {({ processing, errors }) => (
+                        <>
+                            <div className="grid gap-2">
+                                <Label htmlFor="email">Email address</Label>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    name="email"
+                                    autoComplete="off"
+                                    autoFocus
+                                    placeholder="email@example.com"
+                                />
+
+                                <InputError message={errors.email} />
+                            </div>
+
+                            <div className="my-6 flex items-center justify-start">
+                                <Button
+                                    className="w-full"
+                                    disabled={processing}
+                                    data-test="email-password-reset-link-button"
+                                >
+                                    {processing && (
+                                        <LoaderCircle className="h-4 w-4 animate-spin" />
+                                    )}
+                                    Email password reset link
+                                </Button>
+                            </div>
+                        </>
+                    )}
+                </Form>
+
+                <div className="space-x-1 text-center text-sm text-muted-foreground">
+                    <span>Or, return to</span>
+                    <TextLink href={login()}>log in</TextLink>
+                </div>
+            </div>
+        </AuthLayout>
+    );
+}

laravel/resources/js/pages/auth/login.tsx

@@ -0,0 +1,120 @@
+import { Form, Head } from '@inertiajs/react';
+import InputError from '@/components/input-error';
+import TextLink from '@/components/text-link';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import AuthLayout from '@/layouts/auth-layout';
+import { register } from '@/routes';
+import { store } from '@/routes/login';
+import { request } from '@/routes/password';
+
+type Props = {
+    status?: string;
+    canResetPassword: boolean;
+    canRegister: boolean;
+};
+
+export default function Login({
+    status,
+    canResetPassword,
+    canRegister,
+}: Props) {
+    return (
+        <AuthLayout
+            title="Log in to your account"
+            description="Enter your email and password below to log in"
+        >
+            <Head title="Log in" />
+
+            <Form
+                {...store.form()}
+                resetOnSuccess={['password']}
+                className="flex flex-col gap-6"
+            >
+                {({ processing, errors }) => (
+                    <>
+                        <div className="grid gap-6">
+                            <div className="grid gap-2">
+                                <Label htmlFor="email">Email address</Label>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    name="email"
+                                    required
+                                    autoFocus
+                                    tabIndex={1}
+                                    autoComplete="email"
+                                    placeholder="email@example.com"
+                                />
+                                <InputError message={errors.email} />
+                            </div>
+
+                            <div className="grid gap-2">
+                                <div className="flex items-center">
+                                    <Label htmlFor="password">Password</Label>
+                                    {canResetPassword && (
+                                        <TextLink
+                                            href={request()}
+                                            className="ml-auto text-sm"
+                                            tabIndex={5}
+                                        >
+                                            Forgot password?
+                                        </TextLink>
+                                    )}
+                                </div>
+                                <Input
+                                    id="password"
+                                    type="password"
+                                    name="password"
+                                    required
+                                    tabIndex={2}
+                                    autoComplete="current-password"
+                                    placeholder="Password"
+                                />
+                                <InputError message={errors.password} />
+                            </div>
+
+                            <div className="flex items-center space-x-3">
+                                <Checkbox
+                                    id="remember"
+                                    name="remember"
+                                    tabIndex={3}
+                                />
+                                <Label htmlFor="remember">Remember me</Label>
+                            </div>
+
+                            <Button
+                                type="submit"
+                                className="mt-4 w-full"
+                                tabIndex={4}
+                                disabled={processing}
+                                data-test="login-button"
+                            >
+                                {processing && <Spinner />}
+                                Log in
+                            </Button>
+                        </div>
+
+                        {canRegister && (
+                            <div className="text-center text-sm text-muted-foreground">
+                                Don't have an account?{' '}
+                                <TextLink href={register()} tabIndex={5}>
+                                    Sign up
+                                </TextLink>
+                            </div>
+                        )}
+                    </>
+                )}
+            </Form>
+
+            {status && (
+                <div className="mb-4 text-center text-sm font-medium text-green-600">
+                    {status}
+                </div>
+            )}
+        </AuthLayout>
+    );
+}

laravel/resources/js/pages/auth/register.tsx

@@ -0,0 +1,114 @@
+import { Form, Head } from '@inertiajs/react';
+import InputError from '@/components/input-error';
+import TextLink from '@/components/text-link';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import AuthLayout from '@/layouts/auth-layout';
+import { login } from '@/routes';
+import { store } from '@/routes/register';
+
+export default function Register() {
+    return (
+        <AuthLayout
+            title="Create an account"
+            description="Enter your details below to create your account"
+        >
+            <Head title="Register" />
+            <Form
+                {...store.form()}
+                resetOnSuccess={['password', 'password_confirmation']}
+                disableWhileProcessing
+                className="flex flex-col gap-6"
+            >
+                {({ processing, errors }) => (
+                    <>
+                        <div className="grid gap-6">
+                            <div className="grid gap-2">
+                                <Label htmlFor="name">Name</Label>
+                                <Input
+                                    id="name"
+                                    type="text"
+                                    required
+                                    autoFocus
+                                    tabIndex={1}
+                                    autoComplete="name"
+                                    name="name"
+                                    placeholder="Full name"
+                                />
+                                <InputError
+                                    message={errors.name}
+                                    className="mt-2"
+                                />
+                            </div>
+
+                            <div className="grid gap-2">
+                                <Label htmlFor="email">Email address</Label>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    required
+                                    tabIndex={2}
+                                    autoComplete="email"
+                                    name="email"
+                                    placeholder="email@example.com"
+                                />
+                                <InputError message={errors.email} />
+                            </div>
+
+                            <div className="grid gap-2">
+                                <Label htmlFor="password">Password</Label>
+                                <Input
+                                    id="password"
+                                    type="password"
+                                    required
+                                    tabIndex={3}
+                                    autoComplete="new-password"
+                                    name="password"
+                                    placeholder="Password"
+                                />
+                                <InputError message={errors.password} />
+                            </div>
+
+                            <div className="grid gap-2">
+                                <Label htmlFor="password_confirmation">
+                                    Confirm password
+                                </Label>
+                                <Input
+                                    id="password_confirmation"
+                                    type="password"
+                                    required
+                                    tabIndex={4}
+                                    autoComplete="new-password"
+                                    name="password_confirmation"
+                                    placeholder="Confirm password"
+                                />
+                                <InputError
+                                    message={errors.password_confirmation}
+                                />
+                            </div>
+
+                            <Button
+                                type="submit"
+                                className="mt-2 w-full"
+                                tabIndex={5}
+                                data-test="register-user-button"
+                            >
+                                {processing && <Spinner />}
+                                Create account
+                            </Button>
+                        </div>
+
+                        <div className="text-center text-sm text-muted-foreground">
+                            Already have an account?{' '}
+                            <TextLink href={login()} tabIndex={6}>
+                                Log in
+                            </TextLink>
+                        </div>
+                    </>
+                )}
+            </Form>
+        </AuthLayout>
+    );
+}

laravel/resources/js/pages/auth/reset-password.tsx

@@ -0,0 +1,93 @@
+import { Form, Head } from '@inertiajs/react';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import AuthLayout from '@/layouts/auth-layout';
+import { update } from '@/routes/password';
+
+type Props = {
+    token: string;
+    email: string;
+};
+
+export default function ResetPassword({ token, email }: Props) {
+    return (
+        <AuthLayout
+            title="Reset password"
+            description="Please enter your new password below"
+        >
+            <Head title="Reset password" />
+
+            <Form
+                {...update.form()}
+                transform={(data) => ({ ...data, token, email })}
+                resetOnSuccess={['password', 'password_confirmation']}
+            >
+                {({ processing, errors }) => (
+                    <div className="grid gap-6">
+                        <div className="grid gap-2">
+                            <Label htmlFor="email">Email</Label>
+                            <Input
+                                id="email"
+                                type="email"
+                                name="email"
+                                autoComplete="email"
+                                value={email}
+                                className="mt-1 block w-full"
+                                readOnly
+                            />
+                            <InputError
+                                message={errors.email}
+                                className="mt-2"
+                            />
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="password">Password</Label>
+                            <Input
+                                id="password"
+                                type="password"
+                                name="password"
+                                autoComplete="new-password"
+                                className="mt-1 block w-full"
+                                autoFocus
+                                placeholder="Password"
+                            />
+                            <InputError message={errors.password} />
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="password_confirmation">
+                                Confirm password
+                            </Label>
+                            <Input
+                                id="password_confirmation"
+                                type="password"
+                                name="password_confirmation"
+                                autoComplete="new-password"
+                                className="mt-1 block w-full"
+                                placeholder="Confirm password"
+                            />
+                            <InputError
+                                message={errors.password_confirmation}
+                                className="mt-2"
+                            />
+                        </div>
+
+                        <Button
+                            type="submit"
+                            className="mt-4 w-full"
+                            disabled={processing}
+                            data-test="reset-password-button"
+                        >
+                            {processing && <Spinner />}
+                            Reset password
+                        </Button>
+                    </div>
+                )}
+            </Form>
+        </AuthLayout>
+    );
+}

laravel/resources/js/pages/auth/two-factor-challenge.tsx

@@ -0,0 +1,131 @@
+import { Form, Head } from '@inertiajs/react';
+import { REGEXP_ONLY_DIGITS } from 'input-otp';
+import { useMemo, useState } from 'react';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth';
+import AuthLayout from '@/layouts/auth-layout';
+import { store } from '@/routes/two-factor/login';
+
+export default function TwoFactorChallenge() {
+    const [showRecoveryInput, setShowRecoveryInput] = useState<boolean>(false);
+    const [code, setCode] = useState<string>('');
+
+    const authConfigContent = useMemo<{
+        title: string;
+        description: string;
+        toggleText: string;
+    }>(() => {
+        if (showRecoveryInput) {
+            return {
+                title: 'Recovery Code',
+                description:
+                    'Please confirm access to your account by entering one of your emergency recovery codes.',
+                toggleText: 'login using an authentication code',
+            };
+        }
+
+        return {
+            title: 'Authentication Code',
+            description:
+                'Enter the authentication code provided by your authenticator application.',
+            toggleText: 'login using a recovery code',
+        };
+    }, [showRecoveryInput]);
+
+    const toggleRecoveryMode = (clearErrors: () => void): void => {
+        setShowRecoveryInput(!showRecoveryInput);
+        clearErrors();
+        setCode('');
+    };
+
+    return (
+        <AuthLayout
+            title={authConfigContent.title}
+            description={authConfigContent.description}
+        >
+            <Head title="Two-Factor Authentication" />
+
+            <div className="space-y-6">
+                <Form
+                    {...store.form()}
+                    className="space-y-4"
+                    resetOnError
+                    resetOnSuccess={!showRecoveryInput}
+                >
+                    {({ errors, processing, clearErrors }) => (
+                        <>
+                            {showRecoveryInput ? (
+                                <>
+                                    <Input
+                                        name="recovery_code"
+                                        type="text"
+                                        placeholder="Enter recovery code"
+                                        autoFocus={showRecoveryInput}
+                                        required
+                                    />
+                                    <InputError
+                                        message={errors.recovery_code}
+                                    />
+                                </>
+                            ) : (
+                                <div className="flex flex-col items-center justify-center space-y-3 text-center">
+                                    <div className="flex w-full items-center justify-center">
+                                        <InputOTP
+                                            name="code"
+                                            maxLength={OTP_MAX_LENGTH}
+                                            value={code}
+                                            onChange={(value) => setCode(value)}
+                                            disabled={processing}
+                                            pattern={REGEXP_ONLY_DIGITS}
+                                        >
+                                            <InputOTPGroup>
+                                                {Array.from(
+                                                    { length: OTP_MAX_LENGTH },
+                                                    (_, index) => (
+                                                        <InputOTPSlot
+                                                            key={index}
+                                                            index={index}
+                                                        />
+                                                    ),
+                                                )}
+                                            </InputOTPGroup>
+                                        </InputOTP>
+                                    </div>
+                                    <InputError message={errors.code} />
+                                </div>
+                            )}
+
+                            <Button
+                                type="submit"
+                                className="w-full"
+                                disabled={processing}
+                            >
+                                Continue
+                            </Button>
+
+                            <div className="text-center text-sm text-muted-foreground">
+                                <span>or you can </span>
+                                <button
+                                    type="button"
+                                    className="cursor-pointer text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
+                                    onClick={() =>
+                                        toggleRecoveryMode(clearErrors)
+                                    }
+                                >
+                                    {authConfigContent.toggleText}
+                                </button>
+                            </div>
+                        </>
+                    )}
+                </Form>
+            </div>
+        </AuthLayout>
+    );
+}

laravel/resources/js/pages/auth/verify-email.tsx

@@ -0,0 +1,44 @@
+// Components
+import { Form, Head } from '@inertiajs/react';
+import TextLink from '@/components/text-link';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import AuthLayout from '@/layouts/auth-layout';
+import { logout } from '@/routes';
+import { send } from '@/routes/verification';
+
+export default function VerifyEmail({ status }: { status?: string }) {
+    return (
+        <AuthLayout
+            title="Verify email"
+            description="Please verify your email address by clicking on the link we just emailed to you."
+        >
+            <Head title="Email verification" />
+
+            {status === 'verification-link-sent' && (
+                <div className="mb-4 text-center text-sm font-medium text-green-600">
+                    A new verification link has been sent to the email address
+                    you provided during registration.
+                </div>
+            )}
+
+            <Form {...send.form()} className="space-y-6 text-center">
+                {({ processing }) => (
+                    <>
+                        <Button disabled={processing} variant="secondary">
+                            {processing && <Spinner />}
+                            Resend verification email
+                        </Button>
+
+                        <TextLink
+                            href={logout()}
+                            className="mx-auto block text-sm"
+                        >
+                            Log out
+                        </TextLink>
+                    </>
+                )}
+            </Form>
+        </AuthLayout>
+    );
+}

laravel/resources/js/pages/dashboard.tsx

@@ -0,0 +1,36 @@
+import { Head } from '@inertiajs/react';
+import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
+import AppLayout from '@/layouts/app-layout';
+import { dashboard } from '@/routes';
+import type { BreadcrumbItem } from '@/types';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Dashboard',
+        href: dashboard().url,
+    },
+];
+
+export default function Dashboard() {
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Dashboard" />
+            <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
+                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
+                    </div>
+                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
+                    </div>
+                    <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
+                        <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
+                    </div>
+                </div>
+                <div className="relative min-h-[100vh] flex-1 overflow-hidden rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border">
+                    <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />
+                </div>
+            </div>
+        </AppLayout>
+    );
+}

laravel/resources/js/pages/settings/appearance.tsx

@@ -0,0 +1,35 @@
+import { Head } from '@inertiajs/react';
+import AppearanceTabs from '@/components/appearance-tabs';
+import Heading from '@/components/heading';
+import AppLayout from '@/layouts/app-layout';
+import SettingsLayout from '@/layouts/settings/layout';
+import { edit as editAppearance } from '@/routes/appearance';
+import type { BreadcrumbItem } from '@/types';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Appearance settings',
+        href: editAppearance().url,
+    },
+];
+
+export default function Appearance() {
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Appearance settings" />
+
+            <h1 className="sr-only">Appearance Settings</h1>
+
+            <SettingsLayout>
+                <div className="space-y-6">
+                    <Heading
+                        variant="small"
+                        title="Appearance settings"
+                        description="Update your account's appearance settings"
+                    />
+                    <AppearanceTabs />
+                </div>
+            </SettingsLayout>
+        </AppLayout>
+    );
+}

laravel/resources/js/pages/settings/password.tsx

@@ -0,0 +1,148 @@
+import { Transition } from '@headlessui/react';
+import { Form, Head } from '@inertiajs/react';
+import { useRef } from 'react';
+import PasswordController from '@/actions/App/Http/Controllers/Settings/PasswordController';
+import Heading from '@/components/heading';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import AppLayout from '@/layouts/app-layout';
+import SettingsLayout from '@/layouts/settings/layout';
+import { edit } from '@/routes/user-password';
+import type { BreadcrumbItem } from '@/types';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Password settings',
+        href: edit().url,
+    },
+];
+
+export default function Password() {
+    const passwordInput = useRef<HTMLInputElement>(null);
+    const currentPasswordInput = useRef<HTMLInputElement>(null);
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Password settings" />
+
+            <h1 className="sr-only">Password Settings</h1>
+
+            <SettingsLayout>
+                <div className="space-y-6">
+                    <Heading
+                        variant="small"
+                        title="Update password"
+                        description="Ensure your account is using a long, random password to stay secure"
+                    />
+
+                    <Form
+                        {...PasswordController.update.form()}
+                        options={{
+                            preserveScroll: true,
+                        }}
+                        resetOnError={[
+                            'password',
+                            'password_confirmation',
+                            'current_password',
+                        ]}
+                        resetOnSuccess
+                        onError={(errors) => {
+                            if (errors.password) {
+                                passwordInput.current?.focus();
+                            }
+
+                            if (errors.current_password) {
+                                currentPasswordInput.current?.focus();
+                            }
+                        }}
+                        className="space-y-6"
+                    >
+                        {({ errors, processing, recentlySuccessful }) => (
+                            <>
+                                <div className="grid gap-2">
+                                    <Label htmlFor="current_password">
+                                        Current password
+                                    </Label>
+
+                                    <Input
+                                        id="current_password"
+                                        ref={currentPasswordInput}
+                                        name="current_password"
+                                        type="password"
+                                        className="mt-1 block w-full"
+                                        autoComplete="current-password"
+                                        placeholder="Current password"
+                                    />
+
+                                    <InputError
+                                        message={errors.current_password}
+                                    />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="password">
+                                        New password
+                                    </Label>
+
+                                    <Input
+                                        id="password"
+                                        ref={passwordInput}
+                                        name="password"
+                                        type="password"
+                                        className="mt-1 block w-full"
+                                        autoComplete="new-password"
+                                        placeholder="New password"
+                                    />
+
+                                    <InputError message={errors.password} />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="password_confirmation">
+                                        Confirm password
+                                    </Label>
+
+                                    <Input
+                                        id="password_confirmation"
+                                        name="password_confirmation"
+                                        type="password"
+                                        className="mt-1 block w-full"
+                                        autoComplete="new-password"
+                                        placeholder="Confirm password"
+                                    />
+
+                                    <InputError
+                                        message={errors.password_confirmation}
+                                    />
+                                </div>
+
+                                <div className="flex items-center gap-4">
+                                    <Button
+                                        disabled={processing}
+                                        data-test="update-password-button"
+                                    >
+                                        Save password
+                                    </Button>
+
+                                    <Transition
+                                        show={recentlySuccessful}
+                                        enter="transition ease-in-out"
+                                        enterFrom="opacity-0"
+                                        leave="transition ease-in-out"
+                                        leaveTo="opacity-0"
+                                    >
+                                        <p className="text-sm text-neutral-600">
+                                            Saved
+                                        </p>
+                                    </Transition>
+                                </div>
+                            </>
+                        )}
+                    </Form>
+                </div>
+            </SettingsLayout>
+        </AppLayout>
+    );
+}

laravel/resources/js/pages/settings/profile.tsx

@@ -0,0 +1,150 @@
+import { Transition } from '@headlessui/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
+import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
+import DeleteUser from '@/components/delete-user';
+import Heading from '@/components/heading';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import AppLayout from '@/layouts/app-layout';
+import SettingsLayout from '@/layouts/settings/layout';
+import { edit } from '@/routes/profile';
+import { send } from '@/routes/verification';
+import type { BreadcrumbItem, SharedData } from '@/types';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Profile settings',
+        href: edit().url,
+    },
+];
+
+export default function Profile({
+    mustVerifyEmail,
+    status,
+}: {
+    mustVerifyEmail: boolean;
+    status?: string;
+}) {
+    const { auth } = usePage<SharedData>().props;
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Profile settings" />
+
+            <h1 className="sr-only">Profile Settings</h1>
+
+            <SettingsLayout>
+                <div className="space-y-6">
+                    <Heading
+                        variant="small"
+                        title="Profile information"
+                        description="Update your name and email address"
+                    />
+
+                    <Form
+                        {...ProfileController.update.form()}
+                        options={{
+                            preserveScroll: true,
+                        }}
+                        className="space-y-6"
+                    >
+                        {({ processing, recentlySuccessful, errors }) => (
+                            <>
+                                <div className="grid gap-2">
+                                    <Label htmlFor="name">Name</Label>
+
+                                    <Input
+                                        id="name"
+                                        className="mt-1 block w-full"
+                                        defaultValue={auth.user.name}
+                                        name="name"
+                                        required
+                                        autoComplete="name"
+                                        placeholder="Full name"
+                                    />
+
+                                    <InputError
+                                        className="mt-2"
+                                        message={errors.name}
+                                    />
+                                </div>
+
+                                <div className="grid gap-2">
+                                    <Label htmlFor="email">Email address</Label>
+
+                                    <Input
+                                        id="email"
+                                        type="email"
+                                        className="mt-1 block w-full"
+                                        defaultValue={auth.user.email}
+                                        name="email"
+                                        required
+                                        autoComplete="username"
+                                        placeholder="Email address"
+                                    />
+
+                                    <InputError
+                                        className="mt-2"
+                                        message={errors.email}
+                                    />
+                                </div>
+
+                                {mustVerifyEmail &&
+                                    auth.user.email_verified_at === null && (
+                                        <div>
+                                            <p className="-mt-4 text-sm text-muted-foreground">
+                                                Your email address is
+                                                unverified.{' '}
+                                                <Link
+                                                    href={send()}
+                                                    as="button"
+                                                    className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
+                                                >
+                                                    Click here to resend the
+                                                    verification email.
+                                                </Link>
+                                            </p>
+
+                                            {status ===
+                                                'verification-link-sent' && (
+                                                <div className="mt-2 text-sm font-medium text-green-600">
+                                                    A new verification link has
+                                                    been sent to your email
+                                                    address.
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+
+                                <div className="flex items-center gap-4">
+                                    <Button
+                                        disabled={processing}
+                                        data-test="update-profile-button"
+                                    >
+                                        Save
+                                    </Button>
+
+                                    <Transition
+                                        show={recentlySuccessful}
+                                        enter="transition ease-in-out"
+                                        enterFrom="opacity-0"
+                                        leave="transition ease-in-out"
+                                        leaveTo="opacity-0"
+                                    >
+                                        <p className="text-sm text-neutral-600">
+                                            Saved
+                                        </p>
+                                    </Transition>
+                                </div>
+                            </>
+                        )}
+                    </Form>
+                </div>
+
+                <DeleteUser />
+            </SettingsLayout>
+        </AppLayout>
+    );
+}

laravel/resources/js/pages/settings/two-factor.tsx

@@ -0,0 +1,141 @@
+import { Form, Head } from '@inertiajs/react';
+import { ShieldBan, ShieldCheck } from 'lucide-react';
+import { useState } from 'react';
+import Heading from '@/components/heading';
+import TwoFactorRecoveryCodes from '@/components/two-factor-recovery-codes';
+import TwoFactorSetupModal from '@/components/two-factor-setup-modal';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth';
+import AppLayout from '@/layouts/app-layout';
+import SettingsLayout from '@/layouts/settings/layout';
+import { disable, enable, show } from '@/routes/two-factor';
+import type { BreadcrumbItem } from '@/types';
+
+type Props = {
+    requiresConfirmation?: boolean;
+    twoFactorEnabled?: boolean;
+};
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Two-Factor Authentication',
+        href: show.url(),
+    },
+];
+
+export default function TwoFactor({
+    requiresConfirmation = false,
+    twoFactorEnabled = false,
+}: Props) {
+    const {
+        qrCodeSvg,
+        hasSetupData,
+        manualSetupKey,
+        clearSetupData,
+        fetchSetupData,
+        recoveryCodesList,
+        fetchRecoveryCodes,
+        errors,
+    } = useTwoFactorAuth();
+    const [showSetupModal, setShowSetupModal] = useState<boolean>(false);
+
+    return (
+        <AppLayout breadcrumbs={breadcrumbs}>
+            <Head title="Two-Factor Authentication" />
+
+            <h1 className="sr-only">Two-Factor Authentication Settings</h1>
+
+            <SettingsLayout>
+                <div className="space-y-6">
+                    <Heading
+                        variant="small"
+                        title="Two-Factor Authentication"
+                        description="Manage your two-factor authentication settings"
+                    />
+                    {twoFactorEnabled ? (
+                        <div className="flex flex-col items-start justify-start space-y-4">
+                            <Badge variant="default">Enabled</Badge>
+                            <p className="text-muted-foreground">
+                                With two-factor authentication enabled, you will
+                                be prompted for a secure, random pin during
+                                login, which you can retrieve from the
+                                TOTP-supported application on your phone.
+                            </p>
+
+                            <TwoFactorRecoveryCodes
+                                recoveryCodesList={recoveryCodesList}
+                                fetchRecoveryCodes={fetchRecoveryCodes}
+                                errors={errors}
+                            />
+
+                            <div className="relative inline">
+                                <Form {...disable.form()}>
+                                    {({ processing }) => (
+                                        <Button
+                                            variant="destructive"
+                                            type="submit"
+                                            disabled={processing}
+                                        >
+                                            <ShieldBan /> Disable 2FA
+                                        </Button>
+                                    )}
+                                </Form>
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="flex flex-col items-start justify-start space-y-4">
+                            <Badge variant="destructive">Disabled</Badge>
+                            <p className="text-muted-foreground">
+                                When you enable two-factor authentication, you
+                                will be prompted for a secure pin during login.
+                                This pin can be retrieved from a TOTP-supported
+                                application on your phone.
+                            </p>
+
+                            <div>
+                                {hasSetupData ? (
+                                    <Button
+                                        onClick={() => setShowSetupModal(true)}
+                                    >
+                                        <ShieldCheck />
+                                        Continue Setup
+                                    </Button>
+                                ) : (
+                                    <Form
+                                        {...enable.form()}
+                                        onSuccess={() =>
+                                            setShowSetupModal(true)
+                                        }
+                                    >
+                                        {({ processing }) => (
+                                            <Button
+                                                type="submit"
+                                                disabled={processing}
+                                            >
+                                                <ShieldCheck />
+                                                Enable 2FA
+                                            </Button>
+                                        )}
+                                    </Form>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    <TwoFactorSetupModal
+                        isOpen={showSetupModal}
+                        onClose={() => setShowSetupModal(false)}
+                        requiresConfirmation={requiresConfirmation}
+                        twoFactorEnabled={twoFactorEnabled}
+                        qrCodeSvg={qrCodeSvg}
+                        manualSetupKey={manualSetupKey}
+                        clearSetupData={clearSetupData}
+                        fetchSetupData={fetchSetupData}
+                        errors={errors}
+                    />
+                </div>
+            </SettingsLayout>
+        </AppLayout>
+    );
+}

laravel/resources/js/pages/welcome.tsx

@@ -0,0 +1,131 @@
+import { Link } from '@inertiajs/react';
+import React, { useEffect, useState } from 'react';
+import Heading from '@/components/heading';
+import { Card } from '@/components/ui/card';
+import * as Dialog from '@/components/ui/dialog'; // твои Radix Dialog-компоненты
+
+interface Article {
+    id: number;
+    title: string;
+    content_short: string;
+    created_at: string;
+    comments_count: number;
+}
+
+export default function Welcome() {
+    const [articles, setArticles] = useState<Article[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [form, setForm] = useState({ title: '', content: '' });
+
+    useEffect(() => {
+        fetch('/api/articles')
+            .then((res) => res.json())
+            .then((data) => setArticles(data.data || data))
+            .catch(console.error);
+    }, []);
+
+    const submitArticle = async () => {
+        if (!form.title || !form.content) return;
+
+        setLoading(true);
+
+        try {
+            const res = await fetch('/api/articles', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(form),
+            });
+
+            if (!res.ok) return;
+
+            const json = await res.json();
+
+            const newArticle = json.data || json;
+
+            setArticles([newArticle, ...articles]);
+            setForm({ title: '', content: '' });
+            setIsOpen(false);
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-6 p-6">
+            <Heading
+                title="Список статей"
+                description="Последние новости и статьи"
+            />
+
+            <Dialog.Dialog open={isOpen} onOpenChange={setIsOpen}>
+                <Dialog.DialogTrigger>
+                    <button className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+                        Добавить статью
+                    </button>
+                </Dialog.DialogTrigger>
+
+                <Dialog.DialogContent>
+                    <Dialog.DialogHeader>
+                        <Dialog.DialogTitle>Новая статья</Dialog.DialogTitle>
+                    </Dialog.DialogHeader>
+
+                    <div className="space-y-2">
+                        <input
+                            type="text"
+                            placeholder="Заголовок"
+                            className="w-full border p-2"
+                            value={form.title}
+                            onChange={(e) =>
+                                setForm({ ...form, title: e.target.value })
+                            }
+                        />
+                        <textarea
+                            placeholder="Содержание"
+                            className="w-full border p-2"
+                            value={form.content}
+                            onChange={(e) =>
+                                setForm({ ...form, content: e.target.value })
+                            }
+                        />
+                    </div>
+
+                    <Dialog.DialogFooter>
+                        <button
+                            onClick={submitArticle}
+                            disabled={loading}
+                            className="rounded bg-black px-4 py-2 text-white"
+                        >
+                            {loading ? 'Сохранение…' : 'Сохранить'}
+                        </button>
+                    </Dialog.DialogFooter>
+                </Dialog.DialogContent>
+            </Dialog.Dialog>
+
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {articles.map((article) => (
+                    <Link
+                        key={article.id}
+                        href={`/articles/${article.id}`}
+                        className="block"
+                    >
+                        <Card className="p-4 transition hover:shadow">
+                            <h2 className="text-xl font-semibold">
+                                {article.title}
+                            </h2>
+                            <p className="text-sm text-gray-500">
+                                {article.created_at}
+                            </p>
+                            <p className="mt-2">{article.content_short}…</p>
+                            <p className="mt-2 text-sm text-gray-400">
+                                Комментарии: {article.comments_count}
+                            </p>
+                        </Card>
+                    </Link>
+                ))}
+            </div>
+        </div>
+    );
+}

laravel/resources/js/ssr.tsx

@@ -0,0 +1,22 @@
+import { createInertiaApp } from '@inertiajs/react';
+import createServer from '@inertiajs/react/server';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import ReactDOMServer from 'react-dom/server';
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createServer((page) =>
+    createInertiaApp({
+        page,
+        render: ReactDOMServer.renderToString,
+        title: (title) => (title ? `${title} - ${appName}` : appName),
+        resolve: (name) =>
+            resolvePageComponent(
+                `./pages/${name}.tsx`,
+                import.meta.glob('./pages/**/*.tsx'),
+            ),
+        setup: ({ App, props }) => {
+            return <App {...props} />;
+        },
+    }),
+);

laravel/resources/js/types/article.ts

@@ -0,0 +1,14 @@
+export type Comment = {
+    id: number;
+    author_name: string;
+    content: string;
+    created_at: string;
+};
+
+export type Article = {
+    id: number;
+    title: string;
+    content: string;
+    created_at: string;
+    comments: Comment[];
+};

laravel/resources/js/types/auth.ts

@@ -0,0 +1,24 @@
+export type User = {
+    id: number;
+    name: string;
+    email: string;
+    avatar?: string;
+    email_verified_at: string | null;
+    two_factor_enabled?: boolean;
+    created_at: string;
+    updated_at: string;
+    [key: string]: unknown;
+};
+
+export type Auth = {
+    user: User;
+};
+
+export type TwoFactorSetupData = {
+    svg: string;
+    url: string;
+};
+
+export type TwoFactorSecretKey = {
+    secretKey: string;
+};

laravel/resources/js/types/index.ts

@@ -0,0 +1,12 @@
+export type * from './auth';
+export type * from './navigation';
+export type * from './ui';
+
+import type { Auth } from './auth';
+
+export type SharedData = {
+    name: string;
+    auth: Auth;
+    sidebarOpen: boolean;
+    [key: string]: unknown;
+};

laravel/resources/js/types/navigation.ts

@@ -0,0 +1,14 @@
+import type { InertiaLinkProps } from '@inertiajs/react';
+import type { LucideIcon } from 'lucide-react';
+
+export type BreadcrumbItem = {
+    title: string;
+    href: string;
+};
+
+export type NavItem = {
+    title: string;
+    href: NonNullable<InertiaLinkProps['href']>;
+    icon?: LucideIcon | null;
+    isActive?: boolean;
+};

laravel/resources/js/types/ui.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { BreadcrumbItem } from './navigation';
+
+export type AppLayoutProps = {
+    children: ReactNode;
+    breadcrumbs?: BreadcrumbItem[];
+};
+
+export type AuthLayoutProps = {
+    children?: ReactNode;
+    name?: string;
+    title?: string;
+    description?: string;
+};

laravel/resources/js/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

laravel/resources/views/app.blade.php

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        {{-- Inline script to detect system dark mode preference and apply it immediately --}}
+        <script>
+            (function() {
+                const appearance = '{{ $appearance ?? "system" }}';
+
+                if (appearance === 'system') {
+                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                    if (prefersDark) {
+                        document.documentElement.classList.add('dark');
+                    }
+                }
+            })();
+        </script>
+
+        {{-- Inline style to set the HTML background color based on our theme in app.css --}}
+        <style>
+            html {
+                background-color: oklch(1 0 0);
+            }
+
+            html.dark {
+                background-color: oklch(0.145 0 0);
+            }
+        </style>
+
+        <title inertia>{{ config('app.name', 'Laravel') }}</title>
+
+        <link rel="icon" href="/favicon.ico" sizes="any">
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+        <link rel="preconnect" href="https://fonts.bunny.net">
+        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+
+        @viteReactRefresh
+        @vite(['resources/js/app.tsx', "resources/js/pages/{$page['component']}.tsx"])
+        @inertiaHead
+    </head>
+    <body class="font-sans antialiased">
+        @inertia
+    </body>
+</html>