@kbach/react 0.6.4 → 0.6.5

package/README.md

@@ -88,6 +88,8 @@ import './kbach.css';
 
 The plugin scans your source files and writes generated CSS between the `/* kbach:start */`/`/* kbach:end */` markers. Importing `kbach.css` automatically disables runtime injection — all styles come from the file instead. On HMR, only the changed file is rescanned; unchanged tokens reuse cached CSS.
 
+While it's scanning, the plugin also indexes every `.css`/`.scss`/`.sass`/`.less` file under the same directories and warns in the terminal (not the browser console) for any class that's neither a real Kbach utility nor defined anywhere in those stylesheets — likely a typo. A class you've defined yourself elsewhere (CSS Modules, styled-components, a third-party component's class) is recognized as soon as something in the project literally has a `.that-class-name` rule, so it won't get flagged just because Kbach itself doesn't know it.
+
 ## Next.js
 
 Step 1 (tsconfig `jsxImportSource`) and step 2 (`ThemeProvider`) above apply as-is — Next.js's SWC compiler reads `jsxImportSource` from `tsconfig.json` the same way Vite does, and `@kbach/react` shipping its own `"use client"` directive means `ThemeProvider` works directly in a Server Component tree (e.g. the App Router root `layout.tsx`) with no wrapper of your own needed.
@@ -298,6 +300,17 @@ Negated: `not-hover:`, `not-focus:`, `not-pressed:`, `not-active:`, `not-disable
 <p className="peer-focus:text-blue-6" />
 ```
 
+Nested groups need names, or the inner element reacts to whichever `.group` is nearest — not necessarily the one you meant:
+
+```jsx
+<div className="group/card">
+  <div className="group/icon">
+    <span className="group-hover/icon:opacity-100" /> {/* only the inner group */}
+  </div>
+  <span className="group-hover/card:underline" />      {/* only the outer group */}
+</div>
+```
+
 ### Responsive
 
 | Modifier | Min-width |

package/dist/{chunk-SVPKCLOI.mjs → chunk-BAUO36PM.mjs}

@@ -650,11 +650,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
@@ -2331,10 +2350,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2352,7 +2373,7 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
 }
 var _sortedPrefixes = null;
 var _standaloneNames = null;
@@ -3631,9 +3652,19 @@ var InteractiveWrapper = forwardRef(
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // 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: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
+      // component (react-native-web components accept both prop names), never when it's a
+      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
+      // property" for onPressIn/onPressOut on a host element even when the value is
+      // undefined — the check is on the prop KEY being present at all, not its value — so
+      // the key must be omitted entirely for string components, not just set to undefined.
+      ...!isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/{chunk-EU7RK3K4.mjs → chunk-FXDK5Z6V.mjs}

@@ -23,7 +23,7 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-SVPKCLOI.mjs";
+} from "./chunk-BAUO36PM.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.js

@@ -775,11 +775,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
@@ -2450,10 +2469,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2471,7 +2492,7 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
 }
 var _sortedPrefixes = null;
 var _standaloneNames = null;
