@kbach/react 0.5.62 → 0.6.1

package/dist/index.js

@@ -33,8 +33,8 @@ __export(index_exports, {
   InteractiveWrapper: () => InteractiveWrapper,
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
-  ThemeToggle: () => ThemeToggle,
   buildConfig: () => buildConfig,
+  clearCache: () => clearCache,
   cx: () => cx,
   defaultColors: () => defaultColors,
   defaultTheme: () => defaultTheme,
@@ -48,6 +48,7 @@ __export(index_exports, {
   parseClasses: () => parseClasses,
   registerWebElement: () => registerWebElement,
   resolve: () => resolve,
+  setResolveTarget: () => setResolveTarget,
   splitClassTokens: () => splitClassTokens,
   styled: () => styled,
   updateConfig: () => updateConfig,
@@ -81,76 +82,6 @@ function useIsDark() {
 
 // src/useColors.ts
 var import_react2 = require("react");
-function applyOpacity(color, opacity) {
-  const a = Math.max(0, Math.min(1, opacity / 100));
-  if (color.startsWith("#")) {
-    const h = color.slice(1);
-    let rs, gs, bs;
-    if (h.length === 3 || h.length === 4) {
-      rs = h[0] + h[0];
-      gs = h[1] + h[1];
-      bs = h[2] + h[2];
-    } else if (h.length === 8) {
-      rs = h.slice(0, 2);
-      gs = h.slice(2, 4);
-      bs = h.slice(4, 6);
-    } else {
-      rs = h.slice(0, 2);
-      gs = h.slice(2, 4);
-      bs = h.slice(4, 6);
-    }
-    return `rgba(${parseInt(rs, 16)},${parseInt(gs, 16)},${parseInt(bs, 16)},${a})`;
-  }
-  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
-  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
-  return color;
-}
-function makeShadeProxy(shades) {
-  return new Proxy(shades, {
-    get(target, prop) {
-      const key = String(prop);
-      if (key === "then") return void 0;
-      if (key.includes("/")) {
-        const slash = key.indexOf("/");
-        const shade = key.slice(0, slash);
-        const op = Number(key.slice(slash + 1));
-        const color = target[shade];
-        return typeof color === "string" ? applyOpacity(color, op) : void 0;
-      }
-      return target[key];
-    }
-  });
-}
-function wrapColors(rawColors) {
-  const cache = /* @__PURE__ */ new Map();
-  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
-  return new Proxy({ alpha }, {
-    get(_, prop) {
-      const key = String(prop);
-      if (key === "then") return void 0;
-      if (key === "alpha") return alpha;
-      if (key.includes("/")) {
-        const slash = key.indexOf("/");
-        const name = key.slice(0, slash);
-        const op = Number(key.slice(slash + 1));
-        const entry2 = rawColors[name];
-        return typeof entry2 === "string" ? applyOpacity(entry2, op) : void 0;
-      }
-      const entry = rawColors[key];
-      if (entry === void 0) return void 0;
-      if (typeof entry === "string") return entry;
-      if (!cache.has(key)) cache.set(key, makeShadeProxy(entry));
-      return cache.get(key);
-    }
-  });
-}
-function useColors() {
-  const { config } = useTheme();
-  return (0, import_react2.useMemo)(() => wrapColors(config.theme.colors), [config.theme.colors]);
-}
-
-// src/ThemeProvider.tsx
-var import_react3 = require("react");
 
 // src/core/theme.ts
 var defaultColors = {
@@ -694,10 +625,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;
@@ -710,7 +642,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;
@@ -732,9 +667,13 @@ 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 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);
@@ -915,18 +854,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) {
@@ -970,8 +919,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();
@@ -1233,9 +1182,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)
@@ -1320,6 +1269,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 }) => {
@@ -1353,64 +1344,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);
@@ -1454,54 +1389,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);
@@ -1733,49 +1621,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))",
@@ -1786,7 +1674,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 }) => {
@@ -1807,47 +1695,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;
@@ -1871,7 +1759,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 }) => {
@@ -1879,8 +1767,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 }) => {
@@ -1888,15 +1776,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 }) => {
@@ -2500,6 +2388,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;
@@ -2770,7 +2664,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;
@@ -2807,8 +2714,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}; }`);
   }
@@ -2971,7 +2877,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} }`;
@@ -3102,11 +3008,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;
@@ -3136,7 +3045,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;
@@ -3285,6 +3194,74 @@ function subscribeGlobalDarkMode(callback) {
   return () => store.subscribers.delete(callback);
 }
 
