@tamagui/demos 1.79.11 → 1.79.13

package/dist/esm/DropDownMenuDemo.js

@@ -0,0 +1,160 @@
+import { isAndroid, isWeb } from "@tamagui/core";
+import { DropdownMenu } from "@tamagui/dropdown-menu";
+import { Backpack, Calendar, Check } from "@tamagui/lucide-icons";
+import { ChevronRight } from "@tamagui/lucide-icons";
+import React from "react";
+import { Button, Text, useEvent } from "tamagui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DropDownMenuDemo() {
+  const [bookmarksChecked, setBookmarksChecked] = React.useState(!0), [native, setNative] = React.useState(!1), onSelect = useEvent(() => {
+  });
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu,
+    {
+      offset: {
+        crossAxis: 25
+      },
+      allowFlip: !0,
+      native,
+      placement: "bottom-start",
+      children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { width: 60, children: /* @__PURE__ */ jsx(Backpack, {}) }) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Portal, { zIndex: 100, children: /* @__PURE__ */ jsxs(
+          DropdownMenu.Content,
+          {
+            paddingHorizontal: 0,
+            maxWidth: 180,
+            borderWidth: 1,
+            ai: "flex-start",
+            borderColor: "$borderColor",
+            enterStyle: { y: -10, opacity: 0 },
+            exitStyle: { y: -10, opacity: 0 },
+            elevate: !0,
+            animation: [
+              "quick",
+              {
+                opacity: {
+                  overshootClamping: !0
+                }
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "About Notes" }) }, "about-notes"),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+              /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+                /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Settings" }) }, "settings"),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenu.Item,
+                  {
+                    onSelect,
+                    jc: "space-between",
+                    textValue: "Calender",
+                    children: [
+                      /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: /* @__PURE__ */ jsx(Text, { children: "Calender" }) }),
+                      /* @__PURE__ */ jsx(
+                        DropdownMenu.ItemIcon,
+                        {
+                          androidIconName: "ic_menu_today",
+                          ios: {
+                            name: "u.square",
+                            hierarchicalColor: "#000",
+                            pointSize: 20
+                          },
+                          children: /* @__PURE__ */ jsx(Calendar, { color: "gray", size: "$1" })
+                        }
+                      )
+                    ]
+                  },
+                  "accounts"
+                )
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+              /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+                /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, disabled: !0, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { color: "gray", children: "Locked" }) }, "close-notes"),
+                /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, destructive: !0, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Delete all" }) }, "delete-all")
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+              /* @__PURE__ */ jsxs(DropdownMenu.Sub, { placement: "right-start", children: [
+                /* @__PURE__ */ jsx(DropdownMenu.SubTrigger, { jc: "space-between", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Actions" }),
+                  !native || isWeb ? /* @__PURE__ */ jsx(ChevronRight, { size: "$1" }) : null
+                ] }) }, "actions-trigger"),
+                /* @__PURE__ */ jsx(DropdownMenu.Portal, { zIndex: 200, children: /* @__PURE__ */ jsxs(
+                  DropdownMenu.SubContent,
+                  {
+                    enterStyle: { y: -10, opacity: 0 },
+                    exitStyle: { y: -10, opacity: 0 },
+                    elevate: !0,
+                    animation: [
+                      "quick",
+                      {
+                        opacity: {
+                          overshootClamping: !0
+                        }
+                      }
+                    ],
+                    paddingHorizontal: 0,
+                    children: [
+                      /* @__PURE__ */ jsx(DropdownMenu.Label, { fontSize: "$1", children: "Note settings" }),
+                      /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Create note" }) }, "create-note"),
+                      /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Delete all notes" }) }, "delete-all"),
+                      /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Sync notes" }) }, "sync-all")
+                    ]
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "DropdownMenuSeparator" }),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.CheckboxItem,
+                {
+                  checked: bookmarksChecked,
+                  onCheckedChange: setBookmarksChecked,
+                  value: bookmarksChecked ? "on" : "off",
+                  onValueChange: (v) => setBookmarksChecked(v == "on"),
+                  ...isAndroid && native && {
+                    onSelect: () => {
+                      isAndroid && setBookmarksChecked(!bookmarksChecked);
+                    }
+                  },
+                  gap: "$2",
+                  children: [
+                    /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { className: "DropdownMenuItemIndicator", children: /* @__PURE__ */ jsx(Check, { size: "$1" }) }),
+                    /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Mark as read" }),
+                    isAndroid && native && bookmarksChecked && /* @__PURE__ */ jsx(DropdownMenu.ItemIcon, { androidIconName: "checkbox_on_background" })
+                  ]
+                },
+                "show-hidden"
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.CheckboxItem,
+                {
+                  checked: native,
+                  onCheckedChange: setNative,
+                  value: native ? "on" : "off",
+                  onValueChange: (v) => setNative(v == "on"),
+                  ...isAndroid && native && {
+                    onSelect: () => {
+                      setNative(!native);
+                    }
+                  },
+                  gap: "$2",
+                  children: [
+                    /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: "$1" }) }),
+                    /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Enable Native" }),
+                    isAndroid && native && /* @__PURE__ */ jsx(DropdownMenu.ItemIcon, { androidIconName: "checkbox_on_background" })
+                  ]
+                },
+                "show-other-notes"
+              ),
+              /* @__PURE__ */ jsx(DropdownMenu.Arrow, { size: "$2" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  DropDownMenuDemo
+};
+//# sourceMappingURL=DropDownMenuDemo.js.map

package/dist/esm/DropDownMenuDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/DropDownMenuDemo.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/DropDownMenuDemo.native.js

@@ -0,0 +1,160 @@
+import { isAndroid, isWeb } from "@tamagui/core";
+import { DropdownMenu } from "@tamagui/dropdown-menu";
+import { Backpack, Calendar, Check } from "@tamagui/lucide-icons";
+import { ChevronRight } from "@tamagui/lucide-icons";
+import React from "react";
+import { Button, Text, useEvent } from "tamagui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DropDownMenuDemo() {
+  const [bookmarksChecked, setBookmarksChecked] = React.useState(!0), [native, setNative] = React.useState(!1), onSelect = useEvent(() => {
+  });
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu,
+    {
+      offset: {
+        crossAxis: 25
+      },
+      allowFlip: !0,
+      native,
+      placement: "bottom-start",
+      children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { width: 60, children: /* @__PURE__ */ jsx(Backpack, {}) }) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Portal, { zIndex: 100, children: /* @__PURE__ */ jsxs(
+          DropdownMenu.Content,
+          {
+            paddingHorizontal: 0,
+            maxWidth: 180,
+            borderWidth: 1,
+            ai: "flex-start",
+            borderColor: "$borderColor",
+            enterStyle: { y: -10, opacity: 0 },
+            exitStyle: { y: -10, opacity: 0 },
+            elevate: !0,
+            animation: [
+              "quick",
+              {
+                opacity: {
+                  overshootClamping: !0
+                }
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "About Notes" }) }, "about-notes"),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+              /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+                /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Settings" }) }, "settings"),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenu.Item,
+                  {
+                    onSelect,
+                    jc: "space-between",
+                    textValue: "Calender",
+                    children: [
+                      /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: /* @__PURE__ */ jsx(Text, { children: "Calender" }) }),
+                      /* @__PURE__ */ jsx(
+                        DropdownMenu.ItemIcon,
+                        {
+                          androidIconName: "ic_menu_today",
+                          ios: {
+                            name: "u.square",
+                            hierarchicalColor: "#000",
+                            pointSize: 20
+                          },
+                          children: /* @__PURE__ */ jsx(Calendar, { color: "gray", size: "$1" })
+                        }
+                      )
+                    ]
+                  },
+                  "accounts"
+                )
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+              /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+                /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, disabled: !0, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { color: "gray", children: "Locked" }) }, "close-notes"),
+                /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, destructive: !0, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Delete all" }) }, "delete-all")
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+              /* @__PURE__ */ jsxs(DropdownMenu.Sub, { placement: "right-start", children: [
+                /* @__PURE__ */ jsx(DropdownMenu.SubTrigger, { jc: "space-between", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Actions" }),
+                  !native || isWeb ? /* @__PURE__ */ jsx(ChevronRight, { size: "$1" }) : null
+                ] }) }, "actions-trigger"),
+                /* @__PURE__ */ jsx(DropdownMenu.Portal, { zIndex: 200, children: /* @__PURE__ */ jsxs(
+                  DropdownMenu.SubContent,
+                  {
+                    enterStyle: { y: -10, opacity: 0 },
+                    exitStyle: { y: -10, opacity: 0 },
+                    elevate: !0,
+                    animation: [
+                      "quick",
+                      {
+                        opacity: {
+                          overshootClamping: !0
+                        }
+                      }
+                    ],
+                    paddingHorizontal: 0,
+                    children: [
+                      /* @__PURE__ */ jsx(DropdownMenu.Label, { fontSize: "$1", children: "Note settings" }),
+                      /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Create note" }) }, "create-note"),
+                      /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Delete all notes" }) }, "delete-all"),
+                      /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect, children: /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Sync notes" }) }, "sync-all")
+                    ]
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "DropdownMenuSeparator" }),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.CheckboxItem,
+                {
+                  checked: bookmarksChecked,
+                  onCheckedChange: setBookmarksChecked,
+                  value: bookmarksChecked ? "on" : "off",
+                  onValueChange: (v) => setBookmarksChecked(v == "on"),
+                  ...isAndroid && native && {
+                    onSelect: () => {
+                      isAndroid && setBookmarksChecked(!bookmarksChecked);
+                    }
+                  },
+                  gap: "$2",
+                  children: [
+                    /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { className: "DropdownMenuItemIndicator", children: /* @__PURE__ */ jsx(Check, { size: "$1" }) }),
+                    /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Mark as read" }),
+                    isAndroid && native && bookmarksChecked && /* @__PURE__ */ jsx(DropdownMenu.ItemIcon, { androidIconName: "checkbox_on_background" })
+                  ]
+                },
+                "show-hidden"
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.CheckboxItem,
+                {
+                  checked: native,
+                  onCheckedChange: setNative,
+                  value: native ? "on" : "off",
+                  onValueChange: (v) => setNative(v == "on"),
+                  ...isAndroid && native && {
+                    onSelect: () => {
+                      setNative(!native);
+                    }
+                  },
+                  gap: "$2",
+                  children: [
+                    /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: "$1" }) }),
+                    /* @__PURE__ */ jsx(DropdownMenu.ItemTitle, { children: "Enable Native" }),
+                    isAndroid && native && /* @__PURE__ */ jsx(DropdownMenu.ItemIcon, { androidIconName: "checkbox_on_background" })
+                  ]
+                },
+                "show-other-notes"
+              ),
+              /* @__PURE__ */ jsx(DropdownMenu.Arrow, { size: "$2" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  DropDownMenuDemo
+};
+//# sourceMappingURL=DropDownMenuDemo.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/DropDownMenuDemo.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/ContextMenuDemo.js

@@ -0,0 +1,147 @@
+import { ContextMenu } from "@tamagui/context-menu";
+import { isAndroid, isWeb } from "@tamagui/core";
+import { Calendar, Check } from "@tamagui/lucide-icons";
+import { ChevronRight } from "@tamagui/lucide-icons";
+import React from "react";
+import { Image } from "react-native-web";
+import { Text, YStack, useEvent } from "tamagui";
+function ContextMenuDemo() {
+  const [bookmarksChecked, setBookmarksChecked] = React.useState(!0), [native, setNative] = React.useState(!0), onSelect = useEvent(() => {
+  });
+  return <ContextMenu allowFlip native={native} placement="bottom-start">
+    <ContextMenu.Trigger asChild><YStack
+      jc="center"
+      ai="center"
+      bw={1}
+      boc="$borderColor"
+      width={250}
+      height={200}
+    ><Text textAlign="center">Right Click or longPress</Text></YStack></ContextMenu.Trigger>
+    <ContextMenu.Portal zIndex={100}><ContextMenu.Content
+      paddingHorizontal={0}
+      maxWidth={180}
+      borderWidth={1}
+      ai="flex-start"
+      borderColor="$borderColor"
+      enterStyle={{ y: -10, opacity: 0 }}
+      exitStyle={{ y: -10, opacity: 0 }}
+      elevate
+      animation={[
+        "quick",
+        {
+          opacity: {
+            overshootClamping: !0
+          }
+        }
+      ]}
+    >
+      <ContextMenu.Preview>{() => <YStack bc="$green1" jc="center" ai="center" p={20}>
+        <Text>Your Preview here</Text>
+        <Image
+          width={240}
+          height={100}
+          resizeMode="contain"
+          source={{ uri: "https://tamagui.dev/social.png" }}
+        />
+      </YStack>}</ContextMenu.Preview>
+      <ContextMenu.Item onSelect={onSelect} key="about-notes"><ContextMenu.ItemTitle>About Notes</ContextMenu.ItemTitle></ContextMenu.Item>
+      <ContextMenu.Separator />
+      <ContextMenu.Group>
+        <ContextMenu.Item onSelect={onSelect} key="settings"><ContextMenu.ItemTitle>Settings</ContextMenu.ItemTitle></ContextMenu.Item>
+        <ContextMenu.Item
+          onSelect={onSelect}
+          jc="space-between"
+          textValue="Calender"
+          key="accounts"
+        >
+          <ContextMenu.ItemTitle><Text>Calender</Text></ContextMenu.ItemTitle>
+          <ContextMenu.ItemIcon
+            androidIconName="ic_menu_today"
+            ios={{
+              name: "u.square",
+              hierarchicalColor: "#000",
+              pointSize: 20
+            }}
+          ><Calendar color="gray" size="$1" /></ContextMenu.ItemIcon>
+        </ContextMenu.Item>
+      </ContextMenu.Group>
+      <ContextMenu.Separator />
+      <ContextMenu.Group>
+        <ContextMenu.Item onSelect={onSelect} key="close-notes" disabled><ContextMenu.ItemTitle color="gray">Locked</ContextMenu.ItemTitle></ContextMenu.Item>
+        <ContextMenu.Item onSelect={onSelect} destructive key="delete-all"><ContextMenu.ItemTitle>Delete all</ContextMenu.ItemTitle></ContextMenu.Item>
+      </ContextMenu.Group>
+      <ContextMenu.Separator />
+      <ContextMenu.Sub placement="right-start">
+        <ContextMenu.SubTrigger jc="space-between" key="actions-trigger"><>
+          <ContextMenu.ItemTitle>Actions</ContextMenu.ItemTitle>
+          {!native || isWeb ? <ChevronRight size="$1" /> : null}
+        </></ContextMenu.SubTrigger>
+        <ContextMenu.Portal zIndex={200}><ContextMenu.SubContent
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+          elevate
+          animation={[
+            "quick",
+            {
+              opacity: {
+                overshootClamping: !0
+              }
+            }
+          ]}
+          paddingHorizontal={0}
+        >
+          <ContextMenu.Label fontSize="$1">Note settings</ContextMenu.Label>
+          <ContextMenu.Item onSelect={onSelect} key="create-note"><ContextMenu.ItemTitle>Create note</ContextMenu.ItemTitle></ContextMenu.Item>
+          <ContextMenu.Item onSelect={onSelect} key="delete-all"><ContextMenu.ItemTitle>Delete all notes</ContextMenu.ItemTitle></ContextMenu.Item>
+          <ContextMenu.Item onSelect={onSelect} key="sync-all"><ContextMenu.ItemTitle>Sync notes</ContextMenu.ItemTitle></ContextMenu.Item>
+        </ContextMenu.SubContent></ContextMenu.Portal>
+      </ContextMenu.Sub>
+      <ContextMenu.Separator className="DropdownMenuSeparator" />
+      <ContextMenu.CheckboxItem
+        key="show-hidden"
+        checked={bookmarksChecked}
+        onCheckedChange={setBookmarksChecked}
+        value={bookmarksChecked ? "on" : "off"}
+        onValueChange={(v) => setBookmarksChecked(v == "on")}
+        {...isAndroid && native && {
+          onSelect: () => {
+            isAndroid && setBookmarksChecked(!bookmarksChecked);
+          }
+        }}
+        gap="$2"
+      >
+        <ContextMenu.ItemIndicator className="DropdownMenuItemIndicator"><Check size="$1" /></ContextMenu.ItemIndicator>
+        <ContextMenu.ItemTitle>Mark as read</ContextMenu.ItemTitle>
+        {
+          /* android native menu treat checkbox as simple MenuItem */
+        }
+        {isAndroid && native && bookmarksChecked && <ContextMenu.ItemIcon androidIconName="checkbox_on_background" />}
+      </ContextMenu.CheckboxItem>
+      <ContextMenu.CheckboxItem
+        key="show-other-notes"
+        checked={native}
+        onCheckedChange={setNative}
+        value={native ? "on" : "off"}
+        onValueChange={(v) => setNative(v == "on")}
+        {...isAndroid && native && {
+          onSelect: () => {
+            setNative(!native);
+          }
+        }}
+        gap="$2"
+      >
+        <ContextMenu.ItemIndicator><Check size="$1" /></ContextMenu.ItemIndicator>
+        <ContextMenu.ItemTitle>Enable Native</ContextMenu.ItemTitle>
+        {
+          /* android native menu treat checkbox as simple MenuItem */
+        }
+        {isAndroid && native && <ContextMenu.ItemIcon androidIconName="checkbox_on_background" />}
+      </ContextMenu.CheckboxItem>
+      <ContextMenu.Arrow size="$2" />
+    </ContextMenu.Content></ContextMenu.Portal>
+  </ContextMenu>;
+}
+export {
+  ContextMenuDemo
+};
+//# sourceMappingURL=ContextMenuDemo.js.map

package/dist/jsx/ContextMenuDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ContextMenuDemo.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/ContextMenuDemo.native.js

@@ -0,0 +1,147 @@
+import { ContextMenu } from "@tamagui/context-menu";
+import { isAndroid, isWeb } from "@tamagui/core";
+import { Calendar, Check } from "@tamagui/lucide-icons";
+import { ChevronRight } from "@tamagui/lucide-icons";
+import React from "react";
+import { Image } from "react-native";
+import { Text, YStack, useEvent } from "tamagui";
+function ContextMenuDemo() {
+  const [bookmarksChecked, setBookmarksChecked] = React.useState(!0), [native, setNative] = React.useState(!0), onSelect = useEvent(() => {
+  });
+  return <ContextMenu allowFlip native={native} placement="bottom-start">
+    <ContextMenu.Trigger asChild><YStack
+      jc="center"
+      ai="center"
+      bw={1}
+      boc="$borderColor"
+      width={250}
+      height={200}
+    ><Text textAlign="center">Right Click or longPress</Text></YStack></ContextMenu.Trigger>
+    <ContextMenu.Portal zIndex={100}><ContextMenu.Content
+      paddingHorizontal={0}
+      maxWidth={180}
+      borderWidth={1}
+      ai="flex-start"
+      borderColor="$borderColor"
+      enterStyle={{ y: -10, opacity: 0 }}
+      exitStyle={{ y: -10, opacity: 0 }}
+      elevate
+      animation={[
+        "quick",
+        {
+          opacity: {
+            overshootClamping: !0
+          }
+        }
+      ]}
+    >
+      <ContextMenu.Preview>{() => <YStack bc="$green1" jc="center" ai="center" p={20}>
+        <Text>Your Preview here</Text>
+        <Image
+          width={240}
+          height={100}
+          resizeMode="contain"
+          source={{ uri: "https://tamagui.dev/social.png" }}
+        />
+      </YStack>}</ContextMenu.Preview>
+      <ContextMenu.Item onSelect={onSelect} key="about-notes"><ContextMenu.ItemTitle>About Notes</ContextMenu.ItemTitle></ContextMenu.Item>
+      <ContextMenu.Separator />
+      <ContextMenu.Group>
+        <ContextMenu.Item onSelect={onSelect} key="settings"><ContextMenu.ItemTitle>Settings</ContextMenu.ItemTitle></ContextMenu.Item>
+        <ContextMenu.Item
+          onSelect={onSelect}
+          jc="space-between"
+          textValue="Calender"
+          key="accounts"
+        >
+          <ContextMenu.ItemTitle><Text>Calender</Text></ContextMenu.ItemTitle>
+          <ContextMenu.ItemIcon
+            androidIconName="ic_menu_today"
+            ios={{
+              name: "u.square",
+              hierarchicalColor: "#000",
+              pointSize: 20
+            }}
+          ><Calendar color="gray" size="$1" /></ContextMenu.ItemIcon>
+        </ContextMenu.Item>
+      </ContextMenu.Group>
+      <ContextMenu.Separator />
+      <ContextMenu.Group>
+        <ContextMenu.Item onSelect={onSelect} key="close-notes" disabled><ContextMenu.ItemTitle color="gray">Locked</ContextMenu.ItemTitle></ContextMenu.Item>
+        <ContextMenu.Item onSelect={onSelect} destructive key="delete-all"><ContextMenu.ItemTitle>Delete all</ContextMenu.ItemTitle></ContextMenu.Item>
+      </ContextMenu.Group>
+      <ContextMenu.Separator />
+      <ContextMenu.Sub placement="right-start">
+        <ContextMenu.SubTrigger jc="space-between" key="actions-trigger"><>
+          <ContextMenu.ItemTitle>Actions</ContextMenu.ItemTitle>
+          {!native || isWeb ? <ChevronRight size="$1" /> : null}
+        </></ContextMenu.SubTrigger>
+        <ContextMenu.Portal zIndex={200}><ContextMenu.SubContent
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
+          elevate
+          animation={[
+            "quick",
+            {
+              opacity: {
+                overshootClamping: !0
+              }
+            }
+          ]}
+          paddingHorizontal={0}
+        >
+          <ContextMenu.Label fontSize="$1">Note settings</ContextMenu.Label>
+          <ContextMenu.Item onSelect={onSelect} key="create-note"><ContextMenu.ItemTitle>Create note</ContextMenu.ItemTitle></ContextMenu.Item>
+          <ContextMenu.Item onSelect={onSelect} key="delete-all"><ContextMenu.ItemTitle>Delete all notes</ContextMenu.ItemTitle></ContextMenu.Item>
+          <ContextMenu.Item onSelect={onSelect} key="sync-all"><ContextMenu.ItemTitle>Sync notes</ContextMenu.ItemTitle></ContextMenu.Item>
+        </ContextMenu.SubContent></ContextMenu.Portal>
+      </ContextMenu.Sub>
+      <ContextMenu.Separator className="DropdownMenuSeparator" />
+      <ContextMenu.CheckboxItem
+        key="show-hidden"
+        checked={bookmarksChecked}
+        onCheckedChange={setBookmarksChecked}
+        value={bookmarksChecked ? "on" : "off"}
+        onValueChange={(v) => setBookmarksChecked(v == "on")}
+        {...isAndroid && native && {
+          onSelect: () => {
+            isAndroid && setBookmarksChecked(!bookmarksChecked);
+          }
+        }}
+        gap="$2"
+      >
+        <ContextMenu.ItemIndicator className="DropdownMenuItemIndicator"><Check size="$1" /></ContextMenu.ItemIndicator>
+        <ContextMenu.ItemTitle>Mark as read</ContextMenu.ItemTitle>
+        {
+          /* android native menu treat checkbox as simple MenuItem */
+        }
+        {isAndroid && native && bookmarksChecked && <ContextMenu.ItemIcon androidIconName="checkbox_on_background" />}
+      </ContextMenu.CheckboxItem>
+      <ContextMenu.CheckboxItem
+        key="show-other-notes"
+        checked={native}
+        onCheckedChange={setNative}
+        value={native ? "on" : "off"}
+        onValueChange={(v) => setNative(v == "on")}
+        {...isAndroid && native && {
+          onSelect: () => {
+            setNative(!native);
+          }
+        }}
+        gap="$2"
+      >
+        <ContextMenu.ItemIndicator><Check size="$1" /></ContextMenu.ItemIndicator>
+        <ContextMenu.ItemTitle>Enable Native</ContextMenu.ItemTitle>
+        {
+          /* android native menu treat checkbox as simple MenuItem */
+        }
+        {isAndroid && native && <ContextMenu.ItemIcon androidIconName="checkbox_on_background" />}
+      </ContextMenu.CheckboxItem>
+      <ContextMenu.Arrow size="$2" />
+    </ContextMenu.Content></ContextMenu.Portal>
+  </ContextMenu>;
+}
+export {
+  ContextMenuDemo
+};
+//# sourceMappingURL=ContextMenuDemo.js.map