'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
export function GroupField({ label, children, defaultOpen = true }) {
    const [open, setOpen] = useState(defaultOpen);
    return (_jsxs("div", { className: "rounded-md border border-[var(--border)]", children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), className: "flex w-full items-center justify-between px-4 py-3 text-sm font-medium hover:bg-[var(--accent)]", children: [_jsx("span", { children: label }), _jsx("svg", { className: `h-4 w-4 text-[var(--muted-foreground)] transition-transform ${open ? 'rotate-180' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx("div", { className: "border-t border-[var(--border)] p-4", children: children ?? _jsx("p", { className: "text-sm text-[var(--muted-foreground)]", children: "Group fields area" }) }))] }));
}
//# sourceMappingURL=GroupField.js.map