react-iro-gradient-picker 1.0.1 → 1.0.3

package/README.md

@@ -1,4 +1,5 @@
 <!-- markdownlint-disable -->
+
 # React Iro Gradient Picker
 
 ## ✨ Modern React Color Picker with Complete Dark Theme Support! ✨
@@ -27,8 +28,9 @@ A beautiful, modern React gradient and solid color picker with full dark theme i
 ### 🚀 **[✨ Try it Live - Interactive Storybook Demo ✨](https://romfatal.github.io/react-iro-gradient-picker/)**
 
 Experience all features in action:
+
 - 🌙 **Dark/Light Theme Toggle** - Switch themes and see all components adapt
-- 🎨 **Solid Color Picker** - Pick any solid color with alpha transparency  
+- 🎨 **Solid Color Picker** - Pick any solid color with alpha transparency
 - 🌈 **Gradient Picker** - Create linear/radial gradients with multiple stops
 - 🔄 **Dual Mode** - Switch between solid and gradient modes seamlessly
 - 📱 **Responsive Design** - Works perfectly on desktop and mobile
@@ -91,7 +93,7 @@ function App() {
   const [color, setColor] = useState('#3B82F6');
 
   return (
-    <ThemeProvider defaultTheme="dark">
+    <ThemeProvider defaultTheme='dark'>
       <ColorPicker
         solid
         gradient
@@ -245,4 +247,7 @@ Special thanks to the original author for creating such a solid foundation! 🙏
 MIT © [romfatal](https://github.com/romfatal)
 
 Original project: MIT © [undind](https://github.com/undind)
+
+```
+
 ```

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,