import { type ReactNode } from "react";
import { type ViewStyle, type TextStyle, type LayoutStyle } from "../../style/index.js";
export interface KbdSkin {
    /** The key-cap box geometry: a centered row, fixed cap height, min width, radius, border width, padding. */
    capBox: ViewStyle;
    /** The `comfortable` cap: the same corner and edge, padded around the label instead of held at the cap height. */
    comfortableCapBox: ViewStyle;
    /** The compact size steps: each cap's box and its label type. */
    sizes: Record<KbdSize, {
        capBox: ViewStyle;
        labelType: TextStyle;
    }>;
    /** The key label type (size / line-height / weight / tracking). */
    labelType: TextStyle;
    /** The "then" between the caps of a sequence. */
    separatorType: TextStyle;
    /** The chord wrapper: a centered row holding each cap and its separator. */
    chordRow: ViewStyle;
}
export interface KbdProps {
    /** A single key label, rendered as one cap. Ignored when `keys` is set. */
    children?: ReactNode;
    /**
     * A multi-key shortcut (a combo, pressed together), rendered as one cap per key.
     * Pass a whitespace-separated string (`"⌘ K"`) or an array (`["⌘", "K"]`). A single
     * entry renders one cap, identical to passing that key as `children`. When set, `keys`
     * takes precedence over `children`.
     */
    keys?: string | string[];
    /**
     * Render a key SEQUENCE (press one, then the next): the caps are separated by "then".
     * Only affects the `keys` form.
     */
    sequence?: boolean;
    /**
     * The comfortable cap: padded 3 px above and below its label and 8 px at the sides
     * (25 px tall), the key the hand-off's component page sets beside a key's effect.
     * Omit for the 24 px cap with 6 px sides.
     */
    comfortable?: boolean;
    /**
     * The compact 22 px cap: 6 px sides on the small key corner, a 500 11 px label on a 20 px line
     * (the hint a search field or a command palette shows, `<Kbd small flat>`). Size
     * precedence: `small` > `tiny`; a size step wins over `comfortable`.
     */
    small?: boolean;
    /** The compact 20 px cap: 5 px sides on the tiny key corner, a 500 10 px label on an 18 px line. */
    tiny?: boolean;
    /**
     * The hint cap's edge: one pixel all round (no raised 2 px bottom) and the label in the
     * secondary ink, the keycap a field or a menu shows beside what it opens.
     */
    flat?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */
    style?: LayoutStyle;
}
export type KbdDensity = "comfortable" | "default";
export type KbdSize = "small" | "tiny";
export type KbdEdge = "flat" | "raised";
/** The size axis: `small` wins over `tiny`; null is the 24 px cap. */
export declare function sizeOf(p: Pick<KbdProps, "small" | "tiny">): KbdSize | null;
/** The edge axis: `flat`, or the raised default. */
export declare function edgeOf(p: Pick<KbdProps, "flat">): KbdEdge;
/** The density axis: a single opt-in today, resolved here so the docs record it. */
export declare function densityOf(p: Pick<KbdProps, "comfortable">): KbdDensity;
/** Build a Kbd component from a platform skin. */
export declare function createKbd(skin: KbdSkin): ({ children, keys, sequence, comfortable, small, tiny, flat, testID, style }: KbdProps) => import("react").JSX.Element;
//# sourceMappingURL=kbd.shared.d.ts.map