@roku-sdk/components 0.0.0-stage → 2.18.0

package/src/sg-nodes/label-list.props.ts

@@ -0,0 +1,86 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IArrayGridProps } from "./array-grid";
+import type { FontValue, HorizAlign, ResType, Vector2D } from "./types";
+
+/**
+ * Properties for the LabelList component.
+ *
+ * Extends {@link IArrayGridProps} with text styling and alignment options
+ * specific to label-based list items.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/labellist}
+ */
+export interface ILabelListProps extends IArrayGridProps {
+    /**
+     * Specifies the horizontal alignment of the text in the list item area
+     * specified by the `itemSize` field value. The text is always centered
+     * vertically in the list item area.
+     *
+     * @default "left"
+     * @see {@link https://developer.roku.com/dev/docs/labellist | LabelList textHorizAlign}
+     */
+    textHorizAlign?: HorizAlign;
+
+    /**
+     * Specifies the text color for unfocused list items.
+     *
+     * @default "0xddddddff"
+     * @example "0xFFFFFFFF"
+     */
+    color?: string;
+
+    /**
+     * Specifies the text color for focused list items.
+     *
+     * @default "0x262626ff"
+     * @example "0x000000FF"
+     */
+    focusedColor?: string;
+
+    /**
+     * Specifies the font for unfocused list items.
+     * Can be a SystemFont enum, registry font string, or Font component.
+     *
+     * @default system default
+     * @example
+     * ```tsx
+     * // Using SystemFont enum (recommended)
+     * font={SystemFont.Medium}
+     *
+     * // Using registry font string
+     * font="font:MediumSystemFont"
+     *
+     * // Using Font component for custom size
+     * font={<Font uri="pkg:/fonts/MyFont.ttf" size={24} />}
+     * ```
+     */
+    font?: FontValue;
+
+    /**
+     * Specifies the font for focused list items.
+     * Can be a SystemFont enum, registry font string, or Font component.
+     *
+     * @default system default
+     * @example
+     * ```tsx
+     * // Using SystemFont enum (recommended)
+     * focusedFont={SystemFont.MediumBold}
+     *
+     * // Using registry font string
+     * focusedFont="font:MediumBoldSystemFont"
+     *
+     * // Using Font component for custom size
+     * focusedFont={<Font uri="pkg:/fonts/MyFontBold.ttf" size={24} />}
+     * ```
+     */
+    focusedFont?: FontValue;
+
+    /**
+     * Specifies the width and height of each item in the list.
+     *
+     * @default [ 510, 72 ] for FHD mode, [ 340, 48 ] for HD mode
+     */
+    itemSize?: ResType<Vector2D>;
+}

