@tamagui/demos 2.0.0-1768326993354 → 2.0.0-1768530912818

package/dist/cjs/MenuDemo.cjs

@@ -34,192 +34,294 @@ __export(MenuDemo_exports, {
   MenuDemo: () => MenuDemo
 });
 module.exports = __toCommonJS(MenuDemo_exports);
-var import_core = require("@tamagui/core"),
-  import_lucide_icons = require("@tamagui/lucide-icons"),
+var import_lucide_icons = require("@tamagui/lucide-icons"),
   import_menu = require("@tamagui/menu"),
   import_react = __toESM(require("react"), 1),
   import_tamagui = require("tamagui"),
   import_jsx_runtime = require("react/jsx-runtime");
-const Item = (0, import_core.styled)(import_menu.Menu.Item, {
-    py: 4,
-    hoverStyle: {
-      bg: "$color2"
-    },
-    pressStyle: {
-      bg: "$color3"
-    }
-  }),
-  ItemTitle = (0, import_core.styled)(import_menu.Menu.ItemTitle, {
-    color: "$color11"
-  });
-Item.displayName = "Item";
-ItemTitle.displayName = "ItemTitle";
 function MenuDemo() {
   const [bookmarksChecked, setBookmarksChecked] = import_react.default.useState(!0),
     [native, setNative] = import_react.default.useState(!0),
+    [subMenuOpen, setSubMenuOpen] = import_react.default.useState(!1),
+    isTouchDevice = (0, import_tamagui.useIsTouchDevice)(),
     onSelect = item => {
       console.info("selected", item);
     };
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
     children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu, {
-      offset: {
-        crossAxis: 25
-      },
       allowFlip: !0,
       placement: "bottom-start",
+      offset: 8,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Trigger, {
         asChild: !0,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-          rounded: "$10",
+          size: "$3",
+          circular: !0,
           icon: import_lucide_icons.Backpack,
           scaleIcon: 1.2
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Portal, {
         zIndex: 100,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Content, {
-          px: 0,
+          p: "$1.5",
+          minW: 180,
           borderWidth: 1,
-          items: "flex-start",
           borderColor: "$borderColor",
+          transformOrigin: "left top",
           enterStyle: {
-            y: -10,
-            opacity: 0
+            scale: 0.9,
+            opacity: 0,
+            y: -5
           },
           exitStyle: {
-            y: -10,
-            opacity: 0
+            scale: 0.95,
+            opacity: 0,
+            y: -3
           },
-          transition: ["quicker", {
-            opacity: {
-              overshootClamping: !0
-            }
-          }],
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
+          transition: "menu",
+          elevation: "$3",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Arrow, {
+            size: "$4",
+            borderWidth: 1,
+            borderColor: "$borderColor"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
             onSelect,
+            style: {
+              paddingHorizontal: 8,
+              paddingVertical: 5,
+              borderRadius: 4
+            },
+            hoverStyle: {
+              bg: "$backgroundHover"
+            },
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
               children: "About Notes"
             })
-          }, "about-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Group, {
-            backgroundColor: "transparent",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
-              onSelect,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
-                children: "Settings"
-              })
-            }, "settings"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Item, {
-              onSelect,
-              justify: "space-between",
-              textValue: "Calendar",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
-                children: "Calendar"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemIcon, {
-                androidIconName: "ic_menu_today",
-                ios: {
-                  name: "calendar",
-                  hierarchicalColor: "#000",
-                  pointSize: 20
-                },
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.Calendar, {
-                  color: "gray",
-                  size: 14
-                })
-              })]
-            }, "accounts")]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Group, {
-            backgroundColor: "transparent",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
-              onSelect,
-              disabled: !0,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
+          }, "about-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
+            onSelect,
+            style: {
+              paddingHorizontal: 8,
+              paddingVertical: 5,
+              borderRadius: 4
+            },
+            hoverStyle: {
+              bg: "$backgroundHover"
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
+              children: "Settings"
+            })
+          }, "settings"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Item, {
+            onSelect,
+            justify: "space-between",
+            textValue: "Calendar",
+            style: {
+              paddingHorizontal: 8,
+              paddingVertical: 5,
+              borderRadius: 4
+            },
+            hoverStyle: {
+              bg: "$backgroundHover"
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
+              children: "Calendar"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemIcon, {
+              androidIconName: "ic_menu_today",
+              ios: {
+                name: "calendar",
+                hierarchicalColor: "#000",
+                pointSize: 20
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.Calendar, {
                 color: "gray",
-                children: "locked notes"
-              })
-            }, "close-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
-              onSelect,
-              destructive: !0,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
-                color: "red",
-                children: "Delete all"
+                size: 14
               })
