@tamagui/web - npm Package Compare versions

Comparing version 1.121.12-1737270844392 to 1.121.12-1737271201540

dist/cjs/constants/constants.js

@@ -24,5 +24,3 @@ var __defProp = Object.defineProperty;
 module.exports = __toCommonJS(constants_exports);
-const THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {
-  position: "static"
-}, webViewFlexCompatStyles = {
+const THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {}, webViewFlexCompatStyles = {
   display: "flex",
@@ -29,0 +27,0 @@ alignItems: "stretch",

dist/cjs/constants/constants.native.js

@@ -25,5 +25,3 @@ "use strict";
 module.exports = __toCommonJS(constants_exports);
-var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {
-  position: "static"
-}, webViewFlexCompatStyles = {
+var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {}, webViewFlexCompatStyles = {
   display: "flex",
@@ -30,0 +28,0 @@ alignItems: "stretch",

dist/cjs/createComponent.js

@@ -25,7 +25,10 @@ var __create = Object.create;
 __export(createComponent_exports, {
+  Spacer: () => Spacer,
+  Unspaced: () => Unspaced,
   componentSetStates: () => componentSetStates,
-  createComponent: () => createComponent
+  createComponent: () => createComponent,
+  spacedChildren: () => spacedChildren
 });
 module.exports = __toCommonJS(createComponent_exports);
-var import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_react = __toESM(require("react")), import_config = require("./config"), import_isDevTools = require("./constants/isDevTools"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_defaultComponentState = require("./defaultComponentState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_log = require("./helpers/log"), import_mergeProps = require("./helpers/mergeProps"), import_setElementProps = require("./helpers/setElementProps"), import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup"), import_themeable = require("./helpers/themeable"), import_wrapStyleTags = require("./helpers/wrapStyleTags"), import_useComponentState = require("./hooks/useComponentState"), import_useMedia = require("./hooks/useMedia"), import_useTheme = require("./hooks/useTheme"), import_setupHooks = require("./setupHooks"), import_Slot = require("./views/Slot"), import_Theme = require("./views/Theme"), import_ThemeDebug = require("./views/ThemeDebug"), import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_react = __toESM(require("react")), import_config = require("./config"), import_constants2 = require("./constants/constants"), import_isDevTools = require("./constants/isDevTools"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_defaultComponentState = require("./defaultComponentState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_log = require("./helpers/log"), import_mergeProps = require("./helpers/mergeProps"), import_setElementProps = require("./helpers/setElementProps"), import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup"), import_themeable = require("./helpers/themeable"), import_wrapStyleTags = require("./helpers/wrapStyleTags"), import_useComponentState = require("./hooks/useComponentState"), import_useMedia = require("./hooks/useMedia"), import_useTheme = require("./hooks/useTheme"), import_setupHooks = require("./setupHooks"), import_Slot = require("./views/Slot"), import_Theme = require("./views/Theme"), import_ThemeDebug = require("./views/ThemeDebug"), import_jsx_runtime = require("react/jsx-runtime");
 let time, debugKeyListeners, startVisualizer;
@@ -210,3 +213,4 @@ const componentSetStates = /* @__PURE__ */ new Set();
       style: splitStylesStyle,
-      classNames
+      classNames,
+      space
     } = splitStyles, propsWithAnimation = props, {
@@ -385,4 +389,13 @@ asChild,
     } : null;
-    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, attachHover, attachPress }), import_setupHooks.hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig), process.env.NODE_ENV === "development" && time && time`hooks`;
-    let content = children;
+    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, attachHover, attachPress }), import_setupHooks.hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig);
+    const direction = props.spaceDirection || "both";
+    process.env.NODE_ENV === "development" && time && time`hooks`;
+    let content = !children || asChild ? children : spacedChildren({
+      separator,
+      children,
+      space,
+      direction,
+      isZStack,
+      debug: debugProp
+    });
     if (asChild) {
@@ -518,2 +531,5 @@ elementType = import_Slot.Slot;
   }
+  function extractable(Component2, extended) {
+    return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
+  }
   function styleable(Component2, options) {
@@ -524,3 +540,3 @@ let out = Component2.render?.length === 2 ? Component2 : import_react.default.forwardRef(Component2);
   }
-  return res.styleable = styleable, res;
+  return res.extractable = extractable, res.styleable = styleable, res;
 }
@@ -540,3 +556,122 @@ function getWebEvents(events, webStyle = !0) {
 }
-const fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
+function Unspaced(props) {
+  return props.children;
+}
+Unspaced.isUnspaced = !0;
+const getSpacerSize = (size, { tokens }) => {
+  size = size === !0 ? "$true" : size;
+  const sizePx = tokens.space[size] ?? size;
+  return {
+    width: sizePx,
+    height: sizePx,
+    minWidth: sizePx,
+    minHeight: sizePx
+  };
+}, Spacer = createComponent({
+  acceptsClassName: !0,
+  memo: !0,
+  componentName: "Spacer",
+  validStyles: import_helpers.validStyles,
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    // avoid nesting issues
+    tag: "span",
+    size: !0,
+    pointerEvents: "none"
+  },
+  variants: {
+    size: {
+      "...": getSpacerSize
+    },
+    flex: {
+      true: {
+        flexGrow: 1
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0,
+        minHeight: 0
+      },
+      vertical: {
+        width: 0,
+        minWidth: 0
+      },
+      both: {}
+    }
+  }
+});
+function spacedChildren(props) {
+  const { isZStack, children, space, direction, spaceFlex, separator, ensureKeys } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
+  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack))
+    return children;
+  const childrenList = areChildrenArray ? children : import_react.default.Children.toArray(children);
+  if (childrenList.length <= 1 && !isZStack && !childrenList[0]?.type?.shouldForwardSpace)
+    return children;
+  const final = [];
+  for (let [index, child] of childrenList.entries()) {
+    const isEmpty = child == null || Array.isArray(child) && child.length === 0;
+    if (!isEmpty && import_react.default.isValidElement(child) && child.type?.shouldForwardSpace && (child = import_react.default.cloneElement(child, {
+      space,
+      spaceFlex,
+      separator,
+      key: child.key
+    })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, { children: child }) : child }, `${index}0t`)
+    ), isUnspaced(child) && index === 0 || isZStack) continue;
+    const next = childrenList[index + 1];
+    next && !isEmpty && !isUnspaced(next) && (separator ? (hasSpace && final.push(
+      createSpacer({
+        key: `_${index}_00t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ), final.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: separator }, `${index}03t`)), hasSpace && final.push(
+      createSpacer({
+        key: `_${index}01t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    )) : final.push(
+      createSpacer({
+        key: `_${index}02t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ));
+  }
+  return process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("  Spaced children", final, props), final;
+}
+function createSpacer({ key, direction, space, spaceFlex }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Spacer,
+    {
+      size: space,
+      direction,
+      ...typeof spaceFlex < "u" && {
+        flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
+      }
+    },
+    key
+  );
+}
+function isUnspaced(child) {
+  const t = child?.type;
+  return t?.isVisuallyHidden || t?.isUnspaced;
+}
+const AbsoluteFill = createComponent({
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+}), fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
 //# sourceMappingURL=createComponent.js.map

dist/cjs/createComponent.native.js

@@ -26,7 +26,10 @@ "use strict";
 __export(createComponent_exports, {
+  Spacer: () => Spacer,
+  Unspaced: () => Unspaced,
   componentSetStates: () => componentSetStates,
-  createComponent: () => createComponent
+  createComponent: () => createComponent,
+  spacedChildren: () => spacedChildren
 });
 module.exports = __toCommonJS(createComponent_exports);
-var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_react = __toESM(require("react")), import_config = require("./config"), import_isDevTools = require("./constants/isDevTools"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_defaultComponentState = require("./defaultComponentState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_log = require("./helpers/log"), import_mergeProps = require("./helpers/mergeProps"), import_setElementProps = require("./helpers/setElementProps"), import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup"), import_themeable = require("./helpers/themeable"), import_wrapStyleTags = require("./helpers/wrapStyleTags"), import_useComponentState = require("./hooks/useComponentState"), import_useMedia = require("./hooks/useMedia"), import_useTheme = require("./hooks/useTheme"), import_setupHooks = require("./setupHooks"), import_Slot = require("./views/Slot"), import_Theme = require("./views/Theme"), import_ThemeDebug = require("./views/ThemeDebug"), time, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
+var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_react = __toESM(require("react")), import_config = require("./config"), import_constants2 = require("./constants/constants"), import_isDevTools = require("./constants/isDevTools"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_defaultComponentState = require("./defaultComponentState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_log = require("./helpers/log"), import_mergeProps = require("./helpers/mergeProps"), import_setElementProps = require("./helpers/setElementProps"), import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup"), import_themeable = require("./helpers/themeable"), import_wrapStyleTags = require("./helpers/wrapStyleTags"), import_useComponentState = require("./hooks/useComponentState"), import_useMedia = require("./hooks/useMedia"), import_useTheme = require("./hooks/useTheme"), import_setupHooks = require("./setupHooks"), import_Slot = require("./views/Slot"), import_Theme = require("./views/Theme"), import_ThemeDebug = require("./views/ThemeDebug"), time, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
 if (typeof document < "u") {
@@ -219,3 +222,3 @@ var cancelTouches = function() {
     process.env.NODE_ENV === "development" && debugProp === "verbose" && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), (0, import_useMedia.setMediaShouldUpdate)(stateRef, shouldListenForMedia, mediaListeningKeys);
-    var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames } = splitStyles, propsWithAnimation = props, {
+    var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames, space } = splitStyles, propsWithAnimation = props, {
       asChild,
@@ -420,4 +423,13 @@ children,
       attachPress
-    }), (_hooks_useEvents = import_setupHooks.hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(import_setupHooks.hooks, viewProps, events, splitStyles, setStateShallow, staticConfig), process.env.NODE_ENV === "development" && time && time`hooks`;
-    var content = children;
+    }), (_hooks_useEvents = import_setupHooks.hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(import_setupHooks.hooks, viewProps, events, splitStyles, setStateShallow, staticConfig);
+    var direction = props.spaceDirection || "both";
+    process.env.NODE_ENV === "development" && time && time`hooks`;
+    var content = !children || asChild ? children : spacedChildren({
+      separator,
+      children,
+      space,
+      direction,
+      isZStack,
+      debug: debugProp
+    });
     if (asChild)
@@ -550,2 +562,5 @@ if (elementType = import_Slot.Slot, 0)
   }
+  function extractable(Component2, extended) {
+    return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
+  }
   function styleable(Component2, options) {
@@ -555,5 +570,132 @@ var _Component_render, isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2, out = isForwardedRefAlready ? Component2 : /* @__PURE__ */ import_react.default.forwardRef(Component2), extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig);
   }
-  return res.styleable = styleable, res;
+  return res.extractable = extractable, res.styleable = styleable, res;
 }
-var fromPx = function(val) {
+function Unspaced(props) {
+  return props.children;
+}
+Unspaced.isUnspaced = !0;
+var getSpacerSize = function(size, param) {
+  var { tokens } = param;
+  size = size === !0 ? "$true" : size;
+  var _tokens_space_size, sizePx = (_tokens_space_size = tokens.space[size]) !== null && _tokens_space_size !== void 0 ? _tokens_space_size : size;
+  return {
+    width: sizePx,
+    height: sizePx,
+    minWidth: sizePx,
+    minHeight: sizePx
+  };
+}, Spacer = createComponent({
+  acceptsClassName: !0,
+  memo: !0,
+  componentName: "Spacer",
+  validStyles: import_helpers.validStyles,
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    // avoid nesting issues
+    tag: "span",
+    size: !0,
+    pointerEvents: "none"
+  },
+  variants: {
+    size: {
+      "...": getSpacerSize
+    },
+    flex: {
+      true: {
+        flexGrow: 1
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0,
+        minHeight: 0
+      },
+      vertical: {
+        width: 0,
+        minWidth: 0
+      },
+      both: {}
+    }
+  }
+});
+function spacedChildren(props) {
+  var _childrenList__type, _childrenList_, { isZStack, children, space, direction, spaceFlex, separator, ensureKeys } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
+  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack))
+    return children;
+  var childrenList = areChildrenArray ? children : import_react.default.Children.toArray(children), len = childrenList.length;
+  if (len <= 1 && !isZStack && !(!((_childrenList_ = childrenList[0]) === null || _childrenList_ === void 0 || (_childrenList__type = _childrenList_.type) === null || _childrenList__type === void 0) && _childrenList__type.shouldForwardSpace))
+    return children;
+  var final = [], _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+  try {
+    for (var _iterator = childrenList.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+      var [index, child] = _step.value, _child_type, isEmpty = child == null || Array.isArray(child) && child.length === 0;
+      if (!isEmpty && /* @__PURE__ */ import_react.default.isValidElement(child) && (!((_child_type = child.type) === null || _child_type === void 0) && _child_type.shouldForwardSpace) && (child = /* @__PURE__ */ import_react.default.cloneElement(child, {
+        space,
+        spaceFlex,
+        separator,
+        key: child.key
+      })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, {
+        children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, {
+          children: child
+        }) : child
+      }, `${index}0t`)), !(isUnspaced(child) && index === 0) && !isZStack) {
+        var next = childrenList[index + 1];
+        next && !isEmpty && !isUnspaced(next) && (separator ? (hasSpace && final.push(createSpacer({
+          key: `_${index}_00t`,
+          direction,
+          space,
+          spaceFlex
+        })), final.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, {
+          children: separator
+        }, `${index}03t`)), hasSpace && final.push(createSpacer({
+          key: `_${index}01t`,
+          direction,
+          space,
+          spaceFlex
+        }))) : final.push(createSpacer({
+          key: `_${index}02t`,
+          direction,
+          space,
+          spaceFlex
+        })));
+      }
+    }
+  } catch (err) {
+    _didIteratorError = !0, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError)
+        throw _iteratorError;
+    }
+  }
+  return process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("  Spaced children", final, props), final;
+}
+function createSpacer(param) {
+  var { key, direction, space, spaceFlex } = param;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spacer, {
+    size: space,
+    direction,
+    ...typeof spaceFlex < "u" && {
+      flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
+    }
+  }, key);
+}
+function isUnspaced(child) {
+  var t = child == null ? void 0 : child.type;
+  return (t == null ? void 0 : t.isVisuallyHidden) || (t == null ? void 0 : t.isUnspaced);
+}
+var AbsoluteFill = createComponent({
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+}), fromPx = function(val) {
   return typeof val != "string" ? val : +val.replace("px", "");
@@ -563,5 +705,8 @@ };
 0 && (module.exports = {
+  Spacer,
+  Unspaced,
   componentSetStates,
-  createComponent
+  createComponent,
+  spacedChildren
 });
 //# sourceMappingURL=createComponent.js.map

dist/cjs/createTamagui.js

@@ -81,3 +81,3 @@ var __defProp = Object.defineProperty;
       }
-      const sep = configIn.settings?.cssStyleSeparator || "";
+      const sep = configIn.cssStyleSeparator || "";
       if (cssRuleSets.push(declarationsToRuleSet(declarations)), fontDeclarations)
@@ -127,3 +127,3 @@ for (const key in fontDeclarations) {
     }
-  }, getNewCSS = (opts) => getCSS({ ...opts, sinceLastCall: !0 }), defaultFontSetting = configIn.settings?.defaultFont, defaultFont = (() => {
+  }, getNewCSS = (opts) => getCSS({ ...opts, sinceLastCall: !0 }), defaultFontSetting = configIn.settings?.defaultFont ?? configIn.defaultFont, defaultFont = (() => {
     let val = defaultFontSetting;
@@ -142,2 +142,11 @@ return val?.[0] === "$" && (val = val.slice(1)), val;
     settings: {
+      // move deprecated settings here so we can reference them all using `getSetting`
+      // TODO remove this on v2
+      disableSSR: configIn.disableSSR,
+      defaultFont: configIn.defaultFont,
+      disableRootThemeClass: configIn.disableRootThemeClass,
+      onlyAllowShorthands: configIn.onlyAllowShorthands,
+      mediaQueryDefaultActive: configIn.mediaQueryDefaultActive,
+      themeClassNameOnRoot: configIn.themeClassNameOnRoot,
+      cssStyleSeparator: configIn.cssStyleSeparator,
       webContainerType: "inline-size",
@@ -144,0 +153,0 @@ ...configIn.settings

dist/cjs/createTamagui.native.js

@@ -73,3 +73,3 @@ "use strict";
     if (0) {
-      var declarationsToRuleSet, _configIn_settings2;
+      var declarationsToRuleSet;
       for (var key1 in fontsParsed)
@@ -131,3 +131,3 @@ var fontParsed, name, language, fontVars;
     });
-  }, defaultFontSetting = (_configIn_settings = configIn.settings) === null || _configIn_settings === void 0 ? void 0 : _configIn_settings.defaultFont, defaultFont = function() {
+  }, _configIn_settings_defaultFont, defaultFontSetting = (_configIn_settings_defaultFont = (_configIn_settings = configIn.settings) === null || _configIn_settings === void 0 ? void 0 : _configIn_settings.defaultFont) !== null && _configIn_settings_defaultFont !== void 0 ? _configIn_settings_defaultFont : configIn.defaultFont, defaultFont = function() {
     var val2 = defaultFontSetting;
@@ -148,2 +148,11 @@ return (val2 == null ? void 0 : val2[0]) === "$" && (val2 = val2.slice(1)), val2;
     settings: {
+      // move deprecated settings here so we can reference them all using `getSetting`
+      // TODO remove this on v2
+      disableSSR: configIn.disableSSR,
+      defaultFont: configIn.defaultFont,
+      disableRootThemeClass: configIn.disableRootThemeClass,
+      onlyAllowShorthands: configIn.onlyAllowShorthands,
+      mediaQueryDefaultActive: configIn.mediaQueryDefaultActive,
+      themeClassNameOnRoot: configIn.themeClassNameOnRoot,
+      cssStyleSeparator: configIn.cssStyleSeparator,
       webContainerType: "inline-size",
@@ -150,0 +159,0 @@ ...configIn.settings

dist/cjs/helpers/createMediaStyle.js

@@ -30,3 +30,3 @@ var __defProp = Object.defineProperty;
 function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts, isTheme = !1, precedenceImportancePrefix = "") {
-  const selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("addThemeClassName") !== !1 && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
+  const selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
   return [
@@ -38,3 +38,5 @@ selector,
 const createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
-  const [property, , identifier, pseudoIn, rules] = styleObject, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`;
+  const [propertyIn, , identifier, pseudoIn, rules] = styleObject;
+  let property = propertyIn;
+  const enableMediaPropOrder = (0, import_config.getSetting)("mediaPropOrder"), isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`;
   let styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";"), isHover = !1;
@@ -63,7 +65,13 @@ if (isNonWindowMedia) {
         mediaKeys.map((key) => [key, (0, import_useMedia.mediaObjectToString)(mediaQueries[key])])
-      ), prefixes = Object.fromEntries(
+      ), enableMediaPropOrder || (prefixes = Object.fromEntries(
         mediaKeys.map((k, index) => [k, new Array(index + 1).fill(":root").join("")])
-      );
+      ));
     }
-    const mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes[mediaKey], prefix = groupMediaKey ? `@container ${containerName}` : "@media";
+    const mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
+      // this new array should be cached
+      specificities[priority]
+    ) : (
+      // @ts-ignore
+      prefixes[mediaKey]
+    ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
     groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${(0, import_config.getSetting)("webContainerType") || "inline-size"}) {${styleRule}}`);
@@ -70,0 +78,0 @@ }

dist/cjs/helpers/createMediaStyle.native.js

@@ -30,3 +30,3 @@ "use strict";
 function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts) {
-  var isTheme = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, precedenceImportancePrefix = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : "", selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("addThemeClassName") !== !1 && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
+  var isTheme = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, precedenceImportancePrefix = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : "", selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
   return [
@@ -38,3 +38,3 @@ selector,
 var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
-  var [property, , identifier, pseudoIn, rules] = styleObject, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
+  var [propertyIn, , identifier, pseudoIn, rules] = styleObject, property = propertyIn, enableMediaPropOrder = (0, import_config.getSetting)("mediaPropOrder"), isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
     return rule.replace(identifier, nextIdentifier);
@@ -60,3 +60,3 @@ }).join(";"), isHover = !1;
         ];
-      })), prefixes = Object.fromEntries(mediaKeys.map(function(k, index) {
+      })), enableMediaPropOrder || (prefixes = Object.fromEntries(mediaKeys.map(function(k, index) {
         return [
@@ -66,5 +66,11 @@ k,
         ];
-      }));
+      })));
     }
