react-iro-gradient-picker 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -18,6 +18,7 @@ A beautiful, modern React gradient and solid color picker with full dark theme i
18
18
 
19
19
  - 🌙 **Complete Dark Theme** - Works perfectly across all components (modal, solid, gradient)
20
20
  - 🎨 **Gradient & Solid Colors** - Full support for both gradient and solid color picking
21
+ - 🔄 **Reset Button** - Built-in reset functionality with customizable callbacks
21
22
  - 🔄 **Theme Toggle** - Easy switching between light and dark themes
22
23
  - 💾 **Theme Persistence** - Automatically saves user theme preference
23
24
  - 🎯 **Tailwind CSS** - Modern styling with comprehensive theming system
@@ -82,6 +83,35 @@ function App() {
82
83
  export default App;
83
84
  ```
84
85
 
86
+ ### 🔄 With Reset Functionality
87
+
88
+ ```tsx
89
+ import React, { useState } from 'react';
90
+ import ColorPicker from 'react-iro-gradient-picker';
91
+
92
+ function App() {
93
+ const [color, setColor] = useState('#3B82F6');
94
+ const originalColor = '#3B82F6';
95
+
96
+ const handleReset = () => {
97
+ setColor(originalColor);
98
+ console.log('Color reset to original value!');
99
+ };
100
+
101
+ return (
102
+ <ColorPicker
103
+ solid
104
+ value={color}
105
+ onChange={setColor}
106
+ showReset
107
+ onReset={handleReset}
108
+ />
109
+ );
110
+ }
111
+
112
+ export default App;
113
+ ```
114
+
85
115
  ### 🌙 With Dark Theme Support
86
116
 
87
117
  ```tsx
@@ -157,6 +187,8 @@ This is an enhanced version of the original react-gcolor-picker with major impro
157
187
  | defaultActiveTab | `string` | `undefined` | Default value for active tab when initializing the component, takes two values: `solid` or `gradient` |
158
188
  | onChangeTabs | `function` | `null` | Default onChange function detect when tabs change and return one of the values: `solid` or `gradient` |
159
189
  | onChange | `function` | `null` | Default onChange function returns string value in the given format |
190
+ | showReset | `bool` | `false` | Show/hide reset button in the picker interface |
191
+ | onReset | `function` | `null` | Callback function triggered when reset button is clicked |
160
192
 
161
193
  When passing a value for a gradient, you must specify the position of all colors. Otherwise the component will throw an exception.
162
194
  For example:
package/dist/index.es.js CHANGED
@@ -7631,12 +7631,14 @@ var useDebounce = (function (value, delay) {
7631
7631
  });
7632
7632
 
7633
7633
  var IroGradient = function (_a) {
7634
- var _b = _a.value, value = _b === void 0 ? 'linear-gradient(90deg, #ffffff 0%, #000000 100%)' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, _j = _a.showGradientResult, showGradientResult = _j === void 0 ? true : _j, _k = _a.showGradientStops, showGradientStops = _k === void 0 ? true : _k, _l = _a.showGradientMode, showGradientMode = _l === void 0 ? true : _l, _m = _a.showGradientAngle, showGradientAngle = _m === void 0 ? true : _m, _o = _a.showGradientPosition, showGradientPosition = _o === void 0 ? true : _o, _p = _a.allowAddGradientStops, allowAddGradientStops = _p === void 0 ? true : _p, _q = _a.colorBoardHeight, colorBoardHeight = _q === void 0 ? 120 : _q, defaultColors = _a.defaultColors;
7634
+ var _b = _a.value, value = _b === void 0 ? 'linear-gradient(90deg, #ffffff 0%, #000000 100%)' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, _j = _a.showGradientResult, showGradientResult = _j === void 0 ? true : _j, _k = _a.showGradientStops, showGradientStops = _k === void 0 ? true : _k, _l = _a.showGradientMode, showGradientMode = _l === void 0 ? true : _l, _m = _a.showGradientAngle, showGradientAngle = _m === void 0 ? true : _m, _o = _a.showGradientPosition, showGradientPosition = _o === void 0 ? true : _o, _p = _a.allowAddGradientStops, allowAddGradientStops = _p === void 0 ? true : _p, _q = _a.colorBoardHeight, colorBoardHeight = _q === void 0 ? 120 : _q, defaultColors = _a.defaultColors, _r = _a.showReset, showReset = _r === void 0 ? false : _r, onReset = _a.onReset;
7635
+ // Store the initial value for reset functionality
7636
+ var initialValue = useRef(value);
7635
7637
  var parsedColors = useCallback(function () {
7636
7638
  return parseGradient(value);
7637
7639
  // eslint-disable-next-line react-hooks/exhaustive-deps
7638
7640
  }, [value]);
7639
- var _r = parsedColors(), stops = _r.stops, type = _r.type, modifier = _r.modifier;
7641
+ var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
7640
7642
  var lastStop = rgbaToArray(stops[stops.length - 1][0]);
7641
7643
  var activeStopIndex = stops.length - 1;
7642
7644
  var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
@@ -7644,7 +7646,7 @@ var IroGradient = function (_a) {
7644
7646
  var iroPickerRef = useRef(null);
7645
7647
  var containerRef = useRef(null);
7646
7648
  var isUpdatingFromGradientStop = useRef(false);
7647
- var _s = __read(useState(200), 2), pickerWidth = _s[0], setPickerWidth = _s[1];
7649
+ var _t = __read(useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
7648
7650
  // Responsive width for IroColorPicker - match solid picker logic
7649
7651
  useEffect(function () {
7650
7652
  if (!containerRef.current)
@@ -7683,18 +7685,18 @@ var IroGradient = function (_a) {
7683
7685
  resizeObserver.observe(containerRef.current);
7684
7686
  return function () { return resizeObserver.disconnect(); };
7685
7687
  }, []);
7686
- var _t = __read(useState({
7688
+ var _u = __read(useState({
7687
7689
  gradient: value,
7688
7690
  type: type,
7689
7691
  modifier: modifier,
7690
7692
  stops: stops
7691
- }), 2), color = _t[0], setColor = _t[1];
7692
- var _u = __read(useState({
7693
+ }), 2), color = _u[0], setColor = _u[1];
7694
+ var _v = __read(useState({
7693
7695
  hex: activeStop,
7694
7696
  alpha: activeAlpha,
7695
7697
  loc: stops[activeStopIndex][1],
7696
7698
  index: activeStopIndex
7697
- }), 2), activeColor = _u[0], setActiveColor = _u[1];
7699
+ }), 2), activeColor = _v[0], setActiveColor = _v[1];
7698
7700
  var debounceColor = useDebounce(color, debounceMS);
7699
7701
  // Update iro picker color
7700
7702
  var updateIroPickerColor = useCallback(function (colorData, retryCount) {
@@ -7883,6 +7885,29 @@ var IroGradient = function (_a) {
7883
7885
  var alpha = Math.round(rgbaArr[3] * 100);
7884
7886
  onChangeActiveColor({ hex: hex, alpha: alpha });
7885
7887
  };
7888
+ // Reset to initial color
7889
+ var handleResetColor = function () {
7890
+ var _a;
7891
+ var initialParsed = parseGradient(initialValue.current);
7892
+ setColor(initialParsed);
7893
+ // Reset active color to the last stop of the initial gradient
7894
+ var lastStop = rgbaToArray(initialParsed.stops[initialParsed.stops.length - 1][0]);
7895
+ var newActiveColor = {
7896
+ hex: rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]),
7897
+ alpha: Math.round(lastStop[3] * 100),
7898
+ loc: initialParsed.stops[initialParsed.stops.length - 1][1],
7899
+ index: initialParsed.stops.length - 1
7900
+ };
7901
+ setActiveColor(newActiveColor);
7902
+ // Update iro picker if available
7903
+ if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
7904
+ updateIroPickerColor(newActiveColor);
7905
+ }
7906
+ // Call onChange with initial value
7907
+ onChange(initialValue.current);
7908
+ // Call onReset callback if provided
7909
+ onReset === null || onReset === void 0 ? void 0 : onReset();
7910
+ };
7886
7911
  // Update iro picker when color is selected from default colors panel
7887
7912
  var handleColorFromPanel = function (newColor) {
7888
7913
  setColor(newColor);
@@ -7942,10 +7967,7 @@ var IroGradient = function (_a) {
7942
7967
  }).toHex8String()
7943
7968
  : activeColor.hex;
7944
7969
  return (React.createElement("div", { className: 'w-full rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl', style: {
7945
- backgroundColor: 'var(--colorpicker-panel-bg)',
7946
- borderColor: 'var(--colorpicker-border)',
7947
- borderWidth: '1px',
7948
- borderStyle: 'solid'
7970
+ backgroundColor: 'var(--colorpicker-panel-bg)'
7949
7971
  } },
7950
7972
  React.createElement("div", { className: 'relative', ref: containerRef },
7951
7973
  React.createElement("div", { className: 'flex justify-center items-center rounded-lg', style: {
@@ -7956,20 +7978,27 @@ var IroGradient = function (_a) {
7956
7978
  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 })),
7957
7979
  React.createElement("div", { className: 'pt-4 px-2' },
7958
7980
  React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
7959
- showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
7960
- React.createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
7961
- return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
7962
- })); });
7963
- }, onSubmitChange: onSubmitChange })))));
7981
+ showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
7982
+ React.createElement("div", { className: 'flex-1' },
7983
+ React.createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
7984
+ return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
7985
+ })); });
7986
+ }, onSubmitChange: onSubmitChange })),
7987
+ showReset && (React.createElement("button", { onClick: handleResetColor, className: 'px-3 py-2 text-xs font-medium rounded-md transition-colors duration-200 bg-transparent border border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 hover:bg-gray-800/50 whitespace-nowrap flex items-center gap-1', title: 'Reset to initial color' },
7988
+ React.createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
7989
+ React.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' })),
7990
+ "Reset"))))));
7964
7991
  };
