@tamagui/demos 2.7.7 → 3.0.0-beta.1091.1

package/src/TabsAdvancedDemo.tsx

@@ -24,15 +24,8 @@ export const TabsAdvancedDemo = () => {
     <>
       {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}
 
-      <XStack
-        items="center"
-        gap="$4"
-        position="absolute"
-        b="$3"
-        l="$4"
-        $xxs={{ display: 'none' }}
-      >
-        <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
+      <XStack items="center" gap="4" position="absolute" b="3" l="4" display="xxs:none">
+        <Button size="2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
           {demosTitle[demo]}
         </Button>
       </XStack>
@@ -89,18 +82,18 @@ const TabsAdvancedBackground = () => {
       value={currentTab}
       onValueChange={setCurrentTab}
       orientation="horizontal"
-      size="$4"
-      p="$2"
+      size="4"
+      p="2"
       height={150}
       flexDirection="column"
+      bg="background"
+      rounded="4"
       activationMode="manual"
-      bg="$background"
-      rounded="$4"
     >
       <AnimatePresence>
         {intentAt && (
           <TabsRovingIndicator
-            rounded="$4"
+            rounded="4"
             width={intentAt.width}
             height={intentAt.height}
             x={intentAt.x}
@@ -112,7 +105,7 @@ const TabsAdvancedBackground = () => {
       <AnimatePresence>
         {activeAt && (
           <TabsRovingIndicator
-            rounded="$4"
+            rounded="4"
             theme="accent"
             width={activeAt.width}
             height={activeAt.height}
@@ -126,12 +119,12 @@ const TabsAdvancedBackground = () => {
         <Tabs.List
           loop={false}
           aria-label="Manage your account"
-          gap="$2"
+          gap="2"
           backgroundColor="transparent"
         >
           <Tabs.Tab
             unstyled
-            paddingHorizontal="$3"
+            paddingHorizontal="3"
             value="tab1"
             onInteraction={handleOnInteraction}
           >
@@ -139,7 +132,7 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingHorizontal="$3"
+            paddingHorizontal="3"
             value="tab2"
             onInteraction={handleOnInteraction}
           >
@@ -147,7 +140,7 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingHorizontal="$3"
+            paddingHorizontal="3"
             value="tab3"
             onInteraction={handleOnInteraction}
           >
@@ -156,7 +149,7 @@ const TabsAdvancedBackground = () => {
         </Tabs.List>
       </YStack>
 
-      <AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
+      <AnimatePresence mode="wait" custom={{ direction }} initial={false}>
         <AnimatedYStack key={currentTab}>
           <Tabs.Content value={currentTab} forceMount flex={1} justify="center">
             <H5 text="center">{currentTab}</H5>
@@ -216,19 +209,19 @@ const TabsAdvancedUnderline = () => {
       value={currentTab}
       onValueChange={setCurrentTab}
       orientation="horizontal"
-      size="$4"
+      size="4"
       height={150}
       flexDirection="column"
+      bg="background"
+      rounded="4"
       activationMode="manual"
-      bg="$background"
-      rounded="$4"
     >
       <YStack position="relative">
         <AnimatePresence>
           {intentAt && (
             <TabsRovingIndicator
               width={intentAt.width}
-              height="$0.5"
+              height="0-5"
               x={intentAt.x}
               b={0}
             />
@@ -240,7 +233,7 @@ const TabsAdvancedUnderline = () => {
               theme="accent"
               active
               width={activeAt.width}
-              height="$0.5"
+              height="0-5"
               x={activeAt.x}
               b={0}
             />
@@ -251,14 +244,14 @@ const TabsAdvancedUnderline = () => {
           aria-label="Manage your account"
           borderBottomLeftRadius={0}
           borderBottomRightRadius={0}
-          paddingBottom="$1.5"
-          borderColor="$color3"
-          borderBottomWidth="$0.5"
+          paddingBottom="1-5"
+          borderColor="color3"
+          borderBottomWidth="0-5"
           backgroundColor="transparent"
         >
           <Tabs.Tab
             unstyled
-            paddingHorizontal="$3"
+            paddingHorizontal="3"
             value="tab1"
             onInteraction={handleOnInteraction}
           >
@@ -268,7 +261,7 @@ const TabsAdvancedUnderline = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingHorizontal="$3"
+            paddingHorizontal="3"
             value="tab2"
             onInteraction={handleOnInteraction}
           >
@@ -278,7 +271,7 @@ const TabsAdvancedUnderline = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingHorizontal="$3"
+            paddingHorizontal="3"
             value="tab3"
             onInteraction={handleOnInteraction}
           >
@@ -310,19 +303,10 @@ const TabsRovingIndicator = ({ active, ...props }: { active?: boolean } & ViewPr
   return (
     <YStack
       position="absolute"
-      backgroundColor="$color5"
-      opacity={0.7}
+      backgroundColor="color5"
+      opacity="0.7 enter:0 exit:0"
       transition="100ms"
-      enterStyle={{
-        opacity: 0,
-      }}
-      exitStyle={{
-        opacity: 0,
-      }}
-      {...(active && {
-        backgroundColor: '$color5',
-        opacity: 0.6,
-      })}
+      {...(active && { backgroundColor: 'color5', opacity: 0.6 })}
       {...props}
     />
   )
@@ -336,18 +320,10 @@ const AnimatedYStack = styled(YStack, {
   transition: '100ms',
   variants: {
     // 1 = right, 0 = nowhere, -1 = left
-    direction: {
-      ':number': (direction) => ({
-        enterStyle: {
-          x: direction > 0 ? -25 : 25,
-          opacity: 0,
-        },
-        exitStyle: {
-          zIndex: 0,
-          x: direction < 0 ? -25 : 25,
-          opacity: 0,
-        },
-      }),
-    },
+    direction: styled.dynamic<number>((direction) => ({
+      x: `enter:${direction > 0 ? -25 : 25}px exit:${direction < 0 ? -25 : 25}px`,
+      opacity: 'enter:0 exit:0',
+      zIndex: 'exit:0',
+    })),
   } as const,
 })

package/src/{TabsHeadlessDemo.tsx → TabsCustomDemo.tsx}

@@ -1,31 +1,35 @@
 import React, { useState } from 'react'
 import {
   Button,
-  SizableStack,
-  ThemeableStack,
   XStack,
   YStack,
   isWeb,
+  resolveSize,
+  style,
   styled,
+  withStaticProperties,
 } from 'tamagui'
-import { createTabs } from '@tamagui/tabs'
-import { getButtonSized } from '@tamagui/get-button-sized'
+import { Tabs as TabsBehavior } from '@tamagui/tabs'
+
+const transparentActiveStyle = style({ backgroundColor: 'transparent' })
+
+const tabSizeVariant = styled.dynamic<any>((value, env) => {
+  return resolveSize(value, env).frame
+})
 
 const demos = ['horizontal', 'vertical'] as const
 
-export const TabsFrame = styled(SizableStack, {
-  name: 'TabsFrame',
+export const TabsFrame = styled(TabsBehavior, {
+  displayName: 'TabsFrame',
 })
 
-export const TabFrame = styled(ThemeableStack, {
-  name: 'TabsTrigger',
+export const TabFrame = styled(TabsBehavior.Tab, {
+  displayName: 'TabsTrigger',
   render: 'button',
   cursor: 'pointer',
   backgroundColor: 'transparent',
   variants: {
-    size: {
-      '...size': getButtonSized,
-    },
+    size: tabSizeVariant,
 
     disabled: {
       true: {
@@ -35,13 +39,7 @@ export const TabFrame = styled(ThemeableStack, {
 
     active: {
       true: {
-        hoverStyle: {
-          backgroundColor: '$background',
-        },
-
-        focusStyle: {
-          backgroundColor: '$background',
-        },
+        backgroundColor: 'hover:background focus:background',
       },
     },
   } as const,
@@ -49,45 +47,33 @@ export const TabFrame = styled(ThemeableStack, {
 
 const CONTENT_NAME = 'TabsContent'
 
-export const ContentFrame = styled(ThemeableStack, {
-  name: CONTENT_NAME,
+export const ContentFrame = styled(TabsBehavior.Content, {
+  displayName: CONTENT_NAME,
   flex: 1,
-  p: '$6',
+  p: '6',
   justify: 'center',
   items: 'center',
-  bg: '$color4',
-  rounded: '$4',
+  bg: 'color4',
+  rounded: '4',
 })
 
-export const CustomTabs = createTabs({
-  TabsFrame,
-  TabFrame,
-  ContentFrame,
+export const CustomTabs = withStaticProperties(TabsFrame, {
+  List: TabsBehavior.List,
+  Tab: TabFrame,
+  Content: ContentFrame,
 })
 
-export function TabsHeadlessDemo() {
+export function TabsCustomDemo() {
   const [demo, setDemo] = useState<(typeof demos)[number]>(demos[0])
 
   return (
     // web only fix for position relative
-    <YStack
-      px="$4"
-      {...(isWeb && {
-        position: 'static',
-      })}
-    >
+    <YStack px="4" {...(isWeb && { position: 'static' })}>
       <TabsView flexDirection={demo === 'horizontal' ? 'row' : 'column'} />
 
-      <XStack
-        items="center"
-        gap="$4"
-        position="absolute"
-        b="$3"
-        l="$4"
-        $xxs={{ display: 'none' }}
-      >
+      <XStack items="center" gap="4" position="absolute" b="3" l="4" display="xxs:none">
         <Button
-          size="$2"
+          size="3"
           onPress={() => setDemo(demo === 'horizontal' ? 'vertical' : 'horizontal')}
         >
           <Button.Text textTransform="capitalize">{demo}</Button.Text>
@@ -107,11 +93,7 @@ const TabsView = ({ flexDirection = 'row' }: { flexDirection: 'row' | 'column' }
     >
       <CustomTabs.List flexDirection={flexDirection}>
         {content.map((name, index) => (
-          <CustomTabs.Tab
-            key={index}
-            value={name}
-            activeStyle={{ backgroundColor: 'transparent' }}
-          >
+          <CustomTabs.Tab key={index} value={name} activeStyle={transparentActiveStyle}>
             {name}
           </CustomTabs.Tab>
         ))}

package/src/TabsDemo.tsx

@@ -9,9 +9,11 @@ import {
   XStack,
   YStack,
   isWeb,
-  useWindowDimensions,
+  style,
 } from 'tamagui'
 
+const activeTabStyle = style({ backgroundColor: 'color3' })
+
 const demos = ['horizontal', 'vertical'] as const
 const demosTitle: Record<(typeof demos)[number], string> = {
   horizontal: 'Horizontal',
@@ -23,23 +25,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 +45,30 @@ 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',
-          }}
-          flex={1}
-          value="tab1"
-        >
-          <SizableText fontFamily="$body" text="center" ellipsis>
+        <Tabs.Tab activeStyle={activeTabStyle} flex={1} value="tab1">
+          <SizableText fontFamily="body" text="center" ellipsis>
             Profile
           </SizableText>
         </Tabs.Tab>
-        <Tabs.Tab
-          activeStyle={{
-            backgroundColor: '$color3',
-          }}
-          flex={1}
-          value="tab2"
-        >
-          <SizableText fontFamily="$body" text="center" ellipsis>
+        <Tabs.Tab activeStyle={activeTabStyle} flex={1} value="tab2">
+          <SizableText fontFamily="body" text="center" ellipsis>
             Connections
           </SizableText>
         </Tabs.Tab>
-        <Tabs.Tab
-          activeStyle={{
-            backgroundColor: '$color3',
-          }}
-          flex={1}
-          value="tab3"
-        >
-          <SizableText fontFamily="$body" text="center" ellipsis>
+        <Tabs.Tab activeStyle={activeTabStyle} flex={1} value="tab3">
+          <SizableText fontFamily="body" text="center" ellipsis>
             Notifications
           </SizableText>
         </Tabs.Tab>
@@ -117,21 +94,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={activeTabStyle} value="tab1">
           <SizableText>Profile</SizableText>
         </Tabs.Tab>
-        <Tabs.Tab activeStyle={{ backgroundColor: '$color3' }} value="tab2">
+        <Tabs.Tab activeStyle={activeTabStyle} value="tab2">
           <SizableText>Connections</SizableText>
         </Tabs.Tab>
-        <Tabs.Tab activeStyle={{ backgroundColor: '$color3' }} value="tab3">
+        <Tabs.Tab activeStyle={activeTabStyle} value="tab3">
           <SizableText>Notifications</SizableText>
         </Tabs.Tab>
       </Tabs.List>
@@ -152,18 +129,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>