@hanzogui/demos 2.0.0

package/dist/cjs/ColorsDemo.native.js

@@ -0,0 +1,143 @@
+"use strict";
+
+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 ColorsDemo_exports = {};
+__export(ColorsDemo_exports, {
+  ColorsDemo: () => ColorsDemo
+});
+module.exports = __toCommonJS(ColorsDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_colors = require("@hanzogui/colors"),
+  import_gui = require("@hanzo/gui"),
+  colorGroups = ["gray", "blue", "green", "yellow", "red"],
+  lightColors = {
+    gray: import_colors.gray,
+    blue: import_colors.blue,
+    green: import_colors.green,
+    yellow: import_colors.yellow,
+    red: import_colors.red
+  },
+  darkColors = {
+    gray: import_colors.grayDark,
+    blue: import_colors.blueDark,
+    green: import_colors.greenDark,
+    yellow: import_colors.yellowDark,
+    red: import_colors.redDark
+  };
+function ColorsDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    mt: "$4",
+    gap: "$8",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorsRow, {
+      title: "Light",
+      colorSets: lightColors
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorsRow, {
+      title: "Dark",
+      colorSets: darkColors
+    })]
+  });
+}
+function ColorsRow(param) {
+  var {
+    title,
+    colorSets
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+    gap: "$4",
+    $sm: {
+      gap: "$2"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.H2, {
+      size: "$2",
+      children: title
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+      gap: "$4",
+      self: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+        gap: "$4",
+        $sm: {
+          gap: "$2"
+        },
+        self: "center",
+        children: [colorGroups.map(function (groupName) {
+          var colorSet = colorSets[groupName],
+            colors = Object.values(colorSet);
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+            gap: "$2",
+            children: colors.map(function (color, index) {
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Square, {
+                rounded: "$2",
+                size: "$4",
+                height: "$4",
+                borderWidth: 1,
+                bg: color,
+                borderColor: "$color7",
+                $sm: {
+                  size: "$2"
+                },
+                $xs: {
+                  size: "$1"
+                }
+              }, `${groupName}${index}`);
+            })
+          }, groupName);
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.XStack, {
+          gap: "$2",
+          self: "center",
+          children: new Array(13).fill(0).slice(1).map(function (_, index) {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+              color: "$color10",
+              text: "center",
+              width: "$4",
+              $sm: {
+                width: "$2"
+              },
+              $xs: {
+                width: "$1"
+              },
+              children: index
+            }, index);
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+        gap: "$4",
+        mt: "$2",
+        children: colorGroups.map(function (name) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Paragraph, {
+            theme: name,
+            color: "$color10",
+            height: "$4",
+            rotate: "-10deg",
+            $sm: {
+              height: "$2"
+            },
+            $xs: {
+              height: "$1"
+            },
+            children: name
+          }, name);
+        })
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=ColorsDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ColorsDemo_exports","__export","ColorsDemo","module","exports","import_jsx_runtime","require","import_colors","import_gui","colorGroups","lightColors","gray","blue","green","yellow","red","darkColors","grayDark","blueDark","greenDark","yellowDark","redDark","jsxs","YStack","mt","gap","children","jsx","ColorsRow","title","colorSets","Separator","param","$sm","H2","size","XStack","self","map","groupName","colorSet","colors","Object","values","color","index","Square","rounded","height","borderWidth","bg","borderColor","$xs","Array","fill","slice","_","Paragraph"],"sources":["../../src/ColorsDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/ContextMenuDemo.cjs

@@ -0,0 +1,224 @@
+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("@hanzogui/context-menu"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui"),
+  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, {
+    native,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.View, {
+        p: "$4",
+        rounded: "$4",
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: "$color6",
+        cursor: "default",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.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_gui.YStack, {
+            items: "center",
+            justify: "center",
+            height: 100,
+            width: 250,
+            bg: "pink",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.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: !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, {
+          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")]
+      })
+    })]
+  });
+}

package/dist/cjs/ContextMenuDemo.native.js

@@ -0,0 +1,230 @@
+"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 ContextMenuDemo_exports = {};
+__export(ContextMenuDemo_exports, {
+  ContextMenuDemo: () => ContextMenuDemo
+});
+module.exports = __toCommonJS(ContextMenuDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_context_menu = require("@hanzogui/context-menu"),
+  import_lucide_icons_2 = require("@hanzogui/lucide-icons-2"),
+  import_react = __toESM(require("react"), 1),
+  import_gui = require("@hanzo/gui");
+function ContextMenuDemo() {
+  var [bookmarksChecked, setBookmarksChecked] = import_react.default.useState(!0),
+    [native, setNative] = import_react.default.useState(!0),
+    onSelect = function () {
+      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: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.View, {
+        p: "$4",
+        rounded: "$4",
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: "$color6",
+        cursor: "default",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.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: function () {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.YStack, {
+              items: "center",
+              justify: "center",
+              height: 100,
+              width: 250,
+              bg: "pink",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.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: !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, {}), /* Submenu */
+        /* @__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")]
+      })
+    })]
+  });
+}
+//# sourceMappingURL=ContextMenuDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ContextMenuDemo_exports","__export","ContextMenuDemo","module","exports","import_jsx_runtime","require","import_context_menu","import_lucide_icons_2","import_react","__toESM","import_gui","bookmarksChecked","setBookmarksChecked","default","useState","native","setNative","onSelect","console","info","jsxs","ContextMenu","children","jsx","Trigger","asChild","View","p","rounded","borderWidth","borderStyle","borderColor","cursor","Text","text","select","color","Portal","zIndex","Content","minW","transformOrigin","enterStyle","scale","opacity","y","exitStyle","elevation","transition","Arrow","size","Preview","YStack","items","justify","height","width","bg","Item","ItemTitle","Separator","textValue","ItemIcon","androidIconName","ios","name","Calendar","disabled","destructive","Sub","SubTrigger","ChevronRight","SubContent","x","Label"],"sources":["../../src/ContextMenuDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}