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

package/breadcrumb/BreadcrumbLink.d.ts

@@ -0,0 +1,136 @@
+/**
+ * @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 } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the properties of [BreadcrumbLink](https://www.telerik.com/kendo-react-ui/components/layout/api/breadcrumblink) component.
+ */
+export interface BreadcrumbLinkProps {
+    /**
+     * Sets the `id` property of the top `div` element of the BreadcrumbLink.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the BreadcrumbLink.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the BreadcrumbLink.
+     */
+    className?: string;
+    /**
+     * Sets the `tabIndex` attribute to the BreadcrumbLink.
+     */
+    tabIndex?: number;
+    /**
+     * The Breadcrumb direction `ltr` or `rtl`.
+     */
+    dir?: string;
+    /**
+     * Determines the `disabled` mode of the BreadcrumbLink. If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `text` of the BreadcrumbLink component.
+     */
+    text?: string;
+    /**
+     * Represents the `icon` of the BreadcrumbLink component.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Represents the `iconClass` of the BreadcrumbLink component.
+     */
+    iconClass?: string;
+    /**
+     * Represents the `onItemSelect` event. Triggered after click on the BreadcrumbLink item.
+     */
+    onItemSelect?: (event: BaseEvent<BreadcrumbLinkHandle>) => void;
+    /**
+     * Represents the `onKeyDown` event. Triggered after key down on the BreadcrumbLink item.
+     */
+    onKeyDown?: (event: BaseEvent<BreadcrumbLinkHandle>) => void;
+    /**
+     * Sets the `aria-current` value.
+     */
+    ariaCurrent?: boolean;
+    /**
+     * @hidden
+     */
+    isLast?: boolean;
+    /**
+     * @hidden
+     */
+    isFirst?: boolean;
+}
+/**
+ * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
+ */
+export interface BreadcrumbLinkHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLAnchorElement | null;
+    /**
+     * The props values of the BreadcrumbLink.
+     */
+    props: BreadcrumbLinkProps;
+    /**
+     * The `focus` method of the BreadcrumbLink component.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the `BreadcrumbLink` component.
+ *
+ * @example
+ * ```jsx
+ * import { Breadcrumb, BreadcrumbLink } from '@progress/kendo-react-layout';
+ * const items = [
+ *   {
+ *     id: 'home',
+ *     text: 'Home',
+ *     iconClass: 'k-i-home',
+ *   },
+ *   {
+ *     id: 'products',
+ *     text: 'Products',
+ *   },
+ *   {
+ *     id: 'computer',
+ *     text: 'Computer',
+ *   }
+ * ];
+ *
+ * const App = () => {
+ * const [data,setData] = React.useState(items);
+ * const handleItemSelect = (event, id) => {
+ *   const itemIndex = data.findIndex((curValue) => curValue.id === id);
+ *   const newData = data.slice(0, itemIndex + 1);
+ *   setData(newData);
+ * };
+ *
+ * const CustomLink = (data) => {
+ *  return (
+ *     <BreadcrumbLink
+ *       id={data.id}
+ *       text={data.text}
+ *       onItemSelect={(event) => handleItemSelect(event, data.id)}
+ *     />
+ *   );
+ * };
+ *
+ * return (
+ *   <Breadcrumb
+ *     data={data}
+ *     breadcrumbLink={(items) => CustomLink(items)}
+ *   />
+ * )}
+ * ```
+ */
+export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<BreadcrumbLinkHandle | null>>;

