@tamagui/demos 1.88.13 → 1.89.0-1706308641099

package/dist/jsx/ToastDemo.mjs

@@ -0,0 +1,98 @@
+import { Toast, useToastController, useToastState } from "@tamagui/toast";
+import React from "react";
+import { Button, Label, Switch, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ToastDemo = () => {
+    const [native, setNative] = React.useState(!1);
+    return /* @__PURE__ */jsxs(YStack, {
+      space: !0,
+      alignItems: "center",
+      children: [/* @__PURE__ */jsx(ToastControl, {
+        native
+      }), /* @__PURE__ */jsx(CurrentToast, {}), /* @__PURE__ */jsx(NativeOptions, {
+        native,
+        setNative
+      })]
+    });
+  },
+  CurrentToast = () => {
+    const currentToast = useToastState();
+    return !currentToast || currentToast.isHandledNatively ? null : /* @__PURE__ */jsx(Toast, {
+      duration: currentToast.duration,
+      enterStyle: {
+        opacity: 0,
+        scale: 0.5,
+        y: -25
+      },
+      exitStyle: {
+        opacity: 0,
+        scale: 1,
+        y: -20
+      },
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      animation: "100ms",
+      viewportName: currentToast.viewportName,
+      children: /* @__PURE__ */jsxs(YStack, {
+        children: [/* @__PURE__ */jsx(Toast.Title, {
+          children: currentToast.title
+        }), !!currentToast.message && /* @__PURE__ */jsx(Toast.Description, {
+          children: currentToast.message
+        })]
+      })
+    }, currentToast.id);
+  },
+  ToastControl = ({
+    native
+  }) => {
+    const toast = useToastController();
+    return /* @__PURE__ */jsxs(XStack, {
+      space: "$2",
+      justifyContent: "center",
+      children: [/* @__PURE__ */jsx(Button, {
+        onPress: () => {
+          toast.show("Successfully saved!", {
+            message: "Don't worry, we've got your data.",
+            native
+          });
+        },
+        children: "Show"
+      }), /* @__PURE__ */jsx(Button, {
+        onPress: () => {
+          toast.hide();
+        },
+        children: "Hide"
+      })]
+    });
+  },
+  NativeOptions = ({
+    native,
+    setNative
+  }) => /* @__PURE__ */jsxs(XStack, {
+    space: "$3",
+    children: [/* @__PURE__ */jsx(Label, {
+      size: "$1",
+      onPress: () => setNative(!1),
+      children: "Custom"
+    }), /* @__PURE__ */jsx(Switch, {
+      id: "native-toggle",
+      nativeID: "native-toggle",
+      theme: "active",
+      size: "$1",
+      checked: !!native,
+      onCheckedChange: val => setNative(val),
+      children: /* @__PURE__ */jsx(Switch.Thumb, {
+        animation: ["quick", {
+          transform: {
+            overshootClamping: !0
+          }
+        }]
+      })
+    }), /* @__PURE__ */jsx(Label, {
+      size: "$1",
+      onPress: () => setNative(!0),
+      children: "Native"
+    })]
+  });
+export { ToastDemo };

package/dist/jsx/ToastDuplicateDemo.mjs

@@ -0,0 +1,48 @@
+import { CheckCircle2 } from "@tamagui/lucide-icons";
+import { Toast } from "@tamagui/toast";
+import React from "react";
+import { Button, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ToastDuplicateDemo = () => {
+  const [savedCount, setSavedCount] = React.useState(0);
+  return /* @__PURE__ */jsxs(YStack, {
+    alignItems: "center",
+    children: [/* @__PURE__ */jsx(Button, {
+      onPress: () => {
+        setSavedCount(old => old + 1);
+      },
+      children: "Show toast"
+    }), [...Array(savedCount)].map((_, index) => /* @__PURE__ */jsx(Toast, {
+      viewportName: "viewport-multiple",
+      duration: 4e3,
+      enterStyle: {
+        opacity: 0,
+        scale: 0.5,
+        y: -25
+      },
+      exitStyle: {
+        opacity: 0,
+        scale: 1,
+        y: -20
+      },
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      animation: "100ms",
+      children: /* @__PURE__ */jsxs(XStack, {
+        space: !0,
+        alignItems: "center",
+        children: [/* @__PURE__ */jsx(YStack, {
+          children: /* @__PURE__ */jsx(CheckCircle2, {})
+        }), /* @__PURE__ */jsxs(YStack, {
+          children: [/* @__PURE__ */jsx(Toast.Title, {
+            children: "Successfully saved!"
+          }), /* @__PURE__ */jsx(Toast.Description, {
+            children: "Don't worry... We've got your data."
+          })]
+        })]
+      })
+    }, index))]
+  });
+};
+export { ToastDuplicateDemo };

package/dist/jsx/ToggleGroupDemo.mjs

@@ -0,0 +1,73 @@
+import { AlignCenter, AlignLeft, AlignRight } from "@tamagui/lucide-icons";
+import { Label, ToggleGroup, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ToggleGroupDemo() {
+  return /* @__PURE__ */jsx(YStack, {
+    paddingHorizontal: "$4",
+    children: /* @__PURE__ */jsxs(XStack, {
+      alignItems: "center",
+      space: "$10",
+      children: [/* @__PURE__ */jsxs(YStack, {
+        alignItems: "center",
+        space: "$6",
+        children: [/* @__PURE__ */jsx(ToggleGroupComponent, {
+          type: "single",
+          size: "$3",
+          orientation: "horizontal"
+        }), /* @__PURE__ */jsx(ToggleGroupComponent, {
+          type: "multiple",
+          size: "$4",
+          orientation: "horizontal"
+        })]
+      }), /* @__PURE__ */jsxs(XStack, {
+        alignItems: "center",
+        space: "$6",
+        children: [/* @__PURE__ */jsx(ToggleGroupComponent, {
+          type: "single",
+          size: "$3",
+          orientation: "vertical"
+        }), /* @__PURE__ */jsx(ToggleGroupComponent, {
+          type: "multiple",
+          size: "$4",
+          orientation: "vertical"
+        })]
+      })]
+    })
+  });
+}
+function ToggleGroupComponent(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
+  return /* @__PURE__ */jsxs(XStack, {
+    flexDirection: props.orientation === "horizontal" ? "row" : "column",
+    alignItems: "center",
+    justifyContent: "center",
+    space: "$4",
+    children: [/* @__PURE__ */jsx(Label, {
+      paddingRight: "$0",
+      justifyContent: "flex-end",
+      size: props.size,
+      htmlFor: id,
+      children: props.type === "single" ? "Single" : "Multiple"
+    }), /* @__PURE__ */jsxs(ToggleGroup, {
+      orientation: props.orientation,
+      id,
+      type: props.type,
+      size: props.size,
+      disableDeactivation: props.type === "single" ? !0 : void 0,
+      children: [/* @__PURE__ */jsx(ToggleGroup.Item, {
+        value: "left",
+        "aria-label": "Left aligned",
+        children: /* @__PURE__ */jsx(AlignLeft, {})
+      }), /* @__PURE__ */jsx(ToggleGroup.Item, {
+        value: "center",
+        "aria-label": "Center aligned",
+        children: /* @__PURE__ */jsx(AlignCenter, {})
+      }), /* @__PURE__ */jsx(ToggleGroup.Item, {
+        value: "right",
+        "aria-label": "Right aligned",
+        children: /* @__PURE__ */jsx(AlignRight, {})
+      })]
+    })]
+  });
+}
+export { ToggleGroupDemo };

package/dist/jsx/TokensDemo.mjs

@@ -0,0 +1,90 @@
+import { getConfig } from "@tamagui/core";
+import { useState } from "react";
+import { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const sections = [{
+  name: "Size",
+  key: "size"
+}, {
+  name: "Space",
+  key: "space"
+}, {
+  name: "Space (-)",
+  key: "spaceNegative"
+}, {
+  name: "Radius",
+  key: "radius"
+}];
+function TokensDemo() {
+  const [section, setSection] = useState("size");
+  return /* @__PURE__ */jsxs(YStack, {
+    space: !0,
+    children: [/* @__PURE__ */jsx(XGroup, {
+      alignItems: "center",
+      alignSelf: "center",
+      children: sections.map(({
+        name,
+        key
+      }) => /* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$3",
+          theme: section === key ? "active" : null,
+          fontFamily: "$silkscreen",
+          onPress: () => setSection(key),
+          children: name
+        })
+      }, key))
+    }), (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */jsx(SizeSection, {
+      section
+    })]
+  });
+}
+function SizeSection({
+  section
+}) {
+  const allTokens = getConfig().tokens,
+    tokens = allTokens[section.startsWith("space") ? "space" : section],
+    st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1),
+    spaceTokens = st.filter(t => parseFloat(t) >= 0),
+    spaceTokensNegative = st.filter(t => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
+  return /* @__PURE__ */jsxs(YStack, {
+    flex: 1,
+    space: !0,
+    children: [/* @__PURE__ */jsx(H2, {
+      children: "Sizes"
+    }), /* @__PURE__ */jsx(YStack, {
+      width: "100%",
+      space: "$2",
+      separator: /* @__PURE__ */jsx(Separator, {}),
+      children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(token => /* @__PURE__ */jsxs(XStack, {
+        width: "100%",
+        alignItems: "center",
+        children: [/* @__PURE__ */jsx(YStack, {
+          width: "25%",
+          children: /* @__PURE__ */jsxs(H3, {
+            size: "$6",
+            children: ["$", token]
+          })
+        }), /* @__PURE__ */jsx(YStack, {
+          width: "20%",
+          children: /* @__PURE__ */jsxs(H4, {
+            size: "$5",
+            children: [tokens[token]?.val, "px"]
+          })
+        }), /* @__PURE__ */jsx(Square, {
+          size: tokens[token]?.val,
+          backgroundColor: "$color5",
+          ...(section === "spaceNegative" && {
+            backgroundColor: "$red5",
+            size: -tokens[spaceTokensNegative.find(t => parseFloat(t) === -parseFloat(token)) ?? token]?.val
+          }),
+          ...(section === "radius" && {
+            size: allTokens.size[token]?.val,
+            borderRadius: tokens[token]?.val
+          })
+        })]
+      }, token))
+    })]
+  });
+}
+export { TokensDemo };

package/dist/jsx/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/jsx/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/jsx/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/jsx/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/jsx/useOnIntersecting.mjs

@@ -0,0 +1,43 @@
+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,
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  ...mountArgs]);
+}
+export { useIsIntersecting, useOnIntersecting };

package/package.json

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