@tamagui/demos 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/ContextMenuDemo.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,224 +6,187 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__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: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ContextMenuDemo_exports = {};
-__export(ContextMenuDemo_exports, {
-  ContextMenuDemo: () => ContextMenuDemo
-});
+__export(ContextMenuDemo_exports, { ContextMenuDemo: () => ContextMenuDemo });
 module.exports = __toCommonJS(ContextMenuDemo_exports);
-var import_context_menu = require("@tamagui/context-menu");
 var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
 var import_react = __toESM(require("react"), 1);
 var import_tamagui = require("tamagui");
+var import_MenuSkins = require("./MenuSkins.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function ContextMenuDemo() {
-  const [bookmarksChecked, setBookmarksChecked] = import_react.default.useState(true);
-  const [native, setNative] = import_react.default.useState(true);
-  const onSelect = () => {
-    console.info("onSelect");
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu, {
-    native,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        p: "$4",
-        rounded: "$4",
-        borderWidth: 1,
-        borderStyle: "dashed",
-        borderColor: "$color6",
-        cursor: "default",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          text: "center",
-          select: "none",
-          color: "$color10",
-          children: "Right Click or Long Press"
-        })
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Portal, {
-      zIndex: 100,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.Content, {
-        p: "$1.5",
-        minW: 180,
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        transformOrigin: "left top",
-        enterStyle: {
-          scale: 0.9,
-          opacity: 0,
-          y: -5
-        },
-        exitStyle: {
-          scale: 0.95,
-          opacity: 0,
-          y: -3
-        },
-        elevation: "$3",
-        transition: "100ms",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Arrow, {
-          size: "$4",
-          borderWidth: 1,
-          borderColor: "$borderColor"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Preview, {
-          children: () => {
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-              items: "center",
-              justify: "center",
-              height: 100,
-              width: 250,
-              bg: "pink",
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                children: "Your Preview here"
-              })
-            });
-          }
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
-          onSelect,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-            children: "About Notes"
-          })
-        }, "about-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
-          onSelect,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-            children: "Settings"
-          })
-        }, "settings"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.Item, {
-          onSelect,
-          justify: "space-between",
-          textValue: "Calendar",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-            children: "Calendar"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemIcon, {
-            androidIconName: "ic_menu_today",
-            ios: {
-              name: "calendar"
-            },
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Calendar, {
-              color: "gray",
-              size: 14
-            })
-          })]
-        }, "accounts"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
-          onSelect,
-          disabled: true,
-          textValue: "Locked Notes",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-            color: "gray",
-            children: "Locked Notes"
-          })
-        }, "close-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
-          destructive: true,
-          onSelect,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-            color: "red",
-            children: "Delete all"
-          })
-        }, "delete-all"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.Sub, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.SubTrigger, {
-            justify: "space-between",
-            textValue: "Actions",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-              children: "Actions"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {
-              size: 12,
-              color: "$color10"
-            })]
-          }, "actions-trigger"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Portal, {
-            zIndex: 200,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.SubContent, {
-              enterStyle: {
-                scale: 0.9,
-                opacity: 0,
-                x: -5
-              },
-              exitStyle: {
-                scale: 0.95,
-                opacity: 0,
-                x: -3
-              },
-              transition: "100ms",
-              transformOrigin: "left top",
-              elevation: "$3",
-              minW: 160,
-              bg: "$background",
-              p: "$1.5",
-              borderWidth: 1,
-              borderColor: "$borderColor",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Label, {
-                children: "Note settings"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
-                onSelect,
-                textValue: "Create note",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-                  children: "Create note"
-                })
-              }, "create-note"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
-                onSelect,
-                textValue: "Delete all notes",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-                  children: "Delete all notes"
-                })
-              }, "delete-all-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
-                onSelect,
-                textValue: "Sync notes",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-                  children: "Sync notes"
-                })
-              }, "sync-all")]
-            })
-          })]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.CheckboxItem, {
-          checked: bookmarksChecked,
-          onCheckedChange: setBookmarksChecked,
-          justify: "space-between",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-            children: "Mark as read"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemIndicator, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
-              size: 12,
-              color: "$color10"
-            })
-          })]
-        }, "show-hidden"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.CheckboxItem, {
-          checked: native,
-          onCheckedChange: setNative,
-          justify: "space-between",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-            children: "Enable Native"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemIndicator, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
-              size: 12,
-              color: "$color10"
-            })
-          })]
-        }, "show-other-notes")]
-      })
-    })]
-  });
-}
+	const [bookmarksChecked, setBookmarksChecked] = import_react.default.useState(true);
+	const [native, setNative] = import_react.default.useState(true);
+	const onSelect = () => {
+		console.info("onSelect");
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu, {
+		native,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+				p: "4",
+				rounded: "4",
+				borderWidth: 1,
+				borderStyle: "dashed",
+				borderColor: "color6",
+				cursor: "default",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+					text: "center",
+					select: "none",
+					color: "color10",
+					children: "Right Click or Long Press"
+				})
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Portal, {
+			zIndex: 100,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.Content, {
+				p: "1-5",
+				minW: 180,
+				borderWidth: 1,
+				borderColor: "border-color",
+				transformOrigin: "left top",
+				scale: "enter:0.9 exit:0.95",
+				opacity: "enter:0 exit:0",
+				y: "enter:-5px exit:-3px",
+				transition: "100ms",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Arrow, {
+						size: 13,
+						borderWidth: 1,
+						borderColor: "border-color"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Preview, { children: () => {
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+							items: "center",
+							justify: "center",
+							height: 100,
+							width: 250,
+							bg: "pink",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "Your Preview here" })
+						});
+					} }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+						onSelect,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "About Notes" })
+					}, "about-notes"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Separator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+						onSelect,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Settings" })
+					}, "settings"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.Item, {
+						onSelect,
+						justify: "space-between",
+						textValue: "Calendar",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Calendar" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemIcon, {
+							androidIconName: "ic_menu_today",
+							ios: { name: "calendar" },
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.Calendar, {
+								color: "gray",
+								size: 14
+							})
+						})]
+					}, "accounts"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Separator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+						onSelect,
+						disabled: true,
+						textValue: "Locked Notes",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, {
+							color: "gray",
+							children: "Locked Notes"
+						})
+					}, "close-notes"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+						destructive: true,
+						onSelect,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, {
+							color: "red",
+							children: "Delete all"
+						})
+					}, "delete-all"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Separator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.Sub, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.SubTrigger, {
+						justify: "space-between",
+						textValue: "Actions",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Actions" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {
+							size: 12,
+							color: "color10"
+						})]
+					}, "actions-trigger"), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Portal, {
+						zIndex: 200,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.SubContent, {
+							scale: "enter:0.9 exit:0.95",
+							opacity: "enter:0 exit:0",
+							x: "enter:-5px exit:-3px",
+							transition: "100ms",
+							transformOrigin: "left top",
+							minW: 160,
+							bg: "background",
+							p: "1-5",
+							borderWidth: 1,
+							borderColor: "border-color",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Label, { children: "Note settings" }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+									onSelect,
+									textValue: "Create note",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Create note" })
+								}, "create-note"),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+									onSelect,
+									textValue: "Delete all notes",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Delete all notes" })
+								}, "delete-all-notes"),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+									onSelect,
+									textValue: "Sync notes",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Sync notes" })
+								}, "sync-all")
+							]
+						})
+					})] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Separator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.CheckboxItem, {
+						checked: bookmarksChecked,
+						onCheckedChange: setBookmarksChecked,
+						justify: "space-between",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Mark as read" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
+							size: 12,
+							color: "color10"
+						}) })]
+					}, "show-hidden"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.CheckboxItem, {
+						checked: native,
+						onCheckedChange: setNative,
+						justify: "space-between",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Enable Native" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
+							size: 12,
+							color: "color10"
+						}) })]
+					}, "show-other-notes")
+				]
+			})
+		})]
+	});
+}

