@tamagui/demos 1.86.5 → 1.87.0-1705782099858

package/dist/jsx/SwitchHeadlessDemo.native.js

@@ -0,0 +1,59 @@
+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";
+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.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;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": []
+}

package/dist/jsx/SwitchUnstyledDemo.js

@@ -0,0 +1,54 @@
+import { Stack, styled } from "@tamagui/core";
+import { SwitchStyledContext, createSwitch } from "@tamagui/switch";
+import { Label, XStack, YStack } from "tamagui";
+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 <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
+    <Label htmlFor="unstyled-switch">Unstyled</Label>
+    <Switch defaultChecked id="unstyled-switch"><Switch.Thumb animation="quick" /></Switch>
+  </XStack></YStack>;
+}
+export {
+  Switch,
+  SwitchUnstyledDemo
+};
+//# sourceMappingURL=SwitchUnstyledDemo.js.map

package/dist/jsx/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;AAEtC,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,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,MAAM,QAAQ,kBAAkB,QAAQ,EAAxC;AAAA,IACD,CAAC,OAAO,eAAe,GAAG,kBACxB,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EALC,OAMH,EAPC;AASL;",
+  "names": []
+}

package/dist/jsx/SwitchUnstyledDemo.native.js

@@ -0,0 +1,54 @@
+import { Stack, styled } from "@tamagui/core";
+import { SwitchStyledContext, createSwitch } from "@tamagui/switch";
+import { Label, XStack, YStack } from "tamagui";
+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 <YStack width={200} alignItems="center" space="$3"><XStack space="$3" alignItems="center">
+    <Label htmlFor="unstyled-switch">Unstyled</Label>
+    <Switch defaultChecked id="unstyled-switch"><Switch.Thumb animation="quick" /></Switch>
+  </XStack></YStack>;
+}
+export {
+  Switch,
+  SwitchUnstyledDemo
+};
+//# sourceMappingURL=SwitchUnstyledDemo.js.map

package/dist/jsx/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;AAEtC,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,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM,KAC5C,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,MAAM,QAAQ,kBAAkB,QAAQ,EAAxC;AAAA,IACD,CAAC,OAAO,eAAe,GAAG,kBACxB,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EALC,OAMH,EAPC;AASL;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.86.5",
+  "version": "1.87.0-1705782099858",
   "sideEffects": [
     "*.css"
   ],
@@ -40,29 +40,29 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.86.5",
-    "@tamagui/button": "1.86.5",
-    "@tamagui/core": "1.86.5",
-    "@tamagui/list-item": "1.86.5",
-    "@tamagui/logo": "1.86.5",
-    "@tamagui/menu": "1.86.5",
-    "@tamagui/popover": "1.86.5",
-    "@tamagui/progress": "1.86.5",
-    "@tamagui/radio-group": "1.86.5",
-    "@tamagui/select": "1.86.5",
-    "@tamagui/sheet": "1.86.5",
-    "@tamagui/site-config": "1.86.5",
-    "@tamagui/slider": "1.86.5",
-    "@tamagui/stacks": "1.86.5",
-    "@tamagui/toast": "1.86.5",
-    "tamagui": "1.86.5"
+    "@tamagui/avatar": "1.87.0-1705782099858",
+    "@tamagui/button": "1.87.0-1705782099858",
+    "@tamagui/core": "1.87.0-1705782099858",
+    "@tamagui/list-item": "1.87.0-1705782099858",
+    "@tamagui/logo": "1.87.0-1705782099858",
+    "@tamagui/menu": "1.87.0-1705782099858",
+    "@tamagui/popover": "1.87.0-1705782099858",
+    "@tamagui/progress": "1.87.0-1705782099858",
+    "@tamagui/radio-group": "1.87.0-1705782099858",
+    "@tamagui/select": "1.87.0-1705782099858",
+    "@tamagui/sheet": "1.87.0-1705782099858",
+    "@tamagui/site-config": "1.87.0-1705782099858",
+    "@tamagui/slider": "1.87.0-1705782099858",
+    "@tamagui/stacks": "1.87.0-1705782099858",
+    "@tamagui/toast": "1.87.0-1705782099858",
+    "tamagui": "1.87.0-1705782099858"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.86.5",
+    "@tamagui/build": "1.87.0-1705782099858",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/AnimationsPresenceDemo.tsx

