tamagui 1.80.3 → 1.81.0

package/dist/native.js

@@ -1568,7 +1568,7 @@ var require_objectIdentityKey_native = __commonJS({
       for (let key in obj) {
         k += key;
         let arg = obj[key], type = typeof arg;
-        if (!arg || type !== "object")
+        if (!arg || type !== "object" && type !== "function")
           k += type + arg;
         else if (cache.has(arg))
           k += cache.get(arg);
@@ -1607,16 +1607,22 @@ var require_createStyledContext_native = __commonJS({
         scope,
         ...values
       }) => {
-        let value = (0, import_react2.useMemo)(() => ({
+        let current;
+        try {
+          current = useStyledContext(scope);
+        } catch {
+        }
+        let next = (0, import_react2.useMemo)(() => ({
           // this ! is a workaround for ts error
           ...defaultValues,
+          ...current,
           ...values
-        }), [(0, import_objectIdentityKey.objectIdentityKey)(values)]), Provider2 = OGProvider2;
+        }), [(0, import_objectIdentityKey.objectIdentityKey)(values), current]), Provider2 = OGProvider2;
         if (scope) {
           let ScopedContext = scopedContexts.get(scope);
           ScopedContext || (ScopedContext = (0, import_react2.createContext)(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Provider2, { value, children });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Provider2, { value: next, children });
       }, useStyledContext = (scope) => {
         let context = scope ? scopedContexts.get(scope) : OGContext;
         return (0, import_react2.useContext)(context);
@@ -3318,37 +3324,43 @@ var require_propMapper_native = __commonJS({
       fontSize: "size",
       fontWeight: "weight"
     }, lastFontFamilyToken = null, getTokenForKey = (key, value, resolveAs = "none", styleState) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (resolveAs === "none")
         return value;
-      let { theme, conf = (0, import_config.getConfig)(), context, fontFamily } = styleState, tokensParsed = conf.tokensParsed, valOrVar, hasSet = !1;
+      let { theme, conf = (0, import_config.getConfig)(), context, fontFamily, staticConfig } = styleState, tokensParsed = conf.tokensParsed, valOrVar, hasSet = !1;
       if (theme && value in theme)
         valOrVar = theme[value], process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.info(` - resolving ${key} to theme value ${value}: ${(_a = valOrVar == null ? void 0 : valOrVar.get) == null ? void 0 : _a.call(valOrVar)}`), hasSet = !0;
       else if (value in conf.specificTokens)
         hasSet = !0, valOrVar = conf.specificTokens[value];
       else {
-        switch (key) {
-          case "fontFamily": {
-            valOrVar = ((_b = (context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed)[value]) == null ? void 0 : _b.family) || value, lastFontFamilyToken = value, hasSet = !0;
-            break;
-          }
-          case "fontSize":
-          case "lineHeight":
-          case "letterSpacing":
-          case "fontWeight": {
-            let defaultFont = conf.defaultFont || "$body", fam = fontFamily || defaultFont;
-            if (fam) {
-              let fontsParsed = context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed, font = fontsParsed[fam] || fontsParsed[defaultFont];
-              valOrVar = ((_c = font == null ? void 0 : font[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value, hasSet = !0;
+        let customTokenAccept = (_b = staticConfig == null ? void 0 : staticConfig.acceptTokens) == null ? void 0 : _b[key];
+        if (customTokenAccept) {
+          let val = tokensParsed[customTokenAccept][value];
+          val && (valOrVar = val, hasSet = !0);
+        } else {
+          switch (key) {
+            case "fontFamily": {
+              valOrVar = ((_c = (context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed)[value]) == null ? void 0 : _c.family) || value, lastFontFamilyToken = value, hasSet = !0;
+              break;
+            }
+            case "fontSize":
+            case "lineHeight":
+            case "letterSpacing":
+            case "fontWeight": {
+              let defaultFont = conf.defaultFont || "$body", fam = fontFamily || defaultFont;
+              if (fam) {
+                let fontsParsed = context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed, font = fontsParsed[fam] || fontsParsed[defaultFont];
+                valOrVar = ((_d = font == null ? void 0 : font[fontShorthand[key] || key]) == null ? void 0 : _d[value]) || value, hasSet = !0;
+              }
+              break;
             }
-            break;
           }
+          for (let cat in import_helpers.tokenCategories)
+            if (key in import_helpers.tokenCategories[cat]) {
+              let res = tokensParsed[cat][value];
+              res != null && (valOrVar = res, hasSet = !0);
+            }
         }
-        for (let cat in import_helpers.tokenCategories)
-          if (key in import_helpers.tokenCategories[cat]) {
-            let res = tokensParsed[cat][value];
-            res != null && (valOrVar = res, hasSet = !0);
-          }
         if (!hasSet) {
           let spaceVar = tokensParsed.space[value];
           spaceVar != null && (valOrVar = spaceVar, hasSet = !0);
@@ -3394,7 +3406,12 @@ var require_getSplitStyles_native = __commonJS({
       useSplitStyles: () => useSplitStyles
     });
     module2.exports = __toCommonJS2(getSplitStyles_exports);
-    var import_constants4 = require_index_native(), import_helpers = require_index_native7(), import_react2 = require("react"), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_useMedia = require_useMedia_native(), import_createMediaStyle = require_createMediaStyle_native(), import_expandStyles = require_expandStyles_native(), import_getGroupPropParts = require_getGroupPropParts_native(), import_getStylesAtomic = require_getStylesAtomic_native(), import_insertStyleRule = require_insertStyleRule_native(), import_log = require_log_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-", getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
+    var import_constants4 = require_index_native(), import_helpers = require_index_native7(), import_react2 = require("react"), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_useMedia = require_useMedia_native(), import_createMediaStyle = require_createMediaStyle_native(), import_expandStyles = require_expandStyles_native(), import_getGroupPropParts = require_getGroupPropParts_native(), import_getStylesAtomic = require_getStylesAtomic_native(), import_insertStyleRule = require_insertStyleRule_native(), import_log = require_log_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-";
+    function isValidStyleKey(key, staticConfig) {
+      let validStyleProps = staticConfig.validStyles ?? (staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles);
+      return key in validStyleProps || staticConfig.acceptTokens && key in staticConfig.acceptTokens;
+    }
+    var getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
       var _a, _b, _c, _e, _f, _g;
       conf = conf || (0, import_config.getConfig)(), import_constants4.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
       let { shorthands } = conf, {
@@ -3406,7 +3423,7 @@ var require_getSplitStyles_native = __commonJS({
         inlineWhenUnflattened,
         parentStaticConfig,
         acceptsClassName
-      } = staticConfig, validStyleProps = isText ? import_helpers.stylePropsText : import_helpers.validStyles, viewProps = {}, mediaState3 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants4.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = "", mediaStylesSeen = 0, styleState = {
+      } = staticConfig, viewProps = {}, mediaState3 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants4.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = "", mediaStylesSeen = 0, styleState = {
         curProps: { ...props },
         classNames,
         conf,
@@ -3434,7 +3451,7 @@ var require_getSplitStyles_native = __commonJS({
         let keyInit = keyOg, valInit = props[keyOg];
         if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !isHOC)
           continue;
-        let valInitType = typeof valInit;
+        let valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig);
         if (styleState.curProps[keyInit] = valInit, !import_constants4.isAndroid && keyInit === "elevationAndroid")
           continue;
         if (keyInit === "userSelect")
@@ -3483,7 +3500,7 @@ var require_getSplitStyles_native = __commonJS({
             case "accessibilityRequired":
             default:
           }
-        let isValidStyleKeyInit = keyInit in validStyleProps, isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo = !!(isMedia || isPseudo), isStyleProp = isMediaOrPseudo || isVariant && !styleProps.noExpand || isValidStyleKeyInit || isShorthand;
+        let isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo = !!(isMedia || isPseudo), isStyleProp = isMediaOrPseudo || isVariant && !styleProps.noExpand || isValidStyleKeyInit || isShorthand;
         if (isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))
           continue;
         let shouldPassProp = !isStyleProp || // is in parent variants
@@ -3704,7 +3721,7 @@ current`, {
               if (
                 // is HOC we can just pass through the styles as props
                 // this fixes issues where style prop got merged with wrong priority
-                !isHOC && (key in validStyleProps || import_constants4.isAndroid && key === "elevation")
+                !isHOC && (isValidStyleKey(key, staticConfig) || import_constants4.isAndroid && key === "elevation")
               ) {
                 mergeStyle(styleState, key, val);
                 continue;
@@ -6365,7 +6382,6 @@ var require_Text_native = __commonJS({
           }
         }
       },
-      deoptProps: /* @__PURE__ */ new Set(["ellipse"]),
       validStyles: {
         ...import_helpers.validStyles,
         ...import_helpers.stylePropsTextOnly
@@ -10193,7 +10209,7 @@ var require_SheetImplementationCustom_native = __commonJS({
             (point) => getYPositions(snapPointsMode, point, screenSize, frameSize)
           ),
           [screenSize, frameSize, snapPoints, snapPointsMode]
-        ), { animationDriver } = (0, import_core13.useConfiguration)(), { useAnimatedNumber, useAnimatedNumberStyle, useAnimatedNumberReaction } = animationDriver, AnimatedView = animationDriver.View;
+        ), { animationDriver } = (0, import_core13.useConfiguration)(), { useAnimatedNumber, useAnimatedNumberStyle, useAnimatedNumberReaction } = animationDriver, AnimatedView = animationDriver.View ?? import_core13.Stack;
         (0, import_constants4.useIsomorphicLayoutEffect)(() => {
           if (parentSheetContext && open)
             return parentSheetContext(!0), () => {
@@ -12216,7 +12232,7 @@ var require_Button_native = __commonJS({
       Icon: ButtonIcon
     });
     function useButton({ textProps, ...propsIn }, { Text: Text3 = Button2.Text } = { Text: Button2.Text }) {
-      let isNested = (0, import_react2.useContext)(import_stacks3.ButtonNestingContext), didFinishSSR = (0, import_web.useDidFinishSSR)(), propsActive = (0, import_web.useProps)(propsIn), {
+      let isNested = (0, import_react2.useContext)(import_stacks3.ButtonNestingContext), propsActive = (0, import_web.useProps)(propsIn), {
         icon,
         iconAfter,
         space,
@@ -12227,6 +12243,7 @@ var require_Button_native = __commonJS({
         noTextWrap,
         fontFamily,
         fontSize,
+        tag,
         ...restProps
       } = propsActive, size2 = propsActive.size || (propsActive.unstyled ? void 0 : "$true"), color = propsActive.color, iconSize = (typeof size2 == "number" ? size2 * 0.5 : (0, import_font_size.getFontSize)(size2)) * scaleIcon, getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
         size: iconSize,
@@ -12245,11 +12262,7 @@ var require_Button_native = __commonJS({
         separator,
         direction: propsActive.flexDirection === "column" || propsActive.flexDirection === "column-reverse" ? "vertical" : "horizontal",
         children: [themedIcon, ...contents, themedIconAfter]
-      }), tag = isNested ? "span" : (
-        // defaults to <a /> when accessibilityRole = link
-        // see https://github.com/tamagui/tamagui/issues/505
-        propsActive.accessibilityRole === "link" ? "a" : void 0
-      ), props = {
+      }), props = {
         size: size2,
         ...propsIn.disabled && {
           // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
@@ -12259,13 +12272,16 @@ var require_Button_native = __commonJS({
             borderColor: "$background"
           }
         },
-        ...tag && {
-          tag
-        },
+        // fixes SSR issue + DOM nesting issue of not allowing button in button
+        tag: tag ?? (isNested ? "span" : (
+          // defaults to <a /> when accessibilityRole = link
+          // see https://github.com/tamagui/tamagui/issues/505
+          propsActive.accessibilityRole === "link" ? "a" : "button"
+        )),
         ...restProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.ButtonNestingContext.Provider, { value: !0, children: inner }),
         // forces it to be a runtime pressStyle so it passes through context text colors
-        disableClassName: didFinishSSR
+        disableClassName: !0
       };
       return {
         spaceSize,
@@ -18225,8 +18241,7 @@ var require_Tabs_native = __commonJS({
     });
     module2.exports = __toCommonJS2(Tabs_exports);
     var import_compose_refs = require_index_native10(), import_constants4 = require_index_native(), import_get_button_sized2 = require_index_native18(), import_group = require_index_native50(), import_helpers = require_index_native7(), import_roving_focus = require_index_native57(), import_stacks3 = require_index_native19(), import_use_controllable_state = require_index_native9(), import_use_direction = require_index_native22(), import_web = require_index_native12(), React2 = __toESM2(require("react")), import_jsx_runtime6 = require("react/jsx-runtime"), TABS_CONTEXT = "TabsContext", TAB_LIST_NAME = "TabsList", TabsListFrame = (0, import_web.styled)(import_group.Group, {
-      name: TAB_LIST_NAME,
-      focusable: !0
+      name: TAB_LIST_NAME
     }), TabsList = TabsListFrame.extractable(
       React2.forwardRef(
         (props, forwardedRef) => {
@@ -18235,7 +18250,6 @@ var require_Tabs_native = __commonJS({
             import_roving_focus.RovingFocusGroup,
             {
               __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
-              asChild: "except-style",
               orientation: context.orientation,
               dir: context.dir,
               loop,
@@ -18258,12 +18272,12 @@ var require_Tabs_native = __commonJS({
     TabsList.displayName = TAB_LIST_NAME;
     var TRIGGER_NAME = "TabsTrigger", TabsTriggerFrame = (0, import_web.styled)(import_stacks3.ThemeableStack, {
       name: TRIGGER_NAME,
+      tag: "button",
       justifyContent: "center",
       alignItems: "center",
       flexWrap: "nowrap",
       flexDirection: "row",
       cursor: "pointer",
-      focusable: !0,
       userSelect: "none",
       variants: {
         size: {
@@ -18330,11 +18344,11 @@ var require_Tabs_native = __commonJS({
             };
           }, [context.triggersCount]), React2.useEffect(() => {
             isSelected && layout && (onInteraction == null || onInteraction("select", layout));
-          }, [isSelected, value, layout]), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_web.Theme, { name: isSelected ? "active" : null, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          }, [isSelected, value, layout]), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_web.Theme, { name: isSelected ? "active" : null, forceClassName: !0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_roving_focus.RovingFocusGroup.Item,
             {
               __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
-              asChild: "except-style",
+              asChild: !0,
               focusable: !disabled,
               active: isSelected,
               children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(