/**
 * Control design tokens for BeatUI.
 *
 * Defines semantic tokens for interactive controls (buttons, inputs, badges, etc.)
 * including heights, padding, gaps, and overlay sizing. All values are computed
 * from the base spacing variable, enabling global scaling.
 *
 * @module
 */
/**
 * Semantic control height scale. All values are multiples of `--spacing-base`,
 * so changing the base spacing unit scales every control uniformly.
 *
 * | Name | Multiplier | Approx (at 0.25rem base) |
 * |------|------------|--------------------------|
 * | xs   | base * 7   | 28px                     |
 * | sm   | base * 8   | 32px                     |
 * | md   | base * 10  | 40px                     |
 * | lg   | base * 12  | 48px                     |
 * | xl   | base * 14  | 56px                     |
 */
export declare const controlHeight: {
    readonly xs: "calc(var(--spacing-base) * 7)";
    readonly sm: "calc(var(--spacing-base) * 8)";
    readonly md: "calc(var(--spacing-base) * 10)";
    readonly lg: "calc(var(--spacing-base) * 12)";
    readonly xl: "calc(var(--spacing-base) * 14)";
};
export type ControlHeightName = keyof typeof controlHeight;
export declare function getControlHeightVarName(size: ControlHeightName): string;
export declare function getControlHeightVar(size: ControlHeightName): string;
export declare function generateControlHeightVariables(): Record<string, string>;
/**
 * Semantic control block (vertical) padding scale.
 *
 * | Name | Token reference  | Approx |
 * |------|------------------|--------|
 * | xs   | --spacing-xs     | 2px    |
 * | sm   | --spacing-sm     | 4px    |
 * | md   | --spacing-md     | 8px    |
 * | lg   | --spacing-mdh    | 12px   |
 * | xl   | --spacing-lg     | 16px   |
 */
export declare const controlPaddingBlock: {
    readonly xs: "var(--spacing-xs)";
    readonly sm: "var(--spacing-sm)";
    readonly md: "var(--spacing-md)";
    readonly lg: "var(--spacing-mdh)";
    readonly xl: "var(--spacing-lg)";
};
export type ControlPaddingBlockName = keyof typeof controlPaddingBlock;
export declare function getControlPaddingBlockVarName(size: ControlPaddingBlockName): string;
export declare function getControlPaddingBlockVar(size: ControlPaddingBlockName): string;
/**
 * Semantic control inline (horizontal) padding scale.
 *
 * | Name | Token reference  | Approx |
 * |------|------------------|--------|
 * | xs   | --spacing-md     | 8px    |
 * | sm   | --spacing-mdh    | 12px   |
 * | md   | --spacing-lg     | 16px   |
 * | lg   | --spacing-lgh    | 20px   |
 * | xl   | --spacing-xl     | 24px   |
 */
export declare const controlPaddingInline: {
    readonly xs: "var(--spacing-md)";
    readonly sm: "var(--spacing-mdh)";
    readonly md: "var(--spacing-lg)";
    readonly lg: "var(--spacing-lgh)";
    readonly xl: "var(--spacing-xl)";
};
export type ControlPaddingInlineName = keyof typeof controlPaddingInline;
export declare function getControlPaddingInlineVarName(size: ControlPaddingInlineName): string;
export declare function getControlPaddingInlineVar(size: ControlPaddingInlineName): string;
export declare function generateControlPaddingVariables(): Record<string, string>;
/**
 * Semantic control gap scale for spacing between icon and text, items, etc.
 *
 * | Name | Token reference  | Approx |
 * |------|------------------|--------|
 * | xs   | --spacing-xs     | 2px    |
 * | sm   | --spacing-sm     | 4px    |
 * | md   | --spacing-smh    | 6px    |
 * | lg   | --spacing-md     | 8px    |
 * | xl   | --spacing-mdh    | 12px   |
 */
export declare const controlGap: {
    readonly xs: "var(--spacing-xs)";
    readonly sm: "var(--spacing-sm)";
    readonly md: "var(--spacing-smh)";
    readonly lg: "var(--spacing-md)";
    readonly xl: "var(--spacing-mdh)";
};
export type ControlGapName = keyof typeof controlGap;
export declare function getControlGapVarName(size: ControlGapName): string;
export declare function getControlGapVar(size: ControlGapName): string;
export declare function generateControlGapVariables(): Record<string, string>;
/**
 * Semantic overlay/container width scale for modals, tooltips, menus, etc.
 *
 * | Name      | Value               | Approx |
 * |-----------|---------------------|--------|
 * | xs        | min(20rem, 90vw)    | ~320px |
 * | sm        | min(25rem, 90vw)    | ~400px |
 * | md        | min(37.5rem, 90vw)  | ~600px |
 * | lg        | min(50rem, 90vw)    | ~800px |
 * | xl        | min(62.5rem, 90vw)  | ~1000px|
 * | min-width | 12rem               | ~192px |
 */
export declare const overlayWidth: {
    readonly xs: "min(20rem, 90vw)";
    readonly sm: "min(25rem, 90vw)";
    readonly md: "min(37.5rem, 90vw)";
    readonly lg: "min(50rem, 90vw)";
    readonly xl: "min(62.5rem, 90vw)";
};
/** Minimum width for overlay components (menus, dropdowns, popovers). */
export declare const overlayMinWidth = "12rem";
export type OverlayWidthName = keyof typeof overlayWidth;
export declare function getOverlayWidthVarName(size: OverlayWidthName): string;
export declare function getOverlayWidthVar(size: OverlayWidthName): string;
export declare function generateOverlayWidthVariables(): Record<string, string>;
/**
 * Generates CSS custom property declarations for all control and overlay tokens.
 *
 * @returns A record mapping CSS variable names to their values
 */
export declare function generateControlTokenVariables(): Record<string, string>;