@tamagui/demos 2.7.7 → 3.0.0-beta.1091.1

package/dist/esm/SwitchDemo.native.js

@@ -1,80 +1,70 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+
 function SwitchDemo() {
-  return /* @__PURE__ */_jsx(_Fragment, {
-    children: /* @__PURE__ */_jsxs(YStack, {
-      width: 200,
-      items: "center",
-      gap: "$3",
-      children: [/* @__PURE__ */_jsxs(XStack, {
-        gap: "$3",
-        $xs: {
-          flexDirection: "column"
-        },
-        children: [/* @__PURE__ */_jsx(SwitchWithLabel, {
-          size: "$2"
-        }), /* @__PURE__ */_jsx(SwitchWithLabel, {
-          size: "$2",
-          defaultChecked: true
-        })]
-      }), /* @__PURE__ */_jsxs(XStack, {
-        gap: "$3",
-        $xs: {
-          flexDirection: "column"
-        },
-        children: [/* @__PURE__ */_jsx(SwitchWithLabel, {
-          size: "$3"
-        }), /* @__PURE__ */_jsx(SwitchWithLabel, {
-          size: "$3",
-          defaultChecked: true
-        })]
-      }), /* @__PURE__ */_jsxs(XStack, {
-        gap: "$3",
-        $xs: {
-          flexDirection: "column"
-        },
-        children: [/* @__PURE__ */_jsx(SwitchWithLabel, {
-          size: "$4"
-        }), /* @__PURE__ */_jsx(SwitchWithLabel, {
-          size: "$4",
-          defaultChecked: true
-        })]
-      })]
-    })
-  });
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(YStack, {
+		width: 200,
+		items: "center",
+		gap: "3",
+		children: [
+			/* @__PURE__ */ jsxs(XStack, {
+				gap: "3",
+				flexDirection: "xs:column",
+				children: [/* @__PURE__ */ jsx(SwitchWithLabel, { size: "2" }), /* @__PURE__ */ jsx(SwitchWithLabel, {
+					size: "2",
+					defaultChecked: true
+				})]
+			}),
+			/* @__PURE__ */ jsxs(XStack, {
+				gap: "3",
+				flexDirection: "xs:column",
+				children: [/* @__PURE__ */ jsx(SwitchWithLabel, { size: "3" }), /* @__PURE__ */ jsx(SwitchWithLabel, {
+					size: "3",
+					defaultChecked: true
+				})]
+			}),
+			/* @__PURE__ */ jsxs(XStack, {
+				gap: "3",
+				flexDirection: "xs:column",
+				children: [/* @__PURE__ */ jsx(SwitchWithLabel, { size: "4" }), /* @__PURE__ */ jsx(SwitchWithLabel, {
+					size: "4",
+					defaultChecked: true
+				})]
+			})
+		]
+	}) });
 }
 function SwitchWithLabel(props) {
-  var _props_defaultChecked;
-  var id = `switch-${props.size.toString().slice(1)}-${(_props_defaultChecked = props.defaultChecked) !== null && _props_defaultChecked !== void 0 ? _props_defaultChecked : ""}}`;
-  return /* @__PURE__ */_jsxs(XStack, {
-    width: 200,
-    items: "center",
-    gap: "$4",
-    children: [/* @__PURE__ */_jsx(Label, {
-      pr: "$0",
-      minW: 90,
-      justify: "flex-end",
-      size: props.size,
-      htmlFor: id,
-      children: "Accept"
-    }), /* @__PURE__ */_jsx(Separator, {
-      minH: 20,
-      vertical: true
-    }), /* @__PURE__ */_jsx(Switch, {
-      id,
-      transition: "300ms",
-      size: props.size,
-      defaultChecked: props.defaultChecked,
-      // use activeStyle to choose youra active color
-      // default to $backgroundActive unless "unstyled" boolean prop is on
-      activeStyle: {
-        backgroundColor: "$color6"
-      },
-      children: /* @__PURE__ */_jsx(Switch.Thumb, {
-        transition: "quickest"
-      })
-    })]
-  });
+	var _props_defaultChecked;
+	var id = `switch-${props.size}-${(_props_defaultChecked = props.defaultChecked) !== null && _props_defaultChecked !== void 0 ? _props_defaultChecked : ""}}`;
+	return /* @__PURE__ */ jsxs(XStack, {
+		width: 200,
+		items: "center",
+		gap: "4",
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				pr: "0",
+				minW: 90,
+				justify: "flex-end",
+				size: props.size,
+				htmlFor: id,
+				children: "Accept"
+			}),
+			/* @__PURE__ */ jsx(Separator, {
+				minH: 20,
+				vertical: true
+			}),
+			/* @__PURE__ */ jsx(Switch, {
+				id,
+				transition: "300ms",
+				size: props.size,
+				defaultChecked: props.defaultChecked,
+				activeStyle: { backgroundColor: "color6" },
+				children: /* @__PURE__ */ jsx(Switch.Thumb, { transition: "quickest" })
+			})
+		]
+	});
 }
