@choice-ui/react 1.7.5 → 1.7.7

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

@@ -0,0 +1,117 @@
+import { nanoid } from "nanoid";
+import { useState, useMemo, useEffect } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { getColorArr } from "../utils/color.js";
+import { DEFAULT_ALPHA, DEFAULT_COLOR, DEFAULT_GRADIENT_TRANSFORM, BLACK } from "../contents/colors.js";
+const useColorPicker = () => {
+  const [colorState, setColorState] = useState({
+    color: DEFAULT_COLOR,
+    alpha: DEFAULT_ALPHA
+  });
+  const [paintsType, setPaintsType] = useState("SOLID");
+  const [librariesState, setLibrariesState] = useState({
+    selected: null,
+    selectedCategory: "all",
+    displayType: "LIST",
+    pickerType: "CUSTOM"
+  });
+  const [gradient, setGradient] = useState({
+    gradientStops: [
+      { id: nanoid(), position: 0, color: DEFAULT_COLOR, alpha: 0 },
+      { id: nanoid(), position: 1, color: DEFAULT_COLOR, alpha: 1 }
+    ],
+    type: "GRADIENT_LINEAR",
+    gradientTransform: DEFAULT_GRADIENT_TRANSFORM,
+    opacity: 1
+  });
+  const handleColorChange = useEventCallback((color) => {
+    setColorState((prev) => ({ ...prev, color }));
+  });
+  const handleAlphaChange = useEventCallback((alpha) => {
+    setColorState((prev) => ({ ...prev, alpha }));
+  });
+  const handleGradientChange = useEventCallback((gradient2) => {
+    setGradient(gradient2);
+  });
+  const handlePickerTypeChange = useEventCallback((type) => {
+    setLibrariesState((prev) => ({ ...prev, pickerType: type }));
+  });
+  const handlePaintsTypeChange = useEventCallback((type) => {
+    setPaintsType(type);
+  });
+  const handleLibraryChange = useEventCallback(
+    (item) => {
+      try {
+        console.log("item", item);
+      } catch (error) {
+        console.error("Error handling library change:", error);
+      }
+    }
+  );
+  const handleCategoryChange = useEventCallback((category) => {
+    setLibrariesState((prev) => ({ ...prev, selectedCategory: category }));
+  });
+  const handleDisplayTypeChange = useEventCallback((displayType) => {
+    setLibrariesState((prev) => ({ ...prev, displayType }));
+  });
+  const variableColor = useMemo(() => {
+    if (!librariesState.selected) {
+      return { color: DEFAULT_COLOR, alpha: DEFAULT_ALPHA };
+    }
+    try {
+      let color;
+      if (librariesState.selected.type === "VARIABLE") {
+        color = librariesState.selected.item.value;
+      } else {
+        const firstFill = librariesState.selected.item.fills[0];
+        if (firstFill.type === "SOLID") {
+          color = firstFill.color;
+        }
+        color = BLACK;
+      }
+      return getColorArr(color) || { color: DEFAULT_COLOR, alpha: DEFAULT_ALPHA };
+    } catch (error) {
+      console.error("Error computing variable color:", error);
+      return { color: DEFAULT_COLOR, alpha: DEFAULT_ALPHA };
+    }
+  }, [librariesState.selected]);
+  useEffect(() => {
+    if (paintsType !== "SOLID") {
+      setLibrariesState((prev) => ({
+        ...prev,
+        selected: null
+      }));
+    }
+  }, [paintsType]);
+  useEffect(() => {
+    if (!librariesState.selected) return;
+    const { color, alpha } = colorState;
+    const { color: varColor, alpha: varAlpha } = variableColor;
+    if (varColor.r !== color.r || varColor.g !== color.g || varColor.b !== color.b || varAlpha !== alpha) {
+      setLibrariesState((prev) => ({
+        ...prev,
+        selected: null
+      }));
+    }
+  }, [colorState, variableColor, librariesState.selected]);
+  return {
+    pickerType: librariesState.pickerType,
+    paintsType,
+    color: colorState.color,
+    alpha: colorState.alpha,
+    gradient,
+    libraries: librariesState,
+    variableColor,
+    handleColorChange,
+    handleAlphaChange,
+    handleGradientChange,
+    handlePickerTypeChange,
+    handlePaintsTypeChange,
+    handleLibraryChange,
+    handleCategoryChange,
+    handleDisplayTypeChange
+  };
+};
+export {
+  useColorPicker
+};

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

