@epam/ai-dial-ui-kit 0.3.0-rc.4 → 0.3.0-rc.41

package/dist/src/components/JsonEditor/JsonEditor.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { EDITOR_THEMES } from '../../types/editor';
 import { OnValidate } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
-export interface Props {
+export interface DialJsonEditorProps {
     value?: string | undefined;
     currentTheme: string;
     themesConfig?: Record<EDITOR_THEMES, editor.IStandaloneThemeData>;
@@ -21,4 +21,4 @@ export interface Props {
  * @param [onValidateJSON] - Callback fired when JSON validation occurs
  * @param [options] - Additional Monaco editor options
  */
-export declare const DialJsonEditor: FC<Props>;
+export declare const DialJsonEditor: FC<DialJsonEditorProps>;

package/dist/src/components/LoadFileArea/EmptyFileArea.d.ts

@@ -0,0 +1,52 @@
+import { FC } from 'react';
+export interface DialEmptyFileAreaProps {
+    emptyTextFirstLine?: string;
+    emptyTextSecondLine?: string;
+    emptyButtonLabel?: string;
+    acceptTypes: string;
+    maxFilesCount?: number;
+    multiple?: boolean;
+    fileFormatError?: string;
+    fileCountError?: string;
+    getIsFileFormatError?: (fileItems: File[] | DataTransferItem[]) => boolean;
+    onChange: (files: File[]) => void;
+}
+/**
+ * A drag-and-drop file upload area component that allows users to upload files
+ * either by dragging them into the drop zone or selecting them via the file picker.
+ * Displays customizable helper text, an upload button, and validation messages for file format
+ * or maximum file count errors. Integrates with `react-dnd` for drag-and-drop behavior.
+ *
+ * @example
+ * ```tsx
+ * <DialEmptyFileArea
+ *   onChange={(files) => console.log('Selected files:', files)}
+ *   emptyTextFirstLine="Drag & drop files here"
+ *   emptyTextSecondLine="or click below to select files"
+ *   emptyButtonLabel="Choose files"
+ *   acceptTypes="application/pdf, application/txt, image/svg+xml"
+ *   maxFilesCount={3}
+ *   multiple
+ *   fileFormatError="Only PNG and JPG files are allowed"
+ *   fileCountError="You can upload up to 3 files"
+ *   getIsFileFormatError={(files) =>
+ *     files.some(file => !file.name.endsWith('.png') && !file.name.endsWith('.jpg'))
+ *   }
+ * />
+ * ```
+ *
+ * @param {DialEmptyFileAreaProps} props - The properties for the empty file area component.
+ * @param {(files: File[]) => void} props.onChange - Callback fired when valid files are selected or dropped.
+ * @param {string} [props.emptyTextFirstLine] - Text displayed as the first line inside the drop area.
+ * @param {string} [props.emptyTextSecondLine] - Text displayed as the second line inside the drop area.
+ * @param {string} [props.emptyButtonLabel] - Label for the upload button shown below the text.
+ * @param {string} [props.acceptTypes] - Comma-separated list of accepted file MIME types (e.g., "application/pdf").
+ * @param {number} [props.maxFilesCount] - Maximum allowed number of files that can be uploaded at once.
+ * @param {boolean} [props.multiple=false] - Whether multiple file uploads are allowed.
+ * @param {string} [props.fileFormatError] - Error message shown when an invalid file format is detected.
+ * @param {string} [props.fileCountError] - Error message shown when the selected files exceed the limit.
+ * @param {(files: File[] | DataTransferItem[]) => boolean} [props.getIsFileFormatError] - Optional validation function that returns `true` if selected files have invalid formats.
+ *
+ * @returns {JSX.Element} The rendered drag-and-drop upload area with file validation feedback.
+ */
+export declare const DialEmptyFileArea: FC<DialEmptyFileAreaProps>;

package/dist/src/components/LoadFileArea/FilledInput.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { DialInputProps } from '../Input/Input';
+interface DialFilledInputProps extends DialInputProps {
+    errorText?: string;
+    onClick?: () => void;
+}
+/**
+ * A styled input component that wraps `DialInput` and provides built-in
+ * error handling and icon display.
+ *
+ * - Displays an error icon (`IconExclamationCircle`) when the input is invalid.
+ * - Supports an optional `errorText` tooltip shown on hover when invalid.
+ *
+ * @example
+ * <DialFilledInput
+ *   value={username}
+ *   onChange={handleChange}
+ *   invalid={!username}
+ *   errorText="Username is required"
+ *   iconBefore={<UserIcon />}
+ * />
+ *
+ * @component
+ * @param {DialFilledInputProps} props - The properties for the filled input component.
+ * @param {string} [props.errorText] - Optional text to display in a tooltip when the input is invalid.
+ * @param {() => void} [props.onClick] - Optional click handler for the input container.
+ * @returns {JSX.Element} The rendered filled input component.
+ */
+export declare const DialFilledInput: FC<DialFilledInputProps>;
+export {};

package/dist/src/components/LoadFileArea/LoadFileArea.d.ts

@@ -0,0 +1,46 @@
+import { FC, ReactNode } from 'react';
+import { DialEmptyFileAreaProps } from './EmptyFileArea';
+export interface DialLoadFileAreaProps extends DialEmptyFileAreaProps {
+    files?: File[];
+    dynamicIcon?: (name: string) => ReactNode;
+    iconBeforeInput?: ReactNode;
+    isInvalid?: (file: File) => boolean;
+    errorText?: string;
+    removeButtonAriaLabel?: string;
+}
+/**
+ * A drag-and-drop file upload area component that allows users to upload files
+ * either by dragging them into the area or by selecting them through the file picker.
+ * Displays helpful text, button prompts, and validation errors for file format or count limits.
+ *
+ * @example
+ * ```tsx
+ * <DialEmptyFileArea
+ *   onChange={(files) => console.log(files)}
+ *   emptyTextFirstLine="Drag & drop your files here"
+ *   emptyTextSecondLine="or click the button below to upload"
+ *   emptyButtonLabel="Upload files"
+ *   acceptTypes="application/pdf, application/txt, image/svg+xml"
+ *   maxFilesCount={5}
+ *   isMultiple
+ *   fileFormatError="Unsupported file format"
+ *   fileCountError="You can upload up to 5 files only"
+ *   getIsFileFormatError={(files) => files.some(file => !file.name.endsWith('.jpg') && !file.name.endsWith('.png'))}
+ * />
+ * ```
+ *
+ * @param {DialEmptyFileAreaProps} props - The properties for the empty file area component.
+ * @param {(files: File[]) => void} props.onChange - Callback fired when valid files are selected or dropped.
+ * @param {string} [props.emptyTextFirstLine] - Optional text displayed as the first line in the empty area.
+ * @param {string} [props.emptyTextSecondLine] - Optional text displayed as the second line in the empty area.
+ * @param {string} [props.emptyButtonLabel] - Label text for the upload button.
+ * @param {string} [props.acceptTypes] - Comma-separated list of accepted file MIME types (e.g., "application/pdf").
+ * @param {number} [props.maxFilesCount] - Maximum allowed number of files to upload at once.
+ * @param {boolean} [props.multiple=false] - Whether multiple file uploads are allowed.
+ * @param {string} [props.fileFormatError] - Error message displayed when an invalid file format is detected.
+ * @param {string} [props.fileCountError] - Error message displayed when the file count exceeds the limit.
+ * @param {(files: File[]) => boolean} [props.getIsFileFormatError] - Optional validation callback that checks whether selected files have valid formats.
+ *
+ * @returns {JSX.Element} The rendered drag-and-drop file upload area with optional validation feedback.
+ */
+export declare const DialLoadFileArea: FC<DialLoadFileAreaProps>;

package/dist/src/components/LoadFileArea/LoadFileAreaField.d.ts

@@ -0,0 +1,51 @@
+import { FC } from 'react';
+import { DialLoadFileAreaProps } from './LoadFileArea';
+export interface DialLoadFileAreaFieldProps extends DialLoadFileAreaProps {
+    fieldTitle: string;
+    elementId: string;
+    deleteAllButtonLabel?: string;
+    addButtonLabel?: string;
+}
+/**
+ * A composite file upload field that combines a label, file list management,
+ * and a drag-and-drop upload area. Allows users to add, remove, and validate files
+ * with customizable restrictions on file types and count.
+ *
+ * The component displays a header showing the field title and file count,
+ * along with "Add" and "Delete All" buttons (when multiple uploads are enabled).
+ * It integrates with `DialLoadFileArea` for drag-and-drop functionality and
+ * provides file validation for both format and maximum file count.
+ *
+ * @example
+ * ```tsx
+ * <DialLoadFileAreaField
+ *   fieldTitle="Attachments"
+ *   elementId="attachments"
+ *   files={uploadedFiles}
+ *   onChange={setUploadedFiles}
+ *   maxFilesCount={5}
+ *   acceptTypes="image/png,image/jpeg"
+ *   fileFormatError="Only PNG and JPEG images are allowed"
+ *   fileCountError="You can upload up to 5 files"
+ *   deleteAllButtonLabel="Remove all"
+ *   addButtonLabel="Add more"
+ * />
+ * ```
+ *
+ * @param {DialLoadFileAreaFieldProps} props - The properties for the file area field component.
+ * @param {(files: File[]) => void} props.onChange - Callback fired when files are added or removed.
+ * @param {string} props.fieldTitle - The label displayed above the file upload area.
+ * @param {string} props.elementId - The unique `id` used for accessibility and input association.
+ * @param {File[]} [props.files] - The list of currently selected or uploaded files.
+ * @param {number} [props.maxFilesCount] - The maximum number of files allowed.
+ * @param {string} [props.fileFormatError] - Error message shown for invalid file formats.
+ * @param {string} [props.fileCountError] - Error message shown when exceeding the file count limit.
+ * @param {boolean} [props.multiple=true] - Whether multiple file uploads are allowed.
+ * @param {string} [props.acceptTypes] - Comma-separated list of allowed MIME types or file extensions.
+ * @param {string} [props.deleteAllButtonLabel] - Label for the "Delete All" button shown when files exist.
+ * @param {string} [props.addButtonLabel] - Label for the "Add" button used to select additional files.
+ * @param {object} [props.props] - Additional props passed to the underlying `DialLoadFileArea`.
+ *
+ * @returns {JSX.Element} A file upload field with label, action buttons, and a drag-and-drop area.
+ */
+export declare const DialLoadFileAreaField: FC<DialLoadFileAreaFieldProps>;

package/dist/src/components/RadioGroup/RadioGroup.d.ts

@@ -44,4 +44,3 @@ export interface DialRadioGroupProps {
  * @param onChange - Callback fired with the selected radio id
  */
 export declare const DialRadioGroup: FC<DialRadioGroupProps>;
-export default DialRadioGroup;

package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts

@@ -3,7 +3,7 @@ import { DialFieldLabelProps } from '../Field/Field';
 import { DialInputPopupProps } from '../InputPopup/InputPopup';
 import { DialRadioGroupProps } from '../RadioGroup/RadioGroup';
 import { DialPopupProps } from '../Popup/Popup';
-export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fieldTitle' | 'htmlFor'>, Omit<DialInputPopupProps, 'onOpen' | 'children'>, Pick<DialRadioGroupProps, 'radioButtons'>, Pick<DialPopupProps, 'onClose' | 'portalId'> {
+export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fieldTitle' | 'htmlFor'>, Omit<DialInputPopupProps, 'onOpen' | 'children'>, Pick<DialRadioGroupProps, 'radioButtons'>, Pick<DialPopupProps, 'onClose' | 'portalId' | 'size'> {
     customInputValue?: string;
     title: string;
     cancelButtonTitle?: string;
@@ -64,5 +64,6 @@ export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fi
  * @param selectedRadioValue - Currently selected radio id inside the popup
  * @param onChangeRadioField - Handler for radio selection changes
  * @param id - Element id used for the internal radio group
+ * @param [size=PopupSize.Md] - Size of the popup
  */
 export declare const DialRadioGroupPopupField: FC<RadioGroupPopupFieldProps>;

package/dist/src/components/RemoveButton/RemoveButton.d.ts

@@ -0,0 +1,24 @@
+import { FC, MouseEvent } from 'react';
+export interface DialRemoveButtonProps {
+    iconClass?: string;
+    cssClass?: string;
+    ariaLabel?: string;
+    onClick: (e: MouseEvent) => void;
+}
+/**
+ * A specialized button component for removal or delete actions.
+ *
+ * Renders a `DialButton` with a predefined trash icon (`IconTrashX`) as the leading icon.
+ * Additional props are passed directly to the underlying `DialButton`.
+ * @example
+ * <DialRemoveButton
+ *   label="Delete item"
+ *   onClick={handleDelete}
+ *   iconClass="text-error"
+ * />
+ * @component
+ * @param {DialRemoveButtonProps} props - The properties for the remove button component.
+ * @param {string} [props.iconClass] - Optional CSS class applied to the trash icon for styling or sizing.
+ * @returns {JSX.Element} The rendered remove button component.
+ */
+export declare const DialRemoveButton: FC<DialRemoveButtonProps>;

package/dist/src/components/Select/MultiSelectTags.d.ts

@@ -0,0 +1,8 @@
+import { SelectOption } from '../../models/select';
+import { MouseEvent } from 'react';
+export interface DialMultiSelectTagsProps {
+    options: SelectOption[];
+    selectedValues: string[];
+    handleRemoveTag?: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void;
+}
+export declare const DialMultiSelectTags: React.FC<DialMultiSelectTagsProps>;

package/dist/src/components/Select/Select.d.ts

@@ -0,0 +1,61 @@
+import { FC, ReactNode, MouseEvent } from 'react';
+import { SelectOption } from '../../models/select';
+export interface DialSelectProps {
+    options: SelectOption[];
+    multiple?: boolean;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    selectAll?: boolean;
+    selectAllLabel?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    emptyStateIcon?: ReactNode;
+    disabled?: boolean;
+    cssClass?: string;
+    closable?: boolean;
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onChange?: (next: string | string[]) => void;
+}
+/**
+ * A versatile select supporting single and multiple selections.
+ *
+ * Single mode mirrors the legacy visual:
+ * - Trigger shows the selected option's leading icon + label.
+ * - In the list, the selected option is indicated by a LEFT border and tinted background
+ *   (no check icon).
+ *
+ * @example
+ * ```tsx
+ * <DialSelect
+ *   options={[
+ *     { value: 'option-1', label: 'Option 1' },
+ *     { value: 'option-2', label: 'Option 2' },
+ *   ]}
+ *   multiple
+ * />
+ * ```
+ *
+ * Multiple mode uses checkboxes (including Select All with indeterminate state).
+ *
+ * @param options - Array of options to select from.
+ * @param [multiple] - Whether multiple selections are allowed.
+ * @param [value] - Controlled selected value(s).
+ * @param [defaultValue] - Uncontrolled initial selected value(s).
+ * @param [placeholder] - Placeholder text when no selection is made.
+ * @param [searchable] - Whether to show a search input to filter options.
+ * @param [searchPlaceholder] - Search Placeholder text shown when search input is empty
+ * @param [selectAll] - Whether to show a "Select All" checkbox in multiple mode.
+ * @param [selectAllLabel] - Label for the "Select All" checkbox.
+ * @param [emptyStateTitle] - Title text when there are no options to display.
+ * @param [emptyStateDescription] - Optional description text when there are no options.
+ * @param [emptyStateIcon] - Optional icon to display when there are no options.
+ * @param [disabled] - Whether the select is disabled.
+ * @param [cssClass] - Additional CSS classes to apply to the select trigger.
+ * @param [closable] - Whether to show a close button in the dropdown header.
+ * @param [onClose] - Callback when the dropdown is closed via the close button.
+ * @param [onChange] - Callback when the selection changes.
+ */
+export declare const DialSelect: FC<DialSelectProps>;

package/dist/src/components/Select/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const selectTriggerBaseClasses = "dial-input flex px-3 py-2 w-full items-center justify-between gap-2 dial-small min-h-[38px]";
+export declare const selectOverlayBaseClasses = "w-full rounded";
+export declare const selectOptionBaseClasses = "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";
+export declare const selectOptionSelectedClasses = "bg-accent-primary-alpha";
+export declare const selectOptionSingleSelectedClasses = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionDisabledClasses = "opacity-75";
+export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectCheckIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SelectField/SelectField.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { DialFormItemProps } from '../FormItem/FormItem';
+import { DialSelectProps } from '../Select/Select';
+import { DialFieldLabelProps } from '../Field/Field';
+export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
+    selectCssClass?: string;
+    containerCssClass?: string;
+}
+/**
+ * A Select field wrapper that composes `DialFormItem` and `DialSelect`.
+ *
+ * Provides unified label, description, error rendering and a readonly view that shows
+ * the selected option labels (comma-separated in single mode, list in multiple).
+ *
+ * @example
+ * ```tsx
+ * <DialSelectField
+ *   elementId="transport"
+ *   fieldTitle="Transport"
+ *   options={[
+ *     { value: 'SSE', label: 'Server-Sent Events (SSE)' },
+ *     { value: 'WS', label: 'WebSocket' },
+ *   ]}
+ *   value="WS"
+ *   onChange={(v) => setTransport(v as string)}
+ * />
+ *
+ * @param selectCssClass CSS class for the select element
+ * @param containerCssClass CSS class for the form item container
+ * @param emptyStateTitle Title to show when there are no options
+ * @param restSelectProps All other DialSelect props
+ * @param restFormItemProps All other DialFormItem props
+ * ```
+ */
+export declare const DialSelectField: FC<DialSelectFieldProps>;

package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+export interface DialSharedEntityIndicatorProps {
+    label?: string;
+    size?: number;
+    cssClass?: string;
+    stroke?: number;
+}
+/**
+ * A compact icon-only indicator to denote a "shared" entity.
+ *
+ * Renders a small arrow-up-right icon with token-based colors.
+ *
+ * @example
+ * ```tsx
+ * <DialSharedEntityIndicator />
+ * <DialSharedEntityIndicator size={12} label="Opens in new window" />
+ * ```
+ *
+ * @param [label="Shared entity"] - Accessible label for assistive tech
+ * @param [size=10] - Pixel size for the icon
+ * @param [cssClass] - Additional Tailwind classes appended to the container
+ * @param [stroke=2] - Stroke width for the icon
+ *
+ */
+export declare const DialSharedEntityIndicator: FC<DialSharedEntityIndicatorProps>;

package/dist/src/components/Tab/Tab.d.ts

@@ -0,0 +1,35 @@
+import { TabModel } from '../../models/tab';
+import { FC } from 'react';
+export interface DialTabProps {
+    tab: TabModel;
+    active: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    horizontal?: boolean;
+    cssClass?: string;
+    onClick: (id: string) => void;
+}
+/**
+ * A single tab element used within the {@link DialTabs} component.
+ * Supports active, disabled, and invalid states, and can render in
+ * horizontal or vertical orientations. Displays an optional error icon
+ * when marked as invalid.
+ *
+ * @example
+ * ```tsx
+ * <DialTab
+ *   tab={{ id: 'overview', name: 'Overview' }}
+ *   isActive={true}
+ *   onClick={(id) => console.log('Selected tab:', id)}
+ * />
+ * ```
+ *
+ * @param tab - The tab model containing its `id` and `name`.
+ * @param active - Whether the tab is currently active.
+ * @param [disabled=false] - Whether the tab is disabled and non-interactive.
+ * @param [invalid=false] - Whether the tab is marked as invalid, displaying an error icon.
+ * @param [horizontal=false] - Whether the tab is displayed in horizontal orientation.
+ * @param [cssClass] - Additional CSS classes applied to the tab element.
+ * @param onClick - Callback fired when the tab is clicked. Receives the tab’s `id`.
+ */
+export declare const DialTab: FC<DialTabProps>;

package/dist/src/components/Tabs/Tabs.d.ts

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { TabModel } from '../../models/tab';
+import { TabOrientation } from '../../types/tab';
+export interface DialTabsProps {
+    tabs: TabModel[];
+    activeTab: string;
+    onClick: (id: string) => void;
+    orientation?: TabOrientation;
+}
+/**
+ * A responsive and overflow-aware tabs component that adapts between horizontal and dropdown (mobile) layouts
+ * based on screen size and available space. When there are too many tabs to fit in one line,
+ * the component automatically adds a dropdown button for accessing hidden tabs and enables smooth horizontal scrolling.
+ *
+ * Supports both horizontal and vertical orientations and can integrate with JSON editor states to toggle
+ * visibility when needed. Automatically keeps the active tab in view when navigating through scrollable tabs.
+ *
+ * On larger screens, tabs are displayed horizontally or vertically according to the {@link TabOrientation} prop.
+ * On smaller screens, tabs collapse into a dropdown menu for better usability.
+ *
+ * @example
+ * ```tsx
+ * <DialTabs
+ *   tabs={[
+ *     { id: 'overview', label: 'Overview' },
+ *     { id: 'details', label: 'Details' },
+ *     { id: 'settings', label: 'Settings' },
+ *   ]}
+ *   activeTab="overview"
+ *   onClick={(id) => setActiveTab(id)}
+ *   orientation={TabOrientation.Horizontal}
+ * />
+ * ```
+ *
+ * @param tabs - Array of tab models to render. Each tab should include an `id` and `label`.
+ * @param activeTab - The identifier of the currently active tab.
+ * @param onClick - Callback fired when a tab is selected. Receives the tab's `id` as an argument.
+ * @param [orientation=TabOrientation.Horizontal] - The layout direction of the tabs. Uses the {@link TabOrientation} enum.
+ *
+ * @remarks
+ * - Automatically detects overflow using a `ResizeObserver` and toggles a dropdown button when tabs exceed
+ *   available width.
+ * - Smoothly scrolls the tab row to keep the active tab visible.
+ * - Switches to a dedicated dropdown interface on mobile and tablet screens via the `useIsTabletScreen` hook.
+ */
+export declare const DialTabs: FC<DialTabsProps>;

package/dist/src/components/Tabs/constants.d.ts

@@ -0,0 +1 @@
+export declare const DESKTOP_TABS_GAP_PX = 12;

package/dist/src/components/Tag/Tag.d.ts

@@ -1,10 +1,12 @@
 import { TagVariant } from '../../types/tag';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export interface DialTagProps {
     tag: string;
     cssClass?: string;
-    remove?: () => void;
+    remove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     variant?: TagVariant;
+    iconBefore?: ReactNode;
+    bordered?: boolean;
 }
 /**
  * A small tag component used to display labeled items such as categories, filters, or selections.
@@ -24,5 +26,7 @@ export interface DialTagProps {
  * @param [remove] - Optional callback invoked when the remove button is clicked.
  *                   If not provided, the remove button will not be rendered.
  * @param [variant=TagVariant.Default] - Visual style of the tag. Uses the {@link TagVariant} enum.
+ * @param [iconBefore] - Optional icon or element to display before the tag text.
+ * @param [bordered=true] - When true, adds a border to the tag for better visibility on light backgrounds.
  */
 export declare const DialTag: FC<DialTagProps>;

package/dist/src/components/TextAreaField/TextAreaField.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { DialInputFieldBaseProps } from '../InputField/InputField';
 export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
     onChange?: (value: string) => void;
+    disableTooltip?: boolean;
 }
 /**
  * A complete textarea field component that combines a field label, textarea input, and error text
@@ -26,14 +27,15 @@ export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
  * @param [errorText] - Error message to display below the textarea
  * @param [optional=false] - Whether to show optional indicator next to the label
  * @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
- * @param [elementCssClass] - Additional CSS classes to apply to the textarea element
  * @param [disabled=false] - Whether the input is disabled and cannot be interacted with
  * @param [invalid=false] - Whether the input has validation errors (applies error styling)
  * @param [defaultEmptyText="None"] - Text to display when readonly and value is empty
  * @param [iconBefore] - Icon or element to display before the input
  * @param [iconAfter] - Icon or element to display after the input
  * @param [textBeforeInput] - Text to display before the input
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the input container
+ * @param [elementCssClass] - Additional CSS classes to apply to the textarea element
  * @param [containerCssClass] - Additional CSS classes to apply to the outer container
+ * @param [elementContainerCssClass] - Additional CSS classes to apply to the textarea container
+ * @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
  */
 export declare const DialTextAreaField: FC<DialTextAreaFieldProps>;

package/dist/src/components/Textarea/Textarea.d.ts

@@ -4,9 +4,11 @@ export interface DialTextareaProps {
     placeholder?: string;
     textareaId: string;
     cssClass?: string;
+    containerCssClass?: string;
     disabled?: boolean;
     invalid?: boolean;
     readonly?: boolean;
+    disableTooltip?: boolean;
     onChange?: (value: string) => void;
 }
 /**
@@ -27,8 +29,10 @@ export interface DialTextareaProps {
  * @param [onChange] - Callback function called when the textarea value changes
  * @param [placeholder] - Placeholder text displayed when textarea is empty
  * @param [cssClass=""] - Additional CSS classes to apply to the textarea element
+ * @param [containerCssClass=""] - Additional CSS classes to apply to the container div
  * @param [disabled=false] - Whether the textarea is disabled
  * @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)
+ * @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
  */
 export declare const DialTextarea: FC<DialTextareaProps>;

package/dist/src/components/Tooltip/TooltipContext.d.ts

@@ -28,10 +28,10 @@ export declare const useTooltipContext: () => {
         floating: HTMLElement | null;
     } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     context: {
-        x: number;
-        y: number;
         placement: Placement;
         strategy: import('@floating-ui/utils').Strategy;
+        x: number;
+        y: number;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         isPositioned: boolean;
         update: () => void;
@@ -75,10 +75,10 @@ export declare const useTooltip: ({ initialOpen, placement, isTriggerClickable,
         floating: HTMLElement | null;
     } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     context: {
-        x: number;
-        y: number;
         placement: Placement;
         strategy: import('@floating-ui/utils').Strategy;
+        x: number;
+        y: number;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         isPositioned: boolean;
         update: () => void;

package/dist/src/hooks/use-is-tablet-screen.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A React hook that determines whether the current window size matches a tablet screen width.
+ *
+ * It initializes based on the current screen size using `isMediumScreen()` and updates its value
+ * whenever the window is resized.
+ *
+ * @returns {boolean} `true` if the viewport width matches the tablet breakpoint, otherwise `false`.
+ *
+ * @example
+ * const isTablet = useIsTabletScreen();
+ * if (isTablet) {
+ *   console.log('Tablet layout active');
+ * }
+ */
+export declare const useIsTabletScreen: () => boolean;

package/dist/src/index.d.ts

@@ -11,8 +11,18 @@ export { DialNoDataContent } from './components/NoDataContent/NoDataContent';
 export { DialCollapsibleSidebar } from './components/CollapsibleSidebar/CollapsibleSidebar';
 export { DialLabelledText } from './components/LabelledText/LabelledText';
 export { DialTag } from './components/Tag/Tag';
+export { DialEllipsisTooltip } from './components/EllipsisTooltip/EllipsisTooltip';
+export { DialDraggableItem } from './components/DraggableItem/DraggableItem';
+export { DialFileIcon } from './components/FileIcon/FileIcon';
+export { DialFormItem } from './components/FormItem/FormItem';
+export { DialSharedEntityIndicator } from './components/SharedEntityIndicator/SharedEntityIndicator';
+export { DialTabs } from './components/Tabs/Tabs';
+export { DialTab } from './components/Tab/Tab';
+export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
+export { DialBreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem';
 export { DialButton } from './components/Button/Button';
 export { DialCloseButton } from './components/CloseButton/CloseButton';
+export { DialRemoveButton } from './components/RemoveButton/RemoveButton';
 export { DialTextarea } from './components/Textarea/Textarea';
 export { DialTextAreaField } from './components/TextAreaField/TextAreaField';
 export { DialTooltip } from './components/Tooltip/Tooltip';
@@ -20,7 +30,9 @@ export { DialSwitch } from './components/Switch/Switch';
 export { DialPopup } from './components/Popup/Popup';
 export { DialConfirmationPopup } from './components/ConfirmationPopup/ConfirmationPopup';
 export { DialRadioGroupPopupField } from './components/RadioGroupPopupField/RadioGroupPopupField';
+export { DialFormPopup } from './components/FormPopup/FormPopup';
 export { DialInput } from './components/Input/Input';
+export type { DialInputProps } from './components/Input/Input';
 export { DialNumberInputField } from './components/InputField/InputField';
 export { DialTextInputField } from './components/InputField/InputField';
 export { DialPasswordInputField } from './components/PasswordInput/PasswordInputField';
@@ -30,6 +42,9 @@ export { DialInputPopup } from './components/InputPopup/InputPopup';
 export { DialAutocompleteInput } from './components/AutocompleteInput/AutocompleteInput';
 export { DialAutocompleteInputValue } from './components/AutocompleteInput/AutocompleteInputValue';
 export { DialTagInput } from './components/TagInput/TagInput';
+export { DialSelect } from './components/Select/Select';
+export { DialSelectField } from './components/SelectField/SelectField';
+export { DialLoadFileAreaField } from './components/LoadFileArea/LoadFileAreaField';
 export { DialDropdown } from './components/Dropdown/Dropdown';
 export { AlertVariant } from './types/alert';
 export { ButtonVariant } from './types/button';
@@ -39,6 +54,13 @@ export { ConfirmationPopupVariant } from './types/confirmation-popup';
 export { DropdownType } from './types/dropdown';
 export { SearchSize } from './types/search';
 export { TagVariant } from './types/tag';
+export { TabOrientation } from './types/tab';
+export type { DialBreadcrumbPathItem } from './models/breadcrumb';
+export { FormItemOrientation } from './types/form-item';
 export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
+export type { SelectOption } from './models/select';
+export type { TabModel } from './models/tab';
+export type { DropdownItem } from './models/dropdown';
+export { mergeClasses } from './utils/merge-classes';