@choice-ui/react 1.7.6 → 1.7.7

package/dist/components/colors/src/utils/background.js

@@ -0,0 +1,216 @@
+import tinycolor from "tinycolor2";
+function getColorAreaBackground(type, hue = 0, colorSpace) {
+  const { r, g, b } = tinycolor({ h: hue, s: 1, l: 0.5 }).toRgb();
+  const backgrounds = {
+    "saturation-lightness": {
+      background: colorSpace === "srgb" ? `
+        linear-gradient(to top,
+          rgb(0, 0, 0) 0%,
+          rgba(0, 0, 0, 0) 50%,
+          rgba(255, 255, 255, 0) 50%,
+          rgb(255, 255, 255) 100%),
+        linear-gradient(to right,
+          rgb(128, 128, 128),
+          rgba(128, 128, 128, 0)),
+          rgb(${r}, ${g}, ${b})
+      ` : `
+        linear-gradient(to top,
+          color(display-p3 0 0 0) 0%,
+          color(display-p3 0 0 0/0) 50%,
+          color(display-p3 1 1 1/0) 50%,
+          color(display-p3 1 1 1) 100%),
+        linear-gradient(to right,
+          color(display-p3 0.5 0.5 0.5),
+          color(display-p3 0.5 0.5 0.5/0)),
+          color(display-p3 ${r / 255} ${g / 255} ${b / 255})
+      `
+    },
+    "saturation-brightness": {
+      background: colorSpace === "srgb" ? `
+        linear-gradient(
+          rgba(0, 0, 0, 0) 0%,
+          rgb(0, 0, 0) 100%),
+        linear-gradient(
+          to right, rgb(255, 255, 255) 0%,
+          rgb(${r}, ${g}, ${b}) 100%)
+      ` : `
+        linear-gradient(
+          color(display-p3 0 0 0 / 0) 0%,
+          color(display-p3 0 0 0) 100%),
+        linear-gradient(
+          to right, color(display-p3 1 1 1) 0%,
+          color(display-p3 ${r / 255} ${g / 255} ${b / 255}) 100%)
+      `
+    },
+    "hue-saturation": {
+      background: colorSpace === "srgb" ? `
+        linear-gradient(to top,
+          rgb(128, 128, 128), transparent),
+        linear-gradient(to right,
+          rgb(255, 0, 0),
+          rgb(255, 255, 0),
+          rgb(0, 255, 0),
+          rgb(0, 255, 255),
+          rgb(0, 0, 255),
+          rgb(255, 0, 255),
+          rgb(255, 0, 0))
+      ` : `
+        linear-gradient(to top,
+          color(display-p3 0.5 0.5 0.5), transparent),
+        linear-gradient(to right,
+          color(display-p3 1 0 0),
+          color(display-p3 1 1 0),
+          color(display-p3 0 1 0),
+          color(display-p3 0 1 1),
+          color(display-p3 0 0 1),
+          color(display-p3 1 0 1),
+          color(display-p3 1 0 0))
+      `
+    },
+    "hue-lightness": {
+      background: colorSpace === "srgb" ? `
+        linear-gradient(to top,
+          rgba(255, 255, 255, 0.93),
+          rgba(255, 255, 255, 0)),
+        linear-gradient(to right,
+          rgba(255, 0, 0, 0.93),
+          rgba(255, 255, 0, 0.93),
+          rgba(0, 255, 0, 0.93),
+          rgba(0, 255, 255, 0.93),
+          rgba(0, 0, 255, 0.93),
+          rgba(255, 0, 255, 0.93),
+          rgba(255, 0, 4, 0.93)),
+          rgb(0, 0, 0)
+      ` : `
+        linear-gradient(to top,
+          color(display-p3 1 1 1 / 0.93),
+          color(display-p3 1 1 1 / 0)),
+        linear-gradient(to right,
+          color(display-p3 1 0 0 / 0.93),
+          color(display-p3 1 1 0 / 0.93),
+          color(display-p3 0 1 0 / 0.93),
+          color(display-p3 0 1 1 / 0.93),
+          color(display-p3 0 0 1 / 0.93),
+          color(display-p3 1 0 1 / 0.93),
+          color(display-p3 1 0 0.0157 / 0.93)),
+          color(display-p3 0 0 0)
+      `
+    }
+  };
+  return backgrounds[type];
+}
+function getSliderBackground(type, hue = 0, colorSpace) {
+  const {
+    r: saturation_1_r,
+    g: saturation_1_g,
+    b: saturation_1_b
+  } = tinycolor({ h: hue, s: 0, l: 0.5 }).toRgb();
+  const {
+    r: saturation_2_r,
+    g: saturation_2_g,
+    b: saturation_2_b
+  } = tinycolor({ h: hue, s: 1, l: 0.5 }).toRgb();
+  const {
+    r: lightness_1_r,
+    g: lightness_1_g,
+    b: lightness_1_b
+  } = tinycolor({ h: hue, s: 1, l: 0 }).toRgb();
+  const {
+    r: lightness_2_r,
+    g: lightness_2_g,
+    b: lightness_2_b
+  } = tinycolor({ h: hue, s: 1, l: 0.5 }).toRgb();
+  const {
+    r: lightness_3_r,
+    g: lightness_3_g,
+    b: lightness_3_b
+  } = tinycolor({ h: hue, s: 1, l: 1 }).toRgb();
+  const { r: alpha_r, g: alpha_g, b: alpha_b } = tinycolor({ h: hue, s: 1, l: 0.5 }).toRgb();
+  switch (type) {
+    case "hue":
+      return {
+        background: colorSpace === "srgb" ? `
+              linear-gradient(to right,
+                rgb(255, 0, 0),
+                rgb(255, 255, 0),
+                rgb(0, 255, 0),
+                rgb(0, 255, 255),
+                rgb(0, 0, 255),
+                rgb(255, 0, 255),
+                rgb(255, 0, 0))
+              ` : `
+              linear-gradient(to right,
+                color(display-p3 1 0 0),
+                color(display-p3 1 1 0),
+                color(display-p3 0 1 0),
+                color(display-p3 0 1 1),
+                color(display-p3 0 0 1),
+                color(display-p3 1 0 1),
+                color(display-p3 1 0 0))
+        `
+      };
+    case "saturation":
+      return {
+        background: colorSpace === "srgb" ? `
+              linear-gradient(to right,
+                rgb(${saturation_1_r}, ${saturation_1_g}, ${saturation_1_b}),
+                rgb(${saturation_2_r}, ${saturation_2_g}, ${saturation_2_b}))
+              ` : `
+              linear-gradient(to right,
+                color(display-p3 ${saturation_1_r / 255} ${saturation_1_g / 255} ${saturation_1_b / 255}),
+                color(display-p3 ${saturation_2_r / 255} ${saturation_2_g / 255} ${saturation_2_b / 255}))
+              `
+      };
+    case "lightness":
+      return {
+        background: colorSpace === "srgb" ? `
+              linear-gradient(to right,
+                rgb(${lightness_1_r}, ${lightness_1_g}, ${lightness_1_b}),
+                rgb(${lightness_2_r}, ${lightness_2_g}, ${lightness_2_b}),
+                rgb(${lightness_3_r}, ${lightness_3_g}, ${lightness_3_b}))
+              ` : `
+              linear-gradient(to right,
+                color(display-p3 ${lightness_1_r / 255} ${lightness_1_g / 255} ${lightness_1_b / 255}),
+                color(display-p3 ${lightness_2_r / 255} ${lightness_2_g / 255} ${lightness_2_b / 255}),
+                color(display-p3 ${lightness_3_r / 255} ${lightness_3_g / 255} ${lightness_3_b / 255}))
+              `
+      };
+    case "alpha":
+      return {
+        background: colorSpace === "srgb" ? `
+              linear-gradient(to right,
+                rgba(${alpha_r}, ${alpha_g}, ${alpha_b}, 0),
+                rgba(${alpha_r}, ${alpha_g}, ${alpha_b}, 1)),
+              repeating-conic-gradient(
+                rgb(204, 204, 204) 0%,
+                rgb(204, 204, 204) 25%,
+                rgb(255, 255, 255) 0%,
+                rgb(255, 255, 255) 50%
+              ) left top / 11px 11px
+            ` : `
+              linear-gradient(to right,
+                color(display-p3 ${alpha_r / 255} ${alpha_g / 255} ${alpha_b / 255} / 0),
+                color(display-p3 ${alpha_r / 255} ${alpha_g / 255} ${alpha_b / 255} / 1)),
+              repeating-conic-gradient(
+                color(display-p3 0.8 0.8 0.8) 0%,
+                color(display-p3 0.8 0.8 0.8) 25%,
+                color(display-p3 1 1 1) 0%,
+                color(display-p3 1 1 1) 50%
+              ) left top / 11px 11px
+            `
+      };
+  }
+}
+function getColorSwatchBackground(size, scale = 3, colors) {
+  return `repeating-conic-gradient(
+    ${"rgb(204, 204, 204)"} 0%,
+    ${"rgb(204, 204, 204)"} 25%,
+    ${"white"} 0%,
+    ${"white"} 50%
+  ) left top / ${size / scale}px ${size / scale}px`;
+}
+export {
+  getColorAreaBackground,
+  getColorSwatchBackground,
+  getSliderBackground
+};

