@sdata/web-vue 1.7.1 → 1.9.0

package/es/color-picker/style/index.scss

@@ -176,6 +176,86 @@ $__less-vars: (
   border-radius: $color-panel-border-radius;
   box-shadow: $color-panel-box-shadow;
 
+  .#{$color-picker-prefix-cls}-panel-head {
+    display: flex;
+    justify-content: center;
+    padding: global.$spacing-4 global.$spacing-4 0;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-panel {
+    padding: global.$spacing-4 global.$spacing-4 0;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-bar-shell {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 28px;
+    user-select: none;
+    margin-inline: global.$spacing-4;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-bar {
+    display: block;
+    width: 100%;
+    height: 8px;
+    padding: 0;
+    background-color: transparent;
+    border: 1px solid $color-panel-border-color;
+    border-radius: global.$border-radius-medium;
+    cursor: pointer;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-thumb {
+    position: absolute;
+    z-index: 1;
+    width: 18px;
+    height: 18px;
+    padding: 2px;
+    background: var(--color-bg-white);
+    border: 1px solid var(--color-border-2);
+    border-radius: global.$border-radius-circle;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 14%);
+    transform: translateX(-50%);
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-thumb-active {
+    border-color: var(--color-primary-6);
+    box-shadow: 0 0 0 2px rgb(22 93 255 / 16%);
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-thumb-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: global.$border-radius-circle;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-meta {
+    display: flex;
+    gap: global.$spacing-3;
+    align-items: center;
+    margin-top: global.$spacing-4;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-label {
+    color: var(--color-text-2);
+    font-size: global.$font-size-body-1;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-degree {
+    width: 72px;
+  }
+
+  .#{$color-picker-prefix-cls}-gradient-preview {
+    height: 32px;
+    margin-top: global.$spacing-4;
+    border: 1px solid $color-panel-border-color;
+    border-radius: global.$border-radius-medium;
+  }
+
   .#{$color-picker-prefix-cls}-palette {
     position: relative;
     box-sizing: border-box;
@@ -261,12 +341,28 @@ $__less-vars: (
       margin-top: global.$spacing-6;
     }
 
+    .#{$color-picker-prefix-cls}-colors-header {
+      display: flex;
+      gap: global.$spacing-3;
+      align-items: center;
+      justify-content: space-between;
+    }
+
     .#{$color-picker-prefix-cls}-colors-text {
       color: var(--color-text-1);
       font-weight: global.$font-weight-400;
       font-size: $color-panel-section-title-font-size;
     }
 
+    .#{$color-picker-prefix-cls}-colors-action {
+      padding: 0;
+      color: var(--color-primary-6);
+      font-size: global.$font-size-body-1;
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+    }
+
     .#{$color-picker-prefix-cls}-colors-empty {
       margin: global.$spacing-6 0;
       color: var(--color-text-3);
@@ -386,6 +482,14 @@ $__less-vars: (
     width: $color-panel-alpha-input-width;
   }
 
+  .#{$color-picker-prefix-cls}-input-group {
+    width: 100%;
+  }
+
+  .#{$color-picker-prefix-cls}-format-input {
+    min-width: 0;
+  }
+
   .#{$color-picker-prefix-cls}-input-hex {
     .#{theme.$prefix}-input {
       padding-left: global.$spacing-2;
@@ -396,7 +500,9 @@ $__less-vars: (
     .#{$color-picker-prefix-cls}-palette,
     .#{$color-picker-prefix-cls}-control-bar,
     .#{$color-picker-prefix-cls}-color-block,
-    .#{$color-picker-prefix-cls}-preview {
+    .#{$color-picker-prefix-cls}-preview,
+    .#{$color-picker-prefix-cls}-gradient-bar,
+    .#{$color-picker-prefix-cls}-gradient-thumb {
       cursor: not-allowed;
       opacity: 0.8;
     }

package/es/color-picker/utils.d.ts

@@ -0,0 +1,89 @@
+import type { ColorFormat, ColorMode, ColorObject, ColorValueState, GradientColorPoint, HSVA, LegacyFormat } from './interface';
+export declare const DEFAULT_LINEAR_GRADIENT = "linear-gradient(90deg, rgba(0, 82, 217, 1) 0%, rgba(255, 255, 255, 1) 100%)";
+export declare const TD_COLOR_USED_COLORS_MAX_SIZE = 8;
+export declare const round: (value: number, precision?: number) => number;
+export declare const rgbToHsl: (r: number, g: number, b: number) => {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare const hslToRgb: (h: number, s: number, l: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const normalizeFormat: (format?: string, enableAlpha?: boolean) => ColorFormat;
+export declare const parseColor: (input?: string) => {
+    a: number;
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const isGradientColor: (input?: string) => boolean;
+export declare const parseGradientString: (input?: string) => {
+    degree: number;
+    colors: {
+        id: string;
+        left: number;
+        color: string;
+        hsva: {
+            a: number;
+            h: number;
+            s: number;
+            v: number;
+        };
+    }[];
+} | null;
+export declare const formatColor: (hsva: HSVA, format: ColorFormat | LegacyFormat, enableAlpha?: boolean) => string;
+export declare const createGradientPoint: (left: number, color: string) => {
+    id: string;
+    left: number;
+    color: string;
+    hsva: {
+        a: number;
+        h: number;
+        s: number;
+        v: number;
+    };
+};
+export declare const getDefaultGradientState: (baseColor?: string) => ColorValueState;
+export declare const getDefaultColorState: () => ColorValueState;
+export declare const getColorMode: (input: string | undefined, colorModes: ColorMode[]) => ColorMode;
+export declare const parseColorState: (input?: string, colorModes?: ColorMode[]) => ColorValueState;
+export declare const getGradientThumbBackground: (points: GradientColorPoint[]) => string;
+export declare const getLinearGradientString: (state: ColorValueState) => string;
+export declare const formatColorState: (state: ColorValueState, format: ColorFormat | LegacyFormat, enableAlpha?: boolean) => string;
+export declare const getActiveGradientPoint: (state: ColorValueState) => GradientColorPoint | null;
+export declare const setGradientSelectedPoint: (state: ColorValueState, selectedId: string) => ColorValueState;
+export declare const setActiveColorHsva: (state: ColorValueState, hsva: HSVA) => {
+    hsva: HSVA;
+    mode: ColorMode;
+    gradientDegree: number;
+    gradientSelectedId: string;
+    gradientColors: GradientColorPoint[];
+};
+export declare const setGradientDegree: (state: ColorValueState, degree: number) => {
+    gradientDegree: number;
+    mode: ColorMode;
+    hsva: HSVA;
+    gradientSelectedId: string;
+    gradientColors: GradientColorPoint[];
+};
+export declare const setGradientColors: (state: ColorValueState, gradientColors: GradientColorPoint[]) => {
+    gradientColors: GradientColorPoint[];
+    gradientSelectedId: string;
+    hsva: HSVA;
+    mode: ColorMode;
+    gradientDegree: number;
+};
+export declare const addGradientColor: (state: ColorValueState, left: number, color?: string) => ColorValueState;
+export declare const removeGradientColor: (state: ColorValueState, selectedId: string) => ColorValueState;
+export declare const getColorBackground: (state: ColorValueState) => string;
+export declare const getColorObject: (input: HSVA | ColorValueState) => ColorObject;
+export declare const getFormatInputs: (hsva: HSVA, format: ColorFormat, enableAlpha?: boolean) => string[];
+export declare const parseFormatInputValues: (values: string[], format: ColorFormat, enableAlpha?: boolean) => {
+    a: number;
+    h: number;
+    s: number;
+    v: number;
+};

package/es/color-picker/utils.js

@@ -0,0 +1,456 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
+import { formatInputToHSVA, hsvToRgb, rgbToHex, rgbToHsv, rgbaToHex } from "../_utils/color.js";
+//#region components/color-picker/utils.ts
+var DEFAULT_HSVA = {
+	h: 0,
+	s: 1,
+	v: 1,
+	a: 1
+};
+var HSL_REGEXP = /^hsla?\((.+)\)$/i;
+var HSV_REGEXP = /^hsva?\((.+)\)$/i;
+var CMYK_REGEXP = /^cmyk\((.+)\)$/i;
+var LINEAR_GRADIENT_REGEXP = /^linear-gradient\((.+)\)$/i;
+var GRADIENT_DEGREE_REGEXP = /^(-?\d+(?:\.\d+)?)deg$/i;
+var GRADIENT_STOP_REGEXP = /^(.*?)(?:\s+(-?\d+(?:\.\d+)?)%)?$/;
+var gradientPointId = 0;
+var clamp = (value, min, max) => {
+	if (Number.isNaN(value)) return min;
+	return Math.min(max, Math.max(min, value));
+};
+var round = (value, precision = 0) => {
+	const factor = Math.pow(10, precision);
+	return Math.round(value * factor) / factor;
+};
+var parseUnitValue = (value, max) => {
+	const trimmed = value.trim();
+	if (trimmed.endsWith("%")) return clamp(parseFloat(trimmed) / 100, 0, 1) * max;
+	return clamp(parseFloat(trimmed), 0, max);
+};
+var toGradientPointId = () => `gradient-point-${++gradientPointId}`;
+var rgbToHsl = (r, g, b) => {
+	const red = r / 255;
+	const green = g / 255;
+	const blue = b / 255;
+	const max = Math.max(red, green, blue);
+	const min = Math.min(red, green, blue);
+	let hue = 0;
+	let saturation = 0;
+	const lightness = (max + min) / 2;
+	if (max !== min) {
+		const delta = max - min;
+		saturation = lightness > .5 ? delta / (2 - max - min) : delta / (max + min);
+		switch (max) {
+			case red:
+				hue = (green - blue) / delta + (green < blue ? 6 : 0);
+				break;
+			case green:
+				hue = (blue - red) / delta + 2;
+				break;
+			case blue:
+				hue = (red - green) / delta + 4;
+				break;
+			default: break;
+		}
+		hue /= 6;
+	}
+	return {
+		h: round(hue * 360),
+		s: round(saturation * 100),
+		l: round(lightness * 100)
+	};
+};
+var hueToRgb = (p, q, t) => {
+	let next = t;
+	if (next < 0) next += 1;
+	if (next > 1) next -= 1;
+	if (next < 1 / 6) return p + (q - p) * 6 * next;
+	if (next < 1 / 2) return q;
+	if (next < 2 / 3) return p + (q - p) * (2 / 3 - next) * 6;
+	return p;
+};
+var hslToRgb = (h, s, l) => {
+	const hue = (h % 360 + 360) % 360 / 360;
+	const saturation = clamp(s / 100, 0, 1);
+	const lightness = clamp(l / 100, 0, 1);
+	if (saturation === 0) {
+		const channel = Math.round(lightness * 255);
+		return {
+			r: channel,
+			g: channel,
+			b: channel
+		};
+	}
+	const q = lightness < .5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
+	const p = 2 * lightness - q;
+	return {
+		r: Math.round(hueToRgb(p, q, hue + 1 / 3) * 255),
+		g: Math.round(hueToRgb(p, q, hue) * 255),
+		b: Math.round(hueToRgb(p, q, hue - 1 / 3) * 255)
+	};
+};
+var parseCommaArguments = (input) => {
+	const result = [];
+	let buffer = "";
+	let depth = 0;
+	for (const char of input) {
+		if (char === "(") depth += 1;
+		if (char === ")") depth = Math.max(0, depth - 1);
+		if (char === "," && depth === 0) {
+			result.push(buffer.trim());
+			buffer = "";
+			continue;
+		}
+		buffer += char;
+	}
+	if (buffer.trim()) result.push(buffer.trim());
+	return result;
+};
+var parseColorTuple = (input) => parseCommaArguments(input);
+var parseHslString = (input) => {
+	const match = HSL_REGEXP.exec(input);
+	if (!match) return null;
+	const parts = parseColorTuple(match[1]);
+	if (parts.length < 3) return null;
+	const rgb = hslToRgb(parseFloat(parts[0]), parseUnitValue(parts[1], 100), parseUnitValue(parts[2], 100));
+	return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: parts[3] ? clamp(parseUnitValue(parts[3], 1), 0, 1) : 1 });
+};
+var parseHsvString = (input) => {
+	const match = HSV_REGEXP.exec(input);
+	if (!match) return null;
+	const parts = parseColorTuple(match[1]);
+	if (parts.length < 3) return null;
+	return {
+		h: clamp((parseFloat(parts[0]) % 360 + 360) % 360 / 360, 0, 1),
+		s: clamp(parseUnitValue(parts[1], 100) / 100, 0, 1),
+		v: clamp(parseUnitValue(parts[2], 100) / 100, 0, 1),
+		a: parts[3] ? clamp(parseUnitValue(parts[3], 1), 0, 1) : 1
+	};
+};
+var parseCmykString = (input) => {
+	const match = CMYK_REGEXP.exec(input);
+	if (!match) return null;
+	const parts = parseColorTuple(match[1]);
+	if (parts.length < 4) return null;
+	const [c, m, y, k] = parts.map((part) => clamp(parseUnitValue(part, 100) / 100, 0, 1));
+	const rgb = {
+		r: Math.round(255 * (1 - c) * (1 - k)),
+		g: Math.round(255 * (1 - m) * (1 - k)),
+		b: Math.round(255 * (1 - y) * (1 - k))
+	};
+	return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: 1 });
+};
+var normalizeFormat = (format, enableAlpha) => {
+	if (!format) return enableAlpha ? "RGBA" : "RGB";
+	const normalized = format.toUpperCase();
+	if (normalized === "HEX" && enableAlpha) return "HEX8";
+	if (normalized === "RGB" && enableAlpha) return "RGBA";
+	return normalized;
+};
+var parseColor = (input) => {
+	if (!input) return _objectSpread2({}, DEFAULT_HSVA);
+	const trimmed = input.trim();
+	return parseHsvString(trimmed) || parseHslString(trimmed) || parseCmykString(trimmed) || formatInputToHSVA(trimmed);
+};
+var parseGradientStop = (input, index, total) => {
+	var _match$;
+	const match = GRADIENT_STOP_REGEXP.exec(input);
+	const color = (match === null || match === void 0 || (_match$ = match[1]) === null || _match$ === void 0 ? void 0 : _match$.trim()) || input.trim();
+	let left = total === 1 ? 0 : index / (total - 1) * 100;
+	if ((match === null || match === void 0 ? void 0 : match[2]) !== void 0) left = parseFloat(match[2]);
+	const hsva = parseColor(color);
+	return {
+		id: toGradientPointId(),
+		left: clamp(left, 0, 100),
+		color,
+		hsva
+	};
+};
+var isGradientColor = (input) => Boolean(input && LINEAR_GRADIENT_REGEXP.exec(input.trim()));
+var parseGradientString = (input) => {
+	if (!input || !isGradientColor(input)) return null;
+	const match = LINEAR_GRADIENT_REGEXP.exec(input.trim());
+	if (!match) return null;
+	const parts = parseCommaArguments(match[1]);
+	if (parts.length < 2) return null;
+	let degree = 90;
+	let stops = parts;
+	const degreeMatch = GRADIENT_DEGREE_REGEXP.exec(parts[0]);
+	if (degreeMatch) {
+		degree = parseFloat(degreeMatch[1]);
+		stops = parts.slice(1);
+	}
+	const gradientColors = stops.map((item, index) => parseGradientStop(item, index, stops.length)).sort((a, b) => a.left - b.left);
+	if (!gradientColors.length) return null;
+	return {
+		degree: clamp(degree, 0, 360),
+		colors: gradientColors
+	};
+};
+var formatColor = (hsva, format, enableAlpha) => {
+	const normalized = normalizeFormat(format, enableAlpha);
+	const rgb = hsvToRgb(hsva.h, hsva.s, hsva.v);
+	const alpha = round(hsva.a, 2);
+	const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+	const hue = round(hsva.h * 360);
+	const saturation = round(hsva.s * 100);
+	const value = round(hsva.v * 100);
+	switch (normalized) {
+		case "HEX": return `#${rgbToHex(rgb.r, rgb.g, rgb.b)}`;
+		case "HEX8": return `#${rgbaToHex(rgb.r, rgb.g, rgb.b, hsva.a)}`;
+		case "RGB": return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+		case "RGBA": return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+		case "HSL": return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+		case "HSLA": return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`;
+		case "HSV": return `hsv(${hue}, ${saturation}%, ${value}%)`;
+		case "HSVA": return `hsva(${hue}, ${saturation}%, ${value}%, ${alpha})`;
+		case "CMYK": {
+			const red = rgb.r / 255;
+			const green = rgb.g / 255;
+			const blue = rgb.b / 255;
+			const key = 1 - Math.max(red, green, blue);
+			const cyan = key === 1 ? 0 : (1 - red - key) / (1 - key);
+			const magenta = key === 1 ? 0 : (1 - green - key) / (1 - key);
+			const yellow = key === 1 ? 0 : (1 - blue - key) / (1 - key);
+			return `cmyk(${round(cyan * 100)}%, ${round(magenta * 100)}%, ${round(yellow * 100)}%, ${round(key * 100)}%)`;
+		}
+		default: return hsva.a < 1 ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})` : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+	}
+};
+var createGradientPoint = (left, color) => {
+	const hsva = parseColor(color);
+	return {
+		id: toGradientPointId(),
+		left: clamp(left, 0, 100),
+		color,
+		hsva
+	};
+};
+var getDefaultGradientState = (baseColor) => {
+	const gradientColors = [createGradientPoint(0, baseColor && !isGradientColor(baseColor) ? formatColor(parseColor(baseColor), "CSS", true) : "rgba(0, 82, 217, 1)"), createGradientPoint(100, "rgba(255, 255, 255, 1)")];
+	return {
+		mode: "linear-gradient",
+		hsva: gradientColors[0].hsva,
+		gradientDegree: 90,
+		gradientSelectedId: gradientColors[0].id,
+		gradientColors
+	};
+};
+var getDefaultColorState = () => ({
+	mode: "monochrome",
+	hsva: _objectSpread2({}, DEFAULT_HSVA),
+	gradientDegree: 90,
+	gradientSelectedId: "",
+	gradientColors: []
+});
+var getColorMode = (input, colorModes) => {
+	if (colorModes.length === 1) return colorModes[0];
+	return colorModes.includes("linear-gradient") && isGradientColor(input) ? "linear-gradient" : "monochrome";
+};
+var parseColorState = (input, colorModes = ["monochrome", "linear-gradient"]) => {
+	const mode = getColorMode(input, colorModes);
+	if (mode === "linear-gradient") {
+		const parsed = parseGradientString(input) || parseGradientString("linear-gradient(90deg, rgba(0, 82, 217, 1) 0%, rgba(255, 255, 255, 1) 100%)");
+		if (!parsed) return getDefaultGradientState();
+		const selected = parsed.colors[0];
+		return {
+			mode,
+			hsva: selected.hsva,
+			gradientDegree: parsed.degree,
+			gradientSelectedId: selected.id,
+			gradientColors: parsed.colors
+		};
+	}
+	return _objectSpread2(_objectSpread2({}, getDefaultColorState()), {}, {
+		mode: "monochrome",
+		hsva: parseColor(input)
+	});
+};
+var getGradientThumbBackground = (points) => {
+	return `linear-gradient(90deg, ${points.map((point) => `${formatColor(point.hsva, "CSS", true)} ${round(point.left, 2)}%`).join(", ")})`;
+};
+var getLinearGradientString = (state) => {
+	const colors = state.gradientColors.length ? state.gradientColors : getDefaultGradientState().gradientColors;
+	return `linear-gradient(${round(state.gradientDegree, 2)}deg, ${colors.map((point) => `${formatColor(point.hsva, "CSS", true)} ${round(point.left, 2)}%`).join(", ")})`;
+};
+var formatColorState = (state, format, enableAlpha) => {
+	if (state.mode === "linear-gradient") return getLinearGradientString(state);
+	return formatColor(state.hsva, format, enableAlpha);
+};
+var getActiveGradientPoint = (state) => {
+	if (!state.gradientColors.length) return null;
+	return state.gradientColors.find((point) => point.id === state.gradientSelectedId) || state.gradientColors[0];
+};
+var setGradientSelectedPoint = (state, selectedId) => {
+	const point = state.gradientColors.find((item) => item.id === selectedId);
+	if (!point) return state;
+	return _objectSpread2(_objectSpread2({}, state), {}, {
+		gradientSelectedId: selectedId,
+		hsva: point.hsva
+	});
+};
+var setActiveColorHsva = (state, hsva) => {
+	if (state.mode !== "linear-gradient") return _objectSpread2(_objectSpread2({}, state), {}, { hsva });
+	const current = getActiveGradientPoint(state) || state.gradientColors[0];
+	const gradientColors = state.gradientColors.map((point) => point.id === current.id ? _objectSpread2(_objectSpread2({}, point), {}, {
+		hsva,
+		color: formatColor(hsva, "CSS", true)
+	}) : point);
+	return _objectSpread2(_objectSpread2({}, state), {}, {
+		hsva,
+		gradientColors
+	});
+};
+var setGradientDegree = (state, degree) => _objectSpread2(_objectSpread2({}, state), {}, { gradientDegree: clamp(degree, 0, 360) });
+var setGradientColors = (state, gradientColors) => {
+	const nextColors = [...gradientColors].sort((a, b) => a.left - b.left);
+	const selected = nextColors.find((item) => item.id === state.gradientSelectedId) || nextColors[0];
+	return _objectSpread2(_objectSpread2({}, state), {}, {
+		gradientColors: nextColors,
+		gradientSelectedId: (selected === null || selected === void 0 ? void 0 : selected.id) || "",
+		hsva: (selected === null || selected === void 0 ? void 0 : selected.hsva) || state.hsva
+	});
+};
+var addGradientColor = (state, left, color) => {
+	const nextPoint = createGradientPoint(left, color || formatColor(state.hsva, "CSS", true));
+	return setGradientSelectedPoint(setGradientColors(state, [...state.gradientColors, nextPoint]), nextPoint.id);
+};
+var removeGradientColor = (state, selectedId) => {
+	if (state.gradientColors.length <= 2) return state;
+	return setGradientColors(state, state.gradientColors.filter((point) => point.id !== selectedId));
+};
+var getColorBackground = (state) => state.mode === "linear-gradient" ? getLinearGradientString(state) : formatColor(state.hsva, "CSS", true);
+var getColorObject = (input) => {
+	var _getActiveGradientPoi;
+	const state = "mode" in input ? input : _objectSpread2(_objectSpread2({}, getDefaultColorState()), {}, { hsva: input });
+	const active = state.mode === "linear-gradient" ? ((_getActiveGradientPoi = getActiveGradientPoint(state)) === null || _getActiveGradientPoi === void 0 ? void 0 : _getActiveGradientPoi.hsva) || state.hsva : state.hsva;
+	const rgb = hsvToRgb(active.h, active.s, active.v);
+	return {
+		alpha: round(active.a, 2),
+		css: formatColor(active, "CSS", true),
+		hex: formatColor(active, "HEX"),
+		hex8: formatColor(active, "HEX8", true),
+		hsl: formatColor(active, "HSL"),
+		hsla: formatColor(active, "HSLA", true),
+		hsv: formatColor(active, "HSV"),
+		hsva: formatColor(active, "HSVA", true),
+		rgb: formatColor(active, "RGB"),
+		rgba: formatColor(active, "RGBA", true),
+		saturation: round(active.s * 100),
+		value: round(active.v * 100),
+		isGradient: state.mode === "linear-gradient",
+		linearGradient: state.mode === "linear-gradient" ? getLinearGradientString(state) : void 0,
+		red: rgb.r,
+		green: rgb.g,
+		blue: rgb.b
+	};
+};
+var getFormatInputs = (hsva, format, enableAlpha) => {
+	const rgb = hsvToRgb(hsva.h, hsva.s, hsva.v);
+	const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+	const hue = round(hsva.h * 360);
+	const saturation = round(hsva.s * 100);
+	const value = round(hsva.v * 100);
+	const alpha = round(hsva.a * 100);
+	switch (normalizeFormat(format, enableAlpha)) {
+		case "HEX8": return [rgbaToHex(rgb.r, rgb.g, rgb.b, hsva.a), `${alpha}%`];
+		case "HEX": return [rgbToHex(rgb.r, rgb.g, rgb.b)];
+		case "RGBA": return [
+			`${rgb.r}`,
+			`${rgb.g}`,
+			`${rgb.b}`,
+			`${alpha}%`
+		];
+		case "RGB": return [
+			`${rgb.r}`,
+			`${rgb.g}`,
+			`${rgb.b}`
+		];
+		case "HSLA": return [
+			`${hue}`,
+			`${hsl.s}%`,
+			`${hsl.l}%`,
+			`${alpha}%`
+		];
+		case "HSL": return [
+			`${hue}`,
+			`${hsl.s}%`,
+			`${hsl.l}%`
+		];
+		case "HSVA": return [
+			`${hue}`,
+			`${saturation}%`,
+			`${value}%`,
+			`${alpha}%`
+		];
+		case "HSV": return [
+			`${hue}`,
+			`${saturation}%`,
+			`${value}%`
+		];
+		case "CMYK": {
+			const red = rgb.r / 255;
+			const green = rgb.g / 255;
+			const blue = rgb.b / 255;
+			const key = 1 - Math.max(red, green, blue);
+			const cyan = key === 1 ? 0 : (1 - red - key) / (1 - key);
+			const magenta = key === 1 ? 0 : (1 - green - key) / (1 - key);
+			const yellow = key === 1 ? 0 : (1 - blue - key) / (1 - key);
+			return [
+				`${round(cyan * 100)}%`,
+				`${round(magenta * 100)}%`,
+				`${round(yellow * 100)}%`,
+				`${round(key * 100)}%`
+			];
+		}
+		default: return [formatColor(hsva, "CSS", true)];
+	}
+};
+var parseFormatInputValues = (values, format, enableAlpha) => {
+	const normalized = normalizeFormat(format, enableAlpha);
+	switch (normalized) {
+		case "HEX": return parseColor(`#${values[0] || ""}`);
+		case "HEX8": {
+			const hex = values[0] || "";
+			if (hex.length === 8) return parseColor(`#${hex}`);
+			const alpha = clamp(parseUnitValue(values[1] || "100%", 100) / 100, 0, 1);
+			return _objectSpread2(_objectSpread2({}, parseColor(`#${hex.slice(0, 6)}`)), {}, { a: alpha });
+		}
+		case "RGB":
+		case "RGBA": {
+			const rgb = {
+				r: clamp(parseFloat(values[0] || "0"), 0, 255),
+				g: clamp(parseFloat(values[1] || "0"), 0, 255),
+				b: clamp(parseFloat(values[2] || "0"), 0, 255)
+			};
+			return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: normalized === "RGBA" ? clamp(parseUnitValue(values[3] || "100%", 100) / 100, 0, 1) : 1 });
+		}
+		case "HSL":
+		case "HSLA": {
+			const rgb = hslToRgb(parseFloat(values[0] || "0"), parseUnitValue(values[1] || "0%", 100), parseUnitValue(values[2] || "0%", 100));
+			return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: normalized === "HSLA" ? clamp(parseUnitValue(values[3] || "100%", 100) / 100, 0, 1) : 1 });
+		}
+		case "HSV":
+		case "HSVA": return {
+			h: clamp((parseFloat(values[0] || "0") % 360 + 360) % 360 / 360, 0, 1),
+			s: clamp(parseUnitValue(values[1] || "0%", 100) / 100, 0, 1),
+			v: clamp(parseUnitValue(values[2] || "0%", 100) / 100, 0, 1),
+			a: normalized === "HSVA" ? clamp(parseUnitValue(values[3] || "100%", 100) / 100, 0, 1) : 1
+		};
+		case "CMYK": {
+			const c = clamp(parseUnitValue(values[0] || "0%", 100) / 100, 0, 1);
+			const m = clamp(parseUnitValue(values[1] || "0%", 100) / 100, 0, 1);
+			const y = clamp(parseUnitValue(values[2] || "0%", 100) / 100, 0, 1);
+			const k = clamp(parseUnitValue(values[3] || "0%", 100) / 100, 0, 1);
+			const rgb = {
+				r: Math.round(255 * (1 - c) * (1 - k)),
+				g: Math.round(255 * (1 - m) * (1 - k)),
+				b: Math.round(255 * (1 - y) * (1 - k))
+			};
+			return _objectSpread2(_objectSpread2({}, rgbToHsv(rgb.r, rgb.g, rgb.b)), {}, { a: 1 });
+		}
+		default: return parseColor(values[0]);
+	}
+};
+//#endregion
+export { addGradientColor, formatColor, formatColorState, getActiveGradientPoint, getColorBackground, getColorObject, getDefaultColorState, getDefaultGradientState, getFormatInputs, getGradientThumbBackground, getLinearGradientString, normalizeFormat, parseColorState, parseFormatInputValues, removeGradientColor, round, setActiveColorHsva, setGradientColors, setGradientDegree, setGradientSelectedPoint };