@dax-ui/nextjs 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @dax-ui/nextjs
+
+## 0.1.0
+
+### Minor Changes
+
+- First public release: design tokens, theme and UIProvider, Button, TextField, the
+  @dax-ui/react bundle, and @dax-ui/nextjs for Next.js App Router.
+
+### Patch Changes
+
+- Updated dependencies
+  - @dax-ui/theme@0.1.0

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2026 Digital Auxilius. All rights reserved.
+
+This software and its source code are proprietary. They are made publicly available
+for viewing and installation only. No license is granted to use, copy, modify, merge,
+publish, distribute, sublicense or sell copies of this software, in whole or in part,
+except under a separate written agreement with Digital Auxilius.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF OR
+IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,112 @@
-# Temporary Holding Version
+# @dax-ui/nextjs
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+dax-ui setup for **Next.js App Router** (Next 13 to 16). Next.js apps use this package's
+`UIProvider` instead of the one in `@dax-ui/theme`. On top of the theme, it:
+
+- collects component styles into `<head>` during server rendering, instead of a separate
+  `<style>` tag beside every component;
+- applies the saved light/dark mode before the page paints, so it never flashes the
+  wrong mode.
+
+Everything MUI/Emotion needs for this is included; the app only needs Next.js and React.
+
+## Installation
+
+```bash
+pnpm add @dax-ui/nextjs
+```
+
+Then add the components you use, e.g. `pnpm add @dax-ui/button @dax-ui/text-field`.
+
+## Usage
+
+Render `UIProvider` once, directly inside `<body>` of the root layout:
+
+```tsx
+// app/layout.tsx
+import { UIProvider } from '@dax-ui/nextjs';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <UIProvider>{children}</UIProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+`suppressHydrationWarning` on `<html>` is required: the color-mode script sets a class on
+it before React loads.
+
+Components work in server and client components alike:
+
+```tsx
+// app/page.tsx (a server component)
+import { Button } from '@dax-ui/button';
+
+export default function Page() {
+  return <Button>Get started</Button>;
+}
+```
+
+### Custom theme
+
+A theme object can't be passed from a server component (it contains functions), so build
+it in a small client file:
+
+```tsx
+// app/providers.tsx
+'use client';
+import { UIProvider, createAppTheme } from '@dax-ui/nextjs';
+
+const appTheme = createAppTheme({ shape: { borderRadius: 12 } });
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <UIProvider theme={appTheme}>{children}</UIProvider>;
+}
+```
+
+and render `<Providers>` in `app/layout.tsx` instead of `<UIProvider>`.
+
+### With Tailwind CSS or plain CSS
+
+Set `enableCssLayer` so the app's own styles override MUI's without `!important`:
+
+```tsx
+<UIProvider enableCssLayer>{children}</UIProvider>
+```
+
+### Light/dark toggle (in a client component)
+
+```tsx
+'use client';
+import { useColorScheme } from '@dax-ui/nextjs';
+
+export function ModeToggle() {
+  const { mode, setMode } = useColorScheme();
+  return <button onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}>Toggle mode</button>;
+}
+```
+
+## Exports
+
+| Export | What it is |
+| --- | --- |
+| `UIProvider` | The Next.js App Router provider; props below |
+| `useColorScheme`, `createAppTheme`, `styled`, `useTheme`, `theme`, `themeOptions`, `Theme`, `ThemeOptions` | Re-exported from [`@dax-ui/theme`](https://www.npmjs.com/package/@dax-ui/theme), so Next.js apps don't need to install it separately |
+
+Pages Router isn't supported yet.
+
+## Props
+
+<!-- props:start UIProvider -->
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` *(required)* | `ReactNode` |  | The app. Every @dax-ui component must render inside the provider. |
+| `defaultMode` | `"light" \| "dark" \| "system"` | `system` | Color mode on first visit. `system` follows the OS setting. After that, the user's choice made through `useColorScheme().setMode()` is remembered. |
+| `disableCssBaseline` | `boolean` | `false` | Skips MUI's CSS reset (`CssBaseline`), for apps that already ship their own. |
+| `enableCssLayer` | `boolean` | `false` | Wraps MUI's generated styles in `@layer mui`, so the app's own CSS or Tailwind utilities override them without `!important`. |
+| `theme` | `Theme` | `theme` | Replaces the default theme, e.g. `createAppTheme({ ...overrides })`. |
+<!-- props:end -->

package/lib/index.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { UIProviderProps as UIProviderProps$1 } from '@dax-ui/theme';
+export { Theme, ThemeOptions, createAppTheme, styled, theme, themeOptions, useColorScheme, useTheme } from '@dax-ui/theme';
+
+interface UIProviderProps extends UIProviderProps$1 {
+    /**
+     * Wraps MUI's generated styles in `@layer mui`, so the app's own CSS or Tailwind
+     * utilities override them without `!important`.
+     * @default false
+     */
+    enableCssLayer?: boolean;
+}
+/**
+ * `UIProvider` for Next.js App Router. Render it once in `app/layout.tsx`, directly
+ * inside `<body>`. On top of `@dax-ui/theme`'s `UIProvider`, it collects component styles
+ * into `<head>` during server rendering (instead of a `<style>` tag beside every
+ * component), and applies the saved color mode before the page paints.
+ */
+declare function UIProvider({ enableCssLayer, defaultMode, ...rest }: UIProviderProps): react.JSX.Element;
+
+export { UIProvider, type UIProviderProps };

