@delacour/react-native-ui 0.1.0-alpha.4 → 0.2.0-alpha.20261010061731

package/src/components/context-menu/context-menu.context.tsx

@@ -0,0 +1,91 @@
+import { createContext, type ReactElement, type ReactNode, use, useCallback, useMemo, useState } from "react";
+import { useMenuPart } from "../menu/menu.context";
+import type { MenuAnchorRect } from "../menu/menu.variants";
+import {
+	type ContextMenuAnchor,
+	type ContextMenuInvoker,
+	type ContextMenuPoint,
+	resolveContextAnchor,
+} from "./context-menu.variants";
+
+/** One hold (or screen-reader action) that opened the menu, as the trigger saw it. */
+export type ContextMenuInvocation = {
+	mode: ContextMenuAnchor;
+	point: ContextMenuPoint | null;
+	targetRect: MenuAnchorRect;
+	invokedBy: ContextMenuInvoker;
+	/**
+	 * The very rect handed to Menu's `open()`. Menu keeps it by identity, so a
+	 * mismatch means the menu was opened some other way — a parent flipping
+	 * `isOpen` — and this invocation is stale.
+	 */
+	opened: MenuAnchorRect;
+};
+
+export type ContextMenuContextValue = {
+	invocation: ContextMenuInvocation | null;
+	invoke: (invocation: ContextMenuInvocation) => void;
+	/** The trigger's children, which a bare `ContextMenu.Preview` lifts. */
+	content: ReactNode;
+	registerContent: (content: ReactNode) => void;
+};
+
+const ContextMenuContext = createContext<ContextMenuContextValue | null>(null);
+
+export function ContextMenuProvider({
+	value,
+	children,
+}: {
+	value: ContextMenuContextValue;
+	children: ReactNode;
+}): ReactElement {
+	return <ContextMenuContext value={value}>{children}</ContextMenuContext>;
+}
+ContextMenuProvider.displayName = "DelacourUI.ContextMenu.Provider";
+
+/** The context-menu context, for its own parts. Throws with the part's name outside a `ContextMenu`. */
+export function useContextMenuPart(part: string): ContextMenuContextValue {
+	const context = use(ContextMenuContext);
+	if (!context) throw new Error(`${part} must be used inside a <ContextMenu>.`);
+	return context;
+}
+
+/** The root's state: the last invocation and the trigger's registered children. */
+export function useContextMenuRootValue(): ContextMenuContextValue {
+	const [invocation, setInvocation] = useState<ContextMenuInvocation | null>(null);
+	const [content, setContent] = useState<ReactNode>(null);
+	const invoke = useCallback((next: ContextMenuInvocation) => setInvocation(next), []);
+	const registerContent = useCallback((next: ReactNode) => setContent(next), []);
+	return useMemo(
+		() => ({ content, invocation, invoke, registerContent }),
+		[content, invocation, invoke, registerContent]
+	);
+}
+
+/**
+ * Where the panel anchors and where the lifted preview sits, for this visit.
+ *
+ * Read by both `ContextMenu.Content` and `ContextMenu.Preview`, so the two can
+ * never disagree. A current invocation runs through `resolveContextAnchor`;
+ * without one (a controlled open) both fall back to the trigger rect Menu
+ * measured itself.
+ */
+export function useContextMenuTarget(
+	part: string,
+	hasPreview: boolean
+): { anchor: MenuAnchorRect | null; targetRect: MenuAnchorRect | null } {
+	const { anchor: menuAnchor } = useMenuPart(part);
+	const { invocation } = useContextMenuPart(part);
+	const current = invocation !== null && invocation.opened === menuAnchor ? invocation : null;
+	if (!current) return { anchor: menuAnchor, targetRect: menuAnchor };
+	return {
+		anchor: resolveContextAnchor({
+			hasPreview,
+			invokedBy: current.invokedBy,
+			mode: current.mode,
+			point: current.point,
+			targetRect: current.targetRect,
+		}),
+		targetRect: current.targetRect,
+	};
+}

package/src/components/context-menu/context-menu.tsx

