@tamagui/demos 1.13.3 → 1.13.4

package/dist/jsx/SliderDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
   "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} alignItems=\"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,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,WAAW,SAAS,MAAM;AAAA,IAC7C,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,OAAO,GAAG,SAAS,QAAQ;AAAA,KACxC;AAAA,EACH,EANC;AAQL;",
-  "names": []
+  "mappings": "AAAA,OAAS,UAAAA,EAA6B,UAAAC,MAAc,UAE7C,SAASC,GAAa,CAC3B,MACE,CAACD,EAAO,QAAQ,IAAK,WAAW,QAAS,MAAM,KAC7C,CAACE,EAAa,QAAQ,IAAK,YAAY,UAAW,EAClD,CAACA,EAAa,OAAO,IAAK,EAC5B,EAHCF,EAKL,CAEA,SAASE,EAAa,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAgB,CACzD,MACE,CAACL,EAAO,cAAc,CAAC,EAAE,EAAG,KAAK,IAAK,MAAM,MAAOK,GACjD,CAACL,EAAO,MACN,CAACA,EAAO,WAAY,EACtB,EAFCA,EAAO,MAGR,CAACA,EAAO,MAAM,OAAO,EAAG,SAAS,OAAQ,GACxCI,EACH,EANCJ,EAQL",
+  "names": ["Slider", "XStack", "SliderDemo", "SimpleSlider", "children", "props"]
 }

package/dist/jsx/SliderDemo.mjs

@@ -1,18 +1,2 @@
-import { Slider, XStack } from "tamagui";
-function SliderDemo() {
-  return <XStack height={200} alignItems="center" space="$8">
-    <SimpleSlider height={200} orientation="vertical" />
-    <SimpleSlider width={200} />
-  </XStack>;
-}
-function SimpleSlider({ children, ...props }) {
-  return <Slider defaultValue={[50]} max={100} step={1} {...props}>
-    <Slider.Track><Slider.TrackActive /></Slider.Track>
-    <Slider.Thumb index={0} circular elevate />
-    {children}
-  </Slider>;
-}
-export {
-  SliderDemo
-};
+import{Slider as S,XStack as P}from"tamagui";function A(){return<P height={200}alignItems="center"space="$8"><T height={200}orientation="vertical"/><T width={200}/></P>}function T({children:g,...v}){return<S defaultValue={[50]}max={100}step={1}{...v}><S.Track><S.TrackActive/></S.Track><S.Thumb index={0}circular elevate/>{g}</S>}export{A as SliderDemo};
 //# sourceMappingURL=SliderDemo.mjs.map

package/dist/jsx/SliderDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
   "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} alignItems=\"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,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,WAAW,SAAS,MAAM;AAAA,IAC7C,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,OAAO,GAAG,SAAS,QAAQ;AAAA,KACxC;AAAA,EACH,EANC;AAQL;",
-  "names": []
+  "mappings": "AAAA,OAAS,UAAAA,EAA6B,UAAAC,MAAc,UAE7C,SAASC,GAAa,CAC3B,MACE,CAACD,EAAO,QAAQ,IAAK,WAAW,QAAS,MAAM,KAC7C,CAACE,EAAa,QAAQ,IAAK,YAAY,UAAW,EAClD,CAACA,EAAa,OAAO,IAAK,EAC5B,EAHCF,EAKL,CAEA,SAASE,EAAa,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAgB,CACzD,MACE,CAACL,EAAO,cAAc,CAAC,EAAE,EAAG,KAAK,IAAK,MAAM,MAAOK,GACjD,CAACL,EAAO,MACN,CAACA,EAAO,WAAY,EACtB,EAFCA,EAAO,MAGR,CAACA,EAAO,MAAM,OAAO,EAAG,SAAS,OAAQ,GACxCI,EACH,EANCJ,EAQL",
+  "names": ["Slider", "XStack", "SliderDemo", "SimpleSlider", "children", "props"]
 }

package/dist/jsx/SpinnerDemo.js

@@ -1,11 +1,2 @@
-import { Spinner, YStack } from "tamagui";
-function SpinnerDemo() {
-  return <YStack padding="$3" space="$4" alignItems="center">
-    <Spinner size="small" color="$green10" />
-    <Spinner size="large" color="$orange10" />
-  </YStack>;
-}
-export {
-  SpinnerDemo
-};
+import{Spinner as S,YStack as $}from"tamagui";function f(){return<$ padding="$3"space="$4"alignItems="center"><S size="small"color="$green10"/><S size="large"color="$orange10"/></$>}export{f as SpinnerDemo};
 //# sourceMappingURL=SpinnerDemo.js.map

