@ankhorage/surface 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ankhorage/surface
 
+## 2.0.2
+
+### Patch Changes
+
+- 1f1f02f: Update Menu.
+
 ## 2.0.1
 
 ### Patch Changes

package/dist/components/menu/Menu.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { MenuProps } from './types';
-export declare function Menu({ trigger, items, onDismiss, closeOnSelect, testID }: MenuProps): React.JSX.Element;
+export declare function Menu({ trigger, actions, dismiss, closeOnSelect, testID }: MenuProps): React.JSX.Element;
 //# sourceMappingURL=Menu.d.ts.map

package/dist/components/menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAezC,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,aAAoB,EAAE,MAAM,EAAE,EAAE,SAAS,qBAiJ1F"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,SAAS,CAAC;AA2CrD,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,aAAoB,EAAE,MAAM,EAAE,EAAE,SAAS,qBAwJ1F"}

package/dist/components/menu/Menu.js

@@ -4,7 +4,7 @@ import { FocusScope } from '../../internal/focus/FocusScope';
 import { useFocusManager } from '../../internal/focus/useFocusManager';
 import { Portal } from '../../internal/overlay/Portal';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Box, Surface } from '../../layout';
+import { Box, Inline, Stack, Surface } from '../../layout';
 import { ButtonBase } from '../../primitives/button-base';
 import { Text } from '../../primitives/text';
 import { useTheme } from '../../theme/ThemeContext';
@@ -15,7 +15,24 @@ function measureNode(node, callback) {
         callback({ height, width, x, y });
     });
 }
-export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }) {
+function renderActionContent(action, active) {
+    const titleColor = action.intent === 'danger' ? 'danger' : active || action.selected ? 'neutral' : undefined;
+    return (<Inline align="center" gap="s" justify="space-between" wrap="nowrap">
+      {action.leading ? <Box>{action.leading}</Box> : null}
+      <Box flex={1}>
+        <Stack gap="xxs">
+          <Text color={titleColor} variant="bodySmall" weight={action.selected ? 'semiBold' : 'medium'}>
+            {action.title}
+          </Text>
+          {action.description ? (<Text emphasis="muted" variant="caption">
+              {action.description}
+            </Text>) : null}
+        </Stack>
+      </Box>
+      {action.trailing ? <Box>{action.trailing}</Box> : null}
+    </Inline>);
+}
+export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }) {
     const { theme } = useTheme();
     const { bindKeydown } = useFocusManager();
     const animation = resolveOverlayAnimation('menu');
@@ -25,14 +42,27 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
     const [activeIndex, setActiveIndex] = React.useState(0);
     const closeMenu = React.useCallback(() => {
         setOpen(false);
-        onDismiss?.();
-    }, [onDismiss]);
+        if (dismiss) {
+            dismiss();
+        }
+    }, [dismiss]);
+    const activateAction = React.useCallback((action) => {
+        if (action.disabled) {
+            return;
+        }
+        if (action.activate) {
+            action.activate();
+        }
+        if (closeOnSelect) {
+            closeMenu();
+        }
+    }, [closeMenu, closeOnSelect]);
     const openMenu = React.useCallback(() => {
         measureNode(anchorRef.current, setLayout);
-        const firstEnabledIndex = items.findIndex((item) => !item.disabled);
+        const firstEnabledIndex = actions.findIndex((action) => !action.disabled);
         setActiveIndex(firstEnabledIndex === -1 ? 0 : firstEnabledIndex);
         setOpen(true);
-    }, [items]);
+    }, [actions]);
     React.useEffect(() => {
         if (!open) {
             return undefined;
@@ -41,16 +71,13 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
             const { key } = event;
             if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') {
                 event.preventDefault();
-                setActiveIndex((current) => resolveNextMenuIndex(items, current, key));
+                setActiveIndex((current) => resolveNextMenuIndex(actions, current, key));
             }
             if (event.key === 'Enter') {
                 event.preventDefault();
-                const activeItem = items[activeIndex];
-                if (activeItem && !activeItem.disabled) {
-                    activeItem.onPress?.();
-                    if (closeOnSelect) {
-                        closeMenu();
-                    }
+                const activeAction = actions[activeIndex];
+                if (activeAction) {
+                    activateAction(activeAction);
                 }
             }
             if (event.key === 'Escape') {
@@ -58,7 +85,7 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
                 closeMenu();
             }
         });
-    }, [activeIndex, bindKeydown, closeMenu, closeOnSelect, items, open]);
+    }, [activateAction, actions, activeIndex, bindKeydown, closeMenu, open]);
     return (<View collapsable={false} ref={anchorRef}>
       <ButtonBase onPress={open ? closeMenu : openMenu} testID={testID ? `${testID}-trigger` : undefined}>
         {trigger}
@@ -85,31 +112,22 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
             top: (layout?.y ?? 0) + (layout?.height ?? 0) + animation.offset,
         }}>
               <Surface accessibilityRole="menu" p="xs" style={{
-            minWidth: Math.max(layout?.width ?? 0, 180),
+            minWidth: Math.max(layout?.width ?? 0, 220),
             shadowOpacity: 0.12,
             shadowRadius: 12,
             shadowOffset: { width: 0, height: 6 },
         }} testID={testID} variant="raised">
