tamagui 1.122.7 → 1.123.0

package/dist/native.js

@@ -1115,7 +1115,7 @@ var require_types_native2 = __commonJS({
 var require_constants_native = __commonJS({
   "../../core/constants/dist/cjs/constants.native.js"(exports2, module2) {
     "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
         get: all[name],
         enumerable: !0
@@ -1143,18 +1143,6 @@ var require_constants_native = __commonJS({
         }
       }
       return to;
-    }, __toESM2 = function(mod, isNodeMode, target) {
-      return 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 = function(mod) {
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
@@ -1196,7 +1184,7 @@ var require_constants_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(constants_native_exports);
-    var import_react3 = __toESM2(require("react")), isWeb6 = !1, isWindowDefined = !1, isServer2 = !1, isClient2 = !1, useIsomorphicLayoutEffect2 = import_react3.default.useLayoutEffect, isChrome2 = !1, isWebTouchable2 = !1, isTouchable2 = !0, isAndroid = !1, isIos = process.env.TEST_NATIVE_PLATFORM === "ios", currentPlatform = "native";
+    var import_react3 = require("react"), isWeb6 = !1, isWindowDefined = !1, isServer2 = !1, isClient2 = !1, useIsomorphicLayoutEffect2 = import_react3.useLayoutEffect, isChrome2 = !1, isWebTouchable2 = !1, isTouchable2 = !0, isAndroid = !1, isIos = process.env.TEST_NATIVE_PLATFORM === "ios", currentPlatform = "native";
   }
 });
 
@@ -1362,9 +1350,6 @@ var require_validStyleProps_native = __commonJS({
       stylePropsAll: function() {
         return stylePropsAll;
       },
-      stylePropsFont: function() {
-        return stylePropsFont;
-      },
       stylePropsText: function() {
         return stylePropsText;
       },
@@ -3948,73 +3933,61 @@ var require_useTheme_native = __commonJS({
       process.env.NODE_ENV === "development" && (state != null && state.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.error(`[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(props)}).
 
 If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`));
-      var themeProxied = (0, import_react3.useMemo)(function() {
-        return keys.current && (keys.current = null), !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, keys, themeManager, props.debug);
-      }, [
-        state == null ? void 0 : state.theme,
-        themeManager,
-        props.deopt,
-        props.debug
-      ]);
+      var themeProxied = getThemeProxied(props, state, keys, themeManager);
       return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed(`  \u{1F539} [${themeManager == null ? void 0 : themeManager.id}] useTheme =>`, state == null ? void 0 : state.name), console.info("returning state", changedThemeState.state, changedThemeState.isNewTheme, "from props", props), console.groupEnd()), [
         changedThemeState,
         themeProxied
       ];
-    };
-    function getThemeProxied(param) {
-      var { theme, name, scheme } = param, deopt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, keys = arguments.length > 2 ? arguments[2] : void 0, themeManager = arguments.length > 3 ? arguments[3] : void 0, debug = arguments.length > 4 ? arguments[4] : void 0;
-      if (!theme) return {};
-      var config = (0, import_config.getConfig)();
+    }, emptyObject = {}, ProxiedThemes = /* @__PURE__ */ new Map(), curKeys, curProps, curThemeManger;
+    function getThemeProxied(_props, state, _keys, _themeManager) {
+      var theme = state == null ? void 0 : state.theme;
+      if (!theme || !_themeManager) return emptyObject;
+      if (curKeys = _keys, curProps = _props, curThemeManger = _themeManager, ProxiedThemes.has(theme)) {
+        var proxied = ProxiedThemes.get(theme);
+        return proxied;
+      }
+      var { name, scheme } = state, config = (0, import_config.getConfig)();
       function track(key) {
-        keys.current || (keys.current = [], setTimeout(function() {
-          themeManager == null || themeManager.selfUpdate();
-        })), keys.current.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`);
-      }
-      return new Proxy(theme, {
-        has(_, key) {
-          if (Reflect.has(theme, key)) return !0;
-          if (typeof key == "string") return key[0] === "$" && (key = key.slice(1)), themeManager == null ? void 0 : themeManager.allKeys.has(key);
-        },
-        get(_, key) {
-          if (
-            // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
-            // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
-            key !== "undefined" && typeof key == "string"
-          ) {
-            var keyString = key[0] === "$" ? key.slice(1) : key, val = theme[keyString];
-            if (val && typeof val == "object") return new Proxy(val, {
-              // when they touch the actual value we only track it
-              // if its a variable (web), its ignored!
-              get(_2, subkey) {
-                if (subkey === "val") globalThis.tamaguiAvoidTracking || (process.env.NODE_ENV === "development" && debug === "verbose" && console.info(" \u{1F3A8} useTheme() tracking new key because of .val access", new Error().stack), track(keyString));
-                else if (subkey === "get") return function(platform2) {
-                  var outVal = (0, import_createVariable.getVariable)(val);
-                  if (platform2 !== "web" && import_constants4.isIos && !deopt && (0, import_config.getSetting)("fastSchemeChange") && !(0, import_shouldDeoptDueToParentScheme.shouldDeoptDueToParentScheme)(themeManager) && scheme) {
-                    var _config_themes_name, _config_themes_oppositeName, oppositeScheme = scheme === "dark" ? "light" : "dark", oppositeName = name.replace(scheme, oppositeScheme), color = (0, import_createVariable.getVariable)((_config_themes_name = config.themes[name]) === null || _config_themes_name === void 0 ? void 0 : _config_themes_name[keyString]), oppositeColor = (0, import_createVariable.getVariable)((_config_themes_oppositeName = config.themes[oppositeName]) === null || _config_themes_oppositeName === void 0 ? void 0 : _config_themes_oppositeName[keyString]), dynamicVal = {
-                      dynamic: {
-                        [scheme]: color,
-                        [oppositeScheme]: oppositeColor
-                      }
-                    };
-                    return dynamicVal;
-                  }
-                  return process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key because of: 
-                        not web: ${platform2 !== "web"}
-                        isIOS: ${import_constants4.isIos}
-                        deopt: ${deopt}
-                        fastScheme: ${(0, import_config.getSetting)("fastSchemeChange")}
-                        inversed: ${getIsInversed(themeManager)}
-                      `), track(keyString), outVal;
-                };
-                return Reflect.get(val, subkey);
-              }
-            });
-            if (process.env.NODE_ENV === "development" && process.env.TAMAGUI_FEAT_THROW_ON_MISSING_THEME_VALUE === "1") throw new Error(`[tamagui] No theme key "${key}" found in theme ${name}. 
-  Keys in theme: ${Object.keys(theme).join(", ")}`);
+        curKeys && (curKeys.current || (curKeys.current = []), curKeys.current.push(key), process.env.NODE_ENV === "development" && curProps.debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+      }
+      var proxied1 = Object.fromEntries(Object.entries(theme).flatMap(function(param) {
+        var [key, value] = param, proxied2 = {
+          ...value,
+          get val() {
+            return globalThis.tamaguiAvoidTracking || track(key), value.val;
+          },
+          get(platform2) {
+            var outVal = (0, import_createVariable.getVariable)(value);
+            if (platform2 !== "web" && import_constants4.isIos && !curProps.deopt && (0, import_config.getSetting)("fastSchemeChange") && !(0, import_shouldDeoptDueToParentScheme.shouldDeoptDueToParentScheme)(curThemeManger) && scheme) {
+              var _config_themes_name, _config_themes_oppositeName, oppositeScheme = scheme === "dark" ? "light" : "dark", oppositeName = name.replace(scheme, oppositeScheme), color = (0, import_createVariable.getVariable)((_config_themes_name = config.themes[name]) === null || _config_themes_name === void 0 ? void 0 : _config_themes_name[key]), oppositeColor = (0, import_createVariable.getVariable)((_config_themes_oppositeName = config.themes[oppositeName]) === null || _config_themes_oppositeName === void 0 ? void 0 : _config_themes_oppositeName[key]), dynamicVal = {
+                dynamic: {
+                  [scheme]: color,
+                  [oppositeScheme]: oppositeColor
+                }
+              };
+              return dynamicVal;
+            }
+            return process.env.NODE_ENV === "development" && curProps.debug && console.info(` \u{1F3A8} useTheme() tracking new key because of: 
+                not web: ${platform2 !== "web"}
+                isIOS: ${import_constants4.isIos}
+                deopt: ${curProps.deopt}
+                fastScheme: ${(0, import_config.getSetting)("fastSchemeChange")}
+                inversed: ${getIsInversed(curThemeManger)}
+              `), track(key), outVal;
           }
-          return Reflect.get(_, key);
-        }
-      });
+        };
+        return [
+          [
+            key,
+            proxied2
+          ],
+          [
+            `$${key}`,
+            proxied2
+          ]
+        ];
+      }));
+      return ProxiedThemes.set(theme, proxied1), proxied1;
     }
     function getIsInversed(manager) {
       for (var isInversed = !1, cur = manager; cur; ) {
@@ -9547,7 +9520,7 @@ var require_proxyThemeToParents_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(proxyThemeToParents_exports);
-    var import_config = require_config_native(), themesRaw = {};
+    var themesRaw = {};
     function proxyThemesToParents(dedupedThemes) {
       var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
       try {
@@ -9608,21 +9581,24 @@ var require_proxyThemeToParents_native = __commonJS({
       return themes;
     }
     function proxyThemeToParents(themeName, theme) {
-      var cur = [], parents = themeName.split("_").slice(0, -1).map(function(part) {
+      var out = {}, cur = [], parents = themeName.split("_").slice(0, -1).map(function(part) {
         return cur.push(part), cur.join("_");
-      }), numParents = parents.length;
-      return new Proxy(theme, {
-        get(target, key) {
-          if (!key || // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
-          // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
-          key == "undefined" || Reflect.has(target, key)) return Reflect.get(target, key);
-          for (var i = numParents - 1; i >= 0; i--) {
-            var parent = themesRaw[parents[i]];
-            if (parent && Reflect.has(parent, key)) return Reflect.get(parent, key);
-          }
-          return (0, import_config.getTokenObject)(key);
+      }), _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      try {
+        for (var _iterator = parents[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+          var parent = _step.value;
+          Object.assign(out, themesRaw[parent]);
         }
-      });
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError) throw _iteratorError;
+        }
+      }
+      return Object.assign(out, theme), out;
     }
   }
 });
@@ -11302,22 +11278,23 @@ var require_ThemeProvider_native = __commonJS({
     });
     module2.exports = __toCommonJS2(ThemeProvider_exports);
     var import_jsx_runtime6 = require("react/jsx-runtime"), import_react3 = __toESM2(require("react")), import_constants4 = require_index_native6(), import_constants22 = require_constants_native2(), import_Theme = require_Theme_native(), import_config = require_config_native(), ThemeProvider = function(props) {
+      var _props_disableRootThemeClass, disableRootThemeClass = (_props_disableRootThemeClass = props.disableRootThemeClass) !== null && _props_disableRootThemeClass !== void 0 ? _props_disableRootThemeClass : (0, import_config.getSetting)("disableRootThemeClass"), _props_themeClassNameOnRoot, themeClassNameOnRoot = (_props_themeClassNameOnRoot = props.themeClassNameOnRoot) !== null && _props_themeClassNameOnRoot !== void 0 ? _props_themeClassNameOnRoot : (0, import_config.getSetting)("themeClassNameOnRoot");
       return import_constants4.isClient && import_react3.default.useLayoutEffect(function() {
-        if (!props.disableRootThemeClass) {
-          var cn = `${import_constants22.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;
+        if (!disableRootThemeClass) {
+          var cn = `${import_constants22.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = themeClassNameOnRoot ? document.documentElement : document.body;
           return target.classList.add(cn), function() {
             target.classList.remove(cn);
           };
         }
       }, [
         props.defaultTheme,
-        props.disableRootThemeClass,
-        props.themeClassNameOnRoot
+        disableRootThemeClass,
+        themeClassNameOnRoot
       ]), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Theme.Theme, {
         className: props.className,
         name: props.defaultTheme,
         // if root class disabled, force class here
-        forceClassName: !props.disableRootThemeClass,
+        forceClassName: !disableRootThemeClass && !themeClassNameOnRoot,
         // @ts-expect-error
         _isRoot: !0,
         children: props.children
@@ -13961,6 +13938,81 @@ var require_Pressability_native = __commonJS({
   }
 });
 
+// ../../core/core/dist/cjs/addNativeValidStyles.native.js
+var require_addNativeValidStyles_native = __commonJS({
+  "../../core/core/dist/cjs/addNativeValidStyles.native.js"(exports2, module2) {
+    "use strict";
+    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
+          });
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
+        }
+      }
+      return to;
+    }, __toESM2 = function(mod, isNodeMode, target) {
+      return 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 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, addNativeValidStyles_native_exports = {};
+    __export2(addNativeValidStyles_native_exports, {
+      addNativeValidStyles: function() {
+        return addNativeValidStyles;
+      }
+    });
+    module2.exports = __toCommonJS2(addNativeValidStyles_native_exports);
+    var import_helpers = require_index_native7(), import_ReactNativeVersion = __toESM2(require("react-native/Libraries/Core/ReactNativeVersion"));
+    function addNativeValidStyles() {
+      if (import_ReactNativeVersion.default) {
+        var { version: { major, minor } } = import_ReactNativeVersion.default;
+        if (major === 0 && minor >= 77) {
+          var additional = {
+            boxSizing: !0,
+            mixBlendMode: !0,
+            outlineWidth: !0,
+            outlineStyle: !0,
+            outlineSpread: !0,
+            outlineColor: !0
+          };
+          Object.assign(import_helpers.validStyles, additional), Object.assign(import_helpers.stylePropsAll, additional);
+        }
+      }
+    }
+  }
+});
+
 // ../../core/core/dist/cjs/reactNativeTypes.native.js
 var require_reactNativeTypes_native = __commonJS({
   "../../core/core/dist/cjs/reactNativeTypes.native.js"(exports2, module2) {
@@ -14063,9 +14115,10 @@ var require_index_native18 = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(index_exports2);
-    var import_react_native_media_driver = require_index_native16(), import_react_native_use_responder_events = require_index_native17(), import_web = require_index_native14(), import_react3 = __toESM2(require("react")), import_createOptimizedView = require_createOptimizedView_native(), import_getBaseViews = require_getBaseViews_native(), import_getRect = require_getRect_native(), import_useElementLayout = require_useElementLayout_native(), import_Pressability = require_Pressability_native();
+    var import_react_native_media_driver = require_index_native16(), import_react_native_use_responder_events = require_index_native17(), import_web = require_index_native14(), import_react3 = __toESM2(require("react")), import_createOptimizedView = require_createOptimizedView_native(), import_getBaseViews = require_getBaseViews_native(), import_getRect = require_getRect_native(), import_useElementLayout = require_useElementLayout_native(), import_Pressability = require_Pressability_native(), import_addNativeValidStyles = require_addNativeValidStyles_native();
     __reExport2(index_exports2, require_index_native14(), module2.exports);
     __reExport2(index_exports2, require_reactNativeTypes_native(), module2.exports);
+    (0, import_addNativeValidStyles.addNativeValidStyles)();
     var createTamagui2 = function(conf) {
       return conf.media && (conf.media = (0, import_react_native_media_driver.createMedia)(conf.media)), (0, import_web.createTamagui)(conf);
     }, baseViews = (0, import_getBaseViews.getBaseViews)();
@@ -16771,8 +16824,8 @@ var require_Adapt_native = __commonJS({
         enabled
       ]), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
         return function() {
-          var _context_setWhen;
-          context == null || (_context_setWhen = context.setWhen) === null || _context_setWhen === void 0 || _context_setWhen.call(context, null);
+          var _context_setWhen, _context_setPlatform;
+          context == null || (_context_setWhen = context.setWhen) === null || _context_setWhen === void 0 || _context_setWhen.call(context, null), context == null || (_context_setPlatform = context.setPlatform) === null || _context_setPlatform === void 0 || _context_setPlatform.call(context, null);
         };
       }, []);
       var output;
@@ -25074,6 +25127,7 @@ var require_Popper_native = __commonJS({
         placement,
         sameScrollView: !1,
         // this only takes effect on native
+        whileElementsMounted: import_floating.autoUpdate,
         platform: disableRTL ?? setupOptions.disableRTL ? {
           ...import_floating.platform,
           isRTL(element) {
@@ -25089,12 +25143,7 @@ var require_Popper_native = __commonJS({
           typeof offsetOptions < "u" ? (0, import_floating.offset)(offsetOptions) : null,
           checkFloating
         ].filter(Boolean)
-      }), {
-        refs,
-        middlewareData,
-        // @ts-expect-error this comes from Tooltip for example
-        open
-      } = floating, dimensions = (0, import_react_native4.useWindowDimensions)(), [keyboardOpen, setKeyboardOpen] = React4.useState(!1);
+      }), { middlewareData } = floating, dimensions = (0, import_react_native4.useWindowDimensions)(), [keyboardOpen, setKeyboardOpen] = React4.useState(!1);
       React4.useEffect(function() {
         var showSubscription = import_react_native4.Keyboard.addListener("keyboardDidShow", function() {
           (0, import_start_transition.startTransition)(function() {
@@ -25206,6 +25255,9 @@ var require_Popper_native = __commonJS({
       };
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core12.Stack, {
         ...getFloatingProps ? getFloatingProps(frameProps) : frameProps,
+        ...x === 0 && y === 0 ? {
+          opacity: 0
+        } : {},
         children: contents
       });
     }), PopperArrowFrame = (0, import_core12.styled)(import_stacks3.YStack, {
@@ -30590,12 +30642,18 @@ var require_Toggle_native = __commonJS({
       },
       ToggleFrame: function() {
         return ToggleFrame;
+      },
+      context: function() {
+        return context;
       }
     });
     module2.exports = __toCommonJS2(Toggle_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_helpers = require_index_native7(), import_stacks3 = require_index_native22(), import_use_controllable_state = require_index_native10(), import_web = require_index_native14(), React4 = __toESM2(require("react")), NAME = "Toggle", ToggleFrame = (0, import_web.styled)(import_stacks3.ThemeableStack, {
+    var import_jsx_runtime6 = require("react/jsx-runtime"), import_helpers = require_index_native7(), import_stacks3 = require_index_native22(), import_use_controllable_state = require_index_native10(), import_web = require_index_native14(), React4 = __toESM2(require("react")), context = (0, import_web.createStyledContext)({
+      color: ""
+    }), NAME = "Toggle", ToggleFrame = (0, import_web.styled)(import_stacks3.ThemeableStack, {
       name: NAME,
       tag: "button",
+      context,
       variants: {
         unstyled: {
           false: {
@@ -30623,6 +30681,11 @@ var require_Toggle_native = __commonJS({
             }
           }
         },
+        color: {
+          "...color": function() {
+            return {};
+          }
+        },
         active: {
           true: {
             zIndex: 1,
@@ -30730,7 +30793,7 @@ var require_ToggleGroup_native = __commonJS({
     });
     module2.exports = __toCommonJS2(ToggleGroup_exports);
     var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), import_focusable2 = require_index_native45(), import_font_size = require_index_native41(), import_get_token2 = require_index_native20(), import_group = require_index_native51(), import_helpers = require_index_native7(), import_helpers_tamagui = require_index_native42(), import_roving_focus = require_index_native60(), import_use_controllable_state = require_index_native10(), import_use_direction = require_index_native25(), import_web = require_index_native14(), import_react3 = __toESM2(require("react")), import_Toggle = require_Toggle_native(), TOGGLE_GROUP_NAME = "ToggleGroup", TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem", TOGGLE_GROUP_CONTEXT = "ToggleGroup", { Provider: ToggleGroupItemProvider, useStyledContext: useToggleGroupItemContext } = (0, import_web.createStyledContext)(), { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } = (0, import_web.createStyledContext)(), ToggleGroupItem = import_Toggle.ToggleFrame.extractable(/* @__PURE__ */ import_react3.default.forwardRef(function(props, forwardedRef) {
-      var { disablePassStyles, ...rest } = props, valueContext = useToggleGroupValueContext(props.__scopeToggleGroup), context = useToggleGroupContext(props.__scopeToggleGroup), pressed = valueContext == null ? void 0 : valueContext.value.includes(props.value), disabled = context.disabled || props.disabled || !1, groupItemProps = (0, import_group.useGroupItem)({
+      var [_, { color }] = (0, import_web.usePropsAndStyle)(props), { disablePassStyles, ...rest } = props, valueContext = useToggleGroupValueContext(props.__scopeToggleGroup), context = useToggleGroupContext(props.__scopeToggleGroup), pressed = valueContext == null ? void 0 : valueContext.value.includes(props.value), disabled = context.disabled || props.disabled || !1, groupItemProps = (0, import_group.useGroupItem)({
         disabled
       }), _props_size, size4 = (_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : context.size, sizeProps = props.unstyled ? {} : {
         width: void 0,
@@ -30738,7 +30801,7 @@ var require_ToggleGroup_native = __commonJS({
         padding: (0, import_web.getVariableValue)(size4) * 0.6
       }, iconSize = (typeof size4 == "number" ? size4 * 0.7 : (0, import_font_size.getFontSize)(size4)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
         size: iconSize,
-        color: theme.color
+        color: color ?? theme.color
       }), childrens = import_react3.default.Children.toArray(props.children), children = childrens.map(function(child) {
         return props.disablePassStyles || !/* @__PURE__ */ import_react3.default.isValidElement(child) ? child : getThemedIcon(child);
       }), commonProps = {
@@ -30750,7 +30813,8 @@ var require_ToggleGroup_native = __commonJS({
       }, inner = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleGroupItemImpl, {
         ...commonProps,
         ref: forwardedRef,
-        focusable: !disabled,
+        // focusable={!disabled}
+        tabIndex: disabled ? -1 : 0,
         disabled,
         ...groupItemProps
       });