package/dist/jsx/SpinnerDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SpinnerDemo.tsx"],
   "sourcesContent": ["import { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack padding=\"$3\" space=\"$4\" alignItems=\"center\">\n      <Spinner size=\"small\" color=\"$green10\" />\n      <Spinner size=\"large\" color=\"$orange10\" />\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,cAAc;AAEzB,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW;AAAA,IACzC,CAAC,QAAQ,KAAK,QAAQ,MAAM,WAAW;AAAA,IACvC,CAAC,QAAQ,KAAK,QAAQ,MAAM,YAAY;AAAA,EAC1C,EAHC;AAKL;",
-  "names": []
+  "mappings": "AAAA,OAAS,WAAAA,EAAS,UAAAC,MAAc,UAEzB,SAASC,GAAc,CAC5B,MACE,CAACD,EAAO,QAAQ,IAAK,MAAM,IAAK,WAAW,SACzC,CAACD,EAAQ,KAAK,OAAQ,MAAM,UAAW,EACvC,CAACA,EAAQ,KAAK,OAAQ,MAAM,WAAY,EAC1C,EAHCC,EAKL",
+  "names": ["Spinner", "YStack", "SpinnerDemo"]
 }

package/dist/jsx/SpinnerDemo.mjs

@@ -1,11 +1,2 @@
-import { Spinner, YStack } from "tamagui";
-function SpinnerDemo() {
-  return <YStack padding="$3" space="$4" alignItems="center">
-    <Spinner size="small" color="$green10" />
-    <Spinner size="large" color="$orange10" />
-  </YStack>;
-}
-export {
-  SpinnerDemo
-};
+import{Spinner as S,YStack as $}from"tamagui";function f(){return<$ padding="$3"space="$4"alignItems="center"><S size="small"color="$green10"/><S size="large"color="$orange10"/></$>}export{f as SpinnerDemo};
 //# sourceMappingURL=SpinnerDemo.mjs.map

package/dist/jsx/SpinnerDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SpinnerDemo.tsx"],
   "sourcesContent": ["import { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack padding=\"$3\" space=\"$4\" alignItems=\"center\">\n      <Spinner size=\"small\" color=\"$green10\" />\n      <Spinner size=\"large\" color=\"$orange10\" />\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,cAAc;AAEzB,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW;AAAA,IACzC,CAAC,QAAQ,KAAK,QAAQ,MAAM,WAAW;AAAA,IACvC,CAAC,QAAQ,KAAK,QAAQ,MAAM,YAAY;AAAA,EAC1C,EAHC;AAKL;",
-  "names": []
+  "mappings": "AAAA,OAAS,WAAAA,EAAS,UAAAC,MAAc,UAEzB,SAASC,GAAc,CAC5B,MACE,CAACD,EAAO,QAAQ,IAAK,MAAM,IAAK,WAAW,SACzC,CAACD,EAAQ,KAAK,OAAQ,MAAM,UAAW,EACvC,CAACA,EAAQ,KAAK,OAAQ,MAAM,WAAY,EAC1C,EAHCC,EAKL",
+  "names": ["Spinner", "YStack", "SpinnerDemo"]
 }

package/dist/jsx/StacksDemo.js

