Enterwell · AleksandarDev · Apr 2, 2025 · Apr 1, 2025 · Apr 1, 2025 · Apr 1, 2025
diff --git a/apps/docs/app/ThemeWrapperDynamic.tsx b/apps/docs/app/ThemeWrapperDynamic.tsx
diff --git a/apps/docs/app/layout.jsx b/apps/docs/app/layout.jsx
@@ -8,7 +8,9 @@ import { SlackIcon } from '../components/internal/icons/SlackIcon';
 import Image from 'next/image';
 import { Search } from 'nextra/components'
 import { inter } from '../src/fonts';
-import { ThemeWrapper } from './ThemeWrapperDynamic';
+import { theme } from "../components/theme";
+import { ThemeProvider } from "@mui/material";
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
 
 /*
       <>
@@ -128,20 +130,22 @@ export default async function RootLayout({ children }) {
         {/* Your additional tags should be passed as `children` of `<Head>` element */}
       </Head>
       <body className={`${inter.variable} font-sans`}>
-        <ThemeWrapper>
-          <Layout
-            search={<Search />}
-            navbar={navbar}
-            pageMap={await getPageMap()}
-            docsRepositoryBase="https://github.com/enterwell/ui/tree/stage/apps/docs"
-            editLink="Edit this page on GitHub"
-            sidebar={{ defaultMenuCollapseLevel: 1 }}
-            footer={footer}
-          // ...Your additional theme config options
-          >
-            {children}
-          </Layout>
-        </ThemeWrapper>
+        <AppRouterCacheProvider options={{ key: 'css', enableCssLayer: true }}>
+          <ThemeProvider theme={theme}>
+            <Layout
+              search={<Search />}
+              navbar={navbar}
+              pageMap={await getPageMap()}
+              docsRepositoryBase="https://github.com/enterwell/ui/tree/stage/apps/docs"
+              editLink="Edit this page on GitHub"
+              sidebar={{ defaultMenuCollapseLevel: 1 }}
+              footer={footer}
+            // ...Your additional theme config options
+            >
+              {children}
+            </Layout>
+          </ThemeProvider>
+        </AppRouterCacheProvider>
       </body>
     </html>
   )

diff --git a/apps/docs/components/ExampleUseDataGrid.tsx b/apps/docs/components/ExampleUseDataGrid.tsx
@@ -41,17 +41,19 @@ export function ExampleUseDataGrid() {
         };
     };
 
-    const dataGrid = useDataGrid({
+    const { props: dataGridProps, refreshTable } = useDataGrid({
         tableId: 'example-use-data-grid',
         columns,
         onPage: handleOnPage
     });
 
     useEffect(() => {
-        dataGrid.refreshTable();
+        refreshTable();
     }, []);
 
     return (
-        <DataGridPro autoHeight {...dataGrid.props} />
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <DataGridPro {...dataGridProps} />
+        </div>
     );
 }
diff --git a/apps/docs/components/ExampleUseDebounce.tsx b/apps/docs/components/ExampleUseDebounce.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useDebounce } from '@enterwell/react-hooks';
+import { Button } from '@mui/material';
 
 export function ExampleUseDebounce() {
     const [value, setValue] = useState(0);
@@ -13,7 +14,7 @@ export function ExampleUseDebounce() {
         <div>
             <div>Value: {value}</div>
             <div>Value debounced (1s): {valueDebounced}</div>
-            <button onClick={() => setValue((curr) => curr + 1)}>Increment</button>
+            <Button variant='outlined' onClick={() => setValue((curr) => curr + 1)}>Increment</Button>
         </div>
     );
 }
