@tamagui/demos 1.116.1 → 1.116.2

package/dist/cjs/ToastDemo.js

@@ -0,0 +1,112 @@
+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 ToastDemo_exports = {};
+__export(ToastDemo_exports, {
+  ToastDemo: () => ToastDemo
+});
+module.exports = __toCommonJS(ToastDemo_exports);
+var import_toast = require("@tamagui/toast"), import_react = __toESM(require("react")), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+const ToastDemo = () => {
+  const [native, setNative] = import_react.default.useState(!1);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: !0, alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastControl, { native }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentToast, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptions, { native, setNative })
+  ] });
+}, CurrentToast = () => {
+  const currentToast = (0, import_toast.useToastState)();
+  return !currentToast || currentToast.isHandledNatively ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_toast.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__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast.Title, { children: currentToast.title }),
+        !!currentToast.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast.Description, { children: currentToast.message })
+      ] })
+    },
+    currentToast.id
+  );
+}, ToastControl = ({ native }) => {
+  const toast = (0, import_toast.useToastController)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$2", justifyContent: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        onPress: () => {
+          toast.show("Successfully saved!", {
+            message: "Don't worry, we've got your data.",
+            native
+          });
+        },
+        children: "Show"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        onPress: () => {
+          toast.hide();
+        },
+        children: "Hide"
+      }
+    )
+  ] });
+}, NativeOptions = ({
+  native,
+  setNative
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$3", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { size: "$1", onPress: () => setNative(!1), children: "Custom" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tamagui.Switch,
+    {
+      id: "native-toggle",
+      nativeID: "native-toggle",
+      theme: "active",
+      size: "$1",
+      checked: !!native,
+      onCheckedChange: (val) => setNative(val),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.Switch.Thumb,
+        {
+          animation: [
+            "quick",
+            {
+              transform: {
+                overshootClamping: !0
+              }
+            }
+          ]
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { size: "$1", onPress: () => setNative(!0), children: "Native" })
+] });
+//# sourceMappingURL=ToastDemo.js.map

package/dist/cjs/ToastDuplicateDemo.js

@@ -0,0 +1,64 @@
+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 ToastDuplicateDemo_exports = {};
+__export(ToastDuplicateDemo_exports, {
+  ToastDuplicateDemo: () => ToastDuplicateDemo
+});
+module.exports = __toCommonJS(ToastDuplicateDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"), import_toast = require("@tamagui/toast"), import_react = __toESM(require("react")), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+const ToastDuplicateDemo = () => {
+  const [savedCount, setSavedCount] = import_react.default.useState(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Button,
+      {
+        onPress: () => {
+          setSavedCount((old) => old + 1);
+        },
+        children: "Show toast"
+      }
+    ),
+    [...Array(savedCount)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_toast.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__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: !0, alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.CheckCircle2, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast.Title, { children: "Successfully saved!" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toast.Toast.Description, { children: "Don't worry... We've got your data." })
+          ] })
+        ] })
+      },
+      index
+    ))
+  ] });
+};
+//# sourceMappingURL=ToastDuplicateDemo.js.map

package/dist/cjs/ToggleGroupDemo.js

