@tamagui/demos 1.6.3 → 1.7.0

package/dist/cjs/AnimationsPresenceDemo.js

@@ -37,9 +37,9 @@ var import_animate_presence = require("@tamagui/animate-presence");
 var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
-var import_photo1 = __toESM(require("../../public/photo1.jpg"), 1);
-var import_photo2 = __toESM(require("../../public/photo2.jpg"), 1);
-var import_photo3 = __toESM(require("../../public/photo3.jpg"), 1);
+var import_photo1 = __toESM(require("../../public/photo1.jpg"));
+var import_photo2 = __toESM(require("../../public/photo2.jpg"));
+var import_photo3 = __toESM(require("../../public/photo3.jpg"));
 const images = [import_photo1.default, import_photo2.default, import_photo3.default].map((x) => x.src || x);
 const YStackEnterable = (0, import_tamagui.styled)(import_tamagui.YStack, {
   variants: {

package/dist/cjs/LucideIconsDemo.js

@@ -32,7 +32,7 @@ __export(LucideIconsDemo_exports, {
 });
 module.exports = __toCommonJS(LucideIconsDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var LucideIcons = __toESM(require("@tamagui/lucide-icons"), 1);
+var LucideIcons = __toESM(require("@tamagui/lucide-icons"));
 var import_react = require("react");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");

package/dist/cjs/ProgressDemo.js

@@ -42,7 +42,7 @@ function ProgressDemo() {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress, { size: sizeProp, value: progress, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, { animation: "bouncy" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: true, pos: "absolute", b: 10, l: 20, $xxs: { dsp: "none" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_tamagui.Slider,
         {
@@ -56,7 +56,7 @@ function ProgressDemo() {
             setSize(val);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, { bw: 1, boc: "$color5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {}) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Thumb, { circular: true, index: 0 })
           ]
         }

package/dist/cjs/ProgressDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b={10} l={20} $xxs={{ dsp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track>\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBI;AAhBJ,mBAAoC;AACpC,qBAAgF;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,8BAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,iDAAC,yBAAO,GAAG,IAAI,IAAG,UAAS,OAAK,MAC9B;AAAA,mDAAC,4BAAU,GAAG,IAAI,GAAG,KAAK;AAAA;AAAA,QACjB;AAAA,SACT;AAAA,MACA,4CAAC,2BAAS,MAAM,UAAU,OAAO,UAC/B,sDAAC,wBAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAG,IAAI,GAAG,IAAI,MAAM,EAAE,KAAK,OAAO,GACzE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,wDAAC,sBAAO,OAAP,EACC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,YACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,4CAAC,yBAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track bw={1} boc=\"$color5\">\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBI;AAhBJ,mBAAoC;AACpC,qBAAgF;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,8BAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,iDAAC,yBAAO,GAAG,IAAI,IAAG,UAAS,OAAK,MAC9B;AAAA,mDAAC,4BAAU,GAAG,IAAI,GAAG,KAAK;AAAA;AAAA,QACjB;AAAA,SACT;AAAA,MACA,4CAAC,2BAAS,MAAM,UAAU,OAAO,UAC/B,sDAAC,wBAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAM,EAAE,KAAK,OAAO,GACzE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,wDAAC,sBAAO,OAAP,EAAa,IAAI,GAAG,KAAI,WACvB,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,YACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,4CAAC,yBAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/SliderDemo.js

@@ -32,7 +32,7 @@ function SliderDemo() {
 function SimpleSlider({ children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Slider, { defaultValue: [50], max: 100, step: 1, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Thumb, { bordered: true, circular: true, elevate: true, index: 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Thumb, { index: 0, circular: true, elevate: true }),
     children
   ] });
 }

package/dist/cjs/SliderDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAoD;AAE7C,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,QAAQ,KAAK,IAAG,UAAS,OAAM,MACrC;AAAA,gDAAC,gBAAa,QAAQ,KAAK,aAAY,YAAW;AAAA,IAClD,4CAAC,gBAAa,OAAO,KAAK;AAAA,KAC5B;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,6CAAC,yBAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,GAAI,GAAG,OACjD;AAAA,gDAAC,sBAAO,OAAP,EACC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,IACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,MAAC,UAAQ,MAAC,SAAO,MAAC,OAAO,GAAG;AAAA,IACjD;AAAA,KACH;AAEJ;",
+  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb index={0} circular elevate />\n      {children}\n    </Slider>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAoD;AAE7C,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,QAAQ,KAAK,IAAG,UAAS,OAAM,MACrC;AAAA,gDAAC,gBAAa,QAAQ,KAAK,aAAY,YAAW;AAAA,IAClD,4CAAC,gBAAa,OAAO,KAAK;AAAA,KAC5B;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,6CAAC,yBAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,GAAI,GAAG,OACjD;AAAA,gDAAC,sBAAO,OAAP,EACC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,IACA,4CAAC,sBAAO,OAAP,EAAa,OAAO,GAAG,UAAQ,MAAC,SAAO,MAAC;AAAA,IACxC;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/cjs/TabsAdvancedDemo.js

@@ -0,0 +1,138 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TabsAdvancedDemo_exports = {};
+__export(TabsAdvancedDemo_exports, {
+  TabsAdvancedDemo: () => TabsAdvancedDemo
+});
+module.exports = __toCommonJS(TabsAdvancedDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+const TabsAdvancedDemo = () => {
+  const [currentTab, setCurrentTab] = (0, import_react.useState)("tab1");
+  const [IntentIndicator, setIntentIndicator] = (0, import_react.useState)(null);
+  const [selectIndicator, setSelectIndicator] = (0, import_react.useState)(null);
+  const prevSelectionIndicatorLayout = (0, import_react.useRef)(null);
+  const handleUpdateSelectionIndicator = (newSize) => {
+    prevSelectionIndicatorLayout.current = selectIndicator;
+    setSelectIndicator(newSize);
+  };
+  const direction = (() => {
+    if (!selectIndicator || !prevSelectionIndicatorLayout.current || selectIndicator.x === prevSelectionIndicatorLayout.current.x) {
+      return 0;
+    }
+    return selectIndicator.x > prevSelectionIndicatorLayout.current.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);
+    } else {
+      setIntentIndicator(layout);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      br: "$4",
+      size: "$3",
+      p: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { borderColor: "$color3", borderBottomWidth: "$0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_tamagui.Tabs.List,
+          {
+            loop: false,
+            "aria-label": "Manage your account",
+            disablePassBorderRadius: true,
+            overflow: "visible",
+            pb: "$1.5",
+            children: [
+              IntentIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TabsRovingIndicator,
+                {
+                  width: IntentIndicator.width,
+                  height: IntentIndicator.height,
+                  x: IntentIndicator.x,
+                  y: IntentIndicator.y
+                }
+              ),
+              selectIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TabsRovingIndicator,
+                {
+                  theme: "active",
+                  active: true,
+                  width: selectIndicator.width,
+                  height: "$0.25",
+                  x: selectIndicator.x,
+                  borderRadius: 0,
+                  bottom: -3
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { value: "tab1", onInteraction: handleOnInteraction, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Profile" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { value: "tab2", onInteraction: handleOnInteraction, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Connections" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { value: "tab3", onInteraction: handleOnInteraction, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Notifications" }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { animation: "100ms", x: 0, o: 1, f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: true, f: 1, jc: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+const TabsRovingIndicator = (0, import_tamagui.styled)(import_tamagui.Stack, {
+  position: "absolute",
+  backgroundColor: "$color5",
+  opacity: 1,
+  animation: "100ms",
+  borderRadius: "$4",
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color8"
+      }
+    }
+  }
+});
+const AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
+  variants: {
+    isLeft: { true: { x: -25, opacity: 0 } },
+    isRight: { true: { x: 25, opacity: 0 } },
+    defaultFade: { true: { opacity: 0 } }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabsAdvancedDemo
+});
+//# sourceMappingURL=TabsAdvancedDemo.js.map

package/dist/cjs/TabsAdvancedDemo.js.map

@@ -0,0 +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": []
+}

package/dist/cjs/TabsDemo.js

@@ -0,0 +1,85 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TabsDemo_exports = {};
+__export(TabsDemo_exports, {
+  TabsDemo: () => TabsDemo
+});
+module.exports = __toCommonJS(TabsDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+const demos = ["horizontal", "vertical"];
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = (0, import_react.useState)(0);
+  const demo = demos[demoIndex];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    demo === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HorizontalTabs, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VerticalTabs, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demo }) })
+  ] });
+}
+const HorizontalTabs = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.Tabs,
+    {
+      defaultValue: "tab1",
+      orientation: "horizontal",
+      flexDirection: "column",
+      width: 400,
+      height: 150,
+      br: "$4",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, { disablePassBorderRadius: "bottom", "aria-label": "Manage your account", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", f: 1, value: "tab1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { fontFamily: "$body", children: "Profile" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", f: 1, value: "tab2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { fontFamily: "$body", children: "Connections" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", f: 1, value: "tab3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { fontFamily: "$body", children: "Notifications" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab1", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Profile" }) }, "tab1"),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab2", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Connections" }) }, "tab2"),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab3", p: "$5", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Notifications" }) }, "tab3")
+      ]
+    }
+  );
+};
+const VerticalTabs = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.Tabs,
+    {
+      defaultValue: "tab1",
+      flexDirection: "row",
+      orientation: "vertical",
+      width: 400,
+      br: "$4",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, { disablePassBorderRadius: "end", "aria-label": "Manage your account", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { fontFamily: "$body", children: "Profile" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { fontFamily: "$body", children: "Connections" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Trigger, { theme: "Button", value: "tab3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { fontFamily: "$body", children: "Notifications" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab1", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: "Profile" }) }, "tab1"),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab2", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: "Connections" }) }, "tab2"),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: "tab3", p: "$2", ai: "center", jc: "center", f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: "Notifications" }) }, "tab3")
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabsDemo
+});
+//# sourceMappingURL=TabsDemo.js.map

