@tamagui/demos 1.15.24 → 1.15.25

package/dist/esm/TabsAnimatedDemo.mjs

@@ -1,143 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AnimatePresence, H5, Tabs, XStack, YStack } from "tamagui";
-function TabsAnimatedDemo() {
-  return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", children: /* @__PURE__ */ jsxs(XStack, { space: "$3", px: "$8", children: [
-    /* @__PURE__ */ jsx(UnderlineTabs, {}),
-    /* @__PURE__ */ jsx(HighlightTabs, {})
-  ] }) });
-}
-const UnderlineTabs = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [direction, setDirection] = useState(0);
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      onDirectionChange: setDirection,
-      orientation: "vertical",
-      width: 300,
-      br: "$4",
-      ai: "center",
-      children: [
-        /* @__PURE__ */ jsx(YStack, { borderColor: "$color3", borderRightWidth: "$0.5", mr: "$2", children: /* @__PURE__ */ jsxs(YStack, { children: [
-          /* @__PURE__ */ jsx(
-            Tabs.RovingIndicator,
-            {
-              highlightMode: "hoverOrFocus",
-              width: "$0.5",
-              right: 0,
-              animation: "100ms"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tabs.RovingIndicator,
-            {
-              highlightMode: "select",
-              width: "$0.5",
-              right: 0,
-              animation: "100ms"
-            }
-          ),
-          /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Manage your account", flexDirection: "column", children: [
-            /* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab1", children: "Profile" }),
-            /* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab2", children: "Connections" }),
-            /* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab3", children: "Notifications" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: true, children: /* @__PURE__ */ jsx(
-          Tabs.Content,
-          {
-            value: currentTab,
-            forceMount: true,
-            p: "$2",
-            animation: "100ms",
-            o: 1,
-            y: 0,
-            f: 1,
-            enterStyle: {
-              ...direction === -1 ? { y: -25 } : {},
-              ...direction === 1 ? { y: 25 } : {},
-              opacity: 0
-            },
-            exitStyle: {
-              ...direction === -1 ? { y: 25 } : {},
-              ...direction === 1 ? { y: -25 } : {},
-              opacity: 0
-            },
-            children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab })
-          },
-          currentTab
-        ) })
-      ]
-    }
-  );
-};
-const HighlightTabs = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [direction, setDirection] = useState(0);
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      onDirectionChange: setDirection,
-      orientation: "horizontal",
-      br: "$4",
-      flexDirection: "column",
-      children: [
-        /* @__PURE__ */ jsxs(YStack, { children: [
-          /* @__PURE__ */ jsx(
-            Tabs.RovingIndicator,
-            {
-              highlightMode: "hoverOrFocus",
-              borderRadius: "$4",
-              animation: "100ms"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tabs.RovingIndicator,
-            {
-              highlightMode: "select",
-              borderRadius: "$4",
-              animation: "100ms"
-            }
-          ),
-          /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Manage your account", children: [
-            /* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab1", children: "Profile" }),
-            /* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab2", children: "Connections" }),
-            /* @__PURE__ */ jsx(Tabs.Trigger, { unstyled: true, color: "$color12", value: "tab3", children: "Notifications" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: true, children: /* @__PURE__ */ jsx(
-          Tabs.Content,
-          {
-            value: currentTab,
-            forceMount: true,
-            p: "$2",
-            animation: "100ms",
-            o: 1,
-            x: 0,
-            enterStyle: {
-              ...direction === -1 ? { x: -25 } : {},
-              ...direction === 1 ? { x: 25 } : {},
-              opacity: 0
-            },
-            exitStyle: {
-              ...direction === -1 ? { x: 25 } : {},
-              ...direction === 1 ? { x: -25 } : {},
-              opacity: 0
-            },
-            children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab })
-          },
-          currentTab
-        ) })
-      ]
-    }
-  );
-};
-export {
-  TabsAnimatedDemo
-};
-//# sourceMappingURL=TabsAnimatedDemo.mjs.map

