react-circular-range 1.0.7 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.css +2 -103
- package/dist/index.cjs.css.map +1 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.css +2 -103
- package/dist/index.esm.css.map +1 -0
- package/dist/index.esm.js +1 -1
- package/package.json +2 -2
- package/dist/index.d.mts +0 -13
- package/dist/index.d.ts +0 -13
package/dist/index.cjs.css
CHANGED
|
@@ -1,103 +1,2 @@
|
|
|
1
|
-
.CircularRange-
|
|
2
|
-
|
|
3
|
-
height: 65px;
|
|
4
|
-
position: relative;
|
|
5
|
-
cursor: pointer;
|
|
6
|
-
user-select: none;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.CircularRange-module_knobRing__H-KV6 {
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: 100%;
|
|
12
|
-
border: 3px solid #333;
|
|
13
|
-
border-radius: 50%;
|
|
14
|
-
background: linear-gradient(145deg, #1a1a1a, #252525);
|
|
15
|
-
box-shadow:
|
|
16
|
-
inset 2px 2px 5px rgba(0, 0, 0, 0.5),
|
|
17
|
-
inset -2px -2px 5px rgba(60, 60, 60, 0.1),
|
|
18
|
-
0 4px 8px rgba(0, 0, 0, 0.3);
|
|
19
|
-
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.CircularRange-module_knobBackground__t2lGs {
|
|
23
|
-
position: absolute;
|
|
24
|
-
top: 0;
|
|
25
|
-
left: 0;
|
|
26
|
-
width: 100%;
|
|
27
|
-
height: 100%;
|
|
28
|
-
pointer-events: none;
|
|
29
|
-
transform: rotate(-135deg);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.CircularRange-module_knobBackgroundPath__ySqrn {
|
|
33
|
-
fill: none;
|
|
34
|
-
stroke: #8b5cf6;
|
|
35
|
-
stroke-width: 3.5;
|
|
36
|
-
stroke-linecap: round;
|
|
37
|
-
stroke-dasharray: 113.1;
|
|
38
|
-
stroke-dashoffset: 113.1;
|
|
39
|
-
transition: stroke-dashoffset 0.1s ease-out;
|
|
40
|
-
filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.CircularRange-module_knobIndicator__FxbT4 {
|
|
44
|
-
position: absolute;
|
|
45
|
-
width: 4px;
|
|
46
|
-
height: 20px;
|
|
47
|
-
background: linear-gradient(to bottom, #8b5cf6, #c084fc);
|
|
48
|
-
top: 5px;
|
|
49
|
-
left: 50%;
|
|
50
|
-
transform-origin: center 27.5px;
|
|
51
|
-
transform: translateX(-50%) rotate(-135deg);
|
|
52
|
-
border-radius: 2px;
|
|
53
|
-
z-index: 2;
|
|
54
|
-
/*transition: transform 0.05s ease-out;*/
|
|
55
|
-
box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.CircularRange-module_knobCenter__DftjA {
|
|
59
|
-
position: absolute;
|
|
60
|
-
width: 18px;
|
|
61
|
-
height: 18px;
|
|
62
|
-
background: radial-gradient(circle, #0a0a0a, #1a1a1a);
|
|
63
|
-
border-radius: 50%;
|
|
64
|
-
top: 50%;
|
|
65
|
-
left: 50%;
|
|
66
|
-
transform: translate(-50%, -50%);
|
|
67
|
-
box-shadow:
|
|
68
|
-
inset 1px 1px 3px rgba(0, 0, 0, 0.7),
|
|
69
|
-
0 1px 2px rgba(139, 92, 246, 0.3);
|
|
70
|
-
z-index: 3;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/* Hover states */
|
|
74
|
-
.CircularRange-module_knob__2nLWp:hover .CircularRange-module_knobRing__H-KV6 {
|
|
75
|
-
border-color: #8b5cf6;
|
|
76
|
-
box-shadow:
|
|
77
|
-
inset 2px 2px 5px rgba(0, 0, 0, 0.5),
|
|
78
|
-
inset -2px -2px 5px rgba(60, 60, 60, 0.1),
|
|
79
|
-
0 4px 12px rgba(139, 92, 246, 0.4);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.CircularRange-module_knob__2nLWp:hover .CircularRange-module_knobIndicator__FxbT4 {
|
|
83
|
-
background: linear-gradient(to bottom, #a78bfa, #c084fc);
|
|
84
|
-
box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.CircularRange-module_knob__2nLWp.CircularRange-module_active__SFotz .CircularRange-module_knobRing__H-KV6 {
|
|
88
|
-
border-color: #a78bfa;
|
|
89
|
-
box-shadow:
|
|
90
|
-
inset 2px 2px 5px rgba(0, 0, 0, 0.6),
|
|
91
|
-
inset -2px -2px 5px rgba(60, 60, 60, 0.15),
|
|
92
|
-
0 4px 16px rgba(167, 139, 250, 0.5);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.CircularRange-module_knob__2nLWp.CircularRange-module_active__SFotz .CircularRange-module_knobIndicator__FxbT4 {
|
|
96
|
-
background: linear-gradient(to bottom, #a78bfa, #c084fc);
|
|
97
|
-
box-shadow: 0 0 10px rgba(167, 139, 250, 1);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.CircularRange-module_knob__2nLWp.CircularRange-module_active__SFotz .CircularRange-module_knobBackgroundPath__ySqrn {
|
|
101
|
-
stroke: #a78bfa;
|
|
102
|
-
filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));
|
|
103
|
-
}
|
|
1
|
+
.CircularRange-module__knob___2nLWp{cursor:pointer;height:65px;position:relative;user-select:none;width:65px}.CircularRange-module__knobRing___H-KV6{background:linear-gradient(145deg,#1a1a1a,#252525);border:3px solid #333;border-radius:50%;box-shadow:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(60,60,60,.1),0 4px 8px rgba(0,0,0,.3);height:100%;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.CircularRange-module__knobBackground___t2lGs{height:100%;left:0;pointer-events:none;position:absolute;top:0;transform:rotate(-135deg);width:100%}.CircularRange-module__knobBackgroundPath___ySqrn{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;filter:drop-shadow(0 0 3px rgba(139,92,246,.7));transition:stroke-dashoffset .1s ease-out}.CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#8b5cf6,#c084fc);border-radius:2px;box-shadow:0 0 6px rgba(139,92,246,.8);height:20px;left:50%;position:absolute;top:5px;transform:translateX(-50%) rotate(-135deg);transform-origin:center 27.5px;width:4px;z-index:2}.CircularRange-module__knobCenter___DftjA{background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;box-shadow:inset 1px 1px 3px rgba(0,0,0,.7),0 1px 2px rgba(139,92,246,.3);height:18px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;z-index:3}.CircularRange-module__knob___2nLWp:hover .CircularRange-module__knobRing___H-KV6{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(60,60,60,.1),0 4px 12px rgba(139,92,246,.4)}.CircularRange-module__knob___2nLWp:hover .CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#a78bfa,#c084fc);box-shadow:0 0 8px rgba(167,139,250,.9)}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobRing___H-KV6{border-color:#a78bfa;box-shadow:inset 2px 2px 5px rgba(0,0,0,.6),inset -2px -2px 5px rgba(60,60,60,.15),0 4px 16px rgba(167,139,250,.5)}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobBackgroundPath___ySqrn{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
|
|
2
|
+
/*# sourceMappingURL=index.cjs.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CircularRange.module.css"],"names":[],"mappings":"AAAA,oCAII,cAAe,CAFf,WAAY,CACZ,iBAAkB,CAElB,gBAAiB,CAJjB,UAKJ,CAEA,wCAKI,kDAAqD,CAFrD,qBAAsB,CACtB,iBAAkB,CAElB,0GAGoC,CAPpC,WAAY,CAQZ,oDAAwD,CATxD,UAUJ,CAEA,8CAKI,WAAY,CAFZ,MAAO,CAGP,mBAAoB,CALpB,iBAAkB,CAClB,KAAM,CAKN,yBAA0B,CAH1B,UAIJ,CAEA,kDACI,SAAU,CACV,cAAe,CACf,gBAAiB,CACjB,oBAAqB,CACrB,sBAAuB,CACvB,uBAAwB,CAExB,+CAAoD,CADpD,yCAEJ,CAEA,6CAII,kDAAwD,CAKxD,iBAAkB,CAGlB,sCAA2C,CAT3C,WAAY,CAGZ,QAAS,CALT,iBAAkB,CAIlB,OAAQ,CAGR,0CAA2C,CAD3C,8BAA+B,CAL/B,SAAU,CAQV,SAGJ,CAEA,0CAII,kDAAqD,CACrD,iBAAkB,CAIlB,yEAEyC,CARzC,WAAY,CAIZ,QAAS,CANT,iBAAkB,CAKlB,OAAQ,CAER,8BAAgC,CANhC,UAAW,CAUX,SACJ,CAGA,kFACI,oBAAqB,CACrB,gHAIJ,CAEA,uFACI,kDAAwD,CACxD,uCACJ,CAEA,iHACI,oBAAqB,CACrB,kHAIJ,CAEA,sHACI,kDAAwD,CACxD,2BACJ,CAEA,2HACI,cAAe,CACf,gDACJ","file":"index.cjs.css","sourcesContent":[".knob {\r\n width: 65px;\r\n height: 65px;\r\n position: relative;\r\n cursor: pointer;\r\n user-select: none;\r\n}\r\n\r\n.knobRing {\r\n width: 100%;\r\n height: 100%;\r\n border: 3px solid #333;\r\n border-radius: 50%;\r\n background: linear-gradient(145deg, #1a1a1a, #252525);\r\n box-shadow:\r\n inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n 0 4px 8px rgba(0, 0, 0, 0.3);\r\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.knobBackground {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n transform: rotate(-135deg);\r\n}\r\n\r\n.knobBackgroundPath {\r\n fill: none;\r\n stroke: #8b5cf6;\r\n stroke-width: 3.5;\r\n stroke-linecap: round;\r\n stroke-dasharray: 113.1;\r\n stroke-dashoffset: 113.1;\r\n transition: stroke-dashoffset 0.1s ease-out;\r\n filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));\r\n}\r\n\r\n.knobIndicator {\r\n position: absolute;\r\n width: 4px;\r\n height: 20px;\r\n background: linear-gradient(to bottom, #8b5cf6, #c084fc);\r\n top: 5px;\r\n left: 50%;\r\n transform-origin: center 27.5px;\r\n transform: translateX(-50%) rotate(-135deg);\r\n border-radius: 2px;\r\n z-index: 2;\r\n /*transition: transform 0.05s ease-out;*/\r\n box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);\r\n}\r\n\r\n.knobCenter {\r\n position: absolute;\r\n width: 18px;\r\n height: 18px;\r\n background: radial-gradient(circle, #0a0a0a, #1a1a1a);\r\n border-radius: 50%;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n box-shadow:\r\n inset 1px 1px 3px rgba(0, 0, 0, 0.7),\r\n 0 1px 2px rgba(139, 92, 246, 0.3);\r\n z-index: 3;\r\n}\r\n\r\n/* Hover states */\r\n.knob:hover .knobRing {\r\n border-color: #8b5cf6;\r\n box-shadow:\r\n inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n 0 4px 12px rgba(139, 92, 246, 0.4);\r\n}\r\n\r\n.knob:hover .knobIndicator {\r\n background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);\r\n}\r\n\r\n.knob.active .knobRing {\r\n border-color: #a78bfa;\r\n box-shadow:\r\n inset 2px 2px 5px rgba(0, 0, 0, 0.6),\r\n inset -2px -2px 5px rgba(60, 60, 60, 0.15),\r\n 0 4px 16px rgba(167, 139, 250, 0.5);\r\n}\r\n\r\n.knob.active .knobIndicator {\r\n background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n box-shadow: 0 0 10px rgba(167, 139, 250, 1);\r\n}\r\n\r\n.knob.active .knobBackgroundPath {\r\n stroke: #a78bfa;\r\n filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));\r\n}"]}
|
package/dist/index.cjs.js
CHANGED
|
@@ -424,7 +424,7 @@ function requireJsxRuntime () {
|
|
|
424
424
|
|
|
425
425
|
var jsxRuntimeExports = requireJsxRuntime();
|
|
426
426
|
|
|
427
|
-
var styles = {"knob":"CircularRange-
|
|
427
|
+
var styles = {"knob":"CircularRange-module__knob___2nLWp","knobRing":"CircularRange-module__knobRing___H-KV6","knobBackground":"CircularRange-module__knobBackground___t2lGs","knobBackgroundPath":"CircularRange-module__knobBackgroundPath___ySqrn","knobIndicator":"CircularRange-module__knobIndicator___FxbT4","knobCenter":"CircularRange-module__knobCenter___DftjA","active":"CircularRange-module__active___SFotz"};
|
|
428
428
|
|
|
429
429
|
const ARC_LENGTH = 113.1; // 270°
|
|
430
430
|
const CircularRange = ({ min = 0, max = 100, value = 0, step = 0.01, onChange, theme = styles }) => {
|
package/dist/index.esm.css
CHANGED
|
@@ -1,103 +1,2 @@
|
|
|
1
|
-
.CircularRange-
|
|
2
|
-
|
|
3
|
-
height: 65px;
|
|
4
|
-
position: relative;
|
|
5
|
-
cursor: pointer;
|
|
6
|
-
user-select: none;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.CircularRange-module_knobRing__H-KV6 {
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: 100%;
|
|
12
|
-
border: 3px solid #333;
|
|
13
|
-
border-radius: 50%;
|
|
14
|
-
background: linear-gradient(145deg, #1a1a1a, #252525);
|
|
15
|
-
box-shadow:
|
|
16
|
-
inset 2px 2px 5px rgba(0, 0, 0, 0.5),
|
|
17
|
-
inset -2px -2px 5px rgba(60, 60, 60, 0.1),
|
|
18
|
-
0 4px 8px rgba(0, 0, 0, 0.3);
|
|
19
|
-
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.CircularRange-module_knobBackground__t2lGs {
|
|
23
|
-
position: absolute;
|
|
24
|
-
top: 0;
|
|
25
|
-
left: 0;
|
|
26
|
-
width: 100%;
|
|
27
|
-
height: 100%;
|
|
28
|
-
pointer-events: none;
|
|
29
|
-
transform: rotate(-135deg);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.CircularRange-module_knobBackgroundPath__ySqrn {
|
|
33
|
-
fill: none;
|
|
34
|
-
stroke: #8b5cf6;
|
|
35
|
-
stroke-width: 3.5;
|
|
36
|
-
stroke-linecap: round;
|
|
37
|
-
stroke-dasharray: 113.1;
|
|
38
|
-
stroke-dashoffset: 113.1;
|
|
39
|
-
transition: stroke-dashoffset 0.1s ease-out;
|
|
40
|
-
filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.CircularRange-module_knobIndicator__FxbT4 {
|
|
44
|
-
position: absolute;
|
|
45
|
-
width: 4px;
|
|
46
|
-
height: 20px;
|
|
47
|
-
background: linear-gradient(to bottom, #8b5cf6, #c084fc);
|
|
48
|
-
top: 5px;
|
|
49
|
-
left: 50%;
|
|
50
|
-
transform-origin: center 27.5px;
|
|
51
|
-
transform: translateX(-50%) rotate(-135deg);
|
|
52
|
-
border-radius: 2px;
|
|
53
|
-
z-index: 2;
|
|
54
|
-
/*transition: transform 0.05s ease-out;*/
|
|
55
|
-
box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.CircularRange-module_knobCenter__DftjA {
|
|
59
|
-
position: absolute;
|
|
60
|
-
width: 18px;
|
|
61
|
-
height: 18px;
|
|
62
|
-
background: radial-gradient(circle, #0a0a0a, #1a1a1a);
|
|
63
|
-
border-radius: 50%;
|
|
64
|
-
top: 50%;
|
|
65
|
-
left: 50%;
|
|
66
|
-
transform: translate(-50%, -50%);
|
|
67
|
-
box-shadow:
|
|
68
|
-
inset 1px 1px 3px rgba(0, 0, 0, 0.7),
|
|
69
|
-
0 1px 2px rgba(139, 92, 246, 0.3);
|
|
70
|
-
z-index: 3;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/* Hover states */
|
|
74
|
-
.CircularRange-module_knob__2nLWp:hover .CircularRange-module_knobRing__H-KV6 {
|
|
75
|
-
border-color: #8b5cf6;
|
|
76
|
-
box-shadow:
|
|
77
|
-
inset 2px 2px 5px rgba(0, 0, 0, 0.5),
|
|
78
|
-
inset -2px -2px 5px rgba(60, 60, 60, 0.1),
|
|
79
|
-
0 4px 12px rgba(139, 92, 246, 0.4);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.CircularRange-module_knob__2nLWp:hover .CircularRange-module_knobIndicator__FxbT4 {
|
|
83
|
-
background: linear-gradient(to bottom, #a78bfa, #c084fc);
|
|
84
|
-
box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.CircularRange-module_knob__2nLWp.CircularRange-module_active__SFotz .CircularRange-module_knobRing__H-KV6 {
|
|
88
|
-
border-color: #a78bfa;
|
|
89
|
-
box-shadow:
|
|
90
|
-
inset 2px 2px 5px rgba(0, 0, 0, 0.6),
|
|
91
|
-
inset -2px -2px 5px rgba(60, 60, 60, 0.15),
|
|
92
|
-
0 4px 16px rgba(167, 139, 250, 0.5);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.CircularRange-module_knob__2nLWp.CircularRange-module_active__SFotz .CircularRange-module_knobIndicator__FxbT4 {
|
|
96
|
-
background: linear-gradient(to bottom, #a78bfa, #c084fc);
|
|
97
|
-
box-shadow: 0 0 10px rgba(167, 139, 250, 1);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.CircularRange-module_knob__2nLWp.CircularRange-module_active__SFotz .CircularRange-module_knobBackgroundPath__ySqrn {
|
|
101
|
-
stroke: #a78bfa;
|
|
102
|
-
filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));
|
|
103
|
-
}
|
|
1
|
+
.CircularRange-module__knob___2nLWp{cursor:pointer;height:65px;position:relative;user-select:none;width:65px}.CircularRange-module__knobRing___H-KV6{background:linear-gradient(145deg,#1a1a1a,#252525);border:3px solid #333;border-radius:50%;box-shadow:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(60,60,60,.1),0 4px 8px rgba(0,0,0,.3);height:100%;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.CircularRange-module__knobBackground___t2lGs{height:100%;left:0;pointer-events:none;position:absolute;top:0;transform:rotate(-135deg);width:100%}.CircularRange-module__knobBackgroundPath___ySqrn{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;filter:drop-shadow(0 0 3px rgba(139,92,246,.7));transition:stroke-dashoffset .1s ease-out}.CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#8b5cf6,#c084fc);border-radius:2px;box-shadow:0 0 6px rgba(139,92,246,.8);height:20px;left:50%;position:absolute;top:5px;transform:translateX(-50%) rotate(-135deg);transform-origin:center 27.5px;width:4px;z-index:2}.CircularRange-module__knobCenter___DftjA{background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;box-shadow:inset 1px 1px 3px rgba(0,0,0,.7),0 1px 2px rgba(139,92,246,.3);height:18px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;z-index:3}.CircularRange-module__knob___2nLWp:hover .CircularRange-module__knobRing___H-KV6{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(60,60,60,.1),0 4px 12px rgba(139,92,246,.4)}.CircularRange-module__knob___2nLWp:hover .CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#a78bfa,#c084fc);box-shadow:0 0 8px rgba(167,139,250,.9)}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobRing___H-KV6{border-color:#a78bfa;box-shadow:inset 2px 2px 5px rgba(0,0,0,.6),inset -2px -2px 5px rgba(60,60,60,.15),0 4px 16px rgba(167,139,250,.5)}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobBackgroundPath___ySqrn{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
|
|
2
|
+
/*# sourceMappingURL=index.esm.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CircularRange.module.css"],"names":[],"mappings":"AAAA,oCAII,cAAe,CAFf,WAAY,CACZ,iBAAkB,CAElB,gBAAiB,CAJjB,UAKJ,CAEA,wCAKI,kDAAqD,CAFrD,qBAAsB,CACtB,iBAAkB,CAElB,0GAGoC,CAPpC,WAAY,CAQZ,oDAAwD,CATxD,UAUJ,CAEA,8CAKI,WAAY,CAFZ,MAAO,CAGP,mBAAoB,CALpB,iBAAkB,CAClB,KAAM,CAKN,yBAA0B,CAH1B,UAIJ,CAEA,kDACI,SAAU,CACV,cAAe,CACf,gBAAiB,CACjB,oBAAqB,CACrB,sBAAuB,CACvB,uBAAwB,CAExB,+CAAoD,CADpD,yCAEJ,CAEA,6CAII,kDAAwD,CAKxD,iBAAkB,CAGlB,sCAA2C,CAT3C,WAAY,CAGZ,QAAS,CALT,iBAAkB,CAIlB,OAAQ,CAGR,0CAA2C,CAD3C,8BAA+B,CAL/B,SAAU,CAQV,SAGJ,CAEA,0CAII,kDAAqD,CACrD,iBAAkB,CAIlB,yEAEyC,CARzC,WAAY,CAIZ,QAAS,CANT,iBAAkB,CAKlB,OAAQ,CAER,8BAAgC,CANhC,UAAW,CAUX,SACJ,CAGA,kFACI,oBAAqB,CACrB,gHAIJ,CAEA,uFACI,kDAAwD,CACxD,uCACJ,CAEA,iHACI,oBAAqB,CACrB,kHAIJ,CAEA,sHACI,kDAAwD,CACxD,2BACJ,CAEA,2HACI,cAAe,CACf,gDACJ","file":"index.esm.css","sourcesContent":[".knob {\r\n width: 65px;\r\n height: 65px;\r\n position: relative;\r\n cursor: pointer;\r\n user-select: none;\r\n}\r\n\r\n.knobRing {\r\n width: 100%;\r\n height: 100%;\r\n border: 3px solid #333;\r\n border-radius: 50%;\r\n background: linear-gradient(145deg, #1a1a1a, #252525);\r\n box-shadow:\r\n inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n 0 4px 8px rgba(0, 0, 0, 0.3);\r\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.knobBackground {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n transform: rotate(-135deg);\r\n}\r\n\r\n.knobBackgroundPath {\r\n fill: none;\r\n stroke: #8b5cf6;\r\n stroke-width: 3.5;\r\n stroke-linecap: round;\r\n stroke-dasharray: 113.1;\r\n stroke-dashoffset: 113.1;\r\n transition: stroke-dashoffset 0.1s ease-out;\r\n filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));\r\n}\r\n\r\n.knobIndicator {\r\n position: absolute;\r\n width: 4px;\r\n height: 20px;\r\n background: linear-gradient(to bottom, #8b5cf6, #c084fc);\r\n top: 5px;\r\n left: 50%;\r\n transform-origin: center 27.5px;\r\n transform: translateX(-50%) rotate(-135deg);\r\n border-radius: 2px;\r\n z-index: 2;\r\n /*transition: transform 0.05s ease-out;*/\r\n box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);\r\n}\r\n\r\n.knobCenter {\r\n position: absolute;\r\n width: 18px;\r\n height: 18px;\r\n background: radial-gradient(circle, #0a0a0a, #1a1a1a);\r\n border-radius: 50%;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n box-shadow:\r\n inset 1px 1px 3px rgba(0, 0, 0, 0.7),\r\n 0 1px 2px rgba(139, 92, 246, 0.3);\r\n z-index: 3;\r\n}\r\n\r\n/* Hover states */\r\n.knob:hover .knobRing {\r\n border-color: #8b5cf6;\r\n box-shadow:\r\n inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n 0 4px 12px rgba(139, 92, 246, 0.4);\r\n}\r\n\r\n.knob:hover .knobIndicator {\r\n background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);\r\n}\r\n\r\n.knob.active .knobRing {\r\n border-color: #a78bfa;\r\n box-shadow:\r\n inset 2px 2px 5px rgba(0, 0, 0, 0.6),\r\n inset -2px -2px 5px rgba(60, 60, 60, 0.15),\r\n 0 4px 16px rgba(167, 139, 250, 0.5);\r\n}\r\n\r\n.knob.active .knobIndicator {\r\n background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n box-shadow: 0 0 10px rgba(167, 139, 250, 1);\r\n}\r\n\r\n.knob.active .knobBackgroundPath {\r\n stroke: #a78bfa;\r\n filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));\r\n}"]}
|
package/dist/index.esm.js
CHANGED
|
@@ -422,7 +422,7 @@ function requireJsxRuntime () {
|
|
|
422
422
|
|
|
423
423
|
var jsxRuntimeExports = requireJsxRuntime();
|
|
424
424
|
|
|
425
|
-
var styles = {"knob":"CircularRange-
|
|
425
|
+
var styles = {"knob":"CircularRange-module__knob___2nLWp","knobRing":"CircularRange-module__knobRing___H-KV6","knobBackground":"CircularRange-module__knobBackground___t2lGs","knobBackgroundPath":"CircularRange-module__knobBackgroundPath___ySqrn","knobIndicator":"CircularRange-module__knobIndicator___FxbT4","knobCenter":"CircularRange-module__knobCenter___DftjA","active":"CircularRange-module__active___SFotz"};
|
|
426
426
|
|
|
427
427
|
const ARC_LENGTH = 113.1; // 270°
|
|
428
428
|
const CircularRange = ({ min = 0, max = 100, value = 0, step = 0.01, onChange, theme = styles }) => {
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-circular-range",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "Simple VST-like circular slider/range.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
7
|
+
"types": "dist/types/index.d.ts",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
package/dist/index.d.mts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
type StyleSlots = 'knob' | 'knobRing' | 'knobBackground' | 'knobBackgroundPath' | 'knobIndicator' | 'knobCenter' | 'active';
|
|
2
|
-
type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;
|
|
3
|
-
interface CircularRangeProps {
|
|
4
|
-
min?: number;
|
|
5
|
-
max?: number;
|
|
6
|
-
value?: number;
|
|
7
|
-
step?: number;
|
|
8
|
-
onChange?: (value: number) => void;
|
|
9
|
-
theme?: CircularRangeThemeProps;
|
|
10
|
-
}
|
|
11
|
-
declare const CircularRange: React.FC<CircularRangeProps>;
|
|
12
|
-
|
|
13
|
-
export { CircularRange, type CircularRangeProps, type CircularRangeThemeProps, type StyleSlots };
|
package/dist/index.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
type StyleSlots = 'knob' | 'knobRing' | 'knobBackground' | 'knobBackgroundPath' | 'knobIndicator' | 'knobCenter' | 'active';
|
|
2
|
-
type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;
|
|
3
|
-
interface CircularRangeProps {
|
|
4
|
-
min?: number;
|
|
5
|
-
max?: number;
|
|
6
|
-
value?: number;
|
|
7
|
-
step?: number;
|
|
8
|
-
onChange?: (value: number) => void;
|
|
9
|
-
theme?: CircularRangeThemeProps;
|
|
10
|
-
}
|
|
11
|
-
declare const CircularRange: React.FC<CircularRangeProps>;
|
|
12
|
-
|
|
13
|
-
export { CircularRange, type CircularRangeProps, type CircularRangeThemeProps, type StyleSlots };
|