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

Comparing version 3.0.11-beta.1 to 3.0.11-beta.2

dist/cjs/components/AdvancedControls.js

@@ -81,4 +81,4 @@ "use strict";
     return (react_1.default.createElement("div", { style: { width: '100%', padding: '3px 0px 3px 0px' } },
-        react_1.default.createElement("div", { onMouseMove: function (e) { return handleMove(e); }, style: { cursor: 'resize', position: 'relative' } },
-            react_1.default.createElement("div", { style: __assign({ left: left, top: handleTop }, defaultStyles.rbgcpHandle), onMouseDown: handleDown, role: "button", tabIndex: 0 }),
+        react_1.default.createElement("div", { onMouseMove: function (e) { return handleMove(e); }, className: "rbgcp-advanced-bar-wrap", style: { cursor: 'resize', position: 'relative' } },
+            react_1.default.createElement("div", { style: __assign({ left: left, top: handleTop }, defaultStyles.rbgcpHandle), className: "rbgcp-advanced-bar-handle", onMouseDown: handleDown, role: "button", tabIndex: 0 }),
             react_1.default.createElement("div", { style: {
@@ -96,6 +96,6 @@ textAlign: 'center',
                     textShadow: '1px 1px 1px rgba(0,0,0,.6)',
-                }, onMouseMove: function (e) { return handleMove(e); }, onClick: function (e) { return handleClick(e); }, tabIndex: 0, role: "button", onKeyDown: function () {
+                }, className: "rbgcp-advanced-bar-label", onMouseMove: function (e) { return handleMove(e); }, onClick: function (e) { return handleClick(e); }, tabIndex: 0, role: "button", onKeyDown: function () {
                     return;
                 } }, label),
-            react_1.default.createElement("canvas", { ref: reffy, height: "14px", width: "".concat(squareWidth, "px"), onClick: function (e) { return handleClick(e); }, style: { position: 'relative', borderRadius: 14 } }))));
+            react_1.default.createElement("canvas", { ref: reffy, height: "14px", width: "".concat(squareWidth, "px"), onClick: function (e) { return handleClick(e); }, className: "rbgcp-advanced-bar-canvas", style: { position: 'relative', borderRadius: 14 } }))));
 };
@@ -132,3 +132,3 @@ var AdvancedControls = function (_a) {
             transition: 'all 120ms linear',
-        } },
+        }, className: "rbgcp-advanced-controls-wrap" },
         react_1.default.createElement("div", { style: {
@@ -142,3 +142,3 @@ paddingTop: 11,
                 transition: 'height 100ms linear',
-            } },
+            }, className: "rbgcp-advanced-controls-inner" },
             react_1.default.createElement(AdvBar, { value: s, reffy: satRef, callback: satDesat, openAdvanced: openAdvanced, label: "Saturation" }),
@@ -145,0 +145,0 @@ react_1.default.createElement(AdvBar, { value: l, reffy: lightRef, label: "Lightness", callback: setLight, openAdvanced: openAdvanced }),

dist/cjs/components/ComparibleColors.js

@@ -34,3 +34,3 @@ "use strict";
             transition: 'all 120ms linear',
-        } },
+        }, className: "rbgcp-comparible-colors-wrap" },
         react_1.default.createElement("div", { style: {
@@ -40,7 +40,7 @@ paddingTop: 11,
                 position: 'relative',
-            } },
-            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 13, fontWeight: 600, position: 'absolute', top: 6.5, left: 2 }, defaultStyles.rbgcpComparibleLabel) }, "Color Guide"),
-            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel) }, "Analogous"),
+            }, className: "rbgcp-comparible-colors-inner" },
+            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 13, fontWeight: 600, position: 'absolute', top: 6.5, left: 2 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Color Guide"),
+            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Analogous"),
             react_1.default.createElement("div", { style: { borderRadius: 5, overflow: 'hidden', display: 'flex' } }, analogous === null || analogous === void 0 ? void 0 : analogous.map(function (c, key) { return (react_1.default.createElement("div", { key: key, style: { width: '20%', height: 30, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })),
-            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel) }, "Monochromatic"),
+            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Monochromatic"),
             react_1.default.createElement("div", { style: {
@@ -51,4 +51,4 @@ borderRadius: 5,
                     justifyContent: 'flex-end',
-                } }, monochromatic === null || monochromatic === void 0 ? void 0 : monochromatic.map(function (c, key) { return (react_1.default.createElement("div", { key: key, style: { width: '20%', height: 30, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })),
-            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel) }, "Triad"),
+                }, className: "rbgcp-comparible-colors-colors" }, monochromatic === null || monochromatic === void 0 ? void 0 : monochromatic.map(function (c, key) { return (react_1.default.createElement("div", { key: key, className: "rbgcp-comparible-colors-color", style: { width: '20%', height: 30, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })),
+            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Triad"),
             react_1.default.createElement("div", { style: {
@@ -59,3 +59,3 @@ borderRadius: 5,
                     justifyContent: 'flex-end',
-                } }, triad === null || triad === void 0 ? void 0 : triad.map(function (c, key) { return (react_1.default.createElement("div", { key: key, style: {
+                }, className: "rbgcp-comparible-colors-colors" }, triad === null || triad === void 0 ? void 0 : triad.map(function (c, key) { return (react_1.default.createElement("div", { key: key, className: "rbgcp-comparible-colors-color", style: {
                     width: 'calc(100% / 3)',
@@ -65,3 +65,3 @@ height: 28,
                 }, onClick: function () { return handleClick(c); } })); })),
-            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel) }, "Tetrad"),
+            react_1.default.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Tetrad"),
             react_1.default.createElement("div", { style: {
@@ -72,4 +72,4 @@ borderRadius: 5,
                     justifyContent: 'flex-end',
-                } }, tetrad === null || tetrad === void 0 ? void 0 : tetrad.map(function (c, key) { return (react_1.default.createElement("div", { key: key, style: { width: '25%', height: 28, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })))));
+                }, className: "rbgcp-comparible-colors-colors" }, tetrad === null || tetrad === void 0 ? void 0 : tetrad.map(function (c, key) { return (react_1.default.createElement("div", { key: key, className: "rbgcp-comparible-colors-color", style: { width: '25%', height: 28, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })))));
 };
 exports.default = ComparibleColors;

dist/cjs/components/Controls.js

@@ -122,13 +122,13 @@ "use strict";
                     justifyContent: 'space-between',
-                } },
+                }, className: "rbgcp-controls-wrapper" },
                 react_1.default.createElement(ColorTypeBtns, { hideColorTypeBtns: hideColorTypeBtns, setGradient: setGradient, isGradient: isGradient, setSolid: setSolid, locales: locales }),
