@tamagui/demos 1.27.1 → 1.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.27.1",
+  "version": "1.27.3",
   "sideEffects": [
     "*.css"
   ],
@@ -28,29 +28,29 @@
     }
   },
   "dependencies": {
-    "@tamagui/avatar": "1.27.1",
-    "@tamagui/button": "1.27.1",
-    "@tamagui/config": "1.27.1",
-    "@tamagui/core": "1.27.1",
-    "@tamagui/list-item": "1.27.1",
-    "@tamagui/logo": "1.27.1",
-    "@tamagui/menu": "1.27.1",
-    "@tamagui/popover": "1.27.1",
-    "@tamagui/progress": "1.27.1",
-    "@tamagui/radio-group": "1.27.1",
-    "@tamagui/select": "1.27.1",
-    "@tamagui/sheet": "1.27.1",
-    "@tamagui/slider": "1.27.1",
-    "@tamagui/stacks": "1.27.1",
-    "@tamagui/toast": "1.27.1",
-    "tamagui": "1.27.1"
+    "@tamagui/avatar": "1.27.3",
+    "@tamagui/button": "1.27.3",
+    "@tamagui/config": "1.27.3",
+    "@tamagui/core": "1.27.3",
+    "@tamagui/list-item": "1.27.3",
+    "@tamagui/logo": "1.27.3",
+    "@tamagui/menu": "1.27.3",
+    "@tamagui/popover": "1.27.3",
+    "@tamagui/progress": "1.27.3",
+    "@tamagui/radio-group": "1.27.3",
+    "@tamagui/select": "1.27.3",
+    "@tamagui/sheet": "1.27.3",
+    "@tamagui/slider": "1.27.3",
+    "@tamagui/stacks": "1.27.3",
+    "@tamagui/toast": "1.27.3",
+    "tamagui": "1.27.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.27.1",
+    "@tamagui/build": "1.27.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/esm/AddThemeDemo.mjs

@@ -1,36 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { addTheme } from "@tamagui/theme";
-import { useState } from "react";
-import { Button, H3, Square, Theme, YStack } from "tamagui";
-function AddThemeDemo() {
-  const [theme, setTheme] = useState();
-  return /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: true, children: [
-    /* @__PURE__ */ jsxs(H3, { children: [
-      "Theme: ",
-      theme ?? "none"
-    ] }),
-    /* @__PURE__ */ jsx(Theme, { name: theme ?? "red", children: /* @__PURE__ */ jsx(Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        disabled: theme === "superblue",
-        onPress: () => {
-          addTheme({
-            name: "superblue",
-            insertCSS: true,
-            theme: {
-              background: "#000",
-              color: "blue"
-            }
-          });
-          setTheme("superblue");
-        },
-        children: "Add superblue theme"
-      }
-    )
-  ] });
-}
-export {
-  AddThemeDemo
-};
-//# sourceMappingURL=AddThemeDemo.mjs.map

package/dist/esm/AlertDialogDemo.mjs

@@ -1,53 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AlertDialog, Button, XStack, YStack } from "tamagui";
-function AlertDialogDemo() {
-  return /* @__PURE__ */ jsxs(AlertDialog, { native: true, children: [
-    /* @__PURE__ */ jsx(AlertDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Show Alert" }) }),
-    /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
-      /* @__PURE__ */ jsx(
-        AlertDialog.Overlay,
-        {
-          animation: "quick",
-          opacity: 0.5,
-          enterStyle: { opacity: 0 },
-          exitStyle: { opacity: 0 }
-        },
-        "overlay"
-      ),
-      /* @__PURE__ */ jsx(
-        AlertDialog.Content,
-        {
-          bordered: true,
-          elevate: 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,
-          children: /* @__PURE__ */ jsxs(YStack, { space: true, children: [
-            /* @__PURE__ */ jsx(AlertDialog.Title, { children: "Accept" }),
-            /* @__PURE__ */ jsx(AlertDialog.Description, { children: "By pressing yes, you accept our terms and conditions." }),
-            /* @__PURE__ */ jsxs(XStack, { space: "$3", justifyContent: "flex-end", children: [
-              /* @__PURE__ */ jsx(AlertDialog.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Cancel" }) }),
-              /* @__PURE__ */ jsx(AlertDialog.Action, { asChild: true, children: /* @__PURE__ */ jsx(Button, { theme: "active", children: "Accept" }) })
-            ] })
-          ] })
-        },
-        "content"
-      )
-    ] })
-  ] });
-}
-export {
-  AlertDialogDemo
-};
-//# sourceMappingURL=AlertDialogDemo.mjs.map

