@kbach/react 0.6.0 → 0.6.1

package/dist/jsx-runtime.mjs

@@ -3,11 +3,11 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-AAAI37Y4.mjs";
+} from "./chunk-6ZORO3BP.mjs";
 import {
   registerWebElement
-} from "./chunk-D4LJICWZ.mjs";
-import "./chunk-6NED62DB.mjs";
+} from "./chunk-36QRQNPL.mjs";
+import "./chunk-MPHPB357.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -40,12 +40,13 @@ var import_node_process = __toESM(require("process"));
 // src/core/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative" || typeof globalThis.__REACT_NATIVE__ !== "undefined");
-var _cssGenMode = false;
+var _resolveTargetOverride = null;
 function setCSSGenMode(on) {
-  _cssGenMode = on;
+  _resolveTargetOverride = on ? "web" : null;
 }
 function getEffectiveIsWeb() {
-  return isWeb || _cssGenMode || !isNative;
+  if (_resolveTargetOverride) return _resolveTargetOverride === "web";
+  return isWeb || !isNative;
 }
 function toNativeValue(raw) {
   if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
@@ -673,18 +674,28 @@ function resolveColor(value, colors, isArbitrary) {
   if (isNaN(alpha)) return hex;
   return hexToRgba(hex, alpha);
 }
-function hexToRgba(hex, alpha) {
+function parseHexRgb(hex) {
   const h = hex.replace("#", "");
-  let r, g, b;
-  if (h.length === 3) {
-    r = parseInt(h[0] + h[0], 16);
-    g = parseInt(h[1] + h[1], 16);
-    b = parseInt(h[2] + h[2], 16);
-  } else {
-    r = parseInt(h.slice(0, 2), 16);
-    g = parseInt(h.slice(2, 4), 16);
-    b = parseInt(h.slice(4, 6), 16);
+  if (h.length === 3 || h.length === 4) {
+    return [
+      parseInt(h[0] + h[0], 16),
+      parseInt(h[1] + h[1], 16),
+      parseInt(h[2] + h[2], 16)
+    ];
   }
+  if (h.length === 6 || h.length === 8) {
+    return [
+      parseInt(h.slice(0, 2), 16),
+      parseInt(h.slice(2, 4), 16),
+      parseInt(h.slice(4, 6), 16)
+    ];
+  }
+  return null;
+}
+function hexToRgba(hex, alpha) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const [r, g, b] = rgb;
   return `rgba(${r},${g},${b},${alpha})`;
 }
 function resolveSpacing(value, negative, spacing, isArbitrary) {
@@ -728,8 +739,8 @@ function resolveFontSize(value, fontSizes, isArbitrary) {
   if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
   return fontSizes[value] ?? null;
 }
-var FILTER_COMPOSE = "var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)";
-var BACKDROP_FILTER_COMPOSE = "var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)";
+var FILTER_COMPOSE = "var(--kb-blur,) var(--kb-brightness,) var(--kb-contrast,) var(--kb-grayscale,) var(--kb-hue-rotate,) var(--kb-invert,) var(--kb-saturate,) var(--kb-sepia,) var(--kb-drop-shadow,)";
+var BACKDROP_FILTER_COMPOSE = "var(--kb-backdrop-blur,) var(--kb-backdrop-brightness,) var(--kb-backdrop-contrast,) var(--kb-backdrop-grayscale,) var(--kb-backdrop-hue-rotate,) var(--kb-backdrop-invert,) var(--kb-backdrop-opacity,) var(--kb-backdrop-saturate,) var(--kb-backdrop-sepia,)";
 var _standalone = null;
 function buildStandalone() {
   const web = getEffectiveIsWeb();
@@ -991,9 +1002,9 @@ function buildStandalone() {
     "backface-visible": { backfaceVisibility: "visible" },
     "backface-hidden": { backfaceVisibility: "hidden" },
     // CSS filters — standalone = default/full effect (web-only)
-    grayscale: web ? { "--tw-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
-    invert: web ? { "--tw-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
-    sepia: web ? { "--tw-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
+    grayscale: web ? { "--kb-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
+    invert: web ? { "--kb-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
+    sepia: web ? { "--kb-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
     // Divide none
     "divide-none": web ? { __divideX: 0, __divideY: 0 } : null,
     // Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
@@ -1078,6 +1089,48 @@ function getStandalone() {
   if (!_standalone) _standalone = buildStandalone();
   return _standalone;
 }
+function makeSpacingResolver(prop) {
+  return ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { [prop]: v } : null;
+  };
+}
+var PADDING_MARGIN_PROPS = {
+  p: "padding",
+  px: "paddingHorizontal",
+  py: "paddingVertical",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  m: "margin",
+  mx: "marginHorizontal",
+  my: "marginVertical",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft"
+};
+function makeBorderSideResolver(widthProp, colorProp) {
+  return ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { [widthProp]: 1 };
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { [widthProp]: w2 };
+      return { [colorProp]: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { [colorProp]: color };
+    const w = borderWidth[value];
+    return w !== void 0 ? { [widthProp]: w } : null;
+  };
+}
+var BORDER_SIDE_PROPS = {
+  "border-t": ["borderTopWidth", "borderTopColor"],
+  "border-r": ["borderRightWidth", "borderRightColor"],
+  "border-b": ["borderBottomWidth", "borderBottomColor"],
+  "border-l": ["borderLeftWidth", "borderLeftColor"]
+};
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
@@ -1111,64 +1164,8 @@ var RESOLVERS = {
     const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
     return { "--text-opacity": v };
   },
-  // ── Padding ────────────────────────────────────────────────────────────────
-  p: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { padding: v } : null;
-  },
-  px: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { paddingHorizontal: v } : null;
-  },
-  py: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { paddingVertical: v } : null;
-  },
-  pt: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { paddingTop: v } : null;
-  },
-  pr: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { paddingRight: v } : null;
-  },
-  pb: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { paddingBottom: v } : null;
-  },
-  pl: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { paddingLeft: v } : null;
-  },
-  // ── Margin ─────────────────────────────────────────────────────────────────
-  m: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { margin: v } : null;
-  },
-  mx: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { marginHorizontal: v } : null;
-  },
-  my: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { marginVertical: v } : null;
-  },
-  mt: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { marginTop: v } : null;
-  },
-  mr: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { marginRight: v } : null;
-  },
-  mb: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { marginBottom: v } : null;
-  },
-  ml: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { marginLeft: v } : null;
-  },
+  // ── Padding & margin ───────────────────────────────────────────────────────
+  // Generated below via makeSpacingResolver() — see PADDING_MARGIN_PROPS.
   // ── Sizing ─────────────────────────────────────────────────────────────────
   w: ({ value, isArbitrary }, { spacing }) => {
     const v = resolveSizing(value, spacing, isArbitrary);
@@ -1212,54 +1209,7 @@ var RESOLVERS = {
     }
     return null;
   },