+
 export { SwitchDemo, SwitchWithLabel };
 //# sourceMappingURL=SwitchDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Label","Separator","Switch","XStack","YStack","SwitchDemo","children","width","items","gap","$xs","flexDirection","SwitchWithLabel","size","defaultChecked"],"sources":["../../src/SwitchDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAOC,IAAA,EAAAC,IAAA,IAAWC,KAAe,EAAAC,QAAQ,IAAAC,SAAc;AAI5D,SAAAC,KAAA,EAAAC,SAEI,EAAAC,MAAA,EAAAC,MAFJ,EAAAC,MAAA;AAFG,SAASC,WAAA,EAAa;EAC3B,OACE,eAAAV,IAAA,CAAAI,SAAA,EACE;IACEO,QAAA,iBAACT,KAAO,CAAAO,MAAI;MACVG,KAAA;MACAC,KAAA;MAA0CC,GAC5C;MACAH,QAAA,GACE,eAAAT,KAAC,CAAAM,MAAA;QACDM,GAAA;QACFC,GAAA;UACAC,aAAC;QACC;QACAL,QAAA,GACF,eAAAX,IAAA,CAAAiB,eAAA;UAEJC,IAAA;QAEJ,IAEgB,eAAgBlB,IAI7B,CAAAiB,eAAA;UACUC,IAAA,MAAU;UAEnBC,cAAA,EAAC;QACC;MAIA,IAAC,eAAAjB,KAAA,CAAAM,MAAA;QAAAM,GAAA;QACCC,GAAA;UACAC,aAAW;QACX;QACAL,QAAA,GAGA,eAAaX,IAAA,CAAAiB,eAAA;UACXC,IAAA;QACF,IAEA,eAAAlB,IAAA,CAAAiB,eAAQ;UAA4BC,IAAA;UACtCC,cAAA;QACF","ignoreList":[]}
