@tamagui/demos 1.0.1-beta.100

package/dist/esm/demos/AnimationsDemo.js

@@ -0,0 +1,83 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Play } from "@tamagui/feather-icons";
+import React from "react";
+import { Button, Square, useControllableState } from "tamagui";
+import { useTint } from "../ColorToggleButton";
+import { LogoIcon } from "../TamaguiLogo";
+var AnimationsDemo_default = /* @__PURE__ */ __name((props) => {
+  const { tint } = useTint();
+  const [positionI, setPositionI] = useControllableState({
+    strategy: "most-recent-wins",
+    prop: props.position,
+    defaultProp: 0
+  });
+  const position = positions[positionI];
+  const next = /* @__PURE__ */ __name((to = 1) => {
+    setPositionI((x) => {
+      return (x + to) % positions.length;
+    });
+  }, "next");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Square, {
+    animation: props.animation || "bouncy",
+    onPress: () => next(),
+    size: 110,
+    bc: "$pink10",
+    br: "$9",
+    hoverStyle: {
+      scale: 1.1
+    },
+    pressStyle: {
+      scale: 0.9
+    },
+    ...position
+  }, /* @__PURE__ */ React.createElement(LogoIcon, {
+    downscale: 0.75
+  })), /* @__PURE__ */ React.createElement(Button, {
+    pos: "absolute",
+    b: 20,
+    l: 20,
+    icon: Play,
+    theme: tint,
+    size: "$5",
+    circular: true,
+    onPress: () => next()
+  }));
+}, "default");
+const positions = [
+  {
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotate: "0deg"
+  },
+  {
+    x: -50,
+    y: -50,
+    scale: 0.5,
+    rotate: "-45deg",
+    hoverStyle: {
+      scale: 0.6
+    },
+    pressStyle: {
+      scale: 0.4
+    }
+  },
+  {
+    x: 50,
+    y: 50,
+    scale: 1,
+    rotate: "180deg",
+    hoverStyle: {
+      scale: 1.1
+    },
+    pressStyle: {
+      scale: 0.9
+    }
+  }
+];
+export {
+  AnimationsDemo_default as default,
+  positions
+};
+//# sourceMappingURL=AnimationsDemo.js.map

