@kbach/react 0.2.8 → 0.3.0

package/dist/index.js

@@ -40,16 +40,19 @@ __export(index_exports, {
   defaultTheme: () => defaultTheme,
   flatten: () => flatten,
   getConfig: () => getConfig,
+  kb: () => kb,
   parseClass: () => parseClass,
   parseClasses: () => parseClasses,
   resolve: () => resolve,
   styled: () => styled,
-  tw: () => tw,
   updateConfig: () => updateConfig,
+  useColors: () => useColors,
   useGlobalDarkMode: () => useGlobalDarkMode,
+  useIsDark: () => useIsDark,
   useResolvedStyle: () => useResolvedStyle,
   useStyles: () => useStyles,
-  useTheme: () => useTheme
+  useTheme: () => useTheme,
+  wrapColors: () => wrapColors
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -65,9 +68,69 @@ function useTheme() {
   }
   return ctx;
 }
+function useIsDark() {
+  return useTheme().isDark;
+}
 
-// src/ThemeProvider.tsx
+// 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);
+    const [rs, gs, bs] = h.length === 3 ? [h[0] + h[0], h[1] + h[1], h[2] + h[2]] : [h.slice(0, 2), h.slice(2, 4), 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) => 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 = {
@@ -629,6 +692,13 @@ function escapeCSSSelector(cls) {
 }
 
 // src/core/parser.ts
+var PLUGIN_MODIFIERS = /* @__PURE__ */ new Set();
+function registerModifier(name) {
+  PLUGIN_MODIFIERS.add(name);
+}
+function clearPluginModifiers() {
+  PLUGIN_MODIFIERS.clear();
+}
 var MODIFIERS = /* @__PURE__ */ new Set([
   // Theme
   "dark",
@@ -1058,7 +1128,7 @@ function parseClass(className) {
     const colonIdx = findOuterColon(remaining);
     if (colonIdx === -1) break;
     const candidate = remaining.slice(0, colonIdx);
-    if (MODIFIERS.has(candidate)) {
+    if (MODIFIERS.has(candidate) || PLUGIN_MODIFIERS.has(candidate)) {
       modifiers.push(candidate);
       remaining = remaining.slice(colonIdx + 1);
     } else {
@@ -1524,43 +1594,64 @@ var RESOLVERS = {
   // ── Border width ───────────────────────────────────────────────────────────
   border: ({ value, isArbitrary }, { colors, borderWidth, spacing }) => {
     if (!value) return { borderWidth: borderWidth["DEFAULT"] ?? 1 };
-    const color = resolveColor(value, colors, isArbitrary);
-    if (color) return { borderColor: color };
     if (isArbitrary) {
       const w2 = toNativeValue(value);
-      return { borderWidth: typeof w2 === "number" ? w2 : 1 };
+      if (typeof w2 === "number") return { borderWidth: w2 };
+      return { borderColor: value };
     }
+    const color = resolveColor(value, colors, false);
+    if (color) return { borderColor: color };
     const w = borderWidth[value] ?? spacing[value];
     if (w !== void 0) return { borderWidth: typeof w === "number" ? w : parseFloat(String(w)) };
     return null;
   },
   "border-t": ({ value, isArbitrary }, { colors, borderWidth }) => {
     if (!value) return { borderTopWidth: 1 };
-    const color = resolveColor(value, colors, isArbitrary);
+    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] ?? (isArbitrary ? toNativeValue(value) : null);
-    return w !== null ? { borderTopWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderTopWidth: w } : null;
   },
   "border-r": ({ value, isArbitrary }, { colors, borderWidth }) => {
     if (!value) return { borderRightWidth: 1 };
-    const color = resolveColor(value, colors, isArbitrary);
+    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] ?? (isArbitrary ? toNativeValue(value) : null);
-    return w !== null ? { borderRightWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderRightWidth: w } : null;
   },
   "border-b": ({ value, isArbitrary }, { colors, borderWidth }) => {
     if (!value) return { borderBottomWidth: 1 };
-    const color = resolveColor(value, colors, isArbitrary);
+    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] ?? (isArbitrary ? toNativeValue(value) : null);
-    return w !== null ? { borderBottomWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderBottomWidth: w } : null;
   },
   "border-l": ({ value, isArbitrary }, { colors, borderWidth }) => {
     if (!value) return { borderLeftWidth: 1 };
-    const color = resolveColor(value, colors, isArbitrary);
+    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] ?? (isArbitrary ? toNativeValue(value) : null);
-    return w !== null ? { borderLeftWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderLeftWidth: w } : null;
   },
   // ── Border radius ──────────────────────────────────────────────────────────
   rounded: ({ value, isArbitrary }, { borderRadius }) => {
@@ -1625,7 +1716,6 @@ var RESOLVERS = {
     return { flexShrink: isNaN(n) ? 1 : n };
   },
   order: ({ value, isArbitrary }, _) => {
-    if (isArbitrary) return { order: parseInt(value) };
     const n = parseInt(value);
     return isNaN(n) ? null : { order: n };
   },
@@ -1673,9 +1763,15 @@ var RESOLVERS = {
   },
   // ── Z-index ────────────────────────────────────────────────────────────────
   z: ({ value, isArbitrary }, { zIndex }) => {
-    if (isArbitrary) return { zIndex: parseInt(value) };
+    if (isArbitrary) {
+      const n2 = parseInt(value);
+      return isNaN(n2) ? null : { zIndex: n2 };
+    }
     const v = zIndex[value];
-    if (v !== void 0) return { zIndex: v };
+    if (v !== void 0) {
+      if (v === "auto") return isWeb ? { zIndex: "auto" } : null;
+      return { zIndex: v };
+    }
     const n = parseInt(value);
     return isNaN(n) ? null : { zIndex: n };
   },
@@ -1718,25 +1814,30 @@ var RESOLVERS = {
     return shadow[key] ?? null;
   },
   // ── Scale ──────────────────────────────────────────────────────────────────
+  // Non-arbitrary: scale-150 → value='150' → 150/100 = 1.5
+  // Arbitrary:     scale-[1.5] → value='1.5' → used as-is (already the factor)
   scale: ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
     return isWeb ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
   },
   "scale-x": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
     return isWeb ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
   },
   "scale-y": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
     return isWeb ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
   },
   // ── Rotate ─────────────────────────────────────────────────────────────────
   rotate: ({ value, negative, isArbitrary }) => {
-    const raw = isArbitrary ? value : `${value}deg`;
-    const deg = parseFloat(raw);
+    if (isArbitrary) {
+      const finalValue = negative ? `-${value}` : value;
+      return isWeb ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
+    }
+    const deg = parseFloat(value);
     if (isNaN(deg)) return null;
     const finalDeg = negative ? -deg : deg;
     return isWeb ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
@@ -1745,18 +1846,31 @@ var RESOLVERS = {
   "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    return isWeb ? { transform: `translateX(${v})` } : { transform: [{ translateX: typeof v === "string" ? parseFloat(v) : v }] };
+    if (isWeb) return { transform: `translateX(${v})` };
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return isNaN(n) ? null : { transform: [{ translateX: n }] };
+    }
+    return { transform: [{ translateX: v }] };
   },
   "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    return isWeb ? { transform: `translateY(${v})` } : { transform: [{ translateY: typeof v === "string" ? parseFloat(v) : v }] };
+    if (isWeb) return { transform: `translateY(${v})` };
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return isNaN(n) ? null : { transform: [{ translateY: n }] };
+    }
+    return { transform: [{ translateY: v }] };
   },
   // ── Aspect ratio ───────────────────────────────────────────────────────────
   aspect: ({ value, isArbitrary }) => {
     if (isArbitrary) return { aspectRatio: value };
     const presets = { auto: "auto", square: 1, video: 16 / 9 };
-    return value in presets ? { aspectRatio: presets[value] } : null;
+    if (!(value in presets)) return null;
+    const v = presets[value];
+    if (v === "auto") return isWeb ? { aspectRatio: "auto" } : null;
+    return { aspectRatio: v };
   },
   // ── Transition (web-only; use Animated API on native) ─────────────────────
   transition: ({ value }) => {
@@ -1833,18 +1947,25 @@ var RESOLVERS = {
   }
 };
 function resolveUtility(parsed, theme) {
-  if (!parsed.value && parsed.utility in STANDALONE) {
-    return STANDALONE[parsed.utility] ?? null;
+  if (!parsed.value) {
+    if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility in STANDALONE) return STANDALONE[parsed.utility] ?? null;
   }
-  const resolver = RESOLVERS[parsed.utility];
+  const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
   return null;
 }
