@kbach/react 1.0.0-beta.11 → 1.0.0-beta.13

package/dist/{chunk-4Y2QXNJY.mjs → chunk-77PKNQ2K.mjs}

@@ -1,8 +1,99 @@
 import {
   defaultTheme,
+  getTheme,
   setTheme
 } from "./chunk-EOSN5CYG.mjs";
 
+// src/darkModeStore.ts
+var STORAGE_KEY = "kbach-theme";
+var listeners = /* @__PURE__ */ new Set();
+function systemPrefersDark() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function storage() {
+  return typeof window === "undefined" ? null : window.localStorage;
+}
+function readPersistedMode() {
+  const ls = storage();
+  if (!ls) return null;
+  try {
+    const raw = ls.getItem(STORAGE_KEY);
+    return raw === "light" || raw === "dark" || raw === "system" ? raw : null;
+  } catch {
+    return null;
+  }
+}
+function resolveIsDark(m) {
+  return m === "system" ? systemPrefersDark() : m === "dark";
+}
+function applyToDom(dark) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const strategy = getTheme().darkMode;
+  if (strategy === "class") {
+    root.classList.toggle("dark", dark);
+    root.classList.toggle("light", !dark);
+  } else if (strategy === "attribute") {
+    root.setAttribute("data-theme", dark ? "dark" : "light");
+  }
+}
+var persistedMode = readPersistedMode();
+var hadPersistedMode = persistedMode !== null;
+var mode = persistedMode ?? "system";
+var isDark = resolveIsDark(mode);
+applyToDom(isDark);
+if (typeof window !== "undefined" && window.matchMedia) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  const onSystemChange = (event) => {
+    if (mode !== "system") return;
+    isDark = event.matches;
+    applyToDom(isDark);
+    notify();
+  };
+  if (mq.addEventListener) mq.addEventListener("change", onSystemChange);
+  else mq.addListener(onSystemChange);
+}
+function notify() {
+  for (const listener of listeners) listener();
+}
+function resyncDomWithActiveTheme() {
+  applyToDom(isDark);
+}
+function getGlobalDarkMode() {
+  return isDark;
+}
+function getGlobalThemeMode() {
+  return mode;
+}
+function setGlobalThemeMode(nextMode) {
+  mode = nextMode;
+  isDark = resolveIsDark(nextMode);
+  applyToDom(isDark);
+  const ls = storage();
+  if (ls) {
+    try {
+      ls.setItem(STORAGE_KEY, nextMode);
+    } catch {
+    }
+  }
+  notify();
+}
+function toggleGlobalDarkMode() {
+  setGlobalThemeMode(isDark ? "light" : "dark");
+}
+function subscribeGlobalDarkMode(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function seedDefaultMode(fallback) {
+  if (hadPersistedMode || mode === fallback) return;
+  mode = fallback;
+  isDark = resolveIsDark(fallback);
+  applyToDom(isDark);
+  notify();
+}
+
 // src/colorVariables.ts
 function parseHexRgb(hex) {
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
@@ -104,12 +195,19 @@ function resolveKbachConfig(config) {
 function applyKbachConfig(config) {
   const theme = resolveKbachConfig(config);
   setTheme(theme);
+  resyncDomWithActiveTheme();
   return theme;
 }
 
 export {
   parseHexRgb,
   ensureColorVariablesInjected,
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  setGlobalThemeMode,
+  toggleGlobalDarkMode,
+  subscribeGlobalDarkMode,
+  seedDefaultMode,
   resolveKbachConfig,
   applyKbachConfig
 };

package/dist/{chunk-L6B4DTLD.mjs → chunk-7G7TMQL6.mjs}

@@ -1,6 +1,6 @@
 import {
   kb
-} from "./chunk-ROKZPEHA.mjs";
+} from "./chunk-U4FGKMNH.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-J2M6QWJW.mjs → chunk-FJUZ2ZYT.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveKbachConfig
-} from "./chunk-4Y2QXNJY.mjs";
+} from "./chunk-77PKNQ2K.mjs";
 import {
   buildResetCSS,
   defaultTheme

package/dist/{chunk-ROKZPEHA.mjs → chunk-U4FGKMNH.mjs}

@@ -79,9 +79,23 @@ function ensureResetInjected() {
   el.textContent = BASE_RESET;
   document.head.insertBefore(el, document.head.firstChild);
 }
+var KB_CACHE_MAX = 500;
+var kbCache = /* @__PURE__ */ new Map();
+var cachedForThemeJson = null;
 function kb(classString) {
-  const json = generateCss(classString, getThemeJson());
-  const { className, rules } = JSON.parse(json);
+  const themeJson = getThemeJson();
+  if (themeJson !== cachedForThemeJson) {
+    kbCache.clear();
+    cachedForThemeJson = themeJson;
+  }
+  let result = kbCache.get(classString);
+  if (result === void 0) {
+    const json = generateCss(classString, themeJson);
+    result = JSON.parse(json);
+    if (kbCache.size >= KB_CACHE_MAX) kbCache.clear();
+    kbCache.set(classString, result);
+  }
+  const { className, rules } = result;
   if (!runtimeCSSDisabled) {
     ensureResetInjected();
     for (const { rule, order } of rules) {

package/dist/{config-BQ_b-qxF.d.mts → config-B00tH6vN.d.mts}

@@ -99,7 +99,18 @@ interface KbachConfig {
 }
 /** Merges a `KbachConfig` into `defaultTheme` — a pure function, no side effects. */
 declare function resolveKbachConfig(config: KbachConfig): ThemeConfig;
-/** `resolveKbachConfig()` + `setTheme()` in one call — the usual entry point from app code. Returns the resolved theme (e.g. to also hand to the Vite plugin's own `theme` option). */
+/**
+ * `resolveKbachConfig()` + `setTheme()` in one call — the usual entry point
+ * from app code. Returns the resolved theme (e.g. to also hand to the Vite
+ * plugin's own `theme` option).
+ *
+ * Also re-syncs the DOM to the CURRENT dark-mode state right after
+ * `setTheme()` — see `resyncDomWithActiveTheme`'s own doc comment for why
+ * this is required, not optional: without it, an app that configures
+ * `darkMode: 'attribute'`/`'class'` here can silently never apply its
+ * `dark:` classes on initial load (even though `useTheme().isDark` reads
+ * correctly) until some later, unrelated dark-mode event happens to fire.
+ */
 declare function applyKbachConfig(config: KbachConfig): ThemeConfig;
 
 export { type ColorEntry as C, type DarkModeStrategy as D, type KbachConfig as K, type ThemeConfig as T, type ContainerConfig as a, applyKbachConfig as b, defaultTheme as d, getTheme as g, resolveKbachConfig as r, setTheme as s };

package/dist/{config-BQ_b-qxF.d.ts → config-B00tH6vN.d.ts}

@@ -99,7 +99,18 @@ interface KbachConfig {
 }
 /** Merges a `KbachConfig` into `defaultTheme` — a pure function, no side effects. */
 declare function resolveKbachConfig(config: KbachConfig): ThemeConfig;
-/** `resolveKbachConfig()` + `setTheme()` in one call — the usual entry point from app code. Returns the resolved theme (e.g. to also hand to the Vite plugin's own `theme` option). */
+/**
+ * `resolveKbachConfig()` + `setTheme()` in one call — the usual entry point
+ * from app code. Returns the resolved theme (e.g. to also hand to the Vite
+ * plugin's own `theme` option).
+ *
+ * Also re-syncs the DOM to the CURRENT dark-mode state right after
+ * `setTheme()` — see `resyncDomWithActiveTheme`'s own doc comment for why
+ * this is required, not optional: without it, an app that configures
+ * `darkMode: 'attribute'`/`'class'` here can silently never apply its
+ * `dark:` classes on initial load (even though `useTheme().isDark` reads
+ * correctly) until some later, unrelated dark-mode event happens to fire.
+ */
 declare function applyKbachConfig(config: KbachConfig): ThemeConfig;
 
 export { type ColorEntry as C, type DarkModeStrategy as D, type KbachConfig as K, type ThemeConfig as T, type ContainerConfig as a, applyKbachConfig as b, defaultTheme as d, getTheme as g, resolveKbachConfig as r, setTheme as s };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-BQ_b-qxF.mjs';
+export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-B00tH6vN.mjs';
 import * as react from 'react';
 import { ReactNode } from 'react';
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-BQ_b-qxF.js';
+export { C as ColorEntry, a as ContainerConfig, D as DarkModeStrategy, K as KbachConfig, T as ThemeConfig, b as applyKbachConfig, d as defaultTheme, g as getTheme, r as resolveKbachConfig, s as setTheme } from './config-B00tH6vN.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
 

package/dist/index.js

@@ -587,9 +587,23 @@ function ensureResetInjected() {
   el.textContent = BASE_RESET;
   document.head.insertBefore(el, document.head.firstChild);
 }
+var KB_CACHE_MAX = 500;
+var kbCache = /* @__PURE__ */ new Map();
+var cachedForThemeJson = null;
 function kb(classString) {
-  const json = generateCss(classString, getThemeJson());
-  const { className, rules } = JSON.parse(json);
+  const themeJson = getThemeJson();
+  if (themeJson !== cachedForThemeJson) {
+    kbCache.clear();
+    cachedForThemeJson = themeJson;
+  }
+  let result = kbCache.get(classString);
+  if (result === void 0) {
+    const json = generateCss(classString, themeJson);
+    result = JSON.parse(json);
+    if (kbCache.size >= KB_CACHE_MAX) kbCache.clear();
+    kbCache.set(classString, result);
+  }
+  const { className, rules } = result;
   if (!runtimeCSSDisabled) {
     ensureResetInjected();
     for (const { rule, order } of rules) {
@@ -656,63 +670,6 @@ function ensureColorVariablesInjected(theme) {
 ${wrapDarkDecls(theme.darkMode, darkDecls.join(" "))}`;
 }
 
-// src/config.ts
-function applyOpacityToHex(hex, opacityText) {
-  const rgb = parseHexRgb(hex);
-  if (!rgb) return hex;
-  const a = Number(opacityText) / 100;
-  const clamped = Number.isFinite(a) ? Math.min(1, Math.max(0, a)) : 1;
-  return `rgba(${rgb.join(",")},${clamped})`;
-}
-function resolveColorEntry(value, lookup) {
-  if (typeof value !== "string") return value;
-  const slash = value.indexOf("/");
-  const name = slash === -1 ? value : value.slice(0, slash);
-  const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
-  const base = lookup(name);
-  if (base === void 0) return value;
-  if (opacity === void 0) return base;
-  return typeof base === "string" ? applyOpacityToHex(base, opacity) : { light: applyOpacityToHex(base.light, opacity), dark: applyOpacityToHex(base.dark, opacity) };
-}
-function resolveColors(extend, existing) {
-  const resolved = {};
-  const lookup = (name) => resolved[name] ?? existing[name];
-  for (const [name, value] of Object.entries(extend)) {
-    resolved[name] = resolveColorEntry(value, lookup);
-  }
-  return resolved;
-}
-function resolveKbachConfig(config) {
-  let theme = { ...defaultTheme, ...config.theme };
-  if (config.extend?.colors) {
-    theme = { ...theme, colors: { ...theme.colors, ...resolveColors(config.extend.colors, theme.colors) } };
-  }
-  if (config.extend?.spacing) {
-    theme = { ...theme, spacing: { ...theme.spacing, ...config.extend.spacing } };
-  }
-  if (config.extend?.screens) {
-    theme = { ...theme, screens: { ...theme.screens, ...config.extend.screens } };
-  }
-  if (config.extend?.fontFamily) {
-    theme = { ...theme, fontFamily: { ...theme.fontFamily, ...config.extend.fontFamily } };
-  }
-  if (config.extend?.container) {
-    theme = { ...theme, container: { ...theme.container, ...config.extend.container } };
-  }
-  if (config.darkMode) {
-    theme = { ...theme, darkMode: config.darkMode };
-  }
-  return theme;
-}
-function applyKbachConfig(config) {
-  const theme = resolveKbachConfig(config);
-  setTheme(theme);
-  return theme;
-}
-
-// src/useTheme.ts
-var import_react = require("react");
-
 // src/darkModeStore.ts
 var STORAGE_KEY = "kbach-theme";
 var listeners = /* @__PURE__ */ new Set();
@@ -766,6 +723,9 @@ if (typeof window !== "undefined" && window.matchMedia) {
 function notify() {
   for (const listener of listeners) listener();
 }
+function resyncDomWithActiveTheme() {
+  applyToDom(isDark);
+}
 function getGlobalDarkMode() {
   return isDark;
 }
@@ -800,7 +760,63 @@ function seedDefaultMode(fallback) {
   notify();
 }
 
+// src/config.ts
+function applyOpacityToHex(hex, opacityText) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const a = Number(opacityText) / 100;
+  const clamped = Number.isFinite(a) ? Math.min(1, Math.max(0, a)) : 1;
+  return `rgba(${rgb.join(",")},${clamped})`;
+}
+function resolveColorEntry(value, lookup) {
+  if (typeof value !== "string") return value;
+  const slash = value.indexOf("/");
+  const name = slash === -1 ? value : value.slice(0, slash);
+  const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
+  const base = lookup(name);
+  if (base === void 0) return value;
+  if (opacity === void 0) return base;
+  return typeof base === "string" ? applyOpacityToHex(base, opacity) : { light: applyOpacityToHex(base.light, opacity), dark: applyOpacityToHex(base.dark, opacity) };
+}
+function resolveColors(extend, existing) {
+  const resolved = {};
+  const lookup = (name) => resolved[name] ?? existing[name];
+  for (const [name, value] of Object.entries(extend)) {
+    resolved[name] = resolveColorEntry(value, lookup);
+  }
+  return resolved;
+}
+function resolveKbachConfig(config) {
+  let theme = { ...defaultTheme, ...config.theme };
+  if (config.extend?.colors) {
+    theme = { ...theme, colors: { ...theme.colors, ...resolveColors(config.extend.colors, theme.colors) } };
+  }
+  if (config.extend?.spacing) {
+    theme = { ...theme, spacing: { ...theme.spacing, ...config.extend.spacing } };
+  }
+  if (config.extend?.screens) {
+    theme = { ...theme, screens: { ...theme.screens, ...config.extend.screens } };
+  }
+  if (config.extend?.fontFamily) {
+    theme = { ...theme, fontFamily: { ...theme.fontFamily, ...config.extend.fontFamily } };
+  }
+  if (config.extend?.container) {
+    theme = { ...theme, container: { ...theme.container, ...config.extend.container } };
+  }
+  if (config.darkMode) {
+    theme = { ...theme, darkMode: config.darkMode };
+  }
+  return theme;
+}
+function applyKbachConfig(config) {
+  const theme = resolveKbachConfig(config);
+  setTheme(theme);
+  resyncDomWithActiveTheme();
+  return theme;
+}
+
 // src/useTheme.ts
+var import_react = require("react");
 function useTheme() {
   const isDark2 = (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
   const mode2 = (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalThemeMode, () => "system");
@@ -838,6 +854,7 @@ function ThemeProvider({ children, defaultMode = "system" }) {
 }
 
 // src/useColors.ts
+var import_react3 = require("react");
 function applyOpacity(color, opacity) {
   const a = Math.max(0, Math.min(1, opacity / 100));
   const varMatch = /^rgb\(var\((--[\w-]+)\)\)$/.exec(color);
@@ -898,7 +915,7 @@ function useColors() {
   const { isDark: isDark2 } = useTheme();
   const theme = getTheme();
   ensureColorVariablesInjected(theme);
-  return makeColorsProxy(theme, isDark2);
+  return (0, import_react3.useMemo)(() => makeColorsProxy(theme, isDark2), [theme, isDark2]);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -4,13 +4,19 @@ import {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb
-} from "./chunk-ROKZPEHA.mjs";
+} from "./chunk-U4FGKMNH.mjs";
 import {
   applyKbachConfig,
   ensureColorVariablesInjected,
+  getGlobalDarkMode,
+  getGlobalThemeMode,
   parseHexRgb,
-  resolveKbachConfig
-} from "./chunk-4Y2QXNJY.mjs";
+  resolveKbachConfig,
+  seedDefaultMode,
+  setGlobalThemeMode,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+} from "./chunk-77PKNQ2K.mjs";
 import {
   BASE_RESET,
   RESET_STYLE_ID,
@@ -28,101 +34,12 @@ function KbachReset() {
 
 // src/useTheme.ts
 import { useMemo, useSyncExternalStore } from "react";
-
-// src/darkModeStore.ts
-var STORAGE_KEY = "kbach-theme";
-var listeners = /* @__PURE__ */ new Set();
-function systemPrefersDark() {
-  if (typeof window === "undefined" || !window.matchMedia) return false;
-  return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function storage() {
-  return typeof window === "undefined" ? null : window.localStorage;
-}
-function readPersistedMode() {
-  const ls = storage();
-  if (!ls) return null;
-  try {
-    const raw = ls.getItem(STORAGE_KEY);
-    return raw === "light" || raw === "dark" || raw === "system" ? raw : null;
-  } catch {
-    return null;
-  }
-}
-function resolveIsDark(m) {
-  return m === "system" ? systemPrefersDark() : m === "dark";
-}
-function applyToDom(dark) {
-  if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  const strategy = getTheme().darkMode;
-  if (strategy === "class") {
-    root.classList.toggle("dark", dark);
-    root.classList.toggle("light", !dark);
-  } else if (strategy === "attribute") {
-    root.setAttribute("data-theme", dark ? "dark" : "light");
-  }
-}
-var persistedMode = readPersistedMode();
-var hadPersistedMode = persistedMode !== null;
-var mode = persistedMode ?? "system";
-var isDark = resolveIsDark(mode);
-applyToDom(isDark);
-if (typeof window !== "undefined" && window.matchMedia) {
-  const mq = window.matchMedia("(prefers-color-scheme: dark)");
-  const onSystemChange = (event) => {
-    if (mode !== "system") return;
-    isDark = event.matches;
-    applyToDom(isDark);
-    notify();
-  };
-  if (mq.addEventListener) mq.addEventListener("change", onSystemChange);
-  else mq.addListener(onSystemChange);
-}
-function notify() {
-  for (const listener of listeners) listener();
-}
-function getGlobalDarkMode() {
-  return isDark;
-}
-function getGlobalThemeMode() {
-  return mode;
-}
-function setGlobalThemeMode(nextMode) {
-  mode = nextMode;
-  isDark = resolveIsDark(nextMode);
-  applyToDom(isDark);
-  const ls = storage();
-  if (ls) {
-    try {
-      ls.setItem(STORAGE_KEY, nextMode);
-    } catch {
-    }
-  }
-  notify();
-}
-function toggleGlobalDarkMode() {
-  setGlobalThemeMode(isDark ? "light" : "dark");
-}
-function subscribeGlobalDarkMode(listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-}
-function seedDefaultMode(fallback) {
-  if (hadPersistedMode || mode === fallback) return;
-  mode = fallback;
-  isDark = resolveIsDark(fallback);
-  applyToDom(isDark);
-  notify();
-}
-
-// src/useTheme.ts
 function useTheme() {
-  const isDark2 = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
-  const mode2 = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalThemeMode, () => "system");
+  const isDark = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
+  const mode = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalThemeMode, () => "system");
   return useMemo(
-    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
-    [mode2, isDark2]
+    () => ({ mode, isDark, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode, isDark]
   );
 }
 
@@ -154,6 +71,7 @@ function ThemeProvider({ children, defaultMode = "system" }) {
 }
 
 // src/useColors.ts
+import { useMemo as useMemo2 } from "react";
 function applyOpacity(color, opacity) {
   const a = Math.max(0, Math.min(1, opacity / 100));
   const varMatch = /^rgb\(var\((--[\w-]+)\)\)$/.exec(color);
@@ -166,14 +84,14 @@ function applyOpacity(color, opacity) {
   if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
   return color;
 }
-function resolveEntry(name, entry, isDark2) {
+function resolveEntry(name, entry, isDark) {
   if (typeof entry === "string") return entry;
   const light = parseHexRgb(entry.light);
   const dark = parseHexRgb(entry.dark);
   if (light && dark) return `rgb(var(--kb-color-${name}))`;
-  return isDark2 ? entry.dark : entry.light;
+  return isDark ? entry.dark : entry.light;
 }
-function makeColorsProxy(theme, isDark2) {
+function makeColorsProxy(theme, isDark) {
   const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
   const cache = /* @__PURE__ */ new Map();
   function resolveNamed(key) {
@@ -186,7 +104,7 @@ function makeColorsProxy(theme, isDark2) {
     }
     const entry = theme.colors[name];
     if (entry === void 0) return void 0;
-    const value = resolveEntry(name, entry, isDark2);
+    const value = resolveEntry(name, entry, isDark);
     return opacity === void 0 ? value : applyOpacity(value, opacity);
   }
   function makeFamilyProxy(family) {
@@ -211,10 +129,10 @@ function makeColorsProxy(theme, isDark2) {
   });
 }
 function useColors() {
-  const { isDark: isDark2 } = useTheme();
+  const { isDark } = useTheme();
   const theme = getTheme();
   ensureColorVariablesInjected(theme);
-  return makeColorsProxy(theme, isDark2);
+  return useMemo2(() => makeColorsProxy(theme, isDark), [theme, isDark]);
 }
 export {
   KbachReset,

package/dist/jsx-dev-runtime.js

@@ -548,9 +548,23 @@ function ensureResetInjected() {
   el.textContent = BASE_RESET;
   document.head.insertBefore(el, document.head.firstChild);
 }
+var KB_CACHE_MAX = 500;
+var kbCache = /* @__PURE__ */ new Map();
+var cachedForThemeJson = null;
 function kb(classString) {
-  const json = generateCss(classString, getThemeJson());
-  const { className, rules } = JSON.parse(json);
+  const themeJson = getThemeJson();
+  if (themeJson !== cachedForThemeJson) {
+    kbCache.clear();
+    cachedForThemeJson = themeJson;
+  }
+  let result = kbCache.get(classString);
+  if (result === void 0) {
+    const json = generateCss(classString, themeJson);
+    result = JSON.parse(json);
+    if (kbCache.size >= KB_CACHE_MAX) kbCache.clear();
+    kbCache.set(classString, result);
+  }
+  const { className, rules } = result;
   if (!runtimeCSSDisabled) {
     ensureResetInjected();
     for (const { rule, order } of rules) {

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-L6B4DTLD.mjs";
-import "./chunk-ROKZPEHA.mjs";
+} from "./chunk-7G7TMQL6.mjs";
+import "./chunk-U4FGKMNH.mjs";
 import "./chunk-EOSN5CYG.mjs";
 
 // src/jsx-dev-runtime.tsx

package/dist/jsx-runtime.js

@@ -547,9 +547,23 @@ function ensureResetInjected() {
   el.textContent = BASE_RESET;
   document.head.insertBefore(el, document.head.firstChild);
 }
+var KB_CACHE_MAX = 500;
+var kbCache = /* @__PURE__ */ new Map();
+var cachedForThemeJson = null;
 function kb(classString) {
-  const json = generateCss(classString, getThemeJson());
-  const { className, rules } = JSON.parse(json);
+  const themeJson = getThemeJson();
+  if (themeJson !== cachedForThemeJson) {
+    kbCache.clear();
+    cachedForThemeJson = themeJson;
+  }
+  let result = kbCache.get(classString);
+  if (result === void 0) {
+    const json = generateCss(classString, themeJson);
+    result = JSON.parse(json);
+    if (kbCache.size >= KB_CACHE_MAX) kbCache.clear();
+    kbCache.set(classString, result);
+  }
+  const { className, rules } = result;
   if (!runtimeCSSDisabled) {
     ensureResetInjected();
     for (const { rule, order } of rules) {

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-L6B4DTLD.mjs";
-import "./chunk-ROKZPEHA.mjs";
+} from "./chunk-7G7TMQL6.mjs";
+import "./chunk-U4FGKMNH.mjs";
 import "./chunk-EOSN5CYG.mjs";
 export {
   Fragment,

package/dist/postcss-plugin.d.mts

@@ -1,5 +1,5 @@
 import { Plugin } from 'postcss';
-import { T as ThemeConfig, K as KbachConfig } from './config-BQ_b-qxF.mjs';
+import { T as ThemeConfig, K as KbachConfig } from './config-B00tH6vN.mjs';
 
 interface KbachPostcssPluginOptions {
     /**

package/dist/postcss-plugin.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'postcss';
-import { T as ThemeConfig, K as KbachConfig } from './config-BQ_b-qxF.js';
+import { T as ThemeConfig, K as KbachConfig } from './config-B00tH6vN.js';
 
 interface KbachPostcssPluginOptions {
     /**

package/dist/postcss-plugin.js

@@ -988,7 +988,11 @@ var defaultTheme = {
   // centering/padding) — see `ContainerConfig`'s own doc comment.
   container: {}
 };
+var activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);
+function getTheme() {
+  return activeTheme;
+}
 
 // src/colorVariables.ts
 function parseHexRgb(hex) {
@@ -1000,6 +1004,59 @@ function parseHexRgb(hex) {
   return [n >> 16 & 255, n >> 8 & 255, n & 255];
 }
 
+// src/darkModeStore.ts
+var STORAGE_KEY = "kbach-theme";
+var listeners = /* @__PURE__ */ new Set();
+function systemPrefersDark() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function storage() {
+  return typeof window === "undefined" ? null : window.localStorage;
+}
+function readPersistedMode() {
+  const ls = storage();
+  if (!ls) return null;
+  try {
+    const raw = ls.getItem(STORAGE_KEY);
+    return raw === "light" || raw === "dark" || raw === "system" ? raw : null;
+  } catch {
+    return null;
+  }
+}
+function resolveIsDark(m) {
+  return m === "system" ? systemPrefersDark() : m === "dark";
+}
+function applyToDom(dark) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const strategy = getTheme().darkMode;
+  if (strategy === "class") {
+    root.classList.toggle("dark", dark);
+    root.classList.toggle("light", !dark);
+  } else if (strategy === "attribute") {
+    root.setAttribute("data-theme", dark ? "dark" : "light");
+  }
+}
+var persistedMode = readPersistedMode();
+var mode = persistedMode ?? "system";
+var isDark = resolveIsDark(mode);
+applyToDom(isDark);
+if (typeof window !== "undefined" && window.matchMedia) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  const onSystemChange = (event) => {
+    if (mode !== "system") return;
+    isDark = event.matches;
+    applyToDom(isDark);
+    notify();
+  };
+  if (mq.addEventListener) mq.addEventListener("change", onSystemChange);
+  else mq.addListener(onSystemChange);
+}
+function notify() {
+  for (const listener of listeners) listener();
+}
+
 // src/config.ts
 function applyOpacityToHex(hex, opacityText) {
   const rgb = parseHexRgb(hex);

package/dist/postcss-plugin.mjs

@@ -2,8 +2,8 @@ import {
   DEFAULT_SCAN_DIRS,
   createKbachStaticCssEngine,
   resolveEffectiveTheme
-} from "./chunk-J2M6QWJW.mjs";
-import "./chunk-4Y2QXNJY.mjs";
+} from "./chunk-FJUZ2ZYT.mjs";
+import "./chunk-77PKNQ2K.mjs";
 import "./chunk-EOSN5CYG.mjs";
 
 // src/postcss-plugin/index.ts

package/dist/vite-plugin.d.mts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { T as ThemeConfig, K as KbachConfig } from './config-BQ_b-qxF.mjs';
+import { T as ThemeConfig, K as KbachConfig } from './config-B00tH6vN.mjs';
 
 interface KbachPluginOptions {
     /** Defaults to the same defaultTheme the runtime uses — pass your own to keep both in sync. */

package/dist/vite-plugin.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { T as ThemeConfig, K as KbachConfig } from './config-BQ_b-qxF.js';
+import { T as ThemeConfig, K as KbachConfig } from './config-B00tH6vN.js';
 
 interface KbachPluginOptions {
     /** Defaults to the same defaultTheme the runtime uses — pass your own to keep both in sync. */

package/dist/vite-plugin.js

@@ -1382,7 +1382,11 @@ var defaultTheme = {
   // centering/padding) — see `ContainerConfig`'s own doc comment.
   container: {}
 };
+var activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);
+function getTheme() {
+  return activeTheme;
+}
 
 // src/colorVariables.ts
 function parseHexRgb(hex) {
@@ -1394,6 +1398,59 @@ function parseHexRgb(hex) {
   return [n >> 16 & 255, n >> 8 & 255, n & 255];
 }
 
+// src/darkModeStore.ts
+var STORAGE_KEY = "kbach-theme";
+var listeners = /* @__PURE__ */ new Set();
+function systemPrefersDark() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function storage() {
+  return typeof window === "undefined" ? null : window.localStorage;
+}
+function readPersistedMode() {
+  const ls = storage();
+  if (!ls) return null;
+  try {
+    const raw = ls.getItem(STORAGE_KEY);
+    return raw === "light" || raw === "dark" || raw === "system" ? raw : null;
+  } catch {
+    return null;
+  }
+}
+function resolveIsDark(m) {
+  return m === "system" ? systemPrefersDark() : m === "dark";
+}
+function applyToDom(dark) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const strategy = getTheme().darkMode;
+  if (strategy === "class") {
+    root.classList.toggle("dark", dark);
+    root.classList.toggle("light", !dark);
+  } else if (strategy === "attribute") {
+    root.setAttribute("data-theme", dark ? "dark" : "light");
+  }
+}
+var persistedMode = readPersistedMode();
+var mode = persistedMode ?? "system";
+var isDark = resolveIsDark(mode);
+applyToDom(isDark);
+if (typeof window !== "undefined" && window.matchMedia) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  const onSystemChange = (event) => {
+    if (mode !== "system") return;
+    isDark = event.matches;
+    applyToDom(isDark);
+    notify();
+  };
+  if (mq.addEventListener) mq.addEventListener("change", onSystemChange);
+  else mq.addListener(onSystemChange);
+}
+function notify() {
+  for (const listener of listeners) listener();
+}
+
 // src/config.ts
 function applyOpacityToHex(hex, opacityText) {
   const rgb = parseHexRgb(hex);

package/dist/vite-plugin.mjs

@@ -5,8 +5,8 @@ import {
   kbach,
   loadConfigFile,
   resolveEffectiveTheme
-} from "./chunk-J2M6QWJW.mjs";
-import "./chunk-4Y2QXNJY.mjs";
+} from "./chunk-FJUZ2ZYT.mjs";
+import "./chunk-77PKNQ2K.mjs";
 import "./chunk-EOSN5CYG.mjs";
 export {
   CSS_SYNC_DEBOUNCE_MS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.13",
   "description": "A utility-first styling engine for React, powered by a real Rust/WASM core — Tailwind CSS v4 feature parity with Kbach's own color palette.",
   "keywords": ["css", "react", "tailwind", "utility-first", "wasm", "styling"],
   "license": "MIT",
@@ -62,7 +62,7 @@
     "generate:colors": "node ../core-engine/scripts/generate-palette.mjs src/generatedPalette.ts"
   },
   "dependencies": {
-    "@kbach/core-engine": "1.0.0-beta.6"
+    "@kbach/core-engine": "1.0.0-beta.8"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",