angle-slider

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 { VisuallyHiddenInput } from "@/registry/bases/base/components/visually-hidden-input";
8import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
9import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
10import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
11import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
12import { useDirection } from "@/registry/bases/base/ui/direction";
13 
14const ROOT_NAME = "AngleSlider";
15const THUMB_NAME = "AngleSliderThumb";
16 
17const PAGE_KEYS = ["PageUp", "PageDown"];
18const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
19 
20type Direction = "ltr" | "rtl";
21 
22type RootElement = React.ComponentRef<typeof AngleSlider>;
23type ThumbElement = React.ComponentRef<typeof AngleSliderThumb>;
24 
25function clamp(value: number, [min, max]: [number, number]) {
26  return Math.min(max, Math.max(min, value));
27}
28 
29function getNextSortedValues(
30  prevValues: number[] = [],
31  nextValue: number,
32  atIndex: number,
33) {
34  const nextValues = [...prevValues];
35  nextValues[atIndex] = nextValue;
36  return nextValues.sort((a, b) => a - b);
37}
38 
39function getStepsBetweenValues(values: number[]) {
40  return values.slice(0, -1).map((value, index) => {
41    const nextValue = values[index + 1];
42    return nextValue !== undefined ? nextValue - value : 0;
43  });
44}
45 
46function hasMinStepsBetweenValues(
47  values: number[],
48  minStepsBetweenValues: number,
49) {
50  if (minStepsBetweenValues > 0) {
51    const stepsBetweenValues = getStepsBetweenValues(values);
52    const actualMinStepsBetweenValues =
53      stepsBetweenValues.length > 0 ? Math.min(...stepsBetweenValues) : 0;
54    return actualMinStepsBetweenValues >= minStepsBetweenValues;
55  }
56  return true;
57}
58 
59function getDecimalCount(value: number) {
60  return (String(value).split(".")[1] ?? "").length;
61}
62 
63function roundValue(value: number, decimalCount: number) {
64  const rounder = 10 ** decimalCount;
65  return Math.round(value * rounder) / rounder;
66}
67 
68function getClosestValueIndex(values: number[], nextValue: number) {
69  if (values.length === 1) return 0;
70  const distances = values.map((value) => Math.abs(value - nextValue));
71  const closestDistance = Math.min(...distances);
72  return distances.indexOf(closestDistance);
73}
74 
75interface ThumbData {
76// … truncated