7965
7992
 
7966
7993
  var IroSolidColorPicker = function (_a) {
7967
- var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, defaultColors = _a.defaultColors;
7994
+ var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, defaultColors = _a.defaultColors, _j = _a.showReset, showReset = _j === void 0 ? false : _j, onReset = _a.onReset;
7968
7995
  var node = useRef(null);
7969
7996
  var iroPickerRef = useRef(null);
7970
- var _j = __read(useState(true), 2), init = _j[0], setInit = _j[1];
7971
- var _k = __read(useState(getHexAlpha(value)), 2), color = _k[0], setColor = _k[1];
7972
- var _l = __read(useState(200), 2), pickerWidth = _l[0], setPickerWidth = _l[1];
7997
+ // Store the initial value for reset functionality
7998
+ var initialValue = useRef(value);
7999
+ var _k = __read(useState(true), 2), init = _k[0], setInit = _k[1];
8000
+ var _l = __read(useState(getHexAlpha(value)), 2), color = _l[0], setColor = _l[1];
8001
+ var _m = __read(useState(200), 2), pickerWidth = _m[0], setPickerWidth = _m[1];
7973
8002
  var pickerWidthRef = useRef(200);
7974
8003
  // Update ref when state changes
7975
8004
  useEffect(function () {
@@ -8147,6 +8176,33 @@ var IroSolidColorPicker = function (_a) {
8147
8176
  };
8148
8177
  updateIroColor();
8149
8178
  };
8179
+ // Reset to initial color
8180
+ var handleResetColor = function () {
8181
+ var _a;
8182
+ var initialColorData = getHexAlpha(initialValue.current);
8183
+ setColor(initialColorData);
8184
+ // Update the iro color picker
8185
+ if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
8186
+ var iroColor = showAlpha
8187
+ ? {
8188
+ r: parseInt(initialColorData.hex.slice(1, 3), 16),
8189
+ g: parseInt(initialColorData.hex.slice(3, 5), 16),
8190
+ b: parseInt(initialColorData.hex.slice(5, 7), 16),
8191
+ a: initialColorData.alpha / 100
8192
+ }
8193
+ : initialColorData.hex;
8194
+ try {
8195
+ iroPickerRef.current.colorPicker.color.set(iroColor);
8196
+ }
8197
+ catch (error) {
8198
+ console.warn('Error updating iro color picker on reset:', error);
8199
+ }
8200
+ }
8201
+ // Call onChange with initial value
8202
+ onChange(initialValue.current);
8203
+ // Call onReset callback if provided
8204
+ onReset === null || onReset === void 0 ? void 0 : onReset();
8205
+ };
8150
8206
  // Create layout array conditionally based on showAlpha
8151
8207
  var layoutConfig = [
8152
8208
  {
@@ -8179,9 +8235,6 @@ var IroSolidColorPicker = function (_a) {
8179
8235
  : color.hex;
8180
8236
  return (React.createElement("div", { ref: node, className: 'w-full p-2 rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl overflow-hidden', style: {
8181
8237
  backgroundColor: 'var(--colorpicker-panel-bg)',
8182
- borderColor: 'var(--colorpicker-border)',
8183
- borderWidth: '1px',
8184
- borderStyle: 'solid',
8185
8238
  maxWidth: '100%',
8186
8239
  minWidth: 0,
8187
8240
  boxSizing: 'border-box'
@@ -8202,8 +8255,13 @@ var IroSolidColorPicker = function (_a) {
8202
8255
  React.createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleColorChange })))),
8203
8256
  React.createElement("div", { className: 'border-t pt-4 colorpicker-glass rounded-lg' },
8204
8257
  React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: setInit, colorType: 'solid' })),
8205
- showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
8206
- React.createElement(InputRgba, { hex: color.hex, alpha: color.alpha, format: format, showAlpha: showAlpha, onChange: handleInputChange, onSubmitChange: handleInputSubmit })))));
8258
+ showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
8259
+ React.createElement("div", { className: 'flex-1' },
8260
+ React.createElement(InputRgba, { hex: color.hex, alpha: color.alpha, format: format, showAlpha: showAlpha, onChange: handleInputChange, onSubmitChange: handleInputSubmit })),
8261
+ showReset && (React.createElement("button", { onClick: handleResetColor, className: 'px-3 py-2 text-xs font-medium rounded-md transition-colors duration-200 bg-transparent border border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 hover:bg-gray-800/50 whitespace-nowrap flex items-center gap-1', title: 'Reset to initial color' },
8262
+ React.createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
8263
+ React.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' })),
8264
+ "Reset"))))));
8207
8265
  };
