react-color-palette - npm Package Compare versions

Comparing version 7.1.1 to 7.2.0

dist/rcp.d.ts

@@ -38,4 +38,5 @@ import React$1 from 'react';
     readonly onChange: (color: IColor) => void;
+    readonly onChangeComplete?: (color: IColor) => void;
 }
-declare const ColorPicker: React$1.MemoExoticComponent<({ height, hideAlpha, hideInput, color, onChange }: IColorPickerProps) => React$1.JSX.Element>;
+declare const ColorPicker: React$1.MemoExoticComponent<({ height, hideAlpha, hideInput, color, onChange, onChangeComplete }: IColorPickerProps) => React$1.JSX.Element>;
 
@@ -46,4 +47,5 @@ interface ISaturationProps {
     readonly onChange: (color: IColor) => void;
+    readonly onChangeComplete?: (color: IColor) => void;
 }
-declare const Saturation: React$1.MemoExoticComponent<({ height, color, onChange }: ISaturationProps) => React$1.JSX.Element>;
+declare const Saturation: React$1.MemoExoticComponent<({ height, color, onChange, onChangeComplete }: ISaturationProps) => React$1.JSX.Element>;
 
@@ -53,4 +55,5 @@ interface IHueProps {
     readonly onChange: (color: IColor) => void;
+    readonly onChangeComplete?: (color: IColor) => void;
 }
-declare const Hue: React$1.MemoExoticComponent<({ color, onChange }: IHueProps) => React$1.JSX.Element>;
+declare const Hue: React$1.MemoExoticComponent<({ color, onChange, onChangeComplete }: IHueProps) => React$1.JSX.Element>;
 
@@ -60,4 +63,5 @@ interface IAlphaProps {
     readonly onChange: (color: IColor) => void;
+    readonly onChangeComplete?: (color: IColor) => void;
 }
-declare const Alpha: React$1.MemoExoticComponent<({ color, onChange }: IAlphaProps) => React$1.JSX.Element>;
+declare const Alpha: React$1.MemoExoticComponent<({ color, onChange, onChangeComplete }: IAlphaProps) => React$1.JSX.Element>;
 
@@ -64,0 +68,0 @@ declare function useColor(initialColor: string): [IColor, React.Dispatch<React.SetStateAction<IColor>>];

dist/rcp.js

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

package.json

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

README.md

@@ -102,2 +102,16 @@ <div align="center">
 
+### onChangeComplete optional callback
+```tsx
+import { ColorPicker, useColor, type IColor } from "react-color-palette";
+import "react-color-palette/css";
+
+export function App() {
+  const [color, setColor] = useColor("#123123");
+
+  const onChangeComplete = (color: IColor) => localStorage.setItem("color", color.hex);
+
+  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} onChangeComplete={onChangeComplete} />
+}
+```
+
 ## API
@@ -145,2 +159,8 @@
   </tr>
+  <tr>
+    <td>onChangeComplete</td>
+    <td>Function</td>
+    <td></td>
+    <td>Callback function will be fired when the interaction is complete with the color picker.</td>
+  </tr>
 </table>
@@ -175,2 +195,8 @@
   </tr>
+  <tr>
+    <td>onChangeComplete</td>
+    <td>Function</td>
+    <td></td>
+    <td>Callback function will be fired when the interaction is complete with the saturation picker.</td>
+  </tr>
 </table>
@@ -199,2 +225,8 @@
   </tr>
+  <tr>
+    <td>onChangeComplete</td>
+    <td>Function</td>
+    <td></td>
+    <td>Callback function will be fired when the interaction is complete with the hue picker.</td>
+  </tr>
 </table>
@@ -223,2 +255,8 @@
   </tr>
+  <tr>
+    <td>onChangeComplete</td>
+    <td>Function</td>
+    <td></td>
+    <td>Callback function will be fired when the interaction is complete with the alpha picker.</td>
+  </tr>
 </table>
@@ -225,0 +263,0 @@

No alert changes

Improved metrics

Total package byte prevSize

34131

increased by6.84%

Lines of code

142

increased by5.19%

Number of lines in readme file

357

increased by11.91%

No dependency changes