@tamagui/demos 1.88.13 → 1.89.0-1706308641099

package/dist/jsx/AlertDialogDemo.mjs

@@ -0,0 +1,72 @@
+import { AlertDialog, Button, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AlertDialogDemo() {
+  return /* @__PURE__ */jsxs(AlertDialog, {
+    native: !0,
+    children: [/* @__PURE__ */jsx(AlertDialog.Trigger, {
+      asChild: !0,
+      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: !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__ */jsxs(YStack, {
+          space: !0,
+          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: !0,
+              children: /* @__PURE__ */jsx(Button, {
+                children: "Cancel"
+              })
+            }), /* @__PURE__ */jsx(AlertDialog.Action, {
+              asChild: !0,
+              children: /* @__PURE__ */jsx(Button, {
+                theme: "active",
+                children: "Accept"
+              })
+            })]
+          })]
+        })
+      }, "content")]
+    })]
+  });
+}
+export { AlertDialogDemo };

package/dist/jsx/AnimationsDemo.mjs

@@ -0,0 +1,75 @@
+import { LogoIcon } from "@tamagui/logo";
+import { Play } from "@tamagui/lucide-icons";
+import { Button, Square, useControllableState, useEvent } from "tamagui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AnimationsDemo(props) {
+  const [positionI, setPositionI] = useControllableState({
+      strategy: "most-recent-wins",
+      prop: props.position,
+      defaultProp: 0
+    }),
+    position = positions[positionI],
+    onPress = useEvent(() => {
+      setPositionI(x => (x + 1) % positions.length);
+    });
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(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__ */jsx(LogoIcon, {
+        downscale: 0.75
+      })
+    }), /* @__PURE__ */jsx(Button, {
+      position: "absolute",
+      bottom: 20,
+      left: 20,
+      icon: 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
+  }
+}];
+export { AnimationsDemo, positions };

package/dist/jsx/AnimationsEnterDemo.mjs

@@ -0,0 +1,40 @@
+import { LogoIcon } from "@tamagui/logo";
+import { useRef, useState } from "react";
+import { Button, Square, YStack } from "tamagui";
+import { useIsIntersecting } from "./useOnIntersecting.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AnimationsEnterDemo(props) {
+  const ref = useRef(null),
+    hasIntersected = useIsIntersecting(ref, {
+      once: !0
+    }),
+    [key, setKey] = useState(0);
+  return hasIntersected ? /* @__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"
+    })]
+  }) : /* @__PURE__ */jsx(YStack, {
+    ref
+  });
+}
+export { AnimationsEnterDemo };

package/dist/jsx/AnimationsHoverDemo.mjs

@@ -0,0 +1,23 @@
+import { LogoIcon } from "@tamagui/logo";
+import { Square } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+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 };

package/dist/jsx/AnimationsPresenceDemo.mjs

@@ -0,0 +1,88 @@
+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";
+import { jsx, jsxs } from "react/jsx-runtime";
+const images = [photo1, photo2, photo3].map(x => x.src || x),
+  GalleryItem = styled(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] = useState([0, 0]),
+    imageIndex = wrap(0, images.length, page),
+    paginate = going2 => {
+      setPage([page + going2, going2]);
+    };
+  return /* @__PURE__ */jsxs(XStack, {
+    overflow: "hidden",
+    backgroundColor: "#000",
+    position: "relative",
+    height: 300,
+    width: "100%",
+    alignItems: "center",
+    children: [/* @__PURE__ */jsx(AnimatePresence, {
+      initial: !1,
+      custom: {
+        going
+      },
+      children: /* @__PURE__ */jsx(GalleryItem, {
+        animation: "slowest",
+        going,
+        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: !0,
+      elevate: !0,
+      onPress: () => paginate(-1),
+      zi: 100
+    }), /* @__PURE__ */jsx(Button, {
+      accessibilityLabel: "Carousel right",
+      icon: ArrowRight,
+      size: "$5",
+      position: "absolute",
+      right: "$4",
+      circular: !0,
+      elevate: !0,
+      onPress: () => paginate(1),
+      zi: 100
+    })]
+  });
+}
+export { AnimationsPresenceDemo, images };

package/dist/jsx/AnimationsTimingDemo.mjs

@@ -0,0 +1,22 @@
+import { LogoIcon } from "@tamagui/logo";
+import { Square } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+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 };

