@tamagui/toggle-group 2.0.0-1768024152500 → 2.0.0-1768202210244

package/dist/cjs/Toggle.cjs

@@ -43,7 +43,8 @@ var import_helpers = require("@tamagui/helpers"),
   React = __toESM(require("react"), 1),
   import_jsx_runtime = require("react/jsx-runtime");
 const context = (0, import_web.createStyledContext)({
-    color: ""
+    color: "",
+    toggledStyle: null
   }),
   NAME = "Toggle",
   ToggleFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
@@ -77,19 +78,27 @@ const context = (0, import_web.createStyledContext)({
           }
         }
       },
-      color: {
-        "...color": () => ({})
-      },
+      toggledStyle: val => ({}),
       active: {
-        true: {
-          zIndex: 1,
-          hoverStyle: {
-            backgroundColor: "$background"
-          },
-          focusStyle: {
-            borderColor: "$borderColor",
-            backgroundColor: "$background"
-          }
+        true: (_, {
+          props,
+          context: context2
+        }) => {
+          const toggledStyle = props.toggledStyle || context2?.toggledStyle;
+          return {
+            zIndex: 1,
+            ...(!props.unstyled && !toggledStyle && {
+              backgroundColor: "$background",
+              hoverStyle: {
+                backgroundColor: "$background"
+              },
+              focusStyle: {
+                backgroundColor: "$background",
+                borderColor: "$borderColor"
+              }
+            }),
+            ...toggledStyle
+          };
         }
       },
       orientation: {
@@ -124,14 +133,14 @@ const context = (0, import_web.createStyledContext)({
         theme: pressed ? "accent" : null,
         themeShallow: !0
       }),
-      active: props.unstyled ? void 0 : pressed,
+      active: pressed,
       "aria-pressed": pressed,
       "data-state": pressed ? "on" : "off",
       "data-disabled": props.disabled ? "" : void 0,
       ...buttonProps,
       ref: forwardedRef,
       onPress: (0, import_helpers.composeEventHandlers)(props.onPress ?? void 0, () => {
-        props.disabled || setPressed(!pressed);
+        props.disabled || setPressed(prev => !prev);
       })
     });
   });

package/dist/cjs/Toggle.js

