@kbach/react 0.2.7 → 0.2.8

package/dist/{chunk-LYGD2GSW.mjs → chunk-GN4JPJHC.mjs}

@@ -1797,7 +1797,10 @@ function getStyleEl() {
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.add(rule);
-  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  try {
+    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  } catch {
+  }
 }
 function injectClassRule(cls, bucketKey, styles, darkMode) {
   const cssDecls = styleValueToCSS(styles);
@@ -1826,8 +1829,41 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
   }
   injectRule(rule);
 }
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight"
+]);
 function styleValueToCSS(styles) {
-  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null && typeof v !== "object").map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+  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);
+    let cssVal;
+    if (typeof val === "number") {
+      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+    } else {
+      cssVal = String(val);
+    }
+    return `${cssProp}: ${cssVal}`;
+  }).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();

package/dist/{chunk-QMJ4XUJA.mjs → chunk-YDKLJFFY.mjs}

@@ -5,7 +5,7 @@ import {
   isWeb,
   resolve,
   useGlobalDarkMode
-} from "./chunk-LYGD2GSW.mjs";
+} from "./chunk-GN4JPJHC.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";

package/dist/index.js

@@ -1861,7 +1861,10 @@ function getStyleEl() {
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.add(rule);
-  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  try {
+    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  } catch {
+  }
 }
 function injectClassRule(cls, bucketKey, styles, darkMode) {
   const cssDecls = styleValueToCSS(styles);
@@ -1890,8 +1893,41 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
   }
   injectRule(rule);
 }
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight"
+]);
 function styleValueToCSS(styles) {
-  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null && typeof v !== "object").map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+  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);
+    let cssVal;
+    if (typeof val === "number") {
+      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+    } else {
+      cssVal = String(val);
+    }
+    return `${cssProp}: ${cssVal}`;
+  }).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
   syncGlobalDarkMode,
   updateConfig,
   useGlobalDarkMode
-} from "./chunk-LYGD2GSW.mjs";
+} from "./chunk-GN4JPJHC.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -1830,7 +1830,10 @@ function getStyleEl() {
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.add(rule);
-  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  try {
+    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  } catch {
+  }
 }
 function injectClassRule(cls, bucketKey, styles, darkMode) {
   const cssDecls = styleValueToCSS(styles);
@@ -1859,8 +1862,41 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
   }
   injectRule(rule);
 }
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight"
+]);
 function styleValueToCSS(styles) {
-  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null && typeof v !== "object").map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+  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);
+    let cssVal;
+    if (typeof val === "number") {
+      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+    } else {
+      cssVal = String(val);
+    }
+    return `${cssProp}: ${cssVal}`;
+  }).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-QMJ4XUJA.mjs";
-import "./chunk-LYGD2GSW.mjs";
+} from "./chunk-YDKLJFFY.mjs";
+import "./chunk-GN4JPJHC.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -1829,7 +1829,10 @@ function getStyleEl() {
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.add(rule);
-  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  try {
+    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  } catch {
+  }
 }
 function injectClassRule(cls, bucketKey, styles, darkMode) {
   const cssDecls = styleValueToCSS(styles);
@@ -1858,8 +1861,41 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
   }
   injectRule(rule);
 }
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight"
+]);
 function styleValueToCSS(styles) {
-  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null && typeof v !== "object").map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+  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);
+    let cssVal;
+    if (typeof val === "number") {
+      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+    } else {
+      cssVal = String(val);
+    }
+    return `${cssProp}: ${cssVal}`;
+  }).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-QMJ4XUJA.mjs";
-import "./chunk-LYGD2GSW.mjs";
+} from "./chunk-YDKLJFFY.mjs";
+import "./chunk-GN4JPJHC.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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