import { TNode, Value, Renderable } from '@tempots/dom';
import type { ThemeColorName } from '../../tokens';
import { ExtendedColor } from '../theme/style-utils';
export type RibbonCorner = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
export type RibbonOptions = {
    /** Background/text color theme (defaults to 'primary') */
    color?: Value<ThemeColorName | ExtendedColor>;
    /** Extra classes */
    class?: Value<string>;
    /** Horizontal nudge along the top edge before rotation (px if number). Default: 0px */
    inset?: Value<number | string>;
    /** Fine vertical correction to align the band crossing (px if number). Default: -1px */
    offset?: Value<number | string>;
    /** Minimum width of the band (px if number). Default: null */
    width?: Value<number | string>;
    /** Rotation angle in degrees. Default: 45 */
    angle?: Value<number>;
    /** Corner position. Default: 'top-end' */
    corner?: Value<RibbonCorner>;
};
/**
 * Ribbon: renders diagonal content at a specified corner.
 * Note: The parent container should be positioned (e.g., position: relative) for best results.
 */
export declare function Ribbon({ color, class: cls, inset, offset, width, angle, corner, }: RibbonOptions, ...children: TNode[]): Renderable;
