react-iro-gradient-picker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c)2021 undind
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,198 @@
+<!-- markdownlint-disable -->
+# React Iro Gradient Picker
+
+## ✨ Modern React Color Picker with Complete Dark Theme Support! ✨
+
+A beautiful, modern React gradient and solid color picker with full dark theme integration, built with Tailwind CSS and TypeScript.
+
+### Inspired by [gpickr](https://github.com/Simonwep/gpickr) and enhanced with modern features
+
+[![NPM](https://img.shields.io/npm/v/react-iro-gradient-picker.svg)](https://www.npmjs.com/package/react-iro-gradient-picker) [![License](https://img.shields.io/npm/l/react-iro-gradient-picker.svg)](https://github.com/romfatal/react-iro-gradient-picker/blob/main/LICENSE)
+
+**[Demo](https://romfatal.github.io/react-iro-gradient-picker/)**
+
+## ✨ Features
+
+- 🌙 **Complete Dark Theme** - Works perfectly across all components (modal, solid, gradient)
+- 🎨 **Gradient & Solid Colors** - Full support for both gradient and solid color picking
+- 🔄 **Theme Toggle** - Easy switching between light and dark themes
+- 💾 **Theme Persistence** - Automatically saves user theme preference
+- 🎯 **Tailwind CSS** - Modern styling with comprehensive theming system
+- 📱 **Responsive Design** - Works great on all screen sizes
+
+## Install
+
+### **Important: this component uses React Hooks and works on React version 16.8.0 and higher**
+
+---
+
+```bash
+npm install --save react-iro-gradient-picker
+```
+
+OR
+
+```bash
+yarn add react-iro-gradient-picker
+```
+
+## Usage
+
+```tsx
+import React from 'react';
+import ReactIroGradientPicker from 'react-iro-gradient-picker';
+
+function App() {
+  const onChange = (value) => {
+    console.log(value);
+  };
+
+  return <ReactIroGradientPicker value='red' onChange={onChange} />;
+}
+
+export default App;
+```
+
+## 🌟 What Makes This Special
+
+This is an enhanced version of the original react-gcolor-picker with major improvements:
+
+### 🌙 Complete Dark Theme Integration
+
+- **Fixed all components** - Modal, solid picker, gradient picker, and inputs now work perfectly in dark mode
+- **CSS Custom Properties** - Dynamic theming that responds to theme changes
+- **Tailwind CSS Integration** - Modern, maintainable styling system
+- **Theme Toggle Component** - Easy switching between light/dark themes
+- **Persistent Preferences** - Automatically saves user's theme choice
+
+### 🎯 Enhanced Storybook Documentation
+
+- **Dark-themed Storybook** - Professional development environment
+- **Comprehensive Documentation** - Updated guides and examples
+- **Live Examples** - See all components working in both themes
+
+### 🚀 Modern Development Stack
+
+- **TypeScript Support** - Full type safety and better development experience
+- **Updated Dependencies** - Latest versions of all packages
+- **Better Build Process** - Optimized for modern React applications
+
+export default App;
+
+```
+
+## Props
+
+| Attribute             |    Type    |           Default           | Description                                                                                           |
+| :-------------------- | :--------: | :-------------------------: | :---------------------------------------------------------------------------------------------------- |
+| value                 |  `string`  |          `#ffffff`          | Default color value. Accept: rgba/rgb, hsla/hsl, named colors                                         |
+| format                |  `string`  |            `rgb`            | Return value format. Accept: 'rgb', 'hex', 'hsl'                                                      |
+| gradient              |   `bool`   |           `false`           | Show gradient color panel                                                                             |
+| solid                 |   `bool`   |           `true`            | Show solid color panel                                                                                |
+| debounceMS            |  `number`  |            `300`            | Debounce ms value                                                                                     |
+| debounce              |   `bool`   |           `true`            | Debouce off/on                                                                                        |
+| showAlpha             |   `bool`   |           `true`            | Show/hide alpha input and range                                                                       |
+| showInputs            |   `bool`   |           `true`            | Show/hide inputs alpha and color                                                                      |
+| showGradientResult    |   `bool`   |           `true`            | Show/hide gradient result fields(angle, mode, position)                                               |
+| showGradientStops     |   `bool`   |           `true`            | Show/hide gradient color stops                                                                        |
+| showGradientMode      |   `bool`   |           `true`            | Show/hide gradient color mode switcher                                                                |
+| showGradientAngle     |   `bool`   |           `true`            | Show/hide gradient angle for linear-gradient                                                          |
+| showGradientPosition  |   `bool`   |           `true`            | Show/hide gradient position for radial-gradient                                                       |
+| allowAddGradientStops |   `bool`   |           `true`            | Allow to add new gradient stops                                                                       |
+| popupWidth            |  `number`  |            `267`            | Popup width                                                                                           |
+| colorBoardHeight      |  `number`  |            `120`            | Board color height                                                                                    |
+| defaultColors         |  `array`   | [List](#default-color-list) | Default colors array for panel picker                                                                 |
+| defaultActiveTab      |  `string`  |         `undefined`         | Default value for active tab when initializing the component, takes two values: `solid` or `gradient` |
+| onChangeTabs          | `function` |           `null`            | Default onChange function detect when tabs change and return one of the values: `solid` or `gradient` |
+| onChange              | `function` |           `null`            | Default onChange function returns string value in the given format                                    |
+
+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
+
+```
+
+linear-gradient(180deg, #000000,#ff0000)
+
+```
+
+### Correct
+
+```
+
+linear-gradient(180deg, #000000 0%,#ff0000 100%)
+
+```
+
+If you are using a radial gradient a list of possible directions for it:
+
+```
+
+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
+
+```
+
+## Default color list
+
+```
+
+'#FF6900',
+'#FCB900',
+'#7BDCB5',
+'#00D084',
+'#8ED1FC',
+'#0693E3',
+'#ABB8C3',
+'#607d8b',
+'#EB144C',
+'#F78DA7',
+'#ba68c8',
+'#9900EF',
+'linear-gradient(0deg, rgb(255, 177, 153) 0%, rgb(255, 8, 68) 100%)',
+'linear-gradient(270deg, rgb(251, 171, 126) 8.00%, rgb(247, 206, 104) 92.00%)',
+'linear-gradient(315deg, rgb(150, 230, 161) 8.00%, rgb(212, 252, 121) 92.00%)',
+'linear-gradient(to left, rgb(249, 240, 71) 0%, rgb(15, 216, 80) 100%)',
+'linear-gradient(315deg, rgb(194, 233, 251) 8.00%, rgb(161, 196, 253) 92.00%)',
+'linear-gradient(0deg, rgb(0, 198, 251) 0%, rgb(0, 91, 234) 100%)',
+'linear-gradient(0deg, rgb(167, 166, 203) 0%, rgb(137, 137, 186) 51.00%, rgb(137, 137, 186) 100%)',
+'linear-gradient(0deg, rgb(80, 82, 133) 0%, rgb(88, 94, 146) 15.0%, rgb(101, 104, 159) 28.00%, rgb(116, 116, 176) 43.00%, rgb(126, 126, 187) 57.00%, rgb(131, 137, 199) 71.00%, rgb(151, 149, 212) 82.00%, rgb(162, 161, 220) 92.00%, rgb(181, 174, 228) 100%)',
+'linear-gradient(270deg, rgb(255, 126, 179) 0%, rgb(255, 117, 140) 100%)',
+'linear-gradient(90deg, rgb(120, 115, 245) 0%, rgb(236, 119, 171) 100%)',
+'linear-gradient(45deg, #2e266f 0.00%, #9664dd38 100.00%)',
+'radial-gradient(circle at center, yellow 0%, #009966 50%, purple 100%)'
+
+```
+
+## FAQ
+
+**Q:** There's any possibility to remove extra gradient lines?
+
+**A:** Yes, you only need to drag them outside(bottom) the Gradient component area or double click on the element you want to remove.
+
+## Credits & Attribution
+
+This project is based on the excellent [react-gcolor-picker](https://github.com/undind/react-gcolor-picker) by [undind](https://github.com/undind), enhanced with:
+
+- Complete dark theme integration
+- Modern Tailwind CSS styling
+- Improved TypeScript support
+- Enhanced Storybook documentation
+- Better accessibility features
+
+Special thanks to the original author for creating such a solid foundation! 🙏
+
+## License
+
+MIT © [romfatal](https://github.com/romfatal)
+
+Original project: MIT © [undind](https://github.com/undind)
+```

package/dist/App.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/App.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/setupTests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Colorpicker/ColorPanel/Alpha.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TPropsCompAlpha } from './types';
+declare const Alpha: FC<TPropsCompAlpha>;
+export default Alpha;

package/dist/components/Colorpicker/ColorPanel/Board.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TPropsComp } from './types';
+declare const Board: FC<TPropsComp>;
+export default Board;

package/dist/components/Colorpicker/ColorPanel/Ribbon.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TPropsComp } from './types';
+declare const Ribbon: FC<TPropsComp>;
+export default Ribbon;

package/dist/components/Colorpicker/ColorPanel/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TPropsMain } from './types';
+declare const Panel: FC<TPropsMain>;
+export default Panel;

package/dist/components/Colorpicker/ColorPanel/types.d.ts

@@ -0,0 +1,34 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ITinyColor } from '../../../utils/color';
+export type TPropsChange = {
+    alpha: number;
+    hex: string;
+};
+export type TPropsComp = {
+    rootPrefixCls?: string;
+    color: ITinyColor;
+    alpha?: number;
+    colorBoardHeight?: number;
+    onChange: (color: ITinyColor) => void;
+    setChange: Dispatch<SetStateAction<boolean>>;
+};
+export type TPropsCompAlpha = {
+    rootPrefixCls?: string;
+    color: ITinyColor;
+    alpha?: number;
+    showAlpha?: boolean;
+    onChange: (alpha: number) => void;
+    setChange: Dispatch<SetStateAction<boolean>>;
+};
+export type TPropsMain = {
+    alpha: number;
+    className?: string;
+    hex: string;
+    showAlpha?: boolean;
+    colorBoardHeight?: number;
+    onChange: ({ alpha, hex }: TPropsChange) => void;
+};
+export type TCoords = {
+    x: number;
+    y: number;
+};

package/dist/components/Colorpicker/DefaultColorPanel/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { IActiveColor } from '../types';
+interface IProps {
+    defaultColors?: Array<string>;
+    setColor: (color: any) => void;
+    setInit: (init: boolean) => void;
+    setActiveColor?: (color: IActiveColor) => void;
+    colorType: 'solid' | 'gradient';
+}
+declare const DefaultColorPanel: FC<IProps>;
+export default DefaultColorPanel;

package/dist/components/Colorpicker/Gradient/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IPropsComp } from '../types';
+declare const Gradient: FC<IPropsComp>;
+export default Gradient;

package/dist/components/Colorpicker/GradientPanel/Markers.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IPropsPanel } from './types';
+declare const Markers: FC<IPropsPanel>;
+export default Markers;

package/dist/components/Colorpicker/GradientPanel/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IPropsPanel } from './types';
+declare const _default: React.NamedExoticComponent<IPropsPanel>;
+export default _default;

package/dist/components/Colorpicker/GradientPanel/types.d.ts

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction } from 'react';
+import { IActiveColor } from '../types';
+export interface IColor {
+    gradient: string;
+    type: string;
+    modifier: string | number;
+    stops: Array<any>;
+}
+export type TCoords = {
+    x: number;
+    y: number;
+    shiftKey?: number | boolean;
+    ctrlKey?: number | boolean;
+};
+export interface IPropsPanel {
+    color: IColor;
+    setColor: (color: IColor) => void;
+    activeColor: IActiveColor;
+    setActiveColor: Dispatch<SetStateAction<IActiveColor>>;
+    setInit: Dispatch<SetStateAction<boolean>>;
+    showAlpha?: boolean;
+    showGradientResult?: boolean;
+    showGradientStops?: boolean;
+    showGradientMode?: boolean;
+    showGradientAngle?: boolean;
+    showGradientPosition?: boolean;
+    allowAddGradientStops?: boolean;
+    format?: 'rgb' | 'hsl' | 'hex';
+}

package/dist/components/Colorpicker/Solid/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IPropsComp } from '../types';
+declare const ColorPickerSolid: FC<IPropsComp>;
+export default ColorPickerSolid;

package/dist/components/Colorpicker/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_COLORS: string[];
+export declare const RADIALS_POS: {
+    pos: string;
+    css: string;
+    active: boolean;
+}[];

package/dist/components/Colorpicker/helper.d.ts

@@ -0,0 +1,4 @@
+export declare const getIndexActiveTag: (value: string) => string;
+export declare const checkValidColorsArray: (arr: string[], type: "solid" | "grad") => string[];
+export declare const arraysEqual: (a: Array<any>, b: Array<any>) => boolean;
+export declare const shallowEqual: (object1: any, object2: any) => boolean;

package/dist/components/Colorpicker/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import '../../styles/tailwind.css';
+import './_colorpicker.scss';
+import { IPropsMain } from './types';
+declare const ColorPicker: FC<IPropsMain>;
+export default ColorPicker;

package/dist/components/Colorpicker/types.d.ts

@@ -0,0 +1,35 @@
+import { ReactText } from 'react';
+export interface IPropsComp {
+    value: string;
+    format?: 'rgb' | 'hsl' | 'hex';
+    debounceMS?: number;
+    debounce?: boolean;
+    showAlpha?: boolean;
+    showInputs?: boolean;
+    showGradientResult?: boolean;
+    showGradientStops?: boolean;
+    showGradientMode?: boolean;
+    showGradientAngle?: boolean;
+    showGradientPosition?: boolean;
+    allowAddGradientStops?: boolean;
+    colorBoardHeight?: number;
+    defaultColors?: string[];
+    defaultActiveTab?: string | undefined;
+    onChangeTabs?: (tab: string) => void;
+    onChange: (value: string) => void;
+}
+export interface IPropsMain extends IPropsComp {
+    gradient?: boolean;
+    solid?: boolean;
+    popupWidth?: number;
+}
+export type TPropsChange = {
+    alpha: number;
+    hex: string;
+};
+export interface IActiveColor {
+    hex: string;
+    alpha: number;
+    loc: ReactText;
+    index: ReactText;
+}

package/dist/components/InputRgba/helpers.d.ts

@@ -0,0 +1,34 @@
+import { KeyboardEvent, ChangeEvent } from 'react';
+interface IInput {
+    alphaValue: number;
+    hexValue: string;
+    showAlpha?: boolean;
+    onChangeAlpha: (value: string) => void;
+    onChangeHex: (value: string) => void;
+}
+export declare const getAlphaValue: (value: string) => string | number;
+export declare const onlyDigits: (string: string) => string;
+export declare const onlyLatins: (string: string) => string;
+export declare const handlePressEnter: (e: KeyboardEvent, fn: () => void) => void;
+export declare const inputsData: (props: IInput) => ({
+    wrapClass: string;
+    labelSymbol: boolean;
+    idInput: string;
+    valueInput: string;
+    labelText: string;
+    labelArea: string;
+    labelClass: string;
+    onChangeInput: (e: ChangeEvent<HTMLInputElement>) => void;
+    name: string;
+} | {
+    wrapClass: string;
+    labelSymbol: boolean;
+    idInput: string;
+    valueInput: number;
+    labelText: string;
+    labelArea: string;
+    labelClass: string;
+    onChangeInput: (e: ChangeEvent<HTMLInputElement>) => void;
+    name: string;
+})[];
+export {};

package/dist/components/InputRgba/index.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import './_input_rgba.scss';
+interface IChange {
+    hex: string;
+    alpha: number;
+}
+type TProps = {
+    hex: string;
+    alpha: number;
+    format?: 'rgb' | 'hsl' | 'hex';
+    showAlpha?: boolean;
+    onChange: ({ hex, alpha }: IChange) => void;
+    onSubmitChange?: (rgba: string) => void;
+};
+declare const InputRgba: FC<TProps>;
+export default InputRgba;

package/dist/components/PopupTab/index.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import './_popup_tabs.scss';
+interface Popups {
+    children?: any;
+    activeTab?: string | 'solid' | 'gradient';
+    tabName?: string;
+    popupWidth?: number;
+    onClick?: () => void;
+}
+export declare const PopupTabs: FC<Popups>;
+export declare const PopupTabsHeaderLabel: FC<Popups>;
+export declare const PopupTabsHeader: FC<Popups>;
+export declare const PopupTabsBody: FC<Popups>;
+export declare const PopupTabsBodyItem: FC<Popups>;
+export {};

package/dist/components/ThemeToggle/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ThemeToggleProps {
+    className?: string;
+}
+export declare const ThemeToggle: React.FC<ThemeToggleProps>;
+export {};

package/dist/components/core/Colorpicker/ColorPanel/Alpha.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TPropsCompAlpha } from './types';
+declare const Alpha: FC<TPropsCompAlpha>;
+export default Alpha;

package/dist/components/core/Colorpicker/ColorPanel/Board.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TPropsComp } from './types';
+declare const Board: FC<TPropsComp>;
+export default Board;

package/dist/components/core/Colorpicker/ColorPanel/Ribbon.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TPropsComp } from './types';
+declare const Ribbon: FC<TPropsComp>;
+export default Ribbon;

package/dist/components/core/Colorpicker/ColorPanel/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TPropsMain } from './types';
+declare const Panel: FC<TPropsMain>;
+export default Panel;

package/dist/components/core/Colorpicker/ColorPanel/types.d.ts

@@ -0,0 +1,34 @@
+import { Dispatch, SetStateAction } from 'react';
+import type { ITinyColor } from '../../../../utils/color';
+export type TPropsChange = {
+    alpha: number;
+    hex: string;
+};
+export type TPropsComp = {
+    rootPrefixCls?: string;
+    color: ITinyColor;
+    alpha?: number;
+    colorBoardHeight?: number;
+    onChange: (color: ITinyColor) => void;
+    setChange: Dispatch<SetStateAction<boolean>>;
+};
+export type TPropsCompAlpha = {
+    rootPrefixCls?: string;
+    color: ITinyColor;
+    alpha?: number;
+    showAlpha?: boolean;
+    onChange: (alpha: number) => void;
+    setChange: Dispatch<SetStateAction<boolean>>;
+};
+export type TPropsMain = {
+    alpha: number;
+    className?: string;
+    hex: string;
+    showAlpha?: boolean;
+    colorBoardHeight?: number;
+    onChange: ({ alpha, hex }: TPropsChange) => void;
+};
+export type TCoords = {
+    x: number;
+    y: number;
+};

package/dist/components/core/Colorpicker/DefaultColorPanel/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { IActiveColor } from '../../../../lib/types';
+interface IProps {
+    defaultColors?: Array<string>;
+    setColor: (color: any) => void;
+    setInit: (init: boolean) => void;
+    setActiveColor?: (color: IActiveColor) => void;
+    colorType: 'solid' | 'gradient';
+}
+declare const DefaultColorPanel: FC<IProps>;
+export default DefaultColorPanel;

package/dist/components/core/Colorpicker/Gradient/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IPropsComp } from '../../../../lib/types';
+declare const Gradient: FC<IPropsComp>;
+export default Gradient;

package/dist/components/core/Colorpicker/GradientPanel/Markers.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IPropsPanel } from './types';
+declare const Markers: FC<IPropsPanel>;
+export default Markers;

package/dist/components/core/Colorpicker/GradientPanel/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IPropsPanel } from './types';
+declare const _default: React.NamedExoticComponent<IPropsPanel>;
+export default _default;

package/dist/components/core/Colorpicker/GradientPanel/types.d.ts

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction } from 'react';
+import { IActiveColor } from '../../../../lib/types';
+export interface IColor {
+    gradient: string;
+    type: string;
+    modifier: string | number;
+    stops: Array<any>;
+}
+export type TCoords = {
+    x: number;
+    y: number;
+    shiftKey?: number | boolean;
+    ctrlKey?: number | boolean;
+};
+export interface IPropsPanel {
+    color: IColor;
+    setColor: (color: IColor) => void;
+    activeColor: IActiveColor;
+    setActiveColor: Dispatch<SetStateAction<IActiveColor>>;
+    setInit: Dispatch<SetStateAction<boolean>>;
+    showAlpha?: boolean;
+    showGradientResult?: boolean;
+    showGradientStops?: boolean;
+    showGradientMode?: boolean;
+    showGradientAngle?: boolean;
+    showGradientPosition?: boolean;
+    allowAddGradientStops?: boolean;
+    format?: 'rgb' | 'hsl' | 'hex';
+}

package/dist/components/core/Colorpicker/IroGradient/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IPropsComp } from '../../../../lib/types';
+declare const IroGradient: FC<IPropsComp>;
+export default IroGradient;

package/dist/components/core/Colorpicker/IroSolid/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IPropsComp } from '../../../../lib/types';
+declare const IroSolidColorPicker: FC<IPropsComp>;
+export default IroSolidColorPicker;

package/dist/components/core/Colorpicker/Solid/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IPropsComp } from '../../../../lib/types';
+declare const ColorPickerSolid: FC<IPropsComp>;
+export default ColorPickerSolid;

package/dist/components/core/Colorpicker/helper.d.ts

@@ -0,0 +1,4 @@
+export declare const getIndexActiveTag: (value: string) => string;
+export declare const checkValidColorsArray: (arr: string[], type: "solid" | "grad") => string[];
+export declare const arraysEqual: (a: Array<any>, b: Array<any>) => boolean;
+export declare const shallowEqual: (object1: any, object2: any) => boolean;

package/dist/components/core/Colorpicker/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import '../../../styles/tailwind.css';
+import './_colorpicker.scss';
+import { IPropsMain } from '../../../lib/types/types';
+declare const ColorPicker: FC<IPropsMain>;
+export default ColorPicker;