@@ -29,7 +29,8 @@ __export(Toggle_exports, {
 module.exports = __toCommonJS(Toggle_exports);
 var import_helpers = require("@tamagui/helpers"), import_stacks = require("@tamagui/stacks"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_web = require("@tamagui/web"), React = __toESM(require("react"), 1), import_jsx_runtime = require("react/jsx-runtime");
 const context = (0, import_web.createStyledContext)({
-  color: ""
+  color: "",
+  toggledStyle: null
 }), NAME = "Toggle", ToggleFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
   name: NAME,
   tag: "button",
@@ -61,19 +62,24 @@ const context = (0, import_web.createStyledContext)({
         }
       }
     },
-    color: {
-      "...color": () => ({})
-    },
+    toggledStyle: (val) => ({}),
     active: {
-      true: {
-        zIndex: 1,
-        hoverStyle: {
-          backgroundColor: "$background"
-        },
-        focusStyle: {
-          borderColor: "$borderColor",
-          backgroundColor: "$background"
-        }
+      true: (_, { props, context: context2 }) => {
+        const toggledStyle = props.toggledStyle || context2?.toggledStyle;
+        return {
+          zIndex: 1,
+          ...!props.unstyled && !toggledStyle && {
+            backgroundColor: "$background",
+            hoverStyle: {
+              backgroundColor: "$background"
+            },
+            focusStyle: {
+              backgroundColor: "$background",
+              borderColor: "$borderColor"
+            }
+          },
+          ...toggledStyle
+        };
       }
     },
     orientation: {
@@ -109,14 +115,14 @@ const context = (0, import_web.createStyledContext)({
           theme: pressed ? "accent" : null,
           themeShallow: !0
         },
-        active: props.unstyled ? void 0 : pressed,
+        active: pressed,
         "aria-pressed": pressed,
         "data-state": pressed ? "on" : "off",
         "data-disabled": props.disabled ? "" : void 0,
         ...buttonProps,
         ref: forwardedRef,
         onPress: (0, import_helpers.composeEventHandlers)(props.onPress ?? void 0, () => {
-          props.disabled || setPressed(!pressed);
+          props.disabled || setPressed((prev) => !prev);
         })
       }
     );

package/dist/cjs/Toggle.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Toggle.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAqC,6BACrC,gBAA+B,4BAC/B,gCAAqC,4CAErC,aAAkD,yBAClD,QAAuB,8BA+GjB;AA7GC,MAAM,cAAU,gCAAoB;AAAA,EACzC,OAAO;AACT,CAAC,GAMK,OAAO,UAEA,kBAAc,mBAAO,8BAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL;AAAA,EAEA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,aAAa;AAAA,QACb,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,QACA,mBAAmB;AAAA,UACjB,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,YAAY,OACH,CAAC;AAAA,IAEZ;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,QAAQ;AAAA,QAER,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,aAAa;AAAA,MACX,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU,QAAQ,IAAI,qBAAqB;AAAA,EAC7C;AACF,CAAC,GAcY,SAAS,MAAM;AAAA,EAC1B,SAAgB,OAAO,cAAc;AACnC,UAAM;AAAA,MACJ,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,IACL,IAAI,OAEE,CAAC,UAAU,IAAO,UAAU,QAAI,oDAAqB;AAAA,MACzD,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAI,CAAC,MAAM,YAAY;AAAA,UACtB,OAAO,UAAU,WAAW;AAAA,UAC5B,cAAc;AAAA,QAChB;AAAA,QACA,QAAS,MAAM,WAAqB,SAAV;AAAA,QAC1B,gBAAc;AAAA,QACd,cAAY,UAAU,OAAO;AAAA,QAC7B,iBAAe,MAAM,WAAW,KAAK;AAAA,QACpC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,aAAS,qCAAqB,MAAM,WAAW,QAAW,MAAM;AAC9D,UAAK,MAAM,YACT,WAAW,CAAC,OAAO;AAAA,QAEvB,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAqC,6BACrC,gBAA+B,4BAC/B,gCAAqC,4CAErC,aAAkD,yBAClD,QAAuB,8BAqHjB;AAjHC,MAAM,cAAU,gCAAoB;AAAA,EACzC,OAAO;AAAA,EACP,cAAc;AAChB,CAAC,GAMK,OAAO,UAEA,kBAAc,mBAAO,8BAAgB;AAAA,EAChD,MAAM;AAAA,EACN,KAAK;AAAA,EACL;AAAA,EAEA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,aAAa;AAAA,QACb,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,QACA,mBAAmB;AAAA,UACjB,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc,CAAC,SAAkC,CAAC;AAAA,IAElD,QAAQ;AAAA,MACN,MAAM,CAAC,GAAG,EAAE,OAAO,SAAAA,SAAQ,MAAW;AACpC,cAAM,eAAe,MAAM,gBAAgBA,UAAS;AACpD,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,GAAI,CAAC,MAAM,YACT,CAAC,gBAAgB;AAAA,YACf,iBAAiB;AAAA,YACjB,YAAY;AAAA,cACV,iBAAiB;AAAA,YACnB;AAAA,YACA,YAAY;AAAA,cACV,iBAAiB;AAAA,cACjB,aAAa;AAAA,YACf;AAAA,UACF;AAAA,UACF,GAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,IAEA,aAAa;AAAA,MACX,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU,QAAQ,IAAI,qBAAqB;AAAA,EAC7C;AACF,CAAC,GAeY,SAAS,MAAM;AAAA,EAC1B,SAAgB,OAAO,cAAc;AACnC,UAAM;AAAA,MACJ,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,IACL,IAAI,OAEE,CAAC,UAAU,IAAO,UAAU,QAAI,oDAAqB;AAAA,MACzD,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAI,CAAC,MAAM,YAAY;AAAA,UACtB,OAAO,UAAU,WAAW;AAAA,UAC5B,cAAc;AAAA,QAChB;AAAA,QACA,QAAQ;AAAA,QACR,gBAAc;AAAA,QACd,cAAY,UAAU,OAAO;AAAA,QAC7B,iBAAe,MAAM,WAAW,KAAK;AAAA,QACpC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,aAAS,qCAAqB,MAAM,WAAW,QAAW,MAAM;AAC9D,UAAK,MAAM,YACT,WAAW,CAAC,SAAS,CAAC,IAAI;AAAA,QAE9B,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "names": ["context"]
 }

package/dist/cjs/Toggle.native.js

@@ -45,7 +45,8 @@ var import_jsx_runtime = require("react/jsx-runtime"),
   import_web = require("@tamagui/web"),
   React = __toESM(require("react"), 1),
   context = (0, import_web.createStyledContext)({
-    color: ""
+    color: "",
+    toggledStyle: null
   }),
   NAME = "Toggle",
   ToggleFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
@@ -79,21 +80,30 @@ var import_jsx_runtime = require("react/jsx-runtime"),
           }
         }
       },
