{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"radial-menu","type":"registry:component","title":"Radial menu","description":"One starting point, a few ways forward. Commands unfold into a small clockwise constellation.","author":"Hairline UI","dependencies":[],"files":[{"path":"registry/radial-menu.tsx","type":"registry:component","content":"// Hairline UI · radial-menu · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n'use client';\n\nimport * as React from 'react';\nimport { EASE_OUT, EASE_SETTLE, INTERACTION_FOCUS, useInteractionReducedMotion } from './ui-interaction-motion';\nimport { useRadialMenu } from './use-radial-menu';\n\nexport type RadialMenuItem = { id: string; label: string; icon: React.ReactNode; disabled?: boolean };\nexport interface RadialMenuProps extends Omit, 'onSelect'> {\n items: RadialMenuItem[]; label?: string; open?: boolean; defaultOpen?: boolean; disabled?: boolean;\n onOpenChange?: (open: boolean) => void; onSelect: (id: string) => void;\n}\n\n/** Commands unfold from their source into a clockwise ring; the closed menu has no focusable hidden items. */\nexport function RadialMenu({ items, label = 'Insert', open: controlled, defaultOpen = false, disabled = false, onOpenChange, onSelect, className = '', ...props }: RadialMenuProps) {\n const reduced = useInteractionReducedMotion();\n const [own, setOwn] = React.useState(defaultOpen);\n const open = !disabled && (controlled ?? own);\n const change = (next: boolean) => { if (controlled === undefined) setOwn(next); onOpenChange?.(next); };\n const enabled = items.flatMap((item, index) => item.disabled ? [] : [index]);\n const menu = useRadialMenu(items.length, enabled, open, change);\n const id = React.useId();\n return
{ if (event.key === 'Escape' && open) { event.preventDefault(); menu.close(); } }}\n onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) menu.close(false); }}>\n
\n
\n {items.map((item, index) => {\n const point = menu.point(index), delay = open ? index * 24 : 0;\n return \n \n \n ;\n })}\n
\n \n
;\n}\n"},{"path":"registry/use-radial-menu.ts","type":"registry:component","content":"// Hairline UI · radial-menu · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n'use client';\n\nimport * as React from 'react';\n\n/** Focus follows the same clockwise order as the geometry. Resize measurements never run in a gesture. */\nexport function useRadialMenu(count: number, enabled: number[], open: boolean, onOpenChange: (open: boolean) => void) {\n const root = React.useRef(null);\n const trigger = React.useRef(null);\n const buttons = React.useRef(new Map());\n const focusFrame = React.useRef(0);\n const [radius, setRadius] = React.useState(86);\n const latest = React.useRef({ enabled, onOpenChange }); latest.current = { enabled, onOpenChange };\n React.useEffect(() => {\n const element = root.current;\n if (!element) return;\n const observer = new ResizeObserver(([entry]) => {\n const next = Math.max(40, Math.min(90, entry.contentRect.width / 2 - 48));\n setRadius((previous) => previous === next ? previous : next);\n });\n observer.observe(element); return () => observer.disconnect();\n }, []);\n React.useEffect(() => {\n if (open) focusFrame.current = requestAnimationFrame(() => buttons.current.get(latest.current.enabled[0])?.focus({ preventScroll: true }));\n return () => { cancelAnimationFrame(focusFrame.current); focusFrame.current = 0; };\n }, [open]);\n const close = (focus = true) => { latest.current.onOpenChange(false); if (focus) trigger.current?.focus({ preventScroll: true }); };\n const navigate = (event: React.KeyboardEvent, index: number) => {\n if (event.key === 'Escape') { event.preventDefault(); close(); return; }\n const list = latest.current.enabled;\n if (!['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n event.preventDefault();\n const at = list.indexOf(index);\n const next = event.key === 'Home' ? list[0] : event.key === 'End' ? list.at(-1) : list[(at + (event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1) + list.length) % list.length];\n if (next !== undefined) buttons.current.get(next)?.focus({ preventScroll: true });\n };\n return { root, trigger, buttons, radius, close, navigate,\n point(index: number) { const angle = -Math.PI / 2 + index * Math.PI * 2 / Math.max(1, count); return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius, angle: angle * 180 / Math.PI }; },\n };\n}\n"},{"path":"registry/ui-interaction-motion.ts","type":"registry:component","content":"// Hairline UI · radial-menu · MIT License\n// Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components\n\n'use client';\n\nimport * as React from 'react';\n\nexport const EASE_OUT = 'cubic-bezier(0.16, 1, 0.3, 1)';\nexport const EASE_SETTLE = 'cubic-bezier(0.22, 1.18, 0.36, 1)';\nexport const INTERACTION_FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background';\n\nconst query = '(prefers-reduced-motion: reduce)';\nconst subscribe = (notify: () => void) => {\n const media = window.matchMedia(query);\n media.addEventListener('change', notify);\n return () => media.removeEventListener('change', notify);\n};\nexport const useInteractionReducedMotion = () => React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false);\n\nexport function useInteractionActivity() {\n const ref = React.useRef(null);\n const [visible, setVisible] = React.useState(false);\n const [hidden, setHidden] = React.useState(false);\n React.useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting));\n observer.observe(el);\n const visibility = () => setHidden(document.hidden);\n visibility(); document.addEventListener('visibilitychange', visibility);\n return () => { observer.disconnect(); document.removeEventListener('visibilitychange', visibility); };\n }, []);\n return { ref, active: visible && !hidden };\n}\n\nexport function interactionIcon(on: boolean, reduced: boolean): React.CSSProperties {\n return { opacity: on ? 1 : 0, transform: on ? 'none' : 'scale(0.6)', filter: on ? 'blur(0px)' : 'blur(3px)', transition: reduced ? 'none' : `opacity 220ms ${EASE_OUT}, transform 380ms ${EASE_OUT}, filter 220ms ${EASE_OUT}` };\n}\n\n/** Sample recent movement rather than averaging a long drag and losing its release velocity. */\nexport type PointerSample = { x: number; time: number };\nexport function samplePointer(samples: PointerSample[], x: number, time: number) {\n samples.push({ x, time });\n while (samples.length > 2 && time - samples[0].time > 100) samples.shift();\n}\nexport function releaseVelocity(samples: PointerSample[], now: number) {\n if (samples.length < 2 || now - samples[samples.length - 1].time > 100) return 0;\n const first = samples[0], last = samples[samples.length - 1];\n return (last.x - first.x) / Math.max(1, last.time - first.time);\n}\n\n/** A damped spring sampled by WAAPI: no React renders or perpetual frame loop. */\nexport function springFrames(from: number, to: number, velocity = 0, duration = 520) {\n const omega = 20, damping = 0.82, damped = omega * Math.sqrt(1 - damping * damping);\n const displacement = from - to;\n const coefficient = (velocity * 1000 + damping * omega * displacement) / damped;\n return Array.from({ length: 33 }, (_, i) => {\n const t = (i / 32) * duration / 1000;\n const value = to + Math.exp(-damping * omega * t) * (displacement * Math.cos(damped * t) + coefficient * Math.sin(damped * t));\n return { value: i === 32 ? to : value, offset: i / 32 };\n });\n}\n"}],"css":{},"docs":"Docs and live preview: https://hairlineui.com/ui/radial-menu. MIT licensed: https://hairlineui.com/license#components","meta":{"license":"MIT"}}