@tamagui/demos 1.116.1 → 1.116.2

package/dist/cjs/AccordionDemo.js

@@ -0,0 +1,43 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AccordionDemo_exports = {};
+__export(AccordionDemo_exports, {
+  AccordionDemo: () => AccordionDemo
+});
+module.exports = __toCommonJS(AccordionDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function AccordionDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion, { overflow: "hidden", width: "$20", type: "multiple", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, { value: "a1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Trigger, { flexDirection: "row", justifyContent: "space-between", children: ({
+        open
+      }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "1. Take a cold shower" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { animation: "quick", rotate: open ? "180deg" : "0deg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: "$1" }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.HeightAnimator, { animation: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Content, { animation: "medium", exitStyle: { opacity: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue." }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, { value: "a2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Trigger, { flexDirection: "row", justifyContent: "space-between", children: ({
+        open
+      }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "2. Eat 4 eggs" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { animation: "quick", rotate: open ? "180deg" : "0deg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: "$1" }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.HeightAnimator, { animation: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Content, { animation: "medium", exitStyle: { opacity: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Eggs have been a dietary staple since time immemorial and there\u2019s good reason for their continued presence in our menus and meals." }) }) })
+    ] })
+  ] });
+}
+//# sourceMappingURL=AccordionDemo.js.map

package/dist/cjs/AddThemeDemo.js

@@ -0,0 +1,56 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AddThemeDemo_exports = {};
+__export(AddThemeDemo_exports, {
+  AddThemeDemo: () => AddThemeDemo
+});
+module.exports = __toCommonJS(AddThemeDemo_exports);
+var import_react = __toESM(require("react")), import_theme = require("@tamagui/theme"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function AddThemeDemo() {
+  const [theme, setTheme] = import_react.default.useState();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.H3, { children: [
+      "Theme: ",
+      theme ?? "none"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { name: theme ?? "red", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        disabled: theme === "superblue",
+        onPress: () => {
+          (0, import_theme.addTheme)({
+            name: "superblue",
+            insertCSS: !0,
+            theme: {
+              background: "#000",
+              color: "blue"
+            }
+          }), setTheme("superblue");
+        },
+        children: "Add superblue theme"
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=AddThemeDemo.js.map

package/dist/cjs/AlertDialogDemo.js

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AlertDialogDemo_exports = {};
+__export(AlertDialogDemo_exports, {
+  AlertDialogDemo: () => AlertDialogDemo
+});
+module.exports = __toCommonJS(AlertDialogDemo_exports);
+var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function AlertDialogDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.AlertDialog, { native: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Trigger, { asChild: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Show Alert" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.AlertDialog.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.AlertDialog.Overlay,
+        {
+          animation: "quick",
+          opacity: 0.5,
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 0 }
+        },
+        "overlay"
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.AlertDialog.Content,
+        {
+          bordered: !0,
+          elevate: !0,
+          animation: [
+            "quick",
+            {
+              opacity: {
+                overshootClamping: !0
+              }
+            }
+          ],
+          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,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: !0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Title, { children: "Accept" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Description, { children: "By pressing yes, you accept our terms and conditions." }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$3", justifyContent: "flex-end", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Cancel, { asChild: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Cancel" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Action, { asChild: !0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "active", children: "Accept" }) })
+            ] })
+          ] })
+        },
+        "content"
+      )
+    ] })
+  ] });
+}
+//# sourceMappingURL=AlertDialogDemo.js.map

package/dist/cjs/AnimationsDemo.js

@@ -0,0 +1,99 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AnimationsDemo_exports = {};
+__export(AnimationsDemo_exports, {
+  AnimationsDemo: () => AnimationsDemo,
+  positions: () => positions
+});
+module.exports = __toCommonJS(AnimationsDemo_exports);
+var import_logo = require("@tamagui/logo"), import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function AnimationsDemo(props) {
+  const [positionI, setPositionI] = (0, import_tamagui.useControllableState)({
+    strategy: "most-recent-wins",
+    prop: props.position,
+    defaultProp: 0
+  }), position = positions[positionI], onPress = (0, import_tamagui.useEvent)(() => {
+    setPositionI((x) => (x + 1) % positions.length);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        animation: props.animation || "bouncy",
+        animateOnly: ["transform"],
+        onPress,
+        size: 104,
+        borderColor: "$borderColor",
+        borderWidth: 1,
+        borderRadius: "$9",
+        backgroundColor: "$color9",
+        hoverStyle: {
+          scale: 1.5
+        },
+        pressStyle: {
+          scale: 0.9
+        },
+        ...position,
+        children: props.children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_logo.LogoIcon, { downscale: 0.75 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        position: "absolute",
+        bottom: 20,
+        left: 20,
+        icon: import_lucide_icons.Play,
+        theme: props.tint,
+        size: "$5",
+        circular: !0,
+        onPress
+      }
+    )
+  ] });
+}
+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
+    }
+  }
+];
+//# sourceMappingURL=AnimationsDemo.js.map

