Gooey Actions

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useControllableState, useReducedMotion, useVisibilityPause } from "@/lib/motiq";
7 
8/* -------------------------------------------------------------------------- */
9/* Types                                                                      */
10/* -------------------------------------------------------------------------- */
11 
12export interface GooeyAction {
13  /** Stable id passed back to `onSelect`. */
14  id: string;
15  /** Accessible name + hover/focus label chip text. */
16  label: string;
17  /** Optional glyph (an inline `<svg>` works best); falls back to the label initial. */
18  icon?: React.ReactNode;
19}
20 
21export interface GooeyActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
22  /** The satellite actions — 3–6 read best in the arc. */
23  actions: GooeyAction[];
24  /** Distance from the core to each satellite, in px. */
25  radius?: number;
26  /** Arc the satellites spread across, in degrees (screen space, −90° is up). */
27  arc?: [number, number];
28  /** Per-satellite launch delay, in ms. */
29  stagger?: number;
30  /** Bloom spring stiffness (underdamped by design — the goo necks, then snaps). */
31  stiffness?: number;
32  /** Bloom spring damping. */
33  damping?: number;
34  /** Pointer distance, in px, within which a satellite leans toward the cursor. */
35  magnetRange?: number;
36  /** Accessible name for the core button and its menu. */
37  label?: string;
38  /** Controlled open state. */
39  open?: boolean;
40  /** Uncontrolled initial open state. */
41  defaultOpen?: boolean;
42  /** Fired whenever the bloom opens or closes. */
43  onOpenChange?: (open: boolean) => void;
44  /** Fired with the action id when a satellite is committed. */
45  onSelect?: (id: string) => void;
46  /** Tease the bloom every ~7s until the first interaction. */
47  autoPeek?: boolean;
48  /** Deterministic seed for the ambient ember phase (SSR-stable). */
49  seed?: number;
50  /** Stop the rAF loop when scrolled offscreen or the tab is hidden. */
51  pauseWhenHidden?: boolean;
52  /** Force the static, motion-free variant regardless of system preference. */
53  reducedMotion?: boolean;
54}
55 
56/* -------------------------------------------------------------------------- */
57/* Physics                                                                    */
58/* -------------------------------------------------------------------------- */
59 
60interface Spring {
61  x: number;
62  v: number;
63}
64 
65// … truncated