import { jsxs as k, jsx as p } from "react/jsx-runtime";
import { useState as E, useEffect as b, useCallback as n, useMemo as h } from "react";
import { HEX_PATTERN as i, DEFAULT_COLOR_PALETTE as v } from "./constants/index.js";
import w from "./utils/normalisedHex.js";
import P from "./utils/isCssVar.js";
import T from "./utils/resolveCssVarToHex.js";
import g from "../box/Box.js";
import I from "./components/color-swatch-grid/ColorSwatchGrid.js";
import y from "./components/color-hex-input/ColorHexInput.js";
const A = ({ value: r, palette: c = v, onChange: s, header: l }) => {
  const [t, o] = E(() => r ? r.replace("#", "") : "");
  b(() => {
    o(r ? r.replace("#", "") : "");
  }, [r]);
  const m = n((e) => {
    const a = e.target.value.replace("#", "");
    o(a);
  }, []), d = n((e) => {
    const a = e.target.value.replace(/[^0-9a-fA-F]/g, "");
    o(a);
  }, []), f = n(
    (e) => {
      e.key === "Enter" && (e.preventDefault(), i.test(t) ? s(`#${t}`) : o(""));
    },
    [t, s]
  ), x = n(
    (e) => {
      o(e.replace("#", "")), s(e);
    },
    [s]
  ), u = i.test(t) ? `#${t}` : w(r), H = c.map((e) => P(e) && T(e) || e), C = h(() => r ?? "", [r]);
  return /* @__PURE__ */ k(g, { className: "flex flex-col gap-[var(--spacing-3)] p-[var(--spacing-4)] border border-[var(--base-border)] rounded-[var(--border-radius-md)]", children: [
    l,
    /* @__PURE__ */ p(I, { palette: H, activeColor: C, onSwatchClick: x }),
    /* @__PURE__ */ p(
      y,
      {
        previewHex: u,
        hexInput: t,
        onColorPickerInput: m,
        onHexChange: d,
        onHexKeyDown: f
      }
    )
  ] });
};
A.displayName = "ColorPicker";
export {
  A as default
};
//# sourceMappingURL=ColorPicker.js.map