package/dist/esm/demos/AnimationsDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/AnimationsDemo.tsx"],
+  "sourcesContent": ["import { Play } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Square, useControllableState } from 'tamagui'\n\nimport { useTint } from '../ColorToggleButton'\nimport { LogoIcon } from '../TamaguiLogo'\n\nexport default (props) => {\n  const { tint } = useTint()\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 next = (to = 1) => {\n    setPositionI((x) => {\n      return (x + to) % positions.length\n    })\n  }\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={() => next()}\n        size={110}\n        bc=\"$pink10\"\n        br=\"$9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        <LogoIcon downscale={0.75} />\n      </Square>\n\n      <Button\n        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={tint}\n        size=\"$5\"\n        circular\n        onPress={() => next()}\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;AACA;AACA;AAEA;AACA;AAEA,IAAO,yBAAQ,wBAAC,UAAU;AACxB,QAAM,EAAE,SAAS,QAAQ;AACzB,QAAM,CAAC,WAAW,gBAAgB,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,wBAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH,GAJa;AAMb,SACE,0DACE,oCAAC;AAAA,IACC,WAAW,MAAM,aAAa;AAAA,IAC9B,SAAS,MAAM,KAAK;AAAA,IACpB,MAAM;AAAA,IACN,IAAG;AAAA,IACH,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACC,GAAG;AAAA,KAEJ,oCAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAC7B,GAEA,oCAAC;AAAA,IACC,KAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,SAAS,MAAM,KAAK;AAAA,GACtB,CACF;AAEJ,GA7Ce;AA+CR,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/esm/demos/AnimationsEnterDemo.js

@@ -0,0 +1,42 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useRef, useState } from "react";
+import { Button, Square, YStack } from "tamagui";
+import { LogoIcon } from "../TamaguiLogo";
+import { useIsIntersecting } from "../useOnIntersecting";
+var AnimationsEnterDemo_default = /* @__PURE__ */ __name(() => {
+  const ref = useRef(null);
+  const hasIntersected = useIsIntersecting(ref, { once: true });
+  const [key, setKey] = useState(0);
+  if (!hasIntersected) {
+    return /* @__PURE__ */ React.createElement(YStack, {
+      ref
+    });
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Square, {
+    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"
+  }, /* @__PURE__ */ React.createElement(LogoIcon, {
+    downscale: 0.75
+  })), /* @__PURE__ */ React.createElement(Button, {
+    size: "$3",
+    mt: "$4",
+    onPress: () => setKey(Math.random())
+  }, "Re-mount"));
+}, "default");
+export {
+  AnimationsEnterDemo_default as default
+};
+//# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/esm/demos/AnimationsEnterDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/AnimationsEnterDemo.tsx"],
+  "sourcesContent": ["import { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { LogoIcon } from '../TamaguiLogo'\nimport { useIsIntersecting } from '../useOnIntersecting'\n\nexport default () => {\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        <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;AACA;AAEA;AACA;AAEA,IAAO,8BAAQ,6BAAM;AACnB,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,UAAU,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,oCAAC;AAAA,MAAO;AAAA,KAAU;AAAA,EAC3B;AAEA,SACE,0DACE,oCAAC;AAAA,IACC;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,SAAS;AAAA,IACX;AAAA,IACA,WAAU;AAAA,IACV,WAAU;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,IACH,IAAG;AAAA,IACH,IAAG;AAAA,KAEH,oCAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAC7B,GAEA,oCAAC;AAAA,IAAO,MAAK;AAAA,IAAK,IAAG;AAAA,IAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC;AAAA,KAAG,UAEhE,CACF;AAEJ,GAnCe;",
+  "names": []
+}

package/dist/esm/demos/AnimationsHoverDemo.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Square } from "tamagui";
+import { LogoIcon } from "../TamaguiLogo";
+var AnimationsHoverDemo_default = /* @__PURE__ */ __name(() => {
+  return /* @__PURE__ */ React.createElement(Square, {
+    bc: "$pink10",
+    animation: "bouncy",
+    elevation: "$4",
+    size: 110,
+    br: "$9",
+    hoverStyle: {
+      scale: 1.2
+    },
+    pressStyle: {
+      scale: 0.9
+    }
+  }, /* @__PURE__ */ React.createElement(LogoIcon, {
+    downscale: 0.75
+  }));
+}, "default");
+export {
+  AnimationsHoverDemo_default as default
+};
+//# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/esm/demos/AnimationsHoverDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/AnimationsHoverDemo.tsx"],
+  "sourcesContent": ["import { Square } from 'tamagui'\n\nimport { LogoIcon } from '../TamaguiLogo'\n\nexport default () => {\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;AAEA;AAEA,IAAO,8BAAQ,6BAAM;AACnB,SACE,oCAAC;AAAA,IACC,IAAG;AAAA,IACH,WAAU;AAAA,IACV,WAAU;AAAA,IACV,MAAM;AAAA,IACN,IAAG;AAAA,IACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,KAEA,oCAAC;AAAA,IAAS,WAAW;AAAA,GAAM,CAC7B;AAEJ,GAlBe;",
+  "names": []
+}

