@kbach/react 0.5.16 → 0.5.18

package/dist/{chunk-SHQPNCQ7.mjs → chunk-SOBLKZGE.mjs}

@@ -3222,11 +3222,16 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "gridRowStart",
   "gridRowEnd"
 ]);
+var RN_SHORTHAND_EXPAND = {
+  marginHorizontal: ["margin-left", "margin-right"],
+  marginVertical: ["margin-top", "margin-bottom"],
+  paddingHorizontal: ["padding-left", "padding-right"],
+  paddingVertical: ["padding-top", "padding-bottom"]
+};
 function styleValueToCSS(styles, forceImportant = false) {
-  return Object.entries(styles).filter(
-    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
-  ).map(([prop, val]) => {
-    const cssProp = camelToKebab(prop);
+  const parts = [];
+  for (const [prop, val] of Object.entries(styles)) {
+    if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
       cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
@@ -3234,8 +3239,15 @@ function styleValueToCSS(styles, forceImportant = false) {
       cssVal = String(val);
     }
     const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
-    return `${cssProp}: ${cssVal}${imp}`;
-  }).join("; ");
+    if (prop in RN_SHORTHAND_EXPAND) {
+      const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
+      parts.push(`${p1}: ${cssVal}${imp}`);
+      parts.push(`${p2}: ${cssVal}${imp}`);
+      continue;
+    }
+    parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
+  }
+  return parts.join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();

package/dist/{chunk-HTPCUYNH.mjs → chunk-VZD4672I.mjs}

@@ -3,7 +3,7 @@ import {
   InteractiveWrapper,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-RMZIFMWE.mjs";
+} from "./chunk-X6FH5QTD.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -11,7 +11,7 @@ import {
   getDefaultFontFamily,
   isWeb,
   resolve
-} from "./chunk-SHQPNCQ7.mjs";
+} from "./chunk-SOBLKZGE.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-RMZIFMWE.mjs → chunk-X6FH5QTD.mjs}

@@ -4,7 +4,7 @@ import {
   getGlobalWidth,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-SHQPNCQ7.mjs";
+} from "./chunk-SOBLKZGE.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";

package/dist/index.js

@@ -3342,11 +3342,16 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "gridRowStart",
   "gridRowEnd"
 ]);
+var RN_SHORTHAND_EXPAND = {
+  marginHorizontal: ["margin-left", "margin-right"],
+  marginVertical: ["margin-top", "margin-bottom"],
+  paddingHorizontal: ["padding-left", "padding-right"],
+  paddingVertical: ["padding-top", "padding-bottom"]
+};
 function styleValueToCSS(styles, forceImportant = false) {
-  return Object.entries(styles).filter(
-    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
-  ).map(([prop, val]) => {
-    const cssProp = camelToKebab(prop);
+  const parts = [];
+  for (const [prop, val] of Object.entries(styles)) {
+    if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
       cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
@@ -3354,8 +3359,15 @@ function styleValueToCSS(styles, forceImportant = false) {
       cssVal = String(val);
     }
     const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
-    return `${cssProp}: ${cssVal}${imp}`;
-  }).join("; ");
+    if (prop in RN_SHORTHAND_EXPAND) {
+      const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
+      parts.push(`${p1}: ${cssVal}${imp}`);
+      parts.push(`${p2}: ${cssVal}${imp}`);
+      continue;
+    }
+    parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
+  }
+  return parts.join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-RMZIFMWE.mjs";
+} from "./chunk-X6FH5QTD.mjs";
 import {
   __require,
   buildConfig,
@@ -25,7 +25,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-SHQPNCQ7.mjs";
+} from "./chunk-SOBLKZGE.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -3234,11 +3234,16 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "gridRowStart",
   "gridRowEnd"
 ]);
