@kbach/ui 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/native.js

@@ -1,4 +1,3 @@
-'use client';
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,31 +20,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/native/index.ts
 var native_exports = {};
 __export(native_exports, {
-  ThemeProvider: () => NativeThemeProvider,
   createKbachConfig: () => createKbachConfig,
   withKbach: () => withKbach,
   withKbachBabel: () => withKbachBabel
 });
 module.exports = __toCommonJS(native_exports);
 
-// src/native/NativeThemeProvider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function NativeThemeProvider(props) {
-  const { useColorScheme, useWindowDimensions } = require("react-native");
-  const { ThemeProvider } = require("@kbach/ui");
-  const raw = useColorScheme();
-  const { width } = useWindowDimensions();
-  const systemColorScheme = raw === "dark" ? "dark" : raw === "light" ? "light" : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ThemeProvider,
-    {
-      ...props,
-      colorScheme: props.colorScheme ?? systemColorScheme,
-      windowWidth: props.windowWidth ?? width
-    }
-  );
-}
-
 // src/native/setup.ts
 function warn(message) {
   const proc = process;
@@ -92,7 +72,6 @@ function createKbachConfig(options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ThemeProvider,
   createKbachConfig,
   withKbach,
   withKbachBabel

package/dist/native.mjs

@@ -0,0 +1,49 @@
+// src/native/setup.ts
+function warn(message) {
+  const proc = process;
+  const useColor = !!proc.stdout?.isTTY && !proc.env.NO_COLOR;
+  const paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
+  console.warn(`${paint("1", paint("35", "[kbach]"))} ${paint("33", message)}`);
+}
+function withKbach(metroConfig, _options = {}) {
+  return metroConfig;
+}
+function withKbachBabel(babelConfig, options = {}) {
+  const {
+    configFile = "kbach.config.js",
+    attributes = ["kb", "className"],
+    debug = false
+  } = options;
+  const presets = (babelConfig.presets ?? []).map((preset) => {
+    const [name, presetOpts = {}] = Array.isArray(preset) ? preset : [preset, {}];
+    if (typeof name === "string" && (name.includes("babel-preset-expo") || name.includes("preset-react"))) {
+      const opts = presetOpts;
+      if (opts.jsxRuntime === "classic") {
+        warn(`Forcing jsxRuntime "automatic" on ${name} (was "classic") \u2014 required for Kbach`);
+      }
+      return [name, { ...opts, jsxRuntime: "automatic" }];
+    }
+    return preset;
+  });
+  return {
+    ...babelConfig,
+    presets: [...presets, ["@kbach/ui/babel", { configFile, attributes, debug }]]
+  };
+}
+function createKbachConfig(options = {}) {
+  return {
+    presets: [
+      "babel-preset-expo",
+      ["@kbach/ui/babel", {
+        configFile: options.configFile ?? "kbach.config.js",
+        attributes: options.attributes ?? ["kb", "className"],
+        debug: options.debug ?? false
+      }]
+    ]
+  };
+}
+export {
+  createKbachConfig,
+  withKbach,
+  withKbachBabel
+};

package/dist/vite-plugin.js

@@ -57,7 +57,10 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  const escaped = cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  if (!/^[0-9]/.test(escaped)) return escaped;
+  const hex = escaped.charCodeAt(0).toString(16);
+  return `\\${hex} ${escaped.slice(1)}`;
 }
 
 // src/core/reset.ts
@@ -589,55 +592,78 @@ var defaultTheme = {
     none: "none"
     // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
+  // Each preset carries BOTH React Native's shadow*/elevation properties
+  // (used on native) and a `boxShadow` string (used on web) — see the
+  // `shadow` resolver in resolvers/effects.ts, which picks one or the other
+  // via getEffectiveIsWeb() and strips the rest. The boxShadow values are
+  // Tailwind's own default shadow scale verbatim (same offsets/blur/spread/
+  // opacity), so shadow-sm/md/lg/xl/2xl look the same as their Tailwind
+  // counterparts on web — the native shadowOffset/shadowRadius/shadowOpacity
+  // numbers were tuned independently for RN's elevation model and don't need
+  // to (and can't exactly) match the CSS values pixel-for-pixel.
   shadow: {
     sm: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 1 },
       shadowOpacity: 0.05,
       shadowRadius: 2,
-      elevation: 1
+      elevation: 1,
+      boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
     },
     DEFAULT: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.1,
       shadowRadius: 4,
-      elevation: 2
+      elevation: 2,
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
     },
     md: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 4 },
       shadowOpacity: 0.1,
       shadowRadius: 8,
