@douyinfe/semi-foundation 2.63.2-alpha.0 → 2.64.0

package/lib/cjs/colorPicker/DataPartFoundation.d.ts

@@ -0,0 +1,28 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation, { ColorPickerProps } from "./foundation";
+import { HsvaColor, RgbaColor } from "./interface";
+type Value = ColorPickerProps['value'];
+export interface DataPartBaseProps {
+    currentColor: Value;
+    defaultFormat: 'hex' | 'rgba' | 'hsva';
+    width: number;
+    alpha?: boolean;
+    foundation: ColorPickerFoundation;
+    eyeDropper: boolean;
+}
+export interface DataPartBaseState {
+    format: 'hex' | 'rgba' | 'hsva';
+    inputValue: string;
+}
+export interface DataPartAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getColorPickerFoundation: () => ColorPickerFoundation;
+}
+declare class DataPartFoundation extends BaseFoundation<DataPartAdapter<DataPartBaseProps, DataPartBaseState>, DataPartBaseProps, DataPartBaseState> {
+    constructor(adapter: DataPartAdapter<DataPartBaseProps, DataPartBaseState>);
+    getInputValue: () => string;
+    getValueByInputValue: (value: string) => string | false | HsvaColor | RgbaColor;
+    handlePickValueWithStraw: () => Promise<void>;
+    handleInputValueChange: (value: string) => void;
+    handleFormatChange: (format: DataPartBaseState['format']) => void;
+}
+export default DataPartFoundation;

package/lib/cjs/colorPicker/DataPartFoundation.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _foundation2 = _interopRequireDefault(require("./foundation"));
+var _split = _interopRequireDefault(require("./utils/split"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+class DataPartFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.getInputValue = () => {
+      const {
+        currentColor
+      } = this._adapter.getProps();
+      const {
+        format
+      } = this._adapter.getStates();
+      const rgba = currentColor.rgba;
+      const hsva = currentColor.hsva;
+      const hex = currentColor.hex;
+      if (format === 'rgba') {
+        return `${rgba.r},${rgba.g},${rgba.b}`;
+      } else if (format === 'hsva') {
+        return `${hsva.h},${hsva.s},${hsva.v}`;
+      } else {
+        return hex.slice(0, 7);
+      }
+    };
+    this.getValueByInputValue = value => {
+      const {
+        format
+      } = this.getStates();
+      if (format === 'rgba') {
+        const result = (0, _split.default)(value, format);
+        if (result) {
+          return result;
+        }
+      } else if (format === 'hsva') {
+        const result = (0, _split.default)(value, format);
+        if (result) {
+          return result;
+        }
+      } else if (format === 'hex') {
+        // hack chrome bug, format mismatch with w3c.
+        if (!value.startsWith('#')) {
+          value = '#' + value;
+        }
+        if (/#[\d\w]{6,8}/.test(value)) {
+          return value;
+        }
+      }
+      return false;
+    };
+    this.handlePickValueWithStraw = () => __awaiter(this, void 0, void 0, function* () {
+      const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+      if (!window['EyeDropper']) {
+        return;
+      }
+      //@ts-ignore
+      const eyeDropper = new EyeDropper();
+      try {
+        const result = yield eyeDropper.open();
+        const color = result['sRGBHex'];
+        if (color.startsWith("#")) {
+          colorPickerFoundation.handleChange(color, 'hex');
+        } else if (color.startsWith('rgba')) {
+          const rgba = _foundation2.default.rgbaStringToRgba(color);
+          rgba.a = 1;
+          colorPickerFoundation.handleChange(rgba, 'rgba');
+        }
+      } catch (e) {}
+    });
+    this.handleInputValueChange = value => {
+      this._adapter.setState({
+        inputValue: value
+      });
+    };
+    this.handleFormatChange = format => {
+      this._adapter.setState({
+        format
+      });
+    };
+  }
+}
+var _default = exports.default = DataPartFoundation;

package/lib/cjs/colorPicker/colorPicker.css

