@kbach/react 0.6.14 → 0.6.16

package/dist/jsx-dev-runtime.js

@@ -856,25 +856,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) {
@@ -890,6 +871,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) {
@@ -2408,7 +2391,7 @@ var RESOLVERS = {
   "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateX(${v})` };
+    if (getEffectiveIsWeb()) return { transform: `translateX(${typeof v === "number" ? `${v}px` : v})` };
     if (typeof v === "string") {
       const n = parseFloat(v);
       return isNaN(n) ? null : { transform: [{ translateX: n }] };
@@ -2418,7 +2401,7 @@ var RESOLVERS = {
   "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateY(${v})` };
+    if (getEffectiveIsWeb()) return { transform: `translateY(${typeof v === "number" ? `${v}px` : v})` };
     if (typeof v === "string") {
       const n = parseFloat(v);
       return isNaN(n) ? null : { transform: [{ translateY: n }] };
@@ -2587,6 +2570,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;
@@ -2625,6 +2616,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) {
@@ -2634,6 +2626,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)) {
@@ -2788,17 +2781,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);
@@ -2815,11 +2811,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 {
   }
 }
@@ -3295,17 +3295,19 @@ var useSyncExternalStore = import_react.default.useSyncExternalStore ?? function
 };
 
 // src/useGlobalDarkMode.ts
-function useGlobalDarkMode() {
+var NOOP_SUB = (_) => () => {
+};
+var FALSE_SNAP = () => false;
+function useConditionalGlobalDarkMode(active) {
   return useSyncExternalStore(
-    subscribeGlobalDarkMode,
-    getGlobalDarkMode,
-    () => false
-    // SSR: default light
+    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();
@@ -3339,7 +3341,7 @@ function getWebWidth() {
 }
 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
   );
@@ -3412,27 +3414,48 @@ var InteractiveWrapper = (0, import_react2.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_react2.useState)(false);
     const [hovered, setHovered] = (0, import_react2.useState)(false);
     const [focused, setFocused] = (0, import_react2.useState)(false);
-    const handlePressIn = (0, import_react2.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react2.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = (0, import_react2.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = (0, import_react2.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = (0, import_react2.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handlePointerCancel = (0, import_react2.useCallback)(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
-    const handleMouseEnter = (0, import_react2.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react2.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const handlePressIn = (0, import_react2.useCallback)(chain(onPressIn, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPressIn, isWebPlatform]);
+    const handlePressOut = (0, import_react2.useCallback)(chain(onPressOut, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPressOut, isWebPlatform]);
+    const handlePointerDown = (0, import_react2.useCallback)(chain(onPointerDown, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPointerDown, isWebPlatform]);
+    const handlePointerUp = (0, import_react2.useCallback)(chain(onPointerUp, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerUp, isWebPlatform]);
+    const handlePointerLeave = (0, import_react2.useCallback)(chain(onPointerLeave, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerLeave, isWebPlatform]);
+    const handlePointerCancel = (0, import_react2.useCallback)(chain(onPointerCancel, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerCancel, isWebPlatform]);
+    const handleMouseEnter = (0, import_react2.useCallback)(chain(onMouseEnter, () => {
+      if (!isWebPlatform) setHovered(true);
+    }), [onMouseEnter, isWebPlatform]);
+    const handleMouseLeave = (0, import_react2.useCallback)(chain(onMouseLeave, () => {
+      if (!isWebPlatform) setHovered(false);
+    }), [onMouseLeave, isWebPlatform]);
+    const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => {
+      if (!isWebPlatform) setFocused(true);
+    }), [onFocus, isWebPlatform]);
+    const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => {
+      if (!isWebPlatform) setFocused(false);
+    }), [onBlur, isWebPlatform]);
     const { children, disabled, checked, ...restForComponent } = rest;
     const computedStyle = (0, import_react2.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);
@@ -3440,7 +3463,7 @@ var InteractiveWrapper = (0, import_react2.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,
@@ -3482,20 +3505,21 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 var import_react3 = __toESM(require("react"));
 var DarkWrapper = import_react3.default.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...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 screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = (0, import_react3.useMemo)(() => {
-      if (isWeb) return {};
+      if (isWebPlatform) return {};
       const s = flatten(resolvedStyle, isDark, {}, breakpoints);
       stripInternalMarkers(s);
       if (isNonStringComponent) stripWebOnlyProps(s);
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
-    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 props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
@@ -3832,7 +3856,7 @@ function makeElement(isStaticChildren, type, props, key) {
 }
 function processElement(type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
-  const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
+  const webTag = getEffectiveIsWeb() ? getWebTag(type, rawProps ?? void 0) : null;
   const effectiveType = webTag ?? type;
   const originalName = webTag ? type?.displayName ?? type?.name : void 0;
   if (!rawProps) return (0, import_jsx_runtime.jsx)(effectiveType, null, key);
@@ -3856,7 +3880,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   if (!classStr && !__kbachStyles) {
-    if (isWeb) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
+    if (getEffectiveIsWeb()) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
     if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
@@ -3885,7 +3909,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...passProps
     }, key);
   }
-  const skipComputedInline = isWeb || !isNative && typeof effectiveType === "string";
+  const skipComputedInline = getEffectiveIsWeb();
   let finalStyle;
   if (!skipComputedInline) {
     const computedStyle = flatten(resolved, false);

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-7DHBNCL5.mjs";
-import "./chunk-HCRWLOJE.mjs";
+} from "./chunk-YUX2JPTM.mjs";
+import "./chunk-GJSZUC6Q.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -857,25 +857,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) {
@@ -891,6 +872,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) {
@@ -2409,7 +2392,7 @@ var RESOLVERS = {
   "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateX(${v})` };
+    if (getEffectiveIsWeb()) return { transform: `translateX(${typeof v === "number" ? `${v}px` : v})` };
     if (typeof v === "string") {
       const n = parseFloat(v);
       return isNaN(n) ? null : { transform: [{ translateX: n }] };
@@ -2419,7 +2402,7 @@ var RESOLVERS = {
   "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateY(${v})` };
+    if (getEffectiveIsWeb()) return { transform: `translateY(${typeof v === "number" ? `${v}px` : v})` };
     if (typeof v === "string") {
       const n = parseFloat(v);
       return isNaN(n) ? null : { transform: [{ translateY: n }] };
@@ -2588,6 +2571,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;
@@ -2626,6 +2617,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) {
@@ -2635,6 +2627,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)) {
@@ -2789,17 +2782,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);
@@ -2816,11 +2812,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 {
   }
 }
@@ -3296,17 +3296,19 @@ var useSyncExternalStore = import_react.default.useSyncExternalStore ?? function
 };
 
 // src/useGlobalDarkMode.ts
-function useGlobalDarkMode() {
+var NOOP_SUB = (_) => () => {
+};
+var FALSE_SNAP = () => false;
+function useConditionalGlobalDarkMode(active) {
   return useSyncExternalStore(
-    subscribeGlobalDarkMode,
-    getGlobalDarkMode,
-    () => false
-    // SSR: default light
+    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();
@@ -3340,7 +3342,7 @@ function getWebWidth() {
 }
 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
   );
@@ -3413,27 +3415,48 @@ var InteractiveWrapper = (0, import_react2.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_react2.useState)(false);
     const [hovered, setHovered] = (0, import_react2.useState)(false);
     const [focused, setFocused] = (0, import_react2.useState)(false);
-    const handlePressIn = (0, import_react2.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react2.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = (0, import_react2.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = (0, import_react2.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = (0, import_react2.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handlePointerCancel = (0, import_react2.useCallback)(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
-    const handleMouseEnter = (0, import_react2.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react2.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const handlePressIn = (0, import_react2.useCallback)(chain(onPressIn, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPressIn, isWebPlatform]);
+    const handlePressOut = (0, import_react2.useCallback)(chain(onPressOut, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPressOut, isWebPlatform]);
+    const handlePointerDown = (0, import_react2.useCallback)(chain(onPointerDown, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPointerDown, isWebPlatform]);
+    const handlePointerUp = (0, import_react2.useCallback)(chain(onPointerUp, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerUp, isWebPlatform]);
+    const handlePointerLeave = (0, import_react2.useCallback)(chain(onPointerLeave, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerLeave, isWebPlatform]);
+    const handlePointerCancel = (0, import_react2.useCallback)(chain(onPointerCancel, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerCancel, isWebPlatform]);
+    const handleMouseEnter = (0, import_react2.useCallback)(chain(onMouseEnter, () => {
+      if (!isWebPlatform) setHovered(true);
+    }), [onMouseEnter, isWebPlatform]);
+    const handleMouseLeave = (0, import_react2.useCallback)(chain(onMouseLeave, () => {
+      if (!isWebPlatform) setHovered(false);
+    }), [onMouseLeave, isWebPlatform]);
+    const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => {
+      if (!isWebPlatform) setFocused(true);
+    }), [onFocus, isWebPlatform]);
+    const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => {
+      if (!isWebPlatform) setFocused(false);
+    }), [onBlur, isWebPlatform]);
     const { children, disabled, checked, ...restForComponent } = rest;
     const computedStyle = (0, import_react2.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);
@@ -3441,7 +3464,7 @@ var InteractiveWrapper = (0, import_react2.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,
@@ -3483,20 +3506,21 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 var import_react3 = __toESM(require("react"));
 var DarkWrapper = import_react3.default.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...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 screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = (0, import_react3.useMemo)(() => {
-      if (isWeb) return {};
+      if (isWebPlatform) return {};
       const s = flatten(resolvedStyle, isDark, {}, breakpoints);
       stripInternalMarkers(s);
       if (isNonStringComponent) stripWebOnlyProps(s);
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
-    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 props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
@@ -3838,7 +3862,7 @@ function makeElement(isStaticChildren, type, props, key) {
 }
 function processElement(type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
-  const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
+  const webTag = getEffectiveIsWeb() ? getWebTag(type, rawProps ?? void 0) : null;
   const effectiveType = webTag ?? type;
   const originalName = webTag ? type?.displayName ?? type?.name : void 0;
   if (!rawProps) return (0, import_jsx_runtime.jsx)(effectiveType, null, key);
@@ -3862,7 +3886,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     }, key);
   }
   if (!classStr && !__kbachStyles) {
-    if (isWeb) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
+    if (getEffectiveIsWeb()) return makeElement(isStaticChildren, effectiveType, omitConsumed(workingProps), key);
     const defaultFont = getCachedDefaultFont();
     if (!defaultFont) return makeElement(isStaticChildren, effectiveType, workingProps, key);
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
@@ -3891,7 +3915,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...passProps
     }, key);
   }
-  const skipComputedInline = isWeb || !isNative && typeof effectiveType === "string";
+  const skipComputedInline = getEffectiveIsWeb();
   let finalStyle;
   if (!skipComputedInline) {
     const computedStyle = flatten(resolved, false);

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-7DHBNCL5.mjs";
+} from "./chunk-YUX2JPTM.mjs";
 import {
   registerWebElement
-} from "./chunk-HCRWLOJE.mjs";
+} from "./chunk-GJSZUC6Q.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,