@kbach/react 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/index.mjs

@@ -4,20 +4,26 @@ import {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb
-} from "./chunk-ZQJKL2MV.mjs";
+} from "./chunk-BJEOK2VK.mjs";
 import {
   applyKbachConfig,
   ensureColorVariablesInjected,
+  getGlobalDarkMode,
+  getGlobalThemeMode,
   parseHexRgb,
-  resolveKbachConfig
-} from "./chunk-NKR3PSWO.mjs";
+  resolveKbachConfig,
+  seedDefaultMode,
+  setGlobalThemeMode,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+} from "./chunk-43FOLRQA.mjs";
 import {
   BASE_RESET,
   RESET_STYLE_ID,
   defaultTheme,
   getTheme,
   setTheme
-} from "./chunk-N5HCQIBB.mjs";
+} from "./chunk-OVKVZA7B.mjs";
 
 // src/KbachReset.tsx
 import { jsx } from "react/jsx-runtime";
@@ -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]
   );
 }
 
@@ -134,10 +51,12 @@ var warnedMultipleProviders = false;
 function ThemeProvider({ children, defaultMode = "system" }) {
   useEffect(() => {
     mountedProviderCount++;
-    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+    if (mountedProviderCount > 1 && !warnedMultipleProviders && process.env.NODE_ENV !== "production") {
       warnedMultipleProviders = true;
       console.warn(
-        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store useTheme() reads everywhere, not scoped per-provider, so their defaultMode seeds will fight over the same state."
+        "%c[Kbach]%c Multiple <ThemeProvider> instances are mounted at once.\nDark mode is one global store \u2014 useTheme() reads it everywhere, not scoped per provider \u2014 so their defaultMode seeds will fight over the same state.\nMount exactly one <ThemeProvider>, as high in the tree as convenient.",
+        "background:#7c3aed;color:#fff;font-weight:600;padding:1px 6px;border-radius:3px",
+        "font-weight:400"
       );
     }
     return () => {
@@ -154,6 +73,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 +86,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 +106,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) {
@@ -198,11 +118,13 @@ function makeColorsProxy(theme, isDark2) {
       }
     });
   }
-  return new Proxy({ alpha }, {
+  const get = (name) => resolveNamed(name) ?? name;
+  return new Proxy({ alpha, get }, {
     get(_, prop) {
       const key = String(prop);
       if (key === "then") return void 0;
       if (key === "alpha") return alpha;
+      if (key === "get") return get;
       const direct = resolveNamed(key);
       if (direct !== void 0) return direct;
       if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
@@ -211,15 +133,42 @@ 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]);
+}
+
+// src/clsx.ts
+function clsx(...inputs) {
+  let out = "";
+  for (const input of inputs) {
+    const piece = resolveClassValue(input);
+    if (piece) out = out ? `${out} ${piece}` : piece;
+  }
+  return out;
+}
+function resolveClassValue(value) {
+  if (!value) return "";
+  const type = typeof value;
+  if (type === "string" || type === "number" || type === "bigint") return String(value);
+  if (Array.isArray(value)) return clsx(...value);
+  if (type === "object") {
+    let out = "";
+    for (const key in value) {
+      if (Object.prototype.hasOwnProperty.call(value, key) && value[key]) {
+        out = out ? `${out} ${key}` : key;
+      }
+    }
+    return out;
+  }
+  return "";
 }
 export {
   KbachReset,
   ThemeProvider,
   applyKbachConfig,
+  clsx,
   defaultTheme,
   disableRuntimeCSS,
   getGlobalDarkMode,

package/dist/jsx-dev-runtime.js

@@ -45,7 +45,7 @@ var ready = false;
 function generateCss(classString, themeJson) {
   if (!ready) {
     throw new Error(
-      "[kbach] generateCss() was called before initKbach() resolved. Call `await initKbach()` once at startup (e.g. before rendering your app) before using kb()."
+      "[Kbach] generateCss() was called before initKbach() resolved. Call `await initKbach()` once at startup (e.g. before rendering your app) before using kb()."
     );
   }
   return (0, import_core_engine.generate_css)(classString, themeJson);
@@ -401,7 +401,19 @@ var defaultTheme = {
     serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
     mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
   },
-  darkMode: "attribute",
+  // Matches real Tailwind's own default (`darkMode: 'media'`): pure
+  // `@media (prefers-color-scheme: dark)`, works with zero JS — a project
+  // using only static `className` strings gets working `dark:` classes
+  // out of the box, with no runtime import required to write `data-theme`/
+  // `.dark` onto `<html>` (see darkModeStore.ts's `applyToDom`). The
+  // tradeoff: `'media'` can't be overridden by a manual light/dark toggle —
+  // `useTheme()`/`toggleGlobalDarkMode()` still track `isDark` correctly
+  // for JS consumers, but flipping it has no visible effect on `dark:`
+  // classes, since the browser's media query only ever reflects the real
+  // OS setting. Opt into `darkMode: 'class'` or `'attribute'` explicitly
+  // (via `kbach.config.js` or the `config`/`theme` plugin option) as soon
+  // as an app wants a real in-app toggle.
+  darkMode: "media",
   // Empty by default, matching real Tailwind's own defaults (no forced
   // centering/padding) — see `ContainerConfig`'s own doc comment.
   container: {}
@@ -536,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,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-PAJ6KHDB.mjs";
-import "./chunk-ZQJKL2MV.mjs";
-import "./chunk-N5HCQIBB.mjs";
+} from "./chunk-5EXGGZMA.mjs";
+import "./chunk-BJEOK2VK.mjs";
+import "./chunk-OVKVZA7B.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -44,7 +44,7 @@ var ready = false;
 function generateCss(classString, themeJson) {
   if (!ready) {
     throw new Error(
-      "[kbach] generateCss() was called before initKbach() resolved. Call `await initKbach()` once at startup (e.g. before rendering your app) before using kb()."
+      "[Kbach] generateCss() was called before initKbach() resolved. Call `await initKbach()` once at startup (e.g. before rendering your app) before using kb()."
     );
   }
   return (0, import_core_engine.generate_css)(classString, themeJson);
@@ -400,7 +400,19 @@ var defaultTheme = {
     serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
     mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
   },
-  darkMode: "attribute",
+  // Matches real Tailwind's own default (`darkMode: 'media'`): pure
+  // `@media (prefers-color-scheme: dark)`, works with zero JS — a project
+  // using only static `className` strings gets working `dark:` classes
+  // out of the box, with no runtime import required to write `data-theme`/
+  // `.dark` onto `<html>` (see darkModeStore.ts's `applyToDom`). The
+  // tradeoff: `'media'` can't be overridden by a manual light/dark toggle —
+  // `useTheme()`/`toggleGlobalDarkMode()` still track `isDark` correctly
+  // for JS consumers, but flipping it has no visible effect on `dark:`
+  // classes, since the browser's media query only ever reflects the real
+  // OS setting. Opt into `darkMode: 'class'` or `'attribute'` explicitly
+  // (via `kbach.config.js` or the `config`/`theme` plugin option) as soon
+  // as an app wants a real in-app toggle.
+  darkMode: "media",
   // Empty by default, matching real Tailwind's own defaults (no forced
   // centering/padding) — see `ContainerConfig`'s own doc comment.
   container: {}
@@ -535,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,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-PAJ6KHDB.mjs";
-import "./chunk-ZQJKL2MV.mjs";
-import "./chunk-N5HCQIBB.mjs";
+} from "./chunk-5EXGGZMA.mjs";
+import "./chunk-BJEOK2VK.mjs";
+import "./chunk-OVKVZA7B.mjs";
 export {
   Fragment,
   jsx,

package/dist/postcss-plugin.d.mts

@@ -0,0 +1,36 @@
+import { Plugin } from 'postcss';
+import { T as ThemeConfig, K as KbachConfig } from './config-N74_lKa0.mjs';
+
+interface KbachPostcssPluginOptions {
+    /**
+     * Project root to scan from. Defaults to `process.cwd()` — correct for
+     * the common case (PostCSS/Next.js run from the project root), but pass
+     * this explicitly if your `postcss.config.js` lives somewhere else, or
+     * from a monorepo app whose cwd differs from where `src`/`app` actually
+     * live.
+     */
+    root?: string;
+    /** Same as `KbachPluginOptions.theme` (vite-plugin/index.ts) — see its own doc comment. */
+    theme?: ThemeConfig;
+    /** Same as `KbachPluginOptions.config`. */
+    config?: KbachConfig;
+    /** Directories to scan for class strings, relative to `root`. Defaults to the same set the Vite plugin uses. */
+    include?: string[];
+    /** Same as `KbachPluginOptions.safelist`. */
+    safelist?: string[];
+}
+/**
+ * `postcss.config.js`:
+ * ```js
+ * module.exports = { plugins: { '@kbach/react/postcss': {} } };
+ * ```
+ * Processes whichever CSS file carries the `kbach:start`/`kbach:end`
+ * markers (conventionally `app/globals.css`/`src/kbach.css` — the same
+ * file you'd `@import`/reference like any other global stylesheet).
+ */
+declare function kbachPostcss(options?: KbachPostcssPluginOptions): Plugin;
+declare namespace kbachPostcss {
+    var postcss: boolean;
+}
+
+export { type KbachPostcssPluginOptions, kbachPostcss as default };

package/dist/postcss-plugin.d.ts

@@ -0,0 +1,36 @@
+import { Plugin } from 'postcss';
+import { T as ThemeConfig, K as KbachConfig } from './config-N74_lKa0.js';
+
+interface KbachPostcssPluginOptions {
+    /**
+     * Project root to scan from. Defaults to `process.cwd()` — correct for
+     * the common case (PostCSS/Next.js run from the project root), but pass
+     * this explicitly if your `postcss.config.js` lives somewhere else, or
+     * from a monorepo app whose cwd differs from where `src`/`app` actually
+     * live.
+     */
+    root?: string;
+    /** Same as `KbachPluginOptions.theme` (vite-plugin/index.ts) — see its own doc comment. */
+    theme?: ThemeConfig;
+    /** Same as `KbachPluginOptions.config`. */
+    config?: KbachConfig;
+    /** Directories to scan for class strings, relative to `root`. Defaults to the same set the Vite plugin uses. */
+    include?: string[];
+    /** Same as `KbachPluginOptions.safelist`. */
+    safelist?: string[];
+}
+/**
+ * `postcss.config.js`:
+ * ```js
+ * module.exports = { plugins: { '@kbach/react/postcss': {} } };
+ * ```
+ * Processes whichever CSS file carries the `kbach:start`/`kbach:end`
+ * markers (conventionally `app/globals.css`/`src/kbach.css` — the same
+ * file you'd `@import`/reference like any other global stylesheet).
+ */
+declare function kbachPostcss(options?: KbachPostcssPluginOptions): Plugin;
+declare namespace kbachPostcss {
+    var postcss: boolean;
+}
+
+export { type KbachPostcssPluginOptions, kbachPostcss as default };