@tamagui/demos 1.14.0 → 1.14.2

package/dist/jsx/SheetDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SheetDemo.tsx"],
   "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Input, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n  const [position, setPosition] = useState(0)\n  const [open, setOpen] = useState(false)\n  const [modal, setModal] = useState(false)\n  const [innerOpen, setInnerOpen] = useState(false)\n\n  return (\n    <>\n      <XStack space>\n        <Button onPress={() => setOpen(true)}>Open</Button>\n        <Button onPress={() => setModal((x) => !x)}>\n          {modal ? 'Type: Modal' : 'Type: Inline'}\n        </Button>\n      </XStack>\n\n      <Sheet\n        forceRemoveScrollEnabled={open}\n        modal={modal}\n        open={open}\n        onOpenChange={setOpen}\n        snapPoints={[85, 50, 25]}\n        dismissOnSnapToBottom\n        position={position}\n        onPositionChange={setPosition}\n        zIndex={100_000}\n        animation=\"bouncy\" // for the css driver\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame flex={1} padding=\"$4\" justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n          <Input width={200} />\n          {modal && (\n            <>\n              <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n              <Button\n                size=\"$6\"\n                circular\n                icon={ChevronUp}\n                onPress={() => setInnerOpen(true)}\n              ></Button>\n            </>\n          )}\n        </Sheet.Frame>\n      </Sheet>\n    </>\n  )\n}\n\nfunction InnerSheet(props: SheetProps) {\n  return (\n    <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n      <Sheet.Overlay />\n      <Sheet.Handle />\n      <Sheet.Frame flex={1} justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n        <Sheet.ScrollView padding=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            alignSelf=\"center\"\n            icon={ChevronDown}\n            onPress={() => props.onOpenChange?.(false)}\n          />\n          <H1>Hello world</H1>\n          <H2>You can scroll me</H2>\n          {[1, 2, 3].map((i) => (\n            <Paragraph key={i} size=\"$10\">\n              Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n              pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n              ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n              ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n              velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n            </Paragraph>\n          ))}\n        </Sheet.ScrollView>\n      </Sheet.Frame>\n    </Sheet>\n  )\n}\n"],
