react-iro-gradient-picker 1.3.1 → 1.4.1

package/dist/index.js

@@ -123,23 +123,6 @@ var ThemeProvider = function (_a) {
     return (React__default["default"].createElement(ThemeContext.Provider, { value: value }, children));
 };
 
-// Simple sun and moon icons as SVG components
-var SunIcon = function (_a) {
-    var className = _a.className;
-    return (React__default["default"].createElement("svg", { className: className, fill: 'currentColor', viewBox: '0 0 20 20' },
-        React__default["default"].createElement("path", { fillRule: 'evenodd', d: 'M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z', clipRule: 'evenodd' })));
-};
-var MoonIcon = function (_a) {
-    var className = _a.className;
-    return (React__default["default"].createElement("svg", { className: className, fill: 'currentColor', viewBox: '0 0 20 20' },
-        React__default["default"].createElement("path", { d: 'M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z' })));
-};
-var ThemeToggle = function (_a) {
-    var className = _a.className;
-    var _b = useTheme(), theme = _b.theme, toggleTheme = _b.toggleTheme;
-    return (React__default["default"].createElement("button", { onClick: toggleTheme, className: "theme-toggle ".concat(className || ''), "aria-label": "Switch to ".concat(theme === 'light' ? 'dark' : 'light', " theme"), title: "Switch to ".concat(theme === 'light' ? 'dark' : 'light', " theme") }, theme === 'light' ? (React__default["default"].createElement(MoonIcon, { className: 'theme-toggle-icon' })) : (React__default["default"].createElement(SunIcon, { className: 'theme-toggle-icon' }))));
-};
-
 /*!
  * iro.js v5.5.2
  * 2016-2021 James Daniel
@@ -7351,9 +7334,9 @@ var shallowEqual = function (object1, object2) {
 };
 
 var DefaultColorPanel = function (_a) {
-    var _b = _a.defaultColors, defaultColors = _b === void 0 ? [] : _b, setColor = _a.setColor, setActiveColor = _a.setActiveColor, setInit = _a.setInit, colorType = _a.colorType;
-    var _c = __read(React.useState(-1), 2), active = _c[0], setActive = _c[1];
-    var _d = __read(React.useState([]), 2), formatedDefColors = _d[0], setFormatedDefColors = _d[1];
+    var _b = _a.defaultColors, defaultColors = _b === void 0 ? [] : _b, setColor = _a.setColor, setActiveColor = _a.setActiveColor, setInit = _a.setInit, colorType = _a.colorType, currentValue = _a.currentValue, _c = _a.size, size = _c === void 0 ? 'default' : _c;
+    var _d = __read(React.useState(-1), 2), active = _d[0], setActive = _d[1];
+    var _e = __read(React.useState([]), 2), formatedDefColors = _e[0], setFormatedDefColors = _e[1];
     React.useEffect(function () {
         if (colorType === 'gradient') {
             var validGradients = checkValidColorsArray(defaultColors, 'grad');
@@ -7372,12 +7355,27 @@ var DefaultColorPanel = function (_a) {
                 };
             });
             setFormatedDefColors(displayGradients);
+            // Set initial active state if currentValue matches a gradient
+            if (currentValue) {
+                var matchIndex = validGradients.findIndex(function (grad) { return grad === currentValue; });
+                if (matchIndex !== -1) {
+                    setActive(matchIndex);
+                }
+            }
         }
         else {
-            setFormatedDefColors(checkValidColorsArray(defaultColors, 'solid'));
+            var solidColors = checkValidColorsArray(defaultColors, 'solid');
+            setFormatedDefColors(solidColors);
+            // Set initial active state if currentValue matches a solid color
+            if (currentValue) {
+                var matchIndex = solidColors.findIndex(function (color) { return color.toLowerCase() === currentValue.toLowerCase(); });
+                if (matchIndex !== -1) {
+                    setActive(matchIndex);
+                }
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [currentValue]);
     var onChooseColor = function (item, index) {
         // Allow re-applying the same color (removed guard clause that prevented this)
         // This enables users to reset back to a popular color after making changes
@@ -7442,14 +7440,21 @@ var DefaultColorPanel = function (_a) {
     if (!Array.isArray(defaultColors) || !defaultColors.length) {
         return null;
     }
+    // Determine sizing classes based on size prop
+    var sizeClasses = {
+        compact: { button: 'w-8 h-8', gap: 'gap-1.5' },
+        default: { button: 'w-10 h-10', gap: 'gap-4' },
+        large: { button: 'w-12 h-12', gap: 'gap-5' }
+    };
+    var _f = sizeClasses[size], buttonSize = _f.button, gapSize = _f.gap;
     return (React__default["default"].createElement("div", { className: 'w-full' },
         React__default["default"].createElement("h3", { className: 'text-sm font-medium colorpicker-text' }, "Popular Colors"),
-        React__default["default"].createElement("div", { className: 'grid grid-cols-5 gap-4 py-4' }, formatedDefColors.map(function (item, index) {
+        React__default["default"].createElement("div", { className: cn('grid grid-cols-5 py-4', gapSize) }, formatedDefColors.map(function (item, index) {
             switch (colorType) {
                 case 'gradient':
                     if (typeof item !== 'string') {
                         var gradient = item.gradient;
-                        return (React__default["default"].createElement("button", { type: 'button', onClick: function () { return onChooseColor(item, index); }, key: item.gradient + index, className: cn('aspect-square w-10 h-10 rounded-md border-2 transition-all duration-200', 'hover:scale-110 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50', 'relative overflow-hidden group', active === index
+                        return (React__default["default"].createElement("button", { type: 'button', onClick: function () { return onChooseColor(item, index); }, key: item.gradient + index, className: cn('aspect-square rounded-md border-2 transition-all duration-200', buttonSize, 'hover:scale-110 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50', 'relative overflow-hidden group', active === index
                                 ? 'border-blue-500 dark:border-blue-400 shadow-lg scale-105'
                                 : 'border-slate-200 dark:border-slate-600 hover:border-slate-300 dark:hover:border-slate-500'), style: { background: gradient } },
                             React__default["default"].createElement("div", { className: 'absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200' })));
@@ -7459,7 +7464,7 @@ var DefaultColorPanel = function (_a) {
                     }
                 case 'solid':
                     if (typeof item === 'string') {
-                        return (React__default["default"].createElement("button", { type: 'button', onClick: function () { return onChooseColor(item, index); }, key: item + index, className: cn('aspect-square w-10 h-10 rounded-md border-2 transition-all duration-200', 'hover:scale-110 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50', 'relative overflow-hidden group', active === index
+                        return (React__default["default"].createElement("button", { type: 'button', onClick: function () { return onChooseColor(item, index); }, key: item + index, className: cn('aspect-square rounded-md border-2 transition-all duration-200', buttonSize, 'hover:scale-110 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50', 'relative overflow-hidden group', active === index
                                 ? 'border-blue-500 dark:border-blue-400 shadow-lg scale-105'
                                 : 'border-slate-200 dark:border-slate-600 hover:border-slate-300 dark:hover:border-slate-500'), style: {
                                 background: item,
@@ -8026,7 +8031,7 @@ 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, _r = _a.showReset, showReset = _r === void 0 ? false : _r, onReset = _a.onReset;
+    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, _s = _a.popupWidth, popupWidth = _s === void 0 ? 280 : _s;
     // Store the initial value for reset functionality
     var initialValue = React.useRef(value);
     var parsedColors = React.useCallback(function () {
@@ -8087,13 +8092,13 @@ var IroGradient = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
+    var _t = parsedColors(), stops = _t.stops, type = _t.type, modifier = _t.modifier;
     var iroPickerRef = React.useRef(null);
     var containerRef = React.useRef(null);
     var isUpdatingFromGradientStop = React.useRef(false);
     var lastUpdateAttempt = React.useRef(0); // Track last update attempt
     var isPickerInitialized = React.useRef(false); // Track if picker is already initialized
-    var _t = __read(React.useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
+    var _u = __read(React.useState(200), 2), pickerWidth = _u[0], setPickerWidth = _u[1];
     // Safe extraction of stop data with fallbacks
     var safeStops = Array.isArray(stops) && stops.length > 0
         ? stops
@@ -8150,18 +8155,18 @@ var IroGradient = function (_a) {
         resizeObserver.observe(containerRef.current);
         return function () { return resizeObserver.disconnect(); };
     }, []);
-    var _u = __read(React.useState({
+    var _v = __read(React.useState({
         gradient: value,
         type: type,
         modifier: modifier,
         stops: safeStops
-    }), 2), color = _u[0], setColor = _u[1];
-    var _v = __read(React.useState({
+    }), 2), color = _v[0], setColor = _v[1];
+    var _w = __read(React.useState({
         hex: activeStop,
         alpha: activeAlpha,
         loc: safeStops[activeStopIndex][1],
         index: activeStopIndex
-    }), 2), activeColor = _v[0], setActiveColor = _v[1];
+    }), 2), activeColor = _w[0], setActiveColor = _w[1];
     var debounceColor = useDebounce(color, debounceMS);
     // Update iro picker color
     var updateIroPickerColor = React.useCallback(function (colorData, retryCount) {
@@ -8385,6 +8390,13 @@ var IroGradient = function (_a) {
     };
     // Update iro picker when color is selected from default colors panel
     var handleColorFromPanel = function (newColor) {
+        console.log('handleColorFromPanel called with:', newColor);
+        // Ensure the gradient CSS string is properly set
+        if ((newColor === null || newColor === void 0 ? void 0 : newColor.stops) && !newColor.gradient) {
+            // Reconstruct the gradient string if missing
+            newColor.gradient = getGradient(newColor.type || 'linear', newColor.stops, newColor.modifier || 90, format, showAlpha);
+            console.log('Reconstructed gradient:', newColor.gradient);
+        }
         setColor(newColor);
         if (newColor === null || newColor === void 0 ? void 0 : newColor.stops) {
             var lastStop = rgbaToArray(newColor.stops[newColor.stops.length - 1][0]);
@@ -8395,6 +8407,7 @@ var IroGradient = function (_a) {
                 loc: newColor.stops[newColor.stops.length - 1][1],
                 index: newColor.stops.length - 1
             };
+            console.log('Setting activeColor to:', newActiveColor);
             setActiveColor(newActiveColor);
             // Note: useEffect will handle iro picker update automatically when activeColor changes
         }
@@ -8451,7 +8464,11 @@ var IroGradient = function (_a) {
         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 px-2' },
-            React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
+            React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient', currentValue: color.gradient, size: popupWidth < 250
+                    ? 'compact'
+                    : popupWidth <= 350
+                        ? 'default'
+                        : 'large' })),
         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) {
@@ -8465,14 +8482,14 @@ var IroGradient = function (_a) {
 };
 
 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, _j = _a.showReset, showReset = _j === void 0 ? false : _j, onReset = _a.onReset;
+    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, _k = _a.popupWidth, popupWidth = _k === void 0 ? 280 : _k;
     var node = React.useRef(null);
     var iroPickerRef = React.useRef(null);
     // 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 _l = __read(React.useState(true), 2), init = _l[0], setInit = _l[1];
+    var _m = __read(React.useState(getHexAlpha(value)), 2), color = _m[0], setColor = _m[1];
+    var _o = __read(React.useState(200), 2), pickerWidth = _o[0], setPickerWidth = _o[1];
     var pickerWidthRef = React.useRef(200);
     // Update ref when state changes
     React.useEffect(function () {
@@ -8718,7 +8735,11 @@ 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' })),
+            React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: setInit, colorType: 'solid', currentValue: color.hex, size: popupWidth < 250
+                    ? 'compact'
+                    : popupWidth <= 350
+                        ? 'default'
+                        : 'large' })),
         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 })),
@@ -8770,27 +8791,50 @@ 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, _v = _a.showReset, showReset = _v === void 0 ? false : _v, onReset = _a.onReset;
+    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, _u = _a.defaultGradientIndex, defaultGradientIndex = _u === void 0 ? 7 : _u, onChangeTabs = _a.onChangeTabs, _v = _a.onChange, onChange = _v === void 0 ? function () { return ({}); } : _v, _w = _a.showReset, showReset = _w === void 0 ? false : _w, onReset = _a.onReset;
     // Convert object value to CSS string for internal use
     var cssValue = normalizeGradientValue(value);
     // Auto-switch to gradient tab if receiving gradient object
     var initialTab = isGradientObject(value)
         ? 'gradient'
         : defaultActiveTab || getIndexActiveTag(value);
-    var _w = __read(React.useState(initialTab), 2), activeTab = _w[0], setActiveTab = _w[1];
+    var _x = __read(React.useState(initialTab), 2), activeTab = _x[0], setActiveTab = _x[1];
+    // Track the gradient value separately - use default gradient at specified index or fallback
+    var getDefaultGradient = function () {
+        var gradients = defaultColors.filter(function (color) {
+            return typeof color === 'string' &&
+                (color.includes('linear-gradient') || color.includes('radial-gradient'));
+        });
+        // Use the defaultGradientIndex if valid, otherwise fallback
+        if (gradients.length > 0) {
+            var index = Math.max(0, Math.min(defaultGradientIndex, gradients.length - 1));
+            return gradients[index];
+        }
+        return 'linear-gradient(90deg, rgb(255, 177, 153) 0%, rgb(255, 8, 68) 100%)';
+    };
+    var _y = __read(React.useState(isGradientObject(value) || getIndexActiveTag(value) === 'gradient'
+        ? cssValue
+        : getDefaultGradient()), 2), gradientValue = _y[0], setGradientValue = _y[1];
     // Auto-switch tab when value changes from object to string or vice versa
     React__default["default"].useEffect(function () {
         if (isGradientObject(value) && activeTab !== 'gradient') {
             setActiveTab('gradient');
+            setGradientValue(cssValue); // Update gradient value when external value is gradient
             if (typeof onChangeTabs === 'function') {
                 onChangeTabs('gradient');
             }
         }
-    }, [value, activeTab, onChangeTabs]);
+        else if (isGradientObject(value) ||
+            getIndexActiveTag(value) === 'gradient') {
+            // Update gradient value if external value is a gradient
+            setGradientValue(cssValue);
+        }
+    }, [value, cssValue, activeTab, onChangeTabs]);
     var onChangeSolid = function (value) {
         onChange(value);
     };
     var onChangeGradient = function (value) {
+        setGradientValue(value); // Track gradient changes
         onChange(value);
     };
     var onChangeTab = function (tab) {
@@ -8798,28 +8842,46 @@ var ColorPicker = function (_a) {
         if (typeof onChangeTabs === 'function' && !!onChangeTabs) {
             onChangeTabs(tab);
         }
+        // When switching to gradient tab from solid, emit the default gradient
+        if (tab === 'gradient' && activeTab === 'solid') {
+            onChange(gradientValue);
+        }
     };
     if (solid && gradient) {
         return (React__default["default"].createElement(ThemeProvider, null,
             React__default["default"].createElement("div", { className: 'relative dark iro-gradient-picker', "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,
                         React__default["default"].createElement(PopupTabsHeaderLabel, { tabName: 'solid', onClick: function () { return onChangeTab('solid'); } }, "Solid"),
                         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: cssValue, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })),
+                            React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: cssValue, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset, popupWidth: popupWidth })),
                         React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'gradient' },
-                            React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: cssValue, 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(IroGradient, { onChange: onChangeGradient, value: gradientValue, 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, popupWidth: popupWidth })))))));
     }
     return (React__default["default"].createElement(ThemeProvider, null,
-        React__default["default"].createElement("div", { className: 'relative dark iro-gradient-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: cssValue, 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: cssValue, 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)));
+        React__default["default"].createElement("div", { className: 'relative dark iro-gradient-picker', "data-color-picker-theme": true }, solid || gradient ? (React__default["default"].createElement(PopupTabs, { popupWidth: popupWidth },
+            React__default["default"].createElement(PopupTabsBody, null,
+                solid ? (React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: cssValue, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset, popupWidth: popupWidth })) : (React__default["default"].createElement(React.Fragment, null)),
+                gradient ? (React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: cssValue, 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, popupWidth: popupWidth })) : (React__default["default"].createElement(React.Fragment, null))))) : null)));
+};
+
+// Simple sun and moon icons as SVG components
+var SunIcon = function (_a) {
+    var className = _a.className;
+    return (React__default["default"].createElement("svg", { className: className, fill: 'currentColor', viewBox: '0 0 20 20' },
+        React__default["default"].createElement("path", { fillRule: 'evenodd', d: 'M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z', clipRule: 'evenodd' })));
+};
+var MoonIcon = function (_a) {
+    var className = _a.className;
+    return (React__default["default"].createElement("svg", { className: className, fill: 'currentColor', viewBox: '0 0 20 20' },
+        React__default["default"].createElement("path", { d: 'M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z' })));
+};
+var ThemeToggle = function (_a) {
+    var className = _a.className;
+    var _b = useTheme(), theme = _b.theme, toggleTheme = _b.toggleTheme;
+    return (React__default["default"].createElement("button", { onClick: toggleTheme, className: "theme-toggle ".concat(className || ''), "aria-label": "Switch to ".concat(theme === 'light' ? 'dark' : 'light', " theme"), title: "Switch to ".concat(theme === 'light' ? 'dark' : 'light', " theme") }, theme === 'light' ? (React__default["default"].createElement(MoonIcon, { className: 'theme-toggle-icon' })) : (React__default["default"].createElement(SunIcon, { className: 'theme-toggle-icon' }))));
 };
 
 exports.ColorPicker = ColorPicker;