@kbach/react 0.6.2 → 0.6.4

package/dist/jsx-dev-runtime.js

@@ -401,7 +401,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"
@@ -888,15 +891,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,
@@ -1155,12 +1162,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 },
@@ -2067,6 +2079,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" };
@@ -2286,34 +2325,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)";

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -402,7 +402,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"
@@ -889,15 +892,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,
@@ -1156,12 +1163,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 },
@@ -2068,6 +2080,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" };
@@ -2287,34 +2326,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)";

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-NWW57Q5Q.mjs";
+} from "./chunk-EU7RK3K4.mjs";
 import {
   registerWebElement
-} from "./chunk-GRZ6MVIL.mjs";
+} from "./chunk-SVPKCLOI.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -437,7 +437,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"
@@ -748,15 +751,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,
@@ -1015,12 +1022,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 },
@@ -1927,6 +1939,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" };
@@ -2146,34 +2185,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)";
@@ -3196,6 +3251,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.