@dnb/eufemia/cjs/elements/typography/Typography.d.ts

DNB Eufemia Design System UI Library

/**
 * HTML Element
 *
 */
import type { HTMLAttributes, ReactNode, Ref, RefObject } from 'react';
import type { DynamicElement, SpacingProps } from '../../shared/types';
export type TypographySize = 'x-small' | 'small' | 'basis' | 'medium' | 'large' | 'x-large' | 'xx-large';
export type TypographyAlign = 'center' | 'left' | 'right';
export type TypographyFamily = 'basis' | 'heading' | 'monospace';
export type TypographyWeight = 'regular' | 'medium' | 'bold';
export type TypographyDecoration = 'underline';
export type TypographySlant = 'italic';
export type TypographyContextType = Pick<TypographyProps, 'proseMaxWidth'> & {
    /**  Whether or not responsive typography is enabled for typography components. Default is `false`. */
    responsive?: boolean;
};
export declare const TypographyContext: import("react").Context<TypographyContextType>;
export type TypographyProviderProps = TypographyContextType & {
    children: ReactNode;
};
export type TypographyProps<ElementType extends HTMLElement = HTMLElement> = SpacingProps & HTMLAttributes<ElementType> & {
    /**
     * Defines the Element Type, like `p`.
     */
    element?: DynamicElement;
    /**
     * Sets the font size, also sets the line-height if `lineHeight` property is not set.
     */
    size?: TypographySize;
    /**
     * Sets the line height, will use same value as `size` if not set.
     */
    lineHeight?: TypographySize;
    /**
     * Sets the text alignment.
     */
    align?: TypographyAlign;
    /**
     * Sets the font family.
     */
    family?: TypographyFamily;
    /**
     * Sets the font weight.
     */
    weight?: TypographyWeight;
    /**
     * Sets the font decoration.
     */
    decoration?: TypographyDecoration;
    /**
     * Sets the font style.
     */
    slant?: TypographySlant;
    /**
     * Sets the maximum width based on character count for all Typography children. This will limit the text width to approximately the specified number of characters. Use `true` for a default value of 60ch.
     */
    proseMaxWidth?: number | boolean;
};
export type TypographyUseProps = Pick<TypographyProps, 'proseMaxWidth' | 'style' | 'className'>;
type TypographyInternalProps = {
    ref?: RefObject<HTMLElement> | Ref<unknown>;
};
declare const Typography: {
    (props: TypographyProps & TypographyInternalProps): import("react/jsx-runtime").JSX.Element;
    /** @deprecated use Typography.Context */
    Provider: ({ children, ...rest }: TypographyProviderProps) => import("react/jsx-runtime").JSX.Element;
    Context: ({ children, ...rest }: TypographyProviderProps) => import("react/jsx-runtime").JSX.Element;
};
declare const Provider: ({ children, ...rest }: TypographyProviderProps) => import("react/jsx-runtime").JSX.Element;
export default Typography;
export { Provider };
export declare function getHeadingLineHeightSize(fontSize: TypographySize): TypographySize;
/** Updates props.style based on props.proseMaxWidth and typography context values */
export declare const useTypography: <Props extends TypographyUseProps>({ proseMaxWidth: proseMaxWidthProp, ...rest }: Props) => Omit<Props & TypographyUseProps, "proseMaxWidth">;