@epam/ai-dial-ui-kit 0.8.1 → 0.9.0-dev.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/README.md +9 -2
  2. package/dist/.cursor/hooks/post-write-verify.d.ts +1 -0
  3. package/dist/components-manifest.json +4699 -0
  4. package/dist/dial-ui-kit.cjs.js +41 -36
  5. package/dist/dial-ui-kit.es.js +20811 -20190
  6. package/dist/index.css +2 -2
  7. package/dist/mcp-server.cjs +357 -0
  8. package/dist/src/components/Alert/Alert.d.ts +1 -0
  9. package/dist/src/components/Alert/constants.d.ts +1 -1
  10. package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts +8 -3
  11. package/dist/src/components/Breadcrumb/Breadcrumb.d.ts +1 -0
  12. package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts +1 -1
  13. package/dist/src/components/Breadcrumb/constants.d.ts +1 -1
  14. package/dist/src/components/Button/Button.d.ts +1 -0
  15. package/dist/src/components/ButtonDropdown/ButtonDropdown.d.ts +1 -0
  16. package/dist/src/components/CaptionText/CaptionText.d.ts +1 -0
  17. package/dist/src/components/Checkbox/Checkbox.d.ts +1 -0
  18. package/dist/src/components/CloseButton/CloseButton.d.ts +1 -0
  19. package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts +2 -0
  20. package/dist/src/components/ConfirmationPopup/ConfirmationPopup.d.ts +1 -0
  21. package/dist/src/components/DraggableItem/DraggableItem.d.ts +1 -0
  22. package/dist/src/components/Dropdown/Dropdown.d.ts +2 -0
  23. package/dist/src/components/EllipsisTooltip/EllipsisTooltip.d.ts +2 -0
  24. package/dist/src/components/FileIcon/FileIcon.d.ts +1 -0
  25. package/dist/src/components/FileManager/FileManager.d.ts +22 -15
  26. package/dist/src/components/FileManager/FileManagerContext.d.ts +5 -0
  27. package/dist/src/components/FileManager/FileManagerProvider.d.ts +1 -0
  28. package/dist/src/components/FileManager/FileManagerTooltip.d.ts +11 -0
  29. package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts +2 -0
  30. package/dist/src/components/FileManager/errors.d.ts +3 -0
  31. package/dist/src/components/FileManager/hooks/use-bulk-actions.d.ts +2 -1
  32. package/dist/src/components/FileManager/hooks/use-file-download.d.ts +2 -1
  33. package/dist/src/components/FileManager/hooks/use-file-manager-columns.d.ts +1 -0
  34. package/dist/src/components/FileManager/hooks/use-file-upload.d.ts +13 -0
  35. package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts +1 -0
  36. package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts +3 -1
  37. package/dist/src/components/FileManager/utils.d.ts +3 -0
  38. package/dist/src/components/FileManager/utils.spec.d.ts +1 -0
  39. package/dist/src/components/FileName/FileName.d.ts +2 -0
  40. package/dist/src/components/FolderName/FolderName.d.ts +2 -0
  41. package/dist/src/components/FormItem/FormItem.d.ts +1 -0
  42. package/dist/src/components/FormPopup/FormPopup.d.ts +1 -0
  43. package/dist/src/components/Grid/Grid.d.ts +2 -3
  44. package/dist/src/components/Icon/Icon.d.ts +1 -0
  45. package/dist/src/components/IconButton/IconButton.d.ts +1 -0
  46. package/dist/src/components/Input/Input.d.ts +1 -0
  47. package/dist/src/components/InputPopup/InputPopup.d.ts +7 -0
  48. package/dist/src/components/Label/Label.d.ts +1 -0
  49. package/dist/src/components/LabelledText/LabelledText.d.ts +1 -0
  50. package/dist/src/components/LoadFileArea/LoadFileArea.d.ts +2 -0
  51. package/dist/src/components/LoadFileArea/LoadFileAreaField.d.ts +2 -0
  52. package/dist/src/components/Loader/Loader.d.ts +1 -0
  53. package/dist/src/components/NoDataContent/NoDataContent.d.ts +1 -0
  54. package/dist/src/components/NumberInput/NumberInput.d.ts +8 -0
  55. package/dist/src/components/PasswordInput/PasswordInput.d.ts +1 -0
  56. package/dist/src/components/Popup/Popup.d.ts +1 -0
  57. package/dist/src/components/RadioButton/RadioButton.d.ts +1 -0
  58. package/dist/src/components/RadioGroup/RadioGroup.d.ts +1 -0
  59. package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts +3 -0
  60. package/dist/src/components/RemoveButton/RemoveButton.d.ts +1 -0
  61. package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts +1 -0
  62. package/dist/src/components/ResizableContainer/ResizableContainer.d.ts +2 -0
  63. package/dist/src/components/Search/Search.d.ts +2 -0
  64. package/dist/src/components/Select/Select.d.ts +2 -0
  65. package/dist/src/components/Select/constants.d.ts +2 -2
  66. package/dist/src/components/SelectField/SelectField.d.ts +1 -0
  67. package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts +1 -0
  68. package/dist/src/components/Skeleton/Skeleton.d.ts +1 -0
  69. package/dist/src/components/Steps/Steps.d.ts +1 -0
  70. package/dist/src/components/Switch/Switch.d.ts +1 -0
  71. package/dist/src/components/Tabs/Tabs.d.ts +2 -0
  72. package/dist/src/components/Tag/Tag.d.ts +2 -0
  73. package/dist/src/components/TagInput/TagInput.d.ts +9 -1
  74. package/dist/src/components/Textarea/Textarea.d.ts +1 -0
  75. package/dist/src/components/Tooltip/Tooltip.d.ts +1 -0
  76. package/dist/src/constants/storybook/input.d.ts +3 -1
  77. package/dist/src/index.d.ts +1 -1
  78. package/dist/src/mcp/generate-manifest.d.ts +1 -0
  79. package/dist/src/mcp/server.d.ts +1 -0
  80. package/dist/src/mcp/types.d.ts +54 -0
  81. package/dist/src/types/file-manager.d.ts +4 -2
  82. package/package.json +23 -4
