@hitachivantara/uikit-react-core/dist/Radio/Radio.js

UI Kit Core React components.

import { setId } from "../utils/setId.js";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { isInvalid } from "../FormElement/utils.js";
import { HvFormElement } from "../FormElement/FormElement.js";
import { HvLabel } from "../FormElement/Label/Label.js";
import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
import { useControlled } from "../hooks/useControlled.js";
import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
import { useClasses } from "./Radio.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useCallback, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Radio/Radio.tsx
/**
A Radio Button lets users select a single option from a group.

Use it within a Radio Button Group—individual usage is discouraged, as React may not track the `checked` state reliably outside a group.
*/
var HvRadio = forwardRef(function HvRadio(props, ref) {
	const { classes: classesProp, className, id, name, value = "on", required, readOnly, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labelProps, labelPosition = "right", checked, defaultChecked = false, onChange, status = "standBy", statusMessage, "aria-errormessage": ariaErrorMessage, semantic, inputProps, onFocusVisible, onBlur, ...others } = useDefaultProps("HvRadio", props);
	const { classes, cx } = useClasses(classesProp);
	const elementId = useUniqueId(id);
	const [focusVisible, setFocusVisible] = useState(false);
	const onFocusVisibleCallback = useCallback((evt) => {
		setFocusVisible(true);
		onFocusVisible?.(evt);
	}, [onFocusVisible]);
	const onBlurCallback = useCallback((evt) => {
		setFocusVisible(false);
		onBlur?.(evt);
	}, [onBlur]);
	const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);
	const onLocalChange = useCallback((evt, newChecked) => {
		setIsChecked(newChecked);
		onChange?.(evt, newChecked, value);
	}, [
		onChange,
		setIsChecked,
		value
	]);
	const canShowError = ariaErrorMessage == null && status !== void 0 && statusMessage !== void 0;
	const hasLabel = label != null;
	const isStateInvalid = isInvalid(status);
	let errorMessageId;
	if (isStateInvalid) errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
	const radio = /* @__PURE__ */ jsx(HvBaseRadio, {
		ref,
		id: label ? setId(elementId, "input") : setId(id, "input"),
		name,
		className: cx(classes.radio, { [classes.invalidRadio]: isStateInvalid }),
		disabled,
		readOnly,
		onChange: onLocalChange,
		value,
		checked: isChecked,
		semantic,
		inputProps: {
			"aria-invalid": isStateInvalid ? true : void 0,
			"aria-errormessage": errorMessageId,
			"aria-label": ariaLabel,
			"aria-labelledby": ariaLabelledBy,
			"aria-describedby": ariaDescribedBy,
			...inputProps
		},
		onFocusVisible: onFocusVisibleCallback,
		onBlur: onBlurCallback,
		...others
	});
	return /* @__PURE__ */ jsxs(HvFormElement, {
		id,
		name,
		status: status || "standBy",
		disabled,
		required,
		readOnly,
		className: cx(classes.root, classes[labelPosition], className),
		children: [hasLabel ? /* @__PURE__ */ jsxs("div", {
			className: cx(classes.container, {
				[classes.focusVisible]: !!(focusVisible && label),
				[classes.semantic]: semantic,
				[classes.checked]: isChecked,
				[classes.invalidContainer]: isStateInvalid,
				[classes.disabled]: disabled
			}),
			children: [radio, /* @__PURE__ */ jsx(HvLabel, {
				noWrap: true,
				id: setId(elementId, "label"),
				htmlFor: setId(elementId, "input"),
				label,
				className: classes.label,
				...labelProps
			})]
		}) : radio, canShowError && /* @__PURE__ */ jsx(HvWarningText, {
			id: setId(elementId, "error"),
			children: statusMessage
		})]
	});
});
//#endregion
export { HvRadio };