@tamagui/demos 1.2.8 → 1.2.10

package/dist/jsx/SheetDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "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, 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      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n\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 f={1} jc=\"center\" ai=\"center\" space=\"$5\">\n        <Sheet.ScrollView p=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            als=\"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,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,WAAW,cAAc;AAE3C,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;AAAA,MAER,CAAC,MAAM,QAAQ;AAAA,MACf,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,MAAM;AAAA,QACtD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,SAE5E,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,EA5BC;AAAA,EA6BH;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,GAAG,GAAG,GAAG,SAAS,GAAG,SAAS,MAAM,KAC/C,CAAC,MAAM,WAAW,EAAE,KAAK;AAAA,MACvB,CAAC;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,IAAI;AAAA,QACJ,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.mjs

@@ -0,0 +1,18 @@
+import { Slider, XStack } from "tamagui";
+function SliderDemo() {
+  return <XStack height={200} ai="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 bordered circular elevate index={0} />
+    {children}
+  </Slider>;
+}
+export {
+  SliderDemo
+};
+//# sourceMappingURL=SliderDemo.mjs.map

package/dist/jsx/SliderDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SliderDemo.tsx"],
+  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb bordered circular elevate index={0} />\n      {children}\n    </Slider>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,GAAG,SAAS,MAAM;AAAA,IACrC,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,SAAS,SAAS,QAAQ,OAAO,GAAG;AAAA,KACjD;AAAA,EACH,EANC;AAQL;",
+  "names": []
+}

package/dist/jsx/SpinnerDemo.mjs

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

package/dist/jsx/SpinnerDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SpinnerDemo.tsx"],
+  "sourcesContent": ["import { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$4\" ai=\"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,EAAE,KAAK,MAAM,KAAK,GAAG;AAAA,IAC3B,CAAC,QAAQ,KAAK,QAAQ,MAAM,WAAW;AAAA,IACvC,CAAC,QAAQ,KAAK,QAAQ,MAAM,YAAY;AAAA,EAC1C,EAHC;AAKL;",
+  "names": []
+}

package/dist/jsx/StacksDemo.mjs

@@ -0,0 +1,24 @@
+import { XStack, YStack, ZStack } from "tamagui";
+function StacksDemo() {
+  return <XStack maw={250} p="$2" als="center" space>
+    <YStack flex={1} space="$2" bw={2} boc="$color" br="$4" p="$2">
+      <YStack bc="$color" br="$3" p="$2" />
+      <YStack bc="$color" br="$3" p="$2" />
+      <YStack bc="$color" br="$3" p="$2" />
+    </YStack>
+    <XStack flex={1} space="$2" bw={2} boc="$color" br="$4" p="$2">
+      <YStack bc="$color" br="$3" p="$2" />
+      <YStack bc="$color" br="$3" p="$2" />
+      <YStack bc="$color" br="$3" p="$2" />
+    </XStack>
+    <ZStack maw={50} mah={85} w={100} flex={1}>
+      <YStack fullscreen bw={2} br="$4" p="$2" />
+      <YStack fullscreen y={10} x={10} bw={2} br="$4" p="$2" />
+      <YStack fullscreen y={20} x={20} bw={2} bc="$color" br="$4" p="$2" />
+    </ZStack>
+  </XStack>;
+}
+export {
+  StacksDemo
+};
+//# sourceMappingURL=StacksDemo.mjs.map

package/dist/jsx/StacksDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "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 maw={250} p=\"$2\" als=\"center\" space>\n      <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n      </YStack>\n\n      <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n      </XStack>\n\n      <ZStack maw={50} mah={85} w={100} flex={1}>\n        <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n        <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n        <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n      </ZStack>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AACA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,KAAK,KAAK,EAAE,KAAK,IAAI,SAAS;AAAA,IACpC,CAAC,OAAO,MAAM,GAAG,MAAM,KAAK,IAAI,GAAG,IAAI,SAAS,GAAG,KAAK,EAAE;AAAA,MACxD,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrC,EAJC;AAAA,IAMD,CAAC,OAAO,MAAM,GAAG,MAAM,KAAK,IAAI,GAAG,IAAI,SAAS,GAAG,KAAK,EAAE;AAAA,MACxD,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,MACnC,CAAC,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrC,EAJC;AAAA,IAMD,CAAC,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM;AAAA,MACtC,CAAC,OAAO,WAAW,IAAI,GAAG,GAAG,KAAK,EAAE,KAAK;AAAA,MACzC,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,GAAG,KAAK,EAAE,KAAK;AAAA,MACvD,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,GAAG,SAAS,GAAG,KAAK,EAAE,KAAK;AAAA,IACrE,EAJC;AAAA,EAKH,EAlBC;AAoBL;",
+  "names": []
+}

