@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/src/SheetDemo.tsx

@@ -1,8 +1,15 @@
 import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons-2'
-import type { SheetProps } from '@tamagui/sheet'
-import { Sheet } from '@tamagui/sheet'
 import React, { memo } from 'react'
-import { Button, H2, Input, Paragraph, XStack, YStack } from 'tamagui'
+import {
+  Button,
+  H2,
+  Input,
+  Paragraph,
+  Sheet,
+  type SheetProps,
+  XStack,
+  YStack,
+} from 'tamagui'
 
 const spModes = ['percent', 'constant', 'fit', 'mixed'] as const
 
@@ -31,8 +38,8 @@ export const SheetDemo = () => {
 
   return (
     <>
-      <YStack gap="$4">
-        <XStack gap="$4" $maxMd={{ flexDirection: 'column', items: 'center' }}>
+      <YStack gap="4">
+        <XStack gap="4" flexDirection="max-md:column" items="max-md:center">
           <Button onPress={() => setOpen(true)}>Open</Button>
           <Button onPress={() => setModal((x) => !x)}>
             {modal ? 'Type: Modal' : 'Type: Inline'}
@@ -56,7 +63,7 @@ export const SheetDemo = () => {
             {`Snap Points: ${JSON.stringify(snapPoints)}`}
           </Button>
         ) : (
-          <XStack py="$2.5" justify="center">
+          <XStack py="2-5" justify="center">
             <Paragraph>
               {`Snap Points: ${isFit ? '(none)' : JSON.stringify(snapPoints)}`}
             </Paragraph>
@@ -76,17 +83,13 @@ export const SheetDemo = () => {
         zIndex={100_000}
         transition="medium"
       >
-        <Sheet.Overlay
-          transition="lazy"
-          bg="$shadow6"
-          enterStyle={{ opacity: 0 }}
-          exitStyle={{ opacity: 0 }}
-        />
+        <Sheet.Overlay transition="lazy" bg="shadow6" opacity="enter:0 exit:0" />
 
         <Sheet.Handle />
-        <Sheet.Frame p="$4" justify="center" items="center" gap="$5">
+        <Sheet.Container p="4" justify="center" items="center" gap="5">
+          <Sheet.Background />
           <SheetContents {...{ modal, isPercent, innerOpen, setInnerOpen, setOpen }} />
-        </Sheet.Frame>
+        </Sheet.Container>
       </Sheet>
     </>
   )
@@ -97,13 +100,13 @@ const SheetContents = memo(
   ({ modal, isPercent, innerOpen, setInnerOpen, setOpen }: any) => {
     return (
       <>
-        <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
+        <Button size="6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
         <Input width={200} />
         {modal && isPercent && (
           <>
             <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
             <Button
-              size="$6"
+              size="6"
               circular
               icon={ChevronUp}
               onPress={() => setInnerOpen(true)}
@@ -118,19 +121,15 @@ const SheetContents = memo(
 function InnerSheet(props: SheetProps) {
   return (
     <Sheet transition="medium" modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
-      <Sheet.Overlay
-        transition="medium"
-        bg="$shadow2"
-        enterStyle={{ opacity: 0 }}
-        exitStyle={{ opacity: 0 }}
-      />
+      <Sheet.Overlay transition="medium" bg="shadow2" opacity="enter:0 exit:0" />
 
       <Sheet.Handle />
-      <Sheet.Frame flex={1} justify="center" items="center" gap="$5">
+      <Sheet.Container flex={1} justify="center" items="center" gap="5">
+        <Sheet.Background />
         <Sheet.ScrollView>
-          <YStack p="$5" gap="$8">
+          <YStack p="5" gap="8">
             <Button
-              size="$6"
+              size="6"
               circular
               self="center"
               icon={ChevronDown}
@@ -139,7 +138,7 @@ function InnerSheet(props: SheetProps) {
 
             <H2>Hello world</H2>
             {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
-              <Paragraph key={i} size="$8">
+              <Paragraph key={i} size="8">
                 Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad
                 pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation
                 ipsum deserunt occaecat cupidatat consequat est adipisicing velit
@@ -150,7 +149,7 @@ function InnerSheet(props: SheetProps) {
             ))}
           </YStack>
         </Sheet.ScrollView>
-      </Sheet.Frame>
+      </Sheet.Container>
     </Sheet>
   )
 }

package/src/SliderDemo.tsx

@@ -3,7 +3,7 @@ import { Slider, Theme, XStack } from 'tamagui'
 
 export function SliderDemo() {
   return (
-    <XStack height={200} items="center" gap="$8">
+    <XStack height={200} items="center" gap="8">
       <SimpleSlider height={200} orientation="vertical" />
       <SimpleSlider width={200} />
     </XStack>

package/src/SpinnerDemo.tsx

@@ -2,9 +2,9 @@ import { Spinner, YStack } from 'tamagui'
 
 export function SpinnerDemo() {
   return (
-    <YStack p="$3" gap="$4" items="center">
-      <Spinner size="small" color="$green10" />
-      <Spinner size="large" color="$yellow10" />
+    <YStack p="3" gap="4" items="center">
+      <Spinner size="small" color="green10" />
+      <Spinner size="large" color="yellow10" />
     </YStack>
   )
 }

package/src/StacksDemo.tsx

@@ -3,54 +3,63 @@ import { XStack, YStack, ZStack } from 'tamagui'
 
 export function StacksDemo() {
   return (
-    <XStack maxW={250} p="$2" self="center" gap="$2">
+    <XStack maxW={250} p="2" self="center" gap="2">
       <YStack
         flex={1}
         flexBasis="auto"
         borderWidth={2}
-        borderColor="$color"
-        rounded="$4"
-        gap="$2"
-        p="$2"
+        borderColor="color"
+        rounded="4"
+        gap="2"
+        p="2"
       >
-        <YStack bg="$color" rounded="$3" p="$2" />
-        <YStack bg="$color" rounded="$3" p="$2" />
-        <YStack bg="$color" rounded="$3" p="$2" />
+        <YStack bg="color" rounded="3" p="2" />
+        <YStack bg="color" rounded="3" p="2" />
+        <YStack bg="color" rounded="3" p="2" />
       </YStack>
 
       <XStack
         flex={1}
         flexBasis="auto"
         borderWidth={2}
-        borderColor="$color"
-        rounded="$4"
-        gap="$2"
-        p="$2"
+        borderColor="color"
+        rounded="4"
+        gap="2"
+        p="2"
       >
-        <YStack bg="$color" rounded="$3" p="$2" />
-        <YStack bg="$color" rounded="$3" p="$2" />
-        <YStack bg="$color" rounded="$3" p="$2" />
+        <YStack bg="color" rounded="3" p="2" />
+        <YStack bg="color" rounded="3" p="2" />
+        <YStack bg="color" rounded="3" p="2" />
       </XStack>
 
       <ZStack flex={1} flexBasis="auto" maxW={50} maxH={85} width={100}>
-        <YStack fullscreen rounded="$4" p="$2" borderColor="$color" borderWidth={2} />
         <YStack
-          borderColor="$color"
-          fullscreen
+          position="absolute"
+          inset={0}
+          rounded="4"
+          p="2"
+          borderColor="color"
+          borderWidth={2}
+        />
+        <YStack
+          borderColor="color"
+          position="absolute"
+          inset={0}
           y={10}
           x={10}
           borderWidth={2}
-          rounded="$4"
-          p="$2"
+          rounded="4"
+          p="2"
         />
         <YStack
-          borderColor="$color"
-          fullscreen
+          borderColor="color"
+          position="absolute"
+          inset={0}
           y={20}
           x={20}
           borderWidth={2}
-          rounded="$4"
-          p="$2"
+          rounded="4"
+          p="2"
         />
       </ZStack>
     </XStack>

package/src/SwitchDemo.tsx

@@ -1,21 +1,21 @@
 import type { SizeTokens } from 'tamagui'
-import { Label, Separator, Switch, Theme, XStack, YStack } from 'tamagui'
+import { Label, Separator, Switch, XStack, YStack } from 'tamagui'
 
 export function SwitchDemo() {
   return (
     <>
-      <YStack width={200} items="center" gap="$3">
-        <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
-          <SwitchWithLabel size="$2" />
-          <SwitchWithLabel size="$2" defaultChecked />
+      <YStack width={200} items="center" gap="3">
+        <XStack gap="3" flexDirection="xs:column">
+          <SwitchWithLabel size="2" />
+          <SwitchWithLabel size="2" defaultChecked />
         </XStack>
-        <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
-          <SwitchWithLabel size="$3" />
-          <SwitchWithLabel size="$3" defaultChecked />
+        <XStack gap="3" flexDirection="xs:column">
+          <SwitchWithLabel size="3" />
+          <SwitchWithLabel size="3" defaultChecked />
         </XStack>
-        <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
-          <SwitchWithLabel size="$4" />
-          <SwitchWithLabel size="$4" defaultChecked />
+        <XStack gap="3" flexDirection="xs:column">
+          <SwitchWithLabel size="4" />
+          <SwitchWithLabel size="4" defaultChecked />
         </XStack>
       </YStack>
     </>
@@ -27,10 +27,10 @@ export function SwitchWithLabel(props: {
   defaultChecked?: boolean
   activeStyle?: boolean
 }) {
-  const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ''}}`
+  const id = `switch-${props.size}-${props.defaultChecked ?? ''}}`
   return (
-    <XStack width={200} items="center" gap="$4">
-      <Label pr="$0" minW={90} justify="flex-end" size={props.size} htmlFor={id}>
+    <XStack width={200} items="center" gap="4">
+      <Label pr="0" minW={90} justify="flex-end" size={props.size} htmlFor={id}>
         Accept
       </Label>
       <Separator minH={20} vertical />
@@ -39,10 +39,9 @@ export function SwitchWithLabel(props: {
         transition="300ms"
         size={props.size}
         defaultChecked={props.defaultChecked}
-        // use activeStyle to choose youra active color
-        // default to $backgroundActive unless "unstyled" boolean prop is on
+        // use activeStyle to choose your checked-state color
         activeStyle={{
-          backgroundColor: '$color6',
+          backgroundColor: 'color6',
         }}
       >
         <Switch.Thumb transition="quickest" />

package/src/SwitchHeadlessDemo.tsx

@@ -8,8 +8,8 @@ import { Label, XStack, YStack } from 'tamagui'
 
 export function SwitchHeadlessDemo() {
   return (
-    <YStack width={200} items="center" gap="$3">
-      <XStack gap="$3" items="center">
+    <YStack width={200} items="center" gap="3">
+      <XStack gap="3" items="center">
         <Label htmlFor="headless">Headless</Label>
         <HeadlessSwitch defaultChecked id="headless" />
       </XStack>

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}
     />
   )
@@ -337,16 +321,10 @@ const AnimatedYStack = styled(YStack, {
   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,
-        },
+      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,30 +1,42 @@
 import React, { useState } from 'react'
 import {
   Button,
-  SizableStack,
-  ThemeableStack,
   XStack,
   YStack,
   isWeb,
+  resolveTokenSize,
   styled,
+  type VariantSpreadExtras,
+  withStaticProperties,
 } from 'tamagui'
-import { createTabs } from '@tamagui/tabs'
-import { getButtonSized } from '@tamagui/get-button-sized'
+import { Tabs as TabsBehavior } from '@tamagui/tabs'
+
+const tabSizeVariant = (value: any, extras: VariantSpreadExtras<any>) => {
+  const { frame } = resolveTokenSize(value, {
+    tokens: extras.tokens,
+    font: extras.font!,
+  })
+  return {
+    borderRadius: frame.radius,
+    height: frame.size,
+    paddingHorizontal: frame.space,
+  }
+}
 
 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: {
@@ -35,13 +47,7 @@ export const TabFrame = styled(ThemeableStack, {
 
     active: {
       true: {
-        hoverStyle: {
-          backgroundColor: '$background',
-        },
-
-        focusStyle: {
-          backgroundColor: '$background',
-        },
+        backgroundColor: 'hover:background focus:background',
       },
     },
   } as const,
@@ -49,45 +55,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>