@tamagui/demos 1.14.0 → 1.14.2

package/dist/esm/TabsAdvancedDemo.js

@@ -1,2 +1,269 @@
-import{Fragment as V,jsx as t,jsxs as u}from"react/jsx-runtime";import{useState as f}from"react";import{AnimatePresence as T,Button as C,H5 as $,SizableText as v,Stack as L,Tabs as i,XStack as R,YStack as y,styled as k}from"tamagui";const S=["background","underline"],P={background:"Background Indicator",underline:"Underline Indicator"},D=()=>{const[a,o]=f(0),b=S[a];return u(V,{children:[b==="underline"?t(B,{}):t(z,{}),t(R,{ai:"center",space:!0,pos:"absolute",b:"$3",l:"$4",$xxs:{dsp:"none"},children:t(C,{size:"$2",onPress:()=>o(A=>(A+1)%S.length),children:P[b]})})]})},z=()=>{const[a,o]=f({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),b=n=>o({...a,currentTab:n}),A=n=>o({...a,intentAt:n}),h=n=>o({...a,prevActiveAt:a.activeAt,activeAt:n}),{activeAt:e,intentAt:r,prevActiveAt:l,currentTab:s}=a,c=(()=>!e||!l||e.x===l.x?0:e.x>l.x?-1:1)(),m=c===1?"isLeft":c===-1?"isRight":"defaultFade",p=c===1?"isRight":c===-1?"isLeft":"defaultFade",d=(n,x)=>{n==="select"?h(x):A(x)};return u(i,{value:s,onValueChange:b,orientation:"horizontal",size:"$4",padding:"$2",height:150,flexDirection:"column",activationMode:"manual",backgroundColor:"$background",borderRadius:"$4",position:"relative",children:[u(y,{children:[t(T,{children:r&&t(g,{borderRadius:"$4",width:r.width,height:r.height,x:r.x,y:r.y})}),t(T,{children:e&&t(g,{borderRadius:"$4",theme:"active",width:e.width,height:e.height,x:e.x,y:e.y})}),u(i.List,{disablePassBorderRadius:!0,loop:!1,"aria-label":"Manage your account",space:"$2",backgroundColor:"transparent",children:[t(i.Tab,{unstyled:!0,value:"tab1",onInteraction:d,children:t(v,{children:"Profile"})}),t(i.Tab,{unstyled:!0,value:"tab2",onInteraction:d,children:t(v,{children:"Connections"})}),t(i.Tab,{unstyled:!0,value:"tab3",onInteraction:d,children:t(v,{children:"Notifications"})})]})]}),t(T,{exitBeforeEnter:!0,enterVariant:m,exitVariant:p,children:t(I,{animation:"100ms",x:0,opacity:1,flex:1,children:t(i.Content,{value:s,forceMount:!0,flex:1,justifyContent:"center",children:t($,{textAlign:"center",children:s})})},s)})]})},B=()=>{const[a,o]=f({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),b=n=>o({...a,currentTab:n}),A=n=>o({...a,intentAt:n}),h=n=>o({...a,prevActiveAt:a.activeAt,activeAt:n}),{activeAt:e,intentAt:r,prevActiveAt:l,currentTab:s}=a,c=(()=>!e||!l||e.x===l.x?0:e.x>l.x?-1:1)(),m=c===1?"isLeft":c===-1?"isRight":"defaultFade",p=c===1?"isRight":c===-1?"isLeft":"defaultFade",d=(n,x)=>{n==="select"?h(x):A(x)};return u(i,{value:s,onValueChange:b,orientation:"horizontal",size:"$4",height:150,flexDirection:"column",activationMode:"manual",backgroundColor:"$background",borderRadius:"$4",children:[u(y,{children:[t(T,{children:r&&t(g,{width:r.width,height:"$0.5",x:r.x,bottom:0})}),t(T,{children:e&&t(g,{theme:"active",active:!0,width:e.width,height:"$0.5",x:e.x,bottom:0})}),u(i.List,{disablePassBorderRadius:!0,loop:!1,"aria-label":"Manage your account",borderBottomLeftRadius:0,borderBottomRightRadius:0,paddingBottom:"$1.5",borderColor:"$color3",borderBottomWidth:"$0.5",backgroundColor:"transparent",children:[t(i.Tab,{unstyled:!0,padding:"$5",value:"tab1",onInteraction:d,children:t(v,{children:"Profile"})}),t(i.Tab,{unstyled:!0,padding:"$5",value:"tab2",onInteraction:d,children:t(v,{children:"Connections"})}),t(i.Tab,{unstyled:!0,padding:"$5",value:"tab3",onInteraction:d,children:t(v,{children:"Notifications"})})]})]}),t(T,{exitBeforeEnter:!0,enterVariant:m,exitVariant:p,children:t(I,{animation:"100ms",x:0,opacity:1,flex:1,children:t(i.Content,{value:s,forceMount:!0,flex:1,justifyContent:"center",children:t($,{textAlign:"center",children:s})})},s)})]})},g=k(L,{position:"absolute",backgroundColor:"$color5",opacity:.7,animation:"100ms",enterStyle:{opacity:0},exitStyle:{opacity:0},variants:{active:{true:{backgroundColor:"$color8",opacity:.6}}}}),I=k(y,{variants:{isLeft:{true:{x:-25,opacity:0}},isRight:{true:{x:25,opacity:0}},defaultFade:{true:{opacity:0}}}});export{D as TabsAdvancedDemo};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  AnimatePresence,
+  Button,
+  H5,
+  SizableText,
+  Stack,
+  Tabs,
+  XStack,
+  YStack,
+  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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    demo === "underline" ? /* @__PURE__ */ jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */ jsx(TabsAdvancedBackground, {}),
+    /* @__PURE__ */ jsx(XStack, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] }) })
+  ] });
+};
+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 /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      padding: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      position: "relative",
+      children: [
+        /* @__PURE__ */ jsxs(YStack, { children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              borderRadius: "$4",
+              width: intentAt.width,
+              height: intentAt.height,
+              x: intentAt.x,
+              y: intentAt.y
+            }
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              borderRadius: "$4",
+              theme: "active",
+              width: activeAt.width,
+              height: activeAt.height,
+              x: activeAt.x,
+              y: activeAt.y
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            Tabs.List,
+            {
+              disablePassBorderRadius: true,
+              loop: false,
+              "aria-label": "Manage your account",
+              space: "$2",
+              backgroundColor: "transparent",
+              children: [
+                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab1", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
+                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab2", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
+                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab3", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+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 (!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 /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      children: [
+        /* @__PURE__ */ jsxs(YStack, { children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              width: intentAt.width,
+              height: "$0.5",
+              x: intentAt.x,
+              bottom: 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              theme: "active",
+              active: true,
+              width: activeAt.width,
+              height: "$0.5",
+              x: activeAt.x,
+              bottom: 0
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            Tabs.List,
+            {
+              disablePassBorderRadius: true,
+              loop: false,
+              "aria-label": "Manage your account",
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              paddingBottom: "$1.5",
+              borderColor: "$color3",
+              borderBottomWidth: "$0.5",
+              backgroundColor: "transparent",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Tabs.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    value: "tab1",
+                    onInteraction: handleOnInteraction,
+                    children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Tabs.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    value: "tab2",
+                    onInteraction: handleOnInteraction,
+                    children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Tabs.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    value: "tab3",
+                    onInteraction: handleOnInteraction,
+                    children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" })
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+const TabsRovingIndicator = styled(Stack, {
+  position: "absolute",
+  backgroundColor: "$color5",
+  opacity: 0.7,
+  animation: "100ms",
+  enterStyle: {
+    opacity: 0
+  },
+  exitStyle: {
+    opacity: 0
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color8",
+        opacity: 0.6
+      }
+    }
+  }
+});
+const AnimatedYStack = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -25, opacity: 0 } },
+    isRight: { true: { x: 25, opacity: 0 } },
+    defaultFade: { true: { opacity: 0 } }
+  }
+});
+export {
+  TabsAdvancedDemo
+};
 //# sourceMappingURL=TabsAdvancedDemo.js.map

