@tamagui/demos 2.0.0-1768326993354 → 2.0.0-1768530912818

package/dist/cjs/AccordionDemo.cjs

@@ -33,6 +33,7 @@ function AccordionDemo() {
     type: "multiple",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, {
       value: "a1",
+      mb: -1,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Trigger, {
         flexDirection: "row",
         justify: "space-between",

package/dist/cjs/AccordionDemo.js

@@ -20,7 +20,7 @@ module.exports = __toCommonJS(AccordionDemo_exports);
 var import_lucide_icons = require("@tamagui/lucide-icons"), import_tamagui = require("tamagui"), import_jsx_runtime = require("react/jsx-runtime");
 function AccordionDemo() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion, { overflow: "hidden", width: "$20", type: "multiple", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, { value: "a1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, { value: "a1", mb: -1, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Trigger, { flexDirection: "row", justify: "space-between", children: ({
         open
       }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [

package/dist/cjs/AccordionDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/AccordionDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B,kCAC5B,iBAA6C,oBAYjC;AAVL,SAAS,gBAAgB;AAC9B,SACE,6CAAC,4BAAU,UAAS,UAAS,OAAM,OAAM,MAAK,YAC5C;AAAA,iDAAC,yBAAU,MAAV,EAAe,OAAM,MACpB;AAAA,kDAAC,yBAAU,SAAV,EAAkB,eAAc,OAAM,SAAQ,iBAC5C,WAAC;AAAA,QACA;AAAA,MACF,MAGE,4EACE;AAAA,oDAAC,4BAAU,mCAAqB;AAAA,QAChC,4CAAC,yBAAO,aAAW,IAAC,YAAW,SAAQ,QAAQ,OAAO,WAAW,QAC/D,sDAAC,mCAAY,MAAK,MAAK,OAAM,UAAS,GACxC;AAAA,SACF,GAEJ;AAAA,MACA,4CAAC,yBAAU,gBAAV,EAAyB,YAAW,UACnC,sDAAC,yBAAU,SAAV,EAAkB,YAAW,UAAS,WAAW,EAAE,SAAS,EAAE,GAC7D,sDAAC,4BAAU,wJAGX,GACF,GACF;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAU,MAAV,EAAe,OAAM,MACpB;AAAA,kDAAC,yBAAU,SAAV,EAAkB,eAAc,OAAM,SAAQ,iBAC5C,WAAC;AAAA,QACA;AAAA,MACF,MAGE,4EACE;AAAA,oDAAC,4BAAU,2BAAa;AAAA,QACxB,4CAAC,yBAAO,aAAW,IAAC,YAAW,SAAQ,QAAQ,OAAO,WAAW,QAC/D,sDAAC,mCAAY,MAAK,MAAK,OAAM,UAAS,GACxC;AAAA,SACF,GAEJ;AAAA,MACA,4CAAC,yBAAU,gBAAV,EAAyB,YAAW,UACnC,sDAAC,yBAAU,SAAV,EAAkB,YAAW,UAAS,WAAW,EAAE,SAAS,EAAE,GAC7D,sDAAC,4BAAU,qJAGX,GACF,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B,kCAC5B,iBAA6C,oBAajC;AAXL,SAAS,gBAAgB;AAC9B,SACE,6CAAC,4BAAU,UAAS,UAAS,OAAM,OAAM,MAAK,YAE5C;AAAA,iDAAC,yBAAU,MAAV,EAAe,OAAM,MAAK,IAAI,IAC7B;AAAA,kDAAC,yBAAU,SAAV,EAAkB,eAAc,OAAM,SAAQ,iBAC5C,WAAC;AAAA,QACA;AAAA,MACF,MAGE,4EACE;AAAA,oDAAC,4BAAU,mCAAqB;AAAA,QAChC,4CAAC,yBAAO,aAAW,IAAC,YAAW,SAAQ,QAAQ,OAAO,WAAW,QAC/D,sDAAC,mCAAY,MAAK,MAAK,OAAM,UAAS,GACxC;AAAA,SACF,GAEJ;AAAA,MACA,4CAAC,yBAAU,gBAAV,EAAyB,YAAW,UACnC,sDAAC,yBAAU,SAAV,EAAkB,YAAW,UAAS,WAAW,EAAE,SAAS,EAAE,GAC7D,sDAAC,4BAAU,wJAGX,GACF,GACF;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAU,MAAV,EAAe,OAAM,MACpB;AAAA,kDAAC,yBAAU,SAAV,EAAkB,eAAc,OAAM,SAAQ,iBAC5C,WAAC;AAAA,QACA;AAAA,MACF,MAGE,4EACE;AAAA,oDAAC,4BAAU,2BAAa;AAAA,QACxB,4CAAC,yBAAO,aAAW,IAAC,YAAW,SAAQ,QAAQ,OAAO,WAAW,QAC/D,sDAAC,mCAAY,MAAK,MAAK,OAAM,UAAS,GACxC;AAAA,SACF,GAEJ;AAAA,MACA,4CAAC,yBAAU,gBAAV,EAAyB,YAAW,UACnC,sDAAC,yBAAU,SAAV,EAAkB,YAAW,UAAS,WAAW,EAAE,SAAS,EAAE,GAC7D,sDAAC,4BAAU,qJAGX,GACF,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/AccordionDemo.native.js

@@ -33,8 +33,10 @@ function AccordionDemo() {
     overflow: "hidden",
     width: "$20",
     type: "multiple",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, {
+    children: [/* negative margin prevents double border between items */
+    /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Item, {
       value: "a1",
+      mb: -1,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Trigger, {
         flexDirection: "row",
         justify: "space-between",

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AccordionDemo_exports","__export","AccordionDemo","module","exports","import_jsx_runtime","require","import_lucide_icons","import_tamagui","jsxs","Accordion","overflow","width","type","children","Item","jsx","Trigger","flexDirection","justify","param","open","Fragment","Paragraph","Square","transparent"],"sources":["../../src/AccordionDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAA4B,CAAAK,qBAAA;AAGrB,IAAAK,kBAAS,GAAgBC,OAAA;EAAAC,mBAAA,GAAAD,OAAA;EAAAE,cAAA,GAAAF,OAAA;AAC9B,SACEJ,cAAA;EACE,0BAAAG,kBAAA,CAAAI,IAAC,EAAAD,cAAA,CAAAE,SAAU,EAAV;IACCC,QAAA;IACIC,KACA;IAAAC,IACF,YAGE;IACEC,QAAA,GAAgC,eAChC,IAAAT,kBAAA,CAAAI,IAAA,EAAAD,cAAC,CAAAE,SAAA,CAAAK,IAAO;MAERhB,KAGN;MACAe,QAAA,GAQF,mBAAAT,kBAAA,CAAAW,GAAA,EAAAR,cAAA,CAAAE,SAAA,CAAAO,OAAA;QAEAC,aAAA;QACEC,OAAA;QAEIL,QAAA,WAAAA,CAAAM,KAAA;UAIA;YAAAC;UAAA,IAAAD,KAAA;UACE,0BAAAf,kBAAC,CAAAI,IAAA,EAAAJ,kBAAU,CAAAiB,QAAA;YACXR,QAAA,GAKN,mBAAAT,kBAAA,CAAAW,GAAA,EAAAR,cAAA,CAAAe,SAAA;cACAT,QAAA;YAQF,IACF,mBAAAT,kBAAA,CAAAW,GAAA,EAAAR,cAAA,CAAAgB,MAAA;cAEJC,WAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AccordionDemo_exports","__export","AccordionDemo","module","exports","import_jsx_runtime","require","import_lucide_icons","import_tamagui","jsxs","Accordion","overflow","width","type","children","Item","mb","jsx","Trigger","flexDirection","justify","param","open","Fragment","Paragraph"],"sources":["../../src/AccordionDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAA4B,CAAAK,qBAAA;AAGrB,IAAAK,kBAAS,GAAgBC,OAAA;EAAAC,mBAAA,GAAAD,OAAA;EAAAE,cAAA,GAAAF,OAAA;AAC9B,SACEJ,cAAA;EAEE,0BAAAG,kBAAA,CAAAI,IAAC,EAAAD,cAAA,CAAAE,SAAU,EAAV;IACCC,QAAA;IACIC,KACA;IAAAC,IACF,YAGE;IACEC,QAAA,GAAgC;IAGhC,eAGN,IAAAT,kBAAA,CAAAI,IAAA,EAAAD,cAAA,CAAAE,SAAA,CAAAK,IAAA;MACAhB,KAAA;MAQFiB,EAAA;MAEAF,QAAA,GACE,mBAAAT,kBAAA,CAAAY,GAAC,EAAAT,cAAA,CAAAE,SAAU,CAAAQ,OAAQ;QAEfC,aAAA;QAIAC,OAAA;QACEN,QAAA,WAAAA,CAAAO,KAAA;UACA;YAAAC;UAAA,IAAAD,KAAA;UAKN,0BAAAhB,kBAAA,CAAAI,IAAA,EAAAJ,kBAAA,CAAAkB,QAAA;YACAT,QAAA,GAQF,mBAAAT,kBAAA,CAAAY,GAAA,EAAAT,cAAA,CAAAgB,SAAA;cACFV,QAAA;YAEJ,I","ignoreList":[]}

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")]
       })
     })]
   });