@kbach/react 0.6.14 → 0.6.16

package/dist/{chunk-HCRWLOJE.mjs → chunk-GJSZUC6Q.mjs}

@@ -737,25 +737,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) {
@@ -771,6 +752,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) {
@@ -2289,7 +2272,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 }] };
@@ -2299,7 +2282,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 }] };
@@ -2468,6 +2451,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;
@@ -2506,6 +2497,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) {
@@ -2515,6 +2507,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)) {
@@ -2763,17 +2756,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);
@@ -2793,11 +2789,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 {
   }
 }
@@ -3066,6 +3066,7 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
 }
 function clearCache() {
   _injectedRules.clear();
+  _ruleIndexByKey.clear();
   if (_styleEl) {
     _styleEl.remove();
     _styleEl = null;
@@ -3303,6 +3304,9 @@ var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExterna
 };
 
 // src/useGlobalDarkMode.ts
+var NOOP_SUB = (_) => () => {
+};
+var FALSE_SNAP = () => false;
 function useGlobalDarkMode() {
   return useSyncExternalStore(
     subscribeGlobalDarkMode,
@@ -3311,6 +3315,13 @@ function useGlobalDarkMode() {
     // SSR: default light
   );
 }
+function useConditionalGlobalDarkMode(active) {
+  return useSyncExternalStore(
+    active ? subscribeGlobalDarkMode : NOOP_SUB,
+    active ? getGlobalDarkMode : FALSE_SNAP,
+    FALSE_SNAP
+  );
+}
 
 // src/shared-utils.ts
 function hasResponsiveBuckets(resolved) {
@@ -3649,7 +3660,7 @@ function transformToWebProps(originalName, tag, props) {
 import React2, { forwardRef, useState, useCallback, useMemo } from "react";
 
 // src/useGlobalWidth.ts
-var NOOP_SUB = (_) => () => {
+var NOOP_SUB2 = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
 var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
@@ -3690,7 +3701,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
   );
@@ -3715,27 +3726,48 @@ var InteractiveWrapper = 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] = useState(false);
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
-    const handlePressIn = useCallback(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = useCallback(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = useCallback(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = useCallback(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = useCallback(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handlePointerCancel = useCallback(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
-    const handleMouseEnter = useCallback(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const handlePressIn = useCallback(chain(onPressIn, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPressIn, isWebPlatform]);
+    const handlePressOut = useCallback(chain(onPressOut, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPressOut, isWebPlatform]);
+    const handlePointerDown = useCallback(chain(onPointerDown, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPointerDown, isWebPlatform]);
+    const handlePointerUp = useCallback(chain(onPointerUp, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerUp, isWebPlatform]);
+    const handlePointerLeave = useCallback(chain(onPointerLeave, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerLeave, isWebPlatform]);
+    const handlePointerCancel = useCallback(chain(onPointerCancel, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerCancel, isWebPlatform]);
+    const handleMouseEnter = useCallback(chain(onMouseEnter, () => {
+      if (!isWebPlatform) setHovered(true);
+    }), [onMouseEnter, isWebPlatform]);
+    const handleMouseLeave = useCallback(chain(onMouseLeave, () => {
+      if (!isWebPlatform) setHovered(false);
+    }), [onMouseLeave, isWebPlatform]);
+    const handleFocus = useCallback(chain(onFocus, () => {
+      if (!isWebPlatform) setFocused(true);
+    }), [onFocus, isWebPlatform]);
+    const handleBlur = useCallback(chain(onBlur, () => {
+      if (!isWebPlatform) setFocused(false);
+    }), [onBlur, isWebPlatform]);
     const { children, disabled, checked, ...restForComponent } = rest;
     const computedStyle = 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);
@@ -3743,7 +3775,7 @@ var InteractiveWrapper = 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,
@@ -3789,6 +3821,8 @@ export {
   isWeb,
   isNative,
   setResolveTarget,
+  getEffectiveIsWeb,
+  kbachWarn,
   getInteractiveModifiers,
   getModeModifiers,
   getResponsiveModifiers,
@@ -3817,6 +3851,7 @@ export {
   setGlobalDarkMode,
   useSyncExternalStore,
   useGlobalDarkMode,
+  useConditionalGlobalDarkMode,
   EMPTY_BREAKPOINTS,
   useGlobalWidth,
   useConditionalWidth,

package/dist/{chunk-7DHBNCL5.mjs → chunk-YUX2JPTM.mjs}

@@ -6,6 +6,7 @@ import {
   getActiveBreakpoints,
   getConfig,
   getDefaultFontFamily,
+  getEffectiveIsWeb,
   getGlobalScreens,
   getInteractiveModifiers,
   getModeModifiers,
@@ -21,9 +22,9 @@ import {
   stripInternalMarkers,
   stripWebOnlyProps,
   transformToWebProps,
-  useConditionalWidth,
-  useGlobalDarkMode
-} from "./chunk-HCRWLOJE.mjs";
+  useConditionalGlobalDarkMode,
+  useConditionalWidth
+} from "./chunk-GJSZUC6Q.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,20 +34,21 @@ import { Fragment } from "react";
 import React, { useMemo } from "react";
 var DarkWrapper = React.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 = 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) ? React.createElement(Component, props, ...children) : React.createElement(Component, props, children);
@@ -113,7 +115,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 _jsx(effectiveType, null, key);
@@ -137,7 +139,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);
@@ -166,7 +168,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);