@@ -0,0 +1,63 @@
+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 ToggleGroupDemo_exports = {};
+__export(ToggleGroupDemo_exports, {
+  ToggleGroupDemo: () => ToggleGroupDemo
+});
+module.exports = __toCommonJS(ToggleGroupDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function ToggleGroupDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { paddingHorizontal: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", space: "$6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "single", size: "$3", orientation: "horizontal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "horizontal" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "single", size: "$3", orientation: "vertical" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupComponent, { type: "multiple", size: "$4", orientation: "vertical" })
+    ] })
+  ] }) });
+}
+function ToggleGroupComponent(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.type}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_tamagui.XStack,
+    {
+      flexDirection: props.orientation === "horizontal" ? "row" : "column",
+      alignItems: "center",
+      justifyContent: "center",
+      space: "$4",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { paddingRight: "$0", justifyContent: "flex-end", size: props.size, htmlFor: id, children: props.type === "single" ? "Single" : "Multiple" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_tamagui.ToggleGroup,
+          {
+            orientation: props.orientation,
+            id,
+            type: props.type,
+            size: props.size,
+            disableDeactivation: props.type === "single" ? !0 : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignLeft, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignCenter, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "right", "aria-label": "Right aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignRight, {}) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=ToggleGroupDemo.js.map

package/dist/cjs/TokensDemo.js

@@ -0,0 +1,100 @@
+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 TokensDemo_exports = {};
+__export(TokensDemo_exports, {
+  TokensDemo: () => TokensDemo
+});
+module.exports = __toCommonJS(TokensDemo_exports);
+var import_react = __toESM(require("react")), import_core = require("@tamagui/core"), import_tamagui = require("tamagui"), import_jsx_runtime = require("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] = import_react.default.useState("size");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup, { alignItems: "center", alignSelf: "center", children: sections.map(({ name, key }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.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__ */ (0, import_jsx_runtime.jsx)(SizeSection, { section })
+  ] });
+}
+function SizeSection({ section }) {
+  const allTokens = (0, import_core.getConfig)().tokens, tokens = allTokens[section.startsWith("space") ? "space" : section], st = Object.keys(tokens).sort(
+    (a, b) => Number.parseFloat(a) > Number.parseFloat(b) ? 1 : -1
+  ), spaceTokens = st.filter((t) => Number.parseFloat(t) >= 0), spaceTokensNegative = st.filter((t) => Number.parseFloat(t) < 0).sort((a, b) => Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { flex: 1, space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H2, { children: "Sizes" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { width: "100%", space: "$2", separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
+      (token) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { width: "100%", alignItems: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { width: "25%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.H3, { size: "$6", children: [
+          "$",
+          token
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { width: "20%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.H4, { size: "$5", children: [
+          tokens[token]?.val,
+          "px"
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_tamagui.Square,
+          {
+            size: tokens[token]?.val,
+            backgroundColor: "$color5",
+            ...section === "spaceNegative" && {
+              backgroundColor: "$red5",
+              size: -tokens[spaceTokensNegative.find(
+                (t) => Number.parseFloat(t) === -Number.parseFloat(token)
+              ) ?? token]?.val
+            },
+            ...section === "radius" && {
+              size: allTokens.size[token]?.val,
+              borderRadius: tokens[token]?.val
+            }
+          }
+        )
+      ] }, token)
+    ) })
+  ] });
+}
+//# sourceMappingURL=TokensDemo.js.map

package/dist/cjs/TooltipDemo.js