package/dist/jsx/SwitchDemo.mjs

@@ -0,0 +1,21 @@
+import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+function SwitchDemo() {
+  return <YStack w={200} ai="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 w={200} ai="center" space="$4">
+    <Label pr="$0" miw={90} jc="flex-end" size={props.size} htmlFor={id}>Dark mode</Label>
+    <Separator mih={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

@@ -0,0 +1,7 @@
+{
+  "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 w={200} ai=\"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 w={200} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={90} jc=\"flex-end\" size={props.size} htmlFor={id}>\n        Dark mode\n      </Label>\n      <Separator mih={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,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,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,GAAG,KAAK,GAAG,SAAS,MAAM;AAAA,IAChC,CAAC,MAAM,GAAG,KAAK,KAAK,IAAI,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,IAAI,SAErE,EAFC;AAAA,IAGD,CAAC,UAAU,KAAK,IAAI,SAAS;AAAA,IAC7B,CAAC,OAAO,IAAI,IAAI,MAAM,MAAM,MAC1B,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EARC;AAUL;",
+  "names": []
+}

package/dist/jsx/TextDemo.mjs

@@ -0,0 +1,16 @@
+import { Paragraph, SizableText, Text, XStack, YStack } from "tamagui";
+function TextDemo() {
+  return <YStack space="$2" ai="center">
+    <Text>Text</Text>
+    <SizableText size="$3">SizableText</SizableText>
+    <XStack space>
+      <SizableText theme="alt1" size="$3">alt1</SizableText>
+      <SizableText theme="alt2" size="$3">alt2</SizableText>
+    </XStack>
+    <Paragraph size="$2" fow="800">Paragraph</Paragraph>
+  </YStack>;
+}
+export {
+  TextDemo
+};
+//# sourceMappingURL=TextDemo.mjs.map

package/dist/jsx/TextDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TextDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" ai=\"center\">\n      <Text>Text</Text>\n      <SizableText size=\"$3\">SizableText</SizableText>\n      <XStack space>\n        <SizableText theme=\"alt1\" size=\"$3\">\n          alt1\n        </SizableText>\n        <SizableText theme=\"alt2\" size=\"$3\">\n          alt2\n        </SizableText>\n      </XStack>\n      <Paragraph size=\"$2\" fow=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AACA,SAAS,WAAW,aAAa,MAAM,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,CAAC,OAAO,MAAM,KAAK,GAAG;AAAA,IACpB,CAAC,KAAK,IAAI,EAAT;AAAA,IACD,CAAC,YAAY,KAAK,KAAK,WAAW,EAAjC;AAAA,IACD,CAAC,OAAO;AAAA,MACN,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,UAAU,KAAK,KAAK,IAAI,MAAM,SAE/B,EAFC;AAAA,EAGH,EAdC;AAgBL;",
+  "names": []
+}

package/dist/jsx/ThemeInverseDemo.mjs

@@ -0,0 +1,19 @@
+import { Button, Theme, XStack, YStack } from "tamagui";
+function ThemeInverseDemo() {
+  return <XStack space>
+    <Buttons />
+    <Theme inverse><Buttons /></Theme>
+  </XStack>;
+}
+function Buttons() {
+  return <YStack bc="$background" p="$3" br="$3" space>
+    <Button>Dark</Button>
+    <Button themeInverse>Inversed</Button>
+    <Button theme="alt1">Alt1 Dark</Button>
+    <Theme name="yellow"><Button>Yellow dark</Button></Theme>
+  </YStack>;
+}
+export {
+  ThemeInverseDemo
+};
+//# sourceMappingURL=ThemeInverseDemo.mjs.map

package/dist/jsx/ThemeInverseDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ThemeInverseDemo.tsx"],
+  "sourcesContent": ["import { Button, Theme, XStack, YStack } from 'tamagui'\n\nexport function ThemeInverseDemo() {\n  return (\n    <XStack space>\n      <Buttons />\n      <Theme inverse>\n        <Buttons />\n      </Theme>\n    </XStack>\n  )\n}\n\nfunction Buttons() {\n  return (\n    <YStack bc=\"$background\" p=\"$3\" br=\"$3\" space>\n      <Button>Dark</Button>\n      <Button themeInverse>Inversed</Button>\n      <Button theme=\"alt1\">Alt1 Dark</Button>\n      <Theme name=\"yellow\">\n        <Button>Yellow dark</Button>\n      </Theme>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,GAAG,cAAc,EAAE,KAAK,GAAG,KAAK;AAAA,IACtC,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
+  "names": []
+}

package/dist/jsx/TokensDemo.mjs

@@ -0,0 +1,91 @@
+import { getConfig } from "@tamagui/core";
+import { useState } from "react";
+import {
+  Button,
+  H2,
+  H3,
+  H4,
+  Separator,
+  Square,
+  XGroup,
+  XStack,
+  YStack
+} from "tamagui";
+const sections = [
+  {
+    name: `Size`,
+    key: `size`
+  },
+  {
+    name: `Space`,
+    key: "space"
+  },
+  {
+    name: `Space (-)`,
+    key: `spaceNegative`
+  },
+  {
+    name: `Radius`,
+    key: `radius`
+  }
+];
+function TokensDemo() {
+  const [section, setSection] = useState("size");
+  return <YStack space>
+    <XGroup ai="center" als="center">{sections.map(({ name, key }) => {
+      return <Button
+        key={key}
+        size="$3"
+        theme={section === key ? "active" : null}
+        fontFamily="$silkscreen"
+        onPress={() => setSection(key)}
+      >{name}</Button>;
+    })}</XGroup>
+    {(section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && <SizeSection section={section} />}
+  </YStack>;
+}
+function SizeSection({ section }) {
+  const allTokens = getConfig().tokens;
+  const tokens = allTokens[section.startsWith("space") ? "space" : section];
+  const st = Object.keys(tokens).sort(
+    (a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1
+  );
+  const spaceTokens = st.filter((t) => parseFloat(t) >= 0 && t !== "-0");
+  const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0 || t === "-0").sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
+  return <YStack f={1} space>
+    <H2>Sizes</H2>
+    <YStack w="100%" space="$2" separator={<Separator />}>{(section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+      (token) => {
+        return <XStack w="100%" ai="center" key={token}>
+          <YStack w="25%"><H3 size="$6">
+            {"$"}
+            {token}
+          </H3></YStack>
+          <YStack w="20%"><H4 size="$5">
+            {tokens[token]?.val}
+            {"px"}
+          </H4></YStack>
+          <Square
+            size={tokens[token]?.val}
+            bc="$color3"
+            {...section === "spaceNegative" && {
+              bc: "$red3",
+              size: -tokens[spaceTokensNegative.find(
+                (t) => parseFloat(t) === -parseFloat(token)
+              ) ?? token]?.val
+            }}
+            {...section === "radius" && {
+              // @ts-ignore
+              size: allTokens.size[token]?.val,
+              br: tokens[token]?.val
+            }}
+          />
+        </XStack>;
+      }
+    )}</YStack>
+  </YStack>;
+}
+export {
+  TokensDemo
+};
+//# sourceMappingURL=TokensDemo.mjs.map

package/dist/jsx/TokensDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TokensDemo.tsx"],
+  "sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport {\n  Button,\n  H2,\n  H3,\n  H4,\n  ScrollView,\n  Separator,\n  Square,\n  XGroup,\n  XStack,\n  YStack,\n} from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n  {\n    name: `Size`,\n    key: `size`,\n  },\n  {\n    name: `Space`,\n    key: 'space',\n  },\n  {\n    name: `Space (-)`,\n    key: `spaceNegative`,\n  },\n  {\n    name: `Radius`,\n    key: `radius`,\n  },\n]\n\nexport function TokensDemo() {\n  const [section, setSection] = useState<Section>('size')\n\n  return (\n    <YStack space>\n      <XGroup ai=\"center\" als=\"center\">\n        {sections.map(({ name, key }) => {\n          return (\n            <Button\n              key={key}\n              size=\"$3\"\n              theme={section === key ? 'active' : null}\n              fontFamily=\"$silkscreen\"\n              onPress={() => setSection(key)}\n            >\n              {name}\n            </Button>\n          )\n        })}\n      </XGroup>\n\n      {(section === 'size' ||\n        section === 'spaceNegative' ||\n        section === 'space' ||\n        section === 'radius') && <SizeSection section={section} />}\n    </YStack>\n  )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n  const allTokens = getConfig().tokens\n  const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n  const st = Object.keys(tokens).sort((a, b) =>\n    parseFloat(a) > parseFloat(b) ? 1 : -1,\n  )\n  const spaceTokens = st.filter((t) => parseFloat(t) >= 0 && t !== '-0')\n  const spaceTokensNegative = st\n    .filter((t) => parseFloat(t) < 0 || t === '-0')\n    .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n  return (\n    <YStack f={1} space>\n      <H2>Sizes</H2>\n      <YStack w=\"100%\" space=\"$2\" separator={<Separator />}>\n        {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n          (token) => {\n            return (\n              <XStack w=\"100%\" ai=\"center\" key={token}>\n                <YStack w=\"25%\">\n                  <H3 size=\"$6\">${token}</H3>\n                </YStack>\n                <YStack w=\"20%\">\n                  <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n                </YStack>\n                <Square\n                  size={tokens[token]?.val}\n                  bc=\"$color3\"\n                  {...(section === 'spaceNegative' && {\n                    bc: '$red3',\n                    size: -tokens[\n                      spaceTokensNegative.find(\n                        (t) => parseFloat(t) === -parseFloat(token),\n                      ) ?? token\n                    ]?.val,\n                  })}\n                  {...(section === 'radius' && {\n                    // @ts-ignore\n                    size: allTokens.size[token]?.val,\n                    br: tokens[token]?.val,\n                  })}\n                />\n              </XStack>\n            )\n          },\n        )}\n      </YStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/TooltipDemo.mjs

@@ -0,0 +1,64 @@
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle
+} from "@tamagui/lucide-icons";
+import {
+  Button,
+  Paragraph,
+  Theme,
+  Tooltip,
+  TooltipGroup,
+  XStack,
+  YStack
+} from "tamagui";
+function TooltipDemo() {
+  return <TooltipGroup delay={{ open: 3e3, close: 100 }}><YStack space="$2" als="center">
+    <XStack space="$2">
+      <Demo groupId="0" placement="top-end" Icon={Circle} />
+      <Demo groupId="1" placement="top" Icon={ChevronUp} />
+      <Demo groupId="2" placement="top-start" Icon={Circle} />
+    </XStack>
+    <XStack space="$2">
+      <Demo groupId="3" placement="left" Icon={ChevronLeft} />
+      <YStack f={1} />
+      <Demo groupId="4" placement="right" Icon={ChevronRight} />
+    </XStack>
+    <XStack space="$2">
+      <Demo groupId="5" placement="bottom-end" Icon={Circle} />
+      <Demo groupId="6" placement="bottom" Icon={ChevronDown} />
+      <Demo groupId="7" placement="bottom-start" Icon={Circle} />
+    </XStack>
+  </YStack></TooltipGroup>;
+}
+function Demo({ Icon, ...props }) {
+  return <Tooltip {...props}>
+    <Tooltip.Trigger><Button icon={Icon} circular /></Tooltip.Trigger>
+    <Theme inverse><Tooltip.Content
+      enterStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}
+      exitStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}
+      scale={1}
+      x={0}
+      y={0}
+      o={1}
+      animation={[
+        "quick",
+        {
+          opacity: {
+            overshootClamping: true
+          }
+        }
+      ]}
+    >
+      <Tooltip.Arrow />
+      <Paragraph size="$2" lineHeight="$1">Hello world</Paragraph>
+    </Tooltip.Content></Theme>
+  </Tooltip>;
+}
+export {
+  Demo,
+  TooltipDemo
+};
+//# sourceMappingURL=TooltipDemo.mjs.map