-    var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes[mediaKey], prefix = groupMediaKey ? `@container ${containerName}` : "@media";
+    var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
+      // this new array should be cached
+      specificities[priority]
+    ) : (
+      // @ts-ignore
+      prefixes[mediaKey]
+    ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
     groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${(0, import_config.getSetting)("webContainerType") || "inline-size"}) {${styleRule}}`);
@@ -71,0 +77,0 @@ }

dist/cjs/helpers/expandStyle.js

@@ -31,5 +31,7 @@ var __defProp = Object.defineProperty;
       ["flexShrink", 1],
-      ["flexBasis", (0, import_config.getSetting)("styleCompat") === "legacy" ? "auto" : 0]
+      ["flexBasis", (0, import_config.getSetting)("styleCompat") === "react-native" ? 0 : "auto"]
     ];
   switch (key) {
+    case "textAlignVertical":
+      return [["verticalAlign", value === "center" ? "middle" : value]];
     case "writingDirection":
@@ -36,0 +38,0 @@ return [["direction", value]];

dist/cjs/helpers/getSplitStyles.js

@@ -51,3 +51,3 @@ var __create = Object.create;
   } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass, rulesToInsert = {}, classNames = {}, transforms = {};
-  let pseudos = null, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0;
+  let pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0;
   const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
@@ -122,2 +122,6 @@ process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
+    if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
+      keyInit = keyInit.replace("data-", ""), viewProps.dataSet ||= {}, viewProps.dataSet[keyInit] = valInit;
+      continue;
+    }
     if (isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
@@ -132,2 +136,7 @@ const isValidClassName = keyInit in validStyles, isMediaOrPseudo2 = !isValidClassName && // media are flattened for some reason to color-hover keys,
     }
+    if (keyInit === "dataSet") {
+      for (const keyInit2 in valInit)
+        viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
+      continue;
+    }
     if (!noExpand) {
@@ -140,2 +149,6 @@ if (keyInit === "disabled" && valInit === !0 && (viewProps["aria-disabled"] = !0, (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") && (viewProps.disabled = !0), !variants?.disabled))
       }
+      if (keyInit === "id" || keyInit === "nativeID") {
+        viewProps.id = valInit;
+        continue;
+      }
       let didUseKeyInit = !1;
@@ -285,4 +298,4 @@ if (isReactNative) {
         if (!val) return;
-        const mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
-        if (hasMedia ||= !0, (!shouldDoClasses || styleProps.willBeAnimated) && (typeof hasMedia != "object" && (hasMedia = {}), hasMedia[mediaKeyShort] = !0), isMedia === "platform" && !(0, import_isActivePlatform.isActivePlatform)(key))
+        const hasSpace = val.space, mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
+        if (hasMedia ||= !0, (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && (typeof hasMedia != "object" && (hasMedia = {}), hasMedia[mediaKeyShort] = !0), isMedia === "platform" && !(0, import_isActivePlatform.isActivePlatform)(key))
           return;
@@ -298,3 +311,15 @@ if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key}`, {
         }), shouldDoClasses) {
-          const mediaStyle = getSubStyle(styleState, key, val, !1), mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle), priority = mediaStylesSeen;
+          const mediaStyle = getSubStyle(styleState, key, val, !1);
+          if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
+            const importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(
+              mediaKeyShort,
+              "space",
+              usedKeys,
+              !0
+            );
+            importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(
+              `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
+            ));
+          }
+          const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle), priority = mediaStylesSeen;
           mediaStylesSeen += 1;
@@ -382,10 +407,14 @@ for (const style of mediaStyles) {
           }
-          for (const subKey in mediaStyle)
-            if (subKey !== "space")
-              if (subKey[0] === "$") {
-                if (!(0, import_isActivePlatform.isActivePlatform)(subKey) || !(0, import_isActiveTheme.isActiveTheme)(subKey, themeName)) continue;
-                for (const subSubKey in mediaStyle[subKey])
-                  mergeMediaStyle(subSubKey, mediaStyle[subKey][subSubKey]);
-              } else
-                mergeMediaStyle(subKey, mediaStyle[subKey]);
+          for (const subKey in mediaStyle) {
+            if (subKey === "space") {
+              space = valInit.space;
+              continue;
+            }
+            if (subKey[0] === "$") {
+              if (!(0, import_isActivePlatform.isActivePlatform)(subKey) || !(0, import_isActiveTheme.isActiveTheme)(subKey, themeName)) continue;
+              for (const subSubKey in mediaStyle[subKey])
+                mergeMediaStyle(subSubKey, mediaStyle[subKey][subSubKey]);
+            } else
+              mergeMediaStyle(subKey, mediaStyle[subKey]);
+          }
         }
@@ -449,2 +478,15 @@ return;
   }
+  if (isReactNative)
+    viewProps.tabIndex === 0 && (viewProps.accessible ??= !0);
+  else if (viewProps.tabIndex == null) {
+    const isFocusable = viewProps.focusable ?? viewProps.accessible;
+    viewProps.focusable && delete viewProps.focusable;
+    const role = viewProps.role;
+    isFocusable === !1 && (viewProps.tabIndex = "-1"), // These native elements are focusable by default
+    elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea" ? (isFocusable === !1 || props.accessibilityDisabled === !0) && (viewProps.tabIndex = "-1") : (
+      // These roles are made focusable by default
+      (role === "button" || role === "checkbox" || role === "link" || role === "radio" || // @ts-expect-error (consistent with RNW)
+      role === "textbox" || role === "switch") && isFocusable !== !1 && (viewProps.tabIndex = "0")
+    ), isFocusable && (viewProps.tabIndex = "0", delete viewProps.focusable);
+  }
   const styleProp = props.style;
@@ -463,2 +505,3 @@ if (styleProp)
   const result = {
+    space,
     hasMedia,
@@ -576,4 +619,3 @@ fontFamily: styleState.fontFamily,
   borderRadius: 0
-};
-const mergeTransform = (obj, key, val, backwards = !1) => {
+}, lowercaseHyphenate = (match) => `-${match.toLowerCase()}`, hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate), mergeTransform = (obj, key, val, backwards = !1) => {
   typeof obj.transform != "string" && (obj.transform ||= [], obj.transform[backwards ? "unshift" : "push"]({
@@ -580,0 +622,0 @@ [mapTransformKeys[key] || key]: val

dist/cjs/helpers/getSplitStyles.native.js

@@ -55,6 +55,10 @@ "use strict";
     var valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
-    if (0 && isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
-      var isValidClassName, isMediaOrPseudo;
-      if ((isValidClassName || isMediaOrPseudo) && !shouldDoClasses)
-        var _styleState3;
+    if (0) {
+      if (staticConfig.isReactNative && keyInit.startsWith("data-"))
+        var _viewProps2, _dataSet;
+      if (isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
+        var isValidClassName, isMediaOrPseudo;
+        if ((isValidClassName || isMediaOrPseudo) && !shouldDoClasses)
+          var _styleState3;
+      }
     }
@@ -69,2 +73,7 @@ if (!isValidStyleKeyInit) {
     }
+    if (keyInit === "dataSet") {
+      for (var keyInit1 in valInit)
+        viewProps[`data-${hyphenate(keyInit1)}`] = valInit[keyInit1];
+      return "continue";
+    }
     if (0 && !noExpand)
@@ -209,4 +218,4 @@ var didUseKeyInit;
           if (!val2) return;
-          var mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
-          if (hasMedia || (hasMedia = !0), (!shouldDoClasses || styleProps.willBeAnimated) && (typeof hasMedia != "object" && (hasMedia = {}), hasMedia[mediaKeyShort] = !0), isMedia === "platform" && !(0, import_isActivePlatform.isActivePlatform)(key4))
+          var hasSpace = val2.space, mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
+          if (hasMedia || (hasMedia = !0), (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && (typeof hasMedia != "object" && (hasMedia = {}), hasMedia[mediaKeyShort] = !0), isMedia === "platform" && !(0, import_isActivePlatform.isActivePlatform)(key4))
             return;
@@ -222,3 +231,8 @@ if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key4}`, {
           }), shouldDoClasses) {
-            var mediaStyle = getSubStyle(styleState, key4, val2, !1), mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle), priority = mediaStylesSeen;
+            var mediaStyle = getSubStyle(styleState, key4, val2, !1);
+            if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
+              var importance1 = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", usedKeys, !0);
+              importance1 && (space = val2.space, usedKeys.space = importance1, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`Found more important space for current media ${mediaKeyShort}: ${val2} (importance: ${importance1})`));
+            }
+            var mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle), priority = mediaStylesSeen;
             mediaStylesSeen += 1;
