From a26ed6ce7fe359edf09daf61f4ce7eb6b7dded48 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 1 Apr 2024 17:45:41 +0100
Subject: [PATCH 1/7] refactor: menu prefer explicit state for options

---
 .changeset/strong-dragons-smile.md            |   9 ++
 .xstate/menu.js                               |  21 ++--
 examples/next-ts/pages/context-menu.tsx       |   8 +-
 examples/next-ts/pages/menu-options.tsx       |  55 ++++++---
 examples/next-ts/pages/menu.tsx               |   8 +-
 examples/next-ts/pages/nested-menu.tsx        |  10 +-
 examples/nuxt-ts/pages/context-menu.vue       |   8 +-
 examples/nuxt-ts/pages/menu-options.vue       |  55 +++++----
 examples/nuxt-ts/pages/menu.vue               |   8 +-
 examples/solid-ts/src/pages/context-menu.tsx  |   8 +-
 examples/solid-ts/src/pages/menu-options.tsx  |  77 +++++++-----
 examples/solid-ts/src/pages/menu.tsx          |   8 +-
 examples/solid-ts/src/pages/nested-menu.tsx   |  10 +-
 .../svelte-ts/src/routes/context-menu.svelte  |   8 +-
 examples/vue-ts/src/pages/context-menu.tsx    |   8 +-
 examples/vue-ts/src/pages/menu-options.tsx    |  67 ++++++----
 examples/vue-ts/src/pages/menu.tsx            |   8 +-
 examples/vue-ts/src/pages/nested-menu.tsx     |  17 +--
 packages/machines/menu/src/menu.connect.ts    |  29 ++---
 packages/machines/menu/src/menu.dom.ts        |   8 +-
 packages/machines/menu/src/menu.machine.ts    | 115 +++++++-----------
 packages/machines/menu/src/menu.types.ts      |  45 +++----
 shared/src/data.ts                            |  42 +++----
 starters/react/components/menu.tsx            |   2 +-
 website/components/machines/context-menu.tsx  |   2 +-
 website/components/machines/menu.tsx          |   3 +-
 website/components/machines/nested-menu.tsx   |   4 +-
 website/data/components/menu.mdx              |  19 +--
 .../data/snippets/react/menu/context-menu.mdx |  16 +--
 .../data/snippets/react/menu/nested-menu.mdx  |  14 +--
 .../data/snippets/react/menu/option-items.mdx |  62 ++++++----
 website/data/snippets/react/menu/usage.mdx    |  13 +-
 .../data/snippets/solid/menu/context-menu.mdx |  15 +--
 .../data/snippets/solid/menu/nested-menu.mdx  |  24 ++--
 .../data/snippets/solid/menu/option-items.mdx |  83 ++++++++-----
 website/data/snippets/solid/menu/usage.mdx    |  12 +-
 .../snippets/vue-jsx/menu/context-menu.mdx    |  15 +--
 .../snippets/vue-jsx/menu/nested-menu.mdx     |  22 ++--
 .../snippets/vue-jsx/menu/option-items.mdx    |  79 ++++++------
 website/data/snippets/vue-jsx/menu/usage.mdx  |  12 +-
 .../snippets/vue-sfc/menu/context-menu.mdx    |   8 +-
 .../snippets/vue-sfc/menu/nested-menu.mdx     |  14 +--
 .../snippets/vue-sfc/menu/option-items.mdx    |  75 +++++++-----
 website/data/snippets/vue-sfc/menu/usage.mdx  |  10 +-
 website/data/snippets/website/snippet.mdx     |   7 +-
 45 files changed, 590 insertions(+), 553 deletions(-)
 create mode 100644 .changeset/strong-dragons-smile.md

diff --git a/.changeset/strong-dragons-smile.md b/.changeset/strong-dragons-smile.md
new file mode 100644
index 0000000000..cdb850cd5a
--- /dev/null
+++ b/.changeset/strong-dragons-smile.md
@@ -0,0 +1,9 @@
+---
+"@zag-js/menu": minor
+---
+
+> Breaking changes to the menu component
+
+- Removed `value` and `onValueChange` in favor of using explicit state to manage option items.
+- Prefer `value` over `id` in `getItemProps` and `getOptionItemProps` for consistency with other machine.
+- `onSelect` now provides `value` not `id` in its details.
diff --git a/.xstate/menu.js b/.xstate/menu.js
index 006e177e84..66a8200246 100644
--- a/.xstate/menu.js
+++ b/.xstate/menu.js
@@ -79,11 +79,8 @@ const fetchMachine = createMachine({
       target: "closed",
       actions: "invokeOnClose"
     }],
