swap

1"use client";
2 
3import { Slot as SlotPrimitive } from "radix-ui";
4import * as React from "react";
5import { cn } from "@/lib/utils";
6import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
7import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect";
8import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
9 
10interface DivProps extends React.ComponentProps<"div"> {
11  asChild?: boolean;
12}
13 
14function getDataState(swapped: boolean) {
15  return swapped ? "on" : "off";
16}
17 
18interface StoreState {
19  swapped: boolean;
20}
21 
22interface Store {
23  subscribe: (callback: () => void) => () => void;
24  getState: () => StoreState;
25  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
26  notify: () => void;
27}
28 
29const StoreContext = React.createContext<Store | null>(null);
30 
31function useStore<T>(
32  selector: (state: StoreState) => T,
33  ogStore?: Store | null,
34): T {
35  const contextStore = React.useContext(StoreContext);
36 
37  const store = ogStore ?? contextStore;
38 
39  if (!store) {
40    throw new Error(`\`useStore\` must be used within \`Swap\``);
41  }
42 
43  const getSnapshot = React.useCallback(
44    () => selector(store.getState()),
45    [store, selector],
46  );
47 
48  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
49}
50 
51interface SwapProps extends DivProps {
52  swapped?: boolean;
53  defaultSwapped?: boolean;
54  onSwappedChange?: (swapped: boolean) => void;
55  activationMode?: "click" | "hover";
56  animation?: "fade" | "rotate" | "flip" | "scale";
57  disabled?: boolean;
58}
59 
60function Swap(props: SwapProps) {
61  const {
62    swapped: swappedProp,
63    defaultSwapped,
64    onSwappedChange,
65    activationMode = "click",
66    animation = "fade",
67    disabled,
68    asChild,
69    className,
70    onClick: onClickProp,
71    onMouseEnter: onMouseEnterProp,
72    onMouseLeave: onMouseLeaveProp,
73    onKeyDown: onKeyDownProp,
74    ...rootProps
75  } = props;
76 
77  const listenersRef = useLazyRef(() => new Set<() => void>());
78  const stateRef = useLazyRef<StoreState>(() => ({
79    swapped: swappedProp ?? defaultSwapped ?? false,
80  }));
81 
82  const propsRef = useAsRef({
83    activationMode,
84    animation,
85    disabled,
86    onSwappedChange,
87    onClick: onClickProp,
88    onMouseEnter: onMouseEnterProp,
89    onMouseLeave: onMouseLeaveProp,
90    onKeyDown: onKeyDownProp,
91  });
92 
93  const isClickMode = activationMode === "click";
94 
95  const store = React.useMemo<Store>(() => {
96    return {
97      subscribe: (cb) => {
98// … truncated