import { Children } from "react";
import { View, useMedia, withStaticProperties } from "tamagui";
import { jsx } from "react/jsx-runtime";
function Container({
  children,
  gap = "$spacing.form_gap",
  ...props
}) {
  let rowSpan = 0,
    currentRow = [];
  const rows = [],
    media = useMedia();
  return Children.forEach(children, (child, index) => {
    let childSpan = media?.compact ? child?.props?.compact : media?.medium ? child?.props?.medium : media?.expanded ? child?.props?.exp : 12;
    childSpan || (childSpan = 12), childSpan && (rowSpan + childSpan > 12 && (12 - rowSpan > 0 && currentRow.push(/* @__PURE__ */jsx(View, {
      flex: 12 - rowSpan
    }, `filler-${index}`)), rows.push(currentRow), currentRow = [], rowSpan = 0), currentRow.push(child), rowSpan += childSpan);
  }), currentRow?.length > 0 && (rowSpan < 12 && currentRow.push(/* @__PURE__ */jsx(View, {
    flex: 12 - rowSpan
  }, "final-row")), rows.push(currentRow)), /* @__PURE__ */jsx(View, {
    display: "flex",
    flexDirection: "column",
    width: "100%",
    ...props,
    gap,
    children: rows.map((row, index) => /* @__PURE__ */jsx(View, {
      display: "flex",
      flexDirection: "row",
      gap,
      width: "100%",
      children: row
    }, `grid-row-${index}`))
  });
}
function Item({
  children,
  exp = 12,
  compact = 12,
  medium = 12,
  ...props
}) {
  const media = useMedia(),
    flex = media?.compact ? compact : media?.medium ? medium : (media?.expanded, exp);
  return /* @__PURE__ */jsx(View, {
    ...props,
    flex,
    width: 0,
    children
  });
}
const Grid = withStaticProperties(Container, {
  Item
});
export { Grid };
//# sourceMappingURL=Grid.mjs.map
