@tamagui/demos 1.88.13 → 1.88.14

package/dist/esm/TooltipDemo.mjs

@@ -0,0 +1,101 @@
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle } from "@tamagui/lucide-icons";
+import { Button, Paragraph, Tooltip, TooltipGroup, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TooltipDemo() {
+  return /* @__PURE__ */jsx(TooltipGroup, {
+    delay: {
+      open: 3e3,
+      close: 100
+    },
+    children: /* @__PURE__ */jsxs(YStack, {
+      space: "$2",
+      alignSelf: "center",
+      children: [/* @__PURE__ */jsxs(XStack, {
+        space: "$2",
+        children: [/* @__PURE__ */jsx(Demo, {
+          groupId: "0",
+          placement: "top-end",
+          Icon: Circle
+        }), /* @__PURE__ */jsx(Demo, {
+          groupId: "1",
+          placement: "top",
+          Icon: ChevronUp
+        }), /* @__PURE__ */jsx(Demo, {
+          groupId: "2",
+          placement: "top-start",
+          Icon: Circle
+        })]
+      }), /* @__PURE__ */jsxs(XStack, {
+        space: "$2",
+        children: [/* @__PURE__ */jsx(Demo, {
+          groupId: "3",
+          placement: "left",
+          Icon: ChevronLeft
+        }), /* @__PURE__ */jsx(YStack, {
+          flex: 1
+        }), /* @__PURE__ */jsx(Demo, {
+          groupId: "4",
+          placement: "right",
+          Icon: ChevronRight
+        })]
+      }), /* @__PURE__ */jsxs(XStack, {
+        space: "$2",
+        children: [/* @__PURE__ */jsx(Demo, {
+          groupId: "5",
+          placement: "bottom-end",
+          Icon: Circle
+        }), /* @__PURE__ */jsx(Demo, {
+          groupId: "6",
+          placement: "bottom",
+          Icon: ChevronDown
+        }), /* @__PURE__ */jsx(Demo, {
+          groupId: "7",
+          placement: "bottom-start",
+          Icon: Circle
+        })]
+      })]
+    })
+  });
+}
+function Demo({
+  Icon,
+  ...props
+}) {
+  return /* @__PURE__ */jsxs(Tooltip, {
+    ...props,
+    children: [/* @__PURE__ */jsx(Tooltip.Trigger, {
+      children: /* @__PURE__ */jsx(Button, {
+        icon: Icon,
+        circular: !0
+      })
+    }), /* @__PURE__ */jsxs(Tooltip.Content, {
+      enterStyle: {
+        x: 0,
+        y: -5,
+        opacity: 0,
+        scale: 0.9
+      },
+      exitStyle: {
+        x: 0,
+        y: -5,
+        opacity: 0,
+        scale: 0.9
+      },
+      scale: 1,
+      x: 0,
+      y: 0,
+      opacity: 1,
+      animation: ["quick", {
+        opacity: {
+          overshootClamping: !0
+        }
+      }],
+      children: [/* @__PURE__ */jsx(Tooltip.Arrow, {}), /* @__PURE__ */jsx(Paragraph, {
+        size: "$2",
+        lineHeight: "$1",
+        children: "Hello world"
+      })]
+    })]
+  });
+}
+export { TooltipDemo };

package/dist/esm/TooltipDemo.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TooltipDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMO,kCACP,iBAQO,oBAMC;AAJD,SAAS,cAAc;AAC5B,SACE,4CAAC,+BAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,uDAAC,yBAAO,OAAM,MAAK,WAAU,UAC3B;AAAA,iDAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,WAAU,MAAM,4BAAQ;AAAA,MACpD,4CAAC,QAAK,SAAQ,KAAI,WAAU,OAAM,MAAM,+BAAW;AAAA,MACnD,4CAAC,QAAK,SAAQ,KAAI,WAAU,aAAY,MAAM,4BAAQ;AAAA,OACxD;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,QAAO,MAAM,iCAAa;AAAA,MACtD,4CAAC,yBAAO,MAAM,GAAG;AAAA,MACjB,4CAAC,QAAK,SAAQ,KAAI,WAAU,SAAQ,MAAM,kCAAc;AAAA,OAC1D;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,cAAa,MAAM,4BAAQ;AAAA,MACvD,4CAAC,QAAK,SAAQ,KAAI,WAAU,UAAS,MAAM,iCAAa;AAAA,MACxD,4CAAC,QAAK,SAAQ,KAAI,WAAU,gBAAe,MAAM,4BAAQ;AAAA,OAC3D;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AAC/D,SACE,6CAAC,0BAAS,GAAG,OACX;AAAA,gDAAC,uBAAQ,SAAR,EACC,sDAAC,yBAAO,MAAM,MAAM,UAAQ,IAAC,GAC/B;AAAA,IACA;AAAA,MAAC,uBAAQ;AAAA,MAAR;AAAA,QACC,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,QAClD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,QACjD,OAAO;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QAEA;AAAA,sDAAC,uBAAQ,OAAR,EAAc;AAAA,UACf,4CAAC,4BAAU,MAAK,MAAK,YAAW,MAAK,yBAErC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMO,kCAEP,iBAAyE,oBAMjE;AAJD,SAAS,cAAc;AAC5B,SACE,4CAAC,+BAAa,OAAO,EAAE,MAAM,KAAM,OAAO,IAAI,GAC5C,uDAAC,yBAAO,OAAM,MAAK,WAAU,UAC3B;AAAA,iDAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,WAAU,MAAM,4BAAQ;AAAA,MACpD,4CAAC,QAAK,SAAQ,KAAI,WAAU,OAAM,MAAM,+BAAW;AAAA,MACnD,4CAAC,QAAK,SAAQ,KAAI,WAAU,aAAY,MAAM,4BAAQ;AAAA,OACxD;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,QAAO,MAAM,iCAAa;AAAA,MACtD,4CAAC,yBAAO,MAAM,GAAG;AAAA,MACjB,4CAAC,QAAK,SAAQ,KAAI,WAAU,SAAQ,MAAM,kCAAc;AAAA,OAC1D;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,QAAK,SAAQ,KAAI,WAAU,cAAa,MAAM,4BAAQ;AAAA,MACvD,4CAAC,QAAK,SAAQ,KAAI,WAAU,UAAS,MAAM,iCAAa;AAAA,MACxD,4CAAC,QAAK,SAAQ,KAAI,WAAU,gBAAe,MAAM,4BAAQ;AAAA,OAC3D;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAkC;AAC/D,SACE,6CAAC,0BAAS,GAAG,OACX;AAAA,gDAAC,uBAAQ,SAAR,EACC,sDAAC,yBAAO,MAAM,MAAM,UAAQ,IAAC,GAC/B;AAAA,IACA;AAAA,MAAC,uBAAQ;AAAA,MAAR;AAAA,QACC,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,QAClD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,IAAI;AAAA,QACjD,OAAO;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QAEA;AAAA,sDAAC,uBAAQ,OAAR,EAAc;AAAA,UACf,4CAAC,4BAAU,MAAK,MAAK,YAAW,MAAK,yBAErC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/UpdateThemeDemo.mjs

@@ -0,0 +1,46 @@
+import * as Config from "@tamagui/site-config";
+import { addTheme, updateTheme } from "@tamagui/theme";
+import { useState } from "react";
+import { Button, Square, Theme, XStack, YStack, getVariableValue, useForceUpdate, useIsomorphicLayoutEffect } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const colors = Config.config.tokens.color,
+  colorKeys = Object.keys(colors);
+function UpdateThemeDemo() {
+  const [theme, setTheme] = useState(),
+    update = useForceUpdate();
+  return useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: "custom",
+      insertCSS: !0,
+      theme: {
+        color: "red"
+      }
+    }), setTheme("custom");
+  }, []), /* @__PURE__ */jsxs(YStack, {
+    alignItems: "center",
+    space: !0,
+    children: [/* @__PURE__ */jsx(XStack, {
+      gap: "$5",
+      children: /* @__PURE__ */jsx(Theme, {
+        name: theme ?? null,
+        children: /* @__PURE__ */jsx(Square, {
+          borderRadius: "$8",
+          size: 100,
+          backgroundColor: "$color"
+        })
+      })
+    }), /* @__PURE__ */jsx(Button, {
+      onPress: () => {
+        const randomColor = getVariableValue(colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]);
+        updateTheme({
+          name: "custom",
+          theme: {
+            color: randomColor
+          }
+        }), update();
+      },
+      children: "Set to random color"
+    })]
+  });
+}
+export { UpdateThemeDemo };

