{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"context-menu","type":"registry:ui","title":"Context menu","description":"Secondary actions kept close to the selected object.","categories":["actions"],"dependencies":["lucide-react","motion"],"registryDependencies":["https://ui.teamofsilicons.com/r/silicon-motion-tokens.json"],"files":[{"path":"registry/components/context-menu/context-menu.tsx","type":"registry:component","target":"@components/silicon-ui/context-menu/context-menu.tsx","content":"\"use client\";\n\nimport { createPortal } from \"react-dom\";\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, FocusEvent, KeyboardEvent, ReactNode } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { Check, Copy, MoreHorizontal, Trash2 } from \"lucide-react\";\nimport { motionTokens } from \"../lib/motion-tokens\";\nimport { MenuHighlight, useMenuHighlight } from \"../lib/menu-highlight\";\nimport styles from \"./context-menu.module.css\";\n\nexport interface ContextMenuItem {\n id: string;\n label: string;\n icon?: ReactNode;\n onSelect?: () => void;\n disabled?: boolean;\n destructive?: boolean;\n checked?: boolean;\n}\n\nexport interface ContextMenuProps {\n children: ReactNode;\n items: ContextMenuItem[];\n label?: string;\n}\n\nconst MENU_WIDTH = 208;\n\n// Keeps the menu 8px inside the viewport. Rows are 34px with 5px padding and a 1px border; the real size is measured before paint.\nfunction clampTo(x: number, y: number, width: number, height: number) {\n const left = Math.max(8, Math.min(x, window.innerWidth - width - 8));\n const top = Math.max(8, Math.min(y, window.innerHeight - height - 8));\n // The menu grows from the pointer, even when it is clamped away from a viewport edge.\n return { x: left, y: top, originX: Math.max(0, Math.min(width, x - left)), originY: Math.max(0, Math.min(height, y - top)) };\n}\n\nexport function ContextMenu({ children, items, label = \"Context menu\" }: ContextMenuProps) {\n const reduced = useReducedMotion();\n const [open, setOpen] = useState(false);\n // The portal mounts on first open (client only) and stays so the menu can animate out.\n const [portal, setPortal] = useState(false);\n // Each open gets its own key, so reopening at a new point fades the old menu out in place\n // and grows a fresh one from the pointer instead of teleporting the visible menu.\n const [point, setPoint] = useState({ x: 0, y: 0, originX: 0, originY: 0, key: 0 });\n // Fluid hover: the nearest row is lit, gaps and padding included, and a click in a gap picks it.\n const { highlight, reset, contentProps } = useMenuHighlight();\n const menuRef = useRef(null);\n const targetRef = useRef(null);\n // A primary press on the target while the menu is open closes it; the click that follows must not reopen it.\n const pressedWhileOpen = useRef(false);\n // An exiting menu keeps its last props, so its handlers check this before moving focus or selecting.\n const live = useRef(false);\n\n const anchor = useRef({ x: 0, y: 0 });\n\n useEffect(() => { live.current = open; }, [open]);\n // Re-clamp against the menu's real size before the first frame, so long labels or many rows never overflow the viewport.\n useLayoutEffect(() => {\n const node = menuRef.current;\n if (!open || !node) return;\n const next = clampTo(anchor.current.x, anchor.current.y, node.offsetWidth, node.offsetHeight);\n setPoint(current => (current.x === next.x && current.y === next.y && current.originX === next.originX && current.originY === next.originY ? current : { ...next, key: current.key }));\n }, [open, point.key]);\n useEffect(() => {\n if (!open) return;\n menuRef.current?.querySelector('[role=\"menuitem\"]:not(:disabled)')?.focus({ preventScroll: true });\n const closeOnPointerDown = (event: PointerEvent) => {\n if (!menuRef.current?.contains(event.target as Node)) setOpen(false);\n };\n const closeOnViewportChange = (event: Event) => {\n if (event.target instanceof Node && menuRef.current?.contains(event.target)) return;\n setOpen(false);\n };\n document.addEventListener(\"pointerdown\", closeOnPointerDown);\n window.addEventListener(\"scroll\", closeOnViewportChange, true);\n window.addEventListener(\"resize\", closeOnViewportChange);\n return () => {\n document.removeEventListener(\"pointerdown\", closeOnPointerDown);\n window.removeEventListener(\"scroll\", closeOnViewportChange, true);\n window.removeEventListener(\"resize\", closeOnViewportChange);\n };\n }, [open, point.key]);\n\n function showMenu(x: number, y: number) {\n anchor.current = { x, y };\n const estimate = clampTo(x, y, MENU_WIDTH, Math.min(300, items.length * 34 + 12));\n setPoint(current => ({ ...estimate, key: current.key + 1 }));\n reset();\n setPortal(true);\n setOpen(true);\n }\n\n function onTargetKeyDown(event: KeyboardEvent) {\n if (event.key === \"ContextMenu\" || (event.shiftKey && event.key === \"F10\")) {\n event.preventDefault();\n const rect = targetRef.current?.getBoundingClientRect();\n if (rect) showMenu(rect.left + 12, rect.bottom + 8);\n }\n }\n\n function onTargetClick() {\n if (pressedWhileOpen.current) { pressedWhileOpen.current = false; return; }\n const rect = targetRef.current?.getBoundingClientRect();\n if (rect) showMenu(rect.left + 12, rect.bottom + 8);\n }\n\n function onMenuKeyDown(event: KeyboardEvent) {\n const enabled = items.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled);\n const current = document.activeElement?.getAttribute(\"data-index\");\n const currentPosition = enabled.findIndex(({ index }) => String(index) === current);\n let nextPosition: number | undefined;\n if (event.key === \"ArrowDown\") nextPosition = (currentPosition + 1) % enabled.length;\n if (event.key === \"ArrowUp\") nextPosition = currentPosition < 0 ? enabled.length - 1 : (currentPosition - 1 + enabled.length) % enabled.length;\n if (event.key === \"Home\") nextPosition = 0;\n if (event.key === \"End\") nextPosition = enabled.length - 1;\n if (nextPosition !== undefined && enabled.length) {\n event.preventDefault();\n event.currentTarget.querySelector(`[data-index=\"${enabled[nextPosition]!.index}\"]`)?.focus();\n }\n if (event.key === \"Escape\") { event.preventDefault(); setOpen(false); targetRef.current?.focus(); }\n }\n\n // Keyboard focus lights its row at once. A pointer-opened menu focuses its first row without lighting it, like a native menu.\n function onMenuFocus(event: FocusEvent) {\n if (event.target instanceof HTMLElement && event.target.matches(\":focus-visible\")) contentProps.onFocus(event);\n }\n\n return <>\n
{ pressedWhileOpen.current = open && event.button === 0; }} onClick={onTargetClick} onContextMenu={event => { event.preventDefault(); showMenu(event.clientX, event.clientY); }} onKeyDown={onTargetKeyDown} aria-label={label} aria-haspopup=\"menu\" aria-expanded={open}>\n {children}\n
\n {portal ? createPortal(\n {open && { if (node) menuRef.current = node; }} className={styles.menu} role=\"menu\" aria-label={label} tabIndex={-1} style={{ left: point.x, top: point.y, transformOrigin: `${point.originX}px ${point.originY}px` }} onKeyDown={onMenuKeyDown} {...contentProps} onFocus={onMenuFocus} onPointerLeave={event => { if (live.current) event.currentTarget.focus({ preventScroll: true }); }}\n initial={reduced ? { opacity: 0 } : { opacity: 0, scale: .96 }} animate={{ opacity: 1, scale: 1 }} exit={reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, scale: .98, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }} transition={reduced ? { duration: motionTokens.duration.instant } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }}>\n \n {items.map((item, index) => )}\n }\n , document.body) : null}\n ;\n}\n\nexport const contextMenuExampleItems: ContextMenuItem[] = [\n { id: \"copy\", label: \"Copy link\", icon: },\n { id: \"delete\", label: \"Delete project\", icon: , destructive: true },\n];\n\nexport default ContextMenu;\n"},{"path":"registry/components/context-menu/context-menu.module.css","type":"registry:component","target":"@components/silicon-ui/context-menu/context-menu.module.css","content":".target { display: block; outline: none; }\n/* Motion scales the menu from the pointer (transform-origin is set inline) and fades it out faster than it arrives. */\n.menu { position: fixed; z-index: var(--layer-dropdown); min-width: min(13rem, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: min(300px, calc(100vh - 16px)); overflow-y: auto; padding: var(--space-tight); border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); outline: none; }\n.highlight { position: absolute; top: 0; right: var(--space-tight); left: var(--space-tight); border-radius: calc(var(--radius-container) - var(--space-related)); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }\n.highlight[data-tone=\"danger\"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }\n.item { position: relative; display: flex; width: 100%; min-height: 34px; align-items: center; gap: var(--space-related); padding: 0 var(--space-group); border: 0; border-radius: calc(var(--radius-container) - var(--space-related)); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-align: left; cursor: pointer; outline: none; transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-fast) var(--ease-standard); animation: context-item-in var(--duration-standard) var(--ease-enter) both; animation-delay: calc(min(var(--i, 0), 4) * 35ms); }\n/* The gliding highlight is the focus indicator, as in the dropdown menu. */\n.item:focus-visible { outline: none; }\n/* Rows press with a tint, not a scale. */\n.item:active:not(:disabled) { background: color-mix(in oklab, var(--foreground) 5%, transparent); }\n.item:disabled { opacity: .45; cursor: default; }\n.item.destructive { color: var(--danger); }\n.icon { display: inline-flex; flex: none; width: 16px; align-items: center; justify-content: center; color: var(--text-secondary); }\n.item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.destructive .icon { color: currentColor; }\n@keyframes context-item-in { from { opacity: 0; transform: translateY(-2px); } }\n@media (prefers-reduced-motion: reduce) { .item, .highlight { animation: none; transition: none; } }\n"},{"path":"lib/fluid-hover.tsx","type":"registry:lib","target":"@components/silicon-ui/lib/fluid-hover.tsx","content":"\"use client\";\n\n/**\n * Fluid hover: in a set of items (a menu, a list, tabs, a grid), the item nearest the pointer is lit, even while the\n * pointer is in a gap, the padding or past the last item, and one highlight springs between items. A click in a gap goes\n * to the lit item, so what is lit is what a click hits. A new pointer entry fades the highlight in where it lands instead\n * of sliding it over from the last item. The keyboard moves it without travel, and reduced motion keeps the fade but\n * drops the travel.\n *\n * const list = useRef(null);\n * const hover = useFluidHover(list, { items: \"[data-item]\" });\n *
    // .list { position: relative }\n * \n * …items…\n *
\n *\n * Adapted from Fluid Functionalism's use-fluid-hover and fluid-hover-highlight by Micka Touillaud (MIT),\n * https://github.com/mickadesign/fluid-functionalism. Items are found by a selector instead of registering themselves,\n * so a component adopts it without changing its items.\n */\nimport { useEffect, useEffectEvent, useRef, useState } from \"react\";\nimport type { FocusEvent, MouseEvent, PointerEvent, RefObject } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { motionTokens } from \"./motion-tokens\";\n\n/** An item's box in the container's own layout space (unaffected by transforms or scrolling). */\nexport interface FluidRect { top: number; left: number; width: number; height: number }\n\nexport interface FluidHoverState {\n /** Where the highlight sits, or null when nothing is lit. */\n rect: FluidRect | null;\n /** The lit item. */\n item: HTMLElement | null;\n /** False when the highlight should jump (keyboard, a resize) rather than travel. */\n glide: boolean;\n /** Steps on each new pointer entry, so the highlight fades in where it lands. */\n session: number;\n}\n\nexport interface FluidHoverOptions {\n /** Selector for the items inside the container. */\n items: string;\n /** \"y\" for lists (default), \"x\" for a row of tabs, \"xy\" for grids. */\n axis?: \"x\" | \"y\" | \"xy\";\n /** Items the highlight skips (and a gap click never activates). Defaults to disabled or aria-disabled items. */\n isItemDisabled?: (item: HTMLElement) => boolean;\n /** \"skip\" (default) lights the nearest enabled item even over a disabled one; \"clear\" lights nothing over a disabled item (a calendar's unavailable days). */\n disabled?: \"skip\" | \"clear\";\n /** Route a click in a gap to the lit item. On by default; turn it off where empty space should stay inert. */\n gapClick?: boolean;\n /** Light the item that receives keyboard focus. On by default. */\n followFocus?: boolean;\n}\n\nconst defaultDisabled = (item: HTMLElement) =>\n item.matches(\":disabled, [aria-disabled='true'], [data-disabled]\");\n\n/** Controls that sit between items keep their own clicks. */\nconst CONTROL = \"input, textarea, select, button, a, summary, [contenteditable], [role='textbox'], [role='searchbox'], [role='button']\";\n\n/** The item's box relative to the container, summing offsets through positioned ancestors in between. */\nexport function rectOf(item: HTMLElement, container: HTMLElement): FluidRect {\n let top = item.offsetTop, left = item.offsetLeft;\n let parent = item.offsetParent as HTMLElement | null;\n while (parent && parent !== container && container.contains(parent)) {\n top += parent.offsetTop + parent.clientTop;\n left += parent.offsetLeft + parent.clientLeft;\n parent = parent.offsetParent as HTMLElement | null;\n }\n return { top, left, width: item.offsetWidth, height: item.offsetHeight };\n}\n\n/**\n * The item the pointer is inside, or else the one whose edge is nearest along the axis (both axes for a grid). Edges, not\n * centres, so a gap next to a wide item still lights the item the pointer is closer to.\n */\nexport function pickNearest(items: HTMLElement[], x: number, y: number, axis: \"x\" | \"y\" | \"xy\"): HTMLElement | null {\n let nearest: HTMLElement | null = null, best = Infinity;\n for (const item of items) {\n const r = item.getBoundingClientRect();\n if (!r.width && !r.height) continue;\n if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return item;\n const dx = Math.max(r.left - x, 0, x - r.right), dy = Math.max(r.top - y, 0, y - r.bottom);\n const distance = axis === \"x\" ? dx : axis === \"y\" ? dy : Math.hypot(dx, dy);\n if (distance < best) { best = distance; nearest = item; }\n }\n return nearest;\n}\n\n/** Hands a gap click to the item as a real mouse click (detail, modifiers and coordinates kept), so the item reads it as a pointer press, not a keyboard one. */\nfunction forwardClick(item: HTMLElement, event: MouseEvent) {\n const { detail, clientX, clientY, screenX, screenY, ctrlKey, shiftKey, altKey, metaKey, button, buttons } = event;\n item.dispatchEvent(new globalThis.MouseEvent(\"click\", { bubbles: true, cancelable: true, composed: true, view: window, detail, clientX, clientY, screenX, screenY, ctrlKey, shiftKey, altKey, metaKey, button, buttons }));\n}\n\n/** Whether an event happened inside the element whose handler hears it, not in a portalled child (a submenu, a tooltip). */\nconst isOwn = (event: { currentTarget: EventTarget; target: EventTarget }) =>\n !(event.currentTarget instanceof Node) || !(event.target instanceof Node) || event.currentTarget.contains(event.target);\n\nexport function useFluidHover(container: RefObject, options: FluidHoverOptions) {\n const { items: selector, axis = \"y\", isItemDisabled = defaultDisabled, disabled = \"skip\", gapClick = true, followFocus = true } = options;\n const [state, setState] = useState({ rect: null, item: null, glide: false, session: 0 });\n const current = useRef(state);\n const pointer = useRef(false);\n const entering = useRef(false);\n const frame = useRef(0);\n\n function commit(next: FluidHoverState) {\n const prev = current.current;\n if (prev.item === next.item && prev.session === next.session && sameRect(prev.rect, next.rect)) return;\n current.current = next;\n setState(next);\n }\n\n function light(item: HTMLElement | null, glide: boolean) {\n const root = container.current;\n if (!root || !item) return commit({ ...current.current, rect: null, item: null, glide });\n let session = current.current.session;\n if (entering.current) { entering.current = false; session += 1; }\n commit({ rect: rectOf(item, root), item, glide: glide && session === current.current.session, session });\n }\n\n const enabledItems = () => {\n const root = container.current;\n return root ? [...root.querySelectorAll(selector)].filter(item => !isItemDisabled(item)) : [];\n };\n\n // The lit item can move under a still highlight (a resize, content above it changing): follow it without travel.\n const follow = useEffectEvent(() => { const { item } = current.current; if (item?.isConnected) light(item, false); });\n useEffect(() => {\n const root = container.current;\n if (!root || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(() => follow());\n observer.observe(root);\n return () => observer.disconnect();\n }, [container]);\n useEffect(() => () => cancelAnimationFrame(frame.current), []);\n\n const handlers = {\n onMouseEnter: () => { entering.current = true; },\n onMouseMove: (event: MouseEvent) => {\n if (!isOwn(event)) return;\n pointer.current = true;\n const { clientX, clientY } = event;\n cancelAnimationFrame(frame.current);\n frame.current = requestAnimationFrame(() => {\n const over = disabled === \"clear\" ? document.elementFromPoint(clientX, clientY)?.closest(selector) : null;\n light(over && isItemDisabled(over) ? null : pickNearest(enabledItems(), clientX, clientY, axis), true);\n });\n },\n onMouseLeave: () => { cancelAnimationFrame(frame.current); entering.current = false; light(null, false); },\n onKeyDownCapture: () => { pointer.current = false; },\n onFocus: (event: FocusEvent) => {\n if (!followFocus || pointer.current || !isOwn(event)) return;\n const item = event.target instanceof HTMLElement ? event.target.closest(selector) : null;\n if (item && container.current?.contains(item) && !isItemDisabled(item)) light(item, false);\n },\n onBlur: (event: FocusEvent) => {\n if (!pointer.current && !event.currentTarget.contains(event.relatedTarget as Node | null)) light(null, false);\n },\n onClick: (event: MouseEvent) => {\n if (!gapClick || !isOwn(event)) return;\n const target = event.target as Element;\n if (!target.isConnected || target.closest(selector) || target.closest(CONTROL)) return;\n const { item } = current.current;\n if (item?.isConnected && !isItemDisabled(item)) forwardClick(item, event);\n },\n };\n\n /** Clears the highlight at once, such as when a menu opens again. */\n const reset = () => { cancelAnimationFrame(frame.current); entering.current = true; light(null, false); };\n\n return { ...state, handlers, reset, light };\n}\n\nexport interface NearestItemOptions extends Omit {\n /** Called with the nearest enabled item as the mouse moves over the container. */\n onPick: (item: HTMLElement) => void;\n}\n\n/**\n * Fluid hover's picking without its highlight, for a list that already keeps its own active item and highlight (a listbox\n * with aria-activedescendant, a roving list): the mouse picks the nearest enabled item, gaps and padding included, and a\n * click in a gap goes to that item. Spread the result on the container.\n */\n// A hook only so callbacks that touch refs can be passed during render; it keeps no state.\nexport function useNearestItem({ items: selector, axis = \"y\", isItemDisabled = defaultDisabled, gapClick = true, onPick }: NearestItemOptions) {\n const nearest = (event: MouseEvent) => {\n if (!isOwn(event)) return null;\n const items = [...event.currentTarget.querySelectorAll(selector)].filter(item => !isItemDisabled(item));\n return pickNearest(items, event.clientX, event.clientY, axis);\n };\n return {\n onPointerMove: (event: PointerEvent) => { if (event.pointerType !== \"mouse\") return; const item = nearest(event); if (item) onPick(item); },\n onClick: (event: MouseEvent) => {\n if (!gapClick) return;\n const target = event.target as Element;\n if (!target.isConnected || target.closest(selector) || target.closest(CONTROL)) return;\n const item = nearest(event);\n if (item) forwardClick(item, event);\n },\n };\n}\n\nconst sameRect = (a: FluidRect | null, b: FluidRect | null) =>\n a === b || (!!a && !!b && a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height);\n\nexport interface FluidHoverHighlightProps {\n /** The state from useFluidHover (or any { rect, glide, session }). */\n hover: Pick;\n /** Radius, fill, z-index. The container must be position: relative; the highlight is placed at its top-left corner. */\n className?: string;\n /** Extra attributes for styling, such as data-tone. */\n tone?: string;\n}\n\n/** The one highlight a fluid hover set renders: it springs between items on transforms, and fades in and out. */\nexport function FluidHoverHighlight({ hover, className, tone }: FluidHoverHighlightProps) {\n const reduced = useReducedMotion() ?? false;\n const { rect, glide, session } = hover;\n const place = rect ? { x: rect.left, y: rect.top, width: rect.width, height: rect.height } : undefined;\n return (\n \n {place ? (\n \n ) : null}\n \n );\n}\n"},{"path":"lib/menu-highlight.tsx","type":"registry:lib","target":"@components/silicon-ui/lib/menu-highlight.tsx","content":"\"use client\";\n\nimport { useRef } from \"react\";\nimport type { FocusEvent, MouseEvent } from \"react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { FluidHoverHighlight, useFluidHover, type FluidRect } from \"./fluid-hover\";\nimport { motionTokens } from \"./motion-tokens\";\n\n/** A fluid hover highlight in a menu: where it sits, whether it travels, its pointer session, and its tone. */\ntype FluidHighlight = { rect: FluidRect | null; glide: boolean; session: number; danger: boolean };\n/** A marker positioned by top and height only (a list's current-page marker). */\ntype BarHighlight = { top: number; height: number; danger: boolean; glide: boolean };\n\nconst ITEMS = '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"option\"]';\n\n/**\n * Fluid hover for a Radix menu or listbox (lib/fluid-hover): the item nearest the pointer is lit, gaps and padding\n * included, a click in a gap picks the lit item, and the keyboard moves the highlight with Radix's focus, without travel.\n * Spread `contentProps` on the content, call `reset` when it opens, and render ``\n * as its first child. Items mark a destructive tone with `data-tone=\"danger\"`.\n */\nexport function useMenuHighlight(itemSelector = ITEMS) {\n // The content element is taken from its own events, so the hook never competes with the content's ref.\n const content = useRef(null);\n const hover = useFluidHover(content, { items: itemSelector });\n const own = (event: { currentTarget: EventTarget }) => { content.current = event.currentTarget as HTMLElement; };\n const { handlers } = hover;\n const highlight: FluidHighlight = { rect: hover.rect, glide: hover.glide, session: hover.session, danger: hover.item?.dataset.tone === \"danger\" };\n return {\n highlight,\n reset: hover.reset,\n contentProps: {\n onMouseEnter: (event: MouseEvent) => { own(event); handlers.onMouseEnter(); },\n onMouseMove: (event: MouseEvent) => { own(event); handlers.onMouseMove(event); },\n onMouseLeave: handlers.onMouseLeave,\n onKeyDownCapture: handlers.onKeyDownCapture,\n onFocus: (event: FocusEvent) => { own(event); handlers.onFocus(event); },\n onBlur: handlers.onBlur,\n onClick: (event: MouseEvent) => { own(event); handlers.onClick(event); },\n },\n };\n}\n\n/** The highlight itself: the fluid hover highlight, or a marker that moves by top and height (a current-page marker). */\nexport function MenuHighlight({ state, className }: { state: FluidHighlight | BarHighlight | null; className?: string }) {\n if (state && \"session\" in state) return ;\n return ;\n}\n\nfunction BarMarker({ state, className }: { state: BarHighlight | null; className?: string }) {\n const reduced = useReducedMotion();\n return ;\n}\n"}],"docs":"Docs and live preview: https://ui.teamofsilicons.com/context-menu","meta":{"tier":"free","kind":"component","docs":"https://ui.teamofsilicons.com/context-menu","markdown":"https://ui.teamofsilicons.com/context-menu.md","tags":["menu","action"],"status":"stable"}}