-  "border-t": ({ value, isArbitrary }, { colors, borderWidth }) => {
-    if (!value) return { borderTopWidth: 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { borderTopWidth: w2 };
-      return { borderTopColor: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { borderTopColor: color };
-    const w = borderWidth[value];
-    return w !== void 0 ? { borderTopWidth: w } : null;
-  },
-  "border-r": ({ value, isArbitrary }, { colors, borderWidth }) => {
-    if (!value) return { borderRightWidth: 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { borderRightWidth: w2 };
-      return { borderRightColor: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { borderRightColor: color };
-    const w = borderWidth[value];
-    return w !== void 0 ? { borderRightWidth: w } : null;
-  },
-  "border-b": ({ value, isArbitrary }, { colors, borderWidth }) => {
-    if (!value) return { borderBottomWidth: 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { borderBottomWidth: w2 };
-      return { borderBottomColor: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { borderBottomColor: color };
-    const w = borderWidth[value];
-    return w !== void 0 ? { borderBottomWidth: w } : null;
-  },
-  "border-l": ({ value, isArbitrary }, { colors, borderWidth }) => {
-    if (!value) return { borderLeftWidth: 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { borderLeftWidth: w2 };
-      return { borderLeftColor: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { borderLeftColor: color };
-    const w = borderWidth[value];
-    return w !== void 0 ? { borderLeftWidth: w } : null;
-  },
+  // border-t/-r/-b/-l generated below via makeBorderSideResolver() — see BORDER_SIDE_PROPS.
   // ── Border radius ──────────────────────────────────────────────────────────
   rounded: ({ value, isArbitrary }, { borderRadius }) => {
     const r = resolveRadius(value, borderRadius, isArbitrary);
@@ -1491,49 +1441,49 @@ var RESOLVERS = {
       "2xl": "blur(40px)",
       "3xl": "blur(64px)"
     };
-    if (value === "none") return { "--tw-blur": "", filter: FILTER_COMPOSE };
+    if (value === "none") return { "--kb-blur": "", filter: FILTER_COMPOSE };
     const v = isArbitrary ? `blur(${value})` : sizes[value];
-    return v !== void 0 ? { "--tw-blur": v, filter: FILTER_COMPOSE } : null;
+    return v !== void 0 ? { "--kb-blur": v, filter: FILTER_COMPOSE } : null;
   },
   brightness: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-brightness": v, filter: FILTER_COMPOSE };
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-brightness": v, filter: FILTER_COMPOSE };
   },
   contrast: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-contrast": v, filter: FILTER_COMPOSE };
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-contrast": v, filter: FILTER_COMPOSE };
   },
   grayscale: ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
-    return { "--tw-grayscale": v, filter: FILTER_COMPOSE };
+    return { "--kb-grayscale": v, filter: FILTER_COMPOSE };
   },
   "hue-rotate": ({ value, negative, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
     if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
-    return { "--tw-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
+    return { "--kb-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
   },
   invert: ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = value === "0" ? "invert(0)" : "invert(100%)";
-    return { "--tw-invert": v, filter: FILTER_COMPOSE };
+    return { "--kb-invert": v, filter: FILTER_COMPOSE };
   },
   saturate: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-saturate": v, filter: FILTER_COMPOSE };
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-saturate": v, filter: FILTER_COMPOSE };
   },
   sepia: ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = value === "0" ? "sepia(0)" : "sepia(100%)";
-    return { "--tw-sepia": v, filter: FILTER_COMPOSE };
+    return { "--kb-sepia": v, filter: FILTER_COMPOSE };
   },
   "drop-shadow": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { "--tw-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
+    if (isArbitrary) return { "--kb-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
     const presets = {
       "": "drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06))",
       sm: "drop-shadow(0 1px 1px rgb(0 0 0/0.05))",
@@ -1544,7 +1494,7 @@ var RESOLVERS = {
       none: "drop-shadow(0 0 #0000)"
     };
     const v = presets[value];
-    return v !== void 0 ? { "--tw-drop-shadow": v, filter: FILTER_COMPOSE } : null;
+    return v !== void 0 ? { "--kb-drop-shadow": v, filter: FILTER_COMPOSE } : null;
   },
   // Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
   filter: ({ value, isArbitrary }) => {
@@ -1565,47 +1515,47 @@ var RESOLVERS = {
       "2xl": "blur(40px)",
       "3xl": "blur(64px)"
     };
-    if (value === "none") return { "--tw-backdrop-blur": "", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    if (value === "none") return { "--kb-backdrop-blur": "", backdropFilter: BACKDROP_FILTER_COMPOSE };
     const v = isArbitrary ? `blur(${value})` : sizes[value];
-    return v !== void 0 ? { "--tw-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
+    return v !== void 0 ? { "--kb-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
   },
   "backdrop-brightness": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-contrast": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-grayscale": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--tw-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    return { "--kb-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
     if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
-    return { "--tw-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
+    return { "--kb-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-invert": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--tw-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    return { "--kb-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-opacity": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-saturate": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-sepia": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--tw-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    return { "--kb-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-filter": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1629,7 +1579,7 @@ var RESOLVERS = {
     const dir = directions[value];
     if (!dir) return null;
     return {
-      backgroundImage: `linear-gradient(${dir}, var(--tw-gradient-from, transparent), var(--tw-gradient-stops, transparent))`
+      backgroundImage: `linear-gradient(${dir}, var(--kb-gradient-from, transparent), var(--kb-gradient-stops, transparent))`
     };
   },
   from: ({ value, isArbitrary }, { colors }) => {
@@ -1637,8 +1587,8 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     if (!color) return null;
     return {
-      "--tw-gradient-from": color,
-      "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, transparent)`
+      "--kb-gradient-from": color,
+      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-to, transparent)`
     };
   },
   via: ({ value, isArbitrary }, { colors }) => {
@@ -1646,15 +1596,15 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     if (!color) return null;
     return {
-      "--tw-gradient-via": color,
-      "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent)`
+      "--kb-gradient-via": color,
+      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-via), var(--kb-gradient-to, transparent)`
     };
   },
   to: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
     const color = resolveColor(value, colors, isArbitrary);
     if (!color) return null;
-    return { "--tw-gradient-to": color };
+    return { "--kb-gradient-to": color };
   },
   // ── Transform extras (web-only) ───────────────────────────────────────────
   "skew-x": ({ value, negative, isArbitrary }) => {
@@ -2258,6 +2208,12 @@ var RESOLVERS = {
     return { rowGap: v };
   }
 };
+for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
+  RESOLVERS[utility] = makeSpacingResolver(prop);
+}
+for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
+  RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
+}
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
@@ -2524,10 +2480,11 @@ function findOuterColon(s) {
 
 // src/core/cache.ts
 var LRUCache = class {
-  constructor(capacity = 1e4) {
+  constructor(capacity = 1e4, onEvict) {
     this.capacity = capacity;
     if (capacity <= 0) throw new Error("LRUCache: capacity must be a positive integer");
     this.cache = /* @__PURE__ */ new Map();
+    this.onEvict = onEvict;
   }
   get(key) {
     if (!this.cache.has(key)) return void 0;
@@ -2540,7 +2497,10 @@ var LRUCache = class {
     if (this.cache.has(key)) {
       this.cache.delete(key);
     } else if (this.cache.size >= this.capacity) {
-      this.cache.delete(this.cache.keys().next().value);
+      const oldestKey = this.cache.keys().next().value;
+      const oldestValue = this.cache.get(oldestKey);
+      this.cache.delete(oldestKey);
+      this.onEvict?.(oldestKey, oldestValue);
     }
     this.cache.set(key, value);
     return this;
@@ -2565,7 +2525,20 @@ function setDefaultFontFamily(font) {
   globalThis[FONT_KEY] = font;
 }
 var _styleEl = null;
-var _injectedRules = new LRUCache(5e4);
+function evictInjectedRule(rule) {
+  const sheet = _styleEl?.sheet;
+  if (!sheet) return;
+  for (let i = 0; i < sheet.cssRules.length; i++) {
+    if (sheet.cssRules[i].cssText === rule) {
+      try {
+        sheet.deleteRule(i);
+      } catch {
+      }
+      return;
+    }
+  }
+}
+var _injectedRules = new LRUCache(5e4, evictInjectedRule);
 var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
 function isRuntimeCSSDisabled() {
   return !!globalThis[_CSS_DISABLED_KEY];
@@ -2589,8 +2562,7 @@ function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [BASE_RESET];
   const ff = theme.fontFamily;
-  if (!ff) return;
-  if (ff.sans && ff.sans !== "System") {
+  if (ff?.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
     rules.push(`body { font-family: ${family}; }`);
   }
@@ -2753,7 +2725,7 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
     else rule = `[data-theme="dark"] ${selector} { ${decls} }`;
   } else if (darkScheme === "light") {
     if (darkMode === "media") rule = `@media (prefers-color-scheme: light) { ${selector} { ${decls} } }`;
-    else if (darkMode === "class") rule = `:not(.dark) ${selector} { ${decls} }`;
+    else if (darkMode === "class") rule = `.light ${selector} { ${decls} }`;
     else rule = `[data-theme="light"] ${selector} { ${decls} }`;
   } else {
     rule = `${selector} { ${decls} }`;
@@ -2800,11 +2772,14 @@ function getConfigStore() {
   return g[CONFIG_KEY];
 }
 function resolveOneRef(ref, colors) {
-  const m = /^([a-z][a-z0-9]*)-(\d+)$/.exec(ref);
-  if (!m) return null;
-  const entry = colors[m[1]];
+  const lastDash = ref.lastIndexOf("-");
+  if (lastDash <= 0) return null;
+  const name = ref.slice(0, lastDash);
+  const shade = ref.slice(lastDash + 1);
+  if (!/^\d+$/.test(shade)) return null;
+  const entry = colors[name];
   if (!entry || typeof entry !== "object") return null;
-  return entry[m[2]] ?? null;
+  return entry[shade] ?? null;
 }
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
@@ -2834,7 +2809,7 @@ function resolveColorRefs(colors) {
 function buildConfig(userConfig) {
   let theme = { ...defaultTheme };
   if (userConfig.theme) {
-    theme = deepMerge(theme, userConfig.theme);
+    theme = { ...theme, ...userConfig.theme };
   }
   if (userConfig.extend) {
     const extendConfig = userConfig.extend;
@@ -2987,8 +2962,9 @@ function buildColorVarMap(theme, usedCSS) {
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
+  const sortedColorVars = [...colorVars].sort(([a], [b]) => b.length - a.length);
   function applyVars(css) {
-    for (const [val, varName] of colorVars)
+    for (const [val, varName] of sortedColorVars)
       css = css.split(val).join(`var(${varName})`);
     return css;
   }

package/dist/vite-plugin.mjs

@@ -4,7 +4,7 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-6NED62DB.mjs";
+} from "./chunk-MPHPB357.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
@@ -58,8 +58,9 @@ function buildColorVarMap(theme, usedCSS) {
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
+  const sortedColorVars = [...colorVars].sort(([a], [b]) => b.length - a.length);
   function applyVars(css) {
-    for (const [val, varName] of colorVars)
+    for (const [val, varName] of sortedColorVars)
       css = css.split(val).join(`var(${varName})`);
     return css;
   }

package/kbach-react.md

@@ -14,6 +14,7 @@ Package: `@kbach/react`
 ```
 
 ### vite.config.ts
+Requires `vite` and `@vitejs/plugin-react` as dev dependencies — not installed by `@kbach/react` itself: `npm install -D vite @vitejs/plugin-react`.
 ```ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
@@ -45,6 +46,19 @@ import { ThemeProvider } from '@kbach/react';
 <ThemeProvider defaultMode="system"><App /></ThemeProvider>
 ```
 
+### Next.js
+tsconfig `jsxImportSource` setup above applies as-is. No Vite plugin for Next.js (webpack/Turbopack) — falls back to runtime CSS injection, which only runs client-side, so expect a brief flash of unstyled content on first paint before hydration. `@kbach/react` ships no `'use client'` directive, so wrap `ThemeProvider` in your own client component before using it in App Router:
+```tsx
+'use client';
+import { ThemeProvider } from '@kbach/react';
+export function Providers({ children }) {
+  return <ThemeProvider defaultMode="system">{children}</ThemeProvider>;
+}
+```
+
+### React Router
+Framework mode (v7, SSR) builds with Vite, so the setup above works unchanged — default scan dirs include `app/`. Library mode (client-only) needs no special handling beyond the standard Vite setup.
+
 ---
 
 ## Vite Plugin

package/package.json

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