@roku-sdk/components 0.0.0-stage → 2.19.0

package/src/sg-nodes/dialog.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { Modal } from "../modal-dialog";
+import type { IDialogProps } from "./dialog.props";
+import { Component } from "./types";
+export type { IDialogProps } from "./dialog.props";
+
+/**
+ * Dialog is a modal pop-up used to present the user with information requiring their
+ * immediate attention. It supports a title, message, bullet text, graphic, and button
+ * regions. Dialogs intercept all key events except Home and are closed automatically
+ * by Back or Home.
+ *
+ * > **Note:** Consider using StandardDialog (Roku OS 10.0+) for new development, which
+ * > provides updated graphics and color palette support.
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *     title="Confirm Action"
+ *     message="Are you sure you want to proceed?"
+ *     iconUri="pkg:/images/dialog-icon.png"
+ *     buttons={["OK", "Cancel"]}
+ *     close={false}
+ *     onButtonSelected={(index) => {
+ *         if (index === 0) handleConfirm();
+ *         else handleCancel();
+ *     }}
+ *     onWasClosed={() => console.log("Dialog closed")}
+ * />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/dialog}
+ */
+export const Dialog: Component<IDialogProps> = props => <Modal dialog={<dialog {...props}></dialog>} />;

package/src/sg-nodes/dynamic-key-grid.props.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IGroupProps } from "./group.props";
+import type { EventHandler } from "./types";
+
+/**
+ * Properties for the {@link DynamicKeyGrid} component.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/dynamic-key-grid}
+ */
+export interface IDynamicKeyGridProps extends IGroupProps {
+    /** URI of a packaged `.keyboard.json` Key Definition File. */
+    keyDefinitionUri?: string;
+    /** Active grid mode (must match a mode in the KDF). */
+    mode?: string;
+    /** Fired when the `keySelected` field changes after a key press. */
+    onKeySelected?: EventHandler<string>;
+    focusVisible?: boolean;
+    horizWrap?: boolean;
+    vertWrap?: boolean;
+}

package/src/sg-nodes/dynamic-key-grid.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { retainAsset } from "../retain-asset";
+import KeyGridExtXML from "../xml-components/keyboards/KeyGridExt.xml";
+import type { IDynamicKeyGridProps } from "./dynamic-key-grid.props";
+import { Component } from "./types";
+export type { IDynamicKeyGridProps } from "./dynamic-key-grid.props";
+
+/**
+ * Standalone key grid driven by a Key Definition File (no text edit box).
+ */
+export const DynamicKeyGrid: Component<IDynamicKeyGridProps> = props => {
+    retainAsset(KeyGridExtXML);
+    return <keyGridExt {...props}></keyGridExt>;
+};

package/src/sg-nodes/dynamic-keyboard.props.ts

@@ -0,0 +1,30 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { KeyboardDomain } from "./custom-keyboard.props";
+import type { IGroupProps } from "./group.props";
+import type { EventHandler } from "./types";
+
+/**
+ * Properties for the {@link DynamicKeyboard} component.
+ *
+ * Voice-enabled full keyboard with a fixed OS key layout (email/password style).
+ *
+ * @see {@link https://developer.roku.com/dev/docs/dynamic-keyboard}
+ */
+export interface IDynamicKeyboardProps extends IGroupProps {
+    /** Current text in the internal VoiceTextEditBox. */
+    text?: string;
+    /** Fired when entered text changes. */
+    onText?: EventHandler<string>;
+    /** Speech-recognition domain for voice entry. */
+    domain?: KeyboardDomain;
+    /** Placeholder text shown when empty. */
+    hintText?: string;
+    /** Maximum number of characters that may be entered. */
+    maxTextLength?: number;
+    /** Shows underscore placeholders in the text edit box. */
+    showUnderscores?: boolean;
+    /** When true, entered characters are masked. */
+    secureMode?: boolean;
+}