package/dist/cjs/TabsDemo.js.map

@@ -0,0 +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 fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Trigger>\n        <Tabs.Trigger theme=\"Button\" value=\"tab3\">\n          <SizableText fontFamily=\"$body\">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": "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",
+  "names": []
+}

package/dist/cjs/TabsHighlightedDemo.js

@@ -0,0 +1,188 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TabsHighlightedDemo_exports = {};
+__export(TabsHighlightedDemo_exports, {
+  TabsHighlightedDemo: () => TabsHighlightedDemo
+});
+module.exports = __toCommonJS(TabsHighlightedDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+function TabsHighlightedDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { maxHeight: "100%", maxWidth: "100%", justifyContent: "flex-start", px: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HighlightTabs, {}) });
+}
+const TabsRovingIndicator = (0, import_tamagui.styled)(import_tamagui.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 = (0, import_tamagui.styled)(import_tamagui.YStack, {
+  variants: {
+    isLeft: { true: { x: -25, opacity: 0 } },
+    isRight: { true: { x: 25, opacity: 0 } }
+  }
+});
+const HighlightTabs = () => {
+  const [currentTab, setCurrentTab] = (0, import_react.useState)("tab1");
+  const [focusIndicatorLayout, setFocusIndicatorLayout] = (0, import_react.useState)(null);
+  const [hoverIndicatorLayout, setHoverIndicatorLayout] = (0, import_react.useState)(null);
+  const [selectionIndicatorLayout, setSelectionIndicatorLayout] = (0, import_react.useState)(null);
+  const prevSelectionIndicatorLayout = (0, import_react.useRef)(null);
+  const handleUpdateSelectionIndicator = (newSize) => {
+    prevSelectionIndicatorLayout.current = selectionIndicatorLayout;
+    setSelectionIndicatorLayout(newSize);
+  };
+  const intentIndicatorLayout = hoverIndicatorLayout || focusIndicatorLayout;
+  const direction = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      br: "$4",
+      p: "$2",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_tamagui.Tabs.List,
+          {
+            loop: false,
+            "aria-label": "Manage your account",
+            disablePassBorderRadius: true,
+            overflow: "visible",
+            children: [
+              intentIndicatorLayout && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TabsRovingIndicator,
+                {
+                  width: intentIndicatorLayout.width,
+                  height: intentIndicatorLayout.height,
+                  x: intentIndicatorLayout.x,
+                  y: intentIndicatorLayout.y
+                }
+              ),
+              selectionIndicatorLayout && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TabsRovingIndicator,
+                {
+                  theme: "active",
+                  active: true,
+                  width: selectionIndicatorLayout.width,
+                  height: 2,
+                  x: selectionIndicatorLayout.x,
+                  y: 40
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_tamagui.Tabs.Trigger,
+                {
+                  unstyled: true,
+                  color: "$color12",
+                  value: "tab1",
+                  size: "$3",
+                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
+                  onHoveredLayoutChange: setHoverIndicatorLayout,
+                  onFocusedLayoutChange: setFocusIndicatorLayout,
+                  children: "Profile"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_tamagui.Tabs.Trigger,
+                {
+                  unstyled: true,
+                  color: "$color12",
+                  size: "$3",
+                  value: "tab2",
+                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
+                  onHoveredLayoutChange: setHoverIndicatorLayout,
+                  onFocusedLayoutChange: setFocusIndicatorLayout,
+                  children: "Connections"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_tamagui.Tabs.Trigger,
+                {
+                  unstyled: true,
+                  color: "$color12",
+                  size: "$3",
+                  value: "tab3",
+                  onSelectedLayoutChange: handleUpdateSelectionIndicator,
+                  onHoveredLayoutChange: setHoverIndicatorLayout,
+                  onFocusedLayoutChange: setFocusIndicatorLayout,
+                  children: "Notifications"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.AnimatePresence,
+          {
+            exitBeforeEnter: true,
+            enterVariant,
+            exitVariant,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedYStack, { animation: "100ms", x: 0, o: 1, f: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: true, p: "$2", f: 1, jc: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { ta: "center", children: currentTab }) }) }, currentTab)
+          }
+        ) })
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabsHighlightedDemo
+});
+//# sourceMappingURL=TabsHighlightedDemo.js.map

