react-iro-gradient-picker 1.0.2 → 1.0.3

package/dist/index.es.js

@@ -91,13 +91,18 @@ var ThemeProvider = function (_a) {
         return defaultTheme;
     }), 2), theme = _c[0], setTheme = _c[1];
     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'); });
@@ -7947,9 +7952,9 @@ var IroGradient = function (_a) {
                     height: colorBoardHeight + pickerWidth
                 } },
                 React.createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleIroColorChange }))),
-        React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
+        React.createElement("div", { className: 'rounded-lg colorpicker-glass px-4' },
             React.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.createElement("div", { className: 'pt-4' },
+        React.createElement("div", { className: 'pt-4 px-2' },
             React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
         showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
             React.createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
@@ -8208,7 +8213,7 @@ var PopupTabs = function (_a) {
             activeTab: activeTab
         });
     });
-    return (React.createElement("div", { className: 'relative rounded-md colorpicker-glass', style: { width: "".concat(popupWidth, "px") } }, childrenContact));
+    return (React.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;
@@ -8259,7 +8264,7 @@ var ColorPicker = function (_a) {
     };
     if (solid && gradient) {
         return (React.createElement(ThemeProvider, null,
-            React.createElement("div", { className: 'relative' },
+            React.createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
                 React.createElement(ThemeToggle, null),
                 React.createElement(PopupTabs, { activeTab: activeTab, popupWidth: popupWidth },
                     React.createElement(PopupTabsHeader, null,
@@ -8272,7 +8277,7 @@ var ColorPicker = function (_a) {
                             React.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 })))))));
     }
     return (React.createElement(ThemeProvider, null,
-        React.createElement("div", { className: 'relative' },
+        React.createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
             React.createElement(ThemeToggle, null),
             solid || gradient ? (React.createElement(PopupTabs, { popupWidth: popupWidth },
                 React.createElement(PopupTabsBody, null,