@epam/ai-dial-ui-kit 0.5.0-rc.1 → 0.5.0-rc.100

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

@@ -1,6 +1,39 @@
 import { DialFile } from '../../models/file';
+export declare const findNodeByPath: (nodes: DialFile[] | undefined, path: string) => DialFile | undefined;
 export declare const findFolderForPath: (root: DialFile[] | undefined, path?: string) => DialFile | undefined;
 export declare const normalizeToLowerCase: (input?: string) => string;
 export declare const normalizeExtensionWithoutDot: (input?: string) => string;
 export declare const collectAllDescendants: (folder?: DialFile) => DialFile[];
 export declare const isHiddenDotFile: (node: DialFile) => boolean;
+/**
+ * Formats bytes into a short, human-readable string.
+ *
+ * @param bytes - Number of bytes to format
+ * @returns Formatted string (e.g., "15.0 MB", "150 KB", "512 bytes")
+ *
+ * @example
+ * ```ts
+ * formatBytes(2150) // "2 KB"
+ * formatBytes(15728640) // "15.0 MB"
+ * formatBytes(512) // "512 bytes"
+ * ```
+ */
+export declare const formatBytes: (bytes?: number) => string;
+/**
+ * Formats date string into a localized date string.
+ *
+ * @param date - ISO date string or any valid date string
+ * @param locale - BCP 47 language tag (e.g., 'en-US', 'ru-RU')
+ * @param options - Intl.DateTimeFormat options
+ * @returns Formatted date string or original string if formatting fails
+ *
+ * @example
+ * ```ts
+ * formatDate('2025-09-05T10:30:00Z', 'en-US', { year: 'numeric', month: 'short', day: '2-digit' })
+ * // "Sep 05, 2025"
+ *
+ * formatDate('2025-09-05T10:30:00Z', 'ru-RU', { year: 'numeric', month: 'long', day: 'numeric' })
+ * // "5 сентября 2025 г."
+ * ```
+ */
+export declare const formatDate: (date?: string, locale?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions) => string;

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

@@ -1,20 +1,34 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export interface DialFileNameProps {
     name: string;
-    cssClass?: string;
+    className?: string;
     shared?: boolean;
+    iconSize?: number;
+    details?: ReactNode;
 }
 /**
  * Component to display a file name with a file icon and shared indicator.
  * Handles long names with ellipsis and tooltip.
  *
+ * If `details` is provided (e.g., file size, date), the component switches to
+ * a vertical layout and renders the extra information below the file name.
+ *
  * @example
  * ```tsx
+ * // Without details
  * <DialFileName name="Document.pdf" />
+ *
+ * // With details (file size and updated date)
+ * <DialFileName
+ *   name="Document.pdf"
+ *   details={<span className="text-secondary">24 KB · Jul 20, 2025</span>}
+ * />
  * ```
  *
- * @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
+ * @param name - Full file name with or without extension.
+ * @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.
+ * @param details - Optional metadata block displayed under the file name (e.g., size, modified date).
  */
 export declare const DialFileName: FC<DialFileNameProps>;

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

@@ -1,9 +1,10 @@
 import { FC } from 'react';
 export interface DialFolderNameProps {
     name: string;
-    cssClass?: string;
+    className?: string;
     shared?: boolean;
     loading?: boolean;
+    iconSize?: number;
 }
 /**
  * Component to display a folder name with a folder icon and shared indicator.
@@ -15,7 +16,9 @@ export interface DialFolderNameProps {
  * ```
  *
  * @param name - Folder name
- * @param cssClass - Additional CSS classes for the root container
- * @param shared - Whether the folder is shared
+ * @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.
  */
 export declare const DialFolderName: FC<DialFolderNameProps>;

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,18 +6,24 @@ 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);
     selectedRowIds?: Set<string>;
+    selectedRows?: Map<string, T>;
+    selectionOnHover?: boolean;
     onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    onSelectionChangeWithMap?: (selectedRows: Map<string, T>) => void;
     getRowId?: (row: T) => string;
     alternateOddRowColors?: boolean;
     filterPlaceholder?: string;
     emptyStateIcon?: ReactNode;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
