@tamagui/demos 2.7.7 → 3.0.0-beta.1091.1

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

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,53 @@ 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={{
+          preset: 'quick',
+          opacity: { preset: 'quick', spring: { 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,26 @@ 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={{
+              preset: 'quicker',
+              transform: { preset: 'quicker', spring: { 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 +39,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>
   )