+var RN_SHORTHAND_EXPAND = {
+  marginHorizontal: ["margin-left", "margin-right"],
+  marginVertical: ["margin-top", "margin-bottom"],
+  paddingHorizontal: ["padding-left", "padding-right"],
+  paddingVertical: ["padding-top", "padding-bottom"]
+};
 function styleValueToCSS(styles, forceImportant = false) {
-  return Object.entries(styles).filter(
-    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
-  ).map(([prop, val]) => {
-    const cssProp = camelToKebab(prop);
+  const parts = [];
+  for (const [prop, val] of Object.entries(styles)) {
+    if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
       cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
@@ -3246,8 +3251,15 @@ function styleValueToCSS(styles, forceImportant = false) {
       cssVal = String(val);
     }
     const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
-    return `${cssProp}: ${cssVal}${imp}`;
-  }).join("; ");
+    if (prop in RN_SHORTHAND_EXPAND) {
+      const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
+      parts.push(`${p1}: ${cssVal}${imp}`);
+      parts.push(`${p2}: ${cssVal}${imp}`);
+      continue;
+    }
+    parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
+  }
+  return parts.join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-HTPCUYNH.mjs";
-import "./chunk-RMZIFMWE.mjs";
-import "./chunk-SHQPNCQ7.mjs";
+} from "./chunk-VZD4672I.mjs";
+import "./chunk-X6FH5QTD.mjs";
+import "./chunk-SOBLKZGE.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -3233,11 +3233,16 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "gridRowStart",
   "gridRowEnd"
 ]);
+var RN_SHORTHAND_EXPAND = {
+  marginHorizontal: ["margin-left", "margin-right"],
+  marginVertical: ["margin-top", "margin-bottom"],
+  paddingHorizontal: ["padding-left", "padding-right"],
+  paddingVertical: ["padding-top", "padding-bottom"]
+};
 function styleValueToCSS(styles, forceImportant = false) {
-  return Object.entries(styles).filter(
-    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
-  ).map(([prop, val]) => {
-    const cssProp = camelToKebab(prop);
+  const parts = [];
+  for (const [prop, val] of Object.entries(styles)) {
+    if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
       cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
@@ -3245,8 +3250,15 @@ function styleValueToCSS(styles, forceImportant = false) {
       cssVal = String(val);
     }
     const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
-    return `${cssProp}: ${cssVal}${imp}`;
-  }).join("; ");
+    if (prop in RN_SHORTHAND_EXPAND) {
+      const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
+      parts.push(`${p1}: ${cssVal}${imp}`);
+      parts.push(`${p2}: ${cssVal}${imp}`);
+      continue;
+    }
+    parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
+  }
+  return parts.join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();

package/dist/jsx-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-HTPCUYNH.mjs";
-import "./chunk-RMZIFMWE.mjs";
-import "./chunk-SHQPNCQ7.mjs";
+} from "./chunk-VZD4672I.mjs";
+import "./chunk-X6FH5QTD.mjs";
+import "./chunk-SOBLKZGE.mjs";
 export {
   Fragment,
   jsx,

package/dist/vite-plugin.d.mts

@@ -4,15 +4,15 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.mjs';
 /**
  * @kbach/react/vite
  *
- * Vite plugin that scans source files for Kbach className/kb props and
- * generates a static CSS stylesheet — no JSX runtime replacement needed.
+ * Vite plugin — scans your source files for Kbach className/kb props and
+ * appends the generated CSS to any CSS file already imported in your project.
+ *
+ * Zero setup beyond adding the plugin to vite.config.ts:
  *
- * Usage in vite.config.ts:
  *   import { kbach } from '@kbach/react/vite';
  *   plugins: [kbach()]
  *
- * Import the generated stylesheet once in your app entry (e.g. app/root.tsx):
- *   import 'virtual:kbach/styles.css';
+ * CSS is only generated for the classes you actually use (like Tailwind).
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.d.ts

@@ -4,15 +4,15 @@ import { F as FrameworkConfig } from './types-CV5vXnSH.js';
 /**
  * @kbach/react/vite
  *
- * Vite plugin that scans source files for Kbach className/kb props and
- * generates a static CSS stylesheet — no JSX runtime replacement needed.
+ * Vite plugin — scans your source files for Kbach className/kb props and
+ * appends the generated CSS to any CSS file already imported in your project.
+ *
+ * Zero setup beyond adding the plugin to vite.config.ts:
  *
- * Usage in vite.config.ts:
  *   import { kbach } from '@kbach/react/vite';
  *   plugins: [kbach()]
  *
- * Import the generated stylesheet once in your app entry (e.g. app/root.tsx):
- *   import 'virtual:kbach/styles.css';
+ * CSS is only generated for the classes you actually use (like Tailwind).
  */
 
 declare const VIRTUAL_ID = "virtual:kbach/styles.css";

package/dist/vite-plugin.js

@@ -3183,11 +3183,16 @@ var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "gridRowStart",
   "gridRowEnd"
 ]);
