@choice-ui/react 1.7.6 → 1.7.8

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

@@ -0,0 +1,17 @@
+import { ChannelFieldSpace, PaintState, RGB } from '../types/colors';
+import { ColorUpdateSource } from '../types/paint';
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    colorSpace: ChannelFieldSpace;
+    containerWidth?: number;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onColorChange?: (rgb: RGB) => void;
+    paintState: PaintState;
+    rgbColor: RGB;
+    setPaintState: (state: PaintState) => void;
+    updateSourceRef: React.MutableRefObject<ColorUpdateSource>;
+};
+export declare const SolidPaintArea: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,131 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { rgbaToRgb } from "../utils/colors-convert.js";
+import { isEdgeValue } from "../utils/position.js";
+import { ColorArea } from "../color-area/color-area.js";
+import { COLOR_SPACES } from "../contents/color-space.js";
+const SolidPaintArea = (props) => {
+  const {
+    paintState,
+    setPaintState,
+    colorSpace,
+    rgbColor,
+    containerWidth = 240,
+    className,
+    onColorChange,
+    onChangeEnd,
+    onChangeStart,
+    children,
+    updateSourceRef
+  } = props;
+  const { h, hsl_s, l, hsv_s, v } = paintState;
+  const type = useMemo(() => {
+    if (colorSpace === COLOR_SPACES.HSL) {
+      return "saturation-lightness";
+    } else {
+      return "saturation-brightness";
+    }
+  }, [colorSpace]);
+  const areaSize = useMemo(
+    () => ({
+      width: containerWidth,
+      height: containerWidth
+    }),
+    [containerWidth]
+  );
+  const position = useMemo(() => {
+    if (colorSpace === COLOR_SPACES.HSL) {
+      return {
+        x: hsl_s,
+        y: l
+      };
+    } else {
+      return {
+        x: hsv_s,
+        y: v
+      };
+    }
+  }, [colorSpace, hsl_s, hsv_s, l, v]);
+  const handleAreaChange = useEventCallback((position2) => {
+    const { x, y } = position2;
+    const isHsl = colorSpace === COLOR_SPACES.HSL;
+    const prevState = { ...paintState };
+    const updates = { ...prevState };
+    let newColor = null;
+    if (isHsl) {
+      updates.hsl_s = x;
+      if (isEdgeValue(y)) {
+        const isBlack = y < 0.5;
+        const l2 = isBlack ? 0 : 1;
+        updates.l = l2;
+        updates.v = isBlack ? 0 : 1;
+        updates.hsv_s = x;
+        newColor = tinycolor({
+          h,
+          s: x,
+          l: l2
+        });
+      } else {
+        updates.l = y;
+        newColor = tinycolor({
+          h,
+          s: x,
+          l: y
+        });
+        const hsv = newColor.toHsv();
+        updates.hsv_s = hsv.s;
+        updates.v = hsv.v;
+      }
+    } else {
+      updates.hsv_s = x;
+      if (isEdgeValue(y)) {
+        const isBlack = y < 0.5;
+        const v2 = isBlack ? 0 : 1;
+        updates.v = v2;
+        updates.l = isBlack ? 0 : 1;
+        newColor = tinycolor({
+          h,
+          s: x,
+          v: v2
+        });
+      } else {
+        updates.v = y;
+        newColor = tinycolor({
+          h,
+          s: x,
+          v: y
+        });
+        const hsl = newColor.toHsl();
+        updates.hsl_s = hsl.s;
+        updates.l = hsl.l;
+      }
+    }
+    setPaintState(updates);
+    updateSourceRef.current = "internal";
+    const rgbColor2 = rgbaToRgb(newColor.toRgb());
+    onColorChange == null ? void 0 : onColorChange(rgbColor2);
+  });
+  return /* @__PURE__ */ jsx(
+    ColorArea,
+    {
+      position,
+      onChange: handleAreaChange,
+      type,
+      hue: h,
+      thumbColor: rgbColor,
+      areaSize,
+      className,
+      onChangeStart,
+      onChangeEnd: () => {
+        onChangeEnd == null ? void 0 : onChangeEnd();
+        updateSourceRef.current = "external";
+      },
+      children
+    }
+  );
+};
+export {
+  SolidPaintArea
+};

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