+    loading?: boolean;
+    wrapperBorder?: boolean;
+    withoutHeaderBorders?: boolean;
 }
 /**
  * DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
@@ -30,6 +36,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * - Controlled or uncontrolled selection modes
  * - Automatic column sizing and responsive behavior
  * - Full accessibility support with ARIA attributes
+ * - Loading state with native AG-Grid overlay
  *
  * @example
  * ```tsx
@@ -48,7 +55,13 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * <DialGrid<Product>
  *   columnDefs={columns}
  *   rowData={products}
- *   storageKey="products-grid"
+ * />
+ *
+ * // With loading state
+ * <DialGrid<Product>
+ *   columnDefs={columns}
+ *   rowData={products}
+ *   loading={true}
  * />
  *
  * // With context menu
@@ -81,11 +94,13 @@ 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
  * @param [selectedRowIds] - Controlled selection: set of row IDs that should be selected
+ * @param [selectedRows] - Controlled selection: map of row IDs to row data for selected rows
+ * @param [selectionOnHover=true] - Whether row selection highlights are shown on hover
  * @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
@@ -93,6 +108,9 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [emptyStateIcon] - Optional icon for empty state
  * @param [emptyStateTitle] - Optional title text displayed when the grid has no rows to show.
  * @param [emptyStateDescription] - Optional description text displayed below the empty state title,
- *   providing additional context or instructions (e.g., “No data found” or “Try adjusting your filters”).
+ *   providing additional context or instructions (e.g., "No data found" or "Try adjusting your filters").
+ * @param [loading=false] - When true, shows AG-Grid's native loading overlay
+ * @param [wrapperBorder=true] - Whether to apply a border around the grid container
+ * @param [withoutHeaderBorders=false] - Whether to hide the header row borders
  */
-export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, onSelectionChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, }: 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, selectionOnHover, onSelectionChange, onSelectionChangeWithMap, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, }: 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/hooks/use-grid-selection.d.ts

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

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).
@@ -26,7 +26,7 @@ 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 [emptyPlaceholder] - Placeholder when value is empty/invalid.
+ * @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/Icon/Icon.d.ts

@@ -2,7 +2,6 @@ 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

@@ -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;
+    valueClassName?: string;
+    inputClassName?: 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"
+ *   valueClassName="custom-value-class"
+ *   inputClassName="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 [valueClassName] - Additional CSS classes applied to the displayed value.
+ * @param [inputClassName] - 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.

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

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 export interface DialLoaderProps {
     size?: number;
-    cssClass?: string;
-    iconClass?: string;
+    className?: string;
+    iconClassName?: string;
     fullWidth?: boolean;
     ariaLabel?: string;
 }
