Gooey FAB

1"use client";
2 
3import { motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type GooeyFabSize = "sm" | "md" | "lg";
7export type GooeyFabDirection = "up" | "down" | "left" | "right";
8 
9export type GooeyFabAction = {
10  /** Icon node rendered inside the satellite button. */
11  icon: React.ReactNode;
12  /** Accessible label (also a tooltip target). */
13  label: string;
14  onClick?: () => void;
15};
16 
17export type GooeyFabProps = Omit<
18  React.HTMLAttributes<HTMLDivElement>,
19  "onChange"
20> & {
21  actions: GooeyFabAction[];
22  size?: GooeyFabSize;
23  /** Direction the satellites extrude. Default `"up"`. */
24  direction?: GooeyFabDirection;
25  /** Controlled open state. */
26  open?: boolean;
27  /** Uncontrolled initial open state. Default `false`. */
28  defaultOpen?: boolean;
29  onOpenChange?: (open: boolean) => void;
30  /** Icon for the trigger. Defaults to a plus that rotates into a cross. */
31  triggerIcon?: React.ReactNode;
32  /** Accessible label for the trigger. Default `"Open actions"`. */
33  triggerLabel?: string;
34};
35 
36const triggerSize: Record<GooeyFabSize, number> = { sm: 44, md: 56, lg: 64 };
37const satelliteSize: Record<GooeyFabSize, number> = { sm: 36, md: 44, lg: 50 };
38 
39const offsetFor = (
40  direction: GooeyFabDirection,
41  distance: number,
42): { x: number; y: number } => {
43  switch (direction) {
44    case "down":
45      return { x: 0, y: distance };
46    case "left":
47      return { x: -distance, y: 0 };
48    case "right":
49      return { x: distance, y: 0 };
50    default:
51      return { x: 0, y: -distance };
52  }
53};
54 
55const PlusIcon = () => (
56  <svg
57    viewBox="0 0 24 24"
58    fill="none"
59    stroke="currentColor"
60    strokeWidth="2.5"
61    strokeLinecap="round"
62    className="size-[45%]"
63    aria-hidden="true"
64  >
65    <path d="M12 5v14M5 12h14" />
66  </svg>
67);
68 
69const GooeyFab = React.forwardRef<HTMLDivElement, GooeyFabProps>(
70  (
71    {
72      actions,
73      size = "md",
74      direction = "up",
75      open: controlled,
76      defaultOpen = false,
77      onOpenChange,
78      triggerIcon,
79      triggerLabel = "Open actions",
80      className,
81      ...props
82    },
83    forwardedRef,
84  ) => {
85    const reduce = useReducedMotion() ?? false;
86    const filterId = React.useId().replace(/:/g, "");
87    const isControlled = controlled !== undefined;
88    const [internal, setInternal] = React.useState(defaultOpen);
89    const open = isControlled ? controlled : internal;
90 
91    const setOpen = (next: boolean) => {
92      if (!isControlled) setInternal(next);
93// … truncated