@@ -0,0 +1,2 @@
+import { ColorProfile } from '../types/colors';
+export declare function useColorProfile(): ColorProfile;

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

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+function useColorProfile() {
+  const [colorProfile, setColorProfile] = useState("srgb");
+  useEffect(() => {
+    const checkDisplayP3Support = () => {
+      if (!window.CSS || !CSS.supports) return false;
+      try {
+        if (!CSS.supports("color", "color(display-p3 0 0 0)")) return false;
+        const el = document.createElement("div");
+        el.style.display = "none";
+        document.body.appendChild(el);
+        el.style.color = "color(display-p3 1 0 0)";
+        const computed = getComputedStyle(el).color;
+        document.body.removeChild(el);
+        return computed !== "rgb(255, 0, 0)";
+      } catch (error) {
+        console.error("Error in checkDisplayP3Support:", error);
+        return false;
+      }
+    };
+    setColorProfile(checkDisplayP3Support() ? "display-p3" : "srgb");
+  }, []);
+  return colorProfile;
+}
+export {
+  useColorProfile
+};

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

@@ -0,0 +1 @@
+export declare function getColorPickerCursor(): string;

package/dist/components/colors/src/hooks/use-cursor.js

@@ -0,0 +1,25 @@
+const COLOR_PICKER_SVG = `
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_d_73257_77541)">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0263 19.5948L11.2871 25.334C10.9187 25.7024 10.4443 25.9465 9.93033 26.0322L8.62738 26.2493C6.93533 26.5314 5.46839 25.0644 5.7504 23.3724L5.96756 22.0694C6.05322 21.5554 6.29733 21.0811 6.66578 20.7126L12.405 14.9734C11.7005 13.9741 11.7952 12.5834 12.6893 11.6894C13.5833 10.7953 14.9741 10.7005 15.9734 11.4052L18.1893 9.18935C19.4654 7.91321 21.5344 7.9132 22.8106 9.18935C24.0867 10.4655 24.0867 12.5345 22.8106 13.8107L20.5948 16.0265C21.2994 17.0259 21.2046 18.4166 20.3106 19.3107C19.4164 20.2048 18.0256 20.2995 17.0263 19.5948Z" fill="white"/>
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.3963 14.6036L13.7926 15L7.37288 21.4198C7.15181 21.6408 7.00534 21.9254 6.95395 22.2338L6.73679 23.5368C6.56758 24.552 7.44775 25.4322 8.46298 25.2629L9.76592 25.0458C10.0743 24.9944 10.3589 24.8479 10.58 24.6269L16.9997 18.2071L17.3962 18.6036C18.0057 19.2131 18.9939 19.2131 19.6034 18.6036C20.2129 17.9941 20.213 17.0059 19.6035 16.3964L19.2071 15.9999L22.1035 13.1036C22.9891 12.2179 22.9891 10.7821 22.1035 9.89645C21.2179 9.01083 19.782 9.01084 18.8964 9.89646L16 12.7928L15.6035 12.3964C14.994 11.7869 14.0058 11.787 13.3964 12.3965C12.7869 13.0059 12.7869 13.9941 13.3963 14.6036ZM14.4997 15.7071L16.2926 17.5L9.87288 23.9198C9.79919 23.9934 9.70432 24.0423 9.60152 24.0594L8.29858 24.2766C7.96017 24.333 7.66678 24.0396 7.72318 23.7012L7.94034 22.3982C7.95747 22.2954 8.00629 22.2005 8.07998 22.1269L14.4997 15.7071Z" fill="black"/>
+  <defs>
+  <filter id="filter0_d_73257_77541" x="2.71545" y="6.23224" width="24.0522" height="24.0521" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+  <feOffset dy="1"/>
+  <feGaussianBlur stdDeviation="1.5"/>
+  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
+  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_73257_77541"/>
+  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_73257_77541" result="shape"/>
+  </filter>
+  </defs>
+  </svg>
+`;
+function getColorPickerCursor() {
+  return `data:image/svg+xml;base64,${btoa(COLOR_PICKER_SVG)}`;
+}
+export {
+  getColorPickerCursor
+};

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