package/dist/cjs/TabsHighlightedDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "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      p=\"$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        overflow=\"visible\"\n      >\n        {intentIndicatorLayout && (\n          <TabsRovingIndicator\n            width={intentIndicatorLayout.width}\n            height={intentIndicatorLayout.height}\n            x={intentIndicatorLayout.x}\n            y={intentIndicatorLayout.y}\n          />\n        )}\n\n        {selectionIndicatorLayout && (\n          <TabsRovingIndicator\n            theme=\"active\"\n            active\n            width={selectionIndicatorLayout.width}\n            height={2}\n            x={selectionIndicatorLayout.x}\n            y={40}\n          />\n        )}\n\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          value=\"tab1\"\n          size=\"$3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Profile\n        </Tabs.Trigger>\n        <Tabs.Trigger\n          unstyled\n          color=\"$color12\"\n          size=\"$3\"\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          size=\"$3\"\n          value=\"tab3\"\n          onSelectedLayoutChange={handleUpdateSelectionIndicator}\n          onHoveredLayoutChange={setHoverIndicatorLayout}\n          onFocusedLayoutChange={setFocusIndicatorLayout}\n        >\n          Notifications\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <YStack f={1}>\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 p=\"$2\" f={1} jc=\"center\">\n              <H5 ta=\"center\">{currentTab}</H5>\n            </Tabs.Content>\n          </AnimatedYStack>\n        </AnimatePresence>\n      </YStack>\n    </Tabs>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}