package/dist/cjs/AnimationsEnterDemo.js

@@ -0,0 +1,55 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AnimationsEnterDemo_exports = {};
+__export(AnimationsEnterDemo_exports, {
+  AnimationsEnterDemo: () => AnimationsEnterDemo
+});
+module.exports = __toCommonJS(AnimationsEnterDemo_exports);
+var import_react = __toESM(require("react")), import_logo = require("@tamagui/logo"), import_tamagui = require("tamagui"), import_useOnIntersecting = require("./useOnIntersecting"), import_jsx_runtime = require("react/jsx-runtime");
+function AnimationsEnterDemo(props) {
+  const ref = import_react.default.useRef(null), [key, setKey] = import_react.default.useState(0);
+  return import_tamagui.isWeb && !(0, import_useOnIntersecting.useIsIntersecting)(ref, { once: !0 }) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { ref }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        enterStyle: {
+          scale: 1.5,
+          y: -10,
+          opacity: 0
+        },
+        animation: "bouncy",
+        elevation: "$4",
+        size: 110,
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        backgroundColor: "$pink10",
+        borderRadius: "$9",
+        children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_logo.LogoIcon, { downscale: 0.75 })
+      },
+      key
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", marginTop: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })
+  ] });
+}
+//# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/cjs/AnimationsHoverDemo.js

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AnimationsHoverDemo_exports = {};
+__export(AnimationsHoverDemo_exports, {
+  AnimationsHoverDemo: () => AnimationsHoverDemo
+});
+module.exports = __toCommonJS(AnimationsHoverDemo_exports);
+var import_logo = require("@tamagui/logo"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function AnimationsHoverDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tamagui.Square,
+    {
+      borderColor: "$borderColor",
+      animation: "bouncy",
+      elevation: "$4",
+      backgroundColor: "$color9",
+      size: 104,
+      borderRadius: "$9",
+      hoverStyle: {
+        scale: 1.2
+      },
+      pressStyle: {
+        scale: 0.9
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_logo.LogoIcon, { downscale: 0.75 })
+    }
+  );
+}
+//# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/cjs/AnimationsPresenceDemo.js

@@ -0,0 +1,102 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AnimationsPresenceDemo_exports = {};
+__export(AnimationsPresenceDemo_exports, {
+  AnimationsPresenceDemo: () => AnimationsPresenceDemo,
+  images: () => images
+});
+module.exports = __toCommonJS(AnimationsPresenceDemo_exports);
+var import_react = __toESM(require("react")), import_animate_presence = require("@tamagui/animate-presence"), import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_photo1 = __toESM(require("../../public/photo1.jpg")), import_photo2 = __toESM(require("../../public/photo2.jpg")), import_photo3 = __toESM(require("../../public/photo3.jpg")), import_jsx_runtime = require("react/jsx-runtime");
+const images = [import_photo1.default, import_photo2.default, import_photo3.default].map((x) => x.src || x), GalleryItem = (0, import_tamagui.styled)(import_tamagui.YStack, {
+  zIndex: 1,
+  x: 0,
+  opacity: 1,
+  fullscreen: !0,
+  variants: {
+    // 1 = right, 0 = nowhere, -1 = left
+    going: {
+      ":number": (going) => ({
+        enterStyle: {
+          x: going > 0 ? 1e3 : -1e3,
+          opacity: 0
+        },
+        exitStyle: {
+          zIndex: 0,
+          x: going < 0 ? 1e3 : -1e3,
+          opacity: 0
+        }
+      })
+    }
+  }
+}), wrap = (min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+};
+function AnimationsPresenceDemo() {
+  const [[page, going], setPage] = import_react.default.useState([0, 0]), imageIndex = wrap(0, images.length, page), paginate = (going2) => {
+    setPage([page + going2, going2]);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.XStack,
+    {
+      overflow: "hidden",
+      backgroundColor: "#000",
+      position: "relative",
+      height: 300,
+      width: "100%",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, { initial: !1, custom: { going }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GalleryItem, { animation: "slow", going, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Image, { source: { uri: images[imageIndex], width: 820, height: 300 } }) }, page) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Button,
+          {
+            accessibilityLabel: "Carousel left",
+            icon: import_lucide_icons.ArrowLeft,
+            size: "$5",
+            position: "absolute",
+            left: "$4",
+            circular: !0,
+            elevate: !0,
+            onPress: () => paginate(-1),
+            zi: 100
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Button,
+          {
+            accessibilityLabel: "Carousel right",
+            icon: import_lucide_icons.ArrowRight,
+            size: "$5",
+            position: "absolute",
+            right: "$4",
+            circular: !0,
+            elevate: !0,
+            onPress: () => paginate(1),
+            zi: 100
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=AnimationsPresenceDemo.js.map

package/dist/cjs/AnimationsTimingDemo.js

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AnimationsTimingDemo_exports = {};
+__export(AnimationsTimingDemo_exports, {
+  AnimationsTimingDemo: () => AnimationsTimingDemo
+});
+module.exports = __toCommonJS(AnimationsTimingDemo_exports);
+var import_logo = require("@tamagui/logo"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function AnimationsTimingDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tamagui.Square,
+    {
+      backgroundColor: "$pink10",
+      animation: "100ms",
+      elevation: "$4",
+      size: 110,
+      borderRadius: "$9",
+      hoverStyle: {
+        scale: 1.2
+      },
+      pressStyle: {
+        scale: 0.9
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_logo.LogoIcon, { downscale: 0.75 })
+    }
+  );
+}
+//# sourceMappingURL=AnimationsTimingDemo.js.map

package/dist/cjs/AvatarDemo.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var AvatarDemo_exports = {};
+__export(AvatarDemo_exports, {
+  AvatarDemo: () => AvatarDemo
+});
+module.exports = __toCommonJS(AvatarDemo_exports);
+var import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function AvatarDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", gap: "$6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Avatar, { circular: !0, size: "$10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.Avatar.Image,
+        {
+          accessibilityLabel: "Cam",
+          src: "https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Fallback, { backgroundColor: "$blue10" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Avatar, { circular: !0, size: "$8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.Avatar.Image,
+        {
+          accessibilityLabel: "Nate Wienert",
+          src: "https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Avatar.Fallback, { delayMs: 600, backgroundColor: "$blue10" })
+    ] })
+  ] });
+}
+//# sourceMappingURL=AvatarDemo.js.map

