@tamagui/demos 1.11.2 → 1.12.0

package/src/SheetDemo.tsx

@@ -33,9 +33,9 @@ export const SheetDemo = () => {
       >
         <Sheet.Overlay />
         <Sheet.Handle />
-        <Sheet.Frame f={1} p="$4" jc="center" ai="center" space="$5">
+        <Sheet.Frame flex={1} padding="$4" justifyContent="center" alignItems="center" space="$5">
           <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
-          <Input w={200} />
+          <Input width={200} />
           {modal && (
             <>
               <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
@@ -58,12 +58,12 @@ function InnerSheet(props: SheetProps) {
     <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
       <Sheet.Overlay />
       <Sheet.Handle />
-      <Sheet.Frame f={1} jc="center" ai="center" space="$5">
-        <Sheet.ScrollView p="$4" space>
+      <Sheet.Frame flex={1} justifyContent="center" alignItems="center" space="$5">
+        <Sheet.ScrollView padding="$4" space>
           <Button
             size="$8"
             circular
-            als="center"
+            alignSelf="center"
             icon={ChevronDown}
             onPress={() => props.onOpenChange?.(false)}
           />

package/src/SliderDemo.tsx

@@ -2,7 +2,7 @@ import { Slider, SliderProps, Spacer, XStack } from 'tamagui'
 
 export function SliderDemo() {
   return (
-    <XStack height={200} ai="center" space="$8">
+    <XStack height={200} alignItems="center" space="$8">
       <SimpleSlider height={200} orientation="vertical" />
       <SimpleSlider width={200} />
     </XStack>

package/src/SpinnerDemo.tsx

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

package/src/StacksDemo.tsx

@@ -3,23 +3,45 @@ 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" />
+    <XStack maxWidth={250} padding="$2" alignSelf="center" space>
+      <YStack
+        flex={1}
+        space="$2"
+        borderWidth={2}
+        borderColor="$color"
+        borderRadius="$4"
+        padding="$2"
+      >
+        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+        <YStack backgroundColor="$color" borderRadius="$3" padding="$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
+        flex={1}
+        space="$2"
+        borderWidth={2}
+        borderColor="$color"
+        borderRadius="$4"
+        padding="$2"
+      >
+        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+        <YStack backgroundColor="$color" borderRadius="$3" padding="$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 maxWidth={50} maxHeight={85} width={100} flex={1}>
+        <YStack fullscreen borderWidth={2} borderRadius="$4" padding="$2" />
+        <YStack fullscreen y={10} x={10} borderWidth={2} borderRadius="$4" padding="$2" />
+        <YStack
+          fullscreen
+          y={20}
+          x={20}
+          borderWidth={2}
+          backgroundColor="$color"
+          borderRadius="$4"
+          padding="$2"
+        />
       </ZStack>
     </XStack>
   )

package/src/SwitchDemo.tsx

@@ -2,7 +2,7 @@ import { Label, Separator, SizeTokens, Switch, XStack, YStack, styled } from 'ta
 
 export function SwitchDemo() {
   return (
-    <YStack w={200} ai="center" space="$3">
+    <YStack width={200} alignItems="center" space="$3">
       <SwitchWithLabel size="$2" />
       <SwitchWithLabel size="$3" />
       <SwitchWithLabel size="$4" />
@@ -14,11 +14,17 @@ export function SwitchDemo() {
 function SwitchWithLabel(props: { size: SizeTokens }) {
   const id = `switch-${props.size.toString().slice(1)}`
   return (
-    <XStack w={200} ai="center" space="$4">
-      <Label pr="$0" miw={90} jc="flex-end" size={props.size} htmlFor={id}>
+    <XStack width={200} alignItems="center" space="$4">
+      <Label
+        paddingRight="$0"
+        minWidth={90}
+        justifyContent="flex-end"
+        size={props.size}
+        htmlFor={id}
+      >
         Dark mode
       </Label>
-      <Separator mih={20} vertical />
+      <Separator minHeight={20} vertical />
       <Switch id={id} size={props.size}>
         <Switch.Thumb animation="quick" />
       </Switch>

package/src/TabsAdvancedDemo.tsx

@@ -1,45 +1,188 @@
 import { useRef, useState } from 'react'
 import {
   AnimatePresence,
+  Button,
   H5,
   SizableText,
   Stack,
   TabTriggerLayout,
   Tabs,
   TabsTriggerProps,
+  XStack,
   YStack,
   styled,
 } from 'tamagui'
 
+const demos = ['background', 'underline'] as const
+
 export const TabsAdvancedDemo = () => {
-  const [currentTab, setCurrentTab] = useState('tab1')
+  const [demoIndex, setDemoIndex] = useState(0)
+  const demo = demos[demoIndex]
+  return (
+    <>
+      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}
+
+      <XStack alignItems="center" space position="absolute" bottom="$3" left="$4" $xxs={{ display: 'none' }}>
+        <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
+          {demo}
+        </Button>
+      </XStack>
+    </>
+  )
+}
+
+const TabsAdvancedBackground = () => {
+  const [tabState, setTabState] = useState<{
+    currentTab: string
+    /**
+     * Layout of the trigger user might intend to select (hovering / focusing)
+     */
+    intentAt: TabTriggerLayout | null
+    /**
+     * Layout of the trigger user selected
+     */
+    activeAt: TabTriggerLayout | null
+    /**
+     * Used to get the direction of activation for animating the active indicator
+     */
+    prevActiveAt: TabTriggerLayout | null
+  }>({
+    activeAt: null,
+    currentTab: 'tab1',
+    intentAt: null,
+    prevActiveAt: null,
+  })
+
+  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })
+  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })
+  const setActiveIndicator = (activeAt) =>
+    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })
+  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState
 
-  // Layout of the trigger user might intend to select (hovering / focusing)
-  const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)
+  /**
+   * -1: from left
+   *  0: n/a
+   *  1: from right
+   */
+  const direction = (() => {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+      return 0
+    }
+    return activeAt.x > prevActiveAt.x ? -1 : 1
+  })()
 
-  // Layout of the trigger user selected
-  const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)
-  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)
+  const enterVariant =
+    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'
+  const exitVariant =
+    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'
 
