Upgrade dependencies and enhance UI components

This commit primarily focuses on updating various dependencies, including "@types/react", "@tanstack/react-query", "lucide-react", and others. In addition, several adjustments have been made to UI components, such as adding more properties

apps/web/package.json

@@ -55,11 +55,11 @@
     "@marsidev/react-turnstile": "^0.6.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@supabase/supabase-js": "^2.43.4",
-    "@tanstack/react-query": "5.37.1",
+    "@tanstack/react-query": "5.39.0",
-    "@tanstack/react-query-next-experimental": "^5.36.2",
+    "@tanstack/react-query-next-experimental": "^5.39.0",
     "@tanstack/react-table": "^8.17.3",
     "date-fns": "^3.6.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "next-sitemap": "^4.2.3",
     "next-themes": "0.3.0",
@@ -80,7 +80,7 @@
     "@next/bundle-analyzer": "14.2.3",
     "@types/mdx": "^2.0.13",
     "@types/node": "^20.12.12",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
     "dotenv-cli": "^7.4.2",

package.json

@@ -38,7 +38,7 @@
     "@manypkg/cli": "^0.21.4",
     "@turbo/gen": "^1.13.3",
     "cross-env": "^7.0.3",
-    "pnpm": "^9.1.1",
+    "pnpm": "^9.1.3",
     "prettier": "^3.2.5",
     "turbo": "^1.13.3",
     "typescript": "^5.4.5",

packages/billing/gateway/package.json

@@ -28,9 +28,9 @@
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:^",
     "@supabase/supabase-js": "^2.43.4",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "date-fns": "^3.6.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "react": "18.3.1",
     "react-hook-form": "^7.51.4",

packages/billing/lemon-squeezy/package.json

@@ -25,7 +25,7 @@
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:^",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "next": "14.2.3",
     "react": "18.3.1",
     "zod": "^3.23.8"

packages/billing/stripe/package.json

@@ -28,7 +28,7 @@
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:^",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "date-fns": "^3.6.0",
     "next": "14.2.3",
     "react": "18.3.1",

packages/cms/keystatic/package.json

@@ -15,8 +15,8 @@
     "./route-handler": "./src/keystatic-route-handler.ts"
   },
   "dependencies": {
-    "@keystatic/core": "0.5.15",
+    "@keystatic/core": "0.5.17",
-    "@keystatic/next": "^5.0.0",
+    "@keystatic/next": "^5.0.1",
     "@markdoc/markdoc": "^0.4.0"
   },
   "devDependencies": {
@@ -26,7 +26,7 @@
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:^",
     "@types/node": "^20.12.12",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "react": "18.3.1",
     "zod": "^3.23.8"
   },

packages/email-templates/package.json

@@ -13,7 +13,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@react-email/components": "0.0.18"
+    "@react-email/components": "0.0.19"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",

packages/features/accounts/package.json

@@ -34,10 +34,10 @@
     "@kit/ui": "workspace:^",
     "@radix-ui/react-icons": "^1.3.0",
     "@supabase/supabase-js": "^2.43.4",
-    "@tanstack/react-query": "5.37.1",
+    "@tanstack/react-query": "5.39.0",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "next-themes": "0.3.0",
     "react": "18.3.1",

packages/features/admin/package.json

@@ -21,10 +21,10 @@
     "@makerkit/data-loader-supabase-core": "^0.0.8",
     "@makerkit/data-loader-supabase-nextjs": "^1.2.3",
     "@supabase/supabase-js": "^2.43.4",
-    "@tanstack/react-query": "5.37.1",
+    "@tanstack/react-query": "5.39.0",
     "@tanstack/react-table": "^8.17.3",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",

packages/features/auth/package.json

@@ -29,9 +29,9 @@
     "@marsidev/react-turnstile": "^0.6.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@supabase/supabase-js": "^2.43.4",
-    "@tanstack/react-query": "5.37.1",
+    "@tanstack/react-query": "5.39.0",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "react-hook-form": "^7.51.4",
     "react-i18next": "^14.1.2",

packages/features/notifications/package.json

@@ -21,9 +21,9 @@
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
     "@supabase/supabase-js": "^2.43.4",
-    "@tanstack/react-query": "5.37.1",
+    "@tanstack/react-query": "5.39.0",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "^14.1.2"

packages/features/team-accounts/package.json

@@ -32,13 +32,13 @@
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:^",
     "@supabase/supabase-js": "^2.43.4",
-    "@tanstack/react-query": "5.37.1",
+    "@tanstack/react-query": "5.39.0",
     "@tanstack/react-table": "^8.17.3",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "class-variance-authority": "^0.7.0",
     "date-fns": "^3.6.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",

packages/i18n/package.json

@@ -21,7 +21,7 @@
     "@kit/shared": "workspace:^",
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@tanstack/react-query": "5.37.1",
+    "@tanstack/react-query": "5.39.0",
     "react-i18next": "^14.1.2"
   },
   "dependencies": {

packages/monitoring/api/package.json

@@ -24,7 +24,7 @@
     "@kit/sentry": "workspace:*",
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "react": "18.3.1"
   },
   "eslintConfig": {

packages/monitoring/baselime/package.json

@@ -25,7 +25,7 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "react": "18.3.1",
     "zod": "^3.23.8"
   },

packages/monitoring/core/package.json

