@kbach/react 0.5.62 → 0.6.1

package/dist/{chunk-BRCQK5DA.mjs → chunk-MPHPB357.mjs}

@@ -1,10 +1,3 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
 // src/core/theme.ts
 var defaultColors = {
   transparent: "transparent",
@@ -548,12 +541,16 @@ var defaultTheme = {
 // 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 setResolveTarget(target) {
+  _resolveTargetOverride = target;
+}
 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);
@@ -740,18 +737,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) {
@@ -795,8 +802,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();
@@ -1058,9 +1065,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)
@@ -1145,6 +1152,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 }) => {
@@ -1178,64 +1227,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);
@@ -1279,54 +1272,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);
@@ -1558,49 +1504,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))",
@@ -1611,7 +1557,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 }) => {
@@ -1632,47 +1578,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;
@@ -1696,7 +1642,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 }) => {
@@ -1704,8 +1650,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 }) => {
@@ -1713,15 +1659,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 }) => {
@@ -2325,6 +2271,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;
@@ -2522,10 +2474,11 @@ var BASE_RESET = [
 
 // 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;
@@ -2538,7 +2491,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;
@@ -2632,7 +2588,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 disableRuntimeCSS() {
   globalThis[_CSS_DISABLED_KEY] = true;
@@ -2669,8 +2638,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}; }`);
   }
@@ -2833,7 +2801,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} }`;
@@ -2974,11 +2942,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;
@@ -3008,7 +2979,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;
@@ -3131,15 +3102,16 @@ var customVariants = new Proxy(
 );
 
 export {
-  __require,
   defaultColors,
   defaultTheme,
   isWeb,
   isNative,
+  setResolveTarget,
   setCSSGenMode,
   getInteractiveModifiers,
   getModeModifiers,
   getResponsiveModifiers,
+  parseHexRgb,
   parseClass,
   splitClassTokens,
   normalizeClassString,
@@ -3158,6 +3130,7 @@ export {
   generateClassCSS,
   resolve,
   flatten,
+  clearCache,
   getConfig,
   buildConfig,
   onConfigChange,

package/dist/index.d.mts

@@ -7,6 +7,8 @@ export { r as registerWebElement } from './web-substitute-CfpYFnE7.mjs';
 declare const defaultColors: ThemeColors;
 declare const defaultTheme: ThemeConfig;
 
+declare function setResolveTarget(target: 'web' | 'native' | null): void;
+
 declare function parseClass(className: string): ParsedClass | null;
 /**
  * Split a class string into tokens. Whitespace at bracket depth > 0 is STRIPPED
@@ -48,6 +50,14 @@ declare function flatten(resolved: ResolvedStyle, isDark: boolean, state?: {
     visited?: boolean;
     placeholder?: boolean;
 }, breakpoints?: Set<string>): StyleValue;
+/**
+ * Clear CSS injection state so stale rules are re-injected when the theme changes.
+ *
+ * The per-theme style cache (WeakMap) does not need to be cleared manually:
+ * updateConfig() creates a new theme object, making the old cache entry
+ * automatically unreachable for GC.
+ */
+declare function clearCache(): void;
 
 /**
  * Load, merge, and cache the resolved config.
@@ -133,34 +143,6 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
-type ToggleVariant = 'button' | 'switch' | 'icon-button';
-interface ThemeToggleProps {
-    /** Visual variant. Default: 'button' */
-    variant?: ToggleVariant;
-    /** Override label text (button variant) */
-    label?: string;
-    /** Custom light-mode label */
-    lightLabel?: string;
-    /** Custom dark-mode label */
-    darkLabel?: string;
-    /** Show system mode option */
-    includeSystem?: boolean;
-    /** Custom styles applied to the root container */
-    style?: object;
-    /** Custom styles for the label text */
-    labelStyle?: object;
-}
-/**
- * Drop-in theme toggle. Works on web and React Native.
- *
- * ```tsx
- * <ThemeToggle />
- * <ThemeToggle variant="switch" />
- * <ThemeToggle variant="icon-button" lightLabel="☀️" darkLabel="🌙" />
- * ```
- */
-declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSystem, style, labelStyle, }: ThemeToggleProps): React__default.JSX.Element;
-
 interface StyledProps {
     /** Additional utility classes applied on top of the base classes */
     kb?: string;
@@ -257,6 +239,7 @@ interface InteractiveWrapperProps {
     onPointerDown?: (...args: any[]) => void;
     onPointerUp?: (...args: any[]) => void;
     onPointerLeave?: (...args: any[]) => void;
+    onPointerCancel?: (...args: any[]) => void;
     onMouseEnter?: (...args: any[]) => void;
     onMouseLeave?: (...args: any[]) => void;
     onFocus?: (...args: any[]) => void;
@@ -306,4 +289,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, clearCache, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, setResolveTarget, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };