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

package/dist/index.web.mjs

@@ -1,25 +1,182 @@
-import {
-  ThemeProvider,
-  applyKbachConfig,
-  resolveKbachConfig,
-  useColors,
-  useTheme
-} from "./chunk-TDWBXJH5.mjs";
-import {
-  resolveClassName
-} from "./chunk-ZB2UU6EO.mjs";
 import {
   getGlobalDarkMode,
   getGlobalThemeMode,
+  seedDefaultMode,
   setGlobalThemeMode,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-RBJXE32L.mjs";
+} from "./chunk-XGQWM65X.mjs";
 import {
   defaultTheme,
   getTheme,
+  resolveClassName,
   setTheme
-} from "./chunk-HK6PDJJK.mjs";
+} from "./chunk-3ED4FIO2.mjs";
+
+// src/config.ts
+function parseHexRgb(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 applyOpacityToHex(hex, opacityText) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const a = Number(opacityText) / 100;
+  const clamped = Number.isFinite(a) ? Math.min(1, Math.max(0, a)) : 1;
+  return `rgba(${rgb.join(",")},${clamped})`;
+}
+function resolveColorEntry(value, lookup) {
+  const slash = value.indexOf("/");
+  const name = slash === -1 ? value : value.slice(0, slash);
+  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);
+}
+function resolveColors(extend, existing) {
+  const resolved = {};
+  const lookup = (name) => {
+    const found = resolved[name] ?? existing[name];
+    return typeof found === "string" ? found : void 0;
+  };
+  for (const [name, value] of Object.entries(extend)) {
+    resolved[name] = resolveColorEntry(value, lookup);
+  }
+  return resolved;
+}
+function resolveKbachConfig(config) {
+  let theme = { ...defaultTheme, ...config.theme };
+  if (config.extend?.colors) {
+    theme = { ...theme, colors: { ...theme.colors, ...resolveColors(config.extend.colors, theme.colors) } };
+  }
+  if (config.extend?.spacing) {
+    theme = { ...theme, spacing: { ...theme.spacing, ...config.extend.spacing } };
+  }
+  if (config.extend?.screens) {
+    theme = { ...theme, screens: { ...theme.screens, ...config.extend.screens } };
+  }
+  if (config.extend?.fontFamily) {
+    theme = { ...theme, fontFamily: { ...theme.fontFamily, ...config.extend.fontFamily } };
+  }
+  if (config.extend?.container) {
+    theme = { ...theme, container: { ...theme.container, ...config.extend.container } };
+  }
+  if (config.darkMode) {
+    theme = { ...theme, darkMode: config.darkMode };
+  }
+  return theme;
+}
+function applyKbachConfig(config) {
+  const theme = resolveKbachConfig(config);
+  setTheme(theme);
+  return theme;
+}
+
+// src/useTheme.ts
+import { useMemo, useSyncExternalStore } from "react";
+function useTheme() {
+  const isDark = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const mode = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalThemeMode);
+  return useMemo(
+    () => ({ mode, isDark, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode, isDark]
+  );
+}
+
+// src/ThemeProvider.tsx
+import { useEffect, useRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var mountedProviderCount = 0;
+var warnedMultipleProviders = false;
+function ThemeProvider({ children, defaultMode = "system" }) {
+  useEffect(() => {
+    mountedProviderCount++;
+    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+      warnedMultipleProviders = true;
+      console.warn(
+        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store useTheme() reads everywhere, not scoped per-provider, so their defaultMode seeds will fight over the same state."
+      );
+    }
+    return () => {
+      mountedProviderCount--;
+    };
+  }, []);
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current) return;
+    seeded.current = true;
+    seedDefaultMode(defaultMode);
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+// src/useColors.ts
+function parseHexRgb2(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 applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  if (color.startsWith("#")) {
+    const rgb = parseHexRgb2(color);
+    return rgb ? `rgba(${rgb.join(",")},${a})` : color;
+  }
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
+  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
+  return color;
+}
+function resolveEntry(entry, isDark) {
+  return typeof entry === "string" ? entry : isDark ? entry.dark : entry.light;
+}
+function makeColorsProxy(theme, isDark) {
+  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
+  const cache = /* @__PURE__ */ new Map();
+  function resolveNamed(key) {
+    let name = key;
+    let opacity;
+    if (key.includes("/")) {
+      const slash = key.indexOf("/");
+      name = key.slice(0, slash);
+      opacity = Number(key.slice(slash + 1));
+    }
+    const entry = theme.colors[name];
+    if (entry === void 0) return void 0;
+    const value = resolveEntry(entry, isDark);
+    return opacity === void 0 ? value : applyOpacity(value, opacity);
+  }
+  function makeFamilyProxy(family) {
+    return new Proxy({}, {
+      get(_, prop) {
+        const key = String(prop);
+        if (key === "then") return void 0;
+        return resolveNamed(`${family}-${key}`);
+      }
+    });
+  }
+  return new Proxy({ alpha }, {
+    get(_, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key === "alpha") return alpha;
+      const direct = resolveNamed(key);
+      if (direct !== void 0) return direct;
+      if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
+      return cache.get(key);
+    }
+  });
+}
+function useColors() {
+  const { isDark } = useTheme();
+  return makeColorsProxy(getTheme(), isDark);
+}
 export {
   ThemeProvider,
   applyKbachConfig,

package/dist/jsx-dev-runtime.js

@@ -28,408 +28,9 @@ 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_native2 = require("react-native");
-
-// src/darkModeStore.ts
 var import_react_native = require("react-native");
-
-// src/generatedPalette.ts
-var PALETTE = {
-  "amber-1": "#fffbeb",
-  "amber-10": "#78350f",
-  "amber-11": "#451a03",
-  "amber-12": "#291002",
-  "amber-2": "#fef3c7",
-  "amber-3": "#fde68a",
-  "amber-4": "#fcd34d",
-  "amber-5": "#fbbf24",
-  "amber-6": "#f59e0b",
-  "amber-7": "#d97706",
-  "amber-8": "#b45309",
-  "amber-9": "#92400e",
-  "black": "#000000",
-  "blue-1": "#eff6ff",
-  "blue-10": "#1e3a8a",
-  "blue-11": "#172554",
-  "blue-12": "#0d1633",
-  "blue-2": "#dbeafe",
-  "blue-3": "#bfdbfe",
-  "blue-4": "#93c5fd",
-  "blue-5": "#60a5fa",
-  "blue-6": "#3b82f6",
-  "blue-7": "#2563eb",
-  "blue-8": "#1d4ed8",
-  "blue-9": "#1e40af",
-  "bronze": "#cd7f32",
-  "coal": "#1c1c1c",
-  "copper": "#b87333",
-  "current": "currentColor",
-  "cyan-1": "#ecfeff",
-  "cyan-10": "#164e63",
-  "cyan-11": "#083344",
-  "cyan-12": "#041e28",
-  "cyan-2": "#cffafe",
-  "cyan-3": "#a5f3fc",
-  "cyan-4": "#67e8f9",
-  "cyan-5": "#22d3ee",
-  "cyan-6": "#06b6d4",
-  "cyan-7": "#0891b2",
-  "cyan-8": "#0e7490",
-  "cyan-9": "#155e75",
-  "emerald-1": "#ecfdf5",
-  "emerald-10": "#064e3b",
-  "emerald-11": "#022c22",
-  "emerald-12": "#011a14",
-  "emerald-2": "#d1fae5",
-  "emerald-3": "#a7f3d0",
-  "emerald-4": "#6ee7b7",
-  "emerald-5": "#34d399",
-  "emerald-6": "#10b981",
-  "emerald-7": "#059669",
-  "emerald-8": "#047857",
-  "emerald-9": "#065f46",
-  "fuchsia-1": "#fdf4ff",
-  "fuchsia-10": "#701a75",
-  "fuchsia-11": "#4a044e",
-  "fuchsia-12": "#2d022f",
-  "fuchsia-2": "#fae8ff",
-  "fuchsia-3": "#f5d0fe",
-  "fuchsia-4": "#f0abfc",
-  "fuchsia-5": "#e879f9",
-  "fuchsia-6": "#d946ef",
-  "fuchsia-7": "#c026d3",
-  "fuchsia-8": "#a21caf",
-  "fuchsia-9": "#86198f",
-  "gold": "#d4af37",
-  "gray-1": "#f9fafb",
-  "gray-10": "#111827",
-  "gray-11": "#030712",
-  "gray-12": "#020409",
-  "gray-2": "#f3f4f6",
-  "gray-3": "#e5e7eb",
-  "gray-4": "#d1d5db",
-  "gray-5": "#9ca3af",
-  "gray-6": "#6b7280",
-  "gray-7": "#4b5563",
-  "gray-8": "#374151",
-  "gray-9": "#1f2937",
-  "green-1": "#f0fdf4",
-  "green-10": "#14532d",
-  "green-11": "#052e16",
-  "green-12": "#031b0d",
-  "green-2": "#dcfce7",
-  "green-3": "#bbf7d0",
-  "green-4": "#86efac",
-  "green-5": "#4ade80",
-  "green-6": "#22c55e",
-  "green-7": "#16a34a",
-  "green-8": "#15803d",
-  "green-9": "#166534",
-  "indigo-1": "#eef2ff",
-  "indigo-10": "#312e81",
-  "indigo-11": "#1e1b4b",
-  "indigo-12": "#12102d",
-  "indigo-2": "#e0e7ff",
-  "indigo-3": "#c7d2fe",
-  "indigo-4": "#a5b4fc",
-  "indigo-5": "#818cf8",
-  "indigo-6": "#6366f1",
-  "indigo-7": "#4f46e5",
-  "indigo-8": "#4338ca",
-  "indigo-9": "#3730a3",
-  "lime-1": "#f7fee7",
-  "lime-10": "#365314",
-  "lime-11": "#1a2e05",
-  "lime-12": "#0f1b03",
-  "lime-2": "#ecfccb",
-  "lime-3": "#d9f99d",
-  "lime-4": "#bef264",
-  "lime-5": "#a3e635",
-  "lime-6": "#84cc16",
-  "lime-7": "#65a30d",
-  "lime-8": "#4d7c0f",
-  "lime-9": "#3f6212",
-  "neutral-1": "#fafafa",
-  "neutral-10": "#171717",
-  "neutral-11": "#0a0a0a",
-  "neutral-12": "#050505",
-  "neutral-2": "#f5f5f5",
-  "neutral-3": "#e5e5e5",
-  "neutral-4": "#d4d4d4",
-  "neutral-5": "#a3a3a3",
-  "neutral-6": "#737373",
-  "neutral-7": "#525252",
-  "neutral-8": "#404040",
-  "neutral-9": "#262626",
-  "orange-1": "#fff7ed",
-  "orange-10": "#7c2d12",
-  "orange-11": "#431407",
-  "orange-12": "#270c04",
-  "orange-2": "#ffedd5",
-  "orange-3": "#fed7aa",
-  "orange-4": "#fdba74",
-  "orange-5": "#fb923c",
-  "orange-6": "#f97316",
-  "orange-7": "#ea580c",
-  "orange-8": "#c2410c",
-  "orange-9": "#9a3412",
-  "pink-1": "#fdf2f8",
-  "pink-10": "#831843",
-  "pink-11": "#500724",
-  "pink-12": "#300415",
-  "pink-2": "#fce7f3",
-  "pink-3": "#fbcfe8",
-  "pink-4": "#f9a8d4",
-  "pink-5": "#f472b6",
-  "pink-6": "#ec4899",
-  "pink-7": "#db2777",
-  "pink-8": "#be185d",
-  "pink-9": "#9d174d",
-  "purple-1": "#faf5ff",
-  "purple-10": "#581c87",
-  "purple-11": "#3b0764",
-  "purple-12": "#23043c",
-  "purple-2": "#f3e8ff",
-  "purple-3": "#e9d5ff",
-  "purple-4": "#d8b4fe",
-  "purple-5": "#c084fc",
-  "purple-6": "#a855f7",
-  "purple-7": "#9333ea",
-  "purple-8": "#7e22ce",
-  "purple-9": "#6b21a8",
-  "red-1": "#fef2f2",
-  "red-10": "#7f1d1d",
-  "red-11": "#450a0a",
-  "red-12": "#280606",
-  "red-2": "#fee2e2",
-  "red-3": "#fecaca",
-  "red-4": "#fca5a5",
-  "red-5": "#f87171",
-  "red-6": "#ef4444",
-  "red-7": "#dc2626",
-  "red-8": "#b91c1c",
-  "red-9": "#991b1b",
-  "rose-1": "#fff1f2",
-  "rose-10": "#881337",
-  "rose-11": "#4c0519",
-  "rose-12": "#2d030e",
-  "rose-2": "#ffe4e6",
-  "rose-3": "#fecdd3",
-  "rose-4": "#fda4af",
-  "rose-5": "#fb7185",
-  "rose-6": "#f43f5e",
-  "rose-7": "#e11d48",
-  "rose-8": "#be123c",
-  "rose-9": "#9f1239",
-  "silver": "#c0c0c0",
-  "sky-1": "#f0f9ff",
-  "sky-10": "#0c4a6e",
-  "sky-11": "#082f49",
-  "sky-12": "#041b2b",
-  "sky-2": "#e0f2fe",
-  "sky-3": "#bae6fd",
-  "sky-4": "#7dd3fc",
-  "sky-5": "#38bdf8",
-  "sky-6": "#0ea5e9",
-  "sky-7": "#0284c7",
-  "sky-8": "#0369a1",
-  "sky-9": "#075985",
-  "slate-1": "#f8fafc",
-  "slate-10": "#0f172a",
-  "slate-11": "#020617",
-  "slate-12": "#01020a",
-  "slate-2": "#f1f5f9",
-  "slate-3": "#e2e8f0",
-  "slate-4": "#cbd5e1",
-  "slate-5": "#94a3b8",
-  "slate-6": "#64748b",
-  "slate-7": "#475569",
-  "slate-8": "#334155",
-  "slate-9": "#1e293b",
-  "stone-1": "#fafaf9",
-  "stone-10": "#1c1917",
-  "stone-11": "#0c0a09",
-  "stone-12": "#070605",
-  "stone-2": "#f5f5f4",
-  "stone-3": "#e7e5e4",
-  "stone-4": "#d6d3d1",
-  "stone-5": "#a8a29e",
-  "stone-6": "#78716c",
-  "stone-7": "#57534e",
-  "stone-8": "#44403c",
-  "stone-9": "#292524",
-  "teal-1": "#f0fdfa",
-  "teal-10": "#134e4a",
-  "teal-11": "#042f2e",
-  "teal-12": "#021c1b",
-  "teal-2": "#ccfbf1",
-  "teal-3": "#99f6e4",
-  "teal-4": "#5eead4",
-  "teal-5": "#2dd4bf",
-  "teal-6": "#14b8a6",
-  "teal-7": "#0d9488",
-  "teal-8": "#0f766e",
-  "teal-9": "#115e59",
-  "transparent": "transparent",
-  "violet-1": "#f5f3ff",
-  "violet-10": "#4c1d95",
-  "violet-11": "#2e1065",
-  "violet-12": "#1c0a3d",
-  "violet-2": "#ede9fe",
-  "violet-3": "#ddd6fe",
-  "violet-4": "#c4b5fd",
-  "violet-5": "#a78bfa",
-  "violet-6": "#8b5cf6",
-  "violet-7": "#7c3aed",
-  "violet-8": "#6d28d9",
-  "violet-9": "#5b21b6",
-  "white": "#ffffff",
-  "yellow-1": "#fefce8",
-  "yellow-10": "#713f12",
-  "yellow-11": "#422006",
-  "yellow-12": "#271304",
-  "yellow-2": "#fef9c3",
-  "yellow-3": "#fef08a",
-  "yellow-4": "#fde047",
-  "yellow-5": "#facc15",
-  "yellow-6": "#eab308",
-  "yellow-7": "#ca8a04",
-  "yellow-8": "#a16207",
-  "yellow-9": "#854d0e",
-  "zinc-1": "#fafafa",
-  "zinc-10": "#18181b",
-  "zinc-11": "#09090b",
-  "zinc-12": "#050506",
-  "zinc-2": "#f4f4f5",
-  "zinc-3": "#e4e4e7",
-  "zinc-4": "#d4d4d8",
-  "zinc-5": "#a1a1aa",
-  "zinc-6": "#71717a",
-  "zinc-7": "#52525b",
-  "zinc-8": "#3f3f46",
-  "zinc-9": "#27272a"
-};
-
-// src/theme.ts
-var defaultTheme = {
-  colors: PALETTE,
-  // Real Tailwind's default spacing scale in full — every step is exactly
-  // `n * 4px`, including the fractional `.5` steps (`1.5` -> 6px, `2.5` ->
-  // 10px, `3.5` -> 14px) and the "px" literal (a bare 1px). Only the
-  // "usual stops", though — `jsEngine/shared.ts`'s `spacingPx` (and the
-  // native Rust dispatcher's own `spacing_px`) falls back to Tailwind v4's
-  // live `n * 4px` formula for any bare numeric step not listed here
-  // (`p-0.25`, `w-13`, ...), so this table names the common values and
-  // gives a theme override something to target, not the full resolvable
-  // set. Mirrors @kbach/react's theme.ts exactly.
-  spacing: {
-    "0": 0,
-    "px": 1,
-    "0.5": 2,
-    "1": 4,
-    "1.5": 6,
-    "2": 8,
-    "2.5": 10,
-    "3": 12,
-    "3.5": 14,
-    "4": 16,
-    "5": 20,
-    "6": 24,
-    "7": 28,
-    "8": 32,
-    "9": 36,
-    "10": 40,
-    "11": 44,
-    "12": 48,
-    "14": 56,
-    "16": 64,
-    "20": 80,
-    "24": 96,
-    "28": 112,
-    "32": 128,
-    "36": 144,
-    "40": 160,
-    "44": 176,
-    "48": 192,
-    "52": 208,
-    "56": 224,
-    "60": 240,
-    "64": 256,
-    "72": 288,
-    "80": 320,
-    "96": 384
-  },
-  screens: {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    "2xl": 1536
-  },
-  // Byte-for-byte the same three stacks
-  // packages/core-engine/src/resolvers/typography.rs's `font_family_value`
-  // falls back to. On native these three still effectively no-op (see
-  // `first_font_name`'s own doc comment for why a generic CSS keyword
-  // isn't a real loadable font) — only a caller-configured custom name
-  // changes native rendering; Expo Web uses the full stack as-is.
-  fontFamily: {
-    sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
-    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
-  },
-  darkMode: "attribute",
-  // Empty by default, matching real Tailwind's own defaults.
-  container: {}
-};
-var activeTheme = defaultTheme;
-var activeThemeJson = JSON.stringify(defaultTheme);
-function getTheme() {
-  return activeTheme;
-}
-function getThemeJson() {
-  return activeThemeJson;
-}
-
-// src/darkModeStore.ts
-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 = 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 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 subscribeGlobalDarkMode(listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-}
-
-// src/jsxRuntimeCore.ts
+var import_darkModeStore = require("./darkModeStore");
+var import_theme = require("./theme");
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
@@ -444,10 +45,22 @@ function resolvedStyleFor(resolveStyle2, 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()}` : "";
+  return DARK_MODIFIER_RE.test(classStrRaw) ? `:kb-dark-${(0, import_darkModeStore.getGlobalDarkMode)()}` : "";
 }
-function DarkAwareElement({
+function breakpointKeySuffix(classStrRaw, width) {
+  const matches = classStrRaw.match(BREAKPOINT_MODIFIER_MATCH_RE);
+  if (!matches) {
+    return "";
+  }
+  const screens = (0, import_theme.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,
@@ -456,9 +69,10 @@ function DarkAwareElement({
   elementKey,
   isStaticChildren
 }) {
-  (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode);
-  const finalStyle = hostType === import_react_native2.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
-  const suffix = darkModeKeySuffix(classStrRaw);
+  (0, import_react.useSyncExternalStore)(import_darkModeStore.subscribeGlobalDarkMode, import_darkModeStore.getGlobalDarkMode);
+  const { width } = (0, import_react_native.useWindowDimensions)();
+  const finalStyle = hostType === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
+  const suffix = darkModeKeySuffix(classStrRaw) + breakpointKeySuffix(classStrRaw, width);
   const finalKey = suffix ? `${elementKey ?? ""}${suffix}` : elementKey;
   return makeElement(isStaticChildren, hostType, { ...hostRest, style: finalStyle }, finalKey);
 }
@@ -470,14 +84,14 @@ function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
   if (typeof classStrRaw !== "string") {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
-  if (DARK_MODIFIER_RE.test(classStrRaw)) {
+  if (DARK_MODIFIER_RE.test(classStrRaw) || BREAKPOINT_MODIFIER_RE.test(classStrRaw)) {
     return (0, import_jsx_runtime.jsx)(
-      DarkAwareElement,
+      ReactiveElement,
       { hostType: type, hostRest: rest, classStrRaw, userStyle, resolveStyle: resolveStyle2, elementKey: key, isStaticChildren },
       key
     );
   }
-  const finalStyle = type === import_react_native2.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false);
+  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) {
@@ -501,7 +115,9 @@ function createJsxDEV(jsx2, jsxs2) {
 }
 
 // src/nativeBridge.ts
-var import_react_native3 = require("react-native");
+var import_react_native2 = require("react-native");
+var import_theme2 = require("./theme");
+var import_darkModeStore2 = require("./darkModeStore");
 
 // src/jsEngine/parser.ts
 var VALUE_PREFIXES = [
@@ -1718,13 +1334,13 @@ function resolveStyleJs(classString, theme, colorScheme, pressed, width) {
 
 // src/nativeBridge.ts
 function resolveStyle(classString, pressed = false) {
-  const colorScheme = getGlobalDarkMode() ? "dark" : "light";
-  const width = import_react_native3.Dimensions.get("window").width;
-  const KbachModule = import_react_native3.TurboModuleRegistry.get("KbachModule");
+  const colorScheme = (0, import_darkModeStore2.getGlobalDarkMode)() ? "dark" : "light";
+  const width = import_react_native2.Dimensions.get("window").width;
+  const KbachModule = import_react_native2.TurboModuleRegistry.get("KbachModule");
   if (!KbachModule) {
-    return resolveStyleJs(classString, getTheme(), colorScheme, pressed, width);
+    return resolveStyleJs(classString, (0, import_theme2.getTheme)(), colorScheme, pressed, width);
   }
-  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
+  const json = KbachModule.resolveStyle(classString, (0, import_theme2.getThemeJson)(), colorScheme, pressed, width);
   return JSON.parse(json);
 }