@epam/ai-dial-ui-kit 0.5.0-rc.5 → 0.5.0-rc.50

package/dist/src/components/FileManager/hooks/use-file-upload.d.ts

@@ -0,0 +1,34 @@
+import { DragEvent } from 'react';
+import { DialFile } from '../../../models/file';
+import { DialUploadFileItem } from '../../../models/file-manager';
+export interface FileUploadValidationResult {
+    valid: boolean;
+    message?: string;
+}
+export interface FileUploadValidationMessages {
+    duplicateFiles?: string;
+    oversizedFiles?: string;
+    validationFailed?: string;
+    validationError?: string;
+}
+export interface UseFileUploadOptions {
+    onUploadFiles?: (files: DialUploadFileItem[], destinationFolder: string) => void;
+    onValidateUpload?: (files: DialUploadFileItem[], existingFiles: DialFile[], destinationFolder: string) => FileUploadValidationResult | Promise<FileUploadValidationResult>;
+    maxFileSize?: number;
+    validationMessages?: FileUploadValidationMessages;
+    onUploadArchive?: (file: File, name: string, destinationFolder: string) => void;
+}
+export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileSize, validationMessages, onUploadArchive, }?: UseFileUploadOptions) => {
+    isDragging: boolean;
+    isDraggingOverWindow: boolean;
+    uploadError: string | undefined;
+    handleDragEnter: (e: DragEvent) => void;
+    handleDragLeave: (e: DragEvent) => void;
+    handleDragOver: (e: DragEvent) => void;
+    handleDrop: (e: DragEvent, destinationFolder: string, existingFiles: DialFile[]) => Promise<void>;
+    clearError: () => void;
+    handleUpload: (files: DialUploadFileItem[], destinationFolder: string, existingFiles: DialFile[]) => Promise<boolean>;
+    openFileDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
+    openArchiveDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
+    fileInputRef: import('react').RefObject<HTMLInputElement | null>;
+};

package/dist/src/components/FileManager/hooks/use-folder-creation.d.ts

@@ -0,0 +1,21 @@
+import { DialFile } from '../../../models/file';
+import { DialUploadFileItem } from '../../../models/file-manager';
+export interface FolderCreationValidationMessages {
+    emptyName?: string;
+    duplicateName?: string;
+}
+export interface UseFolderCreationProps {
+    currentFolder?: DialFile;
+    onCreateFolder?: (file: DialUploadFileItem, folderPath: string, fileId: string) => void | Promise<void>;
+    onValidateFolderName?: (name: string, parentFolder: DialFile) => string | null;
+    validationMessages?: FolderCreationValidationMessages;
+}
+export interface UseFolderCreationResult {
+    isCreatingFolder: boolean;
+    newFolderTempId: string | null;
+    startFolderCreation: () => void;
+    cancelFolderCreation: () => void;
+    saveFolderCreation: (name: string) => Promise<void>;
+    validateFolderName: (name: string) => string | null;
+}
+export declare const useFolderCreation: ({ currentFolder, onCreateFolder, onValidateFolderName, validationMessages, }: UseFolderCreationProps) => UseFolderCreationResult;

package/dist/src/components/FileManager/hooks/use-grid-context-menu.d.ts

@@ -0,0 +1,20 @@
+import { DialFile } from '../../../models/file';
+import { DialFileManagerActions } from '../../../types/file-manager';
+import { DropdownItem } from '../../../models/dropdown';
+export interface UseGridContextMenuProps {
+    actionLabels?: {
+        [DialFileManagerActions.Duplicate]?: string;
+        [DialFileManagerActions.Copy]?: string;
+        [DialFileManagerActions.Rename]?: string;
+        [DialFileManagerActions.Download]?: string;
+        [DialFileManagerActions.Delete]?: string;
+        [DialFileManagerActions.Move]?: string;
+    };
+    onDuplicate: (file: DialFile) => void;
+    onCopy: (file: DialFile) => void;
+    onMove: (file: DialFile) => void;
+    onDownload: (file: DialFile) => void;
+    onRename: (filePath: string) => void;
+    onDelete: (file: DialFile, parentFolderPath: string) => void;
+}
+export declare const useGridContextMenu: ({ actionLabels, onDuplicate, onCopy, onMove, onDownload, onRename, onDelete, }: UseGridContextMenuProps) => (file: DialFile) => DropdownItem[];

package/dist/src/components/FileManager/hooks/use-item-renaming.d.ts

@@ -1,11 +1,13 @@
 import { DialFile } from '../../../models/file';
-import { DialCopiedItem } from '../../../types/file-manager';
-export declare const useItemRenaming: ({ items, onRename, onRenameSave, onRenameCancel, onRenameValidate, onMoveToFiles, }: {
+import { DialCopiedItem } from '../../../models/file-manager';
+export interface RenameValidationMessages {
+    emptyName?: string;
+    duplicateName?: string;
+}
+export declare const useItemRenaming: ({ items, onRenameValidate, validationMessages, onMoveToFiles, }: {
     items?: DialFile[];
-    onRename?: (path: string) => void;
-    onRenameSave?: (value: string) => void;
-    onRenameCancel?: () => void;
     onRenameValidate?: (value: string, item: DialFile) => string | null;
+    validationMessages?: RenameValidationMessages;
     onMoveToFiles?: (items: DialCopiedItem[], sourceFolder: string, destinationFolder: string) => void;
 }) => {
     renamedPath: string | undefined;

package/dist/src/components/FileManager/hooks/use-new-actions.d.ts

@@ -0,0 +1,16 @@
+import { DropdownItem } from '../../../models/dropdown';
+export interface UseNewActionsProps {
+    newActionLabels?: {
+        uploadFiles?: string;
+        newFolder?: string;
+        uploadArchive?: string;
+    };
+    onUploadFiles?: () => void;
+    onCreateFolder?: () => void;
+    onUploadArchive?: () => void;
+}
+export interface UseNewActionsResult {
+    newActions: DropdownItem[];
+    isNewButtonVisible: boolean;
+}
+export declare const useNewActions: ({ newActionLabels, onUploadFiles, onCreateFolder, onUploadArchive, }: UseNewActionsProps) => UseNewActionsResult;

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

@@ -1,8 +1,9 @@
 import { FC } from 'react';
 export interface DialFileNameProps {
     name: string;
-    cssClass?: string;
+    className?: string;
     shared?: boolean;
+    iconSize?: number;
 }
 /**
  * Component to display a file name with a file icon and shared indicator.
@@ -14,7 +15,8 @@ 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.
  */
 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,12 +6,14 @@ 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>;
     onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    onSelectionChangeWithMap?: (selectedRows: Map<string, T>) => void;
     getRowId?: (row: T) => string;
     alternateOddRowColors?: boolean;
     filterPlaceholder?: string;
@@ -19,6 +21,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
     emptyStateTitle?: string;
     emptyStateDescription?: string;
     loading?: boolean;
+    wrapperBorder?: boolean;
 }
 /**
  * DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
@@ -89,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
@@ -103,5 +106,6 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @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").
  * @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, onSelectionChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, }: 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/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).
@@ -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/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