@tamagui/demos 1.0.1-beta.100

package/src/DialogDemo.tsx

@@ -0,0 +1,73 @@
+import { X } from '@tamagui/feather-icons'
+import React from 'react'
+import { Button, Dialog, Fieldset, Input, Label, Unspaced, YStack } from 'tamagui'
+
+export function DialogDemo() {
+  return (
+    <Dialog modal>
+      <Dialog.Trigger asChild>
+        <Button>Edit Profile</Button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          key="overlay"
+          animation="quick"
+          o={0.5}
+          enterStyle={{ o: 0 }}
+          exitStyle={{ o: 0 }}
+        />
+        <Dialog.Content
+          bordered
+          elevate
+          key="content"
+          space
+          animation={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          x={0}
+          scale={1}
+          opacity={1}
+          y={0}
+        >
+          <Dialog.Title>Edit profile</Dialog.Title>
+          <Dialog.Description>
+            Make changes to your profile here. Click save when you're done.
+          </Dialog.Description>
+          <Fieldset space="$4" horizontal>
+            <Label w={160} justifyContent="flex-end" htmlFor="name">
+              Name
+            </Label>
+            <Input f={1} id="name" defaultValue="Nate Wienert" />
+          </Fieldset>
+          <Fieldset space="$4" horizontal>
+            <Label w={160} justifyContent="flex-end" htmlFor="username">
+              Username
+            </Label>
+            <Input f={1} id="username" defaultValue="@natebirdman" />
+          </Fieldset>
+
+          <YStack ai="flex-end" mt="$2">
+            <Dialog.Close asChild>
+              <Button theme="alt1" aria-label="Close">
+                Save changes
+              </Button>
+            </Dialog.Close>
+          </YStack>
+
+          <Unspaced>
+            <Dialog.Close asChild>
+              <Button pos="absolute" t="$4" r="$4" circular icon={X} />
+            </Dialog.Close>
+          </Unspaced>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

package/src/DrawerDemo.tsx

@@ -0,0 +1,34 @@
+import { Drawer } from '@tamagui/drawer'
+import { ChevronDown, ChevronUp } from '@tamagui/feather-icons'
+import React from 'react'
+import { useState } from 'react'
+import { Button, Paragraph, YStack } from 'tamagui'
+
+export function DrawerDemo() {
+  const [show, setShow] = useState(false)
+  return (
+    <YStack minWidth={230} w="100%" h="100%" ai="center" jc="center" position="relative">
+      <Drawer.Provider>
+        <Button
+          size="$6"
+          icon={show ? ChevronDown : ChevronUp}
+          circular
+          onPress={() => setShow((x) => !x)}
+          elevation="$2"
+        />
+        <Drawer open={show} onChangeOpen={setShow}>
+          <Drawer.Frame h={200} ai="center" jc="center" p="$6" space>
+            <Paragraph selectable={false}>Hello.</Paragraph>
+            <Button
+              size="$6"
+              icon={show ? ChevronDown : ChevronUp}
+              circular
+              onPress={() => setShow((x) => !x)}
+              elevation="$2"
+            />
+          </Drawer.Frame>
+        </Drawer>
+      </Drawer.Provider>
+    </YStack>
+  )
+}

package/src/FeatherIconsDemo.tsx

@@ -0,0 +1,45 @@
+import * as FeatherIcons from '@tamagui/feather-icons'
+import React from 'react'
+import { useMemo, useState } from 'react'
+import { ScrollView } from 'react-native'
+import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'
+
+const featherIcons = Object.keys(FeatherIcons).map((name) => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: FeatherIcons[name],
+}))
+
+export function FeatherIconsDemo() {
+  const [searchRaw, setSearch] = useState('')
+  const search = useDebounceValue(searchRaw, 400)
+
+  const size = 100
+
+  const iconsMemo = useMemo(() => {
+    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))
+    return icons.map(({ Icon, name }) => {
+      return (
+        <YStack h={size} ai="center" jc="center" key={name}>
+          <Icon size={size * 0.25} />
+          <Spacer />
+          <Paragraph size="$2" o={0.5}>
+            {name}
+          </Paragraph>
+        </YStack>
+      )
+    })
+  }, [search])
+
+  return (
+    <YStack als="stretch" p="$4" pb="$0" space>
+      <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
+
+      <YStack h={420}>
+        <ScrollView>
+          <Grid itemMinWidth={size}>{iconsMemo}</Grid>
+        </ScrollView>
+      </YStack>
+    </YStack>
+  )
+}

