react-iro-gradient-picker 1.0.0

package/dist/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from '../components';
+export { default } from '../components/core/Colorpicker';
+export * from '../constants';
+export * from '../hooks';
+export * from '../utils';
+export * from './types';

package/dist/lib/types/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/dist/lib/types/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/setupTests.d.ts

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

package/dist/utils/checkFormat.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: string, format: string, showAlpha: boolean, stateColorAlpha?: number) => string;
+export default _default;

package/dist/utils/cn.d.ts

@@ -0,0 +1,6 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx for conditional classes with tailwind-merge for proper class overrides
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/color/color.d.ts

@@ -0,0 +1,71 @@
+import { ColorFormats, Instance } from 'tinycolor2';
+interface IInput {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface ITinyColor {
+    color: Instance;
+    alphaValue: number;
+    blueValue: number;
+    brightnessValue: number;
+    greenValue: number;
+    hueValue: number;
+    lightnessValue: number;
+    saturationValue: number;
+    redValue: number;
+    initRgb(): void;
+    initHsb(): void;
+    toHexString(): string;
+    toRgbString(): string;
+    toHsv(): ColorFormats.HSVA;
+    hex: string;
+    hue: number;
+    saturation: number;
+    lightness: number;
+    brightness: number;
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+    RGB: number[];
+    HSB: number[];
+}
+export default class TinyColor {
+    color: Instance;
+    alphaValue: number;
+    hueValue: number;
+    saturationValue: number;
+    brightnessValue: number;
+    redValue: number;
+    greenValue: number;
+    blueValue: number;
+    lightnessValue: number;
+    constructor(input: IInput | string);
+    static isValidHex(hex: string): boolean;
+    initRgb: () => void;
+    initHsb: () => void;
+    toHexString: () => string;
+    toRgbString: () => string;
+    toHsv: () => ColorFormats.HSVA;
+    get hex(): string;
+    set hue(value: number);
+    get hue(): number;
+    set saturation(value: number);
+    get saturation(): number;
+    set lightness(value: number);
+    get lightness(): number;
+    set brightness(value: number);
+    get brightness(): number;
+    set red(value: number);
+    get red(): number;
+    set green(value: number);
+    get green(): number;
+    set blue(value: number);
+    get blue(): number;
+    set alpha(value: number);
+    get alpha(): number;
+    get RGB(): number[];
+    get HSB(): number[];
+}
+export {};

package/dist/utils/color/getHexAlpha.d.ts

@@ -0,0 +1,5 @@
+declare const _default: (value: string) => {
+    hex: string;
+    alpha: number;
+};
+export default _default;

package/dist/utils/color/hexToRgba.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (hexVal: string, opacityVal: number) => string;
+export default _default;

package/dist/utils/color/index.d.ts

@@ -0,0 +1,6 @@
+export { default as TinyColor } from './color';
+export type { ITinyColor } from './color';
+export { default as getHexAlpha } from './getHexAlpha';
+export { default as hexToRgba } from './hexToRgba';
+export { default as rgbaToArray } from './rgbaToArray';
+export { default as rgbaToHex } from './rgbaToHex';

package/dist/utils/color/rgbaToArray.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: any) => any;
+export default _default;

package/dist/utils/color/rgbaToHex.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (params: Array<string | number>) => string;
+export default _default;

package/dist/utils/color.d.ts

@@ -0,0 +1,71 @@
+import { Instance, ColorFormats } from 'tinycolor2';
+interface IInput {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface ITinyColor {
+    color: Instance;
+    alphaValue: number;
+    blueValue: number;
+    brightnessValue: number;
+    greenValue: number;
+    hueValue: number;
+    lightnessValue: number;
+    saturationValue: number;
+    redValue: number;
+    initRgb(): void;
+    initHsb(): void;
+    toHexString(): string;
+    toRgbString(): string;
+    toHsv(): ColorFormats.HSVA;
+    hex: string;
+    hue: number;
+    saturation: number;
+    lightness: number;
+    brightness: number;
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+    RGB: number[];
+    HSB: number[];
+}
+export default class Color {
+    color: Instance;
+    alphaValue: number;
+    hueValue: number;
+    saturationValue: number;
+    brightnessValue: number;
+    redValue: number;
+    greenValue: number;
+    blueValue: number;
+    lightnessValue: number;
+    constructor(input: IInput | string);
+    static isValidHex(hex: string): boolean;
+    initRgb: () => void;
+    initHsb: () => void;
+    toHexString: () => string;
+    toRgbString: () => string;
+    toHsv: () => ColorFormats.HSVA;
+    get hex(): string;
+    set hue(value: number);
+    get hue(): number;
+    set saturation(value: number);
+    get saturation(): number;
+    set lightness(value: number);
+    get lightness(): number;
+    set brightness(value: number);
+    get brightness(): number;
+    set red(value: number);
+    get red(): number;
+    set green(value: number);
+    get green(): number;
+    set blue(value: number);
+    get blue(): number;
+    set alpha(value: number);
+    get alpha(): number;
+    get RGB(): number[];
+    get HSB(): number[];
+}
+export {};

package/dist/utils/format/checkFormat.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: string, format: string, showAlpha: boolean, stateColorAlpha?: number) => string;
+export default _default;

package/dist/utils/format/getGradient.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (type: string, stops: Array<any>, modifier: string | number | undefined, format: "rgb" | "hsl" | "hex" | undefined, showAlpha: boolean) => string;
+export default _default;

package/dist/utils/format/index.d.ts

