50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3b8c,"use client"; import { cn } from "cn"; import { Slot as SlotPrimitive } from "radix-ui"; import * as React from "react"; import { useComposedRefs } from "@/lib/compose-refs"; import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref"; import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect"; import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref"; import { IconPlaceholder } from "@/registry/icons/icon-placeholder"; const ROOT_NAME = "CompareSlider"; const BEFORE_NAME = "CompareSliderBefore"; const AFTER_NAME = "CompareSliderAfter"; const LABEL_NAME = "CompareSliderLabel"; const HANDLE_NAME = "CompareSliderHandle"; const PAGE_KEYS = ["PageUp", "PageDown"]; const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]; type Interaction = "hover" | "drag"; type Orientation = "horizontal" | "vertical"; interface DivProps extends React.ComponentProps<"div"> { asChild?: boolean; } type RootElement = React.ComponentRef; function clamp(value: number, min: number, max: number): number { return Math.min(Math.max(value, min), max); } interface StoreState { value: number; isDragging: boolean; } interface Store { subscribe: (callback: () => void) => () => void; getState: () => StoreState; setState: (key: K, value: StoreState[K]) => void; notify: () => void; } const StoreContext = React.createContext(null); function useStore( selector: (state: StoreState) => T, ogStore?: Store | null, ): T { const contextStore = React.useContext(StoreContext); const store = ogStore ?? contextStore; if (!store) { throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``); } const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } interface CompareSliderContextValue { interaction: Interaction; orientation: Orientation; } const CompareSliderContext = React.createContext(null); function useCompareSliderContext(consumerName: string) { const context = React.useContext(CompareSliderContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface CompareSliderProps extends DivProps { value?: number; defaultValue?: number; onValueChange?: (value: number) => void; step?: number; interaction?: Interaction; orientation?: Orientation; } function CompareSlider(props: CompareSliderProps) { const { value: valueProp, defaultValue = 50, onValueChange, step = 1, interaction = "drag", orientation = "horizontal", className, children, ref, onPointerMove: onPointerMoveProp, onPointerUp: onPointerUpProp, onPointerDown: onPointerDownProp, onKeyDown: onKeyDownProp, asChild, ...rootProps } = props; const stateRef = useLazyRef(() => ({ value: clamp(valueProp ?? defaultValue, 0, 100), isDragging: false, })); const listenersRef = useLazyRef(() => new Set<() => void>()); const onValueChangeRef = useAsRef(onValueChange); const store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb); return () => listenersRef.current.delete(cb); }, getState: () => stateRef.current, setState: (key: K, value: StoreState[K]) => { if (Object.is(stateRef.current[key], value)) return; stateRef.current[key] = value; if (key === "value") { onValueChangeRef.current?.(value as number); } store.notify(); }, notify: () => { for (const cb of listenersRef.current) { cb(); } }, }; }, [listenersRef, stateRef, onValueChangeRef]); const rootRef = React.useRef(null); const composedRef = useComposedRefs(ref, rootRef); const isDraggingRef = React.useRef(false); const propsRef = useAsRef({ onPointerMove: onPointerMoveProp, onPointerUp: onPointerUpProp, onPointerDown: onPointerDownProp, onKeyDown: onKeyDownProp, interaction, orientation, step, }); const value = useStore((state) => state.value, store); useIsomorphicLayoutEffect(() => { if (valueProp !== undefined) { store.setState("value", clamp(valueProp, 0, 100)); } }, [valueProp]); const onPointerMove = React.useCallback( (event: React.PointerEvent) => { if (!isDraggingRef.current && propsRef.current.interaction === "drag") { return; } if (!rootRef.current) return; propsRef.current.onPointerMove?.(event); if (event.defaultPrevented) return; const rootRect = rootRef.current.getBoundingClientRect(); const isVertical = propsRef.current.orientation === "vertical"; const position = isVertical ? event.clientY - rootRect.top : event.clientX - rootRect.left; const size = isVertical ? rootRect.height : rootRect.width; const percentage = clamp((position / size) * 100, 0, 100); store.setState("value", percentage); }, [propsRef, store], ); const onPointerDown = React.useCallback( (event: React.PointerEvent) => { if (propsRef.current.interaction !== "drag") return; propsRef.current.onPointerDown?.(event); if (event.defaultPrevented) return; event.currentTarget.setPointerCapture(event.pointerId); isDraggingRef.current = true; store.setState("isDragging", true); }, [store, propsRef], ); const onPointerUp = React.useCallback( (event: React.PointerEvent) => { if (propsRef.current.interaction !== "drag") return; propsRef.current.onPointerUp?.(event); if (event.defaultPrevented) return; event.currentTarget.releasePointerCapture(event.pointerId); isDraggingRef.current = false; store.setState("isDragging", false); }, [store, propsRef], ); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { propsRef.current.onKeyDown?.(event); if (event.defaultPrevented) return; const currentValue = store.getState().value; const isVertical = propsRef.current.orientation === "vertical"; if (event.key === "Home") { event.preventDefault(); store.setState("value", 0); } else if (event.key === "End") { event.preventDefault(); store.setState("value", 100); } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) { event.preventDefault(); const isPageKey = PAGE_KEYS.includes(event.key); const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key)); const multiplier = isSkipKey ? 10 : 1; let direction = 0; if (isVertical) { const isDecreaseKey = ["ArrowUp", "PageUp"].includes(event.key); direction = isDecreaseKey ? -1 : 1; } else { const isDecreaseKey = ["ArrowLeft", "PageUp"].includes(event.key); direction = isDecreaseKey ? -1 : 1; } const stepInDirection = propsRef.current.step * multiplier * direction; const newValue = clamp(currentValue + stepInDirection, 0, 100); store.setState("value", newValue); } }, [store, propsRef], ); const contextValue = React.useMemo( () => ({ interaction, orientation, }), [interaction, orientation], ); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {children} ); } interface CompareSliderBeforeProps extends DivProps { label?: string; } function CompareSliderBefore(props: CompareSliderBeforeProps) { const { className, children, style, label, asChild, ref, ...beforeProps } = props; const value = useStore((state) => state.value); const { orientation } = useCompareSliderContext(BEFORE_NAME); const labelId = React.useId(); const isVertical = orientation === "vertical"; const clipPath = isVertical ? `inset(${value}% 0 0 0)` : `inset(0 0 0 ${value}%)`; const BeforePrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {children} {label && ( {label} )} ); } interface CompareSliderAfterProps extends DivProps { label?: string; } function CompareSliderAfter(props: CompareSliderAfterProps) { const { className, children, style, label, asChild, ref, ...afterProps } = props; const value = useStore((state) => state.value); const { orientation } = useCompareSliderContext(AFTER_NAME); const labelId = React.useId(); const isVertical = orientation === "vertical"; const clipPath = isVertical ? `inset(0 0 ${100 - value}% 0)` : `inset(0 ${100 - value}% 0 0)`; const AfterPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {children} {label && ( {label} )} ); } function CompareSliderHandle(props: DivProps) { const { className, children, style, asChild, ref, ...handleProps } = props; const value = useStore((state) => state.value); const { interaction, orientation } = useCompareSliderContext(HANDLE_NAME); const isVertical = orientation === "vertical"; const HandlePrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {children ?? ( <>

