@kbach/ui 0.1.0-beta.0

package/dist/index.mjs

@@ -0,0 +1,589 @@
+'use client';
+import {
+  BASE_RESET,
+  EMPTY_BREAKPOINTS,
+  InteractiveWrapper,
+  RESET_STYLE_ID,
+  buildConfig,
+  chain,
+  clearCache,
+  composeNativeStyle,
+  defaultColors,
+  defaultTheme,
+  disableRuntimeCSS,
+  flatten,
+  generateKbachTypesDts,
+  getActiveBreakpoints,
+  getConfig,
+  getEffectiveIsWeb,
+  getGlobalScreens,
+  getImpliedRNClasses,
+  getWebTag,
+  hasInteractiveBuckets,
+  hasResponsiveBuckets,
+  initConfig,
+  isModeAwareColor,
+  isNative,
+  isWeb,
+  kbachWarn,
+  normalizeClassString,
+  onConfigChange,
+  parseClass,
+  parseClasses,
+  parseHexRgb,
+  registerWebElement,
+  resetConfig,
+  resolve,
+  setGlobalDarkMode,
+  setGlobalWidth,
+  setResolveTarget,
+  splitClassTokens,
+  syncGlobalDarkMode,
+  syncGlobalScreens,
+  syncGlobalWidth,
+  transformToWebProps,
+  updateConfig,
+  useConditionalGlobalDarkMode,
+  useConditionalWidth,
+  useGlobalDarkMode,
+  useGlobalWidth,
+  useSyncExternalStore
+} from "./chunk-BPCFICND.mjs";
+
+// src/context.tsx
+import { createContext, useContext } from "react";
+var ThemeContext = globalThis.__kbachThemeContext ?? (globalThis.__kbachThemeContext = createContext(null));
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      "[Kbach] useTheme() must be called inside a <ThemeProvider>. Wrap your app root with <ThemeProvider>."
+    );
+  }
+  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 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 pickSide(value, isDark) {
+  return isModeAwareColor(value) ? isDark ? value.dark : value.light : value;
+}
+function makeShadeProxy(shades, isDark) {
+  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 color2 = target[shade];
+        return color2 !== void 0 ? applyOpacity(pickSide(color2, isDark), op) : void 0;
+      }
+      const color = target[key];
+      return color !== void 0 ? pickSide(color, isDark) : void 0;
+    }
+  });
+}
+function wrapColors(rawColors, isDark = false) {
+  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 entry2 !== void 0 && (typeof entry2 === "string" || isModeAwareColor(entry2)) ? applyOpacity(pickSide(entry2, isDark), op) : void 0;
+      }
+      const entry = rawColors[key];
+      if (entry === void 0) return void 0;
+      if (typeof entry === "string" || isModeAwareColor(entry)) return pickSide(entry, isDark);
+      const cacheKey = `${key}:${isDark}`;
+      if (!cache.has(cacheKey)) cache.set(cacheKey, makeShadeProxy(entry, isDark));
+      return cache.get(cacheKey);
+    }
+  });
+}
+function useColors() {
+  const { config, isDark } = useTheme();
+  return useMemo(() => wrapColors(config.theme.colors, isDark), [config.theme.colors, isDark]);
+}
+
+// src/useSpacing.ts
+import { useMemo as useMemo2 } from "react";
+function wrapSpacing(rawSpacing) {
+  return rawSpacing;
+}
+function useSpacing() {
+  const { config } = useTheme();
+  return useMemo2(() => wrapSpacing(config.theme.spacing), [config.theme.spacing]);
+}
+
+// src/ThemeProvider.tsx
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useRef,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = isWeb || isNative ? useLayoutEffect : useEffect;
+var STORAGE_KEY = "kbach-theme";
+var _mountedProviderCount = 0;
+var _warnedMultipleProviders = false;
+var _mountedConfigOverrideCount = 0;
+var _warnedConfigOverride = false;
+var _warnedMediaModeToggle = false;
+function loadPersistedMode() {
+  try {
+    if (isWeb) return localStorage.getItem(STORAGE_KEY);
+    return null;
+  } catch {
+    return null;
+  }
+}
+function persistMode(mode) {
+  try {
+    if (isWeb) localStorage.setItem(STORAGE_KEY, 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;
+  if (strategy === "attribute") {
+    root.setAttribute("data-theme", resolvedMode);
+  } else if (strategy === "class") {
+    root.classList.toggle("dark", resolvedMode === "dark");
+    root.classList.toggle("light", resolvedMode === "light");
+  }
+}
+function ThemeProvider({
+  children,
+  defaultMode = "system",
+  colorScheme,
+  windowWidth: windowWidthProp,
+  config: configOverride,
+  disablePersistence = false
+}) {
+  const [resolvedConfig, setResolvedConfig] = useState(
+    () => configOverride ? buildConfig(configOverride) : getConfig()
+  );
+  const _prevConfigOverrideRef = useRef(void 0);
+  if (configOverride && _prevConfigOverrideRef.current !== configOverride) {
+    _prevConfigOverrideRef.current = configOverride;
+    updateConfig(configOverride);
+    const fresh = getConfig();
+    if (fresh !== resolvedConfig) setResolvedConfig(fresh);
+  }
+  useEffect(() => {
+    _mountedProviderCount++;
+    if (configOverride) _mountedConfigOverrideCount++;
+    if (process.env.NODE_ENV !== "production") {
+      if (_mountedProviderCount > 1 && !_warnedMultipleProviders) {
+        _warnedMultipleProviders = true;
+        kbachWarn(
+          "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
+        );
+      }
+      if (_mountedConfigOverrideCount > 1 && !_warnedConfigOverride) {
+        _warnedConfigOverride = true;
+        kbachWarn(
+          "Multiple <ThemeProvider config={...}> overrides are mounted at once. The resolved config is shared through the same global store as dark mode/width (see the multiple-providers warning), so per-tree config overrides are not actually isolated between providers \u2014 plain className/kb elements with no hover:/dark:/sm: modifier resolve against whichever override last committed, not necessarily their nearest ancestor <ThemeProvider>."
+        );
+      }
+    }
+    return () => {
+      _mountedProviderCount--;
+      if (configOverride) _mountedConfigOverrideCount--;
+      if (_prevConfigOverrideRef.current !== void 0 && _mountedProviderCount === 0) {
+        resetConfig();
+      }
+    };
+  }, []);
+  const [webWidth, setWebWidth] = useState(0);
+  const effectiveWidth = getEffectiveIsWeb() ? webWidth : windowWidthProp ?? 0;
+  const numericScreens = useMemo3(() => {
+    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 = useRef(-1);
+  if (_prevWidthRef.current !== effectiveWidth) {
+    _prevWidthRef.current = effectiveWidth;
+    syncGlobalWidth(effectiveWidth);
+  }
+  const _prevScreensRef = useRef(null);
+  if (_prevScreensRef.current !== numericScreens) {
+    _prevScreensRef.current = numericScreens;
+    syncGlobalScreens(numericScreens);
+  }
+  useEffect(() => {
+    setGlobalWidth(effectiveWidth);
+  }, [effectiveWidth]);
+  useEffect(() => {
+    if (!isWeb || typeof window === "undefined") return;
+    setWebWidth(window.innerWidth);
+    let raf = 0;
+    const update = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const w = window.innerWidth;
+        setWebWidth(w);
+        setGlobalWidth(w);
+      });
+    };
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+  const webScheme = useSyncExternalStore(
+    subscribeSystemScheme,
+    getSystemScheme,
+    getSystemSchemeServerSnapshot
+  );
+  const systemScheme = getEffectiveIsWeb() ? webScheme : colorScheme === "dark" ? "dark" : "light";
+  const [mode, _setMode] = useState(defaultMode);
+  useEffect(() => {
+    if (disablePersistence) return;
+    const persisted = loadPersistedMode();
+    if (persisted) _setMode(persisted);
+  }, []);
+  useEffect(() => {
+    if (disablePersistence || !isWeb || typeof window === "undefined") return;
+    const onStorage = (e) => {
+      if (e.key !== STORAGE_KEY || e.newValue == null) return;
+      if (e.newValue === "light" || e.newValue === "dark" || e.newValue === "system") {
+        _setMode(e.newValue);
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [disablePersistence]);
+  const setMode = useCallback((next) => {
+    if (process.env.NODE_ENV !== "production" && isWeb && resolvedConfig.darkMode === "media" && !_warnedMediaModeToggle) {
+      _warnedMediaModeToggle = true;
+      kbachWarn(
+        'setMode()/toggle() was called while darkMode is "media" \u2014 the resolved mode/isDark from useTheme()/useIsDark() will update, but the actual CSS stays driven by prefers-color-scheme and will not change to match. Use darkMode: "attribute" or "class" if the app needs manual toggling.'
+      );
+    }
+    _setMode(next);
+    if (!disablePersistence) persistMode(next);
+  }, [disablePersistence, resolvedConfig.darkMode]);
+  const toggle = 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);
+  useIsomorphicLayoutEffect(() => {
+    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
+    setGlobalDarkMode(isDark);
+  }, [isDark, resolvedMode, resolvedConfig.darkMode]);
+  useEffect(() => {
+    if (configOverride) return;
+    let mounted = true;
+    const unsub = onConfigChange((config) => {
+      if (mounted) setResolvedConfig(config);
+    });
+    return () => {
+      mounted = false;
+      unsub();
+    };
+  }, [configOverride]);
+  const contextValue = useMemo3(
+    () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
+    [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+
+// src/KbachReset.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function KbachReset() {
+  if (isNative) return null;
+  return /* @__PURE__ */ jsx2("style", { id: RESET_STYLE_ID, children: BASE_RESET });
+}
+
+// src/styled.tsx
+import React2, {
+  forwardRef,
+  useState as useState2,
+  useCallback as useCallback2,
+  useMemo as useMemo4
+} from "react";
+function styled(Component, baseClasses = "") {
+  const Styled = forwardRef(
+    (props, ref) => {
+      const {
+        kb: extraClasses,
+        style: styleProp,
+        onPressIn,
+        onPressOut,
+        onPointerDown,
+        onPointerUp,
+        onPointerLeave,
+        onPointerCancel,
+        onMouseEnter,
+        onMouseLeave,
+        onFocus,
+        onBlur,
+        ...rest
+      } = props;
+      const disabled = !!props.disabled;
+      const checked = !!props.checked;
+      const { config } = useTheme();
+      const isWebPlatform = getEffectiveIsWeb();
+      const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
+      const [pressed, setPressed] = useState2(false);
+      const [hovered, setHovered] = useState2(false);
+      const [focused, setFocused] = useState2(false);
+      const handlePressIn = useCallback2(chain(onPressIn, () => {
+        if (!isWebPlatform) setPressed(true);
+      }), [onPressIn, isWebPlatform]);
+      const handlePressOut = useCallback2(chain(onPressOut, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPressOut, isWebPlatform]);
+      const handlePointerDown = useCallback2(chain(onPointerDown, () => {
+        if (!isWebPlatform) setPressed(true);
+      }), [onPointerDown, isWebPlatform]);
+      const handlePointerUp = useCallback2(chain(onPointerUp, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerUp, isWebPlatform]);
+      const handlePointerLeave = useCallback2(chain(onPointerLeave, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerLeave, isWebPlatform]);
+      const handlePointerCancel = useCallback2(chain(onPointerCancel, () => {
+        if (!isWebPlatform) setPressed(false);
+      }), [onPointerCancel, isWebPlatform]);
+      const handleMouseEnter = useCallback2(chain(onMouseEnter, () => {
+        if (!isWebPlatform) setHovered(true);
+      }), [onMouseEnter, isWebPlatform]);
+      const handleMouseLeave = useCallback2(chain(onMouseLeave, () => {
+        if (!isWebPlatform) setHovered(false);
+      }), [onMouseLeave, isWebPlatform]);
+      const handleFocus = useCallback2(chain(onFocus, () => {
+        if (!isWebPlatform) setFocused(true);
+      }), [onFocus, isWebPlatform]);
+      const handleBlur = useCallback2(chain(onBlur, () => {
+        if (!isWebPlatform) setFocused(false);
+      }), [onBlur, isWebPlatform]);
+      const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
+      const firstPassResolved = useMemo4(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
+      const impliedClasses = getImpliedRNClasses(webTag, firstPassResolved.base);
+      const finalClassStr = impliedClasses ? `${combined} ${impliedClasses}` : combined;
+      const resolved = useMemo4(() => resolve(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
+      const hasInteractive = useMemo4(() => hasInteractiveBuckets(resolved), [resolved]);
+      const needsWidth = hasResponsiveBuckets(resolved);
+      const width = useConditionalWidth(needsWidth && !isWebPlatform);
+      const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+      const screens = getGlobalScreens();
+      const computedStyle = useMemo4(
+        () => isWebPlatform ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
+        [resolved, isDark, pressed, hovered, focused, disabled, checked, width, screens]
+        // eslint-disable-line react-hooks/exhaustive-deps
+      );
+      const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : composeNativeStyle(computedStyle, styleProp);
+      const effectiveComponent = webTag ?? Component;
+      const componentName2 = Component.displayName ?? Component.name ?? "";
+      const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
+      return React2.createElement(effectiveComponent, {
+        ref,
+        ...effectiveRest,
+        style: finalStyle,
+        // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
+        ...isWebPlatform && finalClassStr ? { className: normalizeClassString(finalClassStr) } : {},
+        // Only attach state-tracking handlers when interactive modifiers are present.
+        // Always forward user-provided handlers to avoid silently swallowing them.
+        // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
+        // and onPressIn/onPressOut must stay excluded there as well — SSR is exactly where
+        // getWebTag() above is skipped (it's isWeb-gated), so effectiveComponent may still be
+        // a non-string RN-style reference server-side, and this used to forward onPressIn/
+        // onPressOut to it unconditionally in that case (isWeb ? ... : ...'s false branch
+        // covered both native AND SSR). onPressIn/onPressOut are RN-only prop names — a
+        // non-string effectiveComponent on the web/SSR side is just as likely to be an
+        // ordinary web component (React Router's <Link>, Next.js's <Link>, any custom
+        // wrapper) as an actual react-native-web primitive, and "not a string" alone isn't a
+        // reliable signal either way. Forwarding them made React DOM warn "Unknown event
+        // handler property" the moment any such component got an interactive modifier
+        // (hover:, active:, …), which is the common case, not the exception.
+        ...!isNative ? hasInteractive ? {
+          onPointerDown: handlePointerDown,
+          onPointerUp: handlePointerUp,
+          onPointerLeave: handlePointerLeave,
+          onPointerCancel: handlePointerCancel
+        } : {
+          onPointerDown,
+          onPointerUp,
+          onPointerLeave,
+          onPointerCancel
+        } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
+        onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
+        onFocus: hasInteractive ? handleFocus : onFocus,
+        onBlur: hasInteractive ? handleBlur : onBlur
+      });
+    }
+  );
+  const componentName = Component.displayName ?? Component.name ?? "Component";
+  Styled.displayName = `Styled(${componentName})`;
+  return Styled;
+}
+
+// src/useStyles.ts
+import { useMemo as useMemo5 } from "react";
+function useStyles(classString, state = {}) {
+  const { isDark, config } = useTheme();
+  const width = useGlobalWidth();
+  const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
+  return useMemo5(() => {
+    const resolved = resolve(normalised, config.theme, config.darkMode);
+    const breakpoints = getActiveBreakpoints(width);
+    return flatten(resolved, isDark, state, breakpoints);
+  }, [normalised, isDark, config.theme, config.darkMode, width, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
+}
+function useResolvedStyle(classString) {
+  const { config } = useTheme();
+  const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
+  return useMemo5(
+    () => resolve(normalised, config.theme, config.darkMode),
+    [normalised, config]
+  );
+}
+
+// src/useBreakpoint.ts
+import { useMemo as useMemo6 } from "react";
+function toNumericScreens(screens) {
+  const out = {};
+  for (const [name, v] of Object.entries(screens)) {
+    const n = typeof v === "number" ? v : parseInt(String(v), 10);
+    if (!Number.isNaN(n)) out[name] = n;
+  }
+  return out;
+}
+function useBreakpoint() {
+  const { config } = useTheme();
+  const width = useGlobalWidth();
+  const screens = config.theme.screens;
+  const numericScreens = useMemo6(() => toNumericScreens(screens), [screens]);
+  return useMemo6(() => {
+    const active = getActiveBreakpoints(width, numericScreens);
+    let best = null;
+    let bestMinW = -Infinity;
+    for (const name of active) {
+      const minW = numericScreens[name];
+      if (minW > bestMinW) {
+        bestMinW = minW;
+        best = name;
+      }
+    }
+    return best ?? "xs";
+  }, [numericScreens, width]);
+}
+function useResponsive() {
+  const { config } = useTheme();
+  const width = useGlobalWidth();
+  const screens = config.theme.screens;
+  const numericScreens = useMemo6(() => toNumericScreens(screens), [screens]);
+  return useMemo6(() => {
+    const active = getActiveBreakpoints(width, numericScreens);
+    const result = {};
+    for (const name of Object.keys(numericScreens)) {
+      result[name] = active.has(name);
+    }
+    return result;
+  }, [numericScreens, width]);
+}
+
+// src/kb.ts
+function kb(classString, isDark = false) {
+  const config = getConfig();
+  const resolved = resolve(classString, config.theme, config.darkMode);
+  if (getEffectiveIsWeb()) {
+    return classString;
+  }
+  return flatten(resolved, isDark);
+}
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+export {
+  InteractiveWrapper,
+  KbachReset,
+  ThemeContext,
+  ThemeProvider,
+  buildConfig,
+  clearCache,
+  cx,
+  defaultColors,
+  defaultTheme,
+  disableRuntimeCSS,
+  flatten,
+  generateKbachTypesDts,
+  getConfig,
+  initConfig,
+  kb,
+  normalizeClassString,
+  parseClass,
+  parseClasses,
+  registerWebElement,
+  resolve,
+  setResolveTarget,
+  splitClassTokens,
+  styled,
+  updateConfig,
+  useBreakpoint,
+  useColors,
+  useGlobalDarkMode,
+  useIsDark,
+  useResolvedStyle,
+  useResponsive,
+  useSpacing,
+  useStyles,
+  useTheme,
+  wrapColors,
+  wrapSpacing
+};

package/dist/jsx-dev-runtime.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+export { Fragment } from 'react';
+
+/**
+ * @kbach/ui/jsx-dev-runtime
+ *
+ * Development variant of the custom JSX runtime.
+ * Babel uses jsxDEV (instead of jsx/jsxs) in dev builds.
+ *
+ * We intercept `className`/`kb` props exactly like the production runtime, but
+ * forward `_source` to React's own jsxDEV so React DevTools can display the
+ * correct file + line number for every element.
+ */
+
+declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}, self?: unknown): ReactElement;
+
+export { jsxDEV };