-                {items.map((item, index) => {
-            const selected = index === activeIndex;
-            return (<Pressable accessibilityRole="menuitem" accessibilityState={{ disabled: item.disabled, selected }} disabled={item.disabled} key={item.id} onPress={() => {
-                    if (item.disabled) {
-                        return;
-                    }
-                    item.onPress?.();
-                    if (closeOnSelect) {
-                        closeMenu();
-                    }
-                }}>
-                      <Box px="m" py="s" style={{
+                {actions.map((action, index) => {
+            const active = index === activeIndex;
+            const selected = action.selected ?? active;
+            return (<Pressable accessibilityRole="menuitem" accessibilityState={{ disabled: action.disabled, selected }} disabled={action.disabled} key={action.id} onPress={() => activateAction(action)}>
+                      <Box px="m" py="s" radius="s" style={{
                     backgroundColor: selected
                         ? theme.semantics.action.neutral.softBg
                         : 'transparent',
-                    opacity: item.disabled ? 0.56 : 1,
-                }} testID={testID ? `${testID}-item-${item.id}` : undefined}>
-                        <Text color={selected ? 'neutral' : undefined} variant="bodySmall">
-                          {item.label}
-                        </Text>
+                    opacity: action.disabled ? 0.56 : 1,
+                }} testID={testID ? `${testID}-item-${action.id}` : undefined}>
+                        {renderActionContent(action, active)}
                       </Box>
                     </Pressable>);
         })}

package/dist/components/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { type LayoutRectangle, Pressable, View } from 'react-native';\n\nimport { FocusScope } from '../../internal/focus/FocusScope';\nimport { useFocusManager } from '../../internal/focus/useFocusManager';\nimport { Portal } from '../../internal/overlay/Portal';\nimport { resolveOverlayAnimation } from '../../internal/resolvers';\nimport { Box, Surface } from '../../layout';\nimport { ButtonBase } from '../../primitives/button-base';\nimport { Text } from '../../primitives/text';\nimport { useTheme } from '../../theme/ThemeContext';\nimport { resolveNextMenuIndex } from './navigation';\nimport type { MenuProps } from './types';\n\ninterface MeasurableNode {\n  measureInWindow?: (\n    callback: (x: number, y: number, width: number, height: number) => void,\n  ) => void;\n}\n\nfunction measureNode(node: unknown, callback: (layout: LayoutRectangle) => void) {\n  const measurableNode = node as MeasurableNode | null;\n  measurableNode?.measureInWindow?.((x, y, width, height) => {\n    callback({ height, width, x, y });\n  });\n}\n\nexport function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }: MenuProps) {\n  const { theme } = useTheme();\n  const { bindKeydown } = useFocusManager();\n  const animation = resolveOverlayAnimation('menu');\n  const anchorRef = React.useRef<View | null>(null);\n  const [open, setOpen] = React.useState(false);\n  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);\n  const [activeIndex, setActiveIndex] = React.useState(0);\n\n  const closeMenu = React.useCallback(() => {\n    setOpen(false);\n    onDismiss?.();\n  }, [onDismiss]);\n\n  const openMenu = React.useCallback(() => {\n    measureNode(anchorRef.current, setLayout);\n    const firstEnabledIndex = items.findIndex((item) => !item.disabled);\n    setActiveIndex(firstEnabledIndex === -1 ? 0 : firstEnabledIndex);\n    setOpen(true);\n  }, [items]);\n\n  React.useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    return bindKeydown((event) => {\n      const { key } = event;\n      if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') {\n        event.preventDefault();\n        setActiveIndex((current) => resolveNextMenuIndex(items, current, key));\n      }\n\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        const activeItem = items[activeIndex];\n        if (activeItem && !activeItem.disabled) {\n          activeItem.onPress?.();\n          if (closeOnSelect) {\n            closeMenu();\n          }\n        }\n      }\n\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        closeMenu();\n      }\n    });\n  }, [activeIndex, bindKeydown, closeMenu, closeOnSelect, items, open]);\n\n  return (\n    <View collapsable={false} ref={anchorRef}>\n      <ButtonBase\n        onPress={open ? closeMenu : openMenu}\n        testID={testID ? `${testID}-trigger` : undefined}\n      >\n        {trigger}\n      </ButtonBase>\n      <Portal layer=\"menu\" visible={open && Boolean(layout)}>\n        <View\n          pointerEvents=\"box-none\"\n          style={{\n            bottom: 0,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n          }}\n        >\n          <Pressable\n            onPress={closeMenu}\n            style={{\n              bottom: 0,\n              left: 0,\n              position: 'absolute',\n              right: 0,\n              top: 0,\n            }}\n          />\n          <FocusScope active={open} onEscape={closeMenu}>\n            <View\n              style={{\n                left: layout?.x ?? 0,\n                position: 'absolute',\n                top: (layout?.y ?? 0) + (layout?.height ?? 0) + animation.offset,\n              }}\n            >\n              <Surface\n                accessibilityRole=\"menu\"\n                p=\"xs\"\n                style={{\n                  minWidth: Math.max(layout?.width ?? 0, 180),\n                  shadowOpacity: 0.12,\n                  shadowRadius: 12,\n                  shadowOffset: { width: 0, height: 6 },\n                }}\n                testID={testID}\n                variant=\"raised\"\n              >\n                {items.map((item, index) => {\n                  const selected = index === activeIndex;\n\n                  return (\n                    <Pressable\n                      accessibilityRole=\"menuitem\"\n                      accessibilityState={{ disabled: item.disabled, selected }}\n                      disabled={item.disabled}\n                      key={item.id}\n                      onPress={() => {\n                        if (item.disabled) {\n                          return;\n                        }\n\n                        item.onPress?.();\n                        if (closeOnSelect) {\n                          closeMenu();\n                        }\n                      }}\n                    >\n                      <Box\n                        px=\"m\"\n                        py=\"s\"\n                        style={{\n                          backgroundColor: selected\n                            ? theme.semantics.action.neutral.softBg\n                            : 'transparent',\n                          opacity: item.disabled ? 0.56 : 1,\n                        }}\n                        testID={testID ? `${testID}-item-${item.id}` : undefined}\n                      >\n                        <Text color={selected ? 'neutral' : undefined} variant=\"bodySmall\">\n                          {item.label}\n                        </Text>\n                      </Box>\n                    </Pressable>\n                  );\n                })}\n              </Surface>\n            </View>\n          </FocusScope>\n        </View>\n      </Portal>\n    </View>\n  );\n}\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { type LayoutRectangle, Pressable, View } from 'react-native';\n\nimport { FocusScope } from '../../internal/focus/FocusScope';\nimport { useFocusManager } from '../../internal/focus/useFocusManager';\nimport { Portal } from '../../internal/overlay/Portal';\nimport { resolveOverlayAnimation } from '../../internal/resolvers';\nimport { Box, Inline, Stack, Surface } from '../../layout';\nimport { ButtonBase } from '../../primitives/button-base';\nimport { Text } from '../../primitives/text';\nimport { useTheme } from '../../theme/ThemeContext';\nimport { resolveNextMenuIndex } from './navigation';\nimport type { MenuAction, MenuProps } from './types';\n\ninterface MeasurableNode {\n  measureInWindow?: (\n    callback: (x: number, y: number, width: number, height: number) => void,\n  ) => void;\n}\n\nfunction measureNode(node: unknown, callback: (layout: LayoutRectangle) => void) {\n  const measurableNode = node as MeasurableNode | null;\n  measurableNode?.measureInWindow?.((x, y, width, height) => {\n    callback({ height, width, x, y });\n  });\n}\n\nfunction renderActionContent(action: MenuAction, active: boolean) {\n  const titleColor =\n    action.intent === 'danger' ? 'danger' : active || action.selected ? 'neutral' : undefined;\n\n  return (\n    <Inline align=\"center\" gap=\"s\" justify=\"space-between\" wrap=\"nowrap\">\n      {action.leading ? <Box>{action.leading}</Box> : null}\n      <Box flex={1}>\n        <Stack gap=\"xxs\">\n          <Text\n            color={titleColor}\n            variant=\"bodySmall\"\n            weight={action.selected ? 'semiBold' : 'medium'}\n          >\n            {action.title}\n          </Text>\n          {action.description ? (\n            <Text emphasis=\"muted\" variant=\"caption\">\n              {action.description}\n            </Text>\n          ) : null}\n        </Stack>\n      </Box>\n      {action.trailing ? <Box>{action.trailing}</Box> : null}\n    </Inline>\n  );\n}\n\nexport function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }: MenuProps) {\n  const { theme } = useTheme();\n  const { bindKeydown } = useFocusManager();\n  const animation = resolveOverlayAnimation('menu');\n  const anchorRef = React.useRef<View | null>(null);\n  const [open, setOpen] = React.useState(false);\n  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);\n  const [activeIndex, setActiveIndex] = React.useState(0);\n\n  const closeMenu = React.useCallback(() => {\n    setOpen(false);\n    if (dismiss) {\n      dismiss();\n    }\n  }, [dismiss]);\n\n  const activateAction = React.useCallback(\n    (action: MenuAction) => {\n      if (action.disabled) {\n        return;\n      }\n\n      if (action.activate) {\n        action.activate();\n      }\n\n      if (closeOnSelect) {\n        closeMenu();\n      }\n    },\n    [closeMenu, closeOnSelect],\n  );\n\n  const openMenu = React.useCallback(() => {\n    measureNode(anchorRef.current, setLayout);\n    const firstEnabledIndex = actions.findIndex((action) => !action.disabled);\n    setActiveIndex(firstEnabledIndex === -1 ? 0 : firstEnabledIndex);\n    setOpen(true);\n  }, [actions]);\n\n  React.useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    return bindKeydown((event) => {\n      const { key } = event;\n      if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') {\n        event.preventDefault();\n        setActiveIndex((current) => resolveNextMenuIndex(actions, current, key));\n      }\n\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        const activeAction = actions[activeIndex];\n        if (activeAction) {\n          activateAction(activeAction);\n        }\n      }\n\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        closeMenu();\n      }\n    });\n  }, [activateAction, actions, activeIndex, bindKeydown, closeMenu, open]);\n\n  return (\n    <View collapsable={false} ref={anchorRef}>\n      <ButtonBase\n        onPress={open ? closeMenu : openMenu}\n        testID={testID ? `${testID}-trigger` : undefined}\n      >\n        {trigger}\n      </ButtonBase>\n      <Portal layer=\"menu\" visible={open && Boolean(layout)}>\n        <View\n          pointerEvents=\"box-none\"\n          style={{\n            bottom: 0,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n          }}\n        >\n          <Pressable\n            onPress={closeMenu}\n            style={{\n              bottom: 0,\n              left: 0,\n              position: 'absolute',\n              right: 0,\n              top: 0,\n            }}\n          />\n          <FocusScope active={open} onEscape={closeMenu}>\n            <View\n              style={{\n                left: layout?.x ?? 0,\n                position: 'absolute',\n                top: (layout?.y ?? 0) + (layout?.height ?? 0) + animation.offset,\n              }}\n            >\n              <Surface\n                accessibilityRole=\"menu\"\n                p=\"xs\"\n                style={{\n                  minWidth: Math.max(layout?.width ?? 0, 220),\n                  shadowOpacity: 0.12,\n                  shadowRadius: 12,\n                  shadowOffset: { width: 0, height: 6 },\n                }}\n                testID={testID}\n                variant=\"raised\"\n              >\n                {actions.map((action, index) => {\n                  const active = index === activeIndex;\n                  const selected = action.selected ?? active;\n\n                  return (\n                    <Pressable\n                      accessibilityRole=\"menuitem\"\n                      accessibilityState={{ disabled: action.disabled, selected }}\n                      disabled={action.disabled}\n                      key={action.id}\n                      onPress={() => activateAction(action)}\n                    >\n                      <Box\n                        px=\"m\"\n                        py=\"s\"\n                        radius=\"s\"\n                        style={{\n                          backgroundColor: selected\n                            ? theme.semantics.action.neutral.softBg\n                            : 'transparent',\n                          opacity: action.disabled ? 0.56 : 1,\n                        }}\n                        testID={testID ? `${testID}-item-${action.id}` : undefined}\n                      >\n                        {renderActionContent(action, active)}\n                      </Box>\n                    </Pressable>\n                  );\n                })}\n              </Surface>\n            </View>\n          </FocusScope>\n        </View>\n      </Portal>\n    </View>\n  );\n}\n"]}

