import { cva } from 'class-variance-authority';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx } from 'react/jsx-runtime';

// src/primitives/grid/grid.tsx
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/primitives/_shared/layout-variants.ts
var gapVariants = {
  xs: "gap-[var(--gap-xs,0.25rem)]",
  sm: "gap-[var(--gap-sm,0.5rem)]",
  md: "gap-[var(--gap-md,1rem)]",
  lg: "gap-[var(--gap-lg,1.5rem)]",
  xl: "gap-[var(--gap-xl,2rem)]"
};
var flexAlignVariants = {
  start: "items-start",
  center: "items-center",
  end: "items-end",
  stretch: "items-stretch"
};
var gridVariants = cva("grid", {
  variants: {
    cols: {
      1: "grid-cols-1",
      2: "grid-cols-2",
      3: "grid-cols-3",
      4: "grid-cols-4",
      6: "grid-cols-6",
      "auto-fit": ""
    },
    gap: gapVariants,
    align: flexAlignVariants
  },
  defaultVariants: {
    cols: 3,
    gap: "md",
    align: "stretch"
  }
});
function Grid({ className, cols, gap, align, minColWidth = "16rem", style, ...props }) {
  const inlineStyle = cols === "auto-fit" ? { gridTemplateColumns: `repeat(auto-fit, minmax(${minColWidth}, 1fr))`, ...style } : style;
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn(gridVariants({ cols, gap, align }), className),
      style: inlineStyle,
      ...props
    }
  );
}

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