@tamagui/core 1.0.0-beta.149 → 1.0.0-beta.15

package/dist/jsx/helpers/insertStyleRule.js

@@ -6,25 +6,30 @@ const insertedTransforms = {};
 const getAllSelectors = /* @__PURE__ */ __name(() => allSelectors, "getAllSelectors");
 const getInsertedRules = /* @__PURE__ */ __name(() => Object.values(insertedSelectors), "getInsertedRules");
 const getAllTransforms = /* @__PURE__ */ __name(() => insertedTransforms, "getAllTransforms");
-function addTransform(identifier, rule) {
-  const s = rule.indexOf("transform:");
+function addTransform(identifier, css, rule) {
+  const s = css.indexOf("transform:");
   if (s === -1) {
-    console.error(`not a transform ${identifier} ${rule}`);
+    if (process.env.NODE_ENV === "development") {
+      console.groupCollapsed(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`);
+      console.log("rule:", rule);
+      console.trace();
+      console.groupEnd();
+    } else {
+      console.error(`Missing transform`, identifier, css, rule);
+    }
     return;
   }
   const startI = s + "transform:".length;
-  const endI = rule.indexOf(";");
-  const value = rule.slice(startI, endI);
-  console.log("add", identifier, value);
+  const endI = css.indexOf(";");
+  const value = css.slice(startI, endI);
   insertedTransforms[identifier] = value;
 }
 __name(addTransform, "addTransform");
-let hasInsertedSinceUpdate = true;
 const isClient = typeof document !== "undefined";
+let hasInsertedSinceUpdate = true;
 function updateInserted() {
-  if (!isClient) {
+  if (!isClient)
     return;
-  }
   if (!hasInsertedSinceUpdate) {
     console.warn("hasnt inserted since");
     return;
@@ -46,9 +51,11 @@ function updateInserted() {
         if (!(rule instanceof CSSStyleRule))
           continue;
         const identifier = rule.selectorText.slice(1);
-        allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
-        if (identifier.startsWith("_transform")) {
-          addTransform(identifier, rule.cssText);
+        if (!allSelectors[identifier]) {
+          allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
+          if (identifier.startsWith("_transform")) {
+            addTransform(identifier, rule.cssText, rule);
+          }
         }
       }
     }
@@ -57,26 +64,23 @@ function updateInserted() {
 }
 __name(updateInserted, "updateInserted");
 updateInserted();
-const newRulesStyleTag = typeof document !== "undefined" ? document.head.appendChild(document.createElement("style")) : null;
-function insertStyleRule(identifier, rule) {
-  if (allSelectors[identifier]) {
+const sheet = isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
+function updateInsertedCache(identifier, rule) {
+  if (insertedSelectors[identifier])
     return;
-  }
-  hasInsertedSinceUpdate = true;
-  if (identifier === "_transform-1abwpjw") {
-    console.trace("inserting", identifier, rule);
-  }
   insertedSelectors[identifier] = rule;
-  allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
   if (identifier.startsWith("_transform")) {
     addTransform(identifier, rule);
   }
-  if (!newRulesStyleTag) {
+}
+__name(updateInsertedCache, "updateInsertedCache");
+function insertStyleRule(identifier, rule) {
+  if (allSelectors[identifier])
     return;
-  }
-  const sheet = newRulesStyleTag.sheet;
-  sheet.insertRule(rule, sheet.cssRules.length);
-  return identifier;
+  hasInsertedSinceUpdate = true;
+  updateInsertedCache(identifier, rule);
+  allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
+  sheet == null ? void 0 : sheet.insertRule(rule, sheet.cssRules.length);
 }
 __name(insertStyleRule, "insertStyleRule");
 export {
@@ -85,5 +89,6 @@ export {
   getInsertedRules,
   insertStyleRule,
   insertedTransforms,
-  updateInserted
+  updateInserted,
+  updateInsertedCache
 };

package/dist/jsx/helpers/proxyThemeVariables.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function proxyThemeVariables(obj) {
+  return new Proxy(obj, {
+    has(target, key) {
+      return Reflect.has(target, removeStarting$(key));
+    },
+    get(target, key) {
+      return Reflect.get(target, removeStarting$(key));
+    }
+  });
+}
+__name(proxyThemeVariables, "proxyThemeVariables");
+const removeStarting$ = /* @__PURE__ */ __name((str) => typeof str === "string" && str[0] === "$" ? str.slice(1) : str, "removeStarting$");
+export {
+  proxyThemeVariables
+};

package/dist/jsx/helpers/themeable.js

@@ -3,14 +3,14 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import React, { forwardRef } from "react";
 import { Theme } from "../views/Theme";
 import { ThemeInverse } from "../views/ThemeInverse";
-function themeable(component) {
+function themeable(component, opts) {
   const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, theme, ...rest }, ref) {
     const element = React.createElement(component, { ...rest, ref });
     if (themeInverse) {
       return <ThemeInverse>{element}</ThemeInverse>;
     }
-    if (theme) {
-      return <Theme name={theme || null}>{element}</Theme>;
+    if (theme || opts) {
+      return <Theme componentName={opts == null ? void 0 : opts.componentName} name={theme || null}>{element}</Theme>;
     }
     return element;
   }, "WithTheme"));

package/dist/jsx/helpers/validate.js

@@ -3,7 +3,8 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 const { default: ow } = require("@tamagui/ow/dev-only");
 let Config;
 let Tokens;
-let Font;
+let FontRequired;
+let FontOptional;
 const validateConfig = /* @__PURE__ */ __name((conf) => {
   if (!conf) {
     console.warn("no conf?");
@@ -24,12 +25,26 @@ const validateTokens = /* @__PURE__ */ __name((tokens) => {
 }, "validateTokens");
 const validateFont = /* @__PURE__ */ __name((font) => {
   try {
-    ow(font, Font);
+    const { style, transform, color, ...required } = font;
+    ow(required, FontRequired);
+    ow({ style, transform, color }, FontOptional);
   } catch (err) {
     console.warn("Given font:\n", JSON.stringify(font, null, 2), err);
   }
 }, "validateFont");
 if (process.env.NODE_ENV === "development") {
+  const fontReq = {
+    family: ow.string,
+    size: ow.object.nonEmpty.valuesOfType(ow.number),
+    lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
+    weight: ow.object.nonEmpty.valuesOfType(ow.string),
+    letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
+  };
+  const fontOpt = {
+    style: ow.optional.object.valuesOfType(ow.string),
+    transform: ow.optional.object.valuesOfType(ow.string),
+    color: ow.optional.object.valuesOfType(ow.string)
+  };
   Config = ow.object.exactShape({
     defaultTheme: ow.optional.string,
     disableRootThemeClass: ow.optional.boolean,
@@ -37,17 +52,15 @@ if (process.env.NODE_ENV === "development") {
     themes: ow.object.valuesOfType(ow.object),
     tokens: ow.object.valuesOfType(ow.object),
     media: ow.object.valuesOfType(ow.object),
-    animations: ow.object.valuesOfType(ow.object)
-  });
-  Font = ow.object.exactShape({
-    family: ow.string,
-    size: ow.object.nonEmpty.valuesOfType(ow.number),
-    lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
-    weight: ow.object.nonEmpty.valuesOfType(ow.string),
-    letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number)
+    animations: ow.object.valuesOfType(ow.object),
+    fonts: ow.object.valuesOfType(ow.object.partialShape({
+      ...fontReq,
+      ...fontOpt
+    }))
   });
+  FontRequired = ow.object.exactShape(fontReq);
+  FontOptional = ow.object.partialShape(fontOpt);
   Tokens = ow.object.exactShape({
-    font: ow.object.valuesOfType(Font),
     size: ow.object.nonEmpty.valuesOfType(ow.number),
     space: ow.object.nonEmpty.valuesOfType(ow.number),
     zIndex: ow.object.nonEmpty.valuesOfType(ow.number),

package/dist/jsx/hooks/useId.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+let serverHandoffComplete = false;
+let id = 0;
+function genId() {
+  return ++id;
+}
+__name(genId, "genId");
+function useId(providedId) {
+  var _a;
+  if (typeof React.useId === "function") {
+    let id3 = React.useId(providedId);
+    return providedId != null ? providedId : id3;
+  }
+  let initialId = providedId != null ? providedId : serverHandoffComplete ? genId() : null;
+  let [id2, setId] = React.useState(initialId);
+  useIsomorphicLayoutEffect(() => {
+    if (id2 === null) {
+      setId(genId());
+    }
+  }, []);
+  React.useEffect(() => {
+    if (serverHandoffComplete === false) {
+      serverHandoffComplete = true;
+    }
+  }, []);
+  return (_a = providedId != null ? providedId : id2) != null ? _a : void 0;
+}
+__name(useId, "useId");
+export {
+  useId
+};

package/dist/jsx/hooks/useIsTouchDevice.js

@@ -1,14 +1,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useEffect, useState } from "react";
-import { isTouchDevice } from "../constants/platform";
+import { useState } from "react";
+import { isTouchDevice, useIsomorphicLayoutEffect } from "../constants/platform";
 const useIsTouchDevice = /* @__PURE__ */ __name(() => {
   const [touchOnly, setTouchOnly] = useState(false);
-  if (isTouchDevice) {
-    useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
+    if (isTouchDevice) {
       setTouchOnly(true);
-    }, []);
-  }
+    }
+  }, []);
   return touchOnly;
 }, "useIsTouchDevice");
 export {

package/dist/jsx/hooks/useMedia.js

@@ -107,6 +107,9 @@ const useMedia = /* @__PURE__ */ __name(() => {
     const st = state.current;
     return new Proxy(mediaState, {
       get(target, key) {
+        if (key[0] !== "$") {
+          key = `$${key}`;
+        }
         if (!(key in mediaState)) {
           return Reflect.get(target, key);
         }

package/dist/jsx/hooks/useTheme.js

@@ -51,6 +51,11 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
       get(_, key) {
         if (!name || key === "__proto__" || typeof key === "symbol") {
           if (key === GetThemeManager) {
+            if (process.env.NODE_ENV === "development") {
+              if (props["debug"]) {
+                console.log("did change", { themeName, didChangeTheme, name, componentName }, themeManager == null ? void 0 : themeManager.parentName);
+              }
+            }
             if (!didChangeTheme) {
               return null;
             }
@@ -58,6 +63,9 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
           }
           return Reflect.get(_, key);
         }
+        if (typeof key !== "string" || key === "$typeof") {
+          return Reflect.get(_, key);
+        }
         if (process.env.NODE_ENV === "development") {
           if (key === "__state") {
             return state.current;
@@ -73,25 +81,23 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
           console.error("No themeManager");
           return;
         }
-        if (typeof key === "string") {
-          if (key[0] === "$") {
-            key = key.slice(1);
-          }
-          const val = themeManager.getValue(key);
-          if (val) {
-            if (state.current.isRendering) {
-              state.current.keys.add(key);
-              if (process.env.NODE_ENV === "development") {
-                if ((props == null ? void 0 : props["debug"]) === "verbose") {
-                  console.log("  \xBB tracking theme key", key);
-                }
+        if (key[0] === "$") {
+          key = key.slice(1);
+        }
+        const val = themeManager.getValue(key);
+        if (val) {
+          if (state.current.isRendering) {
+            state.current.keys.add(key);
+            if (process.env.NODE_ENV === "development") {
+              if ((props == null ? void 0 : props["debug"]) === "verbose") {
+                console.log("  \xBB tracking theme key", key);
               }
             }
-            return val;
-          }
-          if (process.env.NODE_ENV === "development") {
-            console.log(`No theme value "${String(key)}" in ${name}`);
           }
+          return val;
+        }
+        if (process.env.NODE_ENV === "development") {
+          console.log(`No theme value "${String(key)}" in ${name}`);
         }
         return Reflect.get(_, key);
       }

package/dist/jsx/index.js

@@ -8,36 +8,43 @@ import { createTokens } from "./createTokens";
 export * from "./createVariable";
 export * from "./styled";
 export * from "./types";
+import { RNWTextProps, RNWViewProps } from "./types-rnw";
 import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from "./conf";
 export * from "./constants/constants";
 export * from "./constants/platform";
 export * from "./constants/rnw";
+export * from "./helpers/getButtonSize";
 export * from "./helpers/getExpandedShorthands";
+export * from "./helpers/getSize";
 export * from "./helpers/getSplitStyles";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/getTextSize";
 export * from "./helpers/isObj";
 export * from "./helpers/isTamaguiElement";
 export * from "./helpers/matchMedia";
 export * from "./helpers/themeable";
 export * from "./helpers/withStaticProperties";
 export * from "./contexts/ButtonInsideButtonContext";
-export * from "./hooks/useIsTouchDevice";
 export * from "./hooks/useConstant";
-export * from "./hooks/usePressable";
+export * from "./hooks/useId";
+export * from "./hooks/useIsMounted";
+export * from "./hooks/useIsTouchDevice";
 export * from "./hooks/useMedia";
+export * from "./hooks/usePressable";
 export * from "./hooks/useTheme";
-export * from "./hooks/useIsMounted";
 export * from "./hooks/useUnmountEffect";
-export * from "@tamagui/use-force-update";
 export * from "./views/Stack";
 export * from "./views/Text";
+export * from "./views/TextAncestorContext";
 export * from "./views/Theme";
-export * from "./views/ThemeReset";
 export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
-export * from "./views/TextAncestorContext";
+export * from "./views/ThemeReset";
+export * from "@tamagui/use-force-update";
 export * from "@tamagui/helpers";
 export {
+  RNWTextProps,
+  RNWViewProps,
   createTokens,
   getConfig,
   getHasConfigured,

package/dist/jsx/static.js

@@ -3,11 +3,14 @@ export * from "./createComponent";
 export * from "./createFont";
 export * from "./createTokens";
 export * from "./createTamagui";
+export * from "./createVariable";
 export * from "./constants/constants";
 export * from "./hooks/useMedia";
 export * from "./hooks/useTheme";
 export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/proxyThemeVariables";
 export * from "./helpers/getSplitStyles";
 export * from "@tamagui/helpers";
 export * from "./constants/rnw";
+export * from "./types";

package/dist/jsx/styled.js

@@ -2,18 +2,19 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { Image, Text, TextInput } from "react-native";
 import { createComponent } from "./createComponent";
-import { extendStaticConfig } from "./helpers/extendStaticConfig";
 import { RNComponents } from "./helpers/RNComponents";
 function styled(Component, options, staticExtractionOptions) {
   const staticConfigProps = (() => {
+    var _a;
     if (options) {
       const { variants, name, defaultVariants, ...defaultProps } = options;
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
-      const isReactNativeWeb = RNComponents.has(Component);
+      const isReactNativeWeb = "staticConfig" in Component ? Component.staticConfig.isReactNativeWeb : RNComponents.has(Component);
+      const reactNativeWebComponent = isReactNativeWeb ? ((_a = Component["staticConfig"]) == null ? void 0 : _a.reactNativeWebComponent) || Component : null;
       const isTamagui = !isReactNativeWeb && "staticConfig" in Component;
-      const Comp = Component;
+      const Comp = reactNativeWebComponent || Component;
       const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false));
       const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false));
       const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false));
@@ -25,8 +26,10 @@ function styled(Component, options, staticExtractionOptions) {
         isTamagui,
         variants,
         defaultProps,
+        defaultVariants,
         componentName: name,
         isReactNativeWeb,
+        reactNativeWebComponent,
         isInput,
         isText,
         isImage
@@ -35,8 +38,7 @@ function styled(Component, options, staticExtractionOptions) {
     }
     return {};
   })();
-  const config = extendStaticConfig(Component, staticConfigProps);
-  const component = createComponent(config);
+  const component = createComponent(staticConfigProps, Component);
   return component;
 }
 __name(styled, "styled");

package/dist/jsx/views/Slot.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { composeRefs } from "@tamagui/compose-refs";
+import * as React from "react";
+const Slot = React.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  if (React.Children.toArray(children).some(isSlottable)) {
+    return <>{React.Children.map(children, (child) => {
+      return isSlottable(child) ? <SlotClone {...slotProps} ref={forwardedRef}>{child.props.children}</SlotClone> : child;
+    })}</>;
+  }
+  return <SlotClone {...slotProps} ref={forwardedRef}>{children}</SlotClone>;
+});
+Slot.displayName = "Slot";
+const SlotClone = React.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...mergeProps(children, slotProps),
+      ref: composeRefs(forwardedRef, children.ref)
+    });
+  }
+  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+});
+SlotClone.displayName = "SlotClone";
+const Slottable = /* @__PURE__ */ __name(({ children }) => {
+  return <>{children}</>;
+}, "Slottable");
+function isSlottable(child) {
+  return React.isValidElement(child);
+}
+__name(isSlottable, "isSlottable");
+const pressMap = {
+  onPress: "onClick",
+  onPressOut: "onMouseOut",
+  onPressIn: "onMouseIn"
+};
+function mergeProps(child, slotProps) {
+  const childProps = child.props;
+  const overrideProps = { ...childProps };
+  const isHTMLChild = typeof child.type === "string";
+  if (isHTMLChild) {
+    for (const key in pressMap) {
+      if (key in slotProps) {
+        slotProps[pressMap[key]] = slotProps[key];
+        delete slotProps[key];
+      }
+    }
+  }
+  for (let propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (isHTMLChild && pressMap[propName]) {
+      propName = pressMap[propName];
+      delete overrideProps[propName];
+    }
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      overrideProps[propName] = (...args) => {
+        childPropValue == null ? void 0 : childPropValue(...args);
+        slotPropValue == null ? void 0 : slotPropValue(...args);
+      };
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+__name(mergeProps, "mergeProps");
+export {
+  Slot,
+  Slottable
+};

package/dist/jsx/views/Text.js

@@ -11,15 +11,18 @@ const Text = createComponent({
   componentName: "Text",
   isText: true,
   defaultProps: {
-    display: isWeb ? "inline" : "flex",
-    boxSizing: "border-box",
+    display: "flex",
     fontFamily: "System",
-    wordWrap: "break-word"
+    ...isWeb && {
+      display: "inline",
+      boxSizing: "border-box",
+      wordWrap: "break-word"
+    }
   },
   variants: {
     numberOfLines: {
-      1: ellipseStyle,
-      ":number": (lines) => lines > 1 ? { WebkitLineClamp: 1 } : null
+      1: isWeb ? ellipseStyle : { numberOfLines: 1 },
+      ":number": (numberOfLines) => isWeb ? numberOfLines >= 1 ? { WebkitLineClamp: numberOfLines } : null : { numberOfLines }
     },
     selectable: {
       true: {
@@ -45,15 +48,7 @@ const Text = createComponent({
   deoptProps: new Set(isWeb ? [] : ["ellipse"]),
   validStyles: {
     ...validStyles,
-    ...stylePropsTextOnly,
-    ...isWeb && {
-      userSelect: true,
-      textOverflow: true,
-      whiteSpace: true,
-      wordWrap: true,
-      selectable: true,
-      cursor: true
-    }
+    ...stylePropsTextOnly
   }
 });
 export {

package/dist/jsx/views/Theme.js

@@ -3,11 +3,11 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import React, { memo, useMemo } from "react";
 import { isWeb } from "../constants/platform";
 import { wrapThemeManagerContext } from "../helpers/wrapThemeManagerContext";
-import { useChangeThemeEffect } from "../static";
+import { useChangeThemeEffect } from "../hooks/useTheme";
 React["createElement"];
 const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
   var _a, _b;
-  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, void 0, props);
+  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, props.componentName, props);
   if (!themes || !name || !theme) {
     if (name && !theme && process.env.NODE_ENV === "development") {
       console.warn(`No theme found by name ${name}`);
@@ -16,13 +16,13 @@ const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
   }
   const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
   if (isWeb) {
-    return <div className={[
+    return <span className={[
       `tui_Theme`,
       ...!props.disableThemeClass ? [props.className, className].filter(Boolean) : []
     ].join(" ")} style={{
       display: "contents",
       color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()
-    }}>{contents}</div>;
+    }}>{contents}</span>;
   }
   return contents;
 }, "Theme"));

package/dist/jsx/views/ThemeInverse.js

@@ -1,5 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useState } from "react";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
 import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
 import { Theme } from "./Theme";
 let inversions = {
@@ -13,7 +15,10 @@ __name(setThemeInversions, "setThemeInversions");
 const ThemeInverse = /* @__PURE__ */ __name((props) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
-  const name = inversions[themeName] || inversions[defaultTheme || ""] || null;
+  const [name, setName] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    setName(inversions[themeName] || inversions[defaultTheme || ""] || null);
+  }, [defaultTheme, themeName]);
   return <Theme name={name}>{props.children}</Theme>;
 }, "ThemeInverse");
 export {

package/dist/jsx/views/ThemeProvider.js

@@ -20,7 +20,7 @@ const ThemeProvider = /* @__PURE__ */ __name((props) => {
       return () => {
         document.body.classList.remove(cn);
       };
-    }, []);
+    }, [props.disableRootThemeClass]);
   }
   const themeContext = useMemo(() => {
     return {
@@ -28,7 +28,7 @@ const ThemeProvider = /* @__PURE__ */ __name((props) => {
       defaultTheme: props.defaultTheme
     };
   }, [props.themes]);
-  return <ThemeContext.Provider value={themeContext}><Theme name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>{props.children}</Theme></ThemeContext.Provider>;
+  return <ThemeContext.Provider value={themeContext}><Theme className={props.className} name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>{props.children}</Theme></ThemeContext.Provider>;
 }, "ThemeProvider");
 export {
   ThemeProvider