react-best-gradient-color-picker - npm Package Compare versions

Comparing version 3.0.13-beta.4 to 3.0.13-beta.5

dist/cjs/components/index.d.ts

 import React from 'react';
 import { ColorPickerProps } from '../shared/types.js';
-export declare function ColorPicker({ idSuffix, value, onChange, hideControls, hideInputs, hideOpacity, hidePresets, hideHue, presets, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientType, hideGradientAngle, hideGradientStop, hideGradientControls, locales, width, height, style, className, disableDarkMode, disableLightMode, hidePickerSquare, }: ColorPickerProps): React.JSX.Element;
+export declare function ColorPicker({ idSuffix, value, onChange, hideControls, hideInputs, hideOpacity, hidePresets, hideHue, presets, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientType, hideGradientAngle, hideGradientStop, hideGradientControls, locales, width, height, style, className, disableDarkMode, disableLightMode, hidePickerSquare, showHexAlpha, }: ColorPickerProps): React.JSX.Element;

dist/cjs/components/index.js

@@ -26,3 +26,3 @@ "use strict";
 function ColorPicker(_a) {
-    var idSuffix = _a.idSuffix, _b = _a.value, value = _b === void 0 ? 'rgba(175, 51, 242, 1)' : _b, onChange = _a.onChange, _c = _a.hideControls, hideControls = _c === void 0 ? false : _c, _d = _a.hideInputs, hideInputs = _d === void 0 ? false : _d, _e = _a.hideOpacity, hideOpacity = _e === void 0 ? false : _e, _f = _a.hidePresets, hidePresets = _f === void 0 ? false : _f, _g = _a.hideHue, hideHue = _g === void 0 ? false : _g, _h = _a.presets, presets = _h === void 0 ? [] : _h, _j = _a.hideEyeDrop, hideEyeDrop = _j === void 0 ? false : _j, _k = _a.hideAdvancedSliders, hideAdvancedSliders = _k === void 0 ? false : _k, _l = _a.hideColorGuide, hideColorGuide = _l === void 0 ? false : _l, _m = _a.hideInputType, hideInputType = _m === void 0 ? false : _m, _o = _a.hideColorTypeBtns, hideColorTypeBtns = _o === void 0 ? false : _o, _p = _a.hideGradientType, hideGradientType = _p === void 0 ? false : _p, _q = _a.hideGradientAngle, hideGradientAngle = _q === void 0 ? false : _q, _r = _a.hideGradientStop, hideGradientStop = _r === void 0 ? false : _r, _s = _a.hideGradientControls, hideGradientControls = _s === void 0 ? false : _s, _t = _a.locales, locales = _t === void 0 ? constants_js_1.defaultLocales : _t, _u = _a.width, width = _u === void 0 ? 294 : _u, _v = _a.height, height = _v === void 0 ? 294 : _v, _w = _a.style, style = _w === void 0 ? {} : _w, className = _a.className, _x = _a.disableDarkMode, disableDarkMode = _x === void 0 ? false : _x, _y = _a.disableLightMode, disableLightMode = _y === void 0 ? false : _y, _z = _a.hidePickerSquare, hidePickerSquare = _z === void 0 ? false : _z;
+    var idSuffix = _a.idSuffix, _b = _a.value, value = _b === void 0 ? 'rgba(175, 51, 242, 1)' : _b, onChange = _a.onChange, _c = _a.hideControls, hideControls = _c === void 0 ? false : _c, _d = _a.hideInputs, hideInputs = _d === void 0 ? false : _d, _e = _a.hideOpacity, hideOpacity = _e === void 0 ? false : _e, _f = _a.hidePresets, hidePresets = _f === void 0 ? false : _f, _g = _a.hideHue, hideHue = _g === void 0 ? false : _g, _h = _a.presets, presets = _h === void 0 ? [] : _h, _j = _a.hideEyeDrop, hideEyeDrop = _j === void 0 ? false : _j, _k = _a.hideAdvancedSliders, hideAdvancedSliders = _k === void 0 ? false : _k, _l = _a.hideColorGuide, hideColorGuide = _l === void 0 ? false : _l, _m = _a.hideInputType, hideInputType = _m === void 0 ? false : _m, _o = _a.hideColorTypeBtns, hideColorTypeBtns = _o === void 0 ? false : _o, _p = _a.hideGradientType, hideGradientType = _p === void 0 ? false : _p, _q = _a.hideGradientAngle, hideGradientAngle = _q === void 0 ? false : _q, _r = _a.hideGradientStop, hideGradientStop = _r === void 0 ? false : _r, _s = _a.hideGradientControls, hideGradientControls = _s === void 0 ? false : _s, _t = _a.locales, locales = _t === void 0 ? constants_js_1.defaultLocales : _t, _u = _a.width, width = _u === void 0 ? 294 : _u, _v = _a.height, height = _v === void 0 ? 294 : _v, _w = _a.style, style = _w === void 0 ? {} : _w, className = _a.className, _x = _a.disableDarkMode, disableDarkMode = _x === void 0 ? false : _x, _y = _a.disableLightMode, disableLightMode = _y === void 0 ? false : _y, _z = _a.hidePickerSquare, hidePickerSquare = _z === void 0 ? false : _z, _0 = _a.showHexAlpha, showHexAlpha = _0 === void 0 ? false : _0;
     var safeValue = (0, utils_js_1.objectToString)(value);
@@ -45,4 +45,4 @@ var isDarkMode = typeof window === 'undefined' || disableDarkMode
         className: className, style: __assign(__assign(__assign({}, defaultStyles.body), style), { width: width }) },
