{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "activity-feed",
  "title": "Activity Feed",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/activity-feed/activity-feed.component.ts",
      "content": "// Record activity as a Timeline of avatar rows. Each row is spelled out inline — actor,\n// verb, optional comment, relative time. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiRelativeTimeComponent } from '@/ui/relative-time/relative-time.component'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.component'\nimport {\n  UiTimelineComponent,\n  UiTimelineContentComponent,\n  UiTimelineItemComponent,\n  UiTimelineMediaComponent,\n} from '@/ui/timeline/timeline.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-activity-feed, [ui-activity-feed]',\n  standalone: true,\n  // React renders the root SectionCard itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiRelativeTimeComponent,\n    UiSectionCardComponent,\n    UiTimelineComponent,\n    UiTimelineContentComponent,\n    UiTimelineItemComponent,\n    UiTimelineMediaComponent,\n  ],\n  template: `\n    <ui-section-card data-slot=\"activity-feed\" [class]=\"rootClass\" [title]=\"title\" [description]=\"description\">\n      <ui-timeline>\n        <ui-timeline-item status=\"success\">\n          <ui-timeline-media variant=\"avatar\">\n            <ui-avatar size=\"sm\">\n              <ui-avatar-fallback size=\"sm\" class=\"text-foreground\">MC</ui-avatar-fallback>\n            </ui-avatar>\n          </ui-timeline-media>\n          <ui-timeline-content>\n            <p class=\"text-sm\">\n              <span class=\"font-medium\">Maya Chen</span>\n              <span class=\"text-muted-foreground\"> approved the leave request</span>\n            </p>\n            <ui-relative-time date=\"2026-08-14T11:18:00.000Z\" [now]=\"now\" locale=\"en\" class=\"mt-0.5 block text-xs\" />\n          </ui-timeline-content>\n        </ui-timeline-item>\n\n        <ui-timeline-item status=\"info\">\n          <ui-timeline-media variant=\"avatar\">\n            <ui-avatar size=\"sm\">\n              <ui-avatar-fallback size=\"sm\" class=\"text-foreground\">OF</ui-avatar-fallback>\n            </ui-avatar>\n          </ui-timeline-media>\n          <ui-timeline-content>\n            <p class=\"text-sm\">\n              <span class=\"font-medium\">Omar Farid</span>\n              <span class=\"text-muted-foreground\"> added a comment</span>\n            </p>\n            <p class=\"text-muted-foreground mt-1 text-sm\">Coverage is confirmed for Thursday and Friday.</p>\n            <ui-relative-time date=\"2026-08-14T10:04:00.000Z\" [now]=\"now\" locale=\"en\" class=\"mt-0.5 block text-xs\" />\n          </ui-timeline-content>\n        </ui-timeline-item>\n\n        <ui-timeline-item status=\"muted\">\n          <ui-timeline-media variant=\"avatar\">\n            <ui-avatar size=\"sm\">\n              <ui-avatar-fallback size=\"sm\" class=\"text-foreground\">PS</ui-avatar-fallback>\n            </ui-avatar>\n          </ui-timeline-media>\n          <ui-timeline-content>\n            <p class=\"text-sm\">\n              <span class=\"font-medium\">Priya Shah</span>\n              <span class=\"text-muted-foreground\"> updated the title to “Q3 planning offsite”</span>\n            </p>\n            <ui-relative-time date=\"2026-08-13T16:40:00.000Z\" [now]=\"now\" locale=\"en\" class=\"mt-0.5 block text-xs\" />\n          </ui-timeline-content>\n        </ui-timeline-item>\n\n        <ui-timeline-item status=\"muted\">\n          <ui-timeline-media variant=\"avatar\">\n            <ui-avatar size=\"sm\">\n              <ui-avatar-fallback size=\"sm\" class=\"text-foreground\">LP</ui-avatar-fallback>\n            </ui-avatar>\n          </ui-timeline-media>\n          <ui-timeline-content>\n            <p class=\"text-sm\">\n              <span class=\"font-medium\">Leo Park</span>\n              <span class=\"text-muted-foreground\"> opened this request</span>\n            </p>\n            <ui-relative-time date=\"2026-08-13T09:12:00.000Z\" [now]=\"now\" locale=\"en\" class=\"mt-0.5 block text-xs\" />\n          </ui-timeline-content>\n        </ui-timeline-item>\n      </ui-timeline>\n    </ui-section-card>\n  `,\n})\nexport class UiActivityFeedComponent {\n  @Input() title = 'Activity'\n  @Input() description = 'Latest changes on this record.'\n  @Input('class') className?: string\n\n  protected readonly now = new Date('2026-08-14T12:00:00.000Z')\n\n  get rootClass(): string {\n    return cn(this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/activity-feed/activity-feed.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/activity-feed/index.ts",
      "content": "export { UiActivityFeedComponent } from './activity-feed.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/activity-feed/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/relative-time.json",
    "https://uipkge.dev/r/angular/section-card.json",
    "https://uipkge.dev/r/angular/timeline.json"
  ],
  "description": "Record activity as a Timeline of avatar rows. Each row is spelled out inline — actor, verb, optional comment, relative time. Edit the rows after install; no items wrapper.",
  "categories": [
    "productivity",
    "dashboard"
  ]
}