@kbach/react 0.5.26 → 0.5.28

package/dist/vite-plugin.d.mts

@@ -1,21 +1,6 @@
 import { Plugin } from 'vite';
 import { F as FrameworkConfig } from './types-CV5vXnSH.mjs';
 
-/**
- * @kbach/react/vite
- *
- * Vite plugin — scans source files for Kbach className/kb props and generates CSS.
- * Zero setup: just add kbach() to your plugins array.
- * Only generates CSS for classes you actually use (like Tailwind).
- *
- * How it works (same as Tailwind):
- *   1. Scans your source files at startup for className/kb props
- *   2. Generates CSS rules for only those classes
- *   3. Appends them to your imported CSS file (e.g. app.css) via Vite's transform
- *   4. Vite serves the CSS through its normal pipeline → <link rel="stylesheet">
- *   5. When you add a new class in dev, the CSS file is hot-reloaded
- */
-
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";
 declare function kbach(userConfig?: FrameworkConfig): Plugin;
 

package/dist/vite-plugin.d.ts

@@ -1,21 +1,6 @@
 import { Plugin } from 'vite';
 import { F as FrameworkConfig } from './types-CV5vXnSH.js';
 
-/**
- * @kbach/react/vite
- *
- * Vite plugin — scans source files for Kbach className/kb props and generates CSS.
- * Zero setup: just add kbach() to your plugins array.
- * Only generates CSS for classes you actually use (like Tailwind).
- *
- * How it works (same as Tailwind):
- *   1. Scans your source files at startup for className/kb props
- *   2. Generates CSS rules for only those classes
- *   3. Appends them to your imported CSS file (e.g. app.css) via Vite's transform
- *   4. Vite serves the CSS through its normal pipeline → <link rel="stylesheet">
- *   5. When you add a new class in dev, the CSS file is hot-reloaded
- */
-
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";
 declare function kbach(userConfig?: FrameworkConfig): Plugin;
 

package/dist/vite-plugin.js

@@ -3352,14 +3352,89 @@ var VIRTUAL_ID = "virtual:kbach/styles.css";
 var RESOLVED_ID = "\0virtual:kbach/styles.css";
 var KBACH_START = "/* kbach:start */";
 var KBACH_END = "/* kbach:end */";
