react-color-palette - npm Package Compare versions

Comparing version 6.0.0 to 6.1.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [6.1.0](https://github.com/Wondermarin/react-color-palette/compare/v6.0.0...v6.1.0) (2021-07-22)
+
+
+### Features
+
+* Add `alpha channel` ([#15](https://github.com/Wondermarin/react-color-palette/issues/15)) ([aa7c289](https://github.com/Wondermarin/react-color-palette/commit/aa7c289b971e02fe0c0740904202f80d39fd9bbd))
+
 ## [6.0.0](https://github.com/Wondermarin/react-color-palette/compare/v5.0.0...v6.0.0) (2021-06-26)
@@ -7,0 +14,0 @@

lib/components/ColorPicker.component.d.ts

 /// <reference types="react" />
 import { ColorPickerProps } from "../interfaces/ColorPicker.interface";
-export declare const ColorPicker: ({ width, height, color, onChange, hideHEX, hideRGB, hideHSV, dark, }: ColorPickerProps) => JSX.Element;
+export declare const ColorPicker: ({ width, height, color, onChange, hideHEX, hideRGB, hideHSV, alpha, dark, }: ColorPickerProps) => JSX.Element;

lib/components/Fields.component.d.ts

 /// <reference types="react" />
 import { FieldsProps } from "../interfaces/Fields.interface";
-export declare const Fields: ({ color, hideHEX, hideRGB, hideHSV, onChange }: FieldsProps) => JSX.Element;
+export declare const Fields: ({ color, hideHEX, hideRGB, hideHSV, alpha, onChange }: FieldsProps) => JSX.Element;

lib/hooks/useColor.hook.d.ts

@@ -6,3 +6,3 @@ /// <reference types="react" />
  * @param model HEX.
- * @param initColor Color in HEX model (3-6 digit) or [HTML Color Names](https://www.w3.org/wiki/CSS/Properties/color/keywords).
+ * @param initColor Color in HEX model (3-6 digit or 4-8 digit with alpha) or [HTML Color Names](https://www.w3.org/wiki/CSS/Properties/color/keywords).
  */
@@ -9,0 +9,0 @@ export declare function useColor(model: "hex", initColor: Color["hex"]): [Color, React.Dispatch<React.SetStateAction<Color>>];

lib/index.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t,n){return e>t?t:e<n?n:e}function c(e){if(!e.startsWith("#")||4===e.length){const 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 7===e.length?e:"#000000"}function o(e){e=e.slice(1);return{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}function s({r:e,g:t,b:n}){e/=255,t/=255,n/=255;const r=Math.max(e,t,n),l=r-Math.min(e,t,n);return{h:l?60*(r===e?(t-n)/l+(t<n?6:0):r===t?2+(n-e)/l:4+(e-t)/l):0,s:r?l/r*100:0,v:100*r}}function i({r:e,g:t,b:n}){return`#${[e,t,n].map((e=>e.toString(16).padStart(2,"0"))).join("")}`}function d(e,t){let n=c("#121212"),r=o(n),l=s(r);if("hex"===e){n=c(t),r=o(n),l=s(r)}else if("rgb"===e){r=t,n=i(r),l=s(r)}else if("hsv"===e){l=t,r=function({h:e,s:t,v:n}){const r=~~(e/60),l=e/60-r,a=(n/=100)*(1-(t/=100)),u=n*(1-t*l),c=n*(1-t*(1-l)),o=r%6;return{r:Math.round(255*[n,u,a,a,c,n][o]),g:Math.round(255*[c,n,n,u,a,a][o]),b:Math.round(255*[a,a,c,n,n,u][o])}}(l),n=i(r)}return{hex:n,rgb:r,hsv:l}}const h=({className:t,style:r,onChange:l,children:a})=>{const c=e.useRef(null),o=e=>{if(c.current){const{current:t}=c,{width:n,height:r,left:a,top:o}=t.getBoundingClientRect(),s=u(e.clientX-a,n,0),i=u(e.clientY-o,r,0);l(s,i)}};return n.default.createElement("div",{ref:c,className:t,style:r,onMouseDown:e=>{if(0!==e.button)return;o(e);const t=e=>{o(e)},n=()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",n,!1)};document.addEventListener("mousemove",t,!1),document.addEventListener("mouseup",n,!1)}},a)},f=({width:t,height:r,color:a,onChange:u})=>{const c=e.useMemo((()=>{const[e,n]=function(e,t,n){const{s:r,v:l}=e.hsv;return[r/100*t,(100-l)/100*n]}(a,t,r);return{x:e,y:n}}),[a,t,r]);return n.default.createElement(h,{className:"rcp-saturation",style:{height:r,backgroundColor:`hsl(${a.hsv.h}, 100%, 50%)`},onChange:(e,n)=>{u(d("hsv",l(l({},a.hsv),{},{s:e/t*100,v:100-n/r*100})))}},n.default.createElement("div",{className:"rcp-saturation-cursor",style:{left:c.x,top:c.y,backgroundColor:a.hex}}))},m=({width:t,color:r,onChange:a})=>{const u=e.useMemo((()=>function(e,t){return e/360*t}(r.hsv.h,t)),[r.hsv.h,t]);return n.default.createElement(h,{className:"rcp-hue",onChange:e=>{a(d("hsv",l(l({},r.hsv),{},{h:e/t*360})))}},n.default.createElement("div",{className:"rcp-hue-cursor",style:{left:u,backgroundColor:`hsl(${r.hsv.h}, 100%, 50%)`}}))},p=/[0-9A-F]/i;const g=({color:t,hideHEX:r,onChange:a})=>{const u=e.useCallback((()=>({value:t.hex,inputted:!1})),[t.hex]),[c,o]=e.useState(u);e.useEffect((()=>{c.inputted||o(u)}),[c.inputted,u]);return n.default.createElement(n.default.Fragment,null,!r&&n.default.createElement("div",{className:"rcp-fields-element hex-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:c.value,onFocus:()=>o(l(l({},c),{},{inputted:!0})),onChange:e=>{const t=e.target.value;(function(e){return e.startsWith("#")?(e=e.slice(1),p.test(e[e.length-1])):/\w/i.test(e)&&!/\d/.test(e)||""===e})(t)&&(a(d("hex",t)),o(l(l({},c),{},{value:t})))},onBlur:()=>o(l(l({},c),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"HEX")))},v=({color:t,hideRGB:r,hideHSV:a,onChange:c})=>{const o=e.useCallback((()=>({value:`${t.rgb.r}, ${t.rgb.g}, ${t.rgb.b}`,inputted:!1})),[t.rgb]),s=e.useCallback((()=>({value:`${Math.round(t.hsv.h)}°, ${Math.round(t.hsv.s)}%, ${Math.round(t.hsv.v)}%`,inputted:!1})),[t.hsv]),[i,h]=e.useState(o),[f,m]=e.useState(s);e.useEffect((()=>{i.inputted||h(o)}),[i.inputted,o]),e.useEffect((()=>{f.inputted||m(s)}),[f.inputted,s]);return n.default.createElement(n.default.Fragment,null,(!r||!a)&&n.default.createElement(n.default.Fragment,null,!r&&n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:i.value,onFocus:()=>h(l(l({},i),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map((e=>u(Number(e),255,0)));return{r:t,g:n,b:r}}(t.slice(0,3));c(d("rgb",e))}h(l(l({},i),{},{value:e.target.value}))},onBlur:()=>h(l(l({},i),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"RGB")),!a&&n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:f.value,onFocus:()=>m(l(l({},f),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map(((e,t)=>u(Number(e),t?100:360,0)));return{h:t,s:n,v:r}}(t.slice(0,3));c(d("hsv",e))}m(l(l({},f),{},{value:e.target.value}))},onBlur:()=>m(l(l({},f),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"HSV"))))},b=({color:e,hideHEX:t,hideRGB:r,hideHSV:l,onChange:a})=>n.default.createElement(n.default.Fragment,null,(!t||!r||!l)&&n.default.createElement("div",{className:"rcp-fields"},n.default.createElement(v,{color:e,hideRGB:r,hideHSV:l,onChange:a}),n.default.createElement(g,{color:e,hideHEX:t,onChange:a})));exports.ColorPicker=({width:e,height:t=e,color:r,onChange:l,hideHEX:a=!1,hideRGB:u=!1,hideHSV:c=!1,dark:o=!1})=>n.default.createElement("div",{className:"rcp "+(o?"rcp-dark":"rcp-light"),style:{width:e}},n.default.createElement(f,{width:e,height:t,color:r,onChange:l}),n.default.createElement("div",{className:"rcp-body"},n.default.createElement(m,{width:e-40,color:r,onChange:l}),n.default.createElement(b,{color:r,hideHEX:a,hideRGB:u,hideHSV:c,onChange:l}))),exports.toColor=d,exports.useColor=function(t,n){const r=e.useCallback((()=>{if("hex"===t){return d("hex",n)}if("rgb"===t){return d("rgb",n)}if("hsv"===t){return d("hsv",n)}return d("hex","#000000")}),[t,n]),[l,a]=e.useState(r);return e.useEffect((()=>{a(r)}),[r]),[l,a]};
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t,n){return e>t?t:e<n?n:e}function o(e){if(!e.startsWith("#")){const 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 4===e.length||5===e.length?e=e.split("").map(((e,t)=>t?e+e:"#")).join(""):7===e.length||9===e.length?e:"#000000"}function c(e){e=e.slice(1);const t=parseInt(e.slice(0,2),16),n=parseInt(e.slice(2,4),16),r=parseInt(e.slice(4,6),16);let a=parseInt(e.slice(6,8),16)||void 0;return a&&(a/=255),{r:t,g:n,b:r,a:a}}function s({r:e,g:t,b:n,a:r}){e/=255,t/=255,n/=255;const a=Math.max(e,t,n),l=a-Math.min(e,t,n);return{h:l?60*(a===e?(t-n)/l+(t<n?6:0):a===t?2+(n-e)/l:4+(e-t)/l):0,s:a?l/a*100:0,v:100*a,a:r}}function i({r:e,g:t,b:n,a:r}){return`#${[e,t,n,r].map(((e,t)=>void 0!==e?(t<3?e:Math.round(255*e)).toString(16).padStart(2,"0"):"")).join("")}`}function d(e,t){let n=o("#121212"),r=c(n),a=s(r);if("hex"===e){n=o(t),r=c(n),a=s(r)}else if("rgb"===e){r=t,n=i(r),a=s(r)}else if("hsv"===e){a=t,r=function({h:e,s:t,v:n,a:r}){const a=~~(e/60),l=e/60-a,u=(n/=100)*(1-(t/=100)),o=n*(1-t*l),c=n*(1-t*(1-l)),s=a%6;return{r:Math.round(255*[n,o,u,u,c,n][s]),g:Math.round(255*[c,n,n,o,u,u][s]),b:Math.round(255*[u,u,c,n,n,o][s]),a:r}}(a),n=i(r)}return{hex:n,rgb:r,hsv:a}}const h=({className:t,style:r,onChange:a,children:l})=>{const o=e.useRef(null),c=e=>{if(o.current){const{current:t}=o,{width:n,height:r,left:l,top:c}=t.getBoundingClientRect(),s=u(e.clientX-l,n,0),i=u(e.clientY-c,r,0);a(s,i)}};return n.default.createElement("div",{ref:o,className:t,style:r,onMouseDown:e=>{if(0!==e.button)return;c(e);const t=e=>{c(e)},n=()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",n,!1)};document.addEventListener("mousemove",t,!1),document.addEventListener("mouseup",n,!1)}},l)},f=({width:t,color:r,onChange:l})=>{const u=e.useMemo((()=>{var e;return function(e,t){return e*t}(null!==(e=r.hsv.a)&&void 0!==e?e:1,t)}),[r.hsv.a,t]),o=e.useMemo((()=>`${r.rgb.r}, ${r.rgb.g}, ${r.rgb.b}`),[r.rgb]),c=e.useMemo((()=>{var e;return`${o}, ${null!==(e=r.rgb.a)&&void 0!==e?e:1}`}),[o,r.rgb.a]),s=e.useMemo((()=>-u-2),[u]);return n.default.createElement(h,{className:"rcp-alpha",onChange:e=>{l(d("hsv",a(a({},r.hsv),{},{a:e/t})))},style:{background:`linear-gradient(to right, rgba(${o}, 0), rgba(${o}, 1)) top left / auto auto,\n                conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px\n                repeat`}},n.default.createElement("div",{className:"rcp-alpha-cursor",style:{left:u,background:`linear-gradient(to right, rgba(${c}), rgba(${c})) top left / auto auto,\n                conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) ${s}px 2px / 12px 12px\n                repeat`}}))},p=({width:t,height:r,color:l,onChange:u})=>{const o=e.useMemo((()=>{const[e,n]=function(e,t,n){const{s:r,v:a}=e.hsv;return[r/100*t,(100-a)/100*n]}(l,t,r);return{x:e,y:n}}),[l,t,r]);return n.default.createElement(h,{className:"rcp-saturation",style:{height:r,backgroundColor:`hsl(${l.hsv.h}, 100%, 50%)`},onChange:(e,n)=>{u(d("hsv",a(a({},l.hsv),{},{s:e/t*100,v:100-n/r*100})))}},n.default.createElement("div",{className:"rcp-saturation-cursor",style:{left:o.x,top:o.y,backgroundColor:l.hex}}))},g=({width:t,color:r,onChange:l})=>{const u=e.useMemo((()=>function(e,t){return e/360*t}(r.hsv.h,t)),[r.hsv.h,t]);return n.default.createElement(h,{className:"rcp-hue",onChange:e=>{l(d("hsv",a(a({},r.hsv),{},{h:e/t*360})))}},n.default.createElement("div",{className:"rcp-hue-cursor",style:{left:u,backgroundColor:`hsl(${r.hsv.h}, 100%, 50%)`}}))};function m(e,t){return Math.round(e*Math.pow(10,t))/Math.pow(10,t)}const v=/[0-9A-F]/i;const b=({color:t,hideHEX:r,onChange:l})=>{const u=e.useCallback((()=>({value:t.hex,inputted:!1})),[t.hex]),[o,c]=e.useState(u);e.useEffect((()=>{o.inputted||c(u)}),[o.inputted,u]);return n.default.createElement(n.default.Fragment,null,!r&&n.default.createElement("div",{className:"rcp-fields-element hex-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:o.value,onFocus:()=>c(a(a({},o),{},{inputted:!0})),onChange:e=>{const t=e.target.value;(function(e){return e.startsWith("#")?(e=e.slice(1),v.test(e[e.length-1])):/\w/i.test(e)&&!/\d/.test(e)||""===e})(t)&&(l(d("hex",t)),c(a(a({},o),{},{value:t})))},onBlur:()=>c(a(a({},o),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"HEX")))},E=({color:t,hideRGB:r,hideHSV:l,alpha:o,onChange:c})=>{const s=e.useCallback((()=>({value:`${t.rgb.r}, ${t.rgb.g}, ${t.rgb.b}${o&&void 0!==t.rgb.a?`, ${m(t.rgb.a,3)}`:""}`,inputted:!1})),[t.rgb,o]),i=e.useCallback((()=>({value:`${Math.round(t.hsv.h)}°, ${Math.round(t.hsv.s)}%, ${Math.round(t.hsv.v)}%${o&&void 0!==t.hsv.a?`, ${m(t.hsv.a,3)}`:""}`,inputted:!1})),[t.hsv,o]),[h,f]=e.useState(s),[p,g]=e.useState(i);e.useEffect((()=>{h.inputted||f(s)}),[h.inputted,s]),e.useEffect((()=>{p.inputted||g(i)}),[p.inputted,i]);return n.default.createElement(n.default.Fragment,null,(!r||!l)&&n.default.createElement(n.default.Fragment,null,!r&&n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:h.value,onFocus:()=>f(a(a({},h),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+(?:\.\d+)?/g);if(t&&(3===t.length||o&&4===t.length)){const e=function(e){const[t,n,r,a]=e.map(((e,t)=>u(Number(e),t<3?255:1,0)));return{r:t,g:n,b:r,a:a}}(t);c(d("rgb",e))}f(a(a({},h),{},{value:e.target.value}))},onBlur:()=>f(a(a({},h),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"RGB")),!l&&n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:p.value,onFocus:()=>g(a(a({},p),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+(?:\.\d+)?/g);if(t&&(3===t.length||o&&4===t.length)){const e=function(e){const[t,n,r,a]=e.map(((e,t)=>u(Number(e),t?t<3?100:1:360,0)));return{h:t,s:n,v:r,a:a}}(t);c(d("hsv",e))}g(a(a({},p),{},{value:e.target.value}))},onBlur:()=>g(a(a({},p),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"HSV"))))},C=({color:e,hideHEX:t,hideRGB:r,hideHSV:a,alpha:l,onChange:u})=>n.default.createElement(n.default.Fragment,null,(!t||!r||!a)&&n.default.createElement("div",{className:"rcp-fields"},n.default.createElement(E,{color:e,hideRGB:r,hideHSV:a,alpha:l,onChange:u}),n.default.createElement(b,{color:e,hideHEX:t,onChange:u})));exports.ColorPicker=({width:e,height:t=e,color:r,onChange:a,hideHEX:l=!1,hideRGB:u=!1,hideHSV:o=!1,alpha:c=!1,dark:s=!1})=>n.default.createElement("div",{className:"rcp "+(s?"rcp-dark":"rcp-light"),style:{width:e}},n.default.createElement(p,{width:e,height:t,color:r,onChange:a}),n.default.createElement("div",{className:"rcp-body"},n.default.createElement(g,{width:e-40,color:r,onChange:a}),c&&n.default.createElement(f,{width:e-40,color:r,onChange:a}),n.default.createElement(C,{color:r,hideHEX:l,hideRGB:u,hideHSV:o,alpha:c,onChange:a}))),exports.toColor=d,exports.useColor=function(t,n){const r=e.useCallback((()=>{if("hex"===t){return d("hex",n)}if("rgb"===t){return d("rgb",n)}if("hsv"===t){return d("hsv",n)}return d("hex","#000000")}),[t,n]),[a,l]=e.useState(r);return e.useEffect((()=>{l(r)}),[r]),[a,l]};

lib/index.module.js

@@ -1,1 +0,1 @@
-import e,{useRef as t,useMemo as n,useCallback as r,useState as l,useEffect as c}from"react";function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t,n){return e>t?t:e<n?n:e}function u(e){if(!e.startsWith("#")||4===e.length){const 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 7===e.length?e:"#000000"}function h(e){e=e.slice(1);return{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}function d({r:e,g:t,b:n}){e/=255,t/=255,n/=255;const r=Math.max(e,t,n),l=r-Math.min(e,t,n);return{h:l?60*(r===e?(t-n)/l+(t<n?6:0):r===t?2+(n-e)/l:4+(e-t)/l):0,s:r?l/r*100:0,v:100*r}}function m({r:e,g:t,b:n}){return`#${[e,t,n].map((e=>e.toString(16).padStart(2,"0"))).join("")}`}function p(e,t){let n=u("#121212"),r=h(n),l=d(r);if("hex"===e){n=u(t),r=h(n),l=d(r)}else if("rgb"===e){r=t,n=m(r),l=d(r)}else if("hsv"===e){l=t,r=function({h:e,s:t,v:n}){const r=~~(e/60),l=e/60-r,c=(n/=100)*(1-(t/=100)),a=n*(1-t*l),o=n*(1-t*(1-l)),s=r%6;return{r:Math.round(255*[n,a,c,c,o,n][s]),g:Math.round(255*[o,n,n,a,c,c][s]),b:Math.round(255*[c,c,o,n,n,a][s])}}(l),n=m(r)}return{hex:n,rgb:r,hsv:l}}const g=({className:n,style:r,onChange:l,children:c})=>{const a=t(null),o=e=>{if(a.current){const{current:t}=a,{width:n,height:r,left:c,top:o}=t.getBoundingClientRect(),s=i(e.clientX-c,n,0),u=i(e.clientY-o,r,0);l(s,u)}};return e.createElement("div",{ref:a,className:n,style:r,onMouseDown:e=>{if(0!==e.button)return;o(e);const t=e=>{o(e)},n=()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",n,!1)};document.addEventListener("mousemove",t,!1),document.addEventListener("mouseup",n,!1)}},c)},v=({width:t,height:r,color:l,onChange:c})=>{const a=n((()=>{const[e,n]=function(e,t,n){const{s:r,v:l}=e.hsv;return[r/100*t,(100-l)/100*n]}(l,t,r);return{x:e,y:n}}),[l,t,r]);return e.createElement(g,{className:"rcp-saturation",style:{height:r,backgroundColor:`hsl(${l.hsv.h}, 100%, 50%)`},onChange:(e,n)=>{c(p("hsv",o(o({},l.hsv),{},{s:e/t*100,v:100-n/r*100})))}},e.createElement("div",{className:"rcp-saturation-cursor",style:{left:a.x,top:a.y,backgroundColor:l.hex}}))},f=({width:t,color:r,onChange:l})=>{const c=n((()=>function(e,t){return e/360*t}(r.hsv.h,t)),[r.hsv.h,t]);return e.createElement(g,{className:"rcp-hue",onChange:e=>{l(p("hsv",o(o({},r.hsv),{},{h:e/t*360})))}},e.createElement("div",{className:"rcp-hue-cursor",style:{left:c,backgroundColor:`hsl(${r.hsv.h}, 100%, 50%)`}}))},b=/[0-9A-F]/i;const E=({color:t,hideHEX:n,onChange:a})=>{const s=r((()=>({value:t.hex,inputted:!1})),[t.hex]),[i,u]=l(s);c((()=>{i.inputted||u(s)}),[i.inputted,s]);return e.createElement(e.Fragment,null,!n&&e.createElement("div",{className:"rcp-fields-element hex-element"},e.createElement("input",{className:"rcp-fields-element-input",value:i.value,onFocus:()=>u(o(o({},i),{},{inputted:!0})),onChange:e=>{const t=e.target.value;(function(e){return e.startsWith("#")?(e=e.slice(1),b.test(e[e.length-1])):/\w/i.test(e)&&!/\d/.test(e)||""===e})(t)&&(a(p("hex",t)),u(o(o({},i),{},{value:t})))},onBlur:()=>u(o(o({},i),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"HEX")))},y=({color:t,hideRGB:n,hideHSV:a,onChange:s})=>{const u=r((()=>({value:`${t.rgb.r}, ${t.rgb.g}, ${t.rgb.b}`,inputted:!1})),[t.rgb]),h=r((()=>({value:`${Math.round(t.hsv.h)}°, ${Math.round(t.hsv.s)}%, ${Math.round(t.hsv.v)}%`,inputted:!1})),[t.hsv]),[d,m]=l(u),[g,v]=l(h);c((()=>{d.inputted||m(u)}),[d.inputted,u]),c((()=>{g.inputted||v(h)}),[g.inputted,h]);return e.createElement(e.Fragment,null,(!n||!a)&&e.createElement(e.Fragment,null,!n&&e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:d.value,onFocus:()=>m(o(o({},d),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map((e=>i(Number(e),255,0)));return{r:t,g:n,b:r}}(t.slice(0,3));s(p("rgb",e))}m(o(o({},d),{},{value:e.target.value}))},onBlur:()=>m(o(o({},d),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"RGB")),!a&&e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:g.value,onFocus:()=>v(o(o({},g),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map(((e,t)=>i(Number(e),t?100:360,0)));return{h:t,s:n,v:r}}(t.slice(0,3));s(p("hsv",e))}v(o(o({},g),{},{value:e.target.value}))},onBlur:()=>v(o(o({},g),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"HSV"))))},C=({color:t,hideHEX:n,hideRGB:r,hideHSV:l,onChange:c})=>e.createElement(e.Fragment,null,(!n||!r||!l)&&e.createElement("div",{className:"rcp-fields"},e.createElement(y,{color:t,hideRGB:r,hideHSV:l,onChange:c}),e.createElement(E,{color:t,hideHEX:n,onChange:c}))),N=({width:t,height:n=t,color:r,onChange:l,hideHEX:c=!1,hideRGB:a=!1,hideHSV:o=!1,dark:s=!1})=>e.createElement("div",{className:"rcp "+(s?"rcp-dark":"rcp-light"),style:{width:t}},e.createElement(v,{width:t,height:n,color:r,onChange:l}),e.createElement("div",{className:"rcp-body"},e.createElement(f,{width:t-40,color:r,onChange:l}),e.createElement(C,{color:r,hideHEX:c,hideRGB:a,hideHSV:o,onChange:l})));function w(e,t){const n=r((()=>{if("hex"===e){return p("hex",t)}if("rgb"===e){return p("rgb",t)}if("hsv"===e){return p("hsv",t)}return p("hex","#000000")}),[e,t]),[a,o]=l(n);return c((()=>{o(n)}),[n]),[a,o]}export{N as ColorPicker,p as toColor,w as useColor};
+import e,{useRef as t,useMemo as n,useCallback as r,useState as a,useEffect as l}from"react";function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t,n){return e>t?t:e<n?n:e}function s(e){if(!e.startsWith("#")){const 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 4===e.length||5===e.length?e=e.split("").map(((e,t)=>t?e+e:"#")).join(""):7===e.length||9===e.length?e:"#000000"}function h(e){e=e.slice(1);const t=parseInt(e.slice(0,2),16),n=parseInt(e.slice(2,4),16),r=parseInt(e.slice(4,6),16);let a=parseInt(e.slice(6,8),16)||void 0;return a&&(a/=255),{r:t,g:n,b:r,a:a}}function d({r:e,g:t,b:n,a:r}){e/=255,t/=255,n/=255;const a=Math.max(e,t,n),l=a-Math.min(e,t,n);return{h:l?60*(a===e?(t-n)/l+(t<n?6:0):a===t?2+(n-e)/l:4+(e-t)/l):0,s:a?l/a*100:0,v:100*a,a:r}}function g({r:e,g:t,b:n,a:r}){return`#${[e,t,n,r].map(((e,t)=>void 0!==e?(t<3?e:Math.round(255*e)).toString(16).padStart(2,"0"):"")).join("")}`}function p(e,t){let n=s("#121212"),r=h(n),a=d(r);if("hex"===e){n=s(t),r=h(n),a=d(r)}else if("rgb"===e){r=t,n=g(r),a=d(r)}else if("hsv"===e){a=t,r=function({h:e,s:t,v:n,a:r}){const a=~~(e/60),l=e/60-a,o=(n/=100)*(1-(t/=100)),c=n*(1-t*l),u=n*(1-t*(1-l)),i=a%6;return{r:Math.round(255*[n,c,o,o,u,n][i]),g:Math.round(255*[u,n,n,c,o,o][i]),b:Math.round(255*[o,o,u,n,n,c][i]),a:r}}(a),n=g(r)}return{hex:n,rgb:r,hsv:a}}const m=({className:n,style:r,onChange:a,children:l})=>{const o=t(null),c=e=>{if(o.current){const{current:t}=o,{width:n,height:r,left:l,top:c}=t.getBoundingClientRect(),u=i(e.clientX-l,n,0),s=i(e.clientY-c,r,0);a(u,s)}};return e.createElement("div",{ref:o,className:n,style:r,onMouseDown:e=>{if(0!==e.button)return;c(e);const t=e=>{c(e)},n=()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",n,!1)};document.addEventListener("mousemove",t,!1),document.addEventListener("mouseup",n,!1)}},l)},v=({width:t,color:r,onChange:a})=>{const l=n((()=>{var e;return function(e,t){return e*t}(null!==(e=r.hsv.a)&&void 0!==e?e:1,t)}),[r.hsv.a,t]),o=n((()=>`${r.rgb.r}, ${r.rgb.g}, ${r.rgb.b}`),[r.rgb]),u=n((()=>{var e;return`${o}, ${null!==(e=r.rgb.a)&&void 0!==e?e:1}`}),[o,r.rgb.a]),i=n((()=>-l-2),[l]);return e.createElement(m,{className:"rcp-alpha",onChange:e=>{a(p("hsv",c(c({},r.hsv),{},{a:e/t})))},style:{background:`linear-gradient(to right, rgba(${o}, 0), rgba(${o}, 1)) top left / auto auto,\n                conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px\n                repeat`}},e.createElement("div",{className:"rcp-alpha-cursor",style:{left:l,background:`linear-gradient(to right, rgba(${u}), rgba(${u})) top left / auto auto,\n                conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) ${i}px 2px / 12px 12px\n                repeat`}}))},f=({width:t,height:r,color:a,onChange:l})=>{const o=n((()=>{const[e,n]=function(e,t,n){const{s:r,v:a}=e.hsv;return[r/100*t,(100-a)/100*n]}(a,t,r);return{x:e,y:n}}),[a,t,r]);return e.createElement(m,{className:"rcp-saturation",style:{height:r,backgroundColor:`hsl(${a.hsv.h}, 100%, 50%)`},onChange:(e,n)=>{l(p("hsv",c(c({},a.hsv),{},{s:e/t*100,v:100-n/r*100})))}},e.createElement("div",{className:"rcp-saturation-cursor",style:{left:o.x,top:o.y,backgroundColor:a.hex}}))},b=({width:t,color:r,onChange:a})=>{const l=n((()=>function(e,t){return e/360*t}(r.hsv.h,t)),[r.hsv.h,t]);return e.createElement(m,{className:"rcp-hue",onChange:e=>{a(p("hsv",c(c({},r.hsv),{},{h:e/t*360})))}},e.createElement("div",{className:"rcp-hue-cursor",style:{left:l,backgroundColor:`hsl(${r.hsv.h}, 100%, 50%)`}}))};function E(e,t){return Math.round(e*Math.pow(10,t))/Math.pow(10,t)}const y=/[0-9A-F]/i;const C=({color:t,hideHEX:n,onChange:o})=>{const u=r((()=>({value:t.hex,inputted:!1})),[t.hex]),[i,s]=a(u);l((()=>{i.inputted||s(u)}),[i.inputted,u]);return e.createElement(e.Fragment,null,!n&&e.createElement("div",{className:"rcp-fields-element hex-element"},e.createElement("input",{className:"rcp-fields-element-input",value:i.value,onFocus:()=>s(c(c({},i),{},{inputted:!0})),onChange:e=>{const t=e.target.value;(function(e){return e.startsWith("#")?(e=e.slice(1),y.test(e[e.length-1])):/\w/i.test(e)&&!/\d/.test(e)||""===e})(t)&&(o(p("hex",t)),s(c(c({},i),{},{value:t})))},onBlur:()=>s(c(c({},i),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"HEX")))},$=({color:t,hideRGB:n,hideHSV:o,alpha:u,onChange:s})=>{const h=r((()=>({value:`${t.rgb.r}, ${t.rgb.g}, ${t.rgb.b}${u&&void 0!==t.rgb.a?`, ${E(t.rgb.a,3)}`:""}`,inputted:!1})),[t.rgb,u]),d=r((()=>({value:`${Math.round(t.hsv.h)}°, ${Math.round(t.hsv.s)}%, ${Math.round(t.hsv.v)}%${u&&void 0!==t.hsv.a?`, ${E(t.hsv.a,3)}`:""}`,inputted:!1})),[t.hsv,u]),[g,m]=a(h),[v,f]=a(d);l((()=>{g.inputted||m(h)}),[g.inputted,h]),l((()=>{v.inputted||f(d)}),[v.inputted,d]);return e.createElement(e.Fragment,null,(!n||!o)&&e.createElement(e.Fragment,null,!n&&e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:g.value,onFocus:()=>m(c(c({},g),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+(?:\.\d+)?/g);if(t&&(3===t.length||u&&4===t.length)){const e=function(e){const[t,n,r,a]=e.map(((e,t)=>i(Number(e),t<3?255:1,0)));return{r:t,g:n,b:r,a:a}}(t);s(p("rgb",e))}m(c(c({},g),{},{value:e.target.value}))},onBlur:()=>m(c(c({},g),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"RGB")),!o&&e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:v.value,onFocus:()=>f(c(c({},v),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+(?:\.\d+)?/g);if(t&&(3===t.length||u&&4===t.length)){const e=function(e){const[t,n,r,a]=e.map(((e,t)=>i(Number(e),t?t<3?100:1:360,0)));return{h:t,s:n,v:r,a:a}}(t);s(p("hsv",e))}f(c(c({},v),{},{value:e.target.value}))},onBlur:()=>f(c(c({},v),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"HSV"))))},w=({color:t,hideHEX:n,hideRGB:r,hideHSV:a,alpha:l,onChange:o})=>e.createElement(e.Fragment,null,(!n||!r||!a)&&e.createElement("div",{className:"rcp-fields"},e.createElement($,{color:t,hideRGB:r,hideHSV:a,alpha:l,onChange:o}),e.createElement(C,{color:t,hideHEX:n,onChange:o}))),x=({width:t,height:n=t,color:r,onChange:a,hideHEX:l=!1,hideRGB:o=!1,hideHSV:c=!1,alpha:u=!1,dark:i=!1})=>e.createElement("div",{className:"rcp "+(i?"rcp-dark":"rcp-light"),style:{width:t}},e.createElement(f,{width:t,height:n,color:r,onChange:a}),e.createElement("div",{className:"rcp-body"},e.createElement(b,{width:t-40,color:r,onChange:a}),u&&e.createElement(v,{width:t-40,color:r,onChange:a}),e.createElement(w,{color:r,hideHEX:l,hideRGB:o,hideHSV:c,alpha:u,onChange:a})));function N(e,t){const n=r((()=>{if("hex"===e){return p("hex",t)}if("rgb"===e){return p("rgb",t)}if("hsv"===e){return p("hsv",t)}return p("hex","#000000")}),[e,t]),[o,c]=a(n);return l((()=>{c(n)}),[n]),[o,c]}export{x as ColorPicker,p as toColor,N as useColor};

lib/interfaces/Color.interface.d.ts

@@ -10,2 +10,3 @@ export interface Color {
     readonly b: number;
+    readonly a?: number;
 }
@@ -16,3 +17,4 @@ interface ColorHSV {
     readonly v: number;
+    readonly a?: number;
 }
 export {};

lib/interfaces/ColorPicker.interface.d.ts

@@ -33,2 +33,6 @@ /// <reference types="react" />
     /**
+     * Enable alpha channel.
+     */
+    readonly alpha?: boolean;
+    /**
      * Color theme.
@@ -35,0 +39,0 @@ */

lib/interfaces/Fields.interface.d.ts

@@ -12,2 +12,3 @@ /// <reference types="react" />
     readonly hideHSV: boolean;
+    readonly alpha: boolean;
     readonly onChange: React.Dispatch<React.SetStateAction<Color>>;
@@ -20,3 +21,4 @@ }
     readonly hideHSV: boolean;
+    readonly alpha: boolean;
     readonly onChange: React.Dispatch<React.SetStateAction<Color>>;
 }

lib/utils/convert.util.d.ts

@@ -6,4 +6,4 @@ import { Color } from "../interfaces/Color.interface";
 export declare function hex2rgb(hex: Color["hex"]): Color["rgb"];
-export declare function rgb2hsv({ r, g, b }: Color["rgb"]): Color["hsv"];
-export declare function hsv2rgb({ h, s, v }: Color["hsv"]): Color["rgb"];
-export declare function rgb2hex({ r, g, b }: Color["rgb"]): Color["hex"];
+export declare function rgb2hsv({ r, g, b, a }: Color["rgb"]): Color["hsv"];
+export declare function hsv2rgb({ h, s, v, a }: Color["hsv"]): Color["rgb"];
+export declare function rgb2hex({ r, g, b, a }: Color["rgb"]): Color["hex"];

lib/utils/coordinates.util.d.ts

 import { Color } from "../interfaces/Color.interface";
 export declare function getColorCoordinates(color: Color, width: number, height: number): [number, number];
 export declare function getHueCoordinates(h: number, width: number): number;
+export declare function getAlphaCoordinates(a: number, width: number): number;

package.json

 {
   "name": "react-color-palette",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "🎨 Lightweight Color Picker component for React.",
@@ -16,15 +16,2 @@ "main": "lib/index.js",
   },
-  "targets": {
-    "demo": {
-      "scopeHoist": false,
-      "engines": {
-        "browsers": [
-          "> 0.2%",
-          "not dead",
-          "not ie <= 11",
-          "not op_mini all"
-        ]
-      }
-    }
-  },
   "engines": {
@@ -68,4 +55,2 @@ "node": ">=10"
     "demo:dev": "vite",
-    "predemo:deploy": "yarn demo:build",
-    "demo:deploy": "gh-pages -d demo/build",
     "release:patch": "standard-version --release-as patch",
@@ -80,18 +65,18 @@ "release:minor": "standard-version --release-as minor",
   "devDependencies": {
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.14.8",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-env": "^7.14.8",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@types/node": "^15.12.4",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
-    "@vitejs/plugin-react-refresh": "^1.3.3",
-    "del-cli": "^4.0.0",
-    "eslint": "^7.29.0",
+    "@rollup/plugin-node-resolve": "^13.0.2",
+    "@types/node": "^16.4.0",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.28.4",
+    "@typescript-eslint/parser": "^4.28.4",
+    "@vitejs/plugin-react-refresh": "^1.3.5",
+    "del-cli": "^4.0.1",
+    "eslint": "^7.31.0",
     "eslint-config-prettier": "^8.3.0",
@@ -102,12 +87,12 @@ "eslint-plugin-prettier": "^3.4.0",
     "gh-pages": "^3.2.3",
-    "prettier": "^2.3.1",
+    "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "rollup": "^2.52.3",
+    "rollup": "^2.53.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-terser": "^7.0.2",
-    "standard-version": "^9.3.0",
-    "typescript": "^4.3.4",
-    "vite": "^2.3.8"
+    "standard-version": "^9.3.1",
+    "typescript": "^4.3.5",
+    "vite": "^2.4.3"
   }
 }

README.md

@@ -18,3 +18,3 @@ <div align="center">
 <div align="center">
-  <a href="https://wondermarin.github.io/react-color-palette/">
+  <a href="https://rcp.wondermarin.space">
     <img src="https://github.com/Wondermarin/react-color-palette/raw/master/public/demo.apng" />
@@ -25,3 +25,3 @@ </a>
 <div align="center">
-  <a href="https://wondermarin.github.io/react-color-palette/">Live Demo →</a>
+  <a href="https://rcp.wondermarin.space">Live Demo →</a>
 </div>
@@ -33,5 +33,5 @@
 
-- 🚀 **Lightweight (2.5 KB)**.
+- 🚀 **Lightweight**.
 - 💨 **No dependencies**.
-- 🛡️ **Strict (written in TypeScript)**.
+- 🛡️ **Strict**.
 
@@ -126,2 +126,3 @@ <hr />
 | hideHSV  | `bool`       | false   | Hide HSV input.                                                          |
+| alpha    | `bool`       | false   | Enable alpha channel.                                                    |
 | dark     | `bool`       | false   | Color theme.                                                             |
@@ -155,15 +156,17 @@
 
-| Field | Type     |
-| ----- | -------- |
-| r     | `number` |
-| g     | `number` |
-| b     | `number` |
+| Field | Type                    |
+| ----- | ----------------------- |
+| r     | `number`                |
+| g     | `number`                |
+| b     | `number`                |
+| a     | `number` \| `undefined` |
 
 ### `ColorHSV`
 
-| Field | Type     |
-| ----- | -------- |
-| h     | `number` |
-| s     | `number` |
-| v     | `number` |
+| Field | Type                    |
+| ----- | ----------------------- |
+| h     | `number`                |
+| s     | `number`                |
+| v     | `number`                |
+| a     | `number` \| `undefined` |
 
@@ -170,0 +173,0 @@ <hr />

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

49136

increased by13.97%

Number of package files

29

increased by11.54%

Lines of code

406

increased by14.69%

Number of lines in readme file

173

increased by1.76%

No dependency changes