package/lib/index.js

@@ -0,0 +1,28 @@
+"use client";
+
+// src/UIProvider.tsx
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v16-appRouter";
+import {
+  ColorSchemeScript,
+  UIProvider as BaseUIProvider
+} from "@dax-ui/theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function UIProvider({ enableCssLayer = false, defaultMode = "system", ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ColorSchemeScript, { defaultMode }),
+    /* @__PURE__ */ jsx(AppRouterCacheProvider, { options: { enableCssLayer }, children: /* @__PURE__ */ jsx(BaseUIProvider, { defaultMode, ...rest }) })
+  ] });
+}
+
+// src/index.ts
+import { createAppTheme, styled, theme, themeOptions, useColorScheme, useTheme } from "@dax-ui/theme";
+export {
+  UIProvider,
+  createAppTheme,
+  styled,
+  theme,
+  themeOptions,
+  useColorScheme,
+  useTheme
+};
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UIProvider.tsx","../src/index.ts"],"sourcesContent":["// The v14-v16 entry points of @mui/material-nextjs all re-export the v13 one, so\n// this single import supports every Next.js version in our peer range (13-16).\nimport { AppRouterCacheProvider } from '@mui/material-nextjs/v16-appRouter';\nimport {\n  ColorSchemeScript,\n  UIProvider as BaseUIProvider,\n  type UIProviderProps as BaseUIProviderProps,\n} from '@dax-ui/theme';\n\nexport interface UIProviderProps extends BaseUIProviderProps {\n  /**\n   * Wraps MUI's generated styles in `@layer mui`, so the app's own CSS or Tailwind\n   * utilities override them without `!important`.\n   * @default false\n   */\n  enableCssLayer?: boolean;\n}\n\n/**\n * `UIProvider` for Next.js App Router. Render it once in `app/layout.tsx`, directly\n * inside `<body>`. On top of `@dax-ui/theme`'s `UIProvider`, it collects component styles\n * into `<head>` during server rendering (instead of a `<style>` tag beside every\n * component), and applies the saved color mode before the page paints.\n */\nexport function UIProvider({ enableCssLayer = false, defaultMode = 'system', ...rest }: UIProviderProps) {\n  return (\n    <>\n      <ColorSchemeScript defaultMode={defaultMode} />\n      <AppRouterCacheProvider options={{ enableCssLayer }}>\n        <BaseUIProvider defaultMode={defaultMode} {...rest} />\n      </AppRouterCacheProvider>\n    </>\n  );\n}\n","export { UIProvider } from './UIProvider';\nexport type { UIProviderProps } from './UIProvider';\n// The rest of @dax-ui/theme, so Next.js apps need only this package plus components.\nexport { createAppTheme, styled, theme, themeOptions, useColorScheme, useTheme } from '@dax-ui/theme';\nexport type { Theme, ThemeOptions } from '@dax-ui/theme';\n"],"mappings":";;;AAEA,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA,cAAc;AAAA,OAET;AAmBH,mBACE,KADF;AAFG,SAAS,WAAW,EAAE,iBAAiB,OAAO,cAAc,UAAU,GAAG,KAAK,GAAoB;AACvG,SACE,iCACE;AAAA,wBAAC,qBAAkB,aAA0B;AAAA,IAC7C,oBAAC,0BAAuB,SAAS,EAAE,eAAe,GAChD,8BAAC,kBAAe,aAA2B,GAAG,MAAM,GACtD;AAAA,KACF;AAEJ;;;AC9BA,SAAS,gBAAgB,QAAQ,OAAO,cAAc,gBAAgB,gBAAgB;","names":[]}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@dax-ui/nextjs",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "dax-ui setup for Next.js App Router: UIProvider with server-rendered styles",
+  "keywords": [
+    "dax-ui",
+    "react",
+    "design-system",
+    "nextjs",
+    "app-router",
+    "mui",
+    "ssr"
+  ],
+  "author": "Digital Auxilius",
+  "homepage": "https://github.com/FaaizHussain26/DAX-UI/tree/main/packages/nextjs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FaaizHussain26/DAX-UI.git",
+    "directory": "packages/nextjs"
+  },
+  "bugs": {
+    "url": "https://github.com/FaaizHussain26/DAX-UI/issues"
+  },
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/server": "^11.11.0",
+    "@mui/material-nextjs": "^9.5.0",
+    "@dax-ui/theme": "^0.1.0"
+  },
+  "peerDependencies": {
+    "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "next": "^16.4.3",
+    "@dax-ui/builder": "^0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "builder"
+  }
 }