@undp/design-system-react/dist/CheckboxGroup.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./checkbox-NiPsYgHo.js";
import n from "react";
import { jsx as r } from "react/jsx-runtime";
//#region src/components/ui/checkbox-group.tsx
var i = n.createContext({
	selectedValues: [],
	onValueChange: () => {},
	color: void 0,
	rounded: void 0,
	variant: void 0
}), a = n.forwardRef(({ className: t, children: a, value: o, rounded: s, variant: c, color: l, onValueChange: u, defaultValue: d, ...f }, p) => {
	let [m, h] = n.useState(d || []), g = o === void 0 ? m : o, _ = n.useCallback((e, t) => {
		let n = t ? [...g, e] : g.filter((t) => t !== e);
		o === void 0 && h(n), u?.(n);
	}, [
		g,
		o,
		u
	]), v = n.useMemo(() => ({
		selectedValues: g,
		color: l,
		variant: c,
		onValueChange: _
	}), [
		g,
		_,
		l,
		c
	]);
	return /* @__PURE__ */ r(i.Provider, {
		value: v,
		children: /* @__PURE__ */ r("div", {
			...f,
			className: e("flex flex-row flex-wrap gap-x-4 gap-y-2", t),
			ref: p,
			children: a
		})
	});
});
a.displayName = "CheckboxGroup";
var o = n.forwardRef(({ value: e, ...a }, o) => {
	let { selectedValues: s, onValueChange: c, color: l, rounded: u, variant: d } = n.useContext(i);
	return /* @__PURE__ */ r(t, {
		ref: o,
		...a,
		value: e,
		color: l,
		rounded: u,
		variant: d,
		checked: s.includes(e),
		onCheckedChange: (t) => c(e, t === !0)
	});
});
o.displayName = "CheckboxGroupItem";
//#endregion
export { a as CheckboxGroup, o as CheckboxGroupItem };

//# sourceMappingURL=CheckboxGroup.js.map