tamagui 1.74.21 → 1.75.1

package/dist/test.native.js

@@ -3258,7 +3258,7 @@ var require_ThemeManager_native = __commonJS({
       }
       updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
         if (this.props = props, props.forceTheme)
-          return this.state.theme = props.forceTheme, this.state.name = props.name || "", !0;
+          return this.state.theme = props.forceTheme, this.state.name = props.name || "", this.updateState(this.state, !0), this.state;
         let nextState = this.getStateIfChanged(props);
         if (nextState)
           return this.updateState(nextState, shouldNotify), nextState;
@@ -3309,7 +3309,7 @@ var require_ThemeManager_native = __commonJS({
       if (!baseManager && props.reset)
         return console.warn("Cannot reset, no parent theme exists"), null;
       let { componentName } = props, result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "";
-      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][a-z]+/, ""));
+      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][A-Za-z]+/, ""));
       let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
       isDirectParentAComponentTheme && allComponentThemes.shift();
       let base = baseName.split(import_constants2.THEME_NAME_SEPARATOR), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
@@ -3429,7 +3429,7 @@ var require_useTheme_native = __commonJS({
         }
       ), { themeManager, state } = changedThemeState;
       state != null && state.theme;
-      let themeProxied = (0, import_react2.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state, themeManager, props.deopt, props.debug]);
+      let themeProxied = (0, import_react2.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state == null ? void 0 : state.theme, themeManager, props.deopt, props.debug]);
       return [changedThemeState, themeProxied];
     };
     function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
