@tamagui/demos 1.2.9 → 1.2.11

package/dist/jsx/AnimationsDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsDemo.tsx"],
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const onPress = useEvent(() => {\n    setPositionI((x) => {\n      return (x + 1) % positions.length\n    })\n  })\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={onPress}\n        size={104}\n        boc=\"$borderColor\"\n        bw={1}\n        br=\"$9\"\n        bc=\"$color9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={onPress}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,QAAQ,QAAQ,sBAAsB,gBAAgB;AAExD,SAAS,eAAe,OAAO;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU,SAAS;AACpC,QAAM,UAAU,SAAS,MAAM;AAC7B,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,KAAK,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAED,SACE;AAAA,IACE,CAAC;AAAA,MACC,WAAW,MAAM,aAAa;AAAA,MAC9B,SAAS;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MACH,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,UACI;AAAA,MAEH,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAjBC;AAAA,IAmBD,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MACH,MAAM;AAAA,MACN,OAAO,MAAM;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,SAAS;AAAA,IACX;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/jsx/AnimationsEnterDemo.mjs

@@ -0,0 +1,35 @@
+import { LogoIcon } from "@tamagui/logo";
+import { useRef, useState } from "react";
+import { Button, Square, YStack } from "tamagui";
+import { useIsIntersecting } from "./useOnIntersecting";
+function AnimationsEnterDemo(props) {
+  const ref = useRef(null);
+  const hasIntersected = useIsIntersecting(ref, { once: true });
+  const [key, setKey] = useState(0);
+  if (!hasIntersected) {
+    return <YStack ref={ref} />;
+  }
+  return <>
+    <Square
+      key={key}
+      enterStyle={{
+        scale: 1.5,
+        y: -10,
+        opacity: 0
+      }}
+      animation="bouncy"
+      elevation="$4"
+      size={110}
+      opacity={1}
+      scale={1}
+      y={0}
+      bc="$pink10"
+      br="$9"
+    >{props.children ?? <LogoIcon downscale={0.75} />}</Square>
+    <Button size="$3" mt="$4" onPress={() => setKey(Math.random())}>Re-mount</Button>
+  </>;
+}
+export {
+  AnimationsEnterDemo
+};
+//# sourceMappingURL=AnimationsEnterDemo.mjs.map

package/dist/jsx/AnimationsEnterDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsEnterDemo.tsx"],
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        bc=\"$pink10\"\n        br=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" mt=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,QAAQ,cAAc;AAEvC,SAAS,yBAAyB;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,CAAC,OAAO,KAAK,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IACE,CAAC;AAAA,MACC,KAAK;AAAA,MACL,YAAY;AAAA,QACV,OAAO;AAAA,QACP,GAAG;AAAA,QACH,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEF,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAjBC;AAAA,IAmBD,CAAC,OAAO,KAAK,KAAK,GAAG,KAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,QAEhE,EAFC;AAAA,EAGH;AAEJ;",
+  "names": []
+}

package/dist/jsx/AnimationsHoverDemo.mjs

@@ -0,0 +1,21 @@
+import { LogoIcon } from "@tamagui/logo";
+import { Square } from "tamagui";
+function AnimationsHoverDemo() {
+  return <Square
+    bc="$pink10"
+    animation="bouncy"
+    elevation="$4"
+    size={110}
+    br="$9"
+    hoverStyle={{
+      scale: 1.2
+    }}
+    pressStyle={{
+      scale: 0.9
+    }}
+  ><LogoIcon downscale={0.75} /></Square>;
+}
+export {
+  AnimationsHoverDemo
+};
+//# sourceMappingURL=AnimationsHoverDemo.mjs.map

package/dist/jsx/AnimationsHoverDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsHoverDemo.tsx"],
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      br=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,sBAAsB;AACpC,SACE,CAAC;AAAA,IACC,GAAG;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,IACN,GAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,GAEA,CAAC,SAAS,WAAW,MAAM,EAC7B,EAdC;AAgBL;",
+  "names": []
+}

package/dist/jsx/AnimationsPresenceDemo.mjs

