tamagui 1.74.13 → 1.74.15

package/dist/native.js

@@ -1177,7 +1177,19 @@ var require_useMedia_native = __commonJS({
           }
         }
       ) : {}
-    ), mediaQueryConfig3 = {}, getMedia3 = () => mediaState3, mediaKeys = /* @__PURE__ */ new Set(), isMediaKey = (key) => mediaKeys.has(key) || key[0] === "$" && (key.startsWith("$platform-") || key.startsWith("$theme-") || key.startsWith("$group-")), initState, defaultMediaImportance = Object.keys(import_pseudoDescriptors.pseudoDescriptors).length, mediaKeysOrdered, getMediaKeyImportance = (key) => {
+    ), mediaQueryConfig3 = {}, getMedia3 = () => mediaState3, mediaKeys = /* @__PURE__ */ new Set(), isMediaKey = (key) => {
+      if (mediaKeys.has(key))
+        return !0;
+      if (key[0] === "$") {
+        if (key.startsWith("$platform-"))
+          return "platform";
+        if (key.startsWith("$theme-"))
+          return "theme";
+        if (key.startsWith("$group-"))
+          return "group";
+      }
+      return !1;
+    }, initState, defaultMediaImportance = Object.keys(import_pseudoDescriptors.pseudoDescriptors).length, mediaKeysOrdered, getMediaKeyImportance = (key) => {
       if (process.env.NODE_ENV === "development" && key[0] === "$")
         throw new Error("use short key");
       return (0, import_config.getConfig)().settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
@@ -1661,11 +1673,11 @@ var require_createMediaStyle_native = __commonJS({
     module2.exports = __toCommonJS2(createMediaStyle_exports);
     var import_config = require_config_native(), import_useMedia = require_useMedia_native(), import_getGroupPropParts = require_getGroupPropParts_native(), MEDIA_SEP = "_", prefixes = null, selectors = null, groupPseudoToPseudoCSSMap = {
       press: "active"
-    }, createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, negate, priority) => {
-      let { property, identifier, rules } = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isThemeMedia = mediaKeyIn.startsWith("theme-"), isPlatformMedia = !isThemeMedia && mediaKeyIn.startsWith("platform-"), isGroup = !isThemeMedia && !isPlatformMedia && mediaKeyIn.startsWith("group-"), isNonWindowMedia = isThemeMedia || isPlatformMedia || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
+    }, createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
+      let { property, identifier, rules } = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.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 = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
       if (isNonWindowMedia) {
         let precedenceImportancePrefix = new Array((priority || 0) + (isGroup ? 1 : 0)).fill(":root").join("");
-        if (isThemeMedia || isGroup) {
+        if (isTheme || isGroup) {
           let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn), mediaName = groupInfo == null ? void 0 : groupInfo.name;
           groupMediaKey = groupInfo == null ? void 0 : groupInfo.media, isGroup && (containerName = mediaName);
           let name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = conf.themeClassNameOnRoot ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] || groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${name}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
@@ -2879,7 +2891,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 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;
         if (isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))
           continue;
         let shouldPassProp = !isStyleProp || // is in parent variants
@@ -2926,7 +2938,7 @@ current`, {
         if (expanded) {
           for (let [key, val] of expanded)
             if (!(val == null || key in usedKeys)) {
-              if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = isMedia || isPseudo, isVariant = variants && key in variants, (inlineProps != null && inlineProps.has(key) || IS_STATIC && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || ((_b = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _b[keyInit]))) {
+              if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps != null && inlineProps.has(key) || IS_STATIC && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || ((_b = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _b[keyInit]))) {
                 passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` - passing down prop ${key}`), console.info({ val, after: { ...viewProps[key] } }), console.groupEnd());
                 continue;
               }
@@ -2991,8 +3003,7 @@ current`, {
               } else if (isMedia) {
                 if (!val)
                   continue;
-                let isPlatformMedia = key.startsWith("$platform-");
-                if (isPlatformMedia) {
+                if (isMedia === "platform") {
                   let platform = key.slice(10);
                   if (
                     // supports web, ios, android
@@ -3037,14 +3048,15 @@ current`, {
                       style2,
                       mediaKeyShort,
                       import_useMedia.mediaQueryConfig,
+                      isMedia,
                       !1,
                       priority
                     );
                     `${style2.property}${PROP_SPLIT}${mediaKeyShort}` in usedKeys || out.identifier;
                   }
                 } else {
-                  let isThemeMedia = !isPlatformMedia && mediaKeyShort.startsWith("theme-"), isGroupMedia = !isPlatformMedia && !isThemeMedia && mediaKeyShort.startsWith("group-");
-                  if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState3[mediaKeyShort])
+                  let isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
+                  if (!isThemeMedia && isMedia !== "platform" && !isGroupMedia && !mediaState3[mediaKeyShort])
                     continue;
                   let importanceBump = 0;
                   if (isThemeMedia) {
@@ -3821,6 +3833,7 @@ var require_Theme_native = __commonJS({
     )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Theme_exports = {};
     __export2(Theme_exports, {
       Theme: () => Theme2,
+      getThemeCNStyle: () => getThemeCNStyle,
       useThemedChildren: () => useThemedChildren,
       wrapThemeElements: () => wrapThemeElements
     });
@@ -3843,7 +3856,7 @@ var require_Theme_native = __commonJS({
       return useThemedChildren(themeState, children, props, isRoot);
     });
     Theme2.avoidForwardRef = !0;
-    function useThemedChildren(themeState, children, props, isRoot = !1) {
+    function useThemedChildren(themeState, children, props, isRoot = !1, avoidWrap = !1) {
       let { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = (0, import_react2.useRef)(!1);
       if (isNewTheme && (hasEverThemed.current = !0), !(isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot))
         return children;
@@ -3854,32 +3867,37 @@ var require_Theme_native = __commonJS({
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Theme2, { name: themeManager.state.parentName, children: child.props.children })
       ) : child));
       let elementsWithContext = themeManager ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next }) : next;
-      return forceClassName === !1 ? elementsWithContext : import_constants.isWeb ? wrapThemeElements({
+      return forceClassName === !1 ? elementsWithContext : import_constants.isWeb && !avoidWrap ? wrapThemeElements({
         children: elementsWithContext,
         themeState,
         forceClassName,
         isRoot
       }) : elementsWithContext;
     }
+    function getThemeCNStyle(themeState, isRoot = !1) {
+      var _a, _b;
+      if (!themeState.isNewTheme)
+        return;
+      let themeColor = (_a = themeState.state) != null && _a.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
+        color: themeColor
+      } : void 0, className = ((_b = themeState.state) == null ? void 0 : _b.className) || "";
+      return isRoot && (className = className.replace("t_sub_theme", "")), { style, className };
+    }
     function wrapThemeElements({
       children,
       themeState,
       forceClassName,
       isRoot
     }) {
-      var _a, _b, _c, _d;
+      var _a, _b;
       if (isRoot && forceClassName === !1)
         return children;
       let inverse = (_a = themeState.state) == null ? void 0 : _a.inverse;
       if (!themeState.isNewTheme && !inverse && !forceClassName)
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "_dsp_contents is_Theme", children });
-      let themeColor = (_b = themeState.state) != null && _b.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", colorStyle = themeColor ? {
-        color: themeColor
-      } : void 0, className = ((_c = themeState.state) == null ? void 0 : _c.className) || "";
-      isRoot && (className = className.replace("t_sub_theme", ""));
-      let themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style: colorStyle, children });
+      let { className, style } = getThemeCNStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
       if (inverse != null || forceClassName) {
-        let name = ((_d = themeState.state) == null ? void 0 : _d.name) || "";
+        let name = ((_b = themeState.state) == null ? void 0 : _b.name) || "";
         themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
@@ -3897,7 +3915,7 @@ var require_Theme_native = __commonJS({
 var require_themeable_native = __commonJS({
   "../web/dist/cjs/helpers/themeable.native.js"(exports, module2) {
     "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
         __defProp2(target, name, { get: all[name], enumerable: !0 });
     }, __copyProps2 = (to, from, except, desc) => {
@@ -3905,26 +3923,15 @@ var require_themeable_native = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-      // If the importer is in node compatibility mode or this is not an ESM
-      // file that has been converted to a CommonJS file using a Babel-
-      // compatible transform (i.e. "__esModule" has not been set), then set
-      // "default" to the CommonJS "module.exports" for node compatibility.
-      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: !0 }) : target,
-      mod
-    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), themeable_exports = {};
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), themeable_exports = {};
     __export2(themeable_exports, {
       themeable: () => themeable3
     });
     module2.exports = __toCommonJS2(themeable_exports);
-    var import_react2 = __toESM2(require("react")), import_Theme = require_Theme_native(), import_jsx_runtime6 = require("react/jsx-runtime");
-    function themeable3(component, staticConfig) {
+    var import_react2 = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime6 = require("react/jsx-runtime");
+    function themeable3(Component, staticConfig) {
       let withTheme = (0, import_react2.forwardRef)(function(props, ref) {
-        let { themeInverse, theme, componentName, themeReset, ...rest } = props, element = import_react2.default.createElement(component, {
-          ...rest,
-          ref,
-          "data-disable-theme": !0
-        });
+        let { themeInverse, theme, componentName, themeReset, ...rest } = props, element = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, { ref, ...rest, "data-disable-theme": !0 });
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_Theme.Theme,
           {
@@ -3938,7 +3945,7 @@ var require_themeable_native = __commonJS({
           }
         );
       });
-      return withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`, withTheme;
+      return withTheme.displayName = `Themed(${(Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "Anonymous"})`, withTheme;
     }
   }
 });
@@ -4304,6 +4311,8 @@ var require_createComponent_native = __commonJS({
           onMouseDown,
           onMouseEnter,
           onMouseLeave,
+          onFocus,
+          onBlur,
           separator,
           // ignore from here on out
           forceStyle: _forceStyle,
@@ -4387,7 +4396,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
         let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style, className;
         viewProps.style = style;
-        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), handlesPressEvents = !(import_constants.isWeb || asChild), shouldAttach = !!(attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle);
+        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), handlesPressEvents = !(import_constants.isWeb || asChild), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
         process.env.NODE_ENV === "development" && time && time`events-setup`;
         let events = shouldAttach && !isDisabled && !props.asChild ? {
           onPressOut: attachPress ? (e) => {
@@ -4412,9 +4421,23 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           onPress: attachPress ? (e) => {
             unPress(), import_constants.isWeb && (onClick == null || onClick(e)), onPress == null || onPress(e);
           } : void 0,
-          onLongPress: attachPress && onLongPress ? (e) => {
-            unPress(), onLongPress == null || onLongPress(e);
-          } : void 0
+          ...attachPress && onLongPress && {
+            onLongPress: (e) => {
+              unPress(), onLongPress == null || onLongPress(e);
+            }
+          },
+          ...attachFocus && {
+            onFocus: (e) => {
+              setStateShallow({
+                focus: !0
+              }), onFocus == null || onFocus(e);
+            },
+            onBlur: (e) => {
+              setStateShallow({
+                focus: !1
+              }), onBlur == null || onBlur(e);
+            }
+          }
         } : null;
         events && !asChild && Object.assign(events, {
           cancelable: !viewProps.rejectResponderTermination,
@@ -4460,7 +4483,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               }
             };
         }, [groupName]);
-        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, { groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableThemeProp ? content : (0, import_Theme.useThemedChildren)(themeState, content, themeStateProps), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
+        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, { groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableThemeProp ? content : (0, import_Theme.useThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
           let contextProps = staticConfig.context.props;
           for (let key in contextProps)
             (key in style || key in viewProps) && (overriddenContextProps ||= {}, overriddenContextProps[key] = style[key] ?? viewProps[key]);
@@ -4527,12 +4550,12 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       function extractable(Component2, extended) {
         return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
       }
-      function styleable(Component2, extended) {
+      function styleable(Component2, options) {
         var _a2;
         let ComponentForwardedRef = ((_a2 = Component2.render) == null ? void 0 : _a2.length) === 2 ? Component2 : (
           // memo because theme changes otherwise would always re-render
           (0, import_react2.memo)((0, import_react2.forwardRef)(Component2))
-        ), extendedConfig = extendStyledConfig(extended), out = (0, import_themeable.themeable)(ComponentForwardedRef, extendedConfig);
+        ), extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig), out = options != null && options.disableTheme ? ComponentForwardedRef : (0, import_themeable.themeable)(ComponentForwardedRef, extendedConfig);
         return out.staticConfig = extendedConfig, out.styleable = styleable, out;
       }
       return res.extractable = extractable, res.styleable = styleable, res;
@@ -5678,6 +5701,7 @@ var require_useProps_native = __commonJS({
           mediaState: media,
           noSkip: !0,
           noClassNames: !0,
+          resolveValues: "auto",
           ...opts
         },
         null,
@@ -7589,11 +7613,7 @@ var require_index_native15 = __commonJS({
         return viewProps;
       },
       useEvents(viewProps, events, { pseudos }, setStateShallow, staticConfig) {
-        if (pseudos != null && pseudos.focusStyle && (viewProps.onFocus = (0, import_web.composeEventHandlers)(viewProps.onFocus, () => {
-          setStateShallow({ focus: !0 });
-        }), viewProps.onBlur = (0, import_web.composeEventHandlers)(viewProps.onBlur, () => {
-          setStateShallow({ focus: !1 });
-        })), staticConfig.isInput) {
+        if (events != null && events.onFocus && (viewProps.onFocus = events.onFocus), events != null && events.onBlur && (viewProps.onBlur = events.onBlur), staticConfig.isInput) {
           if (events) {
             let { onPressIn, onPressOut, onPress } = events, inputEvents = {
               onPressIn,
@@ -11834,7 +11854,7 @@ var require_Button_native = __commonJS({
       Text: ButtonText,
       Icon: ButtonIcon
     }), ButtonNestingContext = (0, import_react2.createContext)(!1);
-    function useButton(propsIn, { Text: Text3 = Button2.Text } = { Text: Button2.Text }) {
+    function useButton({ textProps, ...propsIn }, { Text: Text3 = Button2.Text } = { Text: Button2.Text }) {
       let isNested = (0, import_react2.useContext)(ButtonNestingContext), didFinishSSR = (0, import_web.useDidFinishSSR)(), propsActive = (0, import_web.useProps)(propsIn), {
         icon,
         iconAfter,
@@ -11851,7 +11871,7 @@ var require_Button_native = __commonJS({
         color: propsActive.color
       }), [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon), spaceSize = space ?? (0, import_web.getVariableValue)(iconSize) * scaleSpace, contents = noTextWrap ? [propsIn.children] : (0, import_text2.wrapChildrenInText)(
         Text3,
-        { children: propsIn.children, fontFamily, fontSize },
+        { children: propsIn.children, fontFamily, fontSize, textProps },
         Text3 === ButtonText && propsActive.unstyled !== !0 ? {
           unstyled: !1,
           size: size2
@@ -13423,52 +13443,51 @@ var require_ListItem_native = __commonJS({
       ListItemSubtitle: () => ListItemSubtitle,
       ListItemText: () => ListItemText,
       ListItemTitle: () => ListItemTitle,
-      listItemStaticConfig: () => listItemStaticConfig,
-      listItemVariants: () => listItemVariants,
       useListItem: () => useListItem
     });
     module2.exports = __toCommonJS2(ListItem_exports);
-    var import_font_size = require_index_native40(), import_get_font_sized2 = require_index_native20(), import_get_token2 = require_index_native17(), import_helpers_tamagui = require_index_native41(), import_stacks3 = require_index_native19(), import_text2 = require_index_native21(), import_web = require_index_native9(), import_jsx_runtime6 = require("react/jsx-runtime"), NAME = "ListItem", listItemVariants = {
-      unstyled: {
-        false: {
-          size: "$true",
-          alignItems: "center",
-          flexWrap: "nowrap",
-          width: "100%",
-          borderColor: "$borderColor",
-          maxWidth: "100%",
-          overflow: "hidden",
-          flexDirection: "row",
-          backgroundColor: "$background"
-        }
-      },
-      size: {
-        "...size": (val, { tokens }) => ({
-          minHeight: tokens.size[val],
-          paddingHorizontal: tokens.space[val],
-          paddingVertical: (0, import_get_token2.getSpace)(tokens.space[val], {
-            shift: -4
-          })
-        })
-      },
-      active: {
-        true: {
-          hoverStyle: {
+    var import_font_size = require_index_native40(), import_get_font_sized2 = require_index_native20(), import_get_token2 = require_index_native17(), import_helpers_tamagui = require_index_native41(), import_stacks3 = require_index_native19(), import_text2 = require_index_native21(), import_web = require_index_native9(), import_jsx_runtime6 = require("react/jsx-runtime"), NAME = "ListItem", ListItemFrame = (0, import_web.styled)(import_stacks3.ThemeableStack, {
+      name: NAME,
+      tag: "li",
+      variants: {
+        unstyled: {
+          false: {
+            size: "$true",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexWrap: "nowrap",
+            width: "100%",
+            borderColor: "$borderColor",
+            maxWidth: "100%",
+            overflow: "hidden",
+            flexDirection: "row",
             backgroundColor: "$background"
           }
+        },
+        size: {
+          "...size": (val, { tokens }) => ({
+            minHeight: tokens.size[val],
+            paddingHorizontal: tokens.space[val],
+            paddingVertical: (0, import_get_token2.getSpace)(tokens.space[val], {
+              shift: -4
+            })
+          })
+        },
+        active: {
+          true: {
+            hoverStyle: {
+              backgroundColor: "$background"
+            }
+          }
+        },
+        disabled: {
+          true: {
+            opacity: 0.5,
+            // TODO breaking types
+            pointerEvents: "none"
+          }
         }
       },
-      disabled: {
-        true: {
-          opacity: 0.5,
-          // TODO breaking types
-          pointerEvents: "none"
-        }
-      }
-    }, ListItemFrame = (0, import_web.styled)(import_stacks3.ThemeableStack, {
-      name: NAME,
-      tag: "li",
-      variants: listItemVariants,
       defaultVariants: {
         unstyled: !1
       }
@@ -13577,19 +13596,8 @@ var require_ListItem_native = __commonJS({
       };
     }, ListItemComponent = ListItemFrame.styleable(function(props, ref) {
       let { props: listItemProps } = useListItem(props);
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ListItemFrame, { ref, justifyContent: "space-between", ...listItemProps });
-    }), listItemStaticConfig = {
-      inlineProps: /* @__PURE__ */ new Set([
-        // text props go here (can't really optimize them, but we never fully extract listItem anyway)
-        "color",
-        "fontWeight",
-        "fontSize",
-        "fontFamily",
-        "letterSpacing",
-        "textAlign",
-        "ellipse"
-      ])
-    }, ListItem2 = (0, import_web.withStaticProperties)(ListItemComponent, {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ListItemFrame, { ref, ...listItemProps });
+    }), ListItem2 = (0, import_web.withStaticProperties)(ListItemComponent, {
       Text: ListItemText,
       Subtitle: ListItemSubtitle
     });
@@ -16106,16 +16114,21 @@ var require_SelectItem_native = __commonJS({
       useSelectItemContext: () => useSelectItemContext
     });
     module2.exports = __toCommonJS2(SelectItem_exports);
-    var import_compose_refs = require_index_native5(), import_core13 = require_index_native15(), import_list_item = require_index_native51(), React2 = __toESM2(require("react")), import_context = require_context_native(), import_jsx_runtime6 = require("react/jsx-runtime"), ITEM_NAME = "SelectItem", [SelectItemContextProvider, useSelectItemContext] = (0, import_context.createSelectContext)(ITEM_NAME), SelectItem = React2.forwardRef(
-      (props, forwardedRef) => {
+    var import_compose_refs = require_index_native5(), import_core13 = require_index_native15(), import_list_item = require_index_native51(), React2 = __toESM2(require("react")), import_context = require_context_native(), import_jsx_runtime6 = require("react/jsx-runtime"), ITEM_NAME = "SelectItem", [SelectItemContextProvider, useSelectItemContext] = (0, import_context.createSelectContext)(ITEM_NAME), SelectItem = import_list_item.ListItemFrame.styleable(
+      function(props, forwardedRef) {
         let {
           __scopeSelect,
           value,
           disabled = !1,
           textValue: textValueProp,
           index,
-          ...itemProps
-        } = props, context = (0, import_context.useSelectItemParentContext)(ITEM_NAME, __scopeSelect), {
+          ...restProps
+        } = props, { props: listItemProps } = (0, import_list_item.useListItem)({
+          ...!props.unstyled && {
+            ellipse: !0
+          },
+          ...restProps
+        }), context = (0, import_context.useSelectItemParentContext)(ITEM_NAME, __scopeSelect), {
           setSelectedIndex,
           listRef,
           setOpen,
@@ -16148,7 +16161,7 @@ var require_SelectItem_native = __commonJS({
         function handleSelect() {
           setSelectedIndex(index), onChange(value), setOpen(!1);
         }
-        let selectItemProps = interactions ? interactions.getItemProps({
+        let selectItemProps = React2.useMemo(() => interactions ? interactions.getItemProps({
           onTouchMove() {
             allowSelectRef.current = !0, allowMouseUpRef.current = !1;
           },
@@ -16168,7 +16181,7 @@ var require_SelectItem_native = __commonJS({
           }
         }) : {
           onPress: handleSelect
-        };
+        }, [handleSelect]);
         return (0, import_core13.useIsomorphicLayoutEffect)(() => {
           var _a;
           isActive && ((_a = listRef == null ? void 0 : listRef.current[index]) == null || _a.focus());
@@ -16180,7 +16193,7 @@ var require_SelectItem_native = __commonJS({
             textId: textId || "",
             isSelected,
             children: shouldRenderWebNative ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value, children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_list_item.ListItem,
+              import_list_item.ListItemFrame,
               {
                 tag: "div",
                 componentName: ITEM_NAME,
@@ -16198,18 +16211,79 @@ var require_SelectItem_native = __commonJS({
                   focusTheme: !0,
                   cursor: "default",
                   outlineWidth: 0,
-                  size: size2,
-                  ellipse: !0
+                  size: size2
                 },
-                ...itemProps,
+                ...listItemProps,
                 ...selectItemProps
               }
             )
           }
         );
+      },
+      {
+        disableTheme: !0
       }
     );
-    SelectItem.displayName = ITEM_NAME;
+  }
+});
+
+// ../select/dist/cjs/SelectItemText.native.js
+var require_SelectItemText_native = __commonJS({
+  "../select/dist/cjs/SelectItemText.native.js"(exports, module2) {
+    "use strict";
+    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+      // If the importer is in node compatibility mode or this is not an ESM
+      // file that has been converted to a CommonJS file using a Babel-
+      // compatible transform (i.e. "__esModule" has not been set), then set
+      // "default" to the CommonJS "module.exports" for node compatibility.
+      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: !0 }) : target,
+      mod
+    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), SelectItemText_exports = {};
+    __export2(SelectItemText_exports, {
+      ITEM_TEXT_NAME: () => ITEM_TEXT_NAME,
+      SelectItemText: () => SelectItemText,
+      SelectItemTextFrame: () => SelectItemTextFrame
+    });
+    module2.exports = __toCommonJS2(SelectItemText_exports);
+    var import_compose_refs = require_index_native5(), import_core13 = require_index_native15(), import_text2 = require_index_native21(), React2 = __toESM2(require("react")), import_context = require_context_native(), import_SelectItem = require_SelectItem_native(), import_jsx_runtime6 = require("react/jsx-runtime"), ITEM_TEXT_NAME = "SelectItemText", SelectItemTextFrame = (0, import_core13.styled)(import_text2.SizableText, {
+      name: ITEM_TEXT_NAME,
+      variants: {
+        unstyled: {
+          false: {
+            userSelect: "none",
+            color: "$color",
+            ellipse: !0
+          }
+        }
+      },
+      defaultVariants: {
+        unstyled: !1
+      }
+    }), SelectItemText = SelectItemTextFrame.styleable(function(props, forwardedRef) {
+      let { __scopeSelect, className, ...itemTextProps } = props, context = (0, import_context.useSelectContext)(ITEM_TEXT_NAME, __scopeSelect), itemParentContext = (0, import_context.useSelectItemParentContext)(ITEM_TEXT_NAME, __scopeSelect), ref = React2.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref), itemContext = (0, import_SelectItem.useSelectItemContext)(ITEM_TEXT_NAME, __scopeSelect), contents = React2.useRef();
+      return contents.current = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SelectItemTextFrame,
+        {
+          className,
+          size: itemParentContext.size,
+          id: itemContext.textId,
+          ...itemTextProps,
+          ref: composedRefs
+        }
+      ), React2.useEffect(() => {
+        itemParentContext.initialValue === itemContext.value && !context.selectedIndex && context.setSelectedItem(contents.current);
+      }, []), React2.useEffect(() => itemParentContext.valueSubscribe((val) => {
+        val === itemContext.value && context.setSelectedItem(contents.current);
+      }), [itemContext.value]), itemParentContext.shouldRenderWebNative ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: contents.current });
+    });
   }
 });
 
@@ -16394,11 +16468,10 @@ var require_Select_native = __commonJS({
       Select: () => Select,
       SelectGroupFrame: () => SelectGroupFrame,
       SelectIcon: () => SelectIcon,
-      SelectItemTextFrame: () => SelectItemTextFrame,
       SelectSeparator: () => SelectSeparator
     });
     module2.exports = __toCommonJS2(Select_exports);
-    var import_adapt = require_index_native24(), import_compose_refs = require_index_native5(), import_core13 = require_index_native15(), import_get_token2 = require_index_native17(), import_list_item = require_index_native51(), import_portal2 = require_index_native29(), import_separator = require_index_native58(), import_sheet = require_index_native34(), import_stacks3 = require_index_native19(), import_text2 = require_index_native21(), import_use_controllable_state = require_index_native12(), React2 = __toESM2(require("react")), import_constants = require_constants_native4(), import_context = require_context_native(), import_SelectContent = require_SelectContent_native(), import_SelectImpl = require_SelectImpl_native(), import_SelectItem = require_SelectItem_native(), import_SelectScrollButton = require_SelectScrollButton_native(), import_SelectTrigger = require_SelectTrigger_native(), import_SelectViewport = require_SelectViewport_native(), import_useSelectBreakpointActive = require_useSelectBreakpointActive_native(), import_jsx_runtime6 = require("react/jsx-runtime"), VALUE_NAME = "SelectValue", SelectValueFrame = (0, import_core13.styled)(import_text2.SizableText, {
+    var import_adapt = require_index_native24(), import_compose_refs = require_index_native5(), import_core13 = require_index_native15(), import_get_token2 = require_index_native17(), import_list_item = require_index_native51(), import_portal2 = require_index_native29(), import_separator = require_index_native58(), import_sheet = require_index_native34(), import_stacks3 = require_index_native19(), import_text2 = require_index_native21(), import_use_controllable_state = require_index_native12(), React2 = __toESM2(require("react")), import_constants = require_constants_native4(), import_context = require_context_native(), import_SelectContent = require_SelectContent_native(), import_SelectImpl = require_SelectImpl_native(), import_SelectItem = require_SelectItem_native(), import_SelectItemText = require_SelectItemText_native(), import_SelectScrollButton = require_SelectScrollButton_native(), import_SelectTrigger = require_SelectTrigger_native(), import_SelectViewport = require_SelectViewport_native(), import_useSelectBreakpointActive = require_useSelectBreakpointActive_native(), import_jsx_runtime6 = require("react/jsx-runtime"), VALUE_NAME = "SelectValue", SelectValueFrame = (0, import_core13.styled)(import_text2.SizableText, {
       name: VALUE_NAME,
       userSelect: "none"
     }), SelectValue = SelectValueFrame.styleable(function({
@@ -16426,7 +16499,7 @@ var require_Select_native = __commonJS({
       return React2.Children.map(selectValueChildren, (child) => {
         var _a, _b, _c;
         if (child) {
-          if (((_b = (_a = child.type) == null ? void 0 : _a.staticConfig) == null ? void 0 : _b.componentName) === ITEM_TEXT_NAME)
+          if (((_b = (_a = child.type) == null ? void 0 : _a.staticConfig) == null ? void 0 : _b.componentName) === import_SelectItemText.ITEM_TEXT_NAME)
             return child.props.children;
           if ((_c = child.props) != null && _c.children)
             return unwrapSelectItem(child.props.children);
@@ -16439,46 +16512,8 @@ var require_Select_native = __commonJS({
       // @ts-ignore
       "aria-hidden": !0,
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_text2.Paragraph, { children: "\u25BC" })
-    }), ITEM_TEXT_NAME = "SelectItemText", SelectItemTextFrame = (0, import_core13.styled)(import_text2.SizableText, {
-      name: ITEM_TEXT_NAME,
-      variants: {
-        unstyled: {
-          false: {
-            userSelect: "none",
-            color: "$color",
-            ellipse: !0
-          }
-        }
-      },
-      defaultVariants: {
-        unstyled: !1
-      }
-    }), SelectItemText = React2.forwardRef(
-      (props, forwardedRef) => {
-        let { __scopeSelect, className, ...itemTextProps } = props, context = (0, import_context.useSelectContext)(ITEM_TEXT_NAME, __scopeSelect), itemParentContext = (0, import_context.useSelectItemParentContext)(ITEM_TEXT_NAME, __scopeSelect), ref = React2.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref), itemContext = (0, import_SelectItem.useSelectItemContext)(ITEM_TEXT_NAME, __scopeSelect), contents = React2.useMemo(
-          () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            SelectItemTextFrame,
-            {
-              className,
-              size: itemParentContext.size,
-              id: itemContext.textId,
-              ...itemTextProps,
-              ref: composedRefs
-            }
-          ),
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          [props, itemParentContext.size, className, itemContext.textId]
-        );
-        return React2.useEffect(() => {
-          itemParentContext.initialValue === itemContext.value && !context.selectedIndex && context.setSelectedItem(contents);
-        }, []), React2.useEffect(() => itemParentContext.valueSubscribe((val) => {
-          val === itemContext.value && context.setSelectedItem(contents);
-        }), [itemContext.value]), itemParentContext.shouldRenderWebNative ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: contents });
-      }
-    );
-    SelectItemText.displayName = ITEM_TEXT_NAME;
-    var ITEM_INDICATOR_NAME = "SelectItemIndicator", SelectItemIndicatorFrame = (0, import_core13.styled)(import_stacks3.XStack, {
-      name: ITEM_TEXT_NAME
+    }), ITEM_INDICATOR_NAME = "SelectItemIndicator", SelectItemIndicatorFrame = (0, import_core13.styled)(import_stacks3.XStack, {
+      name: import_SelectItemText.ITEM_TEXT_NAME
     }), SelectItemIndicator = React2.forwardRef(
       (props, forwardedRef) => {
         let { __scopeSelect, ...itemIndicatorProps } = props, context = (0, import_context.useSelectItemParentContext)(ITEM_INDICATOR_NAME, __scopeSelect), itemContext = (0, import_SelectItem.useSelectItemContext)(ITEM_INDICATOR_NAME, __scopeSelect);
@@ -16695,7 +16730,7 @@ var require_Select_native = __commonJS({
         Icon: SelectIcon,
         Item: import_SelectItem.SelectItem,
         ItemIndicator: SelectItemIndicator,
-        ItemText: SelectItemText,
+        ItemText: import_SelectItemText.SelectItemText,
         Label: SelectLabel,
         ScrollDownButton: import_SelectScrollButton.SelectScrollDownButton,
         ScrollUpButton: import_SelectScrollButton.SelectScrollUpButton,