@kbach/react 0.6.0 → 0.6.2

package/dist/{chunk-6NED62DB.mjs → chunk-GRZ6MVIL.mjs}

@@ -1,3 +1,5 @@
+'use client';
+
 // src/core/theme.ts
 var defaultColors = {
   transparent: "transparent",
@@ -541,12 +543,13 @@ 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;
-function setCSSGenMode(on) {
-  _cssGenMode = on;
+var _resolveTargetOverride = null;
+function setResolveTarget(target) {
+  _resolveTargetOverride = target;
 }
 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);
@@ -733,18 +736,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) {
@@ -788,8 +801,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();
@@ -1051,9 +1064,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)
@@ -1138,6 +1151,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 }) => {
@@ -1171,64 +1226,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);
@@ -1272,54 +1271,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);
@@ -1551,49 +1503,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))",
@@ -1604,7 +1556,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 }) => {
@@ -1625,47 +1577,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;
@@ -1689,7 +1641,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 }) => {
@@ -1697,8 +1649,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 }) => {
@@ -1706,15 +1658,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 }) => {
@@ -2318,6 +2270,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;
@@ -2515,10 +2473,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;
@@ -2531,7 +2490,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;
@@ -2625,7 +2587,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;
@@ -2662,8 +2637,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}; }`);
   }
@@ -2826,7 +2800,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} }`;
@@ -2840,16 +2814,6 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important) {
   const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
   for (const r of cssRules) injectRule(r);
 }
-function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
-  const rules = [];
-  for (const parsed of parseClasses(classString)) {
-    const styles = resolveUtility(parsed, theme);
-    if (!styles) continue;
-    const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
-    rules.push(...buildClassCSSRules(parsed.original, bucketKey, styles, darkMode, parsed.important, screens));
-  }
-  return rules.join("\n");
-}
 function resolve(classString, theme, darkMode = "attribute") {
   const cache = getThemeCache(theme);
   const cacheKey = `${classString}::${darkMode}`;
@@ -2967,11 +2931,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;
@@ -3001,7 +2968,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;
@@ -3123,36 +3090,549 @@ var customVariants = new Proxy(
   }
 );
 
