import { type VariantProps } from 'class-variance-authority';
import * as React from 'react';
/**
 * The five states of Figma's `.result-item` (22:5805).
 *
 * **`State` is a data prop, unusually for an axis Figma calls State.** Nothing here is driven by the
 * pointer or the focus ring: a result's severity is data about the result, the way `ChatLog`'s severity
 * is data about an event. The atom declares no hover, pressed, focus or disabled treatment at all.
 *
 * **`loading` is visually identical to `default` here, and that is a decision rather than Figma's
 * silence.** This docblock used to say Figma "draws it identically to `default` … and then does not
 * draw it". Figma does draw it: the Loading member (22:5806) is the only one of the five carrying
 * `opacity-30` on its root. Every bound colour role is the same as `default`, which is why a
 * role-by-role reading of the REST payload saw no difference — node opacity is not in that payload.
 *
 * The dimming is deliberately not ported. At 30% the white ink composites to `#4d5666` on Figma's
 * page, **2.62:1**, which fails WCAG 1.4.3 for 14px text, and the bottom rule falls to 1.08:1. A
 * pending row would be harder to read than a settled one. `aria-busy` carries the state to assistive
 * technology, and a caller with nothing to show yet should pass no value — `MetricList` renders
 * `emptyValue` (`--`) for that, which removes the un-measured figure instead of dimming it.
 */
export declare const RESULT_ITEM_STATES: readonly ["default", "loading", "highlighted", "alert", "error"];
/**
 * A 32px result row: label left, value right, one hairline rule beneath.
 *
 * The row height is Figma's 32px frame around a 20px line box. The rule is `--color-border-neutral-soft`
 * and is **decoration, not a control boundary**: a result row takes no input and has no pressed or
 * selected state, so WCAG 1.4.11's 3:1 does not apply and `--color-border-control` is not the remedy —
 * there is no control to bound. Figma's own rule is `gray-800` at 1.39:1 against its page, which the
 * binding records as a non-defect for the same reason.
 *
 * **Not `MetricList`.** That is grouped numeric measurement: an uppercase eyebrow per group, a 16px
 * monospace figure, a divider that flips orientation at `sm`, and keyboard-reachable tooltips. This is a
 * single prose row with a severity. Sharing one component would mean a prop that switches all four.
 */
declare const resultItemStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/** The label is `--color-text-primary` in all five states, exactly as Figma inks it white in all five. */
declare const resultItemLabelStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The value ink — the one thing Figma's `State` axis actually moves.
 *
 * **Every Figma literal here is declined, and the reason is measured rather than stylistic.** Its three
 * coloured states are `blue-200` #3acefa, an unbound amber #d6a452 and `accesible-red-dark-theme`
 * #ef223a. On Figma's dark page those are 10.5:1, 8.57:1 and 4.57:1; on a white page they are **1.84:1,
 * 2.26:1 and 4.23:1**, so all three fail AA in light mode. The atom is authored dark-only and never had
 * to face that. The colour AXIS ports; its hexes do not.
 *
 * **`alert` does not get a warning ink, because the token layer has none.** `--color-text-warning` does
 * not exist — only `--color-text-warning-disabled` does, which is the same gap `Badge` recorded when
 * upstream asked for a token that was never declared. `--color-icon-warning` is not a substitute: it
 * measures 2.61:1 on the light page, which is why `ChatLog` refused it for its warning glyph too. So
 * `alert` takes `--color-text-secondary` and the severity is carried by the visually-hidden label
 * instead. Minting a warning ink to fill this in is a token change with a value nobody has chosen, and
 * doing it from one atom would be inventing.
 *
 * That is also why severity is never colour-alone here: WCAG 1.4.1 prohibits it, and `alert` against
 * `default` would otherwise be a faint difference in grey.
 */
declare const resultItemValueStyles: (props?: ({
    state?: "alert" | "default" | "error" | "loading" | "highlighted" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export { resultItemStyles, resultItemLabelStyles, resultItemValueStyles };
export type ResultItemState = NonNullable<VariantProps<typeof resultItemValueStyles>['state']>;
export interface ResultItemProps extends React.ComponentPropsWithoutRef<'div'> {
    /** The left-hand label. Figma's `First-text`. */
    label: React.ReactNode;
    /** The right-hand value. Figma's `Second-text` — note its own default is a string, not a figure. */
    value: React.ReactNode;
    /**
     * What kind of result this is. A data prop, not a CSS state.
     * @default 'default'
     */
    state?: ResultItemState;
    /**
     * Visually-hidden prefixes announcing the severity, so it is not carried by colour alone.
     * @default { alert: 'Alert:', error: 'Error:' }
     */
    stateLabels?: Partial<Record<ResultItemState, string>>;
}
/**
 * @example <ResultItem label="Carrier" value="AT&T" />
 * @example <ResultItem label="Carrier" value="Unknown" state="error" />
 */
export declare const ResultItem: React.ForwardRefExoticComponent<ResultItemProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=result-item.d.ts.map