@kbach/native 0.2.4 → 0.2.6

package/dist/index.d.mts

@@ -1,4 +1,20 @@
+import { ThemeProviderProps } from '@kbach/react';
 export * from '@kbach/react';
+import React from 'react';
+
+/**
+ * Native-aware ThemeProvider. Wraps the base ThemeProvider and automatically
+ * passes the system color scheme from React Native's useColorScheme() hook.
+ *
+ * This fixes Android startup dark mode detection: Appearance.getColorScheme()
+ * can cache null if the device was already dark at launch (the appearanceChanged
+ * event only fires on *changes*). useColorScheme() called here with a proper
+ * hook name ensures the React Compiler and all linters handle it correctly, and
+ * useSyncExternalStore inside the hook properly subscribes to Appearance events.
+ *
+ * Exported as `ThemeProvider` from @kbach/native — no API change for users.
+ */
+declare function NativeThemeProvider(props: ThemeProviderProps): React.JSX.Element;
 
 /**
  * Metro and Babel setup helpers for React Native / Expo projects.
@@ -73,4 +89,4 @@ declare function withKbachBabel(babelConfig: Record<string, any>, options?: Kbac
  */
 declare function createKbachConfig(options?: KbachOptions): Record<string, unknown>;
 
-export { type KbachOptions, createKbachConfig, withKbach, withKbachBabel };
+export { type KbachOptions, NativeThemeProvider as ThemeProvider, createKbachConfig, withKbach, withKbachBabel };

package/dist/index.d.ts

@@ -1,4 +1,20 @@
+import { ThemeProviderProps } from '@kbach/react';
 export * from '@kbach/react';
+import React from 'react';
+
+/**
+ * Native-aware ThemeProvider. Wraps the base ThemeProvider and automatically
+ * passes the system color scheme from React Native's useColorScheme() hook.
+ *
+ * This fixes Android startup dark mode detection: Appearance.getColorScheme()
+ * can cache null if the device was already dark at launch (the appearanceChanged
+ * event only fires on *changes*). useColorScheme() called here with a proper
+ * hook name ensures the React Compiler and all linters handle it correctly, and
+ * useSyncExternalStore inside the hook properly subscribes to Appearance events.
+ *
+ * Exported as `ThemeProvider` from @kbach/native — no API change for users.
+ */
+declare function NativeThemeProvider(props: ThemeProviderProps): React.JSX.Element;
 
 /**
  * Metro and Babel setup helpers for React Native / Expo projects.
@@ -73,4 +89,4 @@ declare function withKbachBabel(babelConfig: Record<string, any>, options?: Kbac
  */
 declare function createKbachConfig(options?: KbachOptions): Record<string, unknown>;
 
-export { type KbachOptions, createKbachConfig, withKbach, withKbachBabel };
+export { type KbachOptions, NativeThemeProvider as ThemeProvider, createKbachConfig, withKbach, withKbachBabel };

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ThemeProvider: () => NativeThemeProvider,
   createKbachConfig: () => createKbachConfig,
   withKbach: () => withKbach,
   withKbachBabel: () => withKbachBabel
@@ -28,6 +29,22 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("@kbach/react"), module.exports);
 
+// src/NativeThemeProvider.tsx
+var import_react_native = require("react-native");
+var import_react = require("@kbach/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function NativeThemeProvider(props) {
+  const raw = (0, import_react_native.useColorScheme)();
+  const systemColorScheme = raw === "dark" ? "dark" : raw === "light" ? "light" : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.ThemeProvider,
+    {
+      ...props,
+      colorScheme: props.colorScheme ?? systemColorScheme
+    }
+  );
+}
+
 // src/setup.ts
 function withKbach(metroConfig, _options = {}) {
   return metroConfig;
@@ -64,6 +81,7 @@ function createKbachConfig(options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ThemeProvider,
   createKbachConfig,
   withKbach,
   withKbachBabel,

package/dist/index.mjs

@@ -1,6 +1,22 @@
 // src/index.ts
 export * from "@kbach/react";
 
+// src/NativeThemeProvider.tsx
+import { useColorScheme } from "react-native";
+import { ThemeProvider } from "@kbach/react";
+import { jsx } from "react/jsx-runtime";
+function NativeThemeProvider(props) {
+  const raw = useColorScheme();
+  const systemColorScheme = raw === "dark" ? "dark" : raw === "light" ? "light" : null;
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      ...props,
+      colorScheme: props.colorScheme ?? systemColorScheme
+    }
+  );
+}
+
 // src/setup.ts
 function withKbach(metroConfig, _options = {}) {
   return metroConfig;
@@ -36,6 +52,7 @@ function createKbachConfig(options = {}) {
   };
 }
 export {
+  NativeThemeProvider as ThemeProvider,
   createKbachConfig,
   withKbach,
   withKbachBabel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/native",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Single-package Kbach install for React Native and Expo — includes core, components, Babel plugin, and Metro config",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -35,7 +35,7 @@
     "lint": "tsc --noEmit"
   },
   "dependencies": {
-    "@kbach/react": "0.2.4"
+    "@kbach/react": "0.2.6"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",