Theming & Configurationduskmoonimplemented5 demos

App

App provides application-level holders for message and notification APIs.

Import@duskmoon-dev/components/app

4API sections

14documented props

3behavior scenarios

Key API

componentmessagemaxCountdurationnotificationmodal

Usage

When to use

Use it immediately after user actions or system checks that need visible confirmation.
Choose the least interruptive feedback surface that still makes the state clear.

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

User feedback

Covers transient, inline, or blocking feedback patterns for user actions and system status.

Action recovery

Shows how the component keeps next actions visible after success, warning, or failure states.

Primary API surface

App is most often configured through `component`, `message`, `maxCount`, `duration`.

Covered behavior

Provides message and notification APIs through context

Feature Demos

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

Preview

DuskMoon App

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { App } from "@duskmoon-dev/components/app";

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

Preview

DuskMoon App

Provides message and notification APIs through context

test-backed

App scenario from the component test coverage: provides message and notification apis through context.

Source

import "@duskmoon-dev/components/styles.css";
import { App } from "@duskmoon-dev/components/app";

export function AppProvidesMessageAndNotificationDemo() {
  return (<App>DuskMoon App</App>);
}

Preview

DuskMoon App

Supports custom root component and className

test-backed

App scenario from the component test coverage: supports custom root component and classname.

Source

import "@duskmoon-dev/components/styles.css";
import { App } from "@duskmoon-dev/components/app";

export function AppSupportsCustomRootComponentDemo() {
  return (<App>DuskMoon App</App>);
}

Preview

DuskMoon App

Supports fragment mode

test-backed

App scenario from the component test coverage: supports fragment mode.

Source

import "@duskmoon-dev/components/styles.css";
import { App } from "@duskmoon-dev/components/app";

export function AppSupportsFragmentModeDemo() {
  return (<App>DuskMoon App</App>);
}

Preview

Sunshine Theme

DuskMoon App

Moonlight Theme

DuskMoon App

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

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

API

The API reference below lists every parsed exported type or interface for App. Start with `component`, `message`, `maxCount`, `duration` for common usage.

Types: packages/components/src/components/app/App.types.tsScenarios: packages/components/src/components/app/App.test.tsx

AppPropsinterface extends Omit< ComponentProps<"div">, "children" | "className" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures App.
`className`	`string`	No	className configures App.
`component`	`false \| ElementType`	No	component configures App.
`message`	`{`	No	message configures App.
`maxCount`	`number`	No	maxCount configures App.
`duration`	`number`	No	duration configures App.
`notification`	`{`	No	notification configures App.
`maxCount`	`number`	No	maxCount configures App.
`duration`	`number \| null`	No	duration configures App.

AppInstanceinterface

Prop	Type	Required	Description
`message`	`MessageApi`	Yes	message configures App.
`notification`	`NotificationApi`	Yes	notification configures App.
`modal`	`ModalComponent`	Yes	modal configures App.

AppComponentinterface extends ForwardRefExoticComponent< AppProps & RefAttributes<HTMLElement> >

Prop	Type	Required	Description
`useApp`	`() => AppInstance`	Yes	useApp configures App.
`Context`	`Context<AppContextValue>`	Yes	Context configures App.

AppContextValuetype

AppInstance