@tamagui/demos 1.11.2 → 1.12.0

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  H5,\n  SizableText,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  TabsTriggerProps,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n\n  // Layout of the trigger user might intend to select (hovering / focusing)\n  const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)\n\n  // Layout of the trigger user selected\n  const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectIndicator\n    setSelectIndicator(newSize)\n  }\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (\n      !selectIndicator ||\n      !prevSelectionIndicatorLayout.current ||\n      selectIndicator.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectIndicator.x > prevSelectionIndicatorLayout.current.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      handleUpdateSelectionIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      size=\"$3\"\n      p=\"$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          overflow=\"visible\"\n          pb=\"$1.5\"\n        >\n          {intentIndicator && (\n            <TabsRovingIndicator\n              width={intentIndicator.width}\n              height={intentIndicator.height}\n              x={intentIndicator.x}\n              y={intentIndicator.y}\n            />\n          )}\n\n          {selectIndicator && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={selectIndicator.width}\n              height=\"$0.25\"\n              x={selectIndicator.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} o={1} f={1}>\n          <Tabs.Content value={currentTab} forceMount f={1} jc=\"center\">\n            <H5 ta=\"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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",
-  "names": []
+  "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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",
+  "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/jsx/TabsAdvancedDemo.mjs

@@ -1,33 +1,111 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 import {
   AnimatePresence,
+  Button,
   H5,
   SizableText,
   Stack,
   Tabs,
+  XStack,
   YStack,
   styled
 } from "tamagui";
+const demos = ["background", "underline"];
 const TabsAdvancedDemo = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [intentIndicator, setIntentIndicator] = useState(null);
