@tamagui/demos 1.11.2 → 1.12.0

package/src/ToastDemo.tsx

@@ -1,26 +1,13 @@
-import { Check } from '@tamagui/lucide-icons'
 import React from 'react'
-import {
-  Button,
-  Checkbox,
-  Label,
-  Toast,
-  ToastImperativeProvider,
-  ToastNativePlatform,
-  XStack,
-  YStack,
-  useToast,
-} from 'tamagui'
+import { Button, SizableText, Switch, Toast, XStack, YStack, useToast } from 'tamagui'
 
 export const ToastDemo = () => {
-  const [native, setNative] = React.useState<ToastNativePlatform[]>([])
+  const [native, setNative] = React.useState<boolean>(false)
 
   return (
-    <YStack space="$5">
-      <ToastImperativeProvider options={{ native }}>
-        <ToastControl />
-        <CurrentToast />
-      </ToastImperativeProvider>
+    <YStack space alignItems="center">
+      <ToastControl native={native} />
+      <CurrentToast />
 
       <NativeOptions native={native} setNative={setNative} />
     </YStack>
@@ -52,14 +39,15 @@ const CurrentToast = () => {
   )
 }
 
-const ToastControl = () => {
+const ToastControl = ({ native }: { native: boolean }) => {
   const toast = useToast()
   return (
-    <XStack space="$2" jc="center">
+    <XStack space="$2" justifyContent="center">
       <Button
         onPress={() => {
           toast.show('Successfully saved!', {
             message: "Don't worry, we've got your data.",
+            native,
           })
         }}
       >
@@ -80,33 +68,32 @@ const NativeOptions = ({
   native,
   setNative,
 }: {
-  native: ToastNativePlatform[]
-  setNative: (native: ToastNativePlatform[]) => void
+  native: boolean
+  setNative: (native: boolean) => void
 }) => {
-  const supportedNativePlatforms: ToastNativePlatform[] = ['web', 'mobile']
-
   return (
-    <XStack space>
-      {supportedNativePlatforms.map((platform) => (
-        <XStack ai="center" space="$2" key={platform}>
-          <Checkbox
-            id={platform}
-            checked={native?.includes(platform)}
-            onCheckedChange={(checked) => {
-              if (checked) setNative([...native, platform])
-              else setNative(native.filter((val) => val !== platform))
-            }}
-            size="$3"
-          >
-            <Checkbox.Indicator>
-              <Check />
-            </Checkbox.Indicator>
-          </Checkbox>
-          <Label size="$3" htmlFor={platform}>
-            Native {platform} toast
-          </Label>
-        </XStack>
-      ))}
+    <XStack space="$3">
+      <SizableText size="$1">Custom</SizableText>
+
+      <Switch
+        theme="active"
+        size="$1"
+        checked={!!native}
+        onCheckedChange={(val) => setNative(val)}
+      >
+        <Switch.Thumb
+          animation={[
+            'quick',
+            {
+              transform: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        />
+      </Switch>
+
+      <SizableText size="$1">Native</SizableText>
     </XStack>
   )
 }

package/src/ToastDuplicateDemo.tsx

@@ -6,7 +6,7 @@ export const ToastDuplicateDemo = () => {
   const [savedCount, setSavedCount] = React.useState(0)
 
   return (
-    <YStack ai="center">
+    <YStack alignItems="center">
       <Button
         onPress={() => {
           setSavedCount((old) => old + 1)
@@ -26,7 +26,7 @@ export const ToastDuplicateDemo = () => {
           scale={1}
           animation="100ms"
         >
-          <XStack space ai="center">
+          <XStack space alignItems="center">
             <YStack>
               <CheckCircle2 />
             </YStack>

package/src/ToggleGroupDemo.tsx

@@ -3,16 +3,18 @@ import { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'
 
 export function ToggleGroupDemo() {
   return (
-    <XStack ai="center" space="$10">
-      <YStack ai="center" space="$6">
-        <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
-        <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
-      </YStack>
-      <XStack ai="center" space="$6">
-        <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
-        <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
+    <YStack paddingHorizontal="$4">
+      <XStack alignItems="center" space="$10">
+        <YStack alignItems="center" space="$6">
+          <ToggleGroupComponent type="single" size="$3" orientation="horizontal" />
+          <ToggleGroupComponent type="multiple" size="$4" orientation="horizontal" />
+        </YStack>
+        <XStack alignItems="center" space="$6">
+          <ToggleGroupComponent type="single" size="$3" orientation="vertical" />
+          <ToggleGroupComponent type="multiple" size="$4" orientation="vertical" />
+        </XStack>
       </XStack>
-    </XStack>
+    </YStack>
   )
 }
 
@@ -25,11 +27,11 @@ function ToggleGroupComponent(props: {
   return (
     <XStack
       flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}
-      ai="center"
-      jc="center"
+      alignItems="center"
+      justifyContent="center"
       space="$4"
     >
-      <Label pr="$0"  jc="flex-end" size={props.size} htmlFor={id}>
+      <Label paddingRight="$0" justifyContent="flex-end" size={props.size} htmlFor={id}>
         {props.type === 'single' ? 'Single' : 'Multiple'}
       </Label>
       {/* <Separator vertical={props.orientation === 'horizontal'} /> */}
@@ -39,7 +41,7 @@ function ToggleGroupComponent(props: {
         id={id}
         type={props.type}
         size={props.size}
-        disableDeactivation={props.type === "single" ? true : undefined}
+        disableDeactivation={props.type === 'single' ? true : undefined}
       >
         <ToggleGroup.Item value="left" aria-label="Left aligned">
           <AlignLeft />

package/src/TokensDemo.tsx

@@ -28,7 +28,7 @@ export function TokensDemo() {
 
   return (
     <YStack space>
-      <XGroup ai="center" als="center">
+      <XGroup alignItems="center" alignSelf="center">
         {sections.map(({ name, key }) => {
           return (
             <XGroup.Item key={key}>
@@ -63,24 +63,24 @@ function SizeSection({ section }: { section: Section }) {
     .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))
 
   return (
-    <YStack f={1} space>
+    <YStack flex={1} space>
       <H2>Sizes</H2>
-      <YStack w="100%" space="$2" separator={<Separator />}>
+      <YStack width="100%" space="$2" separator={<Separator />}>
         {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(
           (token) => {
             return (
-              <XStack w="100%" ai="center" key={token}>
-                <YStack w="25%">
+              <XStack width="100%" alignItems="center" key={token}>
+                <YStack width="25%">
                   <H3 size="$6">${token}</H3>
                 </YStack>
-                <YStack w="20%">
+                <YStack width="20%">
                   <H4 size="$5">{tokens[token]?.val}px</H4>
                 </YStack>
                 <Square
                   size={tokens[token]?.val}
-                  bc="$color5"
+                  backgroundColor="$color5"
                   {...(section === 'spaceNegative' && {
-                    bc: '$red5',
+                    backgroundColor: '$red5',
                     size: -tokens[
                       spaceTokensNegative.find(
                         (t) => parseFloat(t) === -parseFloat(token)
@@ -90,7 +90,7 @@ function SizeSection({ section }: { section: Section }) {
                   {...(section === 'radius' && {
                     // @ts-ignore
                     size: allTokens.size[token]?.val,
-                    br: tokens[token]?.val,
+                    borderRadius: tokens[token]?.val,
                   })}
                 />
               </XStack>

package/src/TooltipDemo.tsx

@@ -20,7 +20,7 @@ import {
 export function TooltipDemo() {
   return (
     <TooltipGroup delay={{ open: 3000, close: 100 }}>
-      <YStack space="$2" als="center">
+      <YStack space="$2" alignSelf="center">
         <XStack space="$2">
           <Demo groupId="0" placement="top-end" Icon={Circle} />
           <Demo groupId="1" placement="top" Icon={ChevronUp} />
@@ -28,7 +28,7 @@ export function TooltipDemo() {
         </XStack>
         <XStack space="$2">
           <Demo groupId="3" placement="left" Icon={ChevronLeft} />
-          <YStack f={1} />
+          <YStack flex={1} />
           <Demo groupId="4" placement="right" Icon={ChevronRight} />
         </XStack>
         <XStack space="$2">
@@ -49,12 +49,12 @@ export function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {
       </Tooltip.Trigger>
       <Theme inverse>
         <Tooltip.Content
-          enterStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}
-          exitStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}
+          enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
           scale={1}
           x={0}
           y={0}
-          o={1}
+          opacity={1}
           animation={[
             'quick',
             {

package/src/UpdateThemeDemo.tsx

@@ -30,7 +30,7 @@ export function UpdateThemeDemo() {
   }, [])
 
   return (
-    <YStack ai="center" space>
+    <YStack alignItems="center" space>
       <Theme name={theme ?? null}>
         <Square borderRadius="$8" size={100} backgroundColor="$color" />
       </Theme>

package/types/StacksDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StacksDemo.d.ts","sourceRoot":"","sources":["../src/StacksDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,UAAU,gBAsBzB"}
+{"version":3,"file":"StacksDemo.d.ts","sourceRoot":"","sources":["../src/StacksDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,UAAU,gBA4CzB"}

package/types/TabsAdvancedDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsAdvancedDemo.d.ts","sourceRoot":"","sources":["../src/TabsAdvancedDemo.tsx"],"names":[],"mappings":";AAaA,eAAO,MAAM,gBAAgB,mBA8G5B,CAAA"}
+{"version":3,"file":"TabsAdvancedDemo.d.ts","sourceRoot":"","sources":["../src/TabsAdvancedDemo.tsx"],"names":[],"mappings":";AAiBA,eAAO,MAAM,gBAAgB,mBAc5B,CAAA"}

package/types/TabsDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsDemo.d.ts","sourceRoot":"","sources":["../src/TabsDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,QAAQ,gBAevB"}
+{"version":3,"file":"TabsDemo.d.ts","sourceRoot":"","sources":["../src/TabsDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,QAAQ,gBAuBvB"}

package/types/ToastDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastDemo.d.ts","sourceRoot":"","sources":["../src/ToastDemo.tsx"],"names":[],"mappings":";AAcA,eAAO,MAAM,SAAS,mBAarB,CAAA"}
+{"version":3,"file":"ToastDemo.d.ts","sourceRoot":"","sources":["../src/ToastDemo.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,SAAS,mBAWrB,CAAA"}

package/types/ToggleGroupDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupDemo.d.ts","sourceRoot":"","sources":["../src/ToggleGroupDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,eAAe,gBAa9B"}
+{"version":3,"file":"ToggleGroupDemo.d.ts","sourceRoot":"","sources":["../src/ToggleGroupDemo.tsx"],"names":[],"mappings":";AAGA,wBAAgB,eAAe,gBAe9B"}