@@ -0,0 +1,55 @@
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { ArrowLeft, ArrowRight } from "@tamagui/lucide-icons";
+import { useState } from "react";
+import { Button, Image, XStack, YStack, styled } from "tamagui";
+import photo1 from "../../public/photo1.jpg";
+import photo2 from "../../public/photo2.jpg";
+import photo3 from "../../public/photo3.jpg";
+const images = [photo1, photo2, photo3].map((x) => x.src || x);
+const YStackEnterable = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -300, opacity: 0 } },
+    isRight: { true: { x: 300, opacity: 0 } }
+  }
+});
+function AnimationsPresenceDemo() {
+  const [[page, direction], setPage] = useState([0, 0]);
+  const imageIndex = wrap(0, images.length, page);
+  const paginate = (newDirection) => {
+    setPage([page + newDirection, newDirection]);
+  };
+  const enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft";
+  const exitVariant = direction === 1 ? "isLeft" : "isRight";
+  return <XStack ov="hidden" bc="#000" pos="relative" h={300} w="100%" ai="center">
+    <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}><YStackEnterable key={page} animation="bouncy" fullscreen x={0} o={1}><Image src={images[imageIndex]} width={780} height={300} /></YStackEnterable></AnimatePresence>
+    <Button
+      accessibilityLabel="Carousel left"
+      icon={ArrowLeft}
+      size="$5"
+      pos="absolute"
+      l="$4"
+      circular
+      elevate
+      onPress={() => paginate(-1)}
+    />
+    <Button
+      accessibilityLabel="Carousel right"
+      icon={ArrowRight}
+      size="$5"
+      pos="absolute"
+      r="$4"
+      circular
+      elevate
+      onPress={() => paginate(1)}
+    />
+  </XStack>;
+}
+const wrap = (min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+};
+export {
+  AnimationsPresenceDemo,
+  images
+};
+//# sourceMappingURL=AnimationsPresenceDemo.mjs.map

package/dist/jsx/AnimationsPresenceDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsPresenceDemo.tsx"],
+  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1, photo2, photo3].map((x) => x.src || x)\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  } as const,\n})\n\nexport function AnimationsPresenceDemo() {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n          <Image src={images[imageIndex]} width={780} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAGtD,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEnB,OAAO,YAAY;AAEZ,MAAM,SAAS,CAAC,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;AAEpE,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,IAAI,WAAW,GAAG,KAAK,EAAE,OAAO,GAAG;AAAA,IAC/D,CAAC,gBAAgB,cAAc,cAAc,aAAa,aACxD,CAAC,gBAAgB,KAAK,MAAM,UAAU,SAAS,WAAW,GAAG,GAAG,GAAG,GACjE,CAAC,MAAM,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,KAAK,EAC3D,EAFC,gBAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,EAAE;AAAA,MACF;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,EAAE;AAAA,IAC5B;AAAA,IACA,CAAC;AAAA,MACC,mBAAmB;AAAA,MACnB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,EAAE;AAAA,MACF;AAAA,MACA;AAAA,MACA,SAAS,MAAM,SAAS,CAAC;AAAA,IAC3B;AAAA,EACF,EA3BC;AA6BL;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
+  "names": []
+}

package/dist/jsx/AnimationsTimingDemo.mjs

@@ -0,0 +1,21 @@
+import { LogoIcon } from "@tamagui/logo";
+import { Square } from "tamagui";
+function AnimationsTimingDemo() {
+  return <Square
+    bc="$pink10"
+    animation="100ms"
+    elevation="$4"
+    size={110}
+    br="$9"
+    hoverStyle={{
+      scale: 1.2
+    }}
+    pressStyle={{
+      scale: 0.9
+    }}
+  ><LogoIcon downscale={0.75} /></Square>;
+}
+export {
+  AnimationsTimingDemo
+};
+//# sourceMappingURL=AnimationsTimingDemo.mjs.map