@@ -1,46 +1,2 @@
-import { XStack, YStack, ZStack } from "tamagui";
-function StacksDemo() {
-  return <XStack maxWidth={250} padding="$2" alignSelf="center" space>
-    <YStack
-      flex={1}
-      space="$2"
-      borderWidth={2}
-      borderColor="$color"
-      borderRadius="$4"
-      padding="$2"
-    >
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-    </YStack>
-    <XStack
-      flex={1}
-      space="$2"
-      borderWidth={2}
-      borderColor="$color"
-      borderRadius="$4"
-      padding="$2"
-    >
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-    </XStack>
-    <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>
-      <YStack fullscreen borderWidth={2} borderRadius="$4" padding="$2" />
-      <YStack fullscreen y={10} x={10} borderWidth={2} borderRadius="$4" padding="$2" />
-      <YStack
-        fullscreen
-        y={20}
-        x={20}
-        borderWidth={2}
-        backgroundColor="$color"
-        borderRadius="$4"
-        padding="$2"
-      />
-    </ZStack>
-  </XStack>;
-}
-export {
-  StacksDemo
-};
+import{XStack as R,YStack as $,ZStack as C}from"tamagui";function X(){return<R maxWidth={250}padding="$2"alignSelf="center"space><$ flex={1}space="$2"borderWidth={2}borderColor="$color"borderRadius="$4"padding="$2"><$ backgroundColor="$color"borderRadius="$3"padding="$2"/><$ backgroundColor="$color"borderRadius="$3"padding="$2"/><$ backgroundColor="$color"borderRadius="$3"padding="$2"/></$><R flex={1}space="$2"borderWidth={2}borderColor="$color"borderRadius="$4"padding="$2"><$ backgroundColor="$color"borderRadius="$3"padding="$2"/><$ backgroundColor="$color"borderRadius="$3"padding="$2"/><$ backgroundColor="$color"borderRadius="$3"padding="$2"/></R><C maxWidth={50}maxHeight={85}width={100}flex={1}><$ fullscreen borderWidth={2}borderRadius="$4"padding="$2"/><$ fullscreen y={10}x={10}borderWidth={2}borderRadius="$4"padding="$2"/><$ fullscreen y={20}x={20}borderWidth={2}backgroundColor="$color"borderRadius="$4"padding="$2"/></C></R>}export{X as StacksDemo};
 //# sourceMappingURL=StacksDemo.js.map

package/dist/jsx/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": "AACA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,UAAU,KAAK,QAAQ,KAAK,UAAU,SAAS;AAAA,IACrD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC,OAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM;AAAA,MACrD,CAAC,OAAO,WAAW,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAClE,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChF,CAAC;AAAA,QACC;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF,EAZC;AAAA,EAaH,EAxCC;AA0CL;",
-  "names": []
+  "mappings": "AACA,OAAS,UAAAA,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEhC,SAASC,GAAa,CAC3B,MACE,CAACH,EAAO,UAAU,IAAK,QAAQ,IAAK,UAAU,QAAS,MACrD,CAACC,EACC,MAAM,EACN,MAAM,IACN,aAAa,EACb,YAAY,QACZ,aAAa,IACb,QAAQ,KAER,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAChE,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAChE,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAClE,EAXCA,EAaD,CAACD,EACC,MAAM,EACN,MAAM,IACN,aAAa,EACb,YAAY,QACZ,aAAa,IACb,QAAQ,KAER,CAACC,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAChE,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAChE,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAClE,EAXCD,EAaD,CAACE,EAAO,UAAU,GAAI,WAAW,GAAI,OAAO,IAAK,MAAM,GACrD,CAACD,EAAO,WAAW,aAAa,EAAG,aAAa,IAAK,QAAQ,IAAK,EAClE,CAACA,EAAO,WAAW,GAAG,GAAI,GAAG,GAAI,aAAa,EAAG,aAAa,IAAK,QAAQ,IAAK,EAChF,CAACA,EACC,WACA,GAAG,GACH,GAAG,GACH,aAAa,EACb,gBAAgB,QAChB,aAAa,IACb,QAAQ,IACV,EACF,EAZCC,EAaH,EAxCCF,EA0CL",
+  "names": ["XStack", "YStack", "ZStack", "StacksDemo"]
 }

package/dist/jsx/StacksDemo.mjs