+// src/useColors.ts
+function applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  if (color.startsWith("#")) {
+    const rgb = parseHexRgb(color);
+    if (!rgb) return color;
+    const [r, g, b] = rgb;
+    return `rgba(${r},${g},${b},${a})`;
+  }
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
+  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
+  return color;
+}
+function makeShadeProxy(shades) {
+  return new Proxy(shades, {
+    get(target, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key.includes("/")) {
+        const slash = key.indexOf("/");
+        const shade = key.slice(0, slash);
+        const op = Number(key.slice(slash + 1));
+        const color = target[shade];
+        return typeof color === "string" ? applyOpacity(color, op) : void 0;
+      }
+      return target[key];
+    }
+  });
+}
+function wrapColors(rawColors) {
+  const cache = /* @__PURE__ */ new Map();
+  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
+  return new Proxy({ alpha }, {
+    get(_, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key === "alpha") return alpha;
+      if (key.includes("/")) {
+        const slash = key.indexOf("/");
+        const name = key.slice(0, slash);
+        const op = Number(key.slice(slash + 1));
+        const entry2 = rawColors[name];
+        return typeof entry2 === "string" ? applyOpacity(entry2, op) : void 0;
+      }
+      const entry = rawColors[key];
+      if (entry === void 0) return void 0;
+      if (typeof entry === "string") return entry;
+      if (!cache.has(key)) cache.set(key, makeShadeProxy(entry));
+      return cache.get(key);
+    }
+  });
+}
+function useColors() {
+  const { config } = useTheme();
+  return (0, import_react2.useMemo)(() => wrapColors(config.theme.colors), [config.theme.colors]);
+}
+
+// src/ThemeProvider.tsx
+var import_react4 = require("react");
+
+// src/useSyncExternalStoreShim.ts
+var import_react3 = __toESM(require("react"));
+var useSyncExternalStore = import_react3.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react3.default.useReducer((n) => n + 1, 0);
+  import_react3.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+  return getSnapshot();
+};
+
 // src/ThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var STORAGE_KEY = "kbach-theme";
@@ -3302,6 +3279,22 @@ function persistMode(mode) {
   } catch {
   }
 }
