@kbach/ui 0.1.0-beta.1 → 0.1.0-beta.2

package/KBACH.md

@@ -625,8 +625,9 @@ rounded-tl/tr/bl/br border radius on one corner
 
 ### Shadow
 ```
-shadow-sm/DEFAULT/md/lg/xl/2xl/none
+shadow-sm/DEFAULT/md/lg/xl/2xl/inner/none
 ```
+Web: real `box-shadow` (Tailwind's own default values). Native: RN's shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation, tuned independently for RN's elevation model — not derived from the web value. `shadow-inner` is web-only (no native inset-shadow equivalent). Customize/add sizes via `theme.extend.shadow` — each preset key merges independently (see Theme Configuration below).
 
 ### Opacity
 ```
@@ -906,6 +907,14 @@ module.exports = {
       colors: { brand: { 6: '#6366f1' } },
       spacing: { 18: 72, 22: 88 },
       fontSize: { '10xl': 160 },
+      // Each preset key merges independently — overriding lg's boxShadow
+      // (the web value) leaves its native shadowColor/shadowOffset/etc.
+      // untouched, and a brand-new key (e.g. '3xl') adds a new shadow-3xl
+      // utility alongside the defaults.
+      shadow: {
+        lg: { boxShadow: '0 10px 40px -10px rgba(99, 102, 241, 0.4)' },
+        '3xl': { boxShadow: '0 35px 60px -15px rgba(0, 0, 0, 0.3)' },
+      },
       // Custom @keyframes (web only) — declaration values are plain CSS strings.
       // Reference by name from `animation`, then use that name as animate-{name}.
       keyframes: {

package/dist/{chunk-VBK6ORYJ.mjs → chunk-LY753XBX.mjs}

@@ -25,7 +25,10 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  const escaped = cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  if (!/^[0-9]/.test(escaped)) return escaped;
+  const hex = escaped.charCodeAt(0).toString(16);
+  return `\\${hex} ${escaped.slice(1)}`;
 }
 
 // src/core/devWarn.ts
@@ -1863,9 +1866,23 @@ var effectResolvers = {
     return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
   },
   // ── Shadow ─────────────────────────────────────────────────────────────────
+  // Presets carry BOTH a web `boxShadow` string and native's shadow*/elevation
+  // properties (theme.ts) — picked apart here rather than left for
+  // styleValueToCSS's RN_ONLY_PROPS filter to sort out, since shadowOffset is
+  // an object (filtered out as "not a flat style value" regardless of
+  // platform) and boxShadow would otherwise leak into native's style prop as
+  // an RN doesn't understand (silently ignored there, but better to not hand
+  // native a property that was never meant for it — same branch-on-platform
+  // pattern as bg-opacity/transition/animate above).
   shadow: ({ value }, { shadow }) => {
     const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
+    const preset = shadow[key];
+    if (!preset) return null;
+    if (getEffectiveIsWeb()) {
+      return preset.boxShadow !== void 0 ? { boxShadow: preset.boxShadow } : null;
+    }
+    const { boxShadow, ...native } = preset;
+    return Object.keys(native).length > 0 ? native : null;
   },
   // ── Animations (CSS keyframe animations, web-only) ────────────────────────
   // Each variant injects a @keyframes rule once via the __keyframe marker.
@@ -2744,55 +2761,78 @@ var defaultTheme = {
     none: "none"
     // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
+  // Each preset carries BOTH React Native's shadow*/elevation properties
+  // (used on native) and a `boxShadow` string (used on web) — see the
+  // `shadow` resolver in resolvers/effects.ts, which picks one or the other
+  // via getEffectiveIsWeb() and strips the rest. The boxShadow values are
+  // Tailwind's own default shadow scale verbatim (same offsets/blur/spread/
+  // opacity), so shadow-sm/md/lg/xl/2xl look the same as their Tailwind
+  // counterparts on web — the native shadowOffset/shadowRadius/shadowOpacity
+  // numbers were tuned independently for RN's elevation model and don't need
+  // to (and can't exactly) match the CSS values pixel-for-pixel.
   shadow: {
     sm: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 1 },
       shadowOpacity: 0.05,
       shadowRadius: 2,
-      elevation: 1
+      elevation: 1,
+      boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
     },
     DEFAULT: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.1,
       shadowRadius: 4,
-      elevation: 2
+      elevation: 2,
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
     },
     md: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 4 },
       shadowOpacity: 0.1,
       shadowRadius: 8,
-      elevation: 3
+      elevation: 3,
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
     },
     lg: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 8 },
       shadowOpacity: 0.1,
       shadowRadius: 15,
-      elevation: 4
+      elevation: 4,
+      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
     },
     xl: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 16 },
       shadowOpacity: 0.1,
       shadowRadius: 24,
-      elevation: 6
+      elevation: 6,
+      boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
     },
     "2xl": {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 24 },
       shadowOpacity: 0.25,
       shadowRadius: 48,
-      elevation: 8
+      elevation: 8,
+      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+    },
+    // Web-only — React Native has no inset-shadow equivalent (shadow*/
+    // elevation only ever draw an outer shadow), so the native side of this
+    // preset is intentionally empty rather than approximating something RN
+    // can't actually do.
+    inner: {
+      boxShadow: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
     },
     none: {
       shadowColor: "transparent",
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0,
       shadowRadius: 0,
-      elevation: 0
+      elevation: 0,
+      boxShadow: "0 0 #0000"
     }
   },
   screens: {

package/dist/{chunk-KHTZ244V.mjs → chunk-UVXTWGHQ.mjs}

@@ -26,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-VBK6ORYJ.mjs";
+} from "./chunk-LY753XBX.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/core/index.d.ts

@@ -1073,6 +1073,7 @@ declare const defaultTheme: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
+            boxShadow: string;
         };
         DEFAULT: {
             shadowColor: string;
@@ -1083,6 +1084,7 @@ declare const defaultTheme: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
+            boxShadow: string;
         };
         md: {
             shadowColor: string;
@@ -1093,6 +1095,7 @@ declare const defaultTheme: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
+            boxShadow: string;
         };
         lg: {
             shadowColor: string;
@@ -1103,6 +1106,7 @@ declare const defaultTheme: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
+            boxShadow: string;
         };
         xl: {
             shadowColor: string;
@@ -1113,6 +1117,7 @@ declare const defaultTheme: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
+            boxShadow: string;
         };
         '2xl': {
             shadowColor: string;
@@ -1123,6 +1128,10 @@ declare const defaultTheme: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
+            boxShadow: string;
+        };
+        inner: {
+            boxShadow: string;
         };
         none: {
             shadowColor: string;
@@ -1133,6 +1142,7 @@ declare const defaultTheme: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
+            boxShadow: string;
         };
     };
     screens: {
@@ -1184,6 +1194,15 @@ declare function toNativeValue(raw: string): string | number;
 /**
  * Escape a class name for use inside a CSS selector.
  * e.g. 'bg-[#fff]'  →  'bg-\\[\\#fff\\]'
+ *
+ * Also escapes a leading digit: a CSS identifier can't start with an
+ * unescaped digit — `.2xl\:text-lg { ... }` is invalid CSS and every browser
+ * silently fails to match it, which is exactly what happens for a screen/
+ * breakpoint literally named "2xl" (or any other numeric-leading class).
+ * Escaped per the CSS spec — a backslash plus the character's hex code
+ * point, followed by one space to terminate the hex escape (always safe to
+ * include, and needed here since "2xl"'s next character "x" isn't itself a
+ * hex digit that could otherwise be read as part of the escape by mistake).
  */
 declare function escapeCSSSelector(cls: string): string;
 

package/dist/core/index.js

@@ -126,7 +126,10 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  const escaped = cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  if (!/^[0-9]/.test(escaped)) return escaped;
+  const hex = escaped.charCodeAt(0).toString(16);
+  return `\\${hex} ${escaped.slice(1)}`;
 }
 
 // src/core/devWarn.ts
@@ -1958,9 +1961,23 @@ var effectResolvers = {
     return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
   },
   // ── Shadow ─────────────────────────────────────────────────────────────────
+  // Presets carry BOTH a web `boxShadow` string and native's shadow*/elevation
+  // properties (theme.ts) — picked apart here rather than left for
+  // styleValueToCSS's RN_ONLY_PROPS filter to sort out, since shadowOffset is
+  // an object (filtered out as "not a flat style value" regardless of
+  // platform) and boxShadow would otherwise leak into native's style prop as
+  // an RN doesn't understand (silently ignored there, but better to not hand
+  // native a property that was never meant for it — same branch-on-platform
+  // pattern as bg-opacity/transition/animate above).
   shadow: ({ value }, { shadow }) => {
     const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
+    const preset = shadow[key];
+    if (!preset) return null;
+    if (getEffectiveIsWeb()) {
+      return preset.boxShadow !== void 0 ? { boxShadow: preset.boxShadow } : null;
+    }
+    const { boxShadow, ...native } = preset;
+    return Object.keys(native).length > 0 ? native : null;
   },
   // ── Animations (CSS keyframe animations, web-only) ────────────────────────
   // Each variant injects a @keyframes rule once via the __keyframe marker.
@@ -2839,55 +2856,78 @@ var defaultTheme = {
     none: "none"
     // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
+  // Each preset carries BOTH React Native's shadow*/elevation properties
+  // (used on native) and a `boxShadow` string (used on web) — see the
+  // `shadow` resolver in resolvers/effects.ts, which picks one or the other
+  // via getEffectiveIsWeb() and strips the rest. The boxShadow values are
+  // Tailwind's own default shadow scale verbatim (same offsets/blur/spread/
+  // opacity), so shadow-sm/md/lg/xl/2xl look the same as their Tailwind
+  // counterparts on web — the native shadowOffset/shadowRadius/shadowOpacity
+  // numbers were tuned independently for RN's elevation model and don't need
+  // to (and can't exactly) match the CSS values pixel-for-pixel.
   shadow: {
     sm: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 1 },
       shadowOpacity: 0.05,
       shadowRadius: 2,
-      elevation: 1
+      elevation: 1,
+      boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
     },
     DEFAULT: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.1,
       shadowRadius: 4,
-      elevation: 2
+      elevation: 2,
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
     },
     md: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 4 },
       shadowOpacity: 0.1,
       shadowRadius: 8,
-      elevation: 3
+      elevation: 3,
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
     },
     lg: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 8 },
       shadowOpacity: 0.1,
       shadowRadius: 15,
-      elevation: 4
+      elevation: 4,
+      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
     },
     xl: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 16 },
       shadowOpacity: 0.1,
       shadowRadius: 24,
-      elevation: 6
+      elevation: 6,
+      boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
     },
     "2xl": {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 24 },
       shadowOpacity: 0.25,
       shadowRadius: 48,
-      elevation: 8
+      elevation: 8,
+      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+    },
+    // Web-only — React Native has no inset-shadow equivalent (shadow*/
+    // elevation only ever draw an outer shadow), so the native side of this
+    // preset is intentionally empty rather than approximating something RN
+    // can't actually do.
+    inner: {
+      boxShadow: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
     },
     none: {
       shadowColor: "transparent",
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0,
       shadowRadius: 0,
-      elevation: 0
+      elevation: 0,
+      boxShadow: "0 0 #0000"
     }
   },
   screens: {

package/dist/index.mjs

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

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-KHTZ244V.mjs";
+} from "./chunk-UVXTWGHQ.mjs";
 import {
   registerWebElement
-} from "./chunk-VBK6ORYJ.mjs";
+} from "./chunk-LY753XBX.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -57,7 +57,10 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  const escaped = cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  if (!/^[0-9]/.test(escaped)) return escaped;
+  const hex = escaped.charCodeAt(0).toString(16);
+  return `\\${hex} ${escaped.slice(1)}`;
 }
 
 // src/core/reset.ts
@@ -589,55 +592,78 @@ var defaultTheme = {
     none: "none"
     // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
+  // Each preset carries BOTH React Native's shadow*/elevation properties
+  // (used on native) and a `boxShadow` string (used on web) — see the
+  // `shadow` resolver in resolvers/effects.ts, which picks one or the other
+  // via getEffectiveIsWeb() and strips the rest. The boxShadow values are
+  // Tailwind's own default shadow scale verbatim (same offsets/blur/spread/
+  // opacity), so shadow-sm/md/lg/xl/2xl look the same as their Tailwind
+  // counterparts on web — the native shadowOffset/shadowRadius/shadowOpacity
+  // numbers were tuned independently for RN's elevation model and don't need
+  // to (and can't exactly) match the CSS values pixel-for-pixel.
   shadow: {
     sm: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 1 },
       shadowOpacity: 0.05,
       shadowRadius: 2,
-      elevation: 1
+      elevation: 1,
+      boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
     },
     DEFAULT: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.1,
       shadowRadius: 4,
-      elevation: 2
+      elevation: 2,
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
     },
     md: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 4 },
       shadowOpacity: 0.1,
       shadowRadius: 8,
-      elevation: 3
+      elevation: 3,
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
     },
     lg: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 8 },
       shadowOpacity: 0.1,
       shadowRadius: 15,
-      elevation: 4
+      elevation: 4,
+      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
     },
     xl: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 16 },
       shadowOpacity: 0.1,
       shadowRadius: 24,
-      elevation: 6
+      elevation: 6,
+      boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
     },
     "2xl": {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 24 },
       shadowOpacity: 0.25,
       shadowRadius: 48,
-      elevation: 8
+      elevation: 8,
+      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+    },
+    // Web-only — React Native has no inset-shadow equivalent (shadow*/
+    // elevation only ever draw an outer shadow), so the native side of this
+    // preset is intentionally empty rather than approximating something RN
+    // can't actually do.
+    inner: {
+      boxShadow: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
     },
     none: {
       shadowColor: "transparent",
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0,
       shadowRadius: 0,
-      elevation: 0
+      elevation: 0,
+      boxShadow: "0 0 #0000"
     }
   },
   screens: {
@@ -2298,9 +2324,23 @@ var effectResolvers = {
     return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
   },
   // ── Shadow ─────────────────────────────────────────────────────────────────
+  // Presets carry BOTH a web `boxShadow` string and native's shadow*/elevation
+  // properties (theme.ts) — picked apart here rather than left for
+  // styleValueToCSS's RN_ONLY_PROPS filter to sort out, since shadowOffset is
+  // an object (filtered out as "not a flat style value" regardless of
+  // platform) and boxShadow would otherwise leak into native's style prop as
+  // an RN doesn't understand (silently ignored there, but better to not hand
+  // native a property that was never meant for it — same branch-on-platform
+  // pattern as bg-opacity/transition/animate above).
   shadow: ({ value }, { shadow }) => {
     const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
+    const preset = shadow[key];
+    if (!preset) return null;
+    if (getEffectiveIsWeb()) {
+      return preset.boxShadow !== void 0 ? { boxShadow: preset.boxShadow } : null;
+    }
+    const { boxShadow, ...native } = preset;
+    return Object.keys(native).length > 0 ? native : null;
   },
   // ── Animations (CSS keyframe animations, web-only) ────────────────────────
   // Each variant injects a @keyframes rule once via the __keyframe marker.
@@ -3505,6 +3545,31 @@ function prettifyCSS(css) {
   if (trailing) out.push(trailing);
   return out.join("\n");
 }
+var RESPONSIVE_MEDIA_RE = /^@media \(min-width: (\d+)px\) \{ (.+) \}$/;
+function mergeResponsiveMediaBlocks(items) {
+  const byWidth = /* @__PURE__ */ new Map();
+  const widthOrder = [];
+  const unwrapped = [];
+  for (const { raw } of items) {
+    for (const line of raw.split("\n")) {
+      if (!line.trim()) continue;
+      const m = RESPONSIVE_MEDIA_RE.exec(line);
+      if (!m) {
+        unwrapped.push(line);
+        continue;
+      }
+      const width = Number(m[1]);
+      if (!byWidth.has(width)) {
+        byWidth.set(width, []);
+        widthOrder.push(width);
+      }
+      byWidth.get(width).push(m[2]);
+    }
+  }
+  widthOrder.sort((a, b) => a - b);
+  const merged = widthOrder.map((w) => `@media (min-width: ${w}px) { ${byWidth.get(w).join(" ")} }`);
+  return [...unwrapped, ...merged];
+}
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
@@ -3524,7 +3589,7 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     if (!groups.has(label)) groups.set(label, []);
     const parsedToken = parseClass(token);
     const bucketKey = parsedToken && parsedToken.modifiers.length > 0 ? parsedToken.modifiers.join(":") : "base";
-    groups.get(label).push({ order: getModifierOrder(bucketKey), css: prettifyCSS(applyVars(css)) });
+    groups.get(label).push({ order: getModifierOrder(bucketKey), raw: applyVars(css) });
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
   if (declarations.size > 0) {
@@ -3542,7 +3607,8 @@ ${prettifyCSS(globalCSS)}`);
     const sorted = [...items].sort((a, b) => a.order - b.order);
     out.push(`
 /* ${label} */`);
