@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.643.1",
   "source": "demos/src/index.tsx",
   "files": [
     "src",
@@ -46,47 +46,46 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/animate-presence": "2.7.7",
-    "@tamagui/avatar": "2.7.7",
-    "@tamagui/button": "2.7.7",
-    "@tamagui/checkbox": "2.7.7",
-    "@tamagui/checkbox-headless": "2.7.7",
-    "@tamagui/colors": "2.7.7",
-    "@tamagui/config": "2.7.7",
-    "@tamagui/context-menu": "2.7.7",
-    "@tamagui/core": "2.7.7",
-    "@tamagui/get-button-sized": "2.7.7",
-    "@tamagui/image": "2.7.7",
-    "@tamagui/input": "2.7.7",
-    "@tamagui/linear-gradient": "2.7.7",
-    "@tamagui/list-item": "2.7.7",
-    "@tamagui/logo": "2.7.7",
-    "@tamagui/lucide-icons-2": "2.7.7",
-    "@tamagui/menu": "2.7.7",
-    "@tamagui/popover": "2.7.7",
-    "@tamagui/progress": "2.7.7",
-    "@tamagui/radio-group": "2.7.7",
-    "@tamagui/radio-headless": "2.7.7",
-    "@tamagui/roving-focus": "2.7.7",
-    "@tamagui/select": "2.7.7",
-    "@tamagui/sheet": "2.7.7",
-    "@tamagui/slider": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/switch": "2.7.7",
-    "@tamagui/switch-headless": "2.7.7",
-    "@tamagui/tabs": "2.7.7",
-    "@tamagui/tamagui-dev-config": "2.7.7",
-    "@tamagui/theme": "2.7.7",
-    "@tamagui/toast": "2.7.7",
-    "tamagui": "2.7.7"
+    "@tamagui/animate-presence": "3.0.0-beta.643.1",
+    "@tamagui/avatar": "3.0.0-beta.643.1",
+    "@tamagui/button": "3.0.0-beta.643.1",
+    "@tamagui/checkbox": "3.0.0-beta.643.1",
+    "@tamagui/checkbox-headless": "3.0.0-beta.643.1",
+    "@tamagui/colors": "3.0.0-beta.643.1",
+    "@tamagui/context-menu": "3.0.0-beta.643.1",
+    "@tamagui/core": "3.0.0-beta.643.1",
+    "@tamagui/image": "3.0.0-beta.643.1",
+    "@tamagui/input": "3.0.0-beta.643.1",
+    "@tamagui/linear-gradient": "3.0.0-beta.643.1",
+    "@tamagui/list-item": "3.0.0-beta.643.1",
+    "@tamagui/logo": "3.0.0-beta.643.1",
+    "@tamagui/lucide-icons-2": "3.0.0-beta.643.1",
+    "@tamagui/menu": "3.0.0-beta.643.1",
+    "@tamagui/popover": "3.0.0-beta.643.1",
+    "@tamagui/progress": "3.0.0-beta.643.1",
+    "@tamagui/radio-group": "3.0.0-beta.643.1",
+    "@tamagui/radio-headless": "3.0.0-beta.643.1",
+    "@tamagui/roving-focus": "3.0.0-beta.643.1",
+    "@tamagui/select": "3.0.0-beta.643.1",
+    "@tamagui/sheet": "3.0.0-beta.643.1",
+    "@tamagui/slider": "3.0.0-beta.643.1",
+    "@tamagui/stacks": "3.0.0-beta.643.1",
+    "@tamagui/switch": "3.0.0-beta.643.1",
+    "@tamagui/switch-headless": "3.0.0-beta.643.1",
+    "@tamagui/tabs": "3.0.0-beta.643.1",
+    "@tamagui/tamagui-dev-config": "3.0.0-beta.643.1",
+    "@tamagui/theme": "3.0.0-beta.643.1",
+    "@tamagui/toast": "3.0.0-beta.643.1",
+    "tamagui": "3.0.0-beta.643.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.643.1",
     "react": ">=19",
-    "react-native": "0.83.2"
+    "react-native": "0.86.2"
   },
   "peerDependencies": {
-    "react": ">=19"
+    "react": ">=19",
+    "react-native-web": "*"
   },
   "repository": {
     "type": "git",

package/src/AccordionDemo.tsx

@@ -3,20 +3,20 @@ import { Accordion, Paragraph, Square } from 'tamagui'
 
 export function AccordionDemo() {
   return (
-    <Accordion overflow="hidden" width="$20" type="multiple">
+    <Accordion overflow="hidden" width="20" type="multiple">
       {/* negative margin prevents double border between items */}
       <Accordion.Item value="a1" mb={-1}>
         <Accordion.Trigger
           flexDirection="row"
           justify="space-between"
           borderWidth={1}
-          borderColor="$borderColor"
+          borderColor="border-color"
         >
           {({ open }: { open: boolean }) => (
             <>
               <Paragraph>1. Take a cold shower</Paragraph>
               <Square transparent transition="quick" rotate={open ? '180deg' : '0deg'}>
-                <ChevronDown size="$1" color="$color" />
+                <ChevronDown size="1" color="color" />
               </Square>
             </>
           )}
@@ -24,10 +24,10 @@ export function AccordionDemo() {
         <Accordion.HeightAnimator transition="300ms">
           <Accordion.Content
             transition="300ms"
-            exitStyle={{ opacity: 0 }}
+            opacity="exit:0"
             borderWidth={1}
             borderTopWidth={0}
-            borderColor="$borderColor"
+            borderColor="border-color"
           >
             <Paragraph>
               Cold showers can help reduce inflammation, relieve pain, improve
@@ -42,13 +42,13 @@ export function AccordionDemo() {
           flexDirection="row"
           justify="space-between"
           borderWidth={1}
-          borderColor="$borderColor"
+          borderColor="border-color"
         >
           {({ open }: { open: boolean }) => (
             <>
               <Paragraph>2. Eat 4 eggs</Paragraph>
               <Square transparent transition="quick" rotate={open ? '180deg' : '0deg'}>
-                <ChevronDown size="$1" color="$color" />
+                <ChevronDown size="1" color="color" />
               </Square>
             </>
           )}
@@ -56,10 +56,10 @@ export function AccordionDemo() {
         <Accordion.HeightAnimator transition="300ms">
           <Accordion.Content
             transition="300ms"
-            exitStyle={{ opacity: 0 }}
+            opacity="exit:0"
             borderWidth={1}
             borderTopWidth={0}
-            borderColor="$borderColor"
+            borderColor="border-color"
           >
             <Paragraph>
               Eggs have been a dietary staple since time immemorial and there's good

package/src/AddThemeDemo.tsx

@@ -7,11 +7,11 @@ export function AddThemeDemo() {
   const [theme, setTheme] = React.useState<any>()
 
   return (
-    <YStack items="center" gap="$4">
+    <YStack items="center" gap="4">
       <H3>Theme: {theme ?? 'none'}</H3>
 
       <Theme name={theme ?? 'red'}>
-        <View rounded="$8" width={100} height={100} bg="$color" />
+        <View rounded="8" width={100} height={100} bg="color" />
       </Theme>
 
       <Button

package/src/AlertDialogDemo.tsx

@@ -11,36 +11,25 @@ export function AlertDialogDemo() {
         <AlertDialog.Overlay
           key="overlay"
           transition="quick"
-          opacity={0.5}
-          backgroundColor="$background"
-          enterStyle={{ opacity: 0 }}
-          exitStyle={{ opacity: 0 }}
+          opacity="0.5 enter:0 exit:0"
+          backgroundColor="background"
         />
         <AlertDialog.Content
-          elevate
+          elevation="4"
           key="content"
-          transition={[
-            'quick',
-            {
-              opacity: {
-                overshootClamping: true,
-              },
-            },
-          ]}
-          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
-          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
-          x={0}
-          scale={1}
-          opacity={1}
-          y={0}
+          transition={['quick', { opacity: { overshootClamping: true } }]}
+          x="0 enter:0 exit:0"
+          scale="1 enter:0.9 exit:0.95"
+          opacity="1 enter:0 exit:0"
+          y="0 enter:-20px exit:10px"
         >
-          <YStack gap="$4">
+          <YStack gap="4">
             <AlertDialog.Title>Accept</AlertDialog.Title>
             <AlertDialog.Description>
               By pressing yes, you accept our terms and conditions.
             </AlertDialog.Description>
 
-            <XStack gap="$3" justify="flex-end">
+            <XStack gap="3" justify="flex-end">
               <AlertDialog.Cancel asChild>
                 <Button>Cancel</Button>
               </AlertDialog.Cancel>

package/src/AnimationsDelayDemo.tsx

@@ -3,7 +3,7 @@ import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from 'tamagui'
 
 import { useIsIntersecting } from './useOnIntersecting'
 
-const colors = ['$color9', '$color10', '$color11', '$color12'] as const
+const colors = ['color8', 'color9', 'color10', 'color11'] as const
 
 export function AnimationsDelayDemo() {
   const ref = React.useRef<HTMLElement>(null)
@@ -15,33 +15,26 @@ export function AnimationsDelayDemo() {
   }
 
   return (
-    <YStack gap="$4" items="center">
-      <XStack gap="$3" height={100} items="center" justify="center">
+    <YStack gap="4" items="center">
+      <XStack gap="3" height={100} items="center" justify="center">
         <AnimatePresence>
           {show &&
             colors.map((color, i) => (
               <Square
                 key={color}
                 transition={['200ms', { delay: i * 100 }]}
-                enterStyle={{
-                  opacity: 0,
-                  scale: 0.5,
-                  y: 20,
-                }}
-                exitStyle={{
-                  opacity: 0,
-                  scale: 0,
-                  y: 20,
-                }}
-                size={60}
+                opacity="enter:0 exit:0"
+                scale="enter:0.5 exit:0"
+                y="enter:20px exit:20px"
                 bg={color}
-                rounded="$4"
+                rounded="4"
+                size={60}
               />
             ))}
         </AnimatePresence>
       </XStack>
 
-      <Button size="$3" onPress={() => setShow(!show)}>
+      <Button size="3" onPress={() => setShow(!show)}>
         {show ? 'Hide' : 'Show'}
       </Button>
     </YStack>

package/src/AnimationsDemo.tsx

@@ -1,6 +1,6 @@
 import { LogoIcon } from '@tamagui/logo'
 import { Play } from '@tamagui/lucide-icons-2'
-import { Button, isWeb, Square, useControllableState, Image, useEvent } from 'tamagui'
+import { Button, Image, isWeb, Square, useControllableState, useEvent } from 'tamagui'
 
 export function AnimationsDemo(props) {
   const [positionI, setPositionI] = useControllableState({
@@ -19,20 +19,14 @@ export function AnimationsDemo(props) {
     <>
       <Square
         transition={props.animation ?? 'bouncy'}
+        borderColor="border-color"
+        borderWidth={1}
+        rounded="9"
+        bg="color9"
+        {...position}
         animateOnly={['transform']}
         onPress={onPress}
         size={104}
-        borderColor="$borderColor"
-        borderWidth={1}
-        rounded="$9"
-        bg="$color9"
-        hoverStyle={{
-          scale: 1.01,
-        }}
-        pressStyle={{
-          scale: 0.9,
-        }}
-        {...position}
       >
         {isWeb && <LogoIcon downscale={0.75} />}
       </Square>
@@ -42,8 +36,8 @@ export function AnimationsDemo(props) {
         b={20}
         l={20}
         icon={Play}
-        theme={props.tint ?? 'surface2'}
-        size="$5"
+        theme={props.tint ?? 'level3'}
+        size="5"
         circular
         onPress={onPress}
       />
@@ -55,31 +49,19 @@ export const positions = [
   {
     x: 0,
     y: 0,
-    scale: 1,
+    scale: '1 hover:1.01 press:0.9',
     rotate: '0deg',
   },
   {
     x: -50,
     y: -50,
-    scale: 0.5,
+    scale: '0.5 hover:0.6 press:0.4',
     rotate: '-45deg',
-    hoverStyle: {
-      scale: 0.6,
-    },
-    pressStyle: {
-      scale: 0.4,
-    },
   },
   {
     x: 50,
     y: 50,
-    scale: 1,
+    scale: '1 hover:1.1 press:0.9',
     rotate: '180deg',
-    hoverStyle: {
-      scale: 1.1,
-    },
-    pressStyle: {
-      scale: 0.9,
-    },
   },
 ]

package/src/AnimationsEnterDemo.tsx

@@ -18,24 +18,19 @@ export function AnimationsEnterDemo(props: any) {
     <>
       <Square
         key={key}
-        enterStyle={{
-          scale: 1.5,
-          y: -10,
-          opacity: 0,
-        }}
+        opacity="1 enter:0"
+        scale="1 enter:1.5"
+        y="0 enter:-10px"
         transition="bouncy"
-        elevation="$4"
+        bg="color9"
+        rounded="9"
+        elevation="4"
         size={110}
-        opacity={1}
-        scale={1}
-        y={0}
-        bg="$color9"
-        rounded="$9"
       >
         {props.children ?? <LogoIcon downscale={0.75} />}
       </Square>
 
-      <Button size="$3" mt="$4" onPress={() => setKey(Math.random())}>
+      <Button size="3" mt="4" onPress={() => setKey(Math.random())}>
         Re-mount
       </Button>
     </>

package/src/AnimationsHoverDemo.tsx

@@ -4,18 +4,13 @@ import { Square } from 'tamagui'
 export function AnimationsHoverDemo() {
   return (
     <Square
-      borderColor="$borderColor"
+      borderColor="border-color"
       transition="bouncy"
-      elevation="$4"
-      bg="$color9"
+      bg="color9"
+      rounded="9"
+      scale="hover:1.2 press:0.9"
+      elevation="4"
       size={104}
-      rounded="$9"
-      hoverStyle={{
-        scale: 1.2,
-      }}
-      pressStyle={{
-        scale: 0.9,
-      }}
     >
       <LogoIcon downscale={0.75} />
     </Square>

package/src/AnimationsPresenceDemo.tsx

@@ -5,11 +5,11 @@ import { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons-2'
 import { Button, Image, XStack, YStack, styled } from 'tamagui'
 
 // @ts-ignore
-import photo1 from '../../public/photo1.jpg'
+import photo1 from '@tamagui/demos/photo/photo1'
 // @ts-ignore
-import photo2 from '../../public/photo2.jpg'
+import photo2 from '@tamagui/demos/photo/photo2'
 // @ts-ignore
-import photo3 from '../../public/photo3.jpg'
+import photo3 from '@tamagui/demos/photo/photo3'
 
 export const images = [photo1, photo2, photo3].map((x) => (x as any).src || x)
 
@@ -17,21 +17,16 @@ const GalleryItem = styled(YStack, {
   z: 1,
   x: 0,
   opacity: 1,
-  fullscreen: true,
+  position: 'absolute',
+  inset: 0,
 
   variants: {
     // 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,
-        },
+      number: (going) => ({
+        x: `enter:${going > 0 ? 1000 : -1000}px exit:${going < 0 ? 1000 : -1000}px`,
+        opacity: 'enter:0 exit:0',
+        zIndex: 'exit:0',
       }),
     },
   } as const,
@@ -68,25 +63,25 @@ export function AnimationsPresenceDemo() {
       <Button
         aria-label="Carousel left"
         icon={ArrowLeft}
-        size="$5"
+        size="5"
         position="absolute"
-        l="$4"
-        circular
-        onPress={() => paginate(-1)}
+        l="4"
         boxShadow="0 0 10px rgba(0,0,0,0.5)"
         z={100}
+        circular
+        onPress={() => paginate(-1)}
       />
 
       <Button
         aria-label="Carousel right"
         icon={ArrowRight}
-        size="$5"
+        size="5"
         position="absolute"
-        r="$4"
-        circular
-        onPress={() => paginate(1)}
+        r="4"
         boxShadow="0 0 10px rgba(0,0,0,0.5)"
         z={100}
+        circular
+        onPress={() => paginate(1)}
       />
     </XStack>
   )

package/src/AnimationsTimingDemo.tsx

@@ -4,17 +4,12 @@ import { Square } from 'tamagui'
 export function AnimationsTimingDemo() {
   return (
     <Square
-      bg="$color9"
+      bg="color9"
       transition="100ms"
-      elevation="$4"
+      rounded="9"
+      scale="hover:1.2 press:0.9"
+      elevation="4"
       size={110}
-      rounded="$9"
-      hoverStyle={{
-        scale: 1.2,
-      }}
-      pressStyle={{
-        scale: 0.9,
-      }}
     >
       <LogoIcon downscale={0.75} />
     </Square>

package/src/AvatarDemo.tsx

@@ -2,21 +2,21 @@ import { Avatar, XStack } from 'tamagui'
 
 export function AvatarDemo() {
   return (
-    <XStack items="center" gap="$6">
-      <Avatar circular size="$10">
+    <XStack items="center" gap="6">
+      <Avatar circular size="10">
         <Avatar.Image
           aria-label="Cam"
           src="https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
         />
-        <Avatar.Fallback bg="$blue10" />
+        <Avatar.Fallback bg="blue10" />
       </Avatar>
 
-      <Avatar circular size="$8">
+      <Avatar circular size="8">
         <Avatar.Image
           aria-label="Nate Wienert"
           src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
         />
-        <Avatar.Fallback delayMs={600} bg="$blue10" />
+        <Avatar.Fallback delay={600} bg="blue10" />
       </Avatar>
     </XStack>
   )

package/src/BoxShadowTokenDemo.tsx

@@ -1,19 +1,19 @@
 import { styled, View, Text, YStack } from 'tamagui'
 
-// styled() with boxShadow containing embedded $token
+// styled() with boxShadow containing an embedded token
 // if web imports are picked up on native, this resolves to var(--shadowColor)
 // which crashes with: [ReanimatedError: Invalid color "var(--shadowColor)"]
 const StyledShadowBox = styled(View, {
   width: 100,
   height: 100,
-  backgroundColor: '$color5',
-  borderRadius: '$4',
-  boxShadow: '0px 2px 8px $shadowColor',
+  backgroundColor: 'color5',
+  borderRadius: '4',
+  boxShadow: '0px 2px 8px shadow-color',
 })
 
 export function BoxShadowTokenDemo() {
   return (
-    <YStack gap="$4" items="center" p="$4">
+    <YStack gap="4" items="center" p="4">
       <Text testID="box-shadow-token-title">BoxShadow Token Test</Text>
 
       {/* styled() definition - breaks if web imports leak to native */}
@@ -23,9 +23,9 @@ export function BoxShadowTokenDemo() {
       <View
         width={100}
         height={100}
-        backgroundColor="$color5"
-        borderRadius="$4"
-        boxShadow="0px 2px 8px $shadowColor"
+        backgroundColor="color5"
+        borderRadius="4"
+        boxShadow="0px 2px 8px shadow-color"
         testID="box-shadow-prop"
       />
 

package/src/BuildAButtonDemo.tsx

@@ -3,35 +3,25 @@ import type { ButtonProps, ThemeName } from 'tamagui'
 import { Button, XStack, YStack } from 'tamagui'
 
 const outlined = {
-  bg: 'transparent',
+  bg: 'transparent hover:transparent',
   borderWidth: 2,
-  borderColor: '$background',
-  rounded: '$10',
-
-  hoverStyle: {
-    bg: 'transparent',
-    borderColor: '$backgroundPress',
-  },
+  borderColor: 'background hover:background-press',
+  rounded: '10',
 }
 
 export function BuildAButtonDemo() {
   return (
-    <YStack fullscreen overflow="hidden">
+    <YStack position="absolute" inset={0} overflow="hidden">
       <XStack maxH={200} y={-100} x={-40} rotate="-10deg">
-        <ButtonCol y={35} size="$2" {...outlined} subTheme="surface1" borderWidth={1} />
+        <ButtonCol y={35} size="2" {...outlined} subTheme="level2" borderWidth={1} />
         <ButtonCol y={30} />
         <ButtonCol y={-50} {...outlined} />
         <ButtonCol {...outlined} icon={<Hand />} />
-        <ButtonCol size="$6" subTheme="surface2" />
-        <ButtonCol size="$6" subTheme="surface2" {...outlined} />
-        <ButtonCol
-          size="$8"
-          subTheme="surface2"
-          iconAfter={<Drumstick />}
-          {...outlined}
-        />
-        <ButtonCol size="$10" subTheme="surface1" />
-        <ButtonCol size="$8" subTheme="surface2" {...outlined} rounded={0} />
+        <ButtonCol size="6" subTheme="level3" />
+        <ButtonCol size="6" subTheme="level3" {...outlined} />
+        <ButtonCol size="8" subTheme="level3" iconAfter={<Drumstick />} {...outlined} />
+        <ButtonCol size="10" subTheme="level2" />
+        <ButtonCol size="8" subTheme="level3" {...outlined} rounded={0} />
       </XStack>
     </YStack>
   )
@@ -42,8 +32,8 @@ function ButtonCol(props: any) {
   const subThemeSuffix = subTheme ? `_${subTheme}` : ''
 
   return (
-    <YStack p="$2" gap="$3">
-      <Button theme={props.subTheme} {...props}>
+    <YStack p="2" gap="3">
+      <Button theme={subTheme} {...buttonProps}>
         Hello
       </Button>
       <Button theme={('orange' + subThemeSuffix) as ThemeName} {...buttonProps}>