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

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