package/dist/components/colors/src/utils/color-profile-storage.d.ts

@@ -0,0 +1,29 @@
+import { ColorProfile } from '../types/colors';
+/**
+ * 颜色配置文件持久化工具
+ *
+ * 这个工具负责颜色配置文件偏好的读取、存储和清除，
+ * 与组件逻辑完全分离，可以在业务代码中单独使用。
+ */
+export declare const colorProfileStorage: {
+    /**
+     * 获取存储的颜色配置
+     * @returns 存储的颜色配置，如果没有则返回 null
+     */
+    get: () => ColorProfile | null;
+    /**
+     * 设置颜色配置
+     * @param profile 要存储的颜色配置
+     */
+    set: (profile: ColorProfile) => void;
+    /**
+     * 清除存储的颜色配置
+     */
+    clear: () => void;
+    /**
+     * 监听存储变化
+     * @param callback 当存储发生变化时的回调函数
+     * @returns 一个清理函数，用于移除事件监听
+     */
+    subscribe: (callback: (profile: ColorProfile | null) => void) => (() => void);
+};

package/dist/components/colors/src/utils/color.d.ts

@@ -0,0 +1,20 @@
+import { ColorProfile, RGB, RGBA, Transform } from '../types/colors';
+import { GradientPaint } from '../types/paint';
+export declare const getColorArr: (color: RGB | RGBA) => {
+    alpha: number;
+    color: RGB;
+};
+export declare const getRGBAString: (color: RGB | RGBA, alpha?: number) => string;
+export declare const getGradientString: (gradientStops: GradientPaint["gradientStops"], gradientType: GradientPaint["type"], gradientTransform: GradientPaint["gradientTransform"], colorProfile?: ColorProfile) => string;
+export declare const getLinearGradientAngle: (gradientTransform: Transform) => number;
+export declare const getRadialGradientPosition: (gradientTransform: Transform) => {
+    widthFactor: number;
+    heightFactor: number;
+    centerAnchorX: number;
+    centerAnchorY: number;
+};
+export declare const getConicGradientPosition: (gradientTransform: Transform) => {
+    angle: number;
+    centerAnchorX: number;
+    centerAnchorY: number;
+};