package/dist/esm/demos/AnimationsPresenceDemo.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { ArrowLeft, ArrowRight } from "@tamagui/feather-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.src, photo2.src, photo3.src];
+const YStackEnterable = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -300, opacity: 0 } },
+    isRight: { true: { x: 300, opacity: 0 } }
+  }
+});
+var AnimationsPresenceDemo_default = /* @__PURE__ */ __name(() => {
+  const [[page, direction], setPage] = useState([0, 0]);
+  const imageIndex = wrap(0, images.length, page);
+  const paginate = /* @__PURE__ */ __name((newDirection) => {
+    setPage([page + newDirection, newDirection]);
+  }, "paginate");
+  const enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft";
+  const exitVariant = direction === 1 ? "isLeft" : "isRight";
+  return /* @__PURE__ */ React.createElement(XStack, {
+    ov: "hidden",
+    bc: "#000",
+    pos: "relative",
+    h: 300,
+    w: "100%",
+    ai: "center"
+  }, /* @__PURE__ */ React.createElement(AnimatePresence, {
+    enterVariant,
+    exitVariant
+  }, /* @__PURE__ */ React.createElement(YStackEnterable, {
+    key: page,
+    animation: "bouncy",
+    fullscreen: true,
+    x: 0,
+    o: 1
+  }, /* @__PURE__ */ React.createElement(Image, {
+    src: images[imageIndex],
+    width: 700,
+    height: 300
+  }))), /* @__PURE__ */ React.createElement(Button, {
+    accessibilityLabel: "Carousel left",
+    icon: ArrowLeft,
+    circular: true,
+    size: "$5",
+    pos: "absolute",
+    l: "$4",
+    onPress: () => paginate(-1)
+  }), /* @__PURE__ */ React.createElement(Button, {
+    accessibilityLabel: "Carousel right",
+    icon: ArrowRight,
+    circular: true,
+    size: "$5",
+    pos: "absolute",
+    r: "$4",
+    onPress: () => paginate(1)
+  }));
+}, "default");
+const wrap = /* @__PURE__ */ __name((min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+}, "wrap");
+export {
+  AnimationsPresenceDemo_default as default,
+  images
+};
+//# sourceMappingURL=AnimationsPresenceDemo.js.map

package/dist/esm/demos/AnimationsPresenceDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/AnimationsPresenceDemo.tsx"],
+  "sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\nimport photo1 from '../../public/photo1.jpg'\nimport photo2 from '../../public/photo2.jpg'\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  },\n})\n\nexport default () => {\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={700} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        circular\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        circular\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$4\"\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": ";;AAGA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEO,MAAM,SAAS,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,GAAG;AAEzD,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;AAED,IAAO,iCAAQ,6BAAM;AACnB,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,wBAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C,GAFiB;AAIjB,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAO,KAAI;AAAA,IAAW,GAAG;AAAA,IAAK,GAAE;AAAA,IAAO,IAAG;AAAA,KAC/D,oCAAC;AAAA,IAAgB;AAAA,IAA4B;AAAA,KAC3C,oCAAC;AAAA,IAAgB,KAAK;AAAA,IAAM,WAAU;AAAA,IAAS,YAAU;AAAA,IAAC,GAAG;AAAA,IAAG,GAAG;AAAA,KACjE,oCAAC;AAAA,IAAM,KAAK,OAAO;AAAA,IAAa,OAAO;AAAA,IAAK,QAAQ;AAAA,GAAK,CAC3D,CACF,GAEA,oCAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,UAAQ;AAAA,IACR,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,SAAS,MAAM,SAAS,EAAE;AAAA,GAC5B,GACA,oCAAC;AAAA,IACC,oBAAmB;AAAA,IACnB,MAAM;AAAA,IACN,UAAQ;AAAA,IACR,MAAK;AAAA,IACL,KAAI;AAAA,IACJ,GAAE;AAAA,IACF,SAAS,MAAM,SAAS,CAAC;AAAA,GAC3B,CACF;AAEJ,GAxCe;AA0Cf,MAAM,OAAO,wBAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D,GAHa;",
+  "names": []
+}