@@ -12,25 +12,43 @@ import photo3 from '../../public/photo3.jpg'
 
 export const images = [photo1, photo2, photo3].map((x) => x.src || x)
 
-const YStackEnterable = styled(YStack, {
+const GalleryItem = styled(YStack, {
+  zIndex: 1,
+  x: 0,
+  opacity: 1,
+  fullscreen: true,
+
   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 ? 1000 : -1000,
+          opacity: 0,
+        },
+        exitStyle: {
+          zIndex: 0,
+          x: going < 0 ? 1000 : -1000,
+          opacity: 0,
+        },
+      }),
+    },
   } as const,
 })
 
+const wrap = (min: number, max: number, v: number) => {
+  const rangeSize = max - min
+  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min
+}
+
 export function AnimationsPresenceDemo() {
-  const [[page, direction], setPage] = useState([0, 0])
+  const [[page, going], setPage] = useState([0, 0])
 
   const imageIndex = wrap(0, images.length, page)
-
-  const paginate = (newDirection: number) => {
-    setPage([page + newDirection, newDirection])
+  const paginate = (going: number) => {
+    setPage([page + going, going])
   }
 
-  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'
-  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'
-
   return (
     <XStack
       overflow="hidden"
@@ -40,10 +58,10 @@ export function AnimationsPresenceDemo() {
       width="100%"
       alignItems="center"
     >
-      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>
-        <YStackEnterable key={page} animation="bouncy" fullscreen x={0} opacity={1}>
+      <AnimatePresence initial={false} custom={{ going }}>
+        <GalleryItem key={page} animation="slowest" going={going}>
           <Image source={{ uri: images[imageIndex], width: 780, height: 300 }} />
-        </YStackEnterable>
+        </GalleryItem>
       </AnimatePresence>
 
       <Button
@@ -55,6 +73,7 @@ export function AnimationsPresenceDemo() {
         circular
         elevate
         onPress={() => paginate(-1)}
+        zi={100}
       />
       <Button
         accessibilityLabel="Carousel right"
@@ -65,12 +84,8 @@ export function AnimationsPresenceDemo() {
         circular
         elevate
         onPress={() => paginate(1)}
+        zi={100}
       />
     </XStack>
   )
 }
-
-const wrap = (min: number, max: number, v: number) => {
-  const rangeSize = max - min
-  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min
-}

package/types/AnimationsPresenceDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationsPresenceDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsPresenceDemo.tsx"],"names":[],"mappings":";AAYA,eAAO,MAAM,MAAM,OAAkD,CAAA;AASrE,wBAAgB,sBAAsB,gBAiDrC"}
+{"version":3,"file":"AnimationsPresenceDemo.d.ts","sourceRoot":"","sources":["../src/AnimationsPresenceDemo.tsx"],"names":[],"mappings":";AAYA,eAAO,MAAM,MAAM,OAAkD,CAAA;AA+BrE,wBAAgB,sBAAsB,gBA+CrC"}

package/types/CheckboxHeadlessDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxHeadlessDemo.d.ts","sourceRoot":"","sources":["../src/CheckboxHeadlessDemo.tsx"],"names":[],"mappings":";AASA,wBAAgB,oBAAoB,gBAUnC"}

package/types/CheckboxUnstyledDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxUnstyledDemo.d.ts","sourceRoot":"","sources":["../src/CheckboxUnstyledDemo.tsx"],"names":[],"mappings":";AA8BA,eAAO,MAAM,QAAQ,KAGnB,CAAA;AAEF,wBAAgB,oBAAoB,gBAanC"}

package/types/SwitchHeadlessDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchHeadlessDemo.d.ts","sourceRoot":"","sources":["../src/SwitchHeadlessDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,kBAAkB,gBASjC"}

package/types/SwitchUnstyledDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchUnstyledDemo.d.ts","sourceRoot":"","sources":["../src/SwitchUnstyledDemo.tsx"],"names":[],"mappings":";AA4CA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjB,CAAA;AAEF,wBAAgB,kBAAkB,gBAWjC"}