@epam/ai-dial-ui-kit 0.12.0-dev.3 → 0.12.0-dev.30

package/dist/CHANGELOG.md

@@ -13,6 +13,15 @@ _No unreleased changes yet._
 
 ---
 
+## [0.12.0]
+
+### Breaking Changes
+
+- **Legacy typography classes removed** — `dial-h1`, `dial-h2`, `dial-h3`, `dial-body`, `dial-small`, `dial-small-semi`, `dial-small-medium`, `dial-small-150`, `dial-tiny`, `dial-tiny-150`, `dial-tiny-semi`, and `dial-caption` have been removed in favor of the `dial-*-text` typography scale (e.g. `dial-h1-text`, `dial-small-text`, `dial-caption-text`). This consolidates typography onto a single naming convention.
+  See [migration guide](migration-guides/0.12.0/legacy-typography-classes-removal.md).
+
+---
+
 ## [0.11.0]
 
 ### Breaking Changes

package/dist/{JsonEditor-BChf7gyY.js → JsonEditor-BqKutzC3.js}

@@ -1,5 +1,4 @@
-import { j as l } from "./index-Cq70XHZ5.js";
-import { E as o } from "./editor-Cu1dRT39.js";
+import { E as o, j as l } from "./index-9yzOzks2.js";
 import { Editor as u } from "@monaco-editor/react";
 const c = {
   [o.dark]: {
@@ -48,7 +47,7 @@ const c = {
       "scrollbarSlider.activeBackground": "#242C42"
     }
   }
-}, m = ({
+}, k = ({
   value: n,
   onChange: t,
   onValidateJSON: i,
@@ -107,5 +106,5 @@ const c = {
   );
 };
 export {
-  m as DialJsonEditor
+  k as DialJsonEditor
 };

package/dist/JsonEditor-DiUgycbj.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-mhZPfHnD.cjs"),l=require("@monaco-editor/react"),u={[r.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[r.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},c=({value:n,onChange:t,onValidateJSON:i,options:s,currentTheme:e,themesConfig:d=u})=>{function a(o){o?.editor?.defineTheme(e,d[e]),o.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}return r.jsxRuntimeExports.jsx(l.Editor,{beforeMount:a,height:"100%",defaultLanguage:"json",value:n,onChange:t,theme:e,onValidate:i,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...s??{}}})};exports.DialJsonEditor=c;

package/dist/MarkdownEditor-BECxx9cj.js

@@ -0,0 +1,35 @@
+import { j as e, E as m, m as c } from "./index-9yzOzks2.js";
+import x from "@uiw/react-md-editor";
+const j = ({
+  value: o,
+  onChange: t,
+  height: r = 300,
+  preview: a = "edit",
+  theme: i = m.dark,
+  className: d,
+  placeholder: s
+}) => {
+  const n = s !== void 0 && !o;
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      "data-color-mode": i,
+      className: c("relative", d),
+      children: [
+        /* @__PURE__ */ e.jsx(
+          x,
+          {
+            value: o,
+            onChange: (l) => t?.(l || ""),
+            height: r,
+            preview: a
+          }
+        ),
+        n && /* @__PURE__ */ e.jsx("div", { className: "pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40", children: s })
+      ]
+    }
+  );
+};
+export {
+  j as DialMarkdownEditor
+};

package/dist/MarkdownEditor-C8FS2irR.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-mhZPfHnD.cjs"),c=require("@uiw/react-md-editor"),x=({value:t,onChange:s,height:r=300,preview:i="edit",theme:n=e.EditorThemes.dark,className:a,placeholder:o})=>{const d=o!==void 0&&!t;return e.jsxRuntimeExports.jsxs("div",{"data-color-mode":n,className:e.mergeClasses("relative",a),children:[e.jsxRuntimeExports.jsx(c,{value:t,onChange:l=>s?.(l||""),height:r,preview:i}),d&&e.jsxRuntimeExports.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:o})]})};exports.DialMarkdownEditor=x;

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.12.0-dev.3",
-  "generatedAt": "2026-06-24T10:42:33.039Z",
+  "version": "0.12.0-dev.30",
+  "generatedAt": "2026-07-15T10:04:57.742Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -20,7 +20,7 @@
     },
     "setupNotes": "## Next.js Integration\n1. Install the package and peer dependencies that are not currently in your project\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom  @tabler/icons-react classnames\nnpm install @floating-ui/react monaco-editor @monaco-editor/react\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
-  "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                   | Weight   | Size / Line-height      |\n| ----------------------- | -------- | ----------------------- |\n| `.dial-display1-text`   | semibold | 32px / 48px             |\n| `.dial-display2-text`   | semibold | 28px / 40px             |\n| `.dial-h1-text`         | semibold | 22px / 32px             |\n| `.dial-h2-text`         | semibold | 20px / 28px             |\n| `.dial-h3-text`         | semibold | 18px / 26px             |\n| `.dial-body-text`       | normal   | 16px / 24px             |\n| `.dial-body-semi-text`  | semibold | 16px / 24px             |\n| `.dial-small-text`      | normal   | 14px / 20px             |\n| `.dial-small-semi-text` | semibold | 14px / 20px             |\n| `.dial-tiny-text`       | normal   | 12px / 16px             |\n| `.dial-tiny-semi-text`  | semibold | 12px / 16px             |\n| `.dial-caption-text`    | normal   | 10px / 12px             |\n| `.dial-code-text`       | normal   | 14px / 20px (monospace) |\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
+  "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                            | Weight   | Size / Line-height      |\n| -------------------------------- | -------- | ----------------------- |\n| `.dial-display1-text`            | semibold | 32px / 48px             |\n| `.dial-display2-text`            | semibold | 28px / 40px             |\n| `.dial-h1-text`                  | semibold | 22px / 32px             |\n| `.dial-h2-text`                  | semibold | 20px / 28px             |\n| `.dial-h3-text`                  | semibold | 18px / 26px             |\n| `.dial-body-text`                | normal   | 16px / 24px             |\n| `.dial-body-semi-text`           | semibold | 16px / 24px             |\n| `.dial-body-paragraph-text`      | normal   | 16px / 26px             |\n| `.dial-body-paragraph-semi-text` | semibold | 16px / 26px             |\n| `.dial-small-text`               | normal   | 14px / 20px             |\n| `.dial-small-semi-text`          | semibold | 14px / 20px             |\n| `.dial-tiny-text`                | normal   | 12px / 16px             |\n| `.dial-tiny-semi-text`           | semibold | 12px / 16px             |\n| `.dial-caption-text`             | normal   | 10px / 12px             |\n| `.dial-code-text`                | normal   | 14px / 20px (monospace) |\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
   "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#000000` |\n| `layer-1` | `var(--bg-layer-1)` | `#0C101D` |\n| `layer-2` | `var(--bg-layer-2)` | `#161B2D` |\n| `layer-3` | `var(--bg-layer-3)` | `#1D2439` |\n| `layer-4` | `var(--bg-layer-4)` | `#242C42` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `model-icon` | `var(--bg-model-icon)` | `#FFFFFF` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--bg-accent-tertiary)` | `#A972FF` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `orange-400` | `var(--bg-orange-400)` | `#D97C27` |\n| `orange-800` | `var(--bg-orange-800)` | `#B25500` |\n\n### controlsBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#3664E2` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#124ACE` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF4D` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#CC4545` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#AE2F2F` |\n| `controls-error-alpha-hover` | `var(--controls-bg-alpha-hover)` | `#F764642E` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#696E7C` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#242C42` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#242C42` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#575F73` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `controls-accent-hover` | `var(--controls-bg-accent-hover)` | `#4878D2` |\n| `controls-accent-alpha` | `var(--controls-bg-accent-alpha)` | `#5C8DEA2B` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--stroke-accent-tertiary)` | `#A972FF` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `accent-primary-hover` | `var(--stroke-accent-primary-hover)` | `#4878d2` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-disable` | `var(--controls-text-disable)` | `#0C101D` |\n\n### controlsTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#242C42` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#7C8293` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#575F73` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#FCFCFC` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#124ACE` |\n| `controls-primary` | `var(--controls-primary)` | `#FCFCFC` |\n| `controls-disable` | `var(--controls-text-disable)` | `#575F73` |",
   "components": [
     {
@@ -84,6 +84,84 @@
       ],
       "sourceFile": "components/Label/Label.tsx"
     },
+    {
+      "name": "DialAccordion",
+      "category": "Layout",
+      "description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a chevron that rotates when\nexpanded, a title, and an optional description.",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Title rendered in the header."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional secondary text rendered under the title."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content revealed when expanded."
+        },
+        {
+          "name": "expanded",
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled expanded state."
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Initial expanded state when uncontrolled."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables toggling."
+        },
+        {
+          "name": "nonCollapsible",
+          "type": "boolean",
+          "required": false,
+          "description": "Renders the panel permanently expanded without a chevron or toggle."
+        },
+        {
+          "name": "onToggle",
+          "type": "(expanded: boolean) => void",
+          "required": false,
+          "description": "Fired when the header is clicked. Receives the next expanded state."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the outer container."
+        },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the header button."
+        },
+        {
+          "name": "contentClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the content region."
+        }
+      ],
+      "examples": [
+        "<DialAccordion title=\"Advanced settings\" description=\"Optional configuration\">\n  <p>Panel content</p>\n</DialAccordion>"
+      ],
+      "sourceFile": "components/Accordion/Accordion.tsx"
+    },
     {
       "name": "DialIcon",
       "category": "Data Display",
@@ -520,6 +598,12 @@
           "required": true,
           "description": "Layout direction of radios: row or column"
         },
