@tamagui/switch 2.7.7 → 3.0.0-beta.637.1

package/dist/cjs/StyledContext.cjs

@@ -1,35 +1,31 @@
+
 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
-  });
+	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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var StyledContext_exports = {};
-__export(StyledContext_exports, {
-  SwitchStyledContext: () => SwitchStyledContext
-});
+__export(StyledContext_exports, { SwitchStyledContext: () => SwitchStyledContext });
 module.exports = __toCommonJS(StyledContext_exports);
 var import_core = require("@tamagui/core");
 const SwitchStyledContext = (0, import_core.createStyledContext)({
-  active: false,
-  disabled: false,
-  frameWidth: void 0,
-  size: void 0,
-  unstyled: process.env.TAMAGUI_HEADLESS === "1"
-});
+	active: false,
+	disabled: false,
+	frameWidth: void 0,
+	size: void 0
+});

package/dist/cjs/StyledContext.native.cjs

@@ -0,0 +1,33 @@
+"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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var StyledContext_exports = {};
+__export(StyledContext_exports, { SwitchStyledContext: () => SwitchStyledContext });
+module.exports = __toCommonJS(StyledContext_exports);
+var import_core = require("@tamagui/core");
+var SwitchStyledContext = (0, import_core.createStyledContext)({
+	active: false,
+	disabled: false,
+	frameWidth: void 0,
+	size: void 0
+});

package/dist/cjs/StyledContext.native.js

@@ -1,38 +1,35 @@
 "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
-  });
+	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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var StyledContext_exports = {};
-__export(StyledContext_exports, {
-  SwitchStyledContext: () => SwitchStyledContext
-});
+__export(StyledContext_exports, { SwitchStyledContext: () => SwitchStyledContext });
 module.exports = __toCommonJS(StyledContext_exports);
 var import_core = require("@tamagui/core");
 var SwitchStyledContext = (0, import_core.createStyledContext)({
-  active: false,
-  disabled: false,
-  frameWidth: void 0,
-  size: void 0,
-  unstyled: process.env.TAMAGUI_HEADLESS === "1"
+	active: false,
+	disabled: false,
+	frameWidth: void 0,
+	size: void 0
 });
+
 //# sourceMappingURL=StyledContext.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","StyledContext_exports","__export","SwitchStyledContext","module","exports","import_core","require","createStyledContext","active","disabled","frameWidth","size","unstyled","process","env","TAMAGUI_HEADLESS"],"sources":["../../src/StyledContext.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,mBAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAT,YAAoC,CAAAK,qBAAA;AAE7B,IAAAK,WAAM,GAAAC,OAAA,gBAAsB;AAMhC,IACDJ,mBAAQ,OAAAG,WAAA,CAAAE,mBAAA;EACRC,MAAA,OAAU;EACVC,QAAA,OAAY;EACZC,UAAM;EACNC,IAAA,OAAU;EACXC,QAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,gBAAA","ignoreList":[]}
+{"version":3,"file":"StyledContext.native.js","names":[],"sources":["cjs/StyledContext.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 __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar StyledContext_exports = {};\n__export(StyledContext_exports, {\n  SwitchStyledContext: () => SwitchStyledContext\n});\nmodule.exports = __toCommonJS(StyledContext_exports);\nvar import_core = require(\"@tamagui/core\");\nvar SwitchStyledContext = (0, import_core.createStyledContext)({\n  active: false,\n  disabled: false,\n  frameWidth: void 0,\n  size: void 0\n});\n//# sourceMappingURL=StyledContext.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,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,wBAAwB,CAAC;AAC7B,SAAS,uBAAuB,EAC9B,2BAA2B,oBAC7B,CAAC;AACD,OAAO,UAAU,aAAa,qBAAqB;AACnD,IAAI,cAAc,QAAQ,eAAe;AACzC,IAAI,uBAAuB,GAAG,YAAY,qBAAqB;CAC7D,QAAQ;CACR,UAAU;CACV,YAAY,KAAK;CACjB,MAAM,KAAK;AACb,CAAC"}

package/dist/cjs/Switch.cjs

@@ -1,100 +1,154 @@
+
+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
-  });
+	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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+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 Switch_exports = {};
 __export(Switch_exports, {
-  SwitchFrame: () => SwitchFrame,
-  SwitchThumb: () => SwitchThumb
+	Switch: () => Switch,
+	SwitchFrame: () => SwitchFrame,
+	SwitchThumb: () => SwitchThumb,
+	SwitchThumbFrame: () => SwitchThumbFrame,
+	createSwitch: () => createSwitch
 });
 module.exports = __toCommonJS(Switch_exports);
 var import_core = require("@tamagui/core");