@@ -18,7 +18,7 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "react": "18.3.1"
   },
   "eslintConfig": {

packages/monitoring/sentry/package.json

@@ -32,7 +32,7 @@
     "@kit/prettier-config": "workspace:*",
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "react": "18.3.1"
   },
   "eslintConfig": {

packages/supabase/package.json

@@ -29,8 +29,8 @@
     "@supabase/gotrue-js": "2.62.2",
     "@supabase/ssr": "^0.3.0",
     "@supabase/supabase-js": "^2.43.4",
-    "@tanstack/react-query": "5.37.1",
+    "@tanstack/react-query": "5.39.0",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "next": "14.2.3",
     "react": "18.3.1",
     "zod": "^3.23.8"

packages/ui/package.json

@@ -31,7 +31,7 @@
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "input-otp": "1.2.4",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "react-top-loading-bar": "2.3.1",
     "tailwind-merge": "^2.3.0"
   },
@@ -42,7 +42,7 @@
     "@kit/tsconfig": "workspace:*",
     "@radix-ui/react-icons": "^1.3.0",
     "@tanstack/react-table": "^8.17.3",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "class-variance-authority": "^0.7.0",
     "date-fns": "^3.6.0",

packages/ui/src/makerkit/bordered-navigation-menu.tsx

@@ -14,7 +14,7 @@ import { Trans } from './trans';
 
 export function BorderedNavigationMenu(props: React.PropsWithChildren) {
   return (
-    <NavigationMenu className={'h-full'}>
+    <NavigationMenu>
       <NavigationMenuList className={'relative h-full space-x-2'}>
         {props.children}
       </NavigationMenuList>
@@ -24,17 +24,23 @@ export function BorderedNavigationMenu(props: React.PropsWithChildren) {
 
 export function BorderedNavigationMenuItem(props: {
   path: string;
-  label: string;
+  label: React.ReactNode | string;
   end?: boolean | ((path: string) => boolean);
   active?: boolean;
+  className?: string;
+  buttonClassName?: string;
 }) {
   const pathname = usePathname();
 
   const active = props.active ?? isRouteActive(props.path, pathname, props.end);
 
   return (
-    <NavigationMenuItem>
+    <NavigationMenuItem className={props.className}>
-      <Button asChild variant={'ghost'} className={'relative active:shadow-sm'}>
+      <Button
+        asChild
+        variant={'ghost'}
+        className={cn('relative active:shadow-sm', props.buttonClassName)}
+      >
         <Link
           href={props.path}
           className={cn('text-sm', {
@@ -43,7 +49,11 @@ export function BorderedNavigationMenuItem(props: {
               !active,
           })}
         >
-          <Trans i18nKey={props.label} defaults={props.label} />
+          {typeof props.label === 'string' ? (
+            <Trans i18nKey={props.label} defaults={props.label} />
+          ) : (
+            props.label
+          )}
 
           {active ? (
             <span

packages/ui/src/makerkit/stepper.tsx

@@ -30,10 +30,12 @@ export function Stepper(props: {
   const Steps = useCallback(() => {
     return props.steps.map((labelOrKey, index) => {
       const selected = props.currentStep === index;
+      const complete = props.currentStep > index;
 
       const className = classNameBuilder({
         selected,
         variant,
+        complete,
       });
 
       const isNumberVariant = variant === 'numbers';
@@ -54,7 +56,9 @@ export function Stepper(props: {
           </div>
 
           <If condition={isNumberVariant}>
-            <StepDivider selected={selected}>{label}</StepDivider>
+            <StepDivider selected={selected} complete={complete}>
+              {label}
+            </StepDivider>
           </If>
         </Fragment>
       );
@@ -68,7 +72,7 @@ export function Stepper(props: {
 
   const containerClassName = cn({
     ['flex justify-between']: variant === 'numbers',
-    ['flex space-x-1']: variant === 'default',
+    ['flex space-x-0.5']: variant === 'default',
   });
 
   return (
@@ -82,15 +86,18 @@ function getClassNameBuilder() {
   return cva(``, {
     variants: {
       variant: {
-        default: `flex flex-col h-[2.5px] w-full transition-colors duration-500`,
+        default: `flex flex-col h-[2.5px] w-full transition-all duration-500`,
         numbers:
-          'w-9 h-9 font-bold rounded-full flex items-center justify-center' +
+          'w-9 h-9 font-bold rounded-full flex items-center justify-center text-sm border',
-          ' text-sm border',
       },
       selected: {
         true: '',
         false: '',
       },
+      complete: {
+        true: '',
+        false: '',
+      },
     },
     compoundVariants: [
       {
@@ -101,17 +108,30 @@ function getClassNameBuilder() {
       {
         variant: 'default',
         selected: true,
-        className: 'bg-primary',
+        className: 'bg-primary font-medium',
       },
       {
         variant: 'default',
         selected: false,
+        complete: false,
         className: 'bg-muted',
       },
+      {
+        variant: 'default',
+        selected: false,
+        complete: true,
+        className: 'bg-primary',
+      },
+      {
+        variant: 'numbers',
+        selected: false,
+        complete: true,
+        className: 'border-primary text-primary',
+      },
       {
         variant: 'numbers',
         selected: true,
-        className: 'text-primary border-primary',
+        className: 'border-primary bg-primary text-primary-foreground',
       },
       {
         variant: 'numbers',
@@ -128,13 +148,16 @@ function getClassNameBuilder() {
 
 function StepDivider({
   selected,
+  complete,
   children,
 }: React.PropsWithChildren<{
   selected: boolean;
+  complete: boolean;
 }>) {
-  const spanClassName = cn('font-medium text-sm', {
+  const spanClassName = cn('font-medium text-sm min-w-max', {
     ['text-muted-foreground']: !selected,
-    ['text-primary']: selected,
+    ['text-secondary-foreground']: selected || complete,
+    ['font-medium']: selected,
   });
 
   const className = cn(
@@ -149,7 +172,7 @@ function StepDivider({
       <div
         className={
           'divider h-[1px] w-full bg-gray-200 transition-colors' +
-          ' dark:bg-dark-600 group-last:hidden'
+          ' group-last:hidden dark:bg-border'
         }
       />
     </div>