@kbach/react 0.5.42 → 0.5.43

package/dist/{chunk-AAPA3CRV.mjs → chunk-4NTWFAHW.mjs}

@@ -4,7 +4,7 @@ import {
   hasResponsiveBuckets,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-GOQNOKFN.mjs";
+} from "./chunk-SX43SDOD.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -16,7 +16,7 @@ import {
   isNative,
   normalizeClassString,
   resolve
-} from "./chunk-VCNP57PR.mjs";
+} from "./chunk-IBAKFGFG.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-VCNP57PR.mjs → chunk-IBAKFGFG.mjs}

@@ -2351,6 +2351,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2916,7 +2920,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -2940,7 +2944,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {

package/dist/{chunk-GOQNOKFN.mjs → chunk-SX43SDOD.mjs}

@@ -6,7 +6,7 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-VCNP57PR.mjs";
+} from "./chunk-IBAKFGFG.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";

package/dist/index.js

@@ -2521,6 +2521,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -3036,7 +3040,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -3060,7 +3064,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-GOQNOKFN.mjs";
+} from "./chunk-SX43SDOD.mjs";
 import {
   __require,
   buildConfig,
@@ -28,7 +28,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-VCNP57PR.mjs";
+} from "./chunk-IBAKFGFG.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -2422,6 +2422,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2918,7 +2922,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -2942,7 +2946,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-AAPA3CRV.mjs";
-import "./chunk-GOQNOKFN.mjs";
-import "./chunk-VCNP57PR.mjs";
+} from "./chunk-4NTWFAHW.mjs";
+import "./chunk-SX43SDOD.mjs";
+import "./chunk-IBAKFGFG.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -2422,6 +2422,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2918,7 +2922,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -2942,7 +2946,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {

package/dist/jsx-runtime.mjs

@@ -3,9 +3,9 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-AAPA3CRV.mjs";
-import "./chunk-GOQNOKFN.mjs";
-import "./chunk-VCNP57PR.mjs";
+} from "./chunk-4NTWFAHW.mjs";
+import "./chunk-SX43SDOD.mjs";
+import "./chunk-IBAKFGFG.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -2345,6 +2345,10 @@ function parseClass(className) {
     const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
   if (getBuiltinStandaloneNames().has(remaining)) {
     return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
   }
@@ -2742,7 +2746,7 @@ function buildConfig(userConfig) {
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
   }
-  const rawSans = theme.fontFamily.sans;
+  const rawSans = theme.fontFamily?.sans;
   const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
   setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
   injectGlobalStyles(resolved.theme);
@@ -2766,7 +2770,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
+      customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -2822,9 +2827,9 @@ var GROUPS = [
   ["Effects", /^(shadow|opacity|blur|brightness|contrast|grayscale|transition|duration|ease|delay|animate|scale|rotate|translate|transform|cursor|pointer|select-)/]
 ];
 var GROUP_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borders", "Effects", "Utilities", "Dark Mode", "Responsive"];
