@tamagui/switch 3.0.0-beta.1216.1 → 3.0.0-beta.1310.1

package/dist/jsx/Switch.mjs

@@ -1,4 +1,4 @@
-import { Theme, View, composeEventHandlers, createStyledHOC, getVariableValue, isWeb, styled, withStaticProperties } from "@tamagui/core";
+import { View, composeEventHandlers, createStyledHOC, getVariableValue, isWeb, styled, withStaticProperties } from "@tamagui/core";
 import { useSwitch } from "@tamagui/switch-headless";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
@@ -22,7 +22,7 @@ function createSwitch(createProps) {
 	Frame.staticConfig.context = SwitchStyledContext;
 	Thumb.staticConfig.context = SwitchStyledContext;
 	const SwitchThumbComponent = createStyledHOC(Thumb, function SwitchThumb2(props, forwardedRef) {
-		const { size: sizeProp, activeStyle, theme, ...thumbProps } = props;
+		const { size: sizeProp, activeStyle, ...thumbProps } = props;
 		const styledContext = SwitchStyledContext.useStyledContext();
 		const { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;
 		const size = sizeProp ?? sizeContext ?? true;
@@ -31,7 +31,7 @@ function createSwitch(createProps) {
 		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__ */ jsx(Thumb, {
+		return /* @__PURE__ */ jsx(Thumb, {
 			ref: forwardedRef,
 			size,
 			alignSelf: initialChecked ? "flex-end" : "flex-start",
@@ -43,14 +43,9 @@ function createSwitch(createProps) {
 			...thumbProps,
 			...active && activeStyle
 		});
-		const themeName = theme ?? createProps.componentThemes?.thumb;
-		return themeName ? /* @__PURE__ */ jsx(Theme, {
-			name: themeName,
-			children: thumb
-		}) : thumb;
 	});
 	const SwitchComponent = createStyledHOC(Frame, function Switch2(_props, forwardedRef) {
-		const { native, nativeProps, checked: checkedProp, defaultChecked, onCheckedChange, activeStyle, activeTheme, theme, ...props } = _props;
+		const { native, nativeProps, checked: checkedProp, defaultChecked, onCheckedChange, activeStyle, activeTheme, ...props } = _props;
 		const [checked, setChecked] = useControllableState({
 			prop: checkedProp,
 			defaultProp: defaultChecked || false,
@@ -79,34 +74,30 @@ function createSwitch(createProps) {
 				setFrameInnerWidth(next);
 			}
 		};
-		const frame = /* @__PURE__ */ jsx(Frame, {
-			ref: switchRef,
-			render: "button",
-			...isWeb && { type: "button" },
-			size,
-			...props,
-			...switchProps,
-			disabled,
-			...checked && activeStyle,
-			children: /* @__PURE__ */ jsx(View, {
-				alignSelf: "stretch",
-				flex: 1,
-				onLayout: handleLayout,
-				children: props.children
-			})
-		});
-		const frameTheme = (checked ? activeTheme : void 0) ?? theme ?? createProps.componentThemes?.frame;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SwitchStyledContext.Provider, {
 			size,
 			active: checked,
 			disabled,
 			frameWidth,
-			children: frameTheme ? /* @__PURE__ */ jsx(Theme, {
-				name: frameTheme,
-				children: frame
-			}) : frame
+			children: /* @__PURE__ */ jsx(Frame, {
+				ref: switchRef,
+				render: "button",
+				theme: checked ? activeTheme ?? createProps.activeTheme ?? null : null,
+				...isWeb && { type: "button" },
+				size,
+				...props,
+				...switchProps,
+				disabled,
+				...checked && activeStyle,
+				children: /* @__PURE__ */ jsx(View, {
+					alignSelf: "stretch",
+					flex: 1,
+					onLayout: handleLayout,
+					children: props.children
+				})
+			})
 		}), bubbleInput] });
-	}, { disableTheme: true });
+	});
 	return withStaticProperties(SwitchComponent, {
 		Frame,
 		Thumb: SwitchThumbComponent

package/dist/jsx/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["jsx/Switch.js"],"sourcesContent":["import {\n  composeEventHandlers,\n  createStyledHOC,\n  getVariableValue,\n  isWeb,\n  styled,\n  Theme,\n  View,\n  withStaticProperties\n} from \"@tamagui/core\";\nimport { useSwitch } from \"@tamagui/switch-headless\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport * as React from \"react\";\nimport { SwitchStyledContext } from \"./StyledContext\";\nimport { useSwitchNative } from \"./useSwitchNative\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nconst SwitchThumbFrame = styled(View, {\n  displayName: \"SwitchThumb\",\n  context: SwitchStyledContext\n});\nconst SwitchFrame = styled(View, {\n  displayName: \"Switch\",\n  context: SwitchStyledContext,\n  render: \"button\",\n  tabIndex: 0\n});\nfunction createSwitch(createProps) {\n  const Frame = createProps.Frame ?? SwitchFrame;\n  const Thumb = createProps.Thumb ?? SwitchThumbFrame;\n  Frame.staticConfig.context = SwitchStyledContext;\n  Thumb.staticConfig.context = SwitchStyledContext;\n  const SwitchThumbComponent = createStyledHOC(\n    Thumb,\n    function SwitchThumb2(props, forwardedRef) {\n      const { size: sizeProp, activeStyle, theme, ...thumbProps } = props;\n      const styledContext = SwitchStyledContext.useStyledContext();\n      const { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;\n      const size = sizeProp ?? sizeContext ?? true;\n      const initialChecked = React.useRef(active).current;\n      const initialWidth = getVariableValue(props.width, \"size\");\n      const [thumbWidth, setThumbWidth] = React.useState(\n        typeof initialWidth === \"number\" ? initialWidth : 0\n      );\n      const distance = frameWidth - thumbWidth;\n      const x = initialChecked ? active ? 0 : -distance : active ? distance : 0;\n      const thumb = /* @__PURE__ */ jsx(\n        Thumb,\n        {\n          ref: forwardedRef,\n          size,\n          alignSelf: initialChecked ? \"flex-end\" : \"flex-start\",\n          x,\n          onLayout: composeEventHandlers(props.onLayout, (event) => {\n            setThumbWidth(event.nativeEvent.layout.width);\n          }),\n          disabled,\n          ...thumbProps,\n          ...active && activeStyle\n        }\n      );\n      const themeName = theme ?? createProps.componentThemes?.thumb;\n      return themeName ? /* @__PURE__ */ jsx(Theme, { name: themeName, children: thumb }) : thumb;\n    }\n  );\n  const SwitchComponent = createStyledHOC(\n    Frame,\n    function Switch2(_props, forwardedRef) {\n      const {\n        native,\n        nativeProps,\n        checked: checkedProp,\n        defaultChecked,\n        onCheckedChange,\n        activeStyle,\n        activeTheme,\n        theme,\n        ...props\n      } = _props;\n      const [checked, setChecked] = useControllableState({\n        prop: checkedProp,\n        defaultProp: defaultChecked || false,\n        onChange: onCheckedChange,\n        transition: true\n      });\n      const styledContext = React.useContext(SwitchStyledContext.context);\n      const [frameWidth, setFrameInnerWidth] = React.useState(0);\n      const { switchProps, bubbleInput, switchRef } = useSwitch(\n        props,\n        [checked, setChecked],\n        // @ts-ignore TODO tamagui react 19 type error\n        forwardedRef\n      );\n      const nativeSwitch = useSwitchNative({\n        id: props.id,\n        disabled: props.disabled,\n        native,\n        nativeProps,\n        checked,\n        setChecked\n      });\n      if (nativeSwitch) {\n        return nativeSwitch;\n      }\n      const disabled = props.disabled;\n      const size = styledContext.size ?? props.size ?? true;\n      const handleLayout = (event) => {\n        const next = event.nativeEvent.layout.width;\n        if (next !== frameWidth) {\n          setFrameInnerWidth(next);\n        }\n      };\n      const frame = /* @__PURE__ */ jsx(\n        Frame,\n        {\n          ref: switchRef,\n          render: \"button\",\n          ...isWeb && { type: \"button\" },\n          size,\n          ...props,\n          ...switchProps,\n          disabled,\n          ...checked && activeStyle,\n          children: /* @__PURE__ */ jsx(View, { alignSelf: \"stretch\", flex: 1, onLayout: handleLayout, children: props.children })\n        }\n      );\n      const frameTheme = (checked ? activeTheme : void 0) ?? theme ?? createProps.componentThemes?.frame;\n      return /* @__PURE__ */ jsxs(Fragment, { children: [\n        /* @__PURE__ */ jsx(\n          SwitchStyledContext.Provider,\n          {\n            size,\n            active: checked,\n            disabled,\n            frameWidth,\n            children: frameTheme ? /* @__PURE__ */ jsx(Theme, { name: frameTheme, children: frame }) : frame\n          }\n        ),\n        bubbleInput\n      ] });\n    },\n    {\n      disableTheme: true\n    }\n  );\n  return withStaticProperties(SwitchComponent, {\n    Frame,\n    Thumb: SwitchThumbComponent\n  });\n}\nconst Switch = createSwitch({\n  Frame: SwitchFrame,\n  Thumb: SwitchThumbFrame\n});\nconst SwitchThumb = Switch.Thumb;\nexport {\n  Switch,\n  SwitchFrame,\n  SwitchThumb,\n  SwitchThumbFrame,\n  createSwitch\n};\n//# sourceMappingURL=Switch.js.map\n"],"mappings":";;;;;;;;;AAgBA,MAAM,mBAAmB,OAAO,MAAM;CACpC,aAAa;CACb,SAAS;AACX,CAAC;AACD,MAAM,cAAc,OAAO,MAAM;CAC/B,aAAa;CACb,SAAS;CACT,QAAQ;CACR,UAAU;AACZ,CAAC;AACD,SAAS,aAAa,aAAa;CACjC,MAAM,QAAQ,YAAY,SAAS;CACnC,MAAM,QAAQ,YAAY,SAAS;CACnC,MAAM,aAAa,UAAU;CAC7B,MAAM,aAAa,UAAU;CAC7B,MAAM,uBAAuB,gBAC3B,OACA,SAAS,aAAa,OAAO,cAAc;EACzC,MAAM,EAAE,MAAM,UAAU,aAAa,OAAO,GAAG,eAAe;EAC9D,MAAM,gBAAgB,oBAAoB,iBAAiB;EAC3D,MAAM,EAAE,MAAM,aAAa,QAAQ,UAAU,aAAa,MAAM;EAChE,MAAM,OAAO,YAAY,eAAe;EACxC,MAAM,iBAAiB,MAAM,OAAO,MAAM,CAAC,CAAC;EAC5C,MAAM,eAAe,iBAAiB,MAAM,OAAO,MAAM;EACzD,MAAM,CAAC,YAAY,iBAAiB,MAAM,SACxC,OAAO,iBAAiB,WAAW,eAAe,CACpD;EACA,MAAM,WAAW,aAAa;EAC9B,MAAM,IAAI,iBAAiB,SAAS,IAAI,CAAC,WAAW,SAAS,WAAW;EACxE,MAAM,QAAwB,oBAC5B,OACA;GACE,KAAK;GACL;GACA,WAAW,iBAAiB,aAAa;GACzC;GACA,UAAU,qBAAqB,MAAM,WAAW,UAAU;IACxD,cAAc,MAAM,YAAY,OAAO,KAAK;GAC9C,CAAC;GACD;GACA,GAAG;GACH,GAAG,UAAU;EACf,CACF;EACA,MAAM,YAAY,SAAS,YAAY,iBAAiB;EACxD,OAAO,YAA4B,oBAAI,OAAO;GAAE,MAAM;GAAW,UAAU;EAAM,CAAC,IAAI;CACxF,CACF;CACA,MAAM,kBAAkB,gBACtB,OACA,SAAS,QAAQ,QAAQ,cAAc;EACrC,MAAM,EACJ,QACA,aACA,SAAS,aACT,gBACA,iBACA,aACA,aACA,OACA,GAAG,UACD;EACJ,MAAM,CAAC,SAAS,cAAc,qBAAqB;GACjD,MAAM;GACN,aAAa,kBAAkB;GAC/B,UAAU;GACV,YAAY;EACd,CAAC;EACD,MAAM,gBAAgB,MAAM,WAAW,oBAAoB,OAAO;EAClE,MAAM,CAAC,YAAY,sBAAsB,MAAM,SAAS,CAAC;EACzD,MAAM,EAAE,aAAa,aAAa,cAAc,UAC9C,OACA,CAAC,SAAS,UAAU,GAEpB,YACF;EACA,MAAM,eAAe,gBAAgB;GACnC,IAAI,MAAM;GACV,UAAU,MAAM;GAChB;GACA;GACA;GACA;EACF,CAAC;EACD,IAAI,cAAc;GAChB,OAAO;EACT;EACA,MAAM,WAAW,MAAM;EACvB,MAAM,OAAO,cAAc,QAAQ,MAAM,QAAQ;EACjD,MAAM,gBAAgB,UAAU;GAC9B,MAAM,OAAO,MAAM,YAAY,OAAO;GACtC,IAAI,SAAS,YAAY;IACvB,mBAAmB,IAAI;GACzB;EACF;EACA,MAAM,QAAwB,oBAC5B,OACA;GACE,KAAK;GACL,QAAQ;GACR,GAAG,SAAS,EAAE,MAAM,SAAS;GAC7B;GACA,GAAG;GACH,GAAG;GACH;GACA,GAAG,WAAW;GACd,UAA0B,oBAAI,MAAM;IAAE,WAAW;IAAW,MAAM;IAAG,UAAU;IAAc,UAAU,MAAM;GAAS,CAAC;EACzH,CACF;EACA,MAAM,cAAc,UAAU,cAAc,KAAK,MAAM,SAAS,YAAY,iBAAiB;EAC7F,OAAuB,qBAAK,UAAU,EAAE,UAAU,CAChC,oBACd,oBAAoB,UACpB;GACE;GACA,QAAQ;GACR;GACA;GACA,UAAU,aAA6B,oBAAI,OAAO;IAAE,MAAM;IAAY,UAAU;GAAM,CAAC,IAAI;EAC7F,CACF,GACA,WACF,EAAE,CAAC;CACL,GACA,EACE,cAAc,KAChB,CACF;CACA,OAAO,qBAAqB,iBAAiB;EAC3C;EACA,OAAO;CACT,CAAC;AACH;AACA,MAAM,SAAS,aAAa;CAC1B,OAAO;CACP,OAAO;AACT,CAAC;AACD,MAAM,cAAc,OAAO"}
+{"version":3,"file":"Switch.js","names":[],"sources":["jsx/Switch.js"],"sourcesContent":["import {\n  composeEventHandlers,\n  createStyledHOC,\n  getVariableValue,\n  isWeb,\n  styled,\n  View,\n  withStaticProperties\n} from \"@tamagui/core\";\nimport { useSwitch } from \"@tamagui/switch-headless\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport * as React from \"react\";\nimport { SwitchStyledContext } from \"./StyledContext\";\nimport { useSwitchNative } from \"./useSwitchNative\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nconst SwitchThumbFrame = styled(View, {\n  displayName: \"SwitchThumb\",\n  context: SwitchStyledContext\n});\nconst SwitchFrame = styled(View, {\n  displayName: \"Switch\",\n  context: SwitchStyledContext,\n  render: \"button\",\n  tabIndex: 0\n});\nfunction createSwitch(createProps) {\n  const Frame = createProps.Frame ?? SwitchFrame;\n  const Thumb = createProps.Thumb ?? SwitchThumbFrame;\n  Frame.staticConfig.context = SwitchStyledContext;\n  Thumb.staticConfig.context = SwitchStyledContext;\n  const SwitchThumbComponent = createStyledHOC(\n    Thumb,\n    function SwitchThumb2(props, forwardedRef) {\n      const { size: sizeProp, activeStyle, ...thumbProps } = props;\n      const styledContext = SwitchStyledContext.useStyledContext();\n      const { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;\n      const size = sizeProp ?? sizeContext ?? true;\n      const initialChecked = React.useRef(active).current;\n      const initialWidth = getVariableValue(props.width, \"size\");\n      const [thumbWidth, setThumbWidth] = React.useState(\n        typeof initialWidth === \"number\" ? initialWidth : 0\n      );\n      const distance = frameWidth - thumbWidth;\n      const x = initialChecked ? active ? 0 : -distance : active ? distance : 0;\n      return /* @__PURE__ */ jsx(\n        Thumb,\n        {\n          ref: forwardedRef,\n          size,\n          alignSelf: initialChecked ? \"flex-end\" : \"flex-start\",\n          x,\n          onLayout: composeEventHandlers(props.onLayout, (event) => {\n            setThumbWidth(event.nativeEvent.layout.width);\n          }),\n          disabled,\n          ...thumbProps,\n          ...active && activeStyle\n        }\n      );\n    }\n  );\n  const SwitchComponent = createStyledHOC(\n    Frame,\n    function Switch2(_props, forwardedRef) {\n      const {\n        native,\n        nativeProps,\n        checked: checkedProp,\n        defaultChecked,\n        onCheckedChange,\n        activeStyle,\n        activeTheme,\n        ...props\n      } = _props;\n      const [checked, setChecked] = useControllableState({\n        prop: checkedProp,\n        defaultProp: defaultChecked || false,\n        onChange: onCheckedChange,\n        transition: true\n      });\n      const styledContext = React.useContext(SwitchStyledContext.context);\n      const [frameWidth, setFrameInnerWidth] = React.useState(0);\n      const { switchProps, bubbleInput, switchRef } = useSwitch(\n        props,\n        [checked, setChecked],\n        // @ts-ignore TODO tamagui react 19 type error\n        forwardedRef\n      );\n      const nativeSwitch = useSwitchNative({\n        id: props.id,\n        disabled: props.disabled,\n        native,\n        nativeProps,\n        checked,\n        setChecked\n      });\n      if (nativeSwitch) {\n        return nativeSwitch;\n      }\n      const disabled = props.disabled;\n      const size = styledContext.size ?? props.size ?? true;\n      const handleLayout = (event) => {\n        const next = event.nativeEvent.layout.width;\n        if (next !== frameWidth) {\n          setFrameInnerWidth(next);\n        }\n      };\n      return /* @__PURE__ */ jsxs(Fragment, { children: [\n        /* @__PURE__ */ jsx(\n          SwitchStyledContext.Provider,\n          {\n            size,\n            active: checked,\n            disabled,\n            frameWidth,\n            children: /* @__PURE__ */ jsx(\n              Frame,\n              {\n                ref: switchRef,\n                render: \"button\",\n                theme: checked ? activeTheme ?? createProps.activeTheme ?? null : null,\n                ...isWeb && { type: \"button\" },\n                size,\n                ...props,\n                ...switchProps,\n                disabled,\n                ...checked && activeStyle,\n                children: /* @__PURE__ */ jsx(View, { alignSelf: \"stretch\", flex: 1, onLayout: handleLayout, children: props.children })\n              }\n            )\n          }\n        ),\n        bubbleInput\n      ] });\n    }\n  );\n  return withStaticProperties(SwitchComponent, {\n    Frame,\n    Thumb: SwitchThumbComponent\n  });\n}\nconst Switch = createSwitch({\n  Frame: SwitchFrame,\n  Thumb: SwitchThumbFrame\n});\nconst SwitchThumb = Switch.Thumb;\nexport {\n  Switch,\n  SwitchFrame,\n  SwitchThumb,\n  SwitchThumbFrame,\n  createSwitch\n};\n//# sourceMappingURL=Switch.js.map\n"],"mappings":";;;;;;;;;AAeA,MAAM,mBAAmB,OAAO,MAAM;CACpC,aAAa;CACb,SAAS;AACX,CAAC;AACD,MAAM,cAAc,OAAO,MAAM;CAC/B,aAAa;CACb,SAAS;CACT,QAAQ;CACR,UAAU;AACZ,CAAC;AACD,SAAS,aAAa,aAAa;CACjC,MAAM,QAAQ,YAAY,SAAS;CACnC,MAAM,QAAQ,YAAY,SAAS;CACnC,MAAM,aAAa,UAAU;CAC7B,MAAM,aAAa,UAAU;CAC7B,MAAM,uBAAuB,gBAC3B,OACA,SAAS,aAAa,OAAO,cAAc;EACzC,MAAM,EAAE,MAAM,UAAU,aAAa,GAAG,eAAe;EACvD,MAAM,gBAAgB,oBAAoB,iBAAiB;EAC3D,MAAM,EAAE,MAAM,aAAa,QAAQ,UAAU,aAAa,MAAM;EAChE,MAAM,OAAO,YAAY,eAAe;EACxC,MAAM,iBAAiB,MAAM,OAAO,MAAM,CAAC,CAAC;EAC5C,MAAM,eAAe,iBAAiB,MAAM,OAAO,MAAM;EACzD,MAAM,CAAC,YAAY,iBAAiB,MAAM,SACxC,OAAO,iBAAiB,WAAW,eAAe,CACpD;EACA,MAAM,WAAW,aAAa;EAC9B,MAAM,IAAI,iBAAiB,SAAS,IAAI,CAAC,WAAW,SAAS,WAAW;EACxE,OAAuB,oBACrB,OACA;GACE,KAAK;GACL;GACA,WAAW,iBAAiB,aAAa;GACzC;GACA,UAAU,qBAAqB,MAAM,WAAW,UAAU;IACxD,cAAc,MAAM,YAAY,OAAO,KAAK;GAC9C,CAAC;GACD;GACA,GAAG;GACH,GAAG,UAAU;EACf,CACF;CACF,CACF;CACA,MAAM,kBAAkB,gBACtB,OACA,SAAS,QAAQ,QAAQ,cAAc;EACrC,MAAM,EACJ,QACA,aACA,SAAS,aACT,gBACA,iBACA,aACA,aACA,GAAG,UACD;EACJ,MAAM,CAAC,SAAS,cAAc,qBAAqB;GACjD,MAAM;GACN,aAAa,kBAAkB;GAC/B,UAAU;GACV,YAAY;EACd,CAAC;EACD,MAAM,gBAAgB,MAAM,WAAW,oBAAoB,OAAO;EAClE,MAAM,CAAC,YAAY,sBAAsB,MAAM,SAAS,CAAC;EACzD,MAAM,EAAE,aAAa,aAAa,cAAc,UAC9C,OACA,CAAC,SAAS,UAAU,GAEpB,YACF;EACA,MAAM,eAAe,gBAAgB;GACnC,IAAI,MAAM;GACV,UAAU,MAAM;GAChB;GACA;GACA;GACA;EACF,CAAC;EACD,IAAI,cAAc;GAChB,OAAO;EACT;EACA,MAAM,WAAW,MAAM;EACvB,MAAM,OAAO,cAAc,QAAQ,MAAM,QAAQ;EACjD,MAAM,gBAAgB,UAAU;GAC9B,MAAM,OAAO,MAAM,YAAY,OAAO;GACtC,IAAI,SAAS,YAAY;IACvB,mBAAmB,IAAI;GACzB;EACF;EACA,OAAuB,qBAAK,UAAU,EAAE,UAAU,CAChC,oBACd,oBAAoB,UACpB;GACE;GACA,QAAQ;GACR;GACA;GACA,UAA0B,oBACxB,OACA;IACE,KAAK;IACL,QAAQ;IACR,OAAO,UAAU,eAAe,YAAY,eAAe,OAAO;IAClE,GAAG,SAAS,EAAE,MAAM,SAAS;IAC7B;IACA,GAAG;IACH,GAAG;IACH;IACA,GAAG,WAAW;IACd,UAA0B,oBAAI,MAAM;KAAE,WAAW;KAAW,MAAM;KAAG,UAAU;KAAc,UAAU,MAAM;IAAS,CAAC;GACzH,CACF;EACF,CACF,GACA,WACF,EAAE,CAAC;CACL,CACF;CACA,OAAO,qBAAqB,iBAAiB;EAC3C;EACA,OAAO;CACT,CAAC;AACH;AACA,MAAM,SAAS,aAAa;CAC1B,OAAO;CACP,OAAO;AACT,CAAC;AACD,MAAM,cAAc,OAAO"}

package/dist/jsx/Switch.native.cjs

@@ -60,8 +60,7 @@ function createSwitch(createProps) {
 	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 { size: sizeProp, activeStyle, ...thumbProps } = props;
 		var styledContext = import_StyledContext.SwitchStyledContext.useStyledContext();
 		var { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;
 		var _ref;
@@ -71,7 +70,7 @@ function createSwitch(createProps) {
 		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, {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, {
 			ref: forwardedRef,
 			size,
 			alignSelf: initialChecked ? "flex-end" : "flex-start",
@@ -83,15 +82,9 @@ function createSwitch(createProps) {
 			...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 { native, nativeProps, checked: checkedProp, defaultChecked, onCheckedChange, activeStyle, activeTheme, ...props } = _props;
 		var [checked, setChecked] = (0, import_use_controllable_state.useControllableState)({
 			prop: checkedProp,
 			defaultProp: defaultChecked || false,
@@ -121,35 +114,31 @@ function createSwitch(createProps) {
 				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;
+		var _ref1;
 		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
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Frame, {
+				ref: switchRef,
+				render: "button",
+				theme: checked ? (_ref1 = activeTheme !== null && activeTheme !== void 0 ? activeTheme : createProps.activeTheme) !== null && _ref1 !== void 0 ? _ref1 : null : null,
+				...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
+				})
+			})
 		}), bubbleInput] });
-	}, { disableTheme: true });
+	});
 	return (0, import_core.withStaticProperties)(SwitchComponent, {
 		Frame,
 		Thumb: SwitchThumbComponent

package/dist/jsx/Switch.native.js

@@ -60,8 +60,7 @@ function createSwitch(createProps) {
 	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 { size: sizeProp, activeStyle, ...thumbProps } = props;
 		var styledContext = import_StyledContext.SwitchStyledContext.useStyledContext();
 		var { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;
 		var _ref;
@@ -71,7 +70,7 @@ function createSwitch(createProps) {
 		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, {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, {
 			ref: forwardedRef,
 			size,
 			alignSelf: initialChecked ? "flex-end" : "flex-start",
@@ -83,15 +82,9 @@ function createSwitch(createProps) {
 			...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 { native, nativeProps, checked: checkedProp, defaultChecked, onCheckedChange, activeStyle, activeTheme, ...props } = _props;
 		var [checked, setChecked] = (0, import_use_controllable_state.useControllableState)({
 			prop: checkedProp,
 			defaultProp: defaultChecked || false,
@@ -121,35 +114,31 @@ function createSwitch(createProps) {
 				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;
+		var _ref1;
 		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
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Frame, {
+				ref: switchRef,
+				render: "button",
+				theme: checked ? (_ref1 = activeTheme !== null && activeTheme !== void 0 ? activeTheme : createProps.activeTheme) !== null && _ref1 !== void 0 ? _ref1 : null : null,
+				...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
+				})
+			})
 		}), bubbleInput] });
-	}, { disableTheme: true });
+	});
 	return (0, import_core.withStaticProperties)(SwitchComponent, {
 		Frame,
 		Thumb: SwitchThumbComponent

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.native.js","names":[],"sources":["jsx/Switch.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 Switch_exports = {};\n__export(Switch_exports, {\n  Switch: () => Switch,\n  SwitchFrame: () => SwitchFrame,\n  SwitchThumb: () => SwitchThumb,\n  SwitchThumbFrame: () => SwitchThumbFrame,\n  createSwitch: () => createSwitch\n});\nmodule.exports = __toCommonJS(Switch_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_core = require(\"@tamagui/core\");\nvar import_switch_headless = require(\"@tamagui/switch-headless\");\nvar import_use_controllable_state = require(\"@tamagui/use-controllable-state\");\nvar React = __toESM(require(\"react\"), 1);\nvar import_StyledContext = require(\"./StyledContext\");\nvar import_useSwitchNative = require(\"./useSwitchNative\");\nvar SwitchThumbFrame = (0, import_core.styled)(import_core.View, {\n  displayName: \"SwitchThumb\",\n  context: import_StyledContext.SwitchStyledContext\n});\nvar SwitchFrame = (0, import_core.styled)(import_core.View, {\n  displayName: \"Switch\",\n  context: import_StyledContext.SwitchStyledContext,\n  render: \"button\",\n  tabIndex: 0\n});\nfunction createSwitch(createProps) {\n  var _createProps_Frame;\n  var Frame = (_createProps_Frame = createProps.Frame) !== null && _createProps_Frame !== void 0 ? _createProps_Frame : SwitchFrame;\n  var _createProps_Thumb;\n  var Thumb = (_createProps_Thumb = createProps.Thumb) !== null && _createProps_Thumb !== void 0 ? _createProps_Thumb : SwitchThumbFrame;\n  Frame.staticConfig.context = import_StyledContext.SwitchStyledContext;\n  Thumb.staticConfig.context = import_StyledContext.SwitchStyledContext;\n  var SwitchThumbComponent = (0, import_core.createStyledHOC)(Thumb, function SwitchThumb2(props, forwardedRef) {\n    var _createProps_componentThemes;\n    var { size: sizeProp, activeStyle, theme, ...thumbProps } = props;\n    var styledContext = import_StyledContext.SwitchStyledContext.useStyledContext();\n    var { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;\n    var _ref;\n    var size = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : sizeContext) !== null && _ref !== void 0 ? _ref : true;\n    var initialChecked = React.useRef(active).current;\n    var initialWidth = (0, import_core.getVariableValue)(props.width, \"size\");\n    var [thumbWidth, setThumbWidth] = React.useState(typeof initialWidth === \"number\" ? initialWidth : 0);\n    var distance = frameWidth - thumbWidth;\n    var x = initialChecked ? active ? 0 : -distance : active ? distance : 0;\n    var thumb = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, {\n      ref: forwardedRef,\n      size,\n      alignSelf: initialChecked ? \"flex-end\" : \"flex-start\",\n      x,\n      onLayout: (0, import_core.composeEventHandlers)(props.onLayout, function(event) {\n        setThumbWidth(event.nativeEvent.layout.width);\n      }),\n      disabled,\n      ...thumbProps,\n      ...active && activeStyle\n    });\n    var themeName = theme !== null && theme !== void 0 ? theme : (_createProps_componentThemes = createProps.componentThemes) === null || _createProps_componentThemes === void 0 ? void 0 : _createProps_componentThemes.thumb;\n    return themeName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {\n      name: themeName,\n      children: thumb\n    }) : thumb;\n  });\n  var SwitchComponent = (0, import_core.createStyledHOC)(Frame, function Switch2(_props, forwardedRef) {\n    var _createProps_componentThemes;\n    var { native, nativeProps, checked: checkedProp, defaultChecked, onCheckedChange, activeStyle, activeTheme, theme, ...props } = _props;\n    var [checked, setChecked] = (0, import_use_controllable_state.useControllableState)({\n      prop: checkedProp,\n      defaultProp: defaultChecked || false,\n      onChange: onCheckedChange,\n      transition: true\n    });\n    var styledContext = React.useContext(import_StyledContext.SwitchStyledContext.context);\n    var [frameWidth, setFrameInnerWidth] = React.useState(0);\n    var { switchProps, bubbleInput, switchRef } = (0, import_switch_headless.useSwitch)(\n      props,\n      [\n        checked,\n        setChecked\n      ],\n      // @ts-ignore TODO tamagui react 19 type error\n      forwardedRef\n    );\n    var nativeSwitch = (0, import_useSwitchNative.useSwitchNative)({\n      id: props.id,\n      disabled: props.disabled,\n      native,\n      nativeProps,\n      checked,\n      setChecked\n    });\n    if (nativeSwitch) {\n      return nativeSwitch;\n    }\n    var disabled = props.disabled;\n    var _styledContext_size, _ref;\n    var size = (_ref = (_styledContext_size = styledContext.size) !== null && _styledContext_size !== void 0 ? _styledContext_size : props.size) !== null && _ref !== void 0 ? _ref : true;\n    var handleLayout = function(event) {\n      var next = event.nativeEvent.layout.width;\n      if (next !== frameWidth) {\n        setFrameInnerWidth(next);\n      }\n    };\n    var frame = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Frame, {\n      ref: switchRef,\n      render: \"button\",\n      ...import_core.isWeb && {\n        type: \"button\"\n      },\n      size,\n      ...props,\n      ...switchProps,\n      disabled,\n      ...checked && activeStyle,\n      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {\n        alignSelf: \"stretch\",\n        flex: 1,\n        onLayout: handleLayout,\n        children: props.children\n      })\n    });\n    var _ref1, _ref2;\n    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;\n    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {\n      children: [\n        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.SwitchStyledContext.Provider, {\n          size,\n          active: checked,\n          disabled,\n          frameWidth,\n          children: frameTheme ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {\n            name: frameTheme,\n            children: frame\n          }) : frame\n        }),\n        bubbleInput\n      ]\n    });\n  }, {\n    disableTheme: true\n  });\n  return (0, import_core.withStaticProperties)(SwitchComponent, {\n    Frame,\n    Thumb: SwitchThumbComponent\n  });\n}\nvar Switch = createSwitch({\n  Frame: SwitchFrame,\n  Thumb: SwitchThumbFrame\n});\nvar SwitchThumb = Switch.Thumb;\n//# sourceMappingURL=Switch.js.map\n"],"mappings":"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"}
+{"version":3,"file":"Switch.native.js","names":[],"sources":["jsx/Switch.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 Switch_exports = {};\n__export(Switch_exports, {\n  Switch: () => Switch,\n  SwitchFrame: () => SwitchFrame,\n  SwitchThumb: () => SwitchThumb,\n  SwitchThumbFrame: () => SwitchThumbFrame,\n  createSwitch: () => createSwitch\n});\nmodule.exports = __toCommonJS(Switch_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_core = require(\"@tamagui/core\");\nvar import_switch_headless = require(\"@tamagui/switch-headless\");\nvar import_use_controllable_state = require(\"@tamagui/use-controllable-state\");\nvar React = __toESM(require(\"react\"), 1);\nvar import_StyledContext = require(\"./StyledContext\");\nvar import_useSwitchNative = require(\"./useSwitchNative\");\nvar SwitchThumbFrame = (0, import_core.styled)(import_core.View, {\n  displayName: \"SwitchThumb\",\n  context: import_StyledContext.SwitchStyledContext\n});\nvar SwitchFrame = (0, import_core.styled)(import_core.View, {\n  displayName: \"Switch\",\n  context: import_StyledContext.SwitchStyledContext,\n  render: \"button\",\n  tabIndex: 0\n});\nfunction createSwitch(createProps) {\n  var _createProps_Frame;\n  var Frame = (_createProps_Frame = createProps.Frame) !== null && _createProps_Frame !== void 0 ? _createProps_Frame : SwitchFrame;\n  var _createProps_Thumb;\n  var Thumb = (_createProps_Thumb = createProps.Thumb) !== null && _createProps_Thumb !== void 0 ? _createProps_Thumb : SwitchThumbFrame;\n  Frame.staticConfig.context = import_StyledContext.SwitchStyledContext;\n  Thumb.staticConfig.context = import_StyledContext.SwitchStyledContext;\n  var SwitchThumbComponent = (0, import_core.createStyledHOC)(Thumb, function SwitchThumb2(props, forwardedRef) {\n    var { size: sizeProp, activeStyle, ...thumbProps } = props;\n    var styledContext = import_StyledContext.SwitchStyledContext.useStyledContext();\n    var { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext;\n    var _ref;\n    var size = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : sizeContext) !== null && _ref !== void 0 ? _ref : true;\n    var initialChecked = React.useRef(active).current;\n    var initialWidth = (0, import_core.getVariableValue)(props.width, \"size\");\n    var [thumbWidth, setThumbWidth] = React.useState(typeof initialWidth === \"number\" ? initialWidth : 0);\n    var distance = frameWidth - thumbWidth;\n    var x = initialChecked ? active ? 0 : -distance : active ? distance : 0;\n    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, {\n      ref: forwardedRef,\n      size,\n      alignSelf: initialChecked ? \"flex-end\" : \"flex-start\",\n      x,\n      onLayout: (0, import_core.composeEventHandlers)(props.onLayout, function(event) {\n        setThumbWidth(event.nativeEvent.layout.width);\n      }),\n      disabled,\n      ...thumbProps,\n      ...active && activeStyle\n    });\n  });\n  var SwitchComponent = (0, import_core.createStyledHOC)(Frame, function Switch2(_props, forwardedRef) {\n    var { native, nativeProps, checked: checkedProp, defaultChecked, onCheckedChange, activeStyle, activeTheme, ...props } = _props;\n    var [checked, setChecked] = (0, import_use_controllable_state.useControllableState)({\n      prop: checkedProp,\n      defaultProp: defaultChecked || false,\n      onChange: onCheckedChange,\n      transition: true\n    });\n    var styledContext = React.useContext(import_StyledContext.SwitchStyledContext.context);\n    var [frameWidth, setFrameInnerWidth] = React.useState(0);\n    var { switchProps, bubbleInput, switchRef } = (0, import_switch_headless.useSwitch)(\n      props,\n      [\n        checked,\n        setChecked\n      ],\n      // @ts-ignore TODO tamagui react 19 type error\n      forwardedRef\n    );\n    var nativeSwitch = (0, import_useSwitchNative.useSwitchNative)({\n      id: props.id,\n      disabled: props.disabled,\n      native,\n      nativeProps,\n      checked,\n      setChecked\n    });\n    if (nativeSwitch) {\n      return nativeSwitch;\n    }\n    var disabled = props.disabled;\n    var _styledContext_size, _ref;\n    var size = (_ref = (_styledContext_size = styledContext.size) !== null && _styledContext_size !== void 0 ? _styledContext_size : props.size) !== null && _ref !== void 0 ? _ref : true;\n    var handleLayout = function(event) {\n      var next = event.nativeEvent.layout.width;\n      if (next !== frameWidth) {\n        setFrameInnerWidth(next);\n      }\n    };\n    var _ref1;\n    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {\n      children: [\n        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.SwitchStyledContext.Provider, {\n          size,\n          active: checked,\n          disabled,\n          frameWidth,\n          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Frame, {\n            ref: switchRef,\n            render: \"button\",\n            // the track and the thumb swap onto one theme while checked, so\n            // the fill and the knob move together. the key stays present with\n            // a null value so toggling never re-parents the frame.\n            theme: checked ? (_ref1 = activeTheme !== null && activeTheme !== void 0 ? activeTheme : createProps.activeTheme) !== null && _ref1 !== void 0 ? _ref1 : null : null,\n            ...import_core.isWeb && {\n              type: \"button\"\n            },\n            size,\n            ...props,\n            ...switchProps,\n            disabled,\n            ...checked && activeStyle,\n            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {\n              alignSelf: \"stretch\",\n              flex: 1,\n              onLayout: handleLayout,\n              children: props.children\n            })\n          })\n        }),\n        bubbleInput\n      ]\n    });\n  });\n  return (0, import_core.withStaticProperties)(SwitchComponent, {\n    Frame,\n    Thumb: SwitchThumbComponent\n  });\n}\nvar Switch = createSwitch({\n  Frame: SwitchFrame,\n  Thumb: SwitchThumbFrame\n});\nvar SwitchThumb = Switch.Thumb;\n//# sourceMappingURL=Switch.js.map\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/switch",
-  "version": "3.0.0-beta.1216.1",
+  "version": "3.0.0-beta.1310.1",
   "license": "MIT",
   "source": "src/index.ts",
   "files": [
@@ -35,14 +35,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "3.0.0-beta.1216.1",
-    "@tamagui/focusable": "3.0.0-beta.1216.1",
-    "@tamagui/react-native-types": "3.0.0-beta.1216.1",
-    "@tamagui/switch-headless": "3.0.0-beta.1216.1",
-    "@tamagui/use-controllable-state": "3.0.0-beta.1216.1"
+    "@tamagui/core": "3.0.0-beta.1310.1",
+    "@tamagui/focusable": "3.0.0-beta.1310.1",
+    "@tamagui/react-native-types": "3.0.0-beta.1310.1",
+    "@tamagui/switch-headless": "3.0.0-beta.1310.1",
+    "@tamagui/use-controllable-state": "3.0.0-beta.1310.1"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.1216.1",
+    "@tamagui/build": "3.0.0-beta.1310.1",
     "react": "19.2.3",
     "react-native": "0.86.2"
   },

package/src/Switch.tsx

@@ -5,7 +5,6 @@ import {
   getVariableValue,
   isWeb,
   styled,
-  Theme,
   type ThemeProps,
   View,
   withStaticProperties,
@@ -38,10 +37,11 @@ export const SwitchFrame = styled(View, {
 export function createSwitch(createProps: {
   Frame?: SwitchFrameComponent
   Thumb?: SwitchThumbFrameComponent
-  componentThemes?: {
-    frame?: ThemeProps['name']
-    thumb?: ThemeProps['name']
-  }
+  /**
+   * theme the whole control swaps onto while checked, so the track fill and the
+   * thumb move together. the `activeTheme` prop overrides it per instance.
+   */
+  activeTheme?: ThemeProps['name']
 }) {
   const Frame = (createProps.Frame ?? SwitchFrame) as typeof SwitchFrame
   const Thumb = (createProps.Thumb ?? SwitchThumbFrame) as typeof SwitchThumbFrame
@@ -55,7 +55,7 @@ export function createSwitch(createProps: {
       props: Omit<GetProps<typeof Thumb>, keyof SwitchThumbProps> & SwitchThumbProps,
       forwardedRef
     ) {
-      const { size: sizeProp, activeStyle, theme, ...thumbProps } = props
+      const { size: sizeProp, activeStyle, ...thumbProps } = props
       const styledContext = SwitchStyledContext.useStyledContext()
       const { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext
       const size = sizeProp ?? sizeContext ?? true
@@ -67,7 +67,7 @@ export function createSwitch(createProps: {
       const distance = frameWidth - thumbWidth
       const x = initialChecked ? (active ? 0 : -distance) : active ? distance : 0
 
-      const thumb = (
+      return (
         <Thumb
           ref={forwardedRef}
           size={size}
@@ -81,9 +81,6 @@ export function createSwitch(createProps: {
           {...(active && activeStyle)}
         />
       )
-
-      const themeName = theme ?? createProps.componentThemes?.thumb
-      return themeName ? <Theme name={themeName}>{thumb}</Theme> : thumb
     }
   )
 
@@ -98,7 +95,6 @@ export function createSwitch(createProps: {
         onCheckedChange,
         activeStyle,
         activeTheme,
-        theme,
         ...props
       } = _props
       const [checked, setChecked] = useControllableState({
@@ -138,26 +134,6 @@ export function createSwitch(createProps: {
         }
       }
 
-      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
@@ -166,15 +142,29 @@ export function createSwitch(createProps: {
             disabled={disabled}
             frameWidth={frameWidth}
           >
-            {frameTheme ? <Theme name={frameTheme}>{frame}</Theme> : frame}
+            <Frame
+              ref={switchRef}
+              render="button"
+              // the track and the thumb swap onto one theme while checked, so
+              // the fill and the knob move together. the key stays present with
+              // a null value so toggling never re-parents the frame.
+              theme={checked ? (activeTheme ?? createProps.activeTheme ?? null) : null}
+              {...(isWeb && { type: 'button' })}
+              size={size}
+              {...props}
+              {...(switchProps as any)}
+              disabled={disabled}
+              {...(checked && activeStyle)}
+            >
+              <View alignSelf="stretch" flex={1} onLayout={handleLayout}>
+                {props.children}
+              </View>
+            </Frame>
           </SwitchStyledContext.Provider>
 
           {bubbleInput}
         </>
       )
-    },
-    {
-      disableTheme: true,
     }
   )