@tamagui/demos 2.0.0-1768326993354 → 2.0.0-1768530912818

package/src/SwitchUnstyledDemo.tsx

@@ -50,7 +50,7 @@ export function SwitchUnstyledDemo() {
       <XStack gap="$3" items="center">
         <Label htmlFor="unstyled-switch">Unstyled</Label>
         <Switch defaultChecked id="unstyled-switch">
-          <Switch.Thumb transition="quick" />
+          <Switch.Thumb transition="quickest" />
         </Switch>
       </XStack>
     </YStack>

package/src/ToastDemo.tsx

@@ -1,6 +1,6 @@
 import { Toast, useToastController, useToastState } from '@tamagui/toast'
 import React from 'react'
-import { Button, isWeb, Label, Switch, XStack, YStack } from 'tamagui'
+import { Button, Label, Switch, XStack, YStack } from 'tamagui'
 
 /**
  *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
@@ -27,22 +27,29 @@ const CurrentToast = () => {
 
   return (
     <Toast
-      transition="200ms"
       key={currentToast.id}
       duration={currentToast.duration}
-      enterStyle={{ opacity: 0, transform: [{ translateY: 100 }] }}
-      exitStyle={{ opacity: 0, transform: [{ translateY: 100 }] }}
-      transform={[{ translateY: 0 }]}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
       opacity={1}
       scale={1}
-      viewportName={currentToast.viewportName}
+      y={-50}
+      transition="quicker"
+      bg="$color2"
+      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
     >
-      <YStack>
-        <Toast.Title>{currentToast.title}</Toast.Title>
-        {!!currentToast.message && (
-          <Toast.Description>{currentToast.message}</Toast.Description>
-        )}
-      </YStack>
+      <XStack gap="$5" items="center" justify="space-between">
+        <YStack gap="$0.5" flex={1}>
+          <Toast.Title>{currentToast.title}</Toast.Title>
+          {!!currentToast.message && (
+            <Toast.Description>{currentToast.message}</Toast.Description>
+          )}
+        </YStack>
+        <Toast.Action asChild altText="Dismiss toast">
+          <Button size="$2">Dismiss</Button>
+        </Toast.Action>
+      </XStack>
     </Toast>
   )
 }
@@ -96,7 +103,7 @@ const NativeOptions = ({
       >
         <Switch.Thumb
           transition={[
-            'quick',
+            'quickest',
             {
               transform: {
                 overshootClamping: true,

package/src/tamagui.config.ts

@@ -1,7 +1,10 @@
 import { createTamagui } from 'tamagui'
-import { config } from '@tamagui/tamagui-dev-config'
+import { config, animationsMotion } from '@tamagui/tamagui-dev-config'
 
-const tamaConf = createTamagui(config)
+const tamaConf = createTamagui({
+  ...config,
+  animations: animationsMotion,
+})
 
 export type Conf = typeof tamaConf