+        {
+          "name": "labelDescription",
+          "type": "string",
+          "required": false,
+          "description": "Optional description rendered by `DialFormItem`"
+        },
         {
           "name": "onChange",
           "type": "(radioId: string) => void",
@@ -631,6 +715,12 @@
           "defaultValue": "false",
           "description": "Disables interaction"
         },
+        {
+          "name": "labelProps",
+          "type": "DialLabelProps",
+          "required": false,
+          "description": "Props forwarded to DialLabel rendered above the slider"
+        },
         {
           "name": "labels",
           "type": "[string, string] | [string, string, string]",
@@ -1668,6 +1758,13 @@
           "defaultValue": "TabOrientation.Horizontal",
           "description": "Layout direction of the tabs. Uses the  enum."
         },
+        {
+          "name": "view",
+          "type": "TabView",
+          "required": false,
+          "defaultValue": "TabView.Default",
+          "description": "Visual style of the tabs. Uses the  enum.\n`Inline` renders a compact segmented control where the active tab is marked with a\nleading check icon. The inline view is not responsive and ignores overflow/dropdown logic."
+        },
         {
           "name": "className",
           "type": "string",
@@ -1703,6 +1800,16 @@
           "type": "string",
           "required": false,
           "description": "Optional CSS class applied to tab in non small-screed mode."
+        },
+        {
+          "name": "inlineContainerClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "inlineTabClassName",
+          "type": "string",
+          "required": false
         }
       ],
       "examples": [
@@ -1806,6 +1913,11 @@
           "type": "boolean",
           "required": false
         },
+        {
+          "name": "isFirst",
+          "type": "boolean",
+          "required": false
+        },
         {
           "name": "separator",
           "type": "ReactNode",
@@ -2292,6 +2404,53 @@
       ],
       "sourceFile": "components/Switch/Switch.tsx"
     },
+    {
+      "name": "DialSegmentedControl",
+      "category": "Form",
+      "description": "A single-select control for switching between a small set of mutually exclusive,\nequally-sized options (e.g. view switchers).\naliases: SegmentedButton|ViewSwitcher\n\nRenders a horizontal group of segments where every option is always visible and\nequally sized. Supports 2 or more segments, optional per-option icons, and\nkeyboard navigation (Arrow keys, Home, End).",
+      "props": [
+        {
+          "name": "options",
+          "type": "SegmentedControlOption<T>[]",
+          "required": true,
+          "description": "Segments to render. Each option needs a unique `value` and may include a `label`, `icon`, and `disabled` flag."
+        },
+        {
+          "name": "value",
+          "type": "T",
+          "required": true,
+          "description": "The currently selected option `value`."
+        },
+        {
+          "name": "onChange",
+          "type": "(value: T) => void",
+          "required": true,
+          "description": "Callback fired with the selected option `value`."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables the entire control when set."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes applied to the container."
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible label for the control (applied to the `tablist`)."
+        }
+      ],
+      "examples": [
+        "<DialSegmentedControl\n  ariaLabel=\"View\"\n  value={view}\n  onChange={setView}\n  options={[\n    { value: 'list', label: 'List' },\n    { value: 'grid', label: 'Grid' },\n  ]}\n/>"
+      ],
+      "sourceFile": "components/SegmentedControl/SegmentedControl.tsx"
+    },
     {
       "name": "DialPopup",
       "category": "Overlay",
@@ -3358,6 +3517,16 @@
           "type": "string",
           "required": false
         },
+        {
+          "name": "overlayContentClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "separatorClassName",
+          "type": "string",
+          "required": false
+        },
         {
           "name": "listClassName",
           "type": "string",
@@ -3743,6 +3912,12 @@
           "required": false,
           "description": "Callback fired when files are uploaded"
         },
