@konstructio/ui/dist/components/Radio/Radio.js

A set of reusable and customizable React components built for konstruct.io

import { jsxs as n, jsx as s } from "react/jsx-runtime";
import { forwardRef as g, useId as j, useCallback as w } from "react";
import { cn as a } from "../../utils/index.js";
import { radioVariants as y, labelRadioVariants as t, wrapperRadioVariants as F } from "./Radio.variants.js";
const $ = g(
  ({
    checked: r = !1,
    className: p,
    defaultChecked: o,
    disabled: e,
    label: f,
    labelTextClassName: N,
    description: l,
    descriptionClassName: h,
    name: i,
    theme: x,
    value: m,
    wrapperClassName: R,
    onChange: c
  }, u) => {
    const d = `${j()}-${i}`, b = w(
      (V) => {
        c?.(V);
      },
      [c]
    );
    return /* @__PURE__ */ n(
      "label",
      {
        htmlFor: d,
        className: a(
          F({
            className: R,
            disabled: e || !1
          })
        ),
        "data-theme": x,
        children: [
          /* @__PURE__ */ s(
            "input",
            {
              ref: u,
              id: d,
              type: "radio",
              name: i,
              value: m,
              checked: r,
              defaultChecked: o,
              className: "hidden peer",
              onChange: () => b(m),
              disabled: e
            }
          ),
          /* @__PURE__ */ s(
            "span",
            {
              className: a(
                y({
                  className: p,
                  disabled: e || !1,
                  checked: r || o || !1
                })
              )
            }
          ),
          /* @__PURE__ */ n("div", { className: a(l && "flex flex-col gap-1"), children: [
            /* @__PURE__ */ s(
              "span",
              {
                className: a(
                  t({ className: N })
                ),
                children: f
              }
            ),
            l && /* @__PURE__ */ s(
              "span",
              {
                className: a(
                  t({ className: h })
                ),
                children: l
              }
            )
          ] })
        ]
      }
    );
  }
);
$.displayName = "KonstructRadio";
export {
  $ as Radio
};