import { jsx as s, jsxs as w } from "react/jsx-runtime";
import { forwardRef as x, useState as y, useCallback as A } from "react";
import { cx as a } from "../../utils/classNames.js";
import { useArrowTheme as V } from "../../hooks/useArrowTheme.js";
const d = /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;
function L(r) {
  return d.lastIndex = 0, d.test(r);
}
function R(r) {
  const c = document.querySelector(`label[for="${r.target.id}"]`);
  c == null || c.scrollIntoView({ block: "nearest" });
}
const S = x(
  ({
    inverse: r,
    options: c,
    groupName: i,
    value: l,
    defaultValue: n,
    onChange: t,
    className: m,
    ...u
  }, f) => {
    const h = V(), b = r ?? h.inverse, [v, k] = y(n ?? ""), I = l !== void 0 ? l : v, N = A(
      (e) => {
        const o = e.target.id;
        l === void 0 && k(o), t == null || t(o, e);
      },
      [t, l]
    );
    return /* @__PURE__ */ s(
      "div",
      {
        ref: f,
        className: a("tdds-color-selector-container", m),
        ...u,
        children: /* @__PURE__ */ s(
          "fieldset",
          {
            className: "tdds-color-selector",
            ...b ? { "data-inverse": "true" } : {},
            children: c.map((e) => {
              const o = L(e.color) ? `url(${e.color})` : e.color;
              return /* @__PURE__ */ w("div", { children: [
                /* @__PURE__ */ s(
                  "input",
                  {
                    type: "radio",
                    className: a({
                      "force-checked": !!e.checked,
                      "force-focus": !!e.focused
                    }),
                    name: i,
                    id: e.id,
                    "aria-label": e.a11yLabel,
                    checked: I === e.id,
                    onChange: N,
                    onFocus: R
                  }
                ),
                /* @__PURE__ */ s(
                  "label",
                  {
                    className: a("tdds-option", {
                      "tdds-option--unavailable": e.isUnavailable,
                      "force-hover": !!e.hover
                    }),
                    htmlFor: e.id,
                    children: /* @__PURE__ */ s("span", { style: { background: o } })
                  }
                )
              ] }, e.id);
            })
          }
        )
      }
    );
  }
);
S.displayName = "ColorSelector";
export {
  S as ColorSelector
};
//# sourceMappingURL=ColorSelector.js.map