@@ -0,0 +1,84 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-colorPicker-colorChooseArea {
+  /**
+   *  Referrer from https://github.com/web-padawan/vanilla-colorful/blob/5d219ee360ae2f29534864b28ca9e6074233b9ce/src/lib/styles/saturation.css
+   */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+  position: relative;
+  flex-grow: 1;
+  border-color: transparent;
+  border-radius: 8px 8px 0px 0px;
+  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+.semi-colorPicker-handle {
+  border-radius: var(--semi-border-radius-full);
+  border: 2px solid var(--semi-color-white);
+  position: absolute;
+  box-sizing: border-box;
+  cursor: grab;
+}
+.semi-colorPicker-alphaSlider {
+  position: relative;
+  cursor: pointer;
+  margin-top: 6px;
+  border-radius: var(--semi-border-radius-full);
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+}
+.semi-colorPicker-alphaSlider .semi-colorPicker-alphaSliderInner {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.semi-colorPicker-alphaSlider .semi-colorPicker-alphaHandle {
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+  border-radius: var(--semi-border-radius-full);
+  border: 2px solid var(--semi-color-white);
+  position: absolute;
+  box-sizing: border-box;
+  cursor: grab;
+}
+.semi-colorPicker-colorSlider {
+  position: relative;
+  cursor: pointer;
+  margin-top: 6px;
+  border-radius: var(--semi-border-radius-full);
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+}
+.semi-colorPicker-dataPart {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-colorDemoBlock {
+  border-radius: 4px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup {
+  margin-left: 4px;
+  width: 100%;
+  flex: 1;
+  flex-wrap: nowrap;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInput {
+  flex: 1;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber {
+  width: 58px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber .semi-colorPicker-inputNumberSuffix {
+  font-size: 14px;
+  padding: 4px 4px;
+}
+.semi-colorPicker-dataPart .semi-colorPicker-formatSelect {
+  width: 80px;
+}
+.semi-colorPicker-popover {
+  padding: 8px;
+}
+.semi-colorPicker-popover-defaultChildren {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+}

package/lib/cjs/colorPicker/colorPicker.scss

@@ -0,0 +1,113 @@
+@import "./variables.scss";
+
+
+$module: #{$prefix}-colorPicker;
+
+
+.#{$module} {
+
+    &-colorChooseArea{
+
+        /**
+         *  Referrer from https://github.com/web-padawan/vanilla-colorful/blob/5d219ee360ae2f29534864b28ca9e6074233b9ce/src/lib/styles/saturation.css
+         */
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+        position: relative;
+        flex-grow: 1;
+        border-color: transparent;
+        border-radius: $radius-colorPicker-topLeft $radius-colorPicker-topRight $radius-colorPicker-bottomLeft $radius-colorPicker-bottomRight;
+        background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+    }
+
+
+    &-handle{
+        border-radius: $radius-colorPicker-handle;
+        border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border;
+        position: absolute;
+        box-sizing: border-box;
+        cursor: grab;
+    }
+
+
+
+
+    &-alphaSlider{
+        position: relative;
+        cursor: pointer;
+        margin-top: $spacing-colorPicker_slider-marginTop;
+        border-radius: $radius-colorPicker-handle;
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+
+
+        .#{$module}-alphaSliderInner{
+            width: 100%;
+            height: 100%;
+            border-radius: $radius-colorPicker-alphaSliderInner;
+        }
+
+        .#{$module}-alphaHandle{
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
+            border-radius: $radius-colorPicker-handle;
+            border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border;
+            position: absolute;
+            box-sizing: border-box;
+            cursor: grab;
+
+        }
+
+    }
+
+    &-colorSlider{
+        position: relative;
+        cursor: pointer;
+        margin-top: $spacing-colorPicker_slider-marginTop;
+        border-radius: $radius-colorPicker-handle;
+        background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    }
+
+
+
+    &-dataPart{
+        margin-top: $spacing-colorPicker_dataPart-marginTop;
+        display: flex;
+        align-items: center;
+        .#{$module}-colorDemoBlock{
+            border-radius: $radius-colorPicker-demoBlock;
+        }
+        .#{$module}-inputGroup{
+            margin-left: $spacing-colorPicker_inputGroup-marginLeft;
+            width: 100%;
+            flex:1;
+            flex-wrap: nowrap;
+            .#{$module}-colorPickerInput{
+                flex: 1;
+            }
+            .#{$module}-colorPickerInputNumber{
+                width: $width-colorPicker-colorPickerInputNumber;
+                .#{$module}-inputNumberSuffix{
+                    font-size: $font-colorPicker_inputNumberSuffix-fontSize;
+                    padding: $spacing-colorPicker_inputNumberSuffix-vertical $spacing-colorPicker_inputNumberSuffix-horizontal;
+                }
+            }
+        }
+        .#{$module}-formatSelect{
+            width: $width-colorPicker-formatSelect;
+        }
+    }
+
+
+    &-popover{
+        padding: $spacing-colorPicker_popover-padding;
+
+        &-defaultChildren{
+            width:$width-colorPicker-defaultTrigger;
+            height: $width-colorPicker-defaultTrigger;
+            border-radius: $radius-colorPicker-defaultTrigger;
+            cursor: pointer;
+        }
+
+    }
+
+
+
+}

package/lib/cjs/colorPicker/constants.d.ts

@@ -0,0 +1,4 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+export { cssClasses };

