@choice-ui/react 1.7.6 → 1.7.7

package/dist/components/colors/src/color-gradients-paint/color-gradient-control.js

@@ -0,0 +1,149 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { ScrollArea } from "../../../scroll-area/dist/index.js";
+import { AddSmall } from "@choiceform/icons-react";
+import { clamp } from "es-toolkit";
+import { nanoid } from "nanoid";
+import { forwardRef } from "react";
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { ColorGradientList } from "./color-gradient-list.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { translation } from "../contents/translation.js";
+const ColorGradientControl = forwardRef(
+  function ColorGradientControl2(props, ref) {
+    const {
+      active,
+      className,
+      controlSize = 224,
+      selectedStopId,
+      stops,
+      labels,
+      onSelectedStopIdChange,
+      onStopChange,
+      openPicker,
+      onChangeEnd,
+      onChangeStart
+    } = props;
+    const addStop = useEventCallback(() => {
+      if (!onStopChange) return;
+      const sortedStops = [...stops].sort((a, b2) => a.position - b2.position);
+      const lastIndex = sortedStops.length - 1;
+      const lastStop = sortedStops[lastIndex];
+      const beforeLastStop = sortedStops[lastIndex - 1];
+      const position = (lastStop.position + beforeLastStop.position) / 2;
+      const relativePosition = (position - beforeLastStop.position) / (lastStop.position - beforeLastStop.position);
+      const beforeColor = tinycolor({
+        r: beforeLastStop.color.r,
+        g: beforeLastStop.color.g,
+        b: beforeLastStop.color.b
+      });
+      const lastColor = tinycolor({
+        r: lastStop.color.r,
+        g: lastStop.color.g,
+        b: lastStop.color.b
+      });
+      const amount = relativePosition * 100;
+      const mixedColor = tinycolor.mix(beforeColor, lastColor, amount);
+      const { r, g, b } = mixedColor.toRgb();
+      const alpha = beforeLastStop.alpha + (lastStop.alpha - beforeLastStop.alpha) * relativePosition;
+      const newStop = {
+        id: nanoid(),
+        position,
+        color: { r, g, b },
+        alpha
+      };
+      const newStops = [...stops, newStop].sort((a, b2) => a.position - b2.position);
+      onStopChange(newStops);
+      onSelectedStopIdChange == null ? void 0 : onSelectedStopIdChange(newStop.id);
+    });
+    const updateStopPosition = useEventCallback((id, position) => {
+      if (!onStopChange) return;
+      const newStops = stops.map(
+        (stop) => stop.id === id ? { ...stop, position: clamp(position, 0, 1) } : stop
+      );
+      onStopChange(newStops.sort((a, b) => a.position - b.position));
+    });
+    const deleteStop = useEventCallback((id) => {
+      if (!onStopChange || !onSelectedStopIdChange || stops.length <= 2) return;
+      const sortedStops = [...stops].sort((a, b) => a.position - b.position);
+      const currentIndex = sortedStops.findIndex((stop) => stop.id === id);
+      const beforeStop = sortedStops[currentIndex - 1];
+      const afterStop = sortedStops[currentIndex + 1];
+      const newStops = stops.filter((stop) => stop.id !== id);
+      onStopChange(newStops);
+      onSelectedStopIdChange((beforeStop == null ? void 0 : beforeStop.id) ?? afterStop.id);
+    });
+    const updateStopColor = useEventCallback((id, value) => {
+      if (!onStopChange || !onSelectedStopIdChange) return;
+      try {
+        const newStops = stops.map((stop) => stop.id === id ? { ...stop, color: value } : stop);
+        onSelectedStopIdChange(id);
+        onStopChange(newStops);
+      } catch (error) {
+        console.warn("Invalid color value:", error);
+      }
+    });
+    const updateStopAlpha = useEventCallback((id, alpha) => {
+      if (!onStopChange || !onSelectedStopIdChange) return;
+      try {
+        const newStops = stops.map((stop) => stop.id === id ? { ...stop, alpha } : stop);
+        onSelectedStopIdChange(id);
+        onStopChange(newStops);
+      } catch (error) {
+        console.warn("Invalid alpha value:", error);
+      }
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: tcx("flex min-w-0 flex-col", className),
+        style: {
+          width: controlSize + 32
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-10 min-w-0 items-center justify-between pr-2 pl-4", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-strong", children: (labels == null ? void 0 : labels.title) ?? translation.gradients.STOP }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: addStop,
+                tooltip: {
+                  content: (labels == null ? void 0 : labels.addStopLabel) ?? translation.gradients.ADD_STOP
+                },
+                children: /* @__PURE__ */ jsx(AddSmall, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { className: "max-h-96 min-w-0", children: /* @__PURE__ */ jsx(ScrollArea.Content, { className: "flex flex-col pb-2", children: stops.map((stop) => {
+            return /* @__PURE__ */ jsx(
+              ColorGradientList,
+              {
+                active: (stopId) => (active == null ? void 0 : active(stopId)) ?? false,
+                openPicker,
+                stops,
+                stop,
+                selectedStopId,
+                alpha: stop.alpha,
+                onSelectedStopIdChange,
+                updateStopPosition,
+                updateStopColor,
+                updateStopAlpha,
+                deleteStop,
+                onChangeStart,
+                onChangeEnd,
+                labels
+              },
+              stop.id
+            );
+          }) }) }) })
+        ]
+      }
+    );
+  }
+);
+ColorGradientControl.displayName = "ColorGradientControl";
+export {
+  ColorGradientControl
+};

