@kbach/ui 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/index.js

@@ -35,26 +35,26 @@ __export(index_exports, {
   KbachReset: () => KbachReset,
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
-  buildConfig: () => import_core12.buildConfig,
-  clearCache: () => import_core12.clearCache,
+  buildConfig: () => import_core13.buildConfig,
+  clearCache: () => import_core13.clearCache,
   cx: () => cx,
-  defaultColors: () => import_core12.defaultColors,
-  defaultTheme: () => import_core12.defaultTheme,
-  disableRuntimeCSS: () => import_core12.disableRuntimeCSS,
-  flatten: () => import_core12.flatten,
-  generateKbachTypesDts: () => import_core12.generateKbachTypesDts,
-  getConfig: () => import_core12.getConfig,
-  initConfig: () => import_core12.initConfig,
+  defaultColors: () => import_core13.defaultColors,
+  defaultTheme: () => import_core13.defaultTheme,
+  disableRuntimeCSS: () => import_core13.disableRuntimeCSS,
+  flatten: () => import_core13.flatten,
+  generateKbachTypesDts: () => import_core13.generateKbachTypesDts,
+  getConfig: () => import_core13.getConfig,
+  initConfig: () => import_core13.initConfig,
   kb: () => kb,
-  normalizeClassString: () => import_core12.normalizeClassString,
-  parseClass: () => import_core12.parseClass,
-  parseClasses: () => import_core12.parseClasses,
+  normalizeClassString: () => import_core13.normalizeClassString,
+  parseClass: () => import_core13.parseClass,
+  parseClasses: () => import_core13.parseClasses,
   registerWebElement: () => registerWebElement,
-  resolve: () => import_core12.resolve,
-  setResolveTarget: () => import_core12.setResolveTarget,
-  splitClassTokens: () => import_core12.splitClassTokens,
+  resolve: () => import_core13.resolve,
+  setResolveTarget: () => import_core13.setResolveTarget,
+  splitClassTokens: () => import_core13.splitClassTokens,
   styled: () => styled,
-  updateConfig: () => import_core12.updateConfig,
+  updateConfig: () => import_core13.updateConfig,
   useBreakpoint: () => useBreakpoint,
   useColors: () => useColors,
   useGlobalDarkMode: () => useGlobalDarkMode,
@@ -71,7 +71,8 @@ module.exports = __toCommonJS(index_exports);
 
 // src/context.tsx
 var import_react = require("react");
-var ThemeContext = globalThis.__kbachThemeContext ?? (globalThis.__kbachThemeContext = (0, import_react.createContext)(null));
+var import_core = require("./core");
+var ThemeContext = (0, import_core.getGlobalSingleton)("themeContext", () => (0, import_react.createContext)(null));
 function useTheme() {
   const ctx = (0, import_react.useContext)(ThemeContext);
   if (!ctx) {
@@ -87,11 +88,11 @@ function useIsDark() {
 
 // src/useColors.ts
 var import_react2 = require("react");
-var import_core = require("./core");
+var import_core2 = require("./core");
 function applyOpacity(color, opacity) {
   const a = Math.max(0, Math.min(1, opacity / 100));
   if (color.startsWith("#")) {
-    const rgb = (0, import_core.parseHexRgb)(color);
+    const rgb = (0, import_core2.parseHexRgb)(color);
     if (!rgb) return color;
     const [r, g, b] = rgb;
     return `rgba(${r},${g},${b},${a})`;
@@ -101,7 +102,7 @@ function applyOpacity(color, opacity) {
   return color;
 }
 function pickSide(value, isDark) {
-  return (0, import_core.isModeAwareColor)(value) ? isDark ? value.dark : value.light : value;
+  return (0, import_core2.isModeAwareColor)(value) ? isDark ? value.dark : value.light : value;
 }
 function makeShadeProxy(shades, isDark) {
   return new Proxy(shades, {
@@ -133,11 +134,11 @@ function wrapColors(rawColors, isDark = false) {
         const name = key.slice(0, slash);
         const op = Number(key.slice(slash + 1));
         const entry2 = rawColors[name];
-        return entry2 !== void 0 && (typeof entry2 === "string" || (0, import_core.isModeAwareColor)(entry2)) ? applyOpacity(pickSide(entry2, isDark), op) : void 0;
+        return entry2 !== void 0 && (typeof entry2 === "string" || (0, import_core2.isModeAwareColor)(entry2)) ? applyOpacity(pickSide(entry2, isDark), op) : void 0;
       }
       const entry = rawColors[key];
       if (entry === void 0) return void 0;
-      if (typeof entry === "string" || (0, import_core.isModeAwareColor)(entry)) return pickSide(entry, isDark);
+      if (typeof entry === "string" || (0, import_core2.isModeAwareColor)(entry)) return pickSide(entry, isDark);
       const cacheKey = `${key}:${isDark}`;
       if (!cache.has(cacheKey)) cache.set(cacheKey, makeShadeProxy(entry, isDark));
       return cache.get(cacheKey);
@@ -176,9 +177,9 @@ var useSyncExternalStore = import_react4.default.useSyncExternalStore ?? functio
 };
 
 // src/ThemeProvider.tsx
-var import_core2 = require("./core");
+var import_core3 = require("./core");
 var import_jsx_runtime = require("react/jsx-runtime");
-var useIsomorphicLayoutEffect = import_core2.isWeb || import_core2.isNative ? import_react5.useLayoutEffect : import_react5.useEffect;
+var useIsomorphicLayoutEffect = import_core3.isWeb || import_core3.isNative ? import_react5.useLayoutEffect : import_react5.useEffect;
 var STORAGE_KEY = "kbach-theme";
 var _mountedProviderCount = 0;
 var _warnedMultipleProviders = false;
@@ -187,7 +188,7 @@ var _warnedConfigOverride = false;
 var _warnedMediaModeToggle = false;
 function loadPersistedMode() {
   try {
-    if (import_core2.isWeb) return localStorage.getItem(STORAGE_KEY);
+    if (import_core3.isWeb) return localStorage.getItem(STORAGE_KEY);
     return null;
   } catch {
     return null;
@@ -195,12 +196,12 @@ function loadPersistedMode() {
 }
 function persistMode(mode) {
   try {
-    if (import_core2.isWeb) localStorage.setItem(STORAGE_KEY, mode);
+    if (import_core3.isWeb) localStorage.setItem(STORAGE_KEY, mode);
   } catch {
   }
 }
 function subscribeSystemScheme(callback) {
-  if (!import_core2.isWeb || typeof window === "undefined") return () => {
+  if (!import_core3.isWeb || typeof window === "undefined") return () => {
   };
   const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
   if (!mq) return () => {
@@ -209,14 +210,14 @@ function subscribeSystemScheme(callback) {
   return () => mq.removeEventListener("change", callback);
 }
 function getSystemScheme() {
-  if (!import_core2.isWeb || typeof window === "undefined") return "light";
+  if (!import_core3.isWeb || typeof window === "undefined") return "light";
   return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
 }
 function getSystemSchemeServerSnapshot() {
   return "light";
 }
 function applyWebTheme(resolvedMode, strategy) {
-  if (!import_core2.isWeb) return;
+  if (!import_core3.isWeb) return;
   const root = document.documentElement;
   if (strategy === "attribute") {
     root.setAttribute("data-theme", resolvedMode);
@@ -233,14 +234,22 @@ function ThemeProvider({
   config: configOverride,
   disablePersistence = false
 }) {
+  let nativeColorScheme = null;
+  let nativeWindowWidth;
+  if (import_core3.isNative) {
+    const { useColorScheme, useWindowDimensions } = require("react-native");
+    const raw = useColorScheme();
+    nativeColorScheme = raw === "dark" ? "dark" : raw === "light" ? "light" : null;
+    nativeWindowWidth = useWindowDimensions().width;
+  }
   const [resolvedConfig, setResolvedConfig] = (0, import_react5.useState)(
-    () => configOverride ? (0, import_core2.buildConfig)(configOverride) : (0, import_core2.getConfig)()
+    () => configOverride ? (0, import_core3.buildConfig)(configOverride) : (0, import_core3.getConfig)()
   );
   const _prevConfigOverrideRef = (0, import_react5.useRef)(void 0);
   if (configOverride && _prevConfigOverrideRef.current !== configOverride) {
     _prevConfigOverrideRef.current = configOverride;
-    (0, import_core2.updateConfig)(configOverride);
-    const fresh = (0, import_core2.getConfig)();
+    (0, import_core3.updateConfig)(configOverride);
+    const fresh = (0, import_core3.getConfig)();
     if (fresh !== resolvedConfig) setResolvedConfig(fresh);
   }
   (0, import_react5.useEffect)(() => {
@@ -249,13 +258,13 @@ function ThemeProvider({
     if (process.env.NODE_ENV !== "production") {
       if (_mountedProviderCount > 1 && !_warnedMultipleProviders) {
         _warnedMultipleProviders = true;
-        (0, import_core2.kbachWarn)(
+        (0, import_core3.kbachWarn)(
           "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
         );
       }
       if (_mountedConfigOverrideCount > 1 && !_warnedConfigOverride) {
         _warnedConfigOverride = true;
-        (0, import_core2.kbachWarn)(
+        (0, import_core3.kbachWarn)(
           "Multiple <ThemeProvider config={...}> overrides are mounted at once. The resolved config is shared through the same global store as dark mode/width (see the multiple-providers warning), so per-tree config overrides are not actually isolated between providers \u2014 plain className/kb elements with no hover:/dark:/sm: modifier resolve against whichever override last committed, not necessarily their nearest ancestor <ThemeProvider>."
         );
       }
@@ -264,12 +273,12 @@ function ThemeProvider({
       _mountedProviderCount--;
       if (configOverride) _mountedConfigOverrideCount--;
       if (_prevConfigOverrideRef.current !== void 0 && _mountedProviderCount === 0) {
-        (0, import_core2.resetConfig)();
+        (0, import_core3.resetConfig)();
       }
     };
   }, []);
   const [webWidth, setWebWidth] = (0, import_react5.useState)(0);
-  const effectiveWidth = (0, import_core2.getEffectiveIsWeb)() ? webWidth : windowWidthProp ?? 0;
+  const effectiveWidth = (0, import_core3.getEffectiveIsWeb)() ? webWidth : windowWidthProp ?? nativeWindowWidth ?? 0;
   const numericScreens = (0, import_react5.useMemo)(() => {
     const out = {};
     for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
@@ -280,18 +289,18 @@ function ThemeProvider({
   const _prevWidthRef = (0, import_react5.useRef)(-1);
   if (_prevWidthRef.current !== effectiveWidth) {
     _prevWidthRef.current = effectiveWidth;
-    (0, import_core2.syncGlobalWidth)(effectiveWidth);
+    (0, import_core3.syncGlobalWidth)(effectiveWidth);
   }
   const _prevScreensRef = (0, import_react5.useRef)(null);
   if (_prevScreensRef.current !== numericScreens) {
     _prevScreensRef.current = numericScreens;
-    (0, import_core2.syncGlobalScreens)(numericScreens);
+    (0, import_core3.syncGlobalScreens)(numericScreens);
   }
   (0, import_react5.useEffect)(() => {
-    (0, import_core2.setGlobalWidth)(effectiveWidth);
+    (0, import_core3.setGlobalWidth)(effectiveWidth);
   }, [effectiveWidth]);
   (0, import_react5.useEffect)(() => {
-    if (!import_core2.isWeb || typeof window === "undefined") return;
+    if (!import_core3.isWeb || typeof window === "undefined") return;
     setWebWidth(window.innerWidth);
     let raf = 0;
     const update = () => {
@@ -299,7 +308,7 @@ function ThemeProvider({
       raf = requestAnimationFrame(() => {
         const w = window.innerWidth;
         setWebWidth(w);
-        (0, import_core2.setGlobalWidth)(w);
+        (0, import_core3.setGlobalWidth)(w);
       });
     };
     window.addEventListener("resize", update);
@@ -313,7 +322,7 @@ function ThemeProvider({
     getSystemScheme,
     getSystemSchemeServerSnapshot
   );
-  const systemScheme = (0, import_core2.getEffectiveIsWeb)() ? webScheme : colorScheme === "dark" ? "dark" : "light";
+  const systemScheme = (0, import_core3.getEffectiveIsWeb)() ? webScheme : (colorScheme ?? nativeColorScheme) === "dark" ? "dark" : "light";
   const [mode, _setMode] = (0, import_react5.useState)(defaultMode);
   (0, import_react5.useEffect)(() => {
     if (disablePersistence) return;
@@ -321,7 +330,7 @@ function ThemeProvider({
     if (persisted) _setMode(persisted);
   }, []);
   (0, import_react5.useEffect)(() => {
-    if (disablePersistence || !import_core2.isWeb || typeof window === "undefined") return;
+    if (disablePersistence || !import_core3.isWeb || typeof window === "undefined") return;
     const onStorage = (e) => {
       if (e.key !== STORAGE_KEY || e.newValue == null) return;
       if (e.newValue === "light" || e.newValue === "dark" || e.newValue === "system") {
@@ -332,9 +341,9 @@ function ThemeProvider({
     return () => window.removeEventListener("storage", onStorage);
   }, [disablePersistence]);
   const setMode = (0, import_react5.useCallback)((next) => {
-    if (process.env.NODE_ENV !== "production" && import_core2.isWeb && resolvedConfig.darkMode === "media" && !_warnedMediaModeToggle) {
+    if (process.env.NODE_ENV !== "production" && import_core3.isWeb && resolvedConfig.darkMode === "media" && !_warnedMediaModeToggle) {
       _warnedMediaModeToggle = true;
-      (0, import_core2.kbachWarn)(
+      (0, import_core3.kbachWarn)(
         'setMode()/toggle() was called while darkMode is "media" \u2014 the resolved mode/isDark from useTheme()/useIsDark() will update, but the actual CSS stays driven by prefers-color-scheme and will not change to match. Use darkMode: "attribute" or "class" if the app needs manual toggling.'
       );
     }
@@ -346,15 +355,15 @@ function ThemeProvider({
   }, [mode, systemScheme, setMode]);
   const resolvedMode = mode === "system" ? systemScheme : mode;
   const isDark = resolvedMode === "dark";
-  (0, import_core2.syncGlobalDarkMode)(isDark);
+  (0, import_core3.syncGlobalDarkMode)(isDark);
   useIsomorphicLayoutEffect(() => {
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
-    (0, import_core2.setGlobalDarkMode)(isDark);
+    (0, import_core3.setGlobalDarkMode)(isDark);
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);
   (0, import_react5.useEffect)(() => {
     if (configOverride) return;
     let mounted = true;
-    const unsub = (0, import_core2.onConfigChange)((config) => {
+    const unsub = (0, import_core3.onConfigChange)((config) => {
       if (mounted) setResolvedConfig(config);
     });
     return () => {
@@ -370,40 +379,40 @@ function ThemeProvider({
 }
 
 // src/KbachReset.tsx
-var import_core3 = require("./core");
+var import_core4 = require("./core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function KbachReset() {
-  if (import_core3.isNative) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { id: import_core3.RESET_STYLE_ID, children: import_core3.BASE_RESET });
+  if (import_core4.isNative) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { id: import_core4.RESET_STYLE_ID, children: import_core4.BASE_RESET });
 }
 
 // src/styled.tsx
 var import_react6 = __toESM(require("react"));
-var import_core7 = require("./core");
+var import_core8 = require("./core");
 
 // src/useGlobalDarkMode.ts
-var import_core4 = require("./core");
+var import_core5 = require("./core");
 var NOOP_SUB = (_) => () => {
 };
 var FALSE_SNAP = () => false;
 function useGlobalDarkMode() {
   return useSyncExternalStore(
-    import_core4.subscribeGlobalDarkMode,
-    import_core4.getGlobalDarkMode,
+    import_core5.subscribeGlobalDarkMode,
+    import_core5.getGlobalDarkMode,
     () => false
     // SSR: default light
   );
 }
 function useConditionalGlobalDarkMode(active) {
   return useSyncExternalStore(
-    active ? import_core4.subscribeGlobalDarkMode : NOOP_SUB,
-    active ? import_core4.getGlobalDarkMode : FALSE_SNAP,
+    active ? import_core5.subscribeGlobalDarkMode : NOOP_SUB,
+    active ? import_core5.getGlobalDarkMode : FALSE_SNAP,
     FALSE_SNAP
   );
 }
 
 // src/useGlobalWidth.ts
-var import_core5 = require("./core");
+var import_core6 = require("./core");
 var NOOP_SUB2 = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
@@ -438,23 +447,23 @@ function getWebWidth() {
 }
 function useGlobalWidth() {
   return useSyncExternalStore(
-    import_core5.isWeb ? subscribeWebWidth : import_core5.subscribeGlobalWidth,
-    import_core5.isWeb ? getWebWidth : import_core5.getGlobalWidth,
+    import_core6.isWeb ? subscribeWebWidth : import_core6.subscribeGlobalWidth,
+    import_core6.isWeb ? getWebWidth : import_core6.getGlobalWidth,
     ZERO_SNAP
   );
 }
 function useConditionalWidth(active) {
   return useSyncExternalStore(
-    active ? import_core5.isWeb ? subscribeWebWidth : import_core5.subscribeGlobalWidth : NOOP_SUB2,
-    active ? import_core5.isWeb ? getWebWidth : import_core5.getGlobalWidth : ZERO_SNAP,
+    active ? import_core6.isWeb ? subscribeWebWidth : import_core6.subscribeGlobalWidth : NOOP_SUB2,
+    active ? import_core6.isWeb ? getWebWidth : import_core6.getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
   );
 }
 
 // src/shared-utils.ts
-var import_core6 = require("./core");
+var import_core7 = require("./core");
 function hasResponsiveBuckets(resolved) {
-  const responsiveMods = (0, import_core6.getResponsiveModifiers)();
+  const responsiveMods = (0, import_core7.getResponsiveModifiers)();
   for (const key of Object.keys(resolved)) {
     if (key === "base") continue;
     for (const mod of key.split(":")) {
@@ -464,7 +473,7 @@ function hasResponsiveBuckets(resolved) {
   return false;
 }
 function hasInteractiveBuckets(resolved) {
-  const interactiveMods = (0, import_core6.getInteractiveModifiers)();
+  const interactiveMods = (0, import_core7.getInteractiveModifiers)();
   for (const key of Object.keys(resolved)) {
     if (key === "base") continue;
     for (const mod of key.split(":")) {
@@ -860,7 +869,7 @@ function styled(Component, baseClasses = "") {
       const disabled = !!props.disabled;
       const checked = !!props.checked;
       const { config } = useTheme();
-      const isWebPlatform = (0, import_core7.getEffectiveIsWeb)();
+      const isWebPlatform = (0, import_core8.getEffectiveIsWeb)();
       const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
       const [pressed, setPressed] = (0, import_react6.useState)(false);
       const [hovered, setHovered] = (0, import_react6.useState)(false);
@@ -896,18 +905,18 @@ function styled(Component, baseClasses = "") {
         if (!isWebPlatform) setFocused(false);
       }), [onBlur, isWebPlatform]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const firstPassResolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const firstPassResolved = (0, import_react6.useMemo)(() => (0, import_core8.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
       const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
       const impliedClasses = getImpliedRNClasses(webTag, firstPassResolved.base);
       const finalClassStr = impliedClasses ? `${combined} ${impliedClasses}` : combined;
-      const resolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
+      const resolved = (0, import_react6.useMemo)(() => (0, import_core8.resolve)(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
       const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth && !isWebPlatform);
-      const breakpoints = needsWidth ? (0, import_core7.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
-      const screens = (0, import_core7.getGlobalScreens)();
+      const breakpoints = needsWidth ? (0, import_core8.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+      const screens = (0, import_core8.getGlobalScreens)();
       const computedStyle = (0, import_react6.useMemo)(
-        () => isWebPlatform ? {} : (0, import_core7.flatten)(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
+        () => isWebPlatform ? {} : (0, import_core8.flatten)(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width, screens]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
@@ -920,7 +929,7 @@ function styled(Component, baseClasses = "") {
         ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWebPlatform && finalClassStr ? { className: (0, import_core7.normalizeClassString)(finalClassStr) } : {},
+        ...isWebPlatform && finalClassStr ? { className: (0, import_core8.normalizeClassString)(finalClassStr) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
@@ -935,7 +944,7 @@ function styled(Component, baseClasses = "") {
         // reliable signal either way. Forwarding them made React DOM warn "Unknown event
         // handler property" the moment any such component got an interactive modifier
         // (hover:, active:, …), which is the common case, not the exception.
-        ...!import_core7.isNative ? hasInteractive ? {
+        ...!import_core8.isNative ? hasInteractive ? {
           onPointerDown: handlePointerDown,
           onPointerUp: handlePointerUp,
           onPointerLeave: handlePointerLeave,
@@ -960,29 +969,29 @@ function styled(Component, baseClasses = "") {
 
 // src/useStyles.ts
 var import_react7 = require("react");
-var import_core8 = require("./core");
+var import_core9 = require("./core");
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
   return (0, import_react7.useMemo)(() => {
-    const resolved = (0, import_core8.resolve)(normalised, config.theme, config.darkMode);
-    const breakpoints = (0, import_core8.getActiveBreakpoints)(width);
-    return (0, import_core8.flatten)(resolved, isDark, state, breakpoints);
+    const resolved = (0, import_core9.resolve)(normalised, config.theme, config.darkMode);
+    const breakpoints = (0, import_core9.getActiveBreakpoints)(width);
+    return (0, import_core9.flatten)(resolved, isDark, state, breakpoints);
   }, [normalised, isDark, config.theme, config.darkMode, width, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
 }
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
   return (0, import_react7.useMemo)(
-    () => (0, import_core8.resolve)(normalised, config.theme, config.darkMode),
+    () => (0, import_core9.resolve)(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
 // src/useBreakpoint.ts
 var import_react8 = require("react");
-var import_core9 = require("./core");
+var import_core10 = require("./core");
 function toNumericScreens(screens) {
   const out = {};
   for (const [name, v] of Object.entries(screens)) {
@@ -997,7 +1006,7 @@ function useBreakpoint() {
   const screens = config.theme.screens;
   const numericScreens = (0, import_react8.useMemo)(() => toNumericScreens(screens), [screens]);
   return (0, import_react8.useMemo)(() => {
-    const active = (0, import_core9.getActiveBreakpoints)(width, numericScreens);
+    const active = (0, import_core10.getActiveBreakpoints)(width, numericScreens);
     let best = null;
     let bestMinW = -Infinity;
     for (const name of active) {
@@ -1016,7 +1025,7 @@ function useResponsive() {
   const screens = config.theme.screens;
   const numericScreens = (0, import_react8.useMemo)(() => toNumericScreens(screens), [screens]);
   return (0, import_react8.useMemo)(() => {
-    const active = (0, import_core9.getActiveBreakpoints)(width, numericScreens);
+    const active = (0, import_core10.getActiveBreakpoints)(width, numericScreens);
     const result = {};
     for (const name of Object.keys(numericScreens)) {
       result[name] = active.has(name);
@@ -1027,7 +1036,7 @@ function useResponsive() {
 
 // src/InteractiveWrapper.tsx
 var import_react9 = __toESM(require("react"));
-var import_core10 = require("./core");
+var import_core11 = require("./core");
 var InteractiveWrapper = (0, import_react9.forwardRef)(
   function InteractiveWrapper2({
     Component,
@@ -1046,12 +1055,12 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     onBlur,
     ...rest
   }, ref) {
-    const isWebPlatform = (0, import_core10.getEffectiveIsWeb)();
+    const isWebPlatform = (0, import_core11.getEffectiveIsWeb)();
     const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth && !isWebPlatform);
-    const breakpoints = needsWidth ? (0, import_core10.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
-    const screens = (0, import_core10.getGlobalScreens)();
+    const breakpoints = needsWidth ? (0, import_core11.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+    const screens = (0, import_core11.getGlobalScreens)();
     const [pressed, setPressed] = (0, import_react9.useState)(false);
     const [hovered, setHovered] = (0, import_react9.useState)(false);
     const [focused, setFocused] = (0, import_react9.useState)(false);
@@ -1090,7 +1099,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     const computedStyle = (0, import_react9.useMemo)(
       () => {
         if (isWebPlatform) return {};
-        const s = (0, import_core10.flatten)(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
+        const s = (0, import_core11.flatten)(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
         stripInternalMarkers(s);
         if (isNonStringComponent) stripWebOnlyProps(s);
         return s;
@@ -1105,7 +1114,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
       ...disabled !== void 0 ? { disabled } : {},
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
-      ...!import_core10.isNative && className ? { className } : {},
+      ...!import_core11.isNative && className ? { className } : {},
       // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch) —
       // onPressIn/onPressOut are RN-only prop names and are never forwarded here, even when
       // Component isn't a literal HTML tag string. A non-string Component on web is just as
@@ -1119,7 +1128,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
       // in jsx-runtime.tsx swaps it for a plain host tag — so keeping them pre-hydration would
       // only have traded one prop-mismatch warning for another.) Genuinely native code paths
       // still get them via the isNative branch below.
-      ...!import_core10.isNative ? {
+      ...!import_core11.isNative ? {
         onPointerDown: handlePointerDown,
         onPointerUp: handlePointerUp,
         onPointerLeave: handlePointerLeave,
@@ -1136,21 +1145,21 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 
 // src/kb.ts
-var import_core11 = require("./core");
+var import_core12 = require("./core");
 function kb(classString, isDark = false) {
-  const config = (0, import_core11.getConfig)();
-  const resolved = (0, import_core11.resolve)(classString, config.theme, config.darkMode);
-  if ((0, import_core11.getEffectiveIsWeb)()) {
+  const config = (0, import_core12.getConfig)();
+  const resolved = (0, import_core12.resolve)(classString, config.theme, config.darkMode);
+  if ((0, import_core12.getEffectiveIsWeb)()) {
     return classString;
   }
-  return (0, import_core11.flatten)(resolved, isDark);
+  return (0, import_core12.flatten)(resolved, isDark);
 }
 function cx(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
 // src/index.ts
-var import_core12 = require("./core");
+var import_core13 = require("./core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InteractiveWrapper,

package/dist/index.mjs

@@ -4,6 +4,7 @@ import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
   RESET_STYLE_ID,
+  __require,
   buildConfig,
   chain,
   clearCache,
@@ -17,6 +18,7 @@ import {
   getConfig,
   getEffectiveIsWeb,
   getGlobalScreens,
+  getGlobalSingleton,
   getImpliedRNClasses,
   getWebTag,
   hasInteractiveBuckets,
@@ -48,11 +50,11 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-BPCFICND.mjs";
+} from "./chunk-VBK6ORYJ.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
-var ThemeContext = globalThis.__kbachThemeContext ?? (globalThis.__kbachThemeContext = createContext(null));
+var ThemeContext = getGlobalSingleton("themeContext", () => createContext(null));
 function useTheme() {
   const ctx = useContext(ThemeContext);
   if (!ctx) {
@@ -204,6 +206,14 @@ function ThemeProvider({
   config: configOverride,
   disablePersistence = false
 }) {
+  let nativeColorScheme = null;
+  let nativeWindowWidth;
+  if (isNative) {
+    const { useColorScheme, useWindowDimensions } = __require("react-native");
+    const raw = useColorScheme();
+    nativeColorScheme = raw === "dark" ? "dark" : raw === "light" ? "light" : null;
+    nativeWindowWidth = useWindowDimensions().width;
+  }
   const [resolvedConfig, setResolvedConfig] = useState(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
@@ -240,7 +250,7 @@ function ThemeProvider({
     };
   }, []);
   const [webWidth, setWebWidth] = useState(0);
-  const effectiveWidth = getEffectiveIsWeb() ? webWidth : windowWidthProp ?? 0;
+  const effectiveWidth = getEffectiveIsWeb() ? webWidth : windowWidthProp ?? nativeWindowWidth ?? 0;
   const numericScreens = useMemo3(() => {
     const out = {};
     for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
@@ -284,7 +294,7 @@ function ThemeProvider({
     getSystemScheme,
     getSystemSchemeServerSnapshot
   );
-  const systemScheme = getEffectiveIsWeb() ? webScheme : colorScheme === "dark" ? "dark" : "light";
+  const systemScheme = getEffectiveIsWeb() ? webScheme : (colorScheme ?? nativeColorScheme) === "dark" ? "dark" : "light";
   const [mode, _setMode] = useState(defaultMode);
   useEffect(() => {
     if (disablePersistence) return;

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-UE54W6ZG.mjs";
-import "./chunk-BPCFICND.mjs";
+} from "./chunk-KHTZ244V.mjs";
+import "./chunk-VBK6ORYJ.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-UE54W6ZG.mjs";
+} from "./chunk-KHTZ244V.mjs";
 import {
   registerWebElement
-} from "./chunk-BPCFICND.mjs";
+} from "./chunk-VBK6ORYJ.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,