justdlabs · irsyadadl · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,15 @@
 
 
+## [1.0.3](https://github.com/justdlabs/inertia.ts/compare/1.0.2...1.0.3) (2024-08-05)
+
 ## [1.0.2](https://github.com/justdlabs/inertia.ts/compare/1.0.1...1.0.2) (2024-08-04)
 
 ## 1.0.1 (2024-08-04)
 
-
 ### Bug Fixes
 
-* make all automate ([ac5b394](https://github.com/justdlabs/inertia.ts/commit/ac5b3945c2cb5576a908939a2b9420b9db05d411))
-
+-   make all automate ([ac5b394](https://github.com/justdlabs/inertia.ts/commit/ac5b3945c2cb5576a908939a2b9420b9db05d411))
 
 ### Chores
 
-* Update build command in readme ([7076e29](https://github.com/justdlabs/inertia.ts/commit/7076e29aed986a524adecce8b4176df531a6485d))
+-   Update build command in readme ([7076e29](https://github.com/justdlabs/inertia.ts/commit/7076e29aed986a524adecce8b4176df531a6485d))
diff --git a/composer.json b/composer.json
@@ -1,6 +1,6 @@
 {
     "name": "justd/laravel",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "type": "project",
     "description": "The skeleton application for the Laravel framework.",
     "keywords": [

diff --git a/composer.lock b/composer.lock
diff --git a/package.json b/package.json
@@ -80,5 +80,5 @@
             }
         }
     },
-    "version": "1.0.2"
+    "version": "1.0.3"
 }
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -10,8 +10,8 @@
         --card: 0 0% 100%;
         --card-header: 240 5% 99%;
 
-        --popover: 0 0% 100%;
-        --popover-fg: 240 10% 3.9%;
+        --overlay: 0 0% 100%;
+        --overlay-fg: 240 10% 3.9%;
 
         --primary: 216 98% 52%;
         --primary-fg: 0 0% 100%;
@@ -49,8 +49,8 @@
         --card: 240 10% 3.9%;
         --card-header: 240 6% 6%;
 
-        --popover: 240 6% 6%;
-        --popover-fg: 0 0% 98%;
+        --overlay: 240 6% 6%;
+        --overlay-fg: 0 0% 98%;
 
         --secondary: 240 3.7% 15.9%;
         --secondary-fg: 0 0% 98%;

diff --git a/resources/js/components/navbar.tsx b/resources/js/components/navbar.tsx
@@ -22,7 +22,6 @@ import {
     Sheet,
     SheetContent,
     SheetHeader,
-    SheetOverlay,
     SheetTitle,
     useMediaQuery
 } from 'ui'
@@ -155,7 +154,9 @@ function UserMenu() {
                             <ThemeSwitcher />
                         </div>
                         <div>{auth.user.name}</div>
-                        <div className="text-muted-fg font-normal text-sm">{auth.user.email}</div>
+                        <div className="text-muted-fg font-normal text-sm whitespace-nowrap truncate pr-10">
+                            {auth.user.email}
+                        </div>
                     </MenuHeader>
                 </MenuSection>
                 <MenuItem href={route('dashboard')}>Dashboard</MenuItem>
@@ -196,17 +197,15 @@ function ResponsiveNavbar() {
                             <IconHamburger />
                             Menu
                         </Button>
-                        <SheetOverlay>
-                            <SheetContent>
-                                <SheetHeader className="text-left">
-                                    <SheetTitle className="inline-flex items-center gap-x-2">
-                                        <Logo />
-                                        {import.meta.env.VITE_APP_NAME}
-                                    </SheetTitle>
-                                </SheetHeader>
-                                <NavContent />
-                            </SheetContent>
-                        </SheetOverlay>
+                        <SheetContent>
+                            <SheetHeader className="text-left">
+                                <SheetTitle className="inline-flex items-center gap-x-2">
+                                    <Logo />
+                                    {import.meta.env.VITE_APP_NAME}
+                                </SheetTitle>
+                            </SheetHeader>
+                            <NavContent />
+                        </SheetContent>
                     </Sheet>
 
                     <Link href="/">

diff --git a/resources/js/components/ui/card.tsx b/resources/js/components/ui/card.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 
 import type { HeadingProps, TextProps } from 'react-aria-components'
@@ -9,7 +11,7 @@ import { Description } from './field'
 const card = tv({
     slots: {
         root: [
-            'xrkr rounded-lg xkd2 [&:has(table)_.ccvgs8x]:border-t [&:has(table)_.x32]:bg-tertiary [&:has(table)]:overflow-hidden border bg-card text-fg shadow-sm [&:has(.larhy3):not(:has(.yahnba))>.ccvgs8x]:pt-6 [&:has(.larhy3)]:overflow-hidden [&_table]:overflow-hidden'
+            'xrkr rounded-lg xkd2 [&:has(table)_.ccvgs8x]:border-t [&:has(table)_.x32]:bg-tertiary [&:has(table)]:overflow-hidden border bg-background text-fg shadow-sm [&:has(.larhy3):not(:has(.yahnba))>.ccvgs8x]:pt-6 [&:has(.larhy3)]:overflow-hidden [&_table]:overflow-hidden'
         ],
         header: 'flex xlw32 flex-col space-y-1.5 px-6 py-5',
         title: 'text-lg klda font-semibold leading-none tracking-tight',

diff --git a/resources/js/components/ui/dialog.tsx b/resources/js/components/ui/dialog.tsx
@@ -1,16 +1,150 @@
-import { Dialog as DialogPrimitive, type DialogProps } from 'react-aria-components'
-import { twMerge } from 'tailwind-merge'
+import * as React from 'react'
+
+import { IconX } from '@irsyadadl/paranoid'
+import { Dialog as DialogPrimitive, type DialogProps, OverlayTriggerStateContext } from 'react-aria-components'
+import { tv } from 'tailwind-variants'
+
+import type { ButtonProps } from './button'
+import { Button } from './button'
+import type { HeadingProps } from './heading'
+import { Heading } from './heading'
+import { useMediaQuery } from './primitive'
+
+const dialogStyles = tv({
+    slots: {
+        root: [
+            'dlc peer relative flex max-h-[inherit] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-none peer',
+            '[&:not(:has([data-slot=dialog-body]))]:px-6 [&:has([data-slot=dialog-body])_[data-slot=dialog-header]]:px-6 [&:has([data-slot=dialog-body])_[data-slot=dialog-footer]]:px-6'
+        ],
+        header: 'relative flex flex-col pb-2.5 gap-y-0.5 pt-6',
+        title: 'flex flex-1 items-center',
+        description: 'text-sm text-muted-fg',
+        body: [
+            'flex flex-1 flex-col gap-2 overflow-auto px-6',
+            'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]'
+        ],
+        footer: 'mt-auto flex flex-col-reverse justify-between gap-3 pb-6 pt-4 sm:flex-row',
+        closeIndicator: 'close absolute right-2 top-2 size-6 z-50'
+    }
+})
+
+const { root, header, title, description, body, footer, closeIndicator } = dialogStyles()
+
+const Dialog = ({ role, className, ...props }: DialogProps) => {
+    return <DialogPrimitive {...props} role={role ?? 'dialog'} className={root({ className })} />
+}
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+    const headerRef = React.useRef<HTMLHeadingElement>(null)
+
+    React.useEffect(() => {
+        const header = headerRef.current
+        if (!header) {
+            return
+        }
+
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                header.parentElement?.style.setProperty('--dialog-header-height', `${entry.target.clientHeight}px`)
+            }
+        })
+
+        observer.observe(header)
+        return () => {
+            observer.unobserve(header)
+        }
+    }, [])
 
-const Dialog = ({ className, ...props }: DialogProps) => {
     return (
-        <DialogPrimitive
-            {...props}
-            className={twMerge(
-                'relative max-h-[inherit] overflow-y-auto p-4 focus:outline-none outline-0 [[data-placement]>&]:p-4 dlc',
-                className
-            )}
-        />
+        <div data-slot="dialog-header" ref={headerRef} className={header({ className })}>
+            {typeof props.children === 'string' ? <DialogTitle {...props} /> : props.children}
+        </div>
     )
 }
 
-export { Dialog }
+interface DialogTitleProps extends HeadingProps {
+    className?: string
+}
+
+const DialogTitle = ({ tracking = 'tight', level = 2, className, ...props }: DialogTitleProps) => (
+    <Heading slot="title" tracking={tracking} level={level} className={title({ className })} {...props} />
+)
+
+const DialogDescription = ({ className, ...props }: HeadingProps) => (
+    <p className={description({ className })} {...props} />
+)
+
+const DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div data-slot="dialog-body" className={body({ className })} {...props} />
+)
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+    const footerRef = React.useRef<HTMLDivElement>(null)
+
+    React.useEffect(() => {
+        const footer = footerRef.current
+
+        if (!footer) {
+            return
+        }
+
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                footer.parentElement?.style.setProperty('--dialog-footer-height', `${entry.target.clientHeight}px`)
+            }
+        })
+
+        observer.observe(footer)
+        return () => {
+            observer.unobserve(footer)
+        }
+    }, [])
+    return <div ref={footerRef} data-slot="dialog-footer" className={footer({ className })} {...props} />
+}
+
+const DialogClose = ({ className, ...props }: ButtonProps) => {
+    const state = React.useContext(OverlayTriggerStateContext)!
+    return <Button className={className} appearance="outline" onPress={() => state.close()} {...props} />
+}
+
+interface CloseButtonIndicatorProps {
+    className?: string
+    close: () => void
+    isDismissable?: boolean | undefined
+}
+
+const DialogCloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => {
+    const isMobile = useMediaQuery('(max-width: 600px)')
+    const buttonRef = React.useRef<HTMLButtonElement>(null)
+
+    React.useEffect(() => {
+        if (isMobile && buttonRef.current) {
+            buttonRef.current.focus()
+        }
+    }, [isMobile])
+    return props.isDismissable ? (
+        <Button
+            ref={buttonRef}
+            {...(isMobile ? { autoFocus: true } : {})}
+            appearance="plain"
+            size="square-petite"
+            aria-label="Close"
+            onPress={props.close}
+            className={closeIndicator({ className })}
+        >
+            <IconX className="size-4" />
+        </Button>
+    ) : null
+}
+
+export {
+    Dialog,
+    DialogBody,
+    DialogClose,
+    DialogCloseIndicator,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    type DialogTitleProps
+}
diff --git a/resources/js/components/ui/heading.tsx b/resources/js/components/ui/heading.tsx
@@ -0,0 +1,45 @@
+import { isIOS } from '@react-aria/utils'
+import { Heading as HeadingPrimitive, type HeadingProps as HeadingPrimitiveProps } from 'react-aria-components'
+import { tv } from 'tailwind-variants'
+
+const headingStyles = tv({
+    base: 'font-sans tracking-tight text-fg',
+    variants: {
+        level: {
+            1: 'font-bold text-lg',
+            2: 'font-semibold text-lg sm:text-lg/5',
+            3: 'font-semibold text-base/6 sm:text-base/6',
+            4: 'font-medium text-base/6 sm:text-sm/6'
+        },
+        tracking: {
+            tighter: 'tracking-tighter',
+            tight: 'tracking-tight',
+            normal: 'tracking-normal',
+            wide: 'tracking-wide',
+            wider: 'tracking-wider',
+            widest: 'tracking-widest'
+        }
+    }
+})
+
+interface HeadingProps extends HeadingPrimitiveProps {
+    level?: 1 | 2 | 3 | 4
+    tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'
+    className?: string
+}
+
+const Heading = ({ className, tracking = 'normal', level = 1, ...props }: HeadingProps) => {
+    return (
+        <HeadingPrimitive
+            level={level}
+            className={headingStyles({
+                level,
+                tracking,
+                className: isIOS() ? 'font-medium' : className
+            })}
+            {...props}
+        />
+    )
+}
+
+export { Heading, type HeadingProps }
diff --git a/resources/js/components/ui/menu.tsx b/resources/js/components/ui/menu.tsx
@@ -67,7 +67,7 @@ const MenuContent = <T extends object>({
         <Popover
             offset={currentOffset}
             className={cn(
-                'z-50 min-w-40 rounded-xl border bg-popover text-popover-fg outline-none entering:animate-in exiting:animate-out entering:fade-in-0 exiting:fade-out-0 exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',
+                'z-50 min-w-40 rounded-xl border bg-overlay text-overlay-fg outline-none entering:animate-in exiting:animate-out entering:fade-in-0 exiting:fade-out-0 exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',
                 popoverClassName
             )}
             {...props}
@@ -78,7 +78,7 @@ const MenuContent = <T extends object>({
                         width={12}
                         height={12}
                         viewBox="0 0 12 12"
-                        className="block fill-popover stroke-border group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]"
+                        className="block fill-overlay stroke-border group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]"
                     >
                         <path d="M0 0 L6 6 L12 0" />
                     </svg>
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,5 +80,5 @@ @@
                 }
             }
         },
-        "version": "1.0.2"
+        "version": "1.0.3"
     }