package/dist/esm/index.mjs

@@ -0,0 +1,49 @@
+export * from "./AccordionDemo.mjs";
+export * from "./AddThemeDemo.mjs";
+export * from "./AlertDialogDemo.mjs";
+export * from "./AnimationsDemo.mjs";
+export * from "./AnimationsEnterDemo.mjs";
+export * from "./AnimationsHoverDemo.mjs";
+export * from "./AnimationsPresenceDemo.mjs";
+export * from "./AnimationsTimingDemo.mjs";
+export * from "./AvatarDemo.mjs";
+export * from "./BuildAButtonDemo.mjs";
+export * from "./ButtonDemo.mjs";
+export * from "./ThemeBuilderDemo.mjs";
+export * from "./CardDemo.mjs";
+export * from "./CheckboxDemo.mjs";
+export * from "./ColorsDemo.mjs";
+export * from "./DialogDemo.mjs";
+export * from "./FormsDemo.mjs";
+export * from "./GroupDemo.mjs";
+export * from "./HeadingsDemo.mjs";
+export * from "./ImageDemo.mjs";
+export * from "./InputsDemo.mjs";
+export * from "./LabelDemo.mjs";
+export * from "./LinearGradientDemo.mjs";
+export * from "./ListItemDemo.mjs";
+export * from "./LucideIconsDemo.mjs";
+export * from "./PopoverDemo.mjs";
+export * from "./ProgressDemo.mjs";
+export * from "./RadioGroupDemo.mjs";
+export * from "./ReplaceThemeDemo.mjs";
+export * from "./ScrollViewDemo.mjs";
+export * from "./SelectDemo.mjs";
+export * from "./SeparatorDemo.mjs";
+export * from "./ShapesDemo.mjs";
+export * from "./SheetDemo.mjs";
+export * from "./SliderDemo.mjs";
+export * from "./SpinnerDemo.mjs";
+export * from "./StacksDemo.mjs";
+export * from "./SwitchDemo.mjs";
+export * from "./TabsAdvancedDemo.mjs";
+export * from "./TabsDemo.mjs";
+export * from "./TextDemo.mjs";
+export * from "./ThemeInverseDemo.mjs";
+export * from "./ToastDemo.mjs";
+export * from "./ToastDuplicateDemo.mjs";
+export * from "./ToggleGroupDemo.mjs";
+export * from "./TokensDemo.mjs";
+export * from "./TooltipDemo.mjs";
+export * from "./UpdateThemeDemo.mjs";
+export * from "./useOnIntersecting.mjs";

