feat: Added Mantine adapter

- Added Mantine adapter
- Updated tsconfig
- Migrated the library website from React 18 to React 19
- Updated Documentation, API and Demo sections on the library website
- Updated README

Author: Vojtěch Václav Porteš

README.md

@@ -109,6 +109,8 @@ subpath exports:
 - `@vojtechportes/react-query-builder/mui/v7` for applications still on MUI 7
 - `@vojtechportes/react-query-builder/antd/v6` for new Ant Design projects
 - `@vojtechportes/react-query-builder/antd/v5` for applications still on Ant Design 5
+- `@vojtechportes/react-query-builder/mantine/v9` for new Mantine projects
+- `@vojtechportes/react-query-builder/mantine/v8` for applications still on Mantine 8
 - `@vojtechportes/react-query-builder/fluentui/v8` for Fluent UI React 8 projects
 
 Install the peer dependencies that match the adapter you want to use and pass
@@ -160,6 +162,33 @@ export const MyAntdBuilder = () => {
 };
 ```
 
+Mantine example:
+
+```bash
+npm install @mantine/core@^9.0.0 @mantine/hooks@^9.0.0
+```
+
+```tsx
+import React from 'react';
+import '@mantine/core/styles.css';
+import { MantineProvider } from '@mantine/core';
+import { Builder } from '@vojtechportes/react-query-builder';
+import { components } from '@vojtechportes/react-query-builder/mantine/v9';
+
+export const MyMantineBuilder = () => {
+  return (
+    <MantineProvider>
+      <Builder
+        fields={fields}
+        data={data}
+        components={components}
+        onChange={setData}
+      />
+    </MantineProvider>
+  );
+};
+```
+
 Fluent UI example:
 
 ```bash
