react-iro-gradient-picker 1.0.2 → 1.0.4

package/dist/index.js

@@ -99,13 +99,18 @@ var ThemeProvider = function (_a) {
         return defaultTheme;
     }), 2), theme = _c[0], setTheme = _c[1];
     React.useEffect(function () {
-        var root = window.document.documentElement;
-        // Remove previous theme class
-        root.classList.remove('light', 'dark');
-        // Add new theme class
-        root.classList.add(theme);
+        // Apply theme to local container instead of document root for better scoping
+        var containers = document.querySelectorAll('[data-color-picker-theme]');
+        containers.forEach(function (container) {
+            // Remove previous theme class
+            container.classList.remove('light', 'dark');
+            // Add new theme class
+            container.classList.add(theme);
+        });
         // Store theme preference
-        localStorage.setItem('color-picker-theme', theme);
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('color-picker-theme', theme);
+        }
     }, [theme]);
     var toggleTheme = function () {
         setTheme(function (prevTheme) { return (prevTheme === 'light' ? 'dark' : 'light'); });
@@ -7634,12 +7639,14 @@ var useDebounce = (function (value, delay) {
 });
 
 var IroGradient = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 'linear-gradient(90deg, #ffffff 0%, #000000 100%)' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, _j = _a.showGradientResult, showGradientResult = _j === void 0 ? true : _j, _k = _a.showGradientStops, showGradientStops = _k === void 0 ? true : _k, _l = _a.showGradientMode, showGradientMode = _l === void 0 ? true : _l, _m = _a.showGradientAngle, showGradientAngle = _m === void 0 ? true : _m, _o = _a.showGradientPosition, showGradientPosition = _o === void 0 ? true : _o, _p = _a.allowAddGradientStops, allowAddGradientStops = _p === void 0 ? true : _p, _q = _a.colorBoardHeight, colorBoardHeight = _q === void 0 ? 120 : _q, defaultColors = _a.defaultColors;
+    var _b = _a.value, value = _b === void 0 ? 'linear-gradient(90deg, #ffffff 0%, #000000 100%)' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, _j = _a.showGradientResult, showGradientResult = _j === void 0 ? true : _j, _k = _a.showGradientStops, showGradientStops = _k === void 0 ? true : _k, _l = _a.showGradientMode, showGradientMode = _l === void 0 ? true : _l, _m = _a.showGradientAngle, showGradientAngle = _m === void 0 ? true : _m, _o = _a.showGradientPosition, showGradientPosition = _o === void 0 ? true : _o, _p = _a.allowAddGradientStops, allowAddGradientStops = _p === void 0 ? true : _p, _q = _a.colorBoardHeight, colorBoardHeight = _q === void 0 ? 120 : _q, defaultColors = _a.defaultColors, _r = _a.showReset, showReset = _r === void 0 ? false : _r, onReset = _a.onReset;
+    // Store the initial value for reset functionality
+    var initialValue = React.useRef(value);
     var parsedColors = React.useCallback(function () {
         return parseGradient(value);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    var _r = parsedColors(), stops = _r.stops, type = _r.type, modifier = _r.modifier;
+    var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
     var lastStop = rgbaToArray(stops[stops.length - 1][0]);
     var activeStopIndex = stops.length - 1;
     var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
@@ -7647,7 +7654,7 @@ var IroGradient = function (_a) {
     var iroPickerRef = React.useRef(null);
     var containerRef = React.useRef(null);
     var isUpdatingFromGradientStop = React.useRef(false);
-    var _s = __read(React.useState(200), 2), pickerWidth = _s[0], setPickerWidth = _s[1];
+    var _t = __read(React.useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
     // Responsive width for IroColorPicker - match solid picker logic
     React.useEffect(function () {
         if (!containerRef.current)
@@ -7686,18 +7693,18 @@ var IroGradient = function (_a) {
         resizeObserver.observe(containerRef.current);
         return function () { return resizeObserver.disconnect(); };
     }, []);
-    var _t = __read(React.useState({
+    var _u = __read(React.useState({
         gradient: value,
         type: type,
         modifier: modifier,
         stops: stops
-    }), 2), color = _t[0], setColor = _t[1];
-    var _u = __read(React.useState({
+    }), 2), color = _u[0], setColor = _u[1];
+    var _v = __read(React.useState({
         hex: activeStop,
         alpha: activeAlpha,
         loc: stops[activeStopIndex][1],
         index: activeStopIndex
-    }), 2), activeColor = _u[0], setActiveColor = _u[1];
+    }), 2), activeColor = _v[0], setActiveColor = _v[1];
     var debounceColor = useDebounce(color, debounceMS);
     // Update iro picker color
     var updateIroPickerColor = React.useCallback(function (colorData, retryCount) {
@@ -7886,6 +7893,29 @@ var IroGradient = function (_a) {
         var alpha = Math.round(rgbaArr[3] * 100);
         onChangeActiveColor({ hex: hex, alpha: alpha });
     };
+    // Reset to initial color
+    var handleResetColor = function () {
+        var _a;
+        var initialParsed = parseGradient(initialValue.current);
+        setColor(initialParsed);
+        // Reset active color to the last stop of the initial gradient
+        var lastStop = rgbaToArray(initialParsed.stops[initialParsed.stops.length - 1][0]);
+        var newActiveColor = {
+            hex: rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]),
+            alpha: Math.round(lastStop[3] * 100),
+            loc: initialParsed.stops[initialParsed.stops.length - 1][1],
+            index: initialParsed.stops.length - 1
+        };
+        setActiveColor(newActiveColor);
+        // Update iro picker if available
+        if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
+            updateIroPickerColor(newActiveColor);
+        }
+        // Call onChange with initial value
+        onChange(initialValue.current);
+        // Call onReset callback if provided
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+    };
     // Update iro picker when color is selected from default colors panel
     var handleColorFromPanel = function (newColor) {
         setColor(newColor);
@@ -7945,34 +7975,38 @@ var IroGradient = function (_a) {
         }).toHex8String()
         : activeColor.hex;
     return (React__default["default"].createElement("div", { className: 'w-full rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl', style: {
-            backgroundColor: 'var(--colorpicker-panel-bg)',
-            borderColor: 'var(--colorpicker-border)',
-            borderWidth: '1px',
-            borderStyle: 'solid'
+            backgroundColor: 'var(--colorpicker-panel-bg)'
         } },
         React__default["default"].createElement("div", { className: 'relative', ref: containerRef },
             React__default["default"].createElement("div", { className: 'flex justify-center items-center rounded-lg', style: {
                     height: colorBoardHeight + pickerWidth
                 } },
                 React__default["default"].createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleIroColorChange }))),
-        React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass' },
+        React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass px-4' },
             React__default["default"].createElement(GradientPanel$1, { color: color, activeColor: activeColor, setActiveColor: handleSetActiveColor, setColor: updateGradient, setInit: setInit, format: format, showAlpha: showAlpha, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops })),
-        React__default["default"].createElement("div", { className: 'pt-4' },
+        React__default["default"].createElement("div", { className: 'pt-4 px-2' },
             React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
-        showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass' },
-            React__default["default"].createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
-                    return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
-                     })); });
-                }, onSubmitChange: onSubmitChange })))));
+        showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
+            React__default["default"].createElement("div", { className: 'flex-1' },
+                React__default["default"].createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
+                        return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
+                         })); });
+                    }, onSubmitChange: onSubmitChange })),
+            showReset && (React__default["default"].createElement("button", { onClick: handleResetColor, className: 'px-3 py-2 text-xs font-medium rounded-md transition-colors duration-200 bg-transparent border border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 hover:bg-gray-800/50 whitespace-nowrap flex items-center gap-1', title: 'Reset to initial color' },
+                React__default["default"].createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
+                    React__default["default"].createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' })),
+                "Reset"))))));
 };
 
 var IroSolidColorPicker = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, defaultColors = _a.defaultColors;
