@roku-sdk/components 0.0.0-stage → 2.19.0

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

@@ -0,0 +1,105 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { INodeProps } from "./node";
+import type { EventHandler, Rect2D, ResType, Vector2D } from "./types";
+
+/**
+ * Properties for the Group node.
+ *
+ * Group is a layout container node that serves as the base class for organizing and positioning
+ * child nodes in the SceneGraph. It provides transformation, rendering, and clipping capabilities
+ * for managing visual hierarchies.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/group}
+ */
+export interface IGroupProps extends INodeProps {
+    /** If true, the node and its children are rendered. If false, the node and its children do not render. */
+    visible?: boolean;
+    /** Defines the origin of the node local coordinate system relative to its parent node. */
+    translation?: ResType<Vector2D>;
+    /**
+     * Sets the opacity of the node and its children. Opacity is the opposite of transparency.
+     * Opacity values range from 0.0 (fully transparent) to 1.0 (fully opaque). As the SceneGraph
+     * is traversed, the opacity values are combined by multiplying the current accumulated opacity
+     * with the node opacity, so that if the accumulated opacity of a node ancestors is 0.25 (75%
+     * transparent), the node will have opacity of 0.25 or less. This allows entire branches of the
+     * SceneGraph to fade in and out by animating the opacity of the node at the root of the branch.
+     */
+    opacity?: number;
+    /**
+     * Defines the rotation angle about the scaleRotateCenter point (in radians) of the node local
+     * coordinate system. Positive values specify a counterclockwise rotation, negative values specify
+     * a clockwise rotation. For some Roku Player hardware, specifically Roku Players without OpenGL
+     * graphics support, only rotations of 0, 90, 180 and 270 degrees (in equivalent radians) are supported.
+     */
+    rotation?: number;
+    /** Defines the scale factor to be applied to the node local coordinate. */
+    scale?: Vector2D;
+    /** Describes the location of a point in the node local coordinate that serves as the center of the scale and rotation operations. */
+    scaleRotateCenter?: ResType<Vector2D>;
+    /**
+     * Controls the rendering order of the node relative to its children.
+     * - "renderFirst": any drawing done by this node will be done before the node children are rendered
+     * - "renderLast": any drawing done by this node will be done after the node children are rendered (default)
+     */
+    childRenderOrder?: "renderFirst" | "renderLast";
+    /**
+     * If true, the node overall transformation is determined by combining the accumulated transformation
+     * matrix of all of its ancestors in the SceneGraph with the node local 2D transformation matrix
+     * described by its translation, rotation, scale and scaleRotateCenter fields. If false, the accumulated
+     * transformation of all of its ancestors in the SceneGraph is ignored and only the node local
+     * transformation matrix is used. This causes the node to be transformed relative to the root of the
+     * SceneGraph (that is, the Scene component).
+     */
+    inheritParentTransform?: boolean;
+    /**
+     * If true, the node opacity is determined by multiplying opacity attribute of the node by the opacity
+     * of the parent node, which may have been determined by multiplying the opacity of its ancestor nodes.
+     * If false, the node opacity is determined by the opacity attribute set for the node or the default
+     * opacity attribute value.
+     */
+    inheritParentOpacity?: boolean;
+    /**
+     * Specifies a rectangle in the node local coordinate system that is used to limit the region where
+     * this node and its children can render. If a non-empty rectangle is specified, then all drawing by
+     * this node and its children will be limited to that rectangular area.
+     * ClippingRects can be specified by the node or by any of its ancestors in the SceneGraph.
+     * ClippingRects are automatically set by some nodes such as lists and grids.
+     * ClippingRects are always clipped to the screen boundaries, so if a clippingRect is specified that
+     * is partially or completely offscreen, it will be clipped to the screen boundaries. With respect to
+     * render tracking, although the node could be completely within the bounds of the specified clippingRect,
+     * it's renderTracking field could be set to "none" if the portion of the clippingRect it occupies is
+     * completely offscreen.
+     */
+    clippingRect?: ResType<Rect2D>;
+    /**
+     * Used in combination with the numRenderPasses field of nodes extended from the ArrayGrid abstract
+     * node class, to optimize rendering of lists and grids. This should never be set to a non-zero value
+     * unless you are optimizing the performance of a list or grid rendering by specifying the sequence of
+     * rendering operations for sub-elements of the list or grid items, and have set the numRenderPasses
+     * field value for the list or grid to a value greater than 1. If the numRenderPasses field value for
+     * the list or grid is set to a value greater than 1, you must set this field to a value greater than 0
+     * for all sub-elements of the list or grid items, and not greater than the numRenderPasses field value.
+     * If the numRenderPasses field is set to a value greater than 1, and you set this field for a list or
+     * grid item sub-element to 0 (the default), or a value greater than the numRenderPasses field value,
+     * the list or grid item sub-element will not render.
+     */
+    renderPass?: number;
+    /** Set to true to suppress the default CVAA text to speech. This allows apps to provide their own custom implementation. */
+    muteAudioGuide?: boolean;
+    /** If true, renderTracking will be set to a string describing how much of the node is rendered on screen. */
+    enableRenderTracking?: boolean;
+    /**
+     * Event fired when the render tracking state changes. The value is set to "disabled" when enableRenderTracking
+     * is set to false. The following options are only available when enableRenderTracking is set to true:
+     * - "disabled": Set when enableRenderTracking is false.
+     * - "none": Set when the node's visible field is false, opacity is 0.0, the node is completely offscreen,
+     *   or lies completely outside the clippingRect's coordinates.
+     * - "partial": Set when the node is visible with opacity > 0.0 and is partially offscreen or lies partially
+     *   inside the clippingRect's coordinates.
+     * - "full": Set when the node is visible with opacity > 0.0 and is completely onscreen or lies completely
+     *   inside the clippingRect's coordinates.
+     */
+    onRenderTracking?: EventHandler<"disabled" | "none" | "partial" | "full">;
+}

package/src/sg-nodes/group.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IGroupProps } from "./group.props";
+import { Component } from "./types";
+export type { IGroupProps } from "./group.props";
+
+/**
+ * Group component - a layout container for organizing and positioning child nodes.
+ *
+ * Group is a layout container node that serves as the base class for organizing and positioning
+ * child nodes in the SceneGraph. It provides transformation, rendering, and clipping capabilities
+ * for managing visual hierarchies.
+ *
+ * @example
+ * ```tsx
+ * <group
+ *     translation={[100, 50]}
+ *     opacity={0.8}
+ * >
+ *     <rectangle width={200} height={100} color="#0000FFFF" />
+ *     <label text="Hello World" />
+ * </group>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/group}
+ */
+export const Group: Component<IGroupProps> = (props: IGroupProps) => {
+    return <group {...props}></group>;
+};

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;
+}