@@ -0,0 +1,90 @@
+import type { ReactElement } from "react";
+import type { MenuProps } from "../menu/menu";
+import { MenuRootProvider, useMenuRootValue } from "../menu/menu.context";
+import { MenuBackground } from "../menu/menu-background";
+import { MenuCheckboxItem } from "../menu/menu-checkbox-item";
+import { MenuLabel } from "../menu/menu-label";
+import { MenuRadioGroup } from "../menu/menu-radio-group";
+import { MenuRadioItem } from "../menu/menu-radio-item";
+import { MenuSeparator } from "../menu/menu-separator";
+import { MenuSub } from "../menu/menu-sub";
+import { MenuSubContent } from "../menu/menu-sub-content";
+import { MenuSubTrigger } from "../menu/menu-sub-trigger";
+import { ContextMenuProvider, useContextMenuRootValue } from "./context-menu.context";
+import { ContextMenuContent } from "./context-menu-content";
+import { ContextMenuItem } from "./context-menu-item";
+import { ContextMenuPreview } from "./context-menu-preview";
+import { ContextMenuTrigger } from "./context-menu-trigger";
+
+/** Menu's own root props: the open state, and the haptic played when a row is chosen. */
+export type ContextMenuProps = MenuProps;
+
+function ContextMenuRoot({ children, isOpen, defaultOpen, onOpenChange, haptic }: ContextMenuProps): ReactElement {
+	const menu = useMenuRootValue({ defaultOpen, haptic, isOpen, onOpenChange });
+	const context = useContextMenuRootValue();
+	return (
+		<MenuRootProvider value={menu}>
+			<ContextMenuProvider value={context}>{children}</ContextMenuProvider>
+		</MenuRootProvider>
+	);
+}
+
+/**
+ * The actions that belong to a piece of content — a message, a card, a row —
+ * reached by holding the content itself.
+ *
+ * A `Menu` hangs off a control that exists to open it; a context menu has no
+ * such control, because the target is the content. Hold it for 350ms and the
+ * panel opens at the finger (or against the whole trigger with
+ * `anchor="target"`); a short press runs the trigger's `onPress`, and never both.
+ *
+ * **The rows and the panel are Menu's.** `ContextMenu.Content` is
+ * `Menu.Content` with a scrim and wider defaults, `ContextMenu.Item` is
+ * `Menu.Item` with a trailing icon and a taller row, and every other row kind is
+ * Menu's own component, so the two entry points cannot drift.
+ *
+ * `ContextMenu.Preview`, among the rows, lifts a copy of the held content over
+ * the scrim, and the panel opens beside it.
+ *
+ * @example
+ * <ContextMenu>
+ *   <ContextMenu.Trigger haptic="medium" onPress={openThread}>
+ *     <Card>…</Card>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <ContextMenu.Preview />
+ *     <ContextMenu.Item icon={IconShare} onSelect={share}>Share</ContextMenu.Item>
+ *     <ContextMenu.Separator />
+ *     <ContextMenu.Item icon={IconTrashCan} variant="destructive" onSelect={remove}>Delete</ContextMenu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu>
+ */
+export const ContextMenu = Object.assign(ContextMenuRoot, {
+	/** The content that is held. `onPress` is its short press, arbitrated against the hold. */
+	Trigger: ContextMenuTrigger,
+	/** The panel — `Menu.Content` over a scrim. */
+	Content: ContextMenuContent,
+	/** The held content, lifted over the scrim. Place it among the rows. */
+	Preview: ContextMenuPreview,
+	/** A verb: runs `onSelect` and closes. Icon trailing, row taller. */
+	Item: ContextMenuItem,
+	/** The panel's surface. Pass one as a `ContextMenu.Content` child to repaint it. */
+	Background: MenuBackground,
+	/** A section heading. */
+	Label: MenuLabel,
+	/** A row that toggles a setting. Stays open. */
+	CheckboxItem: MenuCheckboxItem,
+	/** Holds the value for a set of radio rows. */
+	RadioGroup: MenuRadioGroup,
+	/** One option in a radio group. Closes. */
+	RadioItem: MenuRadioItem,
+	/** A rule between groups of rows. */
+	Separator: MenuSeparator,
+	/** Nested rows that expand in place. */
+	Sub: MenuSub,
+	/** The row that expands a `ContextMenu.Sub`. */
+	SubTrigger: MenuSubTrigger,
+	/** The rows a `ContextMenu.Sub` discloses. */
+	SubContent: MenuSubContent,
+	displayName: "DelacourUI.ContextMenu",
+});

package/src/components/context-menu/context-menu.variants.test.ts

