New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@atomik-color/component
Advanced tools
@atomik-color/component - npm Package Compare versions
Comparing version 1.0.12 to 1.0.13
@@ -6,2 +6,10 @@ # Change Log | ||
| ## [1.0.13](https://github.com/deebov/color-picker/compare/@atomik-color/component@1.0.12...@atomik-color/component@1.0.13) (2020-10-11) | ||
| **Note:** Version bump only for package @atomik-color/component | ||
| ## [1.0.12](https://github.com/deebov/color-picker/compare/@atomik-color/component@1.0.11...@atomik-color/component@1.0.12) (2020-10-02) | ||
@@ -8,0 +16,0 @@ |
@@ -1,2 +0,2 @@ | ||
| import e,{useState as t,useEffect as r,useRef as n,memo as a,forwardRef as o}from"react";function s(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}var i,l;(l=i||(i={})).PageUp="PageUp",l.PageDown="PageDown",l.End="End",l.Home="Home",l.ArrowLeft="ArrowLeft",l.ArrowUp="ArrowUp",l.ArrowRight="ArrowRight",l.ArrowDown="ArrowDown",l.Tab="Tab";var c=i;function d(e=0,t,r=0){return e<r?r:e>t?t:e}const u=(e,t,r,n)=>{let a=(e.clientX-t.left)/t.width;return a=d(Math.round(a*r),r,n),a},g=(e,t,r,n)=>{let a=(e.clientY-t.top)/t.height;return a=d(Math.round(a*r),r,n),a},b=e=>{var{ref:t,onStep:r,ariaLabel:n,ariaValueNow:a,ariaValueText:o,maxValue:s=100,minValue:i=0,step:l=1,bigStep:d=10}=e,b=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}(e,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const m=e=>{if(!t.current||"function"!=typeof b.onChange)return;e.preventDefault();const r=t.current.getBoundingClientRect();if("both"===b.direction){let t=u(e,r,s,i),n=g(e,r,s,i);return b.onChange({x:t,y:n})}if("horizontal"===b.direction){let t=u(e,r,s,i);return b.onChange(t)}if("vertical"===b.direction){let t=g(e,r,s,i);return b.onChange(t)}};return{sliderProps:{tabIndex:0,onPointerDown:e=>{var r;t.current&&(e.preventDefault(),t.current.focus(),document.body.style.touchAction="none",t.current.onpointermove=m,null===(r=t.current)||void 0===r||r.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,n;e.key!==c.Tab&&e.preventDefault();let a=e.shiftKey?d:l;switch(e.key){case c.ArrowLeft:case c.ArrowDown:null==r||r(-a);break;case c.ArrowRight:case c.ArrowUp:null==r||r(a);break;case c.Home:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(t=b.onChange)||void 0===t||t.call(b,i);break;case c.End:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(n=b.onChange)||void 0===n||n.call(b,s);break;default:return}},role:"slider","aria-valuemin":i,"aria-valuemax":s,"aria-label":n,"aria-valuenow":a,"aria-valuetext":o}}},m=(e,t,r=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=r&&e<=t,p=e=>{const{h:t,s:r,v:n}=(({h:e,s:t,v:r})=>({h:d(e,359,0),s:d(t,100,0),v:d(r,100,0)}))(e);let a=n/100,o=r/100*a,s=t/60,i=o*(1-Math.abs(s%2-1)),l=a-o;return o=255*(o+l)|0,i=255*(i+l)|0,l=255*l|0,s>=0&&s<1?{r:o,g:i,b:l}:s>=1&&s<2?{r:i,g:o,b:l}:s>=2&&s<3?{r:l,g:o,b:i}:s>=3&&s<4?{r:l,g:i,b:o}:s>=4&&s<5?{r:i,g:l,b:o}:s>=5&&s<6?{r:o,g:l,b:i}:{r:0,g:0,b:0}},h=e=>{const{r:t,g:r,b:n}=(({r:e,g:t,b:r})=>({r:d(e,255,0),g:d(t,255,0),b:d(r,255,0)}))(e);let a=t/255,o=r/255,s=n/255,i=Math.max(a,o,s),l=i-Math.min(a,o,s),c=0,u=0,g=0;return l&&(i===a&&(c=(o-s)/l),i===o&&(c=2+(s-a)/l),i===s&&(c=4+(a-o)/l),i&&(u=l/i)),c=60*c|0,c<0&&(c+=360),u=100*u|0,g=100*i|0,{h:c,s:u,v:g}},f=({r:e,g:t,b:r},n=!0)=>(n?"#":"")+((1<<24)+(e<<16)+(t<<8)+r).toString(16).slice(1),v=e=>e.a<100?(({r:e,g:t,b:r,a:n})=>"number"==typeof n&&!1===isNaN(n)?`rgba(${e}, ${t}, ${r}, ${d(n,100,0)/100})`:`rgb(${e}, ${t}, ${r})`)(e):f(e),y={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},A=(e,t,r)=>{(e=>m(e,255))(r)&&e(e=>{const{r:n,g:a,b:o,a:s}=Object.assign(Object.assign({},e),{[t]:r}),{h:i,s:l,v:c}=h({r:n,g:a,b:o});return{r:n,g:a,b:o,a:s,h:i,s:l,v:c,hex:f({r:n,g:a,b:o},!1),str:v({r:n,g:a,b:o,a:s})}})},x=(e,t,r,n=100)=>{m(r,n)&&e(e=>{const{h:n,s:a,v:o,a:s}=Object.assign(Object.assign({},e),{[t]:r}),{r:i,g:l,b:c}=p({h:n,s:a,v:o});return{h:n,s:a,v:o,r:i,g:l,b:c,a:s,hex:f({r:i,g:l,b:c},!1),str:v({r:i,g:l,b:c,a:s})}})},_=(e,t,r,n=100)=>{e(e=>{const{h:a,s:o,v:s,a:i}=Object.assign(Object.assign({},e),{[t]:d(e[t]+r,n,0)}),{r:l,g:c,b:u}=p({h:a,s:o,v:s});return{h:a,s:o,v:s,r:l,g:c,b:u,a:i,hex:f({r:l,g:c,b:u},!1),str:v({r:l,g:c,b:u,a:i})}})},w=e=>{const[n,a]=t(e.defaultValue||y);r(()=>{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(n):t);e.onChange("function"==typeof t?t(n):t)}a(t)};return{setH:e=>x(o,"h",e,359),setS:e=>x(o,"s",e),setV:e=>x(o,"v",e),setR:e=>A(o,"r",e),setG:e=>A(o,"g",e),setB:e=>A(o,"b",e),setA:e=>{m(e,100)&&o(t=>{const r=Object.assign(Object.assign({},t),{a:e});return r.str=v(r),r})},setSV:(e,t)=>{(m(e,100)||m(t,100))&&o(r=>{const{h:n,a:a}=r,{r:o,g:s,b:i}=p({h:n,s:e,v:t}),l=f({r:o,g:s,b:i},!1),c=v({r:o,g:s,b:i,a:a});return{h:n,s:e,v:t,r:o,g:s,b:i,a:a,hex:l,str:c}})},setHex:(e,t={r:n.r,g:n.g,b:n.b})=>{o(({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:s,s:i,v:l}=h({r:n,g:a,b:o}),c=v({r:n,g:a,b:o,a:r});return{r:n,g:a,b:o,h:s,s:i,v:l,hex:e,a:r,str:c}})},rotateH:e=>_(o,"h",e,359),rotateS:e=>_(o,"s",e),rotateV:e=>_(o,"v",e),rotateA:e=>{o(t=>Object.assign(Object.assign({},t),{a:d(t.a+e,100,0)}))},color:n,getSolidColor:()=>(({h:e,s:t,v:r})=>{let{r:n,g:a,b:o}=p({h:e,s:t,v:r});return f({r:n,g:a,b:o})})({h:n.h,s:100,v:100})}};function O(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 k={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};O(".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 j={thumb:"common-module_thumb__3Kyme",overlay:"common-module_overlay__3Oki6",vHidden:"common-module_vHidden__kcR2k",transBackground:"common-module_transBackground__2AOKu"};O(".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 C=t=>{var{state:r}=t,a=s(t,["state"]);const o=n(null),{containerProps:i,descriptionProps:l}=(({state:e,ref:t,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=n(!1),i=e.color,l=o.replace("{0}",String(i.s)).replace("{1}",String(i.v)),{sliderProps:d}=b({ref:t,maxValue:100,direction:"both",ariaLabel:a,ariaValueText:l,ariaValueNow:s.current?i.s:i.v,onChange({x:t,y:r}){r=100-r,e.setSV(t,r)}});return{containerProps:Object.assign(Object.assign({},d),{onKeyDown:t=>{t.key!==c.Tab&&t.preventDefault();const r=t.shiftKey?10:1;switch(t.key){case c.ArrowUp:s.current=!1,e.rotateV(r);break;case c.ArrowDown:s.current=!1,e.rotateV(-r);break;case c.ArrowLeft:s.current=!0,e.rotateS(-r);break;case c.ArrowRight:s.current=!0,e.rotateS(r);break;case c.Home:s.current=!0,e.setS(0);break;case c.End:s.current=!0,e.setS(100);break;case c.PageUp:s.current=!1,e.setV(100);break;case c.PageDown:s.current=!1,e.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:r}}})({state:r,ref:o});return e.createElement("div",Object.assign({className:[k.container,a.className||""].join(" ")},a,i,{style:Object.assign({background:r.getSolidColor()},a.style),ref:o}),e.createElement("div",Object.assign({className:j.vHidden},l)),e.createElement("div",{style:Object.assign({left:r.color.s+"%",top:100-r.color.v+"%",backgroundColor:"#"+r.color.hex},a.style),className:j.thumb}),e.createElement("div",{className:[j.overlay,k.light].join(" ")}),e.createElement("div",{className:[j.overlay,k.dark].join(" ")}))};var S={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};O(".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 V={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=a(t=>{var{state:r}=t,a=s(t,["state"]);const o=n(null),{sliderProps:i}=(({state:e,ref:t})=>{const{sliderProps:r}=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:r}})({ref:o,state:r});return e.createElement("div",Object.assign({},a,i,{className:[S.container,a.className||""].join(" "),style:Object.assign(Object.assign({},V),a.style),ref:o}),e.createElement("div",{className:[j.thumb,S.thumb].join(" "),style:{left:100*r.color.h/359+"%",background:r.getSolidColor()}}))}),N=a(t=>{var{state:r}=t,a=s(t,["state"]);const o=n(null),{sliderProps:i}=(({state:e,ref:t})=>{const{sliderProps:r}=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:r}})({ref:o,state:r});return e.createElement("div",Object.assign({},a,i,{className:[S.container,j.transBackground,a.className||""].join(" "),ref:o}),e.createElement("div",{className:[j.overlay,S.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${r.color.hex})`}}),e.createElement("div",{className:[j.thumb,S.thumb].join(" "),style:{left:100*r.color.a/100+"%",background:r.color.str}}))}),P=t=>{var{color:r}=t,n=s(t,["color"]);return e.createElement("div",Object.assign({},n,{className:j.transBackground,style:Object.assign(Object.assign({},n.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:r,width:"40px",height:"40px"}}))};var U="index-module_container__p6aGD";O(".index-module_container__p6aGD {\n padding: 10px;\n border-radius: 6px;\n border: 1px solid #dcdbdb;\n}\n");const H=o((t,r)=>{var{showPreview:n=!0}=t,a=s(t,["showPreview"]);const o=w(a);return e.createElement("div",{className:U,role:"group",ref:r,style:{maxWidth:"220px"}},e.createElement(C,{style:{marginBottom:"10px"},state:o}),e.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},e.createElement("div",{style:{flex:1}},e.createElement(E,{style:{marginBottom:"10px"},state:o}),e.createElement(N,{state:o})),n&&e.createElement("div",{style:{width:"10px"}}),n&&e.createElement(P,{color:o.color.str})))});export default H; | ||
| import e,{useState as t,useEffect as r,useRef as n,memo as a,forwardRef as o}from"react";function s(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}var i,l;(l=i||(i={})).PageUp="PageUp",l.PageDown="PageDown",l.End="End",l.Home="Home",l.ArrowLeft="ArrowLeft",l.ArrowUp="ArrowUp",l.ArrowRight="ArrowRight",l.ArrowDown="ArrowDown",l.Tab="Tab";var c=i;function d(e=0,t,r=0){return e<r?r:e>t?t:e}const u=(e,t,r,n)=>{let a=(e.clientX-t.left)/t.width;return a=d(Math.round(a*r),r,n),a},g=(e,t,r,n)=>{let a=(e.clientY-t.top)/t.height;return a=d(Math.round(a*r),r,n),a},b=e=>{var{ref:t,onStep:r,ariaLabel:n,ariaValueNow:a,ariaValueText:o,maxValue:s=100,minValue:i=0,step:l=1,bigStep:d=10}=e,b=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}(e,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const m=e=>{if(!t.current||"function"!=typeof b.onChange)return;e.preventDefault();const r=t.current.getBoundingClientRect();if("both"===b.direction){let t=u(e,r,s,i),n=g(e,r,s,i);return b.onChange({x:t,y:n})}if("horizontal"===b.direction){let t=u(e,r,s,i);return b.onChange(t)}if("vertical"===b.direction){let t=g(e,r,s,i);return b.onChange(t)}};return{sliderProps:{tabIndex:0,onPointerDown:e=>{var r;t.current&&(e.preventDefault(),t.current.focus(),document.body.style.touchAction="none",t.current.onpointermove=m,null===(r=t.current)||void 0===r||r.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,n;e.key!==c.Tab&&e.preventDefault();let a=e.shiftKey?d:l;switch(e.key){case c.ArrowLeft:case c.ArrowDown:null==r||r(-a);break;case c.ArrowRight:case c.ArrowUp:null==r||r(a);break;case c.Home:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(t=b.onChange)||void 0===t||t.call(b,i);break;case c.End:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(n=b.onChange)||void 0===n||n.call(b,s);break;default:return}},role:"slider","aria-valuemin":i,"aria-valuemax":s,"aria-label":n,"aria-valuenow":a,"aria-valuetext":o}}},m=(e,t,r=0)=>(e=>"number"==typeof e&&!1===isNaN(e))(e)&&e>=r&&e<=t,p=e=>{const{h:t,s:r,v:n}=(({h:e,s:t,v:r})=>({h:d(e,359,0),s:d(t,100,0),v:d(r,100,0)}))(e);let a=n/100,o=r/100*a,s=t/60,i=o*(1-Math.abs(s%2-1)),l=a-o;return o=255*(o+l)|0,i=255*(i+l)|0,l=255*l|0,s>=0&&s<1?{r:o,g:i,b:l}:s>=1&&s<2?{r:i,g:o,b:l}:s>=2&&s<3?{r:l,g:o,b:i}:s>=3&&s<4?{r:l,g:i,b:o}:s>=4&&s<5?{r:i,g:l,b:o}:s>=5&&s<6?{r:o,g:l,b:i}:{r:0,g:0,b:0}},h=e=>{const{r:t,g:r,b:n}=(({r:e,g:t,b:r})=>({r:d(e,255,0),g:d(t,255,0),b:d(r,255,0)}))(e);let a=t/255,o=r/255,s=n/255,i=Math.max(a,o,s),l=i-Math.min(a,o,s),c=0,u=0,g=0;return l&&(i===a&&(c=(o-s)/l),i===o&&(c=2+(s-a)/l),i===s&&(c=4+(a-o)/l),i&&(u=l/i)),c=60*c|0,c<0&&(c+=360),u=100*u|0,g=100*i|0,{h:c,s:u,v:g}},f=({r:e,g:t,b:r},n=!0)=>(n?"#":"")+((1<<24)+(e<<16)+(t<<8)+r).toString(16).slice(1),v=e=>e.a<100?(({r:e,g:t,b:r,a:n})=>"number"==typeof n&&!1===isNaN(n)?`rgba(${e}, ${t}, ${r}, ${d(n,100,0)/100})`:`rgb(${e}, ${t}, ${r})`)(e):f(e),y={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},A=(e,t,r)=>{(e=>m(e,255))(r)&&e(e=>{const{r:n,g:a,b:o,a:s}=Object.assign(Object.assign({},e),{[t]:r}),{h:i,s:l,v:c}=h({r:n,g:a,b:o});return{r:n,g:a,b:o,a:s,h:i,s:l,v:c,hex:f({r:n,g:a,b:o},!1),str:v({r:n,g:a,b:o,a:s})}})},x=(e,t,r,n=100)=>{m(r,n)&&e(e=>{const{h:n,s:a,v:o,a:s}=Object.assign(Object.assign({},e),{[t]:r}),{r:i,g:l,b:c}=p({h:n,s:a,v:o});return{h:n,s:a,v:o,r:i,g:l,b:c,a:s,hex:f({r:i,g:l,b:c},!1),str:v({r:i,g:l,b:c,a:s})}})},_=(e,t,r,n=100)=>{e(e=>{const{h:a,s:o,v:s,a:i}=Object.assign(Object.assign({},e),{[t]:d(e[t]+r,n,0)}),{r:l,g:c,b:u}=p({h:a,s:o,v:s});return{h:a,s:o,v:s,r:l,g:c,b:u,a:i,hex:f({r:l,g:c,b:u},!1),str:v({r:l,g:c,b:u,a:i})}})},w=e=>{const[n,a]=t(e.defaultValue||y);r(()=>{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(n):t);e.onChange("function"==typeof t?t(n):t)}a(t)};return{setH:e=>x(o,"h",e,359),setS:e=>x(o,"s",e),setV:e=>x(o,"v",e),setR:e=>A(o,"r",e),setG:e=>A(o,"g",e),setB:e=>A(o,"b",e),setA:e=>{m(e,100)&&o(t=>{const r=Object.assign(Object.assign({},t),{a:e});return r.str=v(r),r})},setSV:(e,t)=>{(m(e,100)||m(t,100))&&o(r=>{const{h:n,a:a}=r,{r:o,g:s,b:i}=p({h:n,s:e,v:t}),l=f({r:o,g:s,b:i},!1),c=v({r:o,g:s,b:i,a:a});return{h:n,s:e,v:t,r:o,g:s,b:i,a:a,hex:l,str:c}})},setHex:(e,t={r:n.r,g:n.g,b:n.b})=>{o(({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:s,s:i,v:l}=h({r:n,g:a,b:o}),c=v({r:n,g:a,b:o,a:r});return{r:n,g:a,b:o,h:s,s:i,v:l,hex:e,a:r,str:c}})},rotateH:e=>_(o,"h",e,359),rotateS:e=>_(o,"s",e),rotateV:e=>_(o,"v",e),rotateA:e=>{o(t=>Object.assign(Object.assign({},t),{a:d(t.a+e,100,0)}))},color:n,getSolidColor:()=>(({h:e,s:t,v:r})=>{let{r:n,g:a,b:o}=p({h:e,s:t,v:r});return f({r:n,g:a,b:o})})({h:n.h,s:100,v:100})}};function O(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 k={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};O(".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 j={thumb:"common-module_thumb__3Kyme",overlay:"common-module_overlay__3Oki6",vHidden:"common-module_vHidden__kcR2k",transBackground:"common-module_transBackground__2AOKu"};O(".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 C=t=>{var{state:r}=t,a=s(t,["state"]);const o=n(null),{containerProps:i,descriptionProps:l}=(({state:e,ref:t,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=n(!1),i=e.color,l=o.replace("{0}",String(i.s)).replace("{1}",String(i.v)),{sliderProps:d}=b({ref:t,maxValue:100,direction:"both",ariaLabel:a,ariaValueText:l,ariaValueNow:s.current?i.s:i.v,onChange({x:t,y:r}){r=100-r,e.setSV(t,r)}});return{containerProps:Object.assign(Object.assign({},d),{onKeyDown:t=>{t.key!==c.Tab&&t.preventDefault();const r=t.shiftKey?10:1;switch(t.key){case c.ArrowUp:s.current=!1,e.rotateV(r);break;case c.ArrowDown:s.current=!1,e.rotateV(-r);break;case c.ArrowLeft:s.current=!0,e.rotateS(-r);break;case c.ArrowRight:s.current=!0,e.rotateS(r);break;case c.Home:s.current=!0,e.setS(0);break;case c.End:s.current=!0,e.setS(100);break;case c.PageUp:s.current=!1,e.setV(100);break;case c.PageDown:s.current=!1,e.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:r}}})({state:r,ref:o});return e.createElement("div",Object.assign({className:[k.container,a.className||""].join(" ")},a,i,{style:Object.assign({background:r.getSolidColor()},a.style),ref:o}),e.createElement("div",Object.assign({className:j.vHidden},l)),e.createElement("div",{style:Object.assign({left:r.color.s+"%",top:100-r.color.v+"%",backgroundColor:"#"+r.color.hex},a.style),className:j.thumb}),e.createElement("div",{className:[j.overlay,k.light].join(" ")}),e.createElement("div",{className:[j.overlay,k.dark].join(" ")}))};var S={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};O(".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 V={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=a(t=>{var{state:r}=t,a=s(t,["state"]);const o=n(null),{sliderProps:i}=(({state:e,ref:t})=>{const{sliderProps:r}=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:r}})({ref:o,state:r});return e.createElement("div",Object.assign({},a,i,{className:[S.container,a.className||""].join(" "),style:Object.assign(Object.assign({},V),a.style),ref:o}),e.createElement("div",{className:[j.thumb,S.thumb].join(" "),style:{left:100*r.color.h/359+"%",background:r.getSolidColor()}}))}),N=a(t=>{var{state:r}=t,a=s(t,["state"]);const o=n(null),{sliderProps:i}=(({state:e,ref:t})=>{const{sliderProps:r}=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:r}})({ref:o,state:r});return e.createElement("div",Object.assign({},a,i,{className:[S.container,j.transBackground,a.className||""].join(" "),ref:o}),e.createElement("div",{className:[j.overlay,S.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${r.color.hex})`}}),e.createElement("div",{className:[j.thumb,S.thumb].join(" "),style:{left:100*r.color.a/100+"%",background:r.color.str}}))}),P=t=>{var{color:r}=t,n=s(t,["color"]);return e.createElement("div",Object.assign({},n,{className:j.transBackground,style:Object.assign(Object.assign({},n.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:r,width:"40px",height:"40px"}}))};var U="index-module_container__p6aGD";O(".index-module_container__p6aGD {\n padding: 10px;\n border-radius: 6px;\n border: 1px solid #dcdbdb;\n display: inline-block;\n}\n");const H=o((t,r)=>{var{showPreview:n=!0}=t,a=s(t,["showPreview"]);const o=w(a);return e.createElement("div",{className:U,role:"group",ref:r},e.createElement(C,{style:{marginBottom:"10px"},state:o}),e.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},e.createElement("div",{style:{flex:1}},e.createElement(E,{style:{marginBottom:"10px"},state:o}),e.createElement(N,{state:o})),n&&e.createElement("div",{style:{width:"10px"}}),n&&e.createElement(P,{color:o.color.str})))});export default H; | ||
| //# sourceMappingURL=index.esm.js.map |
@@ -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 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 s=r;function l(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=l(Math.round(a*r),r,n),a},c=(e,t,r,n)=>{let a=(e.clientY-t.top)/t.height;return a=l(Math.round(a*r),r,n),a},u=e=>{var{ref:t,onStep:r,ariaLabel:n,ariaValueNow:a,ariaValueText:o,maxValue:l=100,minValue:u=0,step:d=1,bigStep:g=10}=e,b=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}(e,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const m=e=>{if(!t.current||"function"!=typeof b.onChange)return;e.preventDefault();const r=t.current.getBoundingClientRect();if("both"===b.direction){let t=i(e,r,l,u),n=c(e,r,l,u);return b.onChange({x:t,y:n})}if("horizontal"===b.direction){let t=i(e,r,l,u);return b.onChange(t)}if("vertical"===b.direction){let t=c(e,r,l,u);return b.onChange(t)}};return{sliderProps:{tabIndex:0,onPointerDown:e=>{var r;t.current&&(e.preventDefault(),t.current.focus(),document.body.style.touchAction="none",t.current.onpointermove=m,null===(r=t.current)||void 0===r||r.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,n;e.key!==s.Tab&&e.preventDefault();let a=e.shiftKey?g:d;switch(e.key){case s.ArrowLeft:case s.ArrowDown:null==r||r(-a);break;case s.ArrowRight:case s.ArrowUp:null==r||r(a);break;case s.Home:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(t=b.onChange)||void 0===t||t.call(b,u);break;case s.End:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(n=b.onChange)||void 0===n||n.call(b,l);break;default:return}},role:"slider","aria-valuemin":u,"aria-valuemax":l,"aria-label":n,"aria-valuenow":a,"aria-valuetext":o}}},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:l(e,359,0),s:l(t,100,0),v:l(r,100,0)}))(e);let a=n/100,o=r/100*a,s=t/60,i=o*(1-Math.abs(s%2-1)),c=a-o;return o=255*(o+c)|0,i=255*(i+c)|0,c=255*c|0,s>=0&&s<1?{r:o,g:i,b:c}:s>=1&&s<2?{r:i,g:o,b:c}:s>=2&&s<3?{r:c,g:o,b:i}:s>=3&&s<4?{r:c,g:i,b:o}:s>=4&&s<5?{r:i,g:c,b:o}:s>=5&&s<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:l(e,255,0),g:l(t,255,0),b:l(r,255,0)}))(e);let a=t/255,o=r/255,s=n/255,i=Math.max(a,o,s),c=i-Math.min(a,o,s),u=0,d=0,g=0;return c&&(i===a&&(u=(o-s)/c),i===o&&(u=2+(s-a)/c),i===s&&(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}, ${l(n,100,0)/100})`:`rgb(${e}, ${t}, ${r})`)(e):m(e),h={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},f=(e,t,r)=>{(e=>d(e,255))(r)&&e(e=>{const{r:n,g:a,b:o,a:s}=Object.assign(Object.assign({},e),{[t]:r}),{h:l,s:i,v:c}=b({r:n,g:a,b:o});return{r:n,g:a,b:o,a:s,h:l,s:i,v:c,hex:m({r:n,g:a,b:o},!1),str:p({r:n,g:a,b:o,a:s})}})},v=(e,t,r,n=100)=>{d(r,n)&&e(e=>{const{h:n,s:a,v:o,a:s}=Object.assign(Object.assign({},e),{[t]:r}),{r:l,g:i,b:c}=g({h:n,s:a,v:o});return{h:n,s:a,v:o,r:l,g:i,b:c,a:s,hex:m({r:l,g:i,b:c},!1),str:p({r:l,g:i,b:c,a:s})}})},y=(e,t,r,n=100)=>{e(e=>{const{h:a,s:o,v:s,a:i}=Object.assign(Object.assign({},e),{[t]:l(e[t]+r,n,0)}),{r:c,g:u,b:d}=g({h:a,s:o,v:s});return{h:a,s:o,v:s,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})}})},A=t=>{const[r,n]=e.useState(t.defaultValue||h);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=>f(a,"r",e),setG:e=>f(a,"g",e),setB:e=>f(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:s,b:l}=g({h:n,s:e,v:t}),i=m({r:o,g:s,b:l},!1),c=p({r:o,g:s,b:l,a:a});return{h:n,s:e,v:t,r:o,g:s,b:l,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:s,s:l,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:s,s:l,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:l(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 x(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 _={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};x(".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"};x(".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:r}=t,n=o(t,["state"]);const l=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 l=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:l.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!==s.Tab&&e.preventDefault();const r=e.shiftKey?10:1;switch(e.key){case s.ArrowUp:l.current=!1,t.rotateV(r);break;case s.ArrowDown:l.current=!1,t.rotateV(-r);break;case s.ArrowLeft:l.current=!0,t.rotateS(-r);break;case s.ArrowRight:l.current=!0,t.rotateS(r);break;case s.Home:l.current=!0,t.setS(0);break;case s.End:l.current=!0,t.setS(100);break;case s.PageUp:l.current=!1,t.setV(100);break;case s.PageDown:l.current=!1,t.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:n}}})({state:r,ref:l});return a.default.createElement("div",Object.assign({className:[_.container,n.className||""].join(" ")},n,i,{style:Object.assign({background:r.getSolidColor()},n.style),ref:l}),a.default.createElement("div",Object.assign({className:w.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:w.thumb}),a.default.createElement("div",{className:[w.overlay,_.light].join(" ")}),a.default.createElement("div",{className:[w.overlay,_.dark].join(" ")}))};var k={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};x(".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 j={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:r}=t,n=o(t,["state"]);const s=e.useRef(null),{sliderProps:l}=(({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:s,state:r});return a.default.createElement("div",Object.assign({},n,l,{className:[k.container,n.className||""].join(" "),style:Object.assign(Object.assign({},j),n.style),ref:s}),a.default.createElement("div",{className:[w.thumb,k.thumb].join(" "),style:{left:100*r.color.h/359+"%",background:r.getSolidColor()}}))}),S=e.memo(t=>{var{state:r}=t,n=o(t,["state"]);const s=e.useRef(null),{sliderProps:l}=(({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:s,state:r});return a.default.createElement("div",Object.assign({},n,l,{className:[k.container,w.transBackground,n.className||""].join(" "),ref:s}),a.default.createElement("div",{className:[w.overlay,k.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${r.color.hex})`}}),a.default.createElement("div",{className:[w.thumb,k.thumb].join(" "),style:{left:100*r.color.a/100+"%",background:r.color.str}}))}),E=e=>{var{color:t}=e,r=o(e,["color"]);return a.default.createElement("div",Object.assign({},r,{className:w.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";x(".index-module_container__p6aGD {\n padding: 10px;\n border-radius: 6px;\n border: 1px solid #dcdbdb;\n}\n");const V=e.forwardRef((e,t)=>{var{showPreview:r=!0}=e,n=o(e,["showPreview"]);const s=A(n);return a.default.createElement("div",{className:P,role:"group",ref:t,style:{maxWidth:"220px"}},a.default.createElement(O,{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(S,{state:s})),r&&a.default.createElement("div",{style:{width:"10px"}}),r&&a.default.createElement(E,{color:s.color.str})))});exports.default=V; | ||
| "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 s=r;function l(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=l(Math.round(a*r),r,n),a},c=(e,t,r,n)=>{let a=(e.clientY-t.top)/t.height;return a=l(Math.round(a*r),r,n),a},u=e=>{var{ref:t,onStep:r,ariaLabel:n,ariaValueNow:a,ariaValueText:o,maxValue:l=100,minValue:u=0,step:d=1,bigStep:g=10}=e,b=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}(e,["ref","onStep","ariaLabel","ariaValueNow","ariaValueText","maxValue","minValue","step","bigStep"]);const m=e=>{if(!t.current||"function"!=typeof b.onChange)return;e.preventDefault();const r=t.current.getBoundingClientRect();if("both"===b.direction){let t=i(e,r,l,u),n=c(e,r,l,u);return b.onChange({x:t,y:n})}if("horizontal"===b.direction){let t=i(e,r,l,u);return b.onChange(t)}if("vertical"===b.direction){let t=c(e,r,l,u);return b.onChange(t)}};return{sliderProps:{tabIndex:0,onPointerDown:e=>{var r;t.current&&(e.preventDefault(),t.current.focus(),document.body.style.touchAction="none",t.current.onpointermove=m,null===(r=t.current)||void 0===r||r.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,n;e.key!==s.Tab&&e.preventDefault();let a=e.shiftKey?g:d;switch(e.key){case s.ArrowLeft:case s.ArrowDown:null==r||r(-a);break;case s.ArrowRight:case s.ArrowUp:null==r||r(a);break;case s.Home:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(t=b.onChange)||void 0===t||t.call(b,u);break;case s.End:"vertical"!==b.direction&&"horizontal"!==b.direction||null===(n=b.onChange)||void 0===n||n.call(b,l);break;default:return}},role:"slider","aria-valuemin":u,"aria-valuemax":l,"aria-label":n,"aria-valuenow":a,"aria-valuetext":o}}},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:l(e,359,0),s:l(t,100,0),v:l(r,100,0)}))(e);let a=n/100,o=r/100*a,s=t/60,i=o*(1-Math.abs(s%2-1)),c=a-o;return o=255*(o+c)|0,i=255*(i+c)|0,c=255*c|0,s>=0&&s<1?{r:o,g:i,b:c}:s>=1&&s<2?{r:i,g:o,b:c}:s>=2&&s<3?{r:c,g:o,b:i}:s>=3&&s<4?{r:c,g:i,b:o}:s>=4&&s<5?{r:i,g:c,b:o}:s>=5&&s<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:l(e,255,0),g:l(t,255,0),b:l(r,255,0)}))(e);let a=t/255,o=r/255,s=n/255,i=Math.max(a,o,s),c=i-Math.min(a,o,s),u=0,d=0,g=0;return c&&(i===a&&(u=(o-s)/c),i===o&&(u=2+(s-a)/c),i===s&&(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}, ${l(n,100,0)/100})`:`rgb(${e}, ${t}, ${r})`)(e):m(e),h={h:0,s:50,v:50,a:100,r:128,g:64,b:64,hex:"804040",str:"#804040"},f=(e,t,r)=>{(e=>d(e,255))(r)&&e(e=>{const{r:n,g:a,b:o,a:s}=Object.assign(Object.assign({},e),{[t]:r}),{h:l,s:i,v:c}=b({r:n,g:a,b:o});return{r:n,g:a,b:o,a:s,h:l,s:i,v:c,hex:m({r:n,g:a,b:o},!1),str:p({r:n,g:a,b:o,a:s})}})},v=(e,t,r,n=100)=>{d(r,n)&&e(e=>{const{h:n,s:a,v:o,a:s}=Object.assign(Object.assign({},e),{[t]:r}),{r:l,g:i,b:c}=g({h:n,s:a,v:o});return{h:n,s:a,v:o,r:l,g:i,b:c,a:s,hex:m({r:l,g:i,b:c},!1),str:p({r:l,g:i,b:c,a:s})}})},y=(e,t,r,n=100)=>{e(e=>{const{h:a,s:o,v:s,a:i}=Object.assign(Object.assign({},e),{[t]:l(e[t]+r,n,0)}),{r:c,g:u,b:d}=g({h:a,s:o,v:s});return{h:a,s:o,v:s,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})}})},A=t=>{const[r,n]=e.useState(t.defaultValue||h);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=>f(a,"r",e),setG:e=>f(a,"g",e),setB:e=>f(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:s,b:l}=g({h:n,s:e,v:t}),i=m({r:o,g:s,b:l},!1),c=p({r:o,g:s,b:l,a:a});return{h:n,s:e,v:t,r:o,g:s,b:l,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:s,s:l,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:s,s:l,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:l(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 x(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 _={container:"styles-module_container__2LiHz",light:"styles-module_light__367NS",dark:"styles-module_dark__2oP9R"};x(".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"};x(".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:r}=t,n=o(t,["state"]);const l=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 l=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:l.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!==s.Tab&&e.preventDefault();const r=e.shiftKey?10:1;switch(e.key){case s.ArrowUp:l.current=!1,t.rotateV(r);break;case s.ArrowDown:l.current=!1,t.rotateV(-r);break;case s.ArrowLeft:l.current=!0,t.rotateS(-r);break;case s.ArrowRight:l.current=!0,t.rotateS(r);break;case s.Home:l.current=!0,t.setS(0);break;case s.End:l.current=!0,t.setS(100);break;case s.PageUp:l.current=!1,t.setV(100);break;case s.PageDown:l.current=!1,t.setV(0)}},"aria-describedby":"color-picker-desc",id:"color-rectangle1"}),descriptionProps:{id:"color-picker-desc",children:n}}})({state:r,ref:l});return a.default.createElement("div",Object.assign({className:[_.container,n.className||""].join(" ")},n,i,{style:Object.assign({background:r.getSolidColor()},n.style),ref:l}),a.default.createElement("div",Object.assign({className:w.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:w.thumb}),a.default.createElement("div",{className:[w.overlay,_.light].join(" ")}),a.default.createElement("div",{className:[w.overlay,_.dark].join(" ")}))};var k={container:"styles-module_container__3YAfB",thumb:"styles-module_thumb__3_gF5",sliderOverlay:"styles-module_sliderOverlay__3dabP"};x(".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 j={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:r}=t,n=o(t,["state"]);const s=e.useRef(null),{sliderProps:l}=(({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:s,state:r});return a.default.createElement("div",Object.assign({},n,l,{className:[k.container,n.className||""].join(" "),style:Object.assign(Object.assign({},j),n.style),ref:s}),a.default.createElement("div",{className:[w.thumb,k.thumb].join(" "),style:{left:100*r.color.h/359+"%",background:r.getSolidColor()}}))}),S=e.memo(t=>{var{state:r}=t,n=o(t,["state"]);const s=e.useRef(null),{sliderProps:l}=(({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:s,state:r});return a.default.createElement("div",Object.assign({},n,l,{className:[k.container,w.transBackground,n.className||""].join(" "),ref:s}),a.default.createElement("div",{className:[w.overlay,k.sliderOverlay].join(" "),style:{backgroundImage:`linear-gradient(to right, transparent, #${r.color.hex})`}}),a.default.createElement("div",{className:[w.thumb,k.thumb].join(" "),style:{left:100*r.color.a/100+"%",background:r.color.str}}))}),E=e=>{var{color:t}=e,r=o(e,["color"]);return a.default.createElement("div",Object.assign({},r,{className:w.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";x(".index-module_container__p6aGD {\n padding: 10px;\n border-radius: 6px;\n border: 1px solid #dcdbdb;\n display: inline-block;\n}\n");const V=e.forwardRef((e,t)=>{var{showPreview:r=!0}=e,n=o(e,["showPreview"]);const s=A(n);return a.default.createElement("div",{className:P,role:"group",ref:t},a.default.createElement(O,{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(S,{state:s})),r&&a.default.createElement("div",{style:{width:"10px"}}),r&&a.default.createElement(E,{color:s.color.str})))});exports.default=V; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@atomik-color/component", | ||
| "version": "1.0.12", | ||
| "version": "1.0.13", | ||
| "license": "MIT", | ||
@@ -41,3 +41,3 @@ "author": "Dilshod Turobov <deebov@yandex.com", | ||
| }, | ||
| "gitHead": "60121e67cfd90296c8b75521bbc73b82f987aae8" | ||
| "gitHead": "ee25304dae4dbec841467032245d2a4000311d28" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage 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 riskPackage 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
Worsened metrics
- Total package byte prevSize
- decreased by-0.01%
142637
No dependency changes