+var GROUPS = [
+  ["Layout", /^(flex(?!-\d|-auto|-none|-initial|-1)|flex-(col|row|wrap|nowrap)|grid|block|inline|hidden|table|contents|overflow|items-|justify-|self-|place-|grow|shrink|float-|clear-|static|fixed|absolute|relative|sticky|z-|top-|right-|bottom-|left-|inset|aspect)/],
+  ["Sizing", /^(w-|h-|min-w-|max-w-|min-h-|max-h-|size-|flex-1|flex-auto|flex-none|flex-initial|basis-)/],
+  ["Spacing", /^(p-|px-|py-|pt-|pb-|pl-|pr-|m-|mx-|my-|mt-|mb-|ml-|mr-|gap-|space-)/],
+  ["Typography", /^(text-(xs|sm|base|lg|\dxl)|font-|leading-|tracking-|uppercase|lowercase|capitalize|normal-case|italic|not-italic|underline|overline|line-through|no-underline|truncate|whitespace-|text-(left|center|right|justify|start|end)|list-|align-|line-clamp)/],
+  ["Colors", /^(bg-|text-|color-|fill-|stroke-|caret-|accent-)/],
+  ["Borders", /^(border|rounded|ring|outline|divide)/],
+  ["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) {
+  if (/^dark:/.test(token)) return "Dark Mode";
+  if (/^(sm|md|lg|xl|2xl):/.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;
+  }
+  return "Utilities";
+}
+function buildColorVarMap(theme, usedCSS) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [name, shades] of Object.entries(theme.colors ?? {})) {
+    const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
+    for (const [fullName, val] of entries) {
+      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val) && usedCSS.includes(val)) {
+        map.set(val, `--color-${fullName}`);
+      }
+    }
+  }
+  return map;
+}
+function formatKbachCSS(tokenCSS, theme) {
+  const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
+  const colorVars = buildColorVarMap(theme, allRaw);
+  function applyVars(css) {
+    for (const [val, varName] of colorVars) {
+      css = css.split(val).join(`var(${varName})`);
+    }
+    return css;
+  }
+  const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
+  for (const [token, css] of tokenCSS) {
+    if (!css) continue;
+    const label = classifyToken(token);
+    if (!groups.has(label)) groups.set(label, []);
+    groups.get(label).push(applyVars(css));
+  }
+  const out = ["/* Generated by Kbach \u2014 do not edit */"];
+  if (colorVars.size > 0) {
+    out.push("\n:root {");
+    for (const [val, varName] of colorVars) {
+      out.push(`  ${varName}: ${val};`);
+    }
+    out.push("}");
+  }
+  const globalCSS = buildThemeGlobal(theme);
+  if (globalCSS) {
+    out.push(`
+/* Global */
+${globalCSS}`);
+  }
+  for (const label of GROUP_ORDER) {
+    const items = groups.get(label) ?? [];
+    if (!items.length) continue;
+    out.push(`
+/* ${label} */`);
+    out.push(items.join("\n"));
+  }
+  return out.join("\n");
+}
+function buildThemeGlobal(theme) {
+  const ff = theme.fontFamily;
+  if (!ff?.sans || ff.sans === "System") return "";
+  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+  return `body { font-family: ${family}; }`;
+}
 function findMainCSSFile(root) {
-  const candidates = [
+  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")
-  ];
-  for (const c of candidates) {
+  ]) {
     if ((0, import_fs.existsSync)(c)) return c;
   }
   return null;
@@ -3393,11 +3468,8 @@ function scanDir(dir, onFile) {
       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((0, import_fs.readFileSync)(full, "utf-8"));
-        }
+        if (st.isDirectory()) scanDir(full, onFile);
+        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile((0, import_fs.readFileSync)(full, "utf-8"));
       } catch {
       }
     }
@@ -3414,12 +3486,6 @@ function extractClassStrings(code) {
   }
   return found;
 }
-function buildGlobalCSS(theme) {
-  const ff = theme.fontFamily;
-  if (!ff?.sans || ff.sans === "System") return "";
-  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-  return `body { font-family: ${family}; }`;
-}
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
@@ -3433,21 +3499,13 @@ function kbach(userConfig) {
   }
   function extractFromCode(code) {
     let added = false;
-    for (const cls of extractClassStrings(code)) {
-      for (const token of cls.split(/\s+/).filter(Boolean)) {
+    for (const cls of extractClassStrings(code))
+      for (const token of cls.split(/\s+/).filter(Boolean))
         if (processToken(token)) added = true;
-      }
-    }
     return added;
   }
-  function getAllCSS() {
-    const parts = [];
-    const global = buildGlobalCSS(cfg.theme);
-    if (global) parts.push(global);
-    for (const css of tokenCSS.values()) {
-      if (css) parts.push(css);
-    }
-    return parts.join("\n");
+  function getFormattedCSS() {
+    return formatKbachCSS(tokenCSS, cfg.theme);
   }
   return {
     name: "kbach",
@@ -3456,33 +3514,27 @@ function kbach(userConfig) {
       root = resolved.root;
     },
     buildStart() {
-      for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
+      for (const dir of ["src", "app", "pages", "components", "views", "layouts"])
         scanDir((0, import_path.join)(root, dir), (code) => extractFromCode(code));
-      }
       mainCSSFile = findMainCSSFile(root);
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
+      if (mainCSSFile) writeKbachToFile(mainCSSFile, getFormattedCSS());
     },
     transform(code, id) {
       const cleanId = id.split("?")[0];
-      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
+      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules"))
         extractFromCode(code);
-      }
     },
