@kbach/react 0.6.7 → 0.6.8

package/dist/{chunk-LXOMVLQI.mjs → chunk-ELFAWQI6.mjs}

@@ -791,6 +791,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1237,7 +1244,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1254,10 +1262,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2807,7 +2816,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     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`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/{chunk-5YN6PIXQ.mjs → chunk-HOWJ3U6D.mjs}

@@ -23,7 +23,7 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-LXOMVLQI.mjs";
+} from "./chunk-ELFAWQI6.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.js

@@ -910,6 +910,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1356,7 +1363,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1373,10 +1381,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2885,7 +2894,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     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`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/index.mjs

@@ -36,7 +36,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-LXOMVLQI.mjs";
+} from "./chunk-ELFAWQI6.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -869,6 +869,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1315,7 +1322,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1332,10 +1340,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2829,7 +2838,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     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`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-5YN6PIXQ.mjs";
-import "./chunk-LXOMVLQI.mjs";
+} from "./chunk-HOWJ3U6D.mjs";
+import "./chunk-ELFAWQI6.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -870,6 +870,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1316,7 +1323,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1333,10 +1341,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2830,7 +2839,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     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`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-5YN6PIXQ.mjs";
+} from "./chunk-HOWJ3U6D.mjs";
 import {
   registerWebElement
-} from "./chunk-LXOMVLQI.mjs";
+} from "./chunk-ELFAWQI6.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -701,6 +701,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1147,7 +1154,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1164,10 +1172,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2732,7 +2741,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     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`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/dist/vite-plugin.mjs

@@ -667,6 +667,13 @@ function hexToRgba(hex, alpha) {
   const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
@@ -1113,7 +1120,8 @@ var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
     const color = resolveColor(value, colors, isArbitrary);
-    return color ? { backgroundColor: color } : null;
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
   },
   "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1130,10 +1138,11 @@ var RESOLVERS = {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
         return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
-      return { color: value };
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
     const color = resolveColor(value, colors, false);
-    return color ? { color } : null;
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
   "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2698,7 +2707,8 @@ function styleValueToCSS(styles, forceImportant = false) {
     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`;
+      const isCustomProp = prop.startsWith("--");
+      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
     } else {
       cssVal = String(val);
     }

package/package.json

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