-  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {
-    prevSelectionIndicatorLayout.current = selectIndicator
-    setSelectIndicator(newSize)
+  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {
+    if (type === 'select') {
+      setActiveIndicator(layout)
+    } else {
+      setIntentIndicator(layout)
+    }
   }
 
+  return (
+    <Tabs
+      value={currentTab}
+      onValueChange={setCurrentTab}
+      orientation="horizontal"
+      size="$3"
+      padding="$2"
+      height={150}
+      flexDirection="column"
+      activationMode="manual"
+    >
+      <Tabs.List
+        loop={false}
+        aria-label="Manage your account"
+        disablePassBorderRadius
+      >
+        {intentAt && (
+          <TabsRovingIndicator
+            width={intentAt.width}
+            height={intentAt.height}
+            x={intentAt.x}
+            y={intentAt.y}
+          />
+        )}
+
+        {activeAt && (
+          <TabsRovingIndicator
+            theme="active"
+            width={activeAt.width}
+            height={activeAt.height}
+            x={activeAt.x}
+            y={activeAt.y}
+          />
+        )}
+
+        <Tabs.Trigger value="tab1" onInteraction={handleOnInteraction}>
+          <SizableText>Profile</SizableText>
+        </Tabs.Trigger>
+        <Tabs.Trigger value="tab2" onInteraction={handleOnInteraction}>
+          <SizableText>Connections</SizableText>
+        </Tabs.Trigger>
+        <Tabs.Trigger value="tab3" onInteraction={handleOnInteraction}>
+          <SizableText>Notifications</SizableText>
+        </Tabs.Trigger>
+      </Tabs.List>
+
+      <AnimatePresence
+        exitBeforeEnter
+        enterVariant={enterVariant}
+        exitVariant={exitVariant}
+      >
+        <AnimatedYStack key={currentTab} animation="100ms" x={0} opacity={1} flex={1}>
+          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent="center">
+            <H5 textAlign="center">{currentTab}</H5>
+          </Tabs.Content>
+        </AnimatedYStack>
+      </AnimatePresence>
+    </Tabs>
+  )
+}
+
+const TabsAdvancedUnderline = () => {
+  const [tabState, setTabState] = useState<{
+    currentTab: string
+    /**
+     * Layout of the trigger user might intend to select (hovering / focusing)
+     */
+    intentAt: TabTriggerLayout | null
+    /**
+     * Layout of the trigger user selected
+     */
+    activeAt: TabTriggerLayout | null
+    /**
+     * Used to get the direction of activation for animating the active indicator
+     */
+    prevActiveAt: TabTriggerLayout | null
+  }>({
+    activeAt: null,
+    currentTab: 'tab1',
+    intentAt: null,
+    prevActiveAt: null,
+  })
+
+  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })
+  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })
+  const setActiveIndicator = (activeAt) =>
+    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })
+  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState
+
   /**
    * -1: from left
    *  0: n/a
    *  1: from right
    */
   const direction = (() => {
-    if (
-      !selectIndicator ||
-      !prevSelectionIndicatorLayout.current ||
-      selectIndicator.x === prevSelectionIndicatorLayout.current.x
-    ) {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
       return 0
     }
-    return selectIndicator.x > prevSelectionIndicatorLayout.current.x ? -1 : 1
+    return activeAt.x > prevActiveAt.x ? -1 : 1
   })()
 
   const enterVariant =
