@tamagui/demos 1.12.0 → 1.12.2

package/dist/jsx/TabsAdvancedDemo.js

@@ -11,12 +11,16 @@ import {
   styled
 } from "tamagui";
 const demos = ["background", "underline"];
+const demosTitle = {
+  background: "Background Indicator",
+  underline: "Underline Indicator"
+};
 const TabsAdvancedDemo = () => {
   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>
+    <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: "none" }}><Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>{demosTitle[demo]}</Button></XStack>
   </>;
 };
 const TabsAdvancedBackground = () => {
@@ -49,34 +53,43 @@ 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
+    <YStack>
+      <AnimatePresence>{intentAt && <TabsRovingIndicator
+        borderRadius="$4"
         width={intentAt.width}
         height={intentAt.height}
         x={intentAt.x}
         y={intentAt.y}
-      />}
-      {activeAt && <TabsRovingIndicator
+      />}</AnimatePresence>
+      <AnimatePresence>{activeAt && <TabsRovingIndicator
+        borderRadius="$4"
         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>
+      <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
       enterVariant={enterVariant}
@@ -114,40 +127,59 @@ 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"
-    >
-      {intentAt && <TabsRovingIndicator
+    <YStack>
+      <AnimatePresence>{intentAt && <TabsRovingIndicator
         width={intentAt.width}
-        height="$0.25"
+        height="$0.5"
         x={intentAt.x}
-        borderRadius={0}
-        bottom={-3}
-      />}
-      {activeAt && <TabsRovingIndicator
+        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}
-      />}
-      <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></YStack>
+        bottom={0}
+      />}</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.Tab>
+        <Tabs.Tab
+          unstyled
+          padding="$5"
+          value="tab2"
+          onInteraction={handleOnInteraction}
+        ><SizableText>Connections</SizableText></Tabs.Tab>
+        <Tabs.Tab
+          unstyled
+          padding="$5"
+          value="tab3"
+          onInteraction={handleOnInteraction}
+        ><SizableText>Notifications</SizableText></Tabs.Tab>
+      </Tabs.List>
+    </YStack>
     <AnimatePresence
       exitBeforeEnter
       enterVariant={enterVariant}
@@ -158,13 +190,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"
+        backgroundColor: "$color8",
+        opacity: 0.6
       }
     }
   }

package/dist/jsx/TabsAdvancedDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
-  "sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  TabsTriggerProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack alignItems=\"center\" space position=\"absolute\" bottom=\"$3\" left=\"$4\" $xxs={{ display: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the trigger user might intend to select (hovering / focusing)\n     */\n    intentAt: TabTriggerLayout | null\n    /**\n     * Layout of the trigger user selected\n     */\n    activeAt: TabTriggerLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabTriggerLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$3\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentAt && (\n          <TabsRovingIndicator\n            width={intentAt.width}\n            height={intentAt.height}\n            x={intentAt.x}\n            y={intentAt.y}\n          />\n        )}\n\n        {activeAt && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            width={activeAt.width}\n            height={activeAt.height}\n            x={activeAt.x}\n            y={activeAt.y}\n          />\n        )}\n\n        <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the trigger user might intend to select (hovering / focusing)\n     */\n    intentAt: TabTriggerLayout | null\n    /**\n     * Layout of the trigger user selected\n     */\n    activeAt: TabTriggerLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabTriggerLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$3\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n        <Tabs.List\n          loop={false}\n          aria-label=\"Manage your account\"\n          disablePassBorderRadius\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n        >\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.25\"\n              x={intentAt.x}\n              borderRadius={0}\n              bottom={-3}\n            />\n          )}\n\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.25\"\n              x={activeAt.x}\n              borderRadius={0}\n              bottom={-3}\n            />\n          )}\n\n          <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 1,\n  animation: '100ms',\n  borderRadius: '$4',\n\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabLayout,\n  Tabs,\n  TabsTabProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  background: 'Background Indicator',\n  underline: 'Underline Indicator',\n}\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n      position=\"relative\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              width={intentAt.width}\n              height={intentAt.height}\n              x={intentAt.x}\n              y={intentAt.y}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              theme=\"active\"\n              width={activeAt.width}\n              height={activeAt.height}\n              x={activeAt.x}\n              y={activeAt.y}\n            />\n          )}\n        </AnimatePresence>\n\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          space=\"$2\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab unstyled value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.5\"\n              x={intentAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.5\"\n              x={activeAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n          borderColor=\"$color3\"\n          borderBottomWidth=\"$0.5\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab1\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab2\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab3\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 0.7,\n  animation: '100ms',\n  enterStyle: {\n    opacity: 0,\n  },\n  exitStyle: {\n    opacity: 0,\n  },\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n        opacity: 0.6,\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
+  "mappings": "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",
   "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/jsx/TabsAdvancedDemo.mjs

