@choice-ui/react 1.7.6 → 1.7.8

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

@@ -0,0 +1,42 @@
+import { PaletteType, RGB, RGBA, Transform } from '../types/colors';
+export declare const PAGE_BACKGROUND_LIGHT: RGBA;
+export declare const PAGE_BACKGROUND_DARK: RGBA;
+export declare const PRIMARY: RGB;
+export declare const PRIMARY_RGBA: RGBA;
+export declare const COLOR_SWATCH_INNER_SIZE = 14;
+export declare const COLOR_SWATCH_SIZE = 16;
+export declare const SELECTION_COLORS_PREVIEW_ITEMS = 3;
+export declare const PRIMARY_COLOR = "#0d99ff";
+export declare const COMPONENT_COLOR = "#8638e5";
+export declare const AI_COLOR = "#14ae5c";
+export declare const MAGENTA_COLOR = "#ff00ff";
+export declare const GRAY_COLOR = "#a3a3a3";
+export declare const SNAP_COLOR = "#ff3100";
+export declare const DEFAULT_COLOR: RGB;
+export declare const DEFAULT_ALPHA = 1;
+export declare const DEFAULT_GRADIENT_TRANSFORM: Transform;
+export declare const WHITE: RGB;
+export declare const WHITE_RGBA: RGBA;
+export declare const GRAY: RGB;
+export declare const GRAY_RGBA: RGBA;
+export declare const BLACK_RGBA: RGBA;
+export declare const BLACK: RGB;
+export declare const SEMI_TRANSPARENT_BLACK: RGBA;
+export declare const SLATE_COLORS: RGB[];
+export declare const RED_COLORS: RGB[];
+export declare const PINK_COLORS: RGB[];
+export declare const PURPLE_COLORS: RGB[];
+export declare const BLUE_COLORS: RGB[];
+export declare const GREEN_COLORS: RGB[];
+export declare const BROWN_COLORS: RGB[];
+export declare const ORANGE_COLORS: RGB[];
+export declare const YELLOW_COLORS: RGB[];
+export declare const SKY_COLORS: RGB[];
+export declare const DEFAULT_COLORS: Array<{
+    colors: RGB[];
+    id: PaletteType;
+}>;
+/** 网格颜色 */
+export declare const GRID_COLOR = "hsla(0, 0%, 0%, 0.1)";
+/** 默认的边框颜色 */
+export declare const DEFAULT_BORDER_COLOR: RGB;

package/dist/components/colors/src/contents/colors.js

@@ -0,0 +1,24 @@
+const DEFAULT_COLOR = { r: 0, g: 85, b: 255 };
+const DEFAULT_ALPHA = 1;
+const DEFAULT_GRADIENT_TRANSFORM = [
+  [1, 0, 0],
+  [0, 1, 0]
+];
+const BLACK_RGBA = {
+  r: 0,
+  g: 0,
+  b: 0,
+  a: 1
+};
+const BLACK = {
+  r: 0,
+  g: 0,
+  b: 0
+};
+export {
+  BLACK,
+  BLACK_RGBA,
+  DEFAULT_ALPHA,
+  DEFAULT_COLOR,
+  DEFAULT_GRADIENT_TRANSFORM
+};

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

@@ -0,0 +1,3 @@
+export * from './color-space';
+export * from './colors';
+export * from './translation';

package/dist/components/colors/src/contents/translation.d.ts

@@ -0,0 +1,100 @@
+export declare const translation: {
+    common: {
+        SEARCH: string;
+        NO_MATCH: string;
+    };
+    area: {
+        ARIA_LABEL: string;
+    };
+    slider: {
+        ARIA_LABEL: string;
+    };
+    channels: {
+        RED: string;
+        GREEN: string;
+        BLUE: string;
+        ALPHA: string;
+        HUE: string;
+        SATURATION: string;
+        LIGHTNESS: string;
+        BRIGHTNESS: string;
+    };
+    channelField: {
+        EMPTY: string;
+    };
+    gradients: {
+        STOP: string;
+        STOP_POSITION: string;
+        ADD_STOP: string;
+        DELETE_STOP: string;
+        LINEAR: string;
+        RADIAL: string;
+        CONIC: string;
+        ROTATE_GRADIENT: string;
+        FLIP_GRADIENT: string;
+    };
+    type: {
+        SOLID: string;
+        GRADIENT: string;
+        PATTERN: string;
+        IMAGE: string;
+    };
+    colorContrast: {
+        LABEL: string;
+        BACKGROUND_COLOR: string;
+        FOREGROUND_COLOR: string;
+        STANDARD: string;
+        VIEW_COLOR_VALUES: string;
+        NOT_MEET_STANDARD: string;
+        CONTRAST_SETTINGS: string;
+        category: {
+            LABEL: string;
+            auto: {
+                TEXT: string;
+                GRAPHICS: string;
+            };
+            LARGE_TEXT: string;
+            NORMAL_TEXT: string;
+            GRAPHICS: string;
+        };
+        level: {
+            LABEL: string;
+            AA: {
+                TEXT: string;
+                GRAPHICS: string;
+            };
+            AAA: {
+                TEXT: string;
+                LARGE_TEXT: string;
+                GRAPHICS: string;
+            };
+        };
+    };
+    colorNativePicker: {
+        PICK_COLOR: string;
+        ALERT: string;
+    };
+    input: {
+        SOLID: string;
+        ALPHA: string;
+        gradient: {
+            LINEAR: string;
+            RADIAL: string;
+            CONIC: string;
+        };
+        IMAGE: string;
+        VARIABLE: string;
+    };
+    libraries: {
+        LABEL: string;
+        SWITCH_TO_GRID: string;
+        SWITCH_TO_LIST: string;
+        ALL: string;
+    };
+    colorPicker: {
+        TITLE: string;
+        CUSTOM: string;
+        LIBRARIES: string;
+        NO_AVAILABLE: string;
+    };
+};