-      color: {
-        "...color": function () {
-          return {};
-        }
+      toggledStyle: function (val) {
+        return {};
       },
       active: {
-        true: {
-          zIndex: 1,
-          hoverStyle: {
-            backgroundColor: "$background"
-          },
-          focusStyle: {
-            borderColor: "$borderColor",
-            backgroundColor: "$background"
-          }
+        true: function (_, param) {
+          var {
+              props,
+              context: context2
+            } = param,
+            toggledStyle = props.toggledStyle || context2?.toggledStyle;
+          return {
+            zIndex: 1,
+            ...(!props.unstyled && !toggledStyle && {
+              backgroundColor: "$background",
+              hoverStyle: {
+                backgroundColor: "$background"
+              },
+              focusStyle: {
+                backgroundColor: "$background",
+                borderColor: "$borderColor"
+              }
+            }),
+            ...toggledStyle
+          };
         }
       },
       orientation: {
@@ -129,14 +139,16 @@ var import_jsx_runtime = require("react/jsx-runtime"),
         theme: pressed ? "accent" : null,
         themeShallow: !0
       }),
-      active: props.unstyled ? void 0 : pressed,
+      active: pressed,
       "aria-pressed": pressed,
       "data-state": pressed ? "on" : "off",
       "data-disabled": props.disabled ? "" : void 0,
       ...buttonProps,
       ref: forwardedRef,
       onPress: (0, import_helpers.composeEventHandlers)((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function () {
-        props.disabled || setPressed(!pressed);
+        props.disabled || setPressed(function (prev) {
+          return !prev;
+        });
       })
     });
   });

package/dist/cjs/Toggle.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Toggle_exports","__export","Toggle","ToggleFrame","context","module","exports","import_jsx_runtime","require","import_helpers","import_stacks","import_use_controllable_state","import_web","React","__toESM","createStyledContext","color","NAME","styled","ThemeableStack","name","tag","variants","unstyled","false","pressTheme","backgroundColor","alignItems","justifyContent","display","borderColor","borderWidth","margin","hoverStyle","pressStyle","focusStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","...color","active","true","zIndex","orientation","horizontal","flexDirection","spaceDirection","vertical","defaultVariants","process","env","TAMAGUI_HEADLESS","forwardRef","props","forwardedRef","pressed","pressedProp","defaultPressed","onPressedChange","buttonProps","setPressed","useControllableState","prop","onChange","defaultProp","_props_onPress","jsx","theme","themeShallow","disabled","ref","onPress","composeEventHandlers"],"sources":["../../src/Toggle.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Toggle_exports","__export","Toggle","ToggleFrame","context","module","exports","import_jsx_runtime","require","import_helpers","import_stacks","import_use_controllable_state","import_web","React","__toESM","createStyledContext","color","toggledStyle","NAME","styled","ThemeableStack","name","tag","variants","unstyled","false","pressTheme","backgroundColor","alignItems","justifyContent","display","borderColor","borderWidth","margin","hoverStyle","pressStyle","focusStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","val","active","true","_","param","props","context2","zIndex","orientation","horizontal","flexDirection","spaceDirection","vertical","defaultVariants","process","env","TAMAGUI_HEADLESS","forwardRef","forwardedRef","pressed","pressedProp","defaultPressed","onPressedChange","buttonProps","setPressed","useControllableState","prop","onChange","defaultProp","_props_onPress","jsx","theme","themeShallow","disabled","ref","onPress","composeEventHandlers","prev"],"sources":["../../src/Toggle.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/ToggleGroup.cjs