@@ -0,0 +1,20 @@
+import { ColorChannelFieldProps } from '../color-channel-field';
+import { ChannelFieldSpace, PaintState, RGB } from '../types/colors';
+import { ColorChannelLabels, ColorUpdateSource } from '../types/paint';
+type Props = {
+    alpha: number;
+    className: string;
+    colorSpace?: ChannelFieldSpace;
+    labels?: ColorChannelLabels;
+    onAlphaChange?: (value: number) => void;
+    onAlphaChangeEnd?: () => void;
+    onAlphaChangeStart?: () => void;
+    onColorChange?: (color: RGB) => void;
+    paintState: PaintState;
+    rgb: RGB;
+    setColorSpace?: (colorSpace: ChannelFieldSpace) => void;
+    setPaintState: (state: PaintState) => void;
+    updateSourceRef: React.MutableRefObject<ColorUpdateSource>;
+} & Pick<ColorChannelFieldProps, "className" | "features">;
+export declare const SolidPaintChannelField: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,147 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { isEdgeValue } from "../utils/position.js";
+import { ColorChannelField } from "../color-channel-field/color-channel-field.js";
+import { COLOR_SPACES } from "../contents/color-space.js";
+const SolidPaintChannelField = (props) => {
+  const {
+    paintState,
+    setPaintState,
+    colorSpace,
+    setColorSpace,
+    rgb,
+    onColorChange,
+    alpha,
+    onAlphaChange,
+    onAlphaChangeEnd,
+    onAlphaChangeStart,
+    updateSourceRef,
+    labels,
+    ...rest
+  } = props;
+  const { h, hsl_s, l, hsv_s, v } = paintState;
+  const { hsl, hsb } = useMemo(() => {
+    const isHsl = colorSpace === COLOR_SPACES.HSL;
+    const tc = isHsl ? tinycolor({ h, s: hsl_s, l }) : tinycolor({ h, s: hsv_s, v });
+    const { r, g, b } = tc.toRgb();
+    const rgb2 = { r, g, b };
+    const { h: h_hsl, s: s_hsl_out, l: l_hsl } = tc.toHsl();
+    const hsl2 = { h: h_hsl, s: s_hsl_out, l: l_hsl };
+    const hsb2 = { h, s: hsv_s, b: v };
+    if (isHsl) {
+      if (isEdgeValue(l)) {
+        return {
+          hsl: {
+            h,
+            s: hsl_s,
+            l: l < 0.5 ? 0 : 1
+          },
+          hsb: hsb2
+        };
+      }
+      if (isEdgeValue(hsl2.s)) {
+        return {
+          hsl: {
+            h,
+            s: hsl2.s,
+            l: hsl2.l
+          },
+          hsb: hsb2
+        };
+      }
+    }
+    const isGrayscale = rgb2.r === rgb2.g && rgb2.g === rgb2.b;
+    if (isGrayscale && !isEdgeValue(l)) {
+      return {
+        hsl: {
+          h,
+          s: hsl2.s,
+          l: hsl2.l
+        },
+        hsb: hsb2
+      };
+    }
+    return {
+      hsl: hsl2,
+      hsb: hsb2
+    };
+  }, [colorSpace, h, hsl_s, hsv_s, l, v]);
+  const handleHslChange = useEventCallback((hsl2) => {
+    const color = tinycolor(hsl2);
+    const prev = { ...paintState };
+    const updates = { ...prev };
+    updates.h = isEdgeValue(hsl2.s) ? prev.h : hsl2.h;
+    updates.hsl_s = hsl2.s;
+    updates.l = hsl2.l;
+    if (hsl2.l === 0) {
+      updates.v = 0;
+    } else if (hsl2.l === 1 && hsl2.s === 0) {
+      updates.hsv_s = 0;
+      updates.v = 1;
+    } else {
+      const hsv = color.toHsv();
+      updates.hsv_s = hsv.s;
+      updates.v = hsv.v;
+    }
+    setPaintState(updates);
+    updateSourceRef.current = "internal";
+    const rgbColor = color.toRgb();
+    onColorChange == null ? void 0 : onColorChange(rgbColor);
+    setTimeout(() => {
+      updateSourceRef.current = "external";
+    }, 0);
+  });
+  const handleHsbChange = useEventCallback((hsb2) => {
+    const color = tinycolor({
+      h: hsb2.h,
+      s: hsb2.s,
+      v: hsb2.b
+    });
+    const prev = { ...paintState };
+    const updates = { ...prev };
+    updates.h = isEdgeValue(hsb2.s) ? prev.h : hsb2.h;
+    updates.hsv_s = hsb2.s;
+    updates.v = hsb2.b;
+    if (hsb2.b === 0) {
+      updates.l = 0;
+    } else if (hsb2.b === 1 && hsb2.s === 0) {
+      updates.hsl_s = 0;
+      updates.l = 1;
+    } else {
+      const hsl2 = color.toHsl();
+      updates.hsl_s = hsl2.s;
+      updates.l = hsl2.l;
+    }
+    setPaintState(updates);
+    updateSourceRef.current = "internal";
+    const rgbColor = color.toRgb();
+    onColorChange == null ? void 0 : onColorChange(rgbColor);
+    setTimeout(() => {
+      updateSourceRef.current = "external";
+    }, 0);
+  });
+  return /* @__PURE__ */ jsx(
+    ColorChannelField,
+    {
+      colorSpace,
+      onChangeColorSpace: setColorSpace,
+      hsl,
+      hsb,
+      rgb,
+      alpha,
+      onHslChange: handleHslChange,
+      onRgbChange: onColorChange,
+      onHsbChange: handleHsbChange,
+      onAlphaChange,
+      onAlphaChangeEnd,
+      onAlphaChangeStart,
+      labels,
+      ...rest
+    }
+  );
+};
+export {
+  SolidPaintChannelField
+};

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