package/dist/components/colors/src/color-gradients-paint/color-gradient-list.d.ts

@@ -0,0 +1,20 @@
+import { ColorStop, RGB } from '../types/colors';
+import { GradientListLabels, GradientPaint } from '../types/paint';
+interface ColorGradientListProps {
+    active?: (stopId: string) => boolean;
+    alpha: number;
+    deleteStop: (id: string) => void;
+    labels?: GradientListLabels;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onSelectedStopIdChange?: (id: string) => void;
+    openPicker?: (stop: ColorStop) => void;
+    selectedStopId?: string;
+    stop: ColorStop;
+    stops: GradientPaint["gradientStops"];
+    updateStopAlpha: (id: string, alpha: number) => void;
+    updateStopColor: (id: string, value: RGB) => void;
+    updateStopPosition: (id: string, position: number) => void;
+}
+export declare const ColorGradientList: import('react').ForwardRefExoticComponent<ColorGradientListProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/colors/src/color-gradients-paint/color-gradient-list.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { NumericInput } from "../../../numeric-input/dist/index.js";
+import { DeleteSmall } from "@choiceform/icons-react";
+import { forwardRef } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { ColorInput } from "../fill-input/color-input.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { translation } from "../contents/translation.js";
+const ColorGradientList = forwardRef(
+  function ColorGradientList2(props, ref) {
+    const {
+      active,
+      stops,
+      stop,
+      selectedStopId,
+      alpha,
+      onSelectedStopIdChange,
+      updateStopPosition,
+      updateStopColor,
+      updateStopAlpha,
+      deleteStop,
+      openPicker,
+      labels,
+      onChangeEnd,
+      onChangeStart
+    } = props;
+    const handleStopClick = useEventCallback(() => {
+      onSelectedStopIdChange == null ? void 0 : onSelectedStopIdChange(stop.id);
+    });
+    const handlePositionChange = useEventCallback((value) => {
+      const normalizedValue = Number(value) / 100;
+      updateStopPosition(stop.id, normalizedValue);
+    });
+    const handleColorChange = useEventCallback((value) => {
+      updateStopColor(stop.id, value);
+    });
+    const handleAlphaChange = useEventCallback((value) => {
+      updateStopAlpha(stop.id, value);
+    });
+    const handleOpenColorPicker = useEventCallback(() => {
+      openPicker == null ? void 0 : openPicker(stop);
+    });
+    const handleDelete = useEventCallback((e) => {
+      e.stopPropagation();
+      deleteStop(stop.id);
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: tcx(
+          "grid grid-cols-[1fr_3fr_auto] items-center gap-2 py-2 pr-2 pl-4",
+          selectedStopId === stop.id && "bg-selected-background"
+        ),
+        onClick: handleStopClick,
+        children: [
+          /* @__PURE__ */ jsx(
+            NumericInput,
+            {
+              tooltip: {
+                content: (labels == null ? void 0 : labels.position) ?? translation.gradients.STOP_POSITION
+              },
+              classNames: {
+                input: "px-1.5"
+              },
+              value: Math.round(stop.position * 100),
+              onChange: handlePositionChange,
+              expression: "{value}%",
+              step: 1,
+              min: 0,
+              max: 100
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorInput,
+            {
+              active: active == null ? void 0 : active(stop.id),
+              color: stop.color,
+              onColorChange: handleColorChange,
+              alpha,
+              onAlphaChange: handleAlphaChange,
+              onPickerClick: handleOpenColorPicker,
+              onAlphaChangeEnd: onChangeEnd,
+              onAlphaChangeStart: onChangeStart,
+              alphaTooltipLabel: (labels == null ? void 0 : labels.alpha) ?? translation.input.ALPHA,
+              classNames: {
+                hex: "px-0 pl-1"
+                // 调整 Hex Input 的样式
+              }
+            }
+          ),
+          stops.length > 2 ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              tooltip: {
+                content: (labels == null ? void 0 : labels.delete) ?? translation.gradients.DELETE_STOP
+              },
+              onClick: handleDelete,
+              children: /* @__PURE__ */ jsx(DeleteSmall, {})
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "size-6 flex-none" })
+        ]
+      }
+    );
+  }
+);
+ColorGradientList.displayName = "ColorGradientList";
+export {
+  ColorGradientList
+};