@@ -0,0 +1,21 @@
+import { ChannelFieldFeature, ChannelFieldSpace, PickerFeatures } from '../types/colors';
+import { Paint } from '../types/paint';
+interface UseChannelFieldFeaturesProps {
+    colorSpace?: ChannelFieldSpace;
+    features: ChannelFieldFeature;
+    onAlphaChange?: (alpha: number) => void;
+    onChangeColorSpace?: (colorSpace: ChannelFieldSpace) => void;
+}
+export declare const useChannelFieldFeatures: (props: UseChannelFieldFeaturesProps) => boolean;
+interface UseColorPickerFeaturesProps {
+    features: PickerFeatures;
+    onChangePaintsType?: (paintsType: Paint["type"]) => void;
+    onChangePickerType?: (pickerType: string) => void;
+    paintsType?: Paint["type"];
+    pickerType?: string;
+}
+export declare const useColorPickerFeatures: (props: UseColorPickerFeaturesProps) => {
+    paintsTypeAvailable: boolean;
+    pickerTypeAvailable: boolean;
+};
+export {};

package/dist/components/colors/src/hooks/use-features.js

@@ -0,0 +1,73 @@
+import { useMemo, useEffect } from "react";
+import { COLOR_SPACES } from "../contents/color-space.js";
+const useChannelFieldFeatures = (props) => {
+  const { features, colorSpace, onChangeColorSpace, onAlphaChange } = props;
+  const availableSpaces = useMemo(
+    () => [
+      features.hex && COLOR_SPACES.HEX,
+      features.rgb && COLOR_SPACES.RGB,
+      features.hsl && COLOR_SPACES.HSL,
+      features.hsb && COLOR_SPACES.HSB
+    ].filter(Boolean),
+    [features]
+  );
+  useEffect(() => {
+    if (features.alpha === false) {
+      onAlphaChange == null ? void 0 : onAlphaChange(1);
+    }
+  }, [features.alpha]);
+  useEffect(() => {
+    const currentSpaceEnabled = features[colorSpace == null ? void 0 : colorSpace.toLowerCase()];
+    if (!currentSpaceEnabled && availableSpaces.length > 0) {
+      onChangeColorSpace == null ? void 0 : onChangeColorSpace(availableSpaces[0]);
+    }
+  }, [features]);
+  const spacesAvailable = availableSpaces.length > 0;
+  return spacesAvailable;
+};
+const useColorPickerFeatures = (props) => {
+  const { features, paintsType, onChangePaintsType, pickerType, onChangePickerType } = props;
+  const availablePickerType = useMemo(() => {
+    const types = [];
+    if (features.custom) {
+      types.push("CUSTOM");
+    }
+    return types;
+  }, [features]);
+  const availablePaintsType = useMemo(() => {
+    const types = [];
+    if (features.solid) {
+      types.push("SOLID");
+    }
+    if (features.gradient) {
+      types.push("GRADIENT_LINEAR", "GRADIENT_RADIAL", "GRADIENT_ANGULAR");
+    }
+    if (features.image) {
+      types.push("IMAGE");
+    }
+    if (features.pattern) {
+      types.push("PATTERN");
+    }
+    return types;
+  }, [features]);
+  useEffect(() => {
+    if (!paintsType || !availablePaintsType.length) return;
+    const isEnabled = paintsType.startsWith("GRADIENT") ? features.gradient : features[paintsType.toLowerCase()];
+    if (!isEnabled) {
+      onChangePaintsType == null ? void 0 : onChangePaintsType(availablePaintsType[0]);
+    }
+  }, [features, paintsType, availablePaintsType, onChangePaintsType]);
+  useEffect(() => {
+    if (!pickerType || !availablePickerType.length) return;
+    if (pickerType === "CUSTOM" && !features.custom) {
+      onChangePickerType == null ? void 0 : onChangePickerType(availablePickerType[0]);
+    }
+  }, [features, pickerType, availablePickerType, onChangePickerType]);
+  const pickerTypeAvailable = availablePickerType.length > 0;
+  const paintsTypeAvailable = availablePaintsType.length > 0;
+  return { paintsTypeAvailable, pickerTypeAvailable };
+};
+export {
+  useChannelFieldFeatures,
+  useColorPickerFeatures
+};