package/src/sg-nodes/label-list.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { ILabelListProps } from "./label-list.props";
+import { Component } from "./types";
+export type { ILabelListProps } from "./label-list.props";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// LabelList Properties
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * LabelList is a simple list class that displays a list of text items.
+ *
+ * Each item can include a text string and an optional icon positioned to the left
+ * of the text string. List items can be organized into sections demarcated by
+ * labelled horizontal divider lines.
+ *
+ * Default value for `itemSize` is `[510, 72]` for FHD mode, and `[340, 48]` for HD mode.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <labelList
+ *     itemSize={[440, 48]}
+ *     textHorizAlign="left"
+ *     color="0xddddddff"
+ *     focusedColor="0x262626ff"
+ *     content={
+ *         <contentNode>
+ *             <contentNode title="Drama" />
+ *             <contentNode title="Action" />
+ *             <contentNode title="Horror" />
+ *             <contentNode title="Comedy" />
+ *         </contentNode>
+ *     }
+ *     onItemSelected={(index) => console.log(`Selected: ${index}`)}
+ * />
+ * ```
+ *
+ * @example With sections
+ * ```tsx
+ * <labelList
+ *     itemSize={[440, 48]}
+ *     content={
+ *         <contentNode>
+ *             <contentNode CONTENTTYPE="SECTION" title="Movies">
+ *                 <contentNode title="Drama" />
+ *                 <contentNode title="Action" />
+ *             </contentNode>
+ *             <contentNode CONTENTTYPE="SECTION" title="TV Shows">
+ *                 <contentNode title="Comedy" />
+ *                 <contentNode title="Drama" />
+ *             </contentNode>
+ *         </contentNode>
+ *     }
+ * />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/labellist}
+ * @see {@link https://github.com/rokudev/samples/tree/master/ux%20components/lists%20and%20grids/LabelListExample | Sample App}
+ */
+export const LabelList: Component<ILabelListProps> = props => {
+    return <labelList {...props}></labelList>;
+};

package/src/sg-nodes/label.props.ts

@@ -0,0 +1,207 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { EventHandler, FontValue, HorizAlign, ResType, VertAlign } from "../types";
+import type { IGroupProps } from "./group.props";
+
+/**
+ * Properties for the LabelBase node.
+ *
+ * LabelBase is an abstract base class for the Label and MultiStyleLabel nodes. It provides
+ * common text rendering properties including alignment, line wrapping, and ellipsization.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/label-base}
+ */
+export interface ILabelBaseProps extends IGroupProps {
+    /** Specifies the text to be displayed. */
+    text?: string;
+    /**
+     * Specifies the width of the label. If set to zero, the text is always displayed as a single line,
+     * and the actual width is determined by the rendered width of the text.
+     */
+    width?: ResType<number>;
+    /**
+     * Specifies the height of the label. If set to zero, the actual height is determined by the value
+     * of the numLines field if it is greater than zero, or by the actual height of the text.
+     */
+    height?: ResType<number>;
+    /**
+     * Font to use for rendering text. Can be a system font or custom font path.
+     *
+     * **System Fonts (use SystemFont enum or strings):**
+     *
+     * Regular fonts:
+     * - `SystemFont.Small` or `"font:SmallSystemFont"`
+     * - `SystemFont.Medium` or `"font:MediumSystemFont"`
+     * - `SystemFont.Large` or `"font:LargeSystemFont"`
+     * - `SystemFont.ExtraLarge` or `"font:ExtraLargeSystemFont"`
+     *
+     * Bold fonts:
+     * - `SystemFont.SmallBold` or `"font:SmallBoldSystemFont"`
+     * - `SystemFont.MediumBold` or `"font:MediumBoldSystemFont"`
+     * - `SystemFont.LargeBold` or `"font:LargeBoldSystemFont"`
+     * - `SystemFont.ExtraLargeBold` or `"font:ExtraLargeBoldSystemFont"`
+     *
+     * Other:
+     * - `SystemFont.Caption` or `"font:CaptionFont"`
+     * - `SystemFont.ClosedCaption` or `"font:ClosedCaptionFont"`
+     * - `SystemFont.Theme` or `"font:ThemeFont"`
+     *
+     * @example
+     * ```tsx
+     * // Using system font enum (recommended)
+     * <Label font={SystemFont.Large} text="Large text" />
+     *
+     * // Using registry font string
+     * <Label font="font:LargeSystemFont" text="Large text" />
+     *
+     * // Using Font component for custom size
+     * <Label font={<Font uri="pkg:/fonts/CustomFont.ttf" size={32} />} text="Custom sized font" />
+     * ```
+     */
+    font?: FontValue;
+    /** Specifies the text color. Default is 0xddddddff. */
+    color?: string;
+    /**
+     * Specifies the horizontal alignment of the text. Positions text relative to the computed width of the label.
+     * - "left": Aligns text to the left edge
+     * - "center": Centers text horizontally
+     * - "right": Aligns text to the right edge
+     */
+    horizAlign?: HorizAlign;
+    /**
+     * Specifies the vertical alignment of the text. Positions text relative to the computed height of the label.
+     * - "top": Aligns text to the top edge
+     * - "center": Centers text vertically
+     * - "bottom": Aligns text to the bottom edge
+     */
+    vertAlign?: VertAlign;
+    /**
+     * Renders numeric values using tabular (fixed-width) fonts, ensuring digits align vertically
+     * across multiple lines of text.
+     * @since Roku OS 14.0
+     */
+    monospacedDigits?: boolean;
+    /**
+     * If the height field value is zero, provides an alternate way to specify the height of the bounding
+     * rectangle of the label by specifying the number of lines of text to display.
+     */
+    numLines?: number;
+    /**
+     * If both height and numLines field values are zero, specifies the maximum number of lines of text
+     * to be displayed. If the text requires more lines than maxLines, the last line will be ellipsized.
+     */
+    maxLines?: number;
+    /**
+     * Controls how text is broken into multiple lines. When true and width is greater than zero,
+     * text is broken into lines at natural word boundaries. When false, only a single line is displayed.
+     */
+    wrap?: boolean;
+    /**
+     * If the height field value is greater than zero, determines whether the last line of visible text
+     * is displayed if it would be clipped vertically. When true, partially visible lines are shown.
+     */
+    displayPartialLines?: boolean;
+    /**
+     * Controls whether the last line of text should be ellipsized by whole words or by characters.
+     * When true, text is ellipsized by whole words (e.g., "This is the last line of...").
+     * When false, text is ellipsized by characters (e.g., "This is the last line of tex...").
+     */
+    ellipsizeOnBoundary?: boolean;
+    /**
+     * Specifies additional characters (beyond space and hyphen) to be used to determine where text
+     * can be broken into lines when wrapping.
+     */
+    wordBreakChars?: string;
+    /** Specifies alternate characters to display when the last line of text is ellipsized. Default is "...". */
+    ellipsisText?: string;
+    /**
+     * Event fired when the isTextEllipsized state changes. The handler receives a boolean indicating
+     * whether the last line of text has been ellipsized.
+     */
+    onIsTextEllipsized?: EventHandler<boolean>;
+}
+
+/**
+ * Properties for the Label node.
+ *
+ * Label is used to display a string of text with a single style. It extends LabelBase
+ * with additional properties for line spacing and text truncation control.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/label}
+ */
+export interface ILabelProps extends ILabelBaseProps {
+    /**
+     * If the text is displayed on more than one line, specifies the amount of additional space
+     * added between lines (in pixels).
+     */
+    lineSpacing?: number;
+    /**
+     * If the width field value is greater than zero, provides a set of characters used to determine
+     * how to truncate the last line of text that extends beyond the specified width. If none of the
+     * characters in the last line of text are included in the truncateOnDelimiter field value string,
+     * the entire last line is not displayed. When set to a non-empty string, the ellipsizeOnBoundary
+     * field value is ignored.
+     */
+    truncateOnDelimiter?: string;
+    /**
+     * Specifies whether to display the end or beginning of text that overflows its available width.
+     * When true, the end of the text is shown with leading ellipsis (e.g., "...jumps over the lazy dog").
+     * When false, the start of the text is shown with trailing ellipsis (e.g., "the quick brown fox jumps...").
+     */
+    leadingEllipsis?: boolean;
+    /**
+     * Event fired when the wrappedLines value changes. The handler receives the number of wrapped
+     * lines currently displayed in the label.
+     */
+    onWrappedLines?: EventHandler<number>;
+}
+
+/**
+ * Defines the font styling properties for a named style in MultiStyleLabel.
+ *
+ * DrawingStyle specifies the size, URI, and color of a font style that can be
+ * referenced by name in the MultiStyleLabel's text content using markup tags.
+ */
+export interface DrawingStyle {
+    /**
+     * Specifies the size of the font in points.
+     * Note: This value is ignored when using system fonts.
+     */
+    fontSize?: number;
+    /**
+     * Specifies a TrueType/OpenType font file (e.g., "pkg:/fonts/font.ttf")
+     * or a system font URI (e.g., "font:MediumBoldSystemFont").
+     */
+    fontUri?: string;
+    /** Specifies the text color in hex format (e.g., "#FF0000FF" for red). */
+    color?: string;
+}
+
+/**
+ * Properties for the MultiStyleLabel node.
+ *
+ * MultiStyleLabel is used to create labels with mixed styles, allowing different fonts,
+ * sizes, and colors within the same text block. Styles are defined in the drawingStyles
+ * property and applied using markup tags in the text content.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/multi-style-label}
+ */
+export interface IMultiStyleLabelProps extends ILabelBaseProps {
+    /**
+     * Defines named font styles that can be applied to portions of the text.
+     * Each key becomes a markup tag name that can be used in the text property.
+     *
+     * @example
+     * ```tsx
+     * drawingStyles={{
+     *     bold: { fontUri: "font:MediumBoldSystemFont", color: "#FFFFFFFF" },
+     *     highlight: { fontUri: "font:MediumSystemFont", color: "#FFFF00FF" }
+     * }}
+     * // Then use in text: "Normal <bold>bold text</bold> and <highlight>highlighted</highlight>"
+     * ```
+     */
+    drawingStyles?: {
+        [key: string]: DrawingStyle;
+    };
+}

package/src/sg-nodes/label.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { Component } from "../types";
+import type { ILabelProps, IMultiStyleLabelProps } from "./label.props";
+export type { ILabelBaseProps, ILabelProps, DrawingStyle, IMultiStyleLabelProps } from "./label.props";
+
+/**
+ * Label component for displaying single-style text.
+ *
+ * The Label node is used to display a string of text with a single font, size, and color.
+ * It provides extensive control over text layout, wrapping, and ellipsization.
+ *
+ * @example
+ * ```tsx
+ * <label
+ *     text="Hello, World!"
+ *     font={SystemFont.Large}
+ *     color="#FFFFFFFF"
+ *     width={400}
+ *     wrap={true}
+ *     horizAlign="center"
+ * />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/label}
+ */
+export const Label: Component<ILabelProps> = props => {
+    return <label {...props}></label>;
+};
+
+/**
+ * MultiStyleLabel component for displaying text with mixed styles.
+ *
+ * The MultiStyleLabel node allows different fonts, sizes, and colors to be combined
+ * within the same text block using simple markup syntax. Define styles in drawingStyles
+ * and reference them by name as XML-like tags in the text content.
+ *
+ * @example
+ * ```tsx
+ * <multiStyleLabel
+ *     text="Welcome to <appName>My App</appName>! Press <key>OK</key> to continue."
+ *     width={600}
+ *     wrap={true}
+ *     drawingStyles={{
+ *         appName: { fontUri: "font:LargeBoldSystemFont", color: "#00FF00FF" },
+ *         key: { fontUri: "font:MediumBoldSystemFont", color: "#FFFF00FF" }
+ *     }}
+ * />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/multi-style-label}
+ */
+export const MultiStyleLabel: Component<IMultiStyleLabelProps> = props => {
+    return <multiStyleLabel {...props}></multiStyleLabel>;
+};

package/src/sg-nodes/layout-group.props.ts

@@ -0,0 +1,69 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IGroupProps } from "./group.props";
+import type { LayoutDirection, LayoutGroupHorizAlign, LayoutGroupVertAlign } from "./types";
+
+/**
+ * Props for the LayoutGroup component.
+ * @extends IGroupProps
+ */
+export interface ILayoutGroupProps extends IGroupProps {
+    /**
+     * Specifies whether the children of the LayoutGroup are arranged
+     * vertically or horizontally.
+     * - `"vert"`: Children are arranged vertically in a column
+     * - `"horiz"`: Children are arranged horizontally in a row
+     * @default "vert"
+     */
+    layoutDirection?: LayoutDirection;
+
+    /**
+     * Specifies the horizontal alignment of the children of the LayoutGroup.
+     * - `"left"`: Children are left-aligned
+     * - `"center"`: Children are centered horizontally
+     * - `"right"`: Children are right-aligned
+     * - `"custom"`: Explicitly set the x translation of each child of the LayoutGroup. If the layoutDirection is "horiz", custom will not be a valid setting. Instead, "left" will be used to do the child layout.
+     *
+     * **Important**: Alignment is relative to the LayoutGroup's `translation` point.
+     * The default translation is `[0, 0]` (top-left corner). To center children
+     * on screen, set `translation` to the screen center (e.g., `[960, 540]` for FHD).
+     *
+     * @default "left"
+     */
+    horizAlignment?: LayoutGroupHorizAlign;
+
+    /**
+     * Specifies the vertical alignment of the children of the LayoutGroup.
+     * - `"top"`: Children are top-aligned
+     * - `"center"`: Children are centered vertically
+     * - `"bottom"`: Children are bottom-aligned
+     * - `"custom"`: Explicitly set the y translation of each child of the LayoutGroup. If the layoutDirection is "vert", custom will not be a valid setting. Instead, "top" will be used to do the child layout.
+     *
+     * **Important**: Alignment is relative to the LayoutGroup's `translation` point.
+     * The default translation is `[0, 0]` (top-left corner). To center children
+     * on screen, set `translation` to the screen center (e.g., `[960, 540]` for FHD).
+     *
+     * @default "top"
+     */
+    vertAlignment?: LayoutGroupVertAlign;
+
+    /**
+     * Specifies the spacing between children of the LayoutGroup.
+     * The array contains spacing values where each element corresponds
+     * to the space after the child at that index. If the array has fewer
+     * elements than children, the last value is used for remaining spaces.
+     * If empty, no spacing is applied between children.
+     * @default []
+     */
+    itemSpacings?: number[];
+
+    /**
+     * When set to `true`, adds spacing after the last child node.
+     * When set to `false`, no spacing is added after the last child.
+     * This is useful for controlling the total height/width of the LayoutGroup
+     * when `itemSpacings` is specified.
+     * @default true
+     */
+    addItemSpacingAfterChild?: boolean;
+}

