@kbach/react 0.6.3 → 0.6.5

package/README.md

@@ -20,9 +20,11 @@ npm install @kbach/react
 
 ## Setup
 
+Two steps, and you're done — styles work immediately via runtime CSS injection, no build plugin required:
+
 ### 1. Configure the JSX runtime
 
-**tsconfig.json**
+**tsconfig.json** (works for Vite, Next.js, React Router, and most other tooling — it's the one setting that everything reads):
 
 ```json
 {
@@ -33,121 +35,87 @@ npm install @kbach/react
 }
 ```
 
-Or per-file (no config change needed):
+Don't also pass `jsxImportSource` to `@vitejs/plugin-react` (or any other bundler plugin) unless you have a specific reason to — the tsconfig setting alone is enough, and pointing two different places at the JSX runtime is a common source of "it's not applying" confusion (or, worse, plugin conflicts — see the React Router note below).
 
-```js
-/** @jsxImportSource @kbach/react */
-```
+Alternatives if you can't use tsconfig: a per-file `/** @jsxImportSource @kbach/react */` pragma comment, or `['@babel/preset-react', { runtime: 'automatic', importSource: '@kbach/react' }]` in `babel.config.js` for non-Vite/non-SWC toolchains.
 
-**Babel (non-Vite)**
+### 2. Wrap your app
 
-```js
-// babel.config.js
-module.exports = {
-  presets: [
-    ['@babel/preset-react', { runtime: 'automatic', importSource: '@kbach/react' }],
-  ],
-};
+```jsx
+import { ThemeProvider } from '@kbach/react';
+
+export default function Root() {
+  return (
+    <ThemeProvider defaultMode="system">
+      <App />
+    </ThemeProvider>
+  );
+}
 ```
 
-### 2. Add the Vite plugin
+That's the whole setup. `@kbach/react` ships its own `"use client"` directive, so this works directly in a Next.js App Router Server Component tree too — no manual client wrapper needed.
 
-`@kbach/react` doesn't bundle a React plugin for Vite — if your project doesn't already have one, install it first:
+### Optional: static CSS for production (Vite only)
 
-```
-npm install -D vite @vitejs/plugin-react
-```
+By default, styles are generated and injected into a `<style>` tag by client-side JS at runtime — simple, but it means server-rendered HTML has no matching CSS until hydration runs (a brief flash of unstyled content on first paint). If you're on a Vite-based project and want zero-runtime-cost CSS instead, add the `@kbach/react/vite` plugin:
 
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 import { kbach } from '@kbach/react/vite';
 
 export default defineConfig({
   plugins: [
-    react({ jsxImportSource: '@kbach/react' }),
+    // ...your framework's own plugin(s) — see the framework notes below
+    // before adding @vitejs/plugin-react yourself.
     kbach(),
   ],
 });
 ```
 
-The plugin scans your source files and writes generated CSS between `/* kbach:start */` / `/* kbach:end */` markers inside any `kbach.css` file it finds in your project. On HMR only the changed file is rescanned — unchanged tokens reuse cached CSS.
-
-### 3. Create and import kbach.css
-
-Create `kbach.css` anywhere in your project (e.g. `src/kbach.css`):
+Then create an empty `kbach.css` anywhere in your project and import it once in your app entry:
 
 ```css
+/* src/kbach.css */
 /* kbach:start */
 /* kbach:end */
 ```
 
-Import it in your app entry:
-
 ```ts
 // main.tsx
 import './kbach.css';
 ```
 
-Importing `kbach.css` automatically disables runtime style injection — all styles come from the CSS file instead.
-
-### 4. Wrap your app
+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.
 
-```jsx
-import { ThemeProvider } from '@kbach/react';
-
-export default function Root() {
-  return (
-    <ThemeProvider defaultMode="system">
-      <App />
-    </ThemeProvider>
-  );
-}
-```
+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
 
-Steps 1 and 4 above apply as-is — the JSX runtime setup works via `jsxImportSource` in `tsconfig.json` (Next.js's SWC compiler reads it the same way Vite does), and `ThemeProvider` wraps your app the same way.
-
-Two things differ from the Vite setup:
+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.
 
-**No Vite plugin, no static `kbach.css`.** Next.js builds with webpack/Turbopack, not Vite, so step 2/3 (the `@kbach/react/vite` plugin) don't apply — there's currently no static-CSS build step for Next.js. Styles fall back to runtime injection (the same mechanism used automatically when no `kbach.css` is imported). This works, but since the injection only runs in the browser (there's no `document` during the server render), server-rendered HTML has classes with no matching CSS yet — expect a brief flash of unstyled content on first paint before hydration completes and injects the rules. This is a known limitation, not a bug to work around per-project.
+The "Optional: static CSS" step above doesn't apply — Next.js builds with webpack/Turbopack, not Vite, so there's currently no static-CSS build step for it. Styles fall back to runtime injection, which means the same first-paint FOUC note above applies: expect a brief flash of unstyled content before hydration completes. This is a known limitation, not a per-project bug to work around.
 
-**`ThemeProvider` needs a `'use client'` boundary.** `@kbach/react` doesn't ship the `'use client'` directive in its build output, so importing `ThemeProvider` directly into a Server Component (e.g. the App Router root `layout.tsx`, which is a Server Component by default) will fail. Wrap it in your own client component once:
+## React Router
 
-```tsx
-// app/providers.tsx
-'use client';
-import { ThemeProvider } from '@kbach/react';
+**Framework mode (v7+, SSR by default):** `@react-router/dev`'s own `reactRouter()` Vite plugin already includes its own React JSX transform and Fast Refresh integration — **do not also add `@vitejs/plugin-react`.** Having both active makes each one inject its own Fast Refresh preamble into the same module, which crashes the page at runtime (`Identifier 'RefreshRuntime' has already been declared`) before React ever hydrates — every class on the page will silently fail to style because the app never actually mounts. The correct setup is just:
 
-export function Providers({ children }: { children: React.ReactNode }) {
-  return <ThemeProvider defaultMode="system">{children}</ThemeProvider>;
-}
-```
-
-```tsx
-// app/layout.tsx (Server Component — no 'use client' needed here)
-import { Providers } from './providers';
+```ts
+// vite.config.ts
+import { reactRouter } from '@react-router/dev/vite';
+import { defineConfig } from 'vite';
+import { kbach } from '@kbach/react/vite'; // omit if you're not using static CSS
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <Providers>{children}</Providers>
-      </body>
-    </html>
-  );
-}
+export default defineConfig({
+  plugins: [kbach(), reactRouter()],
+});
 ```
 
-This is the standard pattern for any hook-using npm package that predates the App Router — the same workaround is needed for many other UI libraries.
+`jsxImportSource` in `tsconfig.json` (step 1 above) is all that's needed for the JSX runtime — React Router's Vite plugin reads it the same way plain Vite does. `include`'s default scan dirs (`['src', 'app', 'pages', 'components', 'views', 'layouts']`) already cover React Router's `app/` routes convention if you're using the static-CSS plugin.
 
-## React Router
+If you do add `kbach()` to `vite.config.ts` and it detects both plugins active together, it prints a warning explaining exactly this at dev-server startup — so this doesn't have to be a silent, hard-to-diagnose blank page.
 
-**Framework mode (v7, SSR by default):** works with the same Vite-based setup as above — framework mode builds with Vite under the hood, so the `@kbach/react/vite` plugin runs normally. `include` defaults to `['src', 'app', 'pages', 'components', 'views', 'layouts']`, which already covers React Router's `app/` routes convention. Because the static `kbach.css` approach ships real CSS (not runtime JS injection), there's no FOUC concern for server-rendered routes the way there is with Next.js.
-
-**Library mode (client-only, `createBrowserRouter`/`<BrowserRouter>`):** no SSR involved — set it up exactly like any other Vite + React app per the steps above.
+**Library mode (client-only, `createBrowserRouter`/`<BrowserRouter>`):** no SSR involved — set it up exactly like any other Vite + React app. Since there's no meta-framework Vite plugin providing JSX handling here, you likely do need `@vitejs/plugin-react({ jsxImportSource: '@kbach/react' })` (or rely on tsconfig alone — Vite's default esbuild-based transform reads it too).
 
 ## API
 
@@ -332,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-ZZWJK33J.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)];
@@ -2001,6 +2020,33 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { accentColor: color } : null;
   },
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
+  },
+  fill: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2304,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);
@@ -2325,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;
@@ -3604,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-4A24NQ5X.mjs → chunk-FXDK5Z6V.mjs}

@@ -23,7 +23,7 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-ZZWJK33J.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)];
@@ -2120,6 +2139,33 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { accentColor: color } : null;
   },
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
+  },
+  fill: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2423,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);
@@ -2444,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;
@@ -3890,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,
@@ -4012,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-ZZWJK33J.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)];
@@ -2079,6 +2098,33 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { accentColor: color } : null;
   },
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
+  },
+  fill: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2382,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);
@@ -2403,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;
@@ -3301,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-4A24NQ5X.mjs";
-import "./chunk-ZZWJK33J.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)];
@@ -2080,6 +2099,33 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { accentColor: color } : null;
   },
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
+  },
+  fill: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2383,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);
@@ -2404,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;
@@ -3302,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-4A24NQ5X.mjs";
+} from "./chunk-FXDK5Z6V.mjs";
 import {
   registerWebElement
-} from "./chunk-ZZWJK33J.mjs";
+} from "./chunk-BAUO36PM.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -1939,6 +1939,33 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { accentColor: color } : null;
   },
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
+  },
+  fill: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2242,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);
@@ -2363,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
@@ -3176,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);
@@ -3190,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();
@@ -3198,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);
@@ -3224,6 +3321,12 @@ function kbach(userConfigOrOptions) {
     enforce: "pre",
     configResolved(resolved) {
       root = resolved.root;
+      const names = new Set(resolved.plugins.map((p) => p.name));
+      if (names.has("react-router") && names.has("vite:react-refresh")) {
+        console.warn(
+          `[kbach] Detected both @vitejs/plugin-react and @react-router/dev's reactRouter() plugin active together. reactRouter() already includes its own JSX transform and Fast Refresh integration \u2014 having both crashes the page at runtime with "Identifier 'RefreshRuntime' has already been declared" before React hydrates, which looks like every class silently failing to style. Remove the react() plugin from vite.config.ts; jsxImportSource in tsconfig.json is enough on its own.`
+        );
+      }
     },
     // When any JS/TS file imports kbach.css, prepend a disableRuntimeCSS() call
     // so styles come solely from the static stylesheet — no duplicate injection.