package/dist/jsx/AnimationsTimingDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsTimingDemo.tsx"],
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"100ms\"\n      elevation=\"$4\"\n      size={110}\n      br=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEhB,SAAS,uBAAuB;AACrC,SACE,CAAC;AAAA,IACC,GAAG;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,IACN,GAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,GAEA,CAAC,SAAS,WAAW,MAAM,EAC7B,EAdC;AAgBL;",
+  "names": []
+}

package/dist/jsx/AvatarDemo.mjs

@@ -0,0 +1,23 @@
+import { Avatar, XStack } from "tamagui";
+function AvatarDemo() {
+  return <XStack ai="center" space="$6">
+    <Avatar circular size="$10">
+      <Avatar.Image
+        accessibilityLabel="Cam"
+        src={"https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"}
+      />
+      <Avatar.Fallback backgroundColor="$blue10" />
+    </Avatar>
+    <Avatar circular size="$8">
+      <Avatar.Image
+        accessibilityLabel="Nate Wienert"
+        src={"https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"}
+      />
+      <Avatar.Fallback delayMs={600} backgroundColor="$blue10" />
+    </Avatar>
+  </XStack>;
+}
+export {
+  AvatarDemo
+};
+//# sourceMappingURL=AvatarDemo.mjs.map

package/dist/jsx/AvatarDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/AvatarDemo.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Avatar, XStack } from 'tamagui'\n\nexport function AvatarDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$6\">\n      <Avatar circular size=\"$10\">\n        <Avatar.Image\n          accessibilityLabel=\"Cam\"\n          src=\"https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80\"\n        />\n        <Avatar.Fallback backgroundColor=\"$blue10\" />\n      </Avatar>\n\n      <Avatar circular size=\"$8\">\n        <Avatar.Image\n          accessibilityLabel=\"Nate Wienert\"\n          src=\"https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80\"\n        />\n        <Avatar.Fallback delayMs={600} backgroundColor=\"$blue10\" />\n      </Avatar>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AACA,SAAS,QAAQ,cAAc;AAExB,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,SAAS,KAAK;AAAA,MACpB,CAAC,OAAO;AAAA,QACN,mBAAmB;AAAA,QACnB,KAAI;AAAA,MACN;AAAA,MACA,CAAC,OAAO,SAAS,gBAAgB,UAAU;AAAA,IAC7C,EANC;AAAA,IAQD,CAAC,OAAO,SAAS,KAAK;AAAA,MACpB,CAAC,OAAO;AAAA,QACN,mBAAmB;AAAA,QACnB,KAAI;AAAA,MACN;AAAA,MACA,CAAC,OAAO,SAAS,SAAS,KAAK,gBAAgB,UAAU;AAAA,IAC3D,EANC;AAAA,EAOH,EAhBC;AAkBL;",
+  "names": []
+}

package/dist/jsx/ButtonDemo.mjs

@@ -0,0 +1,24 @@
+import { Activity, Airplay } from "@tamagui/lucide-icons";
+import { Button, XGroup, XStack, YStack } from "tamagui";
+function ButtonDemo(props) {
+  return <YStack p="$3" space {...props}>
+    <Button>Plain</Button>
+    <Button als="center" icon={Airplay} size="$6">Large</Button>
+    <XGroup size="$3">
+      <Button w="50%" theme="alt2">Alt2</Button>
+      <Button w="50%" theme="yellow">Yellow</Button>
+    </XGroup>
+    <XStack space="$2">
+      <Button themeInverse size="$3">Small Inverse</Button>
+      <Button iconAfter={Activity} size="$3">After</Button>
+    </XStack>
+    <XGroup>
+      <Button w="50%" size="$2" disabled o={0.5}>disabled</Button>
+      <Button w="50%" size="$2" chromeless>chromeless</Button>
+    </XGroup>
+  </YStack>;
+}
+export {
+  ButtonDemo
+};
+//# sourceMappingURL=ButtonDemo.mjs.map