@@ -294,10 +308,14 @@ var _iteratorNormalCompletion12 = !0, _didIteratorError12 = !1, _iteratorError12 = void 0;
             }
-            for (var subKey1 in mediaStyle1)
-              if (subKey1 !== "space")
-                if (subKey1[0] === "$") {
-                  if (!(0, import_isActivePlatform.isActivePlatform)(subKey1) || !(0, import_isActiveTheme.isActiveTheme)(subKey1, themeName)) continue;
-                  for (var subSubKey in mediaStyle1[subKey1])
-                    mergeMediaStyle2(subSubKey, mediaStyle1[subKey1][subSubKey]);
-                } else
-                  mergeMediaStyle2(subKey1, mediaStyle1[subKey1]);
+            for (var subKey1 in mediaStyle1) {
+              if (subKey1 === "space") {
+                space = valInit.space;
+                continue;
+              }
+              if (subKey1[0] === "$") {
+                if (!(0, import_isActivePlatform.isActivePlatform)(subKey1) || !(0, import_isActiveTheme.isActiveTheme)(subKey1, themeName)) continue;
+                for (var subSubKey in mediaStyle1[subKey1])
+                  mergeMediaStyle2(subSubKey, mediaStyle1[subKey1][subSubKey]);
+              } else
+                mergeMediaStyle2(subKey1, mediaStyle1[subKey1]);
+            }
           }
@@ -327,3 +345,3 @@ return;
   props.reddish && (debug = "verbose"), conf = conf || (0, import_config.getConfig)(), import_constants.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-  var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
+  var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
   process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
