import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { forwardRef, useMemo } from 'react';
import { Root as Slot } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.js';

const GAPS = {
    'extra-small': 'var(--rs-space-2)',
    small: 'var(--rs-space-3)',
    medium: 'var(--rs-space-5)',
    large: 'var(--rs-space-9)',
    'extra-large': 'var(--rs-space-11)'
};
const Grid = forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows, columns, rows, gap, columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, inline = false, style = {}, asChild, ...props }, ref) => {
    const gridTemplateColumns = typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
    const gridTemplateRows = typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
    const gridTemplateAreas = useMemo(() => {
        if (Array.isArray(templateAreas)) {
            return templateAreas
                .map(area => `"${area}"`)
                .join(' ')
                .trim();
        }
        return templateAreas;
    }, [templateAreas]);
    const Comp = asChild ? Slot : 'div';
    return (jsxRuntimeExports.jsx(Comp, { ref: ref, style: {
            display: inline ? 'inline-grid' : 'grid',
            gridTemplateAreas,
            gridAutoFlow: autoFlow,
            gridAutoColumns: autoColumns,
            gridAutoRows: autoRows,
            gridTemplateColumns,
            gridTemplateRows,
            gap: gap && GAPS[gap],
            columnGap: columnGap && GAPS[columnGap],
            rowGap: rowGap && GAPS[rowGap],
            justifyItems,
            alignItems,
            justifyContent,
            alignContent,
            ...style
        }, ...props }));
});
Grid.displayName = 'Grid';

export { Grid };
//# sourceMappingURL=grid.js.map
