nxds with Mantine

npx nxds-cli@latest init
npx nxds-cli@latest add button

/* app/globals.css */
@layer mantine, properties, theme, base, components, utilities, nx-runtime;
@import '@mantine/core/styles.layer.css';

// app/page.tsx
import { Button as MantineButton, Group } from '@mantine/core';

import { Button } from '@/components/nxds/components/button/button';

export default function Page() {
  return (
    <Group gap="sm">
      <MantineButton>Save</MantineButton>
      <Button variant="outline">Preview</Button>
    </Group>
  );
}

/* app/nxds.css, after the imports */
:root {
  --nx-z-index-modal: 500;
  --nx-z-index-popover: 600;
  --nx-z-index-toast: 700;
}

// app/mantine-provider.tsx
'use client';

import {
  type MantineColorSchemeManager,
  MantineProvider,
  useMantineColorScheme,
} from '@mantine/core';
import { type NxdsAppearanceMode, readStoredNxdsAppearance } from '@nxds/core';
import { useEffect } from 'react';

import { useNxdsAppearance } from '@/components/nxds/components/appearance/provider';

import { APPEARANCE_STORAGE_KEY, defaultAppearance } from './appearance-state';
import { theme } from './theme';

function toMantineColorScheme(mode: NxdsAppearanceMode) {
  return mode === 'system' ? 'auto' : mode;
}

const nxdsColorSchemeManager: MantineColorSchemeManager = {
  get: () =>
    toMantineColorScheme(
      readStoredNxdsAppearance(APPEARANCE_STORAGE_KEY, defaultAppearance).mode
    ),
  set() {},
  subscribe() {},
  unsubscribe() {},
  clear() {},
};

function MantineFollowsNxds() {
  const { state, mounted } = useNxdsAppearance();
  const { setColorScheme } = useMantineColorScheme();

  useEffect(() => {
    if (mounted) setColorScheme(toMantineColorScheme(state.mode));
  }, [mounted, state.mode, setColorScheme]);

  return null;
}

export function AppMantineProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <MantineProvider theme={theme} colorSchemeManager={nxdsColorSchemeManager}>
      <MantineFollowsNxds />
      {children}
    </MantineProvider>
  );
}

// app/layout.tsx
import { mantineHtmlProps } from '@mantine/core';

import { NxdsAppearanceProvider } from '@/components/nxds/components/appearance/provider';
import { NxdsAppearanceScript } from '@/components/nxds/components/appearance/provider/server';

import { APPEARANCE_STORAGE_KEY, defaultAppearance } from './appearance-state';
import { AppMantineProvider } from './mantine-provider';

import './globals.css';
import './nxds.css';

const MANTINE_THEME_SCRIPT =
  "document.documentElement.dataset.mantineColorScheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" {...mantineHtmlProps}>
      <head>
        <NxdsAppearanceScript
          storageKey={APPEARANCE_STORAGE_KEY}
          defaultState={defaultAppearance}
        />
        <script dangerouslySetInnerHTML={{ __html: MANTINE_THEME_SCRIPT }} />
      </head>
      <body>
        <NxdsAppearanceProvider
          storageKey={APPEARANCE_STORAGE_KEY}
          defaultState={defaultAppearance}
        >
          <AppMantineProvider>{children}</AppMantineProvider>
        </NxdsAppearanceProvider>
      </body>
    </html>
  );
}

// app/mode-toggle.tsx
'use client';

import { Button } from '@mantine/core';

import { useNxdsAppearance } from '@/components/nxds/components/appearance/provider';

export function ModeToggle() {
  const { setState, resolvedMode } = useNxdsAppearance();
  const next = resolvedMode === 'dark' ? 'light' : 'dark';

  return (
    <Button
      variant="default"
      onClick={() => setState((current) => ({ ...current, mode: next }))}
    >
      Switch to {next}
    </Button>
  );
}

// app/appearance-state.ts
import { DEFAULT_NXDS_APPEARANCE, type NxdsAppearanceState } from '@nxds/core';

export const APPEARANCE_STORAGE_KEY = 'app-appearance';

export const defaultAppearance = {
  ...DEFAULT_NXDS_APPEARANCE,
  brandColor: '#228be6',
  surfaceTone: 'gray',
  corners: 'smooth',
} satisfies NxdsAppearanceState;

// Before
import { TextInput } from '@mantine/core';

<TextInput
  label="Email"
  type="email"
  description="We never share it."
  error={error}
/>;

// After
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from '@/components/nxds/components/field/field';
import { Input } from '@/components/nxds/components/input/input';

<Field data-invalid={Boolean(error)}>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid={Boolean(error)} />
  <FieldDescription>We never share it.</FieldDescription>
  <FieldError>{error}</FieldError>
</Field>;