-                !allRightControlsHidden && (react_1.default.createElement("div", { style: __assign({ display: noTools ? 'none' : '' }, defaultStyles.rbgcpControlBtnWrapper) },
+                !allRightControlsHidden && (react_1.default.createElement("div", { style: __assign({ display: noTools ? 'none' : '' }, defaultStyles.rbgcpControlBtnWrapper), className: "rbgcp-control-btn-wrapper" },
                     !hideEyeDrop && react_1.default.createElement(EyeDropper_js_1.default, { onSelect: handleChange }),
-                    react_1.default.createElement("div", { id: "rbgcp-advanced-btn", onClick: function () { return setOpenAdvanced(!openAdvanced); }, style: __assign({ display: hideAdvancedSliders ? 'none' : 'flex' }, (0, styles_js_1.controlBtnStyles)(openAdvanced, defaultStyles)) },
-                        react_1.default.createElement(icon_js_1.SlidersIcon, { color: openAdvanced ? '#568CF5' : '' })),
-                    react_1.default.createElement("div", { id: "rbgcp-comparibles-btn", style: __assign({ display: hideColorGuide ? 'none' : 'flex' }, (0, styles_js_1.controlBtnStyles)(openComparibles, defaultStyles)), onClick: function () { return setOpenComparibles(!openComparibles); } },
-                        react_1.default.createElement(icon_js_1.PaletteIcon, { color: openComparibles ? '#568CF5' : '' })),
-                    react_1.default.createElement("div", { id: "rbgcp-color-model-btn", onClick: function () { return setOpenInputType(!openInputType); }, style: __assign({ display: hideInputType ? 'none' : 'flex' }, (0, styles_js_1.controlBtnStyles)(openInputType, defaultStyles)) },
+                    hideAdvancedSliders && (react_1.default.createElement("div", { id: "rbgcp-advanced-btn", onClick: function () { return setOpenAdvanced(!openAdvanced); }, className: "rbgcp-control-btn rbgcp-advanced-btn", style: (0, styles_js_1.controlBtnStyles)(openAdvanced, defaultStyles) },
+                        react_1.default.createElement(icon_js_1.SlidersIcon, { color: openAdvanced ? '#568CF5' : '' }))),
+                    hideColorGuide && (react_1.default.createElement("div", { style: (0, styles_js_1.controlBtnStyles)(openComparibles, defaultStyles), onClick: function () { return setOpenComparibles(!openComparibles); }, className: "rbgcp-control-btn rbgcp-comparibles-btn", id: "rbgcp-comparibles-btn" },
+                        react_1.default.createElement(icon_js_1.PaletteIcon, { color: openComparibles ? '#568CF5' : '' }))),
+                    hideInputType && (react_1.default.createElement("div", { id: "rbgcp-color-model-btn", onClick: function () { return setOpenInputType(!openInputType); }, className: "rbgcp-control-btn rbgcp-color-model-btn", style: (0, styles_js_1.controlBtnStyles)(openInputType, defaultStyles) },
                         react_1.default.createElement(icon_js_1.InputsIcon, { color: openInputType ? '#568CF5' : '' }),
-                        react_1.default.createElement(InputTypeDropdown, { openInputType: openInputType, setOpenInputType: setOpenInputType }))))),
+                        react_1.default.createElement(InputTypeDropdown, { openInputType: openInputType, setOpenInputType: setOpenInputType })))))),
             !hideAdvancedSliders && (react_1.default.createElement(AdvancedControls_js_1.default, { openAdvanced: openAdvanced })),
@@ -135,0 +135,0 @@ !hideColorGuide && (react_1.default.createElement(ComparibleColors_js_1.default, { openComparibles: openComparibles })),

dist/cjs/components/GradientBar.js

@@ -79,4 +79,4 @@ "use strict";
         // onFocus={handleFocus}