package/dist/esm/TabsAnimatedDemo.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/TabsAnimatedDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport { AnimatePresence, H5, Tabs, XStack, YStack } from 'tamagui'\n\nexport function TabsAnimatedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\">\n      <XStack space=\"$3\" px=\"$8\">\n        <UnderlineTabs />\n        <HighlightTabs />\n      </XStack>\n    </XStack>\n  )\n}\n\nconst UnderlineTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"vertical\"\n      width={300}\n      br=\"$4\"\n      ai=\"center\"\n    >\n      <YStack borderColor=\"$color3\" borderRightWidth=\"$0.5\" mr=\"$2\">\n        <YStack>\n          <Tabs.RovingIndicator\n            highlightMode=\"hoverOrFocus\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.RovingIndicator\n            highlightMode=\"select\"\n            width=\"$0.5\"\n            right={0}\n            animation=\"100ms\"\n          />\n          <Tabs.List aria-label=\"Manage your account\" flexDirection=\"column\">\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n              Profile\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n              Connections\n            </Tabs.Trigger>\n            <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n              Notifications\n            </Tabs.Trigger>\n          </Tabs.List>\n        </YStack>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          y={0}\n          f={1}\n          enterStyle={{\n            ...(direction === -1 ? { y: -25 } : {}),\n            ...(direction === 1 ? { y: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { y: 25 } : {}),\n            ...(direction === 1 ? { y: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [direction, setDirection] = useState<-1 | 0 | 1>(0)\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      onDirectionChange={setDirection}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      flexDirection=\"column\"\n    >\n      <YStack>\n        <Tabs.RovingIndicator\n          highlightMode=\"hoverOrFocus\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.RovingIndicator\n          highlightMode=\"select\"\n          borderRadius=\"$4\"\n          animation=\"100ms\"\n        />\n        <Tabs.List aria-label=\"Manage your account\">\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab1\">\n            Profile\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab2\">\n            Connections\n          </Tabs.Trigger>\n          <Tabs.Trigger unstyled color=\"$color12\" value=\"tab3\">\n            Notifications\n          </Tabs.Trigger>\n        </Tabs.List>\n      </YStack>\n      <AnimatePresence exitBeforeEnter>\n        <Tabs.Content\n          value={currentTab}\n          key={currentTab}\n          forceMount\n          p=\"$2\"\n          animation=\"100ms\"\n          o={1}\n          x={0}\n          enterStyle={{\n            ...(direction === -1 ? { x: -25 } : {}),\n            ...(direction === 1 ? { x: 25 } : {}),\n            opacity: 0,\n          }}\n          exitStyle={{\n            ...(direction === -1 ? { x: 25 } : {}),\n            ...(direction === 1 ? { x: -25 } : {}),\n            opacity: 0,\n          }}\n        >\n          <H5 ta=\"center\">{currentTab}</H5>\n        </Tabs.Content>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/esm/TabsHighlightedDemo.js