@@ -0,0 +1,14 @@
+import { ColorSliderProps } from '../color-slider';
+import { RGB } from '../types/colors';
+import { ColorUpdateSource } from '../types/paint';
+type Props = Omit<ColorSliderProps, "position"> & {
+    color: RGB;
+    hue: number;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onColorChange?: (color: RGB) => void;
+    setHue: (newHue: number) => void;
+    updateSourceRef: React.MutableRefObject<ColorUpdateSource>;
+};
+export declare const SolidPaintHueSlider: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { hslToRgb } from "../utils/colors-convert.js";
+import { ColorSlider } from "../color-slider/color-slider.js";
+const SolidPaintHueSlider = (props) => {
+  const {
+    hue,
+    setHue,
+    color,
+    onColorChange,
+    trackSize,
+    onChangeStart,
+    onChangeEnd,
+    updateSourceRef
+  } = props;
+  const handleHueChange = useEventCallback((value) => {
+    const hslColor = tinycolor(color).toHsl();
+    const hueValue = value * 360;
+    const newHslColor = {
+      ...hslColor,
+      h: hueValue
+    };
+    setHue(hueValue);
+    updateSourceRef.current = "internal";
+    const rgbColor = hslToRgb(newHslColor);
+    onColorChange == null ? void 0 : onColorChange(rgbColor);
+  });
+  return /* @__PURE__ */ jsx(
+    ColorSlider,
+    {
+      position: hue / 360,
+      onChange: handleHueChange,
+      type: "hue",
+      trackSize,
+      onChangeStart,
+      onChangeEnd: () => {
+        onChangeEnd == null ? void 0 : onChangeEnd();
+        updateSourceRef.current = "external";
+      }
+    }
+  );
+};
+export {
+  SolidPaintHueSlider
+};

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

