Merge pull request #98 from justdlabs/laravel-11.x

Laravel 11.x

CHANGELOG.md

@@ -1,5 +1,7 @@
 
 
+## [1.0.15](https://github.com/justdlabs/inertia.ts/compare/1.0.14...1.0.15) (2024-09-01)
+
 ## [1.0.14](https://github.com/justdlabs/inertia.ts/compare/1.0.13...1.0.14) (2024-08-22)
 
 ## [1.0.13](https://github.com/justdlabs/inertia.ts/compare/1.0.12...1.0.13) (2024-08-13)

composer.json

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

package.json

@@ -9,21 +9,21 @@
         "preview": "tsc && npm run build && php artisan inertia:start-ssr"
     },
     "devDependencies": {
-        "@commitlint/cli": "^19.4.0",
-        "@commitlint/config-conventional": "^19.2.2",
+        "@commitlint/cli": "^19.4.1",
+        "@commitlint/config-conventional": "^19.4.1",
         "@inertiajs/react": "^1.2.0",
         "@release-it/bumper": "^6.0.1",
         "@release-it/conventional-changelog": "^8.0.1",
-        "@tailwindcss/forms": "^0.5.7",
-        "@types/node": "^18.19.45",
-        "@types/react": "^18.3.4",
+        "@tailwindcss/forms": "^0.5.8",
+        "@types/node": "^18.19.47",
+        "@types/react": "^18.3.5",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
         "autoprefixer": "^10.4.20",
-        "axios": "^1.7.4",
+        "axios": "^1.7.7",
         "husky": "^9.1.5",
         "laravel-vite-plugin": "^1.0.5",
-        "postcss": "^8.4.41",
+        "postcss": "^8.4.42",
         "prettier": "^3.3.3",
         "prettier-plugin-organize-imports": "^4.0.0",
         "prettier-plugin-tailwindcss": "^0.6.6",
@@ -37,8 +37,8 @@
     },
     "dependencies": {
         "clsx": "^2.1.1",
-        "framer-motion": "^11.3.29",
-        "justd-icons": "^1.4.39",
+        "framer-motion": "^11.3.31",
+        "justd-icons": "^1.4.44",
         "react-aria-components": "^1.3.3",
         "sonner": "^1.5.0",
         "tailwind-merge": "^2.5.2",
@@ -80,5 +80,5 @@
             }
         }
     },
-    "version": "1.0.14"
+    "version": "1.0.15"
 }

resources/js/components/ui/avatar.tsx