@@ -59,16 +59,17 @@ const TOGGLE_GROUP_NAME = "ToggleGroup",
     useStyledContext: useToggleGroupContext
   } = (0, import_web.createStyledContext)(),
   ToggleGroupItem = import_Toggle.ToggleFrame.styleable((props, forwardedRef) => {
-    const [_, {
-        color
-      }] = (0, import_web.usePropsAndStyle)(props),
+    const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup),
+      context = useToggleGroupContext(props.__scopeToggleGroup),
+      toggleContext = import_Toggle.context.useStyledContext(props.__scopeToggleGroup),
+      pressed = valueContext?.value.includes(props.value),
+      toggledStyle = props.toggledStyle || toggleContext.toggledStyle,
+      color = props.color || toggleContext.color,
       {
         disablePassStyles,
+        toggledStyle: _,
         ...rest
       } = props,
-      valueContext = useToggleGroupValueContext(props.__scopeToggleGroup),
-      context = useToggleGroupContext(props.__scopeToggleGroup),
-      pressed = valueContext?.value.includes(props.value),
       disabled = context.disabled || props.disabled || !1,
       groupItemProps = (0, import_group.useGroupItem)({
         disabled
@@ -81,9 +82,10 @@ const TOGGLE_GROUP_NAME = "ToggleGroup",
       },
       iconSize = (typeof size == "number" ? size * 0.7 : (0, import_font_size.getFontSize)(size)) * 1.2,
       theme = (0, import_web.useTheme)(),
+      toggledColor = toggledStyle?.color,
       getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
         size: iconSize,
-        color: color ?? theme.color
+        color: (pressed && toggledColor ? toggledColor : color) || theme.color
       }),
       children = import_react.default.Children.toArray(props.children).map(child => props.disablePassStyles || !import_react.default.isValidElement(child) ? child : import_react.default.cloneElement(getThemedIcon(child), {
         active: pressed
@@ -93,7 +95,8 @@ const TOGGLE_GROUP_NAME = "ToggleGroup",
         disabled,
         ...sizeProps,
         ...rest,
-        children
+        children,
+        toggledStyle
       },
       inner = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupItemImpl, {
         ...commonProps,
@@ -104,13 +107,17 @@ const TOGGLE_GROUP_NAME = "ToggleGroup",
       });
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupItemProvider, {
       scope: props.__scopeToggleGroup,
-      children: context.rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
-        asChild: "except-style",
-        __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
-        focusable: !disabled,
-        active: pressed,
-        children: inner
-      }) : inner
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Toggle.context.Provider, {
+        color,
+        toggledStyle,
+        children: context.rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+          asChild: "except-style",
+          __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+          focusable: !disabled,
+          active: pressed,
+          children: inner
+        }) : inner
+      })
     });
   });
 ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