package/src/sg-nodes/layout-group.tsx

@@ -0,0 +1,75 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { JSX } from "@roku-sdk/solid";
+
+import type { ILayoutGroupProps } from "./layout-group.props";
+export type { ILayoutGroupProps } from "./layout-group.props";
+
+// Re-export types for convenience
+export type { LayoutGroupHorizAlign, LayoutDirection, LayoutGroupVertAlign } from "./types";
+
+/**
+ * A container node that automatically positions its child nodes in either
+ * a horizontal row or vertical column layout with configurable alignment
+ * and spacing.
+ *
+ * LayoutGroup simplifies the task of positioning nodes by automatically
+ * calculating and applying the proper translation to each child node
+ * based on the `layoutDirection`, alignment settings, and `itemSpacings`.
+ *
+ * **Alignment and Translation**:
+ * The `horizAlignment` and `vertAlignment` properties align children relative
+ * to the LayoutGroup's `translation` point (default `[0, 0]`). To center
+ * the LayoutGroup and its content on screen, you must set the `translation`
+ * to the desired center point.
+ *
+ * For FHD (1920×1080) resolution:
+ * - Horizontal center: `1920 / 2 = 960`
+ * - Vertical center: `1080 / 2 = 540`
+ *
+ * @see https://developer.roku.com/dev/docs/layoutgroup
+ *
+ * @example
+ * // Vertical layout with left-aligned children (default)
+ * <layoutGroup
+ *     layoutDirection="vert"
+ *     itemSpacings={[20, 20, 20]}
+ * >
+ *     <label text="Item 1" />
+ *     <label text="Item 2" />
+ *     <label text="Item 3" />
+ * </layoutGroup>
+ *
+ * @example
+ * // Center a vertical layout on screen (FHD 1920×1080)
+ * // translation must be set to screen center for alignment to work as expected
+ * <layoutGroup
+ *     translation={[960, 540]}
+ *     layoutDirection="vert"
+ *     horizAlignment="center"
+ *     vertAlignment="center"
+ *     itemSpacings={[20, 20]}
+ * >
+ *     <label text="Centered Item 1" />
+ *     <label text="Centered Item 2" />
+ *     <label text="Centered Item 3" />
+ * </layoutGroup>
+ *
+ * @example
+ * // Horizontal layout centered at bottom of screen (FHD)
+ * <layoutGroup
+ *     translation={[960, 980]}
+ *     layoutDirection="horiz"
+ *     horizAlignment="center"
+ *     vertAlignment="bottom"
+ *     itemSpacings={[30, 30]}
+ * >
+ *     <poster width={100} height={100} />
+ *     <poster width={100} height={100} />
+ *     <poster width={100} height={100} />
+ * </layoutGroup>
+ */
+export function LayoutGroup(props: ILayoutGroupProps): JSX.Element {
+    return <layoutGroup {...props}></layoutGroup>;
+}

