@epam/ai-dial-ui-kit 0.10.0-dev.8 → 0.10.0

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.10.0-dev.8",
-  "generatedAt": "2026-05-05T07:39:48.139Z",
+  "version": "0.10.0",
+  "generatedAt": "2026-05-25T19:48:43.159Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -109,7 +109,7 @@
     },
     {
       "name": "DialAlert",
-      "category": "Feedback",
+      "category": "Elements",
       "description": "A contextual feedback component for displaying important messages.\naliases: Notification|StatusBanner\n\nRenders a colored container with an icon, message text, and an optional\nclose button.",
       "props": [
         {
@@ -119,6 +119,12 @@
           "defaultValue": "AlertVariant.Info",
           "description": "Defines the visual style and icon of the alert"
         },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional heading displayed above the message in semibold"
+        },
         {
           "name": "message",
           "type": "ReactNode",
@@ -154,7 +160,7 @@
         }
       ],
       "examples": [
-        "<DialAlert\n  variant={AlertVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<DialAlert\n  variant={AlertVariant.Success}\n  message=\"Changes saved successfully.\"\n/>\n\n<DialAlert\n  variant={AlertVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<DialAlert\n  variant={AlertVariant.Warning}\n  message=\"Custom alert\"\n  aria-live=\"polite\"\n  id=\"warning-alert\"\n/>"
+        "<DialAlert\n  variant={AlertVariant.Info}\n  message=\"This is an info alert.\"\n/>\n\n<DialAlert\n  variant={AlertVariant.Success}\n  title=\"Saved\"\n  message=\"Changes saved successfully.\"\n/>\n\n<DialAlert\n  variant={AlertVariant.Error}\n  closable\n  message=\"Something went wrong.\"\n  onClose={(e) => console.log('closed', e)}\n/>\n\n<DialAlert\n  variant={AlertVariant.Loading}\n  title=\"Processing\"\n  message=\"Please wait...\"\n/>"
       ],
       "sourceFile": "components/Alert/Alert.tsx"
     },
@@ -202,6 +208,104 @@
       ],
       "sourceFile": "components/Loader/Loader.tsx"
     },
