{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/grid/Grid.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\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: 4 }`.\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.\n  export type ColIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n  export type Cols = ColIndex | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', ColIndex>>\n  export type GapToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16\n\n  export interface GridProps extends HTMLAttributes<HTMLDivElement> {\n    cols?: Cols\n    gap?: GapToken\n    ref?: HTMLDivElement | null\n  }\n\n  const 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  }\n  const 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  }\n  const 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  }\n  const 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  }\n  const 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  }\n  const 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</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, cols = 1, gap = 4, children, ref = $bindable(null), ...restProps }: GridProps = $props()\n\n  const colsClass = $derived.by(() => {\n    const c = 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\n  const gapClass = $derived(GAP[gap])\n</script>\n\n<div bind:this={ref} data-uipkge data-slot=\"grid\" class={cn('grid', colsClass, gapClass, className)} {...restProps}>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/grid/Grid.svelte"
    },
    {
      "path": "packages/registry-svelte/components/grid/index.ts",
      "content": "export { default as Grid, type ColIndex, type Cols, type GapToken, type GridProps } from './Grid.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/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"
  ]
}