shelving 1.219.1 → 1.220.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.219.1",
+	"version": "1.220.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/app/App.d.ts

@@ -1,7 +1,7 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 import type { PossibleMeta } from "../util/index.js";
-export interface AppProps extends PossibleMeta {
-    children: ReactNode;
+import type { ChildProps } from "../util/props.js";
+export interface AppProps extends PossibleMeta, ChildProps {
 }
 /**
  * Root component for an application.

package/ui/app/App.tsx

@@ -1,11 +1,10 @@
-import { type ReactElement, type ReactNode, useEffect } from "react";
+import { type ReactElement, useEffect } from "react";
 import { MetaContext, requireMeta } from "../misc/MetaContext.js";
 import type { PossibleMeta } from "../util/index.js";
+import type { ChildProps } from "../util/props.js";
 import APP_CSS from "./App.module.css";
 
-export interface AppProps extends PossibleMeta {
-	children: ReactNode;
-}
+export interface AppProps extends PossibleMeta, ChildProps {}
 
 const APP_CLASS = APP_CSS.app;
 

package/ui/block/Address.d.ts

@@ -1,8 +1,8 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { type AddressData } from "../../schema/AddressSchema.js";
 import type { Nullish } from "../../util/null.js";
-export interface AddressProps {
-    children: ReactNode;
+import type { ChildProps } from "../util/props.js";
+export interface AddressProps extends ChildProps {
 }
 export interface PhysicalAddressProps {
     name?: Nullish<string>;

package/ui/block/Address.tsx

@@ -1,13 +1,12 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { type AddressData, formatAddress } from "../../schema/AddressSchema.js";
 import type { Nullish } from "../../util/null.js";
 import { Small } from "../inline/Small.js";
 import { Strong } from "../inline/Strong.js";
+import type { ChildProps } from "../util/props.js";
 import styles from "./Address.module.css";
 
-export interface AddressProps {
-	children: ReactNode;
-}
+export interface AddressProps extends ChildProps {}
 
 export interface PhysicalAddressProps {
 	name?: Nullish<string>;

package/ui/block/Block.d.ts

@@ -1,8 +1,8 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
 export declare const BLOCK_CLASS: string | undefined;
 /** Variants for elements. */
-export interface BlockProps {
-    children?: ReactNode;
+export interface BlockProps extends OptionalChildProps {
 }
 /** A single `<div>` element with element spacing. */
 export declare function Block({ children }: BlockProps): ReactElement;

package/ui/block/Block.tsx

@@ -1,13 +1,12 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { getModuleClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/props.js";
 import BLOCK_CSS from "./Block.module.css";
 
 export const BLOCK_CLASS = getModuleClass(BLOCK_CSS, "block");
 
 /** Variants for elements. */
-export interface BlockProps {
-	children?: ReactNode;
-}
+export interface BlockProps extends OptionalChildProps {}
 
 /** A single `<div>` element with element spacing. */
 export function Block({ children }: BlockProps): ReactElement {

package/ui/block/Blockquote.d.ts

@@ -1,5 +1,5 @@
-import type { ReactElement, ReactNode } from "react";
-export interface BlockquoteProps {
-    children?: ReactNode;
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
+export interface BlockquoteProps extends OptionalChildProps {
 }
 export declare function Blockquote({ children }: BlockquoteProps): ReactElement;

package/ui/block/Blockquote.tsx

@@ -1,9 +1,8 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Blockquote.module.css";
 
-export interface BlockquoteProps {
-	children?: ReactNode;
-}
+export interface BlockquoteProps extends OptionalChildProps {}
 
 export function Blockquote({ children }: BlockquoteProps): ReactElement {
 	return <blockquote className={styles.blockquote}>{children}</blockquote>;

package/ui/block/Card.d.ts

@@ -1,9 +1,8 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { type ClickableProps } from "../form/Clickable.js";
 import { type ColorVariants } from "../misc/Color.js";
 import { type Status } from "../misc/Status.js";
 export interface CardProps extends ClickableProps, ColorVariants {
-    children?: ReactNode;
     /** Constrain the card to narrow width (defaults to full-width). */
     narrow?: boolean | undefined;
     /** Constrain the card to wide width (defaults to full-width). */

package/ui/block/Card.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { Clickable, type ClickableProps } from "../form/Clickable.js";
 import { type ColorVariants, getColorClass } from "../misc/Color.js";
 import { getStatusClass, type Status } from "../misc/Status.js";
@@ -6,8 +6,6 @@ import { getClass, getModuleClass } from "../util/css.js";
 import CARD_CSS from "./Card.module.css";
 
 export interface CardProps extends ClickableProps, ColorVariants {
-	children?: ReactNode;
-
 	/** Constrain the card to narrow width (defaults to full-width). */
 	narrow?: boolean | undefined;
 

package/ui/block/Definitions.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
-export interface DefinitionsProps {
-    children?: ReactNode;
+import type { OptionalChildProps } from "../util/props.js";
+export interface DefinitionsProps extends OptionalChildProps {
     /** Lay out each term/value pair side-by-side instead of stacked (collapses to stacked at narrow widths). */
     row?: boolean | undefined;
 }
@@ -16,11 +16,9 @@ export interface DefinitionsProps {
  * </Definitions>
  */
 export declare function Definitions({ children, ...variants }: DefinitionsProps): ReactElement;
-export interface DefinitionProps {
+export interface DefinitionProps extends OptionalChildProps {
     /** The term — what's being defined. Rendered as `<dt>`. */
     term: ReactNode;
-    /** The value — the definition. Rendered as `<dd>`. */
-    children?: ReactNode;
 }
 /**
  * A single term/value pair within a `<Definitions>` list.

package/ui/block/Definitions.tsx

@@ -1,9 +1,9 @@
 import type { ReactElement, ReactNode } from "react";
 import { getModuleClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Definitions.module.css";
 
-export interface DefinitionsProps {
-	children?: ReactNode;
+export interface DefinitionsProps extends OptionalChildProps {
 	/** Lay out each term/value pair side-by-side instead of stacked (collapses to stacked at narrow widths). */
 	row?: boolean | undefined;
 }
@@ -23,11 +23,9 @@ export function Definitions({ children, ...variants }: DefinitionsProps): ReactE
 	return <dl className={getModuleClass(styles, "definitions", variants)}>{children}</dl>;
 }
 
-export interface DefinitionProps {
+export interface DefinitionProps extends OptionalChildProps {
 	/** The term — what's being defined. Rendered as `<dt>`. */
 	term: ReactNode;
-	/** The value — the definition. Rendered as `<dd>`. */
-	children?: ReactNode;
 }
 
 /**

package/ui/block/Figure.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
-export interface FigureProps {
-    children?: ReactNode;
+import type { OptionalChildProps } from "../util/props.js";
+export interface FigureProps extends OptionalChildProps {
     caption?: ReactNode;
 }
 export declare function Figure({ children, caption }: FigureProps): ReactElement;

package/ui/block/Figure.tsx

@@ -1,8 +1,8 @@
 import type { ReactElement, ReactNode } from "react";
+import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Figure.module.css";
 
-export interface FigureProps {
-	children?: ReactNode;
+export interface FigureProps extends OptionalChildProps {
 	caption?: ReactNode;
 }
 

package/ui/block/Flex.d.ts

@@ -1,4 +1,5 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
 import FLEX_CSS from "./Flex.module.css";
 /** Variants for flex areas. */
 export interface FlexVariants {
@@ -19,8 +20,7 @@ export interface FlexVariants {
     /** Reverse the order of the elements. */
     reverse?: boolean | undefined;
 }
-export interface FlexProps extends FlexVariants {
-    children?: ReactNode | undefined;
+export interface FlexProps extends FlexVariants, OptionalChildProps {
 }
 /** Block with flex children. */
 export declare function Flex({ children, ...variants }: FlexProps): ReactElement;

package/ui/block/Flex.tsx

@@ -1,5 +1,6 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { getClass, getModuleClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/props.js";
 import { BLOCK_CLASS } from "./Block.js";
 import FLEX_CSS from "./Flex.module.css";
 
@@ -23,9 +24,7 @@ export interface FlexVariants {
 	reverse?: boolean | undefined;
 }
 
-export interface FlexProps extends FlexVariants {
-	children?: ReactNode | undefined;
-}
+export interface FlexProps extends FlexVariants, OptionalChildProps {}
 
 /** Block with flex children. */
 export function Flex({ children, ...variants }: FlexProps): ReactElement {

package/ui/block/Heading.d.ts

@@ -1,13 +1,12 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
+import type { ChildProps } from "../util/props.js";
 /** Props shared by `Title`, `Heading`, and `Subheading`. */
-export interface HeadingProps {
+export interface HeadingProps extends ChildProps {
     /**
      * Heading level (`1`–`6`) — sets the rendered `<h1>`–`<h6>` tag.
      * Avoid overriding this in practice: pick the component that matches the level — `Title` (`<h1>`), `Heading` (`<h2>`), or `Subheading` (`<h3>`) — so the visual size and the document outline stay in step.
      */
     level?: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
-    /** Heading content. */
-    children: ReactNode;
 }
 /**
  * Section heading — renders an `<h2>`.

package/ui/block/Heading.tsx

@@ -1,16 +1,15 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { getModuleClass } from "../util/css.js";
+import type { ChildProps } from "../util/props.js";
 import styles from "./Heading.module.css";
 
 /** Props shared by `Title`, `Heading`, and `Subheading`. */
-export interface HeadingProps {
+export interface HeadingProps extends ChildProps {
 	/**
 	 * Heading level (`1`–`6`) — sets the rendered `<h1>`–`<h6>` tag.
 	 * Avoid overriding this in practice: pick the component that matches the level — `Title` (`<h1>`), `Heading` (`<h2>`), or `Subheading` (`<h3>`) — so the visual size and the document outline stay in step.
 	 */
 	level?: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
-	/** Heading content. */
-	children: ReactNode;
 }
 
 /**

package/ui/block/Paragraph.d.ts

@@ -1,7 +1,7 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
 import PARAGRAPH_CSS from "./Paragraph.module.css";
-export interface ParagraphProps {
-    children?: ReactNode;
+export interface ParagraphProps extends OptionalChildProps {
     /** Align the paragraph to the right. */
     right?: boolean | undefined;
     /** Align the paragraph to the center. */

package/ui/block/Paragraph.tsx

@@ -1,9 +1,9 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { getModuleClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/props.js";
 import PARAGRAPH_CSS from "./Paragraph.module.css";
 
-export interface ParagraphProps {
-	children?: ReactNode;
+export interface ParagraphProps extends OptionalChildProps {
 	/** Align the paragraph to the right. */
 	right?: boolean | undefined;
 	/** Align the paragraph to the center. */

package/ui/block/Preformatted.d.ts

@@ -1,6 +1,6 @@
-import type { ReactElement, ReactNode } from "react";
-export interface PreformattedProps {
-    children?: ReactNode;
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
+export interface PreformattedProps extends OptionalChildProps {
     /** Disable line wrapping — long lines overflow horizontally instead of wrapping. */
     nowrap?: boolean | undefined;
 }

package/ui/block/Preformatted.tsx

@@ -1,9 +1,9 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { getModuleClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Preformatted.module.css";
 
-export interface PreformattedProps {
-	children?: ReactNode;
+export interface PreformattedProps extends OptionalChildProps {
 	/** Disable line wrapping — long lines overflow horizontally instead of wrapping. */
 	nowrap?: boolean | undefined;
 }

package/ui/block/Prose.d.ts

@@ -1,6 +1,6 @@
-import type { ReactElement, ReactNode } from "react";
-export interface ProseProps {
-    children?: ReactNode;
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
+export interface ProseProps extends OptionalChildProps {
 }
 /** A section of longform text containing lots of `<p>` or `<ul>` style elements. */
 export declare function Prose({ children }: ProseProps): ReactElement;

package/ui/block/Prose.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import codeStyles from "../inline/Code.module.css";
 import deletedStyles from "../inline/Deleted.module.css";
 import emphasisStyles from "../inline/Emphasis.module.css";
@@ -10,6 +10,7 @@ import strongStyles from "../inline/Strong.module.css";
 import subscriptStyles from "../inline/Subscript.module.css";
 import superscriptStyles from "../inline/Superscript.module.css";
 import { getClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/props.js";
 import addressStyles from "./Address.module.css";
 import blockquoteStyles from "./Blockquote.module.css";
 import definitionsStyles from "./Definitions.module.css";
@@ -48,9 +49,7 @@ const PROSE_STYLES = getClass(
 	dividerStyles.prose,
 );
 
-export interface ProseProps {
-	children?: ReactNode;
-}
+export interface ProseProps extends OptionalChildProps {}
 
 /** A section of longform text containing lots of `<p>` or `<ul>` style elements. */
 export function Prose({ children }: ProseProps): ReactElement {

package/ui/block/Section.d.ts

@@ -1,6 +1,6 @@
-import type { ReactElement, ReactNode } from "react";
-export interface SectionProps {
-    children?: ReactNode;
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
+export interface SectionProps extends OptionalChildProps {
     /** Constrain the section to narrow width (defaults to full-width). */
     narrow?: boolean;
     /** Constrain the section to wide width (defaults to full-width). */

package/ui/block/Section.tsx

@@ -1,9 +1,9 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { getModuleClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Section.module.css";
 
-export interface SectionProps {
-	children?: ReactNode;
+export interface SectionProps extends OptionalChildProps {
 	/** Constrain the section to narrow width (defaults to full-width). */
 	narrow?: boolean;
 	/** Constrain the section to wide width (defaults to full-width). */

package/ui/block/Table.d.ts

@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-export interface TableProps {
-    children: ReactNode;
+import type { ChildProps } from "../util/props.js";
+export interface TableProps extends ChildProps {
 }
 export declare function Table({ children }: TableProps): import("react/jsx-runtime").JSX.Element;

package/ui/block/Table.tsx

@@ -1,9 +1,7 @@
-import type { ReactNode } from "react";
+import type { ChildProps } from "../util/props.js";
 import styles from "./Table.module.css";
 
-export interface TableProps {
-	children: ReactNode;
-}
+export interface TableProps extends ChildProps {}
 
 export function Table({ children }: TableProps) {
 	return (

package/ui/block/Video.d.ts

@@ -1,17 +1,15 @@
-import { type MouseEvent, type ReactElement, type ReactNode } from "react";
-export interface VideoProps {
-    children?: ReactNode;
+import { type MouseEvent, type ReactElement } from "react";
+import type { ChildProps, OptionalChildProps } from "../util/props.js";
+export interface VideoProps extends OptionalChildProps {
     /** Constrain the video to narrow width (defaults to full-width). */
     narrow?: boolean;
     /** Constrain the video to wide width (defaults to full-width). */
     wide?: boolean;
 }
-export interface VideoButtonsProps {
-    children: ReactNode;
+export interface VideoButtonsProps extends ChildProps {
     left?: boolean;
 }
-export interface VideoButtonProps {
-    children: ReactNode;
+export interface VideoButtonProps extends ChildProps {
     title?: string | undefined;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     danger?: boolean;

package/ui/block/Video.tsx

@@ -1,11 +1,10 @@
 import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
-import { type MouseEvent, type ReactElement, type ReactNode, useEffect, useRef, useState } from "react";
+import { type MouseEvent, type ReactElement, useEffect, useRef, useState } from "react";
 import { getModuleClass } from "../util/css.js";
+import type { ChildProps, OptionalChildProps } from "../util/props.js";
 import styles from "./Video.module.css";
 
-export interface VideoProps {
-	children?: ReactNode;
-
+export interface VideoProps extends OptionalChildProps {
 	/** Constrain the video to narrow width (defaults to full-width). */
 	narrow?: boolean;
 
@@ -13,13 +12,11 @@ export interface VideoProps {
 	wide?: boolean;
 }
 
-export interface VideoButtonsProps {
-	children: ReactNode;
+export interface VideoButtonsProps extends ChildProps {
 	left?: boolean;
 }
 
-export interface VideoButtonProps {
-	children: ReactNode;
+export interface VideoButtonProps extends ChildProps {
 	title?: string | undefined;
 	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 	danger?: boolean;

package/ui/dialog/Dialog.d.ts

@@ -1,13 +1,12 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 import type { Callback } from "../../util/function.js";
 import type { ButtonVariants } from "../form/Button.js";
-export interface DialogProps {
-    children?: ReactNode;
+import type { OptionalChildProps } from "../util/props.js";
+export interface DialogProps extends OptionalChildProps {
     onClose?: Callback;
 }
 export declare const Dialog: import("react").MemoExoticComponent<({ children, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element>;
-export interface DialogCloseButtonProps extends ButtonVariants {
-    children?: ReactNode | undefined;
+export interface DialogCloseButtonProps extends ButtonVariants, OptionalChildProps {
 }
 /** Button that closes its wrapping dialog with an X icon. */
 export declare function DialogCloseButton({ children, ...variants }: DialogCloseButtonProps): ReactElement;

package/ui/dialog/Dialog.tsx

@@ -1,12 +1,12 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
-import { type MouseEvent, memo, type ReactElement, type ReactNode, Suspense, useEffect, useRef } from "react";
+import { type MouseEvent, memo, type ReactElement, Suspense, useEffect, useRef } from "react";
 import type { Callback } from "../../util/function.js";
 import type { ButtonVariants } from "../form/Button.js";
 import { getModuleClass } from "../util/css.js";
+import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Dialog.module.css";
 
-export interface DialogProps {
-	children?: ReactNode;
+export interface DialogProps extends OptionalChildProps {
 	onClose?: Callback;
 }
 
@@ -39,9 +39,7 @@ function _closeOnBackdropClick({ currentTarget, target }: MouseEvent<HTMLDialogE
 	if (target instanceof Element && target.closest("a:any-link, nav button:enabled")) currentTarget.close();
 }
 
-export interface DialogCloseButtonProps extends ButtonVariants {
-	children?: ReactNode | undefined;
-}
+export interface DialogCloseButtonProps extends ButtonVariants, OptionalChildProps {}
 
 /** Button that closes its wrapping dialog with an X icon. */
 export function DialogCloseButton({ children = <XMarkIcon />, ...variants }: DialogCloseButtonProps): ReactElement {

package/ui/dialog/Dialogs.d.ts

@@ -1,5 +1,6 @@
 import { type ReactElement, type ReactNode } from "react";
 import { ArrayStore } from "../../store/ArrayStore.js";
+import type { ChildProps } from "../util/props.js";
 /** Store a list of dialogs. */
 export declare class DialogsStore extends ArrayStore<ReactElement> {
     /** Show a new dialog. */
@@ -10,8 +11,7 @@ export declare class DialogsStore extends ArrayStore<ReactElement> {
 /** Return the current dialogs context. */
 export declare function requireDialogs(): DialogsStore;
 declare const _componentProps: unique symbol;
-export interface DialogsContextProps {
-    children: ReactNode;
+export interface DialogsContextProps extends ChildProps {
 }
 export interface DialogsProps {
     readonly [_componentProps]?: never;

package/ui/dialog/Dialogs.tsx

@@ -3,6 +3,7 @@ import { useInstance } from "../../react/useInstance.js";
 import { useStore } from "../../react/useStore.js";
 import { ArrayStore } from "../../store/ArrayStore.js";
 import { getRandomKey } from "../../util/random.js";
+import type { ChildProps } from "../util/props.js";
 import { Dialog } from "./Dialog.js";
 
 /** How long before a hidden dialogs are removed from the DOM (allow time for animates to complete). */
@@ -44,9 +45,7 @@ export function requireDialogs(): DialogsStore {
 
 declare const _componentProps: unique symbol;
 
-export interface DialogsContextProps {
-	children: ReactNode;
-}
+export interface DialogsContextProps extends ChildProps {}
 
 export interface DialogsProps {
 	readonly [_componentProps]?: never;

package/ui/dialog/Modal.d.ts

@@ -1,5 +1,5 @@
-import type { ReactElement, ReactNode } from "react";
-export type ModalProps = {
-    children?: ReactNode | undefined;
-};
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
+export interface ModalProps extends OptionalChildProps {
+}
 export declare function Modal({ children }: ModalProps): ReactElement;

package/ui/dialog/Modal.tsx

@@ -1,9 +1,8 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
 import styles from "./Modal.module.css";
 
-export type ModalProps = {
-	children?: ReactNode | undefined;
-};
+export interface ModalProps extends OptionalChildProps {}
 
 export function Modal({ children }: ModalProps): ReactElement {
 	return <aside className={styles.modal}>{children}</aside>;

package/ui/form/CheckboxInput.d.ts

@@ -1,7 +1,7 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
+import type { OptionalChildProps } from "../util/props.js";
 import { type ValueInputProps } from "./Input.js";
-export interface CheckboxProps extends ValueInputProps<boolean> {
-    children?: ReactNode | undefined;
+export interface CheckboxProps extends ValueInputProps<boolean>, OptionalChildProps {
 }
 /** Checkbox element. */
 export declare function CheckboxInput({ name, title, placeholder, required, disabled, message, value, onValue, children, }: CheckboxProps): ReactElement;

package/ui/form/CheckboxInput.tsx

@@ -1,10 +1,9 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactElement } from "react";
 import { notNullish } from "../../util/null.js";
+import type { OptionalChildProps } from "../util/props.js";
 import { CHECKBOX_CLASS, FLEX_LABEL_INPUT_CLASS, type ValueInputProps } from "./Input.js";
 
-export interface CheckboxProps extends ValueInputProps<boolean> {
-	children?: ReactNode | undefined;
-}
+export interface CheckboxProps extends ValueInputProps<boolean>, OptionalChildProps {}
 
 /** Checkbox element. */
 export function CheckboxInput({