@kbach/react 0.6.51 → 1.0.0-beta.0

package/dist/index.mjs

@@ -1,589 +1,182 @@
-'use client';
+import {
+  disableRuntimeCSS,
+  initKbach,
+  isKbachReady,
+  isRuntimeCSSDisabled,
+  kb
+} from "./chunk-G3RJJNSY.mjs";
 import {
   BASE_RESET,
-  EMPTY_BREAKPOINTS,
-  InteractiveWrapper,
   RESET_STYLE_ID,
-  buildConfig,
-  chain,
-  clearCache,
-  composeNativeStyle,
-  defaultColors,
   defaultTheme,
-  disableRuntimeCSS,
-  flatten,
-  generateKbachTypesDts,
-  getActiveBreakpoints,
-  getConfig,
-  getEffectiveIsWeb,
-  getGlobalScreens,
-  getImpliedRNClasses,
-  getWebTag,
-  hasInteractiveBuckets,
-  hasResponsiveBuckets,
-  initConfig,
-  isModeAwareColor,
-  isNative,
-  isWeb,
-  kbachWarn,
-  normalizeClassString,
-  onConfigChange,
-  parseClass,
-  parseClasses,
-  parseHexRgb,
-  registerWebElement,
-  resetConfig,
-  resolve,
-  setGlobalDarkMode,
-  setGlobalWidth,
-  setResolveTarget,
-  splitClassTokens,
-  syncGlobalDarkMode,
-  syncGlobalScreens,
-  syncGlobalWidth,
-  transformToWebProps,
-  updateConfig,
-  useConditionalGlobalDarkMode,
-  useConditionalWidth,
-  useGlobalDarkMode,
-  useGlobalWidth,
-  useSyncExternalStore
-} from "./chunk-KRRGLJLA.mjs";
-
-// src/context.tsx
-import { createContext, useContext } from "react";
-var ThemeContext = globalThis.__kbachThemeContext ?? (globalThis.__kbachThemeContext = createContext(null));
-function useTheme() {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) {
-    throw new Error(
-      "[Kbach] useTheme() must be called inside a <ThemeProvider>. Wrap your app root with <ThemeProvider>."
-    );
-  }
-  return ctx;
-}
-function useIsDark() {
-  return useTheme().isDark;
-}
+  getTheme,
+  setTheme
+} from "./chunk-AFY36PRX.mjs";
 