@@ -0,0 +1,266 @@
+import { describe, expect, test } from "bun:test";
+import { declaredTokens } from "../../styles/theme-tokens.test";
+import { MENU_DEFAULT_MIN_WIDTH, resolveMenuPlacement, resolveMenuWidth } from "../menu/menu.variants";
+import {
+	CONTEXT_MENU_ACCESSIBILITY_ACTIONS,
+	CONTEXT_MENU_CONTENT_DEFAULTS,
+	CONTEXT_MENU_HOLD,
+	CONTEXT_MENU_PREVIEW_SCALE,
+	contextMenuVariants,
+	resolveContextAnchor,
+	resolveContextMenuAccessibility,
+	resolveHoldConfig,
+} from "./context-menu.variants";
+
+const TARGET = { height: 120, width: 300, x: 24, y: 200 };
+const POINT = { x: 140, y: 260 };
+
+describe("resolveContextAnchor", () => {
+	test("point mode, by the finger, is a zero-size rect at the press", () => {
+		expect(
+			resolveContextAnchor({
+				hasPreview: false,
+				invokedBy: "pointer",
+				mode: "point",
+				point: POINT,
+				targetRect: TARGET,
+			})
+		).toEqual({ height: 0, width: 0, x: 140, y: 260 });
+	});
+
+	test("target mode anchors to the measured wrapper", () => {
+		expect(
+			resolveContextAnchor({
+				hasPreview: false,
+				invokedBy: "pointer",
+				mode: "target",
+				point: POINT,
+				targetRect: TARGET,
+			})
+		).toEqual(TARGET);
+	});
+
+	test("a preview forces the target, so the panel opens outside the lifted copy", () => {
+		expect(
+			resolveContextAnchor({
+				hasPreview: true,
+				invokedBy: "pointer",
+				mode: "point",
+				point: POINT,
+				targetRect: TARGET,
+			})
+		).toEqual(TARGET);
+	});
+
+	test("a screen-reader open forces the target — there is no pointer coordinate", () => {
+		expect(
+			resolveContextAnchor({
+				hasPreview: false,
+				invokedBy: "accessibility",
+				mode: "point",
+				point: null,
+				targetRect: TARGET,
+			})
+		).toEqual(TARGET);
+	});
+
+	test("point mode without a point falls back to the target", () => {
+		expect(
+			resolveContextAnchor({
+				hasPreview: false,
+				invokedBy: "pointer",
+				mode: "point",
+				point: null,
+				targetRect: TARGET,
+			})
+		).toEqual(TARGET);
+	});
+
+	test("returns a fresh rect, never the caller's object", () => {
+		const result = resolveContextAnchor({
+			hasPreview: false,
+			invokedBy: "pointer",
+			mode: "target",
+			point: null,
+			targetRect: TARGET,
+		});
+		expect(result).not.toBe(TARGET);
+	});
+});
+
+describe("resolveHoldConfig", () => {
+	test("defaults to a 350ms hold and 12pt of drift", () => {
+		expect(resolveHoldConfig({})).toEqual({ delay: 350, slop: 12 });
+		expect(CONTEXT_MENU_HOLD).toEqual({ delay: 350, minDelay: 150, slop: 12 });
+	});
+
+	test("keeps values above the floors", () => {
+		expect(resolveHoldConfig({ delay: 600, slop: 20 })).toEqual({ delay: 600, slop: 20 });
+	});
+
+	test("floors the delay at 150ms, so a tap cannot open the menu", () => {
+		expect(resolveHoldConfig({ delay: 40 }).delay).toBe(150);
+	});
+
+	test("floors the slop at zero", () => {
+		expect(resolveHoldConfig({ slop: -5 }).slop).toBe(0);
+	});
+
+	test("a non-finite value takes the default", () => {
+		expect(resolveHoldConfig({ delay: Number.NaN, slop: Number.POSITIVE_INFINITY })).toEqual({
+			delay: 350,
+			slop: 12,
+		});
+	});
+});
+
+describe("resolveContextMenuAccessibility", () => {
+	test("a trigger with onPress is a button", () => {
+		expect(resolveContextMenuAccessibility({ hasPress: true, isDisabled: false, isOpen: false }).role).toBe("button");
+	});
+
+	test("a trigger without onPress claims no role", () => {
+		expect(resolveContextMenuAccessibility({ hasPress: false, isDisabled: false, isOpen: false }).role).toBe("none");
+	});
+
+	test("offers activate and a labelled long-press", () => {
+		expect(CONTEXT_MENU_ACCESSIBILITY_ACTIONS).toEqual([
+			{ name: "activate" },
+			{ label: "Show menu", name: "longpress" },
+		]);
+	});
+
+	test("announces disabled and expanded", () => {
+		expect(resolveContextMenuAccessibility({ hasPress: true, isDisabled: true, isOpen: true }).state).toEqual({
+			disabled: true,
+			expanded: true,
+		});
+	});
+
+	test("activate runs onPress when there is one, else opens", () => {
+		const withPress = resolveContextMenuAccessibility({ hasPress: true, isDisabled: false, isOpen: false });
+		const without = resolveContextMenuAccessibility({ hasPress: false, isDisabled: false, isOpen: false });
+		expect(withPress.onAction("activate")).toBe("press");
+		expect(without.onAction("activate")).toBe("open");
+	});
+
+	test("longpress opens", () => {
+		const a11y = resolveContextMenuAccessibility({ hasPress: true, isDisabled: false, isOpen: false });
+		expect(a11y.onAction("longpress")).toBe("open");
+	});
+
+	test("disabled does nothing, for either action", () => {
+		const a11y = resolveContextMenuAccessibility({ hasPress: true, isDisabled: true, isOpen: false });
+		expect(a11y.onAction("activate")).toBe("none");
+		expect(a11y.onAction("longpress")).toBe("none");
+	});
+
+	test("an unknown action does nothing", () => {
+		const a11y = resolveContextMenuAccessibility({ hasPress: true, isDisabled: false, isOpen: false });
+		expect(a11y.onAction("magicTap")).toBe("none");
+	});
+});
+
+describe("content defaults", () => {
+	test("differ from Menu's: bottom, start, 8pt, at least 280 wide, with a scrim", () => {
+		expect(CONTEXT_MENU_CONTENT_DEFAULTS).toEqual({
+			align: "start",
+			hasScrim: true,
+			minWidth: 280,
+			offset: 8,
+			placement: "bottom",
+		});
+	});
+
+	test("a point anchor resolves to the 280 floor, not Menu's 200", () => {
+		const width = resolveMenuWidth({ minWidth: CONTEXT_MENU_CONTENT_DEFAULTS.minWidth, triggerWidth: 0 });
+		expect(width).toBe(280);
+		expect(width).toBeGreaterThan(MENU_DEFAULT_MIN_WIDTH);
+	});
+
+	test("a wide target keeps its own width", () => {
+		expect(resolveMenuWidth({ minWidth: CONTEXT_MENU_CONTENT_DEFAULTS.minWidth, triggerWidth: 340 })).toBe(340);
+	});
+
+	test("the panel sits 8pt below a point", () => {
+		const result = resolveMenuPlacement({
+			align: CONTEXT_MENU_CONTENT_DEFAULTS.align,
+			anchor: { height: 0, width: 0, x: 140, y: 260 },
+			content: { height: 200, width: 280 },
+			insets: { bottom: 34, left: 0, right: 0, top: 47 },
+			isRTL: false,
+			offset: CONTEXT_MENU_CONTENT_DEFAULTS.offset,
+			placement: CONTEXT_MENU_CONTENT_DEFAULTS.placement,
+			window: { height: 800, width: 400 },
+		});
+		expect(result.placement).toBe("bottom");
+		expect(result.top).toBe(268);
+	});
+
+	test("a panel under a tall target flips above it, clear of the target", () => {
+		const target = { height: 300, width: 360, x: 20, y: 420 };
+		const result = resolveMenuPlacement({
+			align: CONTEXT_MENU_CONTENT_DEFAULTS.align,
+			anchor: target,
+			content: { height: 200, width: 360 },
+			insets: { bottom: 34, left: 0, right: 0, top: 47 },
+			isRTL: false,
+			offset: CONTEXT_MENU_CONTENT_DEFAULTS.offset,
+			placement: CONTEXT_MENU_CONTENT_DEFAULTS.placement,
+			window: { height: 800, width: 400 },
+		});
+		expect(result.placement).toBe("top");
+		expect(result.top + 200).toBeLessThanOrEqual(target.y - CONTEXT_MENU_CONTENT_DEFAULTS.offset);
+	});
+});
+
+describe("preview", () => {
+	test("lifts by 3%, which the 8pt offset clears for any target under ~530pt tall", () => {
+		expect(CONTEXT_MENU_PREVIEW_SCALE).toBe(1.03);
+		const grow = ((CONTEXT_MENU_PREVIEW_SCALE - 1) * 530) / 2;
+		expect(grow).toBeLessThan(CONTEXT_MENU_CONTENT_DEFAULTS.offset);
+	});
+});
+
+describe("contextMenuVariants", () => {
+	test("rows are taller than Menu's", () => {
+		expect(contextMenuVariants().item()).toContain("min-h-12");
+	});
+
+	test("the trigger does not shrink to its child", () => {
+		expect(contextMenuVariants().trigger()).not.toMatch(/self-start|items-start/);
+	});
+
+	test("the preview is absolute and casts a shadow", () => {
+		const preview = contextMenuVariants().preview();
+		expect(preview).toContain("absolute");
+		expect(preview).toMatch(/shadow-/);
+	});
+
+	test("merges a caller's class", () => {
+		expect(contextMenuVariants().trigger({ className: "rounded-lg" })).toContain("rounded-lg");
+	});
+
+	test("no slot carries a text colour", () => {
+		const slots = contextMenuVariants();
+		for (const name of ["trigger", "preview", "item"] as const) {
+			expect(slots[name]()).not.toMatch(/\btext-/);
+		}
+	});
+});
+
+describe("context menu colour tokens", () => {
+	const LIGHT = declaredTokens("light");
+	const DARK = declaredTokens("dark");
+
+	test("every token is declared in both themes", () => {
+		const slots = contextMenuVariants();
+		for (const name of ["trigger", "preview", "item"] as const) {
+			for (const [, token] of slots[name]().matchAll(/\b(?:bg|border)-([a-z][\w-]*)/g)) {
+				if (token === undefined) continue;
+				expect({ inLight: LIGHT.has(token), token }).toEqual({ inLight: true, token });
+				expect({ inDark: DARK.has(token), token }).toEqual({ inDark: true, token });
+			}
+		}
+	});
+});

