@navinc/base-react-components

import { HTMLAttributes } from 'react'; import { VariantProps } from 'class-variance-authority'; export declare const sizes: readonly ["display1", "display2", "title1", "title2", "title3", "headline", "body1", "body2", "caption1", "caption2"]; declare const styledSizes: { readonly display1: { readonly regular: { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly display2: { readonly regular: { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly title1: { readonly regular: { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly title2: { readonly regular: { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly title3: { readonly regular: { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly headline: { readonly regular: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly body1: { readonly regular: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly body2: { readonly regular: { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: undefined; }; readonly caption1: { readonly regular: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0.5px"; readonly fontFamily: string; readonly textTransform: "uppercase"; }; }; readonly caption2: { readonly regular: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly emphasized: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; }; readonly uppercase: { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0.5px"; readonly fontFamily: string; readonly textTransform: "uppercase"; }; }; }; export declare const variants: readonly ["regular", "emphasized", "uppercase"]; export declare const componentVariants: readonly ["p", "span", "h1", "h2", "h3", "h4", "h5", "h6"]; export type SizeKey = keyof typeof styledSizes; type VariantStyleKey = (typeof variants)[number]; export type CopyVariantStylesProps = { size?: SizeKey; variant?: VariantStyleKey; }; export declare const typographyStyles: ({ size, variant }: CopyVariantStylesProps) => { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "45px"; readonly lineHeight: "52px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 400; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "36px"; readonly lineHeight: "42px"; readonly fontWeight: 700; readonly letterSpacing: "-0.5px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "28px"; readonly lineHeight: "34px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "22px"; readonly lineHeight: "28px"; readonly fontWeight: 600; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "20px"; readonly lineHeight: "24px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "16px"; readonly lineHeight: "22px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 400; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "14px"; readonly lineHeight: "20px"; readonly fontWeight: 500; readonly letterSpacing: "-0.25px"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "12px"; readonly lineHeight: "16px"; readonly fontWeight: 600; readonly letterSpacing: "0.5px"; readonly fontFamily: string; readonly textTransform: "uppercase"; } | { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 400; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0"; readonly fontFamily: string; readonly textTransform: "inherit"; } | { readonly fontSize: "11px"; readonly lineHeight: "13px"; readonly fontWeight: 500; readonly letterSpacing: "0.5px"; readonly fontFamily: string; readonly textTransform: "uppercase"; }; declare const BaseCopy: import("react").ForwardRefExoticComponent<VariantProps<(props?: ({ component?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | null | undefined; underline?: boolean | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string> & Omit<HTMLAttributes<HTMLParagraphElement>, "color"> & { size?: SizeKey; variant?: VariantStyleKey; } & import("react").RefAttributes<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 component - optional - defaults to `p` - for nested elements, use `span` * @param underline - optional * @param props - optional - any other props that can be passed to a p tag * @returns a p tag styled with the size, variant, and underline * @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" underline={true}> * 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"> * copy * </Copy>{' '} * component. The inner Copy component is using the `component` prop with a value of 'span' * </Copy> * * @deprecated Use our custom typography classes and tailwind instead: * ``` * <p className="display1-emphasized text-onSurface">Text</p> * instead of * <Copy size="display1" variant="emphasized" color="onSurface">Text</Copy> * ``` */ export declare const Copy: typeof BaseCopy; export declare const CopyInheritColor: import("react").ComponentType<VariantProps<(props?: ({ component?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | null | undefined; underline?: boolean | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string> & Omit<HTMLAttributes<HTMLParagraphElement>, "color"> & { size?: SizeKey; variant?: VariantStyleKey; } & import("react").RefAttributes<HTMLParagraphElement>>; /** Copy, but with the color defaulted to `onSurface`. Eventually, Copy should probably use the same default */ export declare const CopyOnSurface: import("react").ComponentType<VariantProps<(props?: ({ component?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | null | undefined; underline?: boolean | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string> & Omit<HTMLAttributes<HTMLParagraphElement>, "color"> & { size?: SizeKey; variant?: VariantStyleKey; } & import("react").RefAttributes<HTMLParagraphElement>>; export {};