@epam/ai-dial-ui-kit 0.5.0-rc.40 → 0.5.0-rc.42

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

@@ -3,8 +3,8 @@ import { DialAutocompleteInputValueProps } from './AutocompleteInputValue';
 export interface DialAutocompleteInputProps extends DialAutocompleteInputValueProps {
     placeholder?: string;
     updateSelected: (items: string[]) => void;
-    containerCssClass?: string;
-    inputCssClass?: string;
+    containerClassName?: string;
+    inputClassName?: string;
 }
 /**
  * A component that provides an interactive input field with autocomplete functionality. Users can
@@ -18,19 +18,19 @@ export interface DialAutocompleteInputProps extends DialAutocompleteInputValuePr
  *   placeholder="Type to add items"
  *   selectedItems={['Item 1', 'Item 2']}
  *   updateSelected={(items) => console.log(items)}
- *   containerCssClass="custom-container-class"
- *   inputCssClass="custom-input-class"
- *   listCssClass="custom-list-class"
- *   listElementCssClass="custom-item-class"
+ *   containerClassName="custom-container-class"
+ *   inputClassName="custom-input-class"
+ *   listClassName="custom-list-class"
+ *   listElementClassName="custom-item-class"
  * />
  * ```
  *
  * @param [placeholder] - The placeholder text displayed in the input field when no items are selected.
  * @param [selectedItems=[]] - An array of strings representing the currently selected items.
  * @param updateSelected - A callback function that updates the list of selected items. Called when items are added or removed.
- * @param [listCssClass] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
- * @param [listElementCssClass] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
- * @param [containerCssClass] - Additional CSS classes applied to the container `<div>` element wrapping the input and list.
- * @param [inputCssClass] - Additional CSS classes applied to the `<input>` element.
+ * @param [listClassName] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
+ * @param [listElementClassName] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
+ * @param [containerClassName] - Additional CSS classes applied to the container `<div>` element wrapping the input and list.
+ * @param [inputClassName] - Additional CSS classes applied to the `<input>` element.
  */
 export declare const DialAutocompleteInput: FC<DialAutocompleteInputProps>;

package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts

@@ -2,8 +2,8 @@ import { FC } from 'react';
 export interface DialAutocompleteInputValueProps {
     placeholder?: string;
     selectedItems?: string[];
-    listCssClass?: string;
-    listElementCssClass?: string;
+    listClassName?: string;
+    listElementClassName?: string;
 }
 /**
  * A component that displays a list of selected items in a customizable, styled list. Each item is
@@ -15,14 +15,14 @@ export interface DialAutocompleteInputValueProps {
  * ```tsx
  * <DialAutocompleteInputValue
  *   selectedItems={['Item 1', 'Item 2', 'Item 3']}
- *   listCssClass="custom-list-class"
- *   listElementCssClass="custom-item-class"
+ *   listClassName="custom-list-class"
+ *   listElementClassName="custom-item-class"
  * />
  * ```
  *
  * @param [placeholder] - Placeholder text to display when no items are selected.
  * @param [selectedItems] - An array of strings representing the selected items to display. If empty or undefined, the component renders nothing.
- * @param [listCssClass] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
- * @param [listElementCssClass] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
+ * @param [listClassName] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
+ * @param [listElementClassName] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
  */
 export declare const DialAutocompleteInputValue: FC<DialAutocompleteInputValueProps>;

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

@@ -7,7 +7,7 @@ export interface DialCheckboxProps {
     indeterminate?: boolean;
     ariaLabel?: string;
     onChange?: (value?: boolean, id?: string) => void;
-    cssClass?: string;
+    className?: string;
 }
 /**
  * A Checkbox component with styling options
@@ -30,6 +30,6 @@ export interface DialCheckboxProps {
  * @param [indeterminate=false] - indeterminate state
  * @param [ariaLabel] - Accessible label for screen readers when no title is provided
  * @param [onChange] - Callback function called when the checkbox value changes
- * @param [cssClass] - Additional CSS classes to apply to the checkbox wrapper
+ * @param [className] - Additional CSS classes to apply to the checkbox wrapper
  */
 export declare const DialCheckbox: FC<DialCheckboxProps>;

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

