@veracity/vui/dist/checkbox/checkboxGroup.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 { selectionControlGroupGap, selectionControlLabelSize, selectionControlStackGap } from "../selectionControl/theme.js";
import { selectionControlColors } from "../selectionControl/consts.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { T } from "../t/t.js";
import { CheckboxGroupProvider } from "./context.js";
import { useId, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/checkbox/checkboxGroup.tsx
const CheckboxGroupBase = styled.divBox`
  display: flex;
  flex-direction: column;
`;
/**
* Organizes layout and display of multiple checkboxes as a row or column.
* Exposes some props to the children via context. `label`/`helpText` render an optional group
* heading/description around the stack.
*/
const CheckboxGroup = vui((props, ref) => {
	const { children, className, defaultValue, disabled, gap, groupGap: groupGapProp, helpText, isRow, label, name, onBlur, onChange, onFocus, size, variant, ...rest } = props;
	const context = useMemo(() => filterUndefined({
		defaultValue,
		disabled,
		name,
		onBlur,
		onChange,
		onFocus,
		size,
		variant
	}), [
		defaultValue,
		disabled,
		name,
		onBlur,
		onChange,
		onFocus,
		size,
		variant
	]);
	const groupSize = size ?? "md";
	const aliasedProps = filterUndefined({
		flexDirection: isRow ? "row" : void 0,
		gap: gap ?? selectionControlStackGap[groupSize] ?? selectionControlStackGap.md
	});
	const generatedId = useId();
	const labelId = label ? `${generatedId}-label` : void 0;
	const helpTextId = helpText ? `${generatedId}-help-text` : void 0;
	if (!label && !helpText) return /* @__PURE__ */ jsx(CheckboxGroupProvider, {
		value: context,
		children: /* @__PURE__ */ jsx(CheckboxGroupBase, {
			className: cs("vui-checkboxGroup", className),
			ref,
			...aliasedProps,
			...rest,
			children
		})
	});
	return /* @__PURE__ */ jsx(CheckboxGroupProvider, {
		value: context,
		children: /* @__PURE__ */ jsxs(Box, {
			className: cs("vui-checkboxGroup", className),
			column: true,
			gap: groupGapProp ?? selectionControlGroupGap[groupSize] ?? selectionControlGroupGap.md,
			ref,
			...rest,
			children: [
				label && /* @__PURE__ */ jsx(T, {
					className: "vui-checkboxGroupLabel",
					color: selectionControlColors.label,
					fontWeight: "demi",
					id: labelId,
					size: selectionControlLabelSize[groupSize] ?? selectionControlLabelSize.md,
					children: label
				}),
				/* @__PURE__ */ jsx(CheckboxGroupBase, {
					"aria-describedby": helpTextId,
					"aria-labelledby": labelId,
					className: "vui-checkboxGroupStack",
					role: "group",
					...aliasedProps,
					children
				}),
				helpText && /* @__PURE__ */ jsx(T, {
					className: "vui-checkboxGroupHelpText",
					color: selectionControlColors.helper,
					id: helpTextId,
					size: "xs",
					children: helpText
				})
			]
		})
	});
});
CheckboxGroup.displayName = "CheckboxGroup";

//#endregion
export { CheckboxGroup, CheckboxGroup as default, CheckboxGroupBase };
globalThis.__vuiVersion__ = "5.4.0"
//# sourceMappingURL=checkboxGroup.js.map