@progress/kendo-react-layout 13.3.0 → 13.4.0-develop.2

package/drawer/interfaces/DrawerProps.d.ts

@@ -0,0 +1,171 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerSelectEvent } from './DrawerSelectEvent.js';
+import { DrawerAnimation } from '../interfaces/DrawerAnimation.js';
+import { DrawerItemProps } from './DrawerItemProps.js';
+import * as React from 'react';
+/**
+ * The properties of the [KendoReact Drawer component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
+ */
+export interface DrawerProps {
+    /**
+     * Specifies the animation settings of the Drawer.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer animation={{ duration: 300 }} />
+     * ```
+     *
+     * @default true
+     */
+    animation?: boolean | DrawerAnimation;
+    /**
+     * Specifies the state of the Drawer
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/expanded_state)).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer expanded={true} />
+     * ```
+     *
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Sets the Drawer items declaratively.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer>
+     *   <DrawerItem text="Home" />
+     * </Drawer>
+     * ```
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the `k-drawer-container` element.
+     */
+    className?: string;
+    /**
+     * Specifies a list of CSS classes that will be added to the `k-drawer` element.
+     */
+    drawerClassName?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Specifies the mode in which the Drawer will be displayed
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/display_modes#toc-expand-modes)).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer mode="push" />
+     * ```
+     *
+     * @default 'overlay'
+     */
+    mode?: 'overlay' | 'push';
+    /**
+     * Specifies the position of the Drawer
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/positioning)).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer position="end" />
+     * ```
+     *
+     * @default 'start'
+     */
+    position?: 'start' | 'end';
+    /**
+     * Sets additional CSS styles to the Drawer.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `tabIndex` property of the Drawer.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/display_modes#toc-mini-view)).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer mini={true} />
+     * ```
+     *
+     * @default false
+     */
+    mini?: boolean;
+    /**
+     * Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer miniWidth={60} />
+     * ```
+     *
+     */
+    miniWidth?: number;
+    /**
+     * Defines the width of the Drawer when it is expanded.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer width={300} />
+     * ```
+     *
+     * @default 240
+     */
+    width?: number;
+    /**
+     * The collection of items that will be rendered in the Drawer
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer)).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer items={[{ text: 'Home' }, { text: 'Settings' }]} />
+     * ```
+     */
+    items?: Array<DrawerItemProps>;
+    /**
+     * Overrides the default component responsible for visualizing a single item
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/custom_rendering)).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer item={CustomDrawerItem} />
+     * ```
+     */
+    item?: React.ComponentType<DrawerItemProps>;
+    /**
+     * The event handler that will be fired when the overlay is clicked.
+     * Used in overlay mode only.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer onOverlayClick={(e) => console.log('Overlay clicked')} />
+     * ```
+     */
+    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * Fires when a Drawer item is selected.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer onSelect={(e) => console.log('Item selected', e)} />
+     * ```
+     */
+    onSelect?: (event: DrawerSelectEvent) => void;
+}

package/drawer/interfaces/DrawerSelectEvent.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DrawerHandle } from '../Drawer.js';
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The arguments for the `onSelect` Drawer event.
+ */
+export interface DrawerSelectEvent extends BaseEvent<DrawerHandle> {
+    /**
+     * A Drawer item event target.
+     */
+    itemTarget: any;
+    /**
+     * The index of the selected Drawer item.
+     */
+    itemIndex: number;
+}

package/expansionpanel/ExpansionPanel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ExpansionPanelHandle, ExpansionPanelProps } from './interfaces.js';
+import * as React from 'react';
+/**
+ * Represents the [KendoReact ExpansionPanel component](https://www.telerik.com/kendo-react-ui/components/layout/expansionpanel).
+ */
+export declare const ExpansionPanel: React.ForwardRefExoticComponent<ExpansionPanelProps & React.RefAttributes<ExpansionPanelHandle | null>>;

package/expansionpanel/ExpansionPanel.mjs

@@ -7,7 +7,7 @@
  */
 import * as e from "react";
 import n from "prop-types";
-import { dispatchEvent as k, Keys as p, useAsyncFocusBlur as w, classNames as v, useRtl as F, getTabIndex as S, IconWrap as D } from "@progress/kendo-react-common";
+import { dispatchEvent as k, Keys as p, useAsyncFocusBlur as w, useRtl as F, classNames as v, getTabIndex as S, IconWrap as D } from "@progress/kendo-react-common";
 import { chevronDownIcon as K, chevronUpIcon as A } from "@progress/kendo-svg-icons";
 const I = e.forwardRef((a, y) => {
   const i = e.useRef(null), [N, u] = e.useState(!1), r = e.useCallback(() => ({ element: i.current }), []);

package/expansionpanel/ExpansionPanelContent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * Represents the KendoReact ExpansionPanelContent component.
+ */
+export declare const ExpansionPanelContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/expansionpanel/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export * from './ExpansionPanel.js';
+export * from './ExpansionPanelContent.js';
+export * from './interfaces.js';

package/expansionpanel/interfaces.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent, SVGIcon } from '@progress/kendo-react-common';
+/**
+ * The ExpansionPanel ref.
+ */
+export interface ExpansionPanelHandle {
+    /**
+     * The ExpansionPanel element.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * The arguments for the `onAction` ExpansionPanel event.
+ */
+export interface ExpansionPanelActionEvent extends BaseEvent<ExpansionPanelHandle> {
+    /**
+     * Represents the `expanded` state of the ExpansionPanel.
+     */
+    expanded: boolean;
+}
+/**
+ * The props of the ExpansionPanel component.
+ */
+export interface ExpansionPanelProps {
+    /**
+     * The React elements that will be rendered inside the ExpansionPanel.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS classes to the ExpansionPanel.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the ExpansionPanel.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root ExpansionPanel element.
+     */
+    id?: string;
+    /**
+     * Specifies the primary text in the header of the ExpansionPanel.
+     */
+    title?: React.ReactNode;
+    /**
+     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
+     */
+    expandIcon?: string;
+    /**
+     * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
+     */
+    collapseIcon?: string;
+    /**
+     * Sets a custom SVG icon for the expanded state of the ExpansionPanel.
+     */
+    expandSVGIcon?: SVGIcon;
+    /**
+     * Sets a custom SVG icon for the collapsed state of the ExpansionPanel.
+     */
+    collapseSVGIcon?: SVGIcon;
+    /**
+     * Sets the `dir` property of the ExpansionPanel.
+     */
+    dir?: string;
+    /**
+     * Sets the `tabIndex` property of the ExpansionPanel.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `expanded` state of the ExpansionPanel.
+     *
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Sets the `disabled` state of the ExpansionPanel.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets `aria-controls`. The value should represent the `id` of the controlled content element.
+     */
+    ariaControls?: string;
+    /**
+     * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
+     */
+    onAction?: (event: ExpansionPanelActionEvent) => void;
+}

package/gridlayout/GridLayout.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridLayoutProps } from './interfaces/GridLayoutProps.js';
+import * as React from 'react';
+/**
+ * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
+ * callback of the GridLayout component.
+ */
+export interface GridLayoutHandle {
+    /**
+     * Represents the current element. If no current element is present, `element` is `null`.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * Represents the [KendoReact GridLayout component](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout).
+ * Arranges the contents of the component in rows and columns in a grid structure.
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *     <GridLayout
+ *       rows={[{height: 50}, {height: 50}, {height: 50}]}
+ *       cols={[{width: 50}, {width: 50}, {width: 50}]}
+ *       gap={{rows: 5, cols: 5}}
+ *       align={{horizontal: 'stretch', vertical: 'stretch'}}
+ *     >
+ *       <GridLayoutItem row={1} col={1}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={1} col={2} colSpan={2}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={2} col={1} colSpan={2} rowSpan={2}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={2} col={3}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={3} col={3}>Box</GridLayoutItem>
+ *     </GridLayout>
+ *   );
+ * };
+ * ```
+ */
+export declare const GridLayout: React.ForwardRefExoticComponent<GridLayoutProps & React.RefAttributes<GridLayoutHandle | null>>;

package/gridlayout/GridLayoutItem.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridLayoutItemProps } from './interfaces/GridLayoutItemProps.js';
+import * as React from 'react';
+/**
+ * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
+ * callback of the GridLayoutItem component.
+ */
+export interface GridLayoutItemHandle {
+    /**
+     * Represents the current element. If no current element is present, `element` is `null`.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * Represents the [KendoReact GridLayoutItem component](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout).
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *     <GridLayout
+ *       rows={[{height: 50}, {height: 50}, {height: 50}]}
+ *       cols={[{width: 50}, {width: 50}, {width: 50}]}
+ *       gap={{rows: 5, cols: 5}}
+ *       align={{horizontal: 'stretch', vertical: 'stretch'}}
+ *     >
+ *       <GridLayoutItem row={1} col={1}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={1} col={2} colSpan={2}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={2} col={1} colSpan={2} rowSpan={2}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={2} col={3}>Box</GridLayoutItem>
+ *       <GridLayoutItem row={3} col={3}>Box</GridLayoutItem>
+ *     </GridLayout>
+ *   );
+ * };
+ * ```
+ */
+export declare const GridLayoutItem: React.ForwardRefExoticComponent<GridLayoutItemProps & React.RefAttributes<GridLayoutItemHandle | null>>;

package/gridlayout/interfaces/GridLayoutColumnProps.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props of the [KendoReact GridLayout column](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout).
+ */
+export interface GridLayoutColumnProps {
+    /**
+     * Specifies the width of the GridLayout column ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#kendoreact-gridlayout-overview)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout cols={[{ width: '200px' }]} />
+     * ```
+     */
+    width?: number | string;
+}

package/gridlayout/interfaces/GridLayoutItemProps.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact GridLayoutItem component](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout).
+ */
+export interface GridLayoutItemProps {
+    /**
+     * The React elements that will be rendered inside the GridLayoutItem ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem>Content</GridLayoutItem>
+     * ```
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS classes to the GridLayoutItem ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the GridLayoutItem ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem style={{ backgroundColor: 'red' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root GridLayoutItem element ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem id="item-1" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Defines the column line from which the element will start ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem col={1} />
+     * ```
+     */
+    col?: number;
+    /**
+     * Specifies the number of columns over which the element will span ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
+     * Defaults to `1`.
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem colSpan={2} />
+     * ```
+     */
+    colSpan?: number;
+    /**
+     * Defines the row line from which the element will start ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem row={1} />
+     * ```
+     */
+    row?: number;
+    /**
+     * Specifies the number of rows over which the element will span ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/items#toc-items)).
+     * Defaults to `1`.
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem rowSpan={2} />
+     * ```
+     */
+    rowSpan?: number;
+}

