react-iro-gradient-picker 1.2.4 → 1.2.6

package/README.md

@@ -323,6 +323,91 @@ radial-gradient(circle at 40% 40%, #C6FFDD, #FBD786, #F7797D)
 - **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
+- **Smart position mapping**: Automatically highlights correct position markers for all gradient formats
+
+## 📐 Gradient Value Format Guide
+
+The component accepts gradient values in multiple formats and automatically maps them to the correct UI controls:
+
+### ✅ Supported Gradient Formats
+
+#### Linear Gradients
+
+```css
+/* Angle-based (0-360 degrees) */
+linear-gradient(45deg, #FF6B6B, #4ECDC4)
+linear-gradient(180deg, #667eea 0%, #764ba2 100%)
+
+/* Named directions (automatically converted to angles) */
+linear-gradient(to top, #FF6B6B, #4ECDC4)        → 0deg
+linear-gradient(to top right, #FF6B6B, #4ECDC4)  → 45deg
+linear-gradient(to right, #FF6B6B, #4ECDC4)      → 90deg
+linear-gradient(to bottom, #FF6B6B, #4ECDC4)     → 180deg
+```
+
+#### Radial Gradients - Standard Positions
+
+```css
+/* Standard position keywords (auto-mapped to UI markers) */
+radial-gradient(circle at center, #FF6B6B, #4ECDC4)
+radial-gradient(circle at top left, #FF6B6B, #4ECDC4)
+radial-gradient(circle at top center, #FF6B6B, #4ECDC4)    ✨ Maps to "center top"
+radial-gradient(circle at right center, #FF6B6B, #4ECDC4)  ✨ Maps to "center right"
+
+/* Percentage-based positions */
+radial-gradient(circle at 70% 30%, #FF6B6B, #4ECDC4)
+radial-gradient(circle at 0% 100%, #FF6B6B, #4ECDC4)
+```
+
+#### Radial Gradients - Edge Cases ✨ NEW
+
+```css
+/* Size-only gradients (automatically default to center position) */
+radial-gradient(70, #ff0000, #0000ff)              ✨ → circle at center
+radial-gradient(150%, #FFB347, #FFCC33, #FF6347)   ✨ → circle at center
+radial-gradient(200px, #FF6B6B, #4ECDC4)           ✨ → circle at center
+
+/* Size keywords (automatically default to center position) */
+radial-gradient(closest-side, #FF6B6B, #4ECDC4)    ✨ → circle at center
+radial-gradient(farthest-corner, #FF6B6B, #4ECDC4) ✨ → circle at center
+```
+
+### 🎯 Position Mapping Intelligence
+
+The component intelligently maps gradient positions to UI markers:
+
+| **Input Format**         | **UI Marker Highlighted** | **Notes**                       |
+| ------------------------ | ------------------------- | ------------------------------- |
+| `circle at center`       | Center (●)                | Standard center position        |
+| `circle at top center`   | Center Top (●)            | Alias automatically normalized  |
+| `circle at right center` | Center Right (●)          | Alias automatically normalized  |
+| `70`, `150%`, `200px`    | Center (●)                | Size-only defaults to center    |
+| `closest-side`           | Center (●)                | Size keywords default to center |
+| `circle at 25% 75%`      | No marker                 | Custom percentage position      |
+
+### 📝 Gradient Value Requirements
+
+#### ✅ Valid Examples
+
+```css
+/* With explicit positions (recommended) */
+linear-gradient(90deg, #FF6B6B 0%, #4ECDC4 100%)
+radial-gradient(circle at center, #FF6B6B 0%, #4ECDC4 50%, #FFD93D 100%)
+
+/* Without positions (auto-distributed) */
+linear-gradient(45deg, #FF6B6B, #4ECDC4, #FFD93D)
+radial-gradient(circle at top left, #FF6B6B, #4ECDC4)
+```
+
+#### ❌ Invalid Examples
+
+```css
+/* Missing gradient type */
+90deg, #FF6B6B, #4ECDC4
+
+/* Invalid color format */
+linear-gradient(90deg, notacolor, #4ECDC4)
+```
 
 ## Props
 
@@ -351,39 +436,48 @@ radial-gradient(circle at 40% 40%, #C6FFDD, #FBD786, #F7797D)
 | showReset             |   `bool`   |           `false`           | Show/hide reset button in the picker interface                                                        |
 | onReset               | `function` |           `null`            | Callback function triggered when reset button is clicked                                              |
 
-When passing a value for a gradient, you must specify the position of all colors. Otherwise the component will throw an exception.
-For example:
-
-### Wrong
+## 🎯 Radial Gradient Position Reference
 
-```
-
-linear-gradient(180deg, #000000,#ff0000)
-
-```
-
-### Correct
+The component supports all standard radial gradient positions and automatically maps them to UI markers:
 
-```
-
-linear-gradient(180deg, #000000 0%,#ff0000 100%)
+### Standard Positions (9-Point Grid)
 
+```css
+/* Top Row */
+circle at left top       → Top-Left marker (●)
+circle at center top     → Top-Center marker (●)
+circle at right top      → Top-Right marker (●)
+
+/* Middle Row */
+circle at left           → Middle-Left marker (●)
+circle at center         → Center marker (●) [Default]
+circle at right          → Middle-Right marker (●)
+
+/* Bottom Row */
+circle at left bottom    → Bottom-Left marker (●)
+circle at center bottom  → Bottom-Center marker (●)
+circle at right bottom   → Bottom-Right marker (●)
 ```
 
-If you are using a radial gradient a list of possible directions for it:
+### Position Aliases (Auto-Normalized)
 
+```css
+/* These aliases are automatically converted: */
+circle at top center     → circle at center top
+circle at bottom center  → circle at center bottom
+circle at left center    → circle at center left
+circle at right center   → circle at center right
 ```
 
-circle at left top
-circle at center top
-circle at right top
-circle at left
-circle at center
-circle at right
-circle at left bottom
-circle at center bottom
-circle at right bottom
+### Edge Cases (Auto-Defaulted to Center)
 
+```css
+/* Size-only gradients default to center: */
+70                       → circle at center
+150%                     → circle at center
+200px                    → circle at center
+closest-side            → circle at center
+farthest-corner         → circle at center
 ```
 
 ## Default color list

package/dist/index.es.js

@@ -6430,10 +6430,18 @@ var validGradient = (function (input) {
         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);
+        var isDirection = false;
+        if (type === 'linear') {
+            isDirection = /^\d+deg$/i.test(firstPart) || /^to\s+/.test(firstPart);
+        }
+        else if (type === 'radial') {
+            // For radial gradients, check for size, shape, or position keywords
+            isDirection =
+                /^(?:circle|ellipse)/.test(firstPart) ||
+                    /at\s+/.test(firstPart) ||
+                    /^(?:closest-side|closest-corner|farthest-side|farthest-corner)$/i.test(firstPart) ||
+                    /^\d+(?:%|px|em|rem)?$/i.test(firstPart); // Size values like "70", "70%", "70px"
+        }
         if (isDirection) {
             if (type === 'linear') {
                 if (/^\d+deg$/i.test(firstPart)) {
@@ -6593,12 +6601,23 @@ var parseGradient = (function (str) {
         var findF = (_a = LINEAR_POS.find(function (item) { return item.name === angle_1; })) === null || _a === void 0 ? void 0 : _a.angle;
         var helperAngle = type === 'linear' ? '180' : 'circle at center';
         var modifier = findF || angle_1 || helperAngle;
+        // For radial gradients, preserve the full modifier string to maintain positioning
+        var processedModifier = void 0;
+        if (type === 'radial') {
+            // Keep the full radial gradient specification
+            processedModifier = modifier;
+        }
+        else {
+            // For linear gradients, extract number if it's a degree value
+            processedModifier =
+                modifier.match(/\d+/) !== null
+                    ? Number((_b = modifier.match(/\d+/)) === null || _b === void 0 ? void 0 : _b.join(''))
+                    : modifier;
+        }
         return {
             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(''))
-                : modifier,
+            modifier: processedModifier,
             stops: stops.map(function (stop, index) {
                 var formatStop = ["".concat(stop.color), index];
                 if (stop.position || stop.position === 0) {
@@ -7455,9 +7474,18 @@ var Markers = function (_a) {
     };
     var onDrag = function (e) {
         var _a;
-        var x = e.clientX;
-        var y = e.clientY;
+        // Defensive check for event object
+        if (!e) {
+            console.warn('onDrag called with undefined event object');
+            return;
+        }
+        var x = e.clientX || 0;
+        var y = e.clientY || 0;
         var rect = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect) {
+            console.warn('Unable to get bounding rect for drag operation');
+            return;
+        }
         var rootDistance = y - rect.y;
         // Now we know user is actually dragging
         setIsDragging(true);
@@ -7712,10 +7740,15 @@ var GradientPanel = function (_a) {
         }
     };
     var onDrag = function (e) {
-        var x = e.clientX;
-        var y = e.clientY;
-        var shiftKey = e.shiftKey;
-        var ctrlKey = e.ctrlKey * 2;
+        // Defensive check for event object
+        if (!e) {
+            console.warn('onDrag called with undefined event object');
+            return;
+        }
+        var x = e.clientX || 0;
+        var y = e.clientY || 0;
+        var shiftKey = e.shiftKey || false;
+        var ctrlKey = (e.ctrlKey || false) * 2;
         pointMoveTo({
             x: x,
             y: y,
@@ -7854,7 +7887,10 @@ var IroGradient = function (_a) {
                 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) {
+                if (fallback &&
+                    typeof fallback === 'object' &&
+                    Array.isArray(fallback.stops) &&
+                    fallback.stops.length > 0) {
                     return fallback;
                 }
                 // Ultimate fallback with guaranteed structure
@@ -7869,7 +7905,10 @@ var IroGradient = function (_a) {
                 };
             }
             // Validate parsed result has required structure
-            if (parsed && typeof parsed === 'object' && Array.isArray(parsed.stops) && parsed.stops.length > 0) {
+            if (parsed &&
+                typeof parsed === 'object' &&
+                Array.isArray(parsed.stops) &&
+                parsed.stops.length > 0) {
                 return parsed;
             }
             // If parsed result is invalid, use ultimate fallback
@@ -7904,11 +7943,22 @@ var IroGradient = function (_a) {
     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 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 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 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 () {