@kbach/react 0.6.8 → 0.6.10

package/README.md

@@ -20,7 +20,7 @@ npm install @kbach/react
 
 ## Setup
 
-Two steps, and you're done — styles work immediately via runtime CSS injection, no build plugin required:
+Step 1 is always required. After that, pick **one** of the two setups below — Quick if you just want styles working, Static CSS if you're shipping to production and/or using SSR.
 
 ### 1. Configure the JSX runtime
 
@@ -39,25 +39,30 @@ Don't also pass `jsxImportSource` to `@vitejs/plugin-react` (or any other bundle
 
 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.
 
-### 2. Wrap your app
+### 2a. Quick setup (runtime CSS injection)
+
+No build plugin, works with any bundler (Vite, webpack, Turbopack, Metro-for-web, …). Styles are generated and injected into a `<style>` tag by client-side JS the moment `ThemeProvider` mounts.
 
 ```jsx
-import { ThemeProvider } from '@kbach/react';
+import { ThemeProvider, KbachReset } from '@kbach/react';
 
 export default function Root() {
   return (
     <ThemeProvider defaultMode="system">
+      <KbachReset />
       <App />
     </ThemeProvider>
   );
 }
 ```
 
-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.
+`<KbachReset />` renders Kbach's base browser-default reset (borderless buttons/inputs, visible checkboxes/radios, no arrow-less `<select>`, etc. — see [CSS resets](#css-resets) below) as a plain `<style>` tag instead of waiting for the client-side injector. On a plain client-rendered app (Vite CSR, Create React App, …) it's a nice-to-have, since the injector already runs before first paint there. **On SSR** (Next.js, React Router framework mode, Remix, …) it's the difference between correct styling from the first byte and a flash of raw browser defaults (default button border, unstyled `<select>`, serif-ish fonts, …) that only clears up once hydration finishes — the server has no JS to run the injector, but it *can* render this component, since it's just JSX. Put it as high in `<head>` as your framework allows; the snippet above (right after `ThemeProvider` opens) works everywhere `<head>` isn't directly reachable.
+
+That's the whole setup. `@kbach/react` ships its own `"use client"` directive, so both of these work directly in a Next.js App Router Server Component tree — no manual client wrapper needed.
 
-### Optional: static CSS for production (Vite only)
+### 2b. Static CSS setup (recommended for production / SSR, Vite only)
 
-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:
+Zero runtime cost: a Vite plugin scans your source at build time and writes real CSS into a file you import, so styles ship as an ordinary stylesheet with no client-side generation step at all — nothing to flash-of-unstyled before. This is the better choice for any Vite-based SSR framework (React Router, SvelteKit-style meta-frameworks, etc.) over the Quick setup + `<KbachReset />` combination, since it covers *every* class, not just the base reset.
 
 ```ts
 // vite.config.ts
@@ -88,15 +93,26 @@ Then create an empty `kbach.css` anywhere in your project and import it once in
 import './kbach.css';
 ```
 