-            }, "delete-all")]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Sub, {
-            placement: "right-start",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.SubTrigger, {
+            })]
+          }, "accounts"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
+            onSelect,
+            disabled: !0,
+            style: {
+              paddingHorizontal: 8,
+              paddingVertical: 5,
+              borderRadius: 4
+            },
+            hoverStyle: {
+              bg: "$backgroundHover"
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
+              color: "gray",
+              children: "Locked Notes"
+            })
+          }, "close-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Item, {
+            onSelect,
+            destructive: !0,
+            style: {
+              paddingHorizontal: 8,
+              paddingVertical: 5,
+              borderRadius: 4
+            },
+            hoverStyle: {
+              bg: "$backgroundHover"
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
+              color: "red",
+              children: "Delete all"
+            })
+          }, "delete-all"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Sub, {
+            open: subMenuOpen,
+            placement: isTouchDevice ? "bottom" : "right-start",
+            onOpenChange: setSubMenuOpen,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.SubTrigger, {
               justify: "space-between",
               textValue: "Actions",
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
-                  children: "Actions"
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronRight, {
-                  size: "$1"
-                })]
-              })
+              style: {
+                paddingHorizontal: 8,
+                paddingVertical: 5,
+                borderRadius: 4
+              },
+              hoverStyle: {
+                bg: "$backgroundHover"
+              },
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.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_menu.Menu.Portal, {
               zIndex: 200,
               children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.SubContent, {
                 enterStyle: {
-                  y: -10,
-                  opacity: 0
+                  scale: 0.9,
+                  opacity: 0,
+                  x: -5
                 },
                 exitStyle: {
-                  y: -10,
-                  opacity: 0
+                  scale: 0.95,
+                  opacity: 0,
+                  x: -3
                 },
-                transition: ["quicker", {
-                  opacity: {
-                    overshootClamping: !0
-                  }
-                }],
-                px: 0,
+                transition: "menu",
+                transformOrigin: "left top",
+                elevation: "$3",
+                minW: 160,
+                bg: "$background",
+                p: "$1.5",
+                borderWidth: 1,
+                borderColor: "$borderColor",
                 children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Label, {
-                  fontSize: "$1",
+                  color: "$color10",
+                  fontWeight: "400",
+                  fontSize: 14,
+                  alignSelf: "flex-start",
+                  style: {
+                    paddingHorizontal: 8,
+                    paddingVertical: 5
+                  },
                   children: "Note settings"
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Item, {
                   onSelect,
                   textValue: "Create note",
-                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemTitle, {
+                  justify: "space-between",
+                  style: {
+                    paddingHorizontal: 8,
+                    paddingVertical: 5,
+                    borderRadius: 4
+                  },
+                  hoverStyle: {
+                    bg: "$backgroundHover"
+                  },
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
                     children: "Create note"
-                  })
-                }, "create-note"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemIcon, {
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.FilePlus, {
+                      size: 14,
+                      color: "$color10"
+                    })
+                  })]
+                }, "create-note"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Item, {
                   onSelect,
-                  textValue: "Create note",
-                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemTitle, {
+                  textValue: "Delete all notes",
+                  justify: "space-between",
+                  style: {
+                    paddingHorizontal: 8,
+                    paddingVertical: 5,
+                    borderRadius: 4
+                  },
+                  hoverStyle: {
+                    bg: "$backgroundHover"
+                  },
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
                     children: "Delete all notes"
-                  })
-                }, "delete-all"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemIcon, {
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.Trash2, {
+                      size: 14,
+                      color: "$color10"
+                    })
+                  })]
+                }, "delete-all"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.Item, {
                   onSelect,
                   textValue: "Sync notes",
-                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemTitle, {
+                  justify: "space-between",
+                  style: {
+                    paddingHorizontal: 8,
+                    paddingVertical: 5,
+                    borderRadius: 4
+                  },
+                  hoverStyle: {
+                    bg: "$backgroundHover"
+                  },
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
                     children: "Sync notes"
-                  })
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemIcon, {
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.RefreshCw, {
+                      size: 14,
+                      color: "$color10"
+                    })
+                  })]
                 }, "sync-all")]
               })
             })]
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.CheckboxItem, {
             checked: bookmarksChecked,
             onCheckedChange: setBookmarksChecked,
-            gap: "$2",
+            justify: "space-between",
+            style: {
+              paddingHorizontal: 8,
+              paddingVertical: 5,
+              borderRadius: 4
+            },
+            hoverStyle: {
+              bg: "$backgroundHover"
+            },
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
               children: "Mark as read"
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemIndicator, {
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.Check, {
-                size: "$1"
+                size: 12,
+                color: "$color10"
               })
             })]
           }, "show-hidden"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_menu.Menu.CheckboxItem, {
             checked: native,
             onCheckedChange: setNative,
-            gap: "$2",
+            justify: "space-between",
+            style: {
+              paddingHorizontal: 8,
+              paddingVertical: 5,
+              borderRadius: 4
+            },
+            hoverStyle: {
+              bg: "$backgroundHover"
+            },
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemTitle, {
               children: "Enable Native"
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.ItemIndicator, {
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons.Check, {
-                size: "$1"
+                size: 12,
+                color: "$color10"
               })
             })]
-          }, "show-other-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menu.Menu.Arrow, {
-            size: "$2"
-          })]
+          }, "show-other-notes")]
         })
       })]
     })