@kbach/ui 0.1.0-beta.7 → 1.0.0-beta.1

package/dist/index.js

@@ -1,10 +1,7 @@
-'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)
@@ -18,1184 +15,41 @@ var __copyProps = (to, from, except, desc) => {
   }
   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_core13.buildConfig,
-  clearCache: () => import_core13.clearCache,
-  cx: () => cx,
-  defaultColors: () => import_core13.defaultColors,
-  defaultTheme: () => import_core13.defaultTheme,
-  disableRuntimeCSS: () => import_core13.disableRuntimeCSS,
-  flatten: () => import_core13.flatten,
-  generateKbachTypesDts: () => import_core13.generateKbachTypesDts,
-  getConfig: () => import_core13.getConfig,
-  initConfig: () => import_core13.initConfig,
-  kb: () => kb,
-  normalizeClassString: () => import_core13.normalizeClassString,
-  parseClass: () => import_core13.parseClass,
-  parseClasses: () => import_core13.parseClasses,
-  registerWebElement: () => registerWebElement,
-  resolve: () => import_core13.resolve,
-  setResolveTarget: () => import_core13.setResolveTarget,
-  splitClassTokens: () => import_core13.splitClassTokens,
-  styled: () => styled,
-  updateConfig: () => import_core13.updateConfig,
-  useBreakpoint: () => useBreakpoint,
-  useColors: () => useColors,
-  useGlobalDarkMode: () => useGlobalDarkMode,
-  useIsDark: () => useIsDark,
-  useResolvedStyle: () => useResolvedStyle,
-  useResponsive: () => useResponsive,
-  useSpacing: () => useSpacing,
-  useStyles: () => useStyles,
-  useTheme: () => useTheme,
-  wrapColors: () => wrapColors,
-  wrapSpacing: () => wrapSpacing
+var src_exports = {};
+__export(src_exports, {
+  clsx: () => clsx,
+  default: () => src_default
 });
