@tamagui/demos 1.114.3 → 1.115.0

package/dist/cjs/AccordionDemo.cjs

@@ -0,0 +1,96 @@
+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."
+          })
+        })
+      })]
+    })]
+  });
+}

package/dist/cjs/AddThemeDemo.cjs

@@ -0,0 +1,70 @@
+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"
+    })]
+  });
+}

package/dist/cjs/AlertDialogDemo.cjs

@@ -0,0 +1,96 @@
+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")]
+    })]
+  });
+}

package/dist/cjs/AnimationsDemo.cjs

@@ -0,0 +1,100 @@
+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
+  }
+}];

package/dist/cjs/AnimationsEnterDemo.cjs

@@ -0,0 +1,74 @@
+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.cjs"),
+  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"
+    })]
+  });
+}

package/dist/cjs/AnimationsHoverDemo.cjs

@@ -0,0 +1,47 @@
+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
+    })
+  });
+}

package/dist/cjs/AnimationsPresenceDemo.cjs

@@ -0,0 +1,124 @@
+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
+    })]
+  });
+}

package/dist/cjs/AnimationsTimingDemo.cjs

@@ -0,0 +1,46 @@
+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
+    })
+  });
+}