@kbach/react 0.5.57 → 0.5.58

package/dist/index.js

@@ -592,14 +592,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,
@@ -620,9 +621,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: {
@@ -692,6 +696,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) {
@@ -711,11 +716,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);
@@ -730,7 +731,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;
@@ -743,7 +744,7 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
 // src/core/registry.ts
@@ -820,6 +821,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();
 }
@@ -895,7 +900,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;
@@ -929,7 +934,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;
   }
@@ -1435,7 +1443,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 }) => {
@@ -2138,7 +2150,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;
   },
@@ -2210,7 +2222,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 };
   },
@@ -2313,7 +2333,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 }) => {
@@ -2389,7 +2411,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",
@@ -2402,11 +2424,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 };
   },
@@ -2449,14 +2473,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) {
@@ -2522,12 +2552,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 };
@@ -2562,6 +2608,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 === "[") {
@@ -2574,8 +2621,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 = "";
@@ -2649,7 +2706,7 @@ function setGlobalWidth(width) {
   const store = getStore();
   if (store.width === width) return;
   store.width = width;
-  for (const l of store.listeners) l(width);
+  for (const l of store.listeners) l();
 }
 function getGlobalWidth() {
   return getStore().width;
@@ -2722,7 +2779,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 {
   }
 }
@@ -2738,24 +2796,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([
@@ -2775,7 +2850,9 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "__divideY",
   "__divideColor",
   "__divideStyle",
-  "__keyframe"
+  "__keyframe",
+  "__spaceX",
+  "__spaceY"
 ]);
 var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "opacity",
@@ -2828,10 +2905,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;
@@ -2872,7 +2951,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") {
@@ -2901,7 +2980,7 @@ 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) {
@@ -2974,6 +3053,10 @@ function clearCache() {
     _styleEl.remove();
     _styleEl = null;
   }
+  if (_globalStyleEl) {
+    _globalStyleEl.remove();
+    _globalStyleEl = null;
+  }
 }
 
 // src/core/config.ts
@@ -3045,19 +3128,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;
         }
       }
     }
@@ -3068,8 +3156,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);
@@ -3087,7 +3177,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 };
@@ -3100,8 +3190,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) {
@@ -3162,7 +3252,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];
 }
