@choice-ui/react 1.7.6 → 1.7.7

package/dist/components/colors/scripts/build-worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/colors/src/check-color-contrast/check-color-contrast-boundary.d.ts

@@ -0,0 +1,14 @@
+import { BoundaryCalculationResult, BoundaryInfo, ChannelFieldSpace, PaintState, RecommendedPoint } from '../types/colors';
+interface CheckColorContrastBoundaryProps {
+    boundaryData: BoundaryCalculationResult;
+    colorSpace: ChannelFieldSpace;
+    foregroundAlpha?: number;
+    height?: number;
+    paintState: PaintState;
+    recommendedPoint: RecommendedPoint | null;
+    showRecommendedPoint?: boolean;
+    updateRecommendedPoint: () => RecommendedPoint | null;
+    width?: number;
+}
+export declare const CheckColorContrastBoundary: import('react').NamedExoticComponent<CheckColorContrastBoundaryProps>;
+export type { BoundaryCalculationResult, BoundaryInfo };

package/dist/components/colors/src/check-color-contrast/check-color-contrast-boundary.js

@@ -0,0 +1,403 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { memo, useRef, useState, useEffect, useMemo } from "react";
+import tinycolor from "tinycolor2";
+import { COLOR_SPACES } from "../contents/color-space.js";
+const lerp = (start, end, t) => start * (1 - t) + end * t;
+const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+const CheckColorContrastBoundary = memo(function CheckColorContrastBoundary2(props) {
+  const {
+    width = 0,
+    height = 0,
+    foregroundAlpha = 1,
+    showRecommendedPoint = false,
+    recommendedPoint,
+    boundaryData,
+    updateRecommendedPoint,
+    colorSpace,
+    paintState
+  } = props;
+  const boundaryCanvasRef = useRef(null);
+  const pointCanvasRef = useRef(null);
+  const isHSL = colorSpace === COLOR_SPACES.HSL;
+  const hue = paintState.h;
+  const saturation = isHSL ? paintState.hsl_s : paintState.hsv_s;
+  const luminance = isHSL ? paintState.l : paintState.v;
+  const roundedHue = Math.round(hue);
+  const [animatedPointPos, setAnimatedPointPos] = useState(null);
+  const animationFrameId = useRef(null);
+  const animationStateRef = useRef({ startTime: null, startPos: null, targetPos: null, duration: 50 });
+  useEffect(() => {
+    if (showRecommendedPoint) {
+      updateRecommendedPoint();
+    }
+  }, [showRecommendedPoint]);
+  const runAnimationLoop = () => {
+    const state = animationStateRef.current;
+    if (!state.startTime || !state.startPos || !state.targetPos) {
+      return;
+    }
+    const elapsed = performance.now() - state.startTime;
+    const progress = Math.min(elapsed / state.duration, 1);
+    const easedProgress = easeOutCubic(progress);
+    const currentX = lerp(state.startPos.x, state.targetPos.x, easedProgress);
+    const currentY = lerp(state.startPos.y, state.targetPos.y, easedProgress);
+    setAnimatedPointPos({ x: currentX, y: currentY });
+    if (progress < 1) {
+      animationFrameId.current = requestAnimationFrame(runAnimationLoop);
+    } else {
+      animationFrameId.current = null;
+      state.startTime = null;
+    }
+  };
+  useEffect(() => {
+    const stopAnimation = () => {
+      if (animationFrameId.current) {
+        cancelAnimationFrame(animationFrameId.current);
+        animationFrameId.current = null;
+      }
+      animationStateRef.current.startTime = null;
+    };
+    if (showRecommendedPoint && recommendedPoint) {
+      const targetPos = { x: recommendedPoint.x, y: recommendedPoint.y };
+      let startPos = animatedPointPos;
+      if (!startPos) {
+        const startSat = isHSL ? paintState.hsl_s : paintState.hsv_s;
+        const startVal = isHSL ? paintState.l : paintState.v;
+        startPos = {
+          x: startSat * width,
+          y: (1 - startVal) * height
+        };
+      }
+      if (!animationStateRef.current.startTime && (Math.abs(startPos.x - targetPos.x) > 0.1 || Math.abs(startPos.y - targetPos.y) > 0.1)) {
+        stopAnimation();
+        animationStateRef.current.startPos = startPos;
+        animationStateRef.current.targetPos = targetPos;
+        animationStateRef.current.startTime = performance.now();
+        setAnimatedPointPos(startPos);
+        animationFrameId.current = requestAnimationFrame(runAnimationLoop);
+      } else if (!animationStateRef.current.startTime) {
+        setAnimatedPointPos(targetPos);
+      }
+    } else {
+      stopAnimation();
+      setAnimatedPointPos(null);
+    }
+    return stopAnimation;
+  }, [showRecommendedPoint, recommendedPoint, width, height, isHSL, saturation, luminance]);
+  const boundaryPaths = useMemo(() => {
+    var _a, _b;
+    if (!boundaryData || width <= 0 || height <= 0) {
+      return null;
+    }
+    const { lowerBoundary, upperBoundary } = boundaryData;
+    if (!lowerBoundary && !upperBoundary) {
+      return null;
+    }
+    const paths = {
+      lowerPath: null,
+      upperPath: null
+    };
+    if ((_a = lowerBoundary == null ? void 0 : lowerBoundary.bezierSegments) == null ? void 0 : _a.length) {
+      const segments = lowerBoundary.bezierSegments;
+      let pathD = `M${segments[0].start[0]},${segments[0].start[1]}`;
+      for (const segment of segments) {
+        pathD += ` C${segment.cp1[0]},${segment.cp1[1]} ${segment.cp2[0]},${segment.cp2[1]} ${segment.end[0]},${segment.end[1]}`;
+      }
+      pathD += ` L${width},${height} L0,${height} Z`;
+      paths.lowerPath = pathD;
+    }
+    if ((_b = upperBoundary == null ? void 0 : upperBoundary.bezierSegments) == null ? void 0 : _b.length) {
+      const segments = upperBoundary.bezierSegments;
+      let pathD = `M${segments[0].start[0]},${segments[0].start[1]}`;
+      for (const segment of segments) {
+        pathD += ` C${segment.cp1[0]},${segment.cp1[1]} ${segment.cp2[0]},${segment.cp2[1]} ${segment.end[0]},${segment.end[1]}`;
+      }
+      pathD += ` L${width},0 L0,0 Z`;
+      paths.upperPath = pathD;
+    }
+    return paths;
+  }, [boundaryData, width, height]);
+  useEffect(() => {
+    if (width <= 0 || height <= 0 || !boundaryData) return;
+    const { lowerBoundary, upperBoundary } = boundaryData;
+    if (!lowerBoundary && !upperBoundary) return;
+    const canvas = boundaryCanvasRef.current;
+    if (!canvas) return;
+    const dpr = window.devicePixelRatio || 1;
+    const canvasWidth = width + 6;
+    const canvasHeight = height + 6;
+    canvas.width = canvasWidth * dpr;
+    canvas.height = canvasHeight * dpr;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(dpr, dpr);
+    ctx.translate(3, 3);
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    ctx.save();
+    ctx.beginPath();
+    if (lowerBoundary && upperBoundary) {
+      const lowerSegments = lowerBoundary.bezierSegments;
+      const upperSegments = upperBoundary.bezierSegments;
+      if ((lowerSegments == null ? void 0 : lowerSegments.length) && (upperSegments == null ? void 0 : upperSegments.length)) {
+        const upperAvgY = upperSegments.reduce((sum, seg) => sum + seg.start[1] + seg.end[1], 0) / (upperSegments.length * 2);
+        const lowerAvgY = lowerSegments.reduce((sum, seg) => sum + seg.start[1] + seg.end[1], 0) / (lowerSegments.length * 2);
+        const edgeThreshold = 5;
+        if (upperAvgY < edgeThreshold) {
+          ctx.moveTo(lowerSegments[0].start[0], lowerSegments[0].start[1]);
+          for (const segment of lowerSegments) {
+            ctx.bezierCurveTo(
+              segment.cp1[0],
+              segment.cp1[1],
+              segment.cp2[0],
+              segment.cp2[1],
+              segment.end[0],
+              segment.end[1]
+            );
+          }
+          ctx.lineTo(width, height);
+          ctx.lineTo(0, height);
+          ctx.closePath();
+        } else if (lowerAvgY > height - edgeThreshold) {
+          ctx.moveTo(upperSegments[0].start[0], upperSegments[0].start[1]);
+          for (const segment of upperSegments) {
+            ctx.bezierCurveTo(
+              segment.cp1[0],
+              segment.cp1[1],
+              segment.cp2[0],
+              segment.cp2[1],
+              segment.end[0],
+              segment.end[1]
+            );
+          }
+          ctx.lineTo(width, 0);
+          ctx.lineTo(0, 0);
+          ctx.closePath();
+        } else {
+          ctx.moveTo(upperSegments[0].start[0], upperSegments[0].start[1]);
+          for (const segment of upperSegments) {
+            ctx.bezierCurveTo(
+              segment.cp1[0],
+              segment.cp1[1],
+              segment.cp2[0],
+              segment.cp2[1],
+              segment.end[0],
+              segment.end[1]
+            );
+          }
+          const lastLowerSegment = lowerSegments[lowerSegments.length - 1];
+          ctx.lineTo(lastLowerSegment.end[0], lastLowerSegment.end[1]);
+          for (let i = lowerSegments.length - 1; i >= 0; i--) {
+            const segment = lowerSegments[i];
+            ctx.bezierCurveTo(
+              segment.cp2[0],
+              segment.cp2[1],
+              segment.cp1[0],
+              segment.cp1[1],
+              segment.start[0],
+              segment.start[1]
+            );
+          }
+          ctx.closePath();
+        }
+      }
+    } else if (lowerBoundary) {
+      const lowerSegments = lowerBoundary.bezierSegments;
+      if (lowerSegments == null ? void 0 : lowerSegments.length) {
+        ctx.moveTo(lowerSegments[0].start[0], lowerSegments[0].start[1]);
+        for (const segment of lowerSegments) {
+          ctx.bezierCurveTo(
+            segment.cp1[0],
+            segment.cp1[1],
+            segment.cp2[0],
+            segment.cp2[1],
+            segment.end[0],
+            segment.end[1]
+          );
+        }
+        ctx.lineTo(width, height);
+        ctx.lineTo(0, height);
+        ctx.closePath();
+      } else {
+        const lowerPoints = lowerBoundary.simplifiedPoints;
+        if ((lowerPoints == null ? void 0 : lowerPoints.length) >= 2) {
+          ctx.moveTo(lowerPoints[0][0], lowerPoints[0][1]);
+          for (let i = 1; i < lowerPoints.length; i++) {
+            ctx.lineTo(lowerPoints[i][0], lowerPoints[i][1]);
+          }
+          ctx.lineTo(width, height);
+          ctx.lineTo(0, height);
+          ctx.closePath();
+        } else {
+          ctx.moveTo(0, height);
+          ctx.lineTo(width, height);
+          ctx.lineTo(width, 0);
+          ctx.lineTo(0, 0);
+          ctx.closePath();
+        }
+      }
+    } else if (upperBoundary) {
+      const upperSegments = upperBoundary.bezierSegments;
+      if (upperSegments == null ? void 0 : upperSegments.length) {
+        ctx.moveTo(upperSegments[0].start[0], upperSegments[0].start[1]);
+        for (const segment of upperSegments) {
+          ctx.bezierCurveTo(
+            segment.cp1[0],
+            segment.cp1[1],
+            segment.cp2[0],
+            segment.cp2[1],
+            segment.end[0],
+            segment.end[1]
+          );
+        }
+        ctx.lineTo(width, 0);
+        ctx.lineTo(0, 0);
+        ctx.closePath();
+      } else {
+        const upperPoints = upperBoundary.simplifiedPoints;
+        if ((upperPoints == null ? void 0 : upperPoints.length) >= 2) {
+          ctx.moveTo(upperPoints[0][0], upperPoints[0][1]);
+          for (let i = 1; i < upperPoints.length; i++) {
+            ctx.lineTo(upperPoints[i][0], upperPoints[i][1]);
+          }
+          ctx.lineTo(width, 0);
+          ctx.lineTo(0, 0);
+          ctx.closePath();
+        }
+      }
+    }
+    ctx.clip();
+    ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
+    const dotSize = 1;
+    const dotSpacing = 6;
+    for (let x = dotSpacing / 2; x < width; x += dotSpacing) {
+      for (let y = dotSpacing / 2; y < height; y += dotSpacing) {
+        ctx.beginPath();
+        ctx.arc(x, y, dotSize, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+    ctx.restore();
+    const drawBoundaryLine = (boundary) => {
+      var _a, _b;
+      if (!boundary) return;
+      if ((_a = boundary.bezierSegments) == null ? void 0 : _a.length) {
+        const segments = boundary.bezierSegments;
+        ctx.beginPath();
+        ctx.moveTo(segments[0].start[0], segments[0].start[1]);
+        for (const segment of segments) {
+          ctx.bezierCurveTo(
+            segment.cp1[0],
+            segment.cp1[1],
+            segment.cp2[0],
+            segment.cp2[1],
+            segment.end[0],
+            segment.end[1]
+          );
+        }
+      } else if (((_b = boundary.simplifiedPoints) == null ? void 0 : _b.length) >= 2) {
+        const points = boundary.simplifiedPoints;
+        ctx.beginPath();
+        ctx.moveTo(points[0][0], points[0][1]);
+        for (let i = 1; i < points.length; i++) {
+          ctx.lineTo(points[i][0], points[i][1]);
+        }
+      } else {
+        return;
+      }
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = "white";
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
+      ctx.shadowColor = "rgba(0, 0, 0, 0.15)";
+      ctx.shadowBlur = 1;
+      ctx.shadowOffsetY = 0.5;
+      ctx.stroke();
+      ctx.shadowColor = "transparent";
+    };
+    drawBoundaryLine(lowerBoundary);
+    drawBoundaryLine(upperBoundary);
+  }, [width, height, roundedHue, foregroundAlpha, isHSL, boundaryData, boundaryPaths]);
+  useEffect(() => {
+    const canvas = pointCanvasRef.current;
+    if (!canvas || !canvas.getContext) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    const canvasWidth = width + 6;
+    const canvasHeight = height + 6;
+    canvas.width = canvasWidth * dpr;
+    canvas.height = canvasHeight * dpr;
+    if (!animatedPointPos || width <= 0 || height <= 0) return;
+    ctx.scale(dpr, dpr);
+    const { x, y } = animatedPointPos;
+    const drawX = x + 3;
+    const drawY = y + 3;
+    ctx.beginPath();
+    ctx.arc(drawX, drawY, 6, 0, Math.PI * 2);
+    ctx.fillStyle = "white";
+    ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
+    ctx.shadowBlur = 2;
+    ctx.shadowOffsetY = 1;
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(drawX, drawY, 4, 0, Math.PI * 2);
+    ctx.shadowColor = "transparent";
+    let innerColor = "black";
+    if (recommendedPoint) {
+      const s = recommendedPoint.slX;
+      const yValue = recommendedPoint.slY;
+      let color;
+      if (isHSL) {
+        color = tinycolor({ h: roundedHue, s, l: yValue, a: foregroundAlpha });
+      } else {
+        color = tinycolor({ h: roundedHue, s, v: yValue, a: foregroundAlpha });
+      }
+      if (color == null ? void 0 : color.isValid()) {
+        innerColor = color.toRgbString();
+      }
+    }
+    ctx.fillStyle = innerColor;
+    ctx.fill();
+  }, [animatedPointPos, recommendedPoint, roundedHue, foregroundAlpha, isHSL, width, height]);
+  if (width <= 0 || height <= 0) return null;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "pointer-events-none absolute inset-0 block overflow-hidden",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.5 },
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            className: "absolute -inset-[3px] block overflow-hidden",
+            ref: boundaryCanvasRef,
+            style: {
+              width: `${width + 6}px`,
+              height: `${height + 6}px`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            className: "absolute -inset-[3px] block overflow-hidden",
+            ref: pointCanvasRef,
+            style: {
+              width: `${width + 6}px`,
+              height: `${height + 6}px`
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  CheckColorContrastBoundary
+};

package/dist/components/colors/src/check-color-contrast/check-color-contrast-toolbar.d.ts

@@ -0,0 +1,12 @@
+import { ColorContrast } from '../types/colors';
+import { ColorContrastLabels } from '../types/paint';
+interface CheckColorContrastToolbarProps {
+    applyRecommendedPoint?: () => boolean;
+    checkColorContrast?: ColorContrast;
+    className?: string;
+    containerWidth?: number;
+    labels?: ColorContrastLabels;
+    onStandardHovered?: (hovered: boolean) => void;
+}
+export declare const CheckColorContrastToolbar: (props: CheckColorContrastToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};