package/dist/jsx/TooltipDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TooltipDemo.tsx"],
+  "sourcesContent": ["import {\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  Circle,\n} from '@tamagui/lucide-icons'\nimport React from 'react'\nimport {\n  Button,\n  Paragraph,\n  Theme,\n  Tooltip,\n  TooltipGroup,\n  TooltipProps,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nexport function TooltipDemo() {\n  return (\n    <TooltipGroup delay={{ open: 3000, close: 100 }}>\n      <YStack space=\"$2\" als=\"center\">\n        <XStack space=\"$2\">\n          <Demo groupId=\"0\" placement=\"top-end\" Icon={Circle} />\n          <Demo groupId=\"1\" placement=\"top\" Icon={ChevronUp} />\n          <Demo groupId=\"2\" placement=\"top-start\" Icon={Circle} />\n        </XStack>\n        <XStack space=\"$2\">\n          <Demo groupId=\"3\" placement=\"left\" Icon={ChevronLeft} />\n          <YStack f={1} />\n          <Demo groupId=\"4\" placement=\"right\" Icon={ChevronRight} />\n        </XStack>\n        <XStack space=\"$2\">\n          <Demo groupId=\"5\" placement=\"bottom-end\" Icon={Circle} />\n          <Demo groupId=\"6\" placement=\"bottom\" Icon={ChevronDown} />\n          <Demo groupId=\"7\" placement=\"bottom-start\" Icon={Circle} />\n        </XStack>\n      </YStack>\n    </TooltipGroup>\n  )\n}\n\nexport function Demo({ Icon, ...props }: TooltipProps & { Icon?: any }) {\n  return (\n    <Tooltip {...props}>\n      <Tooltip.Trigger>\n        <Button icon={Icon} circular />\n      </Tooltip.Trigger>\n      <Theme inverse>\n        <Tooltip.Content\n          enterStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: -5, o: 0, scale: 0.9 }}\n          scale={1}\n          x={0}\n          y={0}\n          o={1}\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        >\n          <Tooltip.Arrow />\n          <Paragraph size=\"$2\" lineHeight=\"$1\">\n            Hello world\n          </Paragraph>\n        </Tooltip.Content>\n      </Theme>\n    </Tooltip>\n  )\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,CAAC,aAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,CAAC,OAAO,MAAM,KAAK,IAAI;AAAA,IACrB,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,UAAU,MAAM,QAAQ;AAAA,MACpD,CAAC,KAAK,QAAQ,IAAI,UAAU,MAAM,MAAM,WAAW;AAAA,MACnD,CAAC,KAAK,QAAQ,IAAI,UAAU,YAAY,MAAM,QAAQ;AAAA,IACxD,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,OAAO,MAAM,aAAa;AAAA,MACtD,CAAC,OAAO,GAAG,GAAG;AAAA,MACd,CAAC,KAAK,QAAQ,IAAI,UAAU,QAAQ,MAAM,cAAc;AAAA,IAC1D,EAJC;AAAA,IAKD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,KAAK,QAAQ,IAAI,UAAU,aAAa,MAAM,QAAQ;AAAA,MACvD,CAAC,KAAK,QAAQ,IAAI,UAAU,SAAS,MAAM,aAAa;AAAA,MACxD,CAAC,KAAK,QAAQ,IAAI,UAAU,eAAe,MAAM,QAAQ;AAAA,IAC3D,EAJC;AAAA,EAKH,EAhBC,OAiBH,EAlBC;AAoBL;AAEO,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AACtE,SACE,CAAC,YAAY;AAAA,IACX,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,SAAS,EAC/B,EAFC,QAAQ;AAAA,IAGT,CAAC,MAAM,QACL,CAAC,QAAQ;AAAA,MACP,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI;AAAA,MAC5C,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI;AAAA,MAC3C,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA;AAAA,MAEA,CAAC,QAAQ,MAAM;AAAA,MACf,CAAC,UAAU,KAAK,KAAK,WAAW,KAAK,WAErC,EAFC;AAAA,IAGH,EApBC,QAAQ,QAqBX,EAtBC;AAAA,EAuBH,EA3BC;AA6BL;",
+  "names": []
+}