package/src/sg-nodes/dynamic-keyboard.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { retainAsset } from "../retain-asset";
+import KeyboardExtXML from "../xml-components/keyboards/KeyboardExt.xml";
+import type { IDynamicKeyboardProps } from "./dynamic-keyboard.props";
+import { Component } from "./types";
+export type { IDynamicKeyboardProps } from "./dynamic-keyboard.props";
+
+/**
+ * Standalone {@link DynamicKeyboard} with built-in key layout and voice entry.
+ *
+ * Voice is always enabled on this fixed OS layout; there is no `voiceEnabled` prop.
+ */
+export const DynamicKeyboard: Component<IDynamicKeyboardProps> = props => {
+    retainAsset(KeyboardExtXML);
+    return <keyboardExt {...props}></keyboardExt>;
+};

package/src/sg-nodes/dynamic-mini-keyboard.props.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { KeyboardDomain } from "./custom-keyboard.props";
+import type { IGroupProps } from "./group.props";
+import type { EventHandler } from "./types";
+
+/**
+ * Properties for the {@link DynamicMiniKeyboard} component.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/dynamic-mini-keyboard}
+ */
+export interface IDynamicMiniKeyboardProps extends IGroupProps {
+    text?: string;
+    onText?: EventHandler<string>;
+    /** Speech-recognition domain for voice entry. */
+    domain?: KeyboardDomain;
+    /** Placeholder text shown when empty. */
+    hintText?: string;
+    /** Maximum number of characters that may be entered. */
+    maxTextLength?: number;
+}

package/src/sg-nodes/dynamic-mini-keyboard.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { retainAsset } from "../retain-asset";
+import MiniKeyboardExtXML from "../xml-components/keyboards/MiniKeyboardExt.xml";
+import type { IDynamicMiniKeyboardProps } from "./dynamic-mini-keyboard.props";
+import { Component } from "./types";
+export type { IDynamicMiniKeyboardProps } from "./dynamic-mini-keyboard.props";
+
+/**
+ * Standalone search-style mini keyboard (A–Z, 0–9) with voice entry.
+ *
+ * Voice is always enabled on this fixed OS layout; there is no `voiceEnabled` prop.
+ */
+export const DynamicMiniKeyboard: Component<IDynamicMiniKeyboardProps> = props => {
+    retainAsset(MiniKeyboardExtXML);
+    return <miniKeyboardExt {...props}></miniKeyboardExt>;
+};

package/src/sg-nodes/dynamic-pinpad.props.ts

@@ -0,0 +1,57 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IGroupProps } from "./group.props";
+import type { EventHandler } from "./types";
+
+/**
+ * Properties for the {@link DynamicPinPad} component.
+ *
+ * DynamicPinPad is similar to the legacy PinPad node but adds voice entry functionality.
+ * It enables text and voice entry of numeric characters and is typically used for short
+ * PIN codes. The key layout is fixed based on the node's pre-built Key Definition File.
+ *
+ * This wrapper extends the native DynamicPinPad node via PinPadExt, forwarding text-edit-box
+ * styling fields to the internal VoiceTextEditBox.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/dynamic-pinpad}
+ * @see {@link https://developer.roku.com/dev/docs/dynamic-keyboard-base}
+ *
+ * @example
+ * ```tsx
+ * <DynamicPinPad
+ *   id="pinpad"
+ *   text={pin()}
+ *   hintText="Enter PIN"
+ *   maxTextLength={4}
+ *   secureMode
+ *   onText={setPin}
+ *   translation={[80, 200]}
+ * />
+ * ```
+ */
+export interface IDynamicPinPadProps extends IGroupProps {
+    /** Current PIN/text value. */
+    text?: string;
+    /** Fired when the entered text changes. */
+    onText?: EventHandler<string>;
+    /** When true, entered characters are masked. */
+    secureMode?: boolean;
+    /** Placeholder text shown when empty. */
+    hintText?: string;
+    /**
+     * Maximum number of characters that may be entered.
+     * @default 4
+     */
+    maxTextLength?: number;
+    /** Disables voice underscore control in the internal text edit box. */
+    disableVoiceUnderscoreControl?: boolean;
+    /** Shows underscore placeholders for each digit position. */
+    showUnderscores?: boolean;
+    /** Centers underscore placeholders within the text box. */
+    centerUnderscores?: boolean;
+    /** Color of the hint text. */
+    hintTextColor?: string;
+    /** Color of the entered text. */
+    textColor?: string;
+}

