@navinc/base-react-components

import { DetailedHTMLProps, HTMLAttributes } from 'react'; export declare const sizes: { readonly display1: { readonly regular: { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; }; readonly emphasized: { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; }; }; readonly display2: { readonly regular: { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; }; readonly emphasized: { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; }; }; readonly title1: { readonly regular: { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; }; readonly emphasized: { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; }; }; readonly title2: { readonly regular: { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; }; readonly emphasized: { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; }; }; readonly title3: { readonly regular: { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 400; readonly letterSpacing: "0"; }; readonly emphasized: { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 600; readonly letterSpacing: "0"; }; }; readonly headline: { readonly emphasized: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 600; readonly letterSpacing: "0"; }; }; readonly body1: { readonly regular: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; }; readonly emphasized: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; }; }; readonly body2: { readonly regular: { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; }; readonly emphasized: { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; }; }; readonly caption1: { readonly regular: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 400; readonly letterSpacing: "0"; }; readonly emphasized: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0"; }; readonly uppercase: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0.5px"; readonly textTransform: "uppercase"; }; }; readonly caption2: { readonly regular: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 400; readonly letterSpacing: "0"; }; readonly emphasized: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0"; }; readonly uppercase: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0.5px"; readonly textTransform: "uppercase"; }; }; }; export declare const cssProps: readonly ["fontSize", "lineHeight", "fontWeight", "letterSpacing", "textTransform"]; export declare const variants: readonly ["regular", "emphasized", "uppercase"]; export declare const fontFamilies: readonly ["Inter", "Manrope"]; export declare const componentVariants: readonly ["p", "span", "h1", "h2", "h3", "h4", "h5", "h6"]; type CssPropKey = (typeof cssProps)[number]; type SizeKey = keyof typeof sizes; type VariantStyleKey = (typeof variants)[number]; type FontFamilyKey = (typeof fontFamilies)[number]; type componentKey = (typeof componentVariants)[number]; export declare const flatVariants: ("body2" | "display1" | "display2" | "title1" | "title2" | "title3" | "headline" | "body1" | "caption1" | "caption2")[]; export declare const getStyle: (cssProp: CssPropKey, size?: SizeKey, variant?: VariantStyleKey) => any; export type CopyProps = { size?: SizeKey; variant?: VariantStyleKey; color?: string; underline?: boolean; fontFamily?: FontFamilyKey; component?: componentKey; } & DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>; /** * A Copy component that includes the same functionality as Text(deprecating) and Header(deprecating). * * By removing the dependency on size being tied to header tags, we can use this component for any text component. * * When using nested Copy use `component='span'` to properly cast the nested `p` tags. * * Link to Design Doc: http://go/typography * * @param size - optional - defaults to `body2` * @param variant - optional - defaults to the first variant in the size object (only headline defaults to `emphasized`) * @param color - optional - defaults to `navNeutralDark` - a color string or a theme color * @param component - optional - defaults to `p` - for nested elements, use `span` * @param underline - optional * @param fontFamily - optional - defaults to `Inter` * @param props - optional - any other props that can be passed to a p tag * @returns a p tag styled with the size, variant, color, underline, and fontFamily props * @example * // default size will be `body2` * <Copy size="title1">Yar Pirate Ipsum</Copy> * @example * // example with all props being used * <Copy size="body1" variant="emphasized" color="navStatusPositive" underline={true} fontFamily="Manrope"> * Yar Pirate Ipsum * </Copy> * @example * // casting as a Header * <Copy component='h1' size="title1">Yar Pirate Ipsum</Copy> * @example * // This is an example of a nested Copy component. The inner Copy component is using the `as` prop with a value of 'span' * <Copy> * This is a nested{' '} * <Copy component="span" size="headline" color="navStatusNegative"> * copy * </Copy>{' '} * component. The inner Copy component is using the `component` prop with a value of 'span' * </Copy> */ export declare const CopyVariant: import("styled-components").StyledComponent<({ component, ...props }: CopyProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>; export {};