@tamagui/demos 1.14.0 → 1.14.2

package/dist/cjs/StacksDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/StacksDemo.tsx"],
   "sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n  return (\n    <XStack maxWidth={250} padding=\"$2\" alignSelf=\"center\" space>\n      <YStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </YStack>\n\n      <XStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </XStack>\n\n      <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>\n        <YStack fullscreen borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack fullscreen y={10} x={10} borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack\n          fullscreen\n          y={20}\n          x={20}\n          borderWidth={2}\n          backgroundColor=\"$color\"\n          borderRadius=\"$4\"\n          padding=\"$2\"\n        />\n      </ZStack>\n    </XStack>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAMM,IAAAI,EAAA,6BALNC,EAAuC,mBAEhC,SAASH,GAAa,CAC3B,SACE,QAAC,UAAO,SAAU,IAAK,QAAQ,KAAK,UAAU,SAAS,MAAK,GAC1D,qBAAC,UACC,KAAM,EACN,MAAM,KACN,YAAa,EACb,YAAY,SACZ,aAAa,KACb,QAAQ,KAER,oBAAC,UAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,KAChE,OAAC,UAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,KAChE,OAAC,UAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,GAClE,KAEA,QAAC,UACC,KAAM,EACN,MAAM,KACN,YAAa,EACb,YAAY,SACZ,aAAa,KACb,QAAQ,KAER,oBAAC,UAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,KAChE,OAAC,UAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,KAChE,OAAC,UAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK,GAClE,KAEA,QAAC,UAAO,SAAU,GAAI,UAAW,GAAI,MAAO,IAAK,KAAM,EACrD,oBAAC,UAAO,WAAU,GAAC,YAAa,EAAG,aAAa,KAAK,QAAQ,KAAK,KAClE,OAAC,UAAO,WAAU,GAAC,EAAG,GAAI,EAAG,GAAI,YAAa,EAAG,aAAa,KAAK,QAAQ,KAAK,KAChF,OAAC,UACC,WAAU,GACV,EAAG,GACH,EAAG,GACH,YAAa,EACb,gBAAgB,SAChB,aAAa,KACb,QAAQ,KACV,GACF,GACF,CAEJ",
-  "names": ["StacksDemo_exports", "__export", "StacksDemo", "__toCommonJS", "import_jsx_runtime", "import_tamagui"]
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAAuC;AAEhC,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,UAAU,KAAK,SAAQ,MAAK,WAAU,UAAS,OAAK,MAC1D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,sDAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,sDAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA,6CAAC,yBAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM,GACrD;AAAA,kDAAC,yBAAO,YAAU,MAAC,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAClE,4CAAC,yBAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAChF;AAAA,QAAC;AAAA;AAAA,UACC,YAAU;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,cAAa;AAAA,UACb,SAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/cjs/SwitchDemo.js