@@ -3239,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

@@ -1905,6 +1905,33 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { accentColor: color } : null;
   },
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
+  },
+  fill: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2208,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);
@@ -2329,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
@@ -3142,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);
@@ -3156,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();
@@ -3164,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);
@@ -3190,6 +3287,12 @@ function kbach(userConfigOrOptions) {
     enforce: "pre",
     configResolved(resolved) {
       root = resolved.root;
+      const names = new Set(resolved.plugins.map((p) => p.name));
+      if (names.has("react-router") && names.has("vite:react-refresh")) {
+        console.warn(
+          `[kbach] Detected both @vitejs/plugin-react and @react-router/dev's reactRouter() plugin active together. reactRouter() already includes its own JSX transform and Fast Refresh integration \u2014 having both crashes the page at runtime with "Identifier 'RefreshRuntime' has already been declared" before React hydrates, which looks like every class silently failing to style. Remove the react() plugin from vite.config.ts; jsxImportSource in tsconfig.json is enough on its own.`
+        );
+      }
     },
     // When any JS/TS file imports kbach.css, prepend a disableRuntimeCSS() call
     // so styles come solely from the static stylesheet — no duplicate injection.
@@ -3205,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

@@ -13,7 +13,7 @@ Package: `@kbach/react`
 { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@kbach/react" } }
 ```
 
-### vite.config.ts
+### vite.config.ts (plain Vite only — skip @vitejs/plugin-react if a meta-framework already provides its own Vite/React plugin, e.g. React Router's reactRouter(); see below)
 Requires `vite` and `@vitejs/plugin-react` as dev dependencies — not installed by `@kbach/react` itself: `npm install -D vite @vitejs/plugin-react`.
 ```ts
 import { defineConfig } from 'vite';
@@ -50,7 +50,13 @@ import { ThemeProvider } from '@kbach/react';
 tsconfig `jsxImportSource` setup above applies as-is. No Vite plugin for Next.js (webpack/Turbopack) — falls back to runtime CSS injection, which only runs client-side, so expect a brief flash of unstyled content on first paint before hydration. `@kbach/react`'s compiled output ships its own `"use client"` directive, so App Router Server Components can use `className`, `styled()`, hooks, and `<ThemeProvider>` directly, with no manual client wrapper needed.
 
 ### React Router
-Framework mode (v7, SSR) builds with Vite, so the setup above works unchanged — default scan dirs include `app/`. Library mode (client-only) needs no special handling beyond the standard Vite setup.
+Framework mode (v7+, SSR): do NOT add `@vitejs/plugin-react` — `@react-router/dev`'s `reactRouter()` Vite plugin already includes its own JSX transform + Fast Refresh integration. Adding both makes each inject its own Fast Refresh preamble into the same module, crashing the page (`Identifier 'RefreshRuntime' has already been declared`) before React hydrates — every class on the page silently fails to style because the app never mounts. tsconfig `jsxImportSource` alone is enough:
+```ts
+import { reactRouter } from '@react-router/dev/vite';
+import { kbach } from '@kbach/react/vite'; // omit if not using static CSS
+export default { plugins: [kbach(), reactRouter()] };
+```
+Default scan dirs include `app/`. Library mode (client-only, no meta-framework Vite plugin involved) needs no special handling beyond the standard Vite setup above.
 
 ---
 
@@ -61,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
@@ -247,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" />
@@ -630,6 +649,8 @@ aspect-auto / aspect-square / aspect-video / aspect-[4/3]
 columns-{n} / columns-auto / columns-{size}
 caret-{color} / caret-auto / caret-transparent
 accent-{color} / accent-auto
+stroke-{color} / stroke-{n} / stroke-none  (web only, SVG)
+fill-{color} / fill-none                    (web only, SVG)
 mix-blend-{mode}
 bg-blend-{mode}
 will-change-auto/scroll/contents/transform

package/package.json

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