package/dist/components/colors/src/contents/translation.js

@@ -0,0 +1,94 @@
+const translation = {
+  common: {
+    SEARCH: "Search..."
+  },
+  area: {
+    ARIA_LABEL: "Color area navigation"
+  },
+  slider: {
+    ARIA_LABEL: "Color slider navigation"
+  },
+  channels: {
+    RED: "Red",
+    GREEN: "Green",
+    BLUE: "Blue",
+    ALPHA: "Alpha",
+    HUE: "Hue",
+    SATURATION: "Saturation",
+    LIGHTNESS: "Lightness",
+    BRIGHTNESS: "Brightness"
+  },
+  channelField: {
+    EMPTY: "No color space available"
+  },
+  gradients: {
+    STOP: "Stop",
+    STOP_POSITION: "Gradient stop position",
+    ADD_STOP: "Add gradient stop",
+    DELETE_STOP: "Delete gradient stop",
+    LINEAR: "Linear",
+    RADIAL: "Radial",
+    CONIC: "Conic",
+    ROTATE_GRADIENT: "Rotate gradient",
+    FLIP_GRADIENT: "Flip gradient"
+  },
+  type: {
+    SOLID: "Solid",
+    GRADIENT: "Gradient",
+    PATTERN: "Pattern",
+    IMAGE: "Image"
+  },
+  colorContrast: {
+    LABEL: "Check color contrast",
+    BACKGROUND_COLOR: "Background color",
+    FOREGROUND_COLOR: "Foreground color",
+    VIEW_COLOR_VALUES: "View color values",
+    NOT_MEET_STANDARD: "Contrast standard not met",
+    CONTRAST_SETTINGS: "Contrast settings",
+    category: {
+      LABEL: "Category",
+      auto: {
+        TEXT: "Auto (normal text)",
+        GRAPHICS: "Auto (graphics)"
+      },
+      LARGE_TEXT: "Large text",
+      NORMAL_TEXT: "Normal text",
+      GRAPHICS: "Graphics"
+    },
+    level: {
+      LABEL: "Level",
+      AA: {
+        TEXT: "AA / Essential (4.5:1)",
+        GRAPHICS: "AA / Essential (3:1)"
+      },
+      AAA: {
+        TEXT: "AAA / Highest (7:1)",
+        LARGE_TEXT: "AAA / Highest (4.5:1)",
+        GRAPHICS: "AAA / Only for text"
+      }
+    }
+  },
+  colorNativePicker: {
+    PICK_COLOR: "Pick color",
+    ALERT: "Your browser does not support the EyeDropper API. Please use Chrome, Edge or Opera."
+  },
+  input: {
+    SOLID: "Add...",
+    ALPHA: "Alpha",
+    VARIABLE: "Select variable..."
+  },
+  libraries: {
+    LABEL: "Library color swatch select",
+    SWITCH_TO_GRID: "Switch to grid view",
+    SWITCH_TO_LIST: "Switch to list view",
+    ALL: "All Libraries"
+  },
+  colorPicker: {
+    TITLE: "Color Picker",
+    CUSTOM: "Custom",
+    NO_AVAILABLE: "No available paints type"
+  }
+};
+export {
+  translation
+};