package/src/FormsDemo.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'
+
+export function FormsDemo() {
+  return (
+    <YStack w={200} mih={250} overflow="hidden" space="$2" m="$3" p="$2">
+      <FormDemo size="$2" />
+      <FormDemo size="$3" />
+      <FormDemo size="$4" />
+      <TextArea numberOfLines={4} />
+    </YStack>
+  )
+}
+
+function FormDemo(props: { size: SizeTokens }) {
+  return (
+    <XStack ai="center" space="$2">
+      <Input f={1} w="0%" size={props.size} placeholder={`Size ${props.size}...`} />
+      <Button size={props.size}>Go</Button>
+    </XStack>
+  )
+}

package/src/GroupDemo.tsx

@@ -0,0 +1,26 @@
+import { Activity, Airplay } from '@tamagui/feather-icons'
+import React from 'react'
+import { Button, Group, ListItem, Separator, YStack } from 'tamagui'
+
+export function GroupDemo() {
+  return (
+    <YStack p="$3" space="$2" ai="center">
+      <Group size="$3">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </Group>
+
+      <Group size="$5">
+        <Button icon={Activity}>First</Button>
+        <Button icon={Airplay}>Second</Button>
+      </Group>
+
+      <Group size="$3" vertical separator={<Separator />}>
+        <ListItem>First</ListItem>
+        <ListItem>Second</ListItem>
+        <ListItem>Third</ListItem>
+      </Group>
+    </YStack>
+  )
+}

package/src/HeadingsDemo.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'
+
+export function HeadingsDemo() {
+  return (
+    <YStack als="center">
+      <H1>Heading 1</H1>
+      <H2>Heading 2</H2>
+      <H3>Heading 3</H3>
+      <H4>Heading 4</H4>
+      <H5>Heading 5</H5>
+      <H6>Heading 6</H6>
+    </YStack>
+  )
+}

package/src/ImageDemo.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Image } from 'tamagui'
+
+export function ImageDemo() {
+  return <Image src="http://placekitten.com/200/300" width={200} height={300} />
+}

package/src/LabelDemo.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Input, Label, XStack } from 'tamagui'
+
+export function LabelDemo() {
+  return (
+    <XStack miw={300} p="$3" space="$4">
+      <Label htmlFor="name">Name</Label>
+      <Input f={1} id="name" defaultValue="Nate Wienert" />
+    </XStack>
+  )
+}

package/src/LinearGradientDemo.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { LinearGradient } from 'tamagui'
+
+export function LinearGradientDemo() {
+  return (
+    <LinearGradient
+      als="center"
+      width={100}
+      height={100}
+      colors={['$red10', '$yellow10']}
+      start={[0, 1]}
+      br="$4"
+      end={[0, 0]}
+    />
+  )
+}

package/src/ListItemDemo.tsx