@@ -3531,9 +3531,12 @@ var require_useTheme_native = __commonJS({
         isNewTheme && themeManager && activeThemeManagers.add(themeManager), (isNewTheme || getShouldUpdateTheme(themeManager)) && setThemeState(createState);
         let selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
           forced && setThemeState((prev) => createState(prev, !0));
-        }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme((name, manager) => {
-          (((shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"]) ?? !!(keys != null && keys.length || isNewTheme)) && setThemeState(createState);
-        }, themeManager.id);
+        }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(
+          (name, manager, forced) => {
+            ((forced || (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"]) ?? !!(keys != null && keys.length || isNewTheme)) && setThemeState(createState);
+          },
+          themeManager.id
+        );
         return () => {
           selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), activeThemeManagers.delete(themeManager);
         };
@@ -3564,14 +3567,14 @@ var require_useTheme_native = __commonJS({
         themeManager
       };
       function createState(prev, force = !1) {
-        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1)
+        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1 && !force)
           return prev;
         let themeManager2 = parentManager, state2;
         if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
           let getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
           if (prev != null && prev.themeManager) {
             themeManager2 = prev.themeManager;
-            let forceChange = !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
+            let forceChange = force || !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
               themeManager2,
               next,
               prev.state,
@@ -3882,7 +3885,7 @@ var require_createComponent_native = __commonJS({
         validStyles: validStyles2 = {},
         variants = {}
       } = staticConfig, defaultComponentClassName = `is_${staticConfig.componentName}`, defaultProps = staticConfig.defaultProps, component = (0, import_react2.forwardRef)((propsIn, forwardedRef) => {
-        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m, _n, _o;
+        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m;
         if (!hasSetupBaseViews) {
           hasSetupBaseViews = !0;
           let baseViews = (_b = (_a2 = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a2);
@@ -3945,14 +3948,9 @@ var require_createComponent_native = __commonJS({
           componentName,
           disable: disableTheme,
           shallow: stateRef.current.themeShallow,
-          // if this returns undefined it defers to the keys tracking, so its only used to force either updates or no updates
-          shouldUpdate: () => (
-            // when we use $theme- styles we need to force it to re-render on theme changes (this can be optimized likely)
-            stateRef.current.isListeningToTheme
-          ),
           debug: debugProp
         };
-        themeStateProps.deopt = willBeAnimated;
+        typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
         let isExiting = !state.unmounted && (presence == null ? void 0 : presence[0]) === !1, [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
         elementType = Component || elementType;
         let isStringElement = typeof elementType == "string", mediaState3 = (0, import_useMedia.useMedia)(stateRef, componentContext);
@@ -4157,7 +4155,15 @@ var require_createComponent_native = __commonJS({
           isZStack,
           debug: debugProp
         });
-        asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, { onPress, onLongPress })), content = (0, import_react2.createElement)(elementType, viewProps, content), import_setupHooks.hooks.useChildren && (content = (_m = (_l = import_setupHooks.hooks).useChildren) == null ? void 0 : _m.call(_l, content, viewProps, events, staticConfig));
+        asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, { onPress, onLongPress }));
+        let useChildrenResult;
+        import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(
+          elementType,
+          content,
+          viewProps,
+          events,
+          staticConfig
+        )), useChildrenResult ? content = useChildrenResult : content = (0, import_react2.createElement)(elementType, viewProps, content);
         let subGroupContext = (0, import_react2.useMemo)(() => {
           if (groupName)
             return {
@@ -6920,6 +6926,226 @@ var require_index_native14 = __commonJS({
   }
 });
 
+// ../core/dist/cjs/createOptimizedView.native.js
+var require_createOptimizedView_native = __commonJS({
+  "../core/dist/cjs/createOptimizedView.native.js"(exports, module2) {
+    "use strict";
+    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) => {
+      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;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createOptimizedView_native_exports = {};
+    __export2(createOptimizedView_native_exports, {
+      createOptimizedView: () => createOptimizedView,
+      getAccessibilityRoleFromRole: () => getAccessibilityRoleFromRole
+    });
+    module2.exports = __toCommonJS2(createOptimizedView_native_exports);
+    var import_react2 = require("react");
+    function createOptimizedView(children, viewProps, baseViews) {
+      let TextAncestor = baseViews.TextAncestor, ViewNativeComponent = baseViews.View, {
+        accessibilityElementsHidden,
+        accessibilityLabel,
+        accessibilityLabelledBy,
+        accessibilityLiveRegion,
+        accessibilityRole,
+        accessibilityState,
+        accessibilityValue,
+        "aria-busy": ariaBusy,
+        "aria-checked": ariaChecked,
+        "aria-disabled": ariaDisabled,
+        "aria-expanded": ariaExpanded,
+        "aria-hidden": ariaHidden,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-live": ariaLive,
+        "aria-selected": ariaSelected,
+        "aria-valuemax": ariaValueMax,
+        "aria-valuemin": ariaValueMin,
+        "aria-valuenow": ariaValueNow,
+        "aria-valuetext": ariaValueText,
+        focusable,
+        id,
+        importantForAccessibility,
+        nativeID,
+        pointerEvents,
+        role,
+        tabIndex
+        // ...otherProps
+      } = viewProps, _accessibilityLabelledBy = (ariaLabelledBy == null ? void 0 : ariaLabelledBy.split(/\s*,\s*/g)) ?? accessibilityLabelledBy, _accessibilityState;
+      (accessibilityState != null || ariaBusy != null || ariaChecked != null || ariaDisabled != null || ariaExpanded != null || ariaSelected != null) && (_accessibilityState = {
+        busy: ariaBusy ?? (accessibilityState == null ? void 0 : accessibilityState.busy),
+        checked: ariaChecked ?? (accessibilityState == null ? void 0 : accessibilityState.checked),
+        disabled: ariaDisabled ?? (accessibilityState == null ? void 0 : accessibilityState.disabled),
+        expanded: ariaExpanded ?? (accessibilityState == null ? void 0 : accessibilityState.expanded),
+        selected: ariaSelected ?? (accessibilityState == null ? void 0 : accessibilityState.selected)
+      });
+      let _accessibilityValue;
+      (accessibilityValue != null || ariaValueMax != null || ariaValueMin != null || ariaValueNow != null || ariaValueText != null) && (_accessibilityValue = {
+        max: ariaValueMax ?? (accessibilityValue == null ? void 0 : accessibilityValue.max),
+        min: ariaValueMin ?? (accessibilityValue == null ? void 0 : accessibilityValue.min),
+        now: ariaValueNow ?? (accessibilityValue == null ? void 0 : accessibilityValue.now),
+        text: ariaValueText ?? (accessibilityValue == null ? void 0 : accessibilityValue.text)
+      });
+      let style = Array.isArray(viewProps.style) ? baseViews.StyleSheet.flatten(viewProps.style) : viewProps.style, newPointerEvents = (style == null ? void 0 : style.pointerEvents) || pointerEvents, finalProps = viewProps, extras = {
+        accessibilityLiveRegion: ariaLive === "off" ? "none" : ariaLive ?? accessibilityLiveRegion,
+        accessibilityLabel: ariaLabel ?? accessibilityLabel,
+        focusable: tabIndex !== void 0 ? !tabIndex : focusable,
+        accessibilityState: _accessibilityState,
+        accessibilityRole: role ? getAccessibilityRoleFromRole(role) : accessibilityRole,
+        accessibilityElementsHidden: ariaHidden ?? accessibilityElementsHidden,
+        accessibilityLabelledBy: _accessibilityLabelledBy,
+        accessibilityValue: _accessibilityValue,
+        importantForAccessibility: ariaHidden === !0 ? "no-hide-descendants" : importantForAccessibility,
+        nativeID: id ?? nativeID,
+        style,
+        pointerEvents: newPointerEvents
+      };
+      for (let key in extras)
+        extras[key] != null && (finalProps[key] = extras[key]);
+      let isInText = (0, import_react2.useContext)(TextAncestor), finalElement = (0, import_react2.createElement)(ViewNativeComponent, finalProps, children);
+      return isInText ? (0, import_react2.createElement)(TextAncestor.Provider, { value: !1 }, finalElement) : finalElement;
+    }
+    function getAccessibilityRoleFromRole(role) {
+      switch (role) {
+        case "alert":
+          return "alert";
+        case "alertdialog":
+          return;
+        case "application":
+          return;
+        case "article":
+          return;
+        case "banner":
+          return;
+        case "button":
+          return "button";
+        case "cell":
+          return;
+        case "checkbox":
+          return "checkbox";
+        case "columnheader":
+          return;
+        case "combobox":
+          return "combobox";
+        case "complementary":
+          return;
+        case "contentinfo":
+          return;
+        case "definition":
+          return;
+        case "dialog":
+          return;
+        case "directory":
+          return;
+        case "document":
+          return;
+        case "feed":
+          return;
+        case "figure":
+          return;
+        case "form":
+          return;
+        case "grid":
+          return "grid";
+        case "group":
+          return;
+        case "heading":
+          return "header";
+        case "img":
+          return "image";
+        case "link":
+          return "link";
+        case "list":
+          return "list";
+        case "listitem":
+          return;
+        case "log":
+          return;
+        case "main":
+          return;
+        case "marquee":
+          return;
+        case "math":
+          return;
+        case "menu":
+          return "menu";
+        case "menubar":
+          return "menubar";
+        case "menuitem":
+          return "menuitem";
+        case "meter":
+          return;
+        case "navigation":
+          return;
+        case "none":
+          return "none";
+        case "note":
+          return;
+        case "option":
+          return;
+        case "presentation":
+          return "none";
+        case "progressbar":
+          return "progressbar";
+        case "radio":
+          return "radio";
+        case "radiogroup":
+          return "radiogroup";
+        case "region":
+          return;
+        case "row":
+          return;
+        case "rowgroup":
+          return;
+        case "rowheader":
+          return;
+        case "scrollbar":
+          return "scrollbar";
+        case "searchbox":
+          return "search";
+        case "separator":
+          return;
+        case "slider":
+          return "adjustable";
+        case "spinbutton":
+          return "spinbutton";
+        case "status":
+          return;
+        case "summary":
+          return "summary";
+        case "switch":
+          return "switch";
+        case "tab":
+          return "tab";
+        case "table":
+          return;
+        case "tablist":
+          return "tablist";
+        case "tabpanel":
+          return;
+        case "term":
+          return;
+        case "timer":
+          return "timer";
+        case "toolbar":
+          return "toolbar";
+        case "tooltip":
+          return;
+        case "tree":
+          return;
+        case "treegrid":
+          return;
+        case "treeitem":
+          return;
+      }
+    }
+  }
+});
+
 // ../core/dist/cjs/getBaseViews.native.js
 var require_getBaseViews_native = __commonJS({
   "../core/dist/cjs/getBaseViews.native.js"(exports, module2) {
@@ -6938,10 +7164,12 @@ var require_getBaseViews_native = __commonJS({
     });
     module2.exports = __toCommonJS2(getBaseViews_native_exports);
     function getBaseViews() {
-      let native = require("react-native");
-      return {
-        View: native.View || native.default.View,
+      let native = require("react-native"), View2, TextAncestor;
+      return View2 || (View2 = native.View || native.default.View), {
+        View: View2,
         Text: native.Text || native.default.Text,
+        StyleSheet: native.StyleSheet || native.default.StyleSheet,
+        TextAncestor,
         Pressable: native.Pressable || native.default.Pressable
       };
     }
@@ -7192,10 +7420,10 @@ var require_index_native15 = __commonJS({
       Text: () => Text3
     });
     module2.exports = __toCommonJS2(src_exports2);
-    var import_react_native_use_responder_events = require_index_native14(), import_web = require_index_native9(), import_getBaseViews = require_getBaseViews_native(), import_useElementLayout = require_useElementLayout_native(), import_usePlatformMethods = require_usePlatformMethods_native(), import_Pressability = require_Pressability_native();
+    var import_react_native_use_responder_events = require_index_native14(), import_web = require_index_native9(), import_react2 = require("react"), import_createOptimizedView = require_createOptimizedView_native(), import_getBaseViews = require_getBaseViews_native(), import_useElementLayout = require_useElementLayout_native(), import_usePlatformMethods = require_usePlatformMethods_native(), import_Pressability = require_Pressability_native();
     __reExport2(src_exports2, require_index_native9(), module2.exports);
     __reExport2(src_exports2, require_reactNativeTypes_native(), module2.exports);
-    var Stack3 = import_web.Stack, Text3 = import_web.Text;
+    var Stack3 = import_web.Stack, Text3 = import_web.Text, baseViews = (0, import_getBaseViews.getBaseViews)();
     (0, import_web.setupHooks)({
       getBaseViews: import_getBaseViews.getBaseViews,
       usePropsTransform(elementType, propsIn, hostRef) {
@@ -7268,22 +7496,9 @@ var require_index_native15 = __commonJS({
               viewProps[key] = og && !dontComposePressabilityKeys[key] ? (0, import_web.composeEventHandlers)(og, val) : val;
             }
         }
+      },
+      useChildren(elementType, children, viewProps, events, staticConfig) {
       }
-      // attempt at properly fixing RN input, but <Pressable><TextInput /> just doesnt work on RN
-      // useChildren(children, viewProps, events, staticConfig) {
-      //   if (process.env.TAMAGUI_TARGET === 'native') {
-      //     if (staticConfig.isInput && !staticConfig.isHOC) {
-      //       const Pressable = getBaseViews().Pressable
-      //       console.log(
-      //         'wrapping in pressable',
-      //         events?.['onPressIn']?.toString(),
-      //         viewProps['onPressIn']
-      //       )
-      //       // we need to wrap it in a view?
-      //       return <Pressable {...events}>{children}</Pressable>
-      //     }
-      //   }
-      // },
     });
     var dontComposePressabilityKeys = {
       onClick: !0
@@ -17827,8 +18042,8 @@ var require_Toggle_native = __commonJS({
               backgroundColor: "$background"
             },
             focusStyle: {
-              borderColor: "$borderColorPress",
-              backgroundColor: "$backgroundPress"
+              borderColor: "$borderColor",
+              backgroundColor: "$background"
             }
           }
         },
@@ -17846,37 +18061,36 @@ var require_Toggle_native = __commonJS({
       defaultVariants: {
         unstyled: !1
       }
-    }), Toggle = ToggleFrame.extractable(
-      React2.forwardRef((props, forwardedRef) => {
-        let {
-          pressed: pressedProp,
-          defaultPressed = !1,
-          onPressedChange,
-          ...buttonProps
-        } = props, [pressed = !1, setPressed] = (0, import_use_controllable_state.useControllableState)({
-          prop: pressedProp,
-          onChange: onPressedChange,
-          defaultProp: defaultPressed
-        });
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          ToggleFrame,
-          {
+    }), Toggle = React2.forwardRef(function(props, forwardedRef) {
+      let {
+        pressed: pressedProp,
+        defaultPressed = !1,
+        onPressedChange,
+        ...buttonProps
+      } = props, [pressed = !1, setPressed] = (0, import_use_controllable_state.useControllableState)({
+        prop: pressedProp,
+        onChange: onPressedChange,
+        defaultProp: defaultPressed
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ToggleFrame,
+        {
+          ...!props.unstyled && {
             theme: pressed ? "active" : null,
-            themeShallow: !0,
-            active: props.unstyled ? void 0 : pressed,
-            "aria-pressed": pressed,
-            "data-state": pressed ? "on" : "off",
-            "data-disabled": props.disabled ? "" : void 0,
-            ...buttonProps,
-            ref: forwardedRef,
-            onPress: (0, import_web.composeEventHandlers)(props.onPress ?? void 0, (event) => {
-              props.disabled || setPressed(!pressed);
-            })
-          }
-        );
-      })
-    );
-    Toggle.displayName = NAME;
+            themeShallow: !0
+          },
+          active: props.unstyled ? void 0 : pressed,
+          "aria-pressed": pressed,
+          "data-state": pressed ? "on" : "off",
+          "data-disabled": props.disabled ? "" : void 0,
+          ...buttonProps,
+          ref: forwardedRef,
+          onPress: (0, import_web.composeEventHandlers)(props.onPress ?? void 0, () => {
+            props.disabled || setPressed(!pressed);
+          })
+        }
+      );
+    });
   }
 });
 
@@ -17907,78 +18121,50 @@ var require_ToggleGroup_native = __commonJS({
     var import_focusable2 = require_index_native44(), import_font_size = require_index_native40(), import_get_token2 = require_index_native17(), import_group = require_index_native50(), import_helpers_tamagui = require_index_native41(), import_roving_focus = require_index_native62(), import_use_controllable_state = require_index_native12(), import_use_direction = require_index_native22(), import_web = require_index_native9(), import_react2 = __toESM2(require("react")), import_Toggle = require_Toggle_native(), import_jsx_runtime6 = require("react/jsx-runtime"), 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(
       import_react2.default.forwardRef(
         (props, forwardedRef) => {
-          let { __scopeToggleGroup, ...rest } = props, valueContext = useToggleGroupValueContext(__scopeToggleGroup), context = useToggleGroupContext(__scopeToggleGroup), pressed = valueContext.value.includes(props.value), disabled = context.disabled || props.disabled || !1, ref = import_react2.default.useRef(null), groupItemProps = (0, import_group.useGroupItem)({ disabled }), size2 = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
+          let 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 }), size2 = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
             width: void 0,
             height: void 0,
             padding: (0, import_web.getVariableValue)(size2) * 0.6
-          }, iconSize = (typeof size2 == "number" ? size2 * 0.7 : (0, import_font_size.getFontSize)(size2)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color: theme.color }), children = import_react2.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react2.default.isValidElement(child) ? child : getThemedIcon(child)), commonProps = { pressed, disabled, ...sizeProps, ...props, children };
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleGroupItemProvider, { scope: __scopeToggleGroup, children: context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_roving_focus.RovingFocusGroup.Item,
+          }, iconSize = (typeof size2 == "number" ? size2 * 0.7 : (0, import_font_size.getFontSize)(size2)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color: theme.color }), children = import_react2.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react2.default.isValidElement(child) ? child : getThemedIcon(child)), commonProps = { pressed, disabled, ...sizeProps, ...props, children }, inner = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToggleGroupItemImpl,
             {
-              asChild: "except-style",
-              __scopeRovingFocusGroup: __scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+              ...commonProps,
+              ref: forwardedRef,
               focusable: !disabled,
-              active: pressed,
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_Toggle.ToggleFrame,
-                {
-                  asChild: "except-style",
-                  focusable: !disabled,
-                  disabled,
-                  ref,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    ToggleGroupItemImpl,
-                    {
-                      __scopeToggleGroup,
-                      ...commonProps,
-                      ref: forwardedRef,
-                      ...groupItemProps
-                    }
-                  )
-                }
-              )
+              disabled,
+              ...groupItemProps
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_Toggle.ToggleFrame,
+          );
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleGroupItemProvider, { scope: props.__scopeToggleGroup, children: context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_roving_focus.RovingFocusGroup.Item,
             {
               asChild: "except-style",
+              __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
               focusable: !disabled,
-              disabled,
-              ref,
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                ToggleGroupItemImpl,
-                {
-                  __scopeToggleGroup,
-                  ...commonProps,
-                  ref: forwardedRef
-                }
-              )
+              active: pressed,
+              children: inner
             }
-          ) });
+          ) : inner });
         }
       )
     );
     ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
-    var ToggleGroupItemImpl = import_Toggle.ToggleFrame.extractable(
-      import_react2.default.forwardRef(
-        (props, forwardedRef) => {
-          let { __scopeToggleGroup, value, ...itemProps } = props, valueContext = useToggleGroupValueContext(__scopeToggleGroup), singleProps = {
-            "aria-pressed": void 0
-          }, typeProps = valueContext.type === "single" ? singleProps : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_Toggle.Toggle,
-            {
-              ...typeProps,
-              ...itemProps,
-              ref: forwardedRef,
-              onPressedChange: (pressed) => {
-                pressed ? valueContext.onItemActivate(value) : valueContext.onItemDeactivate(value);
-              }
-            }
-          );
+    var ToggleGroupItemImpl = import_react2.default.forwardRef((props, forwardedRef) => {
+      let { __scopeToggleGroup, value, ...itemProps } = props, valueContext = useToggleGroupValueContext(__scopeToggleGroup), singleProps = {
+        "aria-pressed": void 0
+      }, typeProps = valueContext.type === "single" ? singleProps : void 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_Toggle.Toggle,
+        {
+          ...typeProps,
+          ...itemProps,
+          ref: forwardedRef,
+          onPressedChange: (pressed) => {
+            pressed ? valueContext.onItemActivate(value) : valueContext.onItemDeactivate(value);
+          }
         }
-      )
-    ), ToggleGroup = (0, import_web.withStaticProperties)(
+      );
+    }), ToggleGroup = (0, import_web.withStaticProperties)(
       import_react2.default.forwardRef(
         (props, forwardedRef) => {
           let { type, ...toggleGroupProps } = props;