package/dist/jsx/ButtonDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ButtonDemo.tsx"],
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n  return (\n    <YStack p=\"$3\" space {...props}>\n      <Button>Plain</Button>\n      <Button als=\"center\" icon={Airplay} size=\"$6\">\n        Large\n      </Button>\n      <XGroup size=\"$3\">\n        <Button w=\"50%\" theme=\"alt2\">\n          Alt2\n        </Button>\n        <Button w=\"50%\" theme=\"yellow\">\n          Yellow\n        </Button>\n      </XGroup>\n      <XStack space=\"$2\">\n        <Button themeInverse size=\"$3\">\n          Small Inverse\n        </Button>\n        <Button iconAfter={Activity} size=\"$3\">\n          After\n        </Button>\n      </XStack>\n      <XGroup>\n        <Button w=\"50%\" size=\"$2\" disabled o={0.5}>\n          disabled\n        </Button>\n        <Button w=\"50%\" size=\"$2\" chromeless>\n          chromeless\n        </Button>\n      </XGroup>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,QAAQ,QAAQ,cAAc;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,CAAC,OAAO,EAAE,KAAK,UAAU;AAAA,IACvB,CAAC,OAAO,KAAK,EAAZ;AAAA,IACD,CAAC,OAAO,IAAI,SAAS,MAAM,SAAS,KAAK,KAAK,KAE9C,EAFC;AAAA,IAGD,CAAC,OAAO,KAAK;AAAA,MACX,CAAC,OAAO,EAAE,MAAM,MAAM,OAAO,IAE7B,EAFC;AAAA,MAGD,CAAC,OAAO,EAAE,MAAM,MAAM,SAAS,MAE/B,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,OAAO,aAAa,KAAK,KAAK,aAE/B,EAFC;AAAA,MAGD,CAAC,OAAO,WAAW,UAAU,KAAK,KAAK,KAEvC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC;AAAA,MACC,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,SAAS,GAAG,KAAK,QAE3C,EAFC;AAAA,MAGD,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,WAAW,UAErC,EAFC;AAAA,IAGH,EAPC;AAAA,EAQH,EA7BC;AA+BL;",
+  "names": []
+}

package/dist/jsx/CardDemo.mjs

@@ -0,0 +1,39 @@
+import { Button, Card, H2, Image, Paragraph, XStack } from "tamagui";
+function CardDemo() {
+  return <XStack $sm={{ flexDirection: "column" }} px="$4" space>
+    <DemoCard
+      animation="bouncy"
+      size="$4"
+      w={250}
+      h={300}
+      scale={0.9}
+      hoverStyle={{ scale: 0.925 }}
+      pressStyle={{ scale: 0.875 }}
+    />
+    <DemoCard size="$5" w={250} h={300} />
+  </XStack>;
+}
+function DemoCard(props) {
+  return <Card theme="dark" elevate size="$4" bordered {...props}>
+    <Card.Header padded>
+      <H2>Sony A7IV</H2>
+      <Paragraph theme="alt2">Now available</Paragraph>
+    </Card.Header>
+    <Card.Footer padded>
+      <XStack f={1} />
+      <Button br="$10">Purchase</Button>
+    </Card.Footer>
+    <Card.Background><Image
+      pos="absolute"
+      width={300}
+      height={300}
+      resizeMode="contain"
+      als="center"
+      src="data:image/jpeg;base64,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"
+    /></Card.Background>
+  </Card>;
+}
+export {
+  CardDemo
+};
+//# sourceMappingURL=CardDemo.mjs.map

