@tamagui/demos 2.7.7 → 3.0.0-beta.1093.1

package/src/ThemeBuilderDemo.tsx

@@ -3,25 +3,25 @@ import { Square, XStack, YStack } from 'tamagui'
 
 export function ThemeBuilderDemo() {
   return (
-    <YStack fullscreen overflow="hidden">
+    <YStack position="absolute" inset={0} overflow="hidden">
       <XStack maxH={200} y={-100} x={-50} rotate="-10deg">
-        <Col y={35} bg="$color9" />
-        <Col size="$8" y={30} bg="$color7" />
-        <Col size="$6" y={-50} bg="$color5" />
-        <Col size="$4" bg="$color3" />
-        <Col size="$2" bg="$color1" />
-        <Col size="$4" y={50} bg="$color3" />
-        <Col size="$6" y={80} bg="$color5" />
-        <Col size="$8" bg="$color7" />
-        <Col bg="$color9" />
-        <Col size="$8" bg="$color7" />
-        <Col size="$6" y={80} bg="$color5" />
-        <Col size="$4" y={50} bg="$color3" />
-        <Col size="$2" bg="$color1" />
-        <Col size="$4" bg="$color3" />
-        <Col size="$6" y={-50} bg="$color5" />
-        <Col size="$8" y={30} bg="$color7" />
-        <Col y={35} bg="$color9" />
+        <Col y={35} bg="color9" />
+        <Col size="8" y={30} bg="color7" />
+        <Col size="6" y={-50} bg="color5" />
+        <Col size="4" bg="color3" />
+        <Col size="2" bg="color1" />
+        <Col size="4" y={50} bg="color3" />
+        <Col size="6" y={80} bg="color5" />
+        <Col size="8" bg="color7" />
+        <Col bg="color9" />
+        <Col size="8" bg="color7" />
+        <Col size="6" y={80} bg="color5" />
+        <Col size="4" y={50} bg="color3" />
+        <Col size="2" bg="color1" />
+        <Col size="4" bg="color3" />
+        <Col size="6" y={-50} bg="color5" />
+        <Col size="8" y={30} bg="color7" />
+        <Col y={35} bg="color9" />
       </XStack>
     </YStack>
   )
@@ -32,92 +32,93 @@ function Col(
     subTheme?: any
   }
 ) {
-  const subTheme = props.subTheme ? `_${props.subTheme}` : ''
+  const { subTheme: subThemeName, ...squareProps } = props
+  const subTheme = subThemeName ? `_${subThemeName}` : ''
   return (
-    <YStack p="$2.5" gap="$3.5">
+    <YStack p="2-5" gap="3-5">
       <Square
-        rounded="$6"
-        size="$10"
-        theme={props.subTheme}
-        bg="$background"
-        {...props}
+        rounded="6"
+        size="10"
+        theme={subThemeName}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('orange' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('yellow' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('green' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('blue' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('purple' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('pink' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('red' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
-        theme={props.subTheme}
-        bg="$background"
-        {...props}
+        rounded="6"
+        size="10"
+        theme={subThemeName}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('orange' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('yellow' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
       <Square
-        rounded="$6"
-        size="$10"
+        rounded="6"
+        size="10"
         theme={('green' + subTheme) as ThemeName}
-        bg="$background"
-        {...props}
+        bg="background"
+        {...squareProps}
       />
     </YStack>
   )

package/src/ThemeInverseDemo.tsx

@@ -2,34 +2,34 @@ import { Button, H5, Theme, XStack, YStack } from 'tamagui'
 
 export function ThemeInverseDemo() {
   return (
-    <XStack gap="$4" flexWrap="wrap">
-      <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+    <XStack gap="4" flexWrap="wrap">
+      <YStack elevation="4" bg="background" p="4" rounded="4" gap="3">
         <H5>Base Theme</H5>
         <Button>Normal</Button>
-        <Button theme="accent">Accent</Button>
+        <Button theme="inverse">Inverse</Button>
       </YStack>
 
       <Theme name="red">
-        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+        <YStack elevation="4" bg="background" p="4" rounded="4" gap="3">
           <H5>Red Theme</H5>
           <Button>Normal</Button>
-          <Button theme="accent">Accent</Button>
+          <Button theme="inverse">Inverse</Button>
         </YStack>
       </Theme>
 
       <Theme name="blue">
-        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+        <YStack elevation="4" bg="background" p="4" rounded="4" gap="3">
           <H5>Blue Theme</H5>
           <Button>Normal</Button>
-          <Button theme="accent">Accent</Button>
+          <Button theme="inverse">Inverse</Button>
         </YStack>
       </Theme>
 
       <Theme name="green">
-        <YStack elevation="$4" bg="$background" p="$4" rounded="$4" gap="$3">
+        <YStack elevation="4" bg="background" p="4" rounded="4" gap="3">
           <H5>Green Theme</H5>
           <Button>Normal</Button>
-          <Button theme="accent">Accent</Button>
+          <Button theme="inverse">Inverse</Button>
         </YStack>
       </Theme>
     </XStack>

package/src/ToastDemo.tsx

@@ -1,11 +1,4 @@
-import { isWeb } from 'tamagui'
-import {
-  Toast,
-  toast,
-  useToastItem,
-  type ToastPosition,
-  type ToastT,
-} from '@tamagui/toast/v2'
+import { toast, useToastItem, type ToastPosition, type ToastT } from '@tamagui/toast'
 import {
   ArrowDown,
   ArrowDownLeft,
@@ -15,7 +8,7 @@ import {
   ArrowUpRight,
 } from '@tamagui/lucide-icons-2'
 import { useRef, useState } from 'react'
-import { Button, Label, SizableText, Slider, XStack, YStack } from 'tamagui'
+import { Button, isWeb, Label, SizableText, Slider, Toast, XStack, YStack } from 'tamagui'
 
 export const ToastDemo = () => {
   const [position, setPosition] = useState<ToastPosition>('bottom-right')
@@ -28,12 +21,14 @@ export const ToastDemo = () => {
     setPosition(newPosition)
     count.current++
     toast(`Toast #${count.current}`, {
+      toasterId: 'demo',
       description: 'Swipe to dismiss or wait for auto-close.',
     })
   }
 
   return (
     <Toast
+      toasterId="demo"
       position={position}
       gap={Math.round(gap)}
       visibleToasts={visibleToasts}
@@ -49,10 +44,10 @@ export const ToastDemo = () => {
         />
       </Toast.Viewport>
 
-      <YStack gap="$3" self="center" width={280}>
+      <YStack gap="3" self="center" width={280}>
         {/* Position buttons */}
-        <YStack gap="$2" self="center">
-          <XStack gap="$2">
+        <YStack gap="2" self="center">
+          <XStack gap="2">
             <PositionButton
               position="top-left"
               current={position}
@@ -73,7 +68,7 @@ export const ToastDemo = () => {
               testID="toast-top-right-button"
             />
           </XStack>
-          <XStack gap="$2">
+          <XStack gap="2">
             <PositionButton
               position="bottom-left"
               current={position}
@@ -97,7 +92,7 @@ export const ToastDemo = () => {
         </YStack>
 
         {/* Controls */}
-        <YStack gap="$1" paddingTop="$1">
+        <YStack gap="1" paddingTop="1">
           <DemoSlider
             label="Gap"
             value={gap}
@@ -138,16 +133,16 @@ function ToastContent({ toast: t }: { toast: ToastT }) {
 
   return (
     <>
-      <XStack gap="$3" alignItems="flex-start">
+      <XStack gap="3" alignItems="flex-start">
         <Toast.Icon />
-        <YStack flex={1} gap="$0.5">
+        <YStack flex={1} gap="0-5">
           {title && (
-            <Toast.Title fontWeight="600" size="$3">
+            <Toast.Title fontWeight="600" size="3">
               {title}
             </Toast.Title>
           )}
           {description && (
-            <Toast.Description color="$color9" size="$2">
+            <Toast.Description color="color9" size="2">
               {description}
             </Toast.Description>
           )}
@@ -185,8 +180,8 @@ function DemoSlider({
   format?: (v: number) => string
 }) {
   return (
-    <XStack gap="$2" alignItems="center">
-      <Label size="$2" width={55}>
+    <XStack gap="2" alignItems="center">
+      <Label size="2" width={55}>
         {label}
       </Label>
       <Slider
@@ -202,7 +197,7 @@ function DemoSlider({
         </Slider.Track>
         <Slider.Thumb theme="accent" size={16} borderRadius={100} index={0} />
       </Slider>
-      <SizableText userSelect="none" size="$2" width={35} textAlign="right">
+      <SizableText userSelect="none" size="2" width={35} textAlign="right">
         {format ? format(value) : Math.round(value)}
       </SizableText>
     </XStack>

package/src/ToastDuplicateDemo.tsx

@@ -1,13 +1,13 @@
 import { CheckCircle2 } from '@tamagui/lucide-icons-2'
-import { Toast, toast, useToasts } from '@tamagui/toast/v2'
-import { Button, XStack, YStack } from 'tamagui'
+import { toast, useToasts } from '@tamagui/toast'
+import { Button, Toast, XStack, YStack } from 'tamagui'
 
 /**
  *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the Toast wrapper as well.
  */
 export const ToastDuplicateDemo = () => {
   return (
-    <Toast>
+    <Toast toasterId="duplicate-demo">
       <Toast.Viewport>
         <ToastList />
       </Toast.Viewport>
@@ -16,6 +16,7 @@ export const ToastDuplicateDemo = () => {
         <Button
           onPress={() => {
             toast('Successfully saved!', {
+              toasterId: 'duplicate-demo',
               description: "Don't worry... We've got your data.",
             })
           }}
@@ -34,7 +35,7 @@ const ToastList = () => {
     <>
       {toasts.map((t, index) => (
         <Toast.Item key={t.id} toast={t} index={index}>
-          <XStack gap="$4" items="center">
+          <XStack gap="4" items="center">
             <YStack>
               <CheckCircle2 />
             </YStack>

package/src/ToggleGroupDemo.tsx

@@ -1,15 +1,17 @@
 import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons-2'
-import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack } from 'tamagui'
+import { Label, ToggleGroup, XGroup, YGroup, XStack, YStack, style } from 'tamagui'
+
+const activeToggleStyle = style({ backgroundColor: 'color5' })
 
 export function ToggleGroupDemo() {
   return (
-    <YStack px="$4">
-      <XStack items="center" gap="$10">
-        <YStack items="center" gap="$6">
+    <YStack px="4">
+      <XStack items="center" gap="10">
+        <YStack items="center" gap="6">
           <ToggleGroupComponent type="single" orientation="horizontal" />
           <ToggleGroupComponent type="multiple" orientation="horizontal" />
         </YStack>
-        <XStack items="center" gap="$6" y={-28}>
+        <XStack items="center" gap="6" y={-28}>
           <ToggleGroupComponent type="single" orientation="vertical" />
           <ToggleGroupComponent type="multiple" orientation="vertical" />
         </XStack>
@@ -30,9 +32,9 @@ function ToggleGroupComponent(props: {
       flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}
       items="center"
       justify="center"
-      gap="$4"
+      gap="4"
     >
-      <Label pr="$0" justify="flex-end" size="$4" htmlFor={id}>
+      <Label pr="0" justify="flex-end" size="4" htmlFor={id}>
         {props.type === 'single' ? 'Single' : 'Multiple'}
       </Label>
 
@@ -47,8 +49,8 @@ function ToggleGroupComponent(props: {
             <ToggleGroup.Item
               value="left"
               aria-label="Left aligned"
-              borderRadius="$4"
-              activeStyle={{ backgroundColor: '$color5' }}
+              borderRadius="4"
+              activeStyle={activeToggleStyle}
             >
               <AlignLeft size={16} />
             </ToggleGroup.Item>
@@ -58,8 +60,8 @@ function ToggleGroupComponent(props: {
             <ToggleGroup.Item
               value="center"
               aria-label="Center aligned"
-              borderRadius="$4"
-              activeStyle={{ backgroundColor: '$color5' }}
+              borderRadius="4"
+              activeStyle={activeToggleStyle}
             >
               <AlignCenter size={16} />
             </ToggleGroup.Item>
@@ -69,8 +71,8 @@ function ToggleGroupComponent(props: {
             <ToggleGroup.Item
               value="right"
               aria-label="Right aligned"
-              borderRadius="$4"
-              activeStyle={{ backgroundColor: '$color5' }}
+              borderRadius="4"
+              activeStyle={activeToggleStyle}
             >
               <AlignRight size={16} />
             </ToggleGroup.Item>

package/src/TokensDemo.tsx

@@ -28,13 +28,13 @@ export function TokensDemo() {
   const [section, setSection] = React.useState<Section>('size')
 
   return (
-    <YStack gap="$4">
+    <YStack gap="4">
       <XGroup items="center" self="center">
         {sections.map(({ name, key }) => {
           return (
             <XGroup.Item key={key}>
               <Button
-                size="$3"
+                size="3"
                 theme={section === key ? 'accent' : null}
                 onPress={() => setSection(key)}
               >
@@ -65,24 +65,24 @@ function SizeSection({ section }: { section: Section }) {
     .sort((a, b) => (Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1))
 
   return (
-    <YStack flex={1} gap="$4">
+    <YStack flex={1} gap="4">
       <H2>Sizes</H2>
-      <YStack width="100%" gap="$2">
+      <YStack width="100%" gap="2">
         {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(
           (token) => {
             return (
               <XStack width="100%" items="center" key={token}>
                 <YStack width="25%">
-                  <H3 size="$6">${token}</H3>
+                  <H3 size="6">${token}</H3>
                 </YStack>
                 <YStack width="20%">
-                  <H4 size="$5">{tokens[token]?.val}px</H4>
+                  <H4 size="5">{tokens[token]?.val}px</H4>
                 </YStack>
                 <Square
                   size={tokens[token]?.val as any}
-                  backgroundColor="$color5"
+                  backgroundColor="color5"
                   {...(section === 'spaceNegative' && {
-                    backgroundColor: '$red5',
+                    backgroundColor: 'red5',
                     size:
                       -tokens[
                         spaceTokensNegative.find(

package/src/TooltipDemo.tsx

@@ -10,20 +10,20 @@ import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from
 
 export function TooltipDemo() {
   return (
-    <Theme name="surface2">
+    <Theme name="level3">
       <TooltipGroup delay={{ open: 300, close: 100 }}>
-        <YStack gap="$2" self="center">
-          <XStack gap="$2">
+        <YStack gap="2" self="center">
+          <XStack gap="2">
             <Demo groupId="0" placement="top-end" Icon={Circle} />
             <Demo groupId="1" placement="top" Icon={ChevronUp} />
             <Demo groupId="2" placement="top-start" Icon={Circle} />
           </XStack>
-          <XStack gap="$2">
+          <XStack gap="2">
             <Demo groupId="3" placement="left" Icon={ChevronLeft} />
             <YStack flex={1} />
             <Demo groupId="4" placement="right" Icon={ChevronRight} />
           </XStack>
-          <XStack gap="$2">
+          <XStack gap="2">
             <Demo groupId="5" placement="bottom-end" Icon={Circle} />
             <Demo groupId="6" placement="bottom" Icon={ChevronDown} />
             <Demo groupId="7" placement="bottom-start" Icon={Circle} />
@@ -41,25 +41,22 @@ function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {
         <Button icon={Icon} circular />
       </Tooltip.Trigger>
       <Tooltip.Content
-        enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-        exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-        scale={1}
-        x={0}
-        y={0}
-        opacity={1}
-        py="$2"
-        px="$3"
-        transition={[
-          'quick',
-          {
-            opacity: {
-              overshootClamping: true,
-            },
-          },
-        ]}
+        theme="Tooltip"
+        scale="1 enter:0.9 exit:0.9"
+        x="0 enter:0 exit:0"
+        y="0 enter:-5px exit:-5px"
+        opacity="1 enter:0 exit:0"
+        py="2"
+        px="3"
+        rounded
+        boxShadow="0 2px 4px shadow-color"
+        transition={{
+          preset: 'quick',
+          opacity: { preset: 'quick', spring: { overshootClamping: true } },
+        }}
       >
-        <Tooltip.Arrow />
-        <Paragraph size="$2" lineHeight="$1">
+        <Tooltip.Arrow backgroundColor="background" borderColor="border-color" />
+        <Paragraph size="2" lineHeight="1">
           Hello world
         </Paragraph>
       </Tooltip.Content>

package/src/UpdateThemeDemo.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { config } from '@tamagui/config/v3'
 import { addTheme, updateTheme } from '@tamagui/theme'
 
 import {
@@ -8,13 +7,11 @@ import {
   Theme,
   XStack,
   YStack,
+  getTokens,
   getVariableValue,
   useIsomorphicLayoutEffect,
 } from 'tamagui'
 
-const colors = config.tokens.color
-const colorKeys = Object.keys(colors)
-
 export function UpdateThemeDemo() {
   const [theme, setTheme] = React.useState<any>()
 
@@ -30,15 +27,20 @@ export function UpdateThemeDemo() {
   }, [])
 
   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>
 
       <Button
         onPress={() => {
+          // read the app's own palette rather than importing a config: pulling a
+          // config entry in here dragged its whole color graph into every
+          // consumer of this demo
+          const colors = getTokens().color
+          const colorKeys = Object.keys(colors)
           const randomColor = getVariableValue(
             colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
           )

package/src/index.tsx

@@ -18,11 +18,11 @@ export * from './ThemeBuilderDemo'
 export * from './CardDemo'
 export * from './CheckboxDemo'
 export * from './CheckboxHeadlessDemo'
-export * from './CheckboxUnstyledDemo'
 export * from './ColorsDemo'
 export * from './ContextMenuDemo'
 export * from './MenuDemo'
 export * from './DialogDemo'
+export * from './FieldDemo'
 export * from './FormsDemo'
 export * from './GroupDemo'
 export * from './HeadingsDemo'
@@ -38,7 +38,7 @@ export * from './PopoverDemo'
 export * from './ProgressDemo'
 export * from './RadioGroupDemo'
 export * from './RadioGroupHeadlessDemo'
-export * from './RadioGroupUnstyledDemo'
+export * from './RadioGroupCustomDemo'
 export * from './ReplaceThemeDemo'
 export * from './ScrollViewDemo'
 export * from './SelectDemo'
@@ -50,17 +50,15 @@ export * from './SpinnerDemo'
 export * from './StacksDemo'
 export * from './SwitchDemo'
 export * from './SwitchHeadlessDemo'
-export * from './SwitchUnstyledDemo'
 export * from './TabsAdvancedDemo'
 export * from './TabsDemo'
 export * from './TextDemo'
 export * from './ThemeInverseDemo'
 export * from './ToastDemo'
 export * from './ToastDuplicateDemo'
-export * from './ToastV1Demo'
 export * from './ToggleGroupDemo'
 export * from './TokensDemo'
 export * from './TooltipDemo'
 export * from './UpdateThemeDemo'
 export * from './useOnIntersecting'
-export * from './TabsHeadlessDemo'
+export * from './TabsCustomDemo'

package/types/AccordionDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AccordionDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AccordionDemo.d.ts.map

package/types/AddThemeDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AddThemeDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddThemeDemo.d.ts.map

package/types/AlertDialogDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AlertDialogDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AlertDialogDemo.d.ts.map

package/types/AnimationsDelayDemo.d.ts

@@ -0,0 +1,2 @@
+export declare function AnimationsDelayDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimationsDelayDemo.d.ts.map