@tamagui/demos 1.11.2 → 1.12.0

package/src/ButtonDemo.tsx

@@ -3,16 +3,16 @@ import { Button, XGroup, XStack, YStack } from 'tamagui'
 
 export function ButtonDemo(props) {
   return (
-    <YStack p="$3" space {...props}>
+    <YStack padding="$3" space {...props}>
       <Button>Plain</Button>
-      <Button als="center" icon={Airplay} size="$6">
+      <Button alignSelf="center" icon={Airplay} size="$6">
         Large
       </Button>
       <XGroup size="$3">
-        <Button w="50%" theme="alt2">
+        <Button width="50%" theme="alt2">
           Alt2
         </Button>
-        <Button w="50%" theme="yellow">
+        <Button width="50%" theme="yellow">
           Yellow
         </Button>
       </XGroup>
@@ -26,13 +26,13 @@ export function ButtonDemo(props) {
       </XStack>
       <XGroup>
         <XGroup.Item>
-          <Button w="50%" size="$2" disabled o={0.5}>
+          <Button width="50%" size="$2" disabled opacity={0.5}>
             disabled
           </Button>
         </XGroup.Item>
 
         <XGroup.Item>
-          <Button w="50%" size="$2" chromeless>
+          <Button width="50%" size="$2" chromeless>
             chromeless
           </Button>
         </XGroup.Item>

package/src/CardDemo.tsx

@@ -2,12 +2,12 @@ import { Button, Card, CardProps, H2, Image, Paragraph, XStack } from 'tamagui'
 
 export function CardDemo() {
   return (
-    <XStack $sm={{ flexDirection: 'column' }} px="$4" space>
+    <XStack $sm={{ flexDirection: 'column' }} paddingHorizontal="$4" space>
       <DemoCard
         animation="bouncy"
         size="$4"
-        w={250}
-        h={300}
+        width={250}
+        height={300}
         scale={0.9}
         hoverStyle={{ scale: 0.925 }}
         pressStyle={{ scale: 0.875 }}
@@ -25,16 +25,16 @@ function DemoCard(props: CardProps) {
         <Paragraph theme="alt2">Now available</Paragraph>
       </Card.Header>
       <Card.Footer padded>
-        <XStack f={1} />
-        <Button br="$10">Purchase</Button>
+        <XStack flex={1} />
+        <Button borderRadius="$10">Purchase</Button>
       </Card.Footer>
       <Card.Background>
         <Image
-          pos="absolute"
+          position="absolute"
           width={300}
           height={300}
           resizeMode="contain"
-          als="center"
+          alignSelf="center"
           src="data:image/jpeg;base64,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"
         />
       </Card.Background>

package/src/CheckboxDemo.tsx

@@ -3,7 +3,7 @@ import { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'
 
 export function CheckboxDemo() {
   return (
-    <YStack w={300} ai="center" space="$2">
+    <YStack width={300} alignItems="center" space="$2">
       <CheckboxWithLabel size="$3" />
       <CheckboxWithLabel size="$4" defaultChecked />
       <CheckboxWithLabel size="$5" />
@@ -14,7 +14,7 @@ export function CheckboxDemo() {
 function CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {
   const id = `checkbox-${props.size.toString().slice(1)}`
   return (
-    <XStack w={300} ai="center" space="$4">
+    <XStack width={300} alignItems="center" space="$4">
       <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>
         <Checkbox.Indicator>
           <CheckIcon />

package/src/ColorsDemo.tsx

@@ -17,7 +17,7 @@ export function ColorsDemo() {
   const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]
 
   return (
-    <YStack mt="$4" space="$8">
+    <YStack marginTop="$4" space="$8">
       <ColorsRow title="Light" colors={colorsLight} />
       <Separator />
       <ColorsRow title="Dark" colors={colorsDark} />
@@ -30,7 +30,7 @@ function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
     <YStack space $sm={{ space: '$2' }}>
       <H2 size="$2">{title}</H2>
 
-      <XStack space als="center">
+      <XStack space alignSelf="center">
         <YStack space $sm={{ space: '$2' }} als="center">
           {colors.map((group, index) => {
             return (
@@ -39,12 +39,12 @@ function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
                   return (
                     <Square
                       key={`${color.key}${index}`}
-                      br="$2"
+                      borderRadius="$2"
                       size="$4"
-                      h="$4"
-                      bw={1}
-                      bc={getVariableValue(color)}
-                      boc="$color7"
+                      height="$4"
+                      borderWidth={1}
+                      backgroundColor={getVariableValue(color)}
+                      borderColor="$color7"
                       $sm={{
                         size: '$2',
                       }}
@@ -58,21 +58,21 @@ function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
             )
           })}
 
-          <XStack space="$2" als="center">
+          <XStack space="$2" alignSelf="center">
             {new Array(13)
               .fill(0)
               .slice(1)
               .map((_, index) => {
                 return (
                   <Paragraph
-                    col="$color10"
-                    ta="center"
-                    w="$4"
+                    color="$color10"
+                    textAlign="center"
+                    width="$4"
                     $sm={{
-                      w: '$2',
+                     width:'$2',
                     }}
                     $xs={{
-                      w: '$1',
+                      width: '$1',
                     }}
                     key={index}
                   >
@@ -83,18 +83,18 @@ function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
           </XStack>
         </YStack>
 
-        <YStack space="$4" mt="$2">
+        <YStack space="$4" marginTop="$2">
           {colorGroups.map((name) => (
             <Paragraph
               theme={name as any}
-              col="$color10"
-              h="$4"
+              color="$color10"
+              height="$4"
               rotate="-10deg"
               $sm={{
-                h: '$2',
+                height: '$2',
               }}
               $xs={{
-                h: '$1',
+                height: '$1',
               }}
               key={name}
             >

package/src/DialogDemo.tsx

@@ -36,9 +36,9 @@ export function DialogDemo() {
         <Dialog.Overlay
           key="overlay"
           animation="quick"
-          o={0.5}
-          enterStyle={{ o: 0 }}
-          exitStyle={{ o: 0 }}
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
         />
 
         <Dialog.Content
@@ -62,13 +62,13 @@ export function DialogDemo() {
             Make changes to your profile here. Click save when you're done.
           </Dialog.Description>
           <Fieldset space="$4" horizontal>
-            <Label w={160} justifyContent="flex-end" htmlFor="name">
+            <Label width={160} justifyContent="flex-end" htmlFor="name">
               Name
             </Label>
-            <Input f={1} id="name" defaultValue="Nate Wienert" />
+            <Input flex={1} id="name" defaultValue="Nate Wienert" />
           </Fieldset>
           <Fieldset space="$4" horizontal>
-            <Label w={160} justifyContent="flex-end" htmlFor="username">
+            <Label width={160} justifyContent="flex-end" htmlFor="username">
               <TooltipSimple label="Pick your favorite" placement="bottom-start">
                 <Paragraph>Food</Paragraph>
               </TooltipSimple>
@@ -76,7 +76,7 @@ export function DialogDemo() {
             <SelectDemo />
           </Fieldset>
 
-          <YStack ai="flex-end" mt="$2">
+          <YStack alignItems="flex-end" marginTop="$2">
             <Dialog.Close displayWhenAdapted asChild>
               <Button theme="alt1" aria-label="Close">
                 Save changes
@@ -86,7 +86,7 @@ export function DialogDemo() {
 
           <Unspaced>
             <Dialog.Close asChild>
-              <Button pos="absolute" t="$3" r="$3" size="$2" circular icon={X} />
+              <Button position="absolute" top="$3" right="$3" size="$2" circular icon={X} />
             </Dialog.Close>
           </Unspaced>
         </Dialog.Content>

package/src/FormsDemo.tsx

@@ -17,15 +17,15 @@ export function FormsDemo(props: { size: SizeTokens }) {
 
   return (
     <Form
-      ai="center"
-      miw={300}
+      alignItems="center"
+      minWidth={300}
       space
       onSubmit={() => setStatus('submitting')}
-      bw={1}
-      br="$4"
-      bc="$background"
-      boc="$borderColor"
-      p="$8"
+      borderWidth={1}
+      borderRadius="$4"
+      backgroundColor="$background"
+      borderColor="$borderColor"
+      padding="$8"
     >
       <H4>{status[0].toUpperCase() + status.slice(1)}</H4>
 

package/src/GroupDemo.tsx

@@ -3,7 +3,7 @@ import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tama
 
 export function GroupDemo() {
   return (
-    <YStack p="$3" space="$2" ai="center">
+    <YStack padding="$3" space="$2" alignItems="center">
       <Group axis="horizontal">
         <Group.Item>
           <Button>First</Button>

package/src/HeadingsDemo.tsx

@@ -3,7 +3,7 @@ import { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'
 
 export function HeadingsDemo() {
   return (
-    <YStack als="center">
+    <YStack alignSelf="center">
       <H1>Heading 1</H1>
       <H2>Heading 2</H2>
       <H3>Heading 3</H3>

package/src/InputsDemo.tsx

@@ -2,19 +2,19 @@ import { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'
 
 export function InputsDemo() {
   return (
-    <YStack w={200} mih={250} overflow="hidden" space="$2" m="$3" p="$2">
+    <YStack width={200} mih={250} overflow="hidden" space="$2" margin="$3" padding="$2">
       <InputDemo size="$2" />
       <InputDemo size="$3" />
       <InputDemo size="$4" />
-      <TextArea mih={140} placeholder="Enter your details..." numberOfLines={4} />
+      <TextArea minHeight={140} placeholder="Enter your details..." numberOfLines={4} />
     </YStack>
   )
 }
 
 function InputDemo(props: { size: SizeTokens }) {
   return (
-    <XStack ai="center" space="$2">
-      <Input f={1} size={props.size} placeholder={`Size ${props.size}...`} />
+    <XStack alignItems="center" space="$2">
+      <Input flex={1} size={props.size} placeholder={`Size ${props.size}...`} />
       <Button size={props.size}>Go</Button>
     </XStack>
   )

package/src/LabelDemo.tsx

@@ -2,16 +2,16 @@ import { Input, Label, Switch, XStack, YStack } from 'tamagui'
 
 export function LabelDemo() {
   return (
-    <YStack p="$3" miw={300} space="$4">
-      <XStack ai="center" space="$4">
-        <Label w={90} htmlFor="name">
+    <YStack padding="$3" minWidth={300} space="$4">
+      <XStack alignItems="center" space="$4">
+        <Label width={90} htmlFor="name">
           Name
         </Label>
-        <Input f={1} id="name" defaultValue="Nate Wienert" />
+        <Input flex={1} id="name" defaultValue="Nate Wienert" />
       </XStack>
 
-      <XStack ai="center" space="$4">
-        <Label w={90} htmlFor="notify">
+      <XStack alignItems="center" space="$4">
+        <Label width={90} htmlFor="notify">
           Notifications
         </Label>
         <Switch id="notify">

package/src/LinearGradientDemo.tsx

@@ -8,7 +8,7 @@ export function LinearGradientDemo() {
       <LinearGradient
         width="$6"
         height="$6"
-        br="$4"
+        borderRadius="$4"
         colors={['$red10', '$yellow10']}
         start={[0, 1]}
         end={[0, 0]}
@@ -18,7 +18,7 @@ export function LinearGradientDemo() {
       <LinearGradient
         width="$6"
         height="$6"
-        br="$4"
+        borderRadius="$4"
         colors={['$background', '$color']}
         start={[1, 1]}
         end={[0, 0]}

package/src/ListItemDemo.tsx

@@ -3,7 +3,7 @@ import { ListItem, Separator, XStack, YGroup } from 'tamagui'
 
 export function ListItemDemo() {
   return (
-    <XStack $sm={{ flexDirection: 'column' }} px="$4" space>
+    <XStack $sm={{ flexDirection: 'column' }} paddingHorizontal="$4" space>
       <ListItemDemo1 />
       <ListItemDemo2 />
     </XStack>
@@ -12,7 +12,7 @@ export function ListItemDemo() {
 
 function ListItemDemo1() {
   return (
-    <YGroup als="center" bordered w={240} size="$4">
+    <YGroup alignSelf="center" bordered width={240} size="$4">
       <YGroup.Item>
         <ListItem hoverTheme icon={Star} title="Star" subTitle="Twinkles" />
       </YGroup.Item>
@@ -37,7 +37,7 @@ function ListItemDemo1() {
 
 function ListItemDemo2() {
   return (
-    <YGroup als="center" bordered w={240} size="$5" separator={<Separator />}>
+    <YGroup alignSelf="center" bordered width={240} size="$5" separator={<Separator />}>
       <YGroup.Item>
         <ListItem
           hoverTheme

package/src/LucideIconsDemo.tsx

@@ -19,7 +19,7 @@ export function LucideIconsDemo() {
     const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))
     return icons.slice(0, 835).map(({ Icon, name }) => {
       return (
-        <YStack h={size} ai="center" jc="center" key={name}>
+        <YStack height={size} alignItems="center" justifyContent="center" key={name}>
           <Icon size={size * 0.25} />
           <Spacer />
           <Paragraph size="$2" o={0.5}>
@@ -31,10 +31,10 @@ export function LucideIconsDemo() {
   }, [search])
 
   return (
-    <YStack als="stretch" p="$4" pb="$0" space>
+    <YStack alignSelf="stretch" padding="$4" paddingBottom="$0" space>
       <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
 
-      <YStack h={420}>
+      <YStack height={420}>
         <ScrollView>
           <Grid itemMinWidth={size}>{iconsMemo}</Grid>
         </ScrollView>

package/src/PopoverDemo.tsx

@@ -12,7 +12,7 @@ import {
 
 export function PopoverDemo() {
   return (
-    <XStack space="$2" f={1} jc="center" ai="center">
+    <XStack space="$2" flex={1} justifyContent="center" alignItems="center">
       <Demo placement="left" Icon={ChevronLeft} Name="left-popover" />
       <Demo placement="bottom" Icon={ChevronDown} Name="bottom-popover" />
       <Demo placement="top" Icon={ChevronUp} Name="top-popover" />
@@ -42,13 +42,13 @@ export function Demo({
       </Adapt>
 
       <Popover.Content
-        bw={1}
-        boc="$borderColor"
-        enterStyle={{ x: 0, y: -10, o: 0 }}
-        exitStyle={{ x: 0, y: -10, o: 0 }}
+        borderWidth={1}
+        borderColor="$borderColor"
+        enterStyle={{ x: 0, y: -10, opacity: 0 }}
+        exitStyle={{ x: 0, y: -10, opacity: 0 }}
         x={0}
         y={0}
-        o={1}
+        opacity={1}
         animation={[
           'quick',
           {
@@ -59,7 +59,7 @@ export function Demo({
         ]}
         elevate
       >
-        <Popover.Arrow bw={1} boc="$borderColor" />
+        <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
 
         <YGroup space="$3">
           <YGroup.Item>

package/src/ProgressDemo.tsx

@@ -15,8 +15,8 @@ export function ProgressDemo() {
 
   return (
     <>
-      <YStack h={60} ai="center" space>
-        <Paragraph h={30} o={0.5}>
+      <YStack height={60} alignItems="center" space>
+        <Paragraph height={30} opacity={0.5}>
           Size: {size}
         </Paragraph>
         <Progress size={sizeProp} value={progress}>
@@ -24,10 +24,10 @@ export function ProgressDemo() {
         </Progress>
       </YStack>
 
-      <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: 'none' }}>
+      <XStack ai="center" space position="absolute" bottom="$3" left="$4" $xxs={{ display: 'none' }}>
         <Slider
           size="$2"
-          w={130}
+          width={130}
           defaultValue={[4]}
           min={2}
           max={6}
@@ -36,7 +36,7 @@ export function ProgressDemo() {
             setSize(val)
           }}
         >
-          <Slider.Track bw={1} boc="$color5">
+          <Slider.Track borderWidth={1} borderColor="$color5">
             <Slider.TrackActive />
           </Slider.Track>
           <Slider.Thumb circular index={0} />

package/src/RadioGroupDemo.tsx

@@ -3,7 +3,7 @@ import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 't
 export function RadioGroupDemo() {
   return (
     <RadioGroup defaultValue="3" name="form">
-      <YStack w={300} ai="center" space="$2">
+      <YStack width={300} alignItems="center" space="$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" />
@@ -19,7 +19,7 @@ function RadioGroupItemWithLabel(props: {
 }) {
   const id = `radiogroup-${props.value}`
   return (
-    <XStack w={300} ai="center" space="$4">
+    <XStack width={300} alignItems="center" space="$4">
       <RadioGroup.Item value={props.value} id={id} size={props.size}>
         <RadioGroup.Indicator />
       </RadioGroup.Item>

package/src/ScrollViewDemo.tsx

@@ -2,16 +2,16 @@ import { Circle, ScrollView, Square, XStack } from 'tamagui'
 
 export function ScrollViewDemo() {
   return (
-    <ScrollView maxHeight={250} w="75%" bc="$background" p="$4" br="$4">
-      <XStack flexWrap="wrap" ai="center" jc="center">
-        <Square m="$4" size={120} bc="$red9" />
-        <Circle m="$4" size={120} bc="$orange9" />
-        <Square m="$4" size={120} bc="$yellow9" />
-        <Circle m="$4" size={120} bc="$green9" />
-        <Square m="$4" size={120} bc="$blue9" />
-        <Circle m="$4" size={120} bc="$purple9" />
-        <Square m="$4" size={120} bc="$pink9" />
-        <Circle m="$4" size={120} bc="$red9" />
+    <ScrollView maxHeight={250} width="75%" backgroundColor="$background" padding="$4" borderRadius="$4">
+      <XStack flexWrap="wrap" alignItems="center" justifyContent="center">
+        <Square margin="$4" size={120} backgroundColor="$red9" />
+        <Circle margin="$4" size={120} backgroundColor="$orange9" />
+        <Square margin="$4" size={120} backgroundColor="$yellow9" />
+        <Circle margin="$4" size={120} backgroundColor="$green9" />
+        <Square margin="$4" size={120} backgroundColor="$blue9" />
+        <Circle margin="$4" size={120} backgroundColor="$purple9" />
+        <Square margin="$4" size={120} backgroundColor="$pink9" />
+        <Circle margin="$4" size={120} backgroundColor="$red9" />
       </XStack>
     </ScrollView>
   )

package/src/SelectDemo.tsx

@@ -7,7 +7,7 @@ export function SelectDemo() {
   const [val, setVal] = useState('apple')
   return (
     <Select id="food" value={val} onValueChange={setVal}>
-      <Select.Trigger w={180} iconAfter={ChevronDown}>
+      <Select.Trigger width={180} iconAfter={ChevronDown}>
         <Select.Value placeholder="Something" />
       </Select.Trigger>
 
@@ -23,8 +23,8 @@ export function SelectDemo() {
       </Adapt>
 
       <Select.Content zIndex={200000}>
-        <Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
-          <YStack zi={10}>
+        <Select.ScrollUpButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
+          <YStack zIndex={10}>
             <ChevronUp size={20} />
           </YStack>
           <LinearGradient
@@ -32,7 +32,7 @@ export function SelectDemo() {
             end={[0, 1]}
             fullscreen
             colors={['$background', '$backgroundTransparent']}
-            br="$4"
+            borderRadius="$4"
           />
         </Select.ScrollUpButton>
 
@@ -43,7 +43,7 @@ export function SelectDemo() {
               return (
                 <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
                   <Select.ItemText>{item.name}</Select.ItemText>
-                  <Select.ItemIndicator ml="auto">
+                  <Select.ItemIndicator marginLeft="auto">
                     <Check size={16} />
                   </Select.ItemIndicator>
                 </Select.Item>
@@ -52,8 +52,8 @@ export function SelectDemo() {
           </Select.Group>
         </Select.Viewport>
 
-        <Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
-          <YStack zi={10}>
+        <Select.ScrollDownButton alignItems="center" justifyContent="center" position="relative" width="100%" height="$3">
+          <YStack zIndex={10}>
             <ChevronDown size={20} />
           </YStack>
           <LinearGradient
@@ -61,7 +61,7 @@ export function SelectDemo() {
             end={[0, 1]}
             fullscreen
             colors={['$backgroundTransparent', '$background']}
-            br="$4"
+            borderRadius="$4"
           />
         </Select.ScrollDownButton>
       </Select.Content>

package/src/SeparatorDemo.tsx

@@ -3,15 +3,15 @@ import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 
 export function SeparatorDemo() {
   return (
-    <YStack w="100%" maw={300} mx={15}>
+    <YStack width="100%" maxWidth={300} marginHorizontal={15}>
       <Paragraph fontWeight="800">Tamagui</Paragraph>
       <Paragraph>A cross-platform component library.</Paragraph>
-      <Separator my={15} />
-      <XStack h={20} ai="center">
+      <Separator marginVertical={15} />
+      <XStack height={20} alignItems="center">
         <Paragraph>Blog</Paragraph>
-        <Separator als="stretch" vertical mx={15} />
+        <Separator alignSelf="stretch" vertical marginHorizontal={15} />
         <Paragraph>Docs</Paragraph>
-        <Separator als="stretch" vertical mx={15} />
+        <Separator alignSelf="stretch" vertical marginHorizontal={15} />
         <Paragraph>Source</Paragraph>
       </XStack>
     </YStack>

package/src/ShapesDemo.tsx

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