@kbach/react 0.6.0 → 0.6.2

package/dist/jsx-runtime.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -30,7 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/jsx-runtime.tsx
 var jsx_runtime_exports = {};
 __export(jsx_runtime_exports, {
-  Fragment: () => import_react5.Fragment,
+  Fragment: () => import_react4.Fragment,
   _invalidateDefaultFontCache: () => _invalidateDefaultFontCache,
   jsx: () => jsx,
   jsxs: () => jsxs,
@@ -38,7 +39,7 @@ __export(jsx_runtime_exports, {
 });
 module.exports = __toCommonJS(jsx_runtime_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/core/theme.ts
 var defaultColors = {
@@ -582,10 +583,11 @@ var defaultTheme = {
 
 // 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;
@@ -598,7 +600,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;
@@ -620,9 +625,10 @@ var LRUCache = class {
 // 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 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);
@@ -809,18 +815,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) {
@@ -864,8 +880,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();
@@ -1127,9 +1143,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)
@@ -1214,6 +1230,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 }) => {
@@ -1247,64 +1305,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);
@@ -1348,54 +1350,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);
@@ -1627,49 +1582,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))",
@@ -1680,7 +1635,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 }) => {
@@ -1701,47 +1656,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;
@@ -1765,7 +1720,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 }) => {
@@ -1773,8 +1728,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 }) => {
@@ -1782,15 +1737,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 }) => {
@@ -2394,6 +2349,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;
@@ -2652,7 +2613,20 @@ function getDefaultFontFamily() {
   return globalThis[FONT_KEY];
 }
 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];
@@ -2686,8 +2660,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}; }`);
   }
@@ -2850,7 +2823,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} }`;
@@ -2970,11 +2943,14 @@ function getConfig() {
   return store.resolved;
 }
 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;
@@ -3004,7 +2980,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;
@@ -3132,15 +3108,17 @@ function subscribeGlobalDarkMode(callback) {
 }
 
 // src/InteractiveWrapper.tsx
-var import_react3 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 
-// src/useGlobalDarkMode.ts
+// src/useSyncExternalStoreShim.ts
 var import_react = __toESM(require("react"));
 var useSyncExternalStore = import_react.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
   const [, forceUpdate] = import_react.default.useReducer((n) => n + 1, 0);
   import_react.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
   return getSnapshot();
 };