@@ -392,19 +410,26 @@ var styleState = {
     var _styleState_style, shouldStringifyTransforms;
-  if (0 && styleState.style && shouldDoClasses) {
-    var retainedStyles, shouldRetain;
-    if (!styleState.style.$$css) {
-      var atomic, _iteratorNormalCompletion, _didIteratorError, _iteratorError;
-      try {
-        for (var _iterator, _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0)
-          var atomicStyle, _props_animateOnly, _props_animateOnly1, key2, value, identifier, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
-      } catch (err) {
-      } finally {
+  if (0) {
+    if (styleState.style && shouldDoClasses) {
+      var retainedStyles, shouldRetain;
+      if (!styleState.style.$$css) {
+        var atomic, _iteratorNormalCompletion, _didIteratorError, _iteratorError;
+        try {
+          for (var _iterator, _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0)
+            var atomicStyle, _props_animateOnly, _props_animateOnly1, key2, value, identifier, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
+        } catch (err) {
+        } finally {
+        }
       }
+      if (transforms)
+        for (var namespace in transforms) {
+          var hash, val1, identifier1;
+          if (import_constants.isClient && !insertedTransforms[identifier1])
+            var rule;
+        }
     }
-    if (transforms)
-      for (var namespace in transforms) {
-        var hash, val1, identifier1;
-        if (import_constants.isClient && !insertedTransforms[identifier1])
-          var rule;
-      }
+    if (isReactNative) {
+      if (viewProps.tabIndex === 0)
+        var _viewProps, _accessible;
+    } else if (viewProps.tabIndex == null)
+      var _viewProps_focusable, isFocusable, role;
   }
@@ -437,2 +462,3 @@ var styleProp = props.style;
   var result = {
+    space,
     hasMedia,
@@ -554,4 +580,7 @@ fontFamily: styleState.fontFamily,
   borderRadius: 0
-};
-var mergeTransform = function(obj, key, val) {
+}, lowercaseHyphenate = function(match) {
+  return `-${match.toLowerCase()}`;
+}, hyphenate = function(str) {
+  return str.replace(/[A-Z]/g, lowercaseHyphenate);
+}, mergeTransform = function(obj, key, val) {
   var backwards = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, _obj;
@@ -558,0 +587,0 @@ typeof obj.transform != "string" && ((_obj = obj).transform || (_obj.transform = []), obj.transform[backwards ? "unshift" : "push"]({

dist/cjs/helpers/getThemeCSSRules.js

@@ -60,3 +60,3 @@ var __defProp = Object.defineProperty;
     }
-    const selectors = [...selectorsSet].sort(import_sortString.sortString), css = `${selectors.map((x) => `:root${isBaseTheme(x) && (0, import_config.getSetting)("addThemeClassName") !== !1 ? "" : " "}${x}`).join(", ") + ", .tm_xxt"} {${vars}}`;
+    const selectors = [...selectorsSet].sort(import_sortString.sortString), css = `${selectors.map((x) => `:root${isBaseTheme(x) && (0, import_config.getSetting)("themeClassNameOnRoot") ? "" : " "}${x}`).join(", ") + ", .tm_xxt"} {${vars}}`;
     if (cssRuleSets.push(css), (0, import_config.getSetting)("shouldAddPrefersColorThemes")) {
@@ -63,0 +63,0 @@ const bgString = theme.background ? `background:${(0, import_createVariable.variableToString)(theme.background)};` : "", fgString = theme.color ? `color:${(0, import_createVariable.variableToString)(theme.color)}` : "", bodyRules = `body{${bgString}${fgString}}`, isDark = themeName.startsWith("dark"), baseName = isDark ? "dark" : "light", themeRules = `${selectors.map((x) => {

dist/cjs/helpers/getVariantExtras.js

@@ -21,3 +21,3 @@ var __defProp = Object.defineProperty;
 module.exports = __toCommonJS(getVariantExtras_exports);
-var import_config = require("../config"), import_createVariable = require("../createVariable");
+var import_createVariable = require("../createVariable");
 const cache = /* @__PURE__ */ new WeakMap(), getVariantExtras = (styleState) => {
@@ -34,6 +34,6 @@ if (cache.has(styleState))
     get fontFamily() {
-      return (0, import_createVariable.getVariableValue)(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || (0, import_createVariable.getVariableValue)((0, import_config.getSetting)("defaultFont"));
+      return (0, import_createVariable.getVariableValue)(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || (0, import_createVariable.getVariableValue)(styleState.conf.defaultFont);
     },
     get font() {
-      return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[(0, import_config.getSetting)("defaultFont") || ""] : void 0);
+      return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[styleState.conf.defaultFont] : void 0);
     },
@@ -40,0 +40,0 @@ props

dist/cjs/helpers/getVariantExtras.native.js

@@ -22,3 +22,3 @@ "use strict";
 module.exports = __toCommonJS(getVariantExtras_exports);
-var import_config = require("../config"), import_createVariable = require("../createVariable"), cache = /* @__PURE__ */ new WeakMap(), getVariantExtras = function(styleState) {
+var import_createVariable = require("../createVariable"), cache = /* @__PURE__ */ new WeakMap(), getVariantExtras = function(styleState) {
   if (cache.has(styleState))
@@ -33,6 +33,6 @@ return cache.get(styleState);
     get fontFamily() {
-      return (0, import_createVariable.getVariableValue)(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || (0, import_createVariable.getVariableValue)((0, import_config.getSetting)("defaultFont"));
+      return (0, import_createVariable.getVariableValue)(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || (0, import_createVariable.getVariableValue)(styleState.conf.defaultFont);
     },
     get font() {
-      return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[(0, import_config.getSetting)("defaultFont") || ""] : void 0);
+      return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[styleState.conf.defaultFont] : void 0);
     },
@@ -39,0 +39,0 @@ props

dist/cjs/hooks/useComponentState.js

@@ -20,3 +20,3 @@ var __defProp = Object.defineProperty;
 module.exports = __toCommonJS(useComponentState_exports);
-var import_constants = require("@tamagui/constants"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = require("react"), import_defaultComponentState = require("../defaultComponentState"), import_createShallowSetState = require("../helpers/createShallowSetState"), import_isObj = require("../helpers/isObj"), import_log = require("../helpers/log"), import_config = require("../config");
+var import_constants = require("@tamagui/constants"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = require("react"), import_defaultComponentState = require("../defaultComponentState"), import_createShallowSetState = require("../helpers/createShallowSetState"), import_isObj = require("../helpers/isObj"), import_log = require("../helpers/log");
 const useComponentState = (props, { animationDriver, groups }, staticConfig, config) => {
@@ -53,3 +53,3 @@ const isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(), useAnimations = animationDriver?.useAnimations, stateRef = (0, import_react.useRef)(
   if (import_constants.isWeb && (!import_constants.isServer || isHydrated)) {
-    const isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && ((0, import_config.getSetting)("disableSSR") || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
+    const isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
     (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0, process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("avoiding className", {
@@ -56,0 +56,0 @@ isAnimatedAndHydrated,

dist/cjs/hooks/useComponentState.native.js

@@ -21,3 +21,3 @@ "use strict";
 module.exports = __toCommonJS(useComponentState_exports);
-var import_constants = require("@tamagui/constants"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = require("react"), import_defaultComponentState = require("../defaultComponentState"), import_createShallowSetState = require("../helpers/createShallowSetState"), import_isObj = require("../helpers/isObj"), import_log = require("../helpers/log"), import_config = require("../config"), useComponentState = function(props, param, staticConfig, config) {
+var import_constants = require("@tamagui/constants"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = require("react"), import_defaultComponentState = require("../defaultComponentState"), import_createShallowSetState = require("../helpers/createShallowSetState"), import_isObj = require("../helpers/isObj"), import_log = require("../helpers/log"), useComponentState = function(props, param, staticConfig, config) {
   var { animationDriver, groups } = param, _animationDriver_usePresence, isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(), useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react.useRef)(void 0);
@@ -58,3 +58,3 @@ stateRef.current || (stateRef.current = {});
   if (import_constants.isWeb && (!import_constants.isServer || isHydrated)) {
-    var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && ((0, import_config.getSetting)("disableSSR") || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
+    var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
     (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0, process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("avoiding className", {
@@ -61,0 +61,0 @@ isAnimatedAndHydrated,

dist/cjs/hooks/useMedia.js

@@ -72,3 +72,3 @@ var __create = Object.create;
     throw new Error("use short key");
-  return mediaKeysOrdered.indexOf(key) + 100;
+  return (0, import_config.getConfig)().settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
 }, dispose = /* @__PURE__ */ new Set();
@@ -179,3 +179,3 @@ let mediaVersion = 0;
 const getMediaImportanceIfMoreImportant = (mediaKey, key, importancesUsed, isSizeMedia) => {
-  const importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
+  const importance = isSizeMedia && !(0, import_config.getSetting)("mediaPropOrder") ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
   return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
@@ -182,0 +182,0 @@ };

dist/cjs/hooks/useMedia.native.js

@@ -66,3 +66,4 @@ "use strict";
     throw new Error("use short key");
-  return mediaKeysOrdered.indexOf(key) + 100;
+  var conf = (0, import_config.getConfig)();
+  return conf.settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
 }, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia = function(config) {
@@ -211,3 +212,3 @@ var { media } = config, mediaQueryDefaultActive = (0, import_config.getSetting)("mediaQueryDefaultActive");
 var getMediaImportanceIfMoreImportant = function(mediaKey, key, importancesUsed, isSizeMedia) {
-  var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
+  var importance = isSizeMedia && !(0, import_config.getSetting)("mediaPropOrder") ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
   return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
@@ -214,0 +215,0 @@ };

dist/cjs/index.js

@@ -40,2 +40,3 @@ var __defProp = Object.defineProperty;
 __reExport(index_exports, require("./createShorthands"), module.exports);
+__reExport(index_exports, require("./createTheme"), module.exports);
 __reExport(index_exports, require("./createTamagui"), module.exports);
@@ -48,2 +49,3 @@ __reExport(index_exports, require("./createFont"), module.exports);
 __reExport(index_exports, require("./styled"), module.exports);
+__reExport(index_exports, require("./setupReactNative"), module.exports);
 __reExport(index_exports, require("./interfaces/GetRef"), module.exports);
@@ -58,2 +60,3 @@ var import_config = require("./config"), import_insertStyleRule = require("./helpers/insertStyleRule");
 __reExport(index_exports, require("./helpers/expandStyles"), module.exports);
+__reExport(index_exports, require("./helpers/getExpandedShorthands"), module.exports);
 __reExport(index_exports, require("./helpers/getSplitStyles"), module.exports);
@@ -60,0 +63,0 @@ __reExport(index_exports, require("./helpers/getStylesAtomic"), module.exports);

dist/cjs/index.native.js

@@ -41,2 +41,3 @@ "use strict";
 __reExport(index_exports, require("./createShorthands"), module.exports);
+__reExport(index_exports, require("./createTheme"), module.exports);
 __reExport(index_exports, require("./createTamagui"), module.exports);
@@ -49,2 +50,3 @@ __reExport(index_exports, require("./createFont"), module.exports);
 __reExport(index_exports, require("./styled"), module.exports);
+__reExport(index_exports, require("./setupReactNative"), module.exports);
 __reExport(index_exports, require("./interfaces/GetRef"), module.exports);
@@ -59,2 +61,3 @@ var import_config = require("./config"), import_insertStyleRule = require("./helpers/insertStyleRule");
 __reExport(index_exports, require("./helpers/expandStyles"), module.exports);
+__reExport(index_exports, require("./helpers/getExpandedShorthands"), module.exports);
 __reExport(index_exports, require("./helpers/getSplitStyles"), module.exports);
@@ -125,2 +128,3 @@ __reExport(index_exports, require("./helpers/getStylesAtomic"), module.exports);
   ...require("./createShorthands"),
+  ...require("./createTheme"),
   ...require("./createTamagui"),
@@ -133,2 +137,3 @@ ...require("./createFont"),
   ...require("./styled"),
+  ...require("./setupReactNative"),
   ...require("./interfaces/GetRef"),
@@ -142,2 +147,3 @@ ...require("./constants/constants"),
   ...require("./helpers/expandStyles"),
+  ...require("./helpers/getExpandedShorthands"),
   ...require("./helpers/getSplitStyles"),
@@ -144,0 +150,0 @@ ...require("./helpers/getStylesAtomic"),

dist/cjs/setupReactNative.js

@@ -17,3 +17,4 @@ var __defProp = Object.defineProperty;
 __export(setupReactNative_exports, {
-  getReactNativeConfig: () => getReactNativeConfig
+  getReactNativeConfig: () => getReactNativeConfig,
+  setupReactNative: () => setupReactNative
 });
@@ -44,2 +45,4 @@ module.exports = __toCommonJS(setupReactNative_exports);
 };
+function setupReactNative(rnExports) {
+}
 //# sourceMappingURL=setupReactNative.js.map

dist/cjs/setupReactNative.native.js

@@ -18,3 +18,4 @@ "use strict";
 __export(setupReactNative_exports, {
-  getReactNativeConfig: () => getReactNativeConfig
+  getReactNativeConfig: () => getReactNativeConfig,
+  setupReactNative: () => setupReactNative
 });
@@ -52,6 +53,9 @@ module.exports = __toCommonJS(setupReactNative_exports);
 };
+function setupReactNative(rnExports) {
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getReactNativeConfig
+  getReactNativeConfig,
+  setupReactNative
 });
 //# sourceMappingURL=setupReactNative.js.map

dist/cjs/styled.js

@@ -27,3 +27,10 @@ var __defProp = Object.defineProperty;
   const reactNativeConfig = parentStaticConfig ? void 0 : (0, import_setupReactNative.getReactNativeConfig)(Component), isReactNative = !!(reactNativeConfig || staticExtractionOptions?.isReactNative || parentStaticConfig?.isReactNative), staticConfigProps = (() => {
-    let { variants, name, defaultVariants, context, ...defaultProps } = options || {}, parentDefaultVariants, parentDefaultProps;
+    let {
+      variants,
+      name,
+      defaultVariants,
+      acceptsClassName: acceptsClassNameProp,
+      context,
+      ...defaultProps
+    } = options || {}, parentDefaultVariants, parentDefaultProps;
     if (parentStaticConfig && !(parentStaticConfig.isHOC && !parentStaticConfig.isStyledHOC)) {
@@ -43,3 +50,3 @@ const pdp = parentStaticConfig.defaultProps;
     }), parentStaticConfig?.isHOC && name && (defaultProps.componentName = name);
-    const isText = !!(staticExtractionOptions?.isText || parentStaticConfig?.isText), acceptsClassName = staticExtractionOptions?.acceptsClassName ?? (isPlainStyledComponent || isReactNative || parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName), conf = {
+    const isText = !!(staticExtractionOptions?.isText || parentStaticConfig?.isText), acceptsClassName = staticExtractionOptions?.acceptsClassName ?? acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative || parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName), conf = {
       ...parentStaticConfig,
@@ -46,0 +53,0 @@ ...staticExtractionOptions,

dist/cjs/styled.native.js

@@ -26,3 +26,3 @@ "use strict";
   var parentStaticConfig = ComponentIn.staticConfig, isPlainStyledComponent = !!parentStaticConfig && !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC), isNonStyledHOC = (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && !(parentStaticConfig != null && parentStaticConfig.isStyledHOC), Component = isNonStyledHOC || isPlainStyledComponent ? ComponentIn : (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || ComponentIn, reactNativeConfig = parentStaticConfig ? void 0 : (0, import_setupReactNative.getReactNativeConfig)(Component), isReactNative = !!(reactNativeConfig || staticExtractionOptions != null && staticExtractionOptions.isReactNative || parentStaticConfig != null && parentStaticConfig.isReactNative), staticConfigProps = function() {
-    var { variants, name, defaultVariants, context, ...defaultProps } = options || {}, parentDefaultVariants, parentDefaultProps;
+    var { variants, name, defaultVariants, acceptsClassName: acceptsClassNameProp, context, ...defaultProps } = options || {}, parentDefaultVariants, parentDefaultProps;
     if (parentStaticConfig) {
@@ -45,3 +45,3 @@ var avoid = parentStaticConfig.isHOC && !parentStaticConfig.isStyledHOC;
     }), parentStaticConfig != null && parentStaticConfig.isHOC && name && (defaultProps.componentName = name);
-    var isText = !!(staticExtractionOptions != null && staticExtractionOptions.isText || parentStaticConfig != null && parentStaticConfig.isText), _staticExtractionOptions_acceptsClassName, acceptsClassName = (_staticExtractionOptions_acceptsClassName = staticExtractionOptions == null ? void 0 : staticExtractionOptions.acceptsClassName) !== null && _staticExtractionOptions_acceptsClassName !== void 0 ? _staticExtractionOptions_acceptsClassName : isPlainStyledComponent || isReactNative || (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && (parentStaticConfig == null ? void 0 : parentStaticConfig.acceptsClassName), conf = {
+    var isText = !!(staticExtractionOptions != null && staticExtractionOptions.isText || parentStaticConfig != null && parentStaticConfig.isText), _staticExtractionOptions_acceptsClassName, _ref, acceptsClassName = (_ref = (_staticExtractionOptions_acceptsClassName = staticExtractionOptions == null ? void 0 : staticExtractionOptions.acceptsClassName) !== null && _staticExtractionOptions_acceptsClassName !== void 0 ? _staticExtractionOptions_acceptsClassName : acceptsClassNameProp) !== null && _ref !== void 0 ? _ref : isPlainStyledComponent || isReactNative || (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && (parentStaticConfig == null ? void 0 : parentStaticConfig.acceptsClassName), conf = {
       ...parentStaticConfig,
@@ -48,0 +48,0 @@ ...staticExtractionOptions,

dist/cjs/views/TamaguiProvider.js

@@ -28,3 +28,3 @@ var __create = Object.create;
 module.exports = __toCommonJS(TamaguiProvider_exports);
-var import_constants = require("@tamagui/constants"), import_react = __toESM(require("react")), import_ComponentContext = require("../contexts/ComponentContext"), import_ThemeProvider = require("./ThemeProvider"), import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("@tamagui/constants"), import_react = __toESM(require("react")), import_config = require("../config"), import_ComponentContext = require("../contexts/ComponentContext"), import_ThemeProvider = require("./ThemeProvider"), import_jsx_runtime = require("react/jsx-runtime");
 function TamaguiProvider({
@@ -36,3 +36,5 @@ children,
   defaultTheme,
-  reset
+  disableRootThemeClass,
+  reset,
+  themeClassNameOnRoot
 }) {
@@ -47,3 +49,13 @@ return process.env.TAMAGUI_REACT_19 || import_constants.isClient && (0, import_constants.useIsomorphicLayoutEffect)(() => {
   }, [config, disableInjectCSS]), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnmountedClassName, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { animationDriver: config?.animations, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeProvider.ThemeProvider, { defaultTheme, reset, className, children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnmountedClassName, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { animationDriver: config?.animations, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ThemeProvider.ThemeProvider,
+      {
+        themeClassNameOnRoot: themeClassNameOnRoot ?? (0, import_config.getSetting)("themeClassNameOnRoot"),
+        disableRootThemeClass: disableRootThemeClass ?? (0, import_config.getSetting)("disableRootThemeClass"),
+        defaultTheme: defaultTheme ?? (config ? Object.keys(config.themes)[0] : ""),
+        reset,
+        className,
+        children
+      }
+    ) }) }),
     process.env.TAMAGUI_REACT_19 && config && !disableInjectCSS && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -50,0 +62,0 @@ "style",

dist/cjs/views/TamaguiProvider.native.js

@@ -29,5 +29,5 @@ "use strict";
 module.exports = __toCommonJS(TamaguiProvider_exports);
-var import_jsx_runtime = require("react/jsx-runtime"), import_constants = require("@tamagui/constants"), import_react = __toESM(require("react")), import_ComponentContext = require("../contexts/ComponentContext"), import_ThemeProvider = require("./ThemeProvider");
+var import_jsx_runtime = require("react/jsx-runtime"), import_constants = require("@tamagui/constants"), import_react = __toESM(require("react")), import_config = require("../config"), import_ComponentContext = require("../contexts/ComponentContext"), import_ThemeProvider = require("./ThemeProvider");
 function TamaguiProvider(param) {
-  var { children, disableInjectCSS, config, className, defaultTheme, reset } = param;
+  var { children, disableInjectCSS, config, className, defaultTheme, disableRootThemeClass, reset, themeClassNameOnRoot } = param;
   return process.env.TAMAGUI_REACT_19 || import_constants.isClient && (0, import_constants.useIsomorphicLayoutEffect)(function() {
@@ -49,3 +49,5 @@ if (config && !disableInjectCSS) {
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeProvider.ThemeProvider, {
-            defaultTheme,
+            themeClassNameOnRoot: themeClassNameOnRoot ?? (0, import_config.getSetting)("themeClassNameOnRoot"),
+            disableRootThemeClass: disableRootThemeClass ?? (0, import_config.getSetting)("disableRootThemeClass"),
+            defaultTheme: defaultTheme ?? (config ? Object.keys(config.themes)[0] : ""),
             reset,
@@ -52,0 +54,0 @@ className,

dist/cjs/views/Text.js

@@ -21,3 +21,8 @@ var __defProp = Object.defineProperty;
 var import_helpers = require("@tamagui/helpers"), import_createComponent = require("../createComponent");
-const defaultWebStyle = {
+const ellipseStyle = {
+  maxWidth: "100%",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}, defaultWebStyle = {
   display: "inline",
@@ -29,8 +34,3 @@ // display: inline breaks css transform styles
   margin: 0
-}, ellipsisStyle = {
-  maxWidth: "100%",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-}, Text = (0, import_createComponent.createComponent)({
+}, ellipsisStyle = ellipseStyle, Text = (0, import_createComponent.createComponent)({
   acceptsClassName: !0,
@@ -45,3 +45,3 @@ isText: !0,
     numberOfLines: {
-      1: ellipsisStyle,
+      1: ellipseStyle,
       ":number": (numberOfLines) => numberOfLines >= 1 ? {
@@ -54,2 +54,18 @@ WebkitLineClamp: numberOfLines,
     },
+    selectable: {
+      true: {
+        userSelect: "text",
+        cursor: "text"
+      },
+      false: {
+        userSelect: "none",
+        cursor: "default"
+      }
+    },
+    /**
+     * @deprecated Use ellipsis instead
+     */
+    ellipse: {
+      true: ellipsisStyle
+    },
     ellipsis: {
@@ -56,0 +72,0 @@ true: ellipsisStyle

dist/cjs/views/Text.native.js

@@ -30,3 +30,2 @@ "use strict";
     fontFamily: "unset",
-    position: "static",
     suppressHighlighting: !0
@@ -38,2 +37,8 @@ },
   variants: {
+    /**
+    * @deprecated Use ellipsis instead
+    */
+    ellipse: {
+      true: ellipsisStyle
+    },
     ellipsis: {
@@ -40,0 +45,0 @@ true: ellipsisStyle

dist/cjs/views/ThemeProvider.js

@@ -29,21 +29,18 @@ var __create = Object.create;
 var import_react = __toESM(require("react")), import_constants = require("@tamagui/constants"), import_constants2 = require("../constants/constants"), import_Theme = require("./Theme"), import_config = require("../config"), import_jsx_runtime = require("react/jsx-runtime");
-const ThemeProvider = (props) => {
-  const addThemeClassName = (0, import_config.getSetting)("addThemeClassName");
-  return import_constants.isClient && import_react.default.useLayoutEffect(() => {
-    if (addThemeClassName === !1) return;
-    const cn = `${import_constants2.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = (0, import_config.getSetting)("addThemeClassName") === "body" ? document.documentElement : document.body;
-    return target.classList.add(cn), () => {
-      target.classList.remove(cn);
-    };
-  }, [props.defaultTheme, addThemeClassName]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Theme.Theme,
-    {
-      className: props.className,
-      name: props.defaultTheme,
-      forceClassName: addThemeClassName === void 0,
-      _isRoot: !0,
-      children: props.children
-    }
-  );
-};
+const ThemeProvider = (props) => (import_constants.isClient && import_react.default.useLayoutEffect(() => {
+  if (props.disableRootThemeClass) return;
+  const cn = `${import_constants2.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = props.themeClassNameOnRoot ?? (0, import_config.getSetting)("themeClassNameOnRoot") ? document.documentElement : document.body;
+  return target.classList.add(cn), () => {
+    target.classList.remove(cn);
+  };
+}, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_Theme.Theme,
+  {
+    className: props.className,
+    name: props.defaultTheme,
+    forceClassName: !props.disableRootThemeClass,
+    _isRoot: !0,
+    children: props.children
+  }
+));
 //# sourceMappingURL=ThemeProvider.js.map

dist/cjs/views/ThemeProvider.native.js

@@ -30,6 +30,5 @@ "use strict";
 var import_jsx_runtime = require("react/jsx-runtime"), import_react = __toESM(require("react")), import_constants = require("@tamagui/constants"), import_constants2 = require("../constants/constants"), import_Theme = require("./Theme"), import_config = require("../config"), ThemeProvider = function(props) {
-  var addThemeClassName = (0, import_config.getSetting)("addThemeClassName");
   return import_constants.isClient && import_react.default.useLayoutEffect(function() {
-    if (addThemeClassName !== !1) {
-      var cn = `${import_constants2.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = (0, import_config.getSetting)("addThemeClassName") === "body" ? document.documentElement : document.body;
+    if (!props.disableRootThemeClass) {
+      var cn = `${import_constants2.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, _props_themeClassNameOnRoot, target = ((_props_themeClassNameOnRoot = props.themeClassNameOnRoot) !== null && _props_themeClassNameOnRoot !== void 0 ? _props_themeClassNameOnRoot : (0, import_config.getSetting)("themeClassNameOnRoot")) ? document.documentElement : document.body;
       return target.classList.add(cn), function() {
@@ -41,10 +40,9 @@ target.classList.remove(cn);
     props.defaultTheme,
-    addThemeClassName
+    props.disableRootThemeClass,
+    props.themeClassNameOnRoot
   ]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
     className: props.className,
     name: props.defaultTheme,
-    // we completely disable the className here if its set to any value, 'root', 'body', or false
-    // because in all cases we are putting the classname elsewhere
-    // if its undefined, then the default behavior applies and we use the className here
-    forceClassName: addThemeClassName === void 0,
+    // if root class disabled, force class here
+    forceClassName: !props.disableRootThemeClass,
     // @ts-expect-error
@@ -51,0 +49,0 @@ _isRoot: !0,

dist/esm/constants/constants.js

@@ -1,4 +0,2 @@
-const THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {
-  position: "static"
-}, webViewFlexCompatStyles = {
+const THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {}, webViewFlexCompatStyles = {
   display: "flex",
@@ -5,0 +3,0 @@ alignItems: "stretch",

dist/esm/constants/constants.native.js

@@ -1,4 +0,2 @@
-var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {
-  position: "static"
-}, webViewFlexCompatStyles = {
+var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {}, webViewFlexCompatStyles = {
   display: "flex",
@@ -5,0 +3,0 @@ alignItems: "stretch",

dist/esm/createComponent.js

 import { composeRefs } from "@tamagui/compose-refs";
 import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { composeEventHandlers } from "@tamagui/helpers";
+import { composeEventHandlers, validStyles } from "@tamagui/helpers";
 import React from "react";
 import { devConfig, onConfiguredOnce } from "./config";
+import { stackDefaultStyles } from "./constants/constants";
 import { isDevTools } from "./constants/isDevTools";
@@ -204,3 +205,4 @@ import { ComponentContext } from "./contexts/ComponentContext";
       style: splitStylesStyle,
-      classNames
+      classNames,
+      space
     } = splitStyles, propsWithAnimation = props, {
@@ -379,4 +381,13 @@ asChild,
     } : null;
-    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", { events, attachHover, attachPress }), hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig), process.env.NODE_ENV === "development" && time && time`hooks`;
-    let content = children;
+    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", { events, attachHover, attachPress }), hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig);
+    const direction = props.spaceDirection || "both";
+    process.env.NODE_ENV === "development" && time && time`hooks`;
+    let content = !children || asChild ? children : spacedChildren({
+      separator,
+      children,
+      space,
+      direction,
+      isZStack,
+      debug: debugProp
+    });
     if (asChild) {
@@ -512,2 +523,5 @@ elementType = Slot;
   }
+  function extractable(Component2, extended) {
+    return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
+  }
   function styleable(Component2, options) {
@@ -518,3 +532,3 @@ let out = Component2.render?.length === 2 ? Component2 : React.forwardRef(Component2);
   }
-  return res.styleable = styleable, res;
+  return res.extractable = extractable, res.styleable = styleable, res;
 }
@@ -534,7 +548,129 @@ function getWebEvents(events, webStyle = !0) {
 }
-const fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
+function Unspaced(props) {
+  return props.children;
+}
+Unspaced.isUnspaced = !0;
+const getSpacerSize = (size, { tokens }) => {
+  size = size === !0 ? "$true" : size;
+  const sizePx = tokens.space[size] ?? size;
+  return {
+    width: sizePx,
+    height: sizePx,
+    minWidth: sizePx,
+    minHeight: sizePx
+  };
+}, Spacer = createComponent({
+  acceptsClassName: !0,
+  memo: !0,
+  componentName: "Spacer",
+  validStyles,
+  defaultProps: {
+    ...stackDefaultStyles,
+    // avoid nesting issues
+    tag: "span",
+    size: !0,
+    pointerEvents: "none"
+  },
+  variants: {
+    size: {
+      "...": getSpacerSize
+    },
+    flex: {
+      true: {
+        flexGrow: 1
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0,
+        minHeight: 0
+      },
+      vertical: {
+        width: 0,
+        minWidth: 0
+      },
+      both: {}
+    }
+  }
+});
+function spacedChildren(props) {
+  const { isZStack, children, space, direction, spaceFlex, separator, ensureKeys } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
+  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack))
+    return children;
+  const childrenList = areChildrenArray ? children : React.Children.toArray(children);
+  if (childrenList.length <= 1 && !isZStack && !childrenList[0]?.type?.shouldForwardSpace)
+    return children;
+  const final = [];
+  for (let [index, child] of childrenList.entries()) {
+    const isEmpty = child == null || Array.isArray(child) && child.length === 0;
+    if (!isEmpty && React.isValidElement(child) && child.type?.shouldForwardSpace && (child = React.cloneElement(child, {
+      space,
+      spaceFlex,
+      separator,
+      key: child.key
+    })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(
+      /* @__PURE__ */ jsx(React.Fragment, { children: isZStack ? /* @__PURE__ */ jsx(AbsoluteFill, { children: child }) : child }, `${index}0t`)
+    ), isUnspaced(child) && index === 0 || isZStack) continue;
+    const next = childrenList[index + 1];
+    next && !isEmpty && !isUnspaced(next) && (separator ? (hasSpace && final.push(
+      createSpacer({
+        key: `_${index}_00t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ), final.push(/* @__PURE__ */ jsx(React.Fragment, { children: separator }, `${index}03t`)), hasSpace && final.push(
+      createSpacer({
+        key: `_${index}01t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    )) : final.push(
+      createSpacer({
+        key: `_${index}02t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ));
+  }
+  return process.env.NODE_ENV === "development" && props.debug && log("  Spaced children", final, props), final;
+}
+function createSpacer({ key, direction, space, spaceFlex }) {
+  return /* @__PURE__ */ jsx(
+    Spacer,
+    {
+      size: space,
+      direction,
+      ...typeof spaceFlex < "u" && {
+        flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
+      }
+    },
+    key
+  );
+}
+function isUnspaced(child) {
+  const t = child?.type;
+  return t?.isVisuallyHidden || t?.isUnspaced;
+}
+const AbsoluteFill = createComponent({
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+}), fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
 export {
+  Spacer,
+  Unspaced,
   componentSetStates,
-  createComponent
+  createComponent,
+  spacedChildren
 };
 //# sourceMappingURL=createComponent.js.map

dist/esm/createComponent.native.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { composeRefs } from "@tamagui/compose-refs";
 import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { composeEventHandlers } from "@tamagui/helpers";
+import { composeEventHandlers, validStyles } from "@tamagui/helpers";
 import React from "react";
 import { devConfig, onConfiguredOnce } from "./config";
+import { stackDefaultStyles } from "./constants/constants";
 import { isDevTools } from "./constants/isDevTools";
@@ -213,3 +214,3 @@ import { ComponentContext } from "./contexts/ComponentContext";
     process.env.NODE_ENV === "development" && debugProp === "verbose" && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), setMediaShouldUpdate(stateRef, shouldListenForMedia, mediaListeningKeys);
-    var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames } = splitStyles, propsWithAnimation = props, {
+    var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames, space } = splitStyles, propsWithAnimation = props, {
       asChild,
@@ -414,4 +415,13 @@ children,
       attachPress
-    }), (_hooks_useEvents = hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(hooks, viewProps, events, splitStyles, setStateShallow, staticConfig), process.env.NODE_ENV === "development" && time && time`hooks`;
-    var content = children;
+    }), (_hooks_useEvents = hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(hooks, viewProps, events, splitStyles, setStateShallow, staticConfig);
+    var direction = props.spaceDirection || "both";
+    process.env.NODE_ENV === "development" && time && time`hooks`;
+    var content = !children || asChild ? children : spacedChildren({
+      separator,
+      children,
+      space,
+      direction,
+      isZStack,
+      debug: debugProp
+    });
     if (asChild)
@@ -544,2 +554,5 @@ if (elementType = Slot, 0)
   }
+  function extractable(Component2, extended) {
+    return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
+  }
   function styleable(Component2, options) {
@@ -549,11 +562,141 @@ var _Component_render, isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2, out = isForwardedRefAlready ? Component2 : /* @__PURE__ */ React.forwardRef(Component2), extendedConfig = extendStyledConfig(options?.staticConfig);
   }
-  return res.styleable = styleable, res;
+  return res.extractable = extractable, res.styleable = styleable, res;
 }
-var fromPx = function(val) {
+function Unspaced(props) {
+  return props.children;
+}
+Unspaced.isUnspaced = !0;
+var getSpacerSize = function(size, param) {
+  var { tokens } = param;
+  size = size === !0 ? "$true" : size;
+  var _tokens_space_size, sizePx = (_tokens_space_size = tokens.space[size]) !== null && _tokens_space_size !== void 0 ? _tokens_space_size : size;
+  return {
+    width: sizePx,
+    height: sizePx,
+    minWidth: sizePx,
+    minHeight: sizePx
+  };
+}, Spacer = createComponent({
+  acceptsClassName: !0,
+  memo: !0,
+  componentName: "Spacer",
+  validStyles,
+  defaultProps: {
+    ...stackDefaultStyles,
+    // avoid nesting issues
+    tag: "span",
+    size: !0,
+    pointerEvents: "none"
+  },
+  variants: {
+    size: {
+      "...": getSpacerSize
+    },
+    flex: {
+      true: {
+        flexGrow: 1
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0,
+        minHeight: 0
+      },
+      vertical: {
+        width: 0,
+        minWidth: 0
+      },
+      both: {}
+    }
+  }
+});
+function spacedChildren(props) {
+  var _childrenList__type, _childrenList_, { isZStack, children, space, direction, spaceFlex, separator, ensureKeys } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
+  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack))
+    return children;
+  var childrenList = areChildrenArray ? children : React.Children.toArray(children), len = childrenList.length;
+  if (len <= 1 && !isZStack && !(!((_childrenList_ = childrenList[0]) === null || _childrenList_ === void 0 || (_childrenList__type = _childrenList_.type) === null || _childrenList__type === void 0) && _childrenList__type.shouldForwardSpace))
+    return children;
+  var final = [], _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+  try {
+    for (var _iterator = childrenList.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+      var [index, child] = _step.value, _child_type, isEmpty = child == null || Array.isArray(child) && child.length === 0;
+      if (!isEmpty && /* @__PURE__ */ React.isValidElement(child) && (!((_child_type = child.type) === null || _child_type === void 0) && _child_type.shouldForwardSpace) && (child = /* @__PURE__ */ React.cloneElement(child, {
+        space,
+        spaceFlex,
+        separator,
+        key: child.key
+      })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(/* @__PURE__ */ _jsx(React.Fragment, {
+        children: isZStack ? /* @__PURE__ */ _jsx(AbsoluteFill, {
+          children: child
+        }) : child
+      }, `${index}0t`)), !(isUnspaced(child) && index === 0) && !isZStack) {
+        var next = childrenList[index + 1];
+        next && !isEmpty && !isUnspaced(next) && (separator ? (hasSpace && final.push(createSpacer({
+          key: `_${index}_00t`,
+          direction,
+          space,
+          spaceFlex
+        })), final.push(/* @__PURE__ */ _jsx(React.Fragment, {
+          children: separator
+        }, `${index}03t`)), hasSpace && final.push(createSpacer({
+          key: `_${index}01t`,
+          direction,
+          space,
+          spaceFlex
+        }))) : final.push(createSpacer({
+          key: `_${index}02t`,
+          direction,
+          space,
+          spaceFlex
+        })));
+      }
+    }
+  } catch (err) {
+    _didIteratorError = !0, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError)
+        throw _iteratorError;
+    }
+  }
+  return process.env.NODE_ENV === "development" && props.debug && log("  Spaced children", final, props), final;
+}
+function createSpacer(param) {
+  var { key, direction, space, spaceFlex } = param;
+  return /* @__PURE__ */ _jsx(Spacer, {
+    size: space,
+    direction,
+    ...typeof spaceFlex < "u" && {
+      flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
+    }
+  }, key);
+}
+function isUnspaced(child) {
+  var t = child?.type;
+  return t?.isVisuallyHidden || t?.isUnspaced;
+}
+var AbsoluteFill = createComponent({
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+}), fromPx = function(val) {
   return typeof val != "string" ? val : +val.replace("px", "");
 };
 export {
+  Spacer,
+  Unspaced,
   componentSetStates,
-  createComponent
+  createComponent,
+  spacedChildren
 };
 //# sourceMappingURL=createComponent.js.map

dist/esm/createTamagui.js

@@ -76,3 +76,3 @@ import { isWeb } from "@tamagui/constants";
       }
-      const sep = configIn.settings?.cssStyleSeparator || "";
+      const sep = configIn.cssStyleSeparator || "";
       if (cssRuleSets.push(declarationsToRuleSet(declarations)), fontDeclarations)
@@ -122,3 +122,3 @@ for (const key in fontDeclarations) {
     }
-  }, getNewCSS = (opts) => getCSS({ ...opts, sinceLastCall: !0 }), defaultFontSetting = configIn.settings?.defaultFont, defaultFont = (() => {
+  }, getNewCSS = (opts) => getCSS({ ...opts, sinceLastCall: !0 }), defaultFontSetting = configIn.settings?.defaultFont ?? configIn.defaultFont, defaultFont = (() => {
     let val = defaultFontSetting;
@@ -137,2 +137,11 @@ return val?.[0] === "$" && (val = val.slice(1)), val;
     settings: {
+      // move deprecated settings here so we can reference them all using `getSetting`
+      // TODO remove this on v2
+      disableSSR: configIn.disableSSR,
+      defaultFont: configIn.defaultFont,
+      disableRootThemeClass: configIn.disableRootThemeClass,
+      onlyAllowShorthands: configIn.onlyAllowShorthands,
+      mediaQueryDefaultActive: configIn.mediaQueryDefaultActive,
+      themeClassNameOnRoot: configIn.themeClassNameOnRoot,
+      cssStyleSeparator: configIn.cssStyleSeparator,
       webContainerType: "inline-size",
@@ -139,0 +148,0 @@ ...configIn.settings

dist/esm/createTamagui.native.js

@@ -64,3 +64,3 @@ import { isWeb } from "@tamagui/constants";
     if (0) {
-      var declarationsToRuleSet, _configIn_settings2;
+      var declarationsToRuleSet;
       for (var key1 in fontsParsed)
@@ -122,3 +122,3 @@ var fontParsed, name, language, fontVars;
     });
-  }, defaultFontSetting = (_configIn_settings = configIn.settings) === null || _configIn_settings === void 0 ? void 0 : _configIn_settings.defaultFont, defaultFont = function() {
+  }, _configIn_settings_defaultFont, defaultFontSetting = (_configIn_settings_defaultFont = (_configIn_settings = configIn.settings) === null || _configIn_settings === void 0 ? void 0 : _configIn_settings.defaultFont) !== null && _configIn_settings_defaultFont !== void 0 ? _configIn_settings_defaultFont : configIn.defaultFont, defaultFont = function() {
     var val2 = defaultFontSetting;
@@ -139,2 +139,11 @@ return val2?.[0] === "$" && (val2 = val2.slice(1)), val2;
     settings: {
+      // move deprecated settings here so we can reference them all using `getSetting`
+      // TODO remove this on v2
+      disableSSR: configIn.disableSSR,
+      defaultFont: configIn.defaultFont,
+      disableRootThemeClass: configIn.disableRootThemeClass,
+      onlyAllowShorthands: configIn.onlyAllowShorthands,
+      mediaQueryDefaultActive: configIn.mediaQueryDefaultActive,
+      themeClassNameOnRoot: configIn.themeClassNameOnRoot,
+      cssStyleSeparator: configIn.cssStyleSeparator,
       webContainerType: "inline-size",
@@ -141,0 +150,0 @@ ...configIn.settings

dist/esm/helpers/createMediaStyle.js

@@ -12,3 +12,3 @@ import { getSetting } from "../config";
 function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts, isTheme = !1, precedenceImportancePrefix = "") {
-  const selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("addThemeClassName") !== !1 && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
+  const selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
   return [
@@ -20,3 +20,5 @@ selector,
 const createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
-  const [property, , identifier, pseudoIn, rules] = styleObject, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`;
+  const [propertyIn, , identifier, pseudoIn, rules] = styleObject;
+  let property = propertyIn;
+  const enableMediaPropOrder = getSetting("mediaPropOrder"), isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`;
   let styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";"), isHover = !1;
@@ -45,7 +47,13 @@ if (isNonWindowMedia) {
         mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
-      ), prefixes = Object.fromEntries(
+      ), enableMediaPropOrder || (prefixes = Object.fromEntries(
         mediaKeys.map((k, index) => [k, new Array(index + 1).fill(":root").join("")])
-      );
+      ));
     }
-    const mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes[mediaKey], prefix = groupMediaKey ? `@container ${containerName}` : "@media";
+    const mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
+      // this new array should be cached
+      specificities[priority]
+    ) : (
+      // @ts-ignore
+      prefixes[mediaKey]
+    ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
     groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${getSetting("webContainerType") || "inline-size"}) {${styleRule}}`);
@@ -52,0 +60,0 @@ }

dist/esm/helpers/createMediaStyle.native.js

@@ -12,3 +12,3 @@ import { getSetting } from "../config";
 function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts) {
-  var isTheme = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, precedenceImportancePrefix = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : "", selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("addThemeClassName") !== !1 && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
+  var isTheme = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, precedenceImportancePrefix = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : "", selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
   return [
@@ -20,3 +20,3 @@ selector,
 var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
-  var [property, , identifier, pseudoIn, rules] = styleObject, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
+  var [propertyIn, , identifier, pseudoIn, rules] = styleObject, property = propertyIn, enableMediaPropOrder = getSetting("mediaPropOrder"), isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
     return rule.replace(identifier, nextIdentifier);
@@ -42,3 +42,3 @@ }).join(";"), isHover = !1;
         ];
-      })), prefixes = Object.fromEntries(mediaKeys.map(function(k, index) {
+      })), enableMediaPropOrder || (prefixes = Object.fromEntries(mediaKeys.map(function(k, index) {
         return [
@@ -48,5 +48,11 @@ k,
         ];
-      }));
+      })));
     }
-    var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes[mediaKey], prefix = groupMediaKey ? `@container ${containerName}` : "@media";
+    var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
+      // this new array should be cached
+      specificities[priority]
+    ) : (
+      // @ts-ignore
+      prefixes[mediaKey]
+    ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
     groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${getSetting("webContainerType") || "inline-size"}) {${styleRule}}`);
