react-circular-range 1.0.7 → 1.0.8

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.
Files changed (10) hide show
  1. package/dist/index.cjs.css +2 -103
  2. package/dist/index.cjs.css.map +1 -0
  3. package/dist/index.cjs.js +2 -1
  4. package/dist/index.esm.css +2 -103
  5. package/dist/index.esm.css.map +1 -0
  6. package/dist/index.esm.js +2 -1
  7. package/dist/types/index.d.ts +1 -0
  8. package/package.json +2 -2
  9. package/dist/index.d.mts +0 -13
  10. package/dist/index.d.ts +0 -13
package/dist/index.cjs.css CHANGED
@@ -1,103 +1,2 @@
1
- .CircularRange-module_knob__2nLWp {
2
- width: 65px;
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 */
package/dist/index.cjs.css.map ADDED
@@ -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
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ require('react-circular-range/dist/CircularRange.css');
3
4
  var require$$0 = require('react');
4
5
 
5
6
  var jsxRuntime = {exports: {}};
@@ -424,7 +425,7 @@ function requireJsxRuntime () {
424
425
 
425
426
  var jsxRuntimeExports = requireJsxRuntime();
426
427
 
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
+ 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
429
 
429
430
  const ARC_LENGTH = 113.1; // 270°
430
431
  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-module_knob__2nLWp {
2
- width: 65px;
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 */
package/dist/index.esm.css.map ADDED
@@ -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
@@ -1,3 +1,4 @@
1
+ import 'react-circular-range/dist/CircularRange.css';
1
2
  import require$$0, { useRef, useState, useEffect, useCallback } from 'react';
2
3
 
3
4
  var jsxRuntime = {exports: {}};
@@ -422,7 +423,7 @@ function requireJsxRuntime () {
422
423
 
423
424
  var jsxRuntimeExports = requireJsxRuntime();
424
425
 
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
+ 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
427
 
427
428
  const ARC_LENGTH = 113.1; // 270°
428
429
  const CircularRange = ({ min = 0, max = 100, value = 0, step = 0.01, onChange, theme = styles }) => {
package/dist/types/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ import 'react-circular-range/dist/CircularRange.css';
1
2
  export { CircularRange } from './CircularRange';
2
3
  export type { CircularRangeProps, CircularRangeThemeProps, StyleSlots } from './CircularRange';
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "react-circular-range",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
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 };