@ultraviolet/nextjs 3.0.0-beta.9 → 3.0.1

package/README.md

@@ -7,7 +7,7 @@ Ultraviolet JS is a utility package to make Ultraviolet UI work with NextJS. Thi
 ### Get Started
 
 ```sh
-pnpm add @ultraviolet/nextjs @ultraviolet/ui @ultraviolet/themes @emotion/react @emotion/styled @emotion/cache
+pnpm add @ultraviolet/nextjs
 ```
 
 In you NextJS project you can implement the following:
@@ -18,6 +18,8 @@ import { consoleLightTheme } from '@ultraviolet/themes'
 import { ThemeRegistry } from '@ultraviolet/nextjs'
 import { Button } from '@ultraviolet/ui'
 import { ReactNode } from 'react'
+import '@ultraviolet/ui/styles'
+import '@ultraviolet/themes/global' // For normalisation, not necessary
 
 export default function RootLayout({
   children,
@@ -52,23 +54,6 @@ pnpm add @ultraviolet/fonts
   import '@ultraviolet/fonts/fonts.css'
   ```
 
-- **Styled Components**: in order to customize an emotion component, you need to import the `styled` function from `@emotion/styled` and use it to create your styled components. Emotion is not yet compatible with server components, so you need to use the `styled` function in a client component. Example:
-
-  ```tsx
-  "use client"
-  
-  import { styled } from '@emotion/styled'
-  
-  const Button = styled.button`
-    background-color: #0070f3;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  `
-  ```
-
 ## Documentation
 
 Checkout our [documentation website](https://storybook.ultraviolet.scaleway.com/).

package/dist/ThemeRegistry.d.ts

@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider } from '@ultraviolet/themes';
 import type { ComponentProps, ReactNode } from 'react';
 type ThemeRegistryProps = {
     children: ReactNode;
@@ -8,5 +8,5 @@ type ThemeRegistryProps = {
  * ThemeRegistry is a component that provides a theme to its children.
  * This solution is provided to work with Next.js app router.
  */
-export declare const ThemeRegistry: ({ children, theme }: ThemeRegistryProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ThemeRegistry: ({ children, theme }: ThemeRegistryProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ThemeRegistry.js

@@ -1,55 +1,7 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import createCache from "@emotion/cache";
-import { CacheProvider, ThemeProvider } from "@emotion/react";
-import { useServerInsertedHTML } from "next/navigation";
-import { useState } from "react";
-const ThemeRegistry = ({
-  children,
-  theme
-}) => {
-  const [{
-    cache,
-    flush
-  }] = useState(() => {
-    const localCache = createCache({
-      key: "uv"
-    });
-    localCache.compat = true;
-    const prevInsert = localCache.insert;
-    let inserted = [];
-    localCache.insert = (...args) => {
-      const serialized = args[1];
-      if (localCache.inserted[serialized.name] === void 0) {
-        inserted.push(serialized.name);
-      }
-      return prevInsert(...args);
-    };
-    const localFlush = () => {
-      const prevInserted = inserted;
-      inserted = [];
-      return prevInserted;
-    };
-    return {
-      cache: localCache,
-      flush: localFlush
-    };
-  });
-  useServerInsertedHTML(() => {
-    const names = flush();
-    if (names.length === 0) {
-      return null;
-    }
-    let styles = "";
-    for (const name of names) {
-      styles += cache.inserted[name];
-    }
-    return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: {
-      __html: styles
-    }, "data-emotion": `${cache.key} ${names.join(" ")}` }, cache.key);
-  });
-  return /* @__PURE__ */ jsx(CacheProvider, { value: cache, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children }) });
-};
+import { jsx } from "react/jsx-runtime";
+import { ThemeProvider } from "@ultraviolet/themes";
+const ThemeRegistry = ({ children, theme }) => /* @__PURE__ */ jsx(ThemeProvider, { theme, children });
 export {
   ThemeRegistry
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/nextjs",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.1",
   "description": "Ultraviolet NextJS utility package",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -42,22 +42,18 @@
     }
   },
   "peerDependencies": {
-    "@emotion/cache": "11.14.0",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
-    "next": "15.x",
+    "next": "15.x || 16.x",
     "react": "18.x || 19.x",
-    "react-dom": "18.x || 19.x",
-    "@ultraviolet/ui": "3.0.0-beta.20"
+    "react-dom": "18.x || 19.x"
   },
   "devDependencies": {
-    "@emotion/cache": "11.14.0",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
-    "next": "15.5.3",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "@ultraviolet/ui": "3.0.0-beta.20"
+    "next": "16.0.7",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "dependencies": {
+    "@ultraviolet/themes": "3.0.0",
+    "@ultraviolet/ui": "3.1.0"
   },
   "scripts": {
     "type:generate": "tsc --declaration -p tsconfig.build.json",

package/dist/ThemeRegistry.cjs

@@ -1,57 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const createCache = require("@emotion/cache");
-const react$1 = require("@emotion/react");
-const navigation = require("next/navigation");
-const react = require("react");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const createCache__default = /* @__PURE__ */ _interopDefaultCompat(createCache);
-const ThemeRegistry = ({
-  children,
-  theme
-}) => {
-  const [{
-    cache,
-    flush
-  }] = react.useState(() => {
-    const localCache = createCache__default.default({
-      key: "uv"
-    });
-    localCache.compat = true;
-    const prevInsert = localCache.insert;
-    let inserted = [];
-    localCache.insert = (...args) => {
-      const serialized = args[1];
-      if (localCache.inserted[serialized.name] === void 0) {
-        inserted.push(serialized.name);
-      }
-      return prevInsert(...args);
-    };
-    const localFlush = () => {
-      const prevInserted = inserted;
-      inserted = [];
-      return prevInserted;
-    };
-    return {
-      cache: localCache,
-      flush: localFlush
-    };
-  });
-  navigation.useServerInsertedHTML(() => {
-    const names = flush();
-    if (names.length === 0) {
-      return null;
-    }
-    let styles = "";
-    for (const name of names) {
-      styles += cache.inserted[name];
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: {
-      __html: styles
-    }, "data-emotion": `${cache.key} ${names.join(" ")}` }, cache.key);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.CacheProvider, { value: cache, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.ThemeProvider, { theme, children }) });
-};
-exports.ThemeRegistry = ThemeRegistry;

package/dist/index.cjs

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const ThemeRegistry = require("./ThemeRegistry.cjs");
-exports.ThemeRegistry = ThemeRegistry.ThemeRegistry;