@kbach/react 0.5.17 → 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.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();
@@ -3382,14 +3394,18 @@ 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 server = null;
   function processClassString(classStr) {
-    if (cssMap.has(classStr)) return false;
-    cssMap.set(classStr, generateClassCSS(classStr, cfg.theme, cfg.darkMode, screens));
-    return true;
+    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;
@@ -3402,7 +3418,7 @@ 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");

package/dist/vite-plugin.mjs

@@ -1,7 +1,7 @@
 import {
   buildConfig,
   generateClassCSS
-} from "./chunk-SHQPNCQ7.mjs";
+} from "./chunk-SOBLKZGE.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, readdirSync, statSync } from "fs";
@@ -52,14 +52,18 @@ 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 server = null;
   function processClassString(classStr) {
-    if (cssMap.has(classStr)) return false;
-    cssMap.set(classStr, generateClassCSS(classStr, cfg.theme, cfg.darkMode, screens));
-    return true;
+    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;
@@ -72,7 +76,7 @@ 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");

package/package.json

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