package/dist/components/colors/src/color-gradients-paint/color-gradient-slider.d.ts

@@ -0,0 +1,18 @@
+import { GradientPaint } from '../types/paint';
+interface ColorGradientSliderProps {
+    className?: string;
+    controlledSelectedStopId?: string;
+    disabled?: boolean;
+    onChange?: (stops: GradientPaint["gradientStops"]) => void;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onSelectedStopIdChange?: (id: string) => void;
+    stopSize?: number;
+    trackSize?: {
+        height?: number;
+        width?: number;
+    };
+    value?: GradientPaint["gradientStops"];
+}
+export declare const ColorGradientSlider: import('react').ForwardRefExoticComponent<ColorGradientSliderProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/colors/src/color-gradients-paint/color-gradient-slider.js

@@ -0,0 +1,281 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { round, clamp } from "es-toolkit";
+import { nanoid } from "nanoid";
+import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from "react";
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { useColors } from "../context/colots-context.js";
+import { profileConvertString } from "../utils/colors-convert.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { ColorSwatch } from "../color-swatch/color-swatch.js";
+const ColorGradientSlider = forwardRef(
+  function ColorGradientSlider2(props, ref) {
+    const {
+      value = [],
+      onChange,
+      onChangeEnd,
+      onChangeStart,
+      controlledSelectedStopId,
+      onSelectedStopIdChange,
+      disabled = false,
+      trackSize = { width: 224, height: 16 },
+      stopSize = 18,
+      className
+    } = props;
+    const { colorProfile } = useColors();
+    const sliderRef = useRef(null);
+    const stopsContainerRef = useRef(null);
+    const stopRefs = useRef(/* @__PURE__ */ new Map());
+    const isDragging = useRef(false);
+    const uuid = nanoid();
+    const [hoverPosition, setHoverPosition] = useState(null);
+    const [internalStops, setInternalStops] = useState(value);
+    const [internalSelectedStopId, setInternalSelectedStopId] = useState(value[0].id);
+    const stops = onChange ? value : internalStops;
+    const selectedStopId = onSelectedStopIdChange ? controlledSelectedStopId ?? value[0].id : internalSelectedStopId;
+    const sortedStops = useMemo(() => [...stops].sort((a, b) => a.position - b.position), [stops]);
+    const updateSelectedStopId = useEventCallback((id) => {
+      if (onSelectedStopIdChange) {
+        onSelectedStopIdChange(id);
+      } else {
+        setInternalSelectedStopId(id);
+      }
+    });
+    const updateStops = useEventCallback((newStops, isEnd) => {
+      if (onChange) {
+        onChange(newStops);
+      } else {
+        setInternalStops(newStops);
+      }
+    });
+    const gradientBackground = useMemo(() => {
+      const checkerboard = "repeating-conic-gradient(rgb(204, 204, 204) 0%, rgb(204, 204, 204) 25%, white 0%, white 50%) left top / 11px 11px";
+      const gradient = sortedStops.map(
+        (stop) => `${profileConvertString({ r: stop.color.r, g: stop.color.g, b: stop.color.b, a: stop.alpha }, colorProfile)} ${round(stop.position * 100)}%`
+      ).join(", ");
+      return `linear-gradient(to right, ${gradient}), ${checkerboard}`;
+    }, [sortedStops, colorProfile]);
+    const calculatePosition = useCallback((clientX) => {
+      var _a;
+      const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return 0;
+      const position = (clientX - rect.left) / rect.width;
+      return clamp(position, 0, 1);
+    }, []);
+    const addStop = useEventCallback((clientX) => {
+      const position = calculatePosition(clientX);
+      const sortedStops2 = [...stops].sort((a, b2) => a.position - b2.position);
+      let beforeStop = sortedStops2[0];
+      let afterStop = sortedStops2[sortedStops2.length - 1];
+      for (let i = 0; i < sortedStops2.length - 1; i++) {
+        if (sortedStops2[i].position <= position && sortedStops2[i + 1].position >= position) {
+          beforeStop = sortedStops2[i];
+          afterStop = sortedStops2[i + 1];
+          break;
+        }
+      }
+      const relativePosition = (position - beforeStop.position) / (afterStop.position - beforeStop.position);
+      const beforeColor = tinycolor({
+        r: beforeStop.color.r,
+        g: beforeStop.color.g,
+        b: beforeStop.color.b
+      });
+      const lastColor = tinycolor({
+        r: afterStop.color.r,
+        g: afterStop.color.g,
+        b: afterStop.color.b
+      });
+      const amount = relativePosition * 100;
+      const mixedColor = tinycolor.mix(beforeColor, lastColor, amount);
+      const { r, g, b } = mixedColor.toRgb();
+      const alpha = beforeStop.alpha + (afterStop.alpha - beforeStop.alpha) * relativePosition;
+      const newStop = {
+        id: uuid,
+        position,
+        color: { r, g, b },
+        alpha
+      };
+      const newStops = [...stops, newStop].sort((a, b2) => a.position - b2.position);
+      updateStops(newStops, true);
+      updateSelectedStopId(newStop.id);
+    });
+    const updateStopPosition = useEventCallback((id, clientX, isEnd) => {
+      const position = calculatePosition(clientX);
+      const updatedStops = stops.map((stop) => stop.id === id ? { ...stop, position } : stop);
+      const newStops = updatedStops.sort((a, b) => a.position - b.position);
+      updateStops(newStops, isEnd);
+    });
+    const deleteSelectedStop = useEventCallback(() => {
+      if (stops.length <= 2) return;
+      const sortedStops2 = [...stops].sort((a, b) => a.position - b.position);
+      const currentIndex = sortedStops2.findIndex((stop) => stop.id === selectedStopId);
+      const beforeStop = sortedStops2[currentIndex - 1];
+      const afterStop = sortedStops2[currentIndex + 1];
+      const newStops = stops.filter((stop) => stop.id !== selectedStopId);
+      updateStops(newStops, true);
+      updateSelectedStopId((beforeStop == null ? void 0 : beforeStop.id) ?? afterStop.id);
+    });
+    useEffect(() => {
+      const handleKeyDown = (e) => {
+        if (e.key === "Backspace" || e.key === "Delete") {
+          deleteSelectedStop();
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [deleteSelectedStop]);
+    const handleSliderClick = useEventCallback((e) => {
+      if (disabled || isDragging.current) return;
+      const clickedOnStop = Array.from(stopRefs.current.values()).some(
+        (stopEl) => stopEl.contains(e.target)
+      );
+      if (clickedOnStop) {
+        return;
+      }
+      addStop(e.clientX);
+    });
+    const handleStopPointerDown = useEventCallback((e, stopId) => {
+      var _a;
+      if (disabled) return;
+      e.stopPropagation();
+      e.preventDefault();
+      const stop = e.currentTarget;
+      const sliderRect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!sliderRect) return;
+      onChangeStart == null ? void 0 : onChangeStart();
+      isDragging.current = true;
+      stop.setPointerCapture(e.pointerId);
+      updateSelectedStopId(stopId);
+      const initialX = e.clientX;
+      let hasMoved = false;
+      const handleMove = (e2) => {
+        if (!isDragging.current) return;
+        e2.preventDefault();
+        if (Math.abs(e2.clientX - initialX) > 1) {
+          hasMoved = true;
+        }
+        if (hasMoved) {
+          const boundedX = Math.max(sliderRect.left, Math.min(e2.clientX, sliderRect.right));
+          updateStopPosition(stopId, boundedX);
+        }
+      };
+      const handleUp = (e2) => {
+        if (!isDragging.current) return;
+        e2.preventDefault();
+        if (stop.hasPointerCapture(e2.pointerId)) {
+          stop.releasePointerCapture(e2.pointerId);
+        }
+        if (hasMoved) {
+          const boundedX = Math.max(sliderRect.left, Math.min(e2.clientX, sliderRect.right));
+          updateStopPosition(stopId, boundedX, true);
+        }
+        isDragging.current = false;
+        hasMoved = false;
+        onChangeEnd == null ? void 0 : onChangeEnd();
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
+      };
+      window.addEventListener("pointermove", handleMove);
+      window.addEventListener("pointerup", handleUp);
+      window.addEventListener("pointercancel", handleUp);
+    });
+    const trackStyle = useMemo(() => {
+      return {
+        width: trackSize == null ? void 0 : trackSize.width,
+        height: trackSize == null ? void 0 : trackSize.height,
+        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)",
+        background: gradientBackground
+      };
+    }, [gradientBackground, trackSize]);
+    const stopStyle = useCallback(
+      (stop) => {
+        const position = stop.position * ((trackSize == null ? void 0 : trackSize.width) ?? 0);
+        return {
+          width: stopSize,
+          height: stopSize,
+          transform: `translateX(${position}px) translateX(-50%)`,
+          willChange: isDragging.current ? "transform" : "auto"
+        };
+      },
+      [stopSize, trackSize == null ? void 0 : trackSize.width]
+    );
+    const handleMouseMove = useEventCallback((e) => {
+      if (disabled || isDragging.current) return;
+      const position = calculatePosition(e.clientX);
+      setHoverPosition(position * ((trackSize == null ? void 0 : trackSize.width) ?? 0));
+    });
+    const handleMouseLeave = useEventCallback(() => {
+      setHoverPosition(null);
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: stopsContainerRef,
+              className: "relative",
+              style: {
+                height: 24,
+                width: trackSize == null ? void 0 : trackSize.width
+              },
+              children: stops.map((stop) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: (el) => {
+                    if (el) {
+                      stopRefs.current.set(stop.id, el);
+                    } else {
+                      stopRefs.current.delete(stop.id);
+                    }
+                  },
+                  onPointerDown: (e) => handleStopPointerDown(e, stop.id),
+                  className: tcx(
+                    "shadow-small absolute rounded-sm bg-white ring-2",
+                    selectedStopId === stop.id ? "ring-selected-boundary" : "ring-transparent"
+                  ),
+                  style: stopStyle(stop),
+                  children: /* @__PURE__ */ jsx(
+                    ColorSwatch,
+                    {
+                      className: "absolute inset-0.5 rounded-sm",
+                      color: stop.color,
+                      alpha: stop.alpha
+                    }
+                  )
+                },
+                stop.id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: sliderRef,
+              onClick: handleSliderClick,
+              onMouseMove: handleMouseMove,
+              onMouseLeave: handleMouseLeave,
+              style: trackStyle,
+              className: tcx("relative touch-none rounded-sm select-none", disabled && "saturate-0"),
+              children: hoverPosition !== null && !disabled && !isDragging.current && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "pointer-events-none absolute top-1/2 h-3 w-0.5 -translate-y-1/2 rounded-md bg-white shadow-sm",
+                  style: { left: hoverPosition }
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorGradientSlider.displayName = "ColorGradientSlider";
+export {
+  ColorGradientSlider
+};

package/dist/components/colors/src/color-gradients-paint/color-gradients-paint.d.ts

@@ -0,0 +1,17 @@
+import { ChannelFieldSpace } from '../types/colors';
+import { GradientLabels, GradientPaint, SolidPaintLabels } from '../types/paint';
+export interface ColorGradientsPaintProps {
+    className?: string;
+    colorSpace: ChannelFieldSpace;
+    features?: {
+        containerWidth?: number;
+    };
+    gradient: GradientPaint;
+    labels?: GradientLabels;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onColorSpaceChange: (colorSpace: ChannelFieldSpace) => void;
+    onGradientChange?: (gradient: GradientPaint) => void;
+    solidPaintLabels?: SolidPaintLabels;
+}
+export declare const ColorGradientsPaint: import('react').ForwardRefExoticComponent<ColorGradientsPaintProps & import('react').RefAttributes<HTMLDivElement>>;