{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-list",
  "type": "registry:ui",
  "title": "Data list",
  "description": "Compact list of label/value rows with optional status badges.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "utils",
    "status-badge"
  ],
  "files": [
    {
      "path": "registry/blacksite/ui/data-list.tsx",
      "type": "registry:ui",
      "target": "components/ui/data-list.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { StatusBadge, type StatusBadgeProps } from \"@/registry/blacksite/ui/status-badge\";\n\nexport interface DataListItem {\n  id: string;\n  label: React.ReactNode;\n  value?: React.ReactNode;\n  status?: StatusBadgeProps[\"status\"];\n  statusLabel?: string;\n}\n\ninterface DataListProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: DataListItem[];\n  /** Compact rows are 24px, default rows are 28px. */\n  density?: \"default\" | \"compact\";\n  /** Right-align values (typical for KPIs). */\n  alignValues?: \"left\" | \"right\";\n}\n\nconst DataList = React.memo(\n  React.forwardRef<HTMLDivElement, DataListProps>(\n    ({ className, items, density = \"default\", alignValues = \"right\", ...props }, ref) => {\n      return (\n        <div\n          ref={ref}\n          className={cn(\"divide-border/60 flex flex-col divide-y\", className)}\n          {...props}\n        >\n          {items.map((item) => (\n            <div\n              key={item.id}\n              className={cn(\n                \"flex items-center gap-2\",\n                density === \"compact\" ? \"h-6 text-[11px]\" : \"h-7 text-xs\",\n              )}\n            >\n              <span className=\"text-foreground-muted flex-1 truncate\">{item.label}</span>\n              <div\n                className={cn(\n                  \"flex shrink-0 items-center gap-2\",\n                  alignValues === \"right\" ? \"justify-end\" : \"justify-start\",\n                )}\n              >\n                {item.value !== undefined && (\n                  <span className=\"text-foreground text-mono\">{item.value}</span>\n                )}\n                {item.status && <StatusBadge status={item.status}>{item.statusLabel}</StatusBadge>}\n              </div>\n            </div>\n          ))}\n        </div>\n      );\n    },\n  ),\n);\nDataList.displayName = \"DataList\";\n\nexport { DataList };\n"
    }
  ]
}