@@ -0,0 +1,40 @@
+import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/feather-icons'
+import React from 'react'
+import { Group, ListItem, Separator, XStack } from 'tamagui'
+
+export function ListItemDemo() {
+  return (
+    <XStack $sm={{ flexDirection: 'column' }} px="$4" space>
+      <ListItemDemo1 />
+      <ListItemDemo2 />
+    </XStack>
+  )
+}
+
+function ListItemDemo1() {
+  return (
+    <Group als="center" bordered w={240} size="$4" vertical>
+      <ListItem hoverTheme icon={Star}>
+        Star
+      </ListItem>
+      <ListItem hoverTheme icon={Moon}>
+        Moon
+      </ListItem>
+      <ListItem hoverTheme icon={Sun}>
+        Sun
+      </ListItem>
+      <ListItem hoverTheme icon={Cloud}>
+        Cloud
+      </ListItem>
+    </Group>
+  )
+}
+
+function ListItemDemo2() {
+  return (
+    <Group als="center" bordered w={240} size="$6" vertical separator={<Separator />}>
+      <ListItem hoverTheme title="Star" subTitle="Subtitle" icon={Star} iconAfter={ChevronRight} />
+      <ListItem hoverTheme title="Moon" subTitle="Subtitle" icon={Moon} iconAfter={ChevronRight} />
+    </Group>
+  )
+}

package/src/MenuDemo.tsx

@@ -0,0 +1,33 @@
+import { Menu as MenuIcon } from '@tamagui/feather-icons'
+import { Menu } from '@tamagui/menu'
+import React, { useState } from 'react'
+import { Button, H4, Paragraph, YStack } from 'tamagui'
+
+export function MenuDemo() {
+  const [show, setShow] = useState(false)
+
+  return (
+    <Menu.Provider>
+      <Menu
+        open={show}
+        onChangeOpen={setShow}
+        trigger={
+          <Button
+            size="$6"
+            icon={MenuIcon}
+            theme={show ? 'active' : null}
+            circular
+            onPress={() => setShow((x) => !x)}
+          />
+        }
+      >
+        <Menu.Item>
+          <YStack p="$2">
+            <H4>Menu contents</H4>
+            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>
+          </YStack>
+        </Menu.Item>
+      </Menu>
+    </Menu.Provider>
+  )
+}

package/src/PopoverDemo.tsx

@@ -0,0 +1,41 @@
+import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'
+import React from 'react'
+import { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'
+
+export function PopoverDemo() {
+  return (
+    <XStack space="$2">
+      <Demo placement="left" Icon={ChevronLeft} />
+      <Demo placement="bottom" Icon={ChevronDown} />
+      <Demo placement="right" Icon={ChevronRight} />
+    </XStack>
+  )
+}
+
+export function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {
+  return (
+    <Popover size="$5" {...props}>
+      <Popover.Trigger>
+        <Button icon={Icon} />
+      </Popover.Trigger>
+      <Popover.Content
+        enterStyle={{ x: 0, y: -10, o: 0 }}
+        exitStyle={{ x: 0, y: -10, o: 0 }}
+        x={0}
+        y={0}
+        o={1}
+        animation="bouncy"
+        elevate
+      >
+        <Popover.Arrow />
+
+        <XStack space="$3">
+          <Label size="$3" htmlFor="name">
+            Name
+          </Label>
+          <Input size="$3" id="name" />
+        </XStack>
+      </Popover.Content>
+    </Popover>
+  )
+}

package/src/ProgressDemo.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useEffect, useState } from 'react'
+import { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'
+
+export function ProgressDemo() {
+  const [size, setSize] = useState(4)
+  const [progress, setProgress] = useState(20)
+  const sizeProp = `$${size}` as SizeTokens
+
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(60), 1000)
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
+  return (
+    <>
+      <YStack h={60} ai="center" space>
+        <Paragraph h={30} o={0.5}>
+          Size: {size}
+        </Paragraph>
+        <Progress size={sizeProp} value={progress}>
+          <Progress.Indicator animation="bouncy" />
+        </Progress>
+      </YStack>
+
+      <XStack ai="center" space pos="absolute" b={10} l={20} $sm={{ disp: 'none' }}>
+        <Slider
+          size="$2"
+          w={130}
+          defaultValue={[4]}
+          min={2}
+          max={6}
+          step={1}
+          onValueChange={([val]) => {
+            setSize(val)
+          }}
+        >
+          <Slider.Track>
+            <Slider.TrackActive />
+          </Slider.Track>
+          <Slider.Thumb circular index={0} />
+        </Slider>
+
+        <Button size="$2" onPress={() => setProgress((prev) => (prev + 20) % 100)}>
+          Load
+        </Button>
+      </XStack>
+    </>
+  )
+}