package/dist/jsx/AvatarDemo.mjs

@@ -0,0 +1,29 @@
+import { Avatar, XStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AvatarDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    space: "$6",
+    children: [/* @__PURE__ */jsxs(Avatar, {
+      circular: !0,
+      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: !0,
+      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 };

package/dist/jsx/BuildAButtonDemo.mjs

@@ -0,0 +1,101 @@
+import { Drumstick, Hand } from "@tamagui/lucide-icons";
+import { Button, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const outlined = {
+  backgroundColor: "transparent",
+  borderWidth: 2,
+  borderColor: "$background",
+  borderRadius: "$10",
+  hoverStyle: {
+    backgroundColor: "transparent",
+    borderColor: "$backgroundPress"
+  }
+};
+function BuildAButtonDemo() {
+  return /* @__PURE__ */jsx(YStack, {
+    fullscreen: !0,
+    ov: "hidden",
+    children: /* @__PURE__ */jsxs(XStack, {
+      mah: 200,
+      y: -100,
+      x: -40,
+      rotate: "-10deg",
+      children: [/* @__PURE__ */jsx(ButtonCol, {
+        y: 35,
+        size: "$2",
+        ...outlined,
+        subTheme: "alt1",
+        borderWidth: 1
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        y: 30
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        y: -50,
+        ...outlined
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        ...outlined,
+        icon: /* @__PURE__ */jsx(Hand, {})
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$6",
+        subTheme: "alt2"
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$6",
+        subTheme: "alt2",
+        ...outlined
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$8",
+        subTheme: "alt2",
+        iconAfter: /* @__PURE__ */jsx(Drumstick, {}),
+        ...outlined
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$10",
+        subTheme: "alt1"
+      }), /* @__PURE__ */jsx(ButtonCol, {
+        size: "$8",
+        subTheme: "alt2",
+        ...outlined,
+        borderRadius: 0
+      })]
+    })
+  });
+}
+function ButtonCol(props) {
+  const subTheme = props.subTheme ? `_${props.subTheme}` : "";
+  return /* @__PURE__ */jsxs(YStack, {
+    padding: "$2",
+    space: "$3",
+    children: [/* @__PURE__ */jsx(Button, {
+      theme: props.subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "orange" + subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "yellow" + subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "green" + subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "blue" + subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "purple" + subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "pink" + subTheme,
+      ...props,
+      children: "Hello"
+    }), /* @__PURE__ */jsx(Button, {
+      theme: "red" + subTheme,
+      ...props,
+      children: "Hello"
+    })]
+  });
+}
+export { BuildAButtonDemo };

package/dist/jsx/ButtonDemo.mjs

@@ -0,0 +1,59 @@
+import { Activity, Airplay } from "@tamagui/lucide-icons";
+import { Button, XGroup, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+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: "active",
+        children: "Active"
+      }), /* @__PURE__ */jsx(Button, {
+        size: "$3",
+        variant: "outlined",
+        children: "Outlined"
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      space: "$2",
+      children: [/* @__PURE__ */jsx(Button, {
+        themeInverse: !0,
+        size: "$3",
+        children: "Inverse"
+      }), /* @__PURE__ */jsx(Button, {
+        iconAfter: Activity,
+        size: "$3",
+        children: "iconAfter"
+      })]
+    }), /* @__PURE__ */jsxs(XGroup, {
+      children: [/* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          width: "50%",
+          size: "$2",
+          disabled: !0,
+          opacity: 0.5,
+          children: "disabled"
+        })
+      }), /* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          width: "50%",
+          size: "$2",
+          chromeless: !0,
+          children: "chromeless"
+        })
+      })]
+    })]
+  });
+}
+export { ButtonDemo };