-        id: "gradient-handle-".concat(i), onMouseDown: function (e) { return handleDown(e); }, style: __assign(__assign({}, defaultStyles.rbgcpGradientHandleWrap), { left: (left || 0) * leftMultiplyer }) },
-        react_1.default.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpGradientHandle), (isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {})) }, isSelected && (react_1.default.createElement("div", { style: {
+        id: "gradient-handle-".concat(i), onMouseDown: function (e) { return handleDown(e); }, className: "rbgcp-gradient-handle-wrap", style: __assign(__assign({}, defaultStyles.rbgcpGradientHandleWrap), { left: (left || 0) * leftMultiplyer }) },
+        react_1.default.createElement("div", { className: "rbgcp-gradient-handle", style: __assign(__assign({}, defaultStyles.rbgcpGradientHandle), (isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {})) }, isSelected && (react_1.default.createElement("div", { style: {
                 width: 5,
@@ -86,3 +86,3 @@ height: 5,
                 background: 'white',
-            } })))));
+            }, className: "rbgcp-gradient-handle-selected-dot" })))));
 };
@@ -155,5 +155,5 @@ exports.Handle = Handle;
                 backgroundImage: force90degLinear(value),
-            }, onMouseDown: function (e) { return handleDown(e); }, onMouseMove: function (e) { return handleMove(e); } }), colors === null || colors === void 0 ? void 0 :
+            }, onMouseDown: function (e) { return handleDown(e); }, onMouseMove: function (e) { return handleMove(e); }, className: "rbgcp-gradient-bar-canvas" }), colors === null || colors === void 0 ? void 0 :
         colors.map(function (c, i) { return (react_1.default.createElement(exports.Handle, { i: i, left: c.left, key: "".concat(i, "-").concat(c), setDragging: setDragging })); })));
 };
 exports.default = GradientBar;

dist/cjs/components/GradientControls.js

@@ -86,3 +86,3 @@ "use strict";
         react_1.default.createElement("input", { value: degrees, id: "rbgcp-degree-input", onChange: function (e) { return handleDegrees(e); }, className: "rbgcp-control-input rbgcp-degree-input", style: __assign(__assign({}, defaultStyles.rbgcpControlInput), defaultStyles.rbgcpDegreeInput) }),
-        react_1.default.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpDegreeIcon), { position: 'absolute', right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3, top: 1, fontWeight: 400, fontSize: 13 }) }, "\u00B0")));
+        react_1.default.createElement("div", { className: "rbgcp-degree-circle-icon", style: __assign(__assign({}, defaultStyles.rbgcpDegreeIcon), { position: 'absolute', right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3, top: 1, fontWeight: 400, fontSize: 13 }) }, "\u00B0")));
 };
@@ -89,0 +89,0 @@ var DeleteBtn = function () {

dist/cjs/components/Hue.js

@@ -88,4 +88,4 @@ "use strict";
             position: 'relative',
-        }, onMouseMove: function (e) { return handleMove(e); } },
-        react_1.default.createElement("div", { tabIndex: 0, role: "button", style: {
+        }, onMouseMove: function (e) { return handleMove(e); }, className: "rbgcp-hue-wrap" },
+        react_1.default.createElement("div", { tabIndex: 0, role: "button", className: "rbgcp-handle rbgcp-handle-hue", style: {
                 border: '2px solid white',
@@ -104,4 +104,4 @@ borderRadius: '50%',
             }, onMouseDown: handleDown }),
-        react_1.default.createElement("canvas", { ref: barRef, height: "14px", width: "".concat(squareWidth, "px"), onClick: function (e) { return handleClick(e); }, style: { position: 'relative', borderRadius: 14, verticalAlign: 'top' } })));
+        react_1.default.createElement("canvas", { ref: barRef, height: "14px", className: "rbgcp-hue-bar", width: "".concat(squareWidth, "px"), onClick: function (e) { return handleClick(e); }, style: { position: 'relative', borderRadius: 14, verticalAlign: 'top' } })));
 };
 exports.default = Hue;

dist/cjs/components/index.d.ts

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

dist/cjs/components/index.js

@@ -49,6 +49,6 @@ "use strict";
 function ColorPicker(_a) {
-    var _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;
+    var _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;
     var safeValue = (0, utils_js_1.objectToString)(value);
     var contRef = (0, react_1.useRef)(null);
-    var defaultStyles = (0, styles_js_1.getStyles)(disableDarkMode);
+    var defaultStyles = (0, styles_js_1.getStyles)(disableDarkMode, disableLightMode);
     return (react_1.default.createElement("div", { ref: contRef, className: className, style: __assign(__assign(__assign({}, defaultStyles.body), style), { width: width }) },
@@ -55,0 +55,0 @@ react_1.default.createElement(context_js_1.default, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, hideOpacity: hideOpacity, defaultStyles: defaultStyles },

dist/cjs/components/Opacity.js

@@ -83,7 +83,7 @@ "use strict";
             position: 'relative',
-        } },
-        react_1.default.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpCheckered), { width: '100%', height: 14 }) }),
-        react_1.default.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpHandle), { left: left * (hc === null || hc === void 0 ? void 0 : hc.a), top: -2 }) }),
-        react_1.default.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpOpacityOverlay), { background: bg }), onClick: function (e) { return handleClick(e); } })));
+        }, className: "rbgcp-opacity-wrap" },
+        react_1.default.createElement("div", { className: "rbgcp-opacity-checkered", style: __assign(__assign({}, defaultStyles.rbgcpCheckered), { width: '100%', height: 14 }) }),
+        react_1.default.createElement("div", { className: "rbgcp-handle rbgcp-handle-opacity", style: __assign(__assign({}, defaultStyles.rbgcpHandle), { left: left * (hc === null || hc === void 0 ? void 0 : hc.a), top: -2 }) }),
+        react_1.default.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpOpacityOverlay), { background: bg }), className: "rbgcp-opacity-overlay", onClick: function (e) { return handleClick(e); } })));
 };
 exports.default = Opacity;