@@ -3171,9 +3261,8 @@ function syncGlobalDarkMode(isDark) {
 }
 function setGlobalDarkMode(isDark) {
   const store = getStore2();
+  if (store.isDark === isDark) return;
   store.isDark = isDark;
-  if (store.lastNotified === isDark) return;
-  store.lastNotified = isDark;
   for (const sub of store.subscribers) sub();
 }
 function getGlobalDarkMode() {
@@ -3461,15 +3550,31 @@ function ThemeToggle({
 }
 
 // src/styled.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
-// src/useGlobalWidth.ts
+// src/useGlobalDarkMode.ts
 var import_react5 = __toESM(require("react"));
 var useSyncExternalStore = import_react5.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
   const [, forceUpdate] = import_react5.default.useReducer((n) => n + 1, 0);
   import_react5.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
   return getSnapshot();
 };
+function useGlobalDarkMode() {
+  return useSyncExternalStore(
+    subscribeGlobalDarkMode,
+    getGlobalDarkMode,
+    () => false
+    // SSR: default light
+  );
+}
+
+// src/useGlobalWidth.ts
+var import_react6 = __toESM(require("react"));
+var useSyncExternalStore2 = import_react6.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react6.default.useReducer((n) => n + 1, 0);
+  import_react6.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
 var NOOP_SUB = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
@@ -3503,14 +3608,14 @@ function getWebWidth() {
   return typeof window !== "undefined" ? window.innerWidth : 0;
 }
 function useGlobalWidth() {
-  return useSyncExternalStore(
+  return useSyncExternalStore2(
     isWeb ? subscribeWebWidth : subscribeGlobalWidth,
     isWeb ? getWebWidth : getGlobalWidth,
     ZERO_SNAP
   );
 }
 function useConditionalWidth(active) {
-  return useSyncExternalStore(
+  return useSyncExternalStore2(
     active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
     active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
@@ -3575,8 +3680,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);
@@ -3613,8 +3718,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",
@@ -3725,6 +3829,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") {
@@ -3769,10 +3874,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) {
@@ -3795,7 +3901,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)) {
@@ -3807,6 +3913,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;
@@ -3814,7 +3923,7 @@ function transformToWebProps(originalName, tag, props) {
 
 // src/styled.tsx
 function styled(Component, baseClasses = "") {
-  const Styled = (0, import_react6.forwardRef)(
+  const Styled = (0, import_react7.forwardRef)(
     (props, ref) => {
       const {
         kb: extraClasses,
@@ -3832,53 +3941,54 @@ function styled(Component, baseClasses = "") {
       } = props;
       const disabled = !!props.disabled;
       const checked = !!props.checked;
-      const { isDark, config } = useTheme();
-      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)((e) => {
+      const { config } = useTheme();
+      const isDark = useGlobalDarkMode();
+      const [pressed, setPressed] = (0, import_react7.useState)(false);
+      const [hovered, setHovered] = (0, import_react7.useState)(false);
+      const [focused, setFocused] = (0, import_react7.useState)(false);
+      const handlePressIn = (0, import_react7.useCallback)((e) => {
         setPressed(true);
         onPressIn?.(e);
       }, [onPressIn]);
-      const handlePressOut = (0, import_react6.useCallback)((e) => {
+      const handlePressOut = (0, import_react7.useCallback)((e) => {
         setPressed(false);
         onPressOut?.(e);
       }, [onPressOut]);
-      const handlePointerDown = (0, import_react6.useCallback)((e) => {
+      const handlePointerDown = (0, import_react7.useCallback)((e) => {
         setPressed(true);
         onPointerDown?.(e);
       }, [onPointerDown]);
-      const handlePointerUp = (0, import_react6.useCallback)((e) => {
+      const handlePointerUp = (0, import_react7.useCallback)((e) => {
         setPressed(false);
         onPointerUp?.(e);
       }, [onPointerUp]);
-      const handlePointerLeave = (0, import_react6.useCallback)((e) => {
+      const handlePointerLeave = (0, import_react7.useCallback)((e) => {
         setPressed(false);
         onPointerLeave?.(e);
       }, [onPointerLeave]);
-      const handleMouseEnter = (0, import_react6.useCallback)((e) => {
+      const handleMouseEnter = (0, import_react7.useCallback)((e) => {
         setHovered(true);
         onMouseEnter?.(e);
       }, [onMouseEnter]);
-      const handleMouseLeave = (0, import_react6.useCallback)((e) => {
+      const handleMouseLeave = (0, import_react7.useCallback)((e) => {
         setHovered(false);
         onMouseLeave?.(e);
       }, [onMouseLeave]);
-      const handleFocus = (0, import_react6.useCallback)((e) => {
+      const handleFocus = (0, import_react7.useCallback)((e) => {
         setFocused(true);
         onFocus?.(e);
       }, [onFocus]);
-      const handleBlur = (0, import_react6.useCallback)((e) => {
+      const handleBlur = (0, import_react7.useCallback)((e) => {
         setFocused(false);
         onBlur?.(e);
       }, [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react6.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
+      const resolved = (0, import_react7.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const hasInteractive = (0, import_react7.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-      const computedStyle = (0, import_react6.useMemo)(
+      const computedStyle = (0, import_react7.useMemo)(
         () => isWeb ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
@@ -3889,7 +3999,7 @@ function styled(Component, baseClasses = "") {
       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, {
+      return import_react7.default.createElement(effectiveComponent, {
         ref,
         ...effectiveRest,
         style: finalStyle,
@@ -3897,7 +4007,7 @@ function styled(Component, baseClasses = "") {
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
-        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPointerDown, onPointerUp, onPointerLeave } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPointerDown, onPointerUp, onPointerLeave } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,
@@ -3911,42 +4021,26 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
     const breakpoints = getActiveBreakpoints(width);
     return flatten(resolved, isDark, state, breakpoints);
-  }, [normalised, isDark, config, width, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
+  }, [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)(
+  return (0, import_react8.useMemo)(
     () => resolve(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
-// src/useGlobalDarkMode.ts
-var import_react8 = __toESM(require("react"));
-var useSyncExternalStore2 = import_react8.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react8.default.useReducer((n) => n + 1, 0);
-  import_react8.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
-  return getSnapshot();
-};
-function useGlobalDarkMode() {
-  return useSyncExternalStore2(
-    subscribeGlobalDarkMode,
-    getGlobalDarkMode,
-    () => false
-    // SSR: default light
-  );
-}
-
 // src/useBreakpoint.ts
 var import_react9 = require("react");
 function useBreakpoint() {
@@ -3954,7 +4048,7 @@ function useBreakpoint() {
   const width = useGlobalWidth();
   const screens = config.theme.screens;
   const sorted = (0, import_react9.useMemo)(
-    () => Object.entries(screens).filter(([, v]) => typeof v === "number").sort(([, a], [, b]) => b - a),
+    () => Object.entries(screens).filter((entry) => typeof entry[1] === "number").sort(([, a], [, b]) => b - a),
     [screens]
   );
   for (const [name, minW] of sorted) {
@@ -4016,10 +4110,11 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
     const handleMouseLeave = (0, import_react10.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = (0, import_react10.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = (0, import_react10.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const { children, disabled, checked, ...restForComponent } = rest;
     const computedStyle = (0, import_react10.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;
@@ -4050,20 +4145,20 @@ var InteractiveWrapper = (0, import_react10.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,