react-iro-gradient-picker 1.0.2 → 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
@@ -91,13 +91,18 @@ var ThemeProvider = function (_a) {
91
91
  return defaultTheme;
92
92
  }), 2), theme = _c[0], setTheme = _c[1];
93
93
  useEffect(function () {
94
- var root = window.document.documentElement;
95
- // Remove previous theme class
96
- root.classList.remove('light', 'dark');
97
- // Add new theme class
98
- root.classList.add(theme);
94
+ // Apply theme to local container instead of document root for better scoping
95
+ var containers = document.querySelectorAll('[data-color-picker-theme]');
96
+ containers.forEach(function (container) {
97
+ // Remove previous theme class
98
+ container.classList.remove('light', 'dark');
99
+ // Add new theme class
100
+ container.classList.add(theme);
101
+ });
99
102
  // Store theme preference
100
- localStorage.setItem('color-picker-theme', theme);
103
+ if (typeof window !== 'undefined') {
104
+ localStorage.setItem('color-picker-theme', theme);
105
+ }
101
106
  }, [theme]);
102
107
  var toggleTheme = function () {
103
108
  setTheme(function (prevTheme) { return (prevTheme === 'light' ? 'dark' : 'light'); });
@@ -7626,12 +7631,14 @@ var useDebounce = (function (value, delay) {
7626
7631
  });
7627
7632
 
7628
7633
  var IroGradient = function (_a) {
7629
- 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);
7630
7637
  var parsedColors = useCallback(function () {
7631
7638
  return parseGradient(value);
7632
7639
  // eslint-disable-next-line react-hooks/exhaustive-deps
7633
7640
  }, [value]);
7634
- 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;
7635
7642
  var lastStop = rgbaToArray(stops[stops.length - 1][0]);
7636
7643
  var activeStopIndex = stops.length - 1;
7637
7644
  var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
@@ -7639,7 +7646,7 @@ var IroGradient = function (_a) {
7639
7646
  var iroPickerRef = useRef(null);
7640
7647
  var containerRef = useRef(null);
7641
7648
  var isUpdatingFromGradientStop = useRef(false);
7642
- 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];
7643
7650
  // Responsive width for IroColorPicker - match solid picker logic
7644
7651
  useEffect(function () {
7645
7652
  if (!containerRef.current)
@@ -7678,18 +7685,18 @@ var IroGradient = function (_a) {
7678
7685
  resizeObserver.observe(containerRef.current);
7679
7686
  return function () { return resizeObserver.disconnect(); };
7680
7687
  }, []);
7681
- var _t = __read(useState({
7688
+ var _u = __read(useState({
7682
7689
  gradient: value,
7683
7690
  type: type,
7684
7691
  modifier: modifier,
7685
7692
  stops: stops
7686
- }), 2), color = _t[0], setColor = _t[1];
7687
- var _u = __read(useState({
7693
+ }), 2), color = _u[0], setColor = _u[1];
7694
+ var _v = __read(useState({
7688
7695
  hex: activeStop,
7689
7696
  alpha: activeAlpha,
7690
7697
  loc: stops[activeStopIndex][1],
7691
7698
  index: activeStopIndex
7692
- }), 2), activeColor = _u[0], setActiveColor = _u[1];
7699
+ }), 2), activeColor = _v[0], setActiveColor = _v[1];
7693
7700
  var debounceColor = useDebounce(color, debounceMS);
7694
7701
  // Update iro picker color
7695
7702
  var updateIroPickerColor = useCallback(function (colorData, retryCount) {
@@ -7878,6 +7885,29 @@ var IroGradient = function (_a) {
7878
7885
  var alpha = Math.round(rgbaArr[3] * 100);
7879
7886
  onChangeActiveColor({ hex: hex, alpha: alpha });
7880
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
+ };
7881
7911
  // Update iro picker when color is selected from default colors panel
7882
7912
  var handleColorFromPanel = function (newColor) {
7883
7913
  setColor(newColor);
@@ -7937,34 +7967,38 @@ var IroGradient = function (_a) {
7937
7967
  }).toHex8String()
7938
7968
  : activeColor.hex;
7939
7969
  return (React.createElement("div", { className: 'w-full rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl', style: {
7940
- backgroundColor: 'var(--colorpicker-panel-bg)',
7941
- borderColor: 'var(--colorpicker-border)',
7942
- borderWidth: '1px',
7943
- borderStyle: 'solid'
7970
+ backgroundColor: 'var(--colorpicker-panel-bg)'
7944
7971
  } },
7945
7972
  React.createElement("div", { className: 'relative', ref: containerRef },
7946
7973
  React.createElement("div", { className: 'flex justify-center items-center rounded-lg', style: {
7947
7974
  height: colorBoardHeight + pickerWidth
7948
7975
  } },
7949
7976
  React.createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleIroColorChange }))),
7950
- React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
7977
+ React.createElement("div", { className: 'rounded-lg colorpicker-glass px-4' },
7951
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 })),
7952
- React.createElement("div", { className: 'pt-4' },
7979
+ React.createElement("div", { className: 'pt-4 px-2' },
7953
7980
  React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
7954
- showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
7955
- React.createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
7956
- return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
7957
- })); });
7958
- }, 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"))))));
7959
7991
  };