+{"version":3,"file":"SwitchDemo.native.js","names":["_Fragment"],"sources":["esm/SwitchDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { Label, Separator, Switch, XStack, YStack } from \"tamagui\";\nfunction SwitchDemo() {\n  return /* @__PURE__ */ _jsx(_Fragment, {\n    children: /* @__PURE__ */ _jsxs(YStack, {\n      width: 200,\n      items: \"center\",\n      gap: \"3\",\n      children: [\n        /* @__PURE__ */ _jsxs(XStack, {\n          gap: \"3\",\n          flexDirection: \"xs:column\",\n          children: [\n            /* @__PURE__ */ _jsx(SwitchWithLabel, {\n              size: \"2\"\n            }),\n            /* @__PURE__ */ _jsx(SwitchWithLabel, {\n              size: \"2\",\n              defaultChecked: true\n            })\n          ]\n        }),\n        /* @__PURE__ */ _jsxs(XStack, {\n          gap: \"3\",\n          flexDirection: \"xs:column\",\n          children: [\n            /* @__PURE__ */ _jsx(SwitchWithLabel, {\n              size: \"3\"\n            }),\n            /* @__PURE__ */ _jsx(SwitchWithLabel, {\n              size: \"3\",\n              defaultChecked: true\n            })\n          ]\n        }),\n        /* @__PURE__ */ _jsxs(XStack, {\n          gap: \"3\",\n          flexDirection: \"xs:column\",\n          children: [\n            /* @__PURE__ */ _jsx(SwitchWithLabel, {\n              size: \"4\"\n            }),\n            /* @__PURE__ */ _jsx(SwitchWithLabel, {\n              size: \"4\",\n              defaultChecked: true\n            })\n          ]\n        })\n      ]\n    })\n  });\n}\nfunction SwitchWithLabel(props) {\n  var _props_defaultChecked;\n  var id = `switch-${props.size}-${(_props_defaultChecked = props.defaultChecked) !== null && _props_defaultChecked !== void 0 ? _props_defaultChecked : \"\"}}`;\n  return /* @__PURE__ */ _jsxs(XStack, {\n    width: 200,\n    items: \"center\",\n    gap: \"4\",\n    children: [\n      /* @__PURE__ */ _jsx(Label, {\n        pr: \"0\",\n        minW: 90,\n        justify: \"flex-end\",\n        size: props.size,\n        htmlFor: id,\n        children: \"Accept\"\n      }),\n      /* @__PURE__ */ _jsx(Separator, {\n        minH: 20,\n        vertical: true\n      }),\n      /* @__PURE__ */ _jsx(Switch, {\n        id,\n        transition: \"300ms\",\n        size: props.size,\n        defaultChecked: props.defaultChecked,\n        // use activeStyle to choose your checked-state color\n        activeStyle: {\n          backgroundColor: \"color6\"\n        },\n        children: /* @__PURE__ */ _jsx(Switch.Thumb, {\n          transition: \"quickest\"\n        })\n      })\n    ]\n  });\n}\nexport {\n  SwitchDemo,\n  SwitchWithLabel\n};\n//# sourceMappingURL=SwitchDemo.js.map\n"],"mappings":";;;;AAEA,SAAS,aAAa;CACpB,OAAuB,oBAAKA,UAAW,EACrC,UAA0B,qBAAM,QAAQ;EACtC,OAAO;EACP,OAAO;EACP,KAAK;EACL,UAAU;GACQ,qBAAM,QAAQ;IAC5B,KAAK;IACL,eAAe;IACf,UAAU,CACQ,oBAAK,iBAAiB,EACpC,MAAM,IACR,CAAC,GACe,oBAAK,iBAAiB;KACpC,MAAM;KACN,gBAAgB;IAClB,CAAC,CACH;GACF,CAAC;GACe,qBAAM,QAAQ;IAC5B,KAAK;IACL,eAAe;IACf,UAAU,CACQ,oBAAK,iBAAiB,EACpC,MAAM,IACR,CAAC,GACe,oBAAK,iBAAiB;KACpC,MAAM;KACN,gBAAgB;IAClB,CAAC,CACH;GACF,CAAC;GACe,qBAAM,QAAQ;IAC5B,KAAK;IACL,eAAe;IACf,UAAU,CACQ,oBAAK,iBAAiB,EACpC,MAAM,IACR,CAAC,GACe,oBAAK,iBAAiB;KACpC,MAAM;KACN,gBAAgB;IAClB,CAAC,CACH;GACF,CAAC;EACH;CACF,CAAC,EACH,CAAC;AACH;AACA,SAAS,gBAAgB,OAAO;CAC9B,IAAI;CACJ,IAAI,KAAK,UAAU,MAAM,KAAK,IAAI,wBAAwB,MAAM,oBAAoB,QAAQ,0BAA0B,KAAK,IAAI,wBAAwB,GAAG;CAC1J,OAAuB,qBAAM,QAAQ;EACnC,OAAO;EACP,OAAO;EACP,KAAK;EACL,UAAU;GACQ,oBAAK,OAAO;IAC1B,IAAI;IACJ,MAAM;IACN,SAAS;IACT,MAAM,MAAM;IACZ,SAAS;IACT,UAAU;GACZ,CAAC;GACe,oBAAK,WAAW;IAC9B,MAAM;IACN,UAAU;GACZ,CAAC;GACe,oBAAK,QAAQ;IAC3B;IACA,YAAY;IACZ,MAAM,MAAM;IACZ,gBAAgB,MAAM;IAEtB,aAAa,EACX,iBAAiB,SACnB;IACA,UAA0B,oBAAK,OAAO,OAAO,EAC3C,YAAY,WACd,CAAC;GACH,CAAC;EACH;CACF,CAAC;AACH"}

package/dist/esm/SwitchHeadlessDemo.mjs

@@ -1,69 +1,49 @@
-import React from "react";
 import { useSwitch } from "@tamagui/switch-headless";
