@tamagui/demos 2.0.0-rc.9 → 2.0.0

package/src/PopoverDemo.tsx

@@ -1,4 +1,9 @@
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+} from '@tamagui/lucide-icons-2'
 import { useState } from 'react'
 import type { PopoverProps } from 'tamagui'
 import {

package/src/ProgressDemo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from 'tamagui'
-import { Play, RotateCcw } from '@tamagui/lucide-icons'
+import { Play, RotateCcw } from '@tamagui/lucide-icons-2'
 
 export function ProgressDemo() {
   const [key, setKey] = React.useState(0)

package/src/SelectDemo.tsx

@@ -1,4 +1,4 @@
-import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
+import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons-2'
 import React from 'react'
 
 import type { FontSizeTokens, SelectProps } from 'tamagui'
@@ -74,7 +74,7 @@ export function SelectDemoContents(
         </Sheet>
       </Adapt>
 
-      <Select.Content zIndex={200000}>
+      <Select.Content>
         <Select.ScrollUpButton
           items="center"
           justify="center"
@@ -101,7 +101,7 @@ export function SelectDemoContents(
           borderColor="$borderColor"
         >
           <Select.Group>
-            <Select.Label>Fruits</Select.Label>
+            <Select.Label fontWeight="700">Fruits</Select.Label>
             {/* for longer lists memoizing these is useful */}
             {React.useMemo(
               () =>

package/src/SheetDemo.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
+import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons-2'
 import type { SheetProps } from '@tamagui/sheet'
 import { Sheet } from '@tamagui/sheet'
 import React, { memo } from 'react'

package/src/TabsAdvancedDemo.tsx

@@ -108,6 +108,7 @@ const TabsAdvancedBackground = () => {
           />
         )}
       </AnimatePresence>
+
       <AnimatePresence>
         {activeAt && (
           <TabsRovingIndicator
@@ -120,6 +121,7 @@ const TabsAdvancedBackground = () => {
           />
         )}
       </AnimatePresence>
+
       <YStack position="relative">
         <Tabs.List
           loop={false}
@@ -129,7 +131,6 @@ const TabsAdvancedBackground = () => {
         >
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab1"
             onInteraction={handleOnInteraction}
@@ -138,7 +139,6 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab2"
             onInteraction={handleOnInteraction}
@@ -147,7 +147,6 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab3"
             onInteraction={handleOnInteraction}
@@ -260,34 +259,37 @@ const TabsAdvancedUnderline = () => {
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab1"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Profile</SizableText>
+            <SizableText select="none" cursor="default">
+              Profile
+            </SizableText>
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab2"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Connections</SizableText>
+            <SizableText select="none" cursor="default">
+              Connections
+            </SizableText>
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab3"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Notifications</SizableText>
+            <SizableText select="none" cursor="default">
+              Notifications
+            </SizableText>
           </Tabs.Tab>
         </Tabs.List>
       </YStack>
 
-      <AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
+      <AnimatePresence mode="wait" custom={{ direction }} initial={false}>
         <AnimatedYStack key={currentTab}>
           <Tabs.Content
             value={currentTab}
@@ -318,7 +320,7 @@ const TabsRovingIndicator = ({ active, ...props }: { active?: boolean } & ViewPr
         opacity: 0,
       }}
       {...(active && {
-        backgroundColor: '$color8',
+        backgroundColor: '$color5',
         opacity: 0.6,
       })}
       {...props}

package/src/ToastDemo.tsx

@@ -1,121 +1,236 @@
-import { Toast, useToastController, useToastState } from '@tamagui/toast'
-import React from 'react'
-import { Button, Label, Switch, XStack, YStack } from 'tamagui'
+import { isWeb } from 'tamagui'
+import {
+  Toast,
+  toast,
+  useToastItem,
+  type ToastPosition,
+  type ToastT,
+} from '@tamagui/toast/v2'
+import {
+  ArrowDown,
+  ArrowDownLeft,
+  ArrowDownRight,
+  ArrowUp,
+  ArrowUpLeft,
+  ArrowUpRight,
+} from '@tamagui/lucide-icons-2'
+import { useRef, useState } from 'react'
+import { Button, Label, SizableText, Slider, XStack, YStack } from 'tamagui'
 
-/**
- *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
- *    - <ToastProvider> at the root
- *    - <ToastViewport /> where you want to show the toasts
- */
 export const ToastDemo = () => {
-  const [native, setNative] = React.useState(false)
+  const [position, setPosition] = useState<ToastPosition>('bottom-right')
+  const [gap, setGap] = useState(14)
+  const [visibleToasts, setVisibleToasts] = useState(4)
+  const [duration, setDuration] = useState(4000)
+  const count = useRef(0)
+
+  const showToast = (newPosition: ToastPosition) => {
+    setPosition(newPosition)
+    count.current++
+    toast(`Toast #${count.current}`, {
+      description: 'Swipe to dismiss or wait for auto-close.',
+    })
+  }
 
   return (
-    <YStack gap="$4" items="center">
-      <ToastControl native={native} />
-      <CurrentToast />
+    <Toast
+      position={position}
+      gap={Math.round(gap)}
+      visibleToasts={visibleToasts}
+      duration={duration}
+    >
+      <Toast.Viewport offset={16}>
+        <Toast.List
+          renderItem={({ toast: t, index }) => (
+            <Toast.Item key={t.id} toast={t} index={index} testID="toast-item">
+              <ToastContent toast={t} />
+            </Toast.Item>
+          )}
+        />
+      </Toast.Viewport>
+
+      <YStack gap="$3" self="center" width={280}>
+        {/* Position buttons */}
+        <YStack gap="$2" self="center">
+          <XStack gap="$2">
+            <PositionButton
+              position="top-left"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUpLeft}
+            />
+            <PositionButton
+              position="top-center"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUp}
+            />
+            <PositionButton
+              position="top-right"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowUpRight}
+              testID="toast-top-right-button"
+            />
+          </XStack>
+          <XStack gap="$2">
+            <PositionButton
+              position="bottom-left"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDownLeft}
+            />
+            <PositionButton
+              position="bottom-center"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDown}
+            />
+            <PositionButton
+              position="bottom-right"
+              current={position}
+              onPress={showToast}
+              Icon={ArrowDownRight}
+              testID="toast-show-button"
+            />
+          </XStack>
+        </YStack>
 
-      <NativeOptions native={native} setNative={setNative} />
-    </YStack>
+        {/* Controls */}
+        <YStack gap="$1" paddingTop="$1">
+          <DemoSlider
+            label="Gap"
+            value={gap}
+            min={0}
+            max={30}
+            step={0.1}
+            onChange={setGap}
+          />
+          <DemoSlider
+            label="Visible"
+            value={visibleToasts}
+            min={1}
+            max={8}
+            step={1}
+            onChange={setVisibleToasts}
+          />
+          <DemoSlider
+            label="Duration"
+            value={duration}
+            min={1000}
+            max={10000}
+            step={100}
+            onChange={setDuration}
+            format={(v) => `${(v / 1000).toFixed(1)}s`}
+          />
+        </YStack>
+      </YStack>
+    </Toast>
   )
 }
 
-const CurrentToast = () => {
-  const currentToast = useToastState()
+function ToastContent({ toast: t }: { toast: ToastT }) {
+  const { handleClose } = useToastItem()
 
-  if (!currentToast || currentToast.isHandledNatively) return null
+  const title = typeof t.title === 'function' ? t.title() : t.title
+  const description =
+    typeof t.description === 'function' ? t.description() : t.description
 
   return (
-    <Toast
-      key={currentToast.id}
-      duration={currentToast.duration}
-      viewportName={currentToast.viewportName}
-      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
-      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
-      opacity={1}
-      scale={1}
-      y={-50}
-      transition="quicker"
-      bg="$color2"
-      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
-    >
-      <XStack gap="$5" items="center" justify="space-between">
-        <YStack gap="$0.5" flex={1}>
-          <Toast.Title>{currentToast.title}</Toast.Title>
-          {!!currentToast.message && (
-            <Toast.Description>{currentToast.message}</Toast.Description>
+    <>
+      <XStack gap="$3" alignItems="flex-start">
+        <Toast.Icon />
+        <YStack flex={1} gap="$0.5">
+          {title && (
+            <Toast.Title fontWeight="600" size="$3">
+              {title}
+            </Toast.Title>
+          )}
+          {description && (
+            <Toast.Description color="$color9" size="$2">
+              {description}
+            </Toast.Description>
           )}
         </YStack>
-        <Toast.Action asChild altText="Dismiss toast">
-          <Button size="$2">Dismiss</Button>
-        </Toast.Action>
       </XStack>
-    </Toast>
+
+      {isWeb && (
+        <Toast.Close
+          testID="toast-close-button"
+          position="absolute"
+          top={-6}
+          left={-6}
+          zIndex={1}
+        />
+      )}
+    </>
   )
 }
 
-const ToastControl = ({ native }: { native: boolean }) => {
-  const toast = useToastController()
-
+function DemoSlider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  format,
+}: {
+  label: string
+  value: number
+  min: number
+  max: number
+  step?: number
+  onChange: (v: number) => void
+  format?: (v: number) => string
+}) {
   return (
-    <XStack gap="$2" justify="center">
-      <Button
-        onPress={() => {
-          toast.show('Successfully saved!', {
-            message: "Don't worry, we've got your data.",
-            native,
-            demo: true,
-          })
-        }}
-      >
-        Show
-      </Button>
-      <Button
-        onPress={() => {
-          toast.hide()
-        }}
+    <XStack gap="$2" alignItems="center">
+      <Label size="$2" width={55}>
+        {label}
+      </Label>
+      <Slider
+        flex={1}
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={([v]) => onChange(v)}
       >
-        Hide
-      </Button>
+        <Slider.Track>
+          <Slider.TrackActive />
+        </Slider.Track>
+        <Slider.Thumb theme="accent" size={16} borderRadius={100} index={0} />
+      </Slider>
+      <SizableText userSelect="none" size="$2" width={35} textAlign="right">
+        {format ? format(value) : Math.round(value)}
+      </SizableText>
     </XStack>
   )
 }
 
-const NativeOptions = ({
-  native,
-  setNative,
+const PositionButton = ({
+  position,
+  current,
+  onPress,
+  Icon,
+  testID,
 }: {
-  native: boolean
-  setNative: (native: boolean) => void
+  position: ToastPosition
+  current: ToastPosition
+  onPress: (p: ToastPosition) => void
+  Icon: any
+  testID?: string
 }) => {
-  return (
-    <XStack gap="$3">
-      <Label size="$1" onPress={() => setNative(false)}>
-        Custom
-      </Label>
-      <Switch
-        theme="surface2"
-        id="native-toggle"
-        size="$1"
-        checked={!!native}
-        onCheckedChange={(val) => setNative(val)}
-      >
-        <Switch.Thumb
-          theme="accent"
-          transition={[
-            'quickest',
-            {
-              transform: {
-                overshootClamping: true,
-              },
-            },
-          ]}
-        />
-      </Switch>
+  const isActive = position === current
 
-      <Label size="$1" onPress={() => setNative(true)}>
-        Native
-      </Label>
-    </XStack>
+  return (
+    <Button
+      icon={Icon}
+      circular
+      theme={isActive ? 'accent' : undefined}
+      onPress={() => onPress(position)}
+      testID={testID}
+    />
   )
 }

package/src/ToastDuplicateDemo.tsx

@@ -1,47 +1,57 @@
-import { CheckCircle2 } from '@tamagui/lucide-icons'
-import { Toast } from '@tamagui/toast'
-import React from 'react'
+import { CheckCircle2 } from '@tamagui/lucide-icons-2'
+import { Toast, toast, useToasts } from '@tamagui/toast/v2'
 import { Button, XStack, YStack } from 'tamagui'
 
 /**
- *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the ToastProvider and ToastViewport as well.
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the Toast wrapper as well.
  */
 export const ToastDuplicateDemo = () => {
-  const [savedCount, setSavedCount] = React.useState(0)
-
   return (
-    <YStack items="center">
-      <Button
-        onPress={() => {
-          setSavedCount((old) => old + 1)
-        }}
-      >
-        Show toast
-      </Button>
-      {[...Array(savedCount)].map((_, index) => (
-        <Toast
-          viewportName="viewport-multiple" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop
-          key={index}
-          duration={4000}
-          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
-          exitStyle={{ opacity: 0, scale: 1, y: -20 }}
-          y={0}
-          opacity={1}
-          scale={1}
-          transition="100ms"
+    <Toast>
+      <Toast.Viewport>
+        <ToastList />
+      </Toast.Viewport>
+
+      <YStack items="center">
+        <Button
+          onPress={() => {
+            toast('Successfully saved!', {
+              description: "Don't worry... We've got your data.",
+            })
+          }}
         >
+          Show toast
+        </Button>
+      </YStack>
+    </Toast>
+  )
+}
+
+const ToastList = () => {
+  const { toasts } = useToasts()
+
+  return (
+    <>
+      {toasts.map((t, index) => (
+        <Toast.Item key={t.id} toast={t} index={index}>
           <XStack gap="$4" items="center">
             <YStack>
               <CheckCircle2 />
             </YStack>
 
             <YStack>
-              <Toast.Title>Successfully saved!</Toast.Title>
-              <Toast.Description>Don't worry... We've got your data.</Toast.Description>
+              <Toast.Title>
+                {typeof t.title === 'function' ? t.title() : t.title}
+              </Toast.Title>
+              {t.description && (
+                <Toast.Description>
+                  {typeof t.description === 'function' ? t.description() : t.description}
+                </Toast.Description>
+              )}
             </YStack>
           </XStack>
-        </Toast>
+        </Toast.Item>
       ))}
-    </YStack>
+    </>
   )
 }

package/src/ToastV1Demo.tsx

@@ -0,0 +1,121 @@
+import { Toast, useToastController, useToastState } from '@tamagui/toast'
+import React from 'react'
+import { Button, Label, Switch, XStack, YStack } from 'tamagui'
+
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
+ *    - <ToastProvider> at the root
+ *    - <ToastViewport /> where you want to show the toasts
+ */
+export const ToastV1Demo = () => {
+  const [native, setNative] = React.useState(false)
+
+  return (
+    <YStack gap="$4" items="center">
+      <ToastControl native={native} />
+      <CurrentToast />
+
+      <NativeOptions native={native} setNative={setNative} />
+    </YStack>
+  )
+}
+
+const CurrentToast = () => {
+  const currentToast = useToastState()
+
+  if (!currentToast || currentToast.isHandledNatively) return null
+
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      exitStyle={{ opacity: 0, scale: 0.95, y: -80 }}
+      opacity={1}
+      scale={1}
+      y={-50}
+      transition="quicker"
+      bg="$color2"
+      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
+    >
+      <XStack gap="$5" items="center" justify="space-between">
+        <YStack gap="$0.5" flex={1}>
+          <Toast.Title>{currentToast.title}</Toast.Title>
+          {!!currentToast.message && (
+            <Toast.Description>{currentToast.message}</Toast.Description>
+          )}
+        </YStack>
+        <Toast.Action asChild altText="Dismiss toast">
+          <Button size="$2">Dismiss</Button>
+        </Toast.Action>
+      </XStack>
+    </Toast>
+  )
+}
+
+const ToastControl = ({ native }: { native: boolean }) => {
+  const toast = useToastController()
+
+  return (
+    <XStack gap="$2" justify="center">
+      <Button
+        onPress={() => {
+          toast.show('Successfully saved!', {
+            message: "Don't worry, we've got your data.",
+            native,
+            demo: true,
+          })
+        }}
+      >
+        Show
+      </Button>
+      <Button
+        onPress={() => {
+          toast.hide()
+        }}
+      >
+        Hide
+      </Button>
+    </XStack>
+  )
+}
+
+const NativeOptions = ({
+  native,
+  setNative,
+}: {
+  native: boolean
+  setNative: (native: boolean) => void
+}) => {
+  return (
+    <XStack gap="$3">
+      <Label size="$1" onPress={() => setNative(false)}>
+        Custom
+      </Label>
+      <Switch
+        theme="surface2"
+        id="native-toggle"
+        size="$1"
+        checked={!!native}
+        onCheckedChange={(val) => setNative(val)}
+      >
+        <Switch.Thumb
+          theme="accent"
+          transition={[
+            'quickest',
+            {
+              transform: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+        />
+      </Switch>
+
+      <Label size="$1" onPress={() => setNative(true)}>
+        Native
+      </Label>
+    </XStack>
+  )
+}

package/src/ToggleGroupDemo.tsx

@@ -1,4 +1,4 @@
-import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'
+import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons-2'
 import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from 'tamagui'
 
 export function ToggleGroupDemo() {