package/dist/jsx/CardDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/CardDemo.tsx"],
+  "sourcesContent": ["import { Button, Card, CardProps, H2, Image, Paragraph, XStack } from 'tamagui'\n\nexport function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        w={250}\n        h={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.925 }}\n        pressStyle={{ scale: 0.875 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" bordered {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack f={1} />\n        <Button br=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image\n          pos=\"absolute\"\n          width={300}\n          height={300}\n          resizeMode=\"contain\"\n          als=\"center\"\n          src=\"data:image/jpeg;base64,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\"\n        />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,MAAiB,IAAI,OAAO,WAAW,cAAc;AAE/D,SAAS,WAAW;AACzB,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,GAAG,KAAK;AAAA,IAChD,CAAC;AAAA,MACC,UAAU;AAAA,MACV,KAAK;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,YAAY,EAAE,OAAO,MAAM;AAAA,MAC3B,YAAY,EAAE,OAAO,MAAM;AAAA,IAC7B;AAAA,IACA,CAAC,SAAS,KAAK,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,EACtC,EAXC;AAaL;AAEA,SAAS,SAAS,OAAkB;AAClC,SACE,CAAC,KAAK,MAAM,OAAO,QAAQ,KAAK,KAAK,aAAa;AAAA,IAChD,CAAC,KAAK,OAAO;AAAA,MACX,CAAC,GAAG,SAAS,EAAZ;AAAA,MACD,CAAC,UAAU,MAAM,OAAO,aAAa,EAApC;AAAA,IACH,EAHC,KAAK;AAAA,IAIN,CAAC,KAAK,OAAO;AAAA,MACX,CAAC,OAAO,GAAG,GAAG;AAAA,MACd,CAAC,OAAO,GAAG,MAAM,QAAQ,EAAxB;AAAA,IACH,EAHC,KAAK;AAAA,IAIN,CAAC,KAAK,WACJ,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,IAAI;AAAA,IACN,EACF,EATC,KAAK;AAAA,EAUR,EAnBC;AAqBL;",
+  "names": []
+}

package/dist/jsx/ColorsDemo.mjs

@@ -0,0 +1,84 @@
+import {
+  H2,
+  Paragraph,
+  Separator,
+  Square,
+  XStack,
+  YStack,
+  getTokens,
+  getVariableValue
+} from "tamagui";
+const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
+function ColorsDemo() {
+  const colors = getTokens({ prefixed: false }).color;
+  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
+  return <YStack mt="$4" space="$8">
+    <ColorsRow title="Light" colors={colorsLight} />
+    <Separator />
+    <ColorsRow title="Dark" colors={colorsDark} />
+  </YStack>;
+}
+function ColorsRow({ title, colors }) {
+  return <YStack space $sm={{ space: "$2" }}>
+    <H2 size="$2">{title}</H2>
+    <XStack space als="center">
+      <YStack space $sm={{ space: "$2" }} als="center">
+        {colors.map((group, index) => {
+          return <XStack space="$2" key={index}>{group.map((color) => {
+            return <Square
+              key={`${color.key}${index}`}
+              br="$2"
+              size="$4"
+              h="$4"
+              bc={getVariableValue(color)}
+              $sm={{
+                size: "$2"
+              }}
+              $xs={{
+                size: "$1"
+              }}
+            />;
+          })}</XStack>;
+        })}
+        <XStack space="$2" als="center">{new Array(13).fill(0).slice(1).map((_, index) => {
+          return <Paragraph
+            col="$color10"
+            ta="center"
+            w="$4"
+            $sm={{
+              w: "$2"
+            }}
+            $xs={{
+              w: "$1"
+            }}
+            key={index}
+          >{index}</Paragraph>;
+        })}</XStack>
+      </YStack>
+      <YStack space="$4" mt="$2">{colorGroups.map((name) => <Paragraph
+        theme={name}
+        col="$color10"
+        h="$4"
+        rotate="-10deg"
+        $sm={{
+          h: "$2"
+        }}
+        $xs={{
+          h: "$1"
+        }}
+        key={name}
+      >{name}</Paragraph>)}</YStack>
+    </XStack>
+  </YStack>;
+}
+function getColors(colors, dark = false) {
+  return colorGroups.map((group) => {
+    return Object.keys(colors).filter(
+      (color) => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))
+    ).map((key) => colors[key]);
+  });
+}
+export {
+  ColorsDemo
+};
+//# sourceMappingURL=ColorsDemo.mjs.map

