@kbach/react-native 1.0.0-beta.12 → 1.0.0-beta.14

package/dist/{chunk-OJIFXMLD.mjs → chunk-6QFPLRSP.mjs}

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

package/dist/{chunk-4DQXTAM3.mjs → chunk-H57O3BJO.mjs}

@@ -1,10 +1,11 @@
 import {
-  getGlobalDarkMode
+  getGlobalDarkMode,
+  subscribeGlobalDarkMode
 } from "./chunk-RBJXE32L.mjs";
 
 // src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment, useSyncExternalStore } from "react";
 import { Pressable } from "react-native";
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
@@ -23,6 +24,21 @@ var DARK_MODIFIER_RE = /(^|\s)dark:/;
 function darkModeKeySuffix(classStrRaw) {
   return DARK_MODIFIER_RE.test(classStrRaw) ? `:kb-dark-${getGlobalDarkMode()}` : "";
 }
+function DarkAwareElement({
+  hostType,
+  hostRest,
+  classStrRaw,
+  userStyle,
+  resolveStyle,
+  elementKey,
+  isStaticChildren
+}) {
+  useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const finalStyle = hostType === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
+  const suffix = darkModeKeySuffix(classStrRaw);
+  const finalKey = suffix ? `${elementKey ?? ""}${suffix}` : elementKey;
+  return makeElement(isStaticChildren, hostType, { ...hostRest, style: finalStyle }, finalKey);
+}
 function processElement(resolveStyle, type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol" || !rawProps) {
     return makeElement(isStaticChildren, type, rawProps ?? {}, key);
@@ -31,10 +47,15 @@ function processElement(resolveStyle, type, rawProps, key, isStaticChildren) {
   if (typeof classStrRaw !== "string") {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
+  if (DARK_MODIFIER_RE.test(classStrRaw)) {
+    return _jsx(
+      DarkAwareElement,
+      { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle, elementKey: key, isStaticChildren },
+      key
+    );
+  }
   const finalStyle = type === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
-  const suffix = darkModeKeySuffix(classStrRaw);
-  const finalKey = suffix ? `${key ?? ""}${suffix}` : key;
-  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, finalKey);
+  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
 }
 function createJsxFunctions(resolveStyle) {
   function jsx(type, props, key) {

package/dist/{chunk-MGXMALPC.mjs → chunk-JMNJCPGK.mjs}

@@ -731,8 +731,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;
@@ -745,8 +745,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;
@@ -759,8 +759,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) {
@@ -822,8 +822,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;
@@ -859,7 +859,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)];
 }
@@ -870,7 +870,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)];
 }

package/dist/{chunk-7AIH5MXY.mjs → chunk-WT6WH54F.mjs}

@@ -1,9 +1,9 @@
 import {
   resolveStyle
-} from "./chunk-MGXMALPC.mjs";
+} from "./chunk-JMNJCPGK.mjs";
 import {
   createJsxFunctions
-} from "./chunk-4DQXTAM3.mjs";
+} from "./chunk-H57O3BJO.mjs";
 
 // src/jsx-runtime.tsx
 var { jsx, jsxs } = createJsxFunctions(resolveStyle);