@@ -53,0 +59,0 @@ }

dist/esm/helpers/expandStyle.js

@@ -17,5 +17,7 @@ import { isWeb } from "@tamagui/constants";
       ["flexShrink", 1],
-      ["flexBasis", getSetting("styleCompat") === "legacy" ? "auto" : 0]
+      ["flexBasis", getSetting("styleCompat") === "react-native" ? 0 : "auto"]
     ];
   switch (key) {
+    case "textAlignVertical":
+      return [["verticalAlign", value === "center" ? "middle" : value]];
     case "writingDirection":
@@ -22,0 +24,0 @@ return [["direction", value]];

dist/esm/helpers/getSplitStyles.js

@@ -67,3 +67,3 @@ import { isClient, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
   } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || globalMediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass, rulesToInsert = {}, classNames = {}, transforms = {};
-  let pseudos = null, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0;
+  let pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0;
   const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView);
@@ -138,2 +138,6 @@ process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
+    if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
+      keyInit = keyInit.replace("data-", ""), viewProps.dataSet ||= {}, viewProps.dataSet[keyInit] = valInit;
+      continue;
+    }
     if (isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
@@ -148,2 +152,7 @@ const isValidClassName = keyInit in validStyles, isMediaOrPseudo2 = !isValidClassName && // media are flattened for some reason to color-hover keys,
     }
