import "./peek.css";
import type * as React from "react";
import { Button as Base } from "@base-ui/react/button";
import type { PopoverSide, PopoverAlign } from "./popover";
import { type StyleProps } from "./style_props";
export type PeekVariant = "text" | "control";
export interface PeekProps extends StyleProps {
    /** The inline reference that becomes the trigger — a customer name, a
     * record id, a member chip. Rendered inside the press target, whose hover
     * wash signals pressability without restyling the text. */
    children: React.ReactNode;
    /** The instant detail revealed on press — compose Text/Divider/Button
     * rows. Keep it a summary with ONE action to the full record; a peek
     * that needs scrolling wanted to be a screen. */
    content: React.ReactNode;
    /** Announced name for the trigger ("Hồ sơ KOMASPEC VIỆT NAM"). */
    accessibilityLabel: string;
    /**
     * WHICH REGISTER the trigger sits in — the two surfaces a peek lives on need
     * different boxes, and picking by taste puts the wrong one on both.
     *
     * `text` (default) is a reference INSIDE a line of reading — a customer name
     * in a sentence, an id in a table cell. It takes a 32px box and bleeds the
     * extra height back out, so wrapping a `Text` never grows the line it sits in.
     *
     * `control` is a reference that IS a control-band citizen — anything built on
     * `MemberChip`, whose `md` avatar is sized to `CONTROL_CONTENT_HEIGHT` for
     * exactly this. It takes the full control height and no vertical bleed, so the
     * token seats where every other control on the surface does instead of
     * under-filling the band and standing a different height from the same chip
     * un-peeked beside it.
     *
     * The HORIZONTAL bleed is common to both: the trigger's padding must not
     * shift its content off the surface's left edge, or a peekable token sits 8px
     * right of the plain one above it.
     */
    variant?: PeekVariant;
    side?: PopoverSide;
    align?: PopoverAlign;
    testID?: string;
    /** The TRIGGER — the only one of the two boxes that is in the layout. */
    ref?: React.Ref<HTMLElement>;
    /** Substitutes the trigger's element, for the same reason `ref` names it. */
    render?: Base.Props["render"];
}
/**
 * Drill-down for inline references — press a name/id where it appears and
 * get its details in a popover, without leaving the screen. The companion
 * to the count drill-downs (MetricStrip `onPress`, Accordion rows): counts
 * open the records behind a number, Peek opens the record behind a
 * reference. Use it on every entity mention that has more to say —
 * customer names, order ids, member names, linked records.
 *
 * `className` / `style` / `ref` / `render` land on the TRIGGER, which is the box
 * the caller's layout contains; the panel is portalled out of it.
 */
export declare function Peek(props: PeekProps): React.JSX.Element;