@tamagui/demos 1.12.0 → 1.12.2

package/src/TabsAdvancedDemo.tsx

@@ -1,19 +1,23 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import {
   AnimatePresence,
   Button,
   H5,
   SizableText,
   Stack,
-  TabTriggerLayout,
+  TabLayout,
   Tabs,
-  TabsTriggerProps,
+  TabsTabProps,
   XStack,
   YStack,
   styled,
 } from 'tamagui'
 
 const demos = ['background', 'underline'] as const
+const demosTitle: Record<(typeof demos)[number], string> = {
+  background: 'Background Indicator',
+  underline: 'Underline Indicator',
+}
 
 export const TabsAdvancedDemo = () => {
   const [demoIndex, setDemoIndex] = useState(0)
@@ -22,9 +26,9 @@ export const TabsAdvancedDemo = () => {
     <>
       {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}
 
-      <XStack alignItems="center" space position="absolute" bottom="$3" left="$4" $xxs={{ display: 'none' }}>
+      <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: 'none' }}>
         <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
-          {demo}
+          {demosTitle[demo]}
         </Button>
       </XStack>
     </>
@@ -35,17 +39,17 @@ const TabsAdvancedBackground = () => {
   const [tabState, setTabState] = useState<{
     currentTab: string
     /**
-     * Layout of the trigger user might intend to select (hovering / focusing)
+     * Layout of the Tab user might intend to select (hovering / focusing)
      */
-    intentAt: TabTriggerLayout | null
+    intentAt: TabLayout | null
     /**
-     * Layout of the trigger user selected
+     * Layout of the Tab user selected
      */
-    activeAt: TabTriggerLayout | null
+    activeAt: TabLayout | null
     /**
      * Used to get the direction of activation for animating the active indicator
      */
-    prevActiveAt: TabTriggerLayout | null
+    prevActiveAt: TabLayout | null
   }>({
     activeAt: null,
     currentTab: 'tab1',
@@ -76,7 +80,7 @@ const TabsAdvancedBackground = () => {
   const exitVariant =
     direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'
 
-  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {
+  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {
     if (type === 'select') {
       setActiveIndicator(layout)
     } else {
@@ -89,46 +93,58 @@ const TabsAdvancedBackground = () => {
       value={currentTab}
       onValueChange={setCurrentTab}
       orientation="horizontal"
-      size="$3"
+      size="$4"
       padding="$2"
       height={150}
       flexDirection="column"
       activationMode="manual"
+      backgroundColor="$background"
+      borderRadius="$4"
+      position="relative"
     >
-      <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}
-          />
-        )}
+      <YStack>
+        <AnimatePresence>
+          {intentAt && (
+            <TabsRovingIndicator
+              borderRadius="$4"
+              width={intentAt.width}
+              height={intentAt.height}
+              x={intentAt.x}
+              y={intentAt.y}
+            />
+          )}
+        </AnimatePresence>
+        <AnimatePresence>
+          {activeAt && (
+            <TabsRovingIndicator
+              borderRadius="$4"
+              theme="active"
+              width={activeAt.width}
+              height={activeAt.height}
+              x={activeAt.x}
+              y={activeAt.y}
+            />
+          )}
+        </AnimatePresence>
 
-        <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>
+        <Tabs.List
+          disablePassBorderRadius
+          loop={false}
+          aria-label="Manage your account"
+          space="$2"
+          backgroundColor="transparent"
+        >
+          <Tabs.Tab unstyled value="tab1" onInteraction={handleOnInteraction}>
+            <SizableText>Profile</SizableText>
+          </Tabs.Tab>
+          <Tabs.Tab unstyled value="tab2" onInteraction={handleOnInteraction}>
+            <SizableText>Connections</SizableText>
+          </Tabs.Tab>
+          <Tabs.Tab unstyled value="tab3" onInteraction={handleOnInteraction}>
+            <SizableText>Notifications</SizableText>
+          </Tabs.Tab>
+        </Tabs.List>
+      </YStack>
 
       <AnimatePresence
         exitBeforeEnter
@@ -149,17 +165,17 @@ const TabsAdvancedUnderline = () => {
   const [tabState, setTabState] = useState<{
     currentTab: string
     /**
-     * Layout of the trigger user might intend to select (hovering / focusing)
+     * Layout of the Tab user might intend to select (hovering / focusing)
      */
-    intentAt: TabTriggerLayout | null
+    intentAt: TabLayout | null
     /**
-     * Layout of the trigger user selected
+     * Layout of the Tab user selected
      */
-    activeAt: TabTriggerLayout | null
+    activeAt: TabLayout | null
     /**
      * Used to get the direction of activation for animating the active indicator
      */
-    prevActiveAt: TabTriggerLayout | null
+    prevActiveAt: TabLayout | null
   }>({
     activeAt: null,
     currentTab: 'tab1',
@@ -190,7 +206,7 @@ const TabsAdvancedUnderline = () => {
   const exitVariant =
     direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'
 
-  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {
+  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {
     if (type === 'select') {
       setActiveIndicator(layout)
     } else {
@@ -203,52 +219,71 @@ const TabsAdvancedUnderline = () => {
       value={currentTab}
       onValueChange={setCurrentTab}
       orientation="horizontal"
-      size="$3"
-      padding="$2"
+      size="$4"
       height={150}
       flexDirection="column"
       activationMode="manual"
+      backgroundColor="$background"
+      borderRadius="$4"
     >
-      <YStack borderColor="$color3" borderBottomWidth="$0.5">
-        <Tabs.List
-          loop={false}
-          aria-label="Manage your account"
-          disablePassBorderRadius
-          borderBottomLeftRadius={0}
-          borderBottomRightRadius={0}
-          paddingBottom="$1.5"
-        >
+      <YStack>
+        <AnimatePresence>
           {intentAt && (
             <TabsRovingIndicator
               width={intentAt.width}
-              height="$0.25"
+              height="$0.5"
               x={intentAt.x}
-              borderRadius={0}
-              bottom={-3}
+              bottom={0}
             />
           )}
-
+        </AnimatePresence>
+        <AnimatePresence>
           {activeAt && (
             <TabsRovingIndicator
               theme="active"
               active
               width={activeAt.width}
-              height="$0.25"
+              height="$0.5"
               x={activeAt.x}
-              borderRadius={0}
-              bottom={-3}
+              bottom={0}
             />
           )}
-
-          <Tabs.Trigger value="tab1" onInteraction={handleOnInteraction}>
+        </AnimatePresence>
+        <Tabs.List
+          disablePassBorderRadius
+          loop={false}
+          aria-label="Manage your account"
+          borderBottomLeftRadius={0}
+          borderBottomRightRadius={0}
+          paddingBottom="$1.5"
+          borderColor="$color3"
+          borderBottomWidth="$0.5"
+          backgroundColor="transparent"
+        >
+          <Tabs.Tab
+            unstyled
+            padding="$5"
+            value="tab1"
+            onInteraction={handleOnInteraction}
+          >
             <SizableText>Profile</SizableText>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="tab2" onInteraction={handleOnInteraction}>
+          </Tabs.Tab>
+          <Tabs.Tab
+            unstyled
+            padding="$5"
+            value="tab2"
+            onInteraction={handleOnInteraction}
+          >
             <SizableText>Connections</SizableText>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="tab3" onInteraction={handleOnInteraction}>
+          </Tabs.Tab>
+          <Tabs.Tab
+            unstyled
+            padding="$5"
+            value="tab3"
+            onInteraction={handleOnInteraction}
+          >
             <SizableText>Notifications</SizableText>
-          </Tabs.Trigger>
+          </Tabs.Tab>
         </Tabs.List>
       </YStack>
 
@@ -270,14 +305,19 @@ const TabsAdvancedUnderline = () => {
 const TabsRovingIndicator = styled(Stack, {
   position: 'absolute',
   backgroundColor: '$color5',
-  opacity: 1,
+  opacity: 0.7,
   animation: '100ms',
-  borderRadius: '$4',
-
+  enterStyle: {
+    opacity: 0,
+  },
+  exitStyle: {
+    opacity: 0,
+  },
   variants: {
     active: {
       true: {
         backgroundColor: '$color8',
+        opacity: 0.6,
       },
     },
   },

package/src/TabsDemo.tsx

@@ -1,7 +1,20 @@
 import { useState } from 'react'
-import { Button, H5, SizableText, Tabs, XStack, YStack } from 'tamagui'
+import {
+  Button,
+  H5,
+  Separator,
+  SizableText,
+  Tabs,
+  TabsContentProps,
+  XStack,
+  YStack,
+} from 'tamagui'
 
 const demos = ['horizontal', 'vertical'] as const
+const demosTitle: Record<(typeof demos)[number], string> = {
+  horizontal: 'Horizontal',
+  vertical: 'Vertical',
+}
 
 export function TabsDemo() {
   const [demoIndex, setDemoIndex] = useState(0)
@@ -21,7 +34,7 @@ export function TabsDemo() {
         $xxs={{ display: 'none' }}
       >
         <Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>
-          {demo}
+          {demosTitle[demo]}
         </Button>
       </XStack>
     </YStack>
@@ -37,51 +50,37 @@ const HorizontalTabs = () => {
       width={400}
       height={150}
       borderRadius="$4"
+      borderWidth="$0.25"
+      overflow="hidden"
+      borderColor="$borderColor"
     >
-      <Tabs.List disablePassBorderRadius="bottom" aria-label="Manage your account">
-        <Tabs.Trigger theme="Button" flex={1} value="tab1">
+      <Tabs.List
+        separator={<Separator vertical />}
+        disablePassBorderRadius="bottom"
+        aria-label="Manage your account"
+      >
+        <Tabs.Tab flex={1} value="tab1">
           <SizableText fontFamily="$body">Profile</SizableText>
-        </Tabs.Trigger>
-        <Tabs.Trigger theme="Button" flex={1} value="tab2">
+        </Tabs.Tab>
+        <Tabs.Tab flex={1} value="tab2">
           <SizableText fontFamily="$body">Connections</SizableText>
-        </Tabs.Trigger>
-        <Tabs.Trigger theme="Button" flex={1} value="tab3">
+        </Tabs.Tab>
+        <Tabs.Tab flex={1} value="tab3">
           <SizableText fontFamily="$body">Notifications</SizableText>
-        </Tabs.Trigger>
+        </Tabs.Tab>
       </Tabs.List>
-
-      <Tabs.Content
-        value="tab1"
-        key="tab1"
-        padding="$5"
-        alignItems="center"
-        justifyContent="center"
-        flex={1}
-      >
+      <Separator />
+      <TabsContent value="tab1">
         <H5>Profile</H5>
-      </Tabs.Content>
+      </TabsContent>
 
-      <Tabs.Content
-        value="tab2"
-        key="tab2"
-        padding="$5"
-        alignItems="center"
-        justifyContent="center"
-        flex={1}
-      >
+      <TabsContent value="tab2">
         <H5>Connections</H5>
-      </Tabs.Content>
+      </TabsContent>
 
-      <Tabs.Content
-        value="tab3"
-        key="tab3"
-        padding="$5"
-        alignItems="center"
-        justifyContent="center"
-        flex={1}
-      >
+      <TabsContent value="tab3">
         <H5>Notifications</H5>
-      </Tabs.Content>
+      </TabsContent>
     </Tabs>
   )
 }
@@ -94,48 +93,56 @@ const VerticalTabs = () => {
       orientation="vertical"
       width={400}
       borderRadius="$4"
+      borderWidth="$0.25"
+      overflow="hidden"
+      borderColor="$borderColor"
     >
-      <Tabs.List disablePassBorderRadius="end" aria-label="Manage your account">
-        <Tabs.Trigger theme="Button" value="tab1">
+      <Tabs.List
+        disablePassBorderRadius="end"
+        aria-label="Manage your account"
+        separator={<Separator />}
+      >
+        <Tabs.Tab value="tab1">
           <SizableText>Profile</SizableText>
-        </Tabs.Trigger>
-        <Tabs.Trigger theme="Button" value="tab2">
+        </Tabs.Tab>
+        <Tabs.Tab value="tab2">
           <SizableText>Connections</SizableText>
-        </Tabs.Trigger>
-        <Tabs.Trigger theme="Button" value="tab3">
+        </Tabs.Tab>
+        <Tabs.Tab value="tab3">
           <SizableText>Notifications</SizableText>
-        </Tabs.Trigger>
+        </Tabs.Tab>
       </Tabs.List>
-      <Tabs.Content
-        value="tab1"
-        key="tab1"
-        padding="$2"
-        alignItems="center"
-        justifyContent="center"
-        flex={1}
-      >
+      <Separator vertical />
+      <TabsContent value="tab1">
         <H5 textAlign="center">Profile</H5>
-      </Tabs.Content>
-      <Tabs.Content
-        value="tab2"
-        key="tab2"
-        padding="$2"
-        alignItems="center"
-        justifyContent="center"
-        flex={1}
-      >
+      </TabsContent>
+      <TabsContent value="tab2">
         <H5 textAlign="center">Connections</H5>
-      </Tabs.Content>
-      <Tabs.Content
-        value="tab3"
-        key="tab3"
-        padding="$2"
-        alignItems="center"
-        justifyContent="center"
-        flex={1}
-      >
+      </TabsContent>
+      <TabsContent value="tab3">
         <H5 textAlign="center">Notifications</H5>
-      </Tabs.Content>
+      </TabsContent>
     </Tabs>
   )
 }
+
+const TabsContent = (props: TabsContentProps) => {
+  return (
+    <Tabs.Content
+      backgroundColor="$background"
+      key="tab3"
+      padding="$2"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+      borderColor="$background"
+      borderRadius="$2"
+      borderTopLeftRadius={0}
+      borderTopRightRadius={0}
+      borderWidth="$2"
+      {...props}
+    >
+      {props.children}
+    </Tabs.Content>
+  )
+}

package/types/TabsAdvancedDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsAdvancedDemo.d.ts","sourceRoot":"","sources":["../src/TabsAdvancedDemo.tsx"],"names":[],"mappings":";AAiBA,eAAO,MAAM,gBAAgB,mBAc5B,CAAA"}
+{"version":3,"file":"TabsAdvancedDemo.d.ts","sourceRoot":"","sources":["../src/TabsAdvancedDemo.tsx"],"names":[],"mappings":";AAqBA,eAAO,MAAM,gBAAgB,mBAc5B,CAAA"}

package/types/TabsDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsDemo.d.ts","sourceRoot":"","sources":["../src/TabsDemo.tsx"],"names":[],"mappings":";AAKA,wBAAgB,QAAQ,gBAuBvB"}
+{"version":3,"file":"TabsDemo.d.ts","sourceRoot":"","sources":["../src/TabsDemo.tsx"],"names":[],"mappings":";AAkBA,wBAAgB,QAAQ,gBAuBvB"}