compare-slider

1"use client";
2 
3import {
4  ChevronDownIcon,
5  ChevronLeftIcon,
6  ChevronRightIcon,
7  ChevronUpIcon,
8} from "lucide-react";
9import { Slot as SlotPrimitive } from "radix-ui";
10import * as React from "react";
11import { useComposedRefs } from "@/lib/compose-refs";
12import { cn } from "@/lib/utils";
13import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
14import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect";
15import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
16 
17const ROOT_NAME = "CompareSlider";
18const BEFORE_NAME = "CompareSliderBefore";
19const AFTER_NAME = "CompareSliderAfter";
20const LABEL_NAME = "CompareSliderLabel";
21const HANDLE_NAME = "CompareSliderHandle";
22 
23const PAGE_KEYS = ["PageUp", "PageDown"];
24const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
25 
26type Interaction = "hover" | "drag";
27type Orientation = "horizontal" | "vertical";
28 
29interface DivProps extends React.ComponentProps<"div"> {
30  asChild?: boolean;
31}
32 
33type RootElement = React.ComponentRef<typeof CompareSlider>;
34 
35function clamp(value: number, min: number, max: number): number {
36  return Math.min(Math.max(value, min), max);
37}
38 
39interface StoreState {
40  value: number;
41  isDragging: boolean;
42}
43 
44interface Store {
45  subscribe: (callback: () => void) => () => void;
46  getState: () => StoreState;
47  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
48  notify: () => void;
49}
50 
51const StoreContext = React.createContext<Store | null>(null);
52 
53function useStore<T>(
54  selector: (state: StoreState) => T,
55  ogStore?: Store | null,
56): T {
57  const contextStore = React.useContext(StoreContext);
58 
59  const store = ogStore ?? contextStore;
60 
61  if (!store) {
62    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
63  }
64 
65  const getSnapshot = React.useCallback(
66    () => selector(store.getState()),
67    [store, selector],
68  );
69 
70  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
71}
72 
73interface CompareSliderContextValue {
74  interaction: Interaction;
75  orientation: Orientation;
76}
77 
78const CompareSliderContext =
79  React.createContext<CompareSliderContextValue | null>(null);
80 
81function useCompareSliderContext(consumerName: string) {
82  const context = React.useContext(CompareSliderContext);
83  if (!context) {
84    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
85  }
86  return context;
87}
88 
89interface CompareSliderProps extends DivProps {
90// … truncated