package/dist/esm/AnimationsDemo.mjs

@@ -1,89 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { LogoIcon } from "@tamagui/logo";
-import { Play } from "@tamagui/lucide-icons";
-import { Button, Square, useControllableState, useEvent } from "tamagui";
-function AnimationsDemo(props) {
-  const [positionI, setPositionI] = useControllableState({
-    strategy: "most-recent-wins",
-    prop: props.position,
-    defaultProp: 0
-  });
-  const position = positions[positionI];
-  const onPress = useEvent(() => {
-    setPositionI((x) => {
-      return (x + 1) % positions.length;
-    });
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Square,
-      {
-        animation: props.animation || "bouncy",
-        onPress,
-        size: 104,
-        borderColor: "$borderColor",
-        borderWidth: 1,
-        borderRadius: "$9",
-        backgroundColor: "$color9",
-        hoverStyle: {
-          scale: 1.1
-        },
-        pressStyle: {
-          scale: 0.9
-        },
-        ...position,
-        children: props.children || /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        position: "absolute",
-        bottom: 20,
-        left: 20,
-        icon: Play,
-        theme: props.tint,
-        size: "$5",
-        circular: true,
-        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
-    }
-  }
-];
-export {
-  AnimationsDemo,
-  positions
-};
-//# sourceMappingURL=AnimationsDemo.mjs.map

package/dist/esm/AnimationsEnterDemo.mjs

@@ -1,40 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { LogoIcon } from "@tamagui/logo";
-import { useRef, useState } from "react";
-import { Button, Square, YStack } from "tamagui";
-import { useIsIntersecting } from "./useOnIntersecting";
-function AnimationsEnterDemo(props) {
-  const ref = useRef(null);
-  const hasIntersected = useIsIntersecting(ref, { once: true });
-  const [key, setKey] = useState(0);
-  if (!hasIntersected) {
-    return /* @__PURE__ */ jsx(YStack, { ref });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      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__ */ jsx(LogoIcon, { downscale: 0.75 })
-      },
-      key
-    ),
-    /* @__PURE__ */ jsx(Button, { size: "$3", marginTop: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })
-  ] });
-}
-export {
-  AnimationsEnterDemo
-};
-//# sourceMappingURL=AnimationsEnterDemo.mjs.map

package/dist/esm/AnimationsHoverDemo.mjs

@@ -1,27 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { LogoIcon } from "@tamagui/logo";
-import { Square } from "tamagui";
-function AnimationsHoverDemo() {
-  return /* @__PURE__ */ jsx(
-    Square,
-    {
-      borderColor: "$borderColor",
-      animation: "bouncy",
-      elevation: "$4",
-      backgroundColor: "$color9",
-      size: 104,
-      borderRadius: "$9",
-      hoverStyle: {
-        scale: 1.2
-      },
-      pressStyle: {
-        scale: 0.9
-      },
-      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-    }
-  );
-}
-export {
-  AnimationsHoverDemo
-};
-//# sourceMappingURL=AnimationsHoverDemo.mjs.map

package/dist/esm/AnimationsPresenceDemo.mjs

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

