import { jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { alignMap, calcSpacingPx, justifyMap } from "./core.js";
const Grid = ({ children, className, style, templateColumns, templateRows, templateAreas, autoFlow, autoColumns, autoRows, gap, rowGap, columnGap, alignItems, justifyItems, alignContent, justifyContent, placeItems, placeContent, w, h, maxW, minW, maxH, minH, overflow, overflowX, overflowY, position, p, pt, pb, pl, pr, px, py, m, mt, mb, ml, mr, mx, my, ...htmlProps })=>{
    const dynamicStyle = useMemo(()=>({
            display: 'grid',
            ...templateColumns && {
                gridTemplateColumns: templateColumns
            },
            ...templateRows && {
                gridTemplateRows: templateRows
            },
            ...templateAreas && {
                gridTemplateAreas: templateAreas
            },
            ...autoFlow && {
                gridAutoFlow: autoFlow
            },
            ...autoColumns && {
                gridAutoColumns: autoColumns
            },
            ...autoRows && {
                gridAutoRows: autoRows
            },
            ...void 0 !== gap && {
                gap: calcSpacingPx(gap)
            },
            ...void 0 !== rowGap && {
                rowGap: calcSpacingPx(rowGap)
            },
            ...void 0 !== columnGap && {
                columnGap: calcSpacingPx(columnGap)
            },
            ...alignItems && {
                alignItems: alignMap[alignItems]
            },
            ...justifyItems && {
                justifyItems: alignMap[justifyItems]
            },
            ...alignContent && {
                alignContent: alignMap[alignContent]
            },
            ...justifyContent && {
                justifyContent: justifyMap[justifyContent]
            },
            ...placeItems && {
                placeItems
            },
            ...placeContent && {
                placeContent
            },
            ...void 0 !== w && {
                width: calcSpacingPx(w)
            },
            ...void 0 !== h && {
                height: calcSpacingPx(h)
            },
            ...void 0 !== maxW && {
                maxWidth: calcSpacingPx(maxW)
            },
            ...void 0 !== minW && {
                minWidth: calcSpacingPx(minW)
            },
            ...void 0 !== maxH && {
                maxHeight: calcSpacingPx(maxH)
            },
            ...void 0 !== minH && {
                minHeight: calcSpacingPx(minH)
            },
            ...overflow && {
                overflow
            },
            ...overflowX && {
                overflowX
            },
            ...overflowY && {
                overflowY
            },
            ...position && {
                position
            },
            ...void 0 !== p && {
                padding: calcSpacingPx(p)
            },
            ...void 0 !== pt && {
                paddingTop: calcSpacingPx(pt)
            },
            ...void 0 !== pb && {
                paddingBottom: calcSpacingPx(pb)
            },
            ...void 0 !== pl && {
                paddingLeft: calcSpacingPx(pl)
            },
            ...void 0 !== pr && {
                paddingRight: calcSpacingPx(pr)
            },
            ...void 0 !== px && !pl && {
                paddingLeft: calcSpacingPx(px)
            },
            ...void 0 !== px && !pr && {
                paddingRight: calcSpacingPx(px)
            },
            ...void 0 !== py && !pt && {
                paddingTop: calcSpacingPx(py)
            },
            ...void 0 !== py && !pb && {
                paddingBottom: calcSpacingPx(py)
            },
            ...void 0 !== m && {
                margin: calcSpacingPx(m)
            },
            ...void 0 !== mt && {
                marginTop: calcSpacingPx(mt)
            },
            ...void 0 !== mb && {
                marginBottom: calcSpacingPx(mb)
            },
            ...void 0 !== ml && {
                marginLeft: calcSpacingPx(ml)
            },
            ...void 0 !== mr && {
                marginRight: calcSpacingPx(mr)
            },
            ...void 0 !== mx && !ml && {
                marginLeft: calcSpacingPx(mx)
            },
            ...void 0 !== mx && !mr && {
                marginRight: calcSpacingPx(mx)
            },
            ...void 0 !== my && !mt && {
                marginTop: calcSpacingPx(my)
            },
            ...void 0 !== my && !mb && {
                marginBottom: calcSpacingPx(my)
            },
            ...style
        }), [
        templateColumns,
        templateRows,
        templateAreas,
        autoFlow,
        autoColumns,
        autoRows,
        gap,
        rowGap,
        columnGap,
        alignItems,
        justifyItems,
        alignContent,
        justifyContent,
        placeItems,
        placeContent,
        w,
        h,
        maxW,
        minW,
        maxH,
        minH,
        overflow,
        overflowX,
        overflowY,
        position,
        p,
        pt,
        pb,
        pl,
        pr,
        px,
        py,
        m,
        mt,
        mb,
        ml,
        mr,
        mx,
        my,
        style
    ]);
    return /*#__PURE__*/ jsx("div", {
        className: className,
        style: dynamicStyle,
        ...htmlProps,
        children: children
    });
};
const SimpleGrid = ({ columns = 2, ...props })=>/*#__PURE__*/ jsx(Grid, {
        templateColumns: `repeat(${columns}, 1fr)`,
        ...props
    });
export { Grid, SimpleGrid };
