@tamagui/demos 1.86.5 → 1.87.0-1705782099858

package/dist/esm/SwitchHeadlessDemo.native.js

@@ -0,0 +1,67 @@
+import { useSwitch } from "@tamagui/switch-headless";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { Animated, Pressable } from "react-native";
+import { Label, XStack, YStack } from "tamagui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SwitchHeadlessDemo() {
+  return /* @__PURE__ */ jsx(YStack, { width: 200, alignItems: "center", space: "$3", children: /* @__PURE__ */ jsxs(XStack, { space: "$3", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: "headless", children: "Headless" }),
+    /* @__PURE__ */ jsx(HeadlessSwitch, { defaultChecked: !0, id: "headless" })
+  ] }) });
+}
+const HeadlessSwitch = forwardRef((props, ref) => {
+  const [checked, setChecked] = useState(props.defaultChecked || !1), { switchProps, switchRef, bubbleInput } = useSwitch(
+    props,
+    [checked, setChecked],
+    ref
+  ), animation = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  return useEffect(() => {
+    Animated.timing(animation, {
+      toValue: checked ? 1 : 0,
+      duration: 100,
+      useNativeDriver: !0
+    }).start();
+  }, [checked]), /* @__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: animation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [0, 20]
+                    })
+                  }
+                ]
+              }
+            ]
+          }
+        )
+      }
+    ),
+    bubbleInput
+  ] });
+});
+export {
+  SwitchHeadlessDemo
+};
+//# sourceMappingURL=SwitchHeadlessDemo.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SwitchHeadlessDemo.tsx"],
+  "mappings": "AAAA,SAA6C,iBAAiB;AAC9D,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AACxD,SAAS,UAAU,iBAAuB;AAC1C,SAAS,OAAO,QAAQ,cAAc;AAKhC,SA2BF,UA1BI,KADF;AAHC,SAAS,qBAAqB;AACnC,SACE,oBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C,+BAAC,UAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,wBAAC,SAAM,SAAQ,YAAW,sBAAQ;AAAA,IAClC,oBAAC,kBAAe,gBAAc,IAAC,IAAG,YAAW;AAAA,KAC/C,GACF;AAEJ;AAEA,MAAM,iBAAiB,WAAsC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,kBAAkB,EAAK,GAC9D,EAAE,aAAa,WAAW,YAAY,IAAI;AAAA,IAC9C;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,IACpB;AAAA,EACF,GAEM,YAAY,OAAO,IAAI,SAAS,MAAM,UAAU,IAAI,CAAC,CAAC,EAAE;AAE9D,mBAAU,MAAM;AACd,aAAS,OAAO,WAAW;AAAA,MACzB,SAAS,UAAU,IAAI;AAAA,MACvB,UAAU;AAAA,MACV,iBAAiB;AAAA,IACnB,CAAC,EAAE,MAAM;AAAA,EACX,GAAG,CAAC,OAAO,CAAC,GAGV,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,iBAAiB,UAAU,cAAc;AAAA,QAC3C;AAAA,QACA,KAAK;AAAA,QACJ,GAAG;AAAA,QAEJ;AAAA,UAAC,SAAS;AAAA,UAAT;AAAA,YACC,OAAO;AAAA,cACL;AAAA,gBACE,iBAAiB;AAAA,gBACjB,cAAc;AAAA,gBACd,OAAO;AAAA,gBACP,QAAQ;AAAA,cACV;AAAA,cACA;AAAA,gBACE,WAAW;AAAA,kBACT;AAAA,oBACE,YAAY,UAAU,YAAY;AAAA,sBAChC,YAAY,CAAC,GAAG,CAAC;AAAA,sBACjB,aAAa,CAAC,GAAG,EAAE;AAAA,oBACrB,CAAC;AAAA,kBACH;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC;AAAA,KACH;AAEJ,CAAC;",
+  "names": []
+}

package/dist/esm/SwitchUnstyledDemo.js

@@ -0,0 +1,55 @@
+import { Stack, styled } from "@tamagui/core";
+import { SwitchStyledContext, createSwitch } from "@tamagui/switch";
+import { Label, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Frame = styled(Stack, {
+  context: SwitchStyledContext,
+  width: 40,
+  height: 20,
+  borderRadius: 20,
+  variants: {
+    checked: {
+      true: {
+        backgroundColor: "lightblue"
+      },
+      false: {
+        backgroundColor: "silver"
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1
+  }
+}), Thumb = styled(Stack, {
+  context: SwitchStyledContext,
+  width: 20,
+  height: 20,
+  backgroundColor: "black",
+  borderRadius: 20,
+  variants: {
+    checked: {
+      true: {
+        opacity: 0.8
+      },
+      false: {
+        opacity: 0.5
+      }
+    }
+  }
+}), Switch = createSwitch({
+  // @ts-ignore
+  Frame,
+  // @ts-ignore
+  Thumb
+});
+function SwitchUnstyledDemo() {
+  return /* @__PURE__ */ jsx(YStack, { width: 200, alignItems: "center", space: "$3", children: /* @__PURE__ */ jsxs(XStack, { space: "$3", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: "unstyled-switch", children: "Unstyled" }),
+    /* @__PURE__ */ jsx(Switch, { defaultChecked: !0, id: "unstyled-switch", children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
+  ] }) });
+}
+export {
+  Switch,
+  SwitchUnstyledDemo
+};
+//# sourceMappingURL=SwitchUnstyledDemo.js.map