-import { Animated, Pressable } from "react-native-web";
-import { Label, XStack, YStack } from "tamagui";
+import React from "react";
+import { Pressable } from "react-native-web";
+import { Label, View, XStack, YStack } from "tamagui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
 function SwitchHeadlessDemo() {
-  return /* @__PURE__ */jsx(YStack, {
-    width: 200,
-    items: "center",
-    gap: "$3",
-    children: /* @__PURE__ */jsxs(XStack, {
-      gap: "$3",
-      items: "center",
-      children: [/* @__PURE__ */jsx(Label, {
-        htmlFor: "headless",
-        children: "Headless"
-      }), /* @__PURE__ */jsx(HeadlessSwitch, {
-        defaultChecked: true,
-        id: "headless"
-      })]
-    })
-  });
+	return /* @__PURE__ */ jsx(YStack, {
+		width: 200,
+		items: "center",
+		gap: "3",
+		children: /* @__PURE__ */ jsxs(XStack, {
+			gap: "3",
+			items: "center",
+			children: [/* @__PURE__ */ jsx(Label, {
+				htmlFor: "headless",
+				children: "Headless"
+			}), /* @__PURE__ */ jsx(HeadlessSwitch, {
+				defaultChecked: true,
+				id: "headless"
+			})]
+		})
+	});
 }
 const HeadlessSwitch = React.forwardRef((props, ref) => {
-  const [checked, setChecked] = React.useState(props.defaultChecked || false);
-  const {
-    switchProps,
-    switchRef,
-    bubbleInput
-  } = useSwitch(props, [checked, setChecked], ref);
-  const [animation] = React.useState(() => new Animated.Value(0));
-  React.useEffect(() => {
-    Animated.timing(animation, {
-      toValue: checked ? 1 : 0,
-      duration: 100,
-      useNativeDriver: true
-    }).start();
-  }, [checked, animation]);
-  const translateX = React.useMemo(() => animation.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 20]
-  }), [animation]);
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [/* @__PURE__ */jsx(Pressable, {
-      style: {
-        width: 40,
-        height: 20,
-        borderRadius: 100,
-        backgroundColor: checked ? "lightblue" : "silver"
-      },
-      ref: switchRef,
-      ...switchProps,
-      children: /* @__PURE__ */jsx(Animated.View, {
-        style: [{
-          backgroundColor: "black",
-          borderRadius: 100,
-          width: 20,
-          height: 20
-        }, {
-          transform: [{
-            translateX
-          }]
-        }]
-      })
-    }), bubbleInput]
-  });
+	const [checked, setChecked] = React.useState(props.defaultChecked || false);
+	const { switchProps, switchRef, bubbleInput } = useSwitch(props, [checked, setChecked], ref);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Pressable, {
+		style: {
+			width: 40,
+			height: 20,
+			borderRadius: 100,
+			backgroundColor: checked ? "lightblue" : "silver"
+		},
+		ref: switchRef,
+		...switchProps,
+		children: /* @__PURE__ */ jsx(View, {
+			transition: "quick",
+			width: 20,
+			height: 20,
+			rounded: 100,
+			bg: "black",
+			x: checked ? 20 : 0
+		})
+	}), bubbleInput] });
 });
+
 export { SwitchHeadlessDemo };
 //# sourceMappingURL=SwitchHeadlessDemo.mjs.map

