react-iro-gradient-picker 1.2.1 → 1.2.4

package/README.md

@@ -272,6 +272,58 @@ This is an enhanced version of the original react-gcolor-picker with major impro
 - **Updated Dependencies** - Latest versions of all packages
 - **Better Build Process** - Optimized for modern React applications
 
+## 🎨 Supported CSS Gradient Formats
+
+**v1.2.2+ supports all standard CSS gradient formats with robust parsing:**
+
+### Linear Gradients
+
+```css
+/* Angle-based directions */
+linear-gradient(120deg, #FF6B6B, #FFD93D, #6BCB77)
+linear-gradient(45deg, #4FACFE, #00F2FE, #38EF7D)
+linear-gradient(200deg, #FF9A9E, #FAD0C4, #FBC2EB)
+linear-gradient(60deg, #30CFD0, #330867, #6A82FB)
+
+/* Named directions */
+linear-gradient(to top right, #FF6B6B, #FFD93D)
+linear-gradient(to bottom, #4FACFE, #00F2FE)
+linear-gradient(to left, #FF9A9E, #FAD0C4)
+
+/* With explicit positions */
+linear-gradient(90deg, #FF6B6B 0%, #FFD93D 50%, #6BCB77 100%)
+
+/* Without positions (auto-distributed) */
+linear-gradient(180deg, #FF9966, #FF5E62, #F54EA2)
+```
+
+### Radial Gradients
+
+```css
+/* Basic circle gradients */
+radial-gradient(circle at center, #00C9FF, #92FE9D, #0061FF)
+radial-gradient(circle at top left, #FF6B6B, #FF4757, #2F3542)
+radial-gradient(circle at bottom right, #1E90FF, #3742FA, #2C3E50)
+
+/* Positioned radial gradients */
+radial-gradient(circle at 70% 30%, #2ED573, #1EAE98, #004E64)
+radial-gradient(circle at 20% 80%, #FFB347, #FFCC33, #FF6347)
+radial-gradient(circle at top center, #FF7E5F, #FEB47B, #FFD93D)
+radial-gradient(circle at right center, #6A82FB, #FC5C7D, #FF85A1)
+
+/* Complex positioning */
+radial-gradient(circle at 30% 70%, #11998E, #38EF7D, #8BC34A)
+radial-gradient(circle at 80% 20%, #F7971E, #FFD200, #FF512F)
+radial-gradient(circle at 40% 40%, #C6FFDD, #FBD786, #F7797D)
+```
+
+### Advanced Features
+
+- **Auto-positioning**: Color stops without explicit positions are automatically distributed evenly
+- **Flexible syntax**: Supports various positioning keywords and percentage values
+- **Error recovery**: Invalid gradients fall back to a default gradient instead of crashing
+- **Type safety**: Full TypeScript support with proper gradient object interfaces
+
 ## Props
 
 | Attribute             |    Type    |           Default           | Description                                                                                           |

package/dist/index.es.js

@@ -6386,111 +6386,147 @@ 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';
+                }
             }
