@choice-ui/react 1.7.6 → 1.7.7

package/dist/components/colors/src/hooks/use-color-contrast-recommendation.js

@@ -0,0 +1,502 @@
+import { round } from "es-toolkit";
+import { useMemo, useState, useRef, useEffect, useCallback } from "react";
+import tinycolor from "tinycolor2";
+import { createBoundaryWorker } from "../workers/boundary-calculator.worker.bundled.js";
+const evaluateCubicBezier = (p0, p1, p2, p3, t) => {
+  const u = 1 - t;
+  const tt = t * t;
+  const uu = u * u;
+  const uuu = uu * u;
+  const ttt = tt * t;
+  return uuu * p0 + 3 * uu * t * p1 + 3 * u * tt * p2 + ttt * p3;
+};
+const serializeParams = (params) => {
+  return `${params.hue}-${params.width}-${params.height}-${params.foregroundAlpha}-${params.level}-${params.category}-${params.selectedElementType}-${params.colorSpace}-${params.backgroundColor.r}-${params.backgroundColor.g}-${params.backgroundColor.b}`;
+};
+const useColorContrastRecommendation = (props) => {
+  const {
+    width,
+    height,
+    hue,
+    backgroundColor,
+    foregroundAlpha = 1,
+    level = "AA",
+    category = "auto",
+    selectedElementType = "graphics",
+    options,
+    colorSpace = "hsb",
+    paintState = { hsl_s: 0, hsv_s: 0, l: 0, v: 0, h: 0 }
+  } = props;
+  const stableBackgroundColor = useMemo(
+    () => backgroundColor,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [backgroundColor == null ? void 0 : backgroundColor.r, backgroundColor == null ? void 0 : backgroundColor.g, backgroundColor == null ? void 0 : backgroundColor.b]
+  );
+  const stableHue = useMemo(() => Math.round(hue), [hue]);
+  const [workerReady, setWorkerReady] = useState(false);
+  const [recommendedPoint, setRecommendedPoint] = useState(null);
+  const [boundaryData, setBoundaryData] = useState(null);
+  const [isCalculating, setIsCalculating] = useState(false);
+  const workerRef = useRef(null);
+  const calculationIdRef = useRef(0);
+  const throttleTimeoutRef = useRef(null);
+  const calculationTimeoutRef = useRef(null);
+  const lastExecutionTimeRef = useRef(0);
+  const latestParamsRef = useRef(null);
+  const pendingParamsRef = useRef(null);
+  const executeCalculationRef = useRef(null);
+  const { onColorChange } = options ?? {};
+  const clearCalculationTimeout = () => {
+    if (calculationTimeoutRef.current) {
+      clearTimeout(calculationTimeoutRef.current);
+      calculationTimeoutRef.current = null;
+    }
+  };
+  useEffect(() => {
+    const worker = createBoundaryWorker();
+    if (!worker) return;
+    workerRef.current = worker;
+    const handleWorkerMessage = (event) => {
+      const { id, result, error, status } = event.data;
+      if (id === 0 && status === "ready") {
+        setWorkerReady(true);
+        return;
+      }
+      if (id !== calculationIdRef.current) {
+        return;
+      }
+      clearCalculationTimeout();
+      setIsCalculating(false);
+      if (error) {
+        console.error("[Hook] Error received from boundary worker:", error);
+        setBoundaryData(null);
+        pendingParamsRef.current = null;
+      } else if (result) {
+        setBoundaryData(result);
+        if (latestParamsRef.current && pendingParamsRef.current) {
+          const currentParamsStr = serializeParams(latestParamsRef.current);
+          if (currentParamsStr !== pendingParamsRef.current) {
+            pendingParamsRef.current = null;
+            if (executeCalculationRef.current) {
+              executeCalculationRef.current();
+            }
+          } else {
+            pendingParamsRef.current = null;
+          }
+        }
+      } else {
+        setBoundaryData(null);
+        pendingParamsRef.current = null;
+      }
+    };
+    const handleWorkerError = (error) => {
+      console.error("[Hook] Error event in boundary worker:", error);
+      clearCalculationTimeout();
+      setIsCalculating(false);
+      setBoundaryData(null);
+      pendingParamsRef.current = null;
+    };
+    worker.addEventListener("message", handleWorkerMessage);
+    worker.addEventListener("error", handleWorkerError);
+    return () => {
+      worker.removeEventListener("message", handleWorkerMessage);
+      worker.removeEventListener("error", handleWorkerError);
+      worker.terminate();
+      workerRef.current = null;
+      setWorkerReady(false);
+      if (throttleTimeoutRef.current) {
+        clearTimeout(throttleTimeoutRef.current);
+      }
+      clearCalculationTimeout();
+    };
+  }, []);
+  useEffect(() => {
+    const rawColorSpace = colorSpace === "hsl" ? "hsl" : "hsb";
+    latestParamsRef.current = {
+      width: Math.round(width),
+      height: Math.round(height),
+      hue: stableHue,
+      backgroundColor: stableBackgroundColor,
+      foregroundAlpha: Number(foregroundAlpha.toFixed(2)),
+      level,
+      category,
+      selectedElementType,
+      colorSpace: rawColorSpace
+    };
+  }, [
+    width,
+    height,
+    stableHue,
+    stableBackgroundColor,
+    foregroundAlpha,
+    level,
+    category,
+    selectedElementType,
+    colorSpace
+  ]);
+  useEffect(() => {
+    const throttleDelay = 100;
+    const calculationTimeoutMs = 2e3;
+    if (!workerRef.current || width <= 0 || height <= 0) {
+      setBoundaryData(null);
+      setIsCalculating(false);
+      if (throttleTimeoutRef.current) clearTimeout(throttleTimeoutRef.current);
+      clearCalculationTimeout();
+      return;
+    }
+    if (!workerReady) {
+      return;
+    }
+    const executeCalculation = () => {
+      if (!workerRef.current || !latestParamsRef.current) return;
+      clearCalculationTimeout();
+      setIsCalculating(true);
+      const currentId = ++calculationIdRef.current;
+      const params = latestParamsRef.current;
+      pendingParamsRef.current = serializeParams(params);
+      const message = { id: currentId, params };
+      workerRef.current.postMessage(message);
+      lastExecutionTimeRef.current = Date.now();
+      if (throttleTimeoutRef.current) {
+        clearTimeout(throttleTimeoutRef.current);
+        throttleTimeoutRef.current = null;
+      }
+      calculationTimeoutRef.current = setTimeout(() => {
+        if (calculationIdRef.current === currentId) {
+          setIsCalculating(false);
+          pendingParamsRef.current = null;
+        }
+      }, calculationTimeoutMs);
+    };
+    executeCalculationRef.current = executeCalculation;
+    const now = Date.now();
+    const timeSinceLastExec = now - lastExecutionTimeRef.current;
+    if (throttleTimeoutRef.current) {
+      clearTimeout(throttleTimeoutRef.current);
+      throttleTimeoutRef.current = null;
+    }
+    if (timeSinceLastExec >= throttleDelay) {
+      executeCalculation();
+    } else {
+      const delay = throttleDelay - timeSinceLastExec;
+      throttleTimeoutRef.current = setTimeout(() => {
+        executeCalculation();
+      }, delay);
+    }
+  }, [
+    width,
+    height,
+    stableHue,
+    stableBackgroundColor,
+    foregroundAlpha,
+    level,
+    category,
+    selectedElementType,
+    colorSpace,
+    workerReady
+  ]);
+  const findNearestPointOnBoundary = useCallback(
+    (boundary, currentX, currentY, safetyOffset, canvasHeight) => {
+      var _a, _b;
+      if (!boundary) return null;
+      let nearestPoint = null;
+      if ((_a = boundary.bezierSegments) == null ? void 0 : _a.length) {
+        const segments = boundary.bezierSegments;
+        const samplesPerSegment = 20;
+        for (const segment of segments) {
+          const [x0, y0] = segment.start;
+          const [x1, y1] = segment.cp1;
+          const [x2, y2] = segment.cp2;
+          const [x3, y3] = segment.end;
+          for (let i = 0; i <= samplesPerSegment; i++) {
+            const t = i / samplesPerSegment;
+            const bx = evaluateCubicBezier(x0, x1, x2, x3, t);
+            const by = evaluateCubicBezier(y0, y1, y2, y3, t);
+            const safeX = bx;
+            const safeY = by + safetyOffset;
+            if (safeY < 0 || safeY > canvasHeight) {
+              continue;
+            }
+            const dx = safeX - currentX;
+            const dy = safeY - currentY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (!nearestPoint || distance < nearestPoint.distance) {
+              nearestPoint = { x: safeX, y: safeY, distance };
+            }
+          }
+        }
+      } else if (((_b = boundary.simplifiedPoints) == null ? void 0 : _b.length) >= 2) {
+        const points = boundary.simplifiedPoints;
+        const samplesPerSegment = 10;
+        for (let i = 0; i < points.length - 1; i++) {
+          const [x0, y0] = points[i];
+          const [x1, y1] = points[i + 1];
+          for (let j = 0; j <= samplesPerSegment; j++) {
+            const t = j / samplesPerSegment;
+            const bx = x0 + (x1 - x0) * t;
+            const by = y0 + (y1 - y0) * t;
+            const safeX = bx;
+            const safeY = by + safetyOffset;
+            if (safeY < 0 || safeY > canvasHeight) {
+              continue;
+            }
+            const dx = safeX - currentX;
+            const dy = safeY - currentY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (!nearestPoint || distance < nearestPoint.distance) {
+              nearestPoint = { x: safeX, y: safeY, distance };
+            }
+          }
+        }
+      }
+      return nearestPoint;
+    },
+    []
+  );
+  const getBoundaryXRange = useCallback(
+    (boundary) => {
+      var _a, _b;
+      if (!boundary) return null;
+      if ((_a = boundary.bezierSegments) == null ? void 0 : _a.length) {
+        let minX = Infinity;
+        let maxX = -Infinity;
+        for (const segment of boundary.bezierSegments) {
+          minX = Math.min(minX, segment.start[0], segment.end[0]);
+          maxX = Math.max(maxX, segment.start[0], segment.end[0]);
+        }
+        return { minX, maxX };
+      }
+      if (((_b = boundary.simplifiedPoints) == null ? void 0 : _b.length) >= 2) {
+        const points = boundary.simplifiedPoints;
+        let minX = Infinity;
+        let maxX = -Infinity;
+        for (const point of points) {
+          minX = Math.min(minX, point[0]);
+          maxX = Math.max(maxX, point[0]);
+        }
+        return { minX, maxX };
+      }
+      return null;
+    },
+    []
+  );
+  const findYAtX = useCallback(
+    (boundary, x) => {
+      var _a, _b;
+      if (!boundary) return null;
+      if ((_a = boundary.bezierSegments) == null ? void 0 : _a.length) {
+        const segments = boundary.bezierSegments;
+        let boundaryMinX = Infinity;
+        let boundaryMaxX = -Infinity;
+        let leftEndY = 0;
+        let rightEndY = 0;
+        for (const segment of segments) {
+          const [x0] = segment.start;
+          const [x3] = segment.end;
+          if (x0 < boundaryMinX) {
+            boundaryMinX = x0;
+            leftEndY = segment.start[1];
+          }
+          if (x3 < boundaryMinX) {
+            boundaryMinX = x3;
+            leftEndY = segment.end[1];
+          }
+          if (x0 > boundaryMaxX) {
+            boundaryMaxX = x0;
+            rightEndY = segment.start[1];
+          }
+          if (x3 > boundaryMaxX) {
+            boundaryMaxX = x3;
+            rightEndY = segment.end[1];
+          }
+        }
+        if (x < boundaryMinX) {
+          return leftEndY;
+        }
+        if (x > boundaryMaxX) {
+          return rightEndY;
+        }
+        for (const segment of segments) {
+          const [x0] = segment.start;
+          const [x3] = segment.end;
+          const minX = Math.min(x0, x3);
+          const maxX = Math.max(x0, x3);
+          if (x >= minX - 1 && x <= maxX + 1) {
+            const samples = 50;
+            let bestY = null;
+            let bestDiff = Infinity;
+            for (let i = 0; i <= samples; i++) {
+              const t = i / samples;
+              const bx = evaluateCubicBezier(segment.start[0], segment.cp1[0], segment.cp2[0], segment.end[0], t);
+              const by = evaluateCubicBezier(segment.start[1], segment.cp1[1], segment.cp2[1], segment.end[1], t);
+              const diff = Math.abs(bx - x);
+              if (diff < bestDiff) {
+                bestDiff = diff;
+                bestY = by;
+              }
+            }
+            if (bestY !== null) return bestY;
+          }
+        }
+      }
+      if (((_b = boundary.simplifiedPoints) == null ? void 0 : _b.length) >= 2) {
+        const points = boundary.simplifiedPoints;
+        const firstX = points[0][0];
+        const lastX = points[points.length - 1][0];
+        const minX = Math.min(firstX, lastX);
+        const maxX = Math.max(firstX, lastX);
+        if (x < minX) {
+          return firstX < lastX ? points[0][1] : points[points.length - 1][1];
+        }
+        if (x > maxX) {
+          return firstX < lastX ? points[points.length - 1][1] : points[0][1];
+        }
+        for (let i = 0; i < points.length - 1; i++) {
+          const [x0, y0] = points[i];
+          const [x1, y1] = points[i + 1];
+          if (x >= x0 && x <= x1 || x >= x1 && x <= x0) {
+            if (x1 === x0) return y0;
+            const t = (x - x0) / (x1 - x0);
+            return y0 + t * (y1 - y0);
+          }
+        }
+      }
+      return null;
+    },
+    []
+  );
+  const calculateRecommendedPoint = useCallback(() => {
+    if (!boundaryData || !boundaryData.lowerBoundary && !boundaryData.upperBoundary || width <= 0 || height <= 0) {
+      return null;
+    }
+    const isHSL = colorSpace === "hsl";
+    const currentSat = isHSL ? paintState.hsl_s : paintState.hsv_s;
+    const currentVal = isHSL ? paintState.l : paintState.v;
+    const currentX = round(currentSat * width, 0);
+    const currentY = round((1 - currentVal) * height, 0);
+    const { lowerBoundary, upperBoundary } = boundaryData;
+    const safetyMargin = 3;
+    const edgeThreshold = 5;
+    const getAvgY = (boundary) => {
+      var _a;
+      if (!((_a = boundary == null ? void 0 : boundary.bezierSegments) == null ? void 0 : _a.length)) return null;
+      const segments = boundary.bezierSegments;
+      return segments.reduce((sum, seg) => sum + seg.start[1] + seg.end[1], 0) / (segments.length * 2);
+    };
+    const upperAvgY = getAvgY(upperBoundary);
+    const lowerAvgY = getAvgY(lowerBoundary);
+    const isUpperAtTopEdge = upperAvgY !== null && upperAvgY < edgeThreshold;
+    const isLowerAtBottomEdge = lowerAvgY !== null && lowerAvgY > height - edgeThreshold;
+    const effectiveLowerBoundary = isLowerAtBottomEdge ? null : lowerBoundary;
+    const effectiveUpperBoundary = isUpperAtTopEdge ? null : upperBoundary;
+    const lowerXRange = getBoundaryXRange(effectiveLowerBoundary);
+    const upperXRange = getBoundaryXRange(effectiveUpperBoundary);
+    const isInLowerXRange = lowerXRange && currentX >= lowerXRange.minX && currentX <= lowerXRange.maxX;
+    const isInUpperXRange = upperXRange && currentX >= upperXRange.minX && currentX <= upperXRange.maxX;
+    const lowerY = findYAtX(effectiveLowerBoundary, currentX);
+    const upperY = findYAtX(effectiveUpperBoundary, currentX);
+    const isAboveLower = lowerY !== null && isInLowerXRange && currentY < lowerY - safetyMargin;
+    const isBelowUpper = upperY !== null && isInUpperXRange && currentY > upperY + safetyMargin;
+    if (effectiveLowerBoundary && !effectiveUpperBoundary) {
+      if (isAboveLower) {
+        return null;
+      }
+    }
+    if (effectiveUpperBoundary && !effectiveLowerBoundary) {
+      if (isBelowUpper) {
+        return null;
+      }
+    }
+    if (effectiveLowerBoundary && effectiveUpperBoundary) {
+      if (isAboveLower || isBelowUpper) {
+        return null;
+      }
+    }
+    let recommendedX = null;
+    let recommendedY = null;
+    if (effectiveLowerBoundary && !effectiveUpperBoundary) {
+      const nearest = findNearestPointOnBoundary(effectiveLowerBoundary, currentX, currentY, -safetyMargin, height);
+      if (nearest) {
+        recommendedX = nearest.x;
+        recommendedY = nearest.y;
+      }
+    } else if (effectiveUpperBoundary && !effectiveLowerBoundary) {
+      const nearest = findNearestPointOnBoundary(effectiveUpperBoundary, currentX, currentY, safetyMargin, height);
+      if (nearest) {
+        recommendedX = nearest.x;
+        recommendedY = nearest.y;
+      }
+    } else if (effectiveLowerBoundary && effectiveUpperBoundary) {
+      const nearestOnLower = findNearestPointOnBoundary(effectiveLowerBoundary, currentX, currentY, -safetyMargin, height);
+      const nearestOnUpper = findNearestPointOnBoundary(effectiveUpperBoundary, currentX, currentY, safetyMargin, height);
+      if (nearestOnLower && nearestOnUpper) {
+        if (nearestOnLower.distance < nearestOnUpper.distance) {
+          recommendedX = nearestOnLower.x;
+          recommendedY = nearestOnLower.y;
+        } else {
+          recommendedX = nearestOnUpper.x;
+          recommendedY = nearestOnUpper.y;
+        }
+      } else if (nearestOnLower) {
+        recommendedX = nearestOnLower.x;
+        recommendedY = nearestOnLower.y;
+      } else if (nearestOnUpper) {
+        recommendedX = nearestOnUpper.x;
+        recommendedY = nearestOnUpper.y;
+      }
+    }
+    if (recommendedX === null || recommendedY === null) {
+      return null;
+    }
+    recommendedX = Math.max(0, Math.min(width, recommendedX));
+    recommendedY = Math.max(0, Math.min(height, recommendedY));
+    const slX = recommendedX / width;
+    const slY = 1 - recommendedY / height;
+    return {
+      x: recommendedX,
+      y: recommendedY,
+      slX,
+      slY
+    };
+  }, [width, height, boundaryData, findNearestPointOnBoundary, findYAtX, getBoundaryXRange, colorSpace, paintState]);
+  useEffect(() => {
+    const point = calculateRecommendedPoint();
+    setRecommendedPoint(point);
+  }, [boundaryData, calculateRecommendedPoint]);
+  const updateRecommendedPoint = useCallback(() => {
+    const point = calculateRecommendedPoint();
+    setRecommendedPoint(point);
+    return point;
+  }, [calculateRecommendedPoint]);
+  const applyRecommendedPoint = useCallback(() => {
+    if (!recommendedPoint) {
+      return false;
+    }
+    const isHSL = colorSpace === "hsl";
+    const s = recommendedPoint.slX;
+    const lv = recommendedPoint.slY;
+    let finalColor = null;
+    if (isHSL) {
+      finalColor = tinycolor({ h: hue, s, l: lv, a: foregroundAlpha });
+    } else {
+      finalColor = tinycolor({ h: hue, s, v: lv, a: foregroundAlpha });
+    }
+    if (!finalColor || !finalColor.isValid()) {
+      return false;
+    }
+    const finalRgb = finalColor.toRgb();
+    onColorChange == null ? void 0 : onColorChange({ r: finalRgb.r, g: finalRgb.g, b: finalRgb.b }, foregroundAlpha, hue);
+    return true;
+  }, [recommendedPoint, colorSpace, onColorChange, foregroundAlpha, hue]);
+  return {
+    recommendedPoint,
+    boundaryData,
+    isCalculating,
+    calculateRecommendedPoint,
+    updateRecommendedPoint,
+    applyRecommendedPoint
+  };
+};
+export {
+  useColorContrastRecommendation
+};

