@clubmed/trident-ui/ui/forms/radios/RadioGroup.js

Shared ClubMed React UI components

import { jsx as N } from "react/jsx-runtime";
import { useId as O, Children as V, isValidElement as W, cloneElement as y } from "react";
import { useValue as _ } from "../../hooks/useValue.js";
import { c as h } from "../../../chunks/clsx.js";
import { KEY as r } from "../../hooks/keyboard.constants.js";
function x(k) {
  const R = O(), {
    id: s = R,
    name: u = s,
    children: g,
    value: v,
    defaultValue: I,
    onChange: E,
    disabled: p,
    readOnly: c,
    tabIndex: b = 0,
    ...m
  } = k, { value: a, setValue: i } = _({
    name: u,
    initialValue: v,
    defaultValue: I,
    onChange: E
  }), A = (e, o) => {
    let n = o;
    const t = e.target.parentNode.querySelectorAll('[role="radio"]');
    if (e.key === r.ARROW_RIGHT || e.key === r.ARROW_DOWN)
      n = (o + 1) % t.length, t[n]?.focus();
    else if (e.key === r.ARROW_LEFT || e.key === r.ARROW_UP)
      n = (o - 1 + t.length) % t.length, t[n]?.focus();
    else if (e.key === r.SPACE || e.key === r.ENTER) {
      i(t[o].dataset.value);
      return;
    }
  };
  function d(e, o) {
    return a == null || a === "" ? b === o ? 0 : -1 : e ? 0 : -1;
  }
  return /* @__PURE__ */ N("div", { ...m, className: h("flex gap-12", m.className), role: "radiogroup", children: V.map(g, (e, o) => {
    if (!W(e))
      return e;
    const n = e.type.displayName, t = e.props.value, l = a === t;
    return n?.includes("Button") ? y(e, {
      color: l ? "black" : "white",
      ...e.props,
      value: void 0,
      role: "radio",
      name: u,
      component: "span",
      id: `${s}-${o}`,
      disabled: p,
      readOnly: c,
      tabIndex: d(l, o),
      "data-value": t,
      "aria-checked": a === t,
      onKeyDown: (f) => A(f, o),
      onClick() {
        i(t), e.props?.onClick?.(t);
      }
    }) : y(e, {
      ...e.props,
      name: u,
      id: `${s}-${o}`,
      disabled: p,
      readOnly: c,
      tabIndex: d(l, o),
      checked: l,
      onChange(f, C) {
        i(C);
      }
    });
  }) });
}
export {
  x as RadioGroup
};
//# sourceMappingURL=RadioGroup.js.map