@tamagui/toggle-group 2.0.0-1768741592663 → 2.0.0-1768782502458

package/dist/cjs/Toggle.cjs

@@ -32,115 +32,115 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var Toggle_exports = {};
 __export(Toggle_exports, {
   Toggle: () => Toggle,
-  ToggleFrame: () => ToggleFrame,
-  context: () => context
+  ToggleFrame: () => ToggleFrame
 });
 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_context = require("./context.cjs"),
   import_jsx_runtime = require("react/jsx-runtime");
-const context = (0, import_web.createStyledContext)({
-    color: "",
-    toggledStyle: null
-  }),
-  NAME = "Toggle",
-  ToggleFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
+const NAME = "Toggle",
+  ToggleFrame = (0, import_web.styled)(import_web.View, {
     name: NAME,
     render: "button",
-    context,
+    context: import_context.context,
     variants: {
       unstyled: {
         false: {
-          pressTheme: !0,
-          backgroundColor: "$background",
+          size: "$true",
           alignItems: "center",
           justifyContent: "center",
           display: "flex",
+          backgroundColor: "$background",
           borderColor: "$borderColor",
           borderWidth: 1,
           margin: -1,
           hoverStyle: {
-            backgroundColor: "$backgroundHover"
+            backgroundColor: "$backgroundHover",
+            borderColor: "$borderColorHover"
           },
           pressStyle: {
-            backgroundColor: "$backgroundPress"
-          },
-          focusStyle: {
-            borderColor: "$borderColorFocus"
+            backgroundColor: "$backgroundPress",
+            borderColor: "$borderColorPress"
           },
           focusVisibleStyle: {
             outlineColor: "$outlineColor",
             outlineWidth: 2,
-            outlineStyle: "solid"
+            outlineStyle: "solid",
+            zIndex: 10
           }
         }
       },
-      toggledStyle: val => ({}),
-      active: {
-        true: (_, {
-          props,
-          context: context2
+      size: {
+        "...size": (val, {
+          tokens
         }) => {
-          const toggledStyle = props.toggledStyle || context2?.toggledStyle;
-          return {
-            zIndex: 1,
-            ...(!props.unstyled && !toggledStyle && {
-              backgroundColor: "$background",
-              hoverStyle: {
-                backgroundColor: "$background"
-              },
-              focusStyle: {
-                backgroundColor: "$background",
-                borderColor: "$borderColor"
-              }
-            }),
-            ...toggledStyle
+          if (val) return {
+            width: tokens.size[val],
+            height: tokens.size[val]
           };
-        }
-      },
-      orientation: {
-        horizontal: {
-          flexDirection: "row",
-          spaceDirection: "horizontal"
         },
-        vertical: {
-          flexDirection: "column",
-          spaceDirection: "vertical"
+        ":number": val => ({
+          width: val,
+          height: val
+        })
+      },
+      defaultActiveStyle: {
+        true: {
+          backgroundColor: "$backgroundActive",
+          hoverStyle: {
+            backgroundColor: "$backgroundActive"
+          },
+          focusStyle: {
+            backgroundColor: "$backgroundActive",
+            borderColor: "$borderColorActive"
+          }
         }
       }
     },
     defaultVariants: {
       unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
+  }, {
+    accept: {
+      activeStyle: "style"
+    }
   }),
   Toggle = React.forwardRef(function (props, forwardedRef) {
     const {
-        pressed: pressedProp,
-        defaultPressed = !1,
-        onPressedChange,
+        active: activeProp,
+        activeStyle,
+        defaultActive = !1,
+        onActiveChange,
+        activeTheme,
+        unstyled = !1,
         ...buttonProps
       } = props,
-      [pressed = !1, setPressed] = (0, import_use_controllable_state.useControllableState)({
-        prop: pressedProp,
-        onChange: onPressedChange,
-        defaultProp: defaultPressed
+      [active = !1, setActive] = (0, import_use_controllable_state.useControllableState)({
+        prop: activeProp,
+        onChange: onActiveChange,
+        defaultProp: defaultActive
       });
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleFrame, {
-      ...(!props.unstyled && {
-        theme: pressed ? "accent" : null,
-        themeShallow: !0
-      }),
-      active: pressed,
-      "aria-pressed": pressed,
-      "data-state": pressed ? "on" : "off",
+      theme: activeTheme ?? null,
+      "aria-pressed": active,
+      "data-state": active ? "on" : "off",
       "data-disabled": props.disabled ? "" : void 0,
+      unstyled,
+      ...(active && !activeStyle && !unstyled && {
+        defaultActiveStyle: !0
+      }),
+      ...(active && activeStyle && {
+        ...activeStyle,
+        hoverStyle: activeStyle,
+        focusStyle: activeStyle
+      }),
       ...buttonProps,
       ref: forwardedRef,
       onPress: (0, import_helpers.composeEventHandlers)(props.onPress ?? void 0, () => {
-        props.disabled || setPressed(prev => !prev);
+        props.disabled || setActive(prev => !prev);
       })
     });
   });

package/dist/cjs/Toggle.js

@@ -23,106 +23,113 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var Toggle_exports = {};
 __export(Toggle_exports, {
   Toggle: () => Toggle,
-  ToggleFrame: () => ToggleFrame,
-  context: () => context
+  ToggleFrame: () => ToggleFrame
 });
 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: "",
-  toggledStyle: null
-}), NAME = "Toggle", ToggleFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
-  name: NAME,
-  render: "button",
-  context,
-  variants: {
-    unstyled: {
-      false: {
-        pressTheme: !0,
-        backgroundColor: "$background",
-        alignItems: "center",
-        justifyContent: "center",
-        display: "flex",
-        borderColor: "$borderColor",
-        borderWidth: 1,
-        margin: -1,
-        hoverStyle: {
-          backgroundColor: "$backgroundHover"
-        },
-        pressStyle: {
-          backgroundColor: "$backgroundPress"
-        },
-        focusStyle: {
-          borderColor: "$borderColorFocus"
-        },
-        focusVisibleStyle: {
-          outlineColor: "$outlineColor",
-          outlineWidth: 2,
-          outlineStyle: "solid"
+var import_helpers = require("@tamagui/helpers"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_web = require("@tamagui/web"), React = __toESM(require("react"), 1), import_context = require("./context"), import_jsx_runtime = require("react/jsx-runtime");
+const NAME = "Toggle", ToggleFrame = (0, import_web.styled)(
+  import_web.View,
+  {
+    name: NAME,
+    render: "button",
+    context: import_context.context,
+    variants: {
+      unstyled: {
+        false: {
+          size: "$true",
+          alignItems: "center",
+          justifyContent: "center",
+          display: "flex",
+          backgroundColor: "$background",
+          borderColor: "$borderColor",
+          borderWidth: 1,
+          margin: -1,
+          hoverStyle: {
+            backgroundColor: "$backgroundHover",
+            borderColor: "$borderColorHover"
+          },
+          pressStyle: {
+            backgroundColor: "$backgroundPress",
+            borderColor: "$borderColorPress"
+          },
+          focusVisibleStyle: {
+            outlineColor: "$outlineColor",
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            zIndex: 10
+          }
         }
-      }
-    },
-    toggledStyle: (val) => ({}),
-    active: {
-      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"
-            }
+      },
+      size: {
+        "...size": (val, { tokens }) => {
+          if (val)
+            return {
+              width: tokens.size[val],
+              height: tokens.size[val]
+            };
+        },
+        ":number": (val) => ({
+          width: val,
+          height: val
+        })
+      },
+      defaultActiveStyle: {
+        true: {
+          backgroundColor: "$backgroundActive",
+          hoverStyle: {
+            backgroundColor: "$backgroundActive"
           },
-          ...toggledStyle
-        };
+          focusStyle: {
+            backgroundColor: "$backgroundActive",
+            borderColor: "$borderColorActive"
+          }
+        }
       }
     },
-    orientation: {
-      horizontal: {
-        flexDirection: "row",
-        spaceDirection: "horizontal"
-      },
-      vertical: {
-        flexDirection: "column",
-        spaceDirection: "vertical"
-      }
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
   },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  {
+    accept: {
+      activeStyle: "style"
+    }
   }
-}), Toggle = React.forwardRef(
+), Toggle = React.forwardRef(
   function(props, forwardedRef) {
     const {
-      pressed: pressedProp,
-      defaultPressed = !1,
-      onPressedChange,
+      active: activeProp,
+      activeStyle,
+      defaultActive = !1,
+      onActiveChange,
+      activeTheme,
+      unstyled = !1,
       ...buttonProps
-    } = props, [pressed = !1, setPressed] = (0, import_use_controllable_state.useControllableState)({
-      prop: pressedProp,
-      onChange: onPressedChange,
-      defaultProp: defaultPressed
+    } = props, [active = !1, setActive] = (0, import_use_controllable_state.useControllableState)({
+      prop: activeProp,
+      onChange: onActiveChange,
+      defaultProp: defaultActive
     });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ToggleFrame,
       {
-        ...!props.unstyled && {
-          theme: pressed ? "accent" : null,
-          themeShallow: !0
-        },
-        active: pressed,
-        "aria-pressed": pressed,
-        "data-state": pressed ? "on" : "off",
+        theme: activeTheme ?? null,
+        "aria-pressed": active,
+        "data-state": active ? "on" : "off",
         "data-disabled": props.disabled ? "" : void 0,
+        unstyled,
+        ...active && !activeStyle && !unstyled && {
+          defaultActiveStyle: !0
+        },
+        ...active && activeStyle && {
+          ...activeStyle,
+          hoverStyle: activeStyle,
+          focusStyle: activeStyle
+        },
         ...buttonProps,
         ref: forwardedRef,
         onPress: (0, import_helpers.composeEventHandlers)(props.onPress ?? void 0, () => {
-          props.disabled || setPressed((prev) => !prev);
+          props.disabled || setActive((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,8BAqHjB;AAjHC,MAAM,cAAU,gCAAoB;AAAA,EACzC,OAAO;AAAA,EACP,cAAc;AAChB,CAAC,GAMK,OAAO,UAEA,kBAAc,mBAAO,8BAAgB;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR;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"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAqC,6BACrC,gCAAqC,4CAErC,aAA6B,yBAC7B,QAAuB,8BACvB,iBAAwB,sBAmHlB;AA7GN,MAAM,OAAO,UAEA,kBAAc;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR;AAAA,IAEA,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,UACL,MAAM;AAAA,UACN,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,aAAa;AAAA,UACb,QAAQ;AAAA,UACR,YAAY;AAAA,YACV,iBAAiB;AAAA,YACjB,aAAa;AAAA,UACf;AAAA,UACA,YAAY;AAAA,YACV,iBAAiB;AAAA,YACjB,aAAa;AAAA,UACf;AAAA,UACA,mBAAmB;AAAA,YACjB,cAAc;AAAA,YACd,cAAc;AAAA,YACd,cAAc;AAAA,YACd,QAAQ;AAAA,UACV;AAAA,QACF;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,cAAK;AACL,mBAAO;AAAA,cACL,OAAO,OAAO,KAAK,GAAG;AAAA,cACtB,QAAQ,OAAO,KAAK,GAAG;AAAA,YACzB;AAAA,QACF;AAAA,QACA,WAAW,CAAC,SAAS;AAAA,UACnB,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,oBAAoB;AAAA,QAClB,MAAM;AAAA,UACJ,iBAAiB;AAAA,UACjB,YAAY;AAAA,YACV,iBAAiB;AAAA,UACnB;AAAA,UACA,YAAY;AAAA,YACV,iBAAiB;AAAA,YACjB,aAAa;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU,QAAQ,IAAI,qBAAqB;AAAA,IAC7C;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AACF,GAgBa,SAAS,MAAM;AAAA,EAC1B,SAAgB,OAAO,cAAc;AACnC,UAAM;AAAA,MACJ,QAAQ;AAAA,MACR;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,GAAG;AAAA,IACL,IAAI,OAEE,CAAC,SAAS,IAAO,SAAS,QAAI,oDAAqB;AAAA,MACvD,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,eAAe;AAAA,QACtB,gBAAc;AAAA,QACd,cAAY,SAAS,OAAO;AAAA,QAC5B,iBAAe,MAAM,WAAW,KAAK;AAAA,QACrC;AAAA,QACC,GAAI,UACH,CAAC,eACD,CAAC,YAAY;AAAA,UACX,oBAAoB;AAAA,QACtB;AAAA,QACD,GAAI,UACH,eAAe;AAAA,UACb,GAAI;AAAA,UACJ,YAAY;AAAA,UACZ,YAAY;AAAA,QACd;AAAA,QACD,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,aAAS,qCAAqB,MAAM,WAAW,QAAW,MAAM;AAC9D,UAAK,MAAM,YACT,UAAU,CAAC,SAAS,CAAC,IAAI;AAAA,QAE7B,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "names": []
 }

package/dist/cjs/Toggle.native.js

@@ -34,119 +34,119 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var Toggle_exports = {};
 __export(Toggle_exports, {
   Toggle: () => Toggle,
-  ToggleFrame: () => ToggleFrame,
-  context: () => context
+  ToggleFrame: () => ToggleFrame
 });
 module.exports = __toCommonJS(Toggle_exports);
 var import_jsx_runtime = require("react/jsx-runtime"),
   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),
-  context = (0, import_web.createStyledContext)({
-    color: "",
-    toggledStyle: null
-  }),
+  import_context = require("./context.native.js"),
   NAME = "Toggle",
-  ToggleFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
+  ToggleFrame = (0, import_web.styled)(import_web.View, {
     name: NAME,
     render: "button",
-    context,
+    context: import_context.context,
     variants: {
       unstyled: {
         false: {
-          pressTheme: !0,
-          backgroundColor: "$background",
+          size: "$true",
           alignItems: "center",
           justifyContent: "center",
           display: "flex",
+          backgroundColor: "$background",
           borderColor: "$borderColor",
           borderWidth: 1,
           margin: -1,
           hoverStyle: {
-            backgroundColor: "$backgroundHover"
+            backgroundColor: "$backgroundHover",
+            borderColor: "$borderColorHover"
           },
           pressStyle: {
-            backgroundColor: "$backgroundPress"
-          },
-          focusStyle: {
-            borderColor: "$borderColorFocus"
+            backgroundColor: "$backgroundPress",
+            borderColor: "$borderColorPress"
           },
           focusVisibleStyle: {
             outlineColor: "$outlineColor",
             outlineWidth: 2,
-            outlineStyle: "solid"
+            outlineStyle: "solid",
+            zIndex: 10
           }
         }
       },
-      toggledStyle: function (val) {
-        return {};
-      },
-      active: {
-        true: function (_, param) {
+      size: {
+        "...size": function (val, param) {
           var {
-              props,
-              context: context2
-            } = param,
-            toggledStyle = props.toggledStyle || context2?.toggledStyle;
+            tokens
+          } = param;
+          if (val) return {
+            width: tokens.size[val],
+            height: tokens.size[val]
+          };
+        },
+        ":number": function (val) {
           return {
-            zIndex: 1,
-            ...(!props.unstyled && !toggledStyle && {
-              backgroundColor: "$background",
-              hoverStyle: {
-                backgroundColor: "$background"
-              },
-              focusStyle: {
-                backgroundColor: "$background",
-                borderColor: "$borderColor"
-              }
-            }),
-            ...toggledStyle
+            width: val,
+            height: val
           };
         }
       },
-      orientation: {
-        horizontal: {
-          flexDirection: "row",
-          spaceDirection: "horizontal"
-        },
-        vertical: {
-          flexDirection: "column",
-          spaceDirection: "vertical"
+      defaultActiveStyle: {
+        true: {
+          backgroundColor: "$backgroundActive",
+          hoverStyle: {
+            backgroundColor: "$backgroundActive"
+          },
+          focusStyle: {
+            backgroundColor: "$backgroundActive",
+            borderColor: "$borderColorActive"
+          }
         }
       }
     },
     defaultVariants: {
       unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
+  }, {
+    accept: {
+      activeStyle: "style"
+    }
   }),
   Toggle = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
     var {
-        pressed: pressedProp,
-        defaultPressed = !1,
-        onPressedChange,
+        active: activeProp,
+        activeStyle,
+        defaultActive = !1,
+        onActiveChange,
+        activeTheme,
+        unstyled = !1,
         ...buttonProps
       } = props,
-      [pressed = !1, setPressed] = (0, import_use_controllable_state.useControllableState)({
-        prop: pressedProp,
-        onChange: onPressedChange,
-        defaultProp: defaultPressed
+      [active = !1, setActive] = (0, import_use_controllable_state.useControllableState)({
+        prop: activeProp,
+        onChange: onActiveChange,
+        defaultProp: defaultActive
       }),
       _props_onPress;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleFrame, {
-      ...(!props.unstyled && {
-        theme: pressed ? "accent" : null,
-        themeShallow: !0
-      }),
-      active: pressed,
-      "aria-pressed": pressed,
-      "data-state": pressed ? "on" : "off",
+      theme: activeTheme ?? null,
+      "aria-pressed": active,
+      "data-state": active ? "on" : "off",
       "data-disabled": props.disabled ? "" : void 0,
+      unstyled,
+      ...(active && !activeStyle && !unstyled && {
+        defaultActiveStyle: !0
+      }),
+      ...(active && activeStyle && {
+        ...activeStyle,
+        hoverStyle: activeStyle,
+        focusStyle: activeStyle
+      }),
       ...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(function (prev) {
+        props.disabled || setActive(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","toggledStyle","NAME","styled","ThemeableStack","name","render","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":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Toggle_exports","__export","Toggle","ToggleFrame","module","exports","import_jsx_runtime","require","import_helpers","import_use_controllable_state","import_web","React","__toESM","import_context","NAME","styled","View","name","render","context","variants","unstyled","false","size","alignItems","justifyContent","display","backgroundColor","borderColor","borderWidth","margin","hoverStyle","pressStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","zIndex","...size","val","param","tokens","width","height",":number","defaultActiveStyle","true","focusStyle","defaultVariants","process","env","TAMAGUI_HEADLESS","accept","activeStyle","forwardRef","props","forwardedRef","active","activeProp","defaultActive","onActiveChange","activeTheme","buttonProps","setActive","useControllableState","prop","onChange","defaultProp","_props_onPress","jsx","theme","disabled","ref","onPress","composeEventHandlers","prev"],"sources":["../../src/Toggle.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}