@@ -251,6 +258,8 @@ const ToggleGroupImplElementFrame = (0, import_web.styled)(import_group.Group, {
         unstyled = !1,
         size: sizeProp = "$true",
         sizeAdjust = 0,
+        toggledStyle,
+        color,
         ...toggleGroupProps
       } = props,
       direction = (0, import_use_direction.useDirection)(dir),
@@ -268,27 +277,31 @@ const ToggleGroupImplElementFrame = (0, import_web.styled)(import_group.Group, {
       rovingFocus,
       disabled,
       size,
-      children: rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
-        asChild: "except-style",
-        __scopeRovingFocusGroup: __scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
-        orientation,
-        dir: direction,
-        loop,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplElementFrame, {
-          "aria-orientation": orientation,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Toggle.context.Provider, {
+        color,
+        toggledStyle,
+        children: rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+          asChild: "except-style",
+          __scopeRovingFocusGroup: __scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
           orientation,
+          dir: direction,
+          loop,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplElementFrame, {
+            "aria-orientation": orientation,
+            orientation,
+            ref: forwardedRef,
+            "data-disabled": disabled ? "" : void 0,
+            unstyled,
+            ...commonProps
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplElementFrame, {
+          "aria-orientation": orientation,
           ref: forwardedRef,
+          orientation,
           "data-disabled": disabled ? "" : void 0,
           unstyled,
           ...commonProps
         })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplElementFrame, {
-        "aria-orientation": orientation,
-        ref: forwardedRef,
-        orientation,
-        "data-disabled": disabled ? "" : void 0,
-        unstyled,
-        ...commonProps
       })
     });
   });

package/dist/cjs/ToggleGroup.js