@@ -1,46 +1,2 @@
-import { XStack, YStack, ZStack } from "tamagui";
-function StacksDemo() {
-  return <XStack maxWidth={250} padding="$2" alignSelf="center" space>
-    <YStack
-      flex={1}
-      space="$2"
-      borderWidth={2}
-      borderColor="$color"
-      borderRadius="$4"
-      padding="$2"
-    >
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-    </YStack>
-    <XStack
-      flex={1}
-      space="$2"
-      borderWidth={2}
-      borderColor="$color"
-      borderRadius="$4"
-      padding="$2"
-    >
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
-    </XStack>
-    <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>
-      <YStack fullscreen borderWidth={2} borderRadius="$4" padding="$2" />
-      <YStack fullscreen y={10} x={10} borderWidth={2} borderRadius="$4" padding="$2" />
-      <YStack
-        fullscreen
-        y={20}
-        x={20}
-        borderWidth={2}
-        backgroundColor="$color"
-        borderRadius="$4"
-        padding="$2"
-      />
-    </ZStack>
-  </XStack>;
-}
-export {
-  StacksDemo
-};
+import{XStack as R,YStack as $,ZStack as C}from"tamagui";function X(){return<R maxWidth={250}padding="$2"alignSelf="center"space><$ flex={1}space="$2"borderWidth={2}borderColor="$color"borderRadius="$4"padding="$2"><$ backgroundColor="$color"borderRadius="$3"padding="$2"/><$ backgroundColor="$color"borderRadius="$3"padding="$2"/><$ backgroundColor="$color"borderRadius="$3"padding="$2"/></$><R flex={1}space="$2"borderWidth={2}borderColor="$color"borderRadius="$4"padding="$2"><$ backgroundColor="$color"borderRadius="$3"padding="$2"/><$ backgroundColor="$color"borderRadius="$3"padding="$2"/><$ backgroundColor="$color"borderRadius="$3"padding="$2"/></R><C maxWidth={50}maxHeight={85}width={100}flex={1}><$ fullscreen borderWidth={2}borderRadius="$4"padding="$2"/><$ fullscreen y={10}x={10}borderWidth={2}borderRadius="$4"padding="$2"/><$ fullscreen y={20}x={20}borderWidth={2}backgroundColor="$color"borderRadius="$4"padding="$2"/></C></R>}export{X as StacksDemo};
 //# sourceMappingURL=StacksDemo.mjs.map

package/dist/jsx/StacksDemo.mjs.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": "AACA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,UAAU,KAAK,QAAQ,KAAK,UAAU,SAAS;AAAA,IACrD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC,OAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM;AAAA,MACrD,CAAC,OAAO,WAAW,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAClE,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChF,CAAC;AAAA,QACC;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF,EAZC;AAAA,EAaH,EAxCC;AA0CL;",
-  "names": []
+  "mappings": "AACA,OAAS,UAAAA,EAAQ,UAAAC,EAAQ,UAAAC,MAAc,UAEhC,SAASC,GAAa,CAC3B,MACE,CAACH,EAAO,UAAU,IAAK,QAAQ,IAAK,UAAU,QAAS,MACrD,CAACC,EACC,MAAM,EACN,MAAM,IACN,aAAa,EACb,YAAY,QACZ,aAAa,IACb,QAAQ,KAER,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAChE,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAChE,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAClE,EAXCA,EAaD,CAACD,EACC,MAAM,EACN,MAAM,IACN,aAAa,EACb,YAAY,QACZ,aAAa,IACb,QAAQ,KAER,CAACC,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAChE,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAChE,CAACA,EAAO,gBAAgB,QAAS,aAAa,IAAK,QAAQ,IAAK,EAClE,EAXCD,EAaD,CAACE,EAAO,UAAU,GAAI,WAAW,GAAI,OAAO,IAAK,MAAM,GACrD,CAACD,EAAO,WAAW,aAAa,EAAG,aAAa,IAAK,QAAQ,IAAK,EAClE,CAACA,EAAO,WAAW,GAAG,GAAI,GAAG,GAAI,aAAa,EAAG,aAAa,IAAK,QAAQ,IAAK,EAChF,CAACA,EACC,WACA,GAAG,GACH,GAAG,GACH,aAAa,EACb,gBAAgB,QAChB,aAAa,IACb,QAAQ,IACV,EACF,EAZCC,EAaH,EAxCCF,EA0CL",
+  "names": ["XStack", "YStack", "ZStack", "StacksDemo"]
 }

package/dist/jsx/SwitchDemo.js

@@ -1,27 +1,2 @@
-import { Label, Separator, Switch, XStack, YStack } from "tamagui";
-function SwitchDemo() {
-  return <YStack width={200} alignItems="center" space="$3">
-    <SwitchWithLabel size="$2" />
-    <SwitchWithLabel size="$3" />
-    <SwitchWithLabel size="$4" />
-    <SwitchWithLabel size="$5" />
-  </YStack>;
-}
-function SwitchWithLabel(props) {
-  const id = `switch-${props.size.toString().slice(1)}`;
-  return <XStack width={200} alignItems="center" space="$4">
-    <Label
-      paddingRight="$0"
-      minWidth={90}
-      justifyContent="flex-end"
-      size={props.size}
-      htmlFor={id}
-    >Dark mode</Label>
-    <Separator minHeight={20} vertical />
-    <Switch id={id} size={props.size}><Switch.Thumb animation="quick" /></Switch>
-  </XStack>;
-}
-export {
-  SwitchDemo
-};
+import{Label as L,Separator as T,Switch as $,XStack as D,YStack as I}from"tamagui";function j(){return<I width={200}alignItems="center"space="$3"><S size="$2"/><S size="$3"/><S size="$4"/><S size="$5"/></I>}function S(m){const d=`switch-${m.size.toString().slice(1)}`;return<D width={200}alignItems="center"space="$4"><L paddingRight="$0"minWidth={90}justifyContent="flex-end"size={m.size}htmlFor={d}>Dark mode</L><T minHeight={20}vertical/><$ id={d}size={m.size}><$.Thumb animation="quick"/></$></D>}export{j as SwitchDemo};
 //# sourceMappingURL=SwitchDemo.js.map