package/dist/components/colors/src/hooks/use-color-parser.d.ts

@@ -0,0 +1,10 @@
+import { default as chroma } from 'chroma-js';
+interface ColorParseResult {
+    alpha: number;
+    color: chroma.Color | null;
+    hasAlpha: boolean;
+}
+export declare function useColorParser(): {
+    parseColor: (value: string) => ColorParseResult;
+};
+export {};

package/dist/components/colors/src/hooks/use-color-parser.js

@@ -0,0 +1,146 @@
+import "../../../../node_modules/.pnpm/chroma-js@3.2.0/node_modules/chroma-js/index.js";
+import chroma from "../../../../node_modules/.pnpm/chroma-js@3.2.0/node_modules/chroma-js/src/chroma.js";
+function useColorParser() {
+  const parseOklab = (value) => {
+    const oklabMatch = value.match(
+      /oklab\(([\d.]+)%?\s+([-\d.]+)\s+([-\d.]+)(?:\s*\/\s*([\d.]+)%?)?\)/
+    );
+    if (oklabMatch) {
+      const [, l, a, b, alphaValue] = oklabMatch;
+      const L = parseFloat(l) / 100;
+      const A = parseFloat(a);
+      const B = parseFloat(b);
+      return {
+        color: chroma.oklab(L, A, B),
+        hasAlpha: !!alphaValue,
+        alpha: alphaValue ? parseFloat(alphaValue) / 100 : 1
+      };
+    }
+    return { color: null, hasAlpha: false, alpha: 1 };
+  };
+  const parseOklch = (value) => {
+    const oklchMatch = value.match(
+      /oklch\(([\d.]+)%?\s+([\d.]+)\s+([\d.]+)deg(?:\s*\/\s*([\d.]+)%?)?\)/
+    );
+    if (oklchMatch) {
+      const [, l, c, h, alphaValue] = oklchMatch;
+      const L = parseFloat(l) / 100;
+      const C = parseFloat(c);
+      const H = parseFloat(h);
+      return {
+        color: chroma.oklch(L, C, H),
+        hasAlpha: !!alphaValue,
+        alpha: alphaValue ? parseFloat(alphaValue) / 100 : 1
+      };
+    }
+    return { color: null, hasAlpha: false, alpha: 1 };
+  };
+  const parseLab = (value) => {
+    const labMatch = value.match(/lab\(([\d.]+)%?\s+([-\d.]+)\s+([-\d.]+)(?:\s*\/\s*([\d.]+)%?)?\)/);
+    if (labMatch) {
+      const [, l, a, b, alphaValue] = labMatch;
+      return {
+        color: chroma.lab(parseFloat(l), parseFloat(a), parseFloat(b)),
+        hasAlpha: !!alphaValue,
+        alpha: alphaValue ? parseFloat(alphaValue) / 100 : 1
+      };
+    }
+    return { color: null, hasAlpha: false, alpha: 1 };
+  };
+  const parseLch = (value) => {
+    const lchMatch = value.match(
+      /lch\(([\d.]+)%?\s+([\d.]+)\s+([\d.]+)deg(?:\s*\/\s*([\d.]+)%?)?\)/
+    );
+    if (lchMatch) {
+      const [, l, c, h, alphaValue] = lchMatch;
+      const hRad = parseFloat(h) * Math.PI / 180;
+      const a = parseFloat(c) * Math.cos(hRad);
+      const b = parseFloat(c) * Math.sin(hRad);
+      return {
+        color: chroma.lab(parseFloat(l), a, b),
+        hasAlpha: !!alphaValue,
+        alpha: alphaValue ? parseFloat(alphaValue) / 100 : 1
+      };
+    }
+    return { color: null, hasAlpha: false, alpha: 1 };
+  };
+  const parseHsl = (value) => {
+    const processedHsl = value.replace(/(\d+)deg/g, "$1").replace(/hsla?\((.*?)\)/, (_, p1) => {
+      const parts = p1.split(/[\s,]+/).filter(Boolean).map((part) => part.trim());
+      if (parts.length === 4) {
+        return `hsl(${parts[0]}, ${parts[1]}, ${parts[2]})`;
+      }
+      return `hsl(${parts.join(", ")})`;
+    });
+    try {
+      const color = chroma(processedHsl);
+      const hasAlpha = value.startsWith("hsla") || value.includes("/");
+      let alpha = 1;
+      if (hasAlpha) {
+        const alphaMatch = value.match(/\/\s*([\d.]+)%?\s*\)$/);
+        if (alphaMatch) {
+          alpha = parseFloat(alphaMatch[1]) / (alphaMatch[1].includes("%") ? 100 : 1);
+        }
+      }
+      return { color, hasAlpha, alpha };
+    } catch {
+      return { color: null, hasAlpha: false, alpha: 1 };
+    }
+  };
+  const parseDisplayP3 = (value) => {
+    const p3Match = value.match(
+      /color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\)/
+    );
+    if (p3Match) {
+      const [, r, g, b, alphaValue] = p3Match;
+      const rgb = {
+        r: Math.round(parseFloat(r) * 255),
+        g: Math.round(parseFloat(g) * 255),
+        b: Math.round(parseFloat(b) * 255)
+      };
+      return {
+        color: chroma(rgb),
+        hasAlpha: !!alphaValue,
+        alpha: alphaValue ? parseFloat(alphaValue) : 1
+      };
+    }
+    return { color: null, hasAlpha: false, alpha: 1 };
+  };
+  const parseColor = (value) => {
+    if (value.startsWith("oklab(")) {
+      return parseOklab(value);
+    }
+    if (value.startsWith("oklch(")) {
+      return parseOklch(value);
+    }
+    if (value.startsWith("lab(")) {
+      return parseLab(value);
+    }
+    if (value.startsWith("lch(")) {
+      return parseLch(value);
+    }
+    if (value.startsWith("hsl")) {
+      return parseHsl(value);
+    }
+    if (value.startsWith("color(display-p3")) {
+      return parseDisplayP3(value);
+    }
+    try {
+      const color = chroma(value);
+      const alpha = color.alpha();
+      return {
+        color,
+        hasAlpha: alpha < 1,
+        alpha
+      };
+    } catch {
+      return { color: null, hasAlpha: false, alpha: 1 };
+    }
+  };
+  return {
+    parseColor
+  };
+}
+export {
+  useColorParser
+};

