@kbach/react-native 1.0.0-beta.11 → 1.0.0-beta.13

package/dist/index.js

@@ -1095,6 +1095,36 @@ function lookupHex(theme, key) {
   const entry = theme.colors[key];
   return typeof entry === "string" ? entry : null;
 }
+function hexToRgb(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function splitOpacity(value) {
+  const slash = value.lastIndexOf("/");
+  if (slash === -1) return [value, null];
+  const opacityText = value.slice(slash + 1);
+  const n = Number(opacityText);
+  if (opacityText !== "" && Number.isInteger(n) && n >= 0 && n <= 100) {
+    return [value.slice(0, slash), n];
+  }
+  return [value, null];
+}
+function colorValue(theme, parsed) {
+  const value = parsed.value;
+  if (value === null) return null;
+  if (parsed.isArbitrary) return value;
+  const [name, opacity] = splitOpacity(value);
+  const hex = lookupHex(theme, name);
+  if (hex === null) return null;
+  if (opacity === null) return hex;
+  const rgb = hexToRgb(hex);
+  if (rgb === null) return hex;
+  return `rgba(${rgb.join(",")},${opacity / 100})`;
+}
 
 // src/jsEngine/resolvers/border.ts
 function radiusSize(key) {
@@ -1154,8 +1184,8 @@ function borderValue(theme, parsed) {
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
     return [decl("border-style", value)];
   }
-  const hex = lookupHex(theme, value);
-  return hex === null ? null : [decl("border-color", hex)];
+  const color = colorValue(theme, parsed);
+  return color === null ? null : [decl("border-color", color)];
 }
 function borderSideValue(theme, parsed, sideProperty) {
   const value = parsed.value;
@@ -1168,8 +1198,8 @@ function borderSideValue(theme, parsed, sideProperty) {
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
     return [decl(`${sideProperty}-style`, value)];
   }
-  const hex = lookupHex(theme, value);
-  return hex === null ? null : [decl(`${sideProperty}-color`, hex)];
+  const color = colorValue(theme, parsed);
+  return color === null ? null : [decl(`${sideProperty}-color`, color)];
 }
 function borderAxisValue(theme, parsed, sideA, sideB) {
   const value = parsed.value;
@@ -1182,8 +1212,8 @@ function borderAxisValue(theme, parsed, sideA, sideB) {
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
     return [decl(`${sideA}-style`, value), decl(`${sideB}-style`, value)];
   }
-  const hex = lookupHex(theme, value);
-  return hex === null ? null : [decl(`${sideA}-color`, hex), decl(`${sideB}-color`, hex)];
+  const color = colorValue(theme, parsed);
+  return color === null ? null : [decl(`${sideA}-color`, color), decl(`${sideB}-color`, color)];
 }
 function radiusProperties(side) {
   switch (side) {
@@ -1245,8 +1275,8 @@ function outlineValue(theme, parsed) {
   const w = outlineWidthValue(value);
   if (w !== null) return [decl("outline-width", w)];
   if (OUTLINE_STYLES.includes(value)) return [decl("outline-style", value)];
-  const hex = lookupHex(theme, value);
-  return hex === null ? null : [decl("outline-color", hex)];
+  const color = colorValue(theme, parsed);
+  return color === null ? null : [decl("outline-color", color)];
 }
 function outlineOffsetValue(parsed) {
   const value = parsed.value;
@@ -1282,7 +1312,7 @@ function ringValue(theme, parsed) {
     const w = ringWidth(value);
     if (w !== null) return [decl("--kb-ring-width", w), decl("box-shadow", RING_BOX_SHADOW)];
   }
-  const color = parsed.isArbitrary ? value : lookupHex(theme, value);
+  const color = colorValue(theme, parsed);
   if (color === null) return null;
   return [decl("--kb-ring-color", color), decl("box-shadow", RING_BOX_SHADOW)];
 }
@@ -1293,7 +1323,7 @@ function ringOffsetValue(theme, parsed) {
     const w = ringWidth(value);
     if (w !== null) return [decl("--kb-ring-offset-width", w), decl("box-shadow", RING_BOX_SHADOW)];
   }
-  const color = parsed.isArbitrary ? value : lookupHex(theme, value);
+  const color = colorValue(theme, parsed);
   if (color === null) return null;
   return [decl("--kb-ring-offset-color", color), decl("box-shadow", RING_BOX_SHADOW)];
 }
@@ -1500,9 +1530,7 @@ function resolveLeadingTrackingNative(parsed) {
   return null;
 }
 function nativeHexColor(parsed, theme) {
-  const value = parsed.value;
-  if (value === null) return null;
-  return parsed.isArbitrary ? value : lookupHex(theme, value);
+  return colorValue(theme, parsed);
 }
 function resolveTextNative(parsed, theme) {
   if (!parsed.isArbitrary && parsed.value !== null) {

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
 } from "./chunk-TDWBXJH5.mjs";
 import {
   resolveStyle
-} from "./chunk-XHL653X2.mjs";
+} from "./chunk-JMNJCPGK.mjs";
 import {
   getGlobalDarkMode,
   getGlobalThemeMode,