package/dist/components/menu/index.d.ts

@@ -1,3 +1,3 @@
 export { Menu } from './Menu';
-export type { MenuItem, MenuProps } from './types';
+export type { MenuAction, MenuActionIntent, MenuAction as MenuItem, MenuProps } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,IAAI,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { Menu } from './Menu';\nexport type { MenuItem, MenuProps } from './types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { Menu } from './Menu';\nexport type { MenuAction, MenuActionIntent, MenuAction as MenuItem, MenuProps } from './types';\n"]}

package/dist/components/menu/navigation.d.ts

@@ -1,4 +1,4 @@
-export declare function resolveNextMenuIndex(items: {
+export declare function resolveNextMenuIndex(items: readonly {
     disabled?: boolean;
 }[], currentIndex: number, key: 'ArrowDown' | 'ArrowUp' | 'Home' | 'End'): number;
 //# sourceMappingURL=navigation.d.ts.map

package/dist/components/menu/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/components/menu/navigation.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAClC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAAE,EAC/B,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAC5C,MAAM,CA6BR"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/components/menu/navigation.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAAE,EACxC,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAC5C,MAAM,CA6BR"}

package/dist/components/menu/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../src/components/menu/navigation.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAClC,KAA+B,EAC/B,YAAoB,EACpB,GAA6C;IAE7C,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAW,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QACrE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAChC,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;IAED,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;QACnB,OAAO,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACjC,CAAC;IAED,IAAI,GAAG,KAAK,KAAK,EAAE,CAAC;QAClB,OAAO,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAChE,MAAM,gBAAgB,GACpB,kBAAkB,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,GAAG,KAAK,SAAS;YACjB,CAAC,CAAC,CAAC,kBAAkB,GAAG,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM;YAC1E,CAAC,CAAC,CAAC,kBAAkB,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC;IAEzD,OAAO,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;AAChD,CAAC","sourcesContent":["export function resolveNextMenuIndex(\n  items: { disabled?: boolean }[],\n  currentIndex: number,\n  key: 'ArrowDown' | 'ArrowUp' | 'Home' | 'End',\n): number {\n  const enabledIndexes = items.reduce<number[]>((indexes, item, index) => {\n    if (!item.disabled) {\n      indexes.push(index);\n    }\n    return indexes;\n  }, []);\n\n  if (enabledIndexes.length === 0) {\n    return -1;\n  }\n\n  if (key === 'Home') {\n    return enabledIndexes[0] ?? -1;\n  }\n\n  if (key === 'End') {\n    return enabledIndexes[enabledIndexes.length - 1] ?? -1;\n  }\n\n  const activeEnabledIndex = enabledIndexes.indexOf(currentIndex);\n  const nextEnabledIndex =\n    activeEnabledIndex === -1\n      ? 0\n      : key === 'ArrowUp'\n        ? (activeEnabledIndex - 1 + enabledIndexes.length) % enabledIndexes.length\n        : (activeEnabledIndex + 1) % enabledIndexes.length;\n\n  return enabledIndexes[nextEnabledIndex] ?? -1;\n}\n"]}
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../src/components/menu/navigation.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAClC,KAAwC,EACxC,YAAoB,EACpB,GAA6C;IAE7C,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAW,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QACrE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAChC,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;IAED,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;QACnB,OAAO,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACjC,CAAC;IAED,IAAI,GAAG,KAAK,KAAK,EAAE,CAAC;QAClB,OAAO,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAChE,MAAM,gBAAgB,GACpB,kBAAkB,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,GAAG,KAAK,SAAS;YACjB,CAAC,CAAC,CAAC,kBAAkB,GAAG,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM;YAC1E,CAAC,CAAC,CAAC,kBAAkB,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC;IAEzD,OAAO,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;AAChD,CAAC","sourcesContent":["export function resolveNextMenuIndex(\n  items: readonly { disabled?: boolean }[],\n  currentIndex: number,\n  key: 'ArrowDown' | 'ArrowUp' | 'Home' | 'End',\n): number {\n  const enabledIndexes = items.reduce<number[]>((indexes, item, index) => {\n    if (!item.disabled) {\n      indexes.push(index);\n    }\n    return indexes;\n  }, []);\n\n  if (enabledIndexes.length === 0) {\n    return -1;\n  }\n\n  if (key === 'Home') {\n    return enabledIndexes[0] ?? -1;\n  }\n\n  if (key === 'End') {\n    return enabledIndexes[enabledIndexes.length - 1] ?? -1;\n  }\n\n  const activeEnabledIndex = enabledIndexes.indexOf(currentIndex);\n  const nextEnabledIndex =\n    activeEnabledIndex === -1\n      ? 0\n      : key === 'ArrowUp'\n        ? (activeEnabledIndex - 1 + enabledIndexes.length) % enabledIndexes.length\n        : (activeEnabledIndex + 1) % enabledIndexes.length;\n\n  return enabledIndexes[nextEnabledIndex] ?? -1;\n}\n"]}

package/dist/components/menu/types.d.ts

@@ -1,14 +1,20 @@
 import type React from 'react';
-export interface MenuItem {
+export type MenuActionIntent = 'default' | 'danger';
+export interface MenuAction {
     id: string;
-    label: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    intent?: MenuActionIntent;
     disabled?: boolean;
-    onPress?: (() => void) | undefined;
+    selected?: boolean;
+    activate?: () => void;
 }
 export interface MenuProps {
     trigger?: React.ReactNode;
-    items: MenuItem[];
-    onDismiss?: (() => void) | undefined;
+    actions: readonly MenuAction[];
+    dismiss?: () => void;
     closeOnSelect?: boolean;
     testID?: string;
 }

package/dist/components/menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/menu/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nexport interface MenuItem {\n  id: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n  onPress?: (() => void) | undefined;\n}\n\nexport interface MenuProps {\n  trigger?: React.ReactNode;\n  items: MenuItem[];\n  onDismiss?: (() => void) | undefined;\n  closeOnSelect?: boolean;\n  testID?: string;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/menu/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nexport type MenuActionIntent = 'default' | 'danger';\n\nexport interface MenuAction {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  intent?: MenuActionIntent;\n  disabled?: boolean;\n  selected?: boolean;\n  activate?: () => void;\n}\n\nexport interface MenuProps {\n  trigger?: React.ReactNode;\n  actions: readonly MenuAction[];\n  dismiss?: () => void;\n  closeOnSelect?: boolean;\n  testID?: string;\n}\n"]}

package/dist/examples/DocsExamples.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export declare function ProviderExample(): React.JSX.Element;
-export declare function FormAndOverlayExample(): React.JSX.Element;
+export declare function FormExample(): React.JSX.Element;
+export declare function FeedbackExample(): React.JSX.Element;
+export declare function OverlayExample(): React.JSX.Element;
 export declare function NavigationExample(): React.JSX.Element;
 //# sourceMappingURL=DocsExamples.d.ts.map

package/dist/examples/DocsExamples.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsExamples.d.ts","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuC1B,wBAAgB,eAAe,sBAY9B;AAED,wBAAgB,qBAAqB,sBA0BpC;AAED,wBAAgB,iBAAiB,sBAgChC"}
+{"version":3,"file":"DocsExamples.d.ts","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,wBAAgB,WAAW,sBAY1B;AAeD,wBAAgB,eAAe,sBAa9B;AAED,wBAAgB,cAAc,sBAyB7B;AAED,wBAAgB,iBAAiB,sBAgChC"}

package/dist/examples/DocsExamples.js

@@ -1,48 +1,72 @@
 import React from 'react';
-import { Badge, Box, Button, Checkbox, Drawer, Field, HelperText, Label, Menu, Modal, Radio, Stack, Switch, Tab, TabList, TabPanel, Tabs, Text, Textarea, TextInput, ThemeProvider, } from '../index';
+import { Button } from '../components/button';
+import { Card } from '../components/card';
+import { Checkbox } from '../components/checkbox';
+import { Drawer } from '../components/drawer';
+import { Field } from '../components/field';
+import { HelperText } from '../components/helper-text';
+import { Menu } from '../components/menu';
+import { Modal } from '../components/modal';
+import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
+import { TextInput } from '../components/text-input';
+import { ToastProvider, useToast } from '../components/toast';
+import { Tooltip } from '../components/tooltip';
+import { Box, Stack } from '../layout';
+import { Text } from '../primitives/text';
+import { ThemeProvider } from '../theme';
 const docsThemeConfig = {
-    id: 'docs-example',
-    name: 'Docs Example',
-    light: {
-        harmony: 'monochromatic',
-        primaryColor: '#2563eb',
-    },
-    dark: {
-        harmony: 'monochromatic',
-        primaryColor: '#2563eb',
-    },
+    id: 'docs',
+    name: 'Docs',
+    light: { primaryColor: '#2563EB', harmony: 'analogous' },
+    dark: { primaryColor: '#60A5FA', harmony: 'analogous' },
 };
-export function ProviderExample() {
+export function FormExample() {
     return (<ThemeProvider initialConfig={docsThemeConfig}>
       <Stack gap="m" p="l">
-        <Text variant="body">Surface starter</Text>
-        <Badge color="success" content="Foundation"/>
-        <Button color="warning" variant="soft">
-          Continue
-        </Button>
+        <Field helperText="Use your work email." label="Email" required>
+          <TextInput placeholder="you@example.com"/>
+        </Field>
+        <Checkbox checked>Accept terms</Checkbox>
+        <HelperText emphasis="muted">Looks good.</HelperText>
       </Stack>
     </ThemeProvider>);
 }
-export function FormAndOverlayExample() {
+function ToastButton() {
+    const { showToast } = useToast();
+    return (<Button onPress={() => showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })}>
+      Show toast
+    </Button>);
+}
+export function FeedbackExample() {
     return (<ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Field helperText="We only use this for sign-in." label="Email">
-          <TextInput placeholder="name@example.com"/>
-        </Field>
-        <Field errorText="Bio is required." invalid label="Bio">
-          <Textarea placeholder="Tell us a little about yourself"/>
-        </Field>
-        <Stack gap="s">
-          <Label required>Preferences</Label>
-          <Checkbox defaultChecked>Weekly updates</Checkbox>
-          <Radio>Product announcements</Radio>
-          <Switch readOnly>Read-only setting</Switch>
-          <HelperText color="error">Invalid fields should reuse the same error color.</HelperText>
+      <ToastProvider>
+        <Stack gap="m" p="l">
+          <Tooltip content="Helpful contextual information">
+            <Text>Hover for tooltip</Text>
+          </Tooltip>
+          <ToastButton />
         </Stack>
-        <Modal visible={false}>
-          <Text>Modal content</Text>
+      </ToastProvider>
+    </ThemeProvider>);
+}
+export function OverlayExample() {
+    const [modalVisible, setModalVisible] = React.useState(false);
+    const [drawerVisible, setDrawerVisible] = React.useState(false);
+    return (<ThemeProvider initialConfig={docsThemeConfig}>
+      <Stack gap="m" p="l">
+        <Button onPress={() => setModalVisible(true)}>Open modal</Button>
+        <Button onPress={() => setDrawerVisible(true)}>Open drawer</Button>
+        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>
+          <Card>
+            <Stack gap="s">
+              <Text variant="label" weight="semiBold">
+                Modal title
+              </Text>
+              <Text>Modal content</Text>
+            </Stack>
+          </Card>
         </Modal>
-        <Drawer visible={false}>
+        <Drawer onDismiss={() => setDrawerVisible(false)} visible={drawerVisible}>
           <Text>Drawer content</Text>
         </Drawer>
       </Stack>
@@ -66,9 +90,9 @@ export function NavigationExample() {
             <Text>Billing settings</Text>
           </TabPanel>
         </Tabs>
-        <Menu items={[
-            { id: 'edit', label: 'Edit' },
-            { disabled: true, id: 'archive', label: 'Archive' },
+        <Menu actions={[
+            { id: 'edit', title: 'Edit' },
+            { disabled: true, id: 'archive', title: 'Archive' },
         ]} trigger={<Text>Open menu</Text>}/>
         <Box>
           <Text color="success">Theme overrides can stay semantic.</Text>

package/dist/examples/DocsExamples.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocsExamples.js","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n  Badge,\n  Box,\n  Button,\n  Checkbox,\n  Drawer,\n  Field,\n  HelperText,\n  Label,\n  Menu,\n  Modal,\n  Radio,\n  Stack,\n  Switch,\n  Tab,\n  TabList,\n  TabPanel,\n  Tabs,\n  Text,\n  Textarea,\n  TextInput,\n  ThemeProvider,\n} from '../index';\n\nconst docsThemeConfig = {\n  id: 'docs-example',\n  name: 'Docs Example',\n  light: {\n    harmony: 'monochromatic' as const,\n    primaryColor: '#2563eb',\n  },\n  dark: {\n    harmony: 'monochromatic' as const,\n    primaryColor: '#2563eb',\n  },\n};\n\nexport function ProviderExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Text variant=\"body\">Surface starter</Text>\n        <Badge color=\"success\" content=\"Foundation\" />\n        <Button color=\"warning\" variant=\"soft\">\n          Continue\n        </Button>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nexport function FormAndOverlayExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Field helperText=\"We only use this for sign-in.\" label=\"Email\">\n          <TextInput placeholder=\"name@example.com\" />\n        </Field>\n        <Field errorText=\"Bio is required.\" invalid label=\"Bio\">\n          <Textarea placeholder=\"Tell us a little about yourself\" />\n        </Field>\n        <Stack gap=\"s\">\n          <Label required>Preferences</Label>\n          <Checkbox defaultChecked>Weekly updates</Checkbox>\n          <Radio>Product announcements</Radio>\n          <Switch readOnly>Read-only setting</Switch>\n          <HelperText color=\"error\">Invalid fields should reuse the same error color.</HelperText>\n        </Stack>\n        <Modal visible={false}>\n          <Text>Modal content</Text>\n        </Modal>\n        <Drawer visible={false}>\n          <Text>Drawer content</Text>\n        </Drawer>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nexport function NavigationExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Tabs defaultValue=\"account\">\n          <TabList>\n            <Tab value=\"account\">Account</Tab>\n            <Tab disabled value=\"security\">\n              Security\n            </Tab>\n            <Tab value=\"billing\">Billing</Tab>\n          </TabList>\n          <TabPanel value=\"account\">\n            <Text>Account settings</Text>\n          </TabPanel>\n          <TabPanel value=\"billing\">\n            <Text>Billing settings</Text>\n          </TabPanel>\n        </Tabs>\n        <Menu\n          items={[\n            { id: 'edit', label: 'Edit' },\n            { disabled: true, id: 'archive', label: 'Archive' },\n          ]}\n          trigger={<Text>Open menu</Text>}\n        />\n        <Box>\n          <Text color=\"success\">Theme overrides can stay semantic.</Text>\n        </Box>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n"]}
+{"version":3,"file":"DocsExamples.js","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../components/button';\nimport { Card } from '../components/card';\nimport { Checkbox } from '../components/checkbox';\nimport { Drawer } from '../components/drawer';\nimport { Field } from '../components/field';\nimport { HelperText } from '../components/helper-text';\nimport { Menu } from '../components/menu';\nimport { Modal } from '../components/modal';\nimport { Tab, TabList, TabPanel, Tabs } from '../components/tabs';\nimport { TextInput } from '../components/text-input';\nimport { ToastProvider, useToast } from '../components/toast';\nimport { Tooltip } from '../components/tooltip';\nimport { Box, Stack } from '../layout';\nimport { Text } from '../primitives/text';\nimport { ThemeProvider } from '../theme';\nimport type { ThemeConfig } from '../theme/types';\n\nconst docsThemeConfig: ThemeConfig = {\n  id: 'docs',\n  name: 'Docs',\n  light: { primaryColor: '#2563EB', harmony: 'analogous' },\n  dark: { primaryColor: '#60A5FA', harmony: 'analogous' },\n};\n\nexport function FormExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Field helperText=\"Use your work email.\" label=\"Email\" required>\n          <TextInput placeholder=\"you@example.com\" />\n        </Field>\n        <Checkbox checked>Accept terms</Checkbox>\n        <HelperText emphasis=\"muted\">Looks good.</HelperText>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nfunction ToastButton() {\n  const { showToast } = useToast();\n  return (\n    <Button\n      onPress={() =>\n        showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })\n      }\n    >\n      Show toast\n    </Button>\n  );\n}\n\nexport function FeedbackExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <ToastProvider>\n        <Stack gap=\"m\" p=\"l\">\n          <Tooltip content=\"Helpful contextual information\">\n            <Text>Hover for tooltip</Text>\n          </Tooltip>\n          <ToastButton />\n        </Stack>\n      </ToastProvider>\n    </ThemeProvider>\n  );\n}\n\nexport function OverlayExample() {\n  const [modalVisible, setModalVisible] = React.useState(false);\n  const [drawerVisible, setDrawerVisible] = React.useState(false);\n\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Button onPress={() => setModalVisible(true)}>Open modal</Button>\n        <Button onPress={() => setDrawerVisible(true)}>Open drawer</Button>\n        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>\n          <Card>\n            <Stack gap=\"s\">\n              <Text variant=\"label\" weight=\"semiBold\">\n                Modal title\n              </Text>\n              <Text>Modal content</Text>\n            </Stack>\n          </Card>\n        </Modal>\n        <Drawer onDismiss={() => setDrawerVisible(false)} visible={drawerVisible}>\n          <Text>Drawer content</Text>\n        </Drawer>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nexport function NavigationExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Tabs defaultValue=\"account\">\n          <TabList>\n            <Tab value=\"account\">Account</Tab>\n            <Tab disabled value=\"security\">\n              Security\n            </Tab>\n            <Tab value=\"billing\">Billing</Tab>\n          </TabList>\n          <TabPanel value=\"account\">\n            <Text>Account settings</Text>\n          </TabPanel>\n          <TabPanel value=\"billing\">\n            <Text>Billing settings</Text>\n          </TabPanel>\n        </Tabs>\n        <Menu\n          actions={[\n            { id: 'edit', title: 'Edit' },\n            { disabled: true, id: 'archive', title: 'Archive' },\n          ]}\n          trigger={<Text>Open menu</Text>}\n        />\n        <Box>\n          <Text color=\"success\">Theme overrides can stay semantic.</Text>\n        </Box>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export type { LabelProps } from './components/label';
 export { Label } from './components/label';
 export type { ListItemProps } from './components/list-item';
 export { ListItem } from './components/list-item';
-export type { MenuItem, MenuProps } from './components/menu';
+export type { MenuAction, MenuActionIntent, MenuItem, MenuProps } from './components/menu';
 export { Menu } from './components/menu';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAW3C,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,MAAM,EACN,UAAU,GACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAOzC,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export type { ActionSheetItemProps, ActionSheetProps } from './components/action-sheet';\nexport { ActionSheet, ActionSheetItem } from './components/action-sheet';\nexport type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonIconSpec, ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxProps } from './components/checkbox';\nexport { Checkbox } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { FieldProps } from './components/field';\nexport { Field } from './components/field';\nexport type { HelperTextProps } from './components/helper-text';\nexport { HelperText } from './components/helper-text';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { LabelProps } from './components/label';\nexport { Label } from './components/label';\nexport type { ListItemProps } from './components/list-item';\nexport { ListItem } from './components/list-item';\nexport type { MenuItem, MenuProps } from './components/menu';\nexport { Menu } from './components/menu';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type {\n  DrawerNavigationItemProps,\n  DrawerNavigationProps,\n  NavigationItemIcon,\n  NavigationItemProps,\n  NavigationItemSpec,\n  NavigationListProps,\n  TabBarItemProps,\n  TabBarProps,\n} from './components/navigation';\nexport {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';\nexport type { RadioProps } from './components/radio';\nexport { Radio } from './components/radio';\nexport type { SwitchProps } from './components/switch';\nexport { Switch } from './components/switch';\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';\nexport { Tab, TabList, TabPanel, Tabs } from './components/tabs';\nexport type { TextInputProps } from './components/text-input';\nexport { TextInput } from './components/text-input';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToastOptions, ToastProps, ToastStatus } from './components/toast';\nexport { Toast, ToastProvider, useToast } from './components/toast';\nexport type { TooltipProps } from './components/tooltip';\nexport { Tooltip } from './components/tooltip';\nexport type { FontRuntime } from './context/FontContext';\nexport { FontProvider, useFontContext } from './context/FontContext';\nexport type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';\nexport { TranslationProvider, useTranslationContext } from './context/TranslationContext';\nexport * from './core/responsive';\nexport * from './layout';\nexport type { ButtonBaseProps } from './primitives/button-base';\nexport { ButtonBase } from './primitives/button-base';\nexport type { HeadingLevel, HeadingProps } from './primitives/heading';\nexport { Heading } from './primitives/heading';\nexport type { IconProps, IconProvider } from './primitives/icon';\nexport { Icon } from './primitives/icon';\nexport type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/image';\nexport { Image } from './primitives/image';\nexport type { TextProps } from './primitives/text';\nexport { Text } from './primitives/text';\nexport type {\n  SurfaceColor,\n  SurfaceEmphasis,\n  SurfacePaletteColor,\n  SurfaceStatusColor,\n} from './surfaceColor';\nexport {\n  SURFACE_COLORS,\n  SURFACE_EMPHASES,\n  SURFACE_PALETTE_COLORS,\n  SURFACE_STATUS_COLORS,\n} from './surfaceColor';\nexport * from './theme';\nexport { isDeepEqual } from './utils/deepEqual';\nexport { deepMerge } from './utils/deepMerge';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAW3C,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,MAAM,EACN,UAAU,GACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAOzC,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export type { ActionSheetItemProps, ActionSheetProps } from './components/action-sheet';\nexport { ActionSheet, ActionSheetItem } from './components/action-sheet';\nexport type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonIconSpec, ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxProps } from './components/checkbox';\nexport { Checkbox } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { FieldProps } from './components/field';\nexport { Field } from './components/field';\nexport type { HelperTextProps } from './components/helper-text';\nexport { HelperText } from './components/helper-text';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { LabelProps } from './components/label';\nexport { Label } from './components/label';\nexport type { ListItemProps } from './components/list-item';\nexport { ListItem } from './components/list-item';\nexport type { MenuAction, MenuActionIntent, MenuItem, MenuProps } from './components/menu';\nexport { Menu } from './components/menu';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type {\n  DrawerNavigationItemProps,\n  DrawerNavigationProps,\n  NavigationItemIcon,\n  NavigationItemProps,\n  NavigationItemSpec,\n  NavigationListProps,\n  TabBarItemProps,\n  TabBarProps,\n} from './components/navigation';\nexport {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';\nexport type { RadioProps } from './components/radio';\nexport { Radio } from './components/radio';\nexport type { SwitchProps } from './components/switch';\nexport { Switch } from './components/switch';\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';\nexport { Tab, TabList, TabPanel, Tabs } from './components/tabs';\nexport type { TextInputProps } from './components/text-input';\nexport { TextInput } from './components/text-input';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToastOptions, ToastProps, ToastStatus } from './components/toast';\nexport { Toast, ToastProvider, useToast } from './components/toast';\nexport type { TooltipProps } from './components/tooltip';\nexport { Tooltip } from './components/tooltip';\nexport type { FontRuntime } from './context/FontContext';\nexport { FontProvider, useFontContext } from './context/FontContext';\nexport type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';\nexport { TranslationProvider, useTranslationContext } from './context/TranslationContext';\nexport * from './core/responsive';\nexport * from './layout';\nexport type { ButtonBaseProps } from './primitives/button-base';\nexport { ButtonBase } from './primitives/button-base';\nexport type { HeadingLevel, HeadingProps } from './primitives/heading';\nexport { Heading } from './primitives/heading';\nexport type { IconProps, IconProvider } from './primitives/icon';\nexport { Icon } from './primitives/icon';\nexport type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/image';\nexport { Image } from './primitives/image';\nexport type { TextProps } from './primitives/text';\nexport { Text } from './primitives/text';\nexport type {\n  SurfaceColor,\n  SurfaceEmphasis,\n  SurfacePaletteColor,\n  SurfaceStatusColor,\n} from './surfaceColor';\nexport {\n  SURFACE_COLORS,\n  SURFACE_EMPHASES,\n  SURFACE_PALETTE_COLORS,\n  SURFACE_STATUS_COLORS,\n} from './surfaceColor';\nexport * from './theme';\nexport { isDeepEqual } from './utils/deepEqual';\nexport { deepMerge } from './utils/deepMerge';\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {

package/src/components/menu/Menu.tsx

@@ -5,12 +5,12 @@ import { FocusScope } from '../../internal/focus/FocusScope';
 import { useFocusManager } from '../../internal/focus/useFocusManager';
 import { Portal } from '../../internal/overlay/Portal';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Box, Surface } from '../../layout';
+import { Box, Inline, Stack, Surface } from '../../layout';
 import { ButtonBase } from '../../primitives/button-base';
 import { Text } from '../../primitives/text';
 import { useTheme } from '../../theme/ThemeContext';
 import { resolveNextMenuIndex } from './navigation';
-import type { MenuProps } from './types';
+import type { MenuAction, MenuProps } from './types';
 
 interface MeasurableNode {
   measureInWindow?: (
@@ -25,7 +25,35 @@ function measureNode(node: unknown, callback: (layout: LayoutRectangle) => void)
   });
 }
 
-export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }: MenuProps) {
+function renderActionContent(action: MenuAction, active: boolean) {
+  const titleColor =
+    action.intent === 'danger' ? 'danger' : active || action.selected ? 'neutral' : undefined;
+
+  return (
+    <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
+      {action.leading ? <Box>{action.leading}</Box> : null}
+      <Box flex={1}>
+        <Stack gap="xxs">
+          <Text
+            color={titleColor}
+            variant="bodySmall"
+            weight={action.selected ? 'semiBold' : 'medium'}
+          >
+            {action.title}
+          </Text>
+          {action.description ? (
+            <Text emphasis="muted" variant="caption">
+              {action.description}
+            </Text>
+          ) : null}
+        </Stack>
+      </Box>
+      {action.trailing ? <Box>{action.trailing}</Box> : null}
+    </Inline>
+  );
+}
+
+export function Menu({ trigger, actions, dismiss, closeOnSelect = true, testID }: MenuProps) {
   const { theme } = useTheme();
   const { bindKeydown } = useFocusManager();
   const animation = resolveOverlayAnimation('menu');
@@ -36,15 +64,34 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
 
   const closeMenu = React.useCallback(() => {
     setOpen(false);
-    onDismiss?.();
-  }, [onDismiss]);
+    if (dismiss) {
+      dismiss();
+    }
+  }, [dismiss]);
+
+  const activateAction = React.useCallback(
+    (action: MenuAction) => {
+      if (action.disabled) {
+        return;
+      }
+
+      if (action.activate) {
+        action.activate();
+      }
+
+      if (closeOnSelect) {
+        closeMenu();
+      }
+    },
+    [closeMenu, closeOnSelect],
+  );
 
   const openMenu = React.useCallback(() => {
     measureNode(anchorRef.current, setLayout);
-    const firstEnabledIndex = items.findIndex((item) => !item.disabled);
+    const firstEnabledIndex = actions.findIndex((action) => !action.disabled);
     setActiveIndex(firstEnabledIndex === -1 ? 0 : firstEnabledIndex);
     setOpen(true);
-  }, [items]);
+  }, [actions]);
 
   React.useEffect(() => {
     if (!open) {
@@ -55,17 +102,14 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
       const { key } = event;
       if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') {
         event.preventDefault();
-        setActiveIndex((current) => resolveNextMenuIndex(items, current, key));
+        setActiveIndex((current) => resolveNextMenuIndex(actions, current, key));
       }
 
       if (event.key === 'Enter') {
         event.preventDefault();
-        const activeItem = items[activeIndex];
-        if (activeItem && !activeItem.disabled) {
-          activeItem.onPress?.();
-          if (closeOnSelect) {
-            closeMenu();
-          }
+        const activeAction = actions[activeIndex];
+        if (activeAction) {
+          activateAction(activeAction);
         }
       }
 
@@ -74,7 +118,7 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
         closeMenu();
       }
     });