+// src/core/darkModeStore.ts
+var KEY = "__kbach_dark_store__";
+function getStore2() {
+  const g = globalThis;
+  if (!g[KEY]) {
+    g[KEY] = { isDark: false, subscribers: /* @__PURE__ */ new Set() };
+  }
+  return g[KEY];
+}
+function syncGlobalDarkMode(isDark) {
+  getStore2().isDark = isDark;
+}
+function setGlobalDarkMode(isDark) {
+  const store = getStore2();
+  if (store.isDark === isDark) return;
+  store.isDark = isDark;
+  for (const sub of store.subscribers) sub();
+}
+function getGlobalDarkMode() {
+  return getStore2().isDark;
+}
+function subscribeGlobalDarkMode(callback) {
+  const store = getStore2();
+  store.subscribers.add(callback);
+  return () => store.subscribers.delete(callback);
+}
+
+// src/useSyncExternalStoreShim.ts
+import React from "react";
+var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = React.useReducer((n) => n + 1, 0);
+  React.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+
+// src/useGlobalDarkMode.ts
+function useGlobalDarkMode() {
+  return useSyncExternalStore(
+    subscribeGlobalDarkMode,
+    getGlobalDarkMode,
+    () => false
+    // SSR: default light
+  );
+}
+
+// src/shared-utils.ts
+function hasResponsiveBuckets(resolved) {
+  const responsiveMods = getResponsiveModifiers();
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (responsiveMods.has(mod)) return true;
+    }
+  }
+  return false;
+}
+function hasInteractiveBuckets(resolved) {
+  const interactiveMods = getInteractiveModifiers();
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (interactiveMods.has(mod)) return true;
+    }
+  }
+  return false;
+}
+function chain(original, extra) {
+  return (...args) => {
+    original?.(...args);
+    extra();
+  };
+}
+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 = {
+  View: "div",
+  SafeAreaView: "div",
+  KeyboardAvoidingView: "div",
+  ScrollView: "div",
+  VirtualizedList: "div",
+  FlatList: "div",
+  SectionList: "div",
+  Text: "span",
+  TextInput: "input",
+  Image: "img",
+  ImageBackground: "div",
+  Pressable: "div",
+  TouchableOpacity: "div",
+  TouchableHighlight: "div",
+  TouchableWithoutFeedback: "div",
+  TouchableNativeFeedback: "div"
+};
+var _userMap = /* @__PURE__ */ new Map();
+var _cache = /* @__PURE__ */ new WeakMap();
+function registerWebElement(rnComponent, htmlTag) {
+  if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
+  _userMap.set(rnComponent, htmlTag);
+  _cache.delete(rnComponent);
+}
+function getWebTag(type, props) {
+  if (typeof type === "string") return null;
+  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
+  const obj = type;
+  if (_userMap.has(obj)) return _userMap.get(obj);
+  const name = obj.displayName ?? obj.name;
+  if (!name) {
+    _cache.set(obj, null);
+    return null;
+  }
+  if (name === "TextInput") {
+    const multiline = !!props && (props.multiline === true || Number(props.numberOfLines) > 1);
+    return multiline ? "textarea" : "input";
+  }
+  if (_cache.has(obj)) return _cache.get(obj);
+  const tag = _rnToHtml[name] ?? null;
+  _cache.set(obj, tag);
+  return tag;
+}
+var _rnOnlyProps = /* @__PURE__ */ new Set([
+  // Interaction
+  "onLongPress",
+  "delayLongPress",
+  "activeOpacity",
+  "underlayColor",
+  "hitSlop",
+  "pressRetentionOffset",
+  "android_ripple",
+  "android_disableSound",
+  "onHoverIn",
+  "onHoverOut",
+  "onHoverStart",
+  "onHoverEnd",
+  // Layout event
+  "onLayout",
+  // Accessibility
+  "accessible",
+  "accessibilityState",
+  "accessibilityLiveRegion",
+  "importantForAccessibility",
+  // Platform
+  "nativeID",
+  "collapsable",
+  "needsOffscreenAlphaCompositing",
+  "renderToHardwareTextureAndroid",
+  "shouldRasterizeIOS",
+  "focusable",
+  "hasTVPreferredFocus",
+  // 'pointerEvents' is handled in transformToWebProps (mapped to CSS style)
+  // Text
+  "selectable",
+  "allowFontScaling",
+  "adjustsFontSizeToFit",
+  "minimumFontScale",
+  "ellipsizeMode",
+  "numberOfLines",
+  "onTextLayout",
+  "textBreakStrategy",
+  "lineBreakStrategyIOS",
+  // TextInput
+  "multiline",
+  "resizeMode",
+  // handled separately
+  "blurOnSubmit",
+  "clearButtonMode",
+  "clearTextOnFocus",
+  "enablesReturnKeyAutomatically",
+  "returnKeyType",
+  "spellCheck",
+  // ScrollView
+  "scrollEnabled",
+  "showsVerticalScrollIndicator",
+  "showsHorizontalScrollIndicator",
+  "contentContainerStyle",
+  // 'horizontal' is handled in transformToWebProps (converted to CSS overflow-x).
+  "keyboardShouldPersistTaps",
+  "keyboardDismissMode",
+  "pagingEnabled",
+  "scrollEventThrottle",
+  "decelerationRate",
+  "bounces",
+  "alwaysBounceHorizontal",
+  "alwaysBounceVertical",
+  "snapToAlignment",
+  "snapToInterval",
+  "snapToOffsets",
+  "removeClippedSubviews",
+  "overScrollMode",
+  "stickyHeaderIndices",
+  "invertStickyHeaders",
+  "onScrollBeginDrag",
+  "onScrollEndDrag",
+  "onMomentumScrollBegin",
+  "onMomentumScrollEnd",
+  "contentInset",
+  "contentInsetAdjustmentBehavior",
+  "automaticallyAdjustContentInsets",
+  "automaticallyAdjustsScrollIndicatorInsets",
+  // expo-image
+  "contentPosition",
+  "cachePolicy",
+  "recyclingKey",
+  "blurRadius",
+  "fadeDuration",
+  "responsivePolicy",
+  "tintColor",
+  "allowDownscaling",
+  "placeholderContentFit",
+  // FlatList / SectionList
+  "data",
+  "renderItem",
+  "keyExtractor",
+  "getItemLayout",
+  "initialScrollIndex",
+  "initialNumToRender",
+  "maxToRenderPerBatch",
+  "windowSize",
+  "updateCellsBatchingPeriod",
+  "onEndReached",
+  "onEndReachedThreshold",
+  "ListHeaderComponent",
+  "ListFooterComponent",
+  "ListEmptyComponent",
+  "ListHeaderComponentStyle",
+  "ListFooterComponentStyle",
+  "ItemSeparatorComponent",
+  "SectionSeparatorComponent",
+  "inverted",
+  "getItem",
+  "getItemCount"
+]);
+var _pressableNames = /* @__PURE__ */ new Set([
+  "Pressable",
+  "TouchableOpacity",
+  "TouchableHighlight",
+  "TouchableWithoutFeedback",
+  "TouchableNativeFeedback"
+]);
+var _keyboardTypeMap = {
+  "numeric": "number",
+  "number-pad": "number",
+  "decimal-pad": "decimal",
+  "email-address": "email",
+  "phone-pad": "tel",
+  "url": "url"
+};
+var _resizeModeMap = {
+  "contain": "contain",
+  "cover": "cover",
+  "stretch": "fill",
+  "center": "none",
+  "repeat": "none"
+};
+function transformToWebProps(originalName, tag, props) {
+  const out = {};
+  const isPressable = _pressableNames.has(originalName);
+  const isTextInput = originalName === "TextInput";
+  const isImage = originalName === "Image" || originalName === "ImageBackground";
+  const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
+  let pendingStyle = null;
+  for (const [k, v] of Object.entries(props)) {
+    if (_rnOnlyProps.has(k)) continue;
+    if (k === "onPress") {
+      if (!("onClick" in props)) out.onClick = v;
+      continue;
+    }
+    if (k === "accessibilityLabel") {
+      if (out["aria-label"] == null) out["aria-label"] = v;
+      continue;
+    }
+    if (k === "accessibilityRole") {
+      if (out.role == null) out.role = v;
+      continue;
+    }
+    if (k === "testID") {
+      if (out["data-testid"] == null) out["data-testid"] = v;
+      continue;
+    }
+    if (isTextInput) {
+      if (k === "onChangeText") {
+        if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
+        continue;
+      }
+      if (k === "secureTextEntry") {
+        if (v && !("type" in props)) out.type = "password";
+        continue;
+      }
+      if (k === "keyboardType") {
+        if (!("type" in props) && !("secureTextEntry" in props)) {
+          const mapped = _keyboardTypeMap[v];
+          if (mapped) out.type = mapped;
+        }
+        continue;
+      }
+      if (k === "editable") {
+        if (v === false) out.readOnly = true;
+        continue;
+      }
+      if (k === "maxLength") {
+        out.maxLength = v;
+        continue;
+      }
+    }
+    if (isScrollable && k === "horizontal") {
+      if (v) pendingStyle = { display: "flex", flexDirection: "row", overflowX: "auto" };
+      continue;
+    }
+    if (k === "pointerEvents") {
+      if (v === "none" || v === "auto") pendingStyle = { ...pendingStyle ?? {}, pointerEvents: v };
+      continue;
+    }
+    if (isImage) {
+      if (k === "source") {
+        if (typeof v === "string") {
+          out.src = v;
+        } else if (v && typeof v === "object" && "uri" in v) {
+          out.src = v.uri;
+          if (v.headers) out["crossOrigin"] = "anonymous";
+        }
+        continue;
+      }
+      if (k === "resizeMode") {
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: _resizeModeMap[v] ?? "cover" };
+        continue;
+      }
+      if (k === "contentFit") {
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: v };
+        continue;
+      }
+      if (k === "defaultSource") continue;
+    }
+    if (k === "style") {
+      if (Array.isArray(v)) {
+        out.style = Object.assign({}, ...v.filter(Boolean));
+      } else if (v != null) {
+        out.style = v;
+      }
+      continue;
+    }
+    out[k] = v;
+  }
+  if (pendingStyle) {
+    out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
+  }
+  if (isPressable && !out.role) out.role = "button";
+  if (isImage && tag === "img" && out.alt == null) out.alt = "";
+  return out;
+}
+
+// src/InteractiveWrapper.tsx
+import React2, { forwardRef, useState, useCallback, useMemo } from "react";
+
+// src/useGlobalWidth.ts
+var NOOP_SUB = (_) => () => {
+};
+var ZERO_SNAP = () => 0;
+var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+var _webListeners = null;
+var _webRaf = 0;
+function _webResizeHandler() {
+  cancelAnimationFrame(_webRaf);
+  _webRaf = requestAnimationFrame(() => {
+    if (_webListeners) for (const cb of _webListeners) cb();
+  });
+}
+function subscribeWebWidth(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  if (!_webListeners) {
+    _webListeners = /* @__PURE__ */ new Set();
+    window.addEventListener("resize", _webResizeHandler);
+  }
+  _webListeners.add(cb);
+  return () => {
+    _webListeners.delete(cb);
+    if (_webListeners.size === 0) {
+      window.removeEventListener("resize", _webResizeHandler);
+      cancelAnimationFrame(_webRaf);
+      _webListeners = null;
+    }
+  };
+}
+function getWebWidth() {
+  return typeof window !== "undefined" ? window.innerWidth : 0;
+}
+function useGlobalWidth() {
+  return useSyncExternalStore(
+    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
+    isWeb ? getWebWidth : getGlobalWidth,
+    ZERO_SNAP
+  );
+}
+function useConditionalWidth(active) {
+  return useSyncExternalStore(
+    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
+    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
+    ZERO_SNAP
+  );
+}
+
+// src/InteractiveWrapper.tsx
+var InteractiveWrapper = forwardRef(
+  function InteractiveWrapper2({
+    Component,
+    resolvedStyle,
+    className,
+    style: styleProp,
+    onPressIn,
+    onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
+    onPointerCancel,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) {
+    const isDark = useGlobalDarkMode();
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
+    const width = useConditionalWidth(needsWidth);
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+    const [pressed, setPressed] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const handlePressIn = useCallback(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = useCallback(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = useCallback(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = useCallback(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = useCallback(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
+    const handlePointerCancel = useCallback(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
+    const handleMouseEnter = useCallback(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = useCallback(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const { children, disabled, checked, ...restForComponent } = rest;
+    const computedStyle = useMemo(
+      () => {
+        if (isWeb) return {};
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
+        stripInternalMarkers(s);
+        if (typeof Component !== "string") stripWebOnlyProps(s);
+        return s;
+      },
+      [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked]
+    );
+    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 componentProps = {
+      ref,
+      ...restForComponent,
+      ...disabled !== void 0 ? { disabled } : {},
+      ...checked !== void 0 ? { checked } : {},
+      style: finalStyle,
+      ...!isNative && className ? { className } : {},
+      // 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: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    };
+    return Array.isArray(children) ? React2.createElement(Component, componentProps, ...children) : React2.createElement(Component, componentProps, children);
+  }
+);
+InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
+
 export {
   defaultColors,
   defaultTheme,
   isWeb,
   isNative,
-  setCSSGenMode,
+  setResolveTarget,
   getInteractiveModifiers,
   getModeModifiers,
   getResponsiveModifiers,
+  parseHexRgb,
   parseClass,
   splitClassTokens,
   normalizeClassString,
   parseClasses,
-  BASE_RESET,
   syncGlobalWidth,
   syncGlobalScreens,
   getGlobalScreens,
   setGlobalWidth,
-  getGlobalWidth,
-  subscribeGlobalWidth,
   getActiveBreakpoints,
   getDefaultFontFamily,
   disableRuntimeCSS,
   isRuntimeCSSDisabled,
-  generateClassCSS,
   resolve,
   flatten,
+  clearCache,
   getConfig,
   buildConfig,
   onConfigChange,
   updateConfig,
-  initConfig
+  initConfig,
+  syncGlobalDarkMode,
+  setGlobalDarkMode,
+  useSyncExternalStore,
+  useGlobalDarkMode,
+  EMPTY_BREAKPOINTS,
+  useGlobalWidth,
+  useConditionalWidth,
+  hasResponsiveBuckets,
+  hasInteractiveBuckets,
+  chain,
+  stripInternalMarkers,
+  stripWebOnlyProps,
+  registerWebElement,
+  getWebTag,
+  transformToWebProps,
+  InteractiveWrapper
 };