@tamagui/switch 2.7.7 → 3.0.0-beta.1093.1

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.native.js","names":[],"sources":["jsx/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/jsx/useSwitchNative.mjs

@@ -1,5 +1,6 @@
 function useSwitchNative(_props) {
-  return null;
+	return null;
 }
+
 export { useSwitchNative };
 //# sourceMappingURL=useSwitchNative.mjs.map

package/dist/jsx/useSwitchNative.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useSwitchNative","_props"],"sources":["../../src/useSwitchNative.tsx"],"sourcesContent":[null],"mappings":"AAKO,SAASA,gBAAgBC,MAAA,EAAsD;EACpF,OAAO;AACT","ignoreList":[]}
+{"version":3,"file":"useSwitchNative.js","names":[],"sources":["jsx/useSwitchNative.js"],"sourcesContent":["function useSwitchNative(_props) {\n  return null;\n}\nexport {\n  useSwitchNative\n};\n//# sourceMappingURL=useSwitchNative.js.map\n"],"mappings":";AAAA,SAAS,gBAAgB,QAAQ;CAC/B,OAAO;AACT"}

package/dist/jsx/useSwitchNative.native.cjs

@@ -0,0 +1,64 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSwitchNative_native_exports = {};
+__export(useSwitchNative_native_exports, { useSwitchNative: () => useSwitchNative });
+module.exports = __toCommonJS(useSwitchNative_native_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tamagui/core");
+var import_focusable = require("@tamagui/focusable");
+var React = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+function useSwitchNative(props) {
+	var { id, disabled, native, nativeProps, checked, setChecked } = props;
+	React.useEffect(function() {
+		if (!id) return;
+		if (disabled) return;
+		return (0, import_focusable.registerFocusable)(id, {
+			focusAndSelect: function() {
+				setChecked(function(value) {
+					return !value;
+				});
+			},
+			focus: function() {}
+		});
+	}, [
+		id,
+		disabled,
+		setChecked
+	]);
+	var renderNative = (0, import_core.shouldRenderNativePlatform)(native);
+	if (renderNative === "android" || renderNative === "ios") {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Switch, {
+			value: checked,
+			onValueChange: setChecked,
+			...nativeProps
+		});
+	}
+	return null;
+}

package/dist/jsx/useSwitchNative.native.js

@@ -7,36 +7,27 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useSwitchNative_native_exports = {};
-__export(useSwitchNative_native_exports, {
-  useSwitchNative: () => useSwitchNative
-});
+__export(useSwitchNative_native_exports, { useSwitchNative: () => useSwitchNative });
 module.exports = __toCommonJS(useSwitchNative_native_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_core = require("@tamagui/core");
@@ -44,34 +35,32 @@ var import_focusable = require("@tamagui/focusable");
 var React = __toESM(require("react"), 1);
 var import_react_native = require("react-native");
 function useSwitchNative(props) {
-  var {
-    id,
-    disabled,
-    native,
-    nativeProps,
-    checked,
-    setChecked
-  } = props;
-  React.useEffect(function () {
-    if (!id) return;
-    if (disabled) return;
-    return (0, import_focusable.registerFocusable)(id, {
-      focusAndSelect: function () {
-        setChecked(function (value) {
-          return !value;
-        });
-      },
-      focus: function () {}
-    });
-  }, [id, disabled, setChecked]);
-  var renderNative = (0, import_core.shouldRenderNativePlatform)(native);
-  if (renderNative === "android" || renderNative === "ios") {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Switch, {
-      value: checked,
-      onValueChange: setChecked,
-      ...nativeProps
-    });
-  }
-  return null;
+	var { id, disabled, native, nativeProps, checked, setChecked } = props;
+	React.useEffect(function() {
+		if (!id) return;
+		if (disabled) return;
+		return (0, import_focusable.registerFocusable)(id, {
+			focusAndSelect: function() {
+				setChecked(function(value) {
+					return !value;
+				});
+			},
+			focus: function() {}
+		});
+	}, [
+		id,
+		disabled,
+		setChecked
+	]);
+	var renderNative = (0, import_core.shouldRenderNativePlatform)(native);
+	if (renderNative === "android" || renderNative === "ios") {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Switch, {
+			value: checked,
+			onValueChange: setChecked,
+			...nativeProps
+		});
+	}
+	return null;
 }
