Add initTheme, Fix typing issue of ThemeScript

.changeset/great-horses-shout.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add initTheme, Fix typing issue of ThemeScript

apps/landing/package.json

@@ -15,11 +15,11 @@
     "@devup-ui/react": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.2.3",
+    "@next/mdx": "^15.2.4",
     "@types/mdx": "^2.0.13",
     "next": "^15.2.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "sanitize.css": "^13.0.0"
   },

apps/next/package.json

@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "next": "^15.2.4",
     "@devup-ui/react": "workspace:*"
   },

apps/vite-lib/package.json

@@ -12,9 +12,9 @@
     "lint": "tsc && eslint"
   },
   "dependencies": {
-    "react": "^19.0.0",
+    "react": "^19.1.0",
     "@devup-ui/react": "workspace:*",
-    "vite": "^6.2.2"
+    "vite": "^6.2.5"
   },
   "devDependencies": {
     "vite-plugin-dts": "^4.5.3",

apps/vite/package.json

@@ -10,14 +10,14 @@
     "lint": "tsc && eslint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "@devup-ui/react": "workspace:*",
     "vite-lib-example": "workspace:*"
   },
   "devDependencies": {
     "@devup-ui/vite-plugin": "workspace:*",
-    "vite": "^6.2.2",
+    "vite": "^6.2.5",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5",
     "@types/node": "^22",

benchmark/next-chakra-ui/package.json

@@ -10,12 +10,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.13.0",
+    "@chakra-ui/react": "^3.15.0",
     "@emotion/react": "^11.14.0",
     "next": "^15.2.4",
     "next-themes": "^0.4.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {

benchmark/next-devup-ui/package.json

@@ -10,8 +10,8 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "next": "^15.2.4",
     "@devup-ui/react": "workspace:*"
   },

benchmark/next-kuma-ui/package.json

@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "next": "^15.2.4",
     "@kuma-ui/core": "^1.5.9"
   },

bindings/devup-ui-wasm/Cargo.toml

@@ -21,7 +21,7 @@ css = { path = "../../libs/css" }
 # all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
 # code size when deploying.
 console_error_panic_hook = { version = "0.1.7", optional = true }
-once_cell = "1.21.1"
+once_cell = "1.21.3"
 js-sys = "0.3.77"
 serde_json = "1.0.140"
 serde-wasm-bindgen = "0.6.5"

libs/css/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-once_cell = "1.21.1"
+once_cell = "1.21.3"
 serial_test = "3.2.0"
 serde = { version = "1.0.219", features = ["derive"] }
 regex = "1.11.1"

libs/extractor/Cargo.toml

@@ -11,7 +11,7 @@ oxc_allocator = "0.52.0"
 oxc_ast = "0.52.0"
 oxc_codegen = "0.52.0"
 css = { path = "../css" }
-once_cell = "1.21.1"
+once_cell = "1.21.3"
 
 [dev-dependencies]
 insta = "1.42.2"

libs/sheet/Cargo.toml

@@ -7,7 +7,7 @@ edition = "2024"
 css = { path = "../css" }
 serde = { version = "1.0.219", features = ["derive"] }
 regex = "1.11.1"
-once_cell = "1.21.1"
+once_cell = "1.21.3"
 
 [dev-dependencies]
 insta = "1.42.2"

package.json

@@ -12,17 +12,17 @@
     "benchmark": "node benchmark.js"
   },
   "devDependencies": {
-    "eslint-plugin-devup": "^2.0.3",
-    "eslint": "^9.22.0",
-    "vitest": "^3.0.9",
-    "@vitest/coverage-v8": "^3.0.9",
+    "eslint-plugin-devup": "^2.0.5",
+    "eslint": "^9.23.0",
+    "vitest": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
     "@changesets/cli": "^2.28.1",
-    "@types/node": "^22.13.10",
+    "@types/node": "^22.14.0",
     "happy-dom": "^17.4.4",
-    "@testing-library/react": "^16.2.0"
+    "@testing-library/react": "^16.3.0"
   },
   "author": "devfive",
-  "packageManager": "pnpm@10.6.5",
+  "packageManager": "pnpm@10.7.1",
   "resolutions": {
     "vite": "^6"
   }

packages/next-plugin/package.json

@@ -27,9 +27,9 @@
     "next": "^15.2"
   },
   "devDependencies": {
-    "vite": "^6.2.2",
+    "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.9",
+    "vitest": "^3.1.1",
     "typescript": "^5.8.2"
   },
   "peerDependencies": {

packages/react/package.json

@@ -23,14 +23,14 @@
   ],
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "react": "^19.0",
+    "react": "^19.1",
     "csstype": "^3.1"
   },
   "devDependencies": {
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "vite": "^6.2.2",
+    "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.9",
+    "vitest": "^3.1.1",
     "typescript": "^5.8.2",
     "@types/react": "^19"
   },

packages/react/src/__tests__/index.test.ts

@@ -18,6 +18,7 @@ describe('export', () => {
 
       getTheme: expect.any(Function),
       setTheme: expect.any(Function),
+      initTheme: expect.any(Function),
 
       useTheme: expect.any(Function),
     })

packages/react/src/components/ThemeScript.tsx