-  }, [activeIndex, bindKeydown, closeMenu, closeOnSelect, items, open]);
+  }, [activateAction, actions, activeIndex, bindKeydown, closeMenu, open]);
 
   return (
     <View collapsable={false} ref={anchorRef}>
@@ -117,7 +161,7 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
                 accessibilityRole="menu"
                 p="xs"
                 style={{
-                  minWidth: Math.max(layout?.width ?? 0, 180),
+                  minWidth: Math.max(layout?.width ?? 0, 220),
                   shadowOpacity: 0.12,
                   shadowRadius: 12,
                   shadowOffset: { width: 0, height: 6 },
@@ -125,40 +169,31 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
                 testID={testID}
                 variant="raised"
               >
-                {items.map((item, index) => {
-                  const selected = index === activeIndex;
+                {actions.map((action, index) => {
+                  const active = index === activeIndex;
+                  const selected = action.selected ?? active;
 
                   return (
                     <Pressable
                       accessibilityRole="menuitem"
-                      accessibilityState={{ disabled: item.disabled, selected }}
-                      disabled={item.disabled}
-                      key={item.id}
-                      onPress={() => {
-                        if (item.disabled) {
-                          return;
-                        }
-
-                        item.onPress?.();
-                        if (closeOnSelect) {
-                          closeMenu();
-                        }
-                      }}
+                      accessibilityState={{ disabled: action.disabled, selected }}
+                      disabled={action.disabled}
+                      key={action.id}
+                      onPress={() => activateAction(action)}
                     >
                       <Box
                         px="m"
                         py="s"
+                        radius="s"
                         style={{
                           backgroundColor: selected
                             ? theme.semantics.action.neutral.softBg
                             : 'transparent',
-                          opacity: item.disabled ? 0.56 : 1,
+                          opacity: action.disabled ? 0.56 : 1,
                         }}
-                        testID={testID ? `${testID}-item-${item.id}` : undefined}
+                        testID={testID ? `${testID}-item-${action.id}` : undefined}
                       >
-                        <Text color={selected ? 'neutral' : undefined} variant="bodySmall">
-                          {item.label}
-                        </Text>
+                        {renderActionContent(action, active)}
                       </Box>
                     </Pressable>
                   );

package/src/components/menu/index.ts

@@ -1,2 +1,2 @@
 export { Menu } from './Menu';
-export type { MenuItem, MenuProps } from './types';
+export type { MenuAction, MenuActionIntent, MenuAction as MenuItem, MenuProps } from './types';

package/src/components/menu/navigation.ts

@@ -1,5 +1,5 @@
 export function resolveNextMenuIndex(
-  items: { disabled?: boolean }[],
+  items: readonly { disabled?: boolean }[],
   currentIndex: number,
   key: 'ArrowDown' | 'ArrowUp' | 'Home' | 'End',
 ): number {

package/src/components/menu/types.ts

@@ -1,16 +1,23 @@
 import type React from 'react';
 
-export interface MenuItem {
+export type MenuActionIntent = 'default' | 'danger';
+
+export interface MenuAction {
   id: string;
-  label: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  intent?: MenuActionIntent;
   disabled?: boolean;
-  onPress?: (() => void) | undefined;
+  selected?: boolean;
+  activate?: () => void;
 }
 
 export interface MenuProps {
   trigger?: React.ReactNode;
-  items: MenuItem[];
-  onDismiss?: (() => void) | undefined;
+  actions: readonly MenuAction[];
+  dismiss?: () => void;
   closeOnSelect?: boolean;
   testID?: string;
 }

package/src/examples/DocsExamples.tsx

@@ -1,77 +1,91 @@
 import React from 'react';
 
-import {
-  Badge,
-  Box,
-  Button,
-  Checkbox,
-  Drawer,
-  Field,
-  HelperText,
-  Label,
-  Menu,
-  Modal,
-  Radio,
-  Stack,
-  Switch,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs,
-  Text,
-  Textarea,
-  TextInput,
-  ThemeProvider,
-} from '../index';
+import { Button } from '../components/button';
+import { Card } from '../components/card';
+import { Checkbox } from '../components/checkbox';
+import { Drawer } from '../components/drawer';
+import { Field } from '../components/field';
+import { HelperText } from '../components/helper-text';
+import { Menu } from '../components/menu';
+import { Modal } from '../components/modal';
+import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
+import { TextInput } from '../components/text-input';
+import { ToastProvider, useToast } from '../components/toast';
+import { Tooltip } from '../components/tooltip';
+import { Box, Stack } from '../layout';
+import { Text } from '../primitives/text';
+import { ThemeProvider } from '../theme';
+import type { ThemeConfig } from '../theme/types';
 
-const docsThemeConfig = {
-  id: 'docs-example',
-  name: 'Docs Example',
-  light: {
-    harmony: 'monochromatic' as const,
-    primaryColor: '#2563eb',
-  },
-  dark: {
-    harmony: 'monochromatic' as const,
-    primaryColor: '#2563eb',
-  },
+const docsThemeConfig: ThemeConfig = {
+  id: 'docs',
+  name: 'Docs',
+  light: { primaryColor: '#2563EB', harmony: 'analogous' },
+  dark: { primaryColor: '#60A5FA', harmony: 'analogous' },
 };
 
-export function ProviderExample() {
+export function FormExample() {
   return (
     <ThemeProvider initialConfig={docsThemeConfig}>
       <Stack gap="m" p="l">
-        <Text variant="body">Surface starter</Text>
-        <Badge color="success" content="Foundation" />
-        <Button color="warning" variant="soft">
-          Continue
-        </Button>
+        <Field helperText="Use your work email." label="Email" required>
+          <TextInput placeholder="you@example.com" />
+        </Field>
+        <Checkbox checked>Accept terms</Checkbox>
+        <HelperText emphasis="muted">Looks good.</HelperText>
       </Stack>
     </ThemeProvider>
   );
 }
 
-export function FormAndOverlayExample() {
+function ToastButton() {
+  const { showToast } = useToast();
+  return (
+    <Button
+      onPress={() =>
+        showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })
+      }
+    >
+      Show toast
+    </Button>
+  );
+}
+
+export function FeedbackExample() {
   return (
     <ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Field helperText="We only use this for sign-in." label="Email">
-          <TextInput placeholder="name@example.com" />
-        </Field>
-        <Field errorText="Bio is required." invalid label="Bio">
-          <Textarea placeholder="Tell us a little about yourself" />
-        </Field>
-        <Stack gap="s">
-          <Label required>Preferences</Label>
-          <Checkbox defaultChecked>Weekly updates</Checkbox>
-          <Radio>Product announcements</Radio>
-          <Switch readOnly>Read-only setting</Switch>
-          <HelperText color="error">Invalid fields should reuse the same error color.</HelperText>
+      <ToastProvider>
+        <Stack gap="m" p="l">
+          <Tooltip content="Helpful contextual information">
+            <Text>Hover for tooltip</Text>
+          </Tooltip>
+          <ToastButton />
         </Stack>
-        <Modal visible={false}>
-          <Text>Modal content</Text>
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+export function OverlayExample() {
+  const [modalVisible, setModalVisible] = React.useState(false);
+  const [drawerVisible, setDrawerVisible] = React.useState(false);
+
+  return (
+    <ThemeProvider initialConfig={docsThemeConfig}>
+      <Stack gap="m" p="l">
+        <Button onPress={() => setModalVisible(true)}>Open modal</Button>
+        <Button onPress={() => setDrawerVisible(true)}>Open drawer</Button>
+        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>
+          <Card>
+            <Stack gap="s">
+              <Text variant="label" weight="semiBold">
+                Modal title
+              </Text>
+              <Text>Modal content</Text>
+            </Stack>
+          </Card>
         </Modal>
-        <Drawer visible={false}>
+        <Drawer onDismiss={() => setDrawerVisible(false)} visible={drawerVisible}>
           <Text>Drawer content</Text>
         </Drawer>
       </Stack>
@@ -99,9 +113,9 @@ export function NavigationExample() {
           </TabPanel>
         </Tabs>
         <Menu
-          items={[
-            { id: 'edit', label: 'Edit' },
-            { disabled: true, id: 'archive', label: 'Archive' },
+          actions={[
+            { id: 'edit', title: 'Edit' },
+            { disabled: true, id: 'archive', title: 'Archive' },
           ]}
           trigger={<Text>Open menu</Text>}
         />

package/src/index.ts

@@ -20,7 +20,7 @@ export type { LabelProps } from './components/label';
 export { Label } from './components/label';
 export type { ListItemProps } from './components/list-item';
 export { ListItem } from './components/list-item';
-export type { MenuItem, MenuProps } from './components/menu';
+export type { MenuAction, MenuActionIntent, MenuItem, MenuProps } from './components/menu';
 export { Menu } from './components/menu';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';