"use client"; import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check, ChevronDown, Eye, RefreshCw, Rocket, Undo2, type LucideIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; export type SplitAction = { label: string; hint: string; icon: LucideIcon; }; export type SplitButtonProps = { actions: SplitAction[]; defaultIndex?: number; autoCycle?: boolean; onAction?: (action: SplitAction, index: number) => void; className?: string; }; const SPRING = { type: "spring" as const, stiffness: 460, damping: 34, mass: 0.9 }; const PRESS = { type: "spring" as const, stiffness: 700, damping: 30 }; const MENU = { type: "spring" as const, stiffness: 520, damping: 40, mass: 0.7 }; const HIGHLIGHT = { type: "spring" as const, stiffness: 640, damping: 46 }; export function SplitButton({ actions, defaultIndex = 0, autoCycle = false, onAction, className, }: SplitButtonProps) { const [selected, setSelected] = useState(defaultIndex); const [active, setActive] = useState(defaultIndex); const [open, setOpen] = useState(false); const [auto, setAuto] = useState(autoCycle); const [pulse, setPulse] = useState(0); const selectedRef = useRef(selected); const onActionRef = useRef(onAction); const resumeRef = useRef | null>(null); useEffect(() => { selectedRef.current = selected; }, [selected]); useEffect(() => { onActionRef.current = onAction; }, [onAction]); function commit(index: number) { setSelected(index); setActive(index); setPulse((p) => p + 1); onActionRef.current?.(actions[index], index); } // Idle auto-cycle: opens the menu, scans the highlight across the // alternates, commits one, then closes. Fully deterministic. useEffect(() => { if (!auto || actions.length < 2) return; let cancelled = false; const timers: ReturnType[] = []; const wait = (ms: number) => new Promise((res) => { timers.push(setTimeout(res, ms)); }); async function run() { await wait(1300); let step = 0; while (!cancelled) { const from = selectedRef.current; const distance = 1 + (step % (actions.length - 1)); const target = (from + distance) % actions.length; step += 1; setOpen(true); setActive(from); await wait(560); if (cancelled) break; let cursor = from; while (cursor !== target) { cursor = (cursor + 1) % actions.length; setActive(cursor); await wait(280); if (cancelled) break; } if (cancelled) break; await wait(340); commit(target); await wait(520); if (cancelled) break; setOpen(false); await wait(2100); } } void run(); return () => { cancelled = true; timers.forEach(clearTimeout); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [auto, actions]); useEffect( () => () => { if (resumeRef.current) clearTimeout(resumeRef.current); }, [], ); function pauseAuto() { if (resumeRef.current) clearTimeout(resumeRef.current); if (autoCycle) setAuto(false); } function scheduleResume() { if (!autoCycle) return; if (resumeRef.current) clearTimeout(resumeRef.current); resumeRef.current = setTimeout(() => setAuto(true), 2400); } const current = actions[selected]; const CurrentIcon = current.icon; return (

{ setActive(selectedRef.current); scheduleResume(); }} className={cn("relative inline-block text-left", className)} > {/* Confirmation pulse, re-fires on every committed pick */} {/* Button row */}

{ pauseAuto(); setOpen(false); commit(selected); }} className="relative z-10 flex items-center rounded-l-[11px] py-2.5 pl-4 pr-3.5 text-[13px] font-medium text-white outline-none transition-colors hover:bg-white/[0.04] focus-visible:bg-white/[0.05]" > {current.label} { pauseAuto(); setOpen((o) => !o); }} className="relative z-10 flex items-center rounded-r-[11px] px-2.5 text-zinc-400 outline-none transition-colors hover:bg-white/[0.04] hover:text-zinc-200 focus-visible:bg-white/[0.05]" >

{/* Menu of alternate actions */} {open && (

Choose action

{actions.map((action, i) => { const ItemIcon = action.icon; const isSelected = i === selected; const isActive = i === active; return ( ); })} )}

); } const DEMO_ACTIONS: SplitAction[] = [ { label: "Deploy to Production", hint: "Ship main to production", icon: Rocket }, { label: "Deploy Preview", hint: "Spin up a preview URL", icon: Eye }, { label: "Redeploy Latest", hint: "Rebuild the last commit", icon: RefreshCw }, { label: "Roll Back", hint: "Revert to the previous build", icon: Undo2 }, ]; export default function Demo() { const [last, setLast] = useState(DEMO_ACTIONS[0]); return (

{/* Ambient glow */}

Deployments

One default action, a menu of the rest. The library cycles picks so you can feel the motion.

setLast(action)} />

Default action {last.label}

); }

Split Button