@tamagui/demos 1.144.3 → 1.144.4

package/dist/cjs/AnimationsDelayDemo.cjs

@@ -0,0 +1,85 @@
+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 AnimationsDelayDemo_exports = {};
+__export(AnimationsDelayDemo_exports, {
+  AnimationsDelayDemo: () => AnimationsDelayDemo
+});
+module.exports = __toCommonJS(AnimationsDelayDemo_exports);
+var import_react = __toESM(require("react"), 1),
+  import_tamagui = require("tamagui"),
+  import_useOnIntersecting = require("./useOnIntersecting.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const colors = ["$color9", "$color10", "$color11", "$color12"];
+function AnimationsDelayDemo() {
+  const ref = import_react.default.useRef(null),
+    hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, {
+      once: !0
+    }),
+    [show, setShow] = import_react.default.useState(!0);
+  return import_tamagui.isWeb && !hasIntersected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    ref,
+    height: 150
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$4",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      gap: "$3",
+      height: 100,
+      items: "center",
+      justify: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+        children: show && colors.map((color, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+          transition: ["200ms", {
+            delay: i * 100
+          }],
+          enterStyle: {
+            opacity: 0,
+            scale: 0.5,
+            y: 20
+          },
+          exitStyle: {
+            opacity: 0,
+            scale: 0,
+            y: 20
+          },
+          size: 60,
+          bg: color,
+          rounded: "$4"
+        }, color))
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      size: "$3",
+      onPress: () => setShow(!show),
+      children: show ? "Hide" : "Show"
+    })]
+  });
+}

package/dist/cjs/AnimationsDelayDemo.js

@@ -0,0 +1,56 @@
+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 AnimationsDelayDemo_exports = {};
+__export(AnimationsDelayDemo_exports, {
+  AnimationsDelayDemo: () => AnimationsDelayDemo
+});
+module.exports = __toCommonJS(AnimationsDelayDemo_exports);
+var import_react = __toESM(require("react"), 1), import_tamagui = require("tamagui"), import_useOnIntersecting = require("./useOnIntersecting"), import_jsx_runtime = require("react/jsx-runtime");
+const colors = ["$color9", "$color10", "$color11", "$color12"];
+function AnimationsDelayDemo() {
+  const ref = import_react.default.useRef(null), hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, { once: !0 }), [show, setShow] = import_react.default.useState(!0);
+  return import_tamagui.isWeb && !hasIntersected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { ref, height: 150 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { gap: "$4", items: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { gap: "$3", height: 100, items: "center", justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { children: show && colors.map((color, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Square,
+      {
+        transition: ["200ms", { delay: i * 100 }],
+        enterStyle: {
+          opacity: 0,
+          scale: 0.5,
+          y: 20
+        },
+        exitStyle: {
+          opacity: 0,
+          scale: 0,
+          y: 20
+        },
+        size: 60,
+        bg: color,
+        rounded: "$4"
+      },
+      color
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", onPress: () => setShow(!show), children: show ? "Hide" : "Show" })
+  ] });
+}
+//# sourceMappingURL=AnimationsDelayDemo.js.map

package/dist/cjs/AnimationsDelayDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/AnimationsDelayDemo.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,8BAClB,iBAAuE,oBAEvE,2BAAkC,gCAUvB;AARX,MAAM,SAAS,CAAC,WAAW,YAAY,YAAY,UAAU;AAEtD,SAAS,sBAAsB;AACpC,QAAM,MAAM,aAAAA,QAAM,OAAoB,IAAI,GACpC,qBAAiB,4CAAkB,KAAK,EAAE,MAAM,GAAK,CAAC,GACtD,CAAC,MAAM,OAAO,IAAI,aAAAA,QAAM,SAAS,EAAI;AAE3C,SAAI,wBAAS,CAAC,iBACL,4CAAC,yBAAO,KAAiB,QAAQ,KAAK,IAI7C,6CAAC,yBAAO,KAAI,MAAK,OAAM,UACrB;AAAA,gDAAC,yBAAO,KAAI,MAAK,QAAQ,KAAK,OAAM,UAAS,SAAQ,UACnD,sDAAC,kCACE,kBACC,OAAO,IAAI,CAAC,OAAO,MACjB;AAAA,MAAC;AAAA;AAAA,QAEC,YAAY,CAAC,SAAS,EAAE,OAAO,IAAI,IAAI,CAAC;AAAA,QACxC,YAAY;AAAA,UACV,SAAS;AAAA,UACT,OAAO;AAAA,UACP,GAAG;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,SAAS;AAAA,UACT,OAAO;AAAA,UACP,GAAG;AAAA,QACL;AAAA,QACA,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,SAAQ;AAAA;AAAA,MAdH;AAAA,IAeP,CACD,GACL,GACF;AAAA,IAEA,4CAAC,yBAAO,MAAK,MAAK,SAAS,MAAM,QAAQ,CAAC,IAAI,GAC3C,iBAAO,SAAS,QACnB;AAAA,KACF;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/AnimationsDelayDemo.native.js

@@ -0,0 +1,92 @@
+"use strict";
+
+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 AnimationsDelayDemo_exports = {};
+__export(AnimationsDelayDemo_exports, {
+  AnimationsDelayDemo: () => AnimationsDelayDemo
+});
+module.exports = __toCommonJS(AnimationsDelayDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_react = __toESM(require("react"), 1),
+  import_tamagui = require("tamagui"),
+  import_useOnIntersecting = require("./useOnIntersecting.native.js"),
+  colors = ["$color9", "$color10", "$color11", "$color12"];
+function AnimationsDelayDemo() {
+  var ref = import_react.default.useRef(null),
+    hasIntersected = (0, import_useOnIntersecting.useIsIntersecting)(ref, {
+      once: !0
+    }),
+    [show, setShow] = import_react.default.useState(!0);
+  return import_tamagui.isWeb && !hasIntersected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    ref,
+    height: 150
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$4",
+    items: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      gap: "$3",
+      height: 100,
+      items: "center",
+      justify: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+        children: show && colors.map(function (color, i) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Square, {
+            transition: ["200ms", {
+              delay: i * 100
+            }],
+            enterStyle: {
+              opacity: 0,
+              scale: 0.5,
+              y: 20
+            },
+            exitStyle: {
+              opacity: 0,
+              scale: 0,
+              y: 20
+            },
+            size: 60,
+            bg: color,
+            rounded: "$4"
+          }, color);
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      size: "$3",
+      onPress: function () {
+        return setShow(!show);
+      },
+      children: show ? "Hide" : "Show"
+    })]
+  });
+}
+//# sourceMappingURL=AnimationsDelayDemo.native.js.map

