"use client"; import type { LucideIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { useMenu } from "@/hooks/use-menu"; export type MenuItem = { label: string; onSelect: () => void; icon?: LucideIcon; /** Shows a filled marker — e.g. the currently-applied sort. */ selected?: boolean; disabled?: boolean; }; export type MenuProps = { /** Trigger contents (text and/or icon). */ trigger: React.ReactNode; items: MenuItem[]; /** Optional heading above the items. */ label?: string; /** Align the dropdown to the trigger's right edge. Defaults to left. */ align?: "left" | "right"; className?: string; }; /** * Action dropdown: a trigger that opens a list of items, each running its * onSelect. Behavior (open, outside-click, Escape, arrow keys) comes from the * headless useMenu hook. */ export function Menu({ trigger, items, label, align = "left", className }: MenuProps) { const { open, activeIndex, setActiveIndex, containerRef, itemId, triggerProps, menuProps, onSelect } = useMenu({ itemCount: items.length, onActivate: (i) => { const item = items[i]; if (item && !item.disabled) onSelect(item.onSelect); }, }); return (

{open && (

{label && ( <>

{label}

)} {items.map((item, i) => { const Icon = item.icon; return ( ); })}

)}

); }

name	type	default	description
trigger *	ReactNode	-
items *	MenuItem[]	-	{ label, onSelect, icon?, selected?, disabled? }[]
label	string	-	heading above the items.
align	'left' \| 'right'	'left'

menu.