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/dist/index.js CHANGED
@@ -7639,12 +7639,14 @@ var useDebounce = (function (value, delay) {
7639
7639
  });
7640
7640
 
7641
7641
  var IroGradient = function (_a) {
7642
- 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;
7642
+ 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;
7643
+ // Store the initial value for reset functionality
7644
+ var initialValue = React.useRef(value);
7643
7645
  var parsedColors = React.useCallback(function () {
7644
7646
  return parseGradient(value);
7645
7647
  // eslint-disable-next-line react-hooks/exhaustive-deps
7646
7648
  }, [value]);
7647
- var _r = parsedColors(), stops = _r.stops, type = _r.type, modifier = _r.modifier;
7649
+ var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
7648
7650
  var lastStop = rgbaToArray(stops[stops.length - 1][0]);
7649
7651
  var activeStopIndex = stops.length - 1;
7650
7652
  var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
@@ -7652,7 +7654,7 @@ var IroGradient = function (_a) {
7652
7654
  var iroPickerRef = React.useRef(null);
7653
7655
  var containerRef = React.useRef(null);
7654
7656
  var isUpdatingFromGradientStop = React.useRef(false);
7655
- var _s = __read(React.useState(200), 2), pickerWidth = _s[0], setPickerWidth = _s[1];
7657
+ var _t = __read(React.useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
7656
7658
  // Responsive width for IroColorPicker - match solid picker logic
7657
7659
  React.useEffect(function () {
7658
7660
  if (!containerRef.current)
@@ -7691,18 +7693,18 @@ var IroGradient = function (_a) {
7691
7693
  resizeObserver.observe(containerRef.current);
7692
7694
  return function () { return resizeObserver.disconnect(); };
7693
7695
  }, []);
7694
- var _t = __read(React.useState({
7696
+ var _u = __read(React.useState({
7695
7697
  gradient: value,
7696
7698
  type: type,
7697
7699
  modifier: modifier,
7698
7700
  stops: stops
7699
- }), 2), color = _t[0], setColor = _t[1];
7700
- var _u = __read(React.useState({
7701
+ }), 2), color = _u[0], setColor = _u[1];
7702
+ var _v = __read(React.useState({
7701
7703
  hex: activeStop,
7702
7704
  alpha: activeAlpha,
7703
7705
  loc: stops[activeStopIndex][1],
7704
7706
  index: activeStopIndex
7705
- }), 2), activeColor = _u[0], setActiveColor = _u[1];
7707
+ }), 2), activeColor = _v[0], setActiveColor = _v[1];
7706
7708
  var debounceColor = useDebounce(color, debounceMS);
7707
7709
  // Update iro picker color
7708
7710
  var updateIroPickerColor = React.useCallback(function (colorData, retryCount) {
@@ -7891,6 +7893,29 @@ var IroGradient = function (_a) {
7891
7893
  var alpha = Math.round(rgbaArr[3] * 100);
7892
7894
  onChangeActiveColor({ hex: hex, alpha: alpha });
7893
7895
  };
7896
+ // Reset to initial color
7897
+ var handleResetColor = function () {
7898
+ var _a;
7899
+ var initialParsed = parseGradient(initialValue.current);
7900
+ setColor(initialParsed);
7901
+ // Reset active color to the last stop of the initial gradient
7902
+ var lastStop = rgbaToArray(initialParsed.stops[initialParsed.stops.length - 1][0]);
7903
+ var newActiveColor = {
7904
+ hex: rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]),
7905
+ alpha: Math.round(lastStop[3] * 100),
7906
+ loc: initialParsed.stops[initialParsed.stops.length - 1][1],
7907
+ index: initialParsed.stops.length - 1
7908
+ };
7909
+ setActiveColor(newActiveColor);
7910
+ // Update iro picker if available
7911
+ if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
7912
+ updateIroPickerColor(newActiveColor);
7913
+ }
7914
+ // Call onChange with initial value
7915
+ onChange(initialValue.current);
7916
+ // Call onReset callback if provided
7917
+ onReset === null || onReset === void 0 ? void 0 : onReset();
7918
+ };
7894
7919
  // Update iro picker when color is selected from default colors panel
7895
7920
  var handleColorFromPanel = function (newColor) {
7896
7921
  setColor(newColor);
@@ -7950,10 +7975,7 @@ var IroGradient = function (_a) {
7950
7975
  }).toHex8String()
7951
7976
  : activeColor.hex;
7952
7977
  return (React__default["default"].createElement("div", { className: 'w-full rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl', style: {
7953
- backgroundColor: 'var(--colorpicker-panel-bg)',
7954
- borderColor: 'var(--colorpicker-border)',
7955
- borderWidth: '1px',
7956
- borderStyle: 'solid'
7978
+ backgroundColor: 'var(--colorpicker-panel-bg)'
7957
7979
  } },
7958
7980
  React__default["default"].createElement("div", { className: 'relative', ref: containerRef },
7959
7981
  React__default["default"].createElement("div", { className: 'flex justify-center items-center rounded-lg', style: {
@@ -7964,20 +7986,27 @@ var IroGradient = function (_a) {
7964
7986
  React__default["default"].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 })),
7965
7987
  React__default["default"].createElement("div", { className: 'pt-4 px-2' },
7966
7988
  React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
7967
- showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass' },
7968
- React__default["default"].createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
7969
- return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
7970
- })); });
7971
- }, onSubmitChange: onSubmitChange })))));
7989
+ showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
7990
+ React__default["default"].createElement("div", { className: 'flex-1' },
7991
+ React__default["default"].createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
7992
+ return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
7993
+ })); });
7994
+ }, onSubmitChange: onSubmitChange })),
7995
+ showReset && (React__default["default"].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' },
7996
+ React__default["default"].createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
7997
+ React__default["default"].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' })),
7998
+ "Reset"))))));
7972
7999
  };