dist/cjs/components/Presets.js

@@ -34,3 +34,3 @@ "use strict";
             justifyContent: 'space-between',
-        } },
+        }, className: "rbgcp-presets-wrap" },
         react_1.default.createElement("div", { style: {
@@ -42,3 +42,3 @@ width: 50,
                 flexShrink: 0,
-            } }),
+            }, className: "rbgcp-preset-color-preview" }),
         react_1.default.createElement("div", { style: {
@@ -49,3 +49,3 @@ display: 'flex',
                 justifyContent: 'space-between',
-            } }, getPresets().map(function (p, key) { return (react_1.default.createElement("div", { key: "".concat(p, "-").concat(key), style: {
+            }, className: "rbgcp-presets-list" }, getPresets().map(function (p, key) { return (react_1.default.createElement("div", { key: "".concat(p, "-").concat(key), style: {
                 height: 23,
@@ -57,4 +57,4 @@ width: '10.2%',
                 border: p === 'rgba(255,255,255, 1)' ? '1px solid #96959c' : '',
-            }, onClick: function () { return handlePresetClick(p); } })); }))));
+            }, className: "rbgcp-preset-color", onClick: function () { return handlePresetClick(p); } })); }))));
 };
 exports.default = Presets;

dist/cjs/components/Square.js

@@ -112,7 +112,7 @@ "use strict";
     return (react_1.default.createElement("div", { style: { position: 'relative' } },
-        react_1.default.createElement("div", { onMouseUp: stopDragging, onTouchEnd: stopDragging, onMouseDown: handleCanvasDown, onTouchStart: handleCanvasDown, onMouseMove: function (e) { return handleMove(e); }, style: { position: 'relative', cursor: 'ew-cross' } },
-            react_1.default.createElement("div", { style: __assign(__assign(__assign({}, defaultStyles.rbgcpHandle), { transform: "translate(".concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.x) || 0, "px, ").concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.y) || 0, "px)") }), (dragging ? { transition: "" } : {})), onMouseDown: handleMouseDown }),
-            react_1.default.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpCanvasWrapper), { height: squareHeight }), onClick: function (e) { return handleClick(e); } },
-                react_1.default.createElement("canvas", { ref: canvas, id: "paintSquare", width: "".concat(squareWidth, "px"), height: "".concat(squareHeight, "px") })))));
+        react_1.default.createElement("div", { onMouseUp: stopDragging, onTouchEnd: stopDragging, onMouseDown: handleCanvasDown, onTouchStart: handleCanvasDown, onMouseMove: function (e) { return handleMove(e); }, style: { position: 'relative', cursor: 'ew-cross' }, className: "rbgcp-square-wrap" },
+            react_1.default.createElement("div", { style: __assign(__assign(__assign({}, defaultStyles.rbgcpHandle), { transform: "translate(".concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.x) || 0, "px, ").concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.y) || 0, "px)") }), (dragging ? { transition: '' } : {})), onMouseDown: handleMouseDown, className: "rbgcp-handle rbgcp-handle-square" }),
+            react_1.default.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpCanvasWrapper), { height: squareHeight }), className: "rbgcp-canvas-wrapper", onClick: function (e) { return handleClick(e); } },
+                react_1.default.createElement("canvas", { ref: canvas, id: "paintSquare", className: "rbgcp-canvas", width: "".concat(squareWidth, "px"), height: "".concat(squareHeight, "px") })))));
 };
 exports.default = Square;

dist/cjs/shared/types.d.ts

@@ -25,2 +25,3 @@ export type ColorPickerProps = {
     disableDarkMode?: boolean;
+    disableLightMode?: boolean;
 };
@@ -27,0 +28,0 @@ export type ColorsProps = {

dist/cjs/styles/styles.d.ts

 import { Styles } from '../shared/types.js';
-export declare const getStyles: (disableDarkMode: boolean) => Styles;
+export declare const getStyles: (disableDarkMode: boolean, disableLightMode: boolean) => Styles;
 export declare const colorTypeBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;
 export declare const controlBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;
 export declare const modalBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;

dist/cjs/styles/styles.js

@@ -177,6 +177,6 @@ "use strict";
 };