package/src/sg-nodes/list-panel.props.ts

@@ -0,0 +1,104 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { EventHandler, JSX } from "../types";
+import type { IPanelProps } from "./panel.props";
+
+/**
+ * Properties for the ListPanel component.
+ *
+ * ListPanel extends Panel to add a list of items that can be used to navigate
+ * to other panels using the Roku Sliding Panels pattern. The list can be a
+ * LabelList or MarkupList node, and supports the "Create Next Panel" mechanism
+ * for dynamic panel creation.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/listpanel | Roku ListPanel Documentation}
+ */
+export interface IListPanelProps extends IPanelProps {
+    /**
+     * A Label node to be displayed just above the upper-left corner of the list.
+     * Typically used to show a title or category name.
+     *
+     * @default Label node
+     */
+    leftLabel?: JSX.Element;
+
+    /**
+     * A Label node to be displayed just above the upper-right corner of the list.
+     * Typically used to show "N of M" item count information.
+     *
+     * @default Label node
+     */
+    rightLabel?: JSX.Element;
+
+    /**
+     * If set to true and the list is a MarkupList with sections, the section
+     * title for the currently focused section will be displayed as the `leftLabel`.
+     *
+     * @default false
+     */
+    showSectionLabels?: boolean;
+
+    /**
+     * Fired when the "Create Next Panel" mechanism is triggered. The event value
+     * contains the index of the list item that triggered the panel creation.
+     *
+     * This is the READ_ONLY `createNextPanelIndex` field from the SceneGraph ListPanel,
+     * exposed as an event handler for reactive usage.
+     *
+     * @see {@link https://developer.roku.com/dev/docs/listpanel#createNextPanelIndex | createNextPanelIndex Field}
+     */
+    onCreateNextPanelIndex?: EventHandler<number>;
+
+    /**
+     * A Panel node to be added to the parent PanelSet as the next panel.
+     * Setting this field adds the panel to the right of the current ListPanel.
+     *
+     * When using the managed `ListPanel` component, children extending Panel
+     * are automatically assigned to this field.
+     *
+     * @default false
+     */
+    nextPanel?: JSX.Element;
+
+    /**
+     * Controls whether the "Create Next Panel" mechanism is enabled.
+     * When true, navigating to a list item triggers the `onCreateNextPanelIndex` event.
+     * Set to false to disable dynamic panel creation.
+     *
+     * @default true
+     */
+    createNextPanelOnItemFocus?: boolean;
+}
+
+/**
+ * Properties for the unmanaged SceneGraph ListPanel component.
+ *
+ * This interface represents the raw ListPanel properties without the automatic
+ * child management provided by the managed `ListPanel` component. It is used
+ * internally and is not exposed to developers.
+ *
+ * @internal
+ */
+export interface IFullPanelProps extends IListPanelProps {
+    /**
+     * A LabelList or MarkupList node to be displayed in the ListPanel.
+     * The list provides the navigation items for the panel.
+     *
+     * When using the managed `ListPanel` component, children extending ArrayGrid
+     * are automatically assigned to this field.
+     *
+     * @default null
+     */
+    list?: JSX.Element;
+    /**
+     * A Panel node to be added to the parent PanelSet as the next panel.
+     * Setting this field adds the panel to the right of the current ListPanel.
+     *
+     * When using the managed `ListPanel` component, children extending Panel
+     * are automatically assigned to this field.
+     *
+     * @default false
+     */
+    nextPanel?: JSX.Element;
+}