@loke/design-system
Version:
A design system with individually importable components
33 lines (32 loc) • 1.84 kB
text/typescript
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 };