package/dist/jsx/ColorsDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ColorsDemo.tsx"],
+  "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n  H2,\n  Paragraph,\n  Separator,\n  Square,\n  XStack,\n  YStack,\n  getTokens,\n  getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n  const colors = getTokens({ prefixed: false }).color\n  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n  return (\n    <YStack mt=\"$4\" space=\"$8\">\n      <ColorsRow title=\"Light\" colors={colorsLight} />\n      <Separator />\n      <ColorsRow title=\"Dark\" colors={colorsDark} />\n    </YStack>\n  )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n  return (\n    <YStack space $sm={{ space: '$2' }}>\n      <H2 size=\"$2\">{title}</H2>\n\n      <XStack space als=\"center\">\n        <YStack space $sm={{ space: '$2' }} als=\"center\">\n          {colors.map((group, index) => {\n            return (\n              <XStack space=\"$2\" key={index}>\n                {group.map((color) => {\n                  return (\n                    <Square\n                      key={`${color.key}${index}`}\n                      br=\"$2\"\n                      size=\"$4\"\n                      h=\"$4\"\n                      bc={getVariableValue(color)}\n                      $sm={{\n                        size: '$2',\n                      }}\n                      $xs={{\n                        size: '$1',\n                      }}\n                    />\n                  )\n                })}\n              </XStack>\n            )\n          })}\n\n          <XStack space=\"$2\" als=\"center\">\n            {new Array(13)\n              .fill(0)\n              .slice(1)\n              .map((_, index) => {\n                return (\n                  <Paragraph\n                    col=\"$color10\"\n                    ta=\"center\"\n                    w=\"$4\"\n                    $sm={{\n                      w: '$2',\n                    }}\n                    $xs={{\n                      w: '$1',\n                    }}\n                    key={index}\n                  >\n                    {index}\n                  </Paragraph>\n                )\n              })}\n          </XStack>\n        </YStack>\n\n        <YStack space=\"$4\" mt=\"$2\">\n          {colorGroups.map((name) => (\n            <Paragraph\n              theme={name as any}\n              col=\"$color10\"\n              h=\"$4\"\n              rotate=\"-10deg\"\n              $sm={{\n                h: '$2',\n              }}\n              $xs={{\n                h: '$1',\n              }}\n              key={name}\n            >\n              {name}\n            </Paragraph>\n          ))}\n        </YStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n  return colorGroups.map((group) => {\n    return Object.keys(colors)\n      .filter(\n        (color) =>\n          color.startsWith(group) &&\n          (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n      )\n      .map((key) => colors[key])\n  })\n}\n"],
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,GAAG,KAAK,MAAM;AAAA,IACpB,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,IAAI;AAAA,MAChB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,GAAG;AAAA,cACH,KAAK;AAAA,cACL,EAAE;AAAA,cACF,IAAI,iBAAiB,KAAK;AAAA,cAC1B,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EAlBC;AAAA,QAoBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,IAAI,UACpB,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,EAAE;AAAA,YACF,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAhDC;AAAA,MAkDD,CAAC,OAAO,MAAM,KAAK,GAAG,MACnB,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,EAAE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAtEC;AAAA,EAuEH,EA1EC;AA4EL;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
+  "names": []
+}

package/dist/jsx/DialogDemo.mjs

@@ -0,0 +1,64 @@
+import { X } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Dialog,
+  Fieldset,
+  Input,
+  Label,
+  Sheet,
+  Unspaced,
+  YStack
+} from "tamagui";
+import { SelectDemo } from "./SelectDemo";
+function DialogDemo() {
+  return <Dialog modal>
+    <Dialog.Trigger asChild><Button>Edit Profile</Button></Dialog.Trigger>
+    <Adapt when="sm" platform="touch"><Sheet zIndex={2e5} modal dismissOnSnapToBottom>
+      <Sheet.Frame padding="$4" space><Adapt.Contents /></Sheet.Frame>
+      <Sheet.Overlay />
+    </Sheet></Adapt>
+    <Dialog.Portal>
+      <Dialog.Overlay
+        key="overlay"
+        animation="quick"
+        o={0.5}
+        enterStyle={{ o: 0 }}
+        exitStyle={{ o: 0 }}
+      />
+      <Dialog.Content
+        bordered
+        elevate
+        key="content"
+        animation={[
+          "quick",
+          {
+            opacity: {
+              overshootClamping: true
+            }
+          }
+        ]}
+        enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+        exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+        space
+      >
+        <Dialog.Title>Edit profile</Dialog.Title>
+        <Dialog.Description>Make changes to your profile here. Click save when you're done.</Dialog.Description>
+        <Fieldset space="$4" horizontal>
+          <Label w={160} justifyContent="flex-end" htmlFor="name">Name</Label>
+          <Input f={1} id="name" defaultValue="Nate Wienert" />
+        </Fieldset>
+        <Fieldset space="$4" horizontal>
+          <Label w={160} justifyContent="flex-end" htmlFor="username">Food</Label>
+          <SelectDemo />
+        </Fieldset>
+        <YStack ai="flex-end" mt="$2"><Dialog.Close displayWhenAdapted asChild><Button theme="alt1" aria-label="Close">Save changes</Button></Dialog.Close></YStack>
+        <Unspaced><Dialog.Close asChild><Button pos="absolute" t="$2" r="$2" size="$3" circular icon={X} /></Dialog.Close></Unspaced>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog>;
+}
+export {
+  DialogDemo
+};
+//# sourceMappingURL=DialogDemo.mjs.map