-      elevation: 3
+      elevation: 3,
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
     },
     lg: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 8 },
       shadowOpacity: 0.1,
       shadowRadius: 15,
-      elevation: 4
+      elevation: 4,
+      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
     },
     xl: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 16 },
       shadowOpacity: 0.1,
       shadowRadius: 24,
-      elevation: 6
+      elevation: 6,
+      boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
     },
     "2xl": {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 24 },
       shadowOpacity: 0.25,
       shadowRadius: 48,
-      elevation: 8
+      elevation: 8,
+      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+    },
+    // Web-only — React Native has no inset-shadow equivalent (shadow*/
+    // elevation only ever draw an outer shadow), so the native side of this
+    // preset is intentionally empty rather than approximating something RN
+    // can't actually do.
+    inner: {
+      boxShadow: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
     },
     none: {
       shadowColor: "transparent",
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0,
       shadowRadius: 0,
-      elevation: 0
+      elevation: 0,
+      boxShadow: "0 0 #0000"
     }
   },
   screens: {
@@ -2298,9 +2324,23 @@ var effectResolvers = {
     return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
   },
   // ── Shadow ─────────────────────────────────────────────────────────────────
+  // Presets carry BOTH a web `boxShadow` string and native's shadow*/elevation
+  // properties (theme.ts) — picked apart here rather than left for
+  // styleValueToCSS's RN_ONLY_PROPS filter to sort out, since shadowOffset is
+  // an object (filtered out as "not a flat style value" regardless of
+  // platform) and boxShadow would otherwise leak into native's style prop as
+  // an RN doesn't understand (silently ignored there, but better to not hand
+  // native a property that was never meant for it — same branch-on-platform
+  // pattern as bg-opacity/transition/animate above).
   shadow: ({ value }, { shadow }) => {
     const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
+    const preset = shadow[key];
+    if (!preset) return null;
+    if (getEffectiveIsWeb()) {
+      return preset.boxShadow !== void 0 ? { boxShadow: preset.boxShadow } : null;
+    }
+    const { boxShadow, ...native } = preset;
+    return Object.keys(native).length > 0 ? native : null;
   },
   // ── Animations (CSS keyframe animations, web-only) ────────────────────────
   // Each variant injects a @keyframes rule once via the __keyframe marker.
@@ -2808,6 +2848,26 @@ function findOuterColon(s) {
   return -1;
 }
 
+// src/core/globalSingleton.ts
+function getGlobalSingleton(key, create) {
+  const symbolKey = /* @__PURE__ */ Symbol.for(`__kbach_${key}__`);
+  const g = globalThis;
+  let value = g[symbolKey];
+  if (value === void 0) {
+    value = create();
+    g[symbolKey] = value;
+  }
+  return value;
+}
+
+// src/core/responsiveStore.ts
+var store = getGlobalSingleton("responsiveStore", () => ({
+  width: 0,
+  notifiedWidth: 0,
+  screens: {},
+  listeners: /* @__PURE__ */ new Set()
+}));
+
 // src/core/modeAwareColors.ts
 var _modeAwareMapCache = /* @__PURE__ */ new WeakMap();
 function buildModeAwareMap(colors) {
@@ -2867,9 +2927,9 @@ function expandModeAwareColorClasses(classString, colors) {
 }
 
 // src/core/resolver.ts
-var _defaultFontFamily;
+var _fontFamilyHolder = getGlobalSingleton("defaultFontFamily", () => ({ value: void 0 }));
 function setDefaultFontFamily(font) {
-  _defaultFontFamily = font;
+  _fontFamilyHolder.value = font;
 }
 var _styleEl = null;
 var _ruleIndexByKey = /* @__PURE__ */ new Map();
@@ -2893,9 +2953,9 @@ function evictInjectedRule(rule) {
   }
 }
 var _injectedRules = new LRUCache(5e4, evictInjectedRule);
-var _runtimeCSSDisabled = false;
+var _runtimeCSSHolder = getGlobalSingleton("runtimeCSSDisabled", () => ({ value: false }));
 function isRuntimeCSSDisabled() {
-  return _runtimeCSSDisabled;
+  return _runtimeCSSHolder.value;
 }
 function getStyleEl() {
   if (_styleEl) return _styleEl;
@@ -3118,6 +3178,10 @@ function deepMerge(base, override) {
   }
   return result;
 }
+var configStore = getGlobalSingleton("configStore", () => ({
+  resolved: null,
+  listeners: /* @__PURE__ */ new Set()
+}));
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
   function resolveChain(raw, side) {
@@ -3481,6 +3545,31 @@ function prettifyCSS(css) {
   if (trailing) out.push(trailing);
   return out.join("\n");
 }
+var RESPONSIVE_MEDIA_RE = /^@media \(min-width: (\d+)px\) \{ (.+) \}$/;
+function mergeResponsiveMediaBlocks(items) {
+  const byWidth = /* @__PURE__ */ new Map();
+  const widthOrder = [];
+  const unwrapped = [];
+  for (const { raw } of items) {
+    for (const line of raw.split("\n")) {
+      if (!line.trim()) continue;
+      const m = RESPONSIVE_MEDIA_RE.exec(line);
+      if (!m) {
+        unwrapped.push(line);
+        continue;
+      }
+      const width = Number(m[1]);
+      if (!byWidth.has(width)) {
+        byWidth.set(width, []);
+        widthOrder.push(width);
+      }
+      byWidth.get(width).push(m[2]);
+    }
+  }
+  widthOrder.sort((a, b) => a - b);
+  const merged = widthOrder.map((w) => `@media (min-width: ${w}px) { ${byWidth.get(w).join(" ")} }`);
+  return [...unwrapped, ...merged];
+}
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
@@ -3500,7 +3589,7 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     if (!groups.has(label)) groups.set(label, []);
     const parsedToken = parseClass(token);
     const bucketKey = parsedToken && parsedToken.modifiers.length > 0 ? parsedToken.modifiers.join(":") : "base";
-    groups.get(label).push({ order: getModifierOrder(bucketKey), css: prettifyCSS(applyVars(css)) });
+    groups.get(label).push({ order: getModifierOrder(bucketKey), raw: applyVars(css) });
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
   if (declarations.size > 0) {
@@ -3518,7 +3607,8 @@ ${prettifyCSS(globalCSS)}`);
     const sorted = [...items].sort((a, b) => a.order - b.order);
     out.push(`
 /* ${label} */`);
-    out.push(sorted.map((it) => it.css).join("\n\n"));
+    const rendered = label === "Responsive" ? mergeResponsiveMediaBlocks(sorted).map(prettifyCSS) : sorted.map((it) => prettifyCSS(it.raw));
+    out.push(rendered.join("\n\n"));
   }
   return out.join("\n");
 }

package/dist/vite-plugin.mjs

@@ -22,7 +22,10 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  const escaped = cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  if (!/^[0-9]/.test(escaped)) return escaped;
+  const hex = escaped.charCodeAt(0).toString(16);
+  return `\\${hex} ${escaped.slice(1)}`;
 }
 
 // src/core/reset.ts
@@ -554,55 +557,78 @@ var defaultTheme = {
     none: "none"
     // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
+  // Each preset carries BOTH React Native's shadow*/elevation properties
+  // (used on native) and a `boxShadow` string (used on web) — see the
+  // `shadow` resolver in resolvers/effects.ts, which picks one or the other
+  // via getEffectiveIsWeb() and strips the rest. The boxShadow values are
+  // Tailwind's own default shadow scale verbatim (same offsets/blur/spread/
+  // opacity), so shadow-sm/md/lg/xl/2xl look the same as their Tailwind
+  // counterparts on web — the native shadowOffset/shadowRadius/shadowOpacity
+  // numbers were tuned independently for RN's elevation model and don't need
+  // to (and can't exactly) match the CSS values pixel-for-pixel.
   shadow: {
     sm: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 1 },
       shadowOpacity: 0.05,
       shadowRadius: 2,
-      elevation: 1
+      elevation: 1,
+      boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
     },
     DEFAULT: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.1,
       shadowRadius: 4,
-      elevation: 2
+      elevation: 2,
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
     },
     md: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 4 },
       shadowOpacity: 0.1,
       shadowRadius: 8,
-      elevation: 3
+      elevation: 3,
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
     },
     lg: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 8 },
       shadowOpacity: 0.1,
       shadowRadius: 15,
-      elevation: 4
+      elevation: 4,
+      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
     },
     xl: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 16 },
       shadowOpacity: 0.1,
       shadowRadius: 24,
-      elevation: 6
+      elevation: 6,
+      boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
     },
     "2xl": {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 24 },
       shadowOpacity: 0.25,
       shadowRadius: 48,
-      elevation: 8
+      elevation: 8,
+      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+    },
+    // Web-only — React Native has no inset-shadow equivalent (shadow*/
+    // elevation only ever draw an outer shadow), so the native side of this
+    // preset is intentionally empty rather than approximating something RN
+    // can't actually do.
+    inner: {
+      boxShadow: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
     },
     none: {
       shadowColor: "transparent",
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0,
       shadowRadius: 0,
-      elevation: 0
+      elevation: 0,
+      boxShadow: "0 0 #0000"
     }
   },
   screens: {
@@ -2263,9 +2289,23 @@ var effectResolvers = {
     return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
   },
   // ── Shadow ─────────────────────────────────────────────────────────────────
+  // Presets carry BOTH a web `boxShadow` string and native's shadow*/elevation
+  // properties (theme.ts) — picked apart here rather than left for
+  // styleValueToCSS's RN_ONLY_PROPS filter to sort out, since shadowOffset is
+  // an object (filtered out as "not a flat style value" regardless of
+  // platform) and boxShadow would otherwise leak into native's style prop as
+  // an RN doesn't understand (silently ignored there, but better to not hand
+  // native a property that was never meant for it — same branch-on-platform
+  // pattern as bg-opacity/transition/animate above).
   shadow: ({ value }, { shadow }) => {
     const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
+    const preset = shadow[key];
+    if (!preset) return null;
+    if (getEffectiveIsWeb()) {
+      return preset.boxShadow !== void 0 ? { boxShadow: preset.boxShadow } : null;
+    }
+    const { boxShadow, ...native } = preset;
+    return Object.keys(native).length > 0 ? native : null;
   },
   // ── Animations (CSS keyframe animations, web-only) ────────────────────────
   // Each variant injects a @keyframes rule once via the __keyframe marker.
@@ -2773,6 +2813,26 @@ function findOuterColon(s) {
   return -1;
 }
 
+// src/core/globalSingleton.ts
+function getGlobalSingleton(key, create) {
+  const symbolKey = /* @__PURE__ */ Symbol.for(`__kbach_${key}__`);
+  const g = globalThis;
+  let value = g[symbolKey];
+  if (value === void 0) {
+    value = create();
+    g[symbolKey] = value;
+  }
+  return value;
+}
+
+// src/core/responsiveStore.ts
+var store = getGlobalSingleton("responsiveStore", () => ({
+  width: 0,
+  notifiedWidth: 0,
+  screens: {},
+  listeners: /* @__PURE__ */ new Set()
+}));
+
 // src/core/modeAwareColors.ts
 var _modeAwareMapCache = /* @__PURE__ */ new WeakMap();
 function buildModeAwareMap(colors) {
@@ -2832,9 +2892,9 @@ function expandModeAwareColorClasses(classString, colors) {
 }
 
 // src/core/resolver.ts
-var _defaultFontFamily;
+var _fontFamilyHolder = getGlobalSingleton("defaultFontFamily", () => ({ value: void 0 }));
 function setDefaultFontFamily(font) {
-  _defaultFontFamily = font;
+  _fontFamilyHolder.value = font;
 }
 var _styleEl = null;
 var _ruleIndexByKey = /* @__PURE__ */ new Map();
@@ -2858,9 +2918,9 @@ function evictInjectedRule(rule) {
   }
 }
 var _injectedRules = new LRUCache(5e4, evictInjectedRule);
-var _runtimeCSSDisabled = false;
+var _runtimeCSSHolder = getGlobalSingleton("runtimeCSSDisabled", () => ({ value: false }));
 function isRuntimeCSSDisabled() {
-  return _runtimeCSSDisabled;
+  return _runtimeCSSHolder.value;
 }
 function getStyleEl() {
   if (_styleEl) return _styleEl;
@@ -3083,6 +3143,10 @@ function deepMerge(base, override) {
   }
   return result;
 }
+var configStore = getGlobalSingleton("configStore", () => ({
+  resolved: null,
+  listeners: /* @__PURE__ */ new Set()
+}));
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
   function resolveChain(raw, side) {
@@ -3446,6 +3510,31 @@ function prettifyCSS(css) {
   if (trailing) out.push(trailing);
   return out.join("\n");
 }
+var RESPONSIVE_MEDIA_RE = /^@media \(min-width: (\d+)px\) \{ (.+) \}$/;
+function mergeResponsiveMediaBlocks(items) {
+  const byWidth = /* @__PURE__ */ new Map();
+  const widthOrder = [];
+  const unwrapped = [];
+  for (const { raw } of items) {
+    for (const line of raw.split("\n")) {
+      if (!line.trim()) continue;
+      const m = RESPONSIVE_MEDIA_RE.exec(line);
+      if (!m) {
+        unwrapped.push(line);
+        continue;
+      }
+      const width = Number(m[1]);
+      if (!byWidth.has(width)) {
+        byWidth.set(width, []);
+        widthOrder.push(width);
+      }
+      byWidth.get(width).push(m[2]);
+    }
+  }
+  widthOrder.sort((a, b) => a - b);
+  const merged = widthOrder.map((w) => `@media (min-width: ${w}px) { ${byWidth.get(w).join(" ")} }`);
+  return [...unwrapped, ...merged];
+}
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
@@ -3465,7 +3554,7 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     if (!groups.has(label)) groups.set(label, []);
     const parsedToken = parseClass(token);
     const bucketKey = parsedToken && parsedToken.modifiers.length > 0 ? parsedToken.modifiers.join(":") : "base";
-    groups.get(label).push({ order: getModifierOrder(bucketKey), css: prettifyCSS(applyVars(css)) });
+    groups.get(label).push({ order: getModifierOrder(bucketKey), raw: applyVars(css) });
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
   if (declarations.size > 0) {
@@ -3483,7 +3572,8 @@ ${prettifyCSS(globalCSS)}`);
     const sorted = [...items].sort((a, b) => a.order - b.order);
     out.push(`
 /* ${label} */`);
-    out.push(sorted.map((it) => it.css).join("\n\n"));
+    const rendered = label === "Responsive" ? mergeResponsiveMediaBlocks(sorted).map(prettifyCSS) : sorted.map((it) => prettifyCSS(it.raw));
+    out.push(rendered.join("\n\n"));
   }
   return out.join("\n");
 }

