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

package/dist/esm/types.native.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.native.js.map

package/dist/esm/types.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}

package/dist/esm/useToggleGroupItem.js

@@ -0,0 +1,6 @@
+import { context } from "./context";
+const useToggleGroupItem = context.useStyledContext;
+export {
+  useToggleGroupItem
+};
+//# sourceMappingURL=useToggleGroupItem.js.map

package/dist/esm/useToggleGroupItem.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/useToggleGroupItem.ts"],
+  "mappings": "AAAA,SAAS,eAAe;AAEjB,MAAM,qBAAqB,QAAQ;",
+  "names": []
+}

package/dist/esm/useToggleGroupItem.mjs

@@ -0,0 +1,4 @@
+import { context } from "./context.mjs";
+const useToggleGroupItem = context.useStyledContext;
+export { useToggleGroupItem };
+//# sourceMappingURL=useToggleGroupItem.mjs.map

package/dist/esm/useToggleGroupItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["context","useToggleGroupItem","useStyledContext"],"sources":["../../src/useToggleGroupItem.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,OAAA,QAAe;AAEjB,MAAMC,kBAAA,GAAqBD,OAAA,CAAQE,gBAAA","ignoreList":[]}

package/dist/esm/useToggleGroupItem.native.js

@@ -0,0 +1,4 @@
+import { context } from "./context.native.js";
+var useToggleGroupItem = context.useStyledContext;
+export { useToggleGroupItem };
+//# sourceMappingURL=useToggleGroupItem.native.js.map

package/dist/esm/useToggleGroupItem.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["context","useToggleGroupItem","useStyledContext"],"sources":["../../src/useToggleGroupItem.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,OAAA,QAAe;AAEjB,IAAAC,kBAAM,GAAAD,OAAqB,CAAAE,gBAAQ","ignoreList":[]}

package/dist/jsx/Toggle.js

@@ -1,104 +1,112 @@
 import { composeEventHandlers } from "@tamagui/helpers";
-import { ThemeableStack } from "@tamagui/stacks";
 import { useControllableState } from "@tamagui/use-controllable-state";
-import { createStyledContext, styled } from "@tamagui/web";
+import { styled, View } from "@tamagui/web";
 import * as React from "react";
+import { context } from "./context";
 import { jsx } from "react/jsx-runtime";
-const context = createStyledContext({
-  color: "",
-  toggledStyle: null
-}), NAME = "Toggle", ToggleFrame = styled(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"
+const NAME = "Toggle", ToggleFrame = styled(
+  View,
+  {
+    name: NAME,
+    render: "button",
+    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] = useControllableState({
-      prop: pressedProp,
-      onChange: onPressedChange,
-      defaultProp: defaultPressed
+    } = props, [active = !1, setActive] = useControllableState({
+      prop: activeProp,
+      onChange: onActiveChange,
+      defaultProp: defaultActive
     });
     return /* @__PURE__ */ 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: composeEventHandlers(props.onPress ?? void 0, () => {
-          props.disabled || setPressed((prev) => !prev);
+          props.disabled || setActive((prev) => !prev);
         })
       }
     );
@@ -106,7 +114,6 @@ const context = createStyledContext({
 );
 export {
   Toggle,
-  ToggleFrame,
-  context
+  ToggleFrame
 };
 //# sourceMappingURL=Toggle.js.map

package/dist/jsx/Toggle.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Toggle.tsx"],
-  "mappings": "AAAA,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAErC,SAAS,qBAAqB,cAAoB;AAClD,YAAY,WAAW;AAqHjB;AAjHC,MAAM,UAAU,oBAAoB;AAAA,EACzC,OAAO;AAAA,EACP,cAAc;AAChB,CAAC,GAMK,OAAO,UAEA,cAAc,OAAO,gBAAgB;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,IAAI,qBAAqB;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,SAAS,qBAAqB,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,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC,SAAS,QAAQ,YAAY;AAC7B,YAAY,WAAW;AACvB,SAAS,eAAe;AAmHlB;AA7GN,MAAM,OAAO,UAEA,cAAc;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,IAAI,qBAAqB;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,SAAS,qBAAqB,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/jsx/Toggle.mjs

@@ -1,110 +1,111 @@
 import { composeEventHandlers } from "@tamagui/helpers";
-import { ThemeableStack } from "@tamagui/stacks";
 import { useControllableState } from "@tamagui/use-controllable-state";
-import { createStyledContext, styled } from "@tamagui/web";
+import { styled, View } from "@tamagui/web";
 import * as React from "react";
+import { context } from "./context.mjs";
 import { jsx } from "react/jsx-runtime";
-const context = createStyledContext({
-    color: "",
-    toggledStyle: null
-  }),
-  NAME = "Toggle",
-  ToggleFrame = styled(ThemeableStack, {
+const NAME = "Toggle",
+  ToggleFrame = styled(View, {
     name: NAME,
     render: "button",
     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] = useControllableState({
-        prop: pressedProp,
-        onChange: onPressedChange,
-        defaultProp: defaultPressed
+      [active = !1, setActive] = useControllableState({
+        prop: activeProp,
+        onChange: onActiveChange,
+        defaultProp: defaultActive
       });
     return /* @__PURE__ */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: composeEventHandlers(props.onPress ?? void 0, () => {
-        props.disabled || setPressed(prev => !prev);
+        props.disabled || setActive(prev => !prev);
       })
     });
   });
-export { Toggle, ToggleFrame, context };
+export { Toggle, ToggleFrame };
 //# sourceMappingURL=Toggle.mjs.map

package/dist/jsx/Toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["composeEventHandlers","ThemeableStack","useControllableState","createStyledContext","styled","React","jsx","context","color","toggledStyle","NAME","ToggleFrame","name","render","variants","unstyled","false","pressTheme","backgroundColor","alignItems","justifyContent","display","borderColor","borderWidth","margin","hoverStyle","pressStyle","focusStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","val","active","true","_","props","context2","zIndex","orientation","horizontal","flexDirection","spaceDirection","vertical","defaultVariants","process","env","TAMAGUI_HEADLESS","Toggle","forwardRef","forwardedRef","pressed","pressedProp","defaultPressed","onPressedChange","buttonProps","setPressed","prop","onChange","defaultProp","theme","themeShallow","disabled","ref","onPress","prev"],"sources":["../../src/Toggle.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["composeEventHandlers","useControllableState","styled","View","React","context","jsx","NAME","ToggleFrame","name","render","variants","unstyled","false","size","alignItems","justifyContent","display","backgroundColor","borderColor","borderWidth","margin","hoverStyle","pressStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","zIndex","...size","val","tokens","width","height","defaultActiveStyle","true","focusStyle","defaultVariants","process","env","TAMAGUI_HEADLESS","accept","activeStyle","Toggle","forwardRef","props","forwardedRef","active","activeProp","defaultActive","onActiveChange","activeTheme","buttonProps","setActive","prop","onChange","defaultProp","theme","disabled","ref","onPress","prev"],"sources":["../../src/Toggle.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/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;
         });
       })