@kbach/ui 0.1.0-beta.0

package/dist/index.js

@@ -0,0 +1,1191 @@
+'use client';
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InteractiveWrapper: () => InteractiveWrapper,
+  KbachReset: () => KbachReset,
+  ThemeContext: () => ThemeContext,
+  ThemeProvider: () => ThemeProvider,
+  buildConfig: () => import_core12.buildConfig,
+  clearCache: () => import_core12.clearCache,
+  cx: () => cx,
+  defaultColors: () => import_core12.defaultColors,
+  defaultTheme: () => import_core12.defaultTheme,
+  disableRuntimeCSS: () => import_core12.disableRuntimeCSS,
+  flatten: () => import_core12.flatten,
+  generateKbachTypesDts: () => import_core12.generateKbachTypesDts,
+  getConfig: () => import_core12.getConfig,
+  initConfig: () => import_core12.initConfig,
+  kb: () => kb,
+  normalizeClassString: () => import_core12.normalizeClassString,
+  parseClass: () => import_core12.parseClass,
+  parseClasses: () => import_core12.parseClasses,
+  registerWebElement: () => registerWebElement,
+  resolve: () => import_core12.resolve,
+  setResolveTarget: () => import_core12.setResolveTarget,
+  splitClassTokens: () => import_core12.splitClassTokens,
+  styled: () => styled,
+  updateConfig: () => import_core12.updateConfig,
+  useBreakpoint: () => useBreakpoint,
+  useColors: () => useColors,
+  useGlobalDarkMode: () => useGlobalDarkMode,
+  useIsDark: () => useIsDark,
+  useResolvedStyle: () => useResolvedStyle,
+  useResponsive: () => useResponsive,
+  useSpacing: () => useSpacing,
+  useStyles: () => useStyles,
+  useTheme: () => useTheme,
+  wrapColors: () => wrapColors,
+  wrapSpacing: () => wrapSpacing
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react = require("react");
+var ThemeContext = globalThis.__kbachThemeContext ?? (globalThis.__kbachThemeContext = (0, import_react.createContext)(null));
+function useTheme() {
+  const ctx = (0, import_react.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;
+}
+
+// src/useColors.ts
+var import_react2 = require("react");
+var import_core = require("./core");
+function applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  if (color.startsWith("#")) {
+    const rgb = (0, import_core.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 (0, import_core.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" || (0, import_core.isModeAwareColor)(entry2)) ? applyOpacity(pickSide(entry2, isDark), op) : void 0;
+      }
+      const entry = rawColors[key];
+      if (entry === void 0) return void 0;
+      if (typeof entry === "string" || (0, import_core.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 (0, import_react2.useMemo)(() => wrapColors(config.theme.colors, isDark), [config.theme.colors, isDark]);
+}
+
+// src/useSpacing.ts
+var import_react3 = require("react");
+function wrapSpacing(rawSpacing) {
+  return rawSpacing;
+}
+function useSpacing() {
+  const { config } = useTheme();
+  return (0, import_react3.useMemo)(() => wrapSpacing(config.theme.spacing), [config.theme.spacing]);
+}
+
+// src/ThemeProvider.tsx
+var import_react5 = require("react");
+
+// src/useSyncExternalStoreShim.ts
+var import_react4 = __toESM(require("react"));
+var useSyncExternalStore = import_react4.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, getServerSnapshot) {
+  const isServer = typeof window === "undefined";
+  const [, forceUpdate] = import_react4.default.useReducer((n) => n + 1, 0);
+  const value = isServer && getServerSnapshot ? getServerSnapshot() : getSnapshot();
+  import_react4.default.useEffect(() => {
+    if (getSnapshot() !== value) forceUpdate();
+    return subscribe(forceUpdate);
+  }, [subscribe]);
+  return value;
+};
+
+// src/ThemeProvider.tsx
+var import_core2 = require("./core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var useIsomorphicLayoutEffect = import_core2.isWeb || import_core2.isNative ? import_react5.useLayoutEffect : import_react5.useEffect;
+var STORAGE_KEY = "kbach-theme";
+var _mountedProviderCount = 0;
+var _warnedMultipleProviders = false;
+var _mountedConfigOverrideCount = 0;
+var _warnedConfigOverride = false;
+var _warnedMediaModeToggle = false;
+function loadPersistedMode() {
+  try {
+    if (import_core2.isWeb) return localStorage.getItem(STORAGE_KEY);
+    return null;
+  } catch {
+    return null;
+  }
+}
+function persistMode(mode) {
+  try {
+    if (import_core2.isWeb) localStorage.setItem(STORAGE_KEY, mode);
+  } catch {
+  }
+}
+function subscribeSystemScheme(callback) {
+  if (!import_core2.isWeb || typeof window === "undefined") return () => {
+  };
+  const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+  if (!mq) return () => {
+  };
+  mq.addEventListener("change", callback);
+  return () => mq.removeEventListener("change", callback);
+}
+function getSystemScheme() {
+  if (!import_core2.isWeb || typeof window === "undefined") return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
+}
+function getSystemSchemeServerSnapshot() {
+  return "light";
+}
+function applyWebTheme(resolvedMode, strategy) {
+  if (!import_core2.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 ThemeProvider({
+  children,
+  defaultMode = "system",
+  colorScheme,
+  windowWidth: windowWidthProp,
+  config: configOverride,
+  disablePersistence = false
+}) {
+  const [resolvedConfig, setResolvedConfig] = (0, import_react5.useState)(
+    () => configOverride ? (0, import_core2.buildConfig)(configOverride) : (0, import_core2.getConfig)()
+  );
+  const _prevConfigOverrideRef = (0, import_react5.useRef)(void 0);
+  if (configOverride && _prevConfigOverrideRef.current !== configOverride) {
+    _prevConfigOverrideRef.current = configOverride;
+    (0, import_core2.updateConfig)(configOverride);
+    const fresh = (0, import_core2.getConfig)();
+    if (fresh !== resolvedConfig) setResolvedConfig(fresh);
+  }
+  (0, import_react5.useEffect)(() => {
+    _mountedProviderCount++;
+    if (configOverride) _mountedConfigOverrideCount++;
+    if (process.env.NODE_ENV !== "production") {
+      if (_mountedProviderCount > 1 && !_warnedMultipleProviders) {
+        _warnedMultipleProviders = true;
+        (0, import_core2.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;
+        (0, import_core2.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>."
+        );
+      }
+    }
+    return () => {
+      _mountedProviderCount--;
+      if (configOverride) _mountedConfigOverrideCount--;
+      if (_prevConfigOverrideRef.current !== void 0 && _mountedProviderCount === 0) {
+        (0, import_core2.resetConfig)();
+      }
+    };
+  }, []);
+  const [webWidth, setWebWidth] = (0, import_react5.useState)(0);
+  const effectiveWidth = (0, import_core2.getEffectiveIsWeb)() ? webWidth : windowWidthProp ?? 0;
+  const numericScreens = (0, import_react5.useMemo)(() => {
+    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 = (0, import_react5.useRef)(-1);
+  if (_prevWidthRef.current !== effectiveWidth) {
+    _prevWidthRef.current = effectiveWidth;
+    (0, import_core2.syncGlobalWidth)(effectiveWidth);
+  }
+  const _prevScreensRef = (0, import_react5.useRef)(null);
+  if (_prevScreensRef.current !== numericScreens) {
+    _prevScreensRef.current = numericScreens;
+    (0, import_core2.syncGlobalScreens)(numericScreens);
+  }
+  (0, import_react5.useEffect)(() => {
+    (0, import_core2.setGlobalWidth)(effectiveWidth);
+  }, [effectiveWidth]);
+  (0, import_react5.useEffect)(() => {
+    if (!import_core2.isWeb || typeof window === "undefined") return;
+    setWebWidth(window.innerWidth);
+    let raf = 0;
+    const update = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const w = window.innerWidth;
+        setWebWidth(w);
+        (0, import_core2.setGlobalWidth)(w);
+      });
+    };
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+  const webScheme = useSyncExternalStore(
+    subscribeSystemScheme,
+    getSystemScheme,
+    getSystemSchemeServerSnapshot
+  );
+  const systemScheme = (0, import_core2.getEffectiveIsWeb)() ? webScheme : colorScheme === "dark" ? "dark" : "light";
+  const [mode, _setMode] = (0, import_react5.useState)(defaultMode);
+  (0, import_react5.useEffect)(() => {
+    if (disablePersistence) return;
+    const persisted = loadPersistedMode();
+    if (persisted) _setMode(persisted);
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (disablePersistence || !import_core2.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 = (0, import_react5.useCallback)((next) => {
+    if (process.env.NODE_ENV !== "production" && import_core2.isWeb && resolvedConfig.darkMode === "media" && !_warnedMediaModeToggle) {
+      _warnedMediaModeToggle = true;
+      (0, import_core2.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 = (0, import_react5.useCallback)(() => {
+    setMode(mode === "dark" || mode === "system" && systemScheme === "dark" ? "light" : "dark");
+  }, [mode, systemScheme, setMode]);
+  const resolvedMode = mode === "system" ? systemScheme : mode;
+  const isDark = resolvedMode === "dark";
+  (0, import_core2.syncGlobalDarkMode)(isDark);
+  useIsomorphicLayoutEffect(() => {
+    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
+    (0, import_core2.setGlobalDarkMode)(isDark);
+  }, [isDark, resolvedMode, resolvedConfig.darkMode]);
+  (0, import_react5.useEffect)(() => {
+    if (configOverride) return;
+    let mounted = true;
+    const unsub = (0, import_core2.onConfigChange)((config) => {
+      if (mounted) setResolvedConfig(config);
+    });
+    return () => {
+      mounted = false;
+      unsub();
+    };
+  }, [configOverride]);
+  const contextValue = (0, import_react5.useMemo)(
+    () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
+    [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children });
+}
+
+// src/KbachReset.tsx
+var import_core3 = require("./core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function KbachReset() {
+  if (import_core3.isNative) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { id: import_core3.RESET_STYLE_ID, children: import_core3.BASE_RESET });
+}
+
+// src/styled.tsx
+var import_react6 = __toESM(require("react"));
+var import_core7 = require("./core");
+
+// src/useGlobalDarkMode.ts
+var import_core4 = require("./core");
+var NOOP_SUB = (_) => () => {
+};
+var FALSE_SNAP = () => false;
+function useGlobalDarkMode() {
+  return useSyncExternalStore(
+    import_core4.subscribeGlobalDarkMode,
+    import_core4.getGlobalDarkMode,
+    () => false
+    // SSR: default light
+  );
+}
+function useConditionalGlobalDarkMode(active) {
+  return useSyncExternalStore(
+    active ? import_core4.subscribeGlobalDarkMode : NOOP_SUB,
+    active ? import_core4.getGlobalDarkMode : FALSE_SNAP,
+    FALSE_SNAP
+  );
+}
+
+// src/useGlobalWidth.ts
+var import_core5 = require("./core");
+var NOOP_SUB2 = (_) => () => {
+};
+var ZERO_SNAP = () => 0;
+var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+var _webListeners = null;
+var _webRaf = 0;
+function _webResizeHandler() {
+  cancelAnimationFrame(_webRaf);
+  _webRaf = requestAnimationFrame(() => {
+    if (_webListeners) for (const cb of _webListeners) cb();
+  });
+}
+function subscribeWebWidth(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  if (!_webListeners) {
+    _webListeners = /* @__PURE__ */ new Set();
+    window.addEventListener("resize", _webResizeHandler);
+  }
+  _webListeners.add(cb);
+  return () => {
+    _webListeners.delete(cb);
+    if (_webListeners.size === 0) {
+      window.removeEventListener("resize", _webResizeHandler);
+      cancelAnimationFrame(_webRaf);
+      _webListeners = null;
+    }
+  };
+}
+function getWebWidth() {
+  return typeof window !== "undefined" ? window.innerWidth : 0;
+}
+function useGlobalWidth() {
+  return useSyncExternalStore(
+    import_core5.isWeb ? subscribeWebWidth : import_core5.subscribeGlobalWidth,
+    import_core5.isWeb ? getWebWidth : import_core5.getGlobalWidth,
+    ZERO_SNAP
+  );
+}
+function useConditionalWidth(active) {
+  return useSyncExternalStore(
+    active ? import_core5.isWeb ? subscribeWebWidth : import_core5.subscribeGlobalWidth : NOOP_SUB2,
+    active ? import_core5.isWeb ? getWebWidth : import_core5.getGlobalWidth : ZERO_SNAP,
+    ZERO_SNAP
+  );
+}
+
+// src/shared-utils.ts
+var import_core6 = require("./core");
+function hasResponsiveBuckets(resolved) {
+  const responsiveMods = (0, import_core6.getResponsiveModifiers)();
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (responsiveMods.has(mod)) return true;
+    }
+  }
+  return false;
+}
+function hasInteractiveBuckets(resolved) {
+  const interactiveMods = (0, import_core6.getInteractiveModifiers)();
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (interactiveMods.has(mod)) return true;
+    }
+  }
+  return false;
+}
+function chain(original, extra) {
+  return (...args) => {
+    original?.(...args);
+    extra();
+  };
+}
+function stripInternalMarkers(s) {
+  delete s.__divideX;
+  delete s.__divideY;
+  delete s.__divideColor;
+  delete s.__divideStyle;
+  delete s.__keyframe;
+}
+function stripWebOnlyProps(s) {
+  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+  delete s.gridTemplateColumns;
+  delete s.gridTemplateRows;
+  delete s.gridColumn;
+  delete s.gridRow;
+  delete s.gridArea;
+  delete s.gridColumnStart;
+  delete s.gridColumnEnd;
+  delete s.gridRowStart;
+  delete s.gridRowEnd;
+  delete s.gridAutoFlow;
+  delete s.gridAutoColumns;
+  delete s.gridAutoRows;
+  delete s.placeItems;
+  delete s.placeContent;
+  delete s.justifyItems;
+  delete s.placeSelf;
+  delete s.justifySelf;
+  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+    delete s.position;
+  }
+}
+function composeNativeStyle(computed, userStyle) {
+  if (!userStyle) return computed;
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
+}
+
+// src/web-substitute.ts
+var _rnToHtml = {
+  View: "div",
+  SafeAreaView: "div",
+  KeyboardAvoidingView: "div",
+  ScrollView: "div",
+  VirtualizedList: "div",
+  FlatList: "div",
+  SectionList: "div",
+  Text: "span",
+  TextInput: "input",
+  Image: "img",
+  ImageBackground: "div",
+  Pressable: "div",
+  TouchableOpacity: "div",
+  TouchableHighlight: "div",
+  TouchableWithoutFeedback: "div",
+  TouchableNativeFeedback: "div"
+};
+var _userMap = /* @__PURE__ */ new Map();
+var _cache = /* @__PURE__ */ new WeakMap();
+function registerWebElement(rnComponent, htmlTag) {
+  if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
+  _userMap.set(rnComponent, htmlTag);
+  _cache.delete(rnComponent);
+}
+var _forwardRefOrMemoType = /* @__PURE__ */ new Set([
+  /* @__PURE__ */ Symbol.for("react.forward_ref"),
+  /* @__PURE__ */ Symbol.for("react.memo")
+]);
+function looksLikeRealRNPrimitive(type) {
+  const t = type.$$typeof;
+  if (t !== void 0) return _forwardRefOrMemoType.has(t);
+  return !!type.prototype?.isReactComponent;
+}
+function getWebTag(type, props) {
+  if (typeof type === "string") return null;
+  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
+  const obj = type;
+  if (_userMap.has(obj)) return _userMap.get(obj);
+  if (!looksLikeRealRNPrimitive(obj)) return null;
+  const name = obj.displayName ?? obj.name;
+  if (!name) {
+    _cache.set(obj, null);
+    return null;
+  }
+  if (name === "TextInput") {
+    const multiline = !!props && (props.multiline === true || Number(props.numberOfLines) > 1);
+    return multiline ? "textarea" : "input";
+  }
+  if (_cache.has(obj)) return _cache.get(obj);
+  const tag = _rnToHtml[name] ?? null;
+  _cache.set(obj, tag);
+  return tag;
+}
+function getImpliedRNClasses(webTag, resolvedBase) {
+  if (!webTag || !resolvedBase) return void 0;
+  const classes = [];
+  if (resolvedBase.position === void 0) classes.push("relative");
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
+  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
+  if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
+    classes.push("flex-col");
+  }
+  return classes.length > 0 ? classes.join(" ") : void 0;
+}
+var _rnOnlyProps = /* @__PURE__ */ new Set([
+  // Interaction
+  "onLongPress",
+  "delayLongPress",
+  "activeOpacity",
+  "underlayColor",
+  "hitSlop",
+  "pressRetentionOffset",
+  "android_ripple",
+  "android_disableSound",
+  "onHoverIn",
+  "onHoverOut",
+  "onHoverStart",
+  "onHoverEnd",
+  // Layout event
+  "onLayout",
+  // Accessibility
+  "accessible",
+  "accessibilityState",
+  "accessibilityLiveRegion",
+  "importantForAccessibility",
+  // Platform
+  "nativeID",
+  "collapsable",
+  "needsOffscreenAlphaCompositing",
+  "renderToHardwareTextureAndroid",
+  "shouldRasterizeIOS",
+  "focusable",
+  "hasTVPreferredFocus",
+  // 'pointerEvents' is handled in transformToWebProps (mapped to CSS style)
+  // Text
+  "selectable",
+  "allowFontScaling",
+  "adjustsFontSizeToFit",
+  "minimumFontScale",
+  "ellipsizeMode",
+  "numberOfLines",
+  "onTextLayout",
+  "textBreakStrategy",
+  "lineBreakStrategyIOS",
+  // TextInput
+  "multiline",
+  // NOTE: 'resizeMode' (Image's prop, not TextInput's) deliberately does NOT
+  // go here — it's handled below in the isImage branch (mapped to CSS
+  // object-fit). Blacklisting it here would make that branch unreachable.
+  "blurOnSubmit",
+  "clearButtonMode",
+  "clearTextOnFocus",
+  "enablesReturnKeyAutomatically",
+  "returnKeyType",
+  "spellCheck",
+  // ScrollView
+  "scrollEnabled",
+  "showsVerticalScrollIndicator",
+  "showsHorizontalScrollIndicator",
+  "contentContainerStyle",
+  // 'horizontal' is handled in transformToWebProps (converted to CSS overflow-x).
+  "keyboardShouldPersistTaps",
+  "keyboardDismissMode",
+  "pagingEnabled",
+  "scrollEventThrottle",
+  "decelerationRate",
+  "bounces",
+  "alwaysBounceHorizontal",
+  "alwaysBounceVertical",
+  "snapToAlignment",
+  "snapToInterval",
+  "snapToOffsets",
+  "removeClippedSubviews",
+  "overScrollMode",
+  "stickyHeaderIndices",
+  "invertStickyHeaders",
+  "onScrollBeginDrag",
+  "onScrollEndDrag",
+  "onMomentumScrollBegin",
+  "onMomentumScrollEnd",
+  "contentInset",
+  "contentInsetAdjustmentBehavior",
+  "automaticallyAdjustContentInsets",
+  "automaticallyAdjustsScrollIndicatorInsets",
+  // expo-image
+  "contentPosition",
+  "cachePolicy",
+  "recyclingKey",
+  "blurRadius",
+  "fadeDuration",
+  "responsivePolicy",
+  "tintColor",
+  "allowDownscaling",
+  "placeholderContentFit",
+  // FlatList / SectionList
+  "data",
+  "renderItem",
+  "keyExtractor",
+  "getItemLayout",
+  "initialScrollIndex",
+  "initialNumToRender",
+  "maxToRenderPerBatch",
+  "windowSize",
+  "updateCellsBatchingPeriod",
+  "onEndReached",
+  "onEndReachedThreshold",
+  "ListHeaderComponent",
+  "ListFooterComponent",
+  "ListEmptyComponent",
+  "ListHeaderComponentStyle",
+  "ListFooterComponentStyle",
+  "ItemSeparatorComponent",
+  "SectionSeparatorComponent",
+  "inverted",
+  "getItem",
+  "getItemCount"
+]);
+var _pressableNames = /* @__PURE__ */ new Set([
+  "Pressable",
+  "TouchableOpacity",
+  "TouchableHighlight",
+  "TouchableWithoutFeedback",
+  "TouchableNativeFeedback"
+]);
+var _keyboardTypeMap = {
+  "numeric": "number",
+  "number-pad": "number",
+  "decimal-pad": "decimal",
+  "email-address": "email",
+  "phone-pad": "tel",
+  "url": "url"
+};
+var _resizeModeMap = {
+  "contain": "contain",
+  "cover": "cover",
+  "stretch": "fill",
+  "center": "none",
+  "repeat": "none"
+};
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
+var _placeholderRuleInjected = false;
+function ensurePlaceholderColorRuleInjected() {
+  if (_placeholderRuleInjected || typeof document === "undefined") return;
+  _placeholderRuleInjected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-kbach-placeholder", "");
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
+function transformToWebProps(originalName, tag, props) {
+  const out = {};
+  const isPressable = _pressableNames.has(originalName);
+  const isTextInput = originalName === "TextInput";
+  const isImage = originalName === "Image" || originalName === "ImageBackground";
+  const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
+  let pendingStyle = null;
+  for (const [k, v] of Object.entries(props)) {
+    if (_rnOnlyProps.has(k)) continue;
+    if (k === "onPress") {
+      if (!("onClick" in props)) out.onClick = v;
+      continue;
+    }
+    if (k === "accessibilityLabel") {
+      if (out["aria-label"] == null) out["aria-label"] = v;
+      continue;
+    }
+    if (k === "accessibilityRole") {
+      if (out.role == null) out.role = v;
+      continue;
+    }
+    if (k === "testID") {
+      if (out["data-testid"] == null) out["data-testid"] = v;
+      continue;
+    }
+    if (isTextInput) {
+      if (k === "onChangeText") {
+        if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
+        continue;
+      }
+      if (k === "onSubmitEditing") {
+        if (!("onKeyDown" in props)) {
+          out.onKeyDown = (e) => {
+            if (e.key === "Enter") v();
+          };
+        }
+        continue;
+      }
+      if (k === "placeholderTextColor") {
+        if (v) {
+          ensurePlaceholderColorRuleInjected();
+          out[PLACEHOLDER_RULE_ATTR] = "";
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
+      if (k === "secureTextEntry") {
+        if (v && !("type" in props)) out.type = "password";
+        continue;
+      }
+      if (k === "keyboardType") {
+        if (!("type" in props) && !props.secureTextEntry) {
+          const mapped = _keyboardTypeMap[v];
+          if (mapped) out.type = mapped;
+        }
+        continue;
+      }
+      if (k === "editable") {
+        if (v === false) out.readOnly = true;
+        continue;
+      }
+      if (k === "maxLength") {
+        out.maxLength = v;
+        continue;
+      }
+    }
+    if (isScrollable && k === "horizontal") {
+      if (v) pendingStyle = { ...pendingStyle ?? {}, display: "flex", flexDirection: "row", overflowX: "auto" };
+      continue;
+    }
+    if (k === "pointerEvents") {
+      if (v === "none" || v === "auto") pendingStyle = { ...pendingStyle ?? {}, pointerEvents: v };
+      continue;
+    }
+    if (isImage) {
+      if (k === "source") {
+        if (typeof v === "string") {
+          out.src = v;
+        } else if (v && typeof v === "object" && "uri" in v) {
+          out.src = v.uri;
+          if (v.headers) out["crossOrigin"] = "anonymous";
+        }
+        continue;
+      }
+      if (k === "resizeMode") {
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: _resizeModeMap[v] ?? "cover" };
+        continue;
+      }
+      if (k === "contentFit") {
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: v };
+        continue;
+      }
+      if (k === "defaultSource") continue;
+    }
+    if (k === "style") {
+      if (Array.isArray(v)) {
+        out.style = Object.assign({}, ...v.filter(Boolean));
+      } else if (v != null) {
+        out.style = v;
+      }
+      continue;
+    }
+    out[k] = v;
+  }
+  if (pendingStyle) {
+    out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
+  }
+  if (isPressable && !out.role) out.role = "button";
+  if (isImage && tag === "img" && out.alt == null) out.alt = "";
+  return out;
+}
+
+// src/styled.tsx
+function styled(Component, baseClasses = "") {
+  const Styled = (0, import_react6.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 = (0, import_core7.getEffectiveIsWeb)();
+      const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
+      const [pressed, setPressed] = (0, import_react6.useState)(false);
+      const [hovered, setHovered] = (0, import_react6.useState)(false);
+      const [focused, setFocused] = (0, import_react6.useState)(false);
+      const handlePressIn = (0, import_react6.useCallback)(chain(onPressIn, () => {
+        if (!isWebPlatform) setPressed(true);
+      }), [onPressIn, isWebPlatform]);
+      const handlePressOut = (0, import_react6.useCallback)(chain(onPressOut, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPressOut, isWebPlatform]);
+      const handlePointerDown = (0, import_react6.useCallback)(chain(onPointerDown, () => {
+        if (!isWebPlatform) setPressed(true);
+      }), [onPointerDown, isWebPlatform]);
+      const handlePointerUp = (0, import_react6.useCallback)(chain(onPointerUp, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerUp, isWebPlatform]);
+      const handlePointerLeave = (0, import_react6.useCallback)(chain(onPointerLeave, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerLeave, isWebPlatform]);
+      const handlePointerCancel = (0, import_react6.useCallback)(chain(onPointerCancel, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerCancel, isWebPlatform]);
+      const handleMouseEnter = (0, import_react6.useCallback)(chain(onMouseEnter, () => {
+        if (!isWebPlatform) setHovered(true);
+      }), [onMouseEnter, isWebPlatform]);
+      const handleMouseLeave = (0, import_react6.useCallback)(chain(onMouseLeave, () => {
+        if (!isWebPlatform) setHovered(false);
+      }), [onMouseLeave, isWebPlatform]);
+      const handleFocus = (0, import_react6.useCallback)(chain(onFocus, () => {
+        if (!isWebPlatform) setFocused(true);
+      }), [onFocus, isWebPlatform]);
+      const handleBlur = (0, import_react6.useCallback)(chain(onBlur, () => {
+        if (!isWebPlatform) setFocused(false);
+      }), [onBlur, isWebPlatform]);
+      const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
+      const firstPassResolved = (0, import_react6.useMemo)(() => (0, import_core7.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 = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
+      const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
+      const needsWidth = hasResponsiveBuckets(resolved);
+      const width = useConditionalWidth(needsWidth && !isWebPlatform);
+      const breakpoints = needsWidth ? (0, import_core7.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+      const screens = (0, import_core7.getGlobalScreens)();
+      const computedStyle = (0, import_react6.useMemo)(
+        () => isWebPlatform ? {} : (0, import_core7.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 import_react6.default.createElement(effectiveComponent, {
+        ref,
+        ...effectiveRest,
+        style: finalStyle,
+        // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
+        ...isWebPlatform && finalClassStr ? { className: (0, import_core7.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.
+        ...!import_core7.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
+var import_react7 = require("react");
+var import_core8 = require("./core");
+function useStyles(classString, state = {}) {
+  const { isDark, config } = useTheme();
+  const width = useGlobalWidth();
+  const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
+  return (0, import_react7.useMemo)(() => {
+    const resolved = (0, import_core8.resolve)(normalised, config.theme, config.darkMode);
+    const breakpoints = (0, import_core8.getActiveBreakpoints)(width);
+    return (0, import_core8.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 (0, import_react7.useMemo)(
+    () => (0, import_core8.resolve)(normalised, config.theme, config.darkMode),
+    [normalised, config]
+  );
+}
+
+// src/useBreakpoint.ts
+var import_react8 = require("react");
+var import_core9 = require("./core");
+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 = (0, import_react8.useMemo)(() => toNumericScreens(screens), [screens]);
+  return (0, import_react8.useMemo)(() => {
+    const active = (0, import_core9.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 = (0, import_react8.useMemo)(() => toNumericScreens(screens), [screens]);
+  return (0, import_react8.useMemo)(() => {
+    const active = (0, import_core9.getActiveBreakpoints)(width, numericScreens);
+    const result = {};
+    for (const name of Object.keys(numericScreens)) {
+      result[name] = active.has(name);
+    }
+    return result;
+  }, [numericScreens, width]);
+}
+
+// src/InteractiveWrapper.tsx
+var import_react9 = __toESM(require("react"));
+var import_core10 = require("./core");
+var InteractiveWrapper = (0, import_react9.forwardRef)(
+  function InteractiveWrapper2({
+    Component,
+    resolvedStyle,
+    className,
+    style: styleProp,
+    onPressIn,
+    onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
+    onPointerCancel,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) {
+    const isWebPlatform = (0, import_core10.getEffectiveIsWeb)();
+    const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
+    const width = useConditionalWidth(needsWidth && !isWebPlatform);
+    const breakpoints = needsWidth ? (0, import_core10.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+    const screens = (0, import_core10.getGlobalScreens)();
+    const [pressed, setPressed] = (0, import_react9.useState)(false);
+    const [hovered, setHovered] = (0, import_react9.useState)(false);
+    const [focused, setFocused] = (0, import_react9.useState)(false);
+    const handlePressIn = (0, import_react9.useCallback)(chain(onPressIn, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPressIn, isWebPlatform]);
+    const handlePressOut = (0, import_react9.useCallback)(chain(onPressOut, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPressOut, isWebPlatform]);
+    const handlePointerDown = (0, import_react9.useCallback)(chain(onPointerDown, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPointerDown, isWebPlatform]);
+    const handlePointerUp = (0, import_react9.useCallback)(chain(onPointerUp, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerUp, isWebPlatform]);
+    const handlePointerLeave = (0, import_react9.useCallback)(chain(onPointerLeave, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerLeave, isWebPlatform]);
+    const handlePointerCancel = (0, import_react9.useCallback)(chain(onPointerCancel, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerCancel, isWebPlatform]);
+    const handleMouseEnter = (0, import_react9.useCallback)(chain(onMouseEnter, () => {
+      if (!isWebPlatform) setHovered(true);
+    }), [onMouseEnter, isWebPlatform]);
+    const handleMouseLeave = (0, import_react9.useCallback)(chain(onMouseLeave, () => {
+      if (!isWebPlatform) setHovered(false);
+    }), [onMouseLeave, isWebPlatform]);
+    const handleFocus = (0, import_react9.useCallback)(chain(onFocus, () => {
+      if (!isWebPlatform) setFocused(true);
+    }), [onFocus, isWebPlatform]);
+    const handleBlur = (0, import_react9.useCallback)(chain(onBlur, () => {
+      if (!isWebPlatform) setFocused(false);
+    }), [onBlur, isWebPlatform]);
+    const { children, disabled, checked, ...restForComponent } = rest;
+    const isNonStringComponent = typeof Component !== "string";
+    const computedStyle = (0, import_react9.useMemo)(
+      () => {
+        if (isWebPlatform) return {};
+        const s = (0, import_core10.flatten)(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
+        stripInternalMarkers(s);
+        if (isNonStringComponent) stripWebOnlyProps(s);
+        return s;
+      },
+      [resolvedStyle, isDark, pressed, hovered, focused, width, screens, disabled, checked, isNonStringComponent]
+    );
+    const skipComputedInline = isWebPlatform;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
+    const componentProps = {
+      ref,
+      ...restForComponent,
+      ...disabled !== void 0 ? { disabled } : {},
+      ...checked !== void 0 ? { checked } : {},
+      style: finalStyle,
+      ...!import_core10.isNative && className ? { className } : {},
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch) —
+      // onPressIn/onPressOut are RN-only prop names and are never forwarded here, even when
+      // Component isn't a literal HTML tag string. A non-string Component on web 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 — "not a string" alone was never
+      // a reliable signal that onPressIn/onPressOut are wanted, and forwarding them
+      // unconditionally made React DOM warn "Unknown event handler property" the moment any web
+      // component got an interactive modifier (hover:, active:, …), which is the common case,
+      // not the exception. (A real react-native-web primitive would additionally have this pair
+      // of props silently vanish after hydration anyway, once the browser-only web-substitution
+      // in jsx-runtime.tsx swaps it for a plain host tag — so keeping them pre-hydration would
+      // only have traded one prop-mismatch warning for another.) Genuinely native code paths
+      // still get them via the isNative branch below.
+      ...!import_core10.isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    };
+    return Array.isArray(children) ? import_react9.default.createElement(Component, componentProps, ...children) : import_react9.default.createElement(Component, componentProps, children);
+  }
+);
+InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
+
+// src/kb.ts
+var import_core11 = require("./core");
+function kb(classString, isDark = false) {
+  const config = (0, import_core11.getConfig)();
+  const resolved = (0, import_core11.resolve)(classString, config.theme, config.darkMode);
+  if ((0, import_core11.getEffectiveIsWeb)()) {
+    return classString;
+  }
+  return (0, import_core11.flatten)(resolved, isDark);
+}
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/index.ts
+var import_core12 = require("./core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InteractiveWrapper,
+  KbachReset,
+  ThemeContext,
+  ThemeProvider,
+  buildConfig,
+  clearCache,
+  cx,
+  defaultColors,
+  defaultTheme,
+  disableRuntimeCSS,
+  flatten,
+  generateKbachTypesDts,
+  getConfig,
+  initConfig,
+  kb,
+  normalizeClassString,
+  parseClass,
+  parseClasses,
+  registerWebElement,
+  resolve,
+  setResolveTarget,
+  splitClassTokens,
+  styled,
+  updateConfig,
+  useBreakpoint,
+  useColors,
+  useGlobalDarkMode,
+  useIsDark,
+  useResolvedStyle,
+  useResponsive,
+  useSpacing,
+  useStyles,
+  useTheme,
+  wrapColors,
+  wrapSpacing
+});