@titan-design/react-ui 0.9.1 → 0.9.3

package/src/components/ui/surface/index.ts

@@ -1 +1,13 @@
 export { Surface, type SurfaceProps } from './Surface'
+export {
+  SurfaceContext,
+  useSurface,
+  useSurfaceMode,
+  useOnSurfaceColor,
+  onSurfaceColors,
+  surfaceBackground,
+  SURFACE_LEVEL_TOKEN,
+  type SurfaceLevel,
+  type OnSurfaceRole,
+  type SurfaceContextValue,
+} from './SurfaceContext'

package/src/test/nativewind-stub.ts

@@ -11,3 +11,16 @@
 export function vars(values: Record<string, string>): Record<string, string> {
   return values
 }
+
+/**
+ * Stand-in for nativewind's `useColorScheme()`. Under the web test env there is
+ * no nativewind theme applied, so it reports `undefined` (the "no explicit
+ * scheme" signal) — matching ThemeProvider's dark fallback for `mode="system"`.
+ */
+export function useColorScheme(): {
+  colorScheme: 'light' | 'dark' | undefined
+  setColorScheme: (scheme: 'light' | 'dark' | 'system') => void
+  toggleColorScheme: () => void
+} {
+  return { colorScheme: undefined, setColorScheme: () => {}, toggleColorScheme: () => {} }
+}

package/src/theme/ThemeProvider.test.tsx

@@ -2,6 +2,12 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { Text } from 'react-native'
 import { ThemeProvider } from './ThemeProvider'
+import { useSurfaceMode } from '../components/ui/surface'
+
+// Reports the surface mode ThemeProvider seeds into the on-surface context.
+function ModeProbe() {
+  return <Text>{useSurfaceMode()}</Text>
+}
 
 describe('ThemeProvider', () => {
   it('renders its children', () => {
@@ -21,4 +27,22 @@ describe('ThemeProvider', () => {
     )
     expect(screen.getByText('light')).toBeInTheDocument()
   })
+
+  it('seeds the on-surface context with an explicit mode', () => {
+    render(
+      <ThemeProvider mode="light">
+        <ModeProbe />
+      </ThemeProvider>,
+    )
+    expect(screen.getByText('light')).toBeInTheDocument()
+  })
+
+  it('falls back to dark for mode="system" when no scheme is applied', () => {
+    render(
+      <ThemeProvider mode="system">
+        <ModeProbe />
+      </ThemeProvider>,
+    )
+    expect(screen.getByText('dark')).toBeInTheDocument()
+  })
 })

package/src/theme/ThemeProvider.tsx

@@ -13,11 +13,16 @@
 //
 // The var maps are the SAME canonical `darkThemeCSSVars` / `lightThemeCSSVars`
 // that generate `global.css`, so native and web resolve to identical values.
-import { vars } from 'nativewind'
+//
+// It also seeds the on-surface colour context (`<Surface>`'s mode), so titan's
+// JS-resolved on-surface colours track the same theme as the className tokens.
+import { vars, useColorScheme } from 'nativewind'
 import { View, type ViewProps } from 'react-native'
+import { SurfaceContext } from '../components/ui/surface/SurfaceContext'
 import { darkThemeCSSVars, lightThemeCSSVars } from './config'
 
-export type ThemeProviderMode = 'dark' | 'light'
+/** `'system'` follows nativewind's `useColorScheme()` (mobile light/dark flip). */
+export type ThemeProviderMode = 'dark' | 'light' | 'system'
 
 // Precomputed once — `vars()` is pure, so the same style object is reused across
 // renders. Native == web because these are the maps `tokens-css` emits.
@@ -27,7 +32,11 @@ const MODE_VARS = {
 }
 
 export interface ThemeProviderProps extends ViewProps {
-  /** Theme mode to register. Mobile is dark-only today; defaults to `dark`. */
+  /**
+   * Theme mode to register. `'system'` bridges nativewind's `useColorScheme()`
+   * so mobile follows the OS light/dark flip; `'dark'`/`'light'` pin it. Mobile
+   * is dark-only today, so this defaults to `dark`.
+   */
   mode?: ThemeProviderMode
 }
 
@@ -42,9 +51,17 @@ export function ThemeProvider({
   children,
   ...props
 }: ThemeProviderProps): React.JSX.Element {
+  // `'system'` → follow nativewind's applied scheme, falling back to dark when
+  // no scheme is set. `useColorScheme` runs unconditionally (rules of hooks);
+  // its result is only used in the `'system'` branch.
+  const { colorScheme } = useColorScheme()
+  const resolved = mode === 'system' ? (colorScheme ?? 'dark') : mode
+
   return (
-    <View style={[MODE_VARS[mode], { flex: 1 }, style]} {...props}>
-      {children}
-    </View>
+    <SurfaceContext.Provider value={{ mode: resolved, level: 'base' }}>
+      <View style={[MODE_VARS[resolved], { flex: 1 }, style]} {...props}>
+        {children}
+      </View>
+    </SurfaceContext.Provider>
   )
 }