@@ -5,6 +5,7 @@ export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore
5
5
  }
6
6
  /**
7
7
  * A specialized button component for removal or delete actions.
8
+ * aliases: DeleteButton|TrashButton
8
9
  *
9
10
  * Renders a `DialErrorButton` with a predefined trash icon (`IconTrashX`) as the leading icon.
10
11
  * Additional props are passed directly to the underlying `DialErrorButton`.
@@ -5,6 +5,7 @@ export interface DialConditionalResizableContainerProps extends DialResizableCon
5
5
  }
6
6
  /**
7
7
  * DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.
8
+ * aliases: OptionalResize|ConditionalPanel
8
9
  *
9
10
  * This component renders its children inside a resizable container only when `enabled` is true.
10
11
  * When `enabled` is false, children are rendered directly without any resizable behavior.
@@ -14,6 +14,8 @@ export interface DialResizableContainerProps {
14
14
  }
15
15
  /**
16
16
  * DialResizableContainer — A reusable resizable container
17
+ * aliases: ResizePanel|SizableContainer
18
+ *
17
19
  * supporting both **controlled** and **uncontrolled** width modes.
18
20
  *
19
21
  * Controlled Mode
@@ -7,6 +7,8 @@ export interface DialSearchProps extends Omit<DialInputProps, 'type' | 'size' |
7
7
  }
8
8
  /**
9
9
  * A search input component with a customizable placeholder, icons, flexible props, and the ability
10
+ * aliases: SearchField|QueryInput
11
+ *
10
12
  * to clear the input value via a clear button. Supports multiple sizes for flexible layouts.
11
13
  *
12
14
  * @example
@@ -34,9 +34,11 @@ export interface DialSelectProps {
34
34
  onChange?: (next: string | string[]) => void;
35
35
  inlineSearch?: boolean;
36
36
  onFooterClick?: (e: MouseEvent<HTMLDivElement>) => void;
37
+ customMultiSelectTagsRenderer?: (options: SelectOption[], selectedValues: string[], handleRemoveTag: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void) => ReactNode;
37
38
  }
38
39
  /**
39
40
  * A versatile select supporting single and multiple selections.
41
+ * aliases: OptionPicker|ChoiceSelector
40
42
  *
41
43
  * Single mode mirrors the legacy visual:
42
44
  * - Trigger shows the selected option's leading icon + label.
@@ -1,6 +1,6 @@
1
- export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small cursor-pointer";
1
+ export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer";
2
2
  export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
3
- export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
3
+ export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
4
4
  export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
5
5
  export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
6
6
  export declare const selectOptionDisabledClassName = "opacity-75";
@@ -8,6 +8,7 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'className'
8
8
  }
9
9
  /**
10
10
  * A Select field wrapper that composes `DialFormItem` and `DialSelect`.
11
+ * aliases: SelectInput|ComboField
11
12
  *
12
13
  * Provides unified label, description, error rendering and a readonly view that shows
13
14
  * the selected option labels (comma-separated in single mode, list in multiple).
@@ -9,6 +9,7 @@ export interface DialSharedEntityIndicatorProps {
9
9
  }
10
10
  /**
11
11
  * A compact icon-only indicator to denote a "shared" entity.
12
+ * aliases: SharedIcon|AccessIndicator
12
13
  *
13
14
  * Renders a small arrow-up-right icon with token-based colors.
14
15
  *
@@ -21,6 +21,7 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
21
21
  }
22
22
  /**
23
23
  * DialSkeleton
24
+ * aliases: PlaceholderUI|ShimmerLoader
24
25
  *
25
26
  * A placeholder component to show while content is loading.
26
27
  * Provides various skeleton shapes and configurations.
@@ -7,6 +7,7 @@ export interface DialStepsProps {
7
7
  }
8
8
  /**
9
9
  * Props for the DialSteps component, which renders a multi-step navigation UI.
10
+ * aliases: StepWizard|ProgressSteps
10
11
  *
11
12
  * @example
12
13
  * ```tsx
@@ -9,6 +9,7 @@ export interface DialSwitchProps {
9
9
  }
10
10
  /**
11
11
  * A Switch component with various styling options
12
+ * aliases: ToggleSwitch|BinaryToggle
12
13
  *
13
14
  * @example
14
15
  * ```tsx
@@ -14,6 +14,8 @@ export interface DialTabsProps {
14
14
  }
15
15
  /**
16
16
  * A responsive and overflow-aware tabs component that automatically adapts its layout
17
+ * aliases: TabNavigation|TabBar
18
+ *
17
19
  * between a scrollable tab bar and a dropdown menu on smaller screens.
18
20
  *
19
21
  * When there are too many tabs to fit in a single line, it introduces a dropdown button
@@ -10,6 +10,8 @@ export interface DialTagProps {
10
10
  }
11
11
  /**
12
12
  * A small tag component used to display labeled items such as categories, filters, or selections.
13
+ * aliases: Badge|Chip
14
+ *
13
15
  * Optionally supports removal via a close button and multiple colors variants defined by {@link TagVariant}.
14
16
  *
15
17
  * @example
@@ -1,7 +1,7 @@
1
1
  import { FC } from 'react';
2
2
  import { DialLabelProps } from '../Label/Label';
3
3
  export interface DialTagInputProps extends DialLabelProps {
4
- elementId: string;
4
+ elementId?: string;
5
5
  initialTags?: string[];
6
6
  placeholder?: string;
7
7
  captionDescription?: string;
@@ -9,10 +9,15 @@ export interface DialTagInputProps extends DialLabelProps {
9
9
  invalid?: boolean;
10
10
  disabled?: boolean;
11
11
  collapseTagOverflow?: boolean;
12
+ readOnly?: boolean;
13
+ containerClassName?: string;
14
+ tagClassName?: string;
12
15
  onChange?: (tags: string[]) => void;
13
16
  }
14
17
  /**
15
18
  * A tag input field that allows users to add multiple tags using the Enter or comma key.
19
+ * aliases: MultiTag|TagField
20
+ *
16
21
  * Supports removing tags, displaying field labels, optional indicators, validation states,
17
22
  * and dynamic layout adjustment when tags wrap to multiple lines.
18
23
  *
@@ -38,6 +43,9 @@ export interface DialTagInputProps extends DialLabelProps {
38
43
  * @param [invalid=false] - Whether the field should be styled as invalid.
39
44
  * @param [disabled=false] - Whether the input and remove buttons are disabled.
40
45
  * @param [collapseTagOverflow=false] - When true, keeps tags on one line and shows `+N` for overflow.
46
+ * @param [readOnly=false] - When true, hides the text input (no new tags can be added). The outer wrapper and label/caption are also omitted so the component can be embedded inside an existing container.
47
+ * @param [containerClassName] - Additional CSS classes applied to the tag container (the flex row wrapping all tags).
48
+ * @param [tagClassName] - Additional CSS classes applied to each individual tag.
41
49
  * @param [onChange] - Callback fired whenever the tag list changes (tag added or removed).
42
50
  */