+    var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, defaultColors = _a.defaultColors, _j = _a.showReset, showReset = _j === void 0 ? false : _j, onReset = _a.onReset;
     var node = React.useRef(null);
     var iroPickerRef = React.useRef(null);
-    var _j = __read(React.useState(true), 2), init = _j[0], setInit = _j[1];
-    var _k = __read(React.useState(getHexAlpha(value)), 2), color = _k[0], setColor = _k[1];
-    var _l = __read(React.useState(200), 2), pickerWidth = _l[0], setPickerWidth = _l[1];
+    // Store the initial value for reset functionality
+    var initialValue = React.useRef(value);
+    var _k = __read(React.useState(true), 2), init = _k[0], setInit = _k[1];
+    var _l = __read(React.useState(getHexAlpha(value)), 2), color = _l[0], setColor = _l[1];
+    var _m = __read(React.useState(200), 2), pickerWidth = _m[0], setPickerWidth = _m[1];
     var pickerWidthRef = React.useRef(200);
     // Update ref when state changes
     React.useEffect(function () {
@@ -8150,6 +8184,33 @@ var IroSolidColorPicker = function (_a) {
         };
         updateIroColor();
     };
+    // Reset to initial color
+    var handleResetColor = function () {
+        var _a;
+        var initialColorData = getHexAlpha(initialValue.current);
+        setColor(initialColorData);
+        // Update the iro color picker
+        if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
+            var iroColor = showAlpha
+                ? {
+                    r: parseInt(initialColorData.hex.slice(1, 3), 16),
+                    g: parseInt(initialColorData.hex.slice(3, 5), 16),
+                    b: parseInt(initialColorData.hex.slice(5, 7), 16),
+                    a: initialColorData.alpha / 100
+                }
+                : initialColorData.hex;
+            try {
+                iroPickerRef.current.colorPicker.color.set(iroColor);
+            }
+            catch (error) {
+                console.warn('Error updating iro color picker on reset:', error);
+            }
+        }
+        // Call onChange with initial value
+        onChange(initialValue.current);
+        // Call onReset callback if provided
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+    };
     // Create layout array conditionally based on showAlpha
     var layoutConfig = [
         {
@@ -8182,9 +8243,6 @@ var IroSolidColorPicker = function (_a) {
         : color.hex;
     return (React__default["default"].createElement("div", { ref: node, className: 'w-full p-2 rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl overflow-hidden', style: {
             backgroundColor: 'var(--colorpicker-panel-bg)',
-            borderColor: 'var(--colorpicker-border)',
-            borderWidth: '1px',
-            borderStyle: 'solid',
             maxWidth: '100%',
             minWidth: 0,
             boxSizing: 'border-box'
@@ -8205,8 +8263,13 @@ var IroSolidColorPicker = function (_a) {
                     React__default["default"].createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleColorChange })))),
         React__default["default"].createElement("div", { className: 'border-t pt-4 colorpicker-glass rounded-lg' },
             React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: setInit, colorType: 'solid' })),
-        showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg  colorpicker-glass' },
-            React__default["default"].createElement(InputRgba, { hex: color.hex, alpha: color.alpha, format: format, showAlpha: showAlpha, onChange: handleInputChange, onSubmitChange: handleInputSubmit })))));
+        showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
+            React__default["default"].createElement("div", { className: 'flex-1' },
+                React__default["default"].createElement(InputRgba, { hex: color.hex, alpha: color.alpha, format: format, showAlpha: showAlpha, onChange: handleInputChange, onSubmitChange: handleInputSubmit })),
+            showReset && (React__default["default"].createElement("button", { onClick: handleResetColor, className: 'px-3 py-2 text-xs font-medium rounded-md transition-colors duration-200 bg-transparent border border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 hover:bg-gray-800/50 whitespace-nowrap flex items-center gap-1', title: 'Reset to initial color' },
+                React__default["default"].createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
+                    React__default["default"].createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' })),
+                "Reset"))))));
 };
 
 var PopupTabs = function (_a) {
@@ -8216,7 +8279,7 @@ var PopupTabs = function (_a) {
             activeTab: activeTab
         });
     });