+    {
+      "name": "DialSpinner",
+      "category": "Status",
+      "description": "",
+      "props": [
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "defaultValue": "24"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Loading'"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/Spinner/Spinner.tsx"
+    },
+    {
+      "name": "DialProgressBar",
+      "category": "Status",
+      "description": "",
+      "props": [
+        {
+          "name": "value",
+          "type": "number",
+          "required": true
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "required": false,
+          "defaultValue": "100"
+        },
+        {
+          "name": "size",
+          "type": "DialProgressBarSize",
+          "required": false,
+          "defaultValue": "DialProgressBarSize.Medium"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'Progress'"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/ProgressBar/ProgressBar.tsx"
+    },
+    {
+      "name": "DialPagination",
+      "category": "Navigation",
+      "description": "",
+      "props": [
+        {
+          "name": "page",
+          "type": "number",
+          "required": true
+        },
+        {
+          "name": "totalPages",
+          "type": "number",
+          "required": true
+        },
+        {
+          "name": "onPageChange",
+          "type": "(page: number) => void",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/Pagination/Pagination.tsx"
+    },
     {
       "name": "DialCheckbox",
       "category": "Form",
@@ -1771,6 +1875,23 @@
       ],
       "sourceFile": "components/Button/ButtonWrappers.tsx"
     },
+    {
+      "name": "DialRoundedButton",
+      "category": "Elements/Buttons",
+      "description": "A pill-shaped neutral button with an optional selected state.",
+      "props": [
+        {
+          "name": "selected",
+          "type": "boolean",
+          "required": false,
+          "description": "Applies accent-primary tint and border when true"
+        }
+      ],
+      "examples": [
+        "<DialRoundedButton label=\"Tag\" selected={isActive} onClick={handleClick} />"
+      ],
+      "sourceFile": "components/Button/ButtonWrappers.tsx"
+    },
     {
       "name": "DialErrorIconButton",
       "category": "Elements/Buttons",
@@ -1900,6 +2021,29 @@
       ],
       "sourceFile": "components/RemoveButton/RemoveButton.tsx"
     },
+    {
+      "name": "DialFabButton",
+      "category": "Elements/Buttons",
+      "description": "A Floating Action Button (FAB) component — circular icon button for primary actions.\naliases: FloatingActionButton|FabButton|CircularButton",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon to display inside the button"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "required": false,
+          "description": "Optional tooltip configuration"
+        }
+      ],
+      "examples": [
+        "<DialFabButton\n  icon={<IconArrowNarrowDown size={24} stroke={1.5} />}\n  onClick={handleClick}\n  aria-label=\"Scroll to bottom\"\n/>"
+      ],
+      "sourceFile": "components/FabButton/FabButton.tsx"
+    },
     {
       "name": "DialTextarea",
       "category": "Elements",
@@ -3016,133 +3160,112 @@
     {
       "name": "DialDropdown",
       "category": "Dropdown",
-      "description": "Renders the given trigger (`children`) and a floating contextual menu overlay.\naliases: ContextMenu|PopupMenu\n\nSupports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional\nclose button inside the overlay. Placement is taken directly from Floating UI; when\n`placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.",
+      "description": "",
       "props": [
         {
           "name": "children",
           "type": "ReactNode",
-          "required": true,
-          "description": "Trigger element(s) to anchor and open the menu"
+          "required": true
         },
         {
           "name": "menu",
           "type": "DropdownMenuProps",
-          "required": false,
-          "description": "Items-based menu definition"
+          "required": false
         },
         {
           "name": "renderOverlay",
           "type": "() => ReactNode",
-          "required": false,
-          "description": "Render function for fully custom overlay content (ignored when `menu` is provided)"
+          "required": false
         },
         {
           "name": "trigger",
           "type": "DropdownTrigger[]",
           "required": false,
-          "defaultValue": "[DropdownTrigger.Click]",
-          "description": "Interactions that open the menu"
+          "defaultValue": "[DropdownTrigger.Click]"
         },
         {
           "name": "placement",
           "type": "Placement",
-          "required": false,
-          "description": "Floating UI placement string; when omitted, auto placement is used"
+          "required": false
         },
         {
           "name": "allowedPlacements",
           "type": "Placement[]",
-          "required": false,
-          "description": "Restricts the allowed placements"
+          "required": false
         },
         {
           "name": "disabled",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false",
-          "description": "Disables interaction and prevents opening"
+          "defaultValue": "false"
         },
         {
           "name": "open",
           "type": "boolean",
-          "required": false,
-          "description": "Controlled open state (when provided, `defaultOpen` is ignored)"
+          "required": false
         },
         {
           "name": "defaultOpen",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false",
-          "description": "Initial open state in uncontrolled mode"
+          "defaultValue": "false"
         },
         {
           "name": "onOpenChange",
           "type": "(open: boolean) => void",
-          "required": false,
-          "description": "Fired whenever the open state changes"
+          "required": false
         },
         {
           "name": "closable",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false",
-          "description": "Whether the overlay shows an internal close button"
+          "defaultValue": "false"
         },
         {
           "name": "onClose",
           "type": "(e: MouseEvent<HTMLButtonElement>) => void",
-          "required": false,
-          "description": "Fired when the close button inside the overlay is clicked"
+          "required": false
         },
         {
           "name": "className",
           "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the trigger wrapper"
+          "required": false
         },
         {
           "name": "listClassName",
           "type": "string",
-          "required": false,
-          "description": "Additional CSS classes applied to the floating overlay"
+          "required": false
         },
         {
           "name": "outsidePressIgnoreRef",
           "type": "RefObject<HTMLElement | null>",
-          "required": false,
-          "description": "Ref to an element that should not trigger outside press behavior"
+          "required": false
         },
         {
           "name": "outsideClosable",
           "type": "boolean",
           "required": false,
-          "defaultValue": "true",
-          "description": "Whether clicks outside the overlay should close it"
+          "defaultValue": "true"
         },
         {
           "name": "anchorToMouse",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false",
-          "description": "Whether to anchor the dropdown to the mouse position"
+          "defaultValue": "false"
         },
         {
           "name": "matchReferenceWidth",
           "type": "boolean",
           "required": false,
-          "defaultValue": "true",
-          "description": "Whether to match the reference element's width"
+          "defaultValue": "true"
         },
         {
           "name": "maxDropdownHeight",
           "type": "number | null",
-          "required": false,
-          "description": "Maximum height of the dropdown menu; when omitted, no limit is applied"
+          "required": false
         }
       ],
-      "examples": [
-        "// Simple items menu\n<DialDropdown menu={{ items: [{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }] }}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Open</button>\n</DialDropdown>\n\n// Hover trigger\n<DialDropdown trigger={[DropdownTrigger.Hover]} placement=\"bottom-end\" menu={{ items }}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Hover me</button>\n</DialDropdown>\n\n// Custom overlay content\n<DialDropdown closable renderOverlay={() => <div className=\"p-3\">Custom content</div>}>\n  <button type=\"button\" className=\"px-3 py-2 rounded border\">Custom</button>\n</DialDropdown>"
-      ],
+      "examples": [],
       "sourceFile": "components/Dropdown/Dropdown.tsx"
     },
     {
@@ -3162,6 +3285,74 @@
       ],
       "sourceFile": "components/ButtonDropdown/ButtonDropdown.tsx"
     },
+    {
+      "name": "DialDropdownIcon",
+      "category": "Dropdown",
+      "description": "A compact icon trigger with a dropdown menu.\naliases: ModelPicker|IconMenu|AvatarDropdown",
+      "props": [
+        {
+          "name": "menu",
+          "type": "DropdownMenuProps",
+          "required": true,
+          "description": "Dropdown menu definition."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Primary trigger icon."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": true,
+          "description": "Accessible name for the trigger button."
+        },
+        {
+          "name": "size",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Trigger size."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the dropdown wrapper."
+        },
+        {
+          "name": "buttonClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the trigger button."
+        },
+        {
+          "name": "iconClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes applied to the primary icon wrapper."
+        },
+        {
+          "name": "caretIcon",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": "<IconChevronDown size={DIAL_ICON_SIZE.SM} />",
+          "description": "Custom caret icon."
+        },
+        {
+          "name": "showCaret",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to render the caret."
+        }
+      ],
+      "examples": [
+        "<DialDropdownIcon\n  ariaLabel=\"Select model\"\n  icon={<IconBrandOpenai size={18} />}\n  menu={{ items }}\n/>"
+      ],
+      "sourceFile": "components/DropdownIcon/DropdownIcon.tsx"
+    },
     {
       "name": "DialFileManager",
       "category": "FileManager",
@@ -3369,18 +3560,6 @@
           "required": false,
           "description": "Callback fired when files are downloaded"
         },
-        {
-          "name": "onAddSibling",
-          "type": "(items: DialFile[]) => void",
-          "required": false,
-          "description": "Callback fired when when a new folder is added as a sibling to the selected folder"
-        },
-        {
-          "name": "onAddChild",
-          "type": "(items: DialFile[]) => void",
-          "required": false,
-          "description": "Callback fired when when a new folder is added as a child to the selected folder"
-        },
         {
           "name": "onRenameValidate",
           "type": "(value: string, item: DialFile) => string | null",
@@ -3649,6 +3828,120 @@
         "<DialSchemaRenderer\n  schema={mySchema}\n  onChange={(v) => console.log(v)}\n  onDefaultValues={(defaults) => console.log(defaults)}\n/>"
       ],
       "sourceFile": "components/SchemaRenderer/SchemaRenderer.tsx"
+    },
+    {
+      "name": "DialJsonEditor",
+      "category": "Data Display",
+      "description": "A JSON editor component built on top of Monaco Editor.\nProvides syntax highlighting, validation, and theme support for JSON editing.\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialJsonEditor` and the manifest `lazy` field for dynamic import guidance.",
+      "props": [
+        {
+          "name": "value",
+          "type": "string | undefined",
+          "required": false,
+          "description": "The JSON string value to edit"
+        },
+        {
+          "name": "currentTheme",
+          "type": "string",
+          "required": true,
+          "description": "The theme to apply to the editor"
+        },
+        {
+          "name": "themesConfig",
+          "type": "Record<EditorThemes, editor.IStandaloneThemeData>",
+          "required": false,
+          "defaultValue": "EDITOR_THEMES_CONFIG",
+          "description": "Custom theme configurations"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string | undefined) => void",
+          "required": true,
+          "description": "Callback fired when the editor content changes"
+        },
+        {
+          "name": "onValidateJSON",
+          "type": "OnValidate",
+          "required": false,
+          "description": "Callback fired when JSON validation occurs"
+        },
+        {
+          "name": "options",
+          "type": "editor.IStandaloneEditorConstructionOptions",
+          "required": false,
+          "description": "Additional Monaco editor options"
+        }
+      ],
+      "examples": [],
+      "sourceFile": "components/JsonEditor/JsonEditor.tsx",
+      "lazy": {
+        "loaderExportName": "LazyDialJsonEditor",
+        "packageImport": "@epam/ai-dial-ui-kit",
+        "ssr": false,
+        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyDialJsonEditor } from '@epam/ai-dial-ui-kit';\n\nconst DialJsonEditor = dynamic(\n  async () => (await LazyDialJsonEditor()).DialJsonEditor,\n  { ssr: false },\n);"
+      }
+    },
+    {
+      "name": "DialMarkdownEditor",
+      "category": "Data Display",
+      "description": "A Markdown editor component built on top of\n\nLazy-loaded component. This component is not exported directly from the UI kit to avoid errors when using with SSR. Use `LazyDialMarkdownEditor` and the manifest `lazy` field for dynamic import guidance.",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The current markdown content"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback fired when the editor content changes"
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "required": false,
+          "defaultValue": "300",
+          "description": "Height of the editor in pixels"
+        },
+        {
+          "name": "preview",
+          "type": "PreviewType",
+          "required": false,
+          "defaultValue": "'edit'",
+          "description": "Preview mode ('edit', 'live', 'preview')"
+        },
+        {
+          "name": "theme",
+          "type": "EditorThemes",
+          "required": false,
+          "defaultValue": "EditorThemes.dark",
+          "description": "Theme for the editor ('light' or 'dark')"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the container"
+        },
+        {
+          "name": "placeholder",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content to display when the editor is empty"
+        }
+      ],
+      "examples": [
+        "<DialMarkdownEditor\nvalue=\"# Hello World\"\nonChange={(value) => console.log(value)}\nheight={400}\ntheme=\"dark\"\n/>"
+      ],
+      "sourceFile": "components/MarkdownEditor/MarkdownEditor.tsx",
+      "lazy": {
+        "loaderExportName": "LazyDialMarkdownEditor",
+        "packageImport": "@epam/ai-dial-ui-kit",
+        "ssr": false,
+        "nextDynamicExample": "import dynamic from 'next/dynamic';\nimport { LazyDialMarkdownEditor } from '@epam/ai-dial-ui-kit';\n\nconst DialMarkdownEditor = dynamic(\n  async () => (await LazyDialMarkdownEditor()).DialMarkdownEditor,\n  { ssr: false },\n);"
+      }
     }
   ],
   "types": [
@@ -3797,6 +4090,10 @@
         {
           "name": "Error",
           "value": "'error'"
+        },
+        {
+          "name": "Loading",
+          "value": "'loading'"
         }
       ],
       "sourceFile": "types/alert.ts"
