@tanishqkancharla/maui 0.0.65 → 0.0.67

package/dist/components/Dialog.js

@@ -73,10 +73,14 @@ const dialog = style({
 const title = style(text({ size: "lg", fontWeight: 600 }), {
     margin: 0,
 });
+// A scrolling box clips on both axes. The inset, offset by a negative margin,
+// keeps the rings and focus glow of full-width fields visible without moving them.
 const body = style({
     minWidth: 0,
     minHeight: 0,
     overflowY: "auto",
+    margin: `calc(-1 * ${spacing.value(3)})`,
+    padding: spacing.value(3),
 });
 const actions = style({
     display: "flex",

package/dist/maui.d.ts

@@ -43,6 +43,7 @@ export { LoadingScreen, type LoadingScreenProps, } from "./components/LoadingScr
 export { Icons, type IconProps } from "./components/Icons";
 export * from "./icons/root";
 export { ListBox, ListBoxItem, listBoxStyles, type ListBoxProps, type ListBoxItemProps, } from "./components/ListBox";
+export { Pressable } from "react-aria-components";
 export { MenuTrigger, Menu, MenuItem, menuStyles, type MenuTriggerProps, type MenuProps, type MenuItemProps, } from "./components/Menu";
 export { FuzzyString } from "./components/FuzzyString";
 export { Flex, Gap, Spacer, Divider, type FlexShadow, type FlexRadius, type FlexBorder, type FlexAlignItems, type FlexJustifyContent, type FlexBackground, } from "./components/Utils";

package/dist/maui.js

@@ -46,6 +46,7 @@ export { LoadingScreen, } from "./components/LoadingScreen";
 export { Icons } from "./components/Icons";
 export * from "./icons/root";
 export { ListBox, ListBoxItem, listBoxStyles, } from "./components/ListBox";
+export { Pressable } from "react-aria-components";
 export { MenuTrigger, Menu, MenuItem, menuStyles, } from "./components/Menu";
 export { FuzzyString } from "./components/FuzzyString";
 export { Flex, Gap, Spacer, Divider, } from "./components/Utils";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.65",
+	"version": "0.0.67",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/skills/maui/SKILL.md

@@ -16,6 +16,10 @@ Use Maui components. When one can't do what you need, build from the matching `r
 | --------------------------------------------- | --------------------------------- |
 | Tokens, `purse-styles`, motion, layout, theme | [tokens.md](references/tokens.md) |
 
+## Interactions
+
+- [Pressable](references/interactions/pressable.md) — custom press handling and trigger targets.
+
 ## Components
 
 | Page             | Reference                                                                                    |
@@ -37,7 +41,7 @@ Use Maui components. When one can't do what you need, build from the matching `r
 | Select           | [select.md](references/components/select.md)                                                 |
 | List box         | [list-box.md](references/components/list-box.md)                                             |
 | Table            | [table.md](references/components/table.md)                                                   |
-| Menu             | [menu.md](references/components/menu.md)                                                     |
+| Menu / context menu | [menu.md](references/components/menu.md)                                                  |
 | Tooltip          | [tooltip.md](references/components/tooltip.md)                                               |
 | Layout utilities | [layout-utilities.md](references/components/layout-utilities.md)                             |
 | FuzzyString      | [fuzzy-string.md](references/components/fuzzy-string.md)                                     |

package/skills/maui/references/components/buttons.md

@@ -93,5 +93,5 @@ Edge-anchored mobile nav is [`Drawer`](drawer.md), not this Dialog and not Overl
 - `modal({ size })` — RAC `Modal`; `size` is `"sm"` (default) | `"md"` | `"lg"`.
 - `dialog` — RAC `Dialog`.
 - `title` — RAC `Heading slot="title"`.
-- `body` — scrollable `div` inside the dialog.
+- `body` — scrollable `div` inside the dialog. A 6px inset, offset by a negative margin, keeps full-width field rings and focus glows unclipped.
 - `actions` — button row `div` inside the dialog.

package/skills/maui/references/components/menu.md

@@ -27,6 +27,28 @@ Exactly two children on `MenuTrigger`: **trigger**, then **menu**. Use Maui `But
 
 `placement` defaults to `"bottom start"`. Popover uses `shadow.strong` via `CollectionPopover`.
 
+## Context menus
+
+Use `trigger="contextMenu"` with the same `Menu` and `MenuItem`. Wrap custom targets in [Pressable](../interactions/pressable.md); its interaction reference covers target requirements and ordinary menu triggers. Maui `Button` already integrates with React Aria and needs no `Pressable` wrapper.
+
+```tsx
+import { MenuTrigger, Menu, MenuItem, Pressable } from "@tanishqkancharla/maui"
+
+<MenuTrigger trigger="contextMenu">
+  <Pressable>
+    <div role="button" tabIndex={0}>Report.pdf</div>
+  </Pressable>
+  <Menu aria-label="File actions" onAction={(key) => doAction(String(key))}>
+    <MenuItem id="rename">Rename</MenuItem>
+    <MenuItem id="delete">Delete</MenuItem>
+  </Menu>
+</MenuTrigger>
+```
+
+React Aria handles right-click, touch long-press, and OS/screen-reader context-menu commands (for example Shift+F10 on Windows/Linux or Control+Enter on macOS). Keep a visible Actions button offering the same actions; context menus are an enhancement, not the only entry point. Preserve native context menus on editable content and links when users need browser actions.
+
+The current popup still uses `CollectionPopover` defaults: a 6px offset and minimum width equal to the target width. Use a compact target when that sizing is appropriate. See [React Aria's context-menu documentation](https://react-aria.adobe.com/Menu#context-menu) for interaction details.
+
 ## Styles
 
 **Menu** — `menuStyles`

package/skills/maui/references/interactions/pressable.md

@@ -0,0 +1,25 @@
+# Pressable
+
+Import from `"@tanishqkancharla/maui"`. Maui directly re-exports React Aria's `Pressable` as a shared interaction primitive, not a menu-specific component. Prefer Maui `Button` when you do not need a custom control.
+
+## Press handling
+
+`Pressable` adds normalized press and focus behavior to one custom element, without styling or an extra DOM wrapper. `onPress` handles mouse, touch, keyboard, and screen-reader activation; React Aria handles cancellation, including scrolling away during a touch interaction.
+
+```tsx
+import { Pressable } from "@tanishqkancharla/maui"
+
+<Pressable onPress={handleAction}>
+  <button type="button">Custom control</button>
+</Pressable>
+```
+
+## Custom triggers
+
+Wrap a custom target in `Pressable` to connect it to React Aria triggers, including ordinary `MenuTrigger` dropdowns, context menus, and React Aria's `DialogTrigger`. Maui `Button` already handles trigger integration and needs no `Pressable` wrapper. See [Menu](../components/menu.md) for the context-menu recipe.
+
+## Child requirements
+
+- The single child must be a semantic interactive element or have an appropriate interactive ARIA role.
+- Custom components must forward their ref and spread props onto that element.
+- Apply your own styling with Maui tokens, including `focusRing()` for visible keyboard focus.

package/src/apps/JsxEditor/catalog.ts

@@ -1,3 +1,4 @@
+import { Pressable } from "react-aria-components"
 import { Avatar } from "../../components/Avatar"
 import { Badge } from "../../components/Badge"
 import { Banner } from "../../components/Banner"
@@ -441,8 +442,9 @@ export const catalog: CatalogComponent[] = [
 	},
 	{
 		name: "MenuTrigger",
-		info: "Exactly two children: a Maui Button trigger, then Menu. The trigger stays selected while open.",
+		info: "Exactly two children: a Maui Button or Pressable custom trigger, then Menu. Use trigger=\"contextMenu\" for right-click actions.",
 		attributes: [
+			{ name: "trigger", values: ["press", "longPress", "contextMenu"] },
 			{
 				name: "placement",
 				values: [
@@ -458,6 +460,11 @@ export const catalog: CatalogComponent[] = [
 			},
 		],
 	},
+	{
+		name: "Pressable",
+		info: "React Aria behavior for one custom interactive child. Adds no DOM wrapper or styling; the child must forward props and ref.",
+		attributes: [{ name: "isDisabled", boolean: true }],
+	},
 	{
 		name: "Menu",
 		info: "Popover collection of actions. Second child of MenuTrigger.",
@@ -607,6 +614,7 @@ export const previewScope: Record<string, unknown> = {
 	Menu,
 	MenuItem,
 	MenuTrigger,
+	Pressable,
 	MermaidDiagram,
 	Overlay,
 	MarkdownEditor,

package/src/apps/JsxEditor/lint.test.ts

@@ -168,6 +168,20 @@ describe("collectJsxDiagnosticsFromSource", () => {
 		)
 		expect(diagnostics).toEqual([])
 	})
+
+	test("accepts context menus with a Pressable custom target", () => {
+		const diagnostics = collectJsxDiagnosticsFromSource(
+			`<MenuTrigger trigger="contextMenu">
+				<Pressable>
+					<div role="button" tabIndex={0}>Report.pdf</div>
+				</Pressable>
+				<Menu aria-label="File actions">
+					<MenuItem id="rename">Rename</MenuItem>
+				</Menu>
+			</MenuTrigger>`,
+		)
+		expect(diagnostics).toEqual([])
+	})
 })
 
 describe("JSX editor catalog", () => {

package/src/components/Dialog.tsx

@@ -115,10 +115,14 @@ const title = style(text({ size: "lg", fontWeight: 600 }), {
 	margin: 0,
 })
 
+// A scrolling box clips on both axes. The inset, offset by a negative margin,
+// keeps the rings and focus glow of full-width fields visible without moving them.
 const body = style({
 	minWidth: 0,
 	minHeight: 0,
 	overflowY: "auto",
+	margin: `calc(-1 * ${spacing.value(3)})`,
+	padding: spacing.value(3),
 })
 
 const actions = style({

package/src/maui.ts

@@ -174,6 +174,7 @@ export {
 	type ListBoxProps,
 	type ListBoxItemProps,
 } from "./components/ListBox"
+export { Pressable } from "react-aria-components"
 export {
 	MenuTrigger,
 	Menu,

package/src/pages/MenuPage.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { Button } from "../components/Button"
 import { Code } from "../components/Code"
+import { CodeBlock } from "../components/CodeBlock"
 import { Menu, MenuItem, MenuTrigger } from "../components/Menu"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
@@ -15,7 +16,8 @@ export function MenuPage() {
 			<H2>Menu</H2>
 			<P>
 				A triggered collection of actions that opens in a popover. The
-				trigger is a Maui <Code>Button</Code>.
+				trigger can be a Maui <Code>Button</Code> or a custom target wrapped
+				in <Code>Pressable</Code>.
 			</P>
 			<H3>Default</H3>
 			<MenuTrigger>
@@ -57,6 +59,37 @@ export function MenuPage() {
 				</MenuTrigger>
 			</Flex>
 			{lastAction ? <P>Last action: {lastAction}</P> : null}
+			<H3>Context menus and custom triggers</H3>
+			<P>
+				Use <Code>trigger="contextMenu"</Code> with the same <Code>Menu</Code>{" "}
+				and <Code>MenuItem</Code>. Maui directly re-exports React Aria’s{" "}
+				<Code>Pressable</Code> to connect a custom target to the trigger.
+				Maui <Code>Button</Code> already handles this wiring.
+			</P>
+			<CodeBlock lang="tsx">{`import { MenuTrigger, Menu, MenuItem, Pressable } from "@tanishqkancharla/maui"
+
+<MenuTrigger trigger="contextMenu">
+  <Pressable>
+    <div role="button" tabIndex={0}>Report.pdf</div>
+  </Pressable>
+  <Menu aria-label="File actions" onAction={handleAction}>
+    <MenuItem id="rename">Rename</MenuItem>
+    <MenuItem id="delete">Delete</MenuItem>
+  </Menu>
+</MenuTrigger>`}</CodeBlock>
+			<P>
+				<Code>Pressable</Code> adds behavior without styling or an extra DOM
+				wrapper. Its single child needs an interactive semantic element or
+				ARIA role. Custom components must forward their ref and spread props
+				onto that element; give custom targets a visible keyboard focus style.
+			</P>
+			<P>
+				React Aria handles right-click, touch long-press, and OS or screen-reader
+				context-menu commands. Keep a visible Actions button offering the same
+				actions, and preserve native browser menus on editable content and links
+				when needed. The popup currently keeps the dropdown’s 6px offset and
+				minimum width equal to the target width.
+			</P>
 		</Prose>
 	)
 }