SurfacesDmduskmoonimplemented5 demos

DmAuxiliary

DmAuxiliary shows supporting content with optional actions and a close control.

Import@duskmoon-dev/components/dm-auxiliary

2API sections

10documented props

3behavior scenarios

Key API

contenthideCloseiconactionsextraonClose

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

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

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmAuxiliary is most often configured through `content`, `hideClose`, `icon`, `actions`.

Covered behavior

Renders html content and closes

Feature Demos

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

Preview

DuskMoon Dm Auxiliary

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { DmAuxiliary } from "@duskmoon-dev/components/dm-auxiliary";

export function Example() {
  return (<DmAuxiliary>DuskMoon Dm Auxiliary</DmAuxiliary>);
}

Preview

DuskMoon Dm Auxiliary

Renders html content and closes

test-backed

DmAuxiliary scenario from the component test coverage: renders html content and closes.

Source

import "@duskmoon-dev/components/styles.css";
import { DmAuxiliary } from "@duskmoon-dev/components/dm-auxiliary";

export function DmAuxiliaryRendersHtmlContentAndDemo() {
  return (<DmAuxiliary>DuskMoon Dm Auxiliary</DmAuxiliary>);
}

Preview

DuskMoon Dm Auxiliary

Supports children, hidden close, actions, extra, and custom icon

test-backed

DmAuxiliary scenario from the component test coverage: supports children, hidden close, actions, extra, and custom icon.

Source

import "@duskmoon-dev/components/styles.css";
import { DmAuxiliary } from "@duskmoon-dev/components/dm-auxiliary";

export function DmAuxiliarySupportsChildrenHiddenCloseDemo() {
  return (<DmAuxiliary>DuskMoon Dm Auxiliary</DmAuxiliary>);
}

Preview

DuskMoon Dm Auxiliary

Does not render without content

test-backed

DmAuxiliary scenario from the component test coverage: does not render without content.

Source

import "@duskmoon-dev/components/styles.css";
import { DmAuxiliary } from "@duskmoon-dev/components/dm-auxiliary";

export function DmAuxiliaryDoesNotRenderWithoutDemo() {
  return (<DmAuxiliary>DuskMoon Dm Auxiliary</DmAuxiliary>);
}

Preview

Sunshine Theme

DuskMoon Dm Auxiliary

Moonlight Theme

DuskMoon Dm Auxiliary

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">
  <DmAuxiliary>DuskMoon Dm Auxiliary</DmAuxiliary>
</div>

<div data-theme="moonlight">
  <DmAuxiliary>DuskMoon Dm Auxiliary</DmAuxiliary>
</div>

API

The API reference below lists every parsed exported type or interface for DmAuxiliary. Start with `content`, `hideClose`, `icon`, `actions` for common usage.

Types: packages/components/src/components/dm-auxiliary/DmAuxiliary.types.tsScenarios: packages/components/src/components/dm-auxiliary/DmAuxiliary.test.tsx

DmAuxiliaryPropsinterface extends Omit< ComponentProps<"div">, "content" | "children" >

Prop	Type	Required	Description
`content`	`string`	No	content configures DmAuxiliary.
`children`	`ReactNode`	No	children configures DmAuxiliary.
`hideClose`	`boolean`	No	hideClose configures DmAuxiliary.
`icon`	`ReactNode`	No	icon configures DmAuxiliary.
`actions`	`DmAuxiliaryAction[]`	No	actions configures DmAuxiliary.
`extra`	`ReactNode`	No	extra configures DmAuxiliary.
`onClose`	`() => void`	No	onClose configures DmAuxiliary.

DmAuxiliaryActioninterface

Prop	Type	Required	Description
`label`	`ReactNode`	Yes	label configures DmAuxiliary.
`onClick`	`() => void`	No	onClick configures DmAuxiliary.
`disabled`	`boolean`	No	disabled configures DmAuxiliary.