@test-party/contrast-color-picker/dist/index.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

var e=require("react"),t=require("chroma-js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=/*#__PURE__*/n(e),a=/*#__PURE__*/n(t);function o(){return o=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},o.apply(null,arguments)}function l(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 u(t){var n=e.useRef(t),r=e.useRef(function(e){n.current&&n.current(e)});return n.current=t,r.current}var i=function(e,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),e>n?n:e<t?t:e},c=["onMove","onKey"],s=function(e){return"touches"in e},f=function(e){return e&&e.ownerDocument.defaultView||self},d=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:i((a.pageX-(r.left+f(e).pageXOffset))/r.width),top:i((a.pageY-(r.top+f(e).pageYOffset))/r.height)}},v=function(e){!s(e)&&e.preventDefault()},g=r.default.memo(function(t){var n=t.onMove,a=t.onKey,i=l(t,c),g=e.useRef(null),h=u(n),p=u(a),m=e.useRef(null),b=e.useRef(!1),C=e.useMemo(function(){var e=function(e){v(e),(s(e)?e.touches.length>0:e.buttons>0)&&g.current?h(d(g.current,e,m.current)):n(!1)},t=function(){return n(!1)};function n(n){var r=b.current,a=f(g.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=g.current;if(r&&(v(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(d(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 e.useEffect(function(){return S},[S]),/*#__PURE__*/r.default.createElement("div",o({},i,{onTouchStart:E,onMouseDown:E,className:"react-colorful__interactive",ref:g,onKeyDown:x,tabIndex:0,role:"slider"}))}),h=function(e){return e.filter(Boolean).join(" ")},p=function(e){var t=e.color,n=e.left,a=e.top,o=void 0===a?.5:a,l=h(["react-colorful__pointer",e.className]);/*#__PURE__*/return r.default.createElement("div",{className:l,style:{top:100*o+"%",left:100*n+"%"}},/*#__PURE__*/r.default.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},m=function(e,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*e)/n},b={grad:.9,turn:360,rad:360/(2*Math.PI)},C=function(e){return Y(E(e))},E=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?m(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?m(parseInt(e.substring(6,8),16)/255,2):1}},x=function(e,t){return void 0===t&&(t="deg"),Number(e)*(b[t]||1)},S=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:x(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}},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?{h:x(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}},N=function(e){return"hsla("+e.h+", "+e.s+"%, "+e.l+"%, "+e.a+")"},k=function(e){return"hsla("+e.h+", "+e.s+"%, "+e.l+"%)"},H=S,w=y,_=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}},B=function(e){return X(R(e))},M=function(e){var t=e.s,n=e.v,r=e.a,a=(200-t)*n/100;return{h:m(e.h),s:m(a>0&&a<200?t*n/100/(a<=100?a:200-a)*100:0),l:m(a/2),a:m(r,2)}},D=function(e){var t=M(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},K=function(e){var t=$(e);return"hsva("+t.h+", "+t.s+"%, "+t.v+"%, "+t.a+")"},A=function(e){var t=M(e);return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},R=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:m(255*[r,u,l,l,i,r][c]),g:m(255*[i,r,r,u,l,l][c]),b:m(255*[l,l,i,r,r,u][c]),a:m(a,2)}},F=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:x(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}},P=F,q=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?J({h:x(t[1],t[2]),s:Number(t[3]),v:Number(t[4])}):{h:0,s:0,v:0}},L=function(e){var t=J(e);return"hsv("+t.h+", "+t.s+"%, "+t.v+"%)"},z=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?Y({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}},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?{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}},I=function(e){return"rgba("+e.r+", "+e.g+", "+e.b+", "+e.a+")"},G=z,j=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}},O=function(e){return"rgb("+e.r+", "+e.g+", "+e.b+")"},T=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},X=function(e){var t=e.r,n=e.g,r=e.b,a=e.a,o=a<1?T(m(255*a)):"";return"#"+T(t)+T(n)+T(r)+o},Y=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:m(60*(u<0?u+6:u)),s:m(o?l/o*100:0),v:m(o/255*100),a:a}},$=function(e){return{h:m(e.h),s:m(e.s),v:m(e.v),a:m(e.a,2)}},J=function(e){return{h:m(e.h),s:m(e.s),v:m(e.v)}},Q=r.default.memo(function(e){var t=e.hue,n=e.onChange,a=h(["react-colorful__hue",e.className]);/*#__PURE__*/return r.default.createElement("div",{className:a},/*#__PURE__*/r.default.createElement(g,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:i(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":m(t),"aria-valuemax":"360","aria-valuemin":"0"},/*#__PURE__*/r.default.createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:D({h:t,s:100,v:100,a:1})})))}),U=r.default.memo(function(e){var t=e.hsva,n=e.onChange,a={backgroundColor:D({h:t.h,s:100,v:100,a:1})};/*#__PURE__*/return r.default.createElement("div",{className:"react-colorful__saturation",style:a},/*#__PURE__*/r.default.createElement(g,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:i(t.s+100*e.left,0,100),v:i(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+m(t.s)+"%, Brightness "+m(t.v)+"%"},/*#__PURE__*/r.default.createElement(p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:D(t)})))}),W=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},Z=function(e,t){return e.replace(/\s/g,"")===t.replace(/\s/g,"")},ee=function(e,t){return e.toLowerCase()===t.toLowerCase()||W(E(e),E(t))};function te(t,n,r){var a=u(r),o=e.useState(function(){return t.toHsva(n)}),l=o[0],i=o[1],c=e.useRef({color:n,hsva:l});e.useEffect(function(){if(!t.equal(n,c.current.color)){var e=t.toHsva(n);c.current={hsva:e,color:n},i(e)}},[n,t]),e.useEffect(function(){var e;W(l,c.current.hsva)||t.equal(e=t.fromHsva(l),c.current.color)||(c.current={hsva:l,color:e},a(e))},[l,t,a]);var s=e.useCallback(function(e){i(function(t){return Object.assign({},t,e)})},[]);return[l,s]}var ne,re="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,ae=function(){return ne||("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0)},oe=new Map,le=function(e){re(function(){var t=e.current?e.current.ownerDocument:document;if(void 0!==t&&!oe.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}',oe.set(t,n);var r=ae();r&&n.setAttribute("nonce",r),t.head.appendChild(n)}},[])},ue=function(t){var n=t.children,o=t.foregroundColor,l=t.backgroundColor,u=e.useState(0)[1],i=e.useState(!1),c=i[0],s=i[1],f=function(e){var t=e.a;return a.default.hsv(e.h,e.s/100,e.v/100).alpha(t)};return e.useEffect(function(){var e,t,n,r,i,c,d=f(o),v=f(l),g=(t=v,n=(e=d).alpha(),r=e.rgb(),i=t.rgb(),c=r.map(function(e,t){return e*n+i[t]*(1-n)}),a.default(c)),h=a.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),s(b),console.log("updated version"),console.log("Foreground HSVA:",o),console.log("Background HSVA:",l),console.log("Contrast Ratio:",h),console.log("Compliance Level:",m),console.log("Pass:",b)},[o,l]),/*#__PURE__*/r.default.createElement("div",{className:"contrast-color-picker"},/*#__PURE__*/r.default.createElement("div",{className:"color-picker-container"},n),/*#__PURE__*/r.default.createElement("div",{className:"contrast-analysis"},/*#__PURE__*/r.default.createElement("div",{className:"contrast-analysis-section "+(c?"result-pass":"result-fail")},/*#__PURE__*/r.default.createElement("span",null,"Contrast Ratio"),/*#__PURE__*/r.default.createElement("p",null,c?"Pass":"Fail"))))},ie=["className","colorModel","color","backgroundColor","children","onChange"],ce=function(t){var n=t.className,a=t.colorModel,u=t.color,i=void 0===u?a.defaultColor:u,c=t.backgroundColor,s=void 0===c?a.defaultBackgroundColor:c,f=t.children,d=t.onChange,v=l(t,ie),g=e.useRef(null);le(g);var p=te(a,i,d),m=p[0],b=p[1],C=te(a,s,d)[0],E=h(["react-colorful",n]);/*#__PURE__*/return r.default.createElement(ue,{foregroundColor:m,backgroundColor:C},/*#__PURE__*/r.default.createElement("div",o({},v,{ref:g,className:E}),/*#__PURE__*/r.default.createElement(U,{hsva:m,onChange:b}),/*#__PURE__*/r.default.createElement(Q,{hue:m.h,onChange:b,className:"react-colorful__last-control"})),f)},se=/^#?([0-9A-F]{3,8})$/i,fe=["color","onChange","onBlur","escape","validate","format","process"],de=function(t){var n=t.color,a=void 0===n?"":n,i=t.onChange,c=t.onBlur,s=t.escape,f=t.validate,d=t.format,v=t.process,g=l(t,fe),h=e.useState(function(){return s(a)}),p=h[0],m=h[1],b=u(i),C=u(c),E=e.useCallback(function(e){var t=s(e.target.value);m(t),f(t)&&b(v?v(t):t)},[s,v,f,b]),x=e.useCallback(function(e){f(e.target.value)||m(s(a)),C(e)},[a,s,f,C]);return e.useEffect(function(){m(s(a))},[a,s]),/*#__PURE__*/r.default.createElement("input",o({},g,{className:"color-input",value:d?d(p):p,spellCheck:"false",onChange:E,onBlur:x}))},ve=["prefixed","alpha"],ge=function(e){return"#"+e},he=function(t){var n=t.prefixed,a=t.alpha,u=l(t,ve),i=e.useCallback(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,a?8:6)},[a]),c=e.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,a)},[a]);/*#__PURE__*/return r.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/r.default.createElement("label",{htmlFor:t.label},t.label),/*#__PURE__*/r.default.createElement(de,o({},u,{id:t.label,escape:i,format:n?ge:void 0,process:ge,validate:c})))},pe={defaultColor:"000",defaultBackgroundColor:"fff",toHsva:C,fromHsva:function(e){return B({h:e.h,s:e.s,v:e.v,a:1})},equal:ee},me=function(e){var t=e.className,n=e.hsva,a=e.onChange,o={backgroundImage:"linear-gradient(90deg, "+A(Object.assign({},n,{a:0}))+", "+A(Object.assign({},n,{a:1}))+")"},l=h(["react-colorful__alpha",t]),u=m(100*n.a);/*#__PURE__*/return r.default.createElement("div",{className:l},/*#__PURE__*/r.default.createElement("div",{className:"react-colorful__alpha-gradient",style:o}),/*#__PURE__*/r.default.createElement(g,{onMove:function(e){a({a:e.left})},onKey:function(e){a({a:i(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":u+"%","aria-valuenow":u,"aria-valuemin":"0","aria-valuemax":"100"},/*#__PURE__*/r.default.createElement(p,{className:"react-colorful__alpha-pointer",left:n.a,color:A(n)})))},be=["className","colorModel","color","backgroundColor","children","onChange"],Ce=function(t){var n=t.className,a=t.colorModel,u=t.color,i=void 0===u?a.defaultColor:u,c=t.backgroundColor,s=void 0===c?a.defaultBackgroundColor:c,f=t.children,d=t.onChange,v=l(t,be),g=e.useRef(null);le(g);var p=te(a,i,d),m=p[0],b=p[1],C=te(a,s,d)[0],E=h(["react-colorful",n]);/*#__PURE__*/return r.default.createElement(ue,{foregroundColor:m,backgroundColor:C},/*#__PURE__*/r.default.createElement("div",o({},v,{ref:g,className:E}),/*#__PURE__*/r.default.createElement(U,{hsva:m,onChange:b}),/*#__PURE__*/r.default.createElement(Q,{hue:m.h,onChange:b}),/*#__PURE__*/r.default.createElement(me,{hsva:m,onChange:b,className:"react-colorful__last-control"})),f)},Ee={defaultColor:"0001",defaultBackgroundColor:"0000",toHsva:C,fromHsva:B,equal:ee},xe=function(t){var n=t.color,a=t.onChange,l=t.label,u=void 0===l?"HSLA":l,i=e.useState({h:n.h.toString(),s:n.s.toString(),l:n.l.toString(),a:n.a.toString()}),c=i[0],s=i[1];e.useEffect(function(){s(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 f=function(e){return function(t){var n=t.target.value;s(function(t){var r;return o({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,r=c[e],l=parseFloat(r);if(""===r||isNaN(l))s(function(t){var r;return o({},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,l));a(o({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return r.default.createElement("div",{className:"input-fields"},/*#__PURE__*/r.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-hue-input"},u),/*#__PURE__*/r.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/r.default.createElement("input",{id:u+"-hue-input",type:"text",value:c.h,onChange:f("h"),onBlur:d("h"),onKeyDown:v("h"),"aria-label":"Hue"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.s,onChange:f("s"),onBlur:d("s"),onKeyDown:v("s"),"aria-label":"Saturation"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.l,onChange:f("l"),onBlur:d("l"),onKeyDown:v("l"),"aria-label":"Lightness"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.a,onChange:f("a"),onBlur:d("a"),onKeyDown:v("a"),"aria-label":"Alpha"})))},Se={defaultColor:{h:0,s:0,l:0,a:1},defaultBackgroundColor:{h:0,s:0,l:100,a:1},toHsva:_,fromHsva:M,equal:W},ye=function(t){var n=t.color,a=void 0===n?"":n,o=t.onChange,l=t.label,u=e.useState(a),i=u[0],c=u[1];return e.useEffect(function(){c(a)},[a]),/*#__PURE__*/r.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/r.default.createElement("label",{htmlFor:l},l||"HSLA"),/*#__PURE__*/r.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=y(i);c(N(e)),o&&o(N(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=y(i);c(N(t)),o&&o(N(t))}},"aria-label":"HSLA Color"}))},Ne={defaultColor:"hsla(0, 0%, 0%, 1)",defaultBackgroundColor:"hsla(0, 0%, 100%, 1)",toHsva:S,fromHsva:A,equal:Z},ke=function(t){var n=t.color,a=t.onChange,l=t.label,u=void 0===l?"HSL":l,i=e.useState({h:n.h.toString(),s:n.s.toString(),l:n.l.toString()}),c=i[0],s=i[1];e.useEffect(function(){s(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 f=function(e){return function(t){var n=t.target.value;s(function(t){var r;return o({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,r=c[e],l=parseFloat(r);if(""===r||isNaN(l))s(function(t){var r;return o({},t,((r={})[e]=n[e].toString(),r))});else{var u=100;"h"===e&&(u=360);var i=Math.max(0,Math.min(u,l));a(o({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return r.default.createElement("div",{className:"input-fields"},/*#__PURE__*/r.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-hue-input"},u),/*#__PURE__*/r.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/r.default.createElement("input",{id:u+"-hue-input",type:"text",value:c.h,onChange:f("h"),onBlur:d("h"),onKeyDown:v("h"),"aria-label":"Hue"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.s,onChange:f("s"),onBlur:d("s"),onKeyDown:v("s"),"aria-label":"Saturation"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.l,onChange:f("l"),onBlur:d("l"),onKeyDown:v("l"),"aria-label":"Lightness"})))},He={defaultColor:{h:0,s:0,l:0},defaultBackgroundColor:{h:0,s:0,l:100},toHsva:function(e){return _({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(t=M(e)).h,s:t.s,l:t.l};var t},equal:W},we=function(t){var n=t.color,a=void 0===n?"":n,o=t.onChange,l=t.label,u=e.useState(a),i=u[0],c=u[1];return e.useEffect(function(){c(a)},[a]),/*#__PURE__*/r.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/r.default.createElement("label",{htmlFor:l},l||"HSL"),/*#__PURE__*/r.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=w(i);c(k(e)),o&&o(k(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=w(i);c(k(t)),o&&o(k(t))}},"aria-label":"HSL Color"}))},_e={defaultColor:"hsl(0, 0%, 0%)",defaultBackgroundColor:"hsl(0, 0%, 100%)",toHsva:H,fromHsva:D,equal:Z},Be=function(t){var n=t.color,a=t.onChange,l=t.label,u=void 0===l?"HSVA":l,i=e.useState({h:n.h.toString(),s:n.s.toString(),v:n.v.toString(),a:n.a.toString()}),c=i[0],s=i[1];e.useEffect(function(){s(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 f=function(e){return function(t){var n=t.target.value;s(function(t){var r;return o({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,r=c[e],l=parseFloat(r);if(""===r||isNaN(l))s(function(t){var r;return o({},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,l));a(o({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return r.default.createElement("div",{className:"input-fields"},/*#__PURE__*/r.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-hue-input"},u),/*#__PURE__*/r.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/r.default.createElement("input",{id:u+"-hue-input",type:"text",value:c.h,onChange:f("h"),onBlur:d("h"),onKeyDown:v("h"),"aria-label":"Hue"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.s,onChange:f("s"),onBlur:d("s"),onKeyDown:v("s"),"aria-label":"Saturation"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.v,onChange:f("v"),onBlur:d("v"),onKeyDown:v("v"),"aria-label":"Value"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.a,onChange:f("a"),onBlur:d("a"),onKeyDown:v("a"),"aria-label":"Alpha"})))},Me={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:W},De=function(t){var n=t.color,a=void 0===n?"":n,o=t.onChange,l=t.label,u=e.useState(a),i=u[0],c=u[1];return e.useEffect(function(){c(a)},[a]),/*#__PURE__*/r.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/r.default.createElement("label",{htmlFor:l},l||"HSVA"),/*#__PURE__*/r.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=F(i);c(K(e)),o&&o(K(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=F(i);c(K(t)),o&&o(K(t))}},"aria-label":"HSVA Color"}))},Ke={defaultColor:"hsva(0, 0%, 0%, 1)",defaultBackgroundColor:"hsva(0, 0%, 100%, 1)",toHsva:F,fromHsva:K,equal:Z},Ae=function(t){var n=t.color,a=t.onChange,l=t.label,u=void 0===l?"HSV":l,i=e.useState({h:n.h.toString(),s:n.s.toString(),v:n.v.toString()}),c=i[0],s=i[1];e.useEffect(function(){s(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 f=function(e){return function(t){var n=t.target.value;s(function(t){var r;return o({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,r=c[e],l=parseFloat(r);if(""===r||isNaN(l))s(function(t){var r;return o({},t,((r={})[e]=n[e].toString(),r))});else{var u=100;"h"===e&&(u=360);var i=Math.max(0,Math.min(u,l));a(o({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return r.default.createElement("div",{className:"input-fields"},/*#__PURE__*/r.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-hue-input"},u),/*#__PURE__*/r.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/r.default.createElement("input",{id:u+"-hue-input",type:"text",value:c.h,onChange:f("h"),onBlur:d("h"),onKeyDown:v("h"),"aria-label":"Hue"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.s,onChange:f("s"),onBlur:d("s"),onKeyDown:v("s"),"aria-label":"Saturation"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.v,onChange:f("v"),onBlur:d("v"),onKeyDown:v("v"),"aria-label":"Value"})))},Re={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:W},Fe=function(t){var n=t.color,a=void 0===n?"":n,o=t.onChange,l=t.label,u=e.useState(a),i=u[0],c=u[1];return e.useEffect(function(){c(a)},[a]),/*#__PURE__*/r.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/r.default.createElement("label",{htmlFor:l},l||"HSV"),/*#__PURE__*/r.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=q(i);c(L(e)),o&&o(L(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=q(i);c(L(t)),o&&o(L(t))}},"aria-label":"HSV Color"}))},Pe={defaultColor:"hsv(0, 0%, 0%)",defaultBackgroundColor:"hsv(0, 0%, 100%)",toHsva:P,fromHsva:function(e){var t=$(e);return"hsv("+t.h+", "+t.s+"%, "+t.v+"%)"},equal:Z},qe=function(t){var n=t.color,a=t.onChange,l=t.label,u=void 0===l?"RGBA":l,i=e.useState({r:n.r.toString(),g:n.g.toString(),b:n.b.toString(),a:n.a.toString()}),c=i[0],s=i[1];e.useEffect(function(){s(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 f=function(e){return function(t){var n=t.target.value;s(function(t){var r;return o({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,r=c[e],l=parseFloat(r);if(""===r||isNaN(l))s(function(t){var r;return o({},t,((r={})[e]=n[e].toString(),r))});else{var u=255;"a"===e&&(u=1);var i=Math.max(0,Math.min(u,l));a(o({},n,((t={})[e]=i,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return r.default.createElement("div",{className:"input-fields"},/*#__PURE__*/r.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-red-input"},u),/*#__PURE__*/r.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/r.default.createElement("input",{id:u+"-red-input",type:"text",value:c.r,onChange:f("r"),onBlur:d("r"),onKeyDown:v("r"),"aria-label":"Red"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.g,onChange:f("g"),onBlur:d("g"),onKeyDown:v("g"),"aria-label":"Green"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.b,onChange:f("b"),onBlur:d("b"),onKeyDown:v("b"),"aria-label":"Blue"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.a,onChange:f("a"),onBlur:d("a"),onKeyDown:v("a"),"aria-label":"Alpha"})))},Le={defaultColor:{r:0,g:0,b:0,a:1},defaultBackgroundColor:{r:255,g:255,b:255,a:1},toHsva:Y,fromHsva:R,equal:W},ze=function(t){var n=t.color,a=void 0===n?"":n,o=t.onChange,l=t.label,u=e.useState(a),i=u[0],c=u[1];return e.useEffect(function(){c(a)},[a]),/*#__PURE__*/r.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/r.default.createElement("label",{htmlFor:l},l||"RGBA"),/*#__PURE__*/r.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=V(i);c(I(e)),o&&o(I(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=V(i);c(I(t)),o&&o(I(t))}},"aria-label":"RGBA Color"}))},Ve={defaultColor:"rgba(0, 0, 0, 1)",defaultBackgroundColor:"rgba(0, 0, 0, 0)",toHsva:z,fromHsva:function(e){var t=R(e);return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},equal:Z},Ie=function(t){var n=t.color,a=t.onChange,l=t.label,u=void 0===l?"RGB":l,i=e.useState({r:n.r.toString(),g:n.g.toString(),b:n.b.toString()}),c=i[0],s=i[1];e.useEffect(function(){s(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 f=function(e){return function(t){var n=t.target.value;s(function(t){var r;return o({},t,((r={})[e]=n,r))})}},d=function(e){return function(){var t,r=c[e],l=parseFloat(r);if(""===r||isNaN(l))s(function(t){var r;return o({},t,((r={})[e]=n[e].toString(),r))});else{var u=Math.max(0,Math.min(255,l));a(o({},n,((t={})[e]=u,t)))}}},v=function(e){return function(t){"Enter"===t.key&&(t.preventDefault(),d(e)())}};/*#__PURE__*/return r.default.createElement("div",{className:"input-fields"},/*#__PURE__*/r.default.createElement("label",{id:u+"-group-label",htmlFor:u+"-red-input"},u),/*#__PURE__*/r.default.createElement("div",{className:"input-fields-container",role:"group","aria-labelledby":u+"-group-label"},/*#__PURE__*/r.default.createElement("input",{id:u+"-red-input",type:"text",value:c.r,onChange:f("r"),onBlur:d("r"),onKeyDown:v("r"),"aria-label":"Red"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.g,onChange:f("g"),onBlur:d("g"),onKeyDown:v("g"),"aria-label":"Green"}),/*#__PURE__*/r.default.createElement("input",{type:"text",value:c.b,onChange:f("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 Y({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(t=R(e)).r,g:t.g,b:t.b};var t},equal:W},je=function(t){var n=t.color,a=void 0===n?"":n,o=t.onChange,l=t.label,u=e.useState(a),i=u[0],c=u[1];return e.useEffect(function(){c(a)},[a]),/*#__PURE__*/r.default.createElement("div",{className:"color-input-container"},/*#__PURE__*/r.default.createElement("label",{htmlFor:l},l||"RGB"),/*#__PURE__*/r.default.createElement("input",{className:"color-input",id:l,type:"text",value:i,onChange:function(e){c(e.target.value)},onBlur:function(){var e=j(i);c(O(e)),o&&o(O(e))},onKeyDown:function(e){if("Enter"===e.key){e.preventDefault();var t=j(i);c(O(t)),o&&o(O(t))}},"aria-label":"RGB Color"}))},Oe={defaultColor:"rgb(0, 0, 0)",defaultBackgroundColor:"rgb(255, 255, 255)",toHsva:G,fromHsva:function(e){var t=R(e);return"rgb("+t.r+", "+t.g+", "+t.b+")"},equal:Z};exports.HexAlphaColorPicker=function(e){/*#__PURE__*/return r.default.createElement(Ce,o({},e,{colorModel:Ee}),/*#__PURE__*/r.default.createElement(he,o({},e,{label:"Hex-Alpha",prefixed:!0,alpha:!0})))},exports.HexColorInput=he,exports.HexColorPicker=function(e){/*#__PURE__*/return r.default.createElement(ce,o({},e,{colorModel:pe}),/*#__PURE__*/r.default.createElement(he,o({},e,{label:"Hex",prefixed:!0})))},exports.HslColorPicker=function(e){/*#__PURE__*/return r.default.createElement(ce,o({},e,{colorModel:He}),e.color&&e.onChange&&/*#__PURE__*/r.default.createElement(ke,{color:e.color,onChange:e.onChange}))},exports.HslStringColorPicker=function(e){/*#__PURE__*/return r.default.createElement(ce,o({},e,{colorModel:_e}),/*#__PURE__*/r.default.createElement(we,o({},e,{label:"HSL"})))},exports.HslaColorPicker=function(e){/*#__PURE__*/return r.default.createElement(Ce,o({},e,{colorModel:Se}),e.color&&e.onChange&&/*#__PURE__*/r.default.createElement(xe,{color:e.color,onChange:e.onChange}))},exports.HslaStringColorPicker=function(e){/*#__PURE__*/return r.default.createElement(Ce,o({},e,{colorModel:Ne}),/*#__PURE__*/r.default.createElement(ye,o({},e,{label:"HSLA"})))},exports.HsvColorPicker=function(e){/*#__PURE__*/return r.default.createElement(ce,o({},e,{colorModel:Re}),e.color&&e.onChange&&/*#__PURE__*/r.default.createElement(Ae,{color:e.color,onChange:e.onChange}))},exports.HsvStringColorPicker=function(e){/*#__PURE__*/return r.default.createElement(ce,o({},e,{colorModel:Pe}),/*#__PURE__*/r.default.createElement(Fe,o({},e,{label:"HSV"})))},exports.HsvaColorPicker=function(e){/*#__PURE__*/return r.default.createElement(Ce,o({},e,{colorModel:Me}),e.color&&e.onChange&&/*#__PURE__*/r.default.createElement(Be,{color:e.color,onChange:e.onChange}))},exports.HsvaStringColorPicker=function(e){/*#__PURE__*/return r.default.createElement(Ce,o({},e,{colorModel:Ke}),/*#__PURE__*/r.default.createElement(De,o({},e,{label:"HSVA"})))},exports.RgbColorPicker=function(e){/*#__PURE__*/return r.default.createElement(ce,o({},e,{colorModel:Ge}),e.color&&e.onChange&&/*#__PURE__*/r.default.createElement(Ie,{color:e.color,onChange:e.onChange}))},exports.RgbStringColorPicker=function(e){/*#__PURE__*/return r.default.createElement(ce,o({},e,{colorModel:Oe}),/*#__PURE__*/r.default.createElement(je,o({},e,{label:"RGB"})))},exports.RgbaColorPicker=function(e){/*#__PURE__*/return r.default.createElement(Ce,o({},e,{colorModel:Le}),e.color&&e.onChange&&/*#__PURE__*/r.default.createElement(qe,{color:e.color,onChange:e.onChange}))},exports.RgbaStringColorPicker=function(e){/*#__PURE__*/return r.default.createElement(Ce,o({},e,{colorModel:Ve}),/*#__PURE__*/r.default.createElement(ze,o({},e,{label:"RGBA"})))},exports.setNonce=function(e){ne=e};
//# sourceMappingURL=index.js.map