+var RN_SHORTHAND_EXPAND = {
+  marginHorizontal: ["margin-left", "margin-right"],
+  marginVertical: ["margin-top", "margin-bottom"],
+  paddingHorizontal: ["padding-left", "padding-right"],
+  paddingVertical: ["padding-top", "padding-bottom"]
+};
 function styleValueToCSS(styles, forceImportant = false) {
-  return Object.entries(styles).filter(
-    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
-  ).map(([prop, val]) => {
-    const cssProp = camelToKebab(prop);
+  const parts = [];
+  for (const [prop, val] of Object.entries(styles)) {
+    if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
     let cssVal;
     if (typeof val === "number") {
       cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
@@ -3195,8 +3200,15 @@ function styleValueToCSS(styles, forceImportant = false) {
       cssVal = String(val);
     }
     const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
-    return `${cssProp}: ${cssVal}${imp}`;
-  }).join("; ");
+    if (prop in RN_SHORTHAND_EXPAND) {
+      const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
+      parts.push(`${p1}: ${cssVal}${imp}`);
+      parts.push(`${p2}: ${cssVal}${imp}`);
+      continue;
+    }
+    parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
+  }
+  return parts.join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -3337,7 +3349,7 @@ var customVariants = new Proxy(
 
 // src/vite-plugin.ts
 var VIRTUAL_ID = "virtual:kbach/styles.css";
-var RESOLVED_ID = "\0" + VIRTUAL_ID;
+var RESOLVED_ID = "\0virtual:kbach/styles.css";
 function toNumericScreens(screens) {
   const out = {};
   for (const [k, v] of Object.entries(screens)) {
@@ -3382,20 +3394,23 @@ function buildGlobalCSS(theme) {
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
-  const cssMap = /* @__PURE__ */ new Map();
+  const tokenCSS = /* @__PURE__ */ new Map();
+  const processedCSSFiles = /* @__PURE__ */ new Set();
   let root = process.cwd();
-  let isDev = false;
+  let server = null;
   function processClassString(classStr) {
-    if (cssMap.has(classStr)) return;
-    cssMap.set(classStr, generateClassCSS(classStr, cfg.theme, cfg.darkMode, screens));
+    let added = false;
+    for (const token of classStr.split(/\s+/).filter(Boolean)) {
+      if (tokenCSS.has(token)) continue;
+      tokenCSS.set(token, generateClassCSS(token, cfg.theme, cfg.darkMode, screens));
+      added = true;
+    }
+    return added;
   }
   function extractFromCode(code) {
     let added = false;
     for (const cls of extractClassStrings(code)) {
-      if (!cssMap.has(cls)) {
-        processClassString(cls);
-        added = true;
-      }
+      if (processClassString(cls)) added = true;
     }
     return added;
   }
@@ -3403,22 +3418,29 @@ function kbach(userConfig) {
     const parts = [];
     const global = buildGlobalCSS(cfg.theme);
     if (global) parts.push(global);
-    for (const css of cssMap.values()) {
+    for (const css of tokenCSS.values()) {
       if (css) parts.push(css);
     }
     return parts.join("\n");
   }
+  function invalidateCSSModules() {
+    if (!server) return;
+    for (const file of processedCSSFiles) {
+      const mod = server.moduleGraph.getModuleByFile(file);
+      if (mod) server.moduleGraph.invalidateModule(mod);
+    }
+  }
   return {
     name: "kbach",
     enforce: "pre",
-    config(_c, env) {
-      isDev = env.command === "serve";
-    },
     configResolved(resolved) {
       root = resolved.root;
     },
+    configureServer(s) {
+      server = s;
+    },
     buildStart() {
-      for (const dir of ["src", "app", "pages", "components"]) {
+      for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
         scanDir((0, import_path.join)(root, dir), (code) => extractFromCode(code));
       }
     },
@@ -3429,23 +3451,24 @@ function kbach(userConfig) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
     transform(code, id) {
-      if (id.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(id)) return;
-      const added = extractFromCode(code);
-      if (isDev && added) {
+      if (id.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
+        processedCSSFiles.add(id);
+        const kbachCSS = getAllCSS();
+        if (!kbachCSS) return null;
+        return { code: code + "\n/* kbach utilities */\n" + kbachCSS, map: null };
+      }
+      if (/\.(tsx?|jsx?)$/.test(id) && !id.includes("node_modules")) {
+        const added = extractFromCode(code);
+        if (added && server && processedCSSFiles.size > 0) {
+          setTimeout(invalidateCSSModules, 0);
+        }
       }
     },
-    handleHotUpdate({ file, server }) {
+    handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
-        const code = (0, import_fs.readFileSync)(file, "utf-8");
-        const added = extractFromCode(code);
-        if (added) {
-          const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
-          if (mod) {
-            server.moduleGraph.invalidateModule(mod);
-            return [mod];
-          }
-        }
+        const added = extractFromCode((0, import_fs.readFileSync)(file, "utf-8"));
+        if (added) invalidateCSSModules();
       } catch {
       }
     }

package/dist/vite-plugin.mjs

@@ -1,13 +1,13 @@
 import {
   buildConfig,
   generateClassCSS
-} from "./chunk-SHQPNCQ7.mjs";
+} from "./chunk-SOBLKZGE.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, readdirSync, statSync } from "fs";
 import { join } from "path";
 var VIRTUAL_ID = "virtual:kbach/styles.css";
-var RESOLVED_ID = "\0" + VIRTUAL_ID;
+var RESOLVED_ID = "\0virtual:kbach/styles.css";
 function toNumericScreens(screens) {
   const out = {};
   for (const [k, v] of Object.entries(screens)) {
@@ -52,20 +52,23 @@ function buildGlobalCSS(theme) {
 function kbach(userConfig) {
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
-  const cssMap = /* @__PURE__ */ new Map();
+  const tokenCSS = /* @__PURE__ */ new Map();
+  const processedCSSFiles = /* @__PURE__ */ new Set();
   let root = process.cwd();
-  let isDev = false;
+  let server = null;
   function processClassString(classStr) {
-    if (cssMap.has(classStr)) return;
-    cssMap.set(classStr, generateClassCSS(classStr, cfg.theme, cfg.darkMode, screens));
+    let added = false;
+    for (const token of classStr.split(/\s+/).filter(Boolean)) {
+      if (tokenCSS.has(token)) continue;
+      tokenCSS.set(token, generateClassCSS(token, cfg.theme, cfg.darkMode, screens));
+      added = true;
+    }
+    return added;
   }
   function extractFromCode(code) {
     let added = false;
     for (const cls of extractClassStrings(code)) {
-      if (!cssMap.has(cls)) {
-        processClassString(cls);
-        added = true;
-      }
+      if (processClassString(cls)) added = true;
     }
     return added;
   }
@@ -73,22 +76,29 @@ function kbach(userConfig) {
     const parts = [];
     const global = buildGlobalCSS(cfg.theme);
     if (global) parts.push(global);
-    for (const css of cssMap.values()) {
+    for (const css of tokenCSS.values()) {
       if (css) parts.push(css);
     }
     return parts.join("\n");
   }
+  function invalidateCSSModules() {
+    if (!server) return;
+    for (const file of processedCSSFiles) {
+      const mod = server.moduleGraph.getModuleByFile(file);
+      if (mod) server.moduleGraph.invalidateModule(mod);
+    }
+  }
   return {
     name: "kbach",
     enforce: "pre",
-    config(_c, env) {
-      isDev = env.command === "serve";
-    },
     configResolved(resolved) {
       root = resolved.root;
     },
+    configureServer(s) {
+      server = s;
+    },
     buildStart() {
-      for (const dir of ["src", "app", "pages", "components"]) {
+      for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
         scanDir(join(root, dir), (code) => extractFromCode(code));
       }
     },
@@ -99,23 +109,24 @@ function kbach(userConfig) {
       if (id === RESOLVED_ID) return getAllCSS();
     },
     transform(code, id) {
-      if (id.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(id)) return;
-      const added = extractFromCode(code);
-      if (isDev && added) {
+      if (id.endsWith(".css") && !id.includes("node_modules") && !id.includes("\0")) {
+        processedCSSFiles.add(id);
+        const kbachCSS = getAllCSS();
+        if (!kbachCSS) return null;
+        return { code: code + "\n/* kbach utilities */\n" + kbachCSS, map: null };
+      }
+      if (/\.(tsx?|jsx?)$/.test(id) && !id.includes("node_modules")) {
+        const added = extractFromCode(code);
+        if (added && server && processedCSSFiles.size > 0) {
+          setTimeout(invalidateCSSModules, 0);
+        }
       }
     },
-    handleHotUpdate({ file, server }) {
+    handleHotUpdate({ file }) {
       if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
       try {
-        const code = readFileSync(file, "utf-8");
-        const added = extractFromCode(code);
-        if (added) {
-          const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
-          if (mod) {
-            server.moduleGraph.invalidateModule(mod);
-            return [mod];
-          }
-        }
+        const added = extractFromCode(readFileSync(file, "utf-8"));
+        if (added) invalidateCSSModules();
       } catch {
       }
     }

package/package.json

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