EsLint v9 (#154)

* Upgrade ESLint and related configurations to version 9

- Update ESLint to version 9.19.0
- Migrate ESLint configurations to flat config format
- Remove deprecated ESLint config files
- Update package dependencies and configurations
- Simplify ESLint setup across packages
- Remove unnecessary ESLint config blocks from package.json files
- Improved CI caching with Turborepo tasks
- Removed duplicate styles

.github/workflows/workflow.yml

@@ -7,13 +7,14 @@ on:
 jobs:
   typescript:
     name: ʦ TypeScript
-    timeout-minutes: 8
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     env:
       SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
       SUPABASE_DB_WEBHOOK_SECRET: ${{ secrets.SUPABASE_DB_WEBHOOK_SECRET }}
       STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
       STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
+      DO_NOT_TRACK: 1
 
     steps:
       - uses: actions/checkout@v4
@@ -27,6 +28,9 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Install dependencies
+        run: pnpm install
+
       - uses: actions/cache@v4
         with:
           path: .turbo
@@ -34,9 +38,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-turbo-
 
-      - name: Install dependencies
-        run: pnpm install
-
       - name: Typecheck
         run: pnpm run typecheck
 
@@ -54,6 +55,7 @@ jobs:
       STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
       STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
       ENABLE_BILLING_TESTS: ${{ vars.ENABLE_BILLING_TESTS }}
+      DO_NOT_TRACK: 1
 
     steps:
       - uses: actions/checkout@v4
@@ -62,13 +64,6 @@ jobs:
 
       - uses: pnpm/action-setup@v4
 
-      - uses: actions/cache@v4
-        with:
-          path: .turbo
-          key: ${{ runner.os }}-turbo-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-turbo-
-
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*

README.md

@@ -2,10 +2,8 @@
 
 This is a Starter Kit for building SaaS applications using Supabase, Next.js, and Tailwind CSS.
 
-This version uses Turborepo to manage multiple packages in a single repository.
-
-**This project is stable but still under development. Please update the repository daily**.
-
 A demo version of this project can be found at [makerkit/next-supabase-saas-kit-turbo-demo](https://github.com/makerkit/next-supabase-saas-kit-turbo-demo). This version contains a tasks functionality that is not present in the original version, multiple languages, and other various modifications.
 
 [Please follow the documentation to get started](https://makerkit.dev/docs/next-supabase-turbo/introduction).
+
+**Please remember to update the repository daily**.

apps/web/app/(marketing)/blog/_components/cover-image.tsx

@@ -13,7 +13,7 @@ export function CoverImage({ title, src, preloadImage, className }: Props) {
   return (
     <Image
       className={cn(
-        'duration-250 block rounded-xl object-cover' +
+        'block rounded-xl object-cover duration-250' +
           ' transition-all hover:opacity-90',
         {
           className,

apps/web/app/(marketing)/blog/_components/post-header.tsx

@@ -14,7 +14,7 @@ export function PostHeader({ post }: { post: Cms.ContentItem }) {
         <div className={'mx-auto flex max-w-3xl flex-col space-y-4'}>
           <h1
             className={
-              'font-heading text-3xl font-semibold tracking-tighter dark:text-white xl:text-5xl'
+              'font-heading text-3xl font-semibold tracking-tighter xl:text-5xl dark:text-white'
             }
           >
             {title}
@@ -27,7 +27,7 @@ export function PostHeader({ post }: { post: Cms.ContentItem }) {
           </div>
 
           <h2
-            className={'text-base text-muted-foreground xl:text-lg'}
+            className={'text-muted-foreground text-base xl:text-lg'}
             dangerouslySetInnerHTML={{ __html: description ?? '' }}
           ></h2>
         </div>

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -63,7 +63,9 @@ async function DocumentationPage({ params }: DocumentationPageProps) {
       <div className={'flex overflow-y-hidden'}>
         <article className={cn('gap-y-12 overflow-y-auto px-6')}>
           <section className={'flex flex-col gap-y-2.5'}>
-            <h1 className={'text-3xl font-semibold text-foreground'}>{page.title}</h1>
+            <h1 className={'text-foreground text-3xl font-semibold'}>
+              {page.title}
+            </h1>
 
             <h2 className={'text-muted-foreground text-lg'}>{description}</h2>
           </section>

apps/web/app/(marketing)/docs/_components/docs-page-link.tsx

@@ -18,7 +18,7 @@ export function DocsPageLink({
   return (
     <Link
       className={cn(
-        `flex w-full items-center space-x-8 rounded-xl p-6 font-medium text-current ring-2 ring-muted transition-all hover:ring-primary`,
+        `ring-muted hover:ring-primary flex w-full items-center space-x-8 rounded-xl p-6 font-medium text-current ring-2 transition-all`,
         {
           'justify-start': before,
           'justify-end self-end': after,
@@ -30,7 +30,7 @@ export function DocsPageLink({
 
       <span className={'flex flex-col space-y-1.5'}>
         <span
-          className={'text-xs font-semibold uppercase text-muted-foreground'}
+          className={'text-muted-foreground text-xs font-semibold uppercase'}
         >
           {before ? `Previous` : ``}
           {after ? `Next` : ``}

apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx

@@ -54,8 +54,8 @@ export function FloatingDocumentationNavigation(
       <If condition={isVisible}>
         <div
           className={
-            'fixed left-0 top-0 z-10 h-screen w-full p-4' +
-            ' flex flex-col space-y-4 overflow-auto bg-white dark:bg-background'
+            'fixed top-0 left-0 z-10 h-screen w-full p-4' +
+            ' dark:bg-background flex flex-col space-y-4 overflow-auto bg-white'
           }
         >
           {props.children}
@@ -63,7 +63,7 @@ export function FloatingDocumentationNavigation(
       </If>
 
       <Button
-        className={'fixed bottom-5 right-5 z-10 h-16 w-16 rounded-full'}
+        className={'fixed right-5 bottom-5 z-10 h-16 w-16 rounded-full'}
         onClick={onClick}
       >
         <Menu className={'h-8'} />

apps/web/app/home/[account]/billing/return/page.tsx

@@ -36,7 +36,7 @@ async function ReturnCheckoutSessionPage({ searchParams }: SessionPageProps) {
 
   return (
     <>
-      <div className={'fixed left-0 top-48 z-50 mx-auto w-full'}>
+      <div className={'fixed top-48 left-0 z-50 mx-auto w-full'}>
         <BillingSessionStatus
           redirectPath={'../billing'}
           customerEmail={customerEmail ?? ''}
@@ -54,7 +54,7 @@ function BlurryBackdrop() {
   return (
     <div
       className={
-        'fixed left-0 top-0 w-full bg-background/30 backdrop-blur-sm' +
+        'bg-background/30 fixed top-0 left-0 w-full backdrop-blur-sm' +
         ' !m-0 h-full'
       }
     />

apps/web/app/join/page.tsx

@@ -137,7 +137,7 @@ function InviteNotFoundOrExpired() {
         <Trans i18nKey={'teams:inviteNotFoundOrExpired'} />
       </Heading>
 
-      <p className={'text-sm text-muted-foreground'}>
+      <p className={'text-muted-foreground text-sm'}>
         <Trans i18nKey={'teams:inviteNotFoundOrExpiredDescription'} />
       </p>
 

apps/web/eslint.config.mjs

@@ -0,0 +1,4 @@
+import eslintConfigApps from '@kit/eslint-config/apps.js';
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default [...eslintConfigBase, ...eslintConfigApps];

apps/web/package.json

@@ -10,7 +10,8 @@
     "build:test": "NODE_ENV=test pnpm with-env:test next build",
     "clean": "git clean -xdf .next .turbo node_modules",
     "dev": "pnpm with-env next dev --turbo | pino-pretty -c",
-    "lint": "next lint && eslint .",
+    "lint": "eslint .",
+    "lint:fix": "next lint --fix",
     "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
     "start": "pnpm with-env next start",
     "start:test": "NODE_ENV=test pnpm with-env:test next start",
@@ -75,17 +76,16 @@
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@next/bundle-analyzer": "15.1.6",
+    "@tailwindcss/postcss": "^4.0.4",
     "@types/mdx": "^2.0.13",
     "@types/node": "^22.13.0",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "autoprefixer": "^10.4.20",
-    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+    "babel-plugin-react-compiler": "beta",
     "dotenv-cli": "^8.0.0",
-    "eslint": "^8.57.0",
     "import-in-the-middle": "1.12.0",
     "pino-pretty": "^13.0.0",
     "prettier": "^3.4.2",

apps/web/postcss.config.cjs

@@ -1,2 +0,0 @@
-// @ts-expect-error - No types for postcss
-module.exports = require('@kit/tailwind-config/postcss');

apps/web/postcss.config.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     '@tailwindcss/postcss': {},
   },

apps/web/styles/globals.css

@@ -25,168 +25,6 @@
 @source "../../../packages/cms/*/src/**/*.{ts,tsx}";
 @source "../{app,components,config,lib}/**/*.{ts,tsx}";
 
-@theme {
-  --font-cal: var(--font-cal);
-  --font-sans: -apple-system, var(--font-sans);
-  --font-heading: var(--font-heading);
-
-  --animate-fade-up: fade-up 0.5s;
-  --animate-fade-down: fade-down 0.5s;
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes fade-up {
-    0% {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    80% {
-      opacity: 0.6;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-  @keyframes fade-down {
-    0% {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    80% {
-      opacity: 0.6;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@theme {
-  --font-cal: var(--font-cal);
-  --font-sans: -apple-system, var(--font-sans);
-  --font-heading: var(--font-heading);
-
-  --animate-fade-up: fade-up 0.5s;
-  --animate-fade-down: fade-down 0.5s;
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes fade-up {
-    0% {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    80% {
-      opacity: 0.6;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-  @keyframes fade-down {
-    0% {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    80% {
-      opacity: 0.6;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
 /* variants - update the below if you add a new variant */
 @variant dark (&:where(.dark, .dark *));
 

apps/web/styles/theme.css

@@ -49,7 +49,8 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
 
-  --font-heading: var(--font-sans);
+  --font-sans: -apple-system, var(--font-sans);
+  --font-heading: var(--font-heading);
 
   --color-sidebar: var(--sidebar-background);
   --color-sidebar-foreground: var(--sidebar-foreground);
@@ -60,6 +61,8 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  --animate-fade-up: fade-up 0.5s;
+  --animate-fade-down: fade-down 0.5s;
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
 
@@ -83,11 +86,6 @@
     }
   }
 
-  --animate-fade-up: fade-up 0.5s;
-  --animate-fade-down: fade-down 0.5s;
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
   @keyframes fade-up {
     0% {
       opacity: 0;
@@ -101,6 +99,7 @@
       transform: translateY(0px);
     }
   }
+
   @keyframes fade-down {
     0% {
       opacity: 0;
@@ -114,20 +113,4 @@
       transform: translateY(0px);
     }
   }
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
 }

apps/web/tsconfig.json

@@ -20,7 +20,6 @@
     ".next/types/**/*.ts",
     "*.ts",
     "*.tsx",
-    "*.mjs",
     "./config/**/*.ts",
     "components/**/*",
     "lib/**/*.ts",

package.json

@@ -19,9 +19,9 @@
     "dev": "cross-env FORCE_COLOR=1 turbo dev --parallel",
     "format": "turbo format --cache-dir=.turbo --continue -- --cache --cache-location='node_modules/.cache/.prettiercache' --ignore-path='../../.gitignore'",
     "format:fix": "turbo format --cache-dir=.turbo --continue -- --write --cache --cache-location='node_modules/.cache/.prettiercache' --ignore-path='../../.gitignore'",
-    "lint": "turbo lint --cache-dir=.turbo --continue -- --cache --cache-location 'node_modules/.cache/.eslintcache' && manypkg check",
-    "lint:fix": "turbo lint --cache-dir=.turbo --continue -- --fix --cache --cache-location 'node_modules/.cache/.eslintcache' && manypkg fix",
-    "typecheck": "turbo typecheck --cache-dir=.turbo",
+    "lint": "turbo lint --cache-dir=.turbo --affected --continue -- --cache --cache-location 'node_modules/.cache/.eslintcache' && manypkg check",
+    "lint:fix": "turbo lint --cache-dir=.turbo --affected --continue -- --fix --cache --cache-location 'node_modules/.cache/.eslintcache' && manypkg fix",
+    "typecheck": "turbo typecheck --affected --cache-dir=.turbo",
     "test": "turbo test --cache-dir=.turbo",
     "update": "pnpm update -r",
     "syncpack:list": "pnpm dlx syncpack list-mismatches",

packages/analytics/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/analytics/package.json

@@ -18,13 +18,6 @@
     "@kit/tsconfig": "workspace:*",
     "@types/node": "^22.13.0"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/analytics/src/null-analytics-service.ts

@@ -3,7 +3,6 @@ import { AnalyticsService } from './types';
 const noop = (event: string) => {
   // do nothing - this is to prevent errors when the analytics service is not initialized
 
-  // eslint-disable-next-line @typescript-eslint/require-await
   return async (...args: unknown[]) => {
     console.debug(
       `Noop analytics service called with event: ${event}`,

packages/billing/core/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/billing/core/package.json

@@ -19,18 +19,10 @@
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/billing/gateway/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/billing/gateway/package.json

@@ -24,7 +24,6 @@
     "@kit/shared": "workspace:*",
     "@kit/stripe": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@supabase/supabase-js": "2.48.1",
@@ -37,13 +36,6 @@
     "react-i18next": "^15.4.0",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/billing/gateway/src/components/pricing-table.tsx

@@ -469,7 +469,7 @@ function DefaultCheckoutButton(
   });
 
   const linkHref =
-    props.plan.href ?? `${signUpPath}?${searchParams.toString()}` ?? '';
+    props.plan.href ?? `${signUpPath}?${searchParams.toString()}`;
 
   const label = props.plan.buttonLabel ?? 'common:getStartedWithPlan';
 

packages/billing/lemon-squeezy/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/billing/lemon-squeezy/package.json

@@ -22,7 +22,6 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@types/react": "19.0.8",
@@ -30,13 +29,6 @@
     "react": "19.0.0",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/billing/stripe/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/billing/stripe/package.json

@@ -25,7 +25,6 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@types/react": "19.0.8",
@@ -34,13 +33,6 @@
     "react": "19.0.0",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/cms/core/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/cms/core/package.json

@@ -22,13 +22,6 @@
     "@kit/wordpress": "workspace:*",
     "@types/node": "^22.13.0"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/cms/keystatic/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/cms/keystatic/package.json

@@ -31,13 +31,6 @@
     "react": "19.0.0",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/cms/types/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/cms/types/package.json

@@ -17,13 +17,6 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/cms/wordpress/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/cms/wordpress/package.json

@@ -24,13 +24,6 @@
     "@types/react": "19.0.8",
     "wp-types": "^4.67.0"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/cms/wordpress/src/wp-client.ts

@@ -75,10 +75,7 @@ class WordpressClient implements CmsClient {
     }
 
     if (options?.tags) {
-      const allTags = [
-        ...options.tags,
-        options.language ?? '',
-      ].filter(Boolean);
+      const allTags = [...options.tags, options.language ?? ''].filter(Boolean);
 
       const ids = await this.getTags({
         slugs: allTags,

packages/database-webhooks/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/database-webhooks/package.json

@@ -25,13 +25,6 @@
     "@supabase/supabase-js": "2.48.1",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/database-webhooks/src/server/services/database-webhook-handler.service.ts

@@ -30,17 +30,15 @@ class DatabaseWebhookHandlerService {
    * @description Handle the webhook event
    * @param params
    */
-  async handleWebhook(
-    params: {
-      body: RecordChange<keyof Tables>;
-      signature: string;
-      handleEvent?<Table extends keyof Tables>(
-        payload: Table extends keyof Tables
-          ? DatabaseChangePayload<Table>
-          : never,
-      ): unknown;
-    },
-  ) {
+  async handleWebhook(params: {
+    body: RecordChange<keyof Tables>;
+    signature: string;
+    handleEvent?<Table extends keyof Tables>(
+      payload: Table extends keyof Tables
+        ? DatabaseChangePayload<Table>
+        : never,
+    ): unknown;
+  }) {
     const logger = await getLogger();
     const { table, type } = params.body;
 

packages/email-templates/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/email-templates/package.json

@@ -19,16 +19,8 @@
     "@kit/eslint-config": "workspace:*",
     "@kit/i18n": "workspace:*",
     "@kit/prettier-config": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/features/accounts/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/features/accounts/package.json

@@ -30,7 +30,6 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@radix-ui/react-icons": "^1.3.2",
@@ -49,13 +48,6 @@
     "zod": "^3.24.1"
   },
   "prettier": "@kit/prettier-config",
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx

@@ -74,7 +74,6 @@ export const UpdatePasswordForm = ({
     // if the user does not have an email assigned, it's possible they
     // don't have an email/password factor linked, and the UI is out of sync
     if (!email) {
-      /* eslint-disable @typescript-eslint/prefer-promise-reject-errors */
       return Promise.reject(t(`cannotUpdatePassword`));
     }
 

packages/features/admin/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/features/admin/package.json

@@ -16,7 +16,6 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@makerkit/data-loader-supabase-core": "^0.0.8",
@@ -36,13 +35,6 @@
     ".": "./src/index.ts",
     "./components/*": "./src/components/*.tsx"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/features/auth/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/features/auth/package.json

@@ -24,7 +24,6 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@marsidev/react-turnstile": "^1.1.0",
@@ -40,13 +39,6 @@
     "zod": "^3.24.1"
   },
   "prettier": "@kit/prettier-config",
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/features/notifications/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/features/notifications/package.json

@@ -17,7 +17,6 @@
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@supabase/supabase-js": "2.48.1",

packages/features/team-accounts/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/features/team-accounts/package.json

@@ -29,7 +29,6 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/supabase": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@supabase/supabase-js": "2.48.1",
@@ -49,13 +48,6 @@
     "zod": "^3.24.1"
   },
   "prettier": "@kit/prettier-config",
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/i18n/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/i18n/package.json

@@ -31,13 +31,6 @@
     "i18next-browser-languagedetector": "8.0.2",
     "i18next-resources-to-backend": "^1.2.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/mailers/core/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/mailers/core/package.json

@@ -23,13 +23,6 @@
     "@types/node": "^22.13.0",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/mailers/nodemailer/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/mailers/nodemailer/package.json

@@ -23,13 +23,6 @@
     "@types/nodemailer": "6.4.17",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/mailers/resend/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/mailers/resend/package.json

@@ -20,13 +20,6 @@
     "@types/node": "^22.13.0",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/mailers/shared/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/mailers/shared/package.json

@@ -18,13 +18,6 @@
     "@kit/tsconfig": "workspace:*",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/monitoring/api/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/monitoring/api/package.json

@@ -28,13 +28,6 @@
     "react": "19.0.0",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/monitoring/baselime/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/monitoring/baselime/package.json

@@ -28,13 +28,6 @@
     "react": "19.0.0",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/monitoring/core/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/monitoring/core/package.json

@@ -20,13 +20,6 @@
     "@types/react": "19.0.8",
     "react": "19.0.0"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/monitoring/sentry/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/monitoring/sentry/package.json

@@ -26,13 +26,6 @@
     "@types/react": "19.0.8",
     "react": "19.0.0"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/next/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/next/package.json

@@ -24,13 +24,6 @@
     "next": "15.1.6",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/shared/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/shared/package.json

@@ -25,13 +25,6 @@
   "dependencies": {
     "pino": "^9.6.0"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/shared/src/registry/index.ts

@@ -1,9 +1,7 @@
 /**
  * Implementation factory type
  */
-export type ImplementationFactory<T> = () =>
-  | T
-  | Promise<T>;
+export type ImplementationFactory<T> = () => T | Promise<T>;
 
 /**
  * Public API types with improved get method
@@ -34,10 +32,10 @@ export interface Registry<T, Names extends string> {
  * @description Creates a new registry instance with the provided implementations.
  * @returns A new registry instance.
  */
-export function createRegistry<
+export function createRegistry<T, Names extends string = string>(): Registry<
   T,
-  Names extends string = string,
->(): Registry<T, Names> {
+  Names
+> {
   const implementations = new Map<Names, ImplementationFactory<T>>();
   const setupCallbacks = new Map<string, Array<() => Promise<void>>>();
   const setupPromises = new Map<string, Promise<void>>();

packages/supabase/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/supabase/package.json

@@ -26,7 +26,6 @@
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@supabase/ssr": "^0.5.2",
     "@supabase/supabase-js": "2.48.1",
@@ -37,13 +36,6 @@
     "server-only": "^0.0.1",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "typesVersions": {
     "*": {
       "*": [

packages/ui/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/ui/package.json

@@ -10,26 +10,26 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
-    "@radix-ui/react-accordion": "1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.5",
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "1.1.2",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-dropdown-menu": "^2.1.5",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-navigation-menu": "^1.2.4",
-    "@radix-ui/react-popover": "^1.1.5",
-    "@radix-ui/react-progress": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.5",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.5",
-    "@radix-ui/react-tooltip": "1.1.7",
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-tooltip": "1.1.8",
     "clsx": "^2.1.1",
     "cmdk": "1.0.4",
     "input-otp": "1.4.2",
@@ -41,7 +41,6 @@
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
-    "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@radix-ui/react-icons": "^1.3.2",
     "@tanstack/react-query": "5.66.0",
@@ -50,7 +49,7 @@
     "@types/react-dom": "19.0.3",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.19.0",
     "next": "15.1.6",
     "next-themes": "0.4.4",
     "prettier": "^3.4.2",
@@ -63,13 +62,6 @@
     "typescript": "^5.7.3",
     "zod": "^3.24.1"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@kit/eslint-config/base",
-      "@kit/eslint-config/react"
-    ]
-  },
   "prettier": "@kit/prettier-config",
   "exports": {
     "./accordion": "./src/shadcn/accordion.tsx",

packages/ui/src/makerkit/cookie-banner.tsx

@@ -32,7 +32,7 @@ export function CookieBanner() {
     <DialogPrimitive.Root open modal={false}>
       <DialogPrimitive.Content
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className={`dark:shadow-primary-500/40 fixed bottom-0 w-full max-w-lg border bg-background p-6 shadow-2xl delay-1000 duration-1000 animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
+        className={`dark:shadow-primary-500/40 bg-background animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both fixed bottom-0 w-full max-w-lg border p-6 shadow-2xl delay-1000 duration-1000 lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
       >
         <div className={'flex flex-col space-y-4'}>
           <div>

packages/ui/src/makerkit/global-loader.tsx

@@ -23,7 +23,7 @@ export function GlobalLoader({
       <If condition={displaySpinner}>
         <div
           className={
-            'zoom-in-80 flex flex-1 flex-col items-center justify-center duration-500 animate-in fade-in slide-in-from-bottom-12'
+            'zoom-in-80 animate-in fade-in slide-in-from-bottom-12 flex flex-1 flex-col items-center justify-center duration-500'
           }
         >
           <LoadingOverlay displayLogo={displayLogo} fullPage={fullPage} />

packages/ui/src/makerkit/image-uploader.tsx

@@ -71,7 +71,7 @@ export function ImageUploader(
 
   return (
     <div className={'flex items-center space-x-4'}>
-      <label className={'relative h-20 w-20 animate-in fade-in zoom-in-50'}>
+      <label className={'animate-in fade-in zoom-in-50 relative h-20 w-20'}>
         <Image fill className={'h-20 w-20 rounded-full'} src={image} alt={''} />
 
         <Input />
@@ -95,10 +95,10 @@ function FallbackImage(
     <div className={'flex items-center space-x-4'}>
       <label
         className={
-          'relative flex h-20 w-20 cursor-pointer flex-col items-center justify-center rounded-full border border-border animate-in fade-in zoom-in-50 hover:border-primary'
+          'border-border animate-in fade-in zoom-in-50 hover:border-primary relative flex h-20 w-20 cursor-pointer flex-col items-center justify-center rounded-full border'
         }
       >
-        <ImageIcon className={'h-8 text-primary'} />
+        <ImageIcon className={'text-primary h-8'} />
 
         {props.children}
       </label>

packages/ui/src/makerkit/marketing/coming-soon.tsx

@@ -19,7 +19,7 @@ const ComingSoonText: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
   ...props
 }) => (
   <GradientSecondaryText
-    className={cn('text-lg text-muted-foreground md:text-xl', className)}
+    className={cn('text-muted-foreground text-lg md:text-xl', className)}
     {...props}
   />
 );
@@ -95,7 +95,7 @@ ComingSoon.displayName = 'ComingSoon';
 const ComingSoonLogo: React.FC<React.HTMLAttributes<HTMLImageElement>> = ({
   className,
   ...props
-}) => <div className={cn(className, 'fixed left-8 top-8')} {...props} />;
+}) => <div className={cn(className, 'fixed top-8 left-8')} {...props} />;
 ComingSoonLogo.displayName = 'ComingSoonLogo';
 
 export {

packages/ui/src/makerkit/marketing/cta-button.tsx

@@ -9,7 +9,7 @@ export const CtaButton: React.FC<React.ComponentProps<typeof Button>> =
           'h-12 rounded-xl px-4 text-base font-semibold',
           className,
           {
-            ['transition-all hover:shadow-2xl dark:shadow-primary/30']:
+            ['dark:shadow-primary/30 transition-all hover:shadow-2xl']:
               props.variant === 'default' || !props.variant,
           },
         )}

packages/ui/src/makerkit/marketing/secondary-hero.tsx

@@ -31,7 +31,7 @@ export const SecondaryHero: React.FC<SecondaryHeroProps> =
             {heading}
           </Heading>
 
-          <h3 className="font-sans text-xl font-normal tracking-tight text-muted-foreground">
+          <h3 className="text-muted-foreground font-sans text-xl font-normal tracking-tight">
             {subheading}
           </h3>
         </div>

packages/ui/src/makerkit/page.tsx

@@ -175,7 +175,10 @@ export function PageHeader({
 
           <If condition={description}>
             <If condition={displaySidebarTrigger}>
-              <Separator orientation="vertical" className="h-4 w-px hidden lg:block" />
+              <Separator
+                orientation="vertical"
+                className="hidden h-4 w-px lg:block"
+              />
             </If>
 
             <PageDescription>{description}</PageDescription>

packages/ui/src/makerkit/profile-avatar.tsx

@@ -27,7 +27,7 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
         <AvatarFallback
           className={cn(
             props.fallbackClassName,
-            'uppercase animate-in fade-in',
+            'animate-in fade-in uppercase',
           )}
         >
           {props.text.slice(0, 1)}

packages/ui/src/makerkit/spinner.tsx

@@ -10,7 +10,7 @@ export function Spinner(
       <svg
         aria-hidden="true"
         className={cn(
-          `h-8 w-8 animate-spin fill-primary-foreground text-primary dark:fill-primary dark:text-primary/30`,
+          `fill-primary-foreground text-primary dark:fill-primary dark:text-primary/30 h-8 w-8 animate-spin`,
           props.className,
         )}
         viewBox="0 0 100 101"

packages/ui/src/shadcn/accordion.tsx

@@ -28,7 +28,7 @@ const AccordionTrigger: React.FC<
       {...props}
     >
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 );
@@ -38,10 +38,10 @@ const AccordionContent: React.FC<
   React.ComponentPropsWithRef<typeof AccordionPrimitive.Content>
 > = ({ className, children, ...props }) => (
   <AccordionPrimitive.Content
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
     {...props}
   >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+    <div className={cn('pt-0 pb-4', className)}>{children}</div>
   </AccordionPrimitive.Content>
 );
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;

packages/ui/src/shadcn/avatar.tsx

@@ -34,7 +34,7 @@ const AvatarFallback: React.FC<
 > = ({ className, ...props }) => (
   <AvatarPrimitive.Fallback
     className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      'bg-muted flex h-full w-full items-center justify-center rounded-full',
       className,
     )}
     {...props}

packages/ui/src/shadcn/breadcrumb.tsx

@@ -18,7 +18,7 @@ const BreadcrumbList: React.FC<React.ComponentPropsWithRef<'ol'>> = ({
 }) => (
   <ol
     className={cn(
-      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground',
+      'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words',
       className,
     )}
     {...props}
@@ -64,7 +64,7 @@ const BreadcrumbPage: React.FC<React.ComponentPropsWithoutRef<'span'>> = ({
     role="link"
     aria-disabled="true"
     aria-current="page"
-    className={cn('font-normal text-foreground', className)}
+    className={cn('text-foreground font-normal', className)}
     {...props}
   />
 );

packages/ui/src/shadcn/card.tsx

@@ -7,7 +7,7 @@ const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   ...props
 }) => (
   <div
-    className={cn('rounded-xl border bg-card text-card-foreground', className)}
+    className={cn('bg-card text-card-foreground rounded-xl border', className)}
     {...props}
   />
 );
@@ -26,7 +26,7 @@ const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
   ...props
 }) => (
   <h3
-    className={cn('font-semibold leading-none tracking-tight', className)}
+    className={cn('leading-none font-semibold tracking-tight', className)}
     {...props}
   />
 );
@@ -36,7 +36,7 @@ const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
   className,
   ...props
 }) => (
-  <p className={cn('text-sm text-muted-foreground', className)} {...props} />
+  <p className={cn('text-muted-foreground text-sm', className)} {...props} />
 );
 CardDescription.displayName = 'CardDescription';
 

packages/ui/src/shadcn/chart.tsx

@@ -166,8 +166,7 @@ const ChartTooltipContent: React.FC<
     labelKey,
   ]);
 
-  /* @ts-expect-error: TS issue */
-  if (!active ?? !payload?.length) {
+  if (!active || !payload?.length) {
     return null;
   }
 
@@ -286,7 +285,6 @@ const ChartLegendContent: React.FC<
       )}
     >
       {payload.map((item) => {
-        /* eslint-disable @typescript-eslint/restrict-template-expressions */
         const key = `${nameKey ?? item.dataKey ?? 'value'}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
 

packages/ui/src/shadcn/command.tsx

@@ -39,7 +39,6 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 const CommandInput: React.FC<
   React.ComponentPropsWithRef<typeof CommandPrimitive.Input>
 > = ({ className, ...props }) => (
-  // eslint-disable-next-line react/no-unknown-property
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input

packages/ui/src/shadcn/heading.tsx

@@ -12,7 +12,7 @@ export function Heading({
       return (
         <h1
           className={cn(
-            `scroll-m-20 font-heading text-3xl font-bold tracking-tight dark:text-white lg:text-4xl`,
+            `font-heading scroll-m-20 text-3xl font-bold tracking-tight lg:text-4xl dark:text-white`,
             className,
           )}
         >
@@ -23,7 +23,7 @@ export function Heading({
       return (
         <h2
           className={cn(
-            `scroll-m-20 pb-2 font-heading text-2xl font-semibold tracking-tight transition-colors first:mt-0 lg:text-3xl`,
+            `font-heading scroll-m-20 pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0 lg:text-3xl`,
             className,
           )}
         >
@@ -34,7 +34,7 @@ export function Heading({
       return (
         <h3
           className={cn(
-            'scroll-m-20 font-heading text-xl font-semibold tracking-tight lg:text-2xl',
+            'font-heading scroll-m-20 text-xl font-semibold tracking-tight lg:text-2xl',
             className,
           )}
         >
@@ -45,7 +45,7 @@ export function Heading({
       return (
         <h4
           className={cn(
-            'scroll-m-20 font-heading text-lg font-semibold tracking-tight lg:text-xl',
+            'font-heading scroll-m-20 text-lg font-semibold tracking-tight lg:text-xl',
             className,
           )}
         >
@@ -56,7 +56,7 @@ export function Heading({
       return (
         <h5
           className={cn(
-            'scroll-m-20 font-heading text-base font-medium lg:text-lg',
+            'font-heading scroll-m-20 text-base font-medium lg:text-lg',
             className,
           )}
         >
@@ -67,7 +67,7 @@ export function Heading({
       return (
         <h6
           className={cn(
-            'scroll-m-20 font-heading text-base font-medium',
+            'font-heading scroll-m-20 text-base font-medium',
             className,
           )}
         >

packages/ui/src/shadcn/label.tsx

@@ -8,7 +8,7 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import { cn } from '../lib/utils';
 
 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 );
 
 const Label: React.FC<

packages/ui/src/shadcn/progress.tsx

@@ -11,13 +11,13 @@ const Progress: React.FC<
 > = ({ className, value, ...props }) => (
   <ProgressPrimitive.Root
     className={cn(
-      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+      'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
       className,
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="bg-primary h-full w-full flex-1 transition-all"
       style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
     />
   </ProgressPrimitive.Root>

packages/ui/src/shadcn/scroll-area.tsx

@@ -28,7 +28,7 @@ const ScrollBar: React.FC<
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     orientation={orientation}
     className={cn(
-      'flex touch-none select-none transition-colors',
+      'flex touch-none transition-colors select-none',
       orientation === 'vertical' &&
         'h-full w-2.5 border-l border-l-transparent p-[1px]',
       orientation === 'horizontal' &&
@@ -37,7 +37,7 @@ const ScrollBar: React.FC<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 );
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;