apex-ui-kit 2.5.0 → 2.7.0

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { motion, useAnimationFrame, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
+
+/*
+ * Marquee 3D: a wall of cards tilted back in 3D, with columns that scroll in
+ * opposite directions forever. Great for showing off screenshots, logos or
+ * testimonials. Each column repeats its items twice and moves exactly one
+ * copy, so the loop has no seam. Hover pauses; edges fade out.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage";
+const shot = (f) => `${IK}/${f}?tr=f-auto,q-75,w-420`;
+const DEFAULT_IMAGES = [
+    "gooey-nav-v3.png", "liquid-blob-3d.png", "galaxy-3d.png", "warp-tunnel.png", "retro-grid-3d.png", "particle-morph.png",
+    "distortion-image.png", "cube-gallery-v2.png", "coverflow-3d.png", "ai-voice-orb.png", "flip-book-v2.png", "holo-card.png",
+    "dot-globe.png", "3d-carousel.png", "pricing-cards.png", "stepper.png",
+].map(shot);
+
+function Column({ images, duration, reverse, paused }) {
+    const reduced = useReducedMotion();
+    const list = [...images, ...images];
+    // Progress through one copy (0 to 50%), advanced every frame. Pausing just
+    // stops advancing, so hover-out continues from the same spot (no jump).
+    const offset = useMotionValue(0);
+    useAnimationFrame((_, delta) => {
+        if (paused || reduced) return;
+        offset.set((offset.get() + (Math.min(delta, 50) / 1000 / duration) * 50) % 50);
+    });
+    const y = useTransform(offset, (v) => `${reverse ? v - 50 : -v}%`);
+    return (
+        <div className="relative h-full overflow-hidden">
+            <motion.div className="flex flex-col gap-4" style={{ y }}>
+                {list.map((src, i) => (
+                    <img key={i} src={src} alt="" draggable="false" loading="lazy" className="aspect-[4/3] w-full rounded-xl bg-neutral-900 object-cover shadow-[0_10px_30px_-12px_rgba(0,0,0,0.6)] ring-1 ring-white/10" />
+                ))}
+            </motion.div>
+        </div>
+    );
+}
+
+const Marquee3D = ({ images = DEFAULT_IMAGES, columns = 4, speed = 1, tilt = 1, pauseOnHover = true, height = "100%", className = "" }) => {
+    const [hover, setHover] = React.useState(false);
+    const cols = Array.from({ length: columns }, (_, c) => images.filter((_, i) => i % columns === c));
+    return (
+        <div
+            className={`relative w-full overflow-hidden [perspective:1000px] ${className}`}
+            style={{ height, maskImage: "linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)", WebkitMaskImage: "linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)" }}
+            onPointerEnter={() => pauseOnHover && setHover(true)}
+            onPointerLeave={() => setHover(false)}
+            aria-hidden="true"
+        >
+            <div
+                className="absolute left-1/2 top-1/2 grid h-[170%] w-[115%] gap-4"
+                style={{
+                    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                    transform: `translate(-50%, -50%) rotateX(${32 * tilt}deg) rotateZ(${-22 * tilt}deg) rotateY(${8 * tilt}deg)`,
+                    transformStyle: "preserve-3d",
+                }}
+            >
+                {cols.map((imgs, c) => (
+                    <Column key={c} images={imgs.length ? imgs : images} duration={(28 + c * 6) / speed} reverse={c % 2 === 1} paused={hover} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Marquee3D;

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion';
-import { ArrowRight, ArrowUpRight, ChevronDown } from 'lucide-react';
+import { ArrowRight, ArrowUpRight, ChevronDown, Menu, X } from 'lucide-react';
 
 const ease = [0.22, 1, 0.36, 1];
 const CLOSE_DELAY = 140;
@@ -70,7 +70,129 @@ const PanelContent = ({ item }) => {
     return <Services items={item.submenu} />;
 };
 
+/*
+ * Phones: a Menu button opens one full-width sheet; each section expands in
+ * place (accordion) instead of a hover panel that would not fit.
+ */
+const MobileNav = ({ navData }) => {
+    const [open, setOpen] = useState(false);
+    const [section, setSection] = useState(null);
+    const root = useRef(null);
+    useEffect(() => {
+        if (!open) return undefined;
+        const down = (e) => !root.current?.contains(e.target) && setOpen(false);
+        const key = (e) => e.key === 'Escape' && setOpen(false);
+        window.addEventListener('pointerdown', down);
+        window.addEventListener('keydown', key);
+        return () => {
+            window.removeEventListener('pointerdown', down);
+            window.removeEventListener('keydown', key);
+        };
+    }, [open]);
+    return (
+        <div ref={root} className="relative w-full max-w-sm">
+            <button
+                type="button"
+                aria-expanded={open}
+                onClick={() => setOpen((o) => !o)}
+                className="flex w-full items-center justify-between rounded-full border border-white/10 bg-zinc-950/85 px-5 py-3 text-sm font-medium text-zinc-200 shadow-[0_10px_40px_-12px_rgba(0,0,0,0.7)] outline-none backdrop-blur-xl focus-visible:ring-2 focus-visible:ring-lime-400/60"
+            >
+                Menu
+                {open ? <X size={18} /> : <Menu size={18} />}
+            </button>
+            <AnimatePresence>
+                {open && (
+                    <motion.nav
+                        aria-label="Main"
+                        initial={{ opacity: 0, y: -8, scale: 0.98 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15 } }}
+                        transition={{ duration: 0.22, ease }}
+                        className="absolute left-0 right-0 top-full z-10 mt-2 max-h-[70vh] origin-top overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950/95 p-2 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl"
+                    >
+                        {navData.map((item, i) => {
+                            const hasMenu = Boolean(item.submenu?.length);
+                            const isOpen = section === i;
+                            if (!hasMenu) {
+                                return (
+                                    <a key={i} href={item.href || '#'} className="block rounded-xl px-3 py-3 text-sm font-medium text-zinc-200 outline-none hover:bg-white/[0.05] focus-visible:bg-white/[0.07]">
+                                        {item.label}
+                                    </a>
+                                );
+                            }
+                            return (
+                                <div key={i}>
+                                    <button
+                                        type="button"
+                                        aria-expanded={isOpen}
+                                        onClick={() => setSection(isOpen ? null : i)}
+                                        className={`flex w-full items-center justify-between rounded-xl px-3 py-3 text-sm font-medium outline-none hover:bg-white/[0.05] focus-visible:bg-white/[0.07] ${isOpen ? 'text-lime-300' : 'text-zinc-200'}`}
+                                    >
+                                        {item.label}
+                                        <ChevronDown size={16} className={`transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} />
+                                    </button>
+                                    <AnimatePresence initial={false}>
+                                        {isOpen && (
+                                            <motion.ul
+                                                initial={{ height: 0, opacity: 0 }}
+                                                animate={{ height: 'auto', opacity: 1 }}
+                                                exit={{ height: 0, opacity: 0 }}
+                                                transition={{ duration: 0.25, ease }}
+                                                className="overflow-hidden pl-2"
+                                            >
+                                                {item.submenu.map((sub, j) => (
+                                                    <li key={j}>
+                                                        <a href={sub.href} className="flex items-center gap-3 rounded-lg px-3 py-2 outline-none hover:bg-white/[0.05] focus-visible:bg-white/[0.07]">
+                                                            {sub.image ? (
+                                                                <img src={sub.image} alt="" className="h-9 w-9 shrink-0 rounded-md object-cover ring-1 ring-white/10" />
+                                                            ) : (
+                                                                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-lime-400/20 bg-lime-400/10 text-xs font-semibold text-lime-300">
+                                                                    {sub.icon ? <sub.icon size={14} /> : sub.label.charAt(0)}
+                                                                </span>
+                                                            )}
+                                                            <span className="min-w-0">
+                                                                <span className="block truncate text-sm text-zinc-100">{sub.label}</span>
+                                                                {sub.subtitle && <span className="block truncate text-xs text-zinc-500">{sub.subtitle}</span>}
+                                                            </span>
+                                                        </a>
+                                                    </li>
+                                                ))}
+                                            </motion.ul>
+                                        )}
+                                    </AnimatePresence>
+                                </div>
+                            );
+                        })}
+                    </motion.nav>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+// Below this much room the desktop bar would not fit, so the phone menu shows.
+const COMPACT_BELOW = 640;
+
 const NavDropDown = ({ navData = [], className = '' }) => {
+    const hostRef = useRef(null);
+    const [compact, setCompact] = useState(false);
+    useLayoutEffect(() => {
+        const host = hostRef.current?.parentElement;
+        if (!host) return undefined;
+        const check = () => setCompact(host.clientWidth < COMPACT_BELOW);
+        check();
+        const ro = new ResizeObserver(check);
+        ro.observe(host);
+        return () => ro.disconnect();
+    }, []);
+    return (
+        <div ref={hostRef} className={`flex w-full justify-center ${className}`}>
+            {compact ? <MobileNav navData={navData} /> : <DesktopNav navData={navData} />}
+        </div>
+    );
+};
+
+const DesktopNav = ({ navData = [], className = '' }) => {
     const uid = useId();
     const rootRef = useRef(null);
     const barRef = useRef(null);

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,103 @@
+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.
+ */
+
+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 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);
+
+    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%" }}>
+            <AnimatePresence>
+                {open &&
+                    items.map((item, i) => {
+                        const a = ((startAngle + i * step) * Math.PI) / 180;
+                        const Icon = item.icon;
+                        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, opacity: 0 }}
+                                animate={{ x: `${Math.cos(a) * radius}rem`, y: `${Math.sin(a) * radius}rem`, scale: 1, opacity: 1, transition: { type: "spring", stiffness: 420, damping: 24, 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={picked === i ? { color: accentColor } : undefined}
+                            >
+                                {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;