@@ -0,0 +1,3 @@
+export { default as checkFormat } from './checkFormat';
+export { default as getGradient } from './getGradient';
+export { default as parseGradient } from './parseGradient';

package/dist/utils/format/parseGradient.d.ts

@@ -0,0 +1,7 @@
+declare const _default: (str: string) => {
+    gradient: string;
+    type: string;
+    modifier: string | number;
+    stops: (string | number)[][];
+};
+export default _default;

package/dist/utils/getGradient.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (type: string, stops: Array<any>, modifier: string | number | undefined, format: "rgb" | "hsl" | "hex" | undefined, showAlpha: boolean) => string;
+export default _default;

package/dist/utils/getHexAlpha.d.ts

@@ -0,0 +1,5 @@
+declare const _default: (value: string) => {
+    hex: string;
+    alpha: number;
+};
+export default _default;

package/dist/utils/hexToRgba.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (hexVal: string, opacityVal: number) => string;
+export default _default;

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './cn';
+export * from './color';
+export * from './format';
+export * from './validation';

package/dist/utils/isValidHex.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (hex: string) => boolean;
+export default _default;

package/dist/utils/isValidRgba.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (rgba: Array<string | number>) => boolean;
+export default _default;

package/dist/utils/parseGradient.d.ts

@@ -0,0 +1,7 @@
+declare const _default: (str: string) => {
+    gradient: string;
+    type: string;
+    modifier: string | number;
+    stops: (string | number)[][];
+};
+export default _default;

package/dist/utils/rgbaToArray.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (color: any) => any;
+export default _default;

package/dist/utils/rgbaToHex.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (params: Array<string | number>) => string;
+export default _default;

package/dist/utils/useDebounce.d.ts

@@ -0,0 +1,2 @@
+declare const _default: <T>(value: T, delay?: number) => T;
+export default _default;

package/dist/utils/validGradient.d.ts

@@ -0,0 +1,15 @@
+interface IGradientStop {
+    color: string;
+    position?: number;
+}
+interface IParsedGraient {
+    stops: IGradientStop[];
+    angle: string;
+    original: string;
+    line: string;
+    side?: string;
+    sideCorner?: string;
+    parseWarning?: boolean;
+}
+declare const _default: (input: string) => string | IParsedGraient;
+export default _default;

package/dist/utils/validation/index.d.ts

@@ -0,0 +1,3 @@
+export { default as isValidHex } from './isValidHex';
+export { default as isValidRgba } from './isValidRgba';
+export { default as validGradient } from './validGradient';

package/dist/utils/validation/isValidHex.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (hex: string) => boolean;
+export default _default;

package/dist/utils/validation/isValidRgba.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (rgba: Array<string | number>) => boolean;
+export default _default;

package/dist/utils/validation/validGradient.d.ts

@@ -0,0 +1,15 @@
+interface IGradientStop {
+    color: string;
+    position?: number;
+}
+interface IParsedGraient {
+    stops: IGradientStop[];
+    angle: string;
+    original: string;
+    line: string;
+    side?: string;
+    sideCorner?: string;
+    parseWarning?: boolean;
+}
+declare const _default: (input: string) => string | IParsedGraient;
+export default _default;

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "react-iro-gradient-picker",
+  "version": "1.0.0",
+  "description": "Modern React gradient and solid color picker with complete dark theme support, built with TypeScript and Tailwind CSS",
+  "keywords": [
+    "react",
+    "react-component",
+    "typescript",
+    "color-picker",
+    "gradient-picker",
+    "dark-theme",
+    "tailwind",
+    "iro",
+    "color",
+    "gradient",
+    "picker",
+    "ui-component"
+  ],
+  "homepage": "https://romfatal.github.io/react-iro-gradient-picker/",
+  "bugs": {
+    "url": "https://github.com/romfatal/react-iro-gradient-picker/issues"
+  },
+  "author": {
+    "name": "romfatal",
+    "url": "https://github.com/romfatal"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/romfatal/react-iro-gradient-picker.git"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.tsx",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=6.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "test": "run-s test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "test:fix": "eslint . --fix",
+    "predeploy": "storybook build",
+    "deploy": "gh-pages -d storybook-static/",
+    "release": "npm run test && release-it",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.1.0",
+    "@storybook/addon-docs": "9.1.7",
+    "@storybook/addon-links": "^9.1.7",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^9.1.7",
+    "@storybook/react-vite": "^9.1.7",
+    "@tailwindcss/cli": "^4.1.13",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/classnames": "^2.2.11",
+    "@types/node": "^20.19.0",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@typescript-eslint/parser": "^4.11.1",
+    "auto-changelog": "^2.2.1",
+    "autoprefixer": "^10.4.21",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "8.1.0",
+    "core-js": "^3.8.2",
+    "css-loader": "^5.0.1",
+    "eslint": "^7.17.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-config-standard-react": "^11.0.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "fork-ts-checker-webpack-plugin": "^6.0.8",
+    "gh-pages": "^3.1.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.5.6",
+    "prettier": "^2.2.1",
+    "prop-types": "^15.8.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "release-it": "^14.2.2",
+    "rollup": "^2.35.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "sass": "^1.92.1",
+    "storybook": "^9.1.7",
+    "style-loader": "^2.0.0",
+    "typescript": "^5.9.2",
+    "web-vitals": "^0.2.4"
+  },
+  "dependencies": {
+    "@jaames/iro": "^5.5.2",
+    "@types/tinycolor2": "^1.4.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "tailwind-merge": "^3.3.1",
+    "tinycolor2": "^1.4.2"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}