7973
8000
 
7974
8001
  var IroSolidColorPicker = function (_a) {
7975
- 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;
8002
+ 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;
7976
8003
  var node = React.useRef(null);
7977
8004
  var iroPickerRef = React.useRef(null);
7978
- var _j = __read(React.useState(true), 2), init = _j[0], setInit = _j[1];
7979
- var _k = __read(React.useState(getHexAlpha(value)), 2), color = _k[0], setColor = _k[1];
7980
- var _l = __read(React.useState(200), 2), pickerWidth = _l[0], setPickerWidth = _l[1];
8005
+ // Store the initial value for reset functionality
8006
+ var initialValue = React.useRef(value);
8007
+ var _k = __read(React.useState(true), 2), init = _k[0], setInit = _k[1];
8008
+ var _l = __read(React.useState(getHexAlpha(value)), 2), color = _l[0], setColor = _l[1];
8009
+ var _m = __read(React.useState(200), 2), pickerWidth = _m[0], setPickerWidth = _m[1];
7981
8010
  var pickerWidthRef = React.useRef(200);
7982
8011
  // Update ref when state changes
7983
8012
  React.useEffect(function () {
@@ -8155,6 +8184,33 @@ var IroSolidColorPicker = function (_a) {
8155
8184
  };
8156
8185
  updateIroColor();
8157
8186
  };
8187
+ // Reset to initial color
8188
+ var handleResetColor = function () {
8189
+ var _a;
8190
+ var initialColorData = getHexAlpha(initialValue.current);
8191
+ setColor(initialColorData);
8192
+ // Update the iro color picker
8193
+ if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
8194
+ var iroColor = showAlpha
8195
+ ? {
8196
+ r: parseInt(initialColorData.hex.slice(1, 3), 16),
8197
+ g: parseInt(initialColorData.hex.slice(3, 5), 16),
8198
+ b: parseInt(initialColorData.hex.slice(5, 7), 16),
8199
+ a: initialColorData.alpha / 100
8200
+ }
8201
+ : initialColorData.hex;
8202
+ try {
8203
+ iroPickerRef.current.colorPicker.color.set(iroColor);
8204
+ }
8205
+ catch (error) {
8206
+ console.warn('Error updating iro color picker on reset:', error);
8207
+ }
8208
+ }
8209
+ // Call onChange with initial value
8210
+ onChange(initialValue.current);
8211
+ // Call onReset callback if provided
8212
+ onReset === null || onReset === void 0 ? void 0 : onReset();
8213
+ };
8158
8214
  // Create layout array conditionally based on showAlpha
8159
8215
  var layoutConfig = [
8160
8216
  {
@@ -8187,9 +8243,6 @@ var IroSolidColorPicker = function (_a) {
8187
8243
  : color.hex;
8188
8244
  return (React__default["default"].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: {
8189
8245
  backgroundColor: 'var(--colorpicker-panel-bg)',
8190
- borderColor: 'var(--colorpicker-border)',
8191
- borderWidth: '1px',
8192
- borderStyle: 'solid',
8193
8246
  maxWidth: '100%',
8194
8247
  minWidth: 0,
8195
8248
  boxSizing: 'border-box'
@@ -8210,8 +8263,13 @@ var IroSolidColorPicker = function (_a) {
8210
8263
  React__default["default"].createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleColorChange })))),
8211
8264
  React__default["default"].createElement("div", { className: 'border-t pt-4 colorpicker-glass rounded-lg' },
8212
8265
  React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: setInit, colorType: 'solid' })),
