@kbach/react 0.5.57 → 0.5.59

package/dist/{chunk-VWEYYCBW.mjs → chunk-2MVCYYH5.mjs}

@@ -7,14 +7,14 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-JBV2R655.mjs";
+} from "./chunk-NP4FVE77.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";
 function getStore() {
   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];
 }
@@ -23,9 +23,8 @@ function syncGlobalDarkMode(isDark) {
 }
 function setGlobalDarkMode(isDark) {
   const store = getStore();
+  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() {
@@ -37,6 +36,22 @@ function subscribeGlobalDarkMode(callback) {
   return () => store.subscribers.delete(callback);
 }
 
+// src/useGlobalDarkMode.ts
+import React from "react";
+var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = React.useReducer((n) => n + 1, 0);
+  React.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+function useGlobalDarkMode() {
+  return useSyncExternalStore(
+    subscribeGlobalDarkMode,
+    getGlobalDarkMode,
+    () => false
+    // SSR: default light
+  );
+}
+
 // src/web-substitute.ts
 var _rnToHtml = {
   View: "div",
@@ -73,8 +88,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);
@@ -111,8 +126,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",
@@ -223,6 +237,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") {
@@ -267,10 +282,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) {
@@ -293,7 +309,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)) {
@@ -305,27 +321,14 @@ 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;
 }
 
-// src/useGlobalDarkMode.ts
-import React from "react";
-var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = React.useReducer((n) => n + 1, 0);
-  React.useEffect(() => subscribe(forceUpdate), [subscribe]);
-  return getSnapshot();
-};
-function useGlobalDarkMode() {
-  return useSyncExternalStore(
-    subscribeGlobalDarkMode,
-    getGlobalDarkMode,
-    () => false
-    // SSR: default light
-  );
-}
-
 // src/InteractiveWrapper.tsx
 import React3, { forwardRef, useState, useCallback, useMemo } from "react";
 
@@ -446,10 +449,11 @@ var InteractiveWrapper = forwardRef(
     const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const { children, disabled, checked, ...restForComponent } = rest;
     const computedStyle = 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;
@@ -480,20 +484,20 @@ var InteractiveWrapper = 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,
@@ -507,6 +511,7 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 export {
   syncGlobalDarkMode,
   setGlobalDarkMode,
+  useGlobalDarkMode,
   EMPTY_BREAKPOINTS,
   useGlobalWidth,
   useConditionalWidth,
@@ -516,6 +521,5 @@ export {
   registerWebElement,
   getWebTag,
   transformToWebProps,
-  useGlobalDarkMode,
   InteractiveWrapper
 };

package/dist/{chunk-UJBMEM6N.mjs → chunk-HRNOI54V.mjs}

@@ -6,12 +6,13 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-VWEYYCBW.mjs";
+} from "./chunk-2MVCYYH5.mjs";
 import {
   flatten,
   getActiveBreakpoints,
   getConfig,
   getDefaultFontFamily,
+  getGlobalScreens,
   getInteractiveModifiers,
   getModeModifiers,
   getResponsiveModifiers,
@@ -19,8 +20,9 @@ import {
   isRuntimeCSSDisabled,
   isWeb,
   normalizeClassString,
+  onConfigChange,
   resolve
-} from "./chunk-JBV2R655.mjs";
+} from "./chunk-NP4FVE77.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,6 +36,7 @@ var DarkWrapper = React.forwardRef(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+    const screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = useMemo(() => {
       if (isWeb) return {};
@@ -41,7 +44,7 @@ var DarkWrapper = React.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 };
@@ -87,6 +90,7 @@ var _lastFontVersion = -1;
 function _invalidateDefaultFontCache() {
   _defaultFontVersion++;
 }
+onConfigChange(_invalidateDefaultFontCache);
 function getCachedDefaultFont() {
   if (_lastFontVersion !== _defaultFontVersion) {
     _cachedDefaultFont = getDefaultFontFamily();
@@ -162,7 +166,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;
@@ -178,6 +182,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();
@@ -220,7 +232,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);
 }