package/dist/components/colors/src/hooks/use-image-filter-style.d.ts

@@ -0,0 +1,9 @@
+import { ImageFilters } from '../types';
+/**
+ * 将-100到100范围的滤镜值映射到CSS滤镜的实际有效范围
+ * @param filters 图片滤镜配置对象
+ * @returns 包含CSS filter属性的样式对象
+ */
+export declare const useImageFilterStyle: (filters?: Partial<ImageFilters>) => {
+    filter: string;
+};

package/dist/components/colors/src/hooks/use-image-filter-style.js

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+const useImageFilterStyle = (filters) => {
+  return useMemo(() => {
+    const mapBrightness = (value) => {
+      const val = value ?? 0;
+      return val === 0 ? 100 : val < 0 ? 100 - Math.abs(val) * 0.75 : 100 + val * 0.75;
+    };
+    const mapContrast = (value) => {
+      const val = value ?? 0;
+      return val === 0 ? 100 : val < 0 ? 100 - Math.abs(val) * 0.5 : 100 + val * 0.5;
+    };
+    const mapSaturation = (value) => {
+      const val = value ?? 0;
+      return val === 0 ? 100 : val < 0 ? 100 - Math.abs(val) : 100 + val;
+    };
+    const mapTemperature = (value) => (value ?? 0) * 0.3;
+    const mapTint = (value) => Math.max(0, value ?? 0);
+    return {
+      filter: `brightness(${mapBrightness(filters == null ? void 0 : filters.exposure)}%) contrast(${mapContrast(filters == null ? void 0 : filters.contrast)}%) saturate(${mapSaturation(filters == null ? void 0 : filters.saturation)}%) hue-rotate(${mapTemperature(filters == null ? void 0 : filters.temperature)}deg) sepia(${mapTint(filters == null ? void 0 : filters.tint)}%)`
+    };
+  }, [filters]);
+};
+export {
+  useImageFilterStyle
+};

package/dist/components/colors/src/hooks/use-image-processor.d.ts

@@ -0,0 +1,10 @@
+import { ImageSizes } from '../types';
+/**
+ * 图片处理钩子，用于处理上传的图片并生成多个不同尺寸的版本
+ * @returns 图片处理相关函数和状态
+ */
+export declare const useImageProcessor: () => {
+    processImage: (file: File) => Promise<ImageSizes>;
+    isProcessing: boolean;
+    processedUrls: ImageSizes | null;
+};

