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:T65c2,"use client"; import { cn } from "cn"; import { Direction as DirectionPrimitive, Slot as SlotPrimitive, } from "radix-ui"; import * as React from "react"; import { useComposedRefs } from "@/lib/compose-refs"; import { VisuallyHiddenInput } from "@/registry/bases/radix/components/visually-hidden-input"; 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"; const ROOT_NAME = "AngleSlider"; const THUMB_NAME = "AngleSliderThumb"; const PAGE_KEYS = ["PageUp", "PageDown"]; const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]; type Direction = "ltr" | "rtl"; interface DivProps extends React.ComponentProps<"div"> { asChild?: boolean; } type RootElement = React.ComponentRef; type ThumbElement = React.ComponentRef; function clamp(value: number, [min, max]: [number, number]) { return Math.min(max, Math.max(min, value)); } function getNextSortedValues( prevValues: number[] = [], nextValue: number, atIndex: number, ) { const nextValues = [...prevValues]; nextValues[atIndex] = nextValue; return nextValues.sort((a, b) => a - b); } function getStepsBetweenValues(values: number[]) { return values.slice(0, -1).map((value, index) => { const nextValue = values[index + 1]; return nextValue !== undefined ? nextValue - value : 0; }); } function hasMinStepsBetweenValues( values: number[], minStepsBetweenValues: number, ) { if (minStepsBetweenValues > 0) { const stepsBetweenValues = getStepsBetweenValues(values); const actualMinStepsBetweenValues = stepsBetweenValues.length > 0 ? Math.min(...stepsBetweenValues) : 0; return actualMinStepsBetweenValues >= minStepsBetweenValues; } return true; } function getDecimalCount(value: number) { return (String(value).split(".")[1] ?? "").length; } function roundValue(value: number, decimalCount: number) { const rounder = 10 ** decimalCount; return Math.round(value * rounder) / rounder; } function getClosestValueIndex(values: number[], nextValue: number) { if (values.length === 1) return 0; const distances = values.map((value) => Math.abs(value - nextValue)); const closestDistance = Math.min(...distances); return distances.indexOf(closestDistance); } interface ThumbData { id: string; element: ThumbElement; index: number; value: number; } interface StoreState { values: number[]; thumbs: Map; valueIndexToChange: number; min: number; max: number; step: number; size: number; thickness: number; startAngle: number; endAngle: number; minStepsBetweenThumbs: number; disabled: boolean; inverted: boolean; } interface Store { subscribe: (callback: () => void) => () => void; getState: () => StoreState; setState: (key: K, value: StoreState[K]) => void; notify: () => void; addThumb: (index: number, thumbData: ThumbData) => void; removeThumb: (index: number) => void; updateValue: ( value: number, atIndex: number, options?: { commit?: boolean }, ) => void; getValueFromPointer: ( clientX: number, clientY: number, rect: DOMRect, ) => number; getAngleFromValue: (value: number) => number; getPositionFromAngle: (angle: number) => { x: number; y: number }; } const StoreContext = React.createContext(null); function useStoreContext(consumerName: string) { const context = React.useContext(StoreContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } function useStore(selector: (state: StoreState) => T): T { const store = useStoreContext("useStore"); const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } interface SliderContextValue { dir: Direction; name?: string; form?: string; } const SliderContext = React.createContext(null); function useSliderContext(consumerName: string) { const context = React.useContext(SliderContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface AngleSliderProps extends Omit { value?: number[]; defaultValue?: number[]; onValueChange?: (value: number[]) => void; onValueCommit?: (value: number[]) => void; min?: number; max?: number; step?: number; minStepsBetweenThumbs?: number; size?: number; thickness?: number; startAngle?: number; endAngle?: number; dir?: Direction; form?: string; name?: string; disabled?: boolean; inverted?: boolean; } function AngleSlider(props: AngleSliderProps) { const { value, defaultValue = [0], onValueChange, onValueCommit, min = 0, max = 100, step = 1, minStepsBetweenThumbs = 0, size = 60, thickness = 8, startAngle = -90, endAngle = 270, dir: dirProp, form, name, disabled = false, inverted = false, asChild, className, ref, onPointerMove: onPointerMoveProp, onPointerUp: onPointerUpProp, onPointerDown: onPointerDownProp, onKeyDown: onKeyDownProp, ...rootProps } = props; const listenersRef = useLazyRef(() => new Set<() => void>()); const stateRef = useLazyRef(() => ({ values: value ?? defaultValue, thumbs: new Map(), valueIndexToChange: 0, min, max, step, minStepsBetweenThumbs, disabled, inverted, size, thickness, startAngle, endAngle, })); const propsRef = useAsRef({ onValueChange, onValueCommit, onPointerMove: onPointerMoveProp, onPointerUp: onPointerUpProp, onPointerDown: onPointerDownProp, onKeyDown: onKeyDownProp, }); const store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb); return () => listenersRef.current.delete(cb); }, getState: () => stateRef.current, setState: (key, value) => { if (Object.is(stateRef.current[key], value)) return; if (key === "values" && Array.isArray(value)) { const hasChanged = String(stateRef.current.values) !== String(value); stateRef.current.values = value; if (hasChanged) { propsRef.current.onValueChange?.(value); } } else { stateRef.current[key] = value; } store.notify(); }, addThumb: (index, thumbData) => { stateRef.current.thumbs.set(index, thumbData); store.notify(); }, removeThumb: (index) => { stateRef.current.thumbs.delete(index); store.notify(); }, updateValue: (value, atIndex, { commit = false } = {}) => { const { min, max, step, minStepsBetweenThumbs } = stateRef.current; const decimalCount = getDecimalCount(step); const snapToStep = roundValue( Math.round((value - min) / step) * step + min, decimalCount, ); const nextValue = clamp(snapToStep, [min, max]); const nextValues = getNextSortedValues( stateRef.current.values, nextValue, atIndex, ); if ( hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step) ) { stateRef.current.valueIndexToChange = nextValues.indexOf(nextValue); const hasChanged = String(nextValues) !== String(stateRef.current.values); if (hasChanged) { stateRef.current.values = nextValues; propsRef.current.onValueChange?.(nextValues); if (commit) propsRef.current.onValueCommit?.(nextValues); store.notify(); } } }, getValueFromPointer: (clientX, clientY, rect) => { const { min, max, inverted, startAngle, endAngle } = stateRef.current; const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const deltaX = clientX - centerX; const deltaY = clientY - centerY; let angle = (Math.atan2(deltaY, deltaX) * 180) / Math.PI; if (angle < 0) angle += 360; angle = (angle - startAngle + 360) % 360; const totalAngle = (endAngle - startAngle + 360) % 360 || 360; let percent = angle / totalAngle; if (inverted) percent = 1 - percent; return min + percent * (max - min); }, getAngleFromValue: (value) => { const { min, max, inverted, startAngle, endAngle } = stateRef.current; let percent = (value - min) / (max - min); if (inverted) percent = 1 - percent; const totalAngle = (endAngle - startAngle + 360) % 360 || 360; const angle = startAngle + percent * totalAngle; return angle; }, getPositionFromAngle: (angle) => { const { size } = stateRef.current; const radians = (angle * Math.PI) / 180; return { x: size * Math.cos(radians), y: size * Math.sin(radians), }; }, notify: () => { for (const cb of listenersRef.current) { cb(); } }, }; }, [listenersRef, stateRef, propsRef]); useIsomorphicLayoutEffect(() => { if (value !== undefined) { store.setState("values", value); } }, [value, store]); useIsomorphicLayoutEffect(() => { const currentState = store.getState(); if (currentState.min !== min) { store.setState("min", min); } if (currentState.max !== max) { store.setState("max", max); } if (currentState.step !== step) { store.setState("step", step); } if (currentState.minStepsBetweenThumbs !== minStepsBetweenThumbs) { store.setState("minStepsBetweenThumbs", minStepsBetweenThumbs); } if (currentState.size !== size) { store.setState("size", size); } if (currentState.thickness !== thickness) { store.setState("thickness", thickness); } if (currentState.startAngle !== startAngle) { store.setState("startAngle", startAngle); } if (currentState.endAngle !== endAngle) { store.setState("endAngle", endAngle); } if (currentState.disabled !== disabled) { store.setState("disabled", disabled); } if (currentState.inverted !== inverted) { store.setState("inverted", inverted); } }, [ store, min, max, step, minStepsBetweenThumbs, size, thickness, startAngle, endAngle, disabled, inverted, ]); const dir = DirectionPrimitive.useDirection(dirProp); const [sliderElement, setSliderElement] = React.useState( null, ); const composedRef = useComposedRefs(ref, setSliderElement); const valuesBeforeSlideStartRef = React.useRef(value ?? defaultValue); const contextValue = React.useMemo( () => ({ dir, name, form, }), [dir, name, form], ); const onSliderStart = React.useCallback( (pointerValue: number) => { if (disabled) return; const values = store.getState().values; const closestIndex = getClosestValueIndex(values, pointerValue); store.setState("valueIndexToChange", closestIndex); store.updateValue(pointerValue, closestIndex); }, [store, disabled], ); const onSliderMove = React.useCallback( (pointerValue: number) => { if (disabled) return; const valueIndexToChange = store.getState().valueIndexToChange; store.updateValue(pointerValue, valueIndexToChange); }, [store, disabled], ); const onSliderEnd = React.useCallback(() => { if (disabled) return; const state = store.getState(); const prevValue = valuesBeforeSlideStartRef.current[state.valueIndexToChange]; const nextValue = state.values[state.valueIndexToChange]; const hasChanged = nextValue !== prevValue; if (hasChanged) { onValueCommit?.(state.values); } }, [store, disabled, onValueCommit]); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { propsRef.current.onKeyDown?.(event); if (event.defaultPrevented || disabled) return; const state = store.getState(); const { values, valueIndexToChange, min, max, step } = state; const currentValue = values[valueIndexToChange] ?? min; if (event.key === "Home") { event.preventDefault(); store.updateValue(min, 0, { commit: true }); } else if (event.key === "End") { event.preventDefault(); store.updateValue(max, values.length - 1, { commit: true }); } 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; const isDecreaseKey = ["ArrowLeft", "ArrowUp", "PageUp"].includes( event.key, ); direction = isDecreaseKey ? -1 : 1; if (inverted) direction *= -1; const stepInDirection = step * multiplier * direction; store.updateValue(currentValue + stepInDirection, valueIndexToChange, { commit: true, }); } }, [store, propsRef, disabled, inverted], ); const onPointerDown = React.useCallback( (event: React.PointerEvent) => { propsRef.current.onPointerDown?.(event); if (event.defaultPrevented || disabled) return; const target = event.target as HTMLElement; target.setPointerCapture(event.pointerId); event.preventDefault(); if (!disabled) { valuesBeforeSlideStartRef.current = store.getState().values; const thumbs = Array.from(store.getState().thumbs.values()); const clickedThumb = thumbs.find((thumb) => thumb.element.contains(target), ); if (clickedThumb) { clickedThumb.element.focus(); store.setState("valueIndexToChange", clickedThumb.index); } else if (sliderElement) { const rect = sliderElement.getBoundingClientRect(); const pointerValue = store.getValueFromPointer( event.clientX, event.clientY, rect, ); onSliderStart(pointerValue); } } }, [store, propsRef, disabled, sliderElement, onSliderStart], ); const onPointerMove = React.useCallback( (event: React.PointerEvent) => { propsRef.current.onPointerMove?.(event); if (event.defaultPrevented || disabled) return; const target = event.target as HTMLElement; if (target.hasPointerCapture(event.pointerId) && sliderElement) { const rect = sliderElement.getBoundingClientRect(); const pointerValue = store.getValueFromPointer( event.clientX, event.clientY, rect, ); onSliderMove(pointerValue); } }, [store, propsRef, disabled, sliderElement, onSliderMove], ); const onPointerUp = React.useCallback( (event: React.PointerEvent) => { propsRef.current.onPointerUp?.(event); if (event.defaultPrevented) return; const target = event.target as RootElement; if (target.hasPointerCapture(event.pointerId)) { target.releasePointerCapture(event.pointerId); onSliderEnd(); } }, [propsRef, onSliderEnd], ); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } function AngleSliderTrack(props: React.ComponentProps<"svg">) { const { className, children, ...trackProps } = props; const disabled = useStore((state) => state.disabled); const size = useStore((state) => state.size); const thickness = useStore((state) => state.thickness); const startAngle = useStore((state) => state.startAngle); const endAngle = useStore((state) => state.endAngle); const center = size + 20; const trackRadius = size; const totalAngle = (endAngle - startAngle + 360) % 360 || 360; const isFullCircle = totalAngle >= 359; const startRadians = (startAngle * Math.PI) / 180; const endRadians = (endAngle * Math.PI) / 180; const startX = center + trackRadius * Math.cos(startRadians); const startY = center + trackRadius * Math.sin(startRadians); const endX = center + trackRadius * Math.cos(endRadians); const endY = center + trackRadius * Math.sin(endRadians); const largeArcFlag = totalAngle > 180 ? 1 : 0; return ( ); } function AngleSliderRange(props: React.ComponentProps<"path">) { const { className, ...rangeProps } = props; const values = useStore((state) => state.values); const min = useStore((state) => state.min); const max = useStore((state) => state.max); const disabled = useStore((state) => state.disabled); const size = useStore((state) => state.size); const thickness = useStore((state) => state.thickness); const startAngle = useStore((state) => state.startAngle); const endAngle = useStore((state) => state.endAngle); const center = size + 20; const trackRadius = size; const sortedValues = [...values].sort((a, b) => a - b); const rangeStart = values.length <= 1 ? min : (sortedValues[0] ?? min); const rangeEnd = values.length <= 1 ? (sortedValues[0] ?? min) : (sortedValues[sortedValues.length - 1] ?? max); const rangeStartPercent = (rangeStart - min) / (max - min); const rangeEndPercent = (rangeEnd - min) / (max - min); const totalAngle = (endAngle - startAngle + 360) % 360 || 360; const rangeStartAngle = startAngle + rangeStartPercent * totalAngle; const rangeEndAngle = startAngle + rangeEndPercent * totalAngle; const rangeStartRadians = (rangeStartAngle * Math.PI) / 180; const rangeEndRadians = (rangeEndAngle * Math.PI) / 180; const startX = center + trackRadius * Math.cos(rangeStartRadians); const startY = center + trackRadius * Math.sin(rangeStartRadians); const endX = center + trackRadius * Math.cos(rangeEndRadians); const endY = center + trackRadius * Math.sin(rangeEndRadians); const rangeAngle = (rangeEndAngle - rangeStartAngle + 360) % 360; const largeArcFlag = rangeAngle > 180 ? 1 : 0; if (rangeStart === rangeEnd) return null; return ( ); } interface AngleSliderThumbProps extends DivProps { index?: number; } function AngleSliderThumb(props: AngleSliderThumbProps) { const { index: indexProp, className, asChild, ref, ...thumbProps } = props; const context = useSliderContext(THUMB_NAME); const store = useStoreContext(THUMB_NAME); const values = useStore((state) => state.values); const min = useStore((state) => state.min); const max = useStore((state) => state.max); const step = useStore((state) => state.step); const disabled = useStore((state) => state.disabled); const size = useStore((state) => state.size); const thumbId = React.useId(); const [thumbElement, setThumbElement] = React.useState( null, ); const composedRef = useComposedRefs(ref, setThumbElement); const isFormControl = thumbElement ? context.form || !!thumbElement.closest("form") : true; const index = indexProp ?? 0; const value = values[index]; React.useEffect(() => { if (thumbElement && value !== undefined) { store.addThumb(index, { id: thumbId, element: thumbElement, index, value, }); return () => { store.removeThumb(index); }; } }, [thumbElement, thumbId, index, value, store]); const thumbStyle = React.useMemo(() => { if (value === undefined) return {}; const angle = store.getAngleFromValue(value); const position = store.getPositionFromAngle(angle); const center = size + 20; return { position: "absolute", left: `${center + position.x}px`, top: `${center + position.y}px`, transform: "translate(-50%, -50%)", }; }, [value, store, size]); const onFocus = React.useCallback( (event: React.FocusEvent) => { props.onFocus?.(event); if (event.defaultPrevented) return; store.setState("valueIndexToChange", index); }, [props.onFocus, store, index], ); const ThumbPrimitive = asChild ? SlotPrimitive.Slot : "div"; if (value === undefined) return null; return ( {isFormControl && value !== undefined && ( 1 ? "[]" : "") : undefined } form={context.form} value={value.toString()} type="number" min={min} max={max} step={step} disabled={disabled} /> )} ); } interface AngleSliderValueProps extends DivProps { unit?: string; formatValue?: (value: number | number[]) => string; } function AngleSliderValue(props: AngleSliderValueProps) { const { unit = "°", formatValue, className, style, asChild, children, ...valueProps } = props; const values = useStore((state) => state.values); const size = useStore((state) => state.size); const disabled = useStore((state) => state.disabled); const center = size + 20; const displayValue = React.useMemo(() => { if (formatValue) { return formatValue(values.length === 1 ? (values[0] ?? 0) : values); } if (values.length === 1) { return `${values[0] ?? 0}${unit}`; } const sortedValues = [...values].sort((a, b) => a - b); return `${sortedValues[0]}${unit} - ${sortedValues[sortedValues.length - 1]}${unit}`; }, [values, formatValue, unit]); const valueStyle = React.useMemo( () => ({ position: "absolute", left: `${center}px`, top: `${center}px`, transform: "translate(-50%, -50%)", }), [center], ); const ValuePrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {children ?? displayValue} ); } export { AngleSlider, type AngleSliderProps, AngleSliderRange, AngleSliderThumb, AngleSliderTrack, AngleSliderValue, useStore as useAngleSlider, }; 53:Tfef,"use client"; import * as React from "react"; type InputValue = string[] | string; interface VisuallyHiddenInputProps extends Omit< React.InputHTMLAttributes, "value" | "checked" | "onReset" > { value?: T; checked?: boolean; control: HTMLElement | null; bubbles?: boolean; } function VisuallyHiddenInput( props: VisuallyHiddenInputProps, ) { const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props; const isCheckInput = React.useMemo( () => type === "checkbox" || type === "radio" || type === "switch", [type], ); const inputRef = React.useRef(null); const prevValueRef = React.useRef<{ value: T | boolean | undefined; previous: T | boolean | undefined; }>({ value: isCheckInput ? checked : value, previous: isCheckInput ? checked : value, }); const prevValue = React.useMemo(() => { const currentValue = isCheckInput ? checked : value; if (prevValueRef.current.value !== currentValue) { prevValueRef.current.previous = prevValueRef.current.value; prevValueRef.current.value = currentValue; } return prevValueRef.current.previous; }, [isCheckInput, value, checked]); const [controlSize, setControlSize] = React.useState<{ width?: number; height?: number; }>({}); React.useLayoutEffect(() => { if (!control) { setControlSize({}); return; } setControlSize({ width: control.offsetWidth, height: control.offsetHeight, }); if (typeof window === "undefined") return; const resizeObserver = new ResizeObserver((entries) => { if (!Array.isArray(entries) || !entries.length) return; const entry = entries[0]; if (!entry) return; let width: number; let height: number; if ("borderBoxSize" in entry) { const borderSizeEntry = entry.borderBoxSize; const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry; width = borderSize.inlineSize; height = borderSize.blockSize; } else { width = control.offsetWidth; height = control.offsetHeight; } setControlSize({ width, height }); }); resizeObserver.observe(control, { box: "border-box" }); return () => { resizeObserver.disconnect(); }; }, [control]); React.useEffect(() => { const input = inputRef.current; if (!input) return; const inputProto = window.HTMLInputElement.prototype; const propertyKey = isCheckInput ? "checked" : "value"; const eventType = isCheckInput ? "click" : "input"; const currentValue = isCheckInput ? checked : value; const serializedCurrentValue = isCheckInput ? checked : typeof value === "object" && value !== null ? JSON.stringify(value) : value; const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey); const setter = descriptor?.set; if (prevValue !== currentValue && setter) { const event = new Event(eventType, { bubbles }); setter.call(input, serializedCurrentValue); input.dispatchEvent(event); } }, [prevValue, value, checked, bubbles, isCheckInput]); const composedStyle = React.useMemo(() => { return { ...style, ...(controlSize.width !== undefined && controlSize.height !== undefined ? controlSize : {}), border: 0, clip: "rect(0 0 0 0)", clipPath: "inset(50%)", height: "1px", margin: "-1px", overflow: "hidden", padding: 0, position: "absolute", whiteSpace: "nowrap", width: "1px", }; }, [style, controlSize]); return ( ); } export { VisuallyHiddenInput }; 54: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/angle-slider.tsx","content":"$52","type":"registry:ui","target":""},{"path":"components/visually-hidden-input.tsx","content":"$53","type":"registry:component","target":""},{"path":"lib/compose-refs.ts","content":"$54","type":"registry:lib","target":""}],"className":"h-[70svh] min-h-80"}]]}]