package/dist/esm/SwitchHeadlessDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["React","useSwitch","Animated","Pressable","Label","XStack","YStack","Fragment","jsx","jsxs","SwitchHeadlessDemo","width","items","gap","children","htmlFor","HeadlessSwitch","defaultChecked","id","forwardRef","props","ref","checked","setChecked","useState","switchProps","switchRef","bubbleInput","animation","Value","useEffect","timing","toValue","duration","useNativeDriver","start","translateX","useMemo","interpolate","inputRange","outputRange","style","height","borderRadius","backgroundColor","View","transform"],"sources":["../../src/SwitchHeadlessDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,SAAA,QAAiB;AAG1B,SAASC,QAAA,EAAUC,SAAA,QAAiB;AACpC,SAASC,KAAA,EAAOC,MAAA,EAAQC,MAAA,QAAc;AAKhC,SAoCFC,QAAA,EAnCIC,GAAA,EADFC,IAAA;AAHC,SAASC,mBAAA,EAAqB;EACnC,OACE,eAAAF,GAAA,CAACF,MAAA;IAAOK,KAAA,EAAO;IAAKC,KAAA,EAAM;IAASC,GAAA,EAAI;IACrCC,QAAA,iBAAAL,IAAA,CAACJ,MAAA;MAAOQ,GAAA,EAAI;MAAKD,KAAA,EAAM;MACrBE,QAAA,kBAAAN,GAAA,CAACJ,KAAA;QAAMW,OAAA,EAAQ;QAAWD,QAAA;MAAA,CAAQ,GAClC,eAAAN,GAAA,CAACQ,cAAA;QAAeC,cAAA,EAAc;QAACC,EAAA,EAAG;MAAA,CAAW;IAAA,CAC/C;EAAA,CACF;AAEJ;AAEA,MAAMF,cAAA,GAAiBhB,KAAA,CAAMmB,UAAA,CAAsC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjF,MAAM,CAACC,OAAA,EAASC,UAAU,IAAIvB,KAAA,CAAMwB,QAAA,CAASJ,KAAA,CAAMH,cAAA,IAAkB,KAAK;EAC1E,MAAM;IAAEQ,WAAA;IAAaC,SAAA;IAAWC;EAAY,IAAI1B,SAAA,CAC9CmB,KAAA,EACA,CAACE,OAAA,EAASC,UAAU,GACpBF,GACF;EAEA,MAAM,CAACO,SAAS,IAAI5B,KAAA,CAAMwB,QAAA,CAAS,MAAM,IAAItB,QAAA,CAAS2B,KAAA,CAAM,CAAC,CAAC;EAE9D7B,KAAA,CAAM8B,SAAA,CAAU,MAAM;IACpB5B,QAAA,CAAS6B,MAAA,CAAOH,SAAA,EAAW;MACzBI,OAAA,EAASV,OAAA,GAAU,IAAI;MACvBW,QAAA,EAAU;MACVC,eAAA,EAAiB;IACnB,CAAC,EAAEC,KAAA,CAAM;EACX,GAAG,CAACb,OAAA,EAASM,SAAS,CAAC;EAEvB,MAAMQ,UAAA,GAAapC,KAAA,CAAMqC,OAAA,CACvB,MACET,SAAA,CAAUU,WAAA,CAAY;IACpBC,UAAA,EAAY,CAAC,GAAG,CAAC;IACjBC,WAAA,EAAa,CAAC,GAAG,EAAE;EACrB,CAAC,GACH,CAACZ,SAAS,CACZ;EAEA,OACE,eAAAnB,IAAA,CAAAF,QAAA;IACEO,QAAA,kBAAAN,GAAA,CAACL,SAAA;MACCsC,KAAA,EAAO;QACL9B,KAAA,EAAO;QACP+B,MAAA,EAAQ;QACRC,YAAA,EAAc;QACdC,eAAA,EAAiBtB,OAAA,GAAU,cAAc;MAC3C;MACAD,GAAA,EAAKK,SAAA;MACJ,GAAGD,WAAA;MAEJX,QAAA,iBAAAN,GAAA,CAACN,QAAA,CAAS2C,IAAA,EAAT;QACCJ,KAAA,EAAO,CACL;UACEG,eAAA,EAAiB;UACjBD,YAAA,EAAc;UACdhC,KAAA,EAAO;UACP+B,MAAA,EAAQ;QACV,GACA;UACEI,SAAA,EAAW,CAAC;YAAEV;UAAW,CAAC;QAC5B;MACF,CACF;IAAA,CACF,GACCT,WAAA;EAAA,CACH;AAEJ,CAAC","ignoreList":[]}
+{"version":3,"file":"SwitchHeadlessDemo.js","names":[],"sources":["esm/SwitchHeadlessDemo.js"],"sourcesContent":["import { useSwitch } from \"@tamagui/switch-headless\";\nimport React from \"react\";\nimport { Pressable } from \"react-native-web\";\nimport { Label, View, XStack, YStack } from \"tamagui\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nfunction SwitchHeadlessDemo() {\n  return /* @__PURE__ */ jsx(YStack, { width: 200, items: \"center\", gap: \"3\", children: /* @__PURE__ */ jsxs(XStack, { gap: \"3\", items: \"center\", children: [\n    /* @__PURE__ */ jsx(Label, { htmlFor: \"headless\", children: \"Headless\" }),\n    /* @__PURE__ */ jsx(HeadlessSwitch, { defaultChecked: true, id: \"headless\" })\n  ] }) });\n}\nconst HeadlessSwitch = React.forwardRef((props, ref) => {\n  const [checked, setChecked] = React.useState(props.defaultChecked || false);\n  const { switchProps, switchRef, bubbleInput } = useSwitch(\n    props,\n    [checked, setChecked],\n    ref\n  );\n  return /* @__PURE__ */ jsxs(Fragment, { children: [\n    /* @__PURE__ */ jsx(\n      Pressable,\n      {\n        style: {\n          width: 40,\n          height: 20,\n          borderRadius: 100,\n          backgroundColor: checked ? \"lightblue\" : \"silver\"\n        },\n        ref: switchRef,\n        ...switchProps,\n        children: /* @__PURE__ */ jsx(\n          View,\n          {\n            transition: \"quick\",\n            width: 20,\n            height: 20,\n            rounded: 100,\n            bg: \"black\",\n            x: checked ? 20 : 0\n          }\n        )\n      }\n    ),\n    bubbleInput\n  ] });\n});\nexport {\n  SwitchHeadlessDemo\n};\n//# sourceMappingURL=SwitchHeadlessDemo.js.map\n"],"mappings":";;;;;;;AAKA,SAAS,qBAAqB;CAC5B,OAAuB,oBAAI,QAAQ;EAAE,OAAO;EAAK,OAAO;EAAU,KAAK;EAAK,UAA0B,qBAAK,QAAQ;GAAE,KAAK;GAAK,OAAO;GAAU,UAAU,CACxI,oBAAI,OAAO;IAAE,SAAS;IAAY,UAAU;GAAW,CAAC,GACxD,oBAAI,gBAAgB;IAAE,gBAAgB;IAAM,IAAI;GAAW,CAAC,CAC9E;EAAE,CAAC;CAAE,CAAC;AACR;AACA,MAAM,iBAAiB,MAAM,YAAY,OAAO,QAAQ;CACtD,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,MAAM,kBAAkB,KAAK;CAC1E,MAAM,EAAE,aAAa,WAAW,gBAAgB,UAC9C,OACA,CAAC,SAAS,UAAU,GACpB,GACF;CACA,OAAuB,qBAAK,UAAU,EAAE,UAAU,CAChC,oBACd,WACA;EACE,OAAO;GACL,OAAO;GACP,QAAQ;GACR,cAAc;GACd,iBAAiB,UAAU,cAAc;EAC3C;EACA,KAAK;EACL,GAAG;EACH,UAA0B,oBACxB,MACA;GACE,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,IAAI;GACJ,GAAG,UAAU,KAAK;EACpB,CACF;CACF,CACF,GACA,WACF,EAAE,CAAC;AACL,CAAC"}