package/dist/components/colors/src/hooks/use-image-processor.js

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { useEventCallback } from "usehooks-ts";
+const useImageProcessor = () => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [processedUrls, setProcessedUrls] = useState(null);
+  const measureImageSize = useEventCallback(
+    (imageUrl) => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+          resolve({
+            width: img.width,
+            height: img.height
+          });
+        };
+        img.onerror = () => {
+          reject(new Error("Failed to load image for measuring size"));
+        };
+        img.src = imageUrl;
+      });
+    }
+  );
+  const resizeImage = useEventCallback(
+    async (imageUrl, maxDimension) => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+          const { width, height } = img;
+          const isLandscape = width > height;
+          let newWidth, newHeight;
+          if (isLandscape) {
+            if (width <= maxDimension) {
+              resolve(imageUrl);
+              return;
+            }
+            newWidth = maxDimension;
+            newHeight = Math.round(height * maxDimension / width);
+          } else {
+            if (height <= maxDimension) {
+              resolve(imageUrl);
+              return;
+            }
+            newHeight = maxDimension;
+            newWidth = Math.round(width * maxDimension / height);
+          }
+          const canvas = document.createElement("canvas");
+          canvas.width = newWidth;
+          canvas.height = newHeight;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to create Canvas context"));
+            return;
+          }
+          ctx.drawImage(img, 0, 0, newWidth, newHeight);
+          const quality = maxDimension <= 64 ? 0.8 : 0.9;
+          const dataUrl = canvas.toDataURL("image/jpeg", quality);
+          resolve(dataUrl);
+        };
+        img.onerror = () => {
+          reject(new Error("Image loading failed"));
+        };
+        img.src = imageUrl;
+      });
+    }
+  );
+  const readFileAsDataURL = useEventCallback((file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        var _a;
+        if ((_a = event.target) == null ? void 0 : _a.result) {
+          resolve(event.target.result);
+        } else {
+          reject(new Error("File reading failed"));
+        }
+      };
+      reader.onerror = () => {
+        reject(new Error("File reading error"));
+      };
+      reader.readAsDataURL(file);
+    });
+  });
+  const processImage = useEventCallback(async (file) => {
+    setIsProcessing(true);
+    try {
+      const rawImageUrl = await readFileAsDataURL(file);
+      const sourceSize = await measureImageSize(rawImageUrl);
+      const [thumbUrl, smallUrl, regularUrl] = await Promise.all([
+        resizeImage(rawImageUrl, 64),
+        // 缩略图 (64px)
+        resizeImage(rawImageUrl, 512),
+        // 小图 (512px)
+        resizeImage(rawImageUrl, 3840)
+        // 常规图 (3840px)
+      ]);
+      const urls = {
+        thumb: thumbUrl,
+        small: smallUrl,
+        regular: regularUrl,
+        raw: rawImageUrl,
+        sourceSize
+        // 添加原始尺寸信息
+      };
+      setProcessedUrls(urls);
+      return urls;
+    } catch (error) {
+      console.error("Image processing failed:", error);
+      throw error;
+    } finally {
+      setIsProcessing(false);
+    }
+  });
+  return {
+    processImage,
+    isProcessing,
+    processedUrls
+  };
+};
+export {
+  useImageProcessor
+};

package/dist/components/colors/src/hooks/use-paint-state.d.ts

@@ -0,0 +1,16 @@
+import { PaintState, RGB } from '../types/colors';
+import { ColorUpdateSource } from '../types/paint';
+interface UsePaintStateOptions {
+    color: RGB;
+}
+interface UsePaintStateReturn {
+    paintState: PaintState;
+    setPaintState: (state: PaintState) => void;
+    updateSourceRef: React.MutableRefObject<ColorUpdateSource>;
+}
+/**
+ * 管理颜色的绘制状态，包括 HSL、HSV 等颜色空间的值
+ * 当外部颜色变化时，自动同步内部状态
+ */
+export declare function usePaintState(options: UsePaintStateOptions): UsePaintStateReturn;
+export {};

package/dist/components/colors/src/hooks/use-paint-state.js

@@ -0,0 +1,37 @@
+import { useRef, useState, useEffect } from "react";
+import tinycolor from "tinycolor2";
+function usePaintState(options) {
+  const { color } = options;
+  const updateSourceRef = useRef("external");
+  const [paintState, setPaintState] = useState({
+    h: 0,
+    hsl_s: 0,
+    l: 0,
+    hsv_s: 0,
+    v: 0
+  });
+  useEffect(() => {
+    if (updateSourceRef.current !== "external") return;
+    const tc = tinycolor(color);
+    const hsl = tc.toHsl();
+    const hsv = tc.toHsv();
+    setPaintState((prev) => {
+      const newHue = Math.abs(hsl.h - prev.h) < 1 ? prev.h : hsl.h;
+      return {
+        h: newHue,
+        hsl_s: hsl.s,
+        l: hsl.l,
+        hsv_s: hsv.s,
+        v: hsv.v
+      };
+    });
+  }, [color]);
+  return {
+    paintState,
+    setPaintState,
+    updateSourceRef
+  };
+}
+export {
+  usePaintState
+};

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

