@choice-ui/react 1.7.6 → 1.7.8

package/dist/components/colors/src/color-slider/color-slider.js

@@ -0,0 +1,185 @@
+import { jsx } from "react/jsx-runtime";
+import { clamp } from "es-toolkit";
+import { memo, forwardRef, useRef, useCallback, useEffect, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { useColors } from "../context/colots-context.js";
+import { ColorSliderTv } from "./tv.js";
+import { positionToSliderValue } from "../utils/position.js";
+import { getSliderBackground } from "../utils/background.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
+import { translation } from "../contents/translation.js";
+const KEYBOARD_STEPS = {
+  NORMAL: 0.01,
+  SHIFT: 0.1
+};
+const ColorSlider = memo(
+  forwardRef(function ColorSlider2(props, ref) {
+    const {
+      position,
+      onChange,
+      onChangeStart,
+      onChangeEnd,
+      type,
+      hue = 0,
+      backgroundStyle,
+      disabled = false,
+      trackSize = {
+        width: 256,
+        height: 16
+      },
+      thumbSize = 14,
+      className
+    } = props;
+    const { colorProfile } = useColors();
+    const sliderRef = useRef(null);
+    const thumbRef = useRef(null);
+    const inputRef = useRef(null);
+    const isDragging = useRef(false);
+    const updatePosition = useEventCallback((clientX, isEnd) => {
+      var _a;
+      const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      const newPosition = clamp((clientX - rect.left) / rect.width, 0, 0.999);
+      if (isEnd) {
+        isDragging.current = false;
+      } else {
+        onChange == null ? void 0 : onChange(newPosition);
+      }
+    });
+    const handlePointerDown = useCallback(
+      (e) => {
+        var _a;
+        if (disabled) return;
+        e.preventDefault();
+        e.stopPropagation();
+        onChangeStart == null ? void 0 : onChangeStart();
+        const thumb = thumbRef.current;
+        if (!thumb) return;
+        isDragging.current = true;
+        thumb.setPointerCapture(e.pointerId);
+        updatePosition(e.clientX);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        const handleMove = (e2) => {
+          if (!isDragging.current) return;
+          e2.preventDefault();
+          updatePosition(e2.clientX);
+        };
+        const handleUp = (e2) => {
+          if (!isDragging.current) return;
+          e2.preventDefault();
+          if (thumb.hasPointerCapture(e2.pointerId)) {
+            thumb.releasePointerCapture(e2.pointerId);
+          }
+          updatePosition(e2.clientX, true);
+          isDragging.current = 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);
+      },
+      [disabled, onChangeEnd, onChangeStart, updatePosition]
+    );
+    const handleSliderPointerDown = useCallback(
+      (e) => {
+        if (e.target === thumbRef.current) return;
+        handlePointerDown(e);
+      },
+      [handlePointerDown]
+    );
+    const handleKeyDown = useEventCallback((e) => {
+      if (disabled) return;
+      const step = e.shiftKey ? KEYBOARD_STEPS.SHIFT : KEYBOARD_STEPS.NORMAL;
+      let newPosition = position;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          newPosition = clamp(position - step, 0, 1);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          newPosition = clamp(position + step, 0, 1);
+          break;
+        default:
+          return;
+      }
+      if (newPosition !== position) {
+        onChange == null ? void 0 : onChange(newPosition);
+      }
+    });
+    useEffect(() => {
+      var _a;
+      if (disabled && document.activeElement === inputRef.current) {
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      }
+    }, [disabled]);
+    const thumbStyle = useMemo(() => {
+      const minTransform = 1;
+      const maxTransform = ((trackSize == null ? void 0 : trackSize.width) ?? 0) - thumbSize - 1;
+      const transformX = minTransform + position * (maxTransform - minTransform);
+      return {
+        width: thumbSize,
+        height: thumbSize,
+        transform: `translate(${transformX}px, -50%)`,
+        backgroundColor: positionToSliderValue(position, type, hue),
+        willChange: isDragging.current ? "transform" : "auto",
+        boxShadow: `
+        inset 0 0 0 3px white,
+        inset 0 0 0 4px rgba(0,0,0,0.2),
+        0 0 0 1px rgba(0,0,0,0.2)
+      `
+      };
+    }, [position, thumbSize, trackSize, type, hue]);
+    const computedBackgroundStyle = useMemo(
+      () => ({
+        ...getSliderBackground(type, hue, colorProfile),
+        ...backgroundStyle
+      }),
+      [type, hue, colorProfile, backgroundStyle]
+    );
+    const styles = ColorSliderTv({ disabled });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergeRefs(ref, sliderRef),
+        onPointerDown: handleSliderPointerDown,
+        style: {
+          ...computedBackgroundStyle,
+          boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)",
+          height: trackSize == null ? void 0 : trackSize.height,
+          width: trackSize == null ? void 0 : trackSize.width
+        },
+        className: tcx(styles.root(), className),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: thumbRef,
+            onPointerDown: handlePointerDown,
+            className: styles.thumb(),
+            style: thumbStyle,
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                onKeyDown: handleKeyDown,
+                className: styles.thumbInput(),
+                "aria-label": translation.slider.ARIA_LABEL,
+                tabIndex: disabled ? -1 : 0,
+                readOnly: true
+              }
+            )
+          }
+        )
+      }
+    );
+  })
+);
+ColorSlider.displayName = "ColorSlider";
+export {
+  ColorSlider
+};