package/dist/esm/SwitchHeadlessDemo.native.js

@@ -1,73 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useSwitch } from "@tamagui/switch-headless";
-import { Animated, Pressable } from "react-native";
-import { Label, XStack, YStack } from "tamagui";
+import React from "react";
+import { Pressable } from "react-native";
+import { Label, View, XStack, YStack } from "tamagui";
+
 function SwitchHeadlessDemo() {
-  return /* @__PURE__ */_jsx(YStack, {
-    width: 200,
-    items: "center",
-    gap: "$3",
-    children: /* @__PURE__ */_jsxs(XStack, {
-      gap: "$3",
-      items: "center",
-      children: [/* @__PURE__ */_jsx(Label, {
-        htmlFor: "headless",
-        children: "Headless"
-      }), /* @__PURE__ */_jsx(HeadlessSwitch, {
-        defaultChecked: true,
-        id: "headless"
-      })]
-    })
-  });
+	return /* @__PURE__ */ jsx(YStack, {
+		width: 200,
+		items: "center",
+		gap: "3",
+		children: /* @__PURE__ */ jsxs(XStack, {
+			gap: "3",
+			items: "center",
+			children: [/* @__PURE__ */ jsx(Label, {
+				htmlFor: "headless",
+				children: "Headless"
+			}), /* @__PURE__ */ jsx(HeadlessSwitch, {
+				defaultChecked: true,
+				id: "headless"
+			})]
+		})
+	});
 }