-var getStyles = function (disableDarkMode) {
+var getStyles = function (disableDarkMode, disableLightMode) {
     if (typeof window === 'undefined' || disableDarkMode)
         return styles;
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) {
         for (var key in darkStyles_js_1.darkStyles) {
@@ -183,0 +183,0 @@ if (Object.prototype.hasOwnProperty.call(darkStyles_js_1.darkStyles, key)) {

dist/esm/components/AdvancedControls.js

@@ -53,4 +53,4 @@ var __assign = (this && this.__assign) || function () {
     return (React.createElement("div", { style: { width: '100%', padding: '3px 0px 3px 0px' } },
-        React.createElement("div", { onMouseMove: function (e) { return handleMove(e); }, style: { cursor: 'resize', position: 'relative' } },
-            React.createElement("div", { style: __assign({ left: left, top: handleTop }, defaultStyles.rbgcpHandle), onMouseDown: handleDown, role: "button", tabIndex: 0 }),
+        React.createElement("div", { onMouseMove: function (e) { return handleMove(e); }, className: "rbgcp-advanced-bar-wrap", style: { cursor: 'resize', position: 'relative' } },
+            React.createElement("div", { style: __assign({ left: left, top: handleTop }, defaultStyles.rbgcpHandle), className: "rbgcp-advanced-bar-handle", onMouseDown: handleDown, role: "button", tabIndex: 0 }),
             React.createElement("div", { style: {
@@ -68,6 +68,6 @@ textAlign: 'center',
                     textShadow: '1px 1px 1px rgba(0,0,0,.6)',
-                }, onMouseMove: function (e) { return handleMove(e); }, onClick: function (e) { return handleClick(e); }, tabIndex: 0, role: "button", onKeyDown: function () {
+                }, className: "rbgcp-advanced-bar-label", onMouseMove: function (e) { return handleMove(e); }, onClick: function (e) { return handleClick(e); }, tabIndex: 0, role: "button", onKeyDown: function () {
                     return;
                 } }, label),
-            React.createElement("canvas", { ref: reffy, height: "14px", width: "".concat(squareWidth, "px"), onClick: function (e) { return handleClick(e); }, style: { position: 'relative', borderRadius: 14 } }))));
+            React.createElement("canvas", { ref: reffy, height: "14px", width: "".concat(squareWidth, "px"), onClick: function (e) { return handleClick(e); }, className: "rbgcp-advanced-bar-canvas", style: { position: 'relative', borderRadius: 14 } }))));
 };
@@ -104,3 +104,3 @@ var AdvancedControls = function (_a) {
             transition: 'all 120ms linear',
-        } },
+        }, className: "rbgcp-advanced-controls-wrap" },
         React.createElement("div", { style: {
@@ -114,3 +114,3 @@ paddingTop: 11,
                 transition: 'height 100ms linear',
-            } },
+            }, className: "rbgcp-advanced-controls-inner" },
             React.createElement(AdvBar, { value: s, reffy: satRef, callback: satDesat, openAdvanced: openAdvanced, label: "Saturation" }),
@@ -117,0 +117,0 @@ React.createElement(AdvBar, { value: l, reffy: lightRef, label: "Lightness", callback: setLight, openAdvanced: openAdvanced }),

dist/esm/components/ComparibleColors.js

@@ -29,3 +29,3 @@ var __assign = (this && this.__assign) || function () {
             transition: 'all 120ms linear',
-        } },
+        }, className: "rbgcp-comparible-colors-wrap" },
         React.createElement("div", { style: {
@@ -35,7 +35,7 @@ paddingTop: 11,
                 position: 'relative',
-            } },
-            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 13, fontWeight: 600, position: 'absolute', top: 6.5, left: 2 }, defaultStyles.rbgcpComparibleLabel) }, "Color Guide"),
-            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel) }, "Analogous"),
+            }, className: "rbgcp-comparible-colors-inner" },
+            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 13, fontWeight: 600, position: 'absolute', top: 6.5, left: 2 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Color Guide"),
+            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Analogous"),
             React.createElement("div", { style: { borderRadius: 5, overflow: 'hidden', display: 'flex' } }, analogous === null || analogous === void 0 ? void 0 : analogous.map(function (c, key) { return (React.createElement("div", { key: key, style: { width: '20%', height: 30, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })),
-            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel) }, "Monochromatic"),
+            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Monochromatic"),
             React.createElement("div", { style: {
@@ -46,4 +46,4 @@ borderRadius: 5,
                     justifyContent: 'flex-end',
-                } }, monochromatic === null || monochromatic === void 0 ? void 0 : monochromatic.map(function (c, key) { return (React.createElement("div", { key: key, style: { width: '20%', height: 30, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })),
-            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel) }, "Triad"),
+                }, className: "rbgcp-comparible-colors-colors" }, monochromatic === null || monochromatic === void 0 ? void 0 : monochromatic.map(function (c, key) { return (React.createElement("div", { key: key, className: "rbgcp-comparible-colors-color", style: { width: '20%', height: 30, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })),
+            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Triad"),
             React.createElement("div", { style: {
@@ -54,3 +54,3 @@ borderRadius: 5,
                     justifyContent: 'flex-end',
-                } }, triad === null || triad === void 0 ? void 0 : triad.map(function (c, key) { return (React.createElement("div", { key: key, style: {
+                }, className: "rbgcp-comparible-colors-colors" }, triad === null || triad === void 0 ? void 0 : triad.map(function (c, key) { return (React.createElement("div", { key: key, className: "rbgcp-comparible-colors-color", style: {
                     width: 'calc(100% / 3)',
@@ -60,3 +60,3 @@ height: 28,
                 }, onClick: function () { return handleClick(c); } })); })),
-            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel) }, "Tetrad"),
+            React.createElement("div", { style: __assign({ textAlign: 'center', fontSize: 12, fontWeight: 500, marginTop: 3 }, defaultStyles.rbgcpComparibleLabel), className: "rbgcp-comparible-colors-label" }, "Tetrad"),
             React.createElement("div", { style: {
@@ -67,4 +67,4 @@ borderRadius: 5,
                     justifyContent: 'flex-end',
-                } }, tetrad === null || tetrad === void 0 ? void 0 : tetrad.map(function (c, key) { return (React.createElement("div", { key: key, style: { width: '25%', height: 28, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })))));
+                }, className: "rbgcp-comparible-colors-colors" }, tetrad === null || tetrad === void 0 ? void 0 : tetrad.map(function (c, key) { return (React.createElement("div", { key: key, className: "rbgcp-comparible-colors-color", style: { width: '25%', height: 28, background: c.toHexString() }, onClick: function () { return handleClick(c); } })); })))));
 };
 export default ComparibleColors;