-            result.stops.push(stopResult);
-            matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[5]);
+            else {
+                line = firstPart;
+            }
+            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();
+            // Improved regex to handle various gradient stop formats
+            // Matches: color position%, color position, or just color
+            var stopMatch = stopString.match(/^(.+?)(?:\s+([\d.]+)(%|px|em|rem)?)?$/);
+            if (stopMatch) {
+                var _b = __read(stopMatch, 4), colorStr = _b[1], positionStr = _b[2], unit = _b[3];
+                var tinyColorInstance = tinycolor(colorStr.trim());
+                if (tinyColorInstance.isValid()) {
+                    var stop_1 = {
+                        color: tinyColorInstance.toRgbString()
+                    };
+                    if (positionStr) {
+                        var position = parseFloat(positionStr);
+                        // Convert percentage to decimal (0-1 range)
+                        if (unit === '%' || !unit) {
+                            // If no unit specified, assume percentage
+                            position = position / 100;
+                        }
+                        stop_1.position = Math.max(0, Math.min(1, position));
+                    }
+                    stops_1.push(stop_1);
+                }
+                else {
+                    console.warn('Invalid color in gradient stop:', colorStr.trim());
+                }
+            }
+            else {
+                console.warn('Could not parse gradient stop:', stopString);
+            }
+        }
+        // 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 = [
@@ -6558,7 +6594,7 @@ var parseGradient = (function (str) {
         var helperAngle = type === 'linear' ? '180' : 'circle at center';
         var modifier = findF || angle_1 || helperAngle;
         return {
-            gradient: "".concat(type, "-gradient(").concat(typeof gradient !== 'string' ? gradient.original : str, ")"),
+            gradient: typeof gradient !== 'string' ? gradient.original : str,
             type: type,
             modifier: modifier.match(/\d+/) !== null
                 ? Number((_b = modifier.match(/\d+/)) === null || _b === void 0 ? void 0 : _b.join(''))
@@ -6575,7 +6611,7 @@ var parseGradient = (function (str) {
 });
 
 /**
- * Convert gradient object to CSS gradient string
+ * Convert gradient object to CSS gradient string (strict typing)
  */
 function gradientObjectToCss(gradientData) {
     var type = gradientData.type, _a = gradientData.angle, angle = _a === void 0 ? 90 : _a, stops = gradientData.stops;
@@ -6594,6 +6630,38 @@ function gradientObjectToCss(gradientData) {
         return "radial-gradient(circle, ".concat(cssStops, ")");
     }
 }
+/**
+ * Convert flexible gradient object to CSS gradient string (loose typing)
+ */
+function flexibleGradientToCss(gradientData) {
+    var _a = gradientData.type, type = _a === void 0 ? 'linear' : _a, angle = gradientData.angle, direction = gradientData.direction, position = gradientData.position, stops = gradientData.stops;
+    // Convert stops to CSS format with flexible position handling
+    var cssStops = stops
+        .map(function (stop) {
+        var color = tinycolor(stop.color);
+        var positionStr = '';
+        if (stop.position !== undefined) {
+            if (typeof stop.position === 'string') {
+                positionStr = " ".concat(stop.position);
+            }
+            else {
+                positionStr = " ".concat(stop.position, "%");
+            }
+        }
+        return "".concat(color.toRgbString()).concat(positionStr);
+    })
+        .join(', ');
+    if (type === 'linear') {
+        // Use direction if provided, otherwise use angle
+        var gradientDirection = direction || (angle ? "".concat(angle, "deg") : '90deg');
+        return "linear-gradient(".concat(gradientDirection, ", ").concat(cssStops, ")");
+    }
+    else {
+        // Handle radial gradients with flexible positioning
+        var radialPosition = position || 'circle';
+        return "radial-gradient(".concat(radialPosition, ", ").concat(cssStops, ")");
+    }
+}
 /**
  * Convert CSS gradient string to gradient object
  */
@@ -7183,9 +7251,22 @@ var DefaultColorPanel = function (_a) {
     var _d = __read(useState([]), 2), formatedDefColors = _d[0], setFormatedDefColors = _d[1];
     useEffect(function () {
         if (colorType === 'gradient') {
-            setFormatedDefColors(checkValidColorsArray(defaultColors, 'grad').map(function (item) {
-                return parseGradient(item);
-            }));
+            var validGradients = checkValidColorsArray(defaultColors, 'grad');
+            // For popular colors display, create minimal IColor objects using original CSS strings
+            // This avoids complex parsing issues while still providing functional display
+            var displayGradients = validGradients.map(function (gradientString) {
+                return {
+                    gradient: gradientString, // Use the original CSS string directly for display
+                    type: gradientString.startsWith('radial-') ? 'radial' : 'linear',
+                    modifier: 180, // Default value, not critical for display
+                    stops: [
+                        // Dummy stops that help identify display objects in onChooseColor
+                        ['rgba(255, 0, 0, 1)', 0, 0],
+                        ['rgba(0, 255, 0, 1)', 1, 1]
+                    ]
+                };
+            });
+            setFormatedDefColors(displayGradients);
         }
         else {
             setFormatedDefColors(checkValidColorsArray(defaultColors, 'solid'));
@@ -7197,6 +7278,41 @@ var DefaultColorPanel = function (_a) {
             return;
         }
         if (colorType === 'gradient' && typeof item !== 'string') {
+            // If this is a simplified display object (identified by dummy stops), parse the gradient properly
+            if (item.stops.length === 2 &&
+                item.stops[0][0] === 'rgba(255, 0, 0, 1)') {
+                try {
+                    var properlyParsed = parseGradient(item.gradient);
+                    if (properlyParsed &&
+                        properlyParsed.stops &&
+                        properlyParsed.stops.length > 0) {
+                        var stops_1 = properlyParsed.stops;
+                        var lastStop_1 = rgbaToArray(stops_1[stops_1.length - 1][0]);
+                        var lastStopLoc_1 = stops_1[stops_1.length - 1][1];
+                        var activeStop_1 = rgbaToHex([
+                            lastStop_1[0],
+                            lastStop_1[1],
+                            lastStop_1[2]
+                        ]);
+                        var activeIdx_1 = stops_1[stops_1.length - 1][2];
+                        setInit(false);
+                        setColor(properlyParsed);
+                        setActiveColor &&
+                            setActiveColor({
+                                hex: activeStop_1,
+                                alpha: Number(Math.round(lastStop_1[3] * 100)),
+                                loc: lastStopLoc_1,
+                                index: activeIdx_1
+                            });
+                        setActive(index);
+                        return;
+                    }
+                }
+                catch (error) {
+                    console.warn('Failed to parse popular gradient on click:', item.gradient, error);
+                }
+            }
+            // Normal gradient object processing (fallback)
             var stops = item.stops;
             var lastStop = rgbaToArray(stops[stops.length - 1][0]);
             var lastStopLoc = stops[stops.length - 1][1];
@@ -7731,18 +7847,69 @@ var IroGradient = function (_a) {
     // Store the initial value for reset functionality
     var initialValue = useRef(value);
     var parsedColors = 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);
+                var fallback = parseGradient('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
+                // Ensure fallback has valid structure
+                if (fallback && typeof fallback === 'object' && Array.isArray(fallback.stops) && fallback.stops.length > 0) {
+                    return fallback;
+                }
+                // Ultimate fallback with guaranteed structure
+                return {
+                    stops: [
+                        ['rgba(255, 255, 255, 1)', 0, 0],
+                        ['rgba(0, 0, 0, 1)', 1, 1]
+                    ],
+                    gradient: 'linear-gradient(90deg, #ffffff 0%, #000000 100%)',
+                    modifier: 90,
+                    type: 'linear'
+                };
+            }
+            // Validate parsed result has required structure
+            if (parsed && typeof parsed === 'object' && Array.isArray(parsed.stops) && parsed.stops.length > 0) {
+                return parsed;
+            }
+            // If parsed result is invalid, use ultimate fallback
+            console.warn('Parsed gradient has invalid structure:', parsed);
+            return {
+                stops: [
+                    ['rgba(255, 255, 255, 1)', 0, 0],
+                    ['rgba(0, 0, 0, 1)', 1, 1]
+                ],
+                gradient: 'linear-gradient(90deg, #ffffff 0%, #000000 100%)',
+                modifier: 90,
+                type: 'linear'
+            };
+        }
+        catch (error) {
+            console.warn('Error parsing gradient, using ultimate fallback:', error);
+            return {
+                stops: [
+                    ['rgba(255, 255, 255, 1)', 0, 0],
+                    ['rgba(0, 0, 0, 1)', 1, 1]
+                ],
+                gradient: 'linear-gradient(90deg, #ffffff 0%, #000000 100%)',
+                modifier: 90,
+                type: 'linear'
+            };
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
-    var lastStop = rgbaToArray(stops[stops.length - 1][0]);
-    var activeStopIndex = stops.length - 1;
-    var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
-    var activeAlpha = Math.round(lastStop[3] * 100);
     var iroPickerRef = useRef(null);
     var containerRef = useRef(null);
     var isUpdatingFromGradientStop = useRef(false);
     var _t = __read(useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
+    // Safe extraction of stop data with fallbacks
+    var safeStops = Array.isArray(stops) && stops.length > 0 ? stops : [['rgba(255, 255, 255, 1)', 0, 0], ['rgba(0, 0, 0, 1)', 1, 1]];
+    var safeLastStop = rgbaToArray(safeStops[safeStops.length - 1][0]);
+    var safeParsedLastStop = Array.isArray(safeLastStop) && safeLastStop.length >= 4 ? safeLastStop : [255, 255, 255, 1];
+    var activeStopIndex = safeStops.length - 1;
+    var activeStop = rgbaToHex([safeParsedLastStop[0], safeParsedLastStop[1], safeParsedLastStop[2]]);
+    var activeAlpha = Math.round(safeParsedLastStop[3] * 100);
     // Responsive width for IroColorPicker - match solid picker logic
     useEffect(function () {
         if (!containerRef.current)
@@ -7785,12 +7952,12 @@ var IroGradient = function (_a) {
         gradient: value,
         type: type,
         modifier: modifier,
-        stops: stops
+        stops: safeStops
     }), 2), color = _u[0], setColor = _u[1];
     var _v = __read(useState({
         hex: activeStop,
         alpha: activeAlpha,
-        loc: stops[activeStopIndex][1],
+        loc: safeStops[activeStopIndex][1],
         index: activeStopIndex
     }), 2), activeColor = _v[0], setActiveColor = _v[1];
     var debounceColor = useDebounce(color, debounceMS);
@@ -8023,11 +8190,11 @@ var IroGradient = function (_a) {
     var handleColorFromPanel = function (newColor) {
         setColor(newColor);
         if (newColor === null || newColor === void 0 ? void 0 : newColor.stops) {
-            var lastStop_1 = rgbaToArray(newColor.stops[newColor.stops.length - 1][0]);
-            var activeStop_1 = rgbaToHex([lastStop_1[0], lastStop_1[1], lastStop_1[2]]);
+            var lastStop = rgbaToArray(newColor.stops[newColor.stops.length - 1][0]);
+            var activeStop_1 = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
             var newActiveColor = {
                 hex: activeStop_1,
-                alpha: Math.round(lastStop_1[3] * 100),
+                alpha: Math.round(lastStop[3] * 100),
                 loc: newColor.stops[newColor.stops.length - 1][1],
                 index: newColor.stops.length - 1
             };
@@ -8472,5 +8639,5 @@ var ColorPicker = function (_a) {
                     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, cssToGradientObject, ColorPicker as default, getGradient, getHexAlpha, gradientObjectToCss, hexToRgba, isGradientObject, isValidHex, isValidRgba, normalizeGradientValue, 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, flexibleGradientToCss, getGradient, getHexAlpha, gradientObjectToCss, hexToRgba, isGradientObject, isValidHex, isValidRgba, normalizeGradientValue, parseGradient, rgbaToArray, rgbaToHex, useDebounce, validGradient };
 //# sourceMappingURL=index.es.js.map