package/dist/components/colors/src/color-slider/index.d.ts

@@ -0,0 +1 @@
+export * from './color-slider';

package/dist/components/colors/src/color-slider/tv.d.ts

@@ -0,0 +1,31 @@
+export declare const ColorSliderTv: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    thumb: string;
+    thumbInput: string;
+}, undefined, {
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    thumb: string;
+    thumbInput: string;
+}, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    thumb: string;
+    thumbInput: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/color-slider/tv.js

@@ -0,0 +1,21 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const ColorSliderTv = tcv({
+  slots: {
+    root: "relative touch-none rounded-full select-none",
+    thumb: "absolute top-1/2 box-border origin-center rounded-full",
+    thumbInput: "absolute inset-0 cursor-default opacity-0"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "saturate-0"
+      }
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+export {
+  ColorSliderTv
+};

package/dist/components/colors/src/color-solid-paint/color-native-picker.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps } from 'react';
+import { RGB } from '../types/colors';
+interface ColorNativePickerProps extends Omit<HTMLProps<HTMLButtonElement>, "onChange"> {
+    onChange: (color: RGB) => void;
+    tooltip?: string;
+}
+export declare const ColorNativePicker: import('react').ForwardRefExoticComponent<Omit<ColorNativePickerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/colors/src/color-solid-paint/color-native-picker.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { forwardRef } from "react";
+import tinycolor from "tinycolor2";
+import { translation } from "../contents/translation.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const ColorNativePicker = forwardRef(
+  function ColorNativePicker2(props, ref) {
+    const { className, onChange, tooltip = translation.colorNativePicker.PICK_COLOR } = props;
+    const nativePick = async (value) => {
+      const val = value ? value.target.value : null;
+      if (val) {
+        return;
+      } else {
+        if (!("EyeDropper" in window)) {
+          alert(translation.colorNativePicker.ALERT);
+          return;
+        }
+        const eyeDropper = new window.EyeDropper();
+        const result = await eyeDropper.open();
+        const rgb = tinycolor(result.sRGBHex).toRgb();
+        onChange({ r: rgb.r, g: rgb.g, b: rgb.b });
+      }
+    };
+    return /* @__PURE__ */ jsx("div", { className: tcx("flex items-center justify-center", className), children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref,
+        onClick: nativePick,
+        tooltip: {
+          content: tooltip
+        },
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsxs(
+              "g",
+              {
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M1.5 14.5L2 14H3.99998L9.99998 8" }),
+                  /* @__PURE__ */ jsx("path", { d: "M2 14V12L8 6" }),
+                  /* @__PURE__ */ jsx("path", { d: "M9.99997 4L12.2666 1.73334C12.5319 1.46812 12.8916 1.31912 13.2666 1.31912C13.6417 1.31912 14.0014 1.46812 14.2666 1.73334C14.5319 1.99855 14.6809 2.35826 14.6809 2.73334C14.6809 3.10841 14.5319 3.46812 14.2666 3.73334L12 6L12.2666 6.26667C12.398 6.39799 12.5021 6.55389 12.5732 6.72547C12.6443 6.89705 12.6809 7.08095 12.6809 7.26667C12.6809 7.45239 12.6443 7.63628 12.5732 7.80787C12.5021 7.97945 12.398 8.13535 12.2666 8.26667C12.1353 8.39799 11.9794 8.50216 11.8078 8.57323C11.6363 8.6443 11.4524 8.68088 11.2666 8.68088C11.0809 8.68088 10.897 8.6443 10.7254 8.57323C10.5539 8.50216 10.398 8.39799 10.2666 8.26667L7.73331 5.73334C7.60198 5.60201 7.49781 5.44611 7.42674 5.27453C7.35567 5.10295 7.31909 4.91905 7.31909 4.73334C7.31909 4.54762 7.35567 4.36372 7.42674 4.19214C7.49781 4.02056 7.60198 3.86466 7.73331 3.73334C7.86463 3.60201 8.02053 3.49784 8.19211 3.42677C8.36369 3.3557 8.54759 3.31912 8.73331 3.31912C8.91902 3.31912 9.10292 3.3557 9.2745 3.42677C9.44608 3.49784 9.60198 3.60201 9.73331 3.73334L9.99997 4Z" })
+                ]
+              }
+            )
+          }
+        )
+      }
+    ) });
+  }
+);
+ColorNativePicker.displayName = "ColorNativePicker";
+export {
+  ColorNativePicker
+};

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ChannelFieldSpace, ColorContrast, RGB, SolidPaintFeature } from '../types/colors';
+import { LibrariesType } from '../types/libraries';
+import { SolidPaintLabels } from '../types/paint';
+import { Variable } from '../types/variable';
+export interface ColorSolidPaintProps {
+    alpha?: number;
+    checkColorContrast?: ColorContrast;
+    className?: string;
+    color?: RGB;
+    colorSpace: ChannelFieldSpace;
+    features?: SolidPaintFeature;
+    labels?: SolidPaintLabels;
+    library?: ReactNode;
+    onAlphaChange?: (alpha: number) => void;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onColorChange?: (color: RGB) => void;
+    onColorSpaceChange: (colorSpace: ChannelFieldSpace) => void;
+    onLibraryChange?: (value: {
+        item: Variable;
+        type: LibrariesType;
+    }) => void;
+}
+export declare const ColorSolidPaint: import('react').ForwardRefExoticComponent<ColorSolidPaintProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/colors/src/color-solid-paint/color-solid-paint.js

