angle-slider-themes-demo

1import { cn } from "@/lib/utils";
2import {
3  AngleSlider,
4  AngleSliderRange,
5  AngleSliderThumb,
6  AngleSliderTrack,
7  AngleSliderValue,
8} from "@/registry/bases/base/ui/angle-slider";
9 
10const themes = [
11  {
12    name: "Default",
13    value: 60,
14    trackClass:
15      "[&>[data-slot='angle-slider-track-rail']]:stroke-muted-foreground/20",
16    rangeClass: "stroke-primary",
17    thumbClass: "border-primary bg-background ring-primary/50",
18    textClass: "text-foreground",
19  },
20  {
21    name: "Success",
22    value: 120,
23    trackClass:
24      "[&>[data-slot='angle-slider-track-rail']]:stroke-green-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-green-900",
25    rangeClass: "stroke-green-500",
26    thumbClass:
27      "border-green-500 bg-green-50 ring-green-500/50 dark:bg-green-950",
28    textClass: "text-green-700 dark:text-green-300",
29  },
30  {
31    name: "Warning",
32    value: 180,
33    trackClass:
34      "[&>[data-slot='angle-slider-track-rail']]:stroke-yellow-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-yellow-900",
35    rangeClass: "stroke-yellow-500",
36    thumbClass:
37      "border-yellow-500 bg-yellow-50 ring-yellow-500/50 dark:bg-yellow-950",
38    textClass: "text-yellow-700 dark:text-yellow-300",
39  },
40  {
41    name: "Destructive",
42    value: 240,
43    trackClass:
44      "[&>[data-slot='angle-slider-track-rail']]:stroke-red-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-red-900",
45    rangeClass: "stroke-red-500",
46    thumbClass: "border-red-500 bg-red-50 ring-red-500/50 dark:bg-red-950",
47    textClass: "text-red-700 dark:text-red-300",
48  },
49  {
50    name: "Purple",
51    value: 300,
52    trackClass:
53      "[&>[data-slot='angle-slider-track-rail']]:stroke-purple-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-purple-900",
54    rangeClass: "stroke-purple-500",
55    thumbClass:
56      "border-purple-500 bg-purple-50 ring-purple-500/50 dark:bg-purple-950",
57    textClass: "text-purple-700 dark:text-purple-300",
58  },
59  {
60    name: "Orange",
61    value: 45,
62    trackClass:
63      "[&>[data-slot='angle-slider-track-rail']]:stroke-orange-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-orange-900",
64    rangeClass: "stroke-orange-500",
65    thumbClass:
66      "border-orange-500 bg-orange-50 ring-orange-500/50 dark:bg-orange-950",
67    textClass: "text-orange-700 dark:text-orange-300",
68  },
69  {
70    name: "Blue",
71    value: 90,
72    trackClass:
73// … truncated