package/dist/esm/tamagui.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@tamagui/site-config";
+import { config as config2 } from "@tamagui/site-config";
+var tamagui_config_default = config;
+export { config2 as config, tamagui_config_default as default };

package/dist/esm/useOnIntersecting.js

@@ -39,7 +39,6 @@ function useOnIntersecting(refsIn, incomingCbRaw, { threshold = 0, root, rootMar
     root,
     rootMargin,
     threshold,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     ...mountArgs
   ]);
 }

package/dist/esm/useOnIntersecting.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useOnIntersecting.tsx"],
-  "mappings": "AAAA,SAA2B,WAAW,gBAAgB;AACtD,SAAS,OAAO,gBAAgB;AAWzB,SAAS,kBACd,MACA,EAAE,MAAM,GAAG,KAAK,IAAmD,CAAC,GAC3B;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAoB,CAAC,CAAC;AAElD,SAAI,SACF;AAAA,IACE;AAAA,IACA,CAAC,YAAY;AACX,YAAM,eAAe,QAAQ,KAAK,CAAC,MAAM,GAAG,cAAc;AAC1D,MAAI,QAAQ,CAAC,gBACb,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,QAAQ,IAAI,CAAC,MAAM,GAAG,kBAAkB,EAAK;AAC1D,eAAI,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC,CAAC,IAC5D,OAEF;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA;AAAA,EACF,GAGM,MAAM,QAAQ,IAAI,IAAI,SAAS,OAAO,CAAC;AACjD;AAEO,SAAS,kBACd,QACA,eACA,EAAE,YAAY,GAAG,MAAM,WAAW,IAA8B,CAAC,GACjE,YAAmB,CAAC,GACpB;AACA,QAAM,mBAAmB,SAAS,aAAa;AAE/C,YAAU,MAAM;AACd,UAAM,OAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,QAAI,CAAC,KAAK;AAAQ;AAElB,QAAI,UAA4B,MAC5B,iBAAuD,CAAC;AAC5D,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF,GACM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,uBAAiB,KAAK,IAAI,CAAC,KAAK,UAE5B,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,IAAI,OAAO,KAAK,eAAe,KAAK,KAAK,IAE7E,GACD,UAAU,GACV,UAAU,iBAAiB,cAAc,KAAK;AAAA,IAChD,GAAG,OAAO;AAEV,eAAW,OAAO;AAChB,MAAI,IAAI,WACN,GAAG,QAAQ,IAAI,OAAO;AAI1B,WAAO,MAAM;AACX,gBAAU,GACV,GAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,GAAG;AAAA,EACL,CAAC;AACH;",
+  "mappings": "AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,OAAO,gBAAgB;AAWzB,SAAS,kBACd,MACA,EAAE,MAAM,GAAG,KAAK,IAAmD,CAAC,GAC3B;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAoB,CAAC,CAAC;AAElD,SAAI,SACF;AAAA,IACE;AAAA,IACA,CAAC,YAAY;AACX,YAAM,eAAe,QAAQ,KAAK,CAAC,MAAM,GAAG,cAAc;AAC1D,MAAI,QAAQ,CAAC,gBACb,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,QAAQ,IAAI,CAAC,MAAM,GAAG,kBAAkB,EAAK;AAC1D,eAAI,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC,CAAC,IAC5D,OAEF;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA;AAAA,EACF,GAGM,MAAM,QAAQ,IAAI,IAAI,SAAS,OAAO,CAAC;AACjD;AAEO,SAAS,kBACd,QACA,eACA,EAAE,YAAY,GAAG,MAAM,WAAW,IAA8B,CAAC,GACjE,YAAmB,CAAC,GACpB;AACA,QAAM,mBAAmB,SAAS,aAAa;AAE/C,YAAU,MAAM;AACd,UAAM,OAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,QAAI,CAAC,KAAK;AAAQ;AAElB,QAAI,UAA4B,MAC5B,iBAAuD,CAAC;AAC5D,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF,GACM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,uBAAiB,KAAK,IAAI,CAAC,KAAK,UAE5B,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,IAAI,OAAO,KAAK,eAAe,KAAK,KAAK,IAE7E,GACD,UAAU,GACV,UAAU,iBAAiB,cAAc,KAAK;AAAA,IAChD,GAAG,OAAO;AAEV,eAAW,OAAO;AAChB,MAAI,IAAI,WACN,GAAG,QAAQ,IAAI,OAAO;AAI1B,WAAO,MAAM;AACX,gBAAU,GACV,GAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,GAAG;AAAA,EACL,CAAC;AACH;",
   "names": []
 }

