{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "key-value-list",
  "type": "registry:ui",
  "title": "Key-value list",
  "description": "Description list of labelled values.",
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/components/key-value-list.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface KeyValueEntry {\n  /** React key; defaults to the index. */\n  id?: string;\n  label: ReactNode;\n  value: ReactNode;\n  /** Monospace value, for ids, amounts and timestamps. */\n  mono?: boolean;\n}\n\ninterface KeyValueListProps extends ComponentProps<\"dl\"> {\n  items?: KeyValueEntry[];\n  /** `inline`: label and value side by side. `stacked`: label above value. */\n  layout?: \"inline\" | \"stacked\";\n}\n\n/** Description list of labelled values (record details, run metadata). */\nfunction KeyValueList({ items, layout = \"inline\", className, children, ...props }: KeyValueListProps) {\n  return (\n    <dl\n      data-slot=\"key-value-list\"\n      data-layout={layout}\n      className={cn(\n        \"text-sm\",\n        layout === \"inline\"\n          ? \"grid grid-cols-[minmax(0,max-content)_minmax(0,1fr)] gap-x-6 gap-y-2\"\n          : \"grid gap-3\",\n        className,\n      )}\n      {...props}\n    >\n      {items?.map((item, index) => (\n        <KeyValuePair key={item.id ?? index} label={item.label} mono={item.mono} layout={layout}>\n          {item.value}\n        </KeyValuePair>\n      ))}\n      {children}\n    </dl>\n  );\n}\n\ninterface KeyValuePairProps {\n  label: ReactNode;\n  children: ReactNode;\n  mono?: boolean;\n  layout?: \"inline\" | \"stacked\";\n}\n\n/** One label and value inside a `KeyValueList`. Match the list's `layout`. */\nfunction KeyValuePair({ label, children, mono, layout = \"inline\" }: KeyValuePairProps) {\n  const term = <dt className=\"text-muted-foreground\">{label}</dt>;\n  const detail = (\n    <dd className={cn(\"min-w-0 break-words text-foreground\", mono && \"font-mono tabular-nums\")}>\n      {children}\n    </dd>\n  );\n  if (layout === \"stacked\") {\n    return (\n      <div data-slot=\"key-value-pair\" className=\"grid gap-0.5\">\n        {term}\n        {detail}\n      </div>\n    );\n  }\n  return (\n    <>\n      {term}\n      {detail}\n    </>\n  );\n}\n\nexport { KeyValueList, KeyValuePair };\nexport type { KeyValueEntry, KeyValueListProps, KeyValuePairProps };\n"
    }
  ]
}