@kbach/react 0.2.8 → 0.2.9

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
   syncGlobalDarkMode,
   updateConfig,
   useGlobalDarkMode
-} from "./chunk-GN4JPJHC.mjs";
+} from "./chunk-V5KHX4CZ.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -29,12 +29,72 @@ function useTheme() {
   }
   return ctx;
 }
+function useIsDark() {
+  return useTheme().isDark;
+}
+
+// src/useColors.ts
+import { useMemo } from "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 useMemo(() => wrapColors(config.theme.colors), [config.theme.colors]);
+}
 
 // src/ThemeProvider.tsx
 import {
   useCallback,
   useEffect,
-  useMemo,
+  useMemo as useMemo2,
   useRef,
   useState
 } from "react";
@@ -114,12 +174,16 @@ function ThemeProvider({
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
+  useEffect(() => {
+    if (!configOverride) return;
+    setResolvedConfig(buildConfig(configOverride));
+  }, [configOverride]);
   useEffect(() => {
     if (configOverride) return;
     const unsub = onConfigChange(setResolvedConfig);
     return unsub;
   }, [configOverride]);
-  const contextValue = useMemo(
+  const contextValue = useMemo2(
     () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
     [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
   );
@@ -270,7 +334,7 @@ import React3, {
   forwardRef,
   useState as useState2,
   useCallback as useCallback3,
-  useMemo as useMemo2
+  useMemo as useMemo3
 } from "react";
 function styled(Component, baseClasses = "") {
   const Styled = forwardRef(
@@ -315,8 +379,8 @@ function styled(Component, baseClasses = "") {
         onBlur?.(e);
       }, [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = useMemo2(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const computedStyle = useMemo2(
+      const resolved = useMemo3(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const computedStyle = useMemo3(
         () => flatten(resolved, isDark, { pressed, hover: hovered, focus: focused }),
         [resolved, isDark, pressed, hovered, focused]
       );
@@ -326,8 +390,9 @@ function styled(Component, baseClasses = "") {
         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,
@@ -341,11 +406,11 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return useMemo3(() => {
+  return useMemo4(() => {
     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]);
@@ -353,14 +418,14 @@ function useStyles(classString, state = {}) {
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return useMemo3(
+  return useMemo4(
     () => resolve(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
-// 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) {
@@ -382,14 +447,17 @@ export {
   defaultTheme,
   flatten,
   getConfig,
+  kb,
   parseClass,
   parseClasses,
   resolve,
   styled,
-  tw,
   updateConfig,
+  useColors,
   useGlobalDarkMode,
+  useIsDark,
   useResolvedStyle,
   useStyles,
-  useTheme
+  useTheme,
+  wrapColors
 };

package/dist/jsx-dev-runtime.js

@@ -598,6 +598,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",
@@ -1027,7 +1034,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 {
@@ -1493,43 +1500,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 }) => {
@@ -1594,7 +1622,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 };
   },
@@ -1642,9 +1669,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 };
   },
@@ -1687,25 +1720,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` }] };
@@ -1714,18 +1752,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 }) => {
@@ -1802,18 +1853,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
@@ -1835,6 +1893,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;
@@ -1844,10 +1933,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") {
@@ -1857,6 +1950,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} }`;
   }
@@ -2037,20 +2138,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(".");
@@ -2166,8 +2271,8 @@ var InteractiveWrapper = (0, import_react2.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,

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-YDKLJFFY.mjs";
-import "./chunk-GN4JPJHC.mjs";
+} from "./chunk-Q5RMVTAU.mjs";
+import "./chunk-V5KHX4CZ.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.d.mts

@@ -5,7 +5,7 @@ import { ReactElement } from 'react';
  * @kbach/react/jsx-runtime
  *
  * Drop-in replacement for react/jsx-runtime.
- * Intercepts `className` and `tw` props on EVERY JSX element — React Native
+ * Intercepts `className` and `kb` props on EVERY JSX element — React Native
  * built-ins, HTML elements on web, and any third-party library component.
  */
 

package/dist/jsx-runtime.d.ts

@@ -5,7 +5,7 @@ import { ReactElement } from 'react';
  * @kbach/react/jsx-runtime
  *
  * Drop-in replacement for react/jsx-runtime.
- * Intercepts `className` and `tw` props on EVERY JSX element — React Native
+ * Intercepts `className` and `kb` props on EVERY JSX element — React Native
  * built-ins, HTML elements on web, and any third-party library component.
  */