+    if (keyInit === "dataSet") {
+      for (const keyInit2 in valInit)
+        viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
+      continue;
+    }
     if (!noExpand) {
@@ -156,2 +165,6 @@ if (keyInit === "disabled" && valInit === !0 && (viewProps["aria-disabled"] = !0, (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") && (viewProps.disabled = !0), !variants?.disabled))
       }
+      if (keyInit === "id" || keyInit === "nativeID") {
+        viewProps.id = valInit;
+        continue;
+      }
       let didUseKeyInit = !1;
@@ -301,4 +314,4 @@ if (isReactNative) {
         if (!val) return;
-        const mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
-        if (hasMedia ||= !0, (!shouldDoClasses || styleProps.willBeAnimated) && (typeof hasMedia != "object" && (hasMedia = {}), hasMedia[mediaKeyShort] = !0), isMedia === "platform" && !isActivePlatform(key))
+        const hasSpace = val.space, mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
+        if (hasMedia ||= !0, (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && (typeof hasMedia != "object" && (hasMedia = {}), hasMedia[mediaKeyShort] = !0), isMedia === "platform" && !isActivePlatform(key))
           return;
@@ -314,3 +327,15 @@ if (process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} ${key}`, {
         }), shouldDoClasses) {
-          const mediaStyle = getSubStyle(styleState, key, val, !1), mediaStyles = getStylesAtomic(mediaStyle), priority = mediaStylesSeen;
+          const mediaStyle = getSubStyle(styleState, key, val, !1);
+          if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
+            const importance = getMediaImportanceIfMoreImportant(
+              mediaKeyShort,
+              "space",
+              usedKeys,
+              !0
+            );
+            importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && log(
+              `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
+            ));
+          }
+          const mediaStyles = getStylesAtomic(mediaStyle), priority = mediaStylesSeen;
           mediaStylesSeen += 1;
@@ -398,10 +423,14 @@ for (const style of mediaStyles) {
           }
-          for (const subKey in mediaStyle)
-            if (subKey !== "space")
-              if (subKey[0] === "$") {
-                if (!isActivePlatform(subKey) || !isActiveTheme(subKey, themeName)) continue;
-                for (const subSubKey in mediaStyle[subKey])
-                  mergeMediaStyle(subSubKey, mediaStyle[subKey][subSubKey]);
-              } else
-                mergeMediaStyle(subKey, mediaStyle[subKey]);
+          for (const subKey in mediaStyle) {
+            if (subKey === "space") {
+              space = valInit.space;
+              continue;
+            }
+            if (subKey[0] === "$") {
+              if (!isActivePlatform(subKey) || !isActiveTheme(subKey, themeName)) continue;
+              for (const subSubKey in mediaStyle[subKey])
+                mergeMediaStyle(subSubKey, mediaStyle[subKey][subSubKey]);
+            } else
+              mergeMediaStyle(subKey, mediaStyle[subKey]);
+          }
         }
@@ -465,2 +494,15 @@ return;
   }
+  if (isReactNative)
+    viewProps.tabIndex === 0 && (viewProps.accessible ??= !0);
+  else if (viewProps.tabIndex == null) {
+    const isFocusable = viewProps.focusable ?? viewProps.accessible;
+    viewProps.focusable && delete viewProps.focusable;
+    const role = viewProps.role;
+    isFocusable === !1 && (viewProps.tabIndex = "-1"), // These native elements are focusable by default
+    elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea" ? (isFocusable === !1 || props.accessibilityDisabled === !0) && (viewProps.tabIndex = "-1") : (
+      // These roles are made focusable by default
+      (role === "button" || role === "checkbox" || role === "link" || role === "radio" || // @ts-expect-error (consistent with RNW)
+      role === "textbox" || role === "switch") && isFocusable !== !1 && (viewProps.tabIndex = "0")
+    ), isFocusable && (viewProps.tabIndex = "0", delete viewProps.focusable);
+  }
   const styleProp = props.style;