package/breadcrumb/BreadcrumbLink.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { dispatchEvent as l, useDir as o, getTabIndex as k, classNames as d } from "@progress/kendo-react-common";
+import { dispatchEvent as l, classNames as d, getTabIndex as o, useDir as k } from "@progress/kendo-react-common";
 const r = t.forwardRef((e, s) => {
   const c = t.useRef(null), i = t.useRef(null), m = t.useCallback(() => {
     i.current && i.current.focus();
@@ -41,8 +41,8 @@ const r = t.forwardRef((e, s) => {
       id: e.id,
       ref: i,
       style: e.style,
-      dir: o(i, e.dir),
-      tabIndex: k(e.tabIndex, e.disabled),
+      dir: k(i, e.dir),
+      tabIndex: o(e.tabIndex, e.disabled),
       className: d(e.className, {
         "k-breadcrumb-root-link": e.isFirst,
         "k-breadcrumb-link": !e.isFirst,

package/breadcrumb/BreadcrumbListItem.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @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 properties of [BreadcrumbListItem](https://www.telerik.com/kendo-react-ui/components/layout/api/breadcrumblistitem) component.
+ */
+export interface BreadcrumbListItemProps {
+    /**
+     * Sets the `id` property of the top `div` element of the BreadcrumbListItem.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the BreadcrumbListItem.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the BreadcrumbListItem.
+     */
+    className?: string;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    isFirstItem: any;
+    /**
+     * @hidden
+     */
+    isLastItem: any;
+}
+/**
+ * Represents the target (element, props, and focus()) of the BreadcrumbListItem.
+ */
+export interface BreadcrumbListItemHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: any;
+    /**
+     * The props values of the Breadcrumb.
+     */
+    props: BreadcrumbListItemProps;
+    /**
+     * The `focus` method of the BreadcrumbListItem component.
+     */
+    focus: () => void;
+}
+/**
+ * Represents the BreadcrumbListItem component.
+ */
+export declare const BreadcrumbListItem: React.ForwardRefExoticComponent<BreadcrumbListItemProps & React.RefAttributes<BreadcrumbListItemHandle | null>>;

package/breadcrumb/BreadcrumbOrderedList.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @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 properties of [BreadcrumbOrderedList](https://www.telerik.com/kendo-react-ui/components/layout/api/breadcrumborderedlist) component.
+ */
+export interface BreadcrumbOrderedListProps {
+    /**
+     * Sets the `id` property of the top `div` element of the BreadcrumbOrderedList.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the BreadcrumbOrderedList.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the BreadcrumbOrderedList.
+     */
+    className?: string;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets the `tabIndex` attribute to the BreadcrumbOrderedList.
+     */
+    tabIndex?: number;
+    /**
+     * The BreadcrumbOrderedList direction `ltr` or `rtl`.
+     */
+    dir?: string;
+    /**
+     * Determines the `disabled` mode of the BreadcrumbOrderedList. If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    rootItem?: boolean;
+}
+/**
+ * Represents the target (element, props, and focus()) of the BreadcrumbOrderedList.
+ */
+export interface BreadcrumbOrderedListHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLOListElement | null;
+    /**
+     * The props values of the BreadcrumbOrderedList.
+     */
+    props: BreadcrumbOrderedListProps;
+}
+/**
+ * Represents the BreadcrumbOrderedList component.
+ */
+export declare const BreadcrumbOrderedList: React.ForwardRefExoticComponent<BreadcrumbOrderedListProps & React.RefAttributes<BreadcrumbOrderedListHandle | null>>;

package/breadcrumb/BreadcrumbOrderedList.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import d from "prop-types";
-import { useDir as l, getTabIndex as i, classNames as n } from "@progress/kendo-react-common";
+import { classNames as l, getTabIndex as i, useDir as n } from "@progress/kendo-react-common";
 const m = t.forwardRef(
   (e, s) => {
     const r = t.useRef(null), a = t.useRef(null);
@@ -23,9 +23,9 @@ const m = t.forwardRef(
         id: e.id,
         ref: a,
         style: e.style,
-        dir: l(a, e.dir),
+        dir: n(a, e.dir),
         tabIndex: i(e.tabIndex, e.disabled),
-        className: n(
+        className: l(
           "k-breadcrumb-root-item-container",
           {
             "k-disabled": e.disabled
@@ -40,9 +40,9 @@ const m = t.forwardRef(
         id: e.id,
         ref: a,
         style: e.style,
-        dir: l(a, e.dir),
+        dir: n(a, e.dir),
         tabIndex: i(e.tabIndex, e.disabled),
-        className: n(
+        className: l(
           "k-breadcrumb-container !k-flex-wrap",
           {
             "k-disabled": e.disabled

package/card/Avatar.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { AvatarProps } from './interfaces/AvatarProps.js';
+import * as React from 'react';
+export declare const Avatar: React.FunctionComponent<AvatarProps>;

package/card/Avatar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),a=require("prop-types"),t=require("@progress/kendo-react-common"),d=require("./interfaces/Enums.js");function c(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const o in r)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(r,o);Object.defineProperty(e,o,l.get?l:{enumerable:!0,get:()=>r[o]})}}return e.default=r,Object.freeze(e)}const n=c(i),s=r=>{const e={type:d.avatarType.TEXT,size:"medium",rounded:"full",fillMode:"solid",themeColor:"primary",...r};return n.createElement("div",{style:e.style,className:t.classNames("k-avatar",{"k-avatar-bordered":e.border,[`k-rounded-${t.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,[`k-avatar-${t.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-avatar-${e.fillMode}`]:e.fillMode,[`k-avatar-${e.fillMode}-${e.themeColor}`]:!!(e.fillMode&&e.themeColor)},e.className)},n.createElement("span",{className:`k-avatar-${e.type}`},e.children))};s.propTypes={className:a.string,type:a.oneOf(["text","image","icon"]),size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large","full"]),fillMode:a.oneOf([null,"solid","outline"]),themeColor:a.oneOf([null,"base","dark","error","info","inverse","inverse","light","primary","secondary","success","tertiary","warning"])};exports.Avatar=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),o=require("prop-types"),t=require("@progress/kendo-react-common"),d=require("./interfaces/Enums.js");function c(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(e,a,n.get?n:{enumerable:!0,get:()=>r[a]})}}return e.default=r,Object.freeze(e)}const s=c(i),l=r=>{const e={type:d.avatarType.TEXT,size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0,...r};return s.createElement("div",{style:e.style,className:t.classNames("k-avatar",{"k-avatar-bordered":e.border,[`k-rounded-${t.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,[`k-avatar-${t.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-avatar-${e.fillMode}`]:e.fillMode,[`k-avatar-${e.fillMode}-${e.themeColor}`]:!!(e.fillMode&&e.themeColor)},e.className)},s.createElement("span",{className:`k-avatar-${e.type}`},e.children))};l.propTypes={className:o.string,type:o.oneOf(["text","image","icon"]),size:o.oneOf(["small","medium","large"]),rounded:o.oneOf(["small","medium","large","full"]),fillMode:o.oneOf(["solid","outline"]),themeColor:o.oneOf(["base","dark","error","info","inverse","light","primary","secondary","success","tertiary","warning"])};exports.Avatar=l;

package/card/Avatar.mjs

@@ -5,20 +5,20 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
-import r from "prop-types";
-import { classNames as s, kendoThemeMaps as o } from "@progress/kendo-react-common";
+import * as r from "react";
+import o from "prop-types";
+import { classNames as s, kendoThemeMaps as a } from "@progress/kendo-react-common";
 import { avatarType as t } from "./interfaces/Enums.mjs";
-const i = (l) => {
+const d = (l) => {
   const e = {
     type: t.TEXT,
-    size: "medium",
-    rounded: "full",
-    fillMode: "solid",
-    themeColor: "primary",
+    size: void 0,
+    rounded: void 0,
+    fillMode: void 0,
+    themeColor: void 0,
     ...l
   };
-  return /* @__PURE__ */ a.createElement(
+  return /* @__PURE__ */ r.createElement(
     "div",
     {
       style: e.style,
@@ -26,32 +26,30 @@ const i = (l) => {
         "k-avatar",
         {
           "k-avatar-bordered": e.border,
-          [`k-rounded-${o.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
-          [`k-avatar-${o.sizeMap[e.size] || e.size}`]: e.size,
+          [`k-rounded-${a.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
+          [`k-avatar-${a.sizeMap[e.size] || e.size}`]: e.size,
           [`k-avatar-${e.fillMode}`]: e.fillMode,
           [`k-avatar-${e.fillMode}-${e.themeColor}`]: !!(e.fillMode && e.themeColor)
         },
         e.className
       )
     },
-    /* @__PURE__ */ a.createElement("span", { className: `k-avatar-${e.type}` }, e.children)
+    /* @__PURE__ */ r.createElement("span", { className: `k-avatar-${e.type}` }, e.children)
   );
 };
-i.propTypes = {
-  className: r.string,
-  type: r.oneOf(["text", "image", "icon"]),
-  size: r.oneOf([null, "small", "medium", "large"]),
-  rounded: r.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: r.oneOf([null, "solid", "outline"]),
+d.propTypes = {
+  className: o.string,
+  type: o.oneOf(["text", "image", "icon"]),
+  size: o.oneOf(["small", "medium", "large"]),
+  rounded: o.oneOf(["small", "medium", "large", "full"]),
+  fillMode: o.oneOf(["solid", "outline"]),
   /* eslint-disable max-len */
-  themeColor: r.oneOf([
-    null,
+  themeColor: o.oneOf([
     "base",
     "dark",
     "error",
     "info",
     "inverse",
-    "inverse",
     "light",
     "primary",
     "secondary",
@@ -61,5 +59,5 @@ i.propTypes = {
   ])
 };
 export {
-  i as Avatar
+  d as Avatar
 };

package/card/Card.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardProps } from './interfaces/CardProps.js';
+import { CardHandle } from './interfaces/CardHandle.js';
+import * as React from 'react';
+export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<CardHandle | null>>;

package/card/CardActions.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardActionsProps } from './interfaces/CardActionsProps.js';
+import * as React from 'react';
+export declare const CardActions: React.FunctionComponent<CardActionsProps>;

package/card/CardActions.mjs

@@ -8,7 +8,7 @@
 import * as e from "react";
 import o from "prop-types";
 import { classNames as n } from "@progress/kendo-react-common";
-import { cardActionsLayout as i, cardOrientation as a } from "./interfaces/Enums.mjs";
+import { cardOrientation as a, cardActionsLayout as i } from "./interfaces/Enums.mjs";
 const s = (r) => {
   const t = {
     layout: i.START,

package/card/CardBody.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardBodyProps } from './interfaces/CardBodyProps.js';
+import * as React from 'react';
+export declare const CardBody: React.FunctionComponent<CardBodyProps>;

package/card/CardFooter.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardFooterProps } from './interfaces/CardFooterProps.js';
+import * as React from 'react';
+export declare const CardFooter: React.FunctionComponent<CardFooterProps>;

package/card/CardHeader.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardHeaderProps } from './interfaces/CardHeaderProps.js';
+import * as React from 'react';
+export declare const CardHeader: React.FunctionComponent<CardHeaderProps>;

package/card/CardImage.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardImageProps } from './interfaces/CardImageProps.js';
+import * as React from 'react';
+export declare const CardImage: React.FunctionComponent<CardImageProps>;

package/card/CardSubtitle.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardSubtitleProps } from './interfaces/CardSubtitleProps.js';
+import * as React from 'react';
+export declare const CardSubtitle: React.FunctionComponent<CardSubtitleProps>;

package/card/CardTitle.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { CardTitleProps } from './interfaces/CardTitleProps.js';
+import * as React from 'react';
+export declare const CardTitle: React.FunctionComponent<CardTitleProps>;

package/card/interfaces/AvatarProps.d.ts

@@ -0,0 +1,141 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { avatarType } from './Enums.js';
+export interface AvatarProps {
+    /**
+     * Sets the Avatar children elements.
+     *
+     * @example
+     * ```jsx
+     * <Avatar>AB</Avatar>
+     * ```
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the Avatar.
+     *
+     * @example
+     * ```jsx
+     * <Avatar style={{ backgroundColor: 'blue' }}>AB</Avatar>
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the Avatar.
+     *
+     * @example
+     * ```jsx
+     * <Avatar className="custom-class">AB</Avatar>
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets the type of the Avatar.
+     *
+     * The supported values are:
+     * * `image`
+     * * `text`
+     * * `icon`
+     *
+     * @example
+     * ```jsx
+     * <Avatar type="image" src="avatar.jpg" />
+     * ```
+     */
+    type?: avatarType | string;
+    /**
+     * Configures the `size` of the Avatar.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Avatar size="large">AB</Avatar>
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Avatar.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Avatar rounded="full">AB</Avatar>
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets a border to the Avatar.
+     *
+     * @example
+     * ```jsx
+     * <Avatar border>AB</Avatar>
+     * ```
+     */
+    border?: boolean;
+    /**
+     * Configures the `fillMode` of the Avatar.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Avatar fillMode="outline">AB</Avatar>
+     * ```
+     */
+    fillMode?: 'solid' | 'outline';
+    /**
+     * Configures the `themeColor` of the Avatar.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - error
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Avatar themeColor="primary">AB</Avatar>
+     * ```
+     */
+    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'dark' | 'light' | 'inverse';
+    /**
+     * Sets the URL for the image when type is 'image'.
+     *
+     * @example
+     * ```jsx
+     * <Avatar type="image" src="avatar.jpg" />
+     * ```
+     */
+    src?: string;
+}