@tamagui/demos 2.0.0-1768326993354 → 2.0.0-1768530912818

package/src/ContextMenuDemo.tsx

@@ -1,29 +1,12 @@
 import { ContextMenu } from '@tamagui/context-menu'
 import { Calendar, Check, ChevronRight } from '@tamagui/lucide-icons'
 import React from 'react'
-import { styled, Text, YStack } from 'tamagui'
+import { Text, YStack } from 'tamagui'
 
 /**
  * Note: you'll want to use createMenu() to customize further.
  */
 
-const Item = styled(ContextMenu.Item, {
-  py: 4,
-  hoverStyle: {
-    bg: '$color2',
-  },
-  pressStyle: {
-    bg: '$color3',
-  },
-})
-
-const ItemTitle = styled(ContextMenu.ItemTitle, {
-  color: '$color11',
-})
-
-Item.displayName = 'Item'
-ItemTitle.displayName = 'ItemTitle'
-
 export function ContextMenuDemo() {
   const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
   const [native, setNative] = React.useState(true)
@@ -33,7 +16,7 @@ export function ContextMenuDemo() {
   }
 
   return (
-    <ContextMenu allowFlip native={native} placement="right-start">
+    <ContextMenu allowFlip native={native} placement="bottom-start" offset={14}>
       <ContextMenu.Trigger asChild>
         <Text text="center" select={null}>
           Right Click or longPress
@@ -42,22 +25,18 @@ export function ContextMenuDemo() {
 
       <ContextMenu.Portal zIndex={100}>
         <ContextMenu.Content
-          px={0}
+          p="$1.5"
+          minW={180}
           borderWidth={1}
-          items="flex-start"
           borderColor="$borderColor"
-          enterStyle={{ y: -10, opacity: 0 }}
-          exitStyle={{ y: -10, opacity: 0 }}
-          elevate
-          transition={[
-            'quick',
-            {
-              opacity: {
-                overshootClamping: true,
-              },
-            },
-          ]}
+          transformOrigin="left top"
+          enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
+          exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
+          elevation="$3"
+          transition="menu"
         >
+          <ContextMenu.Arrow size="$4" borderWidth={1} borderColor="$borderColor" />
+
           <ContextMenu.Preview>
             {() => {
               return (
@@ -73,50 +52,64 @@ export function ContextMenuDemo() {
               )
             }}
           </ContextMenu.Preview>
-          <ContextMenu.Item onSelect={onSelect} key="about-notes">
+          <ContextMenu.Item
+            onSelect={onSelect}
+            key="about-notes"
+            style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+            hoverStyle={{ bg: '$backgroundHover' }}
+          >
             <ContextMenu.ItemTitle>About Notes</ContextMenu.ItemTitle>
           </ContextMenu.Item>
           <ContextMenu.Separator />
-          <ContextMenu.Group backgroundColor="transparent">
-            <ContextMenu.Item onSelect={onSelect} key="settings">
-              <ContextMenu.ItemTitle>Settings</ContextMenu.ItemTitle>
-            </ContextMenu.Item>
-            <ContextMenu.Item
-              onSelect={onSelect}
-              justify="space-between"
-              // when title is nested inside a React element then you need to use `textValue`
-              textValue="Calender"
-              key="accounts"
+
+          <ContextMenu.Item
+            onSelect={onSelect}
+            key="settings"
+            style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+            hoverStyle={{ bg: '$backgroundHover' }}
+          >
+            <ContextMenu.ItemTitle>Settings</ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            onSelect={onSelect}
+            justify="space-between"
+            textValue="Calendar"
+            key="accounts"
+            style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+            hoverStyle={{ bg: '$backgroundHover' }}
+          >
+            <ContextMenu.ItemTitle>Calendar</ContextMenu.ItemTitle>
+            <ContextMenu.ItemIcon
+              androidIconName="ic_menu_today"
+              ios={{
+                name: 'calendar',
+              }}
             >
-              <ContextMenu.ItemTitle>
-                <Text>Calender</Text>
-              </ContextMenu.ItemTitle>
-              <ContextMenu.ItemIcon
-                androidIconName="ic_menu_today"
-                ios={{
-                  name: 'calendar',
-                }}
-              >
-                <Calendar color="gray" size="$1" />
-              </ContextMenu.ItemIcon>
-            </ContextMenu.Item>
-          </ContextMenu.Group>
+              <Calendar color="gray" size={14} />
+            </ContextMenu.ItemIcon>
+          </ContextMenu.Item>
+
           <ContextMenu.Separator />
-          <ContextMenu.Group backgroundColor="transparent">
-            <ContextMenu.Item
-              onSelect={onSelect}
-              key="close-notes"
-              disabled
-              textValue="locked notes"
-            >
-              <ContextMenu.ItemTitle>
-                <Text color="gray">locked notes</Text>
-              </ContextMenu.ItemTitle>
-            </ContextMenu.Item>
-            <ContextMenu.Item destructive onSelect={onSelect} key="delete-all">
-              <ContextMenu.ItemTitle color="red">Delete all</ContextMenu.ItemTitle>
-            </ContextMenu.Item>
-          </ContextMenu.Group>
+
+          <ContextMenu.Item
+            onSelect={onSelect}
+            key="close-notes"
+            disabled
+            textValue="Locked Notes"
+            style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+            hoverStyle={{ bg: '$backgroundHover' }}
+          >
+            <ContextMenu.ItemTitle color="gray">Locked Notes</ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            destructive
+            onSelect={onSelect}
+            key="delete-all"
+            style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+            hoverStyle={{ bg: '$backgroundHover' }}
+          >
+            <ContextMenu.ItemTitle color="red">Delete all</ContextMenu.ItemTitle>
+          </ContextMenu.Item>
           <ContextMenu.Separator />
           {/* Submenu */}
           <ContextMenu.Sub placement="right-start">
@@ -124,33 +117,61 @@ export function ContextMenuDemo() {
               key="actions-trigger"
               justify="space-between"
               textValue="Actions"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
             >
               <ContextMenu.ItemTitle>Actions</ContextMenu.ItemTitle>
-              <ChevronRight size="$1" />
+              <ChevronRight size={12} color="$color10" />
             </ContextMenu.SubTrigger>
             <ContextMenu.Portal zIndex={200}>
               <ContextMenu.SubContent
-                enterStyle={{ y: -10, opacity: 0 }}
-                exitStyle={{ y: -10, opacity: 0 }}
-                transition={[
-                  'quick',
-                  {
-                    opacity: {
-                      overshootClamping: true,
-                    },
-                  },
-                ]}
-                px={0}
+                enterStyle={{ scale: 0.9, opacity: 0, x: -5 }}
+                exitStyle={{ scale: 0.95, opacity: 0, x: -3 }}
+                transition="menu"
+                transformOrigin="left top"
+                elevation="$3"
+                minW={160}
+                bg="$background"
+                p="$1.5"
+                borderWidth={1}
+                borderColor="$borderColor"
               >
-                <Item onSelect={onSelect} key="create-note" textValue="Create note">
-                  <ItemTitle>Create note</ItemTitle>
-                </Item>
-                <Item onSelect={onSelect} key="delete-all" textValue="Delete all notes">
-                  <ItemTitle>Delete all notes</ItemTitle>
-                </Item>
-                <Item onSelect={onSelect} key="sync-all" textValue="Sync notes">
-                  <ItemTitle>Sync notes</ItemTitle>
-                </Item>
+                <ContextMenu.Label
+                  color="$color10"
+                  fontWeight="400"
+                  fontSize={14}
+                  alignSelf="flex-start"
+                  style={{ paddingHorizontal: 8, paddingVertical: 5 }}
+                >
+                  Note settings
+                </ContextMenu.Label>
+                <ContextMenu.Item
+                  onSelect={onSelect}
+                  key="create-note"
+                  textValue="Create note"
+                  style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                  hoverStyle={{ bg: '$backgroundHover' }}
+                >
+                  <ContextMenu.ItemTitle>Create note</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+                <ContextMenu.Item
+                  onSelect={onSelect}
+                  key="delete-all"
+                  textValue="Delete all notes"
+                  style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                  hoverStyle={{ bg: '$backgroundHover' }}
+                >
+                  <ContextMenu.ItemTitle>Delete all notes</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+                <ContextMenu.Item
+                  onSelect={onSelect}
+                  key="sync-all"
+                  textValue="Sync notes"
+                  style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                  hoverStyle={{ bg: '$backgroundHover' }}
+                >
+                  <ContextMenu.ItemTitle>Sync notes</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
               </ContextMenu.SubContent>
             </ContextMenu.Portal>
           </ContextMenu.Sub>
@@ -159,28 +180,28 @@ export function ContextMenuDemo() {
             key="show-hidden"
             checked={bookmarksChecked}
             onCheckedChange={setBookmarksChecked}
-            gap="$2"
             justify="space-between"
+            style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+            hoverStyle={{ bg: '$backgroundHover' }}
           >
             <ContextMenu.ItemTitle>Mark as read</ContextMenu.ItemTitle>
             <ContextMenu.ItemIndicator>
-              <Check size="$1" />
+              <Check size={12} color="$color10" />
             </ContextMenu.ItemIndicator>
           </ContextMenu.CheckboxItem>
           <ContextMenu.CheckboxItem
             key="show-other-notes"
             checked={native}
             onCheckedChange={setNative}
-            gap="$2"
             justify="space-between"
+            style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+            hoverStyle={{ bg: '$backgroundHover' }}
           >
             <ContextMenu.ItemTitle>Enable Native</ContextMenu.ItemTitle>
             <ContextMenu.ItemIndicator>
-              <Check size="$1" />
+              <Check size={12} color="$color10" />
             </ContextMenu.ItemIndicator>
           </ContextMenu.CheckboxItem>
-
-          <ContextMenu.Arrow size={'$2'} />
         </ContextMenu.Content>
       </ContextMenu.Portal>
     </ContextMenu>

package/src/DialogDemo.tsx

@@ -117,7 +117,7 @@ function DialogInstance({ disableAdapt }: { disableAdapt?: boolean }) {
               <XStack flex={1}>
                 <SelectDemoContents
                   trigger={
-                    <Select.Trigger flex={1} iconAfter={ChevronDown}>
+                    <Select.Trigger flex={1} iconAfter={ChevronDown} borderRadius="$4">
                       <Select.Value placeholder="Something" />
                     </Select.Trigger>
                   }

package/src/LabelDemo.tsx

@@ -15,7 +15,7 @@ export function LabelDemo() {
           Notifications
         </Label>
         <Switch id="notify">
-          <Switch.Thumb transition="quick" />
+          <Switch.Thumb transition="quickest" />
         </Switch>
       </XStack>
     </YStack>

package/src/MenuDemo.tsx

@@ -1,8 +1,15 @@
-import { styled } from '@tamagui/core'
-import { Backpack, Calendar, Check, ChevronRight } from '@tamagui/lucide-icons'
+import {
+  Backpack,
+  Calendar,
+  Check,
+  ChevronRight,
+  FilePlus,
+  Trash2,
+  RefreshCw,
+} from '@tamagui/lucide-icons'
 import { Menu } from '@tamagui/menu'
 import React from 'react'
-import { Button } from 'tamagui'
+import { Button, useIsTouchDevice } from 'tamagui'
 
 /**
  * Menu Demo using Tamagui Menu component.
@@ -14,27 +21,11 @@ import { Button } from 'tamagui'
  * Note: you'll want to use createMenu() to customize further.
  */
 
-const Item = styled(Menu.Item, {
-  py: 4,
-
-  hoverStyle: {
-    bg: '$color2',
-  },
-  pressStyle: {
-    bg: '$color3',
-  },
-})
-
-const ItemTitle = styled(Menu.ItemTitle, {
-  color: '$color11',
-})
-
-Item.displayName = 'Item'
-ItemTitle.displayName = 'ItemTitle'
-
 export function MenuDemo() {
   const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
   const [native, setNative] = React.useState(true)
+  const [subMenuOpen, setSubMenuOpen] = React.useState(false)
+  const isTouchDevice = useIsTouchDevice()
 
   // Note: `item` is the Event on web, undefined on native
   const onSelect = (item) => {
@@ -43,115 +34,166 @@ export function MenuDemo() {
 
   return (
     <>
-      <Menu
-        offset={{
-          crossAxis: 25,
-        }}
-        allowFlip
-        placement="bottom-start"
-      >
+      <Menu allowFlip placement="bottom-start" offset={8}>
         <Menu.Trigger asChild>
-          <Button rounded="$10" icon={Backpack} scaleIcon={1.2} />
+          <Button size="$3" circular icon={Backpack} scaleIcon={1.2} />
         </Menu.Trigger>
 
         <Menu.Portal zIndex={100}>
           <Menu.Content
-            px={0}
+            p="$1.5"
+            minW={180}
             borderWidth={1}
-            items="flex-start"
             borderColor="$borderColor"
-            enterStyle={{ y: -10, opacity: 0 }}
-            exitStyle={{ y: -10, opacity: 0 }}
-            transition={[
-              'quicker',
-              {
-                opacity: {
-                  overshootClamping: true,
-                },
-              },
-            ]}
+            transformOrigin="left top"
+            enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
+            exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
+            transition="menu"
+            elevation="$3"
           >
-            <Menu.Item onSelect={onSelect} key="about-notes">
+            <Menu.Arrow size="$4" borderWidth={1} borderColor="$borderColor" />
+
+            <Menu.Item
+              onSelect={onSelect}
+              key="about-notes"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
               <Menu.ItemTitle>About Notes</Menu.ItemTitle>
             </Menu.Item>
 
             <Menu.Separator />
 
-            <Menu.Group backgroundColor="transparent">
-              <Menu.Item onSelect={onSelect} key="settings">
-                <Menu.ItemTitle>Settings</Menu.ItemTitle>
-              </Menu.Item>
-              <Menu.Item
-                onSelect={onSelect}
-                key="accounts"
-                justify="space-between"
-                // when title is nested inside a React element then you need to use `textValue`
-                textValue="Calendar"
+            <Menu.Item
+              onSelect={onSelect}
+              key="settings"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle>Settings</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item
+              onSelect={onSelect}
+              key="accounts"
+              justify="space-between"
+              // when title is nested inside a React element then you need to use `textValue`
+              textValue="Calendar"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle>Calendar</Menu.ItemTitle>
+              <Menu.ItemIcon
+                androidIconName="ic_menu_today"
+                ios={{
+                  name: 'calendar',
+                  hierarchicalColor: '#000',
+                  pointSize: 20,
+                }}
               >
-                <Menu.ItemTitle>Calendar</Menu.ItemTitle>
-                <Menu.ItemIcon
-                  androidIconName="ic_menu_today"
-                  ios={{
-                    name: 'calendar',
-                    hierarchicalColor: '#000',
-                    pointSize: 20,
-                  }}
-                >
-                  <Calendar color="gray" size={14} />
-                </Menu.ItemIcon>
-              </Menu.Item>
-            </Menu.Group>
+                <Calendar color="gray" size={14} />
+              </Menu.ItemIcon>
+            </Menu.Item>
 
             <Menu.Separator />
 
-            <Menu.Group backgroundColor="transparent">
-              <Menu.Item onSelect={onSelect} key="close-notes" disabled>
-                <Menu.ItemTitle color="gray">locked notes</Menu.ItemTitle>
-              </Menu.Item>
-              <Menu.Item onSelect={onSelect} destructive key="delete-all">
-                <Menu.ItemTitle color="red">Delete all</Menu.ItemTitle>
-              </Menu.Item>
-            </Menu.Group>
+            <Menu.Item
+              onSelect={onSelect}
+              key="close-notes"
+              disabled
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle color="gray">Locked Notes</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item
+              onSelect={onSelect}
+              destructive
+              key="delete-all"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
+            >
+              <Menu.ItemTitle color="red">Delete all</Menu.ItemTitle>
+            </Menu.Item>
 
             <Menu.Separator />
 
-            {/* Submenu */}
-            <Menu.Sub placement="right-start">
+            <Menu.Sub
+              open={subMenuOpen}
+              placement={isTouchDevice ? 'bottom' : 'right-start'}
+              onOpenChange={setSubMenuOpen}
+            >
               <Menu.SubTrigger
                 justify="space-between"
                 key="actions-trigger"
                 textValue="Actions"
+                style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                hoverStyle={{ bg: '$backgroundHover' }}
               >
-                <>
-                  <Menu.ItemTitle>Actions</Menu.ItemTitle>
-                  <ChevronRight size="$1" />
-                </>
+                <Menu.ItemTitle>Actions</Menu.ItemTitle>
+                <ChevronRight size={12} color="$color10" />
               </Menu.SubTrigger>
 
               <Menu.Portal zIndex={200}>
                 <Menu.SubContent
-                  enterStyle={{ y: -10, opacity: 0 }}
-                  exitStyle={{ y: -10, opacity: 0 }}
-                  transition={[
-                    'quicker',
-                    {
-                      opacity: {
-                        overshootClamping: true,
-                      },
-                    },
-                  ]}
-                  px={0}
+                  enterStyle={{ scale: 0.9, opacity: 0, x: -5 }}
+                  exitStyle={{ scale: 0.95, opacity: 0, x: -3 }}
+                  transition="menu"
+                  transformOrigin="left top"
+                  elevation="$3"
+                  minW={160}
+                  bg="$background"
+                  p="$1.5"
+                  borderWidth={1}
+                  borderColor="$borderColor"
                 >
-                  <Menu.Label fontSize={'$1'}>Note settings</Menu.Label>
-                  <Item onSelect={onSelect} key="create-note" textValue="Create note">
-                    <ItemTitle>Create note</ItemTitle>
-                  </Item>
-                  <Item onSelect={onSelect} key="delete-all" textValue="Create note">
-                    <ItemTitle>Delete all notes</ItemTitle>
-                  </Item>
-                  <Item onSelect={onSelect} key="sync-all" textValue="Sync notes">
-                    <ItemTitle>Sync notes</ItemTitle>
-                  </Item>
+                  <Menu.Label
+                    color="$color10"
+                    fontWeight="400"
+                    fontSize={14}
+                    alignSelf="flex-start"
+                    style={{ paddingHorizontal: 8, paddingVertical: 5 }}
+                  >
+                    Note settings
+                  </Menu.Label>
+                  <Menu.Item
+                    onSelect={onSelect}
+                    key="create-note"
+                    textValue="Create note"
+                    justify="space-between"
+                    style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                    hoverStyle={{ bg: '$backgroundHover' }}
+                  >
+                    <Menu.ItemTitle>Create note</Menu.ItemTitle>
+                    <Menu.ItemIcon>
+                      <FilePlus size={14} color="$color10" />
+                    </Menu.ItemIcon>
+                  </Menu.Item>
+                  <Menu.Item
+                    onSelect={onSelect}
+                    key="delete-all"
+                    textValue="Delete all notes"
+                    justify="space-between"
+                    style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                    hoverStyle={{ bg: '$backgroundHover' }}
+                  >
+                    <Menu.ItemTitle>Delete all notes</Menu.ItemTitle>
+                    <Menu.ItemIcon>
+                      <Trash2 size={14} color="$color10" />
+                    </Menu.ItemIcon>
+                  </Menu.Item>
+                  <Menu.Item
+                    onSelect={onSelect}
+                    key="sync-all"
+                    textValue="Sync notes"
+                    justify="space-between"
+                    style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+                    hoverStyle={{ bg: '$backgroundHover' }}
+                  >
+                    <Menu.ItemTitle>Sync notes</Menu.ItemTitle>
+                    <Menu.ItemIcon>
+                      <RefreshCw size={14} color="$color10" />
+                    </Menu.ItemIcon>
+                  </Menu.Item>
                 </Menu.SubContent>
               </Menu.Portal>
             </Menu.Sub>
@@ -162,26 +204,28 @@ export function MenuDemo() {
               key="show-hidden"
               checked={bookmarksChecked}
               onCheckedChange={setBookmarksChecked}
-              gap={'$2'}
+              justify="space-between"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
             >
               <Menu.ItemTitle>Mark as read</Menu.ItemTitle>
               <Menu.ItemIndicator>
-                <Check size="$1" />
+                <Check size={12} color="$color10" />
               </Menu.ItemIndicator>
             </Menu.CheckboxItem>
             <Menu.CheckboxItem
               key="show-other-notes"
               checked={native}
               onCheckedChange={setNative}
-              gap={'$2'}
+              justify="space-between"
+              style={{ paddingHorizontal: 8, paddingVertical: 5, borderRadius: 4 }}
+              hoverStyle={{ bg: '$backgroundHover' }}
             >
               <Menu.ItemTitle>Enable Native</Menu.ItemTitle>
               <Menu.ItemIndicator>
-                <Check size="$1" />
+                <Check size={12} color="$color10" />
               </Menu.ItemIndicator>
             </Menu.CheckboxItem>
-
-            <Menu.Arrow size={'$2'} />
           </Menu.Content>
         </Menu.Portal>
       </Menu>

package/src/PopoverDemo.tsx

@@ -90,7 +90,7 @@ export function Demo({
         height={200}
         enterStyle={{ y: -10, opacity: 0 }}
         exitStyle={{ y: -10, opacity: 0 }}
-        elevate
+        boxShadow="0px 4px 8px rgba(0,0,0,0.1), 0px 12px 32px rgba(0,0,0,0.08)"
         transition={[
           'quick',
           {

package/src/SwitchDemo.tsx

@@ -29,7 +29,7 @@ export function SwitchWithLabel(props: { size: SizeTokens; defaultChecked?: bool
       </Label>
       <Separator minH={20} vertical />
       <Switch id={id} size={props.size} defaultChecked={props.defaultChecked}>
-        <Switch.Thumb transition="quicker" />
+        <Switch.Thumb transition="quickest" />
       </Switch>
     </XStack>
   )