@kbach/react 0.2.3 → 0.2.5

package/dist/index.d.mts

@@ -142,14 +142,28 @@ declare function useTheme(): ThemeContextValue;
 
 interface ThemeProviderProps {
     children: ReactNode;
-    /** Default mode on first render. Falls back to persisted value, then 'system'. */
+    /** Initial mode. Falls back to persisted value, then 'system'. */
     defaultMode?: ThemeMode;
+    /**
+     * System color scheme for native `defaultMode="system"`.
+     *
+     * Pass the value of `useColorScheme()` from `react-native`. When importing
+     * `ThemeProvider` from `@kbach/native` this is handled automatically.
+     *
+     * @example
+     * ```tsx
+     * import { useColorScheme } from 'react-native';
+     * const colorScheme = useColorScheme();
+     * <ThemeProvider defaultMode="system" colorScheme={colorScheme}>…</ThemeProvider>
+     * ```
+     */
+    colorScheme?: 'light' | 'dark' | null;
     /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
     config?: FrameworkConfig;
-    /** Disable persistence to localStorage / AsyncStorage */
+    /** Disable persistence to localStorage */
     disablePersistence?: boolean;
 }
-declare function ThemeProvider({ children, defaultMode, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
+declare function ThemeProvider({ children, defaultMode, colorScheme, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
 type ToggleVariant = 'button' | 'switch' | 'icon-button';
 interface ThemeToggleProps {

package/dist/index.d.ts

@@ -142,14 +142,28 @@ declare function useTheme(): ThemeContextValue;
 
 interface ThemeProviderProps {
     children: ReactNode;
-    /** Default mode on first render. Falls back to persisted value, then 'system'. */
+    /** Initial mode. Falls back to persisted value, then 'system'. */
     defaultMode?: ThemeMode;
+    /**
+     * System color scheme for native `defaultMode="system"`.
+     *
+     * Pass the value of `useColorScheme()` from `react-native`. When importing
+     * `ThemeProvider` from `@kbach/native` this is handled automatically.
+     *
+     * @example
+     * ```tsx
+     * import { useColorScheme } from 'react-native';
+     * const colorScheme = useColorScheme();
+     * <ThemeProvider defaultMode="system" colorScheme={colorScheme}>…</ThemeProvider>
+     * ```
+     */
+    colorScheme?: 'light' | 'dark' | null;
     /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
     config?: FrameworkConfig;
-    /** Disable persistence to localStorage / AsyncStorage */
+    /** Disable persistence to localStorage */
     disablePersistence?: boolean;
 }
-declare function ThemeProvider({ children, defaultMode, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
+declare function ThemeProvider({ children, defaultMode, colorScheme, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
 type ToggleVariant = 'button' | 'switch' | 'icon-button';
 interface ThemeToggleProps {

package/dist/index.js

@@ -2065,11 +2065,6 @@ function subscribeGlobalDarkMode(callback) {
 
 // src/ThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var _useColorScheme;
-try {
-  ({ useColorScheme: _useColorScheme } = require("react-native"));
-} catch {
-}
 var STORAGE_KEY = "kbach-theme";
 function loadPersistedMode() {
   try {
@@ -2098,20 +2093,20 @@ function applyWebTheme(resolvedMode, strategy) {
 function ThemeProvider({
   children,
   defaultMode = "system",
+  colorScheme,
   config: configOverride,
   disablePersistence = false
 }) {
   const [resolvedConfig, setResolvedConfig] = (0, import_react2.useState)(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const nativeScheme = _useColorScheme?.();
   const [webScheme, setWebScheme] = (0, import_react2.useState)(() => {
     if (isWeb && typeof window !== "undefined") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     return "light";
   });
-  const systemScheme = isWeb ? webScheme : nativeScheme === "dark" ? "dark" : "light";
+  const systemScheme = isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
   const [mode, _setMode] = (0, import_react2.useState)(() => {
     if (!disablePersistence) {
       const persisted = loadPersistedMode();

package/dist/index.mjs

@@ -39,11 +39,6 @@ import {
   useState
 } from "react";
 import { jsx } from "react/jsx-runtime";
-var _useColorScheme;
-try {
-  ({ useColorScheme: _useColorScheme } = __require("react-native"));
-} catch {
-}
 var STORAGE_KEY = "kbach-theme";
 function loadPersistedMode() {
   try {
@@ -72,20 +67,20 @@ function applyWebTheme(resolvedMode, strategy) {
 function ThemeProvider({
   children,
   defaultMode = "system",
+  colorScheme,
   config: configOverride,
   disablePersistence = false
 }) {
   const [resolvedConfig, setResolvedConfig] = useState(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const nativeScheme = _useColorScheme?.();
   const [webScheme, setWebScheme] = useState(() => {
     if (isWeb && typeof window !== "undefined") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     return "light";
   });
-  const systemScheme = isWeb ? webScheme : nativeScheme === "dark" ? "dark" : "light";
+  const systemScheme = isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
   const [mode, _setMode] = useState(() => {
     if (!disablePersistence) {
       const persisted = loadPersistedMode();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",