Angle Slider

/**
 * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx
 */
 
import * as React from "react";
 
type PossibleRef<T> = React.Ref<T> | 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<T>(ref: PossibleRef<T>, 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<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
  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<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values
  return React.useCallback(composeRefs(...refs), refs);
}
 
export { composeRefs, useComposedRefs };

"use client";
 
import * as React from "react";
 
type InputValue = string[] | string;
 
interface VisuallyHiddenInputProps<T = InputValue>
  extends Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
    "value" | "checked" | "onReset"
  > {
  value?: T;
  checked?: boolean;
  control: HTMLElement | null;
  bubbles?: boolean;
}
 
function VisuallyHiddenInput<T = InputValue>(
  props: VisuallyHiddenInputProps<T>,
) {
  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<HTMLInputElement>(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<React.CSSProperties>(() => {
    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 (
    <input
      type={type}
      {...inputProps}
      ref={inputRef}
      aria-hidden={isCheckInput}
      tabIndex={-1}
      defaultChecked={isCheckInput ? checked : undefined}
      style={composedStyle}
    />
  );
}
 
export { VisuallyHiddenInput };

"use client";
 
import { Slot } from "@radix-ui/react-slot";
import * as React from "react";
import { useComposedRefs } from "@/lib/compose-refs";
import { cn } from "@/lib/utils";
import { VisuallyHiddenInput } from "@/components/components/visually-hidden-input";
 
const ROOT_NAME = "AngleSlider";
const THUMB_NAME = "AngleSliderThumb";
 
const PAGE_KEYS = ["PageUp", "PageDown"];
const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
 
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);
}
 
function useLazyRef<T>(fn: () => T) {
  const ref = React.useRef<T | null>(null);
 
  if (ref.current === null) {
    ref.current = fn();
  }
 
  return ref as React.RefObject<T>;
}
 
const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 
type Direction = "ltr" | "rtl";
 
interface DivProps extends React.ComponentProps<"div"> {
  asChild?: boolean;
}
 
type RootElement = React.ComponentRef<typeof AngleSliderRoot>;
type ThumbElement = React.ComponentRef<typeof AngleSliderThumb>;
 
interface ThumbData {
  id: string;
  element: ThumbElement;
  index: number;
  value: number;
}
 
interface StoreState {
  values: number[];
  thumbs: Map<number, ThumbData>;
  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: <K extends keyof StoreState>(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 };
}
 
function createStore(
  listenersRef: React.RefObject<Set<() => void>>,
  stateRef: React.RefObject<StoreState>,
  onValueChange?: (value: number[]) => void,
  onValueCommit?: (value: number[]) => void,
): Store {
  const store: Store = {
    subscribe: (cb) => {
      if (listenersRef.current) {
        listenersRef.current.add(cb);
        return () => listenersRef.current?.delete(cb);
      }
      return () => {};
    },
    getState: () =>
      stateRef.current ?? {
        values: [0],
        thumbs: new Map(),
        valueIndexToChange: 0,
        min: 0,
        max: 100,
        step: 1,
        minStepsBetweenThumbs: 0,
        size: 80,
        thickness: 8,
        startAngle: -90,
        endAngle: 270,
        disabled: false,
        inverted: false,
      },
    setState: (key, value) => {
      const state = stateRef.current;
      if (!state || Object.is(state[key], value)) return;
 
      if (key === "values" && Array.isArray(value)) {
        const hasChanged = String(state.values) !== String(value);
        state.values = value;
        if (hasChanged) {
          onValueChange?.(value);
        }
      } else {
        state[key] = value;
      }
 
      store.notify();
    },
    addThumb: (index, thumbData) => {
      const state = stateRef.current;
      if (state) {
        state.thumbs.set(index, thumbData);
        store.notify();
      }
    },
    removeThumb: (index) => {
      const state = stateRef.current;
      if (state) {
        state.thumbs.delete(index);
        store.notify();
      }
    },
    updateValue: (value, atIndex, { commit = false } = {}) => {
      const state = stateRef.current;
      if (!state) return;
 
      const { min, max, step, minStepsBetweenThumbs } = state;
      const decimalCount = getDecimalCount(step);
      const snapToStep = roundValue(
        Math.round((value - min) / step) * step + min,
        decimalCount,
      );
      const nextValue = clamp(snapToStep, [min, max]);
 
      const nextValues = getNextSortedValues(state.values, nextValue, atIndex);
 
      if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
        state.valueIndexToChange = nextValues.indexOf(nextValue);
        const hasChanged = String(nextValues) !== String(state.values);
 
        if (hasChanged) {
          state.values = nextValues;
          onValueChange?.(nextValues);
          if (commit) onValueCommit?.(nextValues);
          store.notify();
        }
      }
    },
    getValueFromPointer: (clientX, clientY, rect) => {
      const state = stateRef.current;
      if (!state) return 0;
 
      const { min, max, inverted, startAngle, endAngle } = state;
      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 state = stateRef.current;
      if (!state) return 0;
 
      const { min, max, inverted, startAngle, endAngle } = state;
      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 state = stateRef.current;
      if (!state) return { x: 0, y: 0 };
 
      const { size } = state;
      const radians = (angle * Math.PI) / 180;
 
      return {
        x: size * Math.cos(radians),
        y: size * Math.sin(radians),
      };
    },
    notify: () => {
      if (listenersRef.current) {
        for (const cb of listenersRef.current) {
          cb();
        }
      }
    },
  };
 
  return store;
}
 
