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