-    out.push(sorted.map((it) => it.css).join("\n\n"));
+    const rendered = label === "Responsive" ? mergeResponsiveMediaBlocks(sorted).map(prettifyCSS) : sorted.map((it) => prettifyCSS(it.raw));
+    out.push(rendered.join("\n\n"));
   }
   return out.join("\n");
 }

package/dist/vite-plugin.mjs

@@ -22,7 +22,10 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  const escaped = cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  if (!/^[0-9]/.test(escaped)) return escaped;
+  const hex = escaped.charCodeAt(0).toString(16);
+  return `\\${hex} ${escaped.slice(1)}`;
 }
 
 // src/core/reset.ts
@@ -554,55 +557,78 @@ var defaultTheme = {
     none: "none"
     // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
+  // Each preset carries BOTH React Native's shadow*/elevation properties
+  // (used on native) and a `boxShadow` string (used on web) — see the
+  // `shadow` resolver in resolvers/effects.ts, which picks one or the other
+  // via getEffectiveIsWeb() and strips the rest. The boxShadow values are
+  // Tailwind's own default shadow scale verbatim (same offsets/blur/spread/
+  // opacity), so shadow-sm/md/lg/xl/2xl look the same as their Tailwind
+  // counterparts on web — the native shadowOffset/shadowRadius/shadowOpacity
+  // numbers were tuned independently for RN's elevation model and don't need
+  // to (and can't exactly) match the CSS values pixel-for-pixel.
   shadow: {
     sm: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 1 },
       shadowOpacity: 0.05,
       shadowRadius: 2,
-      elevation: 1
+      elevation: 1,
+      boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
     },
     DEFAULT: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.1,
       shadowRadius: 4,