package/dist/esm/demos/AvatarDemo.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Avatar, XStack } from "tamagui";
+function AvatarDemo() {
+  return /* @__PURE__ */ React.createElement(XStack, {
+    ai: "center",
+    space: "$6"
+  }, /* @__PURE__ */ React.createElement(Avatar, {
+    circular: true,
+    size: "$10"
+  }, /* @__PURE__ */ React.createElement(Avatar.Image, {
+    accessibilityLabel: "Cam",
+    src: "https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80",
+    width: 150,
+    height: 150
+  }), /* @__PURE__ */ React.createElement(Avatar.Fallback, {
+    backgroundColor: "$blue10"
+  })), /* @__PURE__ */ React.createElement(Avatar, {
+    circular: true,
+    size: "$8"
+  }, /* @__PURE__ */ React.createElement(Avatar.Image, {
+    accessibilityLabel: "Nate Wienert",
+    src: "https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80",
+    width: 100,
+    height: 100
+  }), /* @__PURE__ */ React.createElement(Avatar.Fallback, {
+    delayMs: 600,
+    backgroundColor: "$blue10"
+  })));
+}
+__name(AvatarDemo, "AvatarDemo");
+export {
+  AvatarDemo as default
+};
+//# sourceMappingURL=AvatarDemo.js.map

package/dist/esm/demos/AvatarDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/AvatarDemo.tsx"],
+  "sourcesContent": ["import { Avatar, XStack } from 'tamagui'\n\nexport default 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          width={150}\n          height={150}\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          width={100}\n          height={100}\n        />\n        <Avatar.Fallback delayMs={600} backgroundColor=\"$blue10\" />\n      </Avatar>\n    </XStack>\n  )\n}\n"],
+  "mappings": ";;AAAA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAS,OAAM;AAAA,KACxB,oCAAC;AAAA,IAAO,UAAQ;AAAA,IAAC,MAAK;AAAA,KACpB,oCAAC,OAAO,OAAP;AAAA,IACC,oBAAmB;AAAA,IACnB,KAAI;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,GACV,GACA,oCAAC,OAAO,UAAP;AAAA,IAAgB,iBAAgB;AAAA,GAAU,CAC7C,GAEA,oCAAC;AAAA,IAAO,UAAQ;AAAA,IAAC,MAAK;AAAA,KACpB,oCAAC,OAAO,OAAP;AAAA,IACC,oBAAmB;AAAA,IACnB,KAAI;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,GACV,GACA,oCAAC,OAAO,UAAP;AAAA,IAAgB,SAAS;AAAA,IAAK,iBAAgB;AAAA,GAAU,CAC3D,CACF;AAEJ;AAxBwB;",
+  "names": []
+}

package/dist/esm/demos/ButtonDemo.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Activity, Airplay } from "@tamagui/feather-icons";
+import { Button, Group, XStack, YStack } from "tamagui";
+function ButtonDemo(props) {
+  return /* @__PURE__ */ React.createElement(YStack, {
+    p: "$3",
+    space: "$2",
+    ...props
+  }, /* @__PURE__ */ React.createElement(Button, null, "Plain"), /* @__PURE__ */ React.createElement(Button, {
+    als: "center",
+    icon: Airplay,
+    size: "$6"
+  }, "Large"), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Button, {
+    w: "50%",
+    size: "$3",
+    br: 0,
+    theme: "alt2"
+  }, "Alt2"), /* @__PURE__ */ React.createElement(Button, {
+    w: "50%",
+    size: "$3",
+    br: 0,
+    theme: "yellow"
+  }, "Yellow")), /* @__PURE__ */ React.createElement(XStack, {
+    space: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    themeInverse: true,
+    size: "$2"
+  }, "Small Inverse"), /* @__PURE__ */ React.createElement(Button, {
+    iconAfter: Activity,
+    size: "$2"
+  }, "After")), /* @__PURE__ */ React.createElement(Group, null, /* @__PURE__ */ React.createElement(Button, {
+    br: 0,
+    w: "50%",
+    size: "$1",
+    disabled: true
+  }, "disabled"), /* @__PURE__ */ React.createElement(Button, {
+    br: 0,
+    w: "50%",
+    size: "$1",
+    chromeless: true
+  }, "chromeless")));
+}
+__name(ButtonDemo, "ButtonDemo");
+export {
+  ButtonDemo as default
+};
+//# sourceMappingURL=ButtonDemo.js.map

