Floating Toolbar

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type ToolbarAction = {
7  icon: React.ReactNode;
8  label: string;
9  onClick?: () => void;
10  active?: boolean;
11  disabled?: boolean;
12};
13 
14export type FloatingToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
15  actions: ToolbarAction[];
16  /** Controls mount/unmount with a spring entrance. */
17  open?: boolean;
18  /** Optional trailing content (e.g. a divider + extra controls). */
19  children?: React.ReactNode;
20};
21 
22const FloatingToolbar = React.forwardRef<HTMLDivElement, FloatingToolbarProps>(
23  ({ actions, open = true, className, children, ...props }, ref) => {
24    const reduceMotion = useReducedMotion();
25    return (
26      <AnimatePresence>
27        {open && (
28          <motion.div
29            ref={ref}
30            layout
31            role="toolbar"
32            aria-label="Floating toolbar"
33            initial={
34              reduceMotion ? { opacity: 0 } : { opacity: 0, y: 12, scale: 0.92 }
35            }
36            animate={{ opacity: 1, y: 0, scale: 1 }}
37            exit={
38              reduceMotion ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.95 }
39            }
40            transition={{ type: "spring", stiffness: 520, damping: 32 }}
41            className={`inline-flex items-center gap-0.5 rounded-xl border border-border bg-popover/90 p-1 text-popover-foreground shadow-lg backdrop-blur-md ${
42              className ?? ""
43            }`}
44            {...(props as React.ComponentProps<typeof motion.div>)}
45          >
46            {actions.map((action) => (
47              <motion.button
48                key={action.label}
49                type="button"
50                layout
51                disabled={action.disabled}
52                aria-label={action.label}
53                aria-pressed={action.active}
54                onClick={action.onClick}
55                whileHover={reduceMotion ? undefined : { y: -2, scale: 1.08 }}
56                whileTap={reduceMotion ? undefined : { scale: 0.94 }}
57                transition={{ type: "spring", stiffness: 520, damping: 32 }}
58                className={`grid size-9 place-items-center rounded-lg [transition:background-color_150ms_ease,color_150ms_ease] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 ${
59                  action.active
60                    ? "bg-primary text-primary-foreground"
61// … truncated