'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Checkbox } from '../ui/checkbox.js';
import { Label } from '../ui/label.js';
import { CheckboxGroupItem } from '../ui/checkbox-group-item.js';
function CheckboxGroup({ label, description, parentAriaLabel, options, value, onValueChange, disabled, }) {
    const selectedCount = options.filter((o) => value[o.id]).length;
    const parentChecked = selectedCount === options.length;
    const parentIndeterminate = selectedCount > 0 && !parentChecked;
    const handleParentToggle = () => {
        const target = selectedCount < options.length;
        const next = {};
        for (const o of options) {
            next[o.id] = target;
        }
        onValueChange(next);
    };
    const handleItemChange = (id, checked) => {
        onValueChange({ ...value, [id]: checked });
    };
    const parentId = `${label.toLowerCase().replace(/\s+/g, '-')}-group`;
    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex cursor-pointer items-start gap-2", children: [_jsx(Checkbox, { id: parentId, className: "mt-0.75", checked: parentIndeterminate ? 'indeterminate' : parentChecked, onCheckedChange: handleParentToggle, disabled: disabled, "aria-label": parentAriaLabel ?? `${label} select all` }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(Label, { htmlFor: parentId, className: "cursor-pointer text-sm font-medium", children: label }), description ? (_jsx(Label, { htmlFor: parentId, className: "text-muted-foreground cursor-pointer text-xs font-normal", children: description })) : null] })] }), _jsx("div", { className: "flex flex-col gap-3 ps-6", children: options.map((option) => (_jsx(CheckboxGroupItem, { id: option.id, label: option.label, description: option.description, checked: value[option.id] ?? false, onCheckedChange: (checked) => handleItemChange(option.id, checked), disabled: disabled }, option.id))) })] }));
}
export { CheckboxGroup };