8213
- showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass' },
8214
- React__default["default"].createElement(InputRgba, { hex: color.hex, alpha: color.alpha, format: format, showAlpha: showAlpha, onChange: handleInputChange, onSubmitChange: handleInputSubmit })))));
8266
+ showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
8267
+ React__default["default"].createElement("div", { className: 'flex-1' },
8268
+ React__default["default"].createElement(InputRgba, { hex: color.hex, alpha: color.alpha, format: format, showAlpha: showAlpha, onChange: handleInputChange, onSubmitChange: handleInputSubmit })),
8269
+ showReset && (React__default["default"].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' },
8270
+ React__default["default"].createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
8271
+ React__default["default"].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' })),
8272
+ "Reset"))))));
8215
8273
  };
8216
8274
 
8217
8275
  var PopupTabs = function (_a) {
@@ -8256,8 +8314,8 @@ var PopupTabsBodyItem = function (_a) {
8256
8314
  };
8257
8315
 
8258
8316
  var ColorPicker = function (_a) {
8259
- 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;
8260
- var _v = __read(React.useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _v[0], setActiveTab = _v[1];
8317
+ 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;
8318
+ var _w = __read(React.useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _w[0], setActiveTab = _w[1];
8261
8319
  var onChangeSolid = function (value) {
8262
8320
  onChange(value);
8263
8321
  };
@@ -8280,17 +8338,17 @@ var ColorPicker = function (_a) {
8280
8338
  React__default["default"].createElement(PopupTabsHeaderLabel, { tabName: 'gradient', onClick: function () { return onChangeTab('gradient'); } }, "Gradient")),
8281
8339
  React__default["default"].createElement(PopupTabsBody, null,
8282
8340
  React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'solid' },
8283
- React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })),
8341
+ 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 })),
8284
8342
  React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'gradient' },
8285
- 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 })))))));
8343
+ 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 })))))));
8286
8344
  }
8287
8345
  return (React__default["default"].createElement(ThemeProvider, null,
8288
- React__default["default"].createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
8346
+ React__default["default"].createElement("div", { className: 'relative dark react-iro-color-picker', "data-color-picker-theme": true },
8289
8347
  React__default["default"].createElement(ThemeToggle, null),
8290
8348
  solid || gradient ? (React__default["default"].createElement(PopupTabs, { popupWidth: popupWidth },
8291
8349
  React__default["default"].createElement(PopupTabsBody, null,
8292
- solid ? (React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })) : (React__default["default"].createElement(React.Fragment, null)),
8293
- 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 })) : (React__default["default"].createElement(React.Fragment, null))))) : null)));
8350
+ 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)),
8351
+ 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)));
8294
8352
  };
8295
8353
 
8296
8354
  exports.ColorPicker = ColorPicker;