kaze 1.1.0 → 1.2.1

data/stubs/inertia-react-ts/app/javascript/Components/DangerButton.tsx

@@ -9,7 +9,7 @@ export default function DangerButton({
   return (
     <button
       {...props}
-      className={`inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
+      className={`inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
         disabled && 'opacity-25'
       } ${className}`}
       disabled={disabled}

data/stubs/inertia-react-ts/app/javascript/Components/Dropdown.tsx

@@ -86,7 +86,7 @@ const DropdownLink = ({ className = '', children, ...props }: InertiaLinkProps)
   return (
     <Link
       {...props}
-      className={`block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ${className}`}
+      className={`block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ${className}`}
     >
       {children}
     </Link>

data/stubs/inertia-react-ts/app/javascript/Components/NavLink.tsx

@@ -9,7 +9,7 @@ export default function NavLink({
   return (
     <Link
       {...props}
-      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ${
+      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-hidden ${
         active
           ? 'border-indigo-400 dark:border-indigo-600 text-gray-900 dark:text-gray-100 focus:border-indigo-700 '
           : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 '

data/stubs/inertia-react-ts/app/javascript/Components/PrimaryButton.tsx

@@ -9,7 +9,7 @@ export default function PrimaryButton({
   return (
     <button
       {...props}
-      className={`inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
+      className={`inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150 ${
         disabled && 'opacity-25'
       } ${className}`}
       disabled={disabled}

data/stubs/inertia-react-ts/app/javascript/Components/ResponsiveNavLink.tsx

@@ -13,7 +13,7 @@ export default function ResponsiveNavLink({
         active
           ? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300'
           : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600'
-      } text-base font-medium focus:outline-none transition duration-150 ease-in-out ${className}`}
+      } text-base font-medium focus:outline-hidden transition duration-150 ease-in-out ${className}`}
     >
       {children}
     </Link>

data/stubs/inertia-react-ts/app/javascript/Components/SecondaryButton.tsx

@@ -11,7 +11,7 @@ export default function SecondaryButton({
     <button
       {...props}
       type={type}
-      className={`inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150 ${
+      className={`inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-xs hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150 ${
         disabled && 'opacity-25'
       } ${className}`}
       disabled={disabled}

data/stubs/inertia-react-ts/app/javascript/Components/TextInput.tsx

@@ -25,7 +25,7 @@ export default forwardRef(function TextInput(
     <input
       {...props}
       type={type}
-      className={`border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm ${className}`}
+      className={`border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-xs ${className}`}
       ref={localRef}
     />
   )

data/stubs/inertia-react-ts/app/javascript/Layouts/AuthenticatedLayout.tsx

@@ -39,7 +39,7 @@ export default function AuthenticatedLayout({ header, children }: PropsWithChild
                     <span className="inline-flex rounded-md">
                       <button
                         type="button"
-                        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150"
+                        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-hidden transition ease-in-out duration-150"
                       >
                         {user.name}
 
@@ -72,7 +72,7 @@ export default function AuthenticatedLayout({ header, children }: PropsWithChild
             <div className="-me-2 flex items-center sm:hidden">
               <button
                 onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
-                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
+                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
               >
                 <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                   <path
@@ -119,7 +119,7 @@ export default function AuthenticatedLayout({ header, children }: PropsWithChild
       </nav>
 
       {header && (
-        <header className="bg-white shadow">
+        <header className="bg-white shadow-sm">
           <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">{header}</div>
         </header>
       )}

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/Login.tsx

@@ -73,7 +73,7 @@ export default function Login({ status }: { status?: string }) {
         <div className="flex items-center justify-end mt-4">
           <Link
             href={password_request_path()}
-            className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+            className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
           >
             Forgot your password?
           </Link>

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/Register.tsx

@@ -99,7 +99,7 @@ export default function Register() {
         <div className="flex items-center justify-end mt-4">
           <Link
             href={login_path()}
-            className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+            className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
           >
             Already registered?
           </Link>

data/stubs/inertia-react-ts/app/javascript/Pages/Auth/VerifyEmail.tsx

@@ -36,7 +36,7 @@ export default function VerifyEmail({ status }: { status?: string }) {
             href={logout_path()}
             method="post"
             as="button"
-            className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+            className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
           >
             Log Out
           </Link>

data/stubs/inertia-react-ts/app/javascript/Pages/Dashboard.tsx

@@ -10,7 +10,7 @@ export default function Dashboard() {
 
       <div className="py-12">
         <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-          <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+          <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-xs sm:rounded-lg">
             <div className="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
           </div>
         </div>

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Edit.tsx

@@ -14,15 +14,15 @@ export default function Edit({ mustVerifyEmail, status }: PageProps<{ mustVerify
 
       <div className="py-12">
         <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
             <UpdateProfileInformationForm mustVerifyEmail={mustVerifyEmail} status={status} className="max-w-xl" />
           </div>
 
-          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
             <UpdatePasswordForm className="max-w-xl" />
           </div>
 
-          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+          <div className="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
             <DeleteUserForm className="max-w-xl" />
           </div>
         </div>

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdateProfileInformationForm.tsx

@@ -80,7 +80,7 @@ export default function UpdateProfileInformation({
                 href={verification_send_path()}
                 method="post"
                 as="button"
-                className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+                className="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
               >
                 Click here to re-send the verification email.
               </Link>

data/stubs/inertia-react-ts/app/javascript/Pages/Welcome.tsx

@@ -25,7 +25,7 @@ export default function Welcome({
             {user ? (
               <Link
                 href={dashboard_path()}
-                className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
               >
                 Dashboard
               </Link>
@@ -33,13 +33,13 @@ export default function Welcome({
               <>
                 <Link
                   href={login_path()}
-                  className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                  className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                 >
                   Log in
                 </Link>
                 <Link
                   href={register_path()}
-                  className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                  className="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                 >
                   Register
                 </Link>

data/stubs/inertia-react-ts/package.json

@@ -8,19 +8,15 @@
   "devDependencies": {
     "@headlessui/react": "^2.0.4",
     "@inertiajs/react": "^2.0.0",
-    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^18.13.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.12",
     "axios": "^1.6.4",
-    "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.1",
     "typescript": "^5.6.3",
-    "vite": "^5.2.11",
+    "vite": "^6.4.4",
     "vite-plugin-rails": "^0.5.0"
   }
 }

data/stubs/inertia-vue-ts/app/assets/tailwind/application.css

@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+
+@source "../../../public/*.html";
+@source "../../helpers/**/*.rb";
+@source "../../views/**/*";
+@source "../../javascript/**/*.vue";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+/* Tailwind v4 Preflight resets buttons to `cursor: default`; keep the v3 behaviour. */
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}

data/stubs/inertia-vue-ts/app/javascript/Components/Checkbox.vue

@@ -24,6 +24,6 @@ const proxyChecked = computed({
     type="checkbox"
     :value="value"
     v-model="proxyChecked"
-    class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800"
+    class="rounded-sm dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-xs focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800"
   />
 </template>

data/stubs/inertia-vue-ts/app/javascript/Components/DangerButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
+    class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
   >
     <slot />
   </button>

data/stubs/inertia-vue-ts/app/javascript/Components/DropdownLink.vue

@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <Link
     :href="href"
-    class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
+    class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
   >
     <slot />
   </Link>

data/stubs/inertia-vue-ts/app/javascript/Components/NavLink.vue

@@ -9,8 +9,8 @@ const props = defineProps<{
 
 const classes = computed(() =>
   props.active
-    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
-    : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out',
+    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-hidden focus:border-indigo-700 transition duration-150 ease-in-out'
+    : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-hidden focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out',
 )
 </script>
 

data/stubs/inertia-vue-ts/app/javascript/Components/PrimaryButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
+    class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
   >
     <slot />
   </button>

data/stubs/inertia-vue-ts/app/javascript/Components/ResponsiveNavLink.vue

@@ -9,8 +9,8 @@ const props = defineProps<{
 
 const classes = computed(() =>
   props.active
-    ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
-    : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out',
+    ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-hidden focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
+    : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-hidden focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out',
 )
 </script>
 

data/stubs/inertia-vue-ts/app/javascript/Components/SecondaryButton.vue

@@ -12,7 +12,7 @@ withDefaults(
 <template>
   <button
     :type="type"
-    class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150"
+    class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-xs hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150"
   >
     <slot />
   </button>

data/stubs/inertia-vue-ts/app/javascript/Components/TextInput.vue

@@ -16,7 +16,7 @@ defineExpose({ focus: () => input.value?.focus() })
 
 <template>
   <input
-    class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
+    class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-xs"
     v-model="model"
     ref="input"
   />

data/stubs/inertia-vue-ts/app/javascript/Layouts/AuthenticatedLayout.vue

@@ -42,7 +42,7 @@ const { pathname = '' } = typeof window !== 'undefined' ? window.location : {}
                     <span class="inline-flex rounded-md">
                       <button
                         type="button"
-                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
+                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-hidden transition ease-in-out duration-150"
                       >
                         {{ $page.props.auth.user.name }}
 
@@ -74,7 +74,7 @@ const { pathname = '' } = typeof window !== 'undefined' ? window.location : {}
             <div class="-me-2 flex items-center sm:hidden">
               <button
                 @click="showingNavigationDropdown = !showingNavigationDropdown"
-                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
+                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-hidden focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
               >
                 <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                   <path
@@ -137,7 +137,7 @@ const { pathname = '' } = typeof window !== 'undefined' ? window.location : {}
       </nav>
 
       <!-- Page Heading -->
-      <header class="bg-white dark:bg-gray-800 shadow" v-if="$slots.header">
+      <header class="bg-white dark:bg-gray-800 shadow-sm" v-if="$slots.header">
         <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
           <slot name="header" />
         </div>

data/stubs/inertia-vue-ts/app/javascript/Pages/Auth/Login.vue

@@ -77,7 +77,7 @@ const submit = () => {
       <div class="flex items-center justify-end mt-4">
         <Link
           :href="password_request_path()"
-          class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+          class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
         >
           Forgot your password?
         </Link>

data/stubs/inertia-vue-ts/app/javascript/Pages/Auth/Register.vue

@@ -92,7 +92,7 @@ const submit = () => {
       <div class="flex items-center justify-end mt-4">
         <Link
           :href="login_path()"
-          class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+          class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
         >
           Already registered?
         </Link>

data/stubs/inertia-vue-ts/app/javascript/Pages/Auth/VerifyEmail.vue

@@ -41,7 +41,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
           :href="logout_path()"
           method="post"
           as="button"
-          class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+          class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
           >Log Out</Link
         >
       </div>

data/stubs/inertia-vue-ts/app/javascript/Pages/Dashboard.vue

@@ -13,7 +13,7 @@ import { Head } from '@inertiajs/vue3'
 
     <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xs sm:rounded-lg">
           <div class="p-6 text-gray-900 dark:text-gray-100">You're logged in!</div>
         </div>
       </div>

data/stubs/inertia-vue-ts/app/javascript/Pages/Profile/Edit.vue

@@ -21,15 +21,15 @@ defineProps<{
 
     <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
           <UpdateProfileInformationForm :must-verify-email="mustVerifyEmail" :status="status" class="max-w-xl" />
         </div>
 
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
           <UpdatePasswordForm class="max-w-xl" />
         </div>
 
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
           <DeleteUserForm class="max-w-xl" />
         </div>
       </div>

data/stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -68,7 +68,7 @@ const form = useForm({
             :href="verification_send_path()"
             method="post"
             as="button"
-            class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
+            class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
           >
             Click here to re-send the verification email.
           </Link>

data/stubs/inertia-vue-ts/app/javascript/Pages/Welcome.vue

@@ -22,7 +22,7 @@ defineProps<{
       <div class="-mx-3 flex flex-1 justify-end">
         <Link
           :href="dashboard_path()"
-          class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+          class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
           v-if="$page.props.auth.user"
         >
           Dashboard
@@ -30,13 +30,13 @@ defineProps<{
         <template v-else>
           <Link
             :href="login_path()"
-            class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+            class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
           >
             Log in
           </Link>
           <Link
             :href="register_path()"
-            class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+            class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-hidden focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
           >
             Register
           </Link>

data/stubs/inertia-vue-ts/package.json

@@ -8,15 +8,11 @@
   "devDependencies": {
     "@headlessui/vue": "^1.7.22",
     "@inertiajs/vue3": "^2.0.0",
-    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^18.13.0",
     "@vitejs/plugin-vue": "^5.0.5",
-    "autoprefixer": "^10.4.12",
     "axios": "^1.6.4",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.2.1",
     "typescript": "^5.6.3",
-    "vite": "^5.2.11",
+    "vite": "^6.4.4",
     "vite-plugin-rails": "^0.5.0",
     "vue": "^3.4.27",
     "vue-tsc": "^2.0.21"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kaze
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.1
 platform: ruby
 authors:
 - Cuong Giang
@@ -58,6 +58,7 @@ executables:
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
 - LICENSE.md
 - README.md
 - bin/kaze
@@ -72,7 +73,6 @@ files:
 - lib/kaze/version.rb
 - stubs/default/Procfile.dev
 - stubs/default/app/assets/stylesheets/application.css
-- stubs/default/app/assets/stylesheets/application.tailwind.css
 - stubs/default/app/forms/application_form.rb
 - stubs/default/app/forms/auth/login_form.rb
 - stubs/default/app/forms/auth/new_password_form.rb
@@ -108,6 +108,7 @@ files:
 - stubs/default/test/integration/password_update_test.rb
 - stubs/default/test/integration/profile_test.rb
 - stubs/default/test/test_helper.rb
+- stubs/hotwire/app/assets/tailwind/application.css
 - stubs/hotwire/app/components/application_logo_component.rb
 - stubs/hotwire/app/components/auth_session_status_component.rb
 - stubs/hotwire/app/components/danger_button_component.rb
@@ -157,7 +158,6 @@ files:
 - stubs/hotwire/app/views/profile/partials/_update_profile_information_form.html.erb
 - stubs/hotwire/app/views/welcome/index.html.erb
 - stubs/hotwire/config/importmap.rb
-- stubs/hotwire/config/tailwind.config.js
 - stubs/inertia-common/app/controllers/application_controller.rb
 - stubs/inertia-common/app/controllers/auth/authenticated_session_controller.rb
 - stubs/inertia-common/app/controllers/auth/email_verification_notification_controller.rb
@@ -179,6 +179,7 @@ files:
 - stubs/inertia-common/config/vite.json
 - stubs/inertia-common/test/integration/password_update_test.rb
 - stubs/inertia-common/test/integration/profile_test.rb
+- stubs/inertia-react-ts/app/assets/tailwind/application.css
 - stubs/inertia-react-ts/app/javascript/Components/ApplicationLogo.tsx
 - stubs/inertia-react-ts/app/javascript/Components/Checkbox.tsx
 - stubs/inertia-react-ts/app/javascript/Components/DangerButton.tsx
@@ -210,10 +211,10 @@ files:
 - stubs/inertia-react-ts/app/javascript/types/index.d.ts
 - stubs/inertia-react-ts/app/javascript/types/vite-env.d.ts
 - stubs/inertia-react-ts/app/views/layouts/application.html.erb
-- stubs/inertia-react-ts/config/tailwind.config.js
 - stubs/inertia-react-ts/package.json
 - stubs/inertia-react-ts/tsconfig.json
 - stubs/inertia-react-ts/vite.config.ts
+- stubs/inertia-vue-ts/app/assets/tailwind/application.css
 - stubs/inertia-vue-ts/app/javascript/Components/ApplicationLogo.vue
 - stubs/inertia-vue-ts/app/javascript/Components/Checkbox.vue
 - stubs/inertia-vue-ts/app/javascript/Components/DangerButton.vue
@@ -246,14 +247,14 @@ files:
 - stubs/inertia-vue-ts/app/javascript/types/index.d.ts
 - stubs/inertia-vue-ts/app/javascript/types/vite-env.d.ts
 - stubs/inertia-vue-ts/app/views/layouts/application.html.erb
-- stubs/inertia-vue-ts/config/tailwind.config.js
 - stubs/inertia-vue-ts/package.json
 - stubs/inertia-vue-ts/tsconfig.json
 - stubs/inertia-vue-ts/vite.config.ts
-homepage: https://github.com/gtkvn/kaze
+homepage: https://github.com/cuonggt/kaze
 licenses:
 - MIT
-metadata: {}
+metadata:
+  changelog_uri: https://github.com/cuonggt/kaze/blob/master/CHANGELOG.md
 rdoc_options: []
 require_paths:
 - lib
@@ -268,7 +269,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.10
 specification_version: 4
 summary: Opinionated minimal Rails authentication scaffolding with Hotwire, React,
   or Vue + Tailwind.

data/stubs/default/app/assets/stylesheets/application.tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

data/stubs/hotwire/config/tailwind.config.js

@@ -1,23 +0,0 @@
-import defaultTheme from 'tailwindcss/defaultTheme'
-import forms from '@tailwindcss/forms'
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './public/*.html',
-    './app/helpers/**/*.rb',
-    './app/components/**/*',
-    './app/views/**/*',
-    './app/javascript/**/*.js',
-  ],
-
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-      },
-    },
-  },
-
-  plugins: [forms],
-}

data/stubs/inertia-react-ts/config/tailwind.config.js

@@ -1,17 +0,0 @@
-import defaultTheme from 'tailwindcss/defaultTheme'
-import forms from '@tailwindcss/forms'
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./public/*.html', './app/helpers/**/*.rb', './app/views/**/*', './app/javascript/**/*.tsx'],
-
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-      },
-    },
-  },
-
-  plugins: [forms],
-}