package/src/SelectDemo.tsx

@@ -0,0 +1,77 @@
+import { ChevronDown, ChevronUp } from '@tamagui/feather-icons'
+import React from 'react'
+import { LinearGradient, Select, Text, YStack } from 'tamagui'
+
+export function SelectDemo() {
+  return (
+    <Select defaultValue="apple">
+      <Select.Trigger w={200} iconAfter={ChevronDown}>
+        <Select.Value placeholder="Something" />
+      </Select.Trigger>
+
+      <Select.Content>
+        <Select.ScrollUpButton ai="center" jc="center" pos="relative" w="100%" h="$3">
+          <YStack zi={10}>
+            <ChevronUp size={20} />
+          </YStack>
+          <LinearGradient
+            start={[0, 0]}
+            end={[0, 1]}
+            fullscreen
+            colors={['$background', '$backgroundTransparent']}
+          />
+        </Select.ScrollUpButton>
+
+        <Select.Viewport minWidth={200}>
+          <Select.Group>
+            <Select.Label>Fruits</Select.Label>
+            {items.map((item, i) => {
+              return (
+                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>
+                  <Select.ItemText>{item.name}</Select.ItemText>
+                </Select.Item>
+              )
+            })}
+          </Select.Group>
+        </Select.Viewport>
+
+        <Select.ScrollDownButton ai="center" jc="center" pos="relative" w="100%" h="$3">
+          <YStack zi={10}>
+            <ChevronDown size={20} />
+          </YStack>
+          <LinearGradient
+            start={[0, 0]}
+            end={[0, 1]}
+            fullscreen
+            colors={['$backgroundTransparent', '$background']}
+          />
+        </Select.ScrollDownButton>
+      </Select.Content>
+    </Select>
+  )
+}
+
+const items = [
+  { name: 'Apple' },
+  { name: 'Pear' },
+  { name: 'Blackberry' },
+  { name: 'Peach' },
+  { name: 'Apricot' },
+  { name: 'Melon' },
+  { name: 'Honeydew' },
+  { name: 'Starfruit' },
+  { name: 'Blueberry' },
+  { name: 'Rasberry' },
+  { name: 'Strawberry' },
+  { name: 'Mango' },
+  { name: 'Pineapple' },
+  { name: 'Lime' },
+  { name: 'Lemon' },
+  { name: 'Coconut' },
+  { name: 'Guava' },
+  { name: 'Papaya' },
+  { name: 'Orange' },
+  { name: 'Grape' },
+  { name: 'Jackfruit' },
+  { name: 'Durian' },
+]

package/src/SeparatorDemo.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+
+export function SeparatorDemo() {
+  return (
+    <YStack w="100%" maw={300} mx={15}>
+      <Paragraph fontWeight="800">Tamagui</Paragraph>
+      <Paragraph>A cross-platform component library.</Paragraph>
+      <Separator my={15} />
+      <XStack h={20} ai="center">
+        <Paragraph>Blog</Paragraph>
+        <Separator als="stretch" vertical mx={15} />
+        <Paragraph>Docs</Paragraph>
+        <Separator als="stretch" vertical mx={15} />
+        <Paragraph>Source</Paragraph>
+      </XStack>
+    </YStack>
+  )
+}

package/src/ShapesDemo.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Circle, Square, XStack } from 'tamagui'
+
+export function ShapesDemo() {
+  return (
+    <XStack p="$2" space="$4">
+      <Square size={100} bc="$color" elevation="$4" />
+      <Circle size={100} bc="$color" elevation="$4" />
+    </XStack>
+  )
+}

package/src/SheetDemo.tsx

