@kbach/react-native 1.0.0-beta.42 → 1.0.0-beta.44

package/dist/{chunk-YYCSHELO.mjs → chunk-KT6TQLWI.mjs}

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-A3PV4XGK.mjs";
+} from "./chunk-DKZM4NUU.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";

package/dist/{chunk-3AY4XSVY.mjs → chunk-UFSVFF3V.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-A3PV4XGK.mjs";
+} from "./chunk-DKZM4NUU.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.js

@@ -855,14 +855,20 @@ function findModeAwareColor(base, theme) {
   const rest = important ? base.slice(1) : base;
   for (const prefix of MODE_AWARE_COLOR_PREFIXES) {
     if (!rest.startsWith(prefix)) continue;
-    const value = rest.slice(prefix.length);
-    const entry = theme.colors[value];
+    const [name, opacity] = splitOpacity(rest.slice(prefix.length));
+    const entry = theme.colors[name];
     if (typeof entry === "object" && entry !== null) {
-      return { prefix: `${important}${prefix}`, light: entry.light, dark: entry.dark };
+      return { prefix: `${important}${prefix}`, opacity, light: entry.light, dark: entry.dark };
     }
   }
   return null;
 }
+function applyOpacityToHex(hex, opacity) {
+  if (opacity === null) return hex;
+  const rgb = hexToRgb(hex);
+  if (rgb === null) return hex;
+  return `rgba(${rgb.join(",")},${opacity / 100})`;
+}
 function substituteModeAwareColorToken(token, theme, colorScheme) {
   const segments = token.split(":");
   const base = segments.pop() ?? token;
@@ -870,7 +876,7 @@ function substituteModeAwareColorToken(token, theme, colorScheme) {
   const found = findModeAwareColor(base, theme);
   if (found === null) return token;
   const hex = colorScheme === "dark" ? found.dark : found.light;
-  return `${modifierPrefix}${found.prefix}[${hex}]`;
+  return `${modifierPrefix}${found.prefix}[${applyOpacityToHex(hex, found.opacity)}]`;
 }
 function hexToRgb(hex) {
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
@@ -902,6 +908,12 @@ function colorValue(theme, parsed) {
   if (rgb === null) return hex;
   return `rgba(${rgb.join(",")},${opacity / 100})`;
 }
+var LENGTH_UNITS = ["px", "rem", "em", "%", "vh", "vw"];
+function looksLikeLength(value) {
+  const unit = LENGTH_UNITS.find((u) => value.endsWith(u));
+  const withoutUnit = unit ? value.slice(0, value.length - unit.length) : value;
+  return withoutUnit !== "" && Number.isFinite(Number(withoutUnit));
+}
 
 // src/jsEngine/resolvers/border.ts
 function radiusSize(key) {
@@ -952,7 +964,9 @@ function borderValue(theme, parsed) {
     if (value === "separate") return [decl("border-collapse", "separate")];
   }
   if (parsed.isArbitrary) {
-    return [decl("border-width", value)];
+    if (looksLikeLength(value)) return [decl("border-width", value)];
+    const color2 = colorValue(theme, parsed);
+    return color2 === null ? null : [decl("border-color", color2)];
   }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
     const v = resolveLength(theme, parsed);
@@ -967,7 +981,11 @@ function borderValue(theme, parsed) {
 function borderSideValue(theme, parsed, sideProperty) {
   const value = parsed.value;
   if (value === null) return null;
-  if (parsed.isArbitrary) return [decl(`${sideProperty}-width`, value)];
+  if (parsed.isArbitrary) {
+    if (looksLikeLength(value)) return [decl(`${sideProperty}-width`, value)];
+    const color2 = colorValue(theme, parsed);
+    return color2 === null ? null : [decl(`${sideProperty}-color`, color2)];
+  }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
     const v = resolveLength(theme, parsed);
     return v === null ? null : [decl(`${sideProperty}-width`, v)];
@@ -981,7 +999,11 @@ function borderSideValue(theme, parsed, sideProperty) {
 function borderAxisValue(theme, parsed, sideA, sideB) {
   const value = parsed.value;
   if (value === null) return null;
-  if (parsed.isArbitrary) return [decl(`${sideA}-width`, value), decl(`${sideB}-width`, value)];
+  if (parsed.isArbitrary) {
+    if (looksLikeLength(value)) return [decl(`${sideA}-width`, value), decl(`${sideB}-width`, value)];
+    const color2 = colorValue(theme, parsed);
+    return color2 === null ? null : [decl(`${sideA}-color`, color2), decl(`${sideB}-color`, color2)];
+  }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
     const v = resolveLength(theme, parsed);
     return v === null ? null : [decl(`${sideA}-width`, v), decl(`${sideB}-width`, v)];
@@ -1048,7 +1070,11 @@ function outlineWidthValue(key) {
 function outlineValue(theme, parsed) {
   const value = parsed.value;
   if (value === null) return null;
-  if (parsed.isArbitrary) return [decl("outline-width", value)];
+  if (parsed.isArbitrary) {
+    if (looksLikeLength(value)) return [decl("outline-width", value)];
+    const color2 = colorValue(theme, parsed);
+    return color2 === null ? null : [decl("outline-color", color2)];
+  }
   const w = outlineWidthValue(value);
   if (w !== null) return [decl("outline-width", w)];
   if (OUTLINE_STYLES.includes(value)) return [decl("outline-style", value)];
@@ -1885,7 +1911,7 @@ function parseHexRgb(hex) {
   const n = parseInt(h, 16);
   return [n >> 16 & 255, n >> 8 & 255, n & 255];
 }
-function applyOpacityToHex(hex, opacityText) {
+function applyOpacityToHex2(hex, opacityText) {
   const rgb = parseHexRgb(hex);
   if (!rgb) return hex;
   const a = Number(opacityText) / 100;
@@ -1898,7 +1924,7 @@ function resolveColorEntry(value, lookup) {
   const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
   const base = lookup(name);
   if (base === void 0) return value;
-  return opacity === void 0 ? base : applyOpacityToHex(base, opacity);
+  return opacity === void 0 ? base : applyOpacityToHex2(base, opacity);
 }
 function resolveColors(extend, existing) {
   const { dark: darkExtend, ...lightExtend } = extend;