@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/src/TabsDemo.tsx

@@ -1,16 +1,6 @@
 import React from 'react'
 import type { TabsContentProps } from 'tamagui'
-import {
-  Button,
-  H5,
-  Separator,
-  SizableText,
-  Tabs,
-  XStack,
-  YStack,
-  isWeb,
-  useWindowDimensions,
-} from 'tamagui'
+import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb } from 'tamagui'
 
 const demos = ['horizontal', 'vertical'] as const
 const demosTitle: Record<(typeof demos)[number], string> = {
@@ -23,23 +13,18 @@ export function TabsDemo() {
   const demo = demos[demoIndex]
 
   return (
-    <YStack
-      px="$4"
-      {...(isWeb && {
-        position: 'unset' as any,
-      })}
-    >
+    <YStack px="4" {...(isWeb && { position: 'unset' as any })}>
       {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}
 
       <XStack
         items="center"
-        gap="$4"
+        gap="4"
         position="absolute"
-        b="$3"
-        l="$4"
-        $maxXs={{ display: 'none' }}
+        b="3"
+        l="4"
+        display="max-xs:none"
       >
-        <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
+        <Button size="2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
           {demosTitle[demo]}
         </Button>
       </XStack>
@@ -48,50 +33,48 @@ export function TabsDemo() {
 }
 
 const HorizontalTabs = () => {
-  const { width } = useWindowDimensions()
   return (
     <Tabs
       defaultValue="tab1"
       orientation="horizontal"
       flexDirection="column"
-      $maxMd={{ width: width - 32 }}
-      width={400}
+      width="400px max-md:calc(100vw - 32px)"
       height={150}
-      rounded="$4"
-      borderWidth="$0.25"
-      borderColor="$borderColor"
+      rounded="4"
+      borderWidth="0-25"
+      borderColor="border-color"
     >
       <Tabs.List aria-label="Manage your account">
         <Tabs.Tab
           activeStyle={{
-            backgroundColor: '$color3',
+            backgroundColor: 'color3',
           }}
           flex={1}
           value="tab1"
         >
-          <SizableText fontFamily="$body" text="center" ellipsis>
+          <SizableText fontFamily="body" text="center" ellipsis>
             Profile
           </SizableText>
         </Tabs.Tab>
         <Tabs.Tab
           activeStyle={{
-            backgroundColor: '$color3',
+            backgroundColor: 'color3',
           }}
           flex={1}
           value="tab2"
         >
-          <SizableText fontFamily="$body" text="center" ellipsis>
+          <SizableText fontFamily="body" text="center" ellipsis>
             Connections
           </SizableText>
         </Tabs.Tab>
         <Tabs.Tab
           activeStyle={{
-            backgroundColor: '$color3',
+            backgroundColor: 'color3',
           }}
           flex={1}
           value="tab3"
         >
-          <SizableText fontFamily="$body" text="center" ellipsis>
+          <SizableText fontFamily="body" text="center" ellipsis>
             Notifications
           </SizableText>
         </Tabs.Tab>
@@ -117,21 +100,21 @@ const VerticalTabs = () => {
     <Tabs
       defaultValue="tab1"
       flexDirection="row"
-      orientation="vertical"
       width={400}
-      rounded="$4"
-      borderWidth="$0.25"
+      rounded="4"
+      borderWidth="0-25"
       overflow="hidden"
-      borderColor="$borderColor"
+      borderColor="border-color"
+      orientation="vertical"
     >
       <Tabs.List aria-label="Manage your account">
-        <Tabs.Tab activeStyle={{ backgroundColor: '$color3' }} value="tab1">
+        <Tabs.Tab activeStyle={{ backgroundColor: 'color3' }} value="tab1">
           <SizableText>Profile</SizableText>
         </Tabs.Tab>
-        <Tabs.Tab activeStyle={{ backgroundColor: '$color3' }} value="tab2">
+        <Tabs.Tab activeStyle={{ backgroundColor: 'color3' }} value="tab2">
           <SizableText>Connections</SizableText>
         </Tabs.Tab>
-        <Tabs.Tab activeStyle={{ backgroundColor: '$color3' }} value="tab3">
+        <Tabs.Tab activeStyle={{ backgroundColor: 'color3' }} value="tab3">
           <SizableText>Notifications</SizableText>
         </Tabs.Tab>
       </Tabs.List>
@@ -152,18 +135,18 @@ const VerticalTabs = () => {
 const TabsContent = (props: TabsContentProps) => {
   return (
     <Tabs.Content
-      bg="$background"
-      key="tab3"
-      p="$2"
+      bg="background"
+      p="2"
       items="center"
       justify="center"
       flex={1}
-      borderColor="$background"
-      rounded="$2"
+      borderColor="background"
+      rounded="2"
       borderTopLeftRadius={0}
       borderTopRightRadius={0}
-      borderWidth="$2"
+      borderWidth="2"
       {...props}
+      key="tab3"
     >
       {props.children}
     </Tabs.Content>

package/src/TextDemo.tsx

@@ -2,9 +2,9 @@ import { Em, Paragraph, SizableText, Span, Strong, YStack } from 'tamagui'
 
 export function TextDemo() {
   return (
-    <YStack gap="$2" items="center">
-      <SizableText size="$3">SizableText</SizableText>
-      <Paragraph size="$2" fontWeight="800">
+    <YStack gap="2" items="center">
+      <SizableText size="3">SizableText</SizableText>
+      <Paragraph size="2" fontWeight="800">
         Paragraph
       </Paragraph>
       <Paragraph>

package/src/ThemeBuilderDemo.tsx

@@ -3,25 +3,25 @@ import { Square, XStack, YStack } from 'tamagui'
 
 export function ThemeBuilderDemo() {
   return (
-    <YStack fullscreen overflow="hidden">
+    <YStack position="absolute" inset={0} overflow="hidden">
       <XStack maxH={200} y={-100} x={-50} rotate="-10deg">
-        <Col y={35} bg="$color9" />
-        <Col size="$8" y={30} bg="$color7" />
-        <Col size="$6" y={-50} bg="$color5" />
-        <Col size="$4" bg="$color3" />
-        <Col size="$2" bg="$color1" />
-        <Col size="$4" y={50} bg="$color3" />
-        <Col size="$6" y={80} bg="$color5" />
-        <Col size="$8" bg="$color7" />
-        <Col bg="$color9" />
-        <Col size="$8" bg="$color7" />
-        <Col size="$6" y={80} bg="$color5" />
-        <Col size="$4" y={50} bg="$color3" />
-        <Col size="$2" bg="$color1" />
-        <Col size="$4" bg="$color3" />
-        <Col size="$6" y={-50} bg="$color5" />
-        <Col size="$8" y={30} bg="$color7" />
-        <Col y={35} bg="$color9" />
+        <Col y={35} bg="color9" />
+        <Col size="8" y={30} bg="color7" />
+        <Col size="6" y={-50} bg="color5" />
+        <Col size="4" bg="color3" />
+        <Col size="2" bg="color1" />
+        <Col size="4" y={50} bg="color3" />
+        <Col size="6" y={80} bg="color5" />
+        <Col size="8" bg="color7" />
+        <Col bg="color9" />
+        <Col size="8" bg="color7" />
+        <Col size="6" y={80} bg="color5" />
+        <Col size="4" y={50} bg="color3" />
+        <Col size="2" bg="color1" />
+        <Col size="4" bg="color3" />
+        <Col size="6" y={-50} bg="color5" />
+        <Col size="8" y={30} bg="color7" />
+        <Col y={35} bg="color9" />
       </XStack>
     </YStack>
   )
@@ -32,92 +32,93 @@ function Col(
     subTheme?: any
   }
 ) {
-  const subTheme = props.subTheme ? `_${props.subTheme}` : ''
+  const { subTheme: subThemeName, ...squareProps } = props
+  const subTheme = subThemeName ? `_${subThemeName}` : ''
   return (
-    <YStack p="$2.5" gap="$3.5">
+    <YStack p="2-5" gap="3-5">
       <Square
-        rounded="$6"
-        size="$10"
-        theme={props.subTheme}
-        bg="$background"
-        {...props}
+        rounded="6"
+        size="10"
+        theme={subThemeName}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('orange' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('yellow' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('green' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('blue' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('purple' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('pink' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('red' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
-        theme={props.subTheme}
-        bg="$background"
-        {...props}
+        rounded="6"
+        size="10"
+        theme={subThemeName}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('orange' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('yellow' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('green' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
     </YStack>
   )

package/src/ThemeInverseDemo.tsx

@@ -2,34 +2,34 @@ import { Button, H5, Theme, XStack, YStack } from 'tamagui'
 
 export function ThemeInverseDemo() {
   return (
-    <XStack gap="$4" flexWrap="wrap">
-      <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+    <XStack gap="4" flexWrap="wrap">
+      <YStack elevation="4" bg="background" p="4" rounded="4" gap="3">
         <H5>Base Theme</H5>
         <Button>Normal</Button>
-        <Button theme="accent">Accent</Button>
+        <Button theme="inverse">Inverse</Button>
       </YStack>
 
       <Theme name="red">
-        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+        <YStack elevation="4" bg="background" p="4" rounded="4" gap="3">
           <H5>Red Theme</H5>
           <Button>Normal</Button>
-          <Button theme="accent">Accent</Button>
+          <Button theme="inverse">Inverse</Button>
         </YStack>
       </Theme>
 
       <Theme name="blue">
-        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+        <YStack elevation="4" bg="background" p="4" rounded="4" gap="3">
           <H5>Blue Theme</H5>
           <Button>Normal</Button>
-          <Button theme="accent">Accent</Button>
+          <Button theme="inverse">Inverse</Button>
         </YStack>
       </Theme>
 
       <Theme name="green">
-        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+        <YStack elevation="4" bg="background" p="4" rounded="4" gap="3">
           <H5>Green Theme</H5>
           <Button>Normal</Button>
-          <Button theme="accent">Accent</Button>
+          <Button theme="inverse">Inverse</Button>
         </YStack>
       </Theme>
     </XStack>

package/src/ToastDemo.tsx

@@ -1,11 +1,4 @@
-import { isWeb } from 'tamagui'
-import {
-  Toast,
-  toast,
-  useToastItem,
-  type ToastPosition,
-  type ToastT,
-} from '@tamagui/toast/v2'
+import { toast, useToastItem, type ToastPosition, type ToastT } from '@tamagui/toast'
 import {
   ArrowDown,
   ArrowDownLeft,
@@ -15,7 +8,7 @@ import {
   ArrowUpRight,
 } from '@tamagui/lucide-icons-2'
 import { useRef, useState } from 'react'
-import { Button, Label, SizableText, Slider, XStack, YStack } from 'tamagui'
+import { Button, isWeb, Label, SizableText, Slider, Toast, XStack, YStack } from 'tamagui'
 
 export const ToastDemo = () => {
   const [position, setPosition] = useState<ToastPosition>('bottom-right')
@@ -28,12 +21,14 @@ export const ToastDemo = () => {
     setPosition(newPosition)
     count.current++
     toast(`Toast #${count.current}`, {
+      toasterId: 'demo',
       description: 'Swipe to dismiss or wait for auto-close.',
     })
   }
 
   return (
     <Toast
+      toasterId="demo"
       position={position}
       gap={Math.round(gap)}
       visibleToasts={visibleToasts}
@@ -49,10 +44,10 @@ export const ToastDemo = () => {
         />
       </Toast.Viewport>
 
-      <YStack gap="$3" self="center" width={280}>
+      <YStack gap="3" self="center" width={280}>
         {/* Position buttons */}
-        <YStack gap="$2" self="center">
-          <XStack gap="$2">
+        <YStack gap="2" self="center">
+          <XStack gap="2">
             <PositionButton
               position="top-left"
               current={position}
@@ -73,7 +68,7 @@ export const ToastDemo = () => {
               testID="toast-top-right-button"
             />
           </XStack>
-          <XStack gap="$2">
+          <XStack gap="2">
             <PositionButton
               position="bottom-left"
               current={position}
@@ -97,7 +92,7 @@ export const ToastDemo = () => {
         </YStack>
 
         {/* Controls */}
-        <YStack gap="$1" paddingTop="$1">
+        <YStack gap="1" paddingTop="1">
           <DemoSlider
             label="Gap"
             value={gap}
@@ -138,16 +133,16 @@ function ToastContent({ toast: t }: { toast: ToastT }) {
 
   return (
     <>
-      <XStack gap="$3" alignItems="flex-start">
+      <XStack gap="3" alignItems="flex-start">
         <Toast.Icon />
-        <YStack flex={1} gap="$0.5">
+        <YStack flex={1} gap="0-5">
           {title && (
-            <Toast.Title fontWeight="600" size="$3">
+            <Toast.Title fontWeight="600" size="3">
               {title}
             </Toast.Title>
           )}
           {description && (
-            <Toast.Description color="$color9" size="$2">
+            <Toast.Description color="color9" size="2">
               {description}
             </Toast.Description>
           )}
@@ -185,8 +180,8 @@ function DemoSlider({
   format?: (v: number) => string
 }) {
   return (
-    <XStack gap="$2" alignItems="center">
-      <Label size="$2" width={55}>
+    <XStack gap="2" alignItems="center">
+      <Label size="2" width={55}>
         {label}
       </Label>
       <Slider
@@ -202,7 +197,7 @@ function DemoSlider({
         </Slider.Track>
         <Slider.Thumb theme="accent" size={16} borderRadius={100} index={0} />
       </Slider>
-      <SizableText userSelect="none" size="$2" width={35} textAlign="right">
+      <SizableText userSelect="none" size="2" width={35} textAlign="right">
         {format ? format(value) : Math.round(value)}
       </SizableText>
     </XStack>

package/src/ToastDuplicateDemo.tsx

@@ -1,13 +1,13 @@
 import { CheckCircle2 } from '@tamagui/lucide-icons-2'
-import { Toast, toast, useToasts } from '@tamagui/toast/v2'
-import { Button, XStack, YStack } from 'tamagui'
+import { toast, useToasts } from '@tamagui/toast'
+import { Button, Toast, XStack, YStack } from 'tamagui'
 
 /**
  *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the Toast wrapper as well.
  */
 export const ToastDuplicateDemo = () => {
   return (
-    <Toast>
+    <Toast toasterId="duplicate-demo">
       <Toast.Viewport>
         <ToastList />
       </Toast.Viewport>
@@ -16,6 +16,7 @@ export const ToastDuplicateDemo = () => {
         <Button
           onPress={() => {
             toast('Successfully saved!', {
+              toasterId: 'duplicate-demo',
               description: "Don't worry... We've got your data.",
             })
           }}
@@ -34,7 +35,7 @@ const ToastList = () => {
     <>
       {toasts.map((t, index) => (
         <Toast.Item key={t.id} toast={t} index={index}>
-          <XStack gap="$4" items="center">
+          <XStack gap="4" items="center">
             <YStack>
               <CheckCircle2 />
             </YStack>

package/src/ToggleGroupDemo.tsx

@@ -3,13 +3,13 @@ import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from 'tamagui'
 
 export function ToggleGroupDemo() {
   return (
-    <YStack px="$4">
-      <XStack items="center" gap="$10">
-        <YStack items="center" gap="$6">
+    <YStack px="4">
+      <XStack items="center" gap="10">
+        <YStack items="center" gap="6">
           <ToggleGroupComponent type="single" orientation="horizontal" />
           <ToggleGroupComponent type="multiple" orientation="horizontal" />
         </YStack>
-        <XStack items="center" gap="$6" y={-28}>
+        <XStack items="center" gap="6" y={-28}>
           <ToggleGroupComponent type="single" orientation="vertical" />
           <ToggleGroupComponent type="multiple" orientation="vertical" />
         </XStack>
@@ -30,9 +30,9 @@ function ToggleGroupComponent(props: {
       flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}
       items="center"
       justify="center"
-      gap="$4"
+      gap="4"
     >
-      <Label pr="$0" justify="flex-end" size="$4" htmlFor={id}>
+      <Label pr="0" justify="flex-end" size="4" htmlFor={id}>
         {props.type === 'single' ? 'Single' : 'Multiple'}
       </Label>
 
@@ -47,8 +47,8 @@ function ToggleGroupComponent(props: {
             <ToggleGroup.Item
               value="left"
               aria-label="Left aligned"
-              borderRadius="$4"
-              activeStyle={{ backgroundColor: '$color5' }}
+              borderRadius="4"
+              activeStyle={{ backgroundColor: 'color5' }}
             >
               <AlignLeft size={16} />
             </ToggleGroup.Item>
@@ -58,8 +58,8 @@ function ToggleGroupComponent(props: {
             <ToggleGroup.Item
               value="center"
               aria-label="Center aligned"
-              borderRadius="$4"
-              activeStyle={{ backgroundColor: '$color5' }}
+              borderRadius="4"
+              activeStyle={{ backgroundColor: 'color5' }}
             >
               <AlignCenter size={16} />
             </ToggleGroup.Item>
@@ -69,8 +69,8 @@ function ToggleGroupComponent(props: {
             <ToggleGroup.Item
               value="right"
               aria-label="Right aligned"
-              borderRadius="$4"
-              activeStyle={{ backgroundColor: '$color5' }}
+              borderRadius="4"
+              activeStyle={{ backgroundColor: 'color5' }}
             >
               <AlignRight size={16} />
             </ToggleGroup.Item>

package/src/TokensDemo.tsx

@@ -28,13 +28,13 @@ export function TokensDemo() {
   const [section, setSection] = React.useState<Section>('size')
 
   return (
-    <YStack gap="$4">
+    <YStack gap="4">
       <XGroup items="center" self="center">
         {sections.map(({ name, key }) => {
           return (
             <XGroup.Item key={key}>
               <Button
-                size="$3"
+                size="3"
                 theme={section === key ? 'accent' : null}
                 onPress={() => setSection(key)}
               >
@@ -65,24 +65,24 @@ function SizeSection({ section }: { section: Section }) {
     .sort((a, b) => (Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1))
 
   return (
-    <YStack flex={1} gap="$4">
+    <YStack flex={1} gap="4">
       <H2>Sizes</H2>
-      <YStack width="100%" gap="$2">
+      <YStack width="100%" gap="2">
         {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(
           (token) => {
             return (
               <XStack width="100%" items="center" key={token}>
                 <YStack width="25%">
-                  <H3 size="$6">${token}</H3>
+                  <H3 size="6">${token}</H3>
                 </YStack>
                 <YStack width="20%">
-                  <H4 size="$5">{tokens[token]?.val}px</H4>
+                  <H4 size="5">{tokens[token]?.val}px</H4>
                 </YStack>
                 <Square
                   size={tokens[token]?.val as any}
-                  backgroundColor="$color5"
+                  backgroundColor="color5"
                   {...(section === 'spaceNegative' && {
-                    backgroundColor: '$red5',
+                    backgroundColor: 'red5',
                     size:
                       -tokens[
                         spaceTokensNegative.find(