import { jsx as _jsx } from "react/jsx-runtime";
const COL_CLASS = {
    1: 'grid-cols-1',
    2: 'grid-cols-2',
    3: 'grid-cols-3',
    4: 'grid-cols-4',
    5: 'grid-cols-5',
    6: 'grid-cols-6',
    7: 'grid-cols-7',
    8: 'grid-cols-8',
    9: 'grid-cols-9',
    10: 'grid-cols-10',
    11: 'grid-cols-11',
    12: 'grid-cols-12',
};
const BP_PREFIX = ['', 'sm:', 'md:', 'lg:', 'xl:', '2xl:'];
function columnsToClasses(columns) {
    if (typeof columns === 'number') {
        return COL_CLASS[columns] ?? 'grid-cols-1';
    }
    const order = ['base', 'sm', 'md', 'lg', 'xl', '2xl'];
    return order
        .map((bp, i) => {
        const n = columns[bp];
        if (!n)
            return '';
        const base = COL_CLASS[n] ?? 'grid-cols-1';
        return BP_PREFIX[i] + base;
    })
        .filter(Boolean)
        .join(' ');
}
/**
 * Responsive CSS grid primitive. Pass either an explicit `columns` count
 * (per-breakpoint or static) or set `autoFit` for a `repeat(auto-fit, …)`
 * tile grid. Both modes share the same `space` / `rowSpace` knobs so
 * usage is consistent across views.
 */
export function Grid({ columns, space = '4', rowSpace, as: Component = 'div', autoFit, minItemWidth = '16rem', className = '', style, children, ...rest }) {
    if (autoFit) {
        return (_jsx(Component, { className: ['grid', `gap-${space}`, rowSpace ? `gap-y-${rowSpace}` : '', className]
                .filter(Boolean)
                .join(' '), style: {
                gridTemplateColumns: `repeat(auto-fit, minmax(${minItemWidth}, 1fr))`,
                ...style,
            }, ...rest, children: children }));
    }
    const classes = [
        'grid',
        columnsToClasses(columns),
        `gap-${space}`,
        rowSpace ? `gap-y-${rowSpace}` : '',
        className,
    ]
        .filter(Boolean)
        .join(' ');
    return (_jsx(Component, { className: classes, style: style, ...rest, children: children }));
}
//# sourceMappingURL=Grid.js.map