@@ -479,2 +521,3 @@ if (styleProp)
   const result = {
+    space,
     hasMedia,
@@ -592,4 +635,3 @@ fontFamily: styleState.fontFamily,
   borderRadius: 0
-};
-const mergeTransform = (obj, key, val, backwards = !1) => {
+}, lowercaseHyphenate = (match) => `-${match.toLowerCase()}`, hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate), mergeTransform = (obj, key, val, backwards = !1) => {
   typeof obj.transform != "string" && (obj.transform ||= [], obj.transform[backwards ? "unshift" : "push"]({
@@ -596,0 +638,0 @@ [mapTransformKeys[key] || key]: val

dist/esm/helpers/getSplitStyles.native.js

@@ -46,6 +46,10 @@ import { isAndroid, isClient, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
     var valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
-    if (0 && isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
-      var isValidClassName, isMediaOrPseudo;
-      if ((isValidClassName || isMediaOrPseudo) && !shouldDoClasses)
-        var _styleState3;
+    if (0) {
+      if (staticConfig.isReactNative && keyInit.startsWith("data-"))
+        var _viewProps2, _dataSet;
+      if (isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
+        var isValidClassName, isMediaOrPseudo;
+        if ((isValidClassName || isMediaOrPseudo) && !shouldDoClasses)
+          var _styleState3;
+      }
     }
@@ -60,2 +64,7 @@ if (!isValidStyleKeyInit) {
     }
+    if (keyInit === "dataSet") {
+      for (var keyInit1 in valInit)
+        viewProps[`data-${hyphenate(keyInit1)}`] = valInit[keyInit1];
+      return "continue";
+    }
     if (0 && !noExpand)
@@ -200,4 +209,4 @@ var didUseKeyInit;
           if (!val2) return;
-          var mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
-          if (hasMedia || (hasMedia = !0), (!shouldDoClasses || styleProps.willBeAnimated) && (typeof hasMedia != "object" && (hasMedia = {}), hasMedia[mediaKeyShort] = !0), isMedia === "platform" && !isActivePlatform(key4))
+          var hasSpace = val2.space, mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
+          if (hasMedia || (hasMedia = !0), (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && (typeof hasMedia != "object" && (hasMedia = {}), hasMedia[mediaKeyShort] = !0), isMedia === "platform" && !isActivePlatform(key4))
             return;
@@ -213,3 +222,8 @@ if (process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} ${key4}`, {
           }), shouldDoClasses) {
-            var mediaStyle = getSubStyle(styleState, key4, val2, !1), mediaStyles = getStylesAtomic(mediaStyle), priority = mediaStylesSeen;
+            var mediaStyle = getSubStyle(styleState, key4, val2, !1);
+            if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
+              var importance1 = getMediaImportanceIfMoreImportant(mediaKeyShort, "space", usedKeys, !0);
+              importance1 && (space = val2.space, usedKeys.space = importance1, process.env.NODE_ENV === "development" && debug === "verbose" && log(`Found more important space for current media ${mediaKeyShort}: ${val2} (importance: ${importance1})`));
+            }
+            var mediaStyles = getStylesAtomic(mediaStyle), priority = mediaStylesSeen;
             mediaStylesSeen += 1;
@@ -285,10 +299,14 @@ var _iteratorNormalCompletion12 = !0, _didIteratorError12 = !1, _iteratorError12 = void 0;
             }
-            for (var subKey1 in mediaStyle1)
-              if (subKey1 !== "space")
-                if (subKey1[0] === "$") {
-                  if (!isActivePlatform(subKey1) || !isActiveTheme(subKey1, themeName)) continue;
-                  for (var subSubKey in mediaStyle1[subKey1])
-                    mergeMediaStyle2(subSubKey, mediaStyle1[subKey1][subSubKey]);
-                } else
-                  mergeMediaStyle2(subKey1, mediaStyle1[subKey1]);
+            for (var subKey1 in mediaStyle1) {
+              if (subKey1 === "space") {
+                space = valInit.space;
+                continue;
+              }
+              if (subKey1[0] === "$") {
+                if (!isActivePlatform(subKey1) || !isActiveTheme(subKey1, themeName)) continue;
+                for (var subSubKey in mediaStyle1[subKey1])
+                  mergeMediaStyle2(subSubKey, mediaStyle1[subKey1][subSubKey]);
+              } else
+                mergeMediaStyle2(subKey1, mediaStyle1[subKey1]);
+            }
           }
@@ -318,3 +336,3 @@ return;
   props.reddish && (debug = "verbose"), conf = conf || getConfig(), isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-  var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || globalMediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView);
+  var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || globalMediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView);
   process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
@@ -383,19 +401,26 @@ var styleState = {
     var _styleState_style, shouldStringifyTransforms;
-  if (0 && styleState.style && shouldDoClasses) {
-    var retainedStyles, shouldRetain;
-    if (!styleState.style.$$css) {
-      var atomic, _iteratorNormalCompletion, _didIteratorError, _iteratorError;
-      try {
-        for (var _iterator, _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0)
-          var atomicStyle, _props_animateOnly, _props_animateOnly1, key2, value, identifier, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
-      } catch (err) {
-      } finally {
+  if (0) {
+    if (styleState.style && shouldDoClasses) {
+      var retainedStyles, shouldRetain;
+      if (!styleState.style.$$css) {
+        var atomic, _iteratorNormalCompletion, _didIteratorError, _iteratorError;
+        try {
+          for (var _iterator, _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0)
+            var atomicStyle, _props_animateOnly, _props_animateOnly1, key2, value, identifier, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
+        } catch (err) {
+        } finally {
+        }
       }
+      if (transforms)
+        for (var namespace in transforms) {
+          var hash, val1, identifier1;
+          if (isClient && !insertedTransforms[identifier1])
+            var rule;
+        }
     }
-    if (transforms)
-      for (var namespace in transforms) {
-        var hash, val1, identifier1;
-        if (isClient && !insertedTransforms[identifier1])
-          var rule;
-      }
+    if (isReactNative) {
+      if (viewProps.tabIndex === 0)
+        var _viewProps, _accessible;
+    } else if (viewProps.tabIndex == null)
+      var _viewProps_focusable, isFocusable, role;
   }
@@ -428,2 +453,3 @@ var styleProp = props.style;
   var result = {
+    space,
     hasMedia,
@@ -545,4 +571,7 @@ fontFamily: styleState.fontFamily,
   borderRadius: 0
-};
-var mergeTransform = function(obj, key, val) {
+}, lowercaseHyphenate = function(match) {
+  return `-${match.toLowerCase()}`;
+}, hyphenate = function(str) {
+  return str.replace(/[A-Z]/g, lowercaseHyphenate);
+}, mergeTransform = function(obj, key, val) {
   var backwards = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, _obj;
@@ -549,0 +578,0 @@ typeof obj.transform != "string" && ((_obj = obj).transform || (_obj.transform = []), obj.transform[backwards ? "unshift" : "push"]({

dist/esm/helpers/getThemeCSSRules.js

@@ -46,3 +46,3 @@ import { simpleHash } from "@tamagui/helpers";
     }
-    const selectors = [...selectorsSet].sort(sortString), css = `${selectors.map((x) => `:root${isBaseTheme(x) && getSetting("addThemeClassName") !== !1 ? "" : " "}${x}`).join(", ") + ", .tm_xxt"} {${vars}}`;
+    const selectors = [...selectorsSet].sort(sortString), css = `${selectors.map((x) => `:root${isBaseTheme(x) && getSetting("themeClassNameOnRoot") ? "" : " "}${x}`).join(", ") + ", .tm_xxt"} {${vars}}`;
     if (cssRuleSets.push(css), getSetting("shouldAddPrefersColorThemes")) {
@@ -49,0 +49,0 @@ const bgString = theme.background ? `background:${variableToString(theme.background)};` : "", fgString = theme.color ? `color:${variableToString(theme.color)}` : "", bodyRules = `body{${bgString}${fgString}}`, isDark = themeName.startsWith("dark"), baseName = isDark ? "dark" : "light", themeRules = `${selectors.map((x) => {

dist/esm/helpers/getVariantExtras.js

@@ -1,2 +0,1 @@
-import { getSetting } from "../config";
 import { getVariableValue } from "../createVariable";
@@ -14,6 +13,6 @@ const cache = /* @__PURE__ */ new WeakMap(), getVariantExtras = (styleState) => {
     get fontFamily() {
-      return getVariableValue(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || getVariableValue(getSetting("defaultFont"));
+      return getVariableValue(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || getVariableValue(styleState.conf.defaultFont);
     },
     get font() {
-      return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[getSetting("defaultFont") || ""] : void 0);
+      return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[styleState.conf.defaultFont] : void 0);
     },
@@ -20,0 +19,0 @@ props

dist/esm/helpers/getVariantExtras.native.js

@@ -1,2 +0,1 @@
-import { getSetting } from "../config";
 import { getVariableValue } from "../createVariable";
@@ -13,6 +12,6 @@ var cache = /* @__PURE__ */ new WeakMap(), getVariantExtras = function(styleState) {
     get fontFamily() {
-      return getVariableValue(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || getVariableValue(getSetting("defaultFont"));
+      return getVariableValue(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || getVariableValue(styleState.conf.defaultFont);
     },
     get font() {
-      return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[getSetting("defaultFont") || ""] : void 0);
+      return fonts[this.fontFamily] || (!props.fontFamily || props.fontFamily[0] === "$" ? fonts[styleState.conf.defaultFont] : void 0);
     },
@@ -19,0 +18,0 @@ props

dist/esm/hooks/useComponentState.js

@@ -12,3 +12,2 @@ import { isServer, isWeb } from "@tamagui/constants";
 import { log } from "../helpers/log";
-import { getSetting } from "../config";
 const useComponentState = (props, { animationDriver, groups }, staticConfig, config) => {
@@ -45,3 +44,3 @@ const isHydrated = useDidFinishSSR(), useAnimations = animationDriver?.useAnimations, stateRef = useRef(
   if (isWeb && (!isServer || isHydrated)) {
-    const isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (getSetting("disableSSR") || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
+    const isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
     (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0, process.env.NODE_ENV === "development" && props.debug && log("avoiding className", {
@@ -48,0 +47,0 @@ isAnimatedAndHydrated,

dist/esm/hooks/useComponentState.native.js

@@ -8,3 +8,2 @@ import { isServer, isWeb } from "@tamagui/constants";
 import { log } from "../helpers/log";
-import { getSetting } from "../config";
 var useComponentState = function(props, param, staticConfig, config) {
@@ -46,3 +45,3 @@ var { animationDriver, groups } = param, _animationDriver_usePresence, isHydrated = useDidFinishSSR(), useAnimations = animationDriver?.useAnimations, stateRef = useRef(void 0);
   if (isWeb && (!isServer || isHydrated)) {
-    var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (getSetting("disableSSR") || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
+    var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
     (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0, process.env.NODE_ENV === "development" && props.debug && log("avoiding className", {
@@ -49,0 +48,0 @@ isAnimatedAndHydrated,

dist/esm/hooks/useMedia.js

 import { isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
 import React from "react";
-import { getSetting } from "../config";
+import { getConfig, getSetting } from "../config";
 import { matchMedia } from "../helpers/matchMedia";
@@ -36,3 +36,3 @@ import { pseudoDescriptors } from "../helpers/pseudoDescriptors";
     throw new Error("use short key");
-  return mediaKeysOrdered.indexOf(key) + 100;
+  return getConfig().settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
 }, dispose = /* @__PURE__ */ new Set();
@@ -143,3 +143,3 @@ let mediaVersion = 0;
 const getMediaImportanceIfMoreImportant = (mediaKey, key, importancesUsed, isSizeMedia) => {
-  const importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
+  const importance = isSizeMedia && !getSetting("mediaPropOrder") ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
   return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
@@ -146,0 +146,0 @@ };

dist/esm/hooks/useMedia.native.js

 import { isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
 import React from "react";
-import { getSetting } from "../config";
+import { getConfig, getSetting } from "../config";
 import { matchMedia } from "../helpers/matchMedia";
@@ -30,3 +30,4 @@ import { pseudoDescriptors } from "../helpers/pseudoDescriptors";
     throw new Error("use short key");
-  return mediaKeysOrdered.indexOf(key) + 100;
+  var conf = getConfig();
+  return conf.settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
 }, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia = function(config) {
@@ -175,3 +176,3 @@ var { media } = config, mediaQueryDefaultActive = getSetting("mediaQueryDefaultActive");
 var getMediaImportanceIfMoreImportant = function(mediaKey, key, importancesUsed, isSizeMedia) {
-  var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
+  var importance = isSizeMedia && !getSetting("mediaPropOrder") ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
   return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
@@ -178,0 +179,0 @@ };

dist/esm/index.js

 export * from "./Tamagui";
 export * from "./createComponent";
 export * from "./createShorthands";
+export * from "./createTheme";
 export * from "./createTamagui";
@@ -11,2 +12,3 @@ export * from "./createFont";
 export * from "./styled";
+export * from "./setupReactNative";
 export * from "./interfaces/GetRef";
@@ -32,2 +34,3 @@ import {
 export * from "./helpers/expandStyles";
+export * from "./helpers/getExpandedShorthands";
 export * from "./helpers/getSplitStyles";
@@ -34,0 +37,0 @@ export * from "./helpers/getStylesAtomic";

dist/esm/index.native.js

 export * from "./Tamagui";
 export * from "./createComponent";
 export * from "./createShorthands";
+export * from "./createTheme";
 export * from "./createTamagui";
@@ -11,2 +12,3 @@ export * from "./createFont";
 export * from "./styled";
+export * from "./setupReactNative";
 export * from "./interfaces/GetRef";
@@ -22,2 +24,3 @@ import { setConfig, getSetting, setupDev, getConfig, getThemes, getTokens, updateConfig, getToken, getTokenValue } from "./config";
 export * from "./helpers/expandStyles";
+export * from "./helpers/getExpandedShorthands";
 export * from "./helpers/getSplitStyles";
@@ -24,0 +27,0 @@ export * from "./helpers/getStylesAtomic";

dist/esm/setupReactNative.js

@@ -24,5 +24,8 @@ const ReactNativeStaticConfigs = /* @__PURE__ */ new WeakMap();
 };
+function setupReactNative(rnExports) {
+}
 export {
-  getReactNativeConfig
+  getReactNativeConfig,
+  setupReactNative
 };
 //# sourceMappingURL=setupReactNative.js.map

dist/esm/setupReactNative.native.js

@@ -31,5 +31,8 @@ var ReactNativeStaticConfigs = /* @__PURE__ */ new WeakMap();
 };
+function setupReactNative(rnExports) {
+}
 export {
-  getReactNativeConfig
+  getReactNativeConfig,
+  setupReactNative
 };
 //# sourceMappingURL=setupReactNative.js.map

dist/esm/styled.js

@@ -10,3 +10,10 @@ import { createComponent } from "./createComponent";
   const reactNativeConfig = parentStaticConfig ? void 0 : getReactNativeConfig(Component), isReactNative = !!(reactNativeConfig || staticExtractionOptions?.isReactNative || parentStaticConfig?.isReactNative), staticConfigProps = (() => {
-    let { variants, name, defaultVariants, context, ...defaultProps } = options || {}, parentDefaultVariants, parentDefaultProps;
+    let {
+      variants,
+      name,
+      defaultVariants,
+      acceptsClassName: acceptsClassNameProp,
+      context,
+      ...defaultProps
+    } = options || {}, parentDefaultVariants, parentDefaultProps;
     if (parentStaticConfig && !(parentStaticConfig.isHOC && !parentStaticConfig.isStyledHOC)) {
@@ -26,3 +33,3 @@ const pdp = parentStaticConfig.defaultProps;
     }), parentStaticConfig?.isHOC && name && (defaultProps.componentName = name);
-    const isText = !!(staticExtractionOptions?.isText || parentStaticConfig?.isText), acceptsClassName = staticExtractionOptions?.acceptsClassName ?? (isPlainStyledComponent || isReactNative || parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName), conf = {
+    const isText = !!(staticExtractionOptions?.isText || parentStaticConfig?.isText), acceptsClassName = staticExtractionOptions?.acceptsClassName ?? acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative || parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName), conf = {
       ...parentStaticConfig,
@@ -29,0 +36,0 @@ ...staticExtractionOptions,

dist/esm/styled.native.js

@@ -8,3 +8,3 @@ import { createComponent } from "./createComponent";
   var parentStaticConfig = ComponentIn.staticConfig, isPlainStyledComponent = !!parentStaticConfig && !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC), isNonStyledHOC = parentStaticConfig?.isHOC && !parentStaticConfig?.isStyledHOC, Component = isNonStyledHOC || isPlainStyledComponent ? ComponentIn : parentStaticConfig?.Component || ComponentIn, reactNativeConfig = parentStaticConfig ? void 0 : getReactNativeConfig(Component), isReactNative = !!(reactNativeConfig || staticExtractionOptions?.isReactNative || parentStaticConfig?.isReactNative), staticConfigProps = function() {
-    var { variants, name, defaultVariants, context, ...defaultProps } = options || {}, parentDefaultVariants, parentDefaultProps;
+    var { variants, name, defaultVariants, acceptsClassName: acceptsClassNameProp, context, ...defaultProps } = options || {}, parentDefaultVariants, parentDefaultProps;
     if (parentStaticConfig) {
@@ -27,3 +27,3 @@ var avoid = parentStaticConfig.isHOC && !parentStaticConfig.isStyledHOC;
     }), parentStaticConfig?.isHOC && name && (defaultProps.componentName = name);
-    var isText = !!(staticExtractionOptions?.isText || parentStaticConfig?.isText), _staticExtractionOptions_acceptsClassName, acceptsClassName = (_staticExtractionOptions_acceptsClassName = staticExtractionOptions?.acceptsClassName) !== null && _staticExtractionOptions_acceptsClassName !== void 0 ? _staticExtractionOptions_acceptsClassName : isPlainStyledComponent || isReactNative || parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName, conf = {
+    var isText = !!(staticExtractionOptions?.isText || parentStaticConfig?.isText), _staticExtractionOptions_acceptsClassName, _ref, acceptsClassName = (_ref = (_staticExtractionOptions_acceptsClassName = staticExtractionOptions?.acceptsClassName) !== null && _staticExtractionOptions_acceptsClassName !== void 0 ? _staticExtractionOptions_acceptsClassName : acceptsClassNameProp) !== null && _ref !== void 0 ? _ref : isPlainStyledComponent || isReactNative || parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName, conf = {
       ...parentStaticConfig,
@@ -30,0 +30,0 @@ ...staticExtractionOptions,

dist/esm/views/TamaguiProvider.js

 import { isClient, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import React from "react";
+import { getSetting } from "../config";
 import { ComponentContext } from "../contexts/ComponentContext";
@@ -12,3 +13,5 @@ import { ThemeProvider } from "./ThemeProvider";
   defaultTheme,
-  reset
+  disableRootThemeClass,
+  reset,
+  themeClassNameOnRoot
 }) {
@@ -23,3 +26,13 @@ return process.env.TAMAGUI_REACT_19 || isClient && useIsomorphicLayoutEffect(() => {
   }, [config, disableInjectCSS]), /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(UnmountedClassName, { children: /* @__PURE__ */ jsx(ComponentContext.Provider, { animationDriver: config?.animations, children: /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, reset, className, children }) }) }),
+    /* @__PURE__ */ jsx(UnmountedClassName, { children: /* @__PURE__ */ jsx(ComponentContext.Provider, { animationDriver: config?.animations, children: /* @__PURE__ */ jsx(
+      ThemeProvider,
+      {
+        themeClassNameOnRoot: themeClassNameOnRoot ?? getSetting("themeClassNameOnRoot"),
+        disableRootThemeClass: disableRootThemeClass ?? getSetting("disableRootThemeClass"),
+        defaultTheme: defaultTheme ?? (config ? Object.keys(config.themes)[0] : ""),
+        reset,
+        className,
+        children
+      }
+    ) }) }),
     process.env.TAMAGUI_REACT_19 && config && !disableInjectCSS && /* @__PURE__ */ jsx(
@@ -26,0 +39,0 @@ "style",

dist/esm/views/TamaguiProvider.native.js

 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isClient, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import React from "react";
+import { getSetting } from "../config";
 import { ComponentContext } from "../contexts/ComponentContext";
 import { ThemeProvider } from "./ThemeProvider";
 function TamaguiProvider(param) {
-  var { children, disableInjectCSS, config, className, defaultTheme, reset } = param;
+  var { children, disableInjectCSS, config, className, defaultTheme, disableRootThemeClass, reset, themeClassNameOnRoot } = param;
   return process.env.TAMAGUI_REACT_19 || isClient && useIsomorphicLayoutEffect(function() {
@@ -24,3 +25,5 @@ if (config && !disableInjectCSS) {
           children: /* @__PURE__ */ _jsx(ThemeProvider, {
-            defaultTheme,
+            themeClassNameOnRoot: themeClassNameOnRoot ?? getSetting("themeClassNameOnRoot"),
+            disableRootThemeClass: disableRootThemeClass ?? getSetting("disableRootThemeClass"),
+            defaultTheme: defaultTheme ?? (config ? Object.keys(config.themes)[0] : ""),
             reset,
@@ -27,0 +30,0 @@ className,

dist/esm/views/Text.js

 import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent";
-const defaultWebStyle = {
+const ellipseStyle = {
+  maxWidth: "100%",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}, defaultWebStyle = {
   display: "inline",
@@ -10,8 +15,3 @@ // display: inline breaks css transform styles
   margin: 0
-}, ellipsisStyle = {
-  maxWidth: "100%",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-}, Text = createComponent({
+}, ellipsisStyle = ellipseStyle, Text = createComponent({
   acceptsClassName: !0,
@@ -26,3 +26,3 @@ isText: !0,
     numberOfLines: {
-      1: ellipsisStyle,
+      1: ellipseStyle,
       ":number": (numberOfLines) => numberOfLines >= 1 ? {
@@ -35,2 +35,18 @@ WebkitLineClamp: numberOfLines,
     },
+    selectable: {
+      true: {
+        userSelect: "text",
+        cursor: "text"
+      },
+      false: {
+        userSelect: "none",
+        cursor: "default"
+      }
+    },
+    /**
+     * @deprecated Use ellipsis instead
+     */
+    ellipse: {
+      true: ellipsisStyle
+    },
     ellipsis: {
@@ -37,0 +53,0 @@ true: ellipsisStyle

dist/esm/views/Text.native.js

@@ -11,3 +11,2 @@ import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
     fontFamily: "unset",
-    position: "static",
     suppressHighlighting: !0
@@ -19,2 +18,8 @@ },
   variants: {
+    /**
+    * @deprecated Use ellipsis instead
+    */
+    ellipse: {
+      true: ellipsisStyle
+    },
     ellipsis: {
@@ -21,0 +26,0 @@ true: ellipsisStyle

dist/esm/views/ThemeProvider.js

@@ -7,21 +7,18 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
-const ThemeProvider = (props) => {
-  const addThemeClassName = getSetting("addThemeClassName");
-  return isClient && React.useLayoutEffect(() => {
-    if (addThemeClassName === !1) return;
-    const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = getSetting("addThemeClassName") === "body" ? document.documentElement : document.body;
-    return target.classList.add(cn), () => {
-      target.classList.remove(cn);
-    };
-  }, [props.defaultTheme, addThemeClassName]), /* @__PURE__ */ jsx(
-    Theme,
-    {
-      className: props.className,
-      name: props.defaultTheme,
-      forceClassName: addThemeClassName === void 0,
-      _isRoot: !0,
-      children: props.children
-    }
-  );
-};
+const ThemeProvider = (props) => (isClient && React.useLayoutEffect(() => {
+  if (props.disableRootThemeClass) return;
+  const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = props.themeClassNameOnRoot ?? getSetting("themeClassNameOnRoot") ? document.documentElement : document.body;
+  return target.classList.add(cn), () => {
+    target.classList.remove(cn);
+  };
+}, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]), /* @__PURE__ */ jsx(
+  Theme,
+  {
+    className: props.className,
+    name: props.defaultTheme,
+    forceClassName: !props.disableRootThemeClass,
+    _isRoot: !0,
+    children: props.children
+  }
+));
 export {
@@ -28,0 +25,0 @@ ThemeProvider

dist/esm/views/ThemeProvider.native.js

@@ -8,6 +8,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var ThemeProvider = function(props) {
-  var addThemeClassName = getSetting("addThemeClassName");
   return isClient && React.useLayoutEffect(function() {
-    if (addThemeClassName !== !1) {
-      var cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = getSetting("addThemeClassName") === "body" ? document.documentElement : document.body;
+    if (!props.disableRootThemeClass) {
+      var cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, _props_themeClassNameOnRoot, target = ((_props_themeClassNameOnRoot = props.themeClassNameOnRoot) !== null && _props_themeClassNameOnRoot !== void 0 ? _props_themeClassNameOnRoot : getSetting("themeClassNameOnRoot")) ? document.documentElement : document.body;
       return target.classList.add(cn), function() {
@@ -19,10 +18,9 @@ target.classList.remove(cn);
     props.defaultTheme,
-    addThemeClassName
+    props.disableRootThemeClass,
+    props.themeClassNameOnRoot
   ]), /* @__PURE__ */ _jsx(Theme, {
     className: props.className,
     name: props.defaultTheme,
-    // we completely disable the className here if its set to any value, 'root', 'body', or false
-    // because in all cases we are putting the classname elsewhere
-    // if its undefined, then the default behavior applies and we use the className here
-    forceClassName: addThemeClassName === void 0,
+    // if root class disabled, force class here
+    forceClassName: !props.disableRootThemeClass,
     // @ts-expect-error
@@ -29,0 +27,0 @@ _isRoot: !0,

package.json

 {
   "name": "@tamagui/web",
-  "version": "1.121.12-1737270844392",
+  "version": "1.121.12-1737271201540",
   "source": "src/index.ts",
@@ -30,11 +30,11 @@ "main": "dist/cjs",
   "dependencies": {
-    "@tamagui/compose-refs": "1.121.12-1737270844392",
-    "@tamagui/constants": "1.121.12-1737270844392",
-    "@tamagui/helpers": "1.121.12-1737270844392",
-    "@tamagui/normalize-css-color": "1.121.12-1737270844392",
-    "@tamagui/timer": "1.121.12-1737270844392",
-    "@tamagui/types": "1.121.12-1737270844392",
-    "@tamagui/use-did-finish-ssr": "1.121.12-1737270844392",
-    "@tamagui/use-event": "1.121.12-1737270844392",
-    "@tamagui/use-force-update": "1.121.12-1737270844392"
+    "@tamagui/compose-refs": "1.121.12-1737271201540",
+    "@tamagui/constants": "1.121.12-1737271201540",
+    "@tamagui/helpers": "1.121.12-1737271201540",
+    "@tamagui/normalize-css-color": "1.121.12-1737271201540",
+    "@tamagui/timer": "1.121.12-1737271201540",
+    "@tamagui/types": "1.121.12-1737271201540",
+    "@tamagui/use-did-finish-ssr": "1.121.12-1737271201540",
+    "@tamagui/use-event": "1.121.12-1737271201540",
+    "@tamagui/use-force-update": "1.121.12-1737271201540"
   },
@@ -46,3 +46,3 @@ "peerDependencies": {
   "devDependencies": {
-    "@tamagui/build": "1.121.12-1737270844392",
+    "@tamagui/build": "1.121.12-1737271201540",
     "@testing-library/react": "^16.1.0",
@@ -49,0 +49,0 @@ "csstype": "^3.0.10",

No alert changes

Improved metrics

Total package byte prevSize

3204867

increased by2.71%

Lines of code

52566

increased by2.57%

Worsened metrics

Number of low supply chain risk alerts

1002

increased by1.21%

Dependency changes

• + Added@tamagui/compose-refs@1.121.12-1737271201540(transitive)

• + Added@tamagui/constants@1.121.12-1737271201540(transitive)

• + Added@tamagui/helpers@1.121.12-1737271201540(transitive)

• + Added@tamagui/normalize-css-color@1.121.12-1737271201540(transitive)

• + Added@tamagui/simple-hash@1.121.12-1737271201540(transitive)

• + Added@tamagui/timer@1.121.12-1737271201540(transitive)

• + Added@tamagui/types@1.121.12-1737271201540(transitive)

• + Added@tamagui/use-did-finish-ssr@1.121.12-1737271201540(transitive)

• + Added@tamagui/use-event@1.121.12-1737271201540(transitive)

• + Added@tamagui/use-force-update@1.121.12-1737271201540(transitive)

• - Removed@tamagui/compose-refs@1.121.12-1737270844392(transitive)

• - Removed@tamagui/constants@1.121.12-1737270844392(transitive)

• - Removed@tamagui/helpers@1.121.12-1737270844392(transitive)

• - Removed@tamagui/normalize-css-color@1.121.12-1737270844392(transitive)

• - Removed@tamagui/simple-hash@1.121.12-1737270844392(transitive)

• - Removed@tamagui/timer@1.121.12-1737270844392(transitive)

• - Removed@tamagui/types@1.121.12-1737270844392(transitive)

• - Removed@tamagui/use-did-finish-ssr@1.121.12-1737270844392(transitive)

• - Removed@tamagui/use-event@1.121.12-1737270844392(transitive)

• - Removed@tamagui/use-force-update@1.121.12-1737270844392(transitive)

• Updated@tamagui/compose-refs@1.121.12-1737271201540

• Updated@tamagui/constants@1.121.12-1737271201540

• Updated@tamagui/helpers@1.121.12-1737271201540

• Updated@tamagui/normalize-css-color@1.121.12-1737271201540

• Updated@tamagui/timer@1.121.12-1737271201540

• Updated@tamagui/types@1.121.12-1737271201540

• Updated@tamagui/use-did-finish-ssr@1.121.12-1737271201540

• Updated@tamagui/use-event@1.121.12-1737271201540

• Updated@tamagui/use-force-update@1.121.12-1737271201540