-var import_get_token = require("@tamagui/get-token");
-var import_stacks = require("@tamagui/stacks");
-const SwitchThumb = (0, import_core.styled)(import_stacks.YStack, {
-  name: "SwitchThumb",
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        backgroundColor: "$background",
-        borderRadius: 1e3
-      }
-    },
-    size: {
-      "...size": val => {
-        const size = getSwitchHeight(val);
-        return {
-          height: size,
-          width: size
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
+var import_switch_headless = require("@tamagui/switch-headless");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var React = __toESM(require("react"), 1);
+var import_StyledContext = require("./StyledContext.cjs");
+var import_useSwitchNative = require("./useSwitchNative.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const SwitchThumbFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "SwitchThumb",
+	context: import_StyledContext.SwitchStyledContext
 });
-const getSwitchHeight = val => Math.round((0, import_core.getVariableValue)((0, import_get_token.getSize)(val)) * 0.65);
-const getSwitchWidth = val => getSwitchHeight(val) * 2;
-const SwitchFrame = (0, import_core.styled)(import_stacks.YStack, {
-  name: "Switch",
-  render: "button",
-  tabIndex: 0,
-  variants: {
-    unstyled: {
-      false: {
-        borderRadius: 1e3,
-        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
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
-});
+const SwitchFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "Switch",
+	context: import_StyledContext.SwitchStyledContext,
+	render: "button",
+	tabIndex: 0
+});
+function createSwitch(createProps) {
+	const Frame = createProps.Frame ?? SwitchFrame;
+	const Thumb = createProps.Thumb ?? SwitchThumbFrame;
+	Frame.staticConfig.context = import_StyledContext.SwitchStyledContext;
+	Thumb.staticConfig.context = import_StyledContext.SwitchStyledContext;
+	const SwitchThumbComponent = (0, import_core.createStyledHOC)(Thumb, function SwitchThumb2(props, forwardedRef) {
+		const { size: sizeProp, activeStyle, theme, ...thumbProps } = props;
+		const styledContext = import_StyledContext.SwitchStyledContext.useStyledContext();
+		const { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;
+		const size = sizeProp ?? sizeContext ?? true;
+		const initialChecked = React.useRef(active).current;
+		const initialWidth = (0, import_core.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 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, {
+			ref: forwardedRef,
+			size,
+			alignSelf: initialChecked ? "flex-end" : "flex-start",
+			x,
+			onLayout: (0, import_core.composeEventHandlers)(props.onLayout, (event) => {
+				setThumbWidth(event.nativeEvent.layout.width);
+			}),
+			disabled,
+			...thumbProps,
+			...active && activeStyle
+		});
+		const themeName = theme ?? createProps.componentThemes?.thumb;
+		return themeName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
+			name: themeName,
+			children: thumb
+		}) : thumb;
+	});
+	const SwitchComponent = (0, import_core.createStyledHOC)(Frame, function Switch2(_props, forwardedRef) {
+		const { native, nativeProps, checked: checkedProp, defaultChecked, onCheckedChange, activeStyle, activeTheme, theme, ...props } = _props;
+		const [checked, setChecked] = (0, import_use_controllable_state.useControllableState)({
+			prop: checkedProp,
+			defaultProp: defaultChecked || false,
+			onChange: onCheckedChange,
+			transition: true
+		});
+		const styledContext = React.useContext(import_StyledContext.SwitchStyledContext.context);
+		const [frameWidth, setFrameInnerWidth] = React.useState(0);
+		const { switchProps, bubbleInput, switchRef } = (0, import_switch_headless.useSwitch)(props, [checked, setChecked], forwardedRef);
+		const nativeSwitch = (0, import_useSwitchNative.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) => {
+			const next = event.nativeEvent.layout.width;
+			if (next !== frameWidth) {
+				setFrameInnerWidth(next);
+			}
+		};
+		const frame = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Frame, {
+			ref: switchRef,
+			render: "button",
+			...import_core.isWeb && { type: "button" },
+			size,
+			...props,
+			...switchProps,
+			disabled,
+			...checked && activeStyle,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {
+				alignSelf: "stretch",
+				flex: 1,
+				onLayout: handleLayout,
+				children: props.children
+			})
+		});
+		const frameTheme = (checked ? activeTheme : void 0) ?? theme ?? createProps.componentThemes?.frame;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.SwitchStyledContext.Provider, {
+			size,
+			active: checked,
+			disabled,
+			frameWidth,
+			children: frameTheme ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
+				name: frameTheme,
+				children: frame
+			}) : frame
+		}), bubbleInput] });
+	}, { disableTheme: true });
+	return (0, import_core.withStaticProperties)(SwitchComponent, {
+		Frame,
+		Thumb: SwitchThumbComponent
+	});
+}
+const Switch = createSwitch({
+	Frame: SwitchFrame,
+	Thumb: SwitchThumbFrame
+});
+const SwitchThumb = Switch.Thumb;

