@test-party/contrast-color-picker/dist/index.umd.js

🎨 @test-party/contrast-color-picker is a lightweight, customizable color contrast picker designed for React applications. Built with accessibility in mind, it helps developers ensure compliance with WCAG color contrast standards by offering real-time fee

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("chroma-js")):"function"==typeof define&&define.amd?define(["exports","react","chroma-js"],t):t((e||self)["@test-party/contrast-color-picker"]={},e.react,e.chromaJs)}(this,function(e,t,n){function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=/*#__PURE__*/r(t),o=/*#__PURE__*/r(n);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l.apply(null,arguments)}function u(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function i(e){var n=t.useRef(e),r=t.useRef(function(e){n.current&&n.current(e)});return n.current=e,r.current}var c=function(e,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),e>n?n:e<t?t:e},f=["onMove","onKey"],s=function(e){return"touches"in e},d=function(e){return e&&e.ownerDocument.defaultView||self},v=function(e,t,n){var r=e.getBoundingClientRect(),a=s(t)?function(e,t){for(var n=0;n<e.length;n++)if(e[n].identifier===t)return e[n];return e[0]}(t.touches,n):t;return{left:c((a.pageX-(r.left+d(e).pageXOffset))/r.width),top:c((a.pageY-(r.top+d(e).pageYOffset))/r.height)}},g=function(e){!s(e)&&e.preventDefault()},h=a.default.memo(function(e){var n=e.onMove,r=e.onKey,o=u(e,f),c=t.useRef(null),h=i(n),p=i(r),m=t.useRef(null),b=t.useRef(!1),C=t.useMemo(function(){var e=function(e){g(e),(s(e)?e.touches.length>0:e.buttons>0)&&c.current?h(v(c.current,e,m.current)):n(!1)},t=function(){return n(!1)};function n(n){var r=b.current,a=d(c.current),o=n?a.addEventListener:a.removeEventListener;o(r?"touchmove":"mousemove",e),o(r?"touchend":"mouseup",t)}return[function(e){var t=e.nativeEvent,r=c.current;if(r&&(g(t),!function(e,t){return t&&!s(e)}(t,b.current)&&r)){if(s(t)){b.current=!0;var a=t.changedTouches||[];a.length&&(m.current=a[0].identifier)}r.focus(),h(v(r,t,m.current)),n(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),p({left:39===t?.05:37===t?-.05:0,top:40===t?.05:38===t?-.05:0}))},n]},[p,h]),E=C[0],x=C[1],S=C[2];return t.useEffect(function(){return S},[S]),/*#__PURE__*/a.default.createElement("div",l({},o,{onTouchStart:E,onMouseDown:E,className:"react-colorful__interactive",ref:c,onKeyDown:x,tabIndex:0,role:"slider"}))}),p=function(e){return e.filter(Boolean).join(" ")},m=function(e){var t=e.color,n=e.left,r=e.top,o=void 0===r?.5:r,l=p(["react-colorful__pointer",e.className]);/*#__PURE__*/return a.default.createElement("div",{className:l,style:{top:100*o+"%",left:100*n+"%"}},/*#__PURE__*/a.default.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},b=function(e,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*e)/n},C={grad:.9,turn:360,rad:360/(2*Math.PI)},E=function(e){return J(x(e))},x=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?b(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?b(parseInt(e.substring(6,8),16)/255,2):1}},S=function(e,t){return void 0===t&&(t="deg"),Number(e)*(C[t]||1)},y=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?B({h:S(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},N=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?{h:S(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}:{h:0,s:0,l:0,a:1}},k=function(e){return"hsla("+e.h+", "+e.s+"%, "+e.l+"%, "+e.a+")"},H=function(e){return"hsla("+e.h+", "+e.s+"%, "+e.l+"%)"},w=y,_=N,B=function(e){var t=e.s,n=e.l;return{h:e.h,s:(t*=(n<50?n:100-n)/100)>0?2*t/(n+t)*100:0,v:n+t,a:e.a}},M=function(e){return Y(F(e))},D=function(e){var t=e.s,n=e.v,r=e.a,a=(200-t)*n/100;return{h:b(e.h),s:b(a>0&&a<200?t*n/100/(a<=100?a:200-a)*100:0),l:b(a/2),a:b(r,2)}},K=function(e){var t=D(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},A=function(e){var t=$(e);return"hsva("+t.h+", "+t.s+"%, "+t.v+"%, "+t.a+")"},R=function(e){var t=D(e);return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},F=function(e){var t=e.h,n=e.s,r=e.v,a=e.a;t=t/360*6,n/=100,r/=100;var o=Math.floor(t),l=r*(1-n),u=r*(1-(t-o)*n),i=r*(1-(1-t+o)*n),c=o%6;return{r:b(255*[r,u,l,l,i,r][c]),g:b(255*[i,r,r,u,l,l][c]),b:b(255*[l,l,i,r,r,u][c]),a:b(a,2)}},P=function(e){var t=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?$({h:S(t[1],t[2]),s:Number(t[3]),v:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},q=P,L=function(e){var t=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?Q({h:S(t[1],t[2]),s:Number(t[3]),v:Number(t[4])}):{h:0,s:0,v:0}},z=function(e){var t=Q(e);return"hsv("+t.h+", "+t.s+"%, "+t.v+"%)"},V=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?J({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},I=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?{r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}:{r:0,g:0,b:0,a:1}},j=function(e){return"rgba("+e.r+", "+e.g+", "+e.b+", "+e.a+")"},G=V,O=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?{r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1)}:{r:0,g:0,b:0}},T=function(e){return"rgb("+e.r+", "+e.g+", "+e.b+")"},X=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},Y=function(e){var t=e.r,n=e.g,r=e.b,a=e.a,o=a<1?X(b(255*a)):"";return"#"+X(t)+X(n)+X(r)+o},J=function(e){var t=e.r,n=e.g,r=e.b,a=e.a,o=Math.max(t,n,r),l=o-Math.min(t,n,r),u=l?o===t?(n-r)/l:o===n?2+(r-t)/l:4+(t-n)/l:0;return{h:b(60*(u<0?u+6:u)),s:b(o?l/o*100:0),v:b(o/255*100),a:a}},$=function(e){return{h:b(e.h),s:b(e.s),v:b(e.v),a:b(e.a,2)}},Q=function(e){return{h:b(e.h),s:b(e.s),v:b(e.v)}},U=a.default.memo(function(e){var t=e.hue,n=e.onChange,r=p(["react-colorful__hue",e.className]);/*#__PURE__*/return a.default.createElement("div",{className:r},/*#__PURE__*/a.default.createElement(h,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:c(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":b(t),"aria-valuemax":"360","aria-valuemin":"0"},/*#__PURE__*/a.default.createElement(m,{className:"react-colorful__hue-pointer",left:t/360,color:K({h:t,s:100,v:100,a:1})})))}),W=a.default.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:K({h:t.h,s:100,v:100,a:1})};/*#__PURE__*/return a.default.createElement("div",{className:"react-colorful__saturation",style:r},/*#__PURE__*/a.default.createElement(h,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:c(t.s+100*e.left,0,100),v:c(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+b(t.s)+"%, Brightness "+b(t.v)+"%"},/*#__PURE__*/a.default.createElement(m,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:K(t)})))}),Z=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},ee=function(e,t){return e.replace(/\s/g,"")===t.replace(/\s/g,"")},te=function(e,t){return e.toLowerCase()===t.toLowerCase()||Z(x(e),x(t))};function ne(e,n,r){var a=i(r),o=t.useState(function(){return e.toHsva(n)}),l=o[0],u=o[1],c=t.useRef({color:n,hsva:l});t.useEffect(function(){if(!e.equal(n,c.current.color)){var t=e.toHsva(n);c.current={hsva:t,color:n},u(t)}},[n,e]),t.useEffect(function(){var t;Z(l,c.current.hsva)||e.equal(t=e.fromHsva(l),c.current.color)||(c.current={hsva:l,color:t},a(t))},[l,e,a]);var f=t.useCallback(function(e){u(function(t){return Object.assign({},t,e)})},[]);return[l,f]}var re,ae="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,oe=function(){return re||("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0)},le=new Map,ue=function(e){ae(function(){var t=e.current?e.current.ownerDocument:document;if(void 0!==t&&!le.has(t)){var n=t.createElement("style");n.innerHTML='.react-colorful{cursor:default;display:flex;flex-direction:column;height:200px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:200px}.react-colorful__saturation{background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0));border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;flex-grow:1;position:relative}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{border-radius:inherit;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{height:24px;position:relative}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{border-radius:inherit;bottom:0;left:0;outline:none;position:absolute;right:0;top:0;touch-action:none}.react-colorful__pointer{background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);box-sizing:border-box;height:28px;position:absolute;transform:translate(-50%,-50%);width:28px;z-index:1}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}.contrast-color-picker{border:1px solid #a4afb9;border-radius:10px;font-family:Arial,sans-serif;justify-content:center;margin:0 auto;width:-moz-fit-content;width:fit-content}.color-picker-container,.contrast-color-picker{align-items:center;display:flex;flex-direction:column;gap:15px}.color-picker-container{margin:25px 20px 5px}.contrast-analysis{border-top:1px solid #ccc;width:100%}.contrast-analysis span{color:#213547;font-size:.75rem}.contrast-analysis p{font-size:1.75rem;margin:0}.contrast-analysis-section{align-items:center;border-radius:10px;display:flex;flex-direction:column;gap:7px;margin:20px;padding:10px}.contrast-analysis-section.result-fail{background:#ffe2df}.contrast-analysis-section.result-pass{background:#e5f6e5}.contrast-analysis-section.result-fail p{color:#9e3228}.contrast-analysis-section.result-pass p{color:#346534}.input-fields{align-items:center;display:flex;flex-direction:row;gap:8px}.input-fields label{font-size:.75rem}.input-fields-container{border:1px solid #bebfc1;border-radius:5px;display:flex;flex-direction:row;transition:border-color .2s ease}.input-fields-container:focus-within{border-color:#2856df}.input-fields input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-right:1px solid #bebfc1;box-shadow:none;height:21px;outline:none;width:30px}.input-fields input:last-child{border-right:none}.color-input-container{align-items:center;display:flex;flex-direction:row;gap:8px}.color-input-container label{font-size:.75rem}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:1px solid #bebfc1;border-radius:5px;box-shadow:none;height:21px;outline:none}.color-input:focus-within{border-color:#2856df}',le.set(t,n);var r=oe();r&&n.setAttribute("nonce",r),t.head.appendChild(n)}},[])},ie=function(e){var n=e.children,r=e.foregroundColor,l=e.backgroundColor,u=t.useState(0)[1],i=t.useState(!1),c=i[0],f=i[1],s=function(e){var t=e.a;return o.default.hsv(e.h,e.s/100,e.v/100).alpha(t)};return t.useEffect(function(){var e,t,n,a,i,c,d=s(r),v=s(l),g=(t=v,n=(e=d).alpha(),a=e.rgb(),i=t.rgb(),c=a.map(function(e,t){return e*n+i[t]*(1-n)}),o.default(c)),h=o.default.contrast(g,v),p=function(e){return e>=7?{level:"AAA (Highest)",pass:!0}:e>=4.5?{level:"AA (Good)",pass:!0}:{level:"Fail",pass:!1}}(h),m=p.level,b=p.pass;u(h),f(b),console.log("updated version"),console.log("Foreground HSVA:",r),console.log("Background HSVA:",l),console.log("Contrast Ratio:",h),console.log("Compliance Level:",m),console.log("Pass:",b)},[r,l]),/*#__PURE__*/a.default.createElement("div",{className:"contrast-color-picker"},/*#__PURE__*/a.default.createElement("div",{className:"color-picker-container"},n),/*#__PURE__*/a.default.createElement("div",{className:"contrast-analysis"},/*#__PURE__*/a.default.createElement("div",{className:"contrast-analysis-section "+(c?"result-pass":"result-fail")},/*#__PURE__*/a.default.createElement("span",null,"Contrast Ratio"),/*#__PURE__*/a.default.createElement("p",null,c?"Pass":"Fail"))))},ce=["className","colorModel","color","backgroundColor","children","onChange"],fe=function(e){var n=e.className,r=e.colorModel,o=e.color,i=void 0===o?r.defaultColor:o,c=e.backgroundColor,f=void 0===c?r.defaultBackgroundColor:c,s=e.children,d=e.onChange,v=u(e,ce),g=t.useRef(null);ue(g);var h=ne(r,i,d),m=h[0],b=h[1],C=ne(r,f,d)[0],E=p(["react-colorful",n]);/*#__PURE__*/return a.default.createElement(ie,{foregroundColor:m,backgroundColor:C},/*#__PURE__*/a.default.createElement("div",l({},v,{ref:g,className:E}),/*#__PURE__*/a.default.createElement(W,{hsva:m,onChange:b}),/*#__PURE__*/a.default.createElement(U,{hue:m.h,onChange:b,className:"react-colorful__last-control"})),s)},se=/^#?([0-9A-F]{3,8})$/i,de=["color","onChange","onBlur","escape","validate","format","process"],ve=function(e){var n=e.color,r=void 0===n?"":n,o=e.onChange,c=e.onBlur,f=e.escape,s=e.validate,d=e.format,v=e.process,g=u(e,de),h=t.useState(function(){return f(r)}),p=h[0],m=h[1],b=i(o),C=i(c),E=t.useCallback(function(e){var t=f(e.target.value);m(t),s(t)&&b(v?v(t):t)},[f,v,s,b]),x=t.useCallback(function(e){s(e.target.value)||m(f(r)),C(e)},[r,f,s,C]);return t.useEffect(function(){m(f(r))},[r,f]),/*#__PURE__*/a.default.createElement("input",l({},g,{className:"color-input",value:d?d(p):p,spellCheck:"false",onChange:E,onBlur:x}))},ge=["prefixed","alpha"],he=function(e){return"#"+e},pe=function(e){var n=e.prefixed,r=e.alpha,o=u(e,ge),i=t.useCallback(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,r?8:6)},[r]),c=t.useCallback(function(e){return function(e,t){var n=se.exec(e),r=n?n[1].length:0;return 3===r||6===r||!!t&&4===r||!!t&&8===r}(e,r)},[r]);/*#__PURE__*/return a.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/a.default.createElement("label",{htmlFor:e.label},e.label),/*#__PURE__*/a.default.createElement(ve,l({},o,{id:e.label,escape:i,format:n?he:void 0,process:he,validate:c})))},me={defaultColor:"000",defaultBackgroundColor:"fff",toHsva:E,fromHsva:function(e){return M({h:e.h,s:e.s,v:e.v,a:1})},equal:te},be=function(e){var t=e.className,n=e.hsva,r=e.onChange,o={backgroundImage:"linear-gradient(90deg, "+R(Object.assign({},n,{a:0}))+", "+R(Object.assign({},n,{a:1}))+")"},l=p(["react-colorful__alpha",t]),u=b(100*n.a);/*#__PURE__*/return a.default.createElement("div",{className:l},/*#__PURE__*/a.default.createElement("div",{className:"react-colorful__alpha-gradient",style:o}),/*#__PURE__*/a.default.createElement(h,{onMove:function(e){r({a:e.left})},onKey:function(e){r({a:c(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":u+"%","aria-valuenow":u,"aria-valuemin":"0","aria-valuemax":"100"},/*#__PURE__*/a.default.createElement(m,{className:"react-colorful__alpha-pointer",left:n.a,color:R(n)})))},Ce=["className","colorModel","color","backgroundColor","children","onChange"],Ee=function(e){var n=e.className,r=e.colorModel,o=e.color,i=void 0===o?r.defaultColor:o,c=e.backgroundColor,f=void 0===c?r.defaultBackgroundColor:c,s=e.children,d=e.onChange,v=u(e,Ce),g=t.useRef(null);ue(g);var h=ne(r,i,d),m=h[0],b=h[1],C=ne(r,f,d)[0],E=p(["react-colorful",n]);/*#__PURE__*/return a.default.createElement(ie,{foregroundColor:m,backgroundColor:C},/*#__PURE__*/a.default.createElement("div",l({},v,{ref:g,className:E}),/*#__PURE__*/a.default.createElement(W,{hsva:m,onChange:b}),/*#__PURE__*/a.default.createElement(U,{hue:m.h,onChange:b}),/*#__PURE__*/a.default.createElement(be,{hsva:m,onChange:b,className:"react-colorful__last-control"})),s)},xe={defaultColor:"0001",defaultBackgroundColor:"0000",toHsva:E,fromHsva:M,equal:te},Se=function(e){var n=e.color,r=e.onChange,o=e.label,u=void 0===o?"HSLA":o,i=t.useState({h:n.h.toString(),s:n.s.toString(),l:n.l.toString(),a:n.a.toString()}),c=i[0],f=i[1];t.useEffect(function(){f(function(e){return e.h===n.h.toString()&&e.s===n.s.toString()&&e.l===n.l.toString()&&e.a===n.a.toString()?e:{h:n.h.toString(),s:n.s.toString(),l:n.l.toString(),a:n.a.toString()}})},[n]);var s=function(e){return function(t){var n=t.target.value;f(function(t){var r;return l({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,a=c[e],o=parseFloat(a);if(""===a||isNaN(o))f(function(t){var r;return l({},t,((r={})[e]=n[e].toString(),r))});else{var u=100;"h"===e&&(u=360),"a"===e&&(u=1);var i=Math.max(0,Math.min(u,o));r(l({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return a.default.createElement("div",{className:"input-fields"},/*#__PURE__*/a.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-hue-input"},u),/*#__PURE__*/a.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/a.default.createElement("input",{id:u+"-hue-input",type:"text",value:c.h,onChange:s("h"),onBlur:d("h"),onKeyDown:v("h"),"aria-label":"Hue"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.s,onChange:s("s"),onBlur:d("s"),onKeyDown:v("s"),"aria-label":"Saturation"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.l,onChange:s("l"),onBlur:d("l"),onKeyDown:v("l"),"aria-label":"Lightness"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.a,onChange:s("a"),onBlur:d("a"),onKeyDown:v("a"),"aria-label":"Alpha"})))},ye={defaultColor:{h:0,s:0,l:0,a:1},defaultBackgroundColor:{h:0,s:0,l:100,a:1},toHsva:B,fromHsva:D,equal:Z},Ne=function(e){var n=e.color,r=void 0===n?"":n,o=e.onChange,l=e.label,u=t.useState(r),i=u[0],c=u[1];return t.useEffect(function(){c(r)},[r]),/*#__PURE__*/a.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/a.default.createElement("label",{htmlFor:l},l||"HSLA"),/*#__PURE__*/a.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=N(i);c(k(e)),o&&o(k(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=N(i);c(k(t)),o&&o(k(t))}},"aria-label":"HSLA Color"}))},ke={defaultColor:"hsla(0, 0%, 0%, 1)",defaultBackgroundColor:"hsla(0, 0%, 100%, 1)",toHsva:y,fromHsva:R,equal:ee},He=function(e){var n=e.color,r=e.onChange,o=e.label,u=void 0===o?"HSL":o,i=t.useState({h:n.h.toString(),s:n.s.toString(),l:n.l.toString()}),c=i[0],f=i[1];t.useEffect(function(){f(function(e){return e.h===n.h.toString()&&e.s===n.s.toString()&&e.l===n.l.toString()?e:{h:n.h.toString(),s:n.s.toString(),l:n.l.toString()}})},[n]);var s=function(e){return function(t){var n=t.target.value;f(function(t){var r;return l({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,a=c[e],o=parseFloat(a);if(""===a||isNaN(o))f(function(t){var r;return l({},t,((r={})[e]=n[e].toString(),r))});else{var u=100;"h"===e&&(u=360);var i=Math.max(0,Math.min(u,o));r(l({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return a.default.createElement("div",{className:"input-fields"},/*#__PURE__*/a.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-hue-input"},u),/*#__PURE__*/a.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/a.default.createElement("input",{id:u+"-hue-input",type:"text",value:c.h,onChange:s("h"),onBlur:d("h"),onKeyDown:v("h"),"aria-label":"Hue"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.s,onChange:s("s"),onBlur:d("s"),onKeyDown:v("s"),"aria-label":"Saturation"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.l,onChange:s("l"),onBlur:d("l"),onKeyDown:v("l"),"aria-label":"Lightness"})))},we={defaultColor:{h:0,s:0,l:0},defaultBackgroundColor:{h:0,s:0,l:100},toHsva:function(e){return B({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(t=D(e)).h,s:t.s,l:t.l};var t},equal:Z},_e=function(e){var n=e.color,r=void 0===n?"":n,o=e.onChange,l=e.label,u=t.useState(r),i=u[0],c=u[1];return t.useEffect(function(){c(r)},[r]),/*#__PURE__*/a.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/a.default.createElement("label",{htmlFor:l},l||"HSL"),/*#__PURE__*/a.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=_(i);c(H(e)),o&&o(H(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=_(i);c(H(t)),o&&o(H(t))}},"aria-label":"HSL Color"}))},Be={defaultColor:"hsl(0, 0%, 0%)",defaultBackgroundColor:"hsl(0, 0%, 100%)",toHsva:w,fromHsva:K,equal:ee},Me=function(e){var n=e.color,r=e.onChange,o=e.label,u=void 0===o?"HSVA":o,i=t.useState({h:n.h.toString(),s:n.s.toString(),v:n.v.toString(),a:n.a.toString()}),c=i[0],f=i[1];t.useEffect(function(){f(function(e){return e.h===n.h.toString()&&e.s===n.s.toString()&&e.v===n.v.toString()&&e.a===n.a.toString()?e:{h:n.h.toString(),s:n.s.toString(),v:n.v.toString(),a:n.a.toString()}})},[n]);var s=function(e){return function(t){var n=t.target.value;f(function(t){var r;return l({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,a=c[e],o=parseFloat(a);if(""===a||isNaN(o))f(function(t){var r;return l({},t,((r={})[e]=n[e].toString(),r))});else{var u=100;"h"===e&&(u=360),"a"===e&&(u=1);var i=Math.max(0,Math.min(u,o));r(l({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return a.default.createElement("div",{className:"input-fields"},/*#__PURE__*/a.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-hue-input"},u),/*#__PURE__*/a.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/a.default.createElement("input",{id:u+"-hue-input",type:"text",value:c.h,onChange:s("h"),onBlur:d("h"),onKeyDown:v("h"),"aria-label":"Hue"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.s,onChange:s("s"),onBlur:d("s"),onKeyDown:v("s"),"aria-label":"Saturation"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.v,onChange:s("v"),onBlur:d("v"),onKeyDown:v("v"),"aria-label":"Value"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.a,onChange:s("a"),onBlur:d("a"),onKeyDown:v("a"),"aria-label":"Alpha"})))},De={defaultColor:{h:0,s:0,v:0,a:1},defaultBackgroundColor:{h:0,s:0,v:100,a:1},toHsva:function(e){return e},fromHsva:$,equal:Z},Ke=function(e){var n=e.color,r=void 0===n?"":n,o=e.onChange,l=e.label,u=t.useState(r),i=u[0],c=u[1];return t.useEffect(function(){c(r)},[r]),/*#__PURE__*/a.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/a.default.createElement("label",{htmlFor:l},l||"HSVA"),/*#__PURE__*/a.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=P(i);c(A(e)),o&&o(A(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=P(i);c(A(t)),o&&o(A(t))}},"aria-label":"HSVA Color"}))},Ae={defaultColor:"hsva(0, 0%, 0%, 1)",defaultBackgroundColor:"hsva(0, 0%, 100%, 1)",toHsva:P,fromHsva:A,equal:ee},Re=function(e){var n=e.color,r=e.onChange,o=e.label,u=void 0===o?"HSV":o,i=t.useState({h:n.h.toString(),s:n.s.toString(),v:n.v.toString()}),c=i[0],f=i[1];t.useEffect(function(){f(function(e){return e.h===n.h.toString()&&e.s===n.s.toString()&&e.v===n.v.toString()?e:{h:n.h.toString(),s:n.s.toString(),v:n.v.toString()}})},[n]);var s=function(e){return function(t){var n=t.target.value;f(function(t){var r;return l({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,a=c[e],o=parseFloat(a);if(""===a||isNaN(o))f(function(t){var r;return l({},t,((r={})[e]=n[e].toString(),r))});else{var u=100;"h"===e&&(u=360);var i=Math.max(0,Math.min(u,o));r(l({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return a.default.createElement("div",{className:"input-fields"},/*#__PURE__*/a.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-hue-input"},u),/*#__PURE__*/a.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/a.default.createElement("input",{id:u+"-hue-input",type:"text",value:c.h,onChange:s("h"),onBlur:d("h"),onKeyDown:v("h"),"aria-label":"Hue"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.s,onChange:s("s"),onBlur:d("s"),onKeyDown:v("s"),"aria-label":"Saturation"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.v,onChange:s("v"),onBlur:d("v"),onKeyDown:v("v"),"aria-label":"Value"})))},Fe={defaultColor:{h:0,s:0,v:0},defaultBackgroundColor:{h:0,s:0,v:100},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var t=$(e);return{h:t.h,s:t.s,v:t.v}},equal:Z},Pe=function(e){var n=e.color,r=void 0===n?"":n,o=e.onChange,l=e.label,u=t.useState(r),i=u[0],c=u[1];return t.useEffect(function(){c(r)},[r]),/*#__PURE__*/a.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/a.default.createElement("label",{htmlFor:l},l||"HSV"),/*#__PURE__*/a.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=L(i);c(z(e)),o&&o(z(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=L(i);c(z(t)),o&&o(z(t))}},"aria-label":"HSV Color"}))},qe={defaultColor:"hsv(0, 0%, 0%)",defaultBackgroundColor:"hsv(0, 0%, 100%)",toHsva:q,fromHsva:function(e){var t=$(e);return"hsv("+t.h+", "+t.s+"%, "+t.v+"%)"},equal:ee},Le=function(e){var n=e.color,r=e.onChange,o=e.label,u=void 0===o?"RGBA":o,i=t.useState({r:n.r.toString(),g:n.g.toString(),b:n.b.toString(),a:n.a.toString()}),c=i[0],f=i[1];t.useEffect(function(){f(function(e){return e.r===n.r.toString()&&e.g===n.g.toString()&&e.b===n.b.toString()&&e.a===n.a.toString()?e:{r:n.r.toString(),g:n.g.toString(),b:n.b.toString(),a:n.a.toString()}})},[n]);var s=function(e){return function(t){var n=t.target.value;f(function(t){var r;return l({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,a=c[e],o=parseFloat(a);if(""===a||isNaN(o))f(function(t){var r;return l({},t,((r={})[e]=n[e].toString(),r))});else{var u=255;"a"===e&&(u=1);var i=Math.max(0,Math.min(u,o));r(l({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return a.default.createElement("div",{className:"input-fields"},/*#__PURE__*/a.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-red-input"},u),/*#__PURE__*/a.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/a.default.createElement("input",{id:u+"-red-input",type:"text",value:c.r,onChange:s("r"),onBlur:d("r"),onKeyDown:v("r"),"aria-label":"Red"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.g,onChange:s("g"),onBlur:d("g"),onKeyDown:v("g"),"aria-label":"Green"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.b,onChange:s("b"),onBlur:d("b"),onKeyDown:v("b"),"aria-label":"Blue"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.a,onChange:s("a"),onBlur:d("a"),onKeyDown:v("a"),"aria-label":"Alpha"})))},ze={defaultColor:{r:0,g:0,b:0,a:1},defaultBackgroundColor:{r:255,g:255,b:255,a:1},toHsva:J,fromHsva:F,equal:Z},Ve=function(e){var n=e.color,r=void 0===n?"":n,o=e.onChange,l=e.label,u=t.useState(r),i=u[0],c=u[1];return t.useEffect(function(){c(r)},[r]),/*#__PURE__*/a.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/a.default.createElement("label",{htmlFor:l},l||"RGBA"),/*#__PURE__*/a.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=I(i);c(j(e)),o&&o(j(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=I(i);c(j(t)),o&&o(j(t))}},"aria-label":"RGBA Color"}))},Ie={defaultColor:"rgba(0, 0, 0, 1)",defaultBackgroundColor:"rgba(0, 0, 0, 0)",toHsva:V,fromHsva:function(e){var t=F(e);return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},equal:ee},je=function(e){var n=e.color,r=e.onChange,o=e.label,u=void 0===o?"RGB":o,i=t.useState({r:n.r.toString(),g:n.g.toString(),b:n.b.toString()}),c=i[0],f=i[1];t.useEffect(function(){f(function(e){return e.r===n.r.toString()&&e.g===n.g.toString()&&e.b===n.b.toString()?e:{r:n.r.toString(),g:n.g.toString(),b:n.b.toString()}})},[n]);var s=function(e){return function(t){var n=t.target.value;f(function(t){var r;return l({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,a=c[e],o=parseFloat(a);if(""===a||isNaN(o))f(function(t){var r;return l({},t,((r={})[e]=n[e].toString(),r))});else{var u=Math.max(0,Math.min(255,o));r(l({},n,((t={})[e]=u,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return a.default.createElement("div",{className:"input-fields"},/*#__PURE__*/a.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-red-input"},u),/*#__PURE__*/a.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/a.default.createElement("input",{id:u+"-red-input",type:"text",value:c.r,onChange:s("r"),onBlur:d("r"),onKeyDown:v("r"),"aria-label":"Red"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.g,onChange:s("g"),onBlur:d("g"),onKeyDown:v("g"),"aria-label":"Green"}),/*#__PURE__*/a.default.createElement("input",{type:"text",value:c.b,onChange:s("b"),onBlur:d("b"),onKeyDown:v("b"),"aria-label":"Blue"})))},Ge={defaultColor:{r:0,g:0,b:0},defaultBackgroundColor:{r:255,g:255,b:255},toHsva:function(e){return J({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(t=F(e)).r,g:t.g,b:t.b};var t},equal:Z},Oe=function(e){var n=e.color,r=void 0===n?"":n,o=e.onChange,l=e.label,u=t.useState(r),i=u[0],c=u[1];return t.useEffect(function(){c(r)},[r]),/*#__PURE__*/a.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/a.default.createElement("label",{htmlFor:l},l||"RGB"),/*#__PURE__*/a.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=O(i);c(T(e)),o&&o(T(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=O(i);c(T(t)),o&&o(T(t))}},"aria-label":"RGB Color"}))},Te={defaultColor:"rgb(0, 0, 0)",defaultBackgroundColor:"rgb(255, 255, 255)",toHsva:G,fromHsva:function(e){var t=F(e);return"rgb("+t.r+", "+t.g+", "+t.b+")"},equal:ee};e.HexAlphaColorPicker=function(e){/*#__PURE__*/return a.default.createElement(Ee,l({},e,{colorModel:xe}),/*#__PURE__*/a.default.createElement(pe,l({},e,{label:"Hex-Alpha",prefixed:!0,alpha:!0})))},e.HexColorInput=pe,e.HexColorPicker=function(e){/*#__PURE__*/return a.default.createElement(fe,l({},e,{colorModel:me}),/*#__PURE__*/a.default.createElement(pe,l({},e,{label:"Hex",prefixed:!0})))},e.HslColorPicker=function(e){/*#__PURE__*/return a.default.createElement(fe,l({},e,{colorModel:we}),e.color&&e.onChange&&/*#__PURE__*/a.default.createElement(He,{color:e.color,onChange:e.onChange}))},e.HslStringColorPicker=function(e){/*#__PURE__*/return a.default.createElement(fe,l({},e,{colorModel:Be}),/*#__PURE__*/a.default.createElement(_e,l({},e,{label:"HSL"})))},e.HslaColorPicker=function(e){/*#__PURE__*/return a.default.createElement(Ee,l({},e,{colorModel:ye}),e.color&&e.onChange&&/*#__PURE__*/a.default.createElement(Se,{color:e.color,onChange:e.onChange}))},e.HslaStringColorPicker=function(e){/*#__PURE__*/return a.default.createElement(Ee,l({},e,{colorModel:ke}),/*#__PURE__*/a.default.createElement(Ne,l({},e,{label:"HSLA"})))},e.HsvColorPicker=function(e){/*#__PURE__*/return a.default.createElement(fe,l({},e,{colorModel:Fe}),e.color&&e.onChange&&/*#__PURE__*/a.default.createElement(Re,{color:e.color,onChange:e.onChange}))},e.HsvStringColorPicker=function(e){/*#__PURE__*/return a.default.createElement(fe,l({},e,{colorModel:qe}),/*#__PURE__*/a.default.createElement(Pe,l({},e,{label:"HSV"})))},e.HsvaColorPicker=function(e){/*#__PURE__*/return a.default.createElement(Ee,l({},e,{colorModel:De}),e.color&&e.onChange&&/*#__PURE__*/a.default.createElement(Me,{color:e.color,onChange:e.onChange}))},e.HsvaStringColorPicker=function(e){/*#__PURE__*/return a.default.createElement(Ee,l({},e,{colorModel:Ae}),/*#__PURE__*/a.default.createElement(Ke,l({},e,{label:"HSVA"})))},e.RgbColorPicker=function(e){/*#__PURE__*/return a.default.createElement(fe,l({},e,{colorModel:Ge}),e.color&&e.onChange&&/*#__PURE__*/a.default.createElement(je,{color:e.color,onChange:e.onChange}))},e.RgbStringColorPicker=function(e){/*#__PURE__*/return a.default.createElement(fe,l({},e,{colorModel:Te}),/*#__PURE__*/a.default.createElement(Oe,l({},e,{label:"RGB"})))},e.RgbaColorPicker=function(e){/*#__PURE__*/return a.default.createElement(Ee,l({},e,{colorModel:ze}),e.color&&e.onChange&&/*#__PURE__*/a.default.createElement(Le,{color:e.color,onChange:e.onChange}))},e.RgbaStringColorPicker=function(e){/*#__PURE__*/return a.default.createElement(Ee,l({},e,{colorModel:Ie}),/*#__PURE__*/a.default.createElement(Ve,l({},e,{label:"RGBA"})))},e.setNonce=function(e){re=e}});
//# sourceMappingURL=index.umd.js.map