import { jsx } from "react/jsx-runtime";
import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-xVS3rMYS.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-WxFE7lQB.js";
/**
 * A simple color/gradient swatch.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.color] - The color to display.
 * @param {string} [props.gradient] - The gradient to display.
 * @param {string} [props.className] - Additional clsx to apply.
 * @param {string} [props.colorName] - The name of the color. Should be auto-generated for colors.
 * @param {boolean} [props.customGradient=false] - Set to `true` if using a custom gradient.
 *
 * @returns {JSX.Element} The ColorSwatch component.
 *
 * @example
 * <ColorSwatch color="#FF0000" />
 *
 * @example
 * <ColorSwatch gradient="linear-gradient(45deg, #FF0000, #00FF00)" />
 *
 * @preserve
 */
const ColorSwatch = (props) => {
  const { color: rawColor, gradient, className, colorName, customGradient = false } = props;
  const checkerPattern = "repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 0.75rem 0.75rem";
  let color;
  if (rawColor && !gradient && !customGradient) {
    try {
      if (rawColor === "transparent") {
        color = "rgba(0, 0, 0, 0)";
      } else {
        color = $799cddbef784668f$export$6e865ea70d7724f(rawColor);
      }
    } catch (error) {
      color = null;
    }
  }
  const backgroundGradient = gradient ? `${gradient}, ${checkerPattern}` : `linear-gradient(${color}, ${color}), ${checkerPattern}`;
  return /* @__PURE__ */ jsx(
    $251c695a52d94a8d$export$cae13e90592f246a,
    {
      ...props,
      style: {
        background: (color || gradient) && backgroundGradient
      },
      className: () => clsx("es:size-6 es:rounded-md es:border es:border-secondary-300 es:shadow-sm", !color && !gradient && !customGradient && "es:bg-white", className),
      colorName: !color && !gradient && !customGradient ? __("No color", "eightshift-ui-components") : colorName,
      color,
      children: !color && !gradient && !customGradient && /* @__PURE__ */ jsx("div", { className: "es:m-auto es:h-full es:w-px es:rotate-45 es:rounded-md es:bg-red-500" })
    }
  );
};
export {
  ColorSwatch
};
