Laravel 11.x

CHANGELOG.md

@@ -1,11 +1,12 @@
 # Changelog
 
-## [1.3.13](https://github.com/justdlabs/inertia.ts/compare/v1.3.12...v1.3.13) (2025-01-18)
+## [1.3.14](https://github.com/justdlabs/inertia.ts/compare/v1.3.13...v1.3.14) (2025-01-21)
 
+## [1.3.13](https://github.com/justdlabs/inertia.ts/compare/v1.3.12...v1.3.13) (2025-01-18)
 
 ### Bug Fixes
 
-* fix navbar ([9530797](https://github.com/justdlabs/inertia.ts/commit/953079745aacaea85dc86f61e92a6e7a1da2100c))
+- fix navbar ([9530797](https://github.com/justdlabs/inertia.ts/commit/953079745aacaea85dc86f61e92a6e7a1da2100c))
 
 ## [1.3.12](https://github.com/justdlabs/inertia.ts/compare/v1.3.11...v1.3.12) (2025-01-18)
 

package.json

@@ -33,16 +33,16 @@
     "@tailwindcss/vite": "^4.0.0-beta.9",
     "@types/node": "^22.10.7",
     "clsx": "^2.1.1",
-    "justd-icons": "^1.10.20",
-    "motion": "^11.18.1",
+    "justd-icons": "^1.10.21",
+    "motion": "^12.0.0",
     "react": "^19.0.0",
     "react-aria-components": "^1.6.0",
     "react-dom": "^19.0.0",
     "sonner": "^1.7.2",
     "tailwind-merge": "^2.6.0",
-    "tailwind-variants": "^0.3.0",
+    "tailwind-variants": "^0.3.1",
     "tailwindcss-animate": "^1.0.7",
-    "vite": "^6.0.7"
+    "vite": "^6.0.11"
   },
-  "version": "1.3.13"
+  "version": "1.3.14"
 }

resources/css/app.css

@@ -4,7 +4,7 @@
 @variant dark (&:is(.dark *));
 
 @theme {
-  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  --font-sans: 'var(--font-sans)', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
   --font-mono: var(--font-mono), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';

resources/js/components/ui/button.tsx

@@ -36,7 +36,7 @@ const buttonStyles = tv({
         'inset-shadow-white/25 data-hovered:inset-shadow-white/30 data-pressed:inset-shadow-white/25'
       ],
       danger: [
-        'outline-danger [--btn-bg:var(--color-danger)] [--btn-border:var(--color-danger)] [--btn-fg:var(--color-danger-fg)] dark:[--btn-bg:var(--color-danger)]',
+        'outline-danger [--btn-bg:theme(--color-danger/95%)] [--btn-border:var(--color-danger)] [--btn-fg:var(--color-danger-fg)] dark:[--btn-bg:var(--color-danger)]',
         '[--btn-danger-hovered:color-mix(in_oklab,var(--color-danger)_93%,white_7%)]',
         'dark:[--btn-danger-hovered:color-mix(in_oklab,var(--color-danger)_96%,white_4%)]',
         '[--btn-bg-hovered:var(--btn-danger-hovered)] [--btn-border-hovered:var(--btn-danger-hovered)]',

resources/js/components/ui/dialog.tsx

@@ -11,12 +11,12 @@ import { Button, type ButtonProps } from './button';
 const dialogStyles = tv({
   slots: {
     root: [
-      'peer group/dialog relative flex max-h-[inherit] flex-col overflow-hidden outline-hidden [scrollbar-width:thin] not-has-data-[slot=dialog-body]:**:data-[slot=dialog-header]:pb-0 [&::-webkit-scrollbar]:size-0.5'
+      'peer/dialog group/dialog relative flex max-h-[inherit] flex-col overflow-hidden outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5'
     ],
-    header: 'relative flex flex-col gap-0.5 p-4 sm:gap-1 sm:p-6',
+    header:
+      'relative flex flex-col gap-0.5 p-4 sm:gap-1 sm:p-6 [&[data-slot=dialog-header]:has(+[data-slot=dialog-footer])]:pb-0',
     description: 'text-muted-fg text-sm',
     body: [
-      'has-[input]:pb-1',
       'isolate flex flex-1 flex-col overflow-auto px-4 sm:px-6',
       'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]'
     ],

resources/js/components/ui/dropdown.tsx

@@ -23,7 +23,8 @@ const dropdownItemStyles = tv({
     '**:data-[slot=avatar]:*:mr-2 **:data-[slot=avatar]:*:size-6 **:data-[slot=avatar]:mr-2 **:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:*:size-5 sm:**:data-[slot=avatar]:size-5',
     'data-danger:**:data-[slot=icon]:text-danger/70 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg data-focused:data-danger:**:data-[slot=icon]:text-danger-fg',
     'data-[slot=menu-radio]:*:data-[slot=icon]:size-3 *:data-[slot=icon]:mr-2',
-    'forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focused:**:data-[slot=icon]:text-[Canvas] '
+    'forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focused:**:data-[slot=icon]:text-[Canvas] ',
+    '[&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-0'
   ],
   variants: {
     isDisabled: {

resources/js/components/ui/link.tsx

@@ -5,7 +5,7 @@ import { focusButtonStyles } from './primitive';
 
 const linkStyles = tv({
   extend: focusButtonStyles,
-  base: 'rounded transition-[color,_opacity] data-disabled:cursor-default data-disabled:opacity-60 forced-colors:data-disabled:text-[GrayText]',
+  base: 'transition-[color,_opacity] data-disabled:cursor-default data-disabled:opacity-60 forced-colors:data-disabled:text-[GrayText]',
   variants: {
     intent: {
       unstyled: 'text-current',

resources/js/components/ui/loader.tsx

@@ -168,7 +168,7 @@ const LOADERS = {
   spin: Spin
 };
 
-const DEFAULT_SPINNER = 'ring';
+const DEFAULT_SPINNER = 'spin';
 
 interface LoaderProps
   extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'display' | 'opacity' | 'intent'>,

resources/js/components/ui/menu.tsx

@@ -100,10 +100,7 @@ const MenuContent = <T extends object>({
       respectScreen={respectScreen}
       showArrow={showArrow}
       className={popover({
-        className: cn([
-          showArrow && 'data-[placement=left]:mt-[-0.38rem] data-[placement=right]:mt-[-0.38rem]',
-          popoverClassName
-        ])
+        className: popoverClassName
       })}
       {...props}
     >

resources/js/components/ui/modal.tsx

@@ -47,7 +47,7 @@ const content = tv({
     }
   },
   defaultVariants: {
-    size: 'xl'
+    size: 'lg'
   }
 });
 
@@ -102,7 +102,6 @@ const ModalContent = ({
             className
           })
         )}
-        {...props}
       >
         <Dialog aria-label={props['aria-label']} role={role}>
           {(values) => (

resources/js/components/ui/popover.tsx

@@ -16,6 +16,7 @@ import {
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
+import { cn } from '@/utils/classes';
 import { useMediaQuery } from '@/utils/use-media-query';
 import { twMerge } from 'tailwind-merge';
 import type { DialogBodyProps, DialogFooterProps, DialogHeaderProps, DialogTitleProps } from './dialog';
@@ -35,33 +36,34 @@ const Header = ({ className, ...props }: DialogHeaderProps) => (
 );
 
 const Footer = ({ className, ...props }: DialogFooterProps) => (
-  <Dialog.Footer className={twMerge('sm:p-4', className)} {...props} />
+  <Dialog.Footer className={cn('sm:p-4', className)} {...props} />
 );
 
 const Body = ({ className, ref, ...props }: DialogBodyProps) => (
-  <Dialog.Body ref={ref} className={twMerge('sm:px-4', className)} {...props} />
+  <Dialog.Body ref={ref} className={cn('sm:px-4 sm:pt-0', className)} {...props} />
 );
 
 const content = tv({
   base: [
-    'max-w-xs rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-xs transition-transform [scrollbar-width:thin] peer-not-has-[data=dialog-header]:p-4 sm:max-w-3xl sm:text-sm dark:backdrop-saturate-200 forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5'
+    'peer/popover-content max-w-xs rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-xs transition-transform [scrollbar-width:thin] sm:max-w-3xl sm:text-sm dark:backdrop-saturate-200 forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5'
   ],
   variants: {
-    isPicker: { true: 'max-h-72 min-w-(--trigger-width) overflow-y-auto p-0', false: 'min-w-80' },
+    isPicker: {
+      true: 'max-h-72 min-w-(--trigger-width) overflow-y-auto',
+      false: 'min-w-80'
+    },
     isMenu: {
-      true: {
-        true: 'p-0'
-      }
+      true: 'p-0'
     },
     isEntering: {
       true: [
-        'fade-in animate-in duration-100 ease-out',
+        'fade-in animate-in duration-150 ease-out',
         'data-[placement=left]:slide-in-from-right-1 data-[placement=right]:slide-in-from-left-1 data-[placement=top]:slide-in-from-bottom-1 data-[placement=bottom]:slide-in-from-top-1'
       ]
     },
     isExiting: {
       true: [
-        'fade-out animate-out duration-50 ease-in',
+        'fade-out animate-out duration-100 ease-in',
         'data-[placement=left]:slide-out-to-right-1 data-[placement=right]:slide-out-to-left-1 data-[placement=top]:slide-out-to-bottom-1 data-[placement=bottom]:slide-out-to-top-1'
       ]
     }
@@ -75,7 +77,7 @@ const drawer = tv({
   variants: {
     isMenu: {
       true: 'rounded-t-xl p-0 [&_[role=dialog]]:*:not-has-[[data-slot=dialog-body]]:px-1',
-      false: 'rounded-t-2xl py-4'
+      false: 'rounded-t-2xl'
     },
     isEntering: {
       true: [
@@ -129,11 +131,7 @@ const PopoverContent = ({
           drawer({ ...renderProps, isMenu, className })
         )}
       >
-        <Dialog
-          role="dialog"
-          aria-label={isMenu ? 'Menu' : props['aria-label']}
-          className="touch-none p-0 data-focused:outline-hidden sm:p-0"
-        >
+        <Dialog role="dialog" className="outline-hidden">
           {children}
         </Dialog>
       </Modal>
@@ -161,7 +159,9 @@ const PopoverContent = ({
           </svg>
         </OverlayArrow>
       )}
-      {children}
+      <Dialog role="dialog" className="outline-hidden">
+        {children}
+      </Dialog>
     </PopoverPrimitive>
   );
 };