@kbach/react 0.6.15 → 0.6.17

package/dist/index.js

@@ -898,25 +898,6 @@ function resolveColor(value, colors, isArbitrary) {
       }
     }
   }
-  if (hex && !hex.startsWith("#") && !hex.startsWith("rgb") && hex !== "transparent" && hex !== "currentColor") {
-    if (hex in colors) {
-      const alias = colors[hex];
-      if (typeof alias === "string") hex = alias;
-      else if (typeof alias === "object" && "6" in alias) hex = alias["6"] ?? hex;
-    } else {
-      const aliasLastDash = hex.lastIndexOf("-");
-      if (aliasLastDash > 0) {
-        const aliasColorName = hex.slice(0, aliasLastDash);
-        const aliasShade = hex.slice(aliasLastDash + 1);
-        const aliasScale = colors[aliasColorName];
-        if (aliasScale && typeof aliasScale === "object") {
-          hex = aliasScale[aliasShade] ?? null;
-        } else if (typeof aliasScale === "string") {
-          hex = aliasScale;
-        }
-      }
-    }
-  }
   if (!hex) return null;
   if (!opacityPart) {
     if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
@@ -932,6 +913,8 @@ function resolveColor(value, colors, isArbitrary) {
     alpha = parseFloat(opacityPart) / 100;
   }
   if (isNaN(alpha)) return hex;
+  if (alpha < 0) alpha = 0;
+  else if (alpha > 1) alpha = 1;
   return hexToRgba(hex, alpha);
 }
 function parseHexRgb(hex) {
@@ -2629,6 +2612,14 @@ function getBuiltinStandaloneNames() {
 }
 
 // src/core/parser.ts
+var UNSAFE_ARBITRARY_VALUE = /[{};\\]|\/\*|\*\//;
+function isSafeArbitraryValue(value) {
+  if (!UNSAFE_ARBITRARY_VALUE.test(value)) return true;
+  if (process.env.NODE_ENV !== "production") {
+    kbachWarn(`Unsafe arbitrary value rejected: "${value}"`);
+  }
+  return false;
+}
 function parseClass(className) {
   const trimmed = className.trim();
   if (!trimmed) return null;
@@ -2667,6 +2658,7 @@ function parseClass(className) {
   if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart - 1);
     const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
+    if (!isSafeArbitraryValue(value)) return null;
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
@@ -2676,6 +2668,7 @@ function parseClass(className) {
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
     const value = remaining.slice(1, -1).replace(/_/g, " ");
+    if (!isSafeArbitraryValue(value)) return null;
     return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
   }
   if (getBuiltinStandaloneNames().has(remaining)) {
@@ -2842,17 +2835,20 @@ function getDefaultFontFamily() {
   return globalThis[FONT_KEY];
 }
 var _styleEl = null;
+var _ruleIndexByKey = /* @__PURE__ */ new Map();
 function evictInjectedRule(rule) {
+  const idx = _ruleIndexByKey.get(rule);
+  _ruleIndexByKey.delete(rule);
+  if (idx === void 0) return;
   const sheet = _styleEl?.sheet;
   if (!sheet) return;
-  for (let i = 0; i < sheet.cssRules.length; i++) {
-    if (sheet.cssRules[i].cssText === rule) {
-      try {
-        sheet.deleteRule(i);
-      } catch {
-      }
-      return;
-    }
+  try {
+    sheet.deleteRule(idx);
+  } catch {
+    return;
+  }
+  for (const [key, i] of _ruleIndexByKey) {
+    if (i > idx) _ruleIndexByKey.set(key, i - 1);
   }
 }
 var _injectedRules = new LRUCache(5e4, evictInjectedRule);
@@ -2872,11 +2868,15 @@ function getStyleEl() {
 }
 function injectRule(rule) {
   if (isRuntimeCSSDisabled()) return;
-  if (_injectedRules.has(rule)) return;
-  _injectedRules.set(rule, true);
+  if (_injectedRules.get(rule)) return;
   try {
     const sheet = getStyleEl().sheet;
-    if (sheet) sheet.insertRule(rule, sheet.cssRules.length);
+    if (sheet) {
+      const idx = sheet.cssRules.length;
+      sheet.insertRule(rule, idx);
+      _ruleIndexByKey.set(rule, idx);
+      _injectedRules.set(rule, true);
+    }
   } catch {
   }
 }
@@ -3145,6 +3145,7 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
 }
 function clearCache() {
   _injectedRules.clear();
+  _ruleIndexByKey.clear();
   if (_styleEl) {
     _styleEl.remove();
     _styleEl = null;
@@ -3444,6 +3445,8 @@ var useSyncExternalStore = import_react3.default.useSyncExternalStore ?? functio
 // src/ThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var STORAGE_KEY = "kbach-theme";
+var _mountedProviderCount = 0;
+var _warnedMultipleProviders = false;
 function loadPersistedMode() {
   try {
     if (isWeb) return localStorage.getItem(STORAGE_KEY);
@@ -3495,6 +3498,18 @@ function ThemeProvider({
   const [resolvedConfig, setResolvedConfig] = (0, import_react4.useState)(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
+  (0, import_react4.useEffect)(() => {
+    _mountedProviderCount++;
+    if (process.env.NODE_ENV !== "production" && _mountedProviderCount > 1 && !_warnedMultipleProviders) {
+      _warnedMultipleProviders = true;
+      kbachWarn(
+        "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
+      );
+    }
+    return () => {
+      _mountedProviderCount--;
+    };
+  }, []);
   const [webWidth, setWebWidth] = (0, import_react4.useState)(0);
   const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
   const numericScreens = (0, import_react4.useMemo)(() => {
@@ -3547,6 +3562,17 @@ function ThemeProvider({
     const persisted = loadPersistedMode();
     if (persisted) _setMode(persisted);
   }, []);
+  (0, import_react4.useEffect)(() => {
+    if (disablePersistence || !isWeb || typeof window === "undefined") return;
+    const onStorage = (e) => {
+      if (e.key !== STORAGE_KEY || e.newValue == null) return;
+      if (e.newValue === "light" || e.newValue === "dark" || e.newValue === "system") {
+        _setMode(e.newValue);
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [disablePersistence]);
   const setMode = (0, import_react4.useCallback)((next) => {
     _setMode(next);
     if (!disablePersistence) persistMode(next);
@@ -3595,6 +3621,9 @@ function KbachReset() {
 var import_react5 = __toESM(require("react"));
 
 // src/useGlobalDarkMode.ts
+var NOOP_SUB = (_) => () => {
+};
+var FALSE_SNAP = () => false;
 function useGlobalDarkMode() {
   return useSyncExternalStore(
     subscribeGlobalDarkMode,
@@ -3603,9 +3632,16 @@ function useGlobalDarkMode() {
     // SSR: default light
   );
 }
+function useConditionalGlobalDarkMode(active) {
+  return useSyncExternalStore(
+    active ? subscribeGlobalDarkMode : NOOP_SUB,
+    active ? getGlobalDarkMode : FALSE_SNAP,
+    FALSE_SNAP
+  );
+}
 
 // src/useGlobalWidth.ts
-var NOOP_SUB = (_) => () => {
+var NOOP_SUB2 = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
 var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
@@ -3646,7 +3682,7 @@ function useGlobalWidth() {
 }
 function useConditionalWidth(active) {
   return useSyncExternalStore(
-    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
+    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB2,
     active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
   );
@@ -4007,34 +4043,55 @@ function styled(Component, baseClasses = "") {
       const disabled = !!props.disabled;
       const checked = !!props.checked;
       const { config } = useTheme();
-      const isDark = useGlobalDarkMode();
+      const isWebPlatform = getEffectiveIsWeb();
+      const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
       const [pressed, setPressed] = (0, import_react5.useState)(false);
       const [hovered, setHovered] = (0, import_react5.useState)(false);
       const [focused, setFocused] = (0, import_react5.useState)(false);
-      const handlePressIn = (0, import_react5.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-      const handlePressOut = (0, import_react5.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-      const handlePointerDown = (0, import_react5.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-      const handlePointerUp = (0, import_react5.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-      const handlePointerLeave = (0, import_react5.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-      const handlePointerCancel = (0, import_react5.useCallback)(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
-      const handleMouseEnter = (0, import_react5.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-      const handleMouseLeave = (0, import_react5.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-      const handleFocus = (0, import_react5.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-      const handleBlur = (0, import_react5.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+      const handlePressIn = (0, import_react5.useCallback)(chain(onPressIn, () => {
+        if (!isWebPlatform) setPressed(true);
+      }), [onPressIn, isWebPlatform]);
+      const handlePressOut = (0, import_react5.useCallback)(chain(onPressOut, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPressOut, isWebPlatform]);
+      const handlePointerDown = (0, import_react5.useCallback)(chain(onPointerDown, () => {
+        if (!isWebPlatform) setPressed(true);
+      }), [onPointerDown, isWebPlatform]);
+      const handlePointerUp = (0, import_react5.useCallback)(chain(onPointerUp, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerUp, isWebPlatform]);
+      const handlePointerLeave = (0, import_react5.useCallback)(chain(onPointerLeave, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerLeave, isWebPlatform]);
+      const handlePointerCancel = (0, import_react5.useCallback)(chain(onPointerCancel, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerCancel, isWebPlatform]);
+      const handleMouseEnter = (0, import_react5.useCallback)(chain(onMouseEnter, () => {
+        if (!isWebPlatform) setHovered(true);
+      }), [onMouseEnter, isWebPlatform]);
+      const handleMouseLeave = (0, import_react5.useCallback)(chain(onMouseLeave, () => {
+        if (!isWebPlatform) setHovered(false);
+      }), [onMouseLeave, isWebPlatform]);
+      const handleFocus = (0, import_react5.useCallback)(chain(onFocus, () => {
+        if (!isWebPlatform) setFocused(true);
+      }), [onFocus, isWebPlatform]);
+      const handleBlur = (0, import_react5.useCallback)(chain(onBlur, () => {
+        if (!isWebPlatform) setFocused(false);
+      }), [onBlur, isWebPlatform]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
       const resolved = (0, import_react5.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
       const hasInteractive = (0, import_react5.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
-      const width = useConditionalWidth(needsWidth);
+      const width = useConditionalWidth(needsWidth && !isWebPlatform);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
       const computedStyle = (0, import_react5.useMemo)(
-        () => isWeb ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
+        () => isWebPlatform ? {} : 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 = isWeb ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
-      const webTag = isWeb ? getWebTag(Component, rest) : null;
+      const finalStyle = isWebPlatform ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
+      const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
@@ -4043,7 +4100,7 @@ function styled(Component, baseClasses = "") {
         ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
+        ...isWebPlatform && combined ? { className: normalizeClassString(combined) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
@@ -4151,27 +4208,48 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
     onBlur,
     ...rest
   }, ref) {
-    const isDark = useGlobalDarkMode();
+    const isWebPlatform = getEffectiveIsWeb();
+    const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
-    const width = useConditionalWidth(needsWidth);
+    const width = useConditionalWidth(needsWidth && !isWebPlatform);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const [pressed, setPressed] = (0, import_react8.useState)(false);
     const [hovered, setHovered] = (0, import_react8.useState)(false);
     const [focused, setFocused] = (0, import_react8.useState)(false);
-    const handlePressIn = (0, import_react8.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react8.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = (0, import_react8.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = (0, import_react8.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = (0, import_react8.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handlePointerCancel = (0, import_react8.useCallback)(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
-    const handleMouseEnter = (0, import_react8.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react8.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react8.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react8.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const handlePressIn = (0, import_react8.useCallback)(chain(onPressIn, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPressIn, isWebPlatform]);
+    const handlePressOut = (0, import_react8.useCallback)(chain(onPressOut, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPressOut, isWebPlatform]);
+    const handlePointerDown = (0, import_react8.useCallback)(chain(onPointerDown, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPointerDown, isWebPlatform]);
+    const handlePointerUp = (0, import_react8.useCallback)(chain(onPointerUp, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerUp, isWebPlatform]);
+    const handlePointerLeave = (0, import_react8.useCallback)(chain(onPointerLeave, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerLeave, isWebPlatform]);
+    const handlePointerCancel = (0, import_react8.useCallback)(chain(onPointerCancel, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerCancel, isWebPlatform]);
+    const handleMouseEnter = (0, import_react8.useCallback)(chain(onMouseEnter, () => {
+      if (!isWebPlatform) setHovered(true);
+    }), [onMouseEnter, isWebPlatform]);
+    const handleMouseLeave = (0, import_react8.useCallback)(chain(onMouseLeave, () => {
+      if (!isWebPlatform) setHovered(false);
+    }), [onMouseLeave, isWebPlatform]);
+    const handleFocus = (0, import_react8.useCallback)(chain(onFocus, () => {
+      if (!isWebPlatform) setFocused(true);
+    }), [onFocus, isWebPlatform]);
+    const handleBlur = (0, import_react8.useCallback)(chain(onBlur, () => {
+      if (!isWebPlatform) setFocused(false);
+    }), [onBlur, isWebPlatform]);
     const { children, disabled, checked, ...restForComponent } = rest;
     const computedStyle = (0, import_react8.useMemo)(
       () => {
-        if (isWeb) return {};
+        if (isWebPlatform) return {};
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
         stripInternalMarkers(s);
         if (typeof Component !== "string") stripWebOnlyProps(s);
@@ -4179,7 +4257,7 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
       },
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked]
     );
-    const skipComputedInline = isWeb || !isNative && typeof Component === "string";
+    const skipComputedInline = isWebPlatform;
     const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const componentProps = {
       ref,
@@ -4221,7 +4299,7 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 function kb(classString, isDark = false) {
   const config = getConfig();
   const resolved = resolve(classString, config.theme, config.darkMode);
-  if (isWeb) {
+  if (getEffectiveIsWeb()) {
     return classString;
   }
   return flatten(resolved, isDark);

package/dist/index.mjs

@@ -13,12 +13,14 @@ import {
   flatten,
   getActiveBreakpoints,
   getConfig,
+  getEffectiveIsWeb,
   getWebTag,
   hasInteractiveBuckets,
   hasResponsiveBuckets,
   initConfig,
   isNative,
   isWeb,
+  kbachWarn,
   normalizeClassString,
   onConfigChange,
   parseClass,
@@ -35,11 +37,12 @@ import {
   syncGlobalWidth,
   transformToWebProps,
   updateConfig,
+  useConditionalGlobalDarkMode,
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-YH2IOSKT.mjs";
+} from "./chunk-GJSZUC6Q.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -125,6 +128,8 @@ import {
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var STORAGE_KEY = "kbach-theme";
+var _mountedProviderCount = 0;
+var _warnedMultipleProviders = false;
 function loadPersistedMode() {
   try {
     if (isWeb) return localStorage.getItem(STORAGE_KEY);
@@ -176,6 +181,18 @@ function ThemeProvider({
   const [resolvedConfig, setResolvedConfig] = useState(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
+  useEffect(() => {
+    _mountedProviderCount++;
+    if (process.env.NODE_ENV !== "production" && _mountedProviderCount > 1 && !_warnedMultipleProviders) {
+      _warnedMultipleProviders = true;
+      kbachWarn(
+        "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
+      );
+    }
+    return () => {
+      _mountedProviderCount--;
+    };
+  }, []);
   const [webWidth, setWebWidth] = useState(0);
   const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
   const numericScreens = useMemo2(() => {
@@ -228,6 +245,17 @@ function ThemeProvider({
     const persisted = loadPersistedMode();
     if (persisted) _setMode(persisted);
   }, []);
+  useEffect(() => {
+    if (disablePersistence || !isWeb || typeof window === "undefined") return;
+    const onStorage = (e) => {
+      if (e.key !== STORAGE_KEY || e.newValue == null) return;
+      if (e.newValue === "light" || e.newValue === "dark" || e.newValue === "system") {
+        _setMode(e.newValue);
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [disablePersistence]);
   const setMode = useCallback((next) => {
     _setMode(next);
     if (!disablePersistence) persistMode(next);
@@ -300,34 +328,55 @@ function styled(Component, baseClasses = "") {
       const disabled = !!props.disabled;
       const checked = !!props.checked;
       const { config } = useTheme();
-      const isDark = useGlobalDarkMode();
+      const isWebPlatform = getEffectiveIsWeb();
+      const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
       const [pressed, setPressed] = useState2(false);
       const [hovered, setHovered] = useState2(false);
       const [focused, setFocused] = useState2(false);
-      const handlePressIn = useCallback2(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-      const handlePressOut = useCallback2(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-      const handlePointerDown = useCallback2(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-      const handlePointerUp = useCallback2(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-      const handlePointerLeave = useCallback2(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-      const handlePointerCancel = useCallback2(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
-      const handleMouseEnter = useCallback2(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-      const handleMouseLeave = useCallback2(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-      const handleFocus = useCallback2(chain(onFocus, () => setFocused(true)), [onFocus]);
-      const handleBlur = useCallback2(chain(onBlur, () => setFocused(false)), [onBlur]);
+      const handlePressIn = useCallback2(chain(onPressIn, () => {
+        if (!isWebPlatform) setPressed(true);
+      }), [onPressIn, isWebPlatform]);
+      const handlePressOut = useCallback2(chain(onPressOut, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPressOut, isWebPlatform]);
+      const handlePointerDown = useCallback2(chain(onPointerDown, () => {
+        if (!isWebPlatform) setPressed(true);
+      }), [onPointerDown, isWebPlatform]);
+      const handlePointerUp = useCallback2(chain(onPointerUp, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerUp, isWebPlatform]);
+      const handlePointerLeave = useCallback2(chain(onPointerLeave, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerLeave, isWebPlatform]);
+      const handlePointerCancel = useCallback2(chain(onPointerCancel, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerCancel, isWebPlatform]);
+      const handleMouseEnter = useCallback2(chain(onMouseEnter, () => {
+        if (!isWebPlatform) setHovered(true);
+      }), [onMouseEnter, isWebPlatform]);
+      const handleMouseLeave = useCallback2(chain(onMouseLeave, () => {
+        if (!isWebPlatform) setHovered(false);
+      }), [onMouseLeave, isWebPlatform]);
+      const handleFocus = useCallback2(chain(onFocus, () => {
+        if (!isWebPlatform) setFocused(true);
+      }), [onFocus, isWebPlatform]);
+      const handleBlur = useCallback2(chain(onBlur, () => {
+        if (!isWebPlatform) setFocused(false);
+      }), [onBlur, isWebPlatform]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
       const resolved = useMemo3(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
       const hasInteractive = useMemo3(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
-      const width = useConditionalWidth(needsWidth);
+      const width = useConditionalWidth(needsWidth && !isWebPlatform);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
       const computedStyle = useMemo3(
-        () => isWeb ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
+        () => isWebPlatform ? {} : 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 = isWeb ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
-      const webTag = isWeb ? getWebTag(Component, rest) : null;
+      const finalStyle = isWebPlatform ? extraStyle ?? void 0 : extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
+      const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
@@ -336,7 +385,7 @@ function styled(Component, baseClasses = "") {
         ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
+        ...isWebPlatform && combined ? { className: normalizeClassString(combined) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
@@ -428,7 +477,7 @@ function useResponsive() {
 function kb(classString, isDark = false) {
   const config = getConfig();
   const resolved = resolve(classString, config.theme, config.darkMode);
-  if (isWeb) {
+  if (getEffectiveIsWeb()) {
     return classString;
   }
   return flatten(resolved, isDark);