package/dist/components/colors/src/context/colots-context.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ColorProfile } from '../types';
+interface ColorsContextType {
+    colorProfile: ColorProfile;
+    isWideGamutSupported: boolean;
+    setUserPreference: (profile: ColorProfile | null) => void;
+    userPreference: ColorProfile | null;
+}
+export declare const ColorsContext: import('react').Context<ColorsContextType>;
+export interface ColorsProviderProps {
+    children: ReactNode;
+    /** 初始用户偏好设置 */
+    defaultUserPreference?: ColorProfile | null;
+}
+/**
+ * 颜色配置 Provider - 提供广色域检测和用户偏好设置
+ */
+export declare function ColorsProvider({ children, defaultUserPreference }: ColorsProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 使用颜色配置的钩子 - 从 Context 中获取颜色配置信息
+ * @returns 颜色配置相关信息和操作方法
+ */
+export declare const useColors: () => ColorsContextType;
+export {};

package/dist/components/colors/src/context/colots-context.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useMemo, useCallback } from "react";
+const defaultContextValue = {
+  colorProfile: "srgb",
+  isWideGamutSupported: false,
+  userPreference: null,
+  setUserPreference: () => {
+  }
+};
+const ColorsContext = createContext(defaultContextValue);
+const checkDisplayP3Support = () => {
+  if (typeof window === "undefined") return false;
+  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 {
+    return false;
+  }
+};
+function ColorsProvider({ children, defaultUserPreference = null }) {
+  const [isWideGamutSupported, setIsWideGamutSupported] = useState(false);
+  const [userPreference, setUserPreference] = useState(defaultUserPreference);
+  useEffect(() => {
+    setIsWideGamutSupported(checkDisplayP3Support());
+  }, []);
+  const colorProfile = useMemo(() => {
+    if (userPreference) return userPreference;
+    return isWideGamutSupported ? "display-p3" : "srgb";
+  }, [userPreference, isWideGamutSupported]);
+  const handleSetUserPreference = useCallback((profile) => {
+    setUserPreference(profile);
+  }, []);
+  const value = useMemo(
+    () => ({
+      colorProfile,
+      isWideGamutSupported,
+      userPreference,
+      setUserPreference: handleSetUserPreference
+    }),
+    [colorProfile, isWideGamutSupported, userPreference, handleSetUserPreference]
+  );
+  return /* @__PURE__ */ jsx(ColorsContext.Provider, { value, children });
+}
+const useColors = () => {
+  const context = useContext(ColorsContext);
+  if (context === void 0) {
+    throw new Error("useColors must be used within a ColorsProvider");
+  }
+  return context;
+};
+export {
+  ColorsContext,
+  ColorsProvider,
+  useColors
+};

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

@@ -0,0 +1 @@
+export * from './colots-context';

package/dist/components/colors/src/fill-input/alpha-input.d.ts

@@ -0,0 +1,12 @@
+import { PressMoveProps } from '../../../../../../shared/src';
+export interface AlphaInputProps {
+    active?: boolean;
+    className?: string;
+    disabled?: boolean;
+    onChange?: (alpha: number) => void;
+    onPressEnd?: PressMoveProps["onPressEnd"];
+    onPressStart?: PressMoveProps["onPressStart"];
+    tooltipLabel?: string;
+    value?: number;
+}
+export declare const AlphaInput: import('react').ForwardRefExoticComponent<AlphaInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/colors/src/fill-input/alpha-input.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { NumericInput } from "../../../numeric-input/dist/index.js";
+import { Relative } from "@choiceform/icons-react";
+import { round } from "es-toolkit";
+import { forwardRef } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { alphaInputTv } from "./tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { translation } from "../contents/translation.js";
+const AlphaInput = forwardRef(
+  function IfAlphaInput(props, ref) {
+    const { value, onChange, disabled, active, className, tooltipLabel, ...rest } = props;
+    const handleChange = useEventCallback((value2) => {
+      if (typeof value2 === "number") {
+        onChange == null ? void 0 : onChange(value2 / 100);
+      }
+    });
+    const styles = alphaInputTv({
+      active,
+      disabled
+    });
+    return /* @__PURE__ */ jsx(
+      NumericInput,
+      {
+        tooltip: {
+          content: tooltipLabel ?? translation.input.ALPHA
+        },
+        ref,
+        classNames: {
+          container: tcx(styles.root(), className),
+          input: styles.input()
+        },
+        disabled,
+        max: 100,
+        min: 0,
+        onChange: handleChange,
+        value: round((value ?? 1) * 100, 0),
+        variant: "reset",
+        ...rest,
+        children: /* @__PURE__ */ jsx(NumericInput.Suffix, { className: styles.suffix(), children: /* @__PURE__ */ jsx(Relative, {}) })
+      }
+    );
+  }
+);
+AlphaInput.displayName = "AlphaInput";
+export {
+  AlphaInput
+};

package/dist/components/colors/src/fill-input/color-input.d.ts

