Standard duskmoon implemented 8 demos

Typography

Typography standardizes text, title, paragraph, link, copy, edit, and ellipsis behavior.

Import @duskmoon-dev/components/typography

22 API sections

41 documented props

6 behavior scenarios

Key API

editingicontooltiptriggerTypeenterIcontext

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Typography is most often configured through `editing`, `icon`, `tooltip`, `triggerType`.

Covered behavior

Renders root and semantic text states

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

DuskMoon Typography

Basic usage

authored

Import the component stylesheet and Typography from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function Example() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Renders root and semantic text states

test-backed

Typography scenario from the component test coverage: renders root and semantic text states.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographyRendersRootAndSemanticDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Renders title level, paragraph, and link

test-backed

Typography scenario from the component test coverage: renders title level, paragraph, and link.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographyRendersTitleLevelParagraphDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Supports copyable text

test-backed

Typography scenario from the component test coverage: supports copyable text.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographySupportsCopyableTextDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Supports editable text save and cancel

test-backed

Typography scenario from the component test coverage: supports editable text save and cancel.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographySupportsEditableTextSaveDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Supports expandable ellipsis

test-backed

Typography scenario from the component test coverage: supports expandable ellipsis.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographySupportsExpandableEllipsisDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

DuskMoon Typography

Prevents disabled link navigation

test-backed

Typography scenario from the component test coverage: prevents disabled link navigation.

Source

import "@duskmoon-dev/components/styles.css";
import { Typography } from "@duskmoon-dev/components/typography";

export function TypographyPreventsDisabledLinkNavigationDemo() {
  return (<Typography>DuskMoon Typography</Typography>);
}

Preview

Sunshine Theme

DuskMoon Typography

Moonlight Theme

DuskMoon Typography

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Typography>DuskMoon Typography</Typography>
</div>

<div data-theme="moonlight">
  <Typography>DuskMoon Typography</Typography>
</div>

API

The API reference below lists every parsed exported type or interface for Typography. Start with `editing`, `icon`, `tooltip`, `triggerType` for common usage.

Types: packages/components/src/components/typography/Typography.types.ts Scenarios: packages/components/src/components/typography/Typography.test.tsx

TypographyEditableConfig interface

Prop	Type	Required	Description
`editing`	`boolean`	No	editing configures Typography.
`icon`	`ReactNode`	No	icon configures Typography.
`tooltip`	`ReactNode`	No	tooltip configures Typography.
`triggerType`	`"icon" \| "text" \| Array<"icon" \| "text">`	No	triggerType configures Typography.
`enterIcon`	`ReactNode`	No	enterIcon configures Typography.
`text`	`string`	No	text configures Typography.
`maxLength`	`number`	No	maxLength configures Typography.
`autoSize`	`boolean \| { minRows?: number; maxRows?: number }`	No	autoSize configures Typography.
`onStart`	`() => void`	No	onStart configures Typography.
`onChange`	`(value: string) => void`	No	onChange configures Typography.
`onCancel`	`() => void`	No	onCancel configures Typography.
`onEnd`	`() => void`	No	onEnd configures Typography.

TypographyCopyableConfig interface

Prop	Type	Required	Description
`text`	`string`	No	text configures Typography.
`icon`	`ReactNode \| [ReactNode, ReactNode]`	No	icon configures Typography.
`tooltips`	`false \| ReactNode \| [ReactNode, ReactNode]`	No	tooltips configures Typography.
`format`	`TypographyCopyFormat`	No	format configures Typography.
`onCopy`	`(event?: ClipboardEvent \| React.MouseEvent<HTMLElement>) => void`	No	onCopy configures Typography.

TypographyEllipsisConfig interface

Prop	Type	Required	Description
`rows`	`number`	No	rows configures Typography.
`expandable`	`boolean \| "collapsible"`	No	expandable configures Typography.
`suffix`	`string`	No	suffix configures Typography.
`symbol`	`ReactNode \| ((expanded: boolean) => ReactNode)`	No	symbol configures Typography.
`tooltip`	`ReactNode`	No	tooltip configures Typography.
`onExpand`	`(`	No	onExpand configures Typography.
`event`	`React.MouseEvent<HTMLElement>,`	Yes	event configures Typography.
`info`	`{ expanded: boolean },`	Yes	info configures Typography.
`onEllipsis`	`(ellipsis: boolean) => void`	No	onEllipsis configures Typography.

TypographySemanticProps interface

Prop	Type	Required	Description
`type`	`TypographyStatus`	No	type configures Typography.
`disabled`	`boolean`	No	disabled configures Typography.
`mark`	`boolean`	No	mark configures Typography.
`code`	`boolean`	No	code configures Typography.
`keyboard`	`boolean`	No	keyboard configures Typography.
`underline`	`boolean`	No	underline configures Typography.
`delete`	`boolean`	No	delete configures Typography.
`strong`	`boolean`	No	strong configures Typography.
`italic`	`boolean`	No	italic configures Typography.

TypographyBehaviorProps interface

Prop	Type	Required	Description
`editable`	`TypographyEditable`	No	editable configures Typography.
`copyable`	`TypographyCopyable`	No	copyable configures Typography.
`ellipsis`	`TypographyEllipsis`	No	ellipsis configures Typography.

TextProps interface extends Omit<ComponentProps<"span">, "color">, TypographySemanticProps, TypographyBehaviorProps

Prop	Type	Required	Description
`size`	`TypographySize`	No	size configures Typography.

ParagraphProps interface extends Omit<ComponentProps<"p">, "color">, TypographySemanticProps, TypographyBehaviorProps

No direct props declared.

TitleProps interface extends Omit<ComponentProps<"h1">, "color">, TypographySemanticProps, TypographyBehaviorProps

Prop	Type	Required	Description
`level`	`TypographyLevel`	No	level configures Typography.

LinkProps interface extends Omit<ComponentProps<"a">, "color" | "type">, TypographySemanticProps

Prop	Type	Required	Description
`ellipsis`	`TypographyEllipsis`	No	ellipsis configures Typography.

TypographyStatus type

"secondary" | "success" | "warning" | "danger"

TypographySize type

"sm" | "md" | "lg"

TypographyLevel type

1 | 2 | 3 | 4 | 5

TypographyCopyFormat type

"text/plain" | "text/html"

TypographyEditable type

boolean | TypographyEditableConfig

TypographyCopyable type

boolean | TypographyCopyableConfig

TypographyEllipsis type

boolean | TypographyEllipsisConfig

TypographyProps type

ComponentProps<"div">

TextComponent type

ForwardRefExoticComponent< TextProps & RefAttributes<HTMLSpanElement> >

ParagraphComponent type

ForwardRefExoticComponent< ParagraphProps & RefAttributes<HTMLParagraphElement> >

TitleComponent type

ForwardRefExoticComponent< TitleProps & RefAttributes<HTMLHeadingElement> >

LinkComponent type

ForwardRefExoticComponent< LinkProps & RefAttributes<HTMLAnchorElement> >

TypographyComponent type

ForwardRefExoticComponent< TypographyProps & RefAttributes<HTMLDivElement> > & { Text: TextComponent