{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "action-grid",
  "title": "Action grid",
  "description": "the row of shortcuts under a page hero · 3–4 `items`, one row only, last tile is \"More\"",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/action-grid.tsx",
      "content": "import { cn } from 'cn';\nimport type { LucideIcon } from 'lucide-react';\nimport Link from 'next/link';\n\nexport type ActionTileItem = {\n  icon: LucideIcon;\n  label: string;\n  onClick?: () => void;\n  /** Or a link. */\n  href?: string;\n  /** A count, or `true` for a bare dot. */\n  badge?: number | boolean;\n  disabled?: boolean;\n};\n\ntype Props = {\n  /** 3 or 4. They share the width equally; more than 4 gets cramped. */\n  items: ActionTileItem[];\n  className?: string;\n};\n\n/**\n * The row of primary shortcuts under a page's hero: Add funds · Pay · Send · More.\n *\n * Keep to one row: the last tile should be \"More\" rather than a second row of tiles.\n */\nexport function ActionGrid({ items, className }: Props) {\n  return (\n    <div className={cn('flex gap-3', className)}>\n      {items.map((item) => {\n        const Icon = item.icon;\n        const tileClass = cn(\n          'group flex min-w-0 flex-1 flex-col items-center gap-2 rounded-lg outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n          item.disabled && 'pointer-events-none opacity-50'\n        );\n        const body = (\n          <>\n            <span className=\"bg-muted group-hover:bg-accent relative flex aspect-square w-full max-w-20 items-center justify-center rounded-xl transition-colors\">\n              <Icon className=\"text-foreground size-6\" aria-hidden />\n              {typeof item.badge === 'number' ? (\n                <span\n                  aria-label={`${item.badge} new`}\n                  className=\"bg-destructive text-destructive-foreground border-background absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full border-2 px-1 text-xs leading-none font-bold\">\n                  {item.badge}\n                </span>\n              ) : item.badge ? (\n                <span aria-label=\"New\" className=\"bg-destructive border-background absolute top-1.5 right-1.5 size-3 rounded-full border-2\" />\n              ) : null}\n            </span>\n            <span className=\"line-clamp-2 text-center text-xs font-medium\">{item.label}</span>\n          </>\n        );\n        return item.href ? (\n          <Link key={item.label} href={item.href} aria-disabled={item.disabled} className={tileClass}>\n            {body}\n          </Link>\n        ) : (\n          <button key={item.label} type=\"button\" onClick={item.onClick} disabled={item.disabled} className={tileClass}>\n            {body}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/action-grid.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ActionGrid"
    ],
    "api": "<ActionGrid items={[{icon,label,onClick|href,badge?}]} />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "actions"
  ],
  "type": "registry:component"
}