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

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/PasswordInput/PasswordInputField.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { DialInputFieldBaseProps } from '../InputField/InputField';
 export interface DialPasswordInputFieldProps extends DialInputFieldBaseProps {
-    onChange?: (value: string) => void;
+    onChange?: (value?: string) => void;
 }
 /**
  * A password input field component with label, error text, and show/hide functionality.

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

@@ -1,16 +1,24 @@
 import { FC } from 'react';
-import { RadioGroupOrientation } from '../../types/radio-group';
 import { RadioButtonWithContent } from '../../models/radio';
+import { RadioGroupOrientation } from '../../types/radio-group';
 export interface DialRadioGroupProps {
     fieldTitle?: string;
     elementId: string;
-    radioCssClass?: string;
-    labelCssClass?: string;
     disabled?: boolean;
     radioButtons: RadioButtonWithContent[];
     activeRadioButton: string;
     orientation: RadioGroupOrientation;
     onChange: (radioId: string) => void;
+    radioCssClass?: string;
+    groupLabelCssClass?: string;
+    labelCssClass?: string;
+    containerCssClass?: string;
+    formItemChildrenCssClass?: string;
+    selectedItemCssClass?: string;
+    selectedLabelCssClass?: string;
+    radioGroupCssClass?: string;
+    inputContainerCssClass?: string;
+    selectedInputContainerCssClass?: string;
 }
 /**
  * Groups multiple `DialRadio` options and renders custom content for the active option.
@@ -36,7 +44,15 @@ export interface DialRadioGroupProps {
  * @param [fieldTitle] - Optional label rendered by `DialField`
  * @param elementId - Name for the underlying radio group; also used for input `name`
  * @param [radioCssClass] - Additional classes applied to each radio input
+ * @param [inputContainerCssClass] - Additional classes applied to each radio input's container
+ * @param [selectedInputContainerCssClass] - Additional classes applied to the selected radio input's container
+ * @param [groupLabelCssClass] - Optional classes applied to the group label. If not provided, `labelCssClass` will be used.
+ * @param [formItemChildrenCssClass] - Additional classes applied to the DialFormItem's children container
  * @param [labelCssClass] - Additional classes applied to each radio label
+ * @param [containerCssClass] - Additional classes applied to the outer container
+ * @param [selectedItemCssClass] - Additional classes applied to the selected option's content container
+ * @param [selectedLabelCssClass] - Additional classes applied to the selected option's label
+ * @param [radioGroupCssClass] - Additional classes applied to the radio group container
  * @param [disabled] - Disables all child radios when set
  * @param radioButtons - Array of options with ids, labels, and optional content
  * @param activeRadioButton - The id of the currently selected radio
@@ -44,4 +60,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/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', invalid: true },
+ *   ]}
+ *   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

@@ -3,9 +3,10 @@ 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.
@@ -25,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/constants/storybook/form-item.d.ts

@@ -0,0 +1,3 @@
+import { DialFormItemBaseProps } from '../../types/form-item';
+import { ArgTypes } from '@storybook/react';
+export declare const dialFormItemBaseArgTypes: Partial<ArgTypes<DialFormItemBaseProps>>;

package/dist/src/constants/storybook/input.d.ts

@@ -0,0 +1,5 @@
+import { FieldControlProps, InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
+import { ArgTypes } from '@storybook/react';
+export declare const fieldControlArgTypes: Partial<ArgTypes<FieldControlProps>>;
+export declare const inputBaseArgTypes: Partial<ArgTypes<InputBaseProps>>;
+export declare const numberInputBaseArgTypes: Partial<ArgTypes<NumberInputBaseProps>>;

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,20 @@ 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 { DialFileName } from './components/FileName/FileName';
+export { DialFolderName } from './components/FolderName/FolderName';
+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,6 +32,8 @@ 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 { DialFileManagerNavigationPanel } from './components/FileManagerNavigationPanel/FileManagerNavigationPanel';
 export { DialInput } from './components/Input/Input';
 export type { DialInputProps } from './components/Input/Input';
 export { DialNumberInputField } from './components/InputField/InputField';
@@ -31,7 +45,11 @@ 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 { DialButtonDropdown } from './components/ButtonDropdown/ButtonDropdown';
 export { AlertVariant } from './types/alert';
 export { ButtonVariant } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
@@ -40,6 +58,16 @@ 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 type { DialModifiedEntity } from './models/base-entity';
+export type { DialFile } from './models/file';
+export type { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
+export { mergeClasses } from './utils/merge-classes';

package/dist/src/models/base-entity.d.ts

@@ -0,0 +1,4 @@
+export interface DialModifiedEntity {
+    createdAt?: string;
+    updatedAt?: string;
+}

package/dist/src/models/breadcrumb.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, MouseEvent } from 'react';
+export interface DialBreadcrumbPathItem {
+    title: ReactNode;
+    href?: string;
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+    disabled?: boolean;
+    cssClass?: string;
+    iconBefore?: ReactNode;
+}