package/dist/esm/TabsAdvancedDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
   "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": ["Fragment", "jsx", "jsxs", "useState", "AnimatePresence", "Button", "H5", "SizableText", "Stack", "Tabs", "XStack", "YStack", "styled", "demos", "demosTitle", "TabsAdvancedDemo", "demoIndex", "setDemoIndex", "demo", "TabsAdvancedUnderline", "TabsAdvancedBackground", "x", "tabState", "setTabState", "setCurrentTab", "currentTab", "setIntentIndicator", "intentAt", "setActiveIndicator", "activeAt", "prevActiveAt", "direction", "enterVariant", "exitVariant", "handleOnInteraction", "type", "layout", "TabsRovingIndicator", "AnimatedYStack"]
+  "mappings": "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",
+  "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/esm/TabsAdvancedDemo.mjs

@@ -1,2 +1,269 @@
-import{Fragment as V,jsx as t,jsxs as u}from"react/jsx-runtime";import{useState as f}from"react";import{AnimatePresence as T,Button as C,H5 as $,SizableText as v,Stack as L,Tabs as i,XStack as R,YStack as y,styled as k}from"tamagui";const S=["background","underline"],P={background:"Background Indicator",underline:"Underline Indicator"},D=()=>{const[a,o]=f(0),b=S[a];return u(V,{children:[b==="underline"?t(B,{}):t(z,{}),t(R,{ai:"center",space:!0,pos:"absolute",b:"$3",l:"$4",$xxs:{dsp:"none"},children:t(C,{size:"$2",onPress:()=>o(A=>(A+1)%S.length),children:P[b]})})]})},z=()=>{const[a,o]=f({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),b=n=>o({...a,currentTab:n}),A=n=>o({...a,intentAt:n}),h=n=>o({...a,prevActiveAt:a.activeAt,activeAt:n}),{activeAt:e,intentAt:r,prevActiveAt:l,currentTab:s}=a,c=(()=>!e||!l||e.x===l.x?0:e.x>l.x?-1:1)(),m=c===1?"isLeft":c===-1?"isRight":"defaultFade",p=c===1?"isRight":c===-1?"isLeft":"defaultFade",d=(n,x)=>{n==="select"?h(x):A(x)};return u(i,{value:s,onValueChange:b,orientation:"horizontal",size:"$4",padding:"$2",height:150,flexDirection:"column",activationMode:"manual",backgroundColor:"$background",borderRadius:"$4",position:"relative",children:[u(y,{children:[t(T,{children:r&&t(g,{borderRadius:"$4",width:r.width,height:r.height,x:r.x,y:r.y})}),t(T,{children:e&&t(g,{borderRadius:"$4",theme:"active",width:e.width,height:e.height,x:e.x,y:e.y})}),u(i.List,{disablePassBorderRadius:!0,loop:!1,"aria-label":"Manage your account",space:"$2",backgroundColor:"transparent",children:[t(i.Tab,{unstyled:!0,value:"tab1",onInteraction:d,children:t(v,{children:"Profile"})}),t(i.Tab,{unstyled:!0,value:"tab2",onInteraction:d,children:t(v,{children:"Connections"})}),t(i.Tab,{unstyled:!0,value:"tab3",onInteraction:d,children:t(v,{children:"Notifications"})})]})]}),t(T,{exitBeforeEnter:!0,enterVariant:m,exitVariant:p,children:t(I,{animation:"100ms",x:0,opacity:1,flex:1,children:t(i.Content,{value:s,forceMount:!0,flex:1,justifyContent:"center",children:t($,{textAlign:"center",children:s})})},s)})]})},B=()=>{const[a,o]=f({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),b=n=>o({...a,currentTab:n}),A=n=>o({...a,intentAt:n}),h=n=>o({...a,prevActiveAt:a.activeAt,activeAt:n}),{activeAt:e,intentAt:r,prevActiveAt:l,currentTab:s}=a,c=(()=>!e||!l||e.x===l.x?0:e.x>l.x?-1:1)(),m=c===1?"isLeft":c===-1?"isRight":"defaultFade",p=c===1?"isRight":c===-1?"isLeft":"defaultFade",d=(n,x)=>{n==="select"?h(x):A(x)};return u(i,{value:s,onValueChange:b,orientation:"horizontal",size:"$4",height:150,flexDirection:"column",activationMode:"manual",backgroundColor:"$background",borderRadius:"$4",children:[u(y,{children:[t(T,{children:r&&t(g,{width:r.width,height:"$0.5",x:r.x,bottom:0})}),t(T,{children:e&&t(g,{theme:"active",active:!0,width:e.width,height:"$0.5",x:e.x,bottom:0})}),u(i.List,{disablePassBorderRadius:!0,loop:!1,"aria-label":"Manage your account",borderBottomLeftRadius:0,borderBottomRightRadius:0,paddingBottom:"$1.5",borderColor:"$color3",borderBottomWidth:"$0.5",backgroundColor:"transparent",children:[t(i.Tab,{unstyled:!0,padding:"$5",value:"tab1",onInteraction:d,children:t(v,{children:"Profile"})}),t(i.Tab,{unstyled:!0,padding:"$5",value:"tab2",onInteraction:d,children:t(v,{children:"Connections"})}),t(i.Tab,{unstyled:!0,padding:"$5",value:"tab3",onInteraction:d,children:t(v,{children:"Notifications"})})]})]}),t(T,{exitBeforeEnter:!0,enterVariant:m,exitVariant:p,children:t(I,{animation:"100ms",x:0,opacity:1,flex:1,children:t(i.Content,{value:s,forceMount:!0,flex:1,justifyContent:"center",children:t($,{textAlign:"center",children:s})})},s)})]})},g=k(L,{position:"absolute",backgroundColor:"$color5",opacity:.7,animation:"100ms",enterStyle:{opacity:0},exitStyle:{opacity:0},variants:{active:{true:{backgroundColor:"$color8",opacity:.6}}}}),I=k(y,{variants:{isLeft:{true:{x:-25,opacity:0}},isRight:{true:{x:25,opacity:0}},defaultFade:{true:{opacity:0}}}});export{D as TabsAdvancedDemo};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  AnimatePresence,
+  Button,
+  H5,
+  SizableText,
+  Stack,
+  Tabs,
+  XStack,
+  YStack,
+  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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    demo === "underline" ? /* @__PURE__ */ jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */ jsx(TabsAdvancedBackground, {}),
+    /* @__PURE__ */ jsx(XStack, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] }) })
+  ] });
+};
+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 /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      padding: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      position: "relative",
+      children: [
+        /* @__PURE__ */ jsxs(YStack, { children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              borderRadius: "$4",
+              width: intentAt.width,
+              height: intentAt.height,
+              x: intentAt.x,
+              y: intentAt.y
+            }
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              borderRadius: "$4",
+              theme: "active",
+              width: activeAt.width,
+              height: activeAt.height,
+              x: activeAt.x,
+              y: activeAt.y
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            Tabs.List,
+            {
+              disablePassBorderRadius: true,
+              loop: false,
+              "aria-label": "Manage your account",
+              space: "$2",
+              backgroundColor: "transparent",
+              children: [
+                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab1", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" }) }),
+                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab2", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" }) }),
+                /* @__PURE__ */ jsx(Tabs.Tab, { unstyled: true, value: "tab3", onInteraction: handleOnInteraction, children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+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 (!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 /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      children: [
+        /* @__PURE__ */ jsxs(YStack, { children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              width: intentAt.width,
+              height: "$0.5",
+              x: intentAt.x,
+              bottom: 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(
+            TabsRovingIndicator,
+            {
+              theme: "active",
+              active: true,
+              width: activeAt.width,
+              height: "$0.5",
+              x: activeAt.x,
+              bottom: 0
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            Tabs.List,
+            {
+              disablePassBorderRadius: true,
+              loop: false,
+              "aria-label": "Manage your account",
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              paddingBottom: "$1.5",
+              borderColor: "$color3",
+              borderBottomWidth: "$0.5",
+              backgroundColor: "transparent",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Tabs.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    value: "tab1",
+                    onInteraction: handleOnInteraction,
+                    children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Tabs.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    value: "tab2",
+                    onInteraction: handleOnInteraction,
+                    children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Tabs.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    value: "tab3",
+                    onInteraction: handleOnInteraction,
+                    children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" })
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+const TabsRovingIndicator = styled(Stack, {
+  position: "absolute",
+  backgroundColor: "$color5",
+  opacity: 0.7,
+  animation: "100ms",
+  enterStyle: {
+    opacity: 0
+  },
+  exitStyle: {
+    opacity: 0
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color8",
+        opacity: 0.6
+      }
+    }
+  }
+});
+const AnimatedYStack = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -25, opacity: 0 } },
+    isRight: { true: { x: 25, opacity: 0 } },
+    defaultFade: { true: { opacity: 0 } }
+  }
+});
+export {
+  TabsAdvancedDemo
+};
 //# sourceMappingURL=TabsAdvancedDemo.mjs.map