import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { useId as c } from "react";
import p from "../../../box/Box.js";
import d from "../../../text/Text.js";
import { c as r } from "../../../../index-BtlgVD4m.js";
const u = ({ previewHex: a, hexInput: n, onColorPickerInput: s, onHexChange: i, onHexKeyDown: t }) => {
  const o = c();
  return /* @__PURE__ */ l(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__ */ e(
      "label",
      {
        htmlFor: o,
        className: r(
          // Match the swatch dimensions and shape.
          "h-[var(--spacing-5)] w-[var(--spacing-5)]",
          "border border-[var(--base-border)] shrink-0",
          "cursor-pointer",
          // Focus ring appears when the hidden input receives keyboard focus.
          "focus-within:ring-1 focus-within:ring-[var(--base-highlight)]",
          "rounded-full"
        ),
        style: { backgroundColor: a },
        children: /* @__PURE__ */ e(
          "input",
          {
            id: o,
            type: "color",
            value: a,
            onChange: s,
            "aria-label": "Farbpicker öffnen",
            className: r(
              // 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:outline-none"
            )
          }
        )
      }
    ),
    /* @__PURE__ */ e(d, { type: "muted", children: "#" }),
    /* @__PURE__ */ e(
      "input",
      {
        type: "text",
        value: n,
        onChange: i,
        onKeyDown: t,
        maxLength: 6,
        placeholder: "000000",
        "aria-label": "Hex-Farbcode eingeben",
        className: r(
          "flex-1 min-w-0 bg-transparent",
          "text-[var(--typography-base-sizes-default-font-size)]",
          "text-[var(--base-foreground)]",
          "placeholder-[var(--base-muted-foreground)]",
          // Remove the default outline and replace with a visible focus ring (WCAG 2.4.7 — Focus Visible).
          "focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--base-primary)] focus-visible:rounded-sm"
        )
      }
    )
  ] });
};
u.displayName = "ColorHexInput";
export {
  u as default
};
//# sourceMappingURL=ColorHexInput.js.map
