feat: sync

Author: irsyadadl

bun.lockb

@@ -1,6 +1,6 @@
 {
     "name": "justd/laravel",
-    "version": "1.4.12",
+    "version": "1.4.13",
     "type": "project",
     "description": "The skeleton application for the Laravel framework.",
     "keywords": [

composer.json

@@ -36,6 +36,6 @@
     "sonner": "^2.0.1",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-react-aria-components": "^2.0.0",
-    "vite": "^6.2.1"
+    "vite": "^6.2.2"
   }
 }

composer.lock

@@ -4,7 +4,7 @@ import { useEffect } from "react"
 import { toast } from "sonner"
 import { Toast } from "ui"
 
-export function FlashMessage() {
+export function Flash() {
   const { flash } = usePage<{ flash: FlashProps }>().props
   useEffect(() => {
     if (flash?.message) {

package.json

@@ -5,8 +5,8 @@ const Card = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) =>
     <div
       data-slot="card"
       className={twMerge(
+        "group/card flex flex-col gap-(--card-spacing) rounded-lg border bg-bg py-(--card-spacing) text-fg shadow-xs [--card-spacing:theme(spacing.6)] has-[table]:overflow-hidden **:data-[slot=table-header]:bg-muted/50 has-[table]:**:data-[slot=card-footer]:border-t **:[table]:overflow-hidden",
         className,
-        "rounded-lg border bg-bg text-fg shadow-xs [--card-spacing:theme(spacing.6)] has-[table]:overflow-hidden **:data-[slot=table-header]:bg-muted/50 has-[table]:**:data-[slot=card-footer]:border-t **:[table]:overflow-hidden",
       )}
       {...props}
     />
@@ -22,7 +22,7 @@ const CardHeader = ({ className, title, description, children, ...props }: Heade
   <div
     data-slot="card-header"
     className={twMerge(
-      "grid w-full grid-cols-[1fr_auto] gap-y-1 px-(--card-spacing) py-6",
+      "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-(--card-spacing) has-[data-slot=card-action]:grid-cols-[1fr_auto]",
       className,
     )}
     {...props}
@@ -37,7 +37,7 @@ const CardTitle = ({ className, ...props }: React.ComponentProps<"div">) => {
   return (
     <div
       data-slot="card-title"
-      className={twMerge("font-semibold text-lg/6 tracking-tight", className)}
+      className={twMerge("font-semibold text-lg leading-none tracking-tight", className)}
       {...props}
     />
   )
@@ -58,7 +58,10 @@ const CardAction = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement
   return (
     <div
       data-slot="card-action"
-      className={twMerge("col-start-2 row-span-1 flex self-center", className)}
+      className={twMerge(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
       {...props}
     />
   )
@@ -69,7 +72,7 @@ const CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
     <div
       data-slot="card-content"
       className={twMerge(
-        "px-(--card-spacing) pb-(--card-spacing) has-[table]:border-t has-[[data-slot=table-header]]:bg-muted/40 has-[table]:p-0 **:data-[slot=table-cell]:px-(--card-spacing) **:data-[slot=table-column]:px-(--card-spacing) [&:has(table)+[data-slot=card-footer]]:py-6",
+        "px-(--card-spacing) has-[[data-slot=table-header]]:bg-muted/40 has-[table]:p-0 group-has-[table]/card:border-t **:data-[slot=table-cell]:px-(--card-spacing) **:data-[slot=table-column]:px-(--card-spacing) [&:has(table)+[data-slot=card-footer]]:pt-(--card-spacing)",
         className,
       )}
       {...props}
@@ -81,7 +84,7 @@ const CardFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement
   return (
     <div
       data-slot="card-footer"
-      className={twMerge("flex items-center p-(--card-spacing) pt-0", className)}
+      className={twMerge("flex items-center px-(--card-spacing) [.border-t]:pt-6", className)}
       {...props}
     />
   )

resources/js/components/flash-message.tsx resources/js/components/flash.tsx

@@ -2,7 +2,7 @@ import { twMerge } from "tailwind-merge"
 
 interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   constrained?: boolean
-  ref?: React.Ref<HTMLDivElement>
+  ref?: React.RefObject<HTMLDivElement>
 }
 
 const Container = ({ className, constrained = false, ref, ...props }: ContainerProps) => (

resources/js/components/ui/card.tsx

@@ -96,10 +96,14 @@ const fieldGroupStyles = tv({
   },
 })
 
-const FieldGroup = ({ className, ...props }: GroupProps) => {
+interface FieldGroupProps extends GroupProps {
+  ref?: React.RefObject<HTMLDivElement>
+}
+const FieldGroup = ({ className, ref, ...props }: FieldGroupProps) => {
   return (
     <Group
       {...props}
+      ref={ref}
       className={composeRenderProps(className, (className, renderProps) =>
         fieldGroupStyles({
           ...renderProps,

resources/js/components/ui/container.tsx

@@ -1,24 +1,24 @@
-export * from './primitive'
-export * from './avatar'
-export * from './button'
-export * from './card'
-export * from './checkbox'
-export * from './container'
-export * from './dialog'
-export * from './dropdown'
-export * from './field'
-export * from './form'
-export * from './heading'
-export * from './keyboard'
-export * from './link'
-export * from './list-box'
-export * from './loader'
-export * from './menu'
-export * from './modal'
-export * from './navbar'
-export * from './popover'
-export * from './separator'
-export * from './sheet'
-export * from './text-field'
-export * from './toast'
-export * from './visually-hidden'
+export * from "./primitive"
+export * from "./avatar"
+export * from "./button"
+export * from "./card"
+export * from "./checkbox"
+export * from "./container"
+export * from "./dialog"
+export * from "./dropdown"
+export * from "./field"
+export * from "./form"
+export * from "./heading"
+export * from "./keyboard"
+export * from "./link"
+export * from "./list-box"
+export * from "./loader"
+export * from "./menu"
+export * from "./modal"
+export * from "./navbar"
+export * from "./popover"
+export * from "./separator"
+export * from "./sheet"
+export * from "./text-field"
+export * from "./toast"
+export * from "./visually-hidden"

resources/js/components/ui/field.tsx

@@ -1,12 +1,12 @@
-import { FlashMessage } from "@/components/flash-message"
+import { Flash } from "@/components/flash"
 import { Footer } from "@/components/footer"
 import { AppNavbar } from "@/layouts/app-navbar"
 import type { PropsWithChildren } from "react"
 
 export default function AppLayout({ children }: PropsWithChildren) {
   return (
     <div>
-      <FlashMessage />
+      <Flash />
       <AppNavbar>{children}</AppNavbar>
       <Footer />
     </div>

resources/js/components/ui/index.ts

@@ -1,4 +1,4 @@
-import { FlashMessage } from "@/components/flash-message"
+import { Flash } from "@/components/flash"
 import { Logo } from "@/components/logo"
 import { Card } from "@/components/ui/card"
 import type { PropsWithChildren, ReactNode } from "react"
@@ -16,12 +16,12 @@ export default function GuestLayout({
 }: PropsWithChildren<GuestLayoutProps>) {
   return (
     <div className="flex min-h-screen flex-col items-center pt-6 sm:justify-center sm:pt-0">
-      <FlashMessage />
+      <Flash />
       <Link href={route("home")}>
         <Logo className="size-6" />
       </Link>
 
-      <div className="w-full max-w-sm">
+      <div className="mt-6 w-full max-w-sm">
         <Card.Header className="text-center">
           <Card.Title>{header}</Card.Title>
           <Card.Description>{description}</Card.Description>