fix: remove emotion from nextjs

Author: lisalupi

packages/nextjs/package.json

@@ -50,19 +50,16 @@
       "default": "./dist/index.js"
     }
   },
+  "dependencies": {
+    "@ultraviolet/themes": "workspace:*"
+  },
   "peerDependencies": {
-    "@emotion/cache": "11.14.0",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.x",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x"
   },
   "devDependencies": {
-    "@emotion/cache": "11.14.0",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.5.6",
     "react": "19.2.0",

packages/nextjs/src/ThemeRegistry.tsx

@@ -1,10 +1,7 @@
 'use client'
 
-import createCache from '@emotion/cache'
-import { CacheProvider, ThemeProvider } from '@emotion/react'
-import { useServerInsertedHTML } from 'next/navigation'
+import { ThemeProvider } from '@ultraviolet/themes'
 import type { ComponentProps, ReactNode } from 'react'
-import { useState } from 'react'
 
 type ThemeRegistryProps = {
   children: ReactNode
@@ -15,54 +12,6 @@ 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 const ThemeRegistry = ({ children, theme }: ThemeRegistryProps) => {
-  const [{ cache, flush }] = useState(() => {
-    const localCache = createCache({ key: 'uv' })
-    localCache.compat = true
-    const prevInsert = localCache.insert
-    let inserted: string[] = []
-    localCache.insert = (...args) => {
-      const serialized = args[1]
-      if (localCache.inserted[serialized.name] === undefined) {
-        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 (
-      <style
-        dangerouslySetInnerHTML={{
-          __html: styles,
-        }}
-        data-emotion={`${cache.key} ${names.join(' ')}`}
-        key={cache.key}
-      />
-    )
-  })
-
-  return (
-    <CacheProvider value={cache}>
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
-    </CacheProvider>
-  )
-}
+export const ThemeRegistry = ({ children, theme }: ThemeRegistryProps) => (
+  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+)