package/dist/components/colors/src/utils/color.js

@@ -0,0 +1,45 @@
+import { round } from "es-toolkit";
+import { profileConvertString } from "./colors-convert.js";
+const getColorArr = (color) => {
+  if ("a" in color) {
+    return {
+      color: {
+        r: color.r,
+        g: color.g,
+        b: color.b
+      },
+      alpha: color.a
+    };
+  }
+  return {
+    color: {
+      r: color.r,
+      g: color.g,
+      b: color.b
+    },
+    alpha: 1
+  };
+};
+const getGradientString = (gradientStops, gradientType, gradientTransform, colorProfile) => {
+  const getStopString = (stop) => {
+    const color = {
+      ...stop.color,
+      a: round(stop.alpha, 2)
+    };
+    return `${profileConvertString(color, colorProfile ?? "srgb")} ${round(stop.position * 100, 2)}%`;
+  };
+  const stops = gradientStops.map(getStopString).join(", ");
+  const angle = gradientTransform[0][2];
+  switch (gradientType) {
+    case "GRADIENT_RADIAL":
+      return `radial-gradient(circle, ${stops})`;
+    case "GRADIENT_ANGULAR":
+      return `conic-gradient(from ${angle}deg, ${stops})`;
+    default:
+      return `linear-gradient(${angle}deg, ${stops})`;
+  }
+};
+export {
+  getColorArr,
+  getGradientString
+};

package/dist/components/colors/src/utils/colors-convert.d.ts