@@ -49,7 +192,7 @@ export const TabsAdvancedDemo = () => {
 
   const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {
     if (type === 'select') {
-      handleUpdateSelectionIndicator(layout)
+      setActiveIndicator(layout)
     } else {
       setIntentIndicator(layout)
     }
@@ -60,9 +203,8 @@ export const TabsAdvancedDemo = () => {
       value={currentTab}
       onValueChange={setCurrentTab}
       orientation="horizontal"
-      br="$4"
       size="$3"
-      p="$2"
+      padding="$2"
       height={150}
       flexDirection="column"
       activationMode="manual"
@@ -72,25 +214,27 @@ export const TabsAdvancedDemo = () => {
           loop={false}
           aria-label="Manage your account"
           disablePassBorderRadius
-          overflow="visible"
-          pb="$1.5"
+          borderBottomLeftRadius={0}
+          borderBottomRightRadius={0}
+          paddingBottom="$1.5"
         >
-          {intentIndicator && (
+          {intentAt && (
             <TabsRovingIndicator
-              width={intentIndicator.width}
-              height={intentIndicator.height}
-              x={intentIndicator.x}
-              y={intentIndicator.y}
+              width={intentAt.width}
+              height="$0.25"
+              x={intentAt.x}
+              borderRadius={0}
+              bottom={-3}
             />
           )}
 
-          {selectIndicator && (
+          {activeAt && (
             <TabsRovingIndicator
               theme="active"
               active
-              width={selectIndicator.width}
+              width={activeAt.width}
               height="$0.25"
-              x={selectIndicator.x}
+              x={activeAt.x}
               borderRadius={0}
               bottom={-3}
             />
@@ -113,9 +257,9 @@ export const TabsAdvancedDemo = () => {
         enterVariant={enterVariant}
         exitVariant={exitVariant}
       >
-        <AnimatedYStack key={currentTab} animation="100ms" x={0} o={1} f={1}>
-          <Tabs.Content value={currentTab} forceMount f={1} jc="center">
-            <H5 ta="center">{currentTab}</H5>
+        <AnimatedYStack key={currentTab} animation="100ms" x={0} opacity={1} flex={1}>
+          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent="center">
+            <H5 textAlign="center">{currentTab}</H5>
           </Tabs.Content>
         </AnimatedYStack>
       </AnimatePresence>

package/src/TabsDemo.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, H5, SizableText, Tabs, XStack } from 'tamagui'
+import { Button, H5, SizableText, Tabs, XStack, YStack } from 'tamagui'
 
 const demos = ['horizontal', 'vertical'] as const
 
@@ -8,15 +8,23 @@ export function TabsDemo() {
   const demo = demos[demoIndex]
 
   return (
-    <>
+    // web only fix for position relative
+    <YStack paddingHorizontal="$4" position={'unset' as any}>
       {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}
 
-      <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: 'none' }}>
+      <XStack
+        alignItems="center"
+        space
+        position="absolute"
+        bottom="$3"
+        left="$4"
+        $xxs={{ display: 'none' }}
+      >
         <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
           {demo}
         </Button>
       </XStack>
-    </>
+    </YStack>
   )
 }
 
@@ -28,29 +36,50 @@ const HorizontalTabs = () => {
       flexDirection="column"
       width={400}
       height={150}
-      br="$4"
+      borderRadius="$4"
     >
       <Tabs.List disablePassBorderRadius="bottom" aria-label="Manage your account">
-        <Tabs.Trigger theme="Button" f={1} value="tab1">
+        <Tabs.Trigger theme="Button" flex={1} value="tab1">
           <SizableText fontFamily="$body">Profile</SizableText>
         </Tabs.Trigger>
-        <Tabs.Trigger theme="Button" f={1} value="tab2">
+        <Tabs.Trigger theme="Button" flex={1} value="tab2">
           <SizableText fontFamily="$body">Connections</SizableText>
         </Tabs.Trigger>
-        <Tabs.Trigger theme="Button" f={1} value="tab3">
+        <Tabs.Trigger theme="Button" flex={1} value="tab3">
           <SizableText fontFamily="$body">Notifications</SizableText>
         </Tabs.Trigger>
       </Tabs.List>
 
-      <Tabs.Content value="tab1" key="tab1" p="$5" ai="center" jc="center" f={1}>
+      <Tabs.Content
+        value="tab1"
+        key="tab1"
+        padding="$5"
+        alignItems="center"
+        justifyContent="center"
+        flex={1}
+      >
         <H5>Profile</H5>
       </Tabs.Content>
 
-      <Tabs.Content value="tab2" key="tab2" p="$5" ai="center" jc="center" f={1}>
+      <Tabs.Content
+        value="tab2"
+        key="tab2"
+        padding="$5"
+        alignItems="center"
+        justifyContent="center"
+        flex={1}
+      >
         <H5>Connections</H5>
       </Tabs.Content>
 
-      <Tabs.Content value="tab3" key="tab3" p="$5" ai="center" jc="center" f={1}>
+      <Tabs.Content
+        value="tab3"
+        key="tab3"
+        padding="$5"
+        alignItems="center"
+        justifyContent="center"
+        flex={1}
+      >
         <H5>Notifications</H5>
       </Tabs.Content>
     </Tabs>
@@ -64,7 +93,7 @@ const VerticalTabs = () => {
       flexDirection="row"
       orientation="vertical"
       width={400}
-      br="$4"
+      borderRadius="$4"
     >
       <Tabs.List disablePassBorderRadius="end" aria-label="Manage your account">
         <Tabs.Trigger theme="Button" value="tab1">
@@ -77,14 +106,35 @@ const VerticalTabs = () => {
           <SizableText>Notifications</SizableText>
         </Tabs.Trigger>
       </Tabs.List>
-      <Tabs.Content value="tab1" key="tab1" p="$2" ai="center" jc="center" f={1}>
-        <H5 ta="center">Profile</H5>
+      <Tabs.Content
+        value="tab1"
+        key="tab1"
+        padding="$2"
+        alignItems="center"
+        justifyContent="center"
+        flex={1}
+      >
+        <H5 textAlign="center">Profile</H5>
       </Tabs.Content>
-      <Tabs.Content value="tab2" key="tab2" p="$2" ai="center" jc="center" f={1}>
-        <H5 ta="center">Connections</H5>
+      <Tabs.Content
+        value="tab2"
+        key="tab2"
+        padding="$2"
+        alignItems="center"
+        justifyContent="center"
+        flex={1}
+      >
+        <H5 textAlign="center">Connections</H5>
       </Tabs.Content>
-      <Tabs.Content value="tab3" key="tab3" p="$2" ai="center" jc="center" f={1}>
-        <H5 ta="center">Notifications</H5>
+      <Tabs.Content
+        value="tab3"
+        key="tab3"
+        padding="$2"
+        alignItems="center"
+        justifyContent="center"
+        flex={1}
+      >
+        <H5 textAlign="center">Notifications</H5>
       </Tabs.Content>
     </Tabs>
   )

package/src/TextDemo.tsx

@@ -3,7 +3,7 @@ import { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'
 
 export function TextDemo() {
   return (
-    <YStack space="$2" ai="center">
+    <YStack space="$2" alignItems="center">
       <SizableText size="$3">SizableText</SizableText>
       <XStack space>
         <SizableText theme="alt1" size="$3">
@@ -13,7 +13,7 @@ export function TextDemo() {
           alt2
         </SizableText>
       </XStack>
-      <Paragraph size="$2" fow="800">
+      <Paragraph size="$2" fontWeight="800">
         Paragraph
       </Paragraph>
     </YStack>

package/src/ThemeInverseDemo.tsx

@@ -13,7 +13,7 @@ export function ThemeInverseDemo() {
 
 function Buttons() {
   return (
-    <YStack bc="$background" p="$3" br="$3" space>
+    <YStack backgroundColor="$background" padding="$3" borderRadius="$3" space>
       <Button>Dark</Button>
       <Button themeInverse>Inversed</Button>
       <Button theme="alt1">Alt1 Dark</Button>