react-iro-gradient-picker 1.1.6 → 1.2.1

package/README.md

@@ -124,7 +124,67 @@ function App() {
 export default App;
 ```
 
-### 🌙 With Dark Theme Support
+### � **NEW: Enhanced Gradient Object Support**
+
+**v1.2.0+ supports both CSS strings AND gradient objects for maximum flexibility!**
+
+```tsx
+import React, { useState } from 'react';
+import ColorPicker from 'react-iro-gradient-picker';
+import 'react-iro-gradient-picker/dist/index.css';
+
+function GradientObjectExample() {
+  // Define gradient as an object
+  const [gradientData, setGradientData] = useState({
+    type: 'linear',
+    angle: 120,
+    stops: [
+      { color: '#FF6B6B', position: 0 }, // Red at 0%
+      { color: '#FFD93D', position: 50 }, // Yellow at 50%
+      { color: '#6BCB77', position: 100 } // Green at 100%
+    ]
+  });
+
+  return (
+    <ColorPicker
+      value={gradientData} // 🎯 Pass object directly!
+      onChange={(cssGradient) => {
+        console.log('Generated CSS:', cssGradient);
+        // Component auto-switches to gradient tab
+        // Sets angle to 120°, creates 3 stops with exact colors/positions
+      }}
+      gradient={true}
+      solid={true}
+      showGradientAngle={true}
+      showGradientStops={true}
+    />
+  );
+}
+```
+
+**🚀 What happens when you pass a gradient object:**
+
+- ✅ **Auto-switches to gradient tab**
+- ✅ **Sets angle slider to specified degrees** (120° in example)
+- ✅ **Creates gradient stops** at exact positions (0%, 50%, 100%)
+- ✅ **Sets stop colors** to specified values (#FF6B6B, #FFD93D, #6BCB77)
+- ✅ **Updates gradient preview** to match exactly
+- ✅ **Returns CSS gradient string** in onChange callback
+
+**📋 Gradient Object Structure:**
+
+```typescript
+interface IGradientData {
+  type: 'linear' | 'radial';
+  angle?: number; // For linear gradients (0-360 degrees)
+  stops: Array<{
+    color: string; // Any valid CSS color
+    position: number; // 0-100 (percentage)
+  }>;
+}
+```
+
+### �🌙 With Dark Theme Support
 
 ```tsx
 import React, { useState } from 'react';

package/dist/components/core/Colorpicker/IroGradient/index.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
-import { IPropsComp } from '../../../../lib/types';
-declare const IroGradient: FC<IPropsComp>;
+import { IPropsGradient } from '../../../../lib/types';
+declare const IroGradient: FC<IPropsGradient>;
 export default IroGradient;

package/dist/components/core/Colorpicker/IroSolid/index.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
-import { IPropsComp } from '../../../../lib/types';
-declare const IroSolidColorPicker: FC<IPropsComp>;
+import { IPropsSolid } from '../../../../lib/types';
+declare const IroSolidColorPicker: FC<IPropsSolid>;
 export default IroSolidColorPicker;

package/dist/components/core/Colorpicker/helper.d.ts

@@ -1,4 +1,5 @@
-export declare const getIndexActiveTag: (value: string) => string;
+import { TValueProp } from '../../../lib/types';
+export declare const getIndexActiveTag: (value: TValueProp) => string;
 export declare const checkValidColorsArray: (arr: string[], type: "solid" | "grad") => string[];
 export declare const arraysEqual: (a: Array<any>, b: Array<any>) => boolean;
 export declare const shallowEqual: (object1: any, object2: any) => boolean;

package/dist/index.es.js

@@ -6574,6 +6574,94 @@ var parseGradient = (function (str) {
     }
 });
 