+
+// src/useGlobalDarkMode.ts
 function useGlobalDarkMode() {
   return useSyncExternalStore(
     subscribeGlobalDarkMode,
@@ -3151,12 +3129,6 @@ function useGlobalDarkMode() {
 }
 
 // src/useGlobalWidth.ts
-var import_react2 = __toESM(require("react"));
-var useSyncExternalStore2 = import_react2.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react2.default.useReducer((n) => n + 1, 0);
-  import_react2.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
-  return getSnapshot();
-};
 var NOOP_SUB = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
@@ -3190,7 +3162,7 @@ function getWebWidth() {
   return typeof window !== "undefined" ? window.innerWidth : 0;
 }
 function useConditionalWidth(active) {
-  return useSyncExternalStore2(
+  return useSyncExternalStore(
     active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
     active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
@@ -3208,15 +3180,45 @@ function hasResponsiveBuckets(resolved) {
   }
   return false;
 }
-
-// src/InteractiveWrapper.tsx
 function chain(original, extra) {
   return (...args) => {
     original?.(...args);
     extra();
   };
 }
-var InteractiveWrapper = (0, import_react3.forwardRef)(
+function stripInternalMarkers(s) {
+  delete s.__divideX;
+  delete s.__divideY;
+  delete s.__divideColor;
+  delete s.__divideStyle;
+  delete s.__keyframe;
+}
+function stripWebOnlyProps(s) {
+  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+  delete s.gridTemplateColumns;
+  delete s.gridTemplateRows;
+  delete s.gridColumn;
+  delete s.gridRow;
+  delete s.gridArea;
+  delete s.gridColumnStart;
+  delete s.gridColumnEnd;
+  delete s.gridRowStart;
+  delete s.gridRowEnd;
+  delete s.gridAutoFlow;
+  delete s.gridAutoColumns;
+  delete s.gridAutoRows;
+  delete s.placeItems;
+  delete s.placeContent;
+  delete s.justifyItems;
+  delete s.placeSelf;
+  delete s.justifySelf;
+  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+    delete s.position;
+  }
+}
+
+// src/InteractiveWrapper.tsx
+var InteractiveWrapper = (0, import_react2.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -3227,6 +3229,7 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     onPointerDown,
     onPointerUp,
     onPointerLeave,
+    onPointerCancel,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -3237,51 +3240,26 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-    const [pressed, setPressed] = (0, import_react3.useState)(false);
-    const [hovered, setHovered] = (0, import_react3.useState)(false);
-    const [focused, setFocused] = (0, import_react3.useState)(false);
-    const handlePressIn = (0, import_react3.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react3.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = (0, import_react3.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = (0, import_react3.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = (0, import_react3.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handleMouseEnter = (0, import_react3.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react3.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react3.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const [pressed, setPressed] = (0, import_react2.useState)(false);
+    const [hovered, setHovered] = (0, import_react2.useState)(false);
+    const [focused, setFocused] = (0, import_react2.useState)(false);
+    const handlePressIn = (0, import_react2.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react2.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react2.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react2.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react2.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
+    const handlePointerCancel = (0, import_react2.useCallback)(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
+    const handleMouseEnter = (0, import_react2.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react2.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const { children, disabled, checked, ...restForComponent } = rest;
-    const computedStyle = (0, import_react3.useMemo)(
+    const computedStyle = (0, import_react2.useMemo)(
       () => {
         if (isWeb) return {};
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
-        delete s.__divideX;
-        delete s.__divideY;
-        delete s.__divideColor;
-        delete s.__divideStyle;
-        delete s.__keyframe;
-        if (typeof Component !== "string") {
-          if (s.display === "grid" || s.display === "inline-grid") delete s.display;
-          delete s.gridTemplateColumns;
-          delete s.gridTemplateRows;
-          delete s.gridColumn;
-          delete s.gridRow;
-          delete s.gridArea;
-          delete s.gridColumnStart;
-          delete s.gridColumnEnd;
-          delete s.gridRowStart;
-          delete s.gridRowEnd;
-          delete s.gridAutoFlow;
-          delete s.gridAutoColumns;
-          delete s.gridAutoRows;
-          delete s.placeItems;
-          delete s.placeContent;
-          delete s.justifyItems;
-          delete s.placeSelf;
-          delete s.justifySelf;
-          if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
-            delete s.position;
-          }
-        }
+        stripInternalMarkers(s);
+        if (typeof Component !== "string") stripWebOnlyProps(s);
         return s;
       },
       [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked]
@@ -3298,20 +3276,20 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
       // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
       // (and any component that accepts both prop names) depend on receiving them directly.
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? import_react3.default.createElement(Component, componentProps, ...children) : import_react3.default.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? import_react2.default.createElement(Component, componentProps, ...children) : import_react2.default.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 
 // src/DarkWrapper.tsx
-var import_react4 = __toESM(require("react"));
-var DarkWrapper = import_react4.default.forwardRef(
+var import_react3 = __toESM(require("react"));
+var DarkWrapper = import_react3.default.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
@@ -3319,7 +3297,7 @@ var DarkWrapper = import_react4.default.forwardRef(
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
-    const computedStyle = (0, import_react4.useMemo)(() => {
+    const computedStyle = (0, import_react3.useMemo)(() => {
       if (isWeb) return {};
       const s = flatten(resolvedStyle, isDark, {}, breakpoints);
       stripInternalMarkers(s);
@@ -3329,40 +3307,10 @@ var DarkWrapper = import_react4.default.forwardRef(
     const skipComputedInline = isWeb || !isNative && typeof Component === "string";
     const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
-    return Array.isArray(children) ? import_react4.default.createElement(Component, props, ...children) : import_react4.default.createElement(Component, props, children);
+    return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
   }
 );
 DarkWrapper.displayName = "Kbach.DarkWrapper";
-function stripInternalMarkers(s) {
-  delete s.__divideX;
-  delete s.__divideY;
-  delete s.__divideColor;
-  delete s.__divideStyle;
-  delete s.__keyframe;
-}
-function stripWebOnlyProps(s) {
-  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
-  delete s.gridTemplateColumns;
-  delete s.gridTemplateRows;
-  delete s.gridColumn;
-  delete s.gridRow;
-  delete s.gridArea;
-  delete s.gridColumnStart;
-  delete s.gridColumnEnd;
-  delete s.gridRowStart;
-  delete s.gridRowEnd;
-  delete s.gridAutoFlow;
-  delete s.gridAutoColumns;
-  delete s.gridAutoRows;
-  delete s.placeItems;
-  delete s.placeContent;
-  delete s.justifyItems;
-  delete s.placeSelf;
-  delete s.justifySelf;
-  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
-    delete s.position;
-  }
-}
 
 // src/web-substitute.ts
 var _rnToHtml = {
@@ -3612,13 +3560,11 @@ function transformToWebProps(originalName, tag, props) {
         continue;
       }
       if (k === "resizeMode") {
-        const existing = out.style ?? {};
-        out.style = { ...existing, objectFit: _resizeModeMap[v] ?? "cover" };
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: _resizeModeMap[v] ?? "cover" };
         continue;
       }
       if (k === "contentFit") {
-        const existing = out.style ?? {};
-        out.style = { ...existing, objectFit: v };
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: v };
         continue;
       }
       if (k === "defaultSource") continue;
@@ -3698,36 +3644,6 @@ function mergeStyle(computed, userStyle) {
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
-function stripInternalMarkers2(s) {
-  delete s.__divideX;
-  delete s.__divideY;
-  delete s.__divideColor;
-  delete s.__divideStyle;
-  delete s.__keyframe;
-}
-function stripWebOnlyInlineProps(s) {
-  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
-  delete s.gridTemplateColumns;
-  delete s.gridTemplateRows;
-  delete s.gridColumn;
-  delete s.gridRow;
-  delete s.gridArea;
-  delete s.gridColumnStart;
-  delete s.gridColumnEnd;
-  delete s.gridRowStart;
-  delete s.gridRowEnd;
-  delete s.gridAutoFlow;
-  delete s.gridAutoColumns;
-  delete s.gridAutoRows;
-  delete s.placeItems;
-  delete s.placeContent;
-  delete s.justifyItems;
-  delete s.placeSelf;
-  delete s.justifySelf;
-  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
-    delete s.position;
-  }
-}
 function processElement(type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
@@ -3787,8 +3703,8 @@ function processElement(type, rawProps, key, isStaticChildren) {
   let finalStyle;
   if (!skipComputedInline) {
     const computedStyle = flatten(resolved, false);
-    stripInternalMarkers2(computedStyle);
-    if (typeof effectiveType !== "string") stripWebOnlyInlineProps(computedStyle);
+    stripInternalMarkers(computedStyle);
+    if (typeof effectiveType !== "string") stripWebOnlyProps(computedStyle);
     finalStyle = mergeStyle(computedStyle, userStyle);
   } else {
     finalStyle = userStyle ?? void 0;