swap

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