@kbach/react-native 1.0.0-beta.52 → 1.0.0-beta.53

package/AGENTS.md

@@ -14,7 +14,7 @@ and how the underlying engine is built, see the repo root's
 >
 > 1. Color shades are `1`–`12` (lightest→darkest), not Tailwind's
 >    `50`–`950` — `bg-blue-500` resolves to nothing; the real class is
->    `bg-blue-6`. Full palette: root AGENTS.md §6.
+>    `bg-blue-6`. Full palette: root AGENTS.md §7.
 > 2. `group-*`, `peer-*`, `has-[…]`, container queries, grid, and pseudo-
 >    elements (`before:`/`after:`) are real Tailwind syntax that PARSES
 >    here but applies **zero style, with no warning** — native has no
@@ -309,7 +309,7 @@ colors.get('brand');   // a custom color, typed as plain `string`
 
 `colors.blue[6]` returns the same value in both light and dark mode
 unless `blue-6` itself is defined in the theme as a `{ light, dark }` pair
-(§5.1 of the root AGENTS.md) — define a color as mode-aware in
+(§6.1 of the root AGENTS.md) — define a color as mode-aware in
 `kbach.config.js` if you want it to differ by mode.
 
 `colors.brand` (a custom flat color) is typed `string | ColorScale`
@@ -346,10 +346,11 @@ and `react` at `projectRoot/node_modules/...`. A plain non-monorepo
 `setDynamicToken`, `getDynamicToken`, `deleteDynamicToken`,
 `subscribeDynamicTokens`, `useDynamicToken`, `clsx`, `getGlobalDarkMode`,
 `getGlobalThemeMode`, `setGlobalThemeMode`, `toggleGlobalDarkMode`,
-`subscribeGlobalDarkMode`. Types: `ThemeConfig`, `ColorEntry`,
-`ContainerConfig`, `StyleObject`, `KbachConfig`, `ThemeState`,
-`ThemeProviderProps`, `ThemeStorageAdapter`, `ThemeMode`, `ColorsAPI`,
-`ColorScale`, `ClassValue`.
+`subscribeGlobalDarkMode`, `Button`, `Paragraph`, `H1`, `H2`, `H3`, `H4`,
+`H5`, `H6` (§14). Types: `ThemeConfig`, `ColorEntry`, `ContainerConfig`,
+`StyleObject`, `KbachConfig`, `ThemeState`, `ThemeProviderProps`,
+`ThemeStorageAdapter`, `ThemeMode`, `ColorsAPI`, `ColorScale`,
+`ClassValue`, `ButtonProps`, `ParagraphProps`, `HeadingProps`.
 
 Subpath exports: `@kbach/react-native/babel-plugin`,
 `@kbach/react-native/jsx-runtime`, `@kbach/react-native/jsx-dev-runtime`.
@@ -379,6 +380,19 @@ Subpath exports: `@kbach/react-native/babel-plugin`,
   missing. It's required on every target, not just Android/dev-client
   builds; without it nothing routes `className` through this package's
   jsx-runtime at all, so RN just silently ignores the unrecognized prop.
+- **`useColors().get('yourCustomColor')` returns the literal name, not
+  the color, on Expo Web — icons/fills using it render invisible** —
+  stale `@kbach/react-native` (`< 1.0.0-beta.53`). Root cause: on web,
+  this package loads as two separate module instances in the same
+  bundle — a bare `import` resolves through package.json's `import`
+  condition, but the babel plugin's injected
+  `require('@kbach/react-native').applyKbachConfig(...)` always resolves
+  through `require` — so `kbach.config.js`'s custom colors landed in one
+  instance's theme state while every component's own `useColors()` read
+  the other, untouched one. Fixed by routing `theme.ts`'s active-theme
+  state through a `globalThis`-backed slot instead of a plain
+  module-scope variable, so both instances share it regardless of which
+  one set it. Update.
 - **`ERROR [Error: Unable to find node on an unmounted component.]` on
   Expo Fast Refresh, especially right after editing `kbach.config.js`** —
   stale `@kbach/react-native` (`< 1.0.0-beta.51`). Root cause: the babel
@@ -403,3 +417,43 @@ Subpath exports: `@kbach/react-native/babel-plugin`,
   Fixed identically in both the Rust native dispatcher and its Expo Go JS-
   fallback mirror (`jsEngine/resolveUtilityNative.ts`) in beta.52; update.
   Web (including Expo Web) was never affected.
+
+## 14. Semantic HTML on Expo Web
+
+On Expo Web, `react-native-web` renders a bare `<View>`/`<Text>` as a
+plain `<div>`/`<span>` by default — confirmed directly in its own source.
+That's **not** a Kbach limitation: this package's jsx-runtime never reads
+or substitutes the JSX element type at all, so whatever tag shows up is
+exactly whatever component the app wrote.
+
+`react-native-web` already has a real fix for this that this package
+never gets in the way of: an `accessibilityRole`/`role` prop on ANY host
+component makes it render the matching real HTML element instead —
+`accessibilityRole="button"` → `<button>`, `accessibilityRole="header"` +
+`aria-level` (web-only; real native has no heading-LEVEL concept, only
+`header` itself) → `<h1>`-`<h6>`, `role="paragraph"` → `<p>`, and so on
+(`react-native-web`'s own `propsToAccessibilityComponent`). `role` covers
+every value in React Native's own typed `Role` union (`button`,
+`heading`, `list`, `listitem`, `navigation`, `main`, `form`, `article`,
+`banner`, `contentinfo`, `complementary`, `region`, ...); `"paragraph"`
+is the one react-native-web additionally supports that isn't in that
+union at all.
+
+This package exports a handful of convenience components that are just
+that prop, pre-set on the right underlying component — nothing beyond
+that, and writing `<Pressable accessibilityRole="button">` directly
+instead of `<Button>` behaves identically:
+
+```tsx
+import { Button, Paragraph, H1, H2, H3, H4, H5, H6 } from '@kbach/react-native';
+
+<Button className="px-4 py-2 rounded bg-blue-6" onPress={...}>Save</Button>
+<H1 className="text-2xl font-bold">Page title</H1>
+<Paragraph className="text-sm text-gray-7">Body copy.</Paragraph>
+```
+
+`className` keeps working on every one of these exactly like it does on
+a bare `Pressable`/`Text`. No `Div` or `Input` here on purpose: a plain
+`<View>` already is the right generic container, and `<TextInput>`
+already renders a real `<input>` (or `<textarea>` when `multiline`) by
+default, with no role needed at all.

package/README.md

