import * as react from 'react';
import { HTMLAttributes, ReactNode } from 'react';

interface KbdProps extends HTMLAttributes<HTMLElement> {
    /**
     * Render a chord as separate keys — `keys={["Cmd", "K"]}` renders two caps
     * with a separator between them, rather than one wide cap reading "Cmd K".
     */
    keys?: ReactNode[];
    /** Separator drawn between chord keys. Default `"+"`. */
    separator?: ReactNode;
    size?: "xs" | "sm" | "md";
    children?: ReactNode;
}

/**
 * A keyboard key cap — `<Kbd>K</Kbd>`, or a chord via `<Kbd keys={["Cmd","K"]} />`.
 *
 * Twenty `<kbd>` elements across this suite's own showcase carried six
 * different className recipes for the same thing: rounded, bordered, mono,
 * small, with a dark-mode counterpart. None of them disagreed on intent; they
 * disagreed on which greys.
 *
 * `min-w` is the detail worth having in one place: without it a `K` cap is
 * visibly narrower than an `Esc` cap beside it, and a row of single letters
 * reads as ragged rather than as keys.
 */
declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;

export { Kbd, type KbdProps };