@kbach/react 0.5.59 → 0.5.62

package/dist/{chunk-2MVCYYH5.mjs → chunk-5MX3E4OL.mjs}

@@ -7,7 +7,7 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-NP4FVE77.mjs";
+} from "./chunk-BRCQK5DA.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";
@@ -407,7 +407,6 @@ function hasInteractiveBuckets(resolved) {
   }
   return false;
 }
-var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
 
 // src/InteractiveWrapper.tsx
 function chain(original, extra) {
@@ -495,9 +494,10 @@ var InteractiveWrapper = forwardRef(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only.
-      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
+      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
+      // (and any component that accepts both prop names) depend on receiving them directly.
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -517,7 +517,6 @@ export {
   useConditionalWidth,
   hasResponsiveBuckets,
   hasInteractiveBuckets,
-  EMPTY_BREAKPOINTS2,
   registerWebElement,
   getWebTag,
   transformToWebProps,

package/dist/{chunk-NP4FVE77.mjs → chunk-BRCQK5DA.mjs}

@@ -1151,10 +1151,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1169,10 +1171,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2073,9 +2077,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2292,10 +2296,17 @@ var RESOLVERS = {
     const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
     const DEFAULT_RING_WIDTH = 3;
     const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
-    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     return {
-      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────

package/dist/{chunk-HRNOI54V.mjs → chunk-MZKQ7H67.mjs}

@@ -1,12 +1,12 @@
 import {
-  EMPTY_BREAKPOINTS2 as EMPTY_BREAKPOINTS,
+  EMPTY_BREAKPOINTS,
   InteractiveWrapper,
   getWebTag,
   hasResponsiveBuckets,
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-2MVCYYH5.mjs";
+} from "./chunk-5MX3E4OL.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -22,7 +22,7 @@ import {
   normalizeClassString,
   onConfigChange,
   resolve
-} from "./chunk-NP4FVE77.mjs";
+} from "./chunk-BRCQK5DA.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -90,7 +90,12 @@ var _lastFontVersion = -1;
 function _invalidateDefaultFontCache() {
   _defaultFontVersion++;
 }
-onConfigChange(_invalidateDefaultFontCache);
+{
+  const _KEY = "__kbach_font_cache_unsub__";
+  const g = globalThis;
+  if (g[_KEY]) g[_KEY]();
+  g[_KEY] = onConfigChange(_invalidateDefaultFontCache);
+}
 function getCachedDefaultFont() {
   if (_lastFontVersion !== _defaultFontVersion) {
     _cachedDefaultFont = getDefaultFontFamily();
@@ -182,7 +187,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
-  if (classStr && !__kbachStyles && /^(__[^\s]+\s*)+$/.test(classStr.trim())) {
+  if (classStr && !__kbachStyles && /^(__[A-Za-z0-9_]+\s*)+$/.test(classStr.trim())) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,

package/dist/index.js

@@ -1326,10 +1326,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1344,10 +1346,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2248,9 +2252,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2467,10 +2471,17 @@ var RESOLVERS = {
     const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
     const DEFAULT_RING_WIDTH = 3;
     const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
-    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     return {
-      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────
@@ -3400,8 +3411,14 @@ function ThemeProvider({
   }, [configOverride]);
   (0, import_react3.useEffect)(() => {
     if (configOverride) return;
-    const unsub = onConfigChange(setResolvedConfig);
-    return unsub;
+    let mounted = true;
+    const unsub = onConfigChange((config) => {
+      if (mounted) setResolvedConfig(config);
+    });
+    return () => {
+      mounted = false;
+      unsub();
+    };
   }, [configOverride]);
   const contextValue = (0, import_react3.useMemo)(
     () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
@@ -4007,7 +4024,9 @@ function styled(Component, baseClasses = "") {
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // 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, onPointerCancel: handlePointerLeave } : { onPointerDown, onPointerUp, onPointerLeave } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        // onPressIn/onPressOut are forwarded on web too (not just native) since
+        // react-native-web components rely on receiving them directly.
+        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,
@@ -4156,9 +4175,10 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only.
-      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
+      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
+      // (and any component that accepts both prop names) depend on receiving them directly.
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/index.mjs

@@ -11,7 +11,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-2MVCYYH5.mjs";
+} from "./chunk-5MX3E4OL.mjs";
 import {
   __require,
   buildConfig,
@@ -33,7 +33,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-NP4FVE77.mjs";
+} from "./chunk-BRCQK5DA.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -254,8 +254,14 @@ function ThemeProvider({
   }, [configOverride]);
   useEffect(() => {
     if (configOverride) return;
-    const unsub = onConfigChange(setResolvedConfig);
-    return unsub;
+    let mounted = true;
+    const unsub = onConfigChange((config) => {
+      if (mounted) setResolvedConfig(config);
+    });
+    return () => {
+      mounted = false;
+      unsub();
+    };
   }, [configOverride]);
   const contextValue = useMemo2(
     () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
@@ -495,7 +501,9 @@ function styled(Component, baseClasses = "") {
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // 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, onPointerCancel: handlePointerLeave } : { onPointerDown, onPointerUp, onPointerLeave } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        // onPressIn/onPressOut are forwarded on web too (not just native) since
+        // react-native-web components rely on receiving them directly.
+        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,

package/dist/jsx-dev-runtime.js

@@ -1219,10 +1219,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1237,10 +1239,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2141,9 +2145,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2360,10 +2364,17 @@ var RESOLVERS = {
     const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
     const DEFAULT_RING_WIDTH = 3;
     const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
-    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     return {
-      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────
@@ -3196,7 +3207,6 @@ function hasResponsiveBuckets(resolved) {
   }
   return false;
 }
-var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
 
 // src/InteractiveWrapper.tsx
 function chain(original, extra) {
@@ -3284,9 +3294,10 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only.
-      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
+      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
+      // (and any component that accepts both prop names) depend on receiving them directly.
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -3304,7 +3315,7 @@ var DarkWrapper = import_react4.default.forwardRef(
     const isDark = useGlobalDarkMode();
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
-    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS2;
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = (0, import_react4.useMemo)(() => {
@@ -3631,7 +3642,12 @@ var _lastFontVersion = -1;
 function _invalidateDefaultFontCache() {
   _defaultFontVersion++;
 }
-onConfigChange(_invalidateDefaultFontCache);
+{
+  const _KEY = "__kbach_font_cache_unsub__";
+  const g = globalThis;
+  if (g[_KEY]) g[_KEY]();
+  g[_KEY] = onConfigChange(_invalidateDefaultFontCache);
+}
 function getCachedDefaultFont() {
   if (_lastFontVersion !== _defaultFontVersion) {
     _cachedDefaultFont = getDefaultFontFamily();
@@ -3723,7 +3739,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
-  if (classStr && !__kbachStyles && /^(__[^\s]+\s*)+$/.test(classStr.trim())) {
+  if (classStr && !__kbachStyles && /^(__[A-Za-z0-9_]+\s*)+$/.test(classStr.trim())) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-HRNOI54V.mjs";
-import "./chunk-2MVCYYH5.mjs";
-import "./chunk-NP4FVE77.mjs";
+} from "./chunk-MZKQ7H67.mjs";
+import "./chunk-5MX3E4OL.mjs";
+import "./chunk-BRCQK5DA.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -1220,10 +1220,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1238,10 +1240,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2142,9 +2146,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2361,10 +2365,17 @@ var RESOLVERS = {
     const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
     const DEFAULT_RING_WIDTH = 3;
     const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
-    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     return {
-      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────
@@ -3197,7 +3208,6 @@ function hasResponsiveBuckets(resolved) {
   }
   return false;
 }
-var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
 
 // src/InteractiveWrapper.tsx
 function chain(original, extra) {
@@ -3285,9 +3295,10 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only.
-      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
+      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
+      // (and any component that accepts both prop names) depend on receiving them directly.
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -3305,7 +3316,7 @@ var DarkWrapper = import_react4.default.forwardRef(
     const isDark = useGlobalDarkMode();
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
-    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS2;
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = (0, import_react4.useMemo)(() => {
@@ -3637,7 +3648,12 @@ var _lastFontVersion = -1;
 function _invalidateDefaultFontCache() {
   _defaultFontVersion++;
 }
-onConfigChange(_invalidateDefaultFontCache);
+{
+  const _KEY = "__kbach_font_cache_unsub__";
+  const g = globalThis;
+  if (g[_KEY]) g[_KEY]();
+  g[_KEY] = onConfigChange(_invalidateDefaultFontCache);
+}
 function getCachedDefaultFont() {
   if (_lastFontVersion !== _defaultFontVersion) {
     _cachedDefaultFont = getDefaultFontFamily();
@@ -3729,7 +3745,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
-  if (classStr && !__kbachStyles && /^(__[^\s]+\s*)+$/.test(classStr.trim())) {
+  if (classStr && !__kbachStyles && /^(__[A-Za-z0-9_]+\s*)+$/.test(classStr.trim())) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,

package/dist/jsx-runtime.mjs

@@ -3,11 +3,11 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-HRNOI54V.mjs";
+} from "./chunk-MZKQ7H67.mjs";
 import {
   registerWebElement
-} from "./chunk-2MVCYYH5.mjs";
-import "./chunk-NP4FVE77.mjs";
+} from "./chunk-5MX3E4OL.mjs";
+import "./chunk-BRCQK5DA.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/vite-plugin.ts
@@ -25,6 +35,7 @@ __export(vite_plugin_exports, {
 module.exports = __toCommonJS(vite_plugin_exports);
 var import_fs = require("fs");
 var import_path = require("path");
+var import_node_process = __toESM(require("process"));
 
 // src/core/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
@@ -1073,10 +1084,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1091,10 +1104,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -1995,9 +2010,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2214,10 +2229,17 @@ var RESOLVERS = {
     const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
     const DEFAULT_RING_WIDTH = 3;
     const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
-    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     return {
-      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────
@@ -2917,9 +2939,10 @@ var customVariants = new Proxy(
 );
 
 // src/vite-plugin.ts
+var process2 = import_node_process.default;
 function normPath(p) {
   const fwd = p.replace(/\\/g, "/");
-  return process.platform === "win32" ? fwd.toLowerCase() : fwd;
+  return process2.platform === "win32" ? fwd.toLowerCase() : fwd;
 }
 setCSSGenMode(true);
 var KBACH_START = "/* kbach:start */";
@@ -3159,7 +3182,7 @@ function kbach(userConfigOrOptions) {
   const screenKeys = Object.keys(cfg.theme.screens ?? {});
   const responsivePattern = screenKeys.length ? screenKeys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") : "sm|md|lg|xl|2xl";
   const responsiveRe = new RegExp(`^(${responsivePattern}):`);
-  let root = process.cwd();
+  let root = process2.cwd();
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
   const tokenCSS = /* @__PURE__ */ new Map();

package/dist/vite-plugin.mjs

@@ -4,11 +4,13 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-NP4FVE77.mjs";
+} from "./chunk-BRCQK5DA.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
 import { join } from "path";
+import processImport from "process";
+var process = processImport;
 function normPath(p) {
   const fwd = p.replace(/\\/g, "/");
   return process.platform === "win32" ? fwd.toLowerCase() : fwd;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.5.59",
+  "version": "0.5.62",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",