react-iro-gradient-picker 1.4.9 → 2.0.0

package/dist/index.js

@@ -129,7 +129,12 @@ var ThemeProvider = function (_a) {
     , defaultTheme = _b === void 0 ? 'dark' : _b // Dark theme as default
     ;
     var _c = __read(React.useState(function () {
-        // Check localStorage first, then use default
+        // If defaultTheme is explicitly provided (not default 'dark'), use it
+        // This allows stories to override localStorage
+        if (defaultTheme !== 'dark') {
+            return defaultTheme;
+        }
+        // Otherwise check localStorage first, then use default
         if (typeof window !== 'undefined') {
             var stored = localStorage.getItem('color-picker-theme');
             return stored || defaultTheme;
@@ -5093,10 +5098,10 @@ var InputRgba = function (_a) {
     };
     return (React__default["default"].createElement("div", { className: 'w-full' },
         React__default["default"].createElement("div", { className: 'flex flex-wrap gap-3' }, inputsData(inputsProps).map(function (item, index) {
-            var wrapClass = item.wrapClass, labelSymbol = item.labelSymbol, idInput = item.idInput, valueInput = item.valueInput, labelArea = item.labelArea, onChangeInput = item.onChangeInput, name = item.name;
-            return (React__default["default"].createElement("div", { key: index, className: cn('flex-1 min-w-0 px-2 pb-3', 'relative group', wrapClass) },
+            var wrapClass = item.wrapClass; item.labelSymbol; var idInput = item.idInput, valueInput = item.valueInput, labelArea = item.labelArea, onChangeInput = item.onChangeInput, name = item.name;
+            return (React__default["default"].createElement("div", { key: index, className: cn('flex-1 min-w-0', 'relative group', wrapClass) },
                 React__default["default"].createElement("div", { className: 'relative' },
-                    React__default["default"].createElement("input", { type: 'text', id: idInput, value: "#".concat(valueInput), "aria-label": labelArea, onChange: function (e) { return onChangeInput(e); }, onBlur: onHandleSubmit, onKeyPress: function (e) { return handlePressEnter(e, onHandleSubmit); }, className: cn('w-full py-2.5 text-md font-mono rounded-lg', 'focus:ring-2 focus:ring-blue-500/20 transition-all duration-200', labelSymbol && 'pl-4', name === 'alpha' && 'pr-7'), style: {
+                    React__default["default"].createElement("input", { type: 'text', id: idInput, value: "#".concat(valueInput), "aria-label": labelArea, onChange: function (e) { return onChangeInput(e); }, onBlur: onHandleSubmit, onKeyPress: function (e) { return handlePressEnter(e, onHandleSubmit); }, className: cn('w-full py-2.5 px-3 text-md font-mono rounded-lg', 'focus:ring-2 focus:ring-blue-500/20 transition-all duration-200', name === 'alpha' && 'pr-7'), style: {
                             backgroundColor: 'var(--colorpicker-input-bg)',
                             color: 'var(--colorpicker-text)',
                             border: 'none',
@@ -5109,20 +5114,49 @@ var InputRgba = function (_a) {
 
 // Lazy load iro.js to improve initial bundle size
 var iroPromise = null;
-var loadIro = function () {
-    if (!iroPromise) {
-        iroPromise = Promise.resolve().then(function () { return iro_es; });
-    }
-    return iroPromise;
-};
+var loadIro = function () { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        if (!iroPromise) {
+            iroPromise = Promise.resolve().then(function () { return iro_es; }).then(function (module) { return module.default || module; });
+        }
+        return [2 /*return*/, iroPromise];
+    });
+}); };
 var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
     var width = _a.width, _b = _a.color, color = _b === void 0 ? '#ffffff' : _b, colors = _a.colors, _c = _a.display, display = _c === void 0 ? 'block' : _c, id = _a.id, layout = _a.layout, _d = _a.layoutDirection, layoutDirection = _d === void 0 ? 'vertical' : _d, _e = _a.padding, padding = _e === void 0 ? 6 : _e, _f = _a.margin, margin = _f === void 0 ? 12 : _f, _g = _a.handleRadius, handleRadius = _g === void 0 ? 8 : _g, activeHandleRadius = _a.activeHandleRadius, handleSvg = _a.handleSvg, _h = _a.handleProps, handleProps = _h === void 0 ? { x: 0, y: 0 } : _h, _j = _a.wheelLightness, wheelLightness = _j === void 0 ? true : _j, _k = _a.wheelAngle, wheelAngle = _k === void 0 ? 0 : _k, _l = _a.wheelDirection, wheelDirection = _l === void 0 ? 'anticlockwise' : _l, sliderSize = _a.sliderSize, boxHeight = _a.boxHeight, onColorChange = _a.onColorChange, onInputChange = _a.onInputChange, onInputStart = _a.onInputStart, onInputMove = _a.onInputMove, onInputEnd = _a.onInputEnd, onMount = _a.onMount;
-    var theme = useTheme().theme;
+    var contextTheme = useTheme().theme;
     var containerRef = React.useRef(null);
     var colorPickerRef = React.useRef(null);
+    // Detect theme from parent element as fallback
+    var _m = __read(React.useState(contextTheme), 2), detectedTheme = _m[0], setDetectedTheme = _m[1];
+    React.useEffect(function () {
+        if (!containerRef.current)
+            return;
+        // Check parent elements for light/dark class
+        var element = containerRef.current;
+        var foundTheme = null;
+        while (element) {
+            if (element.classList.contains('light')) {
+                foundTheme = 'light';
+                break;
+            }
+            if (element.classList.contains('dark')) {
+                foundTheme = 'dark';
+                break;
+            }
+            element = element.parentElement;
+        }
+        if (foundTheme) {
+            setDetectedTheme(foundTheme);
+        }
+        else {
+            setDetectedTheme(contextTheme);
+        }
+    }, [contextTheme]);
+    var theme = detectedTheme;
     var isUpdatingColor = React.useRef(false);
-    var _m = __read(React.useState(width || 200), 2), containerWidth = _m[0], setContainerWidth = _m[1];
-    var _o = __read(React.useState(true), 2), isLoading = _o[0], setIsLoading = _o[1];
+    var _o = __read(React.useState(width || 200), 2), containerWidth = _o[0], setContainerWidth = _o[1];
+    var _p = __read(React.useState(true), 2), isLoading = _p[0], setIsLoading = _p[1];
     // Set up ResizeObserver to make the color picker responsive
     // Only when width prop is NOT provided (parent doesn't control width)
     React.useEffect(function () {
@@ -5171,7 +5205,7 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
     }); });
     // Create a shared picker creation function with enhanced error handling
     var createColorPicker = React.useCallback(function (pickerWidth) { return __awaiter(void 0, void 0, void 0, function () {
-        var currentContainer, iro, layoutConfig, themeBorderColor, themeBorderWidth, options, applyThemeStyles;
+        var iro, layoutConfig, themeBorderColor, themeBorderWidth, options, applyThemeStyles, observer;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -5203,14 +5237,14 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
                             console.warn('IroColorPicker: Error cleaning up existing picker:', error);
                         }
                     }
-                    currentContainer = containerRef.current;
-                    // IMPORTANT: Clear any existing DOM content first
-                    if (currentContainer) {
-                        currentContainer.innerHTML = '';
-                    }
                     return [4 /*yield*/, loadIro()];
                 case 1:
                     iro = _a.sent();
+                    // Check if component is still mounted after async load
+                    if (!containerRef.current) {
+                        console.warn('IroColorPicker: Component unmounted during iro.js load');
+                        return [2 /*return*/];
+                    }
                     layoutConfig = layout;
                     if (typeof layout === 'string') {
                         if (layout === 'wheel-value') {
@@ -5300,30 +5334,59 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
                     applyThemeStyles = function () {
                         if (!containerRef.current)
                             return;
-                        var svgElements = containerRef.current.querySelectorAll('svg');
-                        svgElements.forEach(function (svg) {
-                            // Remove default background
-                            svg.style.backgroundColor = 'transparent';
-                            // Style background rectangles
-                            var backgroundRects = svg.querySelectorAll('rect:first-child');
-                            backgroundRects.forEach(function (rect) {
-                                if (theme === 'light') {
-                                    rect.setAttribute('fill', 'white');
-                                    rect.setAttribute('stroke', '#e5e7eb');
-                                    rect.setAttribute('stroke-width', '1');
-                                }
-                                else {
-                                    rect.setAttribute('fill', '#374151');
-                                    rect.setAttribute('stroke', '#6b7280');
-                                    rect.setAttribute('stroke-width', '1');
-                                }
+                        // Target the main iro containers including IroColorPicker wrapper
+                        var pickers = containerRef.current.querySelectorAll('.IroColorPicker');
+                        var wheels = containerRef.current.querySelectorAll('.IroWheel');
+                        var sliders = containerRef.current.querySelectorAll('.IroSlider');
+                        var boxes = containerRef.current.querySelectorAll('.IroBox');
+                        if (theme === 'light') {
+                            // Light theme - keep iro elements transparent so container bg shows
+                            pickers.forEach(function (el) {
+                                el.style.setProperty('background-color', 'transparent', 'important');
                             });
-                        });
+                            wheels.forEach(function (el) {
+                                el.style.setProperty('background-color', 'transparent', 'important');
+                            });
+                            sliders.forEach(function (el) {
+                                el.style.setProperty('background-color', 'transparent', 'important');
+                            });
+                            boxes.forEach(function (el) {
+                                el.style.setProperty('background-color', 'transparent', 'important');
+                            });
+                        }
+                        else {
+                            // Dark theme - transparent to let parent bg show
+                            pickers.forEach(function (el) {
+                                el.style.setProperty('background-color', 'transparent', 'important');
+                            });
+                            wheels.forEach(function (el) {
+                                el.style.setProperty('background-color', 'transparent', 'important');
+                            });
+                            sliders.forEach(function (el) {
+                                el.style.setProperty('background-color', 'transparent', 'important');
+                            });
+                            boxes.forEach(function (el) {
+                                el.style.setProperty('background-color', 'transparent', 'important');
+                            });
+                        }
                     };
-                    // Apply styles immediately and after a short delay
+                    // Apply styles immediately
                     applyThemeStyles();
-                    setTimeout(applyThemeStyles, 100);
-                    // Set up event listeners
+                    observer = new MutationObserver(function () {
+                        applyThemeStyles();
+                    });
+                    if (containerRef.current) {
+                        observer.observe(containerRef.current, {
+                            childList: true,
+                            subtree: true,
+                            attributes: true
+                        });
+                    }
+                    // Apply on timers as fallback
+                    setTimeout(applyThemeStyles, 50);
+                    setTimeout(applyThemeStyles, 200);
+                    setTimeout(applyThemeStyles, 500);
+                    // Set up event listeners BEFORE returning the cleanup function
                     if (onColorChange) {
                         colorPickerRef.current.on('color:change', function (color) {
                             if (!isUpdatingColor.current) {
@@ -5346,7 +5409,8 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
                     if (onMount) {
                         colorPickerRef.current.on('mount', onMount);
                     }
-                    return [2 /*return*/, currentContainer];
+                    // Cleanup observer on unmount
+                    return [2 /*return*/, function () { return observer.disconnect(); }];
             }
         });
     }); }, [
@@ -5376,7 +5440,7 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
         onMount
     ]);
     // Cleanup function
-    var cleanup = React.useCallback(function () {
+    React.useCallback(function () {
         if (colorPickerRef.current) {
             try {
                 // Clean up event listeners
@@ -5441,13 +5505,12 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
             }, 100); // Increased from 50ms to 100ms
             return function () { return clearTimeout(timeoutId); };
         };
-        var cleanup = createWithRetry();
+        var cleanupFn = createWithRetry();
         return function () {
-            if (cleanup)
-                cleanup();
-            cleanup();
+            if (cleanupFn)
+                cleanupFn();
         };
-    }, [width, theme, createColorPicker, cleanup]);
+    }, [width, theme, createColorPicker]);
     // useEffect for when containerWidth is used (internal ResizeObserver)
     React.useEffect(function () {
         if (width)
@@ -5476,13 +5539,12 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
             }, 100); // Increased from 50ms to 100ms
             return function () { return clearTimeout(timeoutId); };
         };
-        var cleanup = createWithRetry();
+        var cleanupFn = createWithRetry();
         return function () {
-            if (cleanup)
-                cleanup();
-            cleanup();
+            if (cleanupFn)
+                cleanupFn();
         };
-    }, [containerWidth, theme, createColorPicker, cleanup, width]);
+    }, [containerWidth, theme, createColorPicker, width]);
     // Update color when prop changes
     React.useEffect(function () {
         if (colorPickerRef.current && !colors && color) {
@@ -5525,6 +5587,59 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
             });
         }
     }, [colors]);
+    // Apply theme styles when theme changes without recreating picker
+    React.useEffect(function () {
+        if (!colorPickerRef.current || !containerRef.current)
+            return;
+        var applyThemeStyles = function () {
+            if (!containerRef.current)
+                return;
+            var pickers = containerRef.current.querySelectorAll('.IroColorPicker');
+            var wheels = containerRef.current.querySelectorAll('.IroWheel');
+            var sliders = containerRef.current.querySelectorAll('.IroSlider');
+            var boxes = containerRef.current.querySelectorAll('.IroBox');
+            if (theme === 'light') {
+                pickers.forEach(function (el) {
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+                wheels.forEach(function (el) {
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+                sliders.forEach(function (el) {
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+                boxes.forEach(function (el) {
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+                var borders = containerRef.current.querySelectorAll('.IroWheelBorder');
+                borders.forEach(function (el) {
+                    el.style.setProperty('border-color', '#e5e7eb', 'important');
+                });
+            }
+            else {
+                // Dark theme - transparent to let parent bg show
+                pickers.forEach(function (el) {
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+                wheels.forEach(function (el) {
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+                sliders.forEach(function (el) {
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+                boxes.forEach(function (el) {
+                    el.style.setProperty('background-color', 'transparent', 'important');
+                });
+            }
+        };
+        applyThemeStyles();
+        var timer1 = setTimeout(applyThemeStyles, 50);
+        var timer2 = setTimeout(applyThemeStyles, 150);
+        return function () {
+            clearTimeout(timer1);
+            clearTimeout(timer2);
+        };
+    }, [theme]);
     return (React__default["default"].createElement("div", { ref: containerRef, style: {
             display: 'flex',
             width: '100%',
@@ -5532,8 +5647,9 @@ var IroColorPicker$1 = React.forwardRef(function (_a, ref) {
             minWidth: 0,
             overflow: 'hidden',
             justifyContent: 'center',
-            minHeight: isLoading ? (width || containerWidth) : 'auto',
-            position: 'relative'
+            minHeight: isLoading ? width || containerWidth : 'auto',
+            position: 'relative',
+            backgroundColor: 'transparent'
         } }, isLoading && (React__default["default"].createElement("div", { style: {
             position: 'absolute',
             inset: 0,
@@ -6362,7 +6478,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, _s = _a.popupWidth, popupWidth = _s === void 0 ? 280 : _s;
+    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, onColorChangeImmediate = _a.onColorChangeImmediate, _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 () {
@@ -6581,6 +6697,13 @@ var IroGradient = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [debounceColor]);
+    // Call immediate callback for real-time updates (e.g., wrapper background)
+    React.useEffect(function () {
+        if (onColorChangeImmediate && color.gradient) {
+            onColorChangeImmediate(color.gradient);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [color.gradient]);
     // Initialize iro picker with current activeColor when component mounts or picker becomes ready
     React.useEffect(function () {
         var initializeIroPicker = function () {
@@ -6767,7 +6890,8 @@ var IroGradient = function (_a) {
         } },
         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
+                    height: colorBoardHeight + pickerWidth,
+                    backgroundColor: 'transparent'
                 } },
                 React__default["default"].createElement(IroColorPicker$1, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleIroColorChange }))),
         React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass px-4' },
@@ -6791,7 +6915,7 @@ 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, _k = _a.popupWidth, popupWidth = _k === void 0 ? 280 : _k;
+    var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, onColorChangeImmediate = _a.onColorChangeImmediate, _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
@@ -6917,6 +7041,13 @@ var IroSolidColorPicker = function (_a) {
         };
         setInit(false);
         setColor(newColor);
+        // Call immediate callback for real-time updates (e.g., wrapper background)
+        if (onColorChangeImmediate) {
+            var rgba = tinycolor(newColor.hex);
+            rgba.setAlpha(newColor.alpha / 100);
+            var formattedColor = checkFormat(rgba.toRgbString(), format, showAlpha, newColor.alpha);
+            onColorChangeImmediate(formattedColor);
+        }
     };
     var handleInputChange = function (newColor) {
         setColor(newColor);
@@ -7010,18 +7141,21 @@ var IroSolidColorPicker = function (_a) {
             minWidth: 0,
             boxSizing: 'border-box'
         } },
-        React__default["default"].createElement("div", { className: 'relative overflow-hidden' },
-            React__default["default"].createElement("div", { className: 'flex justify-center items-center rounded-lg colorpicker-glass w-full overflow-hidden', style: {
+        React__default["default"].createElement("div", { className: 'relative overflow-hidden', style: { backgroundColor: 'transparent' } },
+            React__default["default"].createElement("div", { className: 'flex justify-center items-center rounded-lg w-full overflow-hidden', style: {
                     height: Math.max(pickerWidth + 80, 220), // Better height calculation
                     width: '100%',
                     minWidth: 0,
                     maxWidth: '100%',
-                    boxSizing: 'border-box'
+                    boxSizing: 'border-box',
+                    backgroundColor: 'var(--colorpicker-panel-bg)',
+                    border: '1px solid var(--colorpicker-border)'
                 } },
                 React__default["default"].createElement("div", { style: {
                         width: pickerWidth,
                         height: 'fit-content',
-                        maxWidth: '90%'
+                        maxWidth: '90%',
+                        backgroundColor: 'transparent'
                     } },
                     React__default["default"].createElement(IroColorPicker$1, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleColorChange })))),
         React__default["default"].createElement("div", { className: 'border-t pt-4 colorpicker-glass rounded-lg' },
@@ -7046,7 +7180,11 @@ var PopupTabs = function (_a) {
             activeTab: activeTab
         });
     });
-    return (React__default["default"].createElement("div", { className: 'relative rounded-md', style: { width: "".concat(popupWidth, "px") } }, childrenContact));
+    return (React__default["default"].createElement("div", { className: 'relative rounded-md', style: {
+            width: "".concat(popupWidth, "px"),
+            backgroundColor: 'var(--colorpicker-bg)',
+            color: 'var(--colorpicker-text)'
+        } }, childrenContact));
 };
 var PopupTabsHeaderLabel = function (_a) {
     var children = _a.children, activeTab = _a.activeTab, tabName = _a.tabName, onClick = _a.onClick;
@@ -7061,7 +7199,7 @@ var PopupTabsHeader = function (_a) {
             activeTab: activeTab
         });
     });
-    return (React__default["default"].createElement("div", { className: 'w-full h-12 flex rounded-md rounded-b-none overflow-hidden colorpicker-glass shadow-inner' }, childrenContact));
+    return (React__default["default"].createElement("div", { className: 'w-full h-12 flex rounded-md rounded-b-none overflow-hidden colorpicker-glass shadow-inner', style: { backgroundColor: 'var(--colorpicker-panel-bg)' } }, childrenContact));
 };
 var PopupTabsBody = function (_a) {
     var children = _a.children, activeTab = _a.activeTab;
@@ -7070,7 +7208,10 @@ var PopupTabsBody = function (_a) {
             activeTab: activeTab
         });
     });
-    return React__default["default"].createElement("div", { className: 'p-4' }, childrenContact);
+    return (React__default["default"].createElement("div", { className: 'p-4', style: {
+            backgroundColor: 'var(--colorpicker-bg)',
+            color: 'var(--colorpicker-text)'
+        } }, childrenContact));
 };
 var PopupTabsBodyItem = function (_a) {
     var children = _a.children, activeTab = _a.activeTab, tabName = _a.tabName;
@@ -7081,14 +7222,22 @@ 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, _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;
+    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, 
+    // Theme prop
+    _x = _a.theme, 
+    // Theme prop
+    theme = _x === void 0 ? 'dark' : _x, 
+    // Wrapper props
+    _y = _a.showWrapper, 
+    // Wrapper props
+    showWrapper = _y === void 0 ? false : _y, wrapperBackground = _a.wrapperBackground, _z = _a.wrapperClassName, wrapperClassName = _z === void 0 ? '' : _z, _0 = _a.wrapperHeight, wrapperHeight = _0 === void 0 ? 'auto' : _0, _1 = _a.wrapperWidth, wrapperWidth = _1 === void 0 ? 'auto' : _1, _2 = _a.wrapperPadding, wrapperPadding = _2 === void 0 ? '24px' : _2, _3 = _a.wrapperRounded, wrapperRounded = _3 === void 0 ? true : _3;
     // 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 _x = __read(React.useState(initialTab), 2), activeTab = _x[0], setActiveTab = _x[1];
+    var _4 = __read(React.useState(initialTab), 2), activeTab = _4[0], setActiveTab = _4[1];
     // Track the gradient value separately - use default gradient at specified index or fallback
     var getDefaultGradient = function () {
         var gradients = defaultColors.filter(function (color) {
@@ -7102,9 +7251,11 @@ var ColorPicker = function (_a) {
         }
         return 'linear-gradient(90deg, rgb(255, 177, 153) 0%, rgb(255, 8, 68) 100%)';
     };
-    var _y = __read(React.useState(isGradientObject(value) || getIndexActiveTag(value) === 'gradient'
+    var _5 = __read(React.useState(isGradientObject(value) || getIndexActiveTag(value) === 'gradient'
         ? cssValue
-        : getDefaultGradient()), 2), gradientValue = _y[0], setGradientValue = _y[1];
+        : getDefaultGradient()), 2), gradientValue = _5[0], setGradientValue = _5[1];
+    // Track current color for wrapper background (updates in real-time)
+    var _6 = __read(React.useState(cssValue), 2), currentWrapperColor = _6[0], setCurrentWrapperColor = _6[1];
     // Auto-switch tab when value changes from object to string or vice versa
     React__default["default"].useEffect(function () {
         if (isGradientObject(value) && activeTab !== 'gradient') {
@@ -7119,12 +7270,16 @@ var ColorPicker = function (_a) {
             // Update gradient value if external value is a gradient
             setGradientValue(cssValue);
         }
+        // Also update wrapper color when value prop changes
+        setCurrentWrapperColor(cssValue);
     }, [value, cssValue, activeTab, onChangeTabs]);
     var onChangeSolid = function (value) {
+        setCurrentWrapperColor(value); // Update wrapper immediately
         onChange(value);
     };
     var onChangeGradient = function (value) {
         setGradientValue(value); // Track gradient changes
+        setCurrentWrapperColor(value); // Update wrapper immediately
         onChange(value);
     };
     var onChangeTab = function (tab) {
@@ -7137,24 +7292,71 @@ var ColorPicker = function (_a) {
             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(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, popupWidth: popupWidth })),
-                        React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'gradient' },
-                            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 }, solid || gradient ? (React__default["default"].createElement(PopupTabs, { popupWidth: popupWidth },
+    // Wrapper styling - use currentWrapperColor for real-time updates
+    var wrapperStyle = showWrapper
+        ? {
+            background: wrapperBackground || currentWrapperColor || 'transparent',
+            height: wrapperHeight,
+            width: wrapperWidth,
+            padding: wrapperPadding,
+            borderRadius: wrapperRounded ? '1rem' : '0',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            minHeight: 'auto',
+            textAlign: 'center',
+            transition: 'background 0.3s ease',
+            boxSizing: 'border-box'
+        }
+        : undefined;
+    // Theme-specific inline styles for maximum specificity
+    var themeStyles = theme === 'light'
+        ? {
+            backgroundColor: '#ffffff',
+            color: '#1a1d23',
+            '--colorpicker-bg': '#ffffff',
+            '--colorpicker-text': '#1a1d23',
+            '--colorpicker-panel-bg': '#f8f9fa',
+            '--colorpicker-input-bg': '#f3f4f6',
+            '--colorpicker-border': '#e5e7eb',
+            '--colorpicker-input-border': '#d1d5db',
+            '--color-background': '#ffffff',
+            '--color-foreground': '#1a1d23',
+            '--color-muted-foreground': '#6b7280',
+            '--colorpicker-shadow': '0 4px 6px -1px rgb(0 0 0 / 0.1)'
+        }
+        : {
+            backgroundColor: 'rgba(26, 26, 28, 0.8)',
+            color: '#f7f8f9',
+            '--colorpicker-bg': 'rgba(26, 26, 28, 0.8)',
+            '--colorpicker-text': '#ffffff',
+            '--colorpicker-panel-bg': 'rgba(0, 0, 0, 1)',
+            '--colorpicker-input-bg': 'rgba(39, 39, 42, 0.8)',
+            '--colorpicker-border': 'rgba(39, 39, 42, 0.8)',
+            '--colorpicker-input-border': 'rgba(39, 39, 42, 0.8)',
+            '--color-background': '#000000',
+            '--color-foreground': '#f7f8f9',
+            '--color-muted-foreground': '#a1a1aa'
+        };
+    var pickerContent = solid && gradient ? (React__default["default"].createElement(ThemeProvider, { defaultTheme: theme },
+        React__default["default"].createElement("div", { className: "relative ".concat(theme, " iro-gradient-picker"), "data-color-picker-theme": true, style: themeStyles },
+            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, onColorChangeImmediate: setCurrentWrapperColor, 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, onColorChangeImmediate: setCurrentWrapperColor, 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 }))))))) : (React__default["default"].createElement(ThemeProvider, { defaultTheme: theme },
+        React__default["default"].createElement("div", { className: "relative ".concat(theme, " iro-gradient-picker"), "data-color-picker-theme": true, style: themeStyles }, 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)));
+                solid ? (React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, onColorChangeImmediate: setCurrentWrapperColor, 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, onColorChangeImmediate: setCurrentWrapperColor, 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)));
+    if (showWrapper) {
+        return (React__default["default"].createElement("div", { className: "iro-picker-wrapper ".concat(wrapperClassName), style: wrapperStyle }, pickerContent));
+    }
+    return pickerContent;
 };
 
 // Simple sun and moon icons as SVG components