@@ -0,0 +1,25 @@
+import { ChevronDown } from '@tamagui/feather-icons'
+import { Drawer } from '@tamagui/sheet'
+import React, { useState } from 'react'
+import { Button } from 'tamagui'
+
+export const SheetDemo = () => {
+  const [position, setPosition] = useState(0)
+
+  return (
+    <Drawer snapPoints={[80, 10]} position={position} onChangePosition={setPosition}>
+      <Drawer.Backdrop />
+      <Drawer.Frame ai="center" jc="center">
+        <Drawer.Handle />
+        <Button
+          size="$6"
+          circular
+          icon={ChevronDown}
+          onPress={() => {
+            setPosition(1)
+          }}
+        />
+      </Drawer.Frame>
+    </Drawer>
+  )
+}

package/src/SliderDemo.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Slider, SliderProps, XStack } from 'tamagui'
+
+export function SliderDemo() {
+  return (
+    <XStack height={200} ai="center" space="$8">
+      <SimpleSlider height={200} orientation="vertical" />
+      <SimpleSlider width={200} />
+    </XStack>
+  )
+}
+
+function SimpleSlider({ children, ...props }: SliderProps) {
+  return (
+    <Slider defaultValue={[50]} max={100} step={1} {...props}>
+      <Slider.Track>
+        <Slider.TrackActive />
+      </Slider.Track>
+      <Slider.Thumb bordered circular elevate index={0} />
+      {children}
+    </Slider>
+  )
+}

package/src/SpinnerDemo.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Spinner, YStack } from 'tamagui'
+
+export function SpinnerDemo() {
+  return (
+    <YStack p="$3" space="$4" ai="center">
+      <Spinner size="small" color="$green10" />
+      <Spinner size="large" color="$orange10" />
+    </YStack>
+  )
+}

package/src/StacksDemo.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { XStack, YStack, ZStack } from 'tamagui'
+
+export function StacksDemo() {
+  return (
+    <XStack maw={250} p="$2" als="center" space>
+      <YStack flex={1} space="$2" bw={2} boc="$color" br="$4" p="$2">
+        <YStack bc="$color" br="$3" p="$2" />
+        <YStack bc="$color" br="$3" p="$2" />
+        <YStack bc="$color" br="$3" p="$2" />
+      </YStack>
+
+      <XStack flex={1} space="$2" bw={2} boc="$color" br="$4" p="$2">
+        <YStack bc="$color" br="$3" p="$2" />
+        <YStack bc="$color" br="$3" p="$2" />
+        <YStack bc="$color" br="$3" p="$2" />
+      </XStack>
+
+      <ZStack maw={50} mah={85} w={100} flex={1}>
+        <YStack fullscreen bw={2} br="$4" p="$2" />
+        <YStack fullscreen y={10} x={10} bw={2} br="$4" p="$2" />
+        <YStack fullscreen y={20} x={20} bw={2} bc="$color" br="$4" p="$2" />
+      </ZStack>
+    </XStack>
+  )
+}

package/src/SwitchDemo.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Label, Separator, SizeTokens, Switch, XStack, YStack } from 'tamagui'
+
+export function SwitchDemo() {
+  return (
+    <YStack w={300} ai="center" space="$3">
+      <SwitchWithLabel size="$2" />
+      <SwitchWithLabel size="$3" />
+      <SwitchWithLabel size="$4" />
+      <SwitchWithLabel size="$5" />
+    </YStack>
+  )
+}
+
+function SwitchWithLabel(props: { size: SizeTokens }) {
+  return (
+    <XStack w={300} ai="center" space="$4">
+      <Label pr="$0" miw={200} jc="flex-end" size={props.size} htmlFor="switch-1">
+        Dark mode
+      </Label>
+      <Separator mih={20} vertical />
+      <Switch id="switch-1" size={props.size}>
+        <Switch.Thumb animation="bouncy" />
+      </Switch>
+    </XStack>
+  )
+}