{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "labeled-value",
  "title": "Labeled Value",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/labeled-value/labeled-value.component.ts",
      "content": "import { AfterViewInit, Component, ElementRef, Input, inject, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\n/**\n * Angular port of UIPKGE LabeledValue (React `LabeledValue`). Read-only label/value pair for\n * surface details. Projected content replaces the value span, like React's `children ?? value`.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-labeled-value, [ui-labeled-value]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"labeled-value\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<span data-slot=\"labeled-value-label\" class=\"text-muted-foreground shrink-0\">{{ label }}</span\n    ><ng-content />\n    @if (!hasContent()) {\n      <span data-slot=\"labeled-value-value\" class=\"min-w-0 text-right font-medium\">{{ value }}</span>\n    }`,\n})\nexport class UiLabeledValueComponent implements AfterViewInit {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef)\n  @Input() label = ''\n  @Input() value?: string\n  @Input('class') className?: string\n\n  /** True when the consumer projected content (React `children`), which then replaces the value span. */\n  readonly hasContent = signal(false)\n\n  ngAfterViewInit(): void {\n    const projected = [...this.host.nativeElement.childNodes].some((n) => {\n      if (n instanceof HTMLElement) {\n        const slot = n.getAttribute('data-slot')\n        return slot !== 'labeled-value-label' && slot !== 'labeled-value-value'\n      }\n      return n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()\n    })\n    if (projected) this.hasContent.set(true)\n  }\n\n  get hostClass(): string {\n    return cn('flex items-center justify-between gap-3 text-sm', this.className)\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/labeled-value/labeled-value.component.ts"
    },
    {
      "path": "packages/registry-angular/components/labeled-value/index.ts",
      "content": "export { UiLabeledValueComponent } from './labeled-value.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/labeled-value/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Read-only label/value pair for surface details — \"Email: jane@…\" or \"Status: Active\". Compose them in a Data List, a Stat Card, or a Section Card detail row.",
  "categories": [
    "data-display"
  ]
}