Upgrade React v19 and Tailwind v4

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

package.json

@@ -2,6 +2,7 @@
   "name": "rspress-doc-template",
   "version": "1.0.0",
   "private": true,
+  "main": "dist/docs/index.js",
   "scripts": {
     "dev": "rspress dev",
     "build": "rspress build",
@@ -11,43 +12,43 @@
     "lint": "biome lint --write"
   },
   "dependencies": {
-    "@fontsource/inter": "^5.0.20",
-    "@internationalized/date": "^3.5.5",
-    "@react-aria/accordion": "^3.0.0-alpha.31",
-    "@react-aria/toast": "^3.0.0-beta.14",
-    "@react-stately/toast": "^3.0.0-beta.5",
-    "@react-stately/tree": "^3.8.3",
-    "lucide-react": "^0.424.0",
-    "react-aria": "^3.34.1",
-    "react-aria-components": "^1.3.1",
-    "recharts": "^2.12.7",
-    "tailwind-variants": "^0.2.1"
+    "@fontsource/inter": "^5.2.5",
+    "@internationalized/date": "^3.8.0",
+    "@react-aria/accordion": "^3.0.0-alpha.37",
+    "@react-aria/toast": "^3.0.2",
+    "@react-stately/toast": "^3.1.0",
+    "@react-stately/tree": "^3.8.9",
+    "@tailwindcss/postcss": "^4.1.5",
+    "lucide-react": "^0.509.0",
+    "react-aria": "^3.39.0",
+    "react-aria-components": "^1.8.0",
+    "recharts": "^2.15.3",
+    "tailwind-variants": "^1.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.8.3",
-    "@rspress/plugin-api-docgen": "^1.27.0",
-    "@rspress/plugin-last-updated": "^1.27.0",
-    "@rspress/plugin-preview": "^1.27.0",
-    "@spectrum-icons/illustrations": "^3.6.15",
-    "@types/node": "^20",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "autoprefixer": "^10.4.20",
+    "@biomejs/biome": "^1.9.4",
+    "@rspress/plugin-api-docgen": "^2.0.0-beta.5",
+    "@rspress/plugin-last-updated": "^2.0.0-beta.5",
+    "@rspress/plugin-preview": "^2.0.0-beta.5",
+    "@spectrum-icons/illustrations": "^3.6.21",
+    "@types/node": "^22.15.17",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
+    "autoprefixer": "^10.4.21",
     "postcss-import": "^16.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rspress": "^1.27.0",
-    "tailwindcss": "^3.4.7",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rspress": "^2.0.0-beta.5",
+    "tailwindcss": "^4.1.5",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-react-aria-components": "^1.1.4",
-    "typescript": "^5.5.4",
-    "viridis": "^1.1.5",
-    "zod": "^3.23.8"
+    "tailwindcss-react-aria-components": "^2.0.0",
+    "typescript": "^5.8.3",
+    "viridis": "^1.1.8",
+    "zod": "^3.24.4"
   },
   "postcss": {
     "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
+      "@tailwindcss/postcss": {}
     }
   }
 }

rspress.config.ts

