import { jsx as _jsx } from "react/jsx-runtime";
const STACK_BELOW_CLASS = {
    sm: 'sm:grid',
    md: 'md:grid',
    lg: 'lg:grid',
    xl: 'xl:grid',
};
/**
 * Two-pane split layout (primary + sidebar/aside) that collapses to a
 * stacked layout below a configurable breakpoint. Use this for the
 * document editor (`<Split fraction="minmax(0, 1fr) 320px">`), settings
 * pages with a navigation rail, etc. — anywhere two panes need to live
 * side-by-side at desktop widths and stack on mobile.
 */
export function Split({ fraction = '2fr 1fr', space = '6', stackBelow = 'md', reverse, as: Component = 'div', className = '', style, children, ...rest }) {
    const stackClass = stackBelow === false ? 'grid' : `flex flex-col ${STACK_BELOW_CLASS[stackBelow]}`;
    const classes = [stackClass, `gap-${space}`, reverse ? 'flex-col-reverse' : '', className]
        .filter(Boolean)
        .join(' ');
    return (_jsx(Component, { className: classes, style: {
            ...(stackBelow === false
                ? { gridTemplateColumns: fraction }
                : { gridTemplateColumns: fraction }),
            ...style,
        }, ...rest, children: children }));
}
//# sourceMappingURL=Split.js.map