@@ -0,0 +1,8 @@
+import { RGBA } from '../types/colors';
+type Props = {
+    color: RGBA;
+    onClick: (color: RGBA) => void;
+    size?: number;
+};
+export declare const SolidPaintLibraryItem: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,79 @@
+export declare const ColorSolidPaintTv: import('tailwind-variants').TVReturnType<{
+    presets: {
+        true: {
+            channelField: string;
+        };
+        false: {};
+    };
+    alpha: {
+        true: {
+            sliderContainer: string;
+            nativePicker: string;
+        };
+        false: {
+            sliderContainer: string;
+        };
+    };
+    nativePicker: {
+        true: {
+            sliderContainer: string;
+        };
+        false: {};
+    };
+}, {
+    sliderContainer: string;
+    nativePicker: string;
+    channelField: string;
+}, undefined, {
+    presets: {
+        true: {
+            channelField: string;
+        };
+        false: {};
+    };
+    alpha: {
+        true: {
+            sliderContainer: string;
+            nativePicker: string;
+        };
+        false: {
+            sliderContainer: string;
+        };
+    };
+    nativePicker: {
+        true: {
+            sliderContainer: string;
+        };
+        false: {};
+    };
+}, {
+    sliderContainer: string;
+    nativePicker: string;
+    channelField: string;
+}, import('tailwind-variants').TVReturnType<{
+    presets: {
+        true: {
+            channelField: string;
+        };
+        false: {};
+    };
+    alpha: {
+        true: {
+            sliderContainer: string;
+            nativePicker: string;
+        };
+        false: {
+            sliderContainer: string;
+        };
+    };
+    nativePicker: {
+        true: {
+            sliderContainer: string;
+        };
+        false: {};
+    };
+}, {
+    sliderContainer: string;
+    nativePicker: string;
+    channelField: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,39 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const ColorSolidPaintTv = tcv({
+  slots: {
+    sliderContainer: "grid items-center gap-2 p-4",
+    nativePicker: "",
+    channelField: "px-4"
+  },
+  variants: {
+    presets: {
+      true: {
+        channelField: "pb-4"
+      },
+      false: {}
+    },
+    alpha: {
+      true: {
+        sliderContainer: "",
+        nativePicker: "col-start-2 row-span-2 row-start-1 p-2"
+      },
+      false: {
+        sliderContainer: ""
+      }
+    },
+    nativePicker: {
+      true: {
+        sliderContainer: "grid-cols-[1fr_auto]"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    alpha: true,
+    presets: true,
+    nativePicker: true
+  }
+});
+export {
+  ColorSolidPaintTv
+};

package/dist/components/colors/src/color-swatch/color-swatch.d.ts

@@ -0,0 +1,15 @@
+import { HTMLProps } from 'react';
+import { RGB } from '../types/colors';
+import { LibrariesType } from '../types/libraries';
+import { GradientPaint } from '../types/paint';
+export interface ColorSwatchProps extends Omit<HTMLProps<HTMLDivElement>, "color"> {
+    alpha?: number;
+    children?: React.ReactNode;
+    className?: string;
+    color?: RGB;
+    disabled?: boolean;
+    gradient?: GradientPaint;
+    size?: number;
+    type?: LibrariesType;
+}
+export declare const ColorSwatch: import('react').ForwardRefExoticComponent<Omit<ColorSwatchProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,111 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useColors } from "../context/colots-context.js";
+import { getGradientString } from "../utils/color.js";
+import { getColorSwatchBackground } from "../utils/background.js";
+import { profileConvertString } from "../utils/colors-convert.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const createColorStyle = (color, alpha, type, colorProfile) => {
+  const displayColor = profileConvertString(
+    {
+      r: color.r,
+      g: color.g,
+      b: color.b
+    },
+    colorProfile
+  );
+  if (alpha === 1) return displayColor;
+  const displayColorAlpha = profileConvertString(
+    {
+      r: color.r,
+      g: color.g,
+      b: color.b,
+      a: alpha
+    },
+    colorProfile
+  );
+  return `linear-gradient(
+    ${type === "VARIABLE" ? "to right" : "45deg"},
+    ${displayColor} 50%,
+    ${displayColorAlpha} 50%
+  )`;
+};
+const ColorSwatch = forwardRef(
+  function ColorSwatch2(props, ref) {
+    const {
+      color,
+      alpha,
+      gradient,
+      size = 14,
+      className,
+      disabled,
+      children,
+      type = "VARIABLE",
+      style,
+      ...rest
+    } = props;
+    const { colorProfile } = useColors();
+    const checkerboard = useMemo(() => getColorSwatchBackground(size, 3), [size]);
+    const gradientStyle = useMemo(() => {
+      if (!gradient) return null;
+      const stops = gradient.gradientStops;
+      const gradientType = gradient.type;
+      const transform = gradient.gradientTransform;
+      if (!stops || !gradientType || !transform) return null;
+      const processedStops = stops.map((stop) => ({
+        ...stop,
+        color: {
+          ...stop.color,
+          a: stop.alpha
+        }
+      }));
+      return {
+        stops: processedStops,
+        type: gradientType,
+        transform
+      };
+    }, [gradient]);
+    const backgroundStyle = useMemo(() => {
+      if (gradientStyle) {
+        return `${getGradientString(
+          gradientStyle.stops,
+          gradientStyle.type,
+          gradientStyle.transform,
+          colorProfile
+        )}, ${checkerboard}`;
+      }
+      if (!color) return "";
+      try {
+        const colorStyle = createColorStyle(color, alpha ?? 1, type, colorProfile);
+        return (alpha ?? 1) < 1 ? `${colorStyle}, ${checkerboard}` : colorStyle;
+      } catch (error) {
+        console.error(error);
+        return "";
+      }
+    }, [color, alpha, type, checkerboard, gradientStyle, colorProfile]);
+    const swatchStyle = useMemo(
+      () => ({
+        width: size,
+        height: size,
+        background: backgroundStyle,
+        ...style
+      }),
+      [backgroundStyle, size, style]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx("shadow-line shrink-0", disabled && "saturate-0", className),
+        style: swatchStyle,
+        "aria-disabled": disabled,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+ColorSwatch.displayName = "ColorSwatch";
+export {
+  ColorSwatch
+};

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

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

package/dist/components/colors/src/contents/color-space.d.ts

@@ -0,0 +1,19 @@
+export declare const COLOR_SPACES: {
+    readonly HEX: "hex";
+    readonly RGB: "rgb";
+    readonly HSL: "hsl";
+    readonly HSB: "hsb";
+};
+export declare const COLOR_SPACE_OPTIONS: ({
+    label: string;
+    value: "hex";
+} | {
+    label: string;
+    value: "rgb";
+} | {
+    label: string;
+    value: "hsl";
+} | {
+    label: string;
+    value: "hsb";
+})[];

package/dist/components/colors/src/contents/color-space.js

@@ -0,0 +1,16 @@
+const COLOR_SPACES = {
+  HEX: "hex",
+  RGB: "rgb",
+  HSL: "hsl",
+  HSB: "hsb"
+};
+const COLOR_SPACE_OPTIONS = [
+  { label: "HEX", value: COLOR_SPACES.HEX },
+  { label: "RGB", value: COLOR_SPACES.RGB },
+  { label: "HSL", value: COLOR_SPACES.HSL },
+  { label: "HSB", value: COLOR_SPACES.HSB }
+];
+export {
+  COLOR_SPACES,
+  COLOR_SPACE_OPTIONS
+};