doc: Update type document.

packages/color-alpha/README.md

@@ -35,24 +35,29 @@ function Demo() {
 
 ```ts
 import { HsvaColor } from '@uiw/color-convert';
+import { Interaction } from '@uiw/react-drag-event-interactive';
 declare const BACKGROUND_IMG = 'data:image/png;base64,....'
 interface AlphaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   prefixCls?: string;
   /** String, Pixel value for picker width. Default `316px` */
-  width?: number;
+  width?: React.CSSProperties['width'];
   /** String, Pixel value for picker height. Default `16px` */
-  height?: number;
+  height?: React.CSSProperties['height'];
   /** hsva => `{ h: 0, s: 75, v: 82, a: 1 }` */
   hsva: HsvaColor;
   /** React Component, Custom pointer component */
   pointer?: ({ prefixCls, left }: PointerProps) => JSX.Element;
   /** Set rounded corners. */
-  radius?: number;
+  radius?: React.CSSProperties['borderRadius'];
   /** Set the background color. */
   background?: string;
+  /** Set the background element props. */
+  bgProps?: React.HTMLAttributes<HTMLDivElement>;
+  /** Set the interactive element props. */
+  innerProps?: React.HTMLAttributes<HTMLDivElement>;
   /** String Enum, horizontal or vertical. Default `horizontal` */
   direction?: 'vertical' | 'horizontal';
-  onChange?: (newAlpha: { a: number }, offset: Interaction) => void;
+  onChange?: (newAlpha: { a: number; }, offset: Interaction) => void;
 }
 interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;

packages/color-block/README.md

@@ -34,8 +34,8 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { HsvaColor, ColorResult } from '@uiw/color-convert';
-
 interface BlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   color?: string | HsvaColor;

packages/color-chrome/README.md

@@ -38,14 +38,13 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { GithubProps } from '@uiw/react-color-github';
-
-export enum ChromeInputType {
+export declare enum ChromeInputType {
   HEXA = 'hexa',
   RGBA = 'rgba',
   HSLA = 'hsla',
 }
-
 export interface ChromeProps extends Omit<GithubProps, 'colors'> {
   inputType?: ChromeInputType;
 }

packages/color-circle/README.md

@@ -35,10 +35,10 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
+import { HsvaColor, ColorResult } from '@uiw/color-convert';
 import { SwatchProps } from '@uiw/react-color-swatch';
-import { ColorResult, HsvaColor } from '@uiw/color-convert';
-
-interface CircleProps extends Omit<SwatchProps, 'color' | 'onChange'> {
+export interface CircleProps extends Omit<SwatchProps, 'color' | 'onChange'> {
   color?: string | HsvaColor;
   onChange?: (color: ColorResult) => void;
 }

packages/color-colorful/README.md

@@ -34,7 +34,9 @@ function Demo() {
 ## Props
 
 ```ts
-interface ColorfulProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
+import React from 'react';
+import { HsvaColor, ColorResult } from '@uiw/color-convert';
+export interface ColorfulProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   onChange?: (color: ColorResult) => void;
   color?: string | HsvaColor;

packages/color-compact/README.md

@@ -34,13 +34,13 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { ColorResult, HsvaColor } from '@uiw/color-convert';
-
-interface CompactProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
+export interface CompactProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   color?: string | HsvaColor;
   colors?: string[];
-  onChange?: (color: ColorResult, evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onChange?: (color: ColorResult, evn?: T) => void;
 }
 ```
 

packages/color-convert/README.md

@@ -217,6 +217,89 @@ const { rgb, rgba, hsl, hsv, hsla, hsva } = color('#d1021a');
 
 <!--footer-dividing-->
 
+## type
+
+```ts
+export declare const equalColorObjects: (first: ObjectColor, second: ObjectColor) => boolean;
+export declare const equalColorString: (first: string, second: string) => boolean;
+export declare const equalHex: (first: string, second: string) => boolean;
+export declare const validHex: (hex: string) => boolean;
+export declare const getContrastingColor: (str: string | HsvaColor) => "#fff" | "#000";
+export declare type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
+export declare type ColorResult = {
+  rgb: RgbColor;
+  hsl: HslColor;
+  hsv: HsvColor;
+  rgba: RgbaColor;
+  hsla: HslaColor;
+  hsva: HsvaColor;
+  hex: string;
+  hexa: string;
+};
+export interface HsvColor {
+  h: number;
+  s: number;
+  v: number;
+}
+export interface HsvaColor extends HsvColor {
+  a: number;
+}
+export interface RgbColor {
+  r: number;
+  g: number;
+  b: number;
+}
+export interface RgbaColor extends RgbColor {
+  a: number;
+}
+/**
+ * ```js
+ * rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 }
+ * ```
+ */
+export declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+export declare const hsvaToHslString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvString: ({ h, s, v }: HsvaColor) => string;
+export declare const hsvaToHsvaString: ({ h, s, v, a }: HsvaColor) => string;
+export declare const hsvaToHslaString: (hsva: HsvaColor) => string;
+export declare const hslStringToHsla: (str: string) => HslaColor;
+export declare const hslaStringToHsva: (hslString: string) => HsvaColor;
+export declare const hslStringToHsva: (hslString: string) => HsvaColor;
+export declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor;
+export interface HslColor {
+  h: number;
+  s: number;
+  l: number;
+}
+export interface HslaColor extends HslColor {
+  a: number;
+}
+export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
+export declare const hsvaStringToHsva: (hsvString: string) => HsvaColor;
+export declare const parseHue: (value: string, unit?: string) => number;
+export declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
+export declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
+/** Converts an RGBA color plus alpha transparency to hex */
+export declare const rgbaToHex: ({ r, g, b }: RgbaColor) => string;
+export declare const rgbaToHexa: ({ r, g, b, a }: RgbaColor) => string;
+export declare const hexToHsva: (hex: string) => HsvaColor;
+export declare const hexToRgba: (hex: string) => RgbaColor;
+/**
+ * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
+ * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
+ */
+export declare const hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
+export declare const hsvaToRgbString: (hsva: HsvaColor) => string;
+export declare const hsvaToRgbaString: (hsva: HsvaColor) => string;
+export declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
+export declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
+export declare const hsvaToHex: (hsva: HsvaColor) => string;
+export declare const hsvaToHexa: (hsva: HsvaColor) => string;
+export declare const hsvaToHsv: ({ h, s, v }: HsvaColor) => HsvColor;
+export declare const color: (str: string | HsvaColor) => ColorResult;
+```
+
 ## License
 
 Licensed under the MIT License.

packages/color-editable-input-hsla/README.md

@@ -38,9 +38,9 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { EditableInputRGBAProps } from '@uiw/react-color-editable-input-rgba';
-
-interface EditableInputHSLAProps extends Omit<EditableInputRGBAProps, 'rProps' | 'gProps' | 'bProps'> {
+export interface EditableInputHSLAProps extends Omit<EditableInputRGBAProps, 'rProps' | 'gProps' | 'bProps'> {
   hProps?: EditableInputRGBAProps['gProps'];
   sProps?: EditableInputRGBAProps['gProps'];
   lProps?: EditableInputRGBAProps['gProps'];

packages/color-editable-input-rgba/README.md

@@ -38,16 +38,17 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { EditableInputProps } from '@uiw/react-color-editable-input';
-
-interface EditableInputRGBAProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+import { HsvaColor, ColorResult } from '@uiw/color-convert';
+export interface EditableInputRGBAProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   prefixCls?: string;
   hsva: HsvaColor;
   placement?: 'top' | 'left' | 'bottom' | 'right';
   rProps?: EditableInputProps;
   gProps?: EditableInputProps;
   bProps?: EditableInputProps;
-  aProps?: EditableInputProps;
+  aProps?: false | EditableInputProps;
   onChange?: (color: ColorResult) => void;
 }
 ```

packages/color-editable-input/README.md

@@ -37,10 +37,11 @@ function Demo() {
 ## Props
 
 ```ts
-interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+import React from 'react';
+export interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   prefixCls?: string;
   value?: string | number;
-  label?: string;
+  label?: React.ReactNode;
   labelStyle?: React.CSSProperties;
   placement?: 'top' | 'left' | 'bottom' | 'right';
   inputStyle?: React.CSSProperties;

packages/color-github/README.md

@@ -34,23 +34,26 @@ function Demo() {
 ## Props
 
 ```ts
-import { SwatchProps } from '@uiw/react-color-swatch';
-
-export enum GithubPlacement {
-  Left = 'L',
-  LeftTop = 'LT',
-  LeftBotton = 'LB',
-  Right = 'R',
-  RightTop = 'RT',
-  RightBotton = 'RB',
-  Top = 'T',
-  TopRight = 'TR',
-  TopLeft = 'TL',
-  Botton = 'B',
-  BottonLeft = 'BL',
-  BottonRight = 'BR',
+import React from 'react';
+import { HsvaColor, ColorResult } from '@uiw/color-convert';
+import { SwatchProps, SwatchRectRenderProps } from '@uiw/react-color-swatch';
+export declare enum GithubPlacement {
+  Left = "L",
+  LeftTop = "LT",
+  LeftBotton = "LB",
+  Right = "R",
+  RightTop = "RT",
+  RightBotton = "RB",
+  Top = "T",
+  TopRight = "TR",
+  TopLeft = "TL",
+  Botton = "B",
+  BottonLeft = "BL",
+  BottonRight = "BR"
+}
+export interface GithubRectRenderProps extends SwatchRectRenderProps {
+  arrow?: JSX.Element;
 }
-
 export interface GithubProps extends Omit<SwatchProps, 'color' | 'onChange'> {
   placement?: GithubPlacement;
   color?: string | HsvaColor;

packages/color-hue/README.md

@@ -34,10 +34,10 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { AlphaProps } from '@uiw/react-color-alpha';
-
-interface HueProps extends Omit<AlphaProps, 'hsva' | 'onChange'> {
-  onChange?: (newHue: { h: number }) => void;
+export interface HueProps extends Omit<AlphaProps, 'hsva' | 'onChange'> {
+  onChange?: (newHue: { h: number; }) => void;
   hue: number;
 }
 ```

packages/color-material/README.md

@@ -34,9 +34,9 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { HsvaColor, ColorResult } from '@uiw/color-convert';
-
-interface MaterialProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
+export interface MaterialProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   color?: string | HsvaColor;
   onChange?: (color: ColorResult) => void;

packages/color-name/README.md

@@ -29,7 +29,6 @@ colorNameToHex('white');    // => #ffffff
 ## Props
 
 ```ts
-export default function colorNameToHex(name: keyof typeof colorKeywords): string;
 export declare const colorKeywordsBase: {
     aqua: string;
     black: string;
@@ -201,6 +200,7 @@ export declare const colorKeywords: {
     white: string;
     yellow: string;
 };
+export default function colorNameToHex(name: keyof typeof colorKeywords): string;
 ```
 
 <!--footer-dividing-->

packages/color-saturation/README.md

@@ -34,12 +34,22 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { HsvaColor } from '@uiw/color-convert';
-
-interface SaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefixCls?: string;
+  top?: string;
+  left: string;
+  color?: string;
+}
+export declare const Pointer: ({ className, color, left, top, prefixCls }: PointerProps) => JSX.Element;
+export interface SaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   prefixCls?: string;
   /** hsva => `{ h: 0, s: 75, v: 82, a: 1 }` */
   hsva: HsvaColor;
+  radius?: React.CSSProperties['borderRadius'];
+  /** React Component, Custom pointer component */
+  pointer?: ({ prefixCls, left, top, color }: PointerProps) => JSX.Element;
   onChange?: (newColor: HsvaColor) => void;
 }
 ```

packages/color-shade-slider/README.md

@@ -34,10 +34,13 @@ function Demo() {
 ## Props
 
 ```ts
+import React from 'react';
 import { AlphaProps } from '@uiw/react-color-alpha';
-
-interface ShadeSliderProps extends Omit<AlphaProps, 'onChange'> {
-  onChange?: (newShade: { v: number; s: number }) => void;
+export interface ShadeSliderProps extends Omit<AlphaProps, 'onChange'> {
+  onChange?: (newShade: {
+      v: number;
+      s: number;
+  }) => void;
 }
 ```
 

packages/color-sketch/README.md

@@ -35,13 +35,14 @@ function Demo() {
 ## Props
 
 ```ts
-import { ColorResult } from '@uiw/color-convert';
-export type PresetColor = { color: string; title: string } | string;
+import React from 'react';
+import { HsvaColor, ColorResult } from '@uiw/color-convert';
+import { SwatchPresetColor } from '@uiw/react-color-swatch';
 export interface SketchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   width?: number;
   color?: string | HsvaColor;
-  presetColors?: false | PresetColor[];
+  presetColors?: false | SwatchPresetColor[];
   editableDisable?: boolean;
   onChange?: (newShade: ColorResult) => void;
 }