carbon-components-svelte/src/Text/Text.svelte.d.ts

Svelte implementation of the Carbon Design System

import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

type $RestProps = SvelteHTMLElements["any"];

type $Props = {
  /**
   * Set the Carbon type style.
   * @default "body-long-01"
   */
  type?: "caption-01" | "caption-02" | "label-01" | "label-02" | "helper-text-01" | "helper-text-02" | "body-short-01" | "body-short-02" | "body-long-01" | "body-long-02" | "code-01" | "code-02" | "heading-01" | "heading-02" | "productive-heading-01" | "productive-heading-02" | "productive-heading-03" | "productive-heading-04" | "productive-heading-05" | "productive-heading-06" | "productive-heading-07" | "expressive-paragraph-01" | "expressive-heading-01" | "expressive-heading-02" | "expressive-heading-03" | "expressive-heading-04" | "expressive-heading-05" | "expressive-heading-06" | "quotation-01" | "quotation-02" | "display-01" | "display-02" | "display-03" | "display-04";

  /**
   * Set the text color using a Carbon text token.
   * @default undefined
   */
  color?: "primary" | "secondary" | "placeholder" | "helper" | "on-color" | "inverse" | "error" | "disabled";

  /**
   * Set the font weight.
   * @default undefined
   */
  weight?: "light" | "regular" | "semibold";

  /**
   * Set to `true` to render italic text
   * @default false
   */
  italic?: boolean;

  /**
   * Set the font family.
   * @default undefined
   */
  family?: "mono" | "sans" | "serif" | "sans-condensed" | "sans-hebrew";

  /**
   * Set text wrapping behavior.
   * @default undefined
   */
  wrap?: "break-word" | "nowrap";

  /**
   * Set to `true` to balance line lengths across broken headings and short blocks
   * @default false
   */
  balance?: boolean;

  /**
   * Set the max width. Numbers are treated as pixels; strings accept any CSS length (e.g. `"38ch"`, `"20rem"`).
   * @default undefined
   */
  maxWidth?: number | string | undefined;

  /**
   * Set to `true` to span the full width of the container
   * @default false
   */
  fullWidth?: boolean;

  /**
   * Truncate text after this many lines. Values above `1` use multiline mode (end clamp only).
   * @default undefined
   */
  lines?: number | undefined;

  /**
   * Specify `"end"` or `"front"`. `"front"` only works when `lines` is `1`.
   * @default "end"
   */
  clamp?: "end" | "front";

  /**
   * Specify the tag name.
   * @default "p"
   */
  tag?: keyof HTMLElementTagNameMap;

  children?: (this: void) => void;

  [key: `data-${string}`]: unknown;
};

export type TextProps = Omit<$RestProps, keyof $Props> & $Props;

export default class Text extends SvelteComponentTyped<
  TextProps,
  Record<string, any>,
  { default: Record<string, never> }
> {}