diff --git a/apps/docs/components/ExampleUseMutationObserver.tsx b/apps/docs/components/ExampleUseMutationObserver.tsx
@@ -11,11 +11,13 @@ export function ExampleUseMutationObserver() {
         document.querySelector('html'),
         (mutations) => {
             setMutations((curr) => [...curr, ...mutations]);
-        }, {
+        },
+        {
             attributes: true,
             characterData: true,
             childList: true,
-        });
+        }
+    );
     // @highlight-end
 
     return (

diff --git a/apps/docs/components/docs/NpmPackageCard.tsx b/apps/docs/components/docs/NpmPackageCard.tsx
@@ -8,7 +8,7 @@ type NpmPackageCardProps = {
 
 export function NpmPackageCard({ name, version }: NpmPackageCardProps) {
     return (
-        <Card className="rounded-lg border border-neutral-300 dark:border-neutral-700 bg-card shadow-xl">
+        <Card>
             <CardActionArea href={`https://www.npmjs.com/package/${name}`}>
                 <div className="px-4 py-2 flex items-center justify-between gap-4 w-full">
                     <span className="flex items-center gap-2">

diff --git a/apps/docs/components/internal/ThemeWrapper.tsx b/apps/docs/components/internal/ThemeWrapper.tsx
diff --git a/apps/docs/components/theme.ts b/apps/docs/components/theme.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createTheme } from "@mui/material";
 import { Roboto } from 'next/font/google';
 
@@ -7,15 +9,9 @@ const roboto = Roboto({
     display: 'swap',
 });
 
-export const theme = (mode: string | undefined) => createTheme({
-    palette: {
-        mode: mode === 'light' ? 'light' : 'dark',
-        primary: {
-            main: '#eeeeee',
-        },
-        secondary: {
-            main: '#b5b5b5',
-        }
+export const theme = createTheme({
+    colorSchemes: {
+        dark: true
     },
     typography: {
         fontFamily: roboto.style.fontFamily,

diff --git a/apps/docs/content/about.mdx b/apps/docs/content/about.mdx
@@ -1,5 +1,5 @@
-import { Callout } from 'nextra/components';
-
-<Callout type="warning">Docs for this section is under construction.</Callout>
+> [!WARNING]
+>
+> Docs for this section is under construction.
 
 # About
diff --git a/apps/docs/content/react-hooks/about.mdx b/apps/docs/content/react-hooks/about.mdx
@@ -1,4 +1,3 @@
-import { Callout } from 'nextra/components';
 import { PackageDescription } from '../../components/docs/PackageDocs';
 import PackageMetadata from '@enterwell/react-hooks/package';
 

diff --git a/apps/docs/content/react-hooks/getting-started.mdx b/apps/docs/content/react-hooks/getting-started.mdx
@@ -1,5 +1,5 @@
-import { Callout } from 'nextra/components';
-
-<Callout type="warning">Docs for this section is under construction.</Callout>
+> [!WARNING]
+>
+> Docs for this section is under construction.
 
 # Introduction
diff --git a/apps/docs/content/react-hooks/getting-started/installation.mdx b/apps/docs/content/react-hooks/getting-started/installation.mdx
@@ -1,15 +1,8 @@
-import { Callout } from 'nextra/components';
 import { PackagePeerDependencies } from '../../../components/docs/PackageDocs';
 import packageMetadata from '@enterwell/react-hooks/package';
 
 # Installation
 
-If you don't have pnpm installed, you can install it by running the following command:
-
-```bash
-npm install -g pnpm
-```
-
 Run the following command to install the package:
 
 ```bash

diff --git a/apps/docs/content/react-hooks/hooks.mdx b/apps/docs/content/react-hooks/hooks.mdx
@@ -1,5 +1,5 @@
-import { Callout } from 'nextra/components';
-
-<Callout type="warning">Docs for this section is under construction.</Callout>
+> [!WARNING]
+>
+> Docs for this section is under construction.
 
 # Hooks
diff --git a/apps/docs/content/react-mui-hooks/about.mdx b/apps/docs/content/react-mui-hooks/about.mdx
@@ -1,4 +1,3 @@
-import { Callout } from 'nextra/components';
 import { PackageDescription } from '../../components/docs/PackageDocs';
 import PackageMetadata from '@enterwell/react-mui-hooks/package';
 

diff --git a/apps/docs/content/react-mui-hooks/getting-started.mdx b/apps/docs/content/react-mui-hooks/getting-started.mdx
@@ -1,5 +1,5 @@
-import { Callout } from 'nextra/components';
-
-<Callout type="warning">Docs for this section is under construction.</Callout>
+> [!WARNING]
+>
+> Docs for this section is under construction.
 
 # Introduction
diff --git a/apps/docs/content/react-mui-hooks/getting-started/installation.mdx b/apps/docs/content/react-mui-hooks/getting-started/installation.mdx
@@ -1,15 +1,8 @@
-import { Callout } from 'nextra/components';
 import { PackagePeerDependencies } from '../../../components/docs/PackageDocs';
 import packageMetadata from '@enterwell/react-mui-hooks/package';
 
 # Installation
 
-If you don't have pnpm installed, you can install it by running the following command:
-
-```bash
-npm install -g pnpm
-```
-
 Run the following command to install the package:
 
 ```bash

diff --git a/apps/docs/content/react-mui-hooks/hooks.mdx b/apps/docs/content/react-mui-hooks/hooks.mdx
@@ -1,5 +1,5 @@
-import { Callout } from 'nextra/components';
-
-<Callout type="warning">Docs for this section is under construction.</Callout>
+> [!WARNING]
+>
+> Docs for this section is under construction.
 
 # Hooks
diff --git a/apps/docs/content/react-ui/about.mdx b/apps/docs/content/react-ui/about.mdx
@@ -1,4 +1,3 @@
-import { Callout } from 'nextra/components';
 import { PackageDescription } from '../../components/docs/PackageDocs';
 import PackageMetadata from '@enterwell/react-ui/package';
 

diff --git a/apps/docs/content/react-ui/components.mdx b/apps/docs/content/react-ui/components.mdx
@@ -1,3 +1,3 @@
-import { Callout } from 'nextra/components';
-
-<Callout type="warning">Docs for this section is under construction.</Callout>
+> [!WARNING]
+>
+> Docs for this section is under construction.
diff --git a/apps/docs/content/react-ui/getting-started.mdx b/apps/docs/content/react-ui/getting-started.mdx
@@ -1,6 +1,6 @@
-import { Callout } from 'nextra/components';
-
-<Callout type="warning">Docs for this section is under construction.</Callout>
+> [!WARNING]
+>
+> Docs for this section is under construction.
 
 # Introduction
 

diff --git a/apps/docs/content/react-ui/getting-started/installation.mdx b/apps/docs/content/react-ui/getting-started/installation.mdx
@@ -1,15 +1,8 @@
-import { Callout } from 'nextra/components';
 import { PackagePeerDependencies } from '../../../components/docs/PackageDocs';
 import packageMetadata from '@enterwell/react-ui/package';
 
 # Installation
 
-If you don't have pnpm installed, you can install it by running the following command:
-
-```bash
-npm install -g pnpm
-```
-
 Run the following command to install the package:
 
 ```bash

diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
@@ -8,7 +8,7 @@ const withNextra = nextra({
     ]
   },
   defaultShowCopyCode: true,
-})
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -28,31 +28,32 @@
     "@enterwell/react-ui": "workspace:*",
     "@mdx-js/mdx": "3.1.0",
     "@mdx-js/react": "3.1.0",
-    "@mui/icons-material": "6.4.7",
-    "@mui/lab": "6.0.0-beta.30",
-    "@mui/material": "6.4.3",
-    "@mui/system": "6.4.3",
-    "@mui/x-data-grid-pro": "7.26.0",
-    "@mui/x-date-pickers": "7.27.3",
-    "@mui/x-date-pickers-pro": "7.27.3",
+    "@mui/icons-material": "7.0.1",
+    "@mui/lab": "7.0.0-beta.10",
+    "@mui/material": "7.0.1",
+    "@mui/material-nextjs": "7.0.0",
+    "@mui/system": "7.0.1",
+    "@mui/x-data-grid-pro": "7.28.2",
+    "@mui/x-date-pickers": "7.28.2",
+    "@mui/x-date-pickers-pro": "7.28.2",
     "classix": "2.2.2",
     "comment-parser": "1.4.1",
     "next": "15.2.4",
-    "nextra": "4.2.17",
+    "nextra": "4.3.0-alpha.3",
     "nextra-theme-docs": "4.2.17",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "tailwindcss-animate": "1.0.7"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.0.17",
-    "@types/node": "22.13.16",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
     "@next/eslint-plugin-next": "15.2.4",
+    "@tailwindcss/postcss": "4.1.1",
+    "@types/node": "22.13.17",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.1",
     "pagefind": "1.3.0",
     "postcss": "8.5.3",
-    "tailwindcss": "4.0.17",
+    "tailwindcss": "4.1.1",
     "typescript": "5.8.2",
     "unist-builder": "4.0.0",
     "unist-util-visit": "5.0.0"

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@turbo/gen": "2.4.4",
-    "eslint": "8.57.1",
+    "eslint": "9.23.0",
     "just-camel-case": "6.2.0",
     "just-pascal-case": "3.2.0",
     "tsconfig": "workspace:*",

diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
-    "@vercel/style-guide": "5.2.0",
-    "eslint-config-turbo": "1.13.4"
+    "@vercel/style-guide": "6.0.0",
+    "eslint-config-turbo": "2.4.4"
   }
 }
diff --git a/packages/react-hooks/CHANGELOG.md b/packages/react-hooks/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 _NOTE: This is an automatically generated file. Do not modify contents of this file manually._
 
+## [0.6.0] - 2025-04-01
+### Changed
+- Updated packages
+
 ## [0.5.0] - 2024-01-08
 ### Added
 - [useControllableState] useControllableState hook

diff --git a/...ct-hooks/changes/Changed Updated packages → ...ooks/changes/Changed Updated React to v19 b/...ct-hooks/changes/Changed Updated packages → ...ooks/changes/Changed Updated React to v19
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ const withNextra = nextra({ @@
         ]
       },
       defaultShowCopyCode: true,
-    })
+    });
     /** @type {import('next').NextConfig} */
     const nextConfig = {
@@ Expand Down @@