package/dist/esm/SwitchUnstyledDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SwitchUnstyledDemo.tsx"],
+  "mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,OAAO,QAAQ,cAAc;AAoDhC,SACE,KADF;AAlDN,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,QAAQ,OAAO,OAAO;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAGY,SAAS,aAAa;AAAA;AAAA,EAEjC;AAAA;AAAA,EAEA;AACF,CAAC;AAEM,SAAS,qBAAqB;AACnC,SACE,oBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C,+BAAC,UAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,wBAAC,SAAM,SAAQ,mBAAkB,sBAAQ;AAAA,IACzC,oBAAC,UAAO,gBAAc,IAAC,IAAG,mBACxB,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/SwitchUnstyledDemo.native.js

@@ -0,0 +1,55 @@
+import { Stack, styled } from "@tamagui/core";
+import { SwitchStyledContext, createSwitch } from "@tamagui/switch";
+import { Label, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Frame = styled(Stack, {
+  context: SwitchStyledContext,
+  width: 40,
+  height: 20,
+  borderRadius: 20,
+  variants: {
+    checked: {
+      true: {
+        backgroundColor: "lightblue"
+      },
+      false: {
+        backgroundColor: "silver"
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1
+  }
+}), Thumb = styled(Stack, {
+  context: SwitchStyledContext,
+  width: 20,
+  height: 20,
+  backgroundColor: "black",
+  borderRadius: 20,
+  variants: {
+    checked: {
+      true: {
+        opacity: 0.8
+      },
+      false: {
+        opacity: 0.5
+      }
+    }
+  }
+}), Switch = createSwitch({
+  // @ts-ignore
+  Frame,
+  // @ts-ignore
+  Thumb
+});
+function SwitchUnstyledDemo() {
+  return /* @__PURE__ */ jsx(YStack, { width: 200, alignItems: "center", space: "$3", children: /* @__PURE__ */ jsxs(XStack, { space: "$3", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: "unstyled-switch", children: "Unstyled" }),
+    /* @__PURE__ */ jsx(Switch, { defaultChecked: !0, id: "unstyled-switch", children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
+  ] }) });
+}
+export {
+  Switch,
+  SwitchUnstyledDemo
+};
+//# sourceMappingURL=SwitchUnstyledDemo.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SwitchUnstyledDemo.tsx"],
+  "mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,OAAO,QAAQ,cAAc;AAoDhC,SACE,KADF;AAlDN,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,QAAQ,OAAO,OAAO;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAGY,SAAS,aAAa;AAAA;AAAA,EAEjC;AAAA;AAAA,EAEA;AACF,CAAC;AAEM,SAAS,qBAAqB;AACnC,SACE,oBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C,+BAAC,UAAO,OAAM,MAAK,YAAW,UAC5B;AAAA,wBAAC,SAAM,SAAQ,mBAAkB,sBAAQ;AAAA,IACzC,oBAAC,UAAO,gBAAc,IAAC,IAAG,mBACxB,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF,GACF;AAEJ;",
+  "names": []
+}

package/dist/jsx/AnimationsPresenceDemo.js

@@ -5,16 +5,35 @@ import { Button, Image, XStack, YStack, styled } from "tamagui";
 import photo1 from "../../public/photo1.jpg";
 import photo2 from "../../public/photo2.jpg";
 import photo3 from "../../public/photo3.jpg";
-const images = [photo1, photo2, photo3].map((x) => x.src || x), YStackEnterable = styled(YStack, {
+const images = [photo1, photo2, photo3].map((x) => x.src || x), GalleryItem = styled(YStack, {
+  zIndex: 1,
+  x: 0,
+  opacity: 1,
+  fullscreen: !0,
   variants: {
-    isLeft: { true: { x: -300, opacity: 0 } },
-    isRight: { true: { x: 300, opacity: 0 } }
+    // 1 = right, 0 = nowhere, -1 = left
+    going: {
+      ":number": (going) => ({
+        enterStyle: {
+          x: going > 0 ? 1e3 : -1e3,
+          opacity: 0
+        },
+        exitStyle: {
+          zIndex: 0,
+          x: going < 0 ? 1e3 : -1e3,
+          opacity: 0
+        }
+      })
+    }
   }
-});
+}), wrap = (min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+};
 function AnimationsPresenceDemo() {
-  const [[page, direction], setPage] = useState([0, 0]), imageIndex = wrap(0, images.length, page), paginate = (newDirection) => {
-    setPage([page + newDirection, newDirection]);
-  }, enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft", exitVariant = direction === 1 ? "isLeft" : "isRight";
+  const [[page, going], setPage] = useState([0, 0]), imageIndex = wrap(0, images.length, page), paginate = (going2) => {
+    setPage([page + going2, going2]);
+  };
   return <XStack
     overflow="hidden"
     backgroundColor="#000"
@@ -23,7 +42,7 @@ function AnimationsPresenceDemo() {
     width="100%"
     alignItems="center"
   >
-    <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}><YStackEnterable key={page} animation="bouncy" fullscreen x={0} opacity={1}><Image source={{ uri: images[imageIndex], width: 780, height: 300 }} /></YStackEnterable></AnimatePresence>
+    <AnimatePresence initial={!1} custom={{ going }}><GalleryItem key={page} animation="slowest" going={going}><Image source={{ uri: images[imageIndex], width: 780, height: 300 }} /></GalleryItem></AnimatePresence>
     <Button
       accessibilityLabel="Carousel left"
       icon={ArrowLeft}
@@ -33,6 +52,7 @@ function AnimationsPresenceDemo() {
       circular
       elevate
       onPress={() => paginate(-1)}
+      zi={100}
     />
     <Button
       accessibilityLabel="Carousel right"
@@ -43,13 +63,10 @@ function AnimationsPresenceDemo() {
       circular
       elevate
       onPress={() => paginate(1)}
+      zi={100}
     />
   </XStack>;
 }
-const wrap = (min, max, v) => {
-  const rangeSize = max - min;
-  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
-};
 export {
   AnimationsPresenceDemo,
   images

package/dist/jsx/AnimationsPresenceDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAGtD,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEZ,MAAM,SAAS,CAAC,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,GAE9D,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,GAE9C,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI,GAExC,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C,GAEM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY,UAChE,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,CAAC;AAAA,IACC,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,IAEX,CAAC,gBAAgB,cAAc,cAAc,aAAa,aACxD,CAAC,gBAAgB,KAAK,MAAM,UAAU,SAAS,WAAW,GAAG,GAAG,SAAS,GACvE,CAAC,MAAM,QAAQ,EAAE,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,IAAI,GAAG,EACvE,EAFC,gBAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,EAAE;AAAA,IAC5B;AAAA,IACA,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,CAAC;AAAA,IAC3B;AAAA,EACF,EAlCC;AAoCL;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
-  "names": []
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAGtD,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEZ,MAAM,SAAS,CAAC,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,GAE9D,cAAc,OAAO,QAAQ;AAAA,EACjC,QAAQ;AAAA,EACR,GAAG;AAAA,EACH,SAAS;AAAA,EACT,YAAY;AAAA,EAEZ,UAAU;AAAA;AAAA,IAER,OAAO;AAAA,MACL,WAAW,CAAC,WAAW;AAAA,QACrB,YAAY;AAAA,UACV,GAAG,QAAQ,IAAI,MAAO;AAAA,UACtB,SAAS;AAAA,QACX;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,GAAG,QAAQ,IAAI,MAAO;AAAA,UACtB,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAEK,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;AAEO,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,KAAK,GAAG,OAAO,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,GAE1C,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI,GACxC,WAAW,CAACA,WAAkB;AAClC,YAAQ,CAAC,OAAOA,QAAOA,MAAK,CAAC;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,IACC,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,IAEX,CAAC,gBAAgB,SAAS,IAAO,QAAQ,EAAE,MAAM,GAC/C,CAAC,YAAY,KAAK,MAAM,UAAU,UAAU,OAAO,OACjD,CAAC,MAAM,QAAQ,EAAE,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,IAAI,GAAG,EACvE,EAFC,YAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,EAAE;AAAA,MAC1B,IAAI;AAAA,IACN;AAAA,IACA,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,CAAC;AAAA,MACzB,IAAI;AAAA,IACN;AAAA,EACF,EApCC;AAsCL;",
+  "names": ["going"]
 }

package/dist/jsx/AnimationsPresenceDemo.native.js

@@ -5,16 +5,35 @@ import { Button, Image, XStack, YStack, styled } from "tamagui";
 import photo1 from "../../public/photo1.jpg";
 import photo2 from "../../public/photo2.jpg";
 import photo3 from "../../public/photo3.jpg";
-const images = [photo1, photo2, photo3].map((x) => x.src || x), YStackEnterable = styled(YStack, {
+const images = [photo1, photo2, photo3].map((x) => x.src || x), GalleryItem = styled(YStack, {
+  zIndex: 1,
+  x: 0,
+  opacity: 1,
+  fullscreen: !0,
   variants: {
-    isLeft: { true: { x: -300, opacity: 0 } },
-    isRight: { true: { x: 300, opacity: 0 } }
+    // 1 = right, 0 = nowhere, -1 = left
+    going: {
+      ":number": (going) => ({
+        enterStyle: {
+          x: going > 0 ? 1e3 : -1e3,
+          opacity: 0
+        },
+        exitStyle: {
+          zIndex: 0,
+          x: going < 0 ? 1e3 : -1e3,
+          opacity: 0
+        }
+      })
+    }
   }
-});
+}), wrap = (min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+};
 function AnimationsPresenceDemo() {
-  const [[page, direction], setPage] = useState([0, 0]), imageIndex = wrap(0, images.length, page), paginate = (newDirection) => {
-    setPage([page + newDirection, newDirection]);
-  }, enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft", exitVariant = direction === 1 ? "isLeft" : "isRight";
+  const [[page, going], setPage] = useState([0, 0]), imageIndex = wrap(0, images.length, page), paginate = (going2) => {
+    setPage([page + going2, going2]);
+  };
   return <XStack
     overflow="hidden"
     backgroundColor="#000"
@@ -23,7 +42,7 @@ function AnimationsPresenceDemo() {
     width="100%"
     alignItems="center"
   >
-    <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}><YStackEnterable key={page} animation="bouncy" fullscreen x={0} opacity={1}><Image source={{ uri: images[imageIndex], width: 780, height: 300 }} /></YStackEnterable></AnimatePresence>
+    <AnimatePresence initial={!1} custom={{ going }}><GalleryItem key={page} animation="slowest" going={going}><Image source={{ uri: images[imageIndex], width: 780, height: 300 }} /></GalleryItem></AnimatePresence>
     <Button
       accessibilityLabel="Carousel left"
       icon={ArrowLeft}
@@ -33,6 +52,7 @@ function AnimationsPresenceDemo() {
       circular
       elevate
       onPress={() => paginate(-1)}
+      zi={100}
     />
     <Button
       accessibilityLabel="Carousel right"
@@ -43,13 +63,10 @@ function AnimationsPresenceDemo() {
       circular
       elevate
       onPress={() => paginate(1)}
+      zi={100}
     />
   </XStack>;
 }
-const wrap = (min, max, v) => {
-  const rangeSize = max - min;
-  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
-};
 export {
   AnimationsPresenceDemo,
   images

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAGtD,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEZ,MAAM,SAAS,CAAC,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,GAE9D,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,GAE9C,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI,GAExC,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C,GAEM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY,UAChE,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,CAAC;AAAA,IACC,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,IAEX,CAAC,gBAAgB,cAAc,cAAc,aAAa,aACxD,CAAC,gBAAgB,KAAK,MAAM,UAAU,SAAS,WAAW,GAAG,GAAG,SAAS,GACvE,CAAC,MAAM,QAAQ,EAAE,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,IAAI,GAAG,EACvE,EAFC,gBAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,EAAE;AAAA,IAC5B;AAAA,IACA,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,CAAC;AAAA,IAC3B;AAAA,EACF,EAlCC;AAoCL;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
-  "names": []
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAGtD,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEZ,MAAM,SAAS,CAAC,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,GAE9D,cAAc,OAAO,QAAQ;AAAA,EACjC,QAAQ;AAAA,EACR,GAAG;AAAA,EACH,SAAS;AAAA,EACT,YAAY;AAAA,EAEZ,UAAU;AAAA;AAAA,IAER,OAAO;AAAA,MACL,WAAW,CAAC,WAAW;AAAA,QACrB,YAAY;AAAA,UACV,GAAG,QAAQ,IAAI,MAAO;AAAA,UACtB,SAAS;AAAA,QACX;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,GAAG,QAAQ,IAAI,MAAO;AAAA,UACtB,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAEK,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;AAEO,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,KAAK,GAAG,OAAO,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,GAE1C,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI,GACxC,WAAW,CAACA,WAAkB;AAClC,YAAQ,CAAC,OAAOA,QAAOA,MAAK,CAAC;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,IACC,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,IAEX,CAAC,gBAAgB,SAAS,IAAO,QAAQ,EAAE,MAAM,GAC/C,CAAC,YAAY,KAAK,MAAM,UAAU,UAAU,OAAO,OACjD,CAAC,MAAM,QAAQ,EAAE,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,IAAI,GAAG,EACvE,EAFC,YAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,EAAE;AAAA,MAC1B,IAAI;AAAA,IACN;AAAA,IACA,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,CAAC;AAAA,MACzB,IAAI;AAAA,IACN;AAAA,EACF,EApCC;AAsCL;",
+  "names": ["going"]
 }

package/dist/jsx/CheckboxHeadlessDemo.js

@@ -0,0 +1,35 @@
+import {
+  useCheckbox
+} from "@tamagui/checkbox-headless";
+import { Check, Minus } from "@tamagui/lucide-icons";
+import { forwardRef, useState } from "react";
+import { Pressable } from "react-native-web";
+import { Label, XStack, YStack } from "tamagui";
+function CheckboxHeadlessDemo() {
+  return <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
+    <HeadlessCheckbox defaultChecked="indeterminate" id="headless" />
+    <Label htmlFor="headless">Headless</Label>
+  </XStack></YStack>;
+}
+const HeadlessCheckbox = forwardRef((props, ref) => {
+  const [checked, setChecked] = useState(props.defaultChecked || !1), { checkboxProps, bubbleInput } = useCheckbox(props, [checked, setChecked], ref);
+  return <Pressable
+    style={{
+      width: 20,
+      height: 20,
+      borderRadius: 4,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: checked === !0 ? "lightblue" : "silver"
+    }}
+    {...checkboxProps}
+  >
+    {checked === "indeterminate" && <Minus width={18} height={18} />}
+    {checked === !0 && <Check width={18} height={18} />}
+    {bubbleInput}
+  </Pressable>;
+});
+export {
+  CheckboxHeadlessDemo
+};
+//# sourceMappingURL=CheckboxHeadlessDemo.js.map

package/dist/jsx/CheckboxHeadlessDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/CheckboxHeadlessDemo.tsx"],
+  "mappings": "AAAA;AAAA,EAEE;AAAA,OACK;AACP,SAAS,OAAO,aAAa;AAC7B,SAAS,YAAY,gBAAgB;AACrC,SAAS,iBAAuB;AAChC,SAAS,OAAO,QAAQ,cAAc;AAE/B,SAAS,uBAAuB;AACrC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,iBAAiB,eAAe,gBAAgB,GAAG,WAAW;AAAA,IAE/D,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,EACH,EAJC,OAKH,EANC;AAQL;AAEA,MAAM,mBAAmB,WAAwC,CAAC,OAAO,QAAQ;AAC/E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,kBAAkB,EAAK,GAC9D,EAAE,eAAe,YAAY,IAAI,YAAY,OAAO,CAAC,SAAS,UAAU,GAAG,GAAG;AAEpF,SACE,CAAC;AAAA,IACC,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,iBAAiB,YAAY,KAAO,cAAc;AAAA,IACpD;AAAA,QACI;AAAA;AAAA,KAEH,YAAY,mBAAmB,CAAC,MAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,KAC7D,YAAY,MAAQ,CAAC,MAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,KAClD;AAAA,EACH,EAdC;AAgBL,CAAC;",
+  "names": []
+}

package/dist/jsx/CheckboxHeadlessDemo.native.js

@@ -0,0 +1,35 @@
+import {
+  useCheckbox
+} from "@tamagui/checkbox-headless";
+import { Check, Minus } from "@tamagui/lucide-icons";
+import { forwardRef, useState } from "react";
+import { Pressable } from "react-native";
+import { Label, XStack, YStack } from "tamagui";
+function CheckboxHeadlessDemo() {
+  return <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
+    <HeadlessCheckbox defaultChecked="indeterminate" id="headless" />
+    <Label htmlFor="headless">Headless</Label>
+  </XStack></YStack>;
+}
+const HeadlessCheckbox = forwardRef((props, ref) => {
+  const [checked, setChecked] = useState(props.defaultChecked || !1), { checkboxProps, bubbleInput } = useCheckbox(props, [checked, setChecked], ref);
+  return <Pressable
+    style={{
+      width: 20,
+      height: 20,
+      borderRadius: 4,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: checked === !0 ? "lightblue" : "silver"
+    }}
+    {...checkboxProps}
+  >
+    {checked === "indeterminate" && <Minus width={18} height={18} />}
+    {checked === !0 && <Check width={18} height={18} />}
+    {bubbleInput}
+  </Pressable>;
+});
+export {
+  CheckboxHeadlessDemo
+};
+//# sourceMappingURL=CheckboxHeadlessDemo.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/CheckboxHeadlessDemo.tsx"],
+  "mappings": "AAAA;AAAA,EAEE;AAAA,OACK;AACP,SAAS,OAAO,aAAa;AAC7B,SAAS,YAAY,gBAAgB;AACrC,SAAS,iBAAuB;AAChC,SAAS,OAAO,QAAQ,cAAc;AAE/B,SAAS,uBAAuB;AACrC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,iBAAiB,eAAe,gBAAgB,GAAG,WAAW;AAAA,IAE/D,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,EACH,EAJC,OAKH,EANC;AAQL;AAEA,MAAM,mBAAmB,WAAwC,CAAC,OAAO,QAAQ;AAC/E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,kBAAkB,EAAK,GAC9D,EAAE,eAAe,YAAY,IAAI,YAAY,OAAO,CAAC,SAAS,UAAU,GAAG,GAAG;AAEpF,SACE,CAAC;AAAA,IACC,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,iBAAiB,YAAY,KAAO,cAAc;AAAA,IACpD;AAAA,QACI;AAAA;AAAA,KAEH,YAAY,mBAAmB,CAAC,MAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,KAC7D,YAAY,MAAQ,CAAC,MAAM,OAAO,IAAI,QAAQ,IAAI;AAAA,KAClD;AAAA,EACH,EAdC;AAgBL,CAAC;",
+  "names": []
+}

package/dist/jsx/CheckboxUnstyledDemo.js

@@ -0,0 +1,39 @@
+import { createCheckbox } from "@tamagui/checkbox";
+import { Stack, styled } from "@tamagui/core";
+import { Check } from "@tamagui/lucide-icons";
+import { Label, XStack, YStack } from "tamagui";
+const Frame = styled(Stack, {
+  borderWidth: 1,
+  borderColor: "$borderColor",
+  borderRadius: 5,
+  alignItems: "center",
+  justifyContent: "center",
+  variants: {
+    checked: {
+      indeterminate: {},
+      true: {
+        backgroundColor: "$color5"
+      },
+      false: {
+        backgroundColor: "$color3"
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1
+  }
+}), Indicator = styled(Stack, {}), Checkbox = createCheckbox({
+  Frame,
+  Indicator
+});
+function CheckboxUnstyledDemo() {
+  return <YStack width={200} alignItems="center" gap="$3"><XStack gap="$3" alignItems="center">
+    <Checkbox defaultChecked id="unstyled"><Checkbox.Indicator><Check /></Checkbox.Indicator></Checkbox>
+    <Label htmlFor="unstyled">Unstyled</Label>
+  </XStack></YStack>;
+}
+export {
+  Checkbox,
+  CheckboxUnstyledDemo
+};
+//# sourceMappingURL=CheckboxUnstyledDemo.js.map

package/dist/jsx/CheckboxUnstyledDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/CheckboxUnstyledDemo.tsx"],
+  "mappings": "AAAA,SAAgC,sBAAsB;AACtD,SAAS,OAAO,cAAc;AAC9B,SAAS,aAAa;AACtB,SAAS,OAAO,QAAQ,cAAc;AAEtC,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,IACR,SAAS;AAAA,MACP,eAAe,CAAC;AAAA,MAChB,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,YAAY,OAAO,OAAO,CAAC,CAAC,GAErB,WAAW,eAAe;AAAA,EACrC;AAAA,EACA;AACF,CAAC;AAEM,SAAS,uBAAuB;AACrC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,IAAI,KAC1C,CAAC,OAAO,IAAI,KAAK,WAAW;AAAA,IAC1B,CAAC,SAAS,eAAe,GAAG,WAC1B,CAAC,SAAS,UACR,CAAC,MAAM,EACT,EAFC,SAAS,UAGZ,EAJC;AAAA,IAKD,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,EACH,EAPC,OAQH,EATC;AAWL;",
+  "names": []
+}

package/dist/jsx/CheckboxUnstyledDemo.native.js

@@ -0,0 +1,39 @@
+import { createCheckbox } from "@tamagui/checkbox";
+import { Stack, styled } from "@tamagui/core";
+import { Check } from "@tamagui/lucide-icons";
+import { Label, XStack, YStack } from "tamagui";
+const Frame = styled(Stack, {
+  borderWidth: 1,
+  borderColor: "$borderColor",
+  borderRadius: 5,
+  alignItems: "center",
+  justifyContent: "center",
+  variants: {
+    checked: {
+      indeterminate: {},
+      true: {
+        backgroundColor: "$color5"
+      },
+      false: {
+        backgroundColor: "$color3"
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1
+  }
+}), Indicator = styled(Stack, {}), Checkbox = createCheckbox({
+  Frame,
+  Indicator
+});
+function CheckboxUnstyledDemo() {
+  return <YStack width={200} alignItems="center" gap="$3"><XStack gap="$3" alignItems="center">
+    <Checkbox defaultChecked id="unstyled"><Checkbox.Indicator><Check /></Checkbox.Indicator></Checkbox>
+    <Label htmlFor="unstyled">Unstyled</Label>
+  </XStack></YStack>;
+}
+export {
+  Checkbox,
+  CheckboxUnstyledDemo
+};
+//# sourceMappingURL=CheckboxUnstyledDemo.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/CheckboxUnstyledDemo.tsx"],
+  "mappings": "AAAA,SAAgC,sBAAsB;AACtD,SAAS,OAAO,cAAc;AAC9B,SAAS,aAAa;AACtB,SAAS,OAAO,QAAQ,cAAc;AAEtC,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,IACR,SAAS;AAAA,MACP,eAAe,CAAC;AAAA,MAChB,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,YAAY,OAAO,OAAO,CAAC,CAAC,GAErB,WAAW,eAAe;AAAA,EACrC;AAAA,EACA;AACF,CAAC;AAEM,SAAS,uBAAuB;AACrC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,IAAI,KAC1C,CAAC,OAAO,IAAI,KAAK,WAAW;AAAA,IAC1B,CAAC,SAAS,eAAe,GAAG,WAC1B,CAAC,SAAS,UACR,CAAC,MAAM,EACT,EAFC,SAAS,UAGZ,EAJC;AAAA,IAKD,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,EACH,EAPC,OAQH,EATC;AAWL;",
+  "names": []
+}

package/dist/jsx/SwitchHeadlessDemo.js

@@ -0,0 +1,59 @@
+import { useSwitch } from "@tamagui/switch-headless";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { Animated, Pressable } from "react-native-web";
+import { Label, XStack, YStack } from "tamagui";
+function SwitchHeadlessDemo() {
+  return <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
+    <Label htmlFor="headless">Headless</Label>
+    <HeadlessSwitch defaultChecked id="headless" />
+  </XStack></YStack>;
+}
+const HeadlessSwitch = forwardRef((props, ref) => {
+  const [checked, setChecked] = useState(props.defaultChecked || !1), { switchProps, switchRef, bubbleInput } = useSwitch(
+    props,
+    [checked, setChecked],
+    ref
+  ), animation = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  return useEffect(() => {
+    Animated.timing(animation, {
+      toValue: checked ? 1 : 0,
+      duration: 100,
+      useNativeDriver: !0
+    }).start();
+  }, [checked]), <>
+    <Pressable
+      style={{
+        width: 40,
+        height: 20,
+        borderRadius: 100,
+        backgroundColor: checked ? "lightblue" : "silver"
+      }}
+      ref={switchRef}
+      {...switchProps}
+    ><Animated.View
+      style={[
+        {
+          backgroundColor: "black",
+          borderRadius: 100,
+          width: 20,
+          height: 20
+        },
+        {
+          transform: [
+            {
+              translateX: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 20]
+              })
+            }
+          ]
+        }
+      ]}
+    /></Pressable>
+    {bubbleInput}
+  </>;
+});
+export {
+  SwitchHeadlessDemo
+};
+//# sourceMappingURL=SwitchHeadlessDemo.js.map

package/dist/jsx/SwitchHeadlessDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SwitchHeadlessDemo.tsx"],
+  "mappings": "AAAA,SAA6C,iBAAiB;AAC9D,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AACxD,SAAS,UAAU,iBAAuB;AAC1C,SAAS,OAAO,QAAQ,cAAc;AAE/B,SAAS,qBAAqB;AACnC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,MAAM,QAAQ,WAAW,QAAQ,EAAjC;AAAA,IACD,CAAC,eAAe,eAAe,GAAG,WAAW;AAAA,EAC/C,EAHC,OAIH,EALC;AAOL;AAEA,MAAM,iBAAiB,WAAsC,CAAC,OAAO,QAAQ;AAC3E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,kBAAkB,EAAK,GAC9D,EAAE,aAAa,WAAW,YAAY,IAAI;AAAA,IAC9C;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,IACpB;AAAA,EACF,GAEM,YAAY,OAAO,IAAI,SAAS,MAAM,UAAU,IAAI,CAAC,CAAC,EAAE;AAE9D,mBAAU,MAAM;AACd,aAAS,OAAO,WAAW;AAAA,MACzB,SAAS,UAAU,IAAI;AAAA,MACvB,UAAU;AAAA,MACV,iBAAiB;AAAA,IACnB,CAAC,EAAE,MAAM;AAAA,EACX,GAAG,CAAC,OAAO,CAAC,GAGV;AAAA,IACE,CAAC;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB,UAAU,cAAc;AAAA,MAC3C;AAAA,MACA,KAAK;AAAA,UACD;AAAA,KAEJ,CAAC,SAAS;AAAA,MACR,OAAO;AAAA,QACL;AAAA,UACE,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,UACE,WAAW;AAAA,YACT;AAAA,cACE,YAAY,UAAU,YAAY;AAAA,gBAChC,YAAY,CAAC,GAAG,CAAC;AAAA,gBACjB,aAAa,CAAC,GAAG,EAAE;AAAA,cACrB,CAAC;AAAA,YACH;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,EACF,EA9BC;AAAA,KA+BA;AAAA,EACH;AAEJ,CAAC;",
+  "names": []
+}