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

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-ClTI8-LY.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-Bl2M9QgI.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/{JsonEditor-BUSVL8Nf.js → JsonEditor-DjEsE74s.js}

@@ -1,5 +1,4 @@
-import { j as l } from "./index-D1DPfPQX.js";
-import { E as o } from "./editor-Cu1dRT39.js";
+import { E as o, j as l } from "./index-bLYIiSd_.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/MarkdownEditor-BMApEDVP.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Bl2M9QgI.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/MarkdownEditor-DlKjo9LA.js

@@ -0,0 +1,35 @@
+import { j as e, E as m, m as c } from "./index-bLYIiSd_.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/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.12.0-dev.9",
-  "generatedAt": "2026-06-25T15:45:29.918Z",
+  "version": "0.12.0",
+  "generatedAt": "2026-07-21T10:01:28.722Z",
   "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-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",
+  "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-small-paragraph-text`      | normal   | 14px / 24px             |\n| `.dial-small-paragraph-semi-text` | semibold | 14px / 24px             |\n| `.dial-tiny-text`                 | normal   | 12px / 16px             |\n| `.dial-tiny-semi-text`            | semibold | 12px / 16px             |\n| `.dial-caption-text`              | normal   | 10px / 12px             |\n| `.dial-caption-semi-text`         | semibold | 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": [
     {
@@ -126,6 +126,12 @@
           "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",
@@ -592,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",
@@ -703,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]",
@@ -1895,6 +1913,11 @@
           "type": "boolean",
           "required": false
         },
+        {
+          "name": "isFirst",
+          "type": "boolean",
+          "required": false
+        },
         {
           "name": "separator",
           "type": "ReactNode",
@@ -2381,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",
@@ -3115,6 +3185,13 @@
           "defaultValue": "false",
           "description": "Show a search field in the overlay header."
         },
+        {
+          "name": "searchSize",
+          "type": "ElementSize",
+          "required": false,
+          "defaultValue": "ElementSize.Standard",
+          "description": "Size of the overlay search input when `searchable` is enabled."
+        },
         {
           "name": "searchPlaceholder",
           "type": "string",
@@ -3447,6 +3524,16 @@
           "type": "string",
           "required": false
         },
+        {
+          "name": "overlayContentClassName",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "separatorClassName",
+          "type": "string",
+          "required": false
+        },
         {
           "name": "listClassName",
           "type": "string",
@@ -3832,6 +3919,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>",
@@ -4049,6 +4142,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",
@@ -4194,6 +4459,21 @@
       ],
       "sourceFile": "models/analytics.ts"
     },
+    {
+      "name": "AnalyticsCardCompareItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "title",
+          "value": "ReactNode"
+        },
+        {
+          "name": "value",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "models/analytics.ts"
+    },
     {
       "name": "FileManagerGridRow",
       "kind": "interface",
@@ -4925,6 +5205,10 @@
           "name": "label",
           "value": "string"
         },
+        {
+          "name": "labelNode?",
+          "value": "ReactNode"
+        },
         {
           "name": "description?",
           "value": "string"
@@ -4944,6 +5228,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",
@@ -5359,6 +5666,10 @@
         {
           "name": "'dial:resource'?",
           "value": "boolean"
+        },
+        {
+          "name": "acceptableResourceTypes?",
+          "value": "string[]"
         }
       ],
       "sourceFile": "components/SchemaRenderer/types.ts"