package/src/sg-nodes/dynamic-pinpad.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { retainAsset } from "../retain-asset";
+import PinPadExtXML from "../xml-components/keyboards/PinPadExt.xml";
+import type { IDynamicPinPadProps } from "./dynamic-pinpad.props";
+import { Component } from "./types";
+export type { IDynamicPinPadProps } from "./dynamic-pinpad.props";
+
+/**
+ * Voice-enabled numeric PIN pad for standalone on-screen entry (not inside a dialog).
+ *
+ * @see {@link https://developer.roku.com/dev/docs/dynamic-pinpad}
+ */
+export const DynamicPinPad: Component<IDynamicPinPadProps> = props => {
+    retainAsset(PinPadExtXML);
+    return <pinPadExt {...props}></pinPadExt>;
+};

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

@@ -0,0 +1,119 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { INodeProps } from "./node";
+import type { Vector2D } from "./types";
+
+export type GradientStyle = "none" | "linear" | "radial";
+
+/**
+ * Properties for the Effect node.
+ *
+ * Effect applies GPU shader-based rendering to a Rectangle or Poster, enabling rounded corners,
+ * borders, and gradient fills. Attach an Effect node to a Rectangle or Poster via the `effect`
+ * prop.
+ *
+ * **Platform availability**: Effects require Roku OS 16.0 or later and the OpenGL graphics backend.
+ * Elsewhere the `effect` prop is ignored without an error and the content renders unstyled. To branch
+ * on it, read `getDeviceInfo()` from `@roku-sdk/rsg-ts/runtime` once:
+ * `Number(info.osVersion.major) >= 16 && info.graphicsPlatform === "opengl"`. The node's own `supported`
+ * field is set when the node is created and cannot be read from TypeScript, and effects disabled by
+ * device configuration are invisible to that check.
+ *
+ * Hoist the effect into a `const`. A signal read by the `effect={...}` expression itself builds a new
+ * effect node on every change; signals read by the effect's own fields update it in place.
+ *
+ * {@includeCode ../../../../examples/showcase/src/components/showcases/effect-showcase/shared-effect-showcase.tsx#docs:effect-shared}
+ *
+ * @example
+ * // Rounded border and linear gradient, each hoisted once.
+ * const framed = <effect borderRadius={16} borderWidth={2} borderColor="0xFF0000FF" />;
+ * <rectangle width={400} height={200} effect={framed} />;
+ * const fill = <effect gradientStyle="linear" gradientColors={["0xFF0000FF", "0x0000FFFF"]} />;
+ * <rectangle width={400} height={200} effect={fill} />;
+ *
+ * @since Roku OS 16.0
+ */
+export interface IEffectProps extends INodeProps {
+    /**
+     * Per-corner border radius in pixels.
+     * - A single number applies a uniform radius to all corners.
+     * - A four-element tuple sets each corner independently: `[topLeft, topRight, bottomRight, bottomLeft]`.
+     *   The tuple is one Vector4 field, so a FloatFieldInterpolator cannot animate it.
+     * @default 0
+     */
+    borderRadius?: number | [number, number, number, number];
+
+    /**
+     * Border stroke width in pixels. The border is drawn **outside** the content rect.
+     * @default 0
+     */
+    borderWidth?: number;
+
+    /**
+     * Padding in pixels between the border and the content rect. It changes nothing while
+     * `borderWidth` is 0, so it is not content padding.
+     * @default 0
+     */
+    borderPadding?: number;
+
+    /**
+     * Border stroke color as an RGBA hex string (e.g. `"0xFF0000FF"`).
+     * @default "0xFFFFFFFF"
+     */
+    borderColor?: string;
+
+    /**
+     * Gradient fill style applied over the content area. No gradient renders while this is `"none"`.
+     * @default "none"
+     */
+    gradientStyle?: GradientStyle;
+
+    /**
+     * Ordered list of RGBA color stops for the gradient (e.g. `["0xFF0000FF", "0x0000FFFF"]`).
+     * At least two colors are required for the gradient to render. Maximum of 8 colors.
+     * Outside that range the gradient does not render; in `__DEV__` builds the SDK warns once
+     * when `gradientStyle` is not `"none"`.
+     */
+    gradientColors?: string[];
+
+    /**
+     * Normalized stop positions `[0, 1]` corresponding to each entry in `gradientColors`.
+     * If omitted, colors are distributed evenly across the gradient. In `__DEV__` builds the SDK
+     * warns once on a length mismatch or an entry outside `[0, 1]` when `gradientStyle` is not `"none"`.
+     */
+    gradientStops?: number[];
+
+    /**
+     * Rotation angle of a linear gradient in degrees.
+     * The gradient fills the available space from opposite corners.
+     * @default 0
+     */
+    gradientAngle?: number;
+
+    /**
+     * Center point of a radial gradient in normalized coordinates.
+     * `[0, 0]` = top-left, `[1, 1]` = bottom-right.
+     * @default [0.5, 0.5]
+     */
+    gradientCentre?: Vector2D;
+
+    /**
+     * Radii of the radial gradient ellipse in normalized coordinates.
+     * `1.0` equals the rectangle's width or height respectively.
+     * @default [0.5, 0.5]
+     */
+    gradientRadius?: Vector2D;
+
+    /**
+     * Whether the gradient fills the content area (inside the border).
+     * @default true
+     */
+    gradientFillContent?: boolean;
+
+    /**
+     * Whether the gradient fills the border area.
+     * @default false
+     */
+    gradientFillBorder?: boolean;
+}