-  "mappings": "AAAA,OAAS,eAAAA,EAAa,aAAAC,MAAiB,wBACvC,OAAS,SAAAC,MAAa,iBAEtB,OAAS,YAAAC,MAAgB,QACzB,OAAS,UAAAC,EAAQ,MAAAC,EAAI,MAAAC,EAAI,SAAAC,EAAO,aAAAC,EAAW,UAAAC,MAAc,UAElD,MAAMC,EAAY,IAAM,CAC7B,KAAM,CAACC,EAAUC,CAAW,EAAIT,EAAS,CAAC,EACpC,CAACU,EAAMC,CAAO,EAAIX,EAAS,EAAK,EAChC,CAACY,EAAOC,CAAQ,EAAIb,EAAS,EAAK,EAClC,CAACc,EAAWC,CAAY,EAAIf,EAAS,EAAK,EAEhD,MACE,EACE,CAACM,EAAO,MACN,CAACL,EAAO,SAAS,IAAMU,EAAQ,EAAI,GAAG,IAAI,EAAzCV,EACD,CAACA,EAAO,SAAS,IAAMY,EAAUG,GAAM,CAACA,CAAC,IACtCJ,EAAQ,cAAgB,eAC3B,EAFCX,EAGH,EALCK,EAOD,CAACP,EACC,0BAA0BW,EAC1B,OAAOE,EACP,MAAMF,EACN,cAAcC,EACd,YAAY,CAAC,GAAI,GAAI,EAAE,EACvB,sBACA,UAAUH,EACV,kBAAkBC,EAClB,QAAQ,IACR,UAAU,SAEV,CAACV,EAAM,OAAQ,EACf,CAACA,EAAM,MAAO,EACd,CAACA,EAAM,MAAM,MAAM,EAAG,QAAQ,IAAK,eAAe,QAAS,WAAW,QAAS,MAAM,KACnF,CAACE,EAAO,KAAK,IAAK,SAAS,MAAMJ,EAAa,SAAS,IAAMc,EAAQ,EAAK,EAAG,EAC7E,CAACP,EAAM,OAAO,IAAK,GAClBQ,GACC,EACE,CAACK,EAAW,MAAMH,EAAW,cAAcC,EAAc,EACzD,CAACd,EACC,KAAK,IACL,SACA,MAAMH,EACN,SAAS,IAAMiB,EAAa,EAAI,EACjC,EACH,IAEJ,EAdChB,EAAM,MAeT,EA7BCA,EA8BH,GAEJ,EAEA,SAASkB,EAAWC,EAAmB,CACrC,MACE,CAACnB,EAAM,MAAM,YAAY,CAAC,EAAE,EAAG,yBAA0BmB,GACvD,CAACnB,EAAM,OAAQ,EACf,CAACA,EAAM,MAAO,EACd,CAACA,EAAM,MAAM,MAAM,EAAG,eAAe,QAAS,WAAW,QAAS,MAAM,KACtE,CAACA,EAAM,WAAW,QAAQ,IAAK,MAC7B,CAACE,EACC,KAAK,IACL,SACA,UAAU,QACV,MAAMJ,EACN,SAAS,IAAMqB,EAAM,eAAe,EAAK,EAC3C,EACA,CAAChB,EAAG,WAAW,EAAdA,EACD,CAACC,EAAG,iBAAiB,EAApBA,GACA,CAAC,EAAG,EAAG,CAAC,EAAE,IAAKgB,GACd,CAACd,EAAU,KAAKc,EAAG,KAAK,MAAM,0WAM9B,EANCd,EAOF,EACH,EAnBCN,EAAM,WAoBT,EArBCA,EAAM,MAsBT,EAzBCA,EA2BL",
-  "names": ["ChevronDown", "ChevronUp", "Sheet", "useState", "Button", "H1", "H2", "Input", "Paragraph", "XStack", "SheetDemo", "position", "setPosition", "open", "setOpen", "modal", "setModal", "innerOpen", "setInnerOpen", "x", "InnerSheet", "props", "i"]
+  "mappings": "AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,EAAzC;AAAA,MACD,CAAC,OAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,IACtC,QAAQ,gBAAgB,eAC3B,EAFC;AAAA,IAGH,EALC;AAAA,IAOD,CAAC;AAAA,MACC,0BAA0B;AAAA,MAC1B,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,UAAU;AAAA;AAAA,MAEV,CAAC,MAAM,QAAQ;AAAA,MACf,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM,MAAM,MAAM,GAAG,QAAQ,KAAK,eAAe,SAAS,WAAW,SAAS,MAAM;AAAA,QACnF,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,QAC7E,CAAC,MAAM,OAAO,KAAK;AAAA,SAClB,SACC;AAAA,UACE,CAAC,WAAW,MAAM,WAAW,cAAc,cAAc;AAAA,UACzD,CAAC;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,IAAI;AAAA,UACjC;AAAA,QACH;AAAA,MAEJ,EAdC,MAAM;AAAA,IAeT,EA7BC;AAAA,EA8BH;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,CAAC,MAAM,MAAM,YAAY,CAAC,EAAE,GAAG,0BAA0B;AAAA,IACvD,CAAC,MAAM,QAAQ;AAAA,IACf,CAAC,MAAM,OAAO;AAAA,IACd,CAAC,MAAM,MAAM,MAAM,GAAG,eAAe,SAAS,WAAW,SAAS,MAAM,KACtE,CAAC,MAAM,WAAW,QAAQ,KAAK;AAAA,MAC7B,CAAC;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS,MAAM,MAAM,eAAe,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,GAAG,WAAW,EAAd;AAAA,MACD,CAAC,GAAG,iBAAiB,EAApB;AAAA,OACA,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,0WAM9B,EANC,UAOF;AAAA,IACH,EAnBC,MAAM,WAoBT,EArBC,MAAM;AAAA,EAsBT,EAzBC;AA2BL;",
+  "names": []
 }

package/dist/jsx/SliderDemo.js

@@ -1,2 +1,18 @@
-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};
+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
+};
 //# sourceMappingURL=SliderDemo.js.map

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

package/dist/jsx/SliderDemo.mjs

@@ -1,2 +1,18 @@
-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};
+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
+};
 //# 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,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"]
+  "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": []
 }

package/dist/jsx/SpinnerDemo.js

@@ -1,2 +1,11 @@
-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};
+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
+};
 //# 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,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"]
+  "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": []
 }

package/dist/jsx/SpinnerDemo.mjs

@@ -1,2 +1,11 @@
-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};
+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
+};
 //# 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,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"]
+  "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": []
 }

package/dist/jsx/StacksDemo.js

@@ -1,2 +1,46 @@
-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};
+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
+};
 //# 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,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"]
+  "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": []
 }

package/dist/jsx/StacksDemo.mjs

@@ -1,2 +1,46 @@
-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};
+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
+};
 //# 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,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"]
+  "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": []
 }

package/dist/jsx/SwitchDemo.js

@@ -1,2 +1,27 @@
-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};
+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
+};
 //# 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,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"]
+  "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": []
 }

package/dist/jsx/SwitchDemo.mjs

@@ -1,2 +1,27 @@
-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};
+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
+};
 //# 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,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"]
+  "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": []
 }

package/dist/jsx/TabsAdvancedDemo.js

@@ -1,2 +1,220 @@
-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};
+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
+};
 //# sourceMappingURL=TabsAdvancedDemo.js.map