@tamagui/toggle-group 2.7.7 → 3.0.0-beta.1091.1

package/dist/cjs/index.cjs

@@ -3,28 +3,24 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
-__export(index_exports, {
-  useToggleGroupItem: () => import_context.useToggleGroupItem
-});
+__export(index_exports, { useToggleGroupItem: () => import_context.useToggleGroupItem });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./ToggleGroup.cjs"), module.exports);
-var import_context = require("./context.cjs");
+var import_context = require("./context.cjs");

package/dist/cjs/index.native.cjs

@@ -0,0 +1,28 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, { useToggleGroupItem: () => import_context.useToggleGroupItem });
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./ToggleGroup.native.js"), module.exports);
+var import_context = require("./context.native.js");

package/dist/cjs/index.native.js

@@ -5,29 +5,26 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
-__export(index_exports, {
-  useToggleGroupItem: () => import_context.useToggleGroupItem
-});
+__export(index_exports, { useToggleGroupItem: () => import_context.useToggleGroupItem });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./ToggleGroup.native.js"), module.exports);
 var import_context = require("./context.native.js");
+
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","__export","useToggleGroupItem","import_context","module","exports","__reExport","require"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,QAAA,CAAAD,aAAA;EAAAE,kBAAA,EAAAA,CAAA,KAAAC,cAAA,CAAAD;AAAA;AAAAE,MAAA,CAAAC,OAAA,GAAAV,YAAc,CAAAK,aAAA;AACdM,UAAA,CAAAN,aAAmC,EAAAO,OAAA,6BAAAH,MAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":[],"sources":["cjs/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\n__export(index_exports, {\n  useToggleGroupItem: () => import_context.useToggleGroupItem\n});\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./ToggleGroup\"), module.exports);\nvar import_context = require(\"./context\");\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,SAAS,eAAe,EACtB,0BAA0B,eAAe,mBAC3C,CAAC;AACD,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,yBAAe,GAAG,OAAO,OAAO;AAClE,IAAI,iBAAiB,QAAQ,qBAAW"}

package/dist/cjs/types.cjs

@@ -3,16 +3,14 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var types_exports = {};
-module.exports = __toCommonJS(types_exports);
+module.exports = __toCommonJS(types_exports);

package/dist/cjs/types.native.cjs

@@ -0,0 +1,18 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/dist/cjs/types.native.js

@@ -5,17 +5,16 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
+
 //# sourceMappingURL=types.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","types_exports"],"sources":["../../src/types.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA","ignoreList":[]}
+{"version":3,"file":"types.native.js","names":[],"sources":["cjs/types.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar types_exports = {};\nmodule.exports = __toCommonJS(types_exports);\n//# sourceMappingURL=types.js.map\n"],"mappings":";;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa"}

package/dist/esm/Toggle.mjs

@@ -1,113 +1,56 @@
+import { createRefComponent } from "@tamagui/compose-refs";
 import { composeEventHandlers } from "@tamagui/helpers";
+import { resolveSize } from "@tamagui/size";
 import { useControllableState } from "@tamagui/use-controllable-state";
-import { styled, View } from "@tamagui/web";
-import * as React from "react";
+import { View, styled } from "@tamagui/web";
 import { context } from "./context.mjs";
 import { jsx } from "react/jsx-runtime";
+
 const NAME = "Toggle";
 const 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
