@kbach/react 0.2.4 → 0.2.6

package/dist/{chunk-IYY3U6L2.mjs → chunk-7YSVROUJ.mjs}

@@ -1043,6 +1043,25 @@ function resolveColor(value, colors, isArbitrary) {
       }
     }
   }
+  if (hex && !hex.startsWith("#") && !hex.startsWith("rgb") && hex !== "transparent" && hex !== "currentColor") {
+    if (hex in colors) {
+      const alias = colors[hex];
+      if (typeof alias === "string") hex = alias;
+      else if (typeof alias === "object" && "6" in alias) hex = alias["6"] ?? hex;
+    } else {
+      const aliasLastDash = hex.lastIndexOf("-");
+      if (aliasLastDash > 0) {
+        const aliasColorName = hex.slice(0, aliasLastDash);
+        const aliasShade = hex.slice(aliasLastDash + 1);
+        const aliasScale = colors[aliasColorName];
+        if (aliasScale && typeof aliasScale === "object") {
+          hex = aliasScale[aliasShade] ?? null;
+        } else if (typeof aliasScale === "string") {
+          hex = aliasScale;
+        }
+      }
+    }
+  }
   if (!hex) return null;
   if (!opacityPart) return hex;
   let alpha;

package/dist/{chunk-23GRUDYB.mjs → chunk-XW4LEBBB.mjs}

@@ -5,7 +5,7 @@ import {
   isWeb,
   resolve,
   useGlobalDarkMode
-} from "./chunk-IYY3U6L2.mjs";
+} from "./chunk-7YSVROUJ.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";

package/dist/index.d.mts