{interaction === "drag" && (

{isVertical ? (

) : (

)}

)} )} ); } interface CompareSliderLabelProps extends DivProps { side?: "before" | "after"; } function CompareSliderLabel(props: CompareSliderLabelProps) { const { className, children, side, asChild, ref, ...labelProps } = props; const { orientation } = useCompareSliderContext(LABEL_NAME); const isVertical = orientation === "vertical"; const LabelPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {children} ); } export { CompareSlider, CompareSliderAfter, CompareSliderBefore, CompareSliderHandle, CompareSliderLabel, type CompareSliderProps, }; 53:T76f,/** * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx */ import * as React from "react"; type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function setRef(ref: PossibleRef, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { ref.current = value; } } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function composeRefs(...refs: PossibleRef[]): React.RefCallback { return (node) => { let hasCleanup = false; const cleanups = refs.map((ref) => { const cleanup = setRef(ref, node); if (!hasCleanup && typeof cleanup === "function") { hasCleanup = true; } return cleanup; }); // React <19 will log an error to the console if a callback ref returns a // value. We don't use ref cleanups internally so this will only happen if a // user's ref callback returns a value, which we only expect if they are // using the cleanup functionality added in React 19. if (hasCleanup) { return () => { for (let i = 0; i < cleanups.length; i++) { const cleanup = cleanups[i]; if (typeof cleanup === "function") { cleanup(); } else { setRef(refs[i], null); } } }; } }; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function useComposedRefs(...refs: PossibleRef[]): React.RefCallback { // oxlint-disable-next-line react/exhaustive-deps -- we want to memoize by all values return React.useCallback(composeRefs(...refs), refs); } export { composeRefs, useComposedRefs }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["@diceui/use-as-ref","@diceui/use-isomorphic-layout-effect","@diceui/use-lazy-ref"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/compare-slider.tsx","content":"$52","type":"registry:ui","target":""},{"path":"lib/compose-refs.ts","content":"$53","type":"registry:lib","target":""}],"className":"h-[70svh] min-h-80"}]]}]