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

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 [valueClassNames] - Extra classes applied to the value text in the collapsed field
+ * @param [inputClassNames] - 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/Search/Search.d.ts

@@ -7,8 +7,8 @@ export interface DialSearchProps {
     disabled?: boolean;
     readonly?: boolean;
     invalid?: boolean;
-    cssClass?: string;
-    containerCssClass?: string;
+    className?: string;
+    containerClassName?: string;
     onChange?: (value: string) => void;
     size?: SearchSize;
     allowClear?: boolean;
@@ -35,8 +35,8 @@ export interface DialSearchProps {
  * @param [disabled=false] - Whether the input is disabled
  * @param [readonly=false] - Whether the input is read-only (non-editable)
  * @param [invalid=false] - Whether the input should be styled as invalid
- * @param [cssClass] - Additional CSS classes applied to the input element
- * @param [containerCssClass] - Additional CSS classes applied to the container
+ * @param [className] - Additional CSS classes applied to the input element
+ * @param [containerClassName] - Additional CSS classes applied to the container
  * @param [onChange] - Callback fired when the input value changes
  * @param [size=SearchSize.Base] - The size of the search input. Uses the {@link SearchSize} enum.
  * @param [allowClear=true] - Whether to show a clear button when there is a value

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

@@ -1,13 +1,13 @@
 export declare const SIZE_CONFIG: {
     small: {
-        textClass: string;
-        containerClass: string;
+        textClassName: string;
+        containerClassName: string;
         iconSize: number;
         iconStroke: number;
     };
     base: {
-        textClass: string;
-        containerClass: string;
+        textClassName: string;
+        containerClassName: string;
         iconSize: number;
         iconStroke: number;
     };

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

@@ -20,7 +20,7 @@ export interface DialSelectProps {
     emptyStateDescription?: string;
     emptyStateIcon?: ReactNode;
     disabled?: boolean;
-    cssClass?: string;
+    className?: string;
     closable?: boolean;
     header?: ReactNode | (() => ReactNode);
     footer?: ReactNode | (() => ReactNode);
@@ -71,7 +71,7 @@ export interface DialSelectProps {
  * @param [emptyStateDescription] - Description text when there are no options.
  * @param [emptyStateIcon] - Icon to display when there are no options.
  * @param [disabled=false] - Disable the control.
- * @param [cssClass] - Additional CSS classes for the trigger.
+ * @param [className] - Additional CSS classes for the trigger.
  * @param [closable=false] - Show a close button in the dropdown header.
  * @param [header] - Custom node/function rendered above the options.
  * @param [footer] - Custom node/function rendered below the options.

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

@@ -1,8 +1,8 @@
-export declare const selectTriggerBaseClasses = "dial-input flex w-full items-center justify-between gap-2 dial-small";
-export declare const selectOverlayBaseClasses = "w-full rounded flex flex-col";
-export declare const selectOptionBaseClasses = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
-export declare const selectOptionSelectedClasses = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClasses = "bg-accent-primary-alpha border-l border-accent-primary border-1";
-export declare const selectOptionDisabledClasses = "opacity-75";
+export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small";
+export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionDisabledClassName = "opacity-75";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -2,9 +2,9 @@ import { FC } from 'react';
 import { DialFormItemProps } from '../FormItem/FormItem';
 import { DialSelectProps } from '../Select/Select';
 import { DialFieldLabelProps } from '../Field/Field';
-export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass' | 'elementId'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
-    selectCssClass?: string;
-    containerCssClass?: string;
+export interface DialSelectFieldProps extends Omit<DialSelectProps, 'className' | 'elementId'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
+    selectClassName?: string;
+    containerClassName?: string;
 }
 /**
  * A Select field wrapper that composes `DialFormItem` and `DialSelect`.
@@ -26,12 +26,12 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass' |
  * />
  *
  * @params - Component properties extending:
- * - {@link DialSelectProps} for select options and props, except for cssClass
+ * - {@link DialSelectProps} for select options and props, except for className
  * - {@link DialFormItemProps} for form item props, except for htmlFor
  * - {@link DialFieldLabelProps} for label props, except for label, children, value
  *
- * @param selectCssClass CSS class for the select element
- * @param containerCssClass CSS class for the form item container
+ * @param selectClassName CSS class for the select element
+ * @param containerClassName CSS class for the form item container
  * @param emptyStateTitle Title to show when there are no options
  * @param restSelectProps All other DialSelect props
  * @param restFormItemProps All other DialFormItem props

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

@@ -2,7 +2,7 @@ import { FC } from 'react';
 export interface DialSharedEntityIndicatorProps {
     label?: string;
     size?: number;
-    cssClass?: string;
+    className?: string;
     stroke?: number;
 }
 /**
@@ -18,7 +18,7 @@ export interface DialSharedEntityIndicatorProps {
  *
  * @param [label="Shared entity"] - Accessible label for assistive tech
  * @param [size=10] - Pixel size for the icon
- * @param [cssClass] - Additional Tailwind classes appended to the container
+ * @param [className] - Additional Tailwind classes appended to the container
  * @param [stroke=2] - Stroke width for the icon
  *
  */

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

@@ -2,7 +2,7 @@ import { TagVariant } from '../../types/tag';
 import { FC, MouseEvent, ReactNode } from 'react';
 export interface DialTagProps {
     tag: string;
-    cssClass?: string;
+    className?: string;
     remove?: (event: MouseEvent<HTMLButtonElement>) => void;
     variant?: TagVariant;
     iconBefore?: ReactNode;
@@ -22,7 +22,7 @@ export interface DialTagProps {
  * ```
  *
  * @param tag - The text label displayed inside the tag.
- * @param [cssClass] - Optional additional CSS classes applied to the tag container.
+ * @param [className] - Optional additional CSS classes applied to the tag container.
  * @param [remove] - Optional callback invoked when the remove button is clicked.
  *                   If not provided, the remove button will not be rendered.
  * @param [variant=TagVariant.Default] - Visual style of the tag. Uses the {@link TagVariant} enum.

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

@@ -33,9 +33,9 @@ export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
  * @param [iconBefore] - Icon or element to display before the input
  * @param [iconAfter] - Icon or element to display after the input
  * @param [textBeforeInput] - Text to display before the input
- * @param [elementCssClass] - Additional CSS classes to apply to the textarea element
- * @param [containerCssClass] - Additional CSS classes to apply to the outer container
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the textarea container
+ * @param [elementClassName] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName] - Additional CSS classes to apply to the outer container
+ * @param [elementContainerClassName] - Additional CSS classes to apply to the textarea container
  * @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
  */
 export declare const DialTextAreaField: FC<DialTextAreaFieldProps>;

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

@@ -3,8 +3,8 @@ export interface DialTextareaProps {
     value?: string | number | null;
     placeholder?: string;
     textareaId: string;
-    cssClass?: string;
-    containerCssClass?: string;
+    className?: string;
+    containerClassName?: string;
     disabled?: boolean;
     invalid?: boolean;
     readonly?: boolean;
@@ -28,8 +28,8 @@ export interface DialTextareaProps {
  * @param [value] - The current value of the textarea
  * @param [onChange] - Callback function called when the textarea value changes
  * @param [placeholder] - Placeholder text displayed when textarea is empty
- * @param [cssClass=""] - Additional CSS classes to apply to the textarea element
- * @param [containerCssClass=""] - Additional CSS classes to apply to the container div
+ * @param [className=""] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName=""] - Additional CSS classes to apply to the container div
  * @param [disabled=false] - Whether the textarea is disabled
  * @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.5.0-rc.41",
+  "version": "0.5.0-rc.42",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",