{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "list",
  "title": "List",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/list/list.component.ts",
      "content": "import { Component, ElementRef, Input, booleanAttribute, inject, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\n/**\n * Angular port of UIPKGE List (React `List`). React's `as` prop maps to the host element you put\n * the attribute on: `<ul ui-list>` (default in React), `<ol ui-list>` or `<div ui-list>`; the\n * `<ui-list>` element form is display:block.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-list, [ui-list]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"list\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiListComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block list-none space-y-1', this.className)\n  }\n}\n\n/**\n * React `ListItem`. `as` maps to the host element: `<li ui-list-item>`, `<div ui-list-item>` or\n * `<a ui-list-item [href]>`. Hover/pointer affordances show only when the item is interactive,\n * as in React (`as=\"a\"` / `href` / `onClick`): an `<a>` host or an `href` count automatically;\n * set `interactive` for a click-handled item (Angular can't see whether `(click)` is bound).\n * Disabled items swallow clicks and drop out of the tab order.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-list-item, [ui-list-item]',\n  standalone: true,\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"list-item\"',\n    '[attr.data-active]': 'active ? \"\" : null',\n    '[attr.data-disabled]': 'disabled ? \"\" : null',\n    '[attr.aria-disabled]': 'disabled ? \"true\" : null',\n    '[attr.aria-current]': 'active ? \"true\" : null',\n    '[attr.tabindex]': 'disabled ? -1 : null',\n    '[attr.href]': 'isAnchor && !disabled ? href ?? null : null',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiListItemComponent {\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement\n  @Input({ transform: booleanAttribute }) active = false\n  @Input({ transform: booleanAttribute }) disabled = false\n  @Input() href?: string\n  /** Stand-in for React's `typeof onClick === 'function'` check. */\n  @Input({ transform: booleanAttribute }) interactive = false\n  @Input('class') className?: string\n\n  get isAnchor(): boolean {\n    return this.el.tagName === 'A'\n  }\n\n  get isInteractive(): boolean {\n    return !this.disabled && (this.isAnchor || this.href != null || this.interactive)\n  }\n\n  constructor() {\n    // Capture phase so it runs before any consumer (click) handler on the same element.\n    this.el.addEventListener('click', (e) => this.onClick(e), true)\n  }\n\n  onClick(e: MouseEvent): void {\n    if (!this.disabled) return\n    e.preventDefault()\n    e.stopImmediatePropagation()\n  }\n\n  get hostClass(): string {\n    return cn(\n      'block rounded-md px-2 py-1.5 text-sm transition-colors duration-200 select-none focus-visible:outline-none',\n      'has-[>[data-slot=list-item-content]]:flex has-[>[data-slot=list-item-content]]:items-center has-[>[data-slot=list-item-content]]:gap-3',\n      this.isInteractive && 'hover:bg-accent focus-visible:bg-accent cursor-pointer',\n      this.active && 'bg-accent text-accent-foreground',\n      this.disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n      this.className,\n    )\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-list-item-media, [ui-list-item-media]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"list-item-media\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiListItemMediaComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('flex shrink-0 items-center justify-center self-center', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-list-item-content, [ui-list-item-content]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"list-item-content\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiListItemContentComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('flex min-w-0 flex-1 flex-col gap-0.5 self-center', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-list-item-title, [ui-list-item-title]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"list-item-title\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiListItemTitleComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block text-foreground truncate text-sm leading-none font-medium', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-list-item-description, [ui-list-item-description]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"list-item-description\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiListItemDescriptionComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block text-muted-foreground line-clamp-1 text-xs', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-list-item-actions, [ui-list-item-actions]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"list-item-actions\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiListItemActionsComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('text-muted-foreground flex shrink-0 items-center gap-1.5 self-center', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-list-subheader, [ui-list-subheader]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"list-subheader\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiListSubheaderComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block text-muted-foreground px-2 py-1 text-xs font-medium tracking-wider uppercase', this.className)\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/list/list.component.ts"
    },
    {
      "path": "packages/registry-angular/components/list/index.ts",
      "content": "export {\n  UiListComponent,\n  UiListItemActionsComponent,\n  UiListItemComponent,\n  UiListItemContentComponent,\n  UiListItemDescriptionComponent,\n  UiListItemMediaComponent,\n  UiListItemTitleComponent,\n  UiListSubheaderComponent,\n} from './list.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/list/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "List and Item row primitives with List, ListItem, ListItemMedia, ListItemContent, ListItemTitle, ListItemDescription, ListItemActions, and ListSubheader for structured rows, settings lists, and feeds.",
  "categories": [
    "data-display"
  ]
}