package/dist/esm/demos/ButtonDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/ButtonDemo.tsx"],
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/feather-icons'\nimport { Button, Group, XStack, YStack } from 'tamagui'\n\nexport default function ButtonDemo(props) {\n  return (\n    <YStack p=\"$3\" space=\"$2\" {...props}>\n      <Button>Plain</Button>\n      <Button als=\"center\" icon={Airplay} size=\"$6\">\n        Large\n      </Button>\n      <Group>\n        <Button w=\"50%\" size=\"$3\" br={0} theme=\"alt2\">\n          Alt2\n        </Button>\n        <Button w=\"50%\" size=\"$3\" br={0} theme=\"yellow\">\n          Yellow\n        </Button>\n      </Group>\n      <XStack space>\n        <Button themeInverse size=\"$2\">\n          Small Inverse\n        </Button>\n        <Button iconAfter={Activity} size=\"$2\">\n          After\n        </Button>\n      </XStack>\n      <Group>\n        <Button br={0} w=\"50%\" size=\"$1\" disabled>\n          disabled\n        </Button>\n        <Button br={0} w=\"50%\" size=\"$1\" chromeless>\n          chromeless\n        </Button>\n      </Group>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEe,oBAAoB,OAAO;AACxC,SACE,oCAAC;AAAA,IAAO,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,GAAG;AAAA,KAC5B,oCAAC,cAAO,OAAK,GACb,oCAAC;AAAA,IAAO,KAAI;AAAA,IAAS,MAAM;AAAA,IAAS,MAAK;AAAA,KAAK,OAE9C,GACA,oCAAC,aACC,oCAAC;AAAA,IAAO,GAAE;AAAA,IAAM,MAAK;AAAA,IAAK,IAAI;AAAA,IAAG,OAAM;AAAA,KAAO,MAE9C,GACA,oCAAC;AAAA,IAAO,GAAE;AAAA,IAAM,MAAK;AAAA,IAAK,IAAI;AAAA,IAAG,OAAM;AAAA,KAAS,QAEhD,CACF,GACA,oCAAC;AAAA,IAAO,OAAK;AAAA,KACX,oCAAC;AAAA,IAAO,cAAY;AAAA,IAAC,MAAK;AAAA,KAAK,eAE/B,GACA,oCAAC;AAAA,IAAO,WAAW;AAAA,IAAU,MAAK;AAAA,KAAK,OAEvC,CACF,GACA,oCAAC,aACC,oCAAC;AAAA,IAAO,IAAI;AAAA,IAAG,GAAE;AAAA,IAAM,MAAK;AAAA,IAAK,UAAQ;AAAA,KAAC,UAE1C,GACA,oCAAC;AAAA,IAAO,IAAI;AAAA,IAAG,GAAE;AAAA,IAAM,MAAK;AAAA,IAAK,YAAU;AAAA,KAAC,YAE5C,CACF,CACF;AAEJ;AAjCwB;",
+  "names": []
+}

package/dist/esm/demos/CardDemo.js

@@ -0,0 +1,53 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Button, Card, H2, Image, Paragraph, XStack } from "tamagui";
+import camera from "../../public/camera.jpg";
+function CardDemo() {
+  return /* @__PURE__ */ React.createElement(XStack, {
+    $sm: { als: "flex-start" },
+    px: "$4",
+    space: true
+  }, /* @__PURE__ */ React.createElement(DemoCard, {
+    animation: "bouncy",
+    size: "$4",
+    w: 250,
+    h: 300,
+    scale: 0.9,
+    hoverStyle: { scale: 0.95 },
+    pressStyle: { scale: 0.85 }
+  }), /* @__PURE__ */ React.createElement(DemoCard, {
+    size: "$5",
+    w: 250,
+    h: 300
+  }));
+}
+__name(CardDemo, "CardDemo");
+function DemoCard(props) {
+  return /* @__PURE__ */ React.createElement(Card, {
+    theme: "dark",
+    elevate: true,
+    size: "$4",
+    ...props
+  }, /* @__PURE__ */ React.createElement(Card.Header, {
+    padded: true
+  }, /* @__PURE__ */ React.createElement(H2, null, "Sony A7IV"), /* @__PURE__ */ React.createElement(Paragraph, {
+    theme: "alt2"
+  }, "Now available")), /* @__PURE__ */ React.createElement(Card.Footer, {
+    padded: true
+  }, /* @__PURE__ */ React.createElement(XStack, {
+    f: 1
+  }), /* @__PURE__ */ React.createElement(Button, {
+    br: "$10"
+  }, "Purchase")), /* @__PURE__ */ React.createElement(Card.Background, null, /* @__PURE__ */ React.createElement(Image, {
+    pos: "absolute",
+    width: 300,
+    height: 500,
+    resizeMode: "cover",
+    src: camera.src
+  })));
+}
+__name(DemoCard, "DemoCard");
+export {
+  CardDemo as default
+};
+//# sourceMappingURL=CardDemo.js.map

