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

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

@@ -1,11 +1,15 @@
 import {
-  getGlobalDarkMode
+  getGlobalDarkMode,
+  subscribeGlobalDarkMode
 } from "./chunk-RBJXE32L.mjs";
+import {
+  getTheme
+} from "./chunk-HK6PDJJK.mjs";
 
 // src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { Pressable } from "react-native";
+import { Fragment, useSyncExternalStore } from "react";
+import { Pressable, useWindowDimensions } from "react-native";
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
 }
@@ -20,9 +24,37 @@ function resolvedStyleFor(resolveStyle, classStrRaw, userStyle, pressed) {
   return [resolved, userStyle];
 }
 var DARK_MODIFIER_RE = /(^|\s)dark:/;
+var BREAKPOINT_MODIFIER_RE = /(^|\s)(sm|md|lg|xl|2xl):/;
+var BREAKPOINT_MODIFIER_MATCH_RE = /(?:^|\s)(sm|md|lg|xl|2xl):/g;
 function darkModeKeySuffix(classStrRaw) {
   return DARK_MODIFIER_RE.test(classStrRaw) ? `:kb-dark-${getGlobalDarkMode()}` : "";
 }
+function breakpointKeySuffix(classStrRaw, width) {
+  const matches = classStrRaw.match(BREAKPOINT_MODIFIER_MATCH_RE);
+  if (!matches) {
+    return "";
+  }
+  const screens = getTheme().screens;
+  const present = Array.from(new Set(matches.map((m) => m.trim().slice(0, -1))));
+  const state = present.map((name) => screens[name] !== void 0 && width >= screens[name] ? "1" : "0").join("");
+  return `:kb-bp-${state}`;
+}
+function ReactiveElement({
+  hostType,
+  hostRest,
+  classStrRaw,
+  userStyle,
+  resolveStyle,
+  elementKey,
+  isStaticChildren
+}) {
+  useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const { width } = useWindowDimensions();
+  const finalStyle = hostType === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
+  const suffix = darkModeKeySuffix(classStrRaw) + breakpointKeySuffix(classStrRaw, width);
+  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 +63,15 @@ function processElement(resolveStyle, type, rawProps, key, isStaticChildren) {
   if (typeof classStrRaw !== "string") {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
+  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw)) {
+    return _jsx(
+      ReactiveElement,
+      { 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-GU6DH6UE.mjs → chunk-UNZ6PQVO.mjs}

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

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

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

package/dist/darkModeStore.js

@@ -0,0 +1,112 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/darkModeStore.ts
+var darkModeStore_exports = {};
+__export(darkModeStore_exports, {
+  _resetForTests: () => _resetForTests,
+  _unsubscribeForTests: () => _unsubscribeForTests,
+  getGlobalDarkMode: () => getGlobalDarkMode,
+  getGlobalThemeMode: () => getGlobalThemeMode,
+  seedDefaultMode: () => seedDefaultMode,
+  setGlobalThemeMode: () => setGlobalThemeMode,
+  subscribeGlobalDarkMode: () => subscribeGlobalDarkMode,
+  toggleGlobalDarkMode: () => toggleGlobalDarkMode
+});
+module.exports = __toCommonJS(darkModeStore_exports);
+var import_react_native = require("react-native");
+var import_theme = require("./theme");
+var listeners = /* @__PURE__ */ new Set();
+function systemPrefersDark() {
+  return import_react_native.Appearance.getColorScheme() === "dark";
+}
+function resolveIsDark(m) {
+  return m === "system" ? systemPrefersDark() : m === "dark";
+}
+function applyToDom(dark) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const strategy = (0, import_theme.getTheme)().darkMode;
+  if (strategy === "class") {
+    root.classList.toggle("dark", dark);
+    root.classList.toggle("light", !dark);
+  } else if (strategy === "attribute") {
+    root.setAttribute("data-theme", dark ? "dark" : "light");
+  }
+}
+var mode = "system";
+var isDark = resolveIsDark(mode);
+applyToDom(isDark);
+var hasExplicitChoice = false;
+var subscription = import_react_native.Appearance.addChangeListener(({ colorScheme }) => {
+  if (mode !== "system") return;
+  isDark = colorScheme === "dark";
+  applyToDom(isDark);
+  notify();
+});
+function notify() {
+  for (const listener of listeners) listener();
+}
+function getGlobalDarkMode() {
+  return isDark;
+}
+function getGlobalThemeMode() {
+  return mode;
+}
+function setGlobalThemeMode(nextMode) {
+  mode = nextMode;
+  isDark = resolveIsDark(nextMode);
+  hasExplicitChoice = true;
+  applyToDom(isDark);
+  notify();
+}
+function toggleGlobalDarkMode() {
+  setGlobalThemeMode(isDark ? "light" : "dark");
+}
+function subscribeGlobalDarkMode(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function seedDefaultMode(fallback) {
+  if (hasExplicitChoice || mode === fallback) return;
+  mode = fallback;
+  isDark = resolveIsDark(fallback);
+  applyToDom(isDark);
+  notify();
+}
+function _resetForTests() {
+  mode = "system";
+  isDark = resolveIsDark(mode);
+  hasExplicitChoice = false;
+  listeners.clear();
+}
+function _unsubscribeForTests() {
+  subscription.remove();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  _resetForTests,
+  _unsubscribeForTests,
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  seedDefaultMode,
+  setGlobalThemeMode,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+});