package/dist/jsx/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": "AAAA,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,EAC7B,EALC;AAOL;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC;AAAA,MACC,aAAa;AAAA,MACb,UAAU;AAAA,MACV,eAAe;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,KACV,SAED,EARC;AAAA,IASD,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACnC,CAAC,OAAO,IAAI,IAAI,MAAM,MAAM,MAC1B,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EAdC;AAgBL;",
-  "names": []
+  "mappings": "AAAA,OAAS,SAAAA,EAAO,aAAAC,EAAuB,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAsB,UAEtE,SAASC,GAAa,CAC3B,MACE,CAACD,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACE,EAAgB,KAAK,IAAK,EAC3B,CAACA,EAAgB,KAAK,IAAK,EAC3B,CAACA,EAAgB,KAAK,IAAK,EAC3B,CAACA,EAAgB,KAAK,IAAK,EAC7B,EALCF,EAOL,CAEA,SAASE,EAAgBC,EAA6B,CACpD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IAClD,MACE,CAACJ,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACH,EACC,aAAa,IACb,UAAU,GACV,eAAe,UACf,MAAMO,EAAM,KACZ,SAASC,GACV,SAED,EARCR,EASD,CAACC,EAAU,WAAW,GAAI,QAAS,EACnC,CAACC,EAAO,IAAIM,EAAI,MAAMD,EAAM,MAC1B,CAACL,EAAO,MAAM,UAAU,OAAQ,EAClC,EAFCA,EAGH,EAdCC,EAgBL",
+  "names": ["Label", "Separator", "Switch", "XStack", "YStack", "SwitchDemo", "SwitchWithLabel", "props", "id"]
 }

package/dist/jsx/SwitchDemo.mjs

@@ -1,27 +1,2 @@
-import { Label, Separator, Switch, XStack, YStack } from "tamagui";
-function SwitchDemo() {
-  return <YStack width={200} alignItems="center" space="$3">
-    <SwitchWithLabel size="$2" />
-    <SwitchWithLabel size="$3" />
-    <SwitchWithLabel size="$4" />
-    <SwitchWithLabel size="$5" />
-  </YStack>;
-}
-function SwitchWithLabel(props) {
-  const id = `switch-${props.size.toString().slice(1)}`;
-  return <XStack width={200} alignItems="center" space="$4">
-    <Label
-      paddingRight="$0"
-      minWidth={90}
-      justifyContent="flex-end"
-      size={props.size}
-      htmlFor={id}
-    >Dark mode</Label>
-    <Separator minHeight={20} vertical />
-    <Switch id={id} size={props.size}><Switch.Thumb animation="quick" /></Switch>
-  </XStack>;
-}
-export {
-  SwitchDemo
-};
+import{Label as L,Separator as T,Switch as $,XStack as D,YStack as I}from"tamagui";function j(){return<I width={200}alignItems="center"space="$3"><S size="$2"/><S size="$3"/><S size="$4"/><S size="$5"/></I>}function S(m){const d=`switch-${m.size.toString().slice(1)}`;return<D width={200}alignItems="center"space="$4"><L paddingRight="$0"minWidth={90}justifyContent="flex-end"size={m.size}htmlFor={d}>Dark mode</L><T minHeight={20}vertical/><$ id={d}size={m.size}><$.Thumb animation="quick"/></$></D>}export{j as SwitchDemo};
 //# sourceMappingURL=SwitchDemo.mjs.map

