{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid",
  "title": "Grid",
  "description": "Grid from the Get IT Done design system.",
  "dependencies": [
    "clsx@^2.0.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/grid/Grid.tsx",
      "content": "import { clsx } from 'clsx';\nimport { cn } from '@/lib/utils';\nimport { GridItemProps, GridProps } from './grid.interface';\n\nconst extractClasses = (classes: { [key: string]: string }, iterable: {}) =>\n  Object.entries(iterable).map(([breakpoint, column]) => classes[`${breakpoint}-${column}`]);\n\nexport const Grid: React.FC<GridProps> = ({\n  className,\n  columns = { xs: 4, sm: 8, md: 16, lg: 16, xl: 16 },\n  style = {},\n  children,\n}: GridProps) => {\n  const gridClasses = {\n    'xs-1': 'grid-cols-1',\n    'xs-2': 'grid-cols-2',\n    'xs-3': 'grid-cols-3',\n    'xs-4': 'grid-cols-4',\n    'xs-5': 'grid-cols-5',\n    'xs-6': 'grid-cols-6',\n    'xs-7': 'grid-cols-7',\n    'xs-8': 'grid-cols-8',\n    'xs-9': 'grid-cols-9',\n    'xs-10': 'grid-cols-10',\n    'xs-11': 'grid-cols-11',\n    'xs-12': 'grid-cols-12',\n    'xs-13': 'grid-cols-13',\n    'xs-14': 'grid-cols-14',\n    'xs-15': 'grid-cols-15',\n    'xs-16': 'grid-cols-16',\n\n    'sm-1': 'sm:grid-cols-1',\n    'sm-2': 'sm:grid-cols-2',\n    'sm-3': 'sm:grid-cols-3',\n    'sm-4': 'sm:grid-cols-4',\n    'sm-5': 'sm:grid-cols-5',\n    'sm-6': 'sm:grid-cols-6',\n    'sm-7': 'sm:grid-cols-7',\n    'sm-8': 'sm:grid-cols-8',\n    'sm-9': 'sm:grid-cols-9',\n    'sm-10': 'sm:grid-cols-10',\n    'sm-11': 'sm:grid-cols-11',\n    'sm-12': 'sm:grid-cols-12',\n    'sm-13': 'sm:grid-cols-13',\n    'sm-14': 'sm:grid-cols-14',\n    'sm-15': 'sm:grid-cols-15',\n    'sm-16': 'sm:grid-cols-16',\n\n    'md-1': 'md:grid-cols-1',\n    'md-2': 'md:grid-cols-2',\n    'md-3': 'md:grid-cols-3',\n    'md-4': 'md:grid-cols-4',\n    'md-5': 'md:grid-cols-5',\n    'md-6': 'md:grid-cols-6',\n    'md-7': 'md:grid-cols-7',\n    'md-8': 'md:grid-cols-8',\n    'md-9': 'md:grid-cols-9',\n    'md-10': 'md:grid-cols-10',\n    'md-11': 'md:grid-cols-11',\n    'md-12': 'md:grid-cols-12',\n    'md-13': 'md:grid-cols-13',\n    'md-14': 'md:grid-cols-14',\n    'md-15': 'md:grid-cols-15',\n    'md-16': 'md:grid-cols-16',\n\n    'lg-1': 'lg:grid-cols-1',\n    'lg-2': 'lg:grid-cols-2',\n    'lg-3': 'lg:grid-cols-3',\n    'lg-4': 'lg:grid-cols-4',\n    'lg-5': 'lg:grid-cols-5',\n    'lg-6': 'lg:grid-cols-6',\n    'lg-7': 'lg:grid-cols-7',\n    'lg-8': 'lg:grid-cols-8',\n    'lg-9': 'lg:grid-cols-9',\n    'lg-10': 'lg:grid-cols-10',\n    'lg-11': 'lg:grid-cols-11',\n    'lg-12': 'lg:grid-cols-12',\n    'lg-13': 'lg:grid-cols-13',\n    'lg-14': 'lg:grid-cols-14',\n    'lg-15': 'lg:grid-cols-15',\n    'lg-16': 'lg:grid-cols-16',\n\n    'xl-1': 'xl:grid-cols-1',\n    'xl-2': 'xl:grid-cols-2',\n    'xl-3': 'xl:grid-cols-3',\n    'xl-4': 'xl:grid-cols-4',\n    'xl-5': 'xl:grid-cols-5',\n    'xl-6': 'xl:grid-cols-6',\n    'xl-7': 'xl:grid-cols-7',\n    'xl-8': 'xl:grid-cols-8',\n    'xl-9': 'xl:grid-cols-9',\n    'xl-10': 'xl:grid-cols-10',\n    'xl-11': 'xl:grid-cols-11',\n    'xl-12': 'xl:grid-cols-12',\n    'xl-13': 'xl:grid-cols-13',\n    'xl-14': 'xl:grid-cols-14',\n    'xl-15': 'xl:grid-cols-15',\n    'xl-16': 'xl:grid-cols-16',\n  };\n\n  return (\n    // cn (tailwind-merge) so a consumer class such as `gap-6` or `max-w-none` replaces the default instead of fighting it in the CSS order.\n    <div\n      className={cn(\n        'grid',\n        'gap-10',\n        'max-w-content',\n        'mx-auto',\n        'content-stretch',\n        extractClasses(gridClasses, columns),\n        className,\n      )}\n      data-testid=\"grid\"\n      style={style}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const GridItem: React.FC<GridItemProps> = ({ children, colSpan = { xs: 4, sm: 8, md: 16, lg: 16, xl: 16 } }) => {\n  const itemClasses = {\n    'xs-1': 'col-span-1',\n    'xs-2': 'col-span-2',\n    'xs-3': 'col-span-3',\n    'xs-4': 'col-span-4',\n    'xs-5': 'col-span-5',\n    'xs-6': 'col-span-6',\n    'xs-7': 'col-span-7',\n    'xs-8': 'col-span-8',\n    'xs-9': 'col-span-9',\n    'xs-10': 'col-span-10',\n    'xs-11': 'col-span-11',\n    'xs-12': 'col-span-12',\n    'xs-13': 'col-span-13',\n    'xs-14': 'col-span-14',\n    'xs-15': 'col-span-15',\n    'xs-16': 'col-span-16',\n\n    'sm-1': 'sm:col-span-1',\n    'sm-2': 'sm:col-span-2',\n    'sm-3': 'sm:col-span-3',\n    'sm-4': 'sm:col-span-4',\n    'sm-5': 'sm:col-span-5',\n    'sm-6': 'sm:col-span-6',\n    'sm-7': 'sm:col-span-7',\n    'sm-8': 'sm:col-span-8',\n    'sm-9': 'sm:col-span-9',\n    'sm-10': 'sm:col-span-10',\n    'sm-11': 'sm:col-span-11',\n    'sm-12': 'sm:col-span-12',\n    'sm-13': 'sm:col-span-13',\n    'sm-14': 'sm:col-span-14',\n    'sm-15': 'sm:col-span-15',\n    'sm-16': 'sm:col-span-16',\n\n    'md-1': 'md:col-span-1',\n    'md-2': 'md:col-span-2',\n    'md-3': 'md:col-span-3',\n    'md-4': 'md:col-span-4',\n    'md-5': 'md:col-span-5',\n    'md-6': 'md:col-span-6',\n    'md-7': 'md:col-span-7',\n    'md-8': 'md:col-span-8',\n    'md-9': 'md:col-span-9',\n    'md-10': 'md:col-span-10',\n    'md-11': 'md:col-span-11',\n    'md-12': 'md:col-span-12',\n    'md-13': 'md:col-span-13',\n    'md-14': 'md:col-span-14',\n    'md-15': 'md:col-span-15',\n    'md-16': 'md:col-span-16',\n\n    'lg-1': 'lg:col-span-1',\n    'lg-2': 'lg:col-span-2',\n    'lg-3': 'lg:col-span-3',\n    'lg-4': 'lg:col-span-4',\n    'lg-5': 'lg:col-span-5',\n    'lg-6': 'lg:col-span-6',\n    'lg-7': 'lg:col-span-7',\n    'lg-8': 'lg:col-span-8',\n    'lg-9': 'lg:col-span-9',\n    'lg-10': 'lg:col-span-10',\n    'lg-11': 'lg:col-span-11',\n    'lg-12': 'lg:col-span-12',\n    'lg-13': 'lg:col-span-13',\n    'lg-14': 'lg:col-span-14',\n    'lg-15': 'lg:col-span-15',\n    'lg-16': 'lg:col-span-16',\n\n    'xl-1': 'xl:col-span-1',\n    'xl-2': 'xl:col-span-2',\n    'xl-3': 'xl:col-span-3',\n    'xl-4': 'xl:col-span-4',\n    'xl-5': 'xl:col-span-5',\n    'xl-6': 'xl:col-span-6',\n    'xl-7': 'xl:col-span-7',\n    'xl-8': 'xl:col-span-8',\n    'xl-9': 'xl:col-span-9',\n    'xl-10': 'xl:col-span-10',\n    'xl-11': 'xl:col-span-11',\n    'xl-12': 'xl:col-span-12',\n    'xl-13': 'xl:col-span-13',\n    'xl-14': 'xl:col-span-14',\n    'xl-15': 'xl:col-span-15',\n    'xl-16': 'xl:col-span-16',\n  };\n\n  return <div className={`${clsx(extractClasses(itemClasses, colSpan))}`}>{children}</div>;\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/ui/grid/grid.interface.ts",
      "content": "import { ReactNode } from 'react';\n\nexport type GridColumn = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;\nexport type GridColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface GridProps {\n  columns?: {\n    [key in Breakpoint]?: GridColumn;\n  };\n  style?: React.CSSProperties;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport interface GridItemProps {\n  colSpan?: {\n    [key in Breakpoint]?: GridColSpan;\n  };\n  children?: ReactNode;\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/ui/grid/index.ts",
      "content": "export { Grid } from './Grid';\nexport type { GridProps, GridItemProps, GridColumn, Breakpoint } from './grid.interface';\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}