-function classifyToken(token) {
+function classifyToken(token, responsiveRe) {
   if (/^dark:/.test(token)) return "Dark Mode";
-  if (/^(sm|md|lg|xl|2xl):/.test(token)) return "Responsive";
+  if (responsiveRe.test(token)) return "Responsive";
   const base = token.replace(/^(hover|focus|active|group-hover|peer-hover):/, "");
   for (const [label, re] of GROUPS) {
     if (re.test(base)) return label;
@@ -2849,7 +2854,7 @@ function buildColorVarMap(theme, usedCSS) {
   }
   return map;
 }
-function formatKbachCSS(tokenCSS, theme) {
+function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
   function applyVars(css) {
@@ -2860,7 +2865,7 @@ function formatKbachCSS(tokenCSS, theme) {
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
   for (const [token, css] of tokenCSS) {
     if (!css) continue;
-    const label = classifyToken(token);
+    const label = classifyToken(token, responsiveRe);
     if (!groups.has(label)) groups.set(label, []);
     groups.get(label).push(applyVars(css));
   }
@@ -2889,16 +2894,50 @@ function buildThemeGlobal(theme) {
   const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
   return `body { font-family: ${family}; }`;
 }
-function findMainCSSFile(root) {
-  for (const c of [
-    (0, import_path.join)(root, "app", "app.css"),
-    (0, import_path.join)(root, "src", "index.css"),
-    (0, import_path.join)(root, "src", "app.css"),
-    (0, import_path.join)(root, "app", "index.css")
-  ]) {
-    if ((0, import_fs.existsSync)(c)) return c;
+var SKIP_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  "out",
+  ".next",
+  ".nuxt",
+  ".output",
+  ".git",
+  ".svn",
+  ".cache",
+  "coverage",
+  "__pycache__"
+]);
+function findKbachCSS(root) {
+  const found = [];
+  function scan(dir, depth) {
+    if (depth > 10) return;
+    let entries;
+    try {
+      entries = (0, import_fs.readdirSync)(dir);
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.startsWith(".") || SKIP_DIRS.has(entry)) continue;
+      const full = (0, import_path.join)(dir, entry);
+      try {
+        const st = (0, import_fs.statSync)(full);
+        if (st.isDirectory()) scan(full, depth + 1);
+        else if (entry === "kbach.css") found.push(full);
+      } catch {
+      }
+    }
   }
-  return null;
+  scan(root, 0);
+  if (found.length === 0) return null;
+  found.sort((a, b) => a.split(/[\\/]/g).length - b.split(/[\\/]/g).length);
+  if (found.length > 1) {
+    console.warn(
+      "[kbach] Multiple kbach.css files found \u2014 only the shallowest will receive generated styles.\n        Remove duplicates to avoid confusion:\n" + found.map((f) => `          ${f}`).join("\n")
+    );
+  }
+  return found[0];
 }
 function writeKbachToFile(filePath, css) {
   let existing = "";
@@ -2914,7 +2953,9 @@ ${KBACH_END}`;
   const next = start !== -1 && end !== -1 ? existing.slice(0, start) + block + existing.slice(end + KBACH_END.length) : existing ? `${existing}
 
 ${block}` : block;
-  if (next !== existing) (0, import_fs.writeFileSync)(filePath, next, "utf-8");
+  if (next === existing) return false;
+  (0, import_fs.writeFileSync)(filePath, next, "utf-8");
+  return true;
 }
 function toNumericScreens(screens) {
   const out = {};
@@ -2928,11 +2969,21 @@ function extractClassStrings(code) {
   const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
   let m;
   while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
-  const exprLiteralRe = /(?:className|kb)=\{["'`]([^"'`}]+)["'`]\}/g;
-  while ((m = exprLiteralRe.exec(code)) !== null) pushTokens(m[1], found);
-  const ternaryBlockRe = /(?:className|kb)=\{([^}]{1,500})\}/g;
-  while ((m = ternaryBlockRe.exec(code)) !== null) {
-    const block = m[1];
+  const jsxExprRe = /(?:className|kb)=\{/g;
+  while ((m = jsxExprRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "{") depth++;
+      else if (ch === "}") {
+        if (--depth === 0) break;
+      }
+      block += ch;
+      i++;
+    }
+    jsxExprRe.lastIndex = i + 1;
     const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
     for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
   }
@@ -2955,23 +3006,31 @@ function pushTokens(str, into) {
   }
 }
 function scanDir(dir, onFile) {
+  let entries;
   try {
-    for (const entry of (0, import_fs.readdirSync)(dir)) {
-      if (entry.startsWith(".") || entry === "node_modules") continue;
-      const full = (0, import_path.join)(dir, entry);
-      try {
-        const st = (0, import_fs.statSync)(full);
-        if (st.isDirectory()) scanDir(full, onFile);
-        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, (0, import_fs.readFileSync)(full, "utf-8"));
-      } catch {
-      }
+    entries = (0, import_fs.readdirSync)(dir);
+  } catch (err) {
+    console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || entry === "node_modules") continue;
+    const full = (0, import_path.join)(dir, entry);
+    try {
+      const st = (0, import_fs.statSync)(full);
+      if (st.isDirectory()) scanDir(full, onFile);
+      else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, (0, import_fs.readFileSync)(full, "utf-8"));
+    } catch (err) {
+      console.warn(`[kbach] Cannot process ${full}:`, err.message);
     }
-  } catch {
   }
 }
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
+  const screenKeys = Object.keys(cfg.theme.screens ?? {});
+  const responsivePattern = screenKeys.length ? screenKeys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") : "sm|md|lg|xl|2xl";
+  const responsiveRe = new RegExp(`^(${responsivePattern}):`);
   let root = process.cwd();
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
@@ -3005,7 +3064,7 @@ function kbach(userConfig) {
     }
   }
   function generateCSS() {
-    return formatKbachCSS(buildTokenCSSView(), cfg.theme);
+    return formatKbachCSS(buildTokenCSSView(), cfg.theme, responsiveRe);
   }
   return {
     name: "kbach",
@@ -3014,18 +3073,26 @@ function kbach(userConfig) {
       root = resolved.root;
     },
     buildStart() {
-      mainCSSFile = findMainCSSFile(root);
+      mainCSSFile = findKbachCSS(root);
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
-    handleHotUpdate({ file }) {
+    handleHotUpdate({ file, server }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         processFile(file, (0, import_fs.readFileSync)(file, "utf-8"));
       } catch {
         fileTokens.delete(normPath(file));
       }
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
+      const active = /* @__PURE__ */ new Set();
+      for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+      for (const tok of tokenCSS.keys()) {
+        if (!active.has(tok)) tokenCSS.delete(tok);
+      }
+      if (mainCSSFile) {
+        const changed = writeKbachToFile(mainCSSFile, generateCSS());
+        if (changed) server.watcher.emit("change", mainCSSFile);
+      }
     }
   };
 }

package/dist/vite-plugin.mjs

@@ -3,10 +3,10 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-VCNP57PR.mjs";
+} from "./chunk-IBAKFGFG.mjs";
 
 // src/vite-plugin.ts
-import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from "fs";
+import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
 import { join } from "path";
 function normPath(p) {
   const fwd = p.replace(/\\/g, "/");
@@ -25,9 +25,9 @@ var GROUPS = [
   ["Effects", /^(shadow|opacity|blur|brightness|contrast|grayscale|transition|duration|ease|delay|animate|scale|rotate|translate|transform|cursor|pointer|select-)/]
 ];
 var GROUP_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borders", "Effects", "Utilities", "Dark Mode", "Responsive"];
-function classifyToken(token) {
+function classifyToken(token, responsiveRe) {
   if (/^dark:/.test(token)) return "Dark Mode";
-  if (/^(sm|md|lg|xl|2xl):/.test(token)) return "Responsive";
+  if (responsiveRe.test(token)) return "Responsive";
   const base = token.replace(/^(hover|focus|active|group-hover|peer-hover):/, "");
   for (const [label, re] of GROUPS) {
     if (re.test(base)) return label;
@@ -52,7 +52,7 @@ function buildColorVarMap(theme, usedCSS) {
   }
   return map;
 }
-function formatKbachCSS(tokenCSS, theme) {
+function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
   function applyVars(css) {
@@ -63,7 +63,7 @@ function formatKbachCSS(tokenCSS, theme) {
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
   for (const [token, css] of tokenCSS) {
     if (!css) continue;
-    const label = classifyToken(token);
+    const label = classifyToken(token, responsiveRe);
     if (!groups.has(label)) groups.set(label, []);
     groups.get(label).push(applyVars(css));
   }
@@ -92,16 +92,50 @@ function buildThemeGlobal(theme) {
   const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
   return `body { font-family: ${family}; }`;
 }
-function findMainCSSFile(root) {
-  for (const c of [
-    join(root, "app", "app.css"),
-    join(root, "src", "index.css"),
-    join(root, "src", "app.css"),
-    join(root, "app", "index.css")
-  ]) {
-    if (existsSync(c)) return c;
-  }
-  return null;
+var SKIP_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  "out",
+  ".next",
+  ".nuxt",
+  ".output",
+  ".git",
+  ".svn",
+  ".cache",
+  "coverage",
+  "__pycache__"
+]);
+function findKbachCSS(root) {
+  const found = [];
+  function scan(dir, depth) {
+    if (depth > 10) return;
+    let entries;
+    try {
+      entries = readdirSync(dir);
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.startsWith(".") || SKIP_DIRS.has(entry)) continue;
+      const full = join(dir, entry);
+      try {
+        const st = statSync(full);
+        if (st.isDirectory()) scan(full, depth + 1);
+        else if (entry === "kbach.css") found.push(full);
+      } catch {
+      }
+    }
+  }
+  scan(root, 0);
+  if (found.length === 0) return null;
+  found.sort((a, b) => a.split(/[\\/]/g).length - b.split(/[\\/]/g).length);
+  if (found.length > 1) {
+    console.warn(
+      "[kbach] Multiple kbach.css files found \u2014 only the shallowest will receive generated styles.\n        Remove duplicates to avoid confusion:\n" + found.map((f) => `          ${f}`).join("\n")
+    );
+  }
+  return found[0];
 }
 function writeKbachToFile(filePath, css) {
   let existing = "";
@@ -117,7 +151,9 @@ ${KBACH_END}`;
   const next = start !== -1 && end !== -1 ? existing.slice(0, start) + block + existing.slice(end + KBACH_END.length) : existing ? `${existing}
 
 ${block}` : block;
-  if (next !== existing) writeFileSync(filePath, next, "utf-8");
+  if (next === existing) return false;
+  writeFileSync(filePath, next, "utf-8");
+  return true;
 }
 function toNumericScreens(screens) {
   const out = {};
@@ -131,11 +167,21 @@ function extractClassStrings(code) {
   const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
   let m;
   while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
-  const exprLiteralRe = /(?:className|kb)=\{["'`]([^"'`}]+)["'`]\}/g;
-  while ((m = exprLiteralRe.exec(code)) !== null) pushTokens(m[1], found);
-  const ternaryBlockRe = /(?:className|kb)=\{([^}]{1,500})\}/g;
-  while ((m = ternaryBlockRe.exec(code)) !== null) {
-    const block = m[1];
+  const jsxExprRe = /(?:className|kb)=\{/g;
+  while ((m = jsxExprRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "{") depth++;
+      else if (ch === "}") {
+        if (--depth === 0) break;
+      }
+      block += ch;
+      i++;
+    }
+    jsxExprRe.lastIndex = i + 1;
     const innerStrings = block.match(/["'`]([^"'`]{1,300})["'`]/g) ?? [];
     for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
   }
@@ -158,23 +204,31 @@ function pushTokens(str, into) {
   }
 }
 function scanDir(dir, onFile) {
+  let entries;
   try {
-    for (const entry of readdirSync(dir)) {
-      if (entry.startsWith(".") || entry === "node_modules") continue;
-      const full = join(dir, entry);
-      try {
-        const st = statSync(full);
-        if (st.isDirectory()) scanDir(full, onFile);
-        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, readFileSync(full, "utf-8"));
-      } catch {
-      }
+    entries = readdirSync(dir);
+  } catch (err) {
+    console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || entry === "node_modules") continue;
+    const full = join(dir, entry);
+    try {
+      const st = statSync(full);
+      if (st.isDirectory()) scanDir(full, onFile);
+      else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, readFileSync(full, "utf-8"));
+    } catch (err) {
+      console.warn(`[kbach] Cannot process ${full}:`, err.message);
     }
-  } catch {
   }
 }
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
+  const screenKeys = Object.keys(cfg.theme.screens ?? {});
+  const responsivePattern = screenKeys.length ? screenKeys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") : "sm|md|lg|xl|2xl";
+  const responsiveRe = new RegExp(`^(${responsivePattern}):`);
   let root = process.cwd();
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
@@ -208,7 +262,7 @@ function kbach(userConfig) {
     }
   }
   function generateCSS() {
-    return formatKbachCSS(buildTokenCSSView(), cfg.theme);
+    return formatKbachCSS(buildTokenCSSView(), cfg.theme, responsiveRe);
   }
   return {
     name: "kbach",
@@ -217,18 +271,26 @@ function kbach(userConfig) {
       root = resolved.root;
     },
     buildStart() {
-      mainCSSFile = findMainCSSFile(root);
+      mainCSSFile = findKbachCSS(root);
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
-    handleHotUpdate({ file }) {
+    handleHotUpdate({ file, server }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         processFile(file, readFileSync(file, "utf-8"));
       } catch {
         fileTokens.delete(normPath(file));
       }
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
+      const active = /* @__PURE__ */ new Set();
+      for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+      for (const tok of tokenCSS.keys()) {
+        if (!active.has(tok)) tokenCSS.delete(tok);
+      }
+      if (mainCSSFile) {
+        const changed = writeKbachToFile(mainCSSFile, generateCSS());
+        if (changed) server.watcher.emit("change", mainCSSFile);
+      }
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.5.42",
+  "version": "0.5.43",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -54,7 +54,7 @@
     "vitest": "^1.0.0"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
+    "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "vite": ">=4.0.0"
   },