-    // ── Virtual module (opt-in explicit import) ───────────────────────────────
     resolveId(id) {
       if (id === VIRTUAL_ID) return RESOLVED_ID;
     },
     load(id) {
-      if (id === RESOLVED_ID) return getAllCSS();
+      if (id === RESOLVED_ID) return getFormattedCSS();
     },
-    // ── HMR: write updated CSS to file when new classes are found ────────────
-    // Vite's own file watcher detects the change and hot-reloads the CSS —
-    // no manual invalidation needed.
     handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         const added = extractFromCode((0, import_fs.readFileSync)(file, "utf-8"));
-        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
+        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getFormattedCSS());
       } catch {
       }
     }

package/dist/vite-plugin.mjs

@@ -10,14 +10,89 @@ var VIRTUAL_ID = "virtual:kbach/styles.css";
 var RESOLVED_ID = "\0virtual:kbach/styles.css";
 var KBACH_START = "/* kbach:start */";
 var KBACH_END = "/* kbach:end */";
+var GROUPS = [
+  ["Layout", /^(flex(?!-\d|-auto|-none|-initial|-1)|flex-(col|row|wrap|nowrap)|grid|block|inline|hidden|table|contents|overflow|items-|justify-|self-|place-|grow|shrink|float-|clear-|static|fixed|absolute|relative|sticky|z-|top-|right-|bottom-|left-|inset|aspect)/],
+  ["Sizing", /^(w-|h-|min-w-|max-w-|min-h-|max-h-|size-|flex-1|flex-auto|flex-none|flex-initial|basis-)/],
+  ["Spacing", /^(p-|px-|py-|pt-|pb-|pl-|pr-|m-|mx-|my-|mt-|mb-|ml-|mr-|gap-|space-)/],
+  ["Typography", /^(text-(xs|sm|base|lg|\dxl)|font-|leading-|tracking-|uppercase|lowercase|capitalize|normal-case|italic|not-italic|underline|overline|line-through|no-underline|truncate|whitespace-|text-(left|center|right|justify|start|end)|list-|align-|line-clamp)/],
+  ["Colors", /^(bg-|text-|color-|fill-|stroke-|caret-|accent-)/],
+  ["Borders", /^(border|rounded|ring|outline|divide)/],
+  ["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) {
+  if (/^dark:/.test(token)) return "Dark Mode";
+  if (/^(sm|md|lg|xl|2xl):/.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;
+  }
+  return "Utilities";
+}
+function buildColorVarMap(theme, usedCSS) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [name, shades] of Object.entries(theme.colors ?? {})) {
+    const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
+    for (const [fullName, val] of entries) {
+      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val) && usedCSS.includes(val)) {
+        map.set(val, `--color-${fullName}`);
+      }
+    }
+  }
+  return map;
+}
+function formatKbachCSS(tokenCSS, theme) {
+  const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
+  const colorVars = buildColorVarMap(theme, allRaw);
+  function applyVars(css) {
+    for (const [val, varName] of colorVars) {
+      css = css.split(val).join(`var(${varName})`);
+    }
+    return css;
+  }
+  const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
+  for (const [token, css] of tokenCSS) {
+    if (!css) continue;
+    const label = classifyToken(token);
+    if (!groups.has(label)) groups.set(label, []);
+    groups.get(label).push(applyVars(css));
+  }
+  const out = ["/* Generated by Kbach \u2014 do not edit */"];
+  if (colorVars.size > 0) {
+    out.push("\n:root {");
+    for (const [val, varName] of colorVars) {
+      out.push(`  ${varName}: ${val};`);
+    }
+    out.push("}");
+  }
+  const globalCSS = buildThemeGlobal(theme);
+  if (globalCSS) {
+    out.push(`
+/* Global */
+${globalCSS}`);
+  }
+  for (const label of GROUP_ORDER) {
+    const items = groups.get(label) ?? [];
+    if (!items.length) continue;
+    out.push(`
+/* ${label} */`);
+    out.push(items.join("\n"));
+  }
+  return out.join("\n");
+}
+function buildThemeGlobal(theme) {
+  const ff = theme.fontFamily;
+  if (!ff?.sans || ff.sans === "System") return "";
+  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+  return `body { font-family: ${family}; }`;
+}
 function findMainCSSFile(root) {
-  const candidates = [
+  for (const c of [
     join(root, "app", "app.css"),
     join(root, "src", "index.css"),
     join(root, "src", "app.css"),
     join(root, "app", "index.css")
-  ];
-  for (const c of candidates) {
+  ]) {
     if (existsSync(c)) return c;
   }
   return null;
@@ -51,11 +126,8 @@ function scanDir(dir, onFile) {
       const full = join(dir, entry);
       try {
         const st = statSync(full);
-        if (st.isDirectory()) {
-          scanDir(full, onFile);
-        } else if (/\.(tsx?|jsx?)$/.test(entry)) {
-          onFile(readFileSync(full, "utf-8"));
-        }
+        if (st.isDirectory()) scanDir(full, onFile);
+        else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(readFileSync(full, "utf-8"));
       } catch {
       }
     }
@@ -72,12 +144,6 @@ function extractClassStrings(code) {
   }
   return found;
 }
-function buildGlobalCSS(theme) {
-  const ff = theme.fontFamily;
-  if (!ff?.sans || ff.sans === "System") return "";
-  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-  return `body { font-family: ${family}; }`;
-}
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
@@ -91,21 +157,13 @@ function kbach(userConfig) {
   }
   function extractFromCode(code) {
     let added = false;
-    for (const cls of extractClassStrings(code)) {
-      for (const token of cls.split(/\s+/).filter(Boolean)) {
+    for (const cls of extractClassStrings(code))
+      for (const token of cls.split(/\s+/).filter(Boolean))
         if (processToken(token)) added = true;
-      }
-    }
     return added;
   }
-  function getAllCSS() {
-    const parts = [];
-    const global = buildGlobalCSS(cfg.theme);
-    if (global) parts.push(global);
-    for (const css of tokenCSS.values()) {
-      if (css) parts.push(css);
-    }
-    return parts.join("\n");
+  function getFormattedCSS() {
+    return formatKbachCSS(tokenCSS, cfg.theme);
   }
   return {
     name: "kbach",
@@ -114,33 +172,27 @@ function kbach(userConfig) {
       root = resolved.root;
     },
     buildStart() {
-      for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
+      for (const dir of ["src", "app", "pages", "components", "views", "layouts"])
         scanDir(join(root, dir), (code) => extractFromCode(code));
-      }
       mainCSSFile = findMainCSSFile(root);
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
+      if (mainCSSFile) writeKbachToFile(mainCSSFile, getFormattedCSS());
     },
     transform(code, id) {
       const cleanId = id.split("?")[0];
-      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules")) {
+      if (/\.(tsx?|jsx?)$/.test(cleanId) && !id.includes("node_modules"))
         extractFromCode(code);
-      }
     },
-    // ── Virtual module (opt-in explicit import) ───────────────────────────────
     resolveId(id) {
       if (id === VIRTUAL_ID) return RESOLVED_ID;
     },
     load(id) {
-      if (id === RESOLVED_ID) return getAllCSS();
+      if (id === RESOLVED_ID) return getFormattedCSS();
     },
-    // ── HMR: write updated CSS to file when new classes are found ────────────
-    // Vite's own file watcher detects the change and hot-reloads the CSS —
-    // no manual invalidation needed.
     handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         const added = extractFromCode(readFileSync(file, "utf-8"));
-        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getAllCSS());
+        if (added && mainCSSFile) writeKbachToFile(mainCSSFile, getFormattedCSS());
       } catch {
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.5.26",
+  "version": "0.5.28",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",