@epam/ai-dial-ui-kit 0.3.0-rc.9 → 0.4.0-rc.0

package/dist/src/components/FileManager/components/FoldersTree/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const CARET_ICON_PROPS: {
+    size: number;
+    stroke: number;
+};
+export declare const FOLDER_LEVEL_PADDING = 26;

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+export interface DialFileNameProps {
+    name: string;
+    cssClass?: string;
+    shared?: boolean;
+}
+/**
+ * Component to display a file name with a file icon and shared indicator.
+ * Handles long names with ellipsis and tooltip.
+ *
+ * @example
+ * ```tsx
+ * <DialFileName name="Document.pdf" />
+ * ```
+ *
+ * @param name - Full file name with or without extension
+ * @param cssClass - Additional CSS classes for the root container
+ * @param shared - Whether the file is shared
+ */
+export declare const DialFileName: FC<DialFileNameProps>;

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+export interface DialFolderNameProps {
+    name: string;
+    cssClass?: string;
+    shared?: boolean;
+    loading?: boolean;
+}
+/**
+ * Component to display a folder name with a folder icon and shared indicator.
+ * Handles long names with ellipsis and tooltip.
+ *
+ * @example
+ * ```tsx
+ * <DialFolderName name="Organization" />
+ * ```
+ *
+ * @param name - Folder name
+ * @param cssClass - Additional CSS classes for the root container
+ * @param shared - Whether the folder is shared
+ */
+export declare const DialFolderName: FC<DialFolderNameProps>;

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

@@ -0,0 +1,64 @@
+import { FC, ReactNode } from 'react';
+import { DialFormItemBaseProps } from '../../types/form-item';
+export interface DialFormItemProps extends DialFormItemBaseProps {
+    elementId: string;
+    labelVisuallyHidden?: boolean;
+    cssClass?: string;
+    childrenCssClass?: string;
+    labelCssClass?: string;
+    errorCssClass?: string;
+    children: ReactNode;
+    value?: ReactNode | string;
+    defaultEmptyText?: string;
+}
+/**
+ * A layout wrapper for form controls with label, helper text and error message.
+ *
+ * Uses `DialFieldLabel` for the label and `DialErrorText` for consistent error styling.
+ * Wires accessibility with:
+ * - `role="group"`
+ * - `aria-labelledby` (when label is present)
+ * - `aria-describedby` (description and/or error ids)
+ *
+ * @example
+ * ```tsx
+ * <DialFormItem elementId="transport" label="Transport" cssClass="w-[320px]">
+ *   <DialSelect
+ *     elementId="transport"
+ *     value={transport}
+ *     options={transportOptions}
+ *     onChange={(val) => setTransport(val as ToolsetTransport)}
+ *   />
+ * </DialFormItem>
+ *
+ * // With description and error
+ * <DialFormItem
+ *   elementId="email"
+ *   label="Email Address"
+ *   description="We'll never share your email."
+ *   error="Please enter a valid email address."
+ * >
+ *   <DialInput
+ *     elementId="email"
+ *     type="email"
+ *     value={email}
+ *     onChange={(val) => setEmail(val as string)}
+ *     placeholder="name@company.com"
+ *   />
+ * </DialFormItem>
+ * ```
+ *
+ * @params - Component properties extending:
+ * - {@link DialFormItemBaseProps} - Form item properties (label, error, description, orientation, etc.)
+ *
+ * @param elementId - Unique identifier for the form control element (used for accessibility)
+ * @param labelVisuallyHidden - Whether to visually hide the label (still accessible to screen readers, default: false)
+ * @param cssClass - Additional CSS classes to apply to the container div
+ * @param childrenCssClass - Additional CSS classes to apply to the children container div
+ * @param labelCssClass - Additional CSS classes to apply to the label element
+ * @param errorCssClass - Additional CSS classes to apply to the error message element
+ * @param children - The form control element(s) to render inside the DialFormItem
+ * @param value - The current value of the form control (for readonly mode)
+ * @param defaultEmptyText - Text to display when readonly and value is empty (default: "None")
+ */
+export declare const DialFormItem: FC<DialFormItemProps>;

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