@@ -3917,8 +3938,25 @@ function styled(Component, baseClasses = "") {
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // 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: handlePointerCancel, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        // react-native-web components rely on receiving them directly — but only
+        // when effectiveComponent is an actual component, never a literal HTML tag
+        // string ('div', 'a', …). React DOM warns "Unknown event handler property"
+        // for onPressIn/onPressOut on a host element even when the value is
+        // undefined — the check is on the prop KEY being present at all, not its
+        // value — so the key must be omitted entirely for string components.
+        ...isWeb ? hasInteractive ? {
+          onPointerDown: handlePointerDown,
+          onPointerUp: handlePointerUp,
+          onPointerLeave: handlePointerLeave,
+          onPointerCancel: handlePointerCancel,
+          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+        } : {
+          onPointerDown,
+          onPointerUp,
+          onPointerLeave,
+          onPointerCancel,
+          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+        } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,
@@ -4039,9 +4077,19 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // 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: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
+      // component (react-native-web components accept both prop names), never when it's a
+      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
+      // property" for onPressIn/onPressOut on a host element even when the value is
+      // undefined — the check is on the prop KEY being present at all, not its value — so
+      // the key must be omitted entirely for string components, not just set to undefined.
+      ...!isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/index.mjs

@@ -36,7 +36,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-SVPKCLOI.mjs";
+} from "./chunk-BAUO36PM.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -330,8 +330,25 @@ function styled(Component, baseClasses = "") {
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // 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: handlePointerCancel, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        // react-native-web components rely on receiving them directly — but only
+        // when effectiveComponent is an actual component, never a literal HTML tag
+        // string ('div', 'a', …). React DOM warns "Unknown event handler property"
+        // for onPressIn/onPressOut on a host element even when the value is
+        // undefined — the check is on the prop KEY being present at all, not its
+        // value — so the key must be omitted entirely for string components.
+        ...isWeb ? hasInteractive ? {
+          onPointerDown: handlePointerDown,
+          onPointerUp: handlePointerUp,
+          onPointerLeave: handlePointerLeave,
+          onPointerCancel: handlePointerCancel,
+          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+        } : {
+          onPointerDown,
+          onPointerUp,
+          onPointerLeave,
+          onPointerCancel,
+          ...typeof effectiveComponent !== "string" ? { 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

@@ -728,11 +728,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
@@ -2409,10 +2428,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2430,7 +2451,7 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
 }
 var _sortedPrefixes = null;
 var _standaloneNames = null;
@@ -3328,9 +3349,19 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // 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: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
+      // component (react-native-web components accept both prop names), never when it's a
+      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
+      // property" for onPressIn/onPressOut on a host element even when the value is
+      // undefined — the check is on the prop KEY being present at all, not its value — so
+      // the key must be omitted entirely for string components, not just set to undefined.
+      ...!isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-EU7RK3K4.mjs";
-import "./chunk-SVPKCLOI.mjs";
+} from "./chunk-FXDK5Z6V.mjs";
+import "./chunk-BAUO36PM.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -729,11 +729,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
@@ -2410,10 +2429,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2431,7 +2452,7 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
 }
 var _sortedPrefixes = null;
 var _standaloneNames = null;
@@ -3329,9 +3350,19 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // 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: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
+      // component (react-native-web components accept both prop names), never when it's a
+      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
+      // property" for onPressIn/onPressOut on a host element even when the value is
+      // undefined — the check is on the prop KEY being present at all, not its value — so
+      // the key must be omitted entirely for string components, not just set to undefined.
+      ...!isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-EU7RK3K4.mjs";
+} from "./chunk-FXDK5Z6V.mjs";
 import {
   registerWebElement
-} from "./chunk-SVPKCLOI.mjs";
+} from "./chunk-BAUO36PM.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -2269,10 +2269,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2390,11 +2392,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 
 // src/core/parser.ts
@@ -3203,6 +3224,38 @@ function scanDir(dir, onFile) {
     }
   }
 }