-function getStandaloneMap() {
-  return STANDALONE;
+var PLUGIN_STANDALONE = {};
+var PLUGIN_RESOLVERS = {};
+function clearPluginUtilities() {
+  for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
+  for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
 }
-function getResolverMap() {
-  return RESOLVERS;
+function getPluginStandaloneMap() {
+  return PLUGIN_STANDALONE;
+}
+function getPluginResolverMap() {
+  return PLUGIN_RESOLVERS;
 }
 
 // src/core/resolver.ts
@@ -1866,6 +1987,37 @@ function injectRule(rule) {
   } catch {
   }
 }
+var MODIFIER_TO_PSEUDO = {
+  hover: ":hover",
+  focus: ":focus",
+  "focus-within": ":focus-within",
+  "focus-visible": ":focus-visible",
+  active: ":active",
+  pressed: ":active",
+  disabled: ":disabled",
+  checked: ":checked",
+  visited: ":visited",
+  placeholder: "::placeholder",
+  first: ":first-child",
+  last: ":last-child",
+  odd: ":nth-child(odd)",
+  even: ":nth-child(even)",
+  only: ":only-child",
+  "not-hover": ":not(:hover)",
+  "not-focus": ":not(:focus)",
+  "not-active": ":not(:active)",
+  "not-pressed": ":not(:active)",
+  "not-disabled": ":not(:disabled)",
+  "not-checked": ":not(:checked)",
+  "not-visited": ":not(:visited)"
+};
+var GROUP_PEER_PREFIX = {
+  "group-hover": ".group:hover",
+  "group-focus": ".group:focus",
+  "peer-hover": ".peer:hover ~",
+  "peer-focus": ".peer:focus ~"
+};
+var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
 function injectClassRule(cls, bucketKey, styles, darkMode) {
   const cssDecls = styleValueToCSS(styles);
   if (!cssDecls) return;
@@ -1875,10 +2027,14 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
     return;
   }
   const mods = bucketKey.split(":");
-  const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
-  const hasDark = mods.includes("dark");
-  const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
-  const selector = `.${escaped}${pseudoSuffix}`;
+  const hasDark = mods.includes("dark") || mods.includes("not-light");
+  const hasLight = mods.includes("light") || mods.includes("not-dark");
+  const ancestorMods = mods.filter((m) => m in GROUP_PEER_PREFIX);
+  const pseudoMods = mods.filter((m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX));
+  const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
+  const elementSelector = `.${escaped}${pseudoSuffix}`;
+  const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
+  const selector = `${ancestorPrefix}${elementSelector}`;
   let rule;
   if (hasDark) {
     if (darkMode === "media") {
@@ -1888,6 +2044,14 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
     } else {
       rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
     }
+  } else if (hasLight) {
+    if (darkMode === "media") {
+      rule = `@media (prefers-color-scheme: light) { ${selector} { ${cssDecls} } }`;
+    } else if (darkMode === "class") {
+      rule = `:not(.dark) ${selector} { ${cssDecls} }`;
+    } else {
+      rule = `[data-theme="light"] ${selector} { ${cssDecls} }`;
+    }
   } else {
     rule = `${selector} { ${cssDecls} }`;
   }
@@ -2013,6 +2177,9 @@ function matchesMods(mods, isDark, state) {
     }
   });
 }
