welcome-ui/dist/RadioGroup.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as s } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { FieldGroup as j } from "./FieldGroup.mjs";
import { Radio as b } from "./Radio.mjs";
import { forwardRef as h } from "./System.mjs";
import n, { css as G } from "@xstyled/styled-components";
import { u as w, R as y } from "./radio-group-C2Cv9SMd.mjs";
const V = n.divBox(
  ({ flexDirection: r }) => G`
    display: flex;
    flex-direction: ${r};
    flex-wrap: wrap;
    gap: md;
  `
), k = h(
  ({
    dataTestId: r,
    flexDirection: d,
    id: o,
    label: t,
    maxWidth: m,
    name: i,
    onChange: a,
    options: f = [],
    renderOption: c = b,
    required: p,
    value: v,
    ...u
  }, x) => {
    const l = w({ defaultValue: v }), R = l.useState("value"), $ = (e) => {
      u.disabled || (l.setValue(e), a == null || a(e));
    };
    return /* @__PURE__ */ s.jsx(
      j,
      {
        as: y,
        dataTestId: r,
        label: t,
        mb: 0,
        ref: x,
        required: p,
        store: l,
        children: /* @__PURE__ */ s.jsx(V, { flexDirection: d, children: f.map((e) => /* @__PURE__ */ s.jsx(
          c,
          {
            checked: e.value === R,
            dataTestId: r ? `${r}-${e.value}` : void 0,
            hint: e.hint,
            id: `${o || i}.${e.value}`,
            label: e.label,
            maxWidth: m,
            name: i,
            onChange: () => $(e.value),
            value: e.value,
            ...u
          },
          e.value
        )) })
      }
    );
  }
);
k.displayName = "RadioGroup";
export {
  k as RadioGroup
};