@kbach/react 0.5.57 → 0.5.59

package/dist/jsx-dev-runtime.mjs

@@ -2,14 +2,14 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-UJBMEM6N.mjs";
-import "./chunk-VWEYYCBW.mjs";
-import "./chunk-JBV2R655.mjs";
+} from "./chunk-HRNOI54V.mjs";
+import "./chunk-2MVCYYH5.mjs";
+import "./chunk-NP4FVE77.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {
   const element = (isStaticChildren ? jsxs : jsx)(type, props, key);
-  if (source && element && typeof element === "object" && "_source" in Object.getPrototypeOf(element ?? {})) {
+  if (source && element && typeof element === "object") {
     element._source = source;
     element._self = self;
   }

package/dist/jsx-runtime.js

@@ -480,14 +480,15 @@ var defaultTheme = {
     normal: 1.5,
     relaxed: 1.625,
     loose: 2,
-    3: 12,
-    4: 16,
-    5: 20,
-    6: 24,
-    7: 28,
-    8: 32,
-    9: 36,
-    10: 40
+    // Pixel values stored as strings; styleValueToCSS passes them through, toNativeValue strips the unit
+    3: "12px",
+    4: "16px",
+    5: "20px",
+    6: "24px",
+    7: "28px",
+    8: "32px",
+    9: "36px",
+    10: "40px"
   },
   letterSpacing: {
     tighter: -0.8,
@@ -508,9 +509,12 @@ var defaultTheme = {
   },
   flex: {
     1: 1,
-    auto: 1,
-    initial: 0,
-    none: 0
+    auto: "auto",
+    // CSS: flex: auto = 1 1 auto; native: mapped to 1 in resolver
+    initial: "initial",
+    // CSS: flex: initial = 0 1 auto; native: mapped to 1
+    none: "none"
+    // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
   shadow: {
     sm: {
@@ -580,6 +584,7 @@ var defaultTheme = {
 var LRUCache = class {
   constructor(capacity = 1e4) {
     this.capacity = capacity;
+    if (capacity <= 0) throw new Error("LRUCache: capacity must be a positive integer");
     this.cache = /* @__PURE__ */ new Map();
   }
   get(key) {
@@ -599,11 +604,7 @@ var LRUCache = class {
     return this;
   }
   has(key) {
-    if (!this.cache.has(key)) return false;
-    const value = this.cache.get(key);
-    this.cache.delete(key);
-    this.cache.set(key, value);
-    return true;
+    return this.cache.has(key);
   }
   delete(key) {
     return this.cache.delete(key);
@@ -618,7 +619,7 @@ var LRUCache = class {
 
 // src/core/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative");
+var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative" || typeof globalThis.__REACT_NATIVE__ !== "undefined");
 var _cssGenMode = false;
 function getEffectiveIsWeb() {
   return isWeb || _cssGenMode || !isNative;
@@ -631,7 +632,7 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
 // src/core/registry.ts
@@ -708,6 +709,10 @@ function _invalidate() {
   _responsiveNames = null;
 }
 function registerModifier(name, def) {
+  if (process.env.NODE_ENV !== "production" && name in BUILTIN_MODIFIERS) {
+    console.warn(`[kbach] registerModifier: "${name}" is a built-in modifier and cannot be overridden. Use a different name.`);
+    return;
+  }
   _pluginModifiers[name] = def;
   _invalidate();
 }
@@ -789,7 +794,7 @@ function resolveColor(value, colors, isArbitrary) {
   }
   if (!hex) return null;
   if (!opacityPart) {
-    if (!isWeb && hex.startsWith("#") && hex.length === 9) {
+    if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
       return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
     }
     return hex;
@@ -823,7 +828,10 @@ function resolveSpacing(value, negative, spacing, isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
     if (negative) {
       if (typeof resolved === "number") return -resolved;
-      if (typeof resolved === "string" && /^\d/.test(resolved)) return `-${resolved}`;
+      if (typeof resolved === "string") {
+        if (/^\d/.test(resolved)) return `-${resolved}`;
+        if (/^(calc|var|min|max|clamp|env)\s*\(/.test(resolved)) return `calc(-1 * (${resolved}))`;
+      }
     }
     return resolved;
   }
@@ -1329,7 +1337,11 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     if (color) return { borderColor: color };
     const w = borderWidth[value] ?? spacing[value];
-    if (w !== void 0) return { borderWidth: typeof w === "number" ? w : parseFloat(String(w)) };
+    if (w !== void 0) {
+      const numW = typeof w === "number" ? w : parseFloat(String(w));
+      if (isNaN(numW)) return null;
+      return { borderWidth: numW };
+    }
     return null;
   },
   "border-t": ({ value, isArbitrary }, { colors, borderWidth }) => {
@@ -2032,7 +2044,7 @@ var RESOLVERS = {
   },
   // ── Tint color (native-only, for Image and icon components) ──────────────
   tint: ({ value, isArbitrary }, { colors }) => {
-    if (isWeb) return null;
+    if (getEffectiveIsWeb()) return null;
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { tintColor: color } : null;
   },
@@ -2104,7 +2116,15 @@ var RESOLVERS = {
       const v = parseFloat(value);
       return isNaN(v) ? null : { flex: v };
     }
-    if (value in flex) return { flex: flex[value] };
+    if (value in flex) {
+      const v = flex[value];
+      if (typeof v === "string" && !getEffectiveIsWeb()) {
+        if (v === "auto" || v === "initial") return { flex: 1 };
+        if (v === "none") return { flex: 0 };
+        return null;
+      }
+      return { flex: v };
+    }
     const n = parseFloat(value);
     return isNaN(n) ? null : { flex: n };
   },
@@ -2207,7 +2227,9 @@ var RESOLVERS = {
   leading: ({ value, isArbitrary }, { lineHeight }) => {
     if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
     const v = lineHeight[value];
-    return v !== void 0 ? { lineHeight: v } : null;
+    if (v === void 0) return null;
+    if (typeof v === "string" && !getEffectiveIsWeb()) return { lineHeight: toNativeValue(v) };
+    return { lineHeight: v };
   },
   // ── Letter spacing ─────────────────────────────────────────────────────────
   tracking: ({ value, isArbitrary }, { letterSpacing }) => {
@@ -2283,7 +2305,7 @@ var RESOLVERS = {
   transition: ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
     const presets = {
-      "": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 150ms",
+      "": "color 150ms, background-color 150ms, border-color 150ms, text-decoration-color 150ms, fill 150ms, stroke 150ms, opacity 150ms, box-shadow 150ms, transform 150ms, filter 150ms, backdrop-filter 150ms",
       all: "all 150ms",
       none: "none",
       colors: "color 150ms, background-color 150ms, border-color 150ms",
@@ -2296,11 +2318,13 @@ var RESOLVERS = {
   },
   duration: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDuration: ms };
   },
   delay: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
@@ -2343,14 +2367,20 @@ var RESOLVERS = {
       boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
     };
   },
-  // ── Space between (uses CSS gap or margin fallback) ────────────────────────
+  // ── Space between ─────────────────────────────────────────────────────────
+  // On web: emits __spaceX/__spaceY markers → resolver generates > * + * CSS rules.
+  // On native (RN 0.71+): uses columnGap/rowGap directly.
   "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { columnGap: v } : null;
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { __spaceX: v };
+    return { columnGap: v };
   },
   "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { rowGap: v } : null;
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { __spaceY: v };
+    return { rowGap: v };
   }
 };
 function resolveUtility(parsed, theme) {
@@ -2416,12 +2446,28 @@ function parseClass(className) {
     negative = true;
     remaining = remaining.slice(1);
   }
-  const bracketStart = remaining.lastIndexOf("-[");
-  if (bracketStart > 0 && remaining.endsWith("]")) {
-    const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
+  let bracketDepth = 0;
+  let bracketStart = -1;
+  for (let i = remaining.length - 1; i >= 0; i--) {
+    if (remaining[i] === "]") bracketDepth++;
+    else if (remaining[i] === "[") {
+      bracketDepth--;
+      if (bracketDepth === 0) {
+        bracketStart = i;
+        break;
+      }
+    }
+  }
+  if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
+    const utility = remaining.slice(0, bracketStart - 1);
+    const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.endsWith("]") && bracketStart === -1) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+    }
+  }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
     const value = remaining.slice(1, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
@@ -2456,6 +2502,7 @@ function splitClassTokens(classString) {
   const tokens = [];
   let current = "";
   let depth = 0;
+  let parenDepth = 0;
   for (let i = 0; i < classString.length; i++) {
     const ch = classString[i];
     if (ch === "[") {
@@ -2468,8 +2515,18 @@ function splitClassTokens(classString) {
       current += ch;
       continue;
     }
+    if (ch === "(") {
+      parenDepth++;
+      current += ch;
+      continue;
+    }
+    if (ch === ")") {
+      parenDepth--;
+      current += ch;
+      continue;
+    }
     if (/\s/.test(ch)) {
-      if (depth === 0) {
+      if (depth === 0 && parenDepth === 0) {
         if (current) {
           tokens.push(current);
           current = "";
@@ -2601,7 +2658,8 @@ function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
-    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+    const sheet = getStyleEl().sheet;
+    if (sheet) sheet.insertRule(rule, sheet.cssRules.length);
   } catch {
   }
 }
@@ -2617,24 +2675,41 @@ function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [BASE_RESET];
   const ff = theme.fontFamily;
+  if (!ff) return;
   if (ff.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
     rules.push(`body { font-family: ${family}; }`);
   }
   getGlobalStyleEl().textContent = rules.join("\n");
 }
-function buildDivideDecls(styles) {
+function buildDivideDecls(styles, forceImportant) {
+  const imp = forceImportant ? " !important" : "";
   const parts = [];
   if ("__divideX" in styles) {
     const w = Number(styles.__divideX);
-    parts.push(`border-left-width: ${w}px`, "border-right-width: 0px");
+    parts.push(`border-left-width: ${w}px${imp}`, `border-right-width: 0px${imp}`);
   }
   if ("__divideY" in styles) {
     const w = Number(styles.__divideY);
-    parts.push(`border-top-width: ${w}px`, "border-bottom-width: 0px");
+    parts.push(`border-top-width: ${w}px${imp}`, `border-bottom-width: 0px${imp}`);
+  }
+  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}${imp}`);
+  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}${imp}`);
+  return parts.join("; ");
+}
+function buildSpaceDecls(styles, forceImportant) {
+  const imp = forceImportant ? " !important" : "";
+  const parts = [];
+  if ("__spaceX" in styles) {
+    const v = styles.__spaceX;
+    const val = typeof v === "number" ? `${v}px` : String(v);
+    parts.push(`margin-left: ${val}${imp}`);
+  }
+  if ("__spaceY" in styles) {
+    const v = styles.__spaceY;
+    const val = typeof v === "number" ? `${v}px` : String(v);
+    parts.push(`margin-top: ${val}${imp}`);
   }
-  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}`);
-  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
   return parts.join("; ");
 }
 var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
@@ -2654,7 +2729,9 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "__divideY",
   "__divideColor",
   "__divideStyle",
-  "__keyframe"
+  "__keyframe",
+  "__spaceX",
+  "__spaceY"
 ]);
 var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "opacity",
@@ -2707,10 +2784,12 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
     rules.push(styles.__keyframe);
   }
   const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
+  const isSpace = "__spaceX" in styles || "__spaceY" in styles;
+  const isChildCombinator = isDivide || isSpace;
   const escaped = escapeCSSSelector(cls);
-  const childSuffix = isDivide ? " > * + *" : "";
+  const childSuffix = isChildCombinator ? " > * + *" : "";
   if (bucketKey === "base") {
-    const decls2 = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    const decls2 = isDivide ? buildDivideDecls(styles, important) : isSpace ? buildSpaceDecls(styles, important) : styleValueToCSS(styles, important);
     if (!decls2) return rules;
     rules.push(`.${escaped}${childSuffix} { ${decls2} }`);
     return rules;
@@ -2751,7 +2830,7 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
   const ancestorPrefix = ancestorParts.join("");
   const dirPrefix = dirParts.join("");
   const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
-  const decls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  const decls = isDivide ? buildDivideDecls(styles, needsImportant) : isSpace ? buildSpaceDecls(styles, needsImportant) : styleValueToCSS(styles, needsImportant);
   if (!decls) return rules;
   let rule;
   if (darkScheme === "dark") {
@@ -2780,11 +2859,11 @@ function resolve(classString, theme, darkMode = "attribute") {
   const cached = cache.get(cacheKey);
   if (cached) return cached;
   const result = {};
-  const onWeb = typeof document !== "undefined";
+  const onWeb = isWeb;
   for (const parsed of parseClasses(classString)) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
-      if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility)) {
+      if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility) && !parsed.original.startsWith("__")) {
         console.warn(`[kbach] Unknown utility "${parsed.utility}" in class "${parsed.original}"`);
       }
       continue;
@@ -2917,19 +2996,24 @@ function buildConfig(userConfig) {
     theme = deepMerge(theme, userConfig.theme);
   }
   if (userConfig.extend) {
-    const { theme: nestedTheme, ...directKeys } = userConfig.extend;
+    const extendConfig = userConfig.extend;
+    const { theme: nestedTheme, ...directKeys } = extendConfig;
     const extSources = [];
     if (nestedTheme) extSources.push(nestedTheme);
     if (Object.keys(directKeys).length) extSources.push(directKeys);
     for (const ext of extSources) {
       for (const [key, value] of Object.entries(ext)) {
+        if (typeof value !== "object" || value === null || Array.isArray(value)) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(`[kbach] config.extend.${key} must be a plain object, got ${typeof value}. Skipping.`);
+          }
+          continue;
+        }
         if (value !== null && typeof value === "object" && !Array.isArray(value)) {
           theme[key] = deepMerge(
             theme[key] ?? {},
             value
           );
-        } else if (value !== void 0) {
-          theme[key] = value;
         }
       }
     }
@@ -2940,8 +3024,10 @@ function buildConfig(userConfig) {
     theme,
     plugins: userConfig.plugins ?? []
   };
-  clearPluginUtilities();
-  clearPluginModifiers();
+  if (userConfig.plugins !== void 0) {
+    clearPluginUtilities();
+    clearPluginModifiers();
+  }
   const _store = getConfigStore();
   for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
   const pluginAPI = makePluginAPI(resolved.theme);
@@ -2959,7 +3045,7 @@ function _selectorToModifierDef(selector) {
   if (s.startsWith("@media ")) {
     return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
   }
-  if (s.startsWith("::") || s.startsWith(":")) {
+  if (s.startsWith("::") || s.startsWith(":") && !s.includes(" ") && !s.includes("&") && !s.includes("(")) {
     return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
   }
   return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
@@ -2972,8 +3058,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
-      customVariants[name] = selector;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? null;
+      if (selector !== null && selector !== name) customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -2990,6 +3076,11 @@ function makePluginAPI(theme) {
     }
   };
 }
+function onConfigChange(listener) {
+  const store = getConfigStore();
+  store.listeners.add(listener);
+  return () => store.listeners.delete(listener);
+}
 var customVariants = new Proxy(
   {},
   {
@@ -3016,7 +3107,7 @@ var KEY = "__kbach_dark_store__";
 function getStore2() {
   const g = globalThis;
   if (!g[KEY]) {
-    g[KEY] = { isDark: false, lastNotified: false, subscribers: /* @__PURE__ */ new Set() };
+    g[KEY] = { isDark: false, subscribers: /* @__PURE__ */ new Set() };
   }
   return g[KEY];
 }
@@ -3148,10 +3239,11 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const handleMouseLeave = (0, import_react3.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = (0, import_react3.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const { children, disabled, checked, ...restForComponent } = rest;
     const computedStyle = (0, import_react3.useMemo)(
       () => {
         if (isWeb) return {};
-        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!rest.disabled, checked: !!rest.checked }, breakpoints);
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
         delete s.__divideX;
         delete s.__divideY;
         delete s.__divideColor;
@@ -3182,20 +3274,20 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
         }
         return s;
       },
-      [resolvedStyle, isDark, pressed, hovered, focused, width]
-      // eslint-disable-line react-hooks/exhaustive-deps
+      [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked]
     );
     const skipComputedInline = isWeb || !isNative && typeof Component === "string";
     const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
-    const { children, ...restWithoutChildren } = rest;
     const componentProps = {
       ref,
-      ...restWithoutChildren,
+      ...restForComponent,
+      ...disabled !== void 0 ? { disabled } : {},
+      ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // onPressIn / onPressOut are React Native-only.
       // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -3214,6 +3306,7 @@ var DarkWrapper = import_react4.default.forwardRef(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS2;
+    const screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = (0, import_react4.useMemo)(() => {
       if (isWeb) return {};
@@ -3221,7 +3314,7 @@ var DarkWrapper = import_react4.default.forwardRef(
       stripInternalMarkers(s);
       if (isNonStringComponent) stripWebOnlyProps(s);
       return s;
-    }, [resolvedStyle, isDark, width, isNonStringComponent]);
+    }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWeb || !isNative && typeof Component === "string";
     const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
@@ -3296,8 +3389,8 @@ function getWebTag(type, props) {
     _cache.set(obj, null);
     return null;
   }
-  if (name === "TextInput" && props) {
-    const multiline = props.multiline === true || Number(props.numberOfLines) > 1;
+  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);
@@ -3334,8 +3427,7 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
   "shouldRasterizeIOS",
   "focusable",
   "hasTVPreferredFocus",
-  "pointerEvents",
-  // RN and HTML values differ
+  // 'pointerEvents' is handled in transformToWebProps (mapped to CSS style)
   // Text
   "selectable",
   "allowFontScaling",
@@ -3446,6 +3538,7 @@ function transformToWebProps(originalName, tag, props) {
   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") {
@@ -3490,10 +3583,11 @@ function transformToWebProps(originalName, tag, props) {
       }
     }
     if (isScrollable && k === "horizontal") {
-      if (v) {
-        const existing = out.style ?? {};
-        out.style = { display: "flex", flexDirection: "row", overflowX: "auto", ...existing };
-      }
+      if (v) pendingStyle = { display: "flex", flexDirection: "row", overflowX: "auto" };
+      continue;
+    }
+    if (k === "pointerEvents") {
+      if (v === "none" || v === "auto") pendingStyle = { ...pendingStyle ?? {}, pointerEvents: v };
       continue;
     }
     if (isImage) {
@@ -3516,7 +3610,7 @@ function transformToWebProps(originalName, tag, props) {
         out.style = { ...existing, objectFit: v };
         continue;
       }
-      if (k === "alt" || k === "defaultSource") continue;
+      if (k === "defaultSource") continue;
     }
     if (k === "style") {
       if (Array.isArray(v)) {
@@ -3528,6 +3622,9 @@ function transformToWebProps(originalName, tag, props) {
     }
     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;
@@ -3540,6 +3637,7 @@ var _lastFontVersion = -1;
 function _invalidateDefaultFontCache() {
   _defaultFontVersion++;
 }
+onConfigChange(_invalidateDefaultFontCache);
 function getCachedDefaultFont() {
   if (_lastFontVersion !== _defaultFontVersion) {
     _cachedDefaultFont = getDefaultFontFamily();
@@ -3615,7 +3713,7 @@ function stripWebOnlyInlineProps(s) {
   }
 }
 function processElement(type, rawProps, key, isStaticChildren) {
-  if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
+  if (type === null || typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
   const effectiveType = webTag ?? type;
   const originalName = webTag ? type?.displayName ?? type?.name : void 0;
@@ -3631,6 +3729,14 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
+  if (classStr && !__kbachStyles && /^(__[^\s]+\s*)+$/.test(classStr.trim())) {
+    const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
+    return makeElement(isStaticChildren, effectiveType, {
+      ...passProps2,
+      className: classStr,
+      ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
+    }, key);
+  }
   if (!classStr && !__kbachStyles) {
     if (isWeb) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
@@ -3673,7 +3779,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   return makeElement(isStaticChildren, effectiveType, {
     ...passProps,
-    style: finalStyle,
+    ...finalStyle !== void 0 ? { style: finalStyle } : {},
     ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}
   }, key);
 }

package/dist/jsx-runtime.mjs

@@ -3,11 +3,11 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-UJBMEM6N.mjs";
+} from "./chunk-HRNOI54V.mjs";
 import {
   registerWebElement
-} from "./chunk-VWEYYCBW.mjs";
-import "./chunk-JBV2R655.mjs";
+} from "./chunk-2MVCYYH5.mjs";
+import "./chunk-NP4FVE77.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/{types-D-24rbXu.d.ts → types-BESBQANS.d.mts}

@@ -44,7 +44,7 @@ interface ModifierDef {
 
 type ThemeMode = 'light' | 'dark' | 'system';
 interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | unknown[];
+    [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
 }
 interface ParsedClass {
     /** The original class string, e.g. "dark:hover:bg-[#fff]" */
@@ -83,11 +83,16 @@ interface ThemeConfig {
     lineHeight: Record<string, number | string>;
     letterSpacing: Record<string, number | string>;
     zIndex: Record<string, number | string>;
-    flex: Record<string, number>;
+    flex: Record<string, number | string>;
     shadow: Record<string, StyleValue>;
     screens: Record<string, string | number>;
     [key: string]: unknown;
 }
+/**
+ * 'class'     — toggles .dark class on <html>
+ * 'media'     — uses prefers-color-scheme media query
+ * 'attribute' — uses data-theme="dark" attribute on <html>
+ */
 type DarkMode = 'attribute' | 'class' | 'media';
 interface PluginAPI {
     addUtility(name: string, styles: StyleValue): void;