@@ -0,0 +1,21 @@
+import { ChannelFieldSpace, PaintState, RGB } from '../types/colors';
+import { ColorUpdateSource } from '../types/paint';
+interface UseRgbColorHandlerOptions {
+    paintState: PaintState;
+    setPaintState: (state: PaintState) => void;
+    updateSourceRef: React.MutableRefObject<ColorUpdateSource>;
+    colorSpace: ChannelFieldSpace;
+    onColorChange?: (color: RGB) => void;
+}
+interface UseRgbColorHandlerReturn {
+    handleRgbChange: (rgb: RGB) => void;
+}
+/**
+ * 处理 RGB 颜色变化的逻辑，包括：
+ * - 验证 RGB 值
+ * - 根据颜色空间更新绘制状态
+ * - 处理灰度和边界值的特殊情况
+ * - 触发颜色变化回调
+ */
+export declare function useRgbColorHandler(options: UseRgbColorHandlerOptions): UseRgbColorHandlerReturn;
+export {};

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

@@ -0,0 +1,58 @@
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { isEdgeValue } from "../utils/position.js";
+import { COLOR_SPACES } from "../contents/color-space.js";
+function useRgbColorHandler(options) {
+  const { paintState, setPaintState, updateSourceRef, colorSpace, onColorChange } = options;
+  const handleRgbChange = useEventCallback((rgb) => {
+    if (isNaN(rgb.r) || isNaN(rgb.g) || isNaN(rgb.b)) return;
+    const isHsl = colorSpace === COLOR_SPACES.HSL;
+    const colorInstance = tinycolor(rgb);
+    const hsl = colorInstance.toHsl();
+    const hsv = colorInstance.toHsv();
+    const prev = { ...paintState };
+    const isGrayscale = rgb.r === rgb.g && rgb.g === rgb.b;
+    const updates = { ...prev };
+    if (isHsl) {
+      if (isGrayscale || isEdgeValue(hsl.s)) {
+        if (isEdgeValue(hsl.l)) {
+          updates.h = prev.h;
+          updates.hsl_s = prev.hsl_s;
+          updates.l = hsl.l;
+          updates.hsv_s = hsv.s;
+          updates.v = hsv.v;
+        } else {
+          updates.h = prev.h;
+          updates.hsl_s = hsl.s;
+          updates.l = hsl.l;
+          updates.hsv_s = hsv.s;
+          updates.v = hsv.v;
+        }
+      } else {
+        updates.h = hsl.h;
+        updates.hsl_s = hsl.s;
+        updates.l = hsl.l;
+        updates.hsv_s = hsv.s;
+        updates.v = hsv.v;
+      }
+    } else {
+      updates.h = isGrayscale || isEdgeValue(hsv.s) ? prev.h : hsv.h;
+      updates.hsv_s = hsv.s;
+      updates.v = hsv.v;
+      updates.hsl_s = hsl.s;
+      updates.l = hsl.l;
+    }
+    setPaintState(updates);
+    updateSourceRef.current = "internal";
+    onColorChange == null ? void 0 : onColorChange(rgb);
+    setTimeout(() => {
+      updateSourceRef.current = "external";
+    }, 0);
+  });
+  return {
+    handleRgbChange
+  };
+}
+export {
+  useRgbColorHandler
+};

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

