Add

1:"$Sreact.fragment" 2:I[924893,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js"],"ThemeProvider"] 3:I[175244,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js"],"default"] 4:I[339756,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"default"] 5:I[837457,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"default"] 6:I[329306,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js","/_next/static/immutable/chunks/2brsfaga9fojf.js"],"default"] 7:I[846696,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js"],"Toaster"] 8:I[535892,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js"],"GuideframeGrid"] 9:I[302355,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js"],"Analytics"] a:I[957215,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js"],"SpeedInsights"] b:I[485295,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js","/_next/static/immutable/chunks/0y3x_8ar-e5qx.js"],"default"] c:I[454365,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js","/_next/static/immutable/chunks/0y3x_8ar-e5qx.js","/_next/static/immutable/chunks/0aa84erx5sqhg.js"],"default"] 16:I[168027,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js"],"default",1] :HL["/_next/static/immutable/chunks/0ueogxy5lqw5p.css","style"] :HL["/_next/static/immutable/chunks/2vo05jynynyad.css","style"] :HL["/_next/static/immutable/media/797e433ab948586e-s.p.1v5bejj26fx9h.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/immutable/media/ClashDisplay_Bold-s.p.07mpa8ivzlgkj.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/ClashDisplay_Light-s.p.2chw5n7fxg-bu.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/ClashDisplay_Regular-s.p.3vno0xprl0e7j.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/ClashDisplay_Semibold-s.p.3dslcjb65yc10.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/HelveticaNeue_Bold-s.p.1npaaudotcfcn.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/HelveticaNeue_Medium-s.p.04tcx442h7sr1.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/HelveticaNeue_Regular-s.p.27n_4fovvaty3.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/caa3a2e1cccd8315-s.p.0zr6hhvz-h9nw.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/immutable/chunks/0ogeryrv4j1gt.css","style"] :HL["/_next/static/immutable/chunks/437g_zsx755dc.css","style"] 14:X 0:{"P":null,"c":["","docs","circular-context-menu"],"q":"","i":false,"f":[[["",{"children":["docs",{"children":[["slug","circular-context-menu","oc",[]],{"children":["__PAGE__",{},"$undefined","$undefined",4096]},"$undefined","$undefined",4096]},"$undefined","$undefined",4096]},"$undefined","$undefined",4112],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/0ueogxy5lqw5p.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/2vo05jynynyad.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/1ex--csol9pgd.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/34l2ny9bsibiq.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/3i44zubr59oyg.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/immutable/chunks/3w5fjid-xxuzu.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/immutable/chunks/35g2x4btigiuu.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/immutable/chunks/123e8cmot7qfp.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/_next/static/immutable/chunks/16p26a5w6anw3.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"children":"\n (() => {\n try {\n const savedTheme = window.localStorage.getItem(\"theme\");\n const theme =\n savedTheme === \"light\" || savedTheme === \"dark\"\n ? savedTheme\n : window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n const root = document.documentElement;\n root.dataset.theme = theme;\n root.style.colorScheme = theme;\n } catch {}\n })();\n"}],["$","script",null,{"type":"application/ld+json","children":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"Sona UI - Modern React Component Library\",\"description\":\"A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster.\",\"url\":\"https://sonaui.com\",\"applicationCategory\":\"DeveloperApplication\",\"operatingSystem\":\"Web\",\"author\":{\"@type\":\"Person\",\"name\":\"Dinil Thilakarathne\",\"url\":\"https://github.com/Dinil-Thilakarathne\"}}"}]]}],["$","body",null,{"className":"geist_mono_8d43a2aa-module__8Li5zG__variable geist_a71539c9-module__T19VSG__variable clashdisplay_212459b2-module__DycuVq__variable helveticaneue_290ef4d6-module__xmLDLG__variable bg-background text-foreground antialiased relative","children":["$","$L2",null,{"children":[false,["$","$L3",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$L6",null,{}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}],["$","$L7",null,{"position":"bottom-right","richColors":true}],["$","$L8",null,{"panel":true,"rulers":true,"maxWidth":768,"margin":8,"columns":{"desktop":6,"tablet":4,"mobile":3},"gutter":8,"defaultVisible":false}],["$","$L9",null,{}],["$","$La",null,{}]]}]}]]}]]}],{"children":[["$","$1","c",{"children":[[["$","script","script-0",{"src":"/_next/static/immutable/chunks/0y3x_8ar-e5qx.js","async":true,"nonce":"$undefined"}]],["$","$Lb",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$Lc",null,{}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]]}],{"children":[["$","$1","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":["$Ld",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/0ogeryrv4j1gt.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/437g_zsx755dc.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/42jml4ok8v46w.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/12ngciw2yispc.js","async":true,"nonce":"$undefined"}],"$Le","$Lf","$L10","$L11","$L12"],"$L13"]}],{},null,false,null]},null,false,"$14"]},null,false,null]},null,false,null],"$L15",false]],"m":"$undefined","G":["$16",["$L17","$L18"]],"S":false,"h":null,"r":"$undefined","s":"$undefined","a":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined","b":"YGvFhf5LErlATZXpf42m-"} 19:I[897367,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"OutletBoundary"] 1a:"$Sreact.suspense" 1c:I[897367,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"ViewportBoundary"] 1e:I[897367,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"MetadataBoundary"] e:["$","script","script-2",{"src":"/_next/static/immutable/chunks/0vshgabsk-kwh.js","async":true,"nonce":"$undefined"}] f:["$","script","script-3",{"src":"/_next/static/immutable/chunks/2d47vn6b1g1zz.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-4",{"src":"/_next/static/immutable/chunks/3igd7o_oztm5s.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-5",{"src":"/_next/static/immutable/chunks/22yw87hp6m7h-.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-6",{"src":"/_next/static/immutable/chunks/3m988974q4mhj.js","async":true,"nonce":"$undefined"}] 13:["$","$L19",null,{"children":["$","$1a",null,{"name":"Next.MetadataOutlet","children":"$@1b"}]}] 15:["$","$1","h",{"children":[null,["$","$L1c",null,{"children":"$L1d"}],["$","div",null,{"hidden":true,"children":["$","$L1e",null,{"children":["$","$1a",null,{"name":"Next.Metadata","children":"$L1f"}]}]}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}] 17:["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/0ueogxy5lqw5p.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] 18:["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/2vo05jynynyad.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] 20:I[132023,["/_next/static/immutable/chunks/1ex--csol9pgd.js","/_next/static/immutable/chunks/34l2ny9bsibiq.js","/_next/static/immutable/chunks/3i44zubr59oyg.js","/_next/static/immutable/chunks/3w5fjid-xxuzu.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/16p26a5w6anw3.js","/_next/static/immutable/chunks/0y3x_8ar-e5qx.js","/_next/static/immutable/chunks/42jml4ok8v46w.js","/_next/static/immutable/chunks/12ngciw2yispc.js","/_next/static/immutable/chunks/0vshgabsk-kwh.js","/_next/static/immutable/chunks/2d47vn6b1g1zz.js","/_next/static/immutable/chunks/3igd7o_oztm5s.js","/_next/static/immutable/chunks/22yw87hp6m7h-.js","/_next/static/immutable/chunks/3m988974q4mhj.js"],"default",1] 14:C 21:Taff,var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),M=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},i=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of C(e))!f.call(t,c)&&c!==o&&a(t,c,{get:()=>e[c],enumerable:!(r=p(e,c))||r.enumerable});return t};var g=(t,e,o)=>(o=t!=null?m(x(t)):{},i(e||!t||!t.__esModule?a(o,"default",{value:t,enumerable:!0}):o,t)),y=t=>i(a({},"__esModule",{value:!0}),t);var s=b((_,l)=>{l.exports=_jsx_runtime});var j={};M(j,{default:()=>h});var n=g(s());function u(t){let e={code:"code",h2:"h2",p:"p",...t.components},{CodeBlockWrapper:o,PropTable:r}=e;return o||d("CodeBlockWrapper",!0),r||d("PropTable",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"Use Circular Context Menu for three to five direct actions on a selected spatial object. Its edge-aware arc keeps actions visible while preserving a clear relationship with the selected object."}),` `,(0,n.jsx)(e.h2,{children:"Install"}),` `,(0,n.jsx)(o,{language:"bash",filename:"terminal",code:"npx shadcn@latest add @sona-ui/circular-context-menu"}),` `,(0,n.jsx)(e.h2,{children:"Basic usage"}),` `,(0,n.jsx)(o,{language:"tsx",filename:"canvas-actions.tsx",code:`import CircularContextMenu from "@/components/ui/circular-context-menu/circular-context-menu"; Selected layer `}),` `,(0,n.jsx)(e.h2,{children:"API"}),` `,(0,n.jsx)(r,{component:"circular-context-menu"}),` `,(0,n.jsx)(e.h2,{children:"Accessibility"}),` `,(0,n.jsxs)(e.p,{children:["The anchor is a button with expanded state. Arrow keys move through items, Escape returns focus to the anchor, and outside interaction closes the menu. Choose ",(0,n.jsx)(e.code,{children:'placement="top"'}),", ",(0,n.jsx)(e.code,{children:'"right"'}),", ",(0,n.jsx)(e.code,{children:'"bottom"'}),", or ",(0,n.jsx)(e.code,{children:'"left"'})," based on the safe space in the consumer layout. Use concise accessible labels for icon-only actions."]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}function d(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(j);})(); ;return Component;22:T524,Use Circular Context Menu for three to five direct actions on a selected spatial object. Its edge-aware arc keeps actions visible while preserving a clear relationship with the selected object. ## Install ## Basic usage Selected layer `} /> ## API ## Accessibility The anchor is a button with expanded state. Arrow keys move through items, Escape returns focus to the anchor, and outside interaction closes the menu. Choose `placement="top"`, `"right"`, `"bottom"`, or `"left"` based on the safe space in the consumer layout. Use concise accessible labels for icon-only actions.23:T1177,"use client"; import { useState } from "react"; import CircularContextMenu from "@/components/ui/circular-context-menu/circular-context-menu"; function PlusIcon() { return ( ); } function EditIcon() { return ( ); } function MessageIcon() { return ( ); } function DeleteIcon() { return ( ); } export default function CircularContextMenuDemo() { const [message, setMessage] = useState("Select the concept card"); return (

setMessage("Edit selected")} > setMessage("Message selected")} > setMessage("Delete selected")} >

{message}

); } 24:T2aff,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { Children, cloneElement, createContext, type ReactElement, type ReactNode, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/sona-utils"; type Point = { x: number; y: number }; export type CircularContextMenuPlacement = "top" | "right" | "bottom" | "left"; const PLACEMENT_ANGLES: Record = { top: -Math.PI / 2, right: 0, bottom: Math.PI / 2, left: Math.PI, }; type ContextValue = { anchorRef: React.RefObject; contentRef: React.RefObject; contentId: string; disabled: boolean; itemRefs: React.MutableRefObject>; open: boolean; setOpen: (open: boolean) => void; }; const CircularContext = createContext(null); function useCircularContext() { const context = useContext(CircularContext); if (!context) { throw new Error( "CircularContextMenu subcomponents must be used within Root.", ); } return context; } function pointsFor( placement: CircularContextMenuPlacement, count: number, radius: number, spread: number, ) { const direction = PLACEMENT_ANGLES[placement]; return Array.from({ length: count }, (_, index) => { const progress = count <= 1 ? 0.5 : index / (count - 1); const angle = direction + (progress - 0.5) * ((spread * Math.PI) / 180); return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }; }); } /** Owns the selected anchor, open state, dismissal, and focus recovery. */ export interface CircularContextMenuRootProps { /** The Anchor and Content subcomponents. */ children: ReactNode; /** Controlled open state. */ open?: boolean; /** Initial uncontrolled open state. @default false */ defaultOpen?: boolean; /** Called whenever the menu opens or closes. */ onOpenChange?: (open: boolean) => void; /** Prevents opening the menu. @default false */ disabled?: boolean; } function Root({ children, open, defaultOpen = false, onOpenChange, disabled = false, }: CircularContextMenuRootProps) { const [internalOpen, setInternalOpen] = useState(defaultOpen); const rootRef = useRef(null); const anchorRef = useRef(null); const contentRef = useRef(null); const itemRefs = useRef>([]); const contentId = useId(); const isOpen = open ?? internalOpen; const setOpen = useCallback( (nextOpen: boolean) => { if (disabled) return; if (open === undefined) setInternalOpen(nextOpen); onOpenChange?.(nextOpen); }, [disabled, onOpenChange, open], ); useEffect(() => { if (!isOpen) return; const dismiss = (event: PointerEvent) => { const target = event.target as Node; if ( !rootRef.current?.contains(target) && !contentRef.current?.contains(target) ) setOpen(false); }; const handleEscape = (event: KeyboardEvent) => { if (event.key !== "Escape") return; setOpen(false); anchorRef.current?.focus(); }; document.addEventListener("pointerdown", dismiss); document.addEventListener("keydown", handleEscape); return () => { document.removeEventListener("pointerdown", dismiss); document.removeEventListener("keydown", handleEscape); }; }, [isOpen, setOpen]); return ( {children} ); } /** The selected object that opens the contextual action arc. */ export interface CircularContextMenuAnchorProps extends React.ButtonHTMLAttributes { /** Anchor content. */ children: ReactNode; } function Anchor({ children, className, onClick, onKeyDown, ...props }: CircularContextMenuAnchorProps) { const { anchorRef, contentId, disabled, itemRefs, open, setOpen } = useCircularContext(); return ( ); } /** Positions a small action arc from a consumer-selected anchor direction. */ export interface CircularContextMenuContentProps { /** Action items. */ children: ReactNode /** Arc radius in pixels. @default 92 */; radius?: number /** Arc angle in degrees. @default 68 */; spread?: number /** Accessible menu label. @default "Context actions" */; /** Direction the action arc opens from its anchor. @default "right" */ placement?: CircularContextMenuPlacement; "aria-label"?: string /** Additional CSS classes. */; className?: string; } function Content({ children, radius = 92, spread = 68, placement = "right", "aria-label": ariaLabel = "Context actions", className, }: CircularContextMenuContentProps) { const { anchorRef, contentId, contentRef, open } = useCircularContext(); const [anchor, setAnchor] = useState(null); const reduce = useReducedMotion(); const items = Children.toArray(children) as ReactElement[]; const measure = useCallback(() => { const rect = anchorRef.current?.getBoundingClientRect(); if (rect) setAnchor({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2, }); }, [anchorRef]); useLayoutEffect(() => { if (!open) return; measure(); const observer = new ResizeObserver(measure); if (anchorRef.current) observer.observe(anchorRef.current); window.addEventListener("resize", measure); window.addEventListener("scroll", measure, true); return () => { observer.disconnect(); window.removeEventListener("resize", measure); window.removeEventListener("scroll", measure, true); }; }, [measure, open, anchorRef]); const points = pointsFor(placement, items.length, radius, spread); if (typeof document === "undefined") return null; return createPortal( {open && anchor && ( )} , document.body, ); } /** One icon or compact action in the contextual arc. */ export interface CircularContextMenuItemProps extends Omit< React.ButtonHTMLAttributes, | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onDrag" | "onDragEnd" | "onDragStart" > { /** Icon or concise action content. */ children: ReactNode /** Called before the menu closes. */; onSelect?: () => void /** Marks the action destructive. @default false */; destructive?: boolean; } function Item({ children, className, destructive = false, onClick, onKeyDown, onSelect, __index = 0, __anchor = { x: 0, y: 0 }, __point = { x: 0, y: 0 }, __reduce = false, ...props }: CircularContextMenuItemProps & { __anchor?: Point; __index?: number; __point?: Point; __reduce?: boolean; }) { const { anchorRef, itemRefs, setOpen } = useCircularContext(); const index = __index; const point = __point; const reduce = __reduce; return ( { itemRefs.current[index] = node; }} type="button" role="menuitem" className={cn( "pointer-events-auto absolute top-0 left-0 flex size-11 cursor-pointer items-center justify-center rounded-full border border-border bg-popover text-popover-foreground shadow-lg outline-none focus-visible:ring-1.5 focus-visible:ring-ring focus-visible:ring-offset-2", destructive && "text-destructive hover:border-destructive/45", className, )} initial={{ opacity: 0, scale: 0.72, filter: "blur(4px)", x: __anchor.x - 22, y: __anchor.y - 22, }} animate={{ opacity: 1, scale: 1, filter: "blur(0px)", x: __anchor.x - 22 + point.x, y: __anchor.y - 22 + point.y, transition: reduce ? { duration: 0 } : { type: "spring", stiffness: 480, damping: 34, mass: 0.7, delay: index * 0.035, }, }} exit={{ opacity: 0, scale: 0.72, filter: "blur(4px)", x: __anchor.x - 22, y: __anchor.y - 22, transition: reduce ? { duration: 0 } : { duration: 0.16 }, }} whileHover={reduce ? undefined : { scale: 1.06 }} whileTap={reduce ? undefined : { scale: 0.94 }} onClick={(event) => { onClick?.(event); if (!event.defaultPrevented) { onSelect?.(); setOpen(false); anchorRef.current?.focus(); } }} onKeyDown={(event) => { onKeyDown?.(event); if ( ["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes( event.key, ) ) { event.preventDefault(); const delta = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1; itemRefs.current[ (index + delta + itemRefs.current.length) % itemRefs.current.length ]?.focus(); } }} {...props} > {children} ); } const CircularContextMenu = { Root, Anchor, Content, Item }; export { Anchor as CircularContextMenuAnchor, Content as CircularContextMenuContent, Item as CircularContextMenuItem, Root as CircularContextMenuRoot, }; export default CircularContextMenu; 25:T1177,"use client"; import { useState } from "react"; import CircularContextMenu from "@/components/ui/circular-context-menu/circular-context-menu"; function PlusIcon() { return ( ); } function EditIcon() { return ( ); } function MessageIcon() { return ( ); } function DeleteIcon() { return ( ); } export default function CircularContextMenuDemo() { const [message, setMessage] = useState("Select the concept card"); return (

setMessage("Edit selected")} > setMessage("Message selected")} > setMessage("Delete selected")} >

{message}

); } 26:T1176,"use client"; import { useState } from "react"; import CircularContextMenu from "@/components/ui/circular-context-menu/circular-context-menu"; function PlusIcon() { return ( ); } function EditIcon() { return ( ); } function MessageIcon() { return ( ); } function DeleteIcon() { return ( ); } export default function CircularContextMenuDemo() { const [message, setMessage] = useState("Select the concept card"); return (

setMessage("Edit selected")} > setMessage("Message selected")} > setMessage("Delete selected")} >

{message}

); }d:["$","$L20",null,{"doc":{"title":"Circular Context Menu","slug":"circular-context-menu","body":{"code":"$21","raw":"$22"},"sourceFiles":"$undefined"},"navigation":{"previous":"$undefined","next":"$undefined"},"componentData":{"component":"circular-context-menu","examples":[{"name":"default","code":"$23"}],"sourceFiles":[{"id":"component:circular-context-menu/circular-context-menu.tsx:0","path":"circular-context-menu/circular-context-menu.tsx","target":"components/sonaui/circular-context-menu/circular-context-menu.tsx","content":"$24","language":"tsx","group":"component"},{"id":"component:sona-utils/sona-utils.ts:1","path":"sona-utils/sona-utils.ts","target":"components/sonaui/sona-utils/sona-utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/** Merge conditional class names while resolving Tailwind conflicts. */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","language":"ts","group":"component"},{"id":"example:default:0","path":"default.tsx","target":"default.tsx","content":"$25","language":"tsx","group":"example"}],"dependencies":["motion","clsx","tailwind-merge"],"usage":"$26","props":[{"name":"children","type":"ReactNode","default":"required","description":"The Anchor and Content subcomponents."},{"name":"open","type":"boolean","default":"—","description":"Controlled open state."},{"name":"defaultOpen","type":"boolean","default":"false","description":"Initial uncontrolled open state."},{"name":"onOpenChange","type":"(open: boolean) => void","default":"—","description":"Called whenever the menu opens or closes."},{"name":"disabled","type":"boolean","default":"false","description":"Prevents opening the menu."}],"hasPlayground":true}}] 1d:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 27:I[27201,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"IconMark"] 1b:null 1f:[["$","title","0",{"children":"Circular Context Menu"}],["$","link","1",{"rel":"author","href":"https://github.com/Dinil-Thilakarathne"}],["$","meta","2",{"name":"author","content":"Dinil Thilakarathne"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"keywords","content":"React,UI Components,TailwindCSS,Component Library,Sona UI,Modern UI,Accessible Web"}],["$","meta","5",{"name":"creator","content":"Dinil Thilakarathne"}],["$","link","6",{"rel":"canonical","href":"https://sonaui.com/docs/circular-context-menu"}],["$","meta","7",{"property":"og:title","content":"Circular Context Menu"}],["$","meta","8",{"property":"og:url","content":"https://sonaui.com/docs/circular-context-menu"}],["$","meta","9",{"property":"og:image","content":"https://sonaui.com/og/circular-context-menu-og.png"}],["$","meta","10",{"property":"og:image:width","content":"1200"}],["$","meta","11",{"property":"og:image:height","content":"630"}],["$","meta","12",{"property":"og:image:alt","content":"Circular Context Menu"}],["$","meta","13",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","14",{"name":"twitter:creator","content":"@codebydinil"}],["$","meta","15",{"name":"twitter:title","content":"Sona UI - Modern React Component Library"}],["$","meta","16",{"name":"twitter:description","content":"A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster."}],["$","meta","17",{"name":"twitter:image","content":"https://sonaui.com/twitter-image?4d805fea746c6718"}],["$","meta","18",{"name":"twitter:image:alt","content":"Sona UI — Beautiful interactions, owned by your codebase."}],["$","meta","19",{"name":"twitter:image:type","content":"image/png"}],["$","meta","20",{"name":"twitter:image:width","content":"1200"}],["$","meta","21",{"name":"twitter:image:height","content":"630"}],["$","link","22",{"rel":"icon","href":"/favicon.ico?favicon.39op20u-fe710.ico","sizes":"48x48","type":"image/x-icon"}],["$","$L27","23",{}]]