@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/src/NewInputsDemo.tsx

@@ -1,13 +1,12 @@
 import type { SizeTokens } from 'tamagui'
-import { Button, Theme, XStack, YStack } from 'tamagui'
-import { Input, TextArea } from '@tamagui/input'
+import { Button, Input, TextArea, Theme, XStack, YStack } from 'tamagui'
 
 export function NewInputsDemo() {
   return (
-    <YStack width={200} minH={250} overflow="hidden" gap="$2" m="$3" p="$2">
-      <InputDemo size="$2" />
-      <InputDemo size="$3" />
-      <InputDemo size="$4" />
+    <YStack width={200} minH={250} overflow="hidden" gap="2" m="3" p="2">
+      <InputDemo size="2" />
+      <InputDemo size="3" />
+      <InputDemo size="4" />
       <TextArea theme="surface1" placeholder="Enter your details..." />
     </YStack>
   )
@@ -15,7 +14,7 @@ export function NewInputsDemo() {
 
 function InputDemo(props: { size: SizeTokens }) {
   return (
-    <XStack items="center" gap="$2">
+    <XStack items="center" gap="2">
       <Input
         theme="surface1"
         flex={1}

package/src/PopoverDemo.tsx

@@ -23,8 +23,8 @@ export function PopoverDemo() {
   const [shouldAdapt, setShouldAdapt] = useState(true)
 
   return (
-    <YStack gap="$4">
-      <XStack gap="$2" flex={1} justify="center" items="center">
+    <YStack gap="4">
+      <XStack gap="2" flex={1} justify="center" items="center">
         <Demo
           shouldAdapt={shouldAdapt}
           placement="left"
@@ -67,56 +67,50 @@ export function Demo({
   ...props
 }: PopoverProps & { Icon?: any; Name?: string; shouldAdapt?: boolean }) {
   return (
-    <Popover size="$5" allowFlip stayInFrame offset={15} resize {...props}>
+    <Popover size="5" allowFlip stayInFrame offset={15} resize {...props}>
       <Popover.Trigger asChild>
         <Button icon={Icon} />
       </Popover.Trigger>
 
       {shouldAdapt && (
-        <Adapt when="maxMd" platform="touch">
+        <Adapt when="max-md" platform="touch">
           <Sheet transition="medium" modal dismissOnSnapToBottom>
-            <Sheet.Frame p="$4">
+            <Sheet.Container p="4">
+              <Sheet.Background />
               <Adapt.Contents />
-            </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>
       )}
 
       <Popover.Content
+        backgroundColor="background"
         borderWidth={1}
-        borderColor="$borderColor"
+        borderColor="border-color"
         width={300}
         height={200}
-        enterStyle={{ y: -10, opacity: 0 }}
-        exitStyle={{ y: -10, opacity: 0 }}
+        y="enter:-10px exit:-10px"
+        opacity="enter:0 exit:0"
         boxShadow="0px 4px 8px rgba(0,0,0,0.1), 0px 12px 32px rgba(0,0,0,0.08)"
-        transition={[
-          'quick',
-          {
-            opacity: {
-              overshootClamping: true,
-            },
-          },
-        ]}
+        transition={['quick', { opacity: { overshootClamping: true } }]}
       >
-        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+        <Popover.Arrow
+          backgroundColor="background"
+          borderWidth={1}
+          borderColor="border-color"
+        />
 
-        <XStack gap="$3" mb="$3">
-          <Label size="$3" htmlFor={Name}>
+        <XStack gap="3" mb="3">
+          <Label size="3" htmlFor={Name}>
             Name
           </Label>
-          <Input flex={1} size="$3" id={Name} />
+          <Input flex={1} size="3" id={Name} />
         </XStack>
 
         <Popover.Close asChild>
           <Button
-            size="$3"
+            size="3"
             onPress={() => {
               /* Custom code goes here, does not interfere with popover closure */
             }}

package/src/ProgressDemo.tsx

@@ -9,37 +9,23 @@ export function ProgressDemo() {
 
   return (
     <>
-      <YStack height={60} items="center" gap="$4">
+      <YStack height={60} items="center" gap="4">
         <Paragraph height={30} opacity={0.5}>
           Progress: {progress}
         </Paragraph>
 
-        <Progress key={key} theme="surface2" value={progress}>
+        <Progress key={key} theme="level3" value={progress}>
           <Progress.Indicator
-            backgroundColor="$color"
-            transition={[
-              'quicker',
-              {
-                transform: {
-                  overshootClamping: true,
-                },
-              },
-            ]}
+            backgroundColor="color"
+            transition={['quicker', { transform: { overshootClamping: true } }]}
           />
         </Progress>
       </YStack>
 
-      <XStack
-        items="center"
-        gap="$2"
-        position="absolute"
-        b="$3"
-        l="$4"
-        $xxs={{ display: 'none' }}
-      >
+      <XStack items="center" gap="2" position="absolute" b="3" l="4" display="xxs:none">
         {/* <Slider
-          size="$2"
-          theme="surface2"
+          size="2"
+          theme="level3"
           width={130}
           value={slider}
           min={0}
@@ -50,19 +36,19 @@ export function ProgressDemo() {
             setSlider([val])
           }}
         >
-          <Slider.Track borderWidth={1} borderColor="$color5">
+          <Slider.Track borderWidth={1} borderColor="color5">
             <Slider.TrackActive />
           </Slider.Track>
           <Slider.Thumb theme="accent" circular index={0} />
         </Slider> */}
 
         <Button
-          size="$3"
+          size="3"
           icon={Play}
           onPress={() => setProgress((prev) => (prev + 20) % 100)}
         />
         <Button
-          size="$3"
+          size="3"
           icon={RotateCcw}
           onPress={() => {
             setKey(Math.random())

package/src/{RadioGroupUnstyledDemo.tsx → RadioGroupCustomDemo.tsx}

@@ -1,62 +1,32 @@
-import { Label, XStack, YStack, styled } from 'tamagui'
+import { Label, XStack, YStack, styled, withStaticProperties } from 'tamagui'
 
-import { createRadioGroup } from '@tamagui/radio-group'
+import { RadioGroup as RadioGroupBehavior } from '@tamagui/radio-group'
 
 const RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'
 
-const RadioGroupItemFrame = styled(YStack, {
-  name: RADIO_GROUP_ITEM_NAME,
+const RadioGroupItemFrame = styled(RadioGroupBehavior.Item, {
+  displayName: RADIO_GROUP_ITEM_NAME,
   render: 'button',
-
   rounded: 1000,
-  bg: '$background',
+  bg: 'background hover:background-hover press:background-focus focus:background-hover',
   items: 'center',
   justify: 'center',
   borderWidth: 1,
-  borderColor: '$borderColor',
+  borderColor:
+    'border-color hover:border-color-hover press:border-color-focus focus:border-color-hover',
   p: 0,
-
-  hoverStyle: {
-    borderColor: '$borderColorHover',
-    bg: '$backgroundHover',
-  },
-
-  focusStyle: {
-    borderColor: '$borderColorHover',
-    bg: '$backgroundHover',
-  },
-
-  focusVisibleStyle: {
-    outlineStyle: 'solid',
-    outlineWidth: 2,
-    outlineColor: '$outlineColor',
-  },
-
-  pressStyle: {
-    borderColor: '$borderColorFocus',
-    bg: '$backgroundFocus',
-  },
-
+  outlineStyle: 'focus-visible:solid',
+  outlineWidth: 'focus-visible:2px',
+  outlineColor: 'focus-visible:outline-color',
   variants: {
     disabled: {
       true: {
         pointerEvents: 'none',
         userSelect: 'none',
         cursor: 'not-allowed',
-
-        hoverStyle: {
-          borderColor: '$borderColor',
-          bg: '$background',
-        },
-
-        pressStyle: {
-          borderColor: '$borderColor',
-          bg: '$background',
-        },
-
-        focusVisibleStyle: {
-          outlineWidth: 0,
-        },
+        borderColor: 'hover:border-color press:border-color',
+        bg: 'hover:background press:background',
+        outlineWidth: 'focus-visible:0px',
       },
     },
   },
@@ -64,18 +34,18 @@ const RadioGroupItemFrame = styled(YStack, {
 
 const RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'
 
-const RadioGroupIndicatorFrame = styled(YStack, {
-  name: RADIO_GROUP_INDICATOR_NAME,
+const RadioGroupIndicatorFrame = styled(RadioGroupBehavior.Indicator, {
+  displayName: RADIO_GROUP_INDICATOR_NAME,
   width: '53%',
   height: '53%',
   rounded: 1000,
-  bg: '$color',
+  bg: 'color',
 })
 
 const RADIO_GROUP_NAME = 'RadioGroup'
 
-const RadioGroupFrame = styled(YStack, {
-  name: RADIO_GROUP_NAME,
+const RadioGroupFrame = styled(RadioGroupBehavior, {
+  displayName: RADIO_GROUP_NAME,
   variants: {
     orientation: {
       horizontal: {
@@ -90,16 +60,15 @@ const RadioGroupFrame = styled(YStack, {
   } as const,
 })
 
-const RadioGroup = createRadioGroup({
-  Frame: RadioGroupFrame,
-  Indicator: RadioGroupIndicatorFrame,
+const RadioGroup = withStaticProperties(RadioGroupFrame, {
   Item: RadioGroupItemFrame,
+  Indicator: RadioGroupIndicatorFrame,
 })
 
-export function RadioGroupUnstyledDemo() {
+export function RadioGroupCustomDemo() {
   return (
     <RadioGroup aria-labelledby="Select one item" defaultValue="3" name="form">
-      <YStack width={200} items="center" gap="$2">
+      <YStack width={200} items="center" gap="2">
         <RadioGroupItemWithLabel value="2" label="Option One" />
         <RadioGroupItemWithLabel value="3" label="Option Two" />
       </YStack>
@@ -110,7 +79,7 @@ export function RadioGroupUnstyledDemo() {
 function RadioGroupItemWithLabel(props: { value: string; label: string }) {
   const id = `radiogroup-${props.value}`
   return (
-    <XStack width={300} items="center" gap="$4">
+    <XStack width={300} items="center" gap="4">
       <RadioGroup.Item value={props.value} id={id}>
         <RadioGroup.Indicator />
       </RadioGroup.Item>

package/src/RadioGroupDemo.tsx

@@ -3,12 +3,12 @@ import { Label, RadioGroup, Theme, XStack, YStack } from 'tamagui'
 
 export function RadioGroupDemo() {
   return (
-    <Theme name="surface2">
+    <Theme name="level3">
       <RadioGroup aria-labelledby="Select one item" defaultValue="3" name="form">
-        <YStack width={300} items="center" gap="$2">
-          <RadioGroupItemWithLabel size="$3" value="2" label="Second value" />
-          <RadioGroupItemWithLabel size="$4" value="3" label="Third value" />
-          <RadioGroupItemWithLabel size="$5" value="4" label="Fourth value" />
+        <YStack width={300} items="center" gap="2">
+          <RadioGroupItemWithLabel size="3" value="2" label="Second value" />
+          <RadioGroupItemWithLabel size="4" value="3" label="Third value" />
+          <RadioGroupItemWithLabel size="5" value="4" label="Fourth value" />
         </YStack>
       </RadioGroup>
     </Theme>
@@ -22,7 +22,7 @@ export function RadioGroupItemWithLabel(props: {
 }) {
   const id = `radiogroup-${props.value}`
   return (
-    <XStack width={300} items="center" gap="$4">
+    <XStack width={300} items="center" gap="4">
       <RadioGroup.Item value={props.value} id={id} size={props.size}>
         <RadioGroup.Indicator />
       </RadioGroup.Item>

package/src/RadioGroupHeadlessDemo.tsx

@@ -64,7 +64,7 @@ function RadioGroupItem(props: { value: string; id: string; label: string }) {
             <Pressable
               style={{
                 ...styles.radioGroupItem,
-                borderColor: theme.borderColor?.get(),
+                borderColor: theme['border-color']?.get(),
                 ...(checked
                   ? { borderWidth: 4 }
                   : { backgroundColor: theme.background?.get() }),

package/src/ReplaceThemeDemo.tsx

@@ -28,10 +28,10 @@ export function ReplaceThemeDemo() {
   }, [])
 
   return (
-    <YStack items="center" gap="$4">
-      <XStack gap="$5">
+    <YStack items="center" gap="4">
+      <XStack gap="5">
         <Theme name={theme ?? null}>
-          <Square rounded="$8" size={100} bg="$color" />
+          <Square rounded="8" bg="color" size={100} />
         </Theme>
       </XStack>
 
@@ -46,7 +46,7 @@ export function ReplaceThemeDemo() {
           update()
         }}
       >
-        Replace theme to only have $color: blue
+        Replace theme to only have color: blue
       </Button>
     </YStack>
   )

package/src/ScrollViewDemo.tsx

@@ -2,16 +2,16 @@ import { Circle, ScrollView, Square, XStack } from 'tamagui'
 
 export function ScrollViewDemo() {
   return (
-    <ScrollView maxH={250} width="75%" bg="$background" p="$4" rounded="$4">
+    <ScrollView maxH={250} width="75%" bg="background" p="4" rounded="4">
       <XStack flexWrap="wrap" items="center" justify="center">
-        <Square m="$4" size={120} bg="$color5" />
-        <Circle m="$4" size={120} bg="$color6" />
-        <Square m="$4" size={120} bg="$color7" />
-        <Circle m="$4" size={120} bg="$color8" />
-        <Square m="$4" size={120} bg="$color9" />
-        <Circle m="$4" size={120} bg="$color10" />
-        <Square m="$4" size={120} bg="$color11" />
-        <Circle m="$4" size={120} bg="$color12" />
+        <Square m="4" bg="color5" size={120} />
+        <Circle m="4" bg="color6" size={120} />
+        <Square m="4" bg="color7" size={120} />
+        <Circle m="4" bg="color8" size={120} />
+        <Square m="4" bg="color9" size={120} />
+        <Circle m="4" bg="color10" size={120} />
+        <Square m="4" bg="color11" size={120} />
+        <Circle m="4" bg="color12" size={120} />
       </XStack>
     </ScrollView>
   )

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>
   )
 }