@@ -0,0 +1,3 @@
+import { FormItemOrientation } from '../../types/form-item';
+export declare const containerBaseClasses = "w-full flex";
+export declare const orientationClassMap: Record<FormItemOrientation, string>;

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

@@ -0,0 +1,44 @@
+import { FC, ReactNode } from 'react';
+import { DialPopupProps } from '../Popup/Popup';
+export interface DialFormPopupProps extends DialPopupProps {
+    submitLabel?: string;
+    cancelLabel?: string;
+    isLoading?: boolean;
+    disableSubmitButton?: boolean;
+    submitClassName?: string;
+    onSubmit: () => void;
+    onCancel?: () => void;
+    children?: ReactNode;
+}
+/**
+ * A form-oriented popup dialog.
+ *
+ * Provides an accessible popup with a title, custom body,
+ * and a footer with "Cancel" and "Submit" actions.
+ *
+ * @example
+ * ```tsx
+ * <DialFormPopup
+ *   open
+ *   title="Create Model"
+ *   onClose={() => setOpen(false)}
+ *   onSubmit={handleSubmit}
+ * />
+ * ```
+ *
+ * @param title - Title content for the header
+ * @param [open=false] - Controls visibility of the popup
+ * @param [submitLabel="Submit"] - Label for the primary action button
+ * @param [cancelLabel="Cancel"] - Label for the cancel button
+ * @param [isLoading=false] - Shows loader placeholder and hides actions
+ * @param [disableSubmitButton=false] - Disables the submit button
+ * @param [cssClass] - Extra classes for the popup container
+ * @param [submitClassName] - Extra classes merged into the submit button
+ * @param onClose - Fired on close
+ * @param onSubmit - Fired on submit
+ * @param [onCancel] - Fired on cancel (falls back to `onClose`)
+ * @param [children] - Custom body content
+ * @param [dividers=true] - Whether to render separators between sections
+ * @param [size=PopupSize.Md] - Size of the popup
+ */
+export declare const DialFormPopup: FC<DialFormPopupProps>;

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

@@ -0,0 +1,3 @@
+export declare const defaultSubmitLabel = "Create";
+export declare const defaultCancelLabel = "Cancel";
+export declare const actionsBaseClasses = "flex items-center justify-end gap-2 px-6 py-3";

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