@@ -4382,6 +4679,10 @@
         {
           "name": "icon?",
           "value": "ReactNode"
+        },
+        {
+          "name": "children?",
+          "value": "SelectOption[]"
         }
       ],
       "sourceFile": "models/select.ts"
@@ -4448,6 +4749,10 @@
         {
           "name": "onClick?",
           "value": "(info: { key: string; domEvent: MouseEvent }) => void"
+        },
+        {
+          "name": "children?",
+          "value": "DropdownItem[]"
         }
       ],
       "sourceFile": "models/dropdown.ts"
@@ -4730,6 +5035,10 @@
           "name": "description?",
           "value": "string"
         },
+        {
+          "name": "isHidden?",
+          "value": "boolean"
+        },
         {
           "name": "isProtected?",
           "value": "boolean"
@@ -4823,7 +5132,7 @@
       "name": "useEditableItem",
       "sourceFile": "hooks/use-editable-item.tsx",
       "description": "A React hook that manages the behavior of an inline-editable text input.\nIt provides validation handling, cancel/restore logic, auto-focus behavior,\nkeyboard shortcuts, and outside-click detection.",
-      "signature": "function useEditableItem({\n  value: initialValue,\n  isEditing,\n  restoreOnCancel = true,\n  onValidate,\n  onSave,\n  onCancel,\n}: UseEditableItemOptions): UseEditableItemResult"
+      "signature": "function useEditableItem({\n  value: initialValue,\n  isEditing,\n  isCreating,\n  isLoading = false,\n  restoreOnCancel = true,\n  onValidate,\n  onSave,\n  onCancel,\n  onCreateFolderSave,\n  onCreateFolderCancel,\n}: UseEditableItemOptions): UseEditableItemResult"
     },
     {
       "name": "FileManagerProvider",