@@ -3,8 +3,8 @@ export interface DialCollapsibleSidebarProps {
     children: ReactNode;
     width?: number;
     title: string;
-    titleCssClass?: string;
-    containerCssClass?: string;
+    titleClassName?: string;
+    containerClassName?: string;
     iconSize?: number;
     additionalButtons?: ReactNode;
     iconStroke?: number;
@@ -20,8 +20,8 @@ export interface DialCollapsibleSidebarProps {
  * <DialCollapsibleSidebar
  *   width={300}
  *   title="Menu"
- *   titleCssClass="text-primary font-bold"
- *   containerCssClass="bg-gray-100 shadow-md"
+ *   titleClassName="text-primary font-bold"
+ *   containerClassName="bg-gray-100 shadow-md"
  *   iconSize={24}
  *   additionalButtons={<button>Extra</button>}
  * >
@@ -32,8 +32,8 @@ export interface DialCollapsibleSidebarProps {
  * @param children - The content to display inside the collapsible bar when expanded
  * @param [width = 280] - The width of the bar when expanded
  * @param title - The title displayed when the bar is collapsed
- * @param [titleCssClass] - Additional CSS classes applied to the title element
- * @param [containerCssClass] - Additional CSS classes applied to the container element
+ * @param [titleClassName] - Additional CSS classes applied to the title element
+ * @param [containerClassName] - Additional CSS classes applied to the container element
  * @param [iconSize = 32] - The size of the toggle icons. Defaults to 32
  * @param [iconStroke = 1.5] - The stroke width of the toggle icons. Defaults to 1.5
  * @param [additionalButtons] - Additional buttons or elements displayed next to the toggle button when expanded

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

@@ -3,7 +3,7 @@ import { DialPopupProps } from '../Popup/Popup';
 import { ConfirmationPopupVariant } from '../../types/confirmation-popup';
 export interface DialConfirmationPopupProps extends DialPopupProps {
     description?: string | ReactNode;
-    descriptionCssClass?: string;
+    descriptionClassName?: string;
     confirmLabel?: string;
     cancelLabel?: string;
     isLoading?: boolean;
@@ -34,13 +34,13 @@ export interface DialConfirmationPopupProps extends DialPopupProps {
  *
  * @param title - Title content for the header
  * @param [description] - Secondary text (ignored when `children` set)
- * @param [descriptionCssClass] - Custom CSS class for the description
+ * @param [descriptionClassName] - Custom CSS class for the description
  * @param [open=false] - Controls visibility of the popup
  * @param [confirmLabel="Ok"] - Label for the confirm button
  * @param [cancelLabel="Cancel"] - Label for the cancel button
  * @param [isLoading=false] - Shows loader placeholder and hides actions
  * @param [disableConfirmButton=false] - Disables the confirm button
- * @param [cssClass] - Extra classes for the popup container
+ * @param [className] - Extra classes for the popup container
  * @param [confirmClassName] - Extra classes merged into the confirm button
  * @param onClose - Fired on close
  * @param onConfirm - Fired on confirm

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

@@ -1,12 +1,12 @@
 import { ButtonVariant } from '../../types/button';
 import { ConfirmationPopupVariant } from '../../types/confirmation-popup';
-export declare const actionsBaseClasses = "flex justify-end gap-2 px-6 py-4";
-export declare const descriptionBaseClasses = "text-secondary dial-small-150 px-6 py-4";
+export declare const actionsBaseClassName = "flex justify-end gap-2 px-6 py-4";
+export declare const descriptionBaseClassName = "text-secondary dial-small-150 px-6 py-4";
 export declare const defaultCancelLabel = "Cancel";
 export declare const defaultConfirmLabel = "Ok";
 export declare const variantConfig: Record<ConfirmationPopupVariant, {
     container?: string;
     confirmVariant: ButtonVariant;
-    confirmClass?: string;
+    confirmClassName?: string;
     cancelVariant: ButtonVariant;
 }>;

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

@@ -24,7 +24,7 @@ export interface DialDropdownProps {
     onOpenChange?: (open: boolean) => void;
     closable?: boolean;
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
-    cssClass?: string;
+    className?: string;
     listClassName?: string;
     outsidePressIgnoreRef?: RefObject<HTMLElement | null>;
     outsideClosable?: boolean;
@@ -69,7 +69,7 @@ export interface DialDropdownProps {
  * @param [onOpenChange] - Fired whenever the open state changes
  * @param [closable=false] - Whether the overlay shows an internal close button
  * @param [onClose] - Fired when the close button inside the overlay is clicked
- * @param [cssClass] - Additional CSS classes applied to the trigger wrapper
+ * @param [className] - Additional CSS classes applied to the trigger wrapper
  * @param [listClassName] - Additional CSS classes applied to the floating overlay
  * @param [outsidePressIgnoreRef] - Ref to an element that should not trigger outside press behavior
  * @param [outsideClosable=true] - Whether clicks outside the overlay should close it

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

@@ -1,8 +1,8 @@
-export declare const dropdownBaseClasses: string;
-export declare const dropdownListBaseClasses: string;
-export declare const dropdownItemBaseClasses: string;
-export declare const dropdownItemDisabledClasses = "opacity-75 !cursor-not-allowed";
-export declare const dropdownItemDangerClasses = "text-error";
-export declare const dropdownDividerClasses = "my-1 border-t border-hover border-secondary";
+export declare const dropdownBaseClassName: string;
+export declare const dropdownListBaseClassName: string;
+export declare const dropdownItemBaseClassName: string;
+export declare const dropdownItemDisabledClassName = "opacity-75 !cursor-not-allowed";
+export declare const dropdownItemDangerClassName = "text-error";
+export declare const dropdownDividerClassName = "my-1 border-t border-hover border-secondary";
 export declare const dropdownGap = 4;
 export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import { DialTooltipContainerOptions } from '../Tooltip/TooltipContext';
 export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
     text: string | ReactNode;
-    cssClass?: string;
+    className?: string;
     contentClassName?: string;
     hideTooltip?: boolean;
 }
@@ -11,19 +11,19 @@ export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
  * If the text fits, tooltip content is empty and the popup stays hidden.
  *
  * Important: width must be finite for truncation.
- * Consumers can override via `cssClass`.
+ * Consumers can override via `className`.
  *
  * a11y: when truncated, the full text is exposed via `aria-label` on the reference node.
  *
  * @example
  * ```tsx
  * <DialEllipsisTooltip text="Very long message that will be truncated" />
- * <DialEllipsisTooltip text={<span className="font-medium">Custom node</span>} cssClass="max-w-[160px]" />
+ * <DialEllipsisTooltip text={<span className="font-medium">Custom node</span>} className="max-w-[160px]" />
  * <DialEllipsisTooltip text="Tooltip disabled even if truncated" hideTooltip />
  * ```
  *
  * @param text The text or node to display (truncated with ellipsis if too long).
- * @param cssClass Optional additional CSS classes for the text container (e.g. to set width).
+ * @param className Optional additional CSS classes for the text container (e.g. to set width).
  * @param contentClassName Optional additional CSS classes for the tooltip content.
  * @param hideTooltip If true, disables the tooltip even if text is truncated.
  * @param tooltipProps Additional props to pass to the underlying DialTooltipContainer.

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

@@ -1 +1 @@
-export declare const tooltipContentBaseClasses = "text-primary";
+export declare const tooltipContentBaseClassName = "text-primary";

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

@@ -3,7 +3,7 @@ export interface DialFileIconProps {
     extension: string;
     size?: number;
     stroke?: number;
-    cssClass?: string;
+    className?: string;
     decorative?: boolean;
     label?: string;
     indicator?: ReactNode;
@@ -23,7 +23,7 @@ export interface DialFileIconProps {
  * @param extension - File extension string (with or without leading dot)
  * @param [size=baseIconProps.size] - Icon pixel size
  * @param [stroke=baseIconProps.stroke] - Tabler icon stroke width
- * @param [cssClass] - Additional classes on the container
+ * @param [className] - Additional classes on the container
  * @param [decorative=false] - Whether the icon should be hidden from assistive technologies
  * @param [label] - Accessible label when not decorative; defaults to "<EXT> file icon"
  * @param [indicator] - Optional indicator element to display alongside the icon

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

@@ -17,7 +17,7 @@ export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolde
 export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
     width?: number;
     title?: string;
-    containerCssClass?: string;
+    containerClassName?: string;
     additionalButtons?: ReactNode;
     collapsed?: boolean;
     onCollapseChange?: (collapsed: boolean) => void;
@@ -76,7 +76,7 @@ export interface CreateFolderValidationMessages {
 }
 export interface DialFileManagerProps {
     path?: string;
-    cssClass?: string;
+    className?: string;
     items?: DialFile[];
     rootItem?: DialRootFolder;
     filesLoading?: boolean;
@@ -154,7 +154,7 @@ export interface DialFileManagerProps {
  * ```
  *
  * @param [path] - Absolute path of the current location (e.g. "/All files/Design/Icons")
- * @param [cssClass] - Additional classes for the root container
+ * @param [className] - Additional classes for the root container
  * @param [items] - Full hierarchical list of files and folders used by both tree and grid
  * @param [rootItem] - Optional root folder item to represent the top-level container in the tree
  * @param [filesLoading=false] - When true, shows skeleton loading state in the grid

package/dist/src/components/FileManager/FileManagerContext.d.ts

@@ -16,7 +16,7 @@ export interface FileManagerGridRow {
     isTemporary?: boolean;
 }
 export interface FileManagerContextValue {
-    cssClass?: string;
+    className?: string;
     items: DialFile[];
     rootItem?: DialRootFolder;
     filesLoading?: boolean;

package/dist/src/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.d.ts

@@ -38,7 +38,7 @@ export interface DialFileManagerItemIconProps extends Omit<DialFileIconProps, 'e
  * @param {boolean} [props.loading=false] - Whether to display the loading state.
  * @param {number} [props.size] - Optional icon size override.
  * @param {number} [props.stroke] - Optional icon stroke width override.
- * @param {string} [props.cssClass] - Optional CSS class for styling.
+ * @param {string} [props.className] - Optional CSS class for styling.
  * @param {boolean} [props.decorative] - Whether the icon is decorative (for accessibility).
  * @param {string} [props.label] - Accessible label for screen readers.
  * @param {ReactNode} [props.indicator] - Optional indicator to display over the icon.

package/dist/src/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.d.ts

@@ -8,7 +8,7 @@ export interface DialFileManagerItemNameInputProps {
     elementId: string;
     iconSize?: number;
     iconStroke?: number;
-    iconCssClass?: string;
+    iconClassName?: string;
     iconLabel?: string;
     iconIndicator?: ReactNode;
     inputInvalid?: boolean;
@@ -53,7 +53,7 @@ export interface DialFileManagerItemNameInputProps {
  * @param {boolean} [props.loading=false] - Whether the icon is loading.
  * @param {number} [props.iconSize] - Optional size override for the icon.
  * @param {number} [props.iconStroke] - Optional stroke width override for the icon.
- * @param {string} [props.iconCssClass] - Optional CSS class for the icon.
+ * @param {string} [props.iconClassName] - Optional CSS class for the icon.
  * @param {string} [props.iconLabel] - Optional accessible label for the icon.
  * @param {ReactNode} [props.iconIndicator] - Optional indicator to render over the icon.
  * @param {boolean} [props.inputInvalid=false] - Marks the input as invalid.

package/dist/src/components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel.d.ts

@@ -1,11 +1,11 @@
 import { FC } from 'react';
 import { DialBreadcrumbProps } from '../../../Breadcrumb/Breadcrumb';
 import { DialSearchProps } from '../../../Search/Search';
-export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumbProps, 'pathItems' | 'children' | 'cssClass' | 'separator'>, Omit<DialSearchProps, 'onChange' | 'elementId' | 'value' | 'cssClass' | 'containerCssClass' | 'placeholder' | 'size'> {
+export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumbProps, 'pathItems' | 'children' | 'className' | 'separator'>, Omit<DialSearchProps, 'onChange' | 'elementId' | 'value' | 'className' | 'containerClassName' | 'placeholder' | 'size'> {
     path?: string;
     makeHref?: (segments: string[], index: number) => string | undefined;
-    cssClass?: string;
-    breadcrumbCssClass?: string;
+    className?: string;
+    breadcrumbClassName?: string;
     onItemClick?: (href?: string) => void;
     rootItemPath?: string;
     rootItemLabel?: string;
@@ -13,8 +13,8 @@ export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumb
     value?: string | number | null;
     elementId?: string;
     onSearchChange?: (value: string) => void;
-    searchCssClass?: string;
-    searchContainerCssClass?: string;
+    searchClassName?: string;
+    searchContainerClassName?: string;
 }
 /**
  * FileManagerNavigationPanel
@@ -43,18 +43,18 @@ export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumb
  * ```
  *
  * @param [ariaLabel="Breadcrumb"] - Aria label for the breadcrumb `<nav>`
- * @param [titleCssClass] - Extra classes for breadcrumb titles
+ * @param [titleClassName] - Extra classes for breadcrumb titles
  * @param [path] - A full path string that will be split into breadcrumb items
  * @param [makeHref] - Factory to create hrefs for segments
  * @param [onItemClick] - Callback fired when a breadcrumb item is clicked
- * @param [cssClass] - Additional classes for the panel container
- * @param [breadcrumbCssClass] - Classes forwarded to inner `DialBreadcrumb`
+ * @param [className] - Additional classes for the panel container
+ * @param [breadcrumbClassName] - ClassName forwarded to inner `DialBreadcrumb`
  * @param [searchable=true] - Whether to render the search control
  * @param [value] - Controlled value for the search input (parent-managed)
  * @param [elementId="fm-search"] - DOM id for the internal DialSearch input
  * @param [size=SearchSize.Base] - Size of the search input (from DialSearchProps)
  * @param [onSearchChange] - Callback fired when the search value changes
- * @param [searchCssClass] - Extra classes for the search input element
- * @param [searchContainerCssClass] - Extra classes for the search container
+ * @param [searchClassName] - Extra classes for the search input element
+ * @param [searchContainerClassName] - Extra classes for the search container
  */
 export declare const DialFileManagerNavigationPanel: FC<DialFileManagerNavigationPanelProps>;

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

@@ -1,3 +1,3 @@
-export declare const panelBaseClasses = "w-full h-[12] flex items-center justify-between gap-4";
-export declare const breadcrumbContainerClasses = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center rounded";
-export declare const searchContainerClasses = "w-[260px]";
+export declare const panelBaseClassName = "w-full h-[12] flex items-center justify-between gap-4";
+export declare const breadcrumbContainerClassName = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center rounded";
+export declare const searchContainerWrapperClassName = "w-[260px]";

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

@@ -1,10 +1,10 @@
-export declare const containerBaseClasses = "w-full h-full grid grid-rows-[auto_1fr] gap-5 p-6 overflow-hidden min-w-0 bg-layer-2";
-export declare const toolbarBaseClasses = "w-full text-secondary flex items-center gap-2";
-export declare const mainGridClasses = "flex min-h-0 min-w-0 h-full gap-4 overflow-hidden";
-export declare const contentGridClasses = "flex flex-col flex-1 min-h-0 min-w-0 h-full gap-4";
-export declare const contentHeaderClasses = "items-center";
-export declare const treeBaseClasses = "w-full h-full rounded bg-layer-3 text-secondary overflow-auto min-w-0";
-export declare const gridBaseClasses = "flex-1 w-full rounded text-secondary overflow-auto min-h-0 min-w-0";
+export declare const containerBaseClassName = "w-full h-full grid grid-rows-[auto_1fr] gap-5 p-6 overflow-hidden min-w-0 bg-layer-2";
+export declare const toolbarBaseClassName = "w-full text-secondary flex items-center gap-2";
+export declare const mainGridClassName = "flex min-h-0 min-w-0 h-full gap-4 overflow-hidden";
+export declare const contentGridClassName = "flex flex-col flex-1 min-h-0 min-w-0 h-full gap-4";
+export declare const contentHeaderClassName = "items-center";
+export declare const treeBaseClassName = "w-full h-full rounded bg-layer-3 text-secondary overflow-auto min-w-0";
+export declare const gridBaseClassName = "flex-1 w-full rounded text-secondary overflow-auto min-h-0 min-w-0";
 export declare const sidebarWidth = 280;
 export declare const sidebarTitleDefault = "Files";
 export declare const BASE_FILE_MANAGER_ICON_SIZE = 20;

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

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 export interface DialFileNameProps {
     name: string;
-    cssClass?: string;
+    className?: string;
     shared?: boolean;
     iconSize?: number;
 }
@@ -15,7 +15,7 @@ export interface DialFileNameProps {
  * ```
  *
  * @param name - Full file name with or without extension
- * @param cssClass - Additional CSS classes for the root container
+ * @param className - Additional CSS classes for the root container
  * @param shared - Whether the file is shared
  * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
  */

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

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 export interface DialFolderNameProps {
     name: string;
-    cssClass?: string;
+    className?: string;
     shared?: boolean;
     loading?: boolean;
     iconSize?: number;
@@ -16,7 +16,7 @@ export interface DialFolderNameProps {
  * ```
  *
  * @param name - Folder name
- * @param cssClass - Additional CSS classes for the root container
+ * @param className - Additional CSS classes for the root container
  * @param shared - If true, shows shared indicator. Default: false.
  * @param loading - If true, shows loading state. Default: false.
  * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.

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

@@ -3,10 +3,10 @@ import { DialFormItemBaseProps } from '../../types/form-item';
 export interface DialFormItemProps extends DialFormItemBaseProps {
     elementId: string;
     labelVisuallyHidden?: boolean;
-    cssClass?: string;
-    childrenCssClass?: string;
-    labelCssClass?: string;
-    errorCssClass?: string;
+    className?: string;
+    childrenClassName?: string;
+    labelClassName?: string;
+    errorClassName?: string;
     children: ReactNode;
     value?: ReactNode | string;
     defaultEmptyText?: string;
@@ -22,7 +22,7 @@ export interface DialFormItemProps extends DialFormItemBaseProps {
  *
  * @example
  * ```tsx
- * <DialFormItem elementId="transport" label="Transport" cssClass="w-[320px]">
+ * <DialFormItem elementId="transport" label="Transport" className="w-[320px]">
  *   <DialSelect
  *     elementId="transport"
  *     value={transport}
@@ -53,10 +53,10 @@ export interface DialFormItemProps extends DialFormItemBaseProps {
  *
  * @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 className - Additional CSS classes to apply to the container div
+ * @param childrenClassName - Additional CSS classes to apply to the children container div
+ * @param labelClassName - Additional CSS classes to apply to the label element
+ * @param errorClassName - 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")

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

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

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

@@ -32,7 +32,7 @@ export interface DialFormPopupProps extends DialPopupProps {
  * @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 [className] - 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

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

@@ -1,3 +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";
+export declare const actionsBaseClassName = "flex items-center justify-end gap-2 px-6 py-3";

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

@@ -6,7 +6,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
     rowData?: T[];
     additionalGridOptions?: GridOptions<T>;
     getContextMenuItems?: (row: T) => DropdownItem[];
-    cssClass?: string;
+    className?: string;
     ariaLabel?: string;
     withSelectionColumn?: boolean;
     wrapCustomCellRenderers?: boolean | ((col: ColDef<T>) => boolean);
@@ -92,7 +92,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @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 [className] - 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
@@ -108,4 +108,4 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [loading=false] - When true, shows AG-Grid's native loading overlay
  * @param [wrapperBorder=true] - Whether to apply a border around the grid container
  */
-export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, selectedRows, onSelectionChange, onSelectionChangeWithMap, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, selectedRows, onSelectionChange, onSelectionChangeWithMap, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-export declare const gridBaseClasses = "h-full";
+export declare const gridBaseClassName = "h-full";
 export declare const GRID_THEME_COLORS: {
     accentColor: string;
     backgroundColor: string;

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

@@ -6,7 +6,7 @@ export interface DialDateCellRendererProps extends Partial<ICellRendererParams<R
     locale?: string;
     options?: Intl.DateTimeFormatOptions;
     emptyPlaceholder?: string;
-    cssClass?: string;
+    className?: string;
 }
 /**
  * Minimal date cell renderer (ag-Grid compatible).
@@ -27,6 +27,6 @@ export interface DialDateCellRendererProps extends Partial<ICellRendererParams<R
  * @param [locale='en-US'] - Locale fixed to U.S. English by default to enforce "Jul 20, 2025".
  * @param [options={ year: 'numeric', month: 'numeric', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'UTC' }] - Options for date formatting (e.g., timeZone).
  * @param [emptyPlaceholder='—'] - Placeholder when value is empty/invalid.
- * @param [cssClass] - Additional classes merged into the wrapper.
+ * @param [className] - Additional classes merged into the wrapper.
  */
 export declare const DialDateCellRenderer: FC<DialDateCellRendererProps>;

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

@@ -1,3 +1,3 @@
 export declare const DEFAULT_LOCALE = "en-US";
 export declare const DEFAULT_DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions;
-export declare const dateCellBaseClasses = "text-primary";
+export declare const dateCellBaseClassName = "text-primary";

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

@@ -2,8 +2,8 @@ import { FC, FocusEvent, Ref } from 'react';
 import { InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
 export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseProps> {
     type?: string;
-    containerCssClass?: string;
-    cssClass?: string;
+    containerClassName?: string;
+    className?: string;
     hideBorder?: boolean;
     tooltipText?: string;
     tooltipTriggerClassName?: string;
@@ -31,8 +31,8 @@ export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseP
  * - {@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 containerClassName - Additional CSS classes to apply to the container div
+ * @param className - 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

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

@@ -5,9 +5,9 @@ export interface DialInputFieldBaseProps extends FieldControlProps, DialFormItem
     value?: string | number;
     defaultEmptyText?: string;
     errorText?: string;
-    elementCssClass?: string;
-    elementContainerCssClass?: string;
-    containerCssClass?: string;
+    elementClassName?: string;
+    elementContainerClassName?: string;
+    containerClassName?: string;
 }
 export interface DialInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
     type: string;

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

@@ -5,8 +5,8 @@ export interface DialInputPopupProps {
     children: ReactNode;
     onOpen: () => void;
     disabled?: boolean;
-    valueCssClasses?: string;
-    inputCssClasses?: string;
+    valueClassNames?: string;
+    inputClassNames?: string;
     placeholder?: string;
     elementId?: string;
     errorText?: string;
@@ -26,8 +26,8 @@ export interface DialInputPopupProps {
  *   emptyValueText="No value selected"
  *   onOpen={() => setModalState(true)}
  *   disabled={false}
- *   valueCssClasses="custom-value-class"
- *   inputCssClasses="custom-input-class"
+ *   valueClassNames="custom-value-class"
+ *   inputClassNames="custom-input-class"
  *   elementId="input-modal"
  *   errorText="This field is required"
  * >
@@ -41,8 +41,8 @@ export interface DialInputPopupProps {
  * @param children - The content to render inside the modal when it is opened.
  * @param onOpen - A callback function triggered when the modal open button is clicked.
  * @param [disabled=false] - Whether the input is disabled, preventing user interaction.
- * @param [valueCssClasses] - Additional CSS classes applied to the displayed value.
- * @param [inputCssClasses] - Additional CSS classes applied to the input container.
+ * @param [valueClassNames] - Additional CSS classes applied to the displayed value.
+ * @param [inputClassNames] - Additional CSS classes applied to the input container.
  * @param [elementId] - A unique identifier for the input element, useful for accessibility and testing.
  * @param [errorText] - An optional error message displayed below the input when an error state is present.
  * @param [invalid] - Whether the input is in an invalid state, affecting styling. Applyed automatically if errorText is provided.