@kbach/react 0.5.48 → 0.5.49

package/dist/index.js

@@ -3536,7 +3536,91 @@ function hasInteractiveBuckets(resolved) {
   }
   return false;
 }
-var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
+
+// src/web-substitute.ts
+var _rnToHtml = {
+  View: "div",
+  SafeAreaView: "div",
+  KeyboardAvoidingView: "div",
+  ScrollView: "div",
+  VirtualizedList: "div",
+  Text: "span",
+  Pressable: "div",
+  TouchableOpacity: "div",
+  TouchableHighlight: "div",
+  TouchableWithoutFeedback: "div",
+  TouchableNativeFeedback: "div"
+};
+var _userMap = /* @__PURE__ */ new Map();
+var _cache = /* @__PURE__ */ new WeakMap();
+function registerWebElement(rnComponent, htmlTag) {
+  if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
+  _userMap.set(rnComponent, htmlTag);
+  _cache.delete(rnComponent);
+}
+function getWebTag(type) {
+  if (typeof type === "string") return null;
+  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
+  const obj = type;
+  if (_userMap.has(obj)) return _userMap.get(obj);
+  if (_cache.has(obj)) return _cache.get(obj);
+  const name = obj.displayName ?? obj.name;
+  const tag = name ? _rnToHtml[name] ?? null : null;
+  _cache.set(obj, tag);
+  return tag;
+}
+var _rnOnlyProps = /* @__PURE__ */ new Set([
+  "onLongPress",
+  "delayLongPress",
+  "activeOpacity",
+  "underlayColor",
+  "hitSlop",
+  "pressRetentionOffset",
+  "accessible",
+  "accessibilityState",
+  "accessibilityLiveRegion",
+  "importantForAccessibility",
+  "nativeID",
+  "collapsable",
+  "needsOffscreenAlphaCompositing",
+  "renderToHardwareTextureAndroid",
+  "shouldRasterizeIOS",
+  "pointerEvents"
+  // RN and HTML values differ
+]);
+var _pressableNames = /* @__PURE__ */ new Set([
+  "Pressable",
+  "TouchableOpacity",
+  "TouchableHighlight",
+  "TouchableWithoutFeedback",
+  "TouchableNativeFeedback"
+]);
+function transformToWebProps(originalName, props) {
+  const out = {};
+  const isPressable = _pressableNames.has(originalName);
+  for (const [k, v] of Object.entries(props)) {
+    if (_rnOnlyProps.has(k)) continue;
+    if (k === "onPress") {
+      if (!("onClick" in props)) out.onClick = v;
+      continue;
+    }
+    if (k === "accessibilityLabel") {
+      if (out["aria-label"] == null) out["aria-label"] = v;
+      continue;
+    }
+    if (k === "accessibilityRole") {
+      if (out.role == null) out.role = v;
+      continue;
+    }
+    if (k === "testID") {
+      if (out["data-testid"] == null) out["data-testid"] = v;
+      continue;
+    }
+    out[k] = v;
+  }
+  if (isPressable && !out.role) out.role = "button";
+  return out;
+}
 
 // src/styled.tsx
 function styled(Component, baseClasses = "") {
@@ -3611,9 +3695,13 @@ function styled(Component, baseClasses = "") {
       );
       const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
       const finalStyle = isWeb ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
-      return import_react6.default.createElement(Component, {
+      const webTag = isWeb ? getWebTag(Component) : null;
+      const effectiveComponent = webTag ?? Component;
+      const componentName2 = Component.displayName ?? Component.name ?? "";
+      const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, rest) : rest;
+      return import_react6.default.createElement(effectiveComponent, {
         ref,
-        ...rest,
+        ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
@@ -3807,72 +3895,6 @@ function kb(classString, isDark = false) {
 function cx(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-
-// src/jsx-runtime.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var import_react12 = require("react");
-
-// src/DarkWrapper.tsx
-var import_react11 = __toESM(require("react"));
-var DarkWrapper = import_react11.default.forwardRef(
-  function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
-    const isDark = useGlobalDarkMode();
-    const needsWidth = hasResponsiveBuckets(resolvedStyle);
-    const width = useConditionalWidth(needsWidth);
-    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS2;
-    const isNonStringComponent = typeof Component !== "string";
-    const computedStyle = (0, import_react11.useMemo)(() => {
-      const s = flatten(resolvedStyle, isDark, {}, breakpoints);
-      stripInternalMarkers(s);
-      if (isNonStringComponent) stripWebOnlyProps(s);
-      return s;
-    }, [resolvedStyle, isDark, width, 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 };
-    return Array.isArray(children) ? import_react11.default.createElement(Component, props, ...children) : import_react11.default.createElement(Component, props, children);
-  }
-);
-DarkWrapper.displayName = "Kbach.DarkWrapper";
-function stripInternalMarkers(s) {
-  delete s.__divideX;
-  delete s.__divideY;
-  delete s.__divideColor;
-  delete s.__divideStyle;
-  delete s.__keyframe;
-}
-function stripWebOnlyProps(s) {
-  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
-  delete s.gridTemplateColumns;
-  delete s.gridTemplateRows;
-  delete s.gridColumn;
-  delete s.gridRow;
-  delete s.gridArea;
-  delete s.gridColumnStart;
-  delete s.gridColumnEnd;
-  delete s.gridRowStart;
-  delete s.gridRowEnd;
-  delete s.gridAutoFlow;
-  delete s.gridAutoColumns;
-  delete s.gridAutoRows;
-  delete s.placeItems;
-  delete s.placeContent;
-  delete s.justifyItems;
-  delete s.placeSelf;
-  delete s.justifySelf;
-  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
-    delete s.position;
-  }
-}
-
-// src/jsx-runtime.tsx
-var _userWebTypeMap = /* @__PURE__ */ new Map();
-var _webTypeCache = /* @__PURE__ */ new WeakMap();
-function registerWebElement(rnComponent, htmlTag) {
-  if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
-  _userWebTypeMap.set(rnComponent, htmlTag);
-  _webTypeCache.delete(rnComponent);
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InteractiveWrapper,

package/dist/index.mjs

@@ -1,15 +1,17 @@
 import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
+  getWebTag,
   hasInteractiveBuckets,
   hasResponsiveBuckets,
   registerWebElement,
   setGlobalDarkMode,
   syncGlobalDarkMode,
+  transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-YZNSWFJT.mjs";
+} from "./chunk-3UUTNNWV.mjs";
 import {
   __require,
   buildConfig,
@@ -480,9 +482,13 @@ function styled(Component, baseClasses = "") {
       );
       const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
       const finalStyle = isWeb ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
-      return React3.createElement(Component, {
+      const webTag = isWeb ? getWebTag(Component) : null;
+      const effectiveComponent = webTag ?? Component;
+      const componentName2 = Component.displayName ?? Component.name ?? "";
+      const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, rest) : rest;
+      return React3.createElement(effectiveComponent, {
         ref,
-        ...rest,
+        ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},

package/dist/jsx-dev-runtime.js

@@ -3255,6 +3255,86 @@ function stripWebOnlyProps(s) {
   }
 }
 
+// src/web-substitute.ts
+var _rnToHtml = {
+  View: "div",
+  SafeAreaView: "div",
+  KeyboardAvoidingView: "div",
+  ScrollView: "div",
+  VirtualizedList: "div",
+  Text: "span",
+  Pressable: "div",
+  TouchableOpacity: "div",
+  TouchableHighlight: "div",
+  TouchableWithoutFeedback: "div",
+  TouchableNativeFeedback: "div"
+};
+var _userMap = /* @__PURE__ */ new Map();
+var _cache = /* @__PURE__ */ new WeakMap();
+function getWebTag(type) {
+  if (typeof type === "string") return null;
+  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
+  const obj = type;
+  if (_userMap.has(obj)) return _userMap.get(obj);
+  if (_cache.has(obj)) return _cache.get(obj);
+  const name = obj.displayName ?? obj.name;
+  const tag = name ? _rnToHtml[name] ?? null : null;
+  _cache.set(obj, tag);
+  return tag;
+}
+var _rnOnlyProps = /* @__PURE__ */ new Set([
+  "onLongPress",
+  "delayLongPress",
+  "activeOpacity",
+  "underlayColor",
+  "hitSlop",
+  "pressRetentionOffset",
+  "accessible",
+  "accessibilityState",
+  "accessibilityLiveRegion",
+  "importantForAccessibility",
+  "nativeID",
+  "collapsable",
+  "needsOffscreenAlphaCompositing",
+  "renderToHardwareTextureAndroid",
+  "shouldRasterizeIOS",
+  "pointerEvents"
+  // RN and HTML values differ
+]);
+var _pressableNames = /* @__PURE__ */ new Set([
+  "Pressable",
+  "TouchableOpacity",
+  "TouchableHighlight",
+  "TouchableWithoutFeedback",
+  "TouchableNativeFeedback"
+]);
+function transformToWebProps(originalName, props) {
+  const out = {};
+  const isPressable = _pressableNames.has(originalName);
+  for (const [k, v] of Object.entries(props)) {
+    if (_rnOnlyProps.has(k)) continue;
+    if (k === "onPress") {
+      if (!("onClick" in props)) out.onClick = v;
+      continue;
+    }
+    if (k === "accessibilityLabel") {
+      if (out["aria-label"] == null) out["aria-label"] = v;
+      continue;
+    }
+    if (k === "accessibilityRole") {
+      if (out.role == null) out.role = v;
+      continue;
+    }
+    if (k === "testID") {
+      if (out["data-testid"] == null) out["data-testid"] = v;
+      continue;
+    }
+    out[k] = v;
+  }
+  if (isPressable && !out.role) out.role = "button";
+  return out;
+}
+
 // src/jsx-runtime.tsx
 var _cachedDefaultFont = void 0;
 var _defaultFontVersion = 0;
@@ -3333,84 +3413,6 @@ function stripWebOnlyInlineProps(s) {
     delete s.position;
   }
 }
-var _rnToHtml = {
-  View: "div",
-  SafeAreaView: "div",
-  KeyboardAvoidingView: "div",
-  ScrollView: "div",
-  VirtualizedList: "div",
-  Text: "span",
-  Pressable: "div",
-  TouchableOpacity: "div",
-  TouchableHighlight: "div",
-  TouchableWithoutFeedback: "div",
-  TouchableNativeFeedback: "div"
-};
-var _userWebTypeMap = /* @__PURE__ */ new Map();
-var _webTypeCache = /* @__PURE__ */ new WeakMap();
-function getWebTag(type) {
-  if (typeof type === "string") return null;
-  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
-  const obj = type;
-  if (_userWebTypeMap.has(obj)) return _userWebTypeMap.get(obj);
-  if (_webTypeCache.has(obj)) return _webTypeCache.get(obj);
-  const name = obj.displayName ?? obj.name;
-  const tag = name ? _rnToHtml[name] ?? null : null;
-  _webTypeCache.set(obj, tag);
-  return tag;
-}
-var _rnOnlyProps = /* @__PURE__ */ new Set([
-  "onLongPress",
-  "delayLongPress",
-  "activeOpacity",
-  "underlayColor",
-  "hitSlop",
-  "pressRetentionOffset",
-  "accessible",
-  "accessibilityState",
-  "accessibilityLiveRegion",
-  "importantForAccessibility",
-  "nativeID",
-  "collapsable",
-  "needsOffscreenAlphaCompositing",
-  "renderToHardwareTextureAndroid",
-  "shouldRasterizeIOS",
-  "pointerEvents"
-  // RN prop — values differ from HTML pointer-events CSS
-]);
-var _pressableDisplayNames = /* @__PURE__ */ new Set([
-  "Pressable",
-  "TouchableOpacity",
-  "TouchableHighlight",
-  "TouchableWithoutFeedback",
-  "TouchableNativeFeedback"
-]);
-function transformToWebProps(originalName, props) {
-  const out = {};
-  const isPressable = _pressableDisplayNames.has(originalName);
-  for (const [k, v] of Object.entries(props)) {
-    if (_rnOnlyProps.has(k)) continue;
-    if (k === "onPress") {
-      if (!("onClick" in props)) out.onClick = v;
-      continue;
-    }
-    if (k === "accessibilityLabel") {
-      if (out["aria-label"] == null) out["aria-label"] = v;
-      continue;
-    }
-    if (k === "accessibilityRole") {
-      if (out.role == null) out.role = v;
-      continue;
-    }
-    if (k === "testID") {
-      if (out["data-testid"] == null) out["data-testid"] = v;
-      continue;
-    }
-    out[k] = v;
-  }
-  if (isPressable && !out.role) out.role = "button";
-  return out;
-}
 function processElement(type, rawProps, key, isStaticChildren) {
   if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   const webTag = isWeb ? getWebTag(type) : null;
@@ -3429,6 +3431,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   if (!classStr && !__kbachStyles) {
+    if (isWeb) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
     if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);

package/dist/jsx-dev-runtime.mjs

@@ -2,7 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-YZNSWFJT.mjs";
+} from "./chunk-KWB2XQSF.mjs";
+import "./chunk-3UUTNNWV.mjs";
 import "./chunk-BKSXIWL7.mjs";
 
 // src/jsx-dev-runtime.tsx

package/dist/jsx-runtime.d.mts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 export { Fragment, JSX } from 'react';
+export { r as registerWebElement } from './web-substitute-CfpYFnE7.mjs';
 
 /**
  * @kbach/react/jsx-runtime
@@ -10,18 +11,7 @@ export { Fragment, JSX } from 'react';
  */
 
 declare function _invalidateDefaultFontCache(): void;
-/**
- * Register a custom React Native component → HTML tag substitution.
- * Call this once at app startup (before first render).
- *
- * ```ts
- * import { Animated } from 'react-native';
- * import { registerWebElement } from '@kbach/react/jsx-runtime';
- * registerWebElement(Animated.View, 'div');
- * ```
- */
-declare function registerWebElement(rnComponent: unknown, htmlTag: string): void;
 declare function jsx(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
 declare function jsxs(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
 
-export { _invalidateDefaultFontCache, jsx, jsxs, registerWebElement };
+export { _invalidateDefaultFontCache, jsx, jsxs };

package/dist/jsx-runtime.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 export { Fragment, JSX } from 'react';
+export { r as registerWebElement } from './web-substitute-CfpYFnE7.js';
 
 /**
  * @kbach/react/jsx-runtime
@@ -10,18 +11,7 @@ export { Fragment, JSX } from 'react';
  */
 
 declare function _invalidateDefaultFontCache(): void;
-/**
- * Register a custom React Native component → HTML tag substitution.
- * Call this once at app startup (before first render).
- *
- * ```ts
- * import { Animated } from 'react-native';
- * import { registerWebElement } from '@kbach/react/jsx-runtime';
- * registerWebElement(Animated.View, 'div');
- * ```
- */
-declare function registerWebElement(rnComponent: unknown, htmlTag: string): void;
 declare function jsx(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
 declare function jsxs(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
 
-export { _invalidateDefaultFontCache, jsx, jsxs, registerWebElement };
+export { _invalidateDefaultFontCache, jsx, jsxs };

package/dist/jsx-runtime.js

@@ -3256,6 +3256,91 @@ function stripWebOnlyProps(s) {
   }
 }
 
+// src/web-substitute.ts
+var _rnToHtml = {
+  View: "div",
+  SafeAreaView: "div",
+  KeyboardAvoidingView: "div",
+  ScrollView: "div",
+  VirtualizedList: "div",
+  Text: "span",
+  Pressable: "div",
+  TouchableOpacity: "div",
+  TouchableHighlight: "div",
+  TouchableWithoutFeedback: "div",
+  TouchableNativeFeedback: "div"
+};
+var _userMap = /* @__PURE__ */ new Map();
+var _cache = /* @__PURE__ */ new WeakMap();
+function registerWebElement(rnComponent, htmlTag) {
+  if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
+  _userMap.set(rnComponent, htmlTag);
+  _cache.delete(rnComponent);
+}
+function getWebTag(type) {
+  if (typeof type === "string") return null;
+  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
+  const obj = type;
+  if (_userMap.has(obj)) return _userMap.get(obj);
+  if (_cache.has(obj)) return _cache.get(obj);
+  const name = obj.displayName ?? obj.name;
+  const tag = name ? _rnToHtml[name] ?? null : null;
+  _cache.set(obj, tag);
+  return tag;
+}
+var _rnOnlyProps = /* @__PURE__ */ new Set([
+  "onLongPress",
+  "delayLongPress",
+  "activeOpacity",
+  "underlayColor",
+  "hitSlop",
+  "pressRetentionOffset",
+  "accessible",
+  "accessibilityState",
+  "accessibilityLiveRegion",
+  "importantForAccessibility",
+  "nativeID",
+  "collapsable",
+  "needsOffscreenAlphaCompositing",
+  "renderToHardwareTextureAndroid",
+  "shouldRasterizeIOS",
+  "pointerEvents"
+  // RN and HTML values differ
+]);
+var _pressableNames = /* @__PURE__ */ new Set([
+  "Pressable",
+  "TouchableOpacity",
+  "TouchableHighlight",
+  "TouchableWithoutFeedback",
+  "TouchableNativeFeedback"
+]);
+function transformToWebProps(originalName, props) {
+  const out = {};
+  const isPressable = _pressableNames.has(originalName);
+  for (const [k, v] of Object.entries(props)) {
+    if (_rnOnlyProps.has(k)) continue;
+    if (k === "onPress") {
+      if (!("onClick" in props)) out.onClick = v;
+      continue;
+    }
+    if (k === "accessibilityLabel") {
+      if (out["aria-label"] == null) out["aria-label"] = v;
+      continue;
+    }
+    if (k === "accessibilityRole") {
+      if (out.role == null) out.role = v;
+      continue;
+    }
+    if (k === "testID") {
+      if (out["data-testid"] == null) out["data-testid"] = v;
+      continue;
+    }
+    out[k] = v;
+  }
+  if (isPressable && !out.role) out.role = "button";
+  return out;
+}
+
 // src/jsx-runtime.tsx
 var _cachedDefaultFont = void 0;
 var _defaultFontVersion = 0;
@@ -3337,89 +3422,6 @@ function stripWebOnlyInlineProps(s) {
     delete s.position;
   }
 }
-var _rnToHtml = {
-  View: "div",
-  SafeAreaView: "div",
-  KeyboardAvoidingView: "div",
-  ScrollView: "div",
-  VirtualizedList: "div",
-  Text: "span",
-  Pressable: "div",
-  TouchableOpacity: "div",
-  TouchableHighlight: "div",
-  TouchableWithoutFeedback: "div",
-  TouchableNativeFeedback: "div"
-};
-var _userWebTypeMap = /* @__PURE__ */ new Map();
-var _webTypeCache = /* @__PURE__ */ new WeakMap();
-function registerWebElement(rnComponent, htmlTag) {
-  if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
-  _userWebTypeMap.set(rnComponent, htmlTag);
-  _webTypeCache.delete(rnComponent);
-}
-function getWebTag(type) {
-  if (typeof type === "string") return null;
-  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
-  const obj = type;
-  if (_userWebTypeMap.has(obj)) return _userWebTypeMap.get(obj);
-  if (_webTypeCache.has(obj)) return _webTypeCache.get(obj);
-  const name = obj.displayName ?? obj.name;
-  const tag = name ? _rnToHtml[name] ?? null : null;
-  _webTypeCache.set(obj, tag);
-  return tag;
-}
-var _rnOnlyProps = /* @__PURE__ */ new Set([
-  "onLongPress",
-  "delayLongPress",
-  "activeOpacity",
-  "underlayColor",
-  "hitSlop",
-  "pressRetentionOffset",
-  "accessible",
-  "accessibilityState",
-  "accessibilityLiveRegion",
-  "importantForAccessibility",
-  "nativeID",
-  "collapsable",
-  "needsOffscreenAlphaCompositing",
-  "renderToHardwareTextureAndroid",
-  "shouldRasterizeIOS",
-  "pointerEvents"
-  // RN prop — values differ from HTML pointer-events CSS
-]);
-var _pressableDisplayNames = /* @__PURE__ */ new Set([
-  "Pressable",
-  "TouchableOpacity",
-  "TouchableHighlight",
-  "TouchableWithoutFeedback",
-  "TouchableNativeFeedback"
-]);
-function transformToWebProps(originalName, props) {
-  const out = {};
-  const isPressable = _pressableDisplayNames.has(originalName);
-  for (const [k, v] of Object.entries(props)) {
-    if (_rnOnlyProps.has(k)) continue;
-    if (k === "onPress") {
-      if (!("onClick" in props)) out.onClick = v;
-      continue;
-    }
-    if (k === "accessibilityLabel") {
-      if (out["aria-label"] == null) out["aria-label"] = v;
-      continue;
-    }
-    if (k === "accessibilityRole") {
-      if (out.role == null) out.role = v;
-      continue;
-    }
-    if (k === "testID") {
-      if (out["data-testid"] == null) out["data-testid"] = v;
-      continue;
-    }
-    out[k] = v;
-  }
-  if (isPressable && !out.role) out.role = "button";
-  return out;
-}
 function processElement(type, rawProps, key, isStaticChildren) {
   if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   const webTag = isWeb ? getWebTag(type) : null;
@@ -3438,6 +3440,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   if (!classStr && !__kbachStyles) {
+    if (isWeb) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
     if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);

package/dist/jsx-runtime.mjs

@@ -2,9 +2,11 @@ import {
   Fragment,
   _invalidateDefaultFontCache,
   jsx,
-  jsxs,
+  jsxs
+} from "./chunk-KWB2XQSF.mjs";
+import {
   registerWebElement
-} from "./chunk-YZNSWFJT.mjs";
+} from "./chunk-3UUTNNWV.mjs";
 import "./chunk-BKSXIWL7.mjs";
 export {
   Fragment,

package/dist/web-substitute-CfpYFnE7.d.mts

@@ -0,0 +1,22 @@
+/**
+ * React Native → HTML element substitution for web rendering.
+ *
+ * When isWeb is true, known React Native component types (View, Text, Pressable, …)
+ * are replaced with plain HTML element strings ('div', 'span', …) so the DOM shows
+ * clean Kbach class names instead of React Native Web's generated css-view-* classes.
+ *
+ * Used by: jsx-runtime (bare JSX), styled(), DarkWrapper, InteractiveWrapper.
+ */
+/**
+ * Register a custom React Native component → HTML tag substitution.
+ * Call once at app startup before first render.
+ *
+ * ```ts
+ * import { Animated } from 'react-native';
+ * import { registerWebElement } from '@kbach/react';
+ * registerWebElement(Animated.View, 'div');
+ * ```
+ */
+declare function registerWebElement(rnComponent: unknown, htmlTag: string): void;
+
+export { registerWebElement as r };