@kbach/react 1.0.0-beta.16 → 1.0.0-beta.18

package/dist/index.d.mts

@@ -145,4 +145,52 @@ type ColorsAPI = {
  */
 declare function useColors(): ColorsAPI;
 
-export { type ColorScale, type ColorsAPI, KbachReset, type ThemeMode, ThemeProvider, type ThemeProviderProps, type ThemeState, disableRuntimeCSS, getGlobalDarkMode, getGlobalThemeMode, initKbach, isKbachReady, isRuntimeCSSDisabled, kb, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode, useColors, useTheme };
+/**
+ * A tiny class-name composer — combine strings, arrays, and objects (with
+ * boolean values) into one space-separated className, skipping anything
+ * falsy. Matches the widely-used `clsx` npm package's public API and
+ * behavior exactly (a from-scratch reimplementation, not a fork or a thin
+ * wrapper around it) — this package ships its own copy so using it adds
+ * zero runtime dependencies, and so it works identically whether or not
+ * `clsx`/`classnames` happens to already be installed.
+ *
+ * Kbach class strings never NEED this — a Kbach `className` is just a
+ * plain string, composable with plain JS (`"bg-" + color + "-6"`,
+ * `[base, active && "opacity-100"].join(" ")`, see this package's own
+ * README) with no special API required. This exists purely as an
+ * ergonomic convenience for the common "several conditional classes on one
+ * element" shape, for anyone who'd rather write it declaratively:
+ *
+ * ```ts
+ * clsx("px-4 py-2", isActive && "bg-blue-6", { "opacity-50": disabled });
+ * // "px-4 py-2 bg-blue-6" (when isActive is true and disabled is false)
+ * ```
+ *
+ * The static build-time scanner (vite-plugin/postcss-plugin) already
+ * recognizes `clsx(...)` call sites (alongside `cn`/`classnames`/`cx`/
+ * `kb`) and extracts every string literal inside them on its own — using
+ * this function needs no extra plugin configuration to keep working with
+ * the static CSS build.
+ *
+ * Identical to `@kbach/react-native`'s own `clsx.ts` — deliberately
+ * duplicated rather than factored into a shared package, since this is
+ * genuinely all there is to it and a whole extra published package for one
+ * ~20-line function would be more ceremony than the thing itself.
+ */
+/** Anything `clsx` accepts as one argument — recursively, for arrays. */
+type ClassValue = ClassArray | ClassDictionary | string | number | bigint | boolean | null | undefined;
+/** A key is kept (as a literal class name) only when its value is truthy — `{ "opacity-50": disabled }`. */
+interface ClassDictionary {
+    [className: string]: unknown;
+}
+type ClassArray = ClassValue[];
+/**
+ * Joins every truthy piece across all arguments with a single space,
+ * skipping falsy values (`false`, `null`, `undefined`, `0`, `""`, `NaN`)
+ * entirely — they contribute nothing, not even an extra space. Arrays are
+ * flattened (recursively, to any depth); a plain object keeps only the
+ * keys whose value is truthy.
+ */
+declare function clsx(...inputs: ClassValue[]): string;
+
+export { type ClassArray, type ClassDictionary, type ClassValue, type ColorScale, type ColorsAPI, KbachReset, type ThemeMode, ThemeProvider, type ThemeProviderProps, type ThemeState, clsx, disableRuntimeCSS, getGlobalDarkMode, getGlobalThemeMode, initKbach, isKbachReady, isRuntimeCSSDisabled, kb, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode, useColors, useTheme };

package/dist/index.d.ts

@@ -145,4 +145,52 @@ type ColorsAPI = {
  */
 declare function useColors(): ColorsAPI;
 
-export { type ColorScale, type ColorsAPI, KbachReset, type ThemeMode, ThemeProvider, type ThemeProviderProps, type ThemeState, disableRuntimeCSS, getGlobalDarkMode, getGlobalThemeMode, initKbach, isKbachReady, isRuntimeCSSDisabled, kb, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode, useColors, useTheme };
+/**
+ * A tiny class-name composer — combine strings, arrays, and objects (with
+ * boolean values) into one space-separated className, skipping anything
+ * falsy. Matches the widely-used `clsx` npm package's public API and
+ * behavior exactly (a from-scratch reimplementation, not a fork or a thin
+ * wrapper around it) — this package ships its own copy so using it adds
+ * zero runtime dependencies, and so it works identically whether or not
+ * `clsx`/`classnames` happens to already be installed.
+ *
+ * Kbach class strings never NEED this — a Kbach `className` is just a
+ * plain string, composable with plain JS (`"bg-" + color + "-6"`,
+ * `[base, active && "opacity-100"].join(" ")`, see this package's own
+ * README) with no special API required. This exists purely as an
+ * ergonomic convenience for the common "several conditional classes on one
+ * element" shape, for anyone who'd rather write it declaratively:
+ *
+ * ```ts
+ * clsx("px-4 py-2", isActive && "bg-blue-6", { "opacity-50": disabled });
+ * // "px-4 py-2 bg-blue-6" (when isActive is true and disabled is false)
+ * ```
+ *
+ * The static build-time scanner (vite-plugin/postcss-plugin) already
+ * recognizes `clsx(...)` call sites (alongside `cn`/`classnames`/`cx`/
+ * `kb`) and extracts every string literal inside them on its own — using
+ * this function needs no extra plugin configuration to keep working with
+ * the static CSS build.
+ *
+ * Identical to `@kbach/react-native`'s own `clsx.ts` — deliberately
+ * duplicated rather than factored into a shared package, since this is
+ * genuinely all there is to it and a whole extra published package for one
+ * ~20-line function would be more ceremony than the thing itself.
+ */
+/** Anything `clsx` accepts as one argument — recursively, for arrays. */
+type ClassValue = ClassArray | ClassDictionary | string | number | bigint | boolean | null | undefined;
+/** A key is kept (as a literal class name) only when its value is truthy — `{ "opacity-50": disabled }`. */
+interface ClassDictionary {
+    [className: string]: unknown;
+}
+type ClassArray = ClassValue[];
+/**
+ * Joins every truthy piece across all arguments with a single space,
+ * skipping falsy values (`false`, `null`, `undefined`, `0`, `""`, `NaN`)
+ * entirely — they contribute nothing, not even an extra space. Arrays are
+ * flattened (recursively, to any depth); a plain object keeps only the
+ * keys whose value is truthy.
+ */
+declare function clsx(...inputs: ClassValue[]): string;
+
+export { type ClassArray, type ClassDictionary, type ClassValue, type ColorScale, type ColorsAPI, KbachReset, type ThemeMode, ThemeProvider, type ThemeProviderProps, type ThemeState, clsx, disableRuntimeCSS, getGlobalDarkMode, getGlobalThemeMode, initKbach, isKbachReady, isRuntimeCSSDisabled, kb, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode, useColors, useTheme };

package/dist/index.js

@@ -33,6 +33,7 @@ __export(src_exports, {
   KbachReset: () => KbachReset,
   ThemeProvider: () => ThemeProvider,
   applyKbachConfig: () => applyKbachConfig,
+  clsx: () => clsx,
   defaultTheme: () => defaultTheme,
   disableRuntimeCSS: () => disableRuntimeCSS,
   getGlobalDarkMode: () => getGlobalDarkMode,
@@ -70,7 +71,7 @@ function isKbachReady() {
 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);
@@ -846,7 +847,9 @@ function ThemeProvider({ children, defaultMode = "system" }) {
     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 () => {
@@ -926,11 +929,38 @@ function useColors() {
   ensureColorVariablesInjected(theme);
   return (0, import_react3.useMemo)(() => makeColorsProxy(theme, isDark2), [theme, isDark2]);
 }
+
+// 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 "";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   KbachReset,
   ThemeProvider,
   applyKbachConfig,
+  clsx,
   defaultTheme,
   disableRuntimeCSS,
   getGlobalDarkMode,

package/dist/index.mjs

@@ -4,7 +4,7 @@ import {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb
-} from "./chunk-KJY3W4GF.mjs";
+} from "./chunk-BJEOK2VK.mjs";
 import {
   applyKbachConfig,
   ensureColorVariablesInjected,
@@ -54,7 +54,9 @@ function ThemeProvider({ children, defaultMode = "system" }) {
     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 () => {
@@ -134,10 +136,37 @@ function useColors() {
   ensureColorVariablesInjected(theme);
   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);

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-D7OC2AE7.mjs";
-import "./chunk-KJY3W4GF.mjs";
+} from "./chunk-5EXGGZMA.mjs";
+import "./chunk-BJEOK2VK.mjs";
 import "./chunk-OVKVZA7B.mjs";
 
 // src/jsx-dev-runtime.tsx

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);

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-D7OC2AE7.mjs";
-import "./chunk-KJY3W4GF.mjs";
+} from "./chunk-5EXGGZMA.mjs";
+import "./chunk-BJEOK2VK.mjs";
 import "./chunk-OVKVZA7B.mjs";
 export {
   Fragment,

package/dist/postcss-plugin.js

@@ -485,8 +485,8 @@ function formatKbachCSS(tokenRules, theme, usedTags) {
 
 // src/vite-plugin/unknownClassWarnings.ts
 var import_path2 = require("path");
-var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
-var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
+
+// src/terminalWarn.ts
 var useColor = !!process.stdout?.isTTY && !process.env.NO_COLOR;
 var paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
 var green = (s) => paint("32", s);
@@ -494,9 +494,14 @@ var blue = (s) => paint("34", s);
 var white = (s) => paint("97", s);
 var gray = (s) => paint("90", s);
 var bold = (s) => paint("1", s);
-var ARROW = () => green("\u2192");
-var TAG = () => bold(green("[kbach]"));
 var highlight = (s) => bold(white(s));
+function kbachTag() {
+  return `${green("\u2192")} ${bold(green("[Kbach]"))}`;
+}
+
+// src/vite-plugin/unknownClassWarnings.ts
+var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
+var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
 function findLineCol(code, needle) {
   const index = code.indexOf(needle);
   if (index === -1) return null;
@@ -526,15 +531,21 @@ function stripModifierPrefix(token) {
   return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
 }
 var MARKER_CLASSES = /* @__PURE__ */ new Set(["group", "peer"]);
+function isMarkerClass(base) {
+  if (MARKER_CLASSES.has(base)) return true;
+  const slashIdx = base.lastIndexOf("/");
+  if (slashIdx === -1) return false;
+  return MARKER_CLASSES.has(base.slice(0, slashIdx)) && slashIdx < base.length - 1;
+}
 function warnIfUnknownClass(token, filePath, code, isResolvable, projectCssClasses, warnedTokens) {
   if (isResolvable || warnedTokens.has(token)) return;
   const base = stripModifierPrefix(token);
-  if (!base || projectCssClasses.has(base) || MARKER_CLASSES.has(base)) return;
+  if (!base || projectCssClasses.has(base) || isMarkerClass(base)) return;
   warnedTokens.add(token);
   const pos = findLineCol(code, token);
   const location = pos ? `${blue(filePath)}${green(`:${pos.line}:${pos.column}`)}` : blue(filePath);
   console.warn(
-    `${ARROW()} ${TAG()} ${gray("Unknown class")} ${highlight(token)} ${gray("\u2014 no Kbach utility or project CSS rule matches it. Typo?")}
+    `${kbachTag()} ${gray("Unknown class")} ${highlight(token)} ${gray("\u2014 no Kbach utility or project CSS rule matches it. Typo?")}
   ${bold("at")} ${location}`
   );
 }
@@ -1174,7 +1185,8 @@ function spliceGeneratedCss(root, generatedCss) {
   }
   if (startIdx === -1 || endIdx === -1) {
     console.warn(
-      `[kbach] postcss plugin: no "/* kbach:start */" / "/* kbach:end */" marker pair found \u2014 add both to the file this plugin processes (see @kbach/react/vite's own convention). Nothing was generated.`
+      `${kbachTag()} ${gray("No")} ${highlight("/* kbach:start */")}${gray(" / ")}${highlight("/* kbach:end */")} ${gray("marker pair found in this file \u2014 nothing was generated.")}
+  ${bold("fix:")} ${gray("add both markers to the file this plugin processes (same convention the Vite plugin's generated kbach.css uses).")}`
     );
     return;
   }

package/dist/postcss-plugin.mjs

@@ -1,8 +1,12 @@
 import {
   DEFAULT_SCAN_DIRS,
+  bold,
   createKbachStaticCssEngine,
+  gray,
+  highlight,
+  kbachTag,
   resolveEffectiveTheme
-} from "./chunk-XV2ZLURB.mjs";
+} from "./chunk-MGPV3PS6.mjs";
 import "./chunk-OWWJ2PME.mjs";
 import "./chunk-OVKVZA7B.mjs";
 
@@ -30,7 +34,8 @@ function spliceGeneratedCss(root, generatedCss) {
   }
   if (startIdx === -1 || endIdx === -1) {
     console.warn(
-      `[kbach] postcss plugin: no "/* kbach:start */" / "/* kbach:end */" marker pair found \u2014 add both to the file this plugin processes (see @kbach/react/vite's own convention). Nothing was generated.`
+      `${kbachTag()} ${gray("No")} ${highlight("/* kbach:start */")}${gray(" / ")}${highlight("/* kbach:end */")} ${gray("marker pair found in this file \u2014 nothing was generated.")}
+  ${bold("fix:")} ${gray("add both markers to the file this plugin processes (same convention the Vite plugin's generated kbach.css uses).")}`
     );
     return;
   }