@@ -1,2 +1,56 @@
-"use strict";var h=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var d=(t,i)=>{for(var s in i)h(t,s,{get:i[s],enumerable:!0})},l=(t,i,s,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let c of S(i))!r.call(t,c)&&c!==s&&h(t,c,{get:()=>i[c],enumerable:!(o=z(i,c))||o.enumerable});return t};var m=t=>l(h({},"__esModule",{value:!0}),t);var $={};d($,{SwitchDemo:()=>k});module.exports=m($);var e=require("react/jsx-runtime"),n=require("tamagui");function k(){return(0,e.jsxs)(n.YStack,{width:200,alignItems:"center",space:"$3",children:[(0,e.jsx)(a,{size:"$2"}),(0,e.jsx)(a,{size:"$3"}),(0,e.jsx)(a,{size:"$4"}),(0,e.jsx)(a,{size:"$5"})]})}function a(t){const i=`switch-${t.size.toString().slice(1)}`;return(0,e.jsxs)(n.XStack,{width:200,alignItems:"center",space:"$4",children:[(0,e.jsx)(n.Label,{paddingRight:"$0",minWidth:90,justifyContent:"flex-end",size:t.size,htmlFor:i,children:"Dark mode"}),(0,e.jsx)(n.Separator,{minHeight:20,vertical:!0}),(0,e.jsx)(n.Switch,{id:i,size:t.size,children:(0,e.jsx)(n.Switch.Thumb,{animation:"quick"})})]})}0&&(module.exports={SwitchDemo});
+"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 SwitchDemo_exports = {};
+__export(SwitchDemo_exports, {
+  SwitchDemo: () => SwitchDemo
+});
+module.exports = __toCommonJS(SwitchDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tamagui = require("tamagui");
+function SwitchDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { width: 200, alignItems: "center", space: "$3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$5" })
+  ] });
+}
+function SwitchWithLabel(props) {
+  const id = `switch-${props.size.toString().slice(1)}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { width: 200, alignItems: "center", space: "$4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Label,
+      {
+        paddingRight: "$0",
+        minWidth: 90,
+        justifyContent: "flex-end",
+        size: props.size,
+        htmlFor: id,
+        children: "Dark mode"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { minHeight: 20, vertical: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch, { id, size: props.size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, { animation: "quick" }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SwitchDemo
+});
 //# sourceMappingURL=SwitchDemo.js.map

package/dist/cjs/SwitchDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SwitchDemo.tsx"],
   "sourcesContent": ["import { Label, Separator, SizeTokens, Switch, XStack, YStack, styled } from 'tamagui'\n\nexport function SwitchDemo() {\n  return (\n    <YStack width={200} alignItems=\"center\" space=\"$3\">\n      <SwitchWithLabel size=\"$2\" />\n      <SwitchWithLabel size=\"$3\" />\n      <SwitchWithLabel size=\"$4\" />\n      <SwitchWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n  const id = `switch-${props.size.toString().slice(1)}`\n  return (\n    <XStack width={200} alignItems=\"center\" space=\"$4\">\n      <Label\n        paddingRight=\"$0\"\n        minWidth={90}\n        justifyContent=\"flex-end\"\n        size={props.size}\n        htmlFor={id}\n      >\n        Dark mode\n      </Label>\n      <Separator minHeight={20} vertical />\n      <Switch id={id} size={props.size}>\n        <Switch.Thumb animation=\"quick\" />\n      </Switch>\n    </XStack>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAII,IAAAI,EAAA,6BAJJC,EAA6E,mBAEtE,SAASH,GAAa,CAC3B,SACE,QAAC,UAAO,MAAO,IAAK,WAAW,SAAS,MAAM,KAC5C,oBAACI,EAAA,CAAgB,KAAK,KAAK,KAC3B,OAACA,EAAA,CAAgB,KAAK,KAAK,KAC3B,OAACA,EAAA,CAAgB,KAAK,KAAK,KAC3B,OAACA,EAAA,CAAgB,KAAK,KAAK,GAC7B,CAEJ,CAEA,SAASA,EAAgBC,EAA6B,CACpD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IAClD,SACE,QAAC,UAAO,MAAO,IAAK,WAAW,SAAS,MAAM,KAC5C,oBAAC,SACC,aAAa,KACb,SAAU,GACV,eAAe,WACf,KAAMA,EAAM,KACZ,QAASC,EACV,qBAED,KACA,OAAC,aAAU,UAAW,GAAI,SAAQ,GAAC,KACnC,OAAC,UAAO,GAAIA,EAAI,KAAMD,EAAM,KAC1B,mBAAC,SAAO,MAAP,CAAa,UAAU,QAAQ,EAClC,GACF,CAEJ",
-  "names": ["SwitchDemo_exports", "__export", "SwitchDemo", "__toCommonJS", "import_jsx_runtime", "import_tamagui", "SwitchWithLabel", "props", "id"]
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA6E;AAEtE,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,KAC7B;AAEJ;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,4CAAC,4BAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,4CAAC,yBAAO,IAAQ,MAAM,MAAM,MAC1B,sDAAC,sBAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
+  "names": []
 }

package/dist/cjs/TabsAdvancedDemo.js

@@ -1,2 +1,283 @@
-"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var S=(n,a)=>{for(var r in a)m(n,r,{get:a[r],enumerable:!0})},I=(n,a,r,u)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of $(a))!k.call(n,s)&&s!==r&&m(n,s,{get:()=>a[s],enumerable:!(u=y(a,s))||u.enumerable});return n};var C=n=>I(m({},"__esModule",{value:!0}),n);var B={};S(B,{TabsAdvancedDemo:()=>R});module.exports=C(B);var t=require("react/jsx-runtime"),x=require("react"),e=require("tamagui");const p=["background","underline"],L={background:"Background Indicator",underline:"Underline Indicator"},R=()=>{const[n,a]=(0,x.useState)(0),r=p[n];return(0,t.jsxs)(t.Fragment,{children:[r==="underline"?(0,t.jsx)(z,{}):(0,t.jsx)(P,{}),(0,t.jsx)(e.XStack,{ai:"center",space:!0,pos:"absolute",b:"$3",l:"$4",$xxs:{dsp:"none"},children:(0,t.jsx)(e.Button,{size:"$2",onPress:()=>a(u=>(u+1)%p.length),children:L[r]})})]})},P=()=>{const[n,a]=(0,x.useState)({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),r=o=>a({...n,currentTab:o}),u=o=>a({...n,intentAt:o}),s=o=>a({...n,prevActiveAt:n.activeAt,activeAt:o}),{activeAt:i,intentAt:c,prevActiveAt:b,currentTab:l}=n,d=(()=>!i||!b||i.x===b.x?0:i.x>b.x?-1:1)(),g=d===1?"isLeft":d===-1?"isRight":"defaultFade",h=d===1?"isRight":d===-1?"isLeft":"defaultFade",T=(o,v)=>{o==="select"?s(v):u(v)};return(0,t.jsxs)(e.Tabs,{value:l,onValueChange:r,orientation:"horizontal",size:"$4",padding:"$2",height:150,flexDirection:"column",activationMode:"manual",backgroundColor:"$background",borderRadius:"$4",position:"relative",children:[(0,t.jsxs)(e.YStack,{children:[(0,t.jsx)(e.AnimatePresence,{children:c&&(0,t.jsx)(A,{borderRadius:"$4",width:c.width,height:c.height,x:c.x,y:c.y})}),(0,t.jsx)(e.AnimatePresence,{children:i&&(0,t.jsx)(A,{borderRadius:"$4",theme:"active",width:i.width,height:i.height,x:i.x,y:i.y})}),(0,t.jsxs)(e.Tabs.List,{disablePassBorderRadius:!0,loop:!1,"aria-label":"Manage your account",space:"$2",backgroundColor:"transparent",children:[(0,t.jsx)(e.Tabs.Tab,{unstyled:!0,value:"tab1",onInteraction:T,children:(0,t.jsx)(e.SizableText,{children:"Profile"})}),(0,t.jsx)(e.Tabs.Tab,{unstyled:!0,value:"tab2",onInteraction:T,children:(0,t.jsx)(e.SizableText,{children:"Connections"})}),(0,t.jsx)(e.Tabs.Tab,{unstyled:!0,value:"tab3",onInteraction:T,children:(0,t.jsx)(e.SizableText,{children:"Notifications"})})]})]}),(0,t.jsx)(e.AnimatePresence,{exitBeforeEnter:!0,enterVariant:g,exitVariant:h,children:(0,t.jsx)(f,{animation:"100ms",x:0,opacity:1,flex:1,children:(0,t.jsx)(e.Tabs.Content,{value:l,forceMount:!0,flex:1,justifyContent:"center",children:(0,t.jsx)(e.H5,{textAlign:"center",children:l})})},l)})]})},z=()=>{const[n,a]=(0,x.useState)({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),r=o=>a({...n,currentTab:o}),u=o=>a({...n,intentAt:o}),s=o=>a({...n,prevActiveAt:n.activeAt,activeAt:o}),{activeAt:i,intentAt:c,prevActiveAt:b,currentTab:l}=n,d=(()=>!i||!b||i.x===b.x?0:i.x>b.x?-1:1)(),g=d===1?"isLeft":d===-1?"isRight":"defaultFade",h=d===1?"isRight":d===-1?"isLeft":"defaultFade",T=(o,v)=>{o==="select"?s(v):u(v)};return(0,t.jsxs)(e.Tabs,{value:l,onValueChange:r,orientation:"horizontal",size:"$4",height:150,flexDirection:"column",activationMode:"manual",backgroundColor:"$background",borderRadius:"$4",children:[(0,t.jsxs)(e.YStack,{children:[(0,t.jsx)(e.AnimatePresence,{children:c&&(0,t.jsx)(A,{width:c.width,height:"$0.5",x:c.x,bottom:0})}),(0,t.jsx)(e.AnimatePresence,{children:i&&(0,t.jsx)(A,{theme:"active",active:!0,width:i.width,height:"$0.5",x:i.x,bottom:0})}),(0,t.jsxs)(e.Tabs.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:[(0,t.jsx)(e.Tabs.Tab,{unstyled:!0,padding:"$5",value:"tab1",onInteraction:T,children:(0,t.jsx)(e.SizableText,{children:"Profile"})}),(0,t.jsx)(e.Tabs.Tab,{unstyled:!0,padding:"$5",value:"tab2",onInteraction:T,children:(0,t.jsx)(e.SizableText,{children:"Connections"})}),(0,t.jsx)(e.Tabs.Tab,{unstyled:!0,padding:"$5",value:"tab3",onInteraction:T,children:(0,t.jsx)(e.SizableText,{children:"Notifications"})})]})]}),(0,t.jsx)(e.AnimatePresence,{exitBeforeEnter:!0,enterVariant:g,exitVariant:h,children:(0,t.jsx)(f,{animation:"100ms",x:0,opacity:1,flex:1,children:(0,t.jsx)(e.Tabs.Content,{value:l,forceMount:!0,flex:1,justifyContent:"center",children:(0,t.jsx)(e.H5,{textAlign:"center",children:l})})},l)})]})},A=(0,e.styled)(e.Stack,{position:"absolute",backgroundColor:"$color5",opacity:.7,animation:"100ms",enterStyle:{opacity:0},exitStyle:{opacity:0},variants:{active:{true:{backgroundColor:"$color8",opacity:.6}}}}),f=(0,e.styled)(e.YStack,{variants:{isLeft:{true:{x:-25,opacity:0}},isRight:{true:{x:25,opacity:0}},defaultFade:{true:{opacity:0}}}});0&&(module.exports={TabsAdvancedDemo});
+"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 demos = ["background", "underline"];
+const demosTitle = {
+  background: "Background Indicator",
+  underline: "Underline Indicator"
+};
+const TabsAdvancedDemo = () => {
+  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 === "underline" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsAdvancedUnderline, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsAdvancedBackground, {}),
+    /* @__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: demosTitle[demo] }) })
+  ] });
+};
+const TabsAdvancedBackground = () => {
+  const [tabState, setTabState] = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.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__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: intentAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TabsRovingIndicator,
+            {
+              borderRadius: "$4",
+              width: intentAt.width,
+              height: intentAt.height,
+              x: intentAt.x,
+              y: intentAt.y
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: activeAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TabsRovingIndicator,
+            {
+              borderRadius: "$4",
+              theme: "active",
+              width: activeAt.width,
+              height: activeAt.height,
+              x: activeAt.x,
+              y: activeAt.y
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_tamagui.Tabs.List,
+            {
+              disablePassBorderRadius: true,
+              loop: false,
+              "aria-label": "Manage your account",
+              space: "$2",
+              backgroundColor: "transparent",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, { unstyled: true, 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.Tab, { unstyled: true, 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.Tab, { unstyled: true, 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, opacity: 1, flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+const TabsAdvancedUnderline = () => {
+  const [tabState, setTabState] = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.Tabs,
+    {
+      value: currentTab,
+      onValueChange: setCurrentTab,
+      orientation: "horizontal",
+      size: "$4",
+      height: 150,
+      flexDirection: "column",
+      activationMode: "manual",
+      backgroundColor: "$background",
+      borderRadius: "$4",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: intentAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TabsRovingIndicator,
+            {
+              width: intentAt.width,
+              height: "$0.5",
+              x: intentAt.x,
+              bottom: 0
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: activeAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TabsRovingIndicator,
+            {
+              theme: "active",
+              active: true,
+              width: activeAt.width,
+              height: "$0.5",
+              x: activeAt.x,
+              bottom: 0
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_tamagui.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__ */ (0, import_jsx_runtime.jsx)(
+                  import_tamagui.Tabs.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    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.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    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.Tab,
+                  {
+                    unstyled: true,
+                    padding: "$5",
+                    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, opacity: 1, flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
+          }
+        )
+      ]
+    }
+  );
+};
+const TabsRovingIndicator = (0, import_tamagui.styled)(import_tamagui.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 = (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

@@ -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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAyBI,IAAAI,EAAA,6BAzBJC,EAAyB,iBACzBC,EAYO,mBAEP,MAAMC,EAAQ,CAAC,aAAc,WAAW,EAClCC,EAAqD,CACzD,WAAY,uBACZ,UAAW,qBACb,EAEaN,EAAmB,IAAM,CACpC,KAAM,CAACO,EAAWC,CAAY,KAAI,YAAS,CAAC,EACtCC,EAAOJ,EAAME,CAAS,EAC5B,SACE,oBACG,UAAAE,IAAS,eAAc,OAACC,EAAA,EAAsB,KAAK,OAACC,EAAA,EAAuB,KAE5E,OAAC,UAAO,GAAG,SAAS,MAAK,GAAC,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,KAAM,CAAE,IAAK,MAAO,EACzE,mBAAC,UAAO,KAAK,KAAK,QAAS,IAAMH,EAAcI,IAAOA,EAAI,GAAKP,EAAM,MAAM,EACxE,SAAAC,EAAWG,CAAI,EAClB,EACF,GACF,CAEJ,EAEME,EAAyB,IAAM,CACnC,KAAM,CAACE,EAAUC,CAAW,KAAI,YAc7B,CACD,SAAU,KACV,WAAY,OACZ,SAAU,KACV,aAAc,IAChB,CAAC,EAEKC,EAAiBC,GAAuBF,EAAY,CAAE,GAAGD,EAAU,WAAAG,CAAW,CAAC,EAC/EC,EAAsBC,GAAaJ,EAAY,CAAE,GAAGD,EAAU,SAAAK,CAAS,CAAC,EACxEC,EAAsBC,GAC1BN,EAAY,CAAE,GAAGD,EAAU,aAAcA,EAAS,SAAU,SAAAO,CAAS,CAAC,EAClE,CAAE,SAAAA,EAAU,SAAAF,EAAU,aAAAG,EAAc,WAAAL,CAAW,EAAIH,EAOnDS,GAAa,IACb,CAACF,GAAY,CAACC,GAAgBD,EAAS,IAAMC,EAAa,EACrD,EAEFD,EAAS,EAAIC,EAAa,EAAI,GAAK,GACzC,EAEGE,EACJD,IAAc,EAAI,SAAWA,IAAc,GAAK,UAAY,cACxDE,EACJF,IAAc,EAAI,UAAYA,IAAc,GAAK,SAAW,cAExDG,EAAqD,CAACC,EAAMC,IAAW,CACvED,IAAS,SACXP,EAAmBQ,CAAM,EAEzBV,EAAmBU,CAAM,CAE7B,EAEA,SACE,QAAC,QACC,MAAOX,EACP,cAAeD,EACf,YAAY,aACZ,KAAK,KACL,QAAQ,KACR,OAAQ,IACR,cAAc,SACd,eAAe,SACf,gBAAgB,cAChB,aAAa,KACb,SAAS,WAET,qBAAC,UACC,oBAAC,mBACE,SAAAG,MACC,OAACU,EAAA,CACC,aAAa,KACb,MAAOV,EAAS,MAChB,OAAQA,EAAS,OACjB,EAAGA,EAAS,EACZ,EAAGA,EAAS,EACd,EAEJ,KACA,OAAC,mBACE,SAAAE,MACC,OAACQ,EAAA,CACC,aAAa,KACb,MAAM,SACN,MAAOR,EAAS,MAChB,OAAQA,EAAS,OACjB,EAAGA,EAAS,EACZ,EAAGA,EAAS,EACd,EAEJ,KAEA,QAAC,OAAK,KAAL,CACC,wBAAuB,GACvB,KAAM,GACN,aAAW,sBACX,MAAM,KACN,gBAAgB,cAEhB,oBAAC,OAAK,IAAL,CAAS,SAAQ,GAAC,MAAM,OAAO,cAAeK,EAC7C,mBAAC,eAAY,mBAAO,EACtB,KACA,OAAC,OAAK,IAAL,CAAS,SAAQ,GAAC,MAAM,OAAO,cAAeA,EAC7C,mBAAC,eAAY,uBAAW,EAC1B,KACA,OAAC,OAAK,IAAL,CAAS,SAAQ,GAAC,MAAM,OAAO,cAAeA,EAC7C,mBAAC,eAAY,yBAAa,EAC5B,GACF,GACF,KAEA,OAAC,mBACC,gBAAe,GACf,aAAcF,EACd,YAAaC,EAEb,mBAACK,EAAA,CAAgC,UAAU,QAAQ,EAAG,EAAG,QAAS,EAAG,KAAM,EACzE,mBAAC,OAAK,QAAL,CAAa,MAAOb,EAAY,WAAU,GAAC,KAAM,EAAG,eAAe,SAClE,mBAAC,MAAG,UAAU,SAAU,SAAAA,EAAW,EACrC,GAHmBA,CAIrB,EACF,GACF,CAEJ,EAEMN,EAAwB,IAAM,CAClC,KAAM,CAACG,EAAUC,CAAW,KAAI,YAc7B,CACD,SAAU,KACV,WAAY,OACZ,SAAU,KACV,aAAc,IAChB,CAAC,EAEKC,EAAiBC,GAAuBF,EAAY,CAAE,GAAGD,EAAU,WAAAG,CAAW,CAAC,EAC/EC,EAAsBC,GAAaJ,EAAY,CAAE,GAAGD,EAAU,SAAAK,CAAS,CAAC,EACxEC,EAAsBC,GAC1BN,EAAY,CAAE,GAAGD,EAAU,aAAcA,EAAS,SAAU,SAAAO,CAAS,CAAC,EAClE,CAAE,SAAAA,EAAU,SAAAF,EAAU,aAAAG,EAAc,WAAAL,CAAW,EAAIH,EAOnDS,GAAa,IACb,CAACF,GAAY,CAACC,GAAgBD,EAAS,IAAMC,EAAa,EACrD,EAEFD,EAAS,EAAIC,EAAa,EAAI,GAAK,GACzC,EAEGE,EACJD,IAAc,EAAI,SAAWA,IAAc,GAAK,UAAY,cACxDE,EACJF,IAAc,EAAI,UAAYA,IAAc,GAAK,SAAW,cAExDG,EAAqD,CAACC,EAAMC,IAAW,CACvED,IAAS,SACXP,EAAmBQ,CAAM,EAEzBV,EAAmBU,CAAM,CAE7B,EAEA,SACE,QAAC,QACC,MAAOX,EACP,cAAeD,EACf,YAAY,aACZ,KAAK,KACL,OAAQ,IACR,cAAc,SACd,eAAe,SACf,gBAAgB,cAChB,aAAa,KAEb,qBAAC,UACC,oBAAC,mBACE,SAAAG,MACC,OAACU,EAAA,CACC,MAAOV,EAAS,MAChB,OAAO,OACP,EAAGA,EAAS,EACZ,OAAQ,EACV,EAEJ,KACA,OAAC,mBACE,SAAAE,MACC,OAACQ,EAAA,CACC,MAAM,SACN,OAAM,GACN,MAAOR,EAAS,MAChB,OAAO,OACP,EAAGA,EAAS,EACZ,OAAQ,EACV,EAEJ,KACA,QAAC,OAAK,KAAL,CACC,wBAAuB,GACvB,KAAM,GACN,aAAW,sBACX,uBAAwB,EACxB,wBAAyB,EACzB,cAAc,OACd,YAAY,UACZ,kBAAkB,OAClB,gBAAgB,cAEhB,oBAAC,OAAK,IAAL,CACC,SAAQ,GACR,QAAQ,KACR,MAAM,OACN,cAAeK,EAEf,mBAAC,eAAY,mBAAO,EACtB,KACA,OAAC,OAAK,IAAL,CACC,SAAQ,GACR,QAAQ,KACR,MAAM,OACN,cAAeA,EAEf,mBAAC,eAAY,uBAAW,EAC1B,KACA,OAAC,OAAK,IAAL,CACC,SAAQ,GACR,QAAQ,KACR,MAAM,OACN,cAAeA,EAEf,mBAAC,eAAY,yBAAa,EAC5B,GACF,GACF,KAEA,OAAC,mBACC,gBAAe,GACf,aAAcF,EACd,YAAaC,EAEb,mBAACK,EAAA,CAAgC,UAAU,QAAQ,EAAG,EAAG,QAAS,EAAG,KAAM,EACzE,mBAAC,OAAK,QAAL,CAAa,MAAOb,EAAY,WAAU,GAAC,KAAM,EAAG,eAAe,SAClE,mBAAC,MAAG,UAAU,SAAU,SAAAA,EAAW,EACrC,GAHmBA,CAIrB,EACF,GACF,CAEJ,EAEMY,KAAsB,UAAO,QAAO,CACxC,SAAU,WACV,gBAAiB,UACjB,QAAS,GACT,UAAW,QACX,WAAY,CACV,QAAS,CACX,EACA,UAAW,CACT,QAAS,CACX,EACA,SAAU,CACR,OAAQ,CACN,KAAM,CACJ,gBAAiB,UACjB,QAAS,EACX,CACF,CACF,CACF,CAAC,EAEKC,KAAiB,UAAO,SAAQ,CACpC,SAAU,CACR,OAAQ,CAAE,KAAM,CAAE,EAAG,IAAK,QAAS,CAAE,CAAE,EACvC,QAAS,CAAE,KAAM,CAAE,EAAG,GAAI,QAAS,CAAE,CAAE,EACvC,YAAa,CAAE,KAAM,CAAE,QAAS,CAAE,CAAE,CACtC,CACF,CAAC",
-  "names": ["TabsAdvancedDemo_exports", "__export", "TabsAdvancedDemo", "__toCommonJS", "import_jsx_runtime", "import_react", "import_tamagui", "demos", "demosTitle", "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/cjs/TabsDemo.js

@@ -1,2 +1,147 @@
-"use strict";var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var f=(a,o)=>{for(var n in o)s(a,n,{get:o[n],enumerable:!0})},C=(a,o,n,b)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of T(o))!u.call(a,i)&&i!==n&&s(a,i,{get:()=>o[i],enumerable:!(b=c(o,i))||b.enumerable});return a};var x=a=>C(s({},"__esModule",{value:!0}),a);var h={};f(h,{TabsDemo:()=>v});module.exports=x(h);var t=require("react/jsx-runtime"),d=require("react"),e=require("tamagui");const l=["horizontal","vertical"],m={horizontal:"Horizontal",vertical:"Vertical"};function v(){const[a,o]=(0,d.useState)(0),n=l[a];return(0,t.jsxs)(e.YStack,{paddingHorizontal:"$4",position:"unset",children:[n==="horizontal"?(0,t.jsx)($,{}):(0,t.jsx)(g,{}),(0,t.jsx)(e.XStack,{alignItems:"center",space:!0,position:"absolute",bottom:"$3",left:"$4",$xxs:{display:"none"},children:(0,t.jsx)(e.Button,{size:"$2",onPress:()=>o(b=>(b+1)%l.length),children:m[n]})})]})}const $=()=>(0,t.jsxs)(e.Tabs,{defaultValue:"tab1",orientation:"horizontal",flexDirection:"column",width:400,height:150,borderRadius:"$4",borderWidth:"$0.25",overflow:"hidden",borderColor:"$borderColor",children:[(0,t.jsxs)(e.Tabs.List,{separator:(0,t.jsx)(e.Separator,{vertical:!0}),disablePassBorderRadius:"bottom","aria-label":"Manage your account",children:[(0,t.jsx)(e.Tabs.Tab,{flex:1,value:"tab1",children:(0,t.jsx)(e.SizableText,{fontFamily:"$body",children:"Profile"})}),(0,t.jsx)(e.Tabs.Tab,{flex:1,value:"tab2",children:(0,t.jsx)(e.SizableText,{fontFamily:"$body",children:"Connections"})}),(0,t.jsx)(e.Tabs.Tab,{flex:1,value:"tab3",children:(0,t.jsx)(e.SizableText,{fontFamily:"$body",children:"Notifications"})})]}),(0,t.jsx)(e.Separator,{}),(0,t.jsx)(r,{value:"tab1",children:(0,t.jsx)(e.H5,{children:"Profile"})}),(0,t.jsx)(r,{value:"tab2",children:(0,t.jsx)(e.H5,{children:"Connections"})}),(0,t.jsx)(r,{value:"tab3",children:(0,t.jsx)(e.H5,{children:"Notifications"})})]}),g=()=>(0,t.jsxs)(e.Tabs,{defaultValue:"tab1",flexDirection:"row",orientation:"vertical",width:400,borderRadius:"$4",borderWidth:"$0.25",overflow:"hidden",borderColor:"$borderColor",children:[(0,t.jsxs)(e.Tabs.List,{disablePassBorderRadius:"end","aria-label":"Manage your account",separator:(0,t.jsx)(e.Separator,{}),children:[(0,t.jsx)(e.Tabs.Tab,{value:"tab1",children:(0,t.jsx)(e.SizableText,{children:"Profile"})}),(0,t.jsx)(e.Tabs.Tab,{value:"tab2",children:(0,t.jsx)(e.SizableText,{children:"Connections"})}),(0,t.jsx)(e.Tabs.Tab,{value:"tab3",children:(0,t.jsx)(e.SizableText,{children:"Notifications"})})]}),(0,t.jsx)(e.Separator,{vertical:!0}),(0,t.jsx)(r,{value:"tab1",children:(0,t.jsx)(e.H5,{textAlign:"center",children:"Profile"})}),(0,t.jsx)(r,{value:"tab2",children:(0,t.jsx)(e.H5,{textAlign:"center",children:"Connections"})}),(0,t.jsx)(r,{value:"tab3",children:(0,t.jsx)(e.H5,{textAlign:"center",children:"Notifications"})})]}),r=a=>(0,t.jsx)(e.Tabs.Content,{backgroundColor:"$background",padding:"$2",alignItems:"center",justifyContent:"center",flex:1,borderColor:"$background",borderRadius:"$2",borderTopLeftRadius:0,borderTopRightRadius:0,borderWidth:"$2",...a,children:a.children},"tab3");0&&(module.exports={TabsDemo});
+"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 = (
+  // web only fix for position relative
+  require("react/jsx-runtime")
+);
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+const demos = ["horizontal", "vertical"];
+const demosTitle = {
+  horizontal: "Horizontal",
+  vertical: "Vertical"
+};
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = (0, import_react.useState)(0);
+  const demo = demos[demoIndex];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { paddingHorizontal: "$4", position: "unset", 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,
+      {
+        alignItems: "center",
+        space: true,
+        position: "absolute",
+        bottom: "$3",
+        left: "$4",
+        $xxs: { display: "none" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] })
+      }
+    )
+  ] });
+}
+const HorizontalTabs = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.Tabs,
+    {
+      defaultValue: "tab1",
+      orientation: "horizontal",
+      flexDirection: "column",
+      width: 400,
+      height: 150,
+      borderRadius: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_tamagui.Tabs.List,
+          {
+            separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { vertical: true }),
+            disablePassBorderRadius: "bottom",
+            "aria-label": "Manage your account",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, { flex: 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.Tab, { flex: 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.Tab, { flex: 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.Separator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, { value: "tab1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Profile" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, { value: "tab2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Connections" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, { value: "tab3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { children: "Notifications" }) })
+      ]
+    }
+  );
+};
+const VerticalTabs = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.Tabs,
+    {
+      defaultValue: "tab1",
+      flexDirection: "row",
+      orientation: "vertical",
+      width: 400,
+      borderRadius: "$4",
+      borderWidth: "$0.25",
+      overflow: "hidden",
+      borderColor: "$borderColor",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_tamagui.Tabs.List,
+          {
+            disablePassBorderRadius: "end",
+            "aria-label": "Manage your account",
+            separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, { value: "tab1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Profile" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, { value: "tab2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Connections" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, { value: "tab3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.SizableText, { children: "Notifications" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { vertical: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, { value: "tab1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: "Profile" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, { value: "tab2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: "Connections" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, { value: "tab3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H5, { textAlign: "center", children: "Notifications" }) })
+      ]
+    }
+  );
+};
+const TabsContent = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tamagui.Tabs.Content,
+    {
+      backgroundColor: "$background",
+      padding: "$2",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1,
+      borderColor: "$background",
+      borderRadius: "$2",
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderWidth: "$2",
+      ...props,
+      children: props.children
+    },
+    "tab3"
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabsDemo
+});
 //# sourceMappingURL=TabsDemo.js.map