-        react_1.default.createElement(context_js_1.default, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, isDarkMode: isDarkMode, hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix },
+        react_1.default.createElement(context_js_1.default, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, isDarkMode: isDarkMode, hideOpacity: hideOpacity, showHexAlpha: showHexAlpha, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix },
             react_1.default.createElement(Picker_js_1.default, { hideControls: hideControls, hideInputs: hideInputs, hidePresets: hidePresets, hideOpacity: hideOpacity, hideHue: hideHue, presets: presets, hideEyeDrop: hideEyeDrop, hideAdvancedSliders: hideAdvancedSliders, hideColorGuide: hideColorGuide, hideInputType: hideInputType, hideColorTypeBtns: hideColorTypeBtns, hideGradientType: hideGradientType, hideGradientAngle: hideGradientAngle, hideGradientStop: hideGradientStop, hideGradientControls: hideGradientControls, hidePickerSquare: hidePickerSquare, locales: locales }))));
 }

dist/cjs/components/Inputs.js

@@ -62,3 +62,3 @@ "use strict";
 var HexInput = function (_a) {
-    var opacity = _a.opacity, tinyColor = _a.tinyColor, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var opacity = _a.opacity, tinyColor = _a.tinyColor, showHexAlpha = _a.showHexAlpha, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var _b = (0, react_1.useState)(''), disable = _b[0], setDisable = _b[1];
@@ -87,6 +87,7 @@ var hex = tinyColor.toHex();
     };
-    console.log('opacity', opacity);
+    var displayValue = showHexAlpha ? "".concat(newHex).concat((0, converters_js_1.getHexAlpha)(opacity)) : newHex;
+    var label = showHexAlpha ? 'HEXA' : 'HEX';
     return (react_1.default.createElement("div", { style: { width: '23%' }, id: "rbgcp-hex-input-wrapper".concat(pickerIdSuffix) },
-        react_1.default.createElement("input", { onBlur: hexBlur, onFocus: hexFocus, onChange: function (e) { return handleHex(e); }, id: "rbgcp-hex-input".concat(pickerIdSuffix), value: "".concat(newHex).concat((0, converters_js_1.getHexAlpha)(opacity)), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
-        react_1.default.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, "HEX")));
+        react_1.default.createElement("input", { onBlur: hexBlur, onFocus: hexFocus, value: displayValue, onChange: function (e) { return handleHex(e); }, id: "rbgcp-hex-input".concat(pickerIdSuffix), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
+        react_1.default.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, label)));
 };