@@ -0,0 +1,31 @@
+import { PressMoveProps } from '../../../../../../shared/src';
+import { RGB } from '../types/colors';
+export interface ColorInputProps {
+    active?: boolean;
+    alpha?: number;
+    alphaTooltipLabel?: string;
+    children?: React.ReactNode;
+    className?: string;
+    classNames?: {
+        alpha?: string;
+        container?: string;
+        hex?: string;
+        swatch?: string;
+        wrapper?: string;
+    };
+    color?: RGB;
+    disabled?: boolean;
+    features?: {
+        alpha?: boolean;
+    };
+    onAlphaChange?: (alpha: number) => void;
+    onAlphaChangeEnd?: PressMoveProps["onPressEnd"];
+    onAlphaChangeStart?: PressMoveProps["onPressStart"];
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onColorChange?: (color: RGB) => void;
+    onFocus?: () => void;
+    onPickerClick?: () => void;
+    placeholder?: string;
+    selected?: boolean;
+}
+export declare const ColorInput: import('react').ForwardRefExoticComponent<ColorInputProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/colors/src/fill-input/color-input.js

@@ -0,0 +1,115 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { AlphaInput } from "./alpha-input.js";
+import { fillInputTv } from "./tv.js";
+import { ColorSwatch } from "../color-swatch/color-swatch.js";
+import { HexInput } from "../hex-input/hex-input.js";
+import { translation } from "../contents/translation.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const ColorInput = forwardRef(
+  function ColorInput2(props, ref) {
+    const {
+      className,
+      classNames,
+      alpha,
+      alphaTooltipLabel,
+      color,
+      active,
+      disabled,
+      selected,
+      onAlphaChange,
+      onAlphaChangeEnd,
+      onAlphaChangeStart,
+      onClick,
+      onFocus,
+      onColorChange,
+      onPickerClick,
+      placeholder = translation.input.SOLID,
+      features = {
+        alpha: true
+      }
+    } = props;
+    const handleClick = useEventCallback((e) => {
+      e.stopPropagation();
+      onClick == null ? void 0 : onClick(e);
+    });
+    const handleSwatchMouseDown = useEventCallback((e) => {
+      e.stopPropagation();
+      onPickerClick == null ? void 0 : onPickerClick();
+    });
+    const handleLabelMouseDown = useEventCallback((e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      onPickerClick == null ? void 0 : onPickerClick();
+      onColorChange == null ? void 0 : onColorChange({ r: 250, g: 250, b: 250 });
+    });
+    const styles = fillInputTv({
+      type: "SOLID",
+      alpha: features.alpha,
+      selected,
+      active,
+      variantType: "VARIABLE",
+      empty: !color
+    });
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: tcx(styles.root(), classNames == null ? void 0 : classNames.container, className),
+        onClick: handleClick,
+        onMouseDown: (e) => {
+          e.stopPropagation();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.wrapper(), children: [
+            /* @__PURE__ */ jsx(
+              ColorSwatch,
+              {
+                className: tcx(styles.swatch(), classNames == null ? void 0 : classNames.swatch),
+                color,
+                alpha,
+                onMouseDown: handleSwatchMouseDown
+              }
+            ),
+            color ? /* @__PURE__ */ jsx(
+              HexInput,
+              {
+                className: tcx(styles.hex(), classNames == null ? void 0 : classNames.hex),
+                value: color,
+                onChange: onColorChange,
+                onAlphaChange,
+                disabled,
+                onFocus
+              }
+            ) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: tcx(styles.label(), "flex h-full w-full items-center pl-2"),
+                onMouseDown: handleLabelMouseDown,
+                children: placeholder
+              }
+            )
+          ] }),
+          features.alpha && /* @__PURE__ */ jsx(
+            AlphaInput,
+            {
+              className: tcx(styles.alpha(), classNames == null ? void 0 : classNames.alpha),
+              value: alpha,
+              onChange: onAlphaChange,
+              active,
+              disabled,
+              onPressEnd: onAlphaChangeEnd,
+              onPressStart: onAlphaChangeStart,
+              tooltipLabel: alphaTooltipLabel
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+ColorInput.displayName = "ColorInput";
+export {
+  ColorInput
+};

package/dist/components/colors/src/fill-input/gradient-item.d.ts

@@ -0,0 +1,25 @@
+import { GradientFillLabels, GradientPaint } from '../types/paint';
+export interface GradientItemProps {
+    active?: boolean;
+    alpha?: number;
+    className?: string;
+    classNames?: {
+        alpha?: string;
+        container?: string;
+        content?: string;
+        swatch?: string;
+        wrapper?: string;
+    };
+    disabled?: boolean;
+    features?: {
+        alpha?: boolean;
+    };
+    gradient?: GradientPaint;
+    labels?: GradientFillLabels;
+    onAlphaChange?: (alpha: number) => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onGradientChange?: (gradient: GradientPaint) => void;
+    onPickerClick?: () => void;
+    selected?: boolean;
+}
+export declare const GradientItem: import('react').ForwardRefExoticComponent<GradientItemProps & import('react').RefAttributes<HTMLDivElement>>;