package/dist/cjs/Switch.native.cjs

@@ -0,0 +1,163 @@
+"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 Switch_exports = {};
+__export(Switch_exports, {
+	Switch: () => Switch,
+	SwitchFrame: () => SwitchFrame,
+	SwitchThumb: () => SwitchThumb,
+	SwitchThumbFrame: () => SwitchThumbFrame,
+	createSwitch: () => createSwitch
+});
+module.exports = __toCommonJS(Switch_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tamagui/core");
+var import_switch_headless = require("@tamagui/switch-headless");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var React = __toESM(require("react"), 1);
+var import_StyledContext = require("./StyledContext.native.js");
+var import_useSwitchNative = require("./useSwitchNative.native.js");
+var SwitchThumbFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "SwitchThumb",
+	context: import_StyledContext.SwitchStyledContext
+});
+var SwitchFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "Switch",
+	context: import_StyledContext.SwitchStyledContext,
+	render: "button",
+	tabIndex: 0
+});
+function createSwitch(createProps) {
+	var _createProps_Frame;
+	var Frame = (_createProps_Frame = createProps.Frame) !== null && _createProps_Frame !== void 0 ? _createProps_Frame : SwitchFrame;
+	var _createProps_Thumb;
+	var Thumb = (_createProps_Thumb = createProps.Thumb) !== null && _createProps_Thumb !== void 0 ? _createProps_Thumb : SwitchThumbFrame;
+	Frame.staticConfig.context = import_StyledContext.SwitchStyledContext;
+	Thumb.staticConfig.context = import_StyledContext.SwitchStyledContext;
+	var SwitchThumbComponent = (0, import_core.createStyledHOC)(Thumb, function SwitchThumb2(props, forwardedRef) {
+		var _createProps_componentThemes;
+		var { size: sizeProp, activeStyle, theme, ...thumbProps } = props;
+		var styledContext = import_StyledContext.SwitchStyledContext.useStyledContext();
+		var { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;
+		var _ref;
+		var size = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : sizeContext) !== null && _ref !== void 0 ? _ref : true;
+		var initialChecked = React.useRef(active).current;
+		var initialWidth = (0, import_core.getVariableValue)(props.width, "size");
+		var [thumbWidth, setThumbWidth] = React.useState(typeof initialWidth === "number" ? initialWidth : 0);
+		var distance = frameWidth - thumbWidth;
+		var x = initialChecked ? active ? 0 : -distance : active ? distance : 0;
+		var thumb = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, {
+			ref: forwardedRef,
+			size,
+			alignSelf: initialChecked ? "flex-end" : "flex-start",
+			x,
+			onLayout: (0, import_core.composeEventHandlers)(props.onLayout, function(event) {
+				setThumbWidth(event.nativeEvent.layout.width);
+			}),
+			disabled,
+			...thumbProps,
+			...active && activeStyle
+		});
+		var themeName = theme !== null && theme !== void 0 ? theme : (_createProps_componentThemes = createProps.componentThemes) === null || _createProps_componentThemes === void 0 ? void 0 : _createProps_componentThemes.thumb;
+		return themeName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
+			name: themeName,
+			children: thumb
+		}) : thumb;
+	});
+	var SwitchComponent = (0, import_core.createStyledHOC)(Frame, function Switch2(_props, forwardedRef) {
+		var _createProps_componentThemes;
+		var { native, nativeProps, checked: checkedProp, defaultChecked, onCheckedChange, activeStyle, activeTheme, theme, ...props } = _props;
+		var [checked, setChecked] = (0, import_use_controllable_state.useControllableState)({
+			prop: checkedProp,
+			defaultProp: defaultChecked || false,
+			onChange: onCheckedChange,
+			transition: true
+		});
+		var styledContext = React.useContext(import_StyledContext.SwitchStyledContext.context);
+		var [frameWidth, setFrameInnerWidth] = React.useState(0);
+		var { switchProps, bubbleInput, switchRef } = (0, import_switch_headless.useSwitch)(props, [checked, setChecked], forwardedRef);
+		var nativeSwitch = (0, import_useSwitchNative.useSwitchNative)({
+			id: props.id,
+			disabled: props.disabled,
+			native,
+			nativeProps,
+			checked,
+			setChecked
+		});
+		if (nativeSwitch) {
+			return nativeSwitch;
+		}
+		var disabled = props.disabled;
+		var _styledContext_size, _ref;
+		var size = (_ref = (_styledContext_size = styledContext.size) !== null && _styledContext_size !== void 0 ? _styledContext_size : props.size) !== null && _ref !== void 0 ? _ref : true;
+		var handleLayout = function(event) {
+			var next = event.nativeEvent.layout.width;
+			if (next !== frameWidth) {
+				setFrameInnerWidth(next);
+			}
+		};
+		var frame = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Frame, {
+			ref: switchRef,
+			render: "button",
+			...import_core.isWeb && { type: "button" },
+			size,
+			...props,
+			...switchProps,
+			disabled,
+			...checked && activeStyle,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {
+				alignSelf: "stretch",
+				flex: 1,
+				onLayout: handleLayout,
+				children: props.children
+			})
+		});
+		var _ref1, _ref2;
+		var frameTheme = (_ref2 = (_ref1 = checked ? activeTheme : void 0) !== null && _ref1 !== void 0 ? _ref1 : theme) !== null && _ref2 !== void 0 ? _ref2 : (_createProps_componentThemes = createProps.componentThemes) === null || _createProps_componentThemes === void 0 ? void 0 : _createProps_componentThemes.frame;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.SwitchStyledContext.Provider, {
+			size,
+			active: checked,
+			disabled,
+			frameWidth,
+			children: frameTheme ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
+				name: frameTheme,
+				children: frame
+			}) : frame
+		}), bubbleInput] });
+	}, { disableTheme: true });
+	return (0, import_core.withStaticProperties)(SwitchComponent, {
+		Frame,
+		Thumb: SwitchThumbComponent
+	});
+}
+var Switch = createSwitch({
+	Frame: SwitchFrame,
+	Thumb: SwitchThumbFrame
+});
+var SwitchThumb = Switch.Thumb;