-module.exports = __toCommonJS(index_exports);
-
-// src/context.tsx
-var import_react = require("react");
-var import_core = require("./core");
-var ThemeContext = (0, import_core.getGlobalSingleton)("themeContext", () => (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_core2 = require("./core");
-function applyOpacity(color, opacity) {
-  const a = Math.max(0, Math.min(1, opacity / 100));
-  if (color.startsWith("#")) {
-    const rgb = (0, import_core2.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_core2.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_core2.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_core2.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_core3 = require("./core");
-var import_jsx_runtime = require("react/jsx-runtime");
-var useIsomorphicLayoutEffect = import_core3.isWeb || import_core3.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_core3.isWeb) return localStorage.getItem(STORAGE_KEY);
-    return null;
-  } catch {
-    return null;
-  }
-}
-function persistMode(mode) {
-  try {
-    if (import_core3.isWeb) localStorage.setItem(STORAGE_KEY, mode);
-  } catch {
-  }
-}
-function subscribeSystemScheme(callback) {
-  if (!import_core3.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_core3.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_core3.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
-}) {
-  let nativeColorScheme = null;
-  let nativeWindowWidth;
-  if (import_core3.isNative) {
-    const { useColorScheme, useWindowDimensions } = require("react-native");
-    const raw = useColorScheme();
-    nativeColorScheme = raw === "dark" ? "dark" : raw === "light" ? "light" : null;
-    nativeWindowWidth = useWindowDimensions().width;
-  }
-  const [resolvedConfig, setResolvedConfig] = (0, import_react5.useState)(
-    () => configOverride ? (0, import_core3.buildConfig)(configOverride) : (0, import_core3.getConfig)()
-  );
-  const _prevConfigOverrideRef = (0, import_react5.useRef)(void 0);
-  if (configOverride && _prevConfigOverrideRef.current !== configOverride) {
-    _prevConfigOverrideRef.current = configOverride;
-    (0, import_core3.updateConfig)(configOverride);
-    const fresh = (0, import_core3.getConfig)();
-    if (fresh !== resolvedConfig) setResolvedConfig(fresh);
+module.exports = __toCommonJS(src_exports);
+function clsx(...inputs) {
+  let out = "";
+  for (const input of inputs) {
+    const piece = resolveClassValue(input);
+    if (piece) out = out ? `${out} ${piece}` : piece;
   }
-  (0, import_react5.useEffect)(() => {
-    _mountedProviderCount++;
-    if (configOverride) _mountedConfigOverrideCount++;
-    if (process.env.NODE_ENV !== "production") {
-      if (_mountedProviderCount > 1 && !_warnedMultipleProviders) {
-        _warnedMultipleProviders = true;
-        (0, import_core3.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_core3.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_core3.resetConfig)();
-      }
-    };
-  }, []);
-  const [webWidth, setWebWidth] = (0, import_react5.useState)(0);
-  const effectiveWidth = (0, import_core3.getEffectiveIsWeb)() ? webWidth : windowWidthProp ?? nativeWindowWidth ?? 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_core3.syncGlobalWidth)(effectiveWidth);
-  }
-  const _prevScreensRef = (0, import_react5.useRef)(null);
-  if (_prevScreensRef.current !== numericScreens) {
-    _prevScreensRef.current = numericScreens;
-    (0, import_core3.syncGlobalScreens)(numericScreens);
-  }
-  (0, import_react5.useEffect)(() => {
-    (0, import_core3.setGlobalWidth)(effectiveWidth);
-  }, [effectiveWidth]);
-  (0, import_react5.useEffect)(() => {
-    if (!import_core3.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_core3.setGlobalWidth)(w);
-      });
-    };
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("resize", update);
-      cancelAnimationFrame(raf);
-    };
-  }, []);
-  const webScheme = useSyncExternalStore(
-    subscribeSystemScheme,
-    getSystemScheme,
-    getSystemSchemeServerSnapshot
-  );
-  const systemScheme = (0, import_core3.getEffectiveIsWeb)() ? webScheme : (colorScheme ?? nativeColorScheme) === "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_core3.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_core3.isWeb && resolvedConfig.darkMode === "media" && !_warnedMediaModeToggle) {
-      _warnedMediaModeToggle = true;
-      (0, import_core3.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_core3.syncGlobalDarkMode)(isDark);
-  useIsomorphicLayoutEffect(() => {
-    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
-    (0, import_core3.setGlobalDarkMode)(isDark);
-  }, [isDark, resolvedMode, resolvedConfig.darkMode]);
-  (0, import_react5.useEffect)(() => {
-    if (configOverride) return;
-    let mounted = true;
-    const unsub = (0, import_core3.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_core4 = require("./core");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function KbachReset() {
-  if (import_core4.isNative) return null;
-  if ((0, import_core4.isRuntimeCSSDisabled)()) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { id: import_core4.RESET_STYLE_ID, children: import_core4.BASE_RESET });
-}
-
-// src/styled.tsx
-var import_react6 = __toESM(require("react"));
-var import_core8 = require("./core");
-
-// src/useGlobalDarkMode.ts
-var import_core5 = require("./core");
-var NOOP_SUB = (_) => () => {
-};
-var FALSE_SNAP = () => false;
-function useGlobalDarkMode() {
-  return useSyncExternalStore(
-    import_core5.subscribeGlobalDarkMode,
-    import_core5.getGlobalDarkMode,
-    () => false
-    // SSR: default light
-  );
-}
-function useConditionalGlobalDarkMode(active) {
-  return useSyncExternalStore(
-    active ? import_core5.subscribeGlobalDarkMode : NOOP_SUB,
-    active ? import_core5.getGlobalDarkMode : FALSE_SNAP,
-    FALSE_SNAP
-  );
-}
-
-// src/useGlobalWidth.ts
-var import_core6 = 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_core6.isWeb ? subscribeWebWidth : import_core6.subscribeGlobalWidth,
-    import_core6.isWeb ? getWebWidth : import_core6.getGlobalWidth,
-    ZERO_SNAP
-  );
-}
-function useConditionalWidth(active) {
-  return useSyncExternalStore(
-    active ? import_core6.isWeb ? subscribeWebWidth : import_core6.subscribeGlobalWidth : NOOP_SUB2,
-    active ? import_core6.isWeb ? getWebWidth : import_core6.getGlobalWidth : ZERO_SNAP,
-    ZERO_SNAP
-  );
-}
-
-// src/shared-utils.ts
-var import_core7 = require("./core");
-function hasResponsiveBuckets(resolved) {
-  const responsiveMods = (0, import_core7.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_core7.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_core8.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_core8.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_core8.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_core8.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
-      const screens = (0, import_core8.getGlobalScreens)();
-      const computedStyle = (0, import_react6.useMemo)(
-        () => isWebPlatform ? {} : (0, import_core8.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_core8.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_core8.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_core9 = 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_core9.resolve)(normalised, config.theme, config.darkMode);
-    const breakpoints = (0, import_core9.getActiveBreakpoints)(width);
-    return (0, import_core9.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_core9.resolve)(normalised, config.theme, config.darkMode),
-    [normalised, config]
-  );
-}
-
-// src/useBreakpoint.ts
-var import_react8 = require("react");
-var import_core10 = 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_core10.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;
+function resolveClassValue(value) {
+  if (!value) return "";
+  const type = typeof value;
+  if (type === "string" || type === "number" || type === "bigint") return String(value);
+  if (Array.isArray(value)) return clsx(...value);
+  if (type === "object") {
+    let out = "";
+    for (const key in value) {
+      if (Object.prototype.hasOwnProperty.call(value, key) && value[key]) {
+        out = out ? `${out} ${key}` : key;
       }
     }
-    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_core10.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_core11 = 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_core11.getEffectiveIsWeb)();
-    const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
-    const needsWidth = hasResponsiveBuckets(resolvedStyle);
-    const width = useConditionalWidth(needsWidth && !isWebPlatform);
-    const breakpoints = needsWidth ? (0, import_core11.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
-    const screens = (0, import_core11.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_core11.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_core11.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_core11.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_core12 = require("./core");
-function kb(classString, isDark = false) {
-  const config = (0, import_core12.getConfig)();
-  const resolved = (0, import_core12.resolve)(classString, config.theme, config.darkMode);
-  if ((0, import_core12.getEffectiveIsWeb)()) {
-    return classString;
+    return out;
   }
-  return (0, import_core12.flatten)(resolved, isDark);
+  return "";
 }
-function cx(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-
-// src/index.ts
-var import_core13 = require("./core");
+var src_default = clsx;
 // 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
+  clsx
 });