@@ -0,0 +1,18 @@
+import { HSB, HSL, RGB, RGBA, ColorProfile, CheckColorContrastLevel, CheckColorContrastCategory } from '../types/colors';
+export declare function rgbToHsl({ r, g, b }: RGB, prevHue?: number): HSL;
+export declare function hslToRgb({ h, s, l }: HSL): RGB;
+export declare function rgbToHsb({ r, g, b }: RGB): HSB;
+export declare function hsbToRgb({ h, s, b }: HSB): RGB;
+export declare function rgbToP3({ r, g, b, a }: RGBA): RGBA;
+export declare function p3ToRgb({ r, g, b, a }: RGBA): RGBA;
+export declare function p3StringToRgbString(color: string): string;
+export declare const profileConvertString: (value: RGB | RGBA, colorProfile: ColorProfile) => string | RGB;
+export declare const rgbaToRgb: (rgba: RGBA) => RGB;
+export declare const stringToRgba: (color: string) => RGBA;
+/**
+ * 根据 WCAG 标准计算对比度阈值
+ * @param level 对比度级别 (AA / AAA)
+ * @param category 内容类别 (文本/图形)
+ * @returns 对比度阈值
+ */
+export declare function getContrastThreshold(level?: CheckColorContrastLevel, category?: CheckColorContrastCategory, selectedElementType?: "text" | "graphics"): number;

package/dist/components/colors/src/utils/colors-convert.js

@@ -0,0 +1,138 @@
+import { round } from "es-toolkit";
+import tinycolor from "tinycolor2";
+function rgbToHsl({ r, g, b }, prevHue) {
+  try {
+    const color = tinycolor({ r, g, b });
+    const hsl = color.toHsl();
+    return {
+      h: isNaN(hsl.h) ? prevHue ?? 0 : hsl.h,
+      s: round(hsl.s, 2),
+      l: round(hsl.l, 2)
+    };
+  } catch {
+    return { h: prevHue ?? 0, s: 0, l: 0 };
+  }
+}
+function hslToRgb({ h, s, l }) {
+  try {
+    const color = tinycolor({ h, s, l });
+    const rgb = color.toRgb();
+    return {
+      r: round(rgb.r),
+      g: round(rgb.g),
+      b: round(rgb.b)
+    };
+  } catch {
+    return { r: 0, g: 0, b: 0 };
+  }
+}
+function rgbToHsb({ r, g, b }) {
+  const color = tinycolor({ r, g, b });
+  const hsb = color.toHsv();
+  return {
+    h: hsb.h,
+    s: hsb.s,
+    b: hsb.v
+  };
+}
+function hsbToRgb({ h, s, b }) {
+  const color = tinycolor({ h, s, v: b });
+  const rgb = color.toRgb();
+  return {
+    r: rgb.r,
+    g: rgb.g,
+    b: rgb.b
+  };
+}
+function rgbToP3({ r, g, b, a }) {
+  return {
+    r: r / 255,
+    g: g / 255,
+    b: b / 255,
+    a
+  };
+}
+function p3ToRgb({ r, g, b, a }) {
+  return {
+    r: r * 255,
+    g: g * 255,
+    b: b * 255,
+    a
+  };
+}
+function p3StringToRgbString(color) {
+  const matches = color.match(/\d+/g) || ["0", "0", "0"];
+  const [r, g, b] = matches.map(Number);
+  return `rgb(${r * 255}, ${g * 255}, ${b * 255})`;
+}
+const profileConvertString = (value, colorProfile) => {
+  try {
+    return typeof value === "object" && "a" in value ? colorProfile === "srgb" ? `rgba(${value.r} ${value.g} ${value.b} / ${value.a})` : `color(display-p3 ${round(value.r / 255, 3)} ${round(value.g / 255, 3)} ${round(value.b / 255, 3)} / ${round(value.a, 3)})` : colorProfile === "srgb" ? `rgb(${value.r} ${value.g} ${value.b})` : `color(display-p3 ${round(value.r / 255, 3)} ${round(value.g / 255, 3)} ${round(value.b / 255, 3)})`;
+  } catch {
+    return value;
+  }
+};
+const rgbaToRgb = (rgba) => {
+  return {
+    r: rgba.r,
+    g: rgba.g,
+    b: rgba.b
+  };
+};
+const stringToRgba = (color) => {
+  const rgbaRegex = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+))?\s*\)$/i;
+  const match = color.match(rgbaRegex);
+  if (!match) {
+    throw new Error("Invalid color format");
+  }
+  const [, r, g, b, a] = match;
+  return {
+    r: parseInt(r, 10),
+    g: parseInt(g, 10),
+    b: parseInt(b, 10),
+    a: a ? parseFloat(a) : 1
+    // Default alpha to 1 if not provided
+  };
+};
+function getContrastThreshold(level = "AA", category = "auto", selectedElementType = "graphics") {
+  if (level === "AAA") {
+    switch (category) {
+      case "large-text":
+        return 4.5;
+      case "normal-text":
+        return 7;
+      case "graphics":
+        return 3;
+      case "auto":
+        return selectedElementType === "text" ? 7 : 3;
+      default:
+        return selectedElementType === "text" ? 7 : 3;
+    }
+  } else {
+    switch (category) {
+      case "large-text":
+        return 3;
+      case "normal-text":
+        return 4.5;
+      case "graphics":
+        return 3;
+      case "auto":
+        return selectedElementType === "text" ? 4.5 : 3;
+      default:
+        return selectedElementType === "text" ? 4.5 : 3;
+    }
+  }
+}
+export {
+  getContrastThreshold,
+  hsbToRgb,
+  hslToRgb,
+  p3StringToRgbString,
+  p3ToRgb,
+  profileConvertString,
+  rgbToHsb,
+  rgbToHsl,
+  rgbToP3,
+  rgbaToRgb,
+  stringToRgba
+};

