@lobehub/ui/es/Checkbox/CheckboxGroup.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

import FlexBasic_default from "../Flex/FlexBasic.mjs";
import Checkbox_default from "./Checkbox.mjs";
import { jsx } from "react/jsx-runtime";
import useMergeState from "use-merge-value";

//#region src/Checkbox/CheckboxGroup.tsx
const CheckboxGroup = ({ defaultValue, disabled, onChange, options, textProps, value, shape, size, ...rest }) => {
	const [selectedValues, setSelectedValues] = useMergeState(defaultValue || [], {
		defaultValue,
		onChange,
		value
	});
	const handleChange = (optionValue, checked) => {
		setSelectedValues(checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue));
	};
	const normalizedOptions = options.map((option) => {
		if (typeof option === "string") return {
			disabled: false,
			label: option,
			value: option
		};
		return option;
	});
	return /* @__PURE__ */ jsx(FlexBasic_default, {
		align: "center",
		gap: 16,
		horizontal: true,
		wrap: "wrap",
		...rest,
		children: normalizedOptions.map((option) => {
			return /* @__PURE__ */ jsx(Checkbox_default, {
				checked: selectedValues.includes(option.value),
				disabled: disabled || option.disabled,
				onChange: (checked) => handleChange(option.value, checked),
				shape,
				size,
				textProps,
				children: option.label
			}, String(option.value));
		})
	});
};
CheckboxGroup.displayName = "CheckboxGroup";
var CheckboxGroup_default = CheckboxGroup;

//#endregion
export { CheckboxGroup_default as default };
//# sourceMappingURL=CheckboxGroup.mjs.map