@kbach/react 0.5.56 → 0.5.58

package/dist/{chunk-PESA3FMP.mjs → chunk-F5NQX5YO.mjs}

@@ -7,14 +7,14 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-JBV2R655.mjs";
+} from "./chunk-2HWRNTJG.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",
@@ -138,7 +152,7 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
   "showsVerticalScrollIndicator",
   "showsHorizontalScrollIndicator",
   "contentContainerStyle",
-  "horizontal",
+  // 'horizontal' is handled in transformToWebProps (converted to CSS overflow-x).
   "keyboardShouldPersistTaps",
   "keyboardDismissMode",
   "pagingEnabled",
@@ -222,6 +236,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") {
@@ -265,9 +281,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";
         }
@@ -283,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)) {
@@ -295,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";
 
@@ -436,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;
@@ -470,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,
@@ -497,6 +511,7 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 export {
   syncGlobalDarkMode,
   setGlobalDarkMode,
+  useGlobalDarkMode,
   EMPTY_BREAKPOINTS,
   useGlobalWidth,
   useConditionalWidth,
@@ -506,6 +521,5 @@ export {
   registerWebElement,
   getWebTag,
   transformToWebProps,
-  useGlobalDarkMode,
   InteractiveWrapper
 };

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-D-24rbXu.mjs';
-export { d as PluginAPI } from './types-D-24rbXu.mjs';
+import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-BESBQANS.mjs';
+export { d as PluginAPI } from './types-BESBQANS.mjs';
 export { r as registerWebElement } from './web-substitute-CfpYFnE7.mjs';
 
 declare const defaultColors: ThemeColors;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-D-24rbXu.js';
-export { d as PluginAPI } from './types-D-24rbXu.js';
+import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-BESBQANS.js';
+export { d as PluginAPI } from './types-BESBQANS.js';
 export { r as registerWebElement } from './web-substitute-CfpYFnE7.js';
 
 declare const defaultColors: ThemeColors;