react-color-palette - npm Package Compare versions

Comparing version 7.2.1 to 7.2.2

dist/rcp.d.ts

@@ -66,2 +66,2 @@ import React$1 from 'react';
 
-export { Alpha, ColorPicker, ColorService, Hue, IColor, Saturation, useColor };
+export { Alpha, ColorPicker, ColorService, Hue, type IColor, Saturation, useColor };

dist/rcp.js

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

package.json

 {
   "name": "react-color-palette",
-  "version": "7.2.1",
+  "version": "7.2.2",
   "description": "🎨 Lightweight Color Picker component for React.",
@@ -51,4 +51,4 @@ "author": "Wondermarin",
     "test:types": "tsc",
-    "test": "yarn test:lint && yarn test:types",
-    "prebuild": "yarn test",
+    "test": "pnpm test:lint && pnpm test:types",
+    "prebuild": "pnpm test",
     "build": "tsup"
@@ -55,0 +55,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34511

increased by0.74%

No dependency changes