@@ -26,35 +26,44 @@ __export(ToggleGroup_exports, {
 });
 module.exports = __toCommonJS(ToggleGroup_exports);
 var import_constants = require("@tamagui/constants"), import_focusable = require("@tamagui/focusable"), import_font_size = require("@tamagui/font-size"), import_get_token = require("@tamagui/get-token"), import_group = require("@tamagui/group"), import_helpers = require("@tamagui/helpers"), import_helpers_tamagui = require("@tamagui/helpers-tamagui"), import_roving_focus = require("@tamagui/roving-focus"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_use_direction = require("@tamagui/use-direction"), import_web = require("@tamagui/web"), import_react = __toESM(require("react"), 1), import_Toggle = require("./Toggle"), import_jsx_runtime = require("react/jsx-runtime");
-const TOGGLE_GROUP_NAME = "ToggleGroup", TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem", TOGGLE_GROUP_CONTEXT = "ToggleGroup", { Provider: ToggleGroupItemProvider } = (0, import_web.createStyledContext)(), { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } = (0, import_web.createStyledContext)(), ToggleGroupItem = import_Toggle.ToggleFrame.styleable((props, forwardedRef) => {
-  const [_, { color }] = (0, import_web.usePropsAndStyle)(props), { disablePassStyles, ...rest } = props, valueContext = useToggleGroupValueContext(props.__scopeToggleGroup), context = useToggleGroupContext(props.__scopeToggleGroup), pressed = valueContext?.value.includes(props.value), disabled = context.disabled || props.disabled || !1, groupItemProps = (0, import_group.useGroupItem)({ disabled }), size = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
-    width: void 0,
-    height: void 0,
-    padding: (0, import_web.getVariableValue)(size) * 0.6
-  }, iconSize = (typeof size == "number" ? size * 0.7 : (0, import_font_size.getFontSize)(size)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
-    size: iconSize,
-    color: color ?? theme.color
-  }), children = import_react.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react.default.isValidElement(child) ? child : import_react.default.cloneElement(getThemedIcon(child), { active: pressed })), commonProps = { pressed, disabled, ...sizeProps, ...rest, children }, inner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ToggleGroupItemImpl,
-    {
-      ...commonProps,
-      ref: forwardedRef,
-      tabIndex: disabled ? -1 : 0,
+const TOGGLE_GROUP_NAME = "ToggleGroup", TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem", TOGGLE_GROUP_CONTEXT = "ToggleGroup", { Provider: ToggleGroupItemProvider } = (0, import_web.createStyledContext)(), { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } = (0, import_web.createStyledContext)(), ToggleGroupItem = import_Toggle.ToggleFrame.styleable(
+  (props, forwardedRef) => {
+    const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup), context = useToggleGroupContext(props.__scopeToggleGroup), toggleContext = import_Toggle.context.useStyledContext(props.__scopeToggleGroup), pressed = valueContext?.value.includes(props.value), toggledStyle = props.toggledStyle || toggleContext.toggledStyle, color = props.color || toggleContext.color, { disablePassStyles, toggledStyle: _, ...rest } = props, disabled = context.disabled || props.disabled || !1, groupItemProps = (0, import_group.useGroupItem)({ disabled }), size = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
+      width: void 0,
+      height: void 0,
+      padding: (0, import_web.getVariableValue)(size) * 0.6
+    }, iconSize = (typeof size == "number" ? size * 0.7 : (0, import_font_size.getFontSize)(size)) * 1.2, theme = (0, import_web.useTheme)(), toggledColor = toggledStyle?.color, getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+      size: iconSize,
+      color: (pressed && toggledColor ? toggledColor : color) || theme.color
+    }), children = import_react.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react.default.isValidElement(child) ? child : import_react.default.cloneElement(getThemedIcon(child), { active: pressed })), commonProps = {
+      pressed,
       disabled,
-      ...groupItemProps
-    }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItemProvider, { scope: props.__scopeToggleGroup, children: context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_roving_focus.RovingFocusGroup.Item,
-    {
-      asChild: "except-style",
-      __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
-      focusable: !disabled,
-      active: pressed,
-      children: inner
-    }
-  ) : inner });
-});
+      ...sizeProps,
+      ...rest,
+      children,
+      toggledStyle
+    }, inner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ToggleGroupItemImpl,
+      {
+        ...commonProps,
+        ref: forwardedRef,
+        tabIndex: disabled ? -1 : 0,
+        disabled,
+        ...groupItemProps
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItemProvider, { scope: props.__scopeToggleGroup, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Toggle.context.Provider, { color, toggledStyle, children: context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_roving_focus.RovingFocusGroup.Item,
+      {
+        asChild: "except-style",
+        __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+        focusable: !disabled,
+        active: pressed,
+        children: inner
+      }
+    ) : inner }) });
+  }
+);
 ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
 const ToggleGroupItemImpl = import_react.default.forwardRef((props, forwardedRef) => {
   const { __scopeToggleGroup, value, ...itemProps } = props, valueContext = useToggleGroupValueContext(__scopeToggleGroup), singleProps = {
@@ -192,6 +201,8 @@ const ToggleGroupImplElementFrame = (0, import_web.styled)(import_group.Group, {
     unstyled = !1,
     size: sizeProp = "$true",
     sizeAdjust = 0,
+    toggledStyle,
+    color,
     ...toggleGroupProps
   } = props, direction = (0, import_use_direction.useDirection)(dir), commonProps = {
     role: "group",
@@ -209,7 +220,7 @@ const ToggleGroupImplElementFrame = (0, import_web.styled)(import_group.Group, {
       rovingFocus,
       disabled,
       size,
-      children: rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Toggle.context.Provider, { color, toggledStyle, children: rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_roving_focus.RovingFocusGroup,
         {
           asChild: "except-style",
@@ -239,7 +250,7 @@ const ToggleGroupImplElementFrame = (0, import_web.styled)(import_group.Group, {
           unstyled,
           ...commonProps
         }
-      )
+      ) })
     }
   );
 });

package/dist/cjs/ToggleGroup.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroup.tsx"],
-  "mappings": "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",
-  "names": ["React", "value"]
+  "mappings": "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",
+  "names": ["ToggleContext", "React", "value"]
 }

package/dist/cjs/ToggleGroup.native.js

@@ -61,16 +61,17 @@ var import_jsx_runtime = require("react/jsx-runtime"),
     useStyledContext: useToggleGroupContext
   } = (0, import_web.createStyledContext)(),
   ToggleGroupItem = import_Toggle.ToggleFrame.styleable(function (props, forwardedRef) {
-    var [_, {
-        color
-      }] = (0, import_web.usePropsAndStyle)(props),
+    var valueContext = useToggleGroupValueContext(props.__scopeToggleGroup),
+      context = useToggleGroupContext(props.__scopeToggleGroup),
+      toggleContext = import_Toggle.context.useStyledContext(props.__scopeToggleGroup),
+      pressed = valueContext?.value.includes(props.value),
+      toggledStyle = props.toggledStyle || toggleContext.toggledStyle,
+      color = props.color || toggleContext.color,
       {
         disablePassStyles,
+        toggledStyle: _,
         ...rest
       } = props,
-      valueContext = useToggleGroupValueContext(props.__scopeToggleGroup),
-      context = useToggleGroupContext(props.__scopeToggleGroup),
-      pressed = valueContext?.value.includes(props.value),
       disabled = context.disabled || props.disabled || !1,
       groupItemProps = (0, import_group.useGroupItem)({
         disabled
@@ -84,9 +85,11 @@ var import_jsx_runtime = require("react/jsx-runtime"),
       },
       iconSize = (typeof size == "number" ? size * 0.7 : (0, import_font_size.getFontSize)(size)) * 1.2,
       theme = (0, import_web.useTheme)(),
+      toggledColor = toggledStyle?.color,
+      activeColor = pressed && toggledColor ? toggledColor : color,
       getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
         size: iconSize,
-        color: color ?? theme.color
+        color: activeColor || theme.color
       }),
       childrens = import_react.default.Children.toArray(props.children),
       children = childrens.map(function (child) {
@@ -99,7 +102,8 @@ var import_jsx_runtime = require("react/jsx-runtime"),
         disabled,
         ...sizeProps,
         ...rest,
-        children
+        children,
+        toggledStyle
       },
       inner = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupItemImpl, {
         ...commonProps,
@@ -111,13 +115,17 @@ var import_jsx_runtime = require("react/jsx-runtime"),
       });
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupItemProvider, {
       scope: props.__scopeToggleGroup,
-      children: context.rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
-        asChild: "except-style",
-        __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
-        focusable: !disabled,
-        active: pressed,
-        children: inner
-      }) : inner
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Toggle.context.Provider, {
+        color,
+        toggledStyle,
+        children: context.rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+          asChild: "except-style",
+          __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+          focusable: !disabled,
+          active: pressed,
+          children: inner
+        }) : inner
+      })
     });
   });
 ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
