{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "descriptions",
  "title": "Descriptions",
  "description": "Read-only label and value pairs in a responsive grid with column spans, a bordered table look, a title and an extra slot, rendered as a description list.",
  "files": [
    {
      "path": "registry/tealmac/descriptions.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface DescriptionsItem {\n  /** Stable key; defaults to the index. */\n  key?: string\n  label: React.ReactNode\n  value: React.ReactNode\n  /** How many columns the item spans. Default 1. */\n  span?: number\n}\n\nexport interface DescriptionsProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"title\"\n> {\n  items: DescriptionsItem[]\n  title?: React.ReactNode\n  /** Right-aligned content in the header, for example an Edit button. */\n  extra?: React.ReactNode\n  /** Columns of the grid on wide containers. Default 3; one column on narrow ones. */\n  columns?: 1 | 2 | 3 | 4\n  /** `horizontal` puts the label beside the value, `vertical` above it. */\n  layout?: \"horizontal\" | \"vertical\"\n  /** Draw cell borders and tint the labels. */\n  bordered?: boolean\n}\n\nconst COLS = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 @md:grid-cols-2\",\n  3: \"grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3\",\n  4: \"grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-4\",\n} as const\n\nconst SPAN = [\n  \"\",\n  \"\",\n  \"@md:col-span-2\",\n  \"@md:col-span-2 @2xl:col-span-3\",\n  \"@md:col-span-2 @2xl:col-span-4\",\n]\n\n/**\n * Read-only label and value pairs in a responsive grid, with column spans,\n * an optional bordered table look and a header. Renders a description list\n * (`dl`), so screen readers pair each term with its details.\n */\nexport function Descriptions({\n  items,\n  title,\n  extra,\n  columns = 3,\n  layout = \"horizontal\",\n  bordered = false,\n  className,\n  ...props\n}: DescriptionsProps) {\n  return (\n    <div className={cn(\"@container w-full\", className)} {...props}>\n      {title || extra ? (\n        <div className=\"mb-3 flex items-center justify-between gap-3\">\n          {title ? (\n            <h3 className=\"text-base font-semibold\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          {extra}\n        </div>\n      ) : null}\n      <dl\n        className={cn(\n          \"grid text-sm\",\n          COLS[columns],\n          bordered\n            ? \"bg-border gap-px overflow-hidden rounded-lg border\"\n            : \"gap-x-6 gap-y-4\"\n        )}\n      >\n        {items.map((item, i) => {\n          const span = Math.min(item.span ?? 1, columns)\n          return (\n            <div\n              key={item.key ?? i}\n              className={cn(\n                layout === \"horizontal\" ? \"flex\" : \"flex flex-col\",\n                bordered ? \"bg-card\" : \"gap-1\",\n                span > 1 && SPAN[span]\n              )}\n            >\n              <dt\n                className={cn(\n                  \"text-muted-foreground font-medium\",\n                  layout === \"horizontal\" && \"w-32 shrink-0\",\n                  bordered && \"bg-muted/50 px-3 py-2\"\n                )}\n              >\n                {item.label}\n              </dt>\n              <dd\n                className={cn(\n                  \"min-w-0 flex-1 break-words\",\n                  bordered && \"px-3 py-2\"\n                )}\n              >\n                {item.value}\n              </dd>\n            </div>\n          )\n        })}\n      </dl>\n    </div>\n  )\n}\n\nexport default Descriptions\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}