-  const [selectIndicator, setSelectIndicator] = useState(null);
-  const prevSelectionIndicatorLayout = useRef(null);
-  const handleUpdateSelectionIndicator = (newSize) => {
-    prevSelectionIndicatorLayout.current = selectIndicator;
-    setSelectIndicator(newSize);
+  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({
+    activeAt: null,
+    currentTab: "tab1",
+    intentAt: null,
+    prevActiveAt: null
+  });
+  const setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 });
+  const setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 });
+  const setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 });
+  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
+  const direction = (() => {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+      return 0;
+    }
+    return activeAt.x > prevActiveAt.x ? -1 : 1;
+  })();
+  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
+  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
+  const handleOnInteraction = (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({
+    activeAt: null,
+    currentTab: "tab1",
+    intentAt: null,
+    prevActiveAt: null
+  });
+  const setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 });
+  const setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 });
+  const setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 });
+  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
   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 = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
   const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
   const handleOnInteraction = (type, layout) => {
     if (type === "select") {
-      handleUpdateSelectionIndicator(layout);
+      setActiveIndicator(layout);
     } else {
       setIntentIndicator(layout);
     }
@@ -36,9 +114,8 @@ const TabsAdvancedDemo = () => {
     value={currentTab}
     onValueChange={setCurrentTab}
     orientation="horizontal"
-    br="$4"
     size="$3"
-    p="$2"
+    padding="$2"
     height={150}
     flexDirection="column"
     activationMode="manual"
@@ -47,21 +124,23 @@ const TabsAdvancedDemo = () => {
       loop={false}
       aria-label="Manage your account"
       disablePassBorderRadius
-      overflow="visible"
-      pb="$1.5"
+      borderBottomLeftRadius={0}
+      borderBottomRightRadius={0}
+      paddingBottom="$1.5"
     >
-      {intentIndicator && <TabsRovingIndicator
-        width={intentIndicator.width}
-        height={intentIndicator.height}
-        x={intentIndicator.x}
-        y={intentIndicator.y}
+      {intentAt && <TabsRovingIndicator
+        width={intentAt.width}
+        height="$0.25"
+        x={intentAt.x}
+        borderRadius={0}
+        bottom={-3}
       />}
-      {selectIndicator && <TabsRovingIndicator
+      {activeAt && <TabsRovingIndicator
         theme="active"
         active
-        width={selectIndicator.width}
+        width={activeAt.width}
         height="$0.25"
-        x={selectIndicator.x}
+        x={activeAt.x}
         borderRadius={0}
         bottom={-3}
       />}
@@ -73,7 +152,7 @@ const TabsAdvancedDemo = () => {
       exitBeforeEnter
       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></Tabs.Content></AnimatedYStack></AnimatePresence>
+    ><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 TabsRovingIndicator = styled(Stack, {

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  H5,\n  SizableText,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  TabsTriggerProps,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n\n  // Layout of the trigger user might intend to select (hovering / focusing)\n  const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)\n\n  // Layout of the trigger user selected\n  const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectIndicator\n    setSelectIndicator(newSize)\n  }\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (\n      !selectIndicator ||\n      !prevSelectionIndicatorLayout.current ||\n      selectIndicator.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectIndicator.x > prevSelectionIndicatorLayout.current.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      handleUpdateSelectionIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      size=\"$3\"\n      p=\"$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          overflow=\"visible\"\n          pb=\"$1.5\"\n        >\n          {intentIndicator && (\n            <TabsRovingIndicator\n              width={intentIndicator.width}\n              height={intentIndicator.height}\n              x={intentIndicator.x}\n              y={intentIndicator.y}\n            />\n          )}\n\n          {selectIndicator && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={selectIndicator.width}\n              height=\"$0.25\"\n              x={selectIndicator.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} o={1} f={1}>\n          <Tabs.Content value={currentTab} forceMount f={1} jc=\"center\">\n            <H5 ta=\"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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",
-  "names": []
+  "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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",
+  "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/jsx/TabsDemo.js

@@ -1,13 +1,23 @@
 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"];
 function TabsDemo() {
   const [demoIndex, setDemoIndex] = useState(0);
   const demo = demos[demoIndex];
-  return <>
-    {demo === "horizontal" ? <HorizontalTabs /> : <VerticalTabs />}
-    <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: "none" }}><Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>{demo}</Button></XStack>
-  </>;
+  return (
+    // web only fix for position relative
+    <YStack paddingHorizontal="$4" position="unset">
+      {demo === "horizontal" ? <HorizontalTabs /> : <VerticalTabs />}
+      <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>
+  );
 }
 const HorizontalTabs = () => {
   return <Tabs
@@ -16,16 +26,37 @@ 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"><SizableText fontFamily="$body">Profile</SizableText></Tabs.Trigger>
-      <Tabs.Trigger theme="Button" f={1} value="tab2"><SizableText fontFamily="$body">Connections</SizableText></Tabs.Trigger>
-      <Tabs.Trigger theme="Button" f={1} value="tab3"><SizableText fontFamily="$body">Notifications</SizableText></Tabs.Trigger>
+      <Tabs.Trigger theme="Button" flex={1} value="tab1"><SizableText fontFamily="$body">Profile</SizableText></Tabs.Trigger>
+      <Tabs.Trigger theme="Button" flex={1} value="tab2"><SizableText fontFamily="$body">Connections</SizableText></Tabs.Trigger>
+      <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}><H5>Profile</H5></Tabs.Content>
-    <Tabs.Content value="tab2" key="tab2" p="$5" ai="center" jc="center" f={1}><H5>Connections</H5></Tabs.Content>
-    <Tabs.Content value="tab3" key="tab3" p="$5" ai="center" jc="center" f={1}><H5>Notifications</H5></Tabs.Content>
+    <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"
+      padding="$5"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+    ><H5>Connections</H5></Tabs.Content>
+    <Tabs.Content
+      value="tab3"
+      key="tab3"
+      padding="$5"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+    ><H5>Notifications</H5></Tabs.Content>
   </Tabs>;
 };
 const VerticalTabs = () => {
@@ -34,16 +65,37 @@ 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"><SizableText>Profile</SizableText></Tabs.Trigger>
       <Tabs.Trigger theme="Button" value="tab2"><SizableText>Connections</SizableText></Tabs.Trigger>
       <Tabs.Trigger theme="Button" value="tab3"><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>
-    <Tabs.Content value="tab2" key="tab2" p="$2" ai="center" jc="center" f={1}><H5 ta="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>
+    <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"
+      padding="$2"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+    ><H5 textAlign="center">Connections</H5></Tabs.Content>
+    <Tabs.Content
+      value="tab3"
+      key="tab3"
+      padding="$2"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+    ><H5 textAlign="center">Notifications</H5></Tabs.Content>
   </Tabs>;
 };
 export {

package/dist/jsx/TabsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    <>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\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          {demo}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      br=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" f={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Profile</H5>\n      </Tabs.Content>\n\n      <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Connections</H5>\n      </Tabs.Content>\n\n      <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$5\" ai=\"center\" jc=\"center\" f={1}>\n        <H5>Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      br=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" key=\"tab1\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Profile</H5>\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" key=\"tab2\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Connections</H5>\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" key=\"tab3\" p=\"$2\" ai=\"center\" jc=\"center\" f={1}>\n        <H5 ta=\"center\">Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,aAAa,MAAM,cAAc;AAEtD,MAAM,QAAQ,CAAC,cAAc,UAAU;AAEhC,SAAS,WAAW;AACzB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAE5B,SACE;AAAA,KACG,SAAS,eAAe,CAAC,eAAe,KAAK,CAAC,aAAa;AAAA,IAE5D,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,MAAM,EAAE,KAAK,OAAO,GACzE,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,IACxE,KACH,EAFC,OAGH,EAJC;AAAA,EAKH;AAEJ;AAEA,MAAM,iBAAiB,MAAM;AAC3B,SACE,CAAC;AAAA,IACC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG;AAAA;AAAA,IAEH,CAAC,KAAK,KAAK,wBAAwB,SAAS,WAAW;AAAA,MACrD,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,OAAO,EAAtC,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,WAAW,EAA1C,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,QAAQ,MAAM,SAAS,GAAG,GAAG,MAAM,OACvC,CAAC,YAAY,WAAW,QAAQ,aAAa,EAA5C,YACH,EAFC,KAAK;AAAA,IAGR,EAVC,KAAK;AAAA,IAYN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,OAAO,EAAV,GACH,EAFC,KAAK;AAAA,IAIN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,WAAW,EAAd,GACH,EAFC,KAAK;AAAA,IAIN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,aAAa,EAAhB,GACH,EAFC,KAAK;AAAA,EAGR,EA/BC;AAiCL;AAEA,MAAM,eAAe,MAAM;AACzB,SACE,CAAC;AAAA,IACC,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,GAAG;AAAA;AAAA,IAEH,CAAC,KAAK,KAAK,wBAAwB,MAAM,WAAW;AAAA,MAClD,CAAC,KAAK,QAAQ,MAAM,SAAS,MAAM,OACjC,CAAC,YAAY,OAAO,EAAnB,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,QAAQ,MAAM,SAAS,MAAM,OACjC,CAAC,YAAY,WAAW,EAAvB,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,QAAQ,MAAM,SAAS,MAAM,OACjC,CAAC,YAAY,aAAa,EAAzB,YACH,EAFC,KAAK;AAAA,IAGR,EAVC,KAAK;AAAA,IAWN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,GAAG,SAAS,OAAO,EAAtB,GACH,EAFC,KAAK;AAAA,IAGN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,GAAG,SAAS,WAAW,EAA1B,GACH,EAFC,KAAK;AAAA,IAGN,CAAC,KAAK,QAAQ,MAAM,OAAO,IAAI,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,GACtE,CAAC,GAAG,GAAG,SAAS,aAAa,EAA5B,GACH,EAFC,KAAK;AAAA,EAGR,EA3BC;AA6BL;",
+  "sourcesContent": ["import { useState } from 'react'\nimport { Button, H5, SizableText, Tabs, XStack, YStack } from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    // web only fix for position relative\n    <YStack paddingHorizontal=\"$4\" position={'unset' as any}>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack\n        alignItems=\"center\"\n        space\n        position=\"absolute\"\n        bottom=\"$3\"\n        left=\"$4\"\n        $xxs={{ display: 'none' }}\n      >\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demo}\n        </Button>\n      </XStack>\n    </YStack>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      borderRadius=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"bottom\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content\n        value=\"tab1\"\n        key=\"tab1\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Profile</H5>\n      </Tabs.Content>\n\n      <Tabs.Content\n        value=\"tab2\"\n        key=\"tab2\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Connections</H5>\n      </Tabs.Content>\n\n      <Tabs.Content\n        value=\"tab3\"\n        key=\"tab3\"\n        padding=\"$5\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5>Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      borderRadius=\"$4\"\n    >\n      <Tabs.List disablePassBorderRadius=\"end\" aria-label=\"Manage your account\">\n        <Tabs.Trigger theme=\"Button\" value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content\n        value=\"tab1\"\n        key=\"tab1\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Profile</H5>\n      </Tabs.Content>\n      <Tabs.Content\n        value=\"tab2\"\n        key=\"tab2\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Connections</H5>\n      </Tabs.Content>\n      <Tabs.Content\n        value=\"tab3\"\n        key=\"tab3\"\n        padding=\"$2\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n      >\n        <H5 textAlign=\"center\">Notifications</H5>\n      </Tabs.Content>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/TabsDemo.mjs

@@ -1,13 +1,23 @@
 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"];
 function TabsDemo() {
   const [demoIndex, setDemoIndex] = useState(0);
   const demo = demos[demoIndex];
-  return <>
-    {demo === "horizontal" ? <HorizontalTabs /> : <VerticalTabs />}
-    <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: "none" }}><Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>{demo}</Button></XStack>
-  </>;
+  return (
+    // web only fix for position relative
+    <YStack paddingHorizontal="$4" position="unset">
+      {demo === "horizontal" ? <HorizontalTabs /> : <VerticalTabs />}
+      <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>
+  );
 }
 const HorizontalTabs = () => {
   return <Tabs
@@ -16,16 +26,37 @@ 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"><SizableText fontFamily="$body">Profile</SizableText></Tabs.Trigger>
-      <Tabs.Trigger theme="Button" f={1} value="tab2"><SizableText fontFamily="$body">Connections</SizableText></Tabs.Trigger>
-      <Tabs.Trigger theme="Button" f={1} value="tab3"><SizableText fontFamily="$body">Notifications</SizableText></Tabs.Trigger>
+      <Tabs.Trigger theme="Button" flex={1} value="tab1"><SizableText fontFamily="$body">Profile</SizableText></Tabs.Trigger>
+      <Tabs.Trigger theme="Button" flex={1} value="tab2"><SizableText fontFamily="$body">Connections</SizableText></Tabs.Trigger>
+      <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}><H5>Profile</H5></Tabs.Content>
-    <Tabs.Content value="tab2" key="tab2" p="$5" ai="center" jc="center" f={1}><H5>Connections</H5></Tabs.Content>
-    <Tabs.Content value="tab3" key="tab3" p="$5" ai="center" jc="center" f={1}><H5>Notifications</H5></Tabs.Content>
+    <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"
+      padding="$5"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+    ><H5>Connections</H5></Tabs.Content>
+    <Tabs.Content
+      value="tab3"
+      key="tab3"
+      padding="$5"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+    ><H5>Notifications</H5></Tabs.Content>
   </Tabs>;
 };
 const VerticalTabs = () => {
@@ -34,16 +65,37 @@ 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"><SizableText>Profile</SizableText></Tabs.Trigger>
       <Tabs.Trigger theme="Button" value="tab2"><SizableText>Connections</SizableText></Tabs.Trigger>
       <Tabs.Trigger theme="Button" value="tab3"><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>
-    <Tabs.Content value="tab2" key="tab2" p="$2" ai="center" jc="center" f={1}><H5 ta="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>
+    <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"
+      padding="$2"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+    ><H5 textAlign="center">Connections</H5></Tabs.Content>
+    <Tabs.Content
+      value="tab3"
+      key="tab3"
+      padding="$2"
+      alignItems="center"
+      justifyContent="center"
+      flex={1}
+    ><H5 textAlign="center">Notifications</H5></Tabs.Content>
   </Tabs>;
 };
 export {