@kbach/react 0.5.2 → 0.5.4

package/dist/{chunk-XVPIJMIR.mjs → chunk-D7Q7ZCOW.mjs}

@@ -3078,12 +3078,12 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
     injectRule(styles.__keyframe);
   }
   const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
-  if (!cssDecls) return;
   const escaped = escapeCSSSelector(cls);
   const childSuffix = isDivide ? " > * + *" : "";
   if (bucketKey === "base") {
-    injectRule(`.${escaped}${childSuffix} { ${cssDecls} }`);
+    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!baseCssDecls) return;
+    injectRule(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
     return;
   }
   const mods = bucketKey.split(":");
@@ -3103,6 +3103,18 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
   const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
   const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
   const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
+    "first",
+    "last",
+    "odd",
+    "even",
+    "only",
+    "focus-within",
+    "focus-visible"
+  ]);
+  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
+  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!cssDecls) return;
   let rule;
   if (hasDark) {
     if (darkMode === "media") {
@@ -3225,9 +3237,19 @@ function resolve(classString, theme, darkMode = "attribute") {
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
-  const result = { ...resolved.base ?? {} };
-  for (const [key, styles] of Object.entries(resolved)) {
-    if (key === "base" || !styles) continue;
+  const result = {};
+  const entries = Object.entries(resolved);
+  entries.sort((a, b) => {
+    const pa = a[0] === "base" ? -1 : a[0].split(":").length;
+    const pb = b[0] === "base" ? -1 : b[0].split(":").length;
+    return pa - pb;
+  });
+  for (const [key, styles] of entries) {
+    if (!styles) continue;
+    if (key === "base") {
+      Object.assign(result, styles);
+      continue;
+    }
     const mods = key.split(":");
     if (matchesMods(mods, isDark, state, breakpoints)) {
       Object.assign(result, styles);
@@ -3578,6 +3600,9 @@ var InteractiveWrapper = forwardRef(
     style: styleProp,
     onPressIn,
     onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -3593,6 +3618,9 @@ var InteractiveWrapper = forwardRef(
     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 handleMouseEnter = useCallback(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
     const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
@@ -3640,8 +3668,9 @@ var InteractiveWrapper = forwardRef(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
-      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // onPressIn / onPressOut are React Native-only.
+      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
+      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/{chunk-XGWS3OQD.mjs → chunk-UR4DTYE3.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-XVPIJMIR.mjs";
+} from "./chunk-D7Q7ZCOW.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";
@@ -88,17 +88,12 @@ var INTERACTIVE_MODS = /* @__PURE__ */ new Set([
   "visited",
   "not-visited",
   "placeholder",
-  "focus-within",
-  "focus-visible",
   "group-hover",
   "group-focus",
   "peer-hover",
-  "peer-focus",
-  "first",
-  "last",
-  "odd",
-  "even",
-  "only"
+  "peer-focus"
+  // focus-within / focus-visible / first / last / odd / even / only are CSS-only —
+  // they have no JS state to track, so they don't need InteractiveWrapper.
 ]);
 var RESPONSIVE_MODS2 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
 var MODE_MODS_JSX = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);

package/dist/index.d.mts

@@ -315,6 +315,9 @@ interface InteractiveWrapperProps {
     children?: React__default.ReactNode;
     onPressIn?: (...args: any[]) => void;
     onPressOut?: (...args: any[]) => void;
+    onPointerDown?: (...args: any[]) => void;
+    onPointerUp?: (...args: any[]) => void;
+    onPointerLeave?: (...args: any[]) => void;
     onMouseEnter?: (...args: any[]) => void;
     onMouseLeave?: (...args: any[]) => void;
     onFocus?: (...args: any[]) => void;

package/dist/index.d.ts

@@ -315,6 +315,9 @@ interface InteractiveWrapperProps {
     children?: React__default.ReactNode;
     onPressIn?: (...args: any[]) => void;
     onPressOut?: (...args: any[]) => void;
+    onPointerDown?: (...args: any[]) => void;
+    onPointerUp?: (...args: any[]) => void;
+    onPointerLeave?: (...args: any[]) => void;
     onMouseEnter?: (...args: any[]) => void;
     onMouseLeave?: (...args: any[]) => void;
     onFocus?: (...args: any[]) => void;

package/dist/index.js

@@ -3208,12 +3208,12 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
     injectRule(styles.__keyframe);
   }
   const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
-  if (!cssDecls) return;
   const escaped = escapeCSSSelector(cls);
   const childSuffix = isDivide ? " > * + *" : "";
   if (bucketKey === "base") {
-    injectRule(`.${escaped}${childSuffix} { ${cssDecls} }`);
+    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!baseCssDecls) return;
+    injectRule(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
     return;
   }
   const mods = bucketKey.split(":");
@@ -3233,6 +3233,18 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
   const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
   const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
   const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
+    "first",
+    "last",
+    "odd",
+    "even",
+    "only",
+    "focus-within",
+    "focus-visible"
+  ]);
+  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
+  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!cssDecls) return;
   let rule;
   if (hasDark) {
     if (darkMode === "media") {
@@ -3355,9 +3367,19 @@ function resolve(classString, theme, darkMode = "attribute") {
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
-  const result = { ...resolved.base ?? {} };
-  for (const [key, styles] of Object.entries(resolved)) {
-    if (key === "base" || !styles) continue;
+  const result = {};
+  const entries = Object.entries(resolved);
+  entries.sort((a, b) => {
+    const pa = a[0] === "base" ? -1 : a[0].split(":").length;
+    const pb = b[0] === "base" ? -1 : b[0].split(":").length;
+    return pa - pb;
+  });
+  for (const [key, styles] of entries) {
+    if (!styles) continue;
+    if (key === "base") {
+      Object.assign(result, styles);
+      continue;
+    }
     const mods = key.split(":");
     if (matchesMods(mods, isDark, state, breakpoints)) {
       Object.assign(result, styles);
@@ -4098,6 +4120,9 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     style: styleProp,
     onPressIn,
     onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -4113,6 +4138,9 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     const [focused, setFocused] = (0, import_react9.useState)(false);
     const handlePressIn = (0, import_react9.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
     const handlePressOut = (0, import_react9.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react9.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react9.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react9.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
     const handleMouseEnter = (0, import_react9.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
     const handleMouseLeave = (0, import_react9.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = (0, import_react9.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
@@ -4160,8 +4188,9 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
-      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // onPressIn / onPressOut are React Native-only.
+      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
+      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/index.mjs

@@ -23,7 +23,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-XVPIJMIR.mjs";
+} from "./chunk-D7Q7ZCOW.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -3099,12 +3099,12 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
     injectRule(styles.__keyframe);
   }
   const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
-  if (!cssDecls) return;
   const escaped = escapeCSSSelector(cls);
   const childSuffix = isDivide ? " > * + *" : "";
   if (bucketKey === "base") {
-    injectRule(`.${escaped}${childSuffix} { ${cssDecls} }`);
+    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!baseCssDecls) return;
+    injectRule(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
     return;
   }
   const mods = bucketKey.split(":");
@@ -3124,6 +3124,18 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
   const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
   const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
   const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
+    "first",
+    "last",
+    "odd",
+    "even",
+    "only",
+    "focus-within",
+    "focus-visible"
+  ]);
+  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
+  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!cssDecls) return;
   let rule;
   if (hasDark) {
     if (darkMode === "media") {
@@ -3246,9 +3258,19 @@ function resolve(classString, theme, darkMode = "attribute") {
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
-  const result = { ...resolved.base ?? {} };
-  for (const [key, styles] of Object.entries(resolved)) {
-    if (key === "base" || !styles) continue;
+  const result = {};
+  const entries = Object.entries(resolved);
+  entries.sort((a, b) => {
+    const pa = a[0] === "base" ? -1 : a[0].split(":").length;
+    const pb = b[0] === "base" ? -1 : b[0].split(":").length;
+    return pa - pb;
+  });
+  for (const [key, styles] of entries) {
+    if (!styles) continue;
+    if (key === "base") {
+      Object.assign(result, styles);
+      continue;
+    }
     const mods = key.split(":");
     if (matchesMods(mods, isDark, state, breakpoints)) {
       Object.assign(result, styles);
@@ -3556,6 +3578,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     style: styleProp,
     onPressIn,
     onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -3571,6 +3596,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const [focused, setFocused] = (0, import_react3.useState)(false);
     const handlePressIn = (0, import_react3.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
     const handlePressOut = (0, import_react3.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react3.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react3.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react3.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
     const handleMouseEnter = (0, import_react3.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
     const handleMouseLeave = (0, import_react3.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
@@ -3618,8 +3646,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
-      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // onPressIn / onPressOut are React Native-only.
+      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
+      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -3705,17 +3734,12 @@ var INTERACTIVE_MODS = /* @__PURE__ */ new Set([
   "visited",
   "not-visited",
   "placeholder",
-  "focus-within",
-  "focus-visible",
   "group-hover",
   "group-focus",
   "peer-hover",
-  "peer-focus",
-  "first",
-  "last",
-  "odd",
-  "even",
-  "only"
+  "peer-focus"
+  // focus-within / focus-visible / first / last / odd / even / only are CSS-only —
+  // they have no JS state to track, so they don't need InteractiveWrapper.
 ]);
 var RESPONSIVE_MODS4 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
 var MODE_MODS_JSX = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-XGWS3OQD.mjs";
-import "./chunk-XVPIJMIR.mjs";
+} from "./chunk-UR4DTYE3.mjs";
+import "./chunk-D7Q7ZCOW.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -3098,12 +3098,12 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
     injectRule(styles.__keyframe);
   }
   const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
-  if (!cssDecls) return;
   const escaped = escapeCSSSelector(cls);
   const childSuffix = isDivide ? " > * + *" : "";
   if (bucketKey === "base") {
-    injectRule(`.${escaped}${childSuffix} { ${cssDecls} }`);
+    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!baseCssDecls) return;
+    injectRule(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
     return;
   }
   const mods = bucketKey.split(":");
@@ -3123,6 +3123,18 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
   const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
   const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
   const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
+    "first",
+    "last",
+    "odd",
+    "even",
+    "only",
+    "focus-within",
+    "focus-visible"
+  ]);
+  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
+  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!cssDecls) return;
   let rule;
   if (hasDark) {
     if (darkMode === "media") {
@@ -3245,9 +3257,19 @@ function resolve(classString, theme, darkMode = "attribute") {
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
-  const result = { ...resolved.base ?? {} };
-  for (const [key, styles] of Object.entries(resolved)) {
-    if (key === "base" || !styles) continue;
+  const result = {};
+  const entries = Object.entries(resolved);
+  entries.sort((a, b) => {
+    const pa = a[0] === "base" ? -1 : a[0].split(":").length;
+    const pb = b[0] === "base" ? -1 : b[0].split(":").length;
+    return pa - pb;
+  });
+  for (const [key, styles] of entries) {
+    if (!styles) continue;
+    if (key === "base") {
+      Object.assign(result, styles);
+      continue;
+    }
     const mods = key.split(":");
     if (matchesMods(mods, isDark, state, breakpoints)) {
       Object.assign(result, styles);
@@ -3555,6 +3577,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     style: styleProp,
     onPressIn,
     onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -3570,6 +3595,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const [focused, setFocused] = (0, import_react3.useState)(false);
     const handlePressIn = (0, import_react3.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
     const handlePressOut = (0, import_react3.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react3.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react3.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react3.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
     const handleMouseEnter = (0, import_react3.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
     const handleMouseLeave = (0, import_react3.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
@@ -3617,8 +3645,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
-      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // onPressIn / onPressOut are React Native-only.
+      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
+      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -3704,17 +3733,12 @@ var INTERACTIVE_MODS = /* @__PURE__ */ new Set([
   "visited",
   "not-visited",
   "placeholder",
-  "focus-within",
-  "focus-visible",
   "group-hover",
   "group-focus",
   "peer-hover",
-  "peer-focus",
-  "first",
-  "last",
-  "odd",
-  "even",
-  "only"
+  "peer-focus"
+  // focus-within / focus-visible / first / last / odd / even / only are CSS-only —
+  // they have no JS state to track, so they don't need InteractiveWrapper.
 ]);
 var RESPONSIVE_MODS4 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
 var MODE_MODS_JSX = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-XGWS3OQD.mjs";
-import "./chunk-XVPIJMIR.mjs";
+} from "./chunk-UR4DTYE3.mjs";
+import "./chunk-D7Q7ZCOW.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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