package/dist/jsx/UpdateThemeDemo.mjs

@@ -0,0 +1,50 @@
+import * as Config from "@tamagui/config-base";
+import { useState } from "react";
+import {
+  Button,
+  Square,
+  Theme,
+  YStack,
+  addTheme,
+  getVariableValue,
+  updateTheme,
+  useForceUpdate,
+  useIsomorphicLayoutEffect
+} from "tamagui";
+const colors = Config.config.tokens.color;
+const colorKeys = Object.keys(colors);
+function UpdateThemeDemo() {
+  const [theme, setTheme] = useState();
+  const update = useForceUpdate();
+  useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: "custom",
+      insertCSS: true,
+      theme: {
+        color: "red"
+      }
+    });
+    setTheme("custom");
+  }, []);
+  return <YStack ai="center" space>
+    <Theme name={theme ?? null}><Square borderRadius="$8" size={100} backgroundColor="$color" /></Theme>
+    <Button
+      onPress={() => {
+        const randomColor = getVariableValue(
+          colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
+        );
+        updateTheme({
+          name: "custom",
+          theme: {
+            color: randomColor
+          }
+        });
+        update();
+      }}
+    >Set to random color</Button>
+  </YStack>;
+}
+export {
+  UpdateThemeDemo
+};
+//# sourceMappingURL=UpdateThemeDemo.mjs.map

