@kbach/react 0.6.2 → 0.6.3

package/dist/{chunk-NWW57Q5Q.mjs → chunk-4A24NQ5X.mjs}

@@ -23,7 +23,7 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-GRZ6MVIL.mjs";
+} from "./chunk-ZZWJK33J.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-GRZ6MVIL.mjs → chunk-ZZWJK33J.mjs}

@@ -361,7 +361,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"
@@ -810,15 +813,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,
@@ -1077,12 +1084,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 },
@@ -2208,34 +2220,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/index.js

@@ -445,7 +445,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"
@@ -929,15 +932,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,
@@ -1196,12 +1203,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 },
@@ -2327,34 +2339,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/index.mjs

@@ -36,7 +36,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-GRZ6MVIL.mjs";
+} from "./chunk-ZZWJK33J.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

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 },
@@ -2286,34 +2298,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-4A24NQ5X.mjs";
+import "./chunk-ZZWJK33J.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 },
@@ -2287,34 +2299,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-4A24NQ5X.mjs";
 import {
   registerWebElement
-} from "./chunk-GRZ6MVIL.mjs";
+} from "./chunk-ZZWJK33J.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 },
@@ -2146,34 +2158,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/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 },
@@ -2112,34 +2124,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/kbach-react.md

@@ -428,7 +428,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 +437,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 +519,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

package/package.json

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