-    RESTORE_FOCUS: {
-      actions: "restoreFocus"
-    },
-    "VALUE.SET": {
-      actions: ["setOptionValue", "invokeOnValueChange"]
+    "HIGHLIGHTED.RESTORE": {
+      actions: "restoreHighlightedItem"
     },
     "HIGHLIGHTED.SET": {
       actions: "setHighlightedItem"
@@ -190,14 +187,14 @@ const fetchMachine = createMachine({
           actions: ["invokeOnClose"]
         }, {
           target: "closed",
-          actions: ["focusParentMenu", "restoreParentFocus", "invokeOnClose"]
+          actions: ["focusParentMenu", "restoreParentHiglightedItem", "invokeOnClose"]
         }]
       },
       on: {
         "CONTROLLED.OPEN": "open",
         "CONTROLLED.CLOSE": {
           target: "closed",
-          actions: ["focusParentMenu", "restoreParentFocus"]
+          actions: ["focusParentMenu", "restoreParentHiglightedItem"]
         },
         // don't invoke on open here since the menu is still open (we're only keeping it open)
         MENU_POINTERENTER: {
@@ -209,7 +206,7 @@ const fetchMachine = createMachine({
           actions: "invokeOnClose"
         }, {
           target: "closed",
-          actions: ["focusParentMenu", "restoreParentFocus"]
+          actions: ["focusParentMenu", "restoreParentHiglightedItem"]
         }]
       }
     },
@@ -338,7 +335,7 @@ const fetchMachine = createMachine({
           cond: "!suspendPointer",
           actions: ["highlightItem", "focusMenu"]
         }, {
-          actions: "setHoveredItem"
+          actions: "setLastHighlightedItem"
         }],
         ITEM_POINTERLEAVE: {
           cond: "!suspendPointer && !isTriggerItem",
@@ -348,16 +345,16 @@ const fetchMachine = createMachine({
         // == grouped ==
         {
           cond: "!isTriggerItemHighlighted && !isHighlightedItemEditable && closeOnSelect && isOpenControlled",
-          actions: ["invokeOnSelect", "changeOptionValue", "invokeOnValueChange", "closeRootMenu", "invokeOnClose"]
+          actions: ["invokeOnSelect", "setOptionState", "closeRootMenu", "invokeOnClose"]
         }, {
           cond: "!isTriggerItemHighlighted && !isHighlightedItemEditable && closeOnSelect",
           target: "closed",
-          actions: ["invokeOnSelect", "changeOptionValue", "invokeOnValueChange", "closeRootMenu", "invokeOnClose"]
+          actions: ["invokeOnSelect", "setOptionState", "closeRootMenu", "invokeOnClose"]
         },
         //
         {
           cond: "!isTriggerItemHighlighted && !isHighlightedItemEditable",
-          actions: ["invokeOnSelect", "changeOptionValue", "invokeOnValueChange"]
+          actions: ["invokeOnSelect", "setOptionState"]
         }, {
           actions: "highlightItem"
         }],
diff --git a/examples/next-ts/pages/context-menu.tsx b/examples/next-ts/pages/context-menu.tsx
index e367f3e94c..f40c7a4f52 100644
--- a/examples/next-ts/pages/context-menu.tsx
+++ b/examples/next-ts/pages/context-menu.tsx
@@ -21,10 +21,10 @@ export default function Page() {
         <Portal>
           <div {...api.positionerProps}>
             <ul {...api.contentProps}>
-              <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-              <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-              <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-              <li {...api.getItemProps({ id: "export" })}>Export...</li>
+              <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+              <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+              <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+              <li {...api.getItemProps({ value: "export" })}>Export...</li>
             </ul>
           </div>
         </Portal>
diff --git a/examples/next-ts/pages/menu-options.tsx b/examples/next-ts/pages/menu-options.tsx
index 3556fb79c4..051d2c21dc 100644
--- a/examples/next-ts/pages/menu-options.tsx
+++ b/examples/next-ts/pages/menu-options.tsx
@@ -1,7 +1,7 @@
 import * as menu from "@zag-js/menu"
 import { normalizeProps, Portal, useMachine } from "@zag-js/react"
-import { menuOptionData as data, menuControls } from "@zag-js/shared"
-import { useId } from "react"
+import { menuOptionData, menuControls } from "@zag-js/shared"
+import { useId, useState } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -9,17 +9,34 @@ import { useControls } from "../hooks/use-controls"
 export default function Page() {
   const controls = useControls(menuControls)
 
-  const [state, send] = useMachine(
-    menu.machine({
-      id: useId(),
-      value: { order: "", type: [] },
-      onValueChange: console.log,
-    }),
-    { context: controls.context },
-  )
+  const [order, setOrder] = useState("")
+  const [type, setType] = useState<string[]>([])
+
+  const [state, send] = useMachine(menu.machine({ id: useId() }), {
+    context: controls.context,
+  })
 
   const api = menu.connect(state, send, normalizeProps)
 
+  const radios = menuOptionData.order.map((item) => ({
+    type: "radio" as const,
+    name: "order",
+    value: item.value,
+    label: item.label,
+    checked: order === item.value,
+    onCheckedChange: (checked: boolean) => setOrder(checked ? item.value : ""),
+  }))
+
+  const checkboxes = menuOptionData.type.map((item) => ({
+    type: "checkbox" as const,
+    name: "type",
+    value: item.value,
+    label: item.label,
+    checked: type.includes(item.value),
+    onCheckedChange: (checked: boolean) =>
+      setType((prev) => (checked ? [...prev, item.value] : prev.filter((x) => x !== item.value))),
+  }))
+
   return (
     <>
       <main>
@@ -31,22 +48,20 @@ export default function Page() {
           <Portal>
             <div {...api.positionerProps}>
               <div {...api.contentProps}>
-                {data.order.map((item) => {
-                  const opts = { type: "radio", name: "order", value: item.id } as const
+                {radios.map((item) => {
                   return (
-                    <div key={item.id} {...api.getOptionItemProps(opts)}>
-                      <span {...api.getOptionItemIndicatorProps(opts)}>✅</span>
-                      <span {...api.getOptionItemTextProps(opts)}>{item.label}</span>
+                    <div key={item.value} {...api.getOptionItemProps(item)}>
+                      <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                      <span {...api.getOptionItemTextProps(item)}>{item.label}</span>
                     </div>
                   )
                 })}
                 <hr />
-                {data.type.map((item) => {
-                  const opts = { type: "checkbox", name: "type", value: item.id } as const
+                {checkboxes.map((item) => {
                   return (
-                    <div key={item.id} {...api.getOptionItemProps(opts)}>
-                      <span {...api.getOptionItemIndicatorProps(opts)}>✅</span>
-                      <span {...api.getOptionItemTextProps(opts)}>{item.label}</span>
+                    <div key={item.value} {...api.getOptionItemProps(item)}>
+                      <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                      <span {...api.getOptionItemTextProps(item)}>{item.label}</span>
                     </div>
                   )
                 })}
diff --git a/examples/next-ts/pages/menu.tsx b/examples/next-ts/pages/menu.tsx
index b456972b55..7c076ade9d 100644
--- a/examples/next-ts/pages/menu.tsx
+++ b/examples/next-ts/pages/menu.tsx
@@ -24,10 +24,10 @@ export default function Page() {
           <Portal>
             <div {...api.positionerProps}>
               <ul {...api.contentProps}>
-                <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-                <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-                <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-                <li {...api.getItemProps({ id: "export" })}>Export...</li>
+                <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+                <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+                <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+                <li {...api.getItemProps({ value: "export" })}>Export...</li>
               </ul>
             </div>
           </Portal>
diff --git a/examples/next-ts/pages/nested-menu.tsx b/examples/next-ts/pages/nested-menu.tsx
index 0220433590..5f759f1499 100644
--- a/examples/next-ts/pages/nested-menu.tsx
+++ b/examples/next-ts/pages/nested-menu.tsx
@@ -47,9 +47,9 @@ export default function Page() {
             <div {...root.positionerProps}>
               <ul data-testid="menu" {...root.contentProps}>
                 {level1.map((item) => {
-                  const props = item.trigger ? triggerItemProps : root.getItemProps({ id: item.id })
+                  const props = item.trigger ? triggerItemProps : root.getItemProps({ value: item.value })
                   return (
-                    <li key={item.id} data-testid={item.id} {...props}>
+                    <li key={item.value} data-testid={item.value} {...props}>
                       {item.label}
                     </li>
                   )
@@ -62,9 +62,9 @@ export default function Page() {
             <div {...sub.positionerProps}>
               <ul data-testid="more-tools-submenu" {...sub.contentProps}>
                 {level2.map((item) => {
-                  const props = item.trigger ? triggerItem2Props : sub.getItemProps({ id: item.id })
+                  const props = item.trigger ? triggerItem2Props : sub.getItemProps({ value: item.value })
                   return (
-                    <li key={item.id} data-testid={item.id} {...props}>
+                    <li key={item.value} data-testid={item.value} {...props}>
                       {item.label}
                     </li>
                   )
@@ -77,7 +77,7 @@ export default function Page() {
             <div {...sub2.positionerProps}>
               <ul data-testid="open-nested-submenu" {...sub2.contentProps}>
                 {level3.map((item) => (
-                  <li key={item.id} data-testid={item.id} {...sub2.getItemProps({ id: item.id })}>
+                  <li key={item.value} data-testid={item.value} {...sub2.getItemProps({ value: item.value })}>
                     {item.label}
                   </li>
                 ))}
diff --git a/examples/nuxt-ts/pages/context-menu.vue b/examples/nuxt-ts/pages/context-menu.vue
index 798089b9cc..d4cf833a53 100644
--- a/examples/nuxt-ts/pages/context-menu.vue
+++ b/examples/nuxt-ts/pages/context-menu.vue
@@ -18,10 +18,10 @@ const api = computed(() => menu.connect(state.value, send, normalizeProps))
     <Teleport to="body">
       <div v-bind="api.positionerProps">
         <ul v-bind="api.contentProps">
-          <li v-bind="api.getItemProps({ id: 'edit' })">Edit</li>
-          <li v-bind="api.getItemProps({ id: 'duplicate' })">Duplicate</li>
-          <li v-bind="api.getItemProps({ id: 'delete' })">Delete</li>
-          <li v-bind="api.getItemProps({ id: 'export' })">Export...</li>
+          <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>
+          <li v-bind="api.getItemProps({ value: 'duplicate' })">Duplicate</li>
+          <li v-bind="api.getItemProps({ value: 'delete' })">Delete</li>
+          <li v-bind="api.getItemProps({ value: 'export' })">Export...</li>
         </ul>
       </div>
     </Teleport>
diff --git a/examples/nuxt-ts/pages/menu-options.vue b/examples/nuxt-ts/pages/menu-options.vue
index e4ed6c1ebc..fef96cbbd2 100644
--- a/examples/nuxt-ts/pages/menu-options.vue
+++ b/examples/nuxt-ts/pages/menu-options.vue
@@ -1,32 +1,41 @@
 <script setup lang="ts">
 import * as menu from "@zag-js/menu"
-import { menuControls, menuOptionData as data } from "@zag-js/shared"
+import { menuControls, menuOptionData } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 
 const controls = useControls(menuControls)
-const [state, send] = useMachine(
-  menu.machine({
-    id: "1",
-    value: { order: "", type: [] },
-    onValueChange: console.log,
-  }),
-)
+const [state, send] = useMachine(menu.machine({ id: "1" }))
 
 const api = computed(() => menu.connect(state.value, send, normalizeProps))
 
-const radios = data.order.map((item) => ({
-  ...item,
-  type: "radio" as const,
-  name: "order",
-  value: item.id,
-}))
+const orderRef = ref("")
+const typeRef = ref<string[]>([])
+
+const radios = computed(() =>
+  menuOptionData.order.map((item) => ({
+    label: item.label,
+    id: item.value,
+    type: "radio" as const,
+    value: item.value,
+    checked: item.value === orderRef.value,
+    onCheckedChange(v: boolean) {
+      orderRef.value = v ? item.value : ""
+    },
+  })),
+)
 
-const checkboxes = data.type.map((item) => ({
-  ...item,
-  type: "checkbox" as const,
-  name: "type",
-  value: item.id,
-}))
+const checkboxes = computed(() =>
+  menuOptionData.type.map((item) => ({
+    id: item.value,
+    label: item.label,
+    type: "checkbox" as const,
+    value: item.value,
+    checked: typeRef.value.includes(item.value),
+    onCheckedChange(v: boolean) {
+      typeRef.value = v ? [...typeRef.value, item.value] : typeRef.value.filter((x) => x !== item.value)
+    },
+  })),
+)
 </script>
 
 <template>
@@ -36,12 +45,12 @@ const checkboxes = data.type.map((item) => ({
       <Teleport to="body">
         <div v-bind="api.positionerProps">
           <div v-bind="api.contentProps">
-            <div v-for="item in radios" :key="item.id" v-bind="api.getOptionItemProps(item)">
+            <div v-for="item in radios" :key="item.value" v-bind="api.getOptionItemProps(item)">
               <span v-bind="api.getOptionItemIndicatorProps(item)">✅</span>
               <span v-bind="api.getOptionItemTextProps(item)">{{ item.label }}</span>
             </div>
-            <hr />
-            <div v-for="item in checkboxes" :key="item.id" v-bind="api.getOptionItemProps(item)">
+            <hr v-bind="api.separatorProps" />
+            <div v-for="item in checkboxes" :key="item.value" v-bind="api.getOptionItemProps(item)">
               <span v-bind="api.getOptionItemIndicatorProps(item)">✅</span>
               <span v-bind="api.getOptionItemTextProps(item)">{{ item.label }}</span>
             </div>
diff --git a/examples/nuxt-ts/pages/menu.vue b/examples/nuxt-ts/pages/menu.vue
index 215aad6c9c..68bda66cd6 100644
--- a/examples/nuxt-ts/pages/menu.vue
+++ b/examples/nuxt-ts/pages/menu.vue
@@ -17,10 +17,10 @@ const api = computed(() => menu.connect(state.value, send, normalizeProps))
       <Teleport to="body">
         <div v-bind="api.positionerProps">
           <ul v-bind="api.contentProps">
-            <li v-bind="api.getItemProps({ id: 'edit' })">Edit</li>
-            <li v-bind="api.getItemProps({ id: 'duplicate' })">Duplicate</li>
-            <li v-bind="api.getItemProps({ id: 'delete' })">Delete</li>
-            <li v-bind="api.getItemProps({ id: 'export' })">Export...</li>
+            <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>
+            <li v-bind="api.getItemProps({ value: 'duplicate' })">Duplicate</li>
+            <li v-bind="api.getItemProps({ value: 'delete' })">Delete</li>
+            <li v-bind="api.getItemProps({ value: 'export' })">Export...</li>
           </ul>
         </div>
       </Teleport>
diff --git a/examples/solid-ts/src/pages/context-menu.tsx b/examples/solid-ts/src/pages/context-menu.tsx
index 156a51216f..b02f898da4 100644
--- a/examples/solid-ts/src/pages/context-menu.tsx
+++ b/examples/solid-ts/src/pages/context-menu.tsx
@@ -22,10 +22,10 @@ export default function Page() {
         <Portal>
           <div {...api().positionerProps}>
             <ul {...api().contentProps}>
-              <li {...api().getItemProps({ id: "edit" })}>Edit</li>
-              <li {...api().getItemProps({ id: "duplicate" })}>Duplicate</li>
-              <li {...api().getItemProps({ id: "delete" })}>Delete</li>
-              <li {...api().getItemProps({ id: "export" })}>Export...</li>
+              <li {...api().getItemProps({ value: "edit" })}>Edit</li>
+              <li {...api().getItemProps({ value: "duplicate" })}>Duplicate</li>
+              <li {...api().getItemProps({ value: "delete" })}>Delete</li>
+              <li {...api().getItemProps({ value: "export" })}>Export...</li>
             </ul>
           </div>
         </Portal>
diff --git a/examples/solid-ts/src/pages/menu-options.tsx b/examples/solid-ts/src/pages/menu-options.tsx
index 876f28da07..9f2c955a63 100644
--- a/examples/solid-ts/src/pages/menu-options.tsx
+++ b/examples/solid-ts/src/pages/menu-options.tsx
@@ -1,7 +1,7 @@
 import * as menu from "@zag-js/menu"
-import { menuControls, menuOptionData as data } from "@zag-js/shared"
+import { menuControls, menuOptionData } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/solid"
-import { createMemo, createUniqueId, For } from "solid-js"
+import { createMemo, createSignal, createUniqueId, For } from "solid-js"
 import { Portal } from "solid-js/web"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
@@ -10,19 +10,36 @@ import { useControls } from "../hooks/use-controls"
 export default function Page() {
   const controls = useControls(menuControls)
 
-  const [state, send] = useMachine(
-    menu.machine({
-      id: createUniqueId(),
-      value: { order: "", type: [] },
-      onValueChange: console.log,
-    }),
-    {
-      context: controls.context,
-    },
-  )
+  const [order, setOrder] = createSignal("")
+  const [type, setType] = createSignal<string[]>([])
+
+  const [state, send] = useMachine(menu.machine({ id: createUniqueId() }), {
+    context: controls.context,
+  })
 
   const api = createMemo(() => menu.connect(state, send, normalizeProps))
 
+  const radios = createMemo(() =>
+    menuOptionData.order.map((item) => ({
+      type: "radio" as const,
+      value: item.value,
+      label: item.label,
+      checked: order() === item.value,
+      onCheckedChange: (checked: boolean) => setOrder(checked ? item.value : ""),
+    })),
+  )
+
+  const checkboxes = createMemo(() =>
+    menuOptionData.type.map((item) => ({
+      type: "checkbox" as const,
+      value: item.value,
+      label: item.label,
+      checked: type().includes(item.value),
+      onCheckedChange: (checked: boolean) =>
+        setType((prev) => (checked ? [...prev, item.value] : prev.filter((x) => x !== item.value))),
+    })),
+  )
+
   return (
     <>
       <main>
@@ -34,28 +51,22 @@ export default function Page() {
           <Portal>
             <div {...api().positionerProps}>
               <div {...api().contentProps}>
-                <For each={data.order}>
-                  {(item) => {
-                    const opts = { type: "radio", name: "order", value: item.id } as const
-                    return (
-                      <div {...api().getOptionItemProps(opts)}>
-                        <span {...api().getOptionItemIndicatorProps(opts)}>✅</span>
-                        <span {...api().getOptionItemTextProps(opts)}>{item.label}</span>
-                      </div>
-                    )
-                  }}
+                <For each={radios()}>
+                  {(item) => (
+                    <div {...api().getOptionItemProps(item)}>
+                      <span {...api().getOptionItemIndicatorProps(item)}>✅</span>
+                      <span {...api().getOptionItemTextProps(item)}>{item.label}</span>
+                    </div>
+                  )}
                 </For>
-                <hr />
-                <For each={data.type}>
-                  {(item) => {
-                    const opts = { type: "checkbox", name: "type", value: item.id } as const
-                    return (
-                      <div {...api().getOptionItemProps(opts)}>
-                        <span {...api().getOptionItemIndicatorProps(opts)}>✅</span>
-                        <span {...api().getOptionItemTextProps(opts)}>{item.label}</span>
-                      </div>
-                    )
-                  }}
+                <hr {...api().separatorProps} />
+                <For each={checkboxes()}>
+                  {(item) => (
+                    <div {...api().getOptionItemProps(item)}>
+                      <span {...api().getOptionItemIndicatorProps(item)}>✅</span>
+                      <span {...api().getOptionItemTextProps(item)}>{item.label}</span>
+                    </div>
+                  )}
                 </For>
               </div>
             </div>
diff --git a/examples/solid-ts/src/pages/menu.tsx b/examples/solid-ts/src/pages/menu.tsx
index b38401fa4c..79aeb5e9ac 100644
--- a/examples/solid-ts/src/pages/menu.tsx
+++ b/examples/solid-ts/src/pages/menu.tsx
@@ -26,10 +26,10 @@ export default function Page() {
           <Portal>
             <div {...api().positionerProps}>
               <ul {...api().contentProps}>
-                <li {...api().getItemProps({ id: "edit" })}>Edit</li>
-                <li {...api().getItemProps({ id: "duplicate" })}>Duplicate</li>
-                <li {...api().getItemProps({ id: "delete" })}>Delete</li>
-                <li {...api().getItemProps({ id: "export" })}>Export...</li>
+                <li {...api().getItemProps({ value: "edit" })}>Edit</li>
+                <li {...api().getItemProps({ value: "duplicate" })}>Duplicate</li>
+                <li {...api().getItemProps({ value: "delete" })}>Delete</li>
+                <li {...api().getItemProps({ value: "export" })}>Export...</li>
               </ul>
             </div>
           </Portal>
diff --git a/examples/solid-ts/src/pages/nested-menu.tsx b/examples/solid-ts/src/pages/nested-menu.tsx
index 5da09e72b0..956cb2d315 100644
--- a/examples/solid-ts/src/pages/nested-menu.tsx
+++ b/examples/solid-ts/src/pages/nested-menu.tsx
@@ -46,10 +46,10 @@ export default function Page() {
                 <For each={level1}>
                   {(item) => {
                     const props = createMemo(() =>
-                      item.trigger ? triggerItemProps() : root().getItemProps({ id: item.id }),
+                      item.trigger ? triggerItemProps() : root().getItemProps({ value: item.value }),
                     )
                     return (
-                      <li data-testid={item.id} {...props()}>
+                      <li data-testid={item.value} {...props()}>
                         {item.label}
                       </li>
                     )
@@ -65,10 +65,10 @@ export default function Page() {
                 <For each={level2}>
                   {(item) => {
                     const props = createMemo(() =>
-                      item.trigger ? triggerItem2Props() : sub().getItemProps({ id: item.id }),
+                      item.trigger ? triggerItem2Props() : sub().getItemProps({ value: item.value }),
                     )
                     return (
-                      <li data-testid={item.id} {...props}>
+                      <li data-testid={item.value} {...props}>
                         {item.label}
                       </li>
                     )
@@ -83,7 +83,7 @@ export default function Page() {
               <ul data-testid="open-nested-submenu" {...sub2().contentProps}>
                 <For each={level3}>
                   {(item) => (
-                    <li data-testid={item.id} {...sub2().getItemProps({ id: item.id })}>
+                    <li data-testid={item.value} {...sub2().getItemProps({ value: item.value })}>
                       {item.label}
                     </li>
                   )}
diff --git a/examples/svelte-ts/src/routes/context-menu.svelte b/examples/svelte-ts/src/routes/context-menu.svelte
index 29840b17d6..a3650d4615 100644
--- a/examples/svelte-ts/src/routes/context-menu.svelte
+++ b/examples/svelte-ts/src/routes/context-menu.svelte
@@ -17,10 +17,10 @@
   <div {...api.contextTriggerProps}>Right Click here</div>
   <div use:portal {...api.positionerProps}>
     <ul {...api.contentProps}>
-      <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-      <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-      <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-      <li {...api.getItemProps({ id: "export" })}>Export...</li>
+      <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+      <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+      <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+      <li {...api.getItemProps({ value: "export" })}>Export...</li>
     </ul>
   </div>
 </main>
diff --git a/examples/vue-ts/src/pages/context-menu.tsx b/examples/vue-ts/src/pages/context-menu.tsx
index 73307de925..447e38c225 100644
--- a/examples/vue-ts/src/pages/context-menu.tsx
+++ b/examples/vue-ts/src/pages/context-menu.tsx
@@ -25,10 +25,10 @@ export default defineComponent({
             <Teleport to="body">
               <div {...api.positionerProps}>
                 <ul {...api.contentProps}>
-                  <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-                  <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-                  <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-                  <li {...api.getItemProps({ id: "export" })}>Export...</li>
+                  <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+                  <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+                  <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+                  <li {...api.getItemProps({ value: "export" })}>Export...</li>
                 </ul>
               </div>
             </Teleport>
diff --git a/examples/vue-ts/src/pages/menu-options.tsx b/examples/vue-ts/src/pages/menu-options.tsx
index 4dc8d0a0bd..08e6907667 100644
--- a/examples/vue-ts/src/pages/menu-options.tsx
+++ b/examples/vue-ts/src/pages/menu-options.tsx
@@ -2,7 +2,7 @@ import * as menu from "@zag-js/menu"
 import { menuControls, menuOptionData as data } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 import { useControls } from "../hooks/use-controls"
-import { computed, defineComponent, Teleport } from "vue"
+import { computed, defineComponent, ref, Teleport } from "vue"
 import { StateVisualizer } from "../components/state-visualizer"
 
 import { Toolbar } from "../components/toolbar"
@@ -11,16 +11,35 @@ export default defineComponent({
   name: "Menu",
   setup() {
     const controls = useControls(menuControls)
-    const [state, send] = useMachine(
-      menu.machine({
-        id: "1",
-        value: { order: "", type: [] },
-        onValueChange: console.log,
-      }),
-    )
+
+    const orderRef = ref("")
+    const typeRef = ref<string[]>([])
+
+    const [state, send] = useMachine(menu.machine({ id: "1" }))
 
     const apiRef = computed(() => menu.connect(state.value, send, normalizeProps))
 
+    const radios = computed(() =>
+      data.order.map((item) => ({
+        type: "radio" as const,
+        value: item.value,
+        label: item.label,
+        checked: orderRef.value === item.value,
+        onCheckedChange: (checked: boolean) => (orderRef.value = checked ? item.value : ""),
+      })),
+    )
+
+    const checkboxes = computed(() =>
+      data.type.map((item) => ({
+        type: "checkbox" as const,
+        value: item.value,
+        label: item.label,
+        checked: typeRef.value.includes(item.value),
+        onCheckedChange: (checked: boolean) =>
+          (typeRef.value = checked ? [...typeRef.value, item.value] : typeRef.value.filter((x) => x !== item.value)),
+      })),
+    )
+
     return () => {
       const api = apiRef.value
       return (
@@ -33,25 +52,19 @@ export default defineComponent({
               <Teleport to="body">
                 <div {...api.positionerProps}>
                   <div {...api.contentProps}>
-                    {data.order.map((item) => {
-                      const opts = { type: "radio", name: "order", value: item.id } as const
-                      return (
-                        <div key={item.id} {...api.getOptionItemProps(opts)}>
-                          <span {...api.getOptionItemIndicatorProps(opts)}>✅</span>
-                          <span {...api.getOptionItemTextProps(opts)}>{item.label}</span>
-                        </div>
-                      )
-                    })}
-                    <hr />
-                    {data.type.map((item) => {
-                      const opts = { type: "checkbox", name: "type", value: item.id } as const
-                      return (
-                        <div key={item.id} {...api.getOptionItemProps(opts)}>
-                          <span {...api.getOptionItemIndicatorProps(opts)}>✅</span>
-                          <span {...api.getOptionItemTextProps(opts)}>{item.label}</span>
-                        </div>
-                      )
-                    })}
+                    {radios.value.map((item) => (
+                      <div key={item.value} {...api.getOptionItemProps(item)}>
+                        <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                        <span {...api.getOptionItemTextProps(item)}>{item.label}</span>
+                      </div>
+                    ))}
+                    <hr {...api.separatorProps} />
+                    {checkboxes.value.map((item) => (
+                      <div key={item.value} {...api.getOptionItemProps(item)}>
+                        <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                        <span {...api.getOptionItemTextProps(item)}>{item.label}</span>
+                      </div>
+                    ))}
                   </div>
                 </div>
               </Teleport>
diff --git a/examples/vue-ts/src/pages/menu.tsx b/examples/vue-ts/src/pages/menu.tsx
index 293ba0fcf2..84d0d192dd 100644
--- a/examples/vue-ts/src/pages/menu.tsx
+++ b/examples/vue-ts/src/pages/menu.tsx
@@ -28,10 +28,10 @@ export default defineComponent({
               <Teleport to="body">
                 <div {...api.positionerProps}>
                   <ul {...api.contentProps}>
-                    <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-                    <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-                    <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-                    <li {...api.getItemProps({ id: "export" })}>Export...</li>
+                    <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+                    <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+                    <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+                    <li {...api.getItemProps({ value: "export" })}>Export...</li>
                   </ul>
                 </div>
               </Teleport>
diff --git a/examples/vue-ts/src/pages/nested-menu.tsx b/examples/vue-ts/src/pages/nested-menu.tsx
index 2a7b21dcd8..b47b259a18 100644
--- a/examples/vue-ts/src/pages/nested-menu.tsx
+++ b/examples/vue-ts/src/pages/nested-menu.tsx
@@ -9,15 +9,12 @@ export default defineComponent({
   name: "NestedMenu",
   setup() {
     const [state, send, machine] = useMachine(menu.machine({ id: "1" }))
-
     const root = computed(() => menu.connect(state.value, send, normalizeProps))
 
     const [subState, subSend, subMachine] = useMachine(menu.machine({ id: "2" }))
-
     const sub = computed(() => menu.connect(subState.value, subSend, normalizeProps))
 
     const [sub2State, sub2Send, sub2Machine] = useMachine(menu.machine({ id: "3" }))
-
     const sub2 = computed(() => menu.connect(sub2State.value, sub2Send, normalizeProps))
 
     onMounted(() => {
@@ -48,9 +45,11 @@ export default defineComponent({
                 <div {...root.value.positionerProps}>
                   <ul data-testid="menu" {...root.value.contentProps}>
                     {level1.map((item) => {
-                      const props = item.trigger ? triggerItemProps.value : root.value.getItemProps({ id: item.id })
+                      const props = item.trigger
+                        ? triggerItemProps.value
+                        : root.value.getItemProps({ value: item.value })
                       return (
-                        <li key={item.id} data-testid={item.id} {...(props as any)}>
+                        <li key={item.value} data-testid={item.value} {...(props as any)}>
                           {item.label}
                         </li>
                       )
@@ -63,9 +62,11 @@ export default defineComponent({
                 <div {...sub.value.positionerProps}>
                   <ul data-testid="more-tools-submenu" {...sub.value.contentProps}>
                     {level2.map((item) => {
-                      const props = item.trigger ? triggerItem2Props.value : sub.value.getItemProps({ id: item.id })
+                      const props = item.trigger
+                        ? triggerItem2Props.value
+                        : sub.value.getItemProps({ value: item.value })
                       return (
-                        <li key={item.id} data-testid={item.id} {...(props as any)}>
+                        <li key={item.value} data-testid={item.value} {...(props as any)}>
                           {item.label}
                         </li>
                       )
@@ -78,7 +79,7 @@ export default defineComponent({
                 <div {...sub2.value.positionerProps}>
                   <ul data-testid="open-nested-submenu" {...sub2.value.contentProps}>
                     {level3.map((item) => (
-                      <li key={item.id} data-testid={item.id} {...sub2.value.getItemProps({ id: item.id })}>
+                      <li key={item.value} data-testid={item.value} {...sub2.value.getItemProps({ value: item.value })}>
                         {item.label}
                       </li>
                     ))}
diff --git a/packages/machines/menu/src/menu.connect.ts b/packages/machines/menu/src/menu.connect.ts
index dec4ed1829..035b9b3238 100644
--- a/packages/machines/menu/src/menu.connect.ts
+++ b/packages/machines/menu/src/menu.connect.ts
@@ -11,14 +11,12 @@ import {
 import { dataAttr, getEventTarget, isEditableElement, isSelfEvent } from "@zag-js/dom-query"
 import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
-import { match } from "@zag-js/utils"
 import { parts } from "./menu.anatomy"
 import { dom } from "./menu.dom"
 import type { ItemProps, ItemState, MachineApi, OptionItemProps, OptionItemState, Send, State } from "./menu.types"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const isSubmenu = state.context.isSubmenu
-  const values = state.context.value
   const isTypingAhead = state.context.isTypingAhead
 
   const isOpen = state.hasTag("open")
@@ -31,29 +29,25 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   function getItemState(props: ItemProps): ItemState {
     return {
       isDisabled: !!props.disabled,
-      isHighlighted: state.context.highlightedId === props.id,
+      isHighlighted: state.context.highlightedValue === props.value,
     }
   }
 
   function getOptionItemProps(props: OptionItemProps) {
-    const id = props.id ?? props.value
     const valueText = props.valueText ?? props.value
-    return { ...props, id, valueText }
+    return { ...props, id: props.value, valueText }
   }
 
   function getOptionItemState(props: OptionItemProps): OptionItemState {
     const itemState = getItemState(getOptionItemProps(props))
     return {
       ...itemState,
-      isChecked: !!match(props.type, {
-        radio: () => values?.[props.name] === props.value,
-        checkbox: () => values?.[props.name].includes(props.value),
-      }),
+      isChecked: !!props.checked,
     }
   }
 
   function getItemProps(props: ItemProps) {
-    const { id, closeOnSelect, valueText } = props
+    const { value: id, closeOnSelect, valueText } = props
     const itemState = getItemState(props)
     return normalize.element({
       ...parts.item.attrs,
@@ -103,7 +97,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   }
 
   return {
-    highlightedId: state.context.highlightedId,
+    highlightedValue: state.context.highlightedValue,
     isOpen,
     open() {
       send("OPEN")
@@ -111,7 +105,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     close() {
       send("CLOSE")
     },
-    setHighlightedId(id) {
+    setHighlightedValue(id) {
       send({ type: "HIGHLIGHTED.SET", id })
     },
     setParent(parent) {
@@ -120,10 +114,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     setChild(child) {
       send({ type: "CHILD.SET", value: child, id: child.state.context.id })
     },
-    value: values,
-    setValue(name, value) {
-      send({ type: "VALUE.SET", name, value })
-    },
     reposition(options = {}) {
       send({ type: "POSITIONING.SET", options })
     },
@@ -163,7 +153,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     }),
 
     getTriggerItemProps(childApi) {
-      return mergeProps(getItemProps({ id: childApi.triggerProps.id }), childApi.triggerProps) as T["element"]
+      return mergeProps(getItemProps({ value: childApi.triggerProps.id }), childApi.triggerProps) as T["element"]
     },
 
     triggerProps: normalize.button({
@@ -274,7 +264,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       role: "menu",
       tabIndex: 0,
       dir: state.context.dir,
-      "aria-activedescendant": state.context.highlightedId ?? undefined,
+      "aria-activedescendant": state.context.highlightedValue ?? undefined,
       "aria-labelledby": dom.getTriggerId(state.context),
       "data-placement": state.context.currentPlacement,
       onPointerEnter(event) {
@@ -360,7 +350,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     getOptionItemState,
     getOptionItemProps(props) {
-      const { name, type, disabled, onCheckedChange, closeOnSelect } = props
+      const { type, disabled, onCheckedChange, closeOnSelect } = props
 
       const option = getOptionItemProps(props)
       const itemState = getOptionItemState(props)
@@ -369,7 +359,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         ...getItemProps(option),
         ...normalize.element({
           "data-type": type,
-          "data-name": name,
           ...parts.optionItem.attrs,
           dir: state.context.dir,
           "data-value": option.value,
diff --git a/packages/machines/menu/src/menu.dom.ts b/packages/machines/menu/src/menu.dom.ts
index 8e7ecef471..7773110db3 100644
--- a/packages/machines/menu/src/menu.dom.ts
+++ b/packages/machines/menu/src/menu.dom.ts
@@ -14,7 +14,7 @@ export const dom = createScope({
   getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),
   getPositionerEl: (ctx: Ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getTriggerEl: (ctx: Ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
-  getHighlightedItemEl: (ctx: Ctx) => (ctx.highlightedId ? dom.getById(ctx, ctx.highlightedId) : null),
+  getHighlightedItemEl: (ctx: Ctx) => (ctx.highlightedValue ? dom.getById(ctx, ctx.highlightedValue) : null),
   getArrowEl: (ctx: Ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
 
   getElements: (ctx: Ctx) => {
@@ -24,11 +24,11 @@ export const dom = createScope({
   },
   getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)),
   getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)),
-  getNextEl: (ctx: Ctx, loop?: boolean) => nextById(dom.getElements(ctx), ctx.highlightedId!, loop ?? ctx.loop),
-  getPrevEl: (ctx: Ctx, loop?: boolean) => prevById(dom.getElements(ctx), ctx.highlightedId!, loop ?? ctx.loop),
+  getNextEl: (ctx: Ctx, loop?: boolean) => nextById(dom.getElements(ctx), ctx.highlightedValue!, loop ?? ctx.loop),
+  getPrevEl: (ctx: Ctx, loop?: boolean) => prevById(dom.getElements(ctx), ctx.highlightedValue!, loop ?? ctx.loop),
 
   getElemByKey: (ctx: Ctx, key: string) =>
-    getByTypeahead(dom.getElements(ctx), { state: ctx.typeahead, key, activeId: ctx.highlightedId }),
+    getByTypeahead(dom.getElements(ctx), { state: ctx.typeahead, key, activeId: ctx.highlightedValue }),
 
   isTargetDisabled: (v: EventTarget | null) => {
     return isHTMLElement(v) && (v.dataset.disabled === "" || v.hasAttribute("disabled"))
diff --git a/packages/machines/menu/src/menu.machine.ts b/packages/machines/menu/src/menu.machine.ts
index 21dc2fcd52..c5dcfbcaca 100644
--- a/packages/machines/menu/src/menu.machine.ts
+++ b/packages/machines/menu/src/menu.machine.ts
@@ -5,7 +5,7 @@ import { contains, getByTypeahead, isEditableElement, raf, scrollIntoView } from
 import { observeAttributes } from "@zag-js/mutation-observer"
 import { getPlacement, getPlacementSide } from "@zag-js/popper"
 import { getElementPolygon, isPointInPolygon } from "@zag-js/rect-utils"
-import { add, cast, compact, isArray, remove } from "@zag-js/utils"
+import { cast, compact } from "@zag-js/utils"
 import { dom } from "./menu.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./menu.types"
 
@@ -18,23 +18,23 @@ export function machine(userContext: UserDefinedContext) {
       id: "menu",
       initial: ctx.open ? "open" : "idle",
       context: {
-        highlightedId: null,
-        hoverId: null,
-        parent: null,
-        children: cast(ref({})),
-        intentPolygon: null,
+        highlightedValue: null,
         loop: false,
-        suspendPointer: false,
         anchorPoint: null,
         closeOnSelect: true,
-        restoreFocus: true,
         ...ctx,
-        typeahead: getByTypeahead.defaultOptions,
         positioning: {
           placement: "bottom-start",
           gutter: 8,
           ...ctx.positioning,
         },
+        intentPolygon: null,
+        parent: null,
+        lastHighlightedValue: null,
+        children: cast(ref({})),
+        suspendPointer: false,
+        restoreFocus: true,
+        typeahead: getByTypeahead.defaultOptions,
       },
 
       computed: {
@@ -87,11 +87,8 @@ export function machine(userContext: UserDefinedContext) {
             actions: "invokeOnClose",
           },
         ],
-        RESTORE_FOCUS: {
-          actions: "restoreFocus",
-        },
-        "VALUE.SET": {
-          actions: ["setOptionValue", "invokeOnValueChange"],
+        "HIGHLIGHTED.RESTORE": {
+          actions: "restoreHighlightedItem",
         },
         "HIGHLIGHTED.SET": {
           actions: "setHighlightedItem",
@@ -220,7 +217,7 @@ export function machine(userContext: UserDefinedContext) {
               },
               {
                 target: "closed",
-                actions: ["focusParentMenu", "restoreParentFocus", "invokeOnClose"],
+                actions: ["focusParentMenu", "restoreParentHiglightedItem", "invokeOnClose"],
               },
             ],
           },
@@ -228,7 +225,7 @@ export function machine(userContext: UserDefinedContext) {
             "CONTROLLED.OPEN": "open",
             "CONTROLLED.CLOSE": {
               target: "closed",
-              actions: ["focusParentMenu", "restoreParentFocus"],
+              actions: ["focusParentMenu", "restoreParentHiglightedItem"],
             },
             // don't invoke on open here since the menu is still open (we're only keeping it open)
             MENU_POINTERENTER: {
@@ -242,7 +239,7 @@ export function machine(userContext: UserDefinedContext) {
               },
               {
                 target: "closed",
-                actions: ["focusParentMenu", "restoreParentFocus"],
+                actions: ["focusParentMenu", "restoreParentHiglightedItem"],
               },
             ],
           },
@@ -407,7 +404,7 @@ export function machine(userContext: UserDefinedContext) {
                 actions: ["highlightItem", "focusMenu"],
               },
               {
-                actions: "setHoveredItem",
+                actions: "setLastHighlightedItem",
               },
             ],
             ITEM_POINTERLEAVE: {
@@ -423,29 +420,17 @@ export function machine(userContext: UserDefinedContext) {
                   "closeOnSelect",
                   "isOpenControlled",
                 ),
-                actions: [
-                  "invokeOnSelect",
-                  "changeOptionValue",
-                  "invokeOnValueChange",
-                  "closeRootMenu",
-                  "invokeOnClose",
-                ],
+                actions: ["invokeOnSelect", "setOptionState", "closeRootMenu", "invokeOnClose"],
               },
               {
                 guard: and(not("isTriggerItemHighlighted"), not("isHighlightedItemEditable"), "closeOnSelect"),
                 target: "closed",
-                actions: [
-                  "invokeOnSelect",
-                  "changeOptionValue",
-                  "invokeOnValueChange",
-                  "closeRootMenu",
-                  "invokeOnClose",
-                ],
+                actions: ["invokeOnSelect", "setOptionState", "closeRootMenu", "invokeOnClose"],
               },
               //
               {
                 guard: and(not("isTriggerItemHighlighted"), not("isHighlightedItemEditable")),
-                actions: ["invokeOnSelect", "changeOptionValue", "invokeOnValueChange"],
+                actions: ["invokeOnSelect", "setOptionState"],
               },
               { actions: "highlightItem" },
             ],
@@ -596,26 +581,14 @@ export function machine(userContext: UserDefinedContext) {
             },
           })
         },
-        invokeOnValueChange(ctx, evt) {
-          if (!ctx.value) return
-          const name = evt.name ?? evt.option?.name
-          if (!name) return
-          const values = ctx.value[name]
-          const valueAsArray = isArray(values) ? Array.from(values) : values
-          ctx.onValueChange?.({ name, value: valueAsArray })
-        },
-        setOptionValue(ctx, evt) {
-          if (!ctx.value) return
-          ctx.value[evt.name] = evt.value
-        },
-        changeOptionValue(ctx, evt) {
-          if (!evt.option || !ctx.value) return
-          const { value, type, name } = evt.option
-          const values = ctx.value[name]
-          if (type === "checkbox" && isArray(values)) {
-            ctx.value[name] = values.includes(value) ? remove(values, value) : add(values, value)
-          } else {
-            ctx.value[name] = value
+        setOptionState(_ctx, evt) {
+          if (!evt.option) return
+          const { checked, onCheckedChange, type } = evt.option
+
+          if (type === "radio") {
+            onCheckedChange?.(true)
+          } else if (type === "checkbox") {
+            onCheckedChange?.(!checked)
           }
         },
         clickHighlightedItem(ctx, _evt, { send }) {
@@ -654,10 +627,10 @@ export function machine(userContext: UserDefinedContext) {
           ctx.parent.state.context.suspendPointer = false
         },
         setHighlightedItem(ctx, evt) {
-          ctx.highlightedId = evt.id
+          ctx.highlightedValue = evt.id
         },
         clearHighlightedItem(ctx) {
-          ctx.highlightedId = null
+          ctx.highlightedValue = null
         },
         focusMenu(ctx) {
           raf(() => {
@@ -670,27 +643,27 @@ export function machine(userContext: UserDefinedContext) {
         highlightFirstItem(ctx) {
           const first = dom.getFirstEl(ctx)
           if (!first) return
-          ctx.highlightedId = first.id
+          ctx.highlightedValue = first.id
         },
         highlightLastItem(ctx) {
           const last = dom.getLastEl(ctx)
           if (!last) return
-          ctx.highlightedId = last.id
+          ctx.highlightedValue = last.id
         },
         highlightNextItem(ctx, evt) {
           const next = dom.getNextEl(ctx, evt.loop)
-          ctx.highlightedId = next?.id ?? null
+          ctx.highlightedValue = next?.id ?? null
         },
         highlightPrevItem(ctx, evt) {
           const prev = dom.getPrevEl(ctx, evt.loop)
-          ctx.highlightedId = prev?.id ?? null
+          ctx.highlightedValue = prev?.id ?? null
         },
         invokeOnSelect(ctx) {
-          if (!ctx.highlightedId) return
-          ctx.onSelect?.({ value: ctx.highlightedId })
+          if (!ctx.highlightedValue) return
+          ctx.onSelect?.({ value: ctx.highlightedValue })
         },
         highlightItem(ctx, evt) {
-          ctx.highlightedId = evt.id
+          ctx.highlightedValue = evt.id
         },
         focusTrigger(ctx) {
           if (ctx.isSubmenu || ctx.anchorPoint || !ctx.restoreFocus) return
@@ -698,7 +671,7 @@ export function machine(userContext: UserDefinedContext) {
         },
         highlightMatchedItem(ctx, evt) {
           const node = dom.getElemByKey(ctx, evt.key)
-          if (node) ctx.highlightedId = node.id
+          if (node) ctx.highlightedValue = node.id
         },
         setParentMenu(ctx, evt) {
           ctx.parent = ref(evt.value)
@@ -718,16 +691,16 @@ export function machine(userContext: UserDefinedContext) {
         focusParentMenu(ctx) {
           ctx.parent?.send("FOCUS_MENU")
         },
-        setHoveredItem(ctx, evt) {
-          ctx.hoverId = evt.id
+        setLastHighlightedItem(ctx, evt) {
+          ctx.lastHighlightedValue = evt.id
         },
-        restoreFocus(ctx) {
-          if (!ctx.hoverId) return
-          ctx.highlightedId = ctx.hoverId
-          ctx.hoverId = null
+        restoreHighlightedItem(ctx) {
+          if (!ctx.lastHighlightedValue) return
+          ctx.highlightedValue = ctx.lastHighlightedValue
+          ctx.lastHighlightedValue = null
         },
-        restoreParentFocus(ctx) {
-          ctx.parent?.send("RESTORE_FOCUS")
+        restoreParentHiglightedItem(ctx) {
+          ctx.parent?.send("HIGHLIGHTED.RESTORE")
         },
         invokeOnOpen(ctx) {
           ctx.onOpenChange?.({ open: true })
diff --git a/packages/machines/menu/src/menu.types.ts b/packages/machines/menu/src/menu.types.ts
index 2244d2eb51..1c638ad2c1 100644
--- a/packages/machines/menu/src/menu.types.ts
+++ b/packages/machines/menu/src/menu.types.ts
@@ -10,15 +10,16 @@ import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from
  * -----------------------------------------------------------------------------*/
 
 export interface OpenChangeDetails {
+  /**
+   * Whether the menu is open
+   */
   open: boolean
 }
 
-export interface ValueChangeDetails {
-  name: string
-  value: string | string[]
-}
-
 export interface SelectionDetails {
+  /**
+   * The value of the selected menu item
+   */
   value: string
 }
 
@@ -41,18 +42,10 @@ interface PublicContext extends DirectionProperty, CommonProperties, Dismissable
    * The ids of the elements in the menu. Useful for composition.
    */
   ids?: ElementIds
-  /**
-   * The values of radios and checkboxes in the menu.
-   */
-  value?: Record<string, string | string[]>
-  /**
-   * Callback to be called when the menu values change (for radios and checkboxes).
-   */
-  onValueChange?: (details: ValueChangeDetails) => void
   /**
    * The `id` of the active menu item.
    */
-  highlightedId: string | null
+  highlightedValue: string | null
   /**
    * Function called when a menu item is selected.
    */
@@ -135,9 +128,9 @@ interface PrivateContext {
   suspendPointer: boolean
   /**
    * @internal
-   * The `id` of the menu item that is currently being hovered.
+   * The `id` of the menu item that is currently being highlighted.
    */
-  hoverId: string | null
+  lastHighlightedValue: string | null
   /**
    * @internal
    * The computed placement (maybe different from initial placement)
@@ -179,9 +172,9 @@ export interface Api {
 
 export interface ItemProps {
   /**
-   * The `id` of the menu item option.
+   * The unique value of the menu item option.
    */
-  id: string
+  value: string
   /**
    * Whether the menu item is disabled
    */
@@ -199,9 +192,9 @@ export interface ItemProps {
 
 export interface OptionItemProps extends Partial<ItemProps> {
   /**
-   * The option's name as specified in menu's `context.values` object
+   * Whether the option is checked
    */
-  name: string
+  checked: boolean
   /**
    * Whether the option is a radio or a checkbox
    */
@@ -255,11 +248,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * The id of the currently highlighted menuitem
    */
-  highlightedId: string | null
+  highlightedValue: string | null
   /**
    * Function to set the highlighted menuitem
    */
-  setHighlightedId(id: string): void
+  setHighlightedValue(id: string): void
   /**
    * Function to register a parent menu. This is used for submenus
    */
@@ -268,14 +261,6 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    * Function to register a child menu. This is used for submenus
    */
   setChild(child: Service): void
-  /**
-   * The value of the menu options item
-   */
-  value: Record<string, string | string[]> | undefined
-  /**
-   * Function to set the value of the menu options item
-   */
-  setValue: (name: string, value: any) => void
   /**
    * Function to reposition the popover
    */
diff --git a/shared/src/data.ts b/shared/src/data.ts
index 699e6a1cb5..c239d64e24 100644
--- a/shared/src/data.ts
+++ b/shared/src/data.ts
@@ -87,38 +87,38 @@ export const tabsData = [
 
 export const menuData = [
   [
-    { label: "New File", id: "new-file" },
-    { label: "New Tab", id: "new-tab" },
-    { label: "New Window", id: "new-win" },
-    { label: "More Tools →", id: "more-tools", trigger: true },
-    { label: "Export", id: "export" },
-    { label: "Go to Google...", id: "google" },
+    { label: "New File", value: "new-file" },
+    { label: "New Tab", value: "new-tab" },
+    { label: "New Window", value: "new-win" },
+    { label: "More Tools →", value: "more-tools", trigger: true },
+    { label: "Export", value: "export" },
+    { label: "Go to Google...", value: "google" },
   ],
   [
-    { label: "Save Page As...", id: "save-page" },
-    { label: "Create Shortcuts", id: "shortcut" },
-    { label: "Name Window...", id: "name-win" },
-    { label: "Open nested →", id: "open-nested", trigger: true },
-    { label: "Switch Window", id: "switch-win" },
-    { label: "New Terminal", id: "new-term" },
+    { label: "Save Page As...", value: "save-page" },
+    { label: "Create Shortcuts", value: "shortcut" },
+    { label: "Name Window...", value: "name-win" },
+    { label: "Open nested →", value: "open-nested", trigger: true },
+    { label: "Switch Window", value: "switch-win" },
+    { label: "New Terminal", value: "new-term" },
   ],
   [
-    { label: "Welcome", id: "welcome" },
-    { label: "Playground", id: "playground" },
-    { label: "Export", id: "export" },
+    { label: "Welcome", value: "welcome" },
+    { label: "Playground", value: "playground" },
+    { label: "Export", value: "export" },
   ],
 ]
 
 export const menuOptionData = {
   order: [
-    { label: "Ascending", id: "asc" },
-    { label: "Descending", id: "desc" },
-    { label: "None", id: "none" },
+    { label: "Ascending", value: "asc" },
+    { label: "Descending", value: "desc" },
+    { label: "None", value: "none" },
   ],
   type: [
-    { label: "Email", id: "email" },
-    { label: "Phone", id: "phone" },
-    { label: "Address", id: "address" },
+    { label: "Email", value: "email" },
+    { label: "Phone", value: "phone" },
+    { label: "Address", value: "address" },
   ],
 }
 
diff --git a/starters/react/components/menu.tsx b/starters/react/components/menu.tsx
index c0870949ef..03a5ae1b27 100644
--- a/starters/react/components/menu.tsx
+++ b/starters/react/components/menu.tsx
@@ -34,7 +34,7 @@ export function Menu(props: Props) {
         <div {...api.positionerProps}>
           <ul {...api.contentProps}>
             {items.map((item) => (
-              <li key={item.value} {...api.getItemProps({ id: item.value })}>
+              <li key={item.value} {...api.getItemProps({ value: item.value })}>
                 {item.label}
               </li>
             ))}
diff --git a/website/components/machines/context-menu.tsx b/website/components/machines/context-menu.tsx
index 265c7c8ce9..8d469bb10f 100644
--- a/website/components/machines/context-menu.tsx
+++ b/website/components/machines/context-menu.tsx
@@ -28,7 +28,7 @@ export function ContextMenu(props: ContextMenuProps) {
       <div {...api.positionerProps}>
         <ul {...api.contentProps}>
           {data.map((item) => (
-            <li key={item.value} {...api.getItemProps({ id: item.value })}>
+            <li key={item.value} {...api.getItemProps({ value: item.value })}>
               {item.label}
             </li>
           ))}
diff --git a/website/components/machines/menu.tsx b/website/components/machines/menu.tsx
index 24f77e83c1..02d000ed49 100644
--- a/website/components/machines/menu.tsx
+++ b/website/components/machines/menu.tsx
@@ -8,6 +8,7 @@ const data = [
   { label: "Export", value: "export" },
   { label: "Duplicate", value: "duplicate" },
 ]
+
 type MenuProps = {
   controls: {}
 }
@@ -28,7 +29,7 @@ export function Menu(props: MenuProps) {
         <div {...api.positionerProps}>
           <ul {...api.contentProps}>
             {data.map((item) => (
-              <li key={item.value} {...api.getItemProps({ id: item.value })}>
+              <li key={item.value} {...api.getItemProps({ value: item.value })}>
                 {item.label}
               </li>
             ))}
diff --git a/website/components/machines/nested-menu.tsx b/website/components/machines/nested-menu.tsx
index f62aa9b5c1..79b28da1c2 100644
--- a/website/components/machines/nested-menu.tsx
+++ b/website/components/machines/nested-menu.tsx
@@ -54,7 +54,7 @@ export function NestedMenu() {
             {data.map((item) => (
               <li
                 key={item.value}
-                {...fileMenu.getItemProps({ id: item.value })}
+                {...fileMenu.getItemProps({ value: item.value })}
               >
                 {item.label}
               </li>
@@ -73,7 +73,7 @@ export function NestedMenu() {
             {shareMenuData.map((item) => (
               <li
                 key={item.value}
-                {...shareMenu.getItemProps({ id: item.value })}
+                {...shareMenu.getItemProps({ value: item.value })}
               >
                 {item.label}
               </li>
diff --git a/website/data/components/menu.mdx b/website/data/components/menu.mdx
index 3c2080cca7..fd79542e73 100644
--- a/website/data/components/menu.mdx
+++ b/website/data/components/menu.mdx
@@ -127,28 +127,13 @@ To use checkbox or radio option items, you'll need to:
 A common requirement for the option item that you pass the `name`, `value` and
 `type` properties.
 
-- `name` — The property key in the `value` context that this option is for.
 - `type` — The type of option item. Either `"checkbox"` or `"radio"`.
 - `value` — The value of the option item.
+- `checked` — The checked state of the option item.
+- `onCheckedChange` — The callback to invoke when the checked state changes.
 
 <CodeSnippet id="menu/option-items.mdx" />
 
-The machine invokes an `onValueChange` callback when an radio or checkbox option
-checked state changes. This callback is invoked with the `name` of the option
-and its new value.
-
-```jsx {3-6}
-const [state, send] = useMachine(
-  menu.machine({
-    value: { order: "", type: [] },
-    onValueChange(data) {
-      // data => { name: string, value: string | string[] }
-      console.log("values changed", data.value)
-    },
-  }),
-)
-```
-
 ## Styling guide
 
 Earlier, we mentioned that each menu part has a `data-part` attribute added to
diff --git a/website/data/snippets/react/menu/context-menu.mdx b/website/data/snippets/react/menu/context-menu.mdx
index 77ed662152..46cad7c7e8 100644
--- a/website/data/snippets/react/menu/context-menu.mdx
+++ b/website/data/snippets/react/menu/context-menu.mdx
@@ -3,15 +3,9 @@ import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
 
 export function ContextMenu() {
-  const [state, send] = useMachine(
-    menu.machine({
-      id:'1',
-      "aria-label": "File",
-    }),
-  )
+  const [state, send] = useMachine(menu.machine({ id: "1" }))
   const api = menu.connect(state, send, normalizeProps)
 
-
   return (
     <div>
       <div {...api.contextTriggerProps}>
@@ -19,10 +13,10 @@ export function ContextMenu() {
       </div>
       <div {...api.positionerProps}>
         <ul {...api.contentProps}>
-          <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-          <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-          <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-          <li {...api.getItemProps({ id: "export" })}>Export...</li>
+          <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+          <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+          <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+          <li {...api.getItemProps({ value: "export" })}>Export...</li>
         </ul>
       </div>
     </div>
diff --git a/website/data/snippets/react/menu/nested-menu.mdx b/website/data/snippets/react/menu/nested-menu.mdx
index 18e81fff31..c2e941aec8 100644
--- a/website/data/snippets/react/menu/nested-menu.mdx
+++ b/website/data/snippets/react/menu/nested-menu.mdx
@@ -35,11 +35,11 @@ export function NestedMenu() {
       <Portal>
         <div {...fileMenu.positionerProps}>
           <ul {...fileMenu.contentProps}>
-            <li {...fileMenu.getItemProps({ id: "new-tab" })}>New tab</li>
-            <li {...fileMenu.getItemProps({ id: "new-win" })}>New window</li>
+            <li {...fileMenu.getItemProps({ value: "new-tab" })}>New tab</li>
+            <li {...fileMenu.getItemProps({ value: "new-win" })}>New window</li>
             <li {...shareMenuTriggerProps}>Share</li>
-            <li {...fileMenu.getItemProps({ id: "print" })}>Print...</li>
-            <li {...fileMenu.getItemProps({ id: "help" })}>Help</li>
+            <li {...fileMenu.getItemProps({ value: "print" })}>Print...</li>
+            <li {...fileMenu.getItemProps({ value: "help" })}>Help</li>
           </ul>
         </div>
       </Portal>
@@ -47,9 +47,9 @@ export function NestedMenu() {
       <Portal>
         <div {...shareMenu.positionerProps}>
           <ul {...shareMenu.contentProps}>
-            <li {...shareMenu.getItemProps({ id: "messages" })}>Messages</li>
-            <li {...shareMenu.getItemProps({ id: "airdrop" })}>Airdrop</li>
-            <li {...shareMenu.getItemProps({ id: "whatsapp" })}>WhatsApp</li>
+            <li {...shareMenu.getItemProps({ value: "messages" })}>Messages</li>
+            <li {...shareMenu.getItemProps({ value: "airdrop" })}>Airdrop</li>
+            <li {...shareMenu.getItemProps({ value: "whatsapp" })}>WhatsApp</li>
           </ul>
         </div>
       </Portal>
diff --git a/website/data/snippets/react/menu/option-items.mdx b/website/data/snippets/react/menu/option-items.mdx
index b87760f22b..12e5dc90f1 100644
--- a/website/data/snippets/react/menu/option-items.mdx
+++ b/website/data/snippets/react/menu/option-items.mdx
@@ -4,49 +4,65 @@ import { useMachine, normalizeProps } from "@zag-js/react"
 
 const data = {
   order: [
-    { label: "Ascending", id: "asc" },
-    { label: "Descending", id: "desc" },
-    { label: "None", id: "none" },
+    { label: "Ascending", value: "asc" },
+    { label: "Descending", value: "desc" },
+    { label: "None", value: "none" },
   ],
   type: [
-    { label: "Email", id: "email" },
-    { label: "Phone", id: "phone" },
-    { label: "Address", id: "address" },
+    { label: "Email", value: "email" },
+    { label: "Phone", value: "phone" },
+    { label: "Address", value: "address" },
   ],
 }
 
 export function Menu() {
-  const [state, send] = useMachine(
-    menu.machine({
-      id: "1",
-      "aria-label": "Sort by",
-      value: { order: "", type: [] },
-    }),
-  )
+  const [order, setOrder] = useState("")
+  const [type, setType] = useState([])
+
+  const [state, send] = useMachine(menu.machine({ id: "1" }))
 
   const api = menu.connect(state, send, normalizeProps)
 
+  const radios = menuOptionData.order.map((item) => ({
+    type: "radio",
+    name: "order",
+    value: item.value,
+    label: item.label,
+    checked: order === item.value,
+    onCheckedChange: (checked) => setOrder(checked ? item.value : ""),
+  }))
+
+  const checkboxes = menuOptionData.type.map((item) => ({
+    type: "checkbox",
+    name: "type",
+    value: item.value,
+    label: item.label,
+    checked: type.includes(item.value),
+    onCheckedChange: (checked) =>
+      setType((prev) =>
+        checked ? [...prev, item.value] : prev.filter((x) => x !== item.value),
+      ),
+  }))
+
   return (
     <>
       <button {...api.triggerProps}>Trigger</button>
       <div {...api.positionerProps}>
         <div {...api.contentProps}>
-          {data.order.map((item) => {
-            const option = { type: "radio", name: "order", value: item.id }
+          {radios.map((item) => {
             return (
-              <div key={item.id} {...api.getOptionItemProps(option)}>
-                <span {...api.getOptionItemIndicatorProps(opts)}>✅</span>
-                <span {...api.getOptionItemTextProps(opts)}>{item.label}</span>
+              <div key={item.value} {...api.getOptionItemProps(item)}>
+                <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                <span {...api.getOptionItemTextProps(item)}>{item.label}</span>
               </div>
             )
           })}
           <hr {...api.separatorProps} />
-          {data.type.map((item) => {
-            const option = { type: "checkbox", name: "type", value: item.id }
+          {checkboxes.map((item) => {
             return (
-              <div key={item.id} {...api.getOptionItemProps(option)}>
-                <span {...api.getOptionItemIndicatorProps(opts)}>✅</span>
-                <span {...api.getOptionItemTextProps(opts)}>{item.label}</span>
+              <div key={item.value} {...api.getOptionItemProps(item)}>
+                <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                <span {...api.getOptionItemTextProps(item)}>{item.label}</span>
               </div>
             )
           })}
diff --git a/website/data/snippets/react/menu/usage.mdx b/website/data/snippets/react/menu/usage.mdx
index bbcd6a2d17..e5ac4627cb 100644
--- a/website/data/snippets/react/menu/usage.mdx
+++ b/website/data/snippets/react/menu/usage.mdx
@@ -1,10 +1,11 @@
 ```jsx
 import * as menu from "@zag-js/menu"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function Menu() {
-  const [state, send] = useMachine(menu.machine({ id: "1", "aria-label": "File" }))
-  
+  const [state, send] = useMachine(menu.machine({ id: useId() }))
+
   const api = menu.connect(state, send, normalizeProps)
 
   return (
@@ -14,10 +15,10 @@ export function Menu() {
       </button>
       <div {...api.positionerProps}>
         <ul {...api.contentProps}>
-          <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-          <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-          <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-          <li {...api.getItemProps({ id: "export" })}>Export...</li>
+          <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+          <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+          <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+          <li {...api.getItemProps({ value: "export" })}>Export...</li>
         </ul>
       </div>
     </div>
diff --git a/website/data/snippets/solid/menu/context-menu.mdx b/website/data/snippets/solid/menu/context-menu.mdx
index 7282e7ebb5..952a107770 100644
--- a/website/data/snippets/solid/menu/context-menu.mdx
+++ b/website/data/snippets/solid/menu/context-menu.mdx
@@ -4,12 +4,7 @@ import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, createUniqueId } from "solid-js"
 
 export function ContextMenu() {
-  const [state, send] = useMachine(
-    menu.machine({
-      id: createUniqueId(),
-      "aria-label": "File",
-    }),
-  )
+  const [state, send] = useMachine(menu.machine({ id: createUniqueId() }))
 
   const api = createMemo(() => menu.connect(state, send, normalizeProps))
 
@@ -20,10 +15,10 @@ export function ContextMenu() {
       </div>
       <div {...api().positionerProps}>
         <ul {...api().contentProps}>
-          <li {...api().getItemProps({ id: "edit" })}>Edit</li>
-          <li {...api().getItemProps({ id: "duplicate" })}>Duplicate</li>
-          <li {...api().getItemProps({ id: "delete" })}>Delete</li>
-          <li {...api().getItemProps({ id: "export" })}>Export...</li>
+          <li {...api().getItemProps({ value: "edit" })}>Edit</li>
+          <li {...api().getItemProps({ value: "duplicate" })}>Duplicate</li>
+          <li {...api().getItemProps({ value: "delete" })}>Delete</li>
+          <li {...api().getItemProps({ value: "export" })}>Export...</li>
         </ul>
       </div>
     </div>
diff --git a/website/data/snippets/solid/menu/nested-menu.mdx b/website/data/snippets/solid/menu/nested-menu.mdx
index f2458296fe..654f00d208 100644
--- a/website/data/snippets/solid/menu/nested-menu.mdx
+++ b/website/data/snippets/solid/menu/nested-menu.mdx
@@ -7,14 +7,14 @@ import { Portal } from "solid-js/web"
 export default function Page() {
   // Level 1 - File Menu
   const [fileMenuState, fileMenuSend, fileMenuMachine] = useMachine(
-    menu.machine({ "aria-label": "File", id: createUniqueId() }),
+    menu.machine({ "aria-label": "File", value: createUniqueId() }),
   )
 
   const fileMenu = createMemo(() => menu.connect(state, send, normalizeProps))
 
   // Level 2 - Share Menu
   const [shareMenuState, shareMenuSend, shareMenuMachine] = useMachine(
-    menu.machine({ "aria-label": "Share", id: createUniqueId() }),
+    menu.machine({ "aria-label": "Share", value: createUniqueId() }),
   )
 
   const shareMenu = createMemo(() =>
@@ -40,11 +40,13 @@ export default function Page() {
       <Portal>
         <div {...fileMenu().positionerProps}>
           <ul {...fileMenu().contentProps}>
-            <li {...fileMenu().getItemProps({ id: "new-tab" })}>New tab</li>
-            <li {...fileMenu().getItemProps({ id: "new-win" })}>New window</li>
+            <li {...fileMenu().getItemProps({ value: "new-tab" })}>New tab</li>
+            <li {...fileMenu().getItemProps({ value: "new-win" })}>
+              New window
+            </li>
             <li {...shareMenuTriggerProps()}>Share</li>
-            <li {...fileMenu().getItemProps({ id: "print" })}>Print...</li>
-            <li {...fileMenu().getItemProps({ id: "help" })}>Help</li>
+            <li {...fileMenu().getItemProps({ value: "print" })}>Print...</li>
+            <li {...fileMenu().getItemProps({ value: "help" })}>Help</li>
           </ul>
         </div>
       </Portal>
@@ -52,9 +54,13 @@ export default function Page() {
       <Portal>
         <div {...shareMenu().positionerProps}>
           <ul {...shareMenu().contentProps}>
-            <li {...shareMenu().getItemProps({ id: "messages" })}>Messages</li>
-            <li {...shareMenu().getItemProps({ id: "airdrop" })}>Airdrop</li>
-            <li {...shareMenu().getItemProps({ id: "whatsapp" })}>WhatsApp</li>
+            <li {...shareMenu().getItemProps({ value: "messages" })}>
+              Messages
+            </li>
+            <li {...shareMenu().getItemProps({ value: "airdrop" })}>Airdrop</li>
+            <li {...shareMenu().getItemProps({ value: "whatsapp" })}>
+              WhatsApp
+            </li>
           </ul>
         </div>
       </Portal>
diff --git a/website/data/snippets/solid/menu/option-items.mdx b/website/data/snippets/solid/menu/option-items.mdx
index 3ff33b3b0d..bbcb62cc38 100644
--- a/website/data/snippets/solid/menu/option-items.mdx
+++ b/website/data/snippets/solid/menu/option-items.mdx
@@ -1,48 +1,67 @@
-```jsx
+```tsx
 import * as menu from "@zag-js/menu"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, createUniqueId, For } from "solid-js"
 
 export function Menu() {
-  const [state, send] = useMachine(
-    menu.machine({
-      id: createUniqueId(),
-      "aria-label": "Sort by",
-      value: { order: "", type: [] },
-    }),
-  )
+  const [state, send] = useMachine(menu.machine({ id: createUniqueId() }))
 
   const api = createMemo(() => menu.connect(state, send, normalizeProps))
 
+  const [order, setOrder] = createSignal("")
+  const [type, setType] = createSignal([])
+
+  const radios = createMemo(() =>
+    menuOptionData.order.map((item) => ({
+      type: "radio",
+      value: item.value,
+      label: item.label,
+      checked: order() === item.value,
+      onCheckedChange: (checked: boolean) =>
+        setOrder(checked ? item.value : ""),
+    })),
+  )
+
+  const checkboxes = createMemo(() =>
+    menuOptionData.type.map((item) => ({
+      type: "checkbox",
+      value: item.value,
+      label: item.label,
+      checked: type().includes(item.value),
+      onCheckedChange: (checked: boolean) =>
+        setType((prev) =>
+          checked
+            ? [...prev, item.value]
+            : prev.filter((x) => x !== item.value),
+        ),
+    })),
+  )
+
   return (
     <>
-      <button {...api().triggerProps}>
-        Trigger
-      </button>
+      <button {...api().triggerProps}>Trigger</button>
       <div {...api().positionerProps}>
         <div {...api().contentProps}>
-          <For each={data.order}>
-            {(item) => {
-              const option = { type: "radio", name: "order", value: item.id }
-              return (
-                <div {...api().getOptionItemProps(option)}>
-                  <span {...api().getOptionItemIndicatorProps(option)}>✅</span>
-                  <span {...api().getOptionItemTextProps(option)}>{item.label}</span>
-                </div>
-              )
-            }}
+          <For each={radios()}>
+            {(item) => (
+              <div {...api().getOptionItemProps(item)}>
+                <span {...api().getOptionItemIndicatorProps(item)}>✅</span>
+                <span {...api().getOptionItemTextProps(item)}>
+                  {item.label}
+                </span>
+              </div>
+            )}
           </For>
-          <hr  {...api.separatorProps/>
-          <For each={data.type}>
-            {(item) => {
-              const option = { type: "checkbox", name: "type", value: item.id }
-              return (
-                <div {...api().getOptionItemProps(option)}>
-                  <span {...api().getOptionItemIndicatorProps(option)}>✅</span>
-                  <span {...api().getOptionItemTextProps(option)}>{item.label}</span>
-                </div>
-              )
-            }}
+          <hr {...api().separatorProps} />
+          <For each={checkboxes()}>
+            {(item) => (
+              <div {...api().getOptionItemProps(item)}>
+                <span {...api().getOptionItemIndicatorProps(item)}>✅</span>
+                <span {...api().getOptionItemTextProps(item)}>
+                  {item.label}
+                </span>
+              </div>
+            )}
           </For>
         </div>
       </div>
diff --git a/website/data/snippets/solid/menu/usage.mdx b/website/data/snippets/solid/menu/usage.mdx
index 09e9c1704d..ec5a50042f 100644
--- a/website/data/snippets/solid/menu/usage.mdx
+++ b/website/data/snippets/solid/menu/usage.mdx
@@ -4,9 +4,7 @@ import { normalizeProps, useMachine } from "@zag-js/solid"
 import { createMemo, createUniqueId } from "solid-js"
 
 export function Menu() {
-  const [state, send] = useMachine(
-    menu.machine({ id: createUniqueId(), "aria-label": "File" }),
-  )
+  const [state, send] = useMachine(menu.machine({ id: createUniqueId() }))
 
   const api = createMemo(() => menu.connect(state, send, normalizeProps))
 
@@ -17,10 +15,10 @@ export function Menu() {
       </button>
       <div {...api().positionerProps}>
         <ul {...api().contentProps}>
-          <li {...api().getItemProps({ id: "edit" })}>Edit</li>
-          <li {...api().getItemProps({ id: "duplicate" })}>Duplicate</li>
-          <li {...api().getItemProps({ id: "delete" })}>Delete</li>
-          <li {...api().getItemProps({ id: "export" })}>Export...</li>
+          <li {...api().getItemProps({ value: "edit" })}>Edit</li>
+          <li {...api().getItemProps({ value: "duplicate" })}>Duplicate</li>
+          <li {...api().getItemProps({ value: "delete" })}>Delete</li>
+          <li {...api().getItemProps({ value: "export" })}>Export...</li>
         </ul>
       </div>
     </div>
diff --git a/website/data/snippets/vue-jsx/menu/context-menu.mdx b/website/data/snippets/vue-jsx/menu/context-menu.mdx
index e53b244c5c..2df2b26f04 100644
--- a/website/data/snippets/vue-jsx/menu/context-menu.mdx
+++ b/website/data/snippets/vue-jsx/menu/context-menu.mdx
@@ -6,12 +6,7 @@ import { computed, defineComponent, h, Fragment } from "vue"
 export default defineComponent({
   name: "ContextMenu",
   setup() {
-    const [state, send] = useMachine(
-      menu.machine({
-        id: "1",
-        "aria-label": "File",
-      }),
-    )
+    const [state, send] = useMachine(menu.machine({ id: "1" }))
 
     const apiRef = computed(() =>
       menu.connect(state.value, send, normalizeProps),
@@ -26,10 +21,10 @@ export default defineComponent({
           </div>
           <div {...api.positionerProps}>
             <ul {...api.contentProps}>
-              <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-              <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-              <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-              <li {...api.getItemProps({ id: "export" })}>Export...</li>
+              <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+              <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+              <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+              <li {...api.getItemProps({ value: "export" })}>Export...</li>
             </ul>
           </div>
         </div>
diff --git a/website/data/snippets/vue-jsx/menu/nested-menu.mdx b/website/data/snippets/vue-jsx/menu/nested-menu.mdx
index 7d6c1b46fb..d76ba1cc21 100644
--- a/website/data/snippets/vue-jsx/menu/nested-menu.mdx
+++ b/website/data/snippets/vue-jsx/menu/nested-menu.mdx
@@ -24,7 +24,7 @@ export default defineComponent({
 
     // Level 2 - Share Menu
     const [shareMenuState, shareMenuSend, shareMenuMachine] = useMachine(
-      menu.machine({ "aria-label": "Share" }),
+      menu.machine({ id: "2", "aria-label": "Share" }),
     )
 
     const shareMenuApi = computed(() =>
@@ -40,7 +40,7 @@ export default defineComponent({
 
     // Share menu trigger
     const shareMenuTriggerProps = computed(() =>
-      fileMenu.value.getTriggerItemProps(shareMenuApi.value)
+      fileMenu.value.getTriggerItemProps(shareMenuApi.value),
     )
 
     return () => {
@@ -53,13 +53,15 @@ export default defineComponent({
           <Teleport to="body">
             <div {...fileMenu.positionerProps}>
               <ul {...fileMenu.contentProps}>
-                <li {...fileMenu.getItemProps({ id: "new-tab" })}>New tab</li>
-                <li {...fileMenu.getItemProps({ id: "new-win" })}>
+                <li {...fileMenu.getItemProps({ value: "new-tab" })}>
+                  New tab
+                </li>
+                <li {...fileMenu.getItemProps({ value: "new-win" })}>
                   New window
                 </li>
                 <li {...shareMenuTriggerProps.value}>Share</li>
-                <li {...fileMenu.getItemProps({ id: "print" })}>Print...</li>
-                <li {...fileMenu.getItemProps({ id: "help" })}>Help</li>
+                <li {...fileMenu.getItemProps({ value: "print" })}>Print...</li>
+                <li {...fileMenu.getItemProps({ value: "help" })}>Help</li>
               </ul>
             </div>
           </Teleport>
@@ -67,11 +69,13 @@ export default defineComponent({
           <Teleport to="body">
             <div {...shareMenu.positionerProps}>
               <ul {...shareMenu.contentProps}>
-                <li {...shareMenu.getItemProps({ id: "messages" })}>
+                <li {...shareMenu.getItemProps({ value: "messages" })}>
                   Messages
                 </li>
-                <li {...shareMenu.getItemProps({ id: "airdrop" })}>Airdrop</li>
-                <li {...shareMenu.getItemProps({ id: "whatsapp" })}>
+                <li {...shareMenu.getItemProps({ value: "airdrop" })}>
+                  Airdrop
+                </li>
+                <li {...shareMenu.getItemProps({ value: "whatsapp" })}>
                   WhatsApp
                 </li>
               </ul>
diff --git a/website/data/snippets/vue-jsx/menu/option-items.mdx b/website/data/snippets/vue-jsx/menu/option-items.mdx
index 481fdd22e7..4fde1b15d3 100644
--- a/website/data/snippets/vue-jsx/menu/option-items.mdx
+++ b/website/data/snippets/vue-jsx/menu/option-items.mdx
@@ -1,23 +1,44 @@
 ```jsx
 import * as menu from "@zag-js/menu"
 import { normalizeProps, useMachine } from "@zag-js/vue"
-import { computed, defineComponent, h, Fragment } from "vue"
+import { computed, defineComponent, ref, h, Fragment } from "vue"
 
 export default defineComponent({
   name: "Menu",
   setup() {
-    const [state, send] = useMachine(
-      menu.machine({
-        id: "1",
-        "aria-label": "Sort by",
-        value: { order: "", type: [] },
-      }),
-    )
+    const [state, send] = useMachine(menu.machine({ id: "1" }))
 
     const apiRef = computed(() =>
       menu.connect(state.value, send, normalizeProps),
     )
 
+    const orderRef = ref("")
+    const typeRef = ref([])
+
+    const radios = computed(() =>
+      data.order.map((item) => ({
+        type: "radio",
+        value: item.value,
+        label: item.label,
+        checked: orderRef.value === item.value,
+        onCheckedChange: (checked) =>
+          (orderRef.value = checked ? item.value : ""),
+      })),
+    )
+
+    const checkboxes = computed(() =>
+      data.type.map((item) => ({
+        type: "checkbox",
+        value: item.value,
+        label: item.label,
+        checked: typeRef.value.includes(item.value),
+        onCheckedChange: (checked) =>
+          (typeRef.value = checked
+            ? [...typeRef.value, item.value]
+            : typeRef.value.filter((x) => x !== item.value)),
+      })),
+    )
+
     return () => {
       const api = apiRef.value
       return (
@@ -25,33 +46,23 @@ export default defineComponent({
           <button {...api.triggerProps}>Trigger</button>
           <div {...api.positionerProps}>
             <div {...api.contentProps}>
-              {data.order.map((item) => {
-                const option = { type: "radio", name: "order", value: item.id }
-                return (
-                  <div key={item.id} {...api.getOptionItemProps(option)}>
-                    <span {...api.getOptionItemIndicatorProps(option)}>✅</span>
-                    <span {...api.getOptionItemTextProps(option)}>
-                      {item.label}
-                    </span>
-                  </div>
-                )
-              })}
+              {radios.value.map((item) => (
+                <div key={item.value} {...api.getOptionItemProps(item)}>
+                  <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                  <span {...api.getOptionItemTextProps(item)}>
+                    {item.label}
+                  </span>
+                </div>
+              ))}
               <hr {...api.separatorProps} />
-              {data.type.map((item) => {
-                const option = {
-                  type: "checkbox",
-                  name: "type",
-                  value: item.id,
-                }
-                return (
-                  <div key={item.id} {...api.getOptionItemProps(option)}>
-                    <span {...api.getOptionItemIndicatorProps(option)}>✅</span>
-                    <span {...api.getOptionItemTextProps(option)}>
-                      {item.label}
-                    </span>
-                  </div>
-                )
-              })}
+              {checkboxes.value.map((item) => (
+                <div key={item.value} {...api.getOptionItemProps(item)}>
+                  <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                  <span {...api.getOptionItemTextProps(item)}>
+                    {item.label}
+                  </span>
+                </div>
+              ))}
             </div>
           </div>
         </>
diff --git a/website/data/snippets/vue-jsx/menu/usage.mdx b/website/data/snippets/vue-jsx/menu/usage.mdx
index 0665e1e41f..af9e1aa832 100644
--- a/website/data/snippets/vue-jsx/menu/usage.mdx
+++ b/website/data/snippets/vue-jsx/menu/usage.mdx
@@ -6,9 +6,7 @@ import { computed, defineComponent, h, Fragment } from "vue"
 export default defineComponent({
   name: "Menu",
   setup() {
-    const [state, send] = useMachine(
-      menu.machine({ id: "1", "aria-label": "File" }),
-    )
+    const [state, send] = useMachine(menu.machine({ id: "1" }))
 
     const apiRef = computed(() =>
       menu.connect(state.value, send, normalizeProps),
@@ -22,10 +20,10 @@ export default defineComponent({
           </button>
           <div {...api.positionerProps}>
             <ul {...api.contentProps}>
-              <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-              <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-              <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-              <li {...api.getItemProps({ id: "export" })}>Export...</li>
+              <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+              <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+              <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+              <li {...api.getItemProps({ value: "export" })}>Export...</li>
             </ul>
           </div>
         </div>
diff --git a/website/data/snippets/vue-sfc/menu/context-menu.mdx b/website/data/snippets/vue-sfc/menu/context-menu.mdx
index 0016a2fb59..fa3a3c384c 100644
--- a/website/data/snippets/vue-sfc/menu/context-menu.mdx
+++ b/website/data/snippets/vue-sfc/menu/context-menu.mdx
@@ -16,10 +16,10 @@ const api = computed(() => menu.connect(state.value, send, normalizeProps));
     </button>
     <div v-bind="api.positionerProps">
       <ul v-bind="api.contentProps">
-        <li v-bind="api.getItemProps({ id: 'edit' })">Edit</li>
-        <li v-bind="api.getItemProps({ id: 'duplicate' })">Duplicate</li>
-        <li v-bind="api.getItemProps({ id: 'delete' })">Delete</li>
-        <li v-bind="api.getItemProps({ id: 'export' })">Export...</li>
+        <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>
+        <li v-bind="api.getItemProps({ value: 'duplicate' })">Duplicate</li>
+        <li v-bind="api.getItemProps({ value: 'delete' })">Delete</li>
+        <li v-bind="api.getItemProps({ value: 'export' })">Export...</li>
       </ul>
     </div>
   </div>
diff --git a/website/data/snippets/vue-sfc/menu/nested-menu.mdx b/website/data/snippets/vue-sfc/menu/nested-menu.mdx
index 8f36e0abce..c6d1599ea7 100644
--- a/website/data/snippets/vue-sfc/menu/nested-menu.mdx
+++ b/website/data/snippets/vue-sfc/menu/nested-menu.mdx
@@ -42,11 +42,11 @@ const shareMenuTriggerProps = computed(() =>
   <Teleport to="body">
     <div v-bind="fileMenu.positionerProps">
       <ul ref="fileMenuRef" v-bind="fileMenu.contentProps">
-        <li v-bind="fileMenu.getItemProps({ id: 'new-tab' })">New tab</li>
-        <li v-bind="fileMenu.getItemProps({ id: 'new-win' })">New window</li>
+        <li v-bind="fileMenu.getItemProps({ value: 'new-tab' })">New tab</li>
+        <li v-bind="fileMenu.getItemProps({ value: 'new-win' })">New window</li>
         <li v-bind="shareMenuTriggerProps">Share</li>
-        <li v-bind="fileMenu.getItemProps({ id: 'print' })">Print...</li>
-        <li v-bind="fileMenu.getItemProps({ id: 'help' })">Help</li>
+        <li v-bind="fileMenu.getItemProps({ value: 'print' })">Print...</li>
+        <li v-bind="fileMenu.getItemProps({ value: 'help' })">Help</li>
       </ul>
     </div>
   </Teleport>
@@ -54,9 +54,9 @@ const shareMenuTriggerProps = computed(() =>
   <Teleport to="body">
     <div v-bind="shareMenu.positionerProps">
       <ul ref="shareMenuRef" v-bind="shareMenu.contentProps">
-        <li v-bind="shareMenu.getItemProps({ id: 'messages' })">Messages</li>
-        <li v-bind="shareMenu.getItemProps({ id: 'airdrop' })">Airdrop</li>
-        <li v-bind="shareMenu.getItemProps({ id: 'whatsapp' })">WhatsApp</li>
+        <li v-bind="shareMenu.getItemProps({ value: 'messages' })">Messages</li>
+        <li v-bind="shareMenu.getItemProps({ value: 'airdrop' })">Airdrop</li>
+        <li v-bind="shareMenu.getItemProps({ value: 'whatsapp' })">WhatsApp</li>
       </ul>
     </div>
   </Teleport>
diff --git a/website/data/snippets/vue-sfc/menu/option-items.mdx b/website/data/snippets/vue-sfc/menu/option-items.mdx
index f53566738d..a8cbf4f785 100644
--- a/website/data/snippets/vue-sfc/menu/option-items.mdx
+++ b/website/data/snippets/vue-sfc/menu/option-items.mdx
@@ -1,29 +1,41 @@
-```md
+```html
 <script setup>
-import * as menu from "@zag-js/menu";
-import { normalizeProps, useMachine } from "@zag-js/vue";
-import { computed } from "vue";
-import { data } from "./data";
+  import * as menu from "@zag-js/menu"
+  import { normalizeProps, useMachine } from "@zag-js/vue"
+  import { computed } from "vue"
+  import { data } from "./data"
 
-const [state, send] = useMachine(
-  menu.machine({
-    id: "1",
-    "aria-label": "Sort by",
-    value: { order: "", type: [] },
-  })
-);
+  const [state, send] = useMachine(menu.machine({ id: "1" }))
 
-const api = computed(() => menu.connect(state.value, send, normalizeProps));
+  const api = computed(() => menu.connect(state.value, send, normalizeProps))
 
-const orderOptions = data.order.map((item) => ({
-  ...item,
-  option: { type: "radio", name: "order", value: item.id },
-}));
+  const radios = computed(() =>
+    menuOptionData.order.map((item) => ({
+      label: item.label,
+      id: item.value,
+      type: "radio",
+      value: item.value,
+      checked: item.value === orderRef.value,
+      onCheckedChange(v) {
+        orderRef.value = v ? item.value : ""
+      },
+    })),
+  )
 
-const typeOptions = data.type.map((item) => ({
-  ...item,
-  option: { type: "checkbox", name: "type", value: item.id },
-}));
+  const checkboxes = computed(() =>
+    menuOptionData.type.map((item) => ({
+      id: item.value,
+      label: item.label,
+      type: "checkbox",
+      value: item.value,
+      checked: typeRef.value.includes(item.value),
+      onCheckedChange(v) {
+        typeRef.value = v
+          ? [...typeRef.value, item.value]
+          : typeRef.value.filter((x) => x !== item.value)
+      },
+    })),
+  )
 </script>
 
 <template>
@@ -31,24 +43,23 @@ const typeOptions = data.type.map((item) => ({
   <div v-bind="api.positionerProps">
     <div v-bind="api.contentProps">
       <div
-        v-for="item in orderOptions"
-        :key="item.id"
-        v-bind="api.getOptionItemProps(item.option)"
+        v-for="item in radios"
+        :key="item.value"
+        v-bind="api.getOptionItemProps(item)"
       >
-       <span v-bind="api.getOptionItemIndicatorProps(item)">✅</span>
-       <span v-bind="api.getOptionItemTextProps(item)">{{ item.label }}</span>
+        <span v-bind="api.getOptionItemIndicatorProps(item)">✅</span>
+        <span v-bind="api.getOptionItemTextProps(item)">{{ item.label }}</span>
       </div>
       <hr v-bind="api.separatorProps" />
       <div
-        v-for="item in typeOptions"
-        :key="item.id"
-        v-bind="api.getOptionItemProps(item.option)"
+        v-for="item in checkboxes"
+        :key="item.value"
+        v-bind="api.getOptionItemProps(item)"
       >
-       <span v-bind="api.getOptionItemIndicatorProps(item)">✅</span>
-       <span v-bind="api.getOptionItemTextProps(item)">{{ item.label }}</span>
+        <span v-bind="api.getOptionItemIndicatorProps(item)">✅</span>
+        <span v-bind="api.getOptionItemTextProps(item)">{{ item.label }}</span>
       </div>
     </div>
-
   </div>
 </template>
 ```
diff --git a/website/data/snippets/vue-sfc/menu/usage.mdx b/website/data/snippets/vue-sfc/menu/usage.mdx
index 61c7c50298..566624463b 100644
--- a/website/data/snippets/vue-sfc/menu/usage.mdx
+++ b/website/data/snippets/vue-sfc/menu/usage.mdx
@@ -4,7 +4,7 @@ import * as menu from "@zag-js/menu";
 import { normalizeProps, useMachine } from "@zag-js/vue";
 import { computed } from "vue";
 
-const [state, send] = useMachine(menu.machine({ id: "menu", "aria-label": "File" }));
+const [state, send] = useMachine(menu.machine({ id: "1", "aria-label": "File" }));
 const api = computed(() => menu.connect(state.value, send, normalizeProps));
 </script>
 
@@ -15,10 +15,10 @@ const api = computed(() => menu.connect(state.value, send, normalizeProps));
     </button>
     <div v-bind="api.positionerProps">
       <ul v-bind="api.contentProps">
-        <li v-bind="api.getItemProps({ id: 'edit' })">Edit</li>
-        <li v-bind="api.getItemProps({ id: 'duplicate' })">Duplicate</li>
-        <li v-bind="api.getItemProps({ id: 'delete' })">Delete</li>
-        <li v-bind="api.getItemProps({ id: 'export' })">Export...</li>
+        <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>
+        <li v-bind="api.getItemProps({ value: 'duplicate' })">Duplicate</li>
+        <li v-bind="api.getItemProps({ value: 'delete' })">Delete</li>
+        <li v-bind="api.getItemProps({ value: 'export' })">Export...</li>
       </ul>
     </div>
   </div>
diff --git a/website/data/snippets/website/snippet.mdx b/website/data/snippets/website/snippet.mdx
index e327c2c3b7..25621418d2 100644
--- a/website/data/snippets/website/snippet.mdx
+++ b/website/data/snippets/website/snippet.mdx
@@ -1,10 +1,11 @@
 ```jsx
 import * as numberInput from "@zag-js/number-input"
 import { useMachine, normalizeProps } from "@zag-js/react"
+import { useId } from "react"
 
 export function NumberInput() {
   // 1. Consume the machine
-  const [state, send] = useMachine(numberInput.machine({ id: "1" }))
+  const [state, send] = useMachine(numberInput.machine({ id: useId() }))
 
   // 2. Convert machine to the provided API
   const api = numberInput.connect(state, send, normalizeProps)
@@ -14,9 +15,9 @@ export function NumberInput() {
     <div {...api.rootProps}>
       <label {...api.labelProps}>Enter number:</label>
       <div>
-        <button {...api.decrementButtonProps}>DEC</button>
+        <button {...api.decrementTriggerProps}>DEC</button>
         <input {...api.inputProps} />
-        <button {...api.incrementButtonProps}>INC</button>
+        <button {...api.incrementTriggerProps}>INC</button>
       </div>
     </div>
   )

From 05ad046342bfaaadbd3d2caba1f3db51eb3c586e Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 1 Apr 2024 17:49:23 +0100
Subject: [PATCH 2/7] fix: types

---
 packages/machines/menu/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/machines/menu/src/index.ts b/packages/machines/menu/src/index.ts
index cbf9c9a10a..77f1d1c611 100644
--- a/packages/machines/menu/src/index.ts
+++ b/packages/machines/menu/src/index.ts
@@ -13,7 +13,6 @@ export type {
   OptionItemProps,
   OptionItemState,
   SelectionDetails,
-  ValueChangeDetails,
   MachineContext,
   MachineState,
 } from "./menu.types"

From bfe4603457c9409b8961883c9885b02658e0b3f3 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 1 Apr 2024 17:54:37 +0100
Subject: [PATCH 3/7] fix: props

---
 packages/machines/menu/src/menu.props.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/machines/menu/src/menu.props.ts b/packages/machines/menu/src/menu.props.ts
index 1242945edd..e96c5da932 100644
--- a/packages/machines/menu/src/menu.props.ts
+++ b/packages/machines/menu/src/menu.props.ts
@@ -8,7 +8,7 @@ export const props = createProps<UserDefinedContext>()([
   "closeOnSelect",
   "dir",
   "getRootNode",
-  "highlightedId",
+  "highlightedValue",
   "id",
   "ids",
   "loop",
@@ -18,15 +18,14 @@ export const props = createProps<UserDefinedContext>()([
   "onPointerDownOutside",
   "onEscapeKeyDown",
   "onSelect",
-  "onValueChange",
   "open",
   "open.controlled",
   "positioning",
-  "value",
 ])
+
 export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
 
-export const itemProps = createProps<ItemProps>()(["closeOnSelect", "disabled", "id", "valueText"])
+export const itemProps = createProps<ItemProps>()(["closeOnSelect", "disabled", "value", "valueText"])
 export const splitItemProps = createSplitProps<ItemProps>(itemProps)
 
 export const itemGroupLabelProps = createProps<ItemGroupLabelProps>()(["htmlFor"])
@@ -36,13 +35,13 @@ export const itemGroupProps = createProps<ItemGroupProps>()(["id"])
 export const splitItemGroupProps = createSplitProps<ItemGroupProps>(itemGroupProps)
 
 export const optionItemProps = createProps<OptionItemProps>()([
-  "id",
   "disabled",
   "valueText",
   "closeOnSelect",
-  "name",
   "type",
   "value",
+  "checked",
   "onCheckedChange",
 ])
+
 export const splitOptionItemProps = createSplitProps<OptionItemProps>(optionItemProps)

From 9e5b72a159b4872e0059e5dd856cf19c773b5669 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 1 Apr 2024 18:10:26 +0100
Subject: [PATCH 4/7] chore: rename types

---
 packages/machines/menu/src/menu.connect.ts | 4 ++--
 packages/machines/menu/src/menu.types.ts   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/machines/menu/src/menu.connect.ts b/packages/machines/menu/src/menu.connect.ts
index 035b9b3238..83c2eef690 100644
--- a/packages/machines/menu/src/menu.connect.ts
+++ b/packages/machines/menu/src/menu.connect.ts
@@ -105,8 +105,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     close() {
       send("CLOSE")
     },
-    setHighlightedValue(id) {
-      send({ type: "HIGHLIGHTED.SET", id })
+    setHighlightedValue(value) {
+      send({ type: "HIGHLIGHTED.SET", id: value })
     },
     setParent(parent) {
       send({ type: "PARENT.SET", value: parent, id: parent.state.context.id })
diff --git a/packages/machines/menu/src/menu.types.ts b/packages/machines/menu/src/menu.types.ts
index 1c638ad2c1..096fb903da 100644
--- a/packages/machines/menu/src/menu.types.ts
+++ b/packages/machines/menu/src/menu.types.ts
@@ -252,7 +252,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * Function to set the highlighted menuitem
    */
-  setHighlightedValue(id: string): void
+  setHighlightedValue(value: string): void
   /**
    * Function to register a parent menu. This is used for submenus
    */
@@ -264,15 +264,15 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * Function to reposition the popover
    */
-  reposition: (options?: Partial<PositioningOptions>) => void
+  reposition(options?: Partial<PositioningOptions>): void
   /**
    * Returns the state of the option item
    */
-  getOptionItemState: (props: OptionItemProps) => OptionItemState
+  getOptionItemState(props: OptionItemProps): OptionItemState
   /**
    * Returns the state of the menu item
    */
-  getItemState: (props: ItemProps) => ItemState
+  getItemState(props: ItemProps): ItemState
   contextTriggerProps: T["element"]
   getTriggerItemProps<A extends Api>(childApi: A): T["element"]
   triggerProps: T["button"]

From 61a0cf95b8a93113c73f58df39849fa8293ec34a Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 1 Apr 2024 18:10:53 +0100
Subject: [PATCH 5/7] docs: update typedocs

---
 packages/docs/data/api.json | 26 +++++---------------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/packages/docs/data/api.json b/packages/docs/data/api.json
index aefcfb6dca..b06ad1304c 100644
--- a/packages/docs/data/api.json
+++ b/packages/docs/data/api.json
@@ -1595,12 +1595,12 @@
         "type": "() => void",
         "description": "Function to close the menu"
       },
-      "highlightedId": {
+      "highlightedValue": {
         "type": "string",
         "description": "The id of the currently highlighted menuitem"
       },
-      "setHighlightedId": {
-        "type": "(id: string) => void",
+      "setHighlightedValue": {
+        "type": "(value: string) => void",
         "description": "Function to set the highlighted menuitem"
       },
       "setParent": {
@@ -1611,14 +1611,6 @@
         "type": "(child: Service) => void",
         "description": "Function to register a child menu. This is used for submenus"
       },
-      "value": {
-        "type": "Record<string, string | string[]>",
-        "description": "The value of the menu options item"
-      },
-      "setValue": {
-        "type": "(name: string, value: any) => void",
-        "description": "Function to set the value of the menu options item"
-      },
       "reposition": {
         "type": "(options?: Partial<PositioningOptions>) => void",
         "description": "Function to reposition the popover"
@@ -1637,15 +1629,7 @@
         "type": "Partial<{ trigger: string; contextTrigger: string; content: string; label(id: string): string; group(id: string): string; positioner: string; arrow: string; }>",
         "description": "The ids of the elements in the menu. Useful for composition."
       },
-      "value": {
-        "type": "Record<string, string | string[]>",
-        "description": "The values of radios and checkboxes in the menu."
-      },
-      "onValueChange": {
-        "type": "(details: ValueChangeDetails) => void",
-        "description": "Callback to be called when the menu values change (for radios and checkboxes)."
-      },
-      "highlightedId": {
+      "highlightedValue": {
         "type": "string",
         "description": "The `id` of the active menu item."
       },
@@ -2606,7 +2590,7 @@
         "description": "Whether the select's open state is controlled by the user"
       },
       "scrollToIndexFn": {
-        "type": "(index: number) => void",
+        "type": "(details: ScrollToIndexDetails) => void",
         "description": "Function to scroll to a specific index"
       },
       "dir": {

From f29afe03be7a7de7f569fe75e7b0933390fc65e4 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 1 Apr 2024 18:20:56 +0100
Subject: [PATCH 6/7] feat: add highlight change callback

---
 .xstate/menu.js                            |  6 ++--
 package.json                               |  2 +-
 packages/docs/data/api.json                |  8 +++--
 packages/machines/menu/src/menu.machine.ts | 36 +++++++++++++---------
 packages/machines/menu/src/menu.types.ts   | 13 +++++++-
 5 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/.xstate/menu.js b/.xstate/menu.js
index 66a8200246..75c3153caf 100644
--- a/.xstate/menu.js
+++ b/.xstate/menu.js
@@ -333,7 +333,7 @@ const fetchMachine = createMachine({
         }],
         ITEM_POINTERMOVE: [{
           cond: "!suspendPointer",
-          actions: ["highlightItem", "focusMenu"]
+          actions: ["setHighlightedItem", "focusMenu"]
         }, {
           actions: "setLastHighlightedItem"
         }],
@@ -356,14 +356,14 @@ const fetchMachine = createMachine({
           cond: "!isTriggerItemHighlighted && !isHighlightedItemEditable",
           actions: ["invokeOnSelect", "setOptionState"]
         }, {
-          actions: "highlightItem"
+          actions: "setHighlightedItem"
         }],
         TRIGGER_POINTERLEAVE: {
           target: "closing",
           actions: "setIntentPolygon"
         },
         ITEM_POINTERDOWN: {
-          actions: "highlightItem"
+          actions: "setHighlightedItem"
         },
         TYPEAHEAD: {
           actions: "highlightMatchedItem"
diff --git a/package.json b/package.json
index 604b0e353b..0d0d151c90 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "visualize": "tsx scripts/visualize.ts --all",
     "slack": "tsx scripts/slack.ts",
     "sandbox": "tsx scripts/sandbox.ts",
-    "typedocs": "tsx scripts/typedocs.ts && pnpm prettier-fix",
+    "typedocs": "tsx scripts/typedocs.ts",
     "website": "pnpm --filter=./website"
   },
   "lint-staged": {
diff --git a/packages/docs/data/api.json b/packages/docs/data/api.json
index b06ad1304c..3878d021ca 100644
--- a/packages/docs/data/api.json
+++ b/packages/docs/data/api.json
@@ -1631,7 +1631,11 @@
       },
       "highlightedValue": {
         "type": "string",
-        "description": "The `id` of the active menu item."
+        "description": "The value of the highlighted menu item."
+      },
+      "onHighlightChange": {
+        "type": "(details: HighlightChangeDetails) => void",
+        "description": "Function called when the highlighted menu item changes."
       },
       "onSelect": {
         "type": "(details: SelectionDetails) => void",
@@ -3583,4 +3587,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/machines/menu/src/menu.machine.ts b/packages/machines/menu/src/menu.machine.ts
index c5dcfbcaca..fe2a53b4fc 100644
--- a/packages/machines/menu/src/menu.machine.ts
+++ b/packages/machines/menu/src/menu.machine.ts
@@ -5,7 +5,7 @@ import { contains, getByTypeahead, isEditableElement, raf, scrollIntoView } from
 import { observeAttributes } from "@zag-js/mutation-observer"
 import { getPlacement, getPlacementSide } from "@zag-js/popper"
 import { getElementPolygon, isPointInPolygon } from "@zag-js/rect-utils"
-import { cast, compact } from "@zag-js/utils"
+import { cast, compact, isEqual } from "@zag-js/utils"
 import { dom } from "./menu.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./menu.types"
 
@@ -401,7 +401,7 @@ export function machine(userContext: UserDefinedContext) {
             ITEM_POINTERMOVE: [
               {
                 guard: not("suspendPointer"),
-                actions: ["highlightItem", "focusMenu"],
+                actions: ["setHighlightedItem", "focusMenu"],
               },
               {
                 actions: "setLastHighlightedItem",
@@ -432,14 +432,14 @@ export function machine(userContext: UserDefinedContext) {
                 guard: and(not("isTriggerItemHighlighted"), not("isHighlightedItemEditable")),
                 actions: ["invokeOnSelect", "setOptionState"],
               },
-              { actions: "highlightItem" },
+              { actions: "setHighlightedItem" },
             ],
             TRIGGER_POINTERLEAVE: {
               target: "closing",
               actions: "setIntentPolygon",
             },
             ITEM_POINTERDOWN: {
-              actions: "highlightItem",
+              actions: "setHighlightedItem",
             },
             TYPEAHEAD: {
               actions: "highlightMatchedItem",
@@ -627,10 +627,10 @@ export function machine(userContext: UserDefinedContext) {
           ctx.parent.state.context.suspendPointer = false
         },
         setHighlightedItem(ctx, evt) {
-          ctx.highlightedValue = evt.id
+          set.highlighted(ctx, evt.id)
         },
         clearHighlightedItem(ctx) {
-          ctx.highlightedValue = null
+          set.highlighted(ctx, null)
         },
         focusMenu(ctx) {
           raf(() => {
@@ -643,35 +643,33 @@ export function machine(userContext: UserDefinedContext) {
         highlightFirstItem(ctx) {
           const first = dom.getFirstEl(ctx)
           if (!first) return
-          ctx.highlightedValue = first.id
+          set.highlighted(ctx, first.id)
         },
         highlightLastItem(ctx) {
           const last = dom.getLastEl(ctx)
           if (!last) return
-          ctx.highlightedValue = last.id
+          set.highlighted(ctx, last.id)
         },
         highlightNextItem(ctx, evt) {
           const next = dom.getNextEl(ctx, evt.loop)
-          ctx.highlightedValue = next?.id ?? null
+          set.highlighted(ctx, next?.id ?? null)
         },
         highlightPrevItem(ctx, evt) {
           const prev = dom.getPrevEl(ctx, evt.loop)
-          ctx.highlightedValue = prev?.id ?? null
+          set.highlighted(ctx, prev?.id ?? null)
         },
         invokeOnSelect(ctx) {
           if (!ctx.highlightedValue) return
           ctx.onSelect?.({ value: ctx.highlightedValue })
         },
-        highlightItem(ctx, evt) {
-          ctx.highlightedValue = evt.id
-        },
         focusTrigger(ctx) {
           if (ctx.isSubmenu || ctx.anchorPoint || !ctx.restoreFocus) return
           raf(() => dom.getTriggerEl(ctx)?.focus({ preventScroll: true }))
         },
         highlightMatchedItem(ctx, evt) {
           const node = dom.getElemByKey(ctx, evt.key)
-          if (node) ctx.highlightedValue = node.id
+          if (!node) return
+          set.highlighted(ctx, node.id)
         },
         setParentMenu(ctx, evt) {
           ctx.parent = ref(evt.value)
@@ -696,7 +694,7 @@ export function machine(userContext: UserDefinedContext) {
         },
         restoreHighlightedItem(ctx) {
           if (!ctx.lastHighlightedValue) return
-          ctx.highlightedValue = ctx.lastHighlightedValue
+          set.highlighted(ctx, ctx.lastHighlightedValue)
           ctx.lastHighlightedValue = null
         },
         restoreParentHiglightedItem(ctx) {
@@ -723,3 +721,11 @@ function closeRootMenu(ctx: MachineContext) {
   }
   parent?.send("CLOSE")
 }
+
+const set = {
+  highlighted(ctx: MachineContext, value: string | null) {
+    if (isEqual(ctx.highlightedValue, value)) return
+    ctx.highlightedValue = value
+    ctx.onHighlightChange?.({ highlightedValue: value })
+  },
+}
diff --git a/packages/machines/menu/src/menu.types.ts b/packages/machines/menu/src/menu.types.ts
index 096fb903da..af05b6ac3e 100644
--- a/packages/machines/menu/src/menu.types.ts
+++ b/packages/machines/menu/src/menu.types.ts
@@ -23,6 +23,13 @@ export interface SelectionDetails {
   value: string
 }
 
+export interface HighlightChangeDetails {
+  /**
+   * The value of the highlighted menu item
+   */
+  highlightedValue: string | null
+}
+
 /* -----------------------------------------------------------------------------
  * Machine context
  * -----------------------------------------------------------------------------*/
@@ -43,9 +50,13 @@ interface PublicContext extends DirectionProperty, CommonProperties, Dismissable
    */
   ids?: ElementIds
   /**
-   * The `id` of the active menu item.
+   * The value of the highlighted menu item.
    */
   highlightedValue: string | null
+  /**
+   * Function called when the highlighted menu item changes.
+   */
+  onHighlightChange?: (details: HighlightChangeDetails) => void
   /**
    * Function called when a menu item is selected.
    */

From 4027d61664d137b983318335530043b9dc118aee Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 1 Apr 2024 18:23:28 +0100
Subject: [PATCH 7/7] fix: menu props

---
 packages/machines/menu/src/menu.props.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/machines/menu/src/menu.props.ts b/packages/machines/menu/src/menu.props.ts
index e96c5da932..5e095dbd45 100644
--- a/packages/machines/menu/src/menu.props.ts
+++ b/packages/machines/menu/src/menu.props.ts
@@ -18,6 +18,7 @@ export const props = createProps<UserDefinedContext>()([
   "onPointerDownOutside",
   "onEscapeKeyDown",
   "onSelect",
+  "onHighlightChange",
   "open",
   "open.controlled",
   "positioning",