const DirectionContext = React.createContext<Direction | undefined>(undefined);
 
function useDirection(dirProp?: Direction): Direction {
  const contextDir = React.useContext(DirectionContext);
  return dirProp ?? contextDir ?? "ltr";
}
 
const StoreContext = React.createContext<Store | null>(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<T>(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<SliderContextValue | null>(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 AngleSliderRootProps extends Omit<DivProps, "defaultValue"> {
  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 AngleSliderRoot(props: AngleSliderRootProps) {
  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,
    children,
    ref,
    ...rootProps
  } = props;
 
  const listenersRef = useLazyRef(() => new Set<() => void>());
  const stateRef = useLazyRef<StoreState>(() => ({
    values: value ?? defaultValue,
    thumbs: new Map(),
    valueIndexToChange: 0,
    min,
    max,
    step,
    minStepsBetweenThumbs,
    disabled,
    inverted,
    size,
    thickness,
    startAngle,
    endAngle,
  }));
 
  const store = React.useMemo(
    () => createStore(listenersRef, stateRef, onValueChange, onValueCommit),
    [listenersRef, stateRef, onValueChange, onValueCommit],
  );
 
  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 = useDirection(dirProp);
 
  const [sliderElement, setSliderElement] = React.useState<RootElement | null>(
    null,
  );
  const composedRef = useComposedRefs(ref, setSliderElement);
  const valuesBeforeSlideStartRef = React.useRef(value ?? defaultValue);
 
  const contextValue = React.useMemo<SliderContextValue>(
    () => ({
      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<RootElement>) => {
      rootProps.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,
        });
      }
    },
    [rootProps.onKeyDown, disabled, store, inverted],
  );
 
  const onPointerDown = React.useCallback(
    (event: React.PointerEvent<RootElement>) => {
      rootProps.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);
        }
      }
    },
    [rootProps.onPointerDown, disabled, store, sliderElement, onSliderStart],
  );
 
  const onPointerMove = React.useCallback(
    (event: React.PointerEvent<RootElement>) => {
      rootProps.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);
      }
    },
    [rootProps.onPointerMove, disabled, sliderElement, store, onSliderMove],
  );
 
  const onPointerUp = React.useCallback(
    (event: React.PointerEvent<RootElement>) => {
      rootProps.onPointerUp?.(event);
      if (event.defaultPrevented) return;
 
      const target = event.target as RootElement;
      if (target.hasPointerCapture(event.pointerId)) {
        target.releasePointerCapture(event.pointerId);
        onSliderEnd();
      }
    },
    [rootProps.onPointerUp, onSliderEnd],
  );
 
  const RootPrimitive = asChild ? Slot : "div";
 
  return (
    <StoreContext.Provider value={store}>
      <SliderContext.Provider value={contextValue}>
        <RootPrimitive
          data-disabled={disabled ? "" : undefined}
          data-slot="angle-slider"
          dir={dir}
          {...rootProps}
          ref={composedRef}
          className={cn(
            "relative touch-none select-none",
            disabled && "opacity-50",
            className,
          )}
          style={{
            width: `${size * 2 + 40}px`,
            height: `${size * 2 + 40}px`,
          }}
          onKeyDown={onKeyDown}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
        >
          {children}
        </RootPrimitive>
      </SliderContext.Provider>
    </StoreContext.Provider>
  );
}
 
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 (
    <svg
      aria-hidden="true"
      focusable="false"
      data-disabled={disabled ? "" : undefined}
      data-slot="angle-slider-track"
      width={center * 2}
      height={center * 2}
      {...trackProps}
      className={cn("absolute inset-0", className)}
    >
      {isFullCircle ? (
        <circle
          data-slot="angle-slider-track-rail"
          cx={center}
          cy={center}
          r={trackRadius}
          fill="none"
          stroke="currentColor"
          strokeWidth={thickness}
          strokeLinecap="round"
          vectorEffect="non-scaling-stroke"
          className="stroke-muted"
        />
      ) : (
        <path
          data-slot="angle-slider-track-rail"
          d={`M ${startX} ${startY} A ${trackRadius} ${trackRadius} 0 ${largeArcFlag} 1 ${endX} ${endY}`}
          fill="none"
          stroke="currentColor"
          strokeWidth={thickness}
          strokeLinecap="round"
          vectorEffect="non-scaling-stroke"
          className="stroke-muted"
        />
      )}
      {children}
    </svg>
  );
}
 
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 (
    <path
      data-disabled={disabled ? "" : undefined}
      data-slot="angle-slider-range"
      d={`M ${startX} ${startY} A ${trackRadius} ${trackRadius} 0 ${largeArcFlag} 1 ${endX} ${endY}`}
      fill="none"
      stroke="currentColor"
      strokeWidth={thickness}
      strokeLinecap="round"
      vectorEffect="non-scaling-stroke"
      {...rangeProps}
      className={cn("stroke-primary", className)}
    />
  );
}
 
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<ThumbElement | null>(
    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<React.CSSProperties>(() => {
    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<ThumbElement>) => {
      props.onFocus?.(event);
      if (event.defaultPrevented) return;
 
      store.setState("valueIndexToChange", index);
    },
    [props.onFocus, store, index],
  );
 
  const ThumbPrimitive = asChild ? Slot : "div";
 
  if (value === undefined) return null;
 
  return (
    <span style={thumbStyle}>
      <ThumbPrimitive
        id={thumbId}
        role="slider"
        aria-valuemin={min}
        aria-valuenow={value}
        aria-valuemax={max}
        aria-orientation="vertical"
        data-disabled={disabled ? "" : undefined}
        data-slot="angle-slider-thumb"
        tabIndex={disabled ? undefined : 0}
        {...thumbProps}
        ref={composedRef}
        className={cn(
          "block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50",
          className,
        )}
        onFocus={onFocus}
      />
      {isFormControl && value !== undefined && (
        <VisuallyHiddenInput
          key={index}
          control={thumbElement}
          name={
            context.name
              ? context.name + (values.length > 1 ? "[]" : "")
              : undefined
          }
          form={context.form}
          value={value.toString()}
          type="number"
          min={min}
          max={max}
          step={step}
          disabled={disabled}
        />
      )}
    </span>
  );
}
 
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<React.CSSProperties>(
    () => ({
      position: "absolute",
      left: `${center}px`,
      top: `${center}px`,
      transform: "translate(-50%, -50%)",
    }),
    [center],
  );
 
  const ValuePrimitive = asChild ? Slot : "div";
 
  return (
    <ValuePrimitive
      data-disabled={disabled ? "" : undefined}
      data-slot="angle-slider-value"
      {...valueProps}
      className={cn(
        "pointer-events-none flex select-none items-center justify-center font-medium text-foreground text-sm",
        className,
      )}
      style={{
        ...valueStyle,
        ...style,
      }}
    >
      {children ?? displayValue}
    </ValuePrimitive>
  );
}
 
export {
  AngleSliderRoot as Root,
  AngleSliderTrack as Track,
  AngleSliderRange as Range,
  AngleSliderThumb as Thumb,
  AngleSliderValue as Value,
  //
  AngleSliderRoot as AngleSlider,
  AngleSliderTrack,
  AngleSliderRange,
  AngleSliderThumb,
  AngleSliderValue,
  //
  useStore as useAngleSlider,
  //
  type AngleSliderRootProps as AngleSliderProps,
};