package/dist/esm/AnimationsTimingDemo.mjs

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { LogoIcon } from "@tamagui/logo";
-import { Square } from "tamagui";
-function AnimationsTimingDemo() {
-  return /* @__PURE__ */ jsx(
-    Square,
-    {
-      backgroundColor: "$pink10",
-      animation: "100ms",
-      elevation: "$4",
-      size: 110,
-      borderRadius: "$9",
-      hoverStyle: {
-        scale: 1.2
-      },
-      pressStyle: {
-        scale: 0.9
-      },
-      children: /* @__PURE__ */ jsx(LogoIcon, { downscale: 0.75 })
-    }
-  );
-}
-export {
-  AnimationsTimingDemo
-};
-//# sourceMappingURL=AnimationsTimingDemo.mjs.map

package/dist/esm/AvatarDemo.mjs

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

package/dist/esm/ButtonDemo.mjs

@@ -1,25 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Activity, Airplay } from "@tamagui/lucide-icons";
-import { Button, XGroup, XStack, YStack } from "tamagui";
-function ButtonDemo(props) {
-  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", space: "$3", ...props, children: [
-    /* @__PURE__ */ jsx(Button, { children: "Plain" }),
-    /* @__PURE__ */ jsx(Button, { alignSelf: "center", icon: Airplay, size: "$6", children: "Large" }),
-    /* @__PURE__ */ jsxs(XStack, { space: "$2", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(Button, { size: "$3", theme: "alt2", children: "Alt2" }),
-      /* @__PURE__ */ jsx(Button, { size: "$3", theme: "yellow", children: "Yellow" })
-    ] }),
-    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
-      /* @__PURE__ */ jsx(Button, { themeInverse: true, size: "$3", children: "Small Inverse" }),
-      /* @__PURE__ */ jsx(Button, { iconAfter: Activity, size: "$3", children: "After" })
-    ] }),
-    /* @__PURE__ */ jsxs(XGroup, { children: [
-      /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { width: "50%", size: "$2", disabled: true, opacity: 0.5, children: "disabled" }) }),
-      /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { width: "50%", size: "$2", chromeless: true, children: "chromeless" }) })
-    ] })
-  ] });
-}
-export {
-  ButtonDemo
-};
-//# sourceMappingURL=ButtonDemo.mjs.map

package/dist/esm/ButtonNewDemo.mjs

@@ -1,31 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Activity, Airplay } from "@tamagui/lucide-icons";
-import { Button, XGroup, XStack, YStack } from "tamagui";
-function ButtonNewDemo(props) {
-  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", space: "$3", ...props, children: [
-    /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(Button.Text, { children: "Plain" }) }),
-    /* @__PURE__ */ jsxs(Button, { alignSelf: "center", size: "$6", space: "$2", children: [
-      /* @__PURE__ */ jsx(Button.Icon, { children: /* @__PURE__ */ jsx(Airplay, {}) }),
-      /* @__PURE__ */ jsx(Button.Text, { children: "Large" })
-    ] }),
-    /* @__PURE__ */ jsxs(XStack, { space: "$2", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(Button, { size: "$3", theme: "alt2", children: /* @__PURE__ */ jsx(Button.Text, { children: "Alt2" }) }),
-      /* @__PURE__ */ jsx(Button, { size: "$3", theme: "yellow", children: /* @__PURE__ */ jsx(Button.Text, { children: "Yellow" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
-      /* @__PURE__ */ jsx(Button, { themeInverse: true, size: "$3", children: /* @__PURE__ */ jsx(Button.Text, { children: "Small Inverse" }) }),
-      /* @__PURE__ */ jsxs(Button, { size: "$3", space: "$2", children: [
-        /* @__PURE__ */ jsx(Button.Text, { children: "After" }),
-        /* @__PURE__ */ jsx(Button.Icon, { children: /* @__PURE__ */ jsx(Activity, {}) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(XGroup, { children: [
-      /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { width: "50%", size: "$2", disabled: true, opacity: 0.5, children: /* @__PURE__ */ jsx(Button.Text, { children: "disabled" }) }) }),
-      /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(Button, { width: "50%", size: "$2", chromeless: true, children: /* @__PURE__ */ jsx(Button.Text, { children: "chromeless" }) }) })
-    ] })
-  ] });
-}
-export {
-  ButtonNewDemo
-};
-//# sourceMappingURL=ButtonNewDemo.mjs.map