dist/esm/components/Controls.js

@@ -94,13 +94,13 @@ var __assign = (this && this.__assign) || function () {
                     justifyContent: 'space-between',
-                } },
+                }, className: "rbgcp-controls-wrapper" },
                 React.createElement(ColorTypeBtns, { hideColorTypeBtns: hideColorTypeBtns, setGradient: setGradient, isGradient: isGradient, setSolid: setSolid, locales: locales }),
-                !allRightControlsHidden && (React.createElement("div", { style: __assign({ display: noTools ? 'none' : '' }, defaultStyles.rbgcpControlBtnWrapper) },
+                !allRightControlsHidden && (React.createElement("div", { style: __assign({ display: noTools ? 'none' : '' }, defaultStyles.rbgcpControlBtnWrapper), className: "rbgcp-control-btn-wrapper" },
                     !hideEyeDrop && React.createElement(EyeDropper, { onSelect: handleChange }),
-                    React.createElement("div", { id: "rbgcp-advanced-btn", onClick: function () { return setOpenAdvanced(!openAdvanced); }, style: __assign({ display: hideAdvancedSliders ? 'none' : 'flex' }, controlBtnStyles(openAdvanced, defaultStyles)) },
-                        React.createElement(SlidersIcon, { color: openAdvanced ? '#568CF5' : '' })),
-                    React.createElement("div", { id: "rbgcp-comparibles-btn", style: __assign({ display: hideColorGuide ? 'none' : 'flex' }, controlBtnStyles(openComparibles, defaultStyles)), onClick: function () { return setOpenComparibles(!openComparibles); } },
-                        React.createElement(PaletteIcon, { color: openComparibles ? '#568CF5' : '' })),
-                    React.createElement("div", { id: "rbgcp-color-model-btn", onClick: function () { return setOpenInputType(!openInputType); }, style: __assign({ display: hideInputType ? 'none' : 'flex' }, controlBtnStyles(openInputType, defaultStyles)) },
+                    hideAdvancedSliders && (React.createElement("div", { id: "rbgcp-advanced-btn", onClick: function () { return setOpenAdvanced(!openAdvanced); }, className: "rbgcp-control-btn rbgcp-advanced-btn", style: controlBtnStyles(openAdvanced, defaultStyles) },
+                        React.createElement(SlidersIcon, { color: openAdvanced ? '#568CF5' : '' }))),
+                    hideColorGuide && (React.createElement("div", { style: controlBtnStyles(openComparibles, defaultStyles), onClick: function () { return setOpenComparibles(!openComparibles); }, className: "rbgcp-control-btn rbgcp-comparibles-btn", id: "rbgcp-comparibles-btn" },
+                        React.createElement(PaletteIcon, { color: openComparibles ? '#568CF5' : '' }))),
+                    hideInputType && (React.createElement("div", { id: "rbgcp-color-model-btn", onClick: function () { return setOpenInputType(!openInputType); }, className: "rbgcp-control-btn rbgcp-color-model-btn", style: controlBtnStyles(openInputType, defaultStyles) },
                         React.createElement(InputsIcon, { color: openInputType ? '#568CF5' : '' }),
-                        React.createElement(InputTypeDropdown, { openInputType: openInputType, setOpenInputType: setOpenInputType }))))),
+                        React.createElement(InputTypeDropdown, { openInputType: openInputType, setOpenInputType: setOpenInputType })))))),
             !hideAdvancedSliders && (React.createElement(AdvancedControls, { openAdvanced: openAdvanced })),
@@ -107,0 +107,0 @@ !hideColorGuide && (React.createElement(ComparibleColors, { openComparibles: openComparibles })),

dist/esm/components/GradientBar.js

@@ -53,4 +53,4 @@ var __assign = (this && this.__assign) || function () {
         // onFocus={handleFocus}
-        id: "gradient-handle-".concat(i), onMouseDown: function (e) { return handleDown(e); }, style: __assign(__assign({}, defaultStyles.rbgcpGradientHandleWrap), { left: (left || 0) * leftMultiplyer }) },
-        React.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpGradientHandle), (isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {})) }, isSelected && (React.createElement("div", { style: {
+        id: "gradient-handle-".concat(i), onMouseDown: function (e) { return handleDown(e); }, className: "rbgcp-gradient-handle-wrap", style: __assign(__assign({}, defaultStyles.rbgcpGradientHandleWrap), { left: (left || 0) * leftMultiplyer }) },
+        React.createElement("div", { className: "rbgcp-gradient-handle", style: __assign(__assign({}, defaultStyles.rbgcpGradientHandle), (isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {})) }, isSelected && (React.createElement("div", { style: {
                 width: 5,
@@ -60,3 +60,3 @@ height: 5,
                 background: 'white',
-            } })))));
+            }, className: "rbgcp-gradient-handle-selected-dot" })))));
 };
