@tamagui/demos 2.0.0-1768427228811 → 2.0.0-1768530912818

package/dist/cjs/ContextMenuDemo.cjs

@@ -39,20 +39,6 @@ var import_context_menu = require("@tamagui/context-menu"),
   import_react = __toESM(require("react"), 1),
   import_tamagui = require("tamagui"),
   import_jsx_runtime = require("react/jsx-runtime");
-const Item = (0, import_tamagui.styled)(import_context_menu.ContextMenu.Item, {
-    py: 4,
-    hoverStyle: {
-      bg: "$color2"
-    },
-    pressStyle: {
-      bg: "$color3"
-    }
-  }),
-  ItemTitle = (0, import_tamagui.styled)(import_context_menu.ContextMenu.ItemTitle, {
-    color: "$color11"
-  });
-Item.displayName = "Item";
-ItemTitle.displayName = "ItemTitle";
 function ContextMenuDemo() {
   const [bookmarksChecked, setBookmarksChecked] = import_react.default.useState(!0),
     [native, setNative] = import_react.default.useState(!0),
@@ -62,7 +48,8 @@ function ContextMenuDemo() {
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu, {
     allowFlip: !0,
     native,
-    placement: "right-start",
+    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.Text, {
@@ -73,25 +60,28 @@ function ContextMenuDemo() {
     }), /* @__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, {
-        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
         },
-        elevate: !0,
-        transition: ["quick", {
-          opacity: {
-            overshootClamping: !0
-          }
-        }],
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Preview, {
+        elevation: "$3",
+        transition: "menu",
+        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",
@@ -106,98 +96,175 @@ function ContextMenuDemo() {
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
           onSelect,
+          style: {
+            paddingHorizontal: 8,
+            paddingVertical: 5,
+            borderRadius: 4
+          },
+          hoverStyle: {
+            bg: "$backgroundHover"
+          },
           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.jsxs)(import_context_menu.ContextMenu.Group, {
-          backgroundColor: "transparent",
-          children: [/* @__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: "Calender",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                children: "Calender"
-              })
-            }), /* @__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: "$1"
-              })
-            })]
-          }, "accounts")]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.Group, {
-          backgroundColor: "transparent",
-          children: [/* @__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, {
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                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"
+        }, "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,
+          style: {
+            paddingHorizontal: 8,
+            paddingVertical: 5,
+            borderRadius: 4
+          },
+          hoverStyle: {
+            bg: "$backgroundHover"
+          },
+          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",
+          style: {
+            paddingHorizontal: 8,
+            paddingVertical: 5,
+            borderRadius: 4
+          },
+          hoverStyle: {
+            bg: "$backgroundHover"
+          },
+          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
             })
-          }, "delete-all")]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.Sub, {
+          })]
+        }, "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",
+          style: {
+            paddingHorizontal: 8,
+            paddingVertical: 5,
+            borderRadius: 4
+          },
+          hoverStyle: {
+            bg: "$backgroundHover"
+          },
+          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,
+          style: {
+            paddingHorizontal: 8,
+            paddingVertical: 5,
+            borderRadius: 4
+          },
+          hoverStyle: {
+            bg: "$backgroundHover"
+          },
+          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",
+            style: {
+              paddingHorizontal: 8,
+              paddingVertical: 5,
+              borderRadius: 4
+            },
+            hoverStyle: {
+              bg: "$backgroundHover"
+            },
             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: "$1"
+              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: {
-                y: -10,
-                opacity: 0
+                scale: 0.9,
+                opacity: 0,
+                x: -5
               },
               exitStyle: {
-                y: -10,
-                opacity: 0
+                scale: 0.95,
+                opacity: 0,
+                x: -3
               },
-              transition: ["quick", {
-                opacity: {
-                  overshootClamping: !0
-                }
-              }],
-              px: 0,
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
+              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_context_menu.ContextMenu.Label, {
+                color: "$color10",
+                fontWeight: "400",
+                fontSize: 14,
+                alignSelf: "flex-start",
+                style: {
+                  paddingHorizontal: 8,
+                  paddingVertical: 5
+                },
+                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)(ItemTitle, {
+                style: {
+                  paddingHorizontal: 8,
+                  paddingVertical: 5,
+                  borderRadius: 4
+                },
+                hoverStyle: {
+                  bg: "$backgroundHover"
+                },
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
                   children: "Create note"
                 })
-              }, "create-note"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
+              }, "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)(ItemTitle, {
+                style: {
+                  paddingHorizontal: 8,
+                  paddingVertical: 5,
+                  borderRadius: 4
+                },
+                hoverStyle: {
+                  bg: "$backgroundHover"
+                },
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
                   children: "Delete all notes"
                 })
-              }, "delete-all"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Item, {
+              }, "delete-all"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Item, {
                 onSelect,
                 textValue: "Sync notes",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemTitle, {
+                style: {
+                  paddingHorizontal: 8,
+                  paddingVertical: 5,
+                  borderRadius: 4
+                },
+                hoverStyle: {
+                  bg: "$backgroundHover"
+                },
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.ItemTitle, {
                   children: "Sync notes"
                 })
               }, "sync-all")]
@@ -208,30 +275,44 @@ function ContextMenuDemo() {
         }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.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_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: "$1"
+              size: 12,
+              color: "$color10"
             })
           })]
         }, "show-hidden"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_context_menu.ContextMenu.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_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: "$1"
+              size: 12,
+              color: "$color10"
             })
           })]
-        }, "show-other-notes"), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context_menu.ContextMenu.Arrow, {
-          size: "$2"
-        })]
+        }, "show-other-notes")]
       })
     })]
   });