react-color-palette - npm Package Compare versions

Comparing version 7.0.2 to 7.0.3

dist/rcp.js

		"use client"
		"use strict";var R=Object.create;var H=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var r in e)H(t,r,{get:e[r],enumerable:!0})},B=(t,e,r,o)=>{if(e&&typeof e=="object"\|\|typeof e=="function")for(let n of W(e))!X.call(t,n)&&n!==r&&H(t,n,{get:()=>e[n],enumerable:!(o=z(e,n))\|\|o.enumerable});return t};var y=(t,e,r)=>(r=t!=null?R(_(t)):{},B(e\|\|!t\|\|!t.__esModule?H(r,"default",{value:t,enumerable:!0}):r,t)),G=t=>B(H({},"__esModule",{value:!0}),t);var U={};q(U,{Alpha:()=>S,ColorPicker:()=>j,ColorService:()=>h,Hue:()=>P,Saturation:()=>k,useColor:()=>D});module.exports=G(U);var v=y(require("react"));var m=y(require("react"));var x=require("react");function I(t){let[e,r]=(0,x.useState)(0),o=(0,x.useCallback)(()=>r(n=>n+1),[]);return(0,x.useEffect)(()=>(window.addEventListener("resize",o,!1),()=>{window.removeEventListener("resize",o,!1)}),[o]),(0,x.useMemo)(()=>{if(!t)return{width:1,height:1,left:1,top:1};let{width:n,height:s,left:a,top:i}=t.getBoundingClientRect();return{width:n,height:s,left:a,top:i}},[t,e])}function N(t,e,r){return t<e?e:t>r?r:t}var w=class{convert(e,r){let o=this.toHex("#000000"),n=this.hex2rgb(o),s=this.rgb2hsv(n);if(e==="hex"){let a=r;o=this.toHex(a),n=this.hex2rgb(o),o.startsWith("rgba")&&(n=this.toRgb(o),o=this.rgb2hex(n)),s=this.rgb2hsv(n)}else e==="rgb"?(n=r,o=this.rgb2hex(n),s=this.rgb2hsv(n)):e==="hsv"&&(s=r,n=this.hsv2rgb(s),o=this.rgb2hex(n));return{hex:o,rgb:n,hsv:s}}toHex(e){if(e.startsWith("#")){if(e.length===4\|\|e.length===5)return e=e.split("").map((r,o)=>o?o<4?r+r:r==="f"?void 0:r+r:"#").join(""),e;if(e.length===7)return e;if(e.length===9)return e.endsWith("ff")?e.slice(0,7):e}else{let r=document.createElement("canvas").getContext("2d");if(!r)throw new Error("2d context not supported or canvas already initialized");return r.fillStyle=e,r.fillStyle}return"#000000"}toRgb(e){let r=e.match(/\d+(\.\d+)?/gu)??[],[o,n,s,a]=Array.from({length:4}).map((i,l)=>N(+(r[l]??(l<3?0:1)),0,l<3?255:1));return{r:o,g:n,b:s,a}}toHsv(e){let r=e.match(/\d+(\.\d+)?/gu)??[],[o,n,s,a]=Array.from({length:4}).map((i,l)=>N(+(r[l]??(l<3?0:1)),0,l?l<3?100:1:360));return{h:o,s:n,v:s,a}}hex2rgb(e){e=e.slice(1);let[r,o,n,s]=Array.from({length:4}).map((a,i)=>parseInt(e.slice(i2,i2+2),16));return s=Number.isNaN(s)?1:s/255,{r,g:o,b:n,a:s}}rgb2hsv({r:e,g:r,b:o,a:n}){e/=255,r/=255,o/=255;let s=Math.max(e,r,o),a=s-Math.min(e,r,o),i=a?(s===e?(r-o)/a+(r<o?6:0):s===r?2+(o-e)/a:4+(e-r)/a)60:0,l=s?a/s100:0,c=s100;return{h:i,s:l,v:c,a:n}}hsv2rgb({h:e,s:r,v:o,a:n}){r/=100,o/=100;let s=~~(e/60),a=e/60-s,i=o(1-r),l=o(1-ra),c=o(1-r(1-a)),p=s%6,b=[o,l,i,i,c,o][p]255,C=[c,o,o,l,i,i][p]255,M=[i,i,c,o,o,l][p]255;return{r:b,g:C,b:M,a:n}}rgb2hex({r:e,g:r,b:o,a:n}){let[s,a,i,l]=[e,r,o,n].map((c,p)=>Math.round(p<3?c:c255).toString(16).padStart(2,"0"));return["#",s,a,i,l==="ff"?void 0:l].join("")}},h=new w;var g=y(require("react"));var E=(0,g.memo)(({onCoordinateChange:t,children:e})=>{let[r,o]=(0,g.useState)(null),{width:n,height:s,left:a,top:i}=I(r),l=(0,g.useCallback)(p=>{let b=N(p.clientX-a,0,n),C=N(p.clientY-i,0,s);t(b,C)},[n,s,a,i,t]),c=(0,g.useCallback)(p=>{if(p.button!==0)return;l(p);let b=M=>{l(M)},C=M=>{l(M),document.removeEventListener("pointermove",b,!1),document.removeEventListener("pointerup",C,!1)};document.addEventListener("pointermove",b,!1),document.addEventListener("pointerup",C,!1)},[l]);return g.default.createElement("div",{ref:o,className:"rcp-interactive",onPointerDown:c},e)});var S=(0,m.memo)(({color:t,onChange:e})=>{let[r,o]=(0,m.useState)(null),{width:n}=I(r),s=(0,m.useMemo)(()=>({x:t.hsv.a*n}),[t.hsv.a,n]),a=(0,m.useCallback)(c=>{let p=h.convert("hsv",{...t.hsv,a:c/n});e(p)},[n,t.hsv,e]),i=(0,m.useMemo)(()=>[t.rgb.r,t.rgb.g,t.rgb.b].join(" "),[t.rgb.r,t.rgb.g,t.rgb.b]),l=(0,m.useMemo)(()=>[i,t.rgb.a].join(" / "),[i,t.rgb.a]);return m.default.createElement(E,{onCoordinateChange:a},m.default.createElement("div",{ref:o,style:{background:`linear-gradient(to right, rgb(${i} / 0), rgb(${i} / 1)) top left / auto auto,
		"use strict";var R=Object.create;var E=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var X=(o,e)=>{for(var t in e)E(o,t,{get:e[t],enumerable:!0})},B=(o,e,t,r)=>{if(e&&typeof e=="object"\|\|typeof e=="function")for(let n of O(e))!_.call(o,n)&&n!==t&&E(o,n,{get:()=>e[n],enumerable:!(r=z(e,n))\|\|r.enumerable});return o};var I=(o,e,t)=>(t=o!=null?R(W(o)):{},B(e\|\|!o\|\|!o.__esModule?E(t,"default",{value:o,enumerable:!0}):t,o)),q=o=>B(E({},"__esModule",{value:!0}),o);var G={};X(G,{Alpha:()=>H,ColorPicker:()=>$,ColorService:()=>h,Hue:()=>P,Saturation:()=>S,useColor:()=>j});module.exports=q(G);var f=I(require("react"));var m=I(require("react"));var b=require("react");function C(){let o=(0,b.useRef)(null),[e,t]=(0,b.useState)(0),r=(0,b.useCallback)(()=>t(n=>n+1),[]);return(0,b.useLayoutEffect)(()=>{window.addEventListener("resize",r,!1);let n=new ResizeObserver(r);return o.current&&n.observe(o.current),()=>{window.removeEventListener("resize",r,!1),n.disconnect()}},[r]),(0,b.useMemo)(()=>{let n=o.current?.getBoundingClientRect()??{};return[o,n]},[e])}function y(o,e,t){return o<e?e:o>t?t:o}var T=class{convert(e,t){let r=this.toHex("#000000"),n=this.hex2rgb(r),i=this.rgb2hsv(n);if(e==="hex"){let a=t;r=this.toHex(a),n=this.hex2rgb(r),r.startsWith("rgba")&&(n=this.toRgb(r),r=this.rgb2hex(n)),i=this.rgb2hsv(n)}else e==="rgb"?(n=t,r=this.rgb2hex(n),i=this.rgb2hsv(n)):e==="hsv"&&(i=t,n=this.hsv2rgb(i),r=this.rgb2hex(n));return{hex:r,rgb:n,hsv:i}}toHex(e){if(e.startsWith("#")){if(e.length===4\|\|e.length===5)return e=e.split("").map((t,r)=>r?r<4?t+t:t==="f"?void 0:t+t:"#").join(""),e;if(e.length===7)return e;if(e.length===9)return e.endsWith("ff")?e.slice(0,7):e}else{let t=document.createElement("canvas").getContext("2d");if(!t)throw new Error("2d context not supported or canvas already initialized");return t.fillStyle=e,t.fillStyle}return"#000000"}toRgb(e){let t=e.match(/\d+(\.\d+)?/gu)??[],[r,n,i,a]=Array.from({length:4}).map((s,l)=>y(+(t[l]??(l<3?0:1)),0,l<3?255:1));return{r,g:n,b:i,a}}toHsv(e){let t=e.match(/\d+(\.\d+)?/gu)??[],[r,n,i,a]=Array.from({length:4}).map((s,l)=>y(+(t[l]??(l<3?0:1)),0,l?l<3?100:1:360));return{h:r,s:n,v:i,a}}hex2rgb(e){e=e.slice(1);let[t,r,n,i]=Array.from({length:4}).map((a,s)=>parseInt(e.slice(s2,s2+2),16));return i=Number.isNaN(i)?1:i/255,{r:t,g:r,b:n,a:i}}rgb2hsv({r:e,g:t,b:r,a:n}){e/=255,t/=255,r/=255;let i=Math.max(e,t,r),a=i-Math.min(e,t,r),s=a?(i===e?(t-r)/a+(t<r?6:0):i===t?2+(r-e)/a:4+(e-t)/a)60:0,l=i?a/i100:0,u=i100;return{h:s,s:l,v:u,a:n}}hsv2rgb({h:e,s:t,v:r,a:n}){t/=100,r/=100;let i=~~(e/60),a=e/60-i,s=r(1-t),l=r(1-ta),u=r(1-t(1-a)),p=i%6,g=[r,l,s,s,u,r][p]255,N=[u,r,r,l,s,s][p]255,A=[s,s,u,r,r,l][p]255;return{r:g,g:N,b:A,a:n}}rgb2hex({r:e,g:t,b:r,a:n}){let[i,a,s,l]=[e,t,r,n].map((u,p)=>Math.round(p<3?u:u255).toString(16).padStart(2,"0"));return["#",i,a,s,l==="ff"?void 0:l].join("")}},h=new T;var x=I(require("react"));var M=(0,x.memo)(({onCoordinateChange:o,children:e})=>{let[t,{width:r=1,height:n=1,left:i=1,top:a=1}]=C(),s=(0,x.useCallback)(u=>{let p=y(u.clientX-i,0,r),g=y(u.clientY-a,0,n);o(p,g)},[r,n,i,a,o]),l=(0,x.useCallback)(u=>{if(u.button!==0)return;s(u);let p=N=>{s(N)},g=N=>{s(N),document.removeEventListener("pointermove",p,!1),document.removeEventListener("pointerup",g,!1)};document.addEventListener("pointermove",p,!1),document.addEventListener("pointerup",g,!1)},[s]);return x.default.createElement("div",{ref:t,className:"rcp-interactive",onPointerDown:l},e)});var H=(0,m.memo)(({color:o,onChange:e})=>{let[t,{width:r=1}]=C(),n=(0,m.useMemo)(()=>({x:o.hsv.a*r}),[o.hsv.a,r]),i=(0,m.useCallback)(l=>{let u=h.convert("hsv",{...o.hsv,a:l/r});e(u)},[r,o.hsv,e]),a=(0,m.useMemo)(()=>[o.rgb.r,o.rgb.g,o.rgb.b].join(" "),[o.rgb.r,o.rgb.g,o.rgb.b]),s=(0,m.useMemo)(()=>[a,o.rgb.a].join(" / "),[a,o.rgb.a]);return m.default.createElement(M,{onCoordinateChange:i},m.default.createElement("div",{ref:t,style:{background:`linear-gradient(to right, rgb(${a} / 0), rgb(${a} / 1)) top left / auto auto,
		conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
		repeat`},className:"rcp-alpha"},m.default.createElement("div",{style:{left:s.x,background:`linear-gradient(to right, rgb(${l}), rgb(${l})) top left / auto auto,
		conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) ${-s.x-4}px 2px / 12px 12px
		repeat`},className:"rcp-alpha-cursor"})))});var u=y(require("react"));function L(t,e){return Math.round(t10e)/10e}function F({r:t,g:e,b:r,a:o}){let n=[Math.round(t),Math.round(e),Math.round(r)],s=L(o,3);return s<1&&n.push(s),n.join(", ")}function A({h:t,s:e,v:r,a:o}){let n=[`${Math.round(t)}\xB0`,`${Math.round(e)}%`,`${Math.round(r)}%`],s=L(o,3);return s<1&&n.push(s),n.join(", ")}var $=(0,u.memo)(({color:t,onChange:e})=>{let[r,o]=(0,u.useState)({hex:{value:t.hex,inputted:!1},rgb:{value:F(t.rgb),inputted:!1},hsv:{value:A(t.hsv),inputted:!1}});(0,u.useEffect)(()=>{r.hex.inputted\|\|o(i=>({...i,hex:{...i.hex,value:t.hex}}))},[r.hex.inputted,t.hex]),(0,u.useEffect)(()=>{r.rgb.inputted\|\|o(i=>({...i,rgb:{...i.rgb,value:F(t.rgb)}}))},[r.rgb.inputted,t.rgb]),(0,u.useEffect)(()=>{r.hsv.inputted\|\|o(i=>({...i,hsv:{...i.hsv,value:A(t.hsv)}}))},[r.hsv.inputted,t.hsv]);let n=(0,u.useCallback)(i=>l=>{let{value:c}=l.target;o(p=>({...p,[i]:{...p[i],value:c}})),e(i==="hsv"?h.convert("hsv",h.toHsv(c)):i==="rgb"?h.convert("rgb",h.toRgb(c)):h.convert("hex",c))},[e]),s=(0,u.useCallback)(i=>()=>{o(l=>({...l,[i]:{...l[i],inputted:!0}}))},[]),a=(0,u.useCallback)(i=>()=>{o(l=>({...l,[i]:{...l[i],inputted:!1}}))},[]);return u.default.createElement("div",{className:"rcp-fields"},u.default.createElement("div",{className:"rcp-fields-floor"},u.default.createElement("div",{className:"rcp-field"},u.default.createElement("input",{id:"hex",className:"rcp-field-input",value:r.hex.value,onChange:n("hex"),onFocus:s("hex"),onBlur:a("hex")}),u.default.createElement("label",{htmlFor:"hex",className:"rcp-field-label"},"HEX"))),u.default.createElement("div",{className:"rcp-fields-floor"},u.default.createElement("div",{className:"rcp-field"},u.default.createElement("input",{id:"rgb",className:"rcp-field-input",value:r.rgb.value,onChange:n("rgb"),onFocus:s("rgb"),onBlur:a("rgb")}),u.default.createElement("label",{htmlFor:"rgb",className:"rcp-field-label"},"RGB")),u.default.createElement("div",{className:"rcp-field"},u.default.createElement("input",{id:"hsv",className:"rcp-field-input",value:r.hsv.value,onChange:n("hsv"),onFocus:s("hsv"),onBlur:a("hsv")}),u.default.createElement("label",{htmlFor:"hsv",className:"rcp-field-label"},"HSV"))))});var f=y(require("react"));var P=(0,f.memo)(({color:t,onChange:e})=>{let[r,o]=(0,f.useState)(null),{width:n}=I(r),s=(0,f.useMemo)(()=>({x:t.hsv.h/360n}),[t.hsv.h,n]),a=(0,f.useCallback)(l=>{let c=h.convert("hsv",{...t.hsv,h:l/n360});e(c)},[n,t.hsv,e]),i=(0,f.useMemo)(()=>[t.hsv.h,"100%","50%"].join(" "),[t.hsv.h]);return f.default.createElement(E,{onCoordinateChange:a},f.default.createElement("div",{ref:o,className:"rcp-hue"},f.default.createElement("div",{style:{left:s.x,backgroundColor:`hsl(${i})`},className:"rcp-hue-cursor"})))});var d=y(require("react"));var k=(0,d.memo)(({height:t,color:e,onChange:r})=>{let[o,n]=(0,d.useState)(null),{width:s}=I(o),a=(0,d.useMemo)(()=>{let p=e.hsv.s/100s,b=(100-e.hsv.v)/100t;return{x:p,y:b}},[e.hsv.s,e.hsv.v,s,t]),i=(0,d.useCallback)((p,b)=>{let C=h.convert("hsv",{...e.hsv,s:p/s100,v:100-b/t*100});r(C)},[e.hsv,s,t,r]),l=(0,d.useMemo)(()=>[e.hsv.h,"100%","50%"].join(" "),[e.hsv.h]),c=(0,d.useMemo)(()=>[e.rgb.r,e.rgb.g,e.rgb.b].join(" "),[e.rgb.r,e.rgb.g,e.rgb.b]);return d.default.createElement(E,{onCoordinateChange:i},d.default.createElement("div",{ref:n,style:{height:t,backgroundColor:`hsl(${l})`},className:"rcp-saturation"},d.default.createElement("div",{style:{left:a.x,top:a.y,backgroundColor:`rgb(${c})`},className:"rcp-saturation-cursor"})))});var j=(0,v.memo)(({height:t=200,hideAlpha:e=!1,hideInput:r=!1,color:o,onChange:n})=>v.default.createElement("div",{className:"rcp-root rcp"},v.default.createElement(k,{height:t,color:o,onChange:n}),v.default.createElement("div",{className:"rcp-body"},v.default.createElement("section",{className:"rcp-section"},v.default.createElement(P,{color:o,onChange:n}),!e&&v.default.createElement(S,{color:o,onChange:n})),!r&&v.default.createElement("section",{className:"rcp-section"},v.default.createElement($,{color:o,onChange:n})))));var T=require("react");function D(t){let[e,r]=(0,T.useState)(h.convert("hex",t));return(0,T.useEffect)(()=>{r(h.convert("hex",t))},[t]),[e,r]}0&&(module.exports={Alpha,ColorPicker,ColorService,Hue,Saturation,useColor});
		repeat`},className:"rcp-alpha"},m.default.createElement("div",{style:{left:n.x,background:`linear-gradient(to right, rgb(${s}), rgb(${s})) top left / auto auto,
		conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) ${-n.x-4}px 2px / 12px 12px
		repeat`},className:"rcp-alpha-cursor"})))});var c=I(require("react"));function L(o,e){return Math.round(o10e)/10e}function w({r:o,g:e,b:t,a:r}){let n=[Math.round(o),Math.round(e),Math.round(t)],i=L(r,3);return i<1&&n.push(i),n.join(", ")}function F({h:o,s:e,v:t,a:r}){let n=[`${Math.round(o)}\xB0`,`${Math.round(e)}%`,`${Math.round(t)}%`],i=L(r,3);return i<1&&n.push(i),n.join(", ")}var D=(0,c.memo)(({color:o,onChange:e})=>{let[t,r]=(0,c.useState)({hex:{value:o.hex,inputted:!1},rgb:{value:w(o.rgb),inputted:!1},hsv:{value:F(o.hsv),inputted:!1}});(0,c.useEffect)(()=>{t.hex.inputted\|\|r(s=>({...s,hex:{...s.hex,value:o.hex}}))},[t.hex.inputted,o.hex]),(0,c.useEffect)(()=>{t.rgb.inputted\|\|r(s=>({...s,rgb:{...s.rgb,value:w(o.rgb)}}))},[t.rgb.inputted,o.rgb]),(0,c.useEffect)(()=>{t.hsv.inputted\|\|r(s=>({...s,hsv:{...s.hsv,value:F(o.hsv)}}))},[t.hsv.inputted,o.hsv]);let n=(0,c.useCallback)(s=>l=>{let{value:u}=l.target;r(p=>({...p,[s]:{...p[s],value:u}})),e(s==="hsv"?h.convert("hsv",h.toHsv(u)):s==="rgb"?h.convert("rgb",h.toRgb(u)):h.convert("hex",u))},[e]),i=(0,c.useCallback)(s=>()=>{r(l=>({...l,[s]:{...l[s],inputted:!0}}))},[]),a=(0,c.useCallback)(s=>()=>{r(l=>({...l,[s]:{...l[s],inputted:!1}}))},[]);return c.default.createElement("div",{className:"rcp-fields"},c.default.createElement("div",{className:"rcp-fields-floor"},c.default.createElement("div",{className:"rcp-field"},c.default.createElement("input",{id:"hex",className:"rcp-field-input",value:t.hex.value,onChange:n("hex"),onFocus:i("hex"),onBlur:a("hex")}),c.default.createElement("label",{htmlFor:"hex",className:"rcp-field-label"},"HEX"))),c.default.createElement("div",{className:"rcp-fields-floor"},c.default.createElement("div",{className:"rcp-field"},c.default.createElement("input",{id:"rgb",className:"rcp-field-input",value:t.rgb.value,onChange:n("rgb"),onFocus:i("rgb"),onBlur:a("rgb")}),c.default.createElement("label",{htmlFor:"rgb",className:"rcp-field-label"},"RGB")),c.default.createElement("div",{className:"rcp-field"},c.default.createElement("input",{id:"hsv",className:"rcp-field-input",value:t.hsv.value,onChange:n("hsv"),onFocus:i("hsv"),onBlur:a("hsv")}),c.default.createElement("label",{htmlFor:"hsv",className:"rcp-field-label"},"HSV"))))});var v=I(require("react"));var P=(0,v.memo)(({color:o,onChange:e})=>{let[t,{width:r=1}]=C(),n=(0,v.useMemo)(()=>({x:o.hsv.h/360r}),[o.hsv.h,r]),i=(0,v.useCallback)(s=>{let l=h.convert("hsv",{...o.hsv,h:s/r360});e(l)},[r,o.hsv,e]),a=(0,v.useMemo)(()=>[o.hsv.h,"100%","50%"].join(" "),[o.hsv.h]);return v.default.createElement(M,{onCoordinateChange:i},v.default.createElement("div",{ref:t,className:"rcp-hue"},v.default.createElement("div",{style:{left:n.x,backgroundColor:`hsl(${a})`},className:"rcp-hue-cursor"})))});var d=I(require("react"));var S=(0,d.memo)(({height:o,color:e,onChange:t})=>{let[r,{width:n=1}]=C(),i=(0,d.useMemo)(()=>{let u=e.hsv.s/100n,p=(100-e.hsv.v)/100o;return{x:u,y:p}},[e.hsv.s,e.hsv.v,n,o]),a=(0,d.useCallback)((u,p)=>{let g=h.convert("hsv",{...e.hsv,s:u/n100,v:100-p/o*100});t(g)},[e.hsv,n,o,t]),s=(0,d.useMemo)(()=>[e.hsv.h,"100%","50%"].join(" "),[e.hsv.h]),l=(0,d.useMemo)(()=>[e.rgb.r,e.rgb.g,e.rgb.b].join(" "),[e.rgb.r,e.rgb.g,e.rgb.b]);return d.default.createElement(M,{onCoordinateChange:a},d.default.createElement("div",{ref:r,style:{height:o,backgroundColor:`hsl(${s})`},className:"rcp-saturation"},d.default.createElement("div",{style:{left:i.x,top:i.y,backgroundColor:`rgb(${l})`},className:"rcp-saturation-cursor"})))});var $=(0,f.memo)(({height:o=200,hideAlpha:e=!1,hideInput:t=!1,color:r,onChange:n})=>f.default.createElement("div",{className:"rcp-root rcp"},f.default.createElement(S,{height:o,color:r,onChange:n}),f.default.createElement("div",{className:"rcp-body"},f.default.createElement("section",{className:"rcp-section"},f.default.createElement(P,{color:r,onChange:n}),!e&&f.default.createElement(H,{color:r,onChange:n})),!t&&f.default.createElement("section",{className:"rcp-section"},f.default.createElement(D,{color:r,onChange:n})))));var k=require("react");function j(o){let[e,t]=(0,k.useState)(h.convert("hex",o));return(0,k.useEffect)(()=>{t(h.convert("hex",o))},[o]),[e,t]}0&&(module.exports={Alpha,ColorPicker,ColorService,Hue,Saturation,useColor});

package.json

		{
		"name": "react-color-palette",
		"version": "7.0.2",
		"version": "7.0.3",
		"description": "🎨 Lightweight Color Picker component for React.",
		@@ -5,0 +5,0 @@ "author": "Wondermarin",

dist/rcp.mjs

Sorry, the diff of this file is not supported yet

react-color-palette - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics