update components and packages to new versions

Author: ozziexsh

README.md

@@ -105,7 +105,7 @@ First install dependencies and run the build script
 
 ```shell
 npm install
-npm build
+npm run build
 ```
 
 Then create a fresh laravel install with jetstream

src/commands/install.ts

@@ -25,33 +25,31 @@ export default class Install extends Command {
   static args = [];
 
   private devDeps = {
-    '@prettier/plugin-php': '^0.18.4',
-    '@tailwindcss/forms': '^0.5.2',
-    '@tailwindcss/typography': '^0.5.2',
+    '@prettier/plugin-php': '^0.22.2',
+    '@tailwindcss/forms': '^0.5.8',
+    '@tailwindcss/typography': '^0.5.15',
     '@types/lodash': '^4.14.181',
-    '@types/react': '^18.0.25',
-    '@types/react-dom': '^18.0.8',
-    '@types/ziggy-js': '^1.3.0',
-    '@vitejs/plugin-react': '^2.2.0',
-    autoprefixer: '^10.4.7',
-    'laravel-vite-plugin': '^0.7.7',
-    postcss: '^8.4.14',
-    prettier: '^2.8.4',
-    tailwindcss: '^3.2.7',
-    typescript: '^4.6.3',
-    vite: '^3.0.0',
+    '@types/react': '^18.3.5',
+    '@types/react-dom': '^18.3.0',
+    '@vitejs/plugin-react': '^4.3.1',
+    autoprefixer: '^10.4.20',
+    'laravel-vite-plugin': '^1.0.5',
+    postcss: '^8.4.41',
+    prettier: '^3.3.3',
+    tailwindcss: '^3.4.10',
+    typescript: '^5.5.4',
+    vite: '^5.4.2',
   };
 
   private deps = {
-    '@headlessui/react': '^1.7.11',
-    '@inertiajs/core': '^1.0.2',
-    '@inertiajs/react': '^1.0.2',
-    axios: '^0.26.1',
-    classnames: '^2.3.1',
+    '@headlessui/react': '^2.1.3',
+    '@inertiajs/react': '^1.2.0',
+    axios: '^1.7.6',
+    classnames: '^2.5.1',
     lodash: '^4.17.21',
-    react: '^18.2.0',
-    'react-dom': '^18.2.0',
-    'ziggy-js': '^1.4.5',
+    react: '^18.3.1',
+    'react-dom': '^18.3.1',
+    'ziggy-js': '^2.3.0',
   };
 
   private oldDeps = [

src/stubs/resources/js/Components/Dropdown.tsx

@@ -12,7 +12,7 @@ interface Props {
 export default function Dropdown({
   align = 'right',
   width = '48',
-  contentClasses = 'py-1 bg-white dark:bg-gray-700',
+  contentClasses = 'py-1 bg-white',
   renderTrigger,
   children,
 }: PropsWithChildren<Props>) {
@@ -51,23 +51,24 @@ export default function Dropdown({
         leave="transition ease-in duration-75"
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
-        className={'relative z-50'}
       >
-        <div
-          className={classNames(
-            'absolute mt-2 rounded-md shadow-lg',
-            widthClass,
-            alignmentClasses,
-          )}
-          onClick={() => setOpen(false)}
-        >
+        <div className={'relative z-50'}>
           <div
             className={classNames(
-              'rounded-md ring-1 ring-black ring-opacity-5',
-              contentClasses,
+              'absolute mt-2 rounded-md shadow-lg',
+              widthClass,
+              alignmentClasses,
             )}
+            onClick={() => setOpen(false)}
           >
-            {children}
+            <div
+              className={classNames(
+                'rounded-md ring-1 ring-black ring-opacity-5',
+                contentClasses,
+              )}
+            >
+              {children}
+            </div>
           </div>
         </div>
       </Transition>

src/stubs/resources/js/Components/Modal.tsx

@@ -1,4 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, Transition, TransitionChild } from '@headlessui/react';
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 import ReactDOM from 'react-dom';
@@ -28,7 +28,7 @@ export default function Modal({
   }
 
   return ReactDOM.createPortal(
-    <Transition.Root show={isOpen} as={React.Fragment}>
+    <Transition show={isOpen} as={React.Fragment}>
       <Dialog
         as="div"
         static
@@ -37,7 +37,7 @@ export default function Modal({
         onClose={onClose}
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <Transition.Child
+          <TransitionChild
             as={React.Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -46,8 +46,8 @@ export default function Modal({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </TransitionChild>
 
           {/* This element is to trick the browser into centering the modal contents. */}
           <span
@@ -56,7 +56,7 @@ export default function Modal({
           >
             &#8203;
           </span>
-          <Transition.Child
+          <TransitionChild
             as={React.Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -67,16 +67,16 @@ export default function Modal({
           >
             <div
               className={classNames(
-                'inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full',
+                'inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full',
                 maxWidthClass,
               )}
             >
               {children}
             </div>
-          </Transition.Child>
+          </TransitionChild>
         </div>
       </Dialog>
-    </Transition.Root>,
+    </Transition>,
     document.body,
   );
 }

src/stubs/resources/js/Hooks/useRoute.ts

@@ -1,4 +1,4 @@
-import route from 'ziggy-js';
+import { route } from 'ziggy-js';
 import { createContext, useContext } from 'react';
 
 export const RouteContext = createContext<typeof route | null>(null);