@veracity/vui/dist/radio/radioGroup.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { RadioGroupProvider } from "./context.js";
import { useCallback, useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/radio/radioGroup.tsx
const RadioGroupBase = styled.divBox`
  display: flex;
  flex-direction: column;
  gap: 1;
`;
/**
* Organizes layout and display of multiple radio buttons as a row or column.
* Exposes some props to the children via context.
*/
const RadioGroup = vui((props, ref) => {
	const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } = props;
	const [isChecked, setIsChecked] = useState(value ?? defaultValue);
	const handleOnChange = useCallback((e) => {
		setIsChecked(e.target.value);
		onChange?.(e);
	}, [onChange]);
	const context = useMemo(() => filterUndefined({
		defaultValue,
		disabled,
		isChecked,
		name,
		onBlur,
		onChange: handleOnChange,
		onFocus,
		size,
		value,
		variant
	}), [
		defaultValue,
		disabled,
		handleOnChange,
		isChecked,
		name,
		onBlur,
		onFocus,
		size,
		value,
		variant
	]);
	const aliasedProps = filterUndefined({ flexDirection: isRow ? "row" : void 0 });
	return /* @__PURE__ */ jsx(RadioGroupProvider, {
		value: context,
		children: /* @__PURE__ */ jsx(RadioGroupBase, {
			className: cs("vui-radioGroup", className),
			ref,
			...aliasedProps,
			...rest
		})
	});
});
RadioGroup.displayName = "RadioGroup";

//#endregion
export { RadioGroup, RadioGroup as default, RadioGroupBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=radioGroup.js.map