Data Displayduskmoonimplemented3 demos

Watermark

Watermark adds repeated ownership or confidentiality marks behind content.

Import@duskmoon-dev/components/watermark

2API sections

15documented props

1behavior scenarios

Key API

contentimagewidthheightrotatezIndex

Usage

When to use

Use it when users need to scan structured content and act on individual records.
Prefer it over ad hoc markup when the content has repeatable fields, hierarchy, or navigation state.

Implementation notes

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

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

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

Features

Structured records

Designed for repeated or hierarchical content where users scan, compare, and inspect details.

Stateful interactions

Documents the props that control sorting, selection, expansion, pagination, or value changes where available.

Primary API surface

Watermark is most often configured through `content`, `image`, `width`, `height`.

Covered behavior

Renders content and generated watermark layer

Feature Demos

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

Preview

DuskMoon Watermark

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Watermark } from "@duskmoon-dev/components/watermark";

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

Preview

DuskMoon Watermark

Renders content and generated watermark layer

test-backed

Watermark scenario from the component test coverage: renders content and generated watermark layer.

Source

import "@duskmoon-dev/components/styles.css";
import { Watermark } from "@duskmoon-dev/components/watermark";

export function WatermarkRendersContentAndGeneratedDemo() {
  return (<Watermark>DuskMoon Watermark</Watermark>);
}

Preview

Sunshine Theme

DuskMoon Watermark

Moonlight Theme

DuskMoon Watermark

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">
  <Watermark>DuskMoon Watermark</Watermark>
</div>

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

API

The API reference below lists every parsed exported type or interface for Watermark. Start with `content`, `image`, `width`, `height` for common usage.

Types: packages/components/src/components/watermark/Watermark.types.tsScenarios: packages/components/src/components/watermark/Watermark.test.tsx

WatermarkPropsinterface extends Omit<ComponentProps<"div">, "content">

Prop	Type	Required	Description
`content`	`ReactNode`	No	content configures Watermark.
`image`	`string`	No	image configures Watermark.
`width`	`number`	No	width configures Watermark.
`height`	`number`	No	height configures Watermark.
`rotate`	`number`	No	rotate configures Watermark.
`zIndex`	`number`	No	zIndex configures Watermark.
`gap`	`[number, number]`	No	gap configures Watermark.
`offset`	`[number, number]`	No	offset configures Watermark.
`font`	`WatermarkFont`	No	font configures Watermark.
`inherit`	`boolean`	No	inherit configures Watermark.

WatermarkFontinterface

Prop	Type	Required	Description
`color`	`string`	No	color configures Watermark.
`fontSize`	`number`	No	fontSize configures Watermark.
`fontWeight`	`CSSProperties["fontWeight"]`	No	fontWeight configures Watermark.
`fontFamily`	`string`	No	fontFamily configures Watermark.
`fontStyle`	`CSSProperties["fontStyle"]`	No	fontStyle configures Watermark.