@@ -20,12 +20,12 @@ export interface DialLoaderProps {
  * <DialLoader fullWidth={false} />
  *
  * // Custom size and classes
- * <DialLoader size={24} iconClass="text-accent-primary" />
+ * <DialLoader size={24} iconClassName="text-accent-primary" />
  * ```
  *
  * @param [size=18] - Icon size in px
- * @param [cssClass] - Additional classes for the container
- * @param [iconClass] - Additional classes for the SVG icon
+ * @param [className] - Additional classes for the container
+ * @param [iconClassName] - Additional classes for the SVG icon
  * @param [fullWidth=true] - Stretch to full width/height of container
  * @param [ariaLabel='Loading'] - Accessible label for screen readers
  */

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

@@ -1,2 +1,2 @@
-export declare const loaderBaseClasses = "flex items-center justify-center text-secondary";
-export declare const loaderIconBaseClasses = "shrink-0 grow-0 basis-auto animate-spin-steps";
+export declare const loaderBaseClassName = "flex items-center justify-center text-secondary";
+export declare const loaderIconBaseClassName = "shrink-0 grow-0 basis-auto animate-spin-steps";

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

@@ -3,9 +3,9 @@ export interface DialNoDataContentProps {
     icon?: ReactNode;
     title: string;
     description?: string;
-    containerCssClass?: string;
-    titleCssClass?: string;
-    descriptionCssClass?: string;
+    containerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
 }
 /**
  * A component for displaying a message and icon when there is no data to show.
@@ -21,5 +21,8 @@ export interface DialNoDataContentProps {
  * @param [icon] - Custom icon to display (defaults to clipboard icon)
  * @param title - The message to display when no data is present
  * @param [description] - The description to display when no data is present
+ * @param [containerClassName] - Additional CSS classes for the container
+ * @param [titleClassName] - Additional CSS classes for the title text
+ * @param [descriptionClassName] - Additional CSS classes for the description text
  */
 export declare const DialNoDataContent: FC<DialNoDataContentProps>;

package/dist/src/components/PasswordInput/PasswordInputField.d.ts

@@ -24,6 +24,6 @@ export interface DialPasswordInputFieldProps extends DialInputFieldBaseProps {
  * @param [onChange] - Callback function called when the input value changes
  * @param [errorText] - Error message to display below the input
  * @param [optional=false] - Whether the field is optional
- * @param [cssClass] - Custom CSS class for the input element
+ * @param [className] - Custom CSS class for the input element
  */
 export declare const DialPasswordInputField: FC<DialPasswordInputFieldProps>;

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

@@ -4,9 +4,9 @@ export interface DialPopupProps {
     open?: boolean;
     title?: string | ReactNode;
     portalId?: string;
-    cssClass?: string;
-    overlayClass?: string;
-    headingClass?: string;
+    className?: string;
+    overlayClassName?: string;
+    headingClassName?: string;
     dividers?: boolean;
     children?: ReactNode;
     footer?: ReactNode;
@@ -40,9 +40,9 @@ export interface DialPopupProps {
  * @param [open=false] - Controls visibility of the popup
  * @param [title] - Optional title rendered in the header
  * @param [portalId] - Optional portal container id
- * @param [cssClass] - Additional CSS classes applied to the popup container
- * @param [overlayClass] - Additional CSS classes applied to the overlay
- * @param [headingClass] - Additional CSS classes applied to the title element
+ * @param [className] - Additional CSS classes applied to the popup container
+ * @param [overlayClassName] - Additional CSS classes applied to the overlay
+ * @param [headingClassName] - Additional CSS classes applied to the title element
  * @param [dividers=true] - Whether to render separators between sections
  * @param [children] - Body content
  * @param [footer] - Footer area for actions

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

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../types/popup';
-export declare const overlayBaseClasses = "z-[52] flex items-center justify-center bg-blackout md:p-4";
-export declare const popupDividerClasses = "divide-tertiary divide-y";
-export declare const popupHeaderClasses = "flex flex-row justify-between py-4 px-6 items-center";
+export declare const overlayBaseClassName = "z-[52] flex items-center justify-center bg-blackout md:p-4";
+export declare const popupDividerClassName = "divide-tertiary divide-y";
+export declare const popupHeaderClassName = "flex flex-row justify-between py-4 px-6 items-center";
 export declare const popupSizeClassMap: Record<PopupSize, string>;

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

@@ -6,11 +6,11 @@ export interface DialRadioButtonProps {
     description?: ReactNode;
     checked?: boolean;
     inputId: string;
-    cssClass?: string;
-    labelCssClass?: string;
+    className?: string;
+    labelClassName?: string;
     disabled?: boolean;
     onChange?: (value: string) => void;
-    descriptionCssClass?: string;
+    descriptionClassName?: string;
 }
 /**
  * A stylized, accessible radio input with optional description.
@@ -37,10 +37,10 @@ export interface DialRadioButtonProps {
  * @param [description] - Supporting text shown when checked
  * @param [checked=false] - Controlled checked state
  * @param inputId - ID associated with the label
- * @param [cssClass] - Additional classes applied to the input element
- * @param [labelCssClass] - Additional classes applied to the label element
+ * @param [className] - Additional classes applied to the input element
+ * @param [labelClassName] - Additional classes applied to the label element
  * @param [disabled] - Disabled state of the control
  * @param [onChange] - Callback fired with `value` when the radio is changed
- * @param [descriptionCssClass] - Additional classes applied to the description block
+ * @param [descriptionClassName] - Additional classes applied to the description block
  */
 export declare const DialRadioButton: FC<DialRadioButtonProps>;

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

@@ -9,16 +9,16 @@ export interface DialRadioGroupProps {
     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;
+    radioClassName?: string;
+    groupLabelClassName?: string;
+    labelClassName?: string;
+    containerClassName?: string;
+    formItemChildrenClassName?: string;
+    selectedItemClassName?: string;
+    selectedLabelClassName?: string;
+    radioGroupClassName?: string;
+    inputContainerClassName?: string;
+    selectedInputContainerClassName?: string;
 }
 /**
  * Groups multiple `DialRadio` options and renders custom content for the active option.
@@ -43,16 +43,16 @@ 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 [radioClassName] - Additional classes applied to each radio input
+ * @param [inputContainerClassName] - Additional classes applied to each radio input's container
+ * @param [selectedInputContainerClassName] - Additional classes applied to the selected radio input's container
+ * @param [groupLabelClassName] - Optional classes applied to the group label. If not provided, `labelClassName` will be used.
+ * @param [formItemChildrenClassName] - Additional classes applied to the DialFormItem's children container
+ * @param [labelClassName] - Additional classes applied to each radio label
+ * @param [containerClassName] - Additional classes applied to the outer container
+ * @param [selectedItemClassName] - Additional classes applied to the selected option's content container
+ * @param [selectedLabelClassName] - Additional classes applied to the selected option's label
+ * @param [radioGroupClassName] - 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

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

@@ -1,5 +1,5 @@
 import { RadioGroupOrientation } from '../../types/radio-group';
-export declare const groupBaseClasses = "flex flex-col gap-2";
-export declare const optionsWrapperBaseClasses = "flex";
-export declare const selectedContentClasses = "pb-1 mt-2";
+export declare const groupBaseClassName = "flex flex-col gap-2";
+export declare const optionsWrapperBaseClassName = "flex";
+export declare const selectedContentClassName = "pb-1 mt-2";
 export declare const orientationClassMap: Record<RadioGroupOrientation, string>;

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

@@ -51,8 +51,8 @@ export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fi
  * @param [selectedValue] - Current value id used to resolve the displayed option name
  * @param radioButtons - Collection of radio options (id/name)
  * @param [customInputValue] - Custom value text to display instead of a radio option name
- * @param [valueCssClasses] - Extra classes applied to the value text in the collapsed field
- * @param [inputCssClasses] - Extra classes applied to the collapsed input container
+ * @param [valueClassName] - Extra classes applied to the value text in the collapsed field
+ * @param [inputClassName] - Extra classes applied to the collapsed input container
  * @param emptyValueText - Placeholder text when no value is selected
  * @param [onClose] - Callback fired when the popup closes
  * @param title - Title text shown in the popup header

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

@@ -1,9 +1,7 @@
-import { FC, MouseEvent } from 'react';
-export interface DialRemoveButtonProps {
-    iconClass?: string;
-    cssClass?: string;
-    ariaLabel?: string;
-    onClick: (e: MouseEvent) => void;
+import { FC } from 'react';
+import { DialButtonProps } from '../Button/Button';
+export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore' | 'iconAfter'> {
+    iconClassName?: string;
 }
 /**
  * A specialized button component for removal or delete actions.
@@ -14,11 +12,11 @@ export interface DialRemoveButtonProps {
  * <DialRemoveButton
  *   label="Delete item"
  *   onClick={handleDelete}
- *   iconClass="text-error"
+ *   iconClassName="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.
+ * @param {string} [props.iconClassName] - 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>;