@@ -128,5 +128,5 @@ var GradientBar = function () {
                 backgroundImage: force90degLinear(value),
-            }, onMouseDown: function (e) { return handleDown(e); }, onMouseMove: function (e) { return handleMove(e); } }), colors === null || colors === void 0 ? void 0 :
+            }, onMouseDown: function (e) { return handleDown(e); }, onMouseMove: function (e) { return handleMove(e); }, className: "rbgcp-gradient-bar-canvas" }), colors === null || colors === void 0 ? void 0 :
         colors.map(function (c, i) { return (React.createElement(Handle, { i: i, left: c.left, key: "".concat(i, "-").concat(c), setDragging: setDragging })); })));
 };
 export default GradientBar;

dist/esm/components/GradientControls.js

@@ -58,3 +58,3 @@ var __assign = (this && this.__assign) || function () {
         React.createElement("input", { value: degrees, id: "rbgcp-degree-input", onChange: function (e) { return handleDegrees(e); }, className: "rbgcp-control-input rbgcp-degree-input", style: __assign(__assign({}, defaultStyles.rbgcpControlInput), defaultStyles.rbgcpDegreeInput) }),
-        React.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpDegreeIcon), { position: 'absolute', right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3, top: 1, fontWeight: 400, fontSize: 13 }) }, "\u00B0")));
+        React.createElement("div", { className: "rbgcp-degree-circle-icon", style: __assign(__assign({}, defaultStyles.rbgcpDegreeIcon), { position: 'absolute', right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3, top: 1, fontWeight: 400, fontSize: 13 }) }, "\u00B0")));
 };
@@ -61,0 +61,0 @@ var DeleteBtn = function () {

dist/esm/components/Hue.js

@@ -60,4 +60,4 @@ var __assign = (this && this.__assign) || function () {
             position: 'relative',
-        }, onMouseMove: function (e) { return handleMove(e); } },
-        React.createElement("div", { tabIndex: 0, role: "button", style: {
+        }, onMouseMove: function (e) { return handleMove(e); }, className: "rbgcp-hue-wrap" },
+        React.createElement("div", { tabIndex: 0, role: "button", className: "rbgcp-handle rbgcp-handle-hue", style: {
                 border: '2px solid white',
@@ -76,4 +76,4 @@ borderRadius: '50%',
             }, onMouseDown: handleDown }),
-        React.createElement("canvas", { ref: barRef, height: "14px", width: "".concat(squareWidth, "px"), onClick: function (e) { return handleClick(e); }, style: { position: 'relative', borderRadius: 14, verticalAlign: 'top' } })));
+        React.createElement("canvas", { ref: barRef, height: "14px", className: "rbgcp-hue-bar", width: "".concat(squareWidth, "px"), onClick: function (e) { return handleClick(e); }, style: { position: 'relative', borderRadius: 14, verticalAlign: 'top' } })));
 };
 export default Hue;

dist/esm/components/index.d.ts

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

dist/esm/components/index.js

@@ -20,6 +20,6 @@ 'use client';
 export function ColorPicker(_a) {
-    var _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;
+    var _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;
     var safeValue = objectToString(value);
     var contRef = useRef(null);
-    var defaultStyles = getStyles(disableDarkMode);
+    var defaultStyles = getStyles(disableDarkMode, disableLightMode);
     return (React.createElement("div", { ref: contRef, className: className, style: __assign(__assign(__assign({}, defaultStyles.body), style), { width: width }) },
@@ -26,0 +26,0 @@ React.createElement(PickerContextWrapper, { value: safeValue, onChange: onChange, squareWidth: width, squareHeight: height, hideOpacity: hideOpacity, defaultStyles: defaultStyles },

dist/esm/components/Opacity.js

@@ -58,7 +58,7 @@ var __assign = (this && this.__assign) || function () {
             position: 'relative',
-        } },
-        React.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpCheckered), { width: '100%', height: 14 }) }),
-        React.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpHandle), { left: left * (hc === null || hc === void 0 ? void 0 : hc.a), top: -2 }) }),
-        React.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpOpacityOverlay), { background: bg }), onClick: function (e) { return handleClick(e); } })));
+        }, className: "rbgcp-opacity-wrap" },
+        React.createElement("div", { className: "rbgcp-opacity-checkered", style: __assign(__assign({}, defaultStyles.rbgcpCheckered), { width: '100%', height: 14 }) }),
+        React.createElement("div", { className: "rbgcp-handle rbgcp-handle-opacity", style: __assign(__assign({}, defaultStyles.rbgcpHandle), { left: left * (hc === null || hc === void 0 ? void 0 : hc.a), top: -2 }) }),
+        React.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpOpacityOverlay), { background: bg }), className: "rbgcp-opacity-overlay", onClick: function (e) { return handleClick(e); } })));
 };
 export default Opacity;

dist/esm/components/Presets.js

@@ -29,3 +29,3 @@ /* eslint-disable react/no-array-index-key */
             justifyContent: 'space-between',
-        } },
+        }, className: "rbgcp-presets-wrap" },
         React.createElement("div", { style: {
@@ -37,3 +37,3 @@ width: 50,
                 flexShrink: 0,
-            } }),
+            }, className: "rbgcp-preset-color-preview" }),
         React.createElement("div", { style: {
@@ -44,3 +44,3 @@ display: 'flex',
                 justifyContent: 'space-between',
-            } }, getPresets().map(function (p, key) { return (React.createElement("div", { key: "".concat(p, "-").concat(key), style: {
+            }, className: "rbgcp-presets-list" }, getPresets().map(function (p, key) { return (React.createElement("div", { key: "".concat(p, "-").concat(key), style: {
                 height: 23,
@@ -52,4 +52,4 @@ width: '10.2%',
                 border: p === 'rgba(255,255,255, 1)' ? '1px solid #96959c' : '',
-            }, onClick: function () { return handlePresetClick(p); } })); }))));
+            }, className: "rbgcp-preset-color", onClick: function () { return handlePresetClick(p); } })); }))));
 };
 export default Presets;

