Aurora Description List

1import * as React from "react"
2import { cn } from "@/lib/utils"
3 
4function DescriptionList({ ref, className, ...props }: React.HTMLAttributes<HTMLDListElement> & { ref?: React.Ref<HTMLDListElement> }) {
5  return (
6    <dl
7      ref={ref}
8      className={cn("grid gap-0 overflow-hidden rounded-[var(--aurora-radius-1)] border", className)}
9      style={{ borderColor: "var(--aurora-border-default)", background: "var(--aurora-panel-medium)" }}
10      {...props}
11    />
12  )
13}
14 
15export interface DescriptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
16  label: React.ReactNode
17  value: React.ReactNode
18  /** Highlight the row with a cyan-tinted surface (active/selected state). */
19  active?: boolean
20}
21 
22function DescriptionItem({ ref, className, label, value, active = false, ...props }: DescriptionItemProps & { ref?: React.Ref<HTMLDivElement> }) {
23  return (
24    <div
25      ref={ref}
26      className={cn("grid grid-cols-1 gap-3 border-b px-7 py-[14px] last:border-b-0 sm:grid-cols-[150px_minmax(0,1fr)] sm:gap-4", className)}
27      style={{
28        borderColor: "var(--aurora-border-default)",
29        background: active ? "var(--aurora-selected-bg)" : undefined,
30      }}
31      {...props}
32    >
33      <dt
34        className="flex items-center gap-2.5"
35        style={{
36          color: "var(--aurora-text-muted)",
37          fontSize: "var(--aurora-type-label)",
38          fontWeight: "var(--aurora-weight-label)",
39          letterSpacing: "var(--aurora-letter-label)",
40          lineHeight: "var(--aurora-line-dense)",
41        }}
42      >
43        <span
44          aria-hidden="true"
45          style={{
46            display: "inline-block",
47            width: "3px",
48            height: "14px",
49            flexShrink: 0,
50            borderRadius: "9999px",
51            background: "var(--aurora-accent-primary)",
52          }}
53        />
54        {label}
55      </dt>
56      <dd
57        style={{
58          color: "var(--aurora-text-primary)",
59          fontSize: "var(--aurora-type-table)",
60          fontWeight: "var(--aurora-weight-body)",
61          lineHeight: 1.42,
62          margin: 0,
63          minWidth: 0,
64        }}
65      >
66        {value}
67      </dd>
68    </div>
69  )
70}
71 
72export { DescriptionList, DescriptionItem }