package/dist/jsx/SwitchDemo.mjs.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": "AAAA,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,EAC7B,EALC;AAOL;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC;AAAA,MACC,aAAa;AAAA,MACb,UAAU;AAAA,MACV,eAAe;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,KACV,SAED,EARC;AAAA,IASD,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACnC,CAAC,OAAO,IAAI,IAAI,MAAM,MAAM,MAC1B,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EAdC;AAgBL;",
-  "names": []
+  "mappings": "AAAA,OAAS,SAAAA,EAAO,aAAAC,EAAuB,UAAAC,EAAQ,UAAAC,EAAQ,UAAAC,MAAsB,UAEtE,SAASC,GAAa,CAC3B,MACE,CAACD,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACE,EAAgB,KAAK,IAAK,EAC3B,CAACA,EAAgB,KAAK,IAAK,EAC3B,CAACA,EAAgB,KAAK,IAAK,EAC3B,CAACA,EAAgB,KAAK,IAAK,EAC7B,EALCF,EAOL,CAEA,SAASE,EAAgBC,EAA6B,CACpD,MAAMC,EAAK,UAAUD,EAAM,KAAK,SAAS,EAAE,MAAM,CAAC,IAClD,MACE,CAACJ,EAAO,OAAO,IAAK,WAAW,QAAS,MAAM,KAC5C,CAACH,EACC,aAAa,IACb,UAAU,GACV,eAAe,UACf,MAAMO,EAAM,KACZ,SAASC,GACV,SAED,EARCR,EASD,CAACC,EAAU,WAAW,GAAI,QAAS,EACnC,CAACC,EAAO,IAAIM,EAAI,MAAMD,EAAM,MAC1B,CAACL,EAAO,MAAM,UAAU,OAAQ,EAClC,EAFCA,EAGH,EAdCC,EAgBL",
+  "names": ["Label", "Separator", "Switch", "XStack", "YStack", "SwitchDemo", "SwitchWithLabel", "props", "id"]
 }

package/dist/jsx/TabsAdvancedDemo.js

