@kbach/react 0.6.48 → 0.6.50

package/README.md

@@ -39,6 +39,7 @@ That's the only setting needed — Vite, Next.js, and React Router all read it.
 | Vite, React Router library mode, CRA, other Vite-based | **[Static CSS setup](#static-css-setup)** (recommended) — zero runtime cost, catches typos at build time. [Runtime setup](#runtime-setup) is there if you'd rather skip the plugin for now. |
 | React Router, framework mode | **[Static CSS setup](#static-css-setup)** — and skip `@vitejs/plugin-react`, see note in that section |
 | Next.js | **[Runtime setup](#runtime-setup)** — Static CSS doesn't apply (webpack/Turbopack, not Vite) |
+| React Native, Expo | **[React Native / Expo setup](#react-native--expo-setup)** — different setup entirely (Babel preset, not the JSX runtime step above) |
 
 ## Static CSS setup
 
@@ -119,6 +120,81 @@ Using a custom `kbach.config.js`? Pass it to `ThemeProvider` too — see [Wiring
 
 Don't also set up Static CSS above in the same app — pick one.
 
+## React Native / Expo setup
+
+Same `npm install @kbach/react` — no separate package. Everything below (API, modifiers, color system) is the same import as web; only setup differs.
+
+**1. babel.config.js:**
+
+```js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      'babel-preset-expo',
+      '@kbach/react/babel',
+    ],
+  };
+};
+```
+
+Or the one-liner helper: `const { createKbachConfig } = require('@kbach/react/native'); module.exports = createKbachConfig();` — identical result. Merging into an existing config: `withKbachBabel({ presets: [...] })`, also from `@kbach/react/native`. After changing this file, clear the Metro cache: `npx expo start --clear`.
+
+**2. Wrap your app:**
+
+```jsx
+import { ThemeProvider } from '@kbach/react/native';
+
+export default function App() {
+  return (
+    <ThemeProvider defaultMode="system">
+      <AppContent />
+    </ThemeProvider>
+  );
+}
+```
+
+This is a native-aware `ThemeProvider` — reads `useColorScheme()`/`useWindowDimensions()` automatically, no extra props needed. Import it from `@kbach/react/native`, not the plain `ThemeProvider` from `@kbach/react` — that one has no automatic RN wiring (colors scheme/window width would need to be passed in by hand).
+
+### Platform differences
+
+A handful of utilities are native-only or web-only:
+
+| | |
+|---|---|
+| Native-only | `tint-{color}` (Image/icon tinting), `perspective-{n}`, `backface-hidden`, `text-shadow`/`text-shadow-lg` |
+| Web-only, ignored on native (no warning) | `caret-*` `accent-*` `stroke-*` `fill-*` `touch-*` `float-*` `clear-*` `line-clamp-*` `scroll-*` `animate-*` `transition` `filter` `backdrop-filter` `print:` `before:` `after:` `selection:` `first-letter:` `first-line:` `marker:` `landscape:` `portrait:` `motion-reduce:` `motion-safe:` `contrast-more:` `contrast-less:` `rtl:` `ltr:` `grid` `grid-cols-*` `ring-offset-*` `outline-*` `cursor-*` `bg-gradient-*` |
+
+`ring`/`ring-{n}`/`ring-{color}` is a partial exception — RN has no box-shadow, so it falls back to `borderWidth`/`borderColor`, which *does* affect layout and shares properties with `border-*` (whichever class comes last wins if you combine both).
+
+CSS inheritance doesn't exist in React Native — apply font utilities to each `Text`, or define a styled component once: `const Body = styled(Text, 'font-sans text-gray-10 dark:text-white');`.
+
+### Expo Web / React Native Web
+
+In a browser (Expo Web, Metro web), `@kbach/react` switches to the same CSS-class strategy as plain web automatically:
+
+- RN components substitute to HTML: `View`/`ScrollView`→`div`, `Text`→`span`, `TextInput`→`input`/`textarea`, `Image`→`img`, `Pressable`/`TouchableOpacity`→`div[role=button]`
+- RN-only props (`onChangeText`, `source`, `secureTextEntry`, …) map to HTML equivalents
+- Register more: `registerWebElement(Animated.View, 'div')`
+- Recommended: use the Vite plugin same as [Static CSS setup](#static-css-setup) above — `import { kbach } from '@kbach/react/vite'` — and import `kbach.css` in your entry file, for zero runtime cost on the web target too
+- Not using the Vite plugin (the common case for Expo/Metro web, which has no Vite build step)? Render `<KbachReset />` once near your root — e.g. Expo Router's root `app/_layout.tsx`, inside `<ThemeProvider>`:
+
+  ```jsx
+  import { KbachReset } from '@kbach/react';
+  import { ThemeProvider } from '@kbach/react/native';
+
+  export default function RootLayout() {
+    return (
+      <ThemeProvider defaultMode="system">
+        <KbachReset />
+        <Slot />
+      </ThemeProvider>
+    );
+  }
+  ```
+
+  This ships the base reset as real markup instead of relying solely on the runtime injector.
+
 ## Dark mode
 
 `<ThemeProvider>` powers every `dark:` class — detects OS color scheme, persists the user's choice, re-renders on change.
@@ -135,7 +211,7 @@ Don't also set up Static CSS above in the same app — pick one.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `defaultMode` | `'light' \| 'dark' \| 'system'` | `'system'` | Starting mode |
-| `disablePersistence` | `boolean` | `false` | Skip saving to `localStorage` |
+| `disablePersistence` | `boolean` | `false` | Skip saving to `localStorage` (web) / `AsyncStorage` (native) |
 | `config` | `FrameworkConfig` | global config | Scope a different config to this subtree |
 
 `darkMode` in `kbach.config.js` picks the matching strategy: `'attribute'` (default), `'class'`, or `'media'` (system-only). Toggle it with `useTheme()`'s `toggle()`/`setMode()` — see [API](#api).
@@ -364,6 +440,6 @@ Skipping the runtime one is an easy mistake under Static CSS setup specifically
 
 ## Full reference
 
-[kbach-react.md](./kbach-react.md) — complete utility list, every modifier, all config options.
+[kbach-react.md](./kbach-react.md) — complete utility list, every modifier, all config options, covers web and React Native/Expo.
 
-React Native / Expo: [`@kbach/native`](https://www.npmjs.com/package/@kbach/native).
+`@kbach/native` still exists on npm but is now just a deprecated compatibility shim re-exporting this package — install `@kbach/react` directly for new projects.

package/dist/{chunk-CFUH3CUD.mjs → chunk-KRRGLJLA.mjs}

@@ -2868,7 +2868,16 @@ var BASE_RESET = [
   // 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; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(: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
@@ -3837,14 +3846,14 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
-var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
 var _placeholderRuleInjected = false;
 function ensurePlaceholderColorRuleInjected() {
   if (_placeholderRuleInjected || typeof document === "undefined") return;
   _placeholderRuleInjected = true;
   const style = document.createElement("style");
   style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
   document.head.appendChild(style);
 }
 function transformToWebProps(originalName, tag, props) {
@@ -3854,7 +3863,6 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
-  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -3889,7 +3897,7 @@ function transformToWebProps(originalName, tag, props) {
       if (k === "placeholderTextColor") {
         if (v) {
           ensurePlaceholderColorRuleInjected();
-          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          out[PLACEHOLDER_RULE_ATTR] = "";
           pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
         }
         continue;
@@ -3955,9 +3963,6 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (pendingClassName) {
-    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
-  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/{chunk-YI75WFHE.mjs → chunk-LIUJPOTS.mjs}

@@ -26,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-CFUH3CUD.mjs";
+} from "./chunk-KRRGLJLA.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/core/index.d.ts

@@ -233,7 +233,7 @@ declare function expandModeAwareColorClasses(classString: string, colors: ThemeC
 /**
  * Generates the KbachCustomColors/KbachCustomSpacing module-augmentation
  * source for every color/spacing key `extend.theme` added beyond the built-in
- * defaults. Called by both the Vite plugin and @kbach/native's Babel plugin —
+ * defaults. Called by both the Vite plugin and the Babel plugin (@kbach/react/babel-plugin) —
  * kept here, shared, so "which colors count as custom" and "flat string vs.
  * ColorScale" can't drift between the two.
  *

package/dist/core/index.js

@@ -2956,7 +2956,16 @@ var BASE_RESET = [
   // 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; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(: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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
+import React__default, { Context, ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
 import * as __core from './core';
 import { ThemeMode, ResolvedConfig, DefaultColorName, defaultColors, ThemeColors, DefaultSpacingKey, ThemeSpacing, FrameworkConfig, StyleValue, ResolvedStyle } from './core';
 export { DefaultColorName, DefaultSpacingKey, FrameworkConfig, ParsedClass, PluginAPI, ResolvedConfig, ResolvedStyle, StyleValue, ThemeConfig, ThemeMode, buildConfig, clearCache, defaultColors, defaultTheme, disableRuntimeCSS, flatten, generateKbachTypesDts, getConfig, initConfig, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, updateConfig } from './core';
@@ -19,7 +19,10 @@ interface ThemeContextValue {
     /** The fully resolved framework config (theme values, darkMode strategy, etc.) */
     config: ResolvedConfig;
 }
-declare const ThemeContext: React.Context<ThemeContextValue | null>;
+declare global {
+    var __kbachThemeContext: Context<ThemeContextValue | null> | undefined;
+}
+declare const ThemeContext: Context<ThemeContextValue | null>;
 declare function useTheme(): ThemeContextValue;
 declare function useIsDark(): boolean;
 
@@ -134,7 +137,7 @@ interface ThemeProviderProps {
      * System color scheme for native `defaultMode="system"`.
      *
      * Pass the value of `useColorScheme()` from `react-native`. When importing
-     * `ThemeProvider` from `@kbach/native` this is handled automatically.
+     * `ThemeProvider` from `@kbach/react/native` this is handled automatically.
      *
      * @example
      * ```tsx
@@ -147,7 +150,7 @@ interface ThemeProviderProps {
     /**
      * Current window/screen width in pixels for responsive breakpoints.
      * On web this is read from `window.innerWidth` automatically.
-     * When importing `ThemeProvider` from `@kbach/native` this is provided
+     * When importing `ThemeProvider` from `@kbach/react/native` this is provided
      * automatically from `useWindowDimensions()`.
      */
     windowWidth?: number;

package/dist/index.js

@@ -71,7 +71,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/context.tsx
 var import_react = require("react");
-var ThemeContext = (0, import_react.createContext)(null);
+var ThemeContext = globalThis.__kbachThemeContext ?? (globalThis.__kbachThemeContext = (0, import_react.createContext)(null));
 function useTheme() {
   const ctx = (0, import_react.useContext)(ThemeContext);
   if (!ctx) {
@@ -716,14 +716,14 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
-var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
 var _placeholderRuleInjected = false;
 function ensurePlaceholderColorRuleInjected() {
   if (_placeholderRuleInjected || typeof document === "undefined") return;
   _placeholderRuleInjected = true;
   const style = document.createElement("style");
   style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
   document.head.appendChild(style);
 }
 function transformToWebProps(originalName, tag, props) {
@@ -733,7 +733,6 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
-  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -768,7 +767,7 @@ function transformToWebProps(originalName, tag, props) {
       if (k === "placeholderTextColor") {
         if (v) {
           ensurePlaceholderColorRuleInjected();
-          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          out[PLACEHOLDER_RULE_ATTR] = "";
           pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
         }
         continue;
@@ -834,9 +833,6 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (pendingClassName) {
-    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
-  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/index.mjs

@@ -48,11 +48,11 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-CFUH3CUD.mjs";
+} from "./chunk-KRRGLJLA.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
-var ThemeContext = createContext(null);
+var ThemeContext = globalThis.__kbachThemeContext ?? (globalThis.__kbachThemeContext = createContext(null));
 function useTheme() {
   const ctx = useContext(ThemeContext);
   if (!ctx) {

package/dist/jsx-dev-runtime.js

@@ -500,14 +500,14 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
-var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
 var _placeholderRuleInjected = false;
 function ensurePlaceholderColorRuleInjected() {
   if (_placeholderRuleInjected || typeof document === "undefined") return;
   _placeholderRuleInjected = true;
   const style = document.createElement("style");
   style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
   document.head.appendChild(style);
 }
 function transformToWebProps(originalName, tag, props) {
@@ -517,7 +517,6 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
-  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -552,7 +551,7 @@ function transformToWebProps(originalName, tag, props) {
       if (k === "placeholderTextColor") {
         if (v) {
           ensurePlaceholderColorRuleInjected();
-          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          out[PLACEHOLDER_RULE_ATTR] = "";
           pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
         }
         continue;
@@ -618,9 +617,6 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (pendingClassName) {
-    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
-  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -506,14 +506,14 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
-var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
 var _placeholderRuleInjected = false;
 function ensurePlaceholderColorRuleInjected() {
   if (_placeholderRuleInjected || typeof document === "undefined") return;
   _placeholderRuleInjected = true;
   const style = document.createElement("style");
   style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
   document.head.appendChild(style);
 }
 function transformToWebProps(originalName, tag, props) {
@@ -523,7 +523,6 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
-  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -558,7 +557,7 @@ function transformToWebProps(originalName, tag, props) {
       if (k === "placeholderTextColor") {
         if (v) {
           ensurePlaceholderColorRuleInjected();
-          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          out[PLACEHOLDER_RULE_ATTR] = "";
           pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
         }
         continue;
@@ -624,9 +623,6 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (pendingClassName) {
-    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
-  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-YI75WFHE.mjs";
+} from "./chunk-LIUJPOTS.mjs";
 import {
   registerWebElement
-} from "./chunk-CFUH3CUD.mjs";
+} from "./chunk-KRRGLJLA.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,