package/src/sg-nodes/effect.tsx

@@ -0,0 +1,167 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { DomNode, TmValue } from "@roku-sdk/interfaces";
+import { registerSetPropertyObserver } from "@roku-sdk/solid";
+
+import type { GradientStyle, IEffectProps } from "./effect.props";
+import { Component } from "./types";
+export type { GradientStyle, IEffectProps } from "./effect.props";
+
+declare const __DEV__: boolean;
+
+const TRACKED_PROPS: ReadonlySet<string> = new Set(["gradientStyle", "gradientColors", "gradientStops", "id"]);
+
+interface EffectGradientState {
+    gradientStyle?: GradientStyle;
+    gradientColors?: string[];
+    gradientStops?: number[];
+    id?: string;
+    warned: Set<string>;
+    scheduled: boolean;
+}
+
+/**
+ * Dev-only: describe each way gradient props violate the firmware's silent constraints.
+ * Returns `[key, message]` pairs so a caller can report each distinct problem once.
+ *
+ * Quiet while `gradientStyle` is `"none"` or unset — authors may park empty colors/stops
+ * and turn the style on later (see apps/effects-lab edit-demo).
+ */
+function gradientPropProblems(
+    style: GradientStyle | undefined,
+    colors: readonly string[] | undefined,
+    stops: readonly number[] | undefined,
+    nodeLabel: string
+): [key: string, message: string][] {
+    if (style === undefined || style === "none") {
+        return [];
+    }
+
+    const problems: [string, string][] = [];
+    const colorList = Array.isArray(colors) ? colors : [];
+    const colorCount = colorList.length;
+
+    if (colorCount < 2 || colorCount > 8) {
+        problems.push([
+            "colors:count",
+            `${nodeLabel}: gradientColors must have 2–8 entries when gradientStyle is "${style}" (got ${colorCount}).`
+        ]);
+    }
+
+    if (stops !== undefined) {
+        const stopList = Array.isArray(stops) ? stops : [];
+        if (stopList.length !== colorCount) {
+            problems.push([
+                "stops:length",
+                `${nodeLabel}: gradientStops length (${stopList.length}) must equal gradientColors length (${colorCount}).`
+            ]);
+        }
+        const outOfRange = stopList.findIndex(stop => !(typeof stop === "number" && stop >= 0 && stop <= 1));
+        if (outOfRange !== -1) {
+            problems.push([
+                "stops:range",
+                `${nodeLabel}: gradientStops entries must be in [0, 1] (got ${String(stopList[outOfRange])} at index ${outOfRange}).`
+            ]);
+        }
+    }
+
+    return problems;
+}
+
+function nodeLabelFor(state: EffectGradientState): string {
+    return state.id !== undefined && state.id !== "" ? `Effect[id=${state.id}]` : "Effect";
+}
+
+let effectGradientObserverInstalled = false;
+
+/**
+ * Installs the `__DEV__` setProperty observer that validates Effect gradient props for both
+ * `<effect>` and `<Effect>`. Safe to call more than once; no-ops when `__DEV__` is off.
+ * Tests call this after enabling `__DEV__` because Jest loads modules with `__DEV__` false.
+ */
+export function installEffectGradientDevValidation(): void {
+    if (typeof __DEV__ === "undefined" || !__DEV__) return;
+    if (effectGradientObserverInstalled) return;
+    effectGradientObserverInstalled = true;
+
+    const stateByNode = new WeakMap<DomNode, EffectGradientState>();
+
+    registerSetPropertyObserver((node: DomNode, name: string, value: TmValue): void => {
+        if (typeof __DEV__ === "undefined" || !__DEV__) return;
+        if (node.t !== "effect") return;
+        if (!TRACKED_PROPS.has(name)) return;
+
+        let state = stateByNode.get(node);
+        if (!state) {
+            state = { warned: new Set(), scheduled: false };
+            stateByNode.set(node, state);
+        }
+
+        switch (name) {
+            case "gradientStyle":
+                state.gradientStyle = value as GradientStyle;
+                break;
+            case "gradientColors":
+                state.gradientColors = value as string[];
+                break;
+            case "gradientStops":
+                state.gradientStops = value as number[];
+                break;
+            case "id":
+                state.id = value as string;
+                break;
+        }
+
+        if (state.scheduled) return;
+        state.scheduled = true;
+        const pending = state;
+        queueMicrotask(() => {
+            pending.scheduled = false;
+            const label = nodeLabelFor(pending);
+            for (const [key, message] of gradientPropProblems(
+                pending.gradientStyle,
+                pending.gradientColors,
+                pending.gradientStops,
+                label
+            )) {
+                if (pending.warned.has(key)) continue;
+                pending.warned.add(key);
+                console.warn(message);
+            }
+        });
+    });
+}
+
+installEffectGradientDevValidation();
+
+/**
+ * Effect applies GPU shader-based rendering to a Rectangle or Poster.
+ *
+ * Hoist it into a `const` and pass that as the `effect` prop on a Rectangle or
+ * Poster to enable rounded corners, borders, and gradient fills. Set
+ * `shaderCompatible` on a Poster that takes one.
+ *
+ * Prefer the `<effect>` intrinsic for most uses. The Effect wrapper is a pure passthrough (`<effect {...props} />`) and exists for consistency with the component library.
+ *
+ * {@includeCode ../../../../examples/showcase/src/components/showcases/effect-showcase/shared-effect-showcase.tsx#docs:effect-shared}
+ *
+ * @example
+ * import { Effect } from "@roku-sdk/components";
+ * const framed = <Effect borderRadius={24} borderWidth={6} borderColor="0xF39C12FF" />;
+ * <rectangle width={300} height={140} effect={framed} />;
+ *
+ * @platformAvailability Effects require Roku OS 16.0 or later and the OpenGL graphics backend.
+ * Elsewhere the `effect` prop is ignored without an error and the content renders unstyled. To branch
+ * on it, read `getDeviceInfo()` from `@roku-sdk/rsg-ts/runtime` once:
+ * `Number(info.osVersion.major) >= 16 && info.graphicsPlatform === "opengl"`. The node's own `supported`
+ * field is set when the node is created and cannot be read from TypeScript, and effects disabled by
+ * device configuration are invisible to that check.
+ *
+ * @since Roku OS 16.0
+ *
+ * @intrinsic effect
+ */
+export const Effect: Component<IEffectProps> = props => {
+    return <effect {...props}></effect>;
+};

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

