import { type HTMLAttributes } from 'react';
import { type VariantProps } from 'class-variance-authority';
declare const keyValuePairVariants: (props?: ({
    layout?: "vertical" | "horizontal" | null | undefined;
    hasIcon?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface KeyValuePairProps extends React.HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof keyValuePairVariants>, 'hasIcon'> {
    /** The label (term). Stays a string: it is interpolated into the copy
     *  button's accessible name, where a node would render "[object Object]". */
    label: string;
    /**
     * Display-only override for the rendered label — a node when the term needs
     * more than text (a PHI lock beside it, a badge). `label` is still required
     * and remains the string every accessible name is built from.
     */
    labelNode?: React.ReactNode;
    /** The value — accepts plain text, Badge, Tag, monospace code, any ReactNode */
    value: React.ReactNode;
    /** Layout direction */
    layout?: 'horizontal' | 'vertical';
    /** Render value in monospace font */
    mono?: boolean;
    /**
     * Where the value sits on the row.
     *
     * `start` (default) keeps the existing behaviour — the value begins
     * immediately after the label and absorbs the remaining width.
     *
     * `end` pins the value to the inline-end of the row, so its position
     * no longer moves with the label's length. Use it for the one
     * comparable figure in a list of rows — a price, a count, a score —
     * where a reader wants to scan down a column rather than read each
     * line. Pinning every row defeats the point.
     *
     * Horizontal layout only: in `vertical` the value already sits below
     * the label, so there is nothing to pin against and this is ignored.
     */
    alignValue?: 'start' | 'end';
    /** Show a copy-to-clipboard IconButton beside the value */
    copyable?: boolean;
    /** The text to copy — defaults to `value` if value is a string */
    copyText?: string;
    /**
     * Optional decorative icon rendered at the leading edge of the pair.
     * Pass a `lucide-react` icon (or any single React element) for
     * visual consistency. The wrapper applies `aria-hidden="true"` and
     * paints the icon with `var(--key-value-pair-icon-color)` (defaults
     * to `--muted-foreground`); consumers can recolour the slot via
     * that token without forking the component.
     *
     * Cap-height alignment with the label is automatic — the wrapper
     * uses `mt-0.5` so the glyph rides the label row, not the
     * geometric centre of a wrapping value.
     *
     * Type is `ReactElement` (not the broader `ReactNode`) so the
     * intent is clear at the call site: this slot is for a single
     * SVG/icon, not arbitrary fragments, strings, or numbers.
     */
    icon?: React.ReactElement | null;
}
export declare const KeyValuePair: import("react").ForwardRefExoticComponent<KeyValuePairProps & import("react").RefAttributes<HTMLDivElement>>;
export interface KeyValueListProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Gap between rows. Maps to spacing tokens — defaults to `md`.
     * Smaller gaps suit dense settings panels; larger gaps suit
     * profile cards.
     */
    rowGap?: 'sm' | 'md' | 'lg';
}
export declare const KeyValueList: import("react").ForwardRefExoticComponent<KeyValueListProps & import("react").RefAttributes<HTMLDivElement>>;
export {};
//# sourceMappingURL=key-value-pair.d.ts.map