Text

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

export type TextProps = {
  /**
   * Set the dimension of the text from one of
   * the typography system values
   */
  size?: TokensTypes["font"]["size"];
 
  /**
   * Set the sentiment of the text.
   */
  sentiment?: "positive" | "informative" | "danger" | "warning";
 
  /**
   * Set the dimmed color of the text. To keep readability and contrast,
   * you can only use dimmed colors `5`, `6`, and `7`.
   */
  dimmed?: 4 | 5 | 6 | 7 | 8;
 
  /**
   * Set the font weight of the text. The values are
   * consistent with the typography system.
   */
  weight?: "light" | "regular" | "semibold" | "bold";
 
  /**
   * Set the maximum width of the text after which it will wrap.
   */
  maxWidth?: string;
 
  /**
   * Set the text alignment of the text. This is a logical property
   * based on the direction of the text.
   * @default 'start'
   */
  align?: "start" | "center" | "end";
 
  /**
   * 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 text line-height of the text. This uses
   * the predefined tokens from the typography system.
   * @default 'standard'
   */
  lineHeight?: "none" | "extra-small" | "small" | "standard" | "large";
 
  /**
   * Assign a custom color to the text when `dimmed` or `sentiment` are not set.
   */
  textColor?: string;
 
  /**
   * Set the white-space property of the text.
   */
  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | 'break-spaces';
 
  /**
   * Set the component to render as different element
   * @default 'p'.
   */
  as?: JSX.IntrinsicElements | React.ComponentType<unknown>;
};