package/dist/esm/demos/CardDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/CardDemo.tsx"],
+  "sourcesContent": ["import { Button, Card, CardProps, H2, H3, Image, Paragraph, XStack } from 'tamagui'\n\nimport camera from '../../public/camera.jpg'\n\nexport default function CardDemo() {\n  return (\n    <XStack $sm={{ als: 'flex-start' }} 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.95 }}\n        pressStyle={{ scale: 0.85 }}\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\" {...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 pos=\"absolute\" width={300} height={500} resizeMode=\"cover\" src={camera.src} />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
+  "mappings": ";;AAAA;AAEA;AAEe,oBAAoB;AACjC,SACE,oCAAC;AAAA,IAAO,KAAK,EAAE,KAAK,aAAa;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KAC/C,oCAAC;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY,EAAE,OAAO,KAAK;AAAA,IAC1B,YAAY,EAAE,OAAO,KAAK;AAAA,GAC5B,GACA,oCAAC;AAAA,IAAS,MAAK;AAAA,IAAK,GAAG;AAAA,IAAK,GAAG;AAAA,GAAK,CACtC;AAEJ;AAfwB;AAiBxB,kBAAkB,OAAkB;AAClC,SACE,oCAAC;AAAA,IAAK,OAAM;AAAA,IAAO,SAAO;AAAA,IAAC,MAAK;AAAA,IAAM,GAAG;AAAA,KACvC,oCAAC,KAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,oCAAC,UAAG,WAAS,GACb,oCAAC;AAAA,IAAU,OAAM;AAAA,KAAO,eAAa,CACvC,GACA,oCAAC,KAAK,QAAL;AAAA,IAAY,QAAM;AAAA,KACjB,oCAAC;AAAA,IAAO,GAAG;AAAA,GAAG,GACd,oCAAC;AAAA,IAAO,IAAG;AAAA,KAAM,UAAQ,CAC3B,GACA,oCAAC,KAAK,YAAL,MACC,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAW,OAAO;AAAA,IAAK,QAAQ;AAAA,IAAK,YAAW;AAAA,IAAQ,KAAK,OAAO;AAAA,GAAK,CACrF,CACF;AAEJ;AAhBS;",
+  "names": []
+}

