{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-bento",
  "title": "Grid Bento",
  "description": "Bento Grid, layout with multiple variants and displays.",
  "files": [
    {
      "path": "registry/blocks/grid-bento/index.tsx",
      "content": "'use client';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nexport const bentoGridVariants = cva(\n  'relative grid gap-4 [&>*:first-child]:origin-top-right [&>*:nth-child(3)]:origin-bottom-right [&>*:nth-child(4)]:origin-top-right',\n  {\n    variants: {\n      variant: {\n        default: `\n            grid-cols-8 grid-rows-[1fr_0.5fr_0.5fr_1fr]\n            [&>*:first-child]:col-span-8 md:[&>*:first-child]:col-span-6 [&>*:first-child]:row-span-3\n            [&>*:nth-child(2)]:col-span-2 md:[&>*:nth-child(2)]:row-span-2 [&>*:nth-child(2)]:hidden md:[&>*:nth-child(2)]:block\n            [&>*:nth-child(3)]:col-span-2 md:[&>*:nth-child(3)]:row-span-2 [&>*:nth-child(3)]:hidden md:[&>*:nth-child(3)]:block\n            [&>*:nth-child(4)]:col-span-4 md:[&>*:nth-child(4)]:col-span-3\n            [&>*:nth-child(5)]:col-span-4 md:[&>*:nth-child(5)]:col-span-3\n          `,\n        threeCells: `\n            grid-cols-2 grid-rows-2 [&>*:nth-child(4)]:hidden [&>*:nth-child(5)]:hidden\n            [&>*:first-child]:col-span-2\n        `,\n        fourCells: `\n          grid-cols-3 grid-rows-2\n          [&>*:first-child]:col-span-1 \n          [&>*:nth-child(2)]:col-span-2\n          [&>*:nth-child(3)]:col-span-2\n          [&>*:nth-child(5)]:hidden\n        `,\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport const GridBento = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof bentoGridVariants>\n>(({ variant, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(bentoGridVariants({ variant }), className)}\n      {...props}\n    />\n  );\n});\nGridBento.displayName = 'GridBento';\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/grid-bento.tsx"
    }
  ],
  "type": "registry:block"
}