@@ -0,0 +1,295 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState, useEffect } from "react";
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { ColorNativePicker } from "./color-native-picker.js";
+import { SolidPaintAlphaSlider } from "./solid-paint-alpha-slider.js";
+import { SolidPaintArea } from "./solid-paint-area.js";
+import { SolidPaintChannelField } from "./solid-paint-channel-field.js";
+import { SolidPaintHueSlider } from "./solid-paint-hue-slider.js";
+import { ColorSolidPaintTv } from "./tv.js";
+import { usePaintState } from "../hooks/use-paint-state.js";
+import { useRgbColorHandler } from "../hooks/use-rgb-color-handler.js";
+import { useColorContrastRecommendation } from "../hooks/use-color-contrast-recommendation.js";
+import { CheckColorContrastToolbar } from "../check-color-contrast/check-color-contrast-toolbar.js";
+import { CheckColorContrastBoundary } from "../check-color-contrast/check-color-contrast-boundary.js";
+import { calculateContrastRatio, getEffectiveElementType } from "../utils/contrast-utils.js";
+import { translation } from "../contents/translation.js";
+import { getContrastThreshold } from "../utils/colors-convert.js";
+const ColorSolidPaint = forwardRef(
+  function ColorSolidPaint2(props, ref) {
+    const {
+      className,
+      color = { r: 250, g: 250, b: 250 },
+      alpha: opacity = 1,
+      onColorChange,
+      onAlphaChange,
+      labels,
+      features: userFeatures = {},
+      checkColorContrast: originalCheckColorContrast,
+      onChangeStart,
+      onChangeEnd,
+      library,
+      colorSpace,
+      onColorSpaceChange
+    } = props;
+    const { paintState, setPaintState, updateSourceRef } = usePaintState({ color });
+    const { handleRgbChange } = useRgbColorHandler({
+      paintState,
+      setPaintState,
+      updateSourceRef,
+      colorSpace,
+      onColorChange
+    });
+    const features = useMemo(() => {
+      return {
+        containerWidth: 240,
+        presets: true,
+        spaceDropdown: true,
+        alpha: true,
+        hex: true,
+        rgb: true,
+        hsl: true,
+        hsb: true,
+        checkColorContrast: true,
+        nativePicker: true,
+        ...userFeatures
+      };
+    }, [userFeatures]);
+    const handleNativeColorChange = useEventCallback((rgb) => {
+      onColorChange == null ? void 0 : onColorChange(rgb);
+    });
+    const sliderTrackSize = useMemo(() => {
+      const getPadding = () => {
+        if (!features.alpha && !features.nativePicker) {
+          return 32;
+        }
+        let padding = 0;
+        padding += features.alpha ? 32 : 16;
+        padding += features.nativePicker ? 48 : 0;
+        return padding;
+      };
+      return {
+        width: ((features == null ? void 0 : features.containerWidth) ?? 240) - getPadding(),
+        height: 16
+      };
+    }, [features.containerWidth, features.alpha, features.nativePicker]);
+    const styles = ColorSolidPaintTv({
+      alpha: features.alpha,
+      nativePicker: features.nativePicker,
+      presets: features.presets
+    });
+    const [standardHovered, setStandardHovered] = useState(false);
+    const selectedElementType = (originalCheckColorContrast == null ? void 0 : originalCheckColorContrast.selectedElementType) ?? "graphics";
+    const backgroundColor = originalCheckColorContrast == null ? void 0 : originalCheckColorContrast.backgroundColor;
+    const contrastLevel = originalCheckColorContrast == null ? void 0 : originalCheckColorContrast.level;
+    const contrastCategory = originalCheckColorContrast == null ? void 0 : originalCheckColorContrast.category;
+    const showContrast = originalCheckColorContrast == null ? void 0 : originalCheckColorContrast.showColorContrast;
+    const checkColorContrastForChild = useMemo(() => {
+      if (!originalCheckColorContrast) return void 0;
+      return {
+        ...originalCheckColorContrast,
+        foregroundColor: color,
+        foregroundAlpha: opacity,
+        selectedElementType
+      };
+    }, [originalCheckColorContrast, color, opacity, selectedElementType]);
+    const containerWidth = (features == null ? void 0 : features.containerWidth) ?? 240;
+    const stableContrastHookOnColorChange = useEventCallback(
+      (newColor, newAlpha, preserveHue) => {
+        if (preserveHue !== void 0) {
+          updateSourceRef.current = "internal";
+          const tc = tinycolor(newColor);
+          const hsl = tc.toHsl();
+          const hsv = tc.toHsv();
+          setPaintState({
+            h: preserveHue,
+            // 使用传入的原始 hue，不从 RGB 重新计算
+            hsl_s: hsl.s,
+            l: hsl.l,
+            hsv_s: hsv.s,
+            v: hsv.v
+          });
+        }
+        onColorChange == null ? void 0 : onColorChange(newColor);
+        onAlphaChange == null ? void 0 : onAlphaChange(newAlpha);
+        setStandardHovered(false);
+      }
+    );
+    const contrastOptions = useMemo(
+      () => ({
+        onColorChange: stableContrastHookOnColorChange
+      }),
+      [stableContrastHookOnColorChange]
+    );
+    const {
+      recommendedPoint,
+      boundaryData: calculatedBoundaryData,
+      updateRecommendedPoint,
+      applyRecommendedPoint
+    } = useColorContrastRecommendation({
+      width: containerWidth,
+      height: containerWidth,
+      hue: paintState.h,
+      backgroundColor: backgroundColor || { r: 255, g: 255, b: 255 },
+      foregroundAlpha: opacity,
+      level: contrastLevel,
+      category: contrastCategory,
+      selectedElementType,
+      options: contrastOptions,
+      colorSpace,
+      paintState
+    });
+    const boundaryDataForChild = useMemo(() => {
+      if (showContrast && features.checkColorContrast && calculatedBoundaryData) {
+        return calculatedBoundaryData;
+      }
+      return { lowerBoundary: null, upperBoundary: null, threshold: 0 };
+    }, [showContrast, features.checkColorContrast, calculatedBoundaryData]);
+    useEffect(() => {
+      if (!showContrast || !standardHovered) return;
+      const effectiveType = getEffectiveElementType(contrastCategory, selectedElementType);
+      const threshold = getContrastThreshold(contrastLevel, contrastCategory, effectiveType);
+      const ratio = calculateContrastRatio(
+        backgroundColor ?? { r: 255, g: 255, b: 255 },
+        color,
+        opacity
+      );
+      if (ratio >= threshold) {
+        setStandardHovered(false);
+      }
+    }, [
+      showContrast,
+      standardHovered,
+      backgroundColor,
+      color,
+      opacity,
+      contrastLevel,
+      contrastCategory,
+      selectedElementType
+    ]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      showContrast && features.checkColorContrast && /* @__PURE__ */ jsx(
+        CheckColorContrastToolbar,
+        {
+          checkColorContrast: checkColorContrastForChild,
+          onStandardHovered: setStandardHovered,
+          containerWidth,
+          applyRecommendedPoint
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className,
+          style: { width: containerWidth },
+          children: [
+            /* @__PURE__ */ jsx(
+              SolidPaintArea,
+              {
+                paintState,
+                setPaintState: (newState) => {
+                  setPaintState(newState);
+                },
+                colorSpace,
+                rgbColor: color,
+                onColorChange,
+                containerWidth,
+                updateSourceRef,
+                onChangeStart,
+                onChangeEnd,
+                children: showContrast && features.checkColorContrast && /* @__PURE__ */ jsx(
+                  CheckColorContrastBoundary,
+                  {
+                    colorSpace,
+                    paintState,
+                    width: containerWidth,
+                    height: containerWidth,
+                    foregroundAlpha: opacity,
+                    showRecommendedPoint: standardHovered,
+                    recommendedPoint,
+                    boundaryData: boundaryDataForChild,
+                    updateRecommendedPoint
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles.sliderContainer(),
+                style: { width: containerWidth },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SolidPaintHueSlider,
+                    {
+                      hue: paintState.h,
+                      setHue: (newHue) => {
+                        const newPaintState = { ...paintState, h: newHue };
+                        setPaintState(newPaintState);
+                      },
+                      color,
+                      onColorChange,
+                      onChangeStart,
+                      onChangeEnd,
+                      onChange: onChangeEnd,
+                      type: "hue",
+                      trackSize: sliderTrackSize,
+                      updateSourceRef
+                    }
+                  ),
+                  features.alpha && /* @__PURE__ */ jsx(
+                    SolidPaintAlphaSlider,
+                    {
+                      hue: paintState.h,
+                      alpha: opacity,
+                      onAlphaChange,
+                      type: "alpha",
+                      trackSize: sliderTrackSize,
+                      onChangeStart,
+                      onChangeEnd
+                    }
+                  ),
+                  features.nativePicker && /* @__PURE__ */ jsx(
+                    ColorNativePicker,
+                    {
+                      onChange: handleNativeColorChange,
+                      className: styles.nativePicker(),
+                      tooltip: (labels == null ? void 0 : labels.pickerColor) ?? translation.colorNativePicker.PICK_COLOR
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SolidPaintChannelField,
+              {
+                paintState,
+                setPaintState: (newState) => {
+                  setPaintState(newState);
+                },
+                colorSpace,
+                setColorSpace: onColorSpaceChange,
+                updateSourceRef,
+                rgb: color,
+                alpha: opacity,
+                onAlphaChange,
+                onAlphaChangeEnd: onChangeEnd,
+                onAlphaChangeStart: onChangeStart,
+                onColorChange: handleRgbChange,
+                className: styles.channelField(),
+                features,
+                labels
+              }
+            ),
+            features.presets && library && /* @__PURE__ */ jsx(Fragment, { children: library })
+          ]
+        }
+      )
+    ] });
+  }
+);
+export {
+  ColorSolidPaint
+};

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

@@ -0,0 +1,3 @@
+export * from './color-native-picker';
+export * from './color-solid-paint';
+export * from './solid-paint-library-item';

package/dist/components/colors/src/color-solid-paint/solid-paint-alpha-slider.d.ts

@@ -0,0 +1,10 @@
+import { ColorSliderProps } from '../color-slider';
+type Props = Omit<ColorSliderProps, "position"> & {
+    alpha: number;
+    hue: number;
+    onAlphaChange?: (value: number) => void;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+};
+export declare const SolidPaintAlphaSlider: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/colors/src/color-solid-paint/solid-paint-alpha-slider.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { ColorSlider } from "../color-slider/color-slider.js";
+const SolidPaintAlphaSlider = (props) => {
+  const { hue, alpha, onAlphaChange, onChangeStart, onChangeEnd, trackSize } = props;
+  return /* @__PURE__ */ jsx(
+    ColorSlider,
+    {
+      position: alpha,
+      onChange: onAlphaChange,
+      type: "alpha",
+      hue,
+      trackSize,
+      onChangeStart,
+      onChangeEnd
+    }
+  );
+};
+export {
+  SolidPaintAlphaSlider
+};