@@ -278,6 +286,8 @@ var ToggleGroupImplElementFrame = (0, import_web.styled)(import_group.Group, {
         unstyled = !1,
         size: sizeProp = "$true",
         sizeAdjust = 0,
+        toggledStyle,
+        color,
         ...toggleGroupProps
       } = props,
       direction = (0, import_use_direction.useDirection)(dir),
@@ -295,28 +305,32 @@ var ToggleGroupImplElementFrame = (0, import_web.styled)(import_group.Group, {
       rovingFocus,
       disabled,
       size,
-      children: rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
-        asChild: "except-style",
-        __scopeRovingFocusGroup: __scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
-        orientation,
-        dir: direction,
-        loop,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplElementFrame, {
-          "aria-orientation": orientation,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Toggle.context.Provider, {
+        color,
+        toggledStyle,
+        children: rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+          asChild: "except-style",
+          __scopeRovingFocusGroup: __scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
           orientation,
-          // axis={orientation}
+          dir: direction,
+          loop,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplElementFrame, {
+            "aria-orientation": orientation,
+            orientation,
+            // axis={orientation}
+            ref: forwardedRef,
+            "data-disabled": disabled ? "" : void 0,
+            unstyled,
+            ...commonProps
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplElementFrame, {
+          "aria-orientation": orientation,
           ref: forwardedRef,
+          orientation,
           "data-disabled": disabled ? "" : void 0,
           unstyled,
           ...commonProps
         })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplElementFrame, {
-        "aria-orientation": orientation,
-        ref: forwardedRef,
-        orientation,
-        "data-disabled": disabled ? "" : void 0,
-        unstyled,
-        ...commonProps
       })
     });
   });