package/dist/esm/demos/DialogDemo.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { X } from "@tamagui/feather-icons";
+import { Button, Dialog, Fieldset, Input, Label, Unspaced, YStack } from "tamagui";
+function DialogDemo() {
+  return /* @__PURE__ */ React.createElement(Dialog, {
+    modal: true
+  }, /* @__PURE__ */ React.createElement(Dialog.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, null, "Edit Profile")), /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(Dialog.Overlay, {
+    key: "overlay",
+    o: 0.5
+  }), /* @__PURE__ */ React.createElement(Dialog.Content, {
+    bordered: true,
+    elevate: true,
+    key: "content",
+    space: true,
+    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 },
+    x: 0,
+    scale: 1,
+    opacity: 1,
+    y: 0
+  }, /* @__PURE__ */ React.createElement(Dialog.Title, null, "Edit profile"), /* @__PURE__ */ React.createElement(Dialog.Description, null, "Make changes to your profile here. Click save when you're done."), /* @__PURE__ */ React.createElement(Fieldset, {
+    horizontal: true
+  }, /* @__PURE__ */ React.createElement(Label, {
+    w: 160,
+    justifyContent: "flex-end",
+    htmlFor: "name"
+  }, "Name"), /* @__PURE__ */ React.createElement(Input, {
+    f: 1,
+    id: "name",
+    defaultValue: "Nate Wienert"
+  })), /* @__PURE__ */ React.createElement(Fieldset, {
+    horizontal: true
+  }, /* @__PURE__ */ React.createElement(Label, {
+    w: 160,
+    justifyContent: "flex-end",
+    htmlFor: "username"
+  }, "Username"), /* @__PURE__ */ React.createElement(Input, {
+    f: 1,
+    id: "username",
+    defaultValue: "@natebirdman"
+  })), /* @__PURE__ */ React.createElement(YStack, {
+    ai: "flex-end",
+    mt: "$2"
+  }, /* @__PURE__ */ React.createElement(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    theme: "alt1",
+    "aria-label": "Close"
+  }, "Save changes"))), /* @__PURE__ */ React.createElement(Unspaced, null, /* @__PURE__ */ React.createElement(Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    pos: "absolute",
+    t: "$4",
+    r: "$4",
+    circular: true,
+    icon: X
+  }))))));
+}
+__name(DialogDemo, "DialogDemo");
+export {
+  DialogDemo as default
+};
+//# sourceMappingURL=DialogDemo.js.map

package/dist/esm/demos/DialogDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/DialogDemo.tsx"],
+  "sourcesContent": ["import { X } from '@tamagui/feather-icons'\nimport { Button, Dialog, Fieldset, Input, Label, Unspaced, YStack } from 'tamagui'\n\nexport default function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay key=\"overlay\" o={0.5} />\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          space\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          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\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 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 horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              Username\n            </Label>\n            <Input f={1} id=\"username\" defaultValue=\"@natebirdman\" />\n          </Fieldset>\n\n          <YStack ai=\"flex-end\" mt=\"$2\">\n            <Dialog.Close 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=\"$4\" r=\"$4\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,OAAK;AAAA,KACX,oCAAC,OAAO,SAAP;AAAA,IAAe,SAAO;AAAA,KACrB,oCAAC,cAAO,cAAY,CACtB,GACA,oCAAC,OAAO,QAAP,MACC,oCAAC,OAAO,SAAP;AAAA,IAAe,KAAI;AAAA,IAAU,GAAG;AAAA,GAAK,GACtC,oCAAC,OAAO,SAAP;AAAA,IACC,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,KAAI;AAAA,IACJ,OAAK;AAAA,IACL,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAAS;AAAA,UACP,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,IACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,IAClD,GAAG;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,KAEH,oCAAC,OAAO,OAAP,MAAa,cAAY,GAC1B,oCAAC,OAAO,aAAP,MAAmB,iEAEpB,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,KAClB,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAO,MAExD,GACA,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAO,cAAa;AAAA,GAAe,CACrD,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,KAClB,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAW,UAE5D,GACA,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAW,cAAa;AAAA,GAAe,CACzD,GAEA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAW,IAAG;AAAA,KACvB,oCAAC,OAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,oCAAC;AAAA,IAAO,OAAM;AAAA,IAAO,cAAW;AAAA,KAAQ,cAExC,CACF,CACF,GAEA,oCAAC,gBACC,oCAAC,OAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,oCAAC;AAAA,IAAO,KAAI;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,UAAQ;AAAA,IAAC,MAAM;AAAA,GAAG,CACzD,CACF,CACF,CACF,CACF;AAEJ;AA9DwB;",
+  "names": []
+}

