{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid",
  "title": "Bento Grid",
  "description": "CSS Grid bento layout with variable column/row spanning slots",
  "files": [
    {
      "path": "registry/pioneerui/bento-grid.tsx",
      "content": "import React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n}\n\nexport function BentoGrid({ children, className, ...props }: BentoGridProps) {\n  return (\n    <div\n      className={cn(\n        \"grid auto-rows-[minmax(180px,auto)] grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport interface BentoCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name?: string\n  description?: string\n  icon?: React.ReactNode\n  background?: React.ReactNode\n  colSpan?: 1 | 2 | 3\n  rowSpan?: 1 | 2\n  cta?: string\n  href?: string\n}\n\nexport function BentoCard({\n  name,\n  description,\n  icon,\n  background,\n  className,\n  colSpan = 1,\n  rowSpan = 1,\n  cta,\n  href,\n  ...props\n}: BentoCardProps) {\n  const colClass = { 1: \"\", 2: \"sm:col-span-2\", 3: \"sm:col-span-3\" }[colSpan]\n  const rowClass = { 1: \"\", 2: \"row-span-2\" }[rowSpan]\n\n  return (\n    <div\n      className={cn(\n        \"group relative flex flex-col overflow-hidden rounded-xl border bg-card\",\n        \"transition-shadow duration-200 hover:shadow-lg\",\n        colClass,\n        rowClass,\n        className,\n      )}\n      {...props}\n    >\n      {/* Background slot */}\n      {background && (\n        <div className=\"absolute inset-0 transition-opacity duration-300 group-hover:opacity-80\">\n          {background}\n        </div>\n      )}\n\n      {/* Content */}\n      <div className=\"relative z-10 mt-auto flex flex-col gap-1 p-6\">\n        {icon && (\n          <div className=\"mb-2 w-fit rounded-lg border bg-background/80 p-2 backdrop-blur-sm text-foreground\">\n            {icon}\n          </div>\n        )}\n        {name && (\n          <h3 className=\"text-base font-semibold tracking-tight text-foreground\">{name}</h3>\n        )}\n        {description && (\n          <p className=\"text-sm text-muted-foreground line-clamp-2\">{description}</p>\n        )}\n        {cta && href && (\n          <a\n            href={href}\n            className=\"mt-2 w-fit text-xs font-medium text-primary underline-offset-2 hover:underline\"\n          >\n            {cta} →\n          </a>\n        )}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/bento-grid.tsx"
    }
  ],
  "type": "registry:ui"
}