@@ -0,0 +1,90 @@
+import { ColDef, GridOptions } from 'ag-grid-community';
+import { DropdownItem } from '../../models/dropdown';
+export interface DialGridProps<T extends object = Record<string, unknown>> {
+    columnDefs?: ColDef<T>[];
+    rowData?: T[];
+    additionalGridOptions?: GridOptions<T>;
+    getContextMenuItems?: (row: T) => DropdownItem[];
+    cssClass?: string;
+    ariaLabel?: string;
+    withSelectionColumn?: boolean;
+    wrapCustomCellRenderers?: boolean | ((col: ColDef<T>) => boolean);
+    selectedRowIds?: Set<string>;
+    onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    getRowId?: (row: T) => string;
+    alternateOddRowColors?: boolean;
+    filterPlaceholder?: string;
+}
+/**
+ * DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
+ *
+ * Provides a pre-configured grid with:
+ * - Dark theme styling with CSS variable integration
+ * - Optional row selection with checkboxes
+ * - Context menu integration via DialDropdown
+ * - Text overflow handling with tooltips via DialEllipsisTooltip
+ * - Controlled or uncontrolled selection modes
+ * - Automatic column sizing and responsive behavior
+ * - Full accessibility support with ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with data
+ * interface Product {
+ *   id: string;
+ *   name: string;
+ *   price: number;
+ * }
+ *
+ * const columns: ColDef<Product>[] = [
+ *   { field: 'name', headerName: 'Product Name', flex: 1 },
+ *   { field: 'price', headerName: 'Price', width: 120 },
+ * ];
+ *
+ * <DialGrid<Product>
+ *   columnDefs={columns}
+ *   rowData={products}
+ *   storageKey="products-grid"
+ * />
+ *
+ * // With context menu
+ * const getContextMenu = (row: Product): DropdownItem[] => [
+ *   { key: 'edit', label: 'Edit' },
+ *   { key: 'delete', label: 'Delete', danger: true },
+ * ];
+ *
+ * <DialGrid<Product>
+ *   columnDefs={columns}
+ *   rowData={products}
+ *   getContextMenuItems={getContextMenu}
+ * />
+ *
+ * // Controlled selection
+ * const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+ *
+ * <DialGrid<Product>
+ *   columnDefs={columns}
+ *   rowData={products}
+ *   selectedRowIds={selectedIds}
+ *   onSelectionChange={(ids, rows) => {
+ *     setSelectedIds(ids);
+ *     console.log('Selected:', rows);
+ *   }}
+ * />
+ * ```
+ *
+ * @param [columnDefs] - Array of column definitions (ag-Grid ColDef format)
+ * @param [rowData] - Array of data objects to display in the grid
+ * @param [additionalGridOptions] - Additional ag-Grid GridOptions to merge with defaults
+ * @param [getContextMenuItems] - Function returning context menu items for a given row
+ * @param [cssClass] - Additional CSS classes to apply to the grid container
+ * @param [ariaLabel='Data grid'] - Accessible label for the grid region
+ * @param [withSelectionColumn=true] - Whether to show the checkbox selection column
+ * @param [wrapCustomCellRenderers=true] - Whether to wrap custom cell renderers with context menu support
+ * @param [selectedRowIds] - Controlled selection: set of row IDs that should be selected
+ * @param [onSelectionChange] - Callback invoked when selection changes (selectedIds, selectedRows)
+ * @param [getRowId] - Function to extract unique ID from a row object (defaults to 'id' field)
+ * @param [alternateOddRowColors=false] - Whether to alternate background colors for odd/even rows
+ * @param [filterPlaceholder='Enter value'] - Placeholder text for column filter inputs
+ */
+export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, onSelectionChange, getRowId, alternateOddRowColors, filterPlaceholder, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Grid/comparators/base-column-comparator.d.ts

@@ -0,0 +1,3 @@
+import { ColDef, IRowNode } from 'ag-grid-community';
+export declare const baseColumnComparator: (a: string | number | undefined, b: string | number | undefined, _nodeA?: IRowNode, _nodeB?: IRowNode, isInverted?: boolean) => number;
+export declare const checkColDefsChanges: (cols: ColDef[], initialCols: ColDef[]) => boolean;

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

@@ -0,0 +1,26 @@
+export declare const gridBaseClasses = "h-full";
+export declare const GRID_THEME_COLORS: {
+    accentColor: string;
+    backgroundColor: string;
+    oddRowBackgroundColor: string;
+    borderColor: string;
+    rowBorder: string;
+    borderRadius: number;
+    browserColorScheme: string;
+    chromeBackgroundColor: string;
+    foregroundColor: string;
+    headerFontSize: number;
+    headerFontWeight: number;
+    headerTextColor: string;
+    spacing: number;
+    wrapperBorderRadius: number;
+    fontSize: number;
+    fontFamily: {
+        googleFont: string;
+    };
+    headerColumnBorderHeight: string;
+    cellStyle: {
+        textAlign: string;
+    };
+};
+export declare const ROW_HEIGHT = 40;

package/dist/src/components/Grid/hooks/use-grid-selection.d.ts

