import { jsxs as c, jsx as r } from "react/jsx-runtime";
import p from "../../../box/Box.js";
import d from "../../../text/Text.js";
import m from "../../../button/Button.js";
import { c as e } from "../../../../index-BtlgVD4m.js";
const u = ({
  previewHex: o,
  colorInputRef: a,
  hexInput: n,
  onColorPickerInput: t,
  onHexChange: i,
  onHexApply: s,
  onHexKeyDown: l
}) => /* @__PURE__ */ c(p, { className: "flex items-center gap-[var(--spacing-2)] rounded-[var(--border-radius-md)] border border-[var(--base-border)] px-[var(--spacing-2)] py-[var(--spacing-1)]", children: [
  /* @__PURE__ */ r(
    "label",
    {
      htmlFor: "html-editor-color-picker",
      className: e(
        // Match the existing swatch dimensions and shape exactly.
        "h-[var(--spacing-5)] w-[var(--spacing-5)]",
        "border border-[var(--base-border)] shrink-0",
        "cursor-pointer",
        // Focus ring appears when the hidden input inside receives keyboard focus.
        "focus-within:ring-2 focus-within:ring-[var(--base-primary)]",
        "rounded-full"
      ),
      style: { backgroundColor: o },
      children: /* @__PURE__ */ r(
        "input",
        {
          id: "html-editor-color-picker",
          ref: a,
          type: "color",
          value: o,
          onChange: t,
          "aria-label": "Farbpicker öffnen",
          className: e(
            // Visually hide: keep element in flow but paint it invisible.
            "absolute opacity-0 pointer-events-none",
            "h-[var(--spacing-0)] w-[var(--spacing-0)]",
            // Focus ring is shown on the parent <label> via :focus-within.
            "focus:outline-none"
          )
        }
      )
    }
  ),
  /* @__PURE__ */ r(d, { type: "muted", children: "#" }),
  /* @__PURE__ */ r(
    "input",
    {
      type: "text",
      value: n,
      onChange: i,
      onKeyDown: l,
      maxLength: 6,
      placeholder: "000000",
      "aria-label": "Hex-Farbcode eingeben",
      className: e(
        "flex-1 min-w-0 bg-transparent",
        "text-[var(--typography-base-sizes-default-font-size)]",
        "text-[var(--base-muted-foreground)]",
        "placeholder-[var(--base-muted-foreground)]",
        "focus:outline-none"
      )
    }
  ),
  /* @__PURE__ */ r(m, { variant: "ghost", onClick: s, "aria-label": "Hex-Farbe anwenden", icon: "PlusCircle", iconPosition: "right", size: "iconSm" })
] });
u.displayName = "HtmlEditorHexColorInput";
export {
  u as default
};
//# sourceMappingURL=HtmlEditorHexColorInput.js.map