+
 //# sourceMappingURL=useSwitchNative.native.js.map

package/dist/jsx/useSwitchNative.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSwitchNative_native_exports","__export","useSwitchNative","module","exports","__toCommonJS","import_jsx_runtime","require","import_core","import_focusable","React","__toESM","import_react_native","props","id","disabled","native","nativeProps","checked","setChecked","useEffect","registerFocusable","focusAndSelect","value","focus","renderNative","shouldRenderNativePlatform","jsx","Switch","onValueChange"],"sources":["../../src/useSwitchNative.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,8BAAA;AAAAC,QAAA,CAAAD,8BAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAL,8BAAA;AAAA,IAAAM,kBAAA,GAA4BC,OAAA;AAC5B,IAAAC,WAAA,GAA2CD,OAAA;AAC3C,IAAAE,gBAAA,GAAkCF,OAAA;AAClC,IAAAG,KAAA,GAAuBC,OAAA,CAAAJ,OAAA;AACvB,IAAAK,mBAAA,GAAuCL,OAAA;AAG5B,SAASL,gBAAgBW,KAAA,EAAO;EACvC,IAAI;IAAEC,EAAA;IAAIC,QAAA;IAAUC,MAAA;IAAQC,WAAA;IAAaC,OAAA;IAASC;EAAW,IAAIN,KAAA;EACjEH,KAAA,CAAMU,SAAA,CAAU,YAAW;IACvB,IAAI,CAACN,EAAA,EAAI;IACT,IAAIC,QAAA,EAAU;IACd,WAAON,gBAAA,CAAAY,iBAAA,EAAkBP,EAAA,EAAI;MACzBQ,cAAA,EAAgB,SAAAA,CAAA,EAAW;QACvBH,UAAA,CAAW,UAASI,KAAA,EAAO;UACvB,OAAO,CAACA,KAAA;QACZ,CAAC;MACL;MACAC,KAAA,EAAO,SAAAA,CAAA,EAAW,CAAC;IACvB,CAAC;EACL,GAAG,CACCV,EAAA,EACAC,QAAA,EACAI,UAAA,CACH;EACD,IAAIM,YAAA,OAAejB,WAAA,CAAAkB,0BAAA,EAA2BV,MAAM;EACpD,IAAIS,YAAA,KAAiB,aAAaA,YAAA,KAAiB,OAAO;IACtD,OAAqB,mBAAAnB,kBAAA,CAAAqB,GAAA,EAAKf,mBAAA,CAAAgB,MAAA,EAAc;MACpCL,KAAA,EAAOL,OAAA;MACPW,aAAA,EAAeV,UAAA;MACf,GAAGF;IACP,CAAC;EACL;EACA,OAAO;AACX","ignoreList":[]}
+{"version":3,"file":"useSwitchNative.native.js","names":[],"sources":["jsx/useSwitchNative.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n  // If the importer is in node compatibility mode or this is not an ESM\n  // file that has been converted to a CommonJS file using a Babel-\n  // compatible transform (i.e. \"__esModule\" has not been set), then set\n  // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n  isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n  mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar useSwitchNative_native_exports = {};\n__export(useSwitchNative_native_exports, {\n  useSwitchNative: () => useSwitchNative\n});\nmodule.exports = __toCommonJS(useSwitchNative_native_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_core = require(\"@tamagui/core\");\nvar import_focusable = require(\"@tamagui/focusable\");\nvar React = __toESM(require(\"react\"), 1);\nvar import_react_native = require(\"react-native\");\nfunction useSwitchNative(props) {\n  var { id, disabled, native, nativeProps, checked, setChecked } = props;\n  React.useEffect(function() {\n    if (!id) return;\n    if (disabled) return;\n    return (0, import_focusable.registerFocusable)(id, {\n      focusAndSelect: function() {\n        setChecked(function(value) {\n          return !value;\n        });\n      },\n      focus: function() {\n      }\n    });\n  }, [\n    id,\n    disabled,\n    setChecked\n  ]);\n  var renderNative = (0, import_core.shouldRenderNativePlatform)(native);\n  if (renderNative === \"android\" || renderNative === \"ios\") {\n    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Switch, {\n      value: checked,\n      onValueChange: setChecked,\n      ...nativeProps\n    });\n  }\n  return null;\n}\n//# sourceMappingURL=useSwitchNative.native.js.map\n"],"mappings":";;;AACA,IAAI,WAAW,OAAO;AACtB,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO;AAC1B,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,WAAW,KAAK,YAAY,YAAY,SAAS,OAAO,OAAO,SAAS,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,YAKnG,cAAc,CAAC,OAAO,CAAC,IAAI,aAAa,UAAU,QAAQ,WAAW;CAAE,OAAO;CAAK,YAAY;AAAK,CAAC,IAAI,QACzG,GACF;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,iCAAiC,CAAC;AACtC,SAAS,gCAAgC,EACvC,uBAAuB,gBACzB,CAAC;AACD,OAAO,UAAU,aAAa,8BAA8B;AAC5D,IAAI,qBAAqB,QAAQ,mBAAmB;AACpD,IAAI,cAAc,QAAQ,eAAe;AACzC,IAAI,mBAAmB,QAAQ,oBAAoB;AACnD,IAAI,QAAQ,QAAQ,QAAQ,OAAO,GAAG,CAAC;AACvC,IAAI,sBAAsB,QAAQ,cAAc;AAChD,SAAS,gBAAgB,OAAO;CAC9B,IAAI,EAAE,IAAI,UAAU,QAAQ,aAAa,SAAS,eAAe;CACjE,MAAM,UAAU,WAAW;EACzB,IAAI,CAAC,IAAI;EACT,IAAI,UAAU;EACd,QAAQ,GAAG,iBAAiB,kBAAiB,CAAE,IAAI;GACjD,gBAAgB,WAAW;IACzB,WAAW,SAAS,OAAO;KACzB,OAAO,CAAC;IACV,CAAC;GACH;GACA,OAAO,WAAW,CAClB;EACF,CAAC;CACH,GAAG;EACD;EACA;EACA;CACF,CAAC;CACD,IAAI,gBAAgB,GAAG,YAAY,2BAA0B,CAAE,MAAM;CACrE,IAAI,iBAAiB,aAAa,iBAAiB,OAAO;EACxD,OAAuB,iBAAC,GAAG,mBAAmB,IAAG,CAAE,oBAAoB,QAAQ;GAC7E,OAAO;GACP,eAAe;GACf,GAAG;EACL,CAAC;CACH;CACA,OAAO;AACT"}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tamagui/switch",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.1093.1",
+  "license": "MIT",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -34,22 +35,16 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "2.7.7",
-    "@tamagui/constants": "2.7.7",
-    "@tamagui/core": "2.7.7",
-    "@tamagui/focusable": "2.7.7",
-    "@tamagui/get-token": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/label": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/switch-headless": "2.7.7",
-    "@tamagui/use-controllable-state": "2.7.7",
-    "@tamagui/use-previous": "2.7.7"
+    "@tamagui/core": "3.0.0-beta.1093.1",
+    "@tamagui/focusable": "3.0.0-beta.1093.1",
+    "@tamagui/react-native-types": "3.0.0-beta.1093.1",
+    "@tamagui/switch-headless": "3.0.0-beta.1093.1",
+    "@tamagui/use-controllable-state": "3.0.0-beta.1093.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
-    "react": ">=19",
-    "react-native": "0.83.2"
+    "@tamagui/build": "3.0.0-beta.1093.1",
+    "react": "19.2.3",
+    "react-native": "0.86.2"
   },
   "peerDependencies": {
     "react": ">=19"

package/src/StyledContext.tsx

@@ -5,12 +5,10 @@ export const SwitchStyledContext = createStyledContext<{
   active?: boolean
   disabled?: boolean
   frameWidth?: number
-  size?: SizeTokens
-  unstyled?: boolean
+  size?: SizeTokens | number | true
 }>({
   active: false,
   disabled: false,
   frameWidth: undefined,
   size: undefined,
-  unstyled: process.env.TAMAGUI_HEADLESS === '1',
 })

package/src/Switch.tsx

@@ -1,91 +1,192 @@
-import type { SizeTokens } from '@tamagui/core'
-import { getVariableValue, styled } from '@tamagui/core'
-import { getSize } from '@tamagui/get-token'
-import { YStack } from '@tamagui/stacks'
-
-export const SwitchThumb = styled(
-  YStack,
-  {
-    name: 'SwitchThumb',
-
-    variants: {
-      unstyled: {
-        false: {
-          size: '$true',
-          backgroundColor: '$background',
-          borderRadius: 1000,
-        },
-      },
-
-      size: {
-        '...size': (val) => {
-          const size = getSwitchHeight(val)
-          return {
-            height: size,
-            width: size,
-          }
-        },
-      },
-    } as const,
-
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
-    },
-  },
-  {
-    accept: {
-      activeStyle: 'style',
-    } as const,
+import type { GetProps } from '@tamagui/core'
+import {
+  composeEventHandlers,
+  createStyledHOC,
+  getVariableValue,
+  isWeb,
+  styled,
+  Theme,
+  type ThemeProps,
+  View,
+  withStaticProperties,
+} from '@tamagui/core'
+import { useSwitch } from '@tamagui/switch-headless'
+import { useControllableState } from '@tamagui/use-controllable-state'
+import * as React from 'react'
+import type { LayoutChangeEvent } from '@tamagui/react-native-types'
+import { SwitchStyledContext } from './StyledContext'
+import type {
+  SwitchComponent as SwitchFrameComponent,
+  SwitchProps,
+  SwitchThumbComponent as SwitchThumbFrameComponent,
+  SwitchThumbProps,
+} from './types'
+import { useSwitchNative } from './useSwitchNative'
+
+export const SwitchThumbFrame = styled(View, {
+  displayName: 'SwitchThumb',
+  context: SwitchStyledContext,
+})
+
+export const SwitchFrame = styled(View, {
+  displayName: 'Switch',
+  context: SwitchStyledContext,
+  render: 'button',
+  tabIndex: 0,
+})
+
+export function createSwitch(createProps: {
+  Frame?: SwitchFrameComponent
+  Thumb?: SwitchThumbFrameComponent
+  componentThemes?: {
+    frame?: ThemeProps['name']
+    thumb?: ThemeProps['name']
   }
-)
-
-const getSwitchHeight = (val: SizeTokens) =>
-  Math.round(getVariableValue(getSize(val)) * 0.65)
-
-const getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2
-
-export const SwitchFrame = styled(
-  YStack,
-  {
-    name: 'Switch',
-    render: 'button',
-    tabIndex: 0,
-
-    variants: {
-      unstyled: {
-        false: {
-          borderRadius: 1000,
-          backgroundColor: '$background',
-
-          focusVisibleStyle: {
-            outlineColor: '$outlineColor',
-            outlineStyle: 'solid',
-            outlineWidth: 2,
-          },
-        },
-      },
-
-      size: {
-        '...size': (val, { props }) => {
-          if (props['unstyled']) return
-          const height = getSwitchHeight(val)
-          const width = getSwitchWidth(val)
-          return {
-            height,
-            minHeight: height,
-            width,
-          }
-        },
-      },
-    } as const,
-
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
+}) {
+  const Frame = (createProps.Frame ?? SwitchFrame) as typeof SwitchFrame
+  const Thumb = (createProps.Thumb ?? SwitchThumbFrame) as typeof SwitchThumbFrame
+
+  Frame.staticConfig.context = SwitchStyledContext
+  Thumb.staticConfig.context = SwitchStyledContext
+
+  const SwitchThumbComponent = createStyledHOC(
+    Thumb,
+    function SwitchThumb(
+      props: Omit<GetProps<typeof Thumb>, keyof SwitchThumbProps> & SwitchThumbProps,
+      forwardedRef
+    ) {
+      const { size: sizeProp, activeStyle, theme, ...thumbProps } = props
+      const styledContext = SwitchStyledContext.useStyledContext()
+      const { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext
+      const size = sizeProp ?? sizeContext ?? true
+      const initialChecked = React.useRef(active).current
+      const initialWidth = getVariableValue(props.width, 'size')
+      const [thumbWidth, setThumbWidth] = React.useState(
+        typeof initialWidth === 'number' ? initialWidth : 0
+      )
+      const distance = frameWidth - thumbWidth
+      const x = initialChecked ? (active ? 0 : -distance) : active ? distance : 0
+
+      const thumb = (
+        <Thumb
+          ref={forwardedRef}
+          size={size}
+          alignSelf={initialChecked ? 'flex-end' : 'flex-start'}
+          x={x}
+          onLayout={composeEventHandlers(props.onLayout, (event) => {
+            setThumbWidth(event.nativeEvent.layout.width)
+          })}
+          disabled={disabled}
+          {...thumbProps}
+          {...(active && activeStyle)}
+        />
+      )
+
+      const themeName = theme ?? createProps.componentThemes?.thumb
+      return themeName ? <Theme name={themeName}>{thumb}</Theme> : thumb
+    }
+  )
+
+  const SwitchComponent = createStyledHOC(
+    Frame,
+    function Switch(_props: SwitchProps, forwardedRef) {
+      const {
+        native,
+        nativeProps,
+        checked: checkedProp,
+        defaultChecked,
+        onCheckedChange,
+        activeStyle,
+        activeTheme,
+        theme,
+        ...props
+      } = _props
+      const [checked, setChecked] = useControllableState({
+        prop: checkedProp,
+        defaultProp: defaultChecked || false,
+        onChange: onCheckedChange,
+        transition: true,
+      })
+      const styledContext = React.useContext(SwitchStyledContext.context)
+      const [frameWidth, setFrameInnerWidth] = React.useState(0)
+      const { switchProps, bubbleInput, switchRef } = useSwitch(
+        props as any,
+        [checked, setChecked],
+        // @ts-ignore TODO tamagui react 19 type error
+        forwardedRef
+      )
+      const nativeSwitch = useSwitchNative({
+        id: props.id,
+        disabled: props.disabled,
+        native,
+        nativeProps,
+        checked,
+        setChecked,
+      })
+
+      if (nativeSwitch) {
+        return nativeSwitch
+      }
+
+      const disabled = props.disabled
+      const size = styledContext.size ?? props.size ?? true
+
+      const handleLayout = (event: LayoutChangeEvent) => {
+        const next = event.nativeEvent.layout.width
+        if (next !== frameWidth) {
+          setFrameInnerWidth(next)
+        }
+      }
+
+      const frame = (
+        <Frame
+          ref={switchRef}
+          render="button"
+          {...(isWeb && { type: 'button' })}
+          size={size}
+          {...props}
+          {...(switchProps as any)}
+          disabled={disabled}
+          {...(checked && activeStyle)}
+        >
+          <View alignSelf="stretch" flex={1} onLayout={handleLayout}>
+            {props.children}
+          </View>
+        </Frame>
+      )
+
+      const frameTheme =
+        (checked ? activeTheme : undefined) ?? theme ?? createProps.componentThemes?.frame
+
+      return (
+        <>
+          <SwitchStyledContext.Provider
+            size={size}
+            active={checked}
+            disabled={disabled}
+            frameWidth={frameWidth}
+          >
+            {frameTheme ? <Theme name={frameTheme}>{frame}</Theme> : frame}
+          </SwitchStyledContext.Provider>
+
+          {bubbleInput}
+        </>
+      )
     },
-  },
-  {
-    accept: {
-      activeStyle: 'style',
-    } as const,
-  }
-)
+    {
+      disableTheme: true,
+    }
+  )
+
+  return withStaticProperties(SwitchComponent, {
+    Frame,
+    Thumb: SwitchThumbComponent,
+  })
+}
+
+export const Switch = createSwitch({
+  Frame: SwitchFrame,
+  Thumb: SwitchThumbFrame,
+})
+
+export const SwitchThumb = Switch.Thumb

package/src/index.ts

@@ -1,24 +1,4 @@
-import { createSwitch } from './createSwitch'
-import { SwitchFrame, SwitchThumb } from './Switch'
-
-export * from './createSwitch'
 export * from './StyledContext'
 export * from './Switch'
 export * from './types'
 export { useSwitchNative } from './useSwitchNative'
-
-/**
- * @summary A component that displays a switch that can be used to toggle between two states.
- * @see — Docs https://tamagui.dev/ui/switch
- *
- * @example
- * ```tsx
- * <Switch id={id} size={props.size} defaultChecked={props.defaultChecked}>
- *  <Switch.Thumb transition="quicker" />
- * </Switch>
- * ```
- */
-export const Switch = createSwitch({
-  Frame: SwitchFrame,
-  Thumb: SwitchThumb,
-})

package/src/types.ts

@@ -1,11 +1,13 @@
 import type { GetProps, NativeValue, SizeTokens, ViewProps } from '@tamagui/core'
 import type { SwitchExtraProps as HeadlessSwitchExtraProps } from '@tamagui/switch-headless'
-import type { SwitchProps as NativeSwitchProps, ViewStyle } from 'react-native'
-import type { SwitchThumb } from './Switch'
+import type {
+  SwitchProps as NativeSwitchProps,
+  ViewStyle,
+} from '@tamagui/react-native-types'
+import type { SwitchThumbFrame } from './Switch'
 
 export type SwitchSharedProps = {
-  size?: SizeTokens | number
-  unstyled?: boolean
+  size?: SizeTokens | number | true
 }
 
 export type SwitchBaseProps = ViewProps & SwitchSharedProps
@@ -16,7 +18,7 @@ export type SwitchFrameActiveStyleProps = {
 }
 
 export type SwitchThumbActiveStyleProps = {
-  activeStyle?: GetProps<typeof SwitchThumb>
+  activeStyle?: GetProps<typeof SwitchThumbFrame>
 }
 
 export type SwitchExtraProps = HeadlessSwitchExtraProps & {
@@ -32,7 +34,6 @@ export type SwitchThumbProps = SwitchThumbBaseProps &
   SwitchSharedProps &
   SwitchThumbActiveStyleProps
 
-// loose types for createSwitch generics - actual components have stricter types
 export type SwitchComponent = (props: any) => any
 export type SwitchThumbComponent = (props: any) => any
 

package/types/StyledContext.d.ts

@@ -3,7 +3,6 @@ export declare const SwitchStyledContext: import("@tamagui/core").StyledContext<
     active?: boolean;
     disabled?: boolean;
     frameWidth?: number;
-    size?: SizeTokens;
-    unstyled?: boolean;
-}>;
+    size?: SizeTokens | number | true;
+}, "active" | "disabled" | "frameWidth" | "size">;
 //# sourceMappingURL=StyledContext.d.ts.map

package/types/StyledContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledContext.d.ts","sourceRoot":"","sources":["../src/StyledContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,eAAO,MAAM,mBAAmB;aACrB,OAAO;eACL,OAAO;iBACL,MAAM;WACZ,UAAU;eACN,OAAO;EAOlB,CAAA"}
+{"version":3,"file":"StyledContext.d.ts","sourceRoot":"","sources":["../src/StyledContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,eAAO,MAAM,mBAAmB;aACrB,OAAO;eACL,OAAO;iBACL,MAAM;WACZ,UAAU,GAAG,MAAM,GAAG,IAAI;iDAMjC,CAAA"}