package/dist/components/colors/src/hooks/use-color-picker.d.ts

@@ -0,0 +1,45 @@
+import { PickerType, RGB } from '../types/colors';
+import { LibrariesDisplayType, LibrariesType } from '../types/libraries';
+import { GradientPaint } from '../types/paint';
+import { Style } from '../types/style';
+import { Variable } from '../types/variable';
+interface LibrariesState {
+    displayType: LibrariesDisplayType;
+    pickerType: PickerType;
+    selected: {
+        item: Variable | Style;
+        type: LibrariesType;
+    } | null;
+    selectedCategory: string;
+}
+/**
+ * Color Picker Hook
+ *
+ * 管理颜色选择器的状态和行为
+ *
+ * @returns {Object} 颜色选择器状态和处理函数
+ */
+export declare const useColorPicker: () => {
+    pickerType: string;
+    paintsType: "SOLID" | import('../../..').GradientPaintType | "IMAGE" | "PATTERN";
+    color: RGB;
+    alpha: number;
+    gradient: GradientPaint;
+    libraries: LibrariesState;
+    variableColor: {
+        alpha: number;
+        color: RGB;
+    };
+    handleColorChange: (color: RGB) => void;
+    handleAlphaChange: (alpha: number) => void;
+    handleGradientChange: (gradient: GradientPaint) => void;
+    handlePickerTypeChange: (type: string) => void;
+    handlePaintsTypeChange: (type: "SOLID" | import('../../..').GradientPaintType | "IMAGE" | "PATTERN") => void;
+    handleLibraryChange: (item: {
+        item: Variable | Style;
+        type: LibrariesType;
+    }) => void;
+    handleCategoryChange: (category: string) => void;
+    handleDisplayTypeChange: (displayType: LibrariesDisplayType) => void;
+};
+export {};