@tamagui/demos 2.7.7 → 3.0.0-beta.1093.1

package/src/SelectDemo.tsx

@@ -1,22 +1,22 @@
 import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons-2'
+import { LinearGradient } from '@tamagui/linear-gradient'
 import React from 'react'
 
 import type { FontSizeTokens, SelectProps } from 'tamagui'
 import { Adapt, Label, Select, Sheet, Theme, XStack, YStack, getFontSize } from 'tamagui'
-import { LinearGradient } from 'tamagui/linear-gradient'
 
 export function SelectDemo() {
   return (
-    <Theme name="surface1">
-      <YStack gap="$4">
-        <XStack width="100%" items="center" gap="$4">
+    <Theme name="level2">
+      <YStack gap="4">
+        <XStack width="100%" items="center" gap="4">
           <Label htmlFor="select-demo-1" flex={1} minW={80}>
             Custom
           </Label>
           <SelectDemoContents id="select-demo-1" />
         </XStack>
 
-        <XStack width="100%" items="center" gap="$4">
+        <XStack width="100%" items="center" gap="4">
           <Label htmlFor="select-demo-2" flex={1} minW={80}>
             Native
           </Label>
@@ -43,34 +43,29 @@ export function SelectDemoContents(
       value={val}
       onValueChange={setVal}
       disablePreventBodyScroll
+      lazyMount
       {...props}
       // renderValue enables SSR support by providing the label synchronously
       renderValue={getItemLabel}
     >
       {props?.trigger || (
-        <Select.Trigger
-          maxWidth={220}
-          iconAfter={ChevronDown}
-          borderRadius="$4"
-          backgroundColor="$background"
-        >
+        <Select.Trigger maxWidth={220} borderRadius="4" backgroundColor="background">
           <Select.Value placeholder="Something" />
+          <Select.Icon>
+            <ChevronDown />
+          </Select.Icon>
         </Select.Trigger>
       )}
 
-      <Adapt when="maxMd" platform="touch">
+      <Adapt when="max-md" platform="touch">
         <Sheet native={!!props.native} modal dismissOnSnapToBottom transition="medium">
-          <Sheet.Frame>
+          <Sheet.Container>
+            <Sheet.Background />
             <Sheet.ScrollView>
               <Adapt.Contents />
             </Sheet.ScrollView>
-          </Sheet.Frame>
-          <Sheet.Overlay
-            bg="$shadowColor"
-            transition="lazy"
-            enterStyle={{ opacity: 0 }}
-            exitStyle={{ opacity: 0 }}
-          />
+          </Sheet.Container>
+          <Sheet.Overlay bg="shadow-color" transition="lazy" opacity="enter:0 exit:0" />
         </Sheet>
       </Adapt>
 
@@ -80,7 +75,7 @@ export function SelectDemoContents(
           justify="center"
           position="relative"
           width="100%"
-          height="$3"
+          height="3"
         >
           <YStack z={10}>
             <ChevronUp size={20} />
@@ -88,30 +83,27 @@ export function SelectDemoContents(
           <LinearGradient
             start={[0, 0]}
             end={[0, 1]}
-            fullscreen
-            colors={['$background', 'transparent']}
-            rounded="$4"
+            position="absolute"
+            inset={0}
+            rounded="4"
+            colors={['background', 'transparent']}
           />
         </Select.ScrollUpButton>
         <Select.Viewport
           minW={200}
-          bg="$background"
-          rounded="$4"
+          bg="background"
+          rounded="4"
           borderWidth={1}
-          borderColor="$borderColor"
+          borderColor="border-color"
         >
           <Select.Group>
             <Select.Label fontWeight="700">Fruits</Select.Label>
             {/* for longer lists memoizing these is useful */}
             {React.useMemo(
               () =>
-                items.map((item, i) => {
+                items.map((item) => {
                   return (
-                    <Select.Item
-                      index={i}
-                      key={item.name}
-                      value={item.name.toLowerCase()}
-                    >
+                    <Select.Item key={item.name} value={item.name.toLowerCase()}>
                       <Select.ItemText>{item.name}</Select.ItemText>
                       <Select.ItemIndicator marginLeft="auto">
                         <Check size={16} />
@@ -130,12 +122,10 @@ export function SelectDemoContents(
               t={16}
               items="center"
               justify="center"
-              width={'$4'}
+              width="4"
               pointerEvents="none"
             >
-              <ChevronDown
-                size={getFontSize((props.size as FontSizeTokens) ?? '$true')}
-              />
+              <ChevronDown size={getFontSize((props.size as FontSizeTokens) ?? true)} />
             </YStack>
           )}
         </Select.Viewport>
@@ -145,7 +135,7 @@ export function SelectDemoContents(
           justify="center"
           position="relative"
           width="100%"
-          height="$3"
+          height="3"
         >
           <YStack z={10}>
             <ChevronDown size={20} />
@@ -153,9 +143,10 @@ export function SelectDemoContents(
           <LinearGradient
             start={[0, 0]}
             end={[0, 1]}
-            fullscreen
-            colors={['transparent', '$background']}
-            rounded="$4"
+            position="absolute"
+            inset={0}
+            rounded="4"
+            colors={['transparent', 'background']}
           />
         </Select.ScrollDownButton>
       </Select.Content>

package/src/ShapesDemo.tsx

@@ -2,9 +2,9 @@ import { Circle, Square, XStack } from 'tamagui'
 
 export function ShapesDemo() {
   return (
-    <XStack p="$2" gap="$4">
-      <Square size={100} bg="$color" elevation="$4" />
-      <Circle size={100} bg="$color" elevation="$4" />
+    <XStack p="2" gap="4">
+      <Square size={100} bg="color" elevation="4" />
+      <Circle size={100} bg="color" elevation="4" />
     </XStack>
   )
 }

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>
@@ -13,8 +13,8 @@ export function SliderDemo() {
 function SimpleSlider({ children, ...props }: SliderProps) {
   return (
     <Slider defaultValue={[50]} max={100} step={1} {...props}>
-      <Slider.Track>
-        <Slider.TrackActive />
+      <Slider.Track testID="slider-track">
+        <Slider.TrackActive testID="slider-track-active" />
       </Slider.Track>
       <Slider.Thumb theme="accent" size={30} borderRadius={100} />
       {children}

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

@@ -1,15 +1,14 @@
-import React from 'react'
 import type { SwitchProps as SwitchHeadlessProps } from '@tamagui/switch-headless'
 import { useSwitch } from '@tamagui/switch-headless'
-
-import type { View } from 'react-native'
-import { Animated, Pressable } from 'react-native'
-import { Label, XStack, YStack } from 'tamagui'
+import React from 'react'
+import type { View as RNView } from 'react-native'
+import { Pressable } from 'react-native'
+import { Label, View, 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>
@@ -17,7 +16,7 @@ export function SwitchHeadlessDemo() {
   )
 }
 
-const HeadlessSwitch = React.forwardRef<View, SwitchHeadlessProps>((props, ref) => {
+const HeadlessSwitch = React.forwardRef<RNView, SwitchHeadlessProps>((props, ref) => {
   const [checked, setChecked] = React.useState(props.defaultChecked || false)
   const { switchProps, switchRef, bubbleInput } = useSwitch(
     props,
@@ -25,25 +24,6 @@ const HeadlessSwitch = React.forwardRef<View, SwitchHeadlessProps>((props, ref)
     ref
   )
 
-  const [animation] = React.useState(() => new Animated.Value(0))
-
-  React.useEffect(() => {
-    Animated.timing(animation, {
-      toValue: checked ? 1 : 0,
-      duration: 100,
-      useNativeDriver: true,
-    }).start()
-  }, [checked, animation])
-
-  const translateX = React.useMemo(
-    () =>
-      animation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, 20],
-      }),
-    [animation]
-  )
-
   return (
     <>
       <Pressable
@@ -56,18 +36,13 @@ const HeadlessSwitch = React.forwardRef<View, SwitchHeadlessProps>((props, ref)
         ref={switchRef}
         {...switchProps}
       >
-        <Animated.View
-          style={[
-            {
-              backgroundColor: 'black',
-              borderRadius: 100,
-              width: 20,
-              height: 20,
-            },
-            {
-              transform: [{ translateX }],
-            },
-          ]}
+        <View
+          transition="quick"
+          width={20}
+          height={20}
+          rounded={100}
+          bg="black"
+          x={checked ? 20 : 0}
         />
       </Pressable>
       {bubbleInput}