-      elevation: 2
+      elevation: 2,
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
     },
     md: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 4 },
       shadowOpacity: 0.1,
       shadowRadius: 8,
-      elevation: 3
+      elevation: 3,
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
     },
     lg: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 8 },
       shadowOpacity: 0.1,
       shadowRadius: 15,
-      elevation: 4
+      elevation: 4,
+      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
     },
     xl: {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 16 },
       shadowOpacity: 0.1,
       shadowRadius: 24,
-      elevation: 6
+      elevation: 6,
+      boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
     },
     "2xl": {
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 24 },
       shadowOpacity: 0.25,
       shadowRadius: 48,
-      elevation: 8
+      elevation: 8,
+      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+    },
+    // Web-only — React Native has no inset-shadow equivalent (shadow*/
+    // elevation only ever draw an outer shadow), so the native side of this
+    // preset is intentionally empty rather than approximating something RN
+    // can't actually do.
+    inner: {
+      boxShadow: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
     },
     none: {
       shadowColor: "transparent",
       shadowOffset: { width: 0, height: 0 },
       shadowOpacity: 0,
       shadowRadius: 0,
-      elevation: 0
+      elevation: 0,
+      boxShadow: "0 0 #0000"
     }
   },
   screens: {
@@ -2263,9 +2289,23 @@ var effectResolvers = {
     return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
   },
   // ── Shadow ─────────────────────────────────────────────────────────────────
+  // Presets carry BOTH a web `boxShadow` string and native's shadow*/elevation
+  // properties (theme.ts) — picked apart here rather than left for
+  // styleValueToCSS's RN_ONLY_PROPS filter to sort out, since shadowOffset is
+  // an object (filtered out as "not a flat style value" regardless of
+  // platform) and boxShadow would otherwise leak into native's style prop as
+  // an RN doesn't understand (silently ignored there, but better to not hand
+  // native a property that was never meant for it — same branch-on-platform
+  // pattern as bg-opacity/transition/animate above).
   shadow: ({ value }, { shadow }) => {
     const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
+    const preset = shadow[key];
+    if (!preset) return null;
+    if (getEffectiveIsWeb()) {
+      return preset.boxShadow !== void 0 ? { boxShadow: preset.boxShadow } : null;
+    }
+    const { boxShadow, ...native } = preset;
+    return Object.keys(native).length > 0 ? native : null;
   },
   // ── Animations (CSS keyframe animations, web-only) ────────────────────────
   // Each variant injects a @keyframes rule once via the __keyframe marker.
@@ -3470,6 +3510,31 @@ function prettifyCSS(css) {
   if (trailing) out.push(trailing);
   return out.join("\n");
 }
+var RESPONSIVE_MEDIA_RE = /^@media \(min-width: (\d+)px\) \{ (.+) \}$/;
+function mergeResponsiveMediaBlocks(items) {
+  const byWidth = /* @__PURE__ */ new Map();
+  const widthOrder = [];
+  const unwrapped = [];
+  for (const { raw } of items) {
+    for (const line of raw.split("\n")) {
+      if (!line.trim()) continue;
+      const m = RESPONSIVE_MEDIA_RE.exec(line);
+      if (!m) {
+        unwrapped.push(line);
+        continue;
+      }
+      const width = Number(m[1]);
+      if (!byWidth.has(width)) {
+        byWidth.set(width, []);
+        widthOrder.push(width);
+      }
+      byWidth.get(width).push(m[2]);
+    }
+  }
+  widthOrder.sort((a, b) => a - b);
+  const merged = widthOrder.map((w) => `@media (min-width: ${w}px) { ${byWidth.get(w).join(" ")} }`);
+  return [...unwrapped, ...merged];
+}
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
@@ -3489,7 +3554,7 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     if (!groups.has(label)) groups.set(label, []);
     const parsedToken = parseClass(token);
     const bucketKey = parsedToken && parsedToken.modifiers.length > 0 ? parsedToken.modifiers.join(":") : "base";
-    groups.get(label).push({ order: getModifierOrder(bucketKey), css: prettifyCSS(applyVars(css)) });
+    groups.get(label).push({ order: getModifierOrder(bucketKey), raw: applyVars(css) });
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
   if (declarations.size > 0) {
@@ -3507,7 +3572,8 @@ ${prettifyCSS(globalCSS)}`);
     const sorted = [...items].sort((a, b) => a.order - b.order);
     out.push(`
 /* ${label} */`);
-    out.push(sorted.map((it) => it.css).join("\n\n"));
+    const rendered = label === "Responsive" ? mergeResponsiveMediaBlocks(sorted).map(prettifyCSS) : sorted.map((it) => prettifyCSS(it.raw));
+    out.push(rendered.join("\n\n"));
   }
   return out.join("\n");
 }

package/kbach-ui.md

@@ -586,8 +586,9 @@ rounded-t/r/b/l  rounded-tl/tr/bl/br
 
 ### Shadow
 ```
-shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xl / shadow-none
+shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl / shadow-2xl / shadow-inner / shadow-none
 ```
+Web: real `box-shadow` (Tailwind's own default values). Native: RN's shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation, tuned independently for RN's elevation model — not derived from the web value, so they don't need to match pixel-for-pixel. `shadow-inner` is web-only (RN has no inset-shadow equivalent). Customize or add sizes via `theme.extend.shadow` — see [Theme Configuration](#theme-configuration) below; each preset key merges independently, so overriding one size's `boxShadow` doesn't touch its native properties or any other size.
 
 ### Opacity
 ```
@@ -740,6 +741,16 @@ module.exports = {
       fontFamily: {
         sans: 'Inter, sans-serif',
       },
+      shadow: {
+        // Deep-merged into the existing preset, not replaced — lg keeps its
+        // native shadowColor/shadowOffset/shadowOpacity/shadowRadius/
+        // elevation, only boxShadow (the web value) changes here.
+        lg: { boxShadow: '0 10px 40px -10px rgba(99, 102, 241, 0.4)' },
+        // A brand-new key adds a new shadow-3xl utility alongside the
+        // defaults (sm/DEFAULT/md/lg/xl/2xl/inner/none) — web-only here,
+        // since it has no native shadow*/elevation properties.
+        '3xl': { boxShadow: '0 35px 60px -15px rgba(0, 0, 0, 0.3)' },
+      },
     },
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/ui",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.2",
   "description": "Tailwind-like utility classes and components for React — web, React Native, and Expo",
   "license": "MIT",
   "repository": {