package/kbach-ui.md

@@ -84,10 +84,10 @@ module.exports = function (api) {
 One-liner: `const { createKbachConfig } = require('@kbach/ui/native'); module.exports = createKbachConfig();`. Merge into an existing config with `withKbachBabel({ presets: [...] })` (same module). After editing this file: `npx expo start --clear`.
 
 ```jsx
-import { ThemeProvider } from '@kbach/ui/native';
+import { ThemeProvider } from '@kbach/ui';
 <ThemeProvider defaultMode="system"><App /></ThemeProvider>
 ```
-Native-aware — reads `useColorScheme()`/`useWindowDimensions()` automatically. The plain `ThemeProvider` from `@kbach/ui` (no `/native`) has no automatic RN wiring; import the `/native` one on React Native.
+`ThemeProvider` auto-detects React Native at render time and reads `useColorScheme()`/`useWindowDimensions()` automatically — same import as web, no `/native` subpath needed.
 
 `disablePersistence` on `<ThemeProvider>` saves to `AsyncStorage` on native (vs. `localStorage` on web) — same prop, platform-appropriate storage.
 
@@ -586,8 +586,9 @@ rounded-t/r/b/l  rounded-tl/tr/bl/br
 
 ### Shadow
 ```
-shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xl / shadow-none
+shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xl / shadow-inner / shadow-none
 ```
+Web: real `box-shadow` (Tailwind's own default values). Native: RN's shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation, tuned independently for RN's elevation model — not derived from the web value, so they don't need to match pixel-for-pixel. `shadow-inner` is web-only (RN has no inset-shadow equivalent). Customize or add sizes via `theme.extend.shadow` — see [Theme Configuration](#theme-configuration) below; each preset key merges independently, so overriding one size's `boxShadow` doesn't touch its native properties or any other size.
 
 ### Opacity
 ```
@@ -740,6 +741,16 @@ module.exports = {
       fontFamily: {
         sans: 'Inter, sans-serif',
       },
+      shadow: {
+        // Deep-merged into the existing preset, not replaced — lg keeps its
+        // native shadowColor/shadowOffset/shadowOpacity/shadowRadius/
+        // elevation, only boxShadow (the web value) changes here.
+        lg: { boxShadow: '0 10px 40px -10px rgba(99, 102, 241, 0.4)' },
+        // A brand-new key adds a new shadow-3xl utility alongside the
+        // defaults (sm/DEFAULT/md/lg/xl/2xl/inner/none) — web-only here,
+        // since it has no native shadow*/elevation properties.
+        '3xl': { boxShadow: '0 35px 60px -15px rgba(0, 0, 0, 0.3)' },
+      },
     },
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/ui",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.2",
   "description": "Tailwind-like utility classes and components for React — web, React Native, and Expo",
   "license": "MIT",
   "repository": {
@@ -17,6 +17,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
+      "react-native": "./dist/index.js",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
@@ -44,7 +45,7 @@
     "./native": {
       "types": "./dist/native.d.ts",
       "source": "./src/native/index.ts",
-      "import": "./dist/native.js",
+      "import": "./dist/native.mjs",
       "require": "./dist/native.js"
     },
     "./babel": "./src/native/babel/index.js",

package/scripts/postinstall.js

@@ -12,6 +12,23 @@ if (!projectRoot) process.exit(0);
 // Safety: never write outside the user's project (e.g. if somehow inside node_modules)
 if (projectRoot.includes('node_modules')) process.exit(0);
 
+// Skip when INIT_CWD is this very monorepo's own root — any `npm install`/
+// `npm version`/etc. run at the repo root re-triggers this script (since
+// @kbach/ui is a workspace dependency of the root package too), which used
+// to keep re-creating a KBACH.md at the repo root that isn't needed there
+// (this repo's own copy already lives in packages/ui/KBACH.md — the actual
+// source this file gets copied FROM). Detected by package name + workspaces
+// rather than a path comparison, since this script runs from inside
+// node_modules/@kbach/ui in a real consumer install, where a literal path
+// match to the monorepo source tree wouldn't exist to compare against.
+try {
+  const rootPkg = JSON.parse(fs.readFileSync(path.join(projectRoot, 'package.json'), 'utf-8'));
+  if (rootPkg.name === 'kbach' && Array.isArray(rootPkg.workspaces)) process.exit(0);
+} catch {
+  // No readable package.json at projectRoot, or it doesn't parse — not our
+  // monorepo root either way, fall through to the normal consumer-install path.
+}
+
 // Don't overwrite an existing file — user may have customised it.
 const dest = path.join(projectRoot, 'KBACH.md');
 if (fs.existsSync(dest)) process.exit(0);