+        {
+          "name": "prepareUploadFileName",
+          "type": "(name: string) => string",
+          "required": false,
+          "description": "Optional mapper applied to each uploaded item's name before conflict resolution runs and before `onUploadFiles`/`onUploadArchive` are called. Use it to sanitize or normalize names (e.g. stripping forbidden symbols). Conflict detection is performed against the mapped names, so renames take place before the conflict check."
+        },
         {
           "name": "onValidateUpload",
           "type": "(\n    files: DialUploadFileItem[],\n    existingFiles: DialFile[],\n    destinationFolder: string,\n  ) => FileUploadValidationResult | Promise<FileUploadValidationResult>",
@@ -3938,6 +4113,11 @@
           "name": "onNewFolderDepthExceeded",
           "type": "() => void",
           "required": false
+        },
+        {
+          "name": "initialUploadFilesOpen",
+          "type": "boolean",
+          "required": false
         }
       ],
       "examples": [
@@ -3955,6 +4135,178 @@
       ],
       "sourceFile": "components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.tsx"
     },
+    {
+      "name": "DialFoldersTree",
+      "category": "Data Display",
+      "description": "DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,\nand optional file display.\n\nProvides a fully interactive, recursive folder structure with:\n- Expandable and collapsible items\n- Optional file visibility\n- Loading state indicators for specific paths\n- Inline renaming support for folders or files\n- Multi-item selection highlighting\n- Context menu integration via `DialDropdown`\n- Recursive rendering with indentation and icons\n- Customizable empty state (title, description, and icon)",
+      "props": [
+        {
+          "name": "items",
+          "type": "DialFile[]",
+          "required": true,
+          "description": "Array of folder and file nodes to display in the tree."
+        },
+        {
+          "name": "expandedPaths",
+          "type": "Set<string>",
+          "required": false,
+          "description": "Set of folder paths that should be expanded."
+        },
+        {
+          "name": "loadingPaths",
+          "type": "Set<string>",
+          "required": false,
+          "defaultValue": "new Set()",
+          "description": "Set of folder paths currently loading (shows spinner or placeholder)."
+        },
+        {
+          "name": "loadedPaths",
+          "type": "Set<string>",
+          "required": false,
+          "defaultValue": "new Set()",
+          "description": "Set of folder paths that have loaded."
+        },
+        {
+          "name": "sharedByMePaths",
+          "type": "Set<string>",
+          "required": false,
+          "defaultValue": "new Set()",
+          "description": "Set of items paths that the user has shared with others. Enables UI indicators (icons/badges)."
+        },
+        {
+          "name": "selectedPath",
+          "type": "string",
+          "required": false,
+          "description": "Path representing the currently selected folder or file."
+        },
+        {
+          "name": "renamedPath",
+          "type": "string",
+          "required": false,
+          "description": "Path of the folder or file currently being edited."
+        },
+        {
+          "name": "createdFolderPath",
+          "type": "string | null",
+          "required": false,
+          "description": "Optional Path of the new created folder."
+        },
+        {
+          "name": "showFiles",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether to show files in addition to folders."
+        },
+        {
+          "name": "rootItemPath",
+          "type": "string",
+          "required": false,
+          "description": "Path of the folder to treat as the custom root node (no context menu, special label)."
+        },
+        {
+          "name": "rootItemLabel",
+          "type": "string",
+          "required": false,
+          "description": "Label to display for the root node instead of its actual name."
+        },
+        {
+          "name": "emptyStateTitle",
+          "type": "string",
+          "required": false,
+          "defaultValue": "'No Folders'",
+          "description": "Title text displayed when there are no items."
+        },
+        {
+          "name": "emptyStateDescription",
+          "type": "string",
+          "required": false,
+          "description": "Optional description text for the empty state."
+        },
+        {
+          "name": "emptyStateIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional icon to display in the empty state."
+        },
+        {
+          "name": "onItemClick",
+          "type": "(item: DialFile) => void",
+          "required": false,
+          "description": "Callback fired when a folder or file is clicked (receives the corresponding `DialFile` node)."
+        },
+        {
+          "name": "onRenameSave",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Callback fired when editing is confirmed with a valid name (receives the new name)."
+        },
+        {
+          "name": "onRenameCancel",
+          "type": "() => void",
+          "required": false,
+          "description": "Callback fired when editing is cancelled."
+        },
+        {
+          "name": "onRenameValidate",
+          "type": "(value: string, item: DialFile) => string | null",
+          "required": false,
+          "description": "Function to validate the new name during editing. Should return an error string or `null` if valid."
+        },
+        {
+          "name": "onCreateFolderSave",
+          "type": "(value: string) => void",
+          "required": false,
+          "description": "Optional Callback fired when create new folder is confirmed"
+        },
+        {
+          "name": "onCreateFolderCancel",
+          "type": "() => void",
+          "required": false,
+          "description": "Optional Callback fired when create new folder is cancelled"
+        },
+        {
+          "name": "getContextMenuItems",
+          "type": "(item: DialFile) => DropdownItem[]",
+          "required": false,
+          "description": "Function returning context menu items for a given node."
+        },
+        {
+          "name": "areHiddenFilesVisible",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether hidden files (dotfiles) should be visible in the tree."
+        },
+        {
+          "name": "onExpandedPathsChange",
+          "type": "(expandedPaths: Set<string>) => void",
+          "required": false
+        },
+        {
+          "name": "forbiddenSymbolsRegExp",
+          "type": "RegExp",
+          "required": false,
+          "description": "Optional RegExp used to validate folder and file names for forbidden characters."
+        },
+        {
+          "name": "forbiddenSymbolsTooltip",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional tooltip content displayed when a name contains forbidden characters."
+        },
+        {
+          "name": "newFolderDefaultName",
+          "type": "string",
+          "required": false,
+          "description": "Optional new folder default name."
+        }
+      ],
+      "examples": [
+        "// Basic usage with folders and files\nconst items: DialFile[] = [\n  {\n    path: '/documents',\n    name: 'Documents',\n    nodeType: DialFileNodeType.FOLDER,\n    items: [\n      {\n        path: '/documents/file.txt',\n        name: 'file.txt',\n        nodeType: DialFileNodeType.FILE,\n      },\n    ],\n  },\n];\n\n<DialFoldersTree items={items} showFiles />\n\n// With expanded and selected items\nconst expandedPaths = new Set(['/documents']);\n\n<DialFoldersTree\n  items={items}\n  expandedPaths={expandedPaths}\n  selectedPath=\"/documents/file.txt\"\n  onItemClick={(item) => console.log('Clicked:', item.path)}\n/>\n\n// With inline renaming and validation\n<DialFoldersTree\n  items={items}\n  renamedPath=\"/documents\"\n  onRenameValidate={(value) => (value.trim() ? null : 'Name cannot be empty')}\n  onRenameSave={(newValue) => console.log('Saved new name:', newValue)}\n  onRenameCancel={() => console.log('Edit cancelled')}\n/>\n\n// With custom empty state and context menu\nconst getContextMenuItems = (item: DialFile): DropdownItem[] => [\n  { key: 'rename', label: 'Rename' },\n  { key: 'delete', label: 'Delete', danger: true },\n];\n\n<DialFoldersTree\n  items={[]}\n  emptyStateTitle=\"No Content\"\n  emptyStateDescription=\"Upload files or create a new folder to get started.\"\n  emptyStateIcon={<IconFolderPlus />}\n  getContextMenuItems={getContextMenuItems}\n/>"
+      ],
+      "sourceFile": "components/FileManager/components/FoldersTree/FoldersTree.tsx"
+    },
     {
       "name": "DialSchemaRenderer",
       "category": "Name",
@@ -4081,6 +4433,25 @@
     }
   ],
   "types": [
+    {
+      "name": "AnalyticsBarColorStop",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "from",
+          "value": "number"
+        },
+        {
+          "name": "to",
+          "value": "number"
+        },
+        {
+          "name": "color",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "models/analytics.ts"
+    },
     {
       "name": "FileManagerGridRow",
       "kind": "interface",
@@ -4424,6 +4795,21 @@
       ],
       "sourceFile": "types/tab.ts"
     },