-        }
-      }
-    },
-    size: {
-      "...size": (val, {
-        tokens
-      }) => {
-        if (!val) return;
-        return {
-          width: tokens.size[val],
-          height: tokens.size[val]
-        };
-      },
-      ":number": val => ({
-        width: val,
-        height: val
-      })
-    },
-    defaultActiveStyle: {
-      true: {
-        backgroundColor: "$backgroundActive",
-        hoverStyle: {
-          backgroundColor: "$backgroundActive"
-        },
-        focusStyle: {
-          backgroundColor: "$backgroundActive"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
+	displayName: NAME,
+	render: "button",
+	context,
+	size: true,
+	alignItems: "center",
+	justifyContent: "center",
+	variants: {
+		size: styled.dynamic((val, env) => {
+			if (!val) return;
+			const { frame, controlHeight } = resolveSize(val, env);
+			const side = controlHeight + 2;
+			return {
+				width: side,
+				height: side,
+				borderRadius: frame.borderRadius
+			};
+		}),
+		defaultActiveStyle: { true: {} }
+	}
 });
-const Toggle = React.forwardRef(function Toggle2(props, forwardedRef) {
-  const {
-    active: activeProp,
-    activeStyle,
-    defaultActive = false,
-    onActiveChange,
-    activeTheme,
-    unstyled = false,
-    ...buttonProps
-  } = props;
-  const [active = false, setActive] = useControllableState({
-    prop: activeProp,
-    onChange: onActiveChange,
-    defaultProp: defaultActive
-  });
-  return /* @__PURE__ */jsx(ToggleFrame, {
-    theme: activeTheme ?? null,
-    "aria-pressed": active,
-    "data-state": active ? "on" : "off",
-    "data-disabled": props.disabled ? "" : void 0,
-    unstyled,
-    ...(active && !activeStyle && !unstyled && {
-      defaultActiveStyle: true
-    }),
-    ...buttonProps,
-    ...(active && activeStyle && {
-      ...activeStyle,
-      hoverStyle: activeStyle,
-      focusStyle: activeStyle
-    }),
-    ref: forwardedRef,
-    onPress: composeEventHandlers(props.onPress ?? void 0, () => {
-      if (!props.disabled) {
-        setActive(prev => !prev);
-      }
-    })
-  });
+const Toggle = createRefComponent(function Toggle2(props, forwardedRef) {
+	const { active: activeProp, activeStyle, defaultActive = false, onActiveChange, activeTheme, ...buttonProps } = props;
+	const [active = false, setActive] = useControllableState({
+		prop: activeProp,
+		onChange: onActiveChange,
+		defaultProp: defaultActive
+	});
+	return /* @__PURE__ */ jsx(ToggleFrame, {
+		theme: activeTheme ?? null,
+		"aria-pressed": active,
+		"data-state": active ? "on" : "off",
+		"data-disabled": props.disabled ? "" : void 0,
+		...active && !activeStyle && { defaultActiveStyle: true },
+		...buttonProps,
+		style: [buttonProps.style, active && activeStyle],
+		ref: forwardedRef,
+		onPress: composeEventHandlers(props.onPress ?? void 0, () => {
+			if (!props.disabled) {
+				setActive((prev) => !prev);
+			}
+		})
+	});
 });
+
 export { Toggle, ToggleFrame };
 //# sourceMappingURL=Toggle.mjs.map

package/dist/esm/Toggle.mjs.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"Toggle.js","names":[],"sources":["esm/Toggle.js"],"sourcesContent":["import { createRefComponent } from \"@tamagui/compose-refs\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport { resolveSize } from \"@tamagui/size\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport { styled, View } from \"@tamagui/web\";\nimport { context } from \"./context\";\nimport { jsx } from \"react/jsx-runtime\";\nconst NAME = \"Toggle\";\nconst ToggleFrame = styled(View, {\n  displayName: NAME,\n  render: \"button\",\n  context,\n  size: true,\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  variants: {\n    size: styled.dynamic((val, env) => {\n      if (!val) return;\n      const { frame, controlHeight } = resolveSize(val, env);\n      const side = controlHeight + 2;\n      return {\n        width: side,\n        height: side,\n        borderRadius: frame.borderRadius\n      };\n    }),\n    defaultActiveStyle: {\n      true: {}\n    }\n  }\n});\nconst Toggle = createRefComponent(\n  function Toggle2(props, forwardedRef) {\n    const {\n      active: activeProp,\n      activeStyle,\n      defaultActive = false,\n      onActiveChange,\n      activeTheme,\n      ...buttonProps\n    } = props;\n    const [active = false, setActive] = useControllableState({\n      prop: activeProp,\n      onChange: onActiveChange,\n      defaultProp: defaultActive\n    });\n    return /* @__PURE__ */ jsx(\n      ToggleFrame,\n      {\n        theme: activeTheme ?? null,\n        \"aria-pressed\": active,\n        \"data-state\": active ? \"on\" : \"off\",\n        \"data-disabled\": props.disabled ? \"\" : void 0,\n        ...active && !activeStyle && { defaultActiveStyle: true },\n        ...buttonProps,\n        style: [buttonProps.style, active && activeStyle],\n        ref: forwardedRef,\n        onPress: composeEventHandlers(props.onPress ?? void 0, () => {\n          if (!props.disabled) {\n            setActive((prev) => !prev);\n          }\n        })\n      }\n    );\n  }\n);\nexport {\n  Toggle,\n  ToggleFrame\n};\n//# sourceMappingURL=Toggle.js.map\n"],"mappings":";;;;;;;;;AAOA,MAAM,OAAO;AACb,MAAM,cAAc,OAAO,MAAM;CAC/B,aAAa;CACb,QAAQ;CACR;CACA,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM,OAAO,SAAS,KAAK,QAAQ;GACjC,IAAI,CAAC,KAAK;GACV,MAAM,EAAE,OAAO,kBAAkB,YAAY,KAAK,GAAG;GACrD,MAAM,OAAO,gBAAgB;GAC7B,OAAO;IACL,OAAO;IACP,QAAQ;IACR,cAAc,MAAM;GACtB;EACF,CAAC;EACD,oBAAoB,EAClB,MAAM,CAAC,EACT;CACF;AACF,CAAC;AACD,MAAM,SAAS,mBACb,SAAS,QAAQ,OAAO,cAAc;CACpC,MAAM,EACJ,QAAQ,YACR,aACA,gBAAgB,OAChB,gBACA,aACA,GAAG,gBACD;CACJ,MAAM,CAAC,SAAS,OAAO,aAAa,qBAAqB;EACvD,MAAM;EACN,UAAU;EACV,aAAa;CACf,CAAC;CACD,OAAuB,oBACrB,aACA;EACE,OAAO,eAAe;EACtB,gBAAgB;EAChB,cAAc,SAAS,OAAO;EAC9B,iBAAiB,MAAM,WAAW,KAAK,KAAK;EAC5C,GAAG,UAAU,CAAC,eAAe,EAAE,oBAAoB,KAAK;EACxD,GAAG;EACH,OAAO,CAAC,YAAY,OAAO,UAAU,WAAW;EAChD,KAAK;EACL,SAAS,qBAAqB,MAAM,WAAW,KAAK,SAAS;GAC3D,IAAI,CAAC,MAAM,UAAU;IACnB,WAAW,SAAS,CAAC,IAAI;GAC3B;EACF,CAAC;CACH,CACF;AACF,CACF"}

package/dist/esm/Toggle.native.js

@@ -1,123 +1,60 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { createRefComponent } from "@tamagui/compose-refs";
 import { composeEventHandlers } from "@tamagui/helpers";
+import { resolveSize } from "@tamagui/size";
 import { useControllableState } from "@tamagui/use-controllable-state";
-import { styled, View } from "@tamagui/web";
-import * as React from "react";
+import { View, styled } from "@tamagui/web";
+import "react";
 import { context } from "./context.native.js";
+
 var NAME = "Toggle";
 var 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
-        }
-      }
-    },
-    size: {
-      "...size": function (val, param) {
-        var {
-          tokens
-        } = param;
-        if (!val) return;
-        return {
-          width: tokens.size[val],
-          height: tokens.size[val]
-        };
-      },
-      ":number": function (val) {
-        return {
-          width: val,
-          height: val
-        };
-      }
-    },
-    defaultActiveStyle: {
-      true: {
-        backgroundColor: "$backgroundActive",
-        hoverStyle: {
-          backgroundColor: "$backgroundActive"
-        },
-        focusStyle: {
-          backgroundColor: "$backgroundActive"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
+	displayName: NAME,
+	render: "button",
+	context,
+	size: true,
+	alignItems: "center",
+	justifyContent: "center",
+	variants: {
+		size: styled.dynamic(function(val, env) {
+			if (!val) return;
+			var { frame, controlHeight } = resolveSize(val, env);
+			var side = controlHeight + 2;
+			return {
+				width: side,
+				height: side,
+				borderRadius: frame.borderRadius
+			};
+		}),
+		defaultActiveStyle: { true: {} }
+	}
 });
-var Toggle = /* @__PURE__ */React.forwardRef(function Toggle2(props, forwardedRef) {
-  var {
-    active: activeProp,
-    activeStyle,
-    defaultActive = false,
-    onActiveChange,
-    activeTheme,
-    unstyled = false,
-    ...buttonProps
-  } = props;
-  var [active = false, setActive] = useControllableState({
-    prop: activeProp,
-    onChange: onActiveChange,
-    defaultProp: defaultActive
-  });
-  var _props_onPress;
-  return /* @__PURE__ */_jsx(ToggleFrame, {
-    theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,
-    "aria-pressed": active,
-    "data-state": active ? "on" : "off",
-    "data-disabled": props.disabled ? "" : void 0,
-    unstyled,
-    ...(active && !activeStyle && !unstyled && {
-      defaultActiveStyle: true
-    }),
-    ...buttonProps,
-    // spread activeStyle after buttonProps so it wins when active: a styled()
-    // variant (e.g. a resting `backgroundColor`) forwards that value as a plain
-    // prop into buttonProps, which would otherwise clobber the activeStyle merge
-    // on overlapping keys and leave the active item stuck at its resting style.
-    ...(active && activeStyle && {
-      ...activeStyle,
-      hoverStyle: activeStyle,
-      focusStyle: activeStyle
-    }),
-    ref: forwardedRef,
-    onPress: composeEventHandlers((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function () {
-      if (!props.disabled) {
-        setActive(function (prev) {
-          return !prev;
-        });
-      }
-    })
-  });
+var Toggle = createRefComponent(function Toggle2(props, forwardedRef) {
+	var { active: activeProp, activeStyle, defaultActive = false, onActiveChange, activeTheme, ...buttonProps } = props;
+	var [active = false, setActive] = useControllableState({
+		prop: activeProp,
+		onChange: onActiveChange,
+		defaultProp: defaultActive
+	});
+	var _props_onPress;
+	return /* @__PURE__ */ jsx(ToggleFrame, {
+		theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,
+		"aria-pressed": active,
+		"data-state": active ? "on" : "off",
+		"data-disabled": props.disabled ? "" : void 0,
+		...active && !activeStyle && { defaultActiveStyle: true },
+		...buttonProps,
+		style: [buttonProps.style, active && activeStyle],
+		ref: forwardedRef,
+		onPress: composeEventHandlers((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function() {
+			if (!props.disabled) {
+				setActive(function(prev) {
+					return !prev;
+				});
+			}
+		})
+	});
 });
+
 export { Toggle, ToggleFrame };
 //# sourceMappingURL=Toggle.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","composeEventHandlers","useControllableState","styled","View","React","context","NAME","ToggleFrame","name","render","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","Toggle","forwardRef","Toggle2","props","forwardedRef","active","activeProp","defaultActive","onActiveChange","activeTheme","buttonProps","setActive","prop","onChange","defaultProp","_props_onPress","theme","disabled","ref","onPress","prev"],"sources":["../../src/Toggle.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Toggle.native.js","names":[],"sources":["esm/Toggle.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { createRefComponent } from \"@tamagui/compose-refs\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport { resolveSize } from \"@tamagui/size\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport { styled, View } from \"@tamagui/web\";\nimport * as React from \"react\";\nimport { context } from \"./context\";\nvar NAME = \"Toggle\";\nvar ToggleFrame = styled(View, {\n  displayName: NAME,\n  render: \"button\",\n  context,\n  size: true,\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  variants: {\n    size: styled.dynamic(function(val, env) {\n      if (!val) return;\n      var { frame, controlHeight } = resolveSize(val, env);\n      var side = controlHeight + 2;\n      return {\n        width: side,\n        height: side,\n        borderRadius: frame.borderRadius\n      };\n    }),\n    defaultActiveStyle: {\n      true: {}\n    }\n  }\n});\nvar Toggle = createRefComponent(function Toggle2(props, forwardedRef) {\n  var { active: activeProp, activeStyle, defaultActive = false, onActiveChange, activeTheme, ...buttonProps } = props;\n  var [active = false, setActive] = useControllableState({\n    prop: activeProp,\n    onChange: onActiveChange,\n    defaultProp: defaultActive\n  });\n  var _props_onPress;\n  return /* @__PURE__ */ _jsx(ToggleFrame, {\n    theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,\n    \"aria-pressed\": active,\n    \"data-state\": active ? \"on\" : \"off\",\n    \"data-disabled\": props.disabled ? \"\" : void 0,\n    ...active && !activeStyle && {\n      defaultActiveStyle: true\n    },\n    ...buttonProps,\n    style: [\n      buttonProps.style,\n      active && activeStyle\n    ],\n    ref: forwardedRef,\n    onPress: composeEventHandlers((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function() {\n      if (!props.disabled) {\n        setActive(function(prev) {\n          return !prev;\n        });\n      }\n    })\n  });\n});\nexport {\n  Toggle,\n  ToggleFrame\n};\n//# sourceMappingURL=Toggle.js.map\n"],"mappings":";;;;;;;;;;AAQA,IAAI,OAAO;AACX,IAAI,cAAc,OAAO,MAAM;CAC7B,aAAa;CACb,QAAQ;CACR;CACA,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM,OAAO,QAAQ,SAAS,KAAK,KAAK;GACtC,IAAI,CAAC,KAAK;GACV,IAAI,EAAE,OAAO,kBAAkB,YAAY,KAAK,GAAG;GACnD,IAAI,OAAO,gBAAgB;GAC3B,OAAO;IACL,OAAO;IACP,QAAQ;IACR,cAAc,MAAM;GACtB;EACF,CAAC;EACD,oBAAoB,EAClB,MAAM,CAAC,EACT;CACF;AACF,CAAC;AACD,IAAI,SAAS,mBAAmB,SAAS,QAAQ,OAAO,cAAc;CACpE,IAAI,EAAE,QAAQ,YAAY,aAAa,gBAAgB,OAAO,gBAAgB,aAAa,GAAG,gBAAgB;CAC9G,IAAI,CAAC,SAAS,OAAO,aAAa,qBAAqB;EACrD,MAAM;EACN,UAAU;EACV,aAAa;CACf,CAAC;CACD,IAAI;CACJ,OAAuB,oBAAK,aAAa;EACvC,OAAO,gBAAgB,QAAQ,gBAAgB,KAAK,IAAI,cAAc;EACtE,gBAAgB;EAChB,cAAc,SAAS,OAAO;EAC9B,iBAAiB,MAAM,WAAW,KAAK,KAAK;EAC5C,GAAG,UAAU,CAAC,eAAe,EAC3B,oBAAoB,KACtB;EACA,GAAG;EACH,OAAO,CACL,YAAY,OACZ,UAAU,WACZ;EACA,KAAK;EACL,SAAS,sBAAsB,iBAAiB,MAAM,aAAa,QAAQ,mBAAmB,KAAK,IAAI,iBAAiB,KAAK,GAAG,WAAW;GACzI,IAAI,CAAC,MAAM,UAAU;IACnB,UAAU,SAAS,MAAM;KACvB,OAAO,CAAC;IACV,CAAC;GACH;EACF,CAAC;CACH,CAAC;AACH,CAAC"}