ds-smart-ui
Version:
Smart UI is a React component library that helps you build accessible and responsive web applications.
54 lines (52 loc) • 2.41 kB
TypeScript
import { ReactNode, CSSProperties } from 'react';
/**
* Typography component to display text with various styles and variants.
* It supports different typography variants, colors, and text styles like underline, italic, and line-through.
* @component
* @param {Object} props - Component properties.
* @param {TypographyVariant} props.variant - The typography variant to apply (e.g., h1, b16, p1).
* @param {ReactNode} props.children - The text content to display.
* @param {string} [props.className] - Additional CSS classes for customization.
* @param {string} [props.color] - Optional color for the text.
* @param {boolean} [props.underline=false] - Whether to underline the text.
* @param {boolean} [props.italic=false] - Whether to italicize the text.
* @param {boolean} [props.lineThrough=false] - Whether to apply line-through style to the text.
* @param {CSSProperties} [props.style] - Additional inline styles for the text.
* @param {"left" | "center" | "right"} [props.align] - Text alignment (default is left).
* @param {string} [props.id] - Optional ID for testing purposes.
* @returns {JSX.Element} The Typography component.
* @example
* <Typography
* variant="h1"
* color="var(--color-primary)"
* underline
* italic
* lineThrough
* style={{ fontSize: '24px' }}
* align="center"
* id="typography-example"
* >
* This is a heading with custom styles
* </Typography>
*/
export type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "b16" | "b14" | "b12" | "b10" | "b8" | "p1" | "p2" | "p3" | "overline" | `${"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "b16" | "b14" | "b12" | "b10" | "b8" | "p1" | "p2" | "p3" | "overline"}${"Medium" | "Bold"}`;
interface TypographyProps {
variant: TypographyVariant;
children: ReactNode;
className?: string;
color?: string;
underline?: boolean;
italic?: boolean;
lineThrough?: boolean;
style?: CSSProperties;
align?: "left" | "center" | "right";
id?: string;
[key: string]: any;
}
declare const Typography: ({ variant, children, className, color, underline, italic, lineThrough, style, align, id, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
export declare const HelperText: ({ error, helperText, id, }: {
error: boolean;
helperText: string;
id?: string;
}) => import("react/jsx-runtime").JSX.Element;
export default Typography;