@kbach/react 0.6.2 → 0.6.4

package/dist/vite-plugin.mjs

@@ -403,7 +403,10 @@ var defaultTheme = {
     "2/3": "66.666667%",
     "1/4": "25%",
     "3/4": "75%",
-    screen: "100vh",
+    // Dynamic viewport unit — see the comment on the 'screen' standalone utilities
+    // in utilities.ts for why dvh beats vh on mobile. Used by h-screen (w-screen
+    // has its own standalone entry so it never reaches this spacing lookup).
+    screen: "100dvh",
     min: "min-content",
     max: "max-content",
     fit: "fit-content"
@@ -714,15 +717,19 @@ function buildStandalone() {
     // Display
     // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
     // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
-    // `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
+    // `grid`, `contents`, `flow-root` have no native equivalent and stay null there.
+    // The inline-* family (inline, inline-block, inline-flex, inline-grid) falls back
+    // to 'flex' on native instead — like plain `flex`, this is a no-op most of the
+    // time, but without it these utilities couldn't re-show a `hidden` element on
+    // native either (null → no style applied → still display:'none').
     flex: { display: "flex" },
     block: web ? { display: "block" } : null,
-    "inline-block": web ? { display: "inline-block" } : null,
-    inline: web ? { display: "inline" } : null,
+    "inline-block": { display: web ? "inline-block" : "flex" },
+    inline: { display: web ? "inline" : "flex" },
     grid: web ? { display: "grid" } : null,
     grd: web ? { display: "grid" } : null,
     "inline-flex": { display: web ? "inline-flex" : "flex" },
-    "inline-grid": web ? { display: "inline-grid" } : null,
+    "inline-grid": { display: web ? "inline-grid" : "flex" },
     hidden: { display: "none" },
     contents: web ? { display: "contents" } : null,
     "flow-root": web ? { display: "flow-root" } : null,
@@ -981,12 +988,17 @@ function buildStandalone() {
     "text-nowrap": web ? { textWrap: "nowrap" } : null,
     "text-balance": web ? { textWrap: "balance" } : null,
     "text-pretty": web ? { textWrap: "pretty" } : null,
-    // Screen sizing (vw values are web-only; vh values work cross-platform via spacing scale for h-*)
-    "w-screen": web ? { width: "100vw" } : null,
-    "min-h-screen": { minHeight: "100vh" },
-    "max-h-screen": { maxHeight: "100vh" },
-    "min-w-screen": web ? { minWidth: "100vw" } : null,
-    "max-w-screen": web ? { maxWidth: "100vw" } : null,
+    // Screen sizing — dvw/dvh (dynamic viewport units) instead of vw/vh: on mobile
+    // browsers, vh/vw are pinned to the LARGEST viewport size (address bar hidden),
+    // so `h-screen` overflows behind the address bar when it's shown. dvh/dvw track
+    // the actual visible viewport as browser chrome shows/hides. Desktop behavior
+    // is unchanged since there's no dynamic chrome to account for.
+    // (vw/dvw values are web-only; vh/dvh values work cross-platform via spacing scale for h-*)
+    "w-screen": web ? { width: "100dvw" } : null,
+    "min-h-screen": { minHeight: "100dvh" },
+    "max-h-screen": { maxHeight: "100dvh" },
+    "min-w-screen": web ? { minWidth: "100dvw" } : null,
+    "max-w-screen": web ? { maxWidth: "100dvw" } : null,
     // max-w named container sizes (mirrors Tailwind's container scale)
     "max-w-none": { maxWidth: "none" },
     "max-w-xs": { maxWidth: 320 },
@@ -1893,6 +1905,33 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { accentColor: color } : null;
   },
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
+  },
+  fill: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
   // ── Flex ───────────────────────────────────────────────────────────────────
   flex: ({ value, isArbitrary }, { flex }) => {
     if (!value) return { display: "flex" };
@@ -2112,34 +2151,50 @@ var RESOLVERS = {
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
-  // ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
+  // ── Ring ───────────────────────────────────────────────────────────────────
+  // Web: box-shadow outline ring (doesn't affect layout).
+  // Native: React Native has no box-shadow, so this falls back to borderWidth/
+  // borderColor — the closest visual approximation (used by other RN Tailwind-
+  // likes for the same reason). Unlike the web ring, this DOES affect layout,
+  // and it shares its properties with the `border` utility — combining
+  // `border-*` and `ring-*` on the same native element means whichever class
+  // comes later wins, since both ultimately set borderWidth/borderColor.
   ring: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
+    const onWeb = getEffectiveIsWeb();
     const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
     const DEFAULT_WIDTH = 3;
+    const asNative = (w, color2) => w === 0 ? { borderWidth: 0 } : { borderWidth: w, borderColor: color2 };
     if (!value) {
-      return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+      return onWeb ? { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
     }
     if (value === "inset") {
-      return { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+      return onWeb ? { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
     }
     const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
     if (!isArbitrary && value in widthTokens) {
       const w = widthTokens[value];
-      return { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` };
+      return onWeb ? { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` } : asNative(w, DEFAULT_COLOR);
     }
     if (isArbitrary) {
       const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
       if (numMatch) {
         const unit = numMatch[2] ?? "px";
-        return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
+        if (onWeb) return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
+        return unit === "px" ? asNative(parseFloat(numMatch[1]), DEFAULT_COLOR) : null;
       }
-      return { boxShadow: value.replace(/_/g, " ") };
+      return onWeb ? { boxShadow: value.replace(/_/g, " ") } : null;
     }
     const color = resolveColor(value, colors, false);
-    if (color) return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` };
+    if (color) {
+      return onWeb ? { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` } : asNative(DEFAULT_WIDTH, color);
+    }
     return null;
   },
+  // Web-only, unlike `ring` above: this stacks a second box-shadow layer to
+  // create a gap between the element and the ring. There's no native
+  // equivalent to approximate that with (a border can't create a gap outside
+  // its own element without an extra wrapper view), so this stays a no-op
+  // on native rather than rendering a misleading half-translation.
   "ring-offset": ({ value, isArbitrary }, _theme) => {
     if (!getEffectiveIsWeb()) return null;
     const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
@@ -3162,6 +3217,12 @@ function kbach(userConfigOrOptions) {
     enforce: "pre",
     configResolved(resolved) {
       root = resolved.root;
+      const names = new Set(resolved.plugins.map((p) => p.name));
+      if (names.has("react-router") && names.has("vite:react-refresh")) {
+        console.warn(
+          `[kbach] Detected both @vitejs/plugin-react and @react-router/dev's reactRouter() plugin active together. reactRouter() already includes its own JSX transform and Fast Refresh integration \u2014 having both crashes the page at runtime with "Identifier 'RefreshRuntime' has already been declared" before React hydrates, which looks like every class silently failing to style. Remove the react() plugin from vite.config.ts; jsxImportSource in tsconfig.json is enough on its own.`
+        );
+      }
     },
     // When any JS/TS file imports kbach.css, prepend a disableRuntimeCSS() call
     // so styles come solely from the static stylesheet — no duplicate injection.

package/kbach-react.md

@@ -13,7 +13,7 @@ Package: `@kbach/react`
 { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@kbach/react" } }
 ```
 
-### vite.config.ts
+### vite.config.ts (plain Vite only — skip @vitejs/plugin-react if a meta-framework already provides its own Vite/React plugin, e.g. React Router's reactRouter(); see below)
 Requires `vite` and `@vitejs/plugin-react` as dev dependencies — not installed by `@kbach/react` itself: `npm install -D vite @vitejs/plugin-react`.
 ```ts
 import { defineConfig } from 'vite';
@@ -50,7 +50,13 @@ import { ThemeProvider } from '@kbach/react';
 tsconfig `jsxImportSource` setup above applies as-is. No Vite plugin for Next.js (webpack/Turbopack) — falls back to runtime CSS injection, which only runs client-side, so expect a brief flash of unstyled content on first paint before hydration. `@kbach/react`'s compiled output ships its own `"use client"` directive, so App Router Server Components can use `className`, `styled()`, hooks, and `<ThemeProvider>` directly, with no manual client wrapper needed.
 
 ### React Router
-Framework mode (v7, SSR) builds with Vite, so the setup above works unchanged — default scan dirs include `app/`. Library mode (client-only) needs no special handling beyond the standard Vite setup.
+Framework mode (v7+, SSR): do NOT add `@vitejs/plugin-react` — `@react-router/dev`'s `reactRouter()` Vite plugin already includes its own JSX transform + Fast Refresh integration. Adding both makes each inject its own Fast Refresh preamble into the same module, crashing the page (`Identifier 'RefreshRuntime' has already been declared`) before React hydrates — every class on the page silently fails to style because the app never mounts. tsconfig `jsxImportSource` alone is enough:
+```ts
+import { reactRouter } from '@react-router/dev/vite';
+import { kbach } from '@kbach/react/vite'; // omit if not using static CSS
+export default { plugins: [kbach(), reactRouter()] };
+```
+Default scan dirs include `app/`. Library mode (client-only, no meta-framework Vite plugin involved) needs no special handling beyond the standard Vite setup above.
 
 ---
 
@@ -428,7 +434,7 @@ mx-auto   (centers element)
 ```
 
 Spacing scale (1 unit = 4px):
-`px(1) 0 0.5(2) 1(4) 1.5(6) 2(8) 2.5(10) 3(12) 3.5(14) 4(16) 5(20) 6(24) 7(28) 8(32) 9(36) 10(40) 11(44) 12(48) 14(56) 16(64) 20(80) 24(96) 28(112) 32(128) 36(144) 40(160) 44(176) 48(192) 52(208) 56(224) 60(240) 64(256) 72(288) 80(320) 96(384) auto full(100%) 1/2 1/3 2/3 1/4 3/4 screen(100vh) min max fit`
+`px(1) 0 0.5(2) 1(4) 1.5(6) 2(8) 2.5(10) 3(12) 3.5(14) 4(16) 5(20) 6(24) 7(28) 8(32) 9(36) 10(40) 11(44) 12(48) 14(56) 16(64) 20(80) 24(96) 28(112) 32(128) 36(144) 40(160) 44(176) 48(192) 52(208) 56(224) 60(240) 64(256) 72(288) 80(320) 96(384) auto full(100%) 1/2 1/3 2/3 1/4 3/4 screen(100dvh) min max fit`
 
 ### Sizing
 ```
@@ -437,7 +443,9 @@ w-{n}  h-{n}  size-{n}  min-w-{n}  min-h-{n}  max-w-{n}  max-h-{n}
 Named max-w: none xs(320) sm(384) md(448) lg(512) xl(576) 2xl(672) 3xl(768)
              4xl(896) 5xl(1024) 6xl(1152) 7xl(1280) prose(65ch)
 
-Screen:  w-screen(100vw)  h-screen(100vh)
+Screen (dvw/dvh — correct on mobile where browser chrome resizes the
+visible viewport; vw/vh are pinned to the largest viewport and overflow
+behind a shown address bar): w-screen(100dvw)  h-screen(100dvh)
          min-w-screen  max-w-screen  min-h-screen  max-h-screen
 ```
 
@@ -517,11 +525,15 @@ opacity-0/5/10/15/20/25/30/40/50/60/70/75/80/90/95/100
 ```
 
 ### Ring
+Web: box-shadow ring. Native: approximated via borderWidth/borderColor
+(no box-shadow on RN) — affects layout there and shares properties with
+`border-*` (last class wins if both are used). `ring-offset-*`/`ring-inset`
+stay web-only, with no native equivalent.
 ```
 ring / ring-{n}(0 1 2 4 8)
 ring-{color}
-ring-inset
-ring-offset-{n}(0 1 2 4 8)
+ring-inset            (web only)
+ring-offset-{n}(0 1 2 4 8)  (web only)
 ```
 
 ### Outline
@@ -624,6 +636,8 @@ aspect-auto / aspect-square / aspect-video / aspect-[4/3]
 columns-{n} / columns-auto / columns-{size}
 caret-{color} / caret-auto / caret-transparent
 accent-{color} / accent-auto
+stroke-{color} / stroke-{n} / stroke-none  (web only, SVG)
+fill-{color} / fill-none                    (web only, SVG)
 mix-blend-{mode}
 bg-blend-{mode}
 will-change-auto/scroll/contents/transform

package/package.json

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