@@ -184,7 +213,7 @@ export const MyFluentUiBuilder = () => {
 ```
 
 `ThemeProvider` customizes the built-in default component set. It does not
-theme the MUI, ANTD, or Fluent UI adapters, which keep their styling in their host UI
+theme the MUI, ANTD, Mantine, or Fluent UI adapters, which keep their styling in their host UI
 libraries.
 
 More adapter details:

example/package.json

@@ -12,20 +12,22 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fluentui/react": "^8.125.6",
+    "@mantine/core": "^9.2.2",
+    "@mantine/hooks": "^9.2.2",
     "@mui/icons-material": "^9.0.1",
     "@mui/material": "^9.0.1",
     "antd": "^6.0.0",
     "minisearch": "^7.2.0",
     "prism-react-renderer": "^2.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "react-router-dom": "^7.15.1",
     "styled-components": "^6.4.2"
   },
   "devDependencies": {
     "@types/node": "^22.13.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
     "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.6.3",

example/public/sitemap.xml

@@ -42,6 +42,9 @@
   <url>
     <loc>https://vojtechportes.github.io/react-query-builder/documentation/adapters/antd</loc>
   </url>
+  <url>
+    <loc>https://vojtechportes.github.io/react-query-builder/documentation/adapters/mantine</loc>
+  </url>
   <url>
     <loc>https://vojtechportes.github.io/react-query-builder/documentation/adapters/fluentui</loc>
   </url>
@@ -75,6 +78,9 @@
   <url>
     <loc>https://vojtechportes.github.io/react-query-builder/api/adapters/antd</loc>
   </url>
+  <url>
+    <loc>https://vojtechportes.github.io/react-query-builder/api/adapters/mantine</loc>
+  </url>
   <url>
     <loc>https://vojtechportes.github.io/react-query-builder/api/adapters/fluentui</loc>
   </url>

example/src/app/app.tsx

@@ -45,6 +45,7 @@ export const App: React.FC = () => (
           <Route path="/api/adapters" element={<ApiPage />} />
           <Route path="/api/adapters/mui" element={<ApiPage />} />
           <Route path="/api/adapters/antd" element={<ApiPage />} />
+          <Route path="/api/adapters/mantine" element={<ApiPage />} />
           <Route path="/api/adapters/fluentui" element={<ApiPage />} />
           <Route path="/api/theming" element={<ApiPage />} />
           <Route path="/api/format-query" element={<ApiPage />} />
@@ -65,6 +66,10 @@ export const App: React.FC = () => (
           <Route path="/documentation/adapters" element={<DocumentationPage />} />
           <Route path="/documentation/adapters/mui" element={<DocumentationPage />} />
           <Route path="/documentation/adapters/antd" element={<DocumentationPage />} />
+          <Route
+            path="/documentation/adapters/mantine"
+            element={<DocumentationPage />}
+          />
           <Route
             path="/documentation/adapters/fluentui"
             element={<DocumentationPage />}

example/src/components/demo-playground.tsx

@@ -6,6 +6,9 @@ import {
 } from '@vojtechportes/react-query-builder';
 import { components as antdComponents } from '@vojtechportes/react-query-builder/antd/v6';
 import { components as fluentUiComponents } from '@vojtechportes/react-query-builder/fluentui/v8';
+import mantineStyles from '@mantine/core/styles.css?inline';
+import { MantineProvider } from '@mantine/core';
+import { components as mantineComponents } from '@vojtechportes/react-query-builder/mantine/v9';
 import { createMonacoComponents } from '@vojtechportes/react-query-builder/monaco';
 import { components as muiComponents } from '@vojtechportes/react-query-builder/mui/v9';
 import type { IColors } from '../../../src/constants/colors';
@@ -180,13 +183,71 @@ const SourceButton = styled.button`
   }
 `;
 
+const mantineScopeClassName = 'mantine-demo-scope';
+
+const scopedMantineStyles = mantineStyles
+  .replace(
+    /:root,\s*:host/g,
+    `.${mantineScopeClassName}`
+  )
+  .replace(
+    /body,\s*:host/g,
+    `.${mantineScopeClassName}`
+  )
+  .replace(
+    /:root\[data-mantine-color-scheme='dark'\],\s*:host\(\[data-mantine-color-scheme='dark'\]\)/g,
+    `.${mantineScopeClassName}[data-mantine-color-scheme='dark']`
+  )
+  .replace(
+    /:root\[data-mantine-color-scheme='light'\],\s*:host\(\[data-mantine-color-scheme='light'\]\)/g,
+    `.${mantineScopeClassName}[data-mantine-color-scheme='light']`
+  )
+  .replace(
+    /\*,\s*\*::before,\s*\*::after/g,
+    `.${mantineScopeClassName}, .${mantineScopeClassName} *, .${mantineScopeClassName} *::before, .${mantineScopeClassName} *::after`
+  )
+  .replace(
+    /input,\s*button,\s*textarea,\s*select/g,
+    `.${mantineScopeClassName} input, .${mantineScopeClassName} button, .${mantineScopeClassName} textarea, .${mantineScopeClassName} select`
+  )
+  .replace(
+    /button,\s*select/g,
+    `.${mantineScopeClassName} button, .${mantineScopeClassName} select`
+  )
+  .replace(
+    /fieldset:disabled \.mantine-active:active/g,
+    `.${mantineScopeClassName} fieldset:disabled .mantine-active:active`
+  );
+
+const scopedMantineDemoOverrides = `
+  .${mantineScopeClassName} .mantine-Button-root,
+  .${mantineScopeClassName} .mantine-UnstyledButton-root,
+  .${mantineScopeClassName} .mantine-ActionIcon-root {
+    font-size: 14px !important;
+  }
+
+  .${mantineScopeClassName} .mantine-Button-root,
+  .${mantineScopeClassName} .mantine-UnstyledButton-root {
+    min-height: 34px;
+  }
+
+  .${mantineScopeClassName} .mantine-Input-input,
+  .${mantineScopeClassName} .mantine-Select-input,
+  .${mantineScopeClassName} .mantine-MultiSelect-input,
+  .${mantineScopeClassName} .mantine-Combobox-option,
+  .${mantineScopeClassName} .mantine-PillsInput-input {
+    font-size: 14px !important;
+  }
+`;
+
 export interface IDemoPlaygroundProps {
   initialData?: DenormalizedQuery;
 }
 
 export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
   initialData = initialQueryTree,
 }) => {
+  const mantineRootRef = React.useRef<HTMLDivElement>(null);
   const [data, setData] = React.useState<DenormalizedQuery>(initialData);
   const [outputFormat, setOutputFormat] = React.useState<OutputFormat>('Native');
   const [readOnly, setReadOnly] = React.useState(false);
@@ -212,8 +273,10 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
   const [showSourceCode, setShowSourceCode] = React.useState(false);
   const isMuiMode = customizationMode === 'mui';
   const isAntdMode = customizationMode === 'antd';
+  const isMantineMode = customizationMode === 'mantine';
   const isFluentUiMode = customizationMode === 'fluentui';
-  const usesAdapterMode = isMuiMode || isAntdMode || isFluentUiMode;
+  const usesAdapterMode =
+    isMuiMode || isAntdMode || isMantineMode || isFluentUiMode;
 
   React.useEffect(() => {
     if (!singleRootGroup && textMode) {
@@ -227,6 +290,8 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
         ? muiComponents
         : customizationMode === 'antd'
           ? antdComponents
+          : customizationMode === 'mantine'
+            ? mantineComponents
           : customizationMode === 'fluentui'
             ? fluentUiComponents
           : undefined;
@@ -483,6 +548,16 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
               />
               <span>Fluent UI adapter</span>
             </ToggleRow>
+
+            <ToggleRow>
+              <Toggle
+                type="radio"
+                name="customization-mode"
+                checked={customizationMode === 'mantine'}
+                onChange={() => setCustomizationMode('mantine')}
+              />
+              <span>Mantine adapter</span>
+            </ToggleRow>
           </ChoiceGroup>
         </Panel>
 
@@ -495,6 +570,8 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
               usesAdapterMode
                 ? isMuiMode
                   ? 'ThemeProvider colors style the default builder components only. The MUI adapter uses Material UI styling instead.'
+                  : isMantineMode
+                    ? 'ThemeProvider colors style the default builder components only. The Mantine adapter uses Mantine styling instead.'
                   : isFluentUiMode
                     ? 'ThemeProvider colors style the default builder components only. The Fluent UI adapter uses Fluent UI styling instead.'
                   : 'ThemeProvider colors style the default builder components only. The ANTD adapter uses Ant Design styling instead.'
@@ -522,19 +599,49 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
         </OutputCard>
 
         <BuilderCard>
-          <BuilderSurface>
-            {isMuiMode ? (
-              <Builder {...builderProps} />
-            ) : isFluentUiMode ? (
-              <Builder {...builderProps} />
-            ) : isAntdMode ? (
-              <Builder {...builderProps} />
-            ) : (
-              <ThemeProvider colors={themeColors}>
+          {isMantineMode ? (
+            <>
+              <style>{scopedMantineStyles}</style>
+              <style>{scopedMantineDemoOverrides}</style>
+              <BuilderSurface
+                ref={mantineRootRef}
+                className={mantineScopeClassName}
+                style={
+                  {
+                    fontSize: '14px',
+                    lineHeight: 1.5,
+                    '--mantine-font-size-xs': '0.75rem',
+                    '--mantine-font-size-sm': '0.8125rem',
+                    '--mantine-font-size-md': '0.875rem',
+                    '--mantine-font-size-lg': '1rem',
+                    '--mantine-font-size-xl': '1.125rem',
+                  } as React.CSSProperties
+                }
+              >
+                <MantineProvider
+                  cssVariablesSelector={`.${mantineScopeClassName}`}
+                  getRootElement={() => mantineRootRef.current ?? undefined}
+                  withGlobalClasses={false}
+                >
+                  <Builder {...builderProps} />
+                </MantineProvider>
+              </BuilderSurface>
+            </>
+          ) : (
+            <BuilderSurface>
+              {isMuiMode ? (
+                <Builder {...builderProps} />
+              ) : isFluentUiMode ? (
+                <Builder {...builderProps} />
+              ) : isAntdMode ? (
                 <Builder {...builderProps} />
-              </ThemeProvider>
-            )}
-          </BuilderSurface>
+              ) : (
+                <ThemeProvider colors={themeColors}>
+                  <Builder {...builderProps} />
+                </ThemeProvider>
+              )}
+            </BuilderSurface>
+          )}
         </BuilderCard>
 
         <OutputCard>

example/src/components/site-shell.tsx

@@ -29,7 +29,12 @@ const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     min-width: 320px;
-    font: inherit;
+    font-family: "Segoe UI", "Inter", sans-serif;
+    line-height: 1.5;
+    color: #0f172a;
+    background:
+      radial-gradient(circle at top left, ${siteTheme.pageGlow}, transparent 32%),
+      linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
   }
 
   a {