@@ -0,0 +1,45 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { INodeProps } from "./node";
+import type { Uri } from "./types";
+
+/**
+ * Properties for the Font node.
+ *
+ * Font specifies the font to be used by a Label node, or any other nodes that render text.
+ * The uri field can be set to any TrueType/OpenType font file included in the application package.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/font}
+ *
+ * @example
+ * // Using with a Label component
+ * <Label text="Hello World" font={<Font uri="pkg:/fonts/custom.ttf" size={24} />} />
+ */
+export interface IFontProps extends INodeProps {
+    /**
+     * Specifies a TrueType or OpenType font file.
+     * Currently only font files included in the application package can be specified.
+     * @default ""
+     */
+    uri?: Uri;
+
+    /**
+     * Specifies the size of the font in points.
+     * @default 1
+     */
+    size?: number;
+
+    /**
+     * String representation of a Unicode character to display when an unsupported glyph is encountered.
+     * For example, "u0020" would render a space for any unrenderable characters.
+     * @default ""
+     */
+    fallbackGlyph?: string;
+
+    /**
+     * If true, forces SceneGraph to update the component before it is rendered
+     * @default false
+     */
+    preUpdate?: boolean;
+}

package/src/sg-nodes/font.tsx

@@ -0,0 +1,80 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IFontProps } from "./font.props";
+import { Component } from "./types";
+export type { IFontProps } from "./font.props";
+
+/**
+ * Font specifies the font to be used by a Label node, or any other nodes that render text.
+ *
+ * The uri field can be set to any TrueType/OpenType font file. A default system font can also
+ * be specified using the `font:` prefix (e.g., `font:MediumBoldSystemFont`).
+ *
+ * **Components that support Font:**
+ * - Label / MultiStyleLabel: via `font` prop
+ * - ScrollableText: via `font` prop
+ * - ScrollingLabel: via `font` prop
+ * - LabelList: via `font` and `focusedFont` props
+ * - PosterGrid: via `caption1Font` and `caption2Font` props
+ *
+ * @see {@link https://developer.roku.com/dev/docs/font}
+ *
+ * @example
+ * ```tsx
+ * // Inline font prop with Label
+ * <label text="Custom styled text" font={<font uri="pkg:/fonts/orbitron-font.ttf" size={32} />} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Reusable font definition (declared outside JSX return)
+ * const myFont = <font uri="pkg:/fonts/cookie-regular.ttf" size={28} />;
+ *
+ * // Then in return statement:
+ * return (
+ *     <group>
+ *         <label text="ABCDEFGHIJKLMNOPQRSTUVWXYZ" font={myFont} />
+ *         <label text="abcdefghijklmnopqrstuvwxyz" font={myFont} />
+ *     </group>
+ * );
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using with ScrollableText
+ * <scrollableText
+ *     text="Long scrollable content..."
+ *     width={800}
+ *     height={400}
+ *     font={<font uri="pkg:/fonts/readable.ttf" size={24} />}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using with LabelList
+ * <labelList
+ *     itemSize={[440, 48]}
+ *     font={<font uri="pkg:/fonts/menu.ttf" size={20} />}
+ *     focusedFont={<font uri="pkg:/fonts/menu-bold.ttf" size={22} />}
+ *     content={content}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using with PosterGrid captions
+ * <posterGrid
+ *     basePosterSize={[200, 300]}
+ *     caption1Font={<font uri="pkg:/fonts/title.ttf" size={18} />}
+ *     caption2Font={<font uri="pkg:/fonts/subtitle.ttf" size={14} />}
+ *     caption1NumLines={1}
+ *     caption2NumLines={1}
+ *     content={content}
+ * />
+ * ```
+ */
+export const Font: Component<IFontProps> = props => {
+    return <font {...props}></font>;
+};