-var HeadlessSwitch = /* @__PURE__ */React.forwardRef(function (props, ref) {
-  var [checked, setChecked] = React.useState(props.defaultChecked || false);
-  var {
-    switchProps,
-    switchRef,
-    bubbleInput
-  } = useSwitch(props, [checked, setChecked], ref);
-  var [animation] = React.useState(function () {
-    return new Animated.Value(0);
-  });
-  React.useEffect(function () {
-    Animated.timing(animation, {
-      toValue: checked ? 1 : 0,
-      duration: 100,
-      useNativeDriver: true
-    }).start();
-  }, [checked, animation]);
-  var translateX = React.useMemo(function () {
-    return animation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 20]
-    });
-  }, [animation]);
-  return /* @__PURE__ */_jsxs(_Fragment, {
-    children: [/* @__PURE__ */_jsx(Pressable, {
-      style: {
-        width: 40,
-        height: 20,
-        borderRadius: 100,
-        backgroundColor: checked ? "lightblue" : "silver"
-      },
-      ref: switchRef,
-      ...switchProps,
-      children: /* @__PURE__ */_jsx(Animated.View, {
-        style: [{
-          backgroundColor: "black",
-          borderRadius: 100,
-          width: 20,
-          height: 20
-        }, {
-          transform: [{
-            translateX
-          }]
-        }]
-      })
-    }), bubbleInput]
-  });
+var HeadlessSwitch = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+	var [checked, setChecked] = React.useState(props.defaultChecked || false);
+	var { switchProps, switchRef, bubbleInput } = useSwitch(props, [checked, setChecked], ref);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Pressable, {
+		style: {
+			width: 40,
+			height: 20,
+			borderRadius: 100,
+			backgroundColor: checked ? "lightblue" : "silver"
+		},
+		ref: switchRef,
+		...switchProps,
+		children: /* @__PURE__ */ jsx(View, {
+			transition: "quick",
+			width: 20,
+			height: 20,
+			rounded: 100,
+			bg: "black",
+			x: checked ? 20 : 0
+		})
+	}), bubbleInput] });
 });
+
 export { SwitchHeadlessDemo };
 //# sourceMappingURL=SwitchHeadlessDemo.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","useSwitch","Animated","Pressable","Label","XStack","YStack","SwitchHeadlessDemo","width","items","gap","children","htmlFor","HeadlessSwitch","defaultChecked","id","forwardRef","props","ref","checked","setChecked","useState","switchProps","switchRef","bubbleInput","animation","Value","useEffect","timing","toValue","duration","useNativeDriver","start","translateX","useMemo","interpolate","inputRange","outputRange","style","height","borderRadius"],"sources":["../../src/SwitchHeadlessDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAElB,OAAAC,KAAS;AAGT,SAASC,SAAA,QAAU,0BAAiB;AACpC,SAASC,QAAO,EAAAC,SAAQ,sBAAc;AAKhC,SAoCFC,KAAA,EAAAC,MAnCI,EADFC,MAAA;AAHC,SAASC,mBAAA,EAAqB;EACnC,OACE,eAAAZ,IAAC,CAAAW,MAAA;IAEGE,KAAA;IACAC,KAAA;IAA6CC,GAC/C,EACF;IAEJC,QAAA,iBAAAd,KAAA,CAAAQ,MAAA;MAEMK,GAAA;MACJD,KAAO,UAAS;MAChBE,QAAQ,GACN,eAAAhB,IAAA,CAAAS,KAAA;QACCQ,OAAS,YAAU;QACpBD,QAAA;MACF,IAEM,eAAchB,IAAM,CAAAkB,cAAe;QAEnCC,cAAgB;QACpBC,EAAA,EAAS;MACP;IACU;EACO,EACnB;AAAS;AAGX,IAAAF,cAAM,GAAa,eAAMb,KAAA,CAAAgB,UAAA,WAAAC,KAAA,EAAAC,GAAA;EAAA,IACvB,CAAAC,OACE,EAAAC,UAAU,IAAApB,KAAY,CAAAqB,QAAA,CAAAJ,KAAA,CAAAH,cAAA;EAAA,IACpB;IAAAQ,WAAa;IAAAC,SAAI;IAAAC;EAAA,IAAAvB,SAAA,CAAAgB,KAAA,GAAAE,OACjB,EACFC,UAAC,GACFF,GAAA;EACH,KAAAO,SAAA,IAAAzB,KAAA,CAAAqB,QAAA;IAEA,OACE,IAAAnB,QAAA,CAAAwB,KAAA;EACE;EAAA1B,KAAC,CAAA2B,SAAA;IAAAzB,QAAA,CAAA0B,MAAA,CAAAH,SAAA;MAAAI,OACC,EAAOV,OAAA;MAAAW,QACL,KAAO;MAAAC,eACC;IAAA,GAAAC,KACR;EAAc,IAC2Bb,OAC3C,EAAAM,SACK;EACD,IAAAQ,UAEJ,GAAAjC,KAAA,CAAAkC,OAAA;IAAA,OAACT,SAAS,CAAAU,WAAA;MAAAC,UAAT,MACQ,EACL;MACmBC,WACjB,GAAc,GACP;IAET;EACA,IAC4BZ,SAAA,CAC5B;EACF,sBAAA5B,KAAA,CAAAE,SAAA;IAAAY,QACF,kBAAAhB,IAAA,CAAAQ,SAAA;MACFmC,KAAA;QACC9B,KAAA;QACH+B,MAAA;QAEHC,YAAA","ignoreList":[]}
