"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { PlusIcon } from "@kineticui/icons"; export type SpeedDialAction = { label: string; icon: React.ReactNode; onClick: () => void }; export type SpeedDialProps = { actions: SpeedDialAction[]; /** Pin to the bottom-right corner of the viewport. */ fixed?: boolean; label?: string; className?: string; }; /** Floating action button that fans out labelled actions. */ export function SpeedDial({ actions, fixed, label = "Actions", className }: SpeedDialProps) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const close = (e: PointerEvent | KeyboardEvent) => { if (e instanceof KeyboardEvent ? e.key === "Escape" : !ref.current?.contains(e.target as Node)) setOpen(false); }; window.addEventListener("pointerdown", close); window.addEventListener("keydown", close); return () => { window.removeEventListener("pointerdown", close); window.removeEventListener("keydown", close); }; }, [open]); return (

{open ? actions.map((a, i) => ( {a.label} )) : null}

); }

Speed Dial

Installation

Exports