@@ -23,6 +23,7 @@ const avatarStyles = tv({
     ],
     variants: {
         size: {
+            'extra-small': 'size-5',
             small: 'size-6',
             medium: 'size-8',
             large: 'size-10'
@@ -109,6 +110,7 @@ const avatarBadgeStyles = tv({
     base: ['size-3 z-1 absolute bottom-0 right-0 z-10 rounded-full ring-[1.5px] ring-bg bg-bg'],
     variants: {
         size: {
+            'extra-small': 'size-[0.360rem] translate-x-[0%] translate-y-[0%]',
             small: 'size-1.5 translate-x-[0%] translate-y-[0%]',
             medium: 'size-2 translate-x-[5%] translate-y-[5%]',
             large: 'size-2.5 translate-x-[5%] translate-y-[5%]'

resources/js/components/ui/card.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 
 import type { HeadingProps, TextProps } from 'react-aria-components'
-import { Heading } from 'react-aria-components'
+import { Heading, Text } from 'react-aria-components'
 import { tv } from 'tailwind-variants'
 
-import { Description } from './field'
+import { cn } from './primitive'
 
 const card = tv({
     slots: {
@@ -26,39 +26,40 @@ const Card = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) =>
     return <div className={root({ className })} {...props} />
 }
 
-interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string
     description?: string
+    withoutPadding?: boolean
 }
 
-const CardHeader = ({ className, title, description, children, ...props }: CardHeaderProps) => (
-    <div className={header({ className })} {...props}>
-        {title && <CardTitle>{title}</CardTitle>}
-        {description && <CardDescription>{description}</CardDescription>}
-        {!title && typeof children === 'string' ? <CardTitle>{children}</CardTitle> : children}
+const Header = ({ withoutPadding = false, className, title, description, children, ...props }: HeaderProps) => (
+    <div className={header({ className: cn(className, withoutPadding && 'px-0 pt-0') })} {...props}>
+        {title && <Title>{title}</Title>}
+        {description && <Description>{description}</Description>}
+        {!title && typeof children === 'string' ? <Title>{children}</Title> : children}
     </div>
 )
 
-const CardTitle = ({ className, ...props }: HeadingProps) => {
+const Title = ({ className, ...props }: HeadingProps) => {
     return <Heading slot="title" className={title({ className })} {...props} />
 }
 
-const CardDescription = (props: TextProps) => {
-    return <Description className={description({ className: props.className })} {...props} />
+const Description = ({ className, ...props }: TextProps) => {
+    return <Text {...props} slot="description" className={description({ className })} {...props} />
 }
 
-const CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+const Content = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
     return <div className={content({ className })} {...props} />
 }
 
-const CardFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
     return <div className={footer({ className })} {...props} />
 }
 
-Card.Content = CardContent
-Card.Description = CardDescription
-Card.Footer = CardFooter
-Card.Header = CardHeader
-Card.Title = CardTitle
+Card.Content = Content
+Card.Description = Description
+Card.Footer = Footer
+Card.Header = Header
+Card.Title = Title
 
 export { Card }

resources/js/components/ui/dialog.tsx

@@ -39,7 +39,7 @@ const Dialog = ({ role, className, ...props }: DialogPrimitiveProps) => {
     return <DialogPrimitive {...props} role={role ?? 'dialog'} className={root({ className })} />
 }
 
-interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
     title?: string
     description?: string
 }
@@ -72,7 +72,7 @@ const Header = ({ className, ...props }: DialogHeaderProps) => {
     )
 }
 
-interface DialogTitleProps extends HeadingProps {
+type DialogTitleProps = HeadingProps & {
     className?: string
 }
 

resources/js/components/ui/dropdown.tsx

@@ -16,11 +16,11 @@ import { cn, cr } from './primitive'
 const dropdownItemStyles = tv({
     base: [
         'group flex cursor-default select-none items-center gap-x-1.5 rounded-[calc(var(--radius)-1px)] py-2 pl-2.5 relative pr-1.5 text-base outline outline-0 forced-color-adjust-none lg:text-sm',
-        '[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5',
-        '[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0',
         'has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger',
-        'has-submenu:open:bg-accent has-submenu:open:text-accent-fg',
-        'forced-colors:[&>[data-slot=icon]]:text-[CanvasText] forced-colors:[&>[data-slot=icon]]:group-data-[focus]/option:text-[Canvas]'
+        'has-submenu:open:bg-accent has-submenu:open:text-accent-fg [&[data-has-submenu][data-open]>[data-slot=icon]]:text-accent-fg',
+        '[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5',
+        '[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-muted-fg [&[data-hovered]>[data-slot=icon]]:text-accent-fg [&[data-focused]>[data-slot=icon]]:text-accent-fg [&[data-danger]>[data-slot=icon]]:text-danger/60',
+        'forced-colors:[&>[data-slot=icon]]:text-[CanvasText] forced-colors:[&>[data-slot=icon]]:group-data-[focus]:text-[Canvas] '
     ],
     variants: {
         isDisabled: {
@@ -45,10 +45,6 @@ const dropdownItemStyles = tv({
     ]
 })
 
-interface DropdownSectionProps<T> extends SectionProps<T> {
-    title?: string
-}
-
 const dropdownSectionStyles = tv({
     slots: {
         section: "first:-mt-[5px] xss3 flex flex-col gap-y-0.5 after:content-[''] after:block after:h-[5px]",
@@ -58,6 +54,10 @@ const dropdownSectionStyles = tv({
 
 const { section, header } = dropdownSectionStyles()
 
+interface DropdownSectionProps<T> extends SectionProps<T> {
+    title?: string
+}
+
 const DropdownSection = <T extends object>({ className, ...props }: DropdownSectionProps<T>) => {
     return (
         <Section className={section({ className })}>

resources/js/components/ui/field.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import * as React from 'react'
 
 import {

resources/js/components/ui/form.tsx

@@ -1,10 +1,8 @@
-import type { FormProps as FormPrimitiveProps } from 'react-aria-components'
+import type { FormProps } from 'react-aria-components'
 import { Form as FormPrimitive } from 'react-aria-components'
 
-interface FormProps extends FormPrimitiveProps {}
-
 const Form = (props: FormProps) => {
     return <FormPrimitive {...props} />
 }
 
-export { Form, type FormProps }
+export { Form }

resources/js/components/ui/list-box.tsx

@@ -27,10 +27,14 @@ const ListBox = <T extends object>({ children, className, ...props }: ListBoxPro
 )
 
 const listBoxItemStyles = tv({
-    base: 'lbi cursor-pointer relative rounded-[calc(var(--radius)-1px)] p-2 text-base outline-none transition lg:text-sm',
+    base: 'lbi cursor-pointer relative rounded-[calc(var(--radius)-1px)] p-2 text-base outline-none lg:text-sm',
     variants: {
-        isFocusVisible: { true: 'bg-secondary text-secondary-fg' },
-        isHovered: { true: 'bg-accent text-accent-fg' },
+        isFocusVisible: {
+            true: 'bg-secondary [&:focus-visible_[slot=label]]:text-accent-fg [&:focus-visible_[slot=description]]:text-accent-fg/70 text-secondary-fg'
+        },
+        isHovered: {
+            true: 'bg-accent [&:hover_[slot=label]]:text-accent-fg [&:hover_[slot=description]]:text-accent-fg/70 text-accent-fg [&_.text-muted-fg]:text-accent-fg/80'
+        },
         isFocused: {
             true: '[&_[data-slot=icon]]:text-accent-fg [&_[data-slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80 bg-accent text-accent-fg'
         },
@@ -44,7 +48,7 @@ const listBoxItemStyles = tv({
     }
 })
 
-interface ListBoxItemProps<T extends Object> extends ListBoxItemPrimitiveProps<T> {
+interface ListBoxItemProps<T extends object> extends ListBoxItemPrimitiveProps<T> {
     className?: string
 }
 
@@ -91,7 +95,7 @@ const ListBoxItem = <T extends object>({ children, className, ...props }: ListBo
     )
 }
 
-interface ListBoxPickerProps<T> extends ListBoxProps<T> {}
+type ListBoxPickerProps<T> = ListBoxProps<T>
 
 const ListBoxPicker = <T extends object>({ className, ...props }: ListBoxPickerProps<T>) => {
     return <ListBoxPrimitive className={cn('max-h-72 overflow-auto p-1 outline-none', className)} {...props} />

resources/js/components/ui/menu.tsx

@@ -81,7 +81,6 @@ const Content = <T extends object>({
     className,
     showArrow = false,
     popoverClassName,
-    offset = 4,
     ...props
 }: MenuContentProps<T>) => {
     const { respectScreen } = React.useContext(MenuContext)
@@ -126,11 +125,10 @@ const Item = ({ className, isDanger = false, children, ...props }: MenuItemProps
 }
 
 export interface MenuHeaderProps extends React.ComponentProps<typeof Header> {
-    inset?: boolean
     separator?: boolean
 }
 
-const MenuHeader = ({ className, inset, separator = false, ...props }: MenuHeaderProps) => (
+const MenuHeader = ({ className, separator = false, ...props }: MenuHeaderProps) => (
     <Header
         className={cn(
             'p-2 text-base font-semibold sm:text-sm',

resources/js/components/ui/modal.tsx

@@ -64,7 +64,7 @@ const modalContentStyles = tv({
     }
 })
 
-interface ModalProps extends DialogTriggerProps {}
+type ModalProps = DialogTriggerProps
 const Modal = ({ children, ...props }: ModalProps) => {
     return <DialogTriggerPrimitive {...props}>{children}</DialogTriggerPrimitive>
 }

resources/js/components/ui/pagination.tsx

@@ -98,7 +98,6 @@ const PaginationItem = ({
     size = 'square-petite',
     appearance = 'outline',
     intent,
-    shape = 'square',
     className,
     isCurrent,
     children,

resources/js/components/ui/sheet.tsx

@@ -37,17 +37,17 @@ const generateCompoundVariants = (sides: Array<Sides>) => {
         isStack: true,
         className:
             side === 'top'
-                ? 'top-2 inset-x-2 rounded-lg border'
+                ? 'top-2 inset-x-2 rounded-xl ring-1 border-b-0 ring-dark/5 dark:ring-border'
                 : side === 'bottom'
-                  ? 'bottom-2 inset-x-2 rounded-lg border'
+                  ? 'bottom-2 inset-x-2 rounded-xl ring-1 border-t-0 ring-dark/5 dark:ring-border'
                   : side === 'left'
-                    ? 'left-2 inset-y-2 rounded-lg border'
-                    : 'right-2 inset-y-2 rounded-lg border'
+                    ? 'left-2 inset-y-2 rounded-xl ring-1 border-r-0 ring-dark/5 dark:ring-border'
+                    : 'right-2 inset-y-2 rounded-xl ring-1 border-l-0 ring-dark/5 dark:ring-border'
     }))
 }
 
 const sheetContentStyles = tv({
-    base: 'fixed z-50 grid gap-4 bg-overlay text-overlay-fg shadow-lg transition ease-in-out',
+    base: 'fixed z-50 grid gap-4 bg-overlay border-dark/5 dark:border-border text-overlay-fg shadow-lg transition ease-in-out',
     variants: {
         isEntering: {
             true: 'duration-300 animate-in '
@@ -124,7 +124,7 @@ const SheetContent = ({
                 )}
                 {...props}
             >
-                <Dialog role={role} className="h-full">
+                <Dialog role={role} aria-label={props['aria-label'] ?? undefined} className="h-full">
                     {(values) => (
                         <>
                             {props.children}