-    return (React__default["default"].createElement("div", { className: 'relative rounded-md colorpicker-glass', style: { width: "".concat(popupWidth, "px") } }, childrenContact));
+    return (React__default["default"].createElement("div", { className: 'relative rounded-md', style: { width: "".concat(popupWidth, "px") } }, childrenContact));
 };
 var PopupTabsHeaderLabel = function (_a) {
     var children = _a.children, activeTab = _a.activeTab, tabName = _a.tabName, onClick = _a.onClick;
@@ -8251,8 +8314,8 @@ var PopupTabsBodyItem = function (_a) {
 };
 
 var ColorPicker = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.format, format = _c === void 0 ? 'rgb' : _c, _d = _a.gradient, gradient = _d === void 0 ? false : _d, _e = _a.solid, solid = _e === void 0 ? true : _e, _f = _a.debounceMS, debounceMS = _f === void 0 ? 300 : _f, _g = _a.debounce, debounce = _g === void 0 ? true : _g, _h = _a.showAlpha, showAlpha = _h === void 0 ? true : _h, _j = _a.showInputs, showInputs = _j === void 0 ? true : _j, _k = _a.showGradientResult, showGradientResult = _k === void 0 ? true : _k, _l = _a.showGradientStops, showGradientStops = _l === void 0 ? true : _l, _m = _a.showGradientMode, showGradientMode = _m === void 0 ? true : _m, _o = _a.showGradientAngle, showGradientAngle = _o === void 0 ? true : _o, _p = _a.showGradientPosition, showGradientPosition = _p === void 0 ? true : _p, _q = _a.allowAddGradientStops, allowAddGradientStops = _q === void 0 ? true : _q, _r = _a.popupWidth, popupWidth = _r === void 0 ? 267 : _r, _s = _a.colorBoardHeight, colorBoardHeight = _s === void 0 ? 120 : _s, _t = _a.defaultColors, defaultColors = _t === void 0 ? DEFAULT_COLORS : _t, defaultActiveTab = _a.defaultActiveTab, onChangeTabs = _a.onChangeTabs, _u = _a.onChange, onChange = _u === void 0 ? function () { return ({}); } : _u;
-    var _v = __read(React.useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _v[0], setActiveTab = _v[1];
+    var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.format, format = _c === void 0 ? 'rgb' : _c, _d = _a.gradient, gradient = _d === void 0 ? false : _d, _e = _a.solid, solid = _e === void 0 ? true : _e, _f = _a.debounceMS, debounceMS = _f === void 0 ? 300 : _f, _g = _a.debounce, debounce = _g === void 0 ? true : _g, _h = _a.showAlpha, showAlpha = _h === void 0 ? true : _h, _j = _a.showInputs, showInputs = _j === void 0 ? true : _j, _k = _a.showGradientResult, showGradientResult = _k === void 0 ? true : _k, _l = _a.showGradientStops, showGradientStops = _l === void 0 ? true : _l, _m = _a.showGradientMode, showGradientMode = _m === void 0 ? true : _m, _o = _a.showGradientAngle, showGradientAngle = _o === void 0 ? true : _o, _p = _a.showGradientPosition, showGradientPosition = _p === void 0 ? true : _p, _q = _a.allowAddGradientStops, allowAddGradientStops = _q === void 0 ? true : _q, _r = _a.popupWidth, popupWidth = _r === void 0 ? 267 : _r, _s = _a.colorBoardHeight, colorBoardHeight = _s === void 0 ? 120 : _s, _t = _a.defaultColors, defaultColors = _t === void 0 ? DEFAULT_COLORS : _t, defaultActiveTab = _a.defaultActiveTab, onChangeTabs = _a.onChangeTabs, _u = _a.onChange, onChange = _u === void 0 ? function () { return ({}); } : _u, _v = _a.showReset, showReset = _v === void 0 ? false : _v, onReset = _a.onReset;
+    var _w = __read(React.useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _w[0], setActiveTab = _w[1];
     var onChangeSolid = function (value) {
         onChange(value);
     };
@@ -8267,7 +8330,7 @@ var ColorPicker = function (_a) {
     };
     if (solid && gradient) {
         return (React__default["default"].createElement(ThemeProvider, null,
-            React__default["default"].createElement("div", { className: 'relative' },
+            React__default["default"].createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
                 React__default["default"].createElement(ThemeToggle, null),
                 React__default["default"].createElement(PopupTabs, { activeTab: activeTab, popupWidth: popupWidth },
                     React__default["default"].createElement(PopupTabsHeader, null,
@@ -8275,17 +8338,17 @@ var ColorPicker = function (_a) {
                         React__default["default"].createElement(PopupTabsHeaderLabel, { tabName: 'gradient', onClick: function () { return onChangeTab('gradient'); } }, "Gradient")),
                     React__default["default"].createElement(PopupTabsBody, null,
                         React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'solid' },
-                            React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })),
+                            React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })),
                         React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'gradient' },
-                            React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops, colorBoardHeight: colorBoardHeight })))))));
+                            React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })))))));
     }
     return (React__default["default"].createElement(ThemeProvider, null,
-        React__default["default"].createElement("div", { className: 'relative' },
+        React__default["default"].createElement("div", { className: 'relative dark react-iro-color-picker', "data-color-picker-theme": true },
             React__default["default"].createElement(ThemeToggle, null),
             solid || gradient ? (React__default["default"].createElement(PopupTabs, { popupWidth: popupWidth },
                 React__default["default"].createElement(PopupTabsBody, null,
-                    solid ? (React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })) : (React__default["default"].createElement(React.Fragment, null)),
-                    gradient ? (React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops, colorBoardHeight: colorBoardHeight })) : (React__default["default"].createElement(React.Fragment, null))))) : null)));
+                    solid ? (React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })) : (React__default["default"].createElement(React.Fragment, null)),
+                    gradient ? (React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })) : (React__default["default"].createElement(React.Fragment, null))))) : null)));
 };
 
 exports.ColorPicker = ColorPicker;