@@ -145,6 +145,22 @@ colors.blue['6/50'];   // same at 50% opacity
 colors.get('brand');   // a custom color, typed as plain `string`
 ```
 
+## Semantic HTML on web
+
+On Expo Web, `<View>`/`<Text>` render as a plain `<div>`/`<span>` by
+default (`react-native-web`'s own choice, not this package's). For a real
+`<button>`/`<h1>`-`<h6>`/`<p>` instead, use these — each is just the
+right underlying component with its semantic role pre-set, so `className`
+keeps working exactly like it does on a bare `Pressable`/`Text`:
+
+```tsx
+import { Button, H1, Paragraph } from '@kbach/react-native';
+
+<H1 className="text-2xl font-bold">Page title</H1>
+<Paragraph className="text-sm text-gray-7">Body copy.</Paragraph>
+<Button className="px-4 py-2 rounded bg-blue-6" onPress={...}>Save</Button>
+```
+
 ## What differs on native
 
 React Native has no CSS cascade, so a fixed subset of modifiers is

package/dist/{chunk-23JJORPW.mjs → chunk-3JQAZNJK.mjs}

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-Z5Q3FGXR.mjs";
+} from "./chunk-P75PP2QR.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";

package/dist/{chunk-Z5Q3FGXR.mjs → chunk-P75PP2QR.mjs}

@@ -346,19 +346,28 @@ var defaultTheme = {
   // Empty by default, matching real Tailwind's own defaults.
   container: {}
 };
-var activeTheme = defaultTheme;
-var activeThemeJson = JSON.stringify(defaultTheme);
+var GLOBAL_STATE_KEY = "__kbachReactNativeThemeState__";
+function getThemeState() {
+  const g = globalThis;
+  let state = g[GLOBAL_STATE_KEY];
+  if (!state) {
+    state = { theme: defaultTheme, json: JSON.stringify(defaultTheme) };
+    g[GLOBAL_STATE_KEY] = state;
+  }
+  return state;
+}
 function setTheme(theme) {
   const json = JSON.stringify(theme);
-  if (json === activeThemeJson) return;
-  activeTheme = theme;
-  activeThemeJson = json;
+  const state = getThemeState();
+  if (json === state.json) return;
+  state.theme = theme;
+  state.json = json;
 }
 function getTheme() {
-  return activeTheme;
+  return getThemeState().theme;
 }
 function getThemeJson() {
-  return activeThemeJson;
+  return getThemeState().json;
 }
 
 // src/wasmGlue.generated.ts

package/dist/{chunk-HVGMZKV7.mjs → chunk-TC6VSV44.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-Z5Q3FGXR.mjs";
+} from "./chunk-P75PP2QR.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ClassArray, a as ClassDictionary, b as ClassValue, c as ColorScale, d as ColorsAPI, K as KbachConfig, T as ThemeProvider, e as ThemeProviderProps, f as ThemeState, g as ThemeStorageAdapter, h as applyKbachConfig, i as clsx, r as resolveKbachConfig, u as useColors, j as useDynamicToken, k as useTheme } from './clsx-BLLSnqAa.js';
+export { B as Button, a as ButtonProps, C as ClassArray, b as ClassDictionary, c as ClassValue, d as ColorScale, e as ColorsAPI, H as H1, f as H2, g as H3, h as H4, i as H5, j as H6, k as HeadingProps, K as KbachConfig, P as Paragraph, l as ParagraphProps, T as ThemeProvider, m as ThemeProviderProps, n as ThemeState, o as ThemeStorageAdapter, p as applyKbachConfig, q as clsx, r as resolveKbachConfig, u as useColors, s as useDynamicToken, t as useTheme } from './semanticElements-Bk3TB-vt.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';
+import 'react-native';
 
 type StyleValue = string | number | {
     width: number;

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,11 +17,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Button: () => Button,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6,
+  Paragraph: () => Paragraph,
   ThemeProvider: () => ThemeProvider,
   applyKbachConfig: () => applyKbachConfig,
   clsx: () => clsx,
@@ -2179,8 +2197,42 @@ function resolveClassValue(value) {
   }
   return "";
 }
+
+// src/semanticElements.tsx
+var React = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = React.forwardRef(function Button2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Pressable, { ref, accessibilityRole: "button", ...props });
+});
+var PARAGRAPH_ROLE = "paragraph";
+var Paragraph = React.forwardRef(function Paragraph2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { ref, role: PARAGRAPH_ROLE, ...props });
+});
+function makeHeading(level) {
+  const extra = { "aria-level": level };
+  const Heading = React.forwardRef(function Heading2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { ref, accessibilityRole: "header", ...extra, ...props });
+  });
+  Heading.displayName = `H${level}`;
+  return Heading;
+}
+var H1 = makeHeading(1);
+var H2 = makeHeading(2);
+var H3 = makeHeading(3);
+var H4 = makeHeading(4);
+var H5 = makeHeading(5);
+var H6 = makeHeading(6);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Button,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Paragraph,
   ThemeProvider,
   applyKbachConfig,
   clsx,

package/dist/index.web.d.ts

@@ -1,8 +1,9 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ClassArray, a as ClassDictionary, b as ClassValue, c as ColorScale, d as ColorsAPI, K as KbachConfig, T as ThemeProvider, e as ThemeProviderProps, f as ThemeState, h as applyKbachConfig, i as clsx, r as resolveKbachConfig, u as useColors, j as useDynamicToken, k as useTheme } from './clsx-BLLSnqAa.js';
+export { B as Button, a as ButtonProps, C as ClassArray, b as ClassDictionary, c as ClassValue, d as ColorScale, e as ColorsAPI, H as H1, f as H2, g as H3, h as H4, i as H5, j as H6, k as HeadingProps, K as KbachConfig, P as Paragraph, l as ParagraphProps, T as ThemeProvider, m as ThemeProviderProps, n as ThemeState, p as applyKbachConfig, q as clsx, r as resolveKbachConfig, u as useColors, s as useDynamicToken, t as useTheme } from './semanticElements-Bk3TB-vt.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';
+import 'react-native';
 
 /**
  * Resolves `classString` to CSS via the WASM engine, injects every returned

package/dist/index.web.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,11 +17,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.web.ts
 var index_web_exports = {};
 __export(index_web_exports, {
+  Button: () => Button,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6,
+  Paragraph: () => Paragraph,
   ThemeProvider: () => ThemeProvider,
   applyKbachConfig: () => applyKbachConfig,
   clsx: () => clsx,
@@ -500,8 +518,42 @@ function resolveClassValue(value) {
   }
   return "";
 }
+
+// src/semanticElements.tsx
+var React = __toESM(require("react"));
+var import_react_native = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = React.forwardRef(function Button2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Pressable, { ref, accessibilityRole: "button", ...props });
+});
+var PARAGRAPH_ROLE = "paragraph";
+var Paragraph = React.forwardRef(function Paragraph2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { ref, role: PARAGRAPH_ROLE, ...props });
+});
+function makeHeading(level) {
+  const extra = { "aria-level": level };
+  const Heading = React.forwardRef(function Heading2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { ref, accessibilityRole: "header", ...extra, ...props });
+  });
+  Heading.displayName = `H${level}`;
+  return Heading;
+}
+var H1 = makeHeading(1);
+var H2 = makeHeading(2);
+var H3 = makeHeading(3);
+var H4 = makeHeading(4);
+var H5 = makeHeading(5);
+var H6 = makeHeading(6);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Button,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Paragraph,
   ThemeProvider,
   applyKbachConfig,
   clsx,

package/dist/index.web.mjs

@@ -10,13 +10,13 @@ import {
   subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-23JJORPW.mjs";
+} from "./chunk-3JQAZNJK.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-Z5Q3FGXR.mjs";
+} from "./chunk-P75PP2QR.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {
@@ -262,7 +262,41 @@ function resolveClassValue(value) {
   }
   return "";
 }
+
+// src/semanticElements.tsx
+import * as React from "react";
+import { Pressable, Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = React.forwardRef(function Button2(props, ref) {
+  return /* @__PURE__ */ jsx2(Pressable, { ref, accessibilityRole: "button", ...props });
+});
+var PARAGRAPH_ROLE = "paragraph";
+var Paragraph = React.forwardRef(function Paragraph2(props, ref) {
+  return /* @__PURE__ */ jsx2(Text, { ref, role: PARAGRAPH_ROLE, ...props });
+});
+function makeHeading(level) {
+  const extra = { "aria-level": level };
+  const Heading = React.forwardRef(function Heading2(props, ref) {
+    return /* @__PURE__ */ jsx2(Text, { ref, accessibilityRole: "header", ...extra, ...props });
+  });
+  Heading.displayName = `H${level}`;
+  return Heading;
+}
+var H1 = makeHeading(1);
+var H2 = makeHeading(2);
+var H3 = makeHeading(3);
+var H4 = makeHeading(4);
+var H5 = makeHeading(5);
+var H6 = makeHeading(6);
 export {
+  Button,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Paragraph,
   ThemeProvider,
   applyKbachConfig,
   clsx,

package/dist/jsx-dev-runtime.d.ts

@@ -1,10 +1,10 @@
-import * as react from 'react';
+import * as React from 'react';
 export { Fragment } from 'react';
 
 declare const jsxDEV: (type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
-}, self?: unknown) => react.ReactElement;
+}, self?: unknown) => React.ReactElement;
 
 export { jsxDEV };

package/dist/jsx-dev-runtime.web.d.ts

@@ -1,10 +1,10 @@
-import * as react from 'react';
+import * as React from 'react';
 export { Fragment } from 'react';
 
 declare const jsxDEV: (type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
-}, self?: unknown) => react.ReactElement;
+}, self?: unknown) => React.ReactElement;
 
 export { jsxDEV };

package/dist/jsx-dev-runtime.web.mjs

@@ -1,10 +1,10 @@
-import "./chunk-23JJORPW.mjs";
+import "./chunk-3JQAZNJK.mjs";
 import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-HVGMZKV7.mjs";
-import "./chunk-Z5Q3FGXR.mjs";
+} from "./chunk-TC6VSV44.mjs";
+import "./chunk-P75PP2QR.mjs";
 
 // src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/jsx-runtime.d.ts

@@ -1,7 +1,7 @@
-import * as react from 'react';
+import * as React from 'react';
 export { Fragment, JSX } from 'react';
 
-declare const jsx: (type: unknown, props: Record<string, unknown> | null, key?: string) => react.ReactElement;
-declare const jsxs: (type: unknown, props: Record<string, unknown> | null, key?: string) => react.ReactElement;
+declare const jsx: (type: unknown, props: Record<string, unknown> | null, key?: string) => React.ReactElement;
+declare const jsxs: (type: unknown, props: Record<string, unknown> | null, key?: string) => React.ReactElement;
 
 export { jsx, jsxs };

package/dist/jsx-runtime.web.d.ts

@@ -1,7 +1,7 @@
-import * as react from 'react';
+import * as React from 'react';
 export { Fragment, JSX } from 'react';
 
-declare const jsx: (type: unknown, props: Record<string, unknown> | null, key?: string) => react.ReactElement;
-declare const jsxs: (type: unknown, props: Record<string, unknown> | null, key?: string) => react.ReactElement;
+declare const jsx: (type: unknown, props: Record<string, unknown> | null, key?: string) => React.ReactElement;
+declare const jsxs: (type: unknown, props: Record<string, unknown> | null, key?: string) => React.ReactElement;
 
 export { jsx, jsxs };

package/dist/jsx-runtime.web.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-HVGMZKV7.mjs";
-import "./chunk-Z5Q3FGXR.mjs";
+} from "./chunk-TC6VSV44.mjs";
+import "./chunk-P75PP2QR.mjs";
 export {
   Fragment,
   jsx,

package/dist/{clsx-BLLSnqAa.d.ts → semanticElements-Bk3TB-vt.d.ts}

@@ -1,7 +1,8 @@
 import { ThemeConfig, ContainerConfig } from './theme';
 import { ThemeMode } from './darkModeStore';
-import * as react from 'react';
+import * as React from 'react';
 import { ReactNode } from 'react';
+import { PressableProps, TextProps } from 'react-native';
 
 /**
  * A `kbach.config.js`-style theme customization — same shape as
@@ -165,7 +166,7 @@ interface ThemeProviderProps {
  * state — mounting more than one is very likely a mistake, so this warns
  * once in dev.
  */
-declare function ThemeProvider({ children, defaultMode, persist }: ThemeProviderProps): react.JSX.Element;
+declare function ThemeProvider({ children, defaultMode, persist }: ThemeProviderProps): React.JSX.Element;
 
 interface ColorScale {
     /** `colors.blue[6]` -> raw value */
@@ -274,4 +275,60 @@ type ClassArray = ClassValue[];
  */
 declare function clsx(...inputs: ClassValue[]): string;
 
-export { type ClassArray as C, type KbachConfig as K, ThemeProvider as T, type ClassDictionary as a, type ClassValue as b, type ColorScale as c, type ColorsAPI as d, type ThemeProviderProps as e, type ThemeState as f, type ThemeStorageAdapter as g, applyKbachConfig as h, clsx as i, useDynamicToken as j, useTheme as k, resolveKbachConfig as r, useColors as u };
+/**
+ * On Expo Web, `react-native-web` renders a bare `<View>`/`<Text>` as a
+ * plain `<div>`/`<span>` by default — confirmed directly in its own
+ * source (`exports/View/index.js`, `exports/Text/index.js`). That's
+ * NOTHING to do with Kbach: this package's jsx-runtime never reads or
+ * substitutes the JSX element type at all (`processElement` in
+ * `jsxRuntimeCore(.web).ts` only ever destructures `className`/`style`,
+ * passing `type` straight through unchanged) — whatever tag shows up is
+ * exactly whatever component the app wrote.
+ *
+ * `react-native-web` already has a real fix for this that nothing here
+ * needs to add: an `accessibilityRole`/`role` prop on ANY host component
+ * makes it render the matching real HTML element instead
+ * (`propsToAccessibilityComponent`, react-native-web's own
+ * AccessibilityUtil) — `button` -> `<button>`, `header` (+ `aria-level`,
+ * web-only) -> `<h1>`-`<h6>`, `paragraph` -> `<p>`, and so on. These
+ * components are JUST that prop, pre-set on the right underlying
+ * component — nothing Kbach-specific, and writing
+ * `<Pressable accessibilityRole="button">` directly instead of `<Button>`
+ * behaves identically. `className` keeps working on every one of these
+ * exactly like it does on a bare `Pressable`/`Text`.
+ *
+ * Deliberately NOT a `Div` or an `Input`: a plain `<View>` already IS the
+ * right generic container (there's no more-semantic alternative to ask
+ * for), and `<TextInput>` already renders a real `<input>` (or
+ * `<textarea>` when `multiline`) by default — react-native-web's own
+ * TextInput component picks that unconditionally, with no role needed at
+ * all. Only the cases that actually need a role to stop defaulting to
+ * `<div>`/`<span>` are here.
+ */
+type ButtonProps = PressableProps;
+/**
+ * A real `<button>` on Expo Web, a real accessible button on native —
+ * `<Pressable accessibilityRole="button">`, nothing else changed. Not the
+ * same thing as React Native's OWN built-in `Button` (a fixed-chrome,
+ * barely-styleable native control) — this is a styleable `Pressable`,
+ * matching how every other interactive element in a Kbach app is built.
+ */
+declare const Button: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<any>>;
+type ParagraphProps = TextProps;
+/** A real `<p>` on Expo Web — `<Text role="paragraph">`, nothing else changed. */
+declare const Paragraph: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<any>>;
+type HeadingProps = TextProps;
+/** A real `<h1>` on Expo Web — `<Text accessibilityRole="header">` + the web-only level hint, nothing else changed. */
+declare const H1: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<any>>;
+/** A real `<h2>` on Expo Web — see `H1`'s own doc comment. */
+declare const H2: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<any>>;
+/** A real `<h3>` on Expo Web — see `H1`'s own doc comment. */
+declare const H3: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<any>>;
+/** A real `<h4>` on Expo Web — see `H1`'s own doc comment. */
+declare const H4: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<any>>;
+/** A real `<h5>` on Expo Web — see `H1`'s own doc comment. */
+declare const H5: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<any>>;
+/** A real `<h6>` on Expo Web — see `H1`'s own doc comment. */
+declare const H6: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<any>>;
+
+export { Button as B, type ClassArray as C, H1 as H, type KbachConfig as K, Paragraph as P, ThemeProvider as T, type ButtonProps as a, type ClassDictionary as b, type ClassValue as c, type ColorScale as d, type ColorsAPI as e, H2 as f, H3 as g, H4 as h, H5 as i, H6 as j, type HeadingProps as k, type ParagraphProps as l, type ThemeProviderProps as m, type ThemeState as n, type ThemeStorageAdapter as o, applyKbachConfig as p, clsx as q, resolveKbachConfig as r, useDynamicToken as s, useTheme as t, useColors as u };

package/dist/theme.js

@@ -375,19 +375,28 @@ var defaultTheme = {
   // Empty by default, matching real Tailwind's own defaults.
   container: {}
 };
-var activeTheme = defaultTheme;
-var activeThemeJson = JSON.stringify(defaultTheme);
+var GLOBAL_STATE_KEY = "__kbachReactNativeThemeState__";
+function getThemeState() {
+  const g = globalThis;
+  let state = g[GLOBAL_STATE_KEY];
+  if (!state) {
+    state = { theme: defaultTheme, json: JSON.stringify(defaultTheme) };
+    g[GLOBAL_STATE_KEY] = state;
+  }
+  return state;
+}
 function setTheme(theme) {
   const json = JSON.stringify(theme);
-  if (json === activeThemeJson) return;
-  activeTheme = theme;
-  activeThemeJson = json;
+  const state = getThemeState();
+  if (json === state.json) return;
+  state.theme = theme;
+  state.json = json;
 }
 function getTheme() {
-  return activeTheme;
+  return getThemeState().theme;
 }
 function getThemeJson() {
-  return activeThemeJson;
+  return getThemeState().json;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.52",
+  "version": "1.0.0-beta.53",
   "description": "Kbach's utility-class styling engine for React Native — the same class names as @kbach/react, resolved to a StyleSheet-ready style object via a Kotlin/JNI TurboModule (native), the same WASM engine @kbach/react uses (Expo Web / react-native-web), or a pure-JS fallback engine (Expo Go). Ships its own native Android module — one npm install, no separate native package. Beta. Native is Android-only (no iOS bridge yet); works with the React Native CLI, an Expo dev client, AND Expo Go (a reduced-coverage pure-JS fallback, since Expo Go can't load any custom native module).",
   "keywords": [
     "css",