package/dist/cjs/AnimationsDelayDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AnimationsDelayDemo_exports","__export","AnimationsDelayDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_tamagui","import_useOnIntersecting","colors","ref","default","useRef","hasIntersected","useIsIntersecting","once","show","setShow","useState","isWeb","jsx","YStack","height","jsxs","gap","items","children","XStack","justify","AnimatePresence","map","color","i","Square","transition"],"sources":["../../src/AnimationsDelayDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,2BAAA;AAAAC,QAAA,CAAAD,2BAAA;EAAAE,mBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,2BAClB;AAIA,IAAAK,kBAAgB,GAAAC,OAAW,oBAAwB;EAAAC,YAAU,GAAAC,OAAA,CAAAF,OAAA;EAAAG,cAAA,GAAAH,OAAA;EAAAI,wBAAA,GAAAJ,OAAA;EAAAK,MAAA,IAEtD,SAAS,EACd,UAAM,EAIN,UAAI,EAMA,WAIQ;AAAC,SAAAT,oBAAA;EAAA,IAAAU,GAEC,GAAAL,YAAa,CAAAM,OAAW,CAAAC,MAAO,KAAI;IAAIC,cAAC,OAAAL,wBAAA,CAAAM,iBAAA,EAAAJ,GAAA;MAAAK,IACxC;IAAY;IAAA,CAAAC,IACV,EAAAC,OAAS,IAAAZ,YAAA,CAAAM,OAAA,CAAAO,QAAA;EAAA,OAAAX,cACF,CAAAY,KAAA,KAAAN,cAAA,sBAAAV,kBAAA,CAAAiB,GAAA,EAAAb,cAAA,CAAAc,MAAA;IAAAX,GAAA;IACJY,MACL;EAAA,oBACW,IAAAnB,kBAAA,CAAAoB,IAAA,EAAAhB,cAAA,CAAAc,MAAA;IAAAG,GAAA,MACT;IAASC,KAAA,EACT,QAAO;IAAAC,QACP,EAAG,gBACL,IAAAvB,kBAAA,CAAAiB,GAAA,EAAAb,cAAA,CAAAoB,MAAA;MACAH,GAAA,MAAM;MACNF,MAAI;MACJG,KAAA,UAAQ;MAAAG,OAAA;MAdHF,QAAA,qBAAAvB,kBAAA,CAAAiB,GAAA,EAAAb,cAAA,CAAAsB,eAAA;QAiBbH,QACF,EAAAV,IAAA,IAAAP,MAAA,CAAAqB,GAAA,WAAAC,KAAA,EAAAC,CAAA;UAEA,0BAAA7B,kBAAC,CAAAiB,GAAA,EAAAb,cAAO,CAAA0B,MAAK,EAAK;YAGpBC,UAAA,GAEJ,S","ignoreList":[]}

package/dist/cjs/ContextMenuDemo.cjs

@@ -0,0 +1,228 @@
+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 ContextMenuDemo_exports = {};
+__export(ContextMenuDemo_exports, {
+  ContextMenuDemo: () => ContextMenuDemo
+});
+module.exports = __toCommonJS(ContextMenuDemo_exports);
+var import_context_menu = require("@tamagui/context-menu"),
+  import_lucide_icons = require("@tamagui/lucide-icons"),
+  import_react = __toESM(require("react"), 1),
+  import_tamagui = require("tamagui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function ContextMenuDemo() {
+  const [bookmarksChecked, setBookmarksChecked] = import_react.default.useState(!0),
+    [native, setNative] = import_react.default.useState(!0),
+    onSelect = () => {
+      console.info("onSelect");
+    };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu, {
+    allowFlip: !0,
+    native,
+    placement: "bottom-start",
+    offset: 14,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Trigger, {
+      asChild: !0,
+      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: () => /* @__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.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: !0,
+          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: !0,
+          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, {
+          placement: "right-start",
+          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.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.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.Check, {
+              size: 12,
+              color: "$color10"
+            })
+          })]
+        }, "show-other-notes")]
+      })
+    })]
+  });
+}