{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/grid/Grid.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\n// Responsive CSS-grid container. Pass an integer for fixed column count, or\n// a breakpoint map for responsive layouts: `{ base: 1, sm: 2, lg: 3 }`.\n//\n// Examples:\n//   <Grid :cols=\"3\" :gap=\"4\">...</Grid>\n//   <Grid :cols=\"{ base: 1, sm: 2, lg: 4 }\" :gap=\"6\">...</Grid>\n//\n// Tailwind v4's content scanner cannot see classnames built from\n// `grid-cols-${n}` template strings, so we map each supported value\n// to a complete class string. The scanner sees the literal classes\n// and emits them in the consumer's production CSS.\ntype ColIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\ntype Cols = ColIndex | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', ColIndex>>\ntype GapToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\nconst COLS_BASE: Record<ColIndex, string> = {\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  7: 'grid-cols-7',\n  8: 'grid-cols-8',\n  9: 'grid-cols-9',\n  10: 'grid-cols-10',\n  11: 'grid-cols-11',\n  12: 'grid-cols-12',\n}\nconst COLS_SM: Record<ColIndex, string> = {\n  1: 'sm:grid-cols-1',\n  2: 'sm:grid-cols-2',\n  3: 'sm:grid-cols-3',\n  4: 'sm:grid-cols-4',\n  5: 'sm:grid-cols-5',\n  6: 'sm:grid-cols-6',\n  7: 'sm:grid-cols-7',\n  8: 'sm:grid-cols-8',\n  9: 'sm:grid-cols-9',\n  10: 'sm:grid-cols-10',\n  11: 'sm:grid-cols-11',\n  12: 'sm:grid-cols-12',\n}\nconst COLS_MD: Record<ColIndex, string> = {\n  1: 'md:grid-cols-1',\n  2: 'md:grid-cols-2',\n  3: 'md:grid-cols-3',\n  4: 'md:grid-cols-4',\n  5: 'md:grid-cols-5',\n  6: 'md:grid-cols-6',\n  7: 'md:grid-cols-7',\n  8: 'md:grid-cols-8',\n  9: 'md:grid-cols-9',\n  10: 'md:grid-cols-10',\n  11: 'md:grid-cols-11',\n  12: 'md:grid-cols-12',\n}\nconst COLS_LG: Record<ColIndex, string> = {\n  1: 'lg:grid-cols-1',\n  2: 'lg:grid-cols-2',\n  3: 'lg:grid-cols-3',\n  4: 'lg:grid-cols-4',\n  5: 'lg:grid-cols-5',\n  6: 'lg:grid-cols-6',\n  7: 'lg:grid-cols-7',\n  8: 'lg:grid-cols-8',\n  9: 'lg:grid-cols-9',\n  10: 'lg:grid-cols-10',\n  11: 'lg:grid-cols-11',\n  12: 'lg:grid-cols-12',\n}\nconst COLS_XL: Record<ColIndex, string> = {\n  1: 'xl:grid-cols-1',\n  2: 'xl:grid-cols-2',\n  3: 'xl:grid-cols-3',\n  4: 'xl:grid-cols-4',\n  5: 'xl:grid-cols-5',\n  6: 'xl:grid-cols-6',\n  7: 'xl:grid-cols-7',\n  8: 'xl:grid-cols-8',\n  9: 'xl:grid-cols-9',\n  10: 'xl:grid-cols-10',\n  11: 'xl:grid-cols-11',\n  12: 'xl:grid-cols-12',\n}\nconst GAP: Record<GapToken, string> = {\n  0: 'gap-0',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3',\n  4: 'gap-4',\n  5: 'gap-5',\n  6: 'gap-6',\n  8: 'gap-8',\n  10: 'gap-10',\n  12: 'gap-12',\n  16: 'gap-16',\n}\n\nconst props = withDefaults(\n  defineProps<{\n    cols?: Cols\n    gap?: GapToken\n    class?: HTMLAttributes['class']\n  }>(),\n  {\n    cols: 1,\n    gap: 4,\n  },\n)\n\nconst colsClass = computed(() => {\n  const c = props.cols\n  if (typeof c === 'number') return COLS_BASE[c]\n  return [\n    c.base != null ? COLS_BASE[c.base] : '',\n    c.sm != null ? COLS_SM[c.sm] : '',\n    c.md != null ? COLS_MD[c.md] : '',\n    c.lg != null ? COLS_LG[c.lg] : '',\n    c.xl != null ? COLS_XL[c.xl] : '',\n  ]\n    .filter(Boolean)\n    .join(' ')\n})\n\nconst gapClass = computed(() => GAP[props.gap])\n</script>\n\n<template>\n  <div data-uipkge data-slot=\"grid\" :class=\"cn('grid', colsClass, gapClass, props.class)\">\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/grid/Grid.vue"
    },
    {
      "path": "packages/registry-vue/components/grid/index.ts",
      "content": "export { default as Grid } from './Grid.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/grid/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Responsive CSS grid container with `cols`, `gap`, and breakpoint props. A small but useful primitive for laying out card grids, KPI tiles, and form sections without writing repetitive Tailwind classes.",
  "categories": [
    "layout"
  ]
}