import * as React from 'react';
/**
 * DescriptionList — 唯讀 label + value 展示
 *
 * HTML 語義：dl + dt + dd（跟 Atlassian、Shopify Polaris 對齊）。
 *
 * ── Typography（兩個方向都一致）──
 * label (dt): text-body (14px) text-fg-secondary (neutral-8)
 * value (dd): text-body (14px) text-foreground (neutral-9)
 * 兩者都是 14px × 1.5 行高——層級靠色彩區分，不靠字體大小。
 *
 * ── direction（2026-04-20 新增）──
 * vertical（預設）：label 在上 / value 在下，適合長 value（地址、bio、說明段落）、
 *                   form-like 資訊展示
 * horizontal     ：label 左 / value 右對齊，適合短 value 的 metadata 列
 *                   （檔案資訊、訂單詳情、settings summary）— Google Drive /
 *                   Notion file info panel 模式
 *
 * ── divided（horizontal 專用，預設 false）──
 * 每個 item 下方加 `border-b border-divider`，rows 視覺對齊。長列表、key 長度
 * 不一時需要對齊格線才易讀 → 開 divided；短列表（< 4 rows）不需要。
 *
 * ── 間距 ──
 * vertical: label → value（同 item 內）: `var(--item-gap-label-desc-reading)` token（2px,item-anatomy reading tier SSOT;code L115 dd 消費）
 * horizontal: label ↔ value: gap-x-4（16px）最小間距
 * items 之間垂直 gap: layout-space-tight（density-aware）
 * divided horizontal 模式：每 item py-[var(--layout-space-tight)]（cell-like row 高度）
 */
export type DescriptionDirection = 'vertical' | 'horizontal';
export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
    /** grid 欄數（vertical 才生效；horizontal 永遠單欄），預設 1 */
    cols?: 1 | 2 | 3;
    /** 項目排列方向，預設 vertical（label 在上 / value 在下） */
    direction?: DescriptionDirection;
    /**
     * horizontal 模式下每個 item 下方加分隔線以對齊 rows。預設 false。
     * 短列表（< 4 rows）不需要；檔案 metadata 等長列表、key 長度不一時建議開。
     */
    divided?: boolean;
}
declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & React.RefAttributes<HTMLDListElement>>;
export interface DescriptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
    label: string;
    children: React.ReactNode;
}
declare const DescriptionItem: React.ForwardRefExoticComponent<DescriptionItemProps & React.RefAttributes<HTMLDivElement>>;
export declare const descriptionListMeta: {
    readonly component: "DescriptionList";
    readonly family: null;
    readonly variants: {};
    readonly sizes: {};
    readonly states: readonly [];
    readonly tokens: {
        readonly bg: readonly [];
        readonly fg: readonly ["text-fg-secondary", "text-foreground"];
        readonly ring: readonly [];
    };
};
export { DescriptionList, DescriptionItem };
//# sourceMappingURL=description-list.d.ts.map