@choice-ui/react 1.7.6 → 1.7.7

package/dist/components/colors/src/fill-input/variable-item.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { fillInputTv } from "./tv.js";
+import { translation } from "../contents/translation.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { ColorSwatch } from "../color-swatch/color-swatch.js";
+const VariableItem = forwardRef(
+  function VariableItem2(props, ref) {
+    const {
+      className,
+      classNames,
+      libraries,
+      active,
+      disabled,
+      selected,
+      onClick,
+      onPickerClick,
+      label = translation.input.VARIABLE
+    } = props;
+    const handleContainerClick = useEventCallback((e) => {
+      e.stopPropagation();
+      onClick == null ? void 0 : onClick(e);
+    });
+    const handleWrapperClick = useEventCallback((e) => {
+      e.stopPropagation();
+      onPickerClick == null ? void 0 : onPickerClick();
+    });
+    const selectedVariable = useMemo(() => {
+      if (!libraries) return null;
+      if (libraries.type === "VARIABLE" && "value" in libraries.item) {
+        return libraries.item;
+      }
+      return null;
+    }, [libraries]);
+    const selectedStyle = useMemo(() => {
+      if (!libraries) return null;
+      if (libraries.type === "STYLE" && "fills" in libraries.item) {
+        return libraries.item;
+      }
+      return null;
+    }, [libraries]);
+    const color = useMemo(() => {
+      var _a;
+      if (!libraries) return { r: 250, g: 250, b: 250 };
+      if (libraries.type === "VARIABLE") {
+        return selectedVariable == null ? void 0 : selectedVariable.value;
+      }
+      const firstFill = (_a = selectedStyle == null ? void 0 : selectedStyle.fills) == null ? void 0 : _a[0];
+      if (firstFill && firstFill.type === "SOLID") {
+        return firstFill.color;
+      }
+      return null;
+    }, [libraries, selectedVariable, selectedStyle]);
+    const alpha = useMemo(() => {
+      var _a;
+      if (!libraries) return 1;
+      if (libraries.type === "VARIABLE") {
+        return (selectedVariable == null ? void 0 : selectedVariable.value).a ?? 1;
+      }
+      (_a = selectedStyle == null ? void 0 : selectedStyle.fills) == null ? void 0 : _a[0];
+      return 1;
+    }, [libraries, selectedVariable, selectedStyle]);
+    const styles = fillInputTv({
+      type: "VARIABLE",
+      variantType: libraries == null ? void 0 : libraries.type,
+      selected,
+      active,
+      disabled,
+      alpha: false,
+      empty: !libraries
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(styles.root(), classNames == null ? void 0 : classNames.container, className),
+        onClick: handleContainerClick,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.wrapper(),
+            onClick: handleWrapperClick,
+            children: [
+              /* @__PURE__ */ jsx(
+                ColorSwatch,
+                {
+                  className: styles.swatch(),
+                  color: color ?? void 0,
+                  alpha,
+                  type: libraries == null ? void 0 : libraries.type
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: tcx(styles.content(), classNames == null ? void 0 : classNames.content), children: /* @__PURE__ */ jsx("span", { className: styles.label(), children: (libraries == null ? void 0 : libraries.item.name) ?? label }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+VariableItem.displayName = "VariableItem";
+export {
+  VariableItem
+};

package/dist/components/colors/src/hex-input/hex-input.d.ts

@@ -0,0 +1,10 @@
+import { HTMLProps } from 'react';
+import { RGB } from '../types/colors';
+export interface HexInputProps extends Omit<HTMLProps<HTMLInputElement>, "onChange" | "onBlur" | "value"> {
+    onAlphaChange?: (alpha: number) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (value: RGB) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    value?: RGB;
+}
+export declare const HexInput: import('react').ForwardRefExoticComponent<Omit<HexInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/colors/src/hex-input/hex-input.js

@@ -0,0 +1,182 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useMemo, useEffect } from "react";
+import tinycolor from "tinycolor2";
+import { useEventCallback } from "usehooks-ts";
+import { useColorParser } from "../hooks/use-color-parser.js";
+import { hexInputTv } from "./tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
+const HexInput = forwardRef(function HexInput2(props, ref) {
+  const { className, value, onChange, onAlphaChange, onBlur, onFocus, disabled, ...rest } = props;
+  const inputRef = useRef(null);
+  const lastValidValue = useRef("");
+  const isComposing = useRef(false);
+  const [inputValue, setInputValue] = useState("");
+  const displayValue = useMemo(() => inputValue.replace("#", ""), [inputValue]);
+  const { parseColor } = useColorParser();
+  useEffect(() => {
+    if (!value) return;
+    const lastRgb = tinycolor(lastValidValue.current).toRgb();
+    if (lastValidValue.current && lastRgb.r === value.r && lastRgb.g === value.g && lastRgb.b === value.b) {
+      return;
+    }
+    const newHexValue = tinycolor({ r: value.r, g: value.g, b: value.b }).toHexString().toUpperCase();
+    if (newHexValue === lastValidValue.current) {
+      return;
+    }
+    setInputValue(newHexValue);
+    lastValidValue.current = newHexValue;
+  }, [value]);
+  const completeHexColor = (hex) => {
+    hex = hex.replace(/[#\s]/g, "").toLowerCase();
+    if (/^[0-9a-f]{6}$/.test(hex)) {
+      return `#${hex}`;
+    }
+    if (/^[0-9a-f]{1,6}$/.test(hex)) {
+      const pattern = findPattern(hex);
+      if (pattern) {
+        return `#${pattern}`;
+      }
+      const completed = smartComplete(hex);
+      return `#${completed}`;
+    }
+    return null;
+  };
+  const findPattern = (hex) => {
+    if (new Set(hex).size === 1) {
+      return hex[0].repeat(6);
+    }
+    const nums = hex.split("").map((c) => parseInt(c, 16));
+    const diff = nums[1] - nums[0];
+    let isSequence = true;
+    for (let i = 1; i < nums.length; i++) {
+      if (nums[i] - nums[i - 1] !== diff) {
+        isSequence = false;
+        break;
+      }
+    }
+    if (isSequence && hex.length >= 2) {
+      return `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[1]}${hex[1]}`;
+    }
+    if (hex.length >= 2) {
+      const isAlternating = hex.split("").every((c, i) => i % 2 === 0 ? c === hex[0] : c === hex[1]);
+      if (isAlternating) {
+        return hex.slice(0, 2).repeat(3);
+      }
+    }
+    return null;
+  };
+  const smartComplete = (hex) => {
+    if (hex.length === 1) {
+      return `${hex}${hex}${hex}${hex}${hex}${hex}`;
+    }
+    if (hex.length === 2) {
+      return hex.repeat(3);
+    }
+    if (hex.length === 3) {
+      return `${hex}${hex.split("").reverse().join("")}`;
+    }
+    return hex.padEnd(6, hex[hex.length - 1]);
+  };
+  const handleBlur = useEventCallback((e) => {
+    const currentValue = inputValue;
+    onBlur == null ? void 0 : onBlur(e);
+    if (currentValue === lastValidValue.current) {
+      return;
+    }
+    try {
+      const completedHex = completeHexColor(currentValue);
+      if (completedHex) {
+        const { color: color2, hasAlpha: hasAlpha2, alpha: alpha2 } = parseColor(completedHex);
+        if (color2) {
+          const hexValue = color2.hex().toUpperCase();
+          setInputValue(hexValue);
+          lastValidValue.current = hexValue;
+          const [r, g, b] = color2.rgb();
+          onChange == null ? void 0 : onChange({ r, g, b });
+          if (hasAlpha2) {
+            onAlphaChange == null ? void 0 : onAlphaChange(alpha2);
+          }
+          return;
+        }
+      }
+      const { color, hasAlpha, alpha } = parseColor(currentValue);
+      if (color) {
+        const hexValue = color.hex().toUpperCase();
+        setInputValue(hexValue);
+        lastValidValue.current = hexValue;
+        const [r, g, b] = color.rgb();
+        onChange == null ? void 0 : onChange({ r, g, b });
+        if (hasAlpha) {
+          onAlphaChange == null ? void 0 : onAlphaChange(alpha);
+        }
+      } else {
+        if (value) {
+          const hexValue = tinycolor({ r: value.r, g: value.g, b: value.b }).toHexString().toUpperCase();
+          setInputValue(hexValue);
+          lastValidValue.current = hexValue;
+        } else {
+          setInputValue("");
+          lastValidValue.current = "";
+        }
+      }
+    } catch {
+      if (value) {
+        const hexValue = tinycolor({ r: value.r, g: value.g, b: value.b }).toHexString().toUpperCase();
+        setInputValue(hexValue);
+        lastValidValue.current = hexValue;
+      } else {
+        setInputValue("");
+        lastValidValue.current = "";
+      }
+    }
+  });
+  const handleChange = useEventCallback((e) => {
+    setInputValue(e.target.value);
+  });
+  const handleCompositionStart = useEventCallback(() => {
+    isComposing.current = true;
+  });
+  const handleCompositionEnd = useEventCallback(() => {
+    isComposing.current = false;
+  });
+  const handleFocus = useEventCallback((e) => {
+    onFocus == null ? void 0 : onFocus(e);
+    e.target.select();
+  });
+  const handleKeyDown = useEventCallback((e) => {
+    var _a;
+    e.stopPropagation();
+    if (e.key === "Enter" && !isComposing.current) {
+      (_a = inputRef.current) == null ? void 0 : _a.blur();
+    }
+  });
+  const handleKeyUp = useEventCallback((e) => {
+    e.stopPropagation();
+  });
+  const styles = hexInputTv();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-1p-ignore": true,
+      ref: mergeRefs(ref, inputRef),
+      spellCheck: false,
+      autoComplete: "off",
+      className: tcx(styles, className),
+      value: displayValue,
+      onChange: handleChange,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      disabled,
+      ...rest
+    }
+  );
+});
+HexInput.displayName = "HexInput";
+export {
+  HexInput
+};

package/dist/components/colors/src/hex-input/index.d.ts

@@ -0,0 +1 @@
+export * from './hex-input';

package/dist/components/colors/src/hex-input/tv.d.ts

@@ -0,0 +1 @@
+export declare const hexInputTv: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/colors/src/hex-input/tv.js

@@ -0,0 +1,12 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const hexInputTv = tcv({
+  base: [
+    "h-6 min-w-0 px-2",
+    "disabled:text-disabled-foreground",
+    "cursor-default bg-transparent",
+    "appearance-none"
+  ]
+});
+export {
+  hexInputTv
+};

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

@@ -0,0 +1,10 @@
+export * from './use-color-contrast-recommendation';
+export * from './use-color-parser';
+export * from './use-color-picker';
+export * from './use-color-profile';
+export * from './use-cursor';
+export * from './use-features';
+export * from './use-image-filter-style';
+export * from './use-image-processor';
+export * from './use-paint-state';
+export * from './use-rgb-color-handler';

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

@@ -0,0 +1,36 @@
+import { BoundaryCalculationResult, ChannelFieldSpace, CheckColorContrastCategory, CheckColorContrastLevel, PaintState, RecommendedPoint, RGB } from '../types/colors';
+interface ColorContrastRecommendationOptions {
+    onColorChange?: (color: RGB, alpha: number, preserveHue?: number) => void;
+}
+interface ColorContrastRecommendationProps {
+    backgroundColor: RGB;
+    category?: CheckColorContrastCategory;
+    colorSpace: ChannelFieldSpace;
+    foregroundAlpha: number;
+    height: number;
+    hue: number;
+    level?: CheckColorContrastLevel;
+    options?: ColorContrastRecommendationOptions;
+    paintState: PaintState;
+    selectedElementType: "text" | "graphics";
+    width: number;
+}
+export declare const useColorContrastRecommendation: (props: ColorContrastRecommendationProps) => {
+    recommendedPoint: RecommendedPoint | null;
+    boundaryData: BoundaryCalculationResult | null;
+    isCalculating: boolean;
+    calculateRecommendedPoint: () => {
+        x: number;
+        y: number;
+        slX: number;
+        slY: number;
+    } | null;
+    updateRecommendedPoint: () => {
+        x: number;
+        y: number;
+        slX: number;
+        slY: number;
+    } | null;
+    applyRecommendedPoint: () => boolean;
+};
+export {};