7960
7992
 
7961
7993
  var IroSolidColorPicker = function (_a) {
7962
- 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;
7963
7995
  var node = useRef(null);
7964
7996
  var iroPickerRef = useRef(null);
7965
- var _j = __read(useState(true), 2), init = _j[0], setInit = _j[1];
7966
- var _k = __read(useState(getHexAlpha(value)), 2), color = _k[0], setColor = _k[1];
7967
- 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];
7968
8002
  var pickerWidthRef = useRef(200);
7969
8003
  // Update ref when state changes
7970
8004
  useEffect(function () {
@@ -8142,6 +8176,33 @@ var IroSolidColorPicker = function (_a) {
8142
8176
  };
8143
8177
  updateIroColor();
8144
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
+ };
8145
8206
  // Create layout array conditionally based on showAlpha
8146
8207
  var layoutConfig = [
8147
8208
  {
@@ -8174,9 +8235,6 @@ var IroSolidColorPicker = function (_a) {
8174
8235
  : color.hex;
8175
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: {
8176
8237
  backgroundColor: 'var(--colorpicker-panel-bg)',
8177
- borderColor: 'var(--colorpicker-border)',
8178
- borderWidth: '1px',
8179
- borderStyle: 'solid',
8180
8238
  maxWidth: '100%',
8181
8239
  minWidth: 0,
8182
8240
  boxSizing: 'border-box'
@@ -8197,8 +8255,13 @@ var IroSolidColorPicker = function (_a) {
8197
8255
  React.createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleColorChange })))),
8198
8256
  React.createElement("div", { className: 'border-t pt-4 colorpicker-glass rounded-lg' },
8199
8257
  React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: setInit, colorType: 'solid' })),
8200
- showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
8201
- 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"))))));
8202
8265
  };
8203
8266
 
8204
8267
  var PopupTabs = function (_a) {
@@ -8208,7 +8271,7 @@ var PopupTabs = function (_a) {
8208
8271
  activeTab: activeTab
8209
8272
  });
8210
8273
  });
8211
- return (React.createElement("div", { className: 'relative rounded-md colorpicker-glass', style: { width: "".concat(popupWidth, "px") } }, childrenContact));
8274
+ return (React.createElement("div", { className: 'relative rounded-md', style: { width: "".concat(popupWidth, "px") } }, childrenContact));
8212
8275
  };
8213
8276
  var PopupTabsHeaderLabel = function (_a) {
8214
8277
  var children = _a.children, activeTab = _a.activeTab, tabName = _a.tabName, onClick = _a.onClick;
@@ -8243,8 +8306,8 @@ var PopupTabsBodyItem = function (_a) {
8243
8306
  };
8244
8307
 
8245
8308
  var ColorPicker = function (_a) {
8246
- 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;
8247
- 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];
8248
8311
  var onChangeSolid = function (value) {
8249
8312
  onChange(value);
8250
8313
  };
@@ -8259,7 +8322,7 @@ var ColorPicker = function (_a) {
8259
8322
  };
8260
8323
  if (solid && gradient) {
8261
8324
  return (React.createElement(ThemeProvider, null,
8262
- React.createElement("div", { className: 'relative' },
8325
+ React.createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
8263
8326
  React.createElement(ThemeToggle, null),
8264
8327
  React.createElement(PopupTabs, { activeTab: activeTab, popupWidth: popupWidth },
8265
8328
  React.createElement(PopupTabsHeader, null,
@@ -8267,17 +8330,17 @@ var ColorPicker = function (_a) {
8267
8330
  React.createElement(PopupTabsHeaderLabel, { tabName: 'gradient', onClick: function () { return onChangeTab('gradient'); } }, "Gradient")),
8268
8331
  React.createElement(PopupTabsBody, null,
8269
8332
  React.createElement(PopupTabsBodyItem, { tabName: 'solid' },
8270
- 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 })),
8271
8334
  React.createElement(PopupTabsBodyItem, { tabName: 'gradient' },
8272
- 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 })))))));
8273
8336
  }
8274
8337
  return (React.createElement(ThemeProvider, null,
8275
- React.createElement("div", { className: 'relative' },
8338
+ React.createElement("div", { className: 'relative dark react-iro-color-picker', "data-color-picker-theme": true },
8276
8339
  React.createElement(ThemeToggle, null),
8277
8340
  solid || gradient ? (React.createElement(PopupTabs, { popupWidth: popupWidth },
8278
8341
  React.createElement(PopupTabsBody, null,
8279
- 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)),
8280
- 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)));
8281
8344
  };
8282
8345
 
8283
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 };