package/dist/jsx/UpdateThemeDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/UpdateThemeDemo.tsx"],
+  "sourcesContent": ["import * as Config from '@tamagui/config-base'\nimport React, { useState } from 'react'\nimport {\n  Button,\n  Square,\n  Theme,\n  YStack,\n  addTheme,\n  getVariableValue,\n  updateTheme,\n  useForceUpdate,\n  useIsomorphicLayoutEffect,\n} from 'tamagui'\n\nconst colors = Config.config.tokens.color\nconst colorKeys = Object.keys(colors)\n\nexport function UpdateThemeDemo() {\n  const [theme, setTheme] = useState<any>()\n  const update = useForceUpdate()\n\n  useIsomorphicLayoutEffect(() => {\n    addTheme({\n      name: 'custom',\n      insertCSS: true,\n      theme: {\n        color: 'red',\n      },\n    })\n    setTheme('custom')\n  }, [])\n\n  return (\n    <YStack ai=\"center\" space>\n      <Theme name={theme ?? null}>\n        <Square borderRadius=\"$8\" size={100} backgroundColor=\"$color\" />\n      </Theme>\n\n      <Button\n        onPress={() => {\n          const randomColor = getVariableValue(\n            colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]],\n          )\n          updateTheme({\n            name: 'custom',\n            theme: {\n              color: randomColor,\n            },\n          })\n          update()\n        }}\n      >\n        Set to random color\n      </Button>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,YAAY,YAAY;AACxB,SAAgB,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,OAAO,OAAO,OAAO;AACpC,MAAM,YAAY,OAAO,KAAK,MAAM;AAE7B,SAAS,kBAAkB;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc;AACxC,QAAM,SAAS,eAAe;AAE9B,4BAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,MACT;AAAA,IACF,CAAC;AACD,aAAS,QAAQ;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,CAAC,OAAO,GAAG,SAAS;AAAA,IAClB,CAAC,MAAM,MAAM,SAAS,MACpB,CAAC,OAAO,aAAa,KAAK,MAAM,KAAK,gBAAgB,SAAS,EAChE,EAFC;AAAA,IAID,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,cAAc;AAAA,UAClB,OAAO,UAAU,KAAK,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,CAAC,CAAC;AAAA,QAChE;AACA,oBAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QACF,CAAC;AACD,eAAO;AAAA,MACT;AAAA,KACD,mBAED,EAfC;AAAA,EAgBH,EArBC;AAuBL;",
+  "names": []
+}