-// src/useColors.ts
-import { useMemo } from "react";
-function applyOpacity(color, opacity) {
-  const a = Math.max(0, Math.min(1, opacity / 100));
-  if (color.startsWith("#")) {
-    const rgb = parseHexRgb(color);
-    if (!rgb) return color;
-    const [r, g, b] = rgb;
-    return `rgba(${r},${g},${b},${a})`;
-  }
-  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
-  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
-  return color;
-}
-function pickSide(value, isDark) {
-  return isModeAwareColor(value) ? isDark ? value.dark : value.light : value;
-}
-function makeShadeProxy(shades, isDark) {
-  return new Proxy(shades, {
-    get(target, prop) {
-      const key = String(prop);
-      if (key === "then") return void 0;
-      if (key.includes("/")) {
-        const slash = key.indexOf("/");
-        const shade = key.slice(0, slash);
-        const op = Number(key.slice(slash + 1));
-        const color2 = target[shade];
-        return color2 !== void 0 ? applyOpacity(pickSide(color2, isDark), op) : void 0;
-      }
-      const color = target[key];
-      return color !== void 0 ? pickSide(color, isDark) : void 0;
-    }
-  });
-}
-function wrapColors(rawColors, isDark = false) {
-  const cache = /* @__PURE__ */ new Map();
-  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
-  return new Proxy({ alpha }, {
-    get(_, prop) {
-      const key = String(prop);
-      if (key === "then") return void 0;
-      if (key === "alpha") return alpha;
-      if (key.includes("/")) {
-        const slash = key.indexOf("/");
-        const name = key.slice(0, slash);
-        const op = Number(key.slice(slash + 1));
-        const entry2 = rawColors[name];
-        return entry2 !== void 0 && (typeof entry2 === "string" || isModeAwareColor(entry2)) ? applyOpacity(pickSide(entry2, isDark), op) : void 0;
-      }
-      const entry = rawColors[key];
-      if (entry === void 0) return void 0;
-      if (typeof entry === "string" || isModeAwareColor(entry)) return pickSide(entry, isDark);
-      const cacheKey = `${key}:${isDark}`;
-      if (!cache.has(cacheKey)) cache.set(cacheKey, makeShadeProxy(entry, isDark));
-      return cache.get(cacheKey);
-    }
-  });
-}
-function useColors() {
-  const { config, isDark } = useTheme();
-  return useMemo(() => wrapColors(config.theme.colors, isDark), [config.theme.colors, isDark]);
+// src/KbachReset.tsx
+import { jsx } from "react/jsx-runtime";
+function KbachReset() {
+  if (isRuntimeCSSDisabled()) return null;
+  return /* @__PURE__ */ jsx("style", { id: RESET_STYLE_ID, children: BASE_RESET });
 }
 
-// src/useSpacing.ts
-import { useMemo as useMemo2 } from "react";
-function wrapSpacing(rawSpacing) {
-  return rawSpacing;
+// src/darkModeStore.ts
+var STORAGE_KEY = "kbach-theme";
+var listeners = /* @__PURE__ */ new Set();
+function systemPrefersDark() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
-function useSpacing() {
-  const { config } = useTheme();
-  return useMemo2(() => wrapSpacing(config.theme.spacing), [config.theme.spacing]);
+function storage() {
+  return typeof window === "undefined" ? null : window.localStorage;
 }
-
-// src/ThemeProvider.tsx
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo as useMemo3,
-  useRef,
-  useState
-} from "react";
-import { jsx } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect = isWeb || isNative ? useLayoutEffect : useEffect;
-var STORAGE_KEY = "kbach-theme";
-var _mountedProviderCount = 0;
-var _warnedMultipleProviders = false;
-var _mountedConfigOverrideCount = 0;
-var _warnedConfigOverride = false;
-var _warnedMediaModeToggle = false;
-function loadPersistedMode() {
+function readPersistedMode() {
+  const ls = storage();
+  if (!ls) return null;
   try {
-    if (isWeb) return localStorage.getItem(STORAGE_KEY);
-    return null;
+    const raw = ls.getItem(STORAGE_KEY);
+    return raw === "light" || raw === "dark" || raw === "system" ? raw : null;
   } catch {
     return null;
   }
 }
-function persistMode(mode) {
-  try {
-    if (isWeb) localStorage.setItem(STORAGE_KEY, mode);
-  } catch {
+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");
   }
 }
-function subscribeSystemScheme(callback) {
-  if (!isWeb || typeof window === "undefined") return () => {
+var persistedMode = readPersistedMode();
+var hadPersistedMode = persistedMode !== null;
+var mode = persistedMode ?? "system";
+var isDark = resolveIsDark(mode);
+applyToDom(isDark);
+if (typeof window !== "undefined" && window.matchMedia) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  const onSystemChange = (event) => {
+    if (mode !== "system") return;
+    isDark = event.matches;
+    applyToDom(isDark);
+    notify();
   };
-  const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
-  if (!mq) return () => {
-  };
-  mq.addEventListener("change", callback);
-  return () => mq.removeEventListener("change", callback);
+  if (mq.addEventListener) mq.addEventListener("change", onSystemChange);
+  else mq.addListener(onSystemChange);
+}
+function notify() {
+  for (const listener of listeners) listener();
+}
+function getGlobalDarkMode() {
+  return isDark;
+}
+function getGlobalThemeMode() {
+  return mode;
+}
+function setGlobalThemeMode(nextMode) {
+  mode = nextMode;
+  isDark = resolveIsDark(nextMode);
+  applyToDom(isDark);
+  const ls = storage();
+  if (ls) {
+    try {
+      ls.setItem(STORAGE_KEY, nextMode);
+    } catch {
+    }
+  }
+  notify();
 }
-function getSystemScheme() {
-  if (!isWeb || typeof window === "undefined") return "light";
-  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
+function toggleGlobalDarkMode() {
+  setGlobalThemeMode(isDark ? "light" : "dark");
 }
-function getSystemSchemeServerSnapshot() {
-  return "light";
+function subscribeGlobalDarkMode(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
 }
-function applyWebTheme(resolvedMode, strategy) {
-  if (!isWeb) return;
-  const root = document.documentElement;
-  if (strategy === "attribute") {
-    root.setAttribute("data-theme", resolvedMode);
-  } else if (strategy === "class") {
-    root.classList.toggle("dark", resolvedMode === "dark");
-    root.classList.toggle("light", resolvedMode === "light");
-  }
+function seedDefaultMode(fallback) {
+  if (hadPersistedMode || mode === fallback) return;
+  mode = fallback;
+  isDark = resolveIsDark(fallback);
+  applyToDom(isDark);
+  notify();
 }
-function ThemeProvider({
-  children,
-  defaultMode = "system",
-  colorScheme,
-  windowWidth: windowWidthProp,
-  config: configOverride,
-  disablePersistence = false
-}) {
-  const [resolvedConfig, setResolvedConfig] = useState(
-    () => configOverride ? buildConfig(configOverride) : getConfig()
-  );
-  const _prevConfigOverrideRef = useRef(void 0);
-  if (configOverride && _prevConfigOverrideRef.current !== configOverride) {
-    _prevConfigOverrideRef.current = configOverride;
-    updateConfig(configOverride);
-    const fresh = getConfig();
-    if (fresh !== resolvedConfig) setResolvedConfig(fresh);
+
+// src/useGlobalDarkMode.ts
+import { useSyncExternalStore } from "react";
+var getServerSnapshot = () => false;
+function useGlobalDarkMode() {
+  return useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode, getServerSnapshot);
+}
+
+// src/ThemeProvider.tsx
+import { useEffect, useMemo, useRef, useSyncExternalStore as useSyncExternalStore2 } from "react";
+
+// src/ThemeContext.tsx
+import { createContext, useContext } from "react";
+var ThemeContext = createContext(null);
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      'useTheme() must be called within a <ThemeProvider>. For dark-mode state without a provider, use useGlobalDarkMode() (read) or toggleGlobalDarkMode()/setGlobalThemeMode() (write) from "@kbach/react" instead.'
+    );
   }
+  return ctx;
+}
+
+// src/ThemeProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var mountedProviderCount = 0;
+var warnedMultipleProviders = false;
+function ThemeProvider({ children, defaultMode = "system" }) {
   useEffect(() => {
-    _mountedProviderCount++;
-    if (configOverride) _mountedConfigOverrideCount++;
-    if (process.env.NODE_ENV !== "production") {
-      if (_mountedProviderCount > 1 && !_warnedMultipleProviders) {
-        _warnedMultipleProviders = true;
-        kbachWarn(
-          "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
-        );
-      }
-      if (_mountedConfigOverrideCount > 1 && !_warnedConfigOverride) {
-        _warnedConfigOverride = true;
-        kbachWarn(
-          "Multiple <ThemeProvider config={...}> overrides are mounted at once. The resolved config is shared through the same global store as dark mode/width (see the multiple-providers warning), so per-tree config overrides are not actually isolated between providers \u2014 plain className/kb elements with no hover:/dark:/sm: modifier resolve against whichever override last committed, not necessarily their nearest ancestor <ThemeProvider>."
-        );
-      }
+    mountedProviderCount++;
+    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+      warnedMultipleProviders = true;
+      console.warn(
+        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store (the same one useGlobalDarkMode()/toggleGlobalDarkMode() read and write), not scoped per-provider, so they will fight over the same state instead of each getting their own."
+      );
     }
     return () => {
-      _mountedProviderCount--;
-      if (configOverride) _mountedConfigOverrideCount--;
-      if (_prevConfigOverrideRef.current !== void 0 && _mountedProviderCount === 0) {
-        resetConfig();
-      }
+      mountedProviderCount--;
     };
   }, []);
-  const [webWidth, setWebWidth] = useState(0);
-  const effectiveWidth = getEffectiveIsWeb() ? webWidth : windowWidthProp ?? 0;
-  const numericScreens = useMemo3(() => {
-    const out = {};
-    for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
-      out[k] = typeof v === "number" ? v : parseInt(String(v), 10);
-    }
-    return out;
-  }, [resolvedConfig.theme.screens]);
-  const _prevWidthRef = useRef(-1);
-  if (_prevWidthRef.current !== effectiveWidth) {
-    _prevWidthRef.current = effectiveWidth;
-    syncGlobalWidth(effectiveWidth);
-  }
-  const _prevScreensRef = useRef(null);
-  if (_prevScreensRef.current !== numericScreens) {
-    _prevScreensRef.current = numericScreens;
-    syncGlobalScreens(numericScreens);
-  }
-  useEffect(() => {
-    setGlobalWidth(effectiveWidth);
-  }, [effectiveWidth]);
+  const seeded = useRef(false);
   useEffect(() => {
-    if (!isWeb || typeof window === "undefined") return;
-    setWebWidth(window.innerWidth);
-    let raf = 0;
-    const update = () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(() => {
-        const w = window.innerWidth;
-        setWebWidth(w);
-        setGlobalWidth(w);
-      });
-    };
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("resize", update);
-      cancelAnimationFrame(raf);
-    };
-  }, []);
-  const webScheme = useSyncExternalStore(
-    subscribeSystemScheme,
-    getSystemScheme,
-    getSystemSchemeServerSnapshot
-  );
-  const systemScheme = getEffectiveIsWeb() ? webScheme : colorScheme === "dark" ? "dark" : "light";
-  const [mode, _setMode] = useState(defaultMode);
-  useEffect(() => {
-    if (disablePersistence) return;
-    const persisted = loadPersistedMode();
-    if (persisted) _setMode(persisted);
+    if (seeded.current) return;
+    seeded.current = true;
+    seedDefaultMode(defaultMode);
   }, []);
-  useEffect(() => {
-    if (disablePersistence || !isWeb || typeof window === "undefined") return;
-    const onStorage = (e) => {
-      if (e.key !== STORAGE_KEY || e.newValue == null) return;
-      if (e.newValue === "light" || e.newValue === "dark" || e.newValue === "system") {
-        _setMode(e.newValue);
-      }
-    };
-    window.addEventListener("storage", onStorage);
-    return () => window.removeEventListener("storage", onStorage);
-  }, [disablePersistence]);
-  const setMode = useCallback((next) => {
-    if (process.env.NODE_ENV !== "production" && isWeb && resolvedConfig.darkMode === "media" && !_warnedMediaModeToggle) {
-      _warnedMediaModeToggle = true;
-      kbachWarn(
-        'setMode()/toggle() was called while darkMode is "media" \u2014 the resolved mode/isDark from useTheme()/useIsDark() will update, but the actual CSS stays driven by prefers-color-scheme and will not change to match. Use darkMode: "attribute" or "class" if the app needs manual toggling.'
-      );
-    }
-    _setMode(next);
-    if (!disablePersistence) persistMode(next);
-  }, [disablePersistence, resolvedConfig.darkMode]);
-  const toggle = useCallback(() => {
-    setMode(mode === "dark" || mode === "system" && systemScheme === "dark" ? "light" : "dark");
-  }, [mode, systemScheme, setMode]);
-  const resolvedMode = mode === "system" ? systemScheme : mode;
-  const isDark = resolvedMode === "dark";
-  syncGlobalDarkMode(isDark);
-  useIsomorphicLayoutEffect(() => {
-    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
-    setGlobalDarkMode(isDark);
-  }, [isDark, resolvedMode, resolvedConfig.darkMode]);
-  useEffect(() => {
-    if (configOverride) return;
-    let mounted = true;
-    const unsub = onConfigChange((config) => {
-      if (mounted) setResolvedConfig(config);
-    });
-    return () => {
-      mounted = false;
-      unsub();
-    };
-  }, [configOverride]);
-  const contextValue = useMemo3(
-    () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
-    [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
+  const isDark2 = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
+  const mode2 = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalThemeMode, () => defaultMode);
+  const value = useMemo(
+    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode2, isDark2]
   );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
-}
-
-// src/KbachReset.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function KbachReset() {
-  if (isNative) return null;
-  return /* @__PURE__ */ jsx2("style", { id: RESET_STYLE_ID, children: BASE_RESET });
-}
-
-// src/styled.tsx
-import React2, {
-  forwardRef,
-  useState as useState2,
-  useCallback as useCallback2,
-  useMemo as useMemo4
-} from "react";
-function styled(Component, baseClasses = "") {
-  const Styled = forwardRef(
-    (props, ref) => {
-      const {
-        kb: extraClasses,
-        style: styleProp,
-        onPressIn,
-        onPressOut,
-        onPointerDown,
-        onPointerUp,
-        onPointerLeave,
-        onPointerCancel,
-        onMouseEnter,
-        onMouseLeave,
-        onFocus,
-        onBlur,
-        ...rest
-      } = props;
-      const disabled = !!props.disabled;
-      const checked = !!props.checked;
-      const { config } = useTheme();
-      const isWebPlatform = getEffectiveIsWeb();
-      const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
-      const [pressed, setPressed] = useState2(false);
-      const [hovered, setHovered] = useState2(false);
-      const [focused, setFocused] = useState2(false);
-      const handlePressIn = useCallback2(chain(onPressIn, () => {
-        if (!isWebPlatform) setPressed(true);
-      }), [onPressIn, isWebPlatform]);
-      const handlePressOut = useCallback2(chain(onPressOut, () => {
-        if (!isWebPlatform) setPressed(false);
-      }), [onPressOut, isWebPlatform]);
-      const handlePointerDown = useCallback2(chain(onPointerDown, () => {
-        if (!isWebPlatform) setPressed(true);
-      }), [onPointerDown, isWebPlatform]);
-      const handlePointerUp = useCallback2(chain(onPointerUp, () => {
-        if (!isWebPlatform) setPressed(false);
-      }), [onPointerUp, isWebPlatform]);
-      const handlePointerLeave = useCallback2(chain(onPointerLeave, () => {
-        if (!isWebPlatform) setPressed(false);
-      }), [onPointerLeave, isWebPlatform]);
-      const handlePointerCancel = useCallback2(chain(onPointerCancel, () => {
-        if (!isWebPlatform) setPressed(false);
-      }), [onPointerCancel, isWebPlatform]);
-      const handleMouseEnter = useCallback2(chain(onMouseEnter, () => {
-        if (!isWebPlatform) setHovered(true);
-      }), [onMouseEnter, isWebPlatform]);
-      const handleMouseLeave = useCallback2(chain(onMouseLeave, () => {
-        if (!isWebPlatform) setHovered(false);
-      }), [onMouseLeave, isWebPlatform]);
-      const handleFocus = useCallback2(chain(onFocus, () => {
-        if (!isWebPlatform) setFocused(true);
-      }), [onFocus, isWebPlatform]);
-      const handleBlur = useCallback2(chain(onBlur, () => {
-        if (!isWebPlatform) setFocused(false);
-      }), [onBlur, isWebPlatform]);
-      const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const firstPassResolved = useMemo4(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
-      const impliedClasses = getImpliedRNClasses(webTag, firstPassResolved.base);
-      const finalClassStr = impliedClasses ? `${combined} ${impliedClasses}` : combined;
-      const resolved = useMemo4(() => resolve(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
-      const hasInteractive = useMemo4(() => hasInteractiveBuckets(resolved), [resolved]);
-      const needsWidth = hasResponsiveBuckets(resolved);
-      const width = useConditionalWidth(needsWidth && !isWebPlatform);
-      const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-      const screens = getGlobalScreens();
-      const computedStyle = useMemo4(
-        () => isWebPlatform ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
-        [resolved, isDark, pressed, hovered, focused, disabled, checked, width, screens]
-        // eslint-disable-line react-hooks/exhaustive-deps
-      );
-      const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : composeNativeStyle(computedStyle, styleProp);
-      const effectiveComponent = webTag ?? Component;
-      const componentName2 = Component.displayName ?? Component.name ?? "";
-      const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
-      return React2.createElement(effectiveComponent, {
-        ref,
-        ...effectiveRest,
-        style: finalStyle,
-        // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWebPlatform && finalClassStr ? { className: normalizeClassString(finalClassStr) } : {},
-        // Only attach state-tracking handlers when interactive modifiers are present.
-        // Always forward user-provided handlers to avoid silently swallowing them.
-        // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
-        // and onPressIn/onPressOut must stay excluded there as well — SSR is exactly where
-        // getWebTag() above is skipped (it's isWeb-gated), so effectiveComponent may still be
-        // a non-string RN-style reference server-side, and this used to forward onPressIn/
-        // onPressOut to it unconditionally in that case (isWeb ? ... : ...'s false branch
-        // covered both native AND SSR). onPressIn/onPressOut are RN-only prop names — a
-        // non-string effectiveComponent on the web/SSR side is just as likely to be an
-        // ordinary web component (React Router's <Link>, Next.js's <Link>, any custom
-        // wrapper) as an actual react-native-web primitive, and "not a string" alone isn't a
-        // reliable signal either way. Forwarding them made React DOM warn "Unknown event
-        // handler property" the moment any such component got an interactive modifier
-        // (hover:, active:, …), which is the common case, not the exception.
-        ...!isNative ? hasInteractive ? {
-          onPointerDown: handlePointerDown,
-          onPointerUp: handlePointerUp,
-          onPointerLeave: handlePointerLeave,
-          onPointerCancel: handlePointerCancel
-        } : {
-          onPointerDown,
-          onPointerUp,
-          onPointerLeave,
-          onPointerCancel
-        } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
-        onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
-        onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
-        onFocus: hasInteractive ? handleFocus : onFocus,
-        onBlur: hasInteractive ? handleBlur : onBlur
-      });
-    }
-  );
-  const componentName = Component.displayName ?? Component.name ?? "Component";
-  Styled.displayName = `Styled(${componentName})`;
-  return Styled;
-}
-
-// src/useStyles.ts
-import { useMemo as useMemo5 } from "react";
-function useStyles(classString, state = {}) {
-  const { isDark, config } = useTheme();
-  const width = useGlobalWidth();
-  const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return useMemo5(() => {
-    const resolved = resolve(normalised, config.theme, config.darkMode);
-    const breakpoints = getActiveBreakpoints(width);
-    return flatten(resolved, isDark, state, breakpoints);
-  }, [normalised, isDark, config.theme, config.darkMode, width, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
-}
-function useResolvedStyle(classString) {
-  const { config } = useTheme();
-  const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return useMemo5(
-    () => resolve(normalised, config.theme, config.darkMode),
-    [normalised, config]
-  );
-}
-
-// src/useBreakpoint.ts
-import { useMemo as useMemo6 } from "react";
-function toNumericScreens(screens) {
-  const out = {};
-  for (const [name, v] of Object.entries(screens)) {
-    const n = typeof v === "number" ? v : parseInt(String(v), 10);
-    if (!Number.isNaN(n)) out[name] = n;
-  }
-  return out;
-}
-function useBreakpoint() {
-  const { config } = useTheme();
-  const width = useGlobalWidth();
-  const screens = config.theme.screens;
-  const numericScreens = useMemo6(() => toNumericScreens(screens), [screens]);
-  return useMemo6(() => {
-    const active = getActiveBreakpoints(width, numericScreens);
-    let best = null;
-    let bestMinW = -Infinity;
-    for (const name of active) {
-      const minW = numericScreens[name];
-      if (minW > bestMinW) {
-        bestMinW = minW;
-        best = name;
-      }
-    }
-    return best ?? "xs";
-  }, [numericScreens, width]);
-}
-function useResponsive() {
-  const { config } = useTheme();
-  const width = useGlobalWidth();
-  const screens = config.theme.screens;
-  const numericScreens = useMemo6(() => toNumericScreens(screens), [screens]);
-  return useMemo6(() => {
-    const active = getActiveBreakpoints(width, numericScreens);
-    const result = {};
-    for (const name of Object.keys(numericScreens)) {
-      result[name] = active.has(name);
-    }
-    return result;
-  }, [numericScreens, width]);
-}
-
-// src/kb.ts
-function kb(classString, isDark = false) {
-  const config = getConfig();
-  const resolved = resolve(classString, config.theme, config.darkMode);
-  if (getEffectiveIsWeb()) {
-    return classString;
-  }
-  return flatten(resolved, isDark);
-}
-function cx(...classes) {
-  return classes.filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value, children });
 }
 export {
-  InteractiveWrapper,
   KbachReset,
-  ThemeContext,
   ThemeProvider,
-  buildConfig,
-  clearCache,
-  cx,
-  defaultColors,
   defaultTheme,
   disableRuntimeCSS,
-  flatten,
-  generateKbachTypesDts,
-  getConfig,
-  initConfig,
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  getTheme,
+  initKbach,
+  isKbachReady,
+  isRuntimeCSSDisabled,
   kb,
-  normalizeClassString,
-  parseClass,
-  parseClasses,
-  registerWebElement,
-  resolve,
-  setResolveTarget,
-  splitClassTokens,
-  styled,
-  updateConfig,
-  useBreakpoint,
-  useColors,
+  setGlobalThemeMode,
+  setTheme,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode,
   useGlobalDarkMode,
-  useIsDark,
-  useResolvedStyle,
-  useResponsive,
-  useSpacing,
-  useStyles,
-  useTheme,
-  wrapColors,
-  wrapSpacing
+  useTheme
 };