(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[99783],{99783:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>M});var n=s(67841),r=s(79477),o=s(64833),u=s(74631),a=s(42282);let c=(0,o.z)("div")({name:"Wrapper",class:"wlzhmol",propsAsIs:!1}),i=(0,o.z)("dl")({name:"Blocker",class:"bsccpj7",propsAsIs:!1}),l=(0,o.z)("button")({name:"Indicator",class:"i1ehbl6j",propsAsIs:!1}),d=e=>{let{hue:t,setHue:s,size:o,thickness:d=24}=e,p=r.useRef(null),[h,v]=r.useState(!1),[m,f]=(0,a.Z)(p,{buffer:32});r.useEffect(()=>{if(!h||"number"!=typeof m.x||"number"!=typeof m.y||!f)return;let e=[f.width/2,f.height/2],[t]=(0,u.K5)([m.x,m.y],e);s(Math.round((180/Math.PI*t+90)%360))},[h,m,f,s]),r.useEffect(()=>{function e(){v(!1)}return window.addEventListener("mouseup",e),window.addEventListener("touchend",e),document.addEventListener("mouseleave",e),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e),document.removeEventListener("mouseleave",e)}},[h]);let w=o/2,x=(0,u.VR)(t),b=function(e,t){let[s,n]=e;return{x:(0,u.Fv)(n,-t,t,0,2*t),y:(0,u.Fv)(s,-t,t,2*t,0)}}((0,u.vi)([x,w-d/2-2]),w);return(0,n.jsxs)(c,{ref:p,style:{"--radius":w+"px","--wheel-thickness":d+"px"},onMouseDown:()=>v(!0),onTouchStart:()=>v(!0),children:[(0,n.jsxs)(i,{children:[(0,n.jsx)("dt",{children:"Hue"}),(0,n.jsxs)("dd",{children:[t," degree",1!==t&&"s"]})]}),b&&(0,n.jsx)(l,{style:{"--x":b.x+"px","--y":b.y+"px","--rotation":t+"deg"},onKeyDown:function(e){switch(e.key){case"ArrowUp":e.preventDefault(),s(e=>0===e||e>=355?0:e<180?(0,u.uZ)(e-5,0,180):(0,u.uZ)(e+5,180,355));return;case"ArrowDown":e.preventDefault(),s(e=>180===e?e:e<180?(0,u.uZ)(e+5,0,180):(0,u.uZ)(e-5,180,355));return;case"ArrowLeft":e.preventDefault(),s(e=>270===e?e:e<5?e+355:e>=0&&e<90?(0,u.uZ)(e-5,0,90):e>=90&&e<270?(0,u.uZ)(e+5,90,270):(0,u.uZ)(e-5,270,360));return;case"ArrowRight":e.preventDefault(),s(e=>90===e?e:e>=355?e-355:e>=0&&e<90?(0,u.uZ)(e+5,0,90):e>=90&&e<270?(0,u.uZ)(e-5,90,270):(0,u.uZ)(e+5,270,360));return}}})]})};s(27802);let p=(0,o.z)("div")({name:"Wrapper",class:"wwl166b",propsAsIs:!1}),h=(0,o.z)("div")({name:"GridWrapper",class:"goooksr",propsAsIs:!1}),v=(0,o.z)("div")({name:"GradientOverlay",class:"gjgztbr",propsAsIs:!1}),m=(0,o.z)(v)({name:"BackgroundGradient",class:"bj9g0h8",propsAsIs:!0}),f=(0,o.z)(v)({name:"ColorGradient",class:"c1uuds8f",propsAsIs:!0}),w=(0,o.z)("button")({name:"Indicator",class:"i1d6tumv",propsAsIs:!1}),x=(0,o.z)("div")({name:"Axis",class:"argmpkv",propsAsIs:!1}),b=(0,o.z)(x)({name:"SaturationAxis",class:"s1tyq88d",propsAsIs:!0}),g=(0,o.z)(x)({name:"LightnessAxis",class:"l36kvy",propsAsIs:!0}),j=e=>{let{hue:t,size:s,saturation:o,lightness:c,setSaturation:i,setLightness:l}=e,d=r.useRef(null),[v,x]=r.useState(!1),[j,y]=(0,a.Z)(d,{buffer:128,throttleBy:20});r.useEffect(()=>{v&&"number"==typeof j.x&&"number"==typeof j.y&&y&&(i(Math.round((0,u.uZ)((0,u.Fv)(j.x,0,y.width,0,100),0,100))),l(Math.round((0,u.uZ)((0,u.Fv)(j.y,0,y.height,100,0),0,100))))},[v,j,y,i,l]),r.useEffect(()=>{function e(){x(!1)}return window.addEventListener("mouseup",e),window.addEventListener("touchend",e),document.addEventListener("mouseleave",e),()=>{window.removeEventListener("mouseup",e),window.removeEventListener("touchend",e),document.removeEventListener("mouseleave",e)}},[v]);let z=(0,u.Fv)(o,0,100,0,s),A=(0,u.Fv)(c,0,100,s,0);return(0,n.jsxs)(p,{children:[(0,n.jsxs)(h,{ref:d,onMouseDown:()=>x(!0),onTouchStart:()=>x(!0),style:{width:s,height:s,"--hue":t+"deg",cursor:v?"none":void 0},children:[(0,n.jsx)(m,{}),(0,n.jsx)(f,{}),(0,n.jsx)(w,{style:{"--x":"".concat(z,"px"),"--y":"".concat(A,"px"),background:"hsl(".concat(t,"deg ").concat(o,"% ").concat(c,"%)"),cursor:v?"none":void 0},onKeyDown:function(e){let t=0,s=0;switch(e.key){case"ArrowUp":e.preventDefault(),s=5;break;case"ArrowDown":e.preventDefault(),s=-5;break;case"ArrowLeft":e.preventDefault(),t=-5;break;case"ArrowRight":e.preventDefault(),t=5}i(e=>Math.round((0,u.uZ)(e+t,0,100))),l(e=>Math.round((0,u.uZ)(e+s,0,100)))}})]}),(0,n.jsx)(b,{children:(0,n.jsx)("span",{children:"Saturation"})}),(0,n.jsx)(g,{children:(0,n.jsx)("span",{children:"Lightness"})})]})};s(93063);var y=s(79894),z=s(76955),A=s(38339);let k=(0,y.default)(()=>Promise.all([s.e(46288),s.e(92203),s.e(28061)]).then(s.bind(s,28061)),{loadableGenerated:{webpack:()=>[28061]},ssr:!1,loading:()=>(0,n.jsx)(A.Z,{style:{alignSelf:"center"}})}),E=function(e){let{hue:t,saturation:s,lightness:r}=e,o=(0,z.Z)(),u="hsl(".concat(t,"deg ").concat(s,"% ").concat(r,"%)"),a="number"==typeof o.width&&o.width>690;return(0,n.jsx)(k,{omitCopyButton:!0,code:a?".box {\n  background-color: ".concat(u,";\n}"):".box {\n  background-color:\n    ".concat(u,";\n}"),lang:"css"})},I=(0,o.z)("div")({name:"OuterWrapper",class:"o1900fnx",propsAsIs:!1}),L=(0,o.z)("div")({name:"Wrapper",class:"w10m31r5",propsAsIs:!1}),Z=(0,o.z)("div")({name:"Row",class:"r1ara1rb",propsAsIs:!1}),D=(0,o.z)("div")({name:"BottomRow",class:"bnzjepo",propsAsIs:!1}),S=(0,o.z)("div")({name:"ColorSquare",class:"cgpmbt0",propsAsIs:!1}),R=(0,o.z)("div")({name:"SnippetWrapper",class:"s1tca4t3",propsAsIs:!1}),M=()=>{let[e,t]=r.useState(0),[s,o]=r.useState(100),[u,a]=r.useState(50);return(0,n.jsx)(I,{children:(0,n.jsxs)(L,{style:{"--unit-size":"".concat(275,"px")},children:[(0,n.jsxs)(Z,{children:[(0,n.jsx)(j,{size:275,hue:e,saturation:s,setSaturation:o,lightness:u,setLightness:a}),(0,n.jsx)(d,{hue:e,setHue:t,size:275})]}),(0,n.jsxs)(D,{children:[(0,n.jsx)(S,{style:{"--background-color":"hsl(".concat(e,"deg ").concat(s,"% ").concat(u,"%)")}}),(0,n.jsx)(R,{children:(0,n.jsx)(E,{hue:e,saturation:s,lightness:u})})]})]})})};s(17581)},42282:(e,t,s)=>{"use strict";s.d(t,{Z:()=>a});var n=s(79477),r=s(74631),o=s(87740);let u=e=>e instanceof MouseEvent,a=function(e){let{buffer:t=0,throttleBy:s=18,excludeTouchEvents:a,onEnterBox:c,onLeaveBox:i}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},l=(0,o.Z)(e),[d,p]=n.useState({x:null,y:null}),h=n.useRef(!1),v=n.useRef(c),m=n.useRef(i);return v.current=c,m.current=i,n.useEffect(()=>{let e=v.current,n=m.current,o=s=>{u(s)&&(s.preventDefault(),s.stopPropagation());let{clientX:r,clientY:o}=s;if(!l)return;if(!(r>=l.left-t&&r<=l.left+l.width+t&&o>=l.top-t&&o<=l.top+l.height+t)){h.current&&"function"==typeof n&&n(),h.current=!1;return}h.current||("function"==typeof e&&e(),h.current=!0);let a={x:r-l.left,y:o-l.top};h.current=!0,p(a)},[c,i]=(0,r.Ep)(o,s),[d,f]=(0,r.Ep)(e=>{o(e.touches[0])},s);return window.addEventListener("mousemove",c),a||window.addEventListener("touchmove",d),()=>{window.removeEventListener("mousemove",c),i(),a||(window.removeEventListener("touchmove",d),f())}},[l,t,s,a]),[d,l]}},17581:e=>{e.exports={o1900fnx:"o1900fnx",w10m31r5:"w10m31r5",r1ara1rb:"r1ara1rb",bnzjepo:"bnzjepo",cgpmbt0:"cgpmbt0",s1tca4t3:"s1tca4t3"}},27802:e=>{e.exports={wlzhmol:"wlzhmol",bsccpj7:"bsccpj7",i1ehbl6j:"i1ehbl6j"}},93063:e=>{e.exports={wwl166b:"wwl166b",goooksr:"goooksr",gjgztbr:"gjgztbr",bj9g0h8:"bj9g0h8",c1uuds8f:"c1uuds8f",i1d6tumv:"i1d6tumv",argmpkv:"argmpkv",s1tyq88d:"s1tyq88d",l36kvy:"l36kvy"}}}]);
//# sourceMappingURL=99783.0c2957c857d56759.js.map