package/dist/cjs/ContextMenuDemo.native.cjs

@@ -0,0 +1,194 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ContextMenuDemo_exports = {};
+__export(ContextMenuDemo_exports, { ContextMenuDemo: () => ContextMenuDemo });
+module.exports = __toCommonJS(ContextMenuDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_react = __toESM(require("react"), 1);
+var import_tamagui = require("tamagui");
+var import_MenuSkins = require("./MenuSkins.native.js");
+function ContextMenuDemo() {
+	var [bookmarksChecked, setBookmarksChecked] = import_react.default.useState(true);
+	var [native, setNative] = import_react.default.useState(true);
+	var onSelect = function() {
+		console.info("onSelect");
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu, {
+		native,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+				p: "4",
+				rounded: "4",
+				borderWidth: 1,
+				borderStyle: "dashed",
+				borderColor: "color6",
+				cursor: "default",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+					text: "center",
+					select: "none",
+					color: "color10",
+					children: "Right Click or Long Press"
+				})
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Portal, {
+			zIndex: 100,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.Content, {
+				p: "1-5",
+				minW: 180,
+				borderWidth: 1,
+				borderColor: "border-color",
+				transformOrigin: "left top",
+				scale: "enter:0.9 exit:0.95",
+				opacity: "enter:0 exit:0",
+				y: "enter:-5px exit:-3px",
+				transition: "100ms",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Arrow, {
+						size: 13,
+						borderWidth: 1,
+						borderColor: "border-color"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Preview, { children: function() {
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+							items: "center",
+							justify: "center",
+							height: 100,
+							width: 250,
+							bg: "pink",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Text, { children: "Your Preview here" })
+						});
+					} }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+						onSelect,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "About Notes" })
+					}, "about-notes"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Separator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+						onSelect,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Settings" })
+					}, "settings"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.Item, {
+						onSelect,
+						justify: "space-between",
+						textValue: "Calendar",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Calendar" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemIcon, {
+							androidIconName: "ic_menu_today",
+							ios: { name: "calendar" },
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.Calendar, {
+								color: "gray",
+								size: 14
+							})
+						})]
+					}, "accounts"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Separator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+						onSelect,
+						disabled: true,
+						textValue: "Locked Notes",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, {
+							color: "gray",
+							children: "Locked Notes"
+						})
+					}, "close-notes"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+						destructive: true,
+						onSelect,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, {
+							color: "red",
+							children: "Delete all"
+						})
+					}, "delete-all"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Separator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.Sub, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.SubTrigger, {
+						justify: "space-between",
+						textValue: "Actions",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Actions" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {
+							size: 12,
+							color: "color10"
+						})]
+					}, "actions-trigger"), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Portal, {
+						zIndex: 200,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.SubContent, {
+							scale: "enter:0.9 exit:0.95",
+							opacity: "enter:0 exit:0",
+							x: "enter:-5px exit:-3px",
+							transition: "100ms",
+							transformOrigin: "left top",
+							minW: 160,
+							bg: "background",
+							p: "1-5",
+							borderWidth: 1,
+							borderColor: "border-color",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Label, { children: "Note settings" }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+									onSelect,
+									textValue: "Create note",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Create note" })
+								}, "create-note"),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+									onSelect,
+									textValue: "Delete all notes",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Delete all notes" })
+								}, "delete-all-notes"),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Item, {
+									onSelect,
+									textValue: "Sync notes",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Sync notes" })
+								}, "sync-all")
+							]
+						})
+					})] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.Separator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.CheckboxItem, {
+						checked: bookmarksChecked,
+						onCheckedChange: setBookmarksChecked,
+						justify: "space-between",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Mark as read" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
+							size: 12,
+							color: "color10"
+						}) })]
+					}, "show-hidden"),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MenuSkins.ContextMenu.CheckboxItem, {
+						checked: native,
+						onCheckedChange: setNative,
+						justify: "space-between",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemTitle, { children: "Enable Native" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSkins.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons_2.Check, {
+							size: 12,
+							color: "color10"
+						}) })]
+					}, "show-other-notes")
+				]
+			})
+		})]
+	});
+}