package/dist/esm/useOnIntersecting.mjs

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { isWeb, useEvent } from "tamagui";
+function useIsIntersecting(refs, {
+  once,
+  ...opts
+} = {}) {
+  const [values, setValues] = useState([]);
+  return isWeb && useOnIntersecting(refs, entries => {
+    const intersecting = entries.some(x => x?.isIntersecting);
+    once && !intersecting || setValues(prev => {
+      const next = entries.map(e => e?.isIntersecting ?? !1);
+      return prev.length === next.length && prev.every((e, i) => e === next[i]) ? prev : next;
+    });
+  }, opts), Array.isArray(refs) ? values : values[0];
+}
+function useOnIntersecting(refsIn, incomingCbRaw, {
+  threshold = 0,
+  root,
+  rootMargin
+} = {}, mountArgs = []) {
+  const onIntersectEvent = useEvent(incomingCbRaw);
+  useEffect(() => {
+    const refs = Array.isArray(refsIn) ? refsIn : [refsIn];
+    if (!refs.length) return;
+    let dispose = null,
+      currentEntries = [];
+    const options = {
+        threshold,
+        root,
+        rootMargin
+      },
+      io = new IntersectionObserver(entries => {
+        currentEntries = refs.map((ref, index) => entries.find(x => x.target === ref.current) ?? currentEntries[index] ?? null), dispose?.(), dispose = onIntersectEvent(currentEntries) || null;
+      }, options);
+    for (const ref of refs) ref.current && io.observe(ref.current);
+    return () => {
+      dispose?.(), io.disconnect();
+    };
+  }, [onIntersectEvent, refsIn, root, rootMargin, threshold, ...mountArgs]);
+}
+export { useIsIntersecting, useOnIntersecting };