package/gridlayout/interfaces/GridLayoutProps.d.ts

@@ -0,0 +1,144 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridLayoutColumnProps } from './GridLayoutColumnProps.js';
+import { GridLayoutRowProps } from './GridLayoutRowProps.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact GridLayout component](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout).
+ */
+export interface GridLayoutProps {
+    /**
+     * The React elements that will be rendered inside the GridLayout ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#toc-children)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout>
+     *   <div>Item 1</div>
+     *   <div>Item 2</div>
+     * </GridLayout>
+     * ```
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS classes to the GridLayout ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#toc-classname)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the GridLayout ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#toc-style)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout style={{ gap: '10px' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root GridLayout element ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#toc-id)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout id="grid-layout" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Specifies the gaps between the elements ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/layout#toc-gaps)).
+     *
+     * * The possible keys are:
+     * * `rows`
+     * * `columns`
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout gap={{ rows: '10px', columns: '20px' }} />
+     * ```
+     */
+    gap?: GridLayoutGap;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner GridLayout elements ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/layout#horizontal-alignment)).
+     *
+     * The possible keys are:
+     * * `horizontal`&mdash;Defines the possible horizontal alignment of the inner GridLayout elements.
+     *   * `start`&mdash;Uses the start point of the container.
+     *   * `center`&mdash;Uses the central point of the container.
+     *   * `end`&mdash;Uses the end point of the container.
+     *   * (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
+     * * `vertical`&mdash; Defines the possible vertical alignment of the inner GridLayout elements.
+     *   * `top`&mdash;Uses the top point of the container.
+     *   * `middle`&mdash;Uses the middle point of the container.
+     *   * `bottom`&mdash;Uses the bottom point of the container.
+     *   * (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout align={{ horizontal: 'center', vertical: 'middle' }} />
+     * ```
+     */
+    align?: GridLayoutAlign;
+    /**
+     * Specifies the default number of columns and their widths ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/layout#toc-rows-and-columns)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout cols={[{ width: '100px' }, { width: '200px' }]} />
+     * ```
+     */
+    cols?: GridLayoutColumnProps[];
+    /**
+     * Specifies the default number of rows and their height ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/layout#toc-rows-and-columns)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout rows={[{ height: '50px' }, { height: '100px' }]} />
+     * ```
+     */
+    rows?: GridLayoutRowProps[];
+}
+/**
+ * Specifies the gaps between the elements.
+ */
+export interface GridLayoutGap {
+    /**
+     * Represents the row gap between the elements
+     */
+    rows?: number | string;
+    /**
+     * Represents the column gap between the elements
+     */
+    cols?: number | string;
+}
+/**
+ * Specifies the horizontal and vertical alignment of the inner GridLayout elements.
+ */
+export interface GridLayoutAlign {
+    /**
+     * Defines the possible horizontal alignment of the inner GridLayout elements.
+     *
+     * The available values are:
+     * - `start`&mdash;Uses the start point of the container.
+     * - `center`&mdash;Uses the center point of the container.
+     * - `end`&mdash;Uses the end point of the container.
+     * - (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Defines the possible vertical alignment of the inner GridLayout elements.
+     *
+     * The available values are:
+     * - `top`&mdash;Uses the top point of the container.
+     * - `middle`&mdash;Uses the middle point of the container.
+     * - `bottom`&mdash;Uses the bottom point of the container.
+     * - (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
+}