@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/src/ButtonDemo.tsx

@@ -1,45 +1,44 @@
-import { Button } from '@tamagui/button'
 import { Activity, Airplay } from '@tamagui/lucide-icons-2'
-import { Theme, XGroup, XStack, YStack } from 'tamagui'
+import { Button, Theme, XGroup, XStack, YStack } from 'tamagui'
 
 export function ButtonDemo() {
   return (
-    <YStack p="$3" gap="$3">
+    <YStack p="3" gap="3">
       <Button>Plain</Button>
-      <Button self="center" icon={Airplay} size="$6">
+      <Button self="center" icon={Airplay} size="6">
         Large
       </Button>
-      <XStack gap="$2" justify="center">
-        <Button size="$3" theme="accent">
+      <XStack gap="2" justify="center">
+        <Button size="3" theme="accent">
           Active
         </Button>
-        <Button size="$3" variant="outlined">
+        <Button size="3" variant="outlined">
           Outlined
         </Button>
       </XStack>
-      <XStack gap="$2" justify="center">
+      <XStack gap="2" justify="center">
         <Theme name="accent">
-          <Button size="$3">
-            <Button.Icon>
+          <Button size="3">
+            <Button.Icon size={14}>
               <Activity />
             </Button.Icon>
-            <Button.Text>Inverse</Button.Text>
+            <Button.Text size={true}>Inverse</Button.Text>
           </Button>
         </Theme>
-        <Button iconAfter={Activity} size="$3">
+        <Button iconAfter={Activity} size="3">
           iconAfter
         </Button>
       </XStack>
 
       <XGroup>
         <XGroup.Item>
-          <Button width="50%" size="$2" disabled opacity={0.5}>
+          <Button width="50%" size="2" disabled opacity={0.5}>
             disabled
           </Button>
         </XGroup.Item>
 
         <XGroup.Item>
-          <Button width="50%" size="$2">
+          <Button width="50%" size="2">
             plain
           </Button>
         </XGroup.Item>

package/src/CardDemo.tsx

@@ -3,18 +3,16 @@ import { Button, Card, H2, Image, Paragraph, Theme, XStack } from 'tamagui'
 
 export function CardDemo() {
   return (
-    <Theme name="surface1">
-      <XStack $maxMd={{ flexDirection: 'column' }} px="$4" gap="$4">
+    <Theme name="level2">
+      <XStack flexDirection="max-md:column" px="4" gap="4">
         <DemoCard
           transition="bouncy"
-          size="$4"
+          size="4"
           width={250}
           height={300}
-          scale={0.9}
-          hoverStyle={{ scale: 0.925 }}
-          pressStyle={{ scale: 0.875 }}
+          scale="0.9 hover:0.925 press:0.875"
         />
-        <DemoCard size="$5" width={250} height={300} />
+        <DemoCard size="5" width={250} height={300} />
       </XStack>
     </Theme>
   )
@@ -22,14 +20,14 @@ export function CardDemo() {
 
 export function DemoCard(props: CardProps) {
   return (
-    <Card size="$4" borderWidth={1} borderColor="$borderColor" {...props}>
-      <Card.Header p="$4">
+    <Card size="4" borderWidth={1} borderColor="border-color" {...props}>
+      <Card.Header p="4">
         <H2>Sony A7IV</H2>
         <Paragraph>Now available</Paragraph>
       </Card.Header>
-      <Card.Footer p="$4">
+      <Card.Footer p="4">
         <XStack flex={1} />
-        <Button rounded="$10">Purchase</Button>
+        <Button rounded="10">Purchase</Button>
       </Card.Footer>
       <Card.Background items="center">
         <Image

package/src/CheckboxDemo.tsx

@@ -4,11 +4,11 @@ import { Checkbox, Label, Theme, XStack, YStack } from 'tamagui'
 
 export function CheckboxDemo() {
   return (
-    <Theme name="surface2">
-      <YStack width={300} items="center" gap="$2">
-        <CheckboxWithLabel size="$3" />
-        <CheckboxWithLabel size="$4" defaultChecked />
-        <CheckboxWithLabel size="$5" disabled label="Accept terms (disabled)" />
+    <Theme name="level3">
+      <YStack width={300} items="center" gap="2">
+        <CheckboxWithLabel size="3" />
+        <CheckboxWithLabel size="4" defaultChecked />
+        <CheckboxWithLabel size="5" disabled label="Accept terms (disabled)" />
       </YStack>
     </Theme>
   )
@@ -20,11 +20,17 @@ export function CheckboxWithLabel({
   disabled,
   ...checkboxProps
 }: CheckboxProps & { label?: string }) {
-  const id = `checkbox-${(size || '').toString().slice(1)}`
+  const id = `checkbox-${size || ''}`
   return (
     <Theme name={disabled ? 'gray' : null}>
-      <XStack width={300} items="center" gap="$4">
-        <Checkbox id={id} size={size} disabled={disabled} {...checkboxProps}>
+      <XStack width={300} items="center" gap="4">
+        <Checkbox
+          id={id}
+          size={size}
+          disabled={disabled}
+          activeStyle={{ backgroundColor: 'accent-background' }}
+          {...checkboxProps}
+        >
           <Checkbox.Indicator>
             <CheckIcon />
           </Checkbox.Indicator>

package/src/CheckboxHeadlessDemo.tsx

@@ -9,8 +9,8 @@ import { Label, XStack, YStack } from 'tamagui'
 
 export function CheckboxHeadlessDemo() {
   return (
-    <YStack width={200} items="center" gap="$3">
-      <XStack gap="$3" items="center">
+    <YStack width={200} items="center" gap="3">
+      <XStack gap="3" items="center">
         <HeadlessCheckbox defaultChecked="indeterminate" id="headless" />
         <Label htmlFor="headless">Headless</Label>
       </XStack>

package/src/ColorsDemo.tsx

@@ -32,7 +32,7 @@ const darkColors = {
 
 export function ColorsDemo() {
   return (
-    <YStack mt="$4" gap="$8">
+    <YStack mt="4" gap="8">
       <ColorsRow title="Light" colorSets={lightColors} />
       <Separator />
       <ColorsRow title="Dark" colorSets={darkColors} />
@@ -50,32 +50,26 @@ function ColorsRow({
   colorSets: Record<(typeof colorGroups)[number], ColorSet>
 }) {
   return (
-    <YStack gap="$4" $sm={{ gap: '$2' }}>
-      <H2 size="$2">{title}</H2>
+    <YStack gap="4 sm:2">
+      <H2 size="2">{title}</H2>
 
-      <XStack gap="$4" self="center">
-        <YStack gap="$4" $sm={{ gap: '$2' }} self="center">
+      <XStack gap="4" self="center">
+        <YStack gap="4 sm:2" self="center">
           {colorGroups.map((groupName) => {
             const colorSet = colorSets[groupName]
             const colors = Object.values(colorSet)
             return (
-              <XStack gap="$2" key={groupName}>
+              <XStack gap="2" key={groupName}>
                 {colors.map((color, index) => {
                   return (
                     <Square
                       key={`${groupName}${index}`}
-                      rounded="$2"
-                      size="$4"
-                      height="$4"
+                      rounded="2"
+                      width="4 sm:2 xs:1"
+                      height="4 sm:2 xs:1"
                       borderWidth={1}
                       bg={color as any}
-                      borderColor="$color7"
-                      $sm={{
-                        size: '$2',
-                      }}
-                      $xs={{
-                        size: '$1',
-                      }}
+                      borderColor="color7"
                     />
                   )
                 })}
@@ -83,22 +77,16 @@ function ColorsRow({
             )
           })}
 
-          <XStack gap="$2" self="center">
+          <XStack gap="2" self="center">
             {new Array(13)
               .fill(0)
               .slice(1)
               .map((_, index) => {
                 return (
                   <Paragraph
-                    color="$color10"
+                    color="color10"
                     text="center"
-                    width="$4"
-                    $sm={{
-                      width: '$2',
-                    }}
-                    $xs={{
-                      width: '$1',
-                    }}
+                    width="4 sm:2 xs:1"
                     key={index}
                   >
                     {index}
@@ -108,19 +96,13 @@ function ColorsRow({
           </XStack>
         </YStack>
 
-        <YStack gap="$4" mt="$2">
+        <YStack gap="4" mt="2">
           {colorGroups.map((name) => (
             <Paragraph
               theme={name as any}
-              color="$color10"
-              height="$4"
+              color="color10"
+              height="4 sm:2 xs:1"
               rotate="-10deg"
-              $sm={{
-                height: '$2',
-              }}
-              $xs={{
-                height: '$1',
-              }}
               key={name}
             >
               {name}

package/src/ContextMenuDemo.tsx

@@ -1,11 +1,7 @@
-import { ContextMenu } from '@tamagui/context-menu'
 import { Calendar, Check, ChevronRight } from '@tamagui/lucide-icons-2'
 import React from 'react'
 import { Text, View, YStack } from 'tamagui'
-
-/**
- * Note: you'll want to use createMenu() to customize further.
- */
+import { ContextMenu } from './MenuSkins'
 
 export function ContextMenuDemo() {
   const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
@@ -19,14 +15,14 @@ export function ContextMenuDemo() {
     <ContextMenu native={native}>
       <ContextMenu.Trigger asChild>
         <View
-          p="$4"
-          rounded="$4"
+          p="4"
+          rounded="4"
           borderWidth={1}
           borderStyle="dashed"
-          borderColor="$color6"
+          borderColor="color6"
           cursor="default"
         >
-          <Text text="center" select="none" color="$color10">
+          <Text text="center" select="none" color="color10">
             Right Click or Long Press
           </Text>
         </View>
@@ -34,17 +30,17 @@ export function ContextMenuDemo() {
 
       <ContextMenu.Portal zIndex={100}>
         <ContextMenu.Content
-          p="$1.5"
+          p="1-5"
           minW={180}
           borderWidth={1}
-          borderColor="$borderColor"
+          borderColor="border-color"
           transformOrigin="left top"
-          enterStyle={{ scale: 0.9, opacity: 0, y: -5 }}
-          exitStyle={{ scale: 0.95, opacity: 0, y: -3 }}
-          elevation="$3"
+          scale="enter:0.9 exit:0.95"
+          opacity="enter:0 exit:0"
+          y="enter:-5px exit:-3px"
           transition="100ms"
         >
-          <ContextMenu.Arrow size="$4" borderWidth={1} borderColor="$borderColor" />
+          <ContextMenu.Arrow size={13} borderWidth={1} borderColor="border-color" />
 
           <ContextMenu.Preview>
             {() => {
@@ -108,20 +104,20 @@ export function ContextMenuDemo() {
               textValue="Actions"
             >
               <ContextMenu.ItemTitle>Actions</ContextMenu.ItemTitle>
-              <ChevronRight size={12} color="$color10" />
+              <ChevronRight size={12} color="color10" />
             </ContextMenu.SubTrigger>
             <ContextMenu.Portal zIndex={200}>
               <ContextMenu.SubContent
-                enterStyle={{ scale: 0.9, opacity: 0, x: -5 }}
-                exitStyle={{ scale: 0.95, opacity: 0, x: -3 }}
+                scale="enter:0.9 exit:0.95"
+                opacity="enter:0 exit:0"
+                x="enter:-5px exit:-3px"
                 transition="100ms"
                 transformOrigin="left top"
-                elevation="$3"
                 minW={160}
-                bg="$background"
-                p="$1.5"
+                bg="background"
+                p="1-5"
                 borderWidth={1}
-                borderColor="$borderColor"
+                borderColor="border-color"
               >
                 <ContextMenu.Label>Note settings</ContextMenu.Label>
                 <ContextMenu.Item
@@ -157,7 +153,7 @@ export function ContextMenuDemo() {
           >
             <ContextMenu.ItemTitle>Mark as read</ContextMenu.ItemTitle>
             <ContextMenu.ItemIndicator>
-              <Check size={12} color="$color10" />
+              <Check size={12} color="color10" />
             </ContextMenu.ItemIndicator>
           </ContextMenu.CheckboxItem>
           <ContextMenu.CheckboxItem
@@ -168,7 +164,7 @@ export function ContextMenuDemo() {
           >
             <ContextMenu.ItemTitle>Enable Native</ContextMenu.ItemTitle>
             <ContextMenu.ItemIndicator>
-              <Check size={12} color="$color10" />
+              <Check size={12} color="color10" />
             </ContextMenu.ItemIndicator>
           </ContextMenu.CheckboxItem>
         </ContextMenu.Content>

package/src/DialogDemo.tsx

@@ -24,11 +24,11 @@ export function DialogDemo() {
   const [mode, setMode] = useState<DialogMode>('plain')
 
   return (
-    <View gap="$4" justify="center" items="center">
+    <View gap="4" justify="center" items="center">
       <XGroup>
         <XGroup.Item>
           <Button
-            size="$3"
+            size="3"
             theme={mode === 'plain' ? 'accent' : undefined}
             onPress={() => setMode('plain')}
           >
@@ -37,7 +37,7 @@ export function DialogDemo() {
         </XGroup.Item>
         <XGroup.Item>
           <Button
-            size="$3"
+            size="3"
             theme={mode === 'adapt' ? 'accent' : undefined}
             onPress={() => setMode('adapt')}
           >
@@ -46,7 +46,7 @@ export function DialogDemo() {
         </XGroup.Item>
         <XGroup.Item>
           <Button
-            size="$3"
+            size="3"
             theme={mode === 'keepMounted' ? 'accent' : undefined}
             onPress={() => setMode('keepMounted')}
           >
@@ -77,7 +77,7 @@ function DialogInstance({ mode }: { mode: DialogMode }) {
       </Dialog.Trigger>
 
       {mode === 'adapt' && (
-        <Adapt when="maxMd" platform="touch">
+        <Adapt when="max-md" platform="touch">
           <Sheet
             transition="medium"
             zIndex={200000}
@@ -85,15 +85,14 @@ function DialogInstance({ mode }: { mode: DialogMode }) {
             dismissOnSnapToBottom
             unmountChildrenWhenHidden
           >
-            <Sheet.Frame p="$4" gap="$4">
+            <Sheet.Container p="4" gap="4">
+              <Sheet.Background />
               <Adapt.Contents />
-            </Sheet.Frame>
+            </Sheet.Container>
             <Sheet.Overlay
-              bg="$background"
-              opacity={0.5}
+              bg="background"
+              opacity="0.5 enter:0 exit:0"
               transition="lazy"
-              enterStyle={{ opacity: 0 }}
-              exitStyle={{ opacity: 0 }}
             />
           </Sheet>
         </Adapt>
@@ -101,48 +100,34 @@ function DialogInstance({ mode }: { mode: DialogMode }) {
 
       <Dialog.Portal>
         <Dialog.Overlay
-          bg="$background"
-          opacity={0.5}
+          bg="background"
+          opacity="0.5 enter:0 exit:0"
+          transition={['quicker', { opacity: { overshootClamping: true } }]}
           animateOnly={['transform', 'opacity']}
-          transition={[
-            'quicker',
-            {
-              opacity: {
-                overshootClamping: true,
-              },
-            },
-          ]}
-          enterStyle={{ opacity: 0 }}
-          exitStyle={{ opacity: 0 }}
         />
 
         <Dialog.FocusScope focusOnIdle>
           <Dialog.Content
-            transition={[
-              'quicker',
-              {
-                opacity: {
-                  overshootClamping: true,
-                },
-              },
-            ]}
-            enterStyle={{ x: 0, y: 20, opacity: 0 }}
-            exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
-            gap="$4"
+            transition={['quicker', { opacity: { overshootClamping: true } }]}
+            x="enter:0 exit:0"
+            y="enter:20px exit:10px"
+            opacity="enter:0 exit:0"
+            scale="exit:0.95"
+            gap="4"
           >
             <Dialog.Title>Edit profile</Dialog.Title>
             <Dialog.Description>
               Make changes to your profile here. Click save when you're done.
             </Dialog.Description>
 
-            <Fieldset gap="$4" horizontal>
+            <Fieldset gap="4" horizontal>
               <Label width={64} htmlFor="name">
                 Name
               </Label>
               <Input flex={1} id="name" defaultValue="Nate Wienert" />
             </Fieldset>
 
-            <Fieldset gap="$4" horizontal>
+            <Fieldset gap="4" horizontal>
               <Label width={64} htmlFor="username">
                 <TooltipSimple label="Pick your favorite" placement="bottom-start">
                   <Paragraph>Food</Paragraph>
@@ -151,15 +136,18 @@ function DialogInstance({ mode }: { mode: DialogMode }) {
               <XStack flex={1}>
                 <SelectDemoContents
                   trigger={
-                    <Select.Trigger flex={1} iconAfter={ChevronDown} borderRadius="$4">
+                    <Select.Trigger flex={1} borderRadius="4">
                       <Select.Value placeholder="Something" />
+                      <Select.Icon>
+                        <ChevronDown />
+                      </Select.Icon>
                     </Select.Trigger>
                   }
                 />
               </XStack>
             </Fieldset>
 
-            <XStack self="flex-end" gap="$4">
+            <XStack self="flex-end" gap="4">
               <Dialog.Close displayWhenAdapted asChild>
                 <Button theme="accent" aria-label="Close">
                   Save changes
@@ -169,7 +157,7 @@ function DialogInstance({ mode }: { mode: DialogMode }) {
 
             <Unspaced>
               <Dialog.Close asChild>
-                <Button position="absolute" r="$3" size="$2" circular icon={X} />
+                <Button position="absolute" r="3" size="2" circular icon={X} />
               </Dialog.Close>
             </Unspaced>
           </Dialog.Content>

package/src/FieldDemo.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react'
+import {
+  Button,
+  Field,
+  FieldStyledContext,
+  Form,
+  Input,
+  Paragraph,
+  styled,
+  YStack,
+} from 'tamagui'
+
+const DemoField = styled(Field, {
+  gap: '2',
+})
+
+const DemoLabel = styled(Field.Label, {
+  color: 'color11',
+  fontWeight: '500',
+})
+
+const DemoDescription = styled(Field.Description, {
+  color: 'color9',
+  fontSize: '2',
+})
+
+const DemoError = styled(Field.Error, {
+  color: 'red10',
+  fontSize: '2',
+})
+
+const DemoInput = styled(Input, {
+  context: FieldStyledContext,
+
+  variants: {
+    valid: {
+      true: {},
+    },
+    invalid: {
+      true: {
+        borderColor: 'red9',
+      },
+    },
+    touched: {
+      true: {},
+    },
+    dirty: {
+      true: {},
+    },
+    filled: {
+      true: {},
+    },
+    focused: {
+      true: {},
+    },
+  } as const,
+})
+
+export function FieldInput(props: React.ComponentProps<typeof DemoInput>) {
+  const field = Field.useFieldControl()
+  const controlRef = React.useRef<any>(null)
+  const valueRef = React.useRef(props.value ?? props.defaultValue ?? '')
+
+  React.useEffect(() => {
+    return field.registerControl({
+      id: field.ariaProps.id,
+      controlRef,
+      inputRef: controlRef,
+      getValue: () => valueRef.current,
+      required: props.required,
+      disabled: props.disabled,
+    })
+  }, [field.ariaProps.id, field.registerControl, props.disabled, props.required])
+
+  return (
+    <DemoInput
+      {...props}
+      {...field.ariaProps}
+      {...field.dataProps}
+      ref={controlRef}
+      name={field.name}
+      disabled={field.disabled || props.disabled}
+      onFocus={(event) => {
+        field.onFocus()
+        props.onFocus?.(event)
+      }}
+      onBlur={(event) => {
+        field.onBlur(valueRef.current)
+        props.onBlur?.(event)
+      }}
+      onChange={(event) => {
+        valueRef.current = event.target.value
+        field.onChange(event.target.value)
+        props.onChange?.(event)
+      }}
+    />
+  )
+}
+
+export function FieldDemo() {
+  const [status, setStatus] = React.useState('Fill out the form')
+
+  return (
+    <Form
+      width={360}
+      maxW="90%"
+      gap="4"
+      p="5"
+      borderWidth={1}
+      borderColor="border-color"
+      rounded="7"
+      bg="color2"
+      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={(values) => {
+        setStatus(`Welcome, ${String(values.name)}`)
+      }}
+    >
+      <DemoField name="name">
+        <DemoLabel>Name</DemoLabel>
+        <FieldInput placeholder="Ada Lovelace" required />
+        <DemoDescription>This is shown on your profile.</DemoDescription>
+        <DemoError />
+      </DemoField>
+
+      <DemoField
+        name="email"
+        validationMode="onBlur"
+        validate={(value) =>
+          String(value).endsWith('@example.com') ? null : 'Use an @example.com address'
+        }
+      >
+        <DemoLabel>Email</DemoLabel>
+        <FieldInput type="email" placeholder="ada@example.com" required />
+        <DemoError />
+      </DemoField>
+
+      <Form.Trigger asChild>
+        <Button
+          self="flex-end"
+          height={40}
+          px="5"
+          rounded="5"
+          bg="color11 hover:color10"
+          color="color1"
+          fontSize="2"
+          fontWeight="500"
+        >
+          Create account
+        </Button>
+      </Form.Trigger>
+
+      <Paragraph color="color9" size="2">
+        {status}
+      </Paragraph>
+    </Form>
+  )
+}