@kbach/react 0.5.47 → 0.5.49

package/dist/{chunk-U3GY5Y6J.mjs → chunk-3UUTNNWV.mjs}

@@ -2,11 +2,12 @@ import {
   flatten,
   getActiveBreakpoints,
   getGlobalWidth,
+  getInteractiveModifiers,
   getResponsiveModifiers,
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-NIBECTRQ.mjs";
+} from "./chunk-BKSXIWL7.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";
@@ -36,6 +37,91 @@ function subscribeGlobalDarkMode(callback) {
   return () => store.subscribers.delete(callback);
 }
 
+// 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/useGlobalDarkMode.ts
 import React from "react";
 var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
@@ -120,6 +206,16 @@ function hasResponsiveBuckets(resolved) {
   }
   return false;
 }
+function hasInteractiveBuckets(resolved) {
+  const interactiveMods = getInteractiveModifiers();
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (interactiveMods.has(mod)) return true;
+    }
+  }
+  return false;
+}
 var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
 
 // src/InteractiveWrapper.tsx
@@ -164,7 +260,7 @@ var InteractiveWrapper = forwardRef(
     const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
     const computedStyle = useMemo(
       () => {
-        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!rest.disabled, checked: !!rest.checked }, breakpoints);
         delete s.__divideX;
         delete s.__divideY;
         delete s.__divideColor;
@@ -198,8 +294,8 @@ var InteractiveWrapper = forwardRef(
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );
-    const isWebHTMLElement = !isNative && typeof Component === "string";
-    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    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,
@@ -226,7 +322,11 @@ export {
   useGlobalWidth,
   useConditionalWidth,
   hasResponsiveBuckets,
+  hasInteractiveBuckets,
   EMPTY_BREAKPOINTS2,
+  registerWebElement,
+  getWebTag,
+  transformToWebProps,
   useGlobalDarkMode,
   InteractiveWrapper
 };

package/dist/{chunk-NIBECTRQ.mjs → chunk-BKSXIWL7.mjs}

@@ -716,7 +716,12 @@ function resolveColor(value, colors, isArbitrary) {
     }
   }
   if (!hex) return null;
-  if (!opacityPart) return hex;
+  if (!opacityPart) {
+    if (!isWeb && hex.startsWith("#") && hex.length === 9) {
+      return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
+    }
+    return hex;
+  }
   let alpha;
   if (opacityPart.startsWith("[") && opacityPart.endsWith("]")) {
     const v = parseFloat(opacityPart.slice(1, -1));
@@ -2279,12 +2284,6 @@ var RESOLVERS = {
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
-    if (parsed.utility === "grd" || parsed.utility === "grid") {
-      return getEffectiveIsWeb() ? { display: "grid" } : null;
-    }
-    if (parsed.utility === "inline-grid") {
-      return getEffectiveIsWeb() ? { display: "inline-grid" } : null;
-    }
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
@@ -2941,6 +2940,8 @@ function buildConfig(userConfig) {
   };
   clearPluginUtilities();
   clearPluginModifiers();
+  const _store = getConfigStore();
+  for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
   const pluginAPI = makePluginAPI(resolved.theme);
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);

package/dist/{chunk-LCK5OGHT.mjs → chunk-KWB2XQSF.mjs}

@@ -1,10 +1,12 @@
 import {
   EMPTY_BREAKPOINTS2 as EMPTY_BREAKPOINTS,
   InteractiveWrapper,
+  getWebTag,
   hasResponsiveBuckets,
+  transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-U3GY5Y6J.mjs";
+} from "./chunk-3UUTNNWV.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -15,27 +17,32 @@ import {
   getResponsiveModifiers,
   isNative,
   isRuntimeCSSDisabled,
+  isWeb,
   normalizeClassString,
   resolve
-} from "./chunk-NIBECTRQ.mjs";
+} from "./chunk-BKSXIWL7.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 
 // src/DarkWrapper.tsx
-import React from "react";
+import React, { useMemo } from "react";
 var DarkWrapper = React.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_BREAKPOINTS;
-    const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
-    stripInternalMarkers(computedStyle);
-    if (typeof Component !== "string") stripWebOnlyProps(computedStyle);
-    const isWebHTMLElement = !isNative && typeof Component === "string";
-    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    const isNonStringComponent = typeof Component !== "string";
+    const computedStyle = 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) ? React.createElement(Component, props, ...children) : React.createElement(Component, props, children);
   }