package/lib/cjs/colorPicker/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssClasses = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-colorPicker`
+};
+const strings = {};

package/lib/cjs/colorPicker/foundation.d.ts

@@ -0,0 +1,66 @@
+import { HsvaColor, RgbaColor } from './interface';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export type ColorValue = {
+    hsva: HsvaColor;
+    rgba: RgbaColor;
+    hex: string;
+};
+export interface ColorPickerProps {
+    eyeDropper?: boolean;
+    defaultValue?: ColorValue;
+    value?: ColorValue;
+    onChange: (value: ColorValue) => void;
+    alpha: boolean;
+    width?: number;
+    height?: number;
+    defaultFormat: 'hex' | 'rgba' | 'hsva';
+}
+export interface ColorPickerState {
+    currentColor: ColorValue;
+}
+export interface ColorPickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyChange: (value: ColorValue) => void;
+}
+declare class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPickerProps, ColorPickerState>, ColorPickerProps, ColorPickerState> {
+    constructor(adapter: ColorPickerAdapter<ColorPickerProps, ColorPickerState>);
+    static hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
+    static rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+    static rgbaToHex: ({ r, g, b, a }: RgbaColor) => string;
+    static hsvaToHex: (hsva: HsvaColor) => string;
+    static hexToRgba: (hex: string) => RgbaColor;
+    static hexToHsva: (hex: string) => HsvaColor;
+    static hsvaToHslaString: (hsva: HsvaColor) => string;
+    static hsvaToHslString: (hsva: HsvaColor) => string;
+    static rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+    static rgbaStringToRgba: (rgbaString: string) => RgbaColor;
+    handleChangeH: (currentColor: ColorValue, newH: number) => void;
+    handleChangeA: (currentColor: ColorValue, newAlpha: number) => void;
+    getCurrentColor: () => any;
+    handleChange: (color: HsvaColor | RgbaColor | string, format: 'hex' | 'rgba' | 'hsva') => void;
+    handleAlphaChangeByHandle: (newAlpha: {
+        a: number;
+    }) => void;
+    handleColorChangeByHandle: (newHue: {
+        h: number;
+    }) => void;
+    getHandlePositionByHSVA: (hsva: HsvaColor, { width, height }: {
+        width: number;
+        height: number;
+    }, handleSize: number) => {
+        x: number;
+        y: number;
+    };
+    getHandlePositionByMousePosition: (mousePosition: {
+        x: number;
+        y: number;
+    }, { width, height }: {
+        width: number;
+        height: number;
+    }, handleSize: number) => {
+        x: number;
+        y: number;
+    };
+    getAlphaHandlePositionByMousePosition: (mousePosition: number, width: number, handleSize: number) => number;
+    getColorHandlePositionByMousePosition: (mousePosition: number, width: number, handleSize: number) => number;
+}
+export default ColorPickerFoundation;

package/lib/cjs/colorPicker/foundation.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _convert = require("./utils/convert");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class ColorPickerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.handleChangeH = (currentColor, newH) => {
+      const hsva = Object.assign(Object.assign({}, currentColor.hsva), {
+        h: newH
+      });
+      const rgba = (0, _convert.hsvaToRgba)(hsva);
+      const hex = (0, _convert.hsvaToHex)(hsva);
+      const newCurrentColor = {
+        rgba,
+        hsva,
+        hex
+      };
+      this._adapter.notifyChange(newCurrentColor);
+      if (!this.getProp("value")) {
+        this._adapter.setState({
+          currentColor: newCurrentColor
+        });
+      }
+    };
+    this.handleChangeA = (currentColor, newAlpha) => {
+      let alpha = this._adapter.getProp('alpha');
+      if (!alpha) {
+        newAlpha = 1;
+      }
+      const rgba = Object.assign(Object.assign({}, currentColor.rgba), {
+        a: newAlpha
+      });
+      const hex = (0, _convert.rgbaToHex)(rgba);
+      currentColor = {
+        rgba,
+        hex: alpha ? hex : hex.slice(0, 7),
+        hsva: Object.assign(Object.assign({}, currentColor.hsva), {
+          a: newAlpha
+        })
+      };
+      this._adapter.notifyChange(currentColor);
+      if (!this.getProp("value")) {
+        this._adapter.setState({
+          currentColor: currentColor
+        });
+      }
+    };
+    this.getCurrentColor = () => {
+      const value = this.getProp("value");
+      const currentColor = this.getState("currentColor");
+      return value || currentColor;
+    };
+    this.handleChange = (color, format) => {
+      let currentColor;
+      if (format === 'hsva') {
+        currentColor = {
+          hsva: color,
+          rgba: ColorPickerFoundation.hsvaToRgba(color),
+          hex: ColorPickerFoundation.hsvaToHex(color)
+        };
+      } else if (format === 'rgba') {
+        currentColor = {
+          rgba: color,
+          hsva: ColorPickerFoundation.rgbaToHsva(color),
+          hex: ColorPickerFoundation.rgbaToHex(color)
+        };
+      } else if (format === 'hex') {
+        currentColor = {
+          hex: color,
+          hsva: ColorPickerFoundation.hexToHsva(color),
+          rgba: ColorPickerFoundation.hexToRgba(color)
+        };
+      } else {
+        throw new Error('format error');
+      }
+      this._adapter.notifyChange(currentColor);
+      if (!this.getProp("value")) {
+        this._adapter.setState({
+          currentColor: currentColor
+        });
+      }
+    };
+    this.handleAlphaChangeByHandle = newAlpha => {
+      this.handleChangeA(this.getCurrentColor(), newAlpha.a);
+    };
+    this.handleColorChangeByHandle = newHue => {
+      this.handleChangeH(this.getCurrentColor(), newHue.h);
+    };
+    this.getHandlePositionByHSVA = (hsva, _ref, handleSize) => {
+      let {
+        width,
+        height
+      } = _ref;
+      const defaultColorPosition = {
+        x: hsva.s / 100 * width,
+        y: (1 - hsva.v / 100) * height
+      };
+      return {
+        x: defaultColorPosition.x - handleSize / 2,
+        y: defaultColorPosition.y - handleSize / 2
+      };
+    };
+    this.getHandlePositionByMousePosition = (mousePosition, _ref2, handleSize) => {
+      let {
+        width,
+        height
+      } = _ref2;
+      if (mousePosition.x > width || mousePosition.x < 0) {
+        return null;
+      }
+      if (mousePosition.y > height || mousePosition.y < 0) {
+        return null;
+      }
+      const handlePosition = {
+        x: mousePosition.x - handleSize / 2,
+        y: mousePosition.y - handleSize / 2
+      };
+      return handlePosition;
+    };
+    this.getAlphaHandlePositionByMousePosition = (mousePosition, width, handleSize) => {
+      if (mousePosition < 0 || mousePosition > width) {
+        return null;
+      }
+      return mousePosition - handleSize / 2;
+    };
+    this.getColorHandlePositionByMousePosition = (mousePosition, width, handleSize) => {
+      if (mousePosition < 0 || mousePosition > width) {
+        return null;
+      }
+      return mousePosition - handleSize / 2;
+    };
+  }
+}
+ColorPickerFoundation.hsvaToRgba = _convert.hsvaToRgba;
+ColorPickerFoundation.rgbaToHsva = _convert.rgbaToHsva;
+ColorPickerFoundation.rgbaToHex = _convert.rgbaToHex;
+ColorPickerFoundation.hsvaToHex = _convert.hsvaToHex;
+ColorPickerFoundation.hexToRgba = _convert.hexToRgba;
+ColorPickerFoundation.hexToHsva = _convert.hexToHsva;
+ColorPickerFoundation.hsvaToHslaString = _convert.hsvaToHslaString;
+ColorPickerFoundation.hsvaToHslString = _convert.hsvaToHslString;
+ColorPickerFoundation.rgbaStringToHsva = _convert.rgbaStringToHsva;
+ColorPickerFoundation.rgbaStringToRgba = _convert.rgbaStringToRgba;
+var _default = exports.default = ColorPickerFoundation;

package/lib/cjs/colorPicker/interface.d.ts

@@ -0,0 +1,40 @@
+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;
+}
+export interface HslColor {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface HslaColor extends HslColor {
+    a: number;
+}
+export interface HsvColor {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface HsvaColor extends HsvColor {
+    a: number;
+}
+export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
+export type AnyColor = string | ObjectColor;
+export interface ColorModel<T extends AnyColor> {
+    defaultColor: T;
+    toHsva: (defaultColor: T) => HsvaColor;
+    fromHsva: (hsva: HsvaColor) => T;
+    equal: (first: T, second: T) => boolean;
+}

package/lib/cjs/colorPicker/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/colorPicker/utils/convert.d.ts

@@ -0,0 +1,28 @@
+import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from "../interface";
+export declare const hexToHsva: (hex: string) => HsvaColor;
+export declare const hexToRgba: (hex: string) => RgbaColor;
+export declare const parseHue: (value: string, unit?: string) => number;
+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 declare const hsvaToHex: (hsva: HsvaColor) => string;
+export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
+export declare const hsvaToHslString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvaString: (hsva: HsvaColor) => string;
+export declare const hsvaToHslaString: (hsva: HsvaColor) => string;
+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 hsvaStringToHsva: (hsvString: string) => HsvaColor;
+export declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
+export declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbaStringToRgba: (rgbaString: string) => RgbaColor;
+export declare const rgbStringToRgba: (rgbaString: string) => RgbaColor;
+export declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbaToHex: ({ r, g, b, a }: RgbaColor) => string;
+export declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+export declare const roundHsva: (hsva: HsvaColor) => HsvaColor;
+export declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
+export declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
+export declare const hsvaToHsv: (hsva: HsvaColor) => HsvColor;