package/dist/components/colors/src/utils/contrast-utils.d.ts

@@ -0,0 +1,27 @@
+import { CheckColorContrastCategory, CheckColorContrastLevel, RGB } from '../types/colors';
+/**
+ * Calculate contrast ratio between two colors accounting for alpha blending
+ * @param backgroundColor Background color as RGB object or color string
+ * @param foregroundColor Foreground color as RGB object or color string
+ * @param foregroundAlpha Alpha value of the foreground color (0-1)
+ * @returns Contrast ratio as a number
+ */
+export declare const calculateContrastRatio: (backgroundColor: RGB, foregroundColor: RGB, foregroundAlpha?: number) => number;
+/**
+ * Determine if a color combination meets the specified contrast standard
+ * @param backgroundColor Background color
+ * @param foregroundColor Foreground color
+ * @param foregroundAlpha Alpha value of foreground color
+ * @param level Accessibility level (AA or AAA)
+ * @param category Type of content
+ * @param elementType Type of element (text or graphics)
+ * @returns Boolean indicating if the contrast meets the standard
+ */
+export declare const meetsContrastStandard: (backgroundColor: RGB, foregroundColor: RGB, foregroundAlpha?: number, level?: CheckColorContrastLevel, category?: CheckColorContrastCategory, elementType?: "text" | "graphics") => boolean;
+/**
+ * Get the effective element type based on category and selected element type
+ * @param category Content category
+ * @param selectedElementType Selected element type
+ * @returns Effective element type (text or graphics)
+ */
+export declare const getEffectiveElementType: (category?: CheckColorContrastCategory, selectedElementType?: "text" | "graphics") => "text" | "graphics";

package/dist/components/colors/src/utils/contrast-utils.js

@@ -0,0 +1,25 @@
+import tinycolor from "tinycolor2";
+const calculateContrastRatio = (backgroundColor, foregroundColor, foregroundAlpha = 1) => {
+  const bgColor = tinycolor(backgroundColor);
+  const fgColor = tinycolor(foregroundColor);
+  fgColor.setAlpha(foregroundAlpha);
+  let actualFgColor = fgColor;
+  if (foregroundAlpha < 1) {
+    actualFgColor = tinycolor.mix(
+      bgColor.toRgbString(),
+      fgColor.toRgbString(),
+      foregroundAlpha * 100
+    );
+  }
+  return tinycolor.readability(bgColor, actualFgColor);
+};
+const getEffectiveElementType = (category, selectedElementType) => {
+  if (category === "large-text" || category === "normal-text") {
+    return "text";
+  }
+  return selectedElementType ?? "graphics";
+};
+export {
+  calculateContrastRatio,
+  getEffectiveElementType
+};

package/dist/components/colors/src/utils/cursor.d.ts

@@ -0,0 +1 @@
+export declare const cursorUrl: string;

package/dist/components/colors/src/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './background';
+export * from './colors-convert';
+export * from './color';
+export * from './position';
+export * from './contrast-utils';
+export * from './validate';
+export * from './cursor';

package/dist/components/colors/src/utils/math.d.ts