package/dist/esm/demos/DrawerDemo.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Drawer } from "@tamagui/drawer";
+import { ChevronDown, ChevronUp } from "@tamagui/feather-icons";
+import { useState } from "react";
+import { Button, Paragraph, YStack } from "tamagui";
+function DrawerDemo() {
+  const [show, setShow] = useState(false);
+  return /* @__PURE__ */ React.createElement(YStack, {
+    minWidth: 230,
+    w: "100%",
+    h: "100%",
+    ai: "center",
+    jc: "center",
+    position: "relative"
+  }, /* @__PURE__ */ React.createElement(Drawer.Provider, null, /* @__PURE__ */ React.createElement(Button, {
+    size: "$6",
+    icon: show ? ChevronDown : ChevronUp,
+    circular: true,
+    onPress: () => setShow((x) => !x),
+    elevation: "$2"
+  }), /* @__PURE__ */ React.createElement(Drawer, {
+    open: show,
+    onChangeOpen: setShow
+  }, /* @__PURE__ */ React.createElement(Drawer.Frame, {
+    h: 200,
+    ai: "center",
+    jc: "center",
+    p: "$6",
+    space: true
+  }, /* @__PURE__ */ React.createElement(Paragraph, {
+    selectable: false
+  }, "Hello."), /* @__PURE__ */ React.createElement(Button, {
+    size: "$6",
+    icon: show ? ChevronDown : ChevronUp,
+    circular: true,
+    onPress: () => setShow((x) => !x),
+    elevation: "$2"
+  })))));
+}
+__name(DrawerDemo, "DrawerDemo");
+export {
+  DrawerDemo as default
+};
+//# sourceMappingURL=DrawerDemo.js.map

package/dist/esm/demos/DrawerDemo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/demos/DrawerDemo.tsx"],
+  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport default function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onChangeOpen={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AACA;AACA;AAEe,sBAAsB;AACnC,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AACtC,SACE,oCAAC;AAAA,IAAO,UAAU;AAAA,IAAK,GAAE;AAAA,IAAO,GAAE;AAAA,IAAO,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,UAAS;AAAA,KACxE,oCAAC,OAAO,UAAP,MACC,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,MAAM,OAAO,cAAc;AAAA,IAC3B,UAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChC,WAAU;AAAA,GACZ,GACA,oCAAC;AAAA,IAAO,MAAM;AAAA,IAAM,cAAc;AAAA,KAChC,oCAAC,OAAO,OAAP;AAAA,IAAa,GAAG;AAAA,IAAK,IAAG;AAAA,IAAS,IAAG;AAAA,IAAS,GAAE;AAAA,IAAK,OAAK;AAAA,KACxD,oCAAC;AAAA,IAAU,YAAY;AAAA,KAAO,QAAM,GACpC,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,MAAM,OAAO,cAAc;AAAA,IAC3B,UAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChC,WAAU;AAAA,GACZ,CACF,CACF,CACF,CACF;AAEJ;AA3BwB;",
+  "names": []
+}

package/dist/esm/demos/FeatherIconsDemo.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as FeatherIcons from "@tamagui/feather-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 /* @__PURE__ */ React.createElement(YStack, {
+        h: size,
+        ai: "center",
+        jc: "center",
+        key: name
+      }, /* @__PURE__ */ React.createElement(Icon, {
+        size: size * 0.25
+      }), /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement(Paragraph, {
+        size: "$2",
+        o: 0.5
+      }, name));
+    });
+  }, [search]);
+  return /* @__PURE__ */ React.createElement(YStack, {
+    als: "stretch",
+    p: "$4",
+    pb: "$0",
+    space: true
+  }, /* @__PURE__ */ React.createElement(Input, {
+    value: searchRaw,
+    onChangeText: setSearch,
+    placeholder: "Search..."
+  }), /* @__PURE__ */ React.createElement(YStack, {
+    h: 420
+  }, /* @__PURE__ */ React.createElement(ScrollView, null, /* @__PURE__ */ React.createElement(Grid, {
+    itemMinWidth: size
+  }, iconsMemo))));
+}
+__name(FeatherIconsDemo, "FeatherIconsDemo");
+export {
+  FeatherIconsDemo as default
+};
+//# sourceMappingURL=FeatherIconsDemo.js.map