package/dist/jsx/DialogDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DialogDemo.tsx"],
+  "sourcesContent": ["import { X } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Dialog,\n  Fieldset,\n  H2,\n  Input,\n  Label,\n  Sheet,\n  Unspaced,\n  YStack,\n} from 'tamagui'\n\nimport { SelectDemo } from './SelectDemo'\n\nexport function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet zIndex={200000} modal dismissOnSnapToBottom>\n          <Sheet.Frame padding=\"$4\" space>\n            <Adapt.Contents />\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Dialog.Portal>\n        <Dialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          o={0.5}\n          enterStyle={{ o: 0 }}\n          exitStyle={{ o: 0 }}\n        />\n\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          space\n        >\n          <Dialog.Title>Edit profile</Dialog.Title>\n          <Dialog.Description>\n            Make changes to your profile here. Click save when you're done.\n          </Dialog.Description>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n          </Fieldset>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              Food\n            </Label>\n            <SelectDemo />\n          </Fieldset>\n\n          <YStack ai=\"flex-end\" mt=\"$2\">\n            <Dialog.Close displayWhenAdapted asChild>\n              <Button theme=\"alt1\" aria-label=\"Close\">\n                Save changes\n              </Button>\n            </Dialog.Close>\n          </YStack>\n\n          <Unspaced>\n            <Dialog.Close asChild>\n              <Button pos=\"absolute\" t=\"$2\" r=\"$2\" size=\"$3\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAEpB,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,QAAQ,KAAQ,MAAM;AAAA,MAC3B,CAAC,MAAM,MAAM,QAAQ,KAAK,MACxB,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,QAAQ;AAAA,IACjB,EALC,MAMH,EAPC;AAAA,IASD,CAAC,OAAO;AAAA,MACN,CAAC,OAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,GAAG;AAAA,QACH,YAAY,EAAE,GAAG,EAAE;AAAA,QACnB,WAAW,EAAE,GAAG,EAAE;AAAA,MACpB;AAAA,MAEA,CAAC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,OAAO,IAExD,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACrD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,WAAW,IAE5D,EAFC;AAAA,UAGD,CAAC,WAAW;AAAA,QACd,EALC;AAAA,QAOD,CAAC,OAAO,GAAG,WAAW,GAAG,KACvB,CAAC,OAAO,MAAM,mBAAmB,QAC/B,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK,SAAS,MAAM,GAAG,EACnE,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EA9CC,OAAO;AAAA,IA+CV,EAxDC,OAAO;AAAA,EAyDV,EAvEC;AAyEL;",
+  "names": []
+}

package/dist/jsx/FeatherIconsDemo.mjs