@@ -151,5 +152,5 @@ var RGBInputs = function (_a) {
 var Inputs = function () {
-    var _a = (0, context_js_1.usePicker)(), hc = _a.hc, setHc = _a.setHc, inputType = _a.inputType, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var _a = (0, context_js_1.usePicker)(), hc = _a.hc, setHc = _a.setHc, inputType = _a.inputType, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, showHexAlpha = _a.showHexAlpha, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     return (react_1.default.createElement("div", { style: __assign({ paddingTop: 14, display: 'flex', justifyContent: 'space-between' }, defaultStyles.rbgcpInputsWrap), id: "rbgcp-inputs-wrap".concat(pickerIdSuffix) },
-        inputType !== 'cmyk' && (react_1.default.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a, tinyColor: tinyColor, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType !== 'cmyk' && (react_1.default.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a, tinyColor: tinyColor, showHexAlpha: showHexAlpha, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
         inputType === 'hsl' && (react_1.default.createElement(HSLInputs, { hc: hc, setHc: setHc, tinyColor: tinyColor, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
@@ -156,0 +157,0 @@ inputType === 'rgb' && (react_1.default.createElement(RGBInputs, { hc: hc, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),

dist/cjs/context.d.ts

 import React, { ReactNode } from 'react';
 import { GradientProps, Styles } from './shared/types.js';
-export default function PickerContextWrapper({ value, children, onChange, isDarkMode, squareWidth, hideOpacity, squareHeight, defaultStyles, pickerIdSuffix, }: PCWProps): React.JSX.Element;
+export default function PickerContextWrapper({ value, children, onChange, isDarkMode, squareWidth, hideOpacity, showHexAlpha, squareHeight, defaultStyles, pickerIdSuffix, }: PCWProps): React.JSX.Element;
 export declare function usePicker(): PickerContextProps;
@@ -15,2 +15,3 @@ type PCWProps = {
     pickerIdSuffix: string;
+    showHexAlpha: boolean;
 };
@@ -46,3 +47,4 @@ export type PickerContextProps = {
     pickerIdSuffix: string;
+    showHexAlpha: boolean;
 };
 export {};

dist/cjs/context.js

@@ -57,3 +57,3 @@ "use strict";
 function PickerContextWrapper(_a) {
-    var value = _a.value, children = _a.children, onChange = _a.onChange, isDarkMode = _a.isDarkMode, squareWidth = _a.squareWidth, hideOpacity = _a.hideOpacity, squareHeight = _a.squareHeight, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var value = _a.value, children = _a.children, onChange = _a.onChange, isDarkMode = _a.isDarkMode, squareWidth = _a.squareWidth, hideOpacity = _a.hideOpacity, showHexAlpha = _a.showHexAlpha, squareHeight = _a.squareHeight, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var colors = (0, formatters_js_1.getColors)(value);
@@ -123,2 +123,3 @@ var _b = (0, utils_js_1.getDetails)(value), degrees = _b.degrees, degreeStr = _b.degreeStr, isGradient = _b.isGradient, gradientType = _b.gradientType;
         deletePoint: deletePoint,
+        showHexAlpha: showHexAlpha,
         squareHeight: squareHeight,
@@ -125,0 +126,0 @@ setInputType: setInputType,

dist/cjs/shared/types.d.ts

@@ -28,2 +28,3 @@ export type ColorPickerProps = {
     hidePickerSquare?: boolean;
+    showHexAlpha?: boolean;
 };
@@ -30,0 +31,0 @@ export type ColorsProps = {

dist/cjs/styles/styles.js

@@ -107,3 +107,4 @@ "use strict";
         textAlign: 'center',
-        background: 'transparent'
+        background: 'transparent',
+        fontSize: '14px',
     },
@@ -110,0 +111,0 @@ rbgcpHandle: {

dist/cjs/utils/converters.js

@@ -49,6 +49,7 @@ "use strict";
     }
-    var alpha = Math.round((opacityPercent) * 255);
-    console.log('alpha', alpha.toString(16).padStart(2, '0').toUpperCase());
-    return alpha.toString(16).padStart(2, '0').toUpperCase();
+    return Math.round(opacityPercent * 255)
+        .toString(16)
+        .padStart(2, '0')
+        .toUpperCase();
 };
 exports.getHexAlpha = getHexAlpha;

dist/esm/components/index.d.ts

 import React from 'react';
 import { ColorPickerProps } from '../shared/types.js';
-export declare function ColorPicker({ idSuffix, value, onChange, hideControls, hideInputs, hideOpacity, hidePresets, hideHue, presets, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientType, hideGradientAngle, hideGradientStop, hideGradientControls, locales, width, height, style, className, disableDarkMode, disableLightMode, hidePickerSquare, }: ColorPickerProps): React.JSX.Element;
+export declare function ColorPicker({ idSuffix, value, onChange, hideControls, hideInputs, hideOpacity, hidePresets, hideHue, presets, hideEyeDrop, hideAdvancedSliders, hideColorGuide, hideInputType, hideColorTypeBtns, hideGradientType, hideGradientAngle, hideGradientStop, hideGradientControls, locales, width, height, style, className, disableDarkMode, disableLightMode, hidePickerSquare, showHexAlpha, }: ColorPickerProps): React.JSX.Element;

dist/esm/components/index.js

@@ -20,3 +20,3 @@ 'use client';
 export function ColorPicker(_a) {
-    var idSuffix = _a.idSuffix, _b = _a.value, value = _b === void 0 ? 'rgba(175, 51, 242, 1)' : _b, onChange = _a.onChange, _c = _a.hideControls, hideControls = _c === void 0 ? false : _c, _d = _a.hideInputs, hideInputs = _d === void 0 ? false : _d, _e = _a.hideOpacity, hideOpacity = _e === void 0 ? false : _e, _f = _a.hidePresets, hidePresets = _f === void 0 ? false : _f, _g = _a.hideHue, hideHue = _g === void 0 ? false : _g, _h = _a.presets, presets = _h === void 0 ? [] : _h, _j = _a.hideEyeDrop, hideEyeDrop = _j === void 0 ? false : _j, _k = _a.hideAdvancedSliders, hideAdvancedSliders = _k === void 0 ? false : _k, _l = _a.hideColorGuide, hideColorGuide = _l === void 0 ? false : _l, _m = _a.hideInputType, hideInputType = _m === void 0 ? false : _m, _o = _a.hideColorTypeBtns, hideColorTypeBtns = _o === void 0 ? false : _o, _p = _a.hideGradientType, hideGradientType = _p === void 0 ? false : _p, _q = _a.hideGradientAngle, hideGradientAngle = _q === void 0 ? false : _q, _r = _a.hideGradientStop, hideGradientStop = _r === void 0 ? false : _r, _s = _a.hideGradientControls, hideGradientControls = _s === void 0 ? false : _s, _t = _a.locales, locales = _t === void 0 ? defaultLocales : _t, _u = _a.width, width = _u === void 0 ? 294 : _u, _v = _a.height, height = _v === void 0 ? 294 : _v, _w = _a.style, style = _w === void 0 ? {} : _w, className = _a.className, _x = _a.disableDarkMode, disableDarkMode = _x === void 0 ? false : _x, _y = _a.disableLightMode, disableLightMode = _y === void 0 ? false : _y, _z = _a.hidePickerSquare, hidePickerSquare = _z === void 0 ? false : _z;
+    var idSuffix = _a.idSuffix, _b = _a.value, value = _b === void 0 ? 'rgba(175, 51, 242, 1)' : _b, onChange = _a.onChange, _c = _a.hideControls, hideControls = _c === void 0 ? false : _c, _d = _a.hideInputs, hideInputs = _d === void 0 ? false : _d, _e = _a.hideOpacity, hideOpacity = _e === void 0 ? false : _e, _f = _a.hidePresets, hidePresets = _f === void 0 ? false : _f, _g = _a.hideHue, hideHue = _g === void 0 ? false : _g, _h = _a.presets, presets = _h === void 0 ? [] : _h, _j = _a.hideEyeDrop, hideEyeDrop = _j === void 0 ? false : _j, _k = _a.hideAdvancedSliders, hideAdvancedSliders = _k === void 0 ? false : _k, _l = _a.hideColorGuide, hideColorGuide = _l === void 0 ? false : _l, _m = _a.hideInputType, hideInputType = _m === void 0 ? false : _m, _o = _a.hideColorTypeBtns, hideColorTypeBtns = _o === void 0 ? false : _o, _p = _a.hideGradientType, hideGradientType = _p === void 0 ? false : _p, _q = _a.hideGradientAngle, hideGradientAngle = _q === void 0 ? false : _q, _r = _a.hideGradientStop, hideGradientStop = _r === void 0 ? false : _r, _s = _a.hideGradientControls, hideGradientControls = _s === void 0 ? false : _s, _t = _a.locales, locales = _t === void 0 ? defaultLocales : _t, _u = _a.width, width = _u === void 0 ? 294 : _u, _v = _a.height, height = _v === void 0 ? 294 : _v, _w = _a.style, style = _w === void 0 ? {} : _w, className = _a.className, _x = _a.disableDarkMode, disableDarkMode = _x === void 0 ? false : _x, _y = _a.disableLightMode, disableLightMode = _y === void 0 ? false : _y, _z = _a.hidePickerSquare, hidePickerSquare = _z === void 0 ? false : _z, _0 = _a.showHexAlpha, showHexAlpha = _0 === void 0 ? false : _0;
     var safeValue = objectToString(value);
@@ -39,4 +39,4 @@ var isDarkMode = typeof window === 'undefined' || disableDarkMode
         className: className, style: __assign(__assign(__assign({}, defaultStyles.body), style), { width: width }) },
-        React.createElement(PickerContextWrapper, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, isDarkMode: isDarkMode, hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix },
+        React.createElement(PickerContextWrapper, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, isDarkMode: isDarkMode, hideOpacity: hideOpacity, showHexAlpha: showHexAlpha, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix },
             React.createElement(Picker, { hideControls: hideControls, hideInputs: hideInputs, hidePresets: hidePresets, hideOpacity: hideOpacity, hideHue: hideHue, presets: presets, hideEyeDrop: hideEyeDrop, hideAdvancedSliders: hideAdvancedSliders, hideColorGuide: hideColorGuide, hideInputType: hideInputType, hideColorTypeBtns: hideColorTypeBtns, hideGradientType: hideGradientType, hideGradientAngle: hideGradientAngle, hideGradientStop: hideGradientStop, hideGradientControls: hideGradientControls, hidePickerSquare: hidePickerSquare, locales: locales }))));
 }

dist/esm/components/Inputs.js

@@ -34,3 +34,3 @@ var __assign = (this && this.__assign) || function () {
 var HexInput = function (_a) {
-    var opacity = _a.opacity, tinyColor = _a.tinyColor, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var opacity = _a.opacity, tinyColor = _a.tinyColor, showHexAlpha = _a.showHexAlpha, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var _b = useState(''), disable = _b[0], setDisable = _b[1];
@@ -59,6 +59,7 @@ var hex = tinyColor.toHex();
     };
-    console.log('opacity', opacity);
+    var displayValue = showHexAlpha ? "".concat(newHex).concat(getHexAlpha(opacity)) : newHex;
+    var label = showHexAlpha ? 'HEXA' : 'HEX';
     return (React.createElement("div", { style: { width: '23%' }, id: "rbgcp-hex-input-wrapper".concat(pickerIdSuffix) },
-        React.createElement("input", { onBlur: hexBlur, onFocus: hexFocus, onChange: function (e) { return handleHex(e); }, id: "rbgcp-hex-input".concat(pickerIdSuffix), value: "".concat(newHex).concat(getHexAlpha(opacity)), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
-        React.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, "HEX")));
+        React.createElement("input", { onBlur: hexBlur, onFocus: hexFocus, value: displayValue, onChange: function (e) { return handleHex(e); }, id: "rbgcp-hex-input".concat(pickerIdSuffix), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
+        React.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, label)));
 };
@@ -123,5 +124,5 @@ var RGBInputs = function (_a) {
 var Inputs = function () {
-    var _a = usePicker(), hc = _a.hc, setHc = _a.setHc, inputType = _a.inputType, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var _a = usePicker(), hc = _a.hc, setHc = _a.setHc, inputType = _a.inputType, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, showHexAlpha = _a.showHexAlpha, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     return (React.createElement("div", { style: __assign({ paddingTop: 14, display: 'flex', justifyContent: 'space-between' }, defaultStyles.rbgcpInputsWrap), id: "rbgcp-inputs-wrap".concat(pickerIdSuffix) },
-        inputType !== 'cmyk' && (React.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a, tinyColor: tinyColor, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType !== 'cmyk' && (React.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a, tinyColor: tinyColor, showHexAlpha: showHexAlpha, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
         inputType === 'hsl' && (React.createElement(HSLInputs, { hc: hc, setHc: setHc, tinyColor: tinyColor, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
@@ -128,0 +129,0 @@ inputType === 'rgb' && (React.createElement(RGBInputs, { hc: hc, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),

dist/esm/context.d.ts

 import React, { ReactNode } from 'react';
 import { GradientProps, Styles } from './shared/types.js';
-export default function PickerContextWrapper({ value, children, onChange, isDarkMode, squareWidth, hideOpacity, squareHeight, defaultStyles, pickerIdSuffix, }: PCWProps): React.JSX.Element;
+export default function PickerContextWrapper({ value, children, onChange, isDarkMode, squareWidth, hideOpacity, showHexAlpha, squareHeight, defaultStyles, pickerIdSuffix, }: PCWProps): React.JSX.Element;
 export declare function usePicker(): PickerContextProps;
@@ -15,2 +15,3 @@ type PCWProps = {
     pickerIdSuffix: string;
+    showHexAlpha: boolean;
 };
@@ -46,3 +47,4 @@ export type PickerContextProps = {
     pickerIdSuffix: string;
+    showHexAlpha: boolean;
 };
 export {};

dist/esm/context.js

@@ -27,3 +27,3 @@ var __assign = (this && this.__assign) || function () {
 export default function PickerContextWrapper(_a) {
-    var value = _a.value, children = _a.children, onChange = _a.onChange, isDarkMode = _a.isDarkMode, squareWidth = _a.squareWidth, hideOpacity = _a.hideOpacity, squareHeight = _a.squareHeight, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var value = _a.value, children = _a.children, onChange = _a.onChange, isDarkMode = _a.isDarkMode, squareWidth = _a.squareWidth, hideOpacity = _a.hideOpacity, showHexAlpha = _a.showHexAlpha, squareHeight = _a.squareHeight, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var colors = getColors(value);
@@ -93,2 +93,3 @@ var _b = getDetails(value), degrees = _b.degrees, degreeStr = _b.degreeStr, isGradient = _b.isGradient, gradientType = _b.gradientType;
         deletePoint: deletePoint,
+        showHexAlpha: showHexAlpha,
         squareHeight: squareHeight,
@@ -95,0 +96,0 @@ setInputType: setInputType,

dist/esm/shared/types.d.ts

@@ -28,2 +28,3 @@ export type ColorPickerProps = {
     hidePickerSquare?: boolean;
+    showHexAlpha?: boolean;
 };
@@ -30,0 +31,0 @@ export type ColorsProps = {

dist/esm/styles/styles.js

@@ -104,3 +104,4 @@ var __assign = (this && this.__assign) || function () {
         textAlign: 'center',
-        background: 'transparent'
+        background: 'transparent',
+        fontSize: '14px',
     },
@@ -107,0 +108,0 @@ rbgcpHandle: {

dist/esm/utils/converters.js

@@ -44,5 +44,6 @@ export function rgb2cmyk(r, g, b) {
     }
-    var alpha = Math.round((opacityPercent) * 255);
-    console.log('alpha', alpha.toString(16).padStart(2, '0').toUpperCase());
-    return alpha.toString(16).padStart(2, '0').toUpperCase();
+    return Math.round(opacityPercent * 255)
+        .toString(16)
+        .padStart(2, '0')
+        .toUpperCase();
 };

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.13-beta.4",
+  "version": "3.0.13-beta.5",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "type": "module",

src/shared/types.ts

@@ -28,2 +28,3 @@ export type ColorPickerProps = {
   hidePickerSquare?: boolean
+  showHexAlpha?: boolean
 }
@@ -30,0 +31,0 @@

src/styles/styles.ts

@@ -95,3 +95,4 @@ import { darkStyles } from './darkStyles.js';
     textAlign: 'center',
-    background: 'transparent'
+    background: 'transparent',
+    fontSize: '14px',
   },
@@ -98,0 +99,0 @@ rbgcpHandle: {

src/utils/converters.ts

@@ -64,5 +64,6 @@ export function rgb2cmyk(r: number, g: number, b: number) {
 
-  const alpha = Math.round((opacityPercent) * 255)
-  console.log('alpha', alpha.toString(16).padStart(2, '0').toUpperCase())
-  return alpha.toString(16).padStart(2, '0').toUpperCase()
+  return Math.round(opacityPercent * 255)
+    .toString(16)
+    .padStart(2, '0')
+    .toUpperCase()
 }

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

476526

increased by0.22%

Lines of code

11287

increased by0.27%

No dependency changes