package/dist/jsx/conf.mjs

@@ -0,0 +1,5 @@
+import { config as config2 } from "@tamagui/config-base";
+export {
+  config2 as config
+};
+//# sourceMappingURL=conf.mjs.map

package/dist/jsx/conf.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/conf.tsx"],
+  "sourcesContent": ["import { config } from '@tamagui/config-base'\nimport { InferTamaguiConfig } from '@tamagui/core'\n\nexport { config } from '@tamagui/config-base'\n\nexport type Conf = InferTamaguiConfig<typeof config>\n\ndeclare module 'tamagui' {\n  interface TamaguiCustomConfig extends Conf {}\n}\n"],
+  "mappings": "AAGA,SAAS,UAAAA,eAAc;",
+  "names": ["config"]
+}

package/dist/jsx/index.mjs

@@ -0,0 +1,78 @@
+import { AlertDialogDemo } from "./AlertDialogDemo";
+import { AnimationsDemo } from "./AnimationsDemo";
+import { AnimationsEnterDemo } from "./AnimationsEnterDemo";
+import { AnimationsHoverDemo } from "./AnimationsHoverDemo";
+import { AnimationsTimingDemo } from "./AnimationsTimingDemo";
+import { AnimationsPresenceDemo } from "./AnimationsPresenceDemo";
+import { AvatarDemo } from "./AvatarDemo";
+import { ButtonDemo } from "./ButtonDemo";
+import { CardDemo } from "./CardDemo";
+import { DialogDemo } from "./DialogDemo";
+import { AddThemeDemo } from "./AddThemeDemo";
+import { UpdateThemeDemo } from "./UpdateThemeDemo";
+import { FeatherIconsDemo } from "./FeatherIconsDemo";
+import { FormsDemo } from "./FormsDemo";
+import { GroupDemo } from "./GroupDemo";
+import { HeadingsDemo } from "./HeadingsDemo";
+import { ImageDemo } from "./ImageDemo";
+import { LabelDemo } from "./LabelDemo";
+import { LinearGradientDemo } from "./LinearGradientDemo";
+import { ListItemDemo } from "./ListItemDemo";
+import { LucideIconsDemo } from "./LucideIconsDemo";
+import { PopoverDemo } from "./PopoverDemo";
+import { ProgressDemo } from "./ProgressDemo";
+import { SelectDemo } from "./SelectDemo";
+import { SeparatorDemo } from "./SeparatorDemo";
+import { ShapesDemo } from "./ShapesDemo";
+import { ScrollViewDemo } from "./ScrollViewDemo";
+import { SheetDemo } from "./SheetDemo";
+import { SliderDemo } from "./SliderDemo";
+import { SpinnerDemo } from "./SpinnerDemo";
+import { StacksDemo } from "./StacksDemo";
+import { SwitchDemo } from "./SwitchDemo";
+import { TextDemo } from "./TextDemo";
+import { ThemeInverseDemo } from "./ThemeInverseDemo";
+import { TooltipDemo } from "./TooltipDemo";
+import { ColorsDemo } from "./ColorsDemo";
+import { TokensDemo } from "./TokensDemo";
+export * from "./useOnIntersecting";
+export {
+  AddThemeDemo,
+  AlertDialogDemo,
+  AnimationsDemo,
+  AnimationsEnterDemo,
+  AnimationsHoverDemo,
+  AnimationsPresenceDemo,
+  AnimationsTimingDemo,
+  AvatarDemo,
+  ButtonDemo,
+  CardDemo,
+  ColorsDemo,
+  DialogDemo,
+  FeatherIconsDemo,
+  FormsDemo,
+  GroupDemo,
+  HeadingsDemo,
+  ImageDemo,
+  LabelDemo,
+  LinearGradientDemo,
+  ListItemDemo,
+  LucideIconsDemo,
+  PopoverDemo,
+  ProgressDemo,
+  ScrollViewDemo,
+  SelectDemo,
+  SeparatorDemo,
+  ShapesDemo,
+  SheetDemo,
+  SliderDemo,
+  SpinnerDemo,
+  StacksDemo,
+  SwitchDemo,
+  TextDemo,
+  ThemeInverseDemo,
+  TokensDemo,
+  TooltipDemo,
+  UpdateThemeDemo
+};
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export { AlertDialogDemo } from './AlertDialogDemo'\nexport { AnimationsDemo } from './AnimationsDemo'\nexport { AnimationsEnterDemo } from './AnimationsEnterDemo'\nexport { AnimationsHoverDemo } from './AnimationsHoverDemo'\nexport { AnimationsTimingDemo } from './AnimationsTimingDemo'\nexport { AnimationsPresenceDemo } from './AnimationsPresenceDemo'\nexport { AvatarDemo } from './AvatarDemo'\nexport { ButtonDemo } from './ButtonDemo'\nexport { CardDemo } from './CardDemo'\nexport { DialogDemo } from './DialogDemo'\nexport { AddThemeDemo } from './AddThemeDemo'\nexport { UpdateThemeDemo } from './UpdateThemeDemo'\nexport { FeatherIconsDemo } from './FeatherIconsDemo'\nexport { FormsDemo } from './FormsDemo'\nexport { GroupDemo } from './GroupDemo'\nexport { HeadingsDemo } from './HeadingsDemo'\nexport { ImageDemo } from './ImageDemo'\nexport { LabelDemo } from './LabelDemo'\nexport { LinearGradientDemo } from './LinearGradientDemo'\nexport { ListItemDemo } from './ListItemDemo'\nexport { LucideIconsDemo } from './LucideIconsDemo'\nexport { PopoverDemo } from './PopoverDemo'\nexport { ProgressDemo } from './ProgressDemo'\nexport { SelectDemo } from './SelectDemo'\nexport { SeparatorDemo } from './SeparatorDemo'\nexport { ShapesDemo } from './ShapesDemo'\nexport { ScrollViewDemo } from './ScrollViewDemo'\nexport { SheetDemo } from './SheetDemo'\nexport { SliderDemo } from './SliderDemo'\nexport { SpinnerDemo } from './SpinnerDemo'\nexport { StacksDemo } from './StacksDemo'\nexport { SwitchDemo } from './SwitchDemo'\nexport { TextDemo } from './TextDemo'\nexport { ThemeInverseDemo } from './ThemeInverseDemo'\nexport { TooltipDemo } from './TooltipDemo'\nexport { ColorsDemo } from './ColorsDemo'\nexport { TokensDemo } from './TokensDemo'\nexport * from './useOnIntersecting'\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,cAAc;",
+  "names": []
+}