@@ -0,0 +1,32 @@
+import * as FeatherIcons from "@tamagui/lucide-icons";
+import { useMemo, useState } from "react";
+import { ScrollView } from "react-native";
+import { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
+const featherIcons = Object.keys(FeatherIcons).map((name) => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: FeatherIcons[name]
+}));
+function FeatherIconsDemo() {
+  const [searchRaw, setSearch] = useState("");
+  const search = useDebounceValue(searchRaw, 400);
+  const size = 100;
+  const iconsMemo = useMemo(() => {
+    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
+    return icons.map(({ Icon, name }) => {
+      return <YStack h={size} ai="center" jc="center" key={name}>
+        <Icon size={size * 0.25} />
+        <Spacer />
+        <Paragraph size="$2" o={0.5}>{name}</Paragraph>
+      </YStack>;
+    });
+  }, [search]);
+  return <YStack als="stretch" p="$4" pb="$0" space>
+    <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
+    <YStack h={420}><ScrollView><Grid itemMinWidth={size}>{iconsMemo}</Grid></ScrollView></YStack>
+  </YStack>;
+}
+export {
+  FeatherIconsDemo
+};
+//# sourceMappingURL=FeatherIconsDemo.mjs.map

package/dist/jsx/FeatherIconsDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/FeatherIconsDemo.tsx"],
+  "sourcesContent": ["import * as FeatherIcons from '@tamagui/lucide-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: FeatherIcons[name],\n}))\n\nexport function FeatherIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.map(({ Icon, name }) => {\n      return (\n        <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA,YAAY,kBAAkB;AAE9B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,UAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa,IAAI;AACzB,EAAE;AAEK,SAAS,mBAAmB;AACjC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACnC,aACE,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK;AAAA,QAC5C,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,QACzB,CAAC,OAAO;AAAA,QACR,CAAC,UAAU,KAAK,KAAK,GAAG,MACrB,KACH,EAFC;AAAA,MAGH,EANC;AAAA,IAQL,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,IAAI,UAAU,EAAE,KAAK,GAAG,KAAK;AAAA,IACnC,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,GAAG,KACT,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
+  "names": []
+}

package/dist/jsx/FormsDemo.mjs

@@ -0,0 +1,19 @@
+import { Button, Input, TextArea, XStack, YStack } from "tamagui";
+function FormsDemo() {
+  return <YStack w={200} mih={250} overflow="hidden" space="$2" m="$3" p="$2">
+    <FormDemo size="$2" />
+    <FormDemo size="$3" />
+    <FormDemo size="$4" />
+    <TextArea mih={140} placeholder="Enter your details..." numberOfLines={4} />
+  </YStack>;
+}
+function FormDemo(props) {
+  return <XStack ai="center" space="$2">
+    <Input f={1} size={props.size} placeholder={`Size ${props.size}...`} />
+    <Button size={props.size}>Go</Button>
+  </XStack>;
+}
+export {
+  FormsDemo
+};
+//# sourceMappingURL=FormsDemo.mjs.map

package/dist/jsx/FormsDemo.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/FormsDemo.tsx"],
+  "sourcesContent": ["import { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo() {\n  return (\n    <YStack w={200} mih={250} overflow=\"hidden\" space=\"$2\" m=\"$3\" p=\"$2\">\n      <FormDemo size=\"$2\" />\n      <FormDemo size=\"$3\" />\n      <FormDemo size=\"$4\" />\n      <TextArea mih={140} placeholder=\"Enter your details...\" numberOfLines={4} />\n    </YStack>\n  )\n}\n\nfunction FormDemo(props: { size: SizeTokens }) {\n  return (\n    <XStack ai=\"center\" space=\"$2\">\n      <Input f={1} size={props.size} placeholder={`Size ${props.size}...`} />\n      <Button size={props.size}>Go</Button>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAE7D,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,GAAG,KAAK,KAAK,KAAK,SAAS,SAAS,MAAM,KAAK,EAAE,KAAK,EAAE;AAAA,IAC9D,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK,YAAY,wBAAwB,eAAe,GAAG;AAAA,EAC5E,EALC;AAOL;AAEA,SAAS,SAAS,OAA6B;AAC7C,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,MAAM,GAAG,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACrE,CAAC,OAAO,MAAM,MAAM,MAAM,EAAE,EAA3B;AAAA,EACH,EAHC;AAKL;",
+  "names": []
+}