Title

import { Title } from "@lualtek/react-components";
 
export default () => {
  return <Title>Title</Title>;
};

export type TitleProps = {
  /**
   * Set the level of the title. This property only
   * affects the visual appearance of the title and not the
   * semantic meaning of the title, which you can define
   * by using the `as` property.
   * @default '1'
   */
  level?: "1" | "2" | "3" | "4" | "5" | "6" | "display";
 
  /**
   * Set the text line-height of the title. This uses
   * the predefined tokens from the typography system.
   * @default 'standard'
   */
  lineHeight?: "none" | "extra-small" | "small" | "standard" | "large";
 
  /**
   * Set the text alignment of the title based on the text direction.
   * @default 'start'
   */
  align?: "start" | "center" | "end";
 
  /**
   * Set the maximum width of the text after which it will wrap.
   */
  maxWidth?: string;
 
  /**
   * Enable or disable the responsiveness of the text. If disabled,
   * the text will be always the same size across all breakpoints.
   * @default true
   */
  responsive?: boolean;
 
  /**
   * Set the white-space property of the title.
   */
  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | 'break-spaces';
 
  /**
   * Set the component to render as different element
   * @default 'span'.
   */
  as?: JSX.IntrinsicElements | React.ComponentType<unknown>;
};