@@ -11,12 +11,16 @@ import {
   styled
 } from "tamagui";
 const demos = ["background", "underline"];
+const demosTitle = {
+  background: "Background Indicator",
+  underline: "Underline Indicator"
+};
 const TabsAdvancedDemo = () => {
   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>
+    <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: "none" }}><Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>{demosTitle[demo]}</Button></XStack>
   </>;
 };
 const TabsAdvancedBackground = () => {
@@ -49,34 +53,43 @@ 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
+    <YStack>
+      <AnimatePresence>{intentAt && <TabsRovingIndicator
+        borderRadius="$4"
         width={intentAt.width}
         height={intentAt.height}
         x={intentAt.x}
         y={intentAt.y}
-      />}
-      {activeAt && <TabsRovingIndicator
+      />}</AnimatePresence>
+      <AnimatePresence>{activeAt && <TabsRovingIndicator
+        borderRadius="$4"
         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>
+      <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
       enterVariant={enterVariant}
@@ -114,40 +127,59 @@ 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"
-    >
-      {intentAt && <TabsRovingIndicator
+    <YStack>
+      <AnimatePresence>{intentAt && <TabsRovingIndicator
         width={intentAt.width}
-        height="$0.25"
+        height="$0.5"
         x={intentAt.x}
-        borderRadius={0}
-        bottom={-3}
-      />}
-      {activeAt && <TabsRovingIndicator
+        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}
-      />}
-      <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></YStack>
+        bottom={0}
+      />}</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.Tab>
+        <Tabs.Tab
+          unstyled
+          padding="$5"
+          value="tab2"
+          onInteraction={handleOnInteraction}
+        ><SizableText>Connections</SizableText></Tabs.Tab>
+        <Tabs.Tab
+          unstyled
+          padding="$5"
+          value="tab3"
+          onInteraction={handleOnInteraction}
+        ><SizableText>Notifications</SizableText></Tabs.Tab>
+      </Tabs.List>
+    </YStack>
     <AnimatePresence
       exitBeforeEnter
       enterVariant={enterVariant}
@@ -158,13 +190,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"
+        backgroundColor: "$color8",
+        opacity: 0.6
       }
     }
   }

package/dist/jsx/TabsAdvancedDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
-  "sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  TabsTriggerProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack alignItems=\"center\" space position=\"absolute\" bottom=\"$3\" left=\"$4\" $xxs={{ display: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the trigger user might intend to select (hovering / focusing)\n     */\n    intentAt: TabTriggerLayout | null\n    /**\n     * Layout of the trigger user selected\n     */\n    activeAt: TabTriggerLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabTriggerLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$3\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentAt && (\n          <TabsRovingIndicator\n            width={intentAt.width}\n            height={intentAt.height}\n            x={intentAt.x}\n            y={intentAt.y}\n          />\n        )}\n\n        {activeAt && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            width={activeAt.width}\n            height={activeAt.height}\n            x={activeAt.x}\n            y={activeAt.y}\n          />\n        )}\n\n        <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the trigger user might intend to select (hovering / focusing)\n     */\n    intentAt: TabTriggerLayout | null\n    /**\n     * Layout of the trigger user selected\n     */\n    activeAt: TabTriggerLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabTriggerLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTriggerProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$3\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n        <Tabs.List\n          loop={false}\n          aria-label=\"Manage your account\"\n          disablePassBorderRadius\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n        >\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.25\"\n              x={intentAt.x}\n              borderRadius={0}\n              bottom={-3}\n            />\n          )}\n\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.25\"\n              x={activeAt.x}\n              borderRadius={0}\n              bottom={-3}\n            />\n          )}\n\n          <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 1,\n  animation: '100ms',\n  borderRadius: '$4',\n\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabLayout,\n  Tabs,\n  TabsTabProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  background: 'Background Indicator',\n  underline: 'Underline Indicator',\n}\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n      position=\"relative\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              width={intentAt.width}\n              height={intentAt.height}\n              x={intentAt.x}\n              y={intentAt.y}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              theme=\"active\"\n              width={activeAt.width}\n              height={activeAt.height}\n              x={activeAt.x}\n              y={activeAt.y}\n            />\n          )}\n        </AnimatePresence>\n\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          space=\"$2\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab unstyled value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.5\"\n              x={intentAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.5\"\n              x={activeAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n          borderColor=\"$color3\"\n          borderBottomWidth=\"$0.5\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab1\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab2\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab3\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 0.7,\n  animation: '100ms',\n  enterStyle: {\n    opacity: 0,\n  },\n  exitStyle: {\n    opacity: 0,\n  },\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n        opacity: 0.6,\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
+  "mappings": "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",
   "names": ["currentTab", "intentAt", "activeAt"]
 }