@@ -145,17 +145,16 @@ interface ThemeProviderProps {
     /** Initial mode. Falls back to persisted value, then 'system'. */
     defaultMode?: ThemeMode;
     /**
-     * Explicit color scheme override for native with `defaultMode="system"`.
+     * System color scheme for native `defaultMode="system"`.
      *
-     * On some Android devices the system scheme is not detected on startup
-     * (the `appearanceChanged` event only fires on *changes*, not on launch when
-     * the device was already dark). Pass `useColorScheme()` from `react-native`
-     * here to guarantee correct detection:
+     * 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 scheme = useColorScheme();
-     * <ThemeProvider defaultMode="system" colorScheme={scheme}>…</ThemeProvider>
+     * const colorScheme = useColorScheme();
+     * <ThemeProvider defaultMode="system" colorScheme={colorScheme}>…</ThemeProvider>
      * ```
      */
     colorScheme?: 'light' | 'dark' | null;
@@ -164,7 +163,7 @@ interface ThemeProviderProps {
     /** Disable persistence to localStorage */
     disablePersistence?: boolean;
 }
-declare function ThemeProvider({ children, defaultMode, colorScheme: colorSchemeProp, 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

@@ -145,17 +145,16 @@ interface ThemeProviderProps {
     /** Initial mode. Falls back to persisted value, then 'system'. */
     defaultMode?: ThemeMode;
     /**
-     * Explicit color scheme override for native with `defaultMode="system"`.
+     * System color scheme for native `defaultMode="system"`.
      *
-     * On some Android devices the system scheme is not detected on startup
-     * (the `appearanceChanged` event only fires on *changes*, not on launch when
-     * the device was already dark). Pass `useColorScheme()` from `react-native`
-     * here to guarantee correct detection:
+     * 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 scheme = useColorScheme();
-     * <ThemeProvider defaultMode="system" colorScheme={scheme}>…</ThemeProvider>
+     * const colorScheme = useColorScheme();
+     * <ThemeProvider defaultMode="system" colorScheme={colorScheme}>…</ThemeProvider>
      * ```
      */
     colorScheme?: 'light' | 'dark' | null;
@@ -164,7 +163,7 @@ interface ThemeProviderProps {
     /** Disable persistence to localStorage */
     disablePersistence?: boolean;
 }
-declare function ThemeProvider({ children, defaultMode, colorScheme: colorSchemeProp, 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

@@ -1143,6 +1143,25 @@ function resolveColor(value, colors, isArbitrary) {
       }
     }
   }
+  if (hex && !hex.startsWith("#") && !hex.startsWith("rgb") && hex !== "transparent" && hex !== "currentColor") {
+    if (hex in colors) {
+      const alias = colors[hex];
+      if (typeof alias === "string") hex = alias;
+      else if (typeof alias === "object" && "6" in alias) hex = alias["6"] ?? hex;
+    } else {
+      const aliasLastDash = hex.lastIndexOf("-");
+      if (aliasLastDash > 0) {
+        const aliasColorName = hex.slice(0, aliasLastDash);
+        const aliasShade = hex.slice(aliasLastDash + 1);
+        const aliasScale = colors[aliasColorName];
+        if (aliasScale && typeof aliasScale === "object") {
+          hex = aliasScale[aliasShade] ?? null;
+        } else if (typeof aliasScale === "string") {
+          hex = aliasScale;
+        }
+      }
+    }
+  }
   if (!hex) return null;
   if (!opacityPart) return hex;
   let alpha;
@@ -2065,11 +2084,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,23 +2112,20 @@ function applyWebTheme(resolvedMode, strategy) {
 function ThemeProvider({
   children,
   defaultMode = "system",
-  colorScheme: colorSchemeProp,
+  colorScheme,
   config: configOverride,
   disablePersistence = false
 }) {
   const [resolvedConfig, setResolvedConfig] = (0, import_react2.useState)(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const [nativeSchemeFallback, setNativeSchemeFallback] = (0, import_react2.useState)(null);
-  const hookScheme = _useColorScheme?.();
-  const nativeScheme = colorSchemeProp !== void 0 ? colorSchemeProp ?? null : hookScheme ?? nativeSchemeFallback;
   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();
@@ -2132,18 +2143,6 @@ function ThemeProvider({
   const resolvedMode = mode === "system" ? systemScheme : mode;
   const isDark = resolvedMode === "dark";
   syncGlobalDarkMode(isDark);
-  (0, import_react2.useEffect)(() => {
-    if (isWeb) return;
-    try {
-      const { TurboModuleRegistry } = require("react-native");
-      const native = TurboModuleRegistry?.get?.("Appearance");
-      const scheme = native?.getColorScheme?.();
-      if (scheme === "dark" || scheme === "light") {
-        setNativeSchemeFallback(scheme);
-      }
-    } catch {
-    }
-  }, []);
   (0, import_react2.useEffect)(() => {
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
     setGlobalDarkMode(isDark);

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
   syncGlobalDarkMode,
   updateConfig,
   useGlobalDarkMode
-} from "./chunk-IYY3U6L2.mjs";
+} from "./chunk-7YSVROUJ.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -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,23 +67,20 @@ function applyWebTheme(resolvedMode, strategy) {
 function ThemeProvider({
   children,
   defaultMode = "system",
-  colorScheme: colorSchemeProp,
+  colorScheme,
   config: configOverride,
   disablePersistence = false
 }) {
   const [resolvedConfig, setResolvedConfig] = useState(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const [nativeSchemeFallback, setNativeSchemeFallback] = useState(null);
-  const hookScheme = _useColorScheme?.();
-  const nativeScheme = colorSchemeProp !== void 0 ? colorSchemeProp ?? null : hookScheme ?? nativeSchemeFallback;
   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();
@@ -106,18 +98,6 @@ function ThemeProvider({
   const resolvedMode = mode === "system" ? systemScheme : mode;
   const isDark = resolvedMode === "dark";
   syncGlobalDarkMode(isDark);
-  useEffect(() => {
-    if (isWeb) return;
-    try {
-      const { TurboModuleRegistry } = __require("react-native");
-      const native = TurboModuleRegistry?.get?.("Appearance");
-      const scheme = native?.getColorScheme?.();
-      if (scheme === "dark" || scheme === "light") {
-        setNativeSchemeFallback(scheme);
-      }
-    } catch {
-    }
-  }, []);
   useEffect(() => {
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
     setGlobalDarkMode(isDark);

package/dist/jsx-dev-runtime.js

@@ -1112,6 +1112,25 @@ function resolveColor(value, colors, isArbitrary) {
       }
     }
   }
+  if (hex && !hex.startsWith("#") && !hex.startsWith("rgb") && hex !== "transparent" && hex !== "currentColor") {
+    if (hex in colors) {
+      const alias = colors[hex];
+      if (typeof alias === "string") hex = alias;
+      else if (typeof alias === "object" && "6" in alias) hex = alias["6"] ?? hex;
+    } else {
+      const aliasLastDash = hex.lastIndexOf("-");
+      if (aliasLastDash > 0) {
+        const aliasColorName = hex.slice(0, aliasLastDash);
+        const aliasShade = hex.slice(aliasLastDash + 1);
+        const aliasScale = colors[aliasColorName];
+        if (aliasScale && typeof aliasScale === "object") {
+          hex = aliasScale[aliasShade] ?? null;
+        } else if (typeof aliasScale === "string") {
+          hex = aliasScale;
+        }
+      }
+    }
+  }
   if (!hex) return null;
   if (!opacityPart) return hex;
   let alpha;

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-23GRUDYB.mjs";
-import "./chunk-IYY3U6L2.mjs";
+} from "./chunk-XW4LEBBB.mjs";
+import "./chunk-7YSVROUJ.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -1111,6 +1111,25 @@ function resolveColor(value, colors, isArbitrary) {
       }
     }
   }
+  if (hex && !hex.startsWith("#") && !hex.startsWith("rgb") && hex !== "transparent" && hex !== "currentColor") {
+    if (hex in colors) {
+      const alias = colors[hex];
+      if (typeof alias === "string") hex = alias;
+      else if (typeof alias === "object" && "6" in alias) hex = alias["6"] ?? hex;
+    } else {
+      const aliasLastDash = hex.lastIndexOf("-");
+      if (aliasLastDash > 0) {
+        const aliasColorName = hex.slice(0, aliasLastDash);
+        const aliasShade = hex.slice(aliasLastDash + 1);
+        const aliasScale = colors[aliasColorName];
+        if (aliasScale && typeof aliasScale === "object") {
+          hex = aliasScale[aliasShade] ?? null;
+        } else if (typeof aliasScale === "string") {
+          hex = aliasScale;
+        }
+      }
+    }
+  }
   if (!hex) return null;
   if (!opacityPart) return hex;
   let alpha;

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-23GRUDYB.mjs";
-import "./chunk-IYY3U6L2.mjs";
+} from "./chunk-XW4LEBBB.mjs";
+import "./chunk-7YSVROUJ.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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