react-iro-gradient-picker 1.1.7 → 1.2.3

package/dist/index.js

@@ -6394,111 +6394,139 @@ var isValidRgba = (function (rgba) {
     return !!rgbaToHex(rgba);
 });
 
-var combineRegExp = function (regexpList, flags) {
-    return new RegExp(regexpList.reduce(function (result, item) {
-        return result + (typeof item === 'string' ? item : item.source);
-    }, ''), flags);
-};
-var generateRegExp = function () {
-    var searchFlags = 'gi';
-    var rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/;
-    var rSideCornerCapture = /to\s+((?:(?:left|right)(?:\s+(?:top|bottom))?))/;
-    var rRadial = /circle at\s+((?:(?:left|right|center|top|bottom)(?:\s+(?:left|right|center|top|bottom))?))/;
-    var rComma = /\s*,\s*/;
-    var rColorHex = /\#(?:[a-f0-9]{6,8}|[a-f0-9]{3})/;
-    var rDigits3 = /\(\s*(?:\d{1,3}%?\s*,\s*){2}%?\d{1,3}%?\s*\)/;
-    var rDigits4 = /\(\s*(?:\d{1,3}%?\s*,\s*){2}%?\d{1,3}%?\s*,\s*\d*\.?\d+\)/;
-    var rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
-    var rKeyword = /[_a-z-][_a-z0-9-]*/;
-    var rColor = combineRegExp([
-        '(?:',
-        rColorHex,
-        '|',
-        '(?:rgb|hsl)',
-        rDigits3,
-        '|',
-        '(?:rgba|hsla)',
-        rDigits4,
-        '|',
-        rKeyword,
-        ')'
-    ], '');
-    var rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], '');
-    var rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');
-    var rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, '|', rRadial, ')'], '');
-    var rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags);
-    var rColorStopSearch = combineRegExp([
-        '\\s*(',
-        rColor,
-        ')',
-        '(?:\\s+',
-        '(',
-        rValue,
-        '))?',
-        '(?:',
-        rComma,
-        '\\s*)?'
-    ], searchFlags);
-    return {
-        gradientSearch: rGradientSearch,
-        colorStopSearch: rColorStopSearch
-    };
-};
-var parseGradient$1 = function (regExpLib, input) {
-    var result = {
-        stops: [],
-        angle: '',
-        line: '',
-        original: ''
-    };
-    var matchGradient, matchColorStop, stopResult;
-    regExpLib.gradientSearch.lastIndex = 0;
-    matchGradient = regExpLib.gradientSearch.exec(input);
-    if (matchGradient !== null) {
-        result = __assign(__assign({}, result), { original: matchGradient[0] });
-        if (matchGradient[1]) {
-            result.line = matchGradient[1];
+var validGradient = (function (input) {
+    try {
+        // Clean input
+        var cleanInput = input
+            .trim()
+            .replace(/;$/, '')
+            .replace(/^background-image:\s*/, '');
+        // Extract gradient type and content
+        var gradientMatch = cleanInput.match(/^(linear|radial)-gradient\s*\(\s*(.*)\s*\)$/i);
+        if (!gradientMatch) {
+            return 'Failed to find gradient';
         }
-        if (matchGradient[2]) {
-            result.angle = matchGradient[2];
+        var _a = __read(gradientMatch, 3), type = _a[1], content = _a[2];
+        var parts = [];
+        var currentPart = '';
+        var parenDepth = 0;
+        var inQuotes = false;
+        // Parse content by splitting on commas, but respect parentheses and quotes
+        for (var i = 0; i < content.length; i++) {
+            var char = content[i];
+            if (char === '"' || char === "'") {
+                inQuotes = !inQuotes;
+            }
+            else if (!inQuotes) {
+                if (char === '(')
+                    parenDepth++;
+                else if (char === ')')
+                    parenDepth--;
+                else if (char === ',' && parenDepth === 0) {
+                    parts.push(currentPart.trim());
+                    currentPart = '';
+                    continue;
+                }
+            }
+            currentPart += char;
         }
-        if (matchGradient[3]) {
-            result.sideCorner = matchGradient[3];
+        if (currentPart.trim()) {
+            parts.push(currentPart.trim());
         }
-        regExpLib.colorStopSearch.lastIndex = 0;
-        matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[5]);
-        while (matchColorStop !== null) {
-            var tinyColor = tinycolor(matchColorStop[1]);
-            stopResult = {
-                color: tinyColor.toRgbString()
-            };
-            if (matchColorStop[2]) {
-                stopResult.position = Number((parseInt(matchColorStop[2], 10) / 100).toFixed(2));
+        var angle = '';
+        var line = '';
+        var colorStops = [];
+        // Determine if first part is direction/angle or color stop
+        var firstPart = parts[0];
+        var isDirection = /^\d+deg$/i.test(firstPart) ||
+            /^to\s+/.test(firstPart) ||
+            /^(?:circle|ellipse)/.test(firstPart) ||
+            /at\s+/.test(firstPart);
+        if (isDirection) {
+            if (type === 'linear') {
+                if (/^\d+deg$/i.test(firstPart)) {
+                    angle = firstPart.replace(/deg$/i, '');
+                }
+                else if (/^to\s+/.test(firstPart)) {
+                    line = firstPart;
+                    // Convert named directions to angles
+                    var directionMap = {
+                        'to top': '0',
+                        'to top right': '45',
+                        'to right': '90',
+                        'to bottom right': '135',
+                        'to bottom': '180',
+                        'to bottom left': '225',
+                        'to left': '270',
+                        'to top left': '315'
+                    };
+                    angle = directionMap[firstPart] || '0';
+                }
+            }
+            else {
+                line = firstPart;
             }
-            result.stops.push(stopResult);
-            matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[5]);
+            colorStops = parts.slice(1);
         }
-    }
-    return result;
-};
-var validGradient = (function (input) {
-    var regExpLib = generateRegExp();
-    var result;
-    var rGradientEnclosedInBrackets = /.*gradient\s*\(((?:\([^\)]*\)|[^\)\(]*)*)\)/;
-    var match = rGradientEnclosedInBrackets.exec(input);
-    if (match !== null) {
-        result = parseGradient$1(regExpLib, match[1]);
-        if (result.original.trim() !== match[1].trim()) {
-            result.parseWarning = true;
+        else {
+            // No explicit direction, use defaults
+            angle = type === 'linear' ? '180' : '';
+            line = type === 'radial' ? 'circle at center' : '';
+            colorStops = parts;
         }
-        if (result.stops.every(function (item) { return item.hasOwnProperty('position'); }) === false) {
-            result = 'Not correct position';
+        // Parse color stops
+        var stops_1 = [];
+        for (var i = 0; i < colorStops.length; i++) {
+            var stopString = colorStops[i].trim();
+            // Try to extract color and position
+            var stopMatch = stopString.match(/^(.+?)(?:\s+(\d+(?:\.\d+)?)(%)?)?$/);
+            if (stopMatch) {
+                var _b = __read(stopMatch, 4), colorStr = _b[1], positionStr = _b[2], isPercent = _b[3];
+                var tinyColorInstance = tinycolor(colorStr.trim());
+                if (tinyColorInstance.isValid()) {
+                    var stop_1 = {
+                        color: tinyColorInstance.toRgbString()
+                    };
+                    if (positionStr) {
+                        var position = parseFloat(positionStr);
+                        // Assume percentage if no unit specified
+                        if (isPercent || !isPercent) {
+                            position = position / 100;
+                        }
+                        stop_1.position = Math.max(0, Math.min(1, position));
+                    }
+                    stops_1.push(stop_1);
+                }
+            }
+        }
+        // Auto-assign positions if missing
+        stops_1.forEach(function (stop, index) {
+            if (!stop.hasOwnProperty('position')) {
+                stop.position = stops_1.length > 1 ? index / (stops_1.length - 1) : 0;
+            }
+        });
+        // Ensure we have at least 2 stops
+        if (stops_1.length === 0) {
+            return 'No valid color stops found';
         }
+        else if (stops_1.length === 1) {
+            // Duplicate the single stop to create a valid gradient
+            stops_1.push({
+                color: stops_1[0].color,
+                position: 1
+            });
+        }
+        return {
+            stops: stops_1,
+            angle: angle,
+            line: line,
+            original: cleanInput
+        };
     }
-    else {
-        result = 'Failed to find gradient';
+    catch (error) {
+        console.warn('Error parsing gradient:', error);
+        return 'Failed to parse gradient';
     }
-    return result;
 });
 
 var LINEAR_POS = [
@@ -6582,6 +6610,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) {
@@ -6988,28 +7104,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;
@@ -7644,7 +7767,19 @@ var IroGradient = function (_a) {
     // Store the initial value for reset functionality
     var initialValue = React.useRef(value);
     var parsedColors = React.useCallback(function () {
-        return parseGradient(value);
+        try {
+            var parsed = parseGradient(value);
+            // If parsing failed, return fallback gradient
+            if (typeof parsed === 'string') {
+                console.warn('Gradient parsing failed, using fallback:', parsed);
+                return parseGradient('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
+            }
+            return parsed;
+        }
+        catch (error) {
+            console.warn('Error parsing gradient, using fallback:', error);
+            return parseGradient('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
@@ -8334,7 +8469,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(React.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(React.useState(initialTab), 2), activeTab = _w[0], setActiveTab = _w[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');
+            if (typeof onChangeTabs === 'function') {
+                onChangeTabs('gradient');
+            }
+        }
+    }, [value, activeTab, onChangeTabs]);
     var onChangeSolid = function (value) {
         onChange(value);
     };
@@ -8357,17 +8507,17 @@ var ColorPicker = function (_a) {
                         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: value, 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 })),
                         React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'gradient' },
-                            React__default["default"].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__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 })))))));
     }
     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: value, 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: 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__default["default"].createElement(React.Fragment, null))))) : 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)));
 };
 
 exports.ColorPicker = ColorPicker;
@@ -8384,12 +8534,16 @@ exports.ThemeToggle = ThemeToggle;
 exports.TinyColor = TinyColor;
 exports.checkFormat = checkFormat;
 exports.cn = cn;
+exports.cssToGradientObject = cssToGradientObject;
 exports["default"] = ColorPicker;
 exports.getGradient = getGradient;
 exports.getHexAlpha = getHexAlpha;
+exports.gradientObjectToCss = gradientObjectToCss;
 exports.hexToRgba = hexToRgba;
+exports.isGradientObject = isGradientObject;
 exports.isValidHex = isValidHex;
 exports.isValidRgba = isValidRgba;
+exports.normalizeGradientValue = normalizeGradientValue;
 exports.parseGradient = parseGradient;
 exports.rgbaToArray = rgbaToArray;
 exports.rgbaToHex = rgbaToHex;