{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "description-list",
  "title": "Description List",
  "description": "Term and value pairs rendered as a description list.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@pestoui/style",
    "@pestoui/utils"
  ],
  "files": [
    {
      "path": "pestoui/components/description-list.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Term and value pairs — \"Plan · Team\", \"Domain · example.com\" — as a real\n   <dl>, so a screen reader announces each value against its term.\n\n   An `items` array rather than a compound <Item>: the two layouts need\n   different markup per row. `grid` places bare <dt>/<dd> siblings on a\n   two-column grid, so every term shares one column width; `divided` wraps each\n   pair in a <div> row so a rule can run between rows. A compound child would\n   have to read the layout from context, and createContext would make the whole\n   file a client module for no behaviour at all. */\nconst descriptionListVariants = cva(\"\", {\n  variants: {\n    layout: {\n      /* Terms in an auto column, values right-aligned and truncating. */\n      grid: \"grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-3\",\n      /* One row per pair, hairline rules between, value pushed right. */\n      divided: \"divide-y divide-border\",\n    },\n  },\n  defaultVariants: {\n    layout: \"grid\",\n  },\n})\n\ntype DescriptionListLayout = NonNullable<\n  VariantProps<typeof descriptionListVariants>[\"layout\"]\n>\n\ntype DescriptionListItem = {\n  id: string\n  term: React.ReactNode\n  details: React.ReactNode\n  /** A leading node in the value cell — an icon or a tile, marked aria-hidden. */\n  icon?: React.ReactNode\n}\n\ntype DescriptionListProps = Omit<React.ComponentProps<\"dl\">, \"children\"> & {\n  items: DescriptionListItem[]\n  layout?: DescriptionListLayout\n}\n\nfunction DescriptionList({\n  items,\n  layout = \"grid\",\n  className,\n  ...props\n}: DescriptionListProps) {\n  return (\n    <dl\n      data-slot=\"description-list\"\n      data-layout={layout}\n      className={cn(descriptionListVariants({ layout }), className)}\n      {...props}\n    >\n      {layout === \"divided\"\n        ? items.map((item) => (\n            <div\n              key={item.id}\n              data-slot=\"description-list-row\"\n              className=\"flex items-center justify-between gap-4 py-2.5\"\n            >\n              <dt data-slot=\"description-list-term\">{item.term}</dt>\n              <dd\n                data-slot=\"description-list-details\"\n                className={cn(\n                  \"tabular-nums\",\n                  item.icon != null && \"flex items-center gap-2\",\n                )}\n              >\n                {item.icon}\n                {item.details}\n              </dd>\n            </div>\n          ))\n        : items.map((item) => (\n            <React.Fragment key={item.id}>\n              <dt data-slot=\"description-list-term\" className=\"text-foreground\">\n                {item.term}\n              </dt>\n              <dd\n                data-slot=\"description-list-details\"\n                className=\"flex min-w-0 items-center justify-end gap-2 text-right text-foreground\"\n              >\n                {item.icon}\n                <span className=\"min-w-0 truncate\">{item.details}</span>\n              </dd>\n            </React.Fragment>\n          ))}\n    </dl>\n  )\n}\n\nexport { DescriptionList, descriptionListVariants }\nexport type { DescriptionListProps, DescriptionListItem, DescriptionListLayout }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}