43
51
  export declare const DialTagInput: FC<DialTagInputProps>;
@@ -11,6 +11,7 @@ export interface DialTextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAt
11
11
  }
12
12
  /**
13
13
  * A flexible textarea component with validation support and consistent styling
14
+ * aliases: MultilineInput|TextBox
14
15
  *
15
16
  * @example
16
17
  * ```tsx
@@ -9,6 +9,7 @@ export interface DialTooltipProps extends DialTooltipContainerOptions {
9
9
  }
10
10
  /**
11
11
  * A Tooltip component that displays information on hover
12
+ * aliases: HoverPopover|InfoPopover
12
13
  *
13
14
  * @example
14
15
  * ```tsx
@@ -1,4 +1,6 @@
1
1
  import { ArgTypes } from '@storybook/react';
2
2
  import { DialInputProps } from '../../components/Input/Input';
3
3
  export declare const inputBaseArgTypes: Partial<ArgTypes<DialInputProps>>;
4
- export declare const numberInputBaseArgTypes: Partial<ArgTypes<DialInputProps>>;
4
+ export declare const numberInputBaseArgTypes: Partial<ArgTypes<DialInputProps>> & {
5
+ integer?: ArgTypes[string];
6
+ };
@@ -93,5 +93,5 @@ export { GridSelectionMode } from './models/selection-mode';
93
93
  export { mergeClasses } from './utils/merge-classes';
94
94
  export { wrapInRootFolder } from './utils/flat-to-hierarchy-convertor.ts';
95
95
  export { NAME_COLUMN, SIZE_COLUMN, UPDATED_AT_COLUMN, } from './constants/file-grid-columns';
96
- export type { DIAL_ICON_SIZE } from './constants/icon.ts';
96
+ export { DIAL_ICON_SIZE, BASE_ICON_PROPS, BASE_ICON_SIZE, } from './constants/icon.ts';
97
97
  export { NOT_ALLOWED_SYMBOLS, NOT_ALLOWED_SPACES, NOT_ALLOWED_SYMBOLS_REGEXP, NOT_ALLOWED_SPACES_REGEXP, } from './constants/validation.ts';
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,54 @@
1
+ export interface PropEntry {
2
+ name: string;
3
+ type: string;
4
+ required: boolean;
5
+ defaultValue?: string;
6
+ description?: string;
7
+ }
8
+ export interface ComponentEntry {
9
+ name: string;
10
+ category: string;
11
+ description: string;
12
+ props: PropEntry[];
13
+ examples: string[];
14
+ sourceFile: string;
15
+ }
16
+ export interface TypeMember {
17
+ name: string;
18
+ value: string;
19
+ comment?: string;
20
+ }
21
+ export interface TypeEntry {
22
+ name: string;
23
+ kind: 'enum' | 'interface' | 'type';
24
+ description?: string;
25
+ members?: TypeMember[];
26
+ typeBody?: string;
27
+ sourceFile: string;
28
+ }
29
+ export interface ExportEntry {
30
+ name: string;
31
+ description?: string;
32
+ signature?: string;
33
+ sourceFile: string;
34
+ }
35
+ export interface KitInfo {
36
+ name: string;
37
+ description: string;
38
+ installation: string;
39
+ cssImport: string;
40
+ peerDependencies: Record<string, string>;
41
+ setupNotes: string;
42
+ }
43
+ export interface Manifest {
44
+ version: string;
45
+ generatedAt: string;
46
+ kit: KitInfo;
47
+ styles: string;
48
+ theming: string;
49
+ components: ComponentEntry[];
50
+ types: TypeEntry[];
51
+ hooks: ExportEntry[];
52
+ utils: ExportEntry[];
53
+ constants: ExportEntry[];
54
+ }
@@ -1,7 +1,8 @@
1
1
  export declare enum DialFileManagerTabs {
2
2
  MyFiles = "my_files",
3
3
  Shared = "shared",
4
- Organization = "organization"
4
+ Organization = "organization",
5
+ Review = "review"
5
6
  }
6
7
  export declare enum DialFileManagerActions {
7
8
  AddSibling = "addSibling",
@@ -16,7 +17,8 @@ export declare enum DialFileManagerActions {
16
17
  Unshare = "unshare",
17
18
  RemoveAccess = "removeAccess",
18
19
  ManagePermissions = "managePermissions",
19
- Preview = "preview"
20
+ Preview = "preview",
21
+ OpenInNewTab = "openInNewTab"
20
22
  }
21
23
  export declare enum DialFileManagerConflictActions {
22
24
  Replace = "replace",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-ui-kit",
3
- "version": "0.8.1",
3
+ "version": "0.9.0-dev.60",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -20,6 +20,9 @@
20
20
  "default": "./dist/index.css"
21
21
  }
22
22
  },
23
+ "bin": {
24
+ "ai-dial-ui-kit-mcp": "./dist/mcp-server.cjs"
25
+ },
23
26
  "files": [
24
27
  "dist"
25
28
  ],
@@ -32,12 +35,17 @@
32
35
  ],
33
36
  "scripts": {
34
37
  "dev": "vite",
35
- "build": "vite build && npm run build:css",
38
+ "build": "vite build && npm run build:css && npm run build:manifest && npm run build:mcp",
36
39
  "build:css": "tailwindcss -m -i ./src/styles/tailwind-entry.scss -o ./dist/index.css",
40
+ "build:manifest": "tsx src/mcp/generate-manifest.ts",
41
+ "build:mcp": "node tools/build-mcp.mjs",
37
42
  "lint": "eslint . --ext ts,tsx --fix --report-unused-disable-directives --max-warnings 0",
43
+ "lint:check": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
44
+ "typecheck": "tsc --noEmit",
45
+ "test:run": "vitest run",
46
+ "verify:agent-hook": "npm run typecheck && npm run lint:check && npm run test:run",
38
47
  "format": "prettier --check .",
39
48
  "format-fix": "prettier --write .",
40
- "typecheck": "tsc --noEmit",
41
49
  "preview": "vite preview",
42
50
  "storybook": "concurrently \"npm run storybook:css\" \"storybook dev -p 6006\"",
43
51
  "storybook:css": "tailwindcss -w -i ./src/styles/tailwind-entry.scss -o ./src/index.css",
@@ -56,7 +64,8 @@
56
64
  ]
57
65
  },
58
66
  "overrides": {
59
- "esbuild": "0.25.9"
67
+ "esbuild": "^0.25.9",
68
+ "lodash": "4.18.1"
60
69
  },
61
70
  "dependencies": {
62
71
  "ag-grid-community": "^34.3.0",
@@ -68,6 +77,7 @@
68
77
  },
69
78
  "peerDependencies": {
70
79
  "@floating-ui/react": "^0.27.16",
80
+ "@modelcontextprotocol/sdk": "^1.12.0",
71
81
  "@monaco-editor/react": "^4.7.0",
72
82
  "@tabler/icons-react": "^3.36.1",
73
83
  "@uiw/react-markdown-preview": "^5.1.5",
@@ -77,11 +87,17 @@
77
87
  "react": "^19.1.0",
78
88
  "react-dom": "^19.1.0"
79
89
  },
90
+ "peerDependenciesMeta": {
91
+ "@modelcontextprotocol/sdk": {
92
+ "optional": true
93
+ }
94
+ },
80
95
  "devDependencies": {
81
96
  "@chromatic-com/storybook": "^4.1.3",
82
97
  "@eslint/compat": "^1.3.1",
83
98
  "@eslint/eslintrc": "^3.3.1",
84
99
  "@eslint/js": "^9.31.0",
100
+ "@modelcontextprotocol/sdk": "^1.29.0",
85
101
  "@storybook/addon-a11y": "^10.2.17",
86
102
  "@storybook/addon-docs": "^10.2.17",
87
103
  "@storybook/addon-vitest": "^10.2.17",
@@ -89,6 +105,7 @@
89
105
  "@testing-library/dom": "^10.4.0",
90
106
  "@testing-library/react": "^16.3.0",
91
107
  "@types/jsdom": "^21.1.7",
108
+ "@types/node": "^22.15.30",
92
109
  "@types/react": "^19.1.8",
93
110
  "@types/react-dom": "^19.1.6",
94
111
  "@vitejs/plugin-react": "^4.6.0",
@@ -96,6 +113,7 @@
96
113
  "@vitest/coverage-v8": "^3.2.4",
97
114
  "autoprefixer": "^10.4.21",
98
115
  "concurrently": "^9.2.0",
116
+ "esbuild": "^0.25.9",
99
117
  "eslint": "^9.30.1",
100
118
  "eslint-config-prettier": "^10.1.8",
101
119
  "eslint-plugin-import": "2.32.0",
@@ -118,6 +136,7 @@
118
136
  "storybook": "^10.2.17",
119
137
  "storybook-addon-pseudo-states": "^10.2.17",
120
138
  "tailwindcss": "^3.4.17",
139
+ "tsx": "^4.20.5",
121
140
  "typescript": "~5.9.3",
122
141
  "typescript-eslint": "^8.48.0",
123
142
  "vite": "^7.1.5",