@kbach/react 0.5.56 → 0.5.58

package/dist/index.mjs

@@ -11,7 +11,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-PESA3FMP.mjs";
+} from "./chunk-F5NQX5YO.mjs";
 import {
   __require,
   buildConfig,
@@ -33,7 +33,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-JBV2R655.mjs";
+} from "./chunk-2HWRNTJG.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -429,7 +429,8 @@ function styled(Component, baseClasses = "") {
       } = props;
       const disabled = !!props.disabled;
       const checked = !!props.checked;
-      const { isDark, config } = useTheme();
+      const { config } = useTheme();
+      const isDark = useGlobalDarkMode();
       const [pressed, setPressed] = useState2(false);
       const [hovered, setHovered] = useState2(false);
       const [focused, setFocused] = useState2(false);
@@ -494,7 +495,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,
@@ -517,7 +518,7 @@ function useStyles(classString, state = {}) {
     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();
@@ -535,7 +536,7 @@ function useBreakpoint() {
   const width = useGlobalWidth();
   const screens = config.theme.screens;
   const sorted = useMemo5(
-    () => 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) {

package/dist/jsx-dev-runtime.js

@@ -479,14 +479,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,
@@ -507,9 +508,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: {
@@ -579,6 +583,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) {
@@ -598,11 +603,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);
@@ -617,7 +618,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;
@@ -630,7 +631,7 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
 // src/core/registry.ts
@@ -707,6 +708,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();
 }
@@ -788,7 +793,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;
@@ -822,7 +827,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;
   }
@@ -1328,7 +1336,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 }) => {
@@ -2031,7 +2043,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;
   },
@@ -2103,7 +2115,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 };
   },
@@ -2206,7 +2226,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 }) => {
@@ -2282,7 +2304,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",
@@ -2295,11 +2317,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 };
   },
@@ -2342,14 +2366,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) {
@@ -2415,12 +2445,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 };
@@ -2455,6 +2501,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 === "[") {
@@ -2467,8 +2514,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 = "";
@@ -2600,7 +2657,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 {
   }
 }
@@ -2616,24 +2674,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([
@@ -2653,7 +2728,9 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "__divideY",
   "__divideColor",
   "__divideStyle",
-  "__keyframe"
+  "__keyframe",
+  "__spaceX",
+  "__spaceY"
 ]);
 var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "opacity",
@@ -2706,10 +2783,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;
@@ -2750,7 +2829,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") {
@@ -2779,7 +2858,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) {
@@ -2916,19 +2995,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;
         }
       }
     }
@@ -2939,8 +3023,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);
@@ -2958,7 +3044,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 };
@@ -2971,8 +3057,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) {
@@ -2989,6 +3075,11 @@ function makePluginAPI(theme) {
     }
   };
 }
+function onConfigChange(listener) {
+  const store = getConfigStore();
+  store.listeners.add(listener);
+  return () => store.listeners.delete(listener);
+}
 var customVariants = new Proxy(
   {},
   {
@@ -3015,7 +3106,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];
 }
@@ -3147,10 +3238,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;
@@ -3181,20 +3273,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,
@@ -3213,6 +3305,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 {};
@@ -3220,7 +3313,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 };
@@ -3290,8 +3383,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);
@@ -3328,8 +3421,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",
@@ -3355,7 +3447,7 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
   "showsVerticalScrollIndicator",
   "showsHorizontalScrollIndicator",
   "contentContainerStyle",
-  "horizontal",
+  // 'horizontal' is handled in transformToWebProps (converted to CSS overflow-x).
   "keyboardShouldPersistTaps",
   "keyboardDismissMode",
   "pagingEnabled",
@@ -3439,6 +3531,8 @@ function transformToWebProps(originalName, tag, props) {
   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") {
@@ -3482,9 +3576,19 @@ function transformToWebProps(originalName, tag, props) {
         continue;
       }
     }
+    if (isScrollable && k === "horizontal") {
+      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) {
       if (k === "source") {
-        if (v && typeof v === "object" && "uri" in v) {
+        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";
         }
@@ -3500,7 +3604,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)) {
@@ -3512,6 +3616,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;
@@ -3521,6 +3628,10 @@ function transformToWebProps(originalName, tag, props) {
 var _cachedDefaultFont = void 0;
 var _defaultFontVersion = 0;
 var _lastFontVersion = -1;
+function _invalidateDefaultFontCache() {
+  _defaultFontVersion++;
+}
+onConfigChange(_invalidateDefaultFontCache);
 function getCachedDefaultFont() {
   if (_lastFontVersion !== _defaultFontVersion) {
     _cachedDefaultFont = getDefaultFontFamily();
@@ -3596,7 +3707,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;
@@ -3654,7 +3765,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);
 }
@@ -3668,7 +3779,7 @@ function jsxs(type, props, key) {
 // 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;
   }