@@ -0,0 +1,9 @@
+export declare const PI: number;
+export declare const RAD2DEG: number;
+export declare function wrapAngle(angle: number, benchmark?: number): number;
+/**
+ * 将弧度转换为角度
+ * @param radians 弧度值
+ * @returns 对应的角度值
+ */
+export declare function radToDeg(radians: number): number;

package/dist/components/colors/src/utils/position.d.ts

@@ -0,0 +1,33 @@
+import { HSB, HSL, PickerAreaType, PickerSliderType } from '../types/colors';
+import { Vector } from '../types/base';
+/**
+ * Convert position to color values based on color area type
+ */
+export declare function positionToAreaColor(position: Vector, type: PickerAreaType, hue?: number): HSB | HSL;
+/**
+ * Convert color values to position based on color area type
+ */
+export declare function colorToAreaPosition(color: HSB | HSL, type: PickerAreaType): Vector;
+/**
+ * Convert HSB to HSL
+ */
+export declare function hsbToHsl(hsb: HSB): HSL;
+/**
+ * Convert HSL to HSB
+ */
+export declare function hslToHsb(hsl: HSL): HSB;
+/**
+ * Color value stabilizer for edge cases
+ */
+export declare class ColorStabilizer {
+    private readonly EDGE_THRESHOLD;
+    private readonly BRIGHTNESS_THRESHOLD;
+    stabilizeHSB(hsb: HSB): HSB;
+    stabilizeHSL(hsl: HSL): HSL;
+}
+/**
+ * Convert slider position to color value string
+ */
+export declare function positionToSliderValue(position: number, type: PickerSliderType, hue?: number): string;
+export declare const isEdgeValue: (value: number) => boolean;
+export type { HSB, HSL, Vector };

package/dist/components/colors/src/utils/position.js

@@ -0,0 +1,60 @@
+const MAX_HUE = 360;
+const MAX_PERCENTAGE = 100;
+const DEFAULT_LIGHTNESS = 50;
+function positionToAreaColor(position, type, hue = 0) {
+  const { x, y } = position;
+  switch (type) {
+    case "saturation-lightness": {
+      return {
+        h: hue,
+        s: x * MAX_PERCENTAGE,
+        l: y * MAX_PERCENTAGE
+      };
+    }
+    case "saturation-brightness": {
+      return {
+        h: hue,
+        s: x * MAX_PERCENTAGE,
+        b: y * MAX_PERCENTAGE
+      };
+    }
+  }
+}
+function colorToAreaPosition(color, type) {
+  switch (type) {
+    case "saturation-lightness": {
+      const hsl = color;
+      return {
+        x: hsl.s / MAX_PERCENTAGE,
+        y: hsl.l / MAX_PERCENTAGE
+      };
+    }
+    case "saturation-brightness": {
+      const hsb = color;
+      return {
+        x: hsb.s / MAX_PERCENTAGE,
+        y: hsb.b / MAX_PERCENTAGE
+      };
+    }
+  }
+}
+function positionToSliderValue(position, type, hue = 0) {
+  const value = position * MAX_PERCENTAGE;
+  switch (type) {
+    case "hue":
+      return `hsl(${position * MAX_HUE % MAX_HUE}, ${MAX_PERCENTAGE}%, ${DEFAULT_LIGHTNESS}%)`;
+    case "saturation":
+      return `hsl(${hue}, ${Math.round(value)}%, ${DEFAULT_LIGHTNESS}%)`;
+    case "lightness":
+      return `hsl(${hue}, ${MAX_PERCENTAGE}%, ${Math.round(value)}%)`;
+    case "alpha":
+      return `hsla(${hue}, ${MAX_PERCENTAGE}%, ${DEFAULT_LIGHTNESS}%, ${position})`;
+  }
+}
+const isEdgeValue = (value) => Math.abs(value) < 0.01 || Math.abs(value - 1) < 0.01;
+export {
+  colorToAreaPosition,
+  isEdgeValue,
+  positionToAreaColor,
+  positionToSliderValue
+};

package/dist/components/colors/src/utils/validate.d.ts

@@ -0,0 +1,10 @@
+type ColorValidationError = {
+    message: string;
+    type: "invalid_format" | "invalid_value" | "parse_error";
+};
+export declare const validateHex: (hex: string) => {
+    alpha?: number;
+    color: string;
+    error?: ColorValidationError;
+};
+export {};