apex-ui-kit 2.6.0 → 2.8.0

package/dist/ApexUI-Kit/templates/OrbitIcons/OrbitIcons.jsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Cloud, Code2, Cpu, Database, Figma, Github, Globe, Layers, Lock, Palette, Rocket, Sparkles, Zap } from "lucide-react";
+
+/*
+ * Orbit Icons: icons circling a center on a few rings, each ring at its own
+ * speed and direction. Tip the orbits back for depth: icons on the far side
+ * shrink, dim and pass behind the near ones. Hovering eases the motion to a
+ * stop (and shows labels); the orbits lean a little toward the pointer. It
+ * scales to its container, so it fits phones.
+ */
+
+const DEFAULT_RINGS = [
+    { speed: 22, items: [{ icon: Code2, label: "Code" }, { icon: Zap, label: "Fast" }, { icon: Palette, label: "Design" }] },
+    { speed: -14, items: [{ icon: Github, label: "GitHub" }, { icon: Figma, label: "Figma" }, { icon: Sparkles, label: "AI" }, { icon: Cpu, label: "Compute" }] },
+    { speed: 9, items: [{ icon: Globe, label: "Web" }, { icon: Database, label: "Data" }, { icon: Cloud, label: "Cloud" }, { icon: Lock, label: "Auth" }, { icon: Rocket, label: "Deploy" }, { icon: Layers, label: "Stack" }] },
+];
+
+const OrbitIcons = ({ rings = DEFAULT_RINGS, size = 28, tilt = 0.55, speed = 1, pauseOnHover = true, showRings = true, accentColor = "#a3e635", center, className = "" }) => {
+    const box = useRef(null);
+    const nodes = useRef([]);
+    const ringEls = useRef([]);
+    const [hover, setHover] = useState(false);
+    const live = useRef({});
+    live.current = { tilt, speed, pauseOnHover, rings };
+    const flat = rings.flatMap((r, ri) => r.items.map((it, k) => ({ ...it, ri, k, n: r.items.length })));
+
+    useEffect(() => {
+        const el = box.current;
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const s = { angles: live.current.rings.map((_, i) => i * 0.7), rate: 1, half: 100, lean: 0, leanX: 0, tx: 0, ty: 0, hover: false };
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+
+        const fit = () => {
+            s.half = el.getBoundingClientRect().width / 2;
+            el.style.setProperty("--orbit-item", `${Math.max(30, Math.min(52, s.half * 0.21)).toFixed(1)}px`);
+        };
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            // Ease the spin down on hover rather than stopping dead.
+            const goal = (o.pauseOnHover && s.hover) || reduced ? 0 : 1;
+            s.rate += (goal - s.rate) * (1 - Math.exp(-dt / 0.35));
+            s.lean += (s.ty - s.lean) * (1 - Math.exp(-dt / 0.4));
+            s.leanX += (s.tx - s.leanX) * (1 - Math.exp(-dt / 0.4));
+            const tiltA = Math.max(0, Math.min(1.2, o.tilt * 1.15 + s.lean * 0.18));
+            const squash = Math.cos(tiltA);
+            const depthAmt = Math.sin(tiltA);
+            o.rings.forEach((ring, ri) => {
+                s.angles[ri] = (s.angles[ri] ?? 0) + ((ring.speed * Math.PI) / 180) * o.speed * s.rate * dt;
+            });
+            const radii = o.rings.map((_, ri) => s.half * (0.34 + (0.6 * (ri + 1)) / o.rings.length) * 0.94);
+            ringEls.current.forEach((e, ri) => {
+                if (!e) return;
+                const r = radii[ri];
+                e.style.width = `${r * 2}px`;
+                e.style.height = `${r * 2 * squash}px`;
+                e.style.transform = `translate(-50%, -50%) rotate(${(s.leanX * 6).toFixed(2)}deg)`;
+            });
+            nodes.current.forEach((e, idx) => {
+                const it = flat[idx];
+                if (!e || !it) return;
+                const r = radii[it.ri];
+                const a = s.angles[it.ri] + (it.k / it.n) * Math.PI * 2;
+                const z = Math.sin(a); // +1 is the near side (bottom)
+                const lean = (s.leanX * 6 * Math.PI) / 180;
+                let x = Math.cos(a) * r;
+                let y = Math.sin(a) * r * squash;
+                [x, y] = [x * Math.cos(lean) - y * Math.sin(lean), x * Math.sin(lean) + y * Math.cos(lean)];
+                const sc = 1 + z * 0.16 * depthAmt;
+                e.style.transform = `translate(-50%, -50%) translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0) scale(${sc.toFixed(3)})`;
+                e.style.zIndex = String(Math.round(50 + z * 40));
+                e.style.opacity = String((1 - (1 - z) * 0.22 * depthAmt).toFixed(3));
+            });
+            const busy = s.rate > 0.001 || Math.abs(s.ty - s.lean) > 0.001 || Math.abs(s.tx - s.leanX) > 0.001;
+            if (visible && busy) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        const start = () => {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        };
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            s.tx = ((e.clientX - r.left) / r.width) * 2 - 1;
+            s.ty = ((e.clientY - r.top) / r.height) * 2 - 1;
+            start();
+        };
+        const onEnter = (e) => {
+            if (e.pointerType === "mouse") {
+                s.hover = true;
+                setHover(true);
+            }
+            start();
+        };
+        const onLeave = () => {
+            s.hover = false;
+            s.tx = 0;
+            s.ty = 0;
+            setHover(false);
+            start();
+        };
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerenter", onEnter);
+        el.addEventListener("pointerleave", onLeave);
+        const ro = new ResizeObserver(() => {
+            fit();
+            start();
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([en]) => {
+            visible = en.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+        start();
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerenter", onEnter);
+            el.removeEventListener("pointerleave", onLeave);
+        };
+        // flat is derived from rings; the loop reads both through refs and live.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [flat.length]);
+
+    return (
+        <div ref={box} className={`relative aspect-square w-full select-none ${className}`} style={{ maxWidth: `${size}rem`, "--orbit-accent": accentColor }}>
+            {showRings &&
+                rings.map((_, ri) => (
+                    <span
+                        key={ri}
+                        ref={(e) => (ringEls.current[ri] = e)}
+                        aria-hidden="true"
+                        className="pointer-events-none absolute left-1/2 top-1/2 rounded-[50%] border border-dashed border-current opacity-15"
+                    />
+                ))}
+            <div className="absolute left-1/2 top-1/2 z-[50] grid aspect-square w-[22%] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-white/10 bg-neutral-950 text-white shadow-[0_0_60px_-10px_var(--orbit-accent)]">
+                {center ?? <span className="text-base font-black tracking-tight sm:text-xl" style={{ color: accentColor }}>Apex</span>}
+            </div>
+            {flat.map((it, idx) => {
+                const Icon = it.icon;
+                return (
+                    <div key={idx} ref={(e) => (nodes.current[idx] = e)} className="group absolute left-1/2 top-1/2 will-change-transform">
+                        <div
+                            className="grid place-items-center rounded-2xl border border-white/10 bg-neutral-900/90 text-white shadow-[0_10px_30px_-12px_rgba(0,0,0,0.7)] backdrop-blur transition-colors duration-300 group-hover:border-[var(--orbit-accent)]"
+                            style={{ width: "var(--orbit-item, 2.75rem)", aspectRatio: "1" }}
+                            title={it.label}
+                        >
+                            {typeof Icon === "function" || (Icon && typeof Icon === "object" && Icon.$$typeof) ? <Icon className="h-[46%] w-[46%]" style={{ color: it.color }} /> : Icon}
+                        </div>
+                        {it.label && (
+                            <span className="pointer-events-none absolute left-1/2 top-full mt-1.5 -translate-x-1/2 whitespace-nowrap rounded-full bg-black/70 px-2 py-0.5 text-[0.65rem] font-semibold text-white transition-opacity duration-300" style={{ opacity: hover ? 1 : 0 }}>
+                                {it.label}
+                            </span>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default OrbitIcons;

package/dist/ApexUI-Kit/templates/ParticleText/ParticleText.jsx

@@ -0,0 +1,328 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Particle Text: your text rebuilt from thousands of tiny particles on a
+ * canvas. They fly in to form the words (assemble, fall, explode or wave),
+ * move out of the pointer's way, and a click sends a shockwave through them
+ * before they spring back. Moving particles light up in the accent color.
+ * When everything has settled and the pointer is away, the loop sleeps.
+ */
+
+const TAU = Math.PI * 2;
+
+// Points where the text is drawn, sampled from an offscreen canvas.
+function sampleText(text, width, height, weight, family, maxSize, gap) {
+    const off = document.createElement("canvas");
+    off.width = Math.max(1, Math.floor(width));
+    off.height = Math.max(1, Math.floor(height));
+    const c = off.getContext("2d", { willReadFrequently: true });
+    let size = Math.min(maxSize, height * 0.7);
+    c.font = `${weight} ${size}px ${family}`;
+    const measured = c.measureText(text).width;
+    // Shrink to fit 90% of the width.
+    if (measured > width * 0.9) size *= (width * 0.9) / measured;
+    c.font = `${weight} ${size}px ${family}`;
+    c.textAlign = "center";
+    c.textBaseline = "middle";
+    c.fillStyle = "#fff";
+    c.fillText(text, width / 2, height / 2);
+    const data = c.getImageData(0, 0, off.width, off.height).data;
+    const pts = [];
+    for (let y = 0; y < off.height; y += gap) {
+        for (let x = 0; x < off.width; x += gap) {
+            if (data[(y * off.width + x) * 4 + 3] > 120) pts.push(x, y);
+        }
+    }
+    return pts;
+}
+
+const ParticleText = ({
+    text = "ApexUI",
+    fontSize = 9,
+    fontWeight = 800,
+    fontFamily,
+    particleSize = 2,
+    gap = 4,
+    color = "currentColor",
+    accentColor = "#a3e635",
+    intro = "assemble",
+    replayOn = "none",
+    repelRadius = 90,
+    repelStrength = 1,
+    clickBurst = true,
+    height = "20rem",
+    className = "",
+}) => {
+    const wrap = useRef(null);
+    const canvas = useRef(null);
+    const live = useRef({ particleSize, accentColor, color, repelRadius, repelStrength, clickBurst, replayOn, intro });
+    live.current = { particleSize, accentColor, color, repelRadius, repelStrength, clickBurst, replayOn, intro };
+    const wakeRef = useRef(() => {});
+
+    // Prop changes that don't need a rebuild just wake the loop to redraw.
+    useEffect(() => {
+        wakeRef.current();
+    });
+
+    useEffect(() => {
+        const el = wrap.current;
+        const cv = canvas.current;
+        const ctx = cv.getContext("2d");
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        let P = new Float32Array(0); // per particle: x, y, vx, vy, tx, ty, delay, seed
+        let n = 0;
+        let w = 0;
+        let h = 0;
+        let dpr = 1;
+        let raf = 0;
+        let last = 0;
+        let started = 0;
+        let alive = true;
+        let visible = true;
+        let built = "";
+        const pointer = { x: -9999, y: -9999, on: false };
+
+        const startPositions = (mode) => {
+            started = performance.now();
+            for (let i = 0; i < n; i++) {
+                const o = i * 8;
+                const tx = P[o + 4];
+                const ty = P[o + 5];
+                const seed = P[o + 7];
+                let x = tx;
+                let y = ty;
+                let delay = 0;
+                if (reduced) {
+                    // Appear in place.
+                } else if (mode === "fall") {
+                    x = tx + (seed - 0.5) * 30;
+                    y = -20 - seed * h * 0.6;
+                    delay = seed * 500;
+                } else if (mode === "explode") {
+                    const a = seed * TAU * 7;
+                    x = w / 2 + Math.cos(a) * 4;
+                    y = h / 2 + Math.sin(a) * 4;
+                    delay = seed * 200;
+                } else if (mode === "wave") {
+                    x = tx - w * 0.6;
+                    y = ty + Math.sin(tx * 0.04) * 40;
+                    delay = (tx / w) * 700;
+                } else {
+                    x = Math.random() * w;
+                    y = Math.random() * h;
+                    delay = seed * 350;
+                }
+                P[o] = x;
+                P[o + 1] = y;
+                P[o + 2] = mode === "explode" && !reduced ? (Math.random() - 0.5) * 900 : 0;
+                P[o + 3] = mode === "explode" && !reduced ? (Math.random() - 0.5) * 900 : 0;
+                P[o + 6] = delay;
+            }
+            wake();
+        };
+
+        const build = (withIntro) => {
+            const r = el.getBoundingClientRect();
+            if (!r.width || !r.height) return;
+            dpr = Math.min(window.devicePixelRatio || 1, 2);
+            w = r.width;
+            h = r.height;
+            cv.width = Math.round(w * dpr);
+            cv.height = Math.round(h * dpr);
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const family = fontFamily || getComputedStyle(el).fontFamily || "sans-serif";
+            const pts = sampleText(String(text || " "), w, h, fontWeight, family, fontSize * rem, Math.max(2, Math.round(gap)));
+            // Cap the count so huge containers stay smooth.
+            const cap = 6000;
+            const stride = Math.max(1, Math.ceil(pts.length / 2 / cap));
+            n = Math.floor(pts.length / 2 / stride);
+            const old = P;
+            const oldN = old.length / 8;
+            P = new Float32Array(n * 8);
+            for (let i = 0; i < n; i++) {
+                const o = i * 8;
+                const s = i * stride * 2;
+                P[o + 4] = pts[s];
+                P[o + 5] = pts[s + 1];
+                P[o + 7] = ((i * 9301 + 49297) % 233280) / 233280;
+                // Keep current positions on resize so nothing jumps.
+                if (!withIntro && i < oldN) {
+                    P[o] = old[i * 8];
+                    P[o + 1] = old[i * 8 + 1];
+                } else {
+                    P[o] = pts[s];
+                    P[o + 1] = pts[s + 1];
+                }
+            }
+            if (withIntro) startPositions(live.current.intro);
+            wake();
+        };
+
+        const toRgb = (() => {
+            const c = document.createElement("canvas").getContext("2d");
+            return (value) => {
+                c.fillStyle = "#000";
+                c.fillStyle = value;
+                const hex = c.fillStyle;
+                if (hex.startsWith("#")) return [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)];
+                const m = hex.match(/\d+(\.\d+)?/g) || [0, 0, 0];
+                return [+m[0], +m[1], +m[2]];
+            };
+        })();
+
+        const frame = (now) => {
+            raf = 0;
+            if (!alive) return;
+            const o = live.current;
+            const dt = last ? Math.min(0.033, (now - last) / 1000) : 1 / 60;
+            last = now;
+            const elapsed = now - started;
+            const base = o.color === "currentColor" ? getComputedStyle(el).color : o.color;
+            const [br, bg, bb] = toRgb(base);
+            const [ar, ag, ab] = toRgb(o.accentColor);
+            const size = Math.max(0.5, o.particleSize);
+            const rr = o.repelRadius;
+            const rs = o.repelStrength * 2600;
+            let busy = pointer.on;
+
+            ctx.clearRect(0, 0, w, h);
+            // Two passes: settled particles in the base color, moving ones in the accent.
+            const hot = [];
+            ctx.fillStyle = `rgb(${br}, ${bg}, ${bb})`;
+            ctx.beginPath();
+            for (let i = 0; i < n; i++) {
+                const k = i * 8;
+                let x = P[k];
+                let y = P[k + 1];
+                let vx = P[k + 2];
+                let vy = P[k + 3];
+                if (elapsed >= P[k + 6]) {
+                    // Spring toward the target, with damping.
+                    vx += (P[k + 4] - x) * 60 * dt;
+                    vy += (P[k + 5] - y) * 60 * dt;
+                    if (pointer.on && rr > 0) {
+                        const dx = x - pointer.x;
+                        const dy = y - pointer.y;
+                        const d2 = dx * dx + dy * dy;
+                        if (d2 < rr * rr && d2 > 0.01) {
+                            const d = Math.sqrt(d2);
+                            const f = (1 - d / rr) * rs * dt;
+                            vx += (dx / d) * f;
+                            vy += (dy / d) * f;
+                        }
+                    }
+                    const damp = Math.pow(0.0009, dt);
+                    vx *= damp;
+                    vy *= damp;
+                    x += vx * dt;
+                    y += vy * dt;
+                }
+                P[k] = x;
+                P[k + 1] = y;
+                P[k + 2] = vx;
+                P[k + 3] = vy;
+                const off = Math.abs(P[k + 4] - x) + Math.abs(P[k + 5] - y);
+                if (off > 0.3 || Math.abs(vx) + Math.abs(vy) > 2) busy = true;
+                if (off > 4) hot.push(x, y, Math.min(1, off / 40));
+                else ctx.rect(x - size / 2, y - size / 2, size, size);
+            }
+            ctx.fill();
+            if (hot.length) {
+                ctx.globalCompositeOperation = "lighter";
+                for (let j = 0; j < hot.length; j += 3) {
+                    const t = hot[j + 2];
+                    ctx.fillStyle = `rgb(${Math.round(br + (ar - br) * t)}, ${Math.round(bg + (ag - bg) * t)}, ${Math.round(bb + (ab - bb) * t)})`;
+                    ctx.fillRect(hot[j] - size / 2, hot[j + 1] - size / 2, size, size);
+                }
+                ctx.globalCompositeOperation = "source-over";
+            }
+            if (busy && visible) raf = requestAnimationFrame(frame);
+        };
+
+        function wake() {
+            if (raf || !alive || !visible) return;
+            last = 0;
+            raf = requestAnimationFrame(frame);
+        }
+        wakeRef.current = wake;
+
+        const local = (e) => {
+            const r = cv.getBoundingClientRect();
+            return [e.clientX - r.left, e.clientY - r.top];
+        };
+        const onMove = (e) => {
+            [pointer.x, pointer.y] = local(e);
+            pointer.on = true;
+            wake();
+        };
+        const onEnter = (e) => {
+            onMove(e);
+            if (live.current.replayOn === "hover") startPositions(live.current.intro);
+        };
+        const onLeave = () => {
+            pointer.on = false;
+            pointer.x = pointer.y = -9999;
+            wake();
+        };
+        const onDown = (e) => {
+            const o = live.current;
+            if (o.replayOn === "click") return startPositions(o.intro);
+            if (!o.clickBurst || reduced) return;
+            const [cx, cy] = local(e);
+            for (let i = 0; i < n; i++) {
+                const k = i * 8;
+                const dx = P[k] - cx;
+                const dy = P[k + 1] - cy;
+                const d = Math.hypot(dx, dy) || 1;
+                const f = Math.max(0, 1 - d / 260) * 1400 * (0.6 + P[k + 7] * 0.8);
+                P[k + 2] += (dx / d) * f;
+                P[k + 3] += (dy / d) * f;
+            }
+            wake();
+        };
+        cv.addEventListener("pointerenter", onEnter);
+        cv.addEventListener("pointermove", onMove);
+        cv.addEventListener("pointerleave", onLeave);
+        cv.addEventListener("pointerdown", onDown);
+
+        const ro = new ResizeObserver(() => {
+            const r = el.getBoundingClientRect();
+            const key = `${Math.round(r.width)}x${Math.round(r.height)}`;
+            if (key === built) return;
+            const first = !built;
+            built = key;
+            build(first);
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            wake();
+        });
+        io.observe(el);
+        // Rebuild once web fonts are ready so the shape uses the real font.
+        document.fonts?.ready.then(() => alive && built && build(false));
+
+        return () => {
+            alive = false;
+            wakeRef.current = () => {};
+            if (raf) cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            cv.removeEventListener("pointerenter", onEnter);
+            cv.removeEventListener("pointermove", onMove);
+            cv.removeEventListener("pointerleave", onLeave);
+            cv.removeEventListener("pointerdown", onDown);
+        };
+        // Text and font settings rebuild the particles; the rest is read live.
+    }, [text, fontSize, fontWeight, fontFamily, gap]);
+
+    return (
+        <div ref={wrap} className={`relative w-full touch-pan-y select-none overflow-hidden ${className}`} style={{ height }}>
+            <canvas ref={canvas} aria-hidden="true" className="absolute inset-0 block h-full w-full" />
+            <span className="sr-only">{text}</span>
+        </div>
+    );
+};
+
+export default ParticleText;

package/dist/ApexUI-Kit/templates/RadialMenu/RadialMenu.jsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Camera, Heart, Home, MessageCircle, Plus, Settings, Share2, User } from "lucide-react";
+
+/*
+ * Radial Menu: a round button that fans its actions out in a circle (or an
+ * arc). Items spring out one after another and tuck back in on close.
+ * Keyboard friendly: arrows move between items, Escape closes, and clicking
+ * outside closes too. The ring shrinks to fit narrow containers, and the
+ * fade-in is a CSS animation so no item blinks when its spring settles.
+ */
+
+const DEFAULT_ITEMS = [
+    { icon: Home, label: "Home" },
+    { icon: User, label: "Profile" },
+    { icon: MessageCircle, label: "Messages" },
+    { icon: Camera, label: "Camera" },
+    { icon: Heart, label: "Likes" },
+    { icon: Share2, label: "Share" },
+    { icon: Settings, label: "Settings" },
+];
+
+const RadialMenu = ({ items = DEFAULT_ITEMS, radius = 6.5, arc = 360, startAngle = -90, accentColor = "#a3e635", theme = "dark", onSelect, className = "" }) => {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [picked, setPicked] = useState(null);
+    const root = useRef(null);
+    const btns = useRef([]);
+    const [fitR, setFitR] = useState(null);
+    const dark = theme !== "light";
+    const n = items.length;
+    // Full circle spreads evenly; a partial arc includes both ends.
+    const step = arc >= 360 ? 360 / n : arc / Math.max(1, n - 1);
+
+    // Keep the ring inside the box on small screens (item half size + a little room).
+    useEffect(() => {
+        const el = root.current;
+        const ro = new ResizeObserver(([entry]) => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const room = entry.contentRect.width / 2 - 30;
+            setFitR(Math.max(48, Math.min(radius * rem, room)));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [radius]);
+
+    useEffect(() => {
+        if (!open) return undefined;
+        const down = (e) => !root.current?.contains(e.target) && setOpen(false);
+        const key = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("pointerdown", down);
+        document.addEventListener("keydown", key);
+        return () => {
+            document.removeEventListener("pointerdown", down);
+            document.removeEventListener("keydown", key);
+        };
+    }, [open]);
+
+    const choose = (item, i) => {
+        setPicked(i);
+        setOpen(false);
+        onSelect?.(item, i);
+    };
+    const onItemKey = (e, i) => {
+        const next = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[e.key];
+        if (!next) return;
+        e.preventDefault();
+        btns.current[(i + next + n) % n]?.focus();
+    };
+
+    return (
+        <div ref={root} className={`relative inline-grid place-items-center ${className}`} style={{ width: `${radius * 2 + 4}rem`, height: `${radius * 2 + 4}rem`, maxWidth: "100%" }}>
+            <style>{"@keyframes apex-radial-in{from{opacity:0}to{opacity:1}}"}</style>
+            <AnimatePresence>
+                {open &&
+                    items.map((item, i) => {
+                        const a = ((startAngle + i * step) * Math.PI) / 180;
+                        const Icon = item.icon;
+                        const r = fitR ?? radius * 16;
+                        return (
+                            <motion.button
+                                key={`${id}-${i}`}
+                                ref={(el) => (btns.current[i] = el)}
+                                type="button"
+                                aria-label={item.label}
+                                title={item.label}
+                                onClick={() => choose(item, i)}
+                                onKeyDown={(e) => onItemKey(e, i)}
+                                className={`group absolute grid h-12 w-12 place-items-center rounded-full shadow-lg outline-none ring-1 focus-visible:ring-2 ${dark ? "bg-neutral-900 text-white ring-white/10 hover:bg-neutral-800 focus-visible:ring-white/50" : "bg-white text-neutral-800 ring-black/10 hover:bg-neutral-50 focus-visible:ring-black/40"}`}
+                                initial={{ x: 0, y: 0, scale: 0.3 }}
+                                animate={{ x: Math.cos(a) * r, y: Math.sin(a) * r, scale: 1, transition: { type: "spring", stiffness: 380, damping: 26, delay: i * 0.03 } }}
+                                exit={{ x: 0, y: 0, scale: 0.3, opacity: 0, transition: { duration: 0.18, delay: (n - 1 - i) * 0.015 } }}
+                                style={{ animation: `apex-radial-in 220ms ease-out ${i * 30}ms backwards`, ...(picked === i ? { color: accentColor } : null) }}
+                            >
+                                {Icon ? <Icon className="h-5 w-5" /> : item.label[0]}
+                                <span className={`pointer-events-none absolute top-full mt-1.5 whitespace-nowrap rounded-md px-1.5 py-0.5 text-[0.65rem] font-medium opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 ${dark ? "bg-white text-black" : "bg-neutral-900 text-white"}`}>{item.label}</span>
+                            </motion.button>
+                        );
+                    })}
+            </AnimatePresence>
+            <motion.button
+                type="button"
+                aria-expanded={open}
+                aria-label={open ? "Close menu" : "Open menu"}
+                onClick={() => setOpen((o) => !o)}
+                onKeyDown={(e) => open && e.key === "ArrowRight" && (e.preventDefault(), btns.current[0]?.focus())}
+                whileTap={{ scale: 0.92 }}
+                className="relative z-10 grid h-16 w-16 place-items-center rounded-full text-black shadow-[0_10px_30px_-8px_rgba(0,0,0,0.5)] outline-none focus-visible:ring-4 focus-visible:ring-white/40"
+                style={{ background: accentColor }}
+            >
+                <motion.span animate={{ rotate: open ? 135 : 0 }} transition={{ type: "spring", stiffness: 400, damping: 22 }}>
+                    <Plus className="h-7 w-7" strokeWidth={2.5} />
+                </motion.span>
+            </motion.button>
+        </div>
+    );
+};
+
+export default RadialMenu;