Circular Slider

1"use client";
2
3import * as React from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { mergeProps } from "@base-ui/react/merge-props";
6import { useRender } from "@base-ui/react/use-render";
7import { cn } from "@/lib/utils";
8import {
9  valueToAngle,
10  getThumbPosition,
11  describeArc,
12  roundToStep,
13  clamp,
14} from "./lib/angle-calculations";
15import {
16  SVG_CONFIG,
17  RADIUS_CONFIG,
18  SLOT_NAMES,
19  VARIANT_COLOR_MAP,
20} from "./lib/svg-constants";
21import {
22  pixelsToSvgUnits,
23  createSvgOverlayProps,
24  strokeWidthToSvgUnits,
25  getTrackInnerEdge,
26} from "./lib/svg-utils";
27import { getValueFromPointerPosition } from "./lib/pointer-utils";
28
29export type ChangeReason = "drag" | "keyboard" | "click";
30
31interface CircularSliderContextValue {
32  value: number;
33  min: number;
34  max: number;
35  step: number;
36  startAngle: number;
37  direction: "clockwise" | "counterclockwise";
38  continuous: boolean;
39  disabled: boolean;
40  size: number;
41  variant: "default" | "filled";
42  isDragging: boolean;
43  isFocused: boolean;
44  handleValueChange: (newValue: number, reason: ChangeReason) => void;
45  handleValueCommitted: (value: number) => void;
46}
47
48const CircularSliderContext = React.createContext<
49  CircularSliderContextValue | undefined
50>(undefined);
51
52function useCircularSliderContext() {
53  const context = React.useContext(CircularSliderContext);
54  if (!context) {
55    throw new Error(
56      "CircularSlider components must be used within CircularSliderRoot",
57    );
58  }
59  return context;
60}
61
62const circularSliderVariants = cva(
63  "group relative inline-block touch-none select-none outline-none",
64  {
65    variants: {
66      variant: {
67        default: "",
68        filled: "",
69      },
70      disabled: {
71        true: "opacity-60 cursor-not-allowed pointer-events-none",
72        false: "",
73      },
74    },
75    defaultVariants: {
76      variant: "default",
77      disabled: false,
78    },
79  },
80);
81
82const thumbVariants = cva(
83  "absolute transition-[box-shadow] duration-200 ease-out",
84  {
85    variants: {
86      variant: {
87        default:
88          "rounded-full border-3 border-primary bg-background group-data-focused:z-10 group-data-focused:ring-2 group-data-focused:ring-ring group-data-focused:ring-offset-2 group-data-focused:ring-offset-background",
89        filled: "rounded-none bg-foreground",
90      },
91      dragging: {
92        true: "cursor-grabbing",
93// … truncated