compare-slider

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