@@ -155,31 +162,36 @@ function stripWebOnlyInlineProps(s) {
 }
 function processElement(type, rawProps, key, isStaticChildren) {
   if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
-  if (!rawProps) return _jsx(type, null, key);
-  const { className, kb: kbProp, __kbachStyles, __kbachClasses } = rawProps;
+  const webTag = isWeb ? getWebTag(type) : null;
+  const effectiveType = webTag ?? type;
+  const originalName = webTag ? type?.displayName ?? type?.name : void 0;
+  if (!rawProps) return _jsx(effectiveType, null, key);
+  const workingProps = webTag && originalName ? transformToWebProps(originalName, rawProps) : rawProps;
+  const { className, kb: kbProp, __kbachStyles, __kbachClasses } = workingProps;
   const classStr = className ?? kbProp ?? __kbachClasses;
   if (!isNative && isRuntimeCSSDisabled() && classStr && !__kbachStyles) {
-    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
-    return makeElement(isStaticChildren, type, {
+    const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
+    return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,
       className: normalizeClassString(classStr),
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
   if (!classStr && !__kbachStyles) {
+    if (isWeb) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
-    if (!defaultFont) return makeElement(isStaticChildren, type, rawProps, key);
-    const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
+    if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
+    const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
-    return makeElement(isStaticChildren, type, { ...passProps2, style: finalStyle2 }, key);
+    return makeElement(isStaticChildren, effectiveType, { ...passProps2, style: finalStyle2 }, key);
   }
   const config = getConfig();
   const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
-  const { style: userStyle, ...passProps } = omitConsumed(rawProps);
+  const { style: userStyle, ...passProps } = omitConsumed(workingProps);
   const { interactive, modeOrResponsive } = bucketMods(resolved);
   if (interactive) {
     return _jsx(InteractiveWrapper, {
-      Component: type,
+      Component: effectiveType,
       resolvedStyle: resolved,
       ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
@@ -188,24 +200,24 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   if (modeOrResponsive) {
     return _jsx(DarkWrapper, {
-      Component: type,
+      Component: effectiveType,
       resolvedStyle: resolved,
       ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
   }
-  const isWebHTMLElement = !isNative && typeof type === "string";
+  const skipComputedInline = isWeb || !isNative && typeof effectiveType === "string";
   let finalStyle;
-  if (!isWebHTMLElement) {
+  if (!skipComputedInline) {
     const computedStyle = flatten(resolved, false);
     stripInternalMarkers2(computedStyle);
-    if (typeof type !== "string") stripWebOnlyInlineProps(computedStyle);
+    if (typeof effectiveType !== "string") stripWebOnlyInlineProps(computedStyle);
     finalStyle = mergeStyle(computedStyle, userStyle);
   } else {
     finalStyle = userStyle ?? void 0;
   }
-  return makeElement(isStaticChildren, type, {
+  return makeElement(isStaticChildren, effectiveType, {
     ...passProps,
     style: finalStyle,
     ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}

package/dist/index.d.mts

@@ -2,6 +2,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';
+export { r as registerWebElement } from './web-substitute-CfpYFnE7.mjs';
 
 declare const defaultColors: ThemeColors;
 declare const defaultTheme: ThemeConfig;

package/dist/index.d.ts

@@ -2,6 +2,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';
+export { r as registerWebElement } from './web-substitute-CfpYFnE7.js';
 
 declare const defaultColors: ThemeColors;
 declare const defaultTheme: ThemeConfig;

package/dist/index.js

@@ -46,6 +46,7 @@ __export(index_exports, {
   normalizeClassString: () => normalizeClassString,
   parseClass: () => parseClass,
   parseClasses: () => parseClasses,
+  registerWebElement: () => registerWebElement,
   resolve: () => resolve,
   splitClassTokens: () => splitClassTokens,
   styled: () => styled,
@@ -835,6 +836,12 @@ function isKnownModifier(name) {
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
 }
+function getInteractiveModifiers() {
+  if (!_interactiveNames) {
+    _interactiveNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "interactive").map(([k]) => k));
+  }
+  return _interactiveNames;
+}
 function getResponsiveModifiers() {
   if (!_responsiveNames) {
     _responsiveNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "responsive").map(([k]) => k));
@@ -887,7 +894,12 @@ function resolveColor(value, colors, isArbitrary) {
     }
   }
   if (!hex) return null;
-  if (!opacityPart) return hex;
+  if (!opacityPart) {
+    if (!isWeb && hex.startsWith("#") && hex.length === 9) {
+      return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
+    }
+    return hex;
+  }
   let alpha;
   if (opacityPart.startsWith("[") && opacityPart.endsWith("]")) {
     const v = parseFloat(opacityPart.slice(1, -1));
@@ -2450,12 +2462,6 @@ var RESOLVERS = {
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
-    if (parsed.utility === "grd" || parsed.utility === "grid") {
-      return getEffectiveIsWeb() ? { display: "grid" } : null;
-    }
-    if (parsed.utility === "inline-grid") {
-      return getEffectiveIsWeb() ? { display: "inline-grid" } : null;
-    }
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
@@ -3062,6 +3068,8 @@ function buildConfig(userConfig) {
   };
   clearPluginUtilities();
   clearPluginModifiers();
+  const _store = getConfigStore();
+  for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
   const pluginAPI = makePluginAPI(resolved.theme);
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
@@ -3217,16 +3225,23 @@ function ThemeProvider({
     () => isWeb && typeof window !== "undefined" ? window.innerWidth : 0
   );
   const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
-  const numericScreens = {};
-  for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
-    numericScreens[k] = typeof v === "number" ? v : parseInt(String(v), 10);
-  }
+  const numericScreens = (0, import_react3.useMemo)(() => {
+    const out = {};
+    for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
+      out[k] = typeof v === "number" ? v : parseInt(String(v), 10);
+    }
+    return out;
+  }, [resolvedConfig.theme.screens]);
   const _prevWidthRef = (0, import_react3.useRef)(-1);
   if (_prevWidthRef.current !== effectiveWidth) {
     _prevWidthRef.current = effectiveWidth;
     syncGlobalWidth(effectiveWidth);
   }
-  syncGlobalScreens(numericScreens);
+  const _prevScreensRef = (0, import_react3.useRef)(null);
+  if (_prevScreensRef.current !== numericScreens) {
+    _prevScreensRef.current = numericScreens;
+    syncGlobalScreens(numericScreens);
+  }
   (0, import_react3.useEffect)(() => {
     setGlobalWidth(effectiveWidth);
   }, [effectiveWidth]);
@@ -3511,6 +3526,101 @@ function hasResponsiveBuckets(resolved) {
   }
   return false;
 }
+function hasInteractiveBuckets(resolved) {
+  const interactiveMods = getInteractiveModifiers();
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (interactiveMods.has(mod)) return true;
+    }
+  }
+  return false;
+}
+
+// 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 = "") {
@@ -3530,6 +3640,8 @@ function styled(Component, baseClasses = "") {
         onBlur,
         ...rest
       } = 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);
@@ -3572,28 +3684,34 @@ function styled(Component, baseClasses = "") {
       }, [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 needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
       const computedStyle = (0, import_react6.useMemo)(
-        () => flatten(resolved, isDark, { pressed, hover: hovered, focus: focused }, breakpoints),
-        [resolved, isDark, pressed, hovered, focused, width]
+        () => 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
       );
       const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
-      const finalStyle = extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
-      return import_react6.default.createElement(Component, {
+      const finalStyle = isWeb ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
+      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) } : {},
-        // onPressIn / onPressOut are React Native-only; on web use Pointer Events instead.
-        ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onFocus: handleFocus,
-        onBlur: handleBlur
+        // 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 },
+        onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
+        onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
+        onFocus: hasInteractive ? handleFocus : onFocus,
+        onBlur: hasInteractive ? handleBlur : onBlur
       });
     }
   );
@@ -3710,7 +3828,7 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
     const handleBlur = (0, import_react10.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const computedStyle = (0, import_react10.useMemo)(
       () => {
-        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!rest.disabled, checked: !!rest.checked }, breakpoints);
         delete s.__divideX;
         delete s.__divideY;
         delete s.__divideColor;
@@ -3744,8 +3862,8 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
       [resolvedStyle, isDark, pressed, hovered, focused, width]
       // eslint-disable-line react-hooks/exhaustive-deps
     );
-    const isWebHTMLElement = !isNative && typeof Component === "string";
-    const finalStyle = isWebHTMLElement ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
+    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,
@@ -3795,6 +3913,7 @@ function cx(...classes) {
   normalizeClassString,
   parseClass,
   parseClasses,
+  registerWebElement,
   resolve,
   splitClassTokens,
   styled,