react-dial-knob/dist/react-dial-knob.umd.min.js

Dial knob UI component for the web, based on pure HTML/SVG tags.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactDialKnob={},e.React)}(this,function(e,g){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=t(g),v=function(){return(v=Object.assign||function(e){for(var t,a=1,n=arguments.length;a<n;a++)for(var i in t=arguments[a])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},r=(a.prototype.updateFromProps=function(e){if(e.max<=e.min||e.max<e.min+e.step)throw Error("Max value should be bigger or equal to min+step value.");if(this.min=e.min,this.max=e.max,this.step=e.step,this.diameter=e.diameter,this.onAngleChange=e.onAngleChange||this.onAngleChange,this.onValueChange=e.onValueChange||this.onValueChange,this.onInteractionChange=e.onInteractionChange||this.onInteractionChange,this.spaceMaxFromZero=void 0===e.spaceMaxFromZero||e.spaceMaxFromZero,e.jumpLimit&&(this.jumpLimit=e.jumpLimit),e.value!==this.value&&(this.value=this.value<e.min||e.value<e.min?e.min:e.max<this.value||e.max<e.value?e.max:e.value,this.angle=this.angleFromValue(this.value)),this.value%this.step||(this.max-this.min)%this.step)throw Error("Value and (max - min) should be divisible by step.")},Object.defineProperty(a.prototype,"angle",{get:function(){return this._angle},set:function(e){this._angle!==e&&(this._angle=e,this.onAngleChange&&this.onAngleChange(this._angle))},enumerable:!1,configurable:!0}),Object.defineProperty(a.prototype,"value",{get:function(){return this._value},set:function(e){e=this.getValueWithinJumpLimit(e);this._value!==e&&(this._value=e,this.onValueChange&&this.onValueChange(this._value))},enumerable:!1,configurable:!0}),Object.defineProperty(a.prototype,"isInteracting",{get:function(){return this._isInteracting},set:function(e){this._isInteracting!==e&&(this._isInteracting=e,this.onInteractionChange&&this.onInteractionChange(this._isInteracting))},enumerable:!1,configurable:!0}),Object.defineProperty(a.prototype,"numSteps",{get:function(){return(this.max-this.min)/this.step},enumerable:!1,configurable:!0}),Object.defineProperty(a.prototype,"valsDistribution",{get:function(){return this.spaceMaxFromZero?360/(this.numSteps+1):360/this.numSteps},enumerable:!1,configurable:!0}),a.prototype.getValueWithinJumpLimit=function(e){return this.jumpLimit&&Math.max(this.step,Math.ceil((this.max-this.min)*this.jumpLimit))<Math.abs(e-this.value)?.9*this.max<e&&this.value<this.min+.1*this.max?this.min:e<this.min+.1*this.max&&.9*this.max<this.value?this.max:this.value:e},a.prototype.getComputedTransformXY=function(e){if(!window.getComputedStyle||!e)return{x:0,y:0,scaleX:1,scaleY:1};var t=window.getComputedStyle(e),a=t.transform||t.webkitTransform;if(!a)return{x:0,y:0,scaleX:1,scaleY:1};e=a.match(/^matrix3d\((.+)\)$/);if(e){var t=parseFloat(e[1].split(", ")[0]),n=parseFloat(e[1].split(", ")[5]);return{x:parseFloat(e[1].split(", ")[12]),y:parseFloat(e[1].split(", ")[13]),scaleX:t,scaleY:n}}n=(e=a.match(/^matrix\((.+)\)$/))?parseFloat(e[1].split(", ")[0]):1,a=e?parseFloat(e[1].split(", ")[3]):1;return{x:e?parseFloat(e[1].split(", ")[4]):0,y:e?parseFloat(e[1].split(", ")[5]):0,scaleX:n,scaleY:a}},a.prototype.updateAreaLocation=function(e){for(var t,a,n=this.diameter/2,i=0,r=0,l=this.refElement.current,o=this.getComputedTransformXY(l);l;)"BODY"==l.tagName.toUpperCase()?(t=l.scrollLeft||document.documentElement.scrollLeft,a=l.scrollTop||document.documentElement.scrollTop,i+=l.offsetLeft-t+l.clientLeft,r+=l.offsetTop-a+l.clientTop):(i+=l.offsetLeft-l.scrollLeft+l.clientLeft,r+=l.offsetTop-l.scrollTop+l.clientTop),i+=o.x,r+=o.y,o=this.getComputedTransformXY(l=l.offsetParent);this._locationX=i+n,this._locationY=r+n,this._locationX+=e.pageX-e.clientX,this._locationY+=e.pageY-e.clientY},a.prototype.calcDegreeOfRotation=function(e,t){return Math.abs(180/Math.PI*Math.atan2(e-this._locationX,t-this._locationY)-180)},a.prototype.valueFromAngle=function(e){var a=this,n=this.min+e/(this.numSteps*this.valsDistribution)*(this.numSteps*this.step);return this.max+this.step/2<n?this.min:Array.from(Array(this.numSteps+1)).map(function(e,t){return a.min+t*a.step}).reduce(function(e,t){return Math.abs(t-n)<Math.abs(e-n)?t:e})},a.prototype.angleFromValue=function(e){return Math.ceil((e-this.min)/this.step*this.valsDistribution)},a.prototype.updateAngleValue=function(t,a){var n=this;requestAnimationFrame(function(){var e=n.calcDegreeOfRotation(t,a);n.value=n.valueFromAngle(e),n.angle=n.angleFromValue(n.value)})},a.prototype.addWindowEventListeners=function(e){this.isInteracting=!0,this.windowEventListeners[e].forEach(function(e){window.addEventListener(e[0],e[1])})},a.prototype.removeWindowEventListeners=function(e){this.isInteracting=!1,this.windowEventListeners[e].forEach(function(e){window.removeEventListener(e[0],e[1])})},a);function a(e,t){var n=this;this.handleOnMouseDown=function(e){n.addWindowEventListeners("mouse");var t=e.pageX,a=e.pageY;n.updateAreaLocation({pageX:t,pageY:a,clientX:e.clientX,clientY:e.clientY}),n.updateAngleValue(t,a)},this.handleOnMouseMove=function(e){n.isInteracting&&n.updateAngleValue(e.pageX,e.pageY)},this.handleOnMouseUp=function(){n.removeWindowEventListeners("mouse")},this.handleOnTouchStart=function(e){var t,a;n.addWindowEventListeners("touch"),"changedTouches"in e&&1===e.changedTouches.length&&(n.updateAreaLocation({pageX:a=(t=e.changedTouches[0]).pageX,pageY:e=t.pageY,clientX:t.clientX,clientY:t.clientY}),n.updateAngleValue(a,e))},this.handleOnTouchMove=function(e){n.isInteracting&&"changedTouches"in e&&1===e.changedTouches.length&&n.updateAngleValue((e=e.changedTouches[0]).pageX,e.pageY)},this.handleOnTouchEnd=function(){n.removeWindowEventListeners("touch")},this.handleOnFocus=function(){n.isInteracting=!0},this.handleOnBlur=function(){n.isInteracting=!1},this.handleOnKeyDown=function(e){e=e.key||{38:"ArrowUp",40:"ArrowDown"}[e.keyCode];"ArrowUp"!==e||n.max<n.value+n.step?"ArrowDown"!==e||n.value-n.step<n.min||(n.value-=n.step,n.angle=n.angleFromValue(n.value)):(n.value+=n.step,n.angle=n.angleFromValue(n.value))},this.onAngleChange=t.onAngleChange,this.onValueChange=t.onValueChange,this.onInteractionChange=t.onInteractionChange,this._locationX=0,this._locationY=0,this.refElement=e,this._isInteracting=!1,this.windowEventListeners={mouse:[["mousemove",this.handleOnMouseMove],["mouseup",this.handleOnMouseUp]],touch:[["touchmove",this.handleOnTouchMove],["touchend",this.handleOnTouchEnd]]},this.updateFromProps(t)}function l(e){return console&&console.error(e.error),x.default.createElement("div",{style:{width:e.diameter+"px",height:e.diameter+"px",borderRadius:e.diameter/2+"px",position:"relative",outline:"none",boxSizing:"border-box",overflow:"hidden"}},x.default.createElement("div",{style:{fontSize:"22px",fontWeight:"bold",color:"red",textAlign:"center",width:"100%",height:"100%",position:"absolute",zIndex:999,paddingTop:"calc(50% - 0.5em)",background:"rgba(0, 0, 0, 0.2)",pointerEvents:"none"}},"💣"),e.children)}function b(e){var t=function(e){var t=g.useRef(null),a=g.useRef(null),n=null;try{a.current?a.current.updateFromProps(e):a.current=new r(t,e)}catch(e){n=e}return[t,a.current,n]}(e),a=t[0],n=t[1],i=t[2],t=e.knobStyle||{},t=v(v({},{width:e.diameter+"px",height:e.diameter+"px",borderRadius:e.diameter/2+"px",position:"relative",outline:"none",boxSizing:"border-box",overflow:"hidden"}),t),t=x.default.createElement("div",{ref:a,onMouseDown:n&&n.handleOnMouseDown,onTouchStart:n&&n.handleOnTouchStart,onKeyDown:n&&n.handleOnKeyDown,onFocus:n&&n.handleOnFocus,onBlur:n&&n.handleOnBlur,style:t,tabIndex:0,"aria-valuenow":e.value,"aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuetext":e.ariaValueText,"aria-labelledby":e.ariaLabelledBy},e.children);return i?x.default.createElement(l,{error:i,diameter:e.diameter},t):t}function y(e){var t=e.style||{},t=v(v({},{position:"relative",outline:"none",boxSizing:"border-box"}),t);return x.default.createElement("div",{style:t},e.children)}function E(a,n){return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];a.apply(void 0,e),n&&n.apply(void 0,e)}}function w(e){var t=g.useRef(0),a=g.useState(0),n=a[0],i=a[1];return g.useEffect(function(){i(t.current)},[t.current,e]),[n,function(e){t.current=e}]}var o="metal-"+(new Date).getTime();var C="donut-"+(new Date).getTime();e.Basic=function(e){var t=(l=w(e.value))[0],a=l[1],n=g.useState(!1),i=(o=e.theme||{}).gradientStart||"#f9f9f9",r=o.gradientEnd||"#eaeced",l=o.notchAndText||"#3f3f3f",o=n[0]?o.activeColor||"#a1dca8":o.defaultColor||"#3f3f3f",a=E(a,e.onAngleChange),n=E(n[1],e.onInteractionChange);return x.default.createElement(y,{style:e.style},x.default.createElement(b,{diameter:e.diameter,value:e.value,min:e.min,max:e.max,step:e.step,jumpLimit:e.jumpLimit,spaceMaxFromZero:e.spaceMaxFromZero,ariaLabelledBy:e.ariaLabelledBy,ariaValueText:e.ariaValueText,knobStyle:v({cursor:"pointer"},e.knobStyle),onAngleChange:a,onInteractionChange:n,onValueChange:e.onValueChange},x.default.createElement(x.default.Fragment,null,x.default.createElement("svg",{viewBox:"0 0 166.56 166.56",transform:"rotate("+t+")",style:{transform:"rotate("+t+"deg)"}},x.default.createElement("defs",null,x.default.createElement("linearGradient",{id:"a"},x.default.createElement("stop",{offset:"0",stopColor:i,stopOpacity:"1"}),x.default.createElement("stop",{offset:"1",stopColor:r,stopOpacity:"1"})),x.default.createElement("filter",{id:"b",width:"1.11",height:"1.11",x:"-0.055",y:"-0.055",colorInterpolationFilters:"sRGB"},x.default.createElement("feGaussianBlur",{stdDeviation:"3.45"})),x.default.createElement("linearGradient",{id:"c",x1:"140.985",x2:"63.122",y1:"98.751",y2:"202.317",gradientTransform:"translate(-75.643 -328.104)",gradientUnits:"userSpaceOnUse",xlinkHref:"#a"})),x.default.createElement("g",{fillOpacity:"1",transform:"translate(-21.72 -65.22)"},x.default.createElement("circle",{cx:"105",cy:"148.5",r:"75",fill:"#ccc",stroke:"none",strokeDasharray:"none",strokeMiterlimit:"4",strokeOpacity:"1",strokeWidth:"17.106",filter:"url(#b)",opacity:"1"}),x.default.createElement("circle",{cx:"29.357",cy:"-179.604",r:"70",fill:"url(#c)",stroke:o,strokeDasharray:"none",strokeMiterlimit:"4",strokeOpacity:"1",strokeWidth:"1",opacity:"1",transform:"rotate(135.448)"}),x.default.createElement("circle",{cx:"105.083",cy:"88.628",r:"4.443",fill:l,stroke:"#b1b1b1",strokeDasharray:"none",strokeMiterlimit:"4",strokeOpacity:"1",strokeWidth:"0.551",opacity:"1"}))),x.default.createElement("div",{style:{width:"100%",textAlign:"center",fontSize:Math.ceil(e.diameter/4)+"px",position:"absolute",top:"calc(50% - 0.6em)",userSelect:"none",color:l}},e.value))),e.children)},e.Donut=function(e){var t=(p=w(e.value))[0],a=p[1],n=(m=g.useState(C+"-center"))[0],i=m[1],r=E(a,e.onAngleChange),l=E(function(e){i(e?C+"-center-active":C+"-center")},e.onInteractionChange),o=(f=e.theme||{}).donutColor||"#1BA098",s=f.centerColor||"#fff",u=f.centerFocusedColor||"#F7F4E9",c=f.donutThickness||30,d=f.bgrColor||"#e1e1e1",h=d=e.value===e.max?f.maxedBgrColor||"#051622":d,p=o,m=o,a=90,f=t;return t<180&&(h=o,m=p=d,a=t+90,f=0),x.default.createElement(y,{style:e.style},x.default.createElement(b,{diameter:e.diameter,value:e.value,min:e.min,max:e.max,step:e.step,jumpLimit:e.jumpLimit,spaceMaxFromZero:e.spaceMaxFromZero,ariaLabelledBy:e.ariaLabelledBy,ariaValueText:e.ariaValueText,knobStyle:v({cursor:"pointer"},e.knobStyle),onAngleChange:r,onInteractionChange:l,onValueChange:e.onValueChange},x.default.createElement(x.default.Fragment,null,x.default.createElement("style",{type:"text/css"},"."+C+" {\n                      position: relative;\n                      border-radius: 50%;\n                      overflow: hidden;\n                    }\n                    ."+C+"-slice-one, ."+C+"-slice-two {\n                      position: absolute;\n                      top: 0;\n                      left: 0;\n                      width: 100%;\n                      height: 100%;\n                    }\n                    ."+C+"-center, ."+C+"-center-active {\n                      position: absolute;\n                      border-radius: 50%;\n                    }\n                    ."+C+"-center {\n                      background: "+s+";\n                    }\n                    ."+C+"-center-active {\n                      background: "+u+";\n                    }\n                    ."+C+"-center span {\n                      display: block;\n                      text-align: center;\n                    }\n                    ."+C+"-text {\n                        width: 100%;\n                        text-align: center;\n                        font-weight: bold;\n                        position: absolute;\n                        top: calc(50% - 0.6em);\n                        user-select: none;\n                        z-index: 3;\n                    }"),x.default.createElement("div",{style:{position:"relative",width:e.diameter,height:e.diameter,userSelect:"none"}},x.default.createElement("div",{className:C,style:{width:e.diameter+"px",height:e.diameter+"px",background:h}},x.default.createElement("div",{className:C+"-slice-one",style:{clip:"rect(0 "+e.diameter+"px "+e.diameter/2+"px 0)",transform:"rotate("+a+"deg)",background:p}}),x.default.createElement("div",{className:C+"-slice-two",style:{clip:"rect(0 "+e.diameter/2+"px "+e.diameter+"px 0)",transform:"rotate("+f+"deg)",background:m}}),x.default.createElement("div",{className:n,style:{top:c+"px",left:c+"px",width:e.diameter-2*c+"px",height:e.diameter-2*c+"px"}})),x.default.createElement("div",{className:C+"-text",style:{color:o,fontSize:Math.ceil(e.diameter/4)+"px"}},e.value)))),e.children)},e.HighContrast=function(e){var t=(i=w(e.value))[0],a=i[1],n=g.useState(!1),i=e.theme||{},i=n[0]?i.activeColor||"#b56a7a":i.defaultColor||"#100",a=E(a,e.onAngleChange),n=E(n[1],e.onInteractionChange);return x.default.createElement(y,{style:e.style},x.default.createElement(b,{diameter:e.diameter,value:e.value,min:e.min,max:e.max,step:e.step,jumpLimit:e.jumpLimit,spaceMaxFromZero:e.spaceMaxFromZero,ariaLabelledBy:e.ariaLabelledBy,ariaValueText:e.ariaValueText,knobStyle:v({cursor:"pointer"},e.knobStyle),onAngleChange:a,onInteractionChange:n,onValueChange:e.onValueChange},x.default.createElement(x.default.Fragment,null,x.default.createElement("svg",{viewBox:"0 0 100 100",transform:"rotate("+t+")",style:{transform:"rotate("+t+"deg)"}},x.default.createElement("path",{fill:i,d:"M50 0A50 50 0 000 50a50 50 0 0050 50 50 50 0 0050-50A50 50 0 0050 0zm0 2a48 48 0 0148 48 48 48 0 01-48 48A48 48 0 012 50 48 48 0 0150 2z"}),x.default.createElement("path",{fill:i,d:"M50 4A46 46 0 004 50a46 46 0 0046 46 46 46 0 0046-46A46 46 0 0050 4zm0 2.141a4.276 4.276 0 014.276 4.277A4.276 4.276 0 0150 14.694a4.276 4.276 0 01-4.276-4.276A4.276 4.276 0 0150 6.141z"})),x.default.createElement("div",{style:{width:"100%",textAlign:"center",fontSize:Math.ceil(e.diameter/3)+"px",fontWeight:"bold",position:"absolute",top:"calc(50% - 0.6em)",userSelect:"none",color:"#fff"}},e.value))),e.children)},e.Silver=function(e){var t=(n=w(e.value))[0],a=n[1],n=(r=g.useState(o+"-bgr"))[0],i=r[1],r=E(a,e.onAngleChange),a=E(function(e){i(e?o+"-bgr-active":o+"-bgr")},e.onInteractionChange);return x.default.createElement(y,{style:e.style},x.default.createElement(b,{diameter:e.diameter+28,value:e.value,min:e.min,max:e.max,step:e.step,jumpLimit:e.jumpLimit,spaceMaxFromZero:e.spaceMaxFromZero,ariaLabelledBy:e.ariaLabelledBy,ariaValueText:e.ariaValueText,knobStyle:v({cursor:"pointer"},e.knobStyle),onAngleChange:r,onInteractionChange:a,onValueChange:e.onValueChange},x.default.createElement(x.default.Fragment,null,x.default.createElement("style",{type:"text/css"},"."+o+"-bgr, ."+o+"-bgr-active {\n                        position: absolute;\n                        z-index:1;\n                        outline: none;\n\n                        background-color: hsl(0,0%,90%);\n                        box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */\n                        inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */\n                        inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */\n                        inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */\n\n                        hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */\n                        hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */ \n\n                        transition: color .2s;\n                    }\n                    \n                    ."+o+"-bgr-active {\n                        color: hsl(210, 100%, 40%);\n                        text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;\n                        box-shadow: \n                            inset hsla(208, 79%, 28%,  1) 0  0px 0px 4px, /* border */\n                            inset hsla(208,100%,15%, .4) 0 -1px 5px 4px, /* soft SD */\n                            inset hsla(208,100%,20%,.25) 0 -1px 0px 7px, /* bottom SD */\n                            inset hsla(208,100%,100%,.7) 0  2px 1px 7px, /* top HL */\n\n                            hsla(208,100%,75%, .8) 0  0px 3px 2px, /* outer SD */\n                            hsla(208,50%,40%, .25) 0 -5px 6px 4px, /* outer SD */\n                            hsla(208,80%,95%,   1) 0  5px 6px 4px; /* outer HL */\n                    }\n\n                    ."+o+"-rot {\n                        position: absolute;\n                        z-index: 2;\n                        top: 7px;\n                        left: 7px;\n                        background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),\n                        -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),\n                        -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),\n                        -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),\n\n                        -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),\n                        -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),\n                        -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),\n\n                        -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);\n                    }\n\n\n                    ."+o+"-rot:before, ."+o+'-rot:after {\n                        content: "";\n                        top: 0;\n                        left: 0;\n                        position: absolute;\n                        width: inherit;\n                        height: inherit;\n                        border-radius: inherit;\n\n                        /* fake conical gradients */\n                        background-image: -webkit-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),\n                        -webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),\n                        -webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),\n                        -webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);\n                    }\n                    .'+o+"-rot:before { transform: rotate( 65deg); }\n                    ."+o+"-rot:after { transform: rotate(-65deg); }\n                    \n                    ."+o+"-notch {\n                        position: absolute;\n                        width: 10px;\n                        height: 10px;\n                        background: black;\n                        border-radius: 5px;\n                        top: 5px;\n                    }\n                    ."+o+"-text {\n                        width: 100%;\n                        text-align: center;\n                        font-weight: bold;\n                        position: absolute;\n                        top: calc(50% - 0.6em);\n                        user-select: none;\n                        z-index: 3;\n                        color: #262626;\n                        text-shadow: -1px -1px 1px #111, 1px 1px 2px #fff;\n                    }"),x.default.createElement("div",{style:{position:"relative",width:e.diameter,height:e.diameter,userSelect:"none",margin:"14px 0 0 14px"}},x.default.createElement("div",{className:n,style:{width:e.diameter+"px",height:e.diameter+"px",borderRadius:e.diameter/2+"px"}}),x.default.createElement("div",{className:o+"-rot",style:{width:e.diameter-14+"px",height:e.diameter-14+"px",lineHeight:e.diameter-14+"px",borderRadius:(e.diameter-14)/2+"px",transform:"rotate("+t+"deg)"}},x.default.createElement("div",{className:o+"-notch",style:{left:(e.diameter-24)/2+"px"}})),x.default.createElement("div",{className:o+"-text",style:{fontSize:Math.ceil(e.diameter/4)+"px"}},e.value)))),e.children)},e.SkinWrap=y,e.White=function(e){var t=(r=w(e.value))[0],a=r[1],n=g.useState(!1),i=n[1],l=(r=e.theme||{}).activeNotchColor||"#b56a7a",o=r.defaultNotchColor||"#f7f7f7",r=n[0]?r.activeTextColor||"#b56a7a":r.defaultTextColor||"#100",s=Math.min(Math.ceil((e.max-e.min)/e.step),36),u=Math.ceil(t/Math.ceil(360/s)),a=E(a,e.onAngleChange),i=E(i,e.onInteractionChange);return x.default.createElement(y,{style:e.style},x.default.createElement(b,{diameter:e.diameter,value:e.value,min:e.min,max:e.max,step:e.step,jumpLimit:e.jumpLimit,spaceMaxFromZero:e.spaceMaxFromZero,ariaLabelledBy:e.ariaLabelledBy,ariaValueText:e.ariaValueText,knobStyle:v({cursor:"pointer"},e.knobStyle),onAngleChange:a,onInteractionChange:i,onValueChange:e.onValueChange},x.default.createElement(x.default.Fragment,null,x.default.createElement("svg",{viewBox:"0 0 62.463 62.463"},x.default.createElement("defs",null,x.default.createElement("linearGradient",{id:"prefix__c"},x.default.createElement("stop",{offset:0,stopColor:"#fff"}),x.default.createElement("stop",{offset:1,stopColor:"#b0b0b0"})),x.default.createElement("linearGradient",{id:"prefix__a"},x.default.createElement("stop",{offset:0,stopColor:"#939393"}),x.default.createElement("stop",{offset:1,stopColor:"#f0f0f0",stopOpacity:0})),x.default.createElement("linearGradient",{id:"prefix__b"},x.default.createElement("stop",{offset:0,stopColor:"#b0b0b0"}),x.default.createElement("stop",{offset:1,stopColor:"#fdfdfd"})),x.default.createElement("linearGradient",{gradientTransform:"matrix(.84848 0 0 .84848 -25.569 29.664)",gradientUnits:"userSpaceOnUse",y2:136.304,x2:200.519,y1:175.459,x1:244.552,id:"prefix__e",xlinkHref:"#prefix__b"}),x.default.createElement("linearGradient",{gradientUnits:"userSpaceOnUse",y2:196.319,x2:143.659,y1:184.184,x1:133.863,id:"prefix__d",xlinkHref:"#prefix__c"})),x.default.createElement("g",{transform:"translate(-131.196 -134.336)"},x.default.createElement("g",{transform:"translate(-442.372 -663.575) scale(4.37185)"},x.default.createElement("circle",{cx:138.339,cy:189.655,r:7.144,fill:r}),x.default.createElement("path",{d:"M138.34 182.511a7.144 7.144 0 00-7.144 7.144 7.144 7.144 0 007.143 7.144 7.144 7.144 0 007.144-7.144 7.144 7.144 0 00-7.144-7.144zm0 .53a6.615 6.615 0 016.614 6.614 6.615 6.615 0 01-6.615 6.614 6.615 6.615 0 01-6.614-6.614 6.615 6.615 0 016.614-6.615z",fill:"url(#prefix__d)"}),x.default.createElement("circle",{cx:138.339,cy:189.655,r:6.35,fill:"#fff"})),x.default.createElement("circle",{r:14.583,cy:192.949,cx:149.253,fill:"none"}),x.default.createElement("circle",{cy:165.567,cx:162.427,fill:"#f0f0f0",r:27.151})),x.default.createElement("g",{transform:"translate(31.2315 31.2315) scale(0.45) rotate(-90)"},Array.from(Array(s)).map(function(e,t){var a=t*(2*Math.PI/s),n=1+62.463*Math.cos(a),i=4+62.463*Math.sin(a),r=n-1,a=i-4;return x.default.createElement("rect",{key:"notch_"+t,id:"r"+t,fill:t<u?l:o,width:2,height:8,x:n,y:i,transform:"rotate("+(t*Math.ceil(360/s)+90)+" "+r+" "+a+")"})}))),x.default.createElement("div",{style:{width:"100%",textAlign:"center",fontSize:Math.ceil(e.diameter/4)+"px",position:"absolute",top:"calc(50% - 0.6em)",userSelect:"none",color:r}},e.value))),e.children)},e.composeTwo=E,e.default=b,e.useAngleUpdater=w,Object.defineProperty(e,"__esModule",{value:!0})});