(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[97478],{42282:(e,t,r)=>{"use strict";r.d(t,{Z:()=>a});var n=r(79477),s=r(74631),o=r(87740);let c=e=>e instanceof MouseEvent,a=function(e){let{buffer:t=0,throttleBy:r=18,excludeTouchEvents:a,onEnterBox:u,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),f=n.useRef(u),w=n.useRef(i);return f.current=u,w.current=i,n.useEffect(()=>{let e=f.current,n=w.current,o=r=>{c(r)&&(r.preventDefault(),r.stopPropagation());let{clientX:s,clientY:o}=r;if(!l)return;if(!(s>=l.left-t&&s<=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:s-l.left,y:o-l.top};h.current=!0,p(a)},[u,i]=(0,s.Ep)(o,r),[d,v]=(0,s.Ep)(e=>{o(e.touches[0])},r);return window.addEventListener("mousemove",u),a||window.addEventListener("touchmove",d),()=>{window.removeEventListener("mousemove",u),i(),a||(window.removeEventListener("touchmove",d),v())}},[l,t,r,a]),[d,l]}},97478:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>K});var n=r(67841),s=r(79477),o=r(64833),c=r(74631),a=r(42282);let u=[.3457/.3585,1,.8251046025104602];function i(e,t){let r=e.length;Array.isArray(e[0])||(e=[e]),Array.isArray(t[0])||(t=t.map(e=>[e]));let n=t[0].length,s=t[0].map((e,r)=>t.map(e=>e[r])),o=e.map(e=>s.map(t=>Array.isArray(e)?e.reduce((e,r,n)=>e+r*(t[n]||0),0):t.reduce((t,r)=>t+r*e,0)));return(1===r&&(o=o[0]),1===n)?o.map(e=>e[0]):o}function l(e){return e.map(function(e){let t=Math.abs(e);return t>.0031308?(e<0?-1:1)*(1.055*Math.pow(t,1/2.4)-.055):12.92*e})}function d(e){return i([[.9554734527042182,-.023098536874261423,.0632593086610217],[-.028369706963208136,1.0099954580058226,.021041398966943008],[.012314001688319899,-.020507696433477912,1.3303659366080753]],e)}function p(e){var t=24389/27,r=216/24389,n=[];return n[1]=(e[0]+16)/116,n[0]=e[1]/500+n[1],n[2]=n[1]-e[2]/200,[Math.pow(n[0],3)>r?Math.pow(n[0],3):(116*n[0]-16)/t,e[0]>t*r?Math.pow((e[0]+16)/116,3):e[0]/t,Math.pow(n[2],3)>r?Math.pow(n[2],3):(116*n[2]-16)/t].map((e,t)=>e*u[t])}function h(e){return[e[0],e[1]*Math.cos(e[2]*Math.PI/180),e[1]*Math.sin(e[2]*Math.PI/180)]}function f(e){return l(i([[12831/3959,-329/214,-1974/3959],[-851781/878810,1648619/878810,36519/878810],[705/12673,-2585/12673,705/667]],d(p(h(e)))))}function w(e,t,r){return f([+e,+t,+r]).reduce((e,t)=>e&&t>=-.000005&&t<=1.000005,!0)}function v(e,t,r){return function(e,t,r){let n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:100,s=arguments.length>4&&void 0!==arguments[4]&&arguments[4];return s&&([e,t,r]=function(e,t,r,n){if(n(e,t,r))return[e,t,r];let s=t,o=0;for(t/=2;s-o>1e-4;)n(e,t,r)?o=t:s=t,t=(s+o)/2;return[e,t,r]}(e,t,r,w)),"rgb("+f([+e,+t,+r]).map(e=>Math.round(1e4*e)/100+"%").join(" ")+function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return e<100?" / ".concat(e,"%"):""}(n)+")"}(e,t,r,100,!0)}let x=(0,o.z)("div")({name:"Wrapper",class:"w1ezpr7d",propsAsIs:!1}),m=(0,o.z)("dl")({name:"Blocker",class:"b1bp6zq4",propsAsIs:!1}),g=(0,o.z)("button")({name:"Indicator",class:"i1yhuy83",propsAsIs:!1}),y=e=>{let{chroma:t,lightness:r,hue:o,setHue:u,size:i,thickness:l=24}=e,d=s.useRef(),[p,h]=s.useState(!1),[f,w]=(0,a.Z)(d,{buffer:32});s.useEffect(()=>{if(!p||!f||!w)return;let e=[w.width/2,w.height/2],[t]=(0,c.K5)([f.x,f.y],e);u(Math.round((180/Math.PI*t+90)%360))},[p,f,w,u]),s.useEffect(()=>{function e(){h(!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)}},[p]);let y=i/2,j=(0,c.VR)(o),k=function(e,t){let[r,n]=e;return{x:(0,c.Fv)(n,-t,t,0,2*t),y:(0,c.Fv)(r,-t,t,2*t,0)}}((0,c.vi)([j,y-l/2-2]),y),b=(0,c.w6)(90).map(e=>v(r,t,(0,c.Fv)(e,0,90,0,360))).join(", ");return(0,n.jsxs)(x,{ref:d,style:{"--radius":y+"px","--wheel-thickness":l+"px",background:"conic-gradient(".concat(b,")")},onMouseDown:()=>h(!0),onTouchStart:()=>h(!0),children:[(0,n.jsxs)(m,{children:[(0,n.jsx)("dt",{children:"Hue"}),(0,n.jsxs)("dd",{children:[o," degree",1!==o&&"s"]})]}),k&&(0,n.jsx)(g,{style:{"--x":k.x+"px","--y":k.y+"px","--rotation":o+"deg"},onKeyDown:function(e){switch(e.key){case"ArrowUp":e.preventDefault(),u(e=>0===e?e:e>=355?0:void(e<180?u((0,c.uZ)(e-5,0,180)):u((0,c.uZ)(e+5,180,355))));return;case"ArrowDown":e.preventDefault(),u(e=>{if(180===e)return e;e<180?u((0,c.uZ)(e+5,0,180)):u((0,c.uZ)(e-5,180,355))});return;case"ArrowLeft":e.preventDefault(),u(e=>270===e?e:e<5?e+355:void(e>=0&&e<90?u((0,c.uZ)(e-5,0,90)):e>=90&&e<270?u((0,c.uZ)(e+5,90,270)):u((0,c.uZ)(e-5,270,360))));return;case"ArrowRight":e.preventDefault(),u(e=>90===e?e:e>=355?e-355:void(e>=0&&e<90?u((0,c.uZ)(e+5,0,90)):e>=90&&e<270?u((0,c.uZ)(e-5,90,270)):u((0,c.uZ)(e+5,270,360))));return}}})]})};r(86775);let j=(0,o.z)("div")({name:"Wrapper",class:"w1eer0xu",propsAsIs:!1}),k=(0,o.z)("div")({name:"GridWrapper",class:"g51qjkg",propsAsIs:!1}),b=(0,o.z)("div")({name:"GradientOverlay",class:"g1iwlyx2",propsAsIs:!1}),A=(0,o.z)("svg")({name:"ChromaSvg",class:"cse4bc5",propsAsIs:!1}),z=(0,o.z)(b)({name:"ColorGradient",class:"c1e6g1df",propsAsIs:!0}),E=(0,o.z)("button")({name:"Indicator",class:"i1qwg2th",propsAsIs:!1}),I=(0,o.z)("div")({name:"Axis",class:"aw2lh3j",propsAsIs:!1}),L=(0,o.z)(I)({name:"SaturationAxis",class:"s17fkpt4",propsAsIs:!0}),M=(0,o.z)(I)({name:"LightnessAxis",class:"lck5ck3",propsAsIs:!0}),Z=e=>{let{hue:t,size:r,chroma:o,setChroma:u,lightness:i,setLightness:l}=e,d=s.useId().replace(/:/g,""),p=s.useRef(),[h,f]=s.useState(!1),[w,x]=(0,a.Z)(p,{buffer:128,throttleBy:20});s.useEffect(()=>{h&&w&&x&&(u(Math.round((0,c.uZ)((0,c.Fv)(w.x,0,x.width,0,100),0,100))),l(Math.round((0,c.uZ)((0,c.Fv)(w.y,0,x.height,100,0),0,100))))},[h,w,x,u,l]),s.useEffect(()=>{function e(){f(!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 m=(0,c.Fv)(o,0,100,0,r),g=(0,c.Fv)(i,0,100,r,0),y=v(i,o,t),b=(0,c.w6)(10).map(e=>v((0,c.Fv)(e,0,9,0,100),100,t)),I="chroma-gradient-colorful-".concat(d),Z="chroma-gradient-grayscale-".concat(d),D="chroma-mask-".concat(d);return(0,n.jsxs)(j,{style:{"--fallback-background":y},children:[(0,n.jsxs)(k,{ref:p,onMouseDown:()=>f(!0),onTouchStart:()=>f(!0),style:{width:r,height:r,"--hue":t+"deg",cursor:h?"none":void 0},children:[(0,n.jsx)(z,{style:{backgroundImage:"linear-gradient(to top, ".concat(b.join(", "),")")}},t),(0,n.jsxs)(A,{viewBox:"0 0 250 250",children:[(0,n.jsxs)("defs",{children:[(0,n.jsxs)("linearGradient",{id:I,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,n.jsx)("stop",{offset:"0%",style:{stopColor:"#FFF"}}),(0,n.jsx)("stop",{offset:"100%",style:{stopColor:"#000"}})]}),(0,n.jsxs)("linearGradient",{id:Z,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[(0,n.jsx)("stop",{offset:"0%",style:{stopColor:"#FFF"}}),(0,n.jsx)("stop",{offset:"100%",style:{stopColor:"#000"}})]}),(0,n.jsx)("mask",{id:D,children:(0,n.jsx)("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#".concat(Z,")")})})]}),(0,n.jsx)("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#".concat(I,")"),mask:"url(#".concat(D,")")})]}),(0,n.jsx)(E,{style:{"--x":"".concat(m,"px"),"--y":"".concat(g,"px"),cursor:h?"none":void 0},onKeyDown:function(e){let t=0,r=0;switch(e.key){case"ArrowUp":e.preventDefault(),r=5;break;case"ArrowDown":e.preventDefault(),r=-5;break;case"ArrowLeft":e.preventDefault(),t=-5;break;case"ArrowRight":e.preventDefault(),t=5}u(e=>Math.round((0,c.uZ)(e+t,0,100))),l(e=>Math.round((0,c.uZ)(e+r,0,100)))}})]}),(0,n.jsx)(L,{children:(0,n.jsx)("span",{children:"Chroma"})}),(0,n.jsx)(M,{children:(0,n.jsx)("span",{children:"Lightness"})})]})};r(33710);var D=r(79894),F=r(76955),S=r(38339);let C=(0,D.default)(()=>Promise.all([r.e(46288),r.e(92203),r.e(28061)]).then(r.bind(r,28061)),{loadableGenerated:{webpack:()=>[28061]},ssr:!1,loading:()=>(0,n.jsx)(S.Z,{style:{alignSelf:"center"}})}),q=function(e){let{hue:t,chroma:r,lightness:s}=e,o=(0,F.Z)(),c="lch(".concat(s,"% ").concat(r," ").concat(t,")"),a="number"==typeof o.width&&o.width>690;return(0,n.jsx)(C,{omitCopyButton:!0,code:a?".box {\n  background-color: ".concat(c,";\n}"):".box {\n  background-color:\n    ".concat(c,";\n}"),lang:"css"})},R=(0,o.z)("div")({name:"OuterWrapper",class:"o1xjo34d",propsAsIs:!1}),G=(0,o.z)("div")({name:"Wrapper",class:"wr5xdu7",propsAsIs:!1}),W=(0,o.z)("div")({name:"Row",class:"rysf2kg",propsAsIs:!1}),B=(0,o.z)("div")({name:"BottomRow",class:"b1tcidyn",propsAsIs:!1}),P=(0,o.z)("div")({name:"ColorSquare",class:"c1chc0ce",propsAsIs:!1}),_=(0,o.z)("div")({name:"SnippetWrapper",class:"s49jfz7",propsAsIs:!1}),K=()=>{let[e,t]=s.useState(0),[r,o]=s.useState(100),[c,a]=s.useState(50),u=v(c,r,e);return(0,n.jsx)(R,{children:(0,n.jsxs)(G,{style:{"--unit-size":"".concat(275,"px")},children:[(0,n.jsxs)(W,{children:[(0,n.jsx)(Z,{size:275,hue:e,chroma:r,setChroma:o,lightness:c,setLightness:a}),(0,n.jsx)(y,{lightness:c,chroma:r,hue:e,setHue:t,size:275})]}),(0,n.jsxs)(B,{children:[(0,n.jsx)(P,{style:{"--background-color":u}}),(0,n.jsx)(_,{children:(0,n.jsx)(q,{hue:e,chroma:r,lightness:c})})]})]})})};r(3800)},33710:e=>{e.exports={w1eer0xu:"w1eer0xu",g51qjkg:"g51qjkg",g1iwlyx2:"g1iwlyx2",cse4bc5:"cse4bc5",c1e6g1df:"c1e6g1df",i1qwg2th:"i1qwg2th",aw2lh3j:"aw2lh3j",s17fkpt4:"s17fkpt4",lck5ck3:"lck5ck3"}},86775:e=>{e.exports={w1ezpr7d:"w1ezpr7d",b1bp6zq4:"b1bp6zq4",i1yhuy83:"i1yhuy83"}},3800:e=>{e.exports={o1xjo34d:"o1xjo34d",wr5xdu7:"wr5xdu7",rysf2kg:"rysf2kg",b1tcidyn:"b1tcidyn",c1chc0ce:"c1chc0ce",s49jfz7:"s49jfz7"}}}]);
//# sourceMappingURL=97478.8e28a047d8b8f326.js.map