@@ -0,0 +1,12 @@
+export interface UseGridSelectionProps<T> {
+    selectedRowIds?: Set<string>;
+    onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    rowData?: T[];
+    getRowId: (row: T) => string;
+}
+export declare const useGridSelection: <T extends object>({ selectedRowIds, onSelectionChange, rowData, getRowId, }: UseGridSelectionProps<T>) => {
+    currentSelectedIds: Set<string>;
+    handleSelectionToggle: (rowId: string, checked: boolean) => void;
+    headerCheckboxState: string;
+    handleHeaderCheckboxChange: () => void;
+};

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

@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react';
 export interface DialIconProps {
     icon?: ReactNode;
     className?: string;
+    label?: string;
 }
 /**
  * A wrapper component for rendering icons with consistent styling

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

@@ -1,12 +1,14 @@
-import { FC } from 'react';
-import { InputBaseProps } from '../../models/field-control-props';
-export interface DialInputProps extends InputBaseProps {
+import { FC, FocusEvent } from 'react';
+import { InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
+export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseProps> {
     type?: string;
     containerCssClass?: string;
     cssClass?: string;
     hideBorder?: boolean;
+    tooltipText?: string;
     tooltipTriggerClassName?: string;
-    onChange?: (value: string) => void;
+    onChange?: (value?: string) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
 }
 /**
  * A flexible input component with icon support and various styling options
@@ -22,25 +24,17 @@ export interface DialInputProps extends InputBaseProps {
  * />
  * ```
  *
- * @param elementId - Unique identifier for the input element
- * @param [value] - The current value of the input
- * @param [onChange] - Callback function called when the input value changes
- * @param [iconBefore] - Icon or element to display before the input
- * @param [iconAfter] - Icon or element to display after the input
- * @param [placeholder] - Placeholder text displayed when input is empty
- * @param [containerCssClass] - Additional CSS classes to apply to the container div
- * @param [cssClass] - Additional CSS classes to apply to the input element
- * @param [type="text"] - The type of input (text, password, email, etc.)
- * @param [disabled=false] - Whether the input is disabled
- * @param [readonly=false] - Whether the input is read-only (prevents onChange from firing)
- * @param [invalid=false] - Whether the input has validation errors (applies error styling)
- * @param [hideBorder=false] - Whether to hide the input border styling
- * @param [min] - Minimum value for number inputs
- * @param [max] - Maximum value for number inputs
- * @param [prefix] - Text to display inside the input on the left
- * @param [suffix] - Text to display inside the input on the right
- * @param [textBeforeInput] - Text to display before the input in a separate field
- * @param [tooltipTriggerClassName] - Additional CSS classes to apply to the tooltip
- * @param [textAfterInput] - Text to display after the input in a separate field
+ * @params Component properties extending:
+ * - {@link InputBaseProps} - Base input properties (elementId, value, placeholder, disabled, readonly, invalid, icons, etc.)
+ * - {@link NumberInputBaseProps} - Number input properties (min, max) - partial
+ *
+ * @param type - The HTML input type (text, password, email, number, etc.)
+ * @param containerCssClass - Additional CSS classes to apply to the container div
+ * @param cssClass - Additional CSS classes to apply to the input element
+ * @param hideBorder - Whether to hide the input border styling
+ * @param tooltipText - The text to display inside the tooltip. If empty, the tooltip will display the value prop.
+ * @param tooltipTriggerClassName - Additional CSS classes to apply to the tooltip
+ * @param onChange - Callback function called when the input value changes
+ * @param onBlur - Callback function called when the input blurs
  */
 export declare const DialInput: FC<DialInputProps>;

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

@@ -1,23 +1,20 @@
 import { FC } from 'react';