package/dist/esm/useOnIntersecting.native.js

@@ -59,7 +59,6 @@ function useOnIntersecting(refsIn, incomingCbRaw, { threshold = 0, root, rootMar
     root,
     rootMargin,
     threshold,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     ...mountArgs
   ]);
 }

package/dist/esm/useOnIntersecting.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useOnIntersecting.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD,kBACtD,iBAAgC;AAWzB,SAAS,kBACd,MACA,EAAE,MAAM,GAAG,KAAK,IAAmD,CAAC,GAC3B;AACzC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAoB,CAAC,CAAC;AAElD,SAAI,wBACF;AAAA,IACE;AAAA,IACA,CAAC,YAAY;AACX,YAAM,eAAe,QAAQ,KAAK,CAAC,MAAM,uBAAG,cAAc;AAC1D,MAAI,QAAQ,CAAC,gBACb,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,QAAQ,IAAI,CAAC,OAAM,uBAAG,mBAAkB,EAAK;AAC1D,eAAI,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC,CAAC,IAC5D,OAEF;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA;AAAA,EACF,GAGM,MAAM,QAAQ,IAAI,IAAI,SAAS,OAAO,CAAC;AACjD;AAEO,SAAS,kBACd,QACA,eACA,EAAE,YAAY,GAAG,MAAM,WAAW,IAA8B,CAAC,GACjE,YAAmB,CAAC,GACpB;AACA,QAAM,uBAAmB,yBAAS,aAAa;AAE/C,8BAAU,MAAM;AACd,UAAM,OAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,QAAI,CAAC,KAAK;AAAQ;AAElB,QAAI,UAA4B,MAC5B,iBAAuD,CAAC;AAC5D,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF,GACM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,uBAAiB,KAAK,IAAI,CAAC,KAAK,UAE5B,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,IAAI,OAAO,KAAK,eAAe,KAAK,KAAK,IAE7E,GACD,8BACA,UAAU,iBAAiB,cAAc,KAAK;AAAA,IAChD,GAAG,OAAO;AAEV,eAAW,OAAO;AAChB,MAAI,IAAI,WACN,GAAG,QAAQ,IAAI,OAAO;AAI1B,WAAO,MAAM;AACX,oCACA,GAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,GAAG;AAAA,EACL,CAAC;AACH;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoC,kBACpC,iBAAgC;AAWzB,SAAS,kBACd,MACA,EAAE,MAAM,GAAG,KAAK,IAAmD,CAAC,GAC3B;AACzC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAoB,CAAC,CAAC;AAElD,SAAI,wBACF;AAAA,IACE;AAAA,IACA,CAAC,YAAY;AACX,YAAM,eAAe,QAAQ,KAAK,CAAC,MAAM,uBAAG,cAAc;AAC1D,MAAI,QAAQ,CAAC,gBACb,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,QAAQ,IAAI,CAAC,OAAM,uBAAG,mBAAkB,EAAK;AAC1D,eAAI,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC,CAAC,IAC5D,OAEF;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA;AAAA,EACF,GAGM,MAAM,QAAQ,IAAI,IAAI,SAAS,OAAO,CAAC;AACjD;AAEO,SAAS,kBACd,QACA,eACA,EAAE,YAAY,GAAG,MAAM,WAAW,IAA8B,CAAC,GACjE,YAAmB,CAAC,GACpB;AACA,QAAM,uBAAmB,yBAAS,aAAa;AAE/C,8BAAU,MAAM;AACd,UAAM,OAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,QAAI,CAAC,KAAK;AAAQ;AAElB,QAAI,UAA4B,MAC5B,iBAAuD,CAAC;AAC5D,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF,GACM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,uBAAiB,KAAK,IAAI,CAAC,KAAK,UAE5B,QAAQ,KAAK,CAAC,MAAM,EAAE,WAAW,IAAI,OAAO,KAAK,eAAe,KAAK,KAAK,IAE7E,GACD,8BACA,UAAU,iBAAiB,cAAc,KAAK;AAAA,IAChD,GAAG,OAAO;AAEV,eAAW,OAAO;AAChB,MAAI,IAAI,WACN,GAAG,QAAQ,IAAI,OAAO;AAI1B,WAAO,MAAM;AACX,oCACA,GAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,GAAG;AAAA,EACL,CAAC;AACH;",
   "names": []
 }

