@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/src/FormsDemo.tsx

@@ -1,60 +1,66 @@
-import React from 'react'
-import type { SizeTokens } from 'tamagui'
-import {
-  Button,
-  Form,
-  H4,
-  Spinner,
-  AnimatePresence,
-  Square,
-  XStack,
-  XGroup,
-  Label,
-  YStack,
-} from 'tamagui'
+import * as React from 'react'
+import { Button, Field, Form, Paragraph, Spinner, YStack } from 'tamagui'
+import { FieldInput } from './FieldDemo'
 
-export function FormsDemo(props: { size: SizeTokens }) {
-  const [status, setStatus] = React.useState<'off' | 'submitting' | 'submitted'>('off')
+export function FormsDemo() {
+  const [status, setStatus] = React.useState<'idle' | 'submitting'>('idle')
 
   React.useEffect(() => {
-    if (status === 'submitting') {
-      const timer = setTimeout(() => setStatus('off'), 2000)
-      return () => {
-        clearTimeout(timer)
-      }
+    if (status !== 'submitting') {
+      return
     }
+    const timer = setTimeout(() => setStatus('idle'), 1200)
+    return () => clearTimeout(timer)
   }, [status])
 
   return (
     <Form
-      items="center"
-      gap="$2"
-      onSubmit={() => setStatus('submitting')}
+      width={350}
+      maxW="90%"
+      gap="4"
       borderWidth={1}
-      rounded="$4"
-      bg="$color2"
-      borderColor="$borderColor"
-      minW={350}
-      p="$6"
+      rounded="7"
+      bg="color2"
+      borderColor="border-color"
+      p="6"
+      boxShadow="0 2px 3px rgba(0, 0, 0, 0.06), 0 14px 30px rgba(0, 0, 0, 0.10), 0 36px 72px rgba(0, 0, 0, 0.12)"
+      onSubmit={() => setStatus('submitting')}
     >
-      <Form.Trigger asChild disabled={status !== 'off'}>
-        <YStack gap="$4">
-          <Button>Submit</Button>
-          <YStack width="100%" height={40} justifyContent="center" alignItems="center">
-            <AnimatePresence>
-              {status === 'submitting' ? (
-                <Spinner
-                  transition="medium"
-                  enterStyle={{ opacity: 0 }}
-                  alignSelf="center"
-                  key="spinner"
-                  width={8}
-                />
-              ) : null}
-            </AnimatePresence>
-          </YStack>
-        </YStack>
+      <Field name="email" gap="2">
+        <Field.Label color="color11" fontWeight="500">
+          Email
+        </Field.Label>
+        <FieldInput type="email" placeholder="ada@example.com" required />
+        <Field.Description color="color9" fontSize="2">
+          Form collects this value by field name.
+        </Field.Description>
+        <Field.Error color="red10" fontSize="2" />
+      </Field>
+
+      <Form.Trigger asChild disabled={status !== 'idle'}>
+        <Button
+          self="flex-end"
+          height={40}
+          px="5"
+          rounded="5"
+          bg="color11 hover:color10"
+          color="color1"
+          fontSize="2"
+          fontWeight="500"
+        >
+          Submit
+        </Button>
       </Form.Trigger>
+
+      <YStack height={24} items="center" justify="center">
+        {status === 'submitting' ? (
+          <Spinner size="small" />
+        ) : (
+          <Paragraph color="color9" size="2">
+            Ready
+          </Paragraph>
+        )}
+      </YStack>
     </Form>
   )
 }

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" gap="$2" items="center">
+    <YStack p="3" gap="2" items="center">
       <Group orientation="horizontal">
         <Group.Item>
           <Button>First</Button>
@@ -16,15 +16,15 @@ export function GroupDemo() {
         </Group.Item>
       </Group>
 
-      {/* responsive size - children control their own size/radius */}
+      {/* children control their own size and radius */}
       <XGroup>
         <XGroup.Item>
-          <Button size="$3" $gtSm={{ size: '$5' }} icon={Activity}>
+          <Button size="3" icon={Activity}>
             First
           </Button>
         </XGroup.Item>
         <XGroup.Item>
-          <Button size="$3" $gtSm={{ size: '$5' }} icon={Airplay}>
+          <Button size="3" icon={Airplay}>
             Second
           </Button>
         </XGroup.Item>
@@ -33,20 +33,20 @@ export function GroupDemo() {
       {/* with separators - add them between items */}
       <YGroup>
         <YGroup.Item>
-          <ListItem borderRadius="$6" theme="surface1" title="First" />
+          <ListItem borderRadius="6" theme="level2" title="First" />
         </YGroup.Item>
         <Separator />
         <YGroup.Item>
           <ListItem
-            borderRadius="$6"
-            theme="surface1"
+            borderRadius="6"
+            theme="level2"
             title="Second"
             subTitle="Second subtitle"
           />
         </YGroup.Item>
         <Separator />
         <YGroup.Item>
-          <ListItem borderRadius="$6" theme="surface1">
+          <ListItem borderRadius="6" theme="level2">
             Third
           </ListItem>
         </YGroup.Item>

package/src/InputsDemo.tsx

@@ -3,10 +3,10 @@ import { Button, Input, TextArea, XStack, YStack } from 'tamagui'
 
 export function InputsDemo() {
   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>
   )
@@ -14,7 +14,7 @@ export function InputsDemo() {
 
 function InputDemo(props: { size: SizeTokens }) {
   return (
-    <XStack items="center" gap="$2">
+    <XStack items="center" gap="2">
       <Input
         theme="surface1"
         flex={1}

package/src/LabelDemo.tsx

@@ -2,21 +2,21 @@ import { Input, Label, Switch, XStack, YStack } from 'tamagui'
 
 export function LabelDemo() {
   return (
-    <YStack $maxMd={{ width: '100%' }} minW={300} gap="$4">
-      <XStack items="center" gap="$4">
+    <YStack width="max-md:100%" minW={300} gap="4">
+      <XStack items="center" gap="4">
         <Label width={90} htmlFor="name">
           Name
         </Label>
         <Input flex={1} id="name" defaultValue="Nate Wienert" />
       </XStack>
 
-      <XStack items="center" gap="$4">
+      <XStack items="center" gap="4">
         <Label width={90} htmlFor="notify">
           Notifications
         </Label>
         <Switch
           activeStyle={{
-            backgroundColor: '$color8',
+            backgroundColor: 'color8',
           }}
           id="notify"
         >

package/src/LinearGradientDemo.tsx

@@ -3,25 +3,25 @@ import { LinearGradient } from '@tamagui/linear-gradient'
 
 export function LinearGradientDemo() {
   return (
-    <XStack gap="$4">
+    <XStack gap="4">
       {/* tokens */}
       <LinearGradient
-        width="$6"
-        height="$6"
-        rounded="$4"
-        colors={['$red10', '$yellow10']}
+        width="6"
+        height="6"
+        rounded="4"
         start={[0, 1]}
         end={[0, 0]}
+        colors={['red10', 'yellow10']}
       />
 
       {/* theme values */}
       <LinearGradient
-        width="$6"
-        height="$6"
-        rounded="$4"
-        colors={['$background', '$color']}
+        width="6"
+        height="6"
+        rounded="4"
         start={[1, 1]}
         end={[0, 0]}
+        colors={['background', 'color']}
       />
     </XStack>
   )

package/src/ListItemDemo.tsx

@@ -3,8 +3,8 @@ import { ListItem, Separator, Theme, XStack, YGroup } from 'tamagui'
 
 export function ListItemDemo() {
   return (
-    <Theme name="surface1">
-      <XStack $maxMd={{ flexDirection: 'column' }} px="$4" gap="$4">
+    <Theme name="level2">
+      <XStack flexDirection="max-md:column" px="4" gap="4">
         <ListItemDemo1 />
         <ListItemDemo2 />
       </XStack>
@@ -17,15 +17,15 @@ function ListItemDemo1() {
     <YGroup
       self="center"
       borderWidth={1}
-      borderColor="$borderColor"
-      rounded="$4"
+      borderColor="border-color"
+      rounded="4"
       overflow="hidden"
       width={240}
-      size="$4"
+      size="4"
     >
       <YGroup.Item>
         <ListItem
-          gap="$3"
+          gap="3"
           icon={Star}
           title="Star"
           subTitle={<ListItem.Subtitle>Twinkles</ListItem.Subtitle>}
@@ -33,17 +33,17 @@ function ListItemDemo1() {
         />
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem gap="$3" icon={Moon}>
+        <ListItem gap="3" icon={Moon}>
           Moon
         </ListItem>
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem gap="$3" icon={Sun}>
+        <ListItem gap="3" icon={Sun}>
           Sun
         </ListItem>
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem gap="$3" icon={Cloud}>
+        <ListItem gap="3" icon={Cloud}>
           Cloud
         </ListItem>
       </YGroup.Item>
@@ -56,15 +56,15 @@ function ListItemDemo2() {
     <YGroup
       self="center"
       borderWidth={1}
-      borderColor="$borderColor"
-      rounded="$4"
+      borderColor="border-color"
+      rounded="4"
       overflow="hidden"
       width={240}
-      size="$5"
+      size="5"
     >
       <YGroup.Item>
         <ListItem
-          gap="$3"
+          gap="3"
           title="Star"
           subTitle="Subtitle"
           icon={Star}
@@ -74,7 +74,7 @@ function ListItemDemo2() {
       <Separator />
       <YGroup.Item>
         <ListItem
-          gap="$3"
+          gap="3"
           title="Moon"
           subTitle="Subtitle"
           icon={Moon}

package/src/LucideIconsDemo.tsx

@@ -30,13 +30,13 @@ export function LucideIconsDemo() {
             <Icon size={size * 0.25} />
             <Spacer />
             <Paragraph
-              height="$6"
+              height="6"
               wordWrap="break-word"
               maxW="100%"
               text="center"
-              px="$2"
-              size="$1"
+              px="2"
               opacity={0.5}
+              size="1"
             >
               {name}
             </Paragraph>
@@ -46,7 +46,7 @@ export function LucideIconsDemo() {
   )
 
   return (
-    <YStack minW="100%" p="$4" pb="$0" gap="$4">
+    <YStack minW="100%" paddingTop="4" paddingRight="4" paddingLeft="4" pb="0" gap="4">
       <Input value={searchRaw} onChangeText={setSearch as any} placeholder="Search..." />
 
       <YStack height={420}>

package/src/MenuDemo.tsx

@@ -7,9 +7,9 @@ import {
   RefreshCw,
   Trash2,
 } from '@tamagui/lucide-icons-2'
-import { Menu } from '@tamagui/menu'
 import React from 'react'
 import { Button } from 'tamagui'
+import { Menu } from './MenuSkins'
 
 /**
  * Menu Demo using Tamagui Menu component.
@@ -17,10 +17,6 @@ import { Button } from 'tamagui'
  * No configuration needed - it just works!
  */
 
-/**
- * Note: you'll want to use createMenu() to customize further.
- */
-
 export function MenuDemo() {
   const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
   const [native, setNative] = React.useState(true)
@@ -35,7 +31,7 @@ export function MenuDemo() {
     <>
       <Menu offset={8}>
         <Menu.Trigger asChild>
-          <Button size="$4" icon={Backpack}>
+          <Button size="4" icon={Backpack}>
             Open
           </Button>
         </Menu.Trigger>
@@ -43,12 +39,13 @@ export function MenuDemo() {
         <Menu.Portal zIndex={100}>
           <Menu.Content
             transition="100ms"
-            borderRadius="$4"
-            enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
-            exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
-            boxShadow="0 4px 5px $shadowColor"
+            borderRadius="4"
+            scale="enter:0.9 exit:0.95"
+            opacity="enter:0 exit:0"
+            y="enter:-5px exit:-3px"
+            boxShadow="0 4px 5px shadow-color"
           >
-            <Menu.Arrow size="$4" borderWidth={1} borderColor="$borderColor" />
+            <Menu.Arrow size={13} borderWidth={1} borderColor="border-color" />
 
             <Menu.ScrollView padding={5}>
               <Menu.Item onSelect={onSelect} key="about-notes">
@@ -98,19 +95,20 @@ export function MenuDemo() {
                   textValue="Actions"
                 >
                   <Menu.ItemTitle>Actions</Menu.ItemTitle>
-                  <ChevronRight size={16} color="$color10" />
+                  <ChevronRight size={16} color="color10" />
                 </Menu.SubTrigger>
 
                 <Menu.Portal zIndex={200}>
                   <Menu.SubContent
                     transition="100ms"
-                    borderRadius="$4"
-                    enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
-                    exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
-                    boxShadow="0 4px 5px $shadowColor"
+                    borderRadius="4"
+                    scale="enter:0.9 exit:0.95"
+                    opacity="enter:0 exit:0"
+                    y="enter:-5px exit:-3px"
+                    boxShadow="0 4px 5px shadow-color"
                     padding={5}
                   >
-                    <Menu.Label padding={5} color="$color9" size="$3" select="none">
+                    <Menu.Label padding={5} color="color9" fontSize="3" select="none">
                       Note settings
                     </Menu.Label>
                     <Menu.Item
@@ -121,7 +119,7 @@ export function MenuDemo() {
                     >
                       <Menu.ItemTitle>Create note</Menu.ItemTitle>
                       <Menu.ItemIcon>
-                        <FilePlus size={14} color="$color10" />
+                        <FilePlus size={14} color="color10" />
                       </Menu.ItemIcon>
                     </Menu.Item>
                     <Menu.Item
@@ -132,7 +130,7 @@ export function MenuDemo() {
                     >
                       <Menu.ItemTitle>Delete all notes</Menu.ItemTitle>
                       <Menu.ItemIcon>
-                        <Trash2 size={14} color="$color10" />
+                        <Trash2 size={14} color="color10" />
                       </Menu.ItemIcon>
                     </Menu.Item>
                     <Menu.Item
@@ -143,7 +141,7 @@ export function MenuDemo() {
                     >
                       <Menu.ItemTitle>Sync notes</Menu.ItemTitle>
                       <Menu.ItemIcon>
-                        <RefreshCw size={14} color="$color10" />
+                        <RefreshCw size={14} color="color10" />
                       </Menu.ItemIcon>
                     </Menu.Item>
                   </Menu.SubContent>
@@ -160,7 +158,7 @@ export function MenuDemo() {
               >
                 <Menu.ItemTitle>Mark as read</Menu.ItemTitle>
                 <Menu.ItemIndicator>
-                  <Check size={12} color="$color10" />
+                  <Check size={12} color="color10" />
                 </Menu.ItemIndicator>
               </Menu.CheckboxItem>
               <Menu.CheckboxItem
@@ -171,7 +169,7 @@ export function MenuDemo() {
               >
                 <Menu.ItemTitle>Enable Native</Menu.ItemTitle>
                 <Menu.ItemIndicator>
-                  <Check size={12} color="$color10" />
+                  <Check size={12} color="color10" />
                 </Menu.ItemIndicator>
               </Menu.CheckboxItem>
             </Menu.ScrollView>

package/src/MenuSkins.tsx

@@ -0,0 +1,189 @@
+import { ContextMenu as ContextMenuBehavior } from '@tamagui/context-menu'
+import { Menu as MenuBehavior } from '@tamagui/menu'
+import React from 'react'
+import { styled, withStaticProperties } from 'tamagui'
+
+const contentStyles = {
+  minWidth: 180,
+  backgroundColor: 'background',
+  borderColor: 'border-color',
+  borderWidth: 1,
+  boxShadow: '0 10px 20px shadow-color',
+} as const
+
+const itemStyles = {
+  displayName: 'DemoMenuItem',
+  width: '100%',
+  paddingHorizontal: 8,
+  paddingVertical: 4,
+  alignItems: 'center',
+  flexDirection: 'row',
+  borderRadius: 6,
+  cursor: 'pointer',
+
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        opacity: 0.45,
+      },
+    },
+  },
+} as const
+
+const titleStyles = {
+  displayName: 'DemoMenuItemTitle',
+  color: 'color',
+  cursor: 'default',
+  flexGrow: 1,
+  flexShrink: 1,
+  fontSize: 14,
+} as const
+
+const subtitleStyles = {
+  displayName: 'DemoMenuItemSubtitle',
+  color: 'color',
+  opacity: 0.6,
+  cursor: 'default',
+  fontSize: 14,
+} as const
+
+const iconStyles = {
+  displayName: 'DemoMenuItemIcon',
+  width: 20,
+  height: 20,
+  marginLeft: 'auto',
+  alignItems: 'center',
+  justifyContent: 'center',
+} as const
+
+const indicatorStyles = {
+  displayName: 'DemoMenuItemIndicator',
+  marginLeft: 'auto',
+  alignItems: 'center',
+  justifyContent: 'center',
+} as const
+
+const separatorStyles = {
+  displayName: 'DemoMenuSeparator',
+  height: 1,
+  marginHorizontal: 10,
+  marginVertical: 3,
+  backgroundColor: 'border-color',
+} as const
+
+const labelStyles = {
+  displayName: 'DemoMenuLabel',
+  paddingHorizontal: '2-5',
+  paddingVertical: '1-5',
+  color: 'color',
+  opacity: 0.6,
+  cursor: 'default',
+  fontSize: 14,
+} as const
+
+const groupStyles = {
+  displayName: 'DemoMenuGroup',
+  width: '100%',
+} as const
+
+const MenuContent = styled(MenuBehavior.Content, contentStyles)
+const MenuSubContent = styled(MenuBehavior.SubContent, contentStyles)
+const MenuGroup = styled(MenuBehavior.Group, groupStyles)
+const MenuLabel = styled(MenuBehavior.Label, labelStyles)
+const MenuItem = styled(MenuBehavior.Item, itemStyles)
+const MenuCheckboxItem = styled(MenuBehavior.CheckboxItem, itemStyles)
+const MenuRadioItem = styled(MenuBehavior.RadioItem, itemStyles)
+const MenuSubTrigger = styled(MenuBehavior.SubTrigger, itemStyles)
+const MenuItemTitle = styled(MenuBehavior.ItemTitle, titleStyles)
+const MenuItemSubtitle = styled(MenuBehavior.ItemSubtitle, subtitleStyles)
+const MenuItemIcon = styled(MenuBehavior.ItemIcon, iconStyles)
+const MenuItemIndicator = styled(MenuBehavior.ItemIndicator, indicatorStyles)
+const MenuSeparator = styled(MenuBehavior.Separator, separatorStyles)
+const MenuArrow = styled(MenuBehavior.Arrow, {
+  displayName: 'DemoMenuArrow',
+  backgroundColor: 'background',
+  borderColor: 'border-color',
+  borderWidth: 1,
+})
+const MenuScrollView = styled(MenuBehavior.ScrollView, {
+  displayName: 'DemoMenuScrollView',
+  padding: '1',
+})
+
+const MenuRoot = (props: React.ComponentProps<typeof MenuBehavior>) => (
+  <MenuBehavior {...props} />
+)
+
+export const Menu = withStaticProperties(MenuRoot, {
+  Trigger: MenuBehavior.Trigger,
+  Portal: MenuBehavior.Portal,
+  Content: MenuContent,
+  Group: MenuGroup,
+  Label: MenuLabel,
+  Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: MenuBehavior.RadioGroup,
+  RadioItem: MenuRadioItem,
+  ItemIndicator: MenuItemIndicator,
+  Separator: MenuSeparator,
+  Arrow: MenuArrow,
+  Sub: MenuBehavior.Sub,
+  SubTrigger: MenuSubTrigger,
+  SubContent: MenuSubContent,
+  ItemTitle: MenuItemTitle,
+  ItemSubtitle: MenuItemSubtitle,
+  ItemIcon: MenuItemIcon,
+  ItemImage: MenuBehavior.ItemImage,
+  ScrollView: MenuScrollView,
+}) as unknown as typeof MenuBehavior
+
+const ContextMenuContent = styled(ContextMenuBehavior.Content, contentStyles)
+const ContextMenuSubContent = styled(ContextMenuBehavior.SubContent, contentStyles)
+const ContextMenuGroup = styled(ContextMenuBehavior.Group, groupStyles)
+const ContextMenuLabel = styled(ContextMenuBehavior.Label, labelStyles)
+const ContextMenuItem = styled(ContextMenuBehavior.Item, itemStyles)
+const ContextMenuCheckboxItem = styled(ContextMenuBehavior.CheckboxItem, itemStyles)
+const ContextMenuRadioItem = styled(ContextMenuBehavior.RadioItem, itemStyles)
+const ContextMenuSubTrigger = styled(ContextMenuBehavior.SubTrigger, itemStyles)
+const ContextMenuItemTitle = styled(ContextMenuBehavior.ItemTitle, titleStyles)
+const ContextMenuItemSubtitle = styled(ContextMenuBehavior.ItemSubtitle, subtitleStyles)
+const ContextMenuItemIcon = styled(ContextMenuBehavior.ItemIcon, iconStyles)
+const ContextMenuItemIndicator = styled(
+  ContextMenuBehavior.ItemIndicator,
+  indicatorStyles
+)
+const ContextMenuSeparator = styled(ContextMenuBehavior.Separator, separatorStyles)
+const ContextMenuArrow = styled(ContextMenuBehavior.Arrow, {
+  displayName: 'DemoContextMenuArrow',
+  backgroundColor: 'background',
+  borderColor: 'border-color',
+  borderWidth: 1,
+})
+
+const ContextMenuRoot = (props: React.ComponentProps<typeof ContextMenuBehavior>) => (
+  <ContextMenuBehavior {...props} />
+)
+
+export const ContextMenu = withStaticProperties(ContextMenuRoot, {
+  Trigger: ContextMenuBehavior.Trigger,
+  Portal: ContextMenuBehavior.Portal,
+  Content: ContextMenuContent,
+  Preview: ContextMenuBehavior.Preview,
+  Group: ContextMenuGroup,
+  Label: ContextMenuLabel,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  RadioGroup: ContextMenuBehavior.RadioGroup,
+  RadioItem: ContextMenuRadioItem,
+  ItemIndicator: ContextMenuItemIndicator,
+  Separator: ContextMenuSeparator,
+  Arrow: ContextMenuArrow,
+  Sub: ContextMenuBehavior.Sub,
+  SubTrigger: ContextMenuSubTrigger,
+  SubContent: ContextMenuSubContent,
+  ItemTitle: ContextMenuItemTitle,
+  ItemSubtitle: ContextMenuItemSubtitle,
+  ItemIcon: ContextMenuItemIcon,
+  ItemImage: ContextMenuBehavior.ItemImage,
+}) as unknown as typeof ContextMenuBehavior