package/dist/cjs/BuildAButtonDemo.js

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var BuildAButtonDemo_exports = {};
+__export(BuildAButtonDemo_exports, {
+  BuildAButtonDemo: () => BuildAButtonDemo
+});
+module.exports = __toCommonJS(BuildAButtonDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+const outlined = {
+  backgroundColor: "transparent",
+  borderWidth: 2,
+  borderColor: "$background",
+  borderRadius: "$10",
+  hoverStyle: {
+    backgroundColor: "transparent",
+    borderColor: "$backgroundPress"
+  }
+};
+function BuildAButtonDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { fullscreen: !0, ov: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { mah: 200, y: -100, x: -40, rotate: "-10deg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { y: 35, size: "$2", ...outlined, subTheme: "alt1", borderWidth: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { y: 30 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { y: -50, ...outlined }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { ...outlined, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Hand, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { size: "$6", subTheme: "alt2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { size: "$6", subTheme: "alt2", ...outlined }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { size: "$8", subTheme: "alt2", iconAfter: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Drumstick, {}), ...outlined }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { size: "$10", subTheme: "alt1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonCol, { size: "$8", subTheme: "alt2", ...outlined, borderRadius: 0 })
+  ] }) });
+}
+function ButtonCol(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$2", gap: "$3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: props.subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "orange" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "yellow" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "green" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "blue" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "purple" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "pink" + subTheme, ...props, children: "Hello" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "red" + subTheme, ...props, children: "Hello" })
+  ] });
+}
+//# sourceMappingURL=BuildAButtonDemo.js.map

package/dist/cjs/ButtonDemo.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var ButtonDemo_exports = {};
+__export(ButtonDemo_exports, {
+  ButtonDemo: () => ButtonDemo
+});
+module.exports = __toCommonJS(ButtonDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function ButtonDemo(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$3", gap: "$3", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Plain" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { alignSelf: "center", icon: import_lucide_icons.Airplay, size: "$6", children: "Large" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$2", justifyContent: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", theme: "active", children: "Active" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", variant: "outlined", children: "Outlined" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { themeInverse: !0, size: "$3", children: "Inverse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { iconAfter: import_lucide_icons.Activity, size: "$3", children: "iconAfter" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { width: "50%", size: "$2", disabled: !0, opacity: 0.5, children: "disabled" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { width: "50%", size: "$2", chromeless: !0, children: "chromeless" }) })
+    ] })
+  ] });
+}
+//# sourceMappingURL=ButtonDemo.js.map