package/dist/dial-ui-kit.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-D1Mdz55f.cjs");exports.AnalyticsCardVariant=a.AnalyticsCardVariant;exports.BASE_ICON_PROPS=a.BASE_ICON_PROPS;exports.BASE_ICON_SIZE=a.BASE_ICON_SIZE;exports.ButtonAppearance=a.ButtonAppearance;exports.ButtonVariant=a.ButtonVariant;exports.ConfirmationPopupVariant=a.ConfirmationPopupVariant;exports.DEFAULT_ANALYTICS_BAR_COLOR_MAP=a.DEFAULT_ANALYTICS_BAR_COLOR_MAP;exports.DIAL_ICON_SIZE=a.DIAL_ICON_SIZE;exports.DialAccordion=a.DialAccordion;exports.DialAnalyticsBar=a.DialAnalyticsBar;exports.DialAnalyticsBarGroup=a.DialAnalyticsBarGroup;exports.DialAnalyticsCard=a.DialAnalyticsCard;exports.DialAnalyticsErrorTag=a.DialAnalyticsErrorTag;exports.DialAnalyticsHistogram=a.DialAnalyticsHistogram;exports.DialAutocompleteInputValue=a.DialAutocompleteInputValue;exports.DialBreadcrumb=a.DialBreadcrumb;exports.DialBreadcrumbItem=a.DialBreadcrumbItem;exports.DialButton=a.DialButton;exports.DialButtonDropdown=a.DialButtonDropdown;exports.DialCaptionText=a.DialCaptionText;exports.DialCheckbox=a.DialCheckbox;exports.DialCloseButton=a.DialCloseButton;exports.DialCollapsibleSidebar=a.DialCollapsibleSidebar;exports.DialConditionalResizableContainer=a.DialConditionalResizableContainer;exports.DialConfirmationPopup=a.DialConfirmationPopup;exports.DialDangerButton=a.DialDangerButton;exports.DialDangerIconButton=a.DialDangerIconButton;exports.DialDestinationFolderPopup=a.DialDestinationFolderPopup;exports.DialDraggableItem=a.DialDraggableItem;exports.DialDropdown=a.DialDropdown;exports.DialDropdownIcon=a.DialDropdownIcon;exports.DialEllipsisTooltip=a.DialEllipsisTooltip;exports.DialErrorText=a.DialErrorText;exports.DialFabButton=a.DialFabButton;exports.DialFileIcon=a.DialFileIcon;exports.DialFileManager=a.DialFileManager;exports.DialFileManagerActions=a.DialFileManagerActions;exports.DialFileManagerTabs=a.DialFileManagerTabs;exports.DialFileName=a.DialFileName;exports.DialFileNodeType=a.DialFileNodeType;exports.DialFilePermission=a.DialFilePermission;exports.DialFileResourceType=a.DialFileResourceType;exports.DialFolderName=a.DialFolderName;exports.DialFormItem=a.DialFormItem;exports.DialFormPopup=a.DialFormPopup;exports.DialGhostButton=a.DialGhostButton;exports.DialGhostIconButton=a.DialGhostIconButton;exports.DialGrid=a.DialGrid;exports.DialIcon=a.DialIcon;exports.DialIconButton=a.DialIconButton;exports.DialInput=a.DialInput;exports.DialInputPopup=a.DialInputPopup;exports.DialItemType=a.DialItemType;exports.DialLabel=a.DialLabel;exports.DialLabelledText=a.DialLabelledText;exports.DialLinkButton=a.DialLinkButton;exports.DialLoadFileArea=a.DialLoadFileArea;exports.DialLoadFileAreaField=a.DialLoadFileAreaField;exports.DialLoader=a.DialLoader;exports.DialNeutralButton=a.DialNeutralButton;exports.DialNeutralIconButton=a.DialNeutralIconButton;exports.DialNoDataContent=a.DialNoDataContent;exports.DialNotification=a.DialNotification;exports.DialNumberInput=a.DialNumberInput;exports.DialPagination=a.DialPagination;exports.DialPasswordInput=a.DialPasswordInput;exports.DialPopup=a.DialPopup;exports.DialPrimaryButton=a.DialPrimaryButton;exports.DialPrimaryIconButton=a.DialPrimaryIconButton;exports.DialProgressBar=a.DialProgressBar;exports.DialProgressBarSize=a.DialProgressBarSize;exports.DialRadioButton=a.DialRadioButton;exports.DialRadioGroup=a.DialRadioGroup;exports.DialRadioGroupPopupField=a.DialRadioGroupPopupField;exports.DialRemoveButton=a.DialRemoveButton;exports.DialResizableContainer=a.DialResizableContainer;exports.DialRoundedButton=a.DialRoundedButton;exports.DialSchemaRenderer=a.DialSchemaRenderer;exports.DialSearch=a.DialSearch;exports.DialSecondaryIconButton=a.DialSecondaryIconButton;exports.DialSelect=a.DialSelect;exports.DialSelectField=a.DialSelectField;exports.DialSharedEntityIndicator=a.DialSharedEntityIndicator;exports.DialSkeleton=a.DialSkeleton;exports.DialSkeletonAvatarShape=a.DialSkeletonAvatarShape;exports.DialSkeletonAvatarSize=a.DialSkeletonAvatarSize;exports.DialSkeletonVariant=a.DialSkeletonVariant;exports.DialSlider=a.DialSlider;exports.DialSpinner=a.DialSpinner;exports.DialSteps=a.DialSteps;exports.DialSuccessIconButton=a.DialSuccessIconButton;exports.DialSwitch=a.DialSwitch;exports.DialTabs=a.DialTabs;exports.DialTag=a.DialTag;exports.DialTagInput=a.DialTagInput;exports.DialTertiaryIconButton=a.DialTertiaryIconButton;exports.DialTextarea=a.DialTextarea;exports.DialTooltip=a.DialTooltip;exports.DropdownItemType=a.DropdownItemType;exports.DropdownTrigger=a.DropdownTrigger;exports.DropdownType=a.DropdownType;exports.ElementSize=a.ElementSize;exports.FileManagerColumnKey=a.FileManagerColumnKey;exports.FileManagerProvider=a.FileManagerProvider;exports.FlexibleActionsDirection=a.FlexibleActionsDirection;exports.FormItemOrientation=a.FormItemOrientation;exports.GridSelectionMode=a.GridSelectionMode;exports.JsonSchemaType=a.JsonSchemaType;exports.LazyDialJsonEditor=a.LazyDialJsonEditor;exports.LazyDialMarkdownEditor=a.LazyDialMarkdownEditor;exports.NAME_COLUMN=a.NAME_COLUMN;exports.NOT_ALLOWED_SPACES=a.NOT_ALLOWED_SPACES;exports.NOT_ALLOWED_SPACES_REGEXP=a.NOT_ALLOWED_SPACES_REGEXP;exports.NOT_ALLOWED_SYMBOLS=a.NOT_ALLOWED_SYMBOLS;exports.NOT_ALLOWED_SYMBOLS_REGEXP=a.NOT_ALLOWED_SYMBOLS_REGEXP;exports.NotificationVariant=a.NotificationVariant;exports.PopupSize=a.PopupSize;exports.RadioGroupOrientation=a.RadioGroupOrientation;exports.ResizableContainerSide=a.ResizableContainerSide;exports.SIZE_COLUMN=a.SIZE_COLUMN;exports.SchemaDisplayMode=a.SchemaDisplayMode;exports.SchemaOrientation=a.SchemaOrientation;exports.SchemaRendererVariant=a.SchemaRendererVariant;exports.SelectSize=a.SelectSize;exports.SelectVariant=a.SelectVariant;exports.StepStatus=a.StepStatus;exports.TabOrientation=a.TabOrientation;exports.TabView=a.TabView;exports.UPDATED_AT_COLUMN=a.UPDATED_AT_COLUMN;exports.mergeClasses=a.mergeClasses;exports.useDialFileManagerTabs=a.useDialFileManagerTabs;exports.useEditableItem=a.useEditableItem;exports.useFileManagerContext=a.useFileManagerContext;exports.wrapInRootFolder=a.wrapInRootFolder;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-Bl2M9QgI.cjs");exports.AnalyticsCardVariant=a.AnalyticsCardVariant;exports.BASE_ICON_PROPS=a.BASE_ICON_PROPS;exports.BASE_ICON_SIZE=a.BASE_ICON_SIZE;exports.ButtonAppearance=a.ButtonAppearance;exports.ButtonVariant=a.ButtonVariant;exports.ConfirmationPopupVariant=a.ConfirmationPopupVariant;exports.DEFAULT_ANALYTICS_BAR_COLOR_MAP=a.DEFAULT_ANALYTICS_BAR_COLOR_MAP;exports.DIAL_ICON_SIZE=a.DIAL_ICON_SIZE;exports.DialAccordion=a.DialAccordion;exports.DialAnalyticsBar=a.DialAnalyticsBar;exports.DialAnalyticsBarGroup=a.DialAnalyticsBarGroup;exports.DialAnalyticsCard=a.DialAnalyticsCard;exports.DialAnalyticsErrorTag=a.DialAnalyticsErrorTag;exports.DialAnalyticsHistogram=a.DialAnalyticsHistogram;exports.DialAutocompleteInputValue=a.DialAutocompleteInputValue;exports.DialBreadcrumb=a.DialBreadcrumb;exports.DialBreadcrumbItem=a.DialBreadcrumbItem;exports.DialButton=a.DialButton;exports.DialButtonDropdown=a.DialButtonDropdown;exports.DialCaptionText=a.DialCaptionText;exports.DialCheckbox=a.DialCheckbox;exports.DialCloseButton=a.DialCloseButton;exports.DialCollapsibleSidebar=a.DialCollapsibleSidebar;exports.DialConditionalResizableContainer=a.DialConditionalResizableContainer;exports.DialConfirmationPopup=a.DialConfirmationPopup;exports.DialDangerButton=a.DialDangerButton;exports.DialDangerIconButton=a.DialDangerIconButton;exports.DialDestinationFolderPopup=a.DialDestinationFolderPopup;exports.DialDraggableItem=a.DialDraggableItem;exports.DialDropdown=a.DialDropdown;exports.DialDropdownIcon=a.DialDropdownIcon;exports.DialEllipsisTooltip=a.DialEllipsisTooltip;exports.DialErrorText=a.DialErrorText;exports.DialFabButton=a.DialFabButton;exports.DialFileIcon=a.DialFileIcon;exports.DialFileManager=a.DialFileManager;exports.DialFileManagerActions=a.DialFileManagerActions;exports.DialFileManagerTabs=a.DialFileManagerTabs;exports.DialFileName=a.DialFileName;exports.DialFileNodeType=a.DialFileNodeType;exports.DialFilePermission=a.DialFilePermission;exports.DialFileResourceType=a.DialFileResourceType;exports.DialFolderName=a.DialFolderName;exports.DialFoldersTree=a.DialFoldersTree;exports.DialFormItem=a.DialFormItem;exports.DialFormPopup=a.DialFormPopup;exports.DialGhostButton=a.DialGhostButton;exports.DialGhostIconButton=a.DialGhostIconButton;exports.DialGrid=a.DialGrid;exports.DialIcon=a.DialIcon;exports.DialIconButton=a.DialIconButton;exports.DialInput=a.DialInput;exports.DialInputPopup=a.DialInputPopup;exports.DialItemType=a.DialItemType;exports.DialLabel=a.DialLabel;exports.DialLabelledText=a.DialLabelledText;exports.DialLinkButton=a.DialLinkButton;exports.DialLoadFileArea=a.DialLoadFileArea;exports.DialLoadFileAreaField=a.DialLoadFileAreaField;exports.DialLoader=a.DialLoader;exports.DialNeutralButton=a.DialNeutralButton;exports.DialNeutralIconButton=a.DialNeutralIconButton;exports.DialNoDataContent=a.DialNoDataContent;exports.DialNotification=a.DialNotification;exports.DialNumberInput=a.DialNumberInput;exports.DialPagination=a.DialPagination;exports.DialPasswordInput=a.DialPasswordInput;exports.DialPopup=a.DialPopup;exports.DialPrimaryButton=a.DialPrimaryButton;exports.DialPrimaryIconButton=a.DialPrimaryIconButton;exports.DialProgressBar=a.DialProgressBar;exports.DialProgressBarSize=a.DialProgressBarSize;exports.DialRadioButton=a.DialRadioButton;exports.DialRadioGroup=a.DialRadioGroup;exports.DialRadioGroupPopupField=a.DialRadioGroupPopupField;exports.DialRemoveButton=a.DialRemoveButton;exports.DialResizableContainer=a.DialResizableContainer;exports.DialRoundedButton=a.DialRoundedButton;exports.DialSchemaRenderer=a.DialSchemaRenderer;exports.DialSearch=a.DialSearch;exports.DialSecondaryIconButton=a.DialSecondaryIconButton;exports.DialSegmentedControl=a.DialSegmentedControl;exports.DialSelect=a.DialSelect;exports.DialSelectField=a.DialSelectField;exports.DialSharedEntityIndicator=a.DialSharedEntityIndicator;exports.DialSkeleton=a.DialSkeleton;exports.DialSkeletonAvatarShape=a.DialSkeletonAvatarShape;exports.DialSkeletonAvatarSize=a.DialSkeletonAvatarSize;exports.DialSkeletonVariant=a.DialSkeletonVariant;exports.DialSlider=a.DialSlider;exports.DialSpinner=a.DialSpinner;exports.DialSteps=a.DialSteps;exports.DialSuccessIconButton=a.DialSuccessIconButton;exports.DialSwitch=a.DialSwitch;exports.DialTabs=a.DialTabs;exports.DialTag=a.DialTag;exports.DialTagInput=a.DialTagInput;exports.DialTertiaryIconButton=a.DialTertiaryIconButton;exports.DialTextarea=a.DialTextarea;exports.DialTooltip=a.DialTooltip;exports.DropdownItemType=a.DropdownItemType;exports.DropdownTrigger=a.DropdownTrigger;exports.DropdownType=a.DropdownType;exports.ElementSize=a.ElementSize;exports.FileManagerColumnKey=a.FileManagerColumnKey;exports.FileManagerProvider=a.FileManagerProvider;exports.FlexibleActionsDirection=a.FlexibleActionsDirection;exports.FormItemOrientation=a.FormItemOrientation;exports.GridSelectionMode=a.GridSelectionMode;exports.JsonSchemaType=a.JsonSchemaType;exports.LazyDialJsonEditor=a.LazyDialJsonEditor;exports.LazyDialMarkdownEditor=a.LazyDialMarkdownEditor;exports.NAME_COLUMN=a.NAME_COLUMN;exports.NOT_ALLOWED_SPACES=a.NOT_ALLOWED_SPACES;exports.NOT_ALLOWED_SPACES_REGEXP=a.NOT_ALLOWED_SPACES_REGEXP;exports.NOT_ALLOWED_SYMBOLS=a.NOT_ALLOWED_SYMBOLS;exports.NOT_ALLOWED_SYMBOLS_REGEXP=a.NOT_ALLOWED_SYMBOLS_REGEXP;exports.NotificationVariant=a.NotificationVariant;exports.PopupSize=a.PopupSize;exports.RadioGroupOrientation=a.RadioGroupOrientation;exports.ResizableContainerSide=a.ResizableContainerSide;exports.SIZE_COLUMN=a.SIZE_COLUMN;exports.SchemaDisplayMode=a.SchemaDisplayMode;exports.SchemaOrientation=a.SchemaOrientation;exports.SchemaRendererVariant=a.SchemaRendererVariant;exports.SelectSize=a.SelectSize;exports.SelectVariant=a.SelectVariant;exports.StepStatus=a.StepStatus;exports.TabOrientation=a.TabOrientation;exports.TabView=a.TabView;exports.UPDATED_AT_COLUMN=a.UPDATED_AT_COLUMN;exports.mergeClasses=a.mergeClasses;exports.useDialFileManagerTabs=a.useDialFileManagerTabs;exports.useEditableItem=a.useEditableItem;exports.useFileManagerContext=a.useFileManagerContext;exports.wrapInRootFolder=a.wrapInRootFolder;