@kbach/react 0.6.1 → 0.6.3

package/dist/index.d.mts

@@ -1,9 +1,137 @@
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-BESBQANS.mjs';
-export { d as PluginAPI } from './types-BESBQANS.mjs';
 export { r as registerWebElement } from './web-substitute-CfpYFnE7.mjs';
 
+/**
+ * Unified modifier registry — single source of truth for ALL modifier behavior.
+ *
+ * Adding a new modifier requires editing ONLY this file:
+ *   1. Add an entry to BUILTIN_MODIFIERS with its CSS and JS behavior.
+ *   2. Done — parser, resolver, CSS generator, and JSX runtime all derive
+ *      their behavior from this data automatically.
+ *
+ * Plugin authors can register custom modifiers via registerModifier().
+ */
+interface ModifierDef {
+    /** CSS pseudo-class or pseudo-element appended to the selector (e.g. ':hover', '::before') */
+    pseudo?: string;
+    /** Ancestor selector prefix INCLUDING trailing space (e.g. '.group:hover ', '.peer:focus ~ ') */
+    ancestorSelector?: string;
+    /** Directionality attribute selector prefix INCLUDING trailing space (e.g. '[dir="rtl"] ') */
+    dirSelector?: string;
+    /** @media query body WITHOUT the '@media ' prefix (e.g. 'print', '(orientation: landscape)') */
+    mediaQuery?: string;
+    /** Dark/light mode scheme — triggers the configured darkMode strategy in CSS output */
+    darkScheme?: 'dark' | 'light';
+    /** True for responsive modifiers — wraps in @media (min-width: theme.screens[name]) */
+    isResponsive?: boolean;
+    /**
+     * Forces !important on all declarations in the generated CSS rule.
+     * Applied automatically for structural / ancestor / media modifiers that must
+     * win over base inline styles.
+     */
+    forcesImportant?: boolean;
+    /**
+     * How the JSX runtime routes this modifier:
+     *   'interactive'  — managed by InteractiveWrapper (hover, focus, pressed, …)
+     *   'mode'         — managed by DarkWrapper (dark, light, not-dark, …)
+     *   'responsive'   — managed by DarkWrapper (sm, md, lg, xl, 2xl)
+     *   'css-only'     — CSS injection only; matchModifier always returns false
+     */
+    jsBehavior: 'interactive' | 'mode' | 'responsive' | 'css-only';
+    /**
+     * Evaluates whether this modifier's condition is met at runtime.
+     * Omit for 'css-only' modifiers — they never apply as inline styles.
+     */
+    jsMatch?: (isDark: boolean, state: Record<string, boolean | undefined>, breakpoints: Set<string>) => boolean;
+}
+
+type ThemeMode = 'light' | 'dark' | 'system';
+interface StyleValue {
+    [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
+}
+interface ParsedClass {
+    /** The original class string, e.g. "dark:hover:bg-[#fff]" */
+    original: string;
+    /** Up to 3 modifier prefixes, e.g. ['dark', 'hover'] */
+    modifiers: string[];
+    /** Whether a leading `-` was present for negative values */
+    negative: boolean;
+    /** Whether a leading `!` was present — applies !important to all CSS declarations */
+    important: boolean;
+    /** The utility name, e.g. 'bg', 'p', 'text' */
+    utility: string;
+    /** The resolved value, e.g. 'white', '#fff', '4' */
+    value: string;
+    /** Whether the value was specified with bracket notation [value] */
+    isArbitrary: boolean;
+}
+interface ResolvedStyle {
+    /** Base styles applied unconditionally */
+    base?: StyleValue;
+    /** Styles keyed by modifier or modifier combo, e.g. 'dark', 'hover', 'dark:hover' */
+    [modifierKey: string]: StyleValue | undefined;
+}
+type ColorShades = Record<string, string>;
+type ThemeColors = Record<string, string | ColorShades>;
+type ThemeSpacing = Record<string, number | string>;
+interface ThemeConfig {
+    colors: ThemeColors;
+    spacing: ThemeSpacing;
+    fontSize: Record<string, number | string>;
+    fontFamily: Record<string, string | string[]>;
+    fontWeight: Record<string, string | number>;
+    borderRadius: Record<string, number | string>;
+    borderWidth: Record<string, number>;
+    opacity: Record<string, number>;
+    lineHeight: Record<string, number | string>;
+    letterSpacing: Record<string, number | string>;
+    zIndex: Record<string, number | string>;
+    flex: Record<string, number | string>;
+    shadow: Record<string, StyleValue>;
+    screens: Record<string, string | number>;
+    [key: string]: unknown;
+}
+/**
+ * 'class'     — toggles .dark class on <html>
+ * 'media'     — uses prefers-color-scheme media query
+ * 'attribute' — uses data-theme="dark" attribute on <html>
+ */
+type DarkMode = 'attribute' | 'class' | 'media';
+interface PluginAPI {
+    addUtility(name: string, styles: StyleValue): void;
+    /**
+     * Register a custom variant.
+     *
+     * Pass a CSS selector string for simple cases — it is automatically
+     * converted into a ModifierDef that generates correct CSS rules:
+     *   addVariant('hocus', ':hover, :focus')  // pseudo
+     *   addVariant('supports-grid', '@media (display: grid)')  // media
+     *   addVariant('dark-green', '.dark-green')  // ancestor selector
+     *
+     * Pass a full ModifierDef object for advanced control (e.g. JS-trackable
+     * interactive variants with custom jsMatch logic).
+     */
+    addVariant(name: string, selectorOrDef: string | ModifierDef): void;
+    theme(path: string, defaultValue?: unknown): unknown;
+    e(className: string): string;
+}
+interface FrameworkConfig {
+    darkMode?: DarkMode;
+    theme?: Partial<ThemeConfig>;
+    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
+    extend?: {
+        theme?: Partial<ThemeConfig>;
+    } & Partial<ThemeConfig>;
+    plugins?: Array<(api: PluginAPI) => void>;
+    content?: string[];
+}
+interface ResolvedConfig {
+    darkMode: DarkMode;
+    theme: ThemeConfig;
+    plugins: Array<(api: PluginAPI) => void>;
+}
+
 declare const defaultColors: ThemeColors;
 declare const defaultTheme: ThemeConfig;
 
@@ -289,4 +417,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.d.ts

@@ -1,9 +1,137 @@
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
-import { T as ThemeColors, a as ThemeConfig, P as ParsedClass, R as ResolvedStyle, S as StyleValue, F as FrameworkConfig, b as ResolvedConfig, c as ThemeMode } from './types-BESBQANS.js';
-export { d as PluginAPI } from './types-BESBQANS.js';
 export { r as registerWebElement } from './web-substitute-CfpYFnE7.js';
 
+/**
+ * Unified modifier registry — single source of truth for ALL modifier behavior.
+ *
+ * Adding a new modifier requires editing ONLY this file:
+ *   1. Add an entry to BUILTIN_MODIFIERS with its CSS and JS behavior.
+ *   2. Done — parser, resolver, CSS generator, and JSX runtime all derive
+ *      their behavior from this data automatically.
+ *
+ * Plugin authors can register custom modifiers via registerModifier().
+ */
+interface ModifierDef {
+    /** CSS pseudo-class or pseudo-element appended to the selector (e.g. ':hover', '::before') */
+    pseudo?: string;
+    /** Ancestor selector prefix INCLUDING trailing space (e.g. '.group:hover ', '.peer:focus ~ ') */
+    ancestorSelector?: string;
+    /** Directionality attribute selector prefix INCLUDING trailing space (e.g. '[dir="rtl"] ') */
+    dirSelector?: string;
+    /** @media query body WITHOUT the '@media ' prefix (e.g. 'print', '(orientation: landscape)') */
+    mediaQuery?: string;
+    /** Dark/light mode scheme — triggers the configured darkMode strategy in CSS output */
+    darkScheme?: 'dark' | 'light';
+    /** True for responsive modifiers — wraps in @media (min-width: theme.screens[name]) */
+    isResponsive?: boolean;
+    /**
+     * Forces !important on all declarations in the generated CSS rule.
+     * Applied automatically for structural / ancestor / media modifiers that must
+     * win over base inline styles.
+     */
+    forcesImportant?: boolean;
+    /**
+     * How the JSX runtime routes this modifier:
+     *   'interactive'  — managed by InteractiveWrapper (hover, focus, pressed, …)
+     *   'mode'         — managed by DarkWrapper (dark, light, not-dark, …)
+     *   'responsive'   — managed by DarkWrapper (sm, md, lg, xl, 2xl)
+     *   'css-only'     — CSS injection only; matchModifier always returns false
+     */
+    jsBehavior: 'interactive' | 'mode' | 'responsive' | 'css-only';
+    /**
+     * Evaluates whether this modifier's condition is met at runtime.
+     * Omit for 'css-only' modifiers — they never apply as inline styles.
+     */
+    jsMatch?: (isDark: boolean, state: Record<string, boolean | undefined>, breakpoints: Set<string>) => boolean;
+}
+
+type ThemeMode = 'light' | 'dark' | 'system';
+interface StyleValue {
+    [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
+}
+interface ParsedClass {
+    /** The original class string, e.g. "dark:hover:bg-[#fff]" */
+    original: string;
+    /** Up to 3 modifier prefixes, e.g. ['dark', 'hover'] */
+    modifiers: string[];
+    /** Whether a leading `-` was present for negative values */
+    negative: boolean;
+    /** Whether a leading `!` was present — applies !important to all CSS declarations */
+    important: boolean;
+    /** The utility name, e.g. 'bg', 'p', 'text' */
+    utility: string;
+    /** The resolved value, e.g. 'white', '#fff', '4' */
+    value: string;
+    /** Whether the value was specified with bracket notation [value] */
+    isArbitrary: boolean;
+}
+interface ResolvedStyle {
+    /** Base styles applied unconditionally */
+    base?: StyleValue;
+    /** Styles keyed by modifier or modifier combo, e.g. 'dark', 'hover', 'dark:hover' */
+    [modifierKey: string]: StyleValue | undefined;
+}
+type ColorShades = Record<string, string>;
+type ThemeColors = Record<string, string | ColorShades>;
+type ThemeSpacing = Record<string, number | string>;
+interface ThemeConfig {
+    colors: ThemeColors;
+    spacing: ThemeSpacing;
+    fontSize: Record<string, number | string>;
+    fontFamily: Record<string, string | string[]>;
+    fontWeight: Record<string, string | number>;
+    borderRadius: Record<string, number | string>;
+    borderWidth: Record<string, number>;
+    opacity: Record<string, number>;
+    lineHeight: Record<string, number | string>;
+    letterSpacing: Record<string, number | string>;
+    zIndex: Record<string, number | string>;
+    flex: Record<string, number | string>;
+    shadow: Record<string, StyleValue>;
+    screens: Record<string, string | number>;
+    [key: string]: unknown;
+}
+/**
+ * 'class'     — toggles .dark class on <html>
+ * 'media'     — uses prefers-color-scheme media query
+ * 'attribute' — uses data-theme="dark" attribute on <html>
+ */
+type DarkMode = 'attribute' | 'class' | 'media';
+interface PluginAPI {
+    addUtility(name: string, styles: StyleValue): void;
+    /**
+     * Register a custom variant.
+     *
+     * Pass a CSS selector string for simple cases — it is automatically
+     * converted into a ModifierDef that generates correct CSS rules:
+     *   addVariant('hocus', ':hover, :focus')  // pseudo
+     *   addVariant('supports-grid', '@media (display: grid)')  // media
+     *   addVariant('dark-green', '.dark-green')  // ancestor selector
+     *
+     * Pass a full ModifierDef object for advanced control (e.g. JS-trackable
+     * interactive variants with custom jsMatch logic).
+     */
+    addVariant(name: string, selectorOrDef: string | ModifierDef): void;
+    theme(path: string, defaultValue?: unknown): unknown;
+    e(className: string): string;
+}
+interface FrameworkConfig {
+    darkMode?: DarkMode;
+    theme?: Partial<ThemeConfig>;
+    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
+    extend?: {
+        theme?: Partial<ThemeConfig>;
+    } & Partial<ThemeConfig>;
+    plugins?: Array<(api: PluginAPI) => void>;
+    content?: string[];
+}
+interface ResolvedConfig {
+    darkMode: DarkMode;
+    theme: ThemeConfig;
+    plugins: Array<(api: PluginAPI) => void>;
+}
+
 declare const defaultColors: ThemeColors;
 declare const defaultTheme: ThemeConfig;
 
@@ -289,4 +417,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, type FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, type ParsedClass, type PluginAPI, type ResolvedConfig, type ResolvedStyle, type StyleValue, type StyledProps, type ThemeConfig, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -444,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"
@@ -928,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,
@@ -1195,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 },
@@ -2326,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

@@ -1,21 +1,9 @@
+'use client';
 import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
-  chain,
-  getWebTag,
-  hasInteractiveBuckets,
-  hasResponsiveBuckets,
-  registerWebElement,
-  setGlobalDarkMode,
-  syncGlobalDarkMode,
-  transformToWebProps,
-  useConditionalWidth,
-  useGlobalDarkMode,
-  useGlobalWidth,
-  useSyncExternalStore
-} from "./chunk-36QRQNPL.mjs";
-import {
   buildConfig,
+  chain,
   clearCache,
   defaultColors,
   defaultTheme,
@@ -23,6 +11,9 @@ import {
   flatten,
   getActiveBreakpoints,
   getConfig,
+  getWebTag,
+  hasInteractiveBuckets,
+  hasResponsiveBuckets,
   initConfig,
   isWeb,
   normalizeClassString,
@@ -30,14 +21,22 @@ import {
   parseClass,
   parseClasses,
   parseHexRgb,
+  registerWebElement,
   resolve,
+  setGlobalDarkMode,
   setGlobalWidth,
   setResolveTarget,
   splitClassTokens,
+  syncGlobalDarkMode,
   syncGlobalScreens,
   syncGlobalWidth,
-  updateConfig
-} from "./chunk-MPHPB357.mjs";
+  transformToWebProps,
+  updateConfig,
+  useConditionalWidth,
+  useGlobalDarkMode,
+  useGlobalWidth,
+  useSyncExternalStore
+} from "./chunk-ZZWJK33J.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -400,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"
@@ -887,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,
@@ -1154,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 },
@@ -2285,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

@@ -1,10 +1,10 @@
+'use client';
 import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-6ZORO3BP.mjs";
-import "./chunk-36QRQNPL.mjs";
-import "./chunk-MPHPB357.mjs";
+} from "./chunk-4A24NQ5X.mjs";
+import "./chunk-ZZWJK33J.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {