@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
34 lines (33 loc) • 2.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioGroup = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("./RadioGroup.css");
const Radio_1 = require("../Radio");
const RadioGroup = ({ name, label, helperText, options, value, defaultValue, disabled = false, error = false, onChange, className = '', id, ...rest }) => {
const reactId = (0, react_1.useId)();
const groupId = id !== null && id !== void 0 ? id : `ds-radiogroup-${reactId}`;
const labelId = label ? `${groupId}-label` : undefined;
const helperId = helperText ? `${groupId}-helper` : undefined;
const isControlled = value !== undefined;
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
const selectedValue = isControlled ? value : internalValue;
const rootClassName = [
'ds-radiogroup',
error && 'ds-radiogroup--error',
disabled && 'ds-radiogroup--disabled',
className,
]
.filter(Boolean)
.join(' ');
const handleChange = (optionValue) => (event) => {
if (!isControlled) {
setInternalValue(optionValue);
}
onChange === null || onChange === void 0 ? void 0 : onChange(optionValue, event);
};
const groupName = name !== null && name !== void 0 ? name : groupId;
return ((0, jsx_runtime_1.jsxs)("div", { id: groupId, className: rootClassName, ...rest, children: [label && ((0, jsx_runtime_1.jsx)("div", { id: labelId, className: "ds-radiogroup__label", children: label })), (0, jsx_runtime_1.jsx)("div", { className: "ds-radiogroup__options", role: "radiogroup", "aria-labelledby": labelId, "aria-describedby": helperId, "aria-invalid": error || undefined, children: options.map((option) => ((0, jsx_runtime_1.jsx)(Radio_1.Radio, { name: groupName, label: option.label, description: option.description, disabled: disabled || option.disabled, checked: selectedValue === option.value, onChange: handleChange(option.value) }, option.value))) }), helperText && ((0, jsx_runtime_1.jsx)("div", { id: helperId, className: "ds-radiogroup__helper", children: helperText }))] }));
};
exports.RadioGroup = RadioGroup;