+{"version":3,"file":"SwitchHeadlessDemo.native.js","names":["_Fragment"],"sources":["esm/SwitchHeadlessDemo.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useSwitch } from \"@tamagui/switch-headless\";\nimport React from \"react\";\nimport { Pressable } from \"react-native\";\nimport { Label, View, XStack, YStack } from \"tamagui\";\nfunction SwitchHeadlessDemo() {\n  return /* @__PURE__ */ _jsx(YStack, {\n    width: 200,\n    items: \"center\",\n    gap: \"3\",\n    children: /* @__PURE__ */ _jsxs(XStack, {\n      gap: \"3\",\n      items: \"center\",\n      children: [\n        /* @__PURE__ */ _jsx(Label, {\n          htmlFor: \"headless\",\n          children: \"Headless\"\n        }),\n        /* @__PURE__ */ _jsx(HeadlessSwitch, {\n          defaultChecked: true,\n          id: \"headless\"\n        })\n      ]\n    })\n  });\n}\nvar HeadlessSwitch = /* @__PURE__ */ React.forwardRef(function(props, ref) {\n  var [checked, setChecked] = React.useState(props.defaultChecked || false);\n  var { switchProps, switchRef, bubbleInput } = useSwitch(props, [\n    checked,\n    setChecked\n  ], ref);\n  return /* @__PURE__ */ _jsxs(_Fragment, {\n    children: [\n      /* @__PURE__ */ _jsx(Pressable, {\n        style: {\n          width: 40,\n          height: 20,\n          borderRadius: 100,\n          backgroundColor: checked ? \"lightblue\" : \"silver\"\n        },\n        ref: switchRef,\n        ...switchProps,\n        children: /* @__PURE__ */ _jsx(View, {\n          transition: \"quick\",\n          width: 20,\n          height: 20,\n          rounded: 100,\n          bg: \"black\",\n          x: checked ? 20 : 0\n        })\n      }),\n      bubbleInput\n    ]\n  });\n});\nexport {\n  SwitchHeadlessDemo\n};\n//# sourceMappingURL=SwitchHeadlessDemo.js.map\n"],"mappings":";;;;;;;AAKA,SAAS,qBAAqB;CAC5B,OAAuB,oBAAK,QAAQ;EAClC,OAAO;EACP,OAAO;EACP,KAAK;EACL,UAA0B,qBAAM,QAAQ;GACtC,KAAK;GACL,OAAO;GACP,UAAU,CACQ,oBAAK,OAAO;IAC1B,SAAS;IACT,UAAU;GACZ,CAAC,GACe,oBAAK,gBAAgB;IACnC,gBAAgB;IAChB,IAAI;GACN,CAAC,CACH;EACF,CAAC;CACH,CAAC;AACH;AACA,IAAI,iBAAiC,sBAAM,WAAW,SAAS,OAAO,KAAK;CACzE,IAAI,CAAC,SAAS,cAAc,MAAM,SAAS,MAAM,kBAAkB,KAAK;CACxE,IAAI,EAAE,aAAa,WAAW,gBAAgB,UAAU,OAAO,CAC7D,SACA,UACF,GAAG,GAAG;CACN,OAAuB,qBAAMA,UAAW,EACtC,UAAU,CACQ,oBAAK,WAAW;EAC9B,OAAO;GACL,OAAO;GACP,QAAQ;GACR,cAAc;GACd,iBAAiB,UAAU,cAAc;EAC3C;EACA,KAAK;EACL,GAAG;EACH,UAA0B,oBAAK,MAAM;GACnC,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,IAAI;GACJ,GAAG,UAAU,KAAK;EACpB,CAAC;CACH,CAAC,GACD,WACF,EACF,CAAC;AACH,CAAC"}