@@ -0,0 +1,38 @@
+export { ColorArea } from './color-area';
+export type { ColorAreaProps } from './color-area';
+export { ColorSlider } from './color-slider';
+export type { ColorSliderProps } from './color-slider';
+export { ColorSwatch } from './color-swatch';
+export type { ColorSwatchProps } from './color-swatch';
+export { ColorInput, AlphaInput, GradientItem, ImageItem, VariableItem } from './fill-input';
+export type { ColorInputProps, AlphaInputProps, GradientItemProps, ImageItemProps, VariableItemProps, } from './fill-input';
+export { HexInput } from './hex-input';
+export type { HexInputProps } from './hex-input';
+export { ColorChannelField } from './color-channel-field';
+export type { ColorChannelFieldProps } from './color-channel-field';
+export { ColorSolidPaint, ColorNativePicker } from './color-solid-paint';
+export type { ColorSolidPaintProps } from './color-solid-paint';
+export { ColorPickerPopover } from './color-picker-popover';
+export type { ColorPickerPopoverProps } from './color-picker-popover';
+export { ColorGradientsPaint } from './color-gradients-paint';
+export type { ColorGradientsPaintProps } from './color-gradients-paint';
+export { ColorImagePaint } from './color-image-paint';
+export type { ColorImagePaintProps } from './color-image-paint';
+export { SimpleColorPicker } from './simple-color-picker';
+export { Libraries } from './libraries';
+export type { LibrariesProps } from './libraries';
+export { useColors, ColorsContext, ColorsProvider } from './context/colots-context';
+export type { ColorsProviderProps } from './context/colots-context';
+export { useColorParser, useColorPicker, useImageFilterStyle, useColorProfile } from './hooks';
+export { getContrastThreshold, hsbToRgb, hslToRgb, p3StringToRgbString, p3ToRgb, profileConvertString, rgbaToRgb, rgbToHsb, rgbToHsl, rgbToP3, stringToRgba, } from './utils/colors-convert';
+export { colorToAreaPosition, positionToAreaColor } from './utils/position';
+export type { GradientPaint, ImagePaint, PatternPaint, SolidPaint } from './types/paint';
+export { getGradientString } from './utils/color';
+export type { BezierCurveSegment, BoundaryCalculationResult, BoundaryInfo, ChannelFieldFeature, ChannelFieldSpace, CheckColorContrastCategory, CheckColorContrastLevel, ColorContrast, ColorProfile, ColorStop, HSB, HSBA, HSL, HSLA, HSV, ImagePaintFeature, PaintState, PaletteType, PickerAreaType, PickerFeatures, PickerGradientType, PickerSliderType, PickerType, RecommendedPoint, RGB, RGBA, SolidPaintFeature, Transform, } from './types/colors';
+export type { LibrariesDisplayType, LibrariesFeature, LibrariesType } from './types/libraries';
+export type { ColorChannelLabels, ColorContrastLabels, ColorPickerLabels, ColorUpdateSource, FillItemLabels, GradientControlLabels, GradientFillLabels, GradientLabels, GradientListLabels, GradientPaintType, GradientToolbarLabels, ImageFilters, ImageScaleMode, ImageSizes, Paint, PaintType, PaintTypeLabels, SolidPaintLabels, TextPaint, } from './types/paint';
+export type { BasePaintStyle, BasePendingStyle, BasePendingStyleCommon, BaseStyleCommon, BaseTextStyle, BaseEffectStyle, EffectStyle, PaintStyle, PendingEffectStyle, PendingPaintStyle, PendingTextStyle, Style, StyleId, StyleType, TextStyle, TextStyleKey, TextStyleValue, } from './types/style';
+export type { BaseVariableValue, Property, Variable, VariableControlKey, VariableId, VariableOption, VariableType, VariableValue, } from './types/variable';
+export type { EffectItem, EffectItemType, EffectItemKey, EffectItemValue } from './types/effect';
+export type { SolidFillItem, TextFillItem, GradientFillItem, ImageFillItem, FillItem, FillItemKey, FillItemValue, FillType, } from './types/fill';
+export { COLOR_SPACES, DEFAULT_COLOR, DEFAULT_GRADIENT_TRANSFORM, BLACK_RGBA } from './contents';

package/dist/components/colors/src/libraries/components/virtualized-grid-row.d.ts

@@ -0,0 +1,36 @@
+import { LibrariesDisplayType, LibrariesType, RGB, Style, Variable } from '../../types';
+type VirtualizedItem = {
+    headerType: "category" | "subcategory";
+    isFirst?: boolean;
+    title: string;
+    type: "header";
+} | {
+    index: number;
+    item: Variable | Style;
+    itemType: "VARIABLE" | "STYLE";
+    type: "item";
+};
+interface VirtualizedGridRowProps {
+    columns?: number;
+    displayType: LibrariesDisplayType;
+    duplicateIndex?: number | null;
+    offset?: number;
+    onLibraryChange?: (value: {
+        item: Variable | Style;
+        type: LibrariesType;
+    }) => void;
+    onSwatchChange?: (value: {
+        alpha: number;
+        color: RGB;
+    }) => void;
+    padding?: string;
+    row: VirtualizedItem[];
+    selectedItem?: {
+        item: Variable | Style;
+        type: LibrariesType;
+    } | null;
+    size: number;
+    start: number;
+}
+export declare const VirtualizedGridRow: import('react').NamedExoticComponent<VirtualizedGridRowProps>;
+export {};