@atomik-color/component - npm Package Compare versions

Comparing version 1.0.18-alpha.3 to 1.0.18-alpha.5

dist/index.esm.js

@@ -1,2 +0,2 @@
-import e,{useState as t,useEffect as n,useRef as r,useCallback as a,memo as o,useContext as l,forwardRef as s}from"react";function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}var c,u;(u=c||(c={})).PageUp="PageUp",u.PageDown="PageDown",u.End="End",u.Home="Home",u.ArrowLeft="ArrowLeft",u.ArrowUp="ArrowUp",u.ArrowRight="ArrowRight",u.ArrowDown="ArrowDown",u.Tab="Tab";var d=c;function g(e=0,t,n=0){return e<n?n:e>t?t:e}const b=(e,t,n,r)=>{let a=(e.clientX-t.left)/t.width;return a=g(Math.round(a*n),n,r),a},p=(e,t,n,r)=>{let a=(e.clientY-t.top)/t.height;return a=g(Math.round(a*n),n,r),a},m=e=>{var{ref:t,onStep:o,ariaLabel:l,ariaValueNow:s,ariaValueText:i,maxValue:c=100,minValue:u=0,step:g=1,bigStep:m=10}=e,h=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(e,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const f=r(()=>{});n(()=>f.current,[]);const v=a(e=>{if(!t.current||"function"!=typeof h.onChange)return;e.preventDefault();const n=t.current.getBoundingClientRect();if("both"===h.direction){let t=b(e,n,c,u),r=p(e,n,c,u);return h.onChange({x:t,y:r})}if("horizontal"===h.direction){let t=b(e,n,c,u);return h.onChange(t)}if("vertical"===h.direction){let t=p(e,n,c,u);return h.onChange(t)}},[h.direction,h.onChange]),y=a(e=>{var n;t.current&&(e.preventDefault(),f.current=(()=>{const e=e=>{e.preventDefault()};return window.addEventListener("touchmove",e,{passive:!1,capture:!0}),()=>{window.removeEventListener("touchmove",e,{capture:!0})}})(),t.current.focus(),t.current.onpointermove=v,null===(n=t.current)||void 0===n||n.setPointerCapture(e.pointerId),v(e))},[v]),x=a(e=>{t.current&&(t.current.onpointermove=null,t.current.releasePointerCapture(e.pointerId),f.current(),f.current=()=>{})},[]);return{sliderProps:{tabIndex:0,onPointerDown:y,onPointerUp:x,onKeyDown:e=>{var t,n;e.key!==d.Tab&&e.preventDefault();let r=e.shiftKey?m:g;switch(e.key){case d.ArrowLeft:case d.ArrowDown:null==o||o(-r);break;case d.ArrowRight:case d.ArrowUp:null==o||o(r);break;case d.Home:"vertical"!==h.direction&&"horizontal"!==h.direction||null===(t=h.onChange)||void 0===t||t.call(h,u);break;case d.End:"vertical"!==h.direction&&"horizontal"!==h.direction||null===(n=h.onChange)||void 0===n||n.call(h,c);break;default:return}},onPointerCancel:x,role:"slider","aria-valuemin":u,"aria-valuemax":c,"aria-label":l,"aria-valuenow":s,"aria-valuetext":i}}},h=(e,t,n=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=n&&e<=t,f=e=>{const{h:t,s:n,v:r}=(({h:e,s:t,v:n})=>({h:g(e,359,0),s:g(t,100,0),v:g(n,100,0)}))(e);let a=r/100,o=n/100*a,l=t/60,s=o*(1-Math.abs(l%2-1)),i=a-o;return o=255*(o+i)|0,s=255*(s+i)|0,i=255*i|0,l>=0&&l<1?{r:o,g:s,b:i}:l>=1&&l<2?{r:s,g:o,b:i}:l>=2&&l<3?{r:i,g:o,b:s}:l>=3&&l<4?{r:i,g:s,b:o}:l>=4&&l<5?{r:s,g:i,b:o}:l>=5&&l<6?{r:o,g:i,b:s}:{r:0,g:0,b:0}},v=({h:e,s:t,v:n})=>{let{r:r,g:a,b:o}=f({h:e,s:t,v:n});return x({r:r,g:a,b:o})},y=e=>{const{r:t,g:n,b:r}=(({r:e,g:t,b:n})=>({r:g(e,255,0),g:g(t,255,0),b:g(n,255,0)}))(e);let a=t/255,o=n/255,l=r/255,s=Math.max(a,o,l),i=s-Math.min(a,o,l),c=0,u=0,d=0;return i&&(s===a&&(c=(o-l)/i),s===o&&(c=2+(l-a)/i),s===l&&(c=4+(a-o)/i),s&&(u=i/s)),c=60*c|0,c<0&&(c+=360),u=100*u|0,d=100*s|0,{h:c,s:u,v:d}},x=({r:e,g:t,b:n},r=!0)=>(r?"#":"")+((1<<24)+(e<<16)+(t<<8)+n).toString(16).slice(1),_=e=>e.a<100?(({r:e,g:t,b:n,a:r})=>"number"==typeof r&&!1===isNaN(r)?`rgba(${e}, ${t}, ${n}, ${g(r,100,0)/100})`:`rgb(${e}, ${t}, ${n})`)(e):x(e),w={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},A=(e,t,n)=>{(e=>h(e,255))(n)&&e(e=>{const{r:r,g:a,b:o,a:l}=Object.assign(Object.assign({},e),{[t]:n}),{h:s,s:i,v:c}=y({r:r,g:a,b:o});return{r:r,g:a,b:o,a:l,h:s,s:i,v:c,hex:x({r:r,g:a,b:o},!1),str:_({r:r,g:a,b:o,a:l})}})},E=(e,t,n,r=100)=>{h(n,r)&&e(e=>{const{h:r,s:a,v:o,a:l}=Object.assign(Object.assign({},e),{[t]:n}),{r:s,g:i,b:c}=f({h:r,s:a,v:o});return{h:r,s:a,v:o,r:s,g:i,b:c,a:l,hex:x({r:s,g:i,b:c},!1),str:_({r:s,g:i,b:c,a:l})}})},C=(e,t,n,r=100)=>{e(e=>{const{h:a,s:o,v:l,a:s}=Object.assign(Object.assign({},e),{[t]:g(e[t]+n,r,0)}),{r:i,g:c,b:u}=f({h:a,s:o,v:l});return{h:a,s:o,v:l,r:i,g:c,b:u,a:s,hex:x({r:i,g:c,b:u},!1),str:_({r:i,g:c,b:u,a:s})}})},k=e=>{const[r,a]=t(e.defaultValue||w);n(()=>{e.value&&a(e.value)},[JSON.stringify(e.value)]);const o=t=>{if("function"==typeof e.onChange){if(void 0!==e.value)return void e.onChange("function"==typeof t?t(r):t);e.onChange("function"==typeof t?t(r):t)}a(t)};return{setH:e=>E(o,"h",e,359),setS:e=>E(o,"s",e),setV:e=>E(o,"v",e),setR:e=>A(o,"r",e),setG:e=>A(o,"g",e),setB:e=>A(o,"b",e),setA:e=>{h(e,100)&&o(t=>{const n=Object.assign(Object.assign({},t),{a:e});return n.str=_(n),n})},setSV:(e,t)=>{(h(e,100)||h(t,100))&&o(n=>{const{h:r,a:a}=n,{r:o,g:l,b:s}=f({h:r,s:e,v:t}),i=x({r:o,g:l,b:s},!1),c=_({r:o,g:l,b:s,a:a});return{h:r,s:e,v:t,r:o,g:l,b:s,a:a,hex:i,str:c}})},setHex:(e,t={r:r.r,g:r.g,b:r.b})=>{o(({a:n})=>{const{r:r,g:a,b:o}=((e,t=null)=>!0!==(e=>/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(e))(e)?t:("#"===e[0]&&(e=e.slice(1,e.length)),3===e.length&&(e=e.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3")),{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16)}))(e,t),{h:l,s:s,v:i}=y({r:r,g:a,b:o}),c=_({r:r,g:a,b:o,a:n});return{r:r,g:a,b:o,h:l,s:s,v:i,hex:e,a:n,str:c}})},rotateH:e=>C(o,"h",e,359),rotateS:e=>C(o,"s",e),rotateV:e=>C(o,"v",e),rotateA:e=>{o(t=>Object.assign(Object.assign({},t),{a:g(t.a+e,100,0)}))},color:r,getSolidColor:()=>v({h:r.h,s:100,v:100})}};function O(e){if(!e)return;return j(e)||function(e){if("#"===e[0]&&7===e.length&&/^#[\da-fA-F]{6}$/.test(e))return{r:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16),a:100}}(e)||function(e){if("#"===e[0]&&4===e.length&&/^#[\da-fA-F]{3}$/.test(e))return{r:parseInt(e[1]+e[1],16),g:parseInt(e[2]+e[2],16),b:parseInt(e[3]+e[3],16),a:100}}(e)||function(e){const t=e.match(/^hsl(a?)\(([\d., ]+)\)$/);if(t){const e=!!t[1],n=e?4:3,r=t[2].split(/ *, */).map(Number);if(r.length===n){const t=(({h:e,s:t,l:n})=>{let r=n/100,a=t/100*(1-Math.abs(2*r-1)),o=e/60,l=a*(1-Math.abs(o%2-1)),s=r-a/2;return a=255*(a+s)|0,l=255*(l+s)|0,s=255*s|0,o>=0&&o<1?{r:a,g:l,b:s}:o>=1&&o<2?{r:l,g:a,b:s}:o>=2&&o<3?{r:s,g:a,b:l}:o>=3&&o<4?{r:s,g:l,b:a}:o>=4&&o<5?{r:l,g:s,b:a}:o>=5&&o<6?{r:a,g:s,b:l}:{r:0,g:0,b:0}})({h:r[0],s:r[1],l:r[2]});return t.a=e?100*r[3]:100,t}}}(e)||function(e){if("undefined"==typeof document)return;const t=document.createElement("div");t.style.backgroundColor=e,t.style.position="absolute",t.style.top="-9999px",t.style.left="-9999px",t.style.height="1px",t.style.width="1px",document.body.appendChild(t);const n=getComputedStyle(t),r=n&&n.backgroundColor;if(document.body.removeChild(t),"rgba(0, 0, 0, 0)"!==r&&"transparent"!==r)return j(r);switch(e.trim()){case"transparent":case"#0000":case"#00000000":return{r:0,g:0,b:0,a:0}}}(e)}function j(e){if(!e)return;const t=e.match(/^rgb(a?)\(([\d., ]+)\)$/);if(t){const e=!!t[1],n=e?4:3,r=t[2].split(/ *, */).map(Number);if(r.length===n)return{r:r[0],g:r[1],b:r[2],a:e?100*r[3]:100}}}function S(e){const t=O(e);if(t)return Object.assign(Object.assign({},(({r:e,g:t,b:n,a:r})=>{const{h:a,s:o,v:l}=y({r:e,g:t,b:n});return{r:e,g:t,b:n,a:r,h:a,s:o,v:l,hex:x({r:e,g:t,b:n},!1),str:_({r:e,g:t,b:n,a:r})}})(t)),{str:e})}function P(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var N={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};P(".styles-module_container__2LiHz {\n  position: relative;\n  width: 220px;\n  height: 220px;\n}\n\n.styles-module_container__2LiHz:focus {\n  outline: 2px solid #09f;\n}\n\n.styles-module_light__367NS {\n  background: linear-gradient(to right, white 0%, transparent 100%);\n}\n\n.styles-module_dark__2oP9R {\n  background: linear-gradient(to bottom, transparent 0, #000 100%);\n}\n");var V={thumb:"common-module_thumb__3Kyme",overlay:"common-module_overlay__3Oki6",vHidden:"common-module_vHidden__kcR2k",transBackground:"common-module_transBackground__2AOKu"};P(".common-module_thumb__3Kyme {\n  z-index: 10;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: white;\n  border: 2px solid white;\n  border-radius: 6px;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.common-module_overlay__3Oki6 {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n.common-module_vHidden__kcR2k {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n  word-wrap: normal;\n}\n\n.common-module_transBackground__2AOKu {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==);\n}\n");var H="styles-module_label__XgqtI",I="styles-module_input__2EvWe",B="styles-module_select__3Z7Hr";P('.styles-module_label__XgqtI {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n}\n\n.styles-module_label__XgqtI:not(:last-child) {\n  margin-right: 4px;\n}\n\n.styles-module_input__2EvWe {\n  border: 1px solid #dcdbdb;\n  border-radius: 3px;\n  /* max-width: 100%; */\n  height: 24px;\n  padding: 3px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.styles-module_input__2EvWe:focus {\n  outline: none;\n  border: 1px solid rgb(51, 154, 223);\n}\n\n/* .input:not(:last-child) {\n  margin-right: 4px;\n} */\n\n.styles-module_input__2EvWe::-webkit-outer-spin-button,\n.styles-module_input__2EvWe::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input__2EvWe[type="number"] {\n  -moz-appearance: textfield;\n}\n\n.styles-module_select__3Z7Hr {\n  border-radius: 3px;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n}\n\n.styles-module_select__3Z7Hr:hover,\n.styles-module_select__3Z7Hr:focus {\n  background: #eee;\n}\n');const F=({label:t,value:n,onChange:r,max:a=255,type:o="number"})=>e.createElement("label",{className:H},e.createElement("input",{className:I,value:n,type:o,min:0,max:a,onChange:r}),e.createElement("span",{style:{fontSize:"12px",fontWeight:500}},t)),$=["hex","rgba","hsva"];var U={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};P(".styles-module_container__3YAfB {\n  position: relative;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset;\n  border-radius: 2px;\n  min-width: 160px;\n  height: 12px;\n}\n\n.styles-module_container__3YAfB:focus {\n  outline: 1px solid #09f;\n}\n\n.styles-module_thumb__3_gF5 {\n  top: 50%;\n}\n\n.styles-module_sliderOverlay__3dabP {\n  border-radius: 2px;\n}\n");const D=o(t=>{var n=i(t,[]);const a=T(),o=r(null),{sliderProps:l}=(({state:e,ref:t})=>{const{sliderProps:n}=m({ref:t,direction:"horizontal",onChange:t=>e.setA(t),onStep:t=>e.rotateA(t),maxValue:100,ariaLabel:"Alpha slider",ariaValueNow:e.color.a,ariaValueText:String(e.color.a)});return{sliderProps:n}})({ref:o,state:a});return e.createElement("div",Object.assign({},n,l,{className:[U.container,V.transBackground,n.className||""].join(" "),ref:o}),e.createElement("div",{className:[V.overlay,U.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${a.color.hex})`}}),e.createElement("div",{className:[V.thumb,U.thumb].join(" "),style:{left:100*a.color.a/100+"%",background:a.color.str}}))}),L={background:`linear-gradient(${["to left","red 0","#f09 10%","#cd00ff 20%","#3200ff 30%","#06f 40%","#00fffd 50%","#0f6 60%","#35ff00 70%","#cdff00 80%","#f90 90%","red 100%"].join(",")})`},R=o(t=>{var n=i(t,[]);const a=T(),o=r(null),{sliderProps:l}=(({state:e,ref:t})=>{const{sliderProps:n}=m({ref:t,direction:"horizontal",onChange:t=>e.setH(t),onStep:t=>e.rotateH(t),maxValue:359,ariaLabel:"Hue slider",ariaValueNow:e.color.h,ariaValueText:String(e.color.h)});return{sliderProps:n}})({ref:o,state:a});return e.createElement("div",Object.assign({},n,l,{className:[U.container,n.className||""].join(" "),style:Object.assign(Object.assign({},L),n.style),ref:o}),e.createElement("div",{className:[V.thumb,U.thumb].join(" "),style:{left:100*a.color.h/359+"%",background:a.getSolidColor()}}))}),z=e.createContext({}),T=()=>l(z),K=e=>"string"==typeof e?S(e):(e=>"object"==typeof e&&"r"in e&&"g"in e&&"b"in e)(e)?S(x(e)):(e=>"object"==typeof e&&"h"in e&&"s"in e&&"v"in e)(e)?S(v(e)):void 0,M=s((t,n)=>{var{defaultValue:r,onChange:a,value:o}=t,l=i(t,["defaultValue","onChange","value"]);const s=k({defaultValue:K(r),value:K(o),onChange:e=>null==a?void 0:a({rgb:{r:e.r,g:e.g,b:e.b},hsv:{h:e.h,s:e.s,v:e.v},alpha:e.a,string:e.str})});return e.createElement(z.Provider,{value:s},e.createElement("div",Object.assign({role:"group",ref:n},l),l.children))});M.Board=t=>{var n=i(t,[]);const a=T(),o=r(null),{containerProps:l,descriptionProps:s}=(({state:e,ref:t,ariaDescription:n="Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.",ariaLabel:a="Saturation and brightness",ariaValueFormat:o="Saturation {0} brightness {1}"})=>{const l=r(!1),s=e.color,i=o.replace("{0}",String(s.s)).replace("{1}",String(s.v)),{sliderProps:c}=m({ref:t,maxValue:100,direction:"both",ariaLabel:a,ariaValueText:i,ariaValueNow:l.current?s.s:s.v,onChange({x:t,y:n}){n=100-n,e.setSV(t,n)}});return{containerProps:Object.assign(Object.assign({},c),{onKeyDown:t=>{t.key!==d.Tab&&t.preventDefault();const n=t.shiftKey?10:1;switch(t.key){case d.ArrowUp:l.current=!1,e.rotateV(n);break;case d.ArrowDown:l.current=!1,e.rotateV(-n);break;case d.ArrowLeft:l.current=!0,e.rotateS(-n);break;case d.ArrowRight:l.current=!0,e.rotateS(n);break;case d.Home:l.current=!0,e.setS(0);break;case d.End:l.current=!0,e.setS(100);break;case d.PageUp:l.current=!1,e.setV(100);break;case d.PageDown:l.current=!1,e.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:n}}})({state:a,ref:o});return e.createElement("div",Object.assign({className:[N.container,n.className||""].join(" ")},n,l,{style:Object.assign({background:a.getSolidColor()},n.style),ref:o}),e.createElement("div",Object.assign({className:V.vHidden},s)),e.createElement("div",{style:{left:a.color.s+"%",top:100-a.color.v+"%",backgroundColor:"#"+a.color.hex},className:V.thumb}),e.createElement("div",{className:[V.overlay,N.light].join(" ")}),e.createElement("div",{className:[V.overlay,N.dark].join(" ")}))},M.HueSlider=R,M.AlphaSlider=D,M.Preview=t=>{var n=i(t,[]);const r=T();return e.createElement("div",Object.assign({},n,{className:[V.transBackground,n.className||""].join(" "),style:Object.assign({display:"inline-block",backgroundImage:"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)"},n.style)}),e.createElement("div",{style:{boxShadow:"rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset",backgroundColor:r.color.str,width:"40px",height:"40px"}}))},M.Params=({})=>{const n=T(),[r,a]=t("hex"),o=e=>{n.setA(parseFloat(e.target.value))};return e.createElement("div",{style:{display:"flex",marginTop:"10px",alignItems:"center"}},e.createElement("div",{style:{display:"flex",flex:1,justifyContent:"space-between",marginRight:"10px"}},"rgba"===r&&e.createElement(e.Fragment,null,e.createElement(F,{label:"R",onChange:e=>{n.setR(parseFloat(e.target.value))},value:n.color.r}),e.createElement(F,{label:"G",onChange:e=>{n.setG(parseFloat(e.target.value))},value:n.color.g}),e.createElement(F,{label:"B",onChange:e=>{n.setB(parseFloat(e.target.value))},value:n.color.b}),e.createElement(F,{label:"A",onChange:o,value:n.color.a,max:100})),"hsva"===r&&e.createElement(e.Fragment,null,e.createElement(F,{label:"H",onChange:e=>{n.setH(parseFloat(e.target.value))},value:n.color.h}),e.createElement(F,{label:"S",onChange:e=>{n.setS(parseFloat(e.target.value))},value:n.color.s}),e.createElement(F,{label:"V",onChange:e=>{n.setV(parseFloat(e.target.value))},value:n.color.v}),e.createElement(F,{label:"A",onChange:o,value:n.color.a,max:100})),"hex"===r&&e.createElement(F,{type:"text",label:"Hex",onChange:e=>{n.setHex(e.target.value)},value:n.color.hex})),e.createElement("button",{"aria-label":"Change color mode",className:B,style:{marginLeft:"auto"},onClick:()=>{const e=$.indexOf(r),t=e===$.length-1?0:e+1;a($[t])}},e.createElement("svg",{width:"12px",height:"12px",viewBox:"0 0 16 16",focusable:"false"},e.createElement("path",{fill:"currentColor",d:"M11.891 9.992a1 1 0 1 1 1.416 1.415l-4.3 4.3a1 1 0 0 1-1.414 0l-4.3-4.3A1 1 0 0 1 4.71 9.992l3.59 3.591 3.591-3.591zm0-3.984L8.3 2.417 4.709 6.008a1 1 0 0 1-1.416-1.415l4.3-4.3a1 1 0 0 1 1.414 0l4.3 4.3a1 1 0 1 1-1.416 1.415z"}))))};var Y="index-module_container__p6aGD";P(".index-module_container__p6aGD {\n  padding: 10px;\n  border-radius: 6px;\n  border: 1px solid #dcdbdb;\n  display: inline-flex;\n  flex-direction: column;\n  gap: 10px;\n  font-family: sans-serif;\n  background: white;\n}\n");const G=s((t,n)=>{var{showPreview:r=!0,showParams:a=!1}=t,o=i(t,["showPreview","showParams"]);return e.createElement(M,Object.assign({},o,{className:Y}),e.createElement(M.Board,null),e.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",gap:10}},e.createElement("div",{style:{flex:1,gap:10,display:"flex",flexDirection:"column"}},e.createElement(M.HueSlider,null),e.createElement(M.AlphaSlider,null)),r&&e.createElement(M.Preview,null)),a&&e.createElement(M.Params,null))});export default G;export{M as ColorPicker};
+import e,{useState as t,useEffect as n,useRef as r,useCallback as a,memo as o,useContext as l,forwardRef as s}from"react";function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}var c,u;(u=c||(c={})).PageUp="PageUp",u.PageDown="PageDown",u.End="End",u.Home="Home",u.ArrowLeft="ArrowLeft",u.ArrowUp="ArrowUp",u.ArrowRight="ArrowRight",u.ArrowDown="ArrowDown",u.Tab="Tab";var d=c;function g(e=0,t,n=0){return e<n?n:e>t?t:e}const b=(e,t,n,r)=>{let a=(e.clientX-t.left)/t.width;return a=g(Math.round(a*n),n,r),a},p=(e,t,n,r)=>{let a=(e.clientY-t.top)/t.height;return a=g(Math.round(a*n),n,r),a},m=e=>{var{ref:t,onStep:o,ariaLabel:l,ariaValueNow:s,ariaValueText:i,maxValue:c=100,minValue:u=0,step:g=1,bigStep:m=10}=e,h=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(e,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const v=r(()=>{});n(()=>v.current,[]);const f=a(e=>{if(!t.current||"function"!=typeof h.onChange)return;e.preventDefault();const n=t.current.getBoundingClientRect();if("both"===h.direction){let t=b(e,n,c,u),r=p(e,n,c,u);return h.onChange({x:t,y:r})}if("horizontal"===h.direction){let t=b(e,n,c,u);return h.onChange(t)}if("vertical"===h.direction){let t=p(e,n,c,u);return h.onChange(t)}},[h.direction,h.onChange]),y=a(e=>{var n;t.current&&(e.preventDefault(),v.current=(()=>{const e=e=>{e.preventDefault()};return window.addEventListener("touchmove",e,{passive:!1,capture:!0}),()=>{window.removeEventListener("touchmove",e,{capture:!0})}})(),t.current.focus(),t.current.onpointermove=f,null===(n=t.current)||void 0===n||n.setPointerCapture(e.pointerId),f(e))},[f]),x=a(e=>{t.current&&(t.current.onpointermove=null,t.current.releasePointerCapture(e.pointerId),v.current(),v.current=()=>{})},[]);return{sliderProps:{tabIndex:0,onPointerDown:y,onPointerUp:x,onKeyDown:e=>{var t,n;e.key!==d.Tab&&e.preventDefault();let r=e.shiftKey?m:g;switch(e.key){case d.ArrowLeft:case d.ArrowDown:null==o||o(-r);break;case d.ArrowRight:case d.ArrowUp:null==o||o(r);break;case d.Home:"vertical"!==h.direction&&"horizontal"!==h.direction||null===(t=h.onChange)||void 0===t||t.call(h,u);break;case d.End:"vertical"!==h.direction&&"horizontal"!==h.direction||null===(n=h.onChange)||void 0===n||n.call(h,c);break;default:return}},onPointerCancel:x,role:"slider","aria-valuemin":u,"aria-valuemax":c,"aria-label":l,"aria-valuenow":s,"aria-valuetext":i}}},h=(e,t,n=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=n&&e<=t,v=e=>{const{h:t,s:n,v:r}=(({h:e,s:t,v:n})=>({h:g(e,359,0),s:g(t,100,0),v:g(n,100,0)}))(e);let a=r/100,o=n/100*a,l=t/60,s=o*(1-Math.abs(l%2-1)),i=a-o;return o=255*(o+i)|0,s=255*(s+i)|0,i=255*i|0,l>=0&&l<1?{r:o,g:s,b:i}:l>=1&&l<2?{r:s,g:o,b:i}:l>=2&&l<3?{r:i,g:o,b:s}:l>=3&&l<4?{r:i,g:s,b:o}:l>=4&&l<5?{r:s,g:i,b:o}:l>=5&&l<6?{r:o,g:i,b:s}:{r:0,g:0,b:0}},f=({h:e,s:t,v:n})=>{let{r:r,g:a,b:o}=v({h:e,s:t,v:n});return x({r:r,g:a,b:o})},y=e=>{const{r:t,g:n,b:r}=(({r:e,g:t,b:n})=>({r:g(e,255,0),g:g(t,255,0),b:g(n,255,0)}))(e);let a=t/255,o=n/255,l=r/255,s=Math.max(a,o,l),i=s-Math.min(a,o,l),c=0,u=0,d=0;return i&&(s===a&&(c=(o-l)/i),s===o&&(c=2+(l-a)/i),s===l&&(c=4+(a-o)/i),s&&(u=i/s)),c=60*c|0,c<0&&(c+=360),u=100*u|0,d=100*s|0,{h:c,s:u,v:d}},x=({r:e,g:t,b:n},r=!0)=>(r?"#":"")+((1<<24)+(e<<16)+(t<<8)+n).toString(16).slice(1),_=e=>e.a<100?(({r:e,g:t,b:n,a:r})=>"number"==typeof r&&!1===isNaN(r)?`rgba(${e}, ${t}, ${n}, ${g(r,100,0)/100})`:`rgb(${e}, ${t}, ${n})`)(e):x(e),w={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},A=(e,t,n)=>{(e=>h(e,255))(n)&&e(e=>{const{r:r,g:a,b:o,a:l}=Object.assign(Object.assign({},e),{[t]:n}),{h:s,s:i,v:c}=y({r:r,g:a,b:o});return{r:r,g:a,b:o,a:l,h:s,s:i,v:c,hex:x({r:r,g:a,b:o},!1),str:_({r:r,g:a,b:o,a:l})}})},E=(e,t,n,r=100)=>{h(n,r)&&e(e=>{const{h:r,s:a,v:o,a:l}=Object.assign(Object.assign({},e),{[t]:n}),{r:s,g:i,b:c}=v({h:r,s:a,v:o});return{h:r,s:a,v:o,r:s,g:i,b:c,a:l,hex:x({r:s,g:i,b:c},!1),str:_({r:s,g:i,b:c,a:l})}})},k=(e,t,n,r=100)=>{e(e=>{const{h:a,s:o,v:l,a:s}=Object.assign(Object.assign({},e),{[t]:g(e[t]+n,r,0)}),{r:i,g:c,b:u}=v({h:a,s:o,v:l});return{h:a,s:o,v:l,r:i,g:c,b:u,a:s,hex:x({r:i,g:c,b:u},!1),str:_({r:i,g:c,b:u,a:s})}})},C=e=>{const[r,a]=t(e.defaultValue||w);n(()=>{e.value&&a(e.value)},[JSON.stringify(e.value)]);const o=t=>{if("function"==typeof e.onChange){if(void 0!==e.value)return void e.onChange("function"==typeof t?t(r):t);e.onChange("function"==typeof t?t(r):t)}a(t)};return{setH:e=>E(o,"h",e,359),setS:e=>E(o,"s",e),setV:e=>E(o,"v",e),setR:e=>A(o,"r",e),setG:e=>A(o,"g",e),setB:e=>A(o,"b",e),setA:e=>{h(e,100)&&o(t=>{const n=Object.assign(Object.assign({},t),{a:e});return n.str=_(n),n})},setSV:(e,t)=>{(h(e,100)||h(t,100))&&o(n=>{const{h:r,a:a}=n,{r:o,g:l,b:s}=v({h:r,s:e,v:t}),i=x({r:o,g:l,b:s},!1),c=_({r:o,g:l,b:s,a:a});return{h:r,s:e,v:t,r:o,g:l,b:s,a:a,hex:i,str:c}})},setHex:(e,t={r:r.r,g:r.g,b:r.b})=>{o(({a:n})=>{const{r:r,g:a,b:o}=((e,t=null)=>!0!==(e=>/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(e))(e)?t:("#"===e[0]&&(e=e.slice(1,e.length)),3===e.length&&(e=e.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3")),{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16)}))(e,t),{h:l,s:s,v:i}=y({r:r,g:a,b:o}),c=_({r:r,g:a,b:o,a:n});return{r:r,g:a,b:o,h:l,s:s,v:i,hex:e,a:n,str:c}})},rotateH:e=>k(o,"h",e,359),rotateS:e=>k(o,"s",e),rotateV:e=>k(o,"v",e),rotateA:e=>{o(t=>Object.assign(Object.assign({},t),{a:g(t.a+e,100,0)}))},color:r,getSolidColor:()=>f({h:r.h,s:100,v:100})}};function O(e){if(!e)return;return j(e)||function(e){if("#"===e[0]&&7===e.length&&/^#[\da-fA-F]{6}$/.test(e))return{r:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16),a:100}}(e)||function(e){if("#"===e[0]&&4===e.length&&/^#[\da-fA-F]{3}$/.test(e))return{r:parseInt(e[1]+e[1],16),g:parseInt(e[2]+e[2],16),b:parseInt(e[3]+e[3],16),a:100}}(e)||function(e){const t=e.match(/^hsl(a?)\(([\d., ]+)\)$/);if(t){const e=!!t[1],n=e?4:3,r=t[2].split(/ *, */).map(Number);if(r.length===n){const t=(({h:e,s:t,l:n})=>{let r=n/100,a=t/100*(1-Math.abs(2*r-1)),o=e/60,l=a*(1-Math.abs(o%2-1)),s=r-a/2;return a=255*(a+s)|0,l=255*(l+s)|0,s=255*s|0,o>=0&&o<1?{r:a,g:l,b:s}:o>=1&&o<2?{r:l,g:a,b:s}:o>=2&&o<3?{r:s,g:a,b:l}:o>=3&&o<4?{r:s,g:l,b:a}:o>=4&&o<5?{r:l,g:s,b:a}:o>=5&&o<6?{r:a,g:s,b:l}:{r:0,g:0,b:0}})({h:r[0],s:r[1],l:r[2]});return t.a=e?100*r[3]:100,t}}}(e)||function(e){if("undefined"==typeof document)return;const t=document.createElement("div");t.style.backgroundColor=e,t.style.position="absolute",t.style.top="-9999px",t.style.left="-9999px",t.style.height="1px",t.style.width="1px",document.body.appendChild(t);const n=getComputedStyle(t),r=n&&n.backgroundColor;if(document.body.removeChild(t),"rgba(0, 0, 0, 0)"!==r&&"transparent"!==r)return j(r);switch(e.trim()){case"transparent":case"#0000":case"#00000000":return{r:0,g:0,b:0,a:0}}}(e)}function j(e){if(!e)return;const t=e.match(/^rgb(a?)\(([\d., ]+)\)$/);if(t){const e=!!t[1],n=e?4:3,r=t[2].split(/ *, */).map(Number);if(r.length===n)return{r:r[0],g:r[1],b:r[2],a:e?100*r[3]:100}}}function P(e){const t=O(e);if(t)return Object.assign(Object.assign({},(({r:e,g:t,b:n,a:r})=>{const{h:a,s:o,v:l}=y({r:e,g:t,b:n});return{r:e,g:t,b:n,a:r,h:a,s:o,v:l,hex:x({r:e,g:t,b:n},!1),str:_({r:e,g:t,b:n,a:r})}})(t)),{str:e})}function S(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var N={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};S(".styles-module_container__2LiHz {\n  position: relative;\n  width: 220px;\n  height: 220px;\n}\n\n.styles-module_container__2LiHz:focus {\n  outline: 2px solid #09f;\n}\n\n.styles-module_light__367NS {\n  background: linear-gradient(to right, white 0%, transparent 100%);\n}\n\n.styles-module_dark__2oP9R {\n  background: linear-gradient(to bottom, transparent 0, #000 100%);\n}\n");var V={thumb:"common-module_thumb__3Kyme",overlay:"common-module_overlay__3Oki6",vHidden:"common-module_vHidden__kcR2k",transBackground:"common-module_transBackground__2AOKu"};S(".common-module_thumb__3Kyme {\n  z-index: 10;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: white;\n  border: 2px solid white;\n  border-radius: 6px;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.common-module_overlay__3Oki6 {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n.common-module_vHidden__kcR2k {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n  word-wrap: normal;\n}\n\n.common-module_transBackground__2AOKu {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==);\n}\n");var H="styles-module_label__XgqtI",I="styles-module_input__2EvWe",B="styles-module_select__3Z7Hr";S('.styles-module_label__XgqtI {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n}\n\n.styles-module_label__XgqtI:not(:last-child) {\n  margin-right: 4px;\n}\n\n.styles-module_input__2EvWe {\n  border: 1px solid #dcdbdb;\n  border-radius: 3px;\n  /* max-width: 100%; */\n  height: 24px;\n  padding: 3px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.styles-module_input__2EvWe:focus {\n  outline: none;\n  border: 1px solid rgb(51, 154, 223);\n}\n\n/* .input:not(:last-child) {\n  margin-right: 4px;\n} */\n\n.styles-module_input__2EvWe::-webkit-outer-spin-button,\n.styles-module_input__2EvWe::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input__2EvWe[type="number"] {\n  -moz-appearance: textfield;\n}\n\n.styles-module_select__3Z7Hr {\n  border-radius: 3px;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n}\n\n.styles-module_select__3Z7Hr:hover,\n.styles-module_select__3Z7Hr:focus {\n  background: #eee;\n}\n');const $=({label:t,value:n,onChange:r,max:a=255,type:o="number"})=>e.createElement("label",{className:H},e.createElement("input",{className:I,value:n,type:o,min:0,max:a,onChange:r}),e.createElement("span",{style:{fontSize:"12px",fontWeight:500}},t)),F=["hex","rgba","hsva"];var D={preview:"styles-module_preview__3oeBp"};S(".styles-module_preview__3oeBp {\n    display: inline-block;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset;\n    background-blend-mode: darken;\n    width: 40px;\n    height: 40px;\n}\n");var L={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};S(".styles-module_container__3YAfB {\n  position: relative;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset;\n  border-radius: 2px;\n  min-width: 160px;\n  height: 12px;\n}\n\n.styles-module_container__3YAfB:focus {\n  outline: 1px solid #09f;\n}\n\n.styles-module_thumb__3_gF5 {\n  top: 50%;\n}\n\n.styles-module_sliderOverlay__3dabP {\n  border-radius: 2px;\n}\n");const z=o(t=>{var n=i(t,[]);const a=K(),o=r(null),{sliderProps:l}=(({state:e,ref:t})=>{const{sliderProps:n}=m({ref:t,direction:"horizontal",onChange:t=>e.setA(t),onStep:t=>e.rotateA(t),maxValue:100,ariaLabel:"Alpha slider",ariaValueNow:e.color.a,ariaValueText:String(e.color.a)});return{sliderProps:n}})({ref:o,state:a});return e.createElement("div",Object.assign({},n,l,{className:[L.container,V.transBackground,n.className||""].join(" "),ref:o}),e.createElement("div",{className:[V.overlay,L.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${a.color.hex})`}}),e.createElement("div",{className:[V.thumb,L.thumb].join(" "),style:{left:100*a.color.a/100+"%",background:a.color.str}}))}),R={background:`linear-gradient(${["to left","red 0","#f09 10%","#cd00ff 20%","#3200ff 30%","#06f 40%","#00fffd 50%","#0f6 60%","#35ff00 70%","#cdff00 80%","#f90 90%","red 100%"].join(",")})`},U=o(t=>{var n=i(t,[]);const a=K(),o=r(null),{sliderProps:l}=(({state:e,ref:t})=>{const{sliderProps:n}=m({ref:t,direction:"horizontal",onChange:t=>e.setH(t),onStep:t=>e.rotateH(t),maxValue:359,ariaLabel:"Hue slider",ariaValueNow:e.color.h,ariaValueText:String(e.color.h)});return{sliderProps:n}})({ref:o,state:a});return e.createElement("div",Object.assign({},n,l,{className:[L.container,n.className||""].join(" "),style:Object.assign(Object.assign({},R),n.style),ref:o}),e.createElement("div",{className:[V.thumb,L.thumb].join(" "),style:{left:100*a.color.h/359+"%",background:a.getSolidColor()}}))}),T=e.createContext({}),K=()=>l(T),M=e=>"string"==typeof e?P(e):(e=>"object"==typeof e&&"r"in e&&"g"in e&&"b"in e)(e)?P(x(e)):(e=>"object"==typeof e&&"h"in e&&"s"in e&&"v"in e)(e)?P(f(e)):void 0,W=s((t,n)=>{var{defaultValue:r,onChange:a,value:o}=t,l=i(t,["defaultValue","onChange","value"]);const s=C({defaultValue:M(r),value:M(o),onChange:e=>null==a?void 0:a({rgb:{r:e.r,g:e.g,b:e.b},hsv:{h:e.h,s:e.s,v:e.v},alpha:e.a,string:e.str})});return e.createElement(T.Provider,{value:s},e.createElement("div",Object.assign({role:"group",ref:n},l),l.children))});W.Board=t=>{var n=i(t,[]);const a=K(),o=r(null),{containerProps:l,descriptionProps:s}=(({state:e,ref:t,ariaDescription:n="Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.",ariaLabel:a="Saturation and brightness",ariaValueFormat:o="Saturation {0} brightness {1}"})=>{const l=r(!1),s=e.color,i=o.replace("{0}",String(s.s)).replace("{1}",String(s.v)),{sliderProps:c}=m({ref:t,maxValue:100,direction:"both",ariaLabel:a,ariaValueText:i,ariaValueNow:l.current?s.s:s.v,onChange({x:t,y:n}){n=100-n,e.setSV(t,n)}});return{containerProps:Object.assign(Object.assign({},c),{onKeyDown:t=>{t.key!==d.Tab&&t.preventDefault();const n=t.shiftKey?10:1;switch(t.key){case d.ArrowUp:l.current=!1,e.rotateV(n);break;case d.ArrowDown:l.current=!1,e.rotateV(-n);break;case d.ArrowLeft:l.current=!0,e.rotateS(-n);break;case d.ArrowRight:l.current=!0,e.rotateS(n);break;case d.Home:l.current=!0,e.setS(0);break;case d.End:l.current=!0,e.setS(100);break;case d.PageUp:l.current=!1,e.setV(100);break;case d.PageDown:l.current=!1,e.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:n}}})({state:a,ref:o});return e.createElement("div",Object.assign({className:[N.container,n.className||""].join(" ")},n,l,{style:Object.assign({background:a.getSolidColor()},n.style),ref:o}),e.createElement("div",Object.assign({className:V.vHidden},s)),e.createElement("div",{style:{left:a.color.s+"%",top:100-a.color.v+"%",backgroundColor:"#"+a.color.hex},className:V.thumb}),e.createElement("div",{className:[V.overlay,N.light].join(" ")}),e.createElement("div",{className:[V.overlay,N.dark].join(" ")}))},W.HueSlider=U,W.AlphaSlider=z,W.Preview=t=>{var n=i(t,[]);const r=K();return e.createElement("div",Object.assign({},n,{className:[V.transBackground,D.preview,n.className||""].join(" "),style:Object.assign({backgroundColor:r.color.str},n.style)}))},W.Params=({})=>{const n=K(),[r,a]=t("hex"),o=e=>{n.setA(parseFloat(e.target.value))};return e.createElement("div",{style:{display:"flex",marginTop:"10px",alignItems:"center"}},e.createElement("div",{style:{display:"flex",flex:1,justifyContent:"space-between",marginRight:"10px"}},"rgba"===r&&e.createElement(e.Fragment,null,e.createElement($,{label:"R",onChange:e=>{n.setR(parseFloat(e.target.value))},value:n.color.r}),e.createElement($,{label:"G",onChange:e=>{n.setG(parseFloat(e.target.value))},value:n.color.g}),e.createElement($,{label:"B",onChange:e=>{n.setB(parseFloat(e.target.value))},value:n.color.b}),e.createElement($,{label:"A",onChange:o,value:n.color.a,max:100})),"hsva"===r&&e.createElement(e.Fragment,null,e.createElement($,{label:"H",onChange:e=>{n.setH(parseFloat(e.target.value))},value:n.color.h}),e.createElement($,{label:"S",onChange:e=>{n.setS(parseFloat(e.target.value))},value:n.color.s}),e.createElement($,{label:"V",onChange:e=>{n.setV(parseFloat(e.target.value))},value:n.color.v}),e.createElement($,{label:"A",onChange:o,value:n.color.a,max:100})),"hex"===r&&e.createElement($,{type:"text",label:"Hex",onChange:e=>{n.setHex(e.target.value)},value:n.color.hex})),e.createElement("button",{"aria-label":"Change color mode",className:B,style:{marginLeft:"auto"},onClick:()=>{const e=F.indexOf(r),t=e===F.length-1?0:e+1;a(F[t])}},e.createElement("svg",{width:"12px",height:"12px",viewBox:"0 0 16 16",focusable:"false"},e.createElement("path",{fill:"currentColor",d:"M11.891 9.992a1 1 0 1 1 1.416 1.415l-4.3 4.3a1 1 0 0 1-1.414 0l-4.3-4.3A1 1 0 0 1 4.71 9.992l3.59 3.591 3.591-3.591zm0-3.984L8.3 2.417 4.709 6.008a1 1 0 0 1-1.416-1.415l4.3-4.3a1 1 0 0 1 1.414 0l4.3 4.3a1 1 0 1 1-1.416 1.415z"}))))};var Y="index-module_container__p6aGD";S(".index-module_container__p6aGD {\n  padding: 10px;\n  border-radius: 6px;\n  border: 1px solid #dcdbdb;\n  display: inline-flex;\n  flex-direction: column;\n  gap: 10px;\n  font-family: sans-serif;\n  background: white;\n}\n");const G=s((t,n)=>{var{showPreview:r=!0,showParams:a=!1}=t,o=i(t,["showPreview","showParams"]);return e.createElement(W,Object.assign({},o,{className:Y}),e.createElement(W.Board,null),e.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",gap:10}},e.createElement("div",{style:{flex:1,gap:10,display:"flex",flexDirection:"column"}},e.createElement(W.HueSlider,null),e.createElement(W.AlphaSlider,null)),r&&e.createElement(W.Preview,null)),a&&e.createElement(W.Params,null))});export default G;export{W as ColorPicker};
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n,r,a=t(e);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(r=n||(n={})).PageUp="PageUp",r.PageDown="PageDown",r.End="End",r.Home="Home",r.ArrowLeft="ArrowLeft",r.ArrowUp="ArrowUp",r.ArrowRight="ArrowRight",r.ArrowDown="ArrowDown",r.Tab="Tab";var l=n;function s(e=0,t,n=0){return e<n?n:e>t?t:e}const i=(e,t,n,r)=>{let a=(e.clientX-t.left)/t.width;return a=s(Math.round(a*n),n,r),a},u=(e,t,n,r)=>{let a=(e.clientY-t.top)/t.height;return a=s(Math.round(a*n),n,r),a},c=t=>{var{ref:n,onStep:r,ariaLabel:a,ariaValueNow:o,ariaValueText:s,maxValue:c=100,minValue:d=0,step:g=1,bigStep:b=10}=t,p=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const m=e.useRef(()=>{});e.useEffect(()=>m.current,[]);const f=e.useCallback(e=>{if(!n.current||"function"!=typeof p.onChange)return;e.preventDefault();const t=n.current.getBoundingClientRect();if("both"===p.direction){let n=i(e,t,c,d),r=u(e,t,c,d);return p.onChange({x:n,y:r})}if("horizontal"===p.direction){let n=i(e,t,c,d);return p.onChange(n)}if("vertical"===p.direction){let n=u(e,t,c,d);return p.onChange(n)}},[p.direction,p.onChange]),h=e.useCallback(e=>{var t;n.current&&(e.preventDefault(),m.current=(()=>{const e=e=>{e.preventDefault()};return window.addEventListener("touchmove",e,{passive:!1,capture:!0}),()=>{window.removeEventListener("touchmove",e,{capture:!0})}})(),n.current.focus(),n.current.onpointermove=f,null===(t=n.current)||void 0===t||t.setPointerCapture(e.pointerId),f(e))},[f]),v=e.useCallback(e=>{n.current&&(n.current.onpointermove=null,n.current.releasePointerCapture(e.pointerId),m.current(),m.current=()=>{})},[]);return{sliderProps:{tabIndex:0,onPointerDown:h,onPointerUp:v,onKeyDown:e=>{var t,n;e.key!==l.Tab&&e.preventDefault();let a=e.shiftKey?b:g;switch(e.key){case l.ArrowLeft:case l.ArrowDown:null==r||r(-a);break;case l.ArrowRight:case l.ArrowUp:null==r||r(a);break;case l.Home:"vertical"!==p.direction&&"horizontal"!==p.direction||null===(t=p.onChange)||void 0===t||t.call(p,d);break;case l.End:"vertical"!==p.direction&&"horizontal"!==p.direction||null===(n=p.onChange)||void 0===n||n.call(p,c);break;default:return}},onPointerCancel:v,role:"slider","aria-valuemin":d,"aria-valuemax":c,"aria-label":a,"aria-valuenow":o,"aria-valuetext":s}}},d=(e,t,n=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=n&&e<=t,g=e=>{const{h:t,s:n,v:r}=(({h:e,s:t,v:n})=>({h:s(e,359,0),s:s(t,100,0),v:s(n,100,0)}))(e);let a=r/100,o=n/100*a,l=t/60,i=o*(1-Math.abs(l%2-1)),u=a-o;return o=255*(o+u)|0,i=255*(i+u)|0,u=255*u|0,l>=0&&l<1?{r:o,g:i,b:u}:l>=1&&l<2?{r:i,g:o,b:u}:l>=2&&l<3?{r:u,g:o,b:i}:l>=3&&l<4?{r:u,g:i,b:o}:l>=4&&l<5?{r:i,g:u,b:o}:l>=5&&l<6?{r:o,g:u,b:i}:{r:0,g:0,b:0}},b=({h:e,s:t,v:n})=>{let{r:r,g:a,b:o}=g({h:e,s:t,v:n});return m({r:r,g:a,b:o})},p=e=>{const{r:t,g:n,b:r}=(({r:e,g:t,b:n})=>({r:s(e,255,0),g:s(t,255,0),b:s(n,255,0)}))(e);let a=t/255,o=n/255,l=r/255,i=Math.max(a,o,l),u=i-Math.min(a,o,l),c=0,d=0,g=0;return u&&(i===a&&(c=(o-l)/u),i===o&&(c=2+(l-a)/u),i===l&&(c=4+(a-o)/u),i&&(d=u/i)),c=60*c|0,c<0&&(c+=360),d=100*d|0,g=100*i|0,{h:c,s:d,v:g}},m=({r:e,g:t,b:n},r=!0)=>(r?"#":"")+((1<<24)+(e<<16)+(t<<8)+n).toString(16).slice(1),f=e=>e.a<100?(({r:e,g:t,b:n,a:r})=>"number"==typeof r&&!1===isNaN(r)?`rgba(${e}, ${t}, ${n}, ${s(r,100,0)/100})`:`rgb(${e}, ${t}, ${n})`)(e):m(e),h={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},v=(e,t,n)=>{(e=>d(e,255))(n)&&e(e=>{const{r:r,g:a,b:o,a:l}=Object.assign(Object.assign({},e),{[t]:n}),{h:s,s:i,v:u}=p({r:r,g:a,b:o});return{r:r,g:a,b:o,a:l,h:s,s:i,v:u,hex:m({r:r,g:a,b:o},!1),str:f({r:r,g:a,b:o,a:l})}})},y=(e,t,n,r=100)=>{d(n,r)&&e(e=>{const{h:r,s:a,v:o,a:l}=Object.assign(Object.assign({},e),{[t]:n}),{r:s,g:i,b:u}=g({h:r,s:a,v:o});return{h:r,s:a,v:o,r:s,g:i,b:u,a:l,hex:m({r:s,g:i,b:u},!1),str:f({r:s,g:i,b:u,a:l})}})},x=(e,t,n,r=100)=>{e(e=>{const{h:a,s:o,v:l,a:i}=Object.assign(Object.assign({},e),{[t]:s(e[t]+n,r,0)}),{r:u,g:c,b:d}=g({h:a,s:o,v:l});return{h:a,s:o,v:l,r:u,g:c,b:d,a:i,hex:m({r:u,g:c,b:d},!1),str:f({r:u,g:c,b:d,a:i})}})},_=t=>{const[n,r]=e.useState(t.defaultValue||h);e.useEffect(()=>{t.value&&r(t.value)},[JSON.stringify(t.value)]);const a=e=>{if("function"==typeof t.onChange){if(void 0!==t.value)return void t.onChange("function"==typeof e?e(n):e);t.onChange("function"==typeof e?e(n):e)}r(e)};return{setH:e=>y(a,"h",e,359),setS:e=>y(a,"s",e),setV:e=>y(a,"v",e),setR:e=>v(a,"r",e),setG:e=>v(a,"g",e),setB:e=>v(a,"b",e),setA:e=>{d(e,100)&&a(t=>{const n=Object.assign(Object.assign({},t),{a:e});return n.str=f(n),n})},setSV:(e,t)=>{(d(e,100)||d(t,100))&&a(n=>{const{h:r,a:a}=n,{r:o,g:l,b:s}=g({h:r,s:e,v:t}),i=m({r:o,g:l,b:s},!1),u=f({r:o,g:l,b:s,a:a});return{h:r,s:e,v:t,r:o,g:l,b:s,a:a,hex:i,str:u}})},setHex:(e,t={r:n.r,g:n.g,b:n.b})=>{a(({a:n})=>{const{r:r,g:a,b:o}=((e,t=null)=>!0!==(e=>/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(e))(e)?t:("#"===e[0]&&(e=e.slice(1,e.length)),3===e.length&&(e=e.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3")),{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16)}))(e,t),{h:l,s:s,v:i}=p({r:r,g:a,b:o}),u=f({r:r,g:a,b:o,a:n});return{r:r,g:a,b:o,h:l,s:s,v:i,hex:e,a:n,str:u}})},rotateH:e=>x(a,"h",e,359),rotateS:e=>x(a,"s",e),rotateV:e=>x(a,"v",e),rotateA:e=>{a(t=>Object.assign(Object.assign({},t),{a:s(t.a+e,100,0)}))},color:n,getSolidColor:()=>b({h:n.h,s:100,v:100})}};function w(e){if(!e)return;return A(e)||function(e){if("#"===e[0]&&7===e.length&&/^#[\da-fA-F]{6}$/.test(e))return{r:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16),a:100}}(e)||function(e){if("#"===e[0]&&4===e.length&&/^#[\da-fA-F]{3}$/.test(e))return{r:parseInt(e[1]+e[1],16),g:parseInt(e[2]+e[2],16),b:parseInt(e[3]+e[3],16),a:100}}(e)||function(e){const t=e.match(/^hsl(a?)\(([\d., ]+)\)$/);if(t){const e=!!t[1],n=e?4:3,r=t[2].split(/ *, */).map(Number);if(r.length===n){const t=(({h:e,s:t,l:n})=>{let r=n/100,a=t/100*(1-Math.abs(2*r-1)),o=e/60,l=a*(1-Math.abs(o%2-1)),s=r-a/2;return a=255*(a+s)|0,l=255*(l+s)|0,s=255*s|0,o>=0&&o<1?{r:a,g:l,b:s}:o>=1&&o<2?{r:l,g:a,b:s}:o>=2&&o<3?{r:s,g:a,b:l}:o>=3&&o<4?{r:s,g:l,b:a}:o>=4&&o<5?{r:l,g:s,b:a}:o>=5&&o<6?{r:a,g:s,b:l}:{r:0,g:0,b:0}})({h:r[0],s:r[1],l:r[2]});return t.a=e?100*r[3]:100,t}}}(e)||function(e){if("undefined"==typeof document)return;const t=document.createElement("div");t.style.backgroundColor=e,t.style.position="absolute",t.style.top="-9999px",t.style.left="-9999px",t.style.height="1px",t.style.width="1px",document.body.appendChild(t);const n=getComputedStyle(t),r=n&&n.backgroundColor;if(document.body.removeChild(t),"rgba(0, 0, 0, 0)"!==r&&"transparent"!==r)return A(r);switch(e.trim()){case"transparent":case"#0000":case"#00000000":return{r:0,g:0,b:0,a:0}}}(e)}function A(e){if(!e)return;const t=e.match(/^rgb(a?)\(([\d., ]+)\)$/);if(t){const e=!!t[1],n=e?4:3,r=t[2].split(/ *, */).map(Number);if(r.length===n)return{r:r[0],g:r[1],b:r[2],a:e?100*r[3]:100}}}function C(e){const t=w(e);if(t)return Object.assign(Object.assign({},(({r:e,g:t,b:n,a:r})=>{const{h:a,s:o,v:l}=p({r:e,g:t,b:n});return{r:e,g:t,b:n,a:r,h:a,s:o,v:l,hex:m({r:e,g:t,b:n},!1),str:f({r:e,g:t,b:n,a:r})}})(t)),{str:e})}function E(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var k={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};E(".styles-module_container__2LiHz {\n  position: relative;\n  width: 220px;\n  height: 220px;\n}\n\n.styles-module_container__2LiHz:focus {\n  outline: 2px solid #09f;\n}\n\n.styles-module_light__367NS {\n  background: linear-gradient(to right, white 0%, transparent 100%);\n}\n\n.styles-module_dark__2oP9R {\n  background: linear-gradient(to bottom, transparent 0, #000 100%);\n}\n");var O={thumb:"common-module_thumb__3Kyme",overlay:"common-module_overlay__3Oki6",vHidden:"common-module_vHidden__kcR2k",transBackground:"common-module_transBackground__2AOKu"};E(".common-module_thumb__3Kyme {\n  z-index: 10;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: white;\n  border: 2px solid white;\n  border-radius: 6px;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.common-module_overlay__3Oki6 {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n.common-module_vHidden__kcR2k {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n  word-wrap: normal;\n}\n\n.common-module_transBackground__2AOKu {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==);\n}\n");var j="styles-module_label__XgqtI",S="styles-module_input__2EvWe",P="styles-module_select__3Z7Hr";E('.styles-module_label__XgqtI {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n}\n\n.styles-module_label__XgqtI:not(:last-child) {\n  margin-right: 4px;\n}\n\n.styles-module_input__2EvWe {\n  border: 1px solid #dcdbdb;\n  border-radius: 3px;\n  /* max-width: 100%; */\n  height: 24px;\n  padding: 3px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.styles-module_input__2EvWe:focus {\n  outline: none;\n  border: 1px solid rgb(51, 154, 223);\n}\n\n/* .input:not(:last-child) {\n  margin-right: 4px;\n} */\n\n.styles-module_input__2EvWe::-webkit-outer-spin-button,\n.styles-module_input__2EvWe::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input__2EvWe[type="number"] {\n  -moz-appearance: textfield;\n}\n\n.styles-module_select__3Z7Hr {\n  border-radius: 3px;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n}\n\n.styles-module_select__3Z7Hr:hover,\n.styles-module_select__3Z7Hr:focus {\n  background: #eee;\n}\n');const N=({label:e,value:t,onChange:n,max:r=255,type:o="number"})=>a.default.createElement("label",{className:j},a.default.createElement("input",{className:S,value:t,type:o,min:0,max:r,onChange:n}),a.default.createElement("span",{style:{fontSize:"12px",fontWeight:500}},e)),V=["hex","rgba","hsva"];var H={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};E(".styles-module_container__3YAfB {\n  position: relative;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset;\n  border-radius: 2px;\n  min-width: 160px;\n  height: 12px;\n}\n\n.styles-module_container__3YAfB:focus {\n  outline: 1px solid #09f;\n}\n\n.styles-module_thumb__3_gF5 {\n  top: 50%;\n}\n\n.styles-module_sliderOverlay__3dabP {\n  border-radius: 2px;\n}\n");const I=e.memo(t=>{var n=o(t,[]);const r=$(),l=e.useRef(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:n}=c({ref:t,direction:"horizontal",onChange:t=>e.setA(t),onStep:t=>e.rotateA(t),maxValue:100,ariaLabel:"Alpha slider",ariaValueNow:e.color.a,ariaValueText:String(e.color.a)});return{sliderProps:n}})({ref:l,state:r});return a.default.createElement("div",Object.assign({},n,s,{className:[H.container,O.transBackground,n.className||""].join(" "),ref:l}),a.default.createElement("div",{className:[O.overlay,H.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${r.color.hex})`}}),a.default.createElement("div",{className:[O.thumb,H.thumb].join(" "),style:{left:100*r.color.a/100+"%",background:r.color.str}}))}),R={background:`linear-gradient(${["to left","red 0","#f09 10%","#cd00ff 20%","#3200ff 30%","#06f 40%","#00fffd 50%","#0f6 60%","#35ff00 70%","#cdff00 80%","#f90 90%","red 100%"].join(",")})`},B=e.memo(t=>{var n=o(t,[]);const r=$(),l=e.useRef(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:n}=c({ref:t,direction:"horizontal",onChange:t=>e.setH(t),onStep:t=>e.rotateH(t),maxValue:359,ariaLabel:"Hue slider",ariaValueNow:e.color.h,ariaValueText:String(e.color.h)});return{sliderProps:n}})({ref:l,state:r});return a.default.createElement("div",Object.assign({},n,s,{className:[H.container,n.className||""].join(" "),style:Object.assign(Object.assign({},R),n.style),ref:l}),a.default.createElement("div",{className:[O.thumb,H.thumb].join(" "),style:{left:100*r.color.h/359+"%",background:r.getSolidColor()}}))}),F=a.default.createContext({}),$=()=>e.useContext(F),U=e=>"string"==typeof e?C(e):(e=>"object"==typeof e&&"r"in e&&"g"in e&&"b"in e)(e)?C(m(e)):(e=>"object"==typeof e&&"h"in e&&"s"in e&&"v"in e)(e)?C(b(e)):void 0,D=e.forwardRef((e,t)=>{var{defaultValue:n,onChange:r,value:l}=e,s=o(e,["defaultValue","onChange","value"]);const i=_({defaultValue:U(n),value:U(l),onChange:e=>null==r?void 0:r({rgb:{r:e.r,g:e.g,b:e.b},hsv:{h:e.h,s:e.s,v:e.v},alpha:e.a,string:e.str})});return a.default.createElement(F.Provider,{value:i},a.default.createElement("div",Object.assign({role:"group",ref:t},s),s.children))});D.Board=t=>{var n=o(t,[]);const r=$(),s=e.useRef(null),{containerProps:i,descriptionProps:u}=(({state:t,ref:n,ariaDescription:r="Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.",ariaLabel:a="Saturation and brightness",ariaValueFormat:o="Saturation {0} brightness {1}"})=>{const s=e.useRef(!1),i=t.color,u=o.replace("{0}",String(i.s)).replace("{1}",String(i.v)),{sliderProps:d}=c({ref:n,maxValue:100,direction:"both",ariaLabel:a,ariaValueText:u,ariaValueNow:s.current?i.s:i.v,onChange({x:e,y:n}){n=100-n,t.setSV(e,n)}});return{containerProps:Object.assign(Object.assign({},d),{onKeyDown:e=>{e.key!==l.Tab&&e.preventDefault();const n=e.shiftKey?10:1;switch(e.key){case l.ArrowUp:s.current=!1,t.rotateV(n);break;case l.ArrowDown:s.current=!1,t.rotateV(-n);break;case l.ArrowLeft:s.current=!0,t.rotateS(-n);break;case l.ArrowRight:s.current=!0,t.rotateS(n);break;case l.Home:s.current=!0,t.setS(0);break;case l.End:s.current=!0,t.setS(100);break;case l.PageUp:s.current=!1,t.setV(100);break;case l.PageDown:s.current=!1,t.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:r}}})({state:r,ref:s});return a.default.createElement("div",Object.assign({className:[k.container,n.className||""].join(" ")},n,i,{style:Object.assign({background:r.getSolidColor()},n.style),ref:s}),a.default.createElement("div",Object.assign({className:O.vHidden},u)),a.default.createElement("div",{style:{left:r.color.s+"%",top:100-r.color.v+"%",backgroundColor:"#"+r.color.hex},className:O.thumb}),a.default.createElement("div",{className:[O.overlay,k.light].join(" ")}),a.default.createElement("div",{className:[O.overlay,k.dark].join(" ")}))},D.HueSlider=B,D.AlphaSlider=I,D.Preview=e=>{var t=o(e,[]);const n=$();return a.default.createElement("div",Object.assign({},t,{className:[O.transBackground,t.className||""].join(" "),style:Object.assign({display:"inline-block",backgroundImage:"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)"},t.style)}),a.default.createElement("div",{style:{boxShadow:"rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset",backgroundColor:n.color.str,width:"40px",height:"40px"}}))},D.Params=({})=>{const t=$(),[n,r]=e.useState("hex"),o=e=>{t.setA(parseFloat(e.target.value))};return a.default.createElement("div",{style:{display:"flex",marginTop:"10px",alignItems:"center"}},a.default.createElement("div",{style:{display:"flex",flex:1,justifyContent:"space-between",marginRight:"10px"}},"rgba"===n&&a.default.createElement(a.default.Fragment,null,a.default.createElement(N,{label:"R",onChange:e=>{t.setR(parseFloat(e.target.value))},value:t.color.r}),a.default.createElement(N,{label:"G",onChange:e=>{t.setG(parseFloat(e.target.value))},value:t.color.g}),a.default.createElement(N,{label:"B",onChange:e=>{t.setB(parseFloat(e.target.value))},value:t.color.b}),a.default.createElement(N,{label:"A",onChange:o,value:t.color.a,max:100})),"hsva"===n&&a.default.createElement(a.default.Fragment,null,a.default.createElement(N,{label:"H",onChange:e=>{t.setH(parseFloat(e.target.value))},value:t.color.h}),a.default.createElement(N,{label:"S",onChange:e=>{t.setS(parseFloat(e.target.value))},value:t.color.s}),a.default.createElement(N,{label:"V",onChange:e=>{t.setV(parseFloat(e.target.value))},value:t.color.v}),a.default.createElement(N,{label:"A",onChange:o,value:t.color.a,max:100})),"hex"===n&&a.default.createElement(N,{type:"text",label:"Hex",onChange:e=>{t.setHex(e.target.value)},value:t.color.hex})),a.default.createElement("button",{"aria-label":"Change color mode",className:P,style:{marginLeft:"auto"},onClick:()=>{const e=V.indexOf(n),t=e===V.length-1?0:e+1;r(V[t])}},a.default.createElement("svg",{width:"12px",height:"12px",viewBox:"0 0 16 16",focusable:"false"},a.default.createElement("path",{fill:"currentColor",d:"M11.891 9.992a1 1 0 1 1 1.416 1.415l-4.3 4.3a1 1 0 0 1-1.414 0l-4.3-4.3A1 1 0 0 1 4.71 9.992l3.59 3.591 3.591-3.591zm0-3.984L8.3 2.417 4.709 6.008a1 1 0 0 1-1.416-1.415l4.3-4.3a1 1 0 0 1 1.414 0l4.3 4.3a1 1 0 1 1-1.416 1.415z"}))))};var L="index-module_container__p6aGD";E(".index-module_container__p6aGD {\n  padding: 10px;\n  border-radius: 6px;\n  border: 1px solid #dcdbdb;\n  display: inline-flex;\n  flex-direction: column;\n  gap: 10px;\n  font-family: sans-serif;\n  background: white;\n}\n");const z=e.forwardRef((e,t)=>{var{showPreview:n=!0,showParams:r=!1}=e,l=o(e,["showPreview","showParams"]);return a.default.createElement(D,Object.assign({},l,{className:L}),a.default.createElement(D.Board,null),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",gap:10}},a.default.createElement("div",{style:{flex:1,gap:10,display:"flex",flexDirection:"column"}},a.default.createElement(D.HueSlider,null),a.default.createElement(D.AlphaSlider,null)),n&&a.default.createElement(D.Preview,null)),r&&a.default.createElement(D.Params,null))});exports.ColorPicker=D,exports.default=z;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n,r,a=t(e);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(r=n||(n={})).PageUp="PageUp",r.PageDown="PageDown",r.End="End",r.Home="Home",r.ArrowLeft="ArrowLeft",r.ArrowUp="ArrowUp",r.ArrowRight="ArrowRight",r.ArrowDown="ArrowDown",r.Tab="Tab";var l=n;function s(e=0,t,n=0){return e<n?n:e>t?t:e}const i=(e,t,n,r)=>{let a=(e.clientX-t.left)/t.width;return a=s(Math.round(a*n),n,r),a},u=(e,t,n,r)=>{let a=(e.clientY-t.top)/t.height;return a=s(Math.round(a*n),n,r),a},c=t=>{var{ref:n,onStep:r,ariaLabel:a,ariaValueNow:o,ariaValueText:s,maxValue:c=100,minValue:d=0,step:g=1,bigStep:b=10}=t,p=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const m=e.useRef(()=>{});e.useEffect(()=>m.current,[]);const f=e.useCallback(e=>{if(!n.current||"function"!=typeof p.onChange)return;e.preventDefault();const t=n.current.getBoundingClientRect();if("both"===p.direction){let n=i(e,t,c,d),r=u(e,t,c,d);return p.onChange({x:n,y:r})}if("horizontal"===p.direction){let n=i(e,t,c,d);return p.onChange(n)}if("vertical"===p.direction){let n=u(e,t,c,d);return p.onChange(n)}},[p.direction,p.onChange]),h=e.useCallback(e=>{var t;n.current&&(e.preventDefault(),m.current=(()=>{const e=e=>{e.preventDefault()};return window.addEventListener("touchmove",e,{passive:!1,capture:!0}),()=>{window.removeEventListener("touchmove",e,{capture:!0})}})(),n.current.focus(),n.current.onpointermove=f,null===(t=n.current)||void 0===t||t.setPointerCapture(e.pointerId),f(e))},[f]),v=e.useCallback(e=>{n.current&&(n.current.onpointermove=null,n.current.releasePointerCapture(e.pointerId),m.current(),m.current=()=>{})},[]);return{sliderProps:{tabIndex:0,onPointerDown:h,onPointerUp:v,onKeyDown:e=>{var t,n;e.key!==l.Tab&&e.preventDefault();let a=e.shiftKey?b:g;switch(e.key){case l.ArrowLeft:case l.ArrowDown:null==r||r(-a);break;case l.ArrowRight:case l.ArrowUp:null==r||r(a);break;case l.Home:"vertical"!==p.direction&&"horizontal"!==p.direction||null===(t=p.onChange)||void 0===t||t.call(p,d);break;case l.End:"vertical"!==p.direction&&"horizontal"!==p.direction||null===(n=p.onChange)||void 0===n||n.call(p,c);break;default:return}},onPointerCancel:v,role:"slider","aria-valuemin":d,"aria-valuemax":c,"aria-label":a,"aria-valuenow":o,"aria-valuetext":s}}},d=(e,t,n=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=n&&e<=t,g=e=>{const{h:t,s:n,v:r}=(({h:e,s:t,v:n})=>({h:s(e,359,0),s:s(t,100,0),v:s(n,100,0)}))(e);let a=r/100,o=n/100*a,l=t/60,i=o*(1-Math.abs(l%2-1)),u=a-o;return o=255*(o+u)|0,i=255*(i+u)|0,u=255*u|0,l>=0&&l<1?{r:o,g:i,b:u}:l>=1&&l<2?{r:i,g:o,b:u}:l>=2&&l<3?{r:u,g:o,b:i}:l>=3&&l<4?{r:u,g:i,b:o}:l>=4&&l<5?{r:i,g:u,b:o}:l>=5&&l<6?{r:o,g:u,b:i}:{r:0,g:0,b:0}},b=({h:e,s:t,v:n})=>{let{r:r,g:a,b:o}=g({h:e,s:t,v:n});return m({r:r,g:a,b:o})},p=e=>{const{r:t,g:n,b:r}=(({r:e,g:t,b:n})=>({r:s(e,255,0),g:s(t,255,0),b:s(n,255,0)}))(e);let a=t/255,o=n/255,l=r/255,i=Math.max(a,o,l),u=i-Math.min(a,o,l),c=0,d=0,g=0;return u&&(i===a&&(c=(o-l)/u),i===o&&(c=2+(l-a)/u),i===l&&(c=4+(a-o)/u),i&&(d=u/i)),c=60*c|0,c<0&&(c+=360),d=100*d|0,g=100*i|0,{h:c,s:d,v:g}},m=({r:e,g:t,b:n},r=!0)=>(r?"#":"")+((1<<24)+(e<<16)+(t<<8)+n).toString(16).slice(1),f=e=>e.a<100?(({r:e,g:t,b:n,a:r})=>"number"==typeof r&&!1===isNaN(r)?`rgba(${e}, ${t}, ${n}, ${s(r,100,0)/100})`:`rgb(${e}, ${t}, ${n})`)(e):m(e),h={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},v=(e,t,n)=>{(e=>d(e,255))(n)&&e(e=>{const{r:r,g:a,b:o,a:l}=Object.assign(Object.assign({},e),{[t]:n}),{h:s,s:i,v:u}=p({r:r,g:a,b:o});return{r:r,g:a,b:o,a:l,h:s,s:i,v:u,hex:m({r:r,g:a,b:o},!1),str:f({r:r,g:a,b:o,a:l})}})},y=(e,t,n,r=100)=>{d(n,r)&&e(e=>{const{h:r,s:a,v:o,a:l}=Object.assign(Object.assign({},e),{[t]:n}),{r:s,g:i,b:u}=g({h:r,s:a,v:o});return{h:r,s:a,v:o,r:s,g:i,b:u,a:l,hex:m({r:s,g:i,b:u},!1),str:f({r:s,g:i,b:u,a:l})}})},x=(e,t,n,r=100)=>{e(e=>{const{h:a,s:o,v:l,a:i}=Object.assign(Object.assign({},e),{[t]:s(e[t]+n,r,0)}),{r:u,g:c,b:d}=g({h:a,s:o,v:l});return{h:a,s:o,v:l,r:u,g:c,b:d,a:i,hex:m({r:u,g:c,b:d},!1),str:f({r:u,g:c,b:d,a:i})}})},_=t=>{const[n,r]=e.useState(t.defaultValue||h);e.useEffect(()=>{t.value&&r(t.value)},[JSON.stringify(t.value)]);const a=e=>{if("function"==typeof t.onChange){if(void 0!==t.value)return void t.onChange("function"==typeof e?e(n):e);t.onChange("function"==typeof e?e(n):e)}r(e)};return{setH:e=>y(a,"h",e,359),setS:e=>y(a,"s",e),setV:e=>y(a,"v",e),setR:e=>v(a,"r",e),setG:e=>v(a,"g",e),setB:e=>v(a,"b",e),setA:e=>{d(e,100)&&a(t=>{const n=Object.assign(Object.assign({},t),{a:e});return n.str=f(n),n})},setSV:(e,t)=>{(d(e,100)||d(t,100))&&a(n=>{const{h:r,a:a}=n,{r:o,g:l,b:s}=g({h:r,s:e,v:t}),i=m({r:o,g:l,b:s},!1),u=f({r:o,g:l,b:s,a:a});return{h:r,s:e,v:t,r:o,g:l,b:s,a:a,hex:i,str:u}})},setHex:(e,t={r:n.r,g:n.g,b:n.b})=>{a(({a:n})=>{const{r:r,g:a,b:o}=((e,t=null)=>!0!==(e=>/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(e))(e)?t:("#"===e[0]&&(e=e.slice(1,e.length)),3===e.length&&(e=e.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3")),{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16)}))(e,t),{h:l,s:s,v:i}=p({r:r,g:a,b:o}),u=f({r:r,g:a,b:o,a:n});return{r:r,g:a,b:o,h:l,s:s,v:i,hex:e,a:n,str:u}})},rotateH:e=>x(a,"h",e,359),rotateS:e=>x(a,"s",e),rotateV:e=>x(a,"v",e),rotateA:e=>{a(t=>Object.assign(Object.assign({},t),{a:s(t.a+e,100,0)}))},color:n,getSolidColor:()=>b({h:n.h,s:100,v:100})}};function w(e){if(!e)return;return A(e)||function(e){if("#"===e[0]&&7===e.length&&/^#[\da-fA-F]{6}$/.test(e))return{r:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16),a:100}}(e)||function(e){if("#"===e[0]&&4===e.length&&/^#[\da-fA-F]{3}$/.test(e))return{r:parseInt(e[1]+e[1],16),g:parseInt(e[2]+e[2],16),b:parseInt(e[3]+e[3],16),a:100}}(e)||function(e){const t=e.match(/^hsl(a?)\(([\d., ]+)\)$/);if(t){const e=!!t[1],n=e?4:3,r=t[2].split(/ *, */).map(Number);if(r.length===n){const t=(({h:e,s:t,l:n})=>{let r=n/100,a=t/100*(1-Math.abs(2*r-1)),o=e/60,l=a*(1-Math.abs(o%2-1)),s=r-a/2;return a=255*(a+s)|0,l=255*(l+s)|0,s=255*s|0,o>=0&&o<1?{r:a,g:l,b:s}:o>=1&&o<2?{r:l,g:a,b:s}:o>=2&&o<3?{r:s,g:a,b:l}:o>=3&&o<4?{r:s,g:l,b:a}:o>=4&&o<5?{r:l,g:s,b:a}:o>=5&&o<6?{r:a,g:s,b:l}:{r:0,g:0,b:0}})({h:r[0],s:r[1],l:r[2]});return t.a=e?100*r[3]:100,t}}}(e)||function(e){if("undefined"==typeof document)return;const t=document.createElement("div");t.style.backgroundColor=e,t.style.position="absolute",t.style.top="-9999px",t.style.left="-9999px",t.style.height="1px",t.style.width="1px",document.body.appendChild(t);const n=getComputedStyle(t),r=n&&n.backgroundColor;if(document.body.removeChild(t),"rgba(0, 0, 0, 0)"!==r&&"transparent"!==r)return A(r);switch(e.trim()){case"transparent":case"#0000":case"#00000000":return{r:0,g:0,b:0,a:0}}}(e)}function A(e){if(!e)return;const t=e.match(/^rgb(a?)\(([\d., ]+)\)$/);if(t){const e=!!t[1],n=e?4:3,r=t[2].split(/ *, */).map(Number);if(r.length===n)return{r:r[0],g:r[1],b:r[2],a:e?100*r[3]:100}}}function k(e){const t=w(e);if(t)return Object.assign(Object.assign({},(({r:e,g:t,b:n,a:r})=>{const{h:a,s:o,v:l}=p({r:e,g:t,b:n});return{r:e,g:t,b:n,a:r,h:a,s:o,v:l,hex:m({r:e,g:t,b:n},!1),str:f({r:e,g:t,b:n,a:r})}})(t)),{str:e})}function C(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var E={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};C(".styles-module_container__2LiHz {\n  position: relative;\n  width: 220px;\n  height: 220px;\n}\n\n.styles-module_container__2LiHz:focus {\n  outline: 2px solid #09f;\n}\n\n.styles-module_light__367NS {\n  background: linear-gradient(to right, white 0%, transparent 100%);\n}\n\n.styles-module_dark__2oP9R {\n  background: linear-gradient(to bottom, transparent 0, #000 100%);\n}\n");var O={thumb:"common-module_thumb__3Kyme",overlay:"common-module_overlay__3Oki6",vHidden:"common-module_vHidden__kcR2k",transBackground:"common-module_transBackground__2AOKu"};C(".common-module_thumb__3Kyme {\n  z-index: 10;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: white;\n  border: 2px solid white;\n  border-radius: 6px;\n  transform: translate(-50%, -50%);\n  box-sizing: border-box;\n}\n\n.common-module_overlay__3Oki6 {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n.common-module_vHidden__kcR2k {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n  word-wrap: normal;\n}\n\n.common-module_transBackground__2AOKu {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==);\n}\n");var j="styles-module_label__XgqtI",P="styles-module_input__2EvWe",S="styles-module_select__3Z7Hr";C('.styles-module_label__XgqtI {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n}\n\n.styles-module_label__XgqtI:not(:last-child) {\n  margin-right: 4px;\n}\n\n.styles-module_input__2EvWe {\n  border: 1px solid #dcdbdb;\n  border-radius: 3px;\n  /* max-width: 100%; */\n  height: 24px;\n  padding: 3px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.styles-module_input__2EvWe:focus {\n  outline: none;\n  border: 1px solid rgb(51, 154, 223);\n}\n\n/* .input:not(:last-child) {\n  margin-right: 4px;\n} */\n\n.styles-module_input__2EvWe::-webkit-outer-spin-button,\n.styles-module_input__2EvWe::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input__2EvWe[type="number"] {\n  -moz-appearance: textfield;\n}\n\n.styles-module_select__3Z7Hr {\n  border-radius: 3px;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n}\n\n.styles-module_select__3Z7Hr:hover,\n.styles-module_select__3Z7Hr:focus {\n  background: #eee;\n}\n');const N=({label:e,value:t,onChange:n,max:r=255,type:o="number"})=>a.default.createElement("label",{className:j},a.default.createElement("input",{className:P,value:t,type:o,min:0,max:r,onChange:n}),a.default.createElement("span",{style:{fontSize:"12px",fontWeight:500}},e)),V=["hex","rgba","hsva"];var H={preview:"styles-module_preview__3oeBp"};C(".styles-module_preview__3oeBp {\n    display: inline-block;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset;\n    background-blend-mode: darken;\n    width: 40px;\n    height: 40px;\n}\n");var I={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};C(".styles-module_container__3YAfB {\n  position: relative;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset;\n  border-radius: 2px;\n  min-width: 160px;\n  height: 12px;\n}\n\n.styles-module_container__3YAfB:focus {\n  outline: 1px solid #09f;\n}\n\n.styles-module_thumb__3_gF5 {\n  top: 50%;\n}\n\n.styles-module_sliderOverlay__3dabP {\n  border-radius: 2px;\n}\n");const R=e.memo(t=>{var n=o(t,[]);const r=D(),l=e.useRef(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:n}=c({ref:t,direction:"horizontal",onChange:t=>e.setA(t),onStep:t=>e.rotateA(t),maxValue:100,ariaLabel:"Alpha slider",ariaValueNow:e.color.a,ariaValueText:String(e.color.a)});return{sliderProps:n}})({ref:l,state:r});return a.default.createElement("div",Object.assign({},n,s,{className:[I.container,O.transBackground,n.className||""].join(" "),ref:l}),a.default.createElement("div",{className:[O.overlay,I.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${r.color.hex})`}}),a.default.createElement("div",{className:[O.thumb,I.thumb].join(" "),style:{left:100*r.color.a/100+"%",background:r.color.str}}))}),B={background:`linear-gradient(${["to left","red 0","#f09 10%","#cd00ff 20%","#3200ff 30%","#06f 40%","#00fffd 50%","#0f6 60%","#35ff00 70%","#cdff00 80%","#f90 90%","red 100%"].join(",")})`},$=e.memo(t=>{var n=o(t,[]);const r=D(),l=e.useRef(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:n}=c({ref:t,direction:"horizontal",onChange:t=>e.setH(t),onStep:t=>e.rotateH(t),maxValue:359,ariaLabel:"Hue slider",ariaValueNow:e.color.h,ariaValueText:String(e.color.h)});return{sliderProps:n}})({ref:l,state:r});return a.default.createElement("div",Object.assign({},n,s,{className:[I.container,n.className||""].join(" "),style:Object.assign(Object.assign({},B),n.style),ref:l}),a.default.createElement("div",{className:[O.thumb,I.thumb].join(" "),style:{left:100*r.color.h/359+"%",background:r.getSolidColor()}}))}),F=a.default.createContext({}),D=()=>e.useContext(F),L=e=>"string"==typeof e?k(e):(e=>"object"==typeof e&&"r"in e&&"g"in e&&"b"in e)(e)?k(m(e)):(e=>"object"==typeof e&&"h"in e&&"s"in e&&"v"in e)(e)?k(b(e)):void 0,z=e.forwardRef((e,t)=>{var{defaultValue:n,onChange:r,value:l}=e,s=o(e,["defaultValue","onChange","value"]);const i=_({defaultValue:L(n),value:L(l),onChange:e=>null==r?void 0:r({rgb:{r:e.r,g:e.g,b:e.b},hsv:{h:e.h,s:e.s,v:e.v},alpha:e.a,string:e.str})});return a.default.createElement(F.Provider,{value:i},a.default.createElement("div",Object.assign({role:"group",ref:t},s),s.children))});z.Board=t=>{var n=o(t,[]);const r=D(),s=e.useRef(null),{containerProps:i,descriptionProps:u}=(({state:t,ref:n,ariaDescription:r="Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.",ariaLabel:a="Saturation and brightness",ariaValueFormat:o="Saturation {0} brightness {1}"})=>{const s=e.useRef(!1),i=t.color,u=o.replace("{0}",String(i.s)).replace("{1}",String(i.v)),{sliderProps:d}=c({ref:n,maxValue:100,direction:"both",ariaLabel:a,ariaValueText:u,ariaValueNow:s.current?i.s:i.v,onChange({x:e,y:n}){n=100-n,t.setSV(e,n)}});return{containerProps:Object.assign(Object.assign({},d),{onKeyDown:e=>{e.key!==l.Tab&&e.preventDefault();const n=e.shiftKey?10:1;switch(e.key){case l.ArrowUp:s.current=!1,t.rotateV(n);break;case l.ArrowDown:s.current=!1,t.rotateV(-n);break;case l.ArrowLeft:s.current=!0,t.rotateS(-n);break;case l.ArrowRight:s.current=!0,t.rotateS(n);break;case l.Home:s.current=!0,t.setS(0);break;case l.End:s.current=!0,t.setS(100);break;case l.PageUp:s.current=!1,t.setV(100);break;case l.PageDown:s.current=!1,t.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:r}}})({state:r,ref:s});return a.default.createElement("div",Object.assign({className:[E.container,n.className||""].join(" ")},n,i,{style:Object.assign({background:r.getSolidColor()},n.style),ref:s}),a.default.createElement("div",Object.assign({className:O.vHidden},u)),a.default.createElement("div",{style:{left:r.color.s+"%",top:100-r.color.v+"%",backgroundColor:"#"+r.color.hex},className:O.thumb}),a.default.createElement("div",{className:[O.overlay,E.light].join(" ")}),a.default.createElement("div",{className:[O.overlay,E.dark].join(" ")}))},z.HueSlider=$,z.AlphaSlider=R,z.Preview=e=>{var t=o(e,[]);const n=D();return a.default.createElement("div",Object.assign({},t,{className:[O.transBackground,H.preview,t.className||""].join(" "),style:Object.assign({backgroundColor:n.color.str},t.style)}))},z.Params=({})=>{const t=D(),[n,r]=e.useState("hex"),o=e=>{t.setA(parseFloat(e.target.value))};return a.default.createElement("div",{style:{display:"flex",marginTop:"10px",alignItems:"center"}},a.default.createElement("div",{style:{display:"flex",flex:1,justifyContent:"space-between",marginRight:"10px"}},"rgba"===n&&a.default.createElement(a.default.Fragment,null,a.default.createElement(N,{label:"R",onChange:e=>{t.setR(parseFloat(e.target.value))},value:t.color.r}),a.default.createElement(N,{label:"G",onChange:e=>{t.setG(parseFloat(e.target.value))},value:t.color.g}),a.default.createElement(N,{label:"B",onChange:e=>{t.setB(parseFloat(e.target.value))},value:t.color.b}),a.default.createElement(N,{label:"A",onChange:o,value:t.color.a,max:100})),"hsva"===n&&a.default.createElement(a.default.Fragment,null,a.default.createElement(N,{label:"H",onChange:e=>{t.setH(parseFloat(e.target.value))},value:t.color.h}),a.default.createElement(N,{label:"S",onChange:e=>{t.setS(parseFloat(e.target.value))},value:t.color.s}),a.default.createElement(N,{label:"V",onChange:e=>{t.setV(parseFloat(e.target.value))},value:t.color.v}),a.default.createElement(N,{label:"A",onChange:o,value:t.color.a,max:100})),"hex"===n&&a.default.createElement(N,{type:"text",label:"Hex",onChange:e=>{t.setHex(e.target.value)},value:t.color.hex})),a.default.createElement("button",{"aria-label":"Change color mode",className:S,style:{marginLeft:"auto"},onClick:()=>{const e=V.indexOf(n),t=e===V.length-1?0:e+1;r(V[t])}},a.default.createElement("svg",{width:"12px",height:"12px",viewBox:"0 0 16 16",focusable:"false"},a.default.createElement("path",{fill:"currentColor",d:"M11.891 9.992a1 1 0 1 1 1.416 1.415l-4.3 4.3a1 1 0 0 1-1.414 0l-4.3-4.3A1 1 0 0 1 4.71 9.992l3.59 3.591 3.591-3.591zm0-3.984L8.3 2.417 4.709 6.008a1 1 0 0 1-1.416-1.415l4.3-4.3a1 1 0 0 1 1.414 0l4.3 4.3a1 1 0 1 1-1.416 1.415z"}))))};var U="index-module_container__p6aGD";C(".index-module_container__p6aGD {\n  padding: 10px;\n  border-radius: 6px;\n  border: 1px solid #dcdbdb;\n  display: inline-flex;\n  flex-direction: column;\n  gap: 10px;\n  font-family: sans-serif;\n  background: white;\n}\n");const T=e.forwardRef((e,t)=>{var{showPreview:n=!0,showParams:r=!1}=e,l=o(e,["showPreview","showParams"]);return a.default.createElement(z,Object.assign({},l,{className:U}),a.default.createElement(z.Board,null),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",gap:10}},a.default.createElement("div",{style:{flex:1,gap:10,display:"flex",flexDirection:"column"}},a.default.createElement(z.HueSlider,null),a.default.createElement(z.AlphaSlider,null)),n&&a.default.createElement(z.Preview,null)),r&&a.default.createElement(z.Params,null))});exports.ColorPicker=z,exports.default=T;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@atomik-color/component",
-  "version": "1.0.18-alpha.3+f8fdfc4",
+  "version": "1.0.18-alpha.5+61f8779",
   "license": "MIT",
@@ -36,3 +36,3 @@ "author": "Dilshod Turobov <[e-mail]",
   "dependencies": {
-    "@atomik-color/core": "^1.0.14-alpha.3+f8fdfc4"
+    "@atomik-color/core": "^1.0.13"
   },
@@ -42,3 +42,3 @@ "devDependencies": {
   },
-  "gitHead": "f8fdfc4b6b7c6190f5ecc1e6d6ca7b6654cfeafc"
+  "gitHead": "61f8779aecc34efaa1423e29a7db59b1110c878a"
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

197943

decreased by-0.49%

Dependency changes

• + Added@atomik-color/core@1.0.13(transitive)

• - Removed@atomik-color/core@1.0.14-alpha.3(transitive)

• Updated@atomik-color/core@^1.0.13