package/dist/jsx/AccordionDemo.mjs

@@ -0,0 +1,58 @@
+import { ChevronDown } from "@tamagui/lucide-icons";
+import { Accordion, Paragraph, Square } from "tamagui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AccordionDemo() {
+  return /* @__PURE__ */jsxs(Accordion, {
+    overflow: "hidden",
+    width: "$20",
+    type: "multiple",
+    children: [/* @__PURE__ */jsxs(Accordion.Item, {
+      value: "a1",
+      children: [/* @__PURE__ */jsx(Accordion.Trigger, {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        children: ({
+          open
+        }) => /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            children: "1. Take a cold shower"
+          }), /* @__PURE__ */jsx(Square, {
+            animation: "quick",
+            rotate: open ? "180deg" : "0deg",
+            children: /* @__PURE__ */jsx(ChevronDown, {
+              size: "$1"
+            })
+          })]
+        })
+      }), /* @__PURE__ */jsx(Accordion.Content, {
+        children: /* @__PURE__ */jsx(Paragraph, {
+          children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue."
+        })
+      })]
+    }), /* @__PURE__ */jsxs(Accordion.Item, {
+      value: "a2",
+      children: [/* @__PURE__ */jsx(Accordion.Trigger, {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        children: ({
+          open
+        }) => /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            children: "2. Eat 4 eggs"
+          }), /* @__PURE__ */jsx(Square, {
+            animation: "quick",
+            rotate: open ? "180deg" : "0deg",
+            children: /* @__PURE__ */jsx(ChevronDown, {
+              size: "$1"
+            })
+          })]
+        })
+      }), /* @__PURE__ */jsx(Accordion.Content, {
+        children: /* @__PURE__ */jsx(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."
+        })
+      })]
+    })]
+  });
+}
+export { AccordionDemo };

package/dist/jsx/AddThemeDemo.mjs

@@ -0,0 +1,35 @@
+import { addTheme } from "@tamagui/theme";
+import { useState } from "react";
+import { Button, H3, Square, Theme, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AddThemeDemo() {
+  const [theme, setTheme] = useState();
+  return /* @__PURE__ */jsxs(YStack, {
+    alignItems: "center",
+    space: !0,
+    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: !0,
+          theme: {
+            background: "#000",
+            color: "blue"
+          }
+        }), setTheme("superblue");
+      },
+      children: "Add superblue theme"
+    })]
+  });
+}
+export { AddThemeDemo };

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 };