{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grids-01",
  "title": "Bento grids 01",
  "description": "Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.",
  "dependencies": [
    "react-wrap-balancer"
  ],
  "registryDependencies": [
    "@flx/cta"
  ],
  "files": [
    {
      "path": "registry/blocks/bento-grids/bento-grids-01/bento-grids-01.tsx",
      "content": "import type { CtaProps } from '../../shared/cta'\nimport { Cta } from '../../shared/cta'\nimport { cn } from '@/lib/utils'\n\nexport type PrimaryItemMedia = {\n  src: string\n  title: string\n}\n\nexport type PrimaryItem = {\n  title: string\n  description: string\n  cta: CtaProps\n  media: PrimaryItemMedia\n}\n\nexport type GridItem = {\n  title: string\n  description: string\n  media: PrimaryItemMedia\n}\n\nexport interface BentoGrids01Props {\n  className?: string\n  primary: PrimaryItem\n  items: GridItem[]\n}\n\nexport function BentoGrids01({\n  className,\n  primary,\n  items,\n}: Readonly<BentoGrids01Props>) {\n  return (\n    <section className=\"w-full\">\n      <div className=\"mx-auto w-full max-w-6xl px-6 py-12 sm:py-16\">\n        <div\n          className={cn('grid grid-cols-1 gap-6 md:grid-cols-3', className)}\n          aria-label=\"Bento grids 01\"\n        >\n          <article className=\"bg-muted/50 col-span-1 overflow-hidden rounded-md p-4 md:col-span-2\">\n            <div className=\"grid h-full grid-cols-1 items-stretch gap-6 md:grid-cols-2\">\n              <div className=\"flex flex-col justify-between gap-6\">\n                <div className=\"space-y-3\">\n                  <h2 className=\"text-lg font-semibold tracking-tight md:text-xl\">\n                    {primary.title}\n                  </h2>\n                  <p className=\"text-muted-foreground text-sm whitespace-pre-line\">\n                    {primary.description}\n                  </p>\n                </div>\n\n                <div className=\"flex\">\n                  <Cta cta={{ ...primary.cta, variant: 'outline' }} />\n                </div>\n              </div>\n\n              <div className=\"bg-muted relative min-h-64 w-full overflow-hidden rounded-md md:min-h-0\">\n                <img\n                  src={primary.media.src}\n                  alt={primary.media.title}\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                  className=\"absolute inset-0 size-full object-cover\"\n                />\n              </div>\n            </div>\n          </article>\n\n          {items.map((item) => (\n            <article\n              key={`${item.title}-${item.media.src}`}\n              className=\"bg-muted/50 col-span-1 overflow-hidden rounded-md p-4\"\n            >\n              <div className=\"flex h-full flex-col gap-6\">\n                <div className=\"bg-muted relative aspect-[4/3] overflow-hidden rounded-md\">\n                  <img\n                    src={item.media.src}\n                    alt={item.media.title}\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                    className=\"absolute inset-0 size-full object-cover\"\n                  />\n                </div>\n                <div className=\"space-y-1\">\n                  <h3 className=\"text-base font-medium\">{item.title}</h3>\n                  <p className=\"text-muted-foreground text-sm whitespace-pre-line\">\n                    {item.description}\n                  </p>\n                </div>\n              </div>\n            </article>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/bento-grids/bento-grids-01/bento-grids-01.tsx"
    },
    {
      "path": "registry/blocks/bento-grids/bento-grids-01/bento-grids-01-example.tsx",
      "content": "import { BentoGrids01, type BentoGrids01Props } from './bento-grids-01'\n\nexport const values = {\n  primary: {\n    title: 'Build bento sections in minutes',\n    description:\n      'Create a bold primary feature with a CTA and media, then follow it with supporting image cards.',\n    cta: {\n      ctaEnabled: true,\n      text: 'Explore blocks',\n      link: '',\n      variant: 'default' as const,\n      size: 'sm' as const,\n    },\n    media: {\n      title: 'Design',\n      src: 'https://images.unsplash.com/photo-1695152560286-b09a744834e1?q=80&w=1133&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n  },\n  items: [\n    {\n      title: 'Dynamic cards',\n      description: 'Swap images and copy without breaking layout or spacing.',\n      media: {\n        title: 'Components',\n        src: 'https://images.unsplash.com/photo-1683143724745-d66cf5ea5ce7?q=80&w=1202&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      },\n    },\n    {\n      title: 'Responsive by default',\n      description:\n        'Stacks on mobile and becomes a 3-column bento on larger screens.',\n      media: {\n        title: 'Developer Experience',\n        src: 'https://images.unsplash.com/photo-1577083862054-7324cd025fa6?q=80&w=1241&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      },\n    },\n    {\n      title: 'Clean visual hierarchy',\n      description:\n        'Primary content stands out while the supporting cards stay readable.',\n      media: {\n        title: 'Customization',\n        src: 'https://images.unsplash.com/photo-1683143726118-9abaed4e10f9?q=80&w=1062&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      },\n    },\n    {\n      title: 'Extendable cards',\n      description:\n        'Add more cards, switch aspect ratios, and tune the spacing.',\n      media: {\n        title: 'Performance',\n        src: 'https://images.unsplash.com/photo-1734552452335-e8b67797bad0?q=80&w=1212&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n      },\n    },\n  ],\n} satisfies BentoGrids01Props\n\nexport function BentoGrids01Example() {\n  return <BentoGrids01 primary={values.primary} items={values.items} />\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/bento-grids/bento-grids-01/bento-grids-01-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1000
  },
  "type": "registry:block"
}