+```jsx
+import { ThemeProvider } from '@kbach/react';
+// No <KbachReset /> needed — kbach.css already includes the same base reset.
+
+export default function Root() {
+  return (
+    <ThemeProvider defaultMode="system">
+      <App />
+    </ThemeProvider>
+  );
+}
+```
+
 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. Each warning includes a `file:line:column` location that most terminals (VS Code's integrated terminal included) turn into a clickable link straight to that class.
 
 ## 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.
-
-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.
+Step 1 (tsconfig `jsxImportSource`) above applies as-is — Next.js's SWC compiler reads `jsxImportSource` from `tsconfig.json` the same way Vite does. For step 2, use **Quick setup (2a)** — Next.js builds with webpack/Turbopack, not Vite, so the static-CSS plugin (2b) doesn't apply. Render `<KbachReset />` once in the root App Router `layout.tsx` (inside `<head>`, or right after `<ThemeProvider>` opens) so Server Component HTML gets the base reset without waiting on hydration; `@kbach/react` shipping its own `"use client"` directive means both `ThemeProvider` and `KbachReset` work directly in that Server Component tree with no wrapper of your own needed.
 
 ## React Router
 
@@ -117,6 +133,8 @@ export default defineConfig({
 
 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 is SSR, so skipping the static-CSS plugin (2b) in favor of Quick setup (2a) means the initial server-rendered HTML has no CSS at all until hydration — render `<KbachReset />` in `root.tsx`'s `<Layout>` (inside `<head>`, alongside `<Links />`/`<Meta />`) if you go that route, otherwise expect raw browser defaults (e.g. the native `<button>` border) on first paint.
+
 **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
@@ -355,7 +373,7 @@ Opacity modifier: `bg-blue-6/50` (50% alpha), `bg-blue-6/[0.15]` (arbitrary)
 
 ## CSS resets
 
-Included automatically in `kbach.css` and in runtime injection:
+Included automatically in `kbach.css`, in runtime injection, and in `<KbachReset />` (all three render the exact same rules — pick whichever setup you're using from [Setup](#setup) above):
 
 - `*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor }` — border utilities like `border-2 border-gray-4` work on any element without also needing `border-solid`
 - `body { margin: 0; padding: 0 }`
@@ -363,8 +381,9 @@ Included automatically in `kbach.css` and in runtime injection:
 - `p`, `ul`, `ol` — margin and list style cleared
 - `a` — color and underline cleared (inherit from parent)
 - `img`, `video`, `svg` — `display: block; max-width: 100%`
-- `input`, `textarea`, `select`, `button`, `fieldset` — appearance, border, padding cleared
-- `table` — `border-collapse: collapse`
+- `button`, text-like `input`s (not checkbox/radio), `textarea` — appearance, border, padding cleared, so `border-`/`bg-`/`rounded-`/`p-` utilities fully restyle them
+- `input[type=checkbox]`, `input[type=radio]`, `select` — native rendering kept (stripping it would hide the checkmark/dot/dropdown-arrow with nothing to replace them); only typography and spacing are normalized, and checkbox/radio/range get `accent-color: currentColor` so they still pick up your text color instead of the OS default blue
+- `fieldset`, `table` — padding/margin/border-collapse cleared
 
 ## Configuration
 

package/dist/{chunk-ELFAWQI6.mjs → chunk-CJRRPENF.mjs}

@@ -2549,6 +2549,7 @@ function findOuterColon(s) {
 }
 
 // src/core/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
 var BASE_RESET = [
   // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
   // border-width: 0 keeps all elements borderless by default.
@@ -2559,8 +2560,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -2729,7 +2753,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [BASE_RESET];
+  const rules = document.getElementById(RESET_STYLE_ID) ? [] : [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff?.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
@@ -3697,6 +3721,8 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 export {
   defaultColors,
   defaultTheme,
+  RESET_STYLE_ID,
+  BASE_RESET,
   isWeb,
   isNative,
   setResolveTarget,

package/dist/{chunk-HOWJ3U6D.mjs → chunk-RWQKYQWN.mjs}

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

package/dist/index.d.mts

@@ -271,6 +271,24 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
+/**
+ * Renders Kbach's base browser-default reset (borderless button/input,
+ * visible checkbox/radio, no arrow-less <select>, etc.) as a plain <style>
+ * tag so it's part of the page's initial HTML.
+ *
+ * Runtime-only setups (no Vite plugin / static kbach.css) otherwise only get
+ * this reset once ThemeProvider's client-side effect runs — fine for a plain
+ * CSR app, but under SSR the server has no JS to run it, so the first paint
+ * ships with raw browser defaults (e.g. the native button border) until
+ * hydration catches up. Render this once, as high in <head> as your
+ * framework allows, to close that gap.
+ *
+ * Not needed if you're on the static-CSS setup — kbach.css already includes
+ * the same reset, and the runtime injector detects this tag and skips adding
+ * it a second time either way.
+ */
+declare function KbachReset(): React.JSX.Element | null;
+
 interface StyledProps {
     /** Additional utility classes applied on top of the base classes */
     kb?: string;
@@ -417,4 +435,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, KbachReset, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.d.ts

@@ -271,6 +271,24 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
+/**
+ * Renders Kbach's base browser-default reset (borderless button/input,
+ * visible checkbox/radio, no arrow-less <select>, etc.) as a plain <style>
+ * tag so it's part of the page's initial HTML.
+ *
+ * Runtime-only setups (no Vite plugin / static kbach.css) otherwise only get
+ * this reset once ThemeProvider's client-side effect runs — fine for a plain
+ * CSR app, but under SSR the server has no JS to run it, so the first paint
+ * ships with raw browser defaults (e.g. the native button border) until
+ * hydration catches up. Render this once, as high in <head> as your
+ * framework allows, to close that gap.
+ *
+ * Not needed if you're on the static-CSS setup — kbach.css already includes
+ * the same reset, and the runtime injector detects this tag and skips adding
+ * it a second time either way.
+ */
+declare function KbachReset(): React.JSX.Element | null;
+
 interface StyledProps {
     /** Additional utility classes applied on top of the base classes */
     kb?: string;
@@ -417,4 +435,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, KbachReset, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.js

@@ -32,6 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   InteractiveWrapper: () => InteractiveWrapper,
+  KbachReset: () => KbachReset,
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
   buildConfig: () => buildConfig,
@@ -627,6 +628,47 @@ var defaultTheme = {
   }
 };
 
+// src/core/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
+var BASE_RESET = [
+  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
+  // border-width: 0 keeps all elements borderless by default.
+  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
+  "fieldset { padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
 // src/core/cache.ts
 var LRUCache = class {
   constructor(capacity = 1e4, onEvict) {
@@ -2667,23 +2709,6 @@ function findOuterColon(s) {
   return -1;
 }
 
-// src/core/reset.ts
-var BASE_RESET = [
-  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
-  // border-width: 0 keeps all elements borderless by default.
-  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
-  "body { margin: 0; padding: 0; }",
-  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
-  "p { margin: 0; }",
-  "a { color: inherit; text-decoration: none; }",
-  "ul, ol { margin: 0; padding: 0; list-style: none; }",
-  "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
-  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
-  "fieldset { padding: 0; margin: 0; }",
-  "table { border-collapse: collapse; border-spacing: 0; }"
-].join("\n");
-
 // src/core/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
@@ -2807,7 +2832,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [BASE_RESET];
+  const rules = document.getElementById(RESET_STYLE_ID) ? [] : [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff?.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
@@ -3501,6 +3526,13 @@ function ThemeProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children });
 }
 
+// src/KbachReset.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function KbachReset() {
+  if (isNative) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { id: RESET_STYLE_ID, children: BASE_RESET });
+}
+
 // src/styled.tsx
 var import_react5 = __toESM(require("react"));
 
@@ -4134,6 +4166,7 @@ function cx(...classes) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InteractiveWrapper,
+  KbachReset,
   ThemeContext,
   ThemeProvider,
   buildConfig,

package/dist/index.mjs

@@ -1,7 +1,9 @@
 'use client';
 import {
+  BASE_RESET,
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
+  RESET_STYLE_ID,
   buildConfig,
   chain,
   clearCache,
@@ -15,6 +17,7 @@ import {
   hasInteractiveBuckets,
   hasResponsiveBuckets,
   initConfig,
+  isNative,
   isWeb,
   normalizeClassString,
   onConfigChange,
@@ -36,7 +39,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-ELFAWQI6.mjs";
+} from "./chunk-CJRRPENF.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -262,6 +265,13 @@ function ThemeProvider({
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
 }
 
+// src/KbachReset.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function KbachReset() {
+  if (isNative) return null;
+  return /* @__PURE__ */ jsx2("style", { id: RESET_STYLE_ID, children: BASE_RESET });
+}
+
 // src/styled.tsx
 import React2, {
   forwardRef,
@@ -425,6 +435,7 @@ function cx(...classes) {
 }
 export {
   InteractiveWrapper,
+  KbachReset,
   ThemeContext,
   ThemeProvider,
   buildConfig,

package/dist/jsx-dev-runtime.js

@@ -583,6 +583,47 @@ var defaultTheme = {
   }
 };
 
+// src/core/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
+var BASE_RESET = [
+  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
+  // border-width: 0 keeps all elements borderless by default.
+  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
+  "fieldset { padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
 // src/core/cache.ts
 var LRUCache = class {
   constructor(capacity = 1e4, onEvict) {
@@ -2626,23 +2667,6 @@ function findOuterColon(s) {
   return -1;
 }
 
-// src/core/reset.ts
-var BASE_RESET = [
-  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
-  // border-width: 0 keeps all elements borderless by default.
-  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
-  "body { margin: 0; padding: 0; }",
-  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
-  "p { margin: 0; }",
-  "a { color: inherit; text-decoration: none; }",
-  "ul, ol { margin: 0; padding: 0; list-style: none; }",
-  "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
-  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
-  "fieldset { padding: 0; margin: 0; }",
-  "table { border-collapse: collapse; border-spacing: 0; }"
-].join("\n");
-
 // src/core/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
@@ -2751,7 +2775,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [BASE_RESET];
+  const rules = document.getElementById(RESET_STYLE_ID) ? [] : [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff?.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -584,6 +584,47 @@ var defaultTheme = {
   }
 };
 
+// src/core/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
+var BASE_RESET = [
+  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
+  // border-width: 0 keeps all elements borderless by default.
+  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
+  "fieldset { padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
 // src/core/cache.ts
 var LRUCache = class {
   constructor(capacity = 1e4, onEvict) {
@@ -2627,23 +2668,6 @@ function findOuterColon(s) {
   return -1;
 }
 
-// src/core/reset.ts
-var BASE_RESET = [
-  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
-  // border-width: 0 keeps all elements borderless by default.
-  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
-  "body { margin: 0; padding: 0; }",
-  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
-  "p { margin: 0; }",
-  "a { color: inherit; text-decoration: none; }",
-  "ul, ol { margin: 0; padding: 0; list-style: none; }",
-  "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
-  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
-  "fieldset { padding: 0; margin: 0; }",
-  "table { border-collapse: collapse; border-spacing: 0; }"
-].join("\n");
-
 // src/core/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
 function getStore() {
@@ -2752,7 +2776,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [BASE_RESET];
+  const rules = document.getElementById(RESET_STYLE_ID) ? [] : [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff?.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-HOWJ3U6D.mjs";
+} from "./chunk-RWQKYQWN.mjs";
 import {
   registerWebElement
-} from "./chunk-ELFAWQI6.mjs";
+} from "./chunk-CJRRPENF.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -60,6 +60,7 @@ function escapeCSSSelector(cls) {
 }
 
 // src/core/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
 var BASE_RESET = [
   // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
   // border-width: 0 keeps all elements borderless by default.
@@ -70,8 +71,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -2654,7 +2678,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [BASE_RESET];
+  const rules = document.getElementById(RESET_STYLE_ID) ? [] : [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff?.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
@@ -3202,6 +3226,23 @@ function toNumericScreens(screens) {
   }
   return out;
 }
+function pushTemplateLiteralBody(body, into) {
+  const interpolationRe = /\$\{(?:[^{}]|\{[^{}]*\})*\}/g;
+  let im;
+  while ((im = interpolationRe.exec(body)) !== null) {
+    pushClassLikeStrings(im[0], into);
+  }
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " "), into);
+}
+function pushClassLikeStrings(text, into) {
+  const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
+  let qm;
+  while ((qm = quotedStringRe.exec(text)) !== null) {
+    const [, quote, content] = qm;
+    if (quote === "`") pushTemplateLiteralBody(content, into);
+    else pushTokens(content, into);
+  }
+}
 function extractClassStrings(code) {
   const found = /* @__PURE__ */ new Set();
   const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
@@ -3222,8 +3263,7 @@ function extractClassStrings(code) {
       i++;
     }
     jsxExprRe.lastIndex = i + 1;
-    const innerStrings = block.match(/["'`]([^"'`]{1,2000})["'`]/g) ?? [];
-    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+    pushClassLikeStrings(block, found);
   }
   const clsxCallRe = /(?:clsx|cn|classnames|cx)\(/g;
   while ((m = clsxCallRe.exec(code)) !== null) {
@@ -3240,19 +3280,16 @@ function extractClassStrings(code) {
       i++;
     }
     clsxCallRe.lastIndex = i + 1;
-    const innerStrings = block.match(/["'`]([^"'`]{1,2000})["'`]/g) ?? [];
-    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+    pushClassLikeStrings(block, found);
   }
   const templateRe = /`([^`]{1,2000})`/g;
-  while ((m = templateRe.exec(code)) !== null) {
-    const staticParts = m[1].replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " ");
-    pushTokens(staticParts, found);
-  }
+  while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
   return [...found];
 }
+var NOT_A_CLASS_NAME_RE = /[${}]|-$|^[?:&|!"'=<>]+$/;
 function pushTokens(str, into) {
   for (const tok of splitClassTokens(str)) {
-    if (tok) into.add(tok);
+    if (tok && !NOT_A_CLASS_NAME_RE.test(tok)) into.add(tok);
   }
 }
 function scanDir(dir, onFile) {

package/dist/vite-plugin.mjs

@@ -26,6 +26,7 @@ function escapeCSSSelector(cls) {
 }
 
 // src/core/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
 var BASE_RESET = [
   // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
   // border-width: 0 keeps all elements borderless by default.
@@ -36,8 +37,31 @@ var BASE_RESET = [
   "a { color: inherit; text-decoration: none; }",
   "ul, ol { margin: 0; padding: 0; list-style: none; }",
   "img, video, svg { display: block; max-width: 100%; }",
-  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
   "fieldset { padding: 0; margin: 0; }",
   "table { border-collapse: collapse; border-spacing: 0; }"
 ].join("\n");
@@ -2620,7 +2644,7 @@ function getGlobalStyleEl() {
 }
 function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = [BASE_RESET];
+  const rules = document.getElementById(RESET_STYLE_ID) ? [] : [BASE_RESET];
   const ff = theme.fontFamily;
   if (ff?.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
@@ -3168,6 +3192,23 @@ function toNumericScreens(screens) {
   }
   return out;
 }
+function pushTemplateLiteralBody(body, into) {
+  const interpolationRe = /\$\{(?:[^{}]|\{[^{}]*\})*\}/g;
+  let im;
+  while ((im = interpolationRe.exec(body)) !== null) {
+    pushClassLikeStrings(im[0], into);
+  }
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " "), into);
+}
+function pushClassLikeStrings(text, into) {
+  const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
+  let qm;
+  while ((qm = quotedStringRe.exec(text)) !== null) {
+    const [, quote, content] = qm;
+    if (quote === "`") pushTemplateLiteralBody(content, into);
+    else pushTokens(content, into);
+  }
+}
 function extractClassStrings(code) {
   const found = /* @__PURE__ */ new Set();
   const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
@@ -3188,8 +3229,7 @@ function extractClassStrings(code) {
       i++;
     }
     jsxExprRe.lastIndex = i + 1;
-    const innerStrings = block.match(/["'`]([^"'`]{1,2000})["'`]/g) ?? [];
-    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+    pushClassLikeStrings(block, found);
   }
   const clsxCallRe = /(?:clsx|cn|classnames|cx)\(/g;
   while ((m = clsxCallRe.exec(code)) !== null) {
@@ -3206,19 +3246,16 @@ function extractClassStrings(code) {
       i++;
     }
     clsxCallRe.lastIndex = i + 1;
-    const innerStrings = block.match(/["'`]([^"'`]{1,2000})["'`]/g) ?? [];
-    for (const s of innerStrings) pushTokens(s.slice(1, -1), found);
+    pushClassLikeStrings(block, found);
   }
   const templateRe = /`([^`]{1,2000})`/g;
-  while ((m = templateRe.exec(code)) !== null) {
-    const staticParts = m[1].replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " ");
-    pushTokens(staticParts, found);
-  }
+  while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
   return [...found];
 }
+var NOT_A_CLASS_NAME_RE = /[${}]|-$|^[?:&|!"'=<>]+$/;
 function pushTokens(str, into) {
   for (const tok of splitClassTokens(str)) {
-    if (tok) into.add(tok);
+    if (tok && !NOT_A_CLASS_NAME_RE.test(tok)) into.add(tok);
   }
 }
 function scanDir(dir, onFile) {

package/package.json

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