{
  "name": "grid-cluster",
  "type": "registry:component",
  "description": "Grid layout cluster for showcasing items",
  "files": [
    {
      "path": "ui/GridCluster.astro",
      "type": "registry:component",
      "content": "---\ntype BreakpointKey = 'base' | 'sm' | 'md' | 'lg' | 'xl';\n\ninterface BreakpointCols {\n  base?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n}\n\nexport interface Props {\n  columns?: number | BreakpointCols;\n  gap?: string;\n  class?: string;\n  dense?: boolean;\n}\n\nconst {\n  columns = {\n    base: 1,\n    md: 2,\n    lg: 3,\n  } satisfies BreakpointCols,\n  gap = '1.5rem',\n  class: className = '',\n  dense = false,\n} = Astro.props as Props;\n\nconst gridSizeClassMap: Record<number, string | undefined> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n  4: 'grid-cols-4',\n  5: 'grid-cols-5',\n  6: 'grid-cols-6',\n};\n\nconst breakpointPrefix: Record<Exclude<BreakpointKey, 'base'>, string> = {\n  sm: 'sm:',\n  md: 'md:',\n  lg: 'lg:',\n  xl: 'xl:',\n};\n\nconst buildGridClasses = (cols: number | BreakpointCols) => {\n  if (typeof cols === 'number') {\n    return gridSizeClassMap[cols] ?? '';\n  }\n\n  const entries = Object.entries(cols) as Array<[BreakpointKey, number]>;\n\n  return entries\n    .filter(([, count]) => typeof count === 'number' && count > 0)\n    .map(([breakpoint, count]) => {\n      const baseClass = gridSizeClassMap[count];\n      if (!baseClass) return '';\n      const prefix = breakpoint === 'base' ? '' : breakpointPrefix[breakpoint];\n      return `${prefix}${baseClass}`;\n    })\n    .filter(Boolean)\n    .join(' ');\n};\n\nconst columnClasses = buildGridClasses(columns);\n\nconst inlineFallback =\n  typeof columns === 'number'\n    ? `grid-template-columns: repeat(${columns}, minmax(0, 1fr));`\n    : columns.base && !gridSizeClassMap[columns.base]\n      ? `grid-template-columns: repeat(${columns.base}, minmax(0, 1fr));`\n      : '';\n---\n\n<div\n  class={`grid grid-cluster ${columnClasses} ${className}`}\n  data-grid-cluster\n  data-grid-dense={dense ? \"true\" : undefined}\n  style={`gap: ${gap}; ${inlineFallback}`}\n>\n  <slot />\n</div>\n\n<style is:global>\n  .grid-cluster[data-grid-cluster] {\n    position: relative;\n  }\n\n  .grid-cluster[data-grid-cluster][data-grid-dense=\"true\"] {\n    grid-auto-flow: dense;\n  }\n\n  .grid-cluster[data-grid-cluster] > *[data-grid-col-span=\"2\"] {\n    grid-column: span 2 / span 2;\n  }\n\n  .grid-cluster[data-grid-cluster] > *[data-grid-col-span=\"3\"] {\n    grid-column: span 3 / span 3;\n  }\n\n  .grid-cluster[data-grid-cluster] > *[data-grid-col-span=\"4\"] {\n    grid-column: span 4 / span 4;\n  }\n\n  .grid-cluster[data-grid-cluster] > *[data-grid-row-span=\"2\"] {\n    grid-row: span 2 / span 2;\n  }\n\n  .grid-cluster[data-grid-cluster] > *[data-grid-row-span=\"3\"] {\n    grid-row: span 3 / span 3;\n  }\n\n  .grid-cluster[data-grid-cluster] > *[data-grid-row-span=\"4\"] {\n    grid-row: span 4 / span 4;\n  }\n\n  @media (min-width: 640px) {\n    .grid-cluster[data-grid-cluster] > *[data-grid-col-span-sm=\"2\"] {\n      grid-column: span 2 / span 2;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-sm=\"2\"] {\n      grid-row: span 2 / span 2;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-sm=\"3\"] {\n      grid-row: span 3 / span 3;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-sm=\"4\"] {\n      grid-row: span 4 / span 4;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .grid-cluster[data-grid-cluster] > *[data-grid-col-span-md=\"2\"] {\n      grid-column: span 2 / span 2;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-md=\"2\"] {\n      grid-row: span 2 / span 2;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-md=\"3\"] {\n      grid-row: span 3 / span 3;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-md=\"4\"] {\n      grid-row: span 4 / span 4;\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .grid-cluster[data-grid-cluster] > *[data-grid-col-span-lg=\"2\"] {\n      grid-column: span 2 / span 2;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-lg=\"2\"] {\n      grid-row: span 2 / span 2;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-col-span-lg=\"3\"] {\n      grid-column: span 3 / span 3;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-col-span-lg=\"4\"] {\n      grid-column: span 4 / span 4;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-lg=\"3\"] {\n      grid-row: span 3 / span 3;\n    }\n\n    .grid-cluster[data-grid-cluster] > *[data-grid-row-span-lg=\"4\"] {\n      grid-row: span 4 / span 4;\n    }\n  }\n</style>\n"
    }
  ],
  "category": "ui"
}