@@ -1,8 +1,10 @@
+import type { Conditional } from 'src/types/utils'
+
 import type { DevupTheme } from '../types/theme'
 
 interface ThemeScriptProps {
   auto?: boolean
-  theme?: keyof DevupTheme
+  theme?: Conditional<DevupTheme>
 }
 
 export function ThemeScript({ auto = true, theme }: ThemeScriptProps) {
@@ -11,7 +13,7 @@ export function ThemeScript({ auto = true, theme }: ThemeScriptProps) {
       dangerouslySetInnerHTML={{
         __html: theme
           ? `(function (){document.documentElement.setAttribute('data-theme',${theme});}())`
-          : `(function (){const o=localStorage.getItem('__DF_THEME_SELECTED__')||(${String(auto)}&&window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'${process.env.DEVUP_UI_DEFAULT_THEME ?? 'default'}');document.documentElement.setAttribute('data-theme',o);})()`,
+          : `(function (){document.documentElement.setAttribute('data-theme',localStorage.getItem('__DF_THEME_SELECTED__')||(${String(auto)}&&window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'${process.env.DEVUP_UI_DEFAULT_THEME ?? 'default'}'));})()`,
       }}
     />
   )

packages/react/src/components/__tests__/__snapshots__/ThemeScript.browser.test.tsx.snap

@@ -3,15 +3,15 @@
 exports[`ThemeScript > should apply ThemeScript 1`] = `
 <div>
   <script>
-    (function (){const o=localStorage.getItem('__DF_THEME_SELECTED__')||(true&&window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'default');document.documentElement.setAttribute('data-theme',o);})()
+    (function (){document.documentElement.setAttribute('data-theme',localStorage.getItem('__DF_THEME_SELECTED__')||(true&&window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'default'));})()
   </script>
 </div>
 `;
 
 exports[`ThemeScript > should apply ThemeScript with not auto 1`] = `
 <div>
   <script>
-    (function (){const o=localStorage.getItem('__DF_THEME_SELECTED__')||(false&&window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'default');document.documentElement.setAttribute('data-theme',o);})()
+    (function (){document.documentElement.setAttribute('data-theme',localStorage.getItem('__DF_THEME_SELECTED__')||(false&&window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'default'));})()
   </script>
 </div>
 `;

packages/react/src/index.ts

@@ -14,4 +14,5 @@ export type { DevupTheme, DevupThemeColors } from './types/theme'
 export type { DevupThemeTypography } from './types/typography'
 export { css } from './utils/css'
 export { getTheme } from './utils/get-theme'
+export { initTheme } from './utils/init-theme'
 export { setTheme } from './utils/set-theme'

packages/react/src/types/props/text.ts

@@ -2,6 +2,7 @@ import type { Property } from 'csstype'
 
 import type { ResponsiveValue } from '../responsive-value'
 import type { DevupThemeTypography } from '../typography'
+import type { Conditional } from '../utils'
 
 export interface DevupUiTextProps {
   hangingPunctuation?: ResponsiveValue<Property.HangingPunctuation>
@@ -42,8 +43,7 @@ export interface DevupUiTextProps {
 
   lineClamp?: ResponsiveValue<Property.LineClamp>
 
-  typography?: TypographyKey<DevupThemeTypography>
+  typography?: Conditional<DevupThemeTypography>
 }
 
 // for skip type checking without .df
-type TypographyKey<T> = keyof T extends undefined ? string : keyof T

packages/react/src/types/utils.ts

@@ -1 +1,3 @@
 export type Merge<T, U> = Omit<T, Extract<keyof T, keyof U>> & U
+
+export type Conditional<T> = keyof T extends undefined ? string : keyof T

packages/react/src/utils/__tests__/init-theme.browser.test.ts

@@ -0,0 +1,21 @@
+import { initTheme } from '../init-theme'
+
+describe('initTheme', () => {
+  it('should initialize the theme', () => {
+    initTheme()
+    expect(document.documentElement.getAttribute('data-theme')).toBe('default')
+  })
+  it('should initialize the theme with the given theme', () => {
+    initTheme(false, 'light')
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light')
+  })
+
+  it('should initialize the theme with the default theme', () => {
+    vi.spyOn(window, 'matchMedia').mockReturnValue({
+      matches: true,
+    } as MediaQueryList)
+
+    initTheme(true)
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
+  })
+})

packages/react/src/utils/init-theme.ts

@@ -0,0 +1,28 @@
+'use client'
+
+import type { Conditional } from 'src/types/utils'
+
+import { DevupTheme } from '../types/theme'
+
+/**
+ * Initialize the theme, if you can't use the `ThemeScript` component
+ * e.g. in vite
+ * @param auto - Whether to use the system theme
+ * @param theme - The theme to use
+ */
+export function initTheme(
+  auto?: boolean,
+  theme?: Conditional<DevupTheme>,
+): void {
+  if (theme) {
+    document.documentElement.setAttribute('data-theme', theme)
+  } else {
+    document.documentElement.setAttribute(
+      'data-theme',
+      localStorage.getItem('__DF_THEME_SELECTED__') ||
+        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches
+          ? 'dark'
+          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),
+    )
+  }
+}

packages/webpack-plugin/package.json

@@ -38,10 +38,10 @@
     "@devup-ui/wasm": "*"
   },
   "devDependencies": {
-    "vite": "^6.2.2",
+    "vite": "^6.2.5",
     "@types/webpack": "^5.28.5",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.9",
+    "vitest": "^3.1.1",
     "typescript": "^5.8.2"
   }
 }