@@ -6,7 +6,7 @@ import { defineConfig } from "rspress/config";
 
 export default defineConfig({
   ssg: false,
-  globalStyles: path.join(__dirname, "styles", "index.css"),
+  globalStyles: path.join(__dirname, "styles", "rspress.css"),
   root: path.join(__dirname, "docs"),
   route: {
     exclude: ["**/_lib/*.*"]

styles/rspress.css

@@ -1,6 +1,6 @@
 /**
-* Rspress theme variables
-*/
+ * Rspress theme variables
+ */
 
 :root {
   --rp-nav-height: 57px;
@@ -33,8 +33,8 @@
 }
 
 /**
-* Rspress theme mode variables
-*/
+ * Rspress theme mode variables
+ */
 :root {
   --rp-c-bg: hsl(var(--background));
   --rp-c-bg-soft: hsl(var(--secondary));
@@ -55,8 +55,8 @@
 }
 
 /**
-*
-*/
+ *
+ */
 
 .rspress-preview-card {
   height: 370px;
@@ -71,7 +71,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px
+  gap: 8px;
 }
 
 button.outline {

theme/index.tsx

@@ -1,12 +1,12 @@
 import { CustomizeThemeButton } from "@/ui/theme/CustomizeThemeButton";
 import { ThemeProvider } from "@/ui/theme/ThemeContext";
 import { ThemeModeProvider } from "@/ui/theme/mode/ThemeMode";
-import Theme from "rspress/theme";
+import { Layout as BasicLayout } from "rspress/theme";
 
-const Layout = () => (
+export const Layout = () => (
   <ThemeModeProvider>
     <ThemeProvider>
-      <Theme.Layout
+      <BasicLayout
         afterNavMenu={
           <div className="px-4">
             <CustomizeThemeButton />
@@ -17,9 +17,4 @@ const Layout = () => (
   </ThemeModeProvider>
 );
 
-export default {
-  ...Theme,
-  Layout
-};
-
 export * from "rspress/theme";

ui/charts/AreaChart.tsx

@@ -23,13 +23,13 @@ export function AreaChart<T extends string>({ data, isAnimationActive, className
             type="monotone"
             stroke={getChartColor(index, dataKeys.length)}
             fill={getChartColor(index, dataKeys.length)}
-            className="!stroke-border"
+            className="stroke-border!"
             activeDot={{ r: 4 }}
             isAnimationActive={isAnimationActive}
           />
         ))}
-        <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
-        <YAxis className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <XAxis dataKey="name" className="text-sm!" stroke="hsl(var(--muted-foreground))" />
+        <YAxis className="text-sm!" stroke="hsl(var(--muted-foreground))" />
         <Legend stroke="hsl(var(--muted-foreground))" />
       </ReAreaChart>
     </ResponsiveContainer>

ui/charts/BarChart.tsx

@@ -21,12 +21,12 @@ export function BarChart<T extends string>({ data, isAnimationActive, className
             key={key}
             dataKey={key}
             fill={getChartColor(index, dataKeys.length)}
-            className="!stroke-border"
+            className="stroke-border!"
             isAnimationActive={isAnimationActive}
           />
         ))}
-        <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
-        <YAxis className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <XAxis dataKey="name" className="text-sm!" stroke="hsl(var(--muted-foreground))" />
+        <YAxis className="text-sm!" stroke="hsl(var(--muted-foreground))" />
         <Legend stroke="hsl(var(--muted-foreground))" />
       </ReBarChart>
     </ResponsiveContainer>

ui/charts/CartesianGrid.tsx

@@ -1,6 +1,6 @@
 import { CartesianGrid as ReCartesianGrid } from "recharts";
 import type { Props } from "recharts/types/cartesian/CartesianGrid";
 
-export function CartesianGrid({ className = "!stroke-border", strokeDasharray = "3 3", ...props }: Props) {
+export function CartesianGrid({ className = "stroke-border!", strokeDasharray = "3 3", ...props }: Props) {
   return <ReCartesianGrid {...props} strokeDasharray={strokeDasharray} className={className} />;
 }

ui/charts/LinePlot.tsx

@@ -22,13 +22,13 @@ export function LinePlot<T extends string>({ data, isAnimationActive, className
             dataKey={key}
             type="monotone"
             stroke={getChartColor(index, dataKeys.length)}
-            className="!stroke-border"
+            className="stroke-border!"
             activeDot={{ r: 4 }}
             isAnimationActive={isAnimationActive}
           />
         ))}
-        <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
-        <YAxis className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <XAxis dataKey="name" className="text-sm!" stroke="hsl(var(--muted-foreground))" />
+        <YAxis className="text-sm!" stroke="hsl(var(--muted-foreground))" />
         <Legend stroke="hsl(var(--muted-foreground))" />
       </LineChart>
     </ResponsiveContainer>

ui/charts/PieChart.tsx

@@ -41,7 +41,7 @@ export function PieChart<T extends string>({ data, isAnimationActive, className
             stroke={getChartColor(index, dataKeys.length)}
             fill={getChartColor(index, dataKeys.length)}
             {...radius[index]}
-            className="!stroke-border"
+            className="stroke-border!"
             paddingAngle={1}
             isAnimationActive={isAnimationActive}
           />

ui/charts/RadarChart.tsx

@@ -31,11 +31,11 @@ export function RadarChart<T extends string>({
     <ResponsiveContainer width="100%" height="100%" className={className}>
       <ReRadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
         <PolarGrid />
-        <PolarAngleAxis dataKey="name" className="!text-sm" stroke="hsl(var(--foreground))" />
+        <PolarAngleAxis dataKey="name" className="text-sm!" stroke="hsl(var(--foreground))" />
         <PolarRadiusAxis
           angle={360 / data.length}
           domain={domain}
-          className="!text-sm"
+          className="text-sm!"
           stroke="hsl(var(--muted-foreground))"
         />
 

ui/charts/Tooltip.tsx

@@ -2,8 +2,8 @@ import { Tooltip as ReTooltip, type TooltipProps } from "recharts";
 import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
 
 export function Tooltip<TValue extends ValueType, TName extends NameType>({
-  labelClassName = "!font-semibold !text-xs !text-foreground",
-  wrapperClassName = "!bg-background rounded-xl !border !border-border !p-2 !text-foreground !text-xs",
+  labelClassName = "font-semibold! text-xs! text-foreground!",
+  wrapperClassName = "bg-background! rounded-xl border! border-border! p-2! text-foreground! text-xs!",
   itemStyle = { background: "hsl(var(--background))", color: "hsl(var(--foreground))" },
   ...props
 }: TooltipProps<TValue, TName>) {

ui/components/Checkbox.tsx

@@ -49,14 +49,14 @@ const checkboxStyles = tv({
 
 const boxStyles = tv({
   extend: focusRing,
-  base: "w-5 h-5 flex-shrink-0 rounded flex items-center justify-center border-2 transition",
+  base: "w-5 h-5 shrink-0 rounded flex items-center justify-center border-2 transition",
   variants: {
     isSelected: {
-      false: "bg-background border-[--color] [--color:theme(colors.foreground)] group-pressed:opacity-90",
-      true: "text-primary-foreground bg-[--color] border-[--color] [--color:theme(colors.primary.DEFAULT)] group-pressed:group-pressed:opacity-90"
+      false: "bg-background border-(--color) [--color:var(--color-foreground)] group-pressed:opacity-90",
+      true: "text-primary-foreground bg-(--color) border-(--color) [--color:var(--color-primary)] group-pressed:group-pressed:opacity-90"
     },
     isInvalid: {
-      true: "text-destructive-foreground [--color:theme(colors.destructive.DEFAULT)] group-pressed:group-pressed:opacity-90"
+      true: "text-destructive-foreground [--color:var(--color-destructive)] group-pressed:group-pressed:opacity-90"
     },
     isDisabled: {
       true: "opacity-50 cursor-not-allowed"

ui/components/ComboBox.tsx

@@ -50,7 +50,7 @@ export function ComboBox<T extends object>({
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover className="w-[--trigger-width]" isOpen={isOpen}>
+      <Popover className="w-(--trigger-width)" isOpen={isOpen}>
         <ListBox
           items={items}
           className="max-h-[inherit] overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_.75rem)]"

ui/components/DropZone.tsx

@@ -7,7 +7,7 @@ import type { DropZoneProps } from "react-aria-components";
 import { tv } from "tailwind-variants";
 
 const dropZoneStyles = tv({
-  base: "flex h-[150px] w-[300px] flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm data-[drop-target]:border-solid data-[drop-target]:border-primary data-[drop-target]:bg-accent"
+  base: "flex h-[150px] w-[300px] flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm data-drop-target:border-solid data-drop-target:border-primary data-drop-target:bg-accent"
 });
 
 export function DropZone({ className, ...props }: Readonly<DropZoneProps>) {

ui/components/Modal.tsx

@@ -6,7 +6,7 @@ import { Modal as AriaModal, ModalOverlay, type ModalOverlayProps } from "react-
 import { tv } from "tailwind-variants";
 
 const overlayStyles = tv({
-  base: "fixed top-0 left-0 w-full h-[--visual-viewport-height] isolate z-20 bg-black/[15%] text-center flex backdrop-blur-lg",
+  base: "fixed top-0 left-0 w-full h-(--visual-viewport-height) isolate z-20 bg-black/[15%] text-center flex backdrop-blur-lg",
   variants: {
     isEntering: {
       true: "animate-in fade-in duration-200 ease-out"