8208
8266
 
8209
8267
  var PopupTabs = function (_a) {
@@ -8248,8 +8306,8 @@ var PopupTabsBodyItem = function (_a) {
8248
8306
  };
8249
8307
 
8250
8308
  var ColorPicker = function (_a) {
8251
- 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;
8252
- var _v = __read(useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _v[0], setActiveTab = _v[1];
8309
+ 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;
8310
+ var _w = __read(useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _w[0], setActiveTab = _w[1];
8253
8311
  var onChangeSolid = function (value) {
8254
8312
  onChange(value);
8255
8313
  };
@@ -8272,17 +8330,17 @@ var ColorPicker = function (_a) {
8272
8330
  React.createElement(PopupTabsHeaderLabel, { tabName: 'gradient', onClick: function () { return onChangeTab('gradient'); } }, "Gradient")),
8273
8331
  React.createElement(PopupTabsBody, null,
8274
8332
  React.createElement(PopupTabsBodyItem, { tabName: 'solid' },
8275
- React.createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })),
8333
+ 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 })),
8276
8334
  React.createElement(PopupTabsBodyItem, { tabName: 'gradient' },
8277
- 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 })))))));
8335
+ 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 })))))));
8278
8336
  }
8279
8337
  return (React.createElement(ThemeProvider, null,
8280
- React.createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
8338
+ React.createElement("div", { className: 'relative dark react-iro-color-picker', "data-color-picker-theme": true },
8281
8339
  React.createElement(ThemeToggle, null),
8282
8340
  solid || gradient ? (React.createElement(PopupTabs, { popupWidth: popupWidth },
8283
8341
  React.createElement(PopupTabsBody, null,
8284
- solid ? (React.createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })) : (React.createElement(Fragment, null)),
8285
- 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 })) : (React.createElement(Fragment, null))))) : null)));
8342
+ 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)),
8343
+ 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)));
8286
8344
  };
8287
8345
 
8288
8346
  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 };