import g, { useId as $ } from "react";
import { c as k } from "../../index-BtlgVD4m.js";
import { breakpointsAliases as x } from "./types/ResponsiveProp.js";
import { directions as i } from "./types/Direction.js";
import { justifyContent as I } from "./types/Justify.js";
import { itemAligns as v } from "./types/ItemAlign.js";
const E = ({ id: r, as: s = "div", itemAlign: o, justify: c, direction: m = "column", spacing: n = "1", responsive: e, children: p, isWrap: f }) => {
  const l = $(), d = `stack-${r || l.replace(/:/g, "")}`, u = k(
    "flex",
    i[m],
    o && v[o],
    c && I[c],
    n && `gap-[var(--spacing-${n})]`,
    f && "flex-wrap",
    e && [
      // Ensure specific order: sm > md > lg > xl > 2xl
      ...x.flatMap((a) => {
        const t = e[a];
        return t ? [
          ...t.direction ? [`${a}:${i[t.direction]}`] : [],
          ...t.spacing ? [`${a}:gap-[var(--spacing-${t.spacing})]`] : []
        ] : [];
      })
    ]
  );
  return g.createElement(
    s,
    {
      className: u,
      id: r,
      "data-stack": d
    },
    p
  );
};
export {
  E as default
};
//# sourceMappingURL=Stack.js.map