+function clearCache() {
+  styleCache.clear();
+}
 
 // src/core/config.ts
 function deepMerge(base, override) {
@@ -2068,20 +2235,24 @@ function buildConfig(userConfig) {
     theme,
     plugins: userConfig.plugins ?? []
   };
+  clearPluginUtilities();
+  clearPluginModifiers();
+  const pluginAPI = makePluginAPI(resolved.theme);
   for (const plugin of resolved.plugins) {
-    plugin(makePluginAPI(resolved.theme));
+    plugin(pluginAPI);
   }
   return resolved;
 }
 function makePluginAPI(theme) {
-  const standalone = getStandaloneMap();
-  const resolvers = getResolverMap();
+  const standalone = getPluginStandaloneMap();
+  const resolvers = getPluginResolverMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;
     },
-    addVariant(name, _selector) {
-      customVariants[name] = _selector;
+    addVariant(name, selector) {
+      customVariants[name] = selector;
+      registerModifier(name);
     },
     theme(path, defaultValue) {
       const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
@@ -2105,6 +2276,7 @@ function onConfigChange(listener) {
 function updateConfig(userConfig) {
   const store = getConfigStore();
   store.resolved = buildConfig(userConfig);
+  clearCache();
   for (const listener of store.listeners) {
     listener(store.resolved);
   }
@@ -2192,40 +2364,40 @@ function ThemeProvider({
   config: configOverride,
   disablePersistence = false
 }) {
-  const [resolvedConfig, setResolvedConfig] = (0, import_react2.useState)(
+  const [resolvedConfig, setResolvedConfig] = (0, import_react3.useState)(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const [webScheme, setWebScheme] = (0, import_react2.useState)(() => {
+  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 systemScheme = isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
-  const [mode, _setMode] = (0, import_react2.useState)(() => {
+  const [mode, _setMode] = (0, import_react3.useState)(() => {
     if (!disablePersistence) {
       const persisted = loadPersistedMode();
       if (persisted) return persisted;
     }
     return defaultMode;
   });
-  const setMode = (0, import_react2.useCallback)((next) => {
+  const setMode = (0, import_react3.useCallback)((next) => {
     _setMode(next);
     if (!disablePersistence) persistMode(next);
   }, [disablePersistence]);
-  const toggle = (0, import_react2.useCallback)(() => {
+  const toggle = (0, import_react3.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_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
     setGlobalDarkMode(isDark);
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);
-  const setWebSchemeRef = (0, import_react2.useRef)(setWebScheme);
+  const setWebSchemeRef = (0, import_react3.useRef)(setWebScheme);
   setWebSchemeRef.current = setWebScheme;
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isWeb || typeof window === "undefined") return;
     const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
     if (!mq) return;
@@ -2235,12 +2407,16 @@ function ThemeProvider({
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
+    if (!configOverride) return;
+    setResolvedConfig(buildConfig(configOverride));
+  }, [configOverride]);
+  (0, import_react3.useEffect)(() => {
     if (configOverride) return;
     const unsub = onConfigChange(setResolvedConfig);
     return unsub;
   }, [configOverride]);
-  const contextValue = (0, import_react2.useMemo)(
+  const contextValue = (0, import_react3.useMemo)(
     () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
     [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
   );
@@ -2248,7 +2424,7 @@ function ThemeProvider({
 }
 
 // src/ThemeToggle.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 function getPrimitives() {
   try {
     const RN = require("react-native");
@@ -2259,14 +2435,14 @@ function getPrimitives() {
       Switch: RN.Switch
     };
   } catch {
-    const View = ({ style, ...rest }) => import_react3.default.createElement("div", { style, ...rest });
-    const Text = ({ style, ...rest }) => import_react3.default.createElement("span", { style, ...rest });
-    const Touchable = ({ onPress, style, ...rest }) => import_react3.default.createElement("button", { onClick: onPress, style, ...rest });
+    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_react3.default.createElement("input", {
+    }) => import_react4.default.createElement("input", {
       type: "checkbox",
       checked: value,
       onChange: (e) => onValueChange?.(e.target.checked),
@@ -2288,11 +2464,11 @@ function ThemeToggle({
   const { mode, isDark, setMode, toggle } = useTheme();
   const View = _View, Text = _Text, Touchable = _Touchable, Switch = _Switch;
   if (variant === "switch") {
-    return import_react3.default.createElement(
+    return import_react4.default.createElement(
       View,
       { style: { flexDirection: "row", alignItems: "center", gap: 8, ...style } },
-      import_react3.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, lightLabel),
-      import_react3.default.createElement(Switch, {
+      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" },
@@ -2300,12 +2476,12 @@ function ThemeToggle({
         ios_backgroundColor: "#d1d5db",
         accessibilityLabel: "Toggle dark mode"
       }),
-      import_react3.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
+      import_react4.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
     );
   }
   if (variant === "icon-button") {
     const icon = isDark ? darkLabel : lightLabel;
-    return import_react3.default.createElement(
+    return import_react4.default.createElement(
       Touchable,
       {
         onPress: toggle,
@@ -2319,7 +2495,7 @@ function ThemeToggle({
         accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
         accessibilityState: {}
       },
-      import_react3.default.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
+      import_react4.default.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
     );
   }
   if (includeSystem) {
@@ -2328,11 +2504,11 @@ function ThemeToggle({
       { key: "dark", label: darkLabel },
       { key: "system", label: "System" }
     ];
-    return import_react3.default.createElement(
+    return import_react4.default.createElement(
       View,
       { style: { flexDirection: "row", gap: 4, ...style } },
       ...modes.map(
-        ({ key, label: mLabel }) => import_react3.default.createElement(
+        ({ key, label: mLabel }) => import_react4.default.createElement(
           Touchable,
           {
             key,
@@ -2347,7 +2523,7 @@ function ThemeToggle({
             accessibilityLabel: `Set ${key} theme`,
             accessibilityState: { selected: mode === key }
           },
-          import_react3.default.createElement(Text, {
+          import_react4.default.createElement(Text, {
             style: {
               fontSize: 13,
               fontWeight: "500",
@@ -2360,7 +2536,7 @@ function ThemeToggle({
     );
   }
   const currentLabel = label ?? (isDark ? darkLabel : lightLabel);
-  return import_react3.default.createElement(
+  return import_react4.default.createElement(
     Touchable,
     {
       onPress: toggle,
@@ -2375,7 +2551,7 @@ function ThemeToggle({
       accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
       accessibilityState: {}
     },
-    import_react3.default.createElement(Text, {
+    import_react4.default.createElement(Text, {
       style: {
         fontSize: 14,
         fontWeight: "500",
@@ -2387,9 +2563,9 @@ function ThemeToggle({
 }
 
 // src/styled.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 function styled(Component, baseClasses = "") {
-  const Styled = (0, import_react4.forwardRef)(
+  const Styled = (0, import_react5.forwardRef)(
     (props, ref) => {
       const {
         kb: extraClasses,
@@ -2403,47 +2579,48 @@ function styled(Component, baseClasses = "") {
         ...rest
       } = props;
       const { isDark, config } = useTheme();
-      const [pressed, setPressed] = (0, import_react4.useState)(false);
-      const [hovered, setHovered] = (0, import_react4.useState)(false);
-      const [focused, setFocused] = (0, import_react4.useState)(false);
-      const handlePressIn = (0, import_react4.useCallback)((e) => {
+      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)((e) => {
         setPressed(true);
         onPressIn?.(e);
       }, [onPressIn]);
-      const handlePressOut = (0, import_react4.useCallback)((e) => {
+      const handlePressOut = (0, import_react5.useCallback)((e) => {
         setPressed(false);
         onPressOut?.(e);
       }, [onPressOut]);
-      const handleMouseEnter = (0, import_react4.useCallback)((e) => {
+      const handleMouseEnter = (0, import_react5.useCallback)((e) => {
         setHovered(true);
         onMouseEnter?.(e);
       }, [onMouseEnter]);
-      const handleMouseLeave = (0, import_react4.useCallback)((e) => {
+      const handleMouseLeave = (0, import_react5.useCallback)((e) => {
         setHovered(false);
         onMouseLeave?.(e);
       }, [onMouseLeave]);
-      const handleFocus = (0, import_react4.useCallback)((e) => {
+      const handleFocus = (0, import_react5.useCallback)((e) => {
         setFocused(true);
         onFocus?.(e);
       }, [onFocus]);
-      const handleBlur = (0, import_react4.useCallback)((e) => {
+      const handleBlur = (0, import_react5.useCallback)((e) => {
         setFocused(false);
         onBlur?.(e);
       }, [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react4.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const computedStyle = (0, import_react4.useMemo)(
+      const resolved = (0, import_react5.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const computedStyle = (0, import_react5.useMemo)(
         () => flatten(resolved, isDark, { pressed, hover: hovered, focus: focused }),
         [resolved, isDark, pressed, hovered, focused]
       );
       const extraStyle = Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp;
       const finalStyle = extraStyle ? { ...computedStyle, ...extraStyle } : computedStyle;
-      return import_react4.default.createElement(Component, {
+      return import_react5.default.createElement(Component, {
         ref,
         ...rest,
         style: finalStyle,
-        onPressIn: handlePressIn,
-        onPressOut: handlePressOut,
+        // onPressIn / onPressOut are React Native-only events; forwarding them to
+        // a DOM element on web triggers React's unknown-prop warning.
+        ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
@@ -2457,11 +2634,11 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react5.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
     return flatten(resolved, isDark, state);
   }, [normalised, isDark, config, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
@@ -2469,17 +2646,17 @@ function useStyles(classString, state = {}) {
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react5.useMemo)(
+  return (0, import_react6.useMemo)(
     () => resolve(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
 // src/useGlobalDarkMode.ts
-var import_react6 = __toESM(require("react"));
-var useSyncExternalStore = import_react6.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react6.default.useReducer((n) => n + 1, 0);
-  import_react6.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+var import_react7 = __toESM(require("react"));
+var useSyncExternalStore = import_react7.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react7.default.useReducer((n) => n + 1, 0);
+  import_react7.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
   return getSnapshot();
 };
 function useGlobalDarkMode() {
@@ -2492,14 +2669,14 @@ function useGlobalDarkMode() {
 }
 
 // src/InteractiveWrapper.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 function chain(original, extra) {
   return (...args) => {
     original?.(...args);
     extra();
   };
 }
-var InteractiveWrapper = (0, import_react7.forwardRef)(
+var InteractiveWrapper = (0, import_react8.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -2514,16 +2691,16 @@ var InteractiveWrapper = (0, import_react7.forwardRef)(
     ...rest
   }, ref) {
     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)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react7.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handleMouseEnter = (0, import_react7.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react7.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react7.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react7.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
-    const computedStyle = (0, import_react7.useMemo)(
+    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 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 computedStyle = (0, import_react8.useMemo)(
       () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }),
       [resolvedStyle, isDark, pressed, hovered, focused]
     );
@@ -2534,20 +2711,20 @@ var InteractiveWrapper = (0, import_react7.forwardRef)(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
+      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? import_react7.default.createElement(Component, componentProps, ...children) : import_react7.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";
 
-// src/tw.ts
-function tw(classString, isDark = false) {
+// src/kb.ts
+function kb(classString, isDark = false) {
   const config = getConfig();
   const resolved = resolve(classString, config.theme, config.darkMode);
   if (isWeb) {
@@ -2570,14 +2747,17 @@ function cx(...classes) {
   defaultTheme,
   flatten,
   getConfig,
+  kb,
   parseClass,
   parseClasses,
   resolve,
   styled,
-  tw,
   updateConfig,
+  useColors,
   useGlobalDarkMode,
+  useIsDark,
   useResolvedStyle,
   useStyles,
-  useTheme
+  useTheme,
+  wrapColors
 });