import { type ResponsiveProps } from "@loke/design-system/responsive";
import { type VariantProps } from "class-variance-authority";
import { type ReactNode } from "react";
export declare const headingVariants: (props?: ({
    color?: "popover" | "destructive" | "secondary" | "card" | "primary" | "accent" | "foreground" | "n-50" | "n-100" | "n-200" | "n-300" | "n-400" | "n-500" | "n-600" | "n-700" | "n-800" | "n-900" | "n-950" | null | undefined;
    variant?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | "section" | "title" | "display" | "subtitle" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
type HeadingVariant = HeadingLevel | "display" | "title" | "subtitle" | "section";
type HeadingVariants = VariantProps<typeof headingVariants>;
type ResponsiveHeadingProps = ResponsiveProps<HeadingVariants>;
export interface HeadingProps extends Omit<ResponsiveHeadingProps, "variant"> {
    /** The HTML tag to use for the heading. Defaults to matching the variant. */
    as?: HeadingLevel;
    /** The text content of the heading. */
    children: ReactNode;
    /** Additional classes to apply to the heading. */
    className?: string;
    /**
     * The semantic role and appearance of the heading.
     * When omitted, defaults to a variant matching the HTML tag.
     */
    variant?: HeadingVariant;
}
/**
 * An opinionated heading component for displaying titles and subtitles.
 *
 * The Heading component provides semantic presets that automatically apply appropriate
 * styling based on the heading level or variant, reducing the need to specify individual props.
 */
declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
export { Heading };