package/src/components/context-menu/context-menu.variants.ts

@@ -0,0 +1,147 @@
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+import type { MenuAlign, MenuAnchorRect, MenuPlacement } from "../menu/menu.variants";
+
+export const CONTEXT_MENU_ANCHORS = ["point", "target"] as const;
+
+/** What the panel hangs off: the finger's press point, or the held content's rect. */
+export type ContextMenuAnchor = (typeof CONTEXT_MENU_ANCHORS)[number];
+
+/** How the menu was asked for. A screen reader has no pointer coordinate. */
+export type ContextMenuInvoker = "pointer" | "accessibility";
+
+/** A press point in window coordinates. */
+export type ContextMenuPoint = { x: number; y: number };
+
+/**
+ * The hold: `delay` ms before it is accepted, `slop` pt the finger may drift
+ * meanwhile. `minDelay` is the floor — anything shorter is a tap.
+ */
+export const CONTEXT_MENU_HOLD = { delay: 350, minDelay: 150, slop: 12 } as const;
+
+/**
+ * `ContextMenu.Content`'s defaults, where they differ from `Menu.Content`'s: a
+ * wider floor (a point anchor has no width to inherit), a little more gap from
+ * the finger, and a scrim — the content behind is not the menu's control.
+ */
+export const CONTEXT_MENU_CONTENT_DEFAULTS: {
+	placement: MenuPlacement;
+	align: MenuAlign;
+	offset: number;
+	minWidth: number;
+	hasScrim: boolean;
+} = { align: "start", hasScrim: true, minWidth: 280, offset: 8, placement: "bottom" };
+
+/** How far the lifted preview grows, 1 → this. */
+export const CONTEXT_MENU_PREVIEW_SCALE = 1.03;
+
+/** How long the preview takes to lift, in ms — Menu's enter, so the two arrive together. */
+export const CONTEXT_MENU_PREVIEW_MS = 160;
+
+/** The label a screen reader reads for the long-press action. */
+export const CONTEXT_MENU_SHOW_LABEL = "Show menu";
+
+export const CONTEXT_MENU_ACCESSIBILITY_ACTIONS: ReadonlyArray<{ name: string; label?: string }> = [
+	{ name: "activate" },
+	{ label: CONTEXT_MENU_SHOW_LABEL, name: "longpress" },
+];
+
+export type ContextAnchorInput = {
+	mode: ContextMenuAnchor;
+	/** The press point, or `null` when there was none — a screen-reader open. */
+	point: ContextMenuPoint | null;
+	/** The trigger's measured window rect. */
+	targetRect: MenuAnchorRect;
+	hasPreview: boolean;
+	invokedBy: ContextMenuInvoker;
+};
+
+/**
+ * The rect the panel is placed against.
+ *
+ * `point` mode gives a zero-size rect at the press, which Menu's placement
+ * resolver handles with no special case. Three things force the target instead:
+ * `target` mode; a `ContextMenu.Preview`, so the panel opens outside the lifted
+ * copy rather than across it; and a screen-reader open, which has no point.
+ */
+export function resolveContextAnchor({
+	mode,
+	point,
+	targetRect,
+	hasPreview,
+	invokedBy,
+}: ContextAnchorInput): MenuAnchorRect {
+	const isTarget = mode === "target" || hasPreview || invokedBy === "accessibility" || point === null;
+	if (isTarget) return { height: targetRect.height, width: targetRect.width, x: targetRect.x, y: targetRect.y };
+	return { height: 0, width: 0, x: point.x, y: point.y };
+}
+
+/**
+ * The hold's timing: defaults of 350ms and 12pt, a 150ms floor on the delay so
+ * a tap can never open the menu, and a zero floor on the slop. A non-finite
+ * value takes the default.
+ */
+export function resolveHoldConfig({ delay, slop }: { delay?: number; slop?: number }): {
+	delay: number;
+	slop: number;
+} {
+	const d = delay !== undefined && Number.isFinite(delay) ? delay : CONTEXT_MENU_HOLD.delay;
+	const s = slop !== undefined && Number.isFinite(slop) ? slop : CONTEXT_MENU_HOLD.slop;
+	return { delay: Math.max(CONTEXT_MENU_HOLD.minDelay, d), slop: Math.max(0, s) };
+}
+
+/** What an accessibility action resolves to. */
+export type ContextMenuActionOutcome = "press" | "open" | "none";
+
+/**
+ * The trigger's accessibility: a `button` when it has `onPress` (activating it
+ * does something of its own), otherwise no role — the content inside speaks for
+ * itself. `activate` runs `onPress`, or opens when there is none; `longpress`
+ * ("Show menu") opens. Disabled, neither does anything.
+ */
+export function resolveContextMenuAccessibility({
+	hasPress,
+	isDisabled,
+	isOpen,
+}: {
+	hasPress: boolean;
+	isDisabled: boolean;
+	isOpen: boolean;
+}): {
+	role: "button" | "none";
+	state: { disabled: boolean; expanded: boolean };
+	onAction: (name: string) => ContextMenuActionOutcome;
+} {
+	return {
+		onAction: (name) => {
+			if (isDisabled) return "none";
+			if (name === "activate") return hasPress ? "press" : "open";
+			if (name === "longpress") return "open";
+			return "none";
+		},
+		role: hasPress ? "button" : "none",
+		state: { disabled: isDisabled, expanded: isOpen },
+	};
+}
+
+/**
+ * Styling for ContextMenu's own parts. The rows and the panel are Menu's, and
+ * wear `menuVariants`; this holds only what differs.
+ *
+ * - `trigger` lays out like a plain `View` — it neither shrinks to its child nor
+ *   adds anything to it.
+ * - `preview` is the lifted copy, absolutely placed at the trigger's window rect.
+ * - `item` makes a row taller: content menus are reached by a held finger, and a
+ *   48pt row is easier to land after the lift.
+ *
+ * Free of React Native imports so it stays reachable from `bun test`.
+ */
+export const contextMenuVariants = tv({
+	slots: {
+		trigger: "relative",
+		preview: "absolute shadow-lg",
+		item: "min-h-12",
+	},
+});
+
+export type ContextMenuVariantProps = VariantProps<typeof contextMenuVariants>;

package/src/components/context-menu/index.ts

@@ -0,0 +1,18 @@
+export { ContextMenu, type ContextMenuProps } from "./context-menu";
+export {
+	CONTEXT_MENU_ANCHORS,
+	CONTEXT_MENU_CONTENT_DEFAULTS,
+	CONTEXT_MENU_HOLD,
+	type ContextAnchorInput,
+	type ContextMenuAnchor,
+	type ContextMenuInvoker,
+	type ContextMenuPoint,
+	type ContextMenuVariantProps,
+	contextMenuVariants,
+	resolveContextAnchor,
+	resolveHoldConfig,
+} from "./context-menu.variants";
+export type { ContextMenuContentProps } from "./context-menu-content";
+export type { ContextMenuItemProps } from "./context-menu-item";
+export type { ContextMenuPreviewProps } from "./context-menu-preview";
+export type { ContextMenuTriggerProps } from "./context-menu-trigger";