@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
64 lines (62 loc) • 2.1 kB
JavaScript
import {
useRadioGroupContext
} from "./chunk-OHPDYPZ5.mjs";
import {
__objRest,
__spreadProps,
__spreadValues
} from "./chunk-YOSPWY5K.mjs";
// src/form/radio-button/radio-button.tsx
import { forwardRef } from "react";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { jsx, jsxs } from "react/jsx-runtime";
var isChecked = ({
checked,
selectedValue,
value
}) => {
if (typeof checked !== "undefined") return checked;
if (typeof selectedValue !== "undefined") return value === selectedValue;
return void 0;
};
var RadioButton = forwardRef(
(_a, ref) => {
var _b = _a, { checked, value, variant = "plain", title, children, className, size = "" } = _b, rest = __objRest(_b, ["checked", "value", "variant", "title", "children", "className", "size"]);
const _a2 = useRadioGroupContext(), { value: selectedValue, size: groupSize } = _a2, context = __objRest(_a2, ["value", "size"]);
const effectiveSize = size || groupSize;
return /* @__PURE__ */ jsxs(
"div",
{
className: clsx(
"hds-radio-button",
{
[`hds-radio-button--${variant}`]: variant === "bounding-box",
[`hds-radio-button--${effectiveSize}`]: effectiveSize === "small"
},
className
),
children: [
/* @__PURE__ */ jsxs("label", { children: [
/* @__PURE__ */ jsx(
"input",
__spreadProps(__spreadValues(__spreadValues({}, context), rest), {
checked: isChecked({ checked, selectedValue, value }),
value,
ref,
type: "radio"
})
),
/* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
title ? /* @__PURE__ */ jsx("p", { className: "hds-radio-button__title", children: title }) : children
] }),
title ? children : null
]
}
);
}
);
RadioButton.displayName = "RadioButton";
export {
RadioButton
};
//# sourceMappingURL=chunk-54HLJVAF.mjs.map