speed-dial

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva, type VariantProps } from "class-variance-authority";
6import * as React from "react";
7import { useComposedRefs } from "@/lib/compose-refs";
8import { cn } from "@/lib/utils";
9import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
10import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
11import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
12import { Button } from "@/registry/bases/base/ui/button";
13 
14const ROOT_NAME = "SpeedDial";
15const TRIGGER_NAME = "SpeedDialTrigger";
16const CONTENT_NAME = "SpeedDialContent";
17const ITEM_NAME = "SpeedDialItem";
18const ACTION_NAME = "SpeedDialAction";
19const LABEL_NAME = "SpeedDialLabel";
20 
21const ACTION_SELECT = "speedDial.actionSelect";
22const INTERACT_OUTSIDE = "speedDial.interactOutside";
23const EVENT_OPTIONS = { bubbles: true, cancelable: true };
24 
25const DEFAULT_GAP = 8;
26const DEFAULT_OFFSET = 8;
27const DEFAULT_ITEM_DELAY = 50;
28const DEFAULT_HOVER_CLOSE_DELAY = 100;
29const DEFAULT_ANIMATION_DURATION = 200;
30 
31type Side = "top" | "right" | "bottom" | "left";
32type ActivationMode = "click" | "hover";
33 
34interface DivProps
35  extends Omit<React.ComponentProps<"div">, "children">,
36    useRender.ComponentProps<"div"> {}
37 
38type RootElement = HTMLDivElement;
39type ContentElement = HTMLDivElement;
40type TriggerElement = HTMLButtonElement;
41type ActionElement = HTMLButtonElement;
42 
43interface InteractOutsideEvent extends CustomEvent {
44  detail: {
45    originalEvent: PointerEvent;
46  };
47}
48 
49function getDataState(open: boolean): string {
50  return open ? "open" : "closed";
51}
52 
53function getTransformOrigin(side: Side): string {
54  switch (side) {
55    case "top":
56      return "bottom center";
57    case "bottom":
58      return "top center";
59    case "left":
60      return "right center";
61    case "right":
62      return "left center";
63  }
64}
65 
66interface StoreState {
67  open: boolean;
68}
69 
70interface Store {
71  subscribe: (callback: () => void) => () => void;
72  getState: () => StoreState;
73  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
74  notify: () => void;
75}
76 
77const StoreContext = React.createContext<Store | null>(null);
78 
79function useStoreContext(consumerName: string) {
80  const context = React.useContext(StoreContext);
81  if (!context) {
82    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
83  }
84// … truncated