+/**
+ * Convert gradient object to CSS gradient string
+ */
+function gradientObjectToCss(gradientData) {
+    var type = gradientData.type, _a = gradientData.angle, angle = _a === void 0 ? 90 : _a, stops = gradientData.stops;
+    // Convert stops to CSS format
+    var cssStops = stops
+        .sort(function (a, b) { return a.position - b.position; }) // Ensure stops are in order
+        .map(function (stop) {
+        var color = tinycolor(stop.color);
+        return "".concat(color.toRgbString(), " ").concat(stop.position, "%");
+    })
+        .join(', ');
+    if (type === 'linear') {
+        return "linear-gradient(".concat(angle, "deg, ").concat(cssStops, ")");
+    }
+    else {
+        return "radial-gradient(circle, ".concat(cssStops, ")");
+    }
+}
+/**
+ * Convert CSS gradient string to gradient object
+ */
+function cssToGradientObject(cssGradient) {
+    try {
+        var parsed = parseGradient(cssGradient);
+        if (!parsed) {
+            return null;
+        }
+        var type = parsed.type, modifier = parsed.modifier, stops = parsed.stops;
+        // Convert stops to object format
+        var gradientStops = stops.map(function (stop) { return ({
+            color: String(stop[0]), // Ensure it's a string
+            position: Math.round(stop[1] * 100) // Convert to percentage
+        }); });
+        // Extract angle from modifier (for linear gradients)
+        var angle = 90; // Default angle
+        if (type === 'linear' && modifier && typeof modifier === 'string') {
+            var angleMatch = modifier.match(/(\d+)deg/);
+            if (angleMatch) {
+                angle = parseInt(angleMatch[1], 10);
+            }
+        }
+        return {
+            type: type,
+            angle: type === 'linear' ? angle : undefined,
+            stops: gradientStops,
+            defaultActiveTab: 'gradient'
+        };
+    }
+    catch (error) {
+        console.warn('Failed to parse CSS gradient:', error);
+        return null;
+    }
+}
+/**
+ * Check if a value is a gradient object
+ */
+function isGradientObject(value) {
+    return (value &&
+        typeof value === 'object' &&
+        'type' in value &&
+        'stops' in value &&
+        Array.isArray(value.stops) &&
+        value.stops.length > 0 &&
+        value.stops.every(function (stop) {
+            return stop &&
+                typeof stop === 'object' &&
+                'color' in stop &&
+                'position' in stop &&
+                typeof stop.position === 'number';
+        }));
+}
+/**
+ * Normalize value to always return a CSS gradient string
+ */
+function normalizeGradientValue(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (isGradientObject(value)) {
+        return gradientObjectToCss(value);
+    }
+    // Fallback
+    return 'linear-gradient(90deg, #ffffff 0%, #000000 100%)';
+}
+// End of file
+
 var getAlphaValue = function (value) {
     value.replace(/%/i, '');
     if (value[0] === '0' && value.length > 1) {
@@ -6980,28 +7068,35 @@ IroColorPicker.displayName = 'IroColorPicker';
 
 var getIndexActiveTag = function (value) {
     var tab = 'solid';
-    var validValue = tinycolor(value).isValid();
-    if (value) {
-        if (value === 'transparent') {
-            tab = 'solid';
-            return tab;
-        }
-        if (validValue &&
-            !value.trim().startsWith('radial-gradient') &&
-            !value.trim().startsWith('linear-gradient')) {
-            tab = 'solid';
-            return tab;
-        }
-        var rgba = rgbaToArray(value);
-        if (rgba) {
-            if (isValidRgba([rgba[0], rgba[1], rgba[2]])) {
+    // Handle gradient object
+    if (isGradientObject(value)) {
+        return 'gradient';
+    }
+    // Handle string value
+    if (typeof value === 'string') {
+        var validValue = tinycolor(value).isValid();
+        if (value) {
+            if (value === 'transparent') {
                 tab = 'solid';
                 return tab;
             }
-        }
-        else {
-            tab = 'gradient';
-            return tab;
+            if (validValue &&
+                !value.trim().startsWith('radial-gradient') &&
+                !value.trim().startsWith('linear-gradient')) {
+                tab = 'solid';
+                return tab;
+            }
+            var rgba = rgbaToArray(value);
+            if (rgba) {
+                if (isValidRgba([rgba[0], rgba[1], rgba[2]])) {
+                    tab = 'solid';
+                    return tab;
+                }
+            }
+            else {
+                tab = 'gradient';
+                return tab;
+            }
         }
     }
     return tab;
@@ -7784,7 +7879,9 @@ var IroGradient = function (_a) {
     useEffect(function () {
         var initializeIroPicker = function () {
             var _a, _b;
-            if (((_b = (_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) === null || _b === void 0 ? void 0 : _b.color) && activeColor.hex) {
+            if (((_b = (_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) === null || _b === void 0 ? void 0 : _b.color) &&
+                activeColor.hex &&
+                typeof activeColor.alpha === 'number') {
                 console.log('🚀 Initializing iro picker with activeColor:', activeColor);
                 // Wait a bit for the picker to be fully ready, then update
                 setTimeout(function () {
@@ -7805,13 +7902,19 @@ var IroGradient = function (_a) {
     var handleSetActiveColor = useCallback(function (newActiveColor) {
         console.log('🎯 Gradient stop clicked, setting active color:', newActiveColor);
         setActiveColor(newActiveColor);
-        // Force immediate update of iro picker with longer delay for first-time reliability
-        setTimeout(function () {
-            updateIroPickerColor({
-                hex: newActiveColor.hex,
-                alpha: newActiveColor.alpha
-            });
-        }, 50); // Increased from 5ms to 50ms for better first-time success
+        // Validate before updating iro picker
+        if (newActiveColor.hex && typeof newActiveColor.alpha === 'number') {
+            // Force immediate update of iro picker with longer delay for first-time reliability
+            setTimeout(function () {
+                updateIroPickerColor({
+                    hex: newActiveColor.hex,
+                    alpha: newActiveColor.alpha
+                });
+            }, 50); // Increased from 5ms to 50ms for better first-time success
+        }
+        else {
+            console.log('⚠️ Skipping iro picker update in handleSetActiveColor - invalid data:', newActiveColor);
+        }
     }, [updateIroPickerColor]);
     // Update iro picker when activeColor changes (e.g., clicking gradient stops)
     useEffect(function () {
@@ -7821,18 +7924,17 @@ var IroGradient = function (_a) {
             index: activeColor.index,
             loc: activeColor.loc
         });
+        // Validate activeColor before proceeding
+        if (!activeColor.hex || typeof activeColor.alpha !== 'number') {
+            console.log('⚠️ Skipping iro picker update - invalid activeColor:', activeColor);
+            return;
+        }
         // Add a small delay to ensure the activeColor state has fully updated
         var timeoutId = setTimeout(function () {
             updateIroPickerColor({ hex: activeColor.hex, alpha: activeColor.alpha });
         }, 10);
         return function () { return clearTimeout(timeoutId); };
-    }, [
-        activeColor.hex,
-        activeColor.alpha,
-        activeColor.index,
-        activeColor.loc,
-        updateIroPickerColor
-    ]);
+    }, [activeColor, updateIroPickerColor]);
     var updateGradient = useCallback(function (newColor) {
         if (Array.isArray(newColor)) {
             // Handle the case where it's called with stops array
@@ -8319,7 +8421,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, 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(useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _w[0], setActiveTab = _w[1];
+    // 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(useState(initialTab), 2), activeTab = _w[0], setActiveTab = _w[1];
+    // Auto-switch tab when value changes from object to string or vice versa
+    React.useEffect(function () {
+        if (isGradientObject(value) && activeTab !== 'gradient') {
+            setActiveTab('gradient');
+            if (typeof onChangeTabs === 'function') {
+                onChangeTabs('gradient');
+            }
+        }
+    }, [value, activeTab, onChangeTabs]);
     var onChangeSolid = function (value) {
         onChange(value);
     };
@@ -8342,18 +8459,18 @@ var ColorPicker = function (_a) {
                         React.createElement(PopupTabsHeaderLabel, { tabName: 'gradient', onClick: function () { return onChangeTab('gradient'); } }, "Gradient")),
                     React.createElement(PopupTabsBody, null,
                         React.createElement(PopupTabsBodyItem, { tabName: 'solid' },
-                            React.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.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.createElement(PopupTabsBodyItem, { tabName: 'gradient' },
-                            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, showReset: showReset, onReset: onReset })))))));
+                            React.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 })))))));
     }
     return (React.createElement(ThemeProvider, null,
         React.createElement("div", { className: 'relative dark iro-gradient-picker', "data-color-picker-theme": true },
             React.createElement(ThemeToggle, null),
             solid || gradient ? (React.createElement(PopupTabs, { popupWidth: popupWidth },
                 React.createElement(PopupTabsBody, null,
-                    solid ? (React.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.createElement(Fragment, null)),
-                    gradient ? (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, showReset: showReset, onReset: onReset })) : (React.createElement(Fragment, null))))) : null)));
+                    solid ? (React.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.createElement(Fragment, null)),
+                    gradient ? (React.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.createElement(Fragment, null))))) : null)));
 };
 
-export { ColorPicker, DEFAULT_COLORS, InputRgba, PopupTabs, PopupTabsBody, PopupTabsBodyItem, PopupTabsHeader, PopupTabsHeaderLabel, RADIALS_POS, ThemeProvider, ThemeToggle, TinyColor, checkFormat, cn, ColorPicker as default, getGradient, getHexAlpha, hexToRgba, isValidHex, isValidRgba, parseGradient, rgbaToArray, rgbaToHex, useDebounce, validGradient };
+export { ColorPicker, DEFAULT_COLORS, InputRgba, PopupTabs, PopupTabsBody, PopupTabsBodyItem, PopupTabsHeader, PopupTabsHeaderLabel, RADIALS_POS, ThemeProvider, ThemeToggle, TinyColor, checkFormat, cn, cssToGradientObject, ColorPicker as default, getGradient, getHexAlpha, gradientObjectToCss, hexToRgba, isGradientObject, isValidHex, isValidRgba, normalizeGradientValue, parseGradient, rgbaToArray, rgbaToHex, useDebounce, validGradient };
 //# sourceMappingURL=index.es.js.map