@@ -1,168 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from "react";
-import {
-  AnimatePresence,
-  H5,
-  Stack,
-  Tabs,
-  XStack,
-  YStack,
-  styled
-} from "tamagui";
-function TabsHighlightedDemo() {
-  return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", px: "$4", children: /* @__PURE__ */ jsx(HighlightTabs, {}) });
-}
-const TabsRovingIndicator = styled(Stack, {
-  name: "TabsRovingIndicator",
-  variants: {
-    active: {
-      true: {
-        backgroundColor: "$color8"
-      }
-    },
-    variants: {
-      active: {
-        true: {
-          backgroundColor: "$color8"
-        }
-      },
-      enter: {
-        true: {
-          opacity: 0
-        }
-      },
-      exit: {
-        true: {
-          opacity: 0
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    position: "absolute",
-    backgroundColor: "$color5",
-    opacity: 1,
-    animation: "100ms",
-    borderRadius: "$4"
-  }
-});
-const AnimatedYStack = styled(YStack, {
-  variants: {
-    isLeft: { true: { x: -25, opacity: 0 } },
-    isRight: { true: { x: 25, opacity: 0 } }
-  }
-});
-const HighlightTabs = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [focusIndicatorLayout, setFocusIndicatorLayout] = useState(null);
-  const [hoverIndicatorLayout, setHoverIndicatorLayout] = useState(null);
-  const [selectionIndicatorLayout, setSelectionIndicatorLayout] = useState(null);
-  const prevSelectionIndicatorLayout = useRef(null);
-  const handleUpdateSelectionIndicator = (newSize) => {
-    prevSelectionIndicatorLayout.current = selectionIndicatorLayout;
-    setSelectionIndicatorLayout(newSize);
-  };
-  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout;
-  const direction = useMemo(() => {
-    if (!selectionIndicatorLayout || !prevSelectionIndicatorLayout.current || selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x) {
-      return 0;
-    }
-    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1;
-  }, [selectionIndicatorLayout]);
-  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : void 0;
-  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : void 0;
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      orientation: "horizontal",
-      br: "$4",
-      height: 150,
-      flexDirection: "column",
-      activationMode: "manual",
-      children: [
-        /* @__PURE__ */ jsxs(
-          Tabs.List,
-          {
-            scrollable: true,
-            loop: false,
-            "aria-label": "Manage your account",
-            disablePassBorderRadius: true,
-            children: [
-              intentIndicatorLayout && /* @__PURE__ */ jsx(
-                TabsRovingIndicator,
-                {
-                  width: intentIndicatorLayout.width,
-                  height: intentIndicatorLayout.height,
-                  x: intentIndicatorLayout.x,
-                  y: intentIndicatorLayout.y
-                }
-              ),
-              selectionIndicatorLayout && /* @__PURE__ */ jsx(
-                TabsRovingIndicator,
-                {
-                  theme: "active",
-                  active: true,
-                  width: selectionIndicatorLayout.width,
-                  height: selectionIndicatorLayout.height,
-                  x: selectionIndicatorLayout.x,
-                  y: selectionIndicatorLayout.y
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tabs.Trigger,
-                {
-                  unstyled: true,
-                  color: "$color12",
-                  value: "tab1",
-                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
-                  onHoveredLayoutChange: setHoverIndicatorLayout,
-                  onFocusedLayoutChange: setFocusIndicatorLayout,
-                  children: "Profile"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tabs.Trigger,
-                {
-                  unstyled: true,
-                  color: "$color12",
-                  value: "tab2",
-                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
-                  onHoveredLayoutChange: setHoverIndicatorLayout,
-                  onFocusedLayoutChange: setFocusIndicatorLayout,
-                  children: "Connections"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tabs.Trigger,
-                {
-                  unstyled: true,
-                  color: "$color12",
-                  value: "tab3",
-                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
-                  onHoveredLayoutChange: setHoverIndicatorLayout,
-                  onFocusedLayoutChange: setFocusIndicatorLayout,
-                  children: "Notifications"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AnimatePresence,
-          {
-            exitBeforeEnter: true,
-            enterVariant,
-            exitVariant,
-            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, o: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, p: "$2", children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab }) }) }, currentTab)
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  TabsHighlightedDemo
-};
-//# sourceMappingURL=TabsHighlightedDemo.js.map

package/dist/esm/TabsHighlightedDemo.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/TabsHighlightedDemo.tsx"],
-  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        scrollable\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={selectionIndicatorLayout.height}\n            x={selectionIndicatorLayout.x}\n            y={selectionIndicatorLayout.y}\n          />\n        )}\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\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} o={1}>\n          <Tabs.Content value={currentTab} forceMount p=\"$2\">\n            <H5 ta=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/esm/TabsHighlightedDemo.mjs

@@ -1,168 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from "react";
-import {
-  AnimatePresence,
-  H5,
-  Stack,
-  Tabs,
-  XStack,
-  YStack,
-  styled
-} from "tamagui";
-function TabsHighlightedDemo() {
-  return /* @__PURE__ */ jsx(XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", px: "$4", children: /* @__PURE__ */ jsx(HighlightTabs, {}) });
-}
-const TabsRovingIndicator = styled(Stack, {
-  name: "TabsRovingIndicator",
-  variants: {
-    active: {
-      true: {
-        backgroundColor: "$color8"
-      }
-    },
-    variants: {
-      active: {
-        true: {
-          backgroundColor: "$color8"
-        }
-      },
-      enter: {
-        true: {
-          opacity: 0
-        }
-      },
-      exit: {
-        true: {
-          opacity: 0
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    position: "absolute",
-    backgroundColor: "$color5",
-    opacity: 1,
-    animation: "100ms",
-    borderRadius: "$4"
-  }
-});
-const AnimatedYStack = styled(YStack, {
-  variants: {
-    isLeft: { true: { x: -25, opacity: 0 } },
-    isRight: { true: { x: 25, opacity: 0 } }
-  }
-});
-const HighlightTabs = () => {
-  const [currentTab, setCurrentTab] = useState("tab1");
-  const [focusIndicatorLayout, setFocusIndicatorLayout] = useState(null);
-  const [hoverIndicatorLayout, setHoverIndicatorLayout] = useState(null);
-  const [selectionIndicatorLayout, setSelectionIndicatorLayout] = useState(null);
-  const prevSelectionIndicatorLayout = useRef(null);
-  const handleUpdateSelectionIndicator = (newSize) => {
-    prevSelectionIndicatorLayout.current = selectionIndicatorLayout;
-    setSelectionIndicatorLayout(newSize);
-  };
-  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout;
-  const direction = useMemo(() => {
-    if (!selectionIndicatorLayout || !prevSelectionIndicatorLayout.current || selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x) {
-      return 0;
-    }
-    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1;
-  }, [selectionIndicatorLayout]);
-  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : void 0;
-  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : void 0;
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      orientation: "horizontal",
-      br: "$4",
-      height: 150,
-      flexDirection: "column",
-      activationMode: "manual",
-      children: [
-        /* @__PURE__ */ jsxs(
-          Tabs.List,
-          {
-            scrollable: true,
-            loop: false,
-            "aria-label": "Manage your account",
-            disablePassBorderRadius: true,
-            children: [
-              intentIndicatorLayout && /* @__PURE__ */ jsx(
-                TabsRovingIndicator,
-                {
-                  width: intentIndicatorLayout.width,
-                  height: intentIndicatorLayout.height,
-                  x: intentIndicatorLayout.x,
-                  y: intentIndicatorLayout.y
-                }
-              ),
-              selectionIndicatorLayout && /* @__PURE__ */ jsx(
-                TabsRovingIndicator,
-                {
-                  theme: "active",
-                  active: true,
-                  width: selectionIndicatorLayout.width,
-                  height: selectionIndicatorLayout.height,
-                  x: selectionIndicatorLayout.x,
-                  y: selectionIndicatorLayout.y
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tabs.Trigger,
-                {
-                  unstyled: true,
-                  color: "$color12",
-                  value: "tab1",
-                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
-                  onHoveredLayoutChange: setHoverIndicatorLayout,
-                  onFocusedLayoutChange: setFocusIndicatorLayout,
-                  children: "Profile"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tabs.Trigger,
-                {
-                  unstyled: true,
-                  color: "$color12",
-                  value: "tab2",
-                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
-                  onHoveredLayoutChange: setHoverIndicatorLayout,
-                  onFocusedLayoutChange: setFocusIndicatorLayout,
-                  children: "Connections"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tabs.Trigger,
-                {
-                  unstyled: true,
-                  color: "$color12",
-                  value: "tab3",
-                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
-                  onHoveredLayoutChange: setHoverIndicatorLayout,
-                  onFocusedLayoutChange: setFocusIndicatorLayout,
-                  children: "Notifications"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AnimatePresence,
-          {
-            exitBeforeEnter: true,
-            enterVariant,
-            exitVariant,
-            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, o: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: true, p: "$2", children: /* @__PURE__ */ jsx(H5, { ta: "center", children: currentTab }) }) }, currentTab)
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  TabsHighlightedDemo
-};
-//# sourceMappingURL=TabsHighlightedDemo.mjs.map

package/dist/esm/TabsHighlightedDemo.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/TabsHighlightedDemo.tsx"],
-  "sourcesContent": ["import { useMemo, useRef, useState } from 'react'\nimport {\n  AnimatePresence,\n  H5,\n  Stack,\n  TabTriggerLayout,\n  Tabs,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nexport function TabsHighlightedDemo() {\n  return (\n    <XStack maxHeight=\"100%\" maxWidth=\"100%\" justifyContent=\"flex-start\" px=\"$4\">\n      <HighlightTabs />\n    </XStack>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  name: 'TabsRovingIndicator',\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n      },\n    },\n    variants: {\n      active: {\n        true: {\n          backgroundColor: '$color8',\n        },\n      },\n      enter: {\n        true: {\n          opacity: 0,\n        },\n      },\n      exit: {\n        true: {\n          opacity: 0,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    position: 'absolute',\n    backgroundColor: '$color5',\n    opacity: 1,\n    animation: '100ms',\n    borderRadius: '$4',\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n  } as const,\n})\n\nconst HighlightTabs = () => {\n  const [currentTab, setCurrentTab] = useState('tab1')\n  const [focusIndicatorLayout, setFocusIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [hoverIndicatorLayout, setHoverIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const [selectionIndicatorLayout, setSelectionIndicatorLayout] =\n    useState<TabTriggerLayout | null>(null)\n  const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n  const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n    prevSelectionIndicatorLayout.current = selectionIndicatorLayout\n    setSelectionIndicatorLayout(newSize)\n  }\n\n  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout\n\n  /**\n   * -1: from left\n   * 0: n/a\n   * 1: from right\n   */\n  const direction = useMemo(() => {\n    if (\n      !selectionIndicatorLayout ||\n      !prevSelectionIndicatorLayout.current ||\n      selectionIndicatorLayout.x === prevSelectionIndicatorLayout.current.x\n    ) {\n      return 0\n    }\n    return selectionIndicatorLayout.x > prevSelectionIndicatorLayout.current.x ? 1 : -1\n  }, [selectionIndicatorLayout])\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : undefined\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : undefined\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      br=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List\n        scrollable\n        loop={false}\n        aria-label=\"Manage your account\"\n        disablePassBorderRadius\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={selectionIndicatorLayout.height}\n            x={selectionIndicatorLayout.x}\n            y={selectionIndicatorLayout.y}\n          />\n        )}\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab2\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Connections\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\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} o={1}>\n          <Tabs.Content value={currentTab} forceMount p=\"$2\">\n            <H5 ta=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n"],
-  "mappings": "AAeM,cA8FA,YA9FA;AAfN,SAAS,SAAS,QAAQ,gBAAgB;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,sBAAsB;AACpC,SACE,oBAAC,UAAO,WAAU,QAAO,UAAS,QAAO,gBAAe,cAAa,IAAG,MACtE,8BAAC,iBAAc,GACjB;AAEJ;AAEA,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,UACJ,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,UACJ,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AACF,CAAC;AAED,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EACpC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,IACvC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,EAAE;AAAA,EACzC;AACF,CAAC;AAED,MAAM,gBAAgB,MAAM;AAC1B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,MAAM;AACnD,QAAM,CAAC,sBAAsB,uBAAuB,IAClD,SAAkC,IAAI;AACxC,QAAM,CAAC,sBAAsB,uBAAuB,IAClD,SAAkC,IAAI;AACxC,QAAM,CAAC,0BAA0B,2BAA2B,IAC1D,SAAkC,IAAI;AACxC,QAAM,+BAA+B,OAAgC,IAAI;AACzE,QAAM,iCAAiC,CAAC,YAAqC;AAC3E,iCAA6B,UAAU;AACvC,gCAA4B,OAAO;AAAA,EACrC;AAEA,QAAM,wBAAwB,wBAAwB;AAOtD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QACE,CAAC,4BACD,CAAC,6BAA6B,WAC9B,yBAAyB,MAAM,6BAA6B,QAAQ,GACpE;AACA,aAAO;AAAA,IACT;AACA,WAAO,yBAAyB,IAAI,6BAA6B,QAAQ,IAAI,IAAI;AAAA,EACnF,GAAG,CAAC,wBAAwB,CAAC;AAE7B,QAAM,eACJ,cAAc,IAAI,WAAW,cAAc,KAAK,YAAY;AAC9D,QAAM,cACJ,cAAc,IAAI,YAAY,cAAc,KAAK,WAAW;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,IAAG;AAAA,MACH,QAAQ;AAAA,MACR,eAAc;AAAA,MACd,gBAAe;AAAA,MAEf;AAAA;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,YAAU;AAAA,YACV,MAAM;AAAA,YACN,cAAW;AAAA,YACX,yBAAuB;AAAA,YAEtB;AAAA,uCACC;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,sBAAsB;AAAA,kBAC7B,QAAQ,sBAAsB;AAAA,kBAC9B,GAAG,sBAAsB;AAAA,kBACzB,GAAG,sBAAsB;AAAA;AAAA,cAC3B;AAAA,cAED,4BACC;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAM;AAAA,kBACN,OAAO,yBAAyB;AAAA,kBAChC,QAAQ,yBAAyB;AAAA,kBACjC,GAAG,yBAAyB;AAAA,kBAC5B,GAAG,yBAAyB;AAAA;AAAA,cAC9B;AAAA,cAEF;AAAA,gBAAC,KAAK;AAAA,gBAAL;AAAA,kBACC,UAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,OAAM;AAAA,kBACN,wBAAwB;AAAA,kBACxB,uBAAuB;AAAA,kBACvB,uBAAuB;AAAA,kBACxB;AAAA;AAAA,cAED;AAAA,cACA;AAAA,gBAAC,KAAK;AAAA,gBAAL;AAAA,kBACC,UAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,OAAM;AAAA,kBACN,wBAAwB;AAAA,kBACxB,uBAAuB;AAAA,kBACvB,uBAAuB;AAAA,kBACxB;AAAA;AAAA,cAED;AAAA,cACA;AAAA,gBAAC,KAAK;AAAA,gBAAL;AAAA,kBACC,UAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,OAAM;AAAA,kBACN,wBAAwB;AAAA,kBACxB,uBAAuB;AAAA,kBACvB,uBAAuB;AAAA,kBACxB;AAAA;AAAA,cAED;AAAA;AAAA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,iBAAe;AAAA,YACf;AAAA,YACA;AAAA,YAEA,8BAAC,kBAAgC,WAAU,SAAQ,GAAG,GAAG,GAAG,GAC1D,8BAAC,KAAK,SAAL,EAAa,OAAO,YAAY,YAAU,MAAC,GAAE,MAC5C,8BAAC,MAAG,IAAG,UAAU,sBAAW,GAC9B,KAHmB,UAIrB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
-}