Merge branch 'tw4' of https://github.com/laravel/react-starter-kit into tw4

tnylea · tnylea · commit 9fd3cd5a9e50 · 2025-02-14T11:15:30.000-05:00
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -7,9 +7,7 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-    --font-sans:
-        Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans: Figtree, 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);
@@ -68,7 +66,6 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-
     *,
     ::after,
     ::before,
@@ -157,4 +154,4 @@
     body {
         @apply bg-background text-foreground;
     }
-}
+}
diff --git a/resources/js/components/app-header.tsx b/resources/js/components/app-header.tsx
@@ -53,7 +53,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
     const getInitials = useInitials();
     return (
         <>
-            <div className="border-b border-sidebar-border/80">
+            <div className="border-sidebar-border/80 border-b">
                 <div className="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
                     {/* Mobile Menu */}
                     <div className="lg:hidden">
@@ -169,7 +169,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                 </div>
             </div>
             {breadcrumbs.length > 1 && (
-                <div className="flex w-full border-b border-sidebar-border/70">
+                <div className="border-sidebar-border/70 flex w-full border-b">
                     <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>
diff --git a/resources/js/components/app-logo.tsx b/resources/js/components/app-logo.tsx
@@ -3,7 +3,7 @@ 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">
+            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
                 <AppLogoIcon className="size-5 fill-current text-white dark:text-black" />
             </div>
             <div className="grid flex-1 text-left text-sm leading-tight">
diff --git a/resources/js/components/app-sidebar-header.tsx b/resources/js/components/app-sidebar-header.tsx
@@ -4,7 +4,7 @@ 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-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+        <header className="border-sidebar-border/50 group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear">
             <div className="flex items-center gap-2">
                 <SidebarTrigger className="-ml-1" />
                 <Breadcrumbs breadcrumbs={breadcrumbs} />
diff --git a/resources/js/components/appearance-tabs.tsx b/resources/js/components/appearance-tabs.tsx
@@ -21,7 +21,7 @@ export default function AppearanceToggleTab({ className = '', ...props }: HTMLAt
                     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'
+                            ? 'shadow-xs bg-white 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',
                     )}
                 >
diff --git a/resources/js/components/heading-small.tsx b/resources/js/components/heading-small.tsx
@@ -2,7 +2,7 @@ export default function HeadingSmall({ title, description }: { title: string; de
     return (
         <header>
             <h3 className="mb-0.5 text-base font-medium">{title}</h3>
-            {description && <p className="text-xs text-muted-foreground">{description}</p>}
+            {description && <p className="text-muted-foreground text-xs">{description}</p>}
         </header>
     );
 }
diff --git a/resources/js/components/heading.tsx b/resources/js/components/heading.tsx
@@ -5,7 +5,7 @@ export default function Heading({ title, description }: { title: string; descrip
         <>
             <div className="space-y-0.5">
                 <h2 className="text-base font-semibold tracking-tight sm:text-lg lg:text-xl">{title}</h2>
-                {description && <p className="text-xs text-muted-foreground md:text-sm">{description}</p>}
+                {description && <p className="text-muted-foreground text-xs md:text-sm">{description}</p>}
             </div>
             <Separator className="my-6" />
         </>
diff --git a/resources/js/components/nav-user.tsx b/resources/js/components/nav-user.tsx
@@ -17,7 +17,7 @@ export function NavUser() {
             <SidebarMenuItem>
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                        <SidebarMenuButton size="lg" className="group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent">
+                        <SidebarMenuButton size="lg" className="text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent group">
                             <UserInfo user={auth.user} />
                             <ChevronsUpDown className="ml-auto size-4" />
                         </SidebarMenuButton>
diff --git a/resources/js/layouts/auth/auth-card-layout.tsx b/resources/js/layouts/auth/auth-card-layout.tsx
@@ -12,7 +12,7 @@ export default function AuthCardLayout({
     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="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
             <div className="flex w-full max-w-md flex-col gap-6">
                 <a href="#" className="flex items-center gap-2 self-center font-medium">
                     <div className="flex h-10 w-10 items-center justify-center">
diff --git a/resources/js/layouts/auth/auth-simple-layout.tsx b/resources/js/layouts/auth/auth-simple-layout.tsx
@@ -10,7 +10,7 @@ interface AuthLayoutProps {
 
 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="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
             <div className="w-full max-w-sm">
                 <div className="flex flex-col gap-6">
                     <div className="flex flex-col items-center gap-2">
diff --git a/resources/js/layouts/auth/auth-split-layout.tsx b/resources/js/layouts/auth/auth-split-layout.tsx
@@ -13,7 +13,7 @@ export default function AuthSplitLayout({ children, title, description }: AuthLa
 
     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 dark:border-r lg:flex">
+            <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
                 <div className="absolute inset-0 bg-zinc-900" />
                 <Link href={route('home')} className="relative z-20 flex items-center text-lg font-medium">
                     <AppLogoIcon className="mr-2 h-6 fill-current text-white" />
@@ -35,7 +35,7 @@ export default function AuthSplitLayout({ children, title, description }: AuthLa
                     </Link>
                     <div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
                         <h1 className="text-2xl font-bold">{title}</h1>
-                        <p className="text-balance text-sm text-muted-foreground">{description}</p>
+                        <p className="text-muted-foreground text-balance text-sm">{description}</p>
                     </div>
                     {children}
                 </div>
diff --git a/resources/js/pages/auth/verify-email.tsx b/resources/js/pages/auth/verify-email.tsx
@@ -39,7 +39,7 @@ export default function VerifyEmail({ status }: { status?: string }) {
                         href={route('logout')}
                         method="post"
                         as="button"
-                        className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                        className="focus:outline-hidden rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                     >
                         Log Out
                     </Link>
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
@@ -16,17 +16,17 @@ export default function Dashboard() {
             <Head title="Dashboard" />
             <div className="flex h-full flex-1 flex-col gap-4 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">
+                    <div className="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border">
                         <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-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">
+                    <div className="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border">
                         <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-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">
+                    <div className="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border">
                         <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
                     </div>
                 </div>
-                <div className="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 dark:border-sidebar-border md:min-h-min">
+                <div className="border-sidebar-border/70 dark:border-sidebar-border relative min-h-[100vh] flex-1 rounded-xl border md:min-h-min">
                     <PlaceholderPattern className="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
                 </div>
             </div>
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
@@ -81,7 +81,7 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                                         href={route('verification.send')}
                                         method="post"
                                         as="button"
-                                        className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                                        className="focus:outline-hidden rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                                     >
                                         Click here to re-send the verification email.
                                     </Link>
diff --git a/resources/js/pages/welcome.tsx b/resources/js/pages/welcome.tsx

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ export default function AppearanceToggleTab({ className = '', ...props }: HTMLAt`
`21`	`21`	`className={cn(`
`22`	`22`	`'flex items-center rounded-md px-3.5 py-1.5 transition-colors',`
`23`	`23`	`appearance === value`
`24`		`- ? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'`
	`24`	`+ ? 'shadow-xs bg-white dark:bg-neutral-700 dark:text-neutral-100'`
`25`	`25`	`: 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',`
`26`	`26`	`)}`
`27`	`27`	`>`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ export default function HeadingSmall({ title, description }: { title: string; de`
`2`	`2`	`return (`
`3`	`3`	`<header>`
`4`	`4`	`<h3 className="mb-0.5 text-base font-medium">{title}</h3>`
`5`		`- {description && <p className="text-xs text-muted-foreground">{description}</p>}`
	`5`	`+ {description && <p className="text-muted-foreground text-xs">{description}</p>}`
`6`	`6`	`</header>`
`7`	`7`	`);`
`8`	`8`	`}`