+function subscribeSystemScheme(callback) {
+  if (!isWeb || typeof window === "undefined") return () => {
+  };
+  const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+  if (!mq) return () => {
+  };
+  mq.addEventListener("change", callback);
+  return () => mq.removeEventListener("change", callback);
+}
+function getSystemScheme() {
+  if (!isWeb || typeof window === "undefined") return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
+}
+function getSystemSchemeServerSnapshot() {
+  return "light";
+}
 function applyWebTheme(resolvedMode, strategy) {
   if (!isWeb) return;
   const root = document.documentElement;
@@ -3320,35 +3313,34 @@ function ThemeProvider({
   config: configOverride,
   disablePersistence = false
 }) {
-  const [resolvedConfig, setResolvedConfig] = (0, import_react3.useState)(
+  const [resolvedConfig, setResolvedConfig] = (0, import_react4.useState)(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const [webWidth, setWebWidth] = (0, import_react3.useState)(
-    () => isWeb && typeof window !== "undefined" ? window.innerWidth : 0
-  );
+  const [webWidth, setWebWidth] = (0, import_react4.useState)(0);
   const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
-  const numericScreens = (0, import_react3.useMemo)(() => {
+  const numericScreens = (0, import_react4.useMemo)(() => {
     const out = {};
     for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
       out[k] = typeof v === "number" ? v : parseInt(String(v), 10);
     }
     return out;
   }, [resolvedConfig.theme.screens]);
-  const _prevWidthRef = (0, import_react3.useRef)(-1);
+  const _prevWidthRef = (0, import_react4.useRef)(-1);
   if (_prevWidthRef.current !== effectiveWidth) {
     _prevWidthRef.current = effectiveWidth;
     syncGlobalWidth(effectiveWidth);
   }
-  const _prevScreensRef = (0, import_react3.useRef)(null);
+  const _prevScreensRef = (0, import_react4.useRef)(null);
   if (_prevScreensRef.current !== numericScreens) {
     _prevScreensRef.current = numericScreens;
     syncGlobalScreens(numericScreens);
   }
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setGlobalWidth(effectiveWidth);
   }, [effectiveWidth]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isWeb || typeof window === "undefined") return;
+    setWebWidth(window.innerWidth);
     let raf = 0;
     const update = () => {
       cancelAnimationFrame(raf);
@@ -3364,52 +3356,38 @@ function ThemeProvider({
       cancelAnimationFrame(raf);
     };
   }, []);
-  const [webScheme, setWebScheme] = (0, import_react3.useState)(() => {
-    if (isWeb && typeof window !== "undefined") {
-      return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }
-    return "light";
-  });
+  const webScheme = useSyncExternalStore(
+    subscribeSystemScheme,
+    getSystemScheme,
+    getSystemSchemeServerSnapshot
+  );
   const systemScheme = isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
-  const [mode, _setMode] = (0, import_react3.useState)(() => {
-    if (!disablePersistence) {
-      const persisted = loadPersistedMode();
-      if (persisted) return persisted;
-    }
-    return defaultMode;
-  });
-  const setMode = (0, import_react3.useCallback)((next) => {
+  const [mode, _setMode] = (0, import_react4.useState)(defaultMode);
+  (0, import_react4.useEffect)(() => {
+    if (disablePersistence) return;
+    const persisted = loadPersistedMode();
+    if (persisted) _setMode(persisted);
+  }, []);
+  const setMode = (0, import_react4.useCallback)((next) => {
     _setMode(next);
     if (!disablePersistence) persistMode(next);
   }, [disablePersistence]);
-  const toggle = (0, import_react3.useCallback)(() => {
+  const toggle = (0, import_react4.useCallback)(() => {
     setMode(mode === "dark" || mode === "system" && systemScheme === "dark" ? "light" : "dark");
   }, [mode, systemScheme, setMode]);
   const resolvedMode = mode === "system" ? systemScheme : mode;
   const isDark = resolvedMode === "dark";
   syncGlobalDarkMode(isDark);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
     setGlobalDarkMode(isDark);
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);
-  const setWebSchemeRef = (0, import_react3.useRef)(setWebScheme);
-  setWebSchemeRef.current = setWebScheme;
-  (0, import_react3.useEffect)(() => {
-    if (!isWeb || typeof window === "undefined") return;
-    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
-    if (!mq) return;
-    const handler = (e) => {
-      setWebSchemeRef.current(e.matches ? "dark" : "light");
-    };
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!configOverride) return;
     updateConfig(configOverride);
     setResolvedConfig(getConfig());
   }, [configOverride]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (configOverride) return;
     let mounted = true;
     const unsub = onConfigChange((config) => {
@@ -3420,162 +3398,17 @@ function ThemeProvider({
       unsub();
     };
   }, [configOverride]);
-  const contextValue = (0, import_react3.useMemo)(
+  const contextValue = (0, import_react4.useMemo)(
     () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
     [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children });
 }
 
-// src/ThemeToggle.tsx
-var import_react4 = __toESM(require("react"));
-function getPrimitives() {
-  try {
-    const RN = require("react-native");
-    return {
-      View: RN.View,
-      Text: RN.Text,
-      Touchable: RN.TouchableOpacity,
-      Switch: RN.Switch
-    };
-  } catch {
-    const View = ({ style, ...rest }) => import_react4.default.createElement("div", { style, ...rest });
-    const Text = ({ style, ...rest }) => import_react4.default.createElement("span", { style, ...rest });
-    const Touchable = ({ onPress, style, ...rest }) => import_react4.default.createElement("button", { onClick: onPress, style, ...rest });
-    const Switch = ({
-      value,
-      onValueChange,
-      accessibilityLabel
-    }) => import_react4.default.createElement("input", {
-      type: "checkbox",
-      checked: value,
-      onChange: (e) => onValueChange?.(e.target.checked),
-      "aria-label": accessibilityLabel
-    });
-    return { View, Text, Touchable, Switch };
-  }
-}
-var { View: _View, Text: _Text, Touchable: _Touchable, Switch: _Switch } = getPrimitives();
-function ThemeToggle({
-  variant = "button",
-  label,
-  lightLabel = "Light",
-  darkLabel = "Dark",
-  includeSystem = false,
-  style,
-  labelStyle
-}) {
-  const { mode, isDark, setMode, toggle } = useTheme();
-  const View = _View, Text = _Text, Touchable = _Touchable, Switch = _Switch;
-  if (variant === "switch") {
-    return import_react4.default.createElement(
-      View,
-      { style: { flexDirection: "row", alignItems: "center", gap: 8, ...style } },
-      import_react4.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, lightLabel),
-      import_react4.default.createElement(Switch, {
-        value: isDark,
-        onValueChange: (v) => setMode(v ? "dark" : "light"),
-        trackColor: { false: "#d1d5db", true: "#6366f1" },
-        thumbColor: isDark ? "#ffffff" : "#f3f4f6",
-        ios_backgroundColor: "#d1d5db",
-        accessibilityLabel: "Toggle dark mode"
-      }),
-      import_react4.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
-    );
-  }
-  if (variant === "icon-button") {
-    const icon = isDark ? darkLabel : lightLabel;
-    return import_react4.default.createElement(
-      Touchable,
-      {
-        onPress: toggle,
-        style: {
-          padding: 8,
-          borderRadius: 8,
-          backgroundColor: isDark ? "#374151" : "#f3f4f6",
-          ...style
-        },
-        accessibilityRole: "button",
-        accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-        accessibilityState: {}
-      },
-      import_react4.default.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
-    );
-  }
-  if (includeSystem) {
-    const modes = [
-      { key: "light", label: lightLabel },
-      { key: "dark", label: darkLabel },
-      { key: "system", label: "System" }
-    ];
-    return import_react4.default.createElement(
-      View,
-      { style: { flexDirection: "row", gap: 4, ...style } },
-      ...modes.map(
-        ({ key, label: mLabel }) => import_react4.default.createElement(
-          Touchable,
-          {
-            key,
-            onPress: () => setMode(key),
-            style: {
-              paddingHorizontal: 12,
-              paddingVertical: 6,
-              borderRadius: 6,
-              backgroundColor: mode === key ? isDark ? "#6366f1" : "#3b82f6" : isDark ? "#374151" : "#e5e7eb"
-            },
-            accessibilityRole: "button",
-            accessibilityLabel: `Set ${key} theme`,
-            accessibilityState: { selected: mode === key }
-          },
-          import_react4.default.createElement(Text, {
-            style: {
-              fontSize: 13,
-              fontWeight: "500",
-              color: mode === key ? "#ffffff" : isDark ? "#d1d5db" : "#374151",
-              ...labelStyle
-            }
-          }, mLabel)
-        )
-      )
-    );
-  }
-  const currentLabel = label ?? (isDark ? darkLabel : lightLabel);
-  return import_react4.default.createElement(
-    Touchable,
-    {
-      onPress: toggle,
-      style: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 8,
-        backgroundColor: isDark ? "#374151" : "#e5e7eb",
-        ...style
-      },
-      accessibilityRole: "button",
-      accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-      accessibilityState: {}
-    },
-    import_react4.default.createElement(Text, {
-      style: {
-        fontSize: 14,
-        fontWeight: "500",
-        color: isDark ? "#f9fafb" : "#111827",
-        ...labelStyle
-      }
-    }, currentLabel)
-  );
-}
-
 // src/styled.tsx
-var import_react7 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/useGlobalDarkMode.ts
-var import_react5 = __toESM(require("react"));
-var useSyncExternalStore = import_react5.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react5.default.useReducer((n) => n + 1, 0);
-  import_react5.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
-  return getSnapshot();
-};
 function useGlobalDarkMode() {
   return useSyncExternalStore(
     subscribeGlobalDarkMode,
@@ -3586,12 +3419,6 @@ function useGlobalDarkMode() {
 }
 
 // src/useGlobalWidth.ts
-var import_react6 = __toESM(require("react"));
-var useSyncExternalStore2 = import_react6.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react6.default.useReducer((n) => n + 1, 0);
-  import_react6.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
-  return getSnapshot();
-};
 var NOOP_SUB = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
@@ -3625,14 +3452,14 @@ function getWebWidth() {
   return typeof window !== "undefined" ? window.innerWidth : 0;
 }
 function useGlobalWidth() {
-  return useSyncExternalStore2(
+  return useSyncExternalStore(
     isWeb ? subscribeWebWidth : subscribeGlobalWidth,
     isWeb ? getWebWidth : getGlobalWidth,
     ZERO_SNAP
   );
 }
 function useConditionalWidth(active) {
-  return useSyncExternalStore2(
+  return useSyncExternalStore(
     active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB,
     active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
@@ -3660,6 +3487,42 @@ function hasInteractiveBuckets(resolved) {
   }
   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 = {
@@ -3909,13 +3772,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;
@@ -3940,7 +3801,7 @@ function transformToWebProps(originalName, tag, props) {
 
 // src/styled.tsx
 function styled(Component, baseClasses = "") {
-  const Styled = (0, import_react7.forwardRef)(
+  const Styled = (0, import_react5.forwardRef)(
     (props, ref) => {
       const {
         kb: extraClasses,
@@ -3950,6 +3811,7 @@ function styled(Component, baseClasses = "") {
         onPointerDown,
         onPointerUp,
         onPointerLeave,
+        onPointerCancel,
         onMouseEnter,
         onMouseLeave,
         onFocus,
@@ -3960,52 +3822,26 @@ function styled(Component, baseClasses = "") {
       const checked = !!props.checked;
       const { config } = useTheme();
       const isDark = useGlobalDarkMode();
-      const [pressed, setPressed] = (0, import_react7.useState)(false);
-      const [hovered, setHovered] = (0, import_react7.useState)(false);
-      const [focused, setFocused] = (0, import_react7.useState)(false);
-      const handlePressIn = (0, import_react7.useCallback)((e) => {
-        setPressed(true);
-        onPressIn?.(e);
-      }, [onPressIn]);
-      const handlePressOut = (0, import_react7.useCallback)((e) => {
-        setPressed(false);
-        onPressOut?.(e);
-      }, [onPressOut]);
-      const handlePointerDown = (0, import_react7.useCallback)((e) => {
-        setPressed(true);
-        onPointerDown?.(e);
-      }, [onPointerDown]);
-      const handlePointerUp = (0, import_react7.useCallback)((e) => {
-        setPressed(false);
-        onPointerUp?.(e);
-      }, [onPointerUp]);
-      const handlePointerLeave = (0, import_react7.useCallback)((e) => {
-        setPressed(false);
-        onPointerLeave?.(e);
-      }, [onPointerLeave]);
-      const handleMouseEnter = (0, import_react7.useCallback)((e) => {
-        setHovered(true);
-        onMouseEnter?.(e);
-      }, [onMouseEnter]);
-      const handleMouseLeave = (0, import_react7.useCallback)((e) => {
-        setHovered(false);
-        onMouseLeave?.(e);
-      }, [onMouseLeave]);
-      const handleFocus = (0, import_react7.useCallback)((e) => {
-        setFocused(true);
-        onFocus?.(e);
-      }, [onFocus]);
-      const handleBlur = (0, import_react7.useCallback)((e) => {
-        setFocused(false);
-        onBlur?.(e);
-      }, [onBlur]);
+      const [pressed, setPressed] = (0, import_react5.useState)(false);
+      const [hovered, setHovered] = (0, import_react5.useState)(false);
+      const [focused, setFocused] = (0, import_react5.useState)(false);
+      const handlePressIn = (0, import_react5.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+      const handlePressOut = (0, import_react5.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+      const handlePointerDown = (0, import_react5.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+      const handlePointerUp = (0, import_react5.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+      const handlePointerLeave = (0, import_react5.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
+      const handlePointerCancel = (0, import_react5.useCallback)(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
+      const handleMouseEnter = (0, import_react5.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+      const handleMouseLeave = (0, import_react5.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+      const handleFocus = (0, import_react5.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+      const handleBlur = (0, import_react5.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react7.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const hasInteractive = (0, import_react7.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
+      const resolved = (0, import_react5.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const hasInteractive = (0, import_react5.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-      const computedStyle = (0, import_react7.useMemo)(
+      const computedStyle = (0, import_react5.useMemo)(
         () => isWeb ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
@@ -4016,7 +3852,7 @@ function styled(Component, baseClasses = "") {
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
-      return import_react7.default.createElement(effectiveComponent, {
+      return import_react5.default.createElement(effectiveComponent, {
         ref,
         ...effectiveRest,
         style: finalStyle,
@@ -4026,7 +3862,7 @@ function styled(Component, baseClasses = "") {
         // Always forward user-provided handlers to avoid silently swallowing them.
         // onPressIn/onPressOut are forwarded on web too (not just native) since
         // react-native-web components rely on receiving them directly.
-        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,
@@ -4040,12 +3876,12 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-var import_react8 = require("react");
+var import_react6 = require("react");
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react8.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
     const breakpoints = getActiveBreakpoints(width);
     return flatten(resolved, isDark, state, breakpoints);
@@ -4054,20 +3890,20 @@ function useStyles(classString, state = {}) {
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react8.useMemo)(
+  return (0, import_react6.useMemo)(
     () => resolve(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
 // src/useBreakpoint.ts
-var import_react9 = require("react");
+var import_react7 = require("react");
 function useBreakpoint() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const sorted = (0, import_react9.useMemo)(
-    () => Object.entries(screens).filter((entry) => typeof entry[1] === "number").sort(([, a], [, b]) => b - a),
+  const sorted = (0, import_react7.useMemo)(
+    () => Object.entries(screens).map(([name, v]) => [name, typeof v === "number" ? v : parseInt(String(v), 10)]).filter(([, minW]) => !Number.isNaN(minW)).sort(([, a], [, b]) => b - a),
     [screens]
   );
   for (const [name, minW] of sorted) {
@@ -4079,24 +3915,19 @@ function useResponsive() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react7.useMemo)(() => {
     const result = {};
-    for (const [name, minW] of Object.entries(screens)) {
-      if (typeof minW === "number") result[name] = width >= minW;
+    for (const [name, v] of Object.entries(screens)) {
+      const minW = typeof v === "number" ? v : parseInt(String(v), 10);
+      if (!Number.isNaN(minW)) result[name] = width >= minW;
     }
     return result;
   }, [screens, width]);
 }
 
 // src/InteractiveWrapper.tsx
-var import_react10 = __toESM(require("react"));
-function chain(original, extra) {
-  return (...args) => {
-    original?.(...args);
-    extra();
-  };
-}
-var InteractiveWrapper = (0, import_react10.forwardRef)(
+var import_react8 = __toESM(require("react"));
+var InteractiveWrapper = (0, import_react8.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -4107,6 +3938,7 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
     onPointerDown,
     onPointerUp,
     onPointerLeave,
+    onPointerCancel,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -4117,51 +3949,26 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-    const [pressed, setPressed] = (0, import_react10.useState)(false);
-    const [hovered, setHovered] = (0, import_react10.useState)(false);
-    const [focused, setFocused] = (0, import_react10.useState)(false);
-    const handlePressIn = (0, import_react10.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react10.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = (0, import_react10.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = (0, import_react10.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = (0, import_react10.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handleMouseEnter = (0, import_react10.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react10.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react10.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react10.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const [pressed, setPressed] = (0, import_react8.useState)(false);
+    const [hovered, setHovered] = (0, import_react8.useState)(false);
+    const [focused, setFocused] = (0, import_react8.useState)(false);
+    const handlePressIn = (0, import_react8.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react8.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react8.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react8.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react8.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
+    const handlePointerCancel = (0, import_react8.useCallback)(chain(onPointerCancel, () => setPressed(false)), [onPointerCancel]);
+    const handleMouseEnter = (0, import_react8.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react8.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react8.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react8.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const { children, disabled, checked, ...restForComponent } = rest;
-    const computedStyle = (0, import_react10.useMemo)(
+    const computedStyle = (0, import_react8.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]
@@ -4178,13 +3985,13 @@ var InteractiveWrapper = (0, import_react10.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_react10.default.createElement(Component, componentProps, ...children) : import_react10.default.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? import_react8.default.createElement(Component, componentProps, ...children) : import_react8.default.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
@@ -4206,8 +4013,8 @@ function cx(...classes) {
   InteractiveWrapper,
   ThemeContext,
   ThemeProvider,
-  ThemeToggle,
   buildConfig,
+  clearCache,
   cx,
   defaultColors,
   defaultTheme,
@@ -4221,6 +4028,7 @@ function cx(...classes) {
   parseClasses,
   registerWebElement,
   resolve,
+  setResolveTarget,
   splitClassTokens,
   styled,
   updateConfig,