import * as React from "react" import { cn } from "./lib/utils" type DescriptionItem = { /** What the value is: "Email", "Plan", "Due". */ term: React.ReactNode /** The value. Empty (undefined, null or "") shows the list's `empty` mark. */ description?: React.ReactNode /** With layout="stacked" and columns: the item takes the whole row, e.g. an address or notes. */ span?: "full" /** A stable key; the index is used without one. */ key?: string } type DescriptionListLayout = "inline" | "justified" | "stacked" type DescriptionListProps = Omit, "children"> & { items: DescriptionItem[] /** * inline (default): the term in a column of its own, the value beside it, as on a record's details. justified: the * term at the start and the value at the far end, as in a summary or totals. stacked: the term above the value, * in columns with `columns`. */ layout?: DescriptionListLayout /** With layout="stacked": how many side by side from the sm breakpoint up (one on phones). */ columns?: 1 | 2 | 3 | 4 /** Lines between the items. */ divided?: boolean /** With layout="inline": the term column's width, any CSS length. */ termWidth?: string /** sm for a dense panel or a popover: smaller text and gaps. */ size?: "sm" | "default" /** In place of an empty value. A muted dash by default. */ empty?: React.ReactNode classNames?: { item?: string; term?: string; description?: string } } const columnClasses: Record, string> = { 1: "", 2: "sm:grid-cols-2", 3: "sm:grid-cols-2 lg:grid-cols-3", 4: "sm:grid-cols-2 lg:grid-cols-4", } const isEmpty = (value: React.ReactNode) => value === undefined || value === null || value === "" /** * Terms and their values, in one tag: ``. A real *

, so screen readers hear each value with its term. Values wrap rather than being cut off. */ function DescriptionList({ items, layout = "inline", columns = 1, divided = false, termWidth = "8rem", size = "default", empty, className, classNames, style, ...props }: DescriptionListProps) { const sm = size === "sm" const emptyMark = empty ?? ( — ) const stackedColumns = layout === "stacked" && columns > 1 return (

{item.term}: {isEmpty(item.description) ? emptyMark : item.description}

) } export { DescriptionList, type DescriptionListProps, type DescriptionItem, type DescriptionListLayout }