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

package/dist/index.web.mjs

@@ -5,6 +5,9 @@ import {
   useColors,
   useTheme
 } from "./chunk-TDWBXJH5.mjs";
+import {
+  resolveClassName
+} from "./chunk-3LNPXJEW.mjs";
 import {
   getGlobalDarkMode,
   getGlobalThemeMode,
@@ -12,9 +15,6 @@ import {
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
 } from "./chunk-RBJXE32L.mjs";
-import {
-  resolveClassName
-} from "./chunk-H5Z24XX5.mjs";
 import {
   defaultTheme,
   getTheme,

package/dist/jsx-dev-runtime.js

@@ -28,53 +28,10 @@ module.exports = __toCommonJS(jsx_dev_runtime_exports);
 // src/jsxRuntimeCore.ts
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react_native = require("react-native");
-function makeElement(isStaticChildren, type, props, key) {
-  return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
-}
-function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed) {
-  const resolved = resolveStyle2(classStrRaw, pressed);
-  if (userStyle === void 0) {
-    return resolved;
-  }
-  if (typeof userStyle === "function") {
-    return [resolved, userStyle({ pressed })];
-  }
-  return [resolved, userStyle];
-}
-function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
-  if (type === null || typeof type === "symbol" || !rawProps) {
-    return makeElement(isStaticChildren, type, rawProps ?? {}, key);
-  }
-  const { className: classStrRaw, style: userStyle, ...rest } = rawProps;
-  if (typeof classStrRaw !== "string") {
-    return makeElement(isStaticChildren, type, rawProps, key);
-  }
-  const finalStyle = type === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
-  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
-}
-function createJsxFunctions(resolveStyle2) {
-  function jsx2(type, props, key) {
-    return processElement(resolveStyle2, type, props, key, false);
-  }
-  function jsxs2(type, props, key) {
-    return processElement(resolveStyle2, type, props, key, true);
-  }
-  return { jsx: jsx2, jsxs: jsxs2 };
-}
-function createJsxDEV(jsx2, jsxs2) {
-  return function jsxDEV2(type, props, key, isStaticChildren, source, self) {
-    const element = (isStaticChildren ? jsxs2 : jsx2)(type, props, key);
-    if (source && element && typeof element === "object" && Object.isExtensible(element)) {
-      element._source = source;
-      element._self = self;
-    }
-    return element;
-  };
-}
+var import_react_native2 = require("react-native");
 
-// src/nativeBridge.ts
-var import_react_native3 = require("react-native");
+// src/darkModeStore.ts
+var import_react_native = require("react-native");
 
 // src/generatedPalette.ts
 var PALETTE = {
@@ -434,10 +391,9 @@ function getThemeJson() {
 }
 
 // src/darkModeStore.ts
-var import_react_native2 = require("react-native");
 var listeners = /* @__PURE__ */ new Set();
 function systemPrefersDark() {
-  return import_react_native2.Appearance.getColorScheme() === "dark";
+  return import_react_native.Appearance.getColorScheme() === "dark";
 }
 function resolveIsDark(m) {
   return m === "system" ? systemPrefersDark() : m === "dark";
@@ -456,7 +412,7 @@ function applyToDom(dark) {
 var mode = "system";
 var isDark = resolveIsDark(mode);
 applyToDom(isDark);
-var subscription = import_react_native2.Appearance.addChangeListener(({ colorScheme }) => {
+var subscription = import_react_native.Appearance.addChangeListener(({ colorScheme }) => {
   if (mode !== "system") return;
   isDark = colorScheme === "dark";
   applyToDom(isDark);
@@ -469,6 +425,60 @@ function getGlobalDarkMode() {
   return isDark;
 }
 
+// src/jsxRuntimeCore.ts
+function makeElement(isStaticChildren, type, props, key) {
+  return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
+}
+function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed) {
+  const resolved = resolveStyle2(classStrRaw, pressed);
+  if (userStyle === void 0) {
+    return resolved;
+  }
+  if (typeof userStyle === "function") {
+    return [resolved, userStyle({ pressed })];
+  }
+  return [resolved, userStyle];
+}
+var DARK_MODIFIER_RE = /(^|\s)dark:/;
+function darkModeKeySuffix(classStrRaw) {
+  return DARK_MODIFIER_RE.test(classStrRaw) ? `:kb-dark-${getGlobalDarkMode()}` : "";
+}
+function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
+  if (type === null || typeof type === "symbol" || !rawProps) {
+    return makeElement(isStaticChildren, type, rawProps ?? {}, key);
+  }
+  const { className: classStrRaw, style: userStyle, ...rest } = rawProps;
+  if (typeof classStrRaw !== "string") {
+    return makeElement(isStaticChildren, type, rawProps, key);
+  }
+  const finalStyle = type === import_react_native2.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
+  const suffix = darkModeKeySuffix(classStrRaw);
+  const finalKey = suffix ? `${key ?? ""}${suffix}` : key;
+  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, finalKey);
+}
+function createJsxFunctions(resolveStyle2) {
+  function jsx2(type, props, key) {
+    return processElement(resolveStyle2, type, props, key, false);
+  }
+  function jsxs2(type, props, key) {
+    return processElement(resolveStyle2, type, props, key, true);
+  }
+  return { jsx: jsx2, jsxs: jsxs2 };
+}
+function createJsxDEV(jsx2, jsxs2) {
+  return function jsxDEV2(type, props, key, isStaticChildren, source, self) {
+    const element = (isStaticChildren ? jsxs2 : jsx2)(type, props, key);
+    if (source && element && typeof element === "object" && Object.isExtensible(element)) {
+      element._source = source;
+      element._self = self;
+    }
+    return element;
+  };
+}
+
+// src/nativeBridge.ts
+var import_react_native3 = require("react-native");
+
 // src/jsEngine/parser.ts
 var VALUE_PREFIXES = [
   "bg-opacity-",
@@ -1102,6 +1112,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) {
@@ -1507,9 +1547,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/jsx-dev-runtime.mjs

@@ -1,13 +1,13 @@
 import {
   jsx,
   jsxs
-} from "./chunk-4N7UEVQL.mjs";
-import "./chunk-XHL653X2.mjs";
-import "./chunk-RBJXE32L.mjs";
+} from "./chunk-7AIH5MXY.mjs";
+import "./chunk-MGXMALPC.mjs";
 import {
   Fragment,
   createJsxDEV
-} from "./chunk-DLIXI5OW.mjs";
+} from "./chunk-4DQXTAM3.mjs";
+import "./chunk-RBJXE32L.mjs";
 import "./chunk-HK6PDJJK.mjs";
 
 // src/jsx-dev-runtime.tsx