@atomik-color/component - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [1.0.17](https://github.com/deebov/color-picker/compare/@atomik-color/component@1.0.16...@atomik-color/component@1.0.17) (2022-12-11)
+
+**Note:** Version bump only for package @atomik-color/component
+
+
+
+
+
 ## [1.0.16](https://github.com/deebov/color-picker/compare/@atomik-color/component@1.0.15...@atomik-color/component@1.0.16) (2020-10-13)
@@ -8,0 +16,0 @@

dist/index.esm.js

@@ -1,2 +0,2 @@
-import e,{useState as t,useEffect as n,useRef as r,memo as a,forwardRef as o}from"react";function l(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 s,i;(i=s||(s={})).PageUp="PageUp",i.PageDown="PageDown",i.End="End",i.Home="Home",i.ArrowLeft="ArrowLeft",i.ArrowUp="ArrowUp",i.ArrowRight="ArrowRight",i.ArrowDown="ArrowDown",i.Tab="Tab";var c=s;function u(e=0,t,n=0){return e<n?n:e>t?t:e}const d=(e,t,n,r)=>{let a=(e.clientX-t.left)/t.width;return a=u(Math.round(a*n),n,r),a},g=(e,t,n,r)=>{let a=(e.clientY-t.top)/t.height;return a=u(Math.round(a*n),n,r),a},b=e=>{var{ref:t,onStep:n,ariaLabel:r,ariaValueNow:a,ariaValueText:o,maxValue:l=100,minValue:s=0,step:i=1,bigStep:u=10}=e,b=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 m=e=>{if(!t.current||"function"!=typeof b.onChange)return;e.preventDefault();const n=t.current.getBoundingClientRect();if("both"===b.direction){let t=d(e,n,l,s),r=g(e,n,l,s);return b.onChange({x:t,y:r})}if("horizontal"===b.direction){let t=d(e,n,l,s);return b.onChange(t)}if("vertical"===b.direction){let t=g(e,n,l,s);return b.onChange(t)}};return{sliderProps:{tabIndex:0,onPointerDown:e=>{var n;t.current&&(e.preventDefault(),t.current.focus(),document.body.style.touchAction="none",t.current.onpointermove=m,null===(n=t.current)||void 0===n||n.setPointerCapture(e.pointerId),m(e))},onPointerUp:e=>{t.current&&(t.current.onpointermove=null,t.current.releasePointerCapture(e.pointerId),document.body.style.touchAction="auto")},onKeyDown:e=>{var t,r;e.key!==c.Tab&&e.preventDefault();let a=e.shiftKey?u:i;switch(e.key){case c.ArrowLeft:case c.ArrowDown:null==n||n(-a);break;case c.ArrowRight:case c.ArrowUp:null==n||n(a);break;case c.Home:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(t=b.onChange)||void 0===t||t.call(b,s);break;case c.End:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(r=b.onChange)||void 0===r||r.call(b,l);break;default:return}},role:"slider","aria-valuemin":s,"aria-valuemax":l,"aria-label":r,"aria-valuenow":a,"aria-valuetext":o}}},m=(e,t,n=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=n&&e<=t,p=e=>{const{h:t,s:n,v:r}=(({h:e,s:t,v:n})=>({h:u(e,359,0),s:u(t,100,0),v:u(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}},h=e=>{const{r:t,g:n,b:r}=(({r:e,g:t,b:n})=>({r:u(e,255,0),g:u(t,255,0),b:u(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,d=0,g=0;return i&&(s===a&&(c=(o-l)/i),s===o&&(c=2+(l-a)/i),s===l&&(c=4+(a-o)/i),s&&(d=i/s)),c=60*c|0,c<0&&(c+=360),d=100*d|0,g=100*s|0,{h:c,s:d,v:g}},v=({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}, ${u(r,100,0)/100})`:`rgb(${e}, ${t}, ${n})`)(e):v(e),y={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},x=(e,t,n)=>{(e=>m(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}=h({r:r,g:a,b:o});return{r:r,g:a,b:o,a:l,h:s,s:i,v:c,hex:v({r:r,g:a,b:o},!1),str:f({r:r,g:a,b:o,a:l})}})},_=(e,t,n,r=100)=>{m(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}=p({h:r,s:a,v:o});return{h:r,s:a,v:o,r:s,g:i,b:c,a:l,hex:v({r:s,g:i,b:c},!1),str:f({r:s,g:i,b:c,a:l})}})},A=(e,t,n,r=100)=>{e(e=>{const{h:a,s:o,v:l,a:s}=Object.assign(Object.assign({},e),{[t]:u(e[t]+n,r,0)}),{r:i,g:c,b:d}=p({h:a,s:o,v:l});return{h:a,s:o,v:l,r:i,g:c,b:d,a:s,hex:v({r:i,g:c,b:d},!1),str:f({r:i,g:c,b:d,a:s})}})},w=e=>{const[r,a]=t(e.defaultValue||y);n(()=>{e.value&&a(e.value)},[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=>_(o,"h",e,359),setS:e=>_(o,"s",e),setV:e=>_(o,"v",e),setR:e=>x(o,"r",e),setG:e=>x(o,"g",e),setB:e=>x(o,"b",e),setA:e=>{m(e,100)&&o(t=>{const n=Object.assign(Object.assign({},t),{a:e});return n.str=f(n),n})},setSV:(e,t)=>{(m(e,100)||m(t,100))&&o(n=>{const{h:r,a:a}=n,{r:o,g:l,b:s}=p({h:r,s:e,v:t}),i=v({r:o,g:l,b:s},!1),c=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: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}=h({r:r,g:a,b:o}),c=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:c}})},rotateH:e=>A(o,"h",e,359),rotateS:e=>A(o,"s",e),rotateV:e=>A(o,"v",e),rotateA:e=>{o(t=>Object.assign(Object.assign({},t),{a:u(t.a+e,100,0)}))},color:r,getSolidColor:()=>(({h:e,s:t,v:n})=>{let{r:r,g:a,b:o}=p({h:e,s:t,v:n});return v({r:r,g:a,b:o})})({h:r.h,s:100,v:100})}};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 C={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");const O=t=>{var{state:n}=t,a=l(t,["state"]);const o=r(null),{containerProps:s,descriptionProps:i}=(({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:u}=b({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({},u),{onKeyDown:t=>{t.key!==c.Tab&&t.preventDefault();const n=t.shiftKey?10:1;switch(t.key){case c.ArrowUp:l.current=!1,e.rotateV(n);break;case c.ArrowDown:l.current=!1,e.rotateV(-n);break;case c.ArrowLeft:l.current=!0,e.rotateS(-n);break;case c.ArrowRight:l.current=!0,e.rotateS(n);break;case c.Home:l.current=!0,e.setS(0);break;case c.End:l.current=!0,e.setS(100);break;case c.PageUp:l.current=!1,e.setV(100);break;case c.PageDown:l.current=!1,e.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:n}}})({state:n,ref:o});return e.createElement("div",Object.assign({className:[k.container,a.className||""].join(" ")},a,s,{style:Object.assign({background:n.getSolidColor()},a.style),ref:o}),e.createElement("div",Object.assign({className:C.vHidden},i)),e.createElement("div",{style:Object.assign({left:n.color.s+"%",top:100-n.color.v+"%",backgroundColor:"#"+n.color.hex},a.style),className:C.thumb}),e.createElement("div",{className:[C.overlay,k.light].join(" ")}),e.createElement("div",{className:[C.overlay,k.dark].join(" ")}))};var j={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 S={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(",")})`},N=a(t=>{var{state:n}=t,a=l(t,["state"]);const o=r(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:n}=b({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:n});return e.createElement("div",Object.assign({},a,s,{className:[j.container,a.className||""].join(" "),style:Object.assign(Object.assign({},S),a.style),ref:o}),e.createElement("div",{className:[C.thumb,j.thumb].join(" "),style:{left:100*n.color.h/359+"%",background:n.getSolidColor()}}))}),V=a(t=>{var{state:n}=t,a=l(t,["state"]);const o=r(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:n}=b({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:n});return e.createElement("div",Object.assign({},a,s,{className:[j.container,C.transBackground,a.className||""].join(" "),ref:o}),e.createElement("div",{className:[C.overlay,j.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${n.color.hex})`}}),e.createElement("div",{className:[C.thumb,j.thumb].join(" "),style:{left:100*n.color.a/100+"%",background:n.color.str}}))}),P=t=>{var{color:n}=t,r=l(t,["color"]);return e.createElement("div",Object.assign({},r,{className:C.transBackground,style:Object.assign(Object.assign({},r.style),{display:"inline-block",backgroundImage:"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)"})}),e.createElement("div",{style:{boxShadow:"rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset",backgroundColor:n,width:"40px",height:"40px"}}))};var H="index-module_container__p6aGD";E(".index-module_container__p6aGD {\n  padding: 10px;\n  border-radius: 6px;\n  border: 1px solid #dcdbdb;\n  display: inline-block;\n  font-family: sans-serif;\n  background: white;\n}\n");var B="styles-module_label__XgqtI",U="styles-module_input__2EvWe",F="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 I=({label:t,value:n,onChange:r,max:a=255,type:o="number"})=>e.createElement("label",{className:B},e.createElement("input",{className:U,value:n,type:o,min:0,max:a,onChange:r}),e.createElement("span",{style:{fontSize:"12px",fontWeight:500}},t)),D=["hex","rgba","hsva"],R=({state:n})=>{const r=e=>{n.setA(parseFloat(e.target.value))},[a,o]=t("hex");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"===a&&e.createElement(e.Fragment,null,e.createElement(I,{label:"R",onChange:e=>{n.setR(parseFloat(e.target.value))},value:n.color.r}),e.createElement(I,{label:"G",onChange:e=>{n.setG(parseFloat(e.target.value))},value:n.color.g}),e.createElement(I,{label:"B",onChange:e=>{n.setB(parseFloat(e.target.value))},value:n.color.b}),e.createElement(I,{label:"A",onChange:r,value:n.color.a,max:100})),"hsva"===a&&e.createElement(e.Fragment,null,e.createElement(I,{label:"H",onChange:e=>{n.setH(parseFloat(e.target.value))},value:n.color.h}),e.createElement(I,{label:"S",onChange:e=>{n.setS(parseFloat(e.target.value))},value:n.color.s}),e.createElement(I,{label:"V",onChange:e=>{n.setV(parseFloat(e.target.value))},value:n.color.v}),e.createElement(I,{label:"A",onChange:r,value:n.color.a,max:100})),"hex"===a&&e.createElement(I,{type:"text",label:"Hex",onChange:e=>{n.setHex(e.target.value)},value:n.color.hex})),e.createElement("button",{"aria-label":"Change color mode",className:F,style:{marginLeft:"auto"},onClick:()=>{const e=D.indexOf(a),t=e===D.length-1?0:e+1;o(D[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"}))))},$=o((t,n)=>{var{showPreview:r=!0,showParams:a=!1}=t,o=l(t,["showPreview","showParams"]);const s=w(o);return e.createElement("div",{className:H,role:"group",ref:n},e.createElement(O,{style:{marginBottom:"10px"},state:s}),e.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},e.createElement("div",{style:{flex:1}},e.createElement(N,{style:{marginBottom:"10px"},state:s}),e.createElement(V,{state:s})),r&&e.createElement("div",{style:{width:"10px"}}),r&&e.createElement(P,{color:s.color.str})),a&&e.createElement(R,{state:s}))});export default $;
+import e,{useState as t,useEffect as n,useRef as r,useCallback as a,memo as o,forwardRef as l}from"react";function s(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 i,c;(c=i||(i={})).PageUp="PageUp",c.PageDown="PageDown",c.End="End",c.Home="Home",c.ArrowLeft="ArrowLeft",c.ArrowUp="ArrowUp",c.ArrowRight="ArrowRight",c.ArrowDown="ArrowDown",c.Tab="Tab";var u=i;function d(e=0,t,n=0){return e<n?n:e>t?t:e}const g=(e,t,n,r)=>{let a=(e.clientX-t.left)/t.width;return a=d(Math.round(a*n),n,r),a},b=(e,t,n,r)=>{let a=(e.clientY-t.top)/t.height;return a=d(Math.round(a*n),n,r),a},m=e=>{var{ref:t,onStep:o,ariaLabel:l,ariaValueNow:s,ariaValueText:i,maxValue:c=100,minValue:d=0,step:m=1,bigStep:p=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=g(e,n,c,d),r=b(e,n,c,d);return h.onChange({x:t,y:r})}if("horizontal"===h.direction){let t=g(e,n,c,d);return h.onChange(t)}if("vertical"===h.direction){let t=b(e,n,c,d);return h.onChange(t)}},[h.direction,h.onChange]),x=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]),y=a(e=>{t.current&&(t.current.onpointermove=null,t.current.releasePointerCapture(e.pointerId),v.current(),v.current=()=>{})},[]);return{sliderProps:{tabIndex:0,onPointerDown:x,onPointerUp:y,onKeyDown:e=>{var t,n;e.key!==u.Tab&&e.preventDefault();let r=e.shiftKey?p:m;switch(e.key){case u.ArrowLeft:case u.ArrowDown:null==o||o(-r);break;case u.ArrowRight:case u.ArrowUp:null==o||o(r);break;case u.Home:"vertical"!==h.direction&&"horizontal"!==h.direction||null===(t=h.onChange)||void 0===t||t.call(h,d);break;case u.End:"vertical"!==h.direction&&"horizontal"!==h.direction||null===(n=h.onChange)||void 0===n||n.call(h,c);break;default:return}},onPointerCancel:y,role:"slider","aria-valuemin":d,"aria-valuemax":c,"aria-label":l,"aria-valuenow":s,"aria-valuetext":i}}},p=(e,t,n=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=n&&e<=t,h=e=>{const{h:t,s:n,v:r}=(({h:e,s:t,v:n})=>({h:d(e,359,0),s:d(t,100,0),v:d(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=e=>{const{r:t,g:n,b:r}=(({r:e,g:t,b:n})=>({r:d(e,255,0),g:d(t,255,0),b:d(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,g=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,g=100*s|0,{h:c,s:u,v:g}},f=({r:e,g:t,b:n},r=!0)=>(r?"#":"")+((1<<24)+(e<<16)+(t<<8)+n).toString(16).slice(1),x=e=>e.a<100?(({r:e,g:t,b:n,a:r})=>"number"==typeof r&&!1===isNaN(r)?`rgba(${e}, ${t}, ${n}, ${d(r,100,0)/100})`:`rgb(${e}, ${t}, ${n})`)(e):f(e),y={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},_=(e,t,n)=>{(e=>p(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}=v({r:r,g:a,b:o});return{r:r,g:a,b:o,a:l,h:s,s:i,v:c,hex:f({r:r,g:a,b:o},!1),str:x({r:r,g:a,b:o,a:l})}})},w=(e,t,n,r=100)=>{p(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}=h({h:r,s:a,v:o});return{h:r,s:a,v:o,r:s,g:i,b:c,a:l,hex:f({r:s,g:i,b:c},!1),str:x({r:s,g:i,b:c,a:l})}})},A=(e,t,n,r=100)=>{e(e=>{const{h:a,s:o,v:l,a:s}=Object.assign(Object.assign({},e),{[t]:d(e[t]+n,r,0)}),{r:i,g:c,b:u}=h({h:a,s:o,v:l});return{h:a,s:o,v:l,r:i,g:c,b:u,a:s,hex:f({r:i,g:c,b:u},!1),str:x({r:i,g:c,b:u,a:s})}})},E=e=>{const[r,a]=t(e.defaultValue||y);n(()=>{e.value&&a(e.value)},[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=>w(o,"h",e,359),setS:e=>w(o,"s",e),setV:e=>w(o,"v",e),setR:e=>_(o,"r",e),setG:e=>_(o,"g",e),setB:e=>_(o,"b",e),setA:e=>{p(e,100)&&o(t=>{const n=Object.assign(Object.assign({},t),{a:e});return n.str=x(n),n})},setSV:(e,t)=>{(p(e,100)||p(t,100))&&o(n=>{const{h:r,a:a}=n,{r:o,g:l,b:s}=h({h:r,s:e,v:t}),i=f({r:o,g:l,b:s},!1),c=x({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}=v({r:r,g:a,b:o}),c=x({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=>A(o,"h",e,359),rotateS:e=>A(o,"s",e),rotateV:e=>A(o,"v",e),rotateA:e=>{o(t=>Object.assign(Object.assign({},t),{a:d(t.a+e,100,0)}))},color:r,getSolidColor:()=>(({h:e,s:t,v:n})=>{let{r:r,g:a,b:o}=h({h:e,s:t,v:n});return f({r:r,g:a,b:o})})({h:r.h,s:100,v:100})}};function k(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 C={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};k(".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"};k(".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");const j=t=>{var{state:n}=t,a=s(t,["state"]);const o=r(null),{containerProps:l,descriptionProps:i}=(({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!==u.Tab&&t.preventDefault();const n=t.shiftKey?10:1;switch(t.key){case u.ArrowUp:l.current=!1,e.rotateV(n);break;case u.ArrowDown:l.current=!1,e.rotateV(-n);break;case u.ArrowLeft:l.current=!0,e.rotateS(-n);break;case u.ArrowRight:l.current=!0,e.rotateS(n);break;case u.Home:l.current=!0,e.setS(0);break;case u.End:l.current=!0,e.setS(100);break;case u.PageUp:l.current=!1,e.setV(100);break;case u.PageDown:l.current=!1,e.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:n}}})({state:n,ref:o});return e.createElement("div",Object.assign({className:[C.container,a.className||""].join(" ")},a,l,{style:Object.assign({background:n.getSolidColor()},a.style),ref:o}),e.createElement("div",Object.assign({className:O.vHidden},i)),e.createElement("div",{style:Object.assign({left:n.color.s+"%",top:100-n.color.v+"%",backgroundColor:"#"+n.color.hex},a.style),className:O.thumb}),e.createElement("div",{className:[O.overlay,C.light].join(" ")}),e.createElement("div",{className:[O.overlay,C.dark].join(" ")}))};var S={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};k(".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 N={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(",")})`},P=o(t=>{var{state:n}=t,a=s(t,["state"]);const 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:n});return e.createElement("div",Object.assign({},a,l,{className:[S.container,a.className||""].join(" "),style:Object.assign(Object.assign({},N),a.style),ref:o}),e.createElement("div",{className:[O.thumb,S.thumb].join(" "),style:{left:100*n.color.h/359+"%",background:n.getSolidColor()}}))}),V=o(t=>{var{state:n}=t,a=s(t,["state"]);const 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:n});return e.createElement("div",Object.assign({},a,l,{className:[S.container,O.transBackground,a.className||""].join(" "),ref:o}),e.createElement("div",{className:[O.overlay,S.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${n.color.hex})`}}),e.createElement("div",{className:[O.thumb,S.thumb].join(" "),style:{left:100*n.color.a/100+"%",background:n.color.str}}))}),H=t=>{var{color:n}=t,r=s(t,["color"]);return e.createElement("div",Object.assign({},r,{className:O.transBackground,style:Object.assign(Object.assign({},r.style),{display:"inline-block",backgroundImage:"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)"})}),e.createElement("div",{style:{boxShadow:"rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset",backgroundColor:n,width:"40px",height:"40px"}}))};var B="index-module_container__p6aGD";k(".index-module_container__p6aGD {\n  padding: 10px;\n  border-radius: 6px;\n  border: 1px solid #dcdbdb;\n  display: inline-block;\n  font-family: sans-serif;\n  background: white;\n}\n");var U="styles-module_label__XgqtI",F="styles-module_input__2EvWe",I="styles-module_select__3Z7Hr";k('.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 D=({label:t,value:n,onChange:r,max:a=255,type:o="number"})=>e.createElement("label",{className:U},e.createElement("input",{className:F,value:n,type:o,min:0,max:a,onChange:r}),e.createElement("span",{style:{fontSize:"12px",fontWeight:500}},t)),L=["hex","rgba","hsva"],R=({state:n})=>{const r=e=>{n.setA(parseFloat(e.target.value))},[a,o]=t("hex");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"===a&&e.createElement(e.Fragment,null,e.createElement(D,{label:"R",onChange:e=>{n.setR(parseFloat(e.target.value))},value:n.color.r}),e.createElement(D,{label:"G",onChange:e=>{n.setG(parseFloat(e.target.value))},value:n.color.g}),e.createElement(D,{label:"B",onChange:e=>{n.setB(parseFloat(e.target.value))},value:n.color.b}),e.createElement(D,{label:"A",onChange:r,value:n.color.a,max:100})),"hsva"===a&&e.createElement(e.Fragment,null,e.createElement(D,{label:"H",onChange:e=>{n.setH(parseFloat(e.target.value))},value:n.color.h}),e.createElement(D,{label:"S",onChange:e=>{n.setS(parseFloat(e.target.value))},value:n.color.s}),e.createElement(D,{label:"V",onChange:e=>{n.setV(parseFloat(e.target.value))},value:n.color.v}),e.createElement(D,{label:"A",onChange:r,value:n.color.a,max:100})),"hex"===a&&e.createElement(D,{type:"text",label:"Hex",onChange:e=>{n.setHex(e.target.value)},value:n.color.hex})),e.createElement("button",{"aria-label":"Change color mode",className:I,style:{marginLeft:"auto"},onClick:()=>{const e=L.indexOf(a),t=e===L.length-1?0:e+1;o(L[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"}))))},$=l((t,n)=>{var{showPreview:r=!0,showParams:a=!1}=t,o=s(t,["showPreview","showParams"]);const l=E(o);return e.createElement("div",{className:B,role:"group",ref:n},e.createElement(j,{style:{marginBottom:"10px"},state:l}),e.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},e.createElement("div",{style:{flex:1}},e.createElement(P,{style:{marginBottom:"10px"},state:l}),e.createElement(V,{state:l})),r&&e.createElement("div",{style:{width:"10px"}}),r&&e.createElement(H,{color:l.color.str})),a&&e.createElement(R,{state:l}))});export default $;
 //# 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},c=(e,t,n,r)=>{let a=(e.clientY-t.top)/t.height;return a=s(Math.round(a*n),n,r),a},u=e=>{var{ref:t,onStep:n,ariaLabel:r,ariaValueNow:a,ariaValueText:o,maxValue:s=100,minValue:u=0,step:d=1,bigStep:g=10}=e,b=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 m=e=>{if(!t.current||"function"!=typeof b.onChange)return;e.preventDefault();const n=t.current.getBoundingClientRect();if("both"===b.direction){let t=i(e,n,s,u),r=c(e,n,s,u);return b.onChange({x:t,y:r})}if("horizontal"===b.direction){let t=i(e,n,s,u);return b.onChange(t)}if("vertical"===b.direction){let t=c(e,n,s,u);return b.onChange(t)}};return{sliderProps:{tabIndex:0,onPointerDown:e=>{var n;t.current&&(e.preventDefault(),t.current.focus(),document.body.style.touchAction="none",t.current.onpointermove=m,null===(n=t.current)||void 0===n||n.setPointerCapture(e.pointerId),m(e))},onPointerUp:e=>{t.current&&(t.current.onpointermove=null,t.current.releasePointerCapture(e.pointerId),document.body.style.touchAction="auto")},onKeyDown:e=>{var t,r;e.key!==l.Tab&&e.preventDefault();let a=e.shiftKey?g:d;switch(e.key){case l.ArrowLeft:case l.ArrowDown:null==n||n(-a);break;case l.ArrowRight:case l.ArrowUp:null==n||n(a);break;case l.Home:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(t=b.onChange)||void 0===t||t.call(b,u);break;case l.End:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(r=b.onChange)||void 0===r||r.call(b,s);break;default:return}},role:"slider","aria-valuemin":u,"aria-valuemax":s,"aria-label":r,"aria-valuenow":a,"aria-valuetext":o}}},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)),c=a-o;return o=255*(o+c)|0,i=255*(i+c)|0,c=255*c|0,l>=0&&l<1?{r:o,g:i,b:c}:l>=1&&l<2?{r:i,g:o,b:c}:l>=2&&l<3?{r:c,g:o,b:i}:l>=3&&l<4?{r:c,g:i,b:o}:l>=4&&l<5?{r:i,g:c,b:o}:l>=5&&l<6?{r:o,g:c,b:i}:{r:0,g:0,b:0}},b=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),c=i-Math.min(a,o,l),u=0,d=0,g=0;return c&&(i===a&&(u=(o-l)/c),i===o&&(u=2+(l-a)/c),i===l&&(u=4+(a-o)/c),i&&(d=c/i)),u=60*u|0,u<0&&(u+=360),d=100*d|0,g=100*i|0,{h:u,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),p=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),f={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},h=(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:c}=b({r:r,g:a,b:o});return{r:r,g:a,b:o,a:l,h:s,s:i,v:c,hex:m({r:r,g:a,b:o},!1),str:p({r:r,g:a,b:o,a:l})}})},v=(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:c}=g({h:r,s:a,v:o});return{h:r,s:a,v:o,r:s,g:i,b:c,a:l,hex:m({r:s,g:i,b:c},!1),str:p({r:s,g:i,b:c,a:l})}})},y=(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:c,g:u,b:d}=g({h:a,s:o,v:l});return{h:a,s:o,v:l,r:c,g:u,b:d,a:i,hex:m({r:c,g:u,b:d},!1),str:p({r:c,g:u,b:d,a:i})}})},x=t=>{const[n,r]=e.useState(t.defaultValue||f);e.useEffect(()=>{t.value&&r(t.value)},[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=>v(a,"h",e,359),setS:e=>v(a,"s",e),setV:e=>v(a,"v",e),setR:e=>h(a,"r",e),setG:e=>h(a,"g",e),setB:e=>h(a,"b",e),setA:e=>{d(e,100)&&a(t=>{const n=Object.assign(Object.assign({},t),{a:e});return n.str=p(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),c=p({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: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}=b({r:r,g:a,b:o}),c=p({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=>y(a,"h",e,359),rotateS:e=>y(a,"s",e),rotateV:e=>y(a,"v",e),rotateA:e=>{a(t=>Object.assign(Object.assign({},t),{a:s(t.a+e,100,0)}))},color:n,getSolidColor:()=>(({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})})({h:n.h,s:100,v:100})}};function _(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 A={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};_(".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 w={thumb:"common-module_thumb__3Kyme",overlay:"common-module_overlay__3Oki6",vHidden:"common-module_vHidden__kcR2k",transBackground:"common-module_transBackground__2AOKu"};_(".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");const E=t=>{var{state:n}=t,r=o(t,["state"]);const s=e.useRef(null),{containerProps:i,descriptionProps:c}=(({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,c=o.replace("{0}",String(i.s)).replace("{1}",String(i.v)),{sliderProps:d}=u({ref:n,maxValue:100,direction:"both",ariaLabel:a,ariaValueText:c,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:n,ref:s});return a.default.createElement("div",Object.assign({className:[A.container,r.className||""].join(" ")},r,i,{style:Object.assign({background:n.getSolidColor()},r.style),ref:s}),a.default.createElement("div",Object.assign({className:w.vHidden},c)),a.default.createElement("div",{style:Object.assign({left:n.color.s+"%",top:100-n.color.v+"%",backgroundColor:"#"+n.color.hex},r.style),className:w.thumb}),a.default.createElement("div",{className:[w.overlay,A.light].join(" ")}),a.default.createElement("div",{className:[w.overlay,A.dark].join(" ")}))};var k={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};_(".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 O={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(",")})`},C=e.memo(t=>{var{state:n}=t,r=o(t,["state"]);const l=e.useRef(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:n}=u({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:n});return a.default.createElement("div",Object.assign({},r,s,{className:[k.container,r.className||""].join(" "),style:Object.assign(Object.assign({},O),r.style),ref:l}),a.default.createElement("div",{className:[w.thumb,k.thumb].join(" "),style:{left:100*n.color.h/359+"%",background:n.getSolidColor()}}))}),j=e.memo(t=>{var{state:n}=t,r=o(t,["state"]);const l=e.useRef(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:n}=u({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:n});return a.default.createElement("div",Object.assign({},r,s,{className:[k.container,w.transBackground,r.className||""].join(" "),ref:l}),a.default.createElement("div",{className:[w.overlay,k.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${n.color.hex})`}}),a.default.createElement("div",{className:[w.thumb,k.thumb].join(" "),style:{left:100*n.color.a/100+"%",background:n.color.str}}))}),S=e=>{var{color:t}=e,n=o(e,["color"]);return a.default.createElement("div",Object.assign({},n,{className:w.transBackground,style:Object.assign(Object.assign({},n.style),{display:"inline-block",backgroundImage:"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)"})}),a.default.createElement("div",{style:{boxShadow:"rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset",backgroundColor:t,width:"40px",height:"40px"}}))};var N="index-module_container__p6aGD";_(".index-module_container__p6aGD {\n  padding: 10px;\n  border-radius: 6px;\n  border: 1px solid #dcdbdb;\n  display: inline-block;\n  font-family: sans-serif;\n  background: white;\n}\n");var P="styles-module_label__XgqtI",V="styles-module_input__2EvWe",H="styles-module_select__3Z7Hr";_('.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 R=({label:e,value:t,onChange:n,max:r=255,type:o="number"})=>a.default.createElement("label",{className:P},a.default.createElement("input",{className:V,value:t,type:o,min:0,max:r,onChange:n}),a.default.createElement("span",{style:{fontSize:"12px",fontWeight:500}},e)),B=["hex","rgba","hsva"],U=({state:t})=>{const n=e=>{t.setA(parseFloat(e.target.value))},[r,o]=e.useState("hex");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"===r&&a.default.createElement(a.default.Fragment,null,a.default.createElement(R,{label:"R",onChange:e=>{t.setR(parseFloat(e.target.value))},value:t.color.r}),a.default.createElement(R,{label:"G",onChange:e=>{t.setG(parseFloat(e.target.value))},value:t.color.g}),a.default.createElement(R,{label:"B",onChange:e=>{t.setB(parseFloat(e.target.value))},value:t.color.b}),a.default.createElement(R,{label:"A",onChange:n,value:t.color.a,max:100})),"hsva"===r&&a.default.createElement(a.default.Fragment,null,a.default.createElement(R,{label:"H",onChange:e=>{t.setH(parseFloat(e.target.value))},value:t.color.h}),a.default.createElement(R,{label:"S",onChange:e=>{t.setS(parseFloat(e.target.value))},value:t.color.s}),a.default.createElement(R,{label:"V",onChange:e=>{t.setV(parseFloat(e.target.value))},value:t.color.v}),a.default.createElement(R,{label:"A",onChange:n,value:t.color.a,max:100})),"hex"===r&&a.default.createElement(R,{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:H,style:{marginLeft:"auto"},onClick:()=>{const e=B.indexOf(r),t=e===B.length-1?0:e+1;o(B[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"}))))},F=e.forwardRef((e,t)=>{var{showPreview:n=!0,showParams:r=!1}=e,l=o(e,["showPreview","showParams"]);const s=x(l);return a.default.createElement("div",{className:N,role:"group",ref:t},a.default.createElement(E,{style:{marginBottom:"10px"},state:s}),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},a.default.createElement("div",{style:{flex:1}},a.default.createElement(C,{style:{marginBottom:"10px"},state:s}),a.default.createElement(j,{state:s})),n&&a.default.createElement("div",{style:{width:"10px"}}),n&&a.default.createElement(S,{color:s.color.str})),r&&a.default.createElement(U,{state:s}))});exports.default=F;
+"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 r,n,a=t(e);function o(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(n=r||(r={})).PageUp="PageUp",n.PageDown="PageDown",n.End="End",n.Home="Home",n.ArrowLeft="ArrowLeft",n.ArrowUp="ArrowUp",n.ArrowRight="ArrowRight",n.ArrowDown="ArrowDown",n.Tab="Tab";var l=r;function s(e=0,t,r=0){return e<r?r:e>t?t:e}const i=(e,t,r,n)=>{let a=(e.clientX-t.left)/t.width;return a=s(Math.round(a*r),r,n),a},c=(e,t,r,n)=>{let a=(e.clientY-t.top)/t.height;return a=s(Math.round(a*r),r,n),a},u=t=>{var{ref:r,onStep:n,ariaLabel:a,ariaValueNow:o,ariaValueText:s,maxValue:u=100,minValue:d=0,step:g=1,bigStep:b=10}=t,m=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(t,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const p=e.useRef(()=>{});e.useEffect(()=>p.current,[]);const f=e.useCallback(e=>{if(!r.current||"function"!=typeof m.onChange)return;e.preventDefault();const t=r.current.getBoundingClientRect();if("both"===m.direction){let r=i(e,t,u,d),n=c(e,t,u,d);return m.onChange({x:r,y:n})}if("horizontal"===m.direction){let r=i(e,t,u,d);return m.onChange(r)}if("vertical"===m.direction){let r=c(e,t,u,d);return m.onChange(r)}},[m.direction,m.onChange]),h=e.useCallback(e=>{var t;r.current&&(e.preventDefault(),p.current=(()=>{const e=e=>{e.preventDefault()};return window.addEventListener("touchmove",e,{passive:!1,capture:!0}),()=>{window.removeEventListener("touchmove",e,{capture:!0})}})(),r.current.focus(),r.current.onpointermove=f,null===(t=r.current)||void 0===t||t.setPointerCapture(e.pointerId),f(e))},[f]),v=e.useCallback(e=>{r.current&&(r.current.onpointermove=null,r.current.releasePointerCapture(e.pointerId),p.current(),p.current=()=>{})},[]);return{sliderProps:{tabIndex:0,onPointerDown:h,onPointerUp:v,onKeyDown:e=>{var t,r;e.key!==l.Tab&&e.preventDefault();let a=e.shiftKey?b:g;switch(e.key){case l.ArrowLeft:case l.ArrowDown:null==n||n(-a);break;case l.ArrowRight:case l.ArrowUp:null==n||n(a);break;case l.Home:"vertical"!==m.direction&&"horizontal"!==m.direction||null===(t=m.onChange)||void 0===t||t.call(m,d);break;case l.End:"vertical"!==m.direction&&"horizontal"!==m.direction||null===(r=m.onChange)||void 0===r||r.call(m,u);break;default:return}},onPointerCancel:v,role:"slider","aria-valuemin":d,"aria-valuemax":u,"aria-label":a,"aria-valuenow":o,"aria-valuetext":s}}},d=(e,t,r=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=r&&e<=t,g=e=>{const{h:t,s:r,v:n}=(({h:e,s:t,v:r})=>({h:s(e,359,0),s:s(t,100,0),v:s(r,100,0)}))(e);let a=n/100,o=r/100*a,l=t/60,i=o*(1-Math.abs(l%2-1)),c=a-o;return o=255*(o+c)|0,i=255*(i+c)|0,c=255*c|0,l>=0&&l<1?{r:o,g:i,b:c}:l>=1&&l<2?{r:i,g:o,b:c}:l>=2&&l<3?{r:c,g:o,b:i}:l>=3&&l<4?{r:c,g:i,b:o}:l>=4&&l<5?{r:i,g:c,b:o}:l>=5&&l<6?{r:o,g:c,b:i}:{r:0,g:0,b:0}},b=e=>{const{r:t,g:r,b:n}=(({r:e,g:t,b:r})=>({r:s(e,255,0),g:s(t,255,0),b:s(r,255,0)}))(e);let a=t/255,o=r/255,l=n/255,i=Math.max(a,o,l),c=i-Math.min(a,o,l),u=0,d=0,g=0;return c&&(i===a&&(u=(o-l)/c),i===o&&(u=2+(l-a)/c),i===l&&(u=4+(a-o)/c),i&&(d=c/i)),u=60*u|0,u<0&&(u+=360),d=100*d|0,g=100*i|0,{h:u,s:d,v:g}},m=({r:e,g:t,b:r},n=!0)=>(n?"#":"")+((1<<24)+(e<<16)+(t<<8)+r).toString(16).slice(1),p=e=>e.a<100?(({r:e,g:t,b:r,a:n})=>"number"==typeof n&&!1===isNaN(n)?`rgba(${e}, ${t}, ${r}, ${s(n,100,0)/100})`:`rgb(${e}, ${t}, ${r})`)(e):m(e),f={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},h=(e,t,r)=>{(e=>d(e,255))(r)&&e(e=>{const{r:n,g:a,b:o,a:l}=Object.assign(Object.assign({},e),{[t]:r}),{h:s,s:i,v:c}=b({r:n,g:a,b:o});return{r:n,g:a,b:o,a:l,h:s,s:i,v:c,hex:m({r:n,g:a,b:o},!1),str:p({r:n,g:a,b:o,a:l})}})},v=(e,t,r,n=100)=>{d(r,n)&&e(e=>{const{h:n,s:a,v:o,a:l}=Object.assign(Object.assign({},e),{[t]:r}),{r:s,g:i,b:c}=g({h:n,s:a,v:o});return{h:n,s:a,v:o,r:s,g:i,b:c,a:l,hex:m({r:s,g:i,b:c},!1),str:p({r:s,g:i,b:c,a:l})}})},y=(e,t,r,n=100)=>{e(e=>{const{h:a,s:o,v:l,a:i}=Object.assign(Object.assign({},e),{[t]:s(e[t]+r,n,0)}),{r:c,g:u,b:d}=g({h:a,s:o,v:l});return{h:a,s:o,v:l,r:c,g:u,b:d,a:i,hex:m({r:c,g:u,b:d},!1),str:p({r:c,g:u,b:d,a:i})}})},x=t=>{const[r,n]=e.useState(t.defaultValue||f);e.useEffect(()=>{t.value&&n(t.value)},[t.value]);const a=e=>{if("function"==typeof t.onChange){if(void 0!==t.value)return void t.onChange("function"==typeof e?e(r):e);t.onChange("function"==typeof e?e(r):e)}n(e)};return{setH:e=>v(a,"h",e,359),setS:e=>v(a,"s",e),setV:e=>v(a,"v",e),setR:e=>h(a,"r",e),setG:e=>h(a,"g",e),setB:e=>h(a,"b",e),setA:e=>{d(e,100)&&a(t=>{const r=Object.assign(Object.assign({},t),{a:e});return r.str=p(r),r})},setSV:(e,t)=>{(d(e,100)||d(t,100))&&a(r=>{const{h:n,a:a}=r,{r:o,g:l,b:s}=g({h:n,s:e,v:t}),i=m({r:o,g:l,b:s},!1),c=p({r:o,g:l,b:s,a:a});return{h:n,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})=>{a(({a:r})=>{const{r:n,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}=b({r:n,g:a,b:o}),c=p({r:n,g:a,b:o,a:r});return{r:n,g:a,b:o,h:l,s:s,v:i,hex:e,a:r,str:c}})},rotateH:e=>y(a,"h",e,359),rotateS:e=>y(a,"s",e),rotateV:e=>y(a,"v",e),rotateA:e=>{a(t=>Object.assign(Object.assign({},t),{a:s(t.a+e,100,0)}))},color:r,getSolidColor:()=>(({h:e,s:t,v:r})=>{let{r:n,g:a,b:o}=g({h:e,s:t,v:r});return m({r:n,g:a,b:o})})({h:r.h,s:100,v:100})}};function _(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var w={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};_(".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 A={thumb:"common-module_thumb__3Kyme",overlay:"common-module_overlay__3Oki6",vHidden:"common-module_vHidden__kcR2k",transBackground:"common-module_transBackground__2AOKu"};_(".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");const E=t=>{var{state:r}=t,n=o(t,["state"]);const s=e.useRef(null),{containerProps:i,descriptionProps:c}=(({state:t,ref:r,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 s=e.useRef(!1),i=t.color,c=o.replace("{0}",String(i.s)).replace("{1}",String(i.v)),{sliderProps:d}=u({ref:r,maxValue:100,direction:"both",ariaLabel:a,ariaValueText:c,ariaValueNow:s.current?i.s:i.v,onChange({x:e,y:r}){r=100-r,t.setSV(e,r)}});return{containerProps:Object.assign(Object.assign({},d),{onKeyDown:e=>{e.key!==l.Tab&&e.preventDefault();const r=e.shiftKey?10:1;switch(e.key){case l.ArrowUp:s.current=!1,t.rotateV(r);break;case l.ArrowDown:s.current=!1,t.rotateV(-r);break;case l.ArrowLeft:s.current=!0,t.rotateS(-r);break;case l.ArrowRight:s.current=!0,t.rotateS(r);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:n}}})({state:r,ref:s});return a.default.createElement("div",Object.assign({className:[w.container,n.className||""].join(" ")},n,i,{style:Object.assign({background:r.getSolidColor()},n.style),ref:s}),a.default.createElement("div",Object.assign({className:A.vHidden},c)),a.default.createElement("div",{style:Object.assign({left:r.color.s+"%",top:100-r.color.v+"%",backgroundColor:"#"+r.color.hex},n.style),className:A.thumb}),a.default.createElement("div",{className:[A.overlay,w.light].join(" ")}),a.default.createElement("div",{className:[A.overlay,w.dark].join(" ")}))};var k={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};_(".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 C={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(",")})`},O=e.memo(t=>{var{state:r}=t,n=o(t,["state"]);const l=e.useRef(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:r}=u({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:r}})({ref:l,state:r});return a.default.createElement("div",Object.assign({},n,s,{className:[k.container,n.className||""].join(" "),style:Object.assign(Object.assign({},C),n.style),ref:l}),a.default.createElement("div",{className:[A.thumb,k.thumb].join(" "),style:{left:100*r.color.h/359+"%",background:r.getSolidColor()}}))}),j=e.memo(t=>{var{state:r}=t,n=o(t,["state"]);const l=e.useRef(null),{sliderProps:s}=(({state:e,ref:t})=>{const{sliderProps:r}=u({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:r}})({ref:l,state:r});return a.default.createElement("div",Object.assign({},n,s,{className:[k.container,A.transBackground,n.className||""].join(" "),ref:l}),a.default.createElement("div",{className:[A.overlay,k.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${r.color.hex})`}}),a.default.createElement("div",{className:[A.thumb,k.thumb].join(" "),style:{left:100*r.color.a/100+"%",background:r.color.str}}))}),S=e=>{var{color:t}=e,r=o(e,["color"]);return a.default.createElement("div",Object.assign({},r,{className:A.transBackground,style:Object.assign(Object.assign({},r.style),{display:"inline-block",backgroundImage:"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)"})}),a.default.createElement("div",{style:{boxShadow:"rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px inset",backgroundColor:t,width:"40px",height:"40px"}}))};var P="index-module_container__p6aGD";_(".index-module_container__p6aGD {\n  padding: 10px;\n  border-radius: 6px;\n  border: 1px solid #dcdbdb;\n  display: inline-block;\n  font-family: sans-serif;\n  background: white;\n}\n");var N="styles-module_label__XgqtI",V="styles-module_input__2EvWe",H="styles-module_select__3Z7Hr";_('.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 R=({label:e,value:t,onChange:r,max:n=255,type:o="number"})=>a.default.createElement("label",{className:N},a.default.createElement("input",{className:V,value:t,type:o,min:0,max:n,onChange:r}),a.default.createElement("span",{style:{fontSize:"12px",fontWeight:500}},e)),B=["hex","rgba","hsva"],U=({state:t})=>{const r=e=>{t.setA(parseFloat(e.target.value))},[n,o]=e.useState("hex");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(R,{label:"R",onChange:e=>{t.setR(parseFloat(e.target.value))},value:t.color.r}),a.default.createElement(R,{label:"G",onChange:e=>{t.setG(parseFloat(e.target.value))},value:t.color.g}),a.default.createElement(R,{label:"B",onChange:e=>{t.setB(parseFloat(e.target.value))},value:t.color.b}),a.default.createElement(R,{label:"A",onChange:r,value:t.color.a,max:100})),"hsva"===n&&a.default.createElement(a.default.Fragment,null,a.default.createElement(R,{label:"H",onChange:e=>{t.setH(parseFloat(e.target.value))},value:t.color.h}),a.default.createElement(R,{label:"S",onChange:e=>{t.setS(parseFloat(e.target.value))},value:t.color.s}),a.default.createElement(R,{label:"V",onChange:e=>{t.setV(parseFloat(e.target.value))},value:t.color.v}),a.default.createElement(R,{label:"A",onChange:r,value:t.color.a,max:100})),"hex"===n&&a.default.createElement(R,{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:H,style:{marginLeft:"auto"},onClick:()=>{const e=B.indexOf(n),t=e===B.length-1?0:e+1;o(B[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"}))))},F=e.forwardRef((e,t)=>{var{showPreview:r=!0,showParams:n=!1}=e,l=o(e,["showPreview","showParams"]);const s=x(l);return a.default.createElement("div",{className:P,role:"group",ref:t},a.default.createElement(E,{style:{marginBottom:"10px"},state:s}),a.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},a.default.createElement("div",{style:{flex:1}},a.default.createElement(O,{style:{marginBottom:"10px"},state:s}),a.default.createElement(j,{state:s})),r&&a.default.createElement("div",{style:{width:"10px"}}),r&&a.default.createElement(S,{color:s.color.str})),n&&a.default.createElement(U,{state:s}))});exports.default=F;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@atomik-color/component",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "license": "MIT",
@@ -36,3 +36,3 @@ "author": "Dilshod Turobov <[e-mail]",
   "dependencies": {
-    "@atomik-color/core": "^1.0.12"
+    "@atomik-color/core": "^1.0.13"
   },
@@ -42,3 +42,3 @@ "devDependencies": {
   },
-  "gitHead": "15735d2e65f83460138c4ed522d1506d705f7a87"
+  "gitHead": "8dc2d2eb0da256df0227611e92d391a9f681e52f"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

167039

increased by2.69%

Number of package files

15

increased by7.14%

Lines of code

179

increased by1.13%

Dependency changes

• Updated@atomik-color/core@^1.0.13