+var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
+var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
+function scanCssFileInto(filePath, into) {
+  try {
+    const text = (0, import_fs.readFileSync)(filePath, "utf-8");
+    let m;
+    CSS_CLASS_SELECTOR_RE.lastIndex = 0;
+    while ((m = CSS_CLASS_SELECTOR_RE.exec(text)) !== null) into.add(m[1]);
+  } catch {
+  }
+}
+function scanCssSelectorsInto(dir, into) {
+  let entries;
+  try {
+    entries = (0, import_fs.readdirSync)(dir);
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || entry === "node_modules") continue;
+    const full = (0, import_path.join)(dir, entry);
+    try {
+      const st = (0, import_fs.statSync)(full);
+      if (st.isDirectory()) scanCssSelectorsInto(full, into);
+      else if (CSS_FILE_RE.test(entry)) scanCssFileInto(full, into);
+    } catch {
+    }
+  }
+}
+function stripModifierPrefix(token) {
+  return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
+}
 var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components", "views", "layouts"];
 function kbach(userConfigOrOptions) {
   const isOptions = userConfigOrOptions != null && ("framework" in userConfigOrOptions || "include" in userConfigOrOptions);
@@ -3217,6 +3270,19 @@ function kbach(userConfigOrOptions) {
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
   const tokenCSS = /* @__PURE__ */ new Map();
+  const projectCssClasses = /* @__PURE__ */ new Set();
+  const warnedTokens = /* @__PURE__ */ new Set();
+  function checkUnknownToken(tok) {
+    if (process2.env.NODE_ENV === "production" || warnedTokens.has(tok) || tok.startsWith("__")) return;
+    const parsed = parseClass(tok);
+    if (parsed && resolveUtility(parsed, cfg.theme) !== null) return;
+    const base = stripModifierPrefix(tok);
+    if (!base || projectCssClasses.has(base)) return;
+    warnedTokens.add(tok);
+    console.warn(
+      `[kbach] "${tok}" isn't a Kbach utility and no matching CSS rule was found anywhere in the project (checked .css/.scss/.sass/.less files) \u2014 possible typo? If this is intentional (a third-party class, one defined via CSS-in-JS, etc.), this warning is safe to ignore.`
+    );
+  }
   function processFile(filePath, code) {
     const key = normPath(filePath);
     const tokens = /* @__PURE__ */ new Set();
@@ -3225,9 +3291,13 @@ function kbach(userConfigOrOptions) {
       if (!tokenCSS.has(tok)) {
         tokenCSS.set(tok, generateClassCSS(tok, cfg.theme, cfg.darkMode, screens));
       }
+      checkUnknownToken(tok);
     }
     fileTokens.set(key, tokens);
   }
+  function scanProjectCssSelectors() {
+    for (const dir of includeDirs) scanCssSelectorsInto((0, import_path.join)(root, dir), projectCssClasses);
+  }
   function buildTokenCSSView() {
     const active = /* @__PURE__ */ new Set();
     for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
@@ -3272,11 +3342,17 @@ ${code}`,
     },
     buildStart() {
       mainCSSFile = findKbachCSS(root);
+      scanProjectCssSelectors();
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
     handleHotUpdate({ file, server }) {
-      if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
+      if (file.includes("node_modules")) return;
+      if (CSS_FILE_RE.test(file)) {
+        scanCssFileInto(file, projectCssClasses);
+        return;
+      }
+      if (!/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         processFile(file, (0, import_fs.readFileSync)(file, "utf-8"));
       } catch {

package/dist/vite-plugin.mjs

@@ -2235,10 +2235,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2356,11 +2358,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 
 // src/core/parser.ts
@@ -3169,6 +3190,38 @@ function scanDir(dir, onFile) {
     }
   }
 }
+var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
+var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
+function scanCssFileInto(filePath, into) {
+  try {
+    const text = readFileSync(filePath, "utf-8");
+    let m;
+    CSS_CLASS_SELECTOR_RE.lastIndex = 0;
+    while ((m = CSS_CLASS_SELECTOR_RE.exec(text)) !== null) into.add(m[1]);
+  } catch {
+  }
+}
+function scanCssSelectorsInto(dir, into) {
+  let entries;
+  try {
+    entries = readdirSync(dir);
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || entry === "node_modules") continue;
+    const full = join(dir, entry);
+    try {
+      const st = statSync(full);
+      if (st.isDirectory()) scanCssSelectorsInto(full, into);
+      else if (CSS_FILE_RE.test(entry)) scanCssFileInto(full, into);
+    } catch {
+    }
+  }
+}
+function stripModifierPrefix(token) {
+  return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
+}
 var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components", "views", "layouts"];
 function kbach(userConfigOrOptions) {
   const isOptions = userConfigOrOptions != null && ("framework" in userConfigOrOptions || "include" in userConfigOrOptions);
@@ -3183,6 +3236,19 @@ function kbach(userConfigOrOptions) {
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
   const tokenCSS = /* @__PURE__ */ new Map();
+  const projectCssClasses = /* @__PURE__ */ new Set();
+  const warnedTokens = /* @__PURE__ */ new Set();
+  function checkUnknownToken(tok) {
+    if (process2.env.NODE_ENV === "production" || warnedTokens.has(tok) || tok.startsWith("__")) return;
+    const parsed = parseClass(tok);
+    if (parsed && resolveUtility(parsed, cfg.theme) !== null) return;
+    const base = stripModifierPrefix(tok);
+    if (!base || projectCssClasses.has(base)) return;
+    warnedTokens.add(tok);
+    console.warn(
+      `[kbach] "${tok}" isn't a Kbach utility and no matching CSS rule was found anywhere in the project (checked .css/.scss/.sass/.less files) \u2014 possible typo? If this is intentional (a third-party class, one defined via CSS-in-JS, etc.), this warning is safe to ignore.`
+    );
+  }
   function processFile(filePath, code) {
     const key = normPath(filePath);
     const tokens = /* @__PURE__ */ new Set();
@@ -3191,9 +3257,13 @@ function kbach(userConfigOrOptions) {
       if (!tokenCSS.has(tok)) {
         tokenCSS.set(tok, generateClassCSS(tok, cfg.theme, cfg.darkMode, screens));
       }
+      checkUnknownToken(tok);
     }
     fileTokens.set(key, tokens);
   }
+  function scanProjectCssSelectors() {
+    for (const dir of includeDirs) scanCssSelectorsInto(join(root, dir), projectCssClasses);
+  }
   function buildTokenCSSView() {
     const active = /* @__PURE__ */ new Set();
     for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
@@ -3238,11 +3308,17 @@ ${code}`,
     },
     buildStart() {
       mainCSSFile = findKbachCSS(root);
+      scanProjectCssSelectors();
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
     handleHotUpdate({ file, server }) {
-      if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
+      if (file.includes("node_modules")) return;
+      if (CSS_FILE_RE.test(file)) {
+        scanCssFileInto(file, projectCssClasses);
+        return;
+      }
+      if (!/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         processFile(file, readFileSync(file, "utf-8"));
       } catch {

package/kbach-react.md

@@ -67,6 +67,7 @@ The `kbach()` Vite plugin scans your source files and writes generated CSS betwe
 - Runs on `buildStart` (initial load) and on every HMR file change
 - Stateless: rescans all files fresh every time — removed classes are immediately evicted
 - Output is grouped by category with CSS custom properties for theme colors
+- Also indexes every `.css`/`.scss`/`.sass`/`.less` file the same `include` dirs cover, and warns (`console.warn`, dev-server terminal, not the browser) for any class that's neither a real Kbach utility NOR defined anywhere in those stylesheets — a likely typo. Classes intentionally handled elsewhere (CSS Modules, styled-components, a third-party component's own class) are recognized once anything in the project literally defines `.that-class-name` and stay silent.
 
 ```ts
 // vite.config.ts
@@ -253,6 +254,18 @@ Mark a parent with `group`, then use `group-hover:` etc. on children.
 | `peer-hover:` | Previous sibling `.peer` is hovered |
 | `peer-focus:` | Previous sibling `.peer` is focused |
 
+**Named groups/peers** — nested groups need names to avoid an inner element
+reacting to the wrong (nearest) ancestor: `group/{name}` + `group-hover/{name}:`,
+same for `peer/{name}` + `peer-hover/{name}:`/`peer-focus/{name}:`.
+```jsx
+<div className="group/card">
+  <div className="group/icon">
+    <span className="group-hover/icon:opacity-100" />
+  </div>
+  <span className="group-hover/card:underline" />
+</div>
+```
+
 ### Pseudo-element modifiers
 ```jsx
 <div className="before:content-['*'] before:text-red-6 relative" />

package/package.json

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