@@ -1,220 +1,2 @@
-import { useState } from "react";
-import {
-  AnimatePresence,
-  Button,
-  H5,
-  SizableText,
-  Stack,
-  Tabs,
-  XStack,
-  YStack,
-  styled
-} from "tamagui";
-const demos = ["background", "underline"];
-const demosTitle = {
-  background: "Background Indicator",
-  underline: "Underline Indicator"
-};
-const TabsAdvancedDemo = () => {
-  const [demoIndex, setDemoIndex] = useState(0);
-  const demo = demos[demoIndex];
-  return <>
-    {demo === "underline" ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}
-    <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: "none" }}><Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>{demosTitle[demo]}</Button></XStack>
-  </>;
-};
-const TabsAdvancedBackground = () => {
-  const [tabState, setTabState] = useState({
-    activeAt: null,
-    currentTab: "tab1",
-    intentAt: null,
-    prevActiveAt: null
-  });
-  const setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 });
-  const setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 });
-  const setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 });
-  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
-  const direction = (() => {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  })();
-  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
-  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
-  const handleOnInteraction = (type, layout) => {
-    if (type === "select") {
-      setActiveIndicator(layout);
-    } else {
-      setIntentIndicator(layout);
-    }
-  };
-  return <Tabs
-    value={currentTab}
-    onValueChange={setCurrentTab}
-    orientation="horizontal"
-    size="$4"
-    padding="$2"
-    height={150}
-    flexDirection="column"
-    activationMode="manual"
-    backgroundColor="$background"
-    borderRadius="$4"
-    position="relative"
-  >
-    <YStack>
-      <AnimatePresence>{intentAt && <TabsRovingIndicator
-        borderRadius="$4"
-        width={intentAt.width}
-        height={intentAt.height}
-        x={intentAt.x}
-        y={intentAt.y}
-      />}</AnimatePresence>
-      <AnimatePresence>{activeAt && <TabsRovingIndicator
-        borderRadius="$4"
-        theme="active"
-        width={activeAt.width}
-        height={activeAt.height}
-        x={activeAt.x}
-        y={activeAt.y}
-      />}</AnimatePresence>
-      <Tabs.List
-        disablePassBorderRadius
-        loop={false}
-        aria-label="Manage your account"
-        space="$2"
-        backgroundColor="transparent"
-      >
-        <Tabs.Tab unstyled value="tab1" onInteraction={handleOnInteraction}><SizableText>Profile</SizableText></Tabs.Tab>
-        <Tabs.Tab unstyled value="tab2" onInteraction={handleOnInteraction}><SizableText>Connections</SizableText></Tabs.Tab>
-        <Tabs.Tab unstyled value="tab3" onInteraction={handleOnInteraction}><SizableText>Notifications</SizableText></Tabs.Tab>
-      </Tabs.List>
-    </YStack>
-    <AnimatePresence
-      exitBeforeEnter
-      enterVariant={enterVariant}
-      exitVariant={exitVariant}
-    ><AnimatedYStack key={currentTab} animation="100ms" x={0} opacity={1} flex={1}><Tabs.Content value={currentTab} forceMount flex={1} justifyContent="center"><H5 textAlign="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence>
-  </Tabs>;
-};
-const TabsAdvancedUnderline = () => {
-  const [tabState, setTabState] = useState({
-    activeAt: null,
-    currentTab: "tab1",
-    intentAt: null,
-    prevActiveAt: null
-  });
-  const setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 });
-  const setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 });
-  const setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 });
-  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
-  const direction = (() => {
-    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
-      return 0;
-    }
-    return activeAt.x > prevActiveAt.x ? -1 : 1;
-  })();
-  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
-  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
-  const handleOnInteraction = (type, layout) => {
-    if (type === "select") {
-      setActiveIndicator(layout);
-    } else {
-      setIntentIndicator(layout);
-    }
-  };
-  return <Tabs
-    value={currentTab}
-    onValueChange={setCurrentTab}
-    orientation="horizontal"
-    size="$4"
-    height={150}
-    flexDirection="column"
-    activationMode="manual"
-    backgroundColor="$background"
-    borderRadius="$4"
-  >
-    <YStack>
-      <AnimatePresence>{intentAt && <TabsRovingIndicator
-        width={intentAt.width}
-        height="$0.5"
-        x={intentAt.x}
-        bottom={0}
-      />}</AnimatePresence>
-      <AnimatePresence>{activeAt && <TabsRovingIndicator
-        theme="active"
-        active
-        width={activeAt.width}
-        height="$0.5"
-        x={activeAt.x}
-        bottom={0}
-      />}</AnimatePresence>
-      <Tabs.List
-        disablePassBorderRadius
-        loop={false}
-        aria-label="Manage your account"
-        borderBottomLeftRadius={0}
-        borderBottomRightRadius={0}
-        paddingBottom="$1.5"
-        borderColor="$color3"
-        borderBottomWidth="$0.5"
-        backgroundColor="transparent"
-      >
-        <Tabs.Tab
-          unstyled
-          padding="$5"
-          value="tab1"
-          onInteraction={handleOnInteraction}
-        ><SizableText>Profile</SizableText></Tabs.Tab>
-        <Tabs.Tab
-          unstyled
-          padding="$5"
-          value="tab2"
-          onInteraction={handleOnInteraction}
-        ><SizableText>Connections</SizableText></Tabs.Tab>
-        <Tabs.Tab
-          unstyled
-          padding="$5"
-          value="tab3"
-          onInteraction={handleOnInteraction}
-        ><SizableText>Notifications</SizableText></Tabs.Tab>
-      </Tabs.List>
-    </YStack>
-    <AnimatePresence
-      exitBeforeEnter
-      enterVariant={enterVariant}
-      exitVariant={exitVariant}
-    ><AnimatedYStack key={currentTab} animation="100ms" x={0} opacity={1} flex={1}><Tabs.Content value={currentTab} forceMount flex={1} justifyContent="center"><H5 textAlign="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence>
-  </Tabs>;
-};
-const TabsRovingIndicator = styled(Stack, {
-  position: "absolute",
-  backgroundColor: "$color5",
-  opacity: 0.7,
-  animation: "100ms",
-  enterStyle: {
-    opacity: 0
-  },
-  exitStyle: {
-    opacity: 0
-  },
-  variants: {
-    active: {
-      true: {
-        backgroundColor: "$color8",
-        opacity: 0.6
-      }
-    }
-  }
-});
-const AnimatedYStack = styled(YStack, {
-  variants: {
-    isLeft: { true: { x: -25, opacity: 0 } },
-    isRight: { true: { x: 25, opacity: 0 } },
-    defaultFade: { true: { opacity: 0 } }
-  }
-});
-export {
-  TabsAdvancedDemo
-};
+import{useState as B}from"react";import{AnimatePresence as $,Button as H,H5 as M,SizableText as S,Stack as j,Tabs as T,XStack as E,YStack as V,styled as Y}from"tamagui";const F=["background","underline"],N={background:"Background Indicator",underline:"Underline Indicator"},J=()=>{const[n,v]=B(0),p=F[n];return<>{p==="underline"?<U/>:<O/>}<E ai="center"space pos="absolute"b="$3"l="$4"$xxs={{dsp:"none"}}><H size="$2"onPress={()=>v(I=>(I+1)%F.length)}>{N[p]}</H></E></>},O=()=>{const[n,v]=B({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),p=e=>v({...n,currentTab:e}),I=e=>v({...n,intentAt:e}),R=e=>v({...n,prevActiveAt:n.activeAt,activeAt:e}),{activeAt:t,intentAt:x,prevActiveAt:h,currentTab:A}=n,g=(()=>!t||!h||t.x===h.x?0:t.x>h.x?-1:1)(),P=g===1?"isLeft":g===-1?"isRight":"defaultFade",z=g===1?"isRight":g===-1?"isLeft":"defaultFade",m=(e,C)=>{e==="select"?R(C):I(C)};return<T value={A}onValueChange={p}orientation="horizontal"size="$4"padding="$2"height={150}flexDirection="column"activationMode="manual"backgroundColor="$background"borderRadius="$4"position="relative"><V><$>{x&&<L borderRadius="$4"width={x.width}height={x.height}x={x.x}y={x.y}/>}</$><$>{t&&<L borderRadius="$4"theme="active"width={t.width}height={t.height}x={t.x}y={t.y}/>}</$><T.List disablePassBorderRadius loop={!1}aria-label="Manage your account"space="$2"backgroundColor="transparent"><T.Tab unstyled value="tab1"onInteraction={m}><S>Profile</S></T.Tab><T.Tab unstyled value="tab2"onInteraction={m}><S>Connections</S></T.Tab><T.Tab unstyled value="tab3"onInteraction={m}><S>Notifications</S></T.Tab></T.List></V><$ exitBeforeEnter enterVariant={P}exitVariant={z}><D key={A}animation="100ms"x={0}opacity={1}flex={1}><T.Content value={A}forceMount flex={1}justifyContent="center"><M textAlign="center">{A}</M></T.Content></D></$></T>},U=()=>{const[n,v]=B({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),p=e=>v({...n,currentTab:e}),I=e=>v({...n,intentAt:e}),R=e=>v({...n,prevActiveAt:n.activeAt,activeAt:e}),{activeAt:t,intentAt:x,prevActiveAt:h,currentTab:A}=n,g=(()=>!t||!h||t.x===h.x?0:t.x>h.x?-1:1)(),P=g===1?"isLeft":g===-1?"isRight":"defaultFade",z=g===1?"isRight":g===-1?"isLeft":"defaultFade",m=(e,C)=>{e==="select"?R(C):I(C)};return<T value={A}onValueChange={p}orientation="horizontal"size="$4"height={150}flexDirection="column"activationMode="manual"backgroundColor="$background"borderRadius="$4"><V><$>{x&&<L width={x.width}height="$0.5"x={x.x}bottom={0}/>}</$><$>{t&&<L theme="active"active width={t.width}height="$0.5"x={t.x}bottom={0}/>}</$><T.List disablePassBorderRadius loop={!1}aria-label="Manage your account"borderBottomLeftRadius={0}borderBottomRightRadius={0}paddingBottom="$1.5"borderColor="$color3"borderBottomWidth="$0.5"backgroundColor="transparent"><T.Tab unstyled padding="$5"value="tab1"onInteraction={m}><S>Profile</S></T.Tab><T.Tab unstyled padding="$5"value="tab2"onInteraction={m}><S>Connections</S></T.Tab><T.Tab unstyled padding="$5"value="tab3"onInteraction={m}><S>Notifications</S></T.Tab></T.List></V><$ exitBeforeEnter enterVariant={P}exitVariant={z}><D key={A}animation="100ms"x={0}opacity={1}flex={1}><T.Content value={A}forceMount flex={1}justifyContent="center"><M textAlign="center">{A}</M></T.Content></D></$></T>},L=Y(j,{position:"absolute",backgroundColor:"$color5",opacity:.7,animation:"100ms",enterStyle:{opacity:0},exitStyle:{opacity:0},variants:{active:{true:{backgroundColor:"$color8",opacity:.6}}}}),D=Y(V,{variants:{isLeft:{true:{x:-25,opacity:0}},isRight:{true:{x:25,opacity:0}},defaultFade:{true:{opacity:0}}}});export{J as TabsAdvancedDemo};
 //# sourceMappingURL=TabsAdvancedDemo.js.map