@kbach/react 0.6.2 → 0.6.4

package/README.md

@@ -20,9 +20,11 @@ npm install @kbach/react
 
 ## Setup
 
+Two steps, and you're done — styles work immediately via runtime CSS injection, no build plugin required:
+
 ### 1. Configure the JSX runtime
 
-**tsconfig.json**
+**tsconfig.json** (works for Vite, Next.js, React Router, and most other tooling — it's the one setting that everything reads):
 
 ```json
 {
@@ -33,121 +35,85 @@ npm install @kbach/react
 }
 ```
 
-Or per-file (no config change needed):
+Don't also pass `jsxImportSource` to `@vitejs/plugin-react` (or any other bundler plugin) unless you have a specific reason to — the tsconfig setting alone is enough, and pointing two different places at the JSX runtime is a common source of "it's not applying" confusion (or, worse, plugin conflicts — see the React Router note below).
 
-```js
-/** @jsxImportSource @kbach/react */
-```
+Alternatives if you can't use tsconfig: a per-file `/** @jsxImportSource @kbach/react */` pragma comment, or `['@babel/preset-react', { runtime: 'automatic', importSource: '@kbach/react' }]` in `babel.config.js` for non-Vite/non-SWC toolchains.
 
-**Babel (non-Vite)**
+### 2. Wrap your app
 
-```js
-// babel.config.js
-module.exports = {
-  presets: [
-    ['@babel/preset-react', { runtime: 'automatic', importSource: '@kbach/react' }],
-  ],
-};
+```jsx
+import { ThemeProvider } from '@kbach/react';
+
+export default function Root() {
+  return (
+    <ThemeProvider defaultMode="system">
+      <App />
+    </ThemeProvider>
+  );
+}
 ```
 
-### 2. Add the Vite plugin
+That's the whole setup. `@kbach/react` ships its own `"use client"` directive, so this works directly in a Next.js App Router Server Component tree too — no manual client wrapper needed.
 
-`@kbach/react` doesn't bundle a React plugin for Vite — if your project doesn't already have one, install it first:
+### Optional: static CSS for production (Vite only)
 
-```
-npm install -D vite @vitejs/plugin-react
-```
+By default, styles are generated and injected into a `<style>` tag by client-side JS at runtime — simple, but it means server-rendered HTML has no matching CSS until hydration runs (a brief flash of unstyled content on first paint). If you're on a Vite-based project and want zero-runtime-cost CSS instead, add the `@kbach/react/vite` plugin:
 
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 import { kbach } from '@kbach/react/vite';
 
 export default defineConfig({
   plugins: [
-    react({ jsxImportSource: '@kbach/react' }),
+    // ...your framework's own plugin(s) — see the framework notes below
+    // before adding @vitejs/plugin-react yourself.
     kbach(),
   ],
 });
 ```
 
-The plugin scans your source files and writes generated CSS between `/* kbach:start */` / `/* kbach:end */` markers inside any `kbach.css` file it finds in your project. On HMR only the changed file is rescanned — unchanged tokens reuse cached CSS.
-
-### 3. Create and import kbach.css
-
-Create `kbach.css` anywhere in your project (e.g. `src/kbach.css`):
+Then create an empty `kbach.css` anywhere in your project and import it once in your app entry:
 
 ```css
+/* src/kbach.css */
 /* kbach:start */
 /* kbach:end */
 ```
 
-Import it in your app entry:
-
 ```ts
 // main.tsx
 import './kbach.css';
 ```
 
-Importing `kbach.css` automatically disables runtime style injection — all styles come from the CSS file instead.
-
-### 4. Wrap your app
-
-```jsx
-import { ThemeProvider } from '@kbach/react';
-
-export default function Root() {
-  return (
-    <ThemeProvider defaultMode="system">
-      <App />
-    </ThemeProvider>
-  );
-}
-```
+The plugin scans your source files and writes generated CSS between the `/* kbach:start */`/`/* kbach:end */` markers. Importing `kbach.css` automatically disables runtime injection — all styles come from the file instead. On HMR, only the changed file is rescanned; unchanged tokens reuse cached CSS.
 
 ## Next.js
 
-Steps 1 and 4 above apply as-is — the JSX runtime setup works via `jsxImportSource` in `tsconfig.json` (Next.js's SWC compiler reads it the same way Vite does), and `ThemeProvider` wraps your app the same way.
-
-Two things differ from the Vite setup:
+Step 1 (tsconfig `jsxImportSource`) and step 2 (`ThemeProvider`) above apply as-is — Next.js's SWC compiler reads `jsxImportSource` from `tsconfig.json` the same way Vite does, and `@kbach/react` shipping its own `"use client"` directive means `ThemeProvider` works directly in a Server Component tree (e.g. the App Router root `layout.tsx`) with no wrapper of your own needed.
 
-**No Vite plugin, no static `kbach.css`.** Next.js builds with webpack/Turbopack, not Vite, so step 2/3 (the `@kbach/react/vite` plugin) don't apply — there's currently no static-CSS build step for Next.js. Styles fall back to runtime injection (the same mechanism used automatically when no `kbach.css` is imported). This works, but since the injection only runs in the browser (there's no `document` during the server render), server-rendered HTML has classes with no matching CSS yet — expect a brief flash of unstyled content on first paint before hydration completes and injects the rules. This is a known limitation, not a bug to work around per-project.
+The "Optional: static CSS" step above doesn't apply — Next.js builds with webpack/Turbopack, not Vite, so there's currently no static-CSS build step for it. Styles fall back to runtime injection, which means the same first-paint FOUC note above applies: expect a brief flash of unstyled content before hydration completes. This is a known limitation, not a per-project bug to work around.
 
-**`ThemeProvider` needs a `'use client'` boundary.** `@kbach/react` doesn't ship the `'use client'` directive in its build output, so importing `ThemeProvider` directly into a Server Component (e.g. the App Router root `layout.tsx`, which is a Server Component by default) will fail. Wrap it in your own client component once:
+## React Router
 
-```tsx
-// app/providers.tsx
-'use client';
-import { ThemeProvider } from '@kbach/react';
+**Framework mode (v7+, SSR by default):** `@react-router/dev`'s own `reactRouter()` Vite plugin already includes its own React JSX transform and Fast Refresh integration — **do not also add `@vitejs/plugin-react`.** Having both active makes each one inject its own Fast Refresh preamble into the same module, which crashes the page at runtime (`Identifier 'RefreshRuntime' has already been declared`) before React ever hydrates — every class on the page will silently fail to style because the app never actually mounts. The correct setup is just:
 
-export function Providers({ children }: { children: React.ReactNode }) {
-  return <ThemeProvider defaultMode="system">{children}</ThemeProvider>;
-}
-```
-
-```tsx
-// app/layout.tsx (Server Component — no 'use client' needed here)
-import { Providers } from './providers';
+```ts
+// vite.config.ts
+import { reactRouter } from '@react-router/dev/vite';
+import { defineConfig } from 'vite';
+import { kbach } from '@kbach/react/vite'; // omit if you're not using static CSS
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <Providers>{children}</Providers>
-      </body>
-    </html>
-  );
-}
+export default defineConfig({
+  plugins: [kbach(), reactRouter()],
+});
 ```
 
-This is the standard pattern for any hook-using npm package that predates the App Router — the same workaround is needed for many other UI libraries.
-
-## React Router
+`jsxImportSource` in `tsconfig.json` (step 1 above) is all that's needed for the JSX runtime — React Router's Vite plugin reads it the same way plain Vite does. `include`'s default scan dirs (`['src', 'app', 'pages', 'components', 'views', 'layouts']`) already cover React Router's `app/` routes convention if you're using the static-CSS plugin.
 
-**Framework mode (v7, SSR by default):** works with the same Vite-based setup as above — framework mode builds with Vite under the hood, so the `@kbach/react/vite` plugin runs normally. `include` defaults to `['src', 'app', 'pages', 'components', 'views', 'layouts']`, which already covers React Router's `app/` routes convention. Because the static `kbach.css` approach ships real CSS (not runtime JS injection), there's no FOUC concern for server-rendered routes the way there is with Next.js.
+If you do add `kbach()` to `vite.config.ts` and it detects both plugins active together, it prints a warning explaining exactly this at dev-server startup — so this doesn't have to be a silent, hard-to-diagnose blank page.
 
-**Library mode (client-only, `createBrowserRouter`/`<BrowserRouter>`):** no SSR involved — set it up exactly like any other Vite + React app per the steps above.
+**Library mode (client-only, `createBrowserRouter`/`<BrowserRouter>`):** no SSR involved — set it up exactly like any other Vite + React app. Since there's no meta-framework Vite plugin providing JSX handling here, you likely do need `@vitejs/plugin-react({ jsxImportSource: '@kbach/react' })` (or rely on tsconfig alone — Vite's default esbuild-based transform reads it too).
 
 ## API
 

package/dist/{chunk-NWW57Q5Q.mjs → chunk-EU7RK3K4.mjs}

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

package/dist/{chunk-GRZ6MVIL.mjs → chunk-SVPKCLOI.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 },
@@ -1989,6 +2001,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" };
@@ -2208,34 +2247,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 },
@@ -2108,6 +2120,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" };
@@ -2327,34 +2366,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-SVPKCLOI.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";