-import { FieldControlProps, InputBaseProps } from '../../models/field-control-props';
-export interface DialInputFieldBaseProps extends FieldControlProps, InputBaseProps {
-    value?: string | number | null;
+import { FieldControlProps, InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
+import { DialFormItemBaseProps } from '../../types/form-item';
+export interface DialInputFieldBaseProps extends FieldControlProps, DialFormItemBaseProps, InputBaseProps {
+    value?: string | number;
     defaultEmptyText?: string;
     errorText?: string;
     elementCssClass?: string;
     elementContainerCssClass?: string;
     containerCssClass?: string;
 }
-export interface DialInputFieldProps extends DialInputFieldBaseProps {
+export interface DialInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
     type: string;
-    onChange?: (value: string | number) => void;
-    min?: number;
-    max?: number;
+    onChange?: (value?: string | number) => void;
 }
-export interface DialNumberInputFieldProps extends DialInputFieldBaseProps {
-    onChange?: (value: number | string) => void;
-    min?: number;
-    max?: number;
+export interface DialNumberInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
+    onChange?: (value?: number | string) => void;
 }
 /**
  * A number input field component
@@ -33,29 +30,18 @@ export interface DialNumberInputFieldProps extends DialInputFieldBaseProps {
  * />
  * ```
  *
- * @param elementId - Unique identifier for the input element
- * @param [fieldTitle] - The label text to display above the input
- * @param [placeholder] - Placeholder text shown when input is empty
- * @param [value] - The current numeric value of the input
- * @param [onChange] - Callback function called when the input value changes.
- *                   Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)
- * @param [optional=false] - Whether the field is optional
- * @param [disabled=false] - Whether the input is disabled
- * @param [readonly=false] - Whether the input is read-only
- * @param [invalid=false] - Whether the input has validation errors (applies error styling)
- * @param [errorText] - Error message text to display below the input
- * @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 [elementCssClass] - Additional CSS classes to apply to the input element
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the input container
- * @param [containerCssClass] - Additional CSS classes to apply to the DialNumberInputField container
- * @param [min] - Minimum allowed value for the number input
- * @param [max] - Maximum allowed value for the number input
+ * @params - Component properties extending:
+ * - {@link FieldControlProps} - Field control properties (fieldTitle, optional)
+ * - {@link DialFormItemBaseProps} - Form item properties (label, error, description, etc.)
+ * - {@link InputBaseProps} - Base input properties (elementId, value, placeholder, disabled, readonly, invalid, icons, etc.)
+ * - {@link NumberInputBaseProps} - Number input properties (min, max) - partial
+ *
+ * @param onChange - Callback function called when the input value changes.
+ *                        Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)
  */
 export declare const DialNumberInputField: FC<DialNumberInputFieldProps>;
 export interface DialTextInputFieldProps extends DialInputFieldBaseProps {
-    onChange?: (value: string) => void;
+    onChange?: (value?: string) => void;
 }
 /**
  * A text input field component
@@ -72,21 +58,11 @@ export interface DialTextInputFieldProps extends DialInputFieldBaseProps {
  * />
  * ```
  *
- * @param elementId - Unique identifier for the input element
- * @param [fieldTitle] - The label text to display above the input
- * @param [placeholder] - Placeholder text shown when input is empty
- * @param [value] - The current text value of the input
- * @param [onChange] - Callback function called when the input value changes, receives the new string value
- * @param [optional=false] - Whether the field is optional (displays "(Optional)" indicator)
- * @param [disabled=false] - Whether the input is disabled and cannot be interacted with
- * @param [readonly=false] - Whether the input is read-only (displays value as text, no input element)
- * @param [invalid=false] - Whether the input has validation errors (applies error styling)
- * @param [errorText] - Error message text to display below the input
- * @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 [elementCssClass] - Additional CSS classes to apply to the input element
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the input container
- * @param [containerCssClass] - Additional CSS classes to apply to the outer container
+ * @params - Component properties extending:
+ * - {@link FieldControlProps} - Field control properties (fieldTitle, optional)
+ * - {@link DialFormItemBaseProps} - Form item properties (label, error, description, etc.)
+ * - {@link InputBaseProps} - Base input properties (elementId, value, placeholder, disabled, readonly, invalid, icons, etc.)
+ *
+ * @param onChange - Callback function called when the input value changes, receives the new string value
  */
 export declare const DialTextInputField: FC<DialTextInputFieldProps>;

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>;