+    {
+      "name": "TabView",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Default",
+          "value": "'default'"
+        },
+        {
+          "name": "Inline",
+          "value": "'inline'"
+        }
+      ],
+      "sourceFile": "types/tab.ts"
+    },
     {
       "name": "DialBreadcrumbPathItem",
       "kind": "interface",
@@ -4797,6 +5183,10 @@
           "name": "label",
           "value": "string"
         },
+        {
+          "name": "labelNode?",
+          "value": "ReactNode"
+        },
         {
           "name": "description?",
           "value": "string"
@@ -4816,6 +5206,29 @@
       ],
       "sourceFile": "models/select.ts"
     },
+    {
+      "name": "SegmentedControlOption",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "T"
+        },
+        {
+          "name": "label?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        },
+        {
+          "name": "disabled?",
+          "value": "boolean"
+        }
+      ],
+      "sourceFile": "models/segmented-control.ts"
+    },
     {
       "name": "TabModel",
       "kind": "interface",
@@ -5252,6 +5665,11 @@
     }
   ],
   "hooks": [
+    {
+      "name": "AnalyticsCardVariant",
+      "sourceFile": "types/analytics.ts",
+      "signature": "enum AnalyticsCardVariant { Default = 'default', Compact = 'compact' }"
+    },
     {
       "name": "useDialFileManagerTabs",
       "sourceFile": "components/FileManager/hooks/use-file-manager-tabs.tsx",