@@ -0,0 +1,68 @@
+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 TooltipDemo_exports = {};
+__export(TooltipDemo_exports, {
+  TooltipDemo: () => TooltipDemo
+});
+module.exports = __toCommonJS(TooltipDemo_exports);
+var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+function TooltipDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.TooltipGroup, { delay: { open: 3e3, close: 100 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { gap: "$2", alignSelf: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { groupId: "0", placement: "top-end", Icon: import_lucide_icons.Circle }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { groupId: "1", placement: "top", Icon: import_lucide_icons.ChevronUp }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { groupId: "2", placement: "top-start", Icon: import_lucide_icons.Circle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { groupId: "3", placement: "left", Icon: import_lucide_icons.ChevronLeft }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { flex: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { groupId: "4", placement: "right", Icon: import_lucide_icons.ChevronRight })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { gap: "$2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { groupId: "5", placement: "bottom-end", Icon: import_lucide_icons.Circle }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { groupId: "6", placement: "bottom", Icon: import_lucide_icons.ChevronDown }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { groupId: "7", placement: "bottom-start", Icon: import_lucide_icons.Circle })
+    ] })
+  ] }) });
+}
+function Demo({ Icon, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Tooltip, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tooltip.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { icon: Icon, circular: !0 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tamagui.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__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Tooltip.Arrow, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { size: "$2", lineHeight: "$1", children: "Hello world" })
+        ]
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=TooltipDemo.js.map

package/dist/cjs/UpdateThemeDemo.js

@@ -0,0 +1,61 @@
+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 UpdateThemeDemo_exports = {};
+__export(UpdateThemeDemo_exports, {
+  UpdateThemeDemo: () => UpdateThemeDemo
+});
+module.exports = __toCommonJS(UpdateThemeDemo_exports);
+var import_react = __toESM(require("react")), import_v3 = require("@tamagui/config/v3"), import_theme = require("@tamagui/theme"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
+const colors = import_v3.config.tokens.color, colorKeys = Object.keys(colors);
+function UpdateThemeDemo() {
+  const [theme, setTheme] = import_react.default.useState(), update = (0, import_tamagui.useForceUpdate)();
+  return (0, import_tamagui.useIsomorphicLayoutEffect)(() => {
+    (0, import_theme.addTheme)({
+      name: "custom",
+      insertCSS: !0,
+      theme: {
+        color: "red"
+      }
+    }), setTheme("custom");
+  }, []), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", space: !0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { gap: "$5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, { name: theme ?? null, 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,
+      {
+        onPress: () => {
+          const randomColor = (0, import_tamagui.getVariableValue)(
+            colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
+          );
+          (0, import_theme.updateTheme)({
+            name: "custom",
+            theme: {
+              color: randomColor
+            }
+          }), update();
+        },
+        children: "Set to random color"
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=UpdateThemeDemo.js.map

package/dist/cjs/WebNativeImageDemo.js

@@ -0,0 +1,24 @@
+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 WebNativeImageDemo_exports = {};
+__export(WebNativeImageDemo_exports, {
+  WebNativeImageDemo: () => WebNativeImageDemo
+});
+module.exports = __toCommonJS(WebNativeImageDemo_exports);
+var import_image_next = require("@tamagui/image-next"), import_jsx_runtime = require("react/jsx-runtime");
+function WebNativeImageDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image_next.Image, { src: "https://picsum.photos/200/300", width: 200, height: 300 });
+}
+//# sourceMappingURL=WebNativeImageDemo.js.map

package/dist/cjs/index.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __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;
+}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./AccordionDemo"), module.exports);
+__reExport(src_exports, require("./AddThemeDemo"), module.exports);
+__reExport(src_exports, require("./AlertDialogDemo"), module.exports);
+__reExport(src_exports, require("./AnimationsDemo"), module.exports);
+__reExport(src_exports, require("./AnimationsEnterDemo"), module.exports);
+__reExport(src_exports, require("./AnimationsHoverDemo"), module.exports);
+__reExport(src_exports, require("./AnimationsPresenceDemo"), module.exports);
+__reExport(src_exports, require("./AnimationsTimingDemo"), module.exports);
+__reExport(src_exports, require("./AvatarDemo"), module.exports);
+__reExport(src_exports, require("./BuildAButtonDemo"), module.exports);
+__reExport(src_exports, require("./ButtonDemo"), module.exports);
+__reExport(src_exports, require("./ThemeBuilderDemo"), module.exports);
+__reExport(src_exports, require("./CardDemo"), module.exports);
+__reExport(src_exports, require("./CheckboxDemo"), module.exports);
+__reExport(src_exports, require("./CheckboxHeadlessDemo"), module.exports);
+__reExport(src_exports, require("./CheckboxUnstyledDemo"), module.exports);
+__reExport(src_exports, require("./ColorsDemo"), module.exports);
+__reExport(src_exports, require("./DialogDemo"), module.exports);
+__reExport(src_exports, require("./FormsDemo"), module.exports);
+__reExport(src_exports, require("./GroupDemo"), module.exports);
+__reExport(src_exports, require("./HeadingsDemo"), module.exports);
+__reExport(src_exports, require("./ImageDemo"), module.exports);
+__reExport(src_exports, require("./WebNativeImageDemo"), module.exports);
+__reExport(src_exports, require("./InputsDemo"), module.exports);
+__reExport(src_exports, require("./NewInputsDemo"), module.exports);
+__reExport(src_exports, require("./LabelDemo"), module.exports);
+__reExport(src_exports, require("./LinearGradientDemo"), module.exports);
+__reExport(src_exports, require("./ListItemDemo"), module.exports);
+__reExport(src_exports, require("./LucideIconsDemo"), module.exports);
+__reExport(src_exports, require("./PopoverDemo"), module.exports);
+__reExport(src_exports, require("./ProgressDemo"), module.exports);
+__reExport(src_exports, require("./RadioGroupDemo"), module.exports);
+__reExport(src_exports, require("./RadioGroupHeadlessDemo"), module.exports);
+__reExport(src_exports, require("./RadioGroupUnstyledDemo"), module.exports);
+__reExport(src_exports, require("./ReplaceThemeDemo"), module.exports);
+__reExport(src_exports, require("./ScrollViewDemo"), module.exports);
+__reExport(src_exports, require("./SelectDemo"), module.exports);
+__reExport(src_exports, require("./SeparatorDemo"), module.exports);
+__reExport(src_exports, require("./ShapesDemo"), module.exports);
+__reExport(src_exports, require("./SheetDemo"), module.exports);
+__reExport(src_exports, require("./SliderDemo"), module.exports);
+__reExport(src_exports, require("./SpinnerDemo"), module.exports);
+__reExport(src_exports, require("./StacksDemo"), module.exports);
+__reExport(src_exports, require("./SwitchDemo"), module.exports);
+__reExport(src_exports, require("./SwitchHeadlessDemo"), module.exports);
+__reExport(src_exports, require("./SwitchUnstyledDemo"), module.exports);
+__reExport(src_exports, require("./TabsAdvancedDemo"), module.exports);
+__reExport(src_exports, require("./TabsDemo"), module.exports);
+__reExport(src_exports, require("./TextDemo"), module.exports);
+__reExport(src_exports, require("./ThemeInverseDemo"), module.exports);
+__reExport(src_exports, require("./ToastDemo"), module.exports);
+__reExport(src_exports, require("./ToastDuplicateDemo"), module.exports);
+__reExport(src_exports, require("./ToggleGroupDemo"), module.exports);
+__reExport(src_exports, require("./TokensDemo"), module.exports);
+__reExport(src_exports, require("./TooltipDemo"), module.exports);
+__reExport(src_exports, require("./UpdateThemeDemo"), module.exports);
+__reExport(src_exports, require("./useOnIntersecting"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/tamagui.config.js

@@ -0,0 +1,22 @@
+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 tamagui_config_exports = {};
+__export(tamagui_config_exports, {
+  config: () => import_v32.config,
+  default: () => tamagui_config_default
+});
+module.exports = __toCommonJS(tamagui_config_exports);
+var import_v3 = require("@tamagui/config/v3"), import_v32 = require("@tamagui/config/v3"), tamagui_config_default = import_v3.config;
+//# sourceMappingURL=tamagui.config.js.map

package/dist/cjs/useOnIntersecting.js

@@ -0,0 +1,63 @@
+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 useOnIntersecting_exports = {};
+__export(useOnIntersecting_exports, {
+  useIsIntersecting: () => useIsIntersecting,
+  useOnIntersecting: () => useOnIntersecting
+});
+module.exports = __toCommonJS(useOnIntersecting_exports);
+var import_react = require("react"), import_tamagui = require("tamagui");
+function useIsIntersecting(refs, { once, ...opts } = {}) {
+  const [values, setValues] = (0, import_react.useState)([]);
+  return import_tamagui.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 = (0, import_tamagui.useEvent)(incomingCbRaw);
+  (0, import_react.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
+  ]);
+}
+//# sourceMappingURL=useOnIntersecting.js.map