package/dist/jsx/tamagui.config.mjs

@@ -0,0 +1,6 @@
+import { config } from "./conf";
+var tamagui_config_default = config;
+export {
+  tamagui_config_default as default
+};
+//# sourceMappingURL=tamagui.config.mjs.map

package/dist/jsx/tamagui.config.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tamagui.config.ts"],
+  "sourcesContent": ["import { config } from './conf'\nexport default config\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/jsx/useOnIntersecting.mjs

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { isWeb, useEvent } from "tamagui";
+function useIsIntersecting(refs, { once, ...opts } = {}) {
+  const [values, setValues] = useState([]);
+  if (isWeb) {
+    useOnIntersecting(
+      refs,
+      (entries) => {
+        const intersecting = entries.some((x) => x?.isIntersecting);
+        if (once && !intersecting)
+          return;
+        setValues((prev) => {
+          const next = entries.map((e) => e?.isIntersecting ?? false);
+          if (prev.length === next.length && prev.every((e, i) => e === next[i])) {
+            return prev;
+          }
+          return next;
+        });
+      },
+      opts
+    );
+  }
+  return Array.isArray(refs) ? values : values[0];
+}
+function useOnIntersecting(refsIn, incomingCbRaw, { threshold = 0, root, rootMargin } = {}, mountArgs = []) {
+  const onIntersectEvent = useEvent(incomingCbRaw);
+  useEffect(() => {
+    const refs = Array.isArray(refsIn) ? refsIn : [refsIn];
+    if (!refs.length)
+      return;
+    let dispose = null;
+    let currentEntries = [];
+    const options = {
+      threshold,
+      root,
+      rootMargin
+    };
+    const io = new IntersectionObserver((entries) => {
+      currentEntries = refs.map((ref, index) => {
+        return entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null;
+      });
+      dispose?.();
+      dispose = onIntersectEvent(currentEntries) || null;
+    }, options);
+    for (const ref of refs) {
+      if (ref.current) {
+        io.observe(ref.current);
+      }
+    }
+    return () => {
+      dispose?.();
+      io.disconnect();
+    };
+  }, [
+    onIntersectEvent,
+    refsIn,
+    root,
+    rootMargin,
+    threshold,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ...mountArgs
+  ]);
+}
+export {
+  useIsIntersecting,
+  useOnIntersecting
+};
+//# sourceMappingURL=useOnIntersecting.mjs.map