speed-dial

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