dist/esm/components/Square.js

@@ -84,7 +84,7 @@ var __assign = (this && this.__assign) || function () {
     return (React.createElement("div", { style: { position: 'relative' } },
-        React.createElement("div", { onMouseUp: stopDragging, onTouchEnd: stopDragging, onMouseDown: handleCanvasDown, onTouchStart: handleCanvasDown, onMouseMove: function (e) { return handleMove(e); }, style: { position: 'relative', cursor: 'ew-cross' } },
-            React.createElement("div", { style: __assign(__assign(__assign({}, defaultStyles.rbgcpHandle), { transform: "translate(".concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.x) || 0, "px, ").concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.y) || 0, "px)") }), (dragging ? { transition: "" } : {})), onMouseDown: handleMouseDown }),
-            React.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpCanvasWrapper), { height: squareHeight }), onClick: function (e) { return handleClick(e); } },
-                React.createElement("canvas", { ref: canvas, id: "paintSquare", width: "".concat(squareWidth, "px"), height: "".concat(squareHeight, "px") })))));
+        React.createElement("div", { onMouseUp: stopDragging, onTouchEnd: stopDragging, onMouseDown: handleCanvasDown, onTouchStart: handleCanvasDown, onMouseMove: function (e) { return handleMove(e); }, style: { position: 'relative', cursor: 'ew-cross' }, className: "rbgcp-square-wrap" },
+            React.createElement("div", { style: __assign(__assign(__assign({}, defaultStyles.rbgcpHandle), { transform: "translate(".concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.x) || 0, "px, ").concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.y) || 0, "px)") }), (dragging ? { transition: '' } : {})), onMouseDown: handleMouseDown, className: "rbgcp-handle rbgcp-handle-square" }),
+            React.createElement("div", { style: __assign(__assign({}, defaultStyles.rbgcpCanvasWrapper), { height: squareHeight }), className: "rbgcp-canvas-wrapper", onClick: function (e) { return handleClick(e); } },
+                React.createElement("canvas", { ref: canvas, id: "paintSquare", className: "rbgcp-canvas", width: "".concat(squareWidth, "px"), height: "".concat(squareHeight, "px") })))));
 };
 export default Square;

dist/esm/shared/types.d.ts

@@ -25,2 +25,3 @@ export type ColorPickerProps = {
     disableDarkMode?: boolean;
+    disableLightMode?: boolean;
 };
@@ -27,0 +28,0 @@ export type ColorsProps = {

dist/esm/styles/styles.d.ts

 import { Styles } from '../shared/types.js';
-export declare const getStyles: (disableDarkMode: boolean) => Styles;
+export declare const getStyles: (disableDarkMode: boolean, disableLightMode: boolean) => Styles;
 export declare const colorTypeBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;
 export declare const controlBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;
 export declare const modalBtnStyles: (selected: boolean, styles: Styles) => React.CSSProperties;

dist/esm/styles/styles.js

@@ -174,6 +174,6 @@ var __assign = (this && this.__assign) || function () {
 };
-export var getStyles = function (disableDarkMode) {
+export var getStyles = function (disableDarkMode, disableLightMode) {
     if (typeof window === 'undefined' || disableDarkMode)
         return styles;
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) {
         for (var key in darkStyles) {
@@ -180,0 +180,0 @@ if (Object.prototype.hasOwnProperty.call(darkStyles, key)) {

package.json

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

README.md

@@ -91,3 +91,5 @@ [![Npm Version][npm-version-image]][npm-version-url]
 | presets             | `array`      | ['rgba(0,0,0,1)', ...]  | (optional) pass in custom preset options ['rgba()', 'rgba()', ..]         |
-| locales             | `object`      | { CONTROLS: { SOLID: 'Solid', GRADIENT: 'Gradient' }}  | (optional) pass in custom locales |
+| locales             | `object`     | { CONTROLS: { SOLID: 'Solid', GRADIENT: 'Gradient' }}  | (optional) pass in custom locales |
+| disbaleDarkMode     | `boolean`    | false                    | (optional) disbale automatic dark mode style adjustments                 |
+| className           | `string`     | ''                       | (optional) a CSS class for the picker parent (see styling for more options)|
 
@@ -94,0 +96,0 @@ <a id="item-five"></a>

src/shared/types.ts

@@ -25,2 +25,3 @@ export type ColorPickerProps = {
   disableDarkMode?: boolean
+  disableLightMode?: boolean
 }
@@ -27,0 +28,0 @@

src/styles/styles.ts

@@ -182,5 +182,5 @@ import { darkStyles } from './darkStyles.js';
 
-export const getStyles = (disableDarkMode: boolean) => {
+export const getStyles = (disableDarkMode: boolean, disableLightMode: boolean) => {
   if (typeof window === 'undefined' || disableDarkMode) return styles;
-